/* 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;
  /* Largeur de la colonne (11/10/2026) : celle d'une ligne de lecture
     (68 caractères en Atkinson, soit environ 44 fois la taille du corps),
     plus les 2 × 20 px de marge intérieure. Tous les blocs de la page
     (lecteur, cartes, titres, encadrés, tableaux) prennent toute la
     colonne : leurs bords droits tombent au même endroit, et la ligne de
     texte ne dépasse pas ~70 caractères, quelle que soit la taille de
     texte choisie. L'en-tête, la barre de réglages, le bandeau et le pied
     de page suivent la même colonne. */
  --colonne: calc(44rem * var(--echelle) + 40px);
}

/* 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: var(--colonne);
  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: var(--colonne);
  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: var(--colonne);
  margin: 0 auto;
  padding: 22px 20px 60px;
}

/* La ligne de texte reste sous ~75 caractères (RGAA / lisibilité) : c'est
   la largeur de la colonne (--colonne) qui la garantit, pour que tous les
   blocs partagent le même bord droit. */
.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); }
.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;
}
.disclaimer p { margin: 0; }  /* lu à voix haute depuis le 11/10/2026 (décision de Thomas) */

.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: var(--colonne); 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, les sommaires passent sur 2 colonnes, dans la
   même colonne de lecture que le reste (voir --colonne). Jusqu'au
   11/10/2026, la colonne s'élargissait à 1040 px mais les paragraphes et
   encadrés restaient plafonnés à 68ch : les bords droits ne tombaient plus
   au même endroit (remarque de Thomas, capture du sommaire asthme). */
@media (min-width: 1100px) {
  .fiches {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .fiches li { margin-bottom: 0; }
  .fiche-link { height: 100%; }

  /* Page d'accueil des fiches seulement : la colonne s'élargit pour présenter
     les thèmes sur 3 puis 4 colonnes (demande de Thomas, 20/10/2026). En-tête,
     barre de réglages, bandeau, contenu et pied de page suivent la même
     colonne élargie : les bords restent alignés. Le nombre de colonnes suit la
     place réelle (carte de 17rem × l'échelle au moins, 4 colonnes au plus) : un texte agrandi
     repasse de lui-même à 3 puis 2 colonnes. L'avertissement garde des lignes
     de moins de ~68 caractères. */
  body.theme-accueil { --colonne: min(calc(72rem * var(--echelle) + 40px), 94vw); }
  body.theme-accueil .fiches { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(17rem * var(--echelle))), 1fr)); }
  body.theme-accueil .disclaimer p { max-width: 68ch; }
  /* Cartes plus étroites : pas de césure, un mot n'est jamais coupé (règle de Thomas). */
  body.theme-accueil .fiche-link .t, body.theme-accueil .fiche-link .d { hyphens: manual; }
}

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

/* =====================================================================
   Habillage « carnet » (repris de Santé voyage, 29/09/2026)
   Un bandeau coloré sur toute la largeur en haut de page, une couleur
   et un pictogramme par thème. Les pictogrammes sont décoratifs (le
   texte porte le sens) ; les couleurs du bandeau laissent au texte
   blanc un contraste d'au moins 4,5:1, dans les quatre thèmes.
   ===================================================================== */

