/**
 * Fichier : assets/css/footer.css
 * Emplacement : sous-dossier assets/css/ du thème AB-Story Reader-Thème
 *
 * Responsabilités :
 *   - Définir les styles statiques de base du footer et de ses six zones.
 *   - Exposer un système de variables CSS surchargeables pour chaque option
 *     du Customizer (largeur, padding, couleurs, image de fond, alignements,
 *     bordure haute, ancrage en bas de fenêtre, etc.).
 *   - Garantir un rendu sobre, lisible et accessible en l'absence de tout
 *     CSS inline généré dynamiquement.
 *
 * Système de variables :
 *   Les variables globales du footer sont déclarées sur .abs-reader-theme-footer
 *   avec le préfixe --abs-reader-theme-footer-*. Les variables locales aux zones
 *   sont déclarées sur le même conteneur avec le préfixe --abs-reader-theme-fz-*
 *   ("fz" pour footer zone), distinct du préfixe --abs-reader-theme-zone-* utilisé
 *   par header.css pour éviter toute collision quand un design tiers redéfinit
 *   simultanément les variables des deux ensembles.
 *
 *   Le fichier assets/css/footer-css.php génère le CSS inline qui redéfinit ces
 *   variables au cas par cas, sans toucher au CSS de base et sans utiliser
 *   !important.
 *
 * Sticky bottom (ancrage du footer en bas de la fenêtre) :
 *   Quand l'option Customizer abs_reader_theme_footer_sticky est activée, le
 *   thème ajoute la classe is-sticky sur l'élément <footer>. Le mode sticky
 *   bottom est implémenté via flex sur body : la balise body devient un
 *   conteneur flex en colonne et le footer marqué is-sticky pousse vers le
 *   bas via margin-top: auto. Cela garantit que le footer reste collé au bas
 *   de la fenêtre quand le contenu de la page est court, sans recourir à
 *   position: fixed qui poserait des problèmes d'accessibilité.
 *
 * Styles des boutons et des onglets (zones 3, 4 et 5) :
 *   Le rendu intrinsèque des boutons de menu (zones 3 et 4) et des onglets
 *   ARIA tablist (zone 5) est entièrement défini dans navigation.css, qui
 *   expose sur :root les variables CSS surchargeables des trois composants :
 *
 *     Boutons de menu  --abs-reader-theme-nav-button-*       18 variables
 *     Onglets tablist  --abs-reader-theme-tab-*              11 variables
 *     Indicateur actif --abs-reader-theme-tab-indicator-*     7 variables
 *
 *   navigation.css propose également quatre styles modificateurs orthogonaux
 *   à la forme (filled, outline, ghost, text) pour les deux composants :
 *
 *     Boutons de menu  is-button-style-{text|filled|outline|ghost}
 *     Onglets tablist  is-tab-style-{text|filled|outline|ghost}
 *
 *   Le template-tag template-tags-footer.php pose ces classes modificatrices
 *   sur la balise racine de chaque zone concernée (zones 3, 4 et 5) selon
 *   les options Customizer correspondantes, ce qui active la variante
 *   visuelle souhaitée pour l'ensemble de la zone via la cascade descendante
 *   des sélecteurs définis dans navigation.css.
 *
 *   Le générateur footer-css.php émet ensuite, sur le sélecteur de chaque
 *   zone, les redéfinitions individuelles des variables CSS racines pour
 *   chaque option Customizer renseignée. Ces redéfinitions l'emportent
 *   naturellement sur les valeurs racines de navigation.css grâce à la
 *   spécificité du sélecteur de zone, sans recourir à !important et sans
 *   aucune logique conditionnelle PHP.
 *
 *   Conséquence pour ce fichier : footer.css ne contient volontairement
 *   aucune règle relative à l'apparence intrinsèque des boutons ou des
 *   onglets. Toute personnalisation visuelle de ces composants par zone
 *   transite exclusivement par la chaîne Customizer -> footer-css.php ->
 *   redéfinition des variables CSS racines de navigation.css, et la
 *   cascade native s'occupe du reste. Cela évite toute duplication de
 *   responsabilité entre navigation.css et footer.css.
 *
 * Tab bar mobile fixée (zone 5) :
 *   Quand l'option abs_reader_theme_footer_zone5_mobile_fixed est activée et
 *   que le viewport est étroit, la zone 5 reçoit position: fixed pour rester
 *   ancrée au bas de l'écran à la façon d'une bottom navigation bar
 *   d'application mobile. Sur tablette et desktop, le comportement par défaut
 *   reprend le flux du document.
 *
 * Accessibilité WCAG 2.1 niveau AA :
 *   - Focus visible sur tous les éléments interactifs
 *   - Contraste assuré par les variables de couleur du thème
 *   - Respect de prefers-reduced-motion
 *   - Tab bar mobile fixée n'occulte pas le contenu (padding-bottom dynamique
 *     ajouté au body via la classe abs-reader-theme-has-mobile-tabbar)
 *
 * Compatibilité :
 *   Variables CSS, custom properties, :focus-visible, position sticky,
 *   prefers-reduced-motion, CSS grid avec auto-fit et minmax. Aucune
 *   dépendance externe.
 *
 * Surcharge :
 *   Ce fichier ne contient aucune couleur en dur ni aucune valeur destinée
 *   à être personnalisée par l'administrateur. Toute personnalisation se
 *   fait par redéfinition de variables CSS via assets/css/footer-css.php ou
 *   via une feuille de style enfant.
 */


