/* Le Studio : socle commun (variables, typographie, boutons, sections, pied de page).
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */

/* ------------------------------------------------------------------
   Le Studio v3. Tokens : voir DESIGN.md.
   z-index : 2 contenu principal, 10 flottants, 40 suiveur, 50 dock, 55 menu, 60 en-tête, 100 préchargement.
------------------------------------------------------------------ */
:root{
  --bg:#EFEFEC; --white:#FAFAF8; --grey:#DEDEDA; --ink:#0D0D0D; --ink-2:#5B5B57; --line:rgb(13 13 13 / .14);
  --night:#0D0D0D; --night-2:#191918; --on-night:#F2F2EF; --on-night-2:#9C9C97; --line-night:rgb(242 242 239 / .16);
  --accent:#FF4D00; --on-accent:#0D0D0D;
  --font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,3vw,44px); --inset:clamp(8px,.9vw,14px);
  --r-frame:clamp(18px,2vw,30px); --r-md:clamp(12px,1.2vw,18px); --r-pill:999px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* Échelle typographique (10 nov. 2026) : toutes les tailles de texte passent par ces jetons, sauf les affiches et grands titres réglés un par un */
  --fs-2xs:.6875rem; --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem;
  --fs-md:clamp(1.0625rem,1.2vw,1.1875rem); --fs-lg:clamp(1.125rem,1.4vw,1.375rem); --fs-xl:clamp(1.25rem,1.7vw,1.625rem);
  --fs-h3:clamp(1.375rem,2.1vw,2.125rem); --fs-h3l:clamp(1.5rem,2.7vw,2.625rem); --fs-h2s:clamp(1.75rem,3.2vw,3.5rem); --fs-h2m:clamp(2rem,4.2vw,4.75rem);
  /* Durées : d-1 états d'interface, d-2 déplacements, d-3 images. Arrondis : xs (focus), sm (petits éléments) */
  --d-1:.2s; --d-2:.5s; --d-3:.9s; --r-xs:4px; --r-sm:8px;
  --z-main:2; --z-float:10; --z-follower:40; --z-dock:50; --z-header:60; --z-menu:70; --z-loader:100;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:clip}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--font);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
/* Mobile : plus de surbrillance bleue au toucher d'un lien ou d'un bouton (iOS, Android), ni de texte sélectionné en bleu
   quand on touche deux fois vite un bouton (« Menu », barre du bas, pilules). Le contour orange au clavier reste (:focus-visible). (Retour de Sacha validé par Jeremy, 12 nov. 2026) */
html{-webkit-tap-highlight-color:transparent}
button,.pill,.orb,.dock__btn,[role="button"]{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:var(--gutter);top:-80px;z-index:calc(var(--z-loader) + 1);background:var(--accent);color:var(--on-accent);padding:12px 18px;border-radius:var(--r-pill);font-weight:500}
.skip:focus{top:12px}

/* Typographie */
h1,h2,h3,.display{font-weight:450;letter-spacing:-.05em;line-height:.98}
h2{font-size:clamp(2.25rem,5.4vw,5.75rem)}
h3{font-size:var(--fs-h3);letter-spacing:-.035em;line-height:1.08}
.lead{font-size:var(--fs-lg);line-height:1.4;letter-spacing:-.015em}
.muted{color:var(--ink-2)}
.night .muted{color:var(--on-night-2)}
.label{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.label::before{content:"";inline-size:8px;block-size:8px;background:var(--accent);flex:none}
.meta{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;letter-spacing:.02em;text-transform:uppercase}
.num{font-variant-numeric:tabular-nums}

/* Structure */
main{position:relative;z-index:var(--z-main);background:var(--bg);border-radius:0 0 var(--r-frame) var(--r-frame)}
.wrap{padding-inline:var(--gutter)}
.section{padding-block:clamp(88px,11vw,190px)}
.frame{margin:var(--inset);border-radius:var(--r-frame);overflow:clip}
.night{background:var(--night);color:var(--on-night)}
.rule{block-size:1px;background:var(--line);transform-origin:left center}
.night .rule{background:var(--line-night)}

/* États initiaux (seulement si .anim) */
.anim [data-split]{visibility:hidden}
.anim [data-fade]{opacity:0}
.anim [data-rule]{transform:scaleX(0)}
.anim [data-reveal]{clip-path:inset(100% 0 0 0)}

/* Libellé roulant */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;line-height:1.25}
.roll > span{display:block;transition:transform var(--d-2) var(--ease-out)}
.roll::after{content:attr(data-text);position:absolute;inset-inline-start:0;inset-block-start:100%;white-space:nowrap;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  a:hover > .roll > span,button:hover > .roll > span,a:hover > .roll::after,button:hover > .roll::after{transform:translateY(-100%)}
}
@media (prefers-reduced-motion: reduce){ .roll > span,.roll::after{transition:none} }

