/* Confort et accessibilité : boutons Aa et œil, panneau de la taille du texte, aide des raccourcis,
   mode daltonien (data-daltonien sur <html>), mode projection (aperçu du professeur). Script : confort.js. */

/* ---- Boutons : même forme que la lune (arcadia.css) ---- */
.bouton-confort { flex: none; width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; border: var(--trait-fort) solid var(--encre); border-radius: 8px; background: none; color: var(--encre); }
.bouton-confort:hover { background: var(--doux); }
.bouton-confort[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-encre); }
.bouton-confort .aa { font: 700 17px/1 var(--police-texte); display: inline-flex; align-items: baseline; }
.bouton-confort .aa small { font-size: 11px; }
body.eleve .tache .bouton-confort, body.eleve .tache .bouton-plein-ecran { display: none; } /* ils sont dans la barre du haut */
.tache .bouton-confort, .tache .bouton-plein-ecran { width: 32px; height: 32px; }
@media print { .bouton-confort, .cf-panneau, .cf-aide { display: none !important; } }

/* ---- Taille du texte ----
   Les tailles en rem suivent la taille de <html> ; le texte de <body> (en px) suit --zoom-texte. */
html body:not(.t-corps) { font-size: calc(18px * var(--zoom-texte, 1)); }
/* Texte agrandi : rien ne doit déborder ; les mots longs et les formules passent à la ligne ou défilent dans leur bloc. */
html.texte-agrandi .choix, html.texte-agrandi .consigne, html.texte-agrandi .enonce { overflow-wrap: anywhere; }
html.texte-agrandi .katex-display, html.texte-agrandi .formule-bloc { max-width: 100%; overflow-x: auto; overflow-y: hidden; }

/* Panneau de réglage de la taille du texte */
.cf-panneau { position: fixed; z-index: 60; width: 220px; padding: 12px 14px; border: var(--trait-fort) solid var(--encre); border-radius: 12px; background: var(--carte); color: var(--encre); box-shadow: 4px 4px 0 var(--ombre-dure); font-size: 16px; }
.cf-panneau[hidden] { display: none; }
.cf-titre { margin: 0 0 8px; font-weight: 700; }
.cf-ligne { display: flex; gap: 6px; }
.cf-ligne button { flex: 1; height: 40px; border: var(--trait-fort) solid var(--encre); border-radius: 8px; background: var(--fond); font-weight: 700; font-size: 18px; }
.cf-ligne button:hover:not(:disabled) { background: var(--doux); }
.cf-ligne button:disabled { opacity: 0.45; cursor: not-allowed; }
.cf-valeur { flex: 1.6; font-size: 15px; font-variant-numeric: tabular-nums; }
.cf-lien { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--accent); text-decoration: underline; font-size: 15px; }
html[data-theme="dark"] .cf-lien { color: var(--encre); }

/* Aide des raccourcis */
.cf-aide { max-width: min(480px, calc(100vw - 32px)); padding: 18px 20px; border: var(--trait-fort) solid var(--encre); border-radius: 12px; background: var(--carte); color: var(--encre); font-size: 16px; }
.cf-aide::backdrop { background: rgb(0 0 0 / 0.5); }
.cf-aide h2 { margin: 0 0 10px; font-size: 18px; }
.cf-aide table { border-collapse: collapse; width: 100%; }
.cf-aide th, .cf-aide td { padding: 6px 8px 6px 0; text-align: left; vertical-align: top; font-weight: 400; }
.cf-aide th { white-space: nowrap; }
.cf-aide kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1.5px solid var(--encre); border-radius: 5px; background: var(--fond); font: 600 14px var(--police-texte); text-align: center; }
.cf-note { margin: 8px 0 12px; color: var(--discret); font-size: 14px; }
.cf-aide form { text-align: right; }