/* =============================================================
   Variables globales et de zone du footer
   ============================================================= */

.abs-reader-theme-footer {

    /* Variables globales du footer */
    --abs-reader-theme-footer-max-width: 1280px;
    --abs-reader-theme-footer-padding-y: 2rem;
    --abs-reader-theme-footer-padding-x: 1rem;
    --abs-reader-theme-footer-zone-gap: 1.5rem;
    --abs-reader-theme-footer-border-top-color: transparent;
    --abs-reader-theme-footer-border-top-width: 0;
    --abs-reader-theme-footer-bg: transparent;
    --abs-reader-theme-footer-text: currentColor;

    /* Variables globales du séparateur entre zones. Une valeur d'épaisseur
       à 0 par défaut rend le séparateur invisible tant que l'admin ne l'a
       pas activé via les options Customizer. La surcharge par zone est
       gérée par la cascade : les options Customizer spécifiques d'une zone
       redéfinissent ces mêmes variables sur le sélecteur de la zone, ce
       qui l'emporte naturellement sur la valeur déclarée ici grâce à la
       spécificité du sélecteur. */
    --abs-reader-theme-footer-zone-separator-style: solid;
    --abs-reader-theme-footer-zone-separator-width: 0;
    --abs-reader-theme-footer-zone-separator-color: currentColor;
    --abs-reader-theme-footer-zone-separator-spacing: 0;

    /* Variables génériques de zone, redéfinissables par zone via inline CSS */
    --abs-reader-theme-fz-bg: transparent;
    --abs-reader-theme-fz-text: currentColor;
    --abs-reader-theme-fz-link: currentColor;
    --abs-reader-theme-fz-link-hover: currentColor;
    --abs-reader-theme-fz-bg-image: none;
    --abs-reader-theme-fz-bg-position: center;
    --abs-reader-theme-fz-bg-repeat: no-repeat;
    --abs-reader-theme-fz-bg-size: cover;
    --abs-reader-theme-fz-overlay-color: transparent;
    --abs-reader-theme-fz-overlay-opacity: 0;
    --abs-reader-theme-fz-padding-y: 0.75rem;
    --abs-reader-theme-fz-padding-x: 1rem;
    --abs-reader-theme-fz-radius: 0;
    --abs-reader-theme-fz-content-align: inherit;

    /* Variables spécifiques zone 1 - widgets multi-colonnes */
    --abs-reader-theme-fz-1-columns-gap: 2rem;
    --abs-reader-theme-fz-1-columns-min: 14rem;
    --abs-reader-theme-fz-1-columns-valign: stretch;
    --abs-reader-theme-fz-1-widget-title-align: left;
    --abs-reader-theme-fz-1-widget-title-font-size: 1rem;
    --abs-reader-theme-fz-1-widget-title-font-weight: 600;
    --abs-reader-theme-fz-1-widget-title-margin-bottom: 0.75rem;
    --abs-reader-theme-fz-1-widget-spacing: 1.5rem;

    /* Variables spécifiques zone 2 - plateformes sociales */
    --abs-reader-theme-fz-2-icons-align: center;
    --abs-reader-theme-fz-2-icon-size: 2rem;
    --abs-reader-theme-fz-2-icons-spacing: 0.75rem;
    --abs-reader-theme-fz-2-title-font-size: 1.125rem;
    --abs-reader-theme-fz-2-title-font-weight: 600;
    --abs-reader-theme-fz-2-title-line-height: 1.3;
    --abs-reader-theme-fz-2-title-margin-bottom: 0.75rem;
    --abs-reader-theme-fz-2-link-padding: 0.5rem;
    --abs-reader-theme-fz-2-link-radius: 0.375rem;
    --abs-reader-theme-fz-2-link-bg-hover: rgba(127, 127, 127, 0.12);
    --abs-reader-theme-fz-2-link-transition-duration: 150ms;
    --abs-reader-theme-fz-2-label-font-size: 0.95rem;
    --abs-reader-theme-fz-2-label-font-weight: 500;

    /* Variables spécifiques zones 3 et 4 - menus en boutons */
    --abs-reader-theme-fz-3-buttons-spacing: 0.75rem;
    --abs-reader-theme-fz-3-buttons-justify: center;
    --abs-reader-theme-fz-4-buttons-spacing: 0.75rem;
    --abs-reader-theme-fz-4-buttons-justify: center;

    /* Variables spécifiques zone 5 - tab bar mobile */
    --abs-reader-theme-fz-5-nav-align: center;
    --abs-reader-theme-fz-5-nav-align-items: center;
    --abs-reader-theme-fz-5-tab-spacing: 1rem;
    --abs-reader-theme-fz-5-mobile-height: 64px;
    --abs-reader-theme-fz-5-mobile-bg: var(--abs-reader-theme-color-background, #000);
    --abs-reader-theme-fz-5-mobile-z-index: 90;
    --abs-reader-theme-fz-5-mobile-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);

    /* Variables spécifiques zone 6 - mentions légales */
    --abs-reader-theme-fz-6-text-font-size: var(--abs-reader-theme-text-sm, 0.95rem);
    --abs-reader-theme-fz-6-line-margin: 0.5rem;
    --abs-reader-theme-fz-6-links-color: currentColor;
    --abs-reader-theme-fz-6-links-align: center;
    --abs-reader-theme-fz-6-links-gap: 0.75rem;
    --abs-reader-theme-fz-6-links-separator: "";
    --abs-reader-theme-fz-6-links-separator-color: currentColor;
    --abs-reader-theme-fz-6-links-separator-opacity: 0.5;
}