/* Boutons */
.pill{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:var(--r-pill);border:1px solid currentColor;font-weight:450;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
.pill svg{inline-size:16px;block-size:16px;flex:none}
.pill--accent{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pill--ink{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .pill:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
  .night .pill:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
  .pill--accent:hover,.night .pill--accent:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}
  .pill--ink:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
}
.orb{display:inline-grid;place-items:center;inline-size:clamp(132px,13vw,200px);block-size:clamp(132px,13vw,200px);border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:450;font-size:var(--fs-lg);line-height:1.12;letter-spacing:-.025em;text-align:center;padding:20px;will-change:transform}
.orb > span{display:block;pointer-events:none}
.orb--ink{background:var(--ink);color:var(--bg)}

/* En-tête (haut de page) */
.header{position:absolute;inset:var(--inset) var(--inset) auto var(--inset);z-index:var(--z-header);padding:18px calc(var(--gutter) - var(--inset));display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--on-night)}
.brand{font-weight:500;font-size:1.25rem;letter-spacing:-.04em;display:inline-flex;align-items:center;gap:8px;min-height:44px}
.brand i{inline-size:9px;block-size:9px;background:var(--accent);display:block}
/* Études de cas : leur bloc « .brand » (grille des logos) touchait aussi le logo de l'en-tête, carré décalé de 20 px (12 nov. 2026) */
.header > .brand{display:inline-flex;gap:8px}
.nav{display:none}
.nav ul{display:flex;gap:clamp(18px,2.4vw,40px)}
.nav a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:960px){ .nav{display:block} .header .menu-toggle{display:none} }
.menu-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.menu-toggle i{display:block;inline-size:22px;block-size:8px;border-block:1.5px solid currentColor}

/* Dock flottant */
.dock{position:fixed;inset-inline:0;inset-block-end:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-dock);display:flex;justify-content:center;pointer-events:none}
.dock__in{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:5px;border-radius:var(--r-pill);background:var(--night);color:var(--on-night);box-shadow:0 12px 40px -12px rgb(0 0 0 / .45),0 0 0 1px rgb(242 242 239 / .1)}
.anim .dock__in{opacity:0;visibility:hidden;transform:translateY(24px)}
.dock__btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:var(--r-pill);font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;transition:background-color var(--d-1) ease,color var(--d-1) ease}
.dock__btn i{display:block;inline-size:18px;block-size:7px;border-block:1.5px solid currentColor}
.dock__btn--accent{background:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){ .dock__btn:hover{background:var(--night-2)} .dock__btn--accent:hover{background:var(--on-night);color:var(--night)} }

/* Menu plein écran */
.menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--accent);color:var(--on-accent);display:grid;align-content:space-between;gap:32px;padding:clamp(88px,12vh,130px) var(--gutter) calc(96px + env(safe-area-inset-bottom));visibility:hidden;transform:translateY(101%);border-radius:var(--r-frame) var(--r-frame) 0 0}
.menu__links a{display:flex;align-items:baseline;gap:16px;font-size:clamp(2.75rem,9.5vw,7rem);font-weight:450;letter-spacing:-.055em;line-height:1.04;overflow:hidden;padding-block:2px}
.menu__links a > span{display:block}
.menu__links a small{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em}
.menu__foot{display:flex;flex-wrap:wrap;gap:12px 28px}
.menu__foot a{min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:from-font}
/* Logo dans le menu ouvert, à la place exacte de celui de l'en-tête : texte blanc, carré noir (retour de Jeremy, 12 nov. 2026).
   Classe propre (menu__brand) : « .brand » est aussi un bloc des études de cas. */
