/* ============================================================ Chrome commune — barre et pied de TOUT le site ------------------------------------------------------------ Deux thèmes : sombre (pages publiques, défaut) et clair (espace émetteur, .pf-nav--clair / .pf-foot--mince). Règle d'or : AUCUN var() sur un token --pf-* de parafe.css. Les couleurs sont relevées dans parafe.css et écrites en hex — une chrome qui hérite des tokens de l'app se déforme quand l'app bouge. Ce que la règle NE garantit pas : ces valeurs recopiées ne suivent plus leur source. Une seule divergence se verrait — la largeur de la barre claire, alignée sur .pf-wrap pour que le logo tombe dans l'axe du titre : elle est gardée par un test (test_chrome.py). Les couleurs, elles, ne le sont que par ce commentaire : les remettre à la main si la peau de l'app change. Cette feuille est chargée EN DERNIER par base.html (après {% block extra_head %}) : elle occupe la place qu'elle avait quand elle vivait inline dans le body. ============================================================ */ /* Gouttière de scrollbar réservée en permanence : sans elle, le container centré (donc le logo) se décale de ~8px entre une page qui scrolle et une page qui tient à l'écran. */ html{scrollbar-gutter:stable} /* ---------- Colonne de page : le pied au bas de la fenêtre ---------- */ /* Le wrapper de base_site.html porte déjà min-height:100vh sur l'espace et le contact (via .pf-page, parafe.css), mais empilait ses enfants en flux : sur une page courte la BOÎTE s'étirait à la fenêtre, pas le pied, qui s'arrêtait à la fin du contenu — jusqu'à 263 px de fond nu sous lui (/espace/ à 1280x900, le 2026-08-06). La hauteur est redéclarée ici pour valoir aussi sur les pages publiques, qui n'ont pas .pf-page. Surtout ne pas porter cette règle sur .pf-page : les sept pages du tunnel signataire portent cette classe et n'ont ni barre ni pied — c'est la fuite qu'avait déjà faite la gouttière de scrollbar ci-dessus. */ .pf-site{min-height:100vh;display:flex;flex-direction:column} .pf-site>.pf-foot{margin-top:auto} /* Un enfant à `margin:0 auto` (le
des mentions et des CGV) n'est plus étiré par la colonne — une marge auto sur l'axe croisé annule le stretch — et prend sa largeur min-content : 434 px à 390 px de fenêtre, soit toute la page qui défile latéralement. `width:100%` lui rend la largeur que le flux lui donnait, et se COMBINE avec son max-width propre (760 px pour les mentions) au lieu de l'écraser — `max-width:100%` ici pèse (0,1,0) comme `.pf-legal`, donc gagne par l'ordre de chargement et mettrait le texte juridique pleine largeur. Et surtout pas d'overflow-x:hidden sur la colonne : il ferait de .pf-site le conteneur de défilement et décrocherait la barre collante. */ .pf-site>*{width:100%} /* ---------- Barre ---------- */ .pf-nav{position:sticky;top:0;z-index:50;background:#061a1b;border-bottom:1px solid rgba(243,239,230,.09)} .pf-nav__in{max-width:1120px;margin:0 auto;padding:20px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px} .pf-brand{display:flex;align-items:center;gap:12px;text-decoration:none} .pf-brand__word{font-family:'Fraunces',Georgia,serif;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 40;font-weight:600;font-size:23px;color:#f3efe6;letter-spacing:-.015em} .pf-brand__word b{color:#4aaa9a;font-weight:600} .pf-navlinks{display:flex;align-items:center;gap:26px;flex:none} .pf-navlink{text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;color:rgba(243,239,230,.74);transition:color .18s} .pf-navlink:hover{color:#f3efe6} .pf-navbtn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;font-size:14px;font-weight:600;text-decoration:none;color:#f3efe6;border:1px solid rgba(243,239,230,.28);border-radius:999px;transition:border-color .18s,background .18s} .pf-navbtn:hover{border-color:rgba(243,239,230,.55);background:rgba(243,239,230,.06)} /* La barre est collée : elle passe sur les sections claires. Sans ombre elle y flotte, avec une ombre permanente elle salit le hero sombre. On ne l'allume donc qu'une fois le haut de page quitté — en CSS, sans script. */ @supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){ .pf-nav{animation:pf-nav-pose linear both;animation-timeline:scroll(root block);animation-range:0 120px} @keyframes pf-nav-pose{from{box-shadow:0 0 0 rgba(0,0,0,0)}to{box-shadow:0 10px 30px rgba(4,18,19,.38)}} }} :where(.pf-nav,.pf-foot) :where(a,button):focus-visible{outline:2.5px solid #c9a86a;outline-offset:3px} /* Sous 780 px la barre ne tient plus quatre liens. On garde le tarif : c'est l'argument que le visiteur mobile vient chercher. */ @media (max-width:780px){ .pf-navlink{display:none} .pf-navlink--keep{display:inline} .pf-navlinks{gap:18px} .pf-nav__in{padding:16px 20px;gap:14px} } /* ---------- Pied à trois colonnes (pages publiques) ---------- */ .pf-foot{background:#04191a;color:rgba(243,239,230,.62);border-top:1px solid rgba(201,168,106,.16)} .pf-foot__in{max-width:1120px;margin:0 auto;padding:56px 28px 34px;display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:40px} .pf-foot__col p{margin:14px 0 0;font-size:14px;line-height:1.6;max-width:320px} .pf-foot__titre{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#c9a86a;margin-bottom:14px} .pf-foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .pf-foot__col a{color:rgba(243,239,230,.72);text-decoration:none;font-size:14.5px} .pf-foot__col a:hover{color:#f3efe6;text-decoration:underline;text-underline-offset:4px} .pf-foot__bar{max-width:1120px;margin:0 auto;padding:18px 28px 28px;border-top:1px solid rgba(243,239,230,.08);display:flex;justify-content:space-between;gap:16px;font-size:13px} @media (max-width:780px){ .pf-foot__in{grid-template-columns:1fr;gap:32px;padding:44px 20px 26px} .pf-foot__bar{flex-direction:column;gap:8px;padding:16px 20px 24px} } /* ============================================================ Thème clair — la chrome de l'espace émetteur ------------------------------------------------------------ Même barre, même pied, autre peau. Valeurs relevées dans parafe.css : --pf-line #e3e8e5 · --pf-ink #16221f · --pf-ink-soft #46514e · --pf-petrole-800 #0f3d3e · --pf-emeraude-600 #1b7a6e · --pf-emeraude-500 #229a87 · --pf-shadow-sm 0 1px 2px rgba(15,61,62,.06), 0 2px 6px rgba(15,61,62,.05). ============================================================ */ /* PLANCHER de la hauteur de la barre — pas sa mesure : la barre n'a pas UNE hauteur, elle suit son contenu le plus haut. Relevé au navigateur le 2026-08-06, à 1280x900 puis 390x900 : 87,4 / 79,4 px public AVEC le bouton (landing, contact, /connexion/ déjà connecté) — le pf-navbtn commande ; 77,8 / 69,8 px public SANS lui (les deux écrans du tunnel de connexion, qui vident nav_cta) — le sceau de 34 px commande ; 79,0 / 71,0 px thème clair (l'avatar de 38 px commande). Les quatre écrans plein écran calent un min-height dessus. Sous-évaluer est le bon côté de l'erreur : leur bloc dépasse alors de 3,8 à 13,4 px, noyés dans les 93 à 649 px de défilement que le pied impose de toute façon (mesuré). Surévaluer, à l'inverse, laisserait paraître une bande de pied sous l'écran de connexion — un défaut visible, lui. Uniformiser les trois hauteurs (min-height sur .pf-nav__in) rendrait cette valeur exacte et supprimerait le saut de logo de ~5 px entre une page avec bouton et une page sans ; c'est un changement de géométrie sur neuf pages déjà recettées, laissé au backlog. */ :root{--pf-chrome-nav-h:74px} .pf-nav--clair{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border-bottom:1px solid #e3e8e5} /* La largeur de la barre suit celle du contenu de sa page : 960 px comme .pf-wrap, avec son padding, pour que le logo tombe dans l'axe du titre. */ .pf-nav--clair .pf-nav__in{max-width:960px;padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px)} .pf-nav--clair .pf-brand__word{color:#0f3d3e} .pf-nav--clair .pf-brand__word b{color:#1b7a6e} .pf-nav--clair .pf-navlink{color:#46514e} .pf-nav--clair .pf-navlink:hover{color:#1b7a6e} .pf-nav--clair .pf-navbtn{color:#0f3d3e;border-color:#e3e8e5} .pf-nav--clair .pf-navbtn:hover{border-color:#cfd8d4;background:rgba(15,61,62,.04)} /* L'or du filet de focus se perd sur un fond blanc : sur le thème clair, c'est le pétrole qui marque. (0,1,0) + (0,0,0) bat le :where() commun. */ .pf-nav--clair :where(a,button):focus-visible{outline-color:#0f3d3e} /* Déconnexion est un