/* ==========================================================================
   Widget "Options d'accessibilité" — La Maison de Chateaubriand
   ==========================================================================
   v2 : ce fichier ne s'occupe plus que de l'apparence du bouton et de la
   popup elle-même (le bandeau message-feu a déjà son style). Les EFFETS
   (taille de texte, contraste, interlignage) sont maintenant gérés par
   themetokens.css via des variables CSS, pas ici — voir ce fichier pour
   data-a11y-font / data-theme="contrast" / data-a11y-spacing.

   À charger après le CSS général du site.
   ========================================================================== */
.msg_feu .tools, .tools ul {
  padding: 0;
  float: right;
  margin-bottom: 0;
}
.tools ul li {
  list-style: none;
}
.tools button {
  background: none;
  border: none;
  padding: 3px 5px 5px 5px;
}
/* --------------------------------------------------------------------
   Bouton déclencheur (#accessconfig .accessconfig-button)
   Pas de règle sur .accessconfig-button ici : ses styles (icône, taille,
   position dans le bandeau message-feu) restent définis ailleurs sur le
   site. On ajoute juste le comportement clavier qui manquait.
   -------------------------------------------------------------------- */
.accessconfig-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
.accessconfig-button[aria-expanded="true"] {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   Fond assombri + popup (dialog modal centré)
   -------------------------------------------------------------------- */
.a11y-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, .55);
  z-index: 9998;
}

.a11y-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Volontairement en couleurs fixes (pas var(--color-...)) : la popup
     doit rester lisible même quand [data-theme="contrast"] est actif sur
     le reste de la page. */
  background: var(--color-brand-anis);
  color: var(--color-brand-red);
  z-index: 9999;
  border-radius: 8px;
  padding: 28px 24px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}
.a11y-panel-title {
  margin: 0 0 20px;
  padding-right: 32px;
  font-size: 1.25rem;
  line-height: 1.3;
}
.a11y-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.a11y-close:hover { background: rgba(0, 0, 0, .06); }

.a11y-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
}
.a11y-fieldset:last-of-type { margin-bottom: 4px; }
.a11y-legend {
  font-weight: 700;
  padding: 0 0 8px;
  margin: 0;
  font-size: .95rem;
}
.a11y-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
  font-size: .95rem;
}
.a11y-option input {
  width: 18px;
  height: 18px;
  flex: none;
  cursor: pointer;
}
.a11y-reset {
  display: inline-block;
  margin-top: 4px;
  padding: 9px 16px;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .9rem;
}
.a11y-reset:hover { background: rgba(0, 0, 0, .06); }

.a11y-panel a:focus-visible,
.a11y-panel button:focus-visible,
.a11y-panel input:focus-visible {
  outline: 3px solid #1a56db;
  outline-offset: 2px;
}