/* ============================================================
   SAGESSES MODERNES — Institutional Editorial System (v2, from zero)
   Benchmark: Palantir / IBM / McKinsey / Stripe / Linear / Apple
   Principles: one grotesk · hierarchy by size/weight/case · warm
   neutrals + one blue · hairline rules · asymmetric editorial grid ·
   whitespace as architecture · motion almost invisible.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Bright cool-neutral palette (matched to Palantir's less-warm brights) */
  --paper:#FAFAF7;        /* bright near-neutral — page canvas (was warm #F4F2ED) */
  --paper-edge:#ECECEA;   /* faint cool panel */
  --ink:#0B1220;          /* cool near-black — primary text (never pure black) */
  --charcoal:#0B1220;     /* deep cool charcoal — dark sections (≈ Palantir #0D0E10) */
  --graphite:#1A1C21;     /* surface sombre — décision fondateur 2026-07-19, à inscrire au canon */
  --grey:#5E5F66;         /* cool muted grey — body */
  --grey-soft:#6E6E77;    /* faint cool labels / meta */

  /* One institutional blue — primary CTA only */
  --blue:#5896d8;
  --blue-deep:#5896d8;

  /* Hairlines (cool) */
  --rule:rgba(18,19,23,.15);
  --rule-soft:rgba(18,19,23,.09);

  /* Theme-mapped (light default) */
  --bg:var(--paper);
  --fg:var(--ink);
  --muted:var(--grey);
  --faint:var(--grey-soft);
  --line:var(--rule);
  --line-2:var(--rule-soft);
  --panel:#FCFCFB;

  /* Raised card + stronger hairline + monospaced-token family (light theme).
     Previously only defined under .noir, so mono anchor tokens / cards fell
     back to sans + transparent on every light page — restored here. */
  --rule-strong:rgba(18,19,23,.26);
  --line-strong:var(--rule-strong);
  --card:#FCFCFB;
  --mono:"SF Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* Grid & rhythm */
  --measure:1280px;
  --pad:clamp(24px,6vw,88px);
  --gutter:clamp(20px,2.4vw,40px);

  /* Type */
  --sans:'Inter','Helvetica Neue',sans-serif;

  /* Spacing scale (8-based, generous) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --s6:64px; --s7:96px; --s8:128px; --s9:168px; --s10:216px;
}

/* Dark section theme — remap the same tokens; components unchanged */
.dark{
  --bg:var(--charcoal);
  --fg:#ECECEE;
  --muted:#9E9EA6;
  --faint:#74747C;
  --line:rgba(255,255,255,.15);
  --line-2:rgba(255,255,255,.09);
  --panel:var(--graphite);
  background:var(--bg);
  color:var(--fg);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"ss01" 1;
}
svg{display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(88,150,216,.15)}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:100;background:#fff;padding:.6rem 1rem;border:1px solid var(--rule)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Layout primitives ---------- */
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--pad)}
.section{background:var(--bg);color:var(--fg);padding-block:clamp(88px,11vw,200px)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);row-gap:0}

