/* ==========================================================================
   Claritee — Executive Search IT & Industrie
   Thème clair par défaut, thème sombre sur html[data-theme="dark"]
   ========================================================================== */

/* Inter est auto-hébergée comme Clash Grotesk : servie par Google Fonts, sa feuille de
   style bloquait le premier rendu le temps d'un DNS, d'un TLS et d'une requête sur un
   domaine tiers. Un seul fichier variable couvre les graisses 400 à 600, sous-ensemble
   latin (U+0000-00FF, Œ/œ, espaces typographiques, €) : tout ce que le site écrit. */
@font-face{font-family:'Inter';src:url('../fonts/Inter-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* Caveat (Google Fonts) réduite aux seules lettres de « LinkedIn » : elle ne sert qu'à
   l'annotation au feutre des cartes du binôme. Tout autre mot s'afficherait en repli. */
@font-face{font-family:'Caveat';src:url('../fonts/Caveat-600-linkedin.woff2') format('woff2');font-weight:600;font-style:normal;font-display:block}

/* ---------- Jetons ---------- */
:root{
  color-scheme:light;

  --ground:#FAF6F1;
  --ground-2:#F1EAE1;
  --ground-3:#E9E0D4;
  --ground-light:#FEFBF7;  /* avis : un cran plus clair que le fond, sans être blanc */
  --paper-warm:#FFFDF9;    /* avis : cadre de citation, à peine moins blanc que --paper */
  --ink:#1C1917;
  --ink-2:#554D46;
  --ink-3:#8B8078;
  --rule:#E5DCD1;
  --rule-strong:#D3C7B8;

  --accent:#BE5334;        /* aplats et boutons — texte blanc lisible */
  --accent-bright:#E07A5F; /* décoratif : pastilles */
  --accent-ink:#A8441F;    /* petit texte sur crème */
  --accent-soft:#F6E5DC;
  --paper:#FFFFFF;         /* blocs blancs posés sur les panneaux crème */

  --sage:#6E8F80;
  --sage-soft:#E3EAE5;
  --sage-deep:#587A6B;     /* aplat sauge sous texte blanc (4,8:1), comme --accent */

  --dark:#1C1917;
  --on-dark:#F7F2EB;
  --on-accent:#FFFFFF;

  --display:'Clash Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,56px);
  --maxw:1280px;
  --section-y:clamp(52px,6.5vw,96px);
  --ease:cubic-bezier(.22,1,.36,1);
  --nav-gap:100px;
}

/* ---------- Thème sombre ---------- */
/* Mêmes rôles que le thème clair : seuls les jetons changent. Les exceptions en dur sont en fin de feuille. */
:root[data-theme="dark"]{
  color-scheme:dark;

  --ground:#171412;
  --ground-2:#201C19;
  --ground-3:#2C2622;
  --ground-light:#1C1815;
  --paper-warm:#25201C;    /* un cran sous --paper : la carte d'avis pèse moins sur fond sombre */
  --ink:#F3EDE5;
  --ink-2:#BFB5AB;
  --ink-3:#8F857C;
  --rule:#2E2824;
  --rule-strong:#433B35;

  --accent-bright:#E8896A;
  --accent-ink:#EC9276;    /* petit texte terracotta sur fond sombre */
  --accent-soft:#35221B;
  --paper:#2A2420;

  --sage-soft:#1C2521;

  --dark:#0D0B0A;          /* engagements et pied de page restent plus sombres que le fond */
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip et non hidden : hidden laisse la fenêtre défilable par programme
   (d'où le va-et-vient latéral sur mobile) et, posé sur <html>, casserait les
   cartes `position:sticky` de la méthode en créant un conteneur de défilement. */
/* `touch-action:manipulation` supprime le zoom au double tap sur mobile (et le délai de
   300 ms qu'il imposait aux touchers), sans toucher au zoom à deux doigts, laissé aux
   personnes qui en ont besoin — Safari iOS ignore de toute façon `user-scalable=no`. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;overflow-x:clip;touch-action:manipulation}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;   /* hidden = repli pour les navigateurs sans `clip` */
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--section-y)}
/* Ancres du menu : on vise le début du contenu, pas le haut de la marge intérieure,
   sinon le titre arrivait 190 px sous la nav. `scroll-padding-top` (sur <html>) laisse
   la place de la nav, la marge négative annule la marge intérieure de la section. */
.section[id]{scroll-margin-top:calc(-1 * var(--section-y))}
.rule-top{border-top:1px solid var(--rule)}

/* ---------- Typographie utilitaire ---------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--on-accent);
  font-size:.68rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;
}
.badge--sage{background:var(--sage)}
.badge--soft{background:var(--ground-3);color:var(--ink-2)}
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:center;gap:11px;margin:0;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--accent);flex:none}
.eyebrow--sage::before{background:var(--sage)}

.d-xl{font-size:clamp(2.7rem,7.6vw,6.1rem);font-weight:600}
.d-l{font-size:clamp(2.1rem,4.8vw,3.9rem)}
.d-m{font-size:clamp(1.6rem,2.8vw,2.4rem)}
.lead{font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.7;color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-2)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.93rem;font-weight:500;padding:15px 26px;border-radius:999px;
  border:1px solid transparent;cursor:pointer;position:relative;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
  will-change:transform;
}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{background:#A8441F;border-color:#A8441F;box-shadow:0 8px 24px rgba(190,83,52,.26)}
.btn--soft{background:var(--ground-3);color:var(--ink);border-color:transparent}
.btn--soft:hover{background:var(--rule-strong)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ground-2)}
.btn--light{background:var(--on-dark);color:var(--dark);border-color:var(--on-dark)}
.btn--light:hover{background:#fff}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

/* ---------- Barre de progression ---------- */
.progress{
  position:fixed;top:0;left:0;height:4px;width:100%;z-index:90;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---------- Curseur personnalisé ---------- */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;z-index:95;pointer-events:none;
  border-radius:999px;opacity:0;transition:opacity .3s ease;
}
.cursor{width:6px;height:6px;background:var(--accent);margin:-3px 0 0 -3px}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--accent);
  transition:opacity .3s ease,width .28s var(--ease),height .28s var(--ease),
             margin .28s var(--ease),background .28s var(--ease),border-color .28s var(--ease);
}
.has-cursor .cursor,.has-cursor .cursor-ring{opacity:1}
.has-cursor.cursor-hot .cursor-ring{
  width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(190,83,52,.1);
}
.has-cursor.cursor-hot .cursor{opacity:0}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
  .cursor,.cursor-ring{display:none}
}

/* ---------- Navigation en pilule ---------- */
.nav{position:sticky;top:0;z-index:70;padding-top:20px}
.nav>.wrap{max-width:1560px}
/* La pilule remonte par `transform`, pas en réduisant `padding-top` : la nav est dans le
   flux, la rétrécir décalait toute la page de 6 px pendant le défilement vers une ancre,
   qui s'arrêtait alors à côté de sa cible. */
.nav.is-stuck .nav__inner{transform:translateY(-6px)}
.nav__inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--ground-2);border:1px solid transparent;
  border-radius:999px;padding:9px 9px 9px 22px;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease);
}
.nav.is-stuck .nav__inner{
  background:rgba(250,246,241,.86);
  backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
  border-color:var(--rule);box-shadow:0 6px 28px rgba(28,25,23,.07);
}
.nav__logo img{height:23px;width:auto}
.nav__logo-dark{display:none!important}
[data-theme="dark"] .nav__logo-light{display:none!important}
[data-theme="dark"] .nav__logo-dark{display:block!important}
.nav__links{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav__links a{
  display:block;font-size:.9rem;color:var(--ink-2);padding:9px 15px;border-radius:999px;
  white-space:nowrap;
  transition:color .2s ease,background .25s ease;
}
/* Survol et section en cours : pastille ronde plutôt qu'un soulignement */
.nav__links a:hover{color:var(--ink);background:var(--ground-3)}
.nav__links a[aria-current="true"]{color:var(--ink);background:var(--ground-3)}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav__actions .btn{padding:12px 22px;white-space:nowrap}

.nav__theme{
  position:relative;flex:none;width:44px;height:44px;border:0;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ground-3);color:var(--ink);transition:background .25s ease,color .25s ease;
}
.nav__theme:hover{color:var(--accent-ink)}
.nav__theme svg{position:absolute;width:18px;height:18px;transition:transform .5s var(--ease),opacity .3s ease}
.nav__theme-sun{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-theme="dark"] .nav__theme-moon{opacity:0;transform:rotate(90deg) scale(.6)}
[data-theme="dark"] .nav__theme-sun{opacity:1;transform:none}

.nav__toggle{
  display:none;width:44px;height:44px;border:0;background:var(--ground-3);
  border-radius:999px;cursor:pointer;align-items:center;justify-content:center;
}
.nav__toggle span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative;border-radius:2px}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),top .3s var(--ease);
}
.nav__toggle span::before{top:-5px}
.nav__toggle span::after{top:5px}
.nav__toggle[aria-expanded="true"] span{background:transparent}
.nav__toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* Menu mobile : panneau crème plein écran, glissé sous la pilule */
.nav__inner{position:relative;z-index:2}
.drawer{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;
  height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top) + 102px) var(--pad) calc(env(safe-area-inset-bottom) + 18px);
  background:var(--ground);color:var(--ink);
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .6s var(--ease),visibility 0s linear .6s;
}
.drawer.is-open{
  visibility:visible;clip-path:inset(0 0 0 0);
  transition:clip-path .6s var(--ease),visibility 0s;
}
.drawer__body{display:flex;flex-direction:column;flex:1;width:100%;max-width:560px;margin-inline:auto}
.drawer__eyebrow{margin:0 0 14px 4px}

