/* ════════════════════════════════════════════════════════════════
   PREV-ONN — charte graphique.

   Le logo donne la direction : noir profond, chrome, rouge signal.
   On la tient d'un bout à l'autre. Le thème sombre est donc le thème
   NATIF de l'application, pas une variante : c'est dans celui-là que
   la marque existe. Le thème clair est un tirage papier de la même
   identité, pour la lecture longue et l'impression.

   Le rouge ne sert qu'à trois choses : la marque, la veille, l'alerte.
   Jamais à décorer un bouton ordinaire.
   ════════════════════════════════════════════════════════════════ */

:root {
  /* Thème natif : sombre, comme le logo. */
  --fond:        #0b0d10;
  --fond-2:      #10141a;
  --surface:     #151a21;
  --surface-2:   #1b212a;
  --trait:       #2a323d;
  --trait-fin:   #212831;

  --texte:       #e8ecf1;
  --texte-2:     #a8b2bf;
  --texte-3:     #76818f;

  /* Le chrome du logo, décliné en dégradé utilisable. */
  --chrome-haut: #f2f5f8;
  --chrome-bas:  #8e99a6;

  --rouge:       #d81324;
  --rouge-clair: #ff5563;
  --rouge-fond:  #210f12;

  --vert:        #35b98a;
  --vert-fond:   #0e2019;
  --ambre:       #e0a23c;
  --ambre-fond:  #231a0d;

  --ui:    Archivo, "Helvetica Neue", Arial, sans-serif;
  --texte-serif: Spectral, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  --rayon: 3px;
  /* On occupe l’écran : sur un poste de bureau, une colonne centrée de
     1180 px laissait un tiers de l’affichage vide alors que le corpus
     tient en tableaux. Les paragraphes de lecture, eux, restent bornés :
     une ligne de 200 caractères ne se lit pas. */
  --large: 1680px;
}

/* Thème clair : le même corpus, tiré sur papier. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --fond:        #eef0f3;
    --fond-2:      #e5e8ec;
    --surface:     #ffffff;
    --surface-2:   #f4f6f8;
    --trait:       #ccd3db;
    --trait-fin:   #e0e5ea;
    --texte:       #10141a;
    --texte-2:     #47525f;
    --texte-3:     #6e7986;
    --chrome-haut: #4a5462;
    --chrome-bas:  #10141a;
    --rouge:       #b00f1d;
    --rouge-clair: #b00f1d;
    --rouge-fond:  #fdf0f1;
    --vert:        #12704f;
    --vert-fond:   #eef7f3;
    --ambre:       #8a6008;
    --ambre-fond:  #fdf6e8;
  }
}
:root[data-theme="light"] {
  --fond:        #eef0f3;
  --fond-2:      #e5e8ec;
  --surface:     #ffffff;
  --surface-2:   #f4f6f8;
  --trait:       #ccd3db;
  --trait-fin:   #e0e5ea;
  --texte:       #10141a;
  --texte-2:     #47525f;
  --texte-3:     #6e7986;
  --chrome-haut: #4a5462;
  --chrome-bas:  #10141a;
  --rouge:       #b00f1d;
  --rouge-clair: #b00f1d;
  --rouge-fond:  #fdf0f1;
  --vert:        #12704f;
  --vert-fond:   #eef7f3;
  --ambre:       #8a6008;
  --ambre-fond:  #fdf6e8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

.saut {
  position: absolute; left: -9999px;
  background: var(--rouge); color: #fff; padding: 10px 16px; z-index: 100;
}
.saut:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--rouge-clair); outline-offset: 2px; }

/* ── En-tête ────────────────────────────────────────────────── */
.entete {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  padding-top: env(safe-area-inset-top);
}
.entete__interieur {
  max-width: var(--large);
  margin: 0 auto;
  padding: 10px 34px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
/* Les colonnes sont assignées explicitement. Sans cela, quand le
   bouton de menu est masqué sur l'accueil, chaque élément remonte
   d'une colonne : la recherche atterrit dans une colonne « auto » et
   se ratatine, tandis que les boutons héritent du 1fr. */
.entete__interieur > .menu__bouton { grid-column: 1; }
.entete__interieur > .marque       { grid-column: 2; }
.entete__interieur > .recherche    { grid-column: 3; }
.entete__interieur > .entete__actions { grid-column: 4; }

.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* L’en-tête porte l’identité du logo, pas un carré générique :
   l’emblème détouré, puis le lettrage chromé et le rouge sur ONN.
   Le dégradé est appliqué au texte lui-même, avec une couleur de repli
   pour les navigateurs qui ne savent pas découper un fond sur du texte. */
.marque__embleme { height: 26px; width: auto; display: block; }
.marque__prev {
  color: var(--chrome-haut);
  background: linear-gradient(180deg, var(--chrome-haut) 30%, var(--chrome-bas));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-theme="light"] .marque__prev { -webkit-text-fill-color: currentColor; color: var(--texte); background: none; }
.marque__onn { color: var(--rouge); }
.marque__nom {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--texte);
}
.marque__nom em { font-style: normal; color: var(--rouge-clair); }

.recherche { display: flex; }
.recherche input {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-right: 0;
  border-radius: var(--rayon) 0 0 var(--rayon);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 14.5px;
  padding: 9px 13px;
}
.recherche input::placeholder { color: var(--texte-3); }
.recherche button {
  background: var(--surface-2);
  border: 1px solid var(--trait);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  color: var(--texte-2);
  cursor: pointer;
  padding: 0 14px;
  font-size: 15px;
}
.recherche button:hover { color: var(--rouge-clair); }

.entete__actions { display: flex; gap: 8px; align-items: center; }

.bouton {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 13.5px;
  background: var(--surface);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 8px 14px;
  cursor: pointer;
}
.bouton:hover { border-color: var(--texte-3); }
.bouton--fin { background: linear-gradient(180deg, var(--chrome-haut), var(--chrome-bas)); color: var(--fond); border: 0; }
:root[data-theme="light"] .bouton--fin { color: #fff; }
.bouton--icone { padding: 8px 11px; font-size: 15px; line-height: 1; }

/* ── Page ───────────────────────────────────────────────────── */
main { max-width: var(--large); margin: 0 auto; padding: 26px 34px 70px; }

.fil {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texte-3);
  margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.fil a { color: var(--texte-2); text-decoration: none; }
.fil a:hover { color: var(--rouge-clair); }

h1 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: clamp(27px, 4.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 10px;
  text-wrap: balance;
}
h2 {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 21px;
  margin: 38px 0 12px;
  letter-spacing: -.01em;
}
h3 { font-family: var(--ui); font-weight: 600; font-size: 16px; margin: 22px 0 6px; }
p { margin: 10px 0; max-width: 72ch; color: var(--texte-2); }
a { color: var(--rouge-clair); }

.intro { font-size: 17.5px; color: var(--texte-2); max-width: 66ch; }

/* ── Accueil : bandeau ──────────────────────────────────────── */
.heros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 46px;
  align-items: center;
  padding: 10px 0 30px;
  border-bottom: 1px solid var(--trait);
}
/* Le logo est détouré : il se pose directement sur le fond de
   l'application, sans cadre ni pastille. Seul le fond vrai a été rendu
   transparent, les reflets sombres du chrome sont conservés. */
