/* ═══════════════════════════════════════════════════════════════
   HERO SECTION — Logo Communication — hero.css
   Chargé uniquement sur is_front_page()
   Tous les sélecteurs sont scopés à .hero-section
   Aucun sélecteur global (pas de h1, body, * reset)
   ═══════════════════════════════════════════════════════════════ */

/* Variables héritées de main.css (:root)
   --red, --purple, --blue, --grad, --bg-dark, --font-display, --font-body
   Alias local pour rétro-compat des sélecteurs existants */
.hero-section {
    --lc-red:    var(--red);
    --lc-purple: var(--purple);
    --lc-blue:   var(--blue);
    --lc-grad:   var(--grad);
    --lc-bg-dark: var(--bg-dark);
}

/* ─── Wrapper principal ──────────────────────────────────────── */
.hero-section {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--lc-bg-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ─── Noise overlay ──────────────────────────────────────────── */
.hero-section .noise-bg {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 1;
}

/* ─── Ambient glows ──────────────────────────────────────────── */
.hero-section .ambient-glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.hero-section .glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
    transition: transform 0.25s ease-out;
}

.hero-section .glow.red {
    width: 640px;
    height: 640px;
    background: radial-gradient(circle, rgba(176, 29, 44, 0.38) 0%, transparent 70%);
    top: -15%;
    left: -8%;
}

.hero-section .glow.purple {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(123, 31, 162, 0.32) 0%, transparent 70%);
    top: 15%;
    right: 10%;
}

.hero-section .glow.blue {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(46, 40, 157, 0.32) 0%, transparent 70%);
    bottom: -8%;
    right: 28%;
}

/* ─── Container — Stacked (texte au-dessus, cartes centrées) ─── */
.hero-section .hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 70px 3% 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   GAUCHE — Hero Content
   ═══════════════════════════════════════════════════════════════ */

.hero-section .hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

/* Badge pill — masqué (validé) */
.hero-section .badge {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    width: fit-content;
    backdrop-filter: blur(10px);
}

.hero-section .badge svg {
    fill: var(--lc-red);
    flex-shrink: 0;
}

.hero-section .badge > span {
    font-weight: 700;
    color: white;
}

/* H1 */
.hero-section h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(2.4rem, 3.8vw, 4rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    color: white !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
}

/* GSAP text reveal containers */
.hero-section .line-wrap {
    display: block;
    overflow: hidden;
    line-height: 1.05;
}

.hero-section .line-wrap + .line-wrap {
    margin-top: 2px;
}

.hero-section .line {
    display: block;
    transform: translateY(105%);
    white-space: nowrap;
}

/* Gradient text */
.hero-section .text-gradient {
    background: var(--lc-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Description */
.hero-section .hero-desc {
    font-family: var(--font-body);
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
    max-width: 600px;
}

/* CTA group */
.hero-section .cta-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-section .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: var(--lc-grad);
    color: white !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 32px rgba(176, 29, 44, 0.38);
    white-space: nowrap;
}

.hero-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 44px rgba(176, 29, 44, 0.55);
    color: white !important;
}

.hero-section .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 30px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85) !important;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none !important;
    backdrop-filter: blur(10px);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.hero-section .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    color: white !important;
}

/* ═══════════════════════════════════════════════════════════════
   DROITE — Card Slider
   ═══════════════════════════════════════════════════════════════ */

.hero-section .hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

/* V4.6.1 — Slider container centré sur le viewport (pas de décalage left:450px) */
.hero-section .card-slider-container {
    position: relative;
    width: 340px;
    height: 460px;
    cursor: default;
    user-select: none;
    perspective: 4000px;
    perspective-origin: center center;
    transform-style: preserve-3d;
    margin: 0 auto;
    /* left: 450px supprimé pour centrage écran V4.6.1 */
}

/* ── Halo gradient multi-spots derrière les cards ── */

