@charset "UTF-8";
/* ==========================================================================
   SGACT.ch — feuille de style unique
   Ordre : socle → jetons → primitives → composants → gabarits → utilitaires
   → garde-fous → cibles tactiles (EN DERNIER, à spécificité égale l'ordre
   du fichier tranche).
   ========================================================================== */

/* --------------------------------------------------------------- 1. Socle */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}

ol[class], ul[class] { padding: 0; list-style: none; }
/* Les listes de navigation et du pied n'ont pas de classe : sans cette
   règle, leurs puces réapparaissent (vu sur la barre principale). */
nav ul, .pied ul { padding: 0; margin: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

:root { color-scheme: light; }

/* -------------------------------------------------------------- 2. Jetons */
:root {
  /* Palette — cahier des charges images §2.2 */
  --vert-profond: #075c45;
  --vert-medical: #0e7a5f;
  --vert-clair: #ddf3e8;
  --vert-voile: #f1faf5;
  --blanc-casse: #f8faf8;
  --gris-mineral: #e8eeeb;
  --anthracite: #16211d;
  --rouge-suisse: #d52b1e;

  /* Rôles */
  --fond: #ffffff;
  --fond-alt: var(--blanc-casse);
  --fond-inverse: var(--vert-profond);
  --texte: var(--anthracite);
  --texte-doux: #4a5a54;
  --texte-meta: #5c6e67;
  --texte-inverse: #ffffff;
  --texte-inverse-doux: #cfe6dc;
  --trait: #dfe7e3;
  --trait-fort: #c3d2cb;
  /* Bordure des champs de saisie : composant d'interface non textuel, seuil
     3:1 (SC 1.4.11). `--trait-fort` n'atteint que 1,57:1 et ne convient pas. */
  --trait-champ: #7d8f88;
  --accent: var(--vert-profond);
  --accent-clair: var(--vert-medical);

  /* Neutres chauds — cassent la monotonie des fonds froids. */
  --sable: #f7f2e9;
  --sable-trait: #e7dcc8;

  /* Accent de rubrique par défaut (vert de marque). Chaque rubrique le
     redéfinit via [data-rub] : la couleur de rubrique est un repère
     d'ORIENTATION ; les commandes (boutons, liens) restent vertes. */
  --rub-fort: var(--vert-profond);
  --rub-pale: var(--vert-clair);

  /* Tons sémantiques : jamais la couleur seule, toujours doublée d'un
     libellé et d'un pictogramme (WCAG 2.2, SC 1.4.1). */
  --info-fond: var(--vert-voile);
  --info-trait: #a9d9c4;
  --info-texte: #084c3a;
  --prudence-fond: #fef6e7;
  --prudence-trait: #e8c887;
  --prudence-texte: #7a4e00;
  --urgence-fond: #fdecea;
  --urgence-trait: #f0b3ac;
  --urgence-texte: #8e1c13;

  /* Typographie */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-titre: var(--font-sans);

  --t-display: clamp(2.1rem, 1.35rem + 3.1vw, 3.75rem);
  --t-h1: clamp(1.85rem, 1.3rem + 2.2vw, 3rem);
  --t-h2: clamp(1.4rem, 1.16rem + 0.95vw, 1.95rem);
  --t-h3: clamp(1.13rem, 1.03rem + 0.4vw, 1.35rem);
  --t-lead: clamp(1.05rem, 0.99rem + 0.28vw, 1.25rem);
  --t-base: 1.0625rem;
  --t-petit: 0.9375rem;
  --t-mini: 0.8125rem;

  /* Espacement */
  --e-1: 0.25rem;
  --e-2: 0.5rem;
  --e-3: 0.75rem;
  --e-4: 1rem;
  --e-5: 1.5rem;
  --e-6: 2rem;
  --e-7: 3rem;
  --e-8: clamp(3rem, 2rem + 4vw, 5rem);
  --e-9: clamp(4rem, 2.5rem + 6vw, 7rem);

  /* Formes */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-4: 22px;
  --r-plein: 999px;

  --ombre-1: 0 1px 2px rgba(22, 33, 29, 0.05);
  --ombre-2: 0 2px 6px rgba(22, 33, 29, 0.06),
             0 8px 22px -12px rgba(22, 33, 29, 0.14);
  --ombre-3: 0 4px 12px rgba(22, 33, 29, 0.08),
             0 22px 44px -22px rgba(22, 33, 29, 0.22);

  /* Mesures */
  --largeur: 1200px;
  --largeur-texte: 68ch;
  --gouttiere: clamp(1rem, 0.55rem + 1.9vw, 2.25rem);
  --header-h: 4.25rem;

  /* Courbes — les easings natifs manquent de tenue */
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --entree-sortie: cubic-bezier(0.77, 0, 0.175, 1);
  --d-court: 140ms;
  --d-moyen: 200ms;
  --d-long: 280ms;
}

/* ------------------------------------------------ 2bis. Accents de rubrique
   Un couple (fort, pâle) par rubrique — pastilles, tuiles d'icônes, bandeaux.
   Chaque couple est audité : fort ≥ 4,5:1 sur blanc ET sur son pâle.
   Le vert reste la couleur des COMMANDES ; ces accents orientent. */
[data-rub="douleurs"] { --rub-fort: #075c45; --rub-pale: #ddf3e8; }
[data-rub="blessures"] { --rub-fort: #9c4221; --rub-pale: #fae8df; }
[data-rub="premiers-gestes"] { --rub-fort: #8a5a00; --rub-pale: #fcf0d8; }
[data-rub="recuperation"] { --rub-fort: #0f5f6b; --rub-pale: #dcf0f3; }
[data-rub="prevention"] { --rub-fort: #55631b; --rub-pale: #edf1da; }
[data-rub="sports"] { --rub-fort: #35548f; --rub-pale: #e4eaf6; }
[data-rub="professionnels"] { --rub-fort: #5b4a8a; --rub-pale: #eae6f5; }

/* Courbes de niveau alpines en filigrane — dessinées en data-URI, aucune
   ressource externe. Deux encres : verte pour fonds clairs, blanche pour le
   bandeau newsletter. */
:root {
  --motif-contours: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="720" height="480" viewBox="0 0 720 480" fill="none" stroke="%230E7A5F" stroke-opacity=".055" stroke-width="1.6"><path d="M-20 90q180-70 360 0t400 0"/><path d="M-20 160q180-80 360 0t400 0"/><path d="M-20 230q180-70 360 0t400 0"/><path d="M-20 300q180-85 360 0t400 0"/><path d="M-20 370q180-70 360 0t400 0"/><path d="M-20 440q180-80 360 0t400 0"/></svg>');
  --motif-contours-blanc: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="720" height="480" viewBox="0 0 720 480" fill="none" stroke="%23FFFFFF" stroke-opacity=".07" stroke-width="1.6"><path d="M-20 90q180-70 360 0t400 0"/><path d="M-20 160q180-80 360 0t400 0"/><path d="M-20 230q180-70 360 0t400 0"/><path d="M-20 300q180-85 360 0t400 0"/><path d="M-20 370q180-70 360 0t400 0"/><path d="M-20 440q180-80 360 0t400 0"/></svg>');
}

/* --------------------------------------------------------- 3. Primitives */
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-titre);
  color: var(--vert-profond);
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
}

/* Tracking spécifique à la taille : serrer en grand, neutre en petit. */
h1 { font-size: var(--t-h1); letter-spacing: -0.021em; }
h2 { font-size: var(--t-h2); letter-spacing: -0.014em; line-height: 1.25; }
h3 { font-size: var(--t-h3); letter-spacing: -0.008em; line-height: 1.35; }
h4 { font-size: 1.0625rem; letter-spacing: -0.004em; }

p { text-wrap: pretty; }

a { color: var(--vert-medical); text-underline-offset: 0.18em; }
a:hover { color: var(--vert-profond); }

:focus-visible {
  outline: 3px solid var(--vert-medical);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection { background: var(--vert-clair); color: var(--vert-profond); }

hr {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: var(--e-6) 0;
}

/* --------------------------------------------------------- 4. Structures */
.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--e-8); }
.section--serree { padding-block: var(--e-7); }
/* Fond alterné chaud : le sable réchauffe le rythme des pages, en contraste
   avec les bandes vert d'eau et le blanc. */
.section--alt { background: var(--sable); }
.section--sable { background: var(--sable); padding-block: var(--e-8); }

.pile > * + * { margin-top: var(--e-4); }
.pile-l > * + * { margin-top: var(--e-6); }

.evitement {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  z-index: 200;
  padding: 0.7rem 1.1rem;
  background: var(--vert-profond);
  color: var(--texte-inverse);
  border-radius: var(--r-2);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--d-moyen) var(--sortie);
}
.evitement:focus { transform: translateY(0); color: var(--texte-inverse); }

/* ----------------------------------------------------------- 5. En-tête */
/* ⚠️ Le `backdrop-filter` est porté par `.entete__fond`, jamais par
   `<header>` : un ancêtre filtré devient le bloc conteneur des descendants en
   `position: fixed`, et le menu mobile cesserait de couvrir l'écran. */
.entete {
  position: sticky;
  top: 0;
  z-index: 100;
}
.entete__fond {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--trait);
}

.entete__barre {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: var(--header-h);
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--vert-profond);
  text-decoration: none;
  flex: 0 0 auto;
}
.marque__signe {
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 auto;
}
.marque__suffixe { color: var(--texte-meta); font-weight: 600; }

.nav-principale { margin-inline-start: auto; }
.nav-principale ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
}
.nav-principale a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-2);
  color: var(--texte);
  font-size: var(--t-petit);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-court) ease,
              color var(--d-court) ease;
}
.nav-principale a[aria-current="page"],
.nav-principale a[aria-current="true"] {
  color: var(--vert-profond);
  background: var(--vert-clair);
}