/* =============================================================
   Conteneur principal du footer
   ============================================================= */

.abs-reader-theme-footer {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-block: var(--abs-reader-theme-footer-padding-y);
    padding-inline: var(--abs-reader-theme-footer-padding-x);
    background-color: var(--abs-reader-theme-footer-bg);
    color: var(--abs-reader-theme-footer-text);
    border-top:
        var(--abs-reader-theme-footer-border-top-width)
        solid
        var(--abs-reader-theme-footer-border-top-color);
    display: flex;
    flex-direction: column;
    gap: var(--abs-reader-theme-footer-zone-gap);
}

.abs-reader-theme-footer > * {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--abs-reader-theme-footer-max-width);
    margin-inline: auto;
}


/* =============================================================
   Séparateurs visuels entre zones

   Le séparateur s'affiche sous une zone uniquement quand toutes les
   conditions suivantes sont réunies :

   1. La case Customizer "afficher un séparateur après cette zone" est
      cochée pour cette zone, ce qui pose la classe has-zone-separator
      sur la balise racine de la zone via template-tags-footer.php.

   2. La zone n'est pas la dernière du footer, ce qui est vérifié par
      :not(:last-child). Cela évite d'afficher un trait en bas du footer
      même si l'admin a coché l'option pour la dernière zone visible
      (par exemple zone 6 sans zone 5 affichée derrière).

   Le style est piloté par quatre variables CSS héritées du contexte
   .abs-reader-theme-footer. Une option Customizer spécifique à une zone
   surcharge la variable correspondante uniquement sur cette zone, grâce
   à la spécificité du sélecteur de zone redéclarant la variable. Aucune
   logique conditionnelle PHP n'intervient ici : la cascade des variables
   CSS gère l'ensemble du fallback global → spécifique de manière native.

   L'épaisseur globale par défaut à 0 rend le séparateur invisible tant
   que l'admin ne l'a pas activé explicitement, en cohérence avec le
   comportement de la bordure haute du footer (border-top-width à 0
   par défaut). Le sélecteur > .has-zone-separator restreint la règle
   aux enfants directs du footer pour ne pas affecter accidentellement
   des éléments imbriqués dans les zones qui porteraient la même classe.
   ============================================================= */

