/* ------------------------------------------------------------------
   Polices auto-hebergees : Newsreader et Inter, variables sur l axe
   de graisse, sous-ensembles latin et latin-ext. Aucun appel a un
   service tiers au chargement des pages.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(polices/newsreader-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(polices/newsreader-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(polices/inter-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(polices/inter-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------------
   Gouvernance IA - gouvernanceia.fr
   Typographie : Newsreader (titres) et Inter (texte et appareil).
   Palette : encre bleu nuit, fond sable, rouge en accent.
   Revision : 5 octobre 2026 (declinaison France)
   ------------------------------------------------------------------ */

:root {
  /* Fonds clairs */
  --fond:        #f4efe6;  /* fond de page, sable clair */
  --fond-haut:   #efe8db;  /* pied de page */
  --papier:      #fdfaf4;  /* cartouches et grilles */
  --bloc:        #eae2d4;
  --filet:       #ded5c5;

  /* Aplats sombres : bandeaux de tete et blocs de voix editoriale */
  --sombre:      #1f2a3f;
  --sur-sombre:  #f0ebe1;
  --sur-sombre-doux: rgba(240, 235, 225, .74);

  /* Textes */
  --encre:       #1b2437;
  --encre-mi:    #2c3850;
  --encre-tiers: #44506a;
  --gris:        #5a6378;
  --gris-tenu:   #8089a0;

  /* Rouge */
  --rouge:       #c0392b;
  --rouge-fonce: #a8302a;  /* petits textes rouges sur fond clair */
  --rouge-clair: #f2776a;  /* rouge sur fond sombre */
  --rouge-plein: #c0392b;

  /* Schemas */
  --sch-n1:      #1b2437;
  --sch-n2:      #2c3850;
  --sch-n3:      #44506a;
  --sch-n5:      #5a6378;
  --sch-n4:      #ded5c5;
  --sch-acc:     #c0392b;
  --sch-acc-t:   #a8302a;
  --sch-fort:    #1b2437;
  --sch-doux:    #5a6378;
  --sch-trait:   #ded5c5;
  --sch-sur1:    #ffffff;
  --sch-sur1b:   rgba(255, 255, 255, .72);
  --sch-sur2:    #ffffff;
  --sch-sur2b:   rgba(255, 255, 255, .76);
  --sch-sur4:    #1b2437;
  --sch-sur4b:   #44506a;

  --enveloppe:   46rem;
  --large:       60rem;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.64;
  -webkit-font-smoothing: antialiased;
}

.enveloppe { max-width: var(--enveloppe); margin: 0 auto; padding: 0 1rem; }

/* ---------- Liens ---------- */

a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--rouge); }
a:hover, a:focus { color: var(--rouge-fonce); border-bottom-color: var(--rouge-fonce); }
a:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* ---------- Bandeau de navigation ---------- */

.tete { border-top: 5px solid var(--rouge); background: var(--fond); border-bottom: 1px solid var(--filet); }
.tete .enveloppe, .pied .enveloppe { max-width: var(--large); }

/* Bandeau de tete a deux rangees.
   Le verrouillage occupe la premiere rangee seul. La navigation occupe la
   seconde, sous un filet. Les deux registres se distinguaient mal tant qu ils
   partageaient une ligne de base : descripteur et liens de menu ont la meme
   famille, la meme graisse, la meme casse et le meme gris, de sorte que cinq
   entrees de menu s en lisaient six. La separation par rangee leve la
   confusion, et l encre plus soutenue des liens marque ce qui se clique. */

.tete-corps {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 2rem;
  padding-top: 1.15rem;
  padding-bottom: 0;
}

/* Verrouillage du logo et du nom, piste 1 : le mark ouvre la ligne de tete.
   Le mark epouse le corps du nom. Le descripteur court sous l ensemble, et son
   interlettrage est cale pour que sa largeur egale celle de la ligne superieure,
   mark compris. Le bloc forme ainsi un rectangle ferme sur ses quatre cotes.
   Toute reprise de la taille du nom ou de la gouttiere demande un nouveau calage
   de l interlettrage du descripteur, palier par palier. */

.marque {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  color: var(--encre);
  text-decoration: none;
}
.marque:hover { color: var(--encre); }
.marque:hover .marque-nom { color: var(--rouge-fonce); }

.marque-haut {
  display: flex;
  align-items: center;
  gap: .68rem;              /* .48 em du nom */
}