/* Spot chaud (rouge) en haut-gauche + spot froid (bleu) en bas-droite */
.hero-section .card-slider-container::before {
    content: '';
    position: absolute;
    top: 50%; left: 40%;
    transform: translate(-50%, -50%);
    width: 900px; height: 700px;
    background:
        radial-gradient(ellipse 45% 50% at 25% 30%,
            rgba(176, 29, 44, 0.18) 0%,
            rgba(176, 29, 44, 0.06) 40%,
            transparent 70%
        ),
        radial-gradient(ellipse 50% 45% at 80% 75%,
            rgba(46, 40, 157, 0.16) 0%,
            rgba(46, 40, 157, 0.05) 40%,
            transparent 70%
        );
    filter: blur(50px);
    pointer-events: none;
    z-index: -2;
}

/* Spot central violet dominant */
.hero-section .card-slider-container::after {
    content: '';
    position: absolute;
    top: 45%; left: 45%;
    transform: translate(-50%, -50%);
    width: 800px; height: 600px;
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
        rgba(123, 31, 162, 0.22) 0%,
        rgba(123, 31, 162, 0.10) 30%,
        rgba(46, 40, 157, 0.06) 55%,
        transparent 75%
    );
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}

/* Stack card base — effet noir métal
   V4.6 — Layout éventail centré : la card en pos-0 est au centre du container,
   les autres se déploient symétriquement à droite/gauche. */
.hero-section .stack-card {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -170px; /* centrage horizontal (170 = width/2) */
    width: 340px;
    /* V3.4-fix9 — Cards pleinement opaques : suppression des 2 gradients
       de sheen translucides + backdrop-filter. On garde uniquement la
       base aluminium anodisé noir (opaque) pour un rendu solide premium. */
    background:
        linear-gradient(180deg,
            #282634 0%,
            #0e0c16 40%,
            #0a0812 70%,
            #14121e 100%
        );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform-style: preserve-3d;
    cursor: pointer;
    transition: transform 0.65s cubic-bezier(0.34, 1.2, 0.64, 1),
                opacity   0.65s ease,
                box-shadow 0.65s ease,
                scale 0.3s ease;
    will-change: transform, opacity;
    box-shadow:
        0 30px 60px rgba(0,0,0,0.85),
        0 0 0 1px rgba(255,255,255,0.06),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.5),
        inset 40px 0 60px -40px rgba(255,255,255,0.03),
        inset -40px 0 60px -40px rgba(255,255,255,0.02);
}

/* V3.4-fix10 — Reflet métal supprimé pour rendu pleinement opaque
   (le ::before ajoutait un overlay translucide qui laissait transparaître
   le background hero violet à travers la card). */
.hero-section .stack-card::before {
    content: none;
}

/* Liseré lumineux bord supérieur */
.hero-section .stack-card::after {
    content: '';
    position: absolute;
    top: -1px; left: 5%; right: 5%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 15%,
        rgba(255,255,255,0.36) 35%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0.36) 65%,
        rgba(255,255,255,0.18) 85%,
        transparent 100%
    );
    border-radius: 24px;
    pointer-events: none;
    z-index: 11;
    filter: blur(0.5px);
}

/* V4.6 — Hover : la card survolée passe au vrai premier plan 3D.
   On surcharge le transform de chaque pos-* pour forcer translateZ(160px)
   tout en conservant le translateX/rotateY d'origine. */
