/* ════════════════════════════════════════════════════════════════════
   DA-52 · page « Notre équipe ». Base : DA-52 « Univers II · nuit » (jetons,
   nav, pied de page, nuée et ses corrections anti-tremblement, zoom).
   UNE grande idée : sept hautes fenêtres. Chaque membre de l'équipe est une
   barre de lumière (comme les barres du logo et les cas de l'accueil) ; les
   portraits arrivent de la profondeur dès l'en-tête. La fenêtre lue
   s'élargit, la personne passe de la bichromie à la couleur douce et son
   récit se déplie à côté d'elle.
     0 · en-tête compact (pas de hero d'accueil) : le titre, dont le trident en
         petit est la marque ; aussitôt dessous, les sept fenêtres, dont la nuée
         dessine le cadre (aucun grain sur les photos : masque d'exclusion) ;
     1 · les expertises : les trois barres SEO, GEO, Média ; survoler une
         personne allume les leviers qu'elle porte ;
     2 · ce qui distingue l'équipe : un trait de lumière sous chaque idée ;
     3 · recrutement : une huitième fenêtre, vide, dessinée par la nuée ;
     4 · dézoom : on ressort, le trident entier revient près du formulaire ;
     5 · la suite de la visite : le petit trident se recompose, à l'encre.
   ──────────────────────────────────────────────────────────────────
   ALTERNANCE BLEU / BLANC (BRIEF-13, 09/10/2026) : on commence par la nuit,
   puis chaque grande section alterne, jusqu'au pied de page bleu.
     nuit  : en-tête et sept fenêtres portraits ;
     papier: la matrice des leviers (les trois barres à l'encre et au bleu) ;
     nuit  : ce qui distingue l'équipe (les traits de lumière) ;
     papier: recrutement (la huitième fenêtre, dessinée à l'encre) ;
     nuit  : CTA (le trident entier revient, en lumière) ;
     papier: poursuivre la visite (le petit trident à l'encre) ; nuit : pied de page.
   Le papier est une FEUILLE posée sur la nuit (coins arrondis, plus étroite en
   montant, bord à bord quand elle remplit l'écran), comme sur l'accueil. La nuée
   change de MATIÈRE au pixel près selon le fond survolé : lumière (mélange additif)
   sur la nuit, encre et bleu (mélange normal) sur le papier. La nav prend le ton
   du fond qu'elle survole.
   ════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Syne';font-weight:400 800;font-display:swap;src:url(/assets/syne.woff2) format("woff2")}
@font-face{font-family:'Manrope';font-weight:200 800;font-display:swap;src:url(/assets/manrope.woff2) format("woff2")}

/* ── 1. Tokens ───────────────────────────────────────────────────── */
:root{
  /* couleurs : nuit lisible, famille bleue, une seule lueur chaude rare */
  --nuit:#0B1428; --nuit-2:#101A33; --nuit-3:#0D1730;
  --bleu:#2563EB; --bleu-1:#1D4ED8; --bleu-2:#3B82F6; --bleu-3:#60A5FA; --bleu-4:#93C5FD; --bleu-5:#DBEAFE; --bleu-6:#EAF2FF;
  --or:#FFE9B8;
  --t1:#F1F6FF; --t2:rgba(234,242,255,.80); --t3:rgba(234,242,255,.66);
  --line:rgba(234,242,255,.10); --line-2:rgba(234,242,255,.18); --line-3:rgba(234,242,255,.32);
  --surface:rgba(15,25,50,.82); --surface-2:rgba(19,31,60,.92);
  /* rayons */
  --r-s:10px; --r-m:18px; --r-l:26px; --r-pill:999px;
  /* ombres et lueurs */
  --sh-card:0 40px 80px -46px rgba(2,6,20,.95);
  --glow-btn:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(37,99,235,.75),0 14px 36px -12px rgba(37,99,235,.9);
  --glow-btn-on:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(6,18,58,.4),0 0 0 1px rgba(96,165,250,.95),0 18px 48px -10px rgba(59,130,246,1);
  /* espacements */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2.5rem; --s-5:4rem;
  --sec:clamp(3.25rem,6vw,5.5rem);
  --wrap:75rem; --gut:clamp(1rem,4vw,2.5rem); --nav:72px;
  /* durées et courbes */
  --d-1:.3s; --d-2:.6s; --d-3:1.1s;
  --ease:cubic-bezier(.22,.8,.2,1); --ease-io:cubic-bezier(.65,0,.25,1);
  /* typo */
  --syne:'Syne',system-ui,sans-serif; --man:'Manrope',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--nuit);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--nuit);color:var(--t1);font:400 1.0625rem/1.7 var(--man);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(37,99,235,.55);color:#fff}
a{color:inherit;text-decoration:none}
svg,canvas{display:block}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--syne);color:var(--t1)}
:focus-visible{outline:2px solid var(--bleu-4);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:400;padding:.7rem 1rem;border-radius:var(--r-s);background:var(--bleu);color:#fff;font-weight:600}
.skip:focus{top:1rem}
main,.foot{position:relative;z-index:1}
main{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--nav) + 1rem)}

/* La nuée : un seul canvas fixe, posé SUR le contenu en mode écran (le noir
   ne change rien, la lumière s'ajoute) ; un masque calculé sur les rectangles
   de texte l'efface partout où il y a quelque chose à lire. */
.nuee{position:fixed;inset:0;z-index:5;width:100%;height:100%;pointer-events:none;opacity:0;mix-blend-mode:screen;transition:opacity 1.2s var(--ease)}
.is-gl .nuee{opacity:1}
/* ALTERNANCE · deuxième canvas, même nuée : l'encre. Mélange normal (jamais
   d'addition, jamais de halo gris) ; chaque grain choisit sa matière selon le
   fond qu'il survole : lumière sur la nuit, encre sur le papier. */
.nuee-ink{mix-blend-mode:normal}
/* Le cosmos : fond fixe de chaque univers (couleur, lueur, profondeur),
   interpolé au défilement ; une lueur de tunnel s'ouvre pendant la plongée. */
.cosmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--u-bg,#0B1428)}
.cosmos::before{content:"";position:absolute;inset:-10%;
  background:radial-gradient(var(--u-gr,46%) var(--u-gr,46%) at var(--u-gx,70%) var(--u-gy,48%),var(--u-gl,rgba(37,99,235,.16)),transparent 72%)}
.cosmos::after{content:"";position:absolute;inset:0;opacity:var(--tun,0);
  background:radial-gradient(34% 34% at 50% 50%,rgba(147,197,253,.16),rgba(37,99,235,.08) 45%,transparent 72%)}
