/* ==========================================================================
   Feuille de style du site cneh.valabre.fr
   Charte validée à l'étape 2 (voir docs/etape2-charte.md).
   Palette DSFR + deux couleurs relevées au pixel sur le logo fourni.
   ========================================================================== */

/* --- Marianne, police de l'État -------------------------------------------
   Auto-hébergée : elle n'est distribuée par aucun CDN public. Les fichiers
   sont dans static/src/fonts/. Tant qu'ils ne sont pas déposés, le repli
   Inter (ou la police système) prend le relais sans casser la mise en page. */
@font-face {
  font-family: "Marianne";
  src: url("../fonts/Marianne-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("../fonts/Marianne-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("../fonts/Marianne-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Marianne";
  src: url("../fonts/Marianne-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bleu-france: #000091;
  --bleu-hover:  #1212ff;
  --bleu-cneh:   #02184a;
  --bleu-valabre: #0e357a; /* relevé sur le logo Valabre */
  /* Rouge d'action, plus sobre que le Rouge Marianne #e1000f (réservé au
     liseré tricolore) : texte blanc à 5,8:1, et le survol fonce (7,8:1) au
     lieu de s'éclaircir sous le seuil RGAA de 4,5:1. */
  --rouge:       #c9191e;
  --rouge-hover: #a60e16;
  --cyan:        #01ffff;

  --vert:        #18753c;
  --orange:      #b34000;

  --ground:      #ffffff;
  --ground-alt:  #f4f5fa;
  --ground-deep: #ecedf6;
  --plate:       #ffffff;
  --line:        #dddde8;
  --line-strong: #c3c3d8;
  --ink:         #161622;
  --ink-soft:    #52526e;
  --ink-faint:   #7b7b96;
  --on-bleu:     #ffffff;
  --barre:       #000091; /* barre de navigation : bleu France dans les deux thèmes */
  --rouge-picto: #e1000f;
  color-scheme: light;

  --shadow: 0 1px 2px rgba(2, 24, 74, .06), 0 8px 24px -12px rgba(2, 24, 74, .18);

  --sans: "Marianne", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* --- Thème sombre --------------------------------------------------------
   Appliqué quand le visiteur le choisit (« Paramètres d'affichage » :
   data-theme="dark"), ou quand son système est en sombre et qu'il n'a pas
   forcé le thème clair. Les teintes claires sont éclaircies pour garder au
   moins 4,5:1 sur les fonds sombres. Le même bloc figure deux fois : un
   sélecteur ne peut pas réunir une media query et un attribut. */
:root[data-theme="dark"] {
  --bleu-france: #9a9af8;  --bleu-hover: #c1c1fb;
  --bleu-cneh:   #c3cdf2;  --bleu-valabre: #9db4ec;
  --rouge:       #ff6b6b;  --rouge-hover: #ff9494;  --rouge-picto: #ff5655;
  --vert:        #27a658;  --orange: #fc5d00;
  --ground: #161616; --ground-alt: #1e1e1e; --ground-deep: #2a2a2a;
  --line: #353535; --line-strong: #4a4a4a;
  --ink: #eeeeee; --ink-soft: #cecece; --ink-faint: #a8a8a8;
  --on-bleu: #161616;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bleu-france: #9a9af8;  --bleu-hover: #c1c1fb;
    --bleu-cneh:   #c3cdf2;  --bleu-valabre: #9db4ec;
    --rouge:       #ff6b6b;  --rouge-hover: #ff9494;  --rouge-picto: #ff5655;
    --vert:        #27a658;  --orange: #fc5d00;
    --ground: #161616; --ground-alt: #1e1e1e; --ground-deep: #2a2a2a;
    --line: #353535; --line-strong: #4a4a4a;
    --ink: #eeeeee; --ink-soft: #cecece; --ink-faint: #a8a8a8;
    --on-bleu: #161616;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

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

/* L'attribut `hidden` n'est qu'une règle par défaut du navigateur
   (`[hidden] { display: none }`). N'importe quelle règle d'auteur posant un
   `display` l'emporte sur elle : sans la ligne ci-dessous, `.submenu` et son
   `display: grid` laissaient les trois sous-menus visibles en permanence,
   quoi que fasse le JavaScript. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }
a { color: var(--bleu-france); }

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

/* Lien d'évitement : visible uniquement au clavier. */
.evitement {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bleu-france); color: var(--on-bleu);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
}
.evitement:focus { left: 0; }

.visuellement-masque {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* --- Liseré tricolore ---------------------------------------------------- */
.tricolore { height: 4px; display: flex; }
.tricolore i { flex: 1; }
.tricolore i:nth-child(1) { background: #000091; }
.tricolore i:nth-child(2) { background: #ffffff; }
.tricolore i:nth-child(3) { background: #e1000f; }

/* --- Barre utilitaire ---------------------------------------------------- */
.utility { background: var(--ground-alt); border-bottom: 1px solid var(--line); font-size: 13px; }
.utility .wrap { display: flex; justify-content: flex-end; gap: 4px; flex-wrap: wrap; padding-block: 6px; }
.utility button, .utility a {
  background: none; border: 0; font: inherit; font-weight: 500;
  color: var(--ink-soft); padding: 6px 10px; border-radius: 4px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.utility button:hover, .utility a:hover { background: var(--ground-deep); color: var(--ink); }
/* Sélecteur de langue : séparé des autres liens, langue affichée en gras. */
.utility .langues {
  display: flex; gap: 2px; list-style: none; margin: 0 0 0 6px; padding: 0 0 0 6px;
  border-left: 1px solid var(--line);
}
.utility .langues a[aria-current] { color: var(--ink); font-weight: 700; }

/* --- En-tête ------------------------------------------------------------- */
.masthead { background: var(--ground); }
.masthead .wrap {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px;
  align-items: center; padding-block: 18px;
}
.brand-left { display: flex; align-items: center; gap: 18px; text-decoration: none; }
/* Calé sur la hauteur : le logo de la République est large et bas, un
   bloc-marque complet est presque carré. La hauteur commune les aligne tous
   les deux proprement à côté du sceau du CNEH. */
.brand-left img.min { height: 58px; width: auto; max-width: 190px; }
.brand-left img.drapeau { height: 38px; width: auto; }
.brand-left img.seal { width: 74px; }
.wordmark { text-align: center; }
.wordmark strong, .wordmark span {
  display: block; font-size: clamp(18px, 2.8vw, 28px); font-weight: 800;
  color: var(--bleu-cneh); letter-spacing: -.015em;
}
/* Le sous-titre (« Valabre ») reprend le style du nom du site, en capitales
   et dans le bleu du logo Valabre, comme sur le logo. */
.wordmark span { color: var(--bleu-valabre); text-transform: uppercase; }
.brand-right img { width: 74px; }  /* même taille que le logo du CNEH, à gauche */

/* --- Navigation ---------------------------------------------------------- */
.nav { background: var(--barre); position: sticky; top: 0; z-index: 40; }
.nav .wrap { display: flex; align-items: stretch; gap: 2px; flex-wrap: wrap; }
.nav-list { display: flex; align-items: stretch; gap: 2px; flex: 1; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > button {
  font: inherit; font-size: 15px; font-weight: 500; background: none; border: 0; cursor: pointer;
  color: #fff; padding: 14px; display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; border-bottom: 3px solid transparent; height: 100%;
}
.nav-item > a:hover, .nav-item > button:hover { background: rgba(255, 255, 255, .14); }
.nav-item > a.actif { border-bottom-color: var(--rouge); font-weight: 600; }
.nav-item > button[aria-expanded="true"] {
  background: var(--ground); color: var(--bleu-france); border-bottom-color: var(--rouge);
}
.caret {
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s;
}
[aria-expanded="true"] .caret { transform: rotate(-135deg) translate(-3px, -3px); }

.submenu {
  position: absolute; left: 0; top: 100%; min-width: 300px; z-index: 50;
  background: var(--ground); border: 1px solid var(--line); border-top: 0;
  box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px;
}
.submenu a {
  display: block; padding: 9px 12px; text-decoration: none; color: var(--ink);
  font-size: 14px; border-radius: 4px; border-left: 3px solid transparent;
}
.submenu a small { display: block; color: var(--ink-faint); font-size: 12px; }
.submenu a:hover { background: var(--ground-alt); border-left-color: var(--bleu-france); }

.nav-spacer { flex: 1; }
.btn-alerte {
  align-self: center; margin: 8px 0 8px 8px;
  /* Bouton plein Rouge Marianne, texte blanc : 5,0:1 (RGAA 3.2 respecté).
     Teintes fixes et non les jetons --rouge : la barre reste bleu France en
     mode sombre, où --rouge s'éclaircit et ferait chuter le contraste. */
  background: #e1000f; color: #fff; font-weight: 700; font-size: 14px;
  padding: 10px 16px; border-radius: 4px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn-alerte:hover { background: #b60000; text-decoration: underline; text-underline-offset: 4px; }
/* Même gabarit que le bouton rouge, en contour blanc : visible sans lui faire
   concurrence. Teintes fixes pour la même raison (barre bleue en mode sombre). */
.btn-certification {
  align-self: center; margin: 8px 0 8px 8px;
  border: 2px solid #fff; color: #fff; font-weight: 700; font-size: 14px;
  padding: 8px 14px; border-radius: 4px; text-decoration: none; white-space: nowrap;
}
.btn-certification:hover, .btn-certification[aria-current] { background: rgba(255, 255, 255, .14); }
.btn-certification:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn-certification:focus-visible { outline-color: #fff; }
/* Le contour de focus bleu France disparaîtrait sur la barre bleue. */
.btn-alerte:focus-visible,
.nav-item > a:focus-visible, .nav-item > button:focus-visible { outline-color: #fff; }
.btn-alerte .dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.burger { display: none; }

/* Entrées du menu sur une seule ligne. Mesuré : le menu complet demande
   environ 1 180 px d'écran, sa version resserrée 1 100 px ; en dessous, il
   passe sous le bouton « Menu ». */
.nav-item > a, .nav-item > button { white-space: nowrap; }
@media (max-width: 1199px) {
  .nav-item > a, .nav-item > button { padding-inline: 10px; font-size: 14px; }
}

@media (max-width: 960px) {
  .masthead .wrap { grid-template-columns: 1fr auto; row-gap: 14px; }
  .wordmark { text-align: left; grid-column: 1; grid-row: 2; }
  .brand-right { grid-row: 1; }
}

@media (max-width: 1099px) {
  .nav-item > a, .nav-item > button { padding-inline: 14px; font-size: 15px; }
  .burger {
    display: flex; justify-content: space-between; width: 100%;
    color: #fff; background: none; border: 0; padding: 14px 0;
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .nav .wrap { flex-direction: column; align-items: stretch; }
  .nav-list { display: none; flex-direction: column; }
  .nav-list.open { display: flex; }
  /* `height: 100%` vient du menu horizontal, où il aligne les entrées sur la
     hauteur de la barre. Ici le sous-menu est dans le flux : l'entrée devient
     haute, et le bouton s'étirerait sur toute cette hauteur en recouvrant son
     propre sous-menu. */
  .nav-item { display: flex; flex-direction: column; }
  .nav-item > a, .nav-item > button {
    width: 100%; height: auto; justify-content: space-between;
  }

  /* Le fond blanc de l'entrée dépliée est fait pour le panneau flottant du
     bureau. Sur mobile le sous-menu reste dans le bleu : on garde un simple
     éclaircissement. */
  .nav-item > button[aria-expanded="true"] {
    background: rgba(255, 255, 255, .16); color: #fff;
    border-bottom-color: transparent;
  }

  .submenu {
    position: static; min-width: 0; border: 0; box-shadow: none;
    background: rgba(255, 255, 255, .1); padding: 4px 4px 10px;
  }
  .submenu a { color: #fff; padding-left: 24px; }
  .submenu a small { color: rgba(255, 255, 255, .7); }
  .submenu a:hover { background: rgba(255, 255, 255, .14); border-left-color: #fff; }

  /* Menu déplié plus haut que l'écran : il doit défiler tout seul, sinon les
     dernières entrées et le bouton de déclaration deviennent inatteignables. */
  .nav-list.open { max-height: calc(100vh - 4rem); overflow-y: auto; }

  .nav-spacer { display: none; }
  .btn-alerte { margin: 10px 0; justify-content: center; }
  .btn-certification { margin: 10px 0 0; text-align: center; }
}

/* --- Fil d'Ariane -------------------------------------------------------- */
.ariane { background: var(--ground); border-bottom: 1px solid var(--line); font-size: 13px; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 0; }
.ariane li::after { content: "›"; margin-left: 8px; color: var(--ink-faint); }
.ariane li:last-child::after { content: ""; }
.ariane a { color: var(--ink-soft); }
.ariane [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --- Blocs de page ------------------------------------------------------- */
.band { padding-block: clamp(40px, 6vw, 72px); }
.band-alt { background: var(--ground-alt); border-block: 1px solid var(--line); }
section { scroll-margin-top: 90px; }

.head { max-width: 62ch; margin-bottom: clamp(24px, 4vw, 44px); }
.head h1, .head h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; margin-top: 8px; }
.head p { color: var(--ink-soft); margin-top: 12px; }

.prose { max-width: 70ch; display: flex; flex-direction: column; gap: 20px; }
.prose h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; margin-top: 16px; }
.prose h3 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; margin-top: 12px; }
.prose ul, .prose ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 6px; }
.prose a { text-underline-offset: 3px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose th { background: var(--ground-alt); }
.table-scroll { overflow-x: auto; }
/* Tient dans la colonne de texte (70ch) sur ordinateur ; défile en dessous. */
.table-scroll .tableau { min-width: 540px; }
.tableau th, .tableau td { padding: 8px 10px; }
.tableau caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 8px; }
.tableau td { vertical-align: top; }
.tableau .intertitre th { background: var(--ground-alt); font-weight: 700; }

/* --- Boutons ------------------------------------------------------------- */
.btn {
  font: inherit; font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 4px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--bleu-france); color: var(--on-bleu); }
.btn-primary:hover { background: var(--bleu-hover); }
.btn-ghost { border-color: var(--bleu-france); color: var(--bleu-france); background: none; }
.btn-ghost:hover { background: var(--ground-alt); }
.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { background: var(--rouge-hover); }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(36px, 6vw, 72px); }
.hero .wrap {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 56px); align-items: center;
}
.hero h1 { font-size: clamp(30px, 4.6vw, 50px); font-weight: 800; color: var(--bleu-cneh); }
.hero .lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); margin-top: 18px; max-width: 54ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.frame {
  position: relative; aspect-ratio: 16 / 9;
  overflow: hidden; display: grid; place-items: center;
}
.frame video { width: 100%; height: 100%; object-fit: contain; }
/* Même traitement que la vidéo : `max-height: 100%` sur une image centrée en
   grille n'a pas de base de calcul fiable et se fait ignorer — l'image prenait
   toute la largeur et débordait en hauteur, coupée par `overflow: hidden`.
   `object-fit: contain` sur une boîte de taille explicite est déterministe. */
/* Sans marge : sur la dernière image de la vidéo, le cercle du logo occupe
   toute la hauteur du cadre. Le logo fixe qui prend le relais doit avoir la
   même taille, sinon il paraît rétrécir au moment du fondu. */
.frame .still { position: absolute; inset: 0; }
.frame .still img { width: 100%; height: 100%; object-fit: contain; }
.frame:not(.done) .still { opacity: 0; }
.frame.done video { opacity: 0; }
.frame video, .frame .still { transition: opacity .6s ease; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; } }

/* --- Logo interactif à quatre quarts ------------------------------------- */
.mentions-grid {
  display: grid; grid-template-columns: minmax(280px, 460px) 1fr;
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.logo-interactif {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  background: var(--plate); border-radius: 50%;
  isolation: isolate;
}

/* Le secteur cyan est posé *sous* le logo, dont les quarts sont transparents :
   le cyan apparaît dans les zones vides et le tracé bleu marine reste au-dessus.
   Un `mix-blend-mode` avait d'abord été utilisé, mais posé sur un `<path>` il se
   mélange avec le contenu du SVG — vide — et non avec l'image en dessous : le
   cyan restait opaque et masquait le pictogramme. */
.quarts { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.quarts path { fill: var(--cyan); opacity: 0; transition: opacity .18s ease; }

/* L'image passe au-dessus, et laisse les clics atteindre les quarts en dessous.
   `multiply` laisse voir le cyan à travers le blanc du logo : la surbrillance
   fonctionne aussi avec un logo à fond opaque (PNG sans transparence). */
.logo-interactif > img {
  position: relative; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; mix-blend-mode: multiply;
}
.quarts a:hover path, .quarts a:focus-visible path, .quarts a.is-active path { opacity: 1; }
/* Quart allumé en permanence (page de portail). Une classe, et non un
   `style="opacity:1"` en ligne : la politique de sécurité du site est
   `style-src 'self'`, qui bloque aussi les attributs `style`. */
.quarts.fixe path { opacity: 1; }
.quarts a { cursor: pointer; }
.quarts a:focus-visible { outline: 3px solid var(--bleu-france); outline-offset: 3px; }
.hint { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 14px; }

.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.m-card {
  display: block; text-decoration: none; color: inherit; background: var(--ground);
  border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
  padding: 18px; border-radius: 4px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.m-card:hover, .m-card.is-active {
  border-left-color: var(--bleu-france); box-shadow: var(--shadow); transform: translateY(-2px);
}
.m-card .letter { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--bleu-france); }
.m-card h3 { font-size: 18px; font-weight: 700; margin-top: 4px; }
.m-card .legal { font-size: 12.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.45; }
.m-card .go { font-size: 13px; font-weight: 600; color: var(--bleu-france); margin-top: 12px; display: inline-block; }

.classes {
  margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 4px;
  font-size: 13px; color: var(--ink-soft); display: flex; flex-wrap: wrap;
  gap: 6px 20px; align-items: baseline;
}
.classes b { color: var(--ink); font-variant-numeric: tabular-nums; }
.classes cite { font-style: normal; color: var(--ink-faint); font-size: 12px; }

@media (max-width: 920px) {
  .mentions-grid { grid-template-columns: 1fr; }
  .logo-interactif { max-width: 380px; margin-inline: auto; }
}
@media (max-width: 540px) { .cards-2 { grid-template-columns: 1fr; } }

/* --- Chiffres clés ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat { background: var(--ground); padding: 24px 20px; }
.stat b {
  display: block; font-size: clamp(30px, 4vw, 42px); font-weight: 800;
  color: var(--bleu-france); font-variant-numeric: tabular-nums; line-height: 1;
}
.stat span { display: block; font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 780px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* --- Cartes et listes ---------------------------------------------------- */
.grille { display: grid; gap: 20px; }
.grille-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grille-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.carte {
  display: flex; flex-direction: column; background: var(--ground);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.carte .thumb { aspect-ratio: 16 / 9; background: var(--ground-deep); object-fit: cover; width: 100%; }
.carte .body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.carte h3 { font-size: 17px; font-weight: 700; }
.carte h3 a { text-decoration: none; color: inherit; }
.carte h3 a:hover { text-decoration: underline; }
.carte p { font-size: 14px; color: var(--ink-soft); }
.carte .more { margin-top: auto; font-size: 13.5px; font-weight: 600; text-decoration: none; }

.meta { font-size: 12px; color: var(--ink-faint); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tag {
  background: var(--ground-deep); color: var(--bleu-france); font-weight: 700;
  font-size: 11px; letter-spacing: .05em; padding: 3px 8px; border-radius: 3px;
}
.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bleu-france); color: var(--on-bleu);
  font-size: 12px; font-weight: 800;
}

/* --- Filtres ------------------------------------------------------------- */
.filtres {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 18px; background: var(--ground-alt); border: 1px solid var(--line);
  border-radius: 4px; margin-bottom: 24px;
}
.filtres .champ { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; }
.filtres label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.filtres select, .filtres input[type="search"], .filtres input[type="text"] {
  font: inherit; font-size: 14px; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}
.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.puce {
  font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px;
  border: 1px solid var(--line-strong); text-decoration: none; color: var(--ink-soft);
  background: var(--ground);
}
.puce:hover { border-color: var(--bleu-france); color: var(--bleu-france); }
.puce.actif { background: var(--bleu-france); border-color: var(--bleu-france); color: var(--on-bleu); }

/* --- Formulaires --------------------------------------------------------- */
.formulaire { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.etape {
  border: 1px solid var(--line); border-radius: 4px; padding: 22px;
  background: var(--ground);
}
.etape > legend {
  font-weight: 800; font-size: 17px; padding-inline: 8px; color: var(--bleu-cneh);
}
.champ-form { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.champ-form:last-child { margin-bottom: 0; }
.champ-form label { font-weight: 600; font-size: 14.5px; }
.champ-form .aide { font-size: 13px; color: var(--ink-soft); }
.champ-form input[type="text"], .champ-form input[type="email"], .champ-form input[type="tel"],
.champ-form input[type="url"], .champ-form input[type="date"], .champ-form input[type="time"],
.champ-form input[type="search"], .champ-form select, .champ-form textarea {
  font: inherit; font-size: 15px; padding: 11px 13px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 4px;
  background: var(--ground); color: var(--ink);
}
.champ-form textarea { resize: vertical; min-height: 96px; }
.champ-form ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.champ-form ul label { font-weight: 400; display: flex; gap: 9px; align-items: flex-start; }
.champ-form.obligatoire > label::after { content: " *"; color: var(--rouge); }
.erreur-champ { color: var(--rouge); font-size: 13.5px; font-weight: 600; }
.champ-form input[aria-invalid="true"], .champ-form textarea[aria-invalid="true"] { border-color: var(--rouge); }

/* Le champ-appât ne doit jamais être visible ni atteignable au clavier. */
.appat { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.resume-erreurs {
  border-left: 4px solid var(--rouge); background: color-mix(in srgb, var(--rouge) 8%, transparent);
  padding: 16px 18px; border-radius: 4px;
}
.resume-erreurs h2 { font-size: 16px; color: var(--rouge); }
.resume-erreurs ul { margin: 10px 0 0; padding-left: 20px; font-size: 14px; }

/* --- Espacements et largeurs ---------------------------------------------
   La politique de sécurité du site est `style-src 'self'`, qui bloque aussi
   les attributs `style` en ligne. Tout espacement passe donc par une classe. */
.mt-xs { margin-top: 8px; }
.mt-s  { margin-top: 12px; }
.mt-m  { margin-top: 20px; }
.mt-l  { margin-top: 28px; }
.mt-xl { margin-top: 40px; }
.mb-s  { margin-bottom: 12px; }
.mb-m  { margin-bottom: 20px; }
.mb-l  { margin-bottom: 32px; }
.etroit { max-width: 640px; }
.large-lisible { max-width: 720px; }
.pousse-bas { margin-top: auto; }
.ink-soft { color: var(--ink-soft); }
.adresse { font-style: normal; }
.titre-simple { font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; }
.titre-portail { font-size: clamp(28px, 4vw, 42px); font-weight: 800; margin-top: 10px; }
.flex-1 { flex: 1; }

/* --- Encadrés ------------------------------------------------------------ */
.encadre {
  border-left: 4px solid var(--bleu-france); background: var(--ground-alt);
  padding: 18px 20px; border-radius: 4px; max-width: 70ch;
  display: flex; flex-direction: column; gap: 12px;
}
.encadre > h1 { font-size: clamp(20px, 3vw, 26px); font-weight: 800; }
.encadre h3 { font-size: 16px; }
.encadre .prose { gap: 12px; }

/* --- Référence de dossier (confirmation de déclaration) ------------------ */
.reference-dossier {
  font-size: clamp(24px, 4vw, 30px); font-weight: 800; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* --- Enrôlement du second facteur ---------------------------------------- */
.cadre-qr {
  background: #fff; padding: 20px; border: 1px solid var(--line);
  border-radius: 4px; max-width: 260px;
}
.cle-2fa {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 16px; letter-spacing: .08em; word-break: break-all;
}

/* --- Blocs de contenu ----------------------------------------------------- */
.bloc-citation p { font-size: 18px; }
.bloc-citation cite { font-style: normal; font-weight: 600; }
.figure { margin: 0; }
.figure--pleine { grid-column: 1 / -1; }
.figure--entete { margin-bottom: 32px; }
.figure figcaption { margin-top: 8px; }
.accordeon details {
  border: 1px solid var(--line); border-radius: 4px;
  padding: 14px 18px; margin-top: 8px;
}
.accordeon summary { font-weight: 600; cursor: pointer; }
/* Lien direct (#II-3) : la question ne se cache pas sous la barre de menu fixe. */
.accordeon details, .accordeon h2 { scroll-margin-top: 80px; }
.sommaire-faq h2 { font-size: 16px; }
.sommaire-faq ol { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.recherche-faq { max-width: 70ch; }
.recherche-faq .statut { font-size: 14px; color: var(--ink-soft); min-height: 1.4em; }
.encadre.succes { border-left-color: var(--vert); }
.encadre.attention { border-left-color: var(--orange); }
.encadre.alerte { border-left-color: var(--rouge); }

/* --- Documents ----------------------------------------------------------- */
.liste-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.doc {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px;
  border: 1px solid var(--line); border-radius: 4px; background: var(--ground);
}
.doc:hover { border-color: var(--bleu-france); }
.doc .icone {
  flex: none; width: 42px; height: 42px; border-radius: 4px; background: var(--ground-deep);
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--bleu-france);
}
.doc .titre { font-weight: 600; text-decoration: none; color: var(--ink); }
.doc .titre:hover { text-decoration: underline; }
.doc .detail { font-size: 13px; color: var(--ink-faint); margin-top: 4px; }

/* --- Carte Leaflet ------------------------------------------------------- */
#carte-centres {
  height: 460px; border: 1px solid var(--line); border-radius: 4px;
  margin-bottom: 28px; background: var(--ground-alt);
  /* Leaflet empile ses calques jusqu'à z-index 1000 : sans contexte isolé, la
     carte passerait au-dessus de la barre de menu fixe (z-index 40). */
  isolation: isolate;
}
.leaflet-popup-content { font-family: var(--sans); font-size: 14px; }

/* --- Partenaires --------------------------------------------------------- */
/* Petites tuiles de taille fixe : la grille ne les étire pas sur toute la
   largeur quand les partenaires sont peu nombreux. Deux par ligne sur mobile. */
.partners {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
  gap: 14px; justify-content: start;
}
.p-tile {
  aspect-ratio: 5 / 3; border: 1px solid var(--line); border-radius: 4px;
  display: grid; place-items: center; background: var(--ground); padding: 14px;
  text-align: center; font-weight: 600;
  /* Sans cela, une boîte à aspect-ratio grandit pour loger un logo haut. */
  min-height: 0; overflow: hidden;
}
@media (max-width: 480px) { .partners { grid-template-columns: repeat(2, 1fr); } }
.p-tile > a { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }
/* Hauteur explicite : un pourcentage ne se résout pas dans une boîte à aspect-ratio. */
.p-tile img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.p-tile > a:hover { opacity: .8; }

/* --- Pagination ---------------------------------------------------------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 4px;
  text-decoration: none; font-size: 14px; color: var(--ink-soft);
}
.pagination .courant { background: var(--bleu-france); border-color: var(--bleu-france); color: var(--on-bleu); font-weight: 700; }

/* --- Pied de page -------------------------------------------------------- */
footer.pied { border-top: 2px solid var(--bleu-france); background: var(--ground); padding-block: 40px 28px; margin-top: 40px; }
.foot-top { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start; }
.foot-logos { display: flex; gap: 20px; align-items: center; }
.foot-logos img { height: 52px; width: auto; max-width: 160px; }
.foot-logos img.drapeau { height: 34px; width: auto; }
.foot-desc { font-size: 14px; color: var(--ink-soft); max-width: 62ch; }
.foot-links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 28px 0 0;
  padding: 20px 0 0; list-style: none; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
}
.foot-links a, .foot-links .lien-bouton { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover, .foot-links .lien-bouton:hover { text-decoration: underline; color: var(--ink); }
/* Copyright à part, sous les liens et plus petit : il ne se lit pas comme un lien. */
.foot-copyright { margin-top: 14px; font-size: 12px; color: var(--ink-soft); }

/* Bouton qui a l'apparence d'un lien (il ouvre une fenêtre, il ne navigue pas). */
.lien-bouton {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.lien-bouton .picto { flex: none; }

/* --- Fenêtre « Paramètres d'affichage » ---------------------------------- */
.affichage {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 0; border-radius: 4px;
  background: var(--ground); color: var(--ink); box-shadow: var(--shadow);
}
.affichage::backdrop { background: rgba(22, 22, 22, .64); }
.affichage-corps { padding: 20px 24px 28px; }
.affichage-haut { display: flex; justify-content: flex-end; }
.affichage-fermer { color: var(--bleu-france); font-weight: 600; font-size: 14px; padding: 6px 8px; }
.affichage h2 { font-size: 26px; font-weight: 800; margin: 12px 0 16px; }
.affichage fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; }
.affichage legend { padding: 0; margin-bottom: 16px; font-size: 17px; }
.theme-choix {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  border: 1px solid var(--line-strong); padding: 0 0 0 18px; cursor: pointer;
}
.theme-choix:has(input:checked) { border-color: var(--bleu-france); box-shadow: inset 0 0 0 1px var(--bleu-france); }
.theme-choix input { width: 20px; height: 20px; margin: 0; accent-color: var(--bleu-france); }
.theme-libelle { font-size: 17px; padding-block: 18px; }
.theme-libelle small { display: block; font-size: 12.5px; color: var(--ink-soft); }
.theme-picto { width: 80px; height: 64px; padding: 4px 12px; border-left: 1px solid var(--line-strong); box-sizing: content-box; }
.theme-picto .b { fill: none; stroke: var(--bleu-france); }
.theme-picto .r { fill: none; stroke: var(--rouge-picto); }
.theme-picto .rf { fill: var(--rouge-picto); }

/* --- Plan du site -------------------------------------------------------- */
.plan-du-site { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.plan-du-site .plan-du-site { margin: 8px 0 6px; padding-left: 22px; border-left: 2px solid var(--line); }
.plan-du-site > li > a { font-weight: 600; }
.plan-du-site .plan-du-site > li > a { font-weight: 400; }

/* Les logos sont fournis pour fond clair (pas de variante sombre) : en thème
   sombre, ils sont posés sur une plaque blanche pour rester lisibles. */
:root[data-theme="dark"] :is(.brand-left img, .brand-right img, .foot-logos img, .p-tile) {
  background: #fff; border-radius: 4px; padding: 4px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.brand-left img, .brand-right img, .foot-logos img, .p-tile) {
    background: #fff; border-radius: 4px; padding: 4px;
  }
}
@media (max-width: 720px) { .foot-top { grid-template-columns: 1fr; } }

/* --- Retour en haut ------------------------------------------------------ */
.haut {
  position: fixed; right: 20px; bottom: 20px; z-index: 30;
  background: var(--bleu-france); color: var(--on-bleu); border: 0; border-radius: 4px;
  width: 44px; height: 44px; font-size: 18px; cursor: pointer; display: none;
}
.haut.visible { display: block; }

/* --- Pages d'erreur ------------------------------------------------------ */
.erreur { text-align: center; padding-block: clamp(48px, 10vw, 110px); }
.erreur .code { font-size: clamp(64px, 14vw, 128px); font-weight: 800; color: var(--bleu-france); line-height: 1; }
.erreur h1 { font-size: clamp(22px, 3vw, 32px); margin-top: 12px; }
.erreur p { color: var(--ink-soft); margin-top: 14px; }
.erreur .actions { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }

/* --- Impression ---------------------------------------------------------- */
@media print {
  .utility, .nav, .haut, .bandeau-incident, .filtres { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

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