/* =====================================================================
   Barre d'outils d'accessibilité : styles du panneau, réglages et thèmes.
   À charger après style.css. Toutes les couleurs passent par les variables
   de la charte : les thèmes ne redéfinissent que ces variables.
   ===================================================================== */

/* ---------- Bouton et panneau ---------- */
.a11y-zone { position: relative; }
.a11y-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; min-width: 2.75rem; padding: 0.5rem 1rem;
  border: 2px solid var(--texte); border-radius: var(--rayon);
  background: var(--blanc); color: var(--texte);
  font: 700 1.125rem/1.3 var(--police); text-align: center; cursor: pointer;
}
.a11y-btn:hover { text-decoration: underline; }
.a11y-btn svg { width: 1.5rem; height: 1.5rem; flex: none; }
.a11y-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--texte); }            /* bordure doublée = ouvert */
.a11y-btn--plein { background: var(--vert); border-color: var(--vert); color: var(--blanc); }
.a11y-btn--plein:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.a11y-btn[aria-disabled="true"] { border-style: dashed; cursor: default; }                /* indisponible : tirets, texte non grisé */
.a11y-btn[aria-disabled="true"]:hover { text-decoration: none; }

.a11y-panneau {
  position: absolute; top: 100%; right: 0; z-index: 100;
  width: 36rem; max-width: calc(100vw - 2rem); margin-top: 0.5rem; padding: 1.25rem;
  background: var(--blanc); color: var(--texte);
  border: 3px solid var(--texte); border-radius: var(--rayon);
  font-size: 1.125rem; line-height: 1.5; text-align: left;
}
.a11y-panneau[hidden], .a11y-btn[hidden], [hidden].a11y-aide { display: none; }
/* Dans le bandeau du cabinet, le panneau s'aligne sur la marge droite du bandeau, même quand le bouton
   passe à la ligne (téléphone, texte agrandi) : sinon il sortirait de l'écran par la gauche. */