.menu__brand{position:absolute;inset-block-start:calc(var(--inset) + 18px);inset-inline-start:var(--gutter);display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:1.25rem;letter-spacing:-.04em;color:var(--on-night)}
.menu__brand i{inline-size:9px;block-size:9px;background:var(--on-accent);display:block}
.menu__close{position:absolute;inset-block-start:calc(var(--inset) + 18px);inset-inline-end:var(--gutter);min-height:44px;display:inline-flex;align-items:center;gap:10px}
.no-anim-menu .menu[data-open="true"]{visibility:visible;transform:none}

/* Chiffres */
.figures{display:grid;gap:40px}
.figures dt{font-size:clamp(4rem,10.5vw,11rem);font-weight:450;letter-spacing:-.07em;line-height:.9;display:flex;align-items:flex-start}
.figures dt small{font-size:.36em;letter-spacing:-.04em;line-height:1;padding-block-start:.22em;color:var(--accent)}
.figures dd{color:var(--ink-2);margin-block-start:16px;max-inline-size:18em}
.odo{display:inline-flex;align-items:flex-start;overflow:hidden;block-size:.9em}
.odo__col{display:block}
.odo__col span{display:block;block-size:.9em;line-height:.9}
@media (min-width:768px){ .figures{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }

/* Bandeau d'appel */
.band{display:block;overflow:clip;background:var(--accent);color:var(--on-accent);padding-block:clamp(28px,3.4vw,56px);border-radius:0;margin:0 0 var(--inset)}   /* pleine largeur, bord à bord, coins droits (demande de Sacha validée par Jeremy, 12 nov. 2026) */
.band__track{display:flex;inline-size:max-content;will-change:transform}
.band__group{display:flex;align-items:center;flex:none}
.band__group span{font-size:clamp(3rem,9.5vw,10rem);font-weight:450;letter-spacing:-.06em;line-height:1;white-space:nowrap;padding-inline:.2em}
.band__group svg{inline-size:clamp(28px,4.6vw,76px);block-size:clamp(28px,4.6vw,76px);flex:none}

/* Pied de page révélé */
.footer{position:relative;z-index:1;color:var(--on-night);padding:clamp(56px,6vw,92px) var(--gutter) calc(84px + env(safe-area-inset-bottom));display:grid;gap:clamp(32px,3.6vw,52px)}
.footer.is-reveal{position:sticky;inset-block-end:0}
.footer h2{font-size:clamp(3rem,8vw,9rem);letter-spacing:-.06em;line-height:.92}
.footer__line{position:relative;block-size:1px;margin-block:clamp(20px,2.4vw,36px) calc(clamp(132px,11vw,168px) / 2 + 4px)}
.footer .orb{inline-size:clamp(132px,11vw,168px);block-size:clamp(132px,11vw,168px)}
.footer__line .rule{position:absolute;inset:0}
.footer__line .orb{position:absolute;inset-inline-end:clamp(0px,8vw,160px);inset-block-start:50%;translate:0 -50%;z-index:var(--z-float)}
/* Pied de page sous 900 px (retour de Jeremy, 12 nov. 2026) : les boutons juste sous le titre, comme sur ordinateur.
   2e passe du même jour (demande de Sacha validée par Jeremy) : plus de cercle ; bouton orange principal, « Réserver un appel » en secondaire,
   l'adresse e-mail en lien texte en dernier. */
.footer__cta{display:none}
@media (max-width:899px){
  .footer__line .orb{display:none}
  .footer__cta{display:inline-flex;order:1}
  .footer__rdv{order:2}
  /* les deux boutons ont la même largeur (celle de la colonne, réglée sur le plus long des trois liens), texte centré (Jeremy, 12 nov. 2026) */
  .footer__haut .footer__links{display:grid;justify-content:start;justify-items:stretch}
  .footer__haut .footer__links .pill:not(.footer__mail){justify-content:center}
  .footer__haut .footer__links .footer__mail{display:none}   /* mobile : plus d'adresse e-mail, les deux boutons mènent au formulaire (Jeremy, 12 nov. 2026) */
  .footer__links .pill.footer__mail{order:3;min-height:44px;padding-inline:0;border:0;color:var(--on-night-2)}
  .footer__mail .roll{border-block-end:1px solid currentColor}   /* soulignement (un text-decoration serait rogné par le roulement) */
  .footer__haut{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .footer__haut > h2{grid-column:1 / -1}
  .footer__line{display:contents}
  .footer__line .rule{position:relative;inset:auto;grid-column:1 / -1;margin-block:clamp(20px,5vw,32px)}
  .footer__links{grid-column:1 / -1;grid-row:3;flex-direction:column;align-items:flex-start;gap:10px}
  .footer__links .pill{padding-inline:18px;font-size:.9375rem}
  .footer__line .orb{position:relative;inset:auto;translate:none;grid-column:2;grid-row:3;inline-size:104px;block-size:104px;padding:8px;font-size:.9375rem}  /* Plus d'air entre les boutons et le plan du site (retour de Jeremy, 12 nov. 2026) */
  .footer__plan{margin-block-start:clamp(24px,7vw,40px)}
}
.footer__links{display:flex;flex-wrap:wrap;gap:12px}
.footer__cols{display:grid;gap:32px}
.footer__cols h3{font-family:var(--mono);font-size:var(--fs-xs);font-weight:400;letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2);margin-block-end:12px;line-height:1.3}
.footer__cols a{display:inline-flex;align-items:center;min-height:36px}
.footer__cols p{color:var(--on-night-2);max-inline-size:22em}
@media (min-width:768px){ .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }
.footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--on-night-2);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase}
.footer__legal a{color:inherit}

