/**
 * Fichier : assets/css/navigation.css
 * Emplacement : sous-dossier assets/css/ du thème AB-Story Reader-Thème
 *
 * Responsabilités :
 *   - Définir les styles génériques et réutilisables des composants de
 *     navigation produits par ABS_Reader_Theme_Template_Tags : menus en
 *     boutons via le Walker dédié et barres d'onglets ARIA tablist.
 *   - Exposer un système de variables CSS surchargeables pour chaque
 *     composant, afin de permettre une personnalisation contextuelle par
 *     header.css, footer.css ou un design tiers.
 *   - Styler les composants d'infrastructure de la navigation fluide
 *     posés par le PHP et manipulés par le module JS navigation.js :
 *     région ARIA live (pattern visuallyhidden), indicateur de chargement
 *     visuel (barre fine animée), classes d'état globales sur le body
 *     (abs-nav-is-loading, abs-nav-is-error, abs-nav-prefers-reduced-motion),
 *     classes de transition sur le conteneur de contenu
 *     (abs-nav-content-leaving, abs-nav-content-entering), et état
 *     aria-busy pendant le chargement.
 *
 * Périmètre :
 *   Ce fichier contient les styles intrinsèques des composants de
 *   navigation, indépendants de leur position dans la page. Le
 *   positionnement et l'alignement contextuels (dans le header, le
 *   footer ou ailleurs) restent gérés par les fichiers CSS spécifiques
 *   à ces emplacements.
 *
 * Pattern de variables :
 *   Toutes les variables racines sont déclarées sur :root afin que
 *   leurs valeurs par défaut soient héritées par tous les composants
 *   de navigation, et que n'importe quel ancêtre dans le DOM puisse
 *   les surcharger sans être bloqué par une définition posée
 *   directement sur le composant lui-même. La surcharge depuis
 *   assets/css/header-css.php sur une zone du header ou depuis un
 *   design tiers fonctionne ainsi de manière prévisible.
 *
 * Composants stylés :
 *   - Conteneurs nav génériques (.abs-reader-theme-nav-*)
 *   - Listes plates ul/li à l'intérieur des nav
 *   - Boutons de menu produits par le Walker Nav_Menu_Buttons
 *   - Barre d'onglets .abs-reader-theme-tablist
 *   - Boutons d'onglet .abs-reader-theme-tab avec indicateur actif
 *   - Région ARIA live de navigation fluide .abs-nav-live-region
 *     (masquée visuellement, accessible aux lecteurs d'écran)
 *   - Indicateur de chargement visuel .abs-nav-loading-indicator
 *     (barre fine animée en haut ou en bas de l'écran)
 *   - Classes d'état globales du body et de transition du contenu
 *     posées par le module JS navigation.js
 *
 * Styles modificateurs des boutons de menu :
 *   Quatre variantes visuelles d'apparence sont disponibles, activées
 *   par une classe modificatrice posée sur un ancêtre du bouton
 *   (typiquement la zone conteneur du footer ou du header). Chaque
 *   variante surcharge les variables CSS racines pour produire un
 *   rendu cohérent sans modifier la structure HTML ni dupliquer les
 *   règles de base.
 *
 *     is-button-style-text     Texte seul, sans cadre ni fond. Hover
 *                              discret avec soulignement.
 *     is-button-style-filled   Bouton plein avec fond contrasté, sans
 *                              bordure. Hover plus foncé.
 *     is-button-style-outline  Bouton en contour, fond transparent et
 *                              bordure visible. Hover inverse en plein.
 *     is-button-style-ghost    Bouton très discret, fond et bordure
 *                              transparents, texte adouci. Hover révèle
 *                              un fond très subtil.
 *
 *   Note importante sur la forme (radius) : la forme arrondie du bouton
 *   (carré, légèrement arrondi, pilule) n'est volontairement pas traitée
 *   comme un style distinct. Elle est entièrement pilotée par la variable
 *   --abs-reader-theme-nav-button-radius qui reste orthogonale aux quatre
 *   styles ci-dessus. L'admin peut donc librement combiner par exemple un
 *   style outline avec une forme pilule (radius 9999px) sans contrainte
 *   d'enchaînement, ce qui ouvre toutes les combinaisons forme x style.
 *
 *   Pattern d'activation : la classe modificatrice est posée sur un
 *   ancêtre du bouton, et la règle CSS utilise un sélecteur descendant
 *   pour cibler les boutons à l'intérieur. Cela permet d'activer un
 *   style sur l'ensemble d'une zone du footer ou du header sans avoir
 *   à modifier chaque bouton individuellement.
 *
 * Styles modificateurs des onglets de tablist :
 *   Quatre variantes visuelles d'apparence sont également disponibles
 *   pour les onglets ARIA tablist, suivant strictement le même pattern
 *   architectural que les boutons de menu. Cela garantit la cohérence
 *   visuelle et la prévisibilité de l'API pour l'admin.
 *
 *     is-tab-style-text        Onglet en texte seul, sans cadre ni fond.
 *                              Hover discret avec soulignement.
 *     is-tab-style-filled      Onglet plein avec fond contrasté.
 *                              Hover plus foncé.
 *     is-tab-style-outline     Onglet en contour, fond transparent et
 *                              bordure visible. Hover inverse en plein.
 *     is-tab-style-ghost       Onglet très discret, fond et bordure
 *                              transparents, texte adouci. Hover révèle
 *                              un fond très subtil.
 *
 *   La forme (radius) reste là encore orthogonale : la variable
 *   --abs-reader-theme-tab-radius est pilotée séparément, ce qui
 *   permet toute combinaison forme x style sur les onglets aussi.
 *
 *   L'indicateur visuel d'onglet actif (le trait sous l'onglet) reste
 *   actif sur tous les styles. Pour les styles qui ont déjà un fond
 *   propre signalant la sélection (filled, outline), l'indicateur peut
 *   être masqué via --abs-reader-theme-tab-indicator-size: 0 si l'admin
 *   le souhaite, sans modifier la structure ni les règles CSS.
 *
 * Accessibilité WCAG 2.1 niveau AA :
 *   - Focus visible sur tous les éléments interactifs
 *   - Cibles tactiles d'au moins 44x44px (recommandation WCAG 2.5.5)
 *   - Indicateur visuel d'onglet actif distinct du seul aria-selected
 *   - Respect de prefers-reduced-motion
 *   - Contraste des couleurs préservé dans les quatre variantes par
 *     défaut, à l'admin de vérifier le contraste après surcharge
 *     contextuelle si les couleurs sont changées.
 */