.marque .logo-marque {
  flex: 0 0 auto;
  width: 1.42rem;           /* corps du nom */
  height: 1.42rem;
  display: block;
}

.marque-nom {
  display: block;
  white-space: nowrap;
  font-family: var(--serif);
  font-size: 1.42rem;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1;
  text-transform: uppercase;
  transition: color .15s ease;
}

.marque-sous {
  display: block;
  white-space: nowrap;
  margin-top: .44rem;
  font-family: var(--sans);
  font-size: .525rem;
  font-weight: 600;
  letter-spacing: .3093em;  /* calage optique sur la ligne superieure, recale pour « France » */
  text-transform: uppercase;
  color: var(--gris);
}

.menu {
  flex: 0 0 100%;
  margin-top: .88rem;
  border-top: 1px solid var(--filet);
  padding: .62rem 0 .66rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.menu ul { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; margin: 0; padding: 0; list-style: none; }
.menu a { border-bottom: 2px solid transparent; color: var(--encre-mi); padding-bottom: 1px; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--rouge-fonce); border-bottom-color: var(--rouge); }

/* ---------- Bandeau de tete ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--sombre);
  color: var(--sur-sombre);
  border-bottom: 3px solid var(--rouge);
}
.hero h1 { color: var(--sur-sombre); }
.hero .rubrique { color: var(--rouge-clair); }
.hero.fond-points::before { background-image: radial-gradient(rgba(240, 235, 225, .16) 1px, transparent 1px); }
.hero .reseau {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  --reseau-rgb: 240, 235, 225;
  --reseau-accent: #ef6a5a;
}
.hero-corps {
  position: relative;
  padding-top: clamp(2.5rem, 1.6rem + 2.8vw, 3.8rem);
  padding-bottom: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
}
.hero .chapeau { color: var(--sur-sombre); border-bottom: 2px solid var(--rouge); max-width: 33rem; margin-bottom: 0; }
.hero .signature { color: var(--sur-sombre-doux); border-bottom-color: rgba(240, 235, 225, .22); margin-bottom: 0; }
.hero .signature a { color: var(--sur-sombre-doux); border-bottom-color: rgba(240, 235, 225, .34); }
.hero .signature a:hover { color: var(--rouge-clair); border-bottom-color: var(--rouge-clair); }
.hero .chapeau + .signature { margin-top: 1.1rem; border-bottom: 0; padding-bottom: 0; }

/* ---------- Trame de points ---------- */

.fond-points::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(27, 36, 55, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.fond-points > * { position: relative; }

/* ---------- Corps de page ---------- */

.page { padding-top: 2.6rem; padding-bottom: 4rem; counter-reset: sec; }

.rubrique {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  margin: 0 0 1rem;
}
.rubrique::before {
  content: "";
  display: inline-block;
  width: 1.5rem; height: 2px;
  background: var(--rouge);
  margin-right: .55rem;
  vertical-align: .28em;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(2.05rem, 1.5rem + 2.6vw, 3.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.016em;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}

.chapeau {
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.05rem + .6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -.004em;
  color: var(--encre);
  margin: 0 0 1.9rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--filet);
  max-width: 33rem;
}

h2 {
  font-family: var(--serif);
  font-size: clamp(1.42rem, 1.2rem + .9vw, 1.9rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.012em;
  margin: 3rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 2px solid var(--encre);
  text-wrap: balance;
}

.page > h2::before,
.bloc > h2::before,
.bloc-veia > h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  display: block;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--rouge-fonce);
  margin-bottom: .55rem;
}

h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; margin: 1.9rem 0 .45rem; }

p { margin: 0 0 1.15rem; max-width: 36rem; }

/* ---------- Encadre de these ---------- */

.reponse-directe {
  position: relative;
  overflow: hidden;
  background: var(--sombre);
  color: var(--sur-sombre);
  border-left: 5px solid var(--rouge);
  padding: 1.6rem 1.7rem;
  margin: 0 0 2.6rem;
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.44;
  letter-spacing: -.004em;
}
.reponse-directe::before { background-image: radial-gradient(rgba(240, 235, 225, .15) 1px, transparent 1px); }
.reponse-directe p { max-width: 33rem; margin-bottom: 0; }
.reponse-directe p + p { margin-top: .85rem; }

/* ---------- Figures ---------- */

