@import url('fonts.css');

/* ==========================================================================
   DArE — trame porteuse
   Le site est un plan coté : axes, chaînes de cote, ligne de sol, cartouche.
   Palette prise sur l'encre du logo (#2A3189), pas sur une charte reconstruite.
   ========================================================================== */

:root{
  /* encres */
  --encre:#2A3189;          /* ink du monogramme AD */
  --marine:#0C447C;         /* bleu DArE, aplats de région */
  --nuit:#1B2E6E;           /* fond profond — indigo DArE */
  --trait:#5B9BD5;          /* lignes de construction */
  --trait-clair:#B8D2EC;
  --jaune:#FFC300;          /* valeur active, état — rare */

  /* papiers */
  --papier:#FBFBFC;
  --papier-blanc:#FFFFFF;
  --trame:#DFE4EE;
  --trame-forte:#C3CCDD;

  /* textes */
  --texte:#141A33;
  --texte-doux:#535E7A;
  --texte-sur-nuit:#EAEFF8;
  --texte-doux-sur-nuit:#AFC2DE;

  /* mesures */
  --marge:clamp(16px, 4vw, 56px);
  --rail:clamp(0px, 6vw, 104px);      /* colonne des niveaux, à gauche */
  --entete:64px;
  --fil:1px;
  --rayon:0px;

  /* rythme vertical */
  --pas:8px;
  --section:clamp(72px, 11vh, 140px);

  --ease:cubic-bezier(.16,.84,.34,1);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--entete) + 16px);
}

body{
  margin:0;
  padding-left:var(--rail);
  background:var(--papier);
  color:var(--texte);
  font-family:'Titillium Web', system-ui, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}

/* --- surfaces du navigateur : elles portent le dessin, elles aussi ------- */
::selection{background:var(--jaune);color:var(--nuit)}
:focus-visible{
  outline:2px solid var(--jaune);
  outline-offset:3px;
}
html{scrollbar-color:var(--trait) var(--papier);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--papier)}
::-webkit-scrollbar-thumb{background:var(--trait);border:3px solid var(--papier)}
::-webkit-scrollbar-thumb:hover{background:var(--encre)}

/* ==========================================================================
   Primitives de dessin
   ========================================================================== */

/* libellé de cote : petites capitales espacées, jamais un eyebrow de titre */
.cote{
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--texte-doux);
  line-height:1.2;
}
.cote--sombre{color:var(--texte-doux-sur-nuit)}
.cote--val{color:var(--encre);font-weight:700}

/* valeur mesurée : le seul endroit où le jaune apparaît sur papier */
.valeur{
  font-weight:700;
  color:var(--texte);
  box-shadow:inset 0 -.34em 0 rgba(255,195,0,.55);
}

/* axe vertical (trait d'axe : tiret long, point) */
.axe{
  position:absolute;top:0;bottom:0;width:1px;
  background-image:linear-gradient(to bottom,var(--trait-clair) 0 14px,transparent 14px 20px,var(--trait-clair) 20px 23px,transparent 23px 29px);
  background-size:1px 29px;
  pointer-events:none;
}
.axe__bulle{
  position:absolute;top:0;left:50%;
  width:30px;height:30px;margin-left:-15px;
  border:1px solid var(--trait);
  border-radius:50%;
  background:var(--papier);
  display:grid;place-items:center;
  font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--encre);
}

/* chaîne de cote horizontale */
.chaine{position:relative;height:34px;margin:0}
.chaine__ligne{
  position:absolute;left:0;right:0;top:17px;height:1px;background:var(--trait);
  transform-origin:left center;
}
.chaine__tick{
  position:absolute;top:8px;width:1px;height:18px;background:var(--encre);
  transform:rotate(45deg);
}
.chaine__seg{
  position:absolute;top:-5px;transform:translateX(-50%);
  background:var(--papier);padding:0 10px;
}

/* ligne de sol + terre hachurée */
.sol{
  position:relative;height:3px;background:var(--nuit);
}
.sol::after{
  content:"";position:absolute;left:0;right:0;top:3px;height:16px;
  background:repeating-linear-gradient(45deg,var(--trait-clair) 0 1px,transparent 1px 7px);
  opacity:.9;
}

/* ==========================================================================
   Cartouche de tête
   ========================================================================== */