/* Tuiles « bento » : une par section, teintes reprises du site */
.bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile a{
  display:flex;flex-direction:column;height:100%;min-height:118px;padding:12px 12px 14px 14px;
  background:var(--ground-2);border:1px solid var(--rule);border-radius:22px;
  transition:border-color .25s ease,background .25s ease,transform .3s var(--ease);
}
.tile--accent a{background:var(--accent-soft);border-color:#EFD3C5}
.tile--sage a{background:var(--sage-soft);border-color:#D2DDD6}
.tile__top{display:flex;align-items:center;gap:8px;margin-bottom:auto}
.tile__num{
  font-size:.68rem;letter-spacing:.03em;color:var(--ink-3);font-variant-numeric:tabular-nums;
  background:var(--ground);border:1px solid var(--rule-strong);border-radius:999px;padding:2px 8px;
}
.tile__arw{
  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:999px;background:var(--ground);color:var(--ink);font-size:.9rem;
  transition:background .25s ease,color .25s ease,transform .3s var(--ease);
}
.tile__title{
  display:block;margin-top:14px;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  line-height:1.08;font-size:clamp(1.12rem,5vw,1.4rem);color:var(--ink);text-wrap:balance;
}
.tile__faces{display:flex;margin-left:auto}
.tile--duo .tile__faces img{width:28px;height:28px}
.tile--duo .tile__faces img+img{margin-left:-9px}
.tile__faces img{width:34px;height:34px;border-radius:999px;object-fit:cover;border:2px solid var(--ground-2)}
.tile__faces img+img{margin-left:-10px}
.tile__faces+.tile__arw{margin-left:4px}
.tile a:active{transform:scale(.98)}
/* Section en cours */
.tile a[aria-current="true"]{border-color:var(--accent)}
.tile a[aria-current="true"] .tile__arw{background:var(--accent);color:var(--on-accent)}
/* Survol réservé aux pointeurs fins : sur mobile, le toucher laissait la tuile allumée */
@media (hover:hover){
  .tile a:hover{border-color:var(--rule-strong)}
  .tile a:hover .tile__arw{background:var(--accent);color:var(--on-accent);transform:translateX(3px)}
}

/* Pied du menu : grand appel à l'action + contacts */
.drawer__foot{margin-top:auto;padding-top:14px;display:grid;gap:14px}
.drawer__cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:62px;padding:7px 7px 7px 24px;border-radius:999px;
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 10px 26px rgba(190,83,52,.24),inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .25s ease,box-shadow .25s ease,transform .3s var(--ease);
}
.drawer__cta-label{font-size:1rem;font-weight:500;letter-spacing:-.005em}
.drawer__cta-arw{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:999px;background:var(--on-accent);color:var(--accent);
  font-size:1.05rem;transition:transform .35s var(--ease);
}
.drawer__cta:active{transform:scale(.98)}
@media (hover:hover){
  .drawer__cta:hover{background:#A8441F;box-shadow:0 12px 30px rgba(190,83,52,.3)}
  .drawer__cta:hover .drawer__cta-arw{transform:translateX(-3px) rotate(-45deg)}
}
/* Les trois contacts, en pastilles plutôt qu'en ligne de texte : c'est la forme qu'on
   retrouve partout ailleurs (badges, liens de nav, pastilles de portrait), et ça donne
   des cibles tactiles dignes de ce nom sous un bouton de 62 px. Le filet les détache
   du bouton d'appel. */
.drawer__contact{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0;padding-top:16px;border-top:1px solid var(--rule);
}
.drawer__contact a{
  --tint:var(--accent);
  display:inline-flex;align-items:center;gap:9px;
  min-height:40px;padding:8px 15px;border-radius:999px;
  background:var(--ground-2);border:1px solid var(--rule);
  color:var(--ink-2);font-size:.82rem;font-weight:500;
  font-variant-numeric:tabular-nums;                /* le numéro ne danse pas */
  transition:color .2s ease,background .25s ease,border-color .25s ease;
}
.drawer__contact a::before{
  content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--tint);
}
.drawer__contact a:nth-child(2){--tint:var(--sage)}
.drawer__contact a:active{background:var(--ground-3)}
@media (hover:hover){
  .drawer__contact a:hover{color:var(--ink);background:var(--ground-3);border-color:var(--rule-strong)}
}

/* Apparition en cascade */
.drawer__eyebrow,.tile,.drawer__foot{
  opacity:0;transform:translateY(18px);
  transition:opacity .25s ease,transform .25s ease;
}
.drawer.is-open .drawer__eyebrow,.drawer.is-open .tile,.drawer.is-open .drawer__foot{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .7s var(--ease);
  transition-delay:calc(.12s + var(--d,0) * .05s);
}
.nav.menu-open .nav__inner{background:var(--ground-2);border-color:var(--rule);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* Le verrou de défilement du menu est posé sur la RACINE, jamais sur <body>.
   L'overflow de la racine est propagé à la fenêtre et la racine elle-même reste
   `visible`, donc la nav `position:sticky` continue de se coller en haut de l'écran.
   Sur <body>, il en irait autrement : depuis que <html> porte `overflow-x:clip`, l'
   overflow de <body> n'est plus propagé à la fenêtre et <body> devient un conteneur de
   défilement — la nav se collait alors au haut du document, hors écran, et disparaissait
   du tiroir dès que la page avait été défilée. */
:root.menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .drawer,.drawer.is-open,
  .drawer__eyebrow,.tile,.drawer__foot{transition:none!important;transform:none}
}
@media (min-width:1200px){.drawer{display:none}}

/* Seuil du menu mobile : 1200 px, et non la largeur d'une tablette.
   Il est dicté par le contenu de la pilule — logo, six liens, bascule de thème et
   bouton d'appel — qui demande environ 1150 px à taille normale et 1055 px une fois
   resserré (mesuré avec Pillow sur Inter), pour 1088 px disponibles à 1200 px. En dessous, les
   libellés se repliaient sur deux lignes ; `white-space:nowrap` rend ce repli
   impossible, et le hamburger prend le relais. Trois valeurs doivent rester d'accord :
   ce seuil, celui qui masque le tiroir juste au-dessus, et le `matchMedia` de main.js
   qui referme le menu au passage en affichage bureau. */
@media (min-width:1200px) and (max-width:1380px){
  .nav__inner{gap:14px;padding-left:18px}
  .nav__links a{padding-inline:10px;font-size:.86rem}
}
@media (max-width:1199px){
  .nav__links{display:none}
  .nav__actions .btn{display:none}
  .nav__toggle{display:inline-flex}
}

/* ---------- En-têtes de section ---------- */
.shead{
  background:var(--ground-2);
  border:1px solid var(--rule);
  border-radius:clamp(18px,2vw,28px);
  padding:clamp(22px,2.6vw,38px) clamp(24px,3vw,44px);
  display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(18px,2.4vw,40px);
  align-items:start;
}
.shead--solo{grid-template-columns:1fr;align-items:start;gap:clamp(16px,1.8vw,24px)}

.shead__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 clamp(14px,1.6vw,20px);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.shead__dots{display:inline-flex;align-items:center;gap:5px;flex:none}
.shead__dots::before,.shead__dots::after{content:"";width:7px;height:7px;border-radius:999px}
.shead__dots::before{background:var(--accent)}
.shead__dots::after{background:var(--sage)}

.shead__main h2{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.5rem,2.65vw,2.3rem);
  margin:0;
}

.shead__aside{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.5vw,18px);width:100%}
.shead__lead{
  margin:0;max-width:none;
  font-size:clamp(.98rem,1.12vw,1.06rem);
  line-height:1.75;color:var(--ink-2);
}
.shead__chip{
  margin:0;font-size:.75rem;letter-spacing:.03em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  background:var(--ground);border:1px solid var(--rule-strong);
  border-radius:999px;padding:7px 16px;
}

/* Le panneau se détache toujours du fond de sa section */
.method .shead,.contact .shead,.pledge .shead{background:var(--ground)}

@media (max-width:900px){
  .shead{grid-template-columns:1fr;align-items:start;gap:clamp(18px,2.6vw,28px)}}
/* les pastilles longues (« 5 à 7 mandats simultanés · rarement davantage ») débordaient à 360 px */
@media (max-width:560px){
  .shead__chip{white-space:normal;border-radius:14px;line-height:1.5}
}

/* ---------- Héros ---------- */
/* Texte à gauche, tuiles portraits et chiffres à droite */
.hero{padding-block:clamp(28px,4.5vw,64px) clamp(44px,5.5vw,80px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:center}
.hero .badge{margin-bottom:clamp(20px,2.4vw,30px)}
.hero__text{container-type:inline-size}
/* Le titre suit la largeur de sa colonne pour que « c'est 10 % du métier. » tienne sur une ligne
   (la phrase mesure environ 8,8 em en Clash Grotesk 600) */
.hero h1{font-size:clamp(1.6rem,4.2vw,4.4rem);font-size:clamp(1.6rem,10.6cqi,4.4rem);font-weight:600;line-height:1.04}
.hero h1 .hero__hot{white-space:nowrap}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero h1 .line>span{display:block}
/* Page V2 : chaque phrase du titre est coupée en deux par un <br> dans une colonne étroite
   (quatre lignes, la plus longue, « Un seul niveau », mesure 6,6 em), ce qui permet de le
   garder grand ; le client l'a voulu un peu en dessous de la V1 (4 rem au lieu de 4,4).
   Dès que la colonne atteint 700 px, le <br> est masqué et chaque phrase tient sur une ligne
   (« Un seul niveau d'exigence. » mesure environ 11,5 em, d'où 8,4 cqi) */
.hero--v2 h1{font-size:clamp(1.9rem,5.4vw,4rem);font-size:clamp(1.9rem,12cqi,4rem)}
.hero--v2 h1 .line>span{white-space:nowrap}
/* Mobile : les quatre lignes occupent presque toute la largeur (42 px sur un écran de 360 px,
   « Un seul niveau » occupe alors 277 px sur 320), interligne resserré. Variante « XL » choisie
   par le client parmi six maquettes, puis réduite de 15 à 13 cqi : il la trouvait trop grosse.
   Le bandeau, plus long en V2 (« Tech & Industrie 4.0 »), resserre son interlettrage pour
   tenir sur une ligne à 360 px */
@media (max-width:900px){
  .hero--v2 h1{font-size:clamp(1.9rem,13cqi,4rem);line-height:.98}
  .hero--v2 .badge{font-size:.64rem;letter-spacing:.07em;padding-inline:13px}
}
@container (min-width:700px){
  .hero--v2 h1{font-size:min(8.4cqi,4rem)}
  .hero--v2 h1 br{display:none}
}
/* sous-titre plus discret que celui de la V1, et équilibré pour ne pas laisser « la » seul en fin de ligne */
.hero--v2 .hero__sub{font-size:clamp(1.15rem,1.9vw,1.75rem);text-wrap:balance}
.hero__lead+.hero__lead{margin-top:.9em}
/* Le héros V2 prend la largeur de la nav (1560 px au lieu de 1280) ; sa gouttière reprend
   le retrait intérieur de la nav, pour que le texte s'aligne sur le logo et les tuiles sur le
   bouton. Les tuiles gardent leur largeur de la V1 (500 px au plus) : tout l'espace gagné va au texte */
.hero--v2>.wrap{max-width:1560px}
@media (min-width:1100px){
  .hero--v2>.wrap{padding-inline:calc(var(--pad) + 22px) calc(var(--pad) + 9px)}
  .hero--v2 .hero__grid{grid-template-columns:minmax(0,1fr) min(500px,46%)}
}
.hero__hot{color:var(--accent)}
.hero__sub{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2.5vw,2.3rem);line-height:1.15;
  margin-top:clamp(14px,1.6vw,20px);
}
.hero__sub em{font-style:normal}
.hero__lead{
  margin-top:clamp(20px,2.4vw,30px);max-width:56ch;
  font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.68;color:var(--ink-2);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(26px,3vw,38px)}

/* Tuiles : deux portraits hauts décalés, deux chiffres */
.hero__bento{
  display:grid;grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,clamp(118px,11.5vw,176px));gap:clamp(18px,1.6vw,22px);
}
.hero__tile{--tile-r:clamp(18px,2vw,26px);position:relative;margin:0;overflow:hidden;border-radius:var(--tile-r)}
.hero__tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform 1s var(--ease)}
.hero__tile:hover img{transform:scale(1.05)}
.hero__tile .member__pin{--tint:var(--accent);left:12px;bottom:12px}
.hero__tile--e .member__pin{--tint:var(--sage)}
.hero__tile--f{grid-column:1;grid-row:1 / 3;background:var(--ground-3)}
.hero__tile--a{grid-column:2;grid-row:1;background:var(--accent);color:var(--on-accent)}
.hero__tile--e{grid-column:2;grid-row:2 / 4;background:var(--ground-3)}
.hero__tile--s{grid-column:1;grid-row:3;background:var(--sage-soft);border:1px solid var(--rule)}
.hero__tile--a,.hero__tile--s{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:clamp(14px,1.6vw,22px)}
.hero__fig{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1;letter-spacing:-.04em}
.hero__fig sup{font-size:.45em;vertical-align:super;margin-left:2px}
.hero__tile p:not(.hero__fig){margin:0;font-size:clamp(.78rem,.9vw,.86rem);line-height:1.45}
.hero__tile--s p:not(.hero__fig){color:var(--ink-2)}

/* Flottaison des tuiles, une fois l'apparition terminée.
   Chaque tuile a sa propre trajectoire, sa propre durée et son propre départ : elles
   dérivent indépendamment, en translation et en rotation. Les courses vont jusqu'à 7 px
   et 0,7°, et l'écartement du bento est tenu à 18 px au minimum : c'est ce qui permet à
   deux voisines de se croiser au pire de leurs courses sans jamais se chevaucher.
   Toute amplitude plus forte demande d'ouvrir le `gap` d'autant.
   `--fo` décale le départ, `--td` reprend le retard d'apparition sur mobile. */
@keyframes tileFloatA{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  28%    {transform:translate3d(-5px,-7px,0) rotate(-.7deg)}
  55%    {transform:translate3d(4px,-3px,0) rotate(.5deg)}
  80%    {transform:translate3d(6px,4px,0) rotate(.3deg)}
}
@keyframes tileFloatB{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  22%    {transform:translate3d(6px,5px,0) rotate(.6deg)}
  48%    {transform:translate3d(-4px,7px,0) rotate(-.5deg)}
  74%    {transform:translate3d(-7px,-4px,0) rotate(-.7deg)}
}
@keyframes tileFloatC{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  33%    {transform:translate3d(7px,-6px,0) rotate(.7deg)}
  61%    {transform:translate3d(2px,7px,0) rotate(-.3deg)}
  85%    {transform:translate3d(-6px,2px,0) rotate(-.6deg)}
}
@keyframes tileFloatD{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  26%    {transform:translate3d(-7px,4px,0) rotate(-.55deg)}
  52%    {transform:translate3d(-2px,-7px,0) rotate(.7deg)}
  79%    {transform:translate3d(5px,-2px,0) rotate(.4deg)}
}
.js .hero__tile.reveal.is-in{
  animation:var(--fname,tileFloatA) var(--fdur,9.5s) ease-in-out infinite;
  animation-delay:calc(var(--td,0s) + 1.5s + var(--fo,0s));   /* après l'entrée, jamais pendant */
}
/* Durées volontairement sans multiple commun : la figure ne se répète pas à l'œil */
.hero__tile--f{--fname:tileFloatA;--fdur:9.5s;--fo:0s}
.hero__tile--a{--fname:tileFloatB;--fdur:11.7s;--fo:.5s}
.hero__tile--e{--fname:tileFloatC;--fdur:10.3s;--fo:1.2s}
.hero__tile--s{--fname:tileFloatD;--fdur:12.9s;--fo:.8s}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__bento{grid-template-rows:repeat(3,clamp(104px,26vw,170px))}
}
/* Mobile : on garde les tuiles décalées, avec des rangées assez hautes pour le texte des chiffres */
@media (max-width:600px){
  .hero__bento{grid-template-rows:repeat(3,minmax(136px,auto));gap:18px}
  .hero__tile--a,.hero__tile--s{justify-content:flex-start;gap:8px;padding:16px 16px 18px}
  .hero__fig{font-size:2.1rem}
  .hero__tile p:not(.hero__fig){font-size:.8rem;line-height:1.4;text-wrap:pretty}
  .hero__tile .member__pin{left:8px;bottom:8px;padding:6px 11px;font-size:.68rem}
}
@media (max-width:520px){
  .hero__cta .btn{width:100%;justify-content:center}
}

