/* Mathélia — CONFORT DE LECTURE et THÈMES (refonte du 24-10-2026, porté de
   Numericus). Ce fichier est chargé APRÈS cite.css ou public.css sur toutes
   les pages : il interprète les attributs posés sur <html> par confort.js
   (data-police, data-taille, data-aere, data-clair).

   Les feuilles de base (cite.css, public.css, atelier.css) ne posent plus que
   des VARIABLES : ce fichier les redéfinit pour le thème clair. Les figures
   du registre (.anim-figure) sont dessinées pour la palette nuit : en thème
   clair elles vivent dans un encart sombre qui leur rend leurs couleurs. */

/* ---- Police : Verdana à la demande (les Dys), sur TOUT, titres compris ---- */
html[data-police="verdana"] {
    --sans: Verdana, Geneva, "DejaVu Sans", sans-serif;
    --serif: Verdana, Geneva, "DejaVu Sans", sans-serif;
}
html[data-police="verdana"] body,
html[data-police="verdana"] button,
html[data-police="verdana"] input,
html[data-police="verdana"] select,
html[data-police="verdana"] textarea,
html[data-police="verdana"] .entete__marque,
html[data-police="verdana"] .marque,
html[data-police="verdana"] h1, html[data-police="verdana"] h2, html[data-police="verdana"] h3 {
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    letter-spacing: 0;
}

/* ---- Taille des lettres : tout ce qui est en rem suit ---- */
html[data-taille="grand"] { font-size: 112%; }
html[data-taille="tres-grand"] { font-size: 128%; }

/* ---- Texte aéré : interligne et espacement plus larges sur ce qui se lit ---- */
html[data-aere="1"] p, html[data-aere="1"] li, html[data-aere="1"] label, html[data-aere="1"] summary,
html[data-aere="1"] .palier-texte, html[data-aere="1"] .question__enonce, html[data-aere="1"] .defi__texte,
html[data-aere="1"] .bulle, html[data-aere="1"] .memo__texte, html[data-aere="1"] .syntheses__bloc {
    line-height: 1.9;
    letter-spacing: 0.03em;
    word-spacing: 0.14em;
}