/* Repris du v3 : mot géant, étiquettes, bouton rond */
.wordmark{font-weight:500;letter-spacing:-.075em;line-height:.78;white-space:nowrap;overflow:hidden;padding-block:.05em .03em;margin-inline:-.05em;margin-block-end:-.03em}
.wordmark span{display:inline-block}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.night .tags li{border-color:var(--line-night)}
.round{display:inline-grid;place-items:center;inline-size:60px;block-size:60px;border-radius:50%;border:1px solid currentColor;flex:none;transition:background-color var(--d-1) ease,color var(--d-1) ease,border-color var(--d-1) ease}
.round svg{inline-size:20px;block-size:20px}

/* Pied de page : les liens du plan du site roulent au survol et au focus (comme l'en-tête) ; les mentions s'éclaircissent */
.footer__cols a:focus-visible > .roll > span,.footer__cols a:focus-visible > .roll::after{transform:translateY(-100%)}
.footer__legal a{transition:color var(--d-1) ease}
@media (hover:hover) and (pointer:fine){ .footer__legal a:hover{color:var(--on-night)} }
.footer__legal a:focus-visible{color:var(--on-night)}
/* Menu : libellé roulant sur les grands titres (même effet que les boutons) */
@media (hover:hover) and (pointer:fine){
  .menu__links a:hover .roll > span,.menu__links a:hover .roll::after{transform:translateY(-100%)}
}
.menu__links a:focus-visible .roll > span,.menu__links a:focus-visible .roll::after{transform:translateY(-100%)}
/* Menu ouvert : l'en-tête s'efface une fois le panneau monté, sinon ses liens passent sous « Fermer » */
html:has(.menu[data-open="true"]) .header{visibility:hidden;transition:visibility 0s linear .7s}
/* Le menu orange passe au-dessus de l'en-tête (--z-menu > --z-header, 12 nov. 2026) : à l'ouverture comme à la fermeture,
   le logo et « Menu » ne s'affichent plus en blanc sur l'orange, et le bouton « Menu » de l'en-tête ne capte plus le toucher de « Fermer ». */