.abs-reader-theme-footer > .has-zone-separator:not(:last-child) {
    border-bottom-style: var(--abs-reader-theme-footer-zone-separator-style);
    border-bottom-width: var(--abs-reader-theme-footer-zone-separator-width);
    border-bottom-color: var(--abs-reader-theme-footer-zone-separator-color);
    padding-bottom: var(--abs-reader-theme-footer-zone-separator-spacing);
    margin-bottom: var(--abs-reader-theme-footer-zone-separator-spacing);
}


/* =============================================================
   Comportement sticky bottom (ancrage en bas de la fenêtre)

   Activé via la classe is-sticky posée par PHP sur l'élément <footer>.
   La logique flex sur body est ajoutée par le générateur footer-css.php
   uniquement quand cette option est active, afin de ne pas perturber
   les pages où le sticky n'est pas demandé.
   ============================================================= */

.abs-reader-theme-footer.is-sticky {
    margin-block-start: auto;
}


/* =============================================================
   Zones - base commune avec image de fond et overlay

   La liste explicite des six zones est utilisée plutôt qu'un sélecteur
   d'attribut [class*=...] pour éviter que les styles de fond, d'overlay
   et de positionnement ne s'appliquent aux sous-éléments dont la classe
   contient également la chaîne "abs-reader-theme-footer-zone-".
   ============================================================= */

.abs-reader-theme-footer-zone-1,
.abs-reader-theme-footer-zone-2,
.abs-reader-theme-footer-zone-3,
.abs-reader-theme-footer-zone-4,
.abs-reader-theme-footer-zone-5,
.abs-reader-theme-footer-zone-6 {
    position: relative;
    isolation: isolate;
    background-color: var(--abs-reader-theme-fz-bg);
    color: var(--abs-reader-theme-fz-text);
    background-image: var(--abs-reader-theme-fz-bg-image);
    background-position: var(--abs-reader-theme-fz-bg-position);
    background-repeat: var(--abs-reader-theme-fz-bg-repeat);
    background-size: var(--abs-reader-theme-fz-bg-size);
    padding-block: var(--abs-reader-theme-fz-padding-y);
    padding-inline: var(--abs-reader-theme-fz-padding-x);
    border-radius: var(--abs-reader-theme-fz-radius);
    text-align: var(--abs-reader-theme-fz-content-align);
}

.abs-reader-theme-footer-zone-1::before,
.abs-reader-theme-footer-zone-2::before,
.abs-reader-theme-footer-zone-3::before,
.abs-reader-theme-footer-zone-4::before,
.abs-reader-theme-footer-zone-5::before,
.abs-reader-theme-footer-zone-6::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--abs-reader-theme-fz-overlay-color);
    opacity: var(--abs-reader-theme-fz-overlay-opacity);
    pointer-events: none;
    z-index: 0;
}

.abs-reader-theme-footer-zone-1 > *,
.abs-reader-theme-footer-zone-2 > *,
.abs-reader-theme-footer-zone-3 > *,
.abs-reader-theme-footer-zone-4 > *,
.abs-reader-theme-footer-zone-5 > *,
.abs-reader-theme-footer-zone-6 > * {
    position: relative;
    z-index: 1;
}