/* =============================================================
   Variables racines des composants de navigation

   Toutes les variables sont posées sur :root pour permettre la
   surcharge contextuelle depuis n'importe quel ancêtre dans le DOM
   (par exemple un sélecteur de zone du header) sans que la valeur
   posée par défaut sur un conteneur nav ou tablist ne l'emporte
   via la résolution descendante de var().
   ============================================================= */

:root {

    /* Listes */
    --abs-reader-theme-nav-list-gap: 0.5rem;

    /* Boutons de menu (Walker Nav_Menu_Buttons) */
    --abs-reader-theme-nav-button-bg: transparent;
    --abs-reader-theme-nav-button-bg-hover: rgba(127, 127, 127, 0.12);
    --abs-reader-theme-nav-button-bg-current: rgba(127, 127, 127, 0.18);
    --abs-reader-theme-nav-button-border-width: 1px;
    --abs-reader-theme-nav-button-border-style: solid;
    --abs-reader-theme-nav-button-border-color: transparent;
    --abs-reader-theme-nav-button-border-width-hover: 1px;
    --abs-reader-theme-nav-button-border-style-hover: solid;
    --abs-reader-theme-nav-button-border-color-hover: currentColor;
    --abs-reader-theme-nav-button-color: currentColor;
    --abs-reader-theme-nav-button-padding-y: 0.5rem;
    --abs-reader-theme-nav-button-padding-x: 0.875rem;
    --abs-reader-theme-nav-button-radius: 0.375rem;
    --abs-reader-theme-nav-button-font-weight: 500;
    --abs-reader-theme-nav-button-font-weight-current: 700;
    --abs-reader-theme-nav-button-line-height: 1.4;
    --abs-reader-theme-nav-button-text-align: center;
    --abs-reader-theme-nav-button-min-height: 2.75rem;

    /* Barre d'onglets */
    --abs-reader-theme-tablist-gap: 0.5rem;
    --abs-reader-theme-tab-bg: transparent;
    --abs-reader-theme-tab-bg-hover: rgba(127, 127, 127, 0.08);
    --abs-reader-theme-tab-color: currentColor;
    --abs-reader-theme-tab-padding-y: 0.625rem;
    --abs-reader-theme-tab-padding-x: 1rem;
    --abs-reader-theme-tab-radius: 0.25rem;
    --abs-reader-theme-tab-font-weight: 500;
    --abs-reader-theme-tab-font-weight-active: 700;
    --abs-reader-theme-tab-line-height: 1.4;
    --abs-reader-theme-tab-text-align: center;
    --abs-reader-theme-tab-min-height: 2.75rem;

    /* Indicateur d'onglet actif (style underline par défaut) */
    --abs-reader-theme-tab-indicator-color: currentColor;
    --abs-reader-theme-tab-indicator-size: 2px;
    --abs-reader-theme-tab-indicator-offset: 0;
    --abs-reader-theme-tab-indicator-radius: 1px;
    --abs-reader-theme-tab-indicator-transition-duration: 220ms;
    --abs-reader-theme-tab-indicator-scale-hover: 0.6;
    --abs-reader-theme-tab-indicator-opacity-hover: 0.6;

    /* Focus visible (accessibilité clavier) */
    --abs-reader-theme-focus-outline-width: 3px;
    --abs-reader-theme-focus-outline-color: currentColor;
    --abs-reader-theme-focus-outline-offset: 2px;
    --abs-reader-theme-focus-outline-radius: 2px;

    /* Transitions */
    --abs-reader-theme-nav-transition-duration: 160ms;
    --abs-reader-theme-nav-transition-timing: ease;

    /* Région ARIA live (masquage accessible) */
    --abs-nav-live-region-position: absolute;

    /* Indicateur de chargement visuel */
    --abs-nav-loading-indicator-color: currentColor;
    --abs-nav-loading-indicator-height: 3px;
    --abs-nav-loading-indicator-z-index: 9999;
    --abs-nav-loading-indicator-opacity: 0.85;
    --abs-nav-loading-indicator-animation-duration: 1200ms;

    /* Transition du contenu lors de la navigation fluide */
    --abs-nav-content-transition-duration: 200ms;
    --abs-nav-content-transition-timing: ease;
    --abs-nav-content-leaving-opacity: 0;
    --abs-nav-content-entering-opacity: 1;
}


