/* =====================================================================
   accueil.css : la feuille unique de l'accueil, version 4 du 20/10/2026
   (docs/plans/2026-10-20-home-v4-da-animations.md).
   Elle remplace site.css et francois.css sur l'accueil seulement : les
   sous-pages gardent site.css, donc rien ne change pour elles. Le pied et
   la barre gardent leurs noms de classes, car outils/pied.py les recopie.
   Les jetons suivent la charte des pages (skill bjr-charte-pages), avec la
   nuit, le ciel et le bleu de l'identité déjà en place.
   Sommaire : 1 jetons, 2 base, 3 mouvement commun, 4 composants (titres,
   boutons, pastilles, cartes, nuit), 5 navigation, 6 le pourquoi et
   l'ouverture, 7 le comment, 8 l'exemple, 9 vous, 10 nous, 11 les
   dossiers, 12 la fin et le pied, 13 téléphone, 14 sans animation.
   ===================================================================== */

/* ---------- 1. Jetons ---------- */
:root{
  color-scheme:light;
  /* couleurs : les valeurs de la charte, plus la nuit et le ciel de l'accueil */
  --nuit:#0A0F1E;
  --bg:#F4F6FA; --carte:#FFFFFF; --surface-2:#EEF1F6;
  --trait:rgba(15,23,42,.08); --trait-fort:rgba(15,23,42,.14); --trait-nuit:rgba(255,255,255,.14);
  --t1:#0B1220; --t2:#475569; --t3:#94A3B8; --t4:#CBD5E1;
  --blue:#2060E0; --blue-2:#4C86FF; --blue-soft:#EAF0FE; --blue-ink:#173E8F; --blue-light:#93C5FD; --blue-fonce:#1A4FC0;
  --violet:#8B5CF6;
  --green:#12B981; --green-soft:#E7F8F1; --green-ink:#065F46;
  --red-ink:#991B1B;
  --degrade-titre:linear-gradient(90deg,#93C5FD,#C4B5FD);
  /* le fond de « nous » reprend la nuit du haut de page et du pied (retour de Florent du 20/10/2026 : le bleu ciel n'avait plus de sens sans les nuages) */
  /* le fond de « nous » : le bleu de la marque, pour marquer l'arrivée sur notre ligne après la nuit des clients (Florent, 20/10/2026) */
  --ciel:radial-gradient(900px 520px at 88% 12%,rgba(255,255,255,.16),transparent 62%),radial-gradient(800px 500px at 0% 100%,rgba(23,62,143,.55),transparent 60%),var(--blue);
  --sur-bleu:#DCE7FF;
  /* typographie : Inter pour tout, Manrope pour les chiffres */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:Manrope,Inter,system-ui,sans-serif;
  --fw-titre:700;
  --fs-surtitre:13px; --fs-petit:14px; --fs-texte:16px; --fs-chapo:18px; --fs-carte:20px;
  --fs-h3:clamp(24px,2.1vw,34px);
  --fs-h2:clamp(30px,3.4vw,56px);
  --fs-display:clamp(34px,4.2vw,70px);
  --fs-h1:clamp(40px,5.6vw,88px);
  /* espacements */
  --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-5:24px; --e-6:32px; --e-7:48px; --e-8:64px; --e-9:96px;
  --page:1240px; --gouttiere:24px; --marge-panneau:12px;
  --section:clamp(96px,13vh,150px);
  /* rayons : carte 18, sous-carte 14, petit bloc 12, badge 7, grand média et panneau de nuit 24 */
  --r-xs:7px; --r-sm:12px; --r-md:14px; --r:18px; --r-xl:24px; --r-rond:999px;
  /* ombres */
  --ombre:0 1px 2px rgba(15,23,42,.04),0 12px 40px -12px rgba(15,23,42,.12);
  --ombre-survol:0 1px 2px rgba(15,23,42,.04),0 22px 44px -16px rgba(15,23,42,.25);
  --ombre-flottante:0 40px 80px -40px rgba(12,27,67,.6);
  /* mouvement : une courbe pour entrer, une pour traverser, un ressort pour les petits retours */
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --t-1:.2s; --t-2:.45s; --t-3:.8s; --t-4:1.1s;
  --dist:24px; --pas:80ms;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font:400 var(--fs-texte)/1.5 var(--sans);color:var(--t1);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3,h4{font-weight:var(--fw-titre);letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
.n{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gouttiere)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.nuit :focus-visible{outline-color:#fff}

/* ---------- 3. Mouvement commun ----------
   Un seul langage pour toute la page : les blocs montent de --dist en fondu, les grands titres montent mot à mot sous un masque,
   avec la même courbe --ease et le même décalage --pas. Sans JavaScript ou en mouvement réduit, tout reste visible. */
.rv-mots .mot{display:inline-block;vertical-align:top;clip-path:inset(-.4em -.3em -.24em -.3em)}
.rv-mots .mot>span{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(var(--dist));transition:opacity var(--t-3) var(--ease),transform var(--t-3) var(--ease);transition-delay:calc(var(--k,0) * var(--pas))}
  .js .rv.vu{opacity:1;transform:none}
  .js .rv-mots .mot>span{transform:translateY(118%);transition:transform var(--t-4) var(--ease) calc(var(--k,0) * var(--pas))}
  .js .rv-mots.vu .mot>span{transform:none}
}

/* ---------- 4. Composants communs ---------- */
/* En-tête de section : un surtitre, puis un titre à la même échelle d'une section à l'autre */
.surtitre{display:block;margin-bottom:var(--e-4);font:600 var(--fs-surtitre)/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.titre-section{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.04em;color:var(--t1)}
.titre-display{font-size:var(--fs-display);line-height:1.06;letter-spacing:-.045em}
.grad{background:var(--degrade-titre);-webkit-background-clip:text;background-clip:text;color:transparent}
.actions{display:flex;justify-content:center;align-items:center;gap:var(--e-3);flex-wrap:wrap}

/* Boutons : une pilule, le texte puis un rond qui porte la flèche vers une autre page (ou le visage de Florent).
   Les liens vers la suite de la page sont des champs de saisie (section 7). */
.btn{position:relative;display:inline-flex;align-items:center;gap:var(--e-3);min-height:52px;padding:6px 22px;border-radius:var(--r-rond);font:600 15.5px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;isolation:isolate;overflow:hidden;transition:transform var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease),background-color var(--t-1)}
.btn .rond{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px;margin-right:-16px;border-radius:50%;overflow:hidden;transition:transform var(--t-2) var(--spring)}
.btn .rond svg{width:16px;height:16px;transition:transform var(--t-2) var(--spring)}
.btn .rond img{width:100%;height:100%;object-fit:cover}
/* le reflet traverse le bouton au survol, puis revient sans se voir */
.btn::after{content:"";position:absolute;z-index:-1;top:-2px;bottom:-2px;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);transform:translateX(-130%) skewX(-18deg)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .7s var(--ease)}
  .btn:hover .rond svg{transform:translateX(2px)}
}
.btn:active{transform:scale(.98)}
.btn-petit{min-height:44px;padding:4px 18px;font-size:14.5px}
.btn-petit .rond{width:36px;height:36px;margin-right:-14px}
.btn-blanc{color:var(--nuit);background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.08),0 22px 44px -14px rgba(255,190,90,.55)}
.btn-blanc .rond{background:var(--blue);color:#fff}
@media (hover:hover){
  .btn-blanc:hover{box-shadow:0 0 0 8px rgba(255,255,255,.12),0 26px 50px -14px rgba(255,190,90,.7)}
}
/* Bouton d'appel : le visage de Florent, puis le téléphone au survol */
.rond-visage img{transition:opacity var(--t-1),transform var(--t-2) var(--spring)}
.btn .rond-visage svg{position:absolute;inset:0;margin:auto;opacity:0;transform:scale(.4);transition:opacity var(--t-1),transform var(--t-2) var(--spring)}
@media (hover:hover){
  .btn:hover .rond-visage img{opacity:0;transform:scale(.6)}
  .btn:hover .rond-visage svg{opacity:1;transform:rotate(-12deg)}
}
/* Les trois boutons de contact (choix de Florent du 23/10/2026) : l'icône de l'outil reste blanche au repos,
   puis elle prend la couleur de l'outil au survol, bleu pour l'agenda, vert pour le téléphone et vert WhatsApp */
.btn[data-outil="agenda"]{--outil:var(--blue)}
.btn[data-outil="tel"]{--outil:#12B981}
.btn[data-outil="wa"]{--outil:#25D366}
.btn[data-outil]:focus-visible .rond{background:var(--outil)}
@media (hover:hover){.btn[data-outil]:hover .rond{background:var(--outil);transform:rotate(-10deg) scale(1.06)}}

/* Pastilles : une étiquette en pilule, grise dans une carte, bleue pour une étiquette de la marque */
.pastille{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 12px;border-radius:var(--r-rond);background:var(--surface-2);font:600 12.5px/1.2 var(--sans);color:var(--t2);white-space:nowrap}
.pastille.bleue{background:var(--blue-soft);color:var(--blue-ink)}

/* Carte blanche : rayon 18, trait fin, ombre douce */
.carte{background:var(--carte);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--trait),var(--ombre)}

/* Logo d'un client posé sur une pastille blanche, en couleurs d'origine */
.logo-client{position:absolute;z-index:2;left:14px;bottom:14px;display:grid;place-items:center;height:40px;padding:0 12px;border-radius:var(--r-sm);background:#fff;box-shadow:0 10px 24px -14px rgba(15,23,42,.45)}
.logo-client img{height:20px;width:auto;max-width:110px}
.logo-client img.carre{height:32px}

/* Le fond de nuit, le même en haut et en bas de page : halos bleu et violet, grille fine, étoiles, brume */
.nuit{position:relative;isolation:isolate;margin:var(--marge-panneau);border-radius:var(--r-xl);overflow:hidden;overflow:clip;background:var(--nuit);color:#fff}
.nuit-ciel{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nuit-ciel>*{position:absolute}
/* les halos débordent largement en haut, pour que la parallaxe ne fasse jamais voir leur bord */
.halos{inset:-30% -4% -10%;background:radial-gradient(900px 480px at 92% 18%,rgba(32,96,224,.6),transparent 62%),radial-gradient(700px 420px at 0% 100%,rgba(139,92,246,.32),transparent 60%)}
.grille{inset:0;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)}
.etoiles{inset:0 0 30%}
.etoiles::before{content:"";position:absolute;inset:0;opacity:.8;animation:scintille 4s ease-in-out infinite alternate;
  background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 27% 42%,#fff,transparent),radial-gradient(1.6px 1.6px at 41% 12%,#fff,transparent),radial-gradient(1px 1px at 58% 30%,#fff,transparent),radial-gradient(1.4px 1.4px at 73% 16%,#fff,transparent),radial-gradient(1px 1px at 86% 38%,#fff,transparent),radial-gradient(1.2px 1.2px at 93% 9%,#fff,transparent),radial-gradient(1px 1px at 6% 46%,#fff,transparent),radial-gradient(1.2px 1.2px at 64% 52%,#fff,transparent),radial-gradient(1px 1px at 34% 60%,#fff,transparent)}
@keyframes scintille{from{opacity:.35}to{opacity:.9}}
.nuage{opacity:.05;filter:blur(10px);will-change:transform}
.nuage i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,#fff 0%,rgba(255,255,255,.92) 55%,rgba(255,255,255,0) 100%)}
.n1{top:70px;left:-80px;width:520px;height:170px;animation:derive-d 70s linear infinite alternate}
.n2{top:210px;right:-120px;width:600px;height:190px;animation:derive-g 85s linear infinite alternate}
.n3{top:30px;left:42%;width:380px;height:120px;animation:derive-g 95s linear infinite alternate}
.n4{top:430px;left:6%;width:420px;height:140px;animation:derive-d 80s linear infinite alternate}
@keyframes derive-d{to{transform:translateX(180px)}}
@keyframes derive-g{to{transform:translateX(-200px)}}
/* Classe .tete-vive, posée sur le haut de nuit de quatre sous-pages (23/10/2026, passe PageSpeed demandée par François).
   1. Nous fixons le bord haut des halos : quand une police arrive et allonge la section, les halos grandissent sans bouger.
      Lighthouse ne compte donc plus de décalage (CLS de 0,057 sur criteres/). Le centre du halo bleu reste au même endroit
      qu'avec inset:-30% (à -4,8 % de la hauteur de la section). Les 600 px couvrent la parallaxe d'un haut de 2 000 px.
   2. Les textes du haut entrent dès le premier affichage, en 0,45 s, par une animation composée, sans attendre le script.
      Nous les faisons partir d'une opacité de 0,01 et non de 0, car Chrome ignore pour le LCP un texte peint à opacité nulle.
   3. Les blocs .rv placés sous le haut gardent l'opacité 0 : à 0,01, Lighthouse les lit comme du texte visible sans contraste,
      et la note d'accessibilité tombe à 95. */
.tete-vive>.nuit-ciel>.halos{top:-600px;background:radial-gradient(900px 480px at 92% calc(626.18px - 4.3636%),rgba(32,96,224,.6),transparent 62%),radial-gradient(700px 420px at 0% 100%,rgba(139,92,246,.32),transparent 60%)}
@media (prefers-reduced-motion:no-preference){
  .js .tete-vive .rv{opacity:1;transform:none;transition:none;animation:tete-entre var(--t-2) var(--ease) calc(var(--k,0) * 60ms) both}
}
/* Classe .entre-vite, posée sur le premier bloc sous le haut quand il entre dans l'écran d'un téléphone dès l'ouverture
   (le constat de prospection/, 23/10/2026). Sur téléphone, ses textes entrent par la même animation que le haut de page,
   sans attendre le script : le premier paragraphe du constat était le LCP de la page, affiché à 2,0 s dans PageSpeed. */
@media (prefers-reduced-motion:no-preference) and (max-width:700px){
  .js .entre-vite .rv{opacity:1;transform:none;transition:none;animation:tete-entre var(--t-2) var(--ease) calc(var(--k,0) * 60ms) both}
}
@keyframes tete-entre{from{opacity:.01;transform:translateY(var(--dist))}}

/* ---------- 5. Navigation ----------
   Cachée en haut de page, elle descend une fois le haut de page dépassé, ou dès qu'un visiteur au clavier y entre.
   Le lien de la section en cours prend un fond, et un trait sous la barre suit la lecture de la page. */
.nav{position:fixed;top:12px;left:50%;z-index:60;display:flex;align-items:center;gap:2px;padding:6px 6px 6px 14px;border-radius:var(--r-rond);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(15,23,42,.06),0 14px 34px -16px rgba(15,23,42,.35);opacity:0;pointer-events:none;transform:translate(-50%,calc(-100% - 20px));transition:transform var(--t-3) var(--ease),opacity var(--t-2) var(--ease)}
.nav.visible,.nav:focus-within{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.nav>a:first-child{flex:none;margin-right:10px}
.nav .logo{height:34px;width:auto;max-width:none;transition:transform var(--t-2) var(--spring)}
@media (hover:hover){.nav .logo:hover{transform:rotate(-4deg) scale(1.04)}}
.nav-liens{display:flex;gap:2px}
.nav-liens a{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-rond);font:500 15px/1 var(--sans);color:var(--t2);transition:color var(--t-1)}
.nav-liens a::before{content:"";position:absolute;z-index:-1;inset:4px 0;border-radius:inherit;background:var(--surface-2);opacity:0;transform:scale(.85);transition:opacity var(--t-1),transform var(--t-2) var(--ease)}
.nav-liens a:hover{color:var(--t1)}
.nav-liens a:hover::before{opacity:.7;transform:none}
.nav-liens a[aria-current]::before{opacity:1;transform:none;background:var(--blue-soft)}
.nav-liens a[aria-current]{color:var(--blue-ink)}
.nav-cta{position:relative;display:inline-flex;align-items:center;min-height:44px;margin-left:4px;padding:0 18px;border-radius:var(--r-rond);background:var(--blue);color:#fff;font:600 15px/1 var(--sans);white-space:nowrap;transition:background-color var(--t-1),box-shadow var(--t-2) var(--ease)}
.nav-cta:hover{background:var(--blue-fonce)}
.nav-cta[aria-current]{box-shadow:0 0 0 3px var(--blue-soft)}
/* le trait de lecture, sous la barre */
.nav-progres{position:absolute;left:22px;right:22px;bottom:-1px;height:2px;border-radius:2px;overflow:hidden;background:rgba(15,23,42,.06);pointer-events:none}
.nav-progres i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--violet));transform:scaleX(0);transform-origin:0 50%}
/* la main sort à droite de la barre au survol de « Dire bonjour » */
.main-fen{position:absolute;top:50%;left:100%;width:46px;height:46px;margin-top:-23px;overflow:hidden;pointer-events:none}
.main-fen span{display:block;font-size:30px;line-height:46px;text-align:center;transform:translateX(-105%);transform-origin:20% 90%;transition:transform .5s var(--spring)}
@media (hover:hover){.nav-cta:hover .main-fen span{transform:translateX(0);animation:coucou .9s .45s ease-in-out 1}}
@keyframes coucou{0%,100%{transform:translateX(0) rotate(0)}20%,60%{transform:translateX(0) rotate(16deg)}40%,80%{transform:translateX(0) rotate(-12deg)}}

/* ---------- 6. Le pourquoi : le haut de page de nuit ---------- */
.heros{display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - var(--marge-panneau));min-height:calc(100svh - var(--marge-panneau));margin-bottom:0;padding:128px 0 104px;text-align:center;transform-origin:50% 100%}
.heros-barre{position:absolute;top:28px;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}
.logo-heros{display:block;transform-origin:50% 50%}
.logo-heros img{height:64px;width:auto;transition:transform var(--t-2) var(--spring)}
@media (hover:hover){.logo-heros:hover img{transform:rotate(-4deg) scale(1.04)}}
.heros-in{position:relative;z-index:2}
/* Hiérarchie du premier écran (retours de Florent du 20/10/2026 à 21 h 19) : un seul bouton plein, « Comment nous le faisons ».
   « Déjà 4 ans » devient une ligne de texte sans cadre au-dessus du titre (choix de Florent, 21 h 39), et « Dire bonjour » un simple lien. */
.anniv{display:inline-flex;align-items:center;gap:8px;margin-bottom:26px;font:600 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);cursor:default}
/* l'emoji saute une fois */
.fete{display:inline-block;animation:fete .9s var(--spring) .3s both}
@keyframes fete{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.35) rotate(12deg)}100%{transform:none}}
.titre-heros{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.045em;color:#fff}
/* chaque ligne a son masque : le texte monte de dessous le bord bas, puis le masque laisse passer jambages et visage */
.titre-heros .ligne{display:block;white-space:nowrap;clip-path:inset(-.5em -.5em -.3em -.5em)}
.titre-heros .ligne>span{display:block}
.heros .actions{margin-top:44px}

/* Le visage : les yeux suivent la souris, sourient au survol du bouton, s'étonnent au survol de « Déjà 4 ans » */
.groupe-yeux{white-space:nowrap}
.yeux{position:relative;display:inline-flex;gap:.06em;margin-left:.16em;vertical-align:-.04em}
.oeil{position:relative;display:inline-block;width:.5em;height:.66em;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 .05em #0C1B43,0 .08em .3em rgba(76,134,255,.45);overflow:hidden;transition:transform .35s var(--spring)}
.pupille{position:absolute;left:50%;top:50%;width:.22em;height:.22em;margin:-.11em 0 0 -.11em;border-radius:50%;background:var(--nuit);transition:transform .12s linear}
.pupille::after{content:"";position:absolute;top:.04em;left:.05em;width:.06em;height:.06em;border-radius:50%;background:#fff}
.oeil.cligne{animation:cligne .18s ease-in-out}
@keyframes cligne{50%{transform:scaleY(.08)}}
.sourcil{position:absolute;top:-.13em;width:.28em;height:.09em;border-top:.055em solid #fff;border-radius:50% 50% 0 0;transition:transform .4s var(--spring)}
.sourcil.g{left:.1em}.sourcil.d{right:.1em}
.bouche{position:absolute;left:50%;top:96%;width:.62em;height:.34em;margin-left:-.31em;overflow:visible;pointer-events:none}
.bouche .sourire{stroke:#fff;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .4s var(--ease) .12s}
.bouche .o{fill:#fff;transform:scale(0);transform-origin:15px 6px;transition:transform .35s var(--spring)}
/* au survol du bouton : les sourcils montent, puis le sourire arrive */
.yeux.sourit .sourcil.g{transform:translateY(-.04em) rotate(-10deg)}
.yeux.sourit .sourcil.d{transform:translateY(-.04em) rotate(10deg)}
.yeux.sourit .bouche .sourire{stroke-dashoffset:0}
/* au survol de « Déjà 4 ans » : les sourcils sautent, les yeux s'arrondissent, la bouche fait « oh » */
.yeux.etonne .sourcil{transform:translateY(-.08em) scaleX(1.1)}
.yeux.etonne .oeil{transform:scale(1.08)}
.yeux.etonne .bouche .o{transform:scale(1)}
.yeux.etonne .bouche .sourire{stroke-dashoffset:30;transition-delay:0s}

/* L'ouverture des 4 ans (4,4 s), version 1 « La salve » de maquettes/ouverture-4-ans.html, retenue par Florent le 20/10/2026.
   Le script du <head> pose .ouverture ; le script du haut de page pose les mesures (--dx, --dy2, --s et --remonte pour le logo,
   --ax, --ay et --as pour « Déjà 4 ans »), puis --ta, l'instant où « Déjà 4 ans » arrive. Il range l'ouverture à la fin,
   ou dès un clic, une touche ou un défilement. Chaque image finale de la séquence est l'état normal de la page.
   0 à 0,45 s : le logo apparaît seul au centre, et il y reste seul jusqu'à --ta ;
   --ta : « Déjà 4 ans » le rejoint dessous, le logo remonte d'un cran pour centrer le couple, puis la salve de confettis part de derrière le logo ;
   2,75 s : le logo file dans son coin, puis « Déjà 4 ans » glisse à sa place au-dessus du titre ; le ciel s'éclaire ;
   3,05 s à 4,4 s : le titre monte ligne à ligne, les yeux s'éveillent, puis le champ de la question et « Dire bonjour » arrivent.
   Les propriétés translate et scale portent le trajet, et transform porte l'arrivée : les deux se composent. */
.toile{inset:0;width:100%;height:100%}
.ouverture .logo-heros{animation:l-trajet .8s var(--ease) 2.75s both,l-remonte .45s var(--ease) var(--ta,1.05s) both}
@keyframes l-trajet{from{translate:var(--dx,0px) var(--dy2,0px);scale:var(--s,1)}}
@keyframes l-remonte{from{transform:translateY(var(--remonte,0px))}}
.ouverture .logo-heros img{animation:l-entre .45s var(--ease) both}
@keyframes l-entre{from{opacity:0;transform:scale(.86)}}
.ouverture .anniv{animation:a-trajet .7s var(--ease) 2.75s both,a-pop .5s var(--spring) var(--ta,1.05s) both}
@keyframes a-trajet{from{translate:var(--ax,0px) var(--ay,0px);scale:var(--as,1);color:#fff}}
@keyframes a-pop{from{opacity:0;transform:scale(.4)}}
.ouverture .heros .fete{animation-delay:calc(var(--ta,1.05s) + .1s)}
/* le ciel reste sombre autour du logo, avec les halos à peine allumés, puis il s'éclaire quand le logo file */
.ouverture .heros .halos{animation:ouv-halos 3.9s var(--ease) both}
@keyframes ouv-halos{0%{opacity:0;transform:scale(.88)}20%{opacity:.3}62%{opacity:.3;transform:scale(.92)}100%{opacity:1;transform:none}}
.ouverture .heros .grille{animation:ouv-grille 1.3s var(--ease) 2.7s both}
@keyframes ouv-grille{from{opacity:0;transform:scale(1.14)}}
.ouverture .heros .etoiles{animation:ouv-fondu 1.2s var(--ease) 2.9s both}
.ouverture .titre-heros .ligne>span{animation:ouv-ligne var(--t-4) var(--ease) 3.05s both}
.ouverture .titre-heros .ligne:nth-child(2)>span{animation-delay:calc(3.05s + var(--pas))}
.ouverture .titre-heros .ligne:nth-child(3)>span{animation-delay:calc(3.05s + 2 * var(--pas))}
@keyframes ouv-ligne{from{transform:translateY(120%)}}
.ouverture .yeux .oeil{animation:ouv-oeil .6s var(--spring) 3.6s both}
@keyframes ouv-oeil{from{transform:scaleY(.08)}}
.ouverture .yeux .sourcil{animation:ouv-sourcil .8s var(--ease) 3.5s both}
@keyframes ouv-sourcil{0%{transform:translateY(.08em)}45%{transform:translateY(-.05em)}100%{transform:none}}
.ouverture .yeux .pupille{animation:ouv-regard .7s var(--ease-io) 3.65s both}
@keyframes ouv-regard{0%{translate:0 .04em}30%{translate:-.07em 0}65%{translate:.07em -.01em}100%{translate:0 0}}
.ouverture .heros .actions{animation:ouv-monte var(--t-3) var(--ease) 3.45s both}
@keyframes ouv-monte{from{opacity:0;transform:translateY(var(--dist))}}
@keyframes ouv-fondu{from{opacity:0}}

/* ---------- 7. Le comment : la question envoyée comme un message, puis la phrase de Florent écrite mot à mot, puis le champ qui tape le problème de l'exemple ---------- */
.manif{position:relative;height:190vh}
.manif-scene{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gouttiere);text-align:center}
.manif-phrase{max-width:30ch;font-size:clamp(34px,3.4vw,56px);color:var(--t1)}
.manif-phrase .cle{color:var(--blue)}
.manif-suite{width:100%;margin-top:44px}
.js .manif-suite{opacity:0;transform:translateY(var(--dist));pointer-events:none;transition:opacity var(--t-2) var(--ease),transform var(--t-3) var(--ease)}
.manif.fini .manif-suite{opacity:1;transform:none;pointer-events:auto}
/* La question comme dans une conversation (demande de Florent du 20/10/2026, versions 2 et 4 de maquettes/question-chat.html).
   « Comment ? », puis le problème du dirigeant de l'exemple, s'écrivent lettre à lettre dans un champ de saisie, puis le bouton d'envoi s'allume.
   Au clic ou au défilement, la question part en bulle bleue de message envoyé, suit le visiteur, puis rejoint la question posée :
   « Comment ? » au-dessus de la phrase, que trois points puis les mots écrivent ensuite, puis le problème sous le titre de l'exemple (section 8).
   Le script vit en fin d'index.html. Sans lui, le champ du haut de page est un lien déjà écrit. */
.saisie{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:min(440px,100%);min-height:62px;padding:8px 8px 8px 26px;border-radius:var(--r-rond);font:500 17px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;transition:background-color var(--t-1),box-shadow var(--t-2) var(--ease)}
.saisie-texte{display:inline-flex;align-items:center;min-width:0;min-height:1.3em}
.saisie-curseur{display:inline-block;width:2px;height:1.25em;margin-left:2px;border-radius:1px;background:var(--blue-2);animation:clignote 1.05s steps(1) infinite}
@keyframes clignote{50%{opacity:0}}
.saisie-envoi{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--blue);color:#fff;box-shadow:0 0 0 6px rgba(32,96,224,.22),0 10px 24px -8px rgba(76,134,255,.8);transition:background-color var(--t-2),color var(--t-2),box-shadow var(--t-2)}
.saisie-envoi svg{width:17px;height:17px;transition:transform var(--t-2) var(--spring)}
/* le champ de l'exemple tape une question longue : il s'élargit et passe à la ligne, et il affiche une invite grise avant la frappe et après l'envoi */
.saisie-long{width:min(680px,100%);border-radius:31px;line-height:1.35;white-space:normal;text-align:left}
.saisie-long .saisie-texte{display:block;flex:1}
.saisie-vide{display:none;color:var(--t3)}
.js-suit .saisie:not(.tape) .saisie-vide,.saisie.parti .saisie-vide{display:inline}
/* sur la nuit du haut de page, un champ de verre ; sous la phrase du comment, un champ blanc */
.saisie-nuit{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 24px 50px -24px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff}
.saisie-nuit .saisie-curseur{background:var(--blue-light)}
.saisie-jour{background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait-fort),var(--ombre);color:var(--t1)}
@media (hover:hover){
  .saisie-nuit:hover{background:rgba(255,255,255,.12)}
  .saisie-jour:hover{box-shadow:inset 0 0 0 1px var(--trait-fort),var(--ombre-survol)}
  .saisie.pret:not(.parti):hover .saisie-envoi svg{transform:translateY(-2px)}
}
/* le script cache la question jusqu'à sa frappe ; le bouton d'envoi reste éteint pendant la frappe et après le départ de la question */
.js-suit .saisie:not(.tape) .saisie-mot,.saisie.parti .saisie-mot{display:none}
.js-suit .saisie:not(.pret) .saisie-envoi,.saisie.parti .saisie-envoi{box-shadow:none}
.js-suit .saisie-nuit:not(.pret) .saisie-envoi,.saisie-nuit.parti .saisie-envoi{background:rgba(255,255,255,.12);color:rgba(255,255,255,.45)}
.js-suit .saisie-jour:not(.pret) .saisie-envoi,.saisie-jour.parti .saisie-envoi{background:var(--surface-2);color:var(--t3)}
/* au clic, la flèche s'envole avant la descente */
.saisie.envoi .saisie-envoi svg{transform:translateY(-32px);transition:transform .3s var(--ease)}
/* la question posée au-dessus de la réponse, et la bulle qui voyage : un message envoyé, bleu, coin pointu en bas à droite */
.question-posee{display:inline-flex;align-items:center;min-height:44px;margin-bottom:var(--e-5);padding:0 20px;border-radius:22px 22px 7px 22px;background:var(--blue);box-shadow:0 14px 30px -14px rgba(32,96,224,.7);font:600 15.5px/1.2 var(--sans);color:#fff;white-space:nowrap}
.voyageur{position:fixed;top:0;left:0;z-index:40;pointer-events:none;margin:0;opacity:0;will-change:transform}
.voyageur.actif{opacity:1;animation:voy-entre var(--t-2) var(--ease)}
@keyframes voy-entre{from{opacity:0;scale:.7}}
.js-suit .attend{visibility:hidden}
/* la réponse : trois points pendant que nous écrivons, puis les mots un à un */
.reponse{position:relative}
.reponse .mot{opacity:0;transition:opacity .3s var(--ease)}
.reponse .mot.lu{opacity:1}
.trois-points{position:absolute;left:50%;top:.2em;display:none;gap:7px;padding:15px 18px;border-radius:22px 22px 22px 7px;background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait),var(--ombre);transform:translateX(-50%)}
.reponse.ecrit .trois-points{display:flex}
.trois-points i{width:9px;height:9px;border-radius:50%;background:var(--t3);animation:point-saute 1.1s var(--ease) infinite}
.trois-points i:nth-child(2){animation-delay:.15s}
.trois-points i:nth-child(3){animation-delay:.3s}
@keyframes point-saute{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* ---------- 8. L'exemple : le problème du dirigeant, la vidéo de Florent et ses données, la décision, puis la vidéo de François et le terrain en trois pièces ----------
   Version 1 de maquettes/exemple-projection.html, retenue par Florent le 20/10/2026. Le script qui suit la section de l'exemple dans index.html
   construit l'exemple à partir de la balise template « exDonnees ». Le champ qui tape la question vit dans la section 7. */
.ex-scene{max-width:1180px;margin:0 auto;padding:var(--section) var(--gouttiere) calc(var(--section) + 16px)}
.ex-bloc{display:flex;flex-direction:column;align-items:center;text-align:center}
.ex-bloc+.ex-bloc{margin-top:clamp(64px,9vh,104px)}
.etape-tete{max-width:min(760px,100%);margin:0 auto 26px;text-align:center}
.etape-tete h3{font-size:var(--fs-h3);letter-spacing:-.035em}
.etape-num{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;background:var(--blue-soft);font:800 14px/1 var(--mono);color:var(--blue-ink)}
/* le problème : la bulle bleue du dirigeant, sous le titre ; la question du champ la rejoint au défilement (section 7) */
.fil{width:min(780px,100%);margin-top:28px}
.msg{display:flex;flex-direction:column;align-items:flex-end;text-align:left}
.msg-meta{margin:0 8px 6px;font:600 12.5px/1.2 var(--sans);color:var(--t2)}
.bulle-q{max-width:28em;padding:18px 24px;border-radius:26px 26px 7px 26px;background:var(--blue);box-shadow:0 14px 30px -14px rgba(32,96,224,.7);font:600 clamp(18px,1.7vw,24px)/1.3 var(--sans);letter-spacing:-.02em;color:#fff;text-wrap:balance}
/* la vidéo de Florent : une carte de données par repère, sur le mur de gauche ou de droite, calée sur currentTime.
   Les mesures suivent la largeur de la vidéo (unités cqw), donc les cartes restent loin du visage et des sous-titres à toutes les largeurs. */
.lecteur{width:min(1040px,100%)}
.lecteur-tete{display:flex;justify-content:center;margin-bottom:14px}
.ecran{position:relative;container-type:inline-size;aspect-ratio:16/9;border-radius:var(--r-xl);overflow:hidden;background:var(--nuit);box-shadow:var(--ombre-flottante)}
.ecran video{width:100%;height:100%;object-fit:cover}
.couche{position:absolute;inset:0;pointer-events:none}
.inc{position:absolute;top:var(--y);width:23cqw;padding:1.3cqw 1.4cqw;border-radius:1.5cqw;background:rgba(255,255,255,.95);box-shadow:0 1.6cqw 4cqw -1.4cqw rgba(10,15,30,.55);color:var(--t1);text-align:left;opacity:0;transform:translateY(1.6cqw) scale(.96);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.inc.on{opacity:1;transform:none}
.inc.g{left:5.6cqw}
.inc.d{right:5.6cqw}
.inc-court{display:none}
.src{display:inline-flex;align-items:center;gap:.6cqw;padding:.35cqw .9cqw;border-radius:var(--r-rond);background:var(--blue-soft);font:700 max(10px,1.05cqw)/1.2 var(--sans);color:var(--blue-ink);white-space:nowrap}
.src i{width:.8cqw;height:.8cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--blue)}
.inc-titre{display:block;margin-top:.8cqw;font:700 max(13px,1.6cqw)/1.15 var(--sans);letter-spacing:-.02em}
.inc-grand{display:block;margin-top:.5cqw;font:800 4.4cqw/1 var(--mono);letter-spacing:-.05em;color:var(--blue)}
.inc-lignes{display:grid;gap:.6cqw;margin-top:.9cqw}
.inc-ligne{display:grid;grid-template-columns:7.6cqw 1fr 4cqw;align-items:center;gap:.7cqw;font:500 max(11px,1.18cqw)/1.2 var(--sans);color:var(--t2)}
.inc-ligne i{height:.85cqw;min-height:6px;border-radius:var(--r-rond);background:var(--surface-2);overflow:hidden}
.inc-ligne i::after{content:"";display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:#C9D6F2;transform-origin:0 50%;transform:scaleX(0);transition:transform .9s var(--ease) .25s}
.inc.on .inc-ligne i::after{transform:none}
.inc-ligne b{font:800 max(10px,1.15cqw)/1 var(--mono);text-align:right;color:var(--t1)}
.inc-ligne.fort{color:var(--t1);font-weight:700}
.inc-ligne.fort i::after{background:var(--blue)}
.inc-badge{display:inline-flex;align-items:center;gap:.5cqw;margin-top:.9cqw;padding:.4cqw 1cqw;border-radius:var(--r-rond);background:var(--green-soft);font:700 max(10px,1.1cqw)/1.2 var(--sans);color:var(--green-ink)}
.inc-badge b{font:800 max(12px,1.6cqw)/1 var(--mono)}
/* sur une vidéo étroite (téléphone), chaque carte devient un chiffre et deux ou trois mots */
@container (max-width:620px){
  .inc{top:22%;width:25cqw;padding:2cqw 2.2cqw;border-radius:2.6cqw}
  .inc-plein{display:none}
  .inc-court{display:block}
  .inc-court b{display:block;font:800 7cqw/1 var(--mono);letter-spacing:-.04em;color:var(--blue)}
  .inc-court span{display:block;margin-top:1cqw;font:600 3.2cqw/1.15 var(--sans);color:var(--t1)}
}
/* la visio de François : fenêtre d'appel sombre, l'équipe du client sur le côté, une barre d'outils décorative */
.visio{padding:12px;border-radius:var(--r-xl);background:var(--nuit);box-shadow:var(--ombre-flottante);color:#fff}
.visio-tete{display:flex;align-items:center;gap:8px;padding:2px 4px 12px;font:600 13px/1 var(--sans);color:rgba(255,255,255,.78)}
.visio-rec{width:8px;height:8px;border-radius:50%;background:#E5484D;animation:visio-rec 1.6s ease-in-out infinite}
@keyframes visio-rec{50%{opacity:.35}}
.visio-grille{display:grid;grid-template-columns:1fr minmax(150px,22%);gap:10px}
.visio .ecran{border-radius:var(--r-md);box-shadow:none;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .3s}
.visio .ecran.parle{outline-color:var(--green)}
.visio-nom{font:600 12.5px/1.2 var(--sans);color:#fff}
.visio .ecran>.visio-nom{position:absolute;left:10px;top:10px;z-index:2;padding:6px 10px;border-radius:8px;background:rgba(11,18,32,.62)}
.visio-cote{display:grid;grid-auto-rows:1fr;gap:10px}
.visio-tuile{position:relative;display:grid;place-items:center;align-content:center;gap:8px;padding:12px 8px;border-radius:var(--r-md);background:rgba(255,255,255,.07);text-align:center}
.visio-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--blue);font:700 15px/1 var(--sans);color:#fff}
.visio-tuile .visio-nom{color:rgba(255,255,255,.82)}
.visio-btn{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff}
.visio-btn svg{width:16px;height:16px}
.visio-btn.coupe{position:absolute;top:8px;right:8px;width:22px;height:22px;background:rgba(229,72,77,.9)}
.visio-btn.coupe svg{width:12px;height:12px}
.visio-btn.rouge{width:46px;border-radius:999px;background:#E5484D}
.visio-barre{display:flex;justify-content:center;align-items:center;gap:10px;padding-top:12px}
/* dans la visio, lire et le son ouvrent la barre d'outils, à la taille de ses boutons, avec un écart qui les sépare des boutons décoratifs */
.visio-barre .lecteur-commandes{position:static;margin-right:12px}
.visio-barre .btn-rond,.visio-barre .btn-son{width:34px;height:34px}
@media (max-width:700px){
  .visio{padding:8px}
  .visio-grille{grid-template-columns:1fr}
  .visio-cote{grid-template-columns:repeat(3,1fr);grid-auto-rows:auto;gap:6px}
  .visio-tuile{padding:8px 4px;gap:5px}
  .visio-av{width:34px;height:34px;font-size:12px}
  .visio-tuile .visio-nom{font-size:10.5px}
  .visio-btn.coupe{top:5px;right:5px;width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){.visio-rec{animation:none}}
/* les commandes posées sur la vidéo, en bas à droite, car la bulle de François occupe le coin gauche : lire et le son (Florent, 22/10/2026 : plus de barre d'avancée) */
.lecteur-commandes{position:absolute;right:clamp(8px,2cqi,20px);bottom:clamp(8px,2cqi,20px);z-index:3;display:flex;align-items:center;gap:8px}
/* l'écran de fin de la vidéo de Florent : fondu vers une carte bleue, le titre du conseil, puis le lien vers la décision ; les commandes restent au-dessus pour revoir */
.fin-video{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3cqi,28px);padding:6cqi;text-align:center;background:radial-gradient(120% 120% at 30% 20%,var(--blue-2) 0%,var(--blue) 55%,var(--blue-fonce) 100%);color:#fff;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s .9s}
.ecran.fini .fin-video{opacity:1;visibility:visible;transition:opacity .9s var(--ease)}
.ecran.fini .lecteur-commandes{display:none}
.fin-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fin-suite.fin-revoir{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.fin-suite.fin-revoir:hover{background:rgba(255,255,255,.14)}
#exDecision{scroll-margin-top:96px}
/* la phrase en cours de la vidéo de François, tirée de son fichier de sous-titres, au même endroit que les sous-titres incrustés de la vidéo de Florent */
.ecran-st{position:absolute;left:50%;bottom:clamp(8px,2.6cqi,26px);z-index:2;max-width:52%;padding:.3em .65em;border-radius:8px;background:rgba(11,18,32,.78);color:#fff;font:600 clamp(10px,2.3cqi,22px)/1.3 var(--sans);text-align:center;transform:translateX(-50%);opacity:0;transition:opacity .15s;pointer-events:none}
.ecran-st.on{opacity:1}
.fin-titre{margin:0;font:800 clamp(26px,7cqi,64px)/1.02 var(--sans);letter-spacing:-.03em;transform:translateY(10px);transition:transform .9s var(--ease)}
.ecran.fini .fin-titre{transform:none}
.fin-suite{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:var(--r-rond);background:#fff;color:var(--blue-ink);font:700 clamp(13px,2.2cqi,16px)/1 var(--sans);cursor:pointer;box-shadow:0 14px 30px -16px rgba(13,18,32,.7)}
.fin-suite span{display:inline-flex}.fin-suite svg{width:16px;height:16px}
.fin-suite:hover{background:var(--blue-soft)}
.fin-suite:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.fin-video,.ecran.fini .fin-video,.fin-titre{transition:none}}
.btn-rond{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--trait-fort);color:var(--t1)}
.btn-rond svg{width:16px;height:16px}
.btn-son{display:grid;place-items:center;flex:none;width:44px;height:44px;cursor:pointer;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:inset 0 0 0 1px var(--trait-fort);color:var(--t1)}
/* le libellé reste lu par les lecteurs d'écran, mais l'icône seule laisse la place aux sous-titres incrustés */
.btn-son span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn-son svg{width:18px;height:18px}
/* coupé, le bouton son devient une pastille bleue « Activer le son » qui appelle le clic : un halo qui s'étend, puis l'icône qui tremble (Florent, 22/10/2026) */
.btn-son.muet{width:auto;grid-auto-flow:column;gap:8px;padding:0 16px 0 13px;border-radius:999px;background:var(--blue);color:#fff;font:600 14.5px/1 var(--sans);white-space:nowrap;box-shadow:0 0 0 0 rgba(37,99,235,.6),0 8px 20px -6px rgba(37,99,235,.8)}
.btn-son.muet span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
@media (prefers-reduced-motion:no-preference){
  .btn-son.muet{animation:son-halo 2s ease-out infinite}
  .btn-son.muet svg{animation:son-tremble 2s ease-in-out infinite}
}
@keyframes son-halo{0%{box-shadow:0 0 0 0 rgba(37,99,235,.7),0 8px 20px -6px rgba(37,99,235,.8)}70%,100%{box-shadow:0 0 0 16px rgba(37,99,235,0),0 8px 20px -6px rgba(37,99,235,.8)}}
@keyframes son-tremble{0%,55%,85%,100%{transform:none}60%{transform:rotate(-16deg) scale(1.15)}65%{transform:rotate(14deg) scale(1.15)}70%{transform:rotate(-10deg) scale(1.1)}75%{transform:rotate(6deg)}}
.btn-rond *,.btn-son *{pointer-events:none}
/* la décision, dans le fil : notre recommandation à gauche, la réponse du dirigeant à droite, puis le bandeau vert qui l'acte */
.fil-ex{display:flex;flex-direction:column;gap:14px;width:min(640px,100%);text-align:left}
.fil-ex .bulle-q{font-size:clamp(17px,1.4vw,20px)}
.msg-nous{align-items:flex-start}
.qui-ligne{display:inline-flex;align-items:center;gap:8px}
.duo-mini{display:inline-flex}
.duo-mini img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--bg)}
.duo-mini img+img{margin-left:-7px}
.bulle-nous{max-width:30em;padding:16px 20px;border-radius:26px 26px 26px 7px;background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait),var(--ombre);font:600 clamp(16px,1.3vw,18px)/1.35 var(--sans);letter-spacing:-.01em}
.ex-puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ex-puce{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-rond);background:var(--surface-2);font:600 13px/1.2 var(--sans);color:var(--t2)}
.ex-puce.reco{background:var(--blue-soft);color:var(--blue-ink)}
.coche-blanche{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:50%;background:#fff;color:var(--green);vertical-align:-4px}
.coche-blanche svg,.acte-coche svg{width:13px;height:13px}
.acte{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);background:var(--green-soft);font:600 15px/1.35 var(--sans);color:var(--green-ink);text-align:left}
.acte-coche{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff}
/* les deux repères : un cadre bleu clair regroupe les étapes, et son nom reprend le bleu et la graisse des mots en bleu du titre du comment */
.groupe{position:relative;margin-top:clamp(64px,9vh,104px);padding:clamp(48px,6vh,64px) clamp(16px,3vw,40px) clamp(40px,5vh,56px);border-radius:var(--r-xl);box-shadow:inset 0 0 0 2px rgba(32,96,224,.22)}
.repere{position:absolute;left:50%;top:0;padding:0 18px;background:var(--bg);font-size:var(--fs-h3);font-weight:var(--fw-titre);line-height:1.1;letter-spacing:-.035em;color:var(--blue);white-space:nowrap;transform:translate(-50%,-50%)}
/* le terrain en trois pièces reliées par des flèches, sous la vidéo de François : la carte du marché, la fiche d'appel, l'agenda.
   Des libellés de trois à cinq mots, et le rôle de chacun dans une étiquette. */
.trio{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1fr);align-items:stretch;gap:8px;width:100%}
.lecteur+.trio{margin-top:clamp(32px,5vh,48px)}
.piece{display:flex;flex-direction:column;padding:20px;text-align:left}
.piece-dessin{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:190px;margin-bottom:16px;padding:14px;border-radius:var(--r-md);background:var(--bg)}
.piece-dessin .grand-n{margin-top:10px}
.ex-fleche{align-self:center;justify-self:center;width:40px;height:24px;color:var(--t3)}
.lib{display:block;font:700 clamp(16px,1.35vw,19px)/1.2 var(--sans);letter-spacing:-.02em;color:var(--t1)}
.qui{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:var(--r-rond);font:600 12.5px/1.2 var(--sans);white-space:nowrap}
.qui::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.qui-nous{background:var(--blue-soft);color:var(--blue-ink)}
.qui-vous{background:var(--green-soft);color:var(--green-ink)}
.grand-n{display:block;font:800 clamp(34px,3.4vw,52px)/1 var(--mono);letter-spacing:-.05em;color:var(--blue)}
.grand-n.vert{color:var(--green-ink)}
.plan svg{width:100%;height:auto}
.plan .fond{fill:var(--blue-soft);stroke:#C9D6F2;stroke-width:2}
.plan circle{fill:var(--t4);transition:fill .5s var(--ease)}
.vu .plan .p-cible{fill:var(--blue);transition-delay:calc(var(--k) * 4ms + .3s)}
.fiche{padding:14px;border-radius:var(--r-md);background:var(--carte);box-shadow:inset 0 0 0 1px var(--trait-fort);text-align:left}
.fiche-tete{padding-bottom:10px;border-bottom:1px solid var(--trait);font:700 13px/1.2 var(--sans)}
.fiche-sec{margin-top:10px}
.fiche-sec small{display:block;font:700 10.5px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--t2)}
.trait{display:block;height:8px;margin-top:6px;border-radius:4px;background:var(--surface-2);width:var(--l,100%)}
.agenda{display:grid;grid-template-columns:repeat(var(--sem),minmax(0,1fr));gap:5px;text-align:center}
.agenda small{font:700 10.5px/1.2 var(--mono);color:var(--t2)}
.agenda .col{display:grid;gap:5px}
.agenda .jour{height:16px;border-radius:4px;background:var(--surface-2);transition:background-color .4s var(--ease)}
.vu .agenda .jour.rdv{background:var(--green);transition-delay:calc(var(--k) * 110ms + .5s)}

/* ---------- 9. Vous : la nuit monte sous l'exemple, les objectifs tournent dans le titre, puis le portrait suit le nom ---------- */
/* La nuit monte (version 1 de maquettes/rupture-cas.html, retenue par Florent le 20/10/2026) : le fond vit sur un calque découpé (clip-path).
   Le script pose --p de 0 à 1 pendant que le haut de la section passe du bas de l'écran au quart de sa hauteur :
   le calque part 140 px plus bas et 6 % plus étroit de chaque côté, puis il s'élargit jusqu'aux bords du panneau.
   Sans script ou en mouvement réduit, --p vaut 1 et le panneau est entier. Toute la section s'écrit en clair sur la nuit (contraste de 4,5:1 au moins),
   et --bg y passe à la nuit pour les liserés des visages ronds.
   Depuis le 22/10/2026 (décision de François), le panneau est entier dès le chargement et le script ne pose plus --p :
   Lighthouse lisait le fond clair de la page derrière le calque découpé, donc il comptait les prénoms blancs comme illisibles.
   Seuls les textes apparaissent encore au défilement (.rv). */
.cas{position:relative;isolation:isolate;margin:0 var(--marge-panneau) var(--marge-panneau);padding-top:clamp(140px,20vh,220px);color:#fff;--bg:var(--nuit)}
.cas-nuit{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:var(--r-xl);background:var(--nuit);transition:opacity .7s var(--ease)}
/* les halos tiennent dans le haut du panneau ; leur calque s'efface vers le bas, sinon le halo violet, centré sur son bord, y laisserait une coupure nette */
.cas-nuit .halos{inset:-6% -4% auto;height:1200px;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
.cas-nuit .grille,.cas-nuit .etoiles{bottom:auto;height:900px}
.cas :focus-visible{outline-color:#fff}
.cas .surtitre{color:rgba(255,255,255,.72)}
.cas .titre-section{max-width:26ch;color:#fff}
.cas #objectifs{font-size:clamp(30px,2.8vw,46px)}
/* le mur d'avis : version 2 de maquettes/mur-avis.html (« Les deux rangées »), retenue par Florent le 21/10/2026, sur la nuit qui monte avant la liste des dirigeants.
   Les deux rangées défilent en sens inverse. Le lecteur les arrête au survol ou avec le bouton de pause. Le bord estompé cache l'entrée et la sortie des avis. */
.mur-tete{max-width:820px;margin:0 auto clamp(36px,5vh,56px);text-align:center}
.cas .mur-tete .titre-section{max-width:none}
.mur-tete em{font-style:normal}
.rangee{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rangee+.rangee{margin-top:8px}
.r-piste{display:flex;align-items:stretch;width:max-content;animation:defile var(--duree,90s) linear infinite}
.rangee.inverse .r-piste{animation-direction:reverse}
@keyframes defile{to{transform:translateX(-50%)}}
.rangees.pause .r-piste{animation-play-state:paused}
/* Les rangées attendent l'apparition du mur pour défiler : le lecteur voit d'abord le début de chaque rangée (04/11/2026). */
.rangees.rv:not(.vu) .r-piste{animation-play-state:paused}
@media (hover:hover){.rangees:hover .r-piste{animation-play-state:paused}}
.r-avis{display:flex;align-items:flex-start;gap:14px;width:var(--l,340px);margin-right:16px;padding:18px 22px 18px 18px;border-radius:var(--r);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.r-avis p{font:500 16px/1.42 var(--sans);color:#fff;text-wrap:pretty}
.r-avis small{display:block;margin-top:8px;font:500 13px/1.3 var(--sans);color:rgba(255,255,255,.62)}
.r-avis small b{font-weight:700;color:#fff}
.r-avis.bleu{background:var(--blue);box-shadow:0 18px 36px -20px rgba(32,96,224,.9)}
.r-avis.bleu small{color:rgba(255,255,255,.8)}
.r-av{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.r-av img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.r-av.logo img{width:78%;height:auto;max-height:60%;object-fit:contain}
.r-av.ini{background:var(--blue-soft);font:700 14px/1 var(--sans);color:var(--blue-ink)}
.rangees-pied{display:flex;justify-content:center;margin-top:20px}
.btn-pause{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px 0 14px;border-radius:var(--r-rond);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font:600 14px/1 var(--sans);color:#fff}
.btn-pause svg{width:16px;height:16px}
.mur-suite{margin-top:clamp(110px,16vh,180px)}
/* l'objectif prend le dégradé des titres de nuit */
/* le titre garde la hauteur de son objectif le plus long, sans mesure au chargement (22/10/2026) : le script pose dans la même cellule un fantôme caché,
   dont le texte vient des attributs data-t et dont les dix objectifs s'empilent ; le plus large fixe donc la hauteur du titre */
.ob-titre{display:grid;grid-template-columns:minmax(0,1fr)}
.ob-vrai,.ob-fantome{grid-area:1/1}
.ob-fantome{visibility:hidden}
.ob-fantome [data-t]::before{content:attr(data-t)}
.ob-pile{display:inline-grid;baseline-source:last}
.ob-pile>span{grid-area:1/1}
.ob-roule{display:inline-block;background:var(--degrade-titre);-webkit-background-clip:text;background-clip:text;color:transparent}
.ob-roule.entre{animation:ob-entre var(--t-2) var(--ease)}
@keyframes ob-entre{from{opacity:0;transform:translateY(.45em)}}
.ob-liste{display:flex;flex-wrap:wrap;gap:8px;max-width:1000px;margin:28px 0 48px}
.ob-liste li{padding:9px 16px;border-radius:var(--r-rond);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font:500 15px/1.2 var(--sans);color:rgba(255,255,255,.86);transition:background-color var(--t-2),color var(--t-2),box-shadow var(--t-2)}
.ob-liste li.on{background:var(--blue);color:#fff;box-shadow:0 12px 24px -12px rgba(32,96,224,.9)}
/* la liste des dirigeants : un nom par ligne, « Bonjour » glisse devant le nom actif */
.suit-cadre{max-width:1480px;margin:0 auto;padding:0 var(--gouttiere)}
.suit{position:relative;overflow-x:clip}
.suit-liste{padding:18vh 0 max(45vh,480px)}
.suit-liste li{border-bottom:1px solid rgba(255,255,255,.16)}
.suit-liste .ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:4px 0;border-radius:var(--r-sm)}
.suit-liste b{font-size:clamp(40px,5.6vw,92px);font-weight:var(--fw-titre);line-height:1.04;letter-spacing:-.05em;color:rgba(255,255,255,.55);transition:color .5s}
.suit-liste li.actif b{color:#fff}
.salut{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;vertical-align:bottom;opacity:0;color:var(--blue-light);transition:max-width .5s var(--ease),opacity .3s,padding .5s var(--ease)}
li.actif .salut{max-width:5em;padding-right:.25em;opacity:1}
button.ligne{width:100%;text-align:left}
.marques{display:inline-flex;gap:8px}
.marque{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:var(--r-rond);background:rgba(255,255,255,.1);font-size:13px;font-style:normal;font-weight:600;color:rgba(255,255,255,.86);transition:background-color var(--t-2),color var(--t-2)}
.marque svg{width:14px;height:14px}
li.actif .marque{background:#fff;color:var(--blue)}
li.actif .son{background:var(--blue);color:#fff}
button.ligne[aria-pressed="true"] .son{background:#fff;color:var(--t1)}
/* la pastille du cas : un rond clair au repos, blanc quand le nom est actif */
.lire{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background-color var(--t-2),color var(--t-2),box-shadow var(--t-2)}
.lire svg{width:16px;height:16px;transition:transform var(--t-2) var(--ease)}
li.actif .lire{background:#fff;color:var(--blue);box-shadow:0 14px 30px -14px rgba(5,10,25,.6)}
a.ligne:hover .lire svg{transform:translateX(3px)}
/* le portrait qui suit */
.suiveur{position:absolute;left:0;top:0;z-index:2;width:360px;margin:0;pointer-events:none;will-change:transform}
.portrait{position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r-xl);background:radial-gradient(120% 90% at 30% 20%,#fff 0%,#DCE4F2 70%);box-shadow:var(--ombre-flottante)}
.portrait>*{animation:arrive var(--t-2) var(--ease) both}
.portrait .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.initiales{font-size:88px;font-weight:600;letter-spacing:-.04em;color:var(--blue-ink);opacity:.75}
.suiveur .logo-client{left:16px;bottom:16px;height:68px;padding:0 18px;border-radius:var(--r-md)}
.suiveur .logo-client img{height:34px;max-width:200px}
.suiveur .logo-client img.carre{height:52px}
.suiveur figcaption{margin-top:12px;padding:16px 18px;border-radius:var(--r-md);background:var(--blue);box-shadow:0 20px 40px -24px rgba(12,27,67,.45);font-size:14.5px;line-height:1.45;color:#fff}
.suiveur figcaption .role{display:block;margin-bottom:4px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.tags-dir{display:flex;flex-wrap:wrap;gap:6px;pointer-events:none}
.tags-dir span{padding:6px 11px;border-radius:var(--r-rond);font:600 12.5px/1 var(--sans);white-space:nowrap}
.suiveur .tags-dir{position:absolute;z-index:2;top:16px;left:16px;right:16px}
.suiveur .tags-dir span{background:rgba(255,255,255,.92);color:var(--t1);box-shadow:0 8px 20px -12px rgba(13,18,32,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* les vidéos tournées par nous (en marque blanche pour Adrien) : la pastille dit qui a filmé, car Johann et Jean-François parlent de leur école et non de nous */
.tags-dir .filme{display:inline-flex;align-items:center;gap:5px}
.tags-dir .filme svg{width:13px;height:13px;flex:none}
.suiveur .tags-dir .filme{background:var(--blue);color:#fff}
/* la citation sort de la photo comme une bulle de bande dessinée */
.bulle{position:absolute;z-index:3;top:-9%;left:calc(100% - 64px);width:300px;padding:18px 20px 16px;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 6px;background:var(--blue);color:#fff;box-shadow:0 24px 50px -24px rgba(12,27,67,.7);transform-origin:0 100%;animation:bulle .55s var(--spring) .25s both}
.bulle::after{content:"";position:absolute;left:-2px;bottom:-14px;width:28px;height:22px;background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%)}
.bulle q{display:block;font-size:21px;line-height:1.24;letter-spacing:-.02em;font-weight:600;quotes:"« " " »"}
.bulle small{display:block;margin-top:8px;font-size:12.5px;opacity:.75}
.suiveur.gauche .bulle{left:auto;right:calc(100% - 64px);border-radius:var(--r-xl) var(--r-xl) 6px var(--r-xl);transform-origin:100% 100%}
.suiveur.gauche .bulle::after{left:auto;right:-2px;clip-path:polygon(0 0,100% 0,100% 100%)}
@keyframes bulle{from{opacity:0;transform:scale(.3) rotate(-6deg)}}
/* au survol d'un nom qui a un cas, le portrait affiche un rond « Découvrir » sous la souris */
.curseur{position:absolute;z-index:4;left:-84px;top:calc(30% - 44px);display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#fff;color:var(--t1);font-size:13px;font-weight:600;line-height:1.15;text-align:center;opacity:0;transform:scale(.4);transition:opacity var(--t-1),transform var(--t-2) var(--spring)}
.suiveur.survol-cas .curseur{opacity:1;transform:none}
.suiveur.duo .curseur{display:none}
@keyframes arrive{from{opacity:0;transform:scale(1.06)}}
/* la dernière ligne : nous deux, avec la mention « Et nous » */
.suit-liste li.nous-ligne{margin-top:56px;border-top:2px solid var(--blue-light);scroll-margin-top:40vh}
li.nous-ligne::before{content:"Et nous";display:block;padding-top:16px;font-size:var(--fs-surtitre);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue-light)}
.suit-liste li.nous-ligne b{color:#AFBDF7}
.suit-liste li.nous-ligne.actif b{color:#fff}
/* son survol montre nos deux photos séparées, qui arrivent l'une après l'autre */
.suiveur.duo{width:500px}
.suiveur.duo .portrait{display:grid;grid-template-columns:1fr 1fr;gap:24px;place-items:start stretch;aspect-ratio:auto;overflow:visible;background:none;border-radius:0;box-shadow:none}
.suiveur.duo .portrait>.duo-col{display:block;animation:duo .6s var(--spring) both}
.suiveur.duo .portrait>.duo-col+.duo-col{margin-top:48px;animation-delay:.09s}
.suiveur.duo figcaption{display:none}
.duo-photo{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:var(--ombre-flottante);transform:rotate(-3deg)}
.duo-col+.duo-col .duo-photo{transform:rotate(3deg)}
.suiveur .duo-photo .logo-client{left:12px;bottom:12px;height:50px;padding:0 14px;border-radius:var(--r-md)}
.suiveur .duo-photo .logo-client img{height:26px}
.duo-legende{display:block;margin-top:12px;padding:14px 16px;border-radius:var(--r-md);background:#fff;box-shadow:0 20px 40px -24px rgba(12,27,67,.45);font-size:17px;font-weight:600;line-height:1.3;color:var(--t1)}
@keyframes duo{from{opacity:0;transform:translateY(28px) scale(.94)}}

/* Le bleu de « nous » : quand nos photos s'affichent, le bleu de la marque remplit l'écran à la place de la nuit des clients.
   Il vit sur un calque fixe qui ne change que d'opacité ; le panneau de nuit de la liste s'efface en même temps, pour ne laisser aucun bord entre les deux.
   Sur ce bleu, les textes clairs passent au blanc ou à --sur-bleu, car le bleu clair de la nuit n'y serait plus lisible. */
.ciel-fond{position:fixed;inset:0;z-index:-1;background:var(--ciel);opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.fond-nous .ciel-fond{opacity:1}
.fond-nous .cas-nuit{opacity:0}
.fond-nous .duo-titre{color:#fff}
.fond-nous .duo-titre em{color:var(--sur-bleu)}
.fond-nous .suit-liste b{color:rgba(255,255,255,.72)}
.fond-nous .suit-liste li.actif b,.fond-nous li.nous-ligne::before{color:#fff}
.fond-nous .suit-liste li.nous-ligne{border-top-color:rgba(255,255,255,.6)}
.fond-nous .salut{color:var(--sur-bleu)}
.fond-nous .suiveur figcaption{background:var(--blue-ink)}
.fond-nous .duo-liseret{border-color:var(--blue-ink)}
.duo-titre,.duo-titre em{transition:color .5s}

/* ---------- 10. Nous : nos deux photos quittent le suiveur, grandissent et se rejoignent au centre ---------- */
.duo-suite{position:relative;height:300vh}
.duo-scene{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:84px 0 28px;overflow:hidden}
.duo-paire{--col:min(28vw,30vh)}
.duo-photos{position:relative;display:flex;justify-content:center}
.duo-photos .duo-fig{width:var(--col)}
/* nos prénoms sur une seule ligne, l'esperluette en Caveat (version 4 de maquettes/prenoms-duo.html, choisie par Florent le 20/10/2026) ;
   la ligne passe devant l'ombre des photos, qui la grisait */
.duo-noms{position:relative;z-index:1;margin:18px 0 0;text-align:center;font:600 clamp(20px,1.5vw,24px)/1.2 var(--sans);letter-spacing:-.015em;color:var(--t1)}
.duo-noms span{margin:0 .3em 0 .15em;font:700 1.5em/1 "Caveat","Segoe Print",cursive;color:var(--blue)}
.fond-nous .duo-noms{color:#fff}
.fond-nous .duo-noms span{color:var(--sur-bleu)}
.duo-fig{position:relative;aspect-ratio:4/5;margin:0;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 50px 90px -50px rgba(12,27,67,.6)}
/* sur grand écran, nos photos restent cachées jusqu'à la fin du vol, car leurs doubles volent à leur place */
@media (min-width:701px){.js .duo-fig{visibility:hidden}}
.duo-fig.g{border-radius:var(--r-xl) 0 0 var(--r-xl)}
.duo-fig.d{border-radius:0 var(--r-xl) var(--r-xl) 0}
.duo-fig img.photo,.vol img.photo{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.duo-fig .logo-client,.vol .logo-client{left:12px;bottom:12px;height:50px;padding:0 14px;border-radius:var(--r-md)}
.duo-fig .logo-client img,.vol .logo-client img{height:26px}
.duo-noms{transition:opacity var(--t-2) var(--ease),color .5s}
.js .duo-noms{opacity:0}
.duo-suite.pose .duo-fig{visibility:visible}
.duo-suite.pose .duo-noms{opacity:1}
/* nos deux logos glissent jusqu'à la jointure et s'y fondent en un seul */
.duo-fig .logo-client{transition:left var(--t-2) var(--ease),transform var(--t-2) var(--ease)}
.duo-suite.pose .duo-fig.g .logo-client{left:100%}
.duo-suite.pose .duo-fig.d .logo-client{left:0;transform:translateX(-100%)}
.duo-logo{left:50%;bottom:18px;z-index:4;height:64px;padding:0 18px;border-radius:16px;transform:translateX(-50%);opacity:0;transition:opacity .3s var(--ease)}
.duo-logo img{height:34px}
.duo-suite.pose .duo-logo{opacity:1;transition:opacity .4s .32s var(--ease)}
/* quand nos photos se touchent, un liseré bleu fait le tour de nos deux photos */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.duo-liseret{position:absolute;z-index:4;inset:0;border:6px solid var(--blue);border-radius:var(--r-xl);pointer-events:none;--a:0deg;-webkit-mask:conic-gradient(from 180deg,#000 var(--a),transparent 0);mask:conic-gradient(from 180deg,#000 var(--a),transparent 0);transition:--a .25s var(--ease)}
.duo-suite.pose .duo-liseret{--a:360deg;transition:--a .9s .3s var(--ease)}
.duo-titre{max-width:22ch;margin:0 auto;padding:0 16px;text-align:center}
.br-large{display:none}
@media (min-width:901px){.br-large{display:inline}.cas #objectifs,.duo-titre{max-width:none}}
.duo-titre em{font-style:normal;color:var(--blue)}
.js .duo-scene .actions{opacity:var(--c,0);transform:translateY(calc((1 - var(--c,0)) * var(--dist)))}
.duo-vol{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none;visibility:hidden}
.duo-vol.vole{visibility:visible}
.vol{position:absolute;left:0;top:0;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 50px 90px -50px rgba(12,27,67,.6);will-change:transform}
.suit.passe .suiveur{visibility:hidden}
@media (min-width:901px){.duo-titre{font-size:clamp(28px,min(3.4vw,5.4vh),56px)}}

/* ---------- 11. Les dossiers : six tuiles, le nom du dossier en grand au-dessus de sa phrase, avec un petit dessin ---------- */
.conv{padding:var(--section) 0}
.conv-tete{margin:0 auto clamp(40px,6vh,64px);text-align:center;text-wrap:balance}
.conv-tete em{font-style:normal;color:var(--blue)}
.tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tuile{position:relative;display:flex;flex-direction:column;min-height:300px;padding:26px 26px 22px;border-radius:var(--r-xl);background:var(--carte);box-shadow:var(--ombre);color:var(--t1)}
.tuile-dessin{display:block;width:88px;height:64px;color:var(--blue)}
.tuile-dessin svg{width:100%;height:100%;overflow:visible}
.tuile-nom{margin-top:28px;font:700 clamp(26px,2.3vw,34px)/1.05 var(--sans);letter-spacing:-.035em}
.tuile-phrase{margin-top:10px;font:500 16px/1.45 var(--sans);color:var(--t2);text-wrap:pretty}
.tuile-lien{display:flex;margin-top:auto;padding-top:14px;color:var(--blue)}
.tuile.sans{background:var(--surface-2);box-shadow:none}
.tuile.sans .tuile-dessin{color:var(--t3)}
/* la flèche sert aussi au bouton « Dire bonjour » des pages intérieures */
.fleche{width:16px;height:16px;margin-top:calc((1.4em - 16px) / 2);fill:none;stroke:var(--t3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--t-1),transform var(--t-2) var(--ease)}
.tuile-lien .fleche{margin-top:0;stroke:currentColor}
a.tuile:focus-visible{outline-offset:4px}
/* sur tablette, deux tuiles par ligne */
@media (max-width:980px){.tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* la tuile monte au survol par « translate », pour ne pas toucher au « transform » de l'apparition et à son délai */
.tuile{transition:translate var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease)}
@media (prefers-reduced-motion:no-preference){
  .js .tuile.rv{transition:opacity var(--t-3) var(--ease) calc(var(--k,0) * var(--pas)),transform var(--t-3) var(--ease) calc(var(--k,0) * var(--pas)),translate var(--t-2) var(--ease),box-shadow var(--t-2) var(--ease)}
}
@media (hover:hover){
  a.tuile:hover{translate:0 -4px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 24px 50px -18px rgba(15,23,42,.22)}
  a.tuile:hover .fleche{transform:translateX(4px)}
}

/* ---------- 12. La fin, de nuit, avec un lever de soleil, puis le pied qui partage la nuit ---------- */
.fin{transform-origin:50% 0}
.boucle{position:relative;padding:150px 0}
/* en bas de page, les deux halos passent en haut, car le lever de soleil occupe le bas */
.boucle .halos{background:radial-gradient(900px 480px at 92% 18%,rgba(32,96,224,.55),transparent 62%),radial-gradient(700px 420px at 0% 18%,rgba(139,92,246,.28),transparent 60%)}
/* la lueur du lever de soleil déborde sur le pied, pour éviter une coupure nette */
.aube{left:50%;bottom:-48%;width:150%;max-width:1900px;aspect-ratio:2/1;border-radius:50%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,206,110,.7),rgba(255,150,80,.3) 40%,rgba(139,92,246,.18) 66%,transparent 100%);animation:aube 9s ease-in-out infinite alternate}
@keyframes aube{from{opacity:.75;transform:translateX(-50%) scale(.97)}to{opacity:1;transform:translateX(-50%) scale(1.03)}}
.boucle-in{position:relative;z-index:2;text-align:center}
/* les citations qui tournent au-dessus du titre de fin */
.boucle-cit{max-width:620px;min-height:84px;margin:0 auto 30px;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.boucle-cit.change{opacity:0;transform:translateY(6px)}
.boucle-cit p{font:500 19px/1.45 var(--sans);color:rgba(255,255,255,.78)}
.boucle-cit p::before{content:"« "}
.boucle-cit p::after{content:" »"}
.boucle-cit figcaption{margin-top:8px;font:600 13px/1.3 var(--sans);letter-spacing:.06em;color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){.boucle-cit{transition:none}.boucle-cit.change{transform:none}}
/* le titre tient sur deux lignes en grand écran (François, 16/10/2026) */
.boucle-titre{color:#fff}
.br-large{display:none}
@media (min-width:900px){.br-large{display:inline}}
.boucle .actions{margin-top:48px}
.pied{position:relative;z-index:3;max-width:1180px;margin:0 auto;padding:0 var(--gouttiere)}
.pied-carte{padding:56px 72px 34px}
@media (prefers-reduced-motion:no-preference){
  .js .pied-carte{opacity:0;transform:translateY(var(--dist));transition:opacity var(--t-3) var(--ease),transform var(--t-3) var(--ease)}
  .js .pied-carte.vu{opacity:1;transform:none}
}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--trait-nuit)}
.pied-haut .logo{height:56px;width:auto;margin-bottom:18px}
.pied-haut p{max-width:34ch;margin-bottom:26px;font-size:var(--fs-texte);line-height:1.55;color:rgba(255,255,255,.72)}
.pied-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.pied h3{margin-bottom:14px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:#fff}
/* chaque ligne du pied a la même hauteur, lien ou simple texte */
.pied li{display:flex;align-items:center;min-height:32px;color:rgba(255,255,255,.72);font-size:15px}
.pied li a{display:inline-flex;align-items:center;gap:6px;min-height:32px;color:rgba(255,255,255,.72);transition:color var(--t-1)}
.pied li a:hover{color:#fff}
.pied-bas{display:flex;flex-wrap:wrap;align-items:center;gap:24px;padding-top:24px;font-size:13.5px;color:rgba(255,255,255,.72)}
.pied-bas>a{display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-1)}
.pied-bas>a:hover{color:#fff}
.reseaux{display:flex;gap:10px;margin-left:auto}
.res-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-sm);background:rgba(255,255,255,.12);transition:transform var(--t-2) var(--spring),background-color var(--t-1)}
.res-ico svg{width:18px;height:18px;fill:#fff}
@media (hover:hover){.res-ico:hover{transform:translateY(-2px);background:rgba(255,255,255,.2)}}

/* ---------- Tablette ---------- */
@media (max-width:1080px){
  .pied-haut{grid-template-columns:1fr 1fr}
  .pied-haut>div:first-child{grid-column:span 2}
}
/* les trois pièces du terrain de l'exemple passent l'une sous l'autre, et leurs flèches pointent vers le bas */
@media (max-width:980px){
  .trio{grid-template-columns:minmax(0,1fr);gap:6px}
  .ex-fleche{transform:rotate(90deg)}
}
@media (max-width:900px){
  .duo-titre{font-size:30px}
}

/* ---------- 13. Téléphone (sous 700 px) ----------
   Les jetons de mise en page se resserrent ; le script de fin de page remplace la liste des dirigeants par des visages ronds
   qui ouvrent une story, et rapproche nos deux photos sans vol. Le script du pied construit l'accordéon. */
@media (max-width:700px){
  :root{--gouttiere:16px;--marge-panneau:8px;--r-xl:20px;--section:72px;--dist:18px}
  /* la barre : le logo court, Pourquoi, Comment et « Dire bonjour » */
  .nav{left:var(--gouttiere);right:var(--gouttiere);padding:5px 5px 5px 12px;transform:translateY(calc(-100% - 20px))}
  .nav.visible,.nav:focus-within{transform:none}
  .nav>a:first-child{margin-right:auto}
  .nav .logo{height:30px}
  .nav-liens .nav-large{display:none}
  .nav-liens a{padding:0 10px;font-size:14.5px}
  .nav-cta{margin-left:2px;padding:0 14px;font-size:14.5px}
  .main-fen,.nuage{display:none}
  /* le pourquoi */
  .heros{padding:104px 0 80px}
  .heros-barre{top:18px}
  .anniv{margin-bottom:20px;font-size:12px}
  .logo-heros img{height:46px}
  .titre-heros{font-size:clamp(34px,9.6vw,42px);line-height:1.04}
  .titre-heros .ligne{white-space:normal;text-wrap:balance}
  .heros .actions{margin-top:34px}
  /* le comment */
  .manif{height:auto;padding:88px 0 72px}
  .manif-scene{position:static;height:auto}
  .manif-phrase{font-size:31px;line-height:1.1}
  .manif-suite{margin-top:30px}
  .question-posee{white-space:normal;text-align:center;font-size:14.5px}
  .saisie{min-height:58px;padding-left:22px;font-size:16px}
  .saisie-envoi{width:42px;height:42px}
  /* l'exemple */
  .bulle-q{padding:14px 18px;font-size:17px}
  .ecran{border-radius:var(--r)}
  /* sur téléphone, les deux boutons rapetissent pour finir avant la bande des sous-titres */
  .lecteur-commandes{gap:6px}
  .btn-rond,.btn-son{width:32px;height:32px}
  .groupe{border-radius:var(--r)}
  .repere{padding:0 10px;font-size:22px}
  /* vous */
  .cas{padding:96px 0 64px}
  /* sur téléphone, nous centrons chaque carte dans sa rangée sans l'étirer */
  .r-piste{align-items:center}
  .r-avis{width:min(var(--l,300px),330px);padding:14px 16px 14px 14px}
  .r-avis p{font-size:14.5px}
  .r-av{width:34px;height:34px}
  .mur-suite{margin-top:48px}
  .ob-liste{gap:6px;margin:22px 0 0}
  .ob-liste li{padding:8px 12px;font-size:13.5px}
  .mc-visages{display:flex;gap:12px;margin:22px calc(-1 * var(--gouttiere)) 0;padding:4px var(--gouttiere) 8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 var(--gouttiere);scrollbar-width:none}
  .mc-visages::-webkit-scrollbar{display:none}
  .mc-visage{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;width:94px;scroll-snap-align:start;font-size:14px;font-weight:500;line-height:1.2;text-align:center;color:#fff}
  .mc-rond{position:relative;display:block;width:92px;height:92px;padding:3px;border-radius:50%;background:conic-gradient(from 200deg,var(--blue),#7FA6E8,var(--blue))}
  .mc-rond>span{position:relative;display:grid;place-items:center;width:100%;height:100%;border:3px solid var(--bg);border-radius:50%;overflow:hidden;background:radial-gradient(120% 90% at 30% 20%,#fff 0%,#DCE4F2 70%)}
  .mc-visage.vu .mc-rond{background:var(--t4)}
  .mc-lire{position:absolute;right:0;bottom:2px;display:grid;place-items:center;width:30px;height:30px;border:3px solid var(--bg);border-radius:50%;background:var(--blue);color:#fff;box-shadow:0 6px 14px -6px rgba(32,96,224,.7)}
  .mc-lire svg{width:12px;height:12px;margin-left:2px}
  .mc-visage:first-child:not(.vu) .mc-rond{animation:mc-appel 2.2s var(--ease) infinite}
  @keyframes mc-appel{0%,100%{box-shadow:0 0 0 0 rgba(32,96,224,.45)}60%{box-shadow:0 0 0 12px rgba(32,96,224,0)}}
  .mc-rond img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
  .mc-ini{font-size:22px;font-weight:600;color:var(--blue-ink);opacity:.75}
  .mc-paire{display:flex;width:100%;height:100%}
  .mc-paire img{width:50%;height:100%;object-fit:cover;object-position:50% 30%}
  .mc-visage:focus-visible{outline:0}
  .mc-visage:focus-visible .mc-rond{outline:2px solid var(--blue);outline-offset:3px}
  /* la story plein écran */
  html.mc-bloque,html.mc-bloque body{overflow:hidden}
  .mc-story{position:fixed;inset:0;z-index:1000;background:rgba(5,7,12,var(--voile,1))}
  .mc-story[hidden]{display:none}
  .mc-st-carte{position:absolute;inset:0;overflow:hidden;background:var(--nuit);touch-action:none;user-select:none;-webkit-user-select:none;opacity:0;transform:scale(.94);transition:opacity .25s var(--ease),transform .3s var(--ease)}
  .mc-story.ouvert .mc-st-carte{opacity:1;transform:none}
  .mc-st-media{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 90% at 30% 20%,#fff 0%,#DCE4F2 70%)}
  .mc-st-media .photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;animation:arrive var(--t-2) var(--ease) both}
  .mc-st-media .initiales{font-size:120px}
  .mc-st-media .mc-paire{position:absolute;inset:0}
  .mc-st-voile{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(13,18,32,.55) 0%,rgba(13,18,32,0) 18%,rgba(13,18,32,0) 42%,rgba(13,18,32,.88) 100%)}
  .mc-st-barres{position:absolute;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;z-index:3;display:flex;gap:2px;pointer-events:none}
  .mc-st-barres i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
  .mc-st-barres b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
  .mc-st-tete{position:absolute;top:calc(max(10px,env(safe-area-inset-top)) + 12px);left:12px;right:8px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}
  .mc-st-tete .logo-client{position:static;height:40px;padding:0 11px}
  .mc-st-tete .logo-client img{height:20px;max-width:120px}
  .mc-st-tete .logo-client img.carre{height:30px}
  .mc-st-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
  .mc-st-actions button{pointer-events:auto}
  .mc-st-son{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:var(--r-rond);background:var(--blue);color:#fff;font-size:14px;font-weight:600}
  .mc-st-son svg{width:15px;height:15px}
  .mc-st-son[aria-pressed="true"]{background:#fff;color:var(--t1)}
  .mc-st-son[hidden]{display:none}
  .mc-st-fermer{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(13,18,32,.45);color:#fff}
  .mc-st-fermer svg{width:18px;height:18px}
  .mc-st-zone{position:absolute;top:0;bottom:0;z-index:2;-webkit-tap-highlight-color:transparent}
  .mc-st-zone.g{left:0;width:33%}
  .mc-st-zone.d{right:0;width:67%}
  .mc-st-zone:focus-visible{outline:2px solid #fff;outline-offset:-6px}
  .mc-st-bas{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 18px max(22px,env(safe-area-inset-bottom));color:#fff;pointer-events:none}
  .mc-st-bas a{pointer-events:auto}
  .mc-st-bas .tags-dir{margin-bottom:12px}
  .mc-st-bas .tags-dir span{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  .mc-st-nom{font:700 40px/1 var(--sans);letter-spacing:-.05em}
  .mc-st-nom span{display:block;margin-bottom:4px;font-size:.45em;letter-spacing:-.01em;color:#9DBCF0}
  .mc-st-role{margin-top:8px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.78)}
  .mc-st-enjeu{margin-top:8px;font-size:14.5px;line-height:1.45;color:#fff}
  .mc-st-bulle{position:relative;margin-top:16px;padding:14px 16px;border-radius:var(--r-xl) var(--r-xl) var(--r-xl) 6px;background:var(--blue);font-size:15.5px;line-height:1.45;box-shadow:0 24px 50px -24px rgba(0,0,0,.7);animation:bulle .55s var(--spring) .2s both}
  .mc-st-bulle q{display:block;font:600 19px/1.25 var(--sans);letter-spacing:-.02em;quotes:"« " " »"}
  .mc-st-bulle small{display:block;margin-top:8px;font-size:12.5px;opacity:.75}
  .mc-st-cas{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:14px;border-radius:var(--r-rond);background:#fff;color:var(--blue);font-size:15px;font-weight:600}
  .mc-st-cas svg{width:16px;height:16px}
  /* nous : la rencontre des deux photos sur un seul écran, sur le ciel */
  .duo-suite{height:auto;margin:0 var(--marge-panneau);border-radius:var(--r-xl);background:var(--ciel)}
  /* sur téléphone, le duo garde son propre panneau bleu, même sans .fond-nous : le bleu clair de la nuit n'y serait pas lisible */
  .duo-suite .duo-titre em,.duo-suite .duo-noms span{color:var(--sur-bleu)}
  .duo-suite .duo-liseret{border-color:var(--blue-ink)}
  .duo-scene{position:relative;height:auto;min-height:100vh;min-height:100svh;padding:56px 0 48px;gap:18px}
  .duo-paire{--col:calc(50vw - 24px)}
  .duo-fig{aspect-ratio:2/3;transition:transform .9s var(--spring),border-radius .5s var(--ease)}
  .duo-suite:not(.mc-joint) .duo-fig{border-radius:var(--r-xl)}
  .duo-suite:not(.mc-joint) .duo-fig.g{transform:translateX(-22px) rotate(-5deg) scale(.92)}
  .duo-suite:not(.mc-joint) .duo-fig.d{transform:translateX(22px) rotate(5deg) scale(.92)}
  .duo-suite:not(.mc-joint) .duo-liseret{opacity:0}
  .duo-fig .logo-client{left:8px;bottom:8px;height:36px;padding:0 9px;border-radius:10px}
  .duo-fig .logo-client img{height:19px}
  .duo-logo{bottom:14px;height:44px;padding:0 12px;border-radius:var(--r-sm)}
  .duo-logo img{height:24px}
  .duo-noms{margin-top:8px;font-size:19px;color:#fff}
  .duo-noms span{color:var(--blue-light)}
  .duo-titre{color:#fff}
  .duo-titre em{color:var(--blue-light)}
  .duo-scene .actions{padding:0 var(--gouttiere)}
  .js .duo-scene .actions{opacity:0;transform:translateY(var(--dist));transition:opacity .6s .9s var(--ease),transform .6s .9s var(--ease)}
  .duo-suite.mc-joint .actions{opacity:1;transform:none}
  .duo-vol{display:none}
  /* les dossiers : une tuile par ligne, le dessin passe à gauche du nom pour raccourcir chaque tuile */
  .tuiles{grid-template-columns:minmax(0,1fr);gap:14px}
  .tuile{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;align-content:start;min-height:0;padding:20px 20px 16px}
  .tuile-dessin{grid-row:1/span 3;width:52px;height:40px;margin-top:4px}
  .tuile-nom{grid-column:2;margin-top:0;font-size:24px}
  .tuile-phrase,.tuile-lien{grid-column:2}
  .tuile-lien{padding-top:8px}
  /* la fin et le pied : les colonnes en accordéon, des cibles de 44 px au moins */
  .boucle{padding:100px 0}
  .boucle-cit{min-height:100px;margin-bottom:24px}
  .boucle-cit p{font-size:16.5px}
  .boucle .actions{margin-top:36px}
  /* sur téléphone, nous retirons « Appeler Florent » de la fin, car le pied affiche déjà ce bouton (demande de Florent du 21/10/2026) */
  .pied{padding:0 10px}
  .pied-carte{padding:32px 12px 18px}
  .pied-haut{grid-template-columns:1fr;gap:0;padding-bottom:6px}
  .pied-haut>div:first-child{grid-column:auto;padding-bottom:22px}
  .pied-haut p{margin-bottom:20px}
  .mc-acc{border-top:1px solid var(--trait-nuit)}
  .pied .mc-acc h3{margin:0}
  .mc-acc-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;font:600 17px var(--sans);letter-spacing:-.01em;color:#fff;text-align:left}
  .mc-acc-btn svg{flex:none;width:18px;height:18px;color:rgba(255,255,255,.72);transition:transform var(--t-2) var(--ease)}
  .mc-acc-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
  .mc-acc ul{display:none;padding-bottom:12px}
  .mc-acc.ouvert ul{display:block}
  .pied li{min-height:44px;font-size:16px;line-height:1.3}
  .pied li a{min-height:44px;font-size:16px}
  .pied-bas{gap:0 20px;padding-top:10px}
}

/* ---------- 14. Sans animation : la page complète et immobile ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .toile{display:none}
  .manif{height:auto;padding:var(--section) 0}
  .manif-scene{position:relative;height:auto;min-height:60vh}
  .duo-suite{height:auto}
  .duo-scene{position:relative;height:auto;padding:var(--section) 0}
  .js .duo-fig{visibility:visible}
  .js .duo-noms{opacity:1}
  .duo-liseret{--a:360deg}
  .duo-fig .logo-client{display:none}
  .duo-logo{opacity:1}
  .js .duo-scene .actions{opacity:1;transform:none}
  .duo-vol{display:none}
  /* le mur d'avis ne défile plus seul : le lecteur fait glisser chaque rangée */
  .rangee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .r-piste{animation:none;padding:0 var(--gouttiere)}
}

/* Contraste lu par les robots : le prénom sous chaque visage reçoit le fond de nuit qu'il a déjà à l'écran (21/10/2026) */
.mc-visage>span:not(.mc-rond){background:var(--nuit)}

/* ---------- La ligne signée sous le titre du premier écran (choix de Florent du 22/10/2026 : version 3 de maquettes/ligne-dirigeants.html, sans « BtoB ») ---------- */
.signe-heros{display:inline-flex;align-items:center;gap:12px;margin:24px auto 0;padding:6px 18px 6px 6px;border-radius:var(--r-rond);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:500 clamp(15px,1.3vw,18px)/1.35 var(--sans);color:rgba(255,255,255,.84);text-align:left}
.signe-heros .duo{display:flex;flex:none}
.signe-heros img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--nuit)}
.signe-heros img+img{margin-left:-10px}
@media (max-width:600px){.signe-heros{margin-top:18px;padding-right:14px;font-size:14px}.signe-heros img{width:32px;height:32px}}

/* ---------- Le bouton de verre, sur fond de nuit : les trois boutons de contact (23/10/2026) ---------- */
.btn-verre{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.btn-verre .rond{background:rgba(255,255,255,.14);color:#fff}
@media (hover:hover){.btn-verre:hover{background:rgba(255,255,255,.15)}}