.abs-reader-theme-footer-zone-1 a,
.abs-reader-theme-footer-zone-2 a,
.abs-reader-theme-footer-zone-3 a,
.abs-reader-theme-footer-zone-4 a,
.abs-reader-theme-footer-zone-5 a,
.abs-reader-theme-footer-zone-6 a {
    color: var(--abs-reader-theme-fz-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.abs-reader-theme-footer-zone-1 a:hover,
.abs-reader-theme-footer-zone-1 a:focus-visible,
.abs-reader-theme-footer-zone-2 a:hover,
.abs-reader-theme-footer-zone-2 a:focus-visible,
.abs-reader-theme-footer-zone-3 a:hover,
.abs-reader-theme-footer-zone-3 a:focus-visible,
.abs-reader-theme-footer-zone-4 a:hover,
.abs-reader-theme-footer-zone-4 a:focus-visible,
.abs-reader-theme-footer-zone-5 a:hover,
.abs-reader-theme-footer-zone-5 a:focus-visible,
.abs-reader-theme-footer-zone-6 a:hover,
.abs-reader-theme-footer-zone-6 a:focus-visible {
    color: var(--abs-reader-theme-fz-link-hover);
}


/* =============================================================
   Focus visible (accessibilité)
   ============================================================= */

.abs-reader-theme-footer :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}


/* =============================================================
   Zone 1 - Widgets multi-colonnes

   Affichage en grid auto-fit qui adapte automatiquement le nombre de
   colonnes affichées à la largeur disponible. Les classes modificatrices
   abs-reader-theme-footer-widgets-columns-N posées par PHP permettent
   d'imposer un nombre de colonnes maximum (1, 2 ou 3) à partir d'un
   certain breakpoint.
   ============================================================= */

.abs-reader-theme-footer-widgets {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--abs-reader-theme-fz-1-columns-gap);
    align-items: var(--abs-reader-theme-fz-1-columns-valign);
}

@media (min-width: 48em) {

    .abs-reader-theme-footer-widgets {
        grid-template-columns: repeat(
            auto-fit,
            minmax(var(--abs-reader-theme-fz-1-columns-min), 1fr)
        );
    }

    .abs-reader-theme-footer-widgets-columns-1 {
        grid-template-columns: 1fr;
    }

    .abs-reader-theme-footer-widgets-columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .abs-reader-theme-footer-widgets-columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.abs-reader-theme-footer-widget-area {
    min-width: 0;
}

.abs-reader-theme-footer-widget-area .abs-reader-theme-widget {
    margin-block-end: var(--abs-reader-theme-fz-1-widget-spacing);
}

.abs-reader-theme-footer-widget-area .abs-reader-theme-widget:last-child {
    margin-block-end: 0;
}

.abs-reader-theme-footer-widget-area .abs-reader-theme-widget-title {
    margin: 0 0 var(--abs-reader-theme-fz-1-widget-title-margin-bottom);
    font-size: var(--abs-reader-theme-fz-1-widget-title-font-size);
    font-weight: var(--abs-reader-theme-fz-1-widget-title-font-weight);
    text-align: var(--abs-reader-theme-fz-1-widget-title-align);
    line-height: 1.3;
}


/* =============================================================
   Zone 2 - Plateformes sociales

   Trois styles d'affichage gérés via les classes modificatrices :
     abs-reader-theme-footer-platforms-icon       icône seule
     abs-reader-theme-footer-platforms-icon-label icône + libellé
     abs-reader-theme-footer-platforms-label      libellé seul

   Le titre de section est rendu en h2 sémantique par le PHP, avec un
   style discret pour préserver l'équilibre visuel des icônes.
   ============================================================= */

.abs-reader-theme-footer-platforms {
    --abs-reader-theme-fz-content-align: var(--abs-reader-theme-fz-2-icons-align);
}

.abs-reader-theme-footer-zone-2-title {
    margin: 0 0 var(--abs-reader-theme-fz-2-title-margin-bottom);
    font-size: var(--abs-reader-theme-fz-2-title-font-size);
    font-weight: var(--abs-reader-theme-fz-2-title-font-weight);
    line-height: var(--abs-reader-theme-fz-2-title-line-height);
}

.abs-reader-theme-footer-zone-2-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--abs-reader-theme-fz-2-icons-align);
    align-items: center;
    gap: var(--abs-reader-theme-fz-2-icons-spacing);
}