/* grain très fin : la matière du fond */
.cosmos i{position:absolute;inset:0;opacity:.5;background:radial-gradient(rgba(234,242,255,.05) .6px,transparent .9px) 0 0/3px 3px}
/* profondeur du contenu : piloté par le défilement (data-depth) */
[data-depth]{will-change:transform,opacity}

/* ── 3. Mise en page ─────────────────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.sec{position:relative;padding-block:var(--sec)}

/* ── 3 bis. ALTERNANCE : la feuille de papier ──────────────────────
   Une section claire est une feuille posée sur la nuit : coins arrondis,
   un peu plus étroite que l'écran quand elle monte ; elle s'élargit
   jusqu'aux bords quand elle remplit l'écran, puis se resserre en sortant
   (masque clip-path piloté au défilement, --sx : aucune remise en page).
   Sur la feuille, les jetons de la nuit s'inversent : texte encre, filets
   d'encre, accents bleu marque. */
.paper{
  --t1:#0F172A; --t2:#334155; --t3:#56607A;
  --line:rgba(15,23,42,.10); --line-2:rgba(15,23,42,.18); --line-3:rgba(15,23,42,.34);
  --bleu-3:#2563EB; --bleu-4:#1D4ED8; --bleu-5:#0F172A; --pap:#F6F9FF;
  position:relative;z-index:2;color:var(--t1);background:var(--pap);
  clip-path:inset(0 var(--sx,0px) round var(--sr,40px))}
.paper ::selection{background:rgba(37,99,235,.2);color:#0F172A}
.paper :focus-visible{outline-color:#1D4ED8}
/* l'aube : juste au-dessus d'une feuille, la nuit s'éclaire un peu (la lumière du papier qui arrive) */
.dawn{position:relative;z-index:1;height:0;pointer-events:none}
.dawn::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:clamp(120px,22vh,220px);
  background:radial-gradient(60% 100% at 50% 100%,rgba(147,197,253,.16),rgba(96,165,250,.05) 55%,transparent 80%)}
/* trois papiers : blanc bleuté sous les barres, blanc franc, ciel pour la fin */
.skills.paper{--pap:#F8FAFF;background:radial-gradient(64% 40% at 50% 12%,#E6EFFF,rgba(234,242,255,0) 70%),linear-gradient(180deg,#F6F9FF,#FBFCFF 60%)}
.join.paper{--pap:#FFFFFF}
.suite.paper{--pap:#F3F7FF;background:linear-gradient(180deg,#EAF2FF,#F6F9FF 52%)}
/* composants sur papier : on éteint les lueurs (sur clair, une lueur devient un halo gris) */
.paper .eyebrow::before{filter:none}
.paper .link{border-bottom-color:rgba(29,78,216,.3)}
.paper .btn-ghost{background:#fff;box-shadow:0 10px 24px -18px rgba(15,23,42,.35)}
.paper .btn-ghost:hover{background:#F6F9FF;border-color:var(--line-3)}

/* ── 4. Composants ───────────────────────────────────────────────── */
/* c-eyebrow : sur-titre, précédé de l'atome « trois points » (le trident en lumière) */
.eyebrow{display:flex;align-items:center;gap:.75rem;font:650 .72rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--bleu-4)}
.eyebrow::before{content:"";flex:none;width:15px;height:11px;filter:drop-shadow(0 0 4px rgba(96,165,250,.9));
  background:radial-gradient(circle at 2.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px),radial-gradient(circle at 7.5px 3px,var(--bleu-3) 1.7px,transparent 2.2px),radial-gradient(circle at 12.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px)}
/* c-titre */
.h2{margin-top:1.15rem;font-weight:560;font-size:clamp(2.1rem,4.4vw,3.8rem);line-height:1.04;letter-spacing:-.032em}
.lead{margin-top:1.35rem;max-width:40rem;font-size:clamp(1rem,1.25vw,1.12rem);color:var(--t2)}
.sec-head{max-width:46rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lead{margin-inline:auto}

/* c-bouton : la lumière se pose là où est le curseur (--mx/--my) */
.btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;height:3.3rem;padding:0 1.65rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  font:650 .95rem/1 var(--man);letter-spacing:.01em;color:#fff;white-space:nowrap;
  background:linear-gradient(180deg,#3B7BF5 0%,#2563EB 52%,#1F56D8 100%);box-shadow:var(--glow-btn);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.34),transparent 62%)}
.btn:hover{transform:translateY(-1px);box-shadow:var(--glow-btn-on)}
.btn:hover::before{opacity:1}
.btn:active{transform:translateY(0)}
.btn-sm{height:2.55rem;padding:0 1.15rem;font-size:.85rem}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;height:3.3rem;padding:0 1.45rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.35);font:600 .95rem/1 var(--man);color:var(--t1);transition:border-color .4s,background-color .4s}
.btn-ghost svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.btn-ghost:hover{border-color:var(--line-3);background:rgba(234,242,255,.05)}
.btn-ghost:hover svg{transform:translateY(2px)}
.link{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 0;font:650 .88rem/1.2 var(--man);color:var(--bleu-4);border-bottom:1px solid rgba(147,197,253,.34);transition:color .3s,border-color .3s}
.link svg{width:12px;height:12px;transition:transform .45s var(--ease)}
.link:hover{color:var(--t1);border-color:var(--t1)}
.link:hover svg{transform:translateX(3px)}

/* c-carte : surface nuit, liseré, lueur localisée qui suit le curseur */
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(180deg,rgba(21,33,64,.88),rgba(13,22,45,.9));box-shadow:var(--sh-card)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(96,165,250,.13),transparent 62%)}
.card:hover::before{opacity:1}
.card::after{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(234,242,255,.3),transparent)}

/* Révélations (états cachés seulement avec JS) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) calc(var(--d,0)*1s),transform 1.1s var(--ease) calc(var(--d,0)*1s)}
.js .rv.in{opacity:1;transform:none}
.safe .rv,.safe .h1-l{opacity:1!important;transform:none!important;filter:none!important}

/* Badge DA */
.da-badge{position:absolute;top:calc(var(--nav) + 12px);right:var(--gut);z-index:60;padding:.38rem .7rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.6);font:650 .62rem/1 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--t3);transition:color .3s,border-color .3s}
.da-badge:hover{color:var(--t1);border-color:var(--line-3)}