/* =============================================================
   Conteneur nav générique
   ============================================================= */

.abs-reader-theme-nav,
[class^="abs-reader-theme-nav-"] {
    display: block;
}

/* Liste plate dans toute navigation */
.abs-reader-theme-nav ul,
[class^="abs-reader-theme-nav-"] ul,
.abs-reader-theme-menu,
[class^="abs-reader-theme-menu-"] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--abs-reader-theme-nav-list-gap);
}

.abs-reader-theme-nav li,
[class^="abs-reader-theme-nav-"] li,
.abs-reader-theme-menu li,
[class^="abs-reader-theme-menu-"] li {
    margin: 0;
    padding: 0;
}


/* =============================================================
   Boutons de menu (Walker Nav_Menu_Buttons)
   ============================================================= */

.abs-reader-theme-nav button,
[class^="abs-reader-theme-nav-"] button,
.abs-reader-theme-menu button,
[class^="abs-reader-theme-menu-"] button {

    /* Réinitialisation des styles natifs */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: var(--abs-reader-theme-nav-button-line-height);
    text-align: var(--abs-reader-theme-nav-button-text-align);
    cursor: pointer;

    /* Apparence */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--abs-reader-theme-nav-button-min-height);
    padding-block: var(--abs-reader-theme-nav-button-padding-y);
    padding-inline: var(--abs-reader-theme-nav-button-padding-x);
    background-color: var(--abs-reader-theme-nav-button-bg);
    border-width: var(--abs-reader-theme-nav-button-border-width);
    border-style: var(--abs-reader-theme-nav-button-border-style);
    border-color: var(--abs-reader-theme-nav-button-border-color);
    border-radius: var(--abs-reader-theme-nav-button-radius);
    color: var(--abs-reader-theme-nav-button-color);
    font-weight: var(--abs-reader-theme-nav-button-font-weight);

    /* Transitions */
    transition:
        background-color var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing),
        border-color var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing),
        color var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing);
}

.abs-reader-theme-nav button:hover,
[class^="abs-reader-theme-nav-"] button:hover,
.abs-reader-theme-menu button:hover,
[class^="abs-reader-theme-menu-"] button:hover,
.abs-reader-theme-nav button:focus-visible,
[class^="abs-reader-theme-nav-"] button:focus-visible,
.abs-reader-theme-menu button:focus-visible,
[class^="abs-reader-theme-menu-"] button:focus-visible {
    background-color: var(--abs-reader-theme-nav-button-bg-hover);
    border-width: var(--abs-reader-theme-nav-button-border-width-hover);
    border-style: var(--abs-reader-theme-nav-button-border-style-hover);
    border-color: var(--abs-reader-theme-nav-button-border-color-hover);
}

/* Item courant (aria-current="page" ou classe WordPress current-menu-item) */
.abs-reader-theme-nav button[aria-current="page"],
[class^="abs-reader-theme-nav-"] button[aria-current="page"],
.abs-reader-theme-menu button[aria-current="page"],
[class^="abs-reader-theme-menu-"] button[aria-current="page"],
.current-menu-item > button,
.current_page_item > button {
    background-color: var(--abs-reader-theme-nav-button-bg-current);
    border-width: var(--abs-reader-theme-nav-button-border-width-hover);
    border-style: var(--abs-reader-theme-nav-button-border-style-hover);
    border-color: var(--abs-reader-theme-nav-button-border-color-hover);
    font-weight: var(--abs-reader-theme-nav-button-font-weight-current);
}

