/* ============================================================
   MAQUETTE_V2 — surcouche landing (préfixe .v2-)
   Linkée UNIQUEMENT dans index-v2.html, APRÈS landing.css +
   landing-rehab.css. Tailwind v3 étant purgé, tout style neuf
   passe ici. Tokens couleur repris du CSS compilé :
     - primary (volt) : #d4ff00
     - onyx            : rgb(13,13,13)
   ============================================================ */

/* --- Palette locale (mêmes valeurs que le CSS compilé) --------- */
:root {
    --v2-primary: #d4ff00;
    --v2-onyx: #0d0d0d;
    --v2-steel: #4b5563;
    --v2-cream: #fbf9f4;
}

/* ============================================================
   1. HERO V2
   ============================================================ */
.v2-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===== V2 — hero carousel rotatif (remplace marquee) ===== */
/* Carousel « un par un » type coverflow léger : slide active centrée +
   voisines (prev/next) en peek semi-transparent, 4e slide cachée. Piloté
   par initRotativeCarousel() (landing-v2.js) via data-herocar : le helper
   pose is-active / is-prev / is-next ; toutes les transitions sont en CSS. */
.v2-carousel {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin-top: 0.25rem;
}

.v2-carousel__viewport {
    position: relative;
    overflow: hidden;
    /* viewport large pour laisser apparaître les peeks des voisines */
    max-width: 480px;
    margin: 0 auto;
    padding: 0.5rem 0;
    /* mask léger : adoucit les bords sans écraser les peeks */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.v2-carousel__track {
    position: relative;
    /* hauteur stable = pas de saut de layout (toutes les slides sont absolute) */
    min-height: 230px;
}

/* État par défaut = caché (4e slide) ; superposition centrée */
.v2-vertical {
    position: absolute;
    top: 0;
    left: 50%;
    width: 150px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.8);
    transition:
        transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Slide active : centrée, pleine échelle, opaque, au-dessus */
.v2-vertical.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
    z-index: 3;
}
/* Voisines : décalées de ±40 %, estompées, en retrait — on « aperçoit »
   les pods voisins (400×400) sans qu'ils dominent l'actif */
.v2-vertical.is-prev {
    opacity: 0.4;
    transform: translateX(-140%) scale(0.8);
    z-index: 2;
}
.v2-vertical.is-next {
    opacity: 0.4;
    transform: translateX(40%) scale(0.8);
    z-index: 2;
}

.v2-vertical__top {
    font-family: inherit;
    font-weight: 700;
    color: var(--v2-onyx);
    font-size: 0.95rem;
    line-height: 1;
    /* Passé SOUS le pod (retour user 30/09) : ligne 1 du duo « Pour ton » / label */
    margin-top: 0.55rem;
    opacity: 0.75;
}

.v2-vertical__label {
    margin-top: 0.2rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--v2-onyx);
    font-size: 0.95rem;
    line-height: 1.1;
}

