/* Widget accessibilité + flèche « remonter en haut » — Restaurant Panda.
   Les 2 boutons sont empilés en bas à DROITE (flèche au-dessus, accessibilité en dessous). */

:root {
  --a11y-btn-bg: var(--bamboo);          /* bouton accessibilité (vert bambou) */
  --a11y-btn-bg-hover: var(--bamboo-dark);
  --a11y-scrolltop-bg: var(--lacquer);   /* flèche remonter (rouge lacquer) */
}

.a11y-btn {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 9999px; border: 0;
  background: var(--a11y-btn-bg, #4a7c3f); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  cursor: pointer; transition: background-color .2s;
}
.a11y-btn:hover { background: var(--a11y-btn-bg-hover, #2f5228); }
.a11y-btn:focus-visible, .scrolltop-btn:focus-visible { outline: 3px solid var(--a11y-scrolltop-bg, #b71c1c); outline-offset: 2px; }

.scrolltop-btn {
  position: fixed; bottom: 5rem; right: 1.25rem; z-index: 60;
  width: 3rem; height: 3rem; border-radius: 9999px; border: 0;
  background: var(--a11y-scrolltop-bg, #b71c1c); color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
  cursor: pointer; transition: filter .2s;
}
.scrolltop-btn.is-visible { display: inline-flex; }
.scrolltop-btn:hover { filter: brightness(.92); }

.a11y-panel {
  position: fixed; bottom: 5rem; right: 1.25rem; z-index: 61;
  width: 16rem; max-width: calc(100vw - 2.5rem);
  background: var(--card, #fff); color: var(--ink, #1a1a1a);
  border: 1px solid var(--border, #e0d9c8); border-radius: 0.9rem; padding: 1rem 1.1rem;
  box-shadow: 0 16px 40px -16px rgba(26,26,26,.45);
  font-family: var(--font-sans, system-ui, sans-serif);
  display: none;
}
.a11y-panel.open { display: block; }
.a11y-panel h2 { font-family: var(--font-display, Georgia, serif); font-size: 1.15rem; font-weight: 700; margin-bottom: 0.7rem; }
.a11y-panel label {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0;
  color: var(--ink, #1a1a1a); cursor: pointer; font-size: .95rem;
}
.a11y-panel input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--bamboo, #4a7c3f); flex: 0 0 auto; }
.a11y-reset {
  width: 100%; margin-top: .8rem; padding: .55rem; border-radius: 9999px;
  border: 1px solid var(--border, #e0d9c8); background: transparent;
  color: var(--ink, #1a1a1a); font: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background-color .2s;
}
.a11y-reset:hover { background: var(--cream, #f7f2e7); }

/* ---- Options ---- */
html.a11y-larger body { font-size: 20px; }
html.a11y-spacing body { line-height: 1.9; letter-spacing: .02em; word-spacing: .08em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: .55rem; }
html.a11y-links a { text-decoration: underline; text-underline-offset: .18em; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

/* ---- Police dyslexie (OpenDyslexic, auto-hébergée, chargée seulement si activée) ---- */
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/opendyslexic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/opendyslexic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
html.a11y-dys body, html.a11y-dys input, html.a11y-dys textarea, html.a11y-dys button, html.a11y-dys select {
  font-family: "OpenDyslexic", var(--font-sans, system-ui, sans-serif) !important;
}
html.a11y-dys h1, html.a11y-dys h2, html.a11y-dys h3, html.a11y-dys h4 {
  font-family: "OpenDyslexic", var(--font-sans, system-ui, sans-serif) !important; letter-spacing: 0;
}
/* Nav compacte : neutraliser la police dys pour éviter le débordement. */
html.a11y-dys nav { font-family: var(--font-sans, system-ui, sans-serif) !important; }