/* ============================================================ 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} /* L'entrée courante. Le sélecteur vise l'ATTRIBUT, jamais une classe : le style ne peut donc pas exister sans l'annonce aux lecteurs d'écran, ni l'inverse — c'était le défaut d'avant ce lot, où /api/ portait le marqueur sans qu'aucune règle ne le peigne. Et l'état ne peut pas se dire par la couleur seule : :hover prend déjà le crème ici, et le #1b7a6e sur le thème clair (plus bas). Un actif « en couleur » serait indistinguable d'un lien survolé ; le filet est la seule information neuve. text-decoration plutôt qu'un ::after positionné : le trait suit le mot sans dépendre du padding de la barre, qui change sous 780 px. À spécificité égale avec :hover (0,2,0), c'est l'ordre qui tranche — cette règle doit rester APRÈS. */ .pf-navlink[aria-current="page"]{color:#f3efe6;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:#4aaa9a} /* Le filet tombe à 3 px du bord bas du cadre de focus : sur le thème clair, son émeraude et le pétrole du cadre se recollent en un trait épais et sale (vu au zoom, invisible à taille réelle). Deux pixels d'air suffisent. */ .pf-navlink[aria-current="page"]:focus-visible{outline-offset:5px} .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,summary):focus-visible{outline:2.5px solid #c9a86a;outline-offset:3px} /* ---------- Bouton du menu mobile ---------- */ /* N'existe que sous 780 px (plus bas) : au-dessus, la barre est celle d'avant ce lot, au pixel près. 44 px de côté — c'est la seule prise de toute la navigation mobile, elle ne se vise pas. */ .pf-menu{display:none} .pf-menu__btn{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#f3efe6;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent} /* Le triangle natif du : deux syntaxes, aucune n'est de trop — ::marker vaut pour Chrome et Firefox, ::-webkit-details-marker pour les Safari d'avant la 17. Elles sont sur DEUX lignes, et ce n'est pas du style : un sélecteur inconnu invalide TOUTE la liste où il figure (hors :is()/:where()). Réunies, Firefox jetait la règle entière à cause du préfixe -webkit — prouvé en témoin. */ .pf-menu__btn::marker{content:"";display:none} .pf-menu__btn::-webkit-details-marker{content:"";display:none} .pf-menu__btn:hover{background:rgba(243,239,230,.08)} .pf-nav--clair .pf-menu__btn{color:#0f3d3e} .pf-nav--clair .pf-menu__btn:hover{background:rgba(15,61,62,.06)} /* Les trois traits deviennent une croix. L'ordre des fonctions compte : translate PUIS rotate, sinon les traits tournent avant d'être ramenés au centre et la croix se referme de travers. */ .pf-menu__trait{transform-origin:11px 11px} .pf-menu[open] .pf-menu__trait--haut{transform:rotate(45deg) translateY(5px)} .pf-menu[open] .pf-menu__trait--milieu{opacity:0} .pf-menu[open] .pf-menu__trait--bas{transform:rotate(-45deg) translateY(-5px)} @media (prefers-reduced-motion:no-preference){ .pf-menu__trait{transition:transform .18s,opacity .18s} } /* Sous 780 px la barre ne tient plus quatre liens — et ne tenait déjà plus ce qu'elle gardait : mesuré en prod le 2026-08-24, le logo (175 px), le tarif et le bouton « Se connecter » (124 px) occupaient 381 px quelle que soit la fenêtre, soit 21 px de trop à 360 px et 61 px à 320 px, bouton coupé. Le repli d'avant masquait les liens un par un et en épargnait un (--keep) : « Comment ça marche », API et Contact n'avaient plus d'autre chemin que le pied, à 10 094 px de défilement sur la landing. Le conteneur entier part donc au menu. Replier le conteneur et non chaque entrée est ce qui rend le menu exhaustif : une entrée ajoutée demain y tombe sans qu'on y pense, là où --keep était un moyen silencieux de rester dehors. Reste dans la barre : le logo (175) + le bouton (44) = 233 px, soit 47 px de marge à 320 px. */ @media (max-width:780px){ .pf-menu{display:block} .pf-navlinks{display:none} .pf-nav__in{padding:16px 20px;gap:14px} /* La barre passe devant le bandeau cookies (z-index:60, plus bas). Sans cette ligne le panneau passait DESSOUS : mesuré à 320×460 et à 667×375 (paysage — 667 < 780, le menu y est actif), elementFromPoint au centre de « Se connecter » renvoyait le texte du bandeau, sur la page même où le bandeau s'affiche au visiteur de première visite. Un z-index posé sur le panneau n'y aurait rien changé : .pf-nav est sticky AVEC un z-index, donc elle crée son propre contexte d'empilement, et aucun descendant ne peut en sortir. */ .pf-nav{z-index:70} /* Le panneau se réfère à .pf-nav, déjà positionné par son `sticky` : il tombe pile sous la barre et en épouse la largeur, sans que rien n'ait à être ajouté au conteneur. */ .pf-menu[open]+.pf-navlinks{ display:flex;flex-direction:column;align-items:stretch;gap:2px; position:absolute;top:100%;left:0;right:0; padding:6px 20px 16px; background:#061a1b;border-bottom:1px solid rgba(243,239,230,.09); box-shadow:0 18px 30px -14px rgba(4,18,19,.7); /* Un panneau absolu accroché à une barre collante est un piège de hauteur : ce qui dépasse du bas de la fenêtre est inatteignable POUR TOUJOURS — défiler la page ne déplace pas un élément ancré à la barre. Le 100% se lit sur le bloc conteneur, c'est-à-dire la hauteur de la barre : aucune constante à maintenir le jour où son padding change. Mesuré à 320×300 : panneau plafonné pile au bas de la fenêtre, rendu défilable, CTA de nouveau atteignable. La ligne en vh reste pour les moteurs d'avant dvh (Chrome 108, Safari 15.4, Firefox 101). */ max-height:calc(100vh - 100%); max-height:calc(100dvh - 100%); overflow-y:auto;overscroll-behavior:contain; } /* Un est inline : sans display:flex il n'a pas de hauteur propre et la ligne se réduit à la hauteur du texte — 18 px à viser au pouce. */ .pf-menu[open]+.pf-navlinks .pf-navlink{ display:flex;align-items:center;min-height:44px;font-size:16px; padding:0 6px;border-radius:10px; } .pf-menu[open]+.pf-navlinks .pf-navlink:hover{background:rgba(243,239,230,.06)} /* Le bouton reste en fin de panneau, où le DOM le place : le remonter demanderait un order:-1, qui décalerait l'ordre du clavier de l'ordre de l'œil (WCAG 2.4.3). À 320 px le panneau tient en 300 px de haut — les cinq entrées se voient d'un coup, la position n'apporte rien. Le filet au-dessus dit qu'il n'est pas une entrée de plus. */ .pf-menu[open]+.pf-navlinks .pf-navbtn{ position:relative;justify-content:center;margin-top:19px; padding-top:13px;padding-bottom:13px;font-size:15px; } /* Le filet se pose SUR le bouton, qui est son ancêtre positionné : sans le position:relative ci-dessus, il remontait au panneau et se dessinait ailleurs — invisible à la mesure, vu à l'image. */ .pf-menu[open]+.pf-navlinks .pf-navbtn::before{ content:"";position:absolute;top:-10px;left:0;right:0; border-top:1px solid rgba(243,239,230,.12); } /* L'espace émetteur : mêmes lignes, en clair. Le nom d'espace, masqué dans la barre faute de place, retrouve la sienne ici. */ .pf-nav--clair .pf-menu[open]+.pf-navlinks{ background:#fff;border-bottom-color:#e3e8e5; box-shadow:0 18px 30px -16px rgba(15,61,62,.28); /* La barre claire respire au clamp, pas au 20 px fixe du panneau : sans ces deux lignes, le logo et la première entrée du menu ne partaient pas du même bord — 2 px d'écart à 320 px, 11 px à 780 px. */ padding-left:clamp(18px,4vw,40px);padding-right:clamp(18px,4vw,40px); } .pf-nav--clair .pf-menu[open]+.pf-navlinks .pf-navlink:hover{background:rgba(15,61,62,.05)} /* Le nom d'espace vient de la barre horizontale, où il porte un white-space:nowrap qui n'a plus de sens sur une ligne large de 265 px : mesuré avec « SELARL Dupont Martin Lefevre et Associes - Notaires a Montauban » (62 caractères ; le modèle en autorise 150), il poussait la PAGE ENTIÈRE à 583 px de large — 263 px de défilement latéral à 320 px. Il se replie donc, et coupe au besoin dans le mot : une raison sociale n'a pas d'espace là où on voudrait. */ .pf-menu[open]+.pf-navlinks .pf-nav__ws{ display:flex;align-items:center;min-height:34px;padding:0 6px; font-size:13px;font-weight:600;color:#46514e;text-transform:uppercase; letter-spacing:.08em; white-space:normal;overflow-wrap:anywhere; } .pf-menu[open]+.pf-navlinks form{display:flex} .pf-menu[open]+.pf-navlinks .pf-navlink--bouton{width:100%;text-align:left} /* Le jeton d'avatar redevient une ligne : rond de 28 px + libellé. Son anneau d'état courant ne survivrait pas au changement de forme — dans le menu, l'entrée courante se marque comme les autres, par le filet. */ .pf-menu[open]+.pf-navlinks .pf-avatar{ width:auto;height:auto;min-height:44px;border-radius:10px; background:none;box-shadow:none;display:flex;align-items:center;gap:10px; padding:0 6px;color:#46514e;font-size:16px;font-weight:500; } .pf-menu[open]+.pf-navlinks .pf-avatar:hover{background:rgba(15,61,62,.05)} .pf-menu[open]+.pf-navlinks .pf-avatar__init{ width:28px;height:28px;font-size:12px;flex:none; } .pf-menu[open]+.pf-navlinks .pf-avatar__nom{display:block} .pf-menu[open]+.pf-navlinks .pf-avatar[aria-current="page"]{ color:#0f3d3e; } .pf-menu[open]+.pf-navlinks .pf-avatar[aria-current="page"] .pf-avatar__nom{ text-decoration:underline;text-decoration-thickness:2px; text-underline-offset:8px;text-decoration-color:#1b7a6e; } } /* ---------- 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} /* Même filet, en émeraude : sur fond blanc, le #4aaa9a du thème sombre est trop pâle pour porter un trait de 2 px. */ .pf-nav--clair .pf-navlink[aria-current="page"]{color:#0f3d3e;text-decoration-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,summary):focus-visible{outline-color:#0f3d3e} /* Déconnexion est un