/* Fiches conseil patients — appsante.eu/fiche-patient
   Objectif : conforme WCAG 2.1 niveau AA / RGAA 4.
   - Police Atkinson Hyperlegible (Braille Institute, SIL OFL 1.1), dessinée
     pour la basse vision : formes de lettres volontairement dissemblables
     (I / l / 1, O / 0, a / o), grandes ouvertures, hautes hauteurs d'x.
   - Contrastes vérifiés ≥ 4,5:1 (texte) et ≥ 3:1 (éléments d'interface).
   - Taille et contraste réglables par le lecteur (voir a11y.js), sans perte
     de contenu jusqu'à 200 % de zoom.
   - Charte du cabinet conservée : accent Fluent #0F6CBD. */

/* ---------- Police ---------- */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('polices/atkinson-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('polices/atkinson-ext-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('polices/atkinson-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('polices/atkinson-ext-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('polices/atkinson-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Couleurs ---------- */

:root {
  --bg: #f4f3f2;
  --panel: #ffffff;
  --panel-alt: #f7f6f5;
  --border: #c9c6c4;          /* 3:1 sur blanc : bordures perceptibles */
  --text: #1a1918;
  --muted: #4a4644;           /* 8,5:1 sur blanc */
  --accent: #0b5c9e;          /* 5,9:1 sur blanc */
  --accent-dark: #08497e;
  --accent-soft: #e8f1fa;
  --ok: #0a5f0a;
  --ok-soft: #e9f4e9;
  --warn: #7a4300;
  --warn-soft: #fbf1e3;
  --alert: #96222a;
  --alert-soft: #fceaea;
  --focus: #b45309;
  --highlight: #ffe89a;
  --highlight-edge: #8a6d0b;
  --radius: 10px;
  /* Échelle de texte : multiplicateur du corps par défaut du navigateur.
     Partir de rem (et non d'une taille en pixels) est ce qui permet à la
     page de suivre la taille de police choisie dans les réglages du
     système ou du navigateur — Dynamic Type sur iOS, taille de police
     Android, mise à l'échelle Windows. Piloté par la barre de réglages. */
  --echelle: 1.2;
}

/* Thème sombre : suivi automatique du réglage de l'appareil, et forçable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --bg: #14161a; --panel: #1d2026; --panel-alt: #232730;
    --border: #575d69; --text: #f2f3f5; --muted: #c3c8d1;
    --accent: #8cc2f5; --accent-dark: #b3d8fb; --accent-soft: #1f2c3b;
    --ok: #86d68a; --ok-soft: #17281a; --warn: #ecb46a; --warn-soft: #2b2214;
    --alert: #f4a0a5; --alert-soft: #33191b;
    --focus: #ffbf47; --highlight: #4a3d0e; --highlight-edge: #ffd75e;
  }
}
:root[data-theme="sombre"] {
  --bg: #14161a; --panel: #1d2026; --panel-alt: #232730;
  --border: #575d69; --text: #f2f3f5; --muted: #c3c8d1;
  --accent: #8cc2f5; --accent-dark: #b3d8fb; --accent-soft: #1f2c3b;
  --ok: #86d68a; --ok-soft: #17281a; --warn: #ecb46a; --warn-soft: #2b2214;
  --alert: #f4a0a5; --alert-soft: #33191b;
  --focus: #ffbf47; --highlight: #4a3d0e; --highlight-edge: #ffd75e;
}

/* Contraste renforcé : noir sur blanc, demandé par la barre de réglages
   ou par le réglage « contraste élevé » du système. */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --border: #000000; --text: #000000; --muted: #000000;
    --accent: #00408f; --accent-dark: #00306b;
    --panel: #ffffff; --panel-alt: #ffffff; --bg: #ffffff;
  }
}
:root[data-theme="contraste"] {
  --bg: #ffffff; --panel: #ffffff; --panel-alt: #ffffff;
  --border: #000000; --text: #000000; --muted: #000000;
  --accent: #00408f; --accent-dark: #00306b; --accent-soft: #ffffff;
  --ok: #00408f; --ok-soft: #ffffff; --warn: #00408f; --warn-soft: #ffffff;
  --alert: #8c0000; --alert-soft: #ffffff;
  --focus: #8c0000; --highlight: #ffe600; --highlight-edge: #000000;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Atkinson Hyperlegible', Verdana, 'Segoe UI', Tahoma,
               -apple-system, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: calc(1rem * var(--echelle));
  line-height: 1.7;
  letter-spacing: .01em;
  word-spacing: .04em;
  text-align: left;            /* jamais justifié : nuit à la dyslexie */
  -webkit-text-size-adjust: 100%;
  overflow-wrap: break-word;
}

/* Focus clavier toujours visible et épais (RGAA 10.7). */
:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lien d'évitement (RGAA 12.7). */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--panel);
  color: var(--accent-dark);
  font-weight: 700;
  padding: 12px 18px;
  border: 3px solid var(--focus);
  border-radius: 0 0 var(--radius) 0;
  z-index: 100;
}
.skip:focus { left: 0; }

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

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
}

.site-header .inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
}