.no-anim-menu:has(.menu[data-open="true"]) .header{transition-delay:0s}

/* Menu : six titres dont Actualités et, à droite, les pages de service */
.menu{overflow-y:auto;overscroll-behavior:contain}
.menu__cols{display:grid;gap:clamp(24px,4vh,40px)}
.menu__links a{font-size:clamp(2.75rem,12vw,4rem)}   /* plus gros sur mobile (retour de Jeremy, 12 nov. 2026) */
.menu__svc-head{display:flex;justify-content:space-between;gap:16px;padding-block-end:14px;font-family:var(--mono);font-size:var(--fs-xs);line-height:1.3;letter-spacing:.02em;text-transform:uppercase}
.menu__svc li{border-block-start:1px solid rgb(13 13 13 / .22)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.menu__svc a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding-block:clamp(8px,1vw,13px);font-size:var(--fs-h3);font-weight:450;letter-spacing:-.04em;transition:opacity var(--d-2) ease}
.menu__svc-name{display:block;overflow:hidden}
.menu__svc .roll{display:block}
.menu__svc svg{inline-size:clamp(18px,1.5vw,22px);block-size:clamp(18px,1.5vw,22px);flex:none;transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .menu__svc ul:hover a{opacity:.42}
  .menu__svc ul a:hover{opacity:1}
  .menu__svc a:hover .roll > span,.menu__svc a:hover .roll::after{transform:translateY(-100%)}
  .menu__svc a:hover svg{transform:translate(3px,-3px)}
}
.menu__svc ul a:focus-visible{opacity:1;outline-color:var(--ink)}
.menu__svc a:focus-visible .roll > span,.menu__svc a:focus-visible .roll::after{transform:translateY(-100%)}
@media (min-width:900px){
  .menu__cols{grid-template-columns:minmax(0,1fr) minmax(0,min(41.5%,600px));column-gap:var(--gutter);align-items:start}
  /* Six titres doivent tenir dans la hauteur de l'écran : la taille suit la plus petite des deux dimensions */
  .menu__links a{font-size:clamp(2.25rem,min(6.5vw,calc(14svh - 32px)),6.5rem)}
  .menu__svc{padding-block-start:clamp(8px,1.1vw,16px)}
}
@media (prefers-reduced-motion: reduce){ .menu__svc a,.menu__svc svg{transition:none} }

/* ------------------------------------------------------------------
   Masques de texte : aucune lettre coupée (9 oct. 2026).
   Un masque (overflow hidden ou clip) rogne au bord de sa boîte. Or l'encre des lettres en sort : jambages (g, j, p, q, y, ç)
   et accents des capitales quand l'interligne est serré, dernière lettre quand l'approche est négative.
   Chaque masque reçoit donc une marge intérieure, compensée par une marge extérieure négative : la mise en page ne bouge pas,
   seule la zone visible grandit. Contrôle : tests/lettres-coupees.test.js.
------------------------------------------------------------------ */
/* Titres révélés ligne par ligne (SplitText, data-split) */
.line-mask{padding-block:.14em .26em;margin-block:-.14em -.26em;padding-inline:.1em;margin-inline:-.1em}
/* Les marges négatives de deux lignes voisines fusionneraient (une seule compterait) : une fois le titre découpé, ses lignes deviennent
   les rangées d'une grille, où les marges ne fusionnent pas. Même raison pour la liste des titres du menu. */
:has(> .line-mask){display:grid}
.menu__links{display:grid}
/* Libellé roulant (boutons, menu, liens) : la copie du survol suit le décalage */
.roll{padding-inline:.08em;margin-inline:-.08em}
.roll::after{inset-inline-start:.08em}
/* Grands titres du menu : même pas de ligne qu'avant, mais le masque laisse passer jambages et accents */
.menu__links a{padding-block:.14em;margin-block:calc(2px - .14em);padding-inline-start:.08em;margin-inline-start:-.08em}
.menu__links .roll{line-height:1.3;margin-block:-.13em}
.menu__svc-name{padding-inline:.08em;margin-inline:-.08em}
/* Chiffres en rouleau et mot géant : la dernière lettre garde sa place à droite */
.odo{padding-inline:.05em;margin-inline:-.05em}
.wordmark{margin-inline-end:-.14em}