.abs-reader-theme-footer-zone-2-item {
    margin: 0;
    padding: 0;
}

.abs-reader-theme-footer-zone-2-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--abs-reader-theme-fz-2-link-padding);
    border-radius: var(--abs-reader-theme-fz-2-link-radius);
    text-decoration: none;
    line-height: 1;
    transition: background-color var(--abs-reader-theme-fz-2-link-transition-duration) ease;
}

.abs-reader-theme-footer-zone-2-link:hover,
.abs-reader-theme-footer-zone-2-link:focus-visible {
    background-color: var(--abs-reader-theme-fz-2-link-bg-hover);
}

.abs-reader-theme-footer-zone-2-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--abs-reader-theme-fz-2-icon-size);
    height: var(--abs-reader-theme-fz-2-icon-size);
    flex-shrink: 0;
}

.abs-reader-theme-footer-zone-2-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.abs-reader-theme-footer-zone-2-label {
    font-size: var(--abs-reader-theme-fz-2-label-font-size);
    font-weight: var(--abs-reader-theme-fz-2-label-font-weight);
}

/* Style "icône seule" : libellé masqué visuellement, lu par les lecteurs d'écran. */
.abs-reader-theme-footer-platforms-icon .abs-reader-theme-footer-zone-2-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Style "icône et libellé" : comportement par défaut, icône et libellé tous deux
   affichés. La classe abs-reader-theme-footer-platforms-icon-label est posée par
   PHP mais ne reçoit aucune règle ici car aucune modification du rendu par défaut
   n'est nécessaire. La classe est exposée comme point d'ancrage stable pour les
   designs tiers qui souhaiteraient surcharger ce style spécifique. */

/* Style "libellé seul" : icône masquée. */
.abs-reader-theme-footer-platforms-label .abs-reader-theme-footer-zone-2-icon {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .abs-reader-theme-footer-zone-2-link {
        transition: none;
    }
}


/* =============================================================
   Zones 3 et 4 - Menus en boutons

   Le rendu intrinsèque des boutons (Walker_Nav_Menu_Buttons) est défini
   dans navigation.css. Ici, seul le positionnement contextuel des boutons
   dans la zone et la surcharge contextuelle de l'espacement.

   Les classes abs-reader-theme-footer-menu (posée par PHP sur le div
   wrapper des zones 3 et 4) et abs-reader-theme-footer-tablist (posée
   sur celui de la zone 5) ne reçoivent volontairement aucun style direct
   ici. Elles sont exposées comme hooks de surcharge pour les designs
   tiers et les ajustements CSS personnalisés via le Customizer.

   Style modificateur is-button-style-{value} :
     Le template-tag pose sur la balise racine de chaque zone l'une des
     quatre classes is-button-style-{text|filled|outline|ghost} selon
     l'option Customizer correspondante (OPTION_ZONE_3_BUTTON_STYLE ou
     OPTION_ZONE_4_BUTTON_STYLE). Le rendu visuel effectif est piloté par
     les règles définies dans navigation.css qui surchargent les variables
     CSS racines des boutons via la spécificité du sélecteur descendant.
     Aucune règle correspondante n'est requise dans ce fichier.

   Surcharges granulaires des variables CSS de bouton par zone :
     footer-css.php émet sur les sélecteurs .abs-reader-theme-footer-zone-3
     et .abs-reader-theme-footer-zone-4 les redéfinitions des 18 variables
     --abs-reader-theme-nav-button-* exposées par navigation.css, en
     fonction des options Customizer renseignées. La cascade native fait
     que ces redéfinitions l'emportent sur les valeurs racines de
     navigation.css uniquement pour les boutons descendants de la zone
     correspondante, sans propagation involontaire au reste du site.
   ============================================================= */

.abs-reader-theme-footer-zone-3,
.abs-reader-theme-footer-zone-4 {
    display: flex;
    align-items: center;
}

.abs-reader-theme-footer-zone-3 {
    justify-content: var(--abs-reader-theme-fz-3-buttons-justify);
}

.abs-reader-theme-footer-zone-4 {
    justify-content: var(--abs-reader-theme-fz-4-buttons-justify);
}