/* Apparition des tuiles sur mobile et tablette, là où le bento passe pleine largeur
   et devient l'événement visuel du héros. Le fondu générique de `.reveal` est remplacé
   par un masque qui s'ouvre du bas vers le haut — la tuile se déploie au lieu de
   surgir — puis le contenu arrive derrière : pastille, chiffre, légende.
   `--td` décale chaque tuile dans l'ordre de lecture pour former une vague. */
@media (max-width:900px){
  .js .hero__bento .hero__tile.reveal{
    opacity:1;                                   /* le masque révèle, pas l'opacité :
                                                    aucun texte fantôme pendant la transition */
    transform:translateY(22px);
    clip-path:inset(100% 0 0 0 round var(--tile-r));
    transition:clip-path .95s var(--ease) var(--td,0s),
               transform 1s var(--ease) var(--td,0s);
  }
  .js .hero__bento .hero__tile.reveal.is-in{
    transform:none;
    clip-path:inset(0 0 0 0 round var(--tile-r));
  }

  /* Le portrait se dézoome pendant que le masque s'ouvre : la photo semble se poser. */
  .js .hero__bento .hero__tile.reveal img{
    transform:scale(1.14);
    transition:transform 1.5s var(--ease) var(--td,0s);
  }
  .js .hero__bento .hero__tile.reveal.is-in img{transform:none}

  /* La pastille du nom arrive après, avec un léger rebond. */
  .js .hero__bento .hero__tile.reveal .member__pin{
    opacity:0;transform:translateY(12px) scale(.88);transform-origin:0 100%;
    transition:opacity .4s ease calc(var(--td,0s) + .52s),
               transform .7s cubic-bezier(.2,1.6,.4,1) calc(var(--td,0s) + .52s);
  }
  /* Le chiffre monte, la légende le suit. */
  .js .hero__bento .hero__tile.reveal .hero__fig{
    opacity:0;transform:translateY(18px);
    transition:opacity .5s ease calc(var(--td,0s) + .34s),
               transform .8s var(--ease) calc(var(--td,0s) + .34s);
  }
  .js .hero__bento .hero__tile.reveal p:not(.hero__fig){
    opacity:0;transform:translateY(12px);
    transition:opacity .5s ease calc(var(--td,0s) + .48s),
               transform .8s var(--ease) calc(var(--td,0s) + .48s);
  }
  .js .hero__bento .hero__tile.reveal.is-in :is(.member__pin,.hero__fig,p:not(.hero__fig)){
    opacity:1;transform:none;
  }

  /* La vague suit l'ordre de lecture du bento, pas l'ordre du DOM des colonnes. */
  .hero__tile--f{--td:0s}
  .hero__tile--a{--td:.11s}
  .hero__tile--e{--td:.22s}
  .hero__tile--s{--td:.33s}
}
@media (prefers-reduced-motion:reduce){
  .hero__tile:hover img{transform:none}
  .js .hero__tile.reveal.is-in{animation:none}
  .js .hero__bento .hero__tile.reveal,
  .js .hero__bento .hero__tile.reveal :is(img,.member__pin,.hero__fig,p:not(.hero__fig)){
    opacity:1;transform:none;clip-path:none;transition:none;
  }
}

/* Défilement horizontal sans couture (logos, secteurs) */
@keyframes slideL{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Mur de logos clients ---------- */
.clients{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--ground-2);
  padding-block:clamp(30px,3.6vw,48px) clamp(30px,3.6vw,48px);
  overflow:hidden;
}

/* Ligne de tête : intitulé à gauche, contexte à droite, filet dessous */
.clients__head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px 24px;
  padding-bottom:clamp(18px,2.2vw,28px);
  border-bottom:1px solid var(--rule-strong);
}
.clients__lbl{
  display:flex;align-items:center;gap:11px;margin:0;
  font-size:.72rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
}
.clients__meta{margin:0;font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* Mur : chaque logo dans sa cellule, séparé par un filet */
.logos{
  margin-top:clamp(20px,2.4vw,32px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* 56 s pour deux séries de cinq logos : même vitesse de défilement qu'avant */
.logos__track{display:flex;align-items:stretch;width:max-content;animation:slideL 56s linear infinite}
.logos__cell{
  display:flex;align-items:center;justify-content:center;flex:none;
  padding-inline:clamp(28px,4.2vw,62px);
  height:clamp(48px,5.4vw,74px);
  border-right:1px solid var(--rule-strong);
}
.logos img{
  height:calc(var(--k,1) * clamp(22px,2.5vw,33px));
  width:auto;opacity:.5;
  transition:opacity .3s ease,transform .35s var(--ease);
}
.logos__cell:hover img{opacity:1;transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .logos__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .logos{-webkit-mask-image:none;mask-image:none}
  /* sans défilement, les copies de la boucle n'ont pas à s'afficher */
  .logos__cell:has(img[aria-hidden="true"]){display:none}
  .logos__cell:hover img{transform:none}
}

/* ---------- Chiffres (dans le bandeau beige des clients) ---------- */
.proof__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.5vw,34px);margin-top:clamp(22px,2.6vw,34px)}
.proof__item{padding-top:22px;border-top:2px solid var(--ink)}
.proof__item:nth-child(2){border-top-color:var(--accent)}
.proof__item:nth-child(3){border-top-color:var(--sage)}
.proof__fig{font-family:var(--display);font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:600;line-height:1;letter-spacing:-.035em}
/* « 1 sur 2 » : l'approche serrée du titre collait le « 1 » au « sur », on rouvre les espaces (sans chiffres tabulaires, qui creusaient l'espace avant le « 2 ») */
.proof__fig--mots{word-spacing:.14em}
.proof__fig sup{font-size:.4em;font-weight:500;vertical-align:super;margin-left:3px;color:var(--accent-ink)}
.proof__lbl{margin-top:12px;font-size:.87rem;color:var(--ink-2);line-height:1.5}
/* Sur mobile, « 1 sur 2 » ouvre le bandeau sur toute la largeur, les deux autres en dessous */
@media (max-width:760px){
  .proof__grid{grid-template-columns:1fr 1fr;gap:26px}
  .proof__item:first-child{grid-column:1/-1}
  .proof__fig{font-size:clamp(1.8rem,8.6vw,2.2rem)}
}

/* ---------- Manifeste ---------- */
.manifesto__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,76px);align-items:center}
.manifesto__body{margin-top:26px;display:grid;gap:18px}
.manifesto__body p{max-width:58ch;color:var(--ink-2);font-size:1.03rem}
.manifesto__body strong{color:var(--ink);font-weight:600}

/* Visuel du binôme : tuiles façon bento */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,12px)}
.duo__art{
  grid-column:1 / -1;position:relative;margin:0;overflow:hidden;
  border:1px solid var(--rule);border-radius:clamp(18px,2vw,26px);
}
/* Visuel SVG « deux regards » : fond sur les jetons pour suivre le mode sombre */
.duo__art--svg{background:var(--ground-2)}
.duo__svg{display:block;width:100%;height:auto}
.duo__svg .lbl{font-family:var(--body);font-size:15px;font-weight:600}
.duo__svg .chip{font-family:var(--body);font-size:13px;font-weight:600}
.duo__stat{
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  background:var(--accent);color:var(--on-accent);
  border-radius:clamp(18px,2vw,26px);padding:clamp(16px,1.8vw,22px);
  min-height:clamp(140px,14vw,190px);
}
.duo__fig{
  margin:0;font-family:var(--display);font-weight:600;line-height:.9;letter-spacing:-.05em;
  font-size:clamp(2.4rem,4.2vw,3.6rem);
}
/* Page V2 : le mot sous le chiffre (« 0 intermédiaire. »). Taille bornée en rem : dans la tuile
   d'un écran de 360 px, à peine 122 px de large, « intermédiaire. » déborderait à .42 em */
.duo__fig span{display:block;margin-top:.14em;font-size:clamp(.85rem,1.9vw,1.5rem);letter-spacing:-.03em;line-height:1}
/* Tuile sauge « 2 lectures », pendant de la tuile terracotta */
.duo__stat--sage{background:var(--sage-deep)}
.duo__txt{margin:0;font-size:clamp(.82rem,.92vw,.9rem);line-height:1.45;max-width:26ch}
@media (max-width:920px){
  .manifesto__grid{grid-template-columns:1fr}
}
/* Sur mobile, le visuel du binôme (illustration + tuiles) est retiré à la demande du client :
   le manifeste s'ouvre directement sur son texte */
@media (max-width:900px){
  .manifesto__visual{display:none}
}