.site-title {
  font-size: 1em;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.site-title:hover { text-decoration: underline; }

.site-sub { font-size: .9em; color: var(--muted); }
.site-sub a { color: var(--muted); }

/* ---------- Barre de réglages d'affichage ---------- */

.a11y-bar {
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
}
.a11y-bar .inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-size: .82em;
}
.a11y-bar .lab { color: var(--muted); font-weight: 700; }
.a11y-group { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.a11y-bar button {
  font: inherit;
  max-width: 100%;
  font-weight: 700;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.a11y-bar button:hover { border-color: var(--accent); color: var(--accent-dark); }
.a11y-bar button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* En thème sombre l'accent est clair : le texte du bouton actif passe en foncé. */
:root[data-theme="sombre"] .a11y-bar button[aria-pressed="true"] { color: #14161a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .a11y-bar button[aria-pressed="true"] { color: #14161a; }
}
.a11y-bar .t-s { font-size: .85em; }
.a11y-bar .t-m { font-size: 1em; }
.a11y-bar .t-l { font-size: 1.2em; }

/* ---------- Structure ---------- */

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 20px 60px;
}

/* La ligne de texte reste sous ~75 caractères (RGAA / lisibilité). */
main > p, main > ul, main > ol, .chapo { max-width: 68ch; }

.back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: .9em;
  color: var(--accent-dark);
  padding: 6px 0;
}

h1 { font-size: 1.6em; line-height: 1.25; font-weight: 700; margin-bottom: 10px; }

.chapo { font-size: 1.05em; color: var(--muted); margin-bottom: 22px; }

h2 {
  font-size: 1.22em;
  line-height: 1.3;
  margin: 34px 0 12px;
  padding-top: 18px;
  border-top: 3px solid var(--accent);
}

h3 { font-size: 1.05em; margin: 22px 0 6px; }

p { margin-bottom: 14px; }

ul, ol { margin: 0 0 16px 24px; }
li { margin-bottom: 9px; }

strong { font-weight: 700; }

/* Les liens dans le texte sont soulignés, pas seulement colorés (RGAA 10.6). */
a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

/* ---------- Encadrés ---------- */

.card, .key, .good, .alert, .tip {
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0;
  max-width: 68ch;
}
.card { background: var(--panel); border: 1px solid var(--border); }
.key  { background: var(--accent-soft); border: 1px solid var(--border); border-left: 8px solid var(--accent); }
.good { background: var(--ok-soft);     border: 1px solid var(--border); border-left: 8px solid var(--ok); }
.tip  { background: var(--warn-soft);   border: 1px solid var(--border); border-left: 8px solid var(--warn); }
.alert{ background: var(--alert-soft);  border: 1px solid var(--border); border-left: 8px solid var(--alert); }

.key > :last-child, .good > :last-child, .tip > :last-child,
.alert > :last-child, .card > :last-child { margin-bottom: 0; }

.alert h2, .alert h3, .key h3, .good h3 { border: none; padding-top: 0; margin-top: 0; }

/* ---------- Chiffres clés ---------- */