.heros img { width: 100%; height: auto; display: block; }
.heros__accroche {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin-bottom: 12px;
}
.heros__etat {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--vert);
  background: var(--vert-fond);
  border: 1px solid color-mix(in srgb, var(--vert) 35%, transparent);
  border-radius: 100px;
  padding: 5px 13px;
}
.pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--vert); }

/* ── Grille des régimes ─────────────────────────────────────── */
.regimes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.regime {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 16px 16px 15px;
  position: relative;
  overflow: hidden;
}
.regime::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--chrome-haut), var(--chrome-bas));
}
.regime:hover { border-color: var(--texte-3); background: var(--surface-2); }
.regime:hover::before { background: var(--rouge); }
/* La cote du régime est le repère de navigation : c’est elle qu’on
   cherche des yeux, avant même l’intitulé. Elle doit peser. */
.regime__cote {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--rouge);
  letter-spacing: .08em;
  line-height: 1.1;
}
.regime__nom { font-weight: 600; font-size: 16.5px; margin-top: 6px; }
.regime__desc { font-size: 13.5px; color: var(--texte-3); margin-top: 5px; line-height: 1.45; }
.regime__compte {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texte-3);
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--trait-fin);
}

/* ── Veille ─────────────────────────────────────────────────── */
.veille { display: flex; flex-direction: column; }
.veille__entree {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--trait-fin);
}
.veille__date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--rouge-clair);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.veille__titre { font-weight: 600; font-size: 16px; }
.veille__texte { font-size: 14.5px; color: var(--texte-2); margin-top: 3px; max-width: 68ch; }
.veille__meta { font-family: var(--mono); font-size: 11px; color: var(--texte-3); margin-top: 6px; }

.etiquette {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid var(--trait);
  color: var(--texte-3);
  margin-right: 6px;
}
.etiquette--applicable { color: var(--vert); border-color: color-mix(in srgb, var(--vert) 40%, transparent); background: var(--vert-fond); }
.etiquette--differe   { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 40%, transparent); background: var(--ambre-fond); }
.etiquette--norme     { color: var(--texte-2); }

/* ── Sommaire d'un régime ───────────────────────────────────── */
.familles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.famille {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 10px 12px;
}
.famille:hover { border-color: var(--rouge); background: var(--surface-2); }
.famille__cote {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 15px;
  text-align: center;
  color: var(--fond);
  background: linear-gradient(180deg, var(--chrome-haut), var(--chrome-bas));
  border-radius: 2px;
  padding: 6px 0;
}
:root[data-theme="light"] .famille__cote { color: #fff; }
.famille__nom { font-size: 13.5px; line-height: 1.3; }

/* ── Article ────────────────────────────────────────────────── */
.article {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 26px 28px;
  max-width: 78ch;
}
.article__cote {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rouge-clair);
  letter-spacing: .08em;
}
/* Dans une rubrique, la cote devient un onglet : c'est le repère que
   l'œil cherche quand il descend la page, il doit accrocher seul. */
.rubrique .article__cote {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: var(--rouge);
  border-radius: 2px;
  padding: 4px 10px 3px;
  letter-spacing: .1em;
}
.article__titre { font-size: 24px; font-weight: 700; margin: 5px 0 3px; }
.rubrique .article__titre {
  font-family: var(--texte-serif);
  font-size: 27px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.005em;
  text-wrap: balance;
  margin: 16px 0 0;
}
.article__source { font-family: var(--mono); font-size: 11.5px; color: var(--texte-3); }
.article__texte {
  font-family: var(--texte-serif);
  font-size: 17px;
  line-height: 1.68;
  color: var(--texte);
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--trait-fin);
}
.article__texte p { color: inherit; max-width: none; }
.article__texte ol, .article__texte ul { padding-left: 22px; }

.veille__repli {
  font-size: 13px;
  color: var(--texte-3);
  margin: 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--trait);
  max-width: 78ch;
}

/* ── Le bandeau de version ────────────────────────────────────
   « Suis-je bien sur la dernière version ? » est la première question
   du métier, et la plus coûteuse quand la réponse est non. Elle est
   donc répondue en haut de chaque rubrique, pas en pied de page. */
.version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 14px;
  padding: 11px 16px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--vert);
  border-radius: var(--rayon);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texte-2);
}
.version:empty { display: none; }
.version strong { color: var(--texte); font-weight: 600; }
.version__point {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vert);
  display: inline-block;
  margin-right: 9px;
  vertical-align: 1px;
}
/* Une rédaction déjà datée mais pas encore applicable : un texte
   publié n'est pas un texte applicable, et la nuance se paie. */
.version__suite {
  color: var(--ambre);
  border-left: 1px solid var(--trait);
  padding-left: 18px;
}
.version__releve { color: var(--texte-3); margin-left: auto; }
@media (max-width: 760px) {
  .version__suite { border-left: 0; padding-left: 0; }
  .version__releve { margin-left: 0; }
}

/* ── Rubrique : le texte intégral, article après article ────────
   Même grille que le portail d'un régime : la liste des cotes tient
   la colonne de gauche et reste sous les yeux, le texte prend tout le
   reste de la largeur. Un règlement se lit en largeur, pas dans une
   gouttière au milieu d'un écran vide. */
.rubrique {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.rubrique__texte { display: flex; flex-direction: column; gap: 14px; }

/* L'article est traité comme une page de règlement : la cote en
   onglet sur l'arête, un filet rouge qui court le long du bord, et le
   texte en serif à une mesure lisible. Le reste de la carte reste
   sobre : ce qui doit se voir, c'est l'article. */
.rubrique .article {
  max-width: none;
  scroll-margin-top: 96px;
  position: relative;
  padding: 30px 34px 28px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--chrome-haut) 6%, transparent) inset;
}
.rubrique .article::before {
  content: "";
  position: absolute;
  left: -1px; top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, var(--rouge), transparent 70%);
  opacity: .55;
}
.rubrique .article--vu::before { opacity: 1; }
.rubrique .article__texte { max-width: 82ch; font-size: 17.5px; line-height: 1.78; }
.rubrique .article__texte p { margin: 0 0 1.2em; }
.rubrique .article__texte p:last-child { margin-bottom: 0; }

/* ── Les tableaux du règlement ────────────────────────────────────
   Ceux du texte réglementaire sont des grilles de décision : la
   périodicité des vérifications, les effectifs, les classements. Ils
   se lisent en croisant une ligne et une colonne, et rien n'est plus
   pénible qu'une grille serrée où l'œil saute d'une case à l'autre.

   Un tableau à quinze colonnes ne rentrera jamais dans une colonne de
   lecture : il défile dans son propre cadre, et la page, elle, ne
   part jamais de travers. */