html{scrollbar-gutter:stable;scroll-padding-bottom:96px}   /* la page ne se décale plus quand le défilement est verrouillé (menu, entrée) ; un élément ciblé ne passe pas sous le dock */
@media (prefers-reduced-motion: reduce){ .index__name,.svc__name,.svc__arrow,.case__media img,.gantt__name,.toc__name,.kinds__name,.ways__name,.ways svg,.duo__name,.duo .meta,.offer .round svg,.person__link svg,.next .round svg,.q summary svg{transition:none} }
:root{--accent-text:#F74B00}
:focus-visible{outline-color:var(--ink)}
.night :focus-visible,.night:focus-visible,.header :focus-visible,.footer :focus-visible,.dock :focus-visible,.reelbar :focus-visible{outline-color:var(--accent)}
.menu :focus-visible{outline-color:var(--ink)}
[tabindex="-1"]:focus{outline:none}
.roll::after{content:attr(data-text) / ""}
.figures dt small,.proof__fig dt small{color:var(--accent-text)}
.footer__legal a{display:inline-flex;align-items:center;min-height:24px}

/* ==================================================================
   Page Expertises (v4). Même système que l'accueil v3.
================================================================== */
h1,h2,h3{text-wrap:balance}
p,dd{text-wrap:pretty}

/* Page courante dans la navigation */
/* Une barre dessinée sous le libellé (9 oct.). Le soulignement en text-decoration, posé sur un lien qui contient un libellé roulant
   masqué, s'affichait au-dessus du mot. */
.nav a[aria-current="page"]{position:relative}
.nav a[aria-current="page"]::after{content:"";position:absolute;inset-inline:0;inset-block-end:calc(50% - .625em - 6px);block-size:1.5px;background:var(--accent);pointer-events:none}

/* Rideau : entrée de page et transition entre pages */
.curtain{display:none}
.anim .curtain{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset:0;z-index:var(--z-loader);pointer-events:none}
.curtain i{display:block;background:var(--bg);margin-inline:-.5px}

/* Hero de page */
/* Le hero est le premier enfant de <main>. Sans cette boîte, sa marge haute sort de <main> (fusion de marges)
   et le haut de la page laisse voir le fond noir du pied de page, au lieu de la marge claire. */
main::before{content:"";display:table}
.phero{position:relative;min-block-size:calc(100svh - var(--inset) * 2);display:grid}
.phero__in{display:grid;grid-template-rows:1fr auto;gap:clamp(12px,2vh,28px);padding:clamp(88px,11.5vh,120px) calc(var(--gutter) - var(--inset)) calc(var(--gutter) - var(--inset))}
.phero__grid{display:grid;gap:40px;align-items:end}
.phero__copy{display:grid;gap:26px;max-inline-size:44rem;justify-items:start}
.phero h1{font-size:var(--fs-h2m);line-height:1}
.phero .lead{color:var(--on-night-2);max-inline-size:30em}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px}
.phero .wordmark{font-size:clamp(4rem,20.6vw,25.5rem);line-height:.9;padding-block:0 .1em;margin-block-end:-.06em}
@media (min-width:1024px){
  .phero__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:calc(var(--gutter) * 2)}
}

