/* Widget d'accessibilité (RGAA) - thème noir & or. Autonome. */

/* ── Effets globaux pilotés par le lecteur ── */
:root { --a11y-scale: 1; }
html { font-size: calc(100% * var(--a11y-scale)); }

:root[data-gras="1"] body,
:root[data-gras="1"] p,
:root[data-gras="1"] li,
:root[data-gras="1"] a { font-weight: 700; }

:root[data-interlignage="1"] body { line-height: 2; }
:root[data-interlignage="1"] p,
:root[data-interlignage="1"] li { line-height: 2.1; }

:root[data-police="1"] body,
:root[data-police="1"] h1,
:root[data-police="1"] h2,
:root[data-police="1"] h3,
:root[data-police="1"] h4,
:root[data-police="1"] .cover-title,
:root[data-police="1"] .arbre-node-name {
    font-family: Verdana, 'DejaVu Sans', Tahoma, sans-serif !important;
    letter-spacing: .02em;
}

:root[data-espacement="1"] body { letter-spacing: .12em; word-spacing: .16em; }

:root[data-liens="1"] a { text-decoration: underline; }

:root[data-anim="0"] { }
:root[data-anim="1"] *,
:root[data-anim="1"] *::before,
:root[data-anim="1"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
}

/* Contraste élevé : noir pur + or/blanc cassé, bordures renforcées */
:root[data-contraste="1"] {
    --bg: #000000;
    --paper: #0a0a0a;
    --ink: #fff4d6;
    --muted: #e6c877;
    --line: #d8b25a;
    --accent: #ffd766;
    --accent-deep: #ffe08a;
    --gold: #ffd766;
}
:root[data-contraste="1"] body { background: #000; }
:root[data-contraste="1"] a { text-decoration: underline; }
:root[data-contraste="1"] .arbre-node,
:root[data-contraste="1"] .member-card,
:root[data-contraste="1"] .panel,
:root[data-contraste="1"] .profile-card { border-width: 2px; }

/* ── Bouton flottant ── */
.a11y { position: fixed; left: 18px; bottom: 18px; z-index: 90; font-family: 'Inter', sans-serif; }
.a11y-toggle {
    width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
    background: linear-gradient(160deg, #d8b25a, #b0842f);
    color: #17110a; border: 2px solid #f3e4bd;
    box-shadow: 0 8px 22px rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.a11y-toggle:hover { transform: scale(1.06); }
.a11y-ico { font-size: 1.7rem; line-height: 1; }
.a11y-toggle:focus-visible,
.a11y-choix:focus-visible,
.a11y-close:focus-visible,
.a11y-reset:focus-visible { outline: 3px solid #ffd766; outline-offset: 2px; }

/* ── Panneau ── */
.a11y-panneau {
    position: absolute; left: 0; bottom: 64px;
    width: min(320px, calc(100vw - 36px));
    max-height: min(78vh, 620px); overflow-y: auto;
    background: #17110a; color: #efe4c8;
    border: 1px solid #3b2d16; border-left: 4px solid #d8b25a;
    border-radius: 14px; box-shadow: 0 22px 60px rgba(0,0,0,.6);
    padding: 16px 18px 18px;
}
.a11y-tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.a11y-titre {
    font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; color: #e7c977; margin: 0;
}
.a11y-close { background: none; border: 0; color: #b6a578; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.a11y-close:hover { color: #efe4c8; }

.a11y-groupe { border: 0; margin: 0 0 14px; padding: 0; }
.a11y-groupe legend {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: #d8b25a; font-weight: 700; margin-bottom: 8px; padding: 0;
}
.a11y-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.a11y-choix {
    font: inherit; font-size: .88rem; cursor: pointer;
    background: #120d07; color: #efe4c8; border: 1px solid #3b2d16;
    border-radius: 9px; padding: 8px 12px; transition: border-color .15s, background .15s;
}
.a11y-choix:hover { border-color: #d8b25a; }
.a11y-choix.is-on { background: #d8b25a; color: #17110a; border-color: #d8b25a; font-weight: 600; }
.a11y-zoom { display: flex; align-items: center; gap: 12px; }
.a11y-zoom-val { min-width: 52px; text-align: center; color: #e7c977; font-weight: 600; }
.a11y-opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .92rem; cursor: pointer; }
.a11y-opt input { width: 18px; height: 18px; accent-color: #d8b25a; flex: 0 0 auto; }
.a11y-reset {
    width: 100%; font: inherit; font-weight: 600; cursor: pointer;
    background: transparent; color: #e7c977; border: 1px solid #3b2d16;
    border-radius: 9px; padding: 10px; margin-top: 4px; transition: border-color .15s;
}
.a11y-reset:hover { border-color: #d8b25a; }
.a11y-note { font-size: .74rem; color: #8f8161; margin: 10px 0 0; }

@media (max-width: 640px) {
    .a11y { left: 12px; bottom: 12px; }
}

/* ── Bandeau supérieur d'accès (Reverrouiller) ── */
.acces-barre {
    position: fixed; top: 0; left: 0; right: 0; z-index: 99990;
    display: flex; align-items: center; justify-content: center; gap: 16px;
    box-sizing: border-box; height: 52px; padding: 0 16px; line-height: 1.2;
    background: linear-gradient(90deg, #100b06, #1c1409 50%, #100b06);
    border-bottom: 1px solid #d8b25a;
    color: #e7c977; font: 500 .86rem 'Inter', sans-serif; letter-spacing: .01em;
    box-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.acces-barre-txt { display: inline-flex; align-items: center; gap: 8px; }
.acces-lock { color: #d8b25a; }
.acces-relock {
    font: inherit; font-weight: 700; cursor: pointer;
    background: #d8b25a; color: #17110a; border: 0;
    border-radius: 999px; padding: 0 16px; min-height: 44px; transition: background .15s;
}
.acces-relock:hover { background: #f0d488; }
/* Meme valeur que la hauteur de .acces-barre : la barre ne recouvre plus l'en-tete (15/09/2026). */
html.a-acces-barre body { padding-top: 52px; }
html.a-acces-barre .site-header { top: 52px; }
@media (max-width: 520px) {
    .acces-barre { font-size: .78rem; gap: 10px; }
}

/* ── Loupe ── */
.a11y-loupe {
    position: fixed; width: 230px; height: 230px; border-radius: 50%;
    border: 3px solid #d8b25a; box-shadow: 0 10px 34px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.4);
    overflow: hidden; pointer-events: none; z-index: 99980; display: none;
    background: #0d0a05;
}
.a11y-loupe-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; }