.tableau {
  margin: 26px 0 30px;
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-2);
  /* Une ombre portée sur le bord droit dit qu'il reste du tableau
     à voir, sans barre de défilement permanente. */
  background-image: linear-gradient(to left, color-mix(in srgb, var(--fond) 60%, transparent), transparent 34px);
  background-repeat: no-repeat;
  background-position: right center;
  background-attachment: local, scroll;
}
.tableau table {
  border-collapse: collapse;
  width: 100%;
  min-width: max-content;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.tableau td, .tableau th {
  border: 1px solid var(--trait);
  padding: 11px 14px;
  vertical-align: top;
  text-align: left;
  color: var(--texte-2);
}
/* Les cellules portent des paragraphes centrés hérités du Journal
   officiel : on neutralise leurs marges, on garde le centrage. */
.tableau td p, .tableau th p { margin: 0; max-width: none; }
.tableau td p + p, .tableau th p + p { margin-top: 5px; }
.tableau td[align="center"], .tableau th[align="center"],
.tableau p[align="center"] { text-align: center; }

/* La première ligne fait office d'en-tête : c'est ainsi que le
   Journal officiel les compose, sans jamais employer « th ». */
.tableau tr:first-child td, .tableau th {
  background: var(--surface-2);
  color: var(--texte);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.tableau tr:nth-child(even) td:not(:first-child) {
  background: color-mix(in srgb, var(--surface) 40%, transparent);
}
.tableau tr:hover td { background: var(--surface-2); }

@media (max-width: 700px) {
  .tableau table { font-size: 13px; }
  .tableau td, .tableau th { padding: 9px 11px; }
}

.article__entete { display: flex; align-items: center; gap: 12px; }
.article__chemin {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--texte-3);
  margin-top: 10px;
  line-height: 1.65;
  letter-spacing: .02em;
}
.article__nota {
  margin-top: 18px;
  padding: 12px 14px;
  background: var(--fond-2);
  border-left: 2px solid var(--trait);
  font-size: 13.5px;
  color: var(--texte-2);
}
.article__nota span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 5px;
}
.article__source { margin-top: 16px; }

/* ── Notes, schémas et avis sous l'article ─────────────────────
   Repliés : le texte réglementaire reste premier, la note vient
   quand on la demande. Le liseré vert dit qu'il y a quelque chose
   à lire sans crier plus fort que l'article. */
.notes {
  margin-top: -8px;
  border: 1px solid var(--trait);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  overflow: hidden;
}
.notes__bouton {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 22px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texte-2);
  text-align: left;
}
.notes__bouton:hover { color: var(--texte); }
.notes__pastille {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vert);
  flex: none;
}
.notes__n {
  margin-left: auto;
  color: var(--texte-3);
  letter-spacing: 0;
}
.notes__bouton[aria-expanded="true"] .notes__n::after { content: " ▲"; }
.notes__bouton[aria-expanded="false"] .notes__n::after { content: " ▼"; }
.notes__corps { padding: 4px 22px 22px; }

/* Une note qui porte un schéma s'ouvre d'elle-même et se signale en
   rouge : c'est le contenu que personne d'autre ne donne. */
.notes--schema { border-left-color: var(--rouge); }
.notes--schema .notes__pastille { background: var(--rouge); }

.note + .note { margin-top: 24px; border-top: 1px solid var(--trait-fin); padding-top: 22px; }
.note__nature {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert);
}
.note--avis .note__nature { color: var(--rouge-clair); }
.note--histo .note__nature { color: var(--chrome-bas); }
.note--renvois .note__nature { color: var(--ambre); }

.note__liste { margin: 10px 0 0; padding-left: 20px; }
.note__liste li { margin-bottom: 5px; font-size: 14px; }
.note__liste a { color: var(--texte-2); }
.note__liste a:hover { color: var(--rouge-clair); }
/* « Se référer à » : la référence exacte à porter dans un dossier.
   C'est la seule ligne que le lecteur recopiera, elle doit se
   détacher du reste. */
.note__referer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--fond-2);
  border: 1px solid var(--vert);
  border-radius: var(--rayon);
}
.note__referer > span:first-child {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert);
  width: 100%;
}
.note__referer strong {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--texte);
  letter-spacing: .02em;
}
.note__referer em { font-size: 13px; color: var(--texte-3); font-style: italic; }
/* Une norme due gratuitement : c'est l'information la plus utile de
   la fiche, et la moins connue. Elle passe en tête, en vert. */
.note__gratuit {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: var(--vert-fond);
  border: 1px solid var(--vert);
  border-radius: var(--rayon);
  font-size: 14px;
  line-height: 1.6;
  color: var(--texte-2);
}
.note__gratuit > span:first-child {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 7px;
}
.note__gratuit strong { color: var(--texte); }
/* Le bouton d'accès à la consultation gratuite : c'est une porte, pas
   un lien de plus dans un paragraphe. */
.acces {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 18px;
  background: var(--vert);
  color: var(--fond);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--rayon);
}
.acces:hover { filter: brightness(1.12); }
.acces__note {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--texte-3);
}
.note__gratuit em {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--vert) 30%, transparent);
  font-size: 12.5px;
  color: var(--texte-3);
}

/* Le pendant du bloc vert : pas de gratuité, et la raison. Ambre,
   parce que ce n'est pas une faute, c'est un régime différent. */
.note__payant {
  margin: 16px 0 0;
  padding: 14px 18px;
  background: var(--ambre-fond);
  border: 1px solid color-mix(in srgb, var(--ambre) 55%, transparent);
  border-radius: var(--rayon);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-2);
}
.note__payant > span:first-child {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: 7px;
}
.note__payant strong { color: var(--texte); }

.note__referer-norme {
  width: 100%;
  font-size: 13px;
  color: var(--texte-2);
  padding-top: 8px;
  border-top: 1px solid var(--trait-fin);
}

/* Les citations littérales du règlement, dans la règle assemblée. */
.citation {
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--fond-2);
  border-left: 3px solid var(--rouge);
  font-family: var(--texte-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--texte);
}
.citation cite {
  display: block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  letter-spacing: .06em;
}
.citation cite a { color: var(--rouge-clair); text-decoration: none; }
.citation cite a:hover { text-decoration: underline; }

/* Un lien qui mène à une boutique et non au texte doit le dire avant
   qu'on clique : la déception vaut plus cher que la place gagnée. */
