/* LA VITRINE — système graphique du 24/09/2026 (audit externe : docs/veille/2026-09-24-audit-vitrine.md).

   Le constat : sept écrans blanc cassé, une seule police très grasse, du gris, un rouge brique en filet — « monotone, pas assez
   moderne ». La direction : « Atelier lumineux ».
   · Blanc franc et un gris chaud pour alterner ; UNE couleur d'action, le vermillon du renard (boutons, accents) ;
     sept teintes pastel, une par métier, qui servent de « scènes » derrière les écrans du produit ; un seul bloc sombre.
   · Titres en Bricolage Grotesque (OFL, déjà servie par nous) : une grotesque à caractère, moderne sans être « tech » ;
     un mot en Fraunces italique dans chaque titre, pour le contraste ; le texte en Archivo.
   · Le produit est le visuel : de vrais écrans, dans de vrais cadres, sur des scènes teintées. Aucune photo de banque.
   · Du mouvement visible mais sobre : la scène 3D, la bande des métiers qui défile, des apparitions au défilement, des
     interrupteurs qui basculent. Rien en mouvement réduit.
   Jamais : fond noir + halo + verre + boîte de chat lumineuse (« trop IA-like », 19/09) ; crème + orange brûlé (« ne ressemble à
   rien », 19/09). Pas de flou d'arrière-plan sur l'en-tête : un blanc plein.

   DISCIPLINE : ces règles sont aussi chargées par les pages légales (socle.html + pages.css). Aucun sélecteur d'élément nu : tout
   est sous body.vitrine ou dans une classe propre à la vitrine (.nav, .pied, .btn…) — .bouton, .carte, .grille appartiennent à
   pages.css. */

