/* ==========================================================================
   KokoroWorks — Le confort de lecture
   Les sceaux accessibilité (nav et menu papier), leur panneau, et l'effet
   des quatre réglages : tout ce que les estampilles data-acc-*
   (accessibilite.js) déclenchent.
   Cette feuille est chargée en DERNIER : ses redéfinitions de tokens
   doivent gagner sur kokoro.css, blocs :root[lang=…] compris.
   ========================================================================== */

/* ---- Le sceau accessibilité ---------------------------------------------
   Il vit dans la nav (nav-reglage, kokoro.css) et dans le menu papier
   (menu-reglage). Ici, seulement ce qui lui est propre : au moins un
   réglage actif → le point or — le même vocabulaire que la langue choisie
   du panneau langues. */
.ouvre-confort.a-reglages::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--or);
}

/* ---- Le panneau « Confort de lecture » ----------------------------------
   L'étoffe de nuit des sceaux, déployée sous le bord déchiré de la nav —
   même étoffe que le panneau des langues. */
.panneau-confort {
  position: fixed;
  top: calc(var(--nav-hauteur, 64px) + var(--s2));
  inset-inline-end: clamp(var(--s4), 4vw, var(--s12));
  z-index: 111;
  width: 240px;
  max-height: min(60svh, calc(100svh - var(--nav-hauteur, 64px) - var(--s8)));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(15, 10, 18, .82);
  border: 1px solid rgba(246, 239, 231, .25);
  border-radius: var(--rayon-doux);
  box-shadow: 0 18px 40px rgba(15, 10, 18, .45);
  padding: var(--s3) 6px 6px;
  animation: panneau-deploiement .35s var(--pose);
}
.panneau-confort[hidden] { display: none; }
/* depuis le menu papier (mobile et petit paysage), le panneau se pose au
   centre, au-dessus du menu — même géométrie que le panneau des langues */
@media (max-width: 720px), (pointer: coarse) and (max-height: 520px) {
  .panneau-confort {
    top: 50%;
    left: 50%;
    inset-inline-end: auto;
    translate: -50% -50%;
    max-height: 70svh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panneau-confort { animation: none; }
}
.panneau-confort::-webkit-scrollbar { width: 4px; }
.panneau-confort::-webkit-scrollbar-thumb {
  background: rgba(246, 239, 231, .25);
  border-radius: 2px;
}
.confort-titre {
  margin: 0 var(--s3) var(--s2);
  font-family: var(--famille-plume);
  font-weight: 620;
  font-size: 15px;
  color: var(--papier-lueur);
}
/* la note « ça se souvient » : éclaircie pour tenir 4,5:1 sur la nuit */
.confort-memoire {
  margin: 6px var(--s3) 6px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(246, 239, 231, .65);
}

/* ---- Les rangées-interrupteurs ------------------------------------------
   Toute la rangée bascule (cible pleine largeur, ≥ 44px de haut) ; la
   lumière marque l'actif : piste d'or, pouce glissé. */
.confort-reglage {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: var(--s1) var(--s3);
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: var(--papier-lueur);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: start;
}
.confort-reglage:hover, .confort-reglage:focus-visible { background: rgba(246, 239, 231, .08); }
.confort-libelle { flex: 1; line-height: 1.3; }
.confort-piste {
  flex: none;
  width: 34px; height: 18px;
  border-radius: var(--rayon-pilule);
  background: rgba(246, 239, 231, .25);
  position: relative;
  transition: background .2s var(--pose);
}
.confort-piste::after {
  content: '';
  position: absolute;
  top: 2px; inset-inline-start: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--papier-lueur);
  transition: transform .2s var(--pose);
}
.confort-reglage[aria-checked="true"] .confort-piste { background: var(--or); }
.confort-reglage[aria-checked="true"] .confort-piste::after { transform: translateX(16px); }
/* en droite-à-gauche, le pouce glisse vers la gauche */
:root[dir="rtl"] .confort-reglage[aria-checked="true"] .confort-piste::after { transform: translateX(-16px); }
@media (prefers-reduced-motion: reduce) {
  .confort-piste, .confort-piste::after { transition: none; }
}

/* les petites hauteurs (mobile paysage) : le panneau plafonne et défile */
@media (max-height: 480px) {
  .panneau-confort { max-height: 40svh; }
}

/* ==========================================================================
   Les quatre réglages — l'effet des estampilles data-acc-*
   ========================================================================== */

/* ---- Police lisible ------------------------------------------------------
   La plume se retire : tout passe sur la pile douce de la langue courante
   (une seule ligne couvre les 24 langues — les blocs :root[lang=…] de
   kokoro.css redéfinissent la douce, et cette feuille arrive après eux).
   L'aération reste sous les seuils de WCAG 1.4.12 : le réglage du visiteur
   ne doit pas casser ce que le réglage promet. */
:root[data-acc-police] {
  --famille-plume: var(--famille-douce);
}
:root[data-acc-police] body {
  letter-spacing: .01em;
  word-spacing: .06em;
}