.note__avertlien {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--texte-3);
  font-style: italic;
}
.note__source-lien {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--fond-2);
  border-left: 2px solid var(--vert);
  font-size: 13.5px;
}
.note__nota {
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--fond-2);
  border-left: 2px solid var(--trait);
  font-size: 13.5px;
  white-space: pre-line;
}
/* Les cotes citantes : une grille de jetons, pas un paragraphe. */
.note__cotes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 14px;
}
.note__cotes .renvoi {
  font-family: var(--mono);
  font-size: 11.5px;
  border: 1px solid var(--trait);
  border-bottom-style: solid;
  border-radius: 2px;
  padding: 4px 9px 3px;
}
.note__titre {
  font-family: var(--texte-serif);
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0 12px;
  line-height: 1.3;
}
.note__texte { font-size: 15px; line-height: 1.65; color: var(--texte-2); }
.note__texte p { max-width: 80ch; }
.note__texte strong { color: var(--texte); }
.note__source {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--texte-3);
}

/* Les schémas sont dessinés, pas photographiés : ils suivent le thème
   et restent nets à toutes les tailles. */
.schema {
  display: block;
  width: 100%;
  height: auto;
  max-width: 900px;
  margin: 20px 0;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 8px;
}

/* ── L'intérieur d'une instruction technique ──────────────────────
   Une instruction se lit par paragraphes numérotés : 3.4, 3.4.1. Ces
   repères doivent accrocher l'œil, sinon on descend la page en
   cherchant un numéro qui se confond avec le texte. */
.it__sous {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 30px 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--trait-fin);
  font-family: var(--ui);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--texte);
}
.it__num {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--rouge-clair);
  letter-spacing: .04em;
  flex: none;
}

/* Une figure que le Journal officiel publie et que la version
   numérisée ne reproduit pas. Le dire franchement, avec la référence
   de parution, vaut mieux que laisser la phrase se perdre dans le
   corps du texte comme si elle en faisait partie. */
.absente {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--fond-2);
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
}
.absente__etiquette {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: 8px;
}
.absente p {
  margin: 0 !important;
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-2);
}
.absente strong { color: var(--texte); }

/* Le « centre » hérité du Journal officiel, neutralisé sans perdre
   l'intention de centrage sur le texte court. */
.centre { text-align: center; }
.centre .tableau, .centre .absente { text-align: left; }

/* ── Le renvoi, cliquable ─────────────────────────────────────────
   C'est la pièce maîtresse : dans un règlement, « voir MS 58 » est
   une instruction de navigation. Le souligné pointillé dit qu'on peut
   la suivre, sans crier comme un lien plein. */
.renvoi {
  color: var(--texte);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--rouge-clair) 65%, transparent);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: color .12s ease, background .12s ease;
}
.renvoi:hover {
  color: var(--rouge-clair);
  background: color-mix(in srgb, var(--rouge) 14%, transparent);
  border-bottom-style: solid;
}

/* Une référence à l'ancienne numérotation du code : elle mène au bon
   chapitre, pas au bon article. L'ambre le dit sans l'écrire. */
.renvoi--ancien { border-bottom-color: color-mix(in srgb, var(--ambre) 70%, transparent); }
.renvoi--ancien::after {
  content: "◦";
  font-size: .7em;
  vertical-align: super;
  color: var(--ambre);
  margin-left: 1px;
}
.renvoi--ancien:hover { color: var(--ambre); background: color-mix(in srgb, var(--ambre) 14%, transparent); }

/* L'article sur lequel un renvoi vous dépose clignote une fois : sans
   cela, on atterrit au milieu d'un mur de texte. */
.article--vise { animation: viser 2.6s ease-out; }
@keyframes viser {
  0%, 22% { box-shadow: 0 0 0 2px var(--rouge) inset, 0 0 26px color-mix(in srgb, var(--rouge) 40%, transparent); }
  100%    { box-shadow: none; }
}

/* ── Copier avec la référence ─────────────────────────────────── */
.article__copier {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
  background: none;
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 4px 11px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease;
}
.article__copier:hover { color: var(--texte); border-color: var(--texte-3); }
.article__copier--ok { color: var(--vert); border-color: var(--vert); }

mark {
  background: color-mix(in srgb, var(--rouge) 30%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* Un article abrogé reste consultable : un bâtiment construit sous son
   empire y reste soumis. Mais il ne doit jamais se confondre avec le
   droit en vigueur, d'où la bande ambre et le texte en retrait. */
.article__etat {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ambre);
  background: var(--ambre-fond);
  border: 1px solid var(--ambre);
  border-radius: 2px;
  padding: 2px 7px;
}
.article--abroge { border-left: 3px solid var(--ambre); }
.article--abroge .article__texte { color: var(--texte-2); }

/* ── Sommaire des cotes ───────────────────────────────────────── */
.sommaire {
  position: sticky;
  top: 74px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 12px 14px 14px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.sommaire__liste { display: flex; flex-wrap: wrap; gap: 6px; }
.sommaire__titre {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 10px;
}
.sommaire a {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texte-2);
  text-decoration: none;
  border: 1px solid var(--trait);
  border-radius: 2px;
  padding: 4px 9px 3px;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.sommaire a:hover { color: var(--rouge-clair); border-color: var(--rouge); }
/* L'article en cours de lecture s'allume dans le sommaire. Sur
   soixante-quinze articles, savoir où l'on est vaut mieux que
   compter les cotes. */
.sommaire a[aria-current="true"] {
  color: #fff;
  background: var(--rouge);
  border-color: var(--rouge);
}
.sommaire__abroge { opacity: .45; font-style: italic; }

.chargement {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--texte-3);
  padding: 40px 0;
}

/* Le compte d'articles, dans le tableau de bord d'un régime. */
.tdb__n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--texte-3);
  margin-left: 7px;
}
.rech__compte {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin: 12px 0 12px;
}
.resultat--abroge { opacity: .6; }
.resultat__regime {
  display: block;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-top: 5px;
}

/* Un article s'imprime : c'est une pièce de dossier, un extrait joint
   à une notice. On enlève le décor et on rend le texte au papier. */
@media print {
  .fond, .entete, .pied, .sommaire, .fil, .avis__chapo { display: none !important; }
  .rubrique { display: block; }
  .rubrique .article {
    background: #fff; color: #000; border: 0; border-bottom: 1px solid #ccc;
    box-shadow: none; padding: 0 0 18px; margin-bottom: 18px; break-inside: avoid;
  }
  .rubrique .article::before { display: none; }
  .rubrique .article__cote { background: none; color: #000; padding: 0; font-weight: 700; }
  .rubrique .article__texte, .article__chemin, .article__nota { color: #000; }
}

.avertissement {
  margin-top: 22px;
  border-left: 3px solid var(--rouge);
  background: var(--rouge-fond);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--texte-2);
  max-width: 78ch;
}

/* ── États vides et messages ────────────────────────────────── */
.vide {
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 30px 26px;
  text-align: center;
  color: var(--texte-3);
  max-width: 68ch;
}
.vide strong { color: var(--texte-2); display: block; margin-bottom: 6px; font-size: 16px; }

/* Les résultats forment un seul panneau à filets, pas une pile de
   cartes : quarante cartes empilées font un catalogue, un panneau
   réglé fait une table des matières. Et posés à même le décor, ils
   devenaient illisibles dès qu'une zone claire de la photo passait
   derrière. */
.panneau {
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
.resultat {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 20px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--trait-fin);
  padding: 15px 22px;
  transition: background .12s ease;
}
.resultat:last-child { border-bottom: 0; }
.resultat:hover { background: var(--surface-2); }
.resultat:hover .resultat__titre { color: var(--rouge-clair); }
.resultat__cote {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--rouge-clair);
  letter-spacing: .06em;
  padding-top: 2px;
  align-self: start;
}
.resultat__titre {
  font-family: var(--texte-serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
}
.resultat__extrait {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--texte-2);
  margin-top: 4px;
}
@media (max-width: 700px) {
  .resultat { grid-template-columns: 1fr; gap: 3px; padding: 14px 16px; }
  .resultat__extrait { grid-column: 1; }
}