/* ---- Mode daltonien : bleu (juste), jaune (partiel), rouge sombre (faux). Les symboles ✓ et ✗ restent affichés. ---- */
:root[data-daltonien] {
  --juste: #1A5E9E; --partiel: #E8B923; --faux: #A3202E; --juste-fond: #D6E6F5; --faux-fond: #F2D4D8;
  --rang-facile: #1A5E9E; --rang-difficile: #A3202E;
}
@media (prefers-color-scheme: dark) {
  :root[data-daltonien]:not([data-theme="light"]) {
    --juste: #6FB1F0; --partiel: #F2CC4B; --faux: #E8788A; --juste-fond: #16283A; --faux-fond: #3A1A22; --rang-facile: #6FB1F0; --rang-difficile: #E8788A;
  }
}
:root[data-theme="dark"][data-daltonien] {
  --juste: #6FB1F0; --partiel: #F2CC4B; --faux: #E8788A; --juste-fond: #16283A; --faux-fond: #3A1A22; --rang-facile: #6FB1F0; --rang-difficile: #E8788A;
}
/* Texte lisible sur le jaune et sur les teintes claires du mode sombre */
:root[data-daltonien] .questions li.partiel, :root[data-daltonien] .exo-eleve[data-etat=partiel]::before { color: #2B2621; }
@media (prefers-color-scheme: dark) {
  :root[data-daltonien]:not([data-theme="light"]) .questions li.juste, :root[data-daltonien]:not([data-theme="light"]) .questions li.faux,
  :root[data-daltonien]:not([data-theme="light"]) .choix.ok .choix-lettre, :root[data-daltonien]:not([data-theme="light"]) .choix.ko .choix-lettre { color: var(--nuit); }
}
:root[data-theme="dark"][data-daltonien] .questions li.juste, :root[data-theme="dark"][data-daltonien] .questions li.faux,
:root[data-theme="dark"][data-daltonien] .choix.ok .choix-lettre, :root[data-theme="dark"][data-daltonien] .choix.ko .choix-lettre { color: var(--nuit); }
/* Barre de vie : bleu, jaune, rouge sombre (la forme et le niveau restent lisibles sans la couleur) */
:root[data-daltonien] .bc-vie > span { background: var(--juste); }
:root[data-daltonien] .bc-vie[data-niveau="moyenne"] > span { background: var(--partiel); }
:root[data-daltonien] .bc-vie[data-niveau="basse"] > span { background: var(--faux); }
/* Réponse partielle d'un QCM ou d'une étape : trait pointillé en plus de la couleur */
:root[data-daltonien] .choix.manque { border-style: dashed; }

/* ---- Mode projection : énoncé en très grand, contraste fort, sans éléments d'interface (cadre de l'aperçu) ---- */
html.projection { font-size: 175%; }
html.projection body { font-size: calc(18px * 1.75); }
html.projection .btn-reglages, html.projection .resume, html.projection .bande-combat, html.projection .btn-clavier,
html.projection .barre-eleve, html.projection .retard { display: none !important; }
html.projection body { background: #000; color: #fff; --fond: #000; --encre: #fff; --carte: #000; --colonne: #000; --doux: #222; --discret: #ddd; --trait: #fff; }
html.projection .choix { border-width: 3px; }
/* Bonnes réponses cachées : la correction n'apparaît que sur demande du professeur */
html.projection:not(.projection-correction) .retour, html.projection:not(.projection-correction) .parties { display: none !important; }
html.projection:not(.projection-correction) .choix.ok, html.projection:not(.projection-correction) .choix.ko { border-color: var(--encre); background: none; }
html.projection:not(.projection-correction) .choix.manque { border-style: solid; border-color: var(--encre); }
html.projection:not(.projection-correction) .choix .choix-lettre { background: var(--encre); color: var(--fond); }

/* ---- Mouvement réduit ---- */
@media (prefers-reduced-motion: reduce) {
  .cf-panneau, .cf-aide { transition: none; animation: none; }
}

/* ---- Invitation à installer Arcademia (une seule fois, espace élève) ---- */
.cf-installer { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; padding: 10px 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: var(--trait-fort) solid var(--encre); border-radius: 12px; background: var(--carte); color: var(--encre); box-shadow: 4px 4px 0 var(--ombre-dure); font-size: 16px; }
.cf-installer p { margin: 0; flex: 1 1 200px; }
.cf-inst-non { width: 32px; height: 32px; border: 0; background: none; font-size: 18px; }
.cf-aide ol { margin: 8px 0 12px; padding-left: 22px; }

.tache.avec-confort { padding-top: 40px; }
body.eleve .tache.avec-confort { padding-top: 0; }