/* 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;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 12px;
  margin: 20px 0;
  padding: 0;
  list-style: none;
}
.stats li {
  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; }
}

/* ---------- 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;
  max-width: 68ch;
}

.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: 560px) {
  main { padding: 18px 16px 50px; }
  .player .speed { margin-left: 0; }
  .releve th, .releve td { padding: 7px 5px; }
}

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