@charset "utf-8";
/* ==========================================================================
   NESLOU.FR — feuille de style unique
   Aucune dépendance externe : pas de police distante, pas de CDN, pas de script tiers.
   Palette dérivée du logo Neslou (sphère pétrole) + laiton d'instrument de navigation.
   ========================================================================== */

:root {
  /* --- Couleurs ------------------------------------------------------- */
  --abysse:        #06202b;
  --petrole:       #0e3a4d;
  --sphere:        #17627c;
  --ecume:         #9fd3e2;
  --laiton:        #c08a2e;   /* sur fond sombre uniquement */
  --laiton-fonce:  #8a5e12;   /* sur fond clair (contraste AA) */
  --papier:        #eef3f5;
  --papier-clair:  #f9fbfc;
  --encre:         #08191f;
  --encre-doux:    #3b5460;
  --trait:         #c8d7dd;
  --alerte:        #8c2f1d;
  --valide:        #1c6034;

  /* --- Typographie ---------------------------------------------------- */
  --display: "Optima", "Candara", "Gill Sans MT", "Gill Sans", "Trebuchet MS", "Segoe UI", sans-serif;
  --corps:   "Charter", "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --data:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* --- Mesures -------------------------------------------------------- */
  --largeur:  72rem;
  --lecture:  38rem;
  --gouttiere: 1.25rem;
  --rythme:   1.7;
}

@media (min-width: 48rem) { :root { --gouttiere: 2.5rem; } }

/* ==========================================================================
   Réinitialisation mesurée
   ========================================================================== */

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

html {
  /* Pas de font-size fixe : on respecte le réglage du navigateur (WCAG 1.4.4). */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--corps);
  font-size: 1.0625rem;
  line-height: var(--rythme);
  /* Trame discrète : lignes de relèvement d'une rose des vents. */
  background-image:
    repeating-linear-gradient(60deg,  rgba(14,58,77,.028) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(-60deg, rgba(14,58,77,.028) 0 1px, transparent 1px 84px);
}

img { max-width: 100%; height: auto; }

/* ==========================================================================
   Titres et texte
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.18;
  color: var(--petrole);
  text-wrap: balance;
  margin: 0 0 .6em;
}

h1 { font-size: 2.5rem; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -.015em; color: var(--abysse); }
h2 { font-size: 1.7rem; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin-top: 2.6em; }
h3 { font-size: 1.24rem; font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); margin-top: 2.2em; }
h4 { font-size: 1.02rem; margin-top: 1.8em; text-transform: uppercase; letter-spacing: .09em; color: var(--sphere); }

h2:first-of-type, h3:first-of-type { margin-top: 1.4em; }

p, ul, ol, dl { margin: 0 0 1.15em; }
li { margin-bottom: .45em; }
li > ul, li > ol { margin-top: .45em; }

strong { font-weight: 700; color: var(--abysse); }
abbr[title] { text-decoration: underline dotted; cursor: help; }

/* Chapeau d'introduction sous le H1. */
.chapo {
  font-size: 1.2rem;
  line-height: 1.62;
  color: var(--encre-doux);
  max-width: var(--lecture);
}

/* Eyebrow : le relèvement de la page, en petites capitales espacées. */
.releve {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .74rem;
  color: var(--sphere);
  margin: 0 0 .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.releve::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: var(--laiton-fonce);
}

/* ==========================================================================
   Liens
   ========================================================================== */

a {
  color: var(--petrole);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--trait);
}
a:hover { color: var(--laiton-fonce); text-decoration-color: currentColor; }

:focus-visible {
  outline: 3px solid var(--laiton-fonce);
  outline-offset: 3px;
  border-radius: 2px;
}

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--abysse);
  color: #fff;
  padding: .8rem 1.2rem;
  z-index: 100;
  font-family: var(--display);
}
.lien-evitement:focus {
  left: .5rem;
  top: .5rem;
}

/* ==========================================================================
   Ossature
   ========================================================================== */

.contenant {
  max-width: var(--largeur);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gouttiere);
  padding-right: var(--gouttiere);
}

main {
  padding-top: 3rem;
  padding-bottom: 4rem;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
.texte { max-width: 46rem; }
.texte p, .texte li { max-width: var(--lecture); }

/* ==========================================================================
   En-tête
   ========================================================================== */

.entete {
  background: var(--papier-clair);
  border-bottom: 1px solid var(--trait);
}

.entete__haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 0 .9rem;
}

.marque { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.marque img { width: 150px; width: clamp(122px, 17vw, 168px); }
.marque__baseline {
  font-family: var(--display);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--sphere);
  border-left: 1px solid var(--trait);
  padding-left: 1rem;
  line-height: 1.5;
  max-width: 11rem;
}

