/* Celya — bento theme (accueil + pages métiers, FR/NL/EN)
   Fond aurore : canvas #aurora géré par bento.js (léger, pause hors écran,
   coupé si prefers-reduced-motion). Tuiles verre dépoli sur #070A14.
   Budget GPU : le flou est pré-calculé dans le canvas (aucun filter: sur un
   élément qui bouge), backdrop-filter réservé à la nav et au menu déroulant,
   toute animation hors écran est mise en pause par bento.js (.anim-off). */

:root{
  --bg:#070A14; --ink:#F2F5FF; --body:#CFD8EC; --soft:#AEB9D6;
  --line:rgba(255,255,255,.1); --glass:rgba(14,20,38,.86);
  --c1:#22D3EE; --c2:#4F7BFF; --c3:#A855F7;
  --grad:linear-gradient(110deg,var(--c1),var(--c2),var(--c3));
  --ok:#31D983;
  --h:'Geist',system-ui,sans-serif; --b:'Geist',system-ui,sans-serif; --a:'Instrument Serif',Georgia,serif;
  /* surfaces : trois paliers de blanc translucide, et rien d'autre */
  --surface-1:rgba(255,255,255,.04);   /* carte au repos */
  --surface-2:rgba(255,255,255,.06);   /* carte survolée / élevée */
  --surface-3:rgba(255,255,255,.09);   /* pastille, puce, élément sur carte */
  /* traits : --line est le seul trait par défaut, --line-strong la bordure accentuée ;
     les traits bleus disent « sélectionné / actif », jamais un simple contour */
  --line-strong:rgba(255,255,255,.16);
  --line-accent:rgba(79,123,255,.3);
  --line-accent-strong:rgba(79,123,255,.55);
  /* rayons : quatre, concentriques (un enfant ne dépasse jamais le rayon de son parent) */
  --r-sm:10px;   /* puces, champs, petites vignettes, icônes */
  --r-md:14px;   /* cartes internes, lignes de liste, bulles */
  --r-lg:26px;   /* cartes de section, panneaux, la vignette vidéo — 26 et non 22 : le bouton principal (51 px de haut, rayon effectif 25,5) doit rester sous le rayon de la carte qui le porte */
  --r-pill:99px; /* pilules, badges, ronds (un carré en 99px est un cercle) */
  --max:1180px;
  /* rythme vertical : deux pas, et deux seulement. --space-in sépare deux blocs
     d'un même chapitre, --space-out sépare deux chapitres. Fin des 180 px
     uniformes, qui ne disaient plus rien de la structure. */
  --space-in:96px;
  --space-out:200px;
  /* mouvement : trois courbes, deux durées */
  --ease-out:cubic-bezier(.22,1,.36,1);  /* micro-états : survol, couleur, opacité */
  --spring:cubic-bezier(.34,1.56,.64,1); /* entrées, panneaux, translations */
  --ease-reveal:cubic-bezier(.2,.7,.2,1); /* apparitions : courte, sans rebond, sans opacité */
  --dur-fast:.16s;
  --dur:.36s;
  /* échelle typographique : sept pas, trois interlignes. Un seul jeu pour toute
     la page — titres, texte et interface. Rien ne se règle plus en dur. */
  --fs-display:clamp(48px,5vw,72px); /* h1 de l'accueil, grands nombres */
  --fs-h1:clamp(38px,4.4vw,56px);    /* h1 des sous-pages, titres de chapitre */
  --fs-h2:clamp(30px,3.2vw,40px);    /* titres de section */
  --fs-h3:24px;                      /* titres de carte et de bloc */
  --fs-body:17px;                    /* tout ce qui se lit */
  --fs-small:14px;                   /* interface, légendes, méta */
  --fs-label:12px;                   /* capitales espacées, et elles seules */
  --lh-tight:1.04;                   /* très grands titres */
  --lh-heading:1.12;                 /* titres */
  --lh-body:1.65;                    /* texte courant */
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--body);font-family:var(--b);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* fallback sans JS : légère aurore statique + très légère variation de la base vers #0C1224 */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(55vw 55vw at 8% -6%,rgba(34,211,238,.13),transparent 62%),
             radial-gradient(60vw 60vw at 100% 12%,rgba(79,123,255,.12),transparent 62%),
             radial-gradient(52vw 52vw at 38% 108%,rgba(168,85,247,.10),transparent 62%),
             radial-gradient(130% 90% at 50% 0%,#0C1224 0%,rgba(12,18,36,0) 68%)}
/* aurore : le flou et la saturation sont calculés une fois par image DANS le canvas
   (bento.js), pas par le compositeur à chaque frame — aucun filter: ici */
#aurora{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.26}
/* grain : fine texture qui casse l'aspect lisse (4 % max) — le calque ne déborde
   que de 8 %, assez pour un déplacement de 3 % de sa taille */
body::after{content:'';position:fixed;inset:-8%;z-index:90;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  will-change:transform;animation:grain 9s steps(10) infinite}
/* hors écran, rien ne tourne : bento.js pose .anim-off sur chaque bloc sorti du viewport */
.anim-off,.anim-off *,.anim-off::before,.anim-off::after,.anim-off *::before,.anim-off *::after{animation-play-state:paused!important}
@keyframes grain{0%,100%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}30%{transform:translate(3%,-2%)}50%{transform:translate(-3%,2%)}70%{transform:translate(2%,3%)}90%{transform:translate(-2%,1%)}}
::selection{background:rgba(79,123,255,.45);color:#fff}
a{color:inherit;text-decoration:none}
b,strong{font-weight:700} /* bolder dans un parent en 700 donnait 900 : trois graisses, pas quatre */
small{font-size:var(--fs-small)} /* et non « smaller », qui tombait entre deux pas */
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap-n{max-width:840px;margin:0 auto;padding:0 22px}
.sec{margin-top:var(--space-out)}
.sec-hero{margin-top:40px}
/* haut seulement : deux marges basses qui s'effondraient l'une dans l'autre
   rendaient le rythme illisible. Il se lit maintenant de haut en bas. */
.freesec{margin:var(--space-out) 0 0;position:relative}
/* second bloc d'un chapitre : il ne recommence rien, il continue */
.sec-in,.freesec.sec-in{margin-top:var(--space-in)}
.fs-head{text-align:center;max-width:720px;margin:0 auto 56px}
.fs-head .kick{justify-content:center}
/* en-tête d'une section pleine largeur : un cran au-dessus du h2 de tuile,
   qui reste à --fs-h2 (.pc-head, .t-roi : ce sont des titres DANS la grille) */
.fs-head h2{font-size:var(--fs-h1)}

h1,h2,h3{font-family:var(--h);color:var(--ink);letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:-.04em}
/* accent éditorial : serif italique, un poil plus grand que le sans qu'il accompagne */
.it{font-family:var(--a);font-style:italic;font-weight:400;letter-spacing:-.015em;font-size:1em}
h1 .it{font-weight:400;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-heading);letter-spacing:-.03em;margin-bottom:10px}
/* chiffres tabulaires : la règle est en fin de feuille, après tous les raccourcis font: qui la remettraient à zéro */
p{text-wrap:pretty}
h3{font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-heading);margin-bottom:8px}
.gradtxt,h2 .it,.proof b,.roi-ctl output,.mrow i{background:var(--grad);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gpan 8s ease-in-out infinite alternate}
@keyframes gpan{to{background-position:88% 0}}
.kick{display:flex;align-items:baseline;gap:12px;font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0;margin-bottom:16px}
.kick span,.kick b{white-space:nowrap} /* une accroche ne passe jamais à la ligne */
.kick b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700;letter-spacing:.12em}
/* accroche de marque : le « C » fléché du favicon en tête de l'accroche du héro.
   overflow visible — le trait de 9 et les bouts ronds dépassent la boîte géométrique */
.kick-brand .sym{width:16px;height:16px;flex:none;overflow:visible;align-self:center}

/* ---------- nav ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(7,10,20,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px;min-height:67px}
/* logo : viewBox recadrée sur le dessin, donc la hauteur CSS est la hauteur vue.
   overflow visible — les traits de 9 px et la lueur dépassent la boîte géométrique */
.nav-logo{height:28px;width:auto;display:block;overflow:visible}
.nav-links{display:flex;gap:22px;font-size:var(--fs-small);color:var(--soft);margin-left:auto}
.nav-links a:hover{color:var(--ink)}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;font:500 var(--fs-small)/1 var(--b)}
.lang a{padding:6px 10px;border-radius:var(--r-pill);color:var(--soft)}
.lang a.on{background:var(--surface-3);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 var(--fs-small)/1 var(--b);border-radius:var(--r-pill);padding:13px 22px;transition:transform var(--dur-fast) var(--spring);cursor:pointer}
.btn-ghost:hover{transform:translateY(-2px)}
.btn{position:relative;overflow:hidden}
.btn-grad::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-130%)}
.btn-grad:hover::after{transform:translateX(130%);transition:transform var(--dur) var(--spring)}
.btn-grad{background:var(--grad);color:#06080F}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:var(--surface-1)}
.btn svg{width:17px;height:17px;flex:none}
.btn-big{font-size:var(--fs-body);padding:17px 28px;box-shadow:0 8px 34px rgba(79,123,255,.35)}
/* Un seul mécanisme pour les deux libellés du CTA, mobile compris : c'est la
   largeur du CONTENEUR qui décide, pas celle de l'écran. Un héro de 7 colonnes
   à 1440 est aussi étroit qu'un téléphone (567 px de contenu) — il prend donc
   le libellé court, sinon les deux boutons s'empilent (387 + 12 + 193 > 567).
   Le qualificatif « Notre réceptionniste IA · » repart alors dans la preuve,
   où il ne dispute plus la place au bouton : c'est .cta-q, qui remplace la
   sous-ligne <small class="cta-sub"> supprimée du DOM.
   Les quatre conteneurs qui portent un .btn-big sont relevés par grep :
   .t-hero, .hero-txt, .cta-free .wrap, .art-cta. Ils sont nommés là où ils
   sont définis, chacun avec son container-type:inline-size.
   639 px : au-dessus, « Appelez Janet, notre réceptionniste IA » (387) et
   « Prendre rendez-vous » (193) tiennent côte à côte avec leur gouttière. */
.cta-s,.cta-q{display:none}
@container (max-width:639px){
  .cta-l{display:none}
  .cta-s,.cta-q{display:inline}
}
/* CTA de nav : plus haut que large en proportion du logo — largeur ≤ 1,5 × celle du
   logo (132 px pour 88). « Appeler Janet » est la plus longue des trois langues :
   c'est elle qui fixe le pas de type et le padding. */
.nav-cta{height:36px;padding:0 13px;font-size:var(--fs-small);gap:6px}
.nav-cta svg{width:13px;height:13px}

/* ---------- menu déroulant « Votre métier » ---------- */
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nav-drop .car{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform var(--dur-fast) var(--spring)}
.nav-drop:hover .car,.nav-drop:focus-within .car{transform:rotate(180deg)}
/* pont invisible : le survol ne se coupe pas entre le lien et le panneau */
.nav-drop:hover::before,.nav-drop:focus-within::before{content:'';position:absolute;left:-24px;right:-24px;top:100%;height:26px}
.drop-panel{position:absolute;top:calc(100% + 20px);left:50%;width:296px;padding:10px;border-radius:var(--r-lg);border:1px solid var(--line-strong);background:rgba(12,17,32,.88);backdrop-filter:blur(20px) saturate(1.3);box-shadow:0 30px 70px rgba(4,8,20,.6);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring),visibility 0s linear .3s}
.nav-drop:hover .drop-panel,.nav-drop:focus-within .drop-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.drop-panel a{display:flex;align-items:center;gap:13px;padding:8px 10px;border-radius:var(--r-md);color:var(--ink);transition:background var(--dur) var(--ease-out)}
.drop-panel a:hover{background:var(--surface-2)}
.drop-panel img{width:56px;height:42px;object-fit:cover;border-radius:var(--r-sm);flex:none;border:1px solid var(--line)}
.drop-panel b{font:700 var(--fs-small)/1.3 var(--h);letter-spacing:-.01em}
.drop-panel i{margin-left:auto;font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateX(-5px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.drop-panel a:hover i{opacity:1;transform:none}

/* ---------- burger + menu mobile ---------- */
.burger{display:none;width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-1);cursor:pointer;position:relative;flex:none;padding:0}
.burger i{position:absolute;left:11px;right:11px;height:2px;border-radius:var(--r-pill);background:var(--ink);font-style:normal;top:15px;transition:top var(--dur-fast) var(--ease-out),transform var(--dur) var(--spring)}
.burger i:last-child{top:24px}
body.mnav-open .burger i:first-child{top:19.5px;transform:rotate(45deg)}
body.mnav-open .burger i:last-child{top:19.5px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:49;background:rgba(8,12,24,.97);opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out),visibility 0s linear .35s;overflow-y:auto}
body.mnav-open .mnav{opacity:1;visibility:visible;transition:opacity var(--dur) var(--ease-out)}
body.mnav-open{overflow:hidden}
.mnav-in{padding:100px 26px 120px;max-width:520px;margin:0 auto;display:flex;flex-direction:column}
.mnav-l{font:700 var(--fs-h3)/1.3 var(--h);color:var(--ink);padding:14px 2px;border-bottom:1px solid var(--line)}
.mnav-h{display:block;font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0;margin:24px 0 12px;white-space:nowrap}
.mnav-grid{display:grid;gap:8px}
.mnav-grid a{display:flex;align-items:center;gap:13px;border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-md);padding:10px 12px;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.mnav-grid img{width:56px;height:42px;object-fit:cover;border-radius:var(--r-sm);flex:none;border:1px solid var(--line)}
.mnav-grid i{margin-left:auto;font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:900px){.nav-links{display:none}.nav-in{gap:14px}.burger{display:block}}

/* ---------- héro : une seule scène en profondeur (fond → photo → vignette vidéo → texte) ---------- */
/* le héro tient dans le premier écran d'un portable 1440 × 784 : 88vh plafonné
   à 716 px, texte compris, vignette vidéo comprise */
.hero{position:relative;min-height:min(88vh,716px);display:flex;align-items:center;overflow:hidden}
/* la photo de Janet émerge du fond : plein bord à droite, fondue par masque à gauche et en bas */
.hero-jwrap{position:absolute;top:0;right:0;bottom:0;width:54%;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
.hero-jwrap img{width:100%;height:100%;object-fit:cover;object-position:center 10%;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 98%);mask-image:linear-gradient(180deg,#000 60%,transparent 98%)}
/* dégradé sombre du bord gauche vers le centre : le texte reste lisible par-dessus aurore et photo */
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,10,20,.92) 0,rgba(7,10,20,.6) 32%,rgba(7,10,20,.16) 54%,rgba(7,10,20,0) 68%),
             linear-gradient(180deg,rgba(7,10,20,0) 70%,rgba(7,10,20,.45) 90%,rgba(7,10,20,0) 100%)}
.hero-in{position:relative;z-index:2;width:100%}
.hero-txt{max-width:660px;padding:36px 0 56px;container-type:inline-size} /* conteneur de requête du CTA : 660 px, au-dessus du seuil, libellé long */
/* rythme vertical du héros : 14 px entre les blocs de texte (accroche, titre, sous-titre, boutons,
   ligne de preuves, preuve, pastille). Le h1 rend .16em au masque des .lr : on le
   rajoute à sa marge basse pour que l'écart visible reste 14 px. */
.hero-txt .kick{margin-bottom:14px}
.hero-txt h1{margin:14px 0 calc(14px + .16em);font-size:var(--fs-display);line-height:var(--lh-tight)}
.hero-txt .sub{font-size:var(--fs-h3);max-width:58ch}
.hero-txt .cta-row{margin:14px 0 0}
.hero-txt .proof{margin-top:14px}
.hero-txt .foundpill{display:flex;margin:14px 0 0} /* flex, pas inline-flex : plus de demi-interligne parasite au-dessus de la pastille */
.hero .jq{position:absolute;z-index:2;left:auto;bottom:auto;top:max(88px,10vh);right:5vw}
/* la vignette vidéo tient la place de l'ancienne démo d'appel : en bas à droite,
   à cheval sur le bas de la photo. C'est le même contenu qu'une simulation, mais
   filmé — et sans backdrop-filter ni will-change (budget de rendu). */
.hero>.vbig{position:absolute;z-index:3;right:5vw;bottom:6vh;width:min(440px,30vw);margin:0}
@media(max-width:1120px) and (min-width:901px){
  .hero-txt{max-width:52vw}
}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
/* une seule rangée : la carte de droite (démo ou « Sur cette page ») s'étire à la
   hauteur du héro au lieu de laisser la rangée 2 vide. Aucun .b-hero ne porte de
   troisième tuile, rien ne vivait donc en rangée 2. */
.b-hero .t-hero{grid-row:auto;background-color:rgba(14,20,38,.32);padding:52px 44px}
.tile{position:relative;isolation:isolate;grid-column:span 12;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:26px;overflow:hidden;transform:translate3d(0,var(--py,0px),0)}
/* lueur qui suit le curseur */
.tile::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease-out);z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(79,123,255,.14),rgba(34,211,238,.05) 45%,transparent 72%)}
/* bordure illuminée au point le plus proche du curseur */
.tile::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity var(--dur) var(--ease-out);padding:1px;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.9),rgba(79,123,255,.5) 42%,rgba(168,85,247,.18) 65%,transparent 78%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
@media(hover:hover) and (pointer:fine){.tile:hover::after,.tile:hover::before{opacity:1}}
.tile>*{position:relative;z-index:1}

/* héro */
/* container-type:inline-size — conteneur de requête pour le libellé du CTA.
   Le héro reste un item de grille en colonne flex : seule sa largeur cesse
   d'être déduite du contenu, or elle vient déjà de la piste (span 7 / 8 / 12). */
.t-hero{grid-column:span 8;padding:40px 38px;display:flex;flex-direction:column;justify-content:center;container-type:inline-size}
.t-hero h1{margin:14px 0 18px}
/* apparition du héro au chargement */
.t-hero .lr,.hero-txt .lr{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em} /* .16em : la boîte peinte de l'italique dépasse la ligne (197 px pour 174 en 1440), .12em ne suffisait pas */
/* la ligne monte de 12 px et n'est jamais invisible : elle reste dans le masque. */
.t-hero .lr>span,.hero-txt .lr>span{display:block;transform:translateY(12px);animation:slideup .4s var(--ease-reveal) forwards}
/* l'IntersectionObserver de bento.js pose .anim-off sur ce qui sort de l'écran ;
   la montée du héro (.4 s, une fois) tourne quand même. */