/* Placeholder pod 3D (carré pointillé) */
.v2-pod-ph {
    width: 130px;
    height: 130px;
    border: 2px dashed rgba(13, 13, 13, 0.28);
    border-radius: 1rem;
    background:
        repeating-linear-gradient(45deg, rgba(212, 255, 0, 0.06) 0 8px, transparent 8px 16px),
        rgba(13, 13, 13, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.v2-pod-ph span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(13, 13, 13, 0.55);
    text-transform: uppercase;
    line-height: 1.25;
}

/* ---------- 1d. Éventail mockups (placeholder) + sticker ----- */
/* Flèche headline → carrousel (retour user 20/09, cf. flechee.png) */
.v2-h1-arrow {
    display: block;
    width: 3.4rem;
    height: 4rem;
    margin: -0.75rem auto 0.75rem;
    transform: rotate(8deg);
    filter: drop-shadow(0 1px 1px rgba(13, 13, 13, 0.18));
}
@media (min-width: 1024px) {
    .v2-h1-arrow { width: 4rem; height: 4.75rem; }
}

.v2-fan-wrap {
    position: relative;
    width: 100%;
    max-width: 40rem;
    /* marge haute = dégagement pour le sticker en débord (-0.9rem) au-dessus de la microcopy CTA */
    margin: 1.75rem auto 0;
}

.v2-fan-ph {
    width: 100%;
    aspect-ratio: 16 / 8;
    border: 2px dashed rgba(13, 13, 13, 0.28);
    border-radius: 1.25rem;
    background:
        repeating-linear-gradient(45deg, rgba(13, 13, 13, 0.03) 0 12px, transparent 12px 24px),
        var(--v2-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
}

.v2-fan-ph span {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(13, 13, 13, 0.45);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Badge sticker volt « PRÊT EN 10 min » — ancré haut-droite */
.v2-sticker {
    position: absolute;
    top: -0.9rem;
    right: -0.4rem;
    display: inline-block;
    padding: 0.55rem 1rem;
    border-radius: 0.85rem;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    transform: rotate(7deg);
    box-shadow: 0 8px 22px rgba(212, 255, 0, 0.35), 0 2px 6px rgba(13, 13, 13, 0.18);
    border: 2px solid rgba(13, 13, 13, 0.9);
    z-index: 5;
}

.v2-value-line {
    /* hérite les utilitaires Tailwind ; rien à ajouter */
}

/* ============================================================
   2. MARQUEE LOGOS
   ============================================================ */
/* Retour user : trop d'espace vide entre le bas du hero (« En automatique & illimité. »)
   et le bandeau de logos. Cause structurelle = le hero est `min-h-screen flex justify-center`
   (contenu centré verticalement → grand vide résiduel sous la value-line) + son `pb-16` (4rem)
   + le `py-8/py-10` de cette section. On remonte le bandeau vers la value-line via une marge
   négative et on resserre le padding vertical de la section, SANS toucher au hero lui-même.
   La bulle déborde toujours en overflow visible (z-index 40) : pas de re-clip. */
#logos-marquee {
    margin-top: -3.5rem;      /* remonte le bandeau vers le hero (compense justify-center + pb-16) */
    padding-top: 0.75rem;     /* resserre le haut (écrase le py-8/py-10 Tailwind) */
    padding-bottom: 1.25rem;
    position: relative;
    z-index: 40;              /* la section entière au-dessus du hero, pour le débord de bulle */
}
@media (min-width: 640px) {
    #logos-marquee {
        /* -2rem (retour user « toujours trop collé » après -6rem) : donne ~50px entre
           la baseline de « automatique & illimité. » et le haut des logos quand le hero
           est à sa hauteur de contenu min (viewport ≤ ~1250px de haut). Mesure : gap =
           83px − |marge| (strong bottom 1150, logo top = heroBottom − |marge| + 16).
           La section repasse ENTIÈREMENT sous la value-line (section top ≈ texte bottom
           + 32px) : son fond bg-cream opaque peut rester — il ne mord plus le texte,
           et il couvre proprement la zone sous le hero (body = même cream uni). */
        margin-top: -2rem;
        padding-top: 1rem;
    }
}

/* Mobile : « En automatique & illimité. » doit former SA PROPRE 3e ligne de la
   value-line (retour user : cassait en « En automatique / & illimité. »).
   nowrap : le <strong> ne tenant pas à la suite de « …clients. », il bascule entier
   à la ligne. Scopé mobile UNIQUEMENT : en desktop le rendu actuel (« En » en fin de
   2e ligne) reste inchangé, comme demandé. Vérifié 390px et 360px sans overflow. */
@media (max-width: 639px) {
    .v2-value-line strong {
        white-space: nowrap;
    }
}

.v2-logos {
    position: relative;
    width: 100%;
    /* La bulle BD monte AU-DESSUS des logos en overflow visible et ne doit PAS être rognée.
       On NE réserve PLUS de padding-top (retour user : trop d'espace vide entre le hero et
       le bandeau) : la bulle déborde librement au-dessus, en z-index élevé, comme un tooltip
       (elle peut recouvrir légèrement le bas du hero au hover — comportement souhaité).
       Le mask-image de fondu latéral est porté par un pseudo-élément dédié (.v2-logos::before)
       car appliquer le mask sur .v2-logos estomperait la bulle qui déborde vers le haut. */
    overflow-x: clip;
    overflow-y: visible;
    /* z-index élevé : le bandeau (et sa bulle) passe AU-DESSUS de la section hero précédente,
       évitant que la bulle 3 lignes soit masquée sous l'éventail de mockups. */
    z-index: 40;
}

/* Fondu latéral (gauche/droite) : deux overlays crème en dégradé, ancrés en BAS du bandeau
   sur la seule hauteur de la bande de logos (bottom:0 / height des logos), donc SANS jamais
   recouvrir la bulle qui déborde en haut. Remplace l'ancien mask-image (qui estompait la bulle). */
.v2-logos::before,
.v2-logos::after {
    content: "";
    position: absolute;
    bottom: 0;
    top: 4.25rem; /* démarre sous la zone réservée (= réserve .v2-logos__track) : n'affecte que la bande de logos */
    width: 8%;
    pointer-events: none;
    z-index: 2;
}
.v2-logos::before {
    left: 0;
    background: linear-gradient(to right, var(--v2-cream), transparent);
}
.v2-logos::after {
    right: 0;
    background: linear-gradient(to left, var(--v2-cream), transparent);
}

.v2-logos__track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 2rem;
    /* padding-top : réserve une zone survolable AU-DESSUS des logos (maintient la pause du
       défilement quand le curseur monte vers la bulle), SANS espace vide visible (margin-top
       négatif compensé). Réduit de 6.75rem → 4.25rem (fix validé « texte hero coupé ») :
       avec la marge -6rem de #logos-marquee, une réserve de 6.75rem faisait mordre le haut
       de la piste (z-index 40) sur la 2e ligne de la value-line du hero (mesuré : track
       top 1212 vs value-line bottom 1244 → 32px masqués). À 4.25rem le haut de piste passe
       ~8px SOUS la value-line. La bulle, plus haute que la réserve, déborde librement
       au-dessus en overflow visible — inchangé. */
    padding-top: 4.25rem;
    margin-top: -4.25rem; /* compense : annule l'espace vide réservé, la bulle déborde en overflow visible */
    animation: v2-marquee-logos 30s linear infinite;
    will-change: transform;
    /* Fondu latéral porté ici (et non sur .v2-logos) pour ne PAS estomper la bulle qui
       déborde vers le haut hors du conteneur. Le mask suit la piste : comme il est défini
       en pourcentage de la boîte max-content, on le fige plutôt sur le conteneur via ::after. */
}