/* --- Navigation : une table de relèvements ---------------------------- */

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: .45rem 0;
  font-family: var(--display);
  font-size: .93rem;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  color: var(--petrole);
}
.nav a:hover { border-bottom-color: var(--laiton-fonce); color: var(--laiton-fonce); }
.nav a[aria-current="page"] {
  border-bottom-color: var(--petrole);
  font-weight: 700;
  color: var(--abysse);
}
.nav .azimut {
  font-family: var(--data);
  font-size: .68em;
  color: var(--encre-doux);
  margin-right: .35em;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Rose des vents (élément signature)
   ========================================================================== */

.rose { display: block; }
.rose__cercle  { fill: none; stroke: currentColor; opacity: .28; }
.rose__branche { fill: currentColor; opacity: .22; }
.rose__aiguille {
  fill: var(--laiton);
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: rotate(var(--azimut, 0deg));
  transition: transform .55s cubic-bezier(.34, 1.32, .5, 1);
}
.rose__aiguille-queue {
  fill: currentColor;
  opacity: .45;
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: rotate(var(--azimut, 0deg));
}
.rose__graduation { stroke: currentColor; opacity: .3; }
.rose__label {
  fill: currentColor;
  font-family: var(--display);
  font-size: 6px;
  letter-spacing: .1em;
  text-anchor: middle;
  opacity: .8;
}

.boussole-entete { width: 46px; height: 46px; color: var(--sphere); flex: none; }

/* --- L'aiguille suit le menu survolé -----------------------------------
   Le relèvement de chaque destination devient tangible : pointer une entrée
   du menu fait pivoter l'aiguille vers son azimut, la relâcher la ramène
   au cap de la page courante. Écrit avec :has(), donc sans une ligne de
   JavaScript ; les navigateurs qui ne le connaissent pas ignorent
   simplement ces règles. Le focus clavier déclenche le même mouvement
   que la souris.

   Chaque destination est déclarée deux fois (chemin relatif "x.html" et
   chemin absolu "/x.html") car 404.html utilise des chemins absolus alors
   que les autres pages utilisent des chemins relatifs. "Le projet" est
   décliné en trois formes pour la même raison (ancre seule sur la page
   d'accueil, ancre préfixée ailleurs).

   Pour ajouter une nouvelle destination au menu : dupliquer un bloc,
   changer le sélecteur href et la valeur d'azimut (en degrés, 0–360). */

.entete:has(.nav a[href="index.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="index.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="index.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="index.html"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/index.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/index.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/index.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/index.html"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/"]:focus-visible) .boussole-entete .rose__aiguille-queue { --azimut: 0deg; }

.entete:has(.nav a[href="#projet"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="#projet"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="#projet"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="#projet"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="index.html#projet"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="index.html#projet"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="index.html#projet"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="index.html#projet"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/index.html#projet"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/index.html#projet"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/index.html#projet"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/index.html#projet"]:focus-visible) .boussole-entete .rose__aiguille-queue { --azimut: 60deg; }

.entete:has(.nav a[href="mentions-legales.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="mentions-legales.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="mentions-legales.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="mentions-legales.html"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/mentions-legales.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/mentions-legales.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/mentions-legales.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/mentions-legales.html"]:focus-visible) .boussole-entete .rose__aiguille-queue { --azimut: 300deg; }

.entete:has(.nav a[href="confidentialite.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="confidentialite.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="confidentialite.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="confidentialite.html"]:focus-visible) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/confidentialite.html"]:hover) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/confidentialite.html"]:hover) .boussole-entete .rose__aiguille-queue,
.entete:has(.nav a[href="/confidentialite.html"]:focus-visible) .boussole-entete .rose__aiguille,
.entete:has(.nav a[href="/confidentialite.html"]:focus-visible) .boussole-entete .rose__aiguille-queue { --azimut: 330deg; }


/* ==========================================================================
   Bandeau de cap (hero)
   ========================================================================== */

.cap {
  background: var(--abysse);
  color: var(--papier-clair);
  background-image:
    radial-gradient(120% 140% at 82% 10%, rgba(23,98,124,.55) 0%, transparent 62%),
    repeating-conic-gradient(from 0deg at 82% 42%, rgba(159,211,226,.07) 0deg 1deg, transparent 1deg 15deg);
}
.cap__grille {
  display: grid;
  gap: 2rem;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: 3rem 0;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 62rem) {
  .cap__grille { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.cap h1 { color: #fff; }
.cap .chapo { color: var(--ecume); }
.cap .releve { color: var(--ecume); }
.cap .releve::before { background: var(--laiton); }
.cap a { color: var(--ecume); text-decoration-color: rgba(159,211,226,.5); }
.cap a:hover { color: var(--laiton); }
.cap :focus-visible { outline-color: var(--laiton); }

.cap__rose { color: var(--ecume); width: 100%; max-width: 24rem; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Destinations : la rose devient sommaire
   ========================================================================== */

.destinations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
}
@media (min-width: 44rem) { .destinations { grid-template-columns: 1fr 1fr; } }

.destinations li { margin: 0; }
/* Repli sans grid : les cartes s'empilent, la séparation reste lisible. */
@supports not (display: grid) {
  .destinations { border: 0; background: none; }
  .destinations li { border: 1px solid var(--trait); margin-bottom: 1rem; }
  .destinations a { display: block; }
  .destinations__azimut { border-right: 0; display: block; margin-bottom: .2rem; }
}
.destinations a {
  display: grid;
  grid-template-columns: 3.6rem 1fr;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  background: var(--papier-clair);
  text-decoration: none;
  height: 100%;
}
.destinations a:hover { background: #fff; }
.destinations a:hover .destinations__titre { color: var(--laiton-fonce); }
.destinations__azimut {
  font-family: var(--data);
  font-size: .82rem;
  color: var(--sphere);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--trait);
  padding-top: .15rem;
}
.destinations__titre {
  display: block;
  font-family: var(--display);
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--petrole);
  margin-bottom: .2rem;
}
.destinations__note { display: block; font-size: .93rem; color: var(--encre-doux); line-height: 1.5; }

/* ==========================================================================
   Encadrés
   ========================================================================== */

.encadre {
  border-left: 4px solid var(--sphere);
  background: var(--papier-clair);
  padding: 1.2rem 1.4rem;
  margin: 2rem 0;
  max-width: 46rem;
}
.encadre > :last-child { margin-bottom: 0; }
.encadre__titre {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8rem;
  color: var(--sphere);
  margin: 0 0 .5rem;
}
.encadre--alerte { border-left-color: var(--alerte); }
.encadre--alerte .encadre__titre { color: var(--alerte); }
.encadre--laiton { border-left-color: var(--laiton-fonce); }
.encadre--laiton .encadre__titre { color: var(--laiton-fonce); }

/* Champ à compléter avant mise en ligne. */
.a-completer {
  background: #fdf1d6;
  border-bottom: 2px dotted var(--laiton-fonce);
  color: #5c3f0a;
  padding: 0 .25em;
  font-family: var(--data);
  font-size: .92em;
}

/* ==========================================================================
   Tableaux
   ========================================================================== */

.tableau {
  overflow-x: auto;
  margin: 1.6rem 0 2.2rem;
  border: 1px solid var(--trait);
  background: var(--papier-clair);
}
.tableau:focus-visible { outline-offset: 0; }

table { border-collapse: collapse; width: 100%; font-size: .96rem; }
caption {
  text-align: left;
  font-family: var(--display);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--sphere);
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--trait);
}
th, td {
  text-align: left;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
thead th {
  font-family: var(--display);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--petrole);
  background: #e6eef1;
  border-bottom: 2px solid var(--sphere);
  white-space: nowrap;
}
tbody th { font-family: var(--display); font-weight: 600; color: var(--petrole); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.num { font-family: var(--data); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   Empreintes
   ========================================================================== */

.empreinte {
  font-family: var(--data);
  font-size: .82rem;
  line-height: 1.55;
  word-break: break-all;
  overflow-wrap: anywhere;
  background: #e6eef1;
  border: 1px solid var(--trait);
  padding: .5rem .6rem;
  display: block;
  color: var(--abysse);
}
.empreinte--vedette {
  background: var(--abysse);
  color: var(--ecume);
  border-color: var(--sphere);
  font-size: .9rem;
  padding: 1rem;
}

/* ==========================================================================
   Formulaire du vérificateur
   ========================================================================== */

.forme {
  background: var(--papier-clair);
  border: 1px solid var(--trait);
  border-top: 3px solid var(--sphere);
  padding: 1.6rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  max-width: 46rem;
  margin-bottom: 2rem;
}
.champ { margin-bottom: 1.4rem; }
.champ label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  margin-bottom: .35rem;
  color: var(--petrole);
}
.champ .aide { display: block; font-size: .9rem; color: var(--encre-doux); margin-bottom: .5rem; line-height: 1.5; }
input[type="text"], input[type="file"], textarea {
  width: 100%;
  font-family: var(--data);
  font-size: 1rem;
  padding: .7rem .8rem;
  border: 1px solid var(--sphere);
  background: #fff;
  color: var(--encre);
  border-radius: 0;
}
textarea { min-height: 5.5rem; resize: vertical; }

.bouton {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--petrole);
  color: #fff;
  border: 2px solid var(--petrole);
  padding: .7rem 1.5rem;
  cursor: pointer;
  border-radius: 0;
}
.bouton:hover { background: var(--abysse); border-color: var(--abysse); }
.bouton--secondaire { background: transparent; color: var(--petrole); }
.bouton--secondaire:hover { background: var(--papier); color: var(--abysse); }
.boutons { display: flex; flex-wrap: wrap; gap: .8rem; }

.resultat {
  margin-top: 1.6rem;
  border: 1px solid var(--trait);
  border-left-width: 5px;
  padding: 1rem 1.2rem;
  background: #fff;
}
.resultat:empty { display: none; }
.resultat--ok      { border-left-color: var(--valide); }
.resultat--erreur  { border-left-color: var(--alerte); }
.resultat--neutre  { border-left-color: var(--sphere); }
.resultat__verdict { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin: 0 0 .5rem; }
.resultat--ok     .resultat__verdict { color: var(--valide); }
.resultat--erreur .resultat__verdict { color: var(--alerte); }
.resultat--neutre .resultat__verdict { color: var(--petrole); }
.resultat__verdict::before { margin-right: .5rem; font-family: var(--data); }
.resultat--ok     .resultat__verdict::before { content: "OK"; }
.resultat--erreur .resultat__verdict::before { content: "!!"; }

/* ==========================================================================
   Pied de page
   ========================================================================== */

.pied {
  background: var(--abysse);
  color: #cfe2e9;
  padding: 3rem 0 2.5rem;
  font-size: .95rem;
}
.pied h2 {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--laiton);
  margin: 0 0 .9rem;
}
.pied a { color: #cfe2e9; text-decoration-color: rgba(207,226,233,.4); }
.pied a:hover { color: var(--laiton); }
.pied :focus-visible { outline-color: var(--laiton); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: .4rem; }
.pied__grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(159,211,226,.22);
}
@media (min-width: 48rem) { .pied__grille { grid-template-columns: repeat(3, 1fr); } }
.pied__bas {
  padding-top: 1.5rem;
  font-size: .85rem;
  color: #9ab6c1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: space-between;
}

/* ==========================================================================
   Utilitaires
   ========================================================================== */

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sommaire-page {
  border: 1px solid var(--trait);
  background: var(--papier-clair);
  padding: 1.2rem 1.4rem;
  margin-bottom: 2.5rem;
  max-width: 46rem;
}
.sommaire-page ol { margin: 0; padding-left: 1.3rem; }
.sommaire-page li { margin-bottom: .3rem; }
.maj-le { font-size: .88rem; color: var(--encre-doux); font-family: var(--display); letter-spacing: .03em; }

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: 3rem 0;
  max-width: 46rem;
}

.formule {
  font-family: var(--display);
  font-size: 1.15rem;
  font-size: clamp(1.02rem, .9rem + .6vw, 1.3rem);
  background: var(--abysse);
  color: #fff;
  padding: 1.2rem 1.4rem;
  margin: 1.8rem 0;
  max-width: 46rem;
  line-height: 1.5;
}
.formule em { color: var(--ecume); font-style: normal; }

/* ==========================================================================
   Préférences système et impression
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --trait: #7d979f; --encre-doux: #263c46; }
}

@media print {
  body { background: #fff; font-size: 11pt; }
  .entete__haut, .nav, .cap, .pied, .lien-evitement, .forme { display: none !important; }
  a { text-decoration: none; color: #000; }
  .texte a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .tableau { overflow: visible; border: 0; }
  h2, h3 { break-after: avoid; }
  table, .encadre { break-inside: avoid; }
}

/* =========================================================================
   Compatibilité CSP stricte
   La politique de sécurité du contenu interdit les styles en ligne
   (style-src 'self', sans 'unsafe-inline'). Les valeurs autrefois portées
   par un attribut style= sont donc déclarées ici sous forme de classes.
   ========================================================================= */
.az-0   { --azimut: 0deg; }
.az-45  { --azimut: 45deg; }
.az-120 { --azimut: 120deg; }
.az-240 { --azimut: 240deg; }
.az-300 { --azimut: 300deg; }
.az-330 { --azimut: 330deg; }

.titre-espace { margin-top: 2.6em; }
.empreinte--enligne { display: inline; padding: .1em .35em; }

/* Mention explicite d'un lien sortant, exigée par les mentions légales. */
.lien-externe { font-size: .85em; color: var(--encre-douce, inherit); white-space: nowrap; }