/* ============================================================
   IDMETRY — feuille de style commune
   Papier blanc, encre presque noire, un seul accent ambre
   repris de la chrome du visualiseur IDM-VIEWER.
   L'ambre ne sert JAMAIS de couleur de bouton : il ne marque
   que ce qui relève du repère et de la mesure.
   ============================================================ */
:root{
  --paper:#FFFFFF;
  --ink:#111312;
  --graphite:#61665F;
  --rule:#E3E5E3;
  --plate:#FAFBFA;
  --dot:#E9EBE9;
  --amber:#B08328;
  /* accent de la page : reprend la longueur d'onde de son entrée de menu */
  --accent:#B08328;

  --display:"Spectral",Georgia,serif;
  --body:"Archivo",system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,monospace;

  --measure:60ch;
  --gutter:clamp(20px,5vw,64px);
  --label-col:clamp(96px,13vw,168px);
  --bar:30px;

  --data-size:10.5px;
  --data-track:.13em;
  --data-case:uppercase;
  --lh:1.72;
}

/* --- variante chinoise --- */
html[lang^="zh"]{
  --display:"Noto Serif SC",Songti SC,serif;
  --body:"Noto Sans SC",system-ui,sans-serif;
  --data-track:.06em;
  --data-case:none;
  --data-size:11.5px;
  --measure:34em;
  --lh:1.9;
}
/* --- variante arabe : ni capitales, ni interlettrage (l'arabe est lié) --- */
html[lang^="ar"]{
  --display:"Amiri",serif;
  --body:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --data:"IBM Plex Sans Arabic",system-ui,sans-serif;
  --data-track:0;
  --data-case:none;
  --data-size:12px;
  --measure:44em;
  --lh:1.95;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(16px,1.02vw,18px);
  line-height:var(--lh);
  font-weight:400;
  padding-bottom:var(--bar);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:#F2E6CC}

/* ---------- utilitaires typographiques ---------- */
.mono{
  font-family:var(--data);
  font-size:var(--data-size);
  letter-spacing:var(--data-track);
  text-transform:var(--data-case);
  color:var(--graphite);
  font-weight:400;
}
.dim{color:var(--graphite)}

/* ---------- trame de page ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.band{border-top:1px solid var(--rule)}
.band-inner{
  display:grid;
  grid-template-columns:var(--label-col) minmax(0,1fr);
  gap:clamp(20px,4vw,56px);
  padding:clamp(52px,7vw,104px) 0;
}
.band-label{padding-top:.45em}
/* titre de section : un repère ambre le tient, l'encre le rend lisible.
   Le gris est réservé aux légendes, qui sont secondaires par intention. */
.band-label .mono{
  display:block;
  color:var(--ink);
  font-weight:500;
  font-size:calc(var(--data-size) + 1.5px);
  padding-top:13px;
  position:relative;
}
.band-label .mono::before{
  content:"";position:absolute;top:0;left:0;
  width:28px;height:2px;background:var(--accent);
}
[dir="rtl"] .band-label .mono::before{left:auto;right:0}
@media (max-width:720px){
  .band-label .mono{padding-top:11px}
  .band-label .mono::before{width:22px}
}
.band-body{max-width:var(--measure)}
.band-body.wide{max-width:none}
@media (max-width:720px){
  .band-inner{grid-template-columns:1fr;gap:22px}
}

/* ---------- barre de navigation ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;height:64px;
}
/* logotype IDMETRY : SVG héritant de l'encre courante */
.wordmark{
  flex:none;display:flex;align-items:center;
  color:var(--ink);text-decoration:none;
  transition:opacity .18s ease;
}
.wordmark:hover{opacity:.62}
.wordmark svg,.wordmark img{display:block;height:30px;width:auto}
/* les lettres en contour du logotype passent sous le pixel une fois réduites :
   on fige l'épaisseur du trait en pixels écran plutôt qu'en unités du dessin */
.wordmark svg .cls-2{stroke-width:1.3px;vector-effect:non-scaling-stroke}
@media (max-width:480px){ .wordmark svg,.wordmark img{height:24px} }
.nav nav{flex:1;display:flex;justify-content:flex-end}
.nav ul{display:flex;gap:clamp(12px,2.2vw,30px);list-style:none;margin:0;padding:0;align-items:center}
/* Chaque entrée porte une longueur d'onde, de 405 à 690 nm : la barre de
   navigation parcourt le spectre visible de gauche à droite. La couleur
   n'apparaît que dans le trait, jamais dans le texte. Les luminances sont
   égalisées pour que les neuf traits pèsent le même poids sur le blanc. */
.nav a.navlink{
  position:relative;text-decoration:none;font-size:13.5px;
  padding:5px 0;white-space:nowrap;color:var(--ink);
}
.nav a.navlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--wl,var(--amber));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .nav a.navlink::after{transform-origin:right center}
.nav a.navlink:hover::after,.nav a.navlink:focus-visible::after{transform:scaleX(1)}
.nav a.navlink[aria-current="page"]::after{transform:scaleX(1);opacity:.9}
.nav ul li:nth-child(1){--wl:#9500FF}  /* 405 nm */
.nav ul li:nth-child(2){--wl:#0003FF}  /* 441 nm */
.nav ul li:nth-child(3){--wl:#007BA9}  /* 476 nm */
.nav ul li:nth-child(4){--wl:#048600}  /* 512 nm */
.nav ul li:nth-child(5){--wl:#458100}  /* 548 nm */
.nav ul li:nth-child(6){--wl:#7B7500}  /* 583 nm */
.nav ul li:nth-child(7){--wl:#C24E00}  /* 619 nm */
.nav ul li:nth-child(8){--wl:#DE0000}  /* 654 nm */
.nav ul li:nth-child(9){--wl:#B50000}  /* 690 nm */
@media (prefers-reduced-motion:reduce){
  .nav a.navlink::after{transition:none}
}
.langs{
  display:flex;gap:9px;align-items:center;
  padding-inline-start:clamp(12px,2vw,26px);
  margin-inline-start:clamp(4px,1vw,10px);
  border-inline-start:1px solid var(--rule);
  flex:none;
}
.langs a{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-decoration:none;color:var(--graphite);text-transform:uppercase;
}
.langs a:hover{color:var(--ink)}
.langs a[aria-current="true"]{color:var(--amber)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(64px,11vh,132px) 0 clamp(44px,7vh,88px)}
.hero .kicker{display:block;margin-bottom:clamp(20px,3vw,32px)}
.hero h1{
  font-family:var(--display);
  font-weight:200;
  font-size:clamp(34px,5.6vw,78px);
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0 0 clamp(22px,3.2vw,38px);
  max-width:17ch;
  text-wrap:balance;
}
html[lang^="zh"] .hero h1,html[lang^="ar"] .hero h1{
  font-weight:400;letter-spacing:0;line-height:1.3;max-width:20ch;
}
.hero p{max-width:52ch;margin:0 0 clamp(28px,3.6vw,42px);color:#2A2E2C;font-size:1.06em}
.actions{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center}
.btn{
  display:inline-block;text-decoration:none;
  border:1px solid var(--ink);
  padding:13px 26px;font-size:13.5px;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-quiet{text-decoration:none;font-size:13.5px;border-bottom:1px solid var(--rule);padding-bottom:3px}
.btn-quiet:hover{border-bottom-color:var(--accent)}

/* repères de repérage — hérités de la photogravure */
.fid{position:absolute;width:15px;height:15px;opacity:.85;pointer-events:none}
.fid::before,.fid::after{content:"";position:absolute;background:var(--amber)}
.fid::before{left:7px;top:0;width:1px;height:15px}
.fid::after{top:7px;left:0;height:1px;width:15px}
.fid.tl{top:20px;left:calc(var(--gutter) - 22px)}
.fid.tr{top:20px;right:calc(var(--gutter) - 22px)}
@media (max-width:900px){ .fid{display:none} }

/* ---------- plaques d'image (emplacements réservés) ---------- */
.plate{
  position:relative;
  background-color:var(--plate);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:9px 9px;
  border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}
.plate-txt{max-width:46ch}
.plate-txt strong{
  display:block;color:var(--ink);font-weight:500;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;margin-bottom:7px;
}
.plate-txt span{
  display:block;font-size:12.5px;line-height:1.6;color:var(--graphite);
  font-family:var(--body);letter-spacing:0;text-transform:none;
}
.plate i,.plate b{position:absolute;width:11px;height:11px;border-color:var(--amber);border-style:solid;border-width:0}
.plate i:nth-of-type(1){top:7px;left:7px;border-top-width:1px;border-left-width:1px}
.plate i:nth-of-type(2){top:7px;right:7px;border-top-width:1px;border-right-width:1px}
.plate b:nth-of-type(1){bottom:7px;left:7px;border-bottom-width:1px;border-left-width:1px}
.plate b:nth-of-type(2){bottom:7px;right:7px;border-bottom-width:1px;border-right-width:1px}
/* image livrée : rapport natif, largeur bornée pour garder du blanc autour */
.shot{
  width:100%;max-width:1020px;
  background-color:var(--plate);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid var(--rule);
}
/* ── comparateur de campagnes ──────────────────────────────────
   L'état antérieur est découpé à la position de la poignée.
   Rien n'est animé automatiquement : c'est le lecteur qui mesure. */
.cmp{
  --x:50%;
  position:relative;width:100%;max-width:1020px;
  border:1px solid var(--rule);overflow:hidden;
  cursor:ew-resize;user-select:none;-webkit-user-select:none;
  background:var(--plate);touch-action:pan-y;
}
.cmp-layer{position:absolute;inset:0;background-size:cover;background-position:center}
.cmp-before{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.cmp-bar{position:absolute;top:0;bottom:0;left:var(--x);width:1px;background:#fff;opacity:.9}
.cmp-grip{
  position:absolute;top:50%;left:var(--x);
  transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);
  background:rgba(20,22,21,.42);backdrop-filter:blur(3px);
  color:#fff;font-size:12px;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:center;
  cursor:ew-resize;padding:0;
  transition:background .18s ease,transform .18s ease;
}
.cmp-grip:hover,.cmp:not(.cmp-live) .cmp-grip:focus-visible{background:rgba(20,22,21,.66)}
.cmp.cmp-live .cmp-grip{transform:translate(-50%,-50%) scale(1.06)}
.cmp-grip:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
/* légende en texte réel, et non incrustée dans l'image : elle se traduit */
.cmp-legend{
  position:absolute;right:2.0%;bottom:4.8%;
  min-width:40.6%;padding:13px 18px;
  background:rgba(18,20,19,.82);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;gap:9px;
  color:#F2F2F0;font-size:13px;line-height:1.35;
  pointer-events:none;
}
.cmp-key{display:flex;align-items:center;gap:11px;white-space:nowrap}
.cmp-key i{width:15px;height:15px;border:2px solid;flex:none}
@media (max-width:680px){
  .cmp-legend{font-size:11px;padding:9px 12px;gap:6px;right:1.5%;bottom:3.5%}
  .cmp-key i{width:11px;height:11px;border-width:1.5px}
  .cmp-grip{width:38px;height:38px;font-size:10px}
}
figure.fig:has(.cmp) .caption{max-width:1020px}
/* vidéo d'ouverture */
.hero-video{
  position:relative;width:100%;max-width:1020px;
  border:1px solid var(--rule);background:#0C0E0D;overflow:hidden;
}
.hero-video video{display:block;width:100%;height:100%;object-fit:cover}
.vid-toggle{
  position:absolute;right:12px;bottom:12px;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(16,18,17,.42);backdrop-filter:blur(3px);
  color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .22s ease,background .18s ease;
}
[dir="rtl"] .vid-toggle{right:auto;left:12px}
.hero-video:hover .vid-toggle,
.hero-video.is-paused .vid-toggle,
.vid-toggle:focus-visible{opacity:1}
.vid-toggle:hover{background:rgba(16,18,17,.7)}
figure.fig:has(.hero-video) .caption{max-width:1020px}
.form-msg{color:#B02A1F;margin-top:-4px}
.form-msg[hidden]{display:none}
figure.fig{margin:0}
figure.fig:has(.shot) .caption{max-width:1020px}
/* mention de portée sous une image d'illustration */
.caption-note{
  display:block;max-width:1020px;margin-top:9px;padding-top:9px;
  border-top:1px solid var(--rule);
  font-family:var(--data);font-size:calc(var(--data-size) + .5px);
  letter-spacing:calc(var(--data-track) * .6);text-transform:none;
  color:var(--graphite);line-height:1.6;
}
.caption{display:flex;justify-content:space-between;gap:18px;margin-top:10px}
@media (max-width:600px){
  .plate{aspect-ratio:4/3!important}
  .caption{flex-direction:column;gap:4px}
}

/* ---------- corps de texte ---------- */
.band-body p{margin:0 0 1.15em}
.band-body p:last-child{margin-bottom:0}
h2.thesis{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(24px,2.9vw,36px);
  line-height:1.26;letter-spacing:-.014em;
  margin:0 0 .7em;text-wrap:balance;
}
html[lang^="zh"] h2.thesis,html[lang^="ar"] h2.thesis{font-weight:400;letter-spacing:0;line-height:1.45}

/* ---------- listes de livrables ---------- */
.deliver{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.deliver li{
  border-bottom:1px solid var(--rule);
  padding:15px 0 15px 22px;position:relative;line-height:1.6;
}
.deliver li::before{
  content:"";position:absolute;left:2px;top:1.02em;
  width:14px;height:2px;background:var(--accent);
}
[dir="rtl"] .deliver li{padding:15px 22px 15px 0}
[dir="rtl"] .deliver li::before{left:auto;right:2px}

/* ---------- fiche de caractéristiques ---------- */
.spec{margin:0;border-top:1px solid var(--rule);max-width:820px}
.spec > div{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:16px 32px;align-items:baseline;
  border-bottom:1px solid var(--rule);padding:15px 0;
}
.spec dt{margin:0;padding-top:.15em}
.spec dd{
  margin:0;text-align:right;
  font-family:var(--display);font-weight:300;
  font-size:clamp(17px,1.7vw,21px);line-height:1.3;
  font-variant-numeric:tabular-nums;
}
html[lang^="zh"] .spec dd,html[lang^="ar"] .spec dd{font-weight:400}
[dir="rtl"] .spec dd{text-align:left}
@media (max-width:600px){
  .spec > div{grid-template-columns:1fr;gap:5px;padding:13px 0}
  .spec dd{text-align:left}
  [dir="rtl"] .spec dd{text-align:right}
}

/* ---------- les cinq missions ---------- */
.missions{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.missions li{border-bottom:1px solid var(--rule)}
.missions a{
  display:grid;
  grid-template-columns:170px minmax(0,1fr) auto;
  gap:clamp(18px,3.5vw,48px);
  align-items:center;
  padding:26px 0 26px 26px;
  text-decoration:none;position:relative;
  transition:padding-left .22s ease,padding-right .22s ease;
}
.missions a::before{
  content:"";position:absolute;left:5px;top:50%;
  width:13px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .22s ease;
}
.missions a:hover,.missions a:focus-visible{padding-left:38px}
.missions a:hover::before,.missions a:focus-visible::before{transform:scaleX(1)}
[dir="rtl"] .missions a{padding:26px 26px 26px 0}
[dir="rtl"] .missions a::before{left:auto;right:5px;transform-origin:right}
[dir="rtl"] .missions a:hover,[dir="rtl"] .missions a:focus-visible{padding-left:0;padding-right:38px}
/* logos de marque : posés sur le blanc, sans cadre ni fond */
.m-logo{display:flex;align-items:center;min-height:52px}
[dir="rtl"] .m-logo{justify-content:flex-end}
/* en liste : le logo sert de repère, la baseline est reprise en texte à côté */
img.logo{display:block;height:46px;width:auto}
/* en tête de page de marque : assez grand pour que la baseline se lise */
img.logo.logo-hero{height:auto;width:min(520px,86vw)}
.hero .logo{margin-bottom:clamp(26px,3.4vw,38px)}
.m-base{display:block;margin-bottom:4px}
.m-line{font-size:1.02em;line-height:1.5}
.m-go{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--graphite);letter-spacing:.1em;white-space:nowrap}
@media (max-width:820px){
  .missions a{grid-template-columns:1fr;gap:14px;padding:24px 0 24px 22px}
  [dir="rtl"] .missions a{padding:24px 22px 24px 0}
  .m-logo{min-height:44px}
  .m-go{display:none}
}

/* ---------- énoncé de principe ---------- */
.principle{
  font-family:var(--display);font-weight:300;
  font-size:clamp(26px,3.9vw,48px);line-height:1.18;
  letter-spacing:-.018em;margin:0 0 clamp(20px,2.8vw,32px);
  max-width:16ch;
}
html[lang^="zh"] .principle,html[lang^="ar"] .principle{font-weight:400;letter-spacing:0;line-height:1.4}

/* ---------- blocs « nos limites » ---------- */
.nots{display:grid;gap:clamp(28px,3.4vw,44px)}
.nots > div{max-width:var(--measure)}
.nots h3{
  font-family:var(--display);font-weight:400;
  font-size:clamp(18px,2vw,23px);line-height:1.32;
  margin:0 0 .45em;letter-spacing:-.01em;
}
html[lang^="zh"] .nots h3,html[lang^="ar"] .nots h3{letter-spacing:0}
.nots p{margin:0;color:#2A2E2C}

/* ---------- questions fréquentes ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 30px 20px 0;
  font-size:1.02em;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:2px;top:19px;
  color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:15px;
}
.faq details[open] summary::after{content:"–"}
[dir="rtl"] .faq summary{padding:20px 0 20px 30px}
[dir="rtl"] .faq summary::after{right:auto;left:2px}
.faq .ans{padding:0 0 22px;max-width:var(--measure);color:#2A2E2C}
.faq .ans p{margin:0 0 1em}
.faq .ans p:last-child{margin:0}

/* ---------- pied de page ---------- */
.foot{border-top:1px solid var(--rule);padding:clamp(44px,6vw,72px) 0 40px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:34px;margin-bottom:44px}
.foot h4{margin:0 0 14px;color:var(--ink);font-weight:500}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px;font-size:14px}
.foot a{text-decoration:none;font-size:14px;border-bottom:1px solid transparent}
.foot a:hover{border-bottom-color:var(--amber)}
.legal{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}

/* ---------- barre d'état : signature de la page ----------
   Reprise de la chrome basse du visualiseur IDM-VIEWER.
   Elle affiche un repère réel : position de lecture et
   section courante. Elle ne décore rien. */
.status{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--gutter);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--rule);
  font-family:var(--data);
  font-size:9.5px;letter-spacing:var(--data-track);text-transform:var(--data-case);
  color:var(--graphite);
  white-space:nowrap;overflow:hidden;
}
html[lang^="ar"] .status{font-size:11px}
.status .amberdot{color:var(--amber)}
.status-mid{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){ .status-right{display:none} }

/* ---------- accessibilité ---------- */
:focus-visible{outline:1px solid var(--amber);outline-offset:4px}
/* Le lien d'evitement etait cache par un deport de -9999px. En ecriture
   arabe, de droite a gauche, ce deport cree 10 000 px de defilement
   lateral : la page se balade hors de l'ecran. On le masque desormais
   par decoupe, ce qui ne produit aucune surface. */
.skip{
  position:absolute;left:auto;top:auto;
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}
.skip:focus{
  position:fixed;left:8px;top:8px;
  width:auto;height:auto;margin:0;padding:10px 16px;
  clip:auto;clip-path:none;overflow:visible;
  background:var(--ink);color:#fff;z-index:99;font-size:13px;
}
[dir="rtl"] .skip:focus{left:auto;right:8px}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   IDMETRY — adaptation aux écrans étroits
   Ajouté à la feuille commune. Rien de décoratif ici : on ne
   fait que garantir qu'aucun repère ne sorte de la page et
   qu'aucune entrée de menu ne devienne inatteignable.
   ============================================================ */

/* ---------- marges de sécurité ----------
   La gouttière ne descend plus sous 24 px, et l'encoche des
   téléphones en paysage est prise en compte. */
:root{
  --gutter:clamp(24px,5vw,64px);
  --gutter-l:max(var(--gutter),env(safe-area-inset-left));
  --gutter-r:max(var(--gutter),env(safe-area-inset-right));
}
.wrap{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.status{padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
.status{height:calc(var(--bar) + env(safe-area-inset-bottom));
        padding-bottom:env(safe-area-inset-bottom)}

/* aucun média ne dépasse jamais sa colonne */
img,video,svg,table{max-width:100%}

/* ---------- barre de navigation ----------
   Deux états francs, jamais d'entre-deux : soit les neuf
   entrées tiennent en une ligne, soit elles passent toutes
   dans le panneau. Le script tranche en mesurant. */
.nav-inner{flex-wrap:wrap;height:auto;min-height:64px;row-gap:6px;padding-block:9px}
.nav ul{flex-wrap:wrap;row-gap:4px;gap:clamp(10px,1.7vw,26px)}

.nav[data-fit="full"] .nav-inner{flex-wrap:nowrap;height:64px;padding-block:0}
.nav[data-fit="full"] ul{flex-wrap:nowrap}
.nav[data-fit="full"] .burger{display:none}

.nav[data-fit="compact"] .nav-inner{flex-wrap:nowrap;height:64px;padding-block:0}
.nav[data-fit="compact"] nav,
.nav[data-fit="compact"] .langs{display:none}
.nav[data-fit="compact"] .burger{display:flex}

/* les anciennes règles de masquage ne s'appliquent plus */
.nav ul li,.nav ul li.opt{display:block}

/* ---------- bouton du panneau ---------- */
.burger{
  display:none;flex:none;
  width:44px;height:44px;margin-inline-end:-10px;
  align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
}
.burger span{display:block;position:relative;width:22px;height:1.5px;background:currentColor}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  transition:transform .22s ease,opacity .18s ease;
}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- panneau de navigation ---------- */
.mobnav{
  position:fixed;inset:0;z-index:60;
  background:var(--paper);
  display:flex;flex-direction:column;
  padding:calc(64px + env(safe-area-inset-top)) var(--gutter-r)
          calc(26px + env(safe-area-inset-bottom)) var(--gutter-l);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s;
}
.mobnav.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
body.mobnav-lock{overflow:hidden}

.mobnav ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.mobnav li{border-bottom:1px solid var(--rule)}
.mobnav a{
  display:block;position:relative;
  padding:17px 0 17px 26px;
  text-decoration:none;color:var(--ink);
  font-size:clamp(17px,4.6vw,21px);
  font-family:var(--display);font-weight:300;letter-spacing:-.01em;
}
html[lang^="zh"] .mobnav a,html[lang^="ar"] .mobnav a{font-weight:400;letter-spacing:0}
[dir="rtl"] .mobnav a{padding:17px 26px 17px 0}
/* le trait spectral de chaque entrée est conservé : c'est le repère du site */
.mobnav a::before{
  content:"";position:absolute;left:0;top:calc(50% - 1px);
  width:14px;height:2px;background:var(--wl,var(--amber));
}
[dir="rtl"] .mobnav a::before{left:auto;right:0}
.mobnav li:nth-child(1){--wl:#9500FF}
.mobnav li:nth-child(2){--wl:#0003FF}
.mobnav li:nth-child(3){--wl:#007BA9}
.mobnav li:nth-child(4){--wl:#048600}
.mobnav li:nth-child(5){--wl:#458100}
.mobnav li:nth-child(6){--wl:#7B7500}
.mobnav li:nth-child(7){--wl:#C24E00}
.mobnav li:nth-child(8){--wl:#DE0000}
.mobnav li:nth-child(9){--wl:#B50000}
.mobnav a[aria-current="page"]{color:var(--graphite)}

.mobnav .langs{
  margin-top:auto;padding-top:26px;
  border:0;border-top:1px solid var(--rule);
  padding-inline-start:0;margin-inline-start:0;gap:0;
}
.mobnav .langs a{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;
  padding:12px 16px 12px 0;font-weight:400;
}
[dir="rtl"] .mobnav .langs a{padding:12px 0 12px 16px}
.mobnav .langs a::before{display:none}

/* ---------- cibles tactiles ---------- */
.langs a{padding:10px 2px}
.nav[data-fit="full"] .langs{align-items:center}

/* le bouton de la vidéo doit rester atteignable sans survol */
@media (hover:none){
  .vid-toggle{opacity:1;width:44px;height:44px}
  .missions a:hover{padding-left:26px}
  [dir="rtl"] .missions a:hover{padding-left:0;padding-right:26px}
}

/* ---------- comparateur sur petit écran ---------- */
@media (max-width:520px){
  .cmp-legend{
    position:static;min-width:0;width:100%;
    background:var(--plate);color:var(--ink);
    border-top:1px solid var(--rule);backdrop-filter:none;
  }
  .cmp-key{white-space:normal}
  figure.fig:has(.cmp){display:flex;flex-direction:column}
}

/* ---------- écrans courts : téléphone en paysage ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding-top:clamp(34px,7vh,64px);padding-bottom:clamp(28px,5vh,48px)}
  .band-inner{padding:clamp(34px,6vh,72px) 0}
  .nav-inner,.nav[data-fit="full"] .nav-inner,.nav[data-fit="compact"] .nav-inner{
    height:54px;min-height:54px;
  }
  .mobnav{padding-top:calc(54px + env(safe-area-inset-top))}
  .mobnav a{padding:12px 0 12px 26px;font-size:16px}
  [dir="rtl"] .mobnav a{padding:12px 26px 12px 0}
  .mobnav .langs{padding-top:16px}
}

/* ---------- formulaires ----------
   16 px minimum : en dessous, iOS zoome à la prise de focus
   et le visiteur se retrouve décadré. */
input,textarea,select,button{font-size:max(16px,1em)}
.form input,.form textarea{font-size:16px!important}

/* ---------- confort de lecture ---------- */
@media (max-width:640px){
  .hero h1,h2.thesis,.principle,.nots h3{
    overflow-wrap:break-word;hyphens:auto;
  }
  .principle{max-width:none}
  .hero h1{max-width:none}
  .caption{align-items:flex-start}
  .plate{padding:18px}
}

/* état initial, avant que le script n'ait mesuré : sous 1080 px le
   panneau est la seule mise en page plausible, on l'affiche d'emblée
   pour qu'aucune barre repliée ne clignote au chargement. */
@media (max-width:1080px){
  .nav:not([data-fit]) nav,
  .nav:not([data-fit]) .langs{display:none}
  .nav:not([data-fit]) .nav-inner{flex-wrap:nowrap;height:64px;padding-block:0}
}