.figure { margin: 2rem 0 2.5rem; }
.figure figcaption {
  margin-top: .95rem;
  padding-top: .6rem;
  border-top: 1px solid var(--filet);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--gris);
  max-width: 36rem;
}
.figure figcaption b { color: var(--encre); font-weight: 600; }

.schema { display: block; width: 100%; height: auto; }
.schema text { font-family: var(--sans); }

.grille-num {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--filet);
  border: 1px solid var(--filet);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: objet;
}
.grille-num li { background: var(--papier); padding: 1.05rem 1.15rem 1.25rem; }
.grille-num li::before {
  counter-increment: objet;
  content: counter(objet, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--rouge);
  margin-bottom: .5rem;
}
.grille-num b { display: block; font-size: .95rem; font-weight: 600; margin-bottom: .3rem; }
.grille-num span { display: block; font-size: .85rem; line-height: 1.5; color: var(--gris); }

.echelle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.echelle .barre { display: block; height: 3rem; }
.echelle li:nth-child(2) .barre { background: var(--filet); }
.echelle li:nth-child(3) .barre { background: var(--gris-tenu); }
.echelle li:nth-child(4) .barre { background: var(--encre-tiers); }
.echelle li:nth-child(5) .barre { background: var(--rouge); }
.echelle b { display: block; font-size: .85rem; font-weight: 600; margin: .6rem 0 .25rem; }
.echelle span { display: block; font-size: .79rem; line-height: 1.45; color: var(--gris); }
.echelle .seuil {
  grid-column: 1 / -1;
  order: -1;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  text-align: right;
  padding-bottom: .4rem;
}
@media (max-width: 36rem) {
  .echelle { grid-template-columns: 1fr; gap: .9rem; }
  .echelle .barre { height: 1rem; }
  .echelle b { margin-top: .45rem; }
  .echelle .seuil { text-align: left; }
}

.frise { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin: 0; padding: 0; list-style: none; }
.frise li { padding-top: .55rem; border-top: 4px solid var(--encre); }
.frise li:first-child, .frise li:last-child { border-top-color: var(--rouge); }
.frise b { display: block; font-size: .79rem; font-weight: 600; margin-bottom: .2rem; padding-right: .9rem; hyphens: auto; }
.frise span { display: block; font-size: .69rem; line-height: 1.4; color: var(--gris); padding-right: .9rem; }
@media (max-width: 46rem) { .frise { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.2rem; } }
@media (max-width: 24rem) { .frise { grid-template-columns: 1fr; } }

.temps { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); counter-reset: temps; }
.temps li {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 0 1.2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet);
}
.temps li::before {
  counter-increment: temps;
  content: counter(temps, decimal-leading-zero);
  grid-row: 1 / span 3;
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: .95;
  color: var(--rouge);
}
.temps b { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; letter-spacing: -.008em; }
.temps .q { font-size: .89rem; color: var(--encre); }
.temps .s { font-size: .79rem; color: var(--gris); }
.temps .s::before {
  content: "Sortie";
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  margin-right: .5rem;
}
@media (max-width: 30rem) {
  .temps li { grid-template-columns: 1fr; gap: .15rem; }
  .temps li::before { grid-row: auto; font-size: 1.3rem; }
}

.chrono { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.chrono li {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: .2rem 1.4rem;
  padding: 1rem 0 1.05rem;
  border-bottom: 1px solid var(--filet);
}
.chrono .d {
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--encre);
  position: relative;
  padding-left: 1.1rem;
}
.chrono .d::before {
  content: "";
  position: absolute;
  left: 0; top: .45em;
  width: .5rem; height: .5rem;
  background: var(--rouge);
}
.chrono li.futur .d { color: var(--gris); }
.chrono li.futur .d::before { background: transparent; border: 2px solid var(--rouge); }
.chrono .f { font-size: .93rem; line-height: 1.55; }
.chrono .f b { font-weight: 600; }
.chrono .src { display: block; margin-top: .3rem; font-size: .73rem; color: var(--gris); }
.chrono .src a { border-bottom-color: var(--filet); color: var(--gris); }
.chrono .src a:hover { color: var(--rouge-fonce); border-bottom-color: var(--rouge-fonce); }
@media (max-width: 34rem) {
  .chrono li { grid-template-columns: 1fr; }
  .chrono .f { padding-left: 1.1rem; }
}