.entete{
  position:sticky;top:0;z-index:60;
  height:var(--entete);
  background:rgba(251,251,252,.92);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--trame);
  display:flex;align-items:center;gap:24px;
  padding:0 var(--marge);
}
.entete__logo{display:flex;align-items:center;gap:0;text-decoration:none;flex:0 0 auto}
.entete__logo img{height:30px;width:auto}
.entete__nav{
  display:flex;align-items:center;gap:2px;margin-left:auto;
}
.entete__lien{
  position:relative;
  padding:8px 13px;
  text-decoration:none;
  font-size:14px;font-weight:600;color:var(--texte);
  letter-spacing:.005em;
}
.entete__lien::after{
  content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2px;
  background:var(--encre);
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.entete__lien:hover::after,.entete__lien:focus-visible::after{transform:scaleX(1)}
.entete__action{
  margin-left:14px;
}
.entete__burger{
  display:none;margin-left:auto;
  width:44px;height:44px;border:1px solid var(--trame-forte);background:none;
  align-items:center;justify-content:center;cursor:pointer;padding:0;
}
.entete__burger span{display:block;width:19px;height:1px;background:var(--texte);position:relative}
.entete__burger span::before,.entete__burger span::after{
  content:"";position:absolute;left:0;width:19px;height:1px;background:var(--texte);
}
.entete__burger span::before{top:-6px}
.entete__burger span::after{top:6px}

.langues{display:flex;align-items:center;gap:0;margin-left:16px;padding-left:16px;border-left:1px solid var(--trame)}
.langues a,.langues span{
  text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:var(--texte-doux);padding:4px 6px;
}
.langues span[aria-disabled]{color:var(--trame-forte);cursor:default}
.langues a[aria-current="true"]{color:var(--encre);box-shadow:inset 0 -2px 0 var(--jaune)}

/* ==========================================================================
   Boutons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.03em;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--encre);
  background:var(--encre);color:#fff;
  border-radius:0;
  transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{background:var(--nuit);border-color:var(--nuit)}
.btn:active{transform:translateY(1px)}
.btn__fleche{width:16px;height:8px;flex:0 0 auto;overflow:visible}
.btn__fleche line,.btn__fleche polyline{stroke:currentColor;stroke-width:1.4;fill:none}
.btn:hover .btn__fleche{transform:translateX(3px);transition:transform .22s var(--ease)}

.btn--creux{background:transparent;color:var(--encre)}
.btn--creux:hover{background:var(--encre);color:#fff}
.btn--sombre{background:#fff;border-color:#fff;color:var(--nuit)}
.btn--sombre:hover{background:transparent;border-color:#fff;color:#fff}
.btn--creux-sombre{background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
.btn--creux-sombre:hover{background:#fff;color:var(--nuit);border-color:#fff}

/* ==========================================================================
   Ossature de page
   ========================================================================== */
.page{position:relative}

.bande{
  position:relative;
  padding:var(--section) var(--marge);
}
.bande--nuit{background:var(--nuit);color:var(--texte-sur-nuit)}
.bande--marine{background:var(--marine);color:#fff}
.bande--papier{background:var(--papier-blanc)}

.conteneur{max-width:1320px;margin:0 auto;position:relative}

.titre-bande{
  font-size:clamp(1.9rem,3.6vw,3.05rem);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:700;
  margin:0 0 18px;
  max-width:22ch;
  text-wrap:balance;
}
.chapeau{
  font-size:clamp(1.02rem,1.35vw,1.16rem);
  line-height:1.6;
  color:var(--texte-doux);
  max-width:66ch;
  margin:0;
  font-weight:300;
}
.bande--nuit .chapeau,.bande--marine .chapeau{color:var(--texte-doux-sur-nuit)}
.bande--nuit .titre-bande,.bande--marine .titre-bande{color:#fff}

/* en-tête de bande : la cote à gauche, le titre à droite */
.tete{
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  gap:clamp(16px,3vw,48px);
  align-items:start;
  padding-bottom:clamp(34px,4.5vw,64px);
}
/* marge de feuille : un filet et, quand elle existe, une valeur mesurée.
   Jamais le nom de la section — un titre porte son propre poids. */
.tete__reperage{
  padding-top:9px;
  border-top:2px solid var(--encre);
  min-height:2px;
}
.tete__mesure{display:block;font-size:13px;font-weight:700;color:var(--encre);letter-spacing:-.01em}
.bande--nuit .tete__mesure,.bande--marine .tete__mesure{color:#fff}
.tete__mesure small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texte-doux);margin-top:3px}
.bande--nuit .tete__mesure small,.bande--marine .tete__mesure small{color:var(--texte-doux-sur-nuit)}
.bande--nuit .tete__reperage,.bande--marine .tete__reperage{border-top-color:rgba(255,255,255,.55)}

/* ==========================================================================
   1. Ouverture — la trame
   ========================================================================== */
.ouverture{
  position:relative;
  min-height:calc(100svh - var(--entete));
  display:flex;
  padding:0 var(--marge) 0 0;
  overflow:hidden;
}

/* rail des niveaux — fixé sur toute la hauteur : on descend le bâtiment
   pendant qu'on lit la page, et le curseur marque le niveau atteint. */
.niveaux{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);
  z-index:70;
  background:var(--papier);
  border-right:1px solid var(--trame);
  padding:calc(var(--entete) + 28px) 0 34px;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
}
.niveaux__curseur{
  position:absolute;right:-4px;width:7px;height:7px;background:var(--jaune);
  border:1px solid var(--nuit);
  transform:translateY(-50%) rotate(45deg);
  /* le curseur ne parcourt que la zone cotée du rail, pas la barre d'en-tête */
  top:calc(var(--entete) + 32px + (100vh - var(--entete) - 70px) * var(--p, 0));
  transition:top .16s linear;
}
.niveau{
  position:relative;
  padding:0 14px 0 0;
  text-align:right;
}
.niveau::after{
  content:"";position:absolute;right:-1px;top:9px;width:11px;height:1px;background:var(--trait);
}
.niveau__val{
  display:block;font-size:12px;font-weight:700;color:var(--encre);letter-spacing:.02em;
}
.niveau__nom{display:block;font-size:11px;color:var(--texte-doux);letter-spacing:.06em;text-transform:uppercase;font-weight:600}

/* scène */
.scene{
  position:relative;flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;
  padding-left:clamp(16px,3.4vw,54px);
  padding-top:clamp(40px,7vh,86px);
  padding-bottom:0;
}
.scene__axes{position:absolute;top:0;bottom:0;left:clamp(16px,3.4vw,54px);right:0;pointer-events:none}
.scene__axes .axe{top:34px;bottom:112px}

.h1{
  font-size:clamp(2.6rem,7.4vw,6rem);
  line-height:.94;
  letter-spacing:-.04em;
  font-weight:700;
  margin:clamp(28px,5vh,58px) 0 0;
  color:var(--texte);
}
.h1 span{display:block}
.h1__b{padding-left:38%;color:var(--encre)}
.h1__c{padding-left:72%}

/* note de plan, avec sa ligne de rappel */
.note{
  position:relative;
  margin:clamp(26px,4.4vh,48px) 0 0 38%;
  max-width:56ch;
  padding-left:26px;
}
.note::before{
  content:"";position:absolute;left:0;top:11px;width:14px;height:14px;
  border-left:1px solid var(--encre);border-bottom:1px solid var(--encre);
  transform:rotate(0deg);
}
.note::after{
  content:"";position:absolute;left:-1px;top:24px;width:5px;height:5px;
  background:var(--encre);border-radius:50%;transform:translate(-2px,0);
}
.note p{margin:0;font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.58;color:var(--texte-doux);font-weight:300}
.note strong{color:var(--texte);font-weight:600}
.note__lieu{margin-top:12px !important;font-size:13px !important;letter-spacing:.08em;font-weight:600;color:var(--texte-doux)}

.scene__bas{margin-top:auto;padding-top:clamp(30px,6vh,70px)}

.portees{
  position:relative;height:38px;margin-bottom:26px;
}
.portees__label{
  position:absolute;top:-3px;transform:translateX(-50%);
  background:var(--papier);padding:0 12px;white-space:nowrap;
}

.socle{position:relative}
.socle__actions{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:26px 0 clamp(28px,5vh,52px);
}
.socle__monogramme{
  position:absolute;top:-31px;
  width:60px;height:60px;border-radius:50%;
  background:var(--papier);border:1px solid var(--trait);
  display:grid;place-items:center;
  transform:translateX(-50%);
}
.socle__monogramme img{width:33px;height:33px}

/* ==========================================================================
   2. La même signature
   ========================================================================== */
.signature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.signature__texte p{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.62;font-weight:300;
  color:var(--texte-doux-sur-nuit);max-width:60ch;
}
.signature__texte p strong{color:#fff;font-weight:600}
.signature__schema{width:100%;min-width:0}
.signature__schema svg{width:100%;height:auto;max-width:460px}
.signature__faits{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:0;
  margin-top:clamp(40px,6vw,72px);
  border-top:1px solid rgba(255,255,255,.30);
}
.fait{position:relative;padding:20px 26px 0 0}
.fait::before{
  content:"";position:absolute;left:0;top:-9px;width:1px;height:18px;
  background:var(--trait);transform:rotate(45deg);
}
.fait__val{display:block;font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.15}
.fait__nom{display:block;margin-top:6px;font-size:12px;color:var(--texte-doux-sur-nuit);line-height:1.4}

/* ==========================================================================
   3. Trois portées — les missions
   ========================================================================== */
.missions{
  display:grid;
  grid-template-columns:1.22fr 1.06fr .82fr;
  gap:0;
  border-top:2px solid var(--encre);
}
.mission{
  padding:clamp(24px,2.6vw,38px) clamp(20px,2.2vw,34px) clamp(28px,3vw,42px) 0;
  border-right:1px solid var(--trame);
  position:relative;
}
.mission:last-child{border-right:0;padding-right:0}
.mission:not(:first-child){padding-left:clamp(20px,2.2vw,34px)}
.mission__num{
  position:absolute;top:0;right:14px;
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--texte-doux);
}
.mission:last-child .mission__num{right:0}
.mission__icone{width:44px;height:44px;margin-bottom:18px}
.mission__icone *{fill:none;stroke:var(--encre);stroke-width:1.25;stroke-linecap:square}
.mission__titre{
  font-size:clamp(1.28rem,2vw,1.62rem);font-weight:700;letter-spacing:-.02em;
  margin:0 0 12px;line-height:1.14;
}
.mission__texte{margin:0 0 20px;color:var(--texte-doux);font-size:15.5px;line-height:1.58;font-weight:300}
.mission__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--trame)}
.mission__liste li{
  padding:9px 0 9px 20px;border-bottom:1px solid var(--trame);
  font-size:14px;position:relative;font-weight:600;
}
.mission__liste li::before{
  content:"";position:absolute;left:0;top:16px;width:9px;height:1px;background:var(--trait);
}