.traits{margin-top:40px;border-top:1px solid var(--rule)}
.trait{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding-block:19px;border-bottom:1px solid var(--rule)}
/* Badge « certifié » : rosace découpée en masque, coche blanche par-dessus, une couleur par ligne */
.trait__mark{
  position:relative;width:24px;height:24px;margin-top:2px;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00 0.55L12.59 0.66L13.16 0.96L13.68 1.41L14.14 1.93L14.56 2.46L14.95 2.92L15.36 3.25L15.81 3.44L16.34 3.49L16.94 3.45L17.60 3.37L18.30 3.32L18.99 3.37L19.60 3.56L20.10 3.90L20.44 4.40L20.63 5.01L20.68 5.70L20.63 6.40L20.55 7.06L20.51 7.66L20.56 8.19L20.75 8.64L21.08 9.05L21.54 9.44L22.07 9.86L22.59 10.32L23.04 10.84L23.34 11.41L23.45 12.00L23.34 12.59L23.04 13.16L22.59 13.68L22.07 14.14L21.54 14.56L21.08 14.95L20.75 15.36L20.56 15.81L20.51 16.34L20.55 16.94L20.63 17.60L20.68 18.30L20.63 18.99L20.44 19.60L20.10 20.10L19.60 20.44L18.99 20.63L18.30 20.68L17.60 20.63L16.94 20.55L16.34 20.51L15.81 20.56L15.36 20.75L14.95 21.08L14.56 21.54L14.14 22.07L13.68 22.59L13.16 23.04L12.59 23.34L12.00 23.45L11.41 23.34L10.84 23.04L10.32 22.59L9.86 22.07L9.44 21.54L9.05 21.08L8.64 20.75L8.19 20.56L7.66 20.51L7.06 20.55L6.40 20.63L5.70 20.68L5.01 20.63L4.40 20.44L3.90 20.10L3.56 19.60L3.37 18.99L3.32 18.30L3.37 17.60L3.45 16.94L3.49 16.34L3.44 15.81L3.25 15.36L2.92 14.95L2.46 14.56L1.93 14.14L1.41 13.68L0.96 13.16L0.66 12.59L0.55 12.00L0.66 11.41L0.96 10.84L1.41 10.32L1.93 9.86L2.46 9.44L2.92 9.05L3.25 8.64L3.44 8.19L3.49 7.66L3.45 7.06L3.37 6.40L3.32 5.70L3.37 5.01L3.56 4.40L3.90 3.90L4.40 3.56L5.01 3.37L5.70 3.32L6.40 3.37L7.06 3.45L7.66 3.49L8.19 3.44L8.64 3.25L9.05 2.92L9.44 2.46L9.86 1.93L10.32 1.41L10.84 0.96L11.41 0.66Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.00 0.55L12.59 0.66L13.16 0.96L13.68 1.41L14.14 1.93L14.56 2.46L14.95 2.92L15.36 3.25L15.81 3.44L16.34 3.49L16.94 3.45L17.60 3.37L18.30 3.32L18.99 3.37L19.60 3.56L20.10 3.90L20.44 4.40L20.63 5.01L20.68 5.70L20.63 6.40L20.55 7.06L20.51 7.66L20.56 8.19L20.75 8.64L21.08 9.05L21.54 9.44L22.07 9.86L22.59 10.32L23.04 10.84L23.34 11.41L23.45 12.00L23.34 12.59L23.04 13.16L22.59 13.68L22.07 14.14L21.54 14.56L21.08 14.95L20.75 15.36L20.56 15.81L20.51 16.34L20.55 16.94L20.63 17.60L20.68 18.30L20.63 18.99L20.44 19.60L20.10 20.10L19.60 20.44L18.99 20.63L18.30 20.68L17.60 20.63L16.94 20.55L16.34 20.51L15.81 20.56L15.36 20.75L14.95 21.08L14.56 21.54L14.14 22.07L13.68 22.59L13.16 23.04L12.59 23.34L12.00 23.45L11.41 23.34L10.84 23.04L10.32 22.59L9.86 22.07L9.44 21.54L9.05 21.08L8.64 20.75L8.19 20.56L7.66 20.51L7.06 20.55L6.40 20.63L5.70 20.68L5.01 20.63L4.40 20.44L3.90 20.10L3.56 19.60L3.37 18.99L3.32 18.30L3.37 17.60L3.45 16.94L3.49 16.34L3.44 15.81L3.25 15.36L2.92 14.95L2.46 14.56L1.93 14.14L1.41 13.68L0.96 13.16L0.66 12.59L0.55 12.00L0.66 11.41L0.96 10.84L1.41 10.32L1.93 9.86L2.46 9.44L2.92 9.05L3.25 8.64L3.44 8.19L3.49 7.66L3.45 7.06L3.37 6.40L3.32 5.70L3.37 5.01L3.56 4.40L3.90 3.90L4.40 3.56L5.01 3.37L5.70 3.32L6.40 3.37L7.06 3.45L7.66 3.49L8.19 3.44L8.64 3.25L9.05 2.92L9.44 2.46L9.86 1.93L10.32 1.41L10.84 0.96L11.41 0.66Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.trait__mark::after{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.6 12.3l3 3 5.8-6.3' fill='none' stroke='white' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.trait:nth-child(2) .trait__mark{background:var(--sage)}
.trait:nth-child(3) .trait__mark{background:var(--ink-3)}
.trait__t{font-family:var(--display);font-size:1.1rem;font-weight:600;display:block}
.trait__d{color:var(--ink-2);font-size:.94rem;margin-top:3px;display:block;max-width:52ch}

/* ---------- Expertises ---------- */
/* Thèse d'ouverture : bandeau terracotta (repris de la plaquette), affiné à la demande du
   client et sans l'organigramme qui l'illustrait (variante 2 parmi six) : la thèse en
   grand, « fonction support » rayé d'un trait à la main et « la stratégie globale » à
   l'encre, le paragraphe de contexte dessous. Le fond --accent est le même dans les deux
   thèmes : le blanc (4,7:1) et l'encre #1F1A17 restent donc en dur, sans surcharge sombre. */
.these{
  background:var(--accent);color:#fff;border-radius:clamp(18px,2vw,28px);
  padding:clamp(28px,3.4vw,46px) clamp(24px,4vw,56px);margin-bottom:clamp(20px,2vw,28px);
}
.these p{margin:0}
.these__t{font-family:var(--display);font-weight:600;letter-spacing:-.03em;font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.08;text-wrap:balance}
/* le trait est un pseudo-élément légèrement penché, plus « feutre » qu'un line-through */
.these__t s{text-decoration:none;position:relative;color:rgba(255,255,255,.55);white-space:nowrap}
.these__t s::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.09em;background:#1F1A17;transform:rotate(-2deg);border-radius:9px}
.these__t em{font-style:normal;color:#1F1A17}
.these__d{margin-top:16px!important;max-width:70ch;font-size:.93rem;line-height:1.65;color:rgba(255,255,255,.9)}
.exp__list{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--rule);margin-inline:calc(var(--pad) * -0.6)}
.exp__row{
  display:grid;grid-template-columns:52px minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(16px,3vw,44px);
  padding-block:clamp(26px,3vw,38px);
  padding-inline:calc(var(--pad) * 0.6);
  border-bottom:1px solid var(--rule);align-items:start;
  transition:background .35s var(--ease);
}
.exp__row:hover{background:var(--ground-2)}
.exp__ico{width:34px;height:34px;color:var(--accent)}
.exp__row:nth-child(2) .exp__ico{color:var(--sage)}
.exp__row:nth-child(3) .exp__ico{color:var(--ink-2)}
.exp__t{font-family:var(--display);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:600}
.exp__d{color:var(--ink-2);font-size:.94rem;margin-top:8px;max-width:38ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:.79rem;color:var(--ink-2);background:var(--ground);
  border:1px solid var(--rule-strong);border-radius:999px;padding:6px 13px;white-space:nowrap;
  transition:transform .25s var(--ease),border-color .25s ease,color .25s ease;
}
.tag:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:880px){
  .exp__row{grid-template-columns:1fr;gap:16px;padding-inline:0}
  .exp__list{margin-inline:0}
}

/* ---------- Méthode : cartes empilées ---------- */
/* Pas de `overflow` sur cette section, même en `clip` : un ancêtre clippé suffit à
   faire sortir les cartes `position:sticky` du chemin rapide du compositeur sur iOS,
   où elles sont alors repositionnées par le fil principal — d'où un tremblement
   pendant le défilement. Le débord latéral des cartes inclinées est déjà retenu par
   le `overflow-x:clip` de <html> et <body>. */
.method{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.stack{
  margin-top:clamp(36px,4.4vw,64px);
  display:flex;flex-direction:column;
  gap:clamp(58px,16vh,210px);
}
.scard{
  position:sticky;
  top:calc(var(--sticky-top, var(--nav-gap,100px)) + var(--i) * 14px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,2.8vw,44px);align-items:center;
  background:var(--ground);
  border:1px solid var(--rule);
  border-radius:clamp(18px,2vw,26px);
  padding:clamp(22px,2.8vw,38px);
  box-shadow:0 14px 44px rgba(28,25,23,.07);
  transform:rotate(var(--rot,0deg));
  transform-origin:50% 0;
  will-change:transform;
}
.scard:last-child{position:relative;top:auto}

.scard__text{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(12px,1.4vw,16px)}
.scard__n{
  margin:0;font-family:var(--display);font-weight:600;font-size:.85rem;
  letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
.scard__n span{color:var(--accent-ink);font-size:1.5rem;letter-spacing:-.02em;margin-right:2px}
.scard__t{
  margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  font-size:clamp(1.35rem,2.3vw,1.95rem);
}
.scard__d{margin:0;color:var(--ink-2);font-size:clamp(.96rem,1.1vw,1.04rem);line-height:1.72}
.scard__badge{
  margin:4px 0 0;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--rule-strong);border-radius:999px;padding:7px 15px;
}
.scard__media{
  margin:0;border-radius:clamp(14px,1.5vw,18px);overflow:hidden;
  aspect-ratio:4/3;background:var(--ground-2);
}
.scard__media img{width:100%;height:100%;object-fit:cover;display:block}
/* Visuels des étapes (et du manifeste, .duo__svg) : mini-interfaces dessinées en SVG.
   Couleurs tirées des jetons, donc suivies par le mode sombre ; classes courtes limitées au SVG */
.scard__art{display:block;width:100%;height:100%}
:is(.scard__art,.duo__svg) .t{fill:var(--accent)}
:is(.scard__art,.duo__svg) .ts{fill:var(--accent-soft)}
:is(.scard__art,.duo__svg) .s{fill:var(--sage)}
:is(.scard__art,.duo__svg) .ss{fill:var(--sage-soft)}
:is(.scard__art,.duo__svg) .p{fill:var(--paper)}
:is(.scard__art,.duo__svg) .r{fill:var(--rule-strong)}
:is(.scard__art,.duo__svg) .i{fill:var(--ink)}
:is(.scard__art,.duo__svg) .i3{fill:var(--ink-3)}
.scard__art .lbl{font-family:var(--body);font-size:13px;font-weight:500}
:is(.scard__art,.duo__svg) .on{fill:var(--on-accent)}
.scard__art .chip{font-family:var(--body);font-size:12px;font-weight:600}
.scard__art .sm{font-family:var(--body);font-size:11px;font-weight:500}
:is(.scard__art,.duo__svg) .ck{fill:none;stroke:var(--on-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* Les cartes recouvertes s'effacent légèrement derrière la suivante */
.js .scard{transition:box-shadow .4s var(--ease)}

@media (max-width:900px){
  /* Inclinaison et ombre sont conservées ici : le tremblement des cartes collantes sur
     iOS venait de l'`overflow` posé sur la section (voir plus haut), pas d'elles.
     Seul `will-change` est rendu à `auto` : le JS n'écrit plus de transform à cette
     largeur, il n'y a donc plus rien à promettre au compositeur et autant de calques
     en moins à garder en mémoire. */
  /* Flex en colonne plutôt que grille : Safari iOS sous-estimait la rangée du texte
     (figure à `aspect-ratio` + SVG à `height:100%`), et la figure recouvrait la fin
     du paragraphe. Le ratio est porté par le SVG, élément remplacé, que Safari
     dimensionne correctement. */
  .scard{
    display:flex;flex-direction:column;align-items:stretch;
    gap:clamp(18px,3vw,26px);padding:clamp(20px,4vw,28px);
    will-change:auto;
  }
  .scard__media{aspect-ratio:auto;flex:none}
  .scard__art{height:auto;aspect-ratio:16/10}
  .stack{gap:clamp(46px,13vh,130px)}
}
@media (max-width:560px){
  :root{--nav-gap:84px}
  .scard__d{font-size:.95rem;line-height:1.66}
}
@media (prefers-reduced-motion:reduce){
  .scard{position:static;transform:none!important;opacity:1!important}
  .stack{padding-bottom:0}
}

/* Encart de conclusion sous un contenu de section (méthode, binôme) : carte terracotta
   dans l'esprit de `.contact__pitch`, les deux portraits rappelant le « deux ». C'est un
   aplat : texte blanc sur `--accent` (4,7:1), identique dans les deux thèmes. */
.closing{
  margin-top:clamp(40px,5vw,72px);
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--accent);color:#fff;
  border-radius:clamp(20px,2.4vw,32px);
  padding:clamp(26px,3.6vw,48px);
}
.closing__faces{display:flex;align-items:center}
.closing__faces img{
  width:clamp(64px,7vw,92px);aspect-ratio:1/1;border-radius:999px;
  object-fit:cover;object-position:center 18%;
  border:3px solid var(--accent);background:var(--accent);
}
.closing__faces img + img{margin-left:-22px}
/* Encart du binôme : les initiales F et E à la place des portraits, déjà présents au-dessus.
   Même taille et même chevauchement que les portraits de l'encart de la méthode. */
.closing__mono{display:flex;align-items:center}
.closing__mono span{
  width:clamp(64px,7vw,92px);aspect-ratio:1/1;border-radius:999px;display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1;
  background:var(--ground);color:var(--accent);border:3px solid var(--accent);
}
.closing__mono span + span{margin-left:-22px;background:var(--sage-deep);color:#fff}
.closing__t{
  margin:0 0 12px;font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(1.35rem,2.6vw,2.1rem);line-height:1.12;color:#fff;
}
.closing__d{margin:0;max-width:78ch;font-size:clamp(.95rem,1.1vw,1rem);line-height:1.7;color:#fff}
@media (max-width:820px){
  .closing{grid-template-columns:1fr;gap:18px}
  .closing__faces img{width:58px}
  .closing__faces img + img{margin-left:-16px}
  .closing__mono span{width:58px;font-size:1.6rem}
  .closing__mono span + span{margin-left:-16px}
}
/* Sur mobile, l'encart s'affiche d'emblée, sans l'apparition en fondu de `.reveal` (demande du client) */
@media (max-width:900px){
  .js .closing.reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Secteurs ---------- */
.sectors{padding-block:clamp(40px,4.6vw,64px);overflow:hidden}
.sectors__head{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline}
.marquee{margin-top:clamp(28px,4vw,44px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slideL 40s linear infinite}
.marquee__item{
  display:flex;align-items:center;gap:20px;padding-inline:26px;
  font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.7rem);font-weight:500;
  color:var(--ink);white-space:nowrap;letter-spacing:-.025em;
}
.marquee__item::after{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent);flex:none}
.marquee__item:nth-child(even)::after{background:var(--sage)}
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
}

/* ---------- Engagements ---------- */
/* Section claire depuis que le client a écarté le fond sombre : cartes en aplats unis,
   terracotta, sauge puis crème (le client a écarté les dégradés et le noir). La troisième
   reprend exactement le panneau d'en-tête de la section (`--ground`, filet `--rule`) et
   ses jetons d'encre : elle suit donc le thème sombre comme lui. Sur les deux aplats, le
   texte passe en blanc. */
.pledge{background:var(--ground-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}   /* même fond beige que la méthode */
.pledge__grid{margin-top:clamp(44px,5vw,70px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,26px)}
.pledge__col{
  --tint:#fff;--tint-ink:#fff;--txt:#fff;--txt-2:rgba(255,255,255,.9);--ghost:rgba(255,255,255,.14);
  --chip-bg:rgba(255,255,255,.14);
  position:relative;overflow:hidden;
  background:var(--accent);color:var(--txt);
  border:1px solid transparent;
  border-radius:32px;
  padding:clamp(26px,3vw,38px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.pledge__col:nth-child(2){background:var(--sage-deep)}
.pledge__col:nth-child(3){
  --tint:var(--accent);--tint-ink:var(--accent-ink);--txt:var(--ink);--txt-2:var(--ink-2);--ghost:var(--rule);
  --chip-bg:var(--accent-soft);
  background:var(--ground);border-color:var(--rule);
}
.pledge__col::before{
  content:"";position:absolute;top:0;left:clamp(26px,3vw,38px);right:clamp(26px,3vw,38px);height:2px;
  background:var(--tint);border-radius:0 0 2px 2px;
  transform:scaleX(.2);transform-origin:0 50%;
  transition:transform .65s var(--ease);
}
.pledge__col:hover{transform:translateY(-8px);box-shadow:0 22px 44px -18px rgba(28,25,23,.35)}
.pledge__col:hover::before{transform:scaleX(1)}

.pledge__ghost{
  position:absolute;right:clamp(16px,1.9vw,26px);top:clamp(6px,1vw,12px);
  font-family:var(--display);font-weight:600;font-size:clamp(4.4rem,6.6vw,6rem);
  line-height:1;letter-spacing:-.05em;color:var(--ghost);
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.pledge__chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;white-space:nowrap;
  background:var(--chip-bg);color:var(--tint-ink);
}
.pledge__chip::before{content:"";width:5px;height:5px;border-radius:999px;background:var(--tint);flex:none}
.pledge__t{
  font-family:var(--display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:600;
  margin-top:clamp(24px,2.6vw,34px);color:var(--txt);
}
.pledge__ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:15px}
.pledge__ul li{color:var(--txt-2);font-size:.93rem;line-height:1.6;padding-left:21px;position:relative}
.pledge__ul li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:999px;
  background:var(--tint);opacity:.85;
}
@media (max-width:900px){.pledge__grid{grid-template-columns:1fr}}

/* ---------- Le binôme ---------- */
.team__grid{
  margin-top:clamp(28px,3.4vw,46px);
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,2.2vw,28px);
  align-items:stretch;   /* cartes de même hauteur : le bloc blanc le plus court s'allonge (flex:1) */
}

/* Portrait dominant : aucune carte derrière la photo, et le bloc de présentation
   remonte chevaucher son bas de `--overlap`. Cette valeur sert deux fois — la remontée
   du bloc et le relèvement de la pastille, qui passerait sinon derrière lui. */
.member{
  --tint:var(--accent);
  --overlap:clamp(26px,3.4vw,44px);
  position:relative;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease);
}
.member:last-child{--tint:var(--sage)}
.member:hover{transform:translateY(-5px)}

/* 5/4 plutôt que 4/3, et cadrage calé en haut : les deux portraits ont le sommet du
   crâne près du bord supérieur de leur carré, un rognage par le haut le couperait.
   La hauteur gagnée sert de ciel au-dessus des têtes, pas à agrandir les visages. */
.member__photo{
  position:relative;border-radius:clamp(14px,1.6vw,20px);overflow:hidden;
  aspect-ratio:5/4;background:var(--ground-3);
}
.member__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 0;
  transition:transform 1s var(--ease);
}
/* erwan.jpg est cadré bas (tête de 10 % à 76 % de la hauteur) : calé en haut, sa barbe
   passait sous le bloc de présentation. Descendu au tiers, le crâne garde un peu d'air. */
.member__photo .member__img--erwan{object-position:center 35%}
.member:hover .member__photo img{transform:scale(1.04)}
.member__pin{
  position:absolute;left:14px;bottom:calc(var(--overlap, 0px) + 14px);margin:0;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ground);border-radius:999px;padding:8px 16px;
  font-size:.74rem;font-weight:600;color:var(--ink);
}
.member__pin::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--tint);flex:none}