/* ── 5. Navigation ───────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:100;height:var(--nav);border-bottom:1px solid transparent;transition:background-color .5s,border-color .5s,-webkit-backdrop-filter .5s,backdrop-filter .5s}
.nav.is-scrolled,.nav.is-open{background:rgba(11,20,40,.82);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom-color:var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:1.25rem}
.lockup{display:flex;align-items:center;gap:.7rem;margin-right:auto;border-radius:8px}
.lk-mark{width:30px;height:30px;flex:none}
.lk-txt{display:flex;flex-direction:column;gap:.32rem}
.lk-name{font:700 1rem/1 var(--syne);letter-spacing:.3em;color:var(--t1)}
.lk-sub{font:650 .5rem/1 var(--man);letter-spacing:.24em;color:var(--t3);white-space:nowrap}
.menu ul{display:flex;align-items:center;gap:.1rem;list-style:none;margin:0;padding:0}
.menu a,.sub-btn{display:inline-flex;align-items:center;gap:.35rem;height:2.5rem;padding:0 .66rem;border:0;border-radius:var(--r-pill);background:none;cursor:pointer;font:500 .875rem/1 var(--man);color:var(--t2);transition:color .3s}
.menu a:hover,.sub-btn:hover,.menu a[aria-current="page"],.sub-btn[aria-expanded="true"]{color:var(--t1)}
.sub-btn svg{width:10px;height:10px;transition:transform .35s var(--ease)}
.has-sub{position:relative}
.has-sub:hover .sub-btn svg,.sub-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub{position:absolute;top:calc(100% + .6rem);left:50%;width:18rem;margin-left:-9rem;padding:.5rem;border-radius:var(--r-m);background:rgba(16,26,51,.97);border:1px solid var(--line-2);box-shadow:0 30px 70px -24px rgba(2,6,20,.85);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s linear .35s}
.sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.has-sub:hover .sub,.has-sub:focus-within .sub,.sub-btn[aria-expanded="true"]+.sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu .sub a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;height:auto;padding:.8rem .95rem;border-radius:12px}
.menu .sub a:hover{background:rgba(234,242,255,.05)}
.sub b{font:600 .95rem/1 var(--syne);color:var(--t1)}
.sub span{font:400 .78rem/1.3 var(--man);color:var(--t3)}
.burger{display:none;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:50%;width:15px;height:1.5px;margin-left:-7.5px;background:var(--t1);border-radius:1px;transition:transform .45s var(--ease)}
.burger span:first-child{top:calc(50% - 3.5px)}
.burger span:last-child{top:calc(50% + 2.5px)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg)}
.mnav{position:absolute;top:var(--nav);left:0;right:0;height:calc(100svh - var(--nav));overflow:auto;overscroll-behavior:contain;padding:.5rem var(--gut) 2rem;background:var(--nuit);border-top:1px solid var(--line)}
.mnav ul{list-style:none;margin:0;padding:0}
.mnav a{display:flex;justify-content:space-between;align-items:center;padding:.95rem 0;border-bottom:1px solid var(--line);font:500 1.1rem/1.2 var(--syne);color:var(--t1)}
.mnav .mn-sub a{padding-left:1rem;font:500 .95rem/1.2 var(--man);color:var(--t2)}
.mnav .btn{width:100%;margin-top:1.4rem}
/* la nav s'adapte au fond qu'elle survole : encre sur papier, clair sur nuit */
.nav .lat{fill:var(--lat,#EAF2FF);transition:fill .5s}
.nav,.nav .lk-name,.nav .lk-sub,.menu a,.sub-btn{transition:color .5s,background-color .5s,border-color .5s}
.nav.on-p{--t1:#0F172A;--t2:#334155;--t3:#56607A;--line:rgba(15,23,42,.09);--line-2:rgba(15,23,42,.18);--line-3:rgba(15,23,42,.34);--lat:#0F172A}
.nav.on-p.is-scrolled{background:rgba(246,249,255,.84);border-bottom-color:rgba(15,23,42,.08)}
.nav.on-p .sub{background:#fff;border-color:rgba(15,23,42,.1);box-shadow:0 30px 60px -28px rgba(15,23,42,.35)}
.nav.on-p .menu .sub a:hover{background:#F6F9FF}
.nav.on-p :focus-visible{outline-color:#1D4ED8}
/* menu ouvert : toujours la nuit */
.nav.is-open{--t1:#F1F6FF;--t2:rgba(234,242,255,.80);--t3:rgba(234,242,255,.66);--line:rgba(234,242,255,.10);--line-2:rgba(234,242,255,.18);--lat:#EAF2FF;background:rgba(11,20,40,.96)}

/* ── 6. Hero ─────────────────────────────────────────────────────── */
.h1{font-weight:620;font-size:clamp(3.2rem,7.2vw,6.9rem);line-height:.95;letter-spacing:-.04em}
.h1-l{display:block}
.h1-l.is-blue{color:var(--bleu-3)}
/* le titre « se condense » en même temps que la nuée : lisible dès la première image */
.js .h1-l{opacity:.35;filter:blur(5px);letter-spacing:.05em;font-weight:480}
.lit .h1-l{opacity:1;filter:none;letter-spacing:-.04em;font-weight:620;transition:opacity .5s var(--ease),filter .9s var(--ease),letter-spacing 1.5s var(--ease-io),font-weight 1.5s var(--ease-io)}
.lit .h1-l+.h1-l{transition-delay:.12s}
.hero-sub{margin-top:1.6rem;max-width:31rem;font:560 clamp(1.08rem,1.45vw,1.28rem)/1.42 var(--syne);letter-spacing:-.008em;color:var(--bleu-5)}
.hero-p{margin-top:1rem;max-width:33rem;color:var(--t2)}
.fb{position:absolute;left:50%;top:50%;height:80%;width:auto;transform:translate(-50%,-52%)}
.is-gl .fb{display:none}

/* En-tête de page intérieure : compact, porté par le titre ; le trident n'en est que la
   marque (petit, à gauche du titre). Le sujet, les portraits, commence aussitôt dessous. */
.portraits{padding-top:calc(var(--nav) + clamp(1.6rem,4.5vh,2.8rem))}
.ph{position:relative}
.h1{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.5rem);font-size:clamp(2.55rem,6.4vw,6rem);line-height:1}
.h1-mark{position:relative;flex:none;width:.62em;height:.92em}
.h1-mark .fb{height:100%;transform:translate(-50%,-50%)}
.ph-row{margin-top:clamp(1.1rem,2.6vh,1.8rem);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1rem clamp(2rem,6vw,6rem);align-items:start}
.ph .hero-sub{margin-top:0;max-width:20ch;font-size:clamp(1.35rem,2.3vw,2rem);line-height:1.15;letter-spacing:-.02em;color:var(--t1)}
.ph .hero-sub .is-blue{display:block;color:var(--bleu-3)}
.ph .hero-p{margin-top:0;max-width:36rem}
.hero-note{margin-top:.75rem;max-width:36rem;font-size:.9rem;line-height:1.62;color:var(--t3)}
.crumb{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;font:600 .7rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.crumb a{color:var(--t3);transition:color .3s}
.crumb a:hover{color:var(--t1)}
.crumb [aria-current]{color:var(--bleu-4)}
.mnav a[aria-current="page"]{color:var(--bleu-4)}

/* ── 7. Les portraits : sept hautes fenêtres ─────────────────────────
   Base (sans JS, tablette, mobile) : un récit par membre, fenêtre photo + texte,
   tout est lisible. Desktop avec JS : les sept fenêtres côte à côte, dressées comme
   les barres du trident ; celle qu'on lit s'élargit et déplie le récit à côté du
   portrait (le texte garde une largeur fixe : il ne se recompose jamais). */
.pt-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem 2rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3.4vh,2.4rem);padding-top:1rem;border-top:1px solid var(--line)}
.pt-h2{display:flex;align-items:center;gap:.75rem;font:650 .68rem/1 var(--man);letter-spacing:.24em;text-transform:uppercase;color:var(--bleu-4)}
.pt-h2::before{content:"";flex:none;width:15px;height:11px;filter:drop-shadow(0 0 4px rgba(96,165,250,.9));
  background:radial-gradient(circle at 2.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px),radial-gradient(circle at 7.5px 3px,var(--bleu-3) 1.7px,transparent 2.2px),radial-gradient(circle at 12.5px 7.5px,var(--bleu-5) 1.4px,transparent 1.9px)}
.pt-hint{display:flex;align-items:center;gap:.7rem;font:650 .64rem/1.4 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)}
.pt-hint::before{content:"";width:1.6rem;height:1px;background:linear-gradient(90deg,transparent,var(--bleu-3))}
.pt-hint-d{display:none}
.team{margin-top:clamp(1rem,2.2vh,1.5rem);display:grid;gap:clamp(2.6rem,6vw,4rem)}
.pt{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,4vw,3rem);align-items:start;border-radius:var(--r-l)}
/* la fenêtre photo : bichromie légère au repos (bleu nuit et bleu pâle), couleur douce une fois lue */
.pt-ph{position:relative;isolation:isolate;overflow:hidden;width:54%;height:clamp(440px,60vw,580px);border-radius:var(--r-l);border:1px solid rgba(234,242,255,.16);background:#14224A;
  box-shadow:0 50px 90px -50px rgba(2,6,20,.95);transition:width 1.1s var(--ease-io),border-color .6s var(--ease)}
.pt-ph img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) 30%;
  filter:grayscale(1) contrast(1.04) brightness(.88);transition:filter 1.3s var(--ease),transform 1.8s var(--ease)}
.pt-ph::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#3F74E0 0%,#1B3C9A 60%,#0E1E52 100%);mix-blend-mode:color;opacity:.6;transition:opacity 1.3s var(--ease)}
.pt-ph::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(11,20,40,.82) 0%,rgba(11,20,40,.2) 34%,transparent 52%);transition:opacity .8s var(--ease)}
.pt.is-on .pt-ph{width:100%;border-color:rgba(147,197,253,.4)}
.pt.is-on .pt-ph img{filter:grayscale(.1) saturate(.92) contrast(1.02)}
.pt.is-on .pt-ph::after{opacity:.14}
.pt.is-on .pt-ph::before{opacity:.35}
/* l'étiquette verticale de la fenêtre étroite : numéro en haut, nom en bas */
.pt-tag{position:absolute;left:0;top:0;z-index:3;width:54%;height:clamp(440px,60vw,580px);margin:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1.25rem 0 1.4rem;pointer-events:none;transition:opacity .45s var(--ease)}
.pt-k::before,.pt-v::before{content:attr(data-t)}
.pt-k{font:650 .64rem/1 var(--man);letter-spacing:.22em;color:rgba(234,242,255,.82)}
.pt-v{writing-mode:vertical-rl;transform:rotate(180deg);font:600 1.02rem/1 var(--syne);letter-spacing:.01em;color:#fff;white-space:nowrap;text-shadow:0 1px 12px rgba(11,20,40,.6)}
.pt.is-on .pt-tag{opacity:0}
/* le récit */
.pt-txt{display:flex;flex-direction:column;min-width:0}
.pt-n{font:650 .64rem/1.3 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--bleu-4)}
.pt-name{margin-top:.75rem;font-weight:600;font-size:clamp(1.7rem,2.3vw,2.15rem);line-height:1.04;letter-spacing:-.026em}
.pt-role{margin-top:.6rem;font:650 .68rem/1.5 var(--man);letter-spacing:.16em;text-transform:uppercase;color:var(--t2)}
.pt-bio{margin-top:1.15rem;display:grid;gap:.7rem;font-size:.95rem;line-height:1.66;color:var(--t2)}
.pt-bio p:first-child{color:var(--t1)}
.pt-foot{margin-top:1.3rem;padding-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap;border-top:1px solid var(--line)}
.pt-skills{font:600 .76rem/1.5 var(--man);color:var(--bleu-5)}
.pt-li{flex:none}
.pt-bio a,.pt-skills a{color:var(--bleu-4);border-bottom:1px solid rgba(147,197,253,.38);transition:color .3s,border-color .3s}
.pt-bio p:first-child a{color:inherit}
.pt-bio a:hover,.pt-skills a:hover{color:#fff;border-color:#fff}
.form-ko{font-size:.94rem;color:#FCA5A5}
.form-ko a{color:var(--t1);border-bottom:1px solid currentColor}
/* arrivée : chaque fenêtre vient de la profondeur, puis la photo monte du sol comme une barre de lumière */
.js .pt-ph,.js .pt-tag{opacity:0;transform:perspective(1400px) translate3d(0,26px,-460px);filter:blur(6px)}
.js .pt-ph img{clip-path:inset(100% 0 0 0);transform:scale(1.12)}
.pt.is-in .pt-ph,.pt.is-in .pt-tag{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease) calc(.15s + var(--o)*.11s),transform 1.4s cubic-bezier(.16,1,.3,1) calc(.15s + var(--o)*.11s),filter 1.2s var(--ease) calc(.15s + var(--o)*.11s),width 1.1s var(--ease-io),border-color .6s var(--ease)}
.pt.is-in .pt-ph img{clip-path:inset(0 0 0 0);transform:none;transition:clip-path 1.5s cubic-bezier(.65,0,.25,1) calc(.45s + var(--o)*.11s),transform 2.2s var(--ease) calc(.45s + var(--o)*.11s),filter 1.3s var(--ease)}
.pt.is-in.is-on .pt-tag{opacity:0;transition:opacity .45s var(--ease)}
.team.is-done .pt-ph{transition:width 1.1s var(--ease-io),border-color .6s var(--ease)}
.team.is-done .pt-ph img{transition:filter 1.3s var(--ease),transform 1.8s var(--ease)}

/* Desktop (JS) : les sept fenêtres côte à côte ; --ow = largeur de la fenêtre ouverte */
@media (min-width:1180px){
  .js:not(.safe) .pt-hint-d{display:inline}
  .js:not(.safe) .pt-hint-m{display:none}
  .js:not(.safe) .team{--g:9.4;--pf:.355;--gap:10px;--cw:min(calc(100vw - 2*var(--gut)),var(--wrap));--ow:calc((var(--cw) - 6*var(--gap))*var(--g)/(6 + var(--g)));
    display:flex;gap:var(--gap);height:clamp(640px,78vh,710px)}
  .js:not(.safe) .pt{display:block;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;border:1px solid rgba(234,242,255,.14);
    background:linear-gradient(180deg,rgba(21,33,64,.94),rgba(12,21,44,.97));box-shadow:0 50px 90px -50px rgba(2,6,20,.95);
    opacity:0;transform:perspective(1400px) translate3d(0,26px,-460px);filter:blur(6px)}
  .js:not(.safe) .pt.is-in{opacity:1;transform:none;filter:none;transition:opacity 1s var(--ease) calc(.15s + var(--o)*.11s),transform 1.4s cubic-bezier(.16,1,.3,1) calc(.15s + var(--o)*.11s),filter 1.2s var(--ease) calc(.15s + var(--o)*.11s),flex-grow 1.05s var(--ease-io),border-color .6s var(--ease)}
  .js:not(.safe) .team.is-done .pt{transition:flex-grow 1.05s var(--ease-io),border-color .6s var(--ease)}
  .js:not(.safe) .pt.is-on{flex-grow:var(--g);cursor:default;border-color:rgba(147,197,253,.42)}
  .js:not(.safe) .pt:not(.is-on):hover{border-color:rgba(147,197,253,.3)}
  .js:not(.safe) .pt:focus-visible{outline:2px solid var(--bleu-4);outline-offset:4px}
  .js:not(.safe) .pt-ph,.js:not(.safe) .pt-tag{position:absolute;left:0;top:0;bottom:0;height:auto;width:100%;opacity:1;transform:none;filter:none}
  .js:not(.safe) .pt-ph{border:0;border-radius:0;box-shadow:none}
  .js:not(.safe) .pt.is-on .pt-ph{width:calc(var(--ow)*var(--pf))}
  .js:not(.safe) .pt:not(.is-on):hover .pt-ph::after{opacity:.5}
  .js:not(.safe) .pt-ph::before{background:linear-gradient(0deg,rgba(11,20,40,.9) 0%,rgba(11,20,40,.25) 30%,transparent 48%,transparent 82%,rgba(11,20,40,.5) 100%)}
  /* le récit se déplie à droite du portrait, à largeur fixe */
  .js:not(.safe) .pt-txt{position:absolute;top:0;bottom:0;left:calc(var(--ow)*var(--pf));width:calc(var(--ow)*(1 - var(--pf)));padding:1.6rem 2rem 1.5rem 2.1rem;
    opacity:0;transform:translateX(26px);pointer-events:none;transition:opacity .35s var(--ease),transform .6s var(--ease)}
  .js:not(.safe) .pt.is-on .pt-txt{opacity:1;transform:none;pointer-events:auto;transition:opacity .8s var(--ease) .38s,transform 1s var(--ease) .32s}
  .js:not(.safe) .pt-name{font-size:clamp(1.7rem,2.2vw,2.05rem)}
  .js:not(.safe) .pt-bio{margin-top:.95rem;gap:.6rem;font-size:.865rem;line-height:1.58}
  .js:not(.safe) .pt-bio p:first-child{font-size:.95rem;line-height:1.55}
  .js:not(.safe) .pt-foot{margin-top:auto}
}
/* entre 1180 et 1320 px : la fenêtre ouverte prend un peu plus de place, la photo un peu moins */
@media (min-width:1180px) and (max-width:1320px){
  .js:not(.safe) .team{--g:10.5;--pf:.3}
}

/* ── 8. Les expertises : trois barres, et qui les porte ── */
.mx{--cols:minmax(0,1.6fr) repeat(3,minmax(0,1fr));margin-top:clamp(1.4rem,3vw,2.2rem)}
.mx-top{display:grid;grid-template-columns:var(--cols);align-items:end}
.mx-key{grid-column:1;list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.7rem;font:600 .64rem/1 var(--man);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.mx-key li{display:flex;align-items:center;gap:.75rem}
.mx-key .dot{width:9px;height:9px}
.mx-key .mx-line{position:static;display:block;width:1.6rem}
.mx-stage{grid-column:2/5;position:relative;height:clamp(180px,25vh,240px)}
.mx-stage .fb{left:50%;top:50%;width:100%;height:84%;transform:translate(-50%,-50%)}
.mx-t{display:block;width:100%;border-collapse:collapse}
.mx-t thead,.mx-t tbody{display:block}
.mx-t tr{display:grid;grid-template-columns:var(--cols);align-items:stretch}
.mx-h th{padding:.9rem .4rem 1.1rem;text-align:center;font-weight:inherit;border-bottom:1px solid var(--line-2)}
.mx-h th a{display:inline-flex;flex-direction:column;align-items:center;gap:.4rem;padding:.2rem .4rem;border-radius:10px;font:600 clamp(1.1rem,1.5vw,1.35rem)/1 var(--syne);letter-spacing:-.01em;color:var(--t1);transition:color .3s}
.mx-h th a:hover{color:var(--bleu-4)}
.mx-h small{font:650 .58rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.mx-n{font:650 .58rem/1 var(--man);letter-spacing:.24em;color:var(--bleu-4)}
.mx-r{position:relative;border-bottom:1px solid var(--line);transition:background-color .5s var(--ease)}
.mx-r th{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem .8rem .2rem;text-align:left;font-weight:inherit;min-width:0}
.mx-who{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.mx-who b{font:600 1.02rem/1.15 var(--syne);color:var(--t1);letter-spacing:-.01em}
.mx-who small{font-size:.76rem;line-height:1.4;color:var(--t3);transition:color .4s}
.mx-r td{display:flex;align-items:center;justify-content:center;padding:.8rem 0}
.mx-r.is-hi,.mx-r:hover{background:linear-gradient(90deg,rgba(234,242,255,.045),rgba(234,242,255,.02))}
.mx-r.is-hi .mx-who small{color:var(--t2)}
/* avatar : le visage centré dans un cercle, sans déformation */
.av{position:relative;flex:none;display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#14224A;box-shadow:0 0 0 1px rgba(234,242,255,.2)}
.av img{position:absolute;max-width:none;width:240%;height:240%;left:calc(50% - 2.4*var(--fx,50%));top:calc(50% - 2.4*var(--fy,30%));object-fit:cover;filter:grayscale(.2) saturate(.85)}
.dot{display:block;width:12px;height:12px;border-radius:50%;background:var(--bleu-5);box-shadow:0 0 0 4px rgba(147,197,253,.07),0 0 14px rgba(96,165,250,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .5s}
td[data-bar="0"] .dot{background:var(--bleu-3)}
.mx-r.is-hi .dot,.mx[data-col="0"] td[data-bar="0"] .dot,.mx[data-col="1"] td[data-bar="1"] .dot,.mx[data-col="2"] td[data-bar="2"] .dot{transform:scale(1.4);box-shadow:0 0 0 5px rgba(147,197,253,.12),0 0 22px rgba(96,165,250,.95)}
.mx[data-col] .mx-h th[data-bar] a{color:var(--t3)}
.mx[data-col="0"] .mx-h th[data-bar="0"] a,.mx[data-col="1"] .mx-h th[data-bar="1"] a,.mx[data-col="2"] .mx-h th[data-bar="2"] a{color:var(--t1)}
/* pilotage : une ligne qui traverse les trois leviers */
.mx-span{grid-column:2/5;position:relative;display:flex;align-items:center;justify-content:center;padding:.8rem 0}
.mx-line{position:absolute;left:16.67%;right:16.67%;top:50%;height:1px;transform-origin:0 50%;background:linear-gradient(90deg,var(--bleu-5),var(--bleu-3) 50%,var(--bleu-5));box-shadow:0 0 10px rgba(96,165,250,.6);opacity:.7}
.mx-span .mx-line::before,.mx-span .mx-line::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:var(--bleu-5);box-shadow:0 0 10px rgba(96,165,250,.8)}
.mx-span .mx-line::before{left:-3px}.mx-span .mx-line::after{right:-3px}
.mx-lbl{position:relative;padding:.4rem .85rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--u-bg,#0B1428);font:650 .62rem/1.35 var(--man);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);text-align:center;max-width:90%}
.mx-r.is-hi .mx-line{opacity:1}
.mx-note{margin-top:1.1rem;font-size:.86rem;color:var(--t3)}
/* arrivée : les points s'allument ligne après ligne, la ligne de pilotage se trace */
.js .mx .dot:not(.mx-key .dot){transform:scale(0)}
.js .mx .mx-span .mx-line{transform:scaleX(0)}
.js .mx.is-in .dot:not(.mx-key .dot){transform:scale(1);transition:transform .7s cubic-bezier(.3,1.6,.5,1) calc(.25s + var(--d)*1.6s),box-shadow .5s var(--ease)}
.js .mx.is-in .mx-span .mx-line{transform:none;transition:transform 1.2s var(--ease) calc(.25s + var(--d)*1.6s)}
.js .mx.is-in .mx-r.is-hi .dot,.js .mx.is-in[data-col="0"] td[data-bar="0"] .dot,.js .mx.is-in[data-col="1"] td[data-bar="1"] .dot,.js .mx.is-in[data-col="2"] td[data-bar="2"] .dot{transform:scale(1.4);transition-delay:0s}
.is-gl .mx-stage .fb{display:none}
/* la matrice sur papier : points d'encre (SEO, Média) et de bleu marque (GEO), comme
   les barres de la nuée ; un anneau bleu léger remplace la lueur */
.paper .dot{box-shadow:0 0 0 4px rgba(37,99,235,.06)}
.paper .mx-r.is-hi .dot,.paper .mx[data-col="0"] td[data-bar="0"] .dot,.paper .mx[data-col="1"] td[data-bar="1"] .dot,.paper .mx[data-col="2"] td[data-bar="2"] .dot{box-shadow:0 0 0 5px rgba(37,99,235,.14),0 6px 14px -4px rgba(37,99,235,.45)}
.paper .mx-r.is-hi,.paper .mx-r:hover{background:linear-gradient(90deg,rgba(37,99,235,.06),rgba(37,99,235,.015))}
.paper .mx-line{background:linear-gradient(90deg,#0F172A,#2563EB 50%,#0F172A);box-shadow:none;opacity:.55}
.paper .mx-r.is-hi .mx-line{opacity:1}
.paper .mx-span .mx-line::before,.paper .mx-span .mx-line::after{background:#0F172A;box-shadow:none}
.paper .mx-lbl{background:var(--pap);border-color:var(--line-2)}
.paper .av{background:#DCE6F7;box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.paper .mx-h th a:hover{color:#2563EB}

/* ── 9. Ce qui distingue l'équipe : un trait de lumière sous chaque idée ── */
.dl{list-style:none;margin:clamp(1.8rem,4vw,2.8rem) 0 0;padding:0;border-top:1px solid var(--line)}
.d{display:grid;grid-template-columns:4rem minmax(0,1.12fr) minmax(0,.88fr);gap:1rem clamp(1.5rem,4vw,3.5rem);align-items:start;padding:clamp(1.6rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.d-n{padding-top:.75rem;font:650 .68rem/1 var(--man);letter-spacing:.24em;color:var(--bleu-4)}
.d-t{font-weight:560;font-size:clamp(1.4rem,2.3vw,2.05rem);line-height:1.12;letter-spacing:-.022em;max-width:21ch}
.fig-ul{display:block;height:1px;margin-top:1.1rem;width:min(13rem,100%);background:linear-gradient(90deg,var(--bleu-3),rgba(96,165,250,0));transform-origin:0 50%}
.js .fig-ul{transform:scaleX(0);transition:transform 1.4s var(--ease) calc(var(--d,0)*1s + .3s)}
.js .d.in .fig-ul{transform:none}
.is-gl .fig-ul{opacity:.45}
.d-side{display:flex;flex-direction:column;gap:1rem}
.d-side p{font-size:.95rem;line-height:1.66;color:var(--t2)}
.faces{display:flex}
.faces .av{width:40px;height:40px;box-shadow:0 0 0 2px var(--u-bg,#0B1428),0 0 0 3px rgba(147,197,253,.28)}
.faces .av+.av{margin-left:-9px}

/* ── 10. Recrutement : une huitième fenêtre, vide ── */
.join-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.join-traits{list-style:none;margin:1.5rem 0 1.8rem;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.join-traits li{padding:.6rem 1rem;border-radius:var(--r-pill);border:1px solid var(--line-2);background:rgba(11,20,40,.35);font:600 .8rem/1 var(--man);color:var(--t1)}
.btn-ghost .ar{transition:transform .5s var(--ease)}
.btn-ghost:hover .ar{transform:translateX(3px)}
.join-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(.35rem,.8vw,.6rem);height:clamp(300px,46vh,420px)}
.jb{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(234,242,255,.12);
  background:linear-gradient(180deg,rgba(63,116,224,.62),rgba(22,51,127,.62)),var(--img) var(--fx,50%) 18%/auto 112% no-repeat;background-blend-mode:color,normal;filter:saturate(.8) brightness(.9)}
.jb::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,20,40,.55),transparent 45%)}
.jb.is-empty{background:radial-gradient(80% 50% at 50% 100%,rgba(37,99,235,.22),transparent 70%);border:1px dashed rgba(147,197,253,.45);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:1rem 0 1.2rem}
.jb.is-empty::after{display:none}
.is-gl .jb.is-empty{border-style:solid;border-color:rgba(147,197,253,.16)}
.jb-k{font:650 .62rem/1 var(--man);letter-spacing:.2em;color:var(--or)}
.jb-v{writing-mode:vertical-rl;transform:rotate(180deg);font:600 .9rem/1 var(--syne);color:var(--t1);white-space:nowrap}
.js .jb{clip-path:inset(100% 0 0 0 round 14px)}
.join-row.in .jb{clip-path:inset(0 0 0 0 round 14px);transition:clip-path 1.4s cubic-bezier(.65,0,.25,1) calc(var(--j,0)*.09s)}
/* sur papier : la même bichromie, éclaircie (bleu marque et bleu ciel au lieu du cobalt
   profond), un pied à peine ombré, un liseré d'encre ; la place libre se dessine à l'encre */
.paper .join-traits li{background:#fff;box-shadow:0 8px 20px -16px rgba(15,23,42,.3)}
.paper .jb{border-color:rgba(15,23,42,.08);box-shadow:0 26px 40px -30px rgba(15,23,42,.45);
  background:linear-gradient(180deg,rgba(96,150,245,.6),rgba(29,78,216,.62)),var(--img) var(--fx,50%) 18%/auto 112% no-repeat;background-blend-mode:color,normal;filter:saturate(.85) brightness(1.04) contrast(1.02)}
.paper .jb::after{background:linear-gradient(0deg,rgba(15,23,42,.22),transparent 40%)}
.paper .jb.is-empty{background:radial-gradient(80% 50% at 50% 100%,rgba(37,99,235,.10),transparent 70%),#F6F9FF;border:1px dashed rgba(37,99,235,.5);box-shadow:none;filter:none}
.is-gl .paper .jb.is-empty{border-style:solid;border-color:rgba(37,99,235,.14)}
.paper .jb-k{color:#2563EB}
.paper .jb-v{color:#0F172A}

/* ── 12. Poursuivre la visite (papier, juste avant le pied de page) ──
   Section courte : trois portes, et le petit trident qui se recompose à l'encre. */
.suite{padding-block:clamp(3rem,5.5vw,4.75rem)}
.suite-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.suite-head{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 2rem}
.suite-head .eyebrow,.suite-head .h2{grid-column:1}
.suite .h2{font-size:clamp(1.9rem,3.4vw,3rem)}
.suite-obj{grid-column:2;grid-row:1/3;position:relative;width:clamp(84px,9vw,120px);height:clamp(130px,17vh,170px)}
.suite-obj .fb{height:88%}
.suite-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.suite-l a{display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;align-items:center;gap:.2rem 1rem;padding:1.15rem .2rem;border-bottom:1px solid var(--line-2);transition:background-color .4s var(--ease)}
.suite-l .s-n{grid-row:1/3;font:650 .64rem/1 var(--man);letter-spacing:.22em;color:#2563EB}
.suite-l b{font:600 clamp(1.15rem,1.6vw,1.35rem)/1.15 var(--syne);letter-spacing:-.015em;color:var(--t1);transition:color .3s}
.suite-l .s-d{grid-column:2;font-size:.9rem;line-height:1.5;color:var(--t2)}
.suite-l svg{grid-column:3;grid-row:1/3;width:16px;height:16px;color:#2563EB;transition:transform .5s var(--ease)}
.suite-l a:hover{background:linear-gradient(90deg,rgba(37,99,235,.06),rgba(37,99,235,0))}
.suite-l a:hover b{color:#2563EB}
.suite-l a:hover svg{transform:translateX(4px)}
.is-gl .suite-obj .fb{display:none}


/* ── 13. CTA final : compact et centré, un halo circule autour du formulaire ── */
/* on ressort de la matière : le trident entier revient, en petit, comme la marque
   du titre de l'en-tête (la boucle est bouclée), jamais en grand objet à côté du titre */
.cta{padding-block:clamp(3rem,6vw,5rem)}
.cta-grid{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-copy{width:100%;max-width:46rem;display:flex;flex-direction:column;align-items:center}
.cta .eyebrow{justify-content:center}
.cta .h2{margin-top:.9rem;font-size:clamp(2.4rem,5vw,4.4rem);letter-spacing:-.04em}
.cta .form{width:100%}
.cta-foot{align-items:center}
.cta-or{color:var(--or);text-shadow:0 0 28px rgba(255,233,184,.25)}
.cta-p{max-width:34rem;margin-top:1.1rem;color:var(--t2)}
.cta-obj{position:relative;order:-1;width:120px;height:clamp(110px,15vh,140px);margin-bottom:1.1rem}
.cta-obj::before{content:"";position:absolute;inset:-30% -60%;pointer-events:none;background:radial-gradient(closest-side,rgba(37,99,235,.2),rgba(37,99,235,.05) 60%,transparent)}
.cta-obj .fb{height:90%}
.form{margin:2rem 0 0;display:grid;gap:1rem}
.fields{width:100%;padding:.55rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:.55rem;border-radius:var(--r-l);
  background:rgba(16,26,51,.92);border:1px solid var(--line-2);box-shadow:inset 0 1px 0 rgba(234,242,255,.07),0 40px 80px -40px rgba(2,6,20,.9);transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
.is-gl .fields{box-shadow:inset 0 1px 0 rgba(234,242,255,.07),0 0 0 1px rgba(37,99,235,.12),0 0 48px -6px rgba(37,99,235,.32),0 40px 80px -40px rgba(2,6,20,.9)}
.fields.is-ready{border-color:rgba(147,197,253,.5);box-shadow:inset 0 1px 0 rgba(234,242,255,.1),0 0 0 1px rgba(59,130,246,.3),0 0 64px -4px rgba(59,130,246,.5),0 40px 80px -40px rgba(37,99,235,.55)}
.field{display:flex;flex-direction:column;gap:.42rem;padding:.72rem 1rem .74rem;text-align:left;border-radius:var(--r-m);background:rgba(11,20,40,.85);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.field:focus-within{border-color:rgba(96,165,250,.7);box-shadow:0 0 0 4px rgba(37,99,235,.22)}
.field label{font:700 .62rem/1 var(--man);letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.field input{width:100%;padding:0;border:0;outline:0;background:none;color:var(--t1);font:400 1rem/1.4 var(--man)}
.field input::placeholder{color:rgba(234,242,255,.45)}
.btn-cta{grid-column:1/-1;height:auto;min-height:3.6rem;padding:0 1.8rem;font-size:.98rem;border-radius:calc(var(--r-l) - .55rem)}
.btn-cta.is-charged{animation:charge 2.4s var(--ease-io) infinite}
@keyframes charge{0%,100%{box-shadow:var(--glow-btn)}50%{box-shadow:var(--glow-btn-on),0 0 60px -6px rgba(96,165,250,.7)}}
.form-ok{font-size:.94rem;color:var(--bleu-5)}
.cta-foot{margin-top:1.3rem;display:flex;flex-direction:column;gap:.3rem}
.reassure{font:550 .8rem/1.5 var(--man);letter-spacing:.04em;color:var(--t3)}
.cta-addr{font-style:normal;font:550 .8rem/1.5 var(--man);letter-spacing:.04em;color:var(--t3)}

/* (FAQ retirée : pas de FAQ sur la page Équipe) */

/* ── 15. Pied de page ────────────────────────────────────────────── */
.foot{padding:clamp(3.5rem,6vw,5rem) 0 2rem;background:rgba(11,20,40,.7)}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:2rem}
.foot-brand p{margin-top:1.1rem;max-width:18rem;font-size:.88rem;line-height:1.6;color:var(--t3)}
.foot h2{font:700 .68rem/1 var(--man);letter-spacing:.22em;text-transform:uppercase;color:var(--t3)}
.foot ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.65rem;font-size:.9rem}
.foot ul a{color:var(--t2);transition:color .3s}
.foot ul a:hover{color:var(--t1)}
.foot address{margin-top:1.2rem;font-style:normal;font-size:.9rem;line-height:1.7;color:var(--t2)}
.foot-bar{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.8rem;color:var(--t3)}
.foot-bar a:hover{color:var(--t1)}

/* ── 16. Responsive ──────────────────────────────────────────────── */
@media (max-width:1179px){.pt{--o:0!important}}
@media (max-width:1240px){
  .menu{display:none}
  .burger{display:block}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:980px){
  .mx{--cols:minmax(0,1.5fr) repeat(3,minmax(0,.62fr))}
  .mx-who small{font-size:.72rem}
  .d{grid-template-columns:3rem minmax(0,1fr)}
  .d-side{grid-column:2}
  .join-grid{grid-template-columns:1fr}
  .join-row{height:clamp(240px,40vw,320px)}
  .suite-grid{grid-template-columns:1fr;gap:1.8rem}
}
@media (max-width:860px){
  .cta-obj{height:100px}
}
@media (max-width:860px){
  .ph-row{grid-template-columns:1fr}
}
@media (max-width:700px){
  .crumb{margin-bottom:1rem}
  .da-badge{top:calc(var(--nav) + 8px)}
  .fields{grid-template-columns:1fr}
  .btn-cta{min-height:3.5rem}
}
@media (max-width:640px){
  /* mobile : la fenêtre étroite s'élargit en arrivant au centre de l'écran, le récit suit dessous */
  .pt{grid-template-columns:1fr;gap:1.3rem}
  .pt-ph,.pt-tag{height:clamp(360px,100vw,440px)}
  .pt-ph,.pt-tag{width:50%}
  .pt.is-on .pt-ph{width:100%}
  .pt-bio{font-size:.94rem}
  /* expertises : visages et noms à gauche, trois colonnes de points à droite */
  .mx{--cols:minmax(0,1fr) repeat(3,2.6rem)}
  .mx-top{grid-template-columns:minmax(0,1fr) 7.8rem}
  .mx-stage{grid-column:2;height:150px}
  .mx-key{gap:.55rem;font-size:.56rem;letter-spacing:.14em;margin-bottom:.9rem}
  .mx-h th{padding:.8rem 0 .9rem}
  .mx-h th a{font-size:.86rem;gap:.3rem;padding:.2rem 0}
  .mx-h small{display:none}
  .mx-r th{gap:.7rem;padding-right:.4rem}
  .av{width:38px;height:38px}
  .mx-who b{font-size:.92rem}
  .mx-who small{font-size:.68rem;line-height:1.35}
  .mx-lbl{font-size:.52rem;letter-spacing:.08em;padding:.35rem .5rem}
  .mx-span{padding:.6rem 0}
  .d{grid-template-columns:1fr;gap:.7rem}
  .d-side{grid-column:1}
  .d-n{padding-top:0}
  .join-row{gap:.3rem;height:clamp(200px,58vw,260px)}
  .jb{border-radius:10px}
  .jb-v{font-size:.72rem}
  .suite-obj{width:64px;height:104px}
  .suite-l a{grid-template-columns:2rem minmax(0,1fr) auto;padding:1rem 0}
  .suite-l .s-d{font-size:.86rem}
}
@media (max-width:520px){
  :root{--nav:64px}
  .nav-in{gap:.55rem}
  .lockup{gap:.5rem}
  .lk-mark{width:26px;height:26px}
  .lk-name{font-size:.88rem;letter-spacing:.24em}
  .lk-sub{font-size:.44rem;letter-spacing:.2em}
  .nav .btn-sm{height:2.35rem;padding:0 .85rem;font-size:.78rem}
  .burger{width:2.35rem;height:2.35rem}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.25rem}
  .btn-cta{width:100%;padding:0 1rem;font-size:.95rem}
}

/* ── 17. Mouvement réduit : tout lisible, statique ───────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .js .rv,.js .h1-l,.js .pt,.js .pt-ph,.js .pt-tag{opacity:1!important;transform:none!important;filter:none!important;letter-spacing:-.04em}
  .js .pt-tag{letter-spacing:normal}
  .js .pt-ph img{clip-path:none!important;transform:none!important}
  .js .jb{clip-path:none!important}
  .js .mx .dot,.js .mx .mx-line{transform:none!important}
  [data-depth]{opacity:1!important;transform:none!important;filter:none!important}
  .js .h1-l{font-weight:620}
  .btn-cta.is-charged{animation:none}
}
.safe .pt-ph,.safe .pt-tag{opacity:1!important;transform:none!important;filter:none!important}
.safe .pt-ph img,.safe .jb{clip-path:none!important;transform:none!important}
.safe .mx .dot,.safe .mx .mx-line{transform:none!important}



  /* sans JavaScript (pas de classe .js) : menu mobile déplié, sans burger. Hors <noscript> : le
     générateur sort les styles de la tête dans le CSS de la page, où un <noscript> ne joue plus. */
  @media (max-width:1240px){html:not(.js) .burger{display:none}html:not(.js) .mnav[hidden]{display:block;position:static;height:auto}html:not(.js) .nav{position:relative;height:auto}html:not(.js) .nav-in{height:var(--nav)}}