/* =========================================================================
   Livre — navigation au clavier                          (Lot 7, tâche 1)
   Indicateurs de focus de la vignette et des commandes de lecture.
   Comportement : js/imagilire-mini-book-keyboard.js
   -------------------------------------------------------------------------
   Le projet n'avait d'anneau de focus **que** sous `body.high-contrast`
   (`css/styles.css`, règle `:focus`). Partout ailleurs on s'en remettait à
   celui du navigateur — un liseré clair qui se perd sur un bouton rond de
   couleur saturée et qui disparaît sur le bandeau de titre d'une vignette.
   Naviguer au clavier sans voir où l'on est, ce n'est pas naviguer (WCAG
   2.4.7).

   Cette feuille ne traite que les commandes concernées par la tâche : la
   vignette, par laquelle on ouvre une histoire, et les boutons du livre. Le
   reste de l'application attend la passe d'ensemble du même lot.

   ── Pourquoi une bague à deux couleurs ──────────────────────────────────
   Un anneau d'une seule couleur doit contraster avec *ce qu'il touche*, et
   ce qu'il touche change : le fond crème de la page, le turquoise des
   boutons de page, l'ambre du bouton « maison », le bandeau turquoise d'une
   vignette. `--secondary-color` (#F7B731) sur `--primary-color` (#36B1B3)
   ne donne même pas 1,5:1 — le seuil est de 3:1 (WCAG 2.4.11). Un trait
   sombre doublé d'un liseré blanc, lui, se voit sur les quatre.

   ── `:focus-visible`, pas `:focus` ──────────────────────────────────────
   L'anneau se montre à la tabulation et reste invisible au clic à la souris,
   là où il passerait pour une décoration accidentelle.
   ========================================================================= */

:root {
    --focus-ring-outer: #1F2933;   /* trait sombre, porteur du contraste */
    --focus-ring-inner: #FFFFFF;   /* liseré, décolle la bague du bouton */
}

/* --------- Vignette : le point d'entrée du clavier --------- */

/* `.book-cover` porte `overflow: hidden` (css/styles.css) : une bague tracée
   à l'extérieur du bandeau de titre serait rognée par la vignette, et le
   `box-shadow` extérieur avec elle. Les deux traits sont donc dessinés **vers
   l'intérieur** — décalage négatif pour l'anneau blanc, ombre interne pour le
   trait sombre qui l'entoure. */
.book-title:focus-visible {
    outline: 3px solid var(--focus-ring-inner);
    outline-offset: -3px;
    box-shadow: inset 0 0 0 6px var(--focus-ring-outer);
}

/* --------- Commandes du livre --------- */

.nav-btn:focus-visible,
.tts-btn:focus-visible,
.home-btn:focus-visible,
.reset-btn:focus-visible,
.audio-toggle:focus-visible,
.font-size-toggle:focus-visible,
.edit-page-image-btn:focus-visible {
    outline: 3px solid var(--focus-ring-inner);
    outline-offset: 2px;
    /* L'ombre portée d'origine est reconduite : la remplacer ferait sauter le
       relief du bouton au moment précis où il reçoit le focus. */
    box-shadow: 0 4px 10px var(--shadow-color),
                0 0 0 6px var(--focus-ring-outer);
}

/* Le bouton « précédent » de la première page et le bouton « suivant » de la
   dernière sont désactivés : ils sortent du parcours de tabulation, et rien
   ne doit laisser croire qu'ils l'attendent. */
.nav-btn:disabled {
    outline: none;
}

/* --------- Conteneur du livre --------- */

/* `#bookContainer` porte `tabindex="-1"` : il reçoit le focus **par script** à
   l'ouverture, pour que la tabulation reparte du livre et non du haut du
   document. Ce n'est pas un arrêt de tabulation, il n'a donc pas à s'entourer
   d'une bague — et celle du mode contraste élevé encadrerait l'écran entier.
   Le `!important` est le seul moyen de battre `body.high-contrast :focus`
   (css/styles.css), qui en porte un. */
#bookContainer:focus {
    outline: none !important;
}

/* --------- Contraste élevé --------- */

/* Dans ce mode, `body.high-contrast :focus` impose déjà un anneau jaune de
   3 px : il l'emporte sur les règles ci-dessus, et c'est bien ainsi — le
   jaune sur fond noir est le contraste maximal dont dispose la feuille. Reste
   à retirer le trait sombre, invisible sur noir et sans objet ici. */
body.high-contrast .book-title:focus-visible,
body.high-contrast .nav-btn:focus-visible,
body.high-contrast .tts-btn:focus-visible,
body.high-contrast .home-btn:focus-visible,
body.high-contrast .reset-btn:focus-visible,
body.high-contrast .audio-toggle:focus-visible,
body.high-contrast .font-size-toggle:focus-visible,
body.high-contrast .edit-page-image-btn:focus-visible {
    box-shadow: none;
}

/* La vignette garde son décalage négatif : le bandeau de titre touche le bord
   bas de `.book-cover`, et l'anneau du mode contraste élevé — tracé à
   l'extérieur — y serait rogné comme les autres. */
body.high-contrast .book-title:focus-visible {
    outline-offset: -3px;
}