.entete__actions {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex: 0 0 auto;
}

/* -------------------------------------------------------- 6. Boutons */
.bouton {
  --b-fond: var(--vert-profond);
  --b-texte: #fff;
  --b-trait: var(--vert-profond);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  min-height: 44px;
  background: var(--b-fond);
  color: var(--b-texte);
  border: 1px solid var(--b-trait);
  border-radius: var(--r-2);
  font-size: var(--t-petit);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--d-court) var(--sortie),
              background-color var(--d-court) ease,
              border-color var(--d-court) ease;
}
.bouton:hover { color: var(--b-texte); }
.bouton:active { transform: scale(0.972); }

.bouton--secondaire {
  --b-fond: #fff;
  --b-texte: var(--vert-profond);
  --b-trait: var(--trait-fort);
}
.bouton--secondaire:hover { --b-trait: var(--vert-medical); }

.bouton--discret {
  --b-fond: transparent;
  --b-texte: var(--texte);
  --b-trait: transparent;
  padding-inline: 0.7rem;
}
.bouton--discret:hover { --b-fond: var(--gris-mineral); }

.bouton--large { width: 100%; }

/* ------------------------------------------------------- 7. Fil d'Ariane */
.ariane {
  padding-block: var(--e-4) 0;
  font-size: var(--t-mini);
  color: var(--texte-meta);
}
.ariane ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}
.ariane li { display: flex; align-items: center; gap: 0.35rem; }
.ariane li + li::before {
  content: "";
  width: 0.32rem;
  height: 0.32rem;
  border-top: 1.5px solid var(--trait-fort);
  border-right: 1.5px solid var(--trait-fort);
  transform: rotate(45deg);
}
.ariane a { color: var(--texte-meta); text-decoration: none; }
.ariane a:hover { color: var(--vert-profond); text-decoration: underline; }
.ariane [aria-current="page"] { color: var(--texte); font-weight: 600; }