.t-hero .lr>span.anim-off,.hero-txt .lr>span.anim-off{animation-play-state:running!important}
.t-hero .lr:nth-child(2)>span,.hero-txt .lr:nth-child(2)>span{animation-delay:.05s}
@keyframes slideup{from{transform:translateY(12px)}to{transform:none}}
/* aucune opacité dans l'ouverture du héro : le premier écran est lisible dès la
   première image, seul le déplacement reste à jouer */
.t-hero .sub,.t-hero .cta-row,.t-hero .proof,.hero-txt .sub,.hero-txt .cta-row,.hero-txt .proofs,.hero-txt .proof{transform:translateY(12px);animation:slideup .4s var(--ease-reveal) forwards}
.t-hero .sub,.hero-txt .sub{animation-delay:.1s}
.t-hero .cta-row,.hero-txt .cta-row{animation-delay:.15s}
.hero-txt .proofs{animation-delay:.2s}
.t-hero .proof,.hero-txt .proof{animation-delay:.25s}
@keyframes fadeup{to{opacity:1;transform:none}}
.t-hero .sub,.hero-txt .sub{font-size:var(--fs-h3);max-width:52ch;color:var(--body);line-height:var(--lh-heading)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 15px}
.foundpill{display:inline-flex;align-items:center;gap:9px;width:fit-content;margin-bottom:13px;font:500 var(--fs-small)/1.4 var(--b);color:var(--ink);border:1px solid rgba(168,85,247,.45);background:rgba(168,85,247,.09);border-radius:var(--r-pill);padding:8px 15px}
.foundpill i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--grad);font-style:normal;flex:none}
.t-hero .foundpill,.hero-txt .foundpill{transform:translateY(12px);animation:slideup .4s var(--ease-reveal) .25s forwards}
.proof{font-size:var(--fs-body);color:var(--soft)}
.proof b{font-weight:700;white-space:nowrap}
/* ligne de preuves du héro : les trois garanties, en une ligne sous les boutons */
.proofs{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font:500 var(--fs-small)/1.3 var(--b);color:var(--soft)}
.proofs li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.proofs svg{width:15px;height:15px;stroke:url(#bgrad);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* démo d'appel */
.t-demo{grid-column:span 4;display:flex;flex-direction:column;padding:22px}
.b-hero .t-demo{align-self:stretch} /* le .phone est en flex:1 : la démo remplit la hauteur du héro */
/* Démo étirée (sous-pages seulement, l'accueil n'en a plus) : l'appel
   et la conversation s'ancrent en haut, la fiche en bas, le vide se met entre
   les deux plutôt que de tout centrer dans un panneau trop grand.
   La fiche passe en flux (position:static) : elle occupe déjà sa place, donc
   rien ne saute quand l'animation la révèle — seules l'opacité et la
   translation changent. L'écran « Appel entrant » reste en absolu inset:0 et
   couvre le panneau entier. */
.b-hero .t-demo .phone{justify-content:flex-start}
.b-hero .t-demo .chat{flex:0 0 auto;justify-content:flex-start}
.b-hero .t-demo .ph-card{position:static;margin-top:auto}
.demo-hd{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.demo-hd .dav{position:relative;flex:none}
.demo-hd .dav img{width:40px;height:40px;border-radius:var(--r-pill)}
.demo-hd .dav i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:var(--r-pill);background:var(--ok);border:2px solid #101628;animation:pulse 2.2s infinite}
@keyframes pulse{50%{opacity:.4}}
.demo-hd b{color:var(--ink);font-family:var(--h);font-size:var(--fs-small)}
.demo-hd span{font-size:var(--fs-small);color:var(--soft)}
.demo-hd .timer{font-family:var(--h);font-weight:700;color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
/* barres de voix pendant que Janet parle */
.wave{display:inline-flex;gap:3px;align-items:flex-end;height:16px;margin-left:auto}
/* les barres montent par transform (compositeur), pas par height (mise en page à chaque image) :
   26 % → 58 % = ×2.23 au repos, 26 % → 100 % = ×3.85 quand Janet parle */
.wave i{width:3px;height:26%;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--c1),var(--c2));transform-origin:50% 100%;animation:wvi 1.7s ease-in-out infinite}
.wave.on i{animation:wv .75s ease-in-out infinite}
@keyframes wvi{50%{transform:scaleY(2.23)}}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}
.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.15s}
@keyframes wv{50%{transform:scaleY(3.85)}}
.wave+.exbadge{margin-left:10px}
/* scène téléphone : écran « appel entrant » puis conversation */
.phone{position:relative;flex:1;min-height:210px;display:flex;flex-direction:column;justify-content:center}
.ph-incoming{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.ph-incoming.onstage{display:flex}
.ph-incoming img{width:76px;height:76px;border-radius:var(--r-pill);box-shadow:0 0 0 3px rgba(79,123,255,.35),0 0 34px rgba(79,123,255,.35)}
.ph-incoming b{font-family:var(--h);font-size:var(--fs-body);color:var(--ink)}
.ph-incoming span{font-size:var(--fs-small);color:var(--soft)}
.ph-ring{width:54px;height:54px;border-radius:var(--r-pill);background:rgba(49,217,131,.14);border:1px solid rgba(49,217,131,.5);display:grid;place-items:center;color:#8FE3B0;animation:ringpulse 1.5s infinite}
.ph-ring svg{width:22px;height:22px}
@keyframes ringpulse{0%{box-shadow:0 0 0 0 rgba(49,217,131,.4)}75%{box-shadow:0 0 0 16px rgba(49,217,131,0)}100%{box-shadow:0 0 0 0 rgba(49,217,131,0)}}
/* fiche qui se remplit en fin d'appel */
.ph-card{position:absolute;left:0;right:0;bottom:0;z-index:3;background:rgba(12,17,32,.96);border:1px solid var(--line-accent);border-radius:var(--r-md);padding:13px 15px;box-shadow:0 14px 40px rgba(6,10,26,.55)}
.ph-card.anim{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring);pointer-events:none}
.ph-card.anim.onstage{opacity:1;transform:none}
.ph-ok{display:block;font:500 var(--fs-small)/1.35 var(--b);color:#8FE3B0;margin-bottom:7px}
.pcrow{display:flex;gap:10px;align-items:baseline;padding:5.5px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.pcrow span{width:92px;flex:none;color:var(--soft)}
.pcrow em{font-style:normal;color:var(--ink);font-weight:500}
.ph-card.anim .pcrow{opacity:0;transform:translateX(-10px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.ph-card.anim .pcrow.on{opacity:1;transform:none}
.exbadge{margin-left:auto;font:500 var(--fs-label)/1 var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border:1px solid var(--line);padding:4px 8px;border-radius:var(--r-pill)}
.chat{display:flex;flex-direction:column;justify-content:flex-end;flex:1;gap:7px;font-size:var(--fs-small);line-height:1.42}
.chat .m{max-width:90%;padding:7px 11px;border-radius:var(--r-md)}
.chat .j{align-self:flex-start;background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(79,123,255,.14));border:1px solid var(--line-accent);color:var(--ink);border-bottom-left-radius:calc(var(--r-sm)/2)}
.chat .c{align-self:flex-end;background:var(--surface-2);border:1px solid var(--line);border-bottom-right-radius:calc(var(--r-sm)/2)}
.chat .done{align-self:center;margin-top:6px;font:500 var(--fs-small)/1.35 var(--b);text-align:center;color:#8FE3B0;border:1px solid rgba(49,217,131,.35);background:rgba(49,217,131,.08);padding:7px 12px;border-radius:var(--r-pill)}
/* animation de la démo (bento.js) */
.chat.anim .m,.chat.anim .done{opacity:0;transform:translateY(8px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.chat.anim .m.on,.chat.anim .done.on{opacity:1;transform:none}
/* indicateur « Janet écrit » */
.chat .typing{align-self:flex-start;display:inline-flex;gap:4px;align-items:center;padding:11px 14px;border-radius:var(--r-md);border-bottom-left-radius:calc(var(--r-sm)/2);background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(79,123,255,.14));border:1px solid var(--line-accent)}
.chat .typing i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--soft);animation:tdot 1s infinite}
.chat .typing i:nth-child(2){animation-delay:.15s}
.chat .typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{30%{transform:translateY(-4px);opacity:1}}

/* « Comment ça marche » : section libre, 4 étapes horizontales sur une ligne fléchée */
.steps-free .steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:0 30px}
.steps-free .steps::before{content:'';position:absolute;left:12.5%;right:12.5%;top:16px;height:2px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--c1),var(--c2) 55%,var(--c3))}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 8px}
.step .n{width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;font:700 var(--fs-small)/1 var(--h);color:#06080F;background:var(--grad);box-shadow:0 0 18px rgba(79,123,255,.55);position:relative;z-index:1;margin-bottom:16px}
.steps-free .step:not(:first-child)::after{content:'';position:absolute;top:11px;left:-21px;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--line-accent-strong)}
.step .ic{width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(140deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1px solid var(--line-accent);margin-bottom:13px}
.step .ic svg{width:22px;height:22px;stroke:url(#bgrad);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.step>b:not(.n){display:block;font-family:var(--h);font-size:var(--fs-body);color:var(--ink);margin-bottom:5px}
.step p{font-size:var(--fs-small);color:var(--body);max-width:23em}
.step .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;justify-content:center}
.step .acts span{font:500 var(--fs-small)/1 var(--b);color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 8px}
/* étape active (cycle animé par bento.js) */
.step .ic{transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.step .n{transition:transform var(--dur) var(--spring),box-shadow var(--dur) var(--ease-out)}
.step.cur .ic{transform:scale(1.09);border-color:var(--line-accent-strong);box-shadow:0 0 28px rgba(79,123,255,.45)}
.step.cur .n{transform:scale(1.15);box-shadow:0 0 26px rgba(34,211,238,.8)}

/* tuiles 1/3 */
.t-role{grid-column:span 4}
.t-role p{font-size:var(--fs-body)}

/* fiche reçue */
.t-fiche{grid-column:span 5}
.fiche{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(7,10,20,.5);padding:4px 16px;position:relative}
.fiche .exbadge{position:absolute;top:14px;right:14px;margin:0}
.frow{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);align-items:center}
.frow:last-child{border-bottom:0}
.frow .k{width:104px;flex:none;color:var(--soft)}
.frow .v{color:var(--ink);font-weight:500}
.pill{font:500 var(--fs-small)/1 var(--b);padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.pill.norm{color:#8FE3B0;border-color:rgba(49,217,131,.35);background:rgba(49,217,131,.07)}
.pill.urg{color:#FFB4A8;border-color:rgba(255,120,100,.4);background:rgba(255,120,100,.08)}
.pill.link{color:var(--c1);border-color:rgba(34,211,238,.35);background:rgba(34,211,238,.06)}

/* cartes métiers : quatre portraits 3/4 sur une rangée, même duotone, même
   lisibilité. La photo ne bouge plus (plus de zoom au survol) : elle peut donc
   porter un filter, calculé une fois, jamais à chaque image. Seuls le voile et
   la flèche répondent au survol. */
.pc-head{grid-column:span 12;margin-top:4px}
.pc-row{grid-column:span 12;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pcard{grid-column:auto;aspect-ratio:3/4;height:auto;padding:0;display:block;background:none}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);z-index:0}
/* duotone : le gris de la photo reprend les deux bleus de la marque, puis
   s'éteint dans le fond — la même teinte sur les quatre vignettes */
.pc-shade{position:absolute;inset:0;z-index:1;mix-blend-mode:normal;background:linear-gradient(200deg,rgba(34,211,238,.34),rgba(79,123,255,.38) 46%,rgba(7,10,20,.94));transition:opacity var(--dur) var(--ease-out)}
.pcard:hover .pc-shade{opacity:.74}
.pc-in{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;display:block}
.pc-in b{display:block;font:700 var(--fs-h3)/var(--lh-heading) var(--h);color:var(--ink);letter-spacing:-.02em}
/* la vignette fait ≈ 272 px : la citation passe au corps d'interface et laisse
   la place de la pastille à sa droite */
.pc-in em{display:block;font-family:var(--a);font-style:italic;font-size:var(--fs-small);color:var(--body);margin-top:7px;max-width:none;padding-right:40px;text-wrap:balance}
/* la flèche est une pastille, pas un signe posé sur la photo : fond et bordure
   sur le rond, flèche en --ink (un fond de pastille et background-clip:text ne
   peuvent pas vivre sur le même élément) */
.pc-in i{position:absolute;right:0;bottom:0;width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;background:var(--surface-3);border:1px solid var(--line-strong);font-style:normal;font-weight:700;font-size:var(--fs-body);line-height:1;color:var(--ink);transition:transform var(--dur) var(--spring)}
.pcard:hover .pc-in i{transform:translateX(7px)}
/* 4 portraits 3/4 sur 170 px de large seraient illisibles : deux par rangée */
@media(max-width:1000px) and (min-width:721px){.pc-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* téléphone : carrousel à l'intérieur du bloc, le document ne défile jamais */
@media(max-width:720px){
  .pc-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:0 22px 6px;margin:0 -22px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pc-row::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 76%;scroll-snap-align:start}
}

/* liens métiers */
.t-met{grid-column:span 7;display:flex;flex-direction:column}
.t-met-home{grid-column:span 6;grid-row:span 2}
.mlist{margin-top:12px;display:flex;flex-direction:column;gap:9px;flex:1;justify-content:space-between}
.mrow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-md);padding:12px 16px;transition:border-color var(--dur-fast) var(--ease-out)}
.mrow:hover{border-color:var(--line-accent-strong)}
.mrow b{font-family:var(--h);font-size:var(--fs-small);color:var(--ink);flex:none;min-width:126px}
.mrow .mic{flex:0 0 44px;width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;font-style:normal;background:var(--surface-1);border:1px solid var(--line-strong);box-shadow:inset 0 0 16px rgba(79,123,255,.16)}
.mic svg{width:23px;height:23px;stroke:url(#bgrad);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform var(--dur) var(--spring)}
.mic svg g,.mic svg .hb{transform-box:fill-box;transform-origin:center;transition:transform var(--dur) var(--spring)}
.mic svg .lid{transform-origin:left bottom}
/* le tracé se dessine à l'apparition, décalé icône par icône */
.reveal .mic svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out)}
.reveal.in .mic svg [pathLength]{stroke-dashoffset:0}
.reveal.in .mrow:nth-child(1) .mic svg [pathLength]{transition-delay:.15s}
.reveal.in .mrow:nth-child(2) .mic svg [pathLength]{transition-delay:.32s}
.reveal.in .mrow:nth-child(3) .mic svg [pathLength]{transition-delay:.49s}
.reveal.in .mrow:nth-child(4) .mic svg [pathLength]{transition-delay:.66s}
/* survol : un geste propre à chaque métier */
@media(hover:hover){
  .mrow:hover .mic-garage svg{transform:rotate(15deg)}
  .mrow:hover .mic-resto .f{transform:translateX(-1.7px) rotate(-7deg)}
  .mrow:hover .mic-resto .k{transform:translateX(1.7px) rotate(7deg)}
  .mrow:hover .mic-cab .hb{animation:hbeat 1.05s ease-in-out infinite}
  .mrow:hover .mic-tools .lid{transform:rotate(-13deg)}
  .mrow:hover .mic-bureau .ln{transform:translateX(1.7px)}
}
@keyframes hbeat{0%,100%{transform:scale(1)}22%{transform:scale(1.3)}44%{transform:scale(1)}60%{transform:scale(1.22)}80%{transform:scale(1)}}
.mrow span{font-size:var(--fs-small);color:var(--body);font-style:italic;flex:1;min-width:0}
.mrow i{font-style:normal;font-weight:700;transition:transform var(--dur-fast) var(--spring)}
.mrow:hover i{transform:translateX(5px)}

/* icônes de tuiles : pastille dégradée, tracé qui se dessine, halo lent */
/* halo : l'ombre large vit sur un pseudo-élément dont seule l'opacité respire (compositeur),
   au lieu d'une box-shadow repeinte à chaque image */
.ic-s{position:relative;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(140deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1px solid var(--line-accent);margin-bottom:15px;box-shadow:0 0 10px rgba(79,123,255,.1)}
.ic-s::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 26px rgba(79,123,255,.32);opacity:0;animation:iglowo 4.5s ease-in-out infinite}
@keyframes iglowo{50%{opacity:1}}
.ic-s svg{width:22px;height:22px;stroke:url(#bgrad);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step .ic{animation:iglow 4.5s ease-in-out infinite}
.tile:nth-child(3n) .ic-s::after,.step:nth-child(2) .ic{animation-delay:1.4s}
.tile:nth-child(3n+1) .ic-s::after,.step:nth-child(3) .ic{animation-delay:2.6s}
.step:nth-child(4) .ic{animation-delay:3.4s}
@keyframes iglow{0%,100%{box-shadow:0 0 10px rgba(79,123,255,.1)}50%{box-shadow:0 0 26px rgba(79,123,255,.32)}}
.reveal .ic-s svg *,.reveal .step .ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--ease-out) .25s}
.reveal.in .ic-s svg *,.reveal.in .step .ic svg *{stroke-dashoffset:0}

/* ---------- simulateur d'appels manqués : seul sur sa ligne, son propre moment ---------- */
.t-roi{grid-column:span 12;padding:40px 44px}
.roi-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin-top:18px;align-items:center}
.roi-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 var(--fs-label)/1.3 var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin:20px 0 10px}
.roi-ctl label:first-child{margin-top:0}
.roi-ctl output{font:700 var(--fs-small) var(--h);letter-spacing:0;text-transform:none;white-space:nowrap}
.roi-ctl input[type=range]{width:100%;accent-color:var(--c2);height:30px;cursor:pointer}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills button{font:500 var(--fs-small)/1 var(--b);color:var(--body);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 15px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.pills button:hover{border-color:var(--line-accent-strong)}
.pills button.on{background:var(--grad);color:#06080F;border-color:transparent}
.roi-out{text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 18px;background:rgba(7,10,20,.5)}
.roi-out>b{display:block;font-family:var(--h);font-weight:700;font-size:var(--fs-display);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.roi-out>b.pop{animation:npop .45s var(--spring)}
@keyframes npop{45%{transform:scale(1.07)}}
.roi-out>span{display:block;color:var(--body);font-size:var(--fs-body);margin-top:9px}
.roi-out .hyp{font:500 var(--fs-small)/1.5 var(--b);color:var(--soft);margin-top:12px}
.roi-out .note{font-size:var(--fs-small);color:var(--soft);margin-top:14px;line-height:var(--lh-body);text-align:left;max-width:65ch;margin-left:auto;margin-right:auto}
.roi-out .btn{margin-top:16px}

/* ---------- portrait de Janet (à côté du héro) ---------- */
.t-janet{grid-column:span 4;padding:0;aspect-ratio:4/5}
.t-janet img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 14%}
.t-janet::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,20,0) 58%,rgba(7,10,20,.8) 96%)}
.jq{position:absolute;left:14px;bottom:13px;z-index:2;display:inline-flex;align-items:center;gap:8px;background:rgba(7,10,20,.88);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px}
.jq span{font-size:var(--fs-small);color:var(--body)}
.jq>i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--ok);font-style:normal;animation:pulse 2.2s infinite;flex:none}
/* onde vocale : jamais figée */
.jq .w{display:inline-flex;gap:2.5px;align-items:center;height:14px;flex:none}
.jq .w i{width:2.5px;height:30%;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--c1),var(--c3));font-style:normal}
.jq .w i:nth-child(1){animation:jw 1s ease-in-out infinite}
.jq .w i:nth-child(2){animation:jw .8s ease-in-out .12s infinite}
.jq .w i:nth-child(3){animation:jw 1.25s ease-in-out .05s infinite}
.jq .w i:nth-child(4){animation:jw .95s ease-in-out .2s infinite}
@keyframes jw{50%{transform:scaleY(3.33)}} /* 30 % → 100 %, centré : transform plutôt que height */

