/* ==========================================================================
   KIPO - Styles propres à la page Démo (hero + étapes + preuve + FAQ)
   ========================================================================== */

/* Hero capé : padding-block plus court que --section-y (le formulaire ne doit pas
   s'étirer sur grand écran). Sélecteur .hero.demo = intention explicite, indépendante
   de l'ordre de chargement des feuilles. */
.hero.demo { padding-block: clamp(48px, 6vw, 88px); }

/* Hero capé et équilibré : le formulaire ne doit pas s'étirer sur grand écran. */
/* .demo__hero porte aussi .duo (grille 1fr 1fr + bascule mobile a 900px) : on ne
   redeclare QUE ce qui differe (largeur capee + gouttiere plus large). */
.demo .demo__hero {
    max-width: 1400px;
    margin-inline: auto;
    gap: clamp(40px, 4vw, 80px);
}
.demo__pitch { gap: 22px; }
.demo__sous { max-width: 46ch; }
/* Formulaire « sticky » : il reste à portée pendant qu'on lit le pitch (desktop). */
.demo__form { width: 100%; position: sticky; top: var(--sticky-top); align-self: start; }
/* Bouton d'ancrage : visible seulement quand le formulaire passe sous le pitch. */
.demo__hero-cta { display: none; }

/* Secteurs visés : montre tout de suite que Kipo colle à son métier. */
.demo__secteurs { margin: 0; max-width: 48ch; font-size: var(--fs-sm); color: var(--muted); }
.demo__secteurs b { color: var(--ink); font-weight: 600; }

/* Preuve sociale du hero : grappe d'avatars + note Google, confiance immédiate. */
.demo__social {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: fit-content;
    max-width: 100%;
    padding: 14px 16px;
    /* Surface (galet blanc, sans filet) définie plus bas, bloc « Galets pleins » : source unique. */
}
.demo__social-row { display: flex; align-items: center; gap: 12px; }
.demo__social-avatars { display: inline-flex; }
.demo__social-avatars img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid var(--white);
    object-fit: cover;
    object-position: center 26%;   /* recentre sur le visage (photos portrait) */
    background: var(--pale);
}
.demo__social-avatars img:first-child { margin-left: 0; }
.demo__social-meta { display: flex; flex-direction: column; gap: 1px; }
.demo__social-meta .etoiles { font-size: .95rem; line-height: 1; }
.demo__social-chiffre { font-size: var(--fs-sm); color: var(--muted); }
.demo__social-chiffre b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); }
.demo__social-txt { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.demo__social-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--muted);
}
.demo__social-foot-ic { color: var(--olive); line-height: 0; }
.demo__social-foot-ic .icon { width: 16px; height: 16px; }

/* Note « humaine » dans l'intro du parcours : remplit la colonne et rassure. */
.etapes__note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 22px;   /* respire après les pills, même écart que sous-titre -> pills */
    padding: 14px 16px;
}
.etapes__note-ic { flex-shrink: 0; color: var(--olive); line-height: 0; }
.etapes__note-ic .icon { width: 22px; height: 22px; }
.etapes__note p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.etapes__note b { color: var(--ink); }

/* Clôture (CTA) sous la FAQ, dans la même section. */
.demo__cloture { margin-top: clamp(40px, 5vw, 72px); }

/* ==========================================================================
   Décor : blobs organiques (page Démo)
   Nombre VARIABLE par section (hero 3, preuve 3, parcours 1, faq 2), tailles et
   COULEURS variées (vert / olive / sable / pâle) -> rendu naturel, pas mécanique.
   Deux familles : FLOTTANT (top:%, sort par un côté) et COLLÉ (bottom NÉGATIF -> il
   TOUCHE le bord franchement, son bas étant clippé à plat par overflow:clip ; Dylan
   préfère ce contact net à l'espace que laisse un bas arrondi posé à bottom:0). RÈGLE :
   on ne clippe un collé qu'au bas d'une section SABLE (preuve, faq -> le clip expose
   du sable, donc PAS de « coupure blanche ») ; crème (hero, parcours) = flottants seuls.
   z-index 0, dans les marges. Défini ICI (indépendant d'accueil.css).
   ========================================================================== */