/* Le bloc de présentation remonte sur la photo et porte nom, rôle, bio et mandat */
.member__body{
  --in:40px;
  --body-pad:clamp(18px,2.2vw,26px);
  --name-size:clamp(1.55rem,2.9vw,2.3rem);
  position:relative;z-index:1;flex:1;
  margin:calc(var(--overlap) * -1) clamp(6px,1vw,12px) 0;
  background:var(--paper);border:1px solid var(--rule);
  border-radius:clamp(14px,1.6vw,20px);
  padding:var(--body-pad);
  box-shadow:0 10px 30px rgba(28,25,23,.08);
}
.member__name{
  font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:var(--name-size);line-height:1;margin:0;
  padding-right:calc(var(--in) + 12px);             /* laisse la place au bouton LinkedIn */
}
/* Bouton LinkedIn, calé dans l'angle haut du bloc de présentation. Il reprend la teinte
   de la carte au survol : aucune couleur en dur, donc rien à surcharger en thème sombre. */
.member__in{
  position:absolute;top:var(--body-pad);right:var(--body-pad);
  display:grid;place-items:center;width:var(--in);height:var(--in);
  border-radius:12px;background:var(--ground-2);border:1px solid var(--rule);
  color:var(--ink);
  transition:color .25s ease,background .25s ease,border-color .25s ease;
}
.member__in:active{background:var(--ground-3)}
@media (hover:hover){
  .member__in:hover{background:var(--tint);border-color:var(--tint);color:var(--on-accent)}
}
/* Annotation « au feutre » sous le bouton : le mot à gauche, la flèche qui remonte vers
   le logo. Placée à hauteur de la pastille du rôle, qui est courte, pour ne rien masquer ;
   haute de 28 px, elle s'arrête avant la ligne de spécialité, même sur mobile où le nom
   est plus petit. La pointe (x = 26 sur 36 dans le SVG affiché en 30 px, soit 8 px avant
   son bord droit) tombe sur l'axe du bouton, d'où le `right`. */
.member__note{
  position:absolute;top:calc(var(--body-pad) + var(--in) + 3px);right:calc(var(--body-pad) + var(--in) / 2 - 8px);
  display:flex;align-items:flex-end;gap:2px;
  color:var(--ink);pointer-events:none;              /* noir au feutre ; crème en thème sombre */
}
.member__note-txt{
  font-family:'Caveat',var(--body);font-weight:600;font-size:1.4rem;line-height:1;
  transform:rotate(-6deg);transform-origin:100% 50%;
}
.member__note svg{flex:none;overflow:visible}
.member__note-arw--side{display:none}
.member__note path{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
/* Le rôle est une pastille en aplat, sur la teinte pleine de la carte et texte blanc —
   même traitement que `.badge` et `.badge--sage`. Les couleurs ne changent pas selon le
   thème : c'est un aplat, son contraste ne dépend pas du fond de page.
   Le retrait à droite compense l'interlettrage, qui laisse sinon un blanc après la
   dernière lettre et déséquilibre la pastille. */
.member__role{
  display:inline-flex;align-items:center;
  margin:10px 0 0;padding:5px 11px;padding-right:calc(11px + .13em);
  border-radius:999px;background:var(--tint);
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--on-accent);font-weight:600;
}
/* Le bloc de présentation porte déjà le texte : pas de boîte blanche imbriquée.
   L'annotation LinkedIn descend jusqu'à 71 px sous le haut du contenu. Quand le nom
   est petit (deux colonnes étroites), la bio remonte d'autant et venait la toucher :
   la marge s'agrandit pour la garder au moins 12 px dessous
   (71 + 12 − 10 de marge et ~28 de hauteur de la pastille du rôle = 45 px − le nom). */
.member__bio{
  display:grid;gap:13px;margin-top:max(clamp(14px,1.7vw,19px), calc(45px - var(--name-size)));
}
.member__bio p{color:var(--ink-2);font-size:.97rem;line-height:1.72;margin:0}

/* Apparition des cartes du binôme : la carte se redresse, puis photo, nom, bio et
   mandat arrivent en cascade. Erwan suit Faustine d'un léger décalage (--md). */
.js .member.reveal{
  opacity:0;transform:translateY(56px) rotate(var(--tilt,-2.5deg)) scale(.96);transform-origin:50% 100%;
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,1.25,.4,1),border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.js .member.reveal:nth-child(2){--tilt:2.5deg;--md:.14s}
.js .member.reveal.is-in{opacity:1;transform:none}
.js .member.reveal.is-in:hover{transform:translateY(-5px)}

.js .member.reveal .member__photo{clip-path:inset(0 0 100% 0 round 18px);transition:clip-path 1s var(--ease) calc(var(--md,0s) + .18s)}
.js .member.reveal.is-in .member__photo{clip-path:inset(0 0 0 0 round 0)}

.js .member.reveal .member__name,
.js .member.reveal .member__in,
.js .member.reveal .member__role{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .8s var(--ease)}
.js .member.reveal .member__name{transition-delay:calc(var(--md,0s) + .35s)}
.js .member.reveal .member__in{transition-delay:calc(var(--md,0s) + .43s)}
.js .member.reveal .member__role{transition-delay:calc(var(--md,0s) + .43s)}

.js .member.reveal .member__bio{opacity:0;transform:translateY(18px);transition:opacity .6s ease calc(var(--md,0s) + .55s),transform .9s cubic-bezier(.2,1.2,.4,1) calc(var(--md,0s) + .55s)}
.js .member.reveal .member__bio p{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .7s var(--ease)}
.js .member.reveal .member__bio p:nth-child(1){transition-delay:calc(var(--md,0s) + .72s)}
.js .member.reveal .member__bio p:nth-child(2){transition-delay:calc(var(--md,0s) + .84s)}

.js .member.reveal .member__note-txt{opacity:0;transition:opacity .5s ease calc(var(--md,0s) + .6s)}
.js .member.reveal .member__note path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease) calc(var(--md,0s) + .8s)}
.js .member.reveal .member__note .member__note-head{transition-duration:.25s;transition-delay:calc(var(--md,0s) + 1.15s)}
.js .member.reveal.is-in .member__note-txt{opacity:1}
.js .member.reveal.is-in .member__note path{stroke-dashoffset:0}

.js .member.reveal.is-in :is(.member__name,.member__in,.member__role,.member__bio,.member__bio p){opacity:1;transform:none}

@media (max-width:820px){
  .team__grid{grid-template-columns:1fr;gap:clamp(18px,3vw,24px)}
  /* Sur mobile, l'annotation passe à gauche du bouton, avec une flèche qui remonte
     vers son flanc. Elle descend sous la ligne du nom (« Faustine Rieu » la touchait
     à 360 px) et reste à droite de la pastille du rôle ; la bio, qui n'a plus rien
     au-dessus d'elle, reprend sa marge normale. */
  .member__note{top:calc(var(--body-pad) + 27px);right:calc(var(--body-pad) + var(--in) + 1px)}
  .member__note-arw--up{display:none}
  .member__note-arw--side{display:block}
  .member__note-arw--side path{stroke-width:1.75}
  .member__note-txt{font-size:1.3rem;transform:translateY(4px) rotate(-6deg)}
  .member__bio{margin-top:clamp(14px,1.7vw,19px)}
  /* En pleine largeur, l'inclinaison de l'apparition dépasse les 20 px de gouttière
     et faisait tanguer la page : la carte ne fait plus que monter. */
  .js .member.reveal{transform:translateY(40px) scale(.97)}
}
@media (prefers-reduced-motion:reduce){
  .member:hover{transform:none}
  .member:hover .member__photo img{transform:none}
  .js .member.reveal,.js .member.reveal *{transition:none!important}
  .js .member.reveal .member__photo{clip-path:none}
  .js .member.reveal.is-in:hover{transform:none}
}