/* FAQ */
.faq-free .qs{margin-top:0}
.faq-free details{border-bottom:1px solid var(--line);padding:5px 0}
.faq-free details:last-of-type{border-bottom:0}
.faq-free summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 2px;font:700 var(--fs-body)/1.35 var(--h);color:var(--ink)}
.faq-free summary::-webkit-details-marker{display:none}
.faq-free summary::after{content:'+';font-weight:400;font-size:var(--fs-h3);color:var(--soft);transition:transform var(--dur-fast) var(--spring)}
.faq-free details[open] summary::after{transform:rotate(45deg)}
.faq-free .a{padding:0 2px 17px;max-width:62ch;font-size:var(--fs-body);line-height:var(--lh-body)}
.faq-free details[open] .a{animation:fadeup .45s var(--ease-out) both}

/* ---------- tableau de planning pleine largeur ---------- */
/* le badge « Exemple » se pose dans le coin de la carte agenda, pas au-dessus du
   titre : sous 720 px l'ancien top:-6px de la section le faisait tomber dans le H2 */
.agf-boards{position:relative}
.agf-boards>.exbadge{position:absolute;top:0;right:0;z-index:3;margin:0}
.agf .fs-head{margin-bottom:24px;max-width:760px}
.agf-sub{margin:12px auto 0;max-width:65ch;font-size:var(--fs-body);color:var(--body);text-align:left}
.agf-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;margin-bottom:24px}
.agf-tabs button{font:500 var(--fs-small)/1 var(--b);color:var(--body);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-pill);padding:11px 22px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.agf-tabs button:hover{border-color:var(--line-accent-strong);color:var(--ink)}
.agf-tabs button.on{background:var(--grad);color:#06080F;border-color:transparent}
.agf-board{display:none}
.agf-board.on{display:block;animation:boardin .55s var(--spring)}
@keyframes boardin{from{opacity:0;transform:translateY(16px) scale(.988)}}
.agf-cnt{display:flex;align-items:baseline;gap:12px;justify-content:center;margin-bottom:22px}
.agf-cnt b{font-family:var(--h);font-weight:700;font-size:var(--fs-h1);line-height:1;background:var(--grad);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.agf-cnt b.pop{animation:npop .5s var(--spring)}
.agf-cnt span{font-size:var(--fs-body);color:var(--body)}
.agf-grid{position:relative;display:grid;gap:0 10px;max-width:1080px;margin:0 auto}
/* règle des heures : reste à --fs-label. La colonne fait 43 px en 390 (50 en
   1440) moins le décalage de 10 px du repère ; « 08:00 » demande 41 px à
   14 px, 35 à 12. Le mini-agenda de la vitrine (.mcal-ruler) le suit pour
   que la miniature garde une seule échelle. */
.agf-ruler{position:relative;height:520px;margin-top:40px;font:500 var(--fs-label)/1 var(--b);color:var(--soft);font-variant-numeric:tabular-nums}
.agf-ruler span{position:absolute;right:10px;transform:translateY(-50%)}
.agf-col header{height:32px;margin-bottom:8px;display:flex;align-items:center;justify-content:center;font:500 var(--fs-small)/1.2 var(--h);color:var(--ink);background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-sm);text-align:center;padding:0 6px}
.agf-body{position:relative;height:520px;border-radius:var(--r-md);background-color:rgba(8,12,24,.55);border:1px solid var(--line);
  background-image:repeating-linear-gradient(180deg,var(--surface-1) 0,var(--surface-1) 1px,transparent 1px,transparent calc(100%/var(--nrows)))}
.agf-ov{position:absolute;left:62px;right:0;top:40px;height:520px;pointer-events:none}
.agf-band{position:absolute;left:0;right:0;background:rgba(79,123,255,.055);border-top:1px dashed var(--line-accent);border-bottom:1px dashed var(--line-accent)}
/* étiquette de service (Midi, Soir) : dans la gouttière de la règle horaire, à
   gauche de la première colonne — plus jamais posée sur une réservation.
   La règle fait 52 px, ses heures s'arrêtent à 42 (right:10px), la grille ouvre
   à 62 (gap 10) : l'étiquette tient entre 44 et 60. Une étiquette longue
   (« Service du midi · 12 h – 14 h ») ne se replie pas sur une deuxième
   colonne : elle repasserait sur les heures. */
.agf-band i{position:absolute;left:auto;right:calc(100% + 2px);top:0;bottom:0;width:16px;
  display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#D6DFF4;font-style:normal}
/* blocs de rendez-vous : hauteur = durée réelle.
   Exception mesurée à l'échelle typographique : le libellé du bloc reste à
   --fs-label. À 14 px « Th. Simon · 2 cvts » demande 114 px pour 111 de
   disponible en 390, et « Entretien complet » 117 pour 111 — la largeur du
   bloc est une durée, elle ne s'élargit pas. */
.blk{position:absolute;left:5px;right:5px;border-radius:var(--r-sm);padding:6px 9px;overflow:hidden;z-index:1;border:1px solid var(--line-accent-strong)}
.blk b{position:relative;display:block;font:500 var(--fs-label)/1.3 var(--b);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk>span{position:relative;display:block;font:500 var(--fs-label)/1.3 var(--b);color:rgba(230,238,255,.74)}
.blk .fx{position:absolute;inset:0;background:linear-gradient(165deg,rgba(34,211,238,.34),rgba(79,123,255,.30) 55%,rgba(168,85,247,.34))}
.blk.sm{padding:3px 8px}
.blk.sm>span{display:none}
.blk.sm .bck,.blk.sm .bhd{top:4px;width:11px;height:11px}
.blk.man{border:1.5px dashed rgba(158,173,196,.5)}
.blk.man .fx{background:rgba(148,163,184,.14)}
.bck{position:absolute;right:6px;top:6px;width:13px;height:13px;stroke:#EAF6FF;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;z-index:1}
.bhd{position:absolute;right:6px;top:6px;width:12px;height:12px;stroke:#AFC0D8;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;z-index:1}
/* réservation en direct : remplissage haut→bas, coche qui se dessine, texte ensuite */
.blk.up{opacity:0;pointer-events:none}
.blk.up .fx{transform:scaleY(0);transform-origin:top;transition:transform .75s var(--spring)}
.blk.up .bck path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur) var(--ease-out) .6s}
.blk.up b,.blk.up>span{opacity:0;transition:opacity var(--dur) var(--ease-out) .4s}
.blk.up.on{opacity:1;transition:opacity var(--dur-fast) var(--ease-out)}
.blk.up.on .fx{transform:scaleY(1)}
.blk.up.on .bck path{stroke-dashoffset:0}
.blk.up.on b,.blk.up.on>span{opacity:1}
/* créneau libre : pulsation très douce, s'efface quand il est pris */
.freez{position:absolute;left:5px;right:5px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);animation:slfree 4.2s ease-in-out infinite;transition:opacity var(--dur) var(--ease-out)}
.freez.off{opacity:0}
@keyframes slfree{50%{opacity:.45}}
/* cascade au changement d'onglet */
.agf-board.on .blk:not(.up){animation:blkin .6s var(--spring) both;animation-delay:var(--d,0ms)}
@keyframes blkin{from{opacity:0;transform:translateY(10px) scale(.97)}}
.agf-now{position:absolute;left:-8px;right:-8px;top:-1px;height:2px;z-index:2;border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(34,211,238,0),rgba(34,211,238,.8) 12%,rgba(79,123,255,.8) 88%,rgba(79,123,255,0));transition:transform 5s linear}
.agf-now::before{content:'';position:absolute;left:2px;top:-3.5px;width:9px;height:9px;border-radius:var(--r-pill);background:var(--c1);box-shadow:0 0 12px rgba(34,211,238,.85)}
.ag-tag{position:absolute;right:8px;top:0;z-index:3;opacity:0;transform:translateX(28px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring);
  background:rgba(12,17,32,.97);border:1px solid var(--line-accent-strong);border-radius:var(--r-pill);padding:8px 13px;font:500 var(--fs-small)/1 var(--b);color:var(--ink);white-space:nowrap;box-shadow:0 12px 30px rgba(6,10,26,.55)}
.ag-tag.on{opacity:1;transform:none}


/* ---------- bandes cinématiques pleine largeur ---------- */
/* une bande cinématique est une respiration DANS un chapitre, pas un chapitre :
   elle s'ouvre et se referme sur --space-in, des deux côtés. */
.cine{position:relative;margin:var(--space-in) 0 0;height:66vh;min-height:430px;max-height:780px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
/* la photo fond progressivement dans la page à ses deux bords (masque) :
   l'aurore continue derrière, aucune arête ni saut de luminosité */
.cine img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 72%,transparent 100%)}
/* voile central : la phrase reste lisible, le voile s'éteint avant les bords */
.cine-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,20,0) 0,rgba(7,10,20,.38) 30%,rgba(7,10,20,.42) 62%,rgba(7,10,20,0) 100%)}
.cine .wrap{position:relative;z-index:2}
.cine-line{font-family:var(--h);font-weight:700;color:#fff;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.04em;text-wrap:balance;max-width:15em;margin:0 auto;text-shadow:0 6px 44px rgba(4,8,20,.55)}
.cine-line .it{font-weight:400;background:var(--grad);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.cine .l2{padding-bottom:.16em;margin-bottom:-.16em}
.cine .l2>span{transition-duration:.4s}
.cine+.freesec,.cine+.sec,.cine+.wrap{margin-top:var(--space-in)}
@media(max-width:900px){.cine{height:52vh;min-height:340px}}

/* ---------- vitrine produit : l'interface Celya dans un écran ---------- */
.product-free .frame-wrap{perspective:1500px;max-width:940px;margin:0 auto}
.frame{position:relative;border-radius:var(--r-lg);border:1px solid var(--line-strong);background:rgba(11,16,30,.92);overflow:hidden;transform:rotateX(7deg);transform-origin:50% 0;
  box-shadow:0 60px 120px rgba(4,8,20,.62),0 24px 48px rgba(4,8,20,.5),0 0 90px rgba(79,123,255,.13)}
/* l'écran se redresse à la révélation */
.product-free.reveal .frame{transform:rotateX(7deg) translateY(12px)}
.product-free.reveal.in .frame{transform:rotateX(7deg);transition:transform .4s var(--ease-reveal)}
/* reflet subtil sur la vitre */
.frame::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(115deg,var(--surface-3),var(--surface-1) 26%,transparent 44%)}
.frame-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--surface-1)}
.fdots{display:inline-flex;gap:6px}
.fdots i{width:9px;height:9px;border-radius:var(--r-pill);background:var(--line-strong);font-style:normal}
.furl{margin:0 auto;font:500 var(--fs-small)/1 var(--b);color:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 16px;background:rgba(7,10,20,.6)}
.frame-bar .exbadge{margin-left:0}
.frame-body{display:grid;grid-template-columns:1.04fr .96fr}
.fpane{padding:18px 20px 20px;min-width:0}
.fpane+.fpane{border-left:1px solid var(--line)}
.fpane>header{display:flex;align-items:center;gap:9px;font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0;margin-bottom:13px;white-space:nowrap}
.fpane>header i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--grad);font-style:normal;flex:none}
.flist{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.fli{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-md);padding:8px 12px;font-size:var(--fs-small);color:var(--soft)}
.fli b{font:500 var(--fs-small)/1.2 var(--h);color:var(--ink)}
.fli .pill{margin-left:auto;font-size:var(--fs-small);padding:4px 9px}
.fli.onrow{border-color:var(--line-accent-strong);background:rgba(79,123,255,.09)}
.product-free .fiche{margin-top:0;background:rgba(7,10,20,.6)}
/* mini agenda du tableau de bord */
.mcal{display:grid;grid-template-columns:44px 1fr;gap:0 10px}
.mcal-ruler{position:relative;height:302px;font:500 var(--fs-label)/1 var(--b);color:var(--soft);font-variant-numeric:tabular-nums}
.mcal-ruler span{position:absolute;right:0;transform:translateY(-50%)}
.mcal-body{position:relative;height:302px;border-radius:var(--r-md);background-color:rgba(10,15,30,.55);border:1px solid var(--line);
  background-image:repeating-linear-gradient(180deg,var(--surface-1) 0,var(--surface-1) 1px,transparent 1px,transparent 25%)}
@media(max-width:900px){
  .product-free .frame-wrap{perspective:none}
  .frame,.product-free.reveal .frame,.product-free.reveal.in .frame{transform:none}
  .frame-body{grid-template-columns:1fr}
  .fpane+.fpane{border-left:0;border-top:1px solid var(--line)}
}

/* CTA final : pleine largeur, très grand */
.cta-free{text-align:center;margin:var(--space-out) 0 120px}
.cta-free h2{font-size:var(--fs-h1);letter-spacing:-.04em;line-height:var(--lh-tight);margin-bottom:10px}
.cta-free .wrap{container-type:inline-size} /* conteneur de requête du CTA : pleine largeur, libellé long */
.cta-free .cta-row{justify-content:center;margin-top:30px}
.cta-free .btn-big{font-size:var(--fs-body);padding:19px 32px}
.cta-free .proof{margin-top:6px}

/* ---------- footer ----------
   Le logotype d'abord, en grand et monochrome (le dessin du logo de nav, sans
   dégradé ni lueur), puis quatre colonnes titrées, puis la barre légale. */
/* le pied de page ne colle jamais au dernier bloc : --space-in au minimum, quel
   que soit le gabarit (l'article et les pages légales n'avaient que 28 px). */
footer.site{margin:var(--space-in) 0 40px;border-top:1px solid var(--line);padding-top:40px;font-size:var(--fs-small);color:var(--soft)}
.flogo{display:block;width:fit-content;color:var(--ink);opacity:.9;margin-bottom:40px}
.fmark{height:clamp(56px,8vw,96px);width:auto;display:block;overflow:visible}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 26px}
.fcol{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.fcol b{font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0;margin-bottom:10px}
/* 21 px de ligne + 2 × 10 de padding = 41 px de cible tactile, gap 0 : deux liens
   successifs se touchent sans jamais se recouvrir */
.fcol a{padding:10px 0;margin:0}
footer.site a:hover{color:var(--ink)}
.fbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line)}
.fbar a{padding:12px 5px;margin:-5px 0}
.flang{margin-left:auto;display:flex;gap:16px}
@media(max-width:400px){.fgrid{grid-template-columns:1fr}}

/* ---------- pages métiers ---------- */
.t-pain{grid-column:span 12;padding:26px 34px}
.t-pain p{max-width:65ch;font-size:var(--fs-body)}
.backrow{margin-top:26px;font-size:var(--fs-body)}
.backrow a{color:var(--c1)}

/* ---------- pages légales ---------- */
.legal{max-width:820px;margin:44px auto 70px;padding:0 22px}
.legal h1{font-size:var(--fs-h1);margin-bottom:22px}
.legal h2{font-size:var(--fs-h3);margin:34px 0 10px}
.legal h3{font-size:var(--fs-h3);margin:22px 0 8px}
.legal p,.legal li{font-size:var(--fs-body);color:var(--body)}
.legal ul,.legal ol{padding-left:22px;margin:10px 0}
/* données tabulaires denses : la taille d'interface, pas celle de lecture —
   à --fs-body le tableau des cookies débordait de 19 px en 390 */
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:var(--fs-small)}
.legal th,.legal td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.legal a{color:var(--c1)}

/* ---------- apparition au scroll ---------- */
/* état de repos VISIBLE : plus aucune opacité ici. Un bloc qui n'a pas encore
   reçu .in se lit quand même — seul le déplacement de 12 px reste à jouer. */