.entete-haut { position: relative; }
.entete-haut .a11y-zone { position: static; }
.entete-haut .a11y-panneau { right: 1.5rem; max-width: calc(100% - 3rem); }
@media (max-width: 47.5em) { .entete-haut .a11y-panneau { right: 1rem; max-width: calc(100% - 2rem); } }
@media (min-width: 62.5em) and (min-height: 50em) {
  html:not(.a11y-grand) .a11y-panneau { max-height: calc(100vh - var(--hauteur-entete, 9rem) - 1.5rem); overflow-y: auto; overscroll-behavior: contain; }
}
.a11y-entete-panneau { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.a11y-titre { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.a11y-groupe { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.a11y-groupe legend { margin: 0 0 0.5rem; padding: 0; font-weight: 700; }
.a11y-rangee { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.5rem; }
.a11y-rangee .a11y-btn { flex: 1 1 auto; }
.a11y-valeur { min-width: 4.5rem; text-align: center; font-size: 1.5rem; font-weight: 700; }
.a11y-option { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0.25rem; cursor: pointer; }
.a11y-option input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--vert); }
.a11y-champ { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0; }
.a11y-panneau select { min-height: 2.75rem; padding: 0.25rem 0.5rem; border: 2px solid var(--texte); border-radius: var(--rayon);
  background: var(--blanc); color: var(--texte); font: inherit; }
.a11y-aide { margin: 0.25rem 0 0.5rem; }
.a11y-statut { min-height: 1.5em; margin: 0.75rem 0; font-weight: 700; }
.a11y-statut:not(:empty) { padding: 0.5rem 0.75rem; border-left: 4px solid var(--texte); }
.a11y-panneau a { color: var(--texte); }

/* Pastilles d'aperçu des thèmes (couleurs fixes : elles montrent le thème, pas le thème courant) */
.a11y-echantillon { flex: none; min-width: 3rem; padding: 0.125rem 0.5rem; border: 2px solid; border-radius: 4px; text-align: center; font-weight: 700; }
.a11y-echantillon.standard   { background: #fff;    color: #111;    border-color: #111; }
.a11y-echantillon.jaune-noir { background: #000;    color: #ff0;    border-color: #ff0; }
.a11y-echantillon.blanc-noir { background: #000;    color: #fff;    border-color: #fff; }
.a11y-echantillon.noir-jaune { background: #fff59d; color: #000;    border-color: #000; }

/* ---------- Texte très agrandi (>= 150 %) : une seule colonne, quelle que soit la largeur ---------- */
html.a11y-grand .colonnes, html.a11y-grand .praticiens, html.a11y-grand .options, html.a11y-grand .grid { grid-template-columns: 1fr; }
html.a11y-grand .urgence-grille { grid-template-columns: 1fr; }
html.a11y-grand .urgence-grille .btn { justify-self: start; }
html.a11y-grand .lexique { grid-template-columns: 1fr; }
/* Texte très agrandi sur petit écran : un mot plus large que l'écran (numéro de téléphone, « ophtalmologique »)
   est coupé plutôt que d'obliger à faire défiler la page de côté. Le tableau garde ses colonnes et défile seul. */
html.a11y-grand body { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }   /* césure aux syllabes, mots d'au moins 10 lettres */
html.a11y-grand table { overflow-wrap: normal; hyphens: manual; -webkit-hyphens: manual; }
@media (max-width: 47.5em) {
  /* Sur téléphone, les titres (déjà plus grands que le texte) grandissent moins, pour tenir dans l'écran */
  html.a11y-grand h1, html.a11y-grand .ouverture h1 { font-size: 1.625rem; }
  html.a11y-grand h2 { font-size: 1.5rem; }
  html.a11y-grand h3 { font-size: 1.25rem; }
}

/* ---------- Réglages ---------- */
/* Interligne : 2 pour le texte courant, 1,6 pour les titres, 2 em entre paragraphes (WCAG 1.4.12 et 1.4.8) */
html[data-a11y-interligne] :is(p, li, td, th, dt, dd, caption, address, .btn) { line-height: 2; }
html[data-a11y-interligne] :is(h1, h2, h3, h4) { line-height: 1.6; }
html[data-a11y-interligne] p { margin-bottom: 2em; }
/* Espacement : lettres 0,12 em, mots 0,16 em */
html[data-a11y-espacement] body, html[data-a11y-espacement] :is(button, input, select, textarea) { letter-spacing: 0.12em; word-spacing: 0.16em; }
/* Liens soulignés partout (navigation et boutons-liens compris) */
html[data-a11y-liens] a { text-decoration: underline !important; text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
/* Focus agrandi : anneau épais + halo de la couleur du fond */
html[data-a11y-focus] :focus-visible { outline: 6px solid var(--texte) !important; outline-offset: 4px !important; box-shadow: 0 0 0 4px var(--blanc); }

/* ---------- Thèmes : on ne redéfinit que les variables de la charte ---------- */
html[data-a11y-theme] { background: var(--blanc); }
html[data-a11y-theme="jaune-noir"] {   /* jaune #ff0 sur noir : 19,6:1 */
  --blanc: #000; --texte: #ff0; --vert: #ff0; --vert-fonce: #fff;
  --filet: #ff0; --filet-fort: #ff0; --todo-fond: #ff0; --todo-texte: #000;
  --lecture-fond: #ff0; --lecture-texte: #000; color-scheme: dark; }
html[data-a11y-theme="blanc-noir"] {   /* blanc sur noir : 21:1 */
  --blanc: #000; --texte: #fff; --vert: #fff; --vert-fonce: #ff0;
  --filet: #fff; --filet-fort: #fff; --todo-fond: #fff; --todo-texte: #000;
  --lecture-fond: #fff; --lecture-texte: #000; color-scheme: dark; }
html[data-a11y-theme="noir-jaune"] {   /* noir sur jaune pâle #fff59d : environ 18:1 */
  --blanc: #fff59d; --texte: #000; --vert: #000; --vert-fonce: #333;
  --filet: #000; --filet-fort: #000; --todo-fond: #000; --todo-texte: #fff59d;
  --lecture-fond: #000; --lecture-texte: #fff59d; }
/* Boutons devenus clairs (jaune ou blanc) : le logo Doctolib, blanc à l'origine, passe en noir */
html[data-a11y-theme="jaune-noir"] .logo-doctolib, html[data-a11y-theme="blanc-noir"] .logo-doctolib { filter: brightness(0); }
/* Photophobie : la carte OpenStreetMap, très claire, est inversée dans les thèmes sombres */
html[data-a11y-theme="jaune-noir"] .carte, html[data-a11y-theme="blanc-noir"] .carte { filter: invert(1) hue-rotate(180deg); }

/* ---------- Mise en évidence du bloc lu à voix haute ---------- */
/* Thème standard : fond jaune pâle + cadre noir, seule entorse à la charte, limitée à la lecture */
.a11y-lecture { background: var(--lecture-fond, #ffe680); color: var(--lecture-texte, #111);
  outline: 4px solid var(--lecture-texte, #111); outline-offset: 4px; }
.a11y-lecture a { color: inherit; }

/* ---------- Préférences du système ---------- */
@media (prefers-contrast: more) { :root { --filet: #111; --filet-fort: #111; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) {
  .a11y-theme { display: none; }                         /* le système impose déjà ses couleurs */
  .a11y-echantillon { forced-color-adjust: none; }
  .a11y-lecture { forced-color-adjust: none; background: Highlight; color: HighlightText; outline: 4px solid Highlight; }
  .a11y-btn[aria-expanded="true"] { border-width: 4px; }
  .btn:has(.logo-doctolib) { forced-color-adjust: none; } /* garde le fond vert pour que le logo blanc reste lisible */
}