/* ---------- Avis ---------- */
/* Carrousel : une grande carte de citation par avis, alignées dans une rangée qui glisse
   d'une carte toutes les 3 secondes, en boucle (main.js). La liste des auteurs à gauche
   (onglets ARIA) et les flèches pilotent la même rangée. Terracotta pour les entreprises
   clientes, sauge pour les candidats placés.
   Fond beige très clair (`--ground-light`), plus clair que le crème du binôme au-dessus et
   que celui du contact en dessous, sans être blanc. Citation et onglet actif en blanc cassé,
   boutons en crème pour se détacher du cadre blanc. */
.reviews{background:var(--ground-light);border-block:1px solid var(--rule)}
.reviews .is-client{--tint:var(--accent)}
.reviews .is-candidat{--tint:var(--sage)}
/* avis de candidats en terracotta, la couleur de Faustine : ils restent comptés comme
   candidats dans la pastille de l'en-tête, seule la teinte change */
.reviews .is-candidat.is-faustine{--tint:var(--accent)}

/* En-tête : la phrase seule, et à droite la pile des initiales des auteurs (variante B).
   main.js la reconstruit d'après les onglets : initiales, nombre et public suivent les avis. */
.shead--voix{grid-template-columns:minmax(0,1fr) auto;align-items:end}
.shead--voix h2{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.05}
.voix{display:flex;align-items:center;gap:14px}
.voix__pile{display:flex}
.voix__pile span{
  width:52px;height:52px;margin-left:-14px;border-radius:999px;border:3px solid var(--ground-2);
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  font-family:var(--display);font-weight:600;font-size:.85rem;letter-spacing:.02em;
}
.voix__pile span:first-child{margin-left:0}
.voix__pile .is-candidat{background:var(--sage-deep)}   /* blanc lisible, comme sur --accent */
.voix__pile .is-candidat.is-faustine{background:var(--accent)}
/* rond blanc « … » : la liste ne s'arrête pas aux avis affichés */
.voix__pile .voix__plus{background:var(--paper);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule-strong);font-size:1.1rem;letter-spacing:.06em}
/* Variante F parmi six : une phrase et le public en pastille, sans aucun chiffre */
.voix__lbl{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.voix__lbl strong{font-family:var(--display);font-weight:600;font-size:1.25rem;line-height:1.15;color:var(--ink)}
.voix__chip{
  display:inline-flex;align-items:center;gap:7px;font-size:.75rem;color:var(--ink-3);
  background:var(--ground);border:1px solid var(--rule-strong);border-radius:999px;padding:5px 12px;
}
.voix__chip::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--sage);flex:none}
@media (max-width:900px){.shead--voix{grid-template-columns:1fr}}
/* sur mobile, la légende passe sous la pile : à côté, elle se tassait sur quatre lignes */
@media (max-width:560px){.voix{flex-direction:column;align-items:flex-start}.voix__chip{white-space:nowrap}}
@media (max-width:420px){.voix__pile span{width:44px;height:44px;margin-left:-12px;font-size:.78rem}}
.reviews__box{
  margin-top:clamp(28px,3.4vw,46px);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(16px,2vw,26px);
}
/* au-dessus du carrousel, dont la fenêtre élargie pour l'ombre mord sur la colonne : sans
   quoi elle capterait les clics sur le bord droit des onglets */
.reviews__tabs{position:relative;z-index:1;display:grid;gap:8px;align-content:start;margin:0;padding:0;list-style:none}
.reviews__tab{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  padding:12px 14px;border-radius:16px;border:1px solid transparent;background:transparent;
  font:inherit;color:inherit;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.reviews__tab[aria-selected="true"]{background:var(--paper-warm);border-color:var(--rule);box-shadow:0 8px 24px rgba(28,25,23,.06)}
@media (hover:hover){.reviews__tab:hover{border-color:var(--rule-strong)}}
.reviews__ava{
  flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  background:var(--ground-3);color:var(--ink-2);
  font-family:var(--display);font-weight:600;font-size:.8rem;letter-spacing:.02em;
  transition:background .25s ease,color .25s ease;
}
.reviews__tab[aria-selected="true"] .reviews__ava{background:var(--tint);color:var(--on-accent)}
.reviews__name{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);line-height:1.2}
.reviews__role,.reviews__by{display:block;font-size:.83rem;color:var(--ink-3);line-height:1.4}

/* Les cartes sont empilées en colonne (grille à rangées égales, la hauteur de la plus
   longue : rien ne saute) et la fenêtre, haute d'une carte (main.js), les fait monter une à
   une. Sous 900 px, elles repassent en rangée horizontale. Dans les deux cas, la rangée est
   déplacée en `transform` et la fenêtre la rogne en `overflow:hidden` — pas en `clip-path`,
   qui ne masque qu'à l'écran : les cartes cachées gardaient leur place dans la mise en page
   et allongeaient la page bien au-delà du pied de page. Pour laisser l'ombre entière, la
   fenêtre est élargie par une marge intérieure (`--avis-marge-*`) que des marges négatives
   compensent : la carte reste à sa place. L'écart entre cartes (`--gap`, invisible puisqu'une
   seule est affichée) est plus grand que ces marges : les voisines restent cachées.
   Sans JavaScript, la rangée horizontale défile à la main, cartes aimantées. */
.reviews__carousel{--slide-pad:clamp(26px,3.4vw,52px);position:relative;min-width:0}
.reviews__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.reviews__viewport::-webkit-scrollbar{display:none}
.js .reviews__viewport{
  --avis-marge-h:30px;--avis-marge-x:36px;--avis-marge-b:44px;
  overflow:hidden;
  padding:var(--avis-marge-h) var(--avis-marge-x) var(--avis-marge-b);
  margin:calc(var(--avis-marge-h) * -1) calc(var(--avis-marge-x) * -1) calc(var(--avis-marge-b) * -1);
}
.reviews__track{--gap:64px;display:flex;gap:var(--gap)}
@media (min-width:901px){
  .js .reviews__track{display:grid;grid-auto-rows:1fr}
}
.js .reviews__track{transition:transform .7s var(--ease)}
.reviews__track.is-jumping,.reviews__track.is-jumping .reviews__slide{transition:none}
.reviews__slide{
  flex:0 0 100%;scroll-snap-align:start;
  display:flex;flex-direction:column;gap:clamp(18px,2vw,26px);margin:0;
  background:var(--paper-warm);border:1px solid var(--rule);
  border-radius:clamp(20px,2.2vw,28px);
  box-shadow:0 8px 26px rgba(28,25,23,.06);    /* ombre légère : tient dans le rognage */
  padding:var(--slide-pad);min-height:clamp(320px,30vw,400px);
}
.reviews__type{
  display:inline-flex;align-items:center;gap:8px;margin:0;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-3);
}
.reviews__type::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--tint);flex:none}
.reviews__q{
  margin:0;font-family:var(--display);font-weight:500;color:var(--ink);
  font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.32;letter-spacing:-.02em;text-wrap:pretty;
}
/* Le pied de chaque carte porte les guillemets, ses flèches et son propre compteur : ils
   partent et arrivent avec la carte. */
.reviews__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin-top:clamp(18px,2vw,26px)}
.reviews__mark{display:block;width:34px;height:auto;color:var(--accent-bright)}
.reviews__nav{display:none}
.js .reviews__nav{display:flex;align-items:center;gap:10px}
.reviews__count{font-size:.85rem;color:var(--ink-3);font-variant-numeric:tabular-nums;min-width:52px;text-align:center}
.reviews__btn{
  display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--rule-strong);background:var(--ground);color:var(--ink);font-size:1.05rem;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
@media (hover:hover){.reviews__btn:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}}
/* l'auteur descend en bas de carte : le lien « Lire l'avis complet » suit directement l'extrait */
.reviews__slide .reviews__by{margin-top:auto}

/* Avis long : l'extrait et « + Lire la suite », qui ouvre la modale (masqué sans JavaScript).
   Variante 3 parmi six : « + » dans un rond à la teinte de l'avis, qui tourne au survol. */
.reviews__more{
  display:none;align-self:flex-start;align-items:center;gap:10px;margin-top:calc(clamp(18px,2vw,26px) * -.3);
  padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);
}
.js .reviews__more{display:inline-flex}
.js .reviews__more[hidden]{display:none}
.reviews__more-ic{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  background:var(--sage-soft);color:var(--sage-deep);font-size:1.2rem;font-weight:500;line-height:1;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.is-client .reviews__more-ic,.is-faustine .reviews__more-ic{background:var(--accent-soft);color:var(--accent-ink)}
@media (hover:hover){
  .reviews__more:hover .reviews__more-ic{transform:rotate(90deg);background:var(--sage-deep);color:var(--on-accent)}
  .is-client .reviews__more:hover .reviews__more-ic,.is-faustine .reviews__more:hover .reviews__more-ic{background:var(--accent)}
}

/* Modale de l'avis complet : <dialog> natif (focus piégé, Échap, retour du focus au lien) */
.avis-modal{
  width:min(680px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);
  margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overscroll-behavior:contain;
}
.avis-modal::backdrop{background:rgba(28,25,23,.55);backdrop-filter:blur(3px)}
.avis-modal__box{
  max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--paper-warm);border:1px solid var(--rule);border-radius:clamp(20px,2.2vw,28px);
  box-shadow:0 24px 60px rgba(28,25,23,.25);
  padding:clamp(24px,3.4vw,44px);
}
.avis-modal[open] .avis-modal__box{animation:avisModal .35s var(--ease)}
@keyframes avisModal{from{opacity:0;transform:translateY(16px) scale(.98)}}
.avis-modal__head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(18px,2vw,26px)}
.avis-modal__head p{margin:0}
.avis-modal__ava{width:46px;height:46px;background:var(--tint);color:var(--on-accent)}
.avis-modal__close{
  flex:none;margin-left:auto;display:grid;place-items:center;width:44px;height:44px;border-radius:999px;
  border:1px solid var(--rule-strong);background:var(--ground);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
@media (hover:hover){.avis-modal__close:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}}
/* un seul style pour tout le texte : un chapeau en grand sur le premier paragraphe donnait,
   quand celui-ci est long, un bloc de taille et de graisse différentes du reste */
.avis-modal__txt p{margin:0 0 1em;font-size:1.05rem;line-height:1.7;color:var(--ink-2)}
.avis-modal__txt p:last-child{margin-bottom:0}
/* première phrase de l'avis en gras, seule dans son paragraphe (balisée dans le template) */
.avis-modal__txt strong{font-weight:600;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.avis-modal[open] .avis-modal__box{animation:none}}

@media (max-width:900px){
  .reviews__box{grid-template-columns:1fr}
  /* La liste devient une rangée de pastilles qui défile à l'horizontale, jusqu'aux bords
     de l'écran. Aucun élément collant dans la section : l'`overflow` est sans risque. */
  .reviews__tabs{
    display:flex;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 2px;
  }
  .reviews__tabs::-webkit-scrollbar{display:none}
  .reviews__tabs li{flex:none}
  .reviews__tab{width:auto;padding:8px 14px 8px 8px;border-color:var(--rule);background:var(--ground)}
  .reviews__tab .reviews__role{display:none}
  .reviews__slide{min-height:0}
}
@media (prefers-reduced-motion:reduce){.js .reviews__track{transition:none}}

/* ---------- Contact ---------- */
.contact{background:var(--ground-2);border-top:1px solid var(--rule)}
.contact__grid{
  margin-top:clamp(24px,3vw,40px);
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(20px,2.6vw,36px);align-items:stretch;
}

.contact__col{display:flex;flex-direction:column;gap:clamp(16px,2vw,26px)}