/* ------------------------------------------------------------ 8. Pastilles */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-plein);
  background: var(--rub-pale);
  color: var(--rub-fort);
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
}
.pastille--sobre {
  background: var(--gris-mineral);
  color: var(--texte-doux);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  color: var(--texte-meta);
  font-size: var(--t-petit);
}
.meta > * { display: inline-flex; align-items: center; gap: 0.35rem; }

/* --------------------------------------------------------------- 9. Hero */
.hero {
  position: relative;
  overflow: hidden;
  /* Voile teinté fondant vers le blanc + courbes de niveau en filigrane.
     La teinte suit la rubrique via --rub-pale (vert par défaut). */
  background-image: var(--motif-contours),
    linear-gradient(180deg, var(--rub-pale), #ffffff 62%);
  background-size: 720px 480px, 100% 100%;
  background-repeat: repeat, no-repeat;
}
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: center;
  padding-block: var(--e-8);
}
.hero__texte { max-width: 34rem; }
.hero__titre {
  font-size: var(--t-display);
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin-block: var(--e-4) var(--e-4);
}
.hero__devise {
  margin-top: var(--e-4);
  font-size: var(--t-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vert-profond);
}
.hero__devise + .hero__accroche { margin-top: var(--e-2); }
.hero__accroche {
  font-size: var(--t-base);
  color: var(--texte-doux);
  max-width: 33rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.hero__visuel { position: relative; }
.hero__visuel img {
  width: 100%;
  border-radius: var(--r-4);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}

/* Silhouette annotée du hero : chaque étiquette est un lien SVG natif. */
.hero__silhouette { display: grid; place-items: center; }
.hero__silhouette svg {
  width: 100%;
  max-width: 24rem;
  height: auto;
}
.zone-appel { cursor: pointer; }
.zone-appel line { stroke: var(--trait-fort); stroke-width: 1.2; }
.zone-appel text {
  fill: var(--texte);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
}
.zone-appel__halo {
  fill: var(--vert-medical);
  opacity: 0.16;
  transition: opacity var(--d-court) ease;
}
.zone-appel__point, .zone-appel__ancre { fill: var(--vert-medical); }
@media (hover: hover) and (pointer: fine) {
  .zone-appel:hover text { fill: var(--vert-profond); text-decoration: underline; }
  .zone-appel:hover .zone-appel__halo { opacity: 0.42; }
}
.zone-appel:focus-visible text { fill: var(--vert-profond); text-decoration: underline; }
.zone-appel:focus-visible .zone-appel__halo { opacity: 0.5; }

/* Corps annoté du hero : image générée + étiquettes HTML positionnées.
   Le conteneur garde le ratio de l'image (4:5) ; traits et points vivent dans
   un SVG au même ratio, les étiquettes sont de vrais liens HTML. */
.corps-annote {
  position: relative;
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
}
.corps-annote > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-4);
}
.corps-annote__traits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.corps-annote__traits line { stroke: var(--trait-fort); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.corps-annote__traits circle { fill: var(--vert-medical); }
.corps-annote__traits .halo { opacity: 0.18; }
.corps-annote__etiquette {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.15rem 0.4rem;
  font-size: var(--t-petit);
  font-weight: 650;
  color: var(--texte);
  text-decoration: none;
  border-radius: var(--r-1);
  white-space: nowrap;
  transition: color var(--d-court) ease;
}
.corps-annote__etiquette::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--vert-medical);
  flex: 0 0 auto;
}
.corps-annote__etiquette:hover,
.corps-annote__etiquette:focus-visible {
  color: var(--vert-profond);
  text-decoration: underline;
}