/* Hero (crème, x3) : vert grand (gauche), sable petit (haut-droite), olive moyen (bas-droite). */
.demo__blob-hero-1 { width: clamp(290px, 31vw, 470px); height: clamp(290px, 31vw, 470px); left: clamp(-160px, -8vw, -100px); top: 26%; border-radius: 46% 54% 62% 38% / 48% 40% 60% 52%; }
.demo__blob-hero-2 { width: clamp(130px, 14vw, 210px); height: clamp(130px, 14vw, 210px); right: clamp(-80px, -4.5vw, -55px); top: 9%; border-radius: 58% 42% 44% 56% / 56% 52% 48% 44%; }
.demo__blob-hero-3 { width: clamp(180px, 19vw, 300px); height: clamp(180px, 19vw, 300px); right: clamp(-120px, -6vw, -80px); top: 56%; border-radius: 52% 48% 38% 62% / 60% 44% 56% 40%; }

/* Preuve (sable, x3) : tous FLOTTANTS (vert droite, olive haut-gauche, pâle bas-gauche).
   preuve-3 reste en bas à gauche mais NE touche PAS le bord : la transition preuve->parcours
   est une VAGUE (séparateur gardé), et un bord de blob plat ne peut pas l'épouser sans
   laisser une barre de sable ou déborder sur le parcours. Donc flottant propre ici.
   (Les blobs « qui touchent » sont en FAQ : frontière FAQ/pied de page plate, sans vague.) */
.demo__blob-preuve-1 { width: clamp(210px, 23vw, 360px); height: clamp(210px, 23vw, 360px); right: clamp(-150px, -8vw, -90px); top: 16%; border-radius: 40% 60% 55% 45% / 58% 44% 56% 42%; }
.demo__blob-preuve-2 { width: clamp(160px, 17vw, 280px); height: clamp(160px, 17vw, 280px); left: clamp(-110px, -6vw, -70px); top: 12%; border-radius: 50% 50% 58% 42% / 56% 48% 52% 44%; }
.demo__blob-preuve-3 { width: clamp(220px, 24vw, 380px); height: clamp(220px, 24vw, 380px); left: clamp(-150px, -7vw, -90px); top: 50%; border-radius: 56% 44% 52% 48% / 58% 50% 50% 42%; }

/* Parcours : les étapes sont calées en largeur (.parcours max-width) pour ne pas s'étirer
   tout à droite ; le galet sable se loge dans l'espace AINSI LIBÉRÉ à droite, où il n'y a
   plus de carte (transparente) à traverser -> plus de bord parasite à travers le contenu. */
.etapes .parcours { max-width: 480px; }
.demo__blob-parcours-1 { width: clamp(240px, 26vw, 420px); height: clamp(240px, 26vw, 420px); right: clamp(-220px, -14vw, -150px); top: 20%; border-radius: 56% 44% 60% 40% / 46% 56% 44% 54%; }

/* FAQ (sable, x2) : un galet vert qui FLOTTE près du haut à gauche (le haut de la FAQ a une
   VAGUE parcours->faq -> un collé y serait tranché net, comme preuve-3 ; donc flottant, forme
   ronde entière) + un PETIT vert collé en bas à droite (frontière FAQ/pied PLATE, OK). */
.demo__blob-faq-1 { width: clamp(220px, 24vw, 400px); height: clamp(220px, 24vw, 400px); left: clamp(-120px, -6vw, -75px); top: 6%; border-radius: 52% 48% 44% 56% / 58% 50% 50% 42%; }
.demo__blob-faq-2 { width: clamp(90px, 10vw, 150px); height: clamp(90px, 10vw, 150px); right: clamp(-50px, -2.6vw, -30px); bottom: clamp(-55px, -3vw, -35px); border-radius: 45% 55% 50% 50% / 56% 58% 50% 50%; }