/* ==========================================================================
   4. Réalisations
   ========================================================================== */
.planches{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(18px,2vw,30px) clamp(18px,2vw,26px);
}
.planche{
  grid-column:span 2;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
}
.planche--large{grid-column:span 3}
.planche--pleine{grid-column:span 6}
.planche__cadre{
  position:relative;overflow:hidden;
  background:var(--trame);
  border:1px solid var(--trame-forte);
  aspect-ratio:900/563;
}
.planche--pleine .planche__cadre{aspect-ratio:21/9}
.planche__cadre img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.planche:hover .planche__cadre img{transform:scale(1.035)}
.planche__etat{
  position:absolute;left:0;top:0;
  background:var(--papier-blanc);
  border-right:1px solid var(--trame-forte);border-bottom:1px solid var(--trame-forte);
  padding:6px 13px;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--encre);
}
.planche__etat--recu{background:var(--jaune);border-color:var(--jaune);color:var(--nuit)}
/* le repère de mesure qui apparaît au survol */
.planche__mesure{
  position:absolute;right:12px;bottom:12px;
  display:flex;align-items:center;gap:8px;
  background:rgba(18,25,58,.9);color:#fff;
  padding:6px 11px;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.planche:hover .planche__mesure,.planche:focus-visible .planche__mesure{opacity:1;transform:none}
.planche__cartouche{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0 0;border-top:1px solid var(--trame);margin-top:11px;
}
.planche__nom{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.2}
.planche__lieu{margin-left:auto;white-space:nowrap}
.planche__renvoi{
  display:inline-flex;align-items:center;gap:7px;margin-top:9px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre);text-decoration:none;
}
.planche__renvoi::before{
  content:"";width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--trait);
}
.planche__renvoi:hover{box-shadow:inset 0 -1px 0 var(--encre)}
.etude__renvoi{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#fff;text-decoration:none;
}
.etude__renvoi::before{
  content:"";width:15px;height:15px;flex:0 0 auto;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
}
.etude__renvoi:hover{box-shadow:inset 0 -1px 0 rgba(255,255,255,.7)}
.planche__texte{margin:7px 0 0;font-size:14px;line-height:1.52;color:var(--texte-doux);font-weight:300;max-width:56ch}
.planche--pleine .planche__texte{max-width:70ch}