@media (prefers-reduced-motion: reduce) {
    .abs-reader-theme-nav button,
    [class^="abs-reader-theme-nav-"] button,
    .abs-reader-theme-menu button,
    [class^="abs-reader-theme-menu-"] button {
        transition: none;
    }
}


/* =============================================================
   Styles modificateurs des boutons de menu

   Cinq variantes visuelles activées par une classe modificatrice
   posée sur un ancêtre du bouton. Chaque variante surcharge les
   variables CSS racines des boutons de menu pour produire un rendu
   cohérent, sans modifier la structure HTML ni dupliquer les règles
   de base définies plus haut.

   Les sélecteurs utilisent la spécificité descendante .is-button-style-X
   suivie de la cible bouton, ce qui permet à la classe modificatrice
   d'être posée à n'importe quel niveau (zone du footer, zone du
   header, conteneur menu ou même <ul> du menu).

   Les variables surchargées sont les mêmes que celles de :root :
   l'effet de la surcharge se propage automatiquement aux règles de
   base via la cascade native des variables CSS, garantissant que
   tout style supplémentaire posé sur les variables (transition,
   typographie, padding) reste actif sans duplication.
   ============================================================= */


/* Style "text" : texte seul, sans cadre ni fond.
   Hover discret avec soulignement pour signaler l'interactivité. */
.is-button-style-text .abs-reader-theme-nav button,
.is-button-style-text [class^="abs-reader-theme-nav-"] button,
.is-button-style-text .abs-reader-theme-menu button,
.is-button-style-text [class^="abs-reader-theme-menu-"] button {
    --abs-reader-theme-nav-button-bg: transparent;
    --abs-reader-theme-nav-button-bg-hover: transparent;
    --abs-reader-theme-nav-button-bg-current: transparent;
    --abs-reader-theme-nav-button-border-width: 1px;
    --abs-reader-theme-nav-button-border-style: solid;
    --abs-reader-theme-nav-button-border-color: transparent;
    --abs-reader-theme-nav-button-border-width-hover: 1px;
    --abs-reader-theme-nav-button-border-style-hover: solid;
    --abs-reader-theme-nav-button-border-color-hover: transparent;
    --abs-reader-theme-nav-button-padding-y: 0.25rem;
    --abs-reader-theme-nav-button-padding-x: 0.5rem;
    --abs-reader-theme-nav-button-radius: 0;
}

.is-button-style-text .abs-reader-theme-nav button:hover,
.is-button-style-text [class^="abs-reader-theme-nav-"] button:hover,
.is-button-style-text .abs-reader-theme-menu button:hover,
.is-button-style-text [class^="abs-reader-theme-menu-"] button:hover,
.is-button-style-text .abs-reader-theme-nav button:focus-visible,
.is-button-style-text [class^="abs-reader-theme-nav-"] button:focus-visible,
.is-button-style-text .abs-reader-theme-menu button:focus-visible,
.is-button-style-text [class^="abs-reader-theme-menu-"] button:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25rem;
}


/* Style "filled" : bouton plein avec fond contrasté.
   Couleurs par défaut neutres pour ne pas imposer une palette ; les
   surcharges contextuelles (header, footer, design tiers) sont
   attendues pour aligner sur l'identité visuelle du site. */