/* Galet collé dans le coin bas-droit de la bannière CTA (clippé par son angle arrondi). */
.demo__cta-blob { width: clamp(150px, 17vw, 260px); height: clamp(150px, 17vw, 260px); right: clamp(-50px, -2.6vw, -24px); bottom: clamp(-50px, -2.6vw, -24px); border-radius: 54% 46% 58% 42% / 50% 52% 48% 50%; }

/* ==========================================================================
   Étapes « Comment ça se passe » + parcours numéroté (page Démo)
   DEMO-ONLY : déplacé depuis kipo.css (frontière de réutilisation nette).
   ========================================================================== */
/* Intro à gauche + parcours numéroté à droite. */
.etapes {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(32px, 4vw, 80px);   /* même coefficient 4vw que .demo__hero et .faq-duo (colonnes homogènes) */
    align-items: start;
}
.etapes__intro { position: sticky; top: var(--sticky-top); }
.etapes__titre { font-size: var(--fs-h2); margin: 14px 0; }   /* rythme du groupe kicker/titre/sous-titre = 14/14, homogène avec .section__entete et .faq-duo__titre */
.etapes__sous { color: var(--muted); font-size: var(--fs-lead); max-width: 42ch; margin-bottom: 22px; }

/* Parcours numéroté (rail = connecteurs CSS .parcours__item::after, pas de SVG). */
.parcours {
    --num: 44px;       /* diamètre pastille */
    --row: 100px;      /* hauteur fixe d'une rangée = rythme régulier */
    --row-gap: 14px;   /* écart entre items */
    position: relative;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--row-gap);
}
.parcours__item {
    position: relative;
    display: grid;
    grid-template-columns: var(--num) 1fr;
    column-gap: 20px;
    align-items: start;        /* pastille en haut, alignée sur le titre */
    min-height: var(--row);    /* plancher commun -> pastilles régulières quand le contenu est court */
}
/* Rail = connecteurs CSS robustes : chaque étape relie la suivante en s'adaptant
   à la hauteur RÉELLE de sa carte (+ var(--row-gap) d'écart inter-cartes). Le
   trait reste donc continu quel que soit le contenu, la largeur ou le zoom.
   Masqué derrière les pastilles par leur halo crème (z-index 0 vs num z-index 1). */
