/* === 3 LIGNES PRÉCÉDENTES === */
/* ==========================================================
   PANNEAU DE CONFIGURATION MANUELLE (BLOCKMASTER FOOTER)
   ========================================================== */

/* === BLOC À INSÉRER (REMPLACE LE BLOC :root EXISTANT) === */
:root {
    /* --- Hauteurs et Géométrie de la Barre (Bottom-Up) --- */
    --footer-height-base: 70px;      /* [PILOTAGE] Case principale tout en bas */
    --footer-height-extension: 65px; /* [PILOTAGE] Case mobile qui s'empile au-dessus */
    
    --footer-side-padding: 30px;     /* [PILOTAGE] Marges latérales */



/* --- NOUVEAU : Ancrages Absolus (Point Zéro par le plancher) --- */

/* --- NOUVEAU : Ancrages Absolus (Point Zéro par le plafond) --- */
    --legal-offset-y: 10px;    /* [PILOTAGE] Décalage depuis le haut (Y) du bloc légal */
    --legal-offset-x: 0px;     /* [PILOTAGE] Marge gauche (X) du bloc légal */
    
    --contact-offset-y: 9px;  /* [PILOTAGE] Décalage depuis le haut (Y) du bloc contact */
    --contact-offset-x: 0px;   /* [PILOTAGE] Marge droite (X) du bloc contact (0 = contre le châssis) */
/* === FIN DU BLOC À INSÉRER === */




    /* --- Gestion de l'espace et de l'environnement --- */
    --page-bottom-buffer: 120px;     /* [PILOTAGE] Hauteur totale de la zone de vide sous le texte */
    --host-bottom-padding: -60px;    /* [PILOTAGE] Marge négative annulant le plancher (padding) du site */

    /* --- Design et Couleurs --- */
    --footer-bg-color: #f2eee1;      /* Test visuel (Vert) */
    --footer-bg-opacity: 0.5;
    --footer-text-color: #000000;
    --footer-font-size: 0.9rem;
    
    /* --- Pilotage Ligne 1 (Toit de la case de base) --- */
    --footer-line1-thickness: 2px;   /* [PILOTAGE] Épaisseur de production */
    --footer-line1-color: #0e0e0d;
    --footer-line1-opacity: 1;
    --footer-line1-margin-side: 30px;

    /* --- Pilotage Ligne 2 (Toit de la case d'extension sur mobile) --- */
    --footer-line2-thickness: 2px;   /* [PILOTAGE] Épaisseur de production */
    --footer-line2-color: #0e0e0d;
    --footer-line2-opacity: 1;
    --footer-line2-margin-side: 30px;
}
/* === FIN DU BLOC À INSÉRER === */
/* === 3 LIGNES PRÉCÉDENTES === */
/* ==========================================================
   MOTEUR PHYSIQUE GLOBAL (Comportement natif, Miroir Header)
   ========================================================== */

/* === BLOC À INSÉRER (REMPLACE L'EXISTANT) === */
/* 1. Pilote du point d'ancrage (Matérialise le buffer et absorbe le plancher) */
#footer-placeholder {
    align-self: stretch;
    margin-left: -20px;
    margin-right: -20px;
    height: var(--page-bottom-buffer); /* Crée la hauteur totale fixe depuis le bas du texte */
    margin-bottom: var(--host-bottom-padding); /* Tire vers le bas pour annuler les 60px du conteneur */
    position: relative; /* Devient le référentiel spatial pour l'ancrage bas */
    flex-shrink: 0; /* Règle de blindage : interdit la déformation de l'espace tampon */
}

/* 2. Conteneur visuel du Footer (Ancré au plancher, se déploie vers le haut) */
.bottom-footer {
    width: 100%;
    position: absolute; /* S'arrache du flux pour se fixer dans le placeholder */
    bottom: 0; /* Ancrage absolu sur la ligne de fond */
    left: 0;
    z-index: 1000;
    background-color: color-mix(in srgb, var(--footer-bg-color) calc(var(--footer-bg-opacity) * 100%), transparent);
    box-sizing: border-box;
}
/* === FIN DU BLOC À INSÉRER === */

/* === 3 LIGNES SUIVANTES === */

/* ==========================================================
   LIGNES DE SÉPARATION RATTACHÉES AUX CHÂSSIS DU FOOTER
   ========================================================== */

/* Sur PC, Ligne 1 appartient directement au châssis principal */
.main-footer {
    position: relative;
}

.main-footer::before {
    content: "";
    position: absolute;
    top: var(--footer-separator-pixel-snap-y, 0px);
    left: var(--footer-line1-margin-side);
    right: var(--footer-line1-margin-side);
    height: var(--footer-line1-thickness);
    background-color: color-mix(
        in srgb,
        var(--footer-line1-color) calc(var(--footer-line1-opacity) * 100%),
        transparent
    );
    z-index: 10;
    pointer-events: none;
}

/* Conteneur principal */
.main-footer {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column; 
}


/* ==========================================================
   COMPOSANT ICÔNES DU BLOC CONTACT
   ========================================================== */