/* Pause du défilement au survol du BANDEAU (pas d'un logo seul) : sinon la bulle
   « fuit » sous le curseur pendant que la piste continue de glisser. Choix pris. */
.v2-logos:hover .v2-logos__track,
.v2-logos:focus-within .v2-logos__track {
    animation-play-state: paused;
}

@keyframes v2-marquee-logos {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.v2-logo-ph {
    flex: 0 0 auto;
    width: 100px;
    height: 40px;
    border-radius: 0.6rem;
    background: rgba(13, 13, 13, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(13, 13, 13, 0.4);
}

/* ---------- Logos réels + bulle BD au hover ------------------ */
.v2-logo {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    outline: none;
}

.v2-logo__img {
    height: 40px;
    width: auto;
    max-width: 130px;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease;
}

/* Au survol du logo : il s'estompe légèrement (met la bulle en valeur). */
.v2-logo:hover .v2-logo__img,
.v2-logo:focus-visible .v2-logo__img {
    opacity: 0.55;
}

/* Bulle type BD, positionnée AU-DESSUS du logo, pointe vers le bas. */
.v2-logo__bubble {
    position: absolute;
    bottom: calc(100% + 0.85rem); /* au-dessus du logo, espace pour la pointe */
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: max-content;
    max-width: 260px;
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    background: var(--v2-cream, #f7f4ec);
    border: 2px solid var(--v2-onyx, #0d0d0d);
    color: var(--v2-onyx, #0d0d0d);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 10px 26px rgba(13, 13, 13, 0.22);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    z-index: 30;
}

/* Pointe triangulaire vers le BAS (pointe le logo). Liseré onyx + fond crème :
   deux pseudo-éléments empilés (le trait onyx derrière, le fond crème devant). */
.v2-logo__bubble::before,
.v2-logo__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
/* liseré onyx (légèrement plus grand, dessous) */
.v2-logo__bubble::before {
    border-top: 11px solid var(--v2-onyx, #0d0d0d);
}
/* fond crème (par-dessus, décalé de 2px pour laisser voir le liseré) */
.v2-logo__bubble::after {
    margin-top: -2px;
    border-top: 10px solid var(--v2-cream, #f7f4ec);
}

.v2-logo:hover .v2-logo__bubble,
.v2-logo:focus-visible .v2-logo__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* Les copies aria-hidden de la piste 2 ne doivent jamais capter le focus ni afficher
   de bulle par leur propre :hover — mais on la garde active pour cohérence visuelle
   au survol (la piste défile, l'utilisateur peut survoler n'importe quelle copie). */

/* ============================================================
   3. PERSONA — placeholders image (verticales fast-food)
   Réutilise .persona-card / .persona-card__img de landing-rehab.css
   (même box), on ne fait que styler le bloc placeholder.
   ============================================================ */
.v2-persona-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    border: 2px dashed rgba(255, 255, 255, 0.22);
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 10px, transparent 10px 20px),
        rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
}

.v2-persona-ph span {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    line-height: 1.5;
}

/* PERSONA V2 — nouvelles photos retouchées (ratio 2:1 paysage).
   Override du .persona-card__img de landing-rehab.css (qui force
   aspect-ratio 3/2 en mobile et 15rem×15rem en desktop) pour éviter
   toute déformation. On ne touche PAS landing-rehab.css (partagé avec
   index.html). Mobile = pleine largeur 2:1 ; desktop = colonne image
   qui s'étire (align-items:stretch du parent .persona-card), cover. */
.persona-card__img--v2 {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
}

@media (min-width: 768px) {
    .persona-card__img--v2 {
        width: 20rem;
        height: auto;
        min-height: 100%;
        align-self: stretch;
        aspect-ratio: 2 / 1;
        border-radius: 0;
    }
}

/* TOUT INCLUS V2 — image détourée (tablette + iPhone, fond transparent).
   Remplace les ex-mockups CSS (.deviceD/.device). Pleine largeur du
   conteneur, centrée, plafonnée pour rester nette sur grand écran. */
.v2-toutinclus {
    display: flex;
    justify-content: center;
}
.v2-toutinclus__img {
    display: block;
    width: 100%;
    max-width: 820px;
    height: auto;
    margin: 0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .v2-vertical { width: 122px; }
    .v2-pod-ph { width: 108px; height: 108px; }
    .v2-pod-img { width: 108px; height: 108px; }
    .v2-carousel__viewport { max-width: 340px; }
    .v2-carousel__track { min-height: 200px; }
    /* Voisines plus discrètes et resserrées : l'actif reste dominant */
    .v2-vertical.is-prev { opacity: 0.3; transform: translateX(-118%) scale(0.7); }
    .v2-vertical.is-next { opacity: 0.3; transform: translateX(18%) scale(0.7); }
    .v2-sticker { font-size: 0.78rem; top: -0.7rem; }
}

/* Desktop ≥1024 : pods plus grands, peeks légèrement plus larges */
@media (min-width: 1024px) {
    .v2-carousel__viewport { max-width: 540px; }
    .v2-carousel__track { min-height: 260px; }
    .v2-vertical { width: 168px; }
    .v2-vertical.is-prev { transform: translateX(-150%) scale(0.8); }
    .v2-vertical.is-next { transform: translateX(50%) scale(0.8); }
    .v2-pod-ph { width: 148px; height: 148px; }
    .v2-pod-img { width: 148px; height: 148px; }
}

/* Accessibilité : stoppe les défilements si l'utilisateur le demande.
   Le carousel hero n'a plus d'animation CSS (autoplay désactivé côté JS via
   prefers-reduced-motion) ; seuls les logos gardent un keyframe à stopper. */
@media (prefers-reduced-motion: reduce) {
    .v2-logos__track {
        animation: none;
    }
}

/* ============================================================
   ASSETS RÉELS V2.1 (pods, éventail, scènes, étapes, fidélité)
   ============================================================ */

/* ---------- Pods 3D (remplacent .v2-pod-ph) ------------------ */
.v2-pod-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 18px rgba(13, 13, 13, 0.18));
}

/* ---------- Éventail hero (LCP) ----------------------------- */
.v2-fan-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

/* ---------- Halo volt derrière le H1 (repris de landing-rehab.css
   « Volt halo behind the H1 » : radial volt + blur 45px) -------- */
.v2-h1-halo { position: relative; }
.v2-h1-halo__text { position: relative; z-index: 1; }
.v2-h1-halo::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26rem;
    height: 18rem;
    max-width: 90vw;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(212, 255, 0, 0.45), transparent 70%);
    filter: blur(45px);
}

/* ---------- Scènes #solution (16:9, téléphones déjà rendus) --- */
.v2-scenes {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 56rem;
    margin: 0 auto;
}
/* Blocs verticaux [scène → card] (retour user 20/09 puis 21/09).
   MAJ 21/09 (Évolution 1) : desktop = même format que mobile → blocs EMPILÉS
   verticalement sur toute la largeur du conteneur (max-w-3xl), plus de 3 colonnes.
   Bénéfice : les images annotées deviennent grandes, leur texte devient lisible.
   Mobile reste inchangé (déjà empilé via grid-cols-1).
   On neutralise le md:grid-cols-3 de Tailwind à TOUS les breakpoints ≥768px. */
.v2-solution-blocks {
    display: grid;
    grid-template-columns: 1fr !important; /* écrase md:grid-cols-3 (Tailwind) */
    /* gap vertical entre blocs : mobile inchangé (Tailwind gap-6 = 1.5rem conservé) ;
       desktop plus aéré (voir media ≥768px ci-dessous). */
}
.v2-solution-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;                             /* espace scène ↔ card (inchangé vs mobile) */
    align-items: stretch;
}
/* DESKTOP ≥768px : rythme vertical généreux (blocs empilés pleine largeur). */
@media (min-width: 768px) {
    .v2-solution-blocks {
        gap: 3.5rem !important;            /* espace entre blocs empilés, desktop seulement */
    }
    .v2-solution-block {
        gap: 1.25rem;                      /* espace scène ↔ card, desktop seulement */
    }
    /* Image annotée pleine largeur du conteneur (48rem), centrée. */
    .v2-solution-block .v2-scene--annote img {
        width: 100%;
        margin-inline: auto;
    }
}
.v2-solution-block .v2-scene { margin: 0; }
.v2-solution-block .card-glow { flex: 1 1 auto; }
.v2-scene { margin: 0; }
.v2-scene img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}
/* Panneaux annotés (les 3 blocs, MAJ 21/09) : nouvelles images fournies par l'user,
   mêmes visuels QU'AVANT mais avec texte + flèches jaune fluo annotés, débordant sur
   les bords G/D. FOND TRANSPARENT (vérifié : coins srgba 0,0,0,0) → l'image se pose
   directement sur le fond noir de la section (#solution = bg-onyx). Aucun fond forcé
   ni radius : le PNG transparent ne crée aucun rectangle. Le texte annoté est clair
   (blanc / gris pâle) → lisible sur le noir de la section. */