.domaines { margin: 0; padding: 0; list-style: none; counter-reset: dom; }
.domaines li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: center;
  gap: 0 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--filet);
}
.domaines li:first-child { border-top: 2px solid var(--encre); }
.domaines li::before {
  counter-increment: dom;
  content: counter(dom, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--rouge);
}
.domaines b { font-size: .96rem; font-weight: 400; }

/* ---------- Appareil de reference ---------- */

.liste-definitions { margin: 1.5rem 0 2rem; border-top: 2px solid var(--encre); }
.liste-definitions > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: .3rem 1.4rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--filet);
}
.liste-definitions dt { font-size: .89rem; font-weight: 600; line-height: 1.4; }
.liste-definitions dd { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--gris); }
@media (max-width: 34rem) { .liste-definitions > div { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- Blocs de note ---------- */

.bloc { margin: 0 0 2rem; padding-top: 1.1rem; border-top: 1px solid var(--filet); }
.bloc > h2 {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 .8rem;
  padding: 0;
  border: 0;
}
.bloc > h2::before { margin-bottom: .35rem; }
.bloc > :last-child { margin-bottom: 0; }

.bloc-veia {
  position: relative;
  overflow: hidden;
  background: var(--sombre);
  color: var(--sur-sombre);
  border-left: 5px solid var(--rouge);
  padding: 1.6rem 1.7rem .5rem;
  margin: 2.6rem 0 2rem;
}
.bloc-veia::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(240, 235, 225, .15) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.bloc-veia > * { position: relative; }
.bloc-veia > h2 {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin: 0 0 .9rem;
  padding: 0;
  border: 0;
}
.bloc-veia > h2::before { color: var(--rouge-clair); margin-bottom: .35rem; }
.bloc-veia p { max-width: 33rem; }

.sources-liste { margin: 0; padding: 0; list-style: none; font-size: .89rem; line-height: 1.55; }
.sources-liste li { padding: .6rem 0; border-bottom: 1px solid var(--filet); overflow-wrap: anywhere; }
.sources-liste li:first-child { padding-top: 0; }

/* ---------- Cartouches et sommaires ---------- */

.cartouche { border-top: 4px solid var(--rouge); background: var(--papier); padding: 1.6rem 1.6rem 1.7rem; margin: 0 0 2.6rem; }
.cartouche .rubrique { margin-bottom: .7rem; }
.cartouche h2 {
  font-family: var(--serif);
  margin: 0 0 .85rem;
  padding: 0;
  border: 0;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.014em;
}
.cartouche h2::before { content: none; }
.cartouche h2 a { border: 0; color: var(--encre); }
.cartouche h2 a:hover { color: var(--rouge-fonce); }
.cartouche p { margin-bottom: .95rem; }
.cartouche > :last-child { margin-bottom: 0; }

.sommaire { margin: 1.4rem 0 2rem; padding: 0; list-style: none; border-top: 2px solid var(--encre); }
.sommaire li { padding: 1.1rem 0; border-bottom: 1px solid var(--filet); }
.sommaire h3 { font-family: var(--serif); margin: 0 0 .35rem; font-size: 1.3rem; font-weight: 400; letter-spacing: -.012em; line-height: 1.18; }
.sommaire h3 a { border: 0; color: var(--encre); }
.sommaire h3 a:hover { color: var(--rouge-fonce); }
.sommaire p { margin: 0; font-size: .91rem; color: var(--gris); }
.sommaire .date {
  display: block;
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge-fonce);
  margin-bottom: .4rem;
}

.lien-fort {
  display: inline-block;
  background: var(--rouge-plein);
  color: #fff;
  border: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .66rem 1.1rem;
}
.lien-fort:hover, .lien-fort:focus { background: var(--encre); color: #fff; }

.aller-plus-loin {
  margin: 3rem 0 0;
  padding-top: 1.3rem;
  border-top: 2px solid var(--encre);
  font-size: .93rem;
  color: var(--gris);
}
.aller-plus-loin a { color: var(--encre); }
.aller-plus-loin .rubrique { margin-bottom: .6rem; }

/* ---------- Signature ---------- */

.signature {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .015em;
  color: var(--gris);
  margin: 0 0 2.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
  max-width: none;
}
.signature a { color: var(--gris); border-bottom-color: var(--filet); }
.signature a:hover { color: var(--rouge-fonce); border-bottom-color: var(--rouge-fonce); }

/* ---------- Pied de page ---------- */

.pied {
  position: relative;
  overflow: hidden;
  background: var(--fond-haut);
  border-top: 5px solid var(--rouge);
  padding: 2.5rem 0 3rem;
  font-size: .83rem;
  line-height: 1.62;
  color: var(--gris);
}
.pied-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.9rem; margin-bottom: 1.9rem; }
.pied h2 {
  font-family: var(--sans);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--encre);
  margin: 0 0 .7rem;
  padding: 0;
  border: 0;
}
.pied h2::before { content: none; }
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li { margin-bottom: .33rem; }
.pied a { color: var(--encre); border-bottom-color: var(--filet); }
.pied a:hover { color: var(--rouge-fonce); border-bottom-color: var(--rouge-fonce); }
.pied p { margin: 0 0 .7rem; max-width: none; }
.pied-bas { padding-top: 1.3rem; border-top: 1px solid var(--filet); font-size: .75rem; color: var(--gris); }


