/* @layer-wrap:site.zones */
@layer site.zones {
/* Version: 14-10-2026 — structure et alignement du pied de page (plan-header-footer.md, lot F1) */
/*
 * Pied de page : structure commune à tous les thèmes (sans habillage) et alignement.
 *   - Dispositions ordinateur / mobile : footer-layouts.css ; réglages fins (blocs, espacement, séparation) : footer-options.css.
 *   - Fond et flou (partagés avec le header) : nav-background.css.
 *   - Habillage d'un thème : themes/<slug>/footer.css (variables partagées avec le header : themes/<slug>/chrome.css).
 *   - Apparence des liens, boutons, réseaux : links.css, buttons.css, socials.css.
 * Balisage : public/includes/structure/footer.php (#footer : classe .nav + .nav-left / .nav-center / .nav-right ;
 * #legal : mentions légales, même classe d'alignement).
 */

/* Grand nom (signature) : masqué par défaut ; les dispositions et les thèmes qui l'affichent le rallument. */
#portfolio_page #footer .footer-signature {
    display: none;
}

/* fonts.css fixe la taille des span en !important : la signature suit son conteneur. */

#portfolio_page footer {
    position: relative;
}

/* ==========================================================================
   1. Alignement — réglage « Alignement du pied de page » (footer_align_custom)
   Traduit une seule fois en deux variables (align.css, commun au header), lues par tous les éléments du pied de page et des mentions,
   et par les dispositions (footer-layouts.css) et les thèmes qui empilent ou centrent des blocs.
   ========================================================================== */

/* Variables --pf-align-justify / --pf-align-text : themes/basic/align.css (partagées avec le header). */

/* Blocs et listes : texte et rangées flex (titres en inline-block, liens en pastille, icônes des réseaux). */
#portfolio_page #footer.nav :is(#footer-main, #footer-about, #footer-pages, #footer-pages > ul, #footer-social, .footer-signature) {
    text-align: var(--pf-align-text);
}

#portfolio_page #footer.nav :is(#footer-main, #footer-pages, #footer-pages > ul, #footer-pages li, .footer-heading-item, #footer-social, #footer-social .social-medias, .footer-signature) {
    justify-content: var(--pf-align-justify);
}

/* Présentation : le texte saisi dans l'éditeur (TinyMCE) porte souvent un text-align en ligne,
   seul un !important le ramène sur l'alignement du pied de page. */

#portfolio_page #legal ul {
    justify-content: var(--pf-align-justify);
    text-align: var(--pf-align-text);
}

/* ==========================================================================
   2. Structure
   ========================================================================== */

/* Lignes de liens en flex : les liens inline-block (pastille / trait, links.css) ne laissent
   pas d'espace de ligne sous eux, et l'alignement suit justify-content. */
#portfolio_page #footer .nav__list > li {
    display: flex;
}

#portfolio_page #footer-pages > ul > li:not(.footer-heading-item) {
    /* Réglage « Espacement » : footer-options.css. */
    margin-bottom: var(--pf-footer-link-gap, 15px);
    align-items: flex-start;
}

#portfolio_page #footer #footer-social .social-medias {
    gap: 10px;
}

#portfolio_page #footer #footer-social .social-medias li {
    margin: 0;
}

/* Grille de pages (pf-cols-3 pf-cols-sm-2) à deux colonnes sur mobile : les réseaux, troisième bloc,
   prennent toute la largeur au lieu d'une demi-colonne. */
@media (max-width: 1100px) {
    #portfolio_page #footer-pages.pf-cols-sm-2 > #footer-social {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   3. Mentions légales (#legal) : petite ligne de liens texte (la liste n'est pas un menu : legal__list)
   ========================================================================== */

#portfolio_page #legal {
    display: flex;
    position: relative;
}

#portfolio_page #legal ul {
    display: flex;
    flex-wrap: wrap;
    /* Écart par gap (pas de marge à droite des li) : l'alignement centré / droite tombe juste. */
    gap: 2px 15px;
}

#portfolio_page #legal ul li {
    margin: 0;
}

/* Taille volontairement petite et indépendante des réglages typo / nav du thème (fonts.css applique
   --portfolios-nav-font-size au header et au pied de page). */

/* Liens texte simples, couleur du texte du thème utilisateur. */
#portfolio_page #legal a {
    color: var(--portfolios-text-main-color);
    text-decoration: none;
    text-underline-offset: 0.15em;
}

#portfolio_page #legal a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--portfolios-text-main-color) 45%, transparent);
    outline-offset: 2px;
}

/* #visitor_mode : styles dans structure/overlay/visitor-mode.css (chargé en mode plein écran) */
}

/* Déclarations imposées (D6, plan-elements-contenu.md § 6 bis) : couche « zones-imposees », après le thème, les
   dispositions et les pages, avant les réglages et le sur-mesure. Un thème ne les réécrit pas : il pose les
   variables d'accroche qu'elles lisent. Second bloc de couche : wrap.php --unwrap ne le retire pas. */
@layer site.zones-imposees {
#portfolio_page #footer .footer-signature span {
    font-size: inherit;
    line-height: inherit;
}

#portfolio_page #footer.nav #footer-about :is(a.footer-heading, p, div, span, li) {
    text-align: var(--pf-align-text);
}

#portfolio_page footer#legal,
#portfolio_page footer#legal :is(ul, li, a) {
    font-size: 0.6875rem;
    line-height: 1.35;
}
}