.v2-scene--annote img {
    background: transparent;
    border-radius: 0;
}
/* Annotations vitales sur les bords : on NE recadre JAMAIS (ni mobile ni desktop).
   Image entière, ratio natif préservé. */
.v2-scene--annote img {
    aspect-ratio: auto;
    object-fit: contain;
}
.v2-scene__cap {
    margin-top: 0.6rem;
    font-family: inherit;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--v2-primary);
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: center;
}

/* Mobile : les scènes SANS annotation (fond transparent, phones seuls) seraient
   trop petites en 16:9 pleine largeur → recadrage ~4:3 cover pour les agrandir.
   Les scènes annotées (:not(.v2-scene--annote)) portent du texte sur les bords :
   elles gardent leur image ENTIÈRE (contain), défini plus haut — jamais de crop. */
@media (max-width: 640px) {
    .v2-scene:not(.v2-scene--annote) img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
        border-radius: 0.75rem;
    }
}

/* ---------- Étapes #comment-ca-marche (slider 2 slides — SLIDE) --- */
.v2-step {
    display: flex;
    justify-content: center;
}
/* Slider CSS pur — effet SLIDE (retour user 20/09) : la slide 2 chasse la slide 1
   en prenant sa place (translation horizontale), au lieu du crossfade.
   Le conteneur = fenêtre (overflow hidden) large d'UNE slide ; les 2 slides sont
   posées côte à côte (flex nowrap) et translatées ensemble en boucle.
   Ordre STRICT conservé : « - 1 » d'abord.
   Timing : ~3,5 s de pause par slide, transition ~0,6 s ; boucle 1 → 2 → retour 1. */