.abs-reader-theme-footer-zone-3 .abs-reader-theme-nav ul,
.abs-reader-theme-footer-zone-3 [class^="abs-reader-theme-nav-"] ul,
.abs-reader-theme-footer-zone-3 .abs-reader-theme-menu,
.abs-reader-theme-footer-zone-3 [class^="abs-reader-theme-menu-"] {
    gap: var(--abs-reader-theme-fz-3-buttons-spacing);
}

.abs-reader-theme-footer-zone-4 .abs-reader-theme-nav ul,
.abs-reader-theme-footer-zone-4 [class^="abs-reader-theme-nav-"] ul,
.abs-reader-theme-footer-zone-4 .abs-reader-theme-menu,
.abs-reader-theme-footer-zone-4 [class^="abs-reader-theme-menu-"] {
    gap: var(--abs-reader-theme-fz-4-buttons-spacing);
}


/* =============================================================
   Zone 5 - Tab bar style application mobile

   Sur grand écran, comportement identique à une barre de navigation
   classique (le rendu intrinsèque des onglets est dans navigation.css,
   ici seul le positionnement dans la zone).

   Sur mobile, si l'option abs_reader_theme_footer_zone5_mobile_fixed
   est activée, la zone reçoit la classe is-mobile-fixed posée par
   template-tags-footer.php sur la balise racine et se transforme en
   barre fixée en bas de l'écran à la manière d'une bottom navigation
   native.

   Style modificateur is-tab-style-{value} :
     Le template-tag pose sur la balise racine de la zone 5 l'une des
     quatre classes is-tab-style-{text|filled|outline|ghost} selon
     l'option OPTION_ZONE_5_TAB_STYLE du Customizer. Le rendu visuel
     effectif est piloté par les règles définies dans navigation.css
     qui surchargent les variables CSS racines des onglets via la
     spécificité du sélecteur descendant. Aucune règle correspondante
     n'est requise dans ce fichier.

   Surcharges granulaires des variables CSS d'onglet et d'indicateur :
     footer-css.php émet sur le sélecteur .abs-reader-theme-footer-zone-5
     les redéfinitions des 11 variables --abs-reader-theme-tab-* et des
     7 variables --abs-reader-theme-tab-indicator-* exposées par
     navigation.css, en fonction des options Customizer renseignées.
     La cascade native fait que ces redéfinitions l'emportent sur les
     valeurs racines de navigation.css uniquement pour les onglets
     descendants de la zone 5, sans propagation involontaire au reste
     du site.
   ============================================================= */

.abs-reader-theme-footer-zone-5 {
    display: flex;
    justify-content: var(--abs-reader-theme-fz-5-nav-align);
    align-items: var(--abs-reader-theme-fz-5-nav-align-items);
}

.abs-reader-theme-footer-zone-5 .abs-reader-theme-tablist,
.abs-reader-theme-footer-zone-5 [class^="abs-reader-theme-tablist-"] {
    gap: var(--abs-reader-theme-fz-5-tab-spacing);
}

/* Mode tab bar mobile fixée en bas de l'écran */
@media (max-width: 47.99em) {

    .abs-reader-theme-footer-zone-5.is-mobile-fixed {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--abs-reader-theme-fz-5-mobile-z-index);
        min-height: var(--abs-reader-theme-fz-5-mobile-height);
        background-color: var(--abs-reader-theme-fz-5-mobile-bg);
        box-shadow: var(--abs-reader-theme-fz-5-mobile-shadow);
        padding-block: 0.5rem;
        max-width: none;
        width: 100%;
        margin-inline: 0;
    }

    .abs-reader-theme-footer-zone-5.is-mobile-fixed .abs-reader-theme-tablist,
    .abs-reader-theme-footer-zone-5.is-mobile-fixed [class^="abs-reader-theme-tablist-"] {
        width: 100%;
        justify-content: space-around;
        flex-wrap: nowrap;
    }

    /* Réserve un espace en bas de la page égal à la hauteur de la tab bar
       fixée, posée sur body via la classe modificatrice ajoutée par le
       générateur inline pour éviter que le contenu soit occulté. */
    body.abs-reader-theme-has-mobile-tabbar {
        padding-block-end: var(--abs-reader-theme-fz-5-mobile-height);
    }
}