/* ---------- Couleurs des schemas ---------- */

.schema .f-n1 { fill: var(--sch-n1); }
.schema .f-n2 { fill: var(--sch-n2); }
.schema .f-n3 { fill: var(--sch-n3); }
.schema .f-n5 { fill: var(--sch-n5); }
.schema .f-n4 { fill: var(--sch-n4); }
.schema .f-acc { fill: var(--sch-acc); }
.schema .s-acc { stroke: var(--sch-acc); }
.schema .s-n1 { stroke: var(--sch-n1); }
.schema .s-n3 { stroke: var(--sch-n3); }
.schema .s-trait { stroke: var(--sch-trait); }
.schema .t-fort { fill: var(--sch-fort); }
.schema .t-doux { fill: var(--sch-doux); }
.schema .t-acc { fill: var(--sch-acc-t); }
.schema .t-sur1 { fill: var(--sch-sur1); }
.schema .t-sur1b { fill: var(--sch-sur1b); }
.schema .t-sur2 { fill: var(--sch-sur2); }
.schema .t-sur2b { fill: var(--sch-sur2b); }
.schema .t-sur4 { fill: var(--sch-sur4); }
.schema .t-sur4b { fill: var(--sch-sur4b); }

/* ---------- Apparition ---------- */

.js [data-apparition] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
}
.js [data-apparition].vu { opacity: 1; transform: none; }

/* ---------- Accessibilite ---------- */

.saut { position: absolute; left: -9999px; }
.saut:focus {
  position: static;
  display: inline-block;
  margin: .6rem 1rem;
  padding: .45rem .8rem;
  background: var(--rouge-plein);
  color: #fff;
  border: 0;
  font-size: .8rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
  .js [data-apparition] { opacity: 1; transform: none; }
}

/* ---------- Impression ---------- */