/* le lien d'évitement : hors du flux visuel, mais jamais hors du document
   (un left:-9999px se fait rogner par un conteneur qui coupe le débordement) */
.saut-contenu{
  position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.saut-contenu:focus{
  position:fixed;left:var(--marge);top:12px;z-index:200;
  width:auto;height:auto;padding:13px 22px;clip-path:none;overflow:visible;
}

/* carte */
.carte{
  display:grid;grid-template-columns:minmax(0,640px) minmax(0,320px);
  gap:clamp(20px,3vw,56px);align-items:end;justify-content:start;
  margin-bottom:clamp(34px,4.5vw,64px);
}
.carte__svg{width:100%;height:auto;overflow:visible}
.carte__pays{fill:#EFF3F9;stroke:var(--trait-clair);stroke-width:1}
.carte__pays--wal{fill:#E6EDF7}
.carte__pays--bxl{fill:var(--trait-clair)}
.carte__point{fill:var(--encre)}
.carte__halo{fill:none;stroke:var(--encre);stroke-width:1;opacity:.34}
.carte__siege{fill:var(--jaune);stroke:var(--nuit);stroke-width:1.4}
.carte__echelle line,.carte__echelle path{stroke:var(--texte-doux);stroke-width:1.4;fill:none}
.carte__echelle text{fill:var(--texte-doux);font-family:'Titillium Web',sans-serif;font-size:20px;font-weight:600;letter-spacing:1.4px}
.carte__legende{display:grid;gap:10px}
.carte__ligne{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--texte-doux)}
.carte__puce{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:var(--encre)}
.carte__puce--siege{background:var(--jaune);border:1px solid var(--nuit);transform:rotate(45deg);border-radius:0}

/* ==========================================================================
   5. Stabilité
   ========================================================================== */
.etudes{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);
}
.etude{background:var(--nuit);display:flex;flex-direction:column}
/* la première étude porte la bande : le plan doit se lire, pas se deviner */
.etude--grande{
  grid-column:1 / -1;
  display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr);
  align-items:stretch;
}
.etude--grande .etude__img{aspect-ratio:auto;height:100%;min-height:340px}
.etude--grande .etude__corps{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,2.6vw,40px);
  border-left:1px solid rgba(255,255,255,.15);
}
.etude--grande .etude__titre{font-size:clamp(1.3rem,2.1vw,1.75rem);letter-spacing:-.02em}
.etude--grande .etude__texte{font-size:16px}
.etude__img{aspect-ratio:900/563;overflow:hidden;background:#fff}
.etude__img img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04)}
.etude__corps{padding:20px 22px 24px}
.etude__titre{font-size:1.08rem;font-weight:700;margin:8px 0 8px;line-height:1.2;color:#fff}
.etude__texte{margin:0;font-size:14.5px;line-height:1.55;color:var(--texte-doux-sur-nuit);font-weight:300}

/* ==========================================================================
   6. Barème
   ========================================================================== */
.bareme{border-top:2px solid var(--encre)}
.bareme__ligne{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;align-items:baseline;
  padding:clamp(20px,2.5vw,30px) 0;
  border-bottom:1px solid var(--trame);
}
.bareme__quoi{margin:0;font-size:clamp(1.08rem,1.7vw,1.35rem);font-weight:600;letter-spacing:-.015em}
.bareme__precision{display:block;margin-top:5px;font-size:13.5px;font-weight:300;color:var(--texte-doux);letter-spacing:0}
.bareme__val{
  font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:700;letter-spacing:-.04em;
  color:var(--encre);line-height:1;white-space:nowrap;
}
.bareme__unite{font-size:.4em;font-weight:600;letter-spacing:0;color:var(--texte-doux);margin-left:6px}
.bareme__pied{margin:22px 0 0;font-size:14px;color:var(--texte-doux);font-weight:300}

/* ==========================================================================
   7. Étapes
   ========================================================================== */
.etapes{position:relative;padding-left:clamp(30px,4.4vw,68px)}
.etapes::before{
  content:"";position:absolute;left:clamp(7px,1vw,14px);top:6px;bottom:24px;width:1px;
  background:var(--trait-clair);
}
.etape{position:relative;padding:0 0 clamp(24px,3vw,38px)}
.etape::before{
  content:"";position:absolute;left:calc(clamp(30px,4.4vw,68px) * -1 + clamp(7px,1vw,14px) - 4px);
  top:9px;width:9px;height:9px;background:var(--papier-blanc);
  border:1px solid var(--encre);transform:rotate(45deg);
}
.etape__titre{margin:0 0 6px;font-size:clamp(1.06rem,1.5vw,1.22rem);font-weight:700;letter-spacing:-.018em}
.etape__texte{margin:0;color:var(--texte-doux);font-size:15.5px;line-height:1.55;font-weight:300;max-width:62ch}
.etape__niveau{position:absolute;left:calc(clamp(30px,4.4vw,68px) * -1 - 62px);top:7px;width:56px;text-align:right}

/* ==========================================================================
   8. Questions
   ========================================================================== */
.questions{border-top:2px solid var(--encre)}
.question{border-bottom:1px solid var(--trame)}
.question summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:16px;
  padding:clamp(16px,1.9vw,22px) 0;
  font-size:clamp(1rem,1.45vw,1.14rem);font-weight:600;letter-spacing:-.012em;
  transition:color .2s var(--ease);
}
.question summary::-webkit-details-marker{display:none}
.question summary:hover{color:var(--encre)}
.question__croix{
  flex:0 0 auto;width:15px;height:15px;margin-top:7px;position:relative;
}
.question__croix::before,.question__croix::after{
  content:"";position:absolute;background:var(--encre);
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.question__croix::before{left:0;top:7px;width:15px;height:1px}
.question__croix::after{left:7px;top:0;width:1px;height:15px}
.question[open] .question__croix::after{transform:rotate(90deg);opacity:0}
.question__corps{
  padding:0 0 clamp(20px,2.4vw,28px) 31px;
  max-width:74ch;
}
.question__corps p{margin:0 0 12px;color:var(--texte-doux);font-size:15.5px;line-height:1.66;font-weight:300}
.question__corps p:last-child{margin-bottom:0}
.question__corps strong{color:var(--texte);font-weight:600}
.question__corps ul{margin:0 0 12px;padding-left:18px;color:var(--texte-doux);font-size:15.5px;line-height:1.62;font-weight:300}
.question__corps li{margin-bottom:5px}

/* ==========================================================================
   9. Contact
   ========================================================================== */
.contact{
  display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:clamp(30px,5vw,80px);
}
.formulaire{display:grid;gap:0}
.champ{position:relative;border-bottom:1px solid rgba(255,255,255,.28);padding-top:22px}
.champ label{
  display:block;font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--texte-doux-sur-nuit);margin-bottom:6px;
}
.champ input,.champ textarea{
  width:100%;background:transparent;border:0;padding:0 0 12px;
  font-family:inherit;font-size:16.5px;color:#fff;font-weight:400;
  line-height:1.5;resize:vertical;
}
.champ input::placeholder,.champ textarea::placeholder{color:#93A4C6;opacity:1}
.champ input:focus,.champ textarea:focus{outline:none}
.champ::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--jaune);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.champ:focus-within::after{transform:scaleX(1)}
.champ--miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire__pied{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.formulaire__mention{margin:0;font-size:12.5px;color:var(--texte-doux-sur-nuit);max-width:46ch;line-height:1.5;font-weight:300}
.formulaire__mention a{color:#fff}

.coordonnees{display:grid;gap:0;align-content:start;border-top:1px solid rgba(255,255,255,.28)}
.coord{
  display:flex;gap:16px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.28);
}
.coord__icone{width:20px;height:20px;flex:0 0 auto;margin-top:3px}
.coord__icone *{fill:none;stroke:#C3D2EA;stroke-width:1.3;stroke-linecap:square}
.coord__val{font-size:16px;font-weight:600;color:#fff;text-decoration:none;line-height:1.4;display:block}
.coord__val:hover{box-shadow:inset 0 -1px 0 var(--jaune)}
.coord__note{display:block;font-size:12.5px;color:var(--texte-doux-sur-nuit);margin-top:3px;font-weight:300}

/* ==========================================================================
   Cartouche de pied
   ========================================================================== */
.cartouche{
  background:var(--papier-blanc);
  border-top:2px solid var(--encre);
  padding:clamp(30px,3.6vw,48px) var(--marge) 26px;
}
.cartouche__grille{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:0;border:1px solid var(--trame);
}
.case{padding:18px 20px;border-right:1px solid var(--trame)}
.case:last-child{border-right:0}
.case__titre{display:block;margin-bottom:9px}
.case p{margin:0;font-size:13.5px;line-height:1.6;color:var(--texte-doux);font-weight:300}
.case a{color:var(--texte);text-decoration:none;font-weight:600}
.case a:hover{box-shadow:inset 0 -1px 0 var(--encre)}
.case__logo{height:34px;width:auto;margin-bottom:12px}
.cartouche__bas{
  max-width:1320px;margin:14px auto 0;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}

/* ==========================================================================
   Motion : tout se trace, rien ne flotte
   ========================================================================== */
.js .trace{opacity:0;transform:translateY(14px)}
.js .trace.est-vu{
  opacity:1;transform:none;
  transition:opacity .55s var(--ease),transform .62s var(--ease);
}
.js .trace.est-vu[data-delai="1"]{transition-delay:.07s}
.js .trace.est-vu[data-delai="2"]{transition-delay:.14s}
.js .trace.est-vu[data-delai="3"]{transition-delay:.21s}
.js .trace.est-vu[data-delai="4"]{transition-delay:.28s}

/* la chaîne de cote se trace */
.js .chaine .chaine__ligne{transform:scaleX(0)}
.js .chaine.est-vu .chaine__ligne{transform:scaleX(1);transition:transform .72s var(--ease)}
.js .chaine .chaine__tick,.js .chaine .chaine__seg,.js .chaine .portees__label{opacity:0}
.js .chaine.est-vu .chaine__tick{opacity:1;transition:opacity .3s var(--ease) .5s}
.js .chaine.est-vu .chaine__seg,.js .chaine.est-vu .portees__label{opacity:1;transition:opacity .4s var(--ease) .62s}

/* les axes se tirent du haut vers le bas */
.js .scene__axes .axe{transform:scaleY(0);transform-origin:top}
.js .scene__axes.est-vu .axe{transform:scaleY(1);transition:transform .9s var(--ease)}
.js .scene__axes.est-vu .axe:nth-child(2){transition-delay:.08s}
.js .scene__axes.est-vu .axe:nth-child(3){transition-delay:.16s}
.js .scene__axes .axe__bulle{opacity:0}
.js .scene__axes.est-vu .axe__bulle{opacity:1;transition:opacity .4s var(--ease) .55s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .trace,.js .trace.est-vu{opacity:1;transform:none;transition:none}
  .js .chaine .chaine__ligne,.js .chaine.est-vu .chaine__ligne{transform:scaleX(1);transition:none}
  .js .chaine .chaine__tick,.js .chaine .chaine__seg,.js .chaine .portees__label{opacity:1;transition:none}
  .js .scene__axes .axe{transform:none;transition:none}
  .js .scene__axes .axe__bulle{opacity:1;transition:none}
  .planche__cadre img{transition:none}
  *{scroll-behavior:auto !important}
}

/* ==========================================================================
   Adaptations
   ========================================================================== */
@media (max-width:1080px){
  .missions{grid-template-columns:1fr 1fr;border-top-width:2px}
  .mission:nth-child(2){border-right:0;padding-right:0}
  .mission:nth-child(3){grid-column:1 / -1;border-top:1px solid var(--trame);padding-left:0;padding-top:26px}
  .mission:nth-child(3) .mission__num{right:auto;left:0;top:8px}
  .signature{grid-template-columns:1fr;gap:34px}
  .contact{grid-template-columns:1fr;gap:44px}
  .carte{grid-template-columns:1fr;align-items:start;gap:22px}
  .etudes{grid-template-columns:1fr 1fr}
  .cartouche__grille{grid-template-columns:1fr 1fr}
  .case{border-bottom:1px solid var(--trame)}
  .case:nth-child(2n){border-right:0}
  .case:nth-last-child(-n+2){border-bottom:0}
}

@media (max-width:860px){
  :root{--rail:38px;--entete:58px}
  .entete__nav{
    position:fixed;inset:var(--entete) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papier-blanc);border-bottom:1px solid var(--trame);
    padding:8px var(--marge) 20px;
    display:none;
  }
  .entete__nav.est-ouvert{display:flex}
  .entete__lien{padding:13px 0;border-bottom:1px solid var(--trame);font-size:16px}
  .entete__lien::after{display:none}
  .entete__action{margin:16px 0 0;justify-content:center}
  .langues{margin:14px 0 0;padding:14px 0 0;border-left:0;border-top:1px solid var(--trame)}
  .entete__burger{display:flex}

  /* la trame ne disparaît pas en petit : elle se redérive.
     Un axe unique, une gouttière de niveaux de 26px, et la chaîne de cote
     passe à la verticale — plutôt qu'un filet d'accent qui ne mesure rien. */
  .ouverture{padding-left:var(--marge);min-height:auto;padding-bottom:0}
  .niveaux{width:38px;padding:calc(var(--entete) + 20px) 0 26px}
  .niveau{padding:0 5px 0 0;text-align:right}
  .niveau::after{width:6px;top:7px}
  .niveau__val{font-size:11px;letter-spacing:-.02em}
  .niveau__nom{display:none}
  .scene{padding-left:0;padding-top:40px}
  .scene__axes{left:0;right:auto;width:1px}
  .scene__axes .axe{bottom:96px}
  .scene__axes .axe:nth-child(2),.scene__axes .axe:nth-child(3){display:none}
  .h1{font-size:clamp(2.4rem,11.5vw,3.4rem);padding-left:18px}
  .h1__b,.h1__c{padding-left:18px}
  .note{margin-left:18px}
  .scene__bas{padding-top:40px}
  .portees{height:auto;display:grid;gap:16px;margin-bottom:24px;padding-left:24px}
  .portees .chaine__ligne{
    left:7px;right:auto;top:8px;bottom:8px;width:1px;height:auto;
    transform:none;
  }
  .js .portees.est-vu .chaine__ligne{transform:none}
  .portees .chaine__tick{display:none}
  .portees__label{
    position:static;transform:none;background:none;padding:0 0 0 4px;
  }
  .portees__label::before{
    content:"";position:absolute;left:1px;width:13px;height:1px;
    background:var(--encre);transform:translateY(8px) rotate(45deg);
  }
  .socle__monogramme{left:12px !important;width:46px;height:46px;top:-24px}
  .socle__monogramme img{width:25px;height:25px}
  .socle__actions{padding-bottom:34px}
  .socle__actions .btn{flex:1 1 100%;justify-content:center}

  /* 4. les repères de la bande de faits ne retombent plus sur la ligne du dessus */
  .signature__faits{grid-template-columns:1fr;border-top:0}
  /* le repère à 45° est posé SUR le filet : il faut du dégagement des deux
     côtés, sinon il traverse la légende de la ligne précédente */
  .fait{padding:20px 0 24px;border-top:1px solid rgba(255,255,255,.30)}
  .fait:first-child{border-top:0;padding-top:0}
  .fait:first-child::before{display:none}
  .fait::before{top:-9px}

  /* la valeur de marge passe SOUS le titre : au-dessus, elle ferait un eyebrow */
  .tete{display:flex;flex-direction:column-reverse;align-items:stretch}
  .tete__reperage{border-top:0;border-bottom:2px solid var(--encre);padding:0 0 10px;margin-bottom:14px}
  .bande--nuit .tete__reperage,.bande--marine .tete__reperage{border-bottom-color:rgba(255,255,255,.55)}
  .etape__niveau{display:block;position:static;width:auto;text-align:left;margin-bottom:3px}

  .missions{grid-template-columns:1fr}
  .mission,.mission:nth-child(2),.mission:nth-child(3){
    grid-column:auto;border-right:0;border-top:1px solid var(--trame);
    padding:24px 0 30px;
  }
  .mission:first-child{border-top:0}
  .mission__num,.mission:nth-child(3) .mission__num{right:0;left:auto;top:26px}
  .mission:first-child .mission__num{top:2px}
  .planches{grid-template-columns:1fr}
  .planche,.planche--large,.planche--pleine{grid-column:1 / -1}
  .planche--pleine .planche__cadre{aspect-ratio:900/563}
  .etudes{grid-template-columns:1fr}
  .etude--grande{grid-template-columns:1fr}
  .etude--grande .etude__img{aspect-ratio:900/563;min-height:0}
  .etude--grande .etude__corps{border-left:0;border-top:1px solid rgba(255,255,255,.15)}
  .bareme__ligne{grid-template-columns:1fr;gap:6px}
  .cartouche__grille{grid-template-columns:1fr}
  .case{border-right:0}
}

@media (max-width:520px){
  body{font-size:16px}
  .bareme__val{font-size:2.4rem}
}

/* impression : le plan doit sortir en noir et blanc lisible */
@media print{
  .entete,.socle__actions,.formulaire{display:none}
  body{background:#fff;font-size:11pt}
  .bande--nuit,.bande--marine{background:#fff;color:#000}
  .bande--nuit .chapeau,.bande--marine .chapeau{color:#333}
}

/* ==========================================================================
   Pages de texte (mentions légales, accusé de réception)
   ========================================================================== */
.legal{border-top:2px solid var(--encre);max-width:74ch}
.legal__bloc{padding:clamp(22px,2.6vw,32px) 0;border-bottom:1px solid var(--trame)}
.legal__bloc:last-child{border-bottom:0}
.legal__titre{
  margin:0 0 10px;font-size:clamp(1.06rem,1.6vw,1.26rem);font-weight:700;letter-spacing:-.018em;
}
.legal p{margin:0 0 12px;color:var(--texte-doux);font-size:16px;line-height:1.68;font-weight:300}
.legal p:last-child{margin-bottom:0}
.legal strong{color:var(--texte);font-weight:600}
.legal a{color:var(--encre);text-decoration:none;box-shadow:inset 0 -1px 0 var(--trait)}
.legal a:hover{box-shadow:inset 0 -2px 0 var(--encre)}

/* accusé de réception */
.recu{max-width:62ch;padding-top:clamp(40px,8vh,90px)}
.recu__marque{
  width:64px;height:64px;border:1px solid var(--trait);border-radius:50%;
  display:grid;place-items:center;margin-bottom:26px;
}
.recu__marque svg{width:28px;height:28px;fill:none;stroke:var(--encre);stroke-width:1.6}
.recu h1{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.04;letter-spacing:-.035em;margin:0 0 16px;font-weight:700}
.recu p{color:var(--texte-doux);font-size:17px;line-height:1.62;font-weight:300;margin:0 0 14px;max-width:60ch}
.recu__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}