/* =============================================================
   Zone 6 - Mentions légales

   Bloc composé d'au plus deux lignes textuelles et d'une liste optionnelle
   de liens légaux affichée entre les deux lignes. Le séparateur visuel
   entre les liens est généré via le pseudo-élément ::after et la variable
   --abs-reader-theme-fz-6-links-separator.
   ============================================================= */

.abs-reader-theme-footer-legal {
    --abs-reader-theme-fz-content-align: center;
    font-size: var(--abs-reader-theme-fz-6-text-font-size);
    line-height: 1.5;
}

.abs-reader-theme-footer-legal-line {
    margin: var(--abs-reader-theme-fz-6-line-margin) 0;
}

.abs-reader-theme-footer-legal-line:first-child {
    margin-block-start: 0;
}

.abs-reader-theme-footer-legal-line:last-child {
    margin-block-end: 0;
}

/* Modificateurs de taille de texte du bloc légal */
.abs-reader-theme-footer-legal.is-size-xs {
    --abs-reader-theme-fz-6-text-font-size: var(--abs-reader-theme-text-xs, 0.75rem);
}

.abs-reader-theme-footer-legal.is-size-sm {
    --abs-reader-theme-fz-6-text-font-size: var(--abs-reader-theme-text-sm, 0.875rem);
}

.abs-reader-theme-footer-legal.is-size-base {
    --abs-reader-theme-fz-6-text-font-size: var(--abs-reader-theme-text-base, 1rem);
}

.abs-reader-theme-footer-legal.is-size-lg {
    --abs-reader-theme-fz-6-text-font-size: var(--abs-reader-theme-text-lg, 1.125rem);
}


/* Liste de liens légaux */
.abs-reader-theme-footer-legal-links {
    margin: var(--abs-reader-theme-fz-6-line-margin) 0;
}

.abs-reader-theme-footer-legal-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--abs-reader-theme-fz-6-links-align);
    align-items: center;
    gap: 0 var(--abs-reader-theme-fz-6-links-gap);
}

.abs-reader-theme-footer-legal-links li {
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
}

.abs-reader-theme-footer-legal-links a {
    color: var(--abs-reader-theme-fz-6-links-color);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* Séparateur visuel entre les items, généré par pseudo-élément.
   Le contenu du séparateur est piloté par --abs-reader-theme-fz-6-links-separator
   et redéfini par les modificateurs is-separator-* posés par le PHP. */
.abs-reader-theme-footer-legal-links li:not(:last-child)::after {
    content: var(--abs-reader-theme-fz-6-links-separator);
    margin-inline-start: var(--abs-reader-theme-fz-6-links-gap);
    color: var(--abs-reader-theme-fz-6-links-separator-color);
    opacity: var(--abs-reader-theme-fz-6-links-separator-opacity);
    pointer-events: none;
    user-select: none;
}

.abs-reader-theme-footer-legal-links.is-separator-pipe {
    --abs-reader-theme-fz-6-links-separator: "|";
}

.abs-reader-theme-footer-legal-links.is-separator-bullet {
    --abs-reader-theme-fz-6-links-separator: "\00B7";
}

.abs-reader-theme-footer-legal-links.is-separator-none {
    --abs-reader-theme-fz-6-links-separator: "";
}

.abs-reader-theme-footer-legal-links.is-separator-none li:not(:last-child)::after {
    margin-inline-start: 0;
}


/* =============================================================
   Sticky bottom du footer entier - logique flex sur body

   Quand l'option abs_reader_theme_footer_sticky est activée, le générateur
   footer-css.php pose la classe abs-reader-theme-has-footer-sticky sur le
   body et transforme ce dernier en conteneur flex en colonne. Cela permet
   au footer marqué is-sticky de pousser vers le bas via margin-top: auto.
   ============================================================= */

body.abs-reader-theme-has-footer-sticky {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}


/* =============================================================
   Adaptations tablette et desktop
   ============================================================= */

@media (min-width: 48em) {

    .abs-reader-theme-footer {
        padding-inline: 1.5rem;
    }
}

@media (min-width: 64em) {

    .abs-reader-theme-footer {
        padding-inline: 2rem;
    }
}