/* Pilotage local commun aux deux icônes */
.footer-content-contact {
    --footer-contact-icon-size: 1.1em;
    --footer-contact-icon-gap: 0.35em;
}

/* Lien complet : icône et texte forment une seule unité */
.footer-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--footer-contact-icon-gap);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
}

/* Châssis visuel commun aux deux icônes */
.footer-contact-icon {
    display: inline-block;
    width: var(--footer-contact-icon-size);
    height: var(--footer-contact-icon-size);
    flex: 0 0 var(--footer-contact-icon-size);
    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    mask-mode: alpha;
}

/* Dessin de l’enveloppe */
.footer-contact-icon-email {
    -webkit-mask-image: url("../icons/icone-email.svg");
    mask-image: url("../icons/icone-email.svg");
}

/* Dessin LinkedIn */
.footer-contact-icon-linkedin {
    -webkit-mask-image: url("../icons/icone-linkedin.svg");
    mask-image: url("../icons/icone-linkedin.svg");
}


/* === 3 LIGNES PRÉCÉDENTES === */
/* ==========================================================
   MODE PC & GRANDE LARGEUR (> 850px) : Grille 3 Colonnes Unifiée
   ========================================================== */
@media (min-width: 850.00001px) {
/* === BLOC À INSÉRER (REMPLACE JUSQU'À LA FIN DU MODE PC) === */
    .main-footer {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: start; /* MODIFIÉ : Ancrage global de la grille au plafond */ 
        height: var(--footer-height-base);
        padding-left: var(--footer-side-padding);
        padding-right: var(--footer-side-padding);
    }

    /* Libération des objets dans la grille, miroir de 'nav-top-line' */
    .footer-extension-line,
    .footer-base-line {
        display: contents; 
    }

    /* Positionnement dans la grille (Châssis 3 colonnes) */
    .footer-content-legal { 
        grid-column: 1; 
        grid-row: 1; /* SÉCURITÉ : Interdit la création d'un étage fantôme */
        justify-self: start; 
        align-self: start; /* Ancrage Plafond */
        margin-top: var(--legal-offset-y);
        margin-left: var(--legal-offset-x);
    }
    
    .footer-content-contact { 
        grid-column: 3; 
        grid-row: 1; /* SÉCURITÉ : Interdit la création d'un étage fantôme */
        justify-self: end; 
        align-self: start; /* Ancrage Plafond */
        margin-top: var(--contact-offset-y);
        margin-right: var(--contact-offset-x);
    }
}
/* === FIN DU BLOC À INSÉRER === */

/* === 3 LIGNES SUIVANTES === */
/* ==========================================================
   MODE MOBILE / ÉCRAN ÉTROIT (≤ 850px) : Empilement Ascendant
   ========================================================== */








/* === BLOC À INSÉRER (REMPLACE INTÉGRALEMENT TA SÉLECTION) === */
/* ==========================================================
   MODE MOBILE / ÉCRAN ÉTROIT (≤ 850px) : Empilement Ascendant
   ========================================================== */
@media (max-width: 850px) {

    /* Désactivation de la Ligne 1 générale utilisée sur PC */
    .main-footer::before {
        content: none;
    }

    .main-footer {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    /* Boîte d'extension : case supérieure sur mobile */
    .footer-extension-line {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        position: relative;
        height: var(--footer-height-extension);
        padding-left: var(--footer-side-padding);
        padding-right: var(--footer-side-padding);
    }

    /* Ligne 2 : rattachée directement au toit de l'extension */
    .footer-extension-line::before {
        content: "";
        position: absolute;
        top: var(--footer-separator-pixel-snap-y, 0px);
        left: var(--footer-line2-margin-side);
        right: var(--footer-line2-margin-side);
        height: var(--footer-line2-thickness);
        background-color: color-mix(
            in srgb,
            var(--footer-line2-color) calc(var(--footer-line2-opacity) * 100%),
            transparent
        );
        z-index: 10;
        pointer-events: none;
    }

    /* Boîte de base : case inférieure sur mobile */
    .footer-base-line {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        height: var(--footer-height-base);
        padding-left: var(--footer-side-padding);
        padding-right: var(--footer-side-padding);
    }

    /* Ligne 1 : rattachée directement au toit de la base */
    .footer-base-line::before {
        content: "";
        position: absolute;
        top: var(--footer-separator-pixel-snap-y, 0px);
        left: var(--footer-line1-margin-side);
        right: var(--footer-line1-margin-side);
        height: var(--footer-line1-thickness);
        background-color: color-mix(
            in srgb,
            var(--footer-line1-color) calc(var(--footer-line1-opacity) * 100%),
            transparent
        );
        z-index: 10;
        pointer-events: none;
    }

    /* Application des translations depuis le plafond */
    .footer-content-legal {
        margin-top: var(--legal-offset-y);
        margin-left: var(--legal-offset-x);
    }
    
    .footer-content-contact {
        margin-top: var(--contact-offset-y);
        margin-right: var(--contact-offset-x);
    }
}
/* === FIN DU BLOC À INSÉRER === */