/* ═══════════════════════════════════════════════════════════════════════════
   accessibilite.css — les réglages de la rubrique « Accessibilité » (02/11/2026, idée de Laurent).
   Chaque réglage est une CLASSE sur <html>, posée AVANT l'affichage par le petit script de tête
   (partials/header.ejs) qui lit `localStorage['maya-a11y']` — sinon la page s'afficherait petite puis sauterait.
   Rien ici ne s'applique tant que le visiteur n'a rien choisi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LOUPE : le site est écrit en `rem` (≈ 2 400 tailles relatives dans shop.css et styles-sortis.css) :
      grandir la police de <html> fait grandir tout le texte, et la mise en page suit (les largeurs de lecture
      sont en `ch`). La base de shop.css est clamp(1rem, 0.95rem + 0.2vw, 1.2rem) ; on la multiplie. */
html.a11y-taille-1 { font-size: clamp(1.2rem, 1.14rem + 0.24vw, 1.44rem); }
html.a11y-taille-2 { font-size: clamp(1.45rem, 1.38rem + 0.29vw, 1.74rem); }

/* ── CONTRASTE RENFORCÉ : la palette du site vit dans des variables (shop.css :root) — on les fonce,
      et le fond crème devient blanc. Les liens se soulignent, le repère du clavier s'épaissit. */
html.a11y-contraste {
  --texte:       #000000;
  --texte-doux:  #1F140E;
  --cafe:        #1A0F0A;
  --cafe-clair:  #2E1E16;
  --bois:        #3A2418;
  --bois-clair:  #4A3020;
  --terre:       #5A3A26;
  --accent:      #6E4E00;
  --accent-hover:#4E3700;
  --creme:       #FFFFFF;
  --creme-fonce: #F4F0EA;
}
html.a11y-contraste body { color: #000; background: #fff; }
html.a11y-contraste main p a, html.a11y-contraste main li a, html.a11y-contraste footer a { text-decoration: underline; text-underline-offset: 0.15em; }
html.a11y-contraste :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; }
html.a11y-contraste img { filter: none; }

/* ── SANS ANIMATIONS : ni transitions, ni animations, ni défilement glissé. (Un visiteur dont l'appareil
      demande déjà « réduire les animations » n'a rien à cocher : la règle du bas fait la même chose.) */
html.a11y-calme *, html.a11y-calme *::before, html.a11y-calme *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.a11y-calme { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html *, html *::before, html *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LA LOUPE NE GRANDIT PAS L'EN-TÊTE : ses liens sont en `rem` et ne tiennent déjà pas tous sur un téléphone ;
      grandis, ils poussaient la page hors de l'écran (mesuré au banc : +75 px à 390 px de large en « très grand »).
      On ramène l'en-tête à sa taille normale (zoom = l'inverse du facteur de la loupe). Le CONTENU, lui, grandit. */
html.a11y-taille-1 .site-header { zoom: 0.8333; }
html.a11y-taille-2 .site-header { zoom: 0.6897; }

/* ── L'EN-TÊTE PASSE À LA LIGNE au lieu de déborder. Mesuré au banc AVANT ce chantier (master ff3de992) : la page
      était déjà plus large que l'écran à 320 px (+27 px, le burger dehors) et à 768 px (+90 px, la loupe et le panier
      dehors) — un défilement de côté sur un petit téléphone et sur une tablette en portrait. */
.header-inner { gap: 0.6rem; }
.main-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0.35rem; min-width: 0; }

/* ── L'entrée dans l'en-tête : l'icône universelle, visible À TOUTES LES LARGEURS — sur téléphone, shop.css ne garde
      que la loupe, le panier et le compte : on y ajoute celle-ci (un papi ne cherche pas dans le burger). */
.nav-accessibilite svg { width: 1.35em; height: 1.35em; }
@media (max-width: 639px) {
  .main-nav > a.nav-accessibilite { display: inline-flex !important; }
}

/* ── La PAGE de réglages : de grosses cibles (64 px), l'état écrit en toutes lettres. */
.a11y-page { max-width: var(--max-width-texte, 68ch); margin: 0 auto; padding: 0 1rem 3rem; }
.a11y-page .a11y-intro { font-size: 1.1rem; line-height: 1.55; }
.a11y-reglage { border: 2px solid var(--sable, #E8D5C0); border-radius: 12px; padding: 1rem 1.2rem; margin: 1.2rem 0; background: var(--blanc, #fff); }
.a11y-reglage h2 { margin: 0 0 0.3rem; font-size: 1.35rem; }
.a11y-reglage p { margin: 0.2rem 0 0.8rem; line-height: 1.5; }
.a11y-choix { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.a11y-choix button {
  min-height: 64px; min-width: 7.5rem; padding: 0.6rem 1.1rem;
  font: inherit; font-size: 1.1rem; font-weight: 600;
  color: var(--texte, #2C1810); background: var(--creme, #FFF8F0);
  border: 2px solid var(--bois-clair, #8B6548); border-radius: 10px; cursor: pointer;
}
.a11y-choix button[aria-pressed="true"] { color: #fff; background: var(--bois, #5C3D2E); border-color: var(--bois, #5C3D2E); }
.a11y-choix button[aria-pressed="true"]::before { content: "✓ "; }
.a11y-choix button:focus-visible { outline: 3px solid var(--accent, #B8860B); outline-offset: 3px; }
.a11y-etat { font-weight: 600; margin-top: 0.6rem; min-height: 1.5em; }
.a11y-apercu { font-size: 1rem; border-left: 4px solid var(--accent, #B8860B); padding: 0.4rem 0.8rem; background: var(--creme-fonce, #F5E6D3); }
.a11y-note { font-size: 0.95rem; color: var(--texte-doux, #5D4037); line-height: 1.5; }
.a11y-tout { margin-top: 2rem; }