.reveal{transform:translate3d(0,calc(var(--py,0px) + 12px),0);transition:transform .4s var(--ease-reveal),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.reveal.in{transform:translate3d(0,var(--py,0px),0)}
/* après l'entrée : la parallaxe pilote transform sans être lissée */
.reveal.done{transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
/* titres : lever de ligne court, sans rotation, à la révélation de la tuile */
.l2{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.l2>span{display:block;transform:translateY(12px);transform-origin:0 100%;transition:transform .4s var(--ease-reveal)}
.reveal.in .l2>span{transform:none}

/* fil de progression de lecture */
#sprog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--grad);z-index:76;pointer-events:none}

/* ---------- barre d'appel mobile ---------- */
.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(7,10,20,.96);border-top:1px solid var(--line);align-items:center;gap:12px;transform:translateY(110%);transition:transform var(--dur) var(--spring)}
.callbar.show{transform:none}
.callbar img{width:38px;height:38px;border-radius:var(--r-pill);box-shadow:0 0 0 2px rgba(79,123,255,.5)}
.callbar .t{flex:1;min-width:0}
.callbar .t b{font-family:var(--h);font-size:var(--fs-small);display:block;color:var(--ink)}
.callbar .t span{font-size:var(--fs-small);color:#7EF0C8}
.callbar .btn{padding:11px 20px;font-size:var(--fs-small)}
@media(max-width:768px){.callbar{display:flex}}

/* ---------- bandeau cookies ---------- */
.cbanner{position:fixed;left:18px;right:18px;bottom:18px;z-index:80;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(13,18,32,.97);font-size:var(--fs-small);color:var(--soft);max-width:920px;margin:0 auto}
.cbanner a{color:var(--c1)}
.cbanner .cbtns{display:flex;gap:10px}
.cbanner button{font-family:var(--h);font-weight:500;font-size:var(--fs-small);border-radius:var(--r-pill);padding:9px 18px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
.cbanner .caccept{background:var(--grad);color:#05070E;border:0}
@media(max-width:768px){.cbanner{bottom:84px}}
/* sous 720 px le bandeau n'est plus une carte posée au milieu de l'écran (elle
   se plaçait à 399 px du haut sur un 640 et recouvrait les deux boutons du
   héro) : il devient une barre basse, collée au bord, pleine largeur, sous
   112 px de haut. Les boutons Refuser / Accepter restent sur la ligne du texte
   tant que 210 px lui suffisent, et passent dessous sinon. Sa hauteur est
   publiée par bento.js dans --cbanner-h ; le héro s'en sert (lot du 12/09/2026). */
@media(max-width:720px){
  /* fond opaque, et non plus .97 : en barre pleine largeur le bandeau se pose
     sur la partie la plus dense du héro, et 3 % d'un texte clair sur un panneau
     presque noir, c'est quatre fois la luminance du fond — le texte du dessous
     se lisait à travers. Même couleur, alpha à 1. */
  .cbanner{left:0;right:0;bottom:0;max-width:none;margin:0;border-radius:0;
    background:#0D1220;
    border-width:1px 0 0;padding:12px 16px;gap:8px 12px;align-items:center}
  .cbanner .cmsg{flex:1 1 210px;min-width:0;line-height:1.35}
  .cbanner .cbtns{flex:0 0 auto;gap:8px;margin-left:auto}
  .cbanner button{padding:8px 16px}
}

/* ---------- responsive ---------- */
@media(hover:hover){
  .tile:not(.reveal){transition:border-color .35s var(--ease-out),box-shadow .35s var(--ease-out)}
  .tile:hover{border-color:var(--line-accent);box-shadow:0 14px 44px rgba(6,10,26,.5)}
}
@media(max-width:900px){
  /* héro : la photo devient le bandeau de tête du héro, court (38svh) pour que le
     bouton d'appel entre dans le premier écran d'un 390 × 760 ; le portrait est
     cadré haut (20 %) et son bas se dissout dans le fond — masque puis voile,
     aucune arête. Le texte démarre dans cette dissolution, 20 px avant le bas
     du bandeau (38svh − 20, dont 76 px de padding du héro). */
  .hero{min-height:88vh;min-height:88svh;display:flex;flex-direction:column;padding:76px 0 12px;overflow:visible}
  .hero-jwrap{top:0;left:0;right:0;bottom:auto;width:100%;height:38vh;height:38svh;max-height:38vh;max-height:38svh;
    -webkit-mask-image:none;mask-image:none}
  .hero-jwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
    -webkit-mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.5) 74%,transparent 97%);
    mask-image:linear-gradient(180deg,#000 46%,rgba(0,0,0,.5) 74%,transparent 97%)}
  /* voile : bande douce sous la nav, montée sombre depuis le bas (transparente à ~62 %),
     léger tamis global — tout finit en transparent progressif, aucune arête */
  .hero-jwrap::after{content:'';position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(7,10,20,.5) 0,rgba(7,10,20,0) 22%),
    linear-gradient(0deg,rgba(7,10,20,.92) 0,rgba(7,10,20,.74) 14%,rgba(7,10,20,.44) 34%,rgba(7,10,20,0) 62%),
    linear-gradient(rgba(7,10,20,.16),rgba(7,10,20,.16))}
  .hero-shade{display:none}
  .hero-txt{padding:calc(38vh - 96px) 0 0;padding:calc(38svh - 96px) 0 0;max-width:none}
  .hero-txt .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .hero-txt .cta-row .btn{width:100%;justify-content:center}
  .hero .jq{position:static;margin:18px auto 0;width:fit-content}
  /* la vignette vidéo repasse dans le flux, sous le badge, alignée sur le texte.
     relative, pas static : .vplay et .vcap se calent sur la vignette, pas sur le héro */
  .hero>.vbig{position:relative;right:auto;bottom:auto;width:calc(100% - 44px);margin:18px 22px 0}
  /* accroches : capitales compactes, toujours sur UNE seule ligne */
  .kick{letter-spacing:.15em;gap:9px}
  /* accroches longues (héros métiers, section 04) : repli en casse normale discrète */
  .pc-head .kick,.b-hero .t-hero .kick{text-transform:none;letter-spacing:.01em;font-size:var(--fs-small);color:#A9B4CE}
  /* pas de parallaxe sous 900 px (bento.js) : aucun translate3d, donc aucun calque GPU par tuile */
  .tile{transform:none}
  .t-hero,.t-demo,.t-role,.t-fiche,.t-met,.t-met-home,.t-roi,.t-janet{grid-column:span 12}
  .b-hero .t-hero{grid-row:auto;padding:40px 26px}
  .t-met-home{grid-row:auto}
  .t-janet{aspect-ratio:4/5} /* la tuile suit son contenu, plus de hauteur fixe */
  .roi-grid{grid-template-columns:1fr}
  .t-roi{padding:30px 26px}
  .agf-grid{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .agf-col{min-width:118px}
  .agf-ruler,.agf-body,.agf-ov{height:430px}
  .agf-ruler{min-width:44px}
  /* la gouttière se resserre sous 900 px : l'étiquette de service disparaît,
     les bandes restent */
  .agf-band i{display:none}
  /* agenda simplifié : 2 colonnes de ressources maximum (celles où Janet réserve
     en direct), tout est visible, aucun défilement horizontal */
  @supports selector(:has(*)){
    .agf-grid{overflow:visible;padding-bottom:0;gap:0 8px;grid-template-columns:44px repeat(2,1fr)!important}
    .agf-col{min-width:0}
    .agf-col:not(:has(.blk.up)){display:none}
    .agf-ov{left:52px}
  }
  .sec-hero{margin-top:22px}
  .cta-free{margin-bottom:80px}
  .fs-head{margin-bottom:34px}
  /* étapes : retour en séquence verticale */
  .steps-free .steps{grid-template-columns:1fr;gap:18px 0}
  .steps-free .steps::before{left:15px;right:auto;top:20px;bottom:20px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--c1),var(--c2) 55%,var(--c3))}
  .steps-free .step{flex-direction:row;text-align:left;align-items:flex-start;gap:14px;padding:0}
  .steps-free .step .n{margin:0;flex:none}
  .steps-free .step .ic{flex:none;margin:0}
  .steps-free .step>b:not(.n){margin:8px 0 0}
  .steps-free .step{display:grid;grid-template-columns:32px 46px 1fr;gap:4px 13px}
  .steps-free .step p,.steps-free .step .acts{grid-column:3;justify-content:flex-start;max-width:none;text-align:left}
  .steps-free .step>b:not(.n){grid-column:3;text-align:left}
  .steps-free .step:not(:first-child)::after{display:none}
}

@media(max-width:720px){
  /* le rythme se resserre : deux pas toujours, mais à l'échelle du téléphone */
  :root{--space-in:64px;--space-out:120px}

  /* ---------- héro de l'accueil sur téléphone (lot du 12 septembre 2026) ----------
     La bande de photo de 289 px, coupée net au menton et posée comme un bandeau,
     disparaît : sous 720 px la photo devient le FOND du héro et le texte se pose
     dessus. Trois défauts tombent avec elle — l'arête franche entre la bande et
     le fond de page, l'accroche à cheval sur cette arête, et le second bouton
     rejeté sous la barre du navigateur. Le bas du portrait se dissout par masque
     ET le voile finit transparent : plus aucune ligne de raccord.
     Mesuré à 393 × 730 (Safari iOS, barre visible) : bas de « Prendre
     rendez-vous » ≤ 660 px ; à 360 × 640 : ≤ 600 px. */
  /* padding bas = 12 px + la hauteur du bandeau cookies tant qu'il est affiché
     (--cbanner-h, posée par bento.js, retirée au clic) */
  .hero{position:relative;display:block;min-height:0;overflow:hidden;
    padding:0 0 calc(12px + var(--cbanner-h,0px))}
  /* le cadre de la photo garde le rapport de la source (864 × 1100) : le visage
     entre en entier, aucun recadrage au menton, et la hauteur suit la largeur */
  .hero-jwrap{position:absolute;top:0;left:0;right:0;bottom:auto;z-index:0;
    width:100%;height:auto;max-height:none;aspect-ratio:864/1100;
    -webkit-mask-image:none;mask-image:none}
  .hero-jwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:50% 18%;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 88%);
    mask-image:linear-gradient(180deg,#000 0,#000 56%,transparent 88%)}
  /* voile : assez sombre dès le haut pour que l'accroche et le titre passent le
     4.5:1 sur la peau, opaque au 88e centième, puis rendu transparent sur les
     douze derniers centièmes — le fond de page (aurore comprise) reprend la
     main sans marche. */
  .hero-jwrap::after{content:'';position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(7,10,20,.42) 0,rgba(7,10,20,.70) 42%,var(--bg) 88%,rgba(7,10,20,0) 100%)}
  .hero-in{position:relative;z-index:1}
  /* 88 px en haut : la nav fixe (70 px) est franchie, l'accroche démarre dessous */
  .hero-txt{padding-block:88px 32px;max-width:none}
  .hero-txt h1{font-size:clamp(32px,8.5vw,40px)} /* seule dérogation à --fs-display : sur 393 px, 48 px donnait cinq lignes */
  .hero-txt .cta-row{gap:12px}
  /* 5 lignes de 24 px ne tiennent pas au-dessus du bouton d'appel : le sous-titre
     du héro passe au corps de texte sous 720 px */
  .hero-txt .sub{font-size:var(--fs-body)}
  /* l'accroche tient sur UNE ligne : le pays passe à la trappe et les capitales
     se resserrent. Le symbole se centre sur cette ligne unique. */
  .kick{line-height:1.4;align-items:center;letter-spacing:.08em;gap:8px}
  .kick-geo{display:none}
  /* le libellé du CTA ne dépend plus de la largeur d'écran : voir la requête
     de conteneur @container (max-width:639px), plus haut */
  .t-hero{padding:38px 26px}
  body{padding-bottom:76px}
  .nav-logo{height:24px}
  /* la barre d'appel en bas d'écran prend le relais du CTA de la nav */
  .nav-cta{display:none}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* le badge « Exemple » repasse dans le flux, bloc aligné à droite au-dessus
     du compteur : plus rien à croiser */
  .agf-boards>.exbadge{position:static;display:table;margin:0 0 10px auto}
}
/* seconde exception à « une accroche ne passe jamais à la ligne » : l'accroche
   du chapitre métiers, en casse normale et 14 px sous 900 px, fait 45 signes —
   elle débordait le document de 4 px à 360 px, et `body{overflow-x:hidden}` la
   rognait. Sous 480 px elle passe à la ligne ; l'interligne de 1,4 hérité de
   .kick empêche les deux lignes de se toucher. Le letter-spacing ne bouge pas. */
@media(max-width:480px){
  .pc-head .kick{line-height:1.4}
  .pc-head .kick span{white-space:normal}
}
/* les trois puces de métier tiennent sur une ligne ; sous 420 px la ligne
   défile à l'intérieur du bloc, jamais le document */
@media(max-width:420px){
  .agf-tabs{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:0 22px;margin-left:-22px;margin-right:-22px}
  .agf-tabs::-webkit-scrollbar{display:none}
  .agf-tabs button{flex:none}
}

/* ---------- accessibilité mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transform:none;transition:none var(--ease-out)}
  .demo-hd .dav i,.jq i,.ph-ring,.wave.on i{animation:none}
  .chat.anim .m,.chat.anim .done{opacity:1;transform:none;transition:none var(--ease-out)}
  /* slideup (ex-rise, ex-fadeup) : rien ne bouge, rien ne se transitionne */
  .t-hero .lr>span,.t-hero .sub,.t-hero .cta-row,.t-hero .proof{animation:none;transform:none;transition:none}
  .hero-txt .lr>span,.hero-txt .sub,.hero-txt .cta-row,.hero-txt .proofs,.hero-txt .proof,.t-hero .foundpill,.hero-txt .foundpill{animation:none;transform:none;transition:none}
  .step .ic{transition:none var(--ease-out)}
  .step.cur .ic{transform:none;box-shadow:none}
  .btn:hover{transform:none}
  .callbar{transition:none var(--ease-out)}
  .tile{transition:none var(--ease-out)}
  .gradtxt,h2 .it,.proof b,.roi-ctl output,.mrow i{animation:none}
  .chat .typing i{animation:none}
  .l2>span{transform:none;transition:none var(--ease-out)}
  .ic-s::after,.step .ic{animation:none}
  .reveal .ic-s svg *,.reveal .step .ic svg *{stroke-dasharray:none;stroke-dashoffset:0;transition:none var(--ease-out)}
  .btn-grad::after{display:none}
  .faq-free details[open] .a{animation:none}
  .agf-board.on{animation:none}
  .agf-board.on .blk:not(.up){animation:none}
  .freez{animation:none}
  .blk.up{opacity:1}
  .blk.up .fx{transform:scaleY(1);transition:none var(--ease-out)}
  .blk.up .bck path{stroke-dashoffset:0;transition:none var(--ease-out)}
  .blk.up b,.blk.up>span{opacity:1;transition:none var(--ease-out)}
  .agf-now{transition:none var(--ease-out)}
  .ag-tag{transition:none var(--ease-out)}
  .agf-cnt b.pop{animation:none}
  .pc-shade,.pc-in i{transition:none var(--ease-out)}
  .drop-panel,.nav-drop .car,.drop-panel i{transition:none var(--ease-out)}
  .mnav,.burger i{transition:none var(--ease-out)}
  .frame{transition:none var(--ease-out)}
  .cine .l2>span{transform:none;transition:none var(--ease-out)}
  .mic svg,.mic svg g,.mic svg .hb{transition:none var(--ease-out);animation:none}
  .reveal .mic svg [pathLength]{stroke-dasharray:none;stroke-dashoffset:0;transition:none var(--ease-out)}
  .roi-out>b.pop{animation:none}
  .mrow:hover i{transform:none}
  body::after{animation:none}
  .jq .w i{animation:none}
  .jq .w i:nth-child(1){height:45%}
  .jq .w i:nth-child(2){height:80%}
  .jq .w i:nth-child(3){height:60%}
  .jq .w i:nth-child(4){height:90%}
  .wave i{animation:none}
  .ph-card.anim{opacity:1;transform:none;transition:none var(--ease-out)}
  .ph-card.anim .pcrow{opacity:1;transform:none;transition:none var(--ease-out)}
  .tile{transform:none}
  .reveal,.reveal.in{transform:none}
}

/* ---------- entonnoir de tri des appels (page garages) ---------- */
#tri,#agenda,#faq-garage{scroll-margin-top:84px}
.funnel{max-width:940px;margin:0 auto}
.fun-top{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);border-radius:var(--r-lg);padding:16px 28px;width:fit-content;max-width:100%;margin:0 auto}
.fun-top b{display:flex;align-items:center;gap:9px;font:700 var(--fs-body)/1.3 var(--h);color:var(--ink)}
.fun-top b svg{width:17px;height:17px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fun-top span{font-size:var(--fs-small);color:var(--soft)}
.fun-stem{width:2px;height:32px;margin:0 auto;background:linear-gradient(180deg,var(--c1),var(--c2));border-radius:var(--r-pill);opacity:.7}
.fun-janet{display:flex;align-items:center;gap:11px;width:fit-content;margin:0 auto;border:1px solid var(--line-accent);background:rgba(12,17,32,.9);border-radius:var(--r-pill);padding:9px 18px 9px 10px;box-shadow:0 0 34px rgba(79,123,255,.22)}
.fun-janet img{width:34px;height:34px;border-radius:var(--r-pill)}
.fun-janet b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink);white-space:nowrap}
.fun-janet .wave{margin-left:2px;height:14px}
.fun-fork{height:84px;margin:-2px 0 0}
.fun-fork svg{width:100%;height:100%;display:block;overflow:visible}
.fun-fork path{fill:none;stroke:url(#bgrad);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.16;transition:opacity var(--dur) var(--ease-out)}
.fun-fork path.on{opacity:1;stroke-dasharray:1;stroke-dashoffset:1;animation:fdraw .7s var(--ease-out) forwards}
.funnel.static .fun-fork path{opacity:.75}
@keyframes fdraw{to{stroke-dashoffset:0}}
.fun-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.fcard{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:20px;display:flex;flex-direction:column;gap:12px;opacity:.62;transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--spring),opacity var(--dur) var(--ease-out)}
.fcard.on,.funnel.static .fcard{opacity:1}
.fcard.on{border-color:var(--line-accent-strong);box-shadow:0 18px 48px rgba(6,10,26,.5),0 0 34px rgba(79,123,255,.16);transform:translateY(-4px)}
.fc-tag{width:fit-content;font:700 var(--fs-label)/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-accent);background:rgba(79,123,255,.1);border-radius:var(--r-pill);padding:6px 11px}
.fc-q{font-family:var(--a);font-style:italic;font-size:var(--fs-body);line-height:1.45;color:var(--ink);flex:1}
.fc-out{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(7,10,20,.5);padding:11px 13px;opacity:.55;transform:translateY(4px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.fcard.on .fc-out,.funnel.static .fc-out{opacity:1;transform:none}
.fo-ic{flex:none;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:linear-gradient(140deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1px solid var(--line-accent)}
.fo-ic svg{width:17px;height:17px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fo-ic svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.fcard.on .fo-ic svg [pathLength]{animation:fdraw .8s var(--ease-out) .25s forwards}
.funnel.static .fo-ic svg [pathLength]{stroke-dasharray:none;stroke-dashoffset:0}
.fc-out b{display:block;font:700 var(--fs-small)/1.25 var(--h);color:var(--ink)}
.fc-out span{display:block;font-size:var(--fs-small);color:var(--soft);line-height:1.4}
/* branche urgence : l'argument fort, accentuée en permanence */
.fc-urg{border-color:rgba(255,120,100,.38);background-image:linear-gradient(160deg,rgba(255,120,100,.07),transparent 42%)}
.fc-urg .fc-tag{color:#FFB4A8;border-color:rgba(255,120,100,.45);background:rgba(255,120,100,.1)}
.fc-urg.on{border-color:rgba(255,120,100,.75);box-shadow:0 18px 48px rgba(6,10,26,.5),0 0 40px rgba(255,120,100,.22);transform:translateY(-6px) scale(1.015)}
.fc-urg .fo-ic{background:rgba(255,120,100,.12);border-color:rgba(255,120,100,.4)}
.fc-urg .fo-ic svg{stroke:#FFB4A8}
.fc-urg.on .fo-ic{animation:urgring 1.3s infinite}
.fc-urg.on .fo-ic svg{animation:frring .55s ease-in-out 2}
@keyframes urgring{0%{box-shadow:0 0 0 0 rgba(255,120,100,.45)}75%{box-shadow:0 0 0 13px rgba(255,120,100,0)}100%{box-shadow:0 0 0 0 rgba(255,120,100,0)}}
@keyframes frring{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
.fun-note{margin:24px auto 0;max-width:65ch;text-align:left;font-size:var(--fs-body);color:var(--soft)}
@media(max-width:760px){
  .fun-fork{display:none}
  .fun-stem:last-of-type{height:26px}
  .fun-cards{grid-template-columns:1fr;gap:10px;position:relative;padding-left:16px}
  .fun-cards::before{content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--c1),var(--c2) 55%,var(--c3));opacity:.35}
  .fcard.on{transform:none}
  .fc-urg.on{transform:none}
}

/* ---------- sections détaillées métiers : texte + repères chiffrés ---------- */
.t-det{grid-column:span 12;padding:34px 38px}
.det-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.t-det h2{font-size:var(--fs-h2)}
.t-det .det-txt p{font-size:var(--fs-body);max-width:65ch;margin-top:12px}
.det-list{display:flex;flex-direction:column;gap:8px}
.det-li{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-md);padding:10px 14px}
.det-li b{font:500 var(--fs-small)/1.35 var(--h);color:var(--ink);flex:1}
.det-li .dur{font:500 var(--fs-small)/1 var(--b);color:var(--soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.det-li .n{flex:none;width:24px;height:24px;border-radius:var(--r-pill);display:grid;place-items:center;font:700 var(--fs-small)/1 var(--h);color:#06080F;background:var(--grad)}
.det-note{margin-top:10px;font-size:var(--fs-small);color:var(--soft)}
@media(max-width:860px){.det-grid{grid-template-columns:1fr;gap:20px}.t-det{padding:26px 24px}}

/* ---------- encart enquête terrain (garages → article) ---------- */
.t-study{grid-column:span 12;display:flex;align-items:center;gap:34px;padding:36px 40px;border-color:rgba(168,85,247,.35)}
.t-study .st-num{flex:none;font:700 var(--fs-display)/1 var(--h);letter-spacing:-.04em;background:var(--grad);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;animation:gpan 8s ease-in-out infinite alternate}
.t-study .st-body{flex:1}
.t-study h2{font-size:var(--fs-h3);margin-bottom:6px}
.t-study p{font-size:var(--fs-body);color:var(--body);max-width:65ch}
.t-study .st-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font:500 var(--fs-small)/1 var(--b);color:var(--ink);border:1px solid var(--line-strong);background:var(--surface-1);border-radius:var(--r-pill);padding:12px 20px;transition:border-color var(--dur-fast) var(--ease-out)}
.t-study .st-link i{font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform var(--dur-fast) var(--spring)}
.t-study:hover .st-link{border-color:var(--line-accent-strong)}
.t-study:hover .st-link i{transform:translateX(5px)}
@media(max-width:760px){.t-study{flex-direction:column;align-items:flex-start;gap:12px;padding:26px 24px}}

/* ---------- blog : liste des articles ---------- */
.blog-hero{max-width:820px;margin:64px auto 0;padding:0 22px;text-align:center}
.blog-hero .kick{justify-content:center}
.blog-hero h1{font-size:var(--fs-h1);margin:14px 0 16px}
.blog-hero .sub{font-size:var(--fs-body);color:var(--body);max-width:72ch;margin:0 auto;line-height:var(--lh-body)}
.blog-wrap{max-width:var(--max);margin:52px auto 0;padding:0 22px}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.bcard{padding:0;display:flex;flex-direction:column}
.bimg{position:relative;aspect-ratio:16/10;overflow:hidden}
.bimg img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.6s var(--spring)}
.bcard:hover .bimg img{transform:scale(1.06)}
.bbody{display:flex;flex-direction:column;gap:10px;padding:20px 24px 24px;flex:1}
.bmeta{display:flex;flex-wrap:wrap;gap:6px 12px;font:500 var(--fs-label)/1.4 var(--b);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.bmeta b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700}
.bcard h2,.bcard h3{font-size:var(--fs-h3);line-height:var(--lh-heading);margin:0}
.bcard .chapo{font-size:var(--fs-body);color:var(--body);flex:1}
.bmore{display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-body)/1 var(--b);color:var(--ink)}
.bmore i{font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform var(--dur-fast) var(--spring)}
.bcard:hover .bmore i{transform:translateX(5px)}
.bcard.feat{grid-column:1/-1;flex-direction:row;min-height:340px}
.bcard.feat .bimg{width:47%;aspect-ratio:auto}
.bcard.feat .bbody{width:53%;padding:36px 40px;justify-content:center;gap:13px}
.bcard.feat h2{font-size:var(--fs-h2)}
.bcard.feat .chapo{font-size:var(--fs-body);flex:none;max-width:65ch}
.bsoon{margin:28px auto 0;text-align:center;font-size:var(--fs-small);color:var(--soft)}
.bsoon a{color:var(--ink)}
.bsoon a:hover{color:var(--c1)}
/* accueil : rappel des derniers articles, hors grille bento — 4 cartes, jamais d'orpheline */
.home-arts{margin-top:26px;grid-template-columns:repeat(4,minmax(0,1fr))}
.home-arts .chapo{font-size:var(--fs-body)}
@media(max-width:1080px){.home-arts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-arts{grid-template-columns:minmax(0,1fr)}}
@media(max-width:860px){
  .bcard.feat{flex-direction:column;min-height:0}
  .bcard.feat .bimg{width:100%;aspect-ratio:16/10}
  .bcard.feat .bbody{width:100%;padding:22px 24px 26px}
}

/* ---------- blog : article ---------- */
.art{max-width:1120px;margin:46px auto 0;padding:0 22px;display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:start}
.art-side{position:sticky;top:96px}
.art-side .as-t{display:block;font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0;margin-bottom:14px}
.toc{display:flex;flex-direction:column;gap:2px}
.toc a{font-size:var(--fs-small);line-height:1.45;color:var(--soft);padding:7px 12px;border-left:2px solid var(--line);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink);border-left-color:var(--c2)}
.art-back{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-small);color:var(--soft);margin-bottom:26px}
.art-back:hover{color:var(--ink)}
.article{max-width:68ch;min-width:0}
.article h1{font-size:var(--fs-h1);margin-bottom:16px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font:500 var(--fs-label)/1.4 var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);margin-bottom:24px}
.art-meta b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chapo-a{font-size:var(--fs-h3);line-height:1.45;color:var(--ink);margin-bottom:28px}
.art-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);margin:0 0 40px}
.art-hero img{width:100%;height:auto;display:block}
.art-hero figcaption{position:absolute;right:12px;bottom:10px;font:500 var(--fs-small)/1 var(--b);letter-spacing:.08em;color:rgba(230,238,255,.62);background:rgba(7,10,20,.78);border-radius:var(--r-pill);padding:5px 10px}
.article p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body);margin:0 0 24px}
.article p b{color:var(--ink)}
.article h2{font-size:var(--fs-h2);margin:52px 0 16px;scroll-margin-top:96px}
.article a{color:var(--c1)}
.article a:hover{text-decoration:underline}
.article ul{margin:0 0 24px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.article ul li{position:relative;padding-left:24px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body)}
.article ul li b{color:var(--ink)}
.article ul li::before{content:'';position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:var(--r-pill);background:var(--grad)}
/* chiffre clé : bloc pleine colonne, jamais noyé dans le texte */
.figure{display:flex;align-items:center;gap:26px;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:24px 28px;margin:0 0 24px}
.figure b{flex:none;font:700 var(--fs-h1)/1 var(--h);letter-spacing:-.04em;background:var(--grad);background-size:190% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;animation:gpan 8s ease-in-out infinite alternate}
.figure span{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body)}
.figure.urgf{border-color:rgba(255,120,100,.32)}
.art-note{border-left:2px solid var(--line-accent-strong);background:rgba(79,123,255,.06);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px;margin:0 0 24px}
.art-note p{font-size:var(--fs-body);line-height:var(--lh-body);margin:0}
.art-cta{border:1px solid var(--line-accent);border-radius:var(--r-lg);background:linear-gradient(160deg,rgba(34,211,238,.08),rgba(168,85,247,.08));padding:32px 30px;margin:48px 0 0;text-align:center;container-type:inline-size} /* conteneur de requête du CTA dans un article */
.art-cta h2{margin:0 0 8px;font-size:var(--fs-h2)}
.art-cta p{font-size:var(--fs-body);margin:0;color:var(--body)}
.art-cta .cta-row{justify-content:center;margin:20px 0 10px}
.art-cta .proof{margin:0}
.art-foot{margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:var(--fs-body)}
.art-foot a{color:var(--c1)}
.toc-m{display:none;margin:0 0 30px;border:1px solid var(--line);border-radius:var(--r-md);background-color:var(--glass)}
.toc-m summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.toc-m summary::-webkit-details-marker{display:none}
.toc-m summary::after{content:'+';font-size:var(--fs-h3);font-weight:400;color:var(--soft);transition:transform var(--dur-fast) var(--spring)}
.toc-m[open] summary::after{transform:rotate(45deg)}
.toc-m .toc{padding:0 14px 14px}
.toc-m .toc a{border-left:0;padding:8px 4px;border-bottom:1px solid var(--line)}
.toc-m .toc a:last-child{border-bottom:0}
@media(max-width:1020px){
  .art{display:block}
  .art-side{display:none}
  .toc-m{display:block}
}
@media(max-width:720px){
  .figure{flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px}
  .art{margin-top:30px}
}