.v2-steps-slider {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    /* Fenêtre = largeur d'UNE slide (portrait ~450×800 cappé à 420px de haut →
       ~236px de large). overflow:hidden clippe pour ne montrer qu'une slide.
       ⚠️ La fenêtre elle-même ne porte PLUS l'animation : transformer un conteneur
       overflow:hidden déplace son clip (la fenêtre entière glisse) au lieu de
       révéler la slide suivante — c'était le bug (même mockup qui se décale +
       dépassement flou de la 2ᵉ slide à droite). Ce sont les slides (le contenu)
       qui glissent DANS la fenêtre fixe. */
    width: min(236px, 82vw);
    max-width: 100%;
    overflow: hidden;
}
.v2-step-img {
    display: block;
    width: 100%;
    height: auto;
    /* PAS de drop-shadow ici : la fenêtre .v2-steps-slider est overflow:hidden et
       TRONQUE l'ombre douce du téléphone à ses bords rectangulaires → cela dessinait
       un « encadré » gris à bords secs autour du mockup (effet amateur signalé par
       l'user 21/09). Le téléphone flotte désormais directement sur le fond cream. */
}
.v2-steps-slider .v2-slide {
    flex: 0 0 100%;
    margin: 0;
    /* Chaque slide fait 100 % de la fenêtre ; les 2 sont côte à côte (piste 2×).
       On translate le CONTENU (les slides), pas la fenêtre clippée.
       -100 % (= largeur d'une slide) fait chasser la slide 1 par la slide 2. */
    animation: v2-slide-track 8.2s ease-in-out infinite;
    will-change: transform;
}
/* Piste : 0 % → pause slide 1 → glisse (les slides défilent) → pause slide 2 → retour.
   Translation de -100 % (largeur d'UNE slide) pour amener la slide 2 dans la fenêtre.
   Pauses ~3,5 s (0→43 %, 50→93 %), glissements ~0,6 s (43→50 %, 93→100 %). */
@keyframes v2-slide-track {
    0%, 43%   { transform: translateX(0); }
    50%, 93%  { transform: translateX(-100%); }
    100%      { transform: translateX(0); }
}
/* Reduced motion : figé sur la slide 1 (état « - 1 », début du parcours). */
@media (prefers-reduced-motion: reduce) {
    .v2-steps-slider .v2-slide {
        animation: none;
        transform: translateX(0);
    }
}

/* ---------- Carte fidélité (2 scènes portrait, #fonctionnalites) - */
.v2-fid-pair {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: 1.5rem;
}
.v2-fid-img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 380px;
    filter: drop-shadow(0 14px 36px rgba(212, 255, 0, 0.14)) drop-shadow(0 16px 40px rgba(0, 0, 0, 0.28));
}

/* ===== V2 — stacking cards (socle E+G) =====
   Mécanique réutilisable « paquet de cartes » : des cards empilées via
   position:sticky. Au scroll, chaque card se colle sous le haut du viewport ;
   la suivante remonte et la RECOUVRE pendant que la précédente RÉTRÉCIT
   légèrement par le haut (transform-origin:top, scale scrubé par GSAP).
   Décalage vertical de 14px par carte via --i → on voit les bords hauts des
   cards empilées dessous. L'empilement sticky est CSS pur (fallback sans JS
   / prefers-reduced-motion = pile figée sans scale) ; le scale/fondu est
   ajouté par initStackingCards() (landing-v2.js).

   API — pour déclarer un stack :
     <div class="v2-stack" data-stack>
       <div class="v2-stack__item" style="--i: 0"><div class="v2-stack__card …">…</div></div>
       … (un item par card, --i incrémenté ; dernière card = pas d'anim scale) …
     </div>
   La card visuelle (.v2-stack__card) est libre de contenu ; ici on lui
   applique aussi les utilitaires card-glow bg-white border rounded-2xl. */