/* ── L'outil « quels textes s'appliquent » ────────────────────── */
.outil {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  align-items: center;
  margin: 26px 0 40px;
  padding: 26px 30px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rouge);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.outil:hover { background: var(--surface-2); border-color: var(--rouge); }
.outil__etiquette {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin-bottom: 8px;
}
.outil h2 { margin: 0 0 8px; font-size: 23px; }
.outil p { margin: 0; max-width: 72ch; }
.outil__fleche { font-size: 26px; color: var(--rouge-clair); }

.choix {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 22px 0 30px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.choix label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.choix select {
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  padding: 10px 12px;
  min-width: 260px;
  max-width: 100%;
}
.choix select:focus-visible { border-color: var(--rouge); }

/* Les onglets de régime : on passe d'un ERP à un entrepôt sans
   repasser par l'accueil, parce que c'est ce que fait la journée. */
.onglets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}
.onglet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte-2);
  transition: border-color .12s ease, color .12s ease;
}
.onglet:hover { border-color: var(--texte-3); color: var(--texte); }
.onglet--actif { border-color: var(--rouge); background: var(--surface-2); color: var(--texte); }
.onglet__cote {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--rouge-clair);
}
.onglet__nom { font-size: 13.5px; }

.socle { display: flex; flex-direction: column; gap: 30px; margin-top: 10px; }

/* Les notes de source, dans la rubrique des normes. */
.note-droits, .note-renvoi {
  font-size: 13.5px;
  color: var(--texte-2);
  background: var(--fond-2);
  border-left: 2px solid var(--ambre);
  padding: 12px 16px;
  margin-top: 16px;
}
.note-renvoi { border-left-color: var(--vert); }
.socle__groupe h2 { margin: 0 0 4px; font-size: 20px; }
.socle__note {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--texte-3);
  max-width: 84ch;
}

/* ── Emporter le corpus ───────────────────────────────────────── */
.horsligne {
  margin-top: 44px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rouge);
  border-radius: var(--rayon);
  padding: 26px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
}
.horsligne h2 { margin: 0 0 6px; font-size: 21px; }
.horsligne p { max-width: 70ch; margin: 0; }
.horsligne__etat {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texte-3);
  margin-top: 10px;
  min-height: 17px;
}
@media (max-width: 720px) {
  .horsligne { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
}

/* ── La bannière de la maison ─────────────────────────────────
   Le seul endroit du site qui parle de nous. Il ne doit pas ressembler
   à une publicité : même trame, même grille, même typographie que le
   reste. Ce qui le distingue est un filet à gauche, comme les autres
   encadrés, mais neutre plutôt que rouge — le rouge est réservé à la
   réglementation, pas au commerce. ──────────────────────────── */
.maison {
  margin: 44px 0 8px;
  padding: 28px 30px;
  background: color-mix(in srgb, var(--surface) 97%, transparent);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--texte-3);
  border-radius: var(--rayon);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 34px;
  align-items: start;
}
.maison__etiquette {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-3);
  margin-bottom: 9px;
}
.maison h2 { margin: 0 0 9px; font-size: 21px; }
.maison__mot p { margin: 0; max-width: 56ch; font-size: 14px; color: var(--texte-2); }
.maison__mot strong { color: var(--texte); font-weight: 600; }

/* Les tuiles s'ajustent au nombre d'outils : une seule occupe la
   colonne, trois se rangent d'elles-mêmes. */
.maison__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.maison__outil {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.maison__outil:hover { border-color: var(--texte-3); background: var(--surface-2); }
.maison__type {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.maison__nom { font-weight: 700; font-size: 16px; }
.maison__texte { font-size: 13px; line-height: 1.5; color: var(--texte-2); }
.maison__adresse {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rouge-clair);
  word-break: break-all;
}
@media (max-width: 860px) {
  .maison { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; }
}

/* ── Pied ───────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--trait); background: var(--fond-2); margin-top: 40px; }
.pied__interieur {
  max-width: var(--large);
  margin: 0 auto;
  padding: 34px 34px 48px;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 48px;
}
.pied__marque { font-weight: 700; font-size: 17px; }
.pied__marque em { font-style: normal; color: var(--rouge-clair); }
.pied p { font-size: 13px; color: var(--texte-3); }
.pied__mentions p { max-width: 78ch; }
.pied__mentions strong { color: var(--texte-2); font-weight: 600; }

/* Les mentions légales : intitulé en petites capitales à gauche,
   valeur à droite. Une liste de définitions, parce que c'en est une. */
.pied__legal {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px 16px;
  font-size: 12.5px;
  line-height: 1.55;
}
.pied__legal dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texte-3);
  padding-top: 3px;
  white-space: nowrap;
}
.pied__legal dd { margin: 0; color: var(--texte-2); }
/* Le groupe « Nos outils » est un div pour que le script n'ait qu'une
   cible à remplir ; `display: contents` rend ses dt/dd à la grille des
   mentions, sinon ils formeraient un bloc à part dans une seule case. */
.pied__maison { display: contents; }
.pied__maison a { color: var(--texte-2); white-space: nowrap; }
.pied__legal a { color: var(--texte-2); }
.pied__legal a:hover { color: var(--rouge-clair); }
.pied__droits {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--trait-fin);
  font-family: var(--mono);
  font-size: 11px;
}
@media (max-width: 720px) {
  .pied__legal { grid-template-columns: 1fr; gap: 2px; }
  .pied__legal dt { padding-top: 10px; }
}

/* ── Adaptations ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .entete__interieur { grid-template-columns: auto auto; row-gap: 10px; }
  .recherche { grid-column: 1 / -1; order: 3; }
  .heros { grid-template-columns: 1fr; gap: 20px; }
  .heros img { max-width: 176px; }
  .pied__interieur { grid-template-columns: 1fr; gap: 20px; }
  .article { padding: 20px 18px; }
  .veille__entree { grid-template-columns: 1fr; gap: 4px; }
}

@media print {
  .entete, .pied, .fil { display: none; }
  body { background: #fff; color: #000; }
  .article { border: 0; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ── Avis et commentaires, sous l’article ───────────────────────
   Ils prolongent l’article, ils ne le concurrencent pas : même
   largeur, retrait marqué, et la nature toujours lisible. Un avis
   officiel porte un filet rouge, une lecture de praticien un filet
   chrome. On ne doit jamais pouvoir les confondre. ───────────── */