/* ---------- accessibilité mouvement (nouveaux composants) ---------- */
@media (prefers-reduced-motion:reduce){
  .fun-fork path{opacity:.75;transition:none var(--ease-out)}
  .fun-fork path.on{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .fcard{opacity:1;transition:none var(--ease-out)}
  .fcard.on{transform:none}
  .fc-out{opacity:1;transform:none;transition:none var(--ease-out)}
  .fo-ic svg [pathLength]{stroke-dasharray:none;stroke-dashoffset:0}
  .fcard.on .fo-ic svg [pathLength]{animation:none}
  .fc-urg.on .fo-ic,.fc-urg.on .fo-ic svg{animation:none}
  .bimg img{transition:none var(--ease-out);transform:none}
  .figure b,.t-study .st-num{animation:none}
  .toc a{transition:none var(--ease-out)}
}

/* la grille du blog : une carte standard occupe une colonne — .tile impose span 12, on le neutralise ici */
.bgrid .bcard{grid-column:auto}
.bgrid .bcard.feat{grid-column:1/-1}

/* ---------- restaurants : plan de charge, durées par couverts, grandes tablées ---------- */
#plan,#tables,#faq-resto{scroll-margin-top:84px}
/* le plateau raisonne en services, pas en heures ouvrées : pas de trame horaire générique */
.rsv .agf-body{background-image:none}
/* pause entre les deux services */
.agf-gap{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;font:italic 400 var(--fs-small)/1 var(--a);color:var(--soft);letter-spacing:.03em}
/* échelle des durées : la barre s'étire avec la tablée — le différenciateur */
.durscale{max-width:560px;margin:26px auto 0;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:18px 22px}
.durscale .ds-t{display:block;font:700 var(--fs-small)/1.35 var(--h);color:var(--ink);margin-bottom:12px;text-align:center}
.durrow{display:grid;grid-template-columns:88px 1fr 58px;align-items:center;gap:12px;padding:5px 0}
.durrow .dl{font:500 var(--fs-small)/1.2 var(--b);color:var(--soft);text-align:right;white-space:nowrap}
.durrow .db{position:relative;height:11px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
.durrow .db i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--grad);transform-origin:left center;transform:scaleX(var(--w,1))}
.durrow .dv{font:700 var(--fs-small)/1 var(--h);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.reveal .durrow .db i{transform:scaleX(0);transition:transform .9s var(--spring)}
.reveal.in .durrow .db i{transform:scaleX(var(--w,1))}
.reveal.in .durrow:nth-child(3) .db i{transition-delay:.12s}
.reveal.in .durrow:nth-child(4) .db i{transition-delay:.26s}
/* l'article reprend l'échelle dans la colonne de lecture */
.article .durscale{margin:0 0 24px;max-width:none}
.article h3{font-size:var(--fs-h3);margin:36px 0 12px;scroll-margin-top:96px}
/* grande tablée : accent violet — une décision, pas une urgence */
.fc-big{border-color:rgba(168,85,247,.38);background-image:linear-gradient(160deg,rgba(168,85,247,.07),transparent 42%)}
.fc-big .fc-tag{color:#DDBEFF;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.12)}
.fc-big.on{border-color:rgba(168,85,247,.72);box-shadow:0 18px 48px rgba(6,10,26,.5),0 0 40px rgba(168,85,247,.2);transform:translateY(-6px) scale(1.015)}
.fc-big .fo-ic{background:rgba(168,85,247,.13);border-color:rgba(168,85,247,.4)}
.fun-cards.two{grid-template-columns:repeat(2,1fr);max-width:780px;margin-left:auto;margin-right:auto}
@media(max-width:760px){
  .fun-cards.two{grid-template-columns:1fr;max-width:none}
  .fc-big.on{transform:none}
  .durrow{grid-template-columns:76px 1fr 52px;gap:9px}
  .durscale{padding:15px 16px}
}
@media (prefers-reduced-motion:reduce){
  .reveal .durrow .db i,.reveal.in .durrow .db i{transform:scaleX(var(--w,1));transition:none var(--ease-out)}
  .fc-big.on{transform:none}
}

/* ---------- cabinets : duel serveur vocal / Celya, tri des appels, mémoire patient, installation ----------
   Par défaut (sans JS, ou avec prefers-reduced-motion), chaque schéma affiche son
   ÉTAT FINAL figé ; bento.js ajoute .anim / .run pour dérouler les boucles. */
#duel,#urgences,#installation,#access,#faq-cab{scroll-margin-top:84px}
.duel-free>.exbadge{position:absolute;top:-6px;right:26px}

/* -- schéma 1 : deux colonnes, deux chronomètres -- */
.duel{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:880px;margin:0 auto}
.dcol{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:16px 18px 18px;overflow:hidden;transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.dcol header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line)}
.dcol header b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink)}
.dtimer{font:700 var(--fs-small)/1 var(--h);font-variant-numeric:tabular-nums;color:var(--ink)}
.dcol-cel .dtimer{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.dbody{display:flex;flex-direction:column;gap:8px;flex:1;min-height:288px}
.dstep{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-md);padding:9px 12px;font-size:var(--fs-small);line-height:1.4;color:var(--body)}
.dstep.dwait{color:var(--soft);font-style:italic}
.ddots{display:inline-flex;gap:3px;margin-left:2px;align-items:center}
.ddots b{width:4px;height:4px;border-radius:var(--r-pill);background:var(--soft);animation:tdot 1s infinite}
.ddots b:nth-child(2){animation-delay:.15s}
.ddots b:nth-child(3){animation-delay:.3s}
.dfail{display:flex;align-items:center;gap:9px;margin-top:auto;border:1px solid rgba(255,120,100,.5);background:rgba(255,120,100,.12);border-radius:var(--r-sm);padding:10px 12px;font:700 var(--fs-small)/1.35 var(--h);color:#FFB4A8}
.dfail svg{width:15px;height:15px;stroke:#FFB4A8;fill:none;stroke-width:2.4;stroke-linecap:round;flex:none}
/* état final par défaut : la colonne serveur vocal a viré au rouge sourd */
.dcol-ivr{border-color:rgba(255,120,100,.4);background-color:rgba(46,18,22,.62)}
.dcol-ivr .dtimer{color:#FFB4A8}
.duel.anim .dcol-ivr{border-color:var(--line);background-color:var(--glass)}
.duel.anim .dcol-ivr:not(.lost) .dtimer{color:var(--ink)}
.duel.anim .dcol-ivr.lost{border-color:rgba(255,120,100,.5);background-color:rgba(46,18,22,.66)}
.dm{max-width:94%;padding:8px 11px;border-radius:var(--r-md);font-size:var(--fs-small);line-height:1.42}
.dj{align-self:flex-start;background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(79,123,255,.14));border:1px solid var(--line-accent);color:var(--ink);border-bottom-left-radius:calc(var(--r-sm)/2)}
.dc{align-self:flex-end;background:var(--surface-2);border:1px solid var(--line);border-bottom-right-radius:calc(var(--r-sm)/2);color:var(--body)}
.ddone{display:flex;align-items:center;gap:8px;align-self:center;font:500 var(--fs-small)/1.3 var(--b);color:#8FE3B0;border:1px solid rgba(49,217,131,.35);background:rgba(49,217,131,.08);padding:7px 12px;border-radius:var(--r-pill)}
.dcoche{width:15px;height:15px;stroke:#8FE3B0;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dcard{margin-top:auto;border:1px solid var(--line-accent);background:rgba(12,17,32,.92);border-radius:var(--r-md);padding:10px 13px;box-shadow:0 12px 30px rgba(6,10,26,.5)}
.dcard b{display:block;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.dcard span{display:block;font-size:var(--fs-small);color:var(--soft);margin-top:3px}
/* pendant l'animation : tout part caché, chaque élément monte à son tour */
.duel.anim .dstep,.duel.anim .dfail,.duel.anim .dm,.duel.anim .ddone{opacity:0;transform:translateY(9px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.duel.anim .dcard{opacity:0;transform:translateY(22px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.duel.anim .dstep.on,.duel.anim .dfail.on,.duel.anim .dm.on,.duel.anim .ddone.on,.duel.anim .dcard.on{opacity:1;transform:none}
.duel.anim .dcoche path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur) var(--ease-out) .15s}
.duel.anim .ddone.on .dcoche path{stroke-dashoffset:0}

/* -- schéma 2 : le tri des appels, points lumineux qui descendent -- */
.triflow{max-width:760px;margin:0 auto}
.tf-top{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);border-radius:var(--r-lg);padding:15px 26px;width:fit-content;max-width:100%;margin:0 auto}
.tf-top b{display:flex;align-items:center;gap:9px;font:700 var(--fs-body)/1.3 var(--h);color:var(--ink)}
.tf-top b svg{width:17px;height:17px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tf-top span{font-size:var(--fs-small);color:var(--soft)}
.tf-zone{position:relative;height:190px;margin:6px auto 0;max-width:620px}
.tf-fork{position:absolute;left:0;right:0;bottom:0;width:100%;height:104px;overflow:visible}
.tf-fork path{fill:none;stroke:url(#bgrad);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.45}
.tf-janet{position:absolute;left:50%;top:26px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:10px;border:1px solid var(--line-accent);background:rgba(12,17,32,.9);border-radius:var(--r-pill);padding:8px 16px 8px 9px;box-shadow:0 0 30px rgba(79,123,255,.22);white-space:nowrap}
.tf-janet img{width:34px;height:34px;border-radius:var(--r-pill)}
.tf-janet b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink)}
.tf-janet .wave{height:13px;margin-left:0}
.fdot{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:var(--r-pill);background:radial-gradient(circle at 35% 35%,#BFE9FF,var(--c2) 72%);box-shadow:0 0 10px rgba(79,123,255,.8);opacity:0;z-index:1;font-style:normal;animation:tfdot 2.8s linear infinite paused;animation-delay:var(--dl,0s)}
.triflow.run .fdot{animation-play-state:running}
.fL{--tx:calc(var(--bx,160px)*-1)}
.fR{--tx:var(--bx,160px)}
@keyframes tfdot{
  0%{transform:translate3d(0,-4px,0);opacity:0}
  10%{opacity:.95}
  46%{transform:translate3d(0,86px,0);opacity:.95}
  64%{transform:translate3d(calc(var(--tx)*.22),128px,0)}
  90%{opacity:.8}
  100%{transform:translate3d(var(--tx),184px,0);opacity:0}
}
.tf-cards{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;max-width:660px;margin:-4px auto 0}
.tf-card{border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:16px;display:flex;flex-direction:column;gap:10px}
.tf-card>p{font-family:var(--a);font-style:italic;font-size:var(--fs-body);line-height:1.4;color:var(--ink);flex:1}
.tf-ok{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(7,10,20,.5);padding:10px 12px}
.tf-ok>svg{width:20px;height:20px;flex:none;stroke:#8FE3B0;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.tf-ok b{display:block;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.tf-ok span{display:block;font-size:var(--fs-small);color:var(--soft);line-height:1.4}
.tf-hum{border-color:rgba(168,85,247,.38);background-image:linear-gradient(160deg,rgba(168,85,247,.07),transparent 42%)}
.tf-hum .fc-tag{color:#DDBEFF;border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.12)}
.tf-ph{flex:none;position:relative;width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(168,85,247,.13);border:1px solid rgba(168,85,247,.4)}
.tf-ph svg{width:16px;height:16px;stroke:#DDBEFF;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tf-ph::after{content:'';position:absolute;inset:-1px;border-radius:var(--r-sm);border:2px solid rgba(168,85,247,.65);opacity:0}
.triflow.run .tf-ph svg{animation:tfring 2.8s ease-in-out infinite}
.triflow.run .tf-ph::after{animation:tfhalo 2.8s ease-out infinite}
@keyframes tfring{0%,27%{transform:rotate(0)}30%{transform:rotate(-13deg)}33%{transform:rotate(11deg)}36%{transform:rotate(-8deg)}39%,72%{transform:rotate(0)}75%{transform:rotate(-13deg)}78%{transform:rotate(11deg)}81%{transform:rotate(-8deg)}84%,100%{transform:rotate(0)}}
@keyframes tfhalo{0%,28%{opacity:0;transform:scale(1)}31%{opacity:.85}42%{opacity:0;transform:scale(1.5)}73%{opacity:0;transform:scale(1)}76%{opacity:.85}87%,100%{opacity:0;transform:scale(1.5)}}
.tf-ctx{border:1px dashed rgba(168,85,247,.4);border-radius:var(--r-md);padding:9px 11px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tf-ctx b{width:100%;font:500 var(--fs-label)/1 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#BCC6E0;margin-bottom:2px}
.tf-ctx span{font:500 var(--fs-small)/1 var(--b);color:var(--ink);border:1px solid var(--line-strong);background:var(--surface-1);border-radius:var(--r-pill);padding:5px 9px}
.triflow.run .tf-ctx{animation:tfpop 2.8s ease-in-out infinite}
@keyframes tfpop{0%,28%,44%,72%,88%,100%{transform:scale(1)}33%,77%{transform:scale(1.02)}}

/* -- urgences : chips de contexte + signature -- */
.urg-txt{max-width:65ch;margin:0 auto;text-align:left;font-size:var(--fs-body);color:var(--body)}
.urg-chips{max-width:560px;margin:26px auto 0;text-align:center;border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);padding:16px 18px}
.urg-chips b{display:block;font:500 var(--fs-label)/1.4 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#BCC6E0;margin-bottom:11px}
.urg-chips div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.urg-chips span{font:500 var(--fs-small)/1 var(--b);color:var(--ink);border:1px solid rgba(255,120,100,.38);background:rgba(255,120,100,.08);border-radius:var(--r-pill);padding:8px 13px}
.sigline{margin:46px auto 0;text-align:center;font-family:var(--a);font-style:italic;font-size:var(--fs-h2);line-height:var(--lh-heading);color:var(--ink);letter-spacing:-.015em;text-wrap:balance}

/* -- schéma 3 : la fiche patient qui se remplit -- */
.memcard{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(7,10,20,.55);padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.memcard>.exbadge{position:absolute;top:12px;right:12px;margin:0}
.mc-hd{display:flex;align-items:center;gap:11px}
.mc-ic{flex:none;width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:linear-gradient(140deg,rgba(34,211,238,.15),rgba(168,85,247,.15));border:1px solid var(--line-accent)}
.mc-ic svg{width:17px;height:17px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mc-hd b{display:block;font:700 var(--fs-small)/1.25 var(--h);color:var(--ink)}
.mc-hd span{display:block;font-size:var(--fs-small);color:var(--soft);font-variant-numeric:tabular-nums}
.mc-known{display:flex;align-items:center;gap:8px;width:fit-content;font:700 var(--fs-small)/1 var(--h);color:var(--ink);border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.09);border-radius:var(--r-pill);padding:7px 12px;box-shadow:0 0 22px rgba(34,211,238,.3)}
.mc-known i{width:7px;height:7px;border-radius:var(--r-pill);background:var(--grad);font-style:normal;flex:none}
.mc-hist{display:flex;flex-direction:column}
.mc-li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.mc-li span{width:96px;flex:none;color:var(--soft)}
.mc-li b{color:var(--ink);font-weight:500}
.mc-foot{display:flex;align-items:center;gap:8px;font:500 var(--fs-small)/1.35 var(--b);color:#8FE3B0;border:1px solid rgba(49,217,131,.35);background:rgba(49,217,131,.08);border-radius:var(--r-md);padding:9px 12px}
.mc-foot svg{width:14px;height:14px;stroke:#8FE3B0;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.memcard.anim .mem-row{opacity:0;transform:translateY(9px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.memcard.anim .mc-known{box-shadow:none;transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring),box-shadow var(--dur) var(--ease-out) .15s}
.memcard.anim .mem-row.on{opacity:1;transform:none}
.memcard.anim .mc-known.on{box-shadow:0 0 22px rgba(34,211,238,.38)}

/* -- installation : quatre étapes, la ligne se dessine au scroll -- */
.setup{position:relative;max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.set-line{position:absolute;left:15px;top:10px;bottom:10px;width:2px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.set-line i{position:absolute;inset:0;border-radius:var(--r-pill);background:linear-gradient(180deg,var(--c1),var(--c2) 55%,var(--c3));transform-origin:top center}
.sstep{position:relative;padding-left:56px}
.sn{position:absolute;left:0;top:-1px;width:32px;height:32px;border-radius:var(--r-pill);display:grid;place-items:center;font:700 var(--fs-small)/1 var(--h);color:#06080F;background:var(--grad);box-shadow:0 0 20px rgba(79,123,255,.55)}
.sstep b{display:block;font:700 var(--fs-body)/1.3 var(--h);color:var(--ink);margin-bottom:5px}
.sstep p{font-size:var(--fs-body);color:var(--body);max-width:65ch}
.setup.anim .set-line i{transform:scaleY(0)}
.setup.anim .sstep{opacity:.38;transition:opacity var(--dur) var(--ease-out)}
.setup.anim .sn{box-shadow:none;transition:box-shadow var(--dur) var(--ease-out)}
.setup.anim .sstep.lit{opacity:1}
.setup.anim .sstep.lit .sn{box-shadow:0 0 20px rgba(79,123,255,.6)}
.set-note{max-width:65ch;margin:30px auto 0;font-size:var(--fs-small);line-height:var(--lh-body);color:var(--soft);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:14px 18px;text-align:left}

/* -- accessibilité + encart Impulseo + encart article -- */
.access-txt{max-width:65ch;margin:0 auto;text-align:left}
.access-txt p{font-size:var(--fs-body);color:var(--body);margin-bottom:16px}
.access-txt p b{color:var(--ink)}
.t-imp{border-color:rgba(34,211,238,.3)}
.t-study .st-num.st-word{font:700 var(--fs-h1)/1.15 var(--h);letter-spacing:-.03em;white-space:nowrap}

@media(max-width:760px){
  /* le duel reste côte à côte : la comparaison des chronos est tout le message */
  .duel{gap:8px}
  .dcol{padding:11px 10px 12px;border-radius:var(--r-md)}
  .dcol header{padding-bottom:9px;margin-bottom:10px;gap:6px}
  .dbody{min-height:252px;gap:6px}
  .dstep{padding:7px 8px;gap:6px;border-radius:var(--r-sm)}
  .dm{padding:6px 8px;max-width:100%}
  .dfail{padding:8px 9px;gap:7px}
  .ddone{padding:6px 9px;text-align:left}
  .dcard{padding:8px 10px}
  .duel-free>.exbadge{right:16px}
  .tf-zone{height:150px}
  .tf-fork{height:84px}
  .tf-janet{top:16px;padding:6px 12px 6px 7px;gap:8px}
  .tf-janet img{width:28px;height:28px}
  @keyframes tfdot{
    0%{transform:translate3d(0,-4px,0);opacity:0}
    10%{opacity:.95}
    44%{transform:translate3d(0,64px,0);opacity:.95}
    62%{transform:translate3d(calc(var(--tx)*.22),100px,0)}
    90%{opacity:.8}
    100%{transform:translate3d(var(--tx),144px,0);opacity:0}
  }
  .tf-cards{grid-template-columns:1fr 1.08fr;gap:8px}
  .tf-card{padding:11px;gap:8px;border-radius:var(--r-md)}
  .tf-ok{padding:8px 9px;gap:7px}
  .tf-ph{width:30px;height:30px}
  .tf-ctx{padding:8px 9px;gap:5px}
  .tf-ctx span{padding:4px 7px}
  .setup{gap:22px}
  .sstep{padding-left:48px}
  .sn{width:30px;height:30px}
  .set-line{left:14px}
}

@media (prefers-reduced-motion:reduce){
  .ddots b{animation:none}
  .fdot{display:none}
  .triflow.run .tf-ph svg,.triflow.run .tf-ph::after,.triflow.run .tf-ctx{animation:none}
  .tf-ph::after{opacity:0}
  .duel.anim .dstep,.duel.anim .dfail,.duel.anim .dm,.duel.anim .ddone,.duel.anim .dcard{opacity:1;transform:none;transition:none var(--ease-out)}
  .duel.anim .dcoche path{stroke-dasharray:none;stroke-dashoffset:0;transition:none var(--ease-out)}
  .memcard.anim .mem-row{opacity:1;transform:none;transition:none var(--ease-out)}
  .memcard.anim .mc-known{box-shadow:0 0 22px rgba(34,211,238,.3)}
  .setup.anim .set-line i{transform:scaleY(1)}
  .setup.anim .sstep{opacity:1;transition:none var(--ease-out)}
  .setup.anim .sn{box-shadow:0 0 20px rgba(79,123,255,.55)}
}

/* ---------- indépendants : héro-portrait, bande métiers, rappel perdu, journée,
   extension du numéro, tableau de bord, congés ----------
   Même convention que les autres pages : l'état par défaut (sans JS, ou en
   prefers-reduced-motion) est l'ÉTAT FINAL figé ; bento.js pose .anim / .run /
   .on pour dérouler les boucles. Mouvements en transform/opacity uniquement. */
#jour,#numero,#tableau,#conges,#faq-indep{scroll-margin-top:84px}

/* -- héro : la photo montre quelqu'un, pas un lieu -- */
.t-hero-solo{min-height:560px}
.t-hero-solo .hph{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden}
.t-hero-solo .hph img{width:100%;height:100%;object-fit:cover;object-position:28% 42%}
/* voile gauche + pied sombre : le texte reste lisible, le sujet reste visible à droite */
.t-hero-solo .hph::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,10,20,.9) 0,rgba(7,10,20,.66) 40%,rgba(7,10,20,.28) 64%,rgba(7,10,20,.06) 100%),
  linear-gradient(0deg,rgba(7,10,20,.62) 0,rgba(7,10,20,.1) 44%)}
.t-hero-solo .sub{max-width:46ch}

/* -- la colonne de droite du héro : le sommaire de la page --
   Le héro passe de 8 à 7 colonnes par une CLASSE posée sur la section
   (t-hero-7), pas par :has() : les navigateurs sans :has() garderaient
   sinon un héro de 8 colonnes à côté d'une carte de 5.
   align-self:start : le héro garde sa hauteur propre. Sans effet sur les
   pages à sommaire, où le héro est déjà la plus haute des deux tuiles. */
.t-hero-7{grid-column:span 7;align-self:start}
.t-answer{grid-column:span 5;align-self:stretch;display:flex;flex-direction:column;padding:34px 34px 30px}
.t-answer>.kick{margin-bottom:0}
.t-answer ol{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.t-answer li{border-top:1px solid var(--line)}
.t-answer li:first-child{border-top:0}
.t-answer a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;font:500 var(--fs-body)/1.35 var(--h);color:var(--ink);letter-spacing:-.01em;transition:color var(--dur-fast) var(--ease-out)}
/* même flèche que .mrow i : dégradé détouré sur le texte, avance au survol.
   position:static annule le ::after d'agrandissement de cible (« li a::after »,
   plus bas) : sans lui la flèche serait un calque absolu de la largeur du lien.
   La cible reste à 55 px de haut sur toute la colonne, bien au-dessus du minimum. */
.t-answer a::after{content:'\2192';position:static;flex:none;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform var(--dur-fast) var(--spring)}
.t-answer a:hover{color:var(--c1)}
.t-answer a:hover::after{transform:translateX(5px)}
/* -- le calculateur : héro compact, outil en dessous --
   Pas de carte à côté du héro : il reprend ses 12 colonnes et perd sa hauteur
   minimale. L'outil vient juste dessous, en deux tuiles — le formulaire sur 7
   colonnes (≈ 600 px de contenu, donc deux champs de front) et la carte de
   résultat sur 5, collée sous la nav pendant qu'on remplit le formulaire.
   align-self:start : sans lui la tuile s'étirerait sur toute la rangée et
   position:sticky n'aurait plus de course. */
.t-hero-12{grid-column:span 12;min-height:0}
.t-calc-in{grid-column:span 7}
.t-calc-out{grid-column:span 5;position:sticky;top:88px;align-self:start}
/* transform:none annule la parallaxe de .tile sur les deux tuiles de l'outil :
   la carte collante ne dérive pas de ±16 px contre la nav sous laquelle elle
   tient, et le formulaire ne se décale pas de sa carte — les deux forment un
   seul objet, pas deux tuiles indépendantes. */
.t-calc-in,.t-calc-out{transform:none}
.t-calc-out>.calcout{margin-top:0}
/* au-dessus de 900 px le détail est déplié en permanence : pas de poignée */
.calc-more>summary{display:none}
/* une ancre du sommaire ne glisse pas sous la nav collante */
h2[id],section[id]{scroll-margin-top:96px}

/* -- bande des métiers concernés : pastilles en cascade -- */
.jobs{display:flex;flex-wrap:wrap;gap:9px 10px;justify-content:center;max-width:840px;margin:0 auto}
.jobs span{font:500 var(--fs-small)/1 var(--b);color:var(--ink);border:1px solid var(--line);background:var(--surface-1);border-radius:var(--r-pill);padding:9px 15px;white-space:nowrap}
.jobs-line{margin:24px auto 0;max-width:65ch;text-align:left;font-size:var(--fs-body);color:var(--body)}
.jobs-line b{color:var(--ink)}
.reveal .jobs span{transform:translateY(12px);transition:transform .4s var(--ease-reveal);transition-delay:calc(var(--i,0)*55ms)}
.reveal.in .jobs span{transform:none}

/* -- le rappel qui n'arrive jamais : deux attentes face à face -- */
.rappel-txt{max-width:65ch;margin:0 auto;text-align:left;font-size:var(--fs-body);color:var(--body)}
.rappel-txt b{color:var(--ink)}
.waitduo{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;max-width:720px;margin:34px auto 0}
.wd-card{border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:18px;display:flex;flex-direction:column;gap:10px}
.wd-card>b{font:500 var(--fs-label)/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:#BCC6E0}
.wd-card q{quotes:'« ' ' »';font-family:var(--a);font-style:italic;font-size:var(--fs-h3);line-height:1.35;color:var(--ink)}
.wd-wait{display:flex;align-items:center;gap:9px;margin-top:auto;font-size:var(--fs-small);color:var(--soft)}
.wd-dots{display:inline-flex;gap:4px;align-items:center;padding:8px 11px;border-radius:var(--r-sm);background:var(--surface-1);border:1px solid var(--line)}
.wd-dots i{width:5px;height:5px;border-radius:var(--r-pill);background:var(--soft);animation:tdot 1.1s infinite}
.wd-dots i:nth-child(2){animation-delay:.15s}
.wd-dots i:nth-child(3){animation-delay:.3s}
.wd-mid{align-self:center;display:flex;flex-direction:column;align-items:center;gap:7px;padding:0 4px}
.wd-mid svg{width:26px;height:26px;stroke:url(#bgrad);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wd-mid span{font:500 var(--fs-label)/1.35 var(--b);letter-spacing:.12em;text-transform:uppercase;color:#BCC6E0;text-align:center;white-space:nowrap}
.rappel-free .sigline{margin-top:40px}

/* -- schéma 1 : une journée, deux versions -- */
.day-free>.exbadge{position:absolute;top:-6px;right:26px}
.day{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.dayrow{border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:16px 18px;transition:opacity var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.dayrow header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.dayrow header b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink)}
.day-score{font:700 var(--fs-small)/1 var(--h);font-variant-numeric:tabular-nums;color:#AEB9D6;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 11px;white-space:nowrap;transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.day-score:empty{display:none}
.day-sans .day-score{color:#FFB4A8;border-color:rgba(255,120,100,.4);background:rgba(255,120,100,.08)}
.day-avec .day-score{color:#8FE3B0;border-color:rgba(49,217,131,.35);background:rgba(49,217,131,.07)}
.day.anim .day-sans:not(.lost) .day-score{color:#AEB9D6;border-color:var(--line);background:transparent}
.day-track{position:relative;height:76px;margin-top:8px}
.day-track::before{content:'';position:absolute;left:34px;right:38px;top:52px;height:2px;border-radius:var(--r-pill);background:var(--line-strong)}
.dt-h{position:absolute;top:45px;font:500 var(--fs-small)/1.4 var(--b);color:var(--soft);font-variant-numeric:tabular-nums}
.dt-h:first-child{left:0}
.dt-end{right:0}
.day-blk{position:absolute;top:40px;height:26px;left:calc(34px + (100% - 72px)*var(--l));width:calc((100% - 72px)*var(--w));border-radius:var(--r-sm);border:1px solid var(--line-accent);background:linear-gradient(165deg,rgba(34,211,238,.2),rgba(79,123,255,.16) 60%,rgba(168,85,247,.18));display:flex;align-items:center;justify-content:center;overflow:hidden;font-style:normal;transform-origin:left center}
.day-blk span{font:500 var(--fs-label)/1 var(--b);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
.day-call{position:absolute;top:2px;left:calc(34px + (100% - 72px)*var(--x));width:26px;height:26px;margin-left:-13px;border-radius:var(--r-pill);display:grid;place-items:center;background:rgba(12,17,32,.94);border:1px solid var(--line-accent-strong);box-shadow:0 0 14px rgba(79,123,255,.3);transition:opacity var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.day-call svg{width:12px;height:12px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.day-call::after{content:'';position:absolute;left:50%;top:26px;width:2px;height:14px;background:linear-gradient(180deg,rgba(79,123,255,.55),rgba(79,123,255,0));transform:translateX(-50%)}
.day-sans .day-call.gone{opacity:.28;border-color:rgba(158,173,196,.35);box-shadow:none}
.day-avec .day-call.done{border-color:rgba(49,217,131,.55);box-shadow:0 0 14px rgba(49,217,131,.28)}
.day-out{margin-top:12px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:34px}
.day-pile{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dp-chip{font:500 var(--fs-small)/1 var(--b);color:#AEB9D6;border:1px solid rgba(158,173,196,.35);background:rgba(148,163,184,.09);border-radius:var(--r-pill);padding:7px 11px;white-space:nowrap;transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.day-sans.lost .dp-chip{color:#FFB4A8;border-color:rgba(255,120,100,.42);background:rgba(255,120,100,.09)}
.day-fail{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:700 var(--fs-small)/1.35 var(--h);color:#FFB4A8;border:1px solid rgba(255,120,100,.5);background:rgba(255,120,100,.12);border-radius:var(--r-md);padding:9px 12px}
.day-fail svg{width:14px;height:14px;stroke:#FFB4A8;fill:none;stroke-width:2.4;stroke-linecap:round;flex:none}
.day-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dg{font:500 var(--fs-small)/1 var(--b);border-radius:var(--r-pill);padding:7px 11px;white-space:nowrap;border:1px solid var(--line)}
.dg.ok{color:#8FE3B0;border-color:rgba(49,217,131,.35);background:rgba(49,217,131,.08)}
.dg.wait{color:#FFCF9E;border-color:rgba(255,170,80,.42);background:rgba(255,170,80,.09)}
/* pendant l'animation : tout part caché, la version active est en avant */
.day.anim .dayrow{opacity:.5}
.day.anim .dayrow.cur{opacity:1}
.day.anim .day-blk{transform:scaleX(0);transition:transform var(--dur) var(--spring)}
.day.anim .dayrow.cur .day-blk.on,.day.anim .day-blk.on{transform:scaleX(1)}
.day.anim .day-blk span{opacity:0;transition:opacity var(--dur) var(--ease-out) .3s}
.day.anim .day-blk.on span{opacity:1}
.day.anim .day-call{opacity:0;transform:translateY(-18px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring),border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.day.anim .day-call.on{opacity:1;transform:none}
.day.anim .day-call.gone{opacity:.28}
.day.anim .dp-chip,.day.anim .dg{opacity:0;transform:translateY(9px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring),color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.day.anim .dp-chip.on,.day.anim .dg.on{opacity:1;transform:none}
.day.anim .day-fail{opacity:0;transform:translateY(9px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.day.anim .day-fail.on{opacity:1;transform:none}

/* -- schéma 2 : l'extension du numéro -- */
.numsplit{max-width:760px;margin:0 auto}
.ns-num{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);border-radius:var(--r-lg);padding:15px 28px;width:fit-content;max-width:100%;margin:0 auto}
.ns-num b{display:flex;align-items:center;gap:9px;font:700 var(--fs-body)/1.3 var(--h);color:var(--ink)}
.ns-num b svg{width:17px;height:17px;stroke:url(#bgrad);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ns-num span{font-size:var(--fs-small);color:var(--soft)}
.ns-zone{position:relative;height:118px;margin:4px auto 0;max-width:620px}
.ns-fork{position:absolute;left:0;right:0;bottom:0;width:100%;height:104px;overflow:visible}
.ns-fork path{fill:none;stroke:url(#bgrad);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linecap:round;opacity:.5}
.ns-dot{position:absolute;left:50%;top:0;width:9px;height:9px;margin-left:-4.5px;border-radius:var(--r-pill);background:radial-gradient(circle at 35% 35%,#BFE9FF,var(--c2) 72%);box-shadow:0 0 10px rgba(79,123,255,.8);opacity:0;z-index:1;font-style:normal;animation:nsdot 3.2s linear infinite paused;animation-delay:var(--dl,0s)}
.numsplit.run .ns-dot{animation-play-state:running}
.nsL{--tx:calc(var(--bx,160px)*-1)}
.nsR{--tx:var(--bx,160px)}
@keyframes nsdot{
  0%{transform:translate3d(0,-4px,0);opacity:0}
  12%{opacity:.95}
  40%{transform:translate3d(0,44px,0);opacity:.95}
  62%{transform:translate3d(calc(var(--tx)*.24),74px,0)}
  90%{opacity:.8}
  100%{transform:translate3d(var(--tx),112px,0);opacity:0}
}
.ns-cards{display:grid;grid-template-columns:1fr 1.12fr;gap:14px;max-width:680px;margin:-4px auto 0}
.ns-card{border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);background-image:linear-gradient(160deg,var(--surface-2),transparent 38%);padding:16px;display:flex;flex-direction:column;gap:10px}
.ns-card .fc-tag{align-self:flex-start}
/* branche gauche : elle existe toujours, elle reste allumée */
.ns-you{border-color:rgba(34,211,238,.38);background-image:linear-gradient(160deg,rgba(34,211,238,.07),transparent 42%)}
.ns-you .fc-tag{color:#9BE8F7;border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.1)}
.ns-act{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(7,10,20,.5);padding:11px 13px;flex:1}
.ns-ph{flex:none;position:relative;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.42)}
.ns-ph svg{width:17px;height:17px;stroke:#9BE8F7;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ns-ph::after{content:'';position:absolute;inset:-1px;border-radius:var(--r-sm);border:2px solid rgba(34,211,238,.6);opacity:0}
.numsplit.run .ns-ph svg{animation:nsring 3.2s ease-in-out infinite}
.numsplit.run .ns-ph::after{animation:nshalo 3.2s ease-out infinite}
@keyframes nsring{0%,88%{transform:rotate(0)}90%{transform:rotate(-13deg)}93%{transform:rotate(11deg)}96%{transform:rotate(-8deg)}100%{transform:rotate(0)}}
@keyframes nshalo{0%,86%{opacity:0;transform:scale(1)}90%{opacity:.85}100%{opacity:0;transform:scale(1.45)}}
.ns-act>div b{display:block;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.ns-act>div span{display:block;font-size:var(--fs-small);color:var(--soft);line-height:1.45}
.ns-janet{display:flex;align-items:center;gap:10px;border:1px solid var(--line-accent);background:rgba(12,17,32,.9);border-radius:var(--r-pill);padding:8px 15px 8px 9px;width:fit-content;box-shadow:0 0 26px rgba(79,123,255,.2)}
.ns-janet img{width:32px;height:32px;border-radius:var(--r-pill)}
.ns-janet b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink);white-space:nowrap}
.ns-janet .wave{height:13px;margin-left:0}
.ns-res{display:flex;flex-wrap:wrap;gap:6px}
.ns-res span{font:500 var(--fs-small)/1 var(--b);color:#8FE3B0;border:1px solid rgba(49,217,131,.35);background:rgba(49,217,131,.08);border-radius:var(--r-pill);padding:6px 10px;white-space:nowrap}
.ns-res span.wait{color:#FFCF9E;border-color:rgba(255,170,80,.42);background:rgba(255,170,80,.09)}
.numsplit.run .ns-res span{animation:nspulse 3.2s ease-in-out infinite;animation-delay:calc(var(--i,0)*.35s)}
@keyframes nspulse{0%,78%,100%{transform:none}86%{transform:translateY(-2px)}}

/* -- schéma 3 : le tableau de bord du soir -- */
.dash{position:relative;max-width:680px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(11,16,30,.9);padding:16px 18px 18px;box-shadow:0 30px 70px rgba(4,8,20,.45)}
.dash>.exbadge{position:absolute;top:14px;right:14px;margin:0}
.dash-hd{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.dash-hd b{font:700 var(--fs-small)/1.2 var(--h);color:var(--ink)}
.dash-hd span{font-size:var(--fs-small);color:var(--soft)}
.dash-cols,.drow{display:grid;grid-template-columns:50px 1.05fr 1.05fr .95fr;gap:10px;align-items:center}
.dash-cols{padding:10px 0 7px;font:500 var(--fs-label)/1.3 var(--b);letter-spacing:.13em;text-transform:uppercase;color:#BCC6E0}
.drow{padding:11px 0;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--body)}
.drow .dtime{font:500 var(--fs-small)/1.3 var(--b);color:var(--soft);font-variant-numeric:tabular-nums}
.drow .dwho{color:var(--ink);font-weight:500;display:flex;align-items:center;gap:7px;flex-wrap:wrap;min-width:0}
.drow .dwho>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbadge{font:700 var(--fs-label)/1 var(--b);letter-spacing:.07em;text-transform:uppercase;color:#9BE8F7;border:1px solid rgba(34,211,238,.45);background:rgba(34,211,238,.09);border-radius:var(--r-pill);padding:4px 8px;white-space:nowrap;transition:box-shadow var(--dur) var(--ease-out)}
.drow.lit .dbadge{box-shadow:0 0 18px rgba(34,211,238,.4)}
.dst{display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-small)/1.3 var(--b);white-space:nowrap}
.dst svg{width:13px;height:13px;stroke:#8FE3B0;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dst.ok{color:#8FE3B0}
.dst.wait{color:#FFCF9E}
.dst.wait i{width:8px;height:8px;border-radius:var(--r-pill);background:#FFB45C;font-style:normal;flex:none;animation:dwait 2s ease-in-out infinite}
@keyframes dwait{50%{opacity:.35}}
/* panneau historique du client connu */
.dash-pop{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:2px 0 2px 60px;border:1px dashed rgba(34,211,238,.4);border-radius:var(--r-md);padding:9px 12px}
.dash-pop b{font:500 var(--fs-label)/1 var(--b);letter-spacing:.11em;text-transform:uppercase;color:#BCC6E0;width:100%}
.dash-pop span{font:500 var(--fs-small)/1 var(--b);color:var(--ink);border:1px solid var(--line-strong);background:var(--surface-1);border-radius:var(--r-pill);padding:5px 9px;white-space:nowrap}
.dash-note{max-width:65ch;margin:26px auto 0;text-align:left;font-size:var(--fs-body);color:var(--body)}
.dash-note b{color:var(--ink)}
/* pendant l'animation : les lignes arrivent une à une, le panneau glisse */
.dash.anim .drow,.dash.anim .dash-pop{opacity:0;transform:translateY(9px);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--spring)}
.dash.anim .dash-pop{transform:translateX(-12px)}
.dash.anim .drow.on,.dash.anim .dash-pop.on{opacity:1;transform:none}
.dash.anim .dst svg path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--dur) var(--ease-out) .2s}
.dash.anim .drow.on .dst svg path{stroke-dashoffset:0}

/* -- congés : l'interrupteur ferme la semaine -- */
.away{max-width:640px;margin:0 auto}
.aw-head{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:var(--r-md);background-color:var(--glass);padding:13px 16px}
.aw-sw{flex:none;position:relative;width:44px;height:24px;border-radius:var(--r-pill);background:var(--line-strong);transition:background var(--dur) var(--ease-out)}
.aw-sw i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:var(--r-pill);background:#E8EEFF;font-style:normal;transition:transform var(--dur) var(--spring)}
.away.on .aw-sw{background:linear-gradient(110deg,var(--c1),var(--c2))}
.away.on .aw-sw i{transform:translateX(20px)}
.aw-head b{display:block;font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
.aw-head span{display:block;font-size:var(--fs-small);color:var(--soft)}
.aw-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.aw-day{position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-1);padding:10px 8px 12px;display:flex;flex-direction:column;gap:6px;align-items:stretch;transition:border-color var(--dur) var(--ease-out),background-color var(--dur) var(--ease-out)}
.aw-day b{font:500 var(--fs-label)/1 var(--b);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);text-align:center;margin-bottom:2px}
.aw-slot{height:9px;border-radius:var(--r-pill);background:linear-gradient(110deg,rgba(34,211,238,.5),rgba(79,123,255,.5));transform-origin:center;transition:transform var(--dur) var(--spring),opacity var(--dur) var(--ease-out)}
.aw-day em{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);font:italic 400 var(--fs-small)/1 var(--a);color:#FFCF9E;opacity:0;white-space:nowrap;transition:opacity var(--dur) var(--ease-out)}
/* jours fermés quand l'interrupteur est basculé */
.away.on .aw-day.aw-off{border-color:rgba(255,170,80,.38);background:rgba(255,170,80,.05)}
.away.on .aw-day.aw-off .aw-slot{transform:scaleX(0);opacity:0}
.away.on .aw-day.aw-off em{opacity:1}
.aw-note{max-width:65ch;margin:24px auto 0;text-align:left;font-size:var(--fs-body);color:var(--body)}
.aw-note b{color:var(--ink)}

@media(max-width:900px){
  /* héro : la photo devient une fenêtre au-dessus du texte — le sujet n'est jamais coupé */
  .t-hero-solo{min-height:0}
  .t-hero-solo .hph{position:relative;inset:auto;height:min(46vh,380px);min-height:280px;margin:-40px -26px 26px;border-radius:0}
  .t-hero-solo .hph img{object-position:62% 58%}
  .t-hero-solo .hph::after{background:linear-gradient(180deg,rgba(7,10,20,.32) 0,rgba(7,10,20,0) 30%,rgba(7,10,20,0) 58%,rgba(7,10,20,.82) 96%)}
  /* une colonne : la carte de droite passe SOUS le héro, donc après les boutons —
     c'est l'ordre du DOM, la lecture ne change pas */
  .t-hero-7,.t-answer{grid-column:span 12}
  .t-answer{padding:24px 26px}
  /* calculateur : une colonne, et la carte de résultat se colle en bas d'écran
     plutôt qu'en haut — au-dessus de la barre d'appel (.callbar, fixe en bas
     dès 300 px de défilement, 67 px mesurés en 390) : 84 px laissent 17 px de
     jour entre les deux, et gardent la marge si la barre grandit. */
  .t-calc-in,.t-calc-out{grid-column:span 12;padding:24px 26px}
  /* fond plein : collée, la carte passe par-dessus le formulaire — var(--glass)
     à .86, puis .96, laissaient encore lire les libellés au travers. C'est le
     fond de page, aucune couleur nouvelle. */
  .t-calc-out{position:sticky;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));background-color:var(--bg)}
  /* montant seul au premier affichage : le détail se replie, sa poignée revient.
     Même motif que le sommaire mobile d'un article (.toc-m). */
  .calc-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font:700 var(--fs-small)/1.3 var(--h);color:var(--ink)}
  .calc-more>summary::-webkit-details-marker{display:none}
  .calc-more>summary::after{content:'+';font-size:var(--fs-h3);font-weight:400;color:var(--soft);transition:transform var(--dur-fast) var(--spring)}
  .calc-more[open]>summary::after{transform:rotate(45deg)}
}
@media(max-width:760px){
  .day-track{height:70px}
  .day-track::before{left:28px;right:32px}
  .day-blk{left:calc(28px + (100% - 60px)*var(--l));width:calc((100% - 60px)*var(--w))}
  .day-call{left:calc(28px + (100% - 60px)*var(--x))}
  /* hors échelle, justifié et mesuré : la largeur du bloc est une durée.
     « Intervention » demande 87 px à 14, 75 à 12, 59 à 9,5 — pour 60 px de
     bloc au plus étroit en 390. */
  .day-blk span{font-size:9.5px;padding:0 4px}
  .dayrow{padding:12px 12px 14px;border-radius:var(--r-md)}
  .day-score{padding:6px 9px}
  .dp-chip,.dg{padding:6px 9px}
  .day-fail{padding:8px 10px;margin-left:0}
  .day-free>.exbadge{right:16px}
  .ns-zone{height:96px}
  .ns-fork{height:84px}
  @keyframes nsdot{
    0%{transform:translate3d(0,-4px,0);opacity:0}
    12%{opacity:.95}
    40%{transform:translate3d(0,30px,0);opacity:.95}
    62%{transform:translate3d(calc(var(--tx)*.24),58px,0)}
    90%{opacity:.8}
    100%{transform:translate3d(var(--tx),90px,0);opacity:0}
  }
  .ns-cards{grid-template-columns:1fr;gap:10px}
  .waitduo{grid-template-columns:1fr;gap:10px}
  .wd-mid{flex-direction:row;padding:2px 0}
  .wd-mid svg{width:20px;height:20px}
  .dash{padding:13px 12px 14px}
  .dash-hd{padding-right:78px} /* le badge Exemple est en absolu à droite */
  /* minmax(0,…) : chaque .drow est sa propre grille, et « Rappel demandé »
     imposait son min-content à la dernière piste, écrasant la colonne de
     l'appelant à 65 px pour un numéro de 97. Les pistes cèdent, le statut
     passe à la ligne, plus rien n'est tronqué. */
  .dash-cols,.drow{grid-template-columns:38px minmax(0,1.22fr) minmax(0,1fr) minmax(0,.82fr);gap:7px}
  .drow .dst{white-space:normal}
  .dst{gap:5px}
  .dbadge{padding:3.5px 6px}
  .dash-pop{margin-left:0}
  .aw-week{gap:5px}
  .aw-day{padding:8px 5px 10px;border-radius:var(--r-sm)}
}
@media (prefers-reduced-motion:reduce){
  .reveal .jobs span{transform:none;transition:none var(--ease-out)}
  .wd-dots i{animation:none}
  .day.anim .dayrow{opacity:1}
  .day.anim .day-blk{transform:scaleX(1);transition:none var(--ease-out)}
  .day.anim .day-blk span{opacity:1;transition:none var(--ease-out)}
  .day.anim .day-call{opacity:1;transform:none;transition:none var(--ease-out)}
  .day.anim .dp-chip,.day.anim .dg,.day.anim .day-fail{opacity:1;transform:none;transition:none var(--ease-out)}
  .ns-dot{display:none}
  .numsplit.run .ns-ph svg,.numsplit.run .ns-ph::after,.numsplit.run .ns-res span{animation:none}
  .ns-ph::after{opacity:0}
  .dash.anim .drow,.dash.anim .dash-pop{opacity:1;transform:none;transition:none var(--ease-out)}
  .dash.anim .dst svg path{stroke-dasharray:none;stroke-dashoffset:0;transition:none var(--ease-out)}
  .dst.wait i{animation:none}
  .aw-sw i,.aw-sw,.aw-slot,.aw-day,.aw-day em{transition:none var(--ease-out)}
  .t-hero-solo .hph img{transition:none var(--ease-out)}
}

/* ---------- grille tarifaire (prix.html, nl/prijzen.html) ----------
   Reprend exactement le motif de .fun-cards / .fcard : mêmes jetons, même
   rayon, même verre dépoli, même gouttière, même point de bascule mobile.
   Aucune couleur nouvelle, aucune variable nouvelle. La formule du milieu
   porte l'accent permanent que .fcard.on donne au survol — c'est le même
   bleu, appliqué au repos parce qu'il désigne un choix, pas un état. */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch;margin-top:26px}
.plan{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px;
  border:1px solid var(--line);border-radius:var(--r-lg);background-color:var(--glass);
  background-image:linear-gradient(160deg,var(--surface-2),transparent 38%)}
.plan-mid{border-color:var(--line-accent-strong);
  box-shadow:0 18px 48px rgba(6,10,26,.5),0 0 34px rgba(79,123,255,.16)}
.plan-hd{display:flex;flex-direction:column;gap:7px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.plan-n{font:700 var(--fs-label)/1 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.plan-p{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan-p b{font:700 var(--fs-h2)/1 var(--h);color:var(--ink);letter-spacing:-.02em}
/* « hors TVA » colle au montant : la règle du dépôt veut la mention à côté de
   chaque chiffre, pas reléguée en note de bas de page. */
.plan-p span{font-size:var(--fs-small);color:var(--soft)}
.plan-m{font-size:var(--fs-body);color:var(--body)}
.plan-m b{color:var(--ink);font-weight:700}
.plan-l{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin:0;padding:0}
.plan-l li{position:relative;padding-left:20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body)}
.plan-l li::before{content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:var(--r-pill);
  background:var(--grad);opacity:.85}
.plan-l li b{color:var(--ink);font-weight:700}
.plan-f{font-family:var(--a);font-style:italic;font-size:var(--fs-body);line-height:1.45;color:var(--ink);
  padding-top:14px;border-top:1px solid var(--line)}
.plans-note{margin:22px auto 0;max-width:65ch;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--soft)}
.plans-note b{color:var(--body)}
@media(max-width:860px){
  .plans{grid-template-columns:1fr;gap:10px}
  .plan{padding:20px}
}

/* ---------- la vignette vidéo du héros ----------
   Une <img> (l'affiche 800 px) ; le lecteur est construit au clic dans une
   surcouche plein écran (.vlay). La hauteur est réservée par aspect-ratio, la
   surcouche est fixed : rien ne se décale. La mise en place dans le héro de
   l'accueil est plus haut (.hero>.vbig) ; la largeur ci-dessous ne sert que si
   la vignette est posée ailleurs, dans une colonne de texte.
   Budget de rendu : aucun backdrop-filter, aucun will-change, aucun filter animé. */
.vbig{position:relative;display:block;width:540px;aspect-ratio:16/9;margin:22px 0 0;
  padding:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;
  background:var(--bg);box-shadow:0 30px 80px rgba(4,8,20,.6);transition:border-color var(--dur) var(--ease-out)}
.vbig:hover{border-color:var(--line-strong)}
.vbig img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.vplay::before{content:"";position:absolute;width:64px;height:64px;border-radius:var(--r-pill);
  background:var(--grad);box-shadow:0 10px 30px rgba(0,0,0,.55);
  transition:transform var(--dur-fast) var(--spring)}
.vbig:hover .vplay::before{transform:scale(1.07)}
.vplay svg{position:relative;z-index:1;width:24px;height:24px;fill:#06080F;margin-left:3px}
.vcap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:26px 16px 13px;text-align:left;
  background:linear-gradient(180deg,transparent,rgba(5,6,12,.88) 62%)}
.vcap b{font:500 var(--fs-small)/1.2 var(--b);color:var(--ink)}
.vcap em{font:500 var(--fs-small)/1 var(--b);font-style:normal;color:var(--soft);font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){
  .vplay::before,.vbig:hover .vplay::before{transition:none var(--ease-out);transform:none}
}
/* le lecteur plein écran, construit au clic */
.vlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(3,5,11,.92);padding:24px}
.vlay video{width:min(1200px,94vw);max-height:88vh;border-radius:var(--r-md);background:var(--bg);
  box-shadow:0 40px 120px rgba(0,0,0,.7)}
.vclose{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--surface-3);border:1px solid var(--line)}
.vclose svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.vclose:hover{background:var(--line-strong)}
@media(max-width:600px){ .vlay{padding:12px} .vlay video{width:100%} }

/* ---------- le diagnostic (prix.html) ----------
   Trois questions qu'un artisan sait répondre, et en sortie la formule qui lui
   correspond, calcul posé à l'écran. Tout tourne dans le navigateur, aucun
   appel réseau. Motifs repris du site : .pills (le sélecteur d'options),
   .roi-out b (le grand nombre en dégradé), .kick, et le liseré en masque xor
   de .tile::before pour la carte sélectionnée. */
.diag{margin:76px 0 0;border-top:1px solid var(--line);padding-top:44px}
.diag-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:26px}
.q{border-top:1px solid var(--line);padding:18px 0 20px}
.q:first-child{border-top:0;padding-top:0}
.q-l{display:flex;gap:12px;align-items:baseline;margin-bottom:12px}
.q-n{font:700 var(--fs-label)/1 var(--b);letter-spacing:.1em;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.q-t{font-size:var(--fs-body);color:var(--ink)}
/* .pills existe déjà : on complète la série avec l'état aria-pressed, qui vaut .on. */
.pills button[aria-pressed="true"]{background:var(--grad);color:#06080F;border-color:transparent}
/* min-height dimensionné sur l'état le plus haut mesuré à chaque largeur, FR
   et NL (le verdict passe de 2 à 4 lignes selon la réponse) : 483 px au plus
   étroit des deux colonnes, 554 px en 320 px. Le margin:auto du verdict
   absorbe la marge, le panneau ne change jamais de hauteur quand la réponse
   change. */
.read{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass);padding:26px 24px;min-height:490px;display:flex;flex-direction:column;gap:20px}
.read-h{font:500 var(--fs-label)/1 var(--b);letter-spacing:.16em;text-transform:uppercase;color:#BCC6E0}
.eq{font-size:var(--fs-small);color:var(--soft);font-variant-numeric:tabular-nums;line-height:1.75;margin:0}
.eq b{color:var(--body);font-weight:500}
.big{display:flex;align-items:baseline;gap:12px}
.big em{
  font-family:var(--h);font-weight:700;font-style:normal;
  font-size:var(--fs-h1);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent
}
.big span{font-size:var(--fs-body);color:var(--soft)}
.axis{margin:2px 0 0}
.track{position:relative;height:4px;background:var(--surface-3);border-radius:var(--r-pill)}
.fill{position:absolute;left:0;top:0;bottom:0;background:var(--grad);border-radius:var(--r-pill);transition:width var(--dur) var(--ease-out)}
.gate{position:absolute;top:-5px;width:1px;height:14px;background:var(--line-strong)}
.marks{position:relative;height:32px;margin-top:10px;font-size:var(--fs-small);color:var(--soft);font-variant-numeric:tabular-nums}
.mark{position:absolute;transform:translateX(-50%);text-align:center;line-height:1.35;white-space:nowrap}
.mark i{font-style:normal;display:block;color:rgba(255,255,255,.34);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase}
/* le dernier repère s'ancre à droite : centré sur 95 %, un libellé long (« Eerste hulplijn ») sortait du panneau */
.mark-end{right:0;transform:none;text-align:right}
.verdict{border-top:1px solid var(--line);padding-top:18px;margin:auto 0 0;font-size:var(--fs-body);line-height:var(--lh-body)}
.verdict b{color:var(--ink);font-weight:500}
.caveat{font-size:var(--fs-small);color:rgba(255,255,255,.36);margin:10px 0 0}
/* La carte que le diagnostic désigne : un liseré en dégradé posé par un
   ::after en inset:-1px et masque xor — aucune bordure ne change d'épaisseur,
   donc aucun décalage de mise en page au changement de sélection. */
.plan[data-on="1"]::after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
@media(max-width:860px){
  .diag{margin-top:56px;padding-top:36px}
  .diag-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:400px){
  .read{min-height:560px}
}
@media (prefers-reduced-motion:reduce){
  .fill,.pills button{transition:none var(--ease-out)}
}

/* ---------- le numéro, et le bandeau de contact (prix.html) ---------- */
.call{margin:76px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:52px 0;text-align:center}
.call p{margin:0 0 20px;font-size:var(--fs-body)}
.call .num{
  display:inline-block;font-family:var(--h);font-weight:700;
  font-size:var(--fs-h1);letter-spacing:-.03em;text-decoration:none;
  font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  border-bottom:1px solid var(--line-strong);padding-bottom:8px
}
.call .num:hover{border-color:var(--c2)}
.call .num:focus-visible{outline-offset:6px} /* exception : texte en dégradé, très grand — l'anneau s'écarte */
.call small{display:block;margin-top:20px;font-size:var(--fs-small);color:var(--soft)}
.contact{margin:34px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ccard{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;background:var(--glass)}
.ccard span{display:block;font:500 var(--fs-label)/1 var(--b);text-transform:uppercase;letter-spacing:.14em;color:var(--soft);margin-bottom:10px}
.ccard a{color:var(--ink);text-decoration:none;font-size:var(--fs-body);border-bottom:1px solid var(--line-strong);padding-bottom:2px}
.ccard a:hover{border-color:var(--c2)}
@media(max-width:860px){
  .call{margin-top:56px;padding:40px 0}
  .contact{grid-template-columns:1fr;gap:10px}
}

/* ---------- le comparatif en tableau (prix.html) ----------
   Quatre modèles × six critères, dans un conteneur qui défile en largeur :
   le corps de page ne déborde jamais. Les en-têtes reprennent .plan-n, la
   colonne Celya le fond de .det-li. */
.cmpwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:26px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--glass)}
.cmp{border-collapse:collapse;width:100%;min-width:820px;font-size:var(--fs-body);line-height:var(--lh-body)}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp thead th{border-top:0;font:700 var(--fs-label)/1.3 var(--b);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding-top:20px;padding-bottom:14px}
.cmp tbody th{font:500 var(--fs-small)/1.4 var(--b);color:var(--ink);width:15%}
.cmp td{color:var(--body);width:21.25%}
.cmp td b{color:var(--ink);font-weight:500}
.cmp .me{background:var(--surface-1)}
.cmp thead .me{color:var(--ink)}
.cmp-note{margin:14px 0 0;font-size:var(--fs-small);color:var(--soft);line-height:var(--lh-body)}
@media(max-width:860px){
  .cmpwrap{border-radius:var(--r-lg)}
  .cmp th,.cmp td{padding:13px 14px}
}

/* ---------- accessibilité : focus clavier et cibles tactiles ----------
   Une règle de focus globale, puis les exceptions justifiées. Les cibles font
   au moins 24 × 24 px (WCAG 2.2, 2.5.8) et 44 px sur la navigation, le
   sélecteur de langue et le pied de page — obtenues par padding compensé par
   une marge négative, ou par une zone cliquable étendue (::after), jamais par
   une hauteur fixe : aucun alignement ne bouge. */
:focus-visible{outline:2px solid var(--c1);outline-offset:2px}
/* sur un fond en dégradé cyan → violet, le cyan se perd : anneau clair */
.btn-grad:focus-visible,.pills button.on:focus-visible,.pills button[aria-pressed="true"]:focus-visible,.agf-tabs button.on:focus-visible,.cbanner .caccept:focus-visible{outline-color:var(--ink)}
button,input,select,textarea,summary,[role=button]{min-height:24px}
.nav-links>a,.nav-drop>a{padding:10px 4px;margin:-10px -4px}    /* 24 → 44 px de haut, « Prix » passe 24 px de large */
.lang a{position:relative}
.lang a::after{content:'';position:absolute;inset:-10px -4px}       /* 24 → 44 px de haut, 24 de large, sans agrandir la pilule */
footer.site .fbar a{padding:12px 5px;margin:-5px 0}                 /* 21 → 45 px de haut, FR/NL/EN ≥ 24 de large ; la marge ne compense que 5 px en hauteur (deux rangées ne se recouvrent jamais, gap 10) et rien en largeur : un lien en bord de conteneur ne déborde pas */
footer.site .fbar{gap:10px 16px}                                    /* 26 − 2 × 5 : l'espacement visible entre deux liens reste 26 px */
/* les liens de colonne ont leur propre cible (41 px, .fcol a) et le logotype n'en veut pas */
.bmore,.art-back,.st-link{padding-top:5px;padding-bottom:5px;margin-top:-5px;margin-bottom:-5px}
/* liens en ligne dans un texte : la zone cliquable dépasse la ligne de 6 px de chaque côté */
p a,li a,dd a,td a,small a,.a a,.note a,.eq a,.verdict a,.caveat a,.cmp-note a,.plans-note a,.fun-note a,.set-note a,.det-note a{position:relative}
p a::after,li a::after,dd a::after,td a::after,small a::after,.a a::after,.note a::after,.eq a::after,.verdict a::after,.caveat a::after,.cmp-note a::after,.plans-note a::after,.fun-note a::after,.set-note a::after,.det-note a::after{content:'';position:absolute;inset:-6px 0}
/* les boutons dans un paragraphe gardent leur propre ::after (reflet) : inset:0 */
p .btn::after,li .btn::after{inset:0}

/* chiffres tabulaires : tout ce qui porte un nombre — prix, minutes, numéro de téléphone, durées,
   minuteurs, compteurs, dates, colonnes — ne saute pas quand il change et s'aligne en colonne */
time,output,.timer,.num,.proof b,.plan-p b,.plan-m,.eq,.big em,.marks,.vcap b,.vcap em,.call .num,.ccard a,.cmp td,.cmp th,
.legal td,.legal dd,.frow .v,.pcrow em,.drow .dtime,.dtimer,.day-score,.dt-h,.durrow .dl,.durrow .dv,.mc-hd span,.mc-li b,
.det-li .dur,.figure b,.t-study .st-num,.q-n,.agf-ruler,.mcal-ruler,.agf-col header,.blk>span,.blk b,.day-blk span,
.pills button,.agf-tabs button,.kick b,.bmeta,.art-meta,.callbar .t,.demo-hd span,.dash-hd span,.roi-ctl label,.roi-out>b,.roi-out>span,
.jq span,.yr,.mark,.ag-tag,.chat .m,.dm,.dstep,.dcard span,.tf-ok span,.ns-act span,.fc-out span,.sstep p,.ph-incoming span,.exbadge,
.fun-top span,.tf-top span,.ns-num span,.step p,.proof,.dcard b,.dst,.mc-known,.plan-p span,.day-fail,.dg,.dp-chip,
.roi-ctl output,.ns-act>div span,.ns-res span,.tf-ctx span,.dash-pop span,.mc-li span,.agf-gap,.fc-tag{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* exception : le grand compteur de l'agenda (« 12 couverts ») ne s'aligne sur
   aucune colonne — les chasses fixes y creusent le 1 */
.agf-cnt b{font-variant-numeric:proportional-nums;font-feature-settings:"pnum" 1}