/* Sticky-safe : landing.css (Tailwind compilé) pose html{overflow-x:hidden} ;
   avec overflow-y visible, le navigateur recalcule overflow-y en auto → <html>
   devient un scroll container et position:sticky s'y accroche au lieu du
   viewport (= aucun stacking, surtout mobile). overflow-x:clip coupe le
   débordement SANS créer de scroll container. hidden d'abord = fallback vieux
   navigateurs ; clip (déclaré après) gagne partout où il est supporté. */
html {
    overflow-x: hidden;
    overflow-x: clip;
}

/* Boutons header (retour user 30/09) : les DEUX boutons = fond anthracite
   brand #353839 / texte volt clair #F5FFC4. Hover VISIBLE garanti en CSS pur
   (indépendant des utilitaires Tailwind hover:scale-*) : scale + brightness
   qui éclaircit nettement l'anthracite. */
.v2-btn-connexion,
.v2-btn-inscription {
    background: #353839;
    color: #f5ffc4;
    transition: transform .15s ease, filter .15s ease;
}
.v2-btn-connexion:hover,
.v2-btn-inscription:hover {
    transform: scale(1.05);
    filter: brightness(1.35);
}

/* Hover de la mini-card CTA */
.v2-minicard-sombre:hover {
    transform: scale(1.04);
    filter: brightness(1.6);
}

/* CTA anthracite (retour user 30/09) : hero + bandeau WhatsApp — même fond
   que les boutons header, écriture volt clair. */
.v2-cta-anthracite {
    background: #353839;
    color: #f5ffc4;
}

/* Pill « Offre Fondateur » du header : fond anthracite aligné sur les boutons
   Connexion/Inscription (override de landing-rehab.css, chargé avant). */
.header-offer-banner {
    background: #353839 !important;
}

/* CTA harmonisés « Créer ma page » — règle clair→dark / sombre→voltclair,
   bascule facile si retour au volt classique. Section fond CLAIR (bg-cream /
   bg-gray-50) → bouton onyx + texte volt (.v2-cta-dark) ; section fond SOMBRE
   (bg-onyx) → bouton volt clair + texte onyx (.v2-cta-voltclair). */