/* ---------- Section masthead (index + label + hairline rule) ---------- */
.masthead{
  display:flex;align-items:baseline;gap:1.25rem;
  padding-top:1.5rem;border-top:1px solid var(--line);
  margin-bottom:clamp(48px,6vw,96px);
}
.masthead__idx{font-size:.8rem;font-weight:600;color:var(--fg);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.masthead__label{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---------- Typography ---------- */
.kicker{
  font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);
}
.display{
  font-weight:600;
  font-size:clamp(2.7rem,6vw,5.2rem);
  line-height:1.02;
  letter-spacing:-.034em;
  color:var(--fg);
  text-wrap:balance;
  margin:0;
}
.h-sec{
  font-weight:600;
  font-size:clamp(2rem,3.8vw,3.4rem);
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--fg);
  text-wrap:balance;
  margin:0;
}
.h-item{
  font-weight:600;
  font-size:clamp(1.35rem,1.8vw,1.7rem);
  line-height:1.18;
  letter-spacing:-.014em;
  color:var(--fg);
  margin:0;
}
.lead{
  font-weight:400;
  font-size:clamp(1.18rem,1.5vw,1.45rem);
  line-height:1.5;
  color:var(--muted);
  text-wrap:pretty;
  margin:0;
}
.body{font-size:1.05rem;line-height:1.65;color:var(--muted);text-wrap:pretty;margin:0}
.label{font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.index{font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- Buttons — small, sharp, editorial ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.02em;line-height:1;
  padding:.78rem 1.2rem;border:1px solid transparent;border-radius:2px;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease,opacity .25s ease;
}
.btn--primary{background:linear-gradient(100deg,#8f78ea 0%,#5896d8 100%);color:#fff;border-color:transparent}
.btn--primary:hover{filter:brightness(1.08);background:linear-gradient(100deg,#8f78ea 0%,#5896d8 100%);border-color:transparent}
.btn--line{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--line:hover{border-color:var(--fg)}
.btn__arw{font-weight:500;transform:translateY(-.5px)}

/* Quiet text link with rule */
.tlink{
  display:inline-flex;align-items:baseline;gap:.5rem;color:var(--fg);font-weight:500;font-size:.95rem;
  padding-bottom:.25rem;border-bottom:1px solid var(--line);
}
.tlink:hover{border-color:var(--fg)}
.tlink__arw{color:var(--faint)}

/* ---------- Navigation — thin, architectural ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--rule-soft)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:2rem}
.brand{display:inline-flex;align-items:center}
/* Logo placeholder — the supplied master SVG drops into this exact slot, no layout change */
.logo-ph{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;min-width:158px;padding:0 12px;
  border:1px dashed var(--line);border-radius:2px;
  font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);
}
/* Official Sagesses Modernes logo — drops into the brand slot (white on dark nav/footer, dark on light nav) */
.brand__logo{display:block;height:54px;width:auto}
.foot__logo{display:block;height:48px;width:auto;margin-bottom:.4rem}
.nav__menu{display:flex;gap:2.4rem;margin-left:auto}
.nav__link{font-size:.88rem;font-weight:500;color:var(--muted);transition:color .2s ease}
.nav__link:hover{color:var(--ink)}
.nav__right{display:flex;align-items:center;gap:1.4rem}
/* FR / EN language switch — re-homed from the footer into the sticky header.
   Quiet IBM Plex Mono micro-label; active language + hover use the BRASS gradient. */
.nav__lang{display:inline-flex;align-items:center;gap:.45rem;
  font-family:"IBM Plex Mono",var(--mono);
  font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(233,236,240,.7)}
.nav__lang a{color:rgba(233,236,240,.7);transition:color .2s ease}
.nav__lang a:hover,
.nav__lang .is-current{
  background:var(--hp-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav__lang .is-current{font-weight:600}
.nav__langSep{color:rgba(255,255,255,.28)}
/* 44 px dès la base (cible tactile Apple HIG) et `flex:none` : le hamburger
   ne doit JAMAIS être comprimé ni repoussé par le lettrage du logo — c'est
   ce qui le faisait rogner sur son bord droit par `overflow-x:clip`.
   Les trois barres sont centrées géométriquement (left/top 50 %) au lieu
   d'être calées sur des décalages calculés pour l'ancienne boîte de 34 px. */
.nav__burger{display:none;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:2px;background:none;cursor:pointer;position:relative}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{position:absolute;left:50%;margin-left:-9px;width:18px;height:1.5px;background:var(--ink);content:""}
.nav__burger span{top:50%;margin-top:-.75px}.nav__burger span::before{top:-6px}.nav__burger span::after{top:6px}
.drawer{display:none;flex-direction:column;background:var(--paper);border-bottom:1px solid var(--rule);padding:.5rem var(--pad) 1.5rem}
.drawer.open{display:flex}
.drawer a{padding:.9rem 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--rule-soft)}
.drawer .btn{margin-top:1rem;justify-content:center;color:#fff}

/* ---------- Hero — editorial cover ---------- */
.hero{background:var(--paper);padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(40px,5vw,72px)}
.hero__kick{margin-bottom:clamp(28px,3vw,44px)}
.hero__title{grid-column:1 / span 11;margin:0}
.hero__meta{grid-column:1 / span 12;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);margin-top:clamp(40px,4.5vw,72px)}
.hero__sub{grid-column:1 / span 6}
.hero__act{grid-column:8 / span 5;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;justify-content:flex-end}
.hero__ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__note{grid-column:1/-1;font-size:.85rem;color:var(--faint);letter-spacing:.01em}
/* Full-bleed photography band under the hero text */
.hero__figure{margin-top:clamp(56px,6vw,104px)}

/* ---------- Photography placeholder ---------- */
.photo{
  position:relative;width:100%;background:var(--graphite);
  border:1px solid var(--rule-soft);border-radius:2px;overflow:hidden;
}
.photo--cinema{aspect-ratio:21 / 9}
.photo--portrait{aspect-ratio:4 / 5}
.photo::after{content:"";position:absolute;inset:16px;border:1px dashed rgba(255,255,255,.14)}
.photo__tag{
  position:absolute;left:24px;bottom:22px;z-index:2;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
/* Photographic fill (interim Unsplash art direction; swap freely, same slot) */
.photo--img{background:#0B0D10;border-color:transparent}
.photo--img::after{display:none}
.photo__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.9) contrast(1.03) saturate(.92)}
.photo__credit{position:absolute;right:16px;bottom:12px;z-index:2;
  font-size:.62rem;letter-spacing:.08em;color:rgba(255,255,255,.42)}

/* ---------- Editorial statement block (stakes) ---------- */
.stmt{grid-column:1 / span 9}
.stmt__lead{grid-column:1 / span 8;margin-top:clamp(32px,3.5vw,52px)}
.signals{grid-column:1 / span 12;margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.signal{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:baseline;padding:1.35rem 0;border-bottom:1px solid var(--line-2)}
.signal__n{font-variant-numeric:tabular-nums;font-size:.8rem;font-weight:600;color:var(--faint)}
.signal__t{font-size:1.05rem;color:var(--fg)}

/* ---------- Pillars — numbered editorial list (odd count, no card grid) ---------- */
.pillars{grid-column:1 / span 12;margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.pillar{
  display:grid;grid-template-columns:88px 1fr;gap:var(--gutter);
  align-items:start;padding:clamp(30px,3.4vw,56px) 0;border-bottom:1px solid var(--line);
}
.pillar__n{font-variant-numeric:tabular-nums;font-size:.85rem;font-weight:600;color:var(--faint);padding-top:.5rem}
.pillar__body{max-width:60ch}
.pillar__ic{margin-bottom:1.5rem}
.pillar__desc{margin-top:1rem;max-width:52ch}

/* Icon placeholder — bespoke set drops in later */
.icon-ph{
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  width:52px;height:52px;border:1px solid var(--line);border-radius:2px;
  font-size:.46rem;font-weight:600;letter-spacing:.08em;line-height:1.3;text-transform:uppercase;color:var(--faint);
}

/* ---------- Method — vertical numbered sequence ---------- */
.method__head{grid-column:1 / span 7}
.method__note{grid-column:9 / span 4;align-self:end}
.method__seq{grid-column:1 / span 12;margin-top:clamp(48px,5vw,88px);border-top:1px solid var(--line)}
.phase{
  display:grid;grid-template-columns:120px 1fr;gap:var(--gutter);
  align-items:baseline;padding:clamp(28px,3vw,44px) 0;border-bottom:1px solid var(--line);
}
.phase__n{font-size:clamp(1.6rem,2.4vw,2.4rem);font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.phase__t{font-weight:600;font-size:clamp(1.3rem,1.7vw,1.6rem);letter-spacing:-.01em;color:var(--fg)}
.phase__d{margin-top:.7rem;max-width:56ch}

/* ---------- Footer ---------- */
.foot{background:var(--charcoal);color:#9E9EA6;padding-block:clamp(56px,6vw,88px);border-top:1px solid rgba(255,255,255,.08)}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.foot .logo-ph{color:#83838B;border-color:rgba(255,255,255,.16)}
.foot__note{font-size:.78rem;letter-spacing:.04em;color:#8E8E97}

/* ---------- Capability rail (Palantir-style uppercase micro-rail) ---------- */
.rail{
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.6rem);flex-wrap:wrap;
  margin-top:clamp(44px,4.5vw,72px);padding-block:1.15rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.rail__k{font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg)}
.rail__list{display:flex;gap:clamp(1rem,2.4vw,2.4rem);flex-wrap:wrap;
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}

/* ---------- Ruled row list (sectors, proprietary IP) ---------- */
.rowlist{grid-column:1 / span 12;margin-top:clamp(44px,5vw,80px);border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:baseline;
  padding:clamp(24px,2.8vw,42px) 0;border-bottom:1px solid var(--line);
}
.row__t{font-weight:600;font-size:clamp(1.2rem,1.55vw,1.5rem);letter-spacing:-.02em;color:var(--fg)}
.row__d{color:var(--muted);font-size:1.02rem;max-width:54ch}
a.row{text-decoration:none;transition:opacity .2s ease}
a.row:hover .row__t{text-decoration:underline;text-underline-offset:4px}
a.row:hover .row__d{color:var(--fg)}
.rowlist__note{margin-top:clamp(28px,3vw,44px);font-size:.9rem;color:var(--faint);letter-spacing:.01em}

/* ---------- Why / differentiation (2×2 declaratives) ---------- */
.why{grid-column:1 / span 12;margin-top:clamp(44px,5vw,80px);
  display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(40px,5vw,96px)}
.why__item{padding:clamp(30px,3.2vw,52px) 0;border-top:1px solid var(--line)}
.why__t{font-weight:600;font-size:clamp(1.3rem,1.85vw,1.7rem);line-height:1.16;
  letter-spacing:-.014em;color:var(--fg);max-width:24ch}
.why__d{margin-top:1rem;color:var(--muted);max-width:46ch}

/* ---------- Cinematic image band ---------- */
.imgband{padding-block:clamp(40px,5vw,84px);background:var(--paper)}

/* ---------- Final CTA band ---------- */
.cta__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gutter);align-items:end}
.cta__head{grid-column:1 / span 7}
.cta__sub{margin-top:1.6rem;max-width:44ch}
.cta__act{grid-column:9 / span 4;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.cta__ctas{display:flex;gap:.8rem;flex-wrap:wrap}

/* ---------- Full footer ---------- */
.foot__top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(28px,3vw,56px);
  padding-bottom:clamp(48px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.08)}
.foot__brandline{margin-top:1.2rem;font-size:.9rem;color:#83838B;max-width:30ch;line-height:1.6}
.foot__col h4{margin:0 0 1.1rem;font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#8E8E97}
.foot__col a{display:block;padding:.4rem 0;font-size:.92rem;color:#B4B4BB}
.foot__col a:hover{color:#ECECEE}
.foot__bottom{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:clamp(28px,3vw,44px)}
.foot__legal{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.78rem;color:#74747C}
.foot__legal a{color:#74747C}
.foot__legal a:hover{color:#B4B4BB}

@media(max-width:900px){
  .why{grid-template-columns:1fr;column-gap:0}
  .row{grid-template-columns:1fr;row-gap:.6rem}
  .cta__head,.cta__act{grid-column:1 / span 12}
  .cta__act{margin-top:2.2rem}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){.foot__top{grid-template-columns:1fr}}

/* Motion lives in motion.css (exact Palantir keyframes), loaded on every page.
   Static fallback so content is visible if motion.css fails to load: */
.reveal{opacity:1}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero__title{grid-column:1 / span 12}
  .hero__sub{grid-column:1 / span 12}
  .hero__act{grid-column:1 / span 12;margin-top:2rem}
  .stmt,.stmt__lead,.method__head{grid-column:1 / span 12}
  .method__note{grid-column:1 / span 12;margin-top:1.5rem}
  .pillar{grid-template-columns:56px 1fr}
  .phase{grid-template-columns:64px 1fr}
}
@media(max-width:760px){
  /* CTA button collapses into the burger on mobile, but the FR/EN switch
     stays visible in the header row — it must remain reachable at all times. */
  .nav__menu,.nav__right .btn{display:none}
  .nav__burger{display:block}
}

/* ============ STANDARDISED STICKY HEADER — site-wide (matches homepage) ============ */
.nav{background:rgba(15,17,23,.82);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__link{color:rgba(233,236,240,.82)}
.nav__link:hover{color:#fff}
.nav__link.is-active{color:#fff}
.nav__burger{border-color:rgba(255,255,255,.3)}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{background:#fff}
.nav .btn--line{color:#fff;border-color:transparent;background:linear-gradient(100deg,#8f78ea 0%,#5896d8 100%);box-shadow:0 8px 20px -10px rgba(110,120,230,.55)}
.nav .btn--line:hover{filter:brightness(1.08);background:linear-gradient(100deg,#8f78ea 0%,#5896d8 100%)}
@media(max-width:1000px){.brand__logo{height:40px}}
@media(max-width:640px){.brand__logo{height:36px}}

/* ═══ 003/T054 — emphase dégradé + CTA secondaire unifié (site-wide) ═══ */
:root {
  --hp-mono: "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace; --hp-grad: linear-gradient(100deg, #8f78ea 0%, #5896d8 100%); }
.grad { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; }
.btn--expert { background: var(--hp-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; border: 1px solid; border-image: var(--hp-grad) 1; border-radius: 0;
  background-color: transparent; }
.btn--expert .btn__arw { background: var(--hp-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent; }

/* ═══ 004 — cibles tactiles ≥ 44 px (recommandation Apple HIG) ═══ */
@media (max-width: 860px) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__link, .drawer a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Keep the header FR/EN switch a comfortable tap target on mobile. */
  .nav__lang a, .nav__lang .is-current { min-height: 40px; display: inline-flex; align-items: center; padding: 0 3px; }
  /* `inline-flex` est de niveau LIGNE : les liens du pied de page se
     remettaient bout à bout (« Départements Secteurs Méthode Académie IA »)
     et ne ressemblaient plus à des liens. `flex` est de niveau BLOC :
     chaque lien reprend sa propre ligne, comme sur ordinateur. */
  .foot__col a { min-height: 44px; display: flex; align-items: center; }
  .foot__legal a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 2px; }
  .nav__burger { min-width: 44px; min-height: 44px; }
  .skip { min-height: 44px; }
}

/* ============================================================
   CALIBRAGE MOBILE — COMMUN  (≤ 860 px)
   ------------------------------------------------------------
   Ce fichier est chargé par les 16 pages ; styles-solutions.css
   ne l'est pas par l'accueil et home.css ne l'est que par lui.
   Tout ce qui doit s'appliquer PARTOUT vit donc ici.
   Valeurs issues d'une mesure à 390 px, pas d'une estimation.
   ============================================================ */
@media (max-width:860px){

  /* Champs : sous 16 px, iOS zoome au focus et décadre la page.
     16 px est le seuil exact du moteur, pas une préférence. */
  input, select, textarea{ font-size:16px }

  /* Plancher de lisibilité du pied de page. */
  .foot__col h4{ font-size:.78rem }
  .foot__note{ font-size:.8rem }
  /* Même correctif qu'au-dessus : `flex` (bloc), pas `inline-flex` (ligne). */
  .foot__col a{ min-height:44px; display:flex; align-items:center }
  .foot__legal a{ min-height:44px; display:inline-flex; align-items:center }

  /* Surfaces tactiles. */
  .brand{ min-height:44px }
  .nav__link{ min-height:44px; display:inline-flex; align-items:center }
}

/* ============================================================
   CORRECTIFS UX MOBILE — 2026-07-20  (iPhone 12 / 390 px)
   Relevé terrain du fondateur, mesuré puis corrigé à la source.
   ============================================================ */

/* ── 1. Garde-fou de débordement horizontal ───────────────────
   La cause racine est corrigée là où elle vit (home.css :
   .hp-hero__col min-width:0). Ceci n'est qu'un filet de sécurité.
   `clip` et NON `hidden` : `overflow-x:hidden` transforme <body>
   en conteneur de défilement et casse le `position:sticky` de
   l'en-tête, qu'on doit conserver. `clip` rogne sans créer de
   conteneur de défilement. Repli en `hidden` si non supporté. */
html, body{ max-width:100%; }
html, body{ overflow-x:clip; }
@supports not (overflow-x: clip){
  html, body{ overflow-x:hidden; }
}

/* ── 4. Logo dimensionné en LARGEUR sur petit écran ───────────
   CORRECTIF (2e passe). Le commentaire précédent annonçait
   « 46 px de haut ≈ 141 px de large » : c'est faux. Le lettrage
   fait 1800 × 280 px (ratio 6,43:1), donc 46 px de haut = 296 px
   de LARGE, soit 76 % d'un écran de 390 px. Le rang de navigation
   réclamait 371,7 px pour 342 px disponibles ; le débordement de
   29,7 px était masqué par `overflow-x:clip`, qui rognait le
   hamburger de 5,7 px sur son bord droit — le défaut constaté.
   On contraint donc la LARGEUR ; la hauteur suit le ratio. */
@media(max-width:1000px){
  /* `min-width:0` + `max-width:100%` : le bloc de marque devient COMPRESSIBLE.
     Sans cela un élément flex refuse de passer sous la largeur de son contenu
     — c'est ce blocage qui poussait le hamburger hors du cadre. Le menu et le
     bloc de droite sont figés (`flex:none`) : c'est la marque, et elle seule,
     qui absorbe le manque de place. Le rang ne peut donc plus déborder,
     quelle que soit la longueur des libellés de navigation. */
  .brand{ min-width:0 }
  .nav__menu, .nav__right{ flex:none }
  .brand__logo{ height:auto; width:auto; max-width:min(240px, 100%); max-height:48px }
}
@media(max-width:760px){
  /* 24 px de marge × 2 + 44 px de hamburger + 16 px d'écart + air */
  .nav__in{ gap:16px }
  .brand__logo{ max-width:min(210px, calc(100vw - 132px)); max-height:44px }
}

/* ── 3. Menu mobile = panneau plein écran ─────────────────────
   Avant : .drawer était un bloc dans le flux, juste sous l'en-tête.
   Ouvert depuis le bas de page, il s'affichait donc TOUT EN HAUT,
   hors écran. Il devient un calque `fixed`, opérant à n'importe
   quelle position de défilement. */
.drawer{
  position:fixed; inset:0; z-index:80;
  display:none; flex-direction:column; justify-content:center;
  gap:.15rem;
  padding:96px var(--pad) calc(var(--pad) + 1rem);
  background:rgba(11,18,32,.94);              /* INK #0B1220 à 94 % */
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  backdrop-filter:blur(18px) saturate(1.25);
  border-bottom:0;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.drawer.open{ display:flex; animation:drawerIn .22s ease both }
@keyframes drawerIn{ from{opacity:0} to{opacity:1} }
.drawer a{
  padding:1.05rem 0; color:#FAFAF7; font-size:1.32rem; font-weight:500;
  letter-spacing:-.012em; border-bottom:1px solid rgba(255,255,255,.10);
}
.drawer a:active{ color:#5896d8 }
.drawer .btn{
  margin-top:1.7rem; justify-content:center; color:#fff;
  font-size:.95rem; padding:1.05rem 1.2rem; border-bottom:0; min-height:52px;
}
.drawer__close{
  position:absolute; top:18px; right:var(--pad);
  width:44px; height:44px; display:grid; place-items:center;
  background:none; border:1px solid rgba(255,255,255,.28); border-radius:2px;
  color:#FAFAF7; font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.drawer__close:hover{ border-color:rgba(255,255,255,.6) }
.drawer__close svg{ width:17px; height:17px }
body.is-menu-open{ overflow:hidden }
@media (prefers-reduced-motion: reduce){ .drawer.open{ animation:none } }

/* ── 6. Liens du pied de page : un par ligne, cliquables ──────
   Le passage en `flex` (bloc) est fait plus haut. Ici l'affordance :
   respiration, soulignement au survol, retour tactile. */
@media (max-width:860px){
  .foot__top{ gap:34px }
  .foot__col a{
    padding:.55rem 0;
    border-bottom:1px solid rgba(255,255,255,.07);
    text-decoration:underline; text-decoration-color:rgba(180,180,187,.28);
    text-underline-offset:4px; text-decoration-thickness:1px;
    transition:color .18s ease, text-decoration-color .18s ease;
  }
  .foot__col a:last-child{ border-bottom:0 }
  .foot__col a:hover, .foot__col a:active{
    color:#ECECEE; text-decoration-color:#5896d8;
  }
}

/* ── 7. Logo du pied de page : cliquable vers l'accueil ───────── */
.foot__logoLink{ display:inline-block; border-radius:2px }
.foot__logoLink:focus-visible{ outline:2px solid #5896d8; outline-offset:4px }

/* ── 8. Bascule de langue FR / EN (pied de page) ───────────────
   Le site est francophone ; /en/ est une page d'atterrissage unique
   destinee aux contacts anglophones. La bascule reste volontairement
   discrete : gris sourd au repos, BRASS au survol et sur la langue
   courante. Les href sont ABSOLUS (« / » et « /en/ ») pour que le
   meme fragment fonctionne a la racine comme dans un sous-dossier.
   Place en fin de fichier : doit passer apres `.foot__legal a:hover`. */
.foot__lang{ display:inline-flex; align-items:center; gap:.5rem }
.foot__lang a{ color:#74747C; transition:color .2s ease }
.foot__lang a:hover,
.foot__lang .is-current{
  background:var(--hp-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.foot__lang .is-current{ font-weight:600 }
.foot__langSep{ color:#3F3F45 }