/* Pied de page V4 et bannière de cookies V4 pour les pages de /ressources/ qui ne chargent pas v4.css :
   les quatre documents longs et les 53 pages du portail Claude (tâche R, phase B2, ronde 1, 16/10/2026).
   Pourquoi pas v4.css : ses règles générales (body, h1 à h3, p, img, .section…) casseraient la mise en page de ces pages.
   Ces règles sont une COPIE de celles de v4.css (pied, mention des marques, téléphone insécable, nom « N-Gage »,
   lien « Gérer les cookies », bannière). Seul ajout : la police, la graisse et l'interligne posés sur .pied lui-même
   (sur les pages V4, il les hérite de body ; ici, body porte ceux du document ou du portail).
   Garde-fou : un test Playwright compare le rendu calculé du pied ici et sur /ressources/ (documents et portail).
   Si le pied change dans v4.css, reporter le changement ici. */

:root {
  --ngage-bleu: #265170; --ngage-texte: #34465A; --ngage-blanc: #FFFFFF; --ngage-brume: #E4ECF3;
  --ngage-ia: #4F5F70; --ngage-pointille: #9DB0C2;
  --ngage-police: "Source Sans 3", Arial, sans-serif;
  --ngage-arrondi: 6px;
}

.pied { position: relative; background: var(--ngage-blanc); color: var(--ngage-texte); padding: 36px 0 28px; font-family: var(--ngage-police); font-size: .92rem; font-weight: 400; line-height: 1.55; border-top: 1px solid var(--ngage-brume); }
:where(.pied) .conteneur { max-width: 1120px; margin: 0 auto; padding: 0 24px; } /* même poids que .conteneur dans v4.css : .pied-liens et .pied-mentions gardent leurs marges */
.pied a { color: var(--ngage-bleu); }
.pied a:focus-visible { outline: 2px solid var(--ngage-bleu); outline-offset: 3px; }
.pied-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.pied-ligne img { display: block; max-width: 100%; height: 30px; width: auto; }
.pied-liens { margin-top: 14px; }
.pied-ligne p, .pied-mentions p { margin: 0; max-width: none; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 20px; flex-direction: row; }
.pied nav a { text-decoration: none; }
.pied nav a:hover { text-decoration: underline; }
.pied-mentions { border-top: 1px solid var(--ngage-brume); margin-top: 22px; padding-top: 16px; color: var(--ngage-ia); font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.pied-mentions p:first-child { max-width: 72ch; }
.pied-mentions .pied-marques { flex-basis: 100%; font-size: .8rem; }
.pied a[href^="tel:"] { white-space: nowrap; }
.nom-marque { white-space: nowrap; }
#cookieFooterLink::before { content: " · "; display: inline-block; white-space: pre; text-decoration: none; color: var(--ngage-ia); }

/* Bannière de cookies V4 (copie des règles de v4.css) : angles droits, sans ombre, 16 px de chaque côté sur téléphone */
body .cookie-banner, body .cookie-modal-content, body .cookie-category, body .cookie-btn, body .cookie-close { border-radius: 0; box-shadow: none; }
body .cookie-btn { border-radius: var(--ngage-arrondi); }
body .cookie-btn:hover, body .cookie-category:hover, body .cookie-toggle.active, body .cookie-toggle::after { box-shadow: none; }
body .cookie-btn-accept.pulse { animation: none; }
body .cookie-banner { border-color: var(--ngage-pointille); }
@media (max-width: 480px) {
  body .cookie-banner { left: 16px; right: 16px; max-width: none; }
  body .cookie-buttons .cookie-btn { min-width: 0; max-width: none; padding-left: 10px; padding-right: 10px; }
  body .cookie-buttons .cookie-btn-accept { flex: 1 1 100%; }
}