@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 « Grille »
   fait pivoter l'aiguille vers 120°, 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.            */

.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 { --azimut: 0deg; }

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

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

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

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

.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; }


/* ==========================================================================
   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; }