/* Preuve */
.proof{display:grid;gap:clamp(40px,5vw,72px);background:var(--white);border-radius:var(--r-frame);padding:clamp(28px,4vw,72px)}
.proof figure{display:grid;gap:32px}
.proof blockquote{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;max-inline-size:21em}
.proof figcaption{display:grid;row-gap:2px;line-height:1.3}   /* nom et poste resserrés (12 nov. 2026) */
/* Témoignages : photo de l'auteur dans une pastille ronde, comme sur l'accueil ; sans photo, ses initiales (12 nov. 2026) */
.proof figcaption{grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center}
.proof figcaption > :not(.proof__av){grid-column:2}
.proof__av{grid-row:1 / 3;display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;overflow:hidden;background:var(--night);color:var(--on-night);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em}
.proof__av img{inline-size:100%;block-size:100%;object-fit:cover}
/* Chiffre : ce qu'il compte en gras au-dessus du texte (« 30 projets réalisés ») */
.proof__lib{display:block;margin-block-end:4px;color:var(--ink);font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em}
.proof figcaption span{color:var(--ink-2)}
.proof__foot{display:grid;gap:32px;border-block-start:1px solid var(--line);padding-block-start:clamp(24px,2.6vw,40px)}
.proof__fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:end}
.proof__fig dt{font-size:clamp(3.5rem,7.4vw,7.5rem);font-weight:450;letter-spacing:-.07em;line-height:.9;display:flex;align-items:flex-start}
.proof__fig dt small{font-size:.36em;letter-spacing:-.04em;line-height:1;padding-block-start:.22em;color:var(--accent)}
.proof__fig dd{color:var(--ink-2);max-inline-size:16em;padding-block-end:.4em}
@media (min-width:900px){ .proof__foot{grid-template-columns:minmax(0,1fr) auto;align-items:end} }

/* Grand texte lu mot à mot */
.prin__text{font-size:var(--fs-h2m);font-weight:450;letter-spacing:-.045em;line-height:1.04;max-inline-size:21em}

/* Pastille « Voir » qui suit la souris sur les projets (même effet que sur l'accueil) */
.follower{display:none}
@media (hover:hover) and (pointer:fine){
  .anim .follower{display:block;position:fixed;inset:0 auto auto 0;z-index:var(--z-follower);pointer-events:none}
  .follower__label{position:absolute;inset:0 auto auto 0;inline-size:92px;block-size:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:var(--fs-sm);font-weight:450;transform:scale(.8);opacity:0;visibility:hidden;will-change:transform}
}

/* ==================================================================
   Motifs animés (pages Méthode et Expertises) : un aplat (gris, noir ou blanc cassé, jamais orange : l'orange
   reste aux petits éléments) et, au centre, quelques formes pleines qui bougent en boucle. Le petit carré est celui du logo.
   Tout est dimensionné en em : la taille de police de la scène règle l'échelle. Elle suit le cadre lui-même
   (unités cqw et cqh), sans plafond : le motif garde la même proportion, donc la même vitesse apparente, à toutes les tailles.
   Sans animation (mouvement réduit, script absent), chaque motif garde une position de repos écrite dans le CSS de sa page.
================================================================== */
.motif{display:grid;place-items:center;container-type:size;background:var(--grey);color:var(--ink);--sq:var(--accent)}
.motif[data-fond="night"]{background:var(--night);color:var(--on-night)}
.motif[data-fond="night-2"]{background:var(--night-2);color:var(--on-night)}
.motif[data-fond="white"]{background:var(--white)}
.motif__stage{position:relative;inline-size:15em;block-size:15em;font-size:max(9px,min(2.555cqw,4.55cqh))}
.anim .motif__stage{opacity:0}
.m{position:absolute;inset-block-start:50%;inset-inline-start:50%;display:block;background:currentColor}
.m-sq{inline-size:2.4em;block-size:2.4em;margin:-1.2em 0 0 -1.2em;background:var(--sq);z-index:1}
/* Onde : un disque très léger qui s'élargit et s'efface quand quelque chose se pose */
.m-ping{opacity:0;border-radius:50%}

/* Questions fréquentes : au survol, un fond descend comme un volet (animé par /js/faq.js, demande de Jeremy, 10 nov. 2026).
   Le fond déborde un peu de la ligne pour ne pas coller au texte ; sans JavaScript, rien ne change. */
