/* ========================================================================== pied.css — pied de page du site (quatre colonnes + ligne de copyright). ========================================================================== TOUT ce qui concerne le pied vit ici, et NULLE PART AILLEURS : ni `style=` en ligne dans le gabarit, ni gestionnaire `onmouse*`, ni réglage laissé au JavaScript. Même contrat que entete.css, et pour les mêmes raisons : 1. le pied s'affiche CORRECTEMENT SANS JAVASCRIPT, à la première peinture, à toutes les largeurs. Les deux anciennes rangées du pied portaient `data-full-width` et dépendaient de stretchFullWidthRows() (assets/js/site.js) pour aller d'un bord à l'autre : avant l'exécution du script — et pour toujours si jQuery manquait — elles s'arrêtaient à la largeur du conteneur. Le pied ne porte plus cet attribut, le script ne le voit plus, la CSS s'en charge ; 2. rien n'est replié derrière une interaction. Un pied à accordéons cacherait les mentions légales derrière un clic : les quatre colonnes sont TOUJOURS dépliées, à toutes les largeurs. ========================================================================== LE DESSIN : LE PIED RÉPOND AU « BANDEAU ROUGE » DE L'EN-TÊTE. ========================================================================== L'en-tête se termine par une bande PLEINE #912222 à liens BLANCS, sans filet en dessous (« le bandeau EST le pied de l'en-tête », entete.css). Le pied reprend EXACTEMENT cette matière et la retourne : un BLOC plein #912222 d'un bord à l'autre de la fenêtre, texte et liens blancs, survol marqué par le MÊME soulignement (2 px d'épaisseur, 7 px sous la ligne de base) que les entrées de la nav. La page est ainsi tenue entre deux surfaces rouges de même teinte : la bande de nav en haut, le bloc du pied en bas. UN SEUL ROUGE, #912222 — celui de l'en-tête. Les trois pastilles de l'ancien pied étaient en `btn-color-danger`, soit #FF675B : un TROISIÈME rouge, qui ne se retrouvait nulle part ailleurs dans la charpente. Il quitte le pied avec les boutons. #FF675B et #F34747 subsistent AILLEURS sur le site, sur les boutons hérités du corps de page : c'est hors sujet ici, on n'y touche pas. PLUS DE BOUTONS (décision humaine). Trois pastilles centrées ne pouvaient porter que trois libellés ; le pied en porte maintenant une dizaine, en texte, rangés sous des titres de colonne. Le survol se marque au soulignement, comme dans la bande de nav — jamais par un remplissage. TYPOGRAPHIE — les titres de colonne sont en Roboto Slab, capitales interlettrées à 0,12em : c'est le traitement du SLOGAN de l'en-tête, à la même échelle. Les liens sont en ABeeZee, la police du corps, comme les entrées de la nav. Aucune police n'est chargée en plus : les deux sont déjà dans le commun. ========================================================================== LA GRILLE — TROIS PALIERS POUR QUATRE COLONNES (décision humaine) ========================================================================== La colonne « lieu » (photo du bâtiment + lien vers Google Maps) est venue se poser À GAUCHE des trois autres. Quatre colonnes ne se dégradent PAS comme trois, et le palier tablette a dû être redécoupé — voici l'arithmétique qui l'impose, mesurée au navigateur sur la page d'accueil. POURQUOI PAS QUATRE COLONNES À 768 px. Le conteneur y fait 720 px et l'écart entre colonnes 24,6 px (`clamp(24px, 3.2vw, 56px)`). À QUATRE colonnes il y a TROIS écarts, soit 73,7 px de gouttières : il ne reste que 646,3 px de pistes. Réparties en 1,5fr / 1fr / 1fr pour les trois colonnes de texte — même en donnant au lieu une piste de largeur NULLE — les deux colonnes courtes tombent à 184,6 px, sous les 188,6 px que réclame « Informations légales » sur une ligne. Aucune largeur de photo ne sauve ce palier : il est perdu avant même qu'on ait posé la photo. POURQUOI 992 px. Le conteneur passe à 960 px (layout.css) et l'écart à 31,7 px : 864,8 px de pistes. En retirant 160 px pour la photo il reste 704,8 px, soit 201,4 px aux deux colonnes courtes — au-dessus des 188,6 px exigés. Le point le plus SERRÉ du palier n'est pas 992 px mais 1199 px, où le conteneur vaut encore 960 px alors que l'écart a grimpé à 38,4 px : les colonnes courtes y descendent à 193,4 px, ce qui tient encore. < 576 px UNE colonne : le lieu (photo + carte), « où nous trouver », les liens, le légal, empilés. 576 → 991,98 px DEUX colonnes, en deux rangées de deux : le lieu et « où nous trouver » en haut, les liens et le légal en bas. Les deux listes de liens sont courtes (2 et 3 entrées) et tiennent largement dans une demi-largeur. Ce palier a AVALÉ l'ancien palier à trois colonnes de 768 px, faute de place pour une quatrième (cf. ci-dessus). >= 992 px QUATRE colonnes : lieu | où nous trouver | liens | légal. La piste du lieu est en `clamp(160px, 14vw, 200px)` — 160 px à 992 px, 200 px au-delà de 1429 px — et les trois autres gardent leur rapport 1,5fr / 1fr / 1fr d'origine. Les DEUX bornes sont mesurées. 160 px : la plus large qui laisse encore 201,4 px aux colonnes courtes à 992 px, le point le plus étroit du palier (188,6 px sont exigés). 200 px : la plus large qui garde la colonne « lieu » SOUS la colonne de prose — 200 px de photo font 150 px de haut, plus 4 px de marge et 30 px de lien, soit 184 px contre 187,3 px pour « où nous trouver ». Au-delà, c'est la PHOTO qui fixe la hauteur du pied : à 210 px elle la poussait déjà à 306,3 px. Le même plafond garde 330,9 px à la prose à 1920 px, où les gouttières atteignent leur maximum (56 px × 3) dans un conteneur qui, lui, ne bouge plus depuis 1200 px : au-dessus des 324 px sous lesquels le paragraphe passerait de 4 à 5 lignes. PALIER SANS PHOTO — `.pied-inner` sans la classe `pied-inner-lieu`. Si pied.yml perd sa photo ET son lien de carte, le gabarit n'émet pas la colonne et le pied retrouve EXACTEMENT ses trois colonnes et ses trois paliers d'avant (1 / 2 / 3, rupture à 768 px, prose étirée sur toute la ligne entre 576 et 767 px, deux colonnes courtes à 191,7 px). Les deux jeux de règles cohabitent plus bas, distingués par `:not(.pied-inner-lieu)`. C'est le même esprit de repli que `secoursEntrees` dans base.njk : un contenu amputé dégrade, il ne casse pas. L'ORDRE DU DOM EST L'ORDRE VISUEL À TOUTES LES LARGEURS, et c'est volontaire : aucune règle `order:` ici, aucune colonne déplacée, aucune `grid-area` qui déménage un bloc. À 576-991 px les quatre blocs se posent simplement dans l'ordre — lieu, trouver / liens, légal — par le flux naturel de la grille. L'ordre de lecture à l'écran, l'ordre d'annonce par un lecteur d'écran et l'ordre de tabulation au clavier sont donc les mêmes partout. Les points de rupture sont ceux de base.css et de layout.css (575,98 / 767,98 / 768 / 992) pour que le pied et le corps changent ensemble : 992 px est déjà celui où `.content--blank .content-wrapper` passe de 720 à 960 px. ========================================================================== PLEINE LARGEUR SANS DÉBORDEMENT — même ruse que l'en-tête : `box-shadow` à étalement 100vmax peint le rouge bien au-delà de la boîte sans jamais créer de barre de défilement (une ombre ne participe pas au débordement défilable), et `clip-path: inset(0 -100vmax)` la retaille EXACTEMENT à la hauteur de la boîte tout en laissant filer les côtés. Surtout PAS `100vw` : cette unité COMPTE la barre de défilement, et rendrait un défilement horizontal parasite sur toutes les pages assez longues pour en avoir une. MARGES LATÉRALES AU TÉLÉPHONE — sous 576 px, `.content--blank .content-wrapper` (layout.css) n'a plus de `max-width` et touche les bords de la fenêtre, tandis que le corps laisse son texte à 15 px du bord (le `padding` de `.column-inner`, la marge négative de `.row` étant annulée par base.css). Le pied prend donc 15 px de chaque côté sous ce seuil, pour commencer et finir sur la MÊME verticale que le texte de la page. Ces 15 px sont posés sur `.pied` elle-même, et c'est sans danger : un `box-shadow` se propage depuis la boîte de BORDURE, que le `padding` ne déplace pas — le rouge continue d'aller d'un bord à l'autre. HAUTEURS MESURÉES (page d'accueil, Chromium, échelle 1, boîte du