/* Hero de rubrique : photo arrondie, même bande claire que l'accueil. */
.hero--rubrique .ariane { padding-block: var(--e-4) 0; }
.hero--rubrique .hero__grille { padding-block: var(--e-6) var(--e-7); }
.hero__photo {
  width: 100%;
  border-radius: var(--r-4);
  object-fit: cover;
  aspect-ratio: 16 / 11;
  box-shadow: var(--ombre-2);
  background: var(--gris-mineral);
}

/* Carte « articles à venir » : un emplacement assumé, pas un simulacre. */
.carte-avenir {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-4);
  border: 1.5px dashed var(--trait-fort);
  border-radius: var(--r-3);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--d-moyen) ease,
              box-shadow var(--d-moyen) var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .carte-avenir:hover {
    border-color: var(--rub-fort);
    box-shadow: var(--ombre-2);
    color: inherit;
  }
}
.carte-avenir__icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--rub-pale);
  color: var(--rub-fort);
}
.carte-avenir__titre { font-weight: 700; color: var(--rub-fort); }
.carte-avenir__texte { font-size: var(--t-petit); color: var(--texte-doux); }

.bandeau-confiance {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-plein);
  background: #fff;
  box-shadow: var(--ombre-1);
  font-size: var(--t-mini);
  color: var(--texte-doux);
  font-weight: 550;
}
.bandeau-confiance svg { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------- 10. Grilles */
.grille {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
/* Rangée des six rubriques (accueil, 404) : minimum calé pour que les six
   tiennent sur la largeur de contenu réelle (1128 px), deux par ligne sur
   mobile. */
.grille--rubriques {
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: var(--e-3);
}

.entete-section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-5);
}
.entete-section p {
  flex-basis: 100%;
  color: var(--texte-doux);
  max-width: var(--largeur-texte);
}
.lien-suite {
  font-size: var(--t-petit);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.lien-suite::after { content: " →"; }
.lien-suite:hover { text-decoration: underline; }

/* ---------------------------------------------------------- 11. Cartes */
.carte {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  overflow: hidden;
  transition: border-color var(--d-moyen) ease,
              box-shadow var(--d-moyen) var(--sortie),
              transform var(--d-moyen) var(--sortie);
}
.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  flex: 1 1 auto;
}
.carte__titre { font-size: 1.0625rem; line-height: 1.35; }
.carte__titre a { color: inherit; text-decoration: none; }
.carte__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.carte__resume { color: var(--texte-doux); font-size: var(--t-petit); }
.carte__pied {
  margin-top: auto;
  padding-top: var(--e-2);
  font-size: var(--t-mini);
  color: var(--texte-meta);
}
.carte__visuel {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  background: var(--gris-mineral);
}
/* Pastille de rubrique posée sur l'image (maquette) : fond blanc pour rester
   lisible quelle que soit la photo, texte à la couleur de la rubrique. */
.carte__media { position: relative; }
.carte__etiquette {
  position: absolute;
  left: 0.65rem;
  bottom: 0.65rem;
  background: #ffffff;
  color: var(--rub-fort);
  box-shadow: var(--ombre-1);
}
.carte--liee { position: relative; }

@media (hover: hover) and (pointer: fine) {
  .carte--liee:hover {
    border-color: var(--trait-fort);
    box-shadow: var(--ombre-2);
    transform: translateY(-2px);
  }
}
.carte--liee:focus-within {
  border-color: var(--vert-medical);
  box-shadow: var(--ombre-2);
}

/* Carte de rubrique (rangée sous le hero) — verticale, icône en tête,
   comme la maquette. */