.stats {
  display: grid;
  /* 2 colonnes partout, telephone compris (choix de Thomas, 20/09/2026) :
     a 3 colonnes, la 4e tuile restait orpheline sur ordinateur. Repli a
     1 colonne sous 360px, et chiffres reduits sur petit ecran pour que
     "433 000" tienne dans une demi-largeur meme en texte tres agrandi
     (reflow 320px verifie par le banc). */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.stats li {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 5px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0;
}
.stats .num { display: block; font-size: 1.55em; font-weight: 700; color: var(--accent-dark); line-height: 1.2; }
.stats .lab { font-size: .88em; color: var(--muted); }

/* ---------- Sommaires ---------- */

.fiches { list-style: none; margin: 0; padding: 0; max-width: 68ch; }
.fiches li { margin-bottom: 14px; }

.fiche-link {
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 8px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
}
.fiche-link:hover { background: var(--accent-soft); }
.fiche-link .t { display: block; font-size: 1.1em; font-weight: 700; color: var(--accent-dark); margin-bottom: 4px; text-decoration: underline; text-underline-offset: 3px; }
.fiche-link .d { display: block; font-size: .92em; color: var(--muted); }

/* ---------- Lecteur audio ---------- */

.player {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.player button {
  font: inherit;
  max-width: 100%;
  font-weight: 700;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  min-height: 48px;
}
/* En thème sombre l'accent est clair : le texte des boutons pleins passe en
   foncé. Ne surtout pas viser tous les boutons : cette règle est plus
   spécifique que .secondary, et sans le :not() elle mettait Pause / Arrêter
   en texte sombre sur fond sombre (invisibles une fois la lecture lancée). */
:root[data-theme="sombre"] .player button:not(.secondary) { color: #14161a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .player button:not(.secondary) { color: #14161a; }
}
.player button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.player button.secondary { background: var(--panel); color: var(--accent-dark); }
.player button.secondary:hover { background: var(--accent-soft); }
.player button[hidden] { display: none; }

.player .speed { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-size: .9em; color: var(--muted); }
.player select {
  font: inherit; font-size: .95em; padding: 10px 12px; min-height: 48px;
  border: 2px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text);
}
.player .state { font-size: .88em; color: var(--muted); width: 100%; }
.player .state:empty { display: none; }  /* pas de blanc inutile tant que rien n'est lu */

/* Bloc en cours de lecture : couleur ET soulignement, jamais la couleur seule. */
.speaking {
  background: var(--highlight);
  box-shadow: 0 0 0 6px var(--highlight);
  border-radius: 3px;
  text-decoration: underline;
  text-decoration-color: var(--highlight-edge);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Tableau de relevé ---------- */

.releve { width: 100%; border-collapse: collapse; font-size: .88em; }
.releve caption { text-align: left; font-weight: 700; padding-bottom: 10px; font-size: .95em; }
.releve th, .releve td { border: 1px solid var(--border); padding: 9px 8px; text-align: center; }
.releve thead th { background: var(--accent-soft); font-weight: 700; }
.releve tbody th { text-align: left; font-weight: 700; background: var(--panel-alt); white-space: nowrap; }
.releve tbody td { height: 46px; }
.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.note { font-size: .9em; color: var(--muted); margin: 10px 0 0; }

/* ---------- Tableau récapitulatif (numéros, repères) ---------- */

.tableau { width: 100%; border-collapse: collapse; font-size: .92em; }
.tableau caption { text-align: left; font-weight: 700; padding-bottom: 10px; font-size: .95em; }
.tableau th, .tableau td { border: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.tableau thead th { background: var(--accent-soft); font-weight: 700; }
.tableau tbody th { background: var(--panel-alt); white-space: nowrap; font-weight: 700; }
.numero { font-size: 1.15em; color: var(--accent-dark); }

@media (max-width: 560px) {
  .tableau { font-size: .86em; }
  .tableau th, .tableau td { padding: 8px 7px; }
}

/* ---------- Schéma (dessin en SVG dans la page) ---------- */

.schema { margin: 20px 0; max-width: 68ch; }
.schema svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.schema figcaption { font-size: .9em; color: var(--muted); margin-top: 8px; }

/* ---------- Sources, avertissement, pied de page ---------- */

.sources { font-size: .9em; color: var(--muted); max-width: 68ch; }
.sources h2 { font-size: 1.05em; }
.sources li { margin-bottom: 7px; }

.disclaimer {
  margin-top: 26px;
  font-size: .9em;
  color: var(--muted);
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  /* Le ch se calcule sur la police de l'élément : en corps .9em, 68ch
     donnait une boîte plus étroite que les encadrés voisins (remarque
     de Thomas, 26/09/2026). On compense pour aligner les largeurs. */
  max-width: calc(68ch / 0.9);
}

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 18px 20px;
  font-size: .85em;
  color: var(--muted);
}
.site-footer .inner { max-width: 780px; margin: 0 auto; }

/* ---------- Petits écrans ---------- */

@media (max-width: 359px) {
  .stats { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  main { padding: 18px 16px 50px; }
  .stats { gap: 10px; }
  .stats li { padding: 12px 12px; }
  .stats .num { font-size: 1.2em; }
  .player .speed { margin-left: 0; }
  .releve th, .releve td { padding: 7px 5px; }
}

/* ---------- Grands écrans ---------- */

/* Au-delà de 1100 px, la colonne s'élargit (1040 px au lieu de 780) et
   les sommaires passent sur 2 colonnes. La longueur des lignes de texte
   reste plafonnée à 68ch (lisibilité, RGAA) : ce sont les cartes des
   sommaires et les tableaux qui profitent de la place, pas les
   paragraphes. Les chiffres clés gardent une largeur raisonnable. */
@media (min-width: 1100px) {
  main,
  .site-header .inner,
  .a11y-bar .inner,
  .site-footer .inner { max-width: 1040px; }
  .fiches {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .fiches li { margin-bottom: 0; }
  .fiche-link { height: 100%; }
  .stats { max-width: 720px; }
}

/* ---------- Impression ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; line-height: 1.5; }
  .player, .back, .site-footer, .a11y-bar, .skip { display: none !important; }
  .site-header { border: none; padding: 0 0 8pt; }
  main { max-width: none; padding: 0; }
  main > p, main > ul, .chapo, .card, .key, .good, .alert, .tip, .sources, .disclaimer { max-width: none; }
  h2 { border-top: 1pt solid #666; page-break-after: avoid; }
  .card, .key, .good, .alert, .tip, .stats li { border: 1pt solid #666; page-break-inside: avoid; }
  .releve tbody td { height: 34pt; }
  .speaking { background: none; box-shadow: none; text-decoration: none; }
  a { color: #000; }
}

/* ---------- Préférences système ---------- */

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

@media (forced-colors: active) {
  .fiche-link, .card, .key, .good, .alert, .tip, .player { border: 1px solid CanvasText; }
  .speaking { background: Highlight; color: HighlightText; }
}

/* =====================================================================
   Santé voyage (appsante.eu/voyage) : ajouts à la feuille de fiche-patient
   ===================================================================== */

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Navigation de rubrique dans l'en-tête */
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 16px; width: 100%; font-size: .9em; }
.site-nav a { padding: 6px 0; min-height: 44px; display: inline-flex; align-items: center; }
.site-nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: 3px; }

/* Titres sans filet (dans les encadrés) */
h2.sans-trait { border: none; padding-top: 0; margin-top: 0; }

/* ---------- Recherche ---------- */
.recherche { margin: 8px 0 26px; max-width: 68ch; }
.recherche-label { display: block; font-weight: 700; margin-bottom: 6px; }
.combo { position: relative; }
.combo input {
  font: inherit; width: 100%; min-height: 52px; padding: 10px 14px;
  border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text);
}
.combo input:focus { border-color: var(--accent); }
.combo input::placeholder { color: var(--muted); opacity: 1; }
.suggestions {
  list-style: none; margin: 4px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 2px solid var(--accent); border-radius: var(--radius);
  max-height: 60vh; overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.suggestions[hidden] { display: none; }
.suggestions li {
  margin: 0; padding: 10px 12px; min-height: 44px; border-radius: 6px; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  border: 2px solid transparent;
}
.suggestions li .nom { font-weight: 700; }
.suggestions li .detail { font-size: .85em; color: var(--muted); }
.suggestions li:hover { background: var(--accent-soft); }
/* Option active : fond ET bordure, jamais la couleur seule. */
.suggestions li[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); }
.suggestions li.aucun { cursor: default; color: var(--muted); }

/* ---------- Liste des destinations ---------- */
.zone h3 { font-size: 1.05em; margin: 24px 0 8px; }
.liste-pays {
  list-style: none; margin: 0; padding: 0;
  columns: 3 13em; column-gap: 24px;
}
.liste-pays li { margin: 0; break-inside: avoid; }
.liste-pays a { display: inline-block; padding: 6px 0; min-height: 44px; line-height: 1.4; }

/* ---------- Page pays ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 20px; }
.bouton {
  font: inherit; font-weight: 700; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--accent); background: var(--accent); color: #fff; text-decoration: none;
  max-width: 100%;
}
.bouton:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.bouton.secondaire { background: var(--panel); color: var(--accent-dark); }
.bouton.secondaire:hover { background: var(--accent-soft); }
.bouton[hidden] { display: none; }
:root[data-theme="sombre"] .bouton:not(.secondaire) { color: #14161a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .bouton:not(.secondaire) { color: #14161a; }
}

.sommaire { max-width: 68ch; margin: 0 0 8px; }
.sommaire ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .92em; }
.sommaire li { margin: 0; }
.sommaire a { display: inline-block; padding: 6px 0; min-height: 44px; }

.essentiel { margin: 0; }
.essentiel dt { font-weight: 700; margin-top: 12px; }
.essentiel dt:first-child { margin-top: 0; }
.essentiel dd { margin: 4px 0 0; }
.essentiel dd ul { margin-top: 4px; }

/* Pastilles d'état : pictogramme + texte + bordure (jamais la couleur seule). */
.etat {
  display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%;
  padding: 4px 12px; border-radius: 8px; border: 2px solid; font-weight: 700;
  /* « chimioprophylaxie » ne tient pas sur une ligne à 320 px en texte
     très agrandi : césure française, et coupure forcée en dernier recours. */
  hyphens: auto; overflow-wrap: anywhere; min-width: 0;
}
.etat .libelle { min-width: 0; }
.etat .picto {
  flex: none; display: inline-grid; place-items: center;
  width: 1.4em; height: 1.4em; border-radius: 50%; font-size: .85em;
  color: var(--panel);
}
.etat-alerte    { border-color: var(--alert); background: var(--alert-soft); color: var(--alert); }
.etat-alerte .picto { background: var(--alert); }
.etat-attention { border-color: var(--warn);  background: var(--warn-soft);  color: var(--warn); }
.etat-attention .picto { background: var(--warn); }
.etat-ok        { border-color: var(--ok);    background: var(--ok-soft);    color: var(--ok); }
.etat-ok .picto { background: var(--ok); }
.etat-neutre    { border-color: var(--border); background: var(--panel-alt); color: var(--text); }
.etat-neutre .picto { background: var(--muted); }

.tableau.fiche td { width: 50%; }
.tableau td p, .tableau td ul { margin-bottom: 6px; }
.tableau td > :last-child { margin-bottom: 0; }
.tableau td ul { margin-left: 18px; }
.tableau tr.groupe th { background: var(--accent-soft); white-space: normal; }
.tableau td.sous-titre { background: var(--panel-alt); font-weight: 700; }
.tableau tbody th[scope="row"] { white-space: normal; width: 45%; }

.fiche-dl { margin: 10px 0 14px; max-width: 68ch; }
.fiche-dl dt { font-weight: 700; }
.fiche-dl dd { margin: 0 0 8px; }

.ref { color: var(--muted); font-size: .88em; white-space: nowrap; }

details { max-width: 68ch; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
details > summary { cursor: pointer; font-weight: 700; padding: 12px 16px; min-height: 44px; color: var(--accent-dark); }
details > :not(summary) { padding: 0 16px; }
details[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
details > :last-child { padding-bottom: 12px; }

.fiches-mini { max-width: 68ch; }

/* ---------- Petits écrans ---------- */
@media (max-width: 560px) {
  .liste-pays { columns: 2 9em; }
  .bouton { width: 100%; justify-content: center; }
  .ref { white-space: normal; }
}

/* ---------- Impression ---------- */
@media print {
  .site-nav, .actions, .sommaire, .recherche, .no-print { display: none !important; }
  details { border: none; }
  details > summary { padding: 0; color: #000; }
  .etat { border: 1pt solid #000; background: none !important; color: #000 !important; }
  .etat .picto { background: none !important; color: #000; border: 1pt solid #000; }
  .table-wrap { overflow: visible; }
  .tableau { page-break-inside: auto; }
  .tableau tr { page-break-inside: avoid; }
}

@media (forced-colors: active) {
  .etat, .suggestions li[aria-selected="true"] { border: 2px solid CanvasText; }
  .etat .picto { border: 1px solid CanvasText; }
}

/* Petits écrans : les tableaux de la page pays passent en blocs empilés
   (la mesure, puis son niveau de recommandation), plutôt qu'un défilement
   horizontal illisible à 320 px en texte agrandi. */
@media (max-width: 700px) {
  .tableau.empile, .tableau.empile tbody, .tableau.empile tr, .tableau.empile td, .tableau.empile th { display: block; width: auto !important; }
  .tableau.empile caption { display: block; }
  .tableau.empile thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tableau.empile tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
  .tableau.empile td, .tableau.empile th { border: none; border-bottom: 1px solid var(--border); }
  .tableau.empile td:last-child { border-bottom: none; }
  .tableau.empile td[data-libelle]::before {
    content: attr(data-libelle); display: block; font-size: .85em; font-weight: 700; color: var(--muted); margin-bottom: 4px;
  }
}

/* Renvois de la fiche régionale devenus liens, encadré « actualité » */
.renvoi { font-size: .9em; margin-top: 6px; }
.actualite {
  max-width: 68ch; margin: 0 0 16px; padding: 10px 14px;
  background: var(--warn-soft); border: 1px solid var(--border); border-left: 6px solid var(--warn);
  border-radius: var(--radius); font-size: .95em;
}

/* Pastilles : pictogrammes SVG (remplacent les caractères du 29/09/2026). */
.etat { align-items: center; }
.etat .picto { width: 1.3em; height: 1.3em; background: none !important; border-radius: 0; color: inherit; }
.etat .picto svg { width: 100%; height: 100%; display: block; }
.etat .picto .fond { fill: currentColor; stroke: currentColor; stroke-width: 1.5; }
.etat .picto .signe { fill: var(--panel); }
.etat .picto .trait { fill: none; stroke: var(--panel); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
details h3 { margin-top: 18px; }
details .fiche-dl dd { margin-bottom: 10px; }
@media print {
  .etat .picto .fond { fill: none; stroke: #000; }
  .etat .picto .signe { fill: #000; }
  .etat .picto .trait { stroke: #000; }
}
@media (forced-colors: active) {
  .etat .picto .fond { fill: CanvasText; stroke: CanvasText; }
  .etat .picto .signe { fill: Canvas; }
  .etat .picto .trait { stroke: Canvas; }
}
details h3 { font-size: 1.15em; color: var(--accent-dark); padding-bottom: 4px; border-bottom: 2px solid var(--accent); }
details .fiche-dl dt { margin-top: 8px; }

/* =====================================================================
   Habillage « carnet de voyage » (piste B, choisie le 29/09/2026)
   ===================================================================== */

/* Couleurs par rubrique : servent aux icônes et aux filets (éléments
   graphiques, contraste ≥ 3:1), jamais seules pour porter un sens. */
:root {
  --c-essentiel: #0b5c9e;
  --c-region:    #1f6f54;
  --c-vaccins:   #0b5c9e;
  --c-palu:      #a0460a;
  --c-piqures:   #2f6b1f;
  --c-altitude:  #5b4a8a;
  --c-formalites:#6a3d8f;
  --c-conseils:  #8a5a00;
  --c-sources:   #4a4644;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --c-essentiel: #8cc2f5; --c-region: #7fd1b0; --c-vaccins: #8cc2f5; --c-palu: #f2a36b;
    --c-piqures: #9fd58a; --c-altitude: #c3b3f0; --c-formalites: #d2a8f0; --c-conseils: #ecc06a; --c-sources: #c3c8d1;
  }
}
:root[data-theme="sombre"] {
  --c-essentiel: #8cc2f5; --c-region: #7fd1b0; --c-vaccins: #8cc2f5; --c-palu: #f2a36b;
  --c-piqures: #9fd58a; --c-altitude: #c3b3f0; --c-formalites: #d2a8f0; --c-conseils: #ecc06a; --c-sources: #c3c8d1;
}
:root[data-theme="contraste"] {
  --c-essentiel: #00408f; --c-region: #00408f; --c-vaccins: #00408f; --c-palu: #00408f;
  --c-piqures: #00408f; --c-altitude: #00408f; --c-formalites: #00408f; --c-conseils: #00408f; --c-sources: #000;
}

/* Icônes de section, dessinées en CSS (masque SVG) : décoratives. */
.ico::before {
  content: ""; display: inline-block; flex: none;
  width: 1.35em; height: 1.35em; margin-right: .45em; vertical-align: -.28em;
  background: var(--ico-couleur, currentColor);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-essentiel { --ico-couleur: var(--c-essentiel); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3 6.3 6.9.9-5 4.8 1.2 6.8L12 17.6 5.9 20.8l1.2-6.8-5-4.8 6.9-.9z'/%3E%3C/svg%3E"); }
.ico-region { --ico-couleur: var(--c-region); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c3 3.5 3 16.5 0 20M12 2c-3 3.5-3 16.5 0 20'/%3E%3C/svg%3E"); }
.ico-vaccins { --ico-couleur: var(--c-vaccins); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2l4 4M20 4l-9.5 9.5M15 5l4 4M7.5 12.5l4 4M9 11l-6 6v4h4l6-6M3 21l3-3'/%3E%3C/svg%3E"); }
.ico-palu { --ico-couleur: var(--c-palu); --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='6.3'%20cy='8.4'%20r='1.7'/%3E%3Cellipse%20cx='9.8'%20cy='9.2'%20rx='2.5'%20ry='2.1'/%3E%3Cellipse%20cx='16.4'%20cy='11.4'%20rx='5.4'%20ry='1.6'%20transform='rotate%2820%2016.4%2011.4%29'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%209.4L1.4%2012.6'%20stroke-width='1.3'/%3E%3Cpath%20d='M5.6%206.9L4.2%204.6M6.4%206.7L6.3%204.2'%20stroke-width='1'/%3E%3Cpath%20d='M10.6%207.4c1.4-2.8%205.4-4.9%209.6-4.7-.9%202.6-5.3%204.9-9.6%204.7z'%20stroke-width='1.2'/%3E%3Cpath%20d='M8.6%2010.9L5.8%2014.6%203.2%2021M9.9%2011.2L9.4%2015.8%208%2021.3M11%2010.9l2.4%204.4%202.4%205.5'%20stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-piqures { --ico-couleur: var(--c-piqures); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico-altitude { --ico-couleur: var(--c-altitude); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M2 20l7-12 4 6 3-4 6 10z'/%3E%3C/svg%3E"); }
.ico-formalites { --ico-couleur: var(--c-formalites); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Ccircle cx='12' cy='10' r='3.5'/%3E%3Cpath d='M9 17h6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ico-conseils { --ico-couleur: var(--c-conseils); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='14' rx='2'/%3E%3Cpath d='M9 7V4h6v3M3 13h18'/%3E%3C/svg%3E"); }
.ico-sources { --ico-couleur: var(--c-sources); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 4h10l6 6v10H4z'/%3E%3Cpath d='M14 4v6h6M8 14h8M8 18h6' stroke-linecap='round'/%3E%3C/svg%3E"); }

@media (forced-colors: active) { .ico::before { background: CanvasText; } }


/* Piste B : carnet de voyage. Bandeau d'en-tête coloré sur toute la
   largeur, rubriques en cartes avec une couleur chacune. */

body { overflow-x: clip; }
main { padding-top: 0; }

/* Bandeau : pleine largeur malgré la colonne centrée de <main>. */
.hero {
  margin: 0 calc(50% - 50vw) 28px;
  padding: 26px max(20px, calc(50vw - 390px)) 30px;
  background: linear-gradient(120deg, #0b5c9e 0%, #0e6f7a 100%);
  color: #fff;
  position: relative;
}
@media (min-width: 1100px) { .hero { padding-left: calc(50vw - 520px); padding-right: calc(50vw - 520px); } }
.hero::after { /* méridiens décoratifs */
  content: ""; position: absolute; right: max(12px, calc(50vw - 520px)); top: 18px; width: 9em; height: 9em; opacity: .16; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M12 2c3 3.5 3 16.5 0 20M12 2c-3 3.5-3 16.5 0 20M4 7h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero a { color: #fff; }
.hero h1 { font-size: 2.3em; color: #fff; margin: 4px 0 6px; }
.hero .chapo { color: #e6f1fb; }
.hero .bouton { background: #fff; border-color: #fff; color: #08497e; }
.hero .bouton:hover { background: #e6f1fb; }
.hero .bouton.secondaire { background: transparent; color: #fff; }
.hero .bouton.secondaire:hover { background: rgba(255,255,255,.12); }
.hero .actualite { color: var(--text); margin-bottom: 0; }
.hero .actualite a { color: var(--accent-dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .hero { background: linear-gradient(120deg, #0d2f4f 0%, #0f4449 100%); }
}
:root[data-theme="sombre"] .hero { background: linear-gradient(120deg, #0d2f4f 0%, #0f4449 100%); }
:root[data-theme="contraste"] .hero { background: #00306b; }

/* Rubriques en cartes, filet de couleur en haut. */
.bloc {
  background: var(--panel); border: 1px solid var(--border); border-top: 6px solid var(--bloc-couleur, var(--accent));
  border-radius: 16px; padding: 4px 24px 18px; margin: 26px 0; box-shadow: 0 3px 14px rgba(0,0,0,.05);
}
.bloc > h2:first-child { border: none; margin-top: 14px; padding-top: 0; display: flex; align-items: center; }
.bloc-fiche { --bloc-couleur: var(--c-region); }
.bloc-vaccins { --bloc-couleur: var(--c-vaccins); }
.bloc-palu { --bloc-couleur: var(--c-palu); }
.bloc-piqures { --bloc-couleur: var(--c-piqures); }
.bloc-altitude { --bloc-couleur: var(--c-altitude); }
.bloc-formalites { --bloc-couleur: var(--c-formalites); }
.bloc-conseils { --bloc-couleur: var(--c-conseils); }
@media (max-width: 560px) { .bloc { padding: 2px 14px 14px; } }

/* L'essentiel : grande carte, intitulés en petites capitales. */
section.key[aria-labelledby="essentiel"] { border-radius: 16px; border-left-width: 1px; border-top: 6px solid var(--c-essentiel); background: var(--panel); max-width: none; box-shadow: 0 3px 14px rgba(0,0,0,.06); }
section.key[aria-labelledby="essentiel"] h2 { display: flex; align-items: center; }
.essentiel dt { text-transform: uppercase; letter-spacing: .06em; font-size: .8em; color: var(--muted); }
.sommaire ul { gap: 8px; }
.sommaire a { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; text-decoration: none; background: var(--panel); display: inline-flex; align-items: center; }
.sommaire a:hover { border-color: var(--accent); }
.tableau { border-radius: 10px; overflow: hidden; }

/* Compléments d'intégration */
.hero .back { margin-bottom: 8px; }
.hero > :last-child { margin-bottom: 0; }
.hero .alert { color: var(--text); }
.hero-accueil .recherche { margin-bottom: 0; }
.hero-accueil .recherche-label { color: #fff; }
.hero-accueil .note { color: #e6f1fb; }
.hero-accueil h1 { font-size: 2em; }
.hero .chapo { max-width: 60ch; }
@media print {
  .hero { background: none !important; color: #000; margin: 0; padding: 0; }
  .hero h1, .hero .chapo, .hero a { color: #000 !important; }
  .hero::after { display: none; }
  .bloc { box-shadow: none; border: 1pt solid #666; }
}
/* Titres de rubrique : icône en ligne (pas de flex, qui empêchait le mot
   long « Recommandations » de passer à la ligne à 320 px, texte agrandi). */
.bloc > h2:first-child, section.key[aria-labelledby="essentiel"] h2 { display: block; }
h1, h2 { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 400px) { .bloc > h2:first-child { font-size: 1.1em; } }

/* Moustiques et tiques dans L'essentiel : un pictogramme par vecteur. */
.ico-moustique { --ico-couleur: var(--c-piqures); --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='6.3'%20cy='8.4'%20r='1.7'/%3E%3Cellipse%20cx='9.8'%20cy='9.2'%20rx='2.5'%20ry='2.1'/%3E%3Cellipse%20cx='16.4'%20cy='11.4'%20rx='5.4'%20ry='1.6'%20transform='rotate%2820%2016.4%2011.4%29'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%209.4L1.4%2012.6'%20stroke-width='1.3'/%3E%3Cpath%20d='M5.6%206.9L4.2%204.6M6.4%206.7L6.3%204.2'%20stroke-width='1'/%3E%3Cpath%20d='M10.6%207.4c1.4-2.8%205.4-4.9%209.6-4.7-.9%202.6-5.3%204.9-9.6%204.7z'%20stroke-width='1.2'/%3E%3Cpath%20d='M8.6%2010.9L5.8%2014.6%203.2%2021M9.9%2011.2L9.4%2015.8%208%2021.3M11%2010.9l2.4%204.4%202.4%205.5'%20stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
.ico-tique { --ico-couleur: var(--c-piqures); --ico: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='black'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%207.6c3.3%200%205.6%203%205.6%207.1S15.3%2021.6%2012%2021.6%206.4%2018.8%206.4%2014.7%208.7%207.6%2012%207.6zm0%201.5c-1.9%200-3.2%201.3-3.2%202.9s1.3%202.7%203.2%202.7%203.2-1.1%203.2-2.7-1.3-2.9-3.2-2.9z'/%3E%3Cellipse%20cx='12'%20cy='12'%20rx='2.5'%20ry='2.2'/%3E%3Cpath%20d='M10.4%205h3.2l-.5%202.9h-2.2z'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.3'%3E%3Cpath%20d='M11.1%205l-.5-2.2M12.9%205l.5-2.2'/%3E%3Cpath%20d='M7.4%2010.6L4.3%208.4%203.6%205.4M6.7%2012.8L3.2%2012.2%201.9%209.8M6.6%2015.3L3.1%2016.6%202.2%2019.4M7.3%2017.6L5%2020.6l.1%202.2'/%3E%3Cpath%20d='M16.6%2010.6l3.1-2.2.7-3M17.3%2012.8l3.5-.6%201.3-2.4M17.4%2015.3l3.5%201.3.9%202.8M16.7%2017.6l2.3%203-.1%202.2'/%3E%3C/g%3E%3C/svg%3E"); }
.vecteurs { list-style: none; margin: 10px 0 0; padding: 0; }
.vecteurs li { display: flex; align-items: flex-start; gap: 4px; margin-bottom: 8px; }
.vecteurs li.ico::before { width: 1.7em; height: 1.7em; margin-top: .05em; }
.vecteurs li > span { min-width: 0; }

/* Pictogrammes du mode de transmission, devant le nom des maladies. */
.mt {
  display: inline-block; width: 1.3em; height: 1.3em; margin-right: .35em; vertical-align: -.28em; flex: none;
  background: var(--mt-c, currentColor);
  -webkit-mask: var(--mt) center / contain no-repeat; mask: var(--mt) center / contain no-repeat;
}
.mt-moustique { --mt-c: var(--c-piqures); --mt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='6.3'%20cy='8.4'%20r='1.7'/%3E%3Cellipse%20cx='9.8'%20cy='9.2'%20rx='2.5'%20ry='2.1'/%3E%3Cellipse%20cx='16.4'%20cy='11.4'%20rx='5.4'%20ry='1.6'%20transform='rotate%2820%2016.4%2011.4%29'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%209.4L1.4%2012.6'%20stroke-width='1.3'/%3E%3Cpath%20d='M5.6%206.9L4.2%204.6M6.4%206.7L6.3%204.2'%20stroke-width='1'/%3E%3Cpath%20d='M10.6%207.4c1.4-2.8%205.4-4.9%209.6-4.7-.9%202.6-5.3%204.9-9.6%204.7z'%20stroke-width='1.2'/%3E%3Cpath%20d='M8.6%2010.9L5.8%2014.6%203.2%2021M9.9%2011.2L9.4%2015.8%208%2021.3M11%2010.9l2.4%204.4%202.4%205.5'%20stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E"); }
.mt-tique { --mt-c: var(--c-piqures); --mt: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cg%20fill='black'%3E%3Cpath%20fill-rule='evenodd'%20d='M12%207.6c3.3%200%205.6%203%205.6%207.1S15.3%2021.6%2012%2021.6%206.4%2018.8%206.4%2014.7%208.7%207.6%2012%207.6zm0%201.5c-1.9%200-3.2%201.3-3.2%202.9s1.3%202.7%203.2%202.7%203.2-1.1%203.2-2.7-1.3-2.9-3.2-2.9z'/%3E%3Cellipse%20cx='12'%20cy='12'%20rx='2.5'%20ry='2.2'/%3E%3Cpath%20d='M10.4%205h3.2l-.5%202.9h-2.2z'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='black'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='1.3'%3E%3Cpath%20d='M11.1%205l-.5-2.2M12.9%205l.5-2.2'/%3E%3Cpath%20d='M7.4%2010.6L4.3%208.4%203.6%205.4M6.7%2012.8L3.2%2012.2%201.9%209.8M6.6%2015.3L3.1%2016.6%202.2%2019.4M7.3%2017.6L5%2020.6l.1%202.2'/%3E%3Cpath%20d='M16.6%2010.6l3.1-2.2.7-3M17.3%2012.8l3.5-.6%201.3-2.4M17.4%2015.3l3.5%201.3.9%202.8M16.7%2017.6l2.3%203-.1%202.2'/%3E%3C/g%3E%3C/svg%3E"); }
.mt-eau { --mt-c: var(--c-region); --mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 4h9l-1.3 16.2a1 1 0 0 1-1 .8H5.8a1 1 0 0 1-1-.8z'/%3E%3Cpath d='M4.2 9.5c1.6-.8 3 .8 4.3 0s2.7-.8 3.4 0'/%3E%3Cpath d='M16.5 3v5.2a2 2 0 0 0 4 0V3M18.5 3v18'/%3E%3C/svg%3E"); }
.mt-animal { --mt-c: var(--c-palu); --mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cellipse cx='6' cy='10' rx='2' ry='2.6'/%3E%3Cellipse cx='10' cy='5.8' rx='2' ry='2.6'/%3E%3Cellipse cx='14.5' cy='5.8' rx='2' ry='2.6'/%3E%3Cellipse cx='18.5' cy='10' rx='2' ry='2.6'/%3E%3Cpath d='M12.2 11c-3 0-6.2 4.4-6.2 7 0 2 1.6 2.8 3.2 2.3 1.2-.4 2-.8 3-.8s1.8.4 3 .8c1.6.5 3.2-.3 3.2-2.3 0-2.6-3.2-7-6.2-7z'/%3E%3C/svg%3E"); }
.mt-personne { --mt-c: var(--c-vaccins); --mt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Ccircle cx='16.5' cy='8' r='2.6'/%3E%3Cpath d='M2.5 20c0-3.6 2.5-6 5.5-6s5.5 2.4 5.5 6M13.5 14.6c.9-.6 1.9-.9 3-.9 2.8 0 5 2.2 5 5.8'/%3E%3C/svg%3E"); }
@media (forced-colors: active) { .mt { background: CanvasText; } }
.legende-mt { font-size: .85em; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 14px 0 6px; }
.legende-titre { font-weight: 700; }
.legende-item { white-space: nowrap; }
ul.sans-puce { list-style: none; margin-left: 0; }
.essentiel dt .mt { width: 1.5em; height: 1.5em; vertical-align: -.35em; }
@media (max-width: 560px) { .legende-item { white-space: normal; } }