/* ══════════════════════════════════════════════════════════════════════════
   LE PIED DE PAGE DU SITE — une seule feuille, chargée sur TOUTES les pages.

   ────────────────────────────────────────────────────────────────────────
   POURQUOI CE FICHIER EXISTE PLUTÔT QUE DE RESTER DANS accueil-style.css
   ────────────────────────────────────────────────────────────────────────

   Ces règles ont d'abord vécu dans accueil-style.css, parce que le pied de la
   maquette validée ne servait qu'à l'accueil. Le 30 août 2026 il devient LE
   pied du site, sur les treize pages publiques.

   On ne pouvait pas pour autant charger accueil-style.css partout : ce fichier
   contient une règle `body { ... }` et près de 1 600 lignes destinées à une
   seule page. Il baverait sur tout le site. D'où cette extraction : le pied
   emporte SES règles, et rien d'autre.

   ────────────────────────────────────────────────────────────────────────
   POURQUOI TOUT EST REPOSÉ ICI, MÊME CE QUI SEMBLE ÉVIDENT
   ────────────────────────────────────────────────────────────────────────

   Le pied est rendu à l'intérieur du gabarit public, sous une pile de
   feuilles héritées : Bootstrap 3, z-style.css, elements.css, fp-universal.css
   et fp-responsive.css. Trois d'entre elles ont déjà mordu :

     · Montserrat est imposée PAR TYPE (`h2 { font-family: ... }`). Un sélecteur
       de type pèse (0,0,1) ; `.ac-pied :where(h1..h6)` pèse (0,1,0) et gagne.
     · Bootstrap pose `line-height: 1.1` sur les titres, ce qui écrase les
       descendantes de deux lignes. D'où le `line-height: normal` explicite.
     · `box-sizing` n'est pas garanti hérité sur cette pile : il est reposé.

   `:where()` sert partout où la règle doit pouvoir être reprise par une page :
   il annule la spécificité de son argument, si bien que `.ac-pied :where(...)`
   ne coûte que la classe.

   ────────────────────────────────────────────────────────────────────────
   CE FICHIER EST CHARGÉ EN DERNIER, APRÈS fp-responsive.css
   ────────────────────────────────────────────────────────────────────────

   Volontairement : à spécificité égale, le dernier chargé gagne. C'est ce qui
   évite d'avoir à écrire un seul `!important` ici — et les quatre pages qui
   repeignaient l'ancien pied en avaient six à elles seules.

   Le pied est rendu HORS de `.fpr-contenu` : fp-responsive.js ne le remet
   donc jamais en page. Sa logique mobile est celle qui suit, et elle seule.
   ══════════════════════════════════════════════════════════════════════════ */

.ac-pied {
    background: #fff;
    border-top: 1px solid #E8EEF6;
    font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #4C5F7D;
    line-height: normal;
}

.ac-pied :where(a, p, b, strong, em, li, label, span, div) { font-family: inherit; }
.ac-pied :where(h1, h2, h3, h4, h5, h6) {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: #0B1F44;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: normal;
}
/* LA COULEUR DES LIENS N'EST PAS SOUS `:where()`, ET C'EST UNE CORRECTION.

   Ces trois règles s'écrivaient `:where(.ac-pied) a` du temps où le pied ne
   servait qu'à l'accueil : `:where()` annule la spécificité de son argument,
   si bien que le sélecteur ne pesait que (0,0,1) — le poids d'un `a` nu. Sur
   une page sans concurrence, cela suffisait, et cela laissait la porte ouverte
   à une page qui aurait voulu d'autres couleurs.

   Le 30 août 2026 le pied part sur les treize pages, et quatre d'entre elles
   posent un `a { color: ... }` dans un <style> du corps. À spécificité égale
   c'est le dernier rendu qui gagne : le pied s'affichait en cyan sur /contact,
   /status, /cgu-cgv et /serveurs-jeux. Relevé au navigateur, rgb(8,145,178).

   `.ac-pied a` pèse (0,1,0) et passe devant n'importe quel sélecteur de type,
   où qu'il soit dans le document. La porte se referme, volontairement : un
   pied partagé n'a pas à changer de couleur selon la page. */
.ac-pied a { color: #4C5F7D; text-decoration: none; }
.ac-pied a:hover,
.ac-pied a:focus { color: #1257F0; text-decoration: none; }
.ac-pied :focus-visible { outline: 2px solid #1257F0; outline-offset: 2px; border-radius: 4px; }
.ac-pied *,
.ac-pied *::before,
.ac-pied *::after { box-sizing: border-box; }

/* LE CONTENEUR EST PROPRE AU PIED, et ne s'appelle pas `.ac-conteneur`.

   L'accueil définit `.ac-conteneur` dans sa propre feuille, aux mêmes valeurs.
   Le partager aurait créé exactement le couplage qu'on cherche à défaire : une
   retouche de la largeur de l'accueil déplacerait le pied de treize pages, et
   une page sans accueil-style.css n'aurait plus de conteneur du tout. */
.ac-pied-conteneur {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
}

.ac-pied-inner { padding: 56px 0 24px; }

.ac-pied-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
}

.ac-pied-logo {
    display: block;
    height: 34px;
    width: auto;
    margin-bottom: 14px;
}

.ac-pied-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
    margin-bottom: 18px;
}

.ac-pied-reseaux { display: flex; gap: 10px; }

.ac-pied-reseau {
    width: 36px;
    height: 36px;
    border: 1px solid #E3EAF4;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms ease;
}

.ac-pied-reseau:hover { background: #F2F6FD; }

.ac-pied-col h2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

.ac-pied-liens {
    display: grid;
    gap: 10px;
    font-size: 14px;
}

.ac-pied-bas {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid #EDF1F7;
    font-size: 13px;
    color: #69778F;              /* maquette #7A8AA5 — relevé sous AA */
}

/* ── SOUS 1024 px ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* LA PASTILLE DU COURRIEL PASSE À 44 px. Elle en fait 36 dans la maquette,
       ce qui allait tant qu'elle était accompagnée ; elle est désormais SEULE
       dans le pied, et c'est le seul raccourci de contact qui s'y trouve. Sous
       1024 px on est au doigt : 36 px se ratent. Le pictogramme, lui, ne bouge
       pas — c'est la zone qui grandit autour. */
    .ac-pied-reseau { width: 44px; height: 44px; }

    .ac-pied-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
}

/* ── SOUS 720 px ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .ac-pied-conteneur { padding: 0 20px; }
    .ac-pied-inner { padding: 40px 0 20px; }
    .ac-pied-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── IMPRESSION ──────────────────────────────────────────────────────────── */
/* Le pied ne dit rien qu'un papier ait besoin de porter, et il coûte une
   colonne de liens morts. Les CGU s'impriment (bouton « PDF » de la page) :
   c'est la seule page où cela se voit, mais la règle vaut pour toutes. */
@media print {
    .ac-pied { display: none !important; }
}