.carte-rubrique {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-4);
  background: #fff;
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--d-moyen) ease,
              box-shadow var(--d-moyen) var(--sortie),
              transform var(--d-moyen) var(--sortie);
}
@media (hover: hover) and (pointer: fine) {
  .carte-rubrique:hover {
    border-color: var(--trait-fort);
    box-shadow: var(--ombre-2);
    transform: translateY(-2px);
    color: inherit;
  }
}
.carte-rubrique__icone {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-2);
  background: var(--rub-pale);
  color: var(--rub-fort);
  margin-bottom: var(--e-1);
}
/* Le liseré supérieur de la carte prend la couleur de sa rubrique. */
.carte-rubrique { border-top: 3px solid var(--rub-fort); }
.carte-rubrique__icone svg { width: 1.5rem; height: 1.5rem; }
.carte-rubrique__nom {
  font-weight: 700;
  color: var(--vert-profond);
  letter-spacing: -0.01em;
}
.carte-rubrique__accroche {
  font-size: var(--t-petit);
  color: var(--texte-doux);
  line-height: 1.45;
}

/* Bloc « preuves de confiance » */
.confiance {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding: var(--e-5);
  background: var(--vert-voile);
  border: 1px solid var(--info-trait);
  border-radius: var(--r-3);
}
.confiance__item { display: flex; gap: var(--e-3); align-items: flex-start; }
.confiance__item svg {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--vert-medical);
  margin-top: 0.15rem;
}
.confiance__titre {
  font-weight: 700;
  color: var(--vert-profond);
  font-size: var(--t-petit);
}
.confiance__texte { font-size: var(--t-petit); color: var(--texte-doux); }

/* ------------------------------------------------------- 12. Newsletter */
.infolettre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  align-items: center;
  padding: var(--e-6);
  border-radius: var(--r-4);
  background-color: var(--vert-profond);
  background-image: var(--motif-contours-blanc);
  background-size: 720px 480px;
  color: var(--texte-inverse);
}
.infolettre h2 { color: #fff; }
.infolettre p { color: var(--texte-inverse-doux); }
.infolettre__forme {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}
.infolettre__forme input[type="email"] {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: #fff;
  color: var(--texte);
}
.infolettre__forme input::placeholder { color: var(--texte-meta); }
.infolettre__forme .bouton {
  --b-fond: #fff;
  --b-texte: var(--vert-profond);
  --b-trait: #fff;
}
.infolettre__mention {
  margin-top: var(--e-3);
  font-size: var(--t-mini);
  color: var(--texte-inverse-doux);
}
.infolettre__case {
  flex-basis: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--t-petit);
  color: var(--texte-inverse-doux);
}
.infolettre__case input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  accent-color: #fff;
  flex: 0 0 auto;
}
.infolettre__case a { color: #fff; }
.infolettre .cf-turnstile { flex-basis: 100%; min-height: 65px; }
.infolettre :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------- 13. Article */
.gabarit-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
  align-items: start;
  padding-block: var(--e-6) var(--e-8);
}

.article-tete { padding-block: var(--e-5) 0; }
.article-tete__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  align-items: center;
}
.article-tete__visuel {
  width: 100%;
  border-radius: var(--r-3);
  object-fit: cover;
  aspect-ratio: 16 / 10;
  background: var(--gris-mineral);
}
.article-tete h1 { margin-block: var(--e-3) var(--e-3); }

.resume-cle {
  padding: var(--e-4) var(--e-5);
  background: #fff;
  border: 1px solid var(--trait);
  border-left: 4px solid var(--rub-fort);
  border-radius: var(--r-2);
}
.resume-cle__libelle {
  display: block;
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rub-fort);
  margin-bottom: var(--e-2);
}
.resume-cle p { font-size: var(--t-lead); color: var(--texte); }

.corps { max-width: var(--largeur-texte); }
.corps > * + * { margin-top: var(--e-4); }
.corps h2 {
  margin-top: var(--e-7);
  padding-top: var(--e-2);
  scroll-margin-top: 6rem;
}
.corps h3 { margin-top: var(--e-5); }
.corps ul, .corps ol { padding-left: 1.35rem; }
.corps li + li { margin-top: var(--e-2); }
.corps ul { list-style: none; padding-left: 0; }
.corps ul > li {
  position: relative;
  padding-left: 1.5rem;
}
.corps ul > li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.72em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--vert-medical);
}
.corps a { font-weight: 550; }

/* Encadrés — le ton est porté par le libellé ET le pictogramme */
.encadre {
  display: flex;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--info-trait);
  border-radius: var(--r-2);
  background: var(--info-fond);
  color: var(--info-texte);
}
.encadre__pic { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; }
.encadre__titre { font-weight: 700; color: inherit; font-size: 1.0625rem; }
.encadre p, .encadre li { color: inherit; font-size: var(--t-petit); }
.encadre > div > * + * { margin-top: var(--e-2); }
.encadre ul > li::before { background: currentColor; }
.encadre--prudence {
  background: var(--prudence-fond);
  border-color: var(--prudence-trait);
  color: var(--prudence-texte);
}
.encadre--urgence {
  background: var(--urgence-fond);
  border-color: var(--urgence-trait);
  color: var(--urgence-texte);
}

