/**********      PIED DE PAGE (toutes les pages)      **********/
/* Trois zones : identité à gauche, liens utiles au centre, date et copyright à droite.
   La couleur de fond reste celle de chaque page (règles « .fond_AAAA footer », etc.).
   Toutes les dimensions intérieures sont en « em » : elles suivent la taille de texte
   du pied (font-size de footer.pied), qu'il suffit donc de régler pour tout agrandir. */

/* Toujours tout en bas de l'écran : la page fait au moins la hauteur de l'écran, et le pied
   (« sticky », top: 100vh) glisse jusqu'en bas de la page quand le contenu est court.
   Sur une page longue, il reste simplement à la fin du contenu. Rien d'autre ne bouge. */
body {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Marges prévues pour les anciens pieds de page, devenues du vide sous le nouveau. */
body.anglet {
    padding-bottom: 0;
}

body.borda {
    margin-bottom: 0;
}

footer.pied {
    position: sticky;
    top: 100vh;
    bottom: auto;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: .45em 1.43em;
    /* même marge des deux côtés pour un contenu bien centré ; elle laisse aussi la place
       au bouton « haut de page », fixé en bas à gauche de l'écran */
    padding: .39em 5.18em;
    font-family: Arial, Helvetica, sans-serif;
    font-size: .56rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}

footer.pied .pied-marque {
    display: flex;
    align-items: center;
    gap: .54em;
    justify-self: start;
    color: inherit;
    text-decoration: none;
}

footer.pied .pied-marque img {
    display: block;
    width: 2.05em;
    height: 2.05em;
    padding: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .09em .27em #001d2f55;
}

footer.pied .pied-marque strong {
    font-family: haritzaga, Arial, sans-serif;
    font-size: 1.46em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .04em;
}

footer.pied .pied-liens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .45em;
}

footer.pied .pied-liens a {
    padding: .14em .89em;
    color: #003c72;
    background: #ffffffc4;
    border: .09em solid #ffffffe6;
    border-radius: 999px;
    box-shadow: 0 .07em .21em #00223033;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

footer.pied .pied-liens a:hover,
footer.pied .pied-liens a:focus-visible {
    color: #fff;
    background: #0b5d45;
    outline: none;
}

footer.pied .pied-liens a[aria-current="page"] {
    color: #fff;
    background: #0b5d45cc;
}

/* Ordinateur : la date puis le copyright, chacun sur sa ligne. */
footer.pied .pied-infos {
    justify-self: end;
    margin: 0;
    text-align: right;
}

footer.pied .pied-infos span {
    display: block;
    white-space: nowrap;
}

footer.pied .pied-infos .pied-sep {
    display: none;
}

/* Protège le pied de page des styles de texte propres à certaines pages
   (ex. « .borda p span » ou « .otxote p » qui changent la police des paragraphes). */
footer.pied .pied-infos {
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: normal;
}

footer.pied .pied-infos span,
footer.pied .pied-liens span {
    font: inherit;
    letter-spacing: normal;
}

/* Accueil : sa taille de texte de base reste fixe (18 px) alors que les autres pages
   grossissent sur les grands écrans ; on y donne au pied la même taille qu'ailleurs. */
@media all and (min-width: 641px) and (max-width: 809px) {
    .accueil footer.pied {
        font-size: 11.2px;
    }
}

@media all and (min-width: 810px) and (max-width: 1023px) {
    .accueil footer.pied {
        font-size: 13.44px;
    }
}

@media all and (min-width: 1024px) {
    .accueil footer.pied {
        font-size: 15.68px;
    }
}

@media all and (max-width: 640px) {
    footer.pied {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: .32em;
        /* marges réduites mais symétriques : sur téléphone, le bouton « haut de page » ne
           croise que la ligne des liens, étroite et centrée, jamais la ligne de la date */
        padding: .48em .65em;
        font-size: .62rem;
        text-align: center;
    }

    /* Le logo est déjà dans la barre du haut : inutile de le répéter sur téléphone. */
    footer.pied .pied-marque {
        display: none;
    }

    footer.pied .pied-liens {
        flex-wrap: nowrap;
        gap: .32em;
    }

    footer.pied .pied-liens a {
        padding: .13em .61em;
    }

    /* Téléphone : date et copyright sur une seule ligne (retour à la ligne si l'écran est trop étroit). */
    footer.pied .pied-infos {
        justify-self: center;
        font-size: .9em;
        text-align: center;
    }

    footer.pied .pied-infos span,
    footer.pied .pied-infos .pied-sep {
        display: inline;
        white-space: normal;
    }
}

@media all and (max-width: 360px) {
    footer.pied {
        font-size: .58rem;
    }

    footer.pied .pied-liens {
        gap: .26em;
    }

    footer.pied .pied-liens a {
        padding: .1em .48em;
    }

    footer.pied .pied-infos {
        font-size: .86em;
    }
}