.parcours__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--num) / 2 - 1px);     /* centré sur la colonne pastille */
    top: calc(var(--num) / 2);            /* part du centre de la pastille */
    height: calc(100% + var(--row-gap));  /* jusqu'au centre de la pastille suivante */
    width: 2px;
    background: var(--olive);
    opacity: .5;
    z-index: 0;
}
.parcours__num {                 /* nœud numéroté sur le rail */
    width: var(--num); height: var(--num);
    border-radius: 50%;
    background: var(--pale);
    color: var(--olive);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    display: grid; place-items: center;
    border: 4px solid var(--cream);   /* halo crème qui masque le rail derrière */
    z-index: 1;
}
.parcours__carte {
    display: flex;
    gap: 16px;
    align-items: flex-start;   /* contenu calé en haut, comme la pastille et le titre */
    padding: 8px 20px 8px 6px;
    border: 1px solid transparent;   /* place réservée pour le filet olive au hover (zéro reflow) */
    border-radius: var(--r-galet-lg);
    background: transparent;         /* dé-cartée : surface crème de la section */
    transition: transform var(--t), border-color var(--t);
}
.parcours__carte:hover {
    transform: translateY(-5px);
    border-color: var(--olive);
}
.parcours__carte:hover .parcours__puce {
    transform: scale(1.1) rotate(-3deg);
}
.parcours__puce {
    flex: none;
    margin-top: -5px;    /* centre l'icône sur le titre, bien à l'intérieur du contour (cf. .faq-contact__icone 40px) */
    width: 40px; height: 40px;
    /* coins galet (--r-galet-xs) posés plus bas, avec .faq-contact__icone */
    background: var(--pale);
    color: var(--olive);
    display: grid; place-items: center;
    transition: transform var(--t);
}
.parcours__puce .icon { width: 21px; height: 21px; }
.parcours__corps { flex: 1; min-width: 0; }
.parcours__tete { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.parcours__titre { font-size: var(--fs-h3); margin: 0; line-height: 1.2; }
.parcours__desc { color: var(--muted); font-size: var(--fs-sm); }
.parcours__meta {                /* durée : petite étiquette juste après le titre (groupée, pas flottante) */
    flex: none;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--prose);   /* AA : prose sur pale (olive sur pale = 4.57:1, on garde une marge confortable) */
    background: var(--pale);
    padding: 4px 11px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

/* ==========================================================================
   Preuve « La voix » : panneau éditorial (signature / verbatim / socle)
   + grille de 4 photos clients à droite
   ========================================================================== */
.preuve { max-width: 1320px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 36%, 425px); gap: clamp(20px, 2.6vw, 40px); align-items: start; }   /* panneau (gauche) | grille de 4 photos (droite) */

/* Étoiles partielles (note 4,7/5), réutilisées dans la signature (remplissage animé). */
.preuve__note-etoiles {
    --note-fill: 94%;   /* part remplie = note 4,7 / 5 (source unique de la note) */
    position: relative;
    display: inline-block;
    font-size: 1.35rem;
    letter-spacing: 3px;
    line-height: 1;
}
.preuve__note-base { color: var(--sand-deep); }
.preuve__note-fill {
    position: absolute; left: 0; top: 0;
    width: var(--note-fill);
    overflow: hidden;
    white-space: nowrap;
    color: var(--olive);
}

/* ==========================================================================
   Animations & interactions
   ========================================================================== */

/* Apparition en cascade : regle generique [data-cascade] desormais dans kipo.css
   (mutualisee, utilisee aussi par Tarifs). Les conteneurs portent data-reveal data-cascade. */

/* Parcours : les pastilles numérotées ressortent (le rail est tracé par les connecteurs CSS .parcours__item::after). */
.js .parcours[data-reveal] .parcours__num {
    transform: scale(.6);
    transition: transform .5s var(--ease-rebond);   /* léger rebond */
    transition-delay: var(--reveal-delay, 0ms);
}
.js .parcours[data-reveal].is-visible .parcours__num { transform: scale(1); }
/* Le rail (connecteurs) se trace de haut en bas à l'apparition. */
.js .parcours__item:not(:last-child)::after { transform: scaleY(0); transform-origin: top; transition: transform 1.1s var(--ease-doux); }
.js .parcours[data-reveal].is-visible .parcours__item:not(:last-child)::after { transform: scaleY(1); }

/* Les 3 bandes de la preuve + la grille photos entrent en cascade (data-anime). */
.js .preuve__signe,
.js .preuve__voix,
.js .preuve__socle,
.js .preuve__photos {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--t-reveal) ease, transform var(--t-reveal) ease;
    transition-delay: var(--bloc-delay, 0ms);
}
.js .preuve.is-anime .preuve__signe,
.js .preuve.is-anime .preuve__voix,
.js .preuve.is-anime .preuve__socle,
.js .preuve.is-anime .preuve__photos { opacity: 1; transform: none; }
.preuve__voix { --bloc-delay: 90ms; }
.preuve__photos { --bloc-delay: 110ms; }
.preuve__socle { --bloc-delay: 170ms; }

/* Étoiles de la note : se remplissent en phase avec le compteur (1.4s). */
.js .preuve__note-fill { width: 0; transition: width 1.4s var(--ease-doux); }
.js .preuve.is-anime .preuve__note-fill { width: var(--note-fill); }

