/* ====================================================================
         NINJA BLEU — PROPOSITION D'ACCUEIL · VARIANTE « VERS LE JOUR »
         --------------------------------------------------------------------
         Une seule rampe, du bleu franc de la marque au blanc de la marque. La
         luminosite ne fait que monter, du premier pixel au dernier : aucun
         palier n'est plus sombre que le precedent. Les sections n'ont aucun
         fond a elles ; elles se distinguent par la densite et l'echelle
         typographique, jamais par un aplat.

         TROIS DEFAUTS CORRIGES, TOUS SIGNALES PAR CLEMENT ET TOUS REELS :
         1. « bleu marque, noir chelou, puis blanc » — la version precedente
            reutilisait les paliers sombres de la variante nuit et plongeait
            vers le presque noir au milieu. C'etait un aller-retour.
         2. « le bleu du debut n'est pas le bleu de la marque » — exact. Le
            #013995 du favicon est le marine du logo ; le bleu qu'on identifie
            est celui des t-shirts, echantillonne a #0040B0. Et le voile du
            hero finissait plus sombre que son depart.
         3. « pas possible de scroll, ca defile item par item » — deux vraies
            causes : un filtre de fond sur la barre fixe, qui recompose tout
            l'ecran a chaque image, et une lecture de scrollHeight a chaque
            image, qui force un recalcul complet de la mise en page.

         Le fond vient de la plateforme de marque v2 : § 2 « une plateforme qui
         livre de l'entretien commercial », § 6 « on se compare aux logiciels,
         pas aux nettoyeurs » et « peu bavard », § 3 le mot qui differencie est
         « le jour meme », § 4 le 4,9 sur 27 avis n'est affiche nulle part.
         ==================================================================== */

      :root {
        /* ⚠️ LE POINT DE DEPART N'EST PAS #013995.
           Reproche de Clement : « le bleu du debut n'est pas le bleu de la
           marque ». Verifie plutot que suppose. Le favicon et le jeton
           --color-brand-900 valent bien #013995, mais c'est le MARINE du logo,
           pas le bleu qu'on identifie. Echantillonnage des t-shirts sur les
           photos du terrain : #0040B0, #0040A0, #0050C0, #003090. Le bleu
           Ninja est franc, pas marine.

           Et il y avait une seconde cause, purement technique : le voile du
           hero se terminait sur #01337f, plus sombre que le depart. La
           premiere section assombrissait donc la couleur au lieu de la
           montrer. Voile corrige plus bas. */
        /* ⚠️ LA RAMPE EST ENTIEREMENT PANTONE, PLUS RIEN N'EST INVENTE.
           Reproche de Clement : « fais des recherches de Pantone les plus
           appropries avec nos deux couleurs de marque, la tu fais au pif, c'est
           moche ; la premiere version bleu vers blanc etait plus belle. »
           Les deux points etaient justes : mes intermediaires etaient choisis a
           vue, et la version desaturee etait plus terne que la saturee.

           RAPPROCHEMENT DES DEUX COULEURS DE MARQUE, calcule et non suppose :
             logo #013995        → le plus proche : PANTONE 286 C  #0033A0
             t-shirts #0040B0    → le plus proche : PANTONE 293 C  #003DA5
           C'est le second que Clement identifie comme « le bleu de la marque »,
           donc c'est lui qui ouvre la rampe.

           Tous les paliers appartiennent a la meme famille du nuancier, et leur
           POSITION dans la page n'est pas choisie : elle est calculee pour que
           la clarte perçue progresse lineairement. D'ou des pourcentages qui
           ne sont pas ronds.

             PANTONE 293 C   #003DA5   L* 29,5    0 %
             PANTONE 2935 C  #0057B8   L* 38,3   13 %
             PANTONE 285 C   #0072CE   L* 47,6   27 %
             PANTONE 279 C   #418FDE   L* 58,1   42 %
             PANTONE 284 C   #6CACE4   L* 68,2   58 %
             PANTONE 2905 C  #8DC8E8   L* 77,8   72 %
             PANTONE 290 C   #B9D9EB   L* 85,0   82 %
             PANTONE 656 C   #DDE5ED   L* 90,6   91 %
             blanc de marque #F4F6FB   L* 96,9  100 % */
        --p293: #003da5;  /* le bleu de marque */
        --p2935: #0057b8;
        --p285: #0072ce;
        --p279: #418fde;
        --p284: #6cace4;
        --p2905: #8dc8e8;
        --p290: #b9d9eb;
        --p656: #dde5ed;
        --jour: #f4f6fb; /* le blanc de la marque, point d'arrivee */
        --encre: #0b1220;

        --bleu: #0959e6;
        /* Eclairci : l'accent d'origine passait sous 4:1 des que le fond
           remontait. Mesure faite sur les surtitres et les numeros d'etape. */
        --bleu-clair: #dce8ff;
        --clair: #eef2fb;
        /* Ces deux gris etaient regles pour un fond qui restait sombre. Sur une
           rampe qui s'eclaircit, ils passent sous le seuil de lisibilite des la
           mi-page : mesure faite, 3,0:1 la ou il en faut 4,5. Remontes. */
        --clair-doux: rgb(238 242 251 / 0.95);
        --clair-faible: rgb(238 242 251 / 0.92);
        --filet: rgb(255 255 255 / 0.2);
        --or: #f5c451;

        --sans: 'Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
        --mono: 'Plex Mono', ui-monospace, Consolas, monospace;

        --gouttiere: clamp(1.25rem, 5vw, 5rem);
        --large: 1240px;
      }

      *,
      *::before,
      *::after { box-sizing: border-box; }

      html {
        background: var(--jour);
        /* ⚠️ CALAGE FRANC, ET LES SECTIONS DEVIENNENT DE VRAIES SLIDES.
           Reproche de Clement : « le deroulement en scroll marche mais a
           moitie, si je fais une demi-roulette ca part a la moitie jusqu'a ce
           que ca se declenche ». C'est le defaut exact du mode 'proximity' :
           il n'attrape que si on s'approche assez, sinon il laisse en plan.
           Et il ne pouvait pas faire mieux ici, parce que les sections ne
           faisaient pas un ecran : il n'y avait pas de point d'arret naturel.

           Les deux se corrigent ensemble : chaque section occupe desormais une
           hauteur d'ecran et le calage passe en 'mandatory'. Le defilement se
           pose toujours sur une slide, jamais entre deux. */
        scroll-snap-type: none;
        /* ⚠️ AUCUNE MARGE DE CALAGE, ET C'EST LE CORRECTIF DU DEFAUT SIGNALE.
           Reproche de Clement : « certains blocs apres scroll auto sortent de
           l'ecran ». Mesure : la marge de 4,5 rem posait le haut de chaque
           slide 72 px sous le haut de la fenetre, donc ses 72 derniers pixels
           passaient dessous. Toutes les slides sauf la premiere etaient
           amputees. La barre faisait d'ailleurs 103 px et non 72.

           La regle generale veut une marge de calage quand une barre fixe
           masque le haut des ancres. Elle ne s'applique pas a des slides qui
           font exactement une fenetre : ici la barre survole, et c'est le
           contenu de la slide qui garde sa propre respiration haute — mesure a
           180 px, soit 77 px sous la barre. */
        scroll-padding-top: 0;
        /* Le defilement ne se propage plus au-dela de la page. */
        overscroll-behavior-y: none;
      }

      /* LE DEGRADE. Il est pose ici et nulle part ailleurs. Sa hauteur est
         celle du document, donc il se parcourt une seule fois, du haut jusqu'en
         bas — et non a chaque ecran. */
      body {
        margin: 0;
        background: linear-gradient(
          180deg,
          var(--p293) 0%,
          var(--p2935) 13.1%,
          var(--p285) 26.8%,
          var(--p279) 42.4%,
          var(--p284) 57.5%,
          var(--p2905) 71.6%,
          var(--p290) 82.3%,
          var(--p656) 90.6%,
          var(--jour) 100%
        );
        color: var(--clair);
        font-family: var(--sans);
        font-size: 17px;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
      }

      img { display: block; max-width: 100%; }

      .large {
        width: 100%;
        max-width: var(--large);
        margin-inline: auto;
        padding-inline: var(--gouttiere);
      }

      /* Aucune section ne porte de fond. C'est la regle de la page. */
      section {
        position: relative;
        background: transparent;
        scroll-snap-align: start;
        /* Sans ceci, un coup de molette franc saute par-dessus une slide
           entiere. Avec, le defilement s'arrete sur chacune. */
        scroll-snap-stop: normal;
      }

      .surtitre {
        margin: 0;
        font-family: var(--mono);
        font-size: 0.7rem;
        font-weight: 500;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--bleu-clair);
      }

      h1, h2, h3 {
        margin: 0;
        font-weight: 600;
        line-height: 1.02;
        letter-spacing: -0.035em;
        text-wrap: balance;
      }

      /* ------------------------------------------------------------------
         PROGRESSION ET EN-TETE
         ------------------------------------------------------------------ */
      .progres {
        position: fixed;
        z-index: 90;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
      }
      .progres__barre {
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--bleu), var(--bleu-clair));
      }

      .tete {
        position: fixed;
        z-index: 80;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: 1px solid transparent;
        transition: background 0.4s ease, border-color 0.4s ease;
      }
      /* L'en-tete ne pose pas une couleur fixe : elle floute ce qu'il y a
         derriere. Elle suit donc le degrade au lieu de le trancher. */
      /* ⚠️ PLUS DE `backdrop-filter` ICI, ET C'EST UN CORRECTIF.
         Reproche de Clement : « pas possible de scroll, effet decolle, ca
         defile item par item. » Un filtre de fond sur une barre fixe force le
         navigateur a recomposer TOUT l'ecran a chaque image, et la page fait
         plus de dix mille pixels de haut avec un degrade plein cadre. Le cout
         par image explose et le defilement devient saccade.
         Un aplat translucide donne le meme effet visuel pour rien. */
      body[data-defile] .tete {
        background: rgb(3 40 110 / 0.82);
        border-bottom-color: var(--filet);
      }
      .tete__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        padding-block: clamp(0.9rem, 2vw, 1.4rem);
      }
      /* ⚠️ LE LOGO EST UNE IMAGE, PLUS UN MOT COMPOSE.
         Reproche de Clement : « le logo n'est nulle part ni la vraie typo Ninja
         Bleu ». Le premier point est corrige ici — le bloc-marque officiel
         remplace le texte en monospace qui en tenait lieu.

         Le second ne peut pas l'etre sans lui : le texte du logo est VECTORISE
         dans le fichier source (%%DocumentFonts vide, /FontName/copied), donc
         le nom de la police n'y est pas recuperable, et 07-marque/ la note
         encore comme « a annoncer ». Il faut le nom ou le fichier de police.
         En attendant, Plex Sans reste le substitut. */
      .marque {
        display: flex;
        align-items: center;
        text-decoration: none;
      }
      .marque img {
        width: auto;
        height: clamp(1.7rem, 3vw, 2.2rem);
      }
      .tete nav { display: flex; gap: clamp(1rem, 2.6vw, 2.2rem); font-size: 0.9rem; }
      .tete nav a {
        position: relative;
        padding-block: 0.35rem;
        color: var(--clair-doux);
        text-decoration: none;
      }
      .tete nav a::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--bleu-clair);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        content: '';
      }
      .tete nav a:hover { color: #fff; }
      .tete nav a:hover::after { transform: scaleX(1); }
      @media (max-width: 860px) { .tete nav { display: none; } }

      /* ------------------------------------------------------------------
         BOUTONS
         ------------------------------------------------------------------ */
      .bouton {
        display: inline-flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.95rem 1.6rem;
        border: 1px solid transparent;
        border-radius: 2px;
        font-size: 0.98rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        text-decoration: none;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease;
      }
      .bouton--plein { background: #fff; color: #08183a; }
      .bouton--plein:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.85);
      }
      .bouton--fil { border-color: rgb(255 255 255 / 0.3); color: #fff; }
      .bouton--fil:hover { border-color: #fff; background: rgb(255 255 255 / 0.07); }
      .bouton .fleche { transition: transform 0.25s ease; }
      .bouton:hover .fleche { transform: translateX(4px); }

      /* ==================================================================
         1 · LE HERO
         ------------------------------------------------------------------
         La photo ne pose pas un rectangle sombre sur le degrade : elle s'y
         fond. Le voile est transparent en haut, opaque en bas, et sa couleur
         basse est exactement le palier du degrade a cette hauteur. Il n'y a
         donc aucun bord visible ou l'image se termine.
         ================================================================== */
      .hero {
        display: flex;
        align-items: flex-end;
        min-height: 100svh;
        padding-top: 7rem;
        padding-bottom: clamp(3rem, 8vh, 6rem);
        overflow: hidden;
        isolation: isolate;
      }
      .hero__fond { position: absolute; z-index: -2; inset: 0; }
      .hero__fond img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 60% 50%;
        /* Ramenee dans le bleu du logo : melangee, pas posee. */
        filter: saturate(0.5) brightness(0.62) contrast(1.05);
        opacity: 0.5;
        transform: scale(1.06);
        animation: derive 30s ease-in-out infinite alternate;
      }
      @keyframes derive {
        from { transform: scale(1.06) translate3d(0, 0, 0); }
        to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); }
      }
      @media (prefers-reduced-motion: reduce) { .hero__fond img { animation: none; } }
      .hero__voile {
        position: absolute;
        z-index: -1;
        inset: 0;
        /* Le voile ne fonce plus rien : il ne fait que temperer la photo pour
           que le texte tienne. Sa couleur basse est exactement le palier du
           degrade a cette hauteur, donc la couleur de marque reste visible du
           premier au dernier pixel du hero. */
        background:
          radial-gradient(110% 80% at 76% 22%, rgb(60 130 255 / 0.2), transparent 62%),
          linear-gradient(180deg, rgb(3 68 180 / 0.42) 0%, rgb(3 68 180 / 0.3) 55%, rgb(6 73 184 / 0.55) 100%);
      }

      .hero__grille {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: clamp(2rem, 5vw, 4rem);
      }
      @media (max-width: 980px) { .hero__grille { grid-template-columns: minmax(0, 1fr); } }

      .hero h1 {
        max-width: 15ch;
        margin-block: 1.4rem 1.5rem;
        font-size: clamp(2.9rem, 8.2vw, 6.4rem);
      }
      .jour-meme { position: relative; white-space: nowrap; }
      .jour-meme::after {
        position: absolute;
        bottom: 0.06em;
        left: 0;
        width: 100%;
        height: 0.085em;
        background: var(--bleu-clair);
        transform: scaleX(0);
        transform-origin: left;
        animation: souligner 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
        content: '';
      }
      @keyframes souligner { to { transform: scaleX(1); } }

      .hero__lede {
        max-width: 46ch;
        margin: 0 0 2.2rem;
        font-size: clamp(1.05rem, 1.7vw, 1.28rem);
        color: var(--clair-doux);
      }
      .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

      .preuve {
        min-width: 15rem;
        padding: 1.5rem 1.6rem;
        border: 1px solid var(--filet);
        border-radius: 3px;
        background: rgb(2 26 74 / 0.72);
      }
      .preuve__note {
        display: flex;
        align-items: baseline;
        gap: 0.6rem;
        margin-block: 0.6rem 0.2rem;
      }
      .preuve__chiffre {
        font-size: 3.1rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.045em;
        font-variant-numeric: tabular-nums;
      }
      .etoiles { color: var(--or); letter-spacing: 0.1em; font-size: 0.95rem; }
      .preuve__source {
        margin: 0;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        color: var(--clair-faible);
      }

      .defiler {
        /* Meme regle que partout ailleurs sous 20 % : ce qui est petit et clair
           porte sa surface. Ici une simple pastille, du blanc plein dessus. */
        width: fit-content;
        padding: 0.5rem 0.9rem;
        border-radius: 999px;
        background: rgb(2 26 74 / 0.62);
        color: #fff;
        display: flex;
        align-items: center;
        gap: 0.7rem;
        margin-top: clamp(2.5rem, 6vh, 4rem);
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--clair-faible);
      }
      .defiler__trait {
        width: 3.5rem;
        height: 1px;
        background: linear-gradient(90deg, var(--bleu-clair), transparent);
        animation: glisser 2.6s ease-in-out infinite;
      }
      @keyframes glisser {
        0%, 100% { transform: translateX(0); opacity: 1; }
        50% { transform: translateX(0.6rem); opacity: 0.45; }
      }

      /* ==================================================================
         2 · TROIS MOMENTS
         ================================================================== */
      .bloc {
        display: flex;
        flex-direction: column;
        /* Le mot-cle « safe » fait toute la difference : si le contenu depasse
           la hauteur, un centrage ordinaire le fait deborder des DEUX cotes et
           le haut devient inatteignable. « safe » bascule alors en alignement
           haut. C'est le filet contre le defaut signale par Clement. */
        justify-content: safe center;
        min-height: 100svh;
        /* Respirations dissymetriques, et c'est voulu : la barre fixe survole
           les 103 premiers pixels. Avec une respiration egale, le contenu des
           slides denses demarrait a 108 px, soit cinq pixels sous la barre.
           Le haut est donc plus genereux que le bas. */
        padding-top: clamp(7.5rem, 15vh, 10rem);
        padding-bottom: clamp(4rem, 8vh, 6rem);
      }

      /* Filet de securite : sur un ecran bas, une slide plus haute que la
         fenetre serait piegee par le calage force. On le desactive alors. */
      @media (max-height: 700px) {
        html { scroll-snap-type: none; }
        .bloc { min-height: 0; }
      }

      .nuit__tete {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: clamp(2.5rem, 6vw, 4rem);
      }
      /* ⚠️ L'EN-TETE DE « PRODUIT » PORTE UNE SURFACE, ET C'EST STRUCTUREL.
         Calcul : sur une rampe a pas perceptuels constants, du petit texte
         clair ne tient que dans les vingt premiers pour cent de la page — a
         25 % le fond atteint deja une luminance de 0,17 et le blanc y tombe a
         4,3:1. L'encre, elle, n'est pas encore lisible a cette hauteur. Cette
         section est la seule qui traverse la bande morte, et la seule reponse
         qui ne deforme pas la rampe est de poser son texte sur sa propre
         surface, comme ses trois cartes juste en dessous. */
      #produit .nuit__tete {
        padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.3rem, 2.4vw, 2rem);
        border: 1px solid var(--filet);
        border-radius: 4px;
        background: rgb(2 26 74 / 0.72);
      }
      .nuit__tete h2 { max-width: 18ch; margin-top: 1rem; font-size: clamp(1.9rem, 4vw, 3.1rem); }
      .nuit__note { max-width: 34ch; margin: 0; font-size: 0.98rem; color: var(--clair-doux); }
      @media (max-width: 860px) { .nuit__tete { flex-direction: column; align-items: flex-start; } }

      .moments {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.8rem, 1.6vw, 1.4rem);
      }
      @media (max-width: 860px) { .moments { grid-template-columns: minmax(0, 1fr); } }

      .moment {
        position: relative;
        margin: 0;
        overflow: hidden;
        border-radius: 3px;
        aspect-ratio: 3 / 4;
        /* Le cadre n'est pas un bloc pose sur le fond : son bord se fond. */
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.07);
      }
      .moment img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.62) brightness(0.72);
        transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease;
      }
      .moment:hover img { transform: scale(1.05); filter: saturate(0.85) brightness(0.88); }
      .moment::after {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgb(1 51 127 / 0.15) 0%, transparent 35%, rgb(4 38 95 / 0.88) 100%);
        content: '';
      }
      .moment__texte { position: absolute; z-index: 2; right: 1.3rem; bottom: 1.3rem; left: 1.3rem; }
      .moment__heure {
        display: block;
        font-family: var(--mono);
        font-size: 1.5rem;
        font-weight: 500;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
        color: var(--bleu-clair);
      }
      .moment__quoi { display: block; margin-top: 0.2rem; font-size: 0.95rem; color: var(--clair); }

      /* ==================================================================
         2 bis · LE PRODUIT — trois ecrans
         ------------------------------------------------------------------
         § 2 : « Ninja Bleu n'est pas une compagnie de menage, c'est une
         plateforme qui livre de l'entretien commercial. » § 6 : « on se compare
         aux logiciels, pas aux nettoyeurs. » Ce bloc doit donc se lire comme un
         produit — des etapes numerotees, des durees en monospace, des chiffres
         alignes — et non comme une brochure de service.
         ================================================================== */
      .etapes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: clamp(0.9rem, 1.8vw, 1.6rem);
      }
      @media (max-width: 900px) { .etapes { grid-template-columns: minmax(0, 1fr); } }

      .etape {
        display: flex;
        flex-direction: column;
        padding: clamp(1.3rem, 2.4vw, 1.9rem);
        border: 1px solid var(--filet);
        border-radius: 4px;
        /* ⚠️ CETTE SURFACE N'EST PAS DECORATIVE, ELLE PORTE LA LISIBILITE.
           Les cartes tombent entre 28 et 40 % de la page, exactement dans la
           bande ou le fond est trop clair pour du texte blanc et trop fonce
           pour de l'encre. Une carte translucide a 4 % suivait le fond et
           devenait illisible avec lui. Un bleu profond a 78 % rend le contraste
           independant de la hauteur : la rampe peut alors etre lisse sans
           qu'aucun texte n'en paie le prix. */
        background: rgb(2 26 74 / 0.78);
        transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .etape:hover {
        border-color: rgb(183 207 251 / 0.5);
        background: rgb(2 26 74 / 0.88);
        transform: translateY(-3px);
      }
      .etape__tete {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding-bottom: 0.9rem;
        margin-bottom: 1.1rem;
        border-bottom: 1px solid var(--filet);
      }
      .etape__n {
        font-family: var(--mono);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        color: var(--bleu-clair);
      }
      .etape__duree {
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.04em;
        font-variant-numeric: tabular-nums;
        color: var(--clair-faible);
      }
      .etape__t {
        margin: 0 0 0.55rem;
        font-size: clamp(1.15rem, 1.9vw, 1.4rem);
        letter-spacing: -0.022em;
      }
      .etape__d {
        margin: 0 0 1.4rem;
        font-size: 0.96rem;
        color: var(--clair-doux);
      }

      .etape__vue {
        display: grid;
        place-content: center;
        gap: 0.35rem;
        margin: auto 0 0;
        overflow: hidden;
        border-radius: 3px;
        aspect-ratio: 16 / 10;
        background: rgb(2 12 40 / 0.45);
        box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06) inset;
        text-align: center;
      }
      .etape__vue img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.6) brightness(0.78);
      }
      .etape__montant {
        font-size: clamp(1.9rem, 3.4vw, 2.6rem);
        font-weight: 600;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
      }
      .etape__montant--ok { color: var(--bleu-clair); }
      .etape__mention {
        font-family: var(--mono);
        font-size: 0.7rem;
        letter-spacing: 0.05em;
        color: var(--clair-faible);
      }

      /* ==================================================================
         2 ter · CE QUE CA REMPLACE
         ------------------------------------------------------------------
         La seule des trois preuves du § 4 qui soit chiffree par le bench :
         0 acteur sur 16 ne permet de conclure en ligne. C'est donc elle, et
         elle seule, qui a droit a une confrontation en pleine page.
         ================================================================== */
      .compare { text-align: center; }
      .compare__titre {
        max-width: 20ch;
        margin: 0.9rem auto 0.7rem;
        font-size: clamp(2rem, 5vw, 3.6rem);
      }
      .compare__source {
        max-width: 52ch;
        margin: 0 auto clamp(1.6rem, 3.6vw, 2.4rem);
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.05em;
        color: var(--clair-faible);
      }

      .duel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(0.9rem, 2vw, 1.6rem);
        text-align: left;
      }
      @media (max-width: 780px) { .duel { grid-template-columns: minmax(0, 1fr); } }

      .duel__col {
        display: flex;
        flex-direction: column;
        padding: clamp(1.15rem, 2.1vw, 1.7rem);
        border: 1px solid var(--filet);
        border-radius: 4px;
      }
      .duel__col--avant { background: rgb(0 0 0 / 0.16); color: var(--clair-doux); }
      .duel__col--apres {
        border-color: rgb(143 180 247 / 0.42);
        background: rgb(9 89 230 / 0.14);
      }
      .duel__quoi {
        margin: 0 0 0.85rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--clair-faible);
      }
      .duel__col--apres .duel__quoi { color: var(--bleu-clair); }
      .duel__liste { margin: 0; padding: 0; list-style: none; }
      .duel__liste li {
        padding-block: 0.58rem;
        border-top: 1px solid var(--filet);
        font-size: 0.97rem;
      }
      .duel__liste li:first-child { border-top: 0; padding-top: 0; }
      .duel__col--avant .duel__liste li { text-decoration: line-through; opacity: 0.62; }

      .duel__compte {
        margin: 1.1rem 0 0;
        padding-top: 0.85rem;
        border-top: 1px solid var(--filet);
        font-family: var(--mono);
        font-size: 0.76rem;
        letter-spacing: 0.06em;
        color: var(--clair-faible);
      }
      .duel__compte b {
        display: block;
        margin-bottom: 0.15rem;
        font-family: var(--sans);
        font-size: clamp(2.4rem, 5vw, 3.4rem);
        font-weight: 600;
        letter-spacing: -0.045em;
        font-variant-numeric: tabular-nums;
        color: var(--clair);
      }
      .duel__compte--nous b { color: var(--bleu-clair); }

      /* ==================================================================
         3 · LE MATIN
         ------------------------------------------------------------------
         En v1, ce bloc basculait sur du papier blanc. C'etait la coupure la
         plus violente de la page. Il reste sur le degrade : ce qui le
         distingue, c'est l'echelle typographique et une lueur tres basse, pas
         un aplat.
         ================================================================== */
      .matin { text-align: center; }
      .matin__lueur {
        position: absolute;
        z-index: -1;
        top: 50%;
        left: 50%;
        width: min(70rem, 120%);
        height: 34rem;
        transform: translate(-50%, -50%);
        background: radial-gradient(50% 50% at 50% 50%, rgb(143 180 247 / 0.16), transparent 70%);
        pointer-events: none;
      }
      .citation {
        max-width: 22ch;
        margin: 1.6rem auto 0;
        font-size: clamp(2.1rem, 6vw, 4.6rem);
        font-weight: 600;
        line-height: 1.04;
        letter-spacing: -0.042em;
        text-wrap: balance;
      }
      .citation em { font-style: normal; color: var(--bleu-clair); }
      .citation__qui {
        margin-top: 2.2rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--clair-faible);
      }

      /* ==================================================================
         4 · LE PRIX
         ================================================================== */
      .prix__grille {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(2rem, 6vw, 5rem);
        align-items: start;
      }
      @media (max-width: 900px) { .prix__grille { grid-template-columns: minmax(0, 1fr); } }
      .prix h2 { max-width: 12ch; margin-top: 1rem; font-size: clamp(2rem, 4.6vw, 3.4rem); }
      .prix__texte {
        max-width: 52ch;
        margin: 0 0 2rem;
        font-size: clamp(1.05rem, 1.5vw, 1.2rem);
        color: var(--clair-doux);
      }

      .rangs { border-top: 1px solid var(--filet); }
      .rang {
        display: grid;
        grid-template-columns: 3.2rem minmax(0, 1fr);
        gap: 1.2rem;
        padding-block: 1.4rem;
        border-bottom: 1px solid var(--filet);
        transition: padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .rang:hover { padding-left: 0.5rem; }
      .rang__n {
        padding-top: 0.28rem;
        font-family: var(--mono);
        font-size: 0.78rem;
        letter-spacing: 0.06em;
        color: var(--bleu-clair);
      }
      .rang__t { margin: 0 0 0.3rem; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.015em; }
      .rang__d { margin: 0; font-size: 0.97rem; color: var(--clair-doux); }

      /* ==================================================================
         5 · BANDEAU FINAL — le point le plus sombre du degrade
         ================================================================== */
      .fin { overflow: hidden; text-align: center; isolation: isolate; }
      .fin__fond { position: absolute; z-index: -2; inset: 0; }
      .fin__fond img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Reproche : « l'image en bas, derniere slide, est crop chelou ». Le
           cadrage par defaut coupe au centre et tranchait les silhouettes a
           mi-corps. On recale sur le tiers haut, la ou se trouve l'action. */
        object-position: 50% 34%;
        filter: saturate(0.4) brightness(0.5);
        opacity: 0.32;
      }
      .fin__voile {
        position: absolute;
        z-index: -1;
        inset: 0;
        background: linear-gradient(180deg, transparent 0%, var(--p656) 40%, var(--jour) 100%);
      }
      .fin h2 { max-width: 18ch; margin: 1.2rem auto 1.4rem; font-size: clamp(2.2rem, 5.6vw, 4.2rem); }
      .fin__lede { max-width: 44ch; margin: 0 auto 2.4rem; color: var(--clair-doux); }
      .fin__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
      .fin__note {
        margin-top: 2.4rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        color: var(--clair-faible);
      }

      /* ==================================================================
         LE BASCULEMENT SUR LE JOUR
         ------------------------------------------------------------------
         Toutes les regles de la page passent par des jetons. Il suffit donc de
         redefinir ces jetons sur la derniere section pour que l'encre, les
         filets et les surtitres s'inversent d'un coup, sans dupliquer une seule
         regle. C'est aussi ce qui garantit qu'on n'oublie rien.
         ================================================================== */
      .sur-clair {
        --clair: var(--encre);
        --clair-doux: rgb(11 18 32 / 0.84);
        --clair-faible: rgb(11 18 32 / 0.8);
        --filet: rgb(11 18 32 / 0.16);
        /* Pas le bleu du logo : au debut de cette section le fond est encore
           bleu moyen, et le logo dessus tombe a 1,9:1. Un bleu plus profond
           passe partout jusqu'au blanc final. */
        --bleu-clair: #01214f;
        color: var(--clair);
      }

      /* Le bouton blanc disparaitrait sur le jour : il redevient bleu de logo. */
      .sur-clair .bouton--plein { background: var(--p293); color: #fff; }
      .sur-clair .bouton--plein:hover { box-shadow: 0 18px 44px -22px rgb(1 57 149 / 0.7); }
      .sur-clair .bouton--fil { border-color: rgb(11 18 32 / 0.28); color: var(--encre); }
      .sur-clair .bouton--fil:hover { border-color: var(--encre); background: rgb(11 18 32 / 0.05); }

      /* La derniere section pose son propre voile : transparent en haut, jour
         plein des le tiers. Comme le degrade du body est deja clair a cette
         hauteur, le raccord ne se voit pas — c'est ce qui evite la bascule
         brutale reprochee a la version precedente. */
      .sur-clair .fin__voile {
        /* 22 % et non 34 % : mesure faite, a 34 % les 44 premiers pixels de
           texte encre tombaient encore sur du bleu intermediaire. Le voile doit
           etre plein AVANT le premier mot, jamais au niveau du premier mot. */
        background: linear-gradient(180deg, transparent 0%, var(--jour) 22%, var(--jour) 100%);
      }
      .sur-clair .fin__fond img {
        opacity: 0.16;
        filter: saturate(0.35) brightness(1.05);
      }
      .sur-clair.fin { padding-top: clamp(7rem, 18vh, 12rem); }

      /* Les deux colonnes de la confrontation portent aussi leur surface :
         sur une rampe lisse, un panneau noir translucide suivrait le fond et
         l'encre finirait par ne plus passer. */
      .sur-clair .duel__col--avant { background: rgb(255 255 255 / 0.42); }
      .sur-clair .duel__col--apres {
        border-color: rgb(3 68 180 / 0.42);
        background: rgb(255 255 255 / 0.74);
      }

      

      .pied.sur-clair { background: var(--jour); }


      /* ==================================================================
         BARRE ADAPTATIVE — sombre sur les slides bleues, claire sur les claires
         ------------------------------------------------------------------
         Sur les trois dernieres slides le fond est presque blanc, et une barre
         bleu sombre posee dessus contredisait la regle de la page : aucun
         aplat. Le script marque le body quand la slide visible est claire, et
         la barre suit. Le logo bascule aussi, version bleue sur clair.
         ================================================================== */
      .marque img.marque__clair { display: none; }
      body[data-clair] .marque img.marque__sombre { display: none; }
      body[data-clair] .marque img.marque__clair { display: block; }
      body[data-clair][data-defile] .tete {
        background: rgb(244 246 251 / 0.88);
        border-bottom-color: rgb(11 18 32 / 0.12);
      }
      body[data-clair] .tete nav a { color: rgb(11 18 32 / 0.72); }
      body[data-clair] .tete nav a:hover { color: var(--encre); }
      body[data-clair] .tete nav a::after { background: var(--p293); }
      body[data-clair] .tete .bouton--plein { background: var(--p293); color: #fff; }

      /* ==================================================================
         POINTS DE NAVIGATION — savoir ou on est, et y aller
         ------------------------------------------------------------------
         Cinq slides, cinq points a droite. Le point actif s'allonge. Chaque
         point est un lien vers sa slide, donc accessible au clavier et lisible
         par un lecteur d'ecran. C'est la reponse a « on ne sait pas ou on est
         sur la page », que la barre de progression seule ne donnait pas.
         ================================================================== */
      .points {
        position: fixed;
        z-index: 85;
        top: 50%;
        right: clamp(0.9rem, 2vw, 1.8rem);
        display: flex;
        flex-direction: column;
        gap: 0.7rem;
        transform: translateY(-50%);
      }
      .points a {
        display: block;
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: rgb(255 255 255 / 0.45);
        transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
      }
      .points a:hover { background: rgb(255 255 255 / 0.85); }
      .points a[data-actif] { height: 1.6rem; background: #fff; }
      .points a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
      body[data-clair] .points a { background: rgb(11 18 32 / 0.28); }
      body[data-clair] .points a:hover { background: rgb(11 18 32 / 0.6); }
      body[data-clair] .points a[data-actif] { background: var(--p293); }
      body[data-clair] .points a:focus-visible { outline-color: var(--p293); }
      @media (max-width: 860px) { .points { display: none; } }

      /* ==================================================================
         BARRE DE PROGRESSION PILOTEE PAR LE DEFILEMENT, SANS SCRIPT
         ------------------------------------------------------------------
         La ou le navigateur sait le faire, la barre suit le defilement sur le
         fil du compositeur : zero calcul par image. Ailleurs, le script prend
         le relais, et il verifie lui-meme la prise en charge.
         ================================================================== */
      @supports (animation-timeline: scroll()) {
        .progres__barre {
          width: 100%;
          transform-origin: left;
          transform: scaleX(0);
          animation: remplir linear both;
          animation-timeline: scroll(root);
        }
        @keyframes remplir { to { transform: scaleX(1); } }
      }

      /* ==================================================================
         CASCADE A L'ARRIVEE SUR UNE SLIDE
         ------------------------------------------------------------------
         Les blocs d'une meme slide n'apparaissent plus d'un coup : chacun
         suit le precedent de 70 ms. La slide se compose sous les yeux.
         ================================================================== */
      @media (prefers-reduced-motion: no-preference) {
        html.js-anim .revele:nth-child(2) { transition-delay: 0.07s; }
        html.js-anim .revele:nth-child(3) { transition-delay: 0.14s; }
        html.js-anim .revele:nth-child(4) { transition-delay: 0.21s; }
        html.js-anim .revele:nth-child(5) { transition-delay: 0.28s; }
      }


      /* ==================================================================
         ETIQUETTE DES POINTS AU SURVOL — le nom de la slide, pas juste un rond
         ================================================================== */
      .points a { position: relative; }
      .points a::after {
        position: absolute;
        top: 50%;
        right: calc(100% + 0.8rem);
        padding: 0.3rem 0.6rem;
        border-radius: 3px;
        background: rgb(2 26 74 / 0.86);
        color: #fff;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
        text-transform: uppercase;
        opacity: 0;
        transform: translate(0.4rem, -50%);
        transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        content: attr(aria-label);
      }
      .points a:hover::after,
      .points a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
      body[data-clair] .points a::after { background: rgb(244 246 251 / 0.96); color: var(--encre); box-shadow: 0 0 0 1px rgb(11 18 32 / 0.12); }


      /* ==================================================================
         LE TABLEAU DE COMPARAISON, REFAIT POUR GUIDER L'OEIL
         ------------------------------------------------------------------
         Reproche de Clement : « le tableau est pas tres beau, pas tres
         visible, ca pousse pas vers ce qu'on veut qu'il regarde. » Avant :
         deux colonnes de meme poids, deux gros chiffres qui se font
         concurrence, aucun bouton la ou la preuve est la plus forte.

         Maintenant : la colonne Ninja Bleu est plus large, surelevee, avec
         un seul chiffre focal (0 sur 16, la seule preuve chiffree par le
         bench, P § 4) et le bouton juste dessous. L'ancien parcours est
         plus etroit, gris, chaque ligne marquee d'une croix. L'oeil va la
         ou on veut qu'il aille, sans qu'on ait besoin de le dire.
         ================================================================== */
      .duel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
      @media (max-width: 780px) { .duel { grid-template-columns: minmax(0, 1fr); } }

      .duel__col--avant { padding-top: 2.4rem; }
      .sur-clair .duel__col--avant { background: rgb(255 255 255 / 0.3); border-color: rgb(11 18 32 / 0.1); }
      .duel__col--avant .duel__quoi,
      .duel__col--avant .duel__liste li { color: rgb(11 18 32 / 0.6); }
      .duel__col--avant .duel__liste li { text-decoration: none; opacity: 1; font-size: 0.93rem; }
      .duel__col--apres .duel__quoi { color: var(--p293); }

      .sur-clair .duel__col--apres {
        background: #fff;
        border-color: rgb(3 68 180 / 0.35);
        box-shadow: 0 24px 60px -30px rgb(1 57 149 / 0.45), 0 1px 0 rgb(255 255 255 / 0.8) inset;
        transform: translateY(-0.6rem);
      }

      /* Une croix a gauche, une coche a droite : la difference se lit avant meme le texte. */
      .duel__liste li { position: relative; padding-left: 1.7rem; }
      .duel__liste li::before {
        position: absolute;
        left: 0;
        top: 0.62rem;
        width: 1.05rem;
        height: 1.05rem;
        border-radius: 999px;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 1.05rem;
        text-align: center;
        content: '';
      }
      .duel__col--avant .duel__liste li::before { background: rgb(11 18 32 / 0.08); color: rgb(11 18 32 / 0.55); content: '✕'; }
      .duel__col--apres .duel__liste li::before { background: var(--p293); color: #fff; content: '✓'; }

      /* Le chiffre focal, un seul. */
      .duel__fait {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 0.45rem 0.7rem;
        margin: 0 0 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--filet);
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: -0.015em;
      }
      .duel__fait b {
        font-size: clamp(2.4rem, 4.6vw, 3.2rem);
        line-height: 1;
        letter-spacing: -0.045em;
        font-variant-numeric: tabular-nums;
        color: var(--p293);
      }
      .duel__fait span {
        flex-basis: 100%;
        font-size: 0.86rem;
        font-weight: 400;
        color: var(--clair-doux);
      }
      .duel__compte { margin-top: 1.2rem; padding-top: 0.85rem; font-size: 0.75rem; }
      .duel__cta { margin-top: 1.2rem; align-self: flex-start; }
      .sur-clair .duel__cta { background: var(--p293); color: #fff; }
      .sur-clair .duel__cta:hover { box-shadow: 0 18px 44px -22px rgb(1 57 149 / 0.7); }


      /* Resserrage mesure : compare debordait de 92 px et produit de 13 px sur une
         fenetre de 900 ; la colonne grise tombait a 3,7:1. */
      .duel__col--avant .duel__quoi,
      .duel__col--avant .duel__liste li { color: rgb(11 18 32 / 0.8); }
      .duel__col { padding: clamp(1rem, 1.9vw, 1.5rem); }
      .duel__liste li { padding-block: 0.48rem; font-size: 0.95rem; }
      .duel__fait { margin: 0 0 0.7rem; padding-bottom: 0.7rem; }
      .duel__fait b { font-size: clamp(2rem, 3.6vw, 2.6rem); }
      .duel__cta { margin-top: 0.9rem; padding: 0.75rem 1.3rem; font-size: 0.94rem; }
      .duel__compte { margin-top: 0.9rem; padding-top: 0.7rem; }
      .compare__titre { font-size: clamp(1.8rem, 4.4vw, 3.1rem); }
      .compare__source { margin-bottom: clamp(1.2rem, 2.6vw, 1.8rem); }
      .etape__vue { aspect-ratio: 16 / 9; }

      /* compare depassait encore de 4 px : la respiration basse de cette slide passe de 8vh a 7vh. */
      #compare.bloc { padding-bottom: clamp(3.5rem, 7vh, 5rem); }


      /* ==================================================================
         LA MARQUE QUI SE MEFIE — slide « Le juste prix »
         ------------------------------------------------------------------
         Demande de Clement : sous « un prix trop bas, c'est un piege », la
         marque avec les yeux qui cherchent a gauche et a droite, mefiante.
         Le geste dit le hook sans un mot de plus.

         Note de doctrine, posee ici pour qu'elle ne se perde pas : la
         plateforme v2, § 7, interdit « la mascotte et l'univers ninja
         decoratif ». Ceci est le logo officiel, une seule fois, avec un seul
         micro-mouvement lie au propos. C'est un choix de Clement ; il reste a
         valider avec PA et Swan comme tout ce qui touche a l'identite.

         Les deux yeux sont des chemins separes dans le dessin d'origine : on
         ne retouche rien, on les deplace. Le dessin vit dans un repere a
         l'echelle 0,1 : 110 unites font 11 px de la boite de 180, soit 6 px
         a la taille affichee. C'est un regard, pas un roulement d'yeux.
         ================================================================== */
      .mefiant {
        display: block;
        width: clamp(4.4rem, 7.5vw, 6.2rem);
        height: auto;
        margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
        color: var(--p293);
      }
      .mefiant__oeil {
        transform-box: fill-box;
        transform-origin: center;
        animation: mefier 5.6s ease-in-out infinite;
      }
      /* Les deux yeux regardent du meme cote au meme moment. */
      @keyframes mefier {
        0%   { transform: translateX(0) scaleY(1); }
        10%  { transform: translateX(-110px) scaleY(1); }
        28%  { transform: translateX(-110px) scaleY(1); }
        38%  { transform: translateX(110px) scaleY(1); }
        58%  { transform: translateX(110px) scaleY(1); }
        66%  { transform: translateX(0) scaleY(1); }
        80%  { transform: translateX(0) scaleY(1); }
        83%  { transform: translateX(0) scaleY(0.12); }   /* un clignement */
        86%  { transform: translateX(0) scaleY(1); }
        100% { transform: translateX(0) scaleY(1); }
      }
      @media (prefers-reduced-motion: reduce) {
        .mefiant__oeil { animation: none; }
      }


      /* ==================================================================
         LE NINJA, MIEUX PLACE — au-dessus du surtitre, aligne sur le texte
         ------------------------------------------------------------------
         Clement : « la il est sur le cote, c'est un peu chelou ». Sous le
         titre il flottait dans le vide du bloc. En tete du bloc, il ouvre la
         lecture : marque, surtitre, titre. C'est la place d'un embleme.
         ================================================================== */
      .prix__gauche { display: flex; flex-direction: column; align-items: flex-start; }
      .prix__gauche .mefiant { margin: 0 0 clamp(1rem, 2vw, 1.4rem); width: clamp(4rem, 6.5vw, 5.4rem); }
      .prix__gauche h2 { margin-top: 0.9rem; }

      /* Deux cartes au lieu de trois : chacune respire davantage. */
      .etapes--deux { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62rem; }
      @media (max-width: 900px) { .etapes--deux { grid-template-columns: minmax(0, 1fr); } }

      /* ==================================================================
         SLIDE APP — ce qui se passe une fois le prix accepte
         ------------------------------------------------------------------
         Clement : « tu rentres dans l'app Ninja Bleu ou tu geres ton compte,
         tes interventions, en quelques clics, plus de temps perdu, facture
         auto ». Le texte de gauche et l'ecran de droite portent chacun leur
         surface sombre, comme les cartes de la slide precedente : a cette
         hauteur de la rampe, ni le blanc ni l'encre ne tiendraient sur le
         fond nu. Aucune donnee inventee sur l'ecran : des intitules et des
         phrases du lexique, pas de faux horaires ni de faux montants.
         ================================================================== */
      .app__grille {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: center;
      }
      @media (max-width: 900px) { .app__grille { grid-template-columns: minmax(0, 1fr); } }
      .app__texte {
        padding: clamp(1.4rem, 2.6vw, 2.2rem);
        border: 1px solid var(--filet);
        border-radius: 4px;
        background: rgb(2 26 74 / 0.72);
      }
      .app__texte h2 { max-width: 16ch; margin-top: 1rem; font-size: clamp(1.9rem, 4vw, 3rem); }
      .app__lede { max-width: 40ch; margin: 1.1rem 0 1.5rem; color: var(--clair-doux); }
      .lien {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px solid rgb(255 255 255 / 0.45);
        padding-bottom: 0.15rem;
      }
      .lien:hover { border-bottom-color: #fff; }
      .lien .fleche { transition: transform 0.25s ease; }
      .lien:hover .fleche { transform: translateX(4px); }

      .app__ecran {
        overflow: hidden;
        border: 1px solid rgb(255 255 255 / 0.22);
        border-radius: 10px;
        background: rgb(2 22 62 / 0.86);
        box-shadow: 0 30px 70px -36px rgb(0 0 0 / 0.7), 0 1px 0 rgb(255 255 255 / 0.14) inset;
      }
      .app__barre {
        display: flex;
        gap: 0.4rem;
        padding: 0.7rem 0.9rem;
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
      }
      .app__barre span { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: rgb(255 255 255 / 0.28); }
      .app__barre span:first-child { background: var(--bleu-clair); }
      .app__lignes { margin: 0; padding: 0.4rem 0; list-style: none; }
      .app__lignes li {
        display: grid;
        grid-template-columns: 11rem minmax(0, 1fr);
        gap: 1rem;
        align-items: baseline;
        padding: 0.95rem 1.1rem;
        border-top: 1px solid rgb(255 255 255 / 0.1);
      }
      .app__lignes li:first-child { border-top: 0; }
      .app__lignes b {
        position: relative;
        padding-left: 1.4rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--bleu-clair);
      }
      .app__lignes b::before {
        position: absolute;
        left: 0;
        top: 0.15rem;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 999px;
        background: var(--bleu-clair);
        color: #06214f;
        font-size: 0.75rem;
        line-height: 0.8rem;
        text-align: center;
        content: '✓';
      }
      .app__lignes span { font-size: 0.95rem; color: var(--clair); }
      @media (max-width: 640px) { .app__lignes li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } }


      /* Mesure : avec deux cartes plus larges, l'image 16/9 faisait deborder la
         slide de 24 px. Ratio 2/1 sur cette grille. Et un ecart explicite entre
         la marque et le surtitre, mesure a 1 px. */
      .etapes--deux .etape__vue { aspect-ratio: 2 / 1; }
      .prix__gauche { gap: clamp(0.9rem, 1.8vw, 1.3rem); }
      .prix__gauche h2 { margin-top: 0; }


      /* ==================================================================
         COMPREHENSION ET CONVERSION
         ------------------------------------------------------------------
         Ce que la page ne disait pas et qu'un inconnu doit comprendre en cinq
         secondes : pour qui, comment, et ce qui est couvert. Et au point de
         decision, la preuve a portee de main.
         ================================================================== */
      .hero__micro {
        margin: 0.9rem 0 0;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        color: var(--clair-faible);
      }

      .couverture {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.6rem;
        max-width: 62rem;
        margin-top: clamp(0.9rem, 1.8vw, 1.3rem);
      }
      .couverture__quoi {
        margin: 0 0.4rem 0 0;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--bleu-clair);
      }
      .couverture__liste { display: contents; margin: 0; padding: 0; list-style: none; }
      .couverture__liste li {
        padding: 0.35rem 0.7rem;
        border: 1px solid rgb(255 255 255 / 0.24);
        border-radius: 999px;
        background: rgb(2 26 74 / 0.6);
        font-size: 0.8rem;
        color: var(--clair);
      }
      .etapes--deux .etape__vue { aspect-ratio: 2.4 / 1; }

      .fin__preuve {
        margin: 0.7rem 0 0;
        font-size: 0.92rem;
        font-weight: 600;
        color: var(--clair);
      }
      .fin__preuve .etoiles { color: var(--or); margin-right: 0.35rem; font-size: 0.8rem; }

      /* Le pied de page : le vrai, pas une ligne d'outil. */
      .pied { padding-block: clamp(2.2rem, 5vh, 3.4rem); letter-spacing: 0; font-family: var(--sans); font-size: 0.9rem; }
      .pied__grille {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto;
        gap: clamp(1.5rem, 4vw, 3.5rem);
        align-items: start;
      }
      @media (max-width: 860px) { .pied__grille { grid-template-columns: minmax(0, 1fr); } }
      .pied__logo { height: 1.7rem; width: auto; margin-bottom: 0.9rem; }
      .pied__nap { margin: 0; line-height: 1.7; color: var(--clair-doux); }
      .pied__nap a { color: var(--encre); text-decoration: none; border-bottom: 1px solid rgb(11 18 32 / 0.25); }
      .pied__liens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 1.5rem; }
      .pied__liens a { color: var(--encre); text-decoration: none; }
      .pied__liens a:hover { color: var(--p293); }
      .pied__action { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
      .pied__mention { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--clair-faible); }
      .pied__mention a { color: var(--clair-faible); }


      /* Mesures apres la passe : produit debordait de 58 px avec la rangee
         « ce qui est couvert » ; son libelle, pose a nu sur la rampe, tombait a
         3,6:1 ; les etoiles or sur le blanc final a 1,5:1. */
      .etapes--deux .etape__vue { aspect-ratio: 3 / 1; }
      .etapes--deux .etape { padding: clamp(1.1rem, 2vw, 1.5rem); }
      .couverture { margin-top: clamp(0.6rem, 1.2vw, 0.9rem); gap: 0.4rem 0.5rem; }
      .couverture__quoi { padding: 0.3rem 0.65rem; border-radius: 999px; background: rgb(2 26 74 / 0.72); color: #fff; }
      .couverture__liste li { padding: 0.28rem 0.65rem; }
      .fin__preuve .etoiles { color: var(--p293); }

      /* produit a 901 px : un pixel de trop, repris sur la marge de la rangee des puces. */
      .couverture { margin-top: clamp(0.4rem, 0.9vw, 0.7rem); }


      /* Simple et sur : deux mots, chacun suivi de ses preuves. Sans preuve, la
         doctrine les interdit (G regle 4). */
      .hero__axes { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; max-width: 46ch; }
      .hero__axes li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; font-size: 0.86rem; color: var(--clair-doux); }
      .hero__axes b { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bleu-clair); }
      .hero__micro { display: none; }


      /* ==================================================================
         LES MOTS FORTS
         ------------------------------------------------------------------
         Un mot ou un groupe par phrase, toujours un mot du lexique ou de la
         promesse. Bleu clair sur les slides bleues, bleu de marque sur les
         claires. Dans les titres la graisse ne change pas : la couleur
         suffit. Dans le corps de texte, un demi-cran de graisse en plus.
         ================================================================== */
      .fort { font-style: normal; color: var(--bleu-clair); }
      .sur-clair .fort { color: var(--p293); }
      p .fort { font-weight: 600; }
      .app__texte .fort, .etape .fort, .nuit__tete .fort { color: var(--bleu-clair); }


      /* Reproche : la coche devant « Filme tes locaux avec ton telephone » n'est
         pas alignee. Elle etait posee en absolu a une hauteur fixe, calculee
         pour une ancienne marge des puces. Elle devient un element de la ligne,
         centree sur la premiere ligne de texte : (hauteur de ligne moins
         hauteur de la pastille) / 2. Independant de la marge, donc stable. */
      .duel__liste li { display: flex; align-items: flex-start; gap: 0.65rem; padding-left: 0; line-height: 1.55; }
      .duel__liste li::before { position: static; flex: 0 0 1.05rem; margin-top: calc((0.95rem * 1.55 - 1.05rem) / 2); }


      /* ==================================================================
         SLIDE 1 — L'ACCROCHE
         ------------------------------------------------------------------
         Clement : « pas assez accrocheur ». Le titre disait la promesse en
         abstrait. Il dit maintenant le systeme entier en trois temps, une
         ligne chacun : l'action (G regle 1), le chiffre vrai (G regle 5), le
         mot qui differencie (P § 3). Et la photo remonte : elle etait fondue a
         50 %, elle porte maintenant la scene.
         ================================================================== */
      .hero__titre { display: grid; gap: 0.08em; font-size: clamp(2.6rem, 6.4vw, 5.2rem); max-width: 14ch; }
      .hero__l1 { color: var(--bleu-clair); }
      .hero__l2 { color: #fff; }
      .hero__l3 { color: #fff; }
      .hero__fond img { opacity: 0.68; filter: saturate(0.7) brightness(0.72) contrast(1.05); }
      .hero__voile {
        background:
          radial-gradient(110% 80% at 76% 22%, rgb(60 130 255 / 0.18), transparent 62%),
          linear-gradient(90deg, rgb(3 61 165 / 0.9) 0%, rgb(3 61 165 / 0.62) 46%, rgb(3 61 165 / 0.3) 100%),
          linear-gradient(180deg, rgb(3 61 165 / 0.15) 0%, rgb(3 61 165 / 0.55) 100%);
      }
      .preuve__chiffre { font-size: 3.6rem; }

      /* ==================================================================
         SLIDE 2 — UN SEUL BLOC, TROIS RANGEES
         ------------------------------------------------------------------
         Clement : « mal organisee, on comprend pas pourquoi les blocs sont
         comme ca ». Il y avait quatre panneaux de formes differentes : le
         titre, deux cartes qui se lisaient comme deux options, une rangee de
         puces. Maintenant un seul bloc, structure : le titre, puis la sequence
         1 → 2 avec une fleche entre les deux, puis ce qui est couvert. Les
         cartes n'ont plus de fond propre : ce sont deux temps d'une meme
         rangee, pas deux objets.
         ================================================================== */
      .tableau {
        padding: clamp(1.4rem, 2.6vw, 2.2rem);
        border: 1px solid var(--filet);
        border-radius: 6px;
        background: rgb(2 26 74 / 0.74);
      }
      .tableau__tete {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 2rem;
        padding-bottom: clamp(1rem, 2vw, 1.4rem);
        margin-bottom: clamp(1rem, 2vw, 1.4rem);
        border-bottom: 1px solid var(--filet);
      }
      .tableau__tete h2 { max-width: 18ch; margin-top: 0.8rem; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
      .tableau__note { max-width: 34ch; margin: 0; font-size: 0.92rem; color: var(--clair-doux); }
      @media (max-width: 860px) { .tableau__tete { flex-direction: column; align-items: flex-start; } }

      .tableau .etapes--deux {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(0.8rem, 1.6vw, 1.4rem);
        max-width: none;
      }
      .tableau .etape { padding: 0; border: 0; background: transparent; box-shadow: none; transform: none; }
      .tableau .etape:hover { background: transparent; transform: none; }
      .tableau .etape__tete { border-bottom: 0; padding-bottom: 0; margin-bottom: 0.6rem; }
      .tableau .etape__n {
        font-size: clamp(1.6rem, 2.8vw, 2.2rem);
        font-weight: 600;
        letter-spacing: -0.03em;
        color: #fff;
      }
      .tableau .etape__d { margin-bottom: 1rem; }
      .tableau .etape__vue { aspect-ratio: 3 / 1; }
      .etapes__fleche {
        align-self: center;
        font-size: clamp(1.6rem, 2.6vw, 2.2rem);
        color: var(--bleu-clair);
        padding: 0 0.2rem;
      }
      @media (max-width: 900px) { .etapes__fleche { display: none; } .tableau .etapes--deux { grid-template-columns: minmax(0, 1fr); } }

      .tableau .couverture {
        margin-top: clamp(1rem, 2vw, 1.4rem);
        padding-top: clamp(0.9rem, 1.8vw, 1.2rem);
        border-top: 1px solid var(--filet);
      }
      .tableau .couverture__quoi { background: transparent; padding: 0; color: var(--bleu-clair); }
      .tableau .couverture__liste li { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.2); }


      /* Mesure : le titre en trois lignes a 6,4vw faisait 539 px et le hero
         debordait a 1 032. Ramene a 4,8vw. Et les 14 jours d'essai, que Clement
         juge ultra accrocheurs, montent dans la carte de preuve. */
      .hero__titre { font-size: clamp(2.3rem, 4.8vw, 4rem); }
      .preuve__essai {
        margin: 0.9rem 0 0;
        padding-top: 0.8rem;
        border-top: 1px solid var(--filet);
        font-size: 0.86rem;
        color: var(--clair-doux);
      }
      .preuve__essai b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }


      /* Le titre du hero restait a 102 px : la regle d'origine (.hero h1) est
         plus specifique que .hero__titre seul. On la depasse. */
      .hero h1.hero__titre { font-size: clamp(2.3rem, 4.8vw, 4rem); max-width: 14ch; margin-block: 1.1rem 1.2rem; }

      /* Compare : le vrai logo, en grand, ouvre la colonne Ninja Bleu. */
      .duel__logo { display: block; width: auto; height: clamp(2.2rem, 3.4vw, 3rem); margin: 0.2rem 0 1.1rem; }


      /* ==================================================================
         HERO v3 — trois phrases, trois lignes, un mot fort par ligne
         ------------------------------------------------------------------
         Reproche : « c'est sur 5 lignes, pas possible, et pas de mot mis en
         valeur, et 14 j est timide ». Les lignes se coupaient parce que le
         titre etait borne a 14 caracteres de large. Chaque phrase tient
         maintenant sur sa ligne au-dessus de 900 px, et la taille suit la
         largeur pour ne jamais deborder. Un mot fort par ligne, en bleu
         clair. Les 14 jours deviennent une pastille sous les boutons.
         ================================================================== */
      .hero h1.hero__titre { max-width: none; font-size: clamp(1.9rem, 3.75vw, 3.4rem); line-height: 1.06; gap: 0.1em; }
      .hero__titre span { display: block; color: #fff; }
      @media (min-width: 900px) { .hero__titre span { white-space: nowrap; } }
      .hero__titre .fort { color: var(--bleu-clair); }
      .hero__titre .jour-meme::after { background: var(--bleu-clair); }
      .hero__essai {
        display: inline-flex;
        align-items: baseline;
        gap: 0.6rem;
        margin: 1.1rem 0 0;
        padding: 0.55rem 0.95rem;
        border: 1px solid rgb(255 255 255 / 0.45);
        border-radius: 999px;
        background: rgb(255 255 255 / 0.12);
        color: #fff;
        font-size: 0.86rem;
      }
      .hero__essai b { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em; }
      .hero__essai span { color: var(--clair-doux); }
      .hero__axes { margin-top: 0.9rem; }
      .preuve__essai { display: none; }

      /* Slide 4 : le logo etait etire par la colonne (element flexible etire a
         sa largeur, hauteur fixee). Il garde ses proportions. */
      .duel__logo { align-self: flex-start; max-width: 100%; object-fit: contain; }

      /* ==================================================================
         SLIDE 2 v3 — le meme dispositif que la slide 3
         ------------------------------------------------------------------
         Reproche : « ca fait pas propre, c'est PowerPoint ». Le bloc unique
         avec ses trois rangees etait un tableau de reunion. La slide prend le
         dispositif de la slide suivante : texte a gauche sur sa surface, un
         objet a droite. Ici l'objet est le telephone : la video en haut, le
         prix en bas. Avant / apres la signature, deux slides jumelles.
         ================================================================== */
      .temps { margin: 1.3rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.9rem; }
      .temps li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
      .temps b {
        display: grid; place-items: center;
        width: 2.2rem; height: 2.2rem;
        border-radius: 999px;
        background: var(--bleu-clair);
        color: #06214f;
        font-size: 1rem; font-weight: 600;
      }
      .temps__t { margin: 0.2rem 0 0.2rem; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; }
      .temps__d { margin: 0; font-size: 0.93rem; color: var(--clair-doux); }
      .app__texte .couverture__quoi { margin: 1.3rem 0 0.5rem; padding: 0; background: transparent; color: var(--bleu-clair); }
      .couverture__liste--texte { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
      .couverture__liste--texte li { padding: 0.25rem 0.6rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 999px; background: rgb(255 255 255 / 0.08); font-size: 0.78rem; color: var(--clair); }

      .tel { display: flex; justify-content: center; }
      .tel__iphone { width: min(100%, 15.5rem); }
      .iphone { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgb(1 20 60 / 0.45)); }
      .tel__cadre {
        width: min(100%, 22rem);
        overflow: hidden;
        border-radius: 1.6rem;
        border: 1px solid rgb(255 255 255 / 0.25);
        background: rgb(2 22 62 / 0.9);
        box-shadow: 0 34px 80px -40px rgb(0 0 0 / 0.75), 0 0 0 6px rgb(2 12 40 / 0.55), 0 1px 0 rgb(255 255 255 / 0.14) inset;
      }
      .tel__video { position: relative; aspect-ratio: 4 / 5; }
      .tel__video img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7) brightness(0.8); }
      .tel__rec {
        position: absolute; top: 0.9rem; left: 0.9rem;
        display: inline-flex; align-items: center; gap: 0.45rem;
        padding: 0.3rem 0.65rem;
        border-radius: 999px;
        background: rgb(2 12 40 / 0.72);
        font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
      }
      .tel__rec i { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: #ff4d4d; animation: clignote 1.4s ease-in-out infinite; }
      @keyframes clignote { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
      @media (prefers-reduced-motion: reduce) { .tel__rec i { animation: none; } }
      .tel__prix { display: grid; gap: 0.2rem; padding: 1rem 1.1rem 1.2rem; border-top: 1px solid rgb(255 255 255 / 0.12); }
      .tel__etiquette { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bleu-clair); }
      .tel__valeur { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
      .tel__mention { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--clair-faible); }

      /* Mesures : « sans prelevement » a 4,4:1 dans la pastille ; logo de la
         slide 4 a grossir ; et un ecran portable (768 px de haut) ou les
         slides denses depassent la fenetre. */
      .hero__essai span { color: #fff; }
      .duel__logo { height: clamp(2.8rem, 4.2vw, 3.8rem); }
      @media (max-height: 820px) {
        html { scroll-snap-type: y proximity; }
        .bloc { padding-top: max(6.75rem, 14vh); padding-bottom: 2.2rem; }
        .hero { padding-top: 6rem; padding-bottom: 2.4rem; }
        .hero h1.hero__titre { font-size: clamp(1.7rem, 3.2vw, 2.9rem); }
        .hero__axes { display: none; }
        .app__texte h2, .tableau__tete h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); }
        .tel__video { aspect-ratio: 4 / 4; }
        .duel__liste li { padding-block: 0.3rem; font-size: 0.9rem; }
        #compare.bloc { padding-bottom: 1.2rem; }
        .compare__source { margin-bottom: 1rem; }
      }

      /* Slide 2 : a la place de « ce qui est couvert », les 14 jours d essai. */
      .essai { display: grid; gap: 0.15rem; margin: 1.4rem 0 0; padding: 0.9rem 1.1rem; border: 1px solid rgb(220 232 255 / 0.45); border-radius: 4px; background: rgb(255 255 255 / 0.1); }
      .essai b { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: #fff; }
      .essai span { font-size: 0.92rem; color: var(--clair-doux); }

      /* Le telephone montre le vrai ecran du tunnel (capture de Clement du
         2 septembre, test.ninjableu.ca) : les reperes pour filmer et le bouton
         d enregistrement. Plus de photo de bureau, plus de faux temoin REC :
         l ecran est le vrai. Ratio du telephone : 1080 x 2340. */
      .tel__cadre { width: min(100%, 15.5rem); border-radius: 1.9rem; }
      .tel__prix { display: none; }
      .tel__video { aspect-ratio: 1080 / 2340; }
      .tel__video img { filter: none; object-position: top; }
      /* Cadre d'iPhone en CSS autour de l'ecran de l'app (3 sept.) */
      .tel__cadre { position: relative; padding: 0.55rem; background: #0b0d12; border: 1px solid #2a2f3a; border-radius: 2.6rem; box-shadow: 0 30px 60px -30px rgb(1 20 60 / 0.6), inset 0 0 0 2px #1a1e27; }
      .tel__cadre::before { content: ''; position: absolute; top: 1.05rem; left: 50%; width: 30%; height: 1.05rem; transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 2; }
      .tel__cadre::after { content: ''; position: absolute; right: -3px; top: 22%; width: 3px; height: 14%; border-radius: 2px; background: #2a2f3a; }
      .tel__video { border-radius: 2.1rem; overflow: hidden; background: #000; aspect-ratio: 640 / 1150; }
      .tel__video img { filter: none; object-position: top; }
      @media (max-height: 820px) { .tel__cadre { width: min(100%, 13rem); } .tel__video { aspect-ratio: 1080 / 2340; } }

      /* ==================================================================
         SLIDE 2 : LE BLOC DE GAUCHE EN BLANC
         ------------------------------------------------------------------
         Clement : le bloc de gauche devrait etre blanc, et jouer avec les
         mots en couleur pour appuyer. Panneau blanc sur le bleu, encre
         dedans, un mot fort par phrase en bleu de marque et en gras.
         ================================================================== */
      #produit .app__texte { background: #fff; border-color: rgb(3 61 165 / 0.25); color: var(--encre); box-shadow: 0 24px 60px -34px rgb(1 57 149 / 0.5); }
      #produit .app__texte .surtitre { color: var(--p293); }
      #produit .app__texte h2 { color: var(--encre); }
      #produit .app__texte .fort { color: var(--p293); font-weight: 700; }
      #produit .temps b { background: var(--p293); color: #fff; }
      #produit .temps__t { color: var(--encre); }
      #produit .temps__d { color: rgb(11 18 32 / 0.74); }
      #produit .essai { border-color: rgb(3 61 165 / 0.35); background: rgb(0 61 165 / 0.06); }
      #produit .essai b { color: var(--p293); }
      #produit .essai span { color: rgb(11 18 32 / 0.74); }

      /* Slide 3 : l ecran de l app passe en blanc lui aussi (Clement). Encre
         dedans, intitules et coches en bleu de marque. */
      .app__ecran { background: #fff; border-color: rgb(3 61 165 / 0.25); box-shadow: 0 24px 60px -34px rgb(1 57 149 / 0.5); }
      .app__barre { border-bottom-color: rgb(11 18 32 / 0.1); }
      .app__barre span { background: rgb(11 18 32 / 0.18); }
      .app__barre span:first-child { background: var(--p293); }
      .app__lignes li { border-top-color: rgb(11 18 32 / 0.1); }
      .app__lignes b { color: var(--p293); }
      .app__lignes b::before { background: var(--p293); color: #fff; }
      .app__lignes span { color: var(--encre); }

      /* Le bloc 14 jours est un lien vers le tunnel : il se presente comme tel. */
      a.essai { position: relative; text-decoration: none; cursor: pointer; padding-right: 3rem; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; }
      a.essai:hover { transform: translateY(-2px); border-color: var(--p293); box-shadow: 0 16px 36px -22px rgb(1 57 149 / 0.55); }
      a.essai:focus-visible { outline: 3px solid var(--p293); outline-offset: 3px; }
      .essai__fleche { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 1.3rem; color: var(--p293); transition: transform 0.25s ease; }
      a.essai:hover .essai__fleche { transform: translate(4px, -50%); }

      /* ==================================================================
         REMONTER EN HAUT — bouton flottant, bas droite, tout du long
         ------------------------------------------------------------------
         Clement : remonter tout en haut a tout moment, d un coup. Le bouton
         apparait des qu on a quitte la premiere slide, passe par la meme
         bascule douce que les points, et suit la barre : blanc sur les
         slides bleues, bleu de marque sur les claires.
         ================================================================== */
      .haut {
        position: fixed; z-index: 85; right: clamp(1rem, 2vw, 1.8rem); bottom: clamp(1rem, 2.4vh, 1.8rem);
        display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 999px;
        background: #fff; color: var(--p293); font-size: 1.25rem; font-weight: 600; text-decoration: none;
        box-shadow: 0 14px 34px -16px rgb(0 0 0 / 0.55);
        opacity: 0; transform: translateY(0.6rem); pointer-events: none;
        transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
      }
      body[data-loin] .haut { opacity: 1; transform: none; pointer-events: auto; }
      .haut:hover { transform: translateY(-2px); }
      .haut:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
      body[data-clair] .haut { background: var(--p293); color: #fff; box-shadow: 0 14px 34px -16px rgb(1 57 149 / 0.6); }
      body[data-clair] .haut:focus-visible { outline-color: var(--p293); }


      /* ==================================================================
         PIED DE PAGE — l'acces a toutes les pages du site
         ------------------------------------------------------------------
         Clement : « pour donner acces aux futures autres pages, on cree tout
         a la fin un footer, c'est la ou on donne acces aux autres pages ».
         Trois colonnes : le site, secteurs et guides, zones desservies. Tous
         les liens sont generes depuis les pages reellement presentes dans
         l'export, avec leur titre, donc aucun lien mort.
         ================================================================== */
      .pied { scroll-snap-align: end; }
      .pied__haut {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 2rem;
        padding-bottom: clamp(1.4rem, 3vh, 2rem);
        margin-bottom: clamp(1.4rem, 3vh, 2rem);
        border-bottom: 1px solid rgb(11 18 32 / 0.12);
      }
      @media (max-width: 720px) { .pied__haut { flex-direction: column; } }
      .pied__colonnes {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1.6fr);
        gap: clamp(1.5rem, 4vw, 3.5rem);
      }
      @media (max-width: 900px) { .pied__colonnes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pied__zones { grid-column: 1 / -1; } }
      @media (max-width: 560px) { .pied__colonnes { grid-template-columns: minmax(0, 1fr); } }
      .pied__titre {
        margin: 0 0 0.6rem;
        font-family: var(--mono);
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--p293);
      }
      .pied__titre--suite { margin-top: 1.3rem; }
      .pied__colonnes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
      .pied__zones ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.2rem; }
      .pied__colonnes a { color: var(--encre); text-decoration: none; font-size: 0.92rem; }
      .pied__colonnes a:hover { color: var(--p293); }
      .pied__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0 0 1rem; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
      .pied__legal a { color: rgb(11 18 32 / 0.7); text-decoration: none; }
      .pied__legal a:hover { color: var(--p293); }
      .pied__hub a { font-weight: 600; }
      .pied__actions padding-top: 1rem; border-top: 1px solid rgb(11 18 32 / 0.12); }
      .pied__liens, .pied__action, .pied__grille { display: contents; }

      /* Slide 5 : « Le juste prix » en grand, c est le mot fort de la slide. */
      .prix__gauche .prix__titre { font-size: clamp(2.6rem, 5.6vw, 4.4rem); letter-spacing: -0.04em; }
      .prix__accroche { margin: 0.9rem 0 0; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.02em; color: var(--encre); }


      /* ==================================================================
         PIED DE PAGE v2 — compact, les listes longues se deplient
         ------------------------------------------------------------------
         Clement : « le footer est pas propre du tout, il faut des menus
         deroulants ou une solution ». Trente-cinq liens etales, c'etait un
         annuaire. Maintenant : le bloc-marque et le bouton, une seule rangee
         de six liens, puis deux groupes fermes par defaut (zones, secteurs et
         guides) qui s'ouvrent d'un clic, sans script, avec l'element natif
         details. Les liens restent tous dans la page pour le maillage.
         ================================================================== */
      .pied__haut { align-items: center; padding-bottom: clamp(1.1rem, 2.4vh, 1.5rem); margin-bottom: clamp(1.1rem, 2.4vh, 1.5rem); }
      .pied__logo { margin-bottom: 0.6rem; }
      .pied__nap { font-size: 0.86rem; line-height: 1.6; }
      .pied__principal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; margin: 0; padding: 0; list-style: none; }
      .pied__principal a { color: var(--encre); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
      .pied__principal a:hover { color: var(--p293); }

      .pied__groupes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(1rem, 2.2vh, 1.4rem); border-top: 1px solid rgb(11 18 32 / 0.12); }
      @media (max-width: 720px) { .pied__groupes { grid-template-columns: minmax(0, 1fr); } }
      .pied__groupe { border-bottom: 1px solid rgb(11 18 32 / 0.12); }
      .pied__groupe summary {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 0.85rem 0; cursor: pointer; list-style: none;
        font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p293);
      }
      .pied__groupe summary::-webkit-details-marker { display: none; }
      .pied__groupe summary::after {
        content: ''; width: 0.5rem; height: 0.5rem; margin-left: auto;
        border-right: 1.5px solid var(--p293); border-bottom: 1.5px solid var(--p293);
        transform: rotate(45deg); transition: transform 0.25s ease;
      }
      .pied__groupe[open] summary::after { transform: rotate(-135deg); }
      .pied__groupe summary b { font-weight: 500; color: rgb(11 18 32 / 0.72); }
      .pied__groupe summary:hover span { color: var(--encre); }
      .pied__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.2rem; margin: 0; padding: 0 0 1rem; list-style: none; }
      .pied__liste--zones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      @media (max-width: 720px) { .pied__liste, .pied__liste--zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      .pied__liste a { color: var(--encre); text-decoration: none; font-size: 0.88rem; }
      .pied__liste a:hover { color: var(--p293); }
      .pied__mention { margin-top: clamp(1rem, 2.2vh, 1.4rem); padding-top: 0.9rem; border-top: 0; }
      .pied__colonnes, .pied__titre, .pied__zones { display: none; }

      /* ==================================================================
         HERO v4 — un hook, pas une page
         ------------------------------------------------------------------
         Clement : « beaucoup de texte, trop d info pour un hook ». Exact.
         Sept elements se disputaient le premier ecran. Il en reste quatre :
         le surtitre (ou on est), le titre en trois temps (le hook), un seul
         bouton avec un lien texte dessous, la pastille 14 jours. La preuve
         reste a droite. Le chapeau et les axes Simple / Sur sont retires :
         leur contenu vit deja sur les slides 2, 3 et 5.
         ================================================================== */
      .hero__lede, .hero__axes { display: none; }
      .hero__actions { flex-direction: column; align-items: flex-start; gap: 0.9rem; margin-top: 1.6rem; }
      .lien--hero { color: #fff; border-bottom-color: rgb(255 255 255 / 0.45); font-size: 0.95rem; }
      .lien--hero:hover { border-bottom-color: #fff; }
      .hero__essai { margin-top: 1.3rem; }

      /* ==================================================================
         LE BOUTON DE LA BARRE — le seul « Obtiens ton prix » de la page
         ------------------------------------------------------------------
         Clement : le bouton de la barre est trop simple, et « Obtiens ton
         prix » se repete partout ; il ne doit exister que la. Fait : hero,
         tableau et slide app n ont plus de bouton ; la slide finale dit
         « Je filme mes locaux », le pied « Commencer ». Le bouton de la barre
         devient l objet le plus travaille de la page : pastille, fleche dans
         un rond, reflet qui traverse au survol, et il suit la barre.
         ================================================================== */
      .bouton--tete {
        position: relative; overflow: hidden; gap: 0.85rem;
        padding: 0.8rem 0.8rem 0.8rem 1.45rem; border-radius: 999px; font-size: 0.95rem;
        box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.35) inset;
      }
      /* Clement : « animation chelou au survol, pas propre ». Le reflet qui
         traversait le bouton est retire, et le bouton d'une barre fixe ne se
         souleve pas : au survol, l'ombre se pose un peu plus, la fleche avance. */
      .bouton--tete::after { content: none; }
      /* Deuxieme passe : « on ne sent pas qu'on peut appuyer ». Au survol, le
         bouton s'inverse franchement (blanc -> bleu, bleu -> blanc), grossit
         de 3 %, la fleche avance. A l'appui, il se tasse. Net, sans effet. */
      .bouton--tete { transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease; }
      .bouton--tete:hover { background: var(--p293); color: #fff; transform: scale(1.03); box-shadow: 0 16px 36px -14px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.35) inset; }
      .bouton--tete:hover .fleche { background: #fff; color: var(--p293); transform: translateX(3px); }
      .bouton--tete:active { transform: scale(0.98); }
      body[data-clair] .tete .bouton--tete:hover { background: #fff; color: var(--p293); box-shadow: 0 16px 36px -14px rgb(1 57 149 / 0.55), 0 0 0 1px rgb(1 57 149 / 0.35) inset; }
      body[data-clair] .tete .bouton--tete:hover .fleche { background: var(--p293); color: #fff; }
      .bouton--tete .fleche {
        display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px;
        background: var(--p293); color: #fff; font-size: 0.85rem; transition: transform 0.25s ease, background 0.3s ease, color 0.3s ease;
      }
      .bouton--tete:hover .fleche { transform: translateX(3px); }
      body[data-clair] .tete .bouton--tete { background: var(--p293); color: #fff; box-shadow: 0 12px 30px -12px rgb(1 57 149 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.25) inset; }
      body[data-clair] .tete .bouton--tete .fleche { background: #fff; color: var(--p293); }
      .hero__actions { margin-top: 1.2rem; }

      /* Slide 1 : « Regle le jour meme. » etait la ligne de trop (Clement). Le
         hook tient en deux : filme, ton prix. « Le jour meme » garde sa place
         sur la slide 4, en titre. Ligne masquee, balisage conserve. */
      .hero__titre .hero__l3 { display: none; }


      /* ==================================================================
         HERO v5 — au milieu de l'ecran, avec un vrai bouton
         ------------------------------------------------------------------
         Clement : « tout est cale en bas a gauche, le regard ne se pose pas
         la ; il faut centrer au milieu, et un bouton quand meme, sinon il n'y
         a pas de push to action ». Une seule colonne centree : surtitre,
         deux lignes, le bouton vers le tunnel et le lien vers la suite, la
         pastille 14 jours, puis l'avis Google sur une ligne. Le bouton porte
         le verbe du titre (« Je filme mes locaux »), pas « Obtiens ton
         prix », qui reste reserve a la barre.
         ================================================================== */
      .hero { align-items: center; padding-top: 6.5rem; padding-bottom: 6.5rem; }
      .hero__grille { grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: clamp(1.4rem, 3vh, 2rem); text-align: center; }
      .hero__grille > div { display: flex; flex-direction: column; align-items: center; }
      .hero h1.hero__titre { margin-inline: auto; }
      .hero__actions { flex-direction: row; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.5rem; }
      .bouton--hero { padding: 0.95rem 1.5rem; font-size: 1.02rem; box-shadow: 0 18px 44px -20px rgb(0 0 0 / 0.6); }
      .hero__essai { margin-top: 1.2rem; }
      .hero .preuve { display: flex; align-items: center; gap: 0.7rem; min-width: 0; padding: 0.55rem 1rem; border-radius: 999px; }
      .hero .preuve .surtitre { margin: 0; }
      .hero .preuve .surtitre::after { content: ' ·'; }
      .hero .preuve__note { gap: 0.45rem; }
      .hero .preuve__chiffre { font-size: 1.25rem; }
      .hero .preuve__source { margin: 0; }
      @media (max-width: 600px) { .hero__actions { flex-direction: column; } }

      /* Un appel vers le tunnel sur les slides 3, 4 et 5 : un lien, pas un
         bouton, avec le mot de la slide. Present sans peser. */
      .suite {
        display: inline-flex; align-items: center; gap: 0.45rem;
        margin-top: 1.3rem;
        font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
        color: inherit; text-decoration: none;
        border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
      }
      .suite .fleche { color: inherit; transition: transform 0.25s ease; }
      .suite:hover .fleche { transform: translateX(4px); }
      .sur-clair .suite { color: var(--bleu-clair); }
      .sur-clair .suite:hover { color: var(--p293); }
      .compare__suite { margin: clamp(1rem, 2.2vh, 1.5rem) 0 0; text-align: center; }
      .compare__suite .suite { margin-top: 0; }


      /* La preuve Google est un lien : la fiche s'ouvre dans un nouvel onglet,
         la page reste. Un lien entier sur la carte du hero, un lien sur la
         ligne de la derniere slide. */
      a.preuve { color: inherit; text-decoration: none; transition: background 0.25s ease, border-color 0.25s ease; }
      a.preuve:hover { background: rgb(2 26 74 / 0.86); border-color: rgb(255 255 255 / 0.45); }
      .fin__preuve a { color: inherit; text-decoration: none; border-bottom: 1px solid rgb(11 18 32 / 0.3); }
      .fin__preuve a:hover { border-bottom-color: currentColor; }


      /* ==================================================================
         MOBILE ET TABLETTE (jusqu'a 900 px)
         ------------------------------------------------------------------
         Clement : « la responsivite, c'est une catastrophe ». Sur un
         telephone, chaque slide fait plus d'un ecran : le calage force
         (mandatory + stop always) piegeait le contenu et le defilement
         sautait. En dessous de 900 px : plus de calage, plus de hauteur
         imposee, le defilement du navigateur. Le hero garde son ecran
         entier. La barre et le bouton de remontee se resserrent.
         ================================================================== */
      @media (max-width: 900px) {
        html { scroll-snap-type: none; scroll-padding-top: 5rem; }
        .bloc, .hero, .pied { scroll-snap-align: none; scroll-snap-stop: normal; }
        .bloc { min-height: 0; justify-content: flex-start; padding-top: 6rem; padding-bottom: 3rem; }
        #compare.bloc { padding-bottom: 3rem; overflow: hidden; }
        .hero { min-height: 100svh; padding-top: 6rem; padding-bottom: 3.5rem; }
        .hero .preuve { flex-wrap: wrap; justify-content: center; padding: 0.55rem 0.9rem; font-size: 0.9rem; border-radius: 1.2rem; }
        .hero .preuve .surtitre { display: none; }
        .tete__inner { gap: 1rem; padding-block: 0.8rem; }
        .haut { right: 1rem; bottom: 1rem; width: 2.7rem; height: 2.7rem; }
        .app__grille { gap: 1.4rem; }
        .duel { gap: 1rem; }
        .compare__suite { text-align: left; }
        .pied__haut { align-items: flex-start; }
        .hero h1.hero__titre { font-size: clamp(2rem, 5.6vw, 3rem); }
      }
      @media (max-width: 600px) {
        .bouton--tete { padding: 0.62rem 0.62rem 0.62rem 1.1rem; font-size: 0.88rem; gap: 0.6rem; }
        .tete__logo, .tete img { height: 2rem; }
        .hero h1.hero__titre { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
        .hero__actions { gap: 1rem; }
        .bouton--hero { width: min(100%, 22rem); justify-content: center; }
        .tel__cadre { width: min(100%, 15.5rem); }
        .hero__l1, .hero__l2 { white-space: nowrap; }
      }


      /* ==================================================================
         MOBILE v2 — zone du pouce, cibles larges, typo fluide
         ------------------------------------------------------------------
         Sources relevees le 2 septembre 2026 (journal) : cibles de 48 px et
         plus, boutons pleine largeur, appel collant en bas de l'ecran une
         fois le hero passe, typo en clamp(), hauteur en svh, aucune
         animation couteuse sur telephone.
         ================================================================== */
      .pouce {
        position: fixed; z-index: 86; left: 0; right: 0; bottom: 0;
        display: none;
        padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom));
        background: rgb(244 246 251 / 0.92);
        border-top: 1px solid rgb(11 18 32 / 0.1);
        transform: translateY(110%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .pouce__bouton { width: 100%; min-height: 3.25rem; justify-content: center; font-size: 1.02rem; background: var(--p293); color: #fff; box-shadow: 0 10px 26px -12px rgb(1 57 149 / 0.6); }
      body[data-loin] .pouce { transform: none; }

      @media (max-width: 900px) {
        .pouce { display: block; }
        .tete .bouton--tete { display: none; }
        .haut { display: none; }
        .progres { display: none; }
        body { padding-bottom: 4.6rem; }

        /* Barre du haut : le logo, et rien d'autre sous 600 px. */
        .tete__inner { padding-block: 0.7rem; }

        /* Rythme vertical serre, meme respiration partout. */
        .bloc { padding-top: 3.75rem; padding-bottom: 1.25rem; }
        #compare.bloc { padding-bottom: 1.25rem; }
        .bloc + .bloc { padding-top: 2.5rem; }
        .large { padding-inline: 1.1rem; }

        /* Typo fluide : titres lisibles, paragraphes a 16 px. */
        .surtitre { font-size: 0.75rem; letter-spacing: 0.12em; }
        h2, .compare__titre, #fin h2 { font-size: clamp(1.65rem, 6.4vw, 2.2rem); line-height: 1.12; letter-spacing: -0.02em; }
        .app__texte h2, .tableau__tete h2 { font-size: clamp(1.55rem, 6vw, 2rem); max-width: none; }
        .prix__titre { font-size: clamp(2.2rem, 9vw, 3rem); }
        .prix__accroche { font-size: 1.1rem; }
        .app__lede, .prix__texte, .temps__d, .rang__d, .fin__lede, .compare__source { font-size: 1rem; line-height: 1.5; }
        .compare__source { font-family: var(--sans); letter-spacing: 0; color: rgb(11 18 32 / 0.7); max-width: 34ch; margin-inline: auto; }
        .duel__compte { font-size: 0.78rem; }

        /* Panneaux : moins de marge interne, coins plus doux. */
        .app__texte, .app__ecran, .duel__col { padding: 1.2rem 1.1rem; border-radius: 14px; }
        .app__ecran { margin-top: 0.9rem; }
        .app__lignes li { padding: 0.9rem 0; }
        .temps { gap: 0.8rem; }
        .essai { padding: 0.95rem 1rem; }
        .rangs .rang { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; padding-block: 0.9rem; }
        .prix__gauche .mefiant { width: 3.2rem; margin-bottom: 0.5rem; }
        .prix__gauche { gap: 0.5rem; }

        /* Cibles : liens et boutons a 48 px minimum. */
        .bouton { min-height: 3rem; }
        .suite { min-height: 2.75rem; align-items: center; }
        .pied__principal ul { gap: 0.2rem 1.4rem; }
        .pied__principal a, .pied__liste a { display: inline-block; padding: 0.45rem 0; }
        .pied__groupe summary { padding: 1rem 0; }
        .pied__liste { gap: 0 1rem; }

        /* Hero : la photo cadree sur les personnes, sans animation ni filtre couteux. */
        .hero__fond img { animation: none; object-position: 30% 50%; filter: saturate(0.75) brightness(0.7); }
        .hero { padding-top: 5rem; padding-bottom: 2.5rem; }
        .hero__grille { gap: 1rem; }
        .hero__actions { margin-top: 1.4rem; width: 100%; }
        .bouton--hero { width: 100%; min-height: 3.4rem; }
        .lien--hero { min-height: 2.75rem; display: inline-flex; align-items: center; }
        .hero__essai { margin-top: 0.9rem; }
        .hero .preuve { margin-top: 0.4rem; }

        /* Apparitions : un simple fondu, pas de translation. */
        .revele { transform: none !important; transition-duration: 0.45s; }
        .fin { min-height: 0; padding-top: 3.5rem; }
      }
      @media (max-width: 600px) {
        .hero__l1, .hero__l2 { white-space: normal; }
        .hero h1.hero__titre { font-size: clamp(2.1rem, 9.2vw, 2.6rem); line-height: 1.08; }
        .tel__cadre { width: min(100%, 14rem); }
        .duel { grid-template-columns: minmax(0, 1fr); }
        .fin .bouton { width: 100%; justify-content: center; }
        .pied__haut .bouton { width: 100%; justify-content: center; }
        .fin__note { font-family: var(--sans); letter-spacing: 0; font-size: 0.9rem; }
        .pied__principal a, .pied__liste a { padding: 0.8rem 0; }
        .hero__essai { font-size: 0.95rem; }
        .app__lignes li span, .duel__liste li, .temoin__qui, .preuve__note { font-size: 1rem; }
        .hero .preuve { font-size: 0.95rem; }
      }


      /* Carte d'avis du hero : tout sur une meme ligne mediane. La note et les
         etoiles etaient alignees sur la ligne de base, donc plus hautes que le
         texte ; on centre chaque element sur l'axe et on retire les marges. */
      .hero .preuve, .hero .preuve__note { align-items: center; }
      .hero .preuve__note, .hero .preuve__source, .hero .preuve .surtitre { margin: 0; line-height: 1; }
      .hero .preuve__chiffre, .hero .preuve .etoiles { line-height: 1; display: inline-block; vertical-align: middle; }
      .hero .preuve .etoiles { position: relative; top: -0.04em; }


      /* ==================================================================
         SLIDE « AVANT DE FILMER » — objections et citation
         ------------------------------------------------------------------
         Quatre questions fermees par defaut, une seule citation. Les
         passages surlignes « a confirmer » sont des brouillons : ils
         disparaissent quand Clement fournit les faits.
         ================================================================== */
      .avant__grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
      @media (max-width: 900px) { .avant__grille { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }
      .avant__titre { max-width: 16ch; margin-top: 0.8rem; font-size: clamp(1.8rem, 3.4vw, 2.7rem); }
      .questions { margin-top: clamp(1.2rem, 2.4vh, 1.8rem); border-top: 1px solid rgb(11 18 32 / 0.14); }
      .question { border-bottom: 1px solid rgb(11 18 32 / 0.14); }
      .question summary {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        min-height: 3.1rem; padding: 0.8rem 0; cursor: pointer; list-style: none;
        font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--encre);
      }
      .question summary::-webkit-details-marker { display: none; }
      .question summary::after {
        content: ''; flex: none; width: 0.55rem; height: 0.55rem;
        border-right: 1.5px solid var(--p293); border-bottom: 1.5px solid var(--p293);
        transform: rotate(45deg); transition: transform 0.25s ease;
      }
      .question[open] summary::after { transform: rotate(-135deg); }
      .question summary:hover { color: var(--p293); }
      .question p { margin: 0 0 1rem; max-width: 52ch; font-size: 1rem; line-height: 1.55; color: rgb(11 18 32 / 0.78); }
      .a-confirmer { background: rgb(255 214 0 / 0.35); color: inherit; padding: 0 0.2em; border-radius: 3px; }

      .temoin { margin: 0; padding: clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid rgb(3 61 165 / 0.22); border-radius: 6px; background: #fff; box-shadow: 0 24px 60px -34px rgb(1 57 149 / 0.45); }
      .temoin__texte { margin: 0; }
      .temoin__texte p { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; letter-spacing: -0.01em; color: var(--encre); }
      .temoin__qui { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; font-size: 0.9rem; color: rgb(11 18 32 / 0.7); }
      .temoin__qui .etoiles { color: var(--p293); font-size: 0.85rem; }
      .temoin__qui b { color: var(--encre); font-weight: 600; }
      @media (max-height: 820px) { .avant__titre { font-size: clamp(1.5rem, 2.8vw, 2.2rem); } .question summary { min-height: 2.85rem; padding: 0.6rem 0; font-size: 1rem; } }


      /* Avec sept slides, le degrade s'etire et la slide du prix tombe sur un
         bleu plus clair : le bleu 293 des mots forts y passait a 4,0:1. Un
         bleu plus profond pour ces deux slides, meme famille. */
      #prix .fort, #avant .fort, #prix .suite, #compare .compare__titre .fort { color: #012a72; }


      /* Trois avis qui se relaient dans la meme case. Les trois sont empiles
         dans une seule cellule de grille : la case garde la hauteur du plus
         long, rien ne saute. Fondu de 0,5 s ; six secondes par avis ; pause
         au survol ; aucune rotation si l'utilisateur prefere moins d'animation. */
      .temoin { display: grid; gap: 1rem; }
      .temoin__pile { display: grid; }
      .temoin__avis { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
      .temoin__avis[data-actif] { opacity: 1; pointer-events: auto; }
      .temoin__points { display: flex; gap: 0.45rem; }
      .temoin__points { gap: 0; margin: -0.6rem 0 -0.6rem -0.9rem; }
      .temoin__points button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
      .temoin__points button::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: rgb(3 61 165 / 0.22); transition: background 0.25s ease, transform 0.25s ease; }
      .temoin__points button[aria-selected="true"]::before { background: var(--p293); transform: scale(1.25); }
      .temoin__points button:focus-visible { outline: 2px solid var(--p293); outline-offset: 2px; }
      @media (prefers-reduced-motion: reduce) { .temoin__avis { transition: none; } }


      /* ==================================================================
         TEMOINS (Loi 25) — la banniere de consentement
         ------------------------------------------------------------------
         Sobre, en bas a gauche sur grand ecran, au-dessus de la barre du
         pouce sur telephone. Deux boutons de meme poids visuel : accepter et
         refuser sont aussi faciles l'un que l'autre. Rien ne bloque la
         lecture. Le choix est memorise sur l'appareil.
         ================================================================== */
      .temoins {
        position: fixed; z-index: 90; left: 1.25rem; bottom: 1.25rem;
        width: min(26rem, calc(100vw - 2.5rem));
        padding: 1.15rem 1.25rem 1.25rem;
        border: 1px solid rgb(3 61 165 / 0.2); border-radius: 10px;
        background: #fff; color: var(--encre);
        box-shadow: 0 24px 60px -28px rgb(1 20 60 / 0.55);
        opacity: 0; transform: translateY(0.8rem);
        transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .temoins[data-visible] { opacity: 1; transform: none; }
      .temoins__titre { margin: 0 0 0.45rem; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
      .temoins__texte { margin: 0 0 0.95rem; font-size: 0.88rem; line-height: 1.5; color: rgb(11 18 32 / 0.74); }
      .temoins__texte a { color: var(--p293); }
      .temoins__actions { display: flex; gap: 0.6rem; }
      .temoins .bouton { min-height: 2.75rem; padding: 0.6rem 1.1rem; font-size: 0.92rem; border-radius: 6px; }
      .temoins .bouton--plein { background: var(--p293); color: #fff; }
      .temoins .bouton--plein:hover { box-shadow: 0 14px 30px -16px rgb(1 57 149 / 0.7); }
      .temoins .bouton--fil { border-color: rgb(11 18 32 / 0.3); color: var(--encre); }
      .temoins .bouton--fil:hover { border-color: var(--encre); background: rgb(11 18 32 / 0.04); }
      @media (max-width: 900px) {
        .temoins { left: 0.75rem; right: 0.75rem; bottom: calc(4.6rem + env(safe-area-inset-bottom)); width: auto; }
        .temoins .bouton { flex: 1; justify-content: center; }
      }
      @media (prefers-reduced-motion: reduce) { .temoins { transition: none; } }


      /* SEO : le surtitre vit dans le h1 (le mot-cle « entretien menager
         commercial » est dans le titre principal), avec le rendu du surtitre. */
      .hero__titre .hero__surtitre { display: block; margin: 0 0 1.1rem; white-space: normal; }


      /* Lien de langue : discret, en fin de barre et du pied. */
      .tete nav .langue { margin-left: 0.4rem; padding-left: 0.9rem; border-left: 1px solid rgb(255 255 255 / 0.3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; }
      body[data-clair] .tete nav .langue { border-left-color: rgb(11 18 32 / 0.25); }


      /* Telephone : le lien de langue reste visible dans la barre (la navigation, elle, est masquee). */
      .langue--tete { display: none; }
      @media (max-width: 900px) {
        .langue--tete { display: inline-flex; align-items: center; margin-left: auto; margin-right: 0.6rem; padding: 0.45rem 0.7rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: #fff; text-decoration: none; }
        body[data-clair] .langue--tete { color: var(--p293); border-color: rgb(3 61 165 / 0.35); }
        .tete__inner { gap: 0.6rem; }
      }


      /* Clement : sur la slide du prix, les mots forts en bleu sur le fond bleu font ton sur ton.
         Du blanc pur serait illisible sur ce bleu clair (1,7:1) : les mots forts prennent donc un
         surlignage blanc, avec le texte en bleu profond dessus. Ils ressortent, et restent lisibles. */
      #prix .fort, #compare .compare__titre .fort { background: #fff; color: #003da5; padding: 0 0.22em; margin: 0 -0.05em; border-radius: 0.25em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
      #prix .prix__titre .fort { padding: 0 0.16em; }


      /* Clement : le surlignage sur « le jour même » fait bizarre. Il reste sur la slide du prix,
         pas sur le titre du comparatif : la, le mot fort revient en bleu profond, sans fond. */
      #compare .compare__titre .fort { background: transparent; padding: 0; margin: 0; border-radius: 0; color: #012a72; }


      /* ==================================================================
         HERO v6 — une accroche, un bouton
         ------------------------------------------------------------------
         Clement : « on a l'impression d'avoir quatre boutons ». Il reste un
         bouton. Le lien « voir comment ça marche » redevient un lien discret,
         et l'essai plus la note Google tiennent sur une seule ligne de texte.
         Une phrase d'accroche ouvre la slide, avant les deux lignes du titre.
         ================================================================== */
      .hero__accroche { display: block; margin: 0 0 0.9rem; font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; white-space: normal; color: var(--clair-doux); }
      .hero__actions .lien--hero { font-size: 0.9rem; font-weight: 500; color: var(--clair-doux); border-bottom-color: rgb(255 255 255 / 0.3); }
      .hero__actions .lien--hero:hover { color: #fff; border-bottom-color: #fff; }
      .hero__ligne { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.6rem; margin: 1.2rem 0 0; font-size: 0.95rem; color: var(--clair-doux); }
      .hero__ligne a { color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 0.45); }
      .hero__ligne a:hover { border-bottom-color: #fff; }
      @media (max-width: 600px) { .hero__accroche { font-size: 1rem; } .hero__ligne { font-size: 0.9rem; } .hero__sep { display: none; } .hero__ligne span:first-child { width: 100%; } }


      /* Pied : le changement de langue est une pastille, pas une page de plus dans la liste. */

      /* ------------------------------------------------------------------
         APPARITIONS — rien n'est cache tant que le script n'a pas confirme
         qu'il saura reveler.
         ------------------------------------------------------------------ */
      @media (prefers-reduced-motion: no-preference) {
        html.js-anim .revele {
          opacity: 0;
          transform: translateY(1.7rem);
          transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
                      transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
        }
        html.js-anim .revele.vu { opacity: 1; transform: none; }
      }

      .pied {
        scroll-snap-align: end;
        padding-block: 2.5rem;
        border-top: 1px solid var(--filet);
        font-family: var(--sans);
        font-size: 0.9rem;
        letter-spacing: 0;
        color: var(--clair-faible);
      }
      .pied__mention { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; }
      .pied a { color: var(--bleu-clair); }
      /* ------------------------------------------------------------------
         PIED v2 (3 sept.) : quatre colonnes, une barre basse. Aucun accordeon.
         ------------------------------------------------------------------ */
      /* Cibles tactiles : au moins 24 px de haut sur les petits liens (pied, fil d'Ariane, listes). */
      .fil a, .pied-b a, .pied-c__mentions a, .liens-zones a, .hero__ligne a, .bande__lede a { display: inline-block; padding: 0.3rem 0; }
      .pied-b { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 2rem clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(1.6rem, 3.5vh, 2.4rem); border-bottom: 1px solid rgb(11 18 32 / 0.12); }
      @media (max-width: 960px) { .pied-b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
      @media (max-width: 560px) { .pied-b { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } }
      .pied-b__marque .pied__logo { height: 1.6rem; width: auto; margin: 0 0 0.9rem; }
      .pied-b__phrase { margin: 0 0 0.9rem; max-width: 30ch; font-size: 0.95rem; line-height: 1.5; color: var(--encre); }
      .pied-b__nap { margin: 0; font-size: 0.88rem; line-height: 1.65; color: rgb(11 18 32 / 0.72); }
      .pied-b__nap a { color: var(--encre); text-decoration: none; border-bottom: 1px solid rgb(11 18 32 / 0.25); }
      .pied-b__nap a:hover { color: var(--p293); border-color: var(--p293); }
      .pied-b__titre { margin: 0 0 0.75rem; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(11 18 32 / 0.55); }
      .pied-b .pied-b__titre a { color: inherit; text-decoration: none; font-size: inherit; font-weight: inherit; line-height: inherit; }
      .pied-b .pied-b__titre a:hover { color: var(--p293); }
      .pied-b ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
      .pied-b__zones ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; }
      .pied-b a { color: var(--encre); text-decoration: none; font-size: 0.9rem; line-height: 1.4; }
      .pied-b a:hover { color: var(--p293); }
      .pied-b__titre--suite { margin-top: 1.4rem; }
      .pied-c { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem; padding-top: 1.2rem; }
      .pied-c__copie { margin: 0; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; color: rgb(11 18 32 / 0.55); }
      .pied-c__mentions { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; padding: 0; list-style: none; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
      .pied-c__mentions a { color: rgb(11 18 32 / 0.7); text-decoration: none; }
      .pied-c__mentions a:hover { color: var(--p293); }
      .pied__mention { margin: 0.8rem 0 0; padding: 0; border: 0; }
      @media (max-width: 900px) { .pied-b a { display: inline-block; padding: 0.15rem 0; } }