/* Grille de mini-cartes « causes fréquentes » */
.mini-cartes {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.mini-carte {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: #fff;
}
.mini-carte__titre {
  font-weight: 700;
  color: var(--vert-profond);
  font-size: var(--t-petit);
  margin-bottom: var(--e-1);
}
.mini-carte p { font-size: var(--t-petit); color: var(--texte-doux); }

/* Étapes numérotées */
.etapes { counter-reset: etape; list-style: none; padding-left: 0; }
.etapes > li {
  counter-increment: etape;
  position: relative;
  padding-left: 3rem;
  min-height: 2.25rem;
}
.etapes > li + li { margin-top: var(--e-4); }
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert-profond);
  font-weight: 700;
  font-size: var(--t-petit);
}
.etapes__titre { font-weight: 700; color: var(--vert-profond); }
.etapes p { font-size: var(--t-petit); color: var(--texte-doux); }

/* Tableaux — défilement horizontal confiné, jamais le body */
.tableau-enveloppe {
  overflow-x: auto;
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  -webkit-overflow-scrolling: touch;
}
.tableau-enveloppe table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-petit);
  min-width: 30rem;
}
.tableau-enveloppe caption {
  caption-side: bottom;
  padding: var(--e-3);
  font-size: var(--t-mini);
  color: var(--texte-meta);
  text-align: left;
}
.tableau-enveloppe th,
.tableau-enveloppe td {
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--trait);
}
.tableau-enveloppe thead th {
  background: var(--vert-voile);
  color: var(--vert-profond);
  font-weight: 700;
  white-space: nowrap;
}
.tableau-enveloppe tbody tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-4) 0;
  min-height: 44px;
  font-weight: 650;
  color: var(--vert-profond);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--vert-medical);
  border-bottom: 2px solid var(--vert-medical);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-moyen) var(--sortie);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details > div { padding-bottom: var(--e-4); }
.faq p { color: var(--texte-doux); font-size: var(--t-petit); }

/* Sources */
.sources ol { padding-left: 1.35rem; }
.sources li { font-size: var(--t-petit); color: var(--texte-doux); }
.sources li + li { margin-top: var(--e-3); }
.sources cite { font-style: normal; color: var(--texte); font-weight: 600; }

/* --------------------------------------------------- 14. Colonne latérale */
.rail { position: relative; }
.rail__contenu {
  position: sticky;
  top: calc(var(--header-h) + var(--e-4));
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.sommaire {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: #fff;
}
.sommaire__titre {
  font-size: var(--t-mini);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texte-meta);
  margin-bottom: var(--e-3);
}
.sommaire ol {
  counter-reset: som;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sommaire li { counter-increment: som; }
.sommaire a {
  display: flex;
  gap: 0.6rem;
  padding: 0.42rem 0.5rem;
  border-radius: var(--r-1);
  color: var(--texte-doux);
  font-size: var(--t-petit);
  line-height: 1.4;
  text-decoration: none;
  transition: background-color var(--d-court) ease, color var(--d-court) ease;
}
.sommaire a::before {
  content: counter(som) ".";
  color: var(--texte-meta);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.sommaire a:hover { background: var(--vert-voile); color: var(--vert-profond); }
.sommaire a[aria-current="true"] {
  background: var(--vert-clair);
  color: var(--vert-profond);
  font-weight: 650;
}

/* Cartes auteur / relecteur */
.signature {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.signature__carte {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: #fff;
}
/* Écusson de la rédaction : le site ne publie aucun portrait, la signature
   n'engage que le média. */
.signature__ecusson {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-2);
  background: var(--vert-clair);
  color: var(--vert-profond);
}
.signature__jeton {
  display: block;
  font-size: var(--t-mini);
  color: var(--texte-meta);
  margin-bottom: 0.1rem;
}
.signature__nom { font-weight: 700; color: var(--vert-profond); }
.signature__nom a { color: inherit; text-decoration: none; }
.signature__nom a:hover { text-decoration: underline; }
.signature__fonction { font-size: var(--t-mini); color: var(--texte-doux); }

/* -------------------------------------------------- 15. Explorer par zone */
.explorateur {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
  align-items: start;
}

.zones-liste { display: flex; flex-direction: column; gap: 0.2rem; }
.zone-bouton {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--texte);
  font-size: var(--t-petit);
  font-weight: 550;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--d-court) ease,
              border-color var(--d-court) ease;
}
.zone-bouton:hover { background: var(--vert-voile); }
.zone-bouton[aria-pressed="true"] {
  background: var(--vert-clair);
  border-color: var(--info-trait);
  color: var(--vert-profond);
  font-weight: 700;
}
.zone-bouton__puce {
  flex: 0 0 auto;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 2px solid var(--trait-fort);
}
.zone-bouton[aria-pressed="true"] .zone-bouton__puce {
  background: var(--vert-medical);
  border-color: var(--vert-medical);
}