/* ==========================================================================
   FAQ « Avant de réserver » : deux colonnes + accordéon en cascade
   ========================================================================== */
.faq-duo {
    display: grid;
    grid-template-columns: 1.18fr .82fr;   /* accordéon (large) à gauche | intro (étroite) à droite */
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.faq-duo__intro { position: sticky; top: var(--sticky-top); order: 2; }   /* passe à droite (DOM inchangé pour la lecture/a11y) */
.faq-duo__titre { font-size: var(--fs-h2); margin: 14px 0; }   /* rythme 14/14 homogène avec .etapes__titre et .section__entete */
.faq-duo__sous { color: var(--muted); font-size: var(--fs-lead); max-width: 36ch; }
/* Accordeon a fleur de la grille : on annule l'indentation horizontale du panneau
   (28px par defaut) pour que son bord gauche tombe sur la colonne, comme l'intro en
   face. Scope .faq-duo => les FAQ des autres pages gardent leur retrait. */
.faq-duo .faq__panneau { padding-inline: 0; }
.faq-contact {
    margin-top: 22px;
    padding: 18px;
}
.faq-contact__haut { display: flex; gap: 12px; align-items: flex-start; }
.faq-contact__icone {
    flex: none;
    width: 40px; height: 40px;
    background: var(--pale);
    color: var(--olive);
    display: grid; place-items: center;
    /* border-radius : galet --r-galet-xs (règle commune plus bas, source unique). */
}
.faq-contact__icone .icon { width: 21px; }
.faq-contact__titre { font-weight: 600; font-size: var(--fs-body); color: var(--ink); }
.faq-contact__desc { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.faq-contact__btn { margin-top: 16px; }

/* Intro FAQ : cascade gérée par la règle générique [data-cascade] plus haut
   (data-cascade posé sur .faq-duo__intro dans le gabarit). */

/* Accordéon : les questions se révèlent une par une à l'arrivée à l'écran. */
.js .faq-duo .faq__panneau[data-reveal] { opacity: 1; transform: none; }
.js .faq-duo .faq__panneau[data-reveal] .accordeon__item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
    transition-delay: var(--reveal-delay, 0ms);
}
.js .faq-duo .faq__panneau[data-reveal].is-visible .accordeon__item { opacity: 1; transform: none; }
.faq-duo .accordeon__item:nth-child(2) { --reveal-delay: 70ms; }
.faq-duo .accordeon__item:nth-child(3) { --reveal-delay: 140ms; }
.faq-duo .accordeon__item:nth-child(4) { --reveal-delay: 210ms; }

/* ==========================================================================
   Dé-cartage de la page Démo : galets pleins (--r-galet-*) posés à plat sur le
   fond de section. Profondeur SANS ombre = feuilletage tonal (sable < crème <
   blanc) + filets chauds 1px var(--border). Le contenu reste au-dessus des
   blobs grâce au z-index posé sur le conteneur.
   ========================================================================== */
.demo-tige .conteneur { position: relative; z-index: 1; }

/* Galets pleins (surface blanche, marche sur sable ET crème) - DEMO-ONLY. */
.demo__social,
.etapes__note,
.faq-contact { background: var(--white); border: 0; border-radius: var(--r-galet-lg); }

/* Petits coins internes (< 56px) : galet xs, jamais le 22px qui déborderait. */
.faq-contact__icone,
.parcours__puce { border-radius: var(--r-galet-xs); }


/* Preuve : UN panneau crème cadré = la structure premium qui évite vide/cheap.
   Profondeur SANS ombre : feuilletage tonal sable < crème < blanc + filets chauds. */
.preuve__panneau {
    position: relative;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--r-panel-lg) var(--r-panel-sm) var(--r-panel-lg) var(--r-panel-sm);
    padding: clamp(30px, 4vw, 58px);
    overflow: hidden;
}
.preuve__feuille { position: absolute; top: 14px; right: 16px; width: 18px; color: var(--green); transform: rotate(12deg); line-height: 0; }
.preuve__feuille .icon { width: 18px; display: block; }
/* Bande 1 : signature = note 4,7 + montée en ligne, filet bas (plus le héros). */
.preuve__signe { display: flex; align-items: center; justify-content: space-between; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: clamp(24px, 3vw, 38px); }
.preuve__signe-note { display: flex; align-items: center; gap: 14px; }
.preuve__signe-chiffre { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 1.6rem + 2vw, 3rem); line-height: .85; color: var(--olive); }
.preuve__signe-col { display: flex; flex-direction: column; gap: 3px; }
.preuve__signe-label { font-size: var(--fs-sm); color: var(--prose); max-width: 20ch; }
/* Mini-carte d'évolution : pastille (titre) en haut, courbe, puis avant -> après (3,4 ... 4,7). */
.preuve__signe-trend { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.preuve__signe-chip { align-self: flex-start; background: var(--pale); color: var(--prose); font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-galet-xs); }   /* prose sur pale, marge AA large (cf. .parcours__meta) */