/* Couleur de chaque thème : --th (bandeau, filets, pictos). */
body { --th: #0b5c9e; --th2: #0e6f7a; overflow-x: clip; }
body.theme-hta          { --th: #9b1c31; --th2: #6e1424; }
body.theme-diabete      { --th: #0b5c9e; --th2: #0a4274; }
body.theme-goutte       { --th: #7a4a00; --th2: #5a3600; }
body.theme-ist          { --th: #9a2461; --th2: #6f1a46; }
body.theme-cancers      { --th: #6a3d8f; --th2: #4c2b67; }
body.theme-hiver        { --th: #1d5f8a; --th2: #174763; }
body.theme-gastro       { --th: #1f6f54; --th2: #17513d; }
body.theme-otite-sereuse{ --th: #0e6f7a; --th2: #0a5058; }
body.theme-grossesse    { --th: #a3336a; --th2: #7a264f; }
body.theme-alimentation { --th: #2f6b1f; --th2: #224e16; }
body.theme-parcours-de-soins { --th: #34506b; --th2: #263b50; }
body.theme-asthme       { --th: #4f46a0; --th2: #3a3478; }
body.theme-sommeil      { --th: #273a80; --th2: #1b2a5e; }
body.theme-lactose      { --th: #9a4a1c; --th2: #733614; }
body.theme-cholesterol  { --th: #7a6508; --th2: #584805; }
body.theme-prevention   { --th: #2c6e49; --th2: #1f5034; }
body.theme-intestin-irritable { --th: #7a3486; --th2: #5a2663; }
body.theme-accessibilite{ --th: #0b5c9e; --th2: #0e6f7a; }
body.theme-accueil      { --th: #0b5c9e; --th2: #0e6f7a; }

/* Pictogramme de chaque thème (masque SVG, trait). */
/* Tension : écran de tensiomètre « 120 / 80 » et cœur (choix de Thomas, 11/10/2026). */
.theme-hta, .pic-hta { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='3'/%3E%3Cpath d='M6.2 5.8v4.6M8 5.8h2.2v2.3H8v2.3h2.2M12 5.8h2.2v4.6H12z' stroke-width='1.3'/%3E%3Cpath d='M8 13.3h2.2v4.6H8zM8 15.6h2.2M12 13.3h2.2v4.6H12z' stroke-width='1.3'/%3E%3Cpath fill='black' stroke='none' d='M18.2 18s-1.9-1.2-1.9-2.4a1 1 0 0 1 1.9-.45 1 1 0 0 1 1.9.45c0 1.2-1.9 2.4-1.9 2.4z'/%3E%3C/svg%3E"); }
.theme-diabete, .pic-diabete { --pic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M3.5%2012.2l5.3-2.7%205.3%202.7v5.9l-5.3%202.7-5.3-2.7z'/%3E%3Cpath%20d='M3.5%2012.2l5.3%202.7%205.3-2.7M8.8%2014.9v5.9'/%3E%3Cpath%20d='M11%206.2l4.5-2.3%204.5%202.3v5l-4.5%202.3-2.3-1.2'/%3E%3Cpath%20d='M11%206.2l4.5%202.3%204.5-2.3M15.5%208.5v5'/%3E%3C/svg%3E"); }
.theme-goutte, .pic-goutte { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 3v7.5c0 2.5-2 4-2 6.8C4 19.5 5.5 21 8 21h9.5c1.7 0 2.8-1 2.8-2.3 0-1.8-1.6-2.6-3.8-3.1l-3.5-.8-2-4.8V3'/%3E%3Ccircle cx='17.3' cy='15.6' r='1.9' fill='black'/%3E%3C/svg%3E"); }
.theme-ist, .pic-ist { --pic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cpath%20d='M9.5%2019.2V9a2.5%202.5%200%200%201%205%200v10.2'/%3E%3Cpath%20d='M11%206.7V5.1a1%201%200%200%201%202%200v1.6'/%3E%3Cellipse%20cx='12'%20cy='19.6'%20rx='4.6'%20ry='1.6'/%3E%3C/svg%3E"); }
.theme-cancers, .pic-cancers { --pic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Cellipse%20cx='12'%20cy='14.5'%20rx='5'%20ry='3.4'/%3E%3Cpath%20d='M10.5%2011.2V9.4M13.5%2011.2V9.4M7.6%2013.2L5%2010.2M16.4%2013.2L19%2010.2'/%3E%3Cpath%20d='M5%2010.2c-2-.4-3.1-2.6-2-4.6l2%201.4.9-2.6c1.9%201.2%201.7%204.2-.9%205.8zM19%2010.2c2-.4%203.1-2.6%202-4.6l-2%201.4-.9-2.6c-1.9%201.2-1.7%204.2.9%205.8z'/%3E%3Cpath%20d='M7.3%2015.6L4%2017.2M8%2017.3l-2.6%202.4M16.7%2015.6l3.3%201.6M16%2017.3l2.6%202.4'/%3E%3C/svg%3E"); }
.theme-hiver, .pic-hiver { --pic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Cpath%20d='M12%207V4.4M12%2017v2.6M7%2012H4.4M17%2012h2.6M8.5%208.5L6.6%206.6M15.5%2015.5l1.9%201.9M15.5%208.5l1.9-1.9M8.5%2015.5l-1.9%201.9'/%3E%3Ccircle%20cx='12'%20cy='3.6'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='20.4'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='3.6'%20cy='12'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='20.4'%20cy='12'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='6'%20cy='6'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='18'%20cy='18'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='18'%20cy='6'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='6'%20cy='18'%20r='.9'%20fill='black'/%3E%3Ccircle%20cx='10.5'%20cy='11'%20r='.8'%20fill='black'/%3E%3Ccircle%20cx='13.6'%20cy='13.2'%20r='.8'%20fill='black'/%3E%3C/svg%3E"); }
.theme-gastro, .pic-gastro { --pic: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linejoin='round'%20stroke-linecap='round'%3E%3Crect%20x='4.5'%20y='2.8'%20width='5.2'%20height='7.2'%20rx='1'/%3E%3Cpath%20d='M3.5%2010h15.5c0%203.7-2.9%206.3-6.5%206.3h-1.3l.9%204.9H6.8l.8-5.4C5.1%2015%203.5%2012.8%203.5%2010z'/%3E%3C/svg%3E"); }
.theme-otite-sereuse, .pic-otite-sereuse { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7 9a5.5 5.5 0 0 1 11 0c0 3.8-3.5 4.6-3.5 7.8 0 2.4-1.7 4.2-3.9 4.2-1.7 0-3-1-3.6-2.5'/%3E%3Cpath d='M10 9.3a2.5 2.5 0 0 1 5 0c0 1.8-2.2 2-2.2 3.7'/%3E%3C/svg%3E"); }
.theme-grossesse, .pic-grossesse { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Cpath d='M10 7.5c-2 .5-3 2.5-3 5 0 1.5.5 2.5 1.5 3V21M11.5 7.5c1 .8 1.3 2 1.3 3.3 2.7.3 4.2 2 4.2 4.2 0 2.3-1.8 3.5-4.5 3.7V21'/%3E%3C/svg%3E"); }
.theme-alimentation, .pic-alimentation { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 7.5c-3-2-8-1.2-8 4.8 0 4.7 3 8.7 5.2 8.7.9 0 1.8-.5 2.8-.5s1.9.5 2.8.5c2.2 0 5.2-4 5.2-8.7 0-6-5-6.8-8-4.8z'/%3E%3Cpath d='M12 7.5c0-2 .8-3.8 2.8-4.5M12.5 5.5c1.5-1.8 3.8-1.8 4.5-1.2-.4 1.6-2.4 2.6-4.5 1.2z'/%3E%3C/svg%3E"); }
.theme-parcours-de-soins, .pic-parcours-de-soins { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2v20M9 22h6'/%3E%3Cpath d='M12 4h6.5l2.5 2.5L18.5 9H12M12 11H5.5L3 13.5 5.5 16H12'/%3E%3C/svg%3E"); }
.theme-asthme, .pic-asthme { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4.2M12 7.2c0 1.4-.8 2.1-1.8 2.7M12 7.2c0 1.4.8 2.1 1.8 2.7'/%3E%3Cpath d='M10.3 9.6C8.9 8.9 7.3 9.1 6.1 10.3 4.4 12 3.4 15 3.4 17.4c0 1.9 1.1 3.2 2.9 3.2 2.5 0 4-1.7 4-4.4z'/%3E%3Cpath d='M13.7 9.6c1.4-.7 3-.5 4.2.7 1.7 1.7 2.7 4.7 2.7 7.1 0 1.9-1.1 3.2-2.9 3.2-2.5 0-4-1.7-4-4.4z'/%3E%3C/svg%3E"); }
.theme-sommeil, .pic-sommeil { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.2 18.6A7 7 0 1 1 6 8.9a5.6 5.6 0 0 0 8.2 9.7z'/%3E%3Cg stroke-width='1.4'%3E%3Cpath d='M14.6 11.2h3l-3 3.4h3'/%3E%3Cpath d='M19.2 7.4h2.6l-2.6 3h2.6'/%3E%3Cpath d='M14.8 3.6h2.2l-2.2 2.5h2.2'/%3E%3C/g%3E%3C/svg%3E"); }
.theme-lactose, .pic-lactose { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.4C7.6 5 6.4 4 6 2.7M15 5.4c1.4-.4 2.6-1.4 3-2.7'/%3E%3Cpath d='M6.5 8.3C4.9 7.7 3.1 8.1 2 9.5c1.3.9 3.1.9 4.7.1M17.5 8.3c1.6-.6 3.4-.2 4.5 1.2-1.3.9-3.1.9-4.7.1'/%3E%3Cpath d='M13.4 5.4h1.8c1.3 0 2.2.9 2.3 2.3v1.2c-1.5.3-3-.3-3.7-1.4-.4-.6-.5-1.3-.4-2.1z' fill='black' stroke='none'/%3E%3Cpath d='M8 15.4C7 13 6.4 10.3 6.5 7.7 6.6 6.3 7.5 5.4 8.8 5.4h6.4c1.3 0 2.2.9 2.3 2.3.1 2.6-.5 5.3-1.5 7.7'/%3E%3Cellipse cx='12' cy='17.2' rx='4.6' ry='3.3'/%3E%3Ccircle cx='9.7' cy='10' r='.95' fill='black' stroke='none'/%3E%3Ccircle cx='14.3' cy='10' r='.95' fill='black' stroke='none'/%3E%3Cellipse cx='10.3' cy='17.3' rx='.7' ry='1' fill='black' stroke='none'/%3E%3Cellipse cx='13.7' cy='17.3' rx='.7' ry='1' fill='black' stroke='none'/%3E%3C/svg%3E"); }
/* Cholestérol : cœur anatomique « heart-organ » de Health Icons, © 2021 Resolve to Save Lives,
   licence MIT (notice complète : icones-licence.txt). Choix de Thomas, 11/10/2026. */
.theme-cholesterol, .pic-cholesterol { --pic: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M30.0496 9.52364V7C30.0496 6.73478 29.9433 6.48043 29.754 6.29289C29.5648 6.10535 29.3081 6 29.0404 6L24.6966 6.00004C24.1393 6.00005 23.6874 6.44776 23.6874 7.00004V9.43344L22.2014 10.1236L20.2666 7.71934C19.9444 7.31893 19.369 7.22444 18.9336 7.50046L15.5299 9.65838C15.2891 9.81105 15.1249 10.0578 15.0782 10.3372C15.0315 10.6167 15.1065 10.9027 15.2848 11.1242L17.1795 13.4786C17.085 13.5921 16.9853 13.7173 16.885 13.8521C16.6902 14.1137 16.4635 14.4494 16.2719 14.8321C15.5246 14.1605 14.6395 13.6048 13.8044 13.1624C12.8859 12.676 11.9889 12.3063 11.3251 12.0589C10.992 11.9348 10.4234 11.7437 10.2274 11.6797C9.95398 11.6 9.62982 11.6346 9.38664 11.7819C9.14346 11.9292 8.97433 12.1723 8.92128 12.4498L8.01764 17.1765C7.96689 17.4419 8.0267 17.7164 8.18346 17.9375C8.34021 18.1586 8.58057 18.3074 8.84981 18.3501C9.95422 18.5251 10.7886 19.0696 11.36 19.592C11.6445 19.8522 11.8562 20.1003 11.9943 20.2797C12.0134 20.3046 12.0338 20.3323 12.054 20.3603C11.0452 21.885 10.6551 23.6793 10.7178 25.5266C10.8027 28.0283 11.7131 30.6743 13.0789 33.0685C14.4475 35.4676 16.3084 37.6759 18.37 39.2949C20.4174 40.9028 22.7558 42 25.0659 42C27.3703 42 29.7686 40.9085 31.8923 39.2926C34.0322 37.6644 35.9918 35.4312 37.4281 32.9732C40.2505 28.1434 41.2807 21.9328 36.7183 17.934C36.5292 17.7683 36.3537 17.6285 36.1859 17.5069C36.9168 17.4975 37.7563 17.5123 38.734 17.5457L39.7493 17.5805L40 10.8317L38.9965 10.7974C36.4319 10.7097 34.0766 10.8212 31.9386 11.308C31.4066 10.6245 30.8297 10.1119 30.3808 9.76632C30.2613 9.67431 30.1499 9.59342 30.0496 9.52364ZM32.2214 18.143C32.3967 18.0626 32.5796 17.9909 32.7733 17.9272C33.2727 18.2092 33.6715 18.4023 33.9905 18.5568C34.0968 18.6083 34.1945 18.6556 34.2838 18.7003C34.6642 18.8909 34.9616 19.0645 35.3809 19.432C38.8223 22.4483 38.3548 27.3961 35.6814 31.971C34.3699 34.2154 32.5821 36.2461 30.663 37.7063C28.7278 39.1787 26.7557 40 25.0659 40C23.3821 40 21.4768 39.1827 19.6237 37.7275C17.7848 36.2834 16.0886 34.2799 14.8361 32.0843C13.5808 29.8838 12.8062 27.5523 12.7351 25.4593C12.6647 23.3861 13.2795 21.5969 14.751 20.3072C15.5029 19.6481 16.8186 19.3795 18.5099 19.4755C19.6208 19.5386 20.7886 19.7532 21.8632 20.0264L21.8605 20.0317L23.0045 20.3633C24.2121 20.7134 25.6131 21.2689 26.5339 21.6549L25.0761 24.78L21.339 26.4546L17.2966 25.5109L16.8337 27.4576L20.0738 28.214L19.0108 30.8764L20.8878 31.6121L22.23 28.2503L24.4188 27.2695C24.3115 28.4301 24.4978 29.606 24.9702 30.6879L25.3177 31.4837L25.5885 35.4155L27.6022 35.2794L27.3852 32.1276L30.7244 31.7435L30.4917 29.7569L26.9413 30.1652L26.8227 29.8937C26.364 28.8434 26.2829 27.6689 26.5929 26.5665L26.7848 25.8839L28.9641 21.2121C29.0687 21.1056 29.1628 20.9878 29.2439 20.8601C30.1652 19.409 31.1392 18.6393 32.2214 18.143ZM24.7497 18.8178C25.4131 17.671 26.1248 16.7585 26.933 16.0081C27.0974 15.859 27.2668 15.7123 27.4403 15.5682C28.1629 14.9836 28.9624 14.5058 29.8681 14.0904C32.0607 13.0848 34.6929 12.7334 37.9066 12.7707L37.8045 15.5196C34.9585 15.4545 33.0096 15.5859 31.3832 16.3318C29.9268 16.9997 28.6566 18.041 27.535 19.8077C27.5191 19.8326 27.4959 19.8493 27.4735 19.8568C27.4533 19.8636 27.4438 19.8602 27.4398 19.8585C26.7654 19.5741 25.7684 19.17 24.7497 18.8178ZM14.716 18.006C14.5495 18.0761 14.3871 18.1542 14.2295 18.2407L13.636 18.5271C13.5169 18.5914 13.4064 18.6523 13.3049 18.7092L12.7292 18.1223C12.1312 17.5753 11.2824 16.9768 10.1791 16.6177L10.6876 13.9581C11.2884 14.1846 12.0677 14.5102 12.8531 14.9262C13.6769 15.3625 14.4693 15.8784 15.0693 16.4558C15.4205 16.7937 15.6811 17.1284 15.8521 17.4578L14.716 18.006ZM17.9984 17.4573C18.2089 17.4596 18.4183 17.467 18.6254 17.4788C18.8112 17.4893 18.9977 17.5035 19.1844 17.521C20.4611 17.6312 21.7716 17.8895 22.8096 18.1342C23.5338 16.4923 24.8768 15.0745 26.2309 13.9635C27.3595 13.0375 28.5623 12.2708 29.5812 11.7131C29.4265 11.5723 29.2778 11.4498 29.1426 11.3457C28.9587 11.2042 28.5535 10.945 28.5535 10.945C28.5535 10.945 28.0312 10.4344 28.0312 10.0691V8L25.7059 8.00002V10.0691C25.7059 10.457 25.4795 10.81 25.125 10.9746L22.3371 12.2693C21.9143 12.4657 21.4108 12.349 21.1197 11.9873L19.2555 9.67077L17.5612 10.7449L19.2942 12.8983C19.6206 13.3039 19.5798 13.8894 19.2003 14.2467L18.9962 14.4562C18.9962 14.4562 18.6856 14.8026 18.5094 15.0394C18.1223 15.5592 17.8781 16.0608 17.8676 16.4079C17.8614 16.6126 17.8653 16.8927 17.9334 17.2293C17.9572 17.3043 17.9789 17.3804 17.9984 17.4573Z' fill='black'/%3E %3C/svg%3E"); }
/* Prévention : parapluie « umbrella » de Tabler Icons, © 2020-2026 Paweł Kuna, licence MIT
   (notice complète : icones-licence.txt). Choix de Thomas, 11/10/2026. */
.theme-prevention, .pic-prevention { --pic: 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='M4 12a8 8 0 0 1 16 0l-16 0'/%3E %3Cpath d='M12 12v6a2 2 0 0 0 4 0'/%3E %3C/svg%3E"); }
/* Intestin irritable : côlon « colon » de Health Icons, © 2021 Resolve to Save Lives,
   licence MIT (notice complète : icones-licence.txt). Choix de Thomas, 01/11/2026. */
.theme-intestin-irritable, .pic-intestin-irritable { --pic: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M6 12.1944C6 8.77335 8.77335 6 12.1944 6C13.6163 6 14.9271 6.47988 15.9723 7.28507C17.0174 6.47988 18.3282 6 19.7501 6C21.3959 6 22.8916 6.64243 24.0001 7.68804C25.1085 6.64243 26.6042 6 28.2501 6C29.6719 6 30.9827 6.47987 32.0278 7.28502C33.0729 6.47987 34.3837 6 35.8055 6C39.2266 6 42 8.77335 42 12.1944C42 13.6129 41.5223 14.921 40.7206 15.9649C41.5261 17.1052 42 18.498 42 20C42 21.6057 41.4585 23.0861 40.5496 24.2668C41.454 25.3431 42 26.7332 42 28.2501C42 31.6712 39.2267 34.4445 35.8056 34.4445C34.3837 34.4445 33.073 33.9646 32.0278 33.1595C31.7715 33.357 31.4992 33.5349 31.2131 33.691C31.2052 33.7087 31.1965 33.7297 31.1871 33.7542C31.1244 33.9175 31.06 34.1596 31 34.4761V42H29V34.3846C29 34.3253 29.0053 34.2662 29.0158 34.2078C29.0897 33.7964 29.1865 33.3849 29.32 33.0372C29.387 32.8629 29.4739 32.6758 29.5906 32.5038C29.7032 32.3376 29.8827 32.1274 30.156 31.9877C30.5851 31.7683 30.9721 31.4768 31.3007 31.1288C31.4896 30.9287 31.7526 30.8153 32.0278 30.8153C32.303 30.8153 32.566 30.9287 32.7549 31.1288C33.521 31.9402 34.6036 32.4445 35.8056 32.4445C38.1221 32.4445 40 30.5666 40 28.2501C40 26.9746 39.432 25.833 38.5316 25.0621C38.3181 24.8793 38.1913 24.6151 38.1824 24.3341C38.1736 24.0531 38.2833 23.7814 38.4849 23.5855C39.4206 22.6758 40 21.4064 40 20C40 18.6918 39.4989 17.503 38.6765 16.6112C38.308 16.2117 38.3261 15.5909 38.7173 15.2136C39.5093 14.4495 40 13.3801 40 12.1944C40 9.95267 38.2413 8.12165 36.0284 8.00582V8.03547C35.0773 8.03547 34.0984 8.50674 33.4631 9.27834C32.8483 10.025 32.566 11.0356 32.9487 12.1838C33.1234 12.7078 32.8402 13.2741 32.3162 13.4487C31.7923 13.6234 31.226 13.3402 31.0513 12.8162C30.6133 11.5022 30.7216 10.2536 31.185 9.19783C30.4275 8.45575 29.3927 8 28.2501 8C26.8323 8 25.5785 8.70248 24.8177 9.78286C24.6304 10.0488 24.3254 10.2071 24.0001 10.2071C23.6747 10.2071 23.3697 10.0488 23.1824 9.78286C22.4216 8.70248 21.1678 8 19.7501 8C18.548 8 17.4654 8.50432 16.6994 9.31573C16.5105 9.51584 16.2474 9.62925 15.9722 9.62925C15.6971 9.62925 15.434 9.51584 15.2451 9.31573C14.4791 8.50432 13.3965 8 12.1944 8C9.87792 8 8 9.87792 8 12.1944C8 13.3965 8.50432 14.4791 9.31573 15.2451C9.51585 15.434 9.62926 15.6971 9.62926 15.9723C9.62926 16.2475 9.51585 16.5105 9.31574 16.6994C8.50433 17.4654 8.00001 18.548 8.00001 19.7501C8.00001 21.1678 8.70249 22.4216 9.78287 23.1824C10.0489 23.3697 10.2071 23.6747 10.2071 24.0001C10.2071 24.3254 10.0489 24.6304 9.78287 24.8177C8.70249 25.5785 8.00001 26.8323 8.00001 28.2501C8.00001 30.2334 9.3775 31.8974 11.2291 32.3331C11.6808 32.4394 12 32.8425 12 33.3065V35.3335C12 35.8245 12.398 36.2224 12.8889 36.2224C13.3798 36.2224 13.7778 35.8245 13.7778 35.3336V32.7576C13.7778 32.3995 13.9692 32.0688 14.2797 31.8904C15.5422 31.1653 16.3889 29.806 16.3889 28.2501C16.3889 26.8323 15.6864 25.5785 14.606 24.8177C14.5496 24.7779 14.498 24.7328 14.4517 24.6834C13.7663 24.2325 12.9467 23.9999 11.9999 23.9999C11.4476 23.9999 10.9999 23.5522 10.9999 22.9999C10.9999 22.4477 11.4477 21.9999 11.9999 21.9999C13.1309 21.9999 14.1881 22.2486 15.1211 22.7549C15.9043 21.9921 16.3889 20.9276 16.3889 19.7501C16.3889 18.548 15.8846 17.4654 15.0732 16.6994C14.8731 16.5105 14.7596 16.2474 14.7596 15.9722C14.7596 15.697 14.8731 15.434 15.0732 15.2451C15.1321 15.1894 15.1894 15.1321 15.2451 15.0732C15.434 14.873 15.697 14.7596 15.9722 14.7596C16.2474 14.7596 16.5105 14.873 16.6994 15.0732C17.4654 15.8846 18.548 16.3889 19.7501 16.3889C21.1678 16.3889 22.4216 15.6864 23.1824 14.606C23.3697 14.34 23.6747 14.1818 24.0001 14.1818C24.3254 14.1818 24.6304 14.34 24.8177 14.606C25.5785 15.6864 26.8323 16.3889 28.2501 16.3889C28.6583 16.3889 29.0512 16.3309 29.422 16.2233C29.808 16.1112 30.2237 16.2412 30.4771 16.5533C30.7305 16.8654 30.7723 17.2989 30.5834 17.6537C30.2113 18.3523 30 19.15 30 20C30 20.9044 30.2393 21.7506 30.6579 22.4812C31.797 23.1214 32.5429 23.7528 32.9825 24.4854C33.5016 25.3507 33.5007 26.2228 33.5 26.9235L33.5 26.9999C33.5 27.5522 33.0523 27.9999 32.5 27.9999C31.9477 27.9999 31.5 27.5522 31.5 26.9999C31.5 26.2131 31.4793 25.8674 31.2675 25.5144C31.0944 25.2259 30.736 24.8519 29.9177 24.3637C29.8417 24.3547 29.7659 24.3368 29.6918 24.3097C29.2435 24.1456 28.7584 24.0556 28.2501 24.0556C25.9335 24.0556 24.0556 25.9335 24.0556 28.2501C24.0556 29.8786 24.9835 31.2922 26.3441 31.9877C26.4499 32.0418 26.5448 32.1054 26.6294 32.1739C26.8638 32.3637 27 32.6493 27 32.951V42H25V33.5242C23.2347 32.4342 22.0556 30.4806 22.0556 28.2501C22.0556 24.829 24.829 22.0556 28.2501 22.0556L28.307 22.0559C28.1074 21.4054 28 20.7149 28 20C28 19.446 28.0645 18.9063 28.1866 18.3886C26.5658 18.3723 25.0943 17.733 24.0001 16.7008C22.8916 17.7465 21.3959 18.3889 19.7501 18.3889C19.2116 18.3889 18.689 18.3201 18.1908 18.1908C18.3201 18.689 18.3889 19.2116 18.3889 19.7501C18.3889 21.3959 17.7465 22.8916 16.7009 24.0001C17.7465 25.1085 18.3889 26.6042 18.3889 28.2501C18.3889 30.3371 17.3563 32.182 15.7778 33.3033V35.3336C15.7778 36.929 14.4844 38.2224 12.8889 38.2224C11.2934 38.2224 10 36.929 10 35.3335V34.0442C7.66233 33.1583 6.00001 30.8993 6.00001 28.2501C6.00001 26.6042 6.64245 25.1085 7.68805 24.0001C6.64245 22.8916 6.00001 21.3959 6.00001 19.7501C6.00001 18.3282 6.47989 17.0174 7.28508 15.9723C6.47989 14.9271 6 13.6163 6 12.1944Z' fill='black'/%3E %3C/svg%3E"); }
.theme-accueil { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M6 2.5h8l4.5 4.5v13a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 20V4A1.5 1.5 0 0 1 6 2.5z'/%3E%3Cpath d='M14 2.5V7h4.5M7 15h2.2l1.5-3.5 2.3 6 1.5-3.5h2'/%3E%3C/svg%3E"); }
.theme-accessibilite, .pic-accessibilite { --pic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M4.5 8.5l7.5 1.5 7.5-1.5M12 10v4.5l-3 7M12 14.5l3 7'/%3E%3C/svg%3E"); }

/* Bandeau : pleine largeur malgré la colonne centrée de <main>. */
main { padding-top: 0; }
.hero {
  margin: 0 calc(50% - 50vw) 22px;
  padding: 22px max(20px, calc(50vw - var(--colonne) / 2)) 26px;
  background: linear-gradient(120deg, var(--th) 0%, var(--th2) 100%);
  color: #fff;
  position: relative;
}
.hero::after { /* grand pictogramme du thème, en filigrane */
  content: ""; position: absolute; right: max(12px, calc(50vw - var(--colonne) / 2)); top: 50%; transform: translateY(-50%);
  width: 8.5em; height: 8.5em; opacity: .18; pointer-events: none; background: #fff;
  -webkit-mask: var(--pic) center / contain no-repeat; mask: var(--pic) center / contain no-repeat;
}
.hero > * { position: relative; z-index: 1; }
.hero a, .hero .back { color: #fff; }
.hero .back { margin-bottom: 8px; }
.hero h1 { color: #fff; font-size: 1.9em; margin: 4px 0 8px; max-width: 30ch; }
.hero .chapo { color: #f3f6fa; margin-bottom: 0; max-width: 60ch; }
@media (max-width: 560px) { .hero::after { width: 5em; height: 5em; top: 16px; transform: none; opacity: .14; } }
/* Le texte du bandeau s'arrête avant le pictogramme en filigrane (8,5em du
   corps, soit 4,5em du titre et 8,1em du chapô) : sans cela, la colonne de
   lecture étant plus étroite, la fin du chapô passait sur le dessin. */
@media (min-width: 561px) {
  .hero h1 { max-width: min(30ch, calc(100% - 4.8em)); }
  .hero .chapo { max-width: min(60ch, calc(100% - 8.6em)); }
}

/* Thème sombre : bandeau plus foncé, texte toujours blanc. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .hero { background: linear-gradient(120deg, color-mix(in srgb, var(--th) 55%, #0b0d10), color-mix(in srgb, var(--th2) 55%, #0b0d10)); }
}
:root[data-theme="sombre"] .hero { background: linear-gradient(120deg, color-mix(in srgb, var(--th) 55%, #0b0d10), color-mix(in srgb, var(--th2) 55%, #0b0d10)); }
:root[data-theme="contraste"] .hero { background: #00306b; }

/* Titres des fiches : filet et pictogramme de la couleur du thème. */
main h2 { border-top-color: var(--th); }
:root[data-theme="contraste"] main h2 { border-top-color: #000; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) main h2 { border-top-color: color-mix(in srgb, var(--th) 50%, #fff); }
}
:root[data-theme="sombre"] main h2 { border-top-color: color-mix(in srgb, var(--th) 50%, #fff); }

/* Cartes des sommaires : pictogramme du thème, bord gauche coloré. */
.fiche-link { border-left-color: var(--th); border-radius: 14px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.fiche-link[class*="pic-"] { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start; }
.fiche-link[class*="pic-"]::before {
  content: ""; grid-row: 1 / span 2; width: 2.4em; height: 2.4em; margin-top: 2px; border-radius: 12px;
  background: var(--carte, #0b5c9e);
  -webkit-mask: var(--pic) center / 72% no-repeat; mask: var(--pic) center / 72% no-repeat;
}
.fiche-link.pic-hta { --carte: #9b1c31; border-left-color: #9b1c31; }
.fiche-link.pic-diabete { --carte: #0b5c9e; border-left-color: #0b5c9e; }
.fiche-link.pic-goutte { --carte: #7a4a00; border-left-color: #7a4a00; }
.fiche-link.pic-ist { --carte: #9a2461; border-left-color: #9a2461; }
.fiche-link.pic-cancers { --carte: #6a3d8f; border-left-color: #6a3d8f; }
.fiche-link.pic-hiver { --carte: #1d5f8a; border-left-color: #1d5f8a; }
.fiche-link.pic-gastro { --carte: #1f6f54; border-left-color: #1f6f54; }
.fiche-link.pic-otite-sereuse { --carte: #0e6f7a; border-left-color: #0e6f7a; }
.fiche-link.pic-grossesse { --carte: #a3336a; border-left-color: #a3336a; }
.fiche-link.pic-alimentation { --carte: #2f6b1f; border-left-color: #2f6b1f; }
.fiche-link.pic-parcours-de-soins { --carte: #34506b; border-left-color: #34506b; }
.fiche-link.pic-asthme { --carte: #4f46a0; border-left-color: #4f46a0; }
.fiche-link.pic-sommeil { --carte: #273a80; border-left-color: #273a80; }
.fiche-link.pic-lactose { --carte: #9a4a1c; border-left-color: #9a4a1c; }
.fiche-link.pic-cholesterol { --carte: #7a6508; border-left-color: #7a6508; }
.fiche-link.pic-prevention { --carte: #2c6e49; border-left-color: #2c6e49; }
.fiche-link.pic-intestin-irritable { --carte: #7a3486; border-left-color: #7a3486; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .fiche-link[class*="pic-"] { border-left-color: color-mix(in srgb, var(--carte) 50%, #fff); }
  :root:not([data-theme="clair"]) .fiche-link[class*="pic-"]::before { background: color-mix(in srgb, var(--carte) 45%, #fff); }
}
:root[data-theme="sombre"] .fiche-link[class*="pic-"] { border-left-color: color-mix(in srgb, var(--carte) 50%, #fff); }
:root[data-theme="sombre"] .fiche-link[class*="pic-"]::before { background: color-mix(in srgb, var(--carte) 45%, #fff); }
:root[data-theme="contraste"] .fiche-link[class*="pic-"]::before { background: #000; }
:root[data-theme="contraste"] .fiche-link { border-left-color: #000; }

@media (forced-colors: active) {
  .hero { border-bottom: 2px solid CanvasText; }
  .hero::after, .fiche-link[class*="pic-"]::before { background: CanvasText; }
}
@media print {
  .hero { background: none !important; color: #000; margin: 0 0 12pt; padding: 0; }
  .hero h1, .hero .chapo, .hero a { color: #000 !important; }
  .hero::after { display: none; }
}
.fiche-link[class*="pic-"] { grid-template-columns: auto minmax(0, 1fr); }
.fiche-link .t, .fiche-link .d { overflow-wrap: break-word; hyphens: auto; }
/* Très petit écran ou texte très agrandi : pictogramme au-dessus du titre. */
@media (max-width: 420px) {
  .fiche-link[class*="pic-"] { display: block; }
  .fiche-link[class*="pic-"]::before { display: block; margin-bottom: 8px; }
}

/* Filet de sécurité : pas de pictogramme défini, pas de filigrane. */
body:not([class*="theme-"]) .hero::after { display: none; }
.fiche-link[class*="pic-"] { align-content: start; }

/* Nom du site « appsanté » (deux tons, choisi par Thomas le 29/09/2026),
   lien vers l'accueil d'appsante.eu, suivi du nom de la rubrique. */
.appsante { display: inline-flex; align-items: center; gap: 0; text-decoration: none; color: var(--text); letter-spacing: -.01em; }
.appsante-logo { width: 1.35em; height: 1.35em; flex: none; margin-right: .4em; }
.appsante .app { font-weight: 400; color: var(--muted); }
.appsante .sante { font-weight: 700; color: var(--accent); }
.appsante:hover .app, .appsante:hover .sante { text-decoration: underline; text-underline-offset: 3px; }
.site-sep { color: var(--muted); }
/* Logo, nom du site et rubrique alignés sur leur centre (et non sur la ligne
   de base, qui décalait « › Santé voyage » vers le bas). */
.site-header .inner { align-items: center; }
.site-title, .site-sep, .site-sub { line-height: 1.3; }
@media (forced-colors: active) { .appsante-logo rect { fill: CanvasText; } .appsante-logo path { stroke: Canvas; } }