.silhouette {
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: var(--vert-voile);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
}
.silhouette svg { width: 100%; max-width: 17.5rem; height: auto; }
.silhouette__corps { fill: #fff; stroke: var(--trait-fort); stroke-width: 1.4; }
.silhouette__repere {
  fill: var(--vert-medical);
  opacity: 0.35;
  cursor: pointer;
  transition: opacity var(--d-moyen) ease, r var(--d-moyen) var(--sortie);
}
.silhouette__repere:hover { opacity: 0.7; }
.silhouette__repere[data-actif="oui"] { opacity: 1; }
.silhouette__halo {
  fill: none;
  stroke: var(--vert-medical);
  stroke-width: 2;
  opacity: 0;
  transition: opacity var(--d-moyen) ease;
}
.silhouette__repere[data-actif="oui"] + .silhouette__halo { opacity: 0.55; }

.zone-panneau {
  padding: var(--e-5);
  border: 1px solid var(--trait);
  border-radius: var(--r-3);
  background: #fff;
}
.zone-panneau h3 { font-size: var(--t-h2); margin-bottom: var(--e-2); }
.zone-panneau__resume { color: var(--texte-doux); }
.zone-panneau ul { margin-top: var(--e-4); }
.zone-panneau li + li { margin-top: var(--e-2); }
.zone-panneau + .zone-panneau { margin-top: var(--e-3); }

/* Mode « un seul panneau » : activé uniquement si le script tourne.
   Sans JS, tous les panneaux restent empilés et lisibles. */
[data-js="oui"] .zone-panneau[data-cachee="oui"] { display: none; }
[data-js="non"] .zones-liste,
[data-js="non"] .silhouette { display: none; }

/* Page « Tous les articles » : filtre transversal par rubrique. Les chips
   reprennent la paire --rub-pale/--rub-fort déjà auditée. Sans JS, la barre
   de filtres est masquée et la liste complète reste affichée : on masque le
   dispositif, jamais le contenu. */
.filtres-rub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-5);
}
.filtre-rub {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.45rem 1rem;
  background: #fff;
  color: var(--texte);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-plein);
  font-size: var(--t-petit);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--d-court) ease,
              border-color var(--d-court) ease;
}
.filtre-rub:hover { background: var(--vert-voile); }
.filtre-rub[aria-pressed="true"] {
  background: var(--rub-pale);
  color: var(--rub-fort);
  border-color: var(--rub-fort);
  font-weight: 700;
}
[data-js="non"] .filtres-rub { display: none; }

/* Bouton « Afficher l'adresse » (mentions légales) : sans JS il serait
   inerte — on le masque, l'adresse reste joignable par le formulaire. */
[data-js="non"] .bouton-adresse { display: none; }
[data-js="oui"] [data-filtre-articles] .carte[data-cachee="oui"] { display: none; }

.zone-vide {
  padding: var(--e-5);
  border: 1px dashed var(--trait-fort);
  border-radius: var(--r-3);
  background: var(--fond-alt);
  color: var(--texte-doux);
}
.zone-vide strong { color: var(--vert-profond); }

/* ------------------------------------------------------ 16. Recherche */
.recherche-forme {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}
.recherche-forme input[type="search"] {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 44px;
  padding: 0.65rem 0.95rem;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-2);
  background: #fff;
}
.resultats { margin-top: var(--e-5); display: grid; gap: var(--e-3); }
.resultat {
  padding: var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-2);
  background: #fff;
}
.resultat h3 { font-size: 1.0625rem; }
.resultat p { font-size: var(--t-petit); color: var(--texte-doux); }
.resultat__chemin { font-size: var(--t-mini); color: var(--texte-meta); }