.v2-cta-dark {
    background: var(--v2-onyx, #0d0d0d);
    color: #d4ff00;
}
.v2-cta-voltclair {
    background: #F5FFC4;
    color: #0d0d0d;
}

/* Image « solution » pleine largeur sous la détente 7 problèmes. */
.v2-solution-img-wrap {
    position: relative;
    margin-top: 1.25rem;
}

/* 8e item du stack #probleme : card « bare » (titre détente + image nus sur le
   fond crème) — reste .v2-stack__card pour hériter translateZ/transform-origin,
   jamais rétrécie (dernier item, ignoré par initStackingCards). */
.v2-stack__card--bare {
    /* Fond crème OPAQUE (= fond de section, invisible) : masque la Q7 pendant
       le recouvrement — en transparent, l'icône/« 7. » restaient visibles à
       travers le bloc pinné (retour user desktop 30/09). */
    background: var(--v2-cream, #fbf9f4);
    border: none;
    box-shadow: none;
    padding: 0 0 1rem;
    min-height: 0;
}
/* Desktop : le bloc solution pinne plus haut que le paquet (6svh < 12svh+déca-
   lages) → à l'accroche il coiffe aussi les bords des cards empilées, et le
   pin survient plus tard dans le scroll (offset plus petit = accroche
   retardée). Mobile inchangé (validé user). */
@media (min-width: 641px) {
    .v2-stack__item[style*="--i: 7"] {
        top: 6vh;
        top: 6svh;
    }
}
.v2-stack__card--bare .v2-q-release {
    margin-top: 1rem;
}
/* Spacer de CONTENU en fin de stack : SEULE technique qui prolonge le pin du
   dernier item (vérifié par sonde 30/09 — padding-bottom/min-height : 0px de
   pin ; spacer contenu 500px : 520px de pin). */
.v2-stack__tail {
    height: 45vh;
    height: 45svh;
}
.v2-solution-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
}
@media (max-width: 640px) {
    /* Crop centré mobile : on garde l'essentiel (mains + téléphone) */
    .v2-solution-img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
}

/* Mockups détourés de la grille Pro : remplacent les cadres CSS .device.sm
   (158px) — même gabarit visuel, l'ombre/cadre est DANS l'image. */
.v2-pro-mock {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
}

/* Le shimmer (::after en left:-100% animé, landing.css) déborde du bouton et
   crée ~200px d'overflow layout (mesuré : min-content 589px → dézoom mobile).
   Le clip est le rendu voulu : la bande brille DANS le bouton. */
.btn-shimmer-loop {
    overflow: hidden;
}

.v2-stack {
    position: relative;
    /* padding-bottom : laisse la dernière card « respirer » avant la section suivante */
    padding-bottom: 2rem;
    /* Le scroll anchoring de Chrome « corrige » la position de scroll quand un
       layout shift survient au-dessus (image qui charge…) → sauts perçus dans
       le paquet. Opt-out sur le stack. */
    overflow-anchor: none;
}
.v2-stack__item {
    position: sticky;
    /* base ~12svh sous le haut + 14px d'offset cumulé par carte.
       svh (small viewport height) = hauteur STABLE, insensible à la barre
       d'URL mobile qui redimensionne le viewport en plein scroll (sinon les
       seuils sticky bougent → cards qui « décrochent »). vh = fallback. */
    top: calc(12vh + var(--i) * 14px);
    top: calc(12svh + var(--i) * 14px);
    /* distance de scroll par card : chaque card apparaît seule avant l'arrivée
       de la suivante (min-height sur l'item, pas sur la card) */
    /* Distance de scroll par card (l'ITEM est le rail invisible — la CARD
       .v2-stack__card garde sa taille). 46svh → 62svh desktop (retour user
       30/09 : la suivante recouvrait la card lue trop vite, 59px de marge
       seulement — diagnostic sonde). Si les questions seules doivent encore
       ralentir : activer `#probleme .v2-stack__item { min-height: 66svh; }`.
       NE PAS augmenter le mobile sans re-test : réexpose le « gap puis snap ». */
    min-height: 62vh;
    min-height: 62svh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.v2-stack__card {
    transform-origin: top center;
    /* Anti « flash noir » Chrome au pin : couche GPU promue une fois pour
       toutes (translateZ) au lieu d'une promotion à la volée (will-change
       permanent = couches instables — retiré). */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: relative;
    width: 100%;
    max-width: 42rem; /* ~max-w-2xl */
    box-sizing: border-box;
    /* card-glow (landing.css) transitionne transform : conflit frame à frame
       avec le scrub GSAP → on ne transitionne plus que les propriétés sûres. */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Assombrissement scrubé SANS filter (filter animé = create/destroy de couche
   GPU = flash noir Chrome) : overlay dont l'opacité suit la var --dim,
   animée par initStackingCards() à la place de brightness(). */
.v2-stack__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #000;
    opacity: var(--dim, 0);
    pointer-events: none;
}

/* --- Card question spécifique #probleme --- */
.v2-stack__card {
    padding: 2.75rem 2.25rem;
    min-height: 31vh;
    min-height: 31svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.v2-stack__ico {
    display: block;
    width: 144px;
    height: 144px;
    margin: 0 auto 1.25rem;
}
.v2-stack__n {
    display: block;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1rem;
    color: rgba(13, 13, 13, 0.35);
    margin-bottom: 0.75rem;
}
.v2-stack__q {
    /* Alignée sur .v2-stack__title (retour user 30/09 : cards identiques
       entre les deux sections stack) */
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--v2-onyx);
    margin: 0;
}
/* --- Card fonctionnalité (#fonctionnalites-carousel) : titre + desc + outcome
   sur le même socle .v2-stack__card ; l'icône réutilise .v2-stack__ico --- */
.v2-stack__title {
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.6rem;
}
.v2-stack__desc {
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}
.v2-stack__outcome {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    margin: 0;
}
/* Ligne « de détente » sous le paquet de cards (hors stack). */
.v2-q-release {
    margin-top: 3rem;
    text-align: center;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    /* ×2 (retour user 30/09) */
    font-size: 2.9rem;
    line-height: 1.25;
    color: var(--v2-onyx);
}
@media (max-width: 640px) {
    .v2-stack__item {
        top: calc(8vh + var(--i) * 10px);
        top: calc(8svh + var(--i) * 10px);
        min-height: 56vh;
        min-height: 56svh;
    }
    .v2-stack__card {
        padding: 2rem 1.5rem;
        /* −30 % (retour user 30/09) : card compacte, le contenu agrandi
           (icône 120px + police) remplit l'espace. */
        min-height: 48vh;
        min-height: 48svh;
    }
    .v2-stack__ico {
        width: 120px;
        height: 120px;
        margin-bottom: 1rem;
    }
    .v2-stack__q {
        font-size: 1.25rem;
    }
    .v2-stack__title {
        font-size: 1.25rem;
    }
    .v2-stack__desc {
        font-size: 0.95rem;
    }
    .v2-stack__outcome {
        font-size: 0.9rem;
    }
    .v2-q-release {
        margin-top: 2.25rem;
        font-size: 1.25rem;
    }
}
/* Empilement sticky pur, sans scale, si l'utilisateur réduit les animations. */
@media (prefers-reduced-motion: reduce) {
    .v2-stack__card {
        transform: none !important;
    }
}

/* ============================================================
   B — SECTION #croissance-auto : schéma de connexions + cards boucle
   ============================================================ */

/* --- B1 : schéma de connexions (hub + satellites + fils) --- */
.v2-hub-schema {
    position: relative;
    width: 100%;
    max-width: 640px;
    height: 420px;
    margin: 0 auto 2.75rem;
}

/* Couche fils SVG décorative, derrière les icônes */
.v2-hub-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.v2-wire {
    fill: none;
    stroke: rgba(13, 13, 13, 0.28);
    stroke-width: 0.5;
    stroke-linecap: round;
    stroke-dasharray: 3 3;
    animation: v2-wire-flow 4s linear infinite;
}
@keyframes v2-wire-flow {
    to { stroke-dashoffset: -12; }
}

/* Hub central : cercle sombre */
.v2-hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--v2-onyx);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(13, 13, 13, 0.22);
    z-index: 3;
}
.v2-hub-core__ico {
    width: 62px;
    height: 62px;
    display: block;
}