/* ---- Texte plus grand ----------------------------------------------------
   livre.css parle rem presque partout : hausser la racine suffit. La base
   du body (17px, en px) est ramenée dans l'échelle. Les étiquettes du
   mobilier (pastille son, sceaux des réglages) restent fixes — ce n'est
   pas de la lecture. */
:root[data-acc-texte] {
  font-size: 120%;
}
:root[data-acc-texte] body {
  font-size: 1.06rem; /* ≈ 20px : l'ancienne base 17px, à l'échelle */
}
/* à cette échelle, les pages fixes du grimoire ne peuvent plus loger les
   textes entiers : le manuscrit lit ses versions courtes — celles du petit
   paysage (livre.css) — et personne ne défile dans une page. Moins d'encre,
   plus grosse, la page respire. */
:root[data-acc-texte] .texte-long { display: none; }
:root[data-acc-texte] .texte-court { display: revert; } /* p redevient bloc, span redevient inline */
:root[data-acc-texte] .valeurs-courtes {
  margin: var(--s2) 0 0;
  color: var(--encre-livre);
}
:root[data-acc-texte] .valeurs-courtes strong { font-family: var(--famille-plume); font-weight: 620; }
/* l'équipe se répartit comme au petit paysage : Adrien et Mickaël sous les
   portraits (paysage-seul), la page de droite garde Léna et Miguel — les
   doublons et l'intro longue se retirent (paysage-cache) */
:root[data-acc-texte] .paysage-cache { display: none; }
:root[data-acc-texte] .paysage-seul.paysage-seul { display: revert; }
/* l'équipe, à l'encre continue (le nom ouvre la phrase) : la liste des
   rôles rend sa hauteur sans perdre un mot */
:root[data-acc-texte] .roles { display: block; }
:root[data-acc-texte] .roles div + div { margin-top: var(--s2); }
:root[data-acc-texte] .roles dt { display: inline; }
:root[data-acc-texte] .roles dt::after { content: ' — '; color: var(--encre-livre-douce); font-weight: 400; }
:root[data-acc-texte] .roles dd {
  display: inline;
  margin: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* ---- Animations calmées --------------------------------------------------
   Le coupe-circuit : toute animation et transition CSS s'achève en un
   souffle — durées quasi nulles plutôt qu'annulées, pour que les états de
   fin restent atteints (brins de la pastille son, levers de rideau…).
   GSAP n'est pas concerné : les modules d'animation consultent
   KokoroAcces.calmes() et se retirent d'eux-mêmes au chargement. */
:root[data-acc-anim] *,
:root[data-acc-anim] *::before,
:root[data-acc-anim] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
:root[data-acc-anim] {
  scroll-behavior: auto;
}

/* ---- Contraste renforcé --------------------------------------------------
   L'encre force, l'univers ne change pas : mêmes roses, mêmes crèmes, mais
   des encres plus noires (cible AAA : ≥ 7:1 texte courant), des surfaces
   opaques et des liens soulignés. Ratios calculés sur papier/crème et sur
   les parchemins du livre — voir docs/features/pastille-accessibilite. */
:root[data-acc-contraste] {
  --encre: #241A14;            /* 16.0:1 sur papier (12.1 avant) */
  --encre-douce: #4E3A2E;      /* 10.0:1 papier · 9.3 crème (6.8 avant) */
  --framboise-encre: #8E2F3B;  /*  7.5:1 papier · 7.0 crème (5.5 avant) */
  --nav-papier: var(--papier); /* la feuille de la nav devient opaque */
  --encre-livre: #33241A;      /* 12.7:1 parchemin (9.7 avant) */
  --encre-livre-douce: #55402C;/*  8.3:1 parchemin (5.0 avant) */
}
/* les liens de la nav retrouvent leur soulignement permanent */
:root[data-acc-contraste] .nav-liens a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
/* les surfaces de nuit s'affermissent : moins de monde en transparence */
:root[data-acc-contraste] .panneau-langues,
:root[data-acc-contraste] .panneau-confort {
  background: rgba(15, 10, 18, .95);
}
:root[data-acc-contraste] .bouton-son {
  border-color: rgba(246, 239, 231, .7);
  background: rgba(15, 10, 18, .8);
}
/* les sceaux de la nav : le filet s'affermit (les encres suivent les tokens) */
:root[data-acc-contraste] .nav-reglages {
  border-inline-start-color: color-mix(in srgb, var(--brun) 70%, transparent);
}
:root[data-acc-contraste] .confort-piste { background: rgba(246, 239, 231, .45); }
:root[data-acc-contraste] .confort-memoire { color: rgba(246, 239, 231, .8); }
/* sur la nuit, l'anneau de focus framboise s'éteindrait : la lueur reprend */
:root[data-acc-contraste] .bouton-son:focus-visible,
:root[data-acc-contraste] .panneau-confort :focus-visible,
:root[data-acc-contraste] .panneau-langues :focus-visible {
  outline-color: var(--lueur);
}