.avis { max-width: 78ch; margin-top: 30px; }
.avis__titre { font-size: 18px; margin: 0 0 4px; }
.avis__chapo { font-size: 14px; color: var(--texte-3); margin: 0 0 14px; }
.avis__item {
  border-left: 3px solid var(--trait);
  background: var(--surface);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 13px 16px;
  margin-bottom: 10px;
}
.avis__item--ccs, .avis__item--dgscgc { border-left-color: var(--rouge); }
.avis__item--note { border-left-color: var(--chrome-bas); }
.avis__entete { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.avis__nature {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--rouge-clair);
}
.avis__item--note .avis__nature { color: var(--texte-3); }
.avis__date { font-family: var(--mono); font-size: 11px; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.avis__sujet { font-size: 15.5px; margin: 4px 0 5px; }
.avis__texte { font-family: var(--texte-serif); font-size: 15.5px; line-height: 1.6; color: var(--texte-2); margin: 0; max-width: none; }
.avis__source { font-family: var(--mono); font-size: 10.5px; color: var(--texte-3); margin-top: 8px; }

/* ── Carrousel de fond ──────────────────────────────────────────
   Le décor ne doit jamais coûter une ligne de lisibilité : sur une
   application de texte réglementaire, on lit avant de regarder. Le
   voile est donc dense, et renforcé en haut de page, là où se trouvent
   les titres. Les images tournent lentement, sans mouvement brusque,
   et s'arrêtent net si l'appareil demande moins d'animation. */
.fond { position: fixed; inset: 0; z-index: -10; overflow: hidden; background: var(--fond); }
/* Une seule image de fond, posée directement : le carrousel a été
   abandonné au profit de ce visuel unique. Le zoom lent reste, il donne
   de la vie sans jamais détourner de la lecture. */
.fond__vue {
  position: absolute; inset: 0;
  background-image: url("../img/fond/fond.webp");
  background-size: cover;
  background-position: center;
  animation: fondZoom 34s ease-in-out infinite alternate;
}
@keyframes fondZoom { from { transform: scale(1); } to { transform: scale(1.07); } }

.fond__voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,16,.88) 0, rgba(11,13,16,.68) 320px, rgba(11,13,16,.58) 100%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .fond__voile {
    background: linear-gradient(180deg, rgba(238,240,243,.93) 0, rgba(238,240,243,.80) 320px, rgba(238,240,243,.72) 100%);
  }
}
:root[data-theme="light"] .fond__voile {
  background: linear-gradient(180deg, rgba(238,240,243,.93) 0, rgba(238,240,243,.80) 320px, rgba(238,240,243,.72) 100%);
}

/* Les surfaces deviennent légèrement translucides : le décor respire
   derrière les cartes sans jamais passer devant le texte. */
.regime, .famille, .article, .avis__item { background: color-mix(in srgb, var(--surface) 96%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .fond__vue { animation: none; transition: none; }
}
@media print { .fond { display: none; } }

/* ── Menu rapide ────────────────────────────────────────────────
   Repris du portail que connaissent les préventionnistes : une grille
   de neuf carrés, et les tuiles de régimes en surcouche. ───────── */
.menu__bouton {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 30px; padding: 12px 24px 12px 18px; cursor: pointer;
  color: var(--texte-2); font-family: var(--ui); font-size: 16px;
  line-height: 1.12; text-align: left; font-weight: 600; font-style: italic;
}
/* « display: flex » l'emporte sur l'attribut « hidden », qui ne pose
   qu'un « display: none » de feuille de style par défaut. Sans cette
   règle, le bouton reste visible sur l'accueil alors qu'on le masque. */
.menu__bouton[hidden] { display: none; }
.menu__bouton:hover { border-color: var(--rouge); color: var(--texte); }
.menu__grille { display: grid; grid-template-columns: repeat(3, 9px); gap: 4px; }
.menu__grille i { width: 9px; height: 9px; background: var(--rouge); border-radius: 2px; display: block; }

.menu__voile {
  position: fixed; inset: 0; z-index: 60;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 20px; overflow-y: auto;
}
/* Sans cette ligne, le « display: flex » ci-dessus écrase l’attribut
   hidden et le menu s’affiche en permanence. */
.menu__voile[hidden] { display: none; }
.menu__panneau { width: 100%; max-width: 940px; }
.menu__entete {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; font-family: var(--ui); font-size: 14px; color: var(--texte-2);
}
.menu__fermer {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  color: var(--texte-2); cursor: pointer; font-size: 15px; padding: 5px 11px;
}
.menu__fermer:hover { border-color: var(--rouge); color: var(--rouge-clair); }

/* ── Portail d’un régime ───────────────────────────────────────── */
.portail__titre { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.portail__cote {
  font-family: var(--mono); font-weight: 600; font-size: 26px;
  color: var(--rouge); letter-spacing: .04em;
}
.portail__titre h1 { font-size: clamp(21px, 3vw, 30px); margin: 0; }
.portail__base { font-family: var(--mono); font-size: 12.5px; color: var(--texte-3); }

.portail {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 22px;
}

.tdb {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 0 0 10px;
  position: sticky; top: 74px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
.tdb__entete {
  font-family: var(--ui); font-weight: 700; font-size: 15px;
  padding: 13px 16px; border-bottom: 1px solid var(--trait);
}
.tdb__groupe { padding: 12px 16px 4px; }
.tdb__titre {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--rouge-clair); margin-bottom: 6px;
}
.tdb__note { color: var(--texte-3); text-transform: none; letter-spacing: 0; }
.tdb__ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
  align-items: baseline; padding: 5px 0; text-decoration: none;
  border-bottom: 1px solid var(--trait-fin);
}
.tdb__ligne:last-child { border-bottom: 0; }
.tdb__nom { font-family: var(--ui); font-size: 13.5px; color: var(--texte-2); line-height: 1.3; }
.tdb__cote { font-family: var(--mono); font-size: 11.5px; color: var(--texte-3); white-space: nowrap; }
.tdb__ligne:hover .tdb__nom { color: var(--texte); }
.tdb__ligne:hover .tdb__cote { color: var(--rouge-clair); }

.portail__corps h2:first-of-type { margin-top: 0; }
.alaune {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--rouge);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  padding: 16px 18px; margin-bottom: 26px;
}
.alaune__etiquette {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rouge-clair);
}
.alaune__titre { font-size: 17px; margin: 5px 0 7px; }
.alaune__texte { font-size: 14.5px; margin: 0; }
.alaune__effet { font-family: var(--mono); font-size: 11.5px; color: var(--texte-3); margin: 9px 0 0; }

