/* Faiseur de Roi : vitrine, page video, reservation.
   D'apres les trois maquettes du handoff (maquettes/*.dc.html), dessinees a
   1440 px de large. Les valeurs de bureau sont celles de la maquette ; tout ce
   qui est en dessous de 1200 px est concu ici (brief, section 4).
   Aucun style en ligne dans les pages : la politique de securite ne sert que
   ce fichier. Les largeurs animees sont posees par le script, via le CSSOM,
   ce que la politique autorise. */

@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* La fleche de « 1 000 → 180 000 vues » n'est pas dans le jeu latin de Google
   Fonts : un fichier de 1,4 Ko a part, charge seulement si la page l'affiche. */
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-var-fleche.woff2) format("woff2");unicode-range:U+2192}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jetbrains-mono-500-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/jetbrains-mono-500-fleche.woff2) format("woff2");unicode-range:U+2192}

:root{
  --fond:#0B0B0C;--carte:#141416;--carte2:#111113;--bord:#2A2A2C;--bord-fin:#1C1C1E;--bord-fort:#3A3A3C;
  --texte:#F2F2F0;--texte2:#A8A8A2;
  /* #6E6E68 dans la maquette : 3,8:1 sur le fond noir, sous le minimum de 4,5
     pour du texte courant. Eclairci au plus juste pour passer partout. */
  --discret:#7E7E78;
  --accent:#C8F53B;--accent-survol:#E2FF8A;--ok:#8FE3A4;
  --clair:#EFECE5;--clair-texte2:#45423C;
  --gouttiere:clamp(20px,6.667vw,96px);
  --espace:clamp(88px,9.72vw,140px);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fond);color:var(--texte);font-family:Archivo,system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;overflow-x:clip}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--accent)}
a:hover{color:var(--accent-survol)}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.accent{color:var(--accent)}
/* Titres aux lignes equilibrees : plus de mot seul en derniere ligne
   (« …de plus en plus / cher », « Ce n'est pas pour vous / si »). Les
   paragraphes evitent la ligne orpheline. La phrase du manifeste est exclue :
   son mot change toutes les 2,2 s, un reequilibrage la ferait sauter. */
h1,h2,h3,.conclusion,.lien-carte__texte,.tunnel__consigne{text-wrap:balance}
p,li{text-wrap:pretty}
/* cellules du comparatif : « Un forfait / mensuel fixe » plutot qu'un mot seul */
.comparatif td{text-wrap:balance}
/* mot compose garde entier (« vous-même ? ») ; Archivo n'a pas le trait
   d'union insecable U+2011 */
.insecable{white-space:nowrap}
.manifeste__phrase{text-wrap:wrap}
.visuellement-cache{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evitement{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 16px;border-radius:10px;background:var(--accent);color:var(--fond);font-weight:600;text-decoration:none}
.evitement:focus{top:12px}
.enveloppe{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gouttiere)}
.bloc{margin-bottom:var(--espace)}
.pile{display:flex;flex-direction:column;gap:48px}
.pile--serre{gap:20px}