/* Sparkline « la note qui monte », repositionnée en ligne dans la signature (SVG inchangé). */
.preuve__courbe { position: relative; width: 100%; max-width: 188px; }
.preuve__spark { display: block; width: 100%; height: 50px; overflow: visible; }
.preuve__spark-aire { fill: var(--pale); }
.preuve__spark-trait { fill: none; stroke: var(--olive); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* Bornes de la courbe en ligne sous le tracé (plus d'étoile-sommet qui percutait la feuille). */
.preuve__courbe-bornes { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 6px; }
.preuve__spark-de { font-size: var(--fs-xs); color: var(--muted); }                          /* la note d'avant, en retrait */
.preuve__spark-vers { font-size: var(--fs-xs); font-weight: 700; color: var(--olive); }       /* la note d'aujourd'hui, accent (olive sur crème = AA) */
.js .preuve__spark-trait { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease-doux); }
.js .preuve.is-anime .preuve__spark-trait { stroke-dashoffset: 0; }
.js .preuve__spark-aire { opacity: 0; transition: opacity .6s ease; }
.js .preuve.is-anime .preuve__spark-aire { opacity: 1; }

/* Bande 2 : LA VOIX = affirmation héros, accent olive, étoile filigrane derrière. */
.preuve__voix { position: relative; isolation: isolate; margin: 0; padding: clamp(32px, 4.4vw, 56px) 0; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-bloc); line-height: 1.3; color: var(--ink); max-width: 26ch; text-wrap: balance; }
.preuve__voix b { color: var(--olive); font-weight: 600; }
/* Étoile filigrane : DERRIÈRE le texte (z-index:-1 / contexte isolé) ET calée dans le
   coin bas-droit, hors de la colonne de texte (left-aligné max-width 26ch). */
.preuve__voix-marque { position: absolute; right: -12px; bottom: 6px; font-size: clamp(3rem, 2rem + 3.2vw, 4.8rem); line-height: 1; color: var(--pale); z-index: -1; pointer-events: none; }

/* Bande 3 : socle = 3 chiffres-repères séparés par filets (colophon, pas un dashboard). */
.preuve__socle { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(26px, 3.2vw, 42px); }
.preuve__stat { padding: 0 clamp(10px, 1.6vw, 20px); }
.preuve__stat:first-child { padding-left: 0; }
.preuve__stat:last-child { padding-right: 0; }
.preuve__stat + .preuve__stat { border-left: 1px solid var(--border); }
.preuve__stat-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); color: var(--olive); line-height: 1; }
.preuve__stat-lib { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--prose); }