.is-button-style-filled .abs-reader-theme-nav button,
.is-button-style-filled [class^="abs-reader-theme-nav-"] button,
.is-button-style-filled .abs-reader-theme-menu button,
.is-button-style-filled [class^="abs-reader-theme-menu-"] button {
    --abs-reader-theme-nav-button-bg: currentColor;
    --abs-reader-theme-nav-button-bg-hover: currentColor;
    --abs-reader-theme-nav-button-bg-current: currentColor;
    --abs-reader-theme-nav-button-border-width: 1px;
    --abs-reader-theme-nav-button-border-style: solid;
    --abs-reader-theme-nav-button-border-color: transparent;
    --abs-reader-theme-nav-button-border-width-hover: 1px;
    --abs-reader-theme-nav-button-border-style-hover: solid;
    --abs-reader-theme-nav-button-border-color-hover: transparent;
    --abs-reader-theme-nav-button-color: var(--abs-reader-theme-color-background, #fff);
    --abs-reader-theme-nav-button-radius: 0.375rem;
}

.is-button-style-filled .abs-reader-theme-nav button:hover,
.is-button-style-filled [class^="abs-reader-theme-nav-"] button:hover,
.is-button-style-filled .abs-reader-theme-menu button:hover,
.is-button-style-filled [class^="abs-reader-theme-menu-"] button:hover,
.is-button-style-filled .abs-reader-theme-nav button:focus-visible,
.is-button-style-filled [class^="abs-reader-theme-nav-"] button:focus-visible,
.is-button-style-filled .abs-reader-theme-menu button:focus-visible,
.is-button-style-filled [class^="abs-reader-theme-menu-"] button:focus-visible {
    opacity: 0.85;
}


/* Style "outline" : bouton en contour avec bordure visible.
   Hover bascule le bouton en plein, inversant fond et texte pour
   un retour visuel marqué. */
.is-button-style-outline .abs-reader-theme-nav button,
.is-button-style-outline [class^="abs-reader-theme-nav-"] button,
.is-button-style-outline .abs-reader-theme-menu button,
.is-button-style-outline [class^="abs-reader-theme-menu-"] button {
    --abs-reader-theme-nav-button-bg: transparent;
    --abs-reader-theme-nav-button-bg-hover: currentColor;
    --abs-reader-theme-nav-button-bg-current: currentColor;
    --abs-reader-theme-nav-button-border-width: 2px;
    --abs-reader-theme-nav-button-border-style: solid;
    --abs-reader-theme-nav-button-border-color: currentColor;
    --abs-reader-theme-nav-button-border-width-hover: 2px;
    --abs-reader-theme-nav-button-border-style-hover: solid;
    --abs-reader-theme-nav-button-border-color-hover: currentColor;
    --abs-reader-theme-nav-button-radius: 0.375rem;
}

.is-button-style-outline .abs-reader-theme-nav button:hover,
.is-button-style-outline [class^="abs-reader-theme-nav-"] button:hover,
.is-button-style-outline .abs-reader-theme-menu button:hover,
.is-button-style-outline [class^="abs-reader-theme-menu-"] button:hover,
.is-button-style-outline .abs-reader-theme-nav button:focus-visible,
.is-button-style-outline [class^="abs-reader-theme-nav-"] button:focus-visible,
.is-button-style-outline .abs-reader-theme-menu button:focus-visible,
.is-button-style-outline [class^="abs-reader-theme-menu-"] button:focus-visible {
    color: var(--abs-reader-theme-color-background, #fff);
}


/* Style "ghost" : bouton très discret, texte adouci.
   Fond et bordure transparents au repos, hover révèle un fond très
   subtil pour signaler l'interactivité sans alourdir l'interface. */
.is-button-style-ghost .abs-reader-theme-nav button,
.is-button-style-ghost [class^="abs-reader-theme-nav-"] button,
.is-button-style-ghost .abs-reader-theme-menu button,
.is-button-style-ghost [class^="abs-reader-theme-menu-"] button {
    --abs-reader-theme-nav-button-bg: transparent;
    --abs-reader-theme-nav-button-bg-hover: rgba(127, 127, 127, 0.10);
    --abs-reader-theme-nav-button-bg-current: rgba(127, 127, 127, 0.16);
    --abs-reader-theme-nav-button-border-width: 1px;
    --abs-reader-theme-nav-button-border-style: solid;
    --abs-reader-theme-nav-button-border-color: transparent;
    --abs-reader-theme-nav-button-border-width-hover: 1px;
    --abs-reader-theme-nav-button-border-style-hover: solid;
    --abs-reader-theme-nav-button-border-color-hover: transparent;
    --abs-reader-theme-nav-button-radius: 0.375rem;
    opacity: 0.72;
}

.is-button-style-ghost .abs-reader-theme-nav button:hover,
.is-button-style-ghost [class^="abs-reader-theme-nav-"] button:hover,
.is-button-style-ghost .abs-reader-theme-menu button:hover,
.is-button-style-ghost [class^="abs-reader-theme-menu-"] button:hover,
.is-button-style-ghost .abs-reader-theme-nav button:focus-visible,
.is-button-style-ghost [class^="abs-reader-theme-nav-"] button:focus-visible,
.is-button-style-ghost .abs-reader-theme-menu button:focus-visible,
.is-button-style-ghost [class^="abs-reader-theme-menu-"] button:focus-visible {
    opacity: 1;
}


/* =============================================================
   Barre d'onglets ARIA tablist
   ============================================================= */

.abs-reader-theme-tablist,
[class^="abs-reader-theme-tablist-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--abs-reader-theme-tablist-gap);
}


/* =============================================================
   Boutons d'onglet
   ============================================================= */

.abs-reader-theme-tab {

    /* Réinitialisation */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    font: inherit;
    line-height: var(--abs-reader-theme-tab-line-height);
    text-align: var(--abs-reader-theme-tab-text-align);
    cursor: pointer;

    /* Apparence */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--abs-reader-theme-tab-min-height);
    padding-block: var(--abs-reader-theme-tab-padding-y);
    padding-inline: var(--abs-reader-theme-tab-padding-x);
    background-color: var(--abs-reader-theme-tab-bg);
    border-radius: var(--abs-reader-theme-tab-radius);
    color: var(--abs-reader-theme-tab-color);
    font-weight: var(--abs-reader-theme-tab-font-weight);

    /* Transitions */
    transition:
        background-color var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing),
        color var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing);
}