/* -------------------------------------------------------- 17. Formulaire */
.forme { display: grid; gap: var(--e-4); max-width: 38rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label { font-weight: 650; font-size: var(--t-petit); }
.champ input,
.champ textarea,
.champ select {
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-2);
  background: #fff;
}
.champ textarea { min-height: 9rem; resize: vertical; }
.champ__aide { font-size: var(--t-mini); color: var(--texte-meta); }
.champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.6rem; }
.champ--case input { min-height: 0; width: 1.15rem; height: 1.15rem; margin-top: 0.28rem; }
.champ--case label { font-weight: 450; }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ 18. Pied */
.pied {
  margin-top: var(--e-9);
  padding-block: var(--e-7) var(--e-5);
  background: var(--vert-profond);
  color: var(--texte-inverse-doux);
}
.pied__grille {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.pied__marque { color: #fff; }
.pied__marque p {
  margin-top: var(--e-3);
  font-size: var(--t-petit);
  color: var(--texte-inverse-doux);
  max-width: 22rem;
}
.pied h2 {
  color: #fff;
  font-size: var(--t-mini);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: var(--e-3);
}
.pied ul { display: grid; gap: 0.15rem; }
.pied a {
  display: inline-block;
  padding: 0.3rem 0;
  color: var(--texte-inverse-doux);
  font-size: var(--t-petit);
  text-decoration: none;
}
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-mini);
}
.pied :focus-visible { outline-color: #fff; }

/* -------------------------------------------------- 20. Bandeau prototype */
/* (Le bandeau prototype a été retiré le 05.08.2026 — plus de règle dédiée.) */

/* ----------------------------------------------------- 21. Menu mobile */
.bascule-menu { display: inline-flex; }
.menu-mobile {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 90;
  padding: var(--e-5) var(--gouttiere) var(--e-8);
  background: #fff;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-0.6rem);
  transition: opacity var(--d-moyen) var(--sortie),
              transform var(--d-moyen) var(--sortie),
              visibility var(--d-moyen);
  visibility: hidden;
}
.menu-mobile[data-ouvert="oui"] {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}
.menu-mobile ul { display: grid; gap: 0.15rem; margin-bottom: var(--e-5); }
.menu-mobile a {
  display: block;
  padding: 0.75rem 0.5rem;
  min-height: 44px;
  border-radius: var(--r-2);
  color: var(--texte);
  font-weight: 600;
  text-decoration: none;
}
.menu-mobile a:hover { background: var(--vert-voile); }

/* ------------------------------------------------------- 22. Utilitaires */
.hors-ecran {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.texte-doux { color: var(--texte-doux); }
.mesure { max-width: var(--largeur-texte); }
.centre { text-align: center; margin-inline: auto; }

/* ------------------------------------------------------- 23. Garde-fous */
/* [hidden] perd contre le display d'un composant : forcer une fois. */
[hidden] { display: none !important; }
/* Un SVG inline sans attribut width s'étire en géant. */
/* `:not()` n'accepte pas de combinateur descendant de façon fiable : la règle
   reste simple, tous les SVG produits par le moteur portent un `width`. */
svg:not([width]) { width: 1.15em; height: 1.15em; }

/* ------------------------------------------------------ 24. Points de rupture */
@media (min-width: 46rem) {
  .hero__grille {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: var(--e-7);
  }
  .hero__visuel img { aspect-ratio: 16 / 11; }
  .article-tete__grille {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
  .infolettre {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    padding: var(--e-7);
  }
  .explorateur {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

/* Rupture du header MESURÉE dans le navigateur, pas déduite d'un standard :
   marque 121 px + nav 702 px + actions 165 px + 2 gouttières de 16 px +
   58 px de padding = 1078 px (67,4 rem) de contenu incompressible.
   Seuil posé à 69 rem (1104 px) pour garder ~24 px de marge. */
@media (max-width: 68.999rem) {
  .nav-principale { display: none; }
}
@media (min-width: 69rem) {
  .bascule-menu { display: none; }
  .menu-mobile { display: none; }
  .gabarit-article {
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    gap: var(--e-7);
  }
  .gabarit-article--inverse {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  }
}

@media (max-width: 45.999rem) {
  .rail__contenu { position: static; }
  .sommaire ol { max-height: 15rem; overflow-y: auto; }
}

@media print {
  .entete, .pied, .rail, .infolettre { display: none; }
  body { font-size: 11pt; }
  .corps a::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------------------------------------------- 25. Préférences système */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .carte--liee:hover,
  .carte-rubrique:hover { transform: none; }
  .menu-mobile { transform: none; }
  .evitement { transition: none; }
  .evitement:not(:focus) { transform: translateY(-160%); }
}

@media (prefers-reduced-transparency: reduce) {
  .entete__fond { background: #fff; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root {
    --trait: #93a49d;
    --trait-fort: #52645c;
    --texte-doux: #23312c;
    --texte-meta: #2c3b35;
  }
  .carte, .mini-carte, .sommaire, .zone-panneau { border-width: 2px; }
}

/* ------------------------------------- 26. CIBLES TACTILES — EN DERNIER
   À spécificité égale, l'ordre du fichier tranche : ce bloc doit rester à la
   fin. Ne PAS y lister les éléments qui ont déjà un plancher supérieur à
   44px (une règle plus tardive les rabaisserait). */
@media (max-width: 63.999rem), (pointer: coarse) {
  /* La pastille n'y figure pas : c'est une étiquette, pas une commande —
     et en 44 px elle masquerait l'image qu'elle légende. */
  .nav-principale a,
  .pied a,
  .sommaire a,
  .ariane a,
  .lien-suite,
  .marque {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Les liens en pleine phrase relèvent de l'exception « inline » de la
     SC 2.5.8 : les agrandir casserait l'interligne du texte courant. */
  .pied ul a { padding-block: 0.5rem; }
  .sommaire a { padding-block: 0.6rem; }
}