/* Grille de 4 photos clients (2x2), séparée du panneau (hauteur indépendante). */
.preuve__photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 0.7vw, 10px); }
.preuve__photo { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border: 1px solid var(--border); border-radius: var(--r-galet-sm); background: var(--pale); }

/* ==========================================================================
   RESPONSIVE - tout regroupé ici, en fin de fichier (après les règles de base,
   pour que les overrides des grilles s'appliquent bien).
   Desktop = les règles de base plus haut. Mobile = ci-dessous.
   . largeur <= 900px : les grilles « duo » passent en 1 colonne ;
   . largeur <= 480px : les 3 chiffres-repères s'empilent ;
   . garde-fou de HAUTEUR pour le formulaire sticky ;
   . un SEUL bloc prefers-reduced-motion (états finaux, sans animation) ;
   . masquage des blobs secondaires (allègement de la mise en page empilée).
   ========================================================================== */

/* Mobile (<= 900px) : bascule des duos en 1 colonne. */
@media (max-width: 900px) {
    /* Hero : le formulaire passe sous le pitch (plus de sticky), l'ancre mobile apparaît.
       La bascule de la grille en 1 colonne vient de .duo - inutile de la redéclarer. */
    .demo__hero-cta { display: inline-flex; }
    .demo__form { position: static; }

    /* Preuve : le panneau puis la grille de 4 photos en dessous. */
    .preuve { grid-template-columns: 1fr; }
    .preuve__courbe { max-width: none; }

    /* Étapes : l'intro repasse au-dessus du parcours (plus de 2 colonnes). */
    .etapes { grid-template-columns: 1fr; gap: 30px; }
    .etapes__intro { position: static; }
    .etapes__sous { max-width: none; }

    /* FAQ : l'intro repasse au-dessus de l'accordéon. */
    .faq-duo { grid-template-columns: 1fr; }
    .faq-duo__intro { position: static; order: 0; }
    .faq-duo__sous { max-width: none; }

    /* Décor : on allège les blobs secondaires sur la mise en page empilée. */
    .demo__blob-hero-2, .demo__blob-hero-3, .demo__blob-preuve-1, .demo__blob-preuve-2, .demo__blob-faq-2 { display: none; }
}

/* Cartes du parcours resserrées sur petit mobile. */
@media (max-width: 560px) {
    .parcours__carte { gap: 12px; padding: 8px 16px 8px 6px; }
}

/* Petit mobile (<= 480px) : les 3 chiffres-repères s'empilent (filet horizontal). */
@media (max-width: 480px) {
    .preuve__socle { grid-template-columns: 1fr; }
    .preuve__stat { padding: 14px 0 0; }
    .preuve__stat:first-child { padding-top: 0; }
    .preuve__stat + .preuve__stat { border-left: 0; border-top: 1px solid var(--border); }
}

/* Garde-fou hauteur : écran trop court pour un sticky utile (indépendant de la largeur). */
@media (max-height: 760px) {
    .demo__form { position: static; }
}

/* Mouvement réduit : on affiche tous les états finaux, sans animation (un seul bloc). */
@media (prefers-reduced-motion: reduce) {
    /* Preuve : bandes, note et sparkline d'emblée. */
    .js .preuve__signe, .js .preuve__voix, .js .preuve__socle, .js .preuve__photos { opacity: 1; transform: none; }
    .js .preuve__note-fill { width: var(--note-fill); }
    .js .preuve__spark-trait { stroke-dashoffset: 0; transition: none; }
    .js .preuve__spark-aire { opacity: 1; transition: none; }
    /* Parcours : pastilles et rail d'emblée. */
    .js .parcours[data-reveal] .parcours__num { transform: none; }
    .js .parcours__item:not(:last-child)::after { transform: scaleY(1); transition: none; }
    /* FAQ : accordéon d'emblée. */
    .js .faq-duo .faq__panneau .accordeon__item { opacity: 1 !important; transform: none !important; }
}