@font-face{font-family:Bricolage;src:url('/statique/demo/bricolage-fr.woff2') format('woff2');font-weight:200 800;font-display:swap}
@font-face{font-family:Archivo;src:url('/statique/demo/archivo-fr.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* L'italique d'accent : Fraunces, pas Instrument Serif — relevé du 24/09 (49 pages) : Instrument Serif est devenue la serif par défaut
   des modèles Framer, un marqueur de modèle. Fraunces italique a plus de caractère, et nous la servons déjà. */
@font-face{font-family:'Fraunces Accent';src:url('/statique/demo/fraunces-latin-wght-italic.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}

:root{
  --fond:#FFFFFF;--sourd:#F6F5F1;--sourd-2:#EFEDE7;
  --encre:#111113;--encre-2:#45464E;--encre-3:#6A6B73;
  --filet:#E8E6E0;--filet-2:#D6D3CB;
  --renard:#D23C25;--renard-fonce:#AE2E1A;--renard-pale:#FFEDE7;--renard-clair:#FF9B85;
  --nuit:#131316;--nuit-2:#1C1C21;--nuit-3:#26262D;--nuit-filet:#303039;
  --t-ciel:#E3EDFF;--t-ciel-f:#1D4ED8;--t-corail:#FFE6DD;--t-corail-f:#C2381F;--t-menthe:#DBF2E4;--t-menthe-f:#15803D;
  --t-lilas:#ECE6FF;--t-lilas-f:#5B3FD1;--t-sable:#F6ECDC;--t-sable-f:#8A5A12;--t-encre:#E9E9ED;--t-encre-f:#1F1F24;
  --t-vigne:#F9E4EC;--t-vigne-f:#9D2352;
  --titre:Bricolage,'Archivo',system-ui,sans-serif;--texte:Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Fraunces Accent',Georgia,serif;
  --rayon:24px;--rayon-g:32px;--rayon-p:14px;
  --colonne:1240px;--gouttiere:clamp(16px,4vw,48px);
  --ombre:0 1px 2px #1111130f,0 14px 34px -14px #1111132e;
  --ombre-g:0 2px 4px #1111130a,0 40px 80px -36px #11111347;
  --ressort:cubic-bezier(.2,.75,.2,1)}
.teinte-ciel,[data-teinte=ciel]{--t:var(--t-ciel);--tf:var(--t-ciel-f)}
.teinte-corail,[data-teinte=corail]{--t:var(--t-corail);--tf:var(--t-corail-f)}
.teinte-menthe,[data-teinte=menthe]{--t:var(--t-menthe);--tf:var(--t-menthe-f)}
.teinte-lilas,[data-teinte=lilas]{--t:var(--t-lilas);--tf:var(--t-lilas-f)}
.teinte-sable,[data-teinte=sable]{--t:var(--t-sable);--tf:var(--t-sable-f)}
.teinte-encre,[data-teinte=encre]{--t:var(--t-encre);--tf:var(--t-encre-f)}
.teinte-vigne,[data-teinte=vigne]{--t:var(--t-vigne);--tf:var(--t-vigne-f)}

/* ---------- socle des pages de la vitrine ---------- */
body.vitrine{margin:0;background:var(--fond);color:var(--encre);font:400 17px/1.55 var(--texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
/* Remise à zéro SANS poids (:where) : une règle de composant (.chapo, .pied-bas…) doit toujours l'emporter — la première version,
   en body.vitrine p, écrasait leurs marges (tarif et pied collés, vu au premier rendu). */
:where(html:has(body.vitrine)){scroll-padding-top:86px}
:where(body.vitrine) *,:where(body.vitrine) *::before,:where(body.vitrine) *::after{box-sizing:border-box}
:where(body.vitrine) :where(h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0}
:where(body.vitrine) :where(ul,ol){margin:0;padding:0;list-style:none}
:where(body.vitrine) :where(img){max-width:100%;height:auto}
:where(body.vitrine) :where(a){color:inherit;text-underline-offset:4px}
:where(body.vitrine) :where(button,a,input,summary,select,textarea){touch-action:manipulation}
:where(body.vitrine) :where(button){font:inherit;cursor:pointer}
body.vitrine :is(a,button,input,summary,select,textarea):focus-visible{outline:3px solid var(--renard);outline-offset:3px;border-radius:6px}
:where(body.vitrine) :where(h1,h2,h3,h4){font-family:var(--titre);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
:where(body.vitrine) :where(h1){letter-spacing:-.04em}
:where(body.vitrine) :where(h2){letter-spacing:-.03em}
:where(body.vitrine) :where(h3,h4){letter-spacing:-.012em}
:where(body.vitrine) :where(h1,h2,h3,h4) em{font-family:var(--serif);font-style:italic;font-weight:420;letter-spacing:-.025em}
:where(body.vitrine) :where(p){text-wrap:pretty}
.saut{position:absolute;top:-100px;left:8px;z-index:100;padding:10px 14px;border-radius:10px;background:#fff}
.saut:focus{top:8px}
.lecteur{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.conteneur{max-width:var(--colonne);margin:0 auto;padding:0 var(--gouttiere)}
.section{padding:clamp(64px,8vw,116px) 0}
/* Deux sections blanches de suite laissaient 232 px de blanc (116 + 116 ; audit design du 27/09, point 13) : la seconde ne
   remet pas le sien. Après une section grise ou sombre, le blanc du haut reste : le contenu ne colle pas à la bande. */
.section:not(.section-sourde):not(.section-sombre)+.section:not(.section-sourde):not(.section-sombre){padding-top:0}
.section-sourde{background:var(--sourd)}
.section-sombre{background:var(--nuit);color:#fff}
.repere{display:inline-flex;align-items:center;gap:10px;font:600 13px/1.2 var(--texte);letter-spacing:.08em;text-transform:uppercase;color:var(--renard)}
.repere::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}
body.vitrine .section h2,body.vitrine .page-une h1{margin-top:16px;font-size:clamp(34px,4.4vw,60px);line-height:1.04;max-width:22ch}
/* Relecture d'un directeur artistique (24/09) : l'italique rouge à CHAQUE titre devenait du papier peint. Il reste au titre de
   l'ouverture, aux titres des pages et à l'appel final ; dans les sections, la fin du titre passe en gris, même police. */
body.vitrine .section h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--encre-3)}
body.vitrine .section-sombre h2 em{color:#ffffff8c}
body.vitrine :is(h1,h2) em{color:var(--renard)}
.section-sombre .repere{color:var(--renard-clair)}
/* Sur le gris des sections, le vermillon faisait 4,36:1 à 13 px (audit design du 27/09, point 8) : le repère y prend le vermillon
   foncé, 6,01:1. Sur le blanc, le vermillon fait 4,76:1 et reste. */
.section-sourde .repere{color:var(--renard-fonce)}
.chapo{margin-top:20px;font-size:clamp(17px,1.45vw,20px);line-height:1.5;color:var(--encre-2);max-width:58ch}
.section-sombre .chapo{color:#ffffffb3}
.chapo a{color:var(--encre);font-weight:600}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:999px;
  background:var(--renard);color:#fff;font:600 16px/1.1 var(--texte);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px #11111314;transition:background .2s,transform .2s var(--ressort),box-shadow .2s}
.btn:hover{background:var(--renard-fonce);transform:translateY(-1px);box-shadow:0 6px 14px -6px #1111133d}
.btn:active{transform:translateY(0) scale(.98)}
.btn .ic{width:18px;height:18px;stroke-width:2.2;transition:transform .2s var(--ressort)}
.btn:hover .ic{transform:translateX(3px)}
.btn-petit{min-height:44px;padding:0 18px;font-size:15px}   /* 44 px : la cible du pouce (WCAG 2.5.5), aussi pour le bouton de l'en-tête */
.btn-grand{min-height:58px;padding:0 30px;font-size:17px}
.btn-noir{background:var(--encre);box-shadow:0 10px 24px -14px #000a}
.btn-noir:hover{background:#2a2a30}
.btn-clair{background:#fff;color:var(--encre);box-shadow:0 8px 20px -12px #0006}
.btn-clair:hover{background:#fff;color:var(--renard-fonce)}
.btn-contour{background:transparent;color:var(--encre);box-shadow:inset 0 0 0 1.5px var(--filet-2)}
.btn-contour:hover{background:var(--sourd);box-shadow:inset 0 0 0 1.5px var(--encre)}
.lien-fleche{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--encre)}
.lien-fleche .ic{width:18px;height:18px;stroke-width:2.2;transition:transform .2s var(--ressort)}
.lien-fleche:hover .ic{transform:translateX(4px)}
.lien-fleche:hover{text-decoration:underline}

/* ---------- l'en-tête : collant, blanc plein ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fffffff7;border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;font-family:var(--texte);color:var(--encre)}
.nav.nav-ombre{border-bottom-color:var(--filet);box-shadow:0 10px 30px -24px #0005}
.nav a{color:inherit}
.nav .btn,.pied .btn,.nav .btn:hover,.pied .btn:hover{color:#fff}
.nav-in{max-width:var(--colonne);margin:0 auto;padding:0 var(--gouttiere);height:70px;display:flex;align-items:center;gap:20px}
.nav-marque{display:flex;flex:none}
.nav-marque img{display:block;width:152px;height:auto}
.nav-liens{display:flex;align-items:center;gap:2px;margin-left:16px}
.nav-groupe{position:relative}
.nav-groupe summary{display:flex;align-items:center;gap:4px;padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;list-style:none;cursor:pointer;user-select:none}
.nav-groupe summary::-webkit-details-marker{display:none}
.nav-groupe summary .ic{width:16px;height:16px;transition:transform .2s}
.nav-groupe[open] summary .ic{transform:rotate(180deg)}
.nav-groupe[open] summary,.nav-groupe summary:hover,.nav-lien:hover,.nav-connexion:hover{background:var(--sourd)}
.nav-lien,.nav-connexion{padding:10px 14px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.nav-menu{position:absolute;top:calc(100% + 12px);left:-10px;width:440px;padding:10px;background:#fff;border:1px solid var(--filet);border-radius:22px;box-shadow:0 30px 70px -24px #11111340}
.nav-groupe[open] .nav-menu{animation:nav-ouvre .22s var(--ressort) both}
@keyframes nav-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.nav-menu ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.nav-menu a{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px;text-decoration:none}
.nav-menu a:hover{background:var(--sourd)}
.nav-menu b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.nav-menu small{display:block;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--encre-3)}
.nav-pic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--renard-pale);color:var(--renard-fonce)}
.nav-pic .ic{width:21px;height:21px}
.nav-menu-metiers{width:660px}
.nav-menu-metiers ul{grid-template-columns:1fr 1fr}
.nav-point{flex:none;display:inline-block;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--encre)}
.nav-tous{display:flex;justify-content:space-between;margin-top:6px;padding:13px 14px;border-radius:14px;background:var(--sourd);font-size:14.5px;font-weight:600;text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-burger{display:none;position:relative;width:46px;height:46px;border:0;border-radius:999px;background:var(--sourd);color:var(--encre)}
.nav-burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ressort),top .25s}
.nav-burger i:first-of-type{top:18px}.nav-burger i:last-of-type{top:26px}
.nav-burger[aria-expanded=true] i:first-of-type{top:22px;transform:rotate(45deg)}
.nav-burger[aria-expanded=true] i:last-of-type{top:22px;transform:rotate(-45deg)}
.nav-tiroir{position:fixed;inset:70px 0 0;z-index:59;overflow-y:auto;overscroll-behavior:contain;padding:8px var(--gouttiere) 40px;background:#fff;display:flex;flex-direction:column}
.nav-tiroir[hidden]{display:none}
.nav-tiroir a{display:flex;align-items:center;gap:12px;min-height:50px;padding:0 4px;border-bottom:1px solid var(--filet);font-size:18px;font-weight:500;text-decoration:none}
.nav-tiroir .nav-point{margin-top:0}
.nav-tiroir-titre{margin:26px 0 4px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.nav-tiroir .btn{margin-top:28px;border-bottom:0;justify-content:space-between;font-size:17px;min-height:56px;padding:0 24px}
html:has(.nav-tiroir:not([hidden])){overflow:hidden}
/* Au téléphone (≤ 1060 px), UNE porte en haut à droite : « Se connecter » en texte, le bouton rouge « Créer mon site » part (correctif UX-1,
   29/09 ; P1). Le premier écran ne porte plus qu'un « Créer mon site », celui du champ ; le tiroir garde le sien. */
@media(max-width:1060px){.nav-liens,.nav-actions .btn-petit{display:none}.nav-connexion{display:inline-flex;align-items:center;min-height:44px;padding:0 12px}.nav-burger{display:block}.nav-in{height:64px}.nav-tiroir{inset:64px 0 0}.nav-marque img{width:136px}}
@media(max-width:420px){.nav-connexion{font-size:14px;padding:0 8px}.nav-marque img{width:118px}.nav-in{gap:10px}}

/* ---------- le pied : un plan du site ---------- */
.pied{background:var(--sourd);color:var(--encre);font-family:var(--texte);border-top:1px solid var(--filet)}
.pied a{color:inherit}
.pied-in{max-width:var(--colonne);margin:0 auto;padding:clamp(56px,6vw,80px) var(--gouttiere) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:48px}
.pied-marque img{display:block;width:160px;height:auto}
.pied-marque p{margin:16px 0 22px;max-width:30ch;font-size:15px;line-height:1.5;color:var(--encre-2)}
.pied-colonnes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pied-colonnes p{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.pied-colonnes a{display:block;padding:5px 0;font-size:15px;text-decoration:none}
.pied-colonnes a:hover{text-decoration:underline}
.pied-bas{max-width:calc(var(--colonne) - 2 * var(--gouttiere));margin:0 max(var(--gouttiere),calc((100% - var(--colonne)) / 2 + var(--gouttiere)));padding:22px 0 36px;border-top:1px solid var(--filet);font-size:13px;color:var(--encre-3)}
@media(max-width:900px){.pied-in{grid-template-columns:1fr}.pied-colonnes{grid-template-columns:1fr 1fr;gap:28px 20px}}

/* ---------- l'ouverture ---------- */
/* Deux colonnes (25/09, la mise en page de la version en ligne, préférée par le dirigeant) : la promesse et le nom à gauche,
   calée sur la colonne du site ; le produit à droite, jusqu'au bord de l'écran. Au téléphone : l'un sous l'autre. */
.une{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);min-height:min(740px,calc(100svh - 70px));overflow:clip;container-type:inline-size}
.une .depart{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;
  padding:48px clamp(28px,4vw,64px) 56px max(var(--gouttiere),calc(50cqw - var(--colonne) / 2 + var(--gouttiere)))}
.badge{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px;border-radius:999px;background:var(--renard-pale);color:var(--renard-fonce);font:600 13.5px/1 var(--texte)}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--renard);box-shadow:0 0 0 0 #d23c2566;animation:pouls 2.4s ease-out infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 #d23c2555}70%,100%{box-shadow:0 0 0 9px #d23c2500}}
body.vitrine .une h1{font-size:clamp(38px,4vw,60px);line-height:1;letter-spacing:-.042em}
.une h1 span,.une h1 em{display:block}
.une h1 em{margin-top:.06em;line-height:1.04}
.une .intro{text-wrap:pretty;margin-top:22px;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--encre-2);max-width:40ch}
.nommer{display:flex;align-items:center;width:min(580px,100%);margin-top:26px;padding:6px;border:1px solid var(--filet-2);border-radius:999px;background:#fff;box-shadow:0 12px 30px -20px #11111340;transition:border-color .2s,box-shadow .2s}
.nommer:focus-within{border-color:var(--encre);box-shadow:0 0 0 4px #d23c2522,0 18px 40px -22px #11111350}
.nommer input{flex:1;min-width:0;height:52px;margin:0;padding:0 10px 0 20px;border:0;border-radius:999px;background:none;color:var(--encre);font:400 17px var(--texte);outline:none}
.nommer input::placeholder{color:#7b7a73}
.nommer button{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:52px;margin:0;padding:0 24px;border:0;border-radius:999px;background:var(--renard);color:#fff;font:600 16px var(--texte);cursor:pointer;transition:background .2s}
.nommer button:hover{background:var(--renard-fonce)}
.nommer button .ic{width:18px;height:18px;stroke-width:2.2}
html:not(.js) .nommer,html.js .cta-sans-js{display:none}
.cta-sans-js{margin-top:28px}
.sans-js{margin-top:14px;font-size:13px}
.gratuit{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:14px;font-size:14.5px;color:var(--encre-2)}
.gratuit span{display:inline-flex;align-items:center;gap:7px}
.gratuit .ic{width:17px;height:17px;padding:2px;border-radius:50%;background:var(--renard-pale);color:var(--renard);stroke-width:3}
@media(max-width:640px){.gratuit{flex-direction:column;gap:6px}}
.une .gratuit{justify-content:flex-start}
@media(max-width:760px){.une{display:block;min-height:0}.une .depart{padding:28px var(--gouttiere) 36px}}

/* ---------- la bande des métiers ---------- */
.bande-metiers{display:flex;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--filet);background:#fff;overflow:hidden}
.vous-etes{display:none}
.bande-metiers>p{flex:none;padding-left:max(var(--gouttiere),calc((100% - var(--colonne)) / 2 + var(--gouttiere)));font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.defile{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000);mask-image:linear-gradient(90deg,#0000,#000 5%,#000 95%,#0000)}
.defile ul{display:flex;gap:10px;width:max-content;padding:2px 0}
html.anime .defile.pret ul{animation:defile var(--duree,70s) linear infinite}
.defile:hover ul,.defile:focus-within ul{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}
.defile a{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;background:var(--sourd);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .2s}
.defile a:hover{background:var(--t)}
.defile a i{display:none}
html:not(.anime) .defile ul,html:not(.js) .defile ul{flex-wrap:wrap;width:auto}

/* ---------- 01 · le parcours en quatre étapes ---------- */
.parcours{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.etape{display:flex;flex-direction:column}
.etape-image{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;aspect-ratio:1/.86;padding:18px;border-radius:var(--rayon);background:var(--t);overflow:hidden}
.etape-num{display:grid;place-items:center;width:34px;height:34px;margin-top:22px;border-radius:50%;background:var(--encre);color:#fff;font:700 15px/1 var(--titre)}
body.vitrine .etape h3{margin-top:14px;font-size:clamp(20px,1.7vw,23px);line-height:1.18;letter-spacing:-.025em}
.etape h3+p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--encre-2)}
.mini-champ{display:flex;align-items:center;gap:8px;width:100%;max-width:250px;padding:6px 6px 6px 16px;border-radius:999px;background:#fff;box-shadow:var(--ombre);font-size:14px;font-weight:500}
.mini-champ .tape{flex:1;overflow:hidden;white-space:nowrap;text-align:left}
.mini-champ .tape::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-2px;background:var(--renard);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.mini-champ b{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border-radius:999px;background:var(--renard);color:#fff;font-size:12px}
.mini-champ .ic{width:13px;height:13px;stroke-width:2.6}
.mini-puces{display:flex;gap:6px}
.mini-puces span{padding:6px 11px;border-radius:999px;background:#ffffffc7;font-size:12px;font-weight:600;color:var(--encre)}
.mini-site{display:grid;gap:8px;width:76%;padding:14px;border-radius:14px;background:#fff;box-shadow:var(--ombre);text-align:left;margin-bottom:28px}
.mini-barre{display:block;width:42%;height:6px;border-radius:3px;background:var(--filet)}
.mini-site b{font:400 22px/1.02 var(--serif);color:var(--encre)}
.mini-site b em{font-style:italic}
.mini-ligne{display:flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:var(--sourd);font-size:11.5px;font-weight:600}
.mini-ligne.change{background:var(--renard-pale);color:var(--renard-fonce)}
.mini-bulle{position:absolute;right:14px;bottom:14px;max-width:70%;padding:9px 13px;border-radius:16px 16px 4px 16px;background:var(--encre);color:#fff;font-size:12.5px;font-weight:500;line-height:1.3;box-shadow:var(--ombre)}
.mini-options{display:grid;gap:8px;width:88%}
.mini-options li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;border-radius:12px;background:#fff;box-shadow:var(--ombre);font-size:13px;font-weight:600;text-align:left}
/* Les interrupteurs de l'étape 3 de l'accueil, dans l'image. Ceux de /fonctionnalites (38, gris, éteints, sous « toutes comprises »)
   sont retirés depuis le 28/09 (feu vert, O22) : à l'œil ils disaient « désactivé », au pouce c'était une fausse commande. */
.mini-options i{position:relative;flex:none;width:36px;height:21px;border-radius:999px;background:var(--filet-2);transition:background .3s}
.mini-options i::after{content:"";position:absolute;top:2.5px;left:2.5px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .3s var(--ressort)}
.mini-options .oui i{background:var(--renard)}
.mini-options .oui i::after{transform:translateX(15px)}
.mini-adresse{display:inline-flex;align-items:center;gap:7px;margin-bottom:44px;padding:9px 16px;border-radius:999px;background:#fff;box-shadow:var(--ombre);font-size:14.5px;font-weight:600}
.mini-adresse .ic{width:15px;height:15px;color:var(--renard);stroke-width:2.2}
.mini-notif{position:absolute;left:14px;right:14px;bottom:14px;display:grid;gap:1px;padding:10px 13px;border-radius:14px;background:#fff;box-shadow:var(--ombre);border-left:3px solid var(--renard);text-align:left}
.mini-notif small{font-size:11px;font-weight:700;color:var(--renard)}
.mini-notif b{font-size:13px}
.parcours-pied{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:clamp(36px,4vw,52px)}
.parcours-pied p{font-size:14.5px;color:var(--encre-3)}
/* les mini-écrans bougent une fois arrivés à l'écran : le nom s'écrit, la ligne passe au vert, l'option bascule, la demande arrive */
html.anime .etape.vu .tape{animation:taper 1.6s steps(13) .3s both}
@keyframes taper{from{max-width:0}to{max-width:10em}}
html.anime .etape.vu .mini-ligne.change{animation:verdir 1.8s ease .9s both}
@keyframes verdir{0%,40%{background:var(--sourd);color:var(--encre)}}
html.anime .etape.vu .mini-bulle{animation:bulle .5s var(--ressort) .4s both}
@keyframes bulle{from{opacity:0;transform:translateY(8px) scale(.94)}}
html.anime .etape.vu .mini-options li:nth-child(2) i{animation:basculer .01s linear 1.2s both}
html.anime .etape.vu .mini-options li:nth-child(2) i::after{animation:glisser .35s var(--ressort) 1.2s both}
@keyframes basculer{from{background:var(--filet-2)}}
@keyframes glisser{from{transform:none}}
html.anime .etape.vu .mini-notif{animation:arriver .6s var(--ressort) 1s both}
@keyframes arriver{from{opacity:0;transform:translateY(16px)}}

.balayer{display:none}
.section-sombre .balayer{color:#ffffff99}


/* ---------- 02 · les deux produits ---------- */
.piliers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto;gap:0 20px;margin-top:clamp(36px,4.5vw,56px)}
.pilier{display:grid;grid-row:span 2;grid-template-rows:subgrid;border-radius:var(--rayon-g);background:#fff;border:1px solid var(--filet);overflow:hidden}
.pilier-texte{padding:clamp(28px,3.2vw,44px) clamp(24px,3.2vw,44px) 28px}
.pilier-etiquette{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--renard)}
.pilier-etiquette .ic{width:19px;height:19px}
body.vitrine .pilier h3{margin-top:14px;font-size:clamp(26px,2.5vw,36px);line-height:1.08;max-width:19ch}
.liste-coches{display:grid;gap:11px;margin-top:22px}
.liste-coches li{display:flex;gap:11px;font-size:16px;line-height:1.45;color:var(--encre-2)}
/* UN SEUL ACCENT (feu vert du 28/09, O9 ; charte du 24/09) : les coches, les repères d'heure et les icônes des tuiles étaient en
   vert, bleu, or, lilas, vigne — jusqu'à six couleurs sur une page, la signature des gabarits SaaS. Le vermillon est la seule
   couleur d'accent ; les teintes pastel restent en grandes surfaces, derrière les écrans du produit. */
.liste-coches .ic{width:20px;height:20px;margin-top:1px;padding:3px;border-radius:50%;background:var(--renard-pale);color:var(--renard);stroke-width:3}
.pilier .lien-fleche{margin-top:26px}
.pilier-image{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:300px;padding:28px 28px 0;background:var(--t-corail)}
.telephone{width:min(260px,72%);padding:9px 9px 0;border-radius:40px 40px 0 0;background:#0e0e10;box-shadow:0 -20px 50px -24px #0006}
.telephone img{display:block;width:100%;height:clamp(300px,100%,420px);min-height:300px;object-fit:cover;object-position:top;border-radius:32px 32px 0 0}
.pilier-espace{background:var(--nuit);border-color:var(--nuit);color:#fff}
.pilier-espace .pilier-etiquette{color:var(--renard-clair)}
.pilier-espace .liste-coches li{color:#ffffffc4}
.pilier-espace .liste-coches .ic{background:#ffffff14;color:var(--renard-clair)}
.pilier-espace .lien-fleche{color:#fff}
.pilier-espace .pilier-image{background:linear-gradient(180deg,var(--nuit),#23232b);padding:28px 0 0 28px;justify-content:flex-end}
.ecran{width:100%;border-radius:16px 0 0 0;overflow:hidden;background:#fff;box-shadow:0 -24px 60px -20px #000c}
.ecran-barre{display:flex;gap:6px;padding:11px 14px;background:#EFEDE8}
.ecran-barre b{width:10px;height:10px;border-radius:50%;background:#D5D2CA}
.ecran{display:flex;flex-direction:column;align-self:stretch}
.ecran img{display:block;flex:1;width:100%;min-height:300px;max-height:460px;object-fit:cover;object-position:0 0}

/* ---------- 04 · les fonctions, sur fond sombre ---------- */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(36px,4.5vw,56px)}
.bento-tuile{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--rayon);background:var(--nuit-2);border:1px solid var(--nuit-filet);transition:border-color .25s,transform .25s var(--ressort)}
.bento-tuile:hover{border-color:#4a4a55;transform:translateY(-2px)}
.bento-tuile:nth-child(1),.bento-tuile:nth-child(6){grid-column:span 2}
.bento-corps{display:flex;flex-direction:column;gap:10px;flex:1}
.bento-large{flex-direction:row;gap:24px}
.bento-large .bento-corps{flex:1 1 55%}
.bento-visuel{flex:0 1 42%;display:flex;flex-direction:column;justify-content:center;gap:10px}
.bv-carte{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:#fff;color:var(--encre);box-shadow:0 18px 40px -20px #000;border-left:3px solid var(--renard)}
.bv-carte.bv-2{margin-left:18px;border-left-color:var(--encre-3);opacity:.92}
.bv-carte small{font-size:11px;font-weight:700;color:var(--renard)}.bv-carte.bv-2 small{color:var(--encre-3)}
.bv-carte b{font-size:14px}.bv-carte span{font-size:12px;color:var(--encre-3)}
.bv-pastille{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--encre);font-size:13.5px;font-weight:600}
.bv-pastille i{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px #16a34a2e}
.bv-urgence{background:var(--sourd-2);color:var(--encre)}
.bv-ardoise{display:grid;gap:2px;padding:12px 16px;border-radius:14px;background:#22302a;color:#f4f1e6;font-family:var(--serif);font-style:italic;border:6px solid #6b4f36}
.bv-ardoise small{font:600 11px var(--texte);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#cfc8b2}
.bv-ardoise b{font-weight:500;font-size:18px}



.bento-pic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#ffffff12;color:var(--renard-clair)}
.bento-pic .ic{width:23px;height:23px}
body.vitrine .bento-tuile h3{margin-top:8px;font-size:23px;line-height:1.15;color:#fff}
.bento-tuile h3 a{color:inherit;text-decoration:none}
.bento-tuile h3 a:hover{text-decoration:underline}
.bento-compte{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--renard-clair)}
.bento-tuile>p{font-size:15.5px;line-height:1.5;color:#ffffffa8}
.bento-noms{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:14px}
.bento-noms li{padding:6px 11px;border-radius:999px;background:#ffffff12;font-size:13px;line-height:1.3;color:#ffffffd9}
.bento-noms .plus{background:none;box-shadow:inset 0 0 0 1px #ffffff38}
.socle-bande{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;margin-top:16px;padding:24px 28px;border-radius:var(--rayon);background:#fff;color:var(--encre)}
.socle-bande p{flex:1 1 420px;font-size:15.5px;line-height:1.55;color:var(--encre-2)}
.socle-bande b{color:var(--encre)}

/* ---------- 05 · exemples ---------- */
.tete-section{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.aide-exemples{margin-top:16px;font-size:16px;color:var(--encre-2);max-width:60ch}
.exemples-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px) clamp(16px,2.2vw,28px);margin-top:clamp(32px,4vw,48px)}
.exemples-grille>li{display:flex;flex-direction:column;align-items:flex-start}
.exemples-grille>li[hidden]{display:none}
.exemples-grille:has(>li:only-child){grid-template-columns:minmax(0,820px);justify-content:center}   /* un exemple seul (pages métier) occupait une demi-largeur, à gauche (audit design du 27/09, point 13) */
.exemples-grille:has(>li:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.exemple-fenetre{display:block;align-self:stretch;flex:1;text-decoration:none;color:inherit}
.apercu-volume{position:relative;border-radius:20px;border:1px solid var(--filet);background:var(--sourd);overflow:hidden;box-shadow:var(--ombre);transition:transform .35s var(--ressort),box-shadow .35s}
.apercu-volume img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top center;transition:transform .6s var(--ressort)}
.apercu-voir{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:999px;background:#fff;color:var(--encre);font-size:14px;font-weight:600;box-shadow:var(--ombre);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s var(--ressort)}
.apercu-voir .ic{width:16px;height:16px;stroke-width:2.2}
.exemple-fenetre:hover .apercu-volume,.exemple-fenetre:focus-visible .apercu-volume{transform:translateY(-4px);box-shadow:var(--ombre-g)}
.exemple-fenetre:hover .apercu-volume img{transform:scale(1.03)}
.exemple-fenetre:hover .apercu-voir,.exemple-fenetre:focus-visible .apercu-voir{opacity:1;transform:none}
@media(hover:none){.apercu-voir{opacity:1;transform:none}}
.apercu-legende{padding:18px 2px 0}
.apercu-legende>span{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
body.vitrine .apercu-legende h3{margin:6px 0;font-size:clamp(20px,1.7vw,24px);line-height:1.15;letter-spacing:-.03em;overflow-wrap:anywhere}
.apercu-legende p{margin:0 0 4px;font-size:15px;line-height:1.45;color:var(--encre-2)}
.exemple-choisir{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin-top:14px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--filet-2);color:var(--encre);font-size:14.5px;font-weight:600;text-decoration:none;transition:box-shadow .2s,background .2s}
.exemple-choisir:hover{background:var(--encre);color:#fff;box-shadow:inset 0 0 0 1.5px var(--encre)}

/* ---------- 06 · comparer ---------- */
.comparaison{margin-top:clamp(32px,4vw,48px);border-radius:var(--rayon);background:#fff;border:1px solid var(--filet);overflow-x:auto;box-shadow:var(--ombre)}
.comparaison table{width:100%;min-width:760px;border-collapse:collapse}
.comparaison :is(th,td){padding:17px 20px;border-bottom:1px solid var(--filet);text-align:left;vertical-align:middle;font-size:15px;line-height:1.35}
.comparaison tbody tr:last-child :is(th,td){border-bottom:0}
.comparaison thead th{font:700 16px/1.2 var(--titre);letter-spacing:-.01em;color:var(--encre-2);white-space:nowrap}
.comparaison tbody th{font-weight:500;color:var(--encre);width:38%}
.comparaison .cmp-nous{background:var(--renard-pale)}
.comparaison thead .cmp-nous{color:var(--renard-fonce)}
.comparaison thead .cmp-nous img{display:inline-block;width:20px;height:20px;margin-right:8px;vertical-align:-4px}
.cmp-oui{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--renard-pale);color:var(--renard)}
.cmp-oui .ic{width:17px;height:17px;stroke-width:2.8}
.cmp-non,.cmp-moyen{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--encre-3)}
.cmp-non .ic{width:17px;height:17px;color:#B3B0A8;stroke-width:2.4}
.cmp-moyen .ic{width:17px;height:17px;color:#9a988f;stroke-width:2.6}
.cmp-prix td{font-size:14.5px;color:var(--encre-2)}
.cmp-choix{display:none}
.cmp-prix td.cmp-nous{color:var(--encre)}

/* ---------- 07 · le tarif ---------- */
.offre-grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}   /* « Pourquoi 79 € » centré en hauteur laissait le quart haut droit vide (audit design du 27/09, point 13) */
.offre-carte{position:relative;padding:clamp(30px,4vw,52px);border-radius:var(--rayon-g);background:#fff;border:1px solid var(--filet);box-shadow:var(--ombre-g);overflow:hidden}
.offre-carte::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--renard)}
.offre-nom{margin-top:18px;font-size:16px;font-weight:600;color:var(--encre-2)}
body.vitrine .offre .montant{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;margin-top:6px;font-size:clamp(76px,9vw,124px);line-height:.95;font-weight:800;letter-spacing:-.055em;max-width:none}
.offre .montant span{font:500 clamp(18px,1.6vw,22px)/1 var(--texte);letter-spacing:0;color:var(--encre-3)}
.offre .an{margin-top:14px;font-size:17px;line-height:1.45;font-weight:600;color:var(--encre)}   /* /tarif : le prix sur un an, calculé (registre v2, D13) */
.offre .tva{margin-top:10px;font-size:13.5px;color:var(--encre-3)}
.offre .sans{margin:18px 0 28px;font-size:16.5px;line-height:1.5;color:var(--encre-2)}
.offre .prix-court{margin-top:20px;padding-top:18px;border-top:1px solid var(--filet);font-size:14.5px;line-height:1.5;color:var(--encre-2);max-width:48ch}
.offre .prix-court b{color:var(--encre)}
body.vitrine .offre-pourquoi h3{font-size:clamp(26px,2.4vw,34px);line-height:1.1}
.offre-pourquoi>p{margin:12px 0 24px;font-size:16px;color:var(--encre-2)}
.offre-pourquoi ul{display:grid;gap:16px}
.offre-pourquoi li{position:relative;padding-left:34px;font-size:15.5px;line-height:1.5;color:var(--encre-2)}
.offre-pourquoi li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--renard-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D23C25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.offre-pourquoi li b{color:var(--encre);font-weight:600}
.offre-joindre{margin-top:26px;font-size:15px;color:var(--encre-2)}
.offre-joindre a{color:var(--encre);font-weight:600}
.offre-conditions{margin-top:16px}

/* ---------- 08 · questions ---------- */
.questions-grille{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(28px,5vw,80px);align-items:start}
.questions-liste{border-top:1px solid var(--filet-2)}
.questions-liste details{border-bottom:1px solid var(--filet-2)}
.questions-liste summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font:600 clamp(17px,1.4vw,19px)/1.35 var(--texte)}
.questions-liste summary::-webkit-details-marker{display:none}
.questions-liste summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111113' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1px var(--filet-2);transition:transform .25s var(--ressort)}
.questions-liste details[open] summary::after{transform:rotate(45deg)}
.questions-liste details p{padding:0 44px 22px 0;font-size:16px;line-height:1.6;color:var(--encre-2);max-width:66ch}
.questions-liste details a{color:var(--encre);font-weight:600}

/* ---------- le service aujourd'hui ---------- */
.confiance{padding:clamp(48px,6vw,72px) 0;border-top:1px solid var(--filet)}
.confiance-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.confiance-liste li{display:flex;gap:14px;align-items:flex-start}
.confiance-liste .ic{width:24px;height:24px;margin-top:1px;color:var(--renard)}
.confiance-liste p{font-size:14.5px;line-height:1.5;color:var(--encre-2)}
.confiance-liste b{display:block;margin-bottom:3px;font-size:15.5px;color:var(--encre)}

/* ---------- l'appel final, en vermillon ---------- */
.final{position:relative;padding:clamp(80px,10vw,140px) 0;background:var(--renard);color:#fff;text-align:center;overflow:hidden}
.final .conteneur{position:relative;display:flex;flex-direction:column;align-items:center}
.final img{display:block;width:48px;height:48px;padding:10px;border-radius:14px;background:#fff}
body.vitrine .final h2{margin-top:22px;font-size:clamp(40px,5.8vw,80px);line-height:1;max-width:16ch;color:#fff}
body.vitrine .final h2 em{color:#FFE1D8}
.nommer-final{margin-top:34px;border-color:#fff;box-shadow:0 24px 50px -24px #0006}
.nommer-final button{background:var(--encre)}
.nommer-final button:hover{background:#2a2a30}
.final .cta-sans-js{background:#fff;color:var(--encre)}
.final p{margin-top:16px;font-size:15px;color:#fff}   /* à 90 % de blanc, 4,14:1 sur le vermillon ; plein, 4,76:1 (audit design du 27/09, point 8) */

/* ---------- les pages intérieures ---------- */
.page-une{padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,80px)}
.fil{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--encre-3)}
.fil a{color:var(--encre-2);text-decoration:none}
.fil a:hover{text-decoration:underline}
.fil span[aria-hidden]{color:var(--filet-2)}
body.vitrine .page-une h1{max-width:18ch;font-size:clamp(38px,4.8vw,70px);line-height:1.02}
.page-une .chapo{max-width:56ch}
/* Un second paragraphe au premier écran, sous le chapeau (pages métier ; registre v2, D04) : même lecture, encre pleine. */
.chapo-suite{margin-top:12px;font-size:clamp(16px,1.3vw,18px);line-height:1.5;color:var(--encre);max-width:56ch}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:30px}
.page-actions p{font-size:14.5px;color:var(--encre-3)}
.page-une-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.scene-teintee{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;min-height:420px;padding:32px 32px 0;border-radius:var(--rayon-g);background:var(--t);overflow:hidden}
.grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grille-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tuile{display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:var(--rayon);background:#fff;border:1px solid var(--filet)}
.section-sourde .tuile{border-color:#0000}
.tuile-pic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--sourd-2);color:var(--encre)}
.section-sourde .tuile-pic{background:#fff;box-shadow:inset 0 0 0 1px var(--filet)}
.tuile-pic .ic{width:23px;height:23px}
body.vitrine .tuile h3{margin-top:6px;font-size:21px;line-height:1.2;letter-spacing:-.025em}
.tuile p{font-size:15.5px;line-height:1.55;color:var(--encre-2)}
.tuile .lien-fleche{margin-top:auto;padding-top:8px;font-size:15px}
.tete-bloc{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,3.5vw,44px)}
.tete-bloc h2{margin-top:14px}


/* ---------- les pages intérieures : compléments ---------- */
.section-courte{padding-top:0}
.catalogue .catalogue-famille:first-child{padding-top:clamp(24px,3vw,40px)}
/* /fonctionnalites à 1440 × 900 : le premier écran ne montrait aucune fonction, la première carte commençait à y ≈ 926 (audit design
   du 27/09, point 13). L'en-tête se resserre : filtres collés au chapeau, la grille juste dessous. */
.page-fonctions .page-une{padding-bottom:clamp(20px,2.5vw,32px)}
.page-fonctions .filtre{margin-top:22px}
.page-fonctions .filtre-dit{margin-top:6px}
.page-fonctions .catalogue .catalogue-famille:first-child{padding-top:clamp(16px,2vw,24px)}
.page-une[data-teinte]{background:linear-gradient(180deg,var(--t) 0,#fff 100%)}
.page-une-centre{text-align:center}
.page-une-centre .conteneur{display:flex;flex-direction:column;align-items:center}
body.vitrine .page-une-centre h1{margin-inline:auto;max-width:20ch}
.page-une-centre .chapo{margin-inline:auto}
.page-une .repere{margin-top:22px}
.mt-grille{margin-top:clamp(32px,4vw,48px)}
.grille-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:0}
.note{margin-top:18px;font-size:14px;color:var(--encre-3)}
.deux-temps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.deux-temps .liste-coches{margin-top:26px}
.metier-qui-page{margin-top:12px;font-size:14.5px;color:var(--encre-3)}
.metier-prix{margin-top:24px;font-size:15.5px;color:var(--encre-2)}
.metier-prix b{color:var(--encre)}
/* trois téléphones en éventail (page du site internet) */
.trio{align-items:flex-end;min-height:480px;padding-bottom:0}
.trio .telephone{position:relative;width:34%;flex:none}
.trio .telephone img{height:360px;min-height:0}
.trio .t-gauche,.trio .t-droite{transform:translateY(28px) scale(.9);opacity:.96}
.trio .t-gauche{margin-right:-6%;transform:translateY(28px) scale(.9) rotate(-5deg);z-index:0}
.trio .t-droite{margin-left:-6%;transform:translateY(28px) scale(.9) rotate(5deg);z-index:0}
.trio .t-centre{z-index:1}
.trio .t-centre img{height:400px}
/* la phrase qui change le site */
.phrase-demo{flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:36px}
.pd-site{display:grid;gap:10px;width:min(360px,100%);padding:20px;border-radius:18px;background:#fff;box-shadow:var(--ombre-g)}
.pd-site b{font:700 26px/1.05 var(--titre);letter-spacing:-.03em}.pd-site b em{font-family:var(--serif);font-style:italic;font-weight:420;color:var(--renard)}
.pd-ligne{display:flex;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:10px;background:var(--sourd);font-size:14px;font-weight:600}
.pd-ligne span{font-weight:500;color:var(--encre-3)}
.pd-change{background:var(--renard-pale);color:var(--renard-fonce);box-shadow:0 0 0 2px var(--renard)}.pd-change span{color:var(--renard-fonce)}
.pd-bulle{align-self:flex-end;max-width:80%;padding:11px 15px;border-radius:18px 18px 4px 18px;background:var(--encre);color:#fff;font-size:14.5px;font-weight:500}
.pd-valider{display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:999px;background:#fff;box-shadow:var(--ombre);font-size:13.5px;color:var(--encre-2)}
.pd-valider b{padding:8px 14px;border-radius:999px;background:var(--renard);color:#fff;font-size:13px}
/* Google, dessiné (pas de capture d'un service tiers) */
.google-demo{flex-direction:column;align-items:stretch;justify-content:center;gap:14px;padding:36px}
.gd-resultat{display:grid;gap:4px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:var(--ombre);font-size:14px;color:var(--encre-2)}
.gd-resultat small{font-size:12.5px;color:#1a7f37}
.gd-resultat b{font:500 19px/1.25 var(--texte);color:#1a0dab}
.gd-fiche b{color:var(--encre);font-weight:700}
.gd-fiche span{color:#1a7f37;font-weight:600}
.gd-boutons{display:flex;gap:8px;margin-top:6px}
.gd-boutons i{padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--filet-2);font-style:normal;font-size:13px;font-weight:600;color:var(--encre)}
/* l'espace : un écran et un téléphone sur fond de nuit */
.scene-nuit{background:linear-gradient(160deg,#1c1c22,#131316)}
.espace-duo{align-items:flex-end;justify-content:flex-start;padding:40px 0 0 40px}
.espace-duo .ecran{width:88%;border-radius:16px 0 0 0}
.espace-duo .ecran img{height:380px;max-height:none}
.espace-duo .telephone{position:absolute;right:6%;bottom:0;width:30%;box-shadow:-20px 0 60px -20px #000c}
.espace-duo .telephone img{height:340px;min-height:0}
/* une journée dans l'espace */
.journee{display:grid;gap:20px;margin-top:clamp(36px,4.5vw,56px)}
.moment{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(24px,3vw,40px);border-radius:var(--rayon-g);background:#fff}
.moment:nth-child(even) .moment-texte{order:2}
.moment-heure{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--sourd-2);color:var(--encre);font:700 14px/1 var(--titre)}
body.vitrine .moment h3{margin-top:16px;font-size:clamp(24px,2.3vw,32px);line-height:1.12}
.moment-texte>p:last-child{margin-top:12px;font-size:16px;line-height:1.6;color:var(--encre-2);max-width:48ch}
.moment-image{display:flex;justify-content:center;align-items:flex-end;height:360px;padding:28px 28px 0;border-radius:var(--rayon);background:var(--t);overflow:hidden}
.appareil-tab{width:min(360px,100%);height:100%;padding:12px 12px 0;border-radius:28px 28px 0 0;background:#111113;box-shadow:0 -20px 50px -24px #0006;overflow:hidden}
.appareil-tab img{display:block;width:100%;height:auto;border-radius:18px 18px 0 0}
.moment-image .ecran{width:100%;height:100%;border-radius:14px 14px 0 0}
/* vos clés */
.cles{display:grid;gap:14px}
.cles li{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:var(--rayon);background:var(--nuit-2);border:1px solid var(--nuit-filet)}
.cles .ic{width:26px;height:26px;color:var(--renard-clair)}
.cles p{font-size:15px;line-height:1.5;color:#ffffffa8}
.cles b{display:block;margin-bottom:2px;font-size:16.5px;color:#fff}
.socle-sombre .tuile{background:var(--nuit-2);border-color:var(--nuit-filet)}
body.vitrine .socle-sombre .tuile h3{color:#fff}
.socle-sombre .tuile p{color:#ffffffa8}
.socle-sombre{margin-top:clamp(32px,4vw,48px)}
/* le filtre par métier */
.filtre{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:32px}
.filtre p{margin-right:6px;font-size:14px;font-weight:600;color:var(--encre-3)}
.filtre button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--filet);color:var(--encre);font-size:14.5px;font-weight:600;transition:background .2s,box-shadow .2s}
.filtre button i{display:none}
.filtre button:hover{box-shadow:inset 0 0 0 1.5px var(--encre)}
.filtre button[aria-pressed=true]{background:var(--encre);color:#fff;box-shadow:none}
.filtre button[aria-pressed=true] i{background:#fff}
.filtre-dit{min-height:24px;margin-top:14px;font-size:14.5px;color:var(--encre-2)}
/* le catalogue des fonctions */
.catalogue-grille{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,2fr);gap:clamp(24px,4vw,64px);align-items:start}
.catalogue-tete{position:sticky;top:96px}
body.vitrine .catalogue-tete h2{margin-top:18px;font-size:clamp(28px,2.8vw,40px);line-height:1.05;max-width:12ch}
.catalogue-tete p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--encre-2)}
.fonctions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fonctions-3{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}
.fonction{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:20px;background:#fff;border:1px solid var(--filet);transition:opacity .35s,border-color .35s,box-shadow .35s,transform .35s var(--ressort)}
.section-sourde .fonction{border-color:#0000}
.fonction-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
body.vitrine .fonction h3{font-size:18.5px;line-height:1.25;letter-spacing:-.02em}
.fonction>p{font-size:15px;line-height:1.55;color:var(--encre-2)}
.fonction .fonction-pour{margin-top:auto;font-size:13px;color:var(--encre-3)}
.fonction-pour a{color:var(--encre-2)}
.fonction .lien-fleche{font-size:14px}
.catalogue .fonction.conseillee{border-color:var(--renard);box-shadow:0 18px 40px -26px #d23c2566}
.catalogue .fonction.estompee{opacity:.42}
/* filtré sur un métier : seulement ses fonctions (au téléphone, les autres en grisé faisaient une page illisible — le dirigeant, 24/09) */
.catalogue.catalogue-filtre .fonction.estompee,.catalogue.catalogue-filtre .fonction-pour{display:none}
.catalogue-famille[hidden]{display:none}
.filtre-tout{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--encre);cursor:pointer;text-decoration:underline}
/* les métiers */
.metiers-cartes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.metier-carte>a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);height:100%;border-radius:var(--rayon-g);background:var(--t);overflow:hidden;text-decoration:none;color:var(--encre);transition:transform .35s var(--ressort),box-shadow .35s}
.metier-carte>a:hover{transform:translateY(-4px);box-shadow:var(--ombre-g)}
.mc-image{display:flex;align-items:flex-end;justify-content:center;padding:28px 18px 0}
.mc-image img{display:block;width:100%;max-width:190px;height:250px;object-fit:cover;object-position:top;border:7px solid #111113;border-bottom:0;border-radius:30px 30px 0 0}
.mc-texte{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,36px)}
.mc-qui{font-size:13.5px;color:var(--encre-2)}
body.vitrine .mc-texte h2{font-size:clamp(26px,2.4vw,34px);line-height:1.05}
.mc-texte>p:not(.mc-qui){font-size:16px;line-height:1.45}
.mc-texte .lien-fleche{margin-top:auto;padding-top:8px}
.metier-autre{border-radius:var(--rayon-g);background:var(--sourd)}
.metier-autre .mc-texte{height:100%}
.metier-autre .mc-texte p{color:var(--encre-2);font-size:15.5px}
.metier-autre .btn{align-self:flex-start;margin-top:auto}
/* la page d'un métier */
.duo-appareils{align-items:flex-end;justify-content:center;gap:18px;padding:36px 24px 0;background:color-mix(in srgb,var(--t) 82%,var(--tf) 18%)}
.duo-appareils .appareil-telephone{width:36%;max-width:230px;margin:0 0 -40px;border-radius:40px}
.duo-appareils .appareil-telephone .face-ecran{border-radius:36px}
.duo-appareils .appareil-tablette{width:54%;max-width:330px;margin:0 0 -60px;border-radius:26px}
.duo-appareils .appareil-tablette .face-ecran{border-width:12px;border-radius:22px}
.page-metier .page-une{overflow:hidden}
.deux-cotes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-top:clamp(32px,4vw,48px)}
.cote{display:flex;flex-direction:column;padding:clamp(24px,3vw,36px);border-radius:var(--rayon-g);background:#fff}
.cote-titre{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--renard)}
.cote-titre .ic{width:18px;height:18px}
.cote-ecran{display:block;width:100%;max-width:320px;height:360px;margin:20px auto 0;object-fit:cover;object-position:top;border:8px solid #111113;border-radius:26px;background:#111113}
.cote-ecran.cote-tel{max-width:240px;border-radius:34px}
.cote .face-dits{margin-top:22px}
.metier-aussi-page{margin-top:22px;font-size:16px;line-height:1.55;color:var(--encre-2);max-width:80ch}
.metier-aussi-page b{color:var(--encre)}
.parcours.parcours-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.parcours-3 .etape{padding:28px;border-radius:var(--rayon);background:#fff}
.parcours-3 .etape-num{margin-top:0}
.offre .liste-coches{margin:4px 0 30px}
@media(max-width:1100px){.grille-4,.fonctions-3{grid-template-columns:repeat(2,minmax(0,1fr))}.catalogue-grille{grid-template-columns:1fr}.catalogue-tete{position:static}.metiers-cartes{grid-template-columns:1fr}}
@media(max-width:860px){.deux-temps,.moment,.deux-cotes{grid-template-columns:1fr}.moment:nth-child(even) .moment-texte{order:0}.parcours.parcours-3{grid-template-columns:1fr}.inverse>:first-child{order:2}}
@media(max-width:640px){
  .grille-4,.fonctions,.fonctions-3{grid-template-columns:1fr}
  .metier-carte>a{grid-template-columns:1fr}.mc-image{order:2;padding-top:0}.mc-image img{height:200px}
  .page-une-centre{text-align:left}.page-une-centre .conteneur{align-items:flex-start}.filtre{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 2 * var(--gouttiere));margin-inline:calc(-1 * var(--gouttiere));padding:2px var(--gouttiere) 8px;scrollbar-width:none}.filtre::-webkit-scrollbar{display:none}.filtre button{flex:none}.filtre p{flex:none}
  .trio{min-height:360px}.trio .telephone img{height:260px}.trio .t-centre img{height:290px}
  .espace-duo{padding:28px 0 0 20px}.espace-duo .ecran img{height:260px}.espace-duo .telephone img{height:230px}
  .moment-image{height:280px;padding:20px 20px 0}
  .cote-ecran{height:300px}
  .duo-appareils .appareil-telephone{margin-bottom:-30px}.duo-appareils .appareil-tablette{margin-bottom:-40px}}

/* ---------- les panneaux (création, exemples, démonstration) — repris de l'accueil du 23/09, restylés ---------- */
html:has(.panneau[open]){overflow:hidden}
.panneau{border:0;padding:0;width:100%;max-width:none;height:calc(100dvh - 24px);max-height:none;margin:auto 0 0;border-radius:28px 28px 0 0;background:#fff;color:var(--encre);box-shadow:0 -20px 80px #0003;overscroll-behavior:contain;font-family:var(--texte)}
.panneau::backdrop{background:#11111380}
.panneau:not([open]){display:none}
.panneau[open]{display:flex;flex-direction:column}
.panneau-barre{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--filet);flex:none;min-height:72px}
.panneau-barre button{padding:10px 18px;border:0;border-radius:999px;background:var(--sourd);color:var(--encre);font-size:14px;font-weight:600}
.panneau-barre>span{font-size:14px;font-weight:600}
.panneau-barre>a{font-size:14px;font-weight:600;color:var(--renard-fonce)}
.creation-contenu{width:min(680px,100%);margin:auto;padding:40px 28px;overflow-y:auto}
.creation-contenu .repere{margin-bottom:6px}
.creation-contenu h2{margin:16px 0 18px;font:700 clamp(32px,4vw,52px)/1.02 var(--titre);letter-spacing:-.04em}
.creation-contenu>p{color:var(--encre-2);font-size:16px}
.creation-contenu form{margin-top:30px}
.panneau label{display:block;font-size:13.5px;font-weight:600}
.panneau input{display:block;width:100%;min-width:0;height:56px;padding:14px 20px;margin-top:8px;border:1px solid var(--filet-2);border-radius:16px;background:#fff;color:var(--encre);font:400 16.5px var(--texte);transition:border-color .2s,box-shadow .2s}
.panneau input:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 4px #d23c2522}
.panneau input::placeholder{color:#7b7a73}
.panneau button[type=submit]{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 24px;margin-top:18px;background:var(--renard);color:#fff;border:0;border-radius:999px;font-size:16.5px;font-weight:600}
.panneau button[type=submit] .ic{width:18px;height:18px;stroke-width:2.2}
.panneau button[type=submit]:not(:disabled):hover{background:var(--renard-fonce)}
.panneau button:disabled{opacity:.55;cursor:not-allowed}
.panneau .gratuit{justify-content:flex-start;margin-top:16px}
#amorce{max-width:640px}
.champs{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.champs label:last-child{grid-column:1/-1}
.retour,.panneau .sans-js{font-size:13.5px;margin-top:14px}
.creation-modele{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--sourd);font-size:14px}
.creation-modele[hidden]{display:none}
.creation-modele button{margin-left:auto;border:0;background:none;color:var(--encre-2);font-size:13px;text-decoration:underline;cursor:pointer}
.panneau-demo iframe{border:0;display:block;flex:1;width:100%;min-height:0;background:#fbfbfa}
.panneau-demo iframe[hidden]{display:none}
.demo-attente{padding:32px;font-size:14px}
.demo-attente[hidden]{display:none}
.demo-attente a{display:block;margin-top:18px}
@media(max-width:760px){.panneau{height:calc(100dvh - 12px);border-radius:20px 20px 0 0}.panneau-barre{padding:12px;gap:8px;min-height:64px}.panneau-barre>span{font-size:12.5px}.panneau-barre>a{font-size:12.5px}.panneau-barre button{font-size:13px;padding:10px 14px}.creation-contenu{margin:0 auto;padding:28px 20px}.champs{grid-template-columns:1fr}.panneau input{height:52px}}
@media(prefers-reduced-motion:no-preference){.panneau{transition:transform .5s var(--ressort),opacity .3s,display .5s allow-discrete,overlay .5s allow-discrete;transform:translateY(100%);opacity:0}.panneau[open]{transform:translateY(0);opacity:1}}
@media(prefers-reduced-motion:no-preference){@starting-style{.panneau[open]{transform:translateY(100%);opacity:0}}}

/* ---------- plus d'apparition au défilement (feu vert du 28/09, O19) ----------
   Les blocs « revele » — les quatre étapes, la carte du prix, jusqu'à 198 textes sur /fonctionnalites — attendaient à opacité 0
   qu'on défile jusqu'à eux, avec jusqu'à 1,07 s de fondu : une ancre, une impression, un lecteur ou un défilement rapide voyaient
   des trous. La règle du dirigeant (« rien de caché qui attende un défilement ») et la référence Grateau (« presque aucune
   animation ») disent l'inverse. La classe reste dans les gabarits, elle ne fait plus rien ; seuls les mini-écrans des quatre
   étapes s'animent encore quand ils arrivent à l'écran (vitrine.js), et leur état au repos est complet. */
.parcours .etape:nth-child(2){--i:1}.parcours .etape:nth-child(3){--i:2}.parcours .etape:nth-child(4){--i:3}
.piliers .pilier:nth-child(2){--i:1}

/* ---------- téléphone et tablette ---------- */
@media(max-width:1100px){
  .parcours{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento-tuile:nth-child(1),.bento-tuile:nth-child(6){grid-column:span 2}
  .exemples-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grille-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){
  .piliers,.offre-grille,.questions-grille,.page-une-grille,.grille-2{grid-template-columns:1fr}
  .offre-grille{gap:40px}}
@media(max-width:640px){
  body.vitrine{font-size:16.5px}
  .section{padding:56px 0}
  body.vitrine .une h1{font-size:clamp(40px,11.6vw,54px)}
  .une .intro{margin-top:16px;font-size:17px}
  .nommer{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
  .nommer:focus-within{box-shadow:none}
  .nommer input{flex:none;height:54px;border:1px solid var(--filet-2);border-radius:999px;background:#fff;box-shadow:0 10px 26px -18px #11111350}
  .nommer input:focus{border-color:var(--encre);box-shadow:0 0 0 4px #d23c2522}
  .nommer button{justify-content:space-between;min-height:54px}
  .nommer-final input{border-color:#fff}
  .gratuit{justify-content:flex-start;gap:6px 16px;margin-top:16px;font-size:14px}
  .bande-metiers{flex-direction:column;align-items:stretch;gap:10px;padding:16px 0}
  .bande-metiers>p{padding-left:var(--gouttiere)}
  /* au téléphone, les six familles de fonctions se BALAIENT (la page passait à vingt écrans) ; les quatre ÉTAPES, non : le
     lecteur à froid « plombier » ne balaie pas, il descend — elles restent à la verticale, en cartes compactes */
  /* au téléphone, six lignes : la famille, combien de fonctions, et le lien vers le détail (elles tenaient quatre écrans) */
  .bento{grid-template-columns:1fr;gap:8px}
  .bento .bento-tuile{padding:16px 18px}
  .bento .bento-corps{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:center}
  .bento .bento-pic{grid-row:1/3;width:40px;height:40px}
  body.vitrine .bento .bento-tuile h3{margin:0;font-size:18px}
  .bento .bento-corps>p:not(.bento-compte),.bento .bento-noms,.bento .bento-visuel{display:none}
  .bento .bento-compte{font-size:12px}
  .parcours:not(.parcours-3){grid-template-columns:1fr;gap:28px}
  .parcours:not(.parcours-3) .etape{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;align-items:start}
  .parcours:not(.parcours-3) .etape-image{grid-column:1/-1;aspect-ratio:auto;height:180px;margin-bottom:16px}
  .parcours:not(.parcours-3) .etape-num{grid-column:1;grid-row:2 / span 2;margin-top:0}
  .parcours:not(.parcours-3) .etape h3{grid-column:2;margin-top:4px}
  .parcours:not(.parcours-3) .etape h3+p{grid-column:2}
  .parcours .mini-site{margin-bottom:34px}.parcours .mini-adresse{margin-bottom:40px}
  .comparaison .cmp-oui{width:26px;height:26px}
  .fait-pour,.defile{display:none}
  .vous-etes{display:block;padding:0 var(--gouttiere)}
  .vous-etes p{margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
  .vous-etes ul{display:flex;flex-wrap:wrap;gap:8px}
  .vous-etes a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 15px;border-radius:999px;background:var(--sourd);font-size:15px;font-weight:600;text-decoration:none}
  .vous-etes a i{display:none}
  .bento-tuile:nth-child(1),.bento-tuile:nth-child(6){grid-column:auto}
  .bento-tuile{padding:24px}
  .balayer{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:600;color:var(--encre-3)}
  .bento-large{flex-direction:column}
  .exemples-grille{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);margin-inline:calc(-1 * var(--gouttiere));padding:4px var(--gouttiere) 18px;scrollbar-width:none}
  .exemples-grille::-webkit-scrollbar{display:none}
  .exemples-grille>li{flex:0 0 84%;scroll-snap-align:start}
  /* Sur /exemples, la page qui existe pour les montrer, les neuf se lisent l'un sous l'autre : le carrousel n'en montrait qu'un et
     quart, sans repère (audit design du 27/09, point 11). Il reste sur les pages métier et produit, où ils sont un aparté. */
  .page-exemples .exemples-grille{display:grid;grid-template-columns:1fr;gap:28px;overflow:visible;margin-inline:0;padding:0}
  .page-exemples .exemples-grille>li{flex:none}
  .grille-3{grid-template-columns:1fr}
  .telephone img,.ecran img{height:270px}
  .pilier-image{min-height:0}
  .comparaison{margin-inline:calc(-1 * var(--gouttiere));border-radius:0;border-inline:0}
  .comparaison :is(th,td){padding:14px 12px}
  html.js .cmp-choix{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:22px;font-size:14px;color:var(--encre-3)}
  .cmp-choix button{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--filet);font-size:14px;font-weight:600;color:var(--encre)}
  .cmp-choix button[aria-pressed=true]{background:var(--encre);color:#fff;box-shadow:none}
  html.js .comparaison table{min-width:0}
  html.js .comparaison[data-voir=agence] :is(th,td):nth-child(4),html.js .comparaison[data-voir=createur] :is(th,td):nth-child(3){display:none}
  html.js .comparaison tbody th{width:46%}
  .comparaison thead th{white-space:normal}
  .questions-liste details p{padding-right:0}
  .scene-teintee{min-height:340px;padding:24px 20px 0}}
@media(prefers-reduced-motion:reduce){
  body.vitrine *,body.vitrine *::before,body.vitrine *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* la bande « le service aujourd'hui » sous le tarif (elle était orpheline entre les questions et l'appel final) */
.offre .confiance-liste{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid var(--filet)}

/* cibles tactiles de 24 px au moins (WCAG 2.5.8) : le logo, le fil d'Ariane, les liens fléchés, le curseur du duo */
.nav-marque,.pied-marque>a{display:inline-flex;align-items:center;min-height:44px}
.fil a,.fil span{display:inline-flex;align-items:center;min-height:28px}
.lien-fleche{min-height:32px}

/* .parcours.parcours-3 et non .parcours-3 : la règle « .parcours » du bloc téléphone, écrite plus bas, la battait à poids égal —
   les trois étapes de l'accès anticipé s'écrasaient sur deux colonnes de 169 px (verifier_vitrine_navigateur.py, 24/09). */
/* ---------- l'accueil resserré (24/09, nuit : « beaucoup d'informations au premier coup d'œil ») ---------- */
/* le prix en une ligne de texte, sans coches : au premier écran, un titre, une phrase, le nom, cette ligne */
.une .gratuit{display:block;margin-top:14px;font-size:14.5px;line-height:1.5;color:var(--encre-3)}
@media(max-width:640px){.une .gratuit{font-size:14px}}
/* les quatre étapes : des images plus basses, une phrase chacune */
.page-accueil .etape-image{aspect-ratio:1/.62}
body.vitrine.page-accueil .etape h3{font-size:clamp(19px,1.5vw,21px)}
.page-accueil .etape h3+p{font-size:15px}
/* le métier : une ligne pour dire qu'il y a plus, et où */
.metiers-suite{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:22px;font-size:16px;color:var(--encre-2)}
/* les exemples : une rangée qu'on fait glisser, au lieu de trois rangées de trois */
.exemples-rangee{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gouttiere);margin-inline:calc(-1 * var(--gouttiere));padding:6px var(--gouttiere) 18px;scrollbar-width:thin}
.exemples-rangee>li{flex:0 0 clamp(250px,28%,330px);scroll-snap-align:start}
body.vitrine .exemples-rangee .apercu-legende h3{font-size:19px}
.exemples-rangee .apercu-legende p{font-size:14px}
.questions-toutes{margin-top:18px}
@media(max-width:640px){.exemples-rangee>li{flex-basis:78%}}

/* ---------- LES PAGES D'ERREUR (25/09) : un écran du produit comme un autre — une phrase, deux chemins, le renard. ---------- */
.erreur{padding:clamp(56px,9vw,128px) 0 clamp(64px,9vw,120px);background:linear-gradient(180deg,var(--fond) 0%,var(--sourd) 100%);border-bottom:1px solid var(--filet)}
.erreur-grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center;min-height:min(56vh,560px)}
body.vitrine .erreur h1{margin-top:18px;font:700 clamp(40px,5.6vw,76px)/1.02 var(--titre);letter-spacing:-.035em;max-width:14ch;text-wrap:balance}
body.vitrine .erreur h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--renard)}
.erreur .chapo{max-width:50ch}
.erreur-gestes{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.erreur-aide{margin-top:28px;padding:16px 18px;border-radius:var(--rayon-p);background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet);color:var(--encre-2);font-size:15px;line-height:1.5;max-width:52ch}
.erreur-visuel{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:460px;width:100%;justify-self:center}
/* Le code en contour, sans lueur ni renard qui flotte en boucle : la lueur en dégradé et l'animation infinie sont des tics de gabarit
   (audit design du 27/09, point 16). Le renard se pose, c'est tout. */
.erreur-code{font:800 clamp(120px,19vw,280px)/.8 var(--titre);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:2px var(--filet-2);user-select:none}
.erreur-renard{position:absolute;right:8%;bottom:12%;width:clamp(72px,9vw,120px);height:auto;filter:drop-shadow(0 18px 24px #D23C2533)}
@media(max-width:820px){
  .erreur-grille{grid-template-columns:1fr;min-height:0}
  .erreur-visuel{order:-1;max-width:260px;aspect-ratio:auto;justify-self:start}
  .erreur-code{font-size:clamp(96px,30vw,150px)}
  .erreur-renard{right:-4%;bottom:0;width:64px}
  .erreur-gestes .btn{flex:1 1 100%}
}

/* ---------- MON ESPACE (25/09, nuit) : le compte, une carte par site. ---------- */
.compte{padding:clamp(40px,6vw,88px) 0 clamp(64px,8vw,112px);background:linear-gradient(180deg,var(--fond) 0%,var(--sourd) 100%)}
.compte-tete{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
body.vitrine .compte-tete h1{margin-top:14px;font:700 clamp(36px,4.6vw,62px)/1.04 var(--titre);letter-spacing:-.035em;text-wrap:balance}
body.vitrine .compte-tete h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--renard)}
.compte-alerte{margin:0 0 20px;padding:14px 16px;border-radius:var(--rayon-p);background:var(--renard-pale);color:var(--renard-fonce);font-weight:600;max-width:720px}
.compte-sites{display:grid;gap:clamp(18px,2.4vw,28px)}
.carte-site{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:var(--fond);border-radius:var(--rayon);box-shadow:var(--ombre);overflow:hidden}
.carte-site-image{position:relative;min-height:240px;background:var(--nuit);display:grid;place-items:center}
.carte-site-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.carte-site-image span[aria-hidden]{font:700 120px/1 var(--titre);color:#ffffff26}
.carte-site-etat{position:absolute;left:16px;top:16px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--encre);font:600 13px/1 var(--texte)}
.carte-site-etat--en-ligne{background:#DBF2E4;color:#15803D}
.carte-site-etat--suspendu{background:var(--renard-pale);color:var(--renard-fonce)}
.carte-site-texte{padding:clamp(22px,2.8vw,36px);display:flex;flex-direction:column;gap:12px}
body.vitrine .carte-site h2{margin:0;font:700 clamp(26px,2.6vw,36px)/1.08 var(--titre);letter-spacing:-.03em}
.carte-site-metier{margin:0;color:var(--encre-3);font-size:15px}
.carte-site-points{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:6px;color:var(--encre-2);font-size:16px}
.carte-site-points li::before{content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 0;border-radius:50%;background:var(--filet-2)}
.carte-site-points .fort{color:var(--encre);font-weight:650}
.carte-site-points .fort::before{background:var(--renard)}
.carte-site-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:auto}
.carte-site-lien{color:var(--encre);font-weight:600;text-underline-offset:3px}
.carte-site-plus{margin-top:8px;font-size:14px;color:var(--encre-3)}
.carte-site-plus summary,.compte-appareils summary,.aide-acces summary{cursor:pointer;font-weight:600;color:var(--encre-2)}
.carte-site-plus form,.compte-appareils form{display:grid;gap:10px;justify-items:start;margin-top:10px}
.compte-vide{padding:32px;border-radius:var(--rayon);background:var(--fond);box-shadow:var(--ombre);display:grid;gap:16px;justify-items:start}
.compte-appareils{margin-top:clamp(28px,4vw,48px);padding:20px 24px;border-radius:var(--rayon-p);background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet);font-size:15px;color:var(--encre-2)}
.compte-appareils article{padding:14px 0;border-top:1px solid var(--filet)}
.compte-appareils h3{margin:0 0 4px;font-size:16px;color:var(--encre)}
.compte-formulaires{display:grid;gap:18px;max-width:560px}
.compte-cadre{padding:clamp(22px,3vw,32px);border-radius:var(--rayon);background:var(--fond);box-shadow:var(--ombre);display:grid;gap:12px}
.compte-cadre h2{margin:0;font:700 24px/1.2 var(--titre)}
.compte-cadre form{display:grid;gap:14px;justify-items:start}
.compte-cadre label{display:grid;gap:8px;width:100%;font-weight:600}
.compte-cadre input{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1.5px solid var(--filet-2);font:400 17px var(--texte);background:var(--fond)}
.compte-cadre input:focus{outline:none;border-color:var(--encre)}
.compte-lien{color:var(--encre-2)}
.aide-acces{margin-top:18px;font-size:14.5px;color:var(--encre-3)}
@media(max-width:760px){
  .carte-site{grid-template-columns:1fr}
  .carte-site-image{min-height:190px}
  .carte-site-gestes .btn{flex:1 1 100%}
}
/* l'espace client en tête du menu du téléphone (26/09) */
.nav-tiroir-client{display:flex!important;align-items:center;justify-content:space-between;min-height:52px;margin:4px 0 10px;padding:0 18px!important;border:1.5px solid currentColor;border-radius:999px;font-weight:600;text-decoration:none}
/* se connecter d'un geste (26/09) */
.compte-note{margin:6px 0 0;font-size:14px;color:var(--gris,#5b5d57)}
.compte-cles{margin-top:clamp(18px,2.4vw,28px)}
.compte-liste-cles{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.compte-liste-cles li{display:flex;align-items:center;justify-content:space-between;gap:12px}
.compte-liste-cles form{margin:0}

/* LA NAISSANCE dans le panneau de création (lot UX-1, 29/09) : dès l'appui, le formulaire cède la place au nom en grand, à des
   blocs gris et à une barre fine qui avance — sans pourcentage, sans durée, sans bouton. Rien d'animé sur le nom. */
.panneau[data-naissance] #amorce,.panneau[data-naissance] #titre-creation,.panneau[data-naissance] .gratuit{display:none}
.naissance[hidden]{display:none}
.naissance{display:grid;gap:12px;padding-top:6px}
.naissance-nom{margin:0;font:700 clamp(34px,9vw,56px)/1.02 var(--titre);letter-spacing:-.04em;overflow-wrap:anywhere}
.naissance-ou{margin:0;color:var(--encre-2);font-size:15.5px}
.naissance-ou:empty{display:none}
.naissance-blocs{display:grid;gap:10px;margin-top:14px}
.naissance-blocs span{display:block;height:14px;border-radius:7px;background:var(--sourd)}
.naissance-blocs span:first-child{height:min(42vh,320px);border-radius:16px}
.naissance-blocs span:last-child{width:60%}
.naissance-barre{position:relative;height:3px;margin:20px 0 0;border-radius:3px;background:var(--filet);overflow:hidden}
.naissance-barre i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:3px;background:var(--renard)}
.naissance-dit{margin:0;font-weight:600;font-size:16px}
@media(prefers-reduced-motion:no-preference){.naissance-barre i{animation:naissance-avance 1.3s ease-in-out infinite}@keyframes naissance-avance{from{transform:translateX(-110%)}to{transform:translateX(290%)}}}