/* Satellites : positionnés radialement (centre de l'icône sur le point) */
.v2-sat {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    /* Largeur/hauteur explicites : sans elles, le wrapper absolu fait un
       shrink-to-fit contre le bord droit du conteneur (satellites --instagram
       left:86% / --whatsapp left:94%) et le max-width:100% du reset compresse
       l'image horizontalement (fix icônes satellites écrasées). */
    width: 80px;
    height: 80px;
}
.v2-sat img {
    display: block;
    width: 100%;
    height: 100%;
    /* Ceinture-bretelles : neutralise le max-width:100% du reset qui, combiné
       au shrink-to-fit du wrapper, écrasait l'image. */
    max-width: none;
}
/* Positions (en % du conteneur), cohérentes avec les fils SVG */
.v2-sat--google    { top: 17%; left: 14%; }
.v2-sat--instagram { top: 17%; left: 86%; }
.v2-sat--snapchat  { top: 50%; left: 6%;  }
.v2-sat--whatsapp  { top: 50%; left: 94%; }
.v2-sat--facebook  { top: 86%; left: 16%; }
.v2-sat--tiktok    { top: 86%; left: 84%; }

/* Flottement désynchronisé des icônes tiers */
.v2-sat--google    img { animation: v2-sat-float 4s ease-in-out 0s    infinite alternate; }
.v2-sat--instagram img { animation: v2-sat-float 4s ease-in-out 0.8s  infinite alternate; }
.v2-sat--snapchat  img { animation: v2-sat-float 4s ease-in-out 1.6s  infinite alternate; }
.v2-sat--whatsapp  img { animation: v2-sat-float 4s ease-in-out 2.4s  infinite alternate; }
.v2-sat--facebook  img { animation: v2-sat-float 4s ease-in-out 3.2s  infinite alternate; }
.v2-sat--tiktok    img { animation: v2-sat-float 4s ease-in-out 4s    infinite alternate; }
@keyframes v2-sat-float {
    from { transform: translateY(-5px); }
    to   { transform: translateY(6px); }
}

/* --- B2 : phrase récap sous le schéma --- */
.v2-hub-recap {
    text-align: center;
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--v2-onyx);
    max-width: 40rem;
    margin: 0 auto 2.5rem;
}
@media (min-width: 640px) {
    .v2-hub-recap { font-size: 1.25rem; }
}

/* --- B3 : cards boucle (icône héritée + bandeau estampille) --- */
.v2-loop-card {
    padding-bottom: 2.75rem; /* dégage la place du bandeau d'angle */
}
.v2-loop-card__ico {
    display: block;
    margin-bottom: 0.85rem;
}

/* Bandeau estampille bas-droite */
.v2-stamp {
    position: absolute;
    bottom: 0;
    right: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--v2-onyx);
    color: var(--v2-cream);
    font-family: var(--font-display, 'Space Grotesk', sans-serif);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem 0.3rem 0.6rem;
    border-radius: 0.6rem 0 1rem 0; /* arrondi haut-gauche léger + épouse le rounded-2xl bas-droite */
}
/* Icône abonnement multicolore (dark+volt) : pastille claire pour la lisibilité sur fond sombre */
.v2-stamp__ico {
    width: 14px;
    height: 14px;
    display: block;
    background: var(--v2-cream);
    border-radius: 50%;
    padding: 2px;
    box-sizing: content-box;
}

/* --- Responsive mobile (<640px) : schéma resserré --- */
@media (max-width: 639px) {
    .v2-hub-schema {
        max-width: 340px;
        height: 320px;
    }
    .v2-hub-core {
        width: 96px;
        height: 96px;
    }
    .v2-hub-core__ico {
        width: 46px;
        height: 46px;
    }
    .v2-sat {
        width: 56px;
        height: 56px;
    }
}

/* Respect du réglage système : pas d'animation sur le schéma */
@media (prefers-reduced-motion: reduce) {
    .v2-wire {
        animation: none;
    }
    .v2-sat img {
        animation: none !important;
    }
}

/* texte volt clair — titres de cards sur fonds sombres, registre brand 01/09 */
.v2-text-voltclair {
    color: #F5FFC4;
}

/* mini-card sombre — sous-titre grille Pro « 2 mois à 49€ pour les 50 premiers » (wording partie 2, 30/09) */
/* Devenue CTA cliquable (retour user 30/09) → hover visible */
.v2-minicard-sombre {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 0.6rem;
    background: var(--v2-onyx, #0d0d0d);
    color: #F5FFC4;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease;
    font-weight: 700;
    font-size: 0.9rem;
}