@media print {
  body { background: #fff; color: #111; font-size: 10.5pt; }
  .tete, .pied, .menu, .aller-plus-loin, .hero .reseau, .fond-points::before { display: none; }
  .hero { background: #fff; color: #111; border-bottom: 2px solid #111; }
  .hero h1, .hero .chapeau, .hero .rubrique, .hero .signature { color: #111; }
  a { border: 0; color: #111; }
  .page { padding-top: 0; }
  .reponse-directe, .bloc-veia { background: #fff; color: #111; border: 1px solid #111; border-left: 4px solid #111; }
  .bloc-veia::before { display: none; }
  .bloc-veia > h2 { color: #111; }
  .figure, .chrono li, .temps li { break-inside: avoid; }
  .js [data-apparition] { opacity: 1; transform: none; }
}

/* ==================================================================
   Menu de la version portable
   ================================================================== */

.bascule-menu {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: .5rem .85rem;
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--encre);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}
.bascule-menu:hover { border-color: var(--rouge); color: var(--rouge-fonce); }
.bascule-menu:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }

.bascule-menu .barres { position: relative; display: block; width: 18px; height: 2px; background: var(--rouge); }
.bascule-menu .barres::before,
.bascule-menu .barres::after {
  content: "";
  position: absolute;
  left: 0;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--rouge);
  transition: transform .2s ease;
}
.bascule-menu .barres::before { top: -6px; }
.bascule-menu .barres::after { top: 6px; }
.bascule-menu[aria-expanded="true"] .barres { background: transparent; }
.bascule-menu[aria-expanded="true"] .barres::before { transform: translateY(6px) rotate(45deg); }
.bascule-menu[aria-expanded="true"] .barres::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 46rem) {
  .tete-corps { align-items: center; gap: .5rem .8rem; padding-bottom: .95rem; }
  .marque-nom { font-size: 1.16rem; }
  .marque-sous { font-size: .429rem; margin-top: .36rem; letter-spacing: .3035em; }
  .marque-haut { gap: .556rem; }
  .marque .logo-marque { width: 1.16rem; height: 1.16rem; }
  .js .bascule-menu { display: inline-flex; }
  /* En portable la navigation se replie derriere le bouton : la rangee et son
     filet ne servent plus, la liste depliee porte ses propres separateurs. */
  .menu { flex: 0 0 100%; margin-top: 0; border-top: 0; padding: 0; }
  .js .menu { display: none; }
  .js .menu.ouvert { display: block; }
  .menu ul {
    flex-direction: column;
    gap: 0;
    margin-top: .4rem;
    border-top: 1px solid var(--filet);
  }
  .menu li { border-bottom: 1px solid var(--filet); }
  .menu a {
    display: block;
    padding: .9rem .2rem .9rem 0;
    border-bottom: 0;
  }
  .menu a[aria-current="page"] { border-bottom: 0; padding-left: .7rem; box-shadow: inset 3px 0 0 var(--rouge); }
}

@media (prefers-reduced-motion: reduce) {
  .bascule-menu .barres::before, .bascule-menu .barres::after { transition: none; }
}

@media print { .bascule-menu { display: none; } }

/* Ecrans etroits : le mot Menu laisse la place au seul pictogramme,
   pour que le verrouillage du logo et le bouton tiennent sur une ligne */
@media (max-width: 26rem) {
  .bascule-menu { padding: .5rem .7rem; gap: 0; }
  .bascule-menu span:not(.barres) { position: absolute; left: -9999px; }
}

/* Tres petits ecrans : echelle typographique reduite, proportions tenues */
@media (max-width: 24rem) {
  .marque-nom { font-size: 1.02rem; }
  .marque-sous { font-size: .377rem; margin-top: .32rem; letter-spacing: .3245em; }
  .marque-haut { gap: .489rem; }
  .marque .logo-marque { width: 1.02rem; height: 1.02rem; }
}

/* Panneaux etroits : le sous-titre se retire, le verrouillage passe au
   rapport d un bloc d une seule ligne, M = B x phi */
@media (max-width: 19rem) {
  .marque-sous { display: none; }
}

/* ------------------------------------------------------------------
   Declinaison France : tableau de reference et etiquettes de statut.
   Le tableau defile dans son cadre sur portable, la page reste fixe.
   ------------------------------------------------------------------ */

.tableau-cadre {
  margin: 1.6rem 0 2.2rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--encre);
}
.tableau {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .86rem;
  line-height: 1.5;
  background: var(--papier);
}
.tableau caption {
  caption-side: bottom;
  text-align: left;
  padding: .7rem 0 0;
  font-size: .8rem;
  color: var(--gris);
  background: var(--fond);
}
.tableau caption b { color: var(--encre); font-weight: 600; }
.tableau th, .tableau td {
  padding: .7rem .8rem .7rem 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  vertical-align: top;
}
.tableau th:first-child, .tableau td:first-child { padding-left: .8rem; }
.tableau thead th {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
  background: var(--fond-haut);
}
.tableau tbody th { font-weight: 600; color: var(--encre); min-width: 7.5rem; }
.tableau.large { min-width: 46rem; }
.tableau td { color: var(--encre-mi); }
.tableau-note { font-size: .8rem; color: var(--gris); margin: 0 0 2rem; }

.statut {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .18rem .45rem;
  border: 1px solid var(--encre);
  color: var(--encre);
}
.statut.vigueur { background: var(--encre); color: var(--sur-sombre); }
.statut.venir { border-color: var(--rouge-fonce); color: var(--rouge-fonce); }
.statut.projet { border-style: dashed; }
.statut.reco { border-color: var(--gris); color: var(--gris); }

.qualif {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gris);
}

@media print {
  .tableau-cadre { overflow: visible; }
  .tableau { min-width: 0; background: #fff; }
  .tableau thead th { background: #fff; }
  .statut.vigueur { background: #fff; color: #000; }
}