/* ---- Thème clair : papier et encre (décision Djess 24-10-2026) ---- */
html[data-clair="1"] {
    --nuit: #f3eee3;
    --nuit-claire: #eae3d4;
    --surface: #fffdf8;
    --surface-2: #efe9dc;
    --surface-3: #e2dbcb;
    --bordure: rgba(21, 33, 63, 0.16);
    --bordure-accent: rgba(21, 33, 63, 0.32);
    --bordure-forte: rgba(21, 33, 63, 0.45);
    --texte: #15213f;
    --texte-doux: #4a5878;
    --lien: #7a4b12;
    --ocre: #9a6a14;
    --ocre-clair: #7a4b12;
    --ocre-vif: #a16a14;
    --ocre-sombre: #7a5210;
    --sur-ocre: #ffffff;
    --brique: #b5533c;
    --brique-sombre: #9a4530;
    --accent: #b5533c;
    --accent-texte: #ffffff;
    --vert: #2f8a5c;
    --vert-sombre: #256e49;
    --rouge: #b83a2a;
    --ombre: 0 4px 14px rgba(21, 33, 63, 0.12);
    color-scheme: light;
}
html[data-clair="1"] body {
    background-color: var(--nuit);
    background-image: linear-gradient(rgba(21, 33, 63, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 33, 63, 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
    color: var(--texte);
}
/* Les figures et animations du registre (dessinées pour la nuit) : un encart
   sombre qui leur rend la palette nuit par ses propres variables. */
html[data-clair="1"] .anim-figure,
html[data-clair="1"] .question__illustration,
html[data-clair="1"] .defi__illustration,
html[data-clair="1"] .palier-methode,
html[data-clair="1"] .fiche__figure {
    --nuit: #0f1a2e; --nuit-claire: #16243d; --surface: #1b2c49; --surface-2: #223656; --surface-3: #2c4a6e;
    --bordure: rgba(255, 255, 255, 0.12); --bordure-accent: rgba(230, 179, 90, 0.45); --bordure-forte: rgba(255, 255, 255, 0.3);
    --texte: #ebe7dc; --texte-doux: #b7b3a8; --lien: #f2cd8a;
    --ocre: #e6b35a; --ocre-clair: #f2cd8a; --ocre-vif: #f4c96b; --ocre-sombre: #c48e3a; --sur-ocre: #1a1305;
    --brique: #d9764f; --brique-sombre: #b8563a; --accent: #d9764f; --accent-texte: #ffffff;
    --vert: #5fc28f; --vert-sombre: #2f9a66; --rouge: #f08a7a;
    background: #14213d;
    color: #ebe7dc;
    border-radius: var(--rayon, 10px);
}
html[data-clair="1"] .anim-figure,
html[data-clair="1"] .question__illustration,
html[data-clair="1"] .defi__illustration { padding: 8px; }
html[data-clair="1"] .anim-figure .anim-figure { background: transparent; padding: 0; }
/* Le bandeau de projection et celui de consultation gardent leurs couleurs :
   ce sont des signaux d'état, identiques dans les deux thèmes. */

/* ---- Le bouton « Aa Lecture » et son panneau ---- */
.confort { position: fixed; right: 16px; bottom: 16px; z-index: 950; font-family: var(--sans, system-ui, sans-serif); }
.confort__bouton {
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; gap: 0; line-height: 1;
    border: 1px solid var(--bordure-forte, rgba(255, 255, 255, 0.3));
    background: var(--surface, #1b2c49); color: var(--texte, #ebe7dc);
    font-size: 0.62rem; cursor: pointer; touch-action: manipulation;
    box-shadow: var(--ombre, 0 8px 24px rgba(0, 0, 0, 0.25));
}
.confort__bouton b { display: block; font-size: 1.15rem; font-weight: 800; }
.confort__bouton:hover, .confort__bouton[aria-expanded="true"] { border-color: var(--accent, #d9764f); }
.confort__bouton:focus-visible { outline: 3px solid var(--accent, #d9764f); outline-offset: 2px; }
.confort__panneau {
    position: absolute; right: 0; bottom: 64px;
    width: min(340px, calc(100vw - 32px)); padding: 14px;
    border-radius: var(--rayon, 10px);
    background: #ffffff; color: #15213f;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.confort__titre { margin: 0 0 10px; font-weight: 800; }
.confort__groupe { display: flex; gap: 6px; margin-top: 8px; }
.confort__groupe button {
    flex: 1; min-height: 44px; padding: 6px 8px;
    border-radius: var(--rayon, 10px); border: 2px solid #d9e0f0;
    background: #f4f6fb; color: #15213f; font: inherit; cursor: pointer; touch-action: manipulation;
}
.confort__groupe button[aria-pressed="true"] { border-color: #b5533c; background: #fbeee9; font-weight: 700; }
.confort__groupe button:focus-visible { outline: 3px solid #b5533c; outline-offset: 1px; }

/* ---- Le marque-page « Synthèses » sur le bord droit (comme Numericus) :
   un onglet de papier qui dépasse du livre, dans les deux thèmes. ---- */
.syntheses__onglet {
    position: fixed; top: 36vh; right: 0; z-index: 940;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 46px; min-height: 44px; padding: 14px 0 14px 2px;
    border-radius: var(--rayon, 10px) 0 0 var(--rayon, 10px);
    border: 1px solid #c9b792; border-right: 0;
    background: #f3eee3; color: #15213f;
    font-family: var(--serif, Georgia, serif); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
    cursor: pointer; touch-action: manipulation;
    box-shadow: -4px 4px 14px rgba(0, 0, 0, 0.3);
    transition: right 0.15s;
}
.syntheses__onglet span:last-child { writing-mode: vertical-rl; }
.syntheses__onglet .icone { width: 20px; height: 20px; color: #7a4b12; }
.syntheses__onglet:hover { background: #ebe3d0; }
.syntheses__onglet:focus-visible { outline: 3px solid var(--accent, #d9764f); outline-offset: 2px; }
body:has(.syntheses--ouvert) .syntheses__onglet { right: min(400px, 94vw); z-index: 961; }
body:has(.syntheses--grand.syntheses--ouvert) .syntheses__onglet { display: none; }

@media print { .confort, .syntheses__onglet { display: none !important; } }