/* Encart terracotta : comble la colonne face au formulaire */
.contact__pitch{
  background:var(--accent);color:#fff;
  border-radius:20px;padding:clamp(22px,2.8vw,32px);
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  flex:1;justify-content:center;
}
.contact__pitch-faces{display:flex;align-items:center}
.contact__pitch-faces img{
  width:clamp(42px,4.4vw,52px);aspect-ratio:1/1;border-radius:999px;
  object-fit:cover;object-position:center 18%;
  border:2px solid var(--accent);background:var(--accent);
}
.contact__pitch-faces img + img{margin-left:-15px}
.contact__pitch-t{
  margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.015em;
  font-size:clamp(1.05rem,1.55vw,1.32rem);line-height:1.22;
}
.contact__pitch-d{margin:0;font-size:.93rem;line-height:1.65;color:#fff}

/* Coordonnées directes */
.contact__direct{
  background:var(--ground);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(24px,3vw,38px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.8vw,22px);
}
.contact__label{
  margin:0;font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
}
/* Une fiche par fondateur : nom et email */
.contact__person{display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%}
.contact__person + .contact__person{padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--rule);width:100%}
.contact__who{
  margin:0;display:flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:600;color:var(--ink-2);
}
.contact__who::before{content:"";width:6px;height:6px;border-radius:999px;background:var(--accent);flex:none}
.contact__person + .contact__person .contact__who::before{background:var(--sage)}
/* Erwan en vert, comme sa pastille : soulignement et survol */
.contact__person + .contact__person .contact__mail{border-bottom-color:var(--sage-soft)}
.contact__person + .contact__person .contact__mail:hover{border-color:var(--sage);color:var(--sage)}
.contact__mail{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1.75vw,1.5rem);
  border-bottom:2px solid var(--accent-soft);padding-bottom:4px;
  transition:border-color .25s ease,color .25s ease;
  max-width:100%;overflow-wrap:anywhere;
}
.contact__mail:hover{border-color:var(--accent);color:var(--accent-ink)}
.contact__note{
  display:flex;align-items:flex-start;gap:11px;width:100%;margin:0;
  padding-top:clamp(16px,1.8vw,22px);border-top:1px solid var(--rule);
  font-size:.9rem;line-height:1.6;color:var(--ink-3);
}
.contact__note svg{width:17px;height:17px;color:var(--sage);flex:none;margin-top:3px}

/* Numéro de Claritee : petite carte sauge entre les coordonnées et l'encart terracotta.
   Aplat comme --accent : texte blanc sur --sage-deep (4,8:1), identique dans les deux thèmes. */
.contact__phone{
  display:flex;align-items:center;gap:16px;
  background:var(--sage-deep);color:#fff;border-radius:20px;
  padding:clamp(16px,2vw,22px) clamp(24px,3vw,38px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.contact__phone:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,25,23,.12)}
.contact__phone-ico{
  width:44px;height:44px;border-radius:999px;flex:none;
  display:grid;place-items:center;background:#fff;color:var(--sage-deep);
}
.contact__phone-ico svg{width:19px;height:19px}
.contact__phone-txt{display:flex;flex-direction:column;gap:5px}
.contact__phone .contact__label{color:rgba(255,255,255,.78)}
.contact__phone-num{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.15rem,1.75vw,1.45rem);color:#fff;font-variant-numeric:tabular-nums;
}

/* Formulaire */
/* Colonne flexible : le formulaire prend la hauteur de la colonne voisine, et c'est la
   zone de texte qui absorbe l'espace restant — pas les écarts entre champs ni le bouton. */
.form{
  position:relative;display:flex;flex-direction:column;gap:18px;
  background:var(--ground);border:1px solid var(--rule);border-radius:20px;
  padding:clamp(24px,3vw,38px);
}
.form__head{
  display:grid;gap:8px;padding-bottom:clamp(18px,2vw,24px);margin-bottom:4px;
  border-bottom:1px solid var(--rule);
}
.form__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 4px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.form__title{
  margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;color:var(--ink);
}
.form__sub{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-2)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.field{display:grid;gap:8px;align-content:start}
.field--grow{flex:1;display:flex;flex-direction:column}
.field--grow textarea{flex:1}
.field label{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.field input,.field textarea{
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--ground-2);
  border:1px solid var(--rule);border-radius:12px;padding:13px 15px;width:100%;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
/* Sélecteur de poste : menu déroulant entièrement dessiné */
.field__label{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.dd{position:relative}
.dd__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;font:inherit;font-size:.95rem;text-align:left;color:var(--ink);
  background:var(--ground-2);border:1px solid var(--rule);border-radius:12px;
  padding:13px 15px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.dd__btn:hover{border-color:var(--rule-strong)}
.dd__btn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(190,83,52,.12)}
.dd.is-open .dd__btn{
  background:var(--ground);border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(190,83,52,.12);
}
.dd__chev{width:17px;height:17px;color:var(--ink-3);flex:none;transition:transform .28s var(--ease),color .2s ease}
.dd.is-open .dd__chev{transform:rotate(180deg);color:var(--accent)}

.dd__list{
  position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);
  margin:0;padding:6px;list-style:none;
  background:var(--ground);
  border:1px solid var(--rule-strong);border-radius:16px;
  box-shadow:0 18px 44px rgba(28,25,23,.14);
  display:grid;gap:2px;
}
.js .dd__list{
  opacity:0;transform:translateY(-6px) scale(.985);transform-origin:50% 0;
  transition:opacity .2s var(--ease),transform .24s var(--ease);
}
.js .dd.is-open .dd__list{opacity:1;transform:none}
/* `display:grid` l'emporte sur l'attribut `hidden` : sans cette règle, la liste fermée restait
   en place, transparente, au-dessus du champ « Votre contexte », qui ne recevait plus les clics */
.dd__list[hidden]{display:none}

.dd__opt{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:11px;cursor:pointer;
  font-size:.93rem;color:var(--ink-2);
  transition:background .18s ease,color .18s ease;
}
.dd__opt::before{
  content:"";width:7px;height:7px;border-radius:999px;flex:none;
  background:var(--rule-strong);transition:background .18s ease,box-shadow .18s ease;
}
.dd__opt:hover,.dd__opt.is-active{background:var(--ground-2);color:var(--ink)}
.dd__opt[aria-selected="true"]{color:var(--ink);font-weight:500}
.dd__opt[aria-selected="true"]::before{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--ground);
  box-shadow:0 0 0 3px rgba(190,83,52,.12);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
/* Safari iOS zoome sur tout champ dont le texte fait moins de 16 px dès qu'on le touche :
   à .95rem (15,2 px), le formulaire zoomait à chaque saisie. */
@media (pointer:coarse){.field input,.field textarea{font-size:16px}}
.form__body{display:flex;flex-direction:column;gap:18px;flex:1}
/* align-self + width:100% : même rendu qu'étiré, mais la largeur peut s'animer à l'envoi */
.form .btn{justify-content:center;margin-top:2px;align-self:center;width:100%}
.form__note{margin:0;font-size:.8rem;color:var(--ink-3);line-height:1.55;text-align:center}
.form__note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Pot de miel anti-robots : sorti de l'écran plutôt que `display:none`, que certains robots repèrent */
.form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form[aria-busy="true"] .btn{opacity:.6;cursor:progress}

/* Envoi : le bouton décolle (variante C2 parmi six). Les champs s'effacent, le bouton se
   resserre en pastille (0,15 s), disparaît (0,78 s) et un avion de papier part de son
   centre vers le coin haut droit en laissant un pointillé ; le texte arrive à 1,65 s.
   Le tracé est posé par main.js sur la taille réelle du bloc, et révélé par un masque :
   l'avion (animateMotion) et le masque (animate) sont des animations SMIL lancées
   ensemble par beginElement(). Le bloc ne doit pas recevoir d'overflow:hidden, l'avion
   en sort. */
.form.is-sent .form__body > :not(.btn){animation:formSort .38s var(--ease) forwards}
@keyframes formSort{to{opacity:0;transform:translateY(-10px) scale(.97)}}
.form.is-sent .btn{
  pointer-events:none;white-space:nowrap;overflow:hidden;
  animation:formPastille .5s .15s var(--ease) forwards,formDecolle .25s .78s ease-in forwards;
}
@keyframes formPastille{to{width:56px;padding-left:0;padding-right:0;color:transparent;box-shadow:0 0 0 6px var(--accent-soft)}}
@keyframes formDecolle{to{transform:scale(0)}}

