/* @layer-wrap:site.dispositions */
@layer site.dispositions {
/*
 * Dispositions du pied de page — réglages « Pied de page sur ordinateur / sur mobile » (/setup/theme).
 * Attributs posés par portfolios_matrix_footer_attrs() sur #footer et #legal :
 *   data-footer-desktop : theme | columns | stacked | inline | signature | card | minimal
 *   data-footer-mobile  : theme | stacked | grid | compact | card | minimal
 *
 * Règle : la disposition décide de l'arrangement (grille, ligne, empilement) et des blocs affichés ;
 * le thème garde son habillage (couleurs, filets, polices, tuiles, grand nom, fond et flou).
 * « theme » n'a aucune règle ici : c'est la section « Selon le thème » de themes/<slug>/footer.css
 * (ou la structure de themes/basic/footer.css pour les thèmes Basic).
 *
 * Alignement : variables --pf-align-justify / --pf-align-text (themes/basic/align.css), jamais de valeur en dur.
 * Priorité : chaque règle commence par « :root #portfolio_page #footer[data-footer-…] », un cran au-dessus de la
 * section « Selon le thème » des thèmes (#portfolio_page #footer[data-matrix=…]) qu'elle remplace. Provisoire :
 * remplacé par les couches CSS (docs/llm/plans/plan-header-footer.md, D4).
 * Écart entre blocs : --pf-footer-gap (les thèmes à tuiles le règlent dans leur footer.css / chrome.css ; repli 2rem 3rem).
 * L'aperçu de l'éditeur est une iframe à la vraie largeur : les @media s'y appliquent comme sur le site.
 */

/* --pf-footer-gap : écart posé par le thème (couche antérieure) ou par l'option de densité (footer-options.css) ;
   sinon 2rem 3rem, valeur de repli de chaque lecture. */

/* ==========================================================================
   Ordinateur (≥ 1101 px)
   ========================================================================== */
@media (min-width: 1101px) {

    /* --- Colonnes et Grande signature : présentation, puis trois colonnes (À propos, Portfolio, Réseaux) --- */
    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-main {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.7fr);
        gap: var(--pf-footer-gap, 2rem 3rem);
        /* Blocs de même hauteur : les tuiles (Bento, Brutal) restent alignées. */
        align-items: stretch;
    }

    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-pages {
        display: grid;
        /* Réseaux masqués : leur colonne disparaît (--pf-footer-no-socials, footer-options.css). */
        grid-template-columns: repeat(calc(3 - var(--pf-footer-no-socials, 0)), minmax(0, 1fr));
        gap: var(--pf-footer-gap, 2rem 3rem);
        grid-column: auto;
    }

    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) :is(#footer-about, #footer-pages > *) {
        grid-column: auto;
    }

    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) #footer-pages > ul {
        display: block;
    }

    /* Colonnes, Grande signature, Empilée : description affichée (et titres des groupes pour les colonnes),
       même si le thème les masque dans sa propre disposition (Galerie, Cinéma). */
    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"], [data-footer-desktop="stacked"]) #footer-about p {
        display: block;
    }

    :root #portfolio_page #footer:is([data-footer-desktop="columns"], [data-footer-desktop="signature"]) .footer-heading-item {
        display: flex;
    }

    /* Grande signature : le nom du site en très grand, sous les colonnes. Les thèmes qui dessinent le leur
       (data-signature="own" : Suisse, Bento, Cinéma, Cinétique) gardent sa typographie. :where() garde la priorité
       des autres dispositions : « Blocs affichés » (footer-options.css, chargé après) peut masquer le grand nom. */
    :root #portfolio_page #footer[data-footer-desktop="signature"] {
        display: flex;
        flex-direction: column;
    }

    :root #portfolio_page #footer[data-footer-desktop="signature"] #footer-main {
        order: 0;
        width: 100%;
    }

    :root #portfolio_page #footer[data-footer-desktop="signature"] .footer-signature {
        order: 99;
    }

    :root #portfolio_page #footer[data-footer-desktop="signature"]:where(:not([data-signature="own"])) .footer-signature {
        position: relative;
        z-index: 1;
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: var(--layout-width-wide);
        margin: var(--layout-space-y-md, 2rem) auto 0;
        overflow: hidden;
        font-size: clamp(3rem, 11vw, 10rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 0.9;
        /* Jamais coupé : un nom long passe à la ligne entre les mots (lignes équilibrées), un mot de 12 lettres
           et plus est coupé avec un trait d'union. */
        white-space: normal;
        overflow-wrap: break-word;
        hyphens: auto;
        hyphenate-limit-chars: 12 5 5;
        text-wrap: balance;
        color: var(--portfolios-nav-text-color, currentColor);
    }

    :root #portfolio_page #footer[data-footer-desktop="signature"]:where(:not([data-signature="own"])) .footer-signature span + span {
        display: none;
    }

    /* --- Empilée : blocs les uns sous les autres, liens à plat, titres de groupes masqués --- */
    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-main {
        display: flex;
        flex-direction: column;
        align-items: var(--pf-align-justify);
        gap: 1.75rem;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-about {
        max-width: 40rem;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: var(--pf-align-justify);
        gap: 0.75rem 2.5rem;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: var(--pf-align-justify);
        gap: 0.5rem 1.5rem;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages > ul > li {
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-pages .footer-heading-item {
        display: none;
    }

    :root #portfolio_page #footer[data-footer-desktop="stacked"] #footer-social {
        flex-basis: 100%;
    }

    /* --- En ligne : une bande — nom (et contact) au début, réseaux à la fin ; les liens à plat se placent
           selon l'alignement : contre le nom, centrés entre les deux, ou contre les réseaux. --- */
    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 2.5rem;
        text-align: left;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-about {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 1.25rem;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-about :is(p, .nav__list, .footer-heading, .footer-contact-button) {
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] :is(#footer-about p, #footer-pages .footer-heading-item, .footer-signature) {
        display: none;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem 2rem;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem 1.25rem;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-pages > ul > li {
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-social {
        margin-left: auto;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"]:is(.nav-center, .nav-right) #about-pages {
        margin-left: auto;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"].nav-right #footer-social {
        margin-left: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="inline"] #footer-main > .arktefakt-frame {
        flex-basis: 100%;
    }

    /* --- Minimale : nom et réseaux sur une ligne, listes de pages masquées (les mentions suivent dans #legal) --- */
    :root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-main {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: var(--pf-align-justify);
        gap: 1rem 2.5rem;
    }

    :root #portfolio_page #footer[data-footer-desktop="minimal"] :is(#footer-about p, .footer-contact-button, #footer-pages > ul, #footer-social .nav__list, .footer-signature) {
        display: none;
    }

    :root #portfolio_page #footer[data-footer-desktop="minimal"] :is(#footer-about, #footer-about .nav__list, #footer-about .footer-heading) {
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-pages {
        display: flex;
        flex: 0 1 auto;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-desktop="minimal"] #footer-main > .arktefakt-frame {
        flex-basis: 100%;
    }

    /* --- En carte : le pied de page dans un panneau arrondi détaché des bords (comme l'en-tête « En bulle ») ;
           arrangement du thème gardé. Verre et Bento, qui dessinent déjà leurs blocs (data-island="own"),
           gardent leur rendu. Contour et ombre : ceux des menus flottants du thème. --- */
    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"])::before,
    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) .footer-glass {
        inset: var(--pf-island-gap, 0.75rem);
        border-radius: max(var(--pf-radius, 0px), 1rem);
    }

    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"])::before {
        border: var(--pf-float-edge, 0 solid transparent);
        box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
        /* Panneau : fond et flou de la pilule (nav-background.css), couleur pleine même sur un fondu (Cinéma). */
        background: var(--pf-island-bg);
    }

    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) .footer-glass {
        -webkit-backdrop-filter: var(--pf-island-blur);
        backdrop-filter: var(--pf-island-blur);
    }

    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) {
        /* Pas de filet au-dessus de la carte : variable lue par structure/layout/theme-advanced-colors.css. */
        --pf-footer-rule: 0 solid transparent;
        border-top: 0;
        padding-block: calc(var(--pf-island-gap, 0.75rem) + 2rem);
    }

    :root #portfolio_page #footer[data-footer-desktop="card"]:not([data-island="own"]) #footer-main {
        box-sizing: border-box;
        padding-inline: 1.5rem;
    }
}