.hero-section .stack-card:hover {
    z-index: 100 !important;
    filter: brightness(1.08);
    box-shadow: 0 50px 100px rgba(0,0,0,0.7), 0 0 40px rgba(176,29,44,0.15);
    transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1),
                z-index 0s,
                filter 0.35s ease,
                box-shadow 0.4s ease;
}
/* V4.6.1 — Hover : la carte passe devant + redresse rotateY pour lisibilité */
.hero-section .stack-card.pos-0:hover { transform: translateX(0)      translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-1:hover { transform: translateX(220px)  translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-2:hover { transform: translateX(-220px) translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-3:hover { transform: translateX(420px)  translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-4:hover { transform: translateX(-420px) translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-5:hover { transform: translateX(600px)  translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }
.hero-section .stack-card.pos-6:hover { transform: translateX(-600px) translateY(-8px) translateZ(120px) rotateY(0deg) scale(1.05); }

/* ═══════════════════════════════════════════════════════════════
   V4.6.1 — Éventail centré écran, espacement large, profondeur réduite
   Gaps : ±220px (proche) / ±420px (moyen) / ±600px (extrême)
   RotateY doux : ±6° / ±10° / ±14° (au lieu de ±14/22/30 — moins de perspective)
   Scale subtil : 0.95 / 0.88 / 0.80 (transitions douces)
   ═══════════════════════════════════════════════════════════════ */
.hero-section .stack-card.pos-0 {
    transform: translateX(0) translateY(0) translateZ(20px) rotateY(0deg) scale(1);
    opacity: 1;
    z-index: 50;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        -8px 0 30px rgba(123, 31, 162, 0.12),
        8px 0 30px rgba(46, 40, 157, 0.08);
}

/* Niveau 1 — droite proche */
.hero-section .stack-card.pos-1 {
    transform: translateX(220px) translateY(0) translateZ(-10px) rotateY(-6deg) scale(0.95);
    opacity: 1;
    z-index: 40;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Niveau 1 — gauche proche */
.hero-section .stack-card.pos-2 {
    transform: translateX(-220px) translateY(0) translateZ(-10px) rotateY(6deg) scale(0.95);
    opacity: 1;
    z-index: 40;
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* V3.4-fix10 — Toutes les positions à opacity:1 (cards pleinement opaques).
   Avant : pos-3/4 = 0.95, pos-5/6 = 0.85 → le fond hero violet transparaissait
   à travers les cards. Désormais : background opaque pour TOUTES les positions
   éloignées du centre + opacity 1. */

/* Niveau 2 — droite moyen */
.hero-section .stack-card.pos-3 {
    transform: translateX(420px) translateY(0) translateZ(-20px) rotateY(-10deg) scale(0.88);
    opacity: 1;
    z-index: 30;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
}

/* Niveau 2 — gauche moyen */
.hero-section .stack-card.pos-4 {
    transform: translateX(-420px) translateY(0) translateZ(-20px) rotateY(10deg) scale(0.88);
    opacity: 1;
    z-index: 30;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
}

/* Niveau 3 — droite extrême */
.hero-section .stack-card.pos-5 {
    transform: translateX(600px) translateY(0) translateZ(-35px) rotateY(-14deg) scale(0.80);
    opacity: 1;
    z-index: 20;
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
}

/* Niveau 3 — gauche extrême */
.hero-section .stack-card.pos-6 {
    transform: translateX(-600px) translateY(0) translateZ(-35px) rotateY(14deg) scale(0.80);
    opacity: 1;
    z-index: 20;
    background: linear-gradient(160deg, #1a1828 0%, #111020 40%, #0d0b16 70%, #16142a 100%);
}

/* Card image wrapper */
.hero-section .card-img-wrapper {
    position: relative;
    width: 100%;
    height: 175px;
    background: linear-gradient(135deg, rgba(176, 29, 44, 0.2) 0%, rgba(46, 40, 157, 0.25) 100%);
    overflow: hidden;
    flex-shrink: 0;
}

.hero-section .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

.hero-section .stack-card.pos-0 .card-img-wrapper img {
    transform: scale(1.02);
}

/* Floating tag */
.hero-section .floating-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 13px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    color: white;
    z-index: 2;
    letter-spacing: 0.02em;
}
.hero-section .floating-tag.tag-purple { color: #e0a0ff; }
.hero-section .floating-tag.tag-blue   { color: #a0b4ff; }

/* Cards côté GAUCHE (pos-2, pos-4, pos-6 = translateX négatif) : badge déplacé
   en haut à GAUCHE. Sur ces cards le bord droit est masqué par la card devant,
   donc un badge top-right serait rogné. Le coin supérieur gauche reste exposé.
   Les classes pos-* sont réassignées dynamiquement par js/hero.js → le badge
   suit toujours la position visuelle, pas une card figée. */
.hero-section .stack-card.pos-2 .floating-tag,
.hero-section .stack-card.pos-4 .floating-tag,
.hero-section .stack-card.pos-6 .floating-tag {
    right: auto;
    left: 12px;
}

/* Card content area */
.hero-section .card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.hero-section .card-header h3 {
    font-family: var(--font-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: white !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.hero-section .card-content > p {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* Ratings rows */
.hero-section .card-ratings {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hero-section .rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-section .rating-row > span {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.hero-section .stars {
    display: flex;
    gap: 2px;
    line-height: 1;
}

.hero-section .stars span {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.15);
}

.hero-section .stars span.filled {
    background: var(--lc-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card CTA */
.hero-section .card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 16px;
    margin-top: 4px;
    background: var(--lc-grad);
    border: none;
    border-radius: 14px;
    color: #fff !important;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

.hero-section .card-btn:hover {
    filter: brightness(1.2);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(123, 31, 162, 0.4);
    color: #fff !important;
}

.hero-section .card-btn svg {
    flex-shrink: 0;
    stroke: currentColor;
}

/* ─── Slider navigation (dots + arrows) ──────────────────────── */
.hero-section .slider-nav {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hero-section .slider-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-section .slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 0;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-section .slider-arrow:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.hero-section .nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width 0.35s ease, border-radius 0.35s ease, background 0.35s ease;
    -webkit-appearance: none;
    appearance: none;
}

.hero-section .nav-dot.active {
    width: 24px;
    border-radius: 4px;
    background: var(--lc-grad);
}

.hero-section .nav-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.45);
}

/* Hide arrows on small screens, keep dots */
@media (max-width: 640px) {
    .hero-section .slider-arrow { display: none; }
}

/* ─── GSAP targets (initial hidden states) ───────────────────── */
.hero-section .fade-up {
    opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Progressive breakpoints
   Le texte a z-index:3, les cartes passent DERRIÈRE si débordement.
   hero-section overflow:hidden clippe ce qui sort du viewport.
   ═══════════════════════════════════════════════════════════════ */

/* ── Laptop compact (≤ 1440px) ──────────────────────────────── */
@media (max-width: 1440px) {
    .hero-section .hero-container {
        gap: clamp(30px, 4vw, 50px);
    }
}

/* ── Small laptop (≤ 1280px) ────────────────────────────────── */
@media (max-width: 1280px) {
    .hero-section .hero-container {
        padding: 90px 3% 30px;
        gap: clamp(16px, 2.5vw, 30px);
    }
    .hero-section h1 {
        font-size: clamp(2rem, 3.2vw, 3.2rem) !important;
    }
    .hero-section .card-slider-container {
        width: 310px;
        height: 470px;
        left: 400px;
    }
    .hero-section .stack-card { width: 310px; }
    .hero-section .card-img-wrapper { height: 180px; }
}

/* ── Tablette portrait (≤ 1024px) ────────────────────────────── */
@media (max-width: 1024px) {
    .hero-section {
        min-height: auto;
    }
    .hero-section .hero-container {
        min-height: auto;
        padding: clamp(100px, 14vh, 140px) 5% clamp(60px, 8vh, 100px);
        gap: 40px;
    }

    .hero-section .card-slider-container {
        width: 320px;
        height: 440px;
        left: 350px;
    }
    .hero-section .stack-card { width: 320px; }
    .hero-section .card-img-wrapper { height: 170px; }
}

/* ── Tablette small / Phablet (≤ 768px) ───────────────────── */
@media (max-width: 768px) {
    .hero-section .hero-container {
        padding: clamp(90px, 12vh, 120px) 5% clamp(50px, 6vh, 80px);
        gap: 36px;
    }
    .hero-section h1 {
        font-size: clamp(2.2rem, 7vw, 3rem) !important;
    }
    .hero-section .card-slider-container {
        width: 300px;
        height: 460px;
        left: 250px;
        transform: translateX(0);
    }
    .hero-section .stack-card { width: 300px; margin-left: -150px; }
    .hero-section .card-img-wrapper { height: 175px; }

    /* V4.6 — Éventail centré tablette (gap réduit 70px / 130px / 190px) */
    .hero-section .stack-card.pos-0 {
        transform: translateX(0) translateY(0) translateZ(20px) rotateY(0deg) scale(1);
    }
    .hero-section .stack-card.pos-1 {
        transform: translateX(70px) translateY(0) translateZ(-15px) rotateY(-14deg) scale(0.92);
    }
    .hero-section .stack-card.pos-2 {
        transform: translateX(-70px) translateY(0) translateZ(-15px) rotateY(14deg) scale(0.92);
    }
    .hero-section .stack-card.pos-3 {
        transform: translateX(130px) translateY(0) translateZ(-30px) rotateY(-22deg) scale(0.82);
        opacity: 0.9;
    }
    .hero-section .stack-card.pos-4 {
        transform: translateX(-130px) translateY(0) translateZ(-30px) rotateY(22deg) scale(0.82);
        opacity: 0.9;
    }
    .hero-section .stack-card.pos-5 {
        transform: translateX(190px) translateY(0) translateZ(-50px) rotateY(-30deg) scale(0.70);
        opacity: 0.65;
    }
    .hero-section .stack-card.pos-6 {
        transform: translateX(-190px) translateY(0) translateZ(-50px) rotateY(30deg) scale(0.70);
        opacity: 0.65;
    }
    /* Hover 3D — 768px (redresse rotateY) */
    .hero-section .stack-card.pos-0:hover { transform: translateX(0)    translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-1:hover { transform: translateX(70px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-2:hover { transform: translateX(-70px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-3:hover { transform: translateX(130px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-4:hover { transform: translateX(-130px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-5:hover { transform: translateX(190px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-6:hover { transform: translateX(-190px) translateY(-8px) translateZ(140px) rotateY(0deg) scale(1.05); }
}

/* ── Mobile (≤ 680px) ─────────────────────────────────────── */
@media (max-width: 680px) {
    .hero-section .card-slider-container {
        width: 280px;
        height: 440px;
        left: 180px;
        transform: translateX(0);
    }
    .hero-section .stack-card { width: 280px; margin-left: -140px; }
    .hero-section .card-img-wrapper { height: 165px; }

    .hero-section h1 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }
    .hero-section .hero-desc { font-size: 15px; }

    /* V4.6 — Éventail mobile compact (gap 55 / 105 / 145) */
    .hero-section .stack-card.pos-0 {
        transform: translateX(0) translateY(0) translateZ(20px) rotateY(0deg) scale(1);
    }
    .hero-section .stack-card.pos-1 {
        transform: translateX(55px) translateY(0) translateZ(-15px) rotateY(-12deg) scale(0.92);
        opacity: 0.95;
    }
    .hero-section .stack-card.pos-2 {
        transform: translateX(-55px) translateY(0) translateZ(-15px) rotateY(12deg) scale(0.92);
        opacity: 0.95;
    }
    .hero-section .stack-card.pos-3 {
        transform: translateX(105px) translateY(0) translateZ(-30px) rotateY(-22deg) scale(0.82);
        opacity: 0.7;
    }
    .hero-section .stack-card.pos-4 {
        transform: translateX(-105px) translateY(0) translateZ(-30px) rotateY(22deg) scale(0.82);
        opacity: 0.7;
    }
    .hero-section .stack-card.pos-5 {
        transform: translateX(145px) translateY(0) translateZ(-45px) rotateY(-30deg) scale(0.70);
        opacity: 0.4;
    }
    .hero-section .stack-card.pos-6 {
        transform: translateX(-145px) translateY(0) translateZ(-45px) rotateY(30deg) scale(0.70);
        opacity: 0.4;
    }
    /* Hover 3D — 680px (redresse rotateY) */
    .hero-section .stack-card.pos-0:hover { transform: translateX(0)    translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-1:hover { transform: translateX(55px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-2:hover { transform: translateX(-55px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-3:hover { transform: translateX(105px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-4:hover { transform: translateX(-105px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-5:hover { transform: translateX(145px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }
    .hero-section .stack-card.pos-6:hover { transform: translateX(-145px) translateY(-8px) translateZ(130px) rotateY(0deg) scale(1.05); }

    /* Glows réduits */
    .hero-section .glow { filter: blur(70px); }
    .hero-section .glow.red    { width: 320px; height: 320px; }
    .hero-section .glow.purple { width: 260px; height: 260px; }
    .hero-section .glow.blue   { width: 220px; height: 220px; }
}

/* ── Mobile petit (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {
    .hero-section .hero-container {
        padding: 90px 4% 50px;
        gap: 30px;
    }

    .hero-section .cta-group {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hero-section .btn-primary,
    .hero-section .btn-secondary {
        justify-content: center;
        padding: 13px 24px;
        font-size: 14px;
    }

    .hero-section .card-slider-container {
        width: 270px;
        height: 420px;
        left: 120px;
    }
    .hero-section .stack-card { width: 270px; }
    .hero-section .card-img-wrapper { height: 155px; }

    .hero-section .card-content { padding: 16px; gap: 10px; }
    .hero-section .card-header h3 { font-size: 18px !important; }
    .hero-section .card-content > p { font-size: 12px; }
    .hero-section .rating-row > span { font-size: 11px; }
    .hero-section .stars span { font-size: 11px; }
    .hero-section .card-btn { padding: 10px 14px; font-size: 12px; }
    .hero-section .floating-tag { font-size: 10px; padding: 4px 10px; }
}

/* ── Très petit mobile (≤ 380px — iPhone SE, etc.) ────────── */
@media (max-width: 380px) {
    .hero-section h1 {
        font-size: clamp(1.7rem, 9vw, 2.2rem) !important;
    }

    .hero-section .badge { font-size: 11px; padding: 6px 12px; }

    .hero-section .card-slider-container {
        width: 250px;
        height: 400px;
        left: 90px;
    }
    .hero-section .stack-card { width: 250px; }
    .hero-section .card-img-wrapper { height: 140px; }
    .hero-section .card-content { padding: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   Effet shiny hover — reflet lumineux glissant
   ═══════════════════════════════════════════════════════════════ */
.hero-section .stack-card .shiny-overlay {
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0) 70%,
        transparent 100%
    );
    z-index: 11;
    pointer-events: none;
    transition: left 0.6s ease;
    border-radius: 24px;
}
.hero-section .stack-card:hover .shiny-overlay {
    left: 120%;
}

/* ─────────────────────────────────────────────────────────────────────
   V4.13.0 — Alignement texte à droite pour les cartes positionnées
   à droite du stack (pos-1 = Lettres Boîtier, pos-3 = Drapeaux,
   pos-5 = Coupe Simple). Améliore la lisibilité quand la carte
   est partiellement masquée par celles devant elle.
   ───────────────────────────────────────────────────────────────────── */
.hero-section .stack-card.pos-1 .card-content,
.hero-section .stack-card.pos-3 .card-content,
.hero-section .stack-card.pos-5 .card-content {
    text-align: right;
}
.hero-section .stack-card.pos-1 .card-content > p,
.hero-section .stack-card.pos-3 .card-content > p,
.hero-section .stack-card.pos-5 .card-content > p,
.hero-section .stack-card.pos-1 .card-header h3,
.hero-section .stack-card.pos-3 .card-header h3,
.hero-section .stack-card.pos-5 .card-header h3 {
    text-align: right;
}
/* Bouton "Configurer mon enseigne" : aligné droite via flex */
.hero-section .stack-card.pos-1 .card-btn,
.hero-section .stack-card.pos-3 .card-btn,
.hero-section .stack-card.pos-5 .card-btn {
    align-self: flex-end;
    flex-direction: row-reverse;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO D'ACCUEIL — MISE EN PAGE MOBILE (v4.13.9)
   Bloc additif sous 768px : le desktop n'est pas touché.
   Corrige : titre tronqué, slider poussé hors écran, contenu masqué
   par l'en-tête fixe, cibles tactiles trop petites, effets coûteux.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Le titre pouvait être coupé : il passe sur plusieurs lignes */
    .hero-section .line { white-space: normal; }
    .hero-section h1 {
        font-size: clamp(1.75rem, 7.2vw, 2.25rem) !important;
        line-height: 1.12 !important;
        letter-spacing: -0.015em;
        text-wrap: balance;
    }
    .hero-section .hero-desc { font-size: 15px; line-height: 1.55; max-width: 34ch; }

    /* Dégage la pile fixe barre + en-tête (29 + 30 + 72) */
    .hero-section { min-height: 0; }
    .hero-section .hero-container { padding: 118px 20px 40px; gap: 24px; min-height: 0; }
    .hero-section .hero-content { gap: 14px; }
    .hero-section .hero-visual { gap: 18px; }

    /* Le carrousel gardait un décalage hérité de la mise en page à deux colonnes */
    .hero-section .card-slider-container { left: 0; width: 280px; height: 340px; perspective: 1200px; }
    .hero-section .stack-card { width: 280px; margin-left: -140px; }
    .hero-section .card-img-wrapper { height: 150px; }
    .hero-section .card-ratings { display: none; }
    .hero-section .card-content { padding: 14px; gap: 8px; }
    .hero-section .card-content > p { font-size: 13px; }
    .hero-section .card-btn { min-height: 46px; font-size: 13px; }

    /* Cibles tactiles confortables */
    .hero-section .slider-arrow {
        display: flex; width: 44px; height: 44px;
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .hero-section .slider-nav { gap: 6px; }
    .hero-section .slider-dots { gap: 14px; }
    .hero-section .nav-dot { position: relative; }
    .hero-section .nav-dot::after { content: ''; position: absolute; inset: -18px -7px; }

    /* Allègement : ces effets coûtent cher pour un gain invisible sur petit écran */
    .hero-section .noise-bg { display: none; }
    .hero-section .glow { filter: blur(48px); will-change: auto; transition: none; }
    .hero-section .card-slider-container::before,
    .hero-section .card-slider-container::after { display: none; }
    .hero-section .stack-card { box-shadow: 0 18px 36px rgba(0,0,0,.6); will-change: auto; }
    .hero-section .stack-card .shiny-overlay { display: none; }
    .hero-section .floating-tag {
        backdrop-filter: none; -webkit-backdrop-filter: none;
        background: rgba(0,0,0,.45);
    }
}

/* Filet de sécurité mobile : si le script d'apparition ne s'exécute pas,
   le titre se révèle au bout de 3 secondes au lieu de rester invisible. */
@keyframes logocom-safety-reveal { to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
    .hero-section .line { animation: logocom-safety-reveal 0s 3s forwards; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO MOBILE — v4.14.3
   Refonte du hero d'accueil sous 768 px. Desktop strictement
   inchangé : tout est confiné au media query ci-dessous.

   Deux défauts corrigés ici :

   1. Le titre partait de `translateY(105%)` dans un conteneur en
      `overflow:hidden`, et n'était ramené en place que par GSAP.
      Tant que le script n'avait pas tourné, le visiteur voyait un
      titre coupé en deux. Sur mobile, le titre n'a plus besoin de
      personne pour être lisible : aucune transformation de départ,
      aucun rognage. GSAP peut toujours l'animer, il ne fait alors
      que rejouer un état déjà correct.

   2. L'éventail de cartes est calibré pour 1440 px : ses décalages
      horizontaux (±220 à ±600 px) débordaient d'un écran de 375 px
      et laissaient dépasser des fragments de mots illisibles
      (« Cais… », « …tier »). Sur mobile il devient une PILE : la
      carte active occupe toute la largeur utile, les suivantes se
      devinent en épaisseurs sous elle. On comprend qu'il y a
      d'autres produits sans afficher un seul mot tronqué.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ─── 1 · Titre lisible dès le premier rendu ───────────────── */
    .hero-section .line-wrap { overflow: visible; }
    .hero-section .line {
        transform: none;
        white-space: normal;
        animation: none;
    }
    .hero-section .hero-content { align-items: center; text-align: center; }
    .hero-section h1 { text-align: center; }
    .hero-section .hero-desc { margin-left: auto; margin-right: auto; }

    /* ─── 2 · La pile de cartes ────────────────────────────────── */
    .hero-section .hero-visual { width: 100%; }
    .hero-section .card-slider-container {
        position: relative;
        left: 0;
        width: 100%;
        max-width: 340px;
        height: auto;
        min-height: 0;
        margin: 0 auto;
        perspective: none;
        transform-style: flat;
        /* Laisse respirer les épaisseurs qui dépassent sous la carte active */
        padding-bottom: 34px;
    }

    /* La carte active dicte la hauteur du bloc : elle reste dans le flux. */
    .hero-section .stack-card.pos-0 {
        transition: opacity .28s ease;
        position: relative;
        left: auto;
        top: auto;
        margin: 0 auto;
        transform: none;
        opacity: 1;
        z-index: 6;
        width: 100%;
        filter: none;
    }

    /* Les autres se superposent derrière, décalées vers le bas. */
    .hero-section .stack-card {
        position: absolute;
        left: 50%;
        top: 0;
        width: 100%;
        margin-left: 0;
        /* Origine en bas : la réduction d'échelle laisse le bord
           inférieur en place, et le décalage vertical devient
           exactement l'épaisseur visible sous la carte active. */
        transform-origin: 50% 100%;
        /* Seule l'opacité est animée. La carte active repasse dans le
           flux (position relative) pour donner sa hauteur au bloc :
           animer sa transformation en même temps que ce changement de
           positionnement la ferait glisser en travers de l'écran. */
        transition: opacity .28s ease;
        pointer-events: none;
        filter: none;
    }
    .hero-section .stack-card.pos-1,
    .hero-section .stack-card.pos-2 {
        transform: translateX(-50%) translateY(12px) scale(.955);
        opacity: .55; z-index: 5;
    }
    .hero-section .stack-card.pos-3,
    .hero-section .stack-card.pos-4 {
        transform: translateX(-50%) translateY(22px) scale(.915);
        opacity: .3; z-index: 4;
    }
    .hero-section .stack-card.pos-5,
    .hero-section .stack-card.pos-6 {
        transform: translateX(-50%) translateY(30px) scale(.88);
        opacity: .16; z-index: 3;
    }
    .hero-section .stack-card.pos-0 { pointer-events: auto; }

    /* Aucun texte de carte inactive ne doit être lisible : c'est
       exactement ce qui donnait l'impression d'un affichage cassé. */
    .hero-section .stack-card:not(.pos-0) .card-content,
    .hero-section .stack-card:not(.pos-0) .card-img-wrapper > *,
    .hero-section .stack-card:not(.pos-0) .floating-tag {
        visibility: hidden;
    }
    .hero-section .stack-card:not(.pos-0) .card-img-wrapper {
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
    }

    /* Le survol n'existe pas au doigt : neutralisé pour éviter qu'un
       tap laisse une carte figée dans son état « survolé ». */
    .hero-section .stack-card:hover,
    .hero-section .stack-card.pos-0:hover { transform: none; }
    .hero-section .stack-card.pos-1:hover,
    .hero-section .stack-card.pos-2:hover {
        transform: translateX(-50%) translateY(12px) scale(.955);
    }
    .hero-section .stack-card.pos-3:hover,
    .hero-section .stack-card.pos-4:hover {
        transform: translateX(-50%) translateY(22px) scale(.915);
    }
    .hero-section .stack-card.pos-5:hover,
    .hero-section .stack-card.pos-6:hover {
        transform: translateX(-50%) translateY(30px) scale(.88);
    }

    /* ─── 3 · Respiration ──────────────────────────────────────── */
    .hero-section .card-img-wrapper { height: 168px; }
    .hero-section .hero-container { padding: 124px 20px 32px; gap: 22px; }
    .hero-section .hero-visual { gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   VISUEL DE PRODUIT MANQUANT — v4.14.3
   Les photos des cartes viennent de la médiathèque. Quand l'une
   d'elles a disparu, l'ancien `onerror` masquait l'image et
   laissait un rectangle vide de 168 px : la carte avait l'air
   cassée. On affiche à la place un panneau sobre qui rappelle de
   quel produit il s'agit. Le remède reste de reverser la photo :
   ce repli sert à ne pas abîmer la page en attendant.
   ═══════════════════════════════════════════════════════════════ */
.hero-section .card-img-wrapper.img-missing {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background:
        radial-gradient(120% 80% at 20% 0%, rgba(229,0,126,.14), transparent 60%),
        linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}
.hero-section .card-img-wrapper.img-missing::after {
    content: attr(data-missing-label);
    display: block;
    padding: 12px 14px;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;
    color: rgba(255,255,255,.62);
    text-align: left;
}
/* Sans photo, inutile de réserver la même hauteur qu'un visuel. */
@media (max-width: 767px) {
    .hero-section .card-img-wrapper.img-missing { height: 104px; }
}