details.q > summary,details.hub__q > summary,[data-volet]{position:relative;isolation:isolate}
.volet{position:absolute;inset-block:0;inset-inline:calc(-1 * clamp(12px,1.2vw,20px));z-index:-1;border-radius:var(--r-sm);background:color-mix(in srgb,currentColor 7%,transparent);clip-path:inset(0% 0% 100% 0%);pointer-events:none}

/* Pied de page, ligne du bas (copyright, mentions, retour en haut) : plus près du bord bas, plus loin du plan du site (retour de Jeremy, 10 nov. 2026).
   Le dock se masque avant d'arriver au pied de page (site.js) : la réserve de 84 px en bas n'est plus utile. Les trois blocs alignés sur la même ligne. */
.footer{padding-block-end:calc(clamp(22px,2.2vw,32px) + env(safe-area-inset-bottom))}
.footer__legal{align-items:center;margin-block-start:clamp(28px,4.4vw,72px)}
.footer__legal > span{display:inline-flex;align-items:center;min-height:24px}
/* Pied de page : à partir de 900 px, l'orbe est à droite et les boutons à gauche, ils ne se croisent pas.
   Même écart au-dessus et au-dessous du filet, au lieu de réserver la demi-hauteur de l'orbe sous le filet (retour de Jeremy, 10 nov. 2026) */
@media (min-width:900px){
  /* Boutons plus près du titre ; plan du site plus bas, pour laisser de l'air sous l'orbe (retour de Jeremy, 10 nov. 2026) */
  .footer__line{margin-block:clamp(14px,1.4vw,22px) clamp(16px,1.6vw,24px)}
  .footer__plan{margin-block-start:clamp(16px,2vw,32px)}
}

/* En-têtes (toutes les pages) : le grand mot descend d'un cran (retour de Jeremy, 10 nov. 2026).
   Plus d'air entre le texte et les boutons et le grand mot ; le pied des lettres se rapproche du bas du cadre,
   à peu près à la distance de la marge latérale. Sur mobile, l'écart propre au mobile (megamenu.css) reste en place. */
@media (min-width:768px){
  .phero__in{row-gap:clamp(24px,4vh,64px)}
  /* Le haut du texte descend d'un cran (retour de Jeremy, 10 nov. 2026) : marge haute proportionnelle à la hauteur de l'écran */
  .phero__in{padding-block-start:clamp(112px,15vh,190px)}
  /* Le texte (fil d'Ariane, titre, chapô, boutons) part toujours de la même hauteur, sur toutes les pages : il est calé en haut,
     l'espace libre passe entre lui et le grand mot, qui reste calé en bas du cadre (retour de Jeremy, 10 nov. 2026) */
  .phero__in{grid-template-rows:auto 1fr}
  .phero__in > :last-child{align-self:end}
  .phero .wordmark{translate:0 .1em}
  /* g, j, p, q, y : la lettre reste entière, et le bas de la lettre la plus basse tombe à la même distance du bord que sur les autres mots (environ 38 px à 1440) */
  .phero .wordmark--jambage{translate:0 -.045em}
}

/* Portraits des témoins (retenus le 10 nov. 2026) : la photo remplace les initiales dans la pastille ronde */
.voice__av img,.hub__av img{display:block;inline-size:100%;block-size:100%;object-fit:cover;border-radius:50%}
.voice__av:has(img),.hub__av:has(img){overflow:hidden;background:var(--grey);box-shadow:0 0 0 1px var(--line)}

/* Pied : liens légaux espacés (12 nov. 2026) */
.footer__legal > .footer__liens{display:inline-flex;flex-wrap:wrap;gap:6px clamp(20px,2.4vw,36px)}

/* Étiquettes des projets (12 nov. 2026, retour de Jeremy) : sur mobile, seul le type de prestation reste ; le secteur revient à partir de 768 px */
@media (max-width:767.98px){ .etq-s{display:none} }

/* Accueil, expertises figées sur mobile : la barre « Menu » s'efface si elle recouvrirait le contenu (12 nov. 2026) */
html.dock-efface #dock{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
#dock{transition:opacity .3s ease,visibility 0s}