/* ==========================================================================
   Mobile (≤ 1100 px)
   ========================================================================== */
@media (max-width: 1100px) {

    /* Empilée et Deux colonnes : description et titres des groupes affichés (voir Colonnes, ordinateur). */
    :root #portfolio_page #footer:is([data-footer-mobile="stacked"], [data-footer-mobile="grid"]) #footer-about p {
        display: block;
    }

    :root #portfolio_page #footer:is([data-footer-mobile="stacked"], [data-footer-mobile="grid"]) .footer-heading-item {
        display: flex;
    }

    /* --- Empilée : une colonne --- */
    :root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    :root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-pages {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-mobile="stacked"] :is(#footer-about, #footer-pages > *) {
        grid-column: auto;
        margin-bottom: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="stacked"] #footer-pages > ul {
        display: block;
    }

    /* --- Deux colonnes : « À propos » et « Portfolio » côte à côte, présentation et réseaux sur toute la largeur --- */
    :root #portfolio_page #footer[data-footer-mobile="grid"] #footer-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    :root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages > * {
        grid-column: auto;
        margin-bottom: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="grid"] #footer-pages > ul {
        display: block;
    }

    :root #portfolio_page #footer[data-footer-mobile="grid"] #footer-social {
        grid-column: 1 / -1;
    }

    /* --- Compacte : liens à plat (simple espacement : un séparateur se retrouverait en début de ligne au retour
           à la ligne), description et titres de groupes masqués --- */
    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-main {
        display: flex;
        flex-direction: column;
        align-items: var(--pf-align-justify);
        gap: 1.25rem;
        text-align: var(--pf-align-text);
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] :is(#footer-about p, #footer-pages .footer-heading-item, #footer-social .nav__list) {
        display: none;
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-about {
        display: flex;
        flex-direction: column;
        align-items: var(--pf-align-justify);
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages {
        display: flex;
        flex-direction: column;
        align-items: var(--pf-align-justify);
        gap: 0.6rem;
        grid-column: auto;
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: var(--pf-align-justify);
        gap: 0.4rem 1.1rem;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-pages > ul > li {
        align-items: center;
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="compact"] #footer-social {
        margin-top: 0.4rem;
    }

    /* --- Minimale : nom et réseaux seulement (les mentions suivent dans #legal) --- */
    :root #portfolio_page #footer[data-footer-mobile="minimal"] #footer-main {
        display: flex;
        flex-direction: column;
        align-items: var(--pf-align-justify);
        gap: 1rem;
        text-align: var(--pf-align-text);
    }

    :root #portfolio_page #footer[data-footer-mobile="minimal"] :is(#footer-about p, .footer-contact-button, #footer-pages > ul, #footer-social .nav__list, .footer-signature) {
        display: none;
    }

    :root #portfolio_page #footer[data-footer-mobile="minimal"] :is(#footer-about, #footer-about .nav__list, #footer-about .footer-heading) {
        margin: 0;
    }

    :root #portfolio_page #footer[data-footer-mobile="minimal"] #footer-pages {
        display: flex;
        justify-content: var(--pf-align-justify);
        grid-column: auto;
    }

    /* --- En carte : panneau arrondi détaché des bords (comme l'en-tête « Flottante ») ; arrangement du thème --- */
    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"])::before,
    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) .footer-glass {
        inset: 0.6rem;
        border-radius: var(--pf-radius);
    }

    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"])::before {
        border: var(--pf-float-edge, 0 solid transparent);
        box-shadow: var(--pf-float-shadow, var(--pf-panel-shadow));
        /* Panneau : fond et flou de la pilule (nav-background.css), couleur pleine même sur un fondu (Cinéma). */
        background: var(--pf-island-bg);
    }

    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) .footer-glass {
        -webkit-backdrop-filter: var(--pf-island-blur);
        backdrop-filter: var(--pf-island-blur);
    }

    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) {
        --pf-footer-rule: 0 solid transparent;
        border-top: 0;
        padding-block: 2.25rem;
    }

    :root #portfolio_page #footer[data-footer-mobile="card"]:not([data-island="own"]) #footer-main {
        box-sizing: border-box;
        padding-inline: 1rem;
    }
}
}