.form__vol{
  position:absolute;inset:0;z-index:2;width:100%;height:100%;max-width:none;
  overflow:visible;pointer-events:none;visibility:hidden;
}
.form.is-sent .form__vol{visibility:visible;animation:formFondu .5s 1.9s forwards}
@keyframes formFondu{to{opacity:0}}
.form__vol-masque{fill:none;stroke:#fff;stroke-width:14;stroke-dasharray:1;stroke-dashoffset:1}
.form__vol-trace{fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:3 7;stroke-linecap:round}
/* masqué tant que le vol n'a pas commencé : avant beginElement(), l'avion est à l'origine */
.form__avion{fill:var(--accent);opacity:0}
.form.is-flying .form__avion{opacity:1}
.form__avion-ombre{fill:#A8441F}

.form__done{
  position:absolute;inset:0;z-index:1;padding:inherit;
  display:grid;place-items:center;align-content:center;gap:12px;text-align:center;
  visibility:hidden;
}
.form.is-sent .form__done{visibility:visible}
.form__done .form__eyebrow{justify-content:center;margin:0}
.form__done-t{
  margin:0;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.1;color:var(--ink);
}
.form__done-t:focus{outline:none}
.form__done-d{margin:0 auto;max-width:36ch;font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.form__retour{
  margin-top:6px;padding:4px 2px;font:inherit;font-size:.85rem;font-weight:600;color:var(--accent-ink);
  background:none;border:0;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:4px;
}
.form__retour:hover{text-decoration-color:currentColor}
.form__done > *{--n:0}
.form__done > :nth-child(2){--n:1}
.form__done > :nth-child(3){--n:2}
.form__done > :nth-child(4){--n:3}
.form.is-sent .form__done > *{animation:formTexte .55s var(--ease) both;animation-delay:calc(1.65s + var(--n) * .1s)}
@keyframes formTexte{from{opacity:0;transform:translateY(14px)}}
/* Retour au formulaire : les champs, gardés remplis, réapparaissent en fondu */
.form.is-back .form__body > *{animation:formTexte .45s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .form.is-sent .form__body{visibility:hidden}
  .form.is-sent .form__body > *,.form.is-sent .btn,.form.is-sent .form__done > *,.form.is-back .form__body > *{animation:none}
  .form__vol{display:none}
}

@media (max-width:980px){.contact__grid{grid-template-columns:1fr}}
@media (max-width:520px){.form__row{grid-template-columns:1fr}}

/* ---------- Pied de page ---------- */
.footer{
  background:var(--dark);color:var(--on-dark);
  border-top-left-radius:clamp(24px,3.2vw,48px);
  border-top-right-radius:clamp(24px,3.2vw,48px);
  padding-top:clamp(48px,6vw,88px);
  overflow:hidden;position:relative;
}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:start;
}

.footer__brand{display:flex;flex-direction:column;align-items:flex-start}
.footer__kicker{margin:0;font-size:clamp(.95rem,1.1vw,1.05rem);color:rgba(247,242,235,.7)}
/* Une ligne par fondateur : portrait rond, nom en petit, email en dessous. Les deux
   lignes sont séparées par un filet, comme les fiches du contact. */
.footer__mails{
  display:grid;justify-items:start;margin-top:clamp(16px,2vw,24px);max-width:100%;
  width:min(100%,460px);
}
.footer__person{
  display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(12px,1.4vw,16px);width:100%;
  padding-block:clamp(12px,1.4vw,16px);
}
.footer__person + .footer__person{border-top:1px solid rgba(247,242,235,.12)}
/* Initiales à la place des portraits (demande du client), comme l'encart du binôme :
   F blanc sur terracotta, E blanc sur sauge. Couleurs en dur, le pied de page est sombre
   dans les deux thèmes. */
.footer__ini{
  width:clamp(42px,4vw,50px);aspect-ratio:1/1;border-radius:999px;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.03em;line-height:1;
  background:#BE5334;color:#fff;
  border:2px solid rgba(247,242,235,.14);transition:border-color .25s ease;
}
.footer__person + .footer__person .footer__ini{background:#587A6B;color:#fff}
.footer__person-txt{display:grid;gap:3px;min-width:0}
.footer__who{
  display:flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(247,242,235,.5);
}
.footer__who::before{content:"";width:6px;height:6px;border-radius:999px;background:#E8896A;flex:none}
.footer__person + .footer__person .footer__who::before{background:#9CBDAE}
.footer__mail{
  font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.12rem,1.7vw,1.45rem);line-height:1.2;color:var(--on-dark);
  overflow-wrap:anywhere;transition:color .25s ease;
}
@media (hover:hover){
  .footer__person:hover .footer__mail{color:#EC9276}
  .footer__person:hover .footer__ini{border-color:#EC9276}
  /* Erwan garde sa couleur : le vert, comme sa pastille et sa carte du binôme */
  .footer__person + .footer__person:hover .footer__mail{color:#9CBDAE}
  .footer__person + .footer__person:hover .footer__ini{border-color:#9CBDAE}
}
.footer__copy{margin:clamp(14px,1.6vw,20px) 0 0;font-size:.85rem;color:rgba(247,242,235,.45)}

/* Crédit d'agence. Le pied de page est sombre dans les deux thèmes : comme le reste de
   la section, il travaille en `rgba(247,242,235,x)` plutôt qu'avec les jetons de texte,
   et n'a donc aucune surcharge sombre à prévoir. Le logo est le fichier couleur de
   l'agence, dont le mot est déjà en crème pour fond sombre ; il n'est ni teinté ni
   atténué, contrairement aux logos clients du mur. */
.footer__made{
  display:inline-flex;align-items:center;gap:11px;
  margin-top:clamp(22px,2.6vw,32px);padding:8px 15px 8px 14px;
  border-radius:999px;
  background:rgba(247,242,235,.05);border:1px solid rgba(247,242,235,.14);
  transition:background .25s ease,border-color .25s ease;
}
.footer__made-label{
  font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,242,235,.5);
  transition:color .25s ease;
}
.footer__made img{height:16px;width:auto}
@media (hover:hover){
  .footer__made:hover{background:rgba(247,242,235,.1);border-color:rgba(247,242,235,.28)}
  .footer__made:hover .footer__made-label{color:rgba(247,242,235,.75)}
}

.footer__nav{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.footer__nav h3{
  margin:0;font-family:var(--body);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,235,.42);
}
.footer__nav ul{list-style:none;margin:clamp(16px,1.8vw,22px) 0 0;padding:0;display:grid;gap:12px}
.footer__nav a{font-size:.95rem;color:rgba(247,242,235,.74);transition:color .2s ease}
.footer__nav a:hover{color:var(--on-dark)}

/* Grand logo en entier (il était auparavant rogné par le bas de page), légèrement en
   retrait de la pleine largeur */
.footer__wordmark{
  display:block;width:78%;height:auto;
  margin:clamp(34px,5vw,64px) 0 0;
  user-select:none;pointer-events:none;
}

/* Signature sous le logo : barre de clôture façon intitulé de section — deux points,
   petites capitales, séparateur rond — sur un filet qui ferme le pied de page */
.footer__sign{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:clamp(24px,3vw,40px) 0 0;
  padding-block:clamp(18px,2.2vw,26px) clamp(22px,2.8vw,34px);
  border-top:1px solid rgba(247,242,235,.12);
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(247,242,235,.62);
}
.footer__sign-sep{width:4px;height:4px;border-radius:999px;background:#E8896A;flex:none}

@media (max-width:860px){
  .footer__top{grid-template-columns:1fr;gap:clamp(30px,5vw,44px)}
}
@media (max-width:420px){
  .footer__nav{grid-template-columns:1fr;gap:26px}
}

/* ---------- Apparitions ---------- */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.09s}
.js .reveal[data-d="2"]{transition-delay:.18s}
.js .reveal[data-d="3"]{transition-delay:.27s}
.js .reveal[data-d="4"]{transition-delay:.36s}
/* Mobile : le paragraphe du héros et ses boutons, sous la ligne de flottaison, apparaissaient
   chacun à leur tour au défilement. Ils sont liés : dès que l'un d'eux entre à l'écran, tout
   le groupe apparaît dans le même mouvement, avec le même délai (demande du client). Au
   chargement, `main.js` allonge ce délai (--groupe-delai) pour que le groupe suive les titres.
   Le tout forme un escalier serré : lignes du titre (0 et 0,11 s), sous-titre (0,22 s), puis
   chaque paragraphe et les boutons, 0,12 s après l'élément précédent (--rang) */
@media (max-width:900px){
  .js .hero__text .hero__sub.reveal{transition-delay:.22s}
  .js .hero__text .reveal:is(.hero__lead,.hero__cta){transition-delay:calc(var(--groupe-delai,.18s) + var(--rang,0) * .12s)}
  .hero__lead+.hero__lead,.hero__cta{--rang:1}
  .hero__lead+.hero__lead~.hero__cta{--rang:2}
  .js .hero__text:has(:is(.hero__lead,.hero__cta).is-in) .reveal:is(.hero__lead,.hero__cta){opacity:1;transform:none}
}

.js .hero h1 .line>span{transform:translateY(105%);animation:riseIn 1s var(--ease) forwards}
.js .hero h1 .line:nth-child(2)>span{animation-delay:.11s}
@keyframes riseIn{to{transform:translateY(0)}}

.parallax{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero h1 .line>span{transform:none;animation:none}
  .parallax{transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ---------- Page intérieure ---------- */
.page{padding-block:clamp(48px,6vw,86px)}
.page__head{border-bottom:1px solid var(--rule);padding-bottom:clamp(26px,4vw,40px)}
.prose{max-width:68ch;margin-top:clamp(32px,4vw,50px);display:grid;gap:30px}
.prose h2{font-size:clamp(1.25rem,2vw,1.55rem);margin-bottom:10px}
.prose p,.prose li{color:var(--ink-2);font-size:.97rem;line-height:1.75}
.prose ul{margin:10px 0 0;padding-left:20px;display:grid;gap:7px}
.prose a{color:var(--accent-ink);border-bottom:1px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--accent)}

/* ---------- Blocs terracotta : pointillé de découpe ---------- */
/* Un pointillé terracotta court à 9 px autour des grands aplats (bandeau de la thèse,
   encarts de fin de la méthode et du binôme, encart du contact), comme la ligne de
   découpe d'un coupon, et défile lentement (variante 3E parmi six). Le SVG déborde du
   bloc de 9 px de chaque côté : rect en 100 % et `overflow:visible`, plus sûr que les
   propriétés géométriques en CSS, mal prises en charge par Safari. Son arrondi suit
   celui du bloc, augmenté de 9 px (--pr). Les tuiles du héros et du manifeste n'en ont
   pas : leurs grilles n'ont que 8 à 22 px d'écart, le pointillé toucherait les voisines.
   Aucun de ces blocs ne doit recevoir d'`overflow:hidden`, qui couperait le pointillé. */
.these,.closing,.contact__pitch{position:relative}
.these{--pr:calc(clamp(18px,2vw,28px) + 9px)}
.closing{--pr:calc(clamp(20px,2.4vw,32px) + 9px)}
.contact__pitch{--pr:29px}
/* max-width:none : la règle générale `img,svg{max-width:100%}` bridait le SVG à la
   largeur du bloc, et le pointillé retombait à l'intérieur du bord droit */
.pointille{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);max-width:none;overflow:visible;pointer-events:none}
.pointille rect{
  rx:var(--pr);fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:8 7;
  animation:pointilleMarche 1.8s linear infinite;
}
@keyframes pointilleMarche{to{stroke-dashoffset:-15}}
@media (prefers-reduced-motion:reduce){.pointille rect{animation:none}}

/* ---------- Page 404 ---------- */
/* Le zéro du « 404 » est une loupe qui balaie un profil anonyme, sur une piste en pointillé
   terracotta qui défile comme celle des blocs orange. Tout est dessiné avec les jetons :
   le mode sombre suit sans surcharge, sauf le pointillé (dernier bloc de la feuille). */
.perdu-page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.perdu__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:22px var(--pad);
}
.perdu__logo img{width:132px;height:auto}
.perdu{
  flex:1;width:100%;max-width:820px;margin:0 auto;padding:clamp(20px,4vw,48px) var(--pad) clamp(48px,7vw,88px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.perdu__code{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.04em;
  font-family:var(--display);font-weight:600;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(7.5rem,24vw,14.5rem);color:var(--ink);
  margin-bottom:clamp(18px,3vw,30px);
}
.perdu__chiffre{position:relative;z-index:1}
.perdu__piste{
  position:absolute;left:-12%;top:8%;width:124%;height:84%;overflow:visible;pointer-events:none;
}
.perdu__piste path{
  fill:none;stroke:var(--accent);stroke-width:1.8;stroke-dasharray:8 7;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.55;
  animation:pointilleMarche 1.8s linear infinite;
}
.perdu__loupe{
  position:relative;z-index:2;width:.86em;height:.86em;margin:0 .02em;overflow:visible;
  animation:perduBalaye 6s ease-in-out infinite;transform-origin:43% 43%;
}
@keyframes perduBalaye{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(-7%,4%) rotate(-8deg)}
  50%{transform:translate(4%,-5%) rotate(5deg)}
  75%{transform:translate(6%,4%) rotate(-3deg)}
}
.perdu__verre{fill:var(--accent-soft)}
.perdu__cercle{fill:none;stroke:var(--accent);stroke-width:13}
.perdu__manche{stroke:var(--ink);stroke-width:18;stroke-linecap:round}
.perdu__reflet{fill:none;stroke:var(--paper);stroke-width:6;stroke-linecap:round;opacity:.8}
/* le profil glisse dans le verre en sens inverse : la loupe semble le chercher */
.perdu__profil{animation:perduProfil 6s ease-in-out infinite}
@keyframes perduProfil{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(10px,-6px)}
  50%{transform:translate(-8px,7px)}
  75%{transform:translate(-9px,-5px)}
}
.perdu__profil circle,.perdu__profil path{
  fill:var(--ground);stroke:var(--rule-strong);stroke-width:2.4;stroke-dasharray:5 5;
}
.perdu__profil text{
  font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:0;
  fill:var(--accent);text-anchor:middle;
}

.perdu__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 14px;
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.perdu__t{
  margin:0;max-width:17ch;font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.04;
  font-size:clamp(2rem,4.6vw,3.3rem);color:var(--ink);text-wrap:balance;
}
.perdu__point{color:var(--accent)}
.perdu__d{margin:18px 0 0;max-width:46ch;font-size:1.02rem;line-height:1.65;color:var(--ink-2)}
.perdu__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

.perdu__pistes{width:100%;margin-top:clamp(44px,6vw,64px);text-align:left}
.perdu__pistes-t{
  margin:0 0 12px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.perdu__pistes ul{
  margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
}
.perdu__pistes li{border-bottom:1px solid var(--rule)}
.perdu__pistes li:nth-child(odd){border-right:1px solid var(--rule)}
.perdu__pistes a{
  display:flex;align-items:center;gap:14px;padding:18px 16px;
  font-weight:500;color:var(--ink);text-decoration:none;
  transition:background .25s ease,color .25s ease;
}
.perdu__pistes a:hover{background:var(--ground-2);color:var(--accent-ink)}
.perdu__n{font-family:var(--display);font-weight:600;font-size:.82rem;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.perdu__pistes .arw{margin-left:auto;color:var(--ink-3);transition:transform .3s var(--ease),color .25s ease}
.perdu__pistes a:hover .arw{transform:translateX(4px);color:var(--accent-ink)}

.perdu__pied{
  display:flex;justify-content:center;gap:20px;padding:22px var(--pad) 28px;
  font-size:.82rem;color:var(--ink-3);
}
.perdu__pied a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.perdu__pied a:hover{color:var(--ink)}

@media (max-width:640px){
  .perdu__bar-cta{display:none}
  .perdu__pistes ul{grid-template-columns:1fr}
  .perdu__pistes li:nth-child(odd){border-right:0}
}
@media (prefers-reduced-motion:reduce){
  .perdu__loupe,.perdu__profil,.perdu__piste path{animation:none}
}

/* ---------- Thème sombre : exceptions aux jetons ---------- */
[data-theme="dark"] .nav.is-stuck .nav__inner{background:rgba(23,20,18,.82);box-shadow:0 6px 28px rgba(0,0,0,.35)}
[data-theme="dark"] .hero__hot{color:var(--accent-bright)}
/* Le terracotta de base est trop sourd sur fond brun */
[data-theme="dark"] .pointille rect{stroke:var(--accent-bright)}
[data-theme="dark"] .perdu__piste path,[data-theme="dark"] .perdu__cercle{stroke:var(--accent-bright)}
[data-theme="dark"] .form__vol-trace{stroke:var(--accent-bright)}
[data-theme="dark"] .form__avion{fill:var(--accent-bright)}
[data-theme="dark"] .form__avion-ombre{fill:var(--accent)}
/* Initiale F de l'encart du binôme : pastille crème et F terracotta, comme en clair
   (--ground passerait au brun, sur lequel le terracotta se perd) */
[data-theme="dark"] .closing__mono span:first-child{background:#FAF6F1;color:#BE5334}
/* Logos clients : encre sombre inversée en gris clair */
[data-theme="dark"] .logos img{filter:invert(1)}
/* L'illustration garde son fond crème, comme une carte imprimée */
[data-theme="dark"] .tile--accent a{border-color:#4A2F25}
[data-theme="dark"] .tile--sage a{border-color:#2A3731}

/* Fondu des couleurs pendant le changement de thème (classe posée ~0,5 s par le JS) */
.theme-fade,.theme-fade *,.theme-fade *::before,.theme-fade *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,filter .45s ease!important;
}
.theme-fade .nav__theme svg{transition:transform .5s var(--ease),opacity .3s ease!important}