qui porte la largeur et les marges du contenu. Il se retrouvait cale a gauche sous la barre laterale, ou flottant au milieu d'une page courte — visuellement n'importe ou sauf en bas. CORRIGE en deux temps : le bloc est desormais insere A L'INTERIEUR du

(il herite ainsi de sa largeur et de son centrage), et le body devient une colonne flexible dont le contenu pousse le pied vers le bas. Sur une page courte, le pied touche le bas de la fenetre ; sur une page longue, il vient apres le contenu. Dans les deux cas : en bas. ON NE TOUCHE PAS AU BODY. Deuxieme essai ecarte : imposer `display:flex` au pour coller le pied en bas cassait login.html et inscription.html, qui CENTRENT deja leur carte avec leur propre mise en page. Une regle globale qui repare une page et en casse deux autres n'est pas une reparation. Le pied se contente donc de suivre le flux, ce qui suffit : apres le contenu, il EST en bas — et il occupe toute la largeur disponible pour qu'on le lise comme un pied de page et non comme un paragraphe egare. */ .legal-pied { width: 100%; clear: both; border-top: 1px solid var(--bd, #25375c); margin-top: 40px; padding: 18px 20px 28px; text-align: center; font-size: 13px; color: var(--mu, #7a8db0); } /* PAGES COURTES ET CENTREES (login, inscription, mot de passe oublie). Leur est un conteneur flex qui CENTRE la carte a l'ecran. Un pied ajoute dedans devient un element flex de plus, place A COTE de la carte — c'est exactement ce que JC voyait. Sur ces pages, et seulement sur elles, on sort le pied du flux et on l'ancre au bas de la fenetre : le contenu est court, il n'y a pas de defilement, le pied ne masque donc rien. */ .legal-pied--fixe { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 12px 20px 14px; background: rgba(11, 26, 48, .82); backdrop-filter: blur(6px); border-top: 1px solid var(--bd, #25375c); z-index: 5; } /* LE PIED FIXE DECLARE SA HAUTEUR AUX PASTILLES (mesure du 02/09/2026, mobile). Sur login et inscription, trois elements FIXES se disputaient les 60 derniers pixels de l'ecran : ce pied (y 754-812), la pastille Assistant et la pastille FR (toutes deux a bottom:14px). Resultat : les liens legaux passaient derriere les pastilles, et les pastilles l'une sur l'autre. Plutot que de coder en dur « les pastilles montent de 48 px sur ces pages » dans trois fichiers, le pied POSE une variable CSS des qu'il est present, et i18n.js / assistant.js l'ajoutent a leur position. Pas de pied fixe -> la variable vaut 0 -> rien ne bouge ailleurs. `:has()` est pris en charge par tous les navigateurs courants depuis 2023. */ body:has(.legal-pied--fixe) { --pmj-pied-fixe: 52px; } .legal-pied a { color: var(--mu, #7a8db0); text-decoration: none; margin: 0 9px; } .legal-pied a:hover { color: var(--blue-2, #5aa2ff); text-decoration: underline; } @media (max-width: 560px) { .legal-wrap { font-size: 15px; padding: 20px 16px 60px; } .legal-wrap h2 { font-size: 17.5px; } /* Pied fixe COMPACT sur mobile : une seule ligne, sinon les quatre liens passent sur deux lignes et mangent 60 px d'un ecran qui n'en a que 812. */ .legal-pied--fixe { padding: 8px 8px 9px; font-size: 11.5px; white-space: nowrap; overflow: hidden; } .legal-pied--fixe a { margin: 0 4px; } body:has(.legal-pied--fixe) { --pmj-pied-fixe: 36px; } } /* --------------------------------------------------------------------------- * BARRE D'ONGLETS ET SOMMAIRE (03/09/2026) * JC : « les CGV mises a jour de Dim, je veux les memes ». Sur la plateforme du * fournisseur, les quatre pages legales se repondent : une barre d'onglets en * tete, un sommaire clicable, la version en vigueur affichee. On reprend cette * ergonomie — un client qui cherche l'article 11 ne doit pas defiler a l'aveugle. * ------------------------------------------------------------------------- */ .legal-onglets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .legal-onglets a { display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--mu, #7a8db0); border: 1px solid var(--bd, #1e2c46); background: var(--panel2, #0d1830); } .legal-onglets a:hover { color: #fff; border-color: var(--blue-2, #5aa2ff); } .legal-onglets a[aria-current="page"] { color: #fff; background: var(--blue-1, #1e63ff); border-color: var(--blue-1, #1e63ff); } .legal-wrap .version { font-size: 13.5px; color: var(--mu, #7a8db0); margin: -6px 0 18px; } .legal-sommaire { border: 1px solid var(--bd, #1e2c46); border-radius: 12px; padding: 14px 16px; background: var(--panel2, #0d1830); margin: 0 0 22px; } .legal-sommaire b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--mu, #7a8db0); margin-bottom: 8px; } .legal-sommaire ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 26px; } .legal-sommaire li { margin: 0 0 5px; font-size: 14px; } .legal-sommaire a { text-decoration: none; } .legal-sommaire a:hover { text-decoration: underline; } @media (max-width: 700px) { .legal-sommaire ol { columns: 1; } .legal-onglets a { padding: 10px 14px; } /* cible tactile */ .legal-wrap table, .legal-wrap thead, .legal-wrap tbody, .legal-wrap tr { display: block; } .legal-wrap th { display: none; } .legal-wrap td { display: block; border: 0; padding: 2px 0; } .legal-wrap tr { border-bottom: 1px solid var(--bd, #1e2c46); padding: 10px 0; } .legal-wrap td:first-child { font-weight: 600; color: #fff; } }