.abs-reader-theme-tab:hover,
.abs-reader-theme-tab:focus-visible {
    background-color: var(--abs-reader-theme-tab-bg-hover);
}

/* Onglet sélectionné (state ARIA) */
.abs-reader-theme-tab[aria-selected="true"] {
    font-weight: var(--abs-reader-theme-tab-font-weight-active);
}


/* =============================================================
   Indicateur visuel d'onglet actif (underline par défaut)
   ============================================================= */

.abs-reader-theme-tab::after {
    content: "";
    position: absolute;
    left: var(--abs-reader-theme-tab-padding-x);
    right: var(--abs-reader-theme-tab-padding-x);
    bottom: var(--abs-reader-theme-tab-indicator-offset);
    height: var(--abs-reader-theme-tab-indicator-size);
    background-color: var(--abs-reader-theme-tab-indicator-color);
    border-radius: var(--abs-reader-theme-tab-indicator-radius);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--abs-reader-theme-tab-indicator-transition-duration) var(--abs-reader-theme-nav-transition-timing);
    pointer-events: none;
}

.abs-reader-theme-tab:hover::after,
.abs-reader-theme-tab:focus-visible::after {
    transform: scaleX(var(--abs-reader-theme-tab-indicator-scale-hover));
    opacity: var(--abs-reader-theme-tab-indicator-opacity-hover);
}

.abs-reader-theme-tab[aria-selected="true"]::after {
    transform: scaleX(1);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .abs-reader-theme-tab,
    .abs-reader-theme-tab::after {
        transition: none;
    }
}


/* =============================================================
   Styles modificateurs des onglets de tablist

   Quatre variantes visuelles activées par une classe modificatrice
   posée sur un ancêtre des onglets (le conteneur tablist lui-même,
   ou n'importe quel ancêtre comme la zone d'un footer ou d'un
   header). Le pattern suit strictement celui des boutons de menu :
   chaque variante surcharge les variables CSS racines des onglets
   pour produire un rendu cohérent, sans modifier la structure HTML
   ni dupliquer les règles de base.

   La forme (radius) reste pilotée orthogonalement par la variable
   --abs-reader-theme-tab-radius, ce qui ouvre toutes les
   combinaisons forme x style. L'indicateur visuel d'onglet actif
   (trait sous l'onglet via ::after) reste actif sur tous les styles
   ; pour le masquer sur les styles qui ont déjà un fond signalant
   la sélection (filled, outline), l'admin peut surcharger
   --abs-reader-theme-tab-indicator-size: 0 sans modifier la
   structure CSS ici.
   ============================================================= */


/* Style "text" : onglet en texte seul, sans cadre ni fond.
   Hover discret avec soulignement pour signaler l'interactivité. */
.is-tab-style-text .abs-reader-theme-tab {
    --abs-reader-theme-tab-bg: transparent;
    --abs-reader-theme-tab-bg-hover: transparent;
    --abs-reader-theme-tab-padding-y: 0.5rem;
    --abs-reader-theme-tab-padding-x: 0.625rem;
    --abs-reader-theme-tab-radius: 0;
}

.is-tab-style-text .abs-reader-theme-tab:hover,
.is-tab-style-text .abs-reader-theme-tab:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25rem;
}


/* Style "filled" : onglet plein avec fond contrasté.
   Couleurs par défaut neutres pour ne pas imposer une palette, les
   surcharges contextuelles depuis footer.css ou un design tiers sont
   attendues pour aligner sur l'identité visuelle du site. */