@media (max-width: 900px) {
  .portail { grid-template-columns: 1fr; }
  .tdb { position: static; max-height: none; }
  .menu__mot { display: none; }
  .menu__voile { padding: 24px 14px; }

  /* Sur téléphone, la colonne de gauche passe au-dessus du texte et
     se replie : quarante cotes empilées avant le premier article
     feraient une page de sommaire, pas une page de règlement. */
  .rubrique { grid-template-columns: 1fr; gap: 16px; }
  .sommaire { position: static; max-height: 132px; }
}

/* Les actualités reposent sur une surface : à même le décor, le texte
   devenait illisible dès qu’une image claire passait derrière. */
.portail__corps .veille__entree,
.veille .veille__entree {
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.veille .veille__entree:last-child { margin-bottom: 0; }

/* ── Veille en cartes, sur l’accueil ────────────────────────────
   Une grille de cartes plutôt qu’une liste : sur la page d’entrée, la
   veille doit se balayer du regard. Le bandeau porte la date d’EFFET,
   pas la date de parution — c’est celle qui engage le maître
   d’ouvrage, et la confondre coûte cher. ───────────────────────── */
.cartesV {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(286px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.carteV {
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
}
.carteV__bandeau {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; padding: 7px 13px; color: #fff;
  background: var(--rouge);
}
.carteV__bandeau--norme { background: var(--chrome-bas); color: var(--fond); }
.carteV__bandeau--differe { background: var(--ambre); color: #1a1205; }
.carteV__corps { padding: 13px 15px 6px; flex: 1; }
.carteV__regimes {
  font-family: var(--mono); font-size: 11px; color: var(--texte-3);
  font-style: italic; margin-bottom: 6px;
}
.carteV__titre { font-size: 15.5px; margin: 0 0 6px; line-height: 1.25; }
.carteV__texte {
  font-size: 13.5px; color: var(--texte-2); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.carteV__pied {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 12px;
  padding: 10px 15px 12px; border-top: 1px solid var(--trait-fin); margin-top: 10px;
}
.carteV__effet { font-family: var(--mono); font-size: 10.5px; color: var(--texte-3); line-height: 1.4; }
.carteV__pied a { font-family: var(--ui); font-weight: 600; font-size: 12.5px; white-space: nowrap; }

/* Un texte relevé automatiquement n’a pas la même valeur qu’un texte
   qualifié à la main : il le dit. */
.carteV__bandeau--aQualifier { background: var(--chrome-bas); color: var(--fond); }
.etiquette--aQualifier { color: var(--ambre); border-color: color-mix(in srgb, var(--ambre) 40%, transparent); background: var(--ambre-fond); }

/* La ligne de métadonnées d’une circulaire : date, NOR, ministère.
   En mono, parce que ce sont des références qu’on recopie. */
.doctrine__meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--texte-3);
  margin: 0 0 14px !important;
}

/* ── La jurisprudence sous l’article ──────────────────────────────
   Ce que le juge a dit de cet article. Le passage est un extrait, pas
   la décision : le liseré et la mise en retrait doivent l’annoncer,
   pour qu’on ne prenne jamais un extrait pour un texte complet. */
.juri {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--fond-2);
  border-left: 2px solid var(--chrome-bas);
  border-radius: 0 var(--rayon) var(--rayon) 0;
}
.juri__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-bottom: 9px;
}
.juri__cour {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--texte);
}
.juri__date, .juri__num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texte-3);
}
.juri__extrait {
  margin: 0 !important;
  font-family: var(--texte-serif);
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--texte-2);
}
.juri__lien { margin: 10px 0 0 !important; font-size: 12.5px; }
.juri__lien a { color: var(--rouge-clair); }
.note--juri .note__nature { color: var(--chrome-bas); }

/* ── Les avis de la commission, par année ─────────────────────────
   Une grille de documents : le mois en tête, l’intitulé dessous. On
   les parcourt de l’œil, on ne les lit pas en liste. */
.avis__grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.avis__doc {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 16px;
  background: var(--fond-2);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--rouge);
  border-radius: var(--rayon);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s ease, background .12s ease;
}
.avis__doc:hover { background: var(--surface-2); border-color: var(--rouge); }
.avis__mois {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rouge-clair);
}
.avis__nom { font-size: 13.5px; line-height: 1.45; color: var(--texte-2); }
.avis__doc:hover .avis__nom { color: var(--texte); }

/* ── La note de doctrine sous l’article ───────────────────────────
   Elle ne modifie pas le texte, elle dit comment l’administration le
   lit. Le rouge de la marque, parce que c’est le contenu que ce
   produit existe pour rendre gratuit. */
.dgs {
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--rouge-fond);
  border: 1px solid color-mix(in srgb, var(--rouge) 45%, transparent);
  border-radius: var(--rayon);
}
.dgs__entete { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 8px; }
.dgs__source {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--rouge-clair);
}
.dgs__theme { font-family: var(--mono); font-size: 10px; color: var(--texte-3); }
.dgs__titre {
  margin: 0 !important;
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--texte);
}
.dgs__lien { margin: 9px 0 0 !important; font-size: 12.5px; }
.dgs__lien a { color: var(--rouge-clair); }
.note--dgscgc .note__nature { color: var(--rouge-clair); }

/* ══════════════════════════════════════════════════════════════════
   LA CALCULATRICE RÉGLEMENTAIRE

   Le reste du site est plat, parce qu'un texte de loi se lit à plat.
   Ici c'est un instrument : il a un boîtier, des touches qui
   s'enfoncent, un afficheur en creux. Le relief n'est pas un
   ornement, il dit ce qui se presse et ce qui s'affiche.

   Trois plans, et pas un de plus :
     le boîtier  — soulevé, ombre portée douce ;
     les touches — soulevées sur le boîtier, enfoncées quand actives ;
     l'afficheur et les champs — creusés, ombre interne.

   Les ombres sont composées en color-mix sur du noir et du blanc, pas
   en valeurs fixes : le relief tient donc dans les deux thèmes, alors
   qu'une ombre noire en dur disparaît sur fond clair.
   ══════════════════════════════════════════════════════════════════ */

.cal__tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 10px 0 22px;
}
.cal__eti {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rouge-clair);
  margin-bottom: 8px;
}
.cal__tete h1 { margin: 0 0 10px; }