/* --- animations (prefixe fdr- de la maquette) ------------------------------ */
@keyframes fdr-ring{from{transform:scale(1);opacity:.7}to{transform:scale(2.8);opacity:0}}
@keyframes fdr-blink{50%{opacity:0}}
@keyframes fdr-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fdr-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fdr-pop{0%{opacity:0;transform:translateY(12px) scale(.96)}12%{opacity:1;transform:none}82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}
@keyframes fdr-fill{from{width:0}to{width:100%}}
@keyframes fdr-fill-v{from{height:0}to{height:100%}}
@keyframes fdr-upload{0%{width:0}62%{width:100%}100%{width:100%}}
@keyframes fdr-done{0%,58%{opacity:0;transform:scale(.5)}70%,100%{opacity:1;transform:none}}
@keyframes fdr-feed{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes fdr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fdr-swap{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes fdr-scan{from{transform:translateX(-100%)}to{transform:translateX(400%)}}
@keyframes fdf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes fdf-halo{from{transform:scale(1);opacity:.45}to{transform:scale(1.9);opacity:0}}

/* entree courte : tout le titre est la en 0,6 s (avant : 1,4 s, « le chargement est tres lent ») */
.monte{animation:fdr-entre .45s cubic-bezier(.2,.7,.2,1) both}
.heros .d1{animation-delay:0s}.heros .d2{animation-delay:.05s}.heros .d3{animation-delay:.1s}.heros .d4{animation-delay:.15s}.heros .d5{animation-delay:.08s}
.tunnel .d1{animation-delay:0s}.tunnel .d2{animation-delay:.05s}.tunnel .d3{animation-delay:.1s}.tunnel .d4{animation-delay:.15s}.tunnel .d5{animation-delay:.2s}
.curseur{display:inline-block;width:.09em;height:.82em;margin-left:.06em;vertical-align:-.04em;background:var(--accent);animation:fdr-blink 1s steps(1) infinite}
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:fdr-ring 1.6s ease-out infinite}
.trame{background-image:radial-gradient(#232326 1px,transparent 1px);background-size:28px 28px}
.trame-sombre{background-image:radial-gradient(rgba(11,11,12,.16) 1px,transparent 1px);background-size:22px 22px}
.carte-survol{transition:transform .25s ease,border-color .25s ease}
@media (hover:hover){.carte-survol:hover{transform:translateY(-4px);border-color:#4A4A4E}}

/* --- boutons ---------------------------------------------------------------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 28px;border-radius:12px;border:1px solid transparent;font-size:17px;font-weight:600;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:transform .2s ease,filter .2s ease}
@media (hover:hover){.bouton:hover{transform:translateY(-2px);filter:brightness(1.08)}}
.bouton svg{flex-shrink:0}
.bouton--accent,.bouton--accent:hover{background:var(--accent);color:var(--fond)}
.bouton--contour,.bouton--contour:hover{border-color:var(--bord-fort);background:var(--fond);color:var(--texte);font-weight:400;padding:0 26px}
.bouton--sombre,.bouton--sombre:hover{background:var(--fond);color:var(--texte)}
.bouton--grand{min-height:64px;padding:0 36px;border-radius:14px;font-size:19px}
.bouton--formulaire{align-self:flex-start;min-height:60px;padding:0 30px;font-size:18px;font-family:inherit}
.bouton--petit{min-height:44px;padding:0 20px;border-radius:10px;font-size:15px;white-space:nowrap}
.lien-bouton{min-height:44px;padding:0;border:none;background:none;color:var(--accent);font-size:15px;text-decoration:underline;cursor:pointer}

/* --- en-tete ---------------------------------------------------------------- */
.entete{border-bottom:1px solid var(--bord-fin)}
/* Menu abaisse (28 -> 16 px de marge) : sur un portable 1280 x 720, la
   promesse, l'explication et le bouton doivent tenir sans defiler. */
.entete__barre{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:16px}
.entete--centre .entete__barre{justify-content:center}
.logo{font-size:22px;font-weight:800;letter-spacing:-.02em;font-stretch:110%;line-height:1.2;color:var(--texte);text-decoration:none;white-space:nowrap}
a.logo:hover{color:var(--texte)}
.logo span{color:var(--accent)}
.nav{display:flex;gap:36px;align-items:center;font-size:15px}
.nav a:not(.bouton){color:var(--texte2);text-decoration:none}
.nav a:not(.bouton):hover{color:var(--texte)}

/* --- 1. accroche ------------------------------------------------------------ */
.heros__grille{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:min(104px,9vh) 88px}
.heros__texte{display:flex;flex-direction:column;gap:30px}
/* Le titre suit la largeur ET la hauteur de l'ecran : 96 px a 1440 x 900
   comme la maquette, 76 px sur un 1280 x 720, ou il faisait passer les
   boutons sous le bord. Graisse, largeur et interlignage ne bougent pas. */
.heros__titre{font-size:min(clamp(44px,1.2rem + 5.4vw,96px),10.5vh);line-height:.95;font-weight:800;letter-spacing:-.035em;font-stretch:88%}
.heros__titre>span{display:block}
.heros__sous{font-size:clamp(18px,1rem + .3vw,20px);line-height:1.55;color:var(--texte2);max-width:540px}
.heros__actions{display:flex;flex-wrap:wrap;gap:14px}
.heros__visuel{position:relative}
.journal{position:relative;overflow:hidden;background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px}
.journal__balayage{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden}
.journal__balayage span{display:block;width:25%;height:2px;background:var(--accent);animation:fdr-scan 3.2s ease-in-out infinite}
.journal__titre{font-size:16px;font-weight:600}
.journal__lignes{display:flex;flex-direction:column}
.journal__ligne{display:grid;grid-template-columns:64px minmax(0,1fr) 100px 100px;gap:12px;align-items:center;padding:13px 0;border-top:1px solid #222224;font-size:14px}
.journal__ligne:nth-child(2){opacity:.88}.journal__ligne:nth-child(3){opacity:.76}.journal__ligne:nth-child(4){opacity:.64}.journal__ligne:nth-child(5){opacity:.52}.journal__ligne:nth-child(6){opacity:.4}
.journal__heure{font-family:var(--mono);color:var(--texte2)}
.journal__compte{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.journal__format{color:var(--texte2);white-space:nowrap}
.journal__statut{display:flex;align-items:center;gap:7px;color:var(--ok);white-space:nowrap}
.journal__statut .point{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.journal__statut--envoi{color:var(--accent)}
.journal__statut--envoi .point{position:relative}
.journal__statut--envoi .point::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:fdr-ring 1.6s ease-out infinite}
.notif{position:absolute;left:-44px;bottom:-30px;display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:#F2F2F0;color:var(--fond);box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0}
.notif.visible{animation:fdr-pop 2.4s ease both}
.notif__icone{width:30px;height:30px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif__texte{display:flex;flex-direction:column;gap:2px}
.notif__titre{font-size:14px;font-weight:600}
.notif__detail{font-family:var(--mono);font-size:12px;color:#55554F}

/* --- 2. chiffres ------------------------------------------------------------ */
/* Les filets entre cases sont le fond du conteneur vu a travers un espace de
   1 px : le meme dessin tient en 4, 2 x 2 ou 1 colonne sans une regle de plus. */
/* Boucle design, tour 2 : plus de boite a quatre cases egales. Une ligne de
   chiffres a l'echelle du titre, separes par des filets, le libelle en mono
   comme le tableau des publications juste au-dessus. */
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--bord)}
.chiffres__case{padding:30px 24px 6px 28px;display:flex;flex-direction:column;gap:12px}
.chiffres__case:first-child{padding-left:0}
.chiffres__case + .chiffres__case{border-left:1px solid var(--bord)}
.chiffres__valeur{white-space:nowrap;font-size:clamp(44px,1.2rem + 3.6vw,84px);font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;line-height:.95}
.chiffres__libelle{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--texte2)}

/* --- 3. manifeste (section claire) ------------------------------------------ */
.manifeste{background:var(--clair);color:var(--fond)}
.manifeste__grille{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:72px;align-items:center;padding-block:120px}
.manifeste__texte{display:flex;flex-direction:column;gap:32px}
.manifeste__phrase{font-size:clamp(44px,1.2rem + 5.4vw,96px);line-height:.95;font-weight:800;letter-spacing:-.045em;font-stretch:82%}
.surligne{background:var(--accent);padding:0 .1em;border-radius:.08em}
.mot{display:inline-block}
.mot.bascule{animation:fdr-swap .55s cubic-bezier(.2,.7,.2,1) both}
.manifeste__sous{font-size:19px;line-height:1.6;color:var(--clair-texte2);max-width:540px}
.manifeste__photo img,.fondateur__photo img{width:100%;height:100%;object-fit:cover}
.manifeste__photo{aspect-ratio:520/693;border-radius:24px;overflow:hidden}

/* --- titres de section ------------------------------------------------------ */
.titre2{font-size:clamp(36px,1.4rem + 3.2vw,60px);line-height:1;font-weight:800;letter-spacing:-.03em;font-stretch:88%}
.titre2--large{max-width:900px}
/* titre suivi d'une ligne (maquette v4, temoignages : 16 px d'ecart, 17 px) */
.titre-bloc{display:flex;flex-direction:column;gap:16px}
.titre-bloc__sous{font-size:17px;line-height:1.5;color:var(--texte2)}
.titre2--760{max-width:760px}
.titre2--72{font-size:clamp(40px,1.5rem + 3.9vw,72px);line-height:.95;letter-spacing:-.035em}
.entete-section{display:flex;justify-content:space-between;align-items:flex-end;gap:64px}
.entete-section__texte{font-size:18px;line-height:1.6;color:var(--texte2);max-width:420px}
.entete-section__texte--440{max-width:440px}

/* --- 4. le probleme --------------------------------------------------------- */
.grille3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:20px;padding:34px;display:flex;flex-direction:column;gap:16px}
.carte__num{font-family:var(--mono);font-size:14px;color:var(--discret)}
.carte__titre{font-size:24px;line-height:1.2;font-weight:600}
.carte__texte{font-size:17px;line-height:1.6;color:var(--texte2)}
/* Les six situations (boucle design, tour 1) : un index editorial plutot que
   six cartes identiques en grille. Deux colonnes, un filet par ligne, le numero
   en grand ; au survol, le filet se trace en vert et le numero s'allume. Les
   lignes arrivent en fondu au defilement (site.js), jamais avec « reduire les
   animations ». */
.situations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px);border-bottom:1px solid var(--bord)}
.situation{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 24px;align-items:baseline;padding:30px 0 32px;border-top:1px solid var(--bord);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.situation::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.situation__num{min-width:2ch;font-family:var(--mono);font-size:clamp(30px,1rem + 1.5vw,44px);line-height:1;letter-spacing:-.02em;color:var(--discret);transition:color .3s ease}
.situation__titre{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.situation__texte{font-size:17px;line-height:1.6;color:var(--texte2);max-width:46ch}
@media (hover:hover){.situation:hover::before{transform:scaleX(1)}.situation:hover .situation__num{color:var(--accent)}}
.situation.a-venir{opacity:0;transform:translateY(10px)}
.conclusion{font-size:clamp(24px,1rem + 1.2vw,30px);line-height:1.3;font-weight:800;letter-spacing:-.01em;max-width:1040px}

/* --- 5. le systeme ---------------------------------------------------------- */
.systeme{padding:72px;background:var(--carte);border:1px solid var(--bord);border-radius:28px;display:flex;flex-direction:column;gap:56px}
.circuit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.etape{display:flex;flex-direction:column;gap:16px}
.etape__rail{display:flex;align-items:center;gap:10px}
.etape__noeud{width:14px;height:14px;border-radius:50%;flex-shrink:0;background:var(--fond);border:2px solid var(--bord-fort);transition:background .3s ease,border-color .3s ease}
.etape__ligne{flex-grow:1;height:2px;background:var(--bord);position:relative}
.etape__remplissage{position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent)}
.etape__icone{width:52px;height:52px;margin-top:12px;border-radius:14px;border:1px solid var(--bord);display:flex;align-items:center;justify-content:center;color:var(--discret);transition:color .3s ease,border-color .3s ease}
.etape__num{font-family:var(--mono);font-size:14px;color:var(--discret);transition:color .3s ease}
.etape__titre{font-size:24px;font-weight:600;color:var(--texte2);transition:color .3s ease}
.etape__texte{font-size:16px;line-height:1.6;color:var(--texte2)}
.etape.faite .etape__noeud,.etape.courante .etape__noeud{background:var(--accent);border-color:var(--accent)}
.etape.faite .etape__remplissage{width:100%}
.etape.courante .etape__remplissage{width:100%;animation:fdr-fill 1.9s linear both}
.etape.courante .etape__remplissage::after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px 2px rgba(200,245,59,.55)}
.etape.courante .etape__noeud{position:relative}
.etape.courante .etape__noeud::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:var(--accent);animation:fdr-ring 1.6s ease-out infinite}
.etape.faite .etape__icone,.etape.courante .etape__icone,.etape.faite .etape__num,.etape.courante .etape__num{color:var(--accent)}
.etape.courante .etape__icone{border-color:var(--accent)}
.etape.courante .etape__titre{color:var(--texte)}

/* --- 6. la ferme ------------------------------------------------------------ */
.ferme{padding:56px 48px 44px;border-radius:28px;border:1px solid var(--bord);background:var(--carte2);display:flex;flex-direction:column;gap:32px}
.ferme__telephones{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;justify-items:center}
/* Les iPhones (29 sept. 2026, a la demande de Quentin : « iPhones recents
   dessines ») : cadre fin, ilot, ecran bord a bord qui passe d'une
   publication a l'autre (Reel, Story + lien, Photo) comme un fil qu'on fait
   glisser ; la jauge d'envoi et la coche restent, posees en bas de l'ecran.
   Tout se dessine en --u, un centieme de la largeur du telephone (cqi,
   rapporte au conteneur .tel) ; sans cqi (Safari 15), --u vaut 1 px et le
   telephone 100 px. */
.tel{--u:1cqi;container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;max-width:150px;animation:fdr-float 6s ease-in-out infinite}
@supports not (width:1cqi){.tel{--u:1px;max-width:100px}}
.tel__corps{width:100%;aspect-ratio:71.6/147.6;min-height:0;padding:calc(3.2 * var(--u));border-radius:calc(18 * var(--u));background:#0B0B0C;border:calc(1.1 * var(--u)) solid #6E6E68;position:relative;display:flex;flex-direction:column}
/* la tranche et les boutons (boucle iPhones, tour 4) : a gauche le bouton
   Action et les deux volumes, a droite le bouton lateral, comme un iPhone
   recent vu de face */
.tel__boutons span,.tel__corps::after{position:absolute;width:calc(1.4 * var(--u));border-radius:calc(1 * var(--u));background:#6E6E68}
.tel__boutons span{left:calc(-2.5 * var(--u))}
.tel__boutons span:nth-child(1){top:17%;height:calc(7 * var(--u))}
.tel__boutons span:nth-child(2){top:25%;height:calc(13 * var(--u))}
.tel__boutons span:nth-child(3){top:35%;height:calc(13 * var(--u))}
.tel__corps::after{content:"";right:calc(-2.5 * var(--u));top:28%;height:calc(20 * var(--u))}
/* le modele se lit au dessin (30 sept. 2026, « mets à jour le design des
   iPhones pour correspondre au chiffre ») : les deux ont le bouton Commande
   de l'appareil photo, plus bas a droite ; l'iPhone 17 a l'ilot dynamique
   large, l'iPhone 18 un ilot reduit et des bords plus fins */
.tel__boutons span:nth-child(4){left:auto;right:calc(-2.5 * var(--u));top:52%;height:calc(9 * var(--u))}
.tel--18 .tel__corps{padding:calc(2.4 * var(--u));border-radius:calc(19 * var(--u))}
.tel--18 .tel__ecran{border-radius:calc(16.4 * var(--u))}
.tel--18 .tel__ilot{width:calc(17 * var(--u));margin-left:calc(-8.5 * var(--u))}
.tel__ecran{position:relative;flex:1 1 0;min-height:0;border-radius:calc(15 * var(--u));overflow:hidden;background:#111113}
.tel__ilot{position:absolute;z-index:3;top:calc(3.4 * var(--u));left:50%;width:calc(30 * var(--u));height:calc(8.4 * var(--u));margin-left:calc(-15 * var(--u));border-radius:99px;background:#0B0B0C}
/* la barre d'etat (boucle iPhones, tour 7) : l'heure a gauche de l'ilot, la
   batterie a droite ; elle reste en place pendant que le fil glisse dessous */
.tel__etat{position:absolute;z-index:3;left:calc(10 * var(--u));right:calc(9 * var(--u));top:calc(6.4 * var(--u));display:flex;justify-content:space-between;align-items:center}
.tel__etat span:first-child{width:calc(10 * var(--u));height:calc(2.6 * var(--u));border-radius:99px;background:#F2F2F0}
.tel__etat span:last-child{position:relative;width:calc(7.4 * var(--u));height:calc(3.6 * var(--u));border:calc(.6 * var(--u)) solid #F2F2F0;border-radius:calc(1 * var(--u));opacity:.9}
.tel__etat span:last-child::before{content:"";position:absolute;left:calc(.5 * var(--u));top:calc(.5 * var(--u));bottom:calc(.5 * var(--u));width:60%;border-radius:calc(.4 * var(--u));background:#F2F2F0}
.tel__barre{position:absolute;z-index:3;bottom:calc(2.4 * var(--u));left:50%;width:calc(36 * var(--u));height:calc(1.3 * var(--u));margin-left:calc(-18 * var(--u));border-radius:99px;background:#F2F2F0;opacity:.5}
/* quatre ecrans, le 4e reprend le 1er : on glisse de l'un a l'autre, puis
   on repart du debut sans que rien ne saute */
.tel__fil{position:absolute;left:0;right:0;top:0;height:400%;animation:fdr-glisse 12s infinite}
@keyframes fdr-glisse{
  0%,27%{transform:translateY(0);animation-timing-function:cubic-bezier(.6,0,.2,1)}
  33.3%,60.3%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.6,0,.2,1)}
  66.6%,93.6%{transform:translateY(-50%);animation-timing-function:cubic-bezier(.6,0,.2,1)}
  100%{transform:translateY(-75%)}
}
/* boucle iPhones, tour 5 : chaque telephone a sa cadence (10,8 a 13,2 s) et
   son decalage ; ils ne glissent jamais ensemble, comme six mains differentes */
.tel:nth-child(1) .tel__fil{animation-duration:11.4s;animation-delay:-1.3s}
.tel:nth-child(2) .tel__fil{animation-duration:12.6s;animation-delay:-5.1s}
.tel:nth-child(3) .tel__fil{animation-duration:10.8s;animation-delay:-2.7s}
.tel:nth-child(4) .tel__fil{animation-duration:13.2s;animation-delay:-8.4s}
.tel:nth-child(5) .tel__fil{animation-duration:12s;animation-delay:-4.2s}
.tel:nth-child(6) .tel__fil{animation-duration:11.8s;animation-delay:-10.6s}
/* Les ecrans (29 sept. 2026, « ça fait très slop ») : des publications
   typographiques, comme celles des comptes d'entreprise, en Archivo serre
   comme les titres du site ; le compte en JetBrains Mono. Reel sombre, Story
   verte, diapositive de carrousel claire. */
.vue{position:relative;height:25%;overflow:hidden}
.vue svg{display:block;width:calc(7.4 * var(--u));height:calc(7.4 * var(--u));color:#F2F2F0}
.vue__texte{display:block;font-weight:800;font-stretch:88%;letter-spacing:-.035em;line-height:1;text-wrap:balance}
.vue__compte{display:block;font-family:var(--mono);font-size:calc(3.6 * var(--u));line-height:1;letter-spacing:0;color:#F2F2F0;white-space:nowrap}
/* Reel : l'accroche en blanc, le mot en vert, les icones a droite */
.vue--reel{background:#141416}
.vue--reel .vue__texte{position:absolute;left:calc(7 * var(--u));right:calc(9 * var(--u));top:30%;font-size:calc(11 * var(--u));color:#F2F2F0}
.vue--reel .vue__mot{color:var(--accent)}
.vue__rail{position:absolute;right:calc(5 * var(--u));bottom:calc(28 * var(--u));display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.vue__compte--bas{position:absolute;left:calc(7 * var(--u));bottom:calc(21 * var(--u))}
/* Story : fond gris, le mot surligne en vert, l'autocollant de lien vert
   (pas de fond vert : la barre d'etat et la jauge verte y disparaissaient) */
.vue--story{background:#2A2A2C}
.vue__segments{position:absolute;left:calc(6 * var(--u));right:calc(6 * var(--u));top:calc(14.5 * var(--u));display:flex;gap:calc(1.6 * var(--u))}
.vue__segments span{flex:1;height:calc(.9 * var(--u));border-radius:99px;background:#F2F2F0;opacity:.3}
.vue__segments span:first-child{opacity:1}
.vue__compte--haut{position:absolute;left:calc(6 * var(--u));top:calc(19 * var(--u))}
.vue--story .vue__texte{position:absolute;left:calc(7 * var(--u));right:calc(7 * var(--u));top:34%;font-size:calc(11.5 * var(--u));color:#F2F2F0}
.vue--story .vue__mot{background:var(--accent);color:#0B0B0C;padding:0 calc(1 * var(--u));box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vue__lien{position:absolute;left:calc(7 * var(--u));top:70%;display:flex;align-items:center;gap:calc(2 * var(--u));padding:calc(2.4 * var(--u)) calc(3.4 * var(--u));border-radius:calc(2.4 * var(--u));background:var(--accent)}
.vue__lien svg{width:calc(5.4 * var(--u));height:calc(5.4 * var(--u));color:#0B0B0C}
.vue__lien span{font-family:var(--mono);font-size:calc(3.6 * var(--u));line-height:1;color:#0B0B0C;white-space:nowrap}
/* Photo : une diapositive de carrousel claire, le mot surligne en vert */
.vue--photo{background:#0B0B0C;display:flex;flex-direction:column;gap:calc(3 * var(--u));padding:calc(17 * var(--u)) 0 0}
.vue__compte--post{padding:0 calc(5 * var(--u))}
.vue__diapo{display:flex;align-items:center;aspect-ratio:4/5;padding:0 calc(7 * var(--u));background:#F2F2F0}
.vue--photo .vue__texte{font-size:calc(10 * var(--u));color:#0B0B0C}
.vue--photo .vue__mot{background:var(--accent);padding:0 calc(1 * var(--u));box-decoration-break:clone;-webkit-box-decoration-break:clone}
.vue__points{display:flex;justify-content:center;gap:calc(1.4 * var(--u));margin-top:calc(-1 * var(--u))}
.vue__points span{width:calc(1.6 * var(--u));height:calc(1.6 * var(--u));border-radius:50%;background:#6E6E68}
.vue__points span:first-child{background:var(--accent)}
.vue__actions{display:flex;gap:calc(4 * var(--u));padding:calc(1 * var(--u)) calc(5 * var(--u))}
/* les trois derniers : diapositive noire, Reel accroche plus bas */
.tel:nth-child(n+4) .vue__diapo{background:#141416;border-top:1px solid #2A2A2C;border-bottom:1px solid #2A2A2C}
.tel:nth-child(n+4) .vue--photo .vue__texte{color:#F2F2F0}
.tel:nth-child(n+4) .vue--photo .vue__mot{background:none;color:var(--accent);padding:0}
.tel:nth-child(n+4) .vue--reel .vue__texte{top:42%}
.tel__envoi{position:absolute;z-index:3;left:calc(6 * var(--u));right:calc(6 * var(--u));bottom:calc(8 * var(--u));display:flex;align-items:center;gap:calc(4 * var(--u))}
.tel__jauge{flex-grow:1;height:calc(2.2 * var(--u));min-height:2px;border-radius:99px;background:#2A2A2C;overflow:hidden}
.tel__jauge span{display:block;height:100%;width:100%;background:var(--accent);animation:fdr-upload 4.2s ease-in-out infinite}
.tel__ok{width:calc(9 * var(--u));height:calc(9 * var(--u));border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:fdr-done 4.2s ease-in-out infinite}
.tel__ok svg{width:62%;height:62%}
.tel__nom{font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--texte2);text-align:center;white-space:nowrap}
.tel:nth-child(1){animation-delay:0s}.tel:nth-child(2){animation-delay:.45s}.tel:nth-child(3){animation-delay:.9s}.tel:nth-child(4){animation-delay:1.35s}.tel:nth-child(5){animation-delay:1.8s}.tel:nth-child(6){animation-delay:2.25s}
.tel:nth-child(2) .tel__jauge span,.tel:nth-child(2) .tel__ok{animation-delay:.7s}
.tel:nth-child(3) .tel__jauge span,.tel:nth-child(3) .tel__ok{animation-delay:1.4s}
.tel:nth-child(4) .tel__jauge span,.tel:nth-child(4) .tel__ok{animation-delay:2.1s}
.tel:nth-child(5) .tel__jauge span,.tel:nth-child(5) .tel__ok{animation-delay:2.8s}
.tel:nth-child(6) .tel__jauge span,.tel:nth-child(6) .tel__ok{animation-delay:3.5s}
.ferme__forces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:32px;border-top:1px solid var(--bord)}
.force{display:flex;flex-direction:column;gap:10px}
.force__titre{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.losange{width:10px;height:10px;border-radius:3px;background:var(--accent);transform:rotate(45deg);flex-shrink:0}
.force__texte{font-size:15px;line-height:1.6;color:var(--texte2)}


/* --- 8. temoignages --------------------------------------------------------- */
.temoins{display:grid;gap:14px}
.temoins--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.temoins--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;width:100%;max-width:1040px}
.temoin{display:flex;flex-direction:column;gap:14px}
@media (min-width:640px){.temoin{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:14px;align-content:start}}
.temoin__media{position:relative}
.temoin__bouton{position:relative;display:block;width:100%;height:346px;padding:0;border-radius:16px;overflow:hidden;border:1px solid var(--bord);background:var(--carte);cursor:pointer;text-align:left}
.temoins--3 .temoin__bouton{height:440px;border-radius:18px}
.temoin__bouton picture,.temoin__bouton img{position:absolute;inset:0;width:100%;height:100%}
.temoin__bouton img{object-fit:cover}
.temoin__degrade{position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(to top,rgba(11,11,12,.9),rgba(11,11,12,0))}
.temoins--3 .temoin__degrade{height:160px}
.temoin__pastille{position:absolute;left:12px;top:12px;pointer-events:none;padding:5px 9px;border-radius:7px;background:rgba(11,11,12,.8);font-family:var(--mono);font-size:11px;color:var(--texte)}
.temoins--3 .temoin__pastille{left:14px;top:14px;padding:6px 10px;border-radius:8px;font-size:12px}
.temoin__lire{position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;transition:transform .2s ease}
.temoin__lire svg{margin-left:2px}
.temoins--3 .temoin__lire{left:16px;bottom:16px;width:52px;height:52px}
@media (hover:hover){.temoin__bouton:hover .temoin__lire{transform:scale(1.08)}}
.temoin__citation{font-size:15px;line-height:1.5;font-weight:600}
.temoins--3 .temoin__citation{font-size:17px}
.temoin__nom{display:flex;flex-direction:column;gap:2px;font-size:14px}
.temoin__nom>span:first-child{font-weight:600}
.temoin__sous{font-family:var(--mono);font-size:11px;color:var(--texte2)}
.temoins--3 .temoin__nom{font-size:15px;gap:3px}
.temoins--3 .temoin__sous{font-size:12px}

.visionneuse{width:min(92vw,480px);max-height:92vh;padding:0;border:1px solid var(--bord);border-radius:18px;background:var(--fond);color:var(--texte)}
.visionneuse::backdrop{background:rgba(0,0,0,.82)}
.visionneuse__entete{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 12px 12px 18px;border-bottom:1px solid var(--bord)}
.visionneuse__titre{font-size:15px;font-weight:600}
.visionneuse__fermer{width:44px;height:44px;border-radius:10px;border:1px solid var(--bord-fort);background:none;color:var(--texte);display:flex;align-items:center;justify-content:center;cursor:pointer}
.visionneuse video{display:block;width:100%;aspect-ratio:9/16;max-height:calc(92vh - 70px);object-fit:contain;background:#000}

/* --- 9. comparatif ---------------------------------------------------------- */
.comparatif{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--bord);border-radius:20px;overflow:hidden;table-layout:fixed}
.comparatif th,.comparatif td{padding:22px 26px;vertical-align:top;text-align:left;font-weight:400}
.comparatif thead th{font-size:18px;font-weight:600;color:var(--texte2);border-left:1px solid var(--bord)}
.comparatif thead td{width:240px}
.comparatif thead th.comparatif__nous{background:var(--accent);color:var(--fond);font-weight:800;border-left:none}
.comparatif thead th.comparatif__nous svg{display:inline-block;vertical-align:-3px;margin-right:10px}
.comparatif tbody th{font-family:var(--mono);font-size:13px;color:var(--discret);text-transform:uppercase;border-top:1px solid var(--bord)}
.comparatif tbody td{font-size:16px;line-height:1.5;color:var(--texte2);border-top:1px solid var(--bord);border-left:1px solid var(--bord)}
.comparatif tbody td.comparatif__nous{background:#15170F;color:var(--texte);font-weight:600;border-left:none}
.comparatif__coche{display:flex;gap:10px;align-items:flex-start}
.comparatif__coche svg{flex-shrink:0;margin-top:2px}

/* --- 10. fondateur ---------------------------------------------------------- */
.fondateur{display:grid;grid-template-columns:520px minmax(0,1fr);gap:72px;align-items:center}
.fondateur__photo{height:660px;border-radius:24px;overflow:hidden;border:1px solid var(--bord);background:var(--carte)}
.fondateur__photo img{object-position:center 35%}
.fondateur__texte{display:flex;flex-direction:column;gap:28px}
.fondateur__sous{font-size:18px;line-height:1.65;color:var(--texte2);max-width:620px}
/* Boucle design, tour 3 : les quatre preuves du fondateur dans la meme langue
   que les chiffres du haut (tour 2) : plus de cases, des filets, la valeur en
   grand, le libelle en mono. */
.faits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--bord)}
.fait{padding:24px 20px 22px 24px;display:flex;flex-direction:column;gap:12px;border-bottom:1px solid var(--bord)}
.fait:nth-child(odd){padding-left:0}
.fait:nth-child(even){border-left:1px solid var(--bord)}
.fait__valeur{font-size:clamp(36px,1rem + 2.4vw,54px);font-weight:800;letter-spacing:-.04em;font-stretch:88%;line-height:1}
.fait__libelle{font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--texte2)}

/* --- 11. offre -------------------------------------------------------------- */
.offre{border:1px solid var(--bord);border-radius:28px;padding:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;background:var(--carte2)}
.offre__texte{display:flex;flex-direction:column;gap:24px}
.offre__sous{font-size:19px;line-height:1.6;color:var(--texte2)}
.offre__bouton{align-self:flex-start}
.offre__note{font-size:15px;color:var(--texte2);text-wrap:pretty}
.inclus{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.inclus li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--bord);font-size:18px;line-height:1.5}
.inclus svg{flex-shrink:0;margin-top:2px}
.lien-carte{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 36px;border-radius:20px;border:1px solid var(--bord);color:var(--texte);text-decoration:none}
.lien-carte:hover{color:var(--texte)}
.lien-carte__texte{font-size:18px}
.lien-carte__texte strong{font-weight:600}
/* > : l'insecable de « vous-même ? », dans le gras, garde la couleur du gras */
.lien-carte__texte>span{color:var(--texte2)}
.lien-carte__action{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--accent);white-space:nowrap}

/* --- 12. pour qui ----------------------------------------------------------- */
/* Boucle design, tour 5 : plus de deux cartes ni de signes en pastille. Deux
   colonnes ouvertes separees par un filet, chaque point sur sa ligne comme la
   liste de l'offre ; le + en vert et le petit tiret en gris, en mono. */
.pour-qui{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pour{padding-right:clamp(24px,4vw,64px);display:flex;flex-direction:column;gap:20px}
.pour--non{padding:0 0 0 clamp(24px,4vw,64px);border-left:1px solid var(--bord)}
.pour__titre{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pour--non .pour__titre{color:var(--texte2)}
.pour__liste{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.pour__liste li{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--bord);font-size:18px;line-height:1.4}
.pour--non .pour__liste li{color:var(--texte2)}
.pour__signe{width:1ch;flex-shrink:0;font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent)}
.pour--non .pour__signe{font-weight:400;color:var(--discret)}

/* --- 13. deroule ------------------------------------------------------------ */
/* Les 4 etapes (boucle design, tour 4) : plus de cartes ni de ronds a fleche,
   une frise en filets, comme les chiffres (tour 2) et les preuves (tour 3).
   Quand elle arrive a l'ecran, le filet du haut se trace en vert d'une etape
   a l'autre, a vitesse constante, puis le texte suit : l'ordre se lit sans
   fleche. 4 colonnes, 2 x 2 en tablette, l'une sous l'autre en mobile. */
.deroule{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pas{--d:0s;position:relative;padding:32px 24px 6px 28px;border-top:1px solid var(--bord);display:flex;flex-direction:column;gap:14px}
.pas:first-child{padding-left:0}
.pas + .pas{border-left:1px solid var(--bord)}
.pas::before{content:"";position:absolute;left:-1px;right:0;top:-1px;height:2px;background:var(--accent);transform-origin:left;transition:transform .2s linear var(--d)}
.pas:first-child::before{left:0}
.pas > *{transition:opacity .35s ease calc(var(--d) + .04s),transform .35s cubic-bezier(.2,.7,.2,1) calc(var(--d) + .04s)}
.pas:nth-child(2){--d:.2s}
.pas:nth-child(3){--d:.4s}
.pas:nth-child(4){--d:.6s}
.pas.a-venir::before{transform:scaleX(0)}
.pas.a-venir > *{opacity:0;transform:translateY(8px)}
.pas__num{font-size:64px;font-weight:800;line-height:1;color:var(--accent);font-stretch:88%}
.pas__titre{font-size:22px;font-weight:600;line-height:1.25}
.pas__texte{font-size:16px;line-height:1.6;color:var(--texte2)}

/* --- 14. FAQ ---------------------------------------------------------------- */
.faq{display:grid;grid-template-columns:380px minmax(0,1fr);gap:80px}
.faq__liste{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.question{border-bottom:1px solid var(--bord)}
.question__q{min-height:76px;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:20px;font-weight:600;line-height:1.35;cursor:pointer;list-style:none}
.question__q::-webkit-details-marker{display:none}
.question__plus{position:relative;flex-shrink:0;width:32px;height:32px;border-radius:8px;border:1px solid var(--bord-fort);color:var(--accent);transition:border-color .25s ease}
.question__plus::before,.question__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;border-radius:1px;background:currentColor;transition:transform .25s ease}
.question__plus::after{transform:rotate(90deg)}
.question[open] .question__plus{border-color:var(--accent)}
.question[open] .question__plus::before{transform:rotate(45deg)}
.question[open] .question__plus::after{transform:rotate(135deg)}
.question__r{margin:0 0 26px;font-size:16px;line-height:1.6;color:var(--texte2);max-width:680px}
.question[open] .question__r{animation:fdr-up .4s cubic-bezier(.2,.7,.2,1) both}

/* --- 15. appel final -------------------------------------------------------- */
.appel-final{margin-bottom:96px}
.appel{padding:88px;border-radius:28px;background-color:var(--accent);color:var(--fond);display:flex;justify-content:space-between;align-items:center;gap:64px}
.appel__texte{display:flex;flex-direction:column;gap:18px}
.appel .titre2{max-width:760px}
.appel__sous{font-size:19px;line-height:1.5}
.appel .bouton{flex-shrink:0;font-size:18px;padding:0 34px}

/* --- pied de page ----------------------------------------------------------- */
.pied{border-top:1px solid var(--bord-fin);font-size:14px;color:var(--texte2);overflow:hidden}
.pied__int{display:flex;flex-direction:column;gap:56px;padding-top:44px}
.pied--simple .pied__int{gap:16px;padding-block:36px 44px}
.pied__haut{display:flex;flex-direction:column;gap:22px}
.pied--simple .pied__haut{gap:16px}
.pied__ligne{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.pied__editeur{display:flex;flex-direction:column;gap:6px;line-height:1.5}
.pied__liens{display:flex;flex-wrap:wrap;gap:12px 28px}
.pied__liens a{color:var(--texte2)}
.pied__liens a:hover{color:var(--texte)}
.pied__mentions{display:flex;flex-direction:column;gap:8px;max-width:980px;line-height:1.6;color:var(--discret)}
/* Le grand logo du pied est un pur decor, cache aux lecteurs d'ecran : son
   texte vit donc dans la feuille de style et non dans la page. Dans la page,
   un gris a 1,1:1 sur le noir etait releve comme texte illisible. */
.pied__logo{font-size:clamp(40px,11.2vw,172px);line-height:.8;font-weight:800;letter-spacing:-.045em;font-stretch:80%;white-space:nowrap;color:#19191C;margin-bottom:-.035em}
.pied__logo::before{content:"FAISEUR DE ROI"}
.pied__logo::after{content:".";color:var(--accent)}
/* Boucle design, tour 8 (accueil seulement) : le grand logo prend toute la
   largeur de la colonne, d'un bord a l'autre, au lieu de s'arreter aux quatre
   cinquiemes. Il mesure 6,40 fois sa taille de police : 100 / 6,4 = 15,6 cqi,
   un peu moins pour la marge d'arrondi. Sans cqi, la taille d'avant. */
@supports (width:1cqi){
  [data-page="accueil"] .pied__int{container-type:inline-size}
  [data-page="accueil"] .pied__logo{font-size:15.55cqi}
}

/* --- page video (formation) ------------------------------------------------- */
/* Premier ecran, meme regle que l'accueil : sur un 1280 x 720, le bouton
   lecture doit se voir sans defiler. Marge et titre suivent aussi la hauteur
   de l'ecran ; a 1440 x 900, valeurs de la maquette. */
.tunnel__colonne{display:flex;flex-direction:column;align-items:center;gap:28px;padding-block:min(80px,9vh) 112px;text-align:center}
.tunnel__titre{font-size:min(clamp(40px,1.2rem + 3.9vw,72px),8.5vh);line-height:1;font-weight:800;letter-spacing:-.035em;font-stretch:86%;max-width:1248px}
.tunnel__titre>span{display:block}
.tunnel__sous{font-size:clamp(18px,1rem + .45vw,22px);line-height:1.5;color:var(--texte2);max-width:940px}
.tunnel__etape{display:flex;flex-direction:column;gap:16px;width:100%}
.tunnel__etape--video{max-width:1040px;margin-top:16px;text-align:left}
.tunnel__etape--appel{align-items:center;gap:14px;margin-top:24px}
.tunnel__consigne{font-size:18px;font-weight:700;line-height:1.3}
.tunnel__note{font-size:15px;color:var(--texte2)}
.lecteur{position:relative;width:100%;aspect-ratio:16/9;border-radius:22px;border:1px solid var(--bord);background:var(--carte2);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55)}
.lecteur>picture img{position:absolute;right:0;top:0;width:42.3%;height:100%;object-fit:cover}
.lecteur__fondu{position:absolute;right:30.8%;top:0;width:11.5%;height:100%;background:linear-gradient(to right,var(--carte2),rgba(17,17,19,0))}
.lecteur__bas-fondu{position:absolute;left:0;right:0;bottom:0;height:20.5%;background:linear-gradient(to top,rgba(11,11,12,.85),rgba(11,11,12,0))}
.lecteur__avant{position:absolute;left:0;top:0;bottom:0;width:59.6%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:28px;padding:0 5.4%}
.lecteur__lire{position:relative;width:104px;height:104px;border-radius:50%;border:none;background:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lecteur__lire svg{position:relative;margin-left:4px}
.respire{animation:fdf-breathe 2.4s ease-in-out infinite}
.respire::before{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:fdf-halo 2.4s ease-out infinite}
.lecteur__titre{font-size:clamp(22px,.6rem + 2.3vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.025em;font-stretch:88%;max-width:440px}
.lecteur__barre{position:absolute;left:22px;right:22px;bottom:20px;display:flex;flex-direction:column;gap:10px}
.lecteur__piste{position:relative;height:6px;border-radius:3px;background:rgba(242,242,240,.18)}
.lecteur__progres{position:absolute;left:0;top:0;height:6px;width:0;border-radius:3px;background:var(--accent)}
.lecteur__temps{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:#D6D6D0}
.lecteur video,.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.tunnel-temoins{display:flex;flex-direction:column;align-items:center;gap:40px;padding-bottom:112px}
.tunnel-temoins__titre{font-size:clamp(30px,1.2rem + 1.6vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.02em;font-stretch:90%;text-align:center}
.tunnel-temoins .bouton{margin-top:16px}

/* --- reservation ------------------------------------------------------------ */
.page-reservation main{flex-grow:1}
/* Premier ecran : titre, explication, creneaux et champs visibles sur un
   1280 x 720 ; valeurs de la maquette a 1440 x 900. */
.reservation{width:100%;max-width:calc(820px + 2 * var(--gouttiere));margin-inline:auto;padding:min(64px,7vh) var(--gouttiere) 96px;display:flex;flex-direction:column;gap:min(48px,5.4vh)}
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.etapes__item{display:flex;flex-direction:column;gap:12px}
.etapes__barre{height:4px;border-radius:2px;background:var(--bord);transition:background .3s ease}
.etapes__texte{display:flex;align-items:baseline;gap:10px;font-size:15px;color:var(--discret)}
.etapes__num{font-family:var(--mono);font-size:13px;color:var(--discret)}
.etapes__item.faite .etapes__barre,.etapes__item.courante .etapes__barre{background:var(--accent)}
.etapes__item.faite .etapes__num,.etapes__item.courante .etapes__num{color:var(--accent)}
.etapes__item.faite .etapes__texte{color:var(--texte2)}
.etapes__item.courante .etapes__texte{color:var(--texte)}
.stade{display:flex;flex-direction:column;gap:min(36px,4vh);animation:fdr-entre .25s cubic-bezier(.2,.7,.2,1) both}
.stade[hidden]{display:none}
form.stade[data-stade="questions"]{gap:30px}
.stade__entete{display:flex;flex-direction:column;gap:14px}
.titre-reservation{font-size:min(clamp(38px,1.3rem + 2.7vw,56px),7vh);line-height:1;font-weight:800;letter-spacing:-.03em;font-stretch:88%}
.titre-reservation:focus{outline:none}
.stade__sous{font-size:18px;line-height:1.6;color:var(--texte2);max-width:760px}
.stade__sous strong{color:var(--texte);font-weight:600}
.stade__erreur{padding:14px 18px;border-radius:12px;border:1px solid #FF5A4E;color:var(--texte);font-size:15px;line-height:1.5}
.stade__erreur[hidden]{display:none}
.agenda{margin:0;padding:0;border:0;min-width:0}
.agenda__jours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.agenda__jour{display:flex;flex-direction:column;gap:10px}
.agenda__date{font-family:var(--mono);font-size:13px;color:var(--texte2)}
/* Agenda automatique : une rangee de jours, puis les heures du jour choisi.
   Les heures sont celles du visiteur ; les pastilles reprennent celles de la
   maquette (mono, 52 px, accent une fois choisies). */
.agenda--auto{display:flex;flex-direction:column;gap:20px}
.agenda__heures{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.agenda__heures:empty{display:none}
.agenda__etat{font-size:16px;line-height:1.6;color:var(--texte2)}
.agenda__etat[hidden]{display:none}
@keyframes fdr-lueur{from{opacity:.45}to{opacity:1}}
.puce-fantome{display:block;height:52px;min-width:92px;border-radius:12px;background:#161618;border:1px solid var(--bord-fin);animation:fdr-lueur .9s ease-in-out infinite alternate}
.grille-champs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.champ{display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--texte)}
.champ__saisie{min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--bord);background:var(--carte2);color:var(--texte);font-family:inherit;font-size:16px;transition:border-color .2s ease;width:100%}
textarea.champ__saisie{padding:14px 16px;resize:vertical;min-height:84px;line-height:1.5}
.champ__saisie:focus{outline:none;border-color:var(--accent)}
.champ__saisie:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* erreur sous le champ : le filet et le bord reprennent le rouge des erreurs
   d'envoi (.stade__erreur), le texte reste lisible sur les deux fonds */
.champ__saisie[aria-invalid="true"]{border-color:#FF5A4E}
.champ__erreur{padding-left:10px;border-left:2px solid #FF5A4E;font-size:14px;line-height:1.4;color:var(--texte)}
/* l'heure choisie, rappelee au-dessus des champs */
.agenda__choix{font-size:17px;line-height:1.5;font-weight:600}
.agenda__choix[hidden]{display:none}
/* questionnaire, une question par ecran : la question est le texte principal */
.parcours{display:flex;align-items:center;gap:14px}
.parcours[hidden],.ecran[hidden],.parcours__nav [hidden]{display:none}
.parcours__barre{flex-grow:1;height:4px;border-radius:2px;background:var(--bord);overflow:hidden}
.parcours__barre span{display:block;height:100%;width:0;background:var(--accent);transition:width .3s ease}
.parcours__numero{min-width:3.5em;font-family:var(--mono);font-size:13px;color:var(--texte2);text-align:right}
.ecran:focus{outline:none}
.ecran .choix__question,.ecran>.champ{font-size:22px;line-height:1.3;font-weight:600;color:var(--texte)}
.ecran .choix__question{margin-bottom:18px}
.ecran>.champ{gap:18px}
.parcours__nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
/* Les pastilles de choix sont de vrais boutons radio : un groupe, une reponse,
   les fleches du clavier pour passer d'une option a l'autre, et le formulaire
   s'envoie sans script. Le rond est cache, le libelle en tient lieu. */
.choix{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.choix__question{padding:0;font-size:14px;color:var(--texte2);margin-bottom:10px}
.choix__options{display:grid;gap:10px}
.choix--2 .choix__options{grid-template-columns:repeat(2,minmax(0,1fr))}
.choix--3 .choix__options{grid-template-columns:repeat(3,minmax(0,1fr))}
.choix--4 .choix__options{grid-template-columns:repeat(4,minmax(0,1fr))}
.puce{position:relative;display:flex}
.puce input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.puce span{flex-grow:1;display:flex;align-items:center;justify-content:center;min-height:48px;padding:6px 12px;border-radius:10px;border:1px solid var(--bord);background:var(--carte2);color:var(--texte);font-size:15px;line-height:1.3;text-align:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.puce--creneau span{min-height:52px;border-radius:12px;font-family:var(--mono);font-size:16px}
@media (hover:hover){.puce span:hover{border-color:#4A4A4E}}
.puce input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--fond)}
.puce input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.bouton[aria-busy="true"]{opacity:.7;cursor:progress}
.stade--fin{align-items:flex-start;gap:22px}
.stade__coche{width:64px;height:64px;border-radius:18px;background:var(--accent);display:flex;align-items:center;justify-content:center}
.stade__rdv{font-size:22px;line-height:1.4;font-weight:600;max-width:880px}

.piege{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* --- carte de reservation (d'apres les pages d'iClosed, 29 sept. 2026) ------
   Une carte compacte (~820 px), les etapes en points en haut, deux volets :
   a gauche le titre et l'explication, a droite la seule chose a faire.
   Tailles resserrees comme chez eux : titre ~24 px, texte 14-15 px,
   calendrier en chiffres (jours libres sur fond discret, choisi en vert). */
.resa-carte{border:1px solid var(--bord);border-radius:16px;background:var(--carte2);overflow:hidden}
.resa-carte .etapes{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 24px;padding:12px 20px;border-bottom:1px solid var(--bord)}
.resa-carte .etapes__item{flex-direction:row;align-items:center;gap:8px}
.resa-carte .etapes__barre{width:7px;height:7px;border-radius:50%}
.resa-carte .etapes__num{display:none}
.resa-carte .etapes__texte{font-size:13px}
/* 292 px : « Choisissez le créneau / de votre appel. » tient sur deux lignes */
.resa-carte .stade{display:grid;grid-template-columns:292px minmax(0,1fr);gap:0}
.resa-carte .stade[hidden]{display:none}
.resa-carte .stade__entete{gap:10px;padding:28px;border-right:1px solid var(--bord)}
.resa-carte .stade__corps{min-width:0;padding:28px;display:flex;flex-direction:column;gap:18px}
.resa-carte .titre-reservation{font-size:24px;line-height:1.15;letter-spacing:-.02em}
.resa-carte .stade__sous{font-size:14px;line-height:1.55}
/* confirmation et filtre : un seul message, centre dans la carte */
.resa-carte .stade--fin{display:flex;align-items:center;gap:16px;padding:48px 28px 44px;text-align:center}
.resa-carte .stade--fin>*{max-width:480px}
.resa-carte .stade--fin>.bouton{align-self:center}
/* confirmation : « Modifier » et « Annuler » cote a cote ; l'annulation demande une seconde fois */
.fin__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px}
.fin__actions[hidden],.fin__confirmer[hidden]{display:none}
.fin__confirmer{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.fin__confirmer .bouton{align-self:center}
.resa-carte .bouton--contour,.resa-carte .bouton--contour:hover{background:transparent;color:var(--texte);border-color:var(--bord-fort)}
/* coordonnees d'abord (d'apres iClosed) : la mention sous le bouton, puis le
   rappel des coordonnees au-dessus du calendrier, avec « Modifier » */
.agenda__note{font-size:13px;line-height:1.5;color:var(--texte2);text-align:center}
.agenda__qui{font-size:14px;line-height:1.5;color:var(--texte2);overflow-wrap:anywhere}
.agenda__qui[hidden]{display:none}
.resa-carte .stade__coche{width:52px;height:52px;border-radius:14px}
.resa-carte .stade__rdv{font-size:18px}
.resa-carte .grille-champs{grid-template-columns:minmax(0,1fr);gap:14px}
.resa-carte .champ{gap:6px;font-size:14px}
.resa-carte .champ__saisie{min-height:46px;border-radius:10px;background:transparent}
.resa-carte textarea.champ__saisie{min-height:96px}
.resa-carte .bouton--formulaire{min-height:50px;padding:0 22px;border-radius:10px;font-size:16px}
.resa-carte .puce span{min-height:44px;border-radius:10px;background:transparent;font-size:14px}
.resa-carte .puce input:checked+span{background:var(--accent)}
.resa-carte .stade__erreur{padding:10px 14px;font-size:14px}
.resa-carte .agenda__choix{font-size:15px}
/* le creneau choisi et « Modifier », au-dessus des champs */
.agenda__rappel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--bord);border-radius:10px}
.agenda__rappel[hidden]{display:none}
.agenda__rappel:focus:not(:focus-visible){outline:none}
.agenda__rappel .lien-bouton{flex-shrink:0}
/* un seul contour vert a la saisie, pas deux */
.resa-carte .champ__saisie:focus-visible{outline:1px solid var(--accent);outline-offset:0}
.resa-carte .ecran .choix__question,.resa-carte .ecran>.champ{font-size:18px;line-height:1.3}
.resa-carte .ecran .choix__question{margin-bottom:14px}
/* reponses a choix : une par ligne, texte a gauche ; les libelles longs
   (« Oui, et c'est rentable ») ne se coupent plus en deux */
.resa-carte .choix .choix__options{grid-template-columns:minmax(0,1fr);gap:8px}
.resa-carte .choix .puce span{justify-content:flex-start;min-height:48px;padding:10px 16px;text-align:left;font-size:15px}
.resa-carte .ecran>.champ{gap:14px}
.resa-carte .parcours{gap:12px}
.resa-carte .parcours__nav{gap:12px 20px}
.resa-carte .lien-bouton{font-size:14px}
/* l'hote et l'appel, dans le volet de gauche */
.hote{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.hote picture,.hote img{width:44px;height:44px;border-radius:50%;flex-shrink:0}
.hote img{object-fit:cover}
.hote__nom{font-size:14px;font-weight:600;color:var(--texte2)}
.infos-appel{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:14px;border-top:1px solid var(--bord);font-size:14px;font-weight:600}
/* boutons pleine largeur dans le volet d'action, « Retour » dessous */
.resa-carte .stade__corps .parcours__nav{flex-direction:column;align-items:stretch;gap:12px}
.resa-carte .stade__corps .bouton--formulaire{width:100%}
.resa-carte .stade__corps .parcours__nav .lien-bouton{align-self:center}
.volet,.ecran{animation:fdr-entre .25s cubic-bezier(.2,.7,.2,1) both}
.volet{display:flex;flex-direction:column;gap:18px}
.volet[hidden]{display:none}
/* calendrier du mois */
.calendrier{display:flex;flex-direction:column;gap:10px}
.calendrier[hidden]{display:none}
.calendrier__tete{display:flex;align-items:center;justify-content:space-between;gap:12px}
.calendrier__mois{font-size:16px;font-weight:600;text-transform:capitalize}
.calendrier__nav{display:flex;gap:6px}
.calendrier__fleche{width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:8px;border:1px solid var(--bord);background:none;color:var(--texte);cursor:pointer}
.calendrier__fleche svg{width:16px;height:16px}
.calendrier__fleche--avant svg{transform:rotate(180deg)}
.calendrier__fleche:disabled{opacity:.3;cursor:default}
.calendrier__grille{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.calendrier__jsem{padding-bottom:2px;font-family:var(--mono);font-size:11px;color:var(--discret);text-align:center}
.calendrier__ferme{display:flex;align-items:center;justify-content:center;height:40px;font-size:14px;color:var(--discret)}
.calendrier__fantome{height:40px;border-radius:8px;background:var(--bord-fin);animation:fdr-lueur .9s ease-in-out infinite alternate}
/* une rangee d'heures en attente, a la hauteur des vraies */
.agenda__heures .calendrier__fantome{height:42px}
/* La place des heures est reservee : la carte garde sa hauteur pendant le
   chargement et d'un jour a l'autre (page video : jusqu'a 16 heures, 4 rangees ;
   accueil : 5 heures, une rangee, deux sur telephone). */
.reservation[data-offre="formation"] .resa-carte .agenda__heures{min-height:192px;align-content:start}
.reservation[data-offre="vitrine"] .resa-carte .agenda__heures{min-height:42px;align-content:start}
.calendrier__auj{position:relative}
.calendrier__auj::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.resa-carte .puce--jour span{height:40px;min-height:0;padding:0;border-color:transparent;border-radius:8px;background:var(--bord-fin);font-size:14px;font-weight:700}
.resa-carte .puce--jour input:checked+span{background:var(--accent);border-color:var(--accent)}
.agenda__jour-choisi{font-size:14px;font-weight:600}
.agenda__jour-choisi::first-letter{text-transform:uppercase}
.agenda__jour-choisi[hidden]{display:none}
.resa-carte .agenda--auto{gap:14px}
/* colonnes choisies par le script selon le nombre d'heures (rangees pleines) */
.resa-carte .agenda__heures{grid-template-columns:repeat(var(--colonnes,5),minmax(0,1fr));gap:8px}
.resa-carte .puce--creneau span{min-height:42px;border-radius:8px;font-size:14px}
.reservation__sansjs{padding:18px;border:1px solid var(--bord);border-radius:12px;color:var(--texte2)}

/* --- pages legales ---------------------------------------------------------- */
.legal{width:100%;max-width:calc(760px + 2 * var(--gouttiere));margin-inline:auto;padding:min(72px,8vh) var(--gouttiere) 112px;display:flex;flex-direction:column;gap:18px}
.legal__titre{font-size:clamp(38px,1.3rem + 2.7vw,56px);line-height:1;font-weight:800;letter-spacing:-.03em;font-stretch:88%;margin-bottom:12px}
.legal h2{font-size:22px;font-weight:600;margin-top:22px}
.legal p,.legal li{font-size:17px;line-height:1.7;color:var(--texte2)}
.legal ul:not(.legal__def){list-style:disc;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.legal__def{display:flex;flex-direction:column;border-top:1px solid var(--bord)}
.legal__def li{display:flex;justify-content:space-between;gap:24px;padding:12px 0;border-bottom:1px solid var(--bord)}
.legal__def li span:last-child{color:var(--texte);text-align:right}
.legal__maj{margin-top:24px;font-size:14px!important;color:var(--discret)!important}
.introuvable{min-height:50vh;justify-content:center}
.introuvable .bouton{margin-top:12px}

/* === ordinateur peu haut (portable 1280 x 720, 1366 x 768) ================= */
/* La reservation est une page d'action : creneaux, champs ET bouton au premier
   ecran. Sur ces ecrans seulement, les respirations se resserrent ; au-dessus
   de 800 px de haut, la maquette est intacte. */
/* --- theme clair : page video, et reservation quand on en vient ------------
   Adopte le 28 sept. 2026 apres essai sur l'apercu. La vitrine reste noire :
   bandes claires puis accueil tout blanc essayes le meme jour, refuses.
   La classe est sur <html>, posee par le generateur sur la page video et
   sur sa reservation (/formation/reserver). Le vert citron ne se lit pas sur blanc
   (1,3:1) : il n'y sert plus de couleur de texte, seulement d'aplat
   (surligneur, creneau choisi, coche, fleche), les boutons passent en noir.
   Le lecteur et la visionneuse restent sombres : ce sont des ecrans.
   --fond garde l'encre noire (texte des boutons). */
.theme-clair{--texte:#0B0B0C;--texte2:#5C5C57;--discret:#6E6E68;--bord:#E4E3DE;--bord-fin:#ECEBE7;--bord-fort:#D5D4CE;--carte:#F4F3EF;--carte2:#F4F3EF}
.theme-clair body{background:#FFFFFF}
.theme-clair .lecteur,.theme-clair .visionneuse,.theme-clair .temoin__media{--texte:#F2F2F0;--texte2:#A8A8A2;--bord:#2A2A2C;--bord-fort:#3A3A3C;--carte:#141416;--carte2:#111113;color:var(--texte)}
.theme-clair :focus-visible{outline-color:var(--fond)}
.theme-clair .evitement{background:var(--fond);color:#FFFFFF}
.theme-clair .trame{background-image:radial-gradient(rgba(11,11,12,.09) 1px,transparent 1px)}
.theme-clair .bouton--accent,.theme-clair .bouton--accent:hover{background:var(--fond);color:#FFFFFF}
.theme-clair .bouton--accent svg{color:var(--accent)}
/* page video */
.theme-clair .tunnel__titre .accent{color:var(--fond);background:var(--accent);padding:0 .1em;border-radius:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.theme-clair .curseur{background:var(--fond);margin-left:0}
.theme-clair .lecteur{box-shadow:0 30px 70px rgba(11,11,12,.16)}
.theme-clair .temoin__bouton{border-color:#E4E3DE}
/* reservation */
.theme-clair .etapes__item.faite .etapes__barre,.theme-clair .etapes__item.courante .etapes__barre{background:var(--fond)}
.theme-clair .etapes__item.faite .etapes__num,.theme-clair .etapes__item.courante .etapes__num{color:var(--fond)}
.theme-clair .puce input:checked+span{border-color:var(--fond)}
.theme-clair .puce input:focus-visible+span,.theme-clair .champ__saisie:focus-visible{outline-color:var(--fond)}
.theme-clair .champ__saisie:focus{border-color:var(--fond)}
.theme-clair .puce-fantome{background:#F1F0EC}
.theme-clair .lien-bouton,.theme-clair .reservation__sansjs a{color:var(--texte)}
@media (hover:hover){.theme-clair .puce span:hover{border-color:#B9B8B2}}

@media (min-width:640px) and (max-height:800px){
  .reservation{padding-top:32px;gap:28px}
  .stade{gap:20px}
  .stade__entete{gap:10px}
  .titre-reservation{font-size:44px}
}

/* === tablette et petit bureau (moins de 1200 px) ============================ */
@media (max-width:1199px){
  .heros__grille{gap:48px;padding-block:min(88px,9vh) 80px}
  /* colonnes a la taille de leur contenu : a 1024 px, le compte se tronquait */
  .journal__ligne{grid-template-columns:50px minmax(0,1fr) auto auto;gap:12px}
  .notif{left:-20px}
  .manifeste__grille{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:56px;padding-block:96px}
  .systeme{padding:56px}
  .circuit{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .ferme__telephones{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
  .temoins--6{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 14px}
  .fondateur{grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:56px}
  .fondateur__photo{height:auto;aspect-ratio:520/660}
  .offre{padding:48px;gap:48px}
  .faq{grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:56px}
  .deroule{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .pas:nth-child(3){border-left:0;padding-left:0;--d:0s}
  .pas:nth-child(3)::before{left:0}
  .pas:nth-child(4){--d:.2s}
  .appel{padding:64px;gap:48px}
  .nav{gap:24px}
}

/* === tablette (moins de 900 px) ============================================= */
@media (max-width:899px){
  .nav a:not(.bouton){display:none}
  .heros__grille{grid-template-columns:minmax(0,1fr);gap:64px;padding-block:64px 72px}
  .heros__visuel{max-width:600px;width:100%;margin-inline:auto}
  .notif{left:16px}
  .chiffres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chiffres__case:nth-child(3){border-left:0;padding-left:0}
  .chiffres__case:nth-child(n+3){border-top:1px solid var(--bord);margin-top:24px}
  .manifeste__grille{grid-template-columns:minmax(0,1fr);gap:48px;padding-block:80px}
  .manifeste__photo{max-width:560px}
  .entete-section{flex-direction:column;align-items:flex-start;gap:20px}
  .entete-section__texte{max-width:640px}
  .grille3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comparatif thead td{width:180px}
  .comparatif th,.comparatif td{padding:18px 18px}
  .fondateur{grid-template-columns:minmax(0,1fr);gap:40px}
  .fondateur__photo{order:2;max-width:560px;width:100%}
  .offre{grid-template-columns:minmax(0,1fr)}
  .lien-carte{flex-direction:column;align-items:flex-start;padding:24px 28px}
  .lien-carte__action{white-space:normal}
  .pour-qui{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .pour{padding-right:0}
  .pour--non{padding-left:0;border-left:0}
  .faq{grid-template-columns:minmax(0,1fr);gap:32px}
  .appel{flex-direction:column;align-items:flex-start;padding:56px 44px}
  .pied__ligne{flex-direction:column;gap:20px}
  .lecteur__avant{gap:18px}
  .lecteur__lire{width:80px;height:80px}
  .lecteur__lire svg{width:28px;height:28px}
}

/* carte de reservation : une colonne sous 720 px, le titre au-dessus de l'action */
@media (max-width:719px){
  .resa-carte .stade{grid-template-columns:minmax(0,1fr)}
  .resa-carte .stade__entete{border-right:0;padding-bottom:0}
}

/* === mobile (moins de 640 px) =============================================== */
@media (max-width:639px){
  /* l'une sous l'autre : le numero a gauche, comme les situations (tour 1) ;
     chaque filet se trace quand son etape arrive */
  .deroule{grid-template-columns:minmax(0,1fr);row-gap:0;border-bottom:1px solid var(--bord)}
  .pas,.pas:first-child,.pas:nth-child(3){display:grid;grid-template-columns:26px minmax(0,1fr);gap:8px 16px;align-items:baseline;padding:26px 0 28px;border-left:0}
  .pas + .pas{border-left:0}
  .pas::before,.pas:nth-child(3)::before{left:0}
  .pas:nth-child(n){--d:0s}
  .pas__titre,.pas__texte{grid-column:2}
  /* comme sur ordinateur : un menu plus bas et moins de marge au-dessus du
     titre, pour que « Reserver un appel » tienne dans les ~550 px qu'un petit
     iPhone laisse visibles sous la barre d'adresse */
  .entete__barre{padding-block:12px;gap:12px}
  .logo{font-size:18px}
  /* cibles tactiles de 44 px : le logo et les liens du pied, sans changer la
     mise en page (la marge negative rend la hauteur ajoutee) */
  a.logo{padding-block:11px;margin-block:-11px}
  .pied__liens{gap:0 28px;margin-block:-12px}
  .pied__liens a{display:inline-block;padding-block:12px}
  .temoin__pastille,.temoin__sous{font-size:12px}
  .nav .bouton{min-height:44px;padding:0 14px;font-size:14px}
  .heros__grille{padding-block:min(48px,5vh) 64px;gap:56px}
  .heros__actions .bouton{flex:1 1 100%}
  .journal{padding:20px}
  .journal__ligne{grid-template-columns:44px minmax(0,1fr) auto;gap:10px;font-size:13px;padding:11px 0}
  .journal__format{display:none}
  .notif{left:12px;bottom:-26px;padding:12px 14px}
  .chiffres__case{padding:22px 12px 4px 18px}
  .chiffres__case:nth-child(odd){padding-left:0}
  .chiffres__libelle{font-size:12px}
  .manifeste__grille{padding-block:64px;gap:40px}
  .manifeste__sous{font-size:18px}
  .manifeste__photo{border-radius:20px}
  .pile{gap:32px}
  .grille3{grid-template-columns:minmax(0,1fr);gap:14px}
  .situations{grid-template-columns:minmax(0,1fr)}
  .situation{gap:0 16px;padding:24px 0 26px}
  .situation__num{font-size:26px}
  .situation__titre{font-size:21px}
  .situation__texte{font-size:16px}
  .carte{padding:26px}
  .carte__titre{font-size:22px}
  .carte__texte{font-size:16px}
  .systeme{padding:32px 22px;border-radius:22px;gap:40px}
  /* Boucle design, tour 6 : les etapes s'empilent, le rail aussi. Il passe a
     gauche, a la verticale, du noeud d'une etape au noeud de la suivante ;
     meme remplissage vert qu'a l'horizontale, qui descend au lieu d'aller a
     droite. */
  .circuit{grid-template-columns:minmax(0,1fr);gap:0}
  .etape{display:grid;grid-template-columns:14px minmax(0,1fr);gap:14px 20px;padding-bottom:36px}
  .etape:last-child{padding-bottom:0}
  .etape > *{grid-column:2}
  .etape__rail{grid-column:1;grid-row:1 / span 4;flex-direction:column;align-self:stretch;padding-top:19px;margin-bottom:-36px}
  .etape:last-child .etape__rail{margin-bottom:0}
  .etape__ligne{width:2px;height:auto}
  .etape__remplissage{width:2px;height:0}
  .etape__icone{margin-top:0}
  .etape.faite .etape__remplissage{width:2px;height:100%}
  .etape.courante .etape__remplissage{width:2px;height:100%;animation-name:fdr-fill-v}
  .etape.courante .etape__remplissage::after{right:auto;top:auto;left:-4px;bottom:-5px}
  .ferme{padding:28px 18px 28px;border-radius:22px}
  .ferme__telephones{gap:22px 12px}
  .tel{gap:10px}
  .tel__nom{font-size:10px;white-space:normal}   /* « iPhone 18 Pro Max » passe sur deux lignes a 320 px */
  .ferme__forces{grid-template-columns:minmax(0,1fr);gap:22px}
  /* Temoignages : une rangee qui defile au doigt (brief, section 4), chaque
     carte s'arrete bien calee. Les bords de la rangee depassent jusqu'au
     bord de l'ecran pour qu'on voie qu'il y a une suite. */
  .temoins--6,.temoins--3{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gouttiere) * -1);padding-inline:var(--gouttiere);scroll-padding-inline:var(--gouttiere);scrollbar-width:none;overscroll-behavior-x:contain;max-width:none;width:auto}
  .temoins--6::-webkit-scrollbar,.temoins--3::-webkit-scrollbar{display:none}
  .temoin{flex:0 0 68%;scroll-snap-align:start}
  .temoin__bouton,.temoins--3 .temoin__bouton{height:auto;aspect-ratio:9/16}
  /* Comparatif : le tableau reste un tableau pour les lecteurs d'ecran, mais
     chaque ligne se lit comme une carte. Le nom de la colonne est repris
     devant chaque cellule. */
  .comparatif,.comparatif tbody,.comparatif tr,.comparatif th,.comparatif td{display:block;width:auto}
  .comparatif{border:0;border-radius:0;overflow:visible}
  .comparatif thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* boucle design, tour 7 : plus cinq cartes empilees, un critere par bande
     entre deux filets, comme le reste de la page ; la ligne Faiseur de Roi
     se lit par son intitule vert et sa valeur en blanc */
  .comparatif tbody{border-bottom:1px solid var(--bord)}
  .comparatif tbody tr{border-top:1px solid var(--bord);padding:20px 0 14px}
  .comparatif tbody th{border-top:0;padding:0 0 10px}
  .comparatif tbody td{border-left:0;border-top:0;padding:6px 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
  .comparatif tbody td.comparatif__nous{background:none}
  .comparatif tbody td::before{content:attr(data-l);font-size:13px;color:var(--discret)}
  .comparatif tbody td.comparatif__nous::before{color:var(--accent);font-weight:600}
  .comparatif tbody td.comparatif__nous .comparatif__coche{display:block}
  .comparatif tbody td.comparatif__nous svg{display:none}
  .fondateur__sous{font-size:17px}
  .fait{padding:20px 12px 18px 16px}
  .fait__valeur{font-size:34px}
  .fait__libelle{font-size:12px}
  .offre{padding:32px 22px;border-radius:22px;gap:36px}
  .offre__sous{font-size:18px}
  .offre__bouton{align-self:stretch}
  .inclus li{font-size:17px;padding:16px 0}
  .lien-carte{padding:22px}
  .lien-carte__texte{font-size:17px}
  .pour__titre{font-size:26px}
  .pour__liste li{font-size:17px}
  .pas__num{font-size:44px}
  .question__q{font-size:18px;min-height:64px;padding:20px 0}
  .appel{padding:40px 24px;border-radius:22px;gap:32px}
  .appel .bouton{align-self:stretch}
  .appel__sous{font-size:18px}
  .appel-final{margin-bottom:64px}
  .pied__int{gap:40px;padding-top:36px}
  /* page video */
  .tunnel__colonne{padding-block:min(48px,4vh) 72px;gap:min(22px,2.4vh)}
  .tunnel__titre{font-size:min(40px,5.4vh)}
  .tunnel__etape--video{margin-top:8px}
  .tunnel__etape--appel{margin-top:12px}
  .tunnel__etape--appel .bouton,.tunnel-temoins .bouton{align-self:stretch}
  .lecteur{border-radius:16px}
  /* Le lecteur garde son format 16/9, celui de la video. Sous 560 px le titre
     incruste ne tient plus a cote de la photo : il s'efface, le titre de la
     page juste au-dessus dit deja la meme chose. */
  .lecteur__titre{display:none}
  .lecteur__avant{width:100%;align-items:center}
  .lecteur>picture img{width:62%}
  .lecteur__fondu{right:50%;width:14%}
  .lecteur__lire{width:68px;height:68px}
  .lecteur__lire svg{width:24px;height:24px}
  .lecteur__barre{left:14px;right:14px;bottom:12px;gap:6px}
  .lecteur__piste{height:4px}
  .lecteur__progres{height:4px}
  .lecteur__temps{font-size:11px}
  .tunnel-temoins{gap:28px;padding-bottom:72px}
  /* reservation */
  .reservation{padding:min(40px,3.6vh) var(--gouttiere) 72px;gap:min(36px,3.6vh)}
  /* la carte prend toute la largeur : des jours de 44 px et plus au doigt */
  .page-reservation .reservation{padding-inline:0;padding-top:0}
  .resa-carte{border-radius:0;border-inline:0;border-top:0}
  .resa-carte .etapes{gap:6px 16px;padding:12px 16px}
  .resa-carte .etapes__texte{font-size:12px}
  .resa-carte .stade__entete{padding:20px 16px 0}
  .resa-carte .stade__corps{padding:18px 16px 28px}
  .resa-carte .stade--fin{padding:28px 16px}
  .resa-carte .titre-reservation{font-size:22px}
  .hote{margin-bottom:4px}
  .hote picture,.hote img{width:36px;height:36px}
  .infos-appel{flex-direction:row;flex-wrap:wrap;gap:4px 16px;margin-top:4px;padding-top:12px;font-size:13px}
  .calendrier__fleche{width:40px;height:40px}
  .resa-carte .puce--jour span,.calendrier__ferme{height:42px}
  .resa-carte .agenda__heures{grid-template-columns:repeat(var(--colonnes-m,3),minmax(0,1fr))}
  .reservation[data-offre="vitrine"] .resa-carte .agenda__heures{min-height:92px}
  .etapes__texte{flex-direction:column;gap:2px;font-size:13px}
  .stade{gap:min(28px,3.4vh)}
  .stade__sous{font-size:17px}
  .agenda__jours{gap:10px}
  /* les jours defilent au doigt, comme les temoignages */
  .agenda__heures{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grille-champs{grid-template-columns:minmax(0,1fr)}
  .choix--4 .choix__options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ecran .choix__question,.ecran>.champ{font-size:20px}
  .choix--3 .choix__options{grid-template-columns:minmax(0,1fr)}
  .bouton--formulaire{align-self:stretch}
  .puce--creneau span{font-size:15px}
  .legal{padding:min(48px,5vh) var(--gouttiere) 72px}
  .legal__def li{flex-direction:column;gap:2px}
  .legal__def li span:last-child{text-align:left}
}
/* === petits telephones (moins de 390 px) ================================== */
@media (max-width:389px){
  /* carte de reservation : les trois etapes tiennent sur une ligne a 320 px */
  .resa-carte .etapes{gap:6px 12px;padding-inline:12px}
  .resa-carte .etapes__item{gap:6px}
  /* menu : le logo et « Reserver un appel » sur une seule ligne */
  .entete:not(.entete--centre) .logo{font-size:16px}
  .entete .bouton--petit{padding:0 14px;font-size:14px}
  .chiffres__case{padding:20px 8px 4px 14px}
  .chiffres__valeur{font-size:36px}
  /* comparatif : l'intitule au-dessus de la valeur, qui garde toute la largeur */
  .comparatif tbody td{grid-template-columns:minmax(0,1fr);gap:4px}
  .appel .bouton{padding:0 20px;font-size:17px}
  /* questionnaire : « 10 000 a 30 000 € » tient sur une ligne en deux colonnes */
  .choix--4 .puce span{font-size:14px;padding-inline:8px}
  .bouton--formulaire{padding:0 22px}
  .bouton--grand{padding:0 24px}
}
@media (max-width:349px){
  .entete:not(.entete--centre) .logo{font-size:14px}
  .entete .bouton--petit{padding:0 12px;font-size:13px}
  .chiffres__valeur{font-size:30px}
}

@media (min-width:560px) and (max-width:639px){
  .lecteur__titre{display:block;font-size:20px}
  .lecteur__avant{width:59.6%;align-items:flex-start}
  .lecteur>picture img{width:42.3%}
  .lecteur__fondu{right:30.8%;width:11.5%}
}

/* === mouvement reduit : tout s'affiche, rien ne bouge ======================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .notif{display:none}
}