.is-tab-style-filled .abs-reader-theme-tab {
    --abs-reader-theme-tab-bg: currentColor;
    --abs-reader-theme-tab-bg-hover: currentColor;
    --abs-reader-theme-tab-color: var(--abs-reader-theme-color-background, #fff);
    --abs-reader-theme-tab-radius: 0.375rem;
}

.is-tab-style-filled .abs-reader-theme-tab:hover,
.is-tab-style-filled .abs-reader-theme-tab:focus-visible {
    opacity: 0.85;
}


/* Style "outline" : onglet en contour avec bordure visible.
   Hover bascule l'onglet en plein, inversant fond et texte pour un
   retour visuel marqué. La bordure est posée via box-shadow inset
   pour ne pas perturber le padding et garder l'alignement vertical
   identique aux autres styles. */
.is-tab-style-outline .abs-reader-theme-tab {
    --abs-reader-theme-tab-bg: transparent;
    --abs-reader-theme-tab-bg-hover: currentColor;
    --abs-reader-theme-tab-radius: 0.375rem;
    box-shadow: inset 0 0 0 2px currentColor;
}

.is-tab-style-outline .abs-reader-theme-tab:hover,
.is-tab-style-outline .abs-reader-theme-tab:focus-visible {
    color: var(--abs-reader-theme-color-background, #fff);
}

.is-tab-style-outline .abs-reader-theme-tab[aria-selected="true"] {
    background-color: var(--abs-reader-theme-tab-bg-hover);
    color: var(--abs-reader-theme-color-background, #fff);
}


/* Style "ghost" : onglet très discret, texte adouci.
   Fond transparent au repos, hover révèle un fond très subtil pour
   signaler l'interactivité sans alourdir l'interface. */
.is-tab-style-ghost .abs-reader-theme-tab {
    --abs-reader-theme-tab-bg: transparent;
    --abs-reader-theme-tab-bg-hover: rgba(127, 127, 127, 0.10);
    --abs-reader-theme-tab-radius: 0.375rem;
    opacity: 0.72;
}

.is-tab-style-ghost .abs-reader-theme-tab:hover,
.is-tab-style-ghost .abs-reader-theme-tab:focus-visible,
.is-tab-style-ghost .abs-reader-theme-tab[aria-selected="true"] {
    opacity: 1;
}


/* =============================================================
   Focus visible global pour tous les éléments interactifs
   ============================================================= */

.abs-reader-theme-nav :focus-visible,
[class^="abs-reader-theme-nav-"] :focus-visible,
.abs-reader-theme-menu :focus-visible,
[class^="abs-reader-theme-menu-"] :focus-visible,
.abs-reader-theme-tablist :focus-visible,
[class^="abs-reader-theme-tablist-"] :focus-visible,
.abs-reader-theme-tab:focus-visible {
    outline: var(--abs-reader-theme-focus-outline-width) solid var(--abs-reader-theme-focus-outline-color);
    outline-offset: var(--abs-reader-theme-focus-outline-offset);
    border-radius: var(--abs-reader-theme-focus-outline-radius);
}


/* =============================================================
   Adaptations responsive
   ============================================================= */

@media (max-width: 47.99em) {

    /* Sur mobile, les boutons de menu et les onglets prennent toute la largeur
       quand le conteneur est en flex-direction column pour faciliter le tap. */

    .abs-reader-theme-nav.is-stacked button,
    [class^="abs-reader-theme-nav-"].is-stacked button,
    .abs-reader-theme-tablist.is-stacked .abs-reader-theme-tab,
    [class^="abs-reader-theme-tablist-"].is-stacked .abs-reader-theme-tab {
        width: 100%;
        justify-content: flex-start;
    }
}


/* =============================================================
   Infrastructure de navigation fluide

   Les composants ci-dessous (région ARIA live, indicateur de
   chargement, classes d'état globales et de transition du contenu)
   sont posés par le PHP du thème lors du rendu initial de la page
   et manipulés à l'exécution par le module JS assets/js/navigation.js.

   Le PHP est l'unique source de vérité pour leur rendu HTML ; le JS
   ne fait que retrouver les éléments dans le DOM via des sélecteurs
   sur leurs classes et mettre à jour leur état (textContent, classes
   modificatrices).

   Les designs additionnels peuvent surcharger toutes les variables
   racines exposées plus haut et écouter les événements customisés
   préfixés "abs:navigation:" émis sur document pour piloter des
   animations ou effets visuels personnalisés sans modifier ni le
   PHP ni le JS.
   ============================================================= */


/* Région ARIA live de navigation fluide.

   Visuellement masquée mais découvrable par les lecteurs d'écran via
   le pattern visuallyhidden standard. Le texte est posé dynamiquement
   par le module JS via textContent, jamais via innerHTML, ce qui
   garantit l'absence d'injection HTML involontaire depuis les chaînes
   de localisation.

   On évite display: none et visibility: hidden qui empêcheraient la
   découverte par les technologies d'assistance. */
.abs-nav-live-region {
    position: var(--abs-nav-live-region-position);
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Indicateur de chargement visuel.

   Barre fine fixée en haut ou en bas du viewport, masquée par défaut
   (opacité 0) et révélée quand le module JS pose la classe
   modificatrice --is-active pendant le chargement d'une nouvelle
   page. L'animation par défaut est une bande lumineuse qui traverse
   la barre, signalant un chargement indéterminé sans nécessiter de
   suivi de progression réelle.

   L'élément porte aria-hidden="true" côté HTML : les annonces
   accessibles passent exclusivement par la région ARIA live. */
.abs-nav-loading-indicator {
    position: fixed;
    left: 0;
    right: 0;
    height: var(--abs-nav-loading-indicator-height);
    background-color: transparent;
    overflow: hidden;
    z-index: var(--abs-nav-loading-indicator-z-index);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--abs-reader-theme-nav-transition-duration) var(--abs-reader-theme-nav-transition-timing);
}

/* Position haute (par défaut). Le PHP ajoute le modificateur --top
   au moment du rendu via the_navigation_loading_indicator(). */
.abs-nav-loading-indicator--top {
    top: 0;
    bottom: auto;
}

/* Position basse, alternative configurée côté admin. */
.abs-nav-loading-indicator--bottom {
    top: auto;
    bottom: 0;
}

/* État actif posé par le module JS pendant le chargement. */
.abs-nav-loading-indicator--is-active {
    opacity: var(--abs-nav-loading-indicator-opacity);
}

/* Bande lumineuse animée à l'intérieur de la barre. Utilise un
   pseudo-élément pour ne pas dépendre d'un enfant DOM, ce qui
   permet au PHP de poser un simple <div> sans structure interne.
   L'animation ne tourne que quand la barre est active, pour ne pas
   consommer inutilement de cycles CPU à l'arrière-plan. */
.abs-nav-loading-indicator::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40%;
    background-color: var(--abs-nav-loading-indicator-color);
    transform: translateX(-100%);
    animation: none;
}

.abs-nav-loading-indicator--is-active::before {
    animation: abs-nav-loading-indicator-slide var(--abs-nav-loading-indicator-animation-duration) ease-in-out infinite;
}

@keyframes abs-nav-loading-indicator-slide {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(150%);
    }
    100% {
        transform: translateX(350%);
    }
}


/* État aria-busy sur le conteneur de contenu.

   Posé par le module JS pendant le chargement d'une nouvelle page
   sur le conteneur de contenu (par défaut <main>). Adoucit le
   contenu pour signaler visuellement la transition aux utilisateurs
   sans technologie d'assistance, en complément de l'annonce ARIA
   live et de l'indicateur de chargement.

   Pointer-events: none désactive les interactions avec le contenu
   en cours de remplacement, évitant les clics fantômes pendant la
   transition. */
[aria-busy="true"] {
    cursor: progress;
}


/* Classes de transition du conteneur de contenu.

   Posées par le module JS juste avant le remplacement du DOM
   (LEAVING) et juste après (ENTERING) pour permettre une animation
   de transition par fondu très discrète. Les designs additionnels
   peuvent surcharger les variables racines pour proposer leur propre
   animation, ou s'accrocher aux événements abs:navigation:before-replace
   et abs:navigation:after-replace pour piloter des transitions plus
   complexes (slide, scale, custom). */
.abs-nav-content-leaving {
    opacity: var(--abs-nav-content-leaving-opacity);
    transition: opacity var(--abs-nav-content-transition-duration) var(--abs-nav-content-transition-timing);
}

.abs-nav-content-entering {
    opacity: var(--abs-nav-content-entering-opacity);
    transition: opacity var(--abs-nav-content-transition-duration) var(--abs-nav-content-transition-timing);
}


/* Classes d'état globales sur le body.

   Posées par le module JS pour signaler l'état courant de la
   navigation aux designs additionnels via la cascade CSS. Ces
   classes ne portent aucun style par défaut, ne servant que de
   points d'accroche pour les designs qui souhaiteraient appliquer
   un traitement visuel global pendant le chargement, en cas
   d'erreur, ou pour respecter la préférence système de réduction
   des animations. */
.abs-nav-is-loading {
    /* Point d'accroche pour designs additionnels. */
}

.abs-nav-is-error {
    /* Point d'accroche pour designs additionnels. */
}

.abs-nav-prefers-reduced-motion {
    /* Point d'accroche pour designs additionnels. La désactivation
       globale des transitions et animations est déjà assurée par
       style.css via @media (prefers-reduced-motion: reduce). */
}


/* Respect de la préférence prefers-reduced-motion pour les
   composants spécifiques à la navigation fluide.

   La désactivation globale des transitions et animations est déjà
   couverte par style.css. On force ici en complément l'arrêt de
   l'animation de la barre de chargement et la neutralisation des
   transitions de contenu, pour garantir un comportement immédiat
   et prévisible quel que soit l'ordre de chargement des feuilles
   ou la spécificité des sélecteurs. */
@media (prefers-reduced-motion: reduce) {

    .abs-nav-loading-indicator,
    .abs-nav-loading-indicator::before,
    .abs-nav-loading-indicator--is-active::before {
        animation: none;
        transition: none;
    }

    .abs-nav-content-leaving,
    .abs-nav-content-entering {
        transition: none;
    }
}