/* Le sigle somme, gravé dans une pastille en relief. */
.cal__blason {
  width: 78px; height: 78px;
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: 34px;
  color: var(--rouge-clair);
  border-radius: 50%;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--surface-2) 94%, #fff 6%),
    var(--surface));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 40%, transparent) inset,
    0 -1px 0 color-mix(in srgb, #000 18%, transparent) inset,
    0 6px 16px -6px color-mix(in srgb, #000 40%, transparent);
}

/* ── Les touches d'onglet ──────────────────────────────────────── */
.cal__onglets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.cal__onglet {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--texte-2);
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface-2) 92%, #fff 8%),
    var(--surface));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 34%, transparent) inset,
    0 3px 0 -1px color-mix(in srgb, #000 26%, transparent),
    0 7px 14px -8px color-mix(in srgb, #000 42%, transparent);
  transform: translateY(-1px);
  transition: transform .09s ease, box-shadow .09s ease, color .12s ease;
}
.cal__onglet:hover { color: var(--texte); }
.cal__onglet:active { transform: translateY(1px); box-shadow: 0 1px 0 -1px color-mix(in srgb, #000 26%, transparent); }
.cal__onglet.est-actif {
  color: var(--texte);
  border-color: var(--rouge);
  transform: translateY(1px);
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface-2) 94%, var(--rouge) 6%));
  box-shadow:
    0 2px 5px color-mix(in srgb, #000 26%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--rouge) 26%, transparent);
}
.cal__onglet-nom { font-family: var(--ui); font-size: 14.5px; font-weight: 600; }
.cal__onglet-art { font-family: var(--mono); font-size: 10px; color: var(--texte-3); }
.cal__onglet.est-actif .cal__onglet-art { color: var(--rouge-clair); }

/* ── Le boîtier ───────────────────────────────────────────────── */
.cal__corps {
  padding: 22px;
  border: 1px solid var(--trait);
  border-radius: 7px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 94%, #fff 6%),
    var(--fond-2));
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 34%, transparent) inset,
    0 18px 38px -22px color-mix(in srgb, #000 52%, transparent),
    0 3px 0 -1px color-mix(in srgb, #000 14%, transparent);
}
.cal__grille {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: start;
}

/* ── Les champs, creusés ──────────────────────────────────────── */
.cal__saisie { display: flex; flex-direction: column; gap: 14px; }
.cal__champ { display: flex; flex-direction: column; gap: 6px; }
.cal__champ > span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.cal__champ--court { max-width: 340px; }
.cal__saisie input[type="number"],
.cal__saisie select {
  width: 100%;
  padding: 9px 11px;
  font-family: var(--ui);
  font-size: 14px;
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--trait);
  border-radius: 4px;
  box-shadow: 0 2px 4px -1px color-mix(in srgb, #000 30%, transparent) inset;
}
.cal__saisie input[type="number"]:focus,
.cal__saisie select:focus { outline: none; border-color: var(--rouge); }
.cal__saisie input[disabled] { opacity: .45; }

.cal__postes { display: flex; flex-direction: column; gap: 9px; }
.cal__poste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--trait-fin);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.cal__poste-lib { font-size: 13px; line-height: 1.45; color: var(--texte-2); }
.cal__poste-saisie { display: flex; align-items: center; gap: 8px; }
.cal__poste-saisie input { width: 96px; }
.cal__poste-saisie em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  color: var(--texte-3);
}
.cal__coche { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--texte-2); }
.cal__coche input { margin-top: 2px; accent-color: var(--rouge); width: 16px; height: 16px; }
.cal__note, .cal__decl, .cal__renvoi { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--texte-3); }
.cal__decl {
  padding: 11px 13px;
  border-left: 2px solid var(--ambre);
  background: var(--ambre-fond);
  color: var(--texte-2);
}
.cal__decl strong { color: var(--texte); }
.cal__art { font-family: var(--mono); font-size: 12px; color: var(--rouge-clair); }

/* ── L'afficheur ──────────────────────────────────────────────── */
.cal__sortie { display: flex; flex-direction: column; gap: 16px; }
.cal__resultat {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--trait);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--fond), color-mix(in srgb, var(--fond-2) 88%, transparent));
  box-shadow:
    0 3px 8px -2px color-mix(in srgb, #000 34%, transparent) inset,
    0 1px 0 color-mix(in srgb, #fff 26%, transparent);
}
.cal__chiffre { display: flex; flex-direction: column; gap: 3px; min-width: 122px; }
.cal__chiffre strong {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--rouge-clair);
  letter-spacing: -.01em;
}
.cal__chiffre--fin strong { font-size: 21px; color: var(--texte); }
.cal__chiffre span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-3);
}
.cal__badge {
  margin-left: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 15px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 4px;
  color: var(--texte);
  background: var(--surface-2);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 34%, transparent) inset,
    0 3px 8px -4px color-mix(in srgb, #000 45%, transparent);
}
.cal__badge em {
  font-family: var(--mono); font-style: normal; font-size: 9.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3);
}
.cal__badge--1, .cal__badge--2 { box-shadow: 0 0 0 1px var(--rouge) inset, 0 3px 8px -4px color-mix(in srgb, #000 45%, transparent); }
.cal__badge--5 { box-shadow: 0 0 0 1px var(--vert) inset, 0 3px 8px -4px color-mix(in srgb, #000 45%, transparent); }

.cal__phrase { margin: 0; font-size: 15px; line-height: 1.6; color: var(--texte); }
.cal__vide { padding: 26px 20px; text-align: center; color: var(--texte-3); font-size: 13.5px; }
.cal__vide p { margin: 0; }

.cal__detail { width: 100%; border-collapse: collapse; font-size: 13px; }
.cal__detail caption {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  padding-bottom: 8px;
}
.cal__detail th {
  text-align: left;
  font-weight: 400;
  color: var(--texte-2);
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--trait-fin);
  line-height: 1.45;
}
.cal__detail td { padding: 7px 0; border-bottom: 1px solid var(--trait-fin); vertical-align: top; }
.cal__q { font-family: var(--mono); font-size: 11.5px; color: var(--texte-3); white-space: nowrap; padding-right: 14px; }
.cal__n { font-family: var(--mono); text-align: right; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal__somme th, .cal__somme td { font-weight: 700; color: var(--texte); border-bottom: 2px solid var(--trait); }

.cal__pourquoi h3 {
  margin: 0 0 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-3);
  font-weight: 500;
}
.cal__pourquoi ul, .cal__pourquoi ol { margin: 0; padding-left: 20px; }
.cal__pourquoi li { font-size: 13px; line-height: 1.6; color: var(--texte-2); margin-bottom: 6px; }
.cal__pourquoi p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--texte-2); }
.cal__pourquoi--garde {
  padding: 14px 16px;
  border-left: 2px solid var(--ambre);
  background: var(--ambre-fond);
  border-radius: 0 4px 4px 0;
}
.cal__pourquoi--garde strong { color: var(--texte); }
.cal__alerte {
  padding: 18px 20px;
  border: 1px solid var(--ambre);
  border-radius: 5px;
  background: var(--ambre-fond);
}
.cal__alerte h3 { margin: 0 0 8px; font-size: 16px; }
.cal__alerte p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: var(--texte-2); }

.cal__pied { display: flex; align-items: center; gap: 14px; padding-top: 4px; }
.cal__etat { font-family: var(--mono); font-size: 11.5px; color: var(--vert); }
.cal__avert {
  margin: 18px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texte-3);
  max-width: 84ch;
}

@media (max-width: 900px) {
  .cal__grille { grid-template-columns: 1fr; }
  .cal__tete { grid-template-columns: 1fr; }
  .cal__blason { display: none; }
  .cal__poste { grid-template-columns: 1fr; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cal__onglet { transition: none; }
}