:root{ --brand-navy:#0b3268; --brand-coral:#f84c3a; --brand-coral-accessible:#c7392c; --navy:#0b3268; --navy-2:#1b4a86; --coral:#d94032; --coral-dark:#b72f28; } /* Identité officielle : deux maisons, chemin et signature de marque. */ .brand{ display:inline-flex!important; align-items:center!important; gap:10px!important; min-width:0; white-space:nowrap; color:var(--brand-navy)!important; text-decoration:none!important; } .brand::before{ content:""; display:block; flex:0 0 38px; width:38px; height:38px; border-radius:50%; background:#fff url("brand/logo-rond.jpeg") center/cover no-repeat; box-shadow:0 0 0 1px rgba(5,30,78,.12); } .brand>svg{display:none!important} .brand-name,.brand b{ font-family:"Poppins","DM Sans",sans-serif!important; font-weight:700!important; letter-spacing:-.035em!important; } /* Les couleurs officielles du mot-marque : premier mot navy, suite coral. L'enveloppe est forcée parce que les fiches portent une règle locale `.brand span{color:var(--coral)}` qui attrape AUSSI `.brand-name` — les 227 fiches affichaient le nom entier en coral (arbitrage rendu par Déb le 24/08/2026 : navy + coral partout). Le ciblage `.brand .brand-name` épargne volontairement `.footer-brand`, qui vit sur fond sombre. */ .brand .brand-name{color:var(--brand-navy)!important} .brand-name span,.brand b{color:var(--brand-coral)!important} .footer-brand{ width:min(360px,100%); height:auto; aspect-ratio:25/7; display:block!important; background:url("brand/logo-horizontal-dark.png") left center/contain no-repeat; } .footer-brand>*{display:none!important} .ptc-brand-signature{ display:block; margin-top:2px; color:var(--brand-navy); font:600 .58rem/1.25 "Syne","DM Sans",sans-serif; letter-spacing:.17em; text-transform:uppercase; } #onboarding .ob-brand{ display:block; width:min(390px,100%); height:auto; margin:0 0 22px; border-radius:12px; } .appbar .app-brand::before{width:34px;height:34px;flex-basis:34px} .appbar .app-brand .brand-name{font-size:.93rem} @media(max-width:560px){ .brand::before{width:34px;height:34px;flex-basis:34px} .brand-name{font-size:.9rem!important} } /* ------------------------------------------------------------------ EN-TÊTE ÉTROIT — le mot-marque ne doit jamais se peindre par-dessus l'action voisine. (Défaut relevé en recette le 24/08/2026.) Cause : `.brand` est un élément flex en `white-space:nowrap` avec `min-width:0`. Sa BOÎTE se comprime quand la ligne est trop courte, mais son TEXTE ne se replie pas et n'est pas rogné : il sort de la boîte et croise le libellé suivant. Les deux restent lisibles séparément, ce qui rend le défaut discret et permanent. Les rattrapages écrits jusqu'ici visaient `.site-header` et `.brand-name` : ils ne couvraient donc ni l'accueil (en-tête sans classe), ni le répertoire des fiches et /construire/autorisations/ (mot-marque en texte nu), ni les trente-cinq pages dont le mot-marque est un ``. Les règles ci-dessous ne s'accrochent plus à un gabarit mais à la situation : une marque et une action dans le même `nav`. ------------------------------------------------------------------ */ @media(max-width:820px){ /* Une seule action dans l'en-tête sur écran étroit : les libellés secondaires (« Toutes les fiches », ancres de page) sortent, l'action reste. Le répertoire des fiches demeure atteignable par le fil d'Ariane et le pied de page. */ header nav .nav-links a:not(.cta):not(.nav-cta), header nav .navlinks a:not(.cta):not(.nav-cta){display:none} /* Filet de sécurité, valable pour tout gabarit présent ou à venir : rogné par sa propre boîte, le mot-marque ne peut plus en sortir. */ header nav .brand{overflow:hidden} } @media(max-width:390px){ /* Sous 390 px, le disque officiel porte seul la marque. On borne la largeur au disque plutôt que de masquer un élément nommé : le mot-marque n'a pas le même balisage partout (`.brand-name`, ``, texte nu), et le nom du lien reste dans l'arbre accessible — ce que `display:none` détruirait. 34 px = le disque à cette largeur (voir la règle `max-width:560px` plus haut). */ header nav .brand:not(.app-brand){max-width:34px} } /* Continuité visuelle entre les pages publiques et l’espace projet. */ #app{background:#fbfcfe} #app h1,#app h2,#app h3,#app .fin-sec .fs-t{font-family:"Poppins","DM Sans",sans-serif!important} #app .eyebrow{font-family:"DM Sans",sans-serif!important;letter-spacing:.12em!important} #app header.appbar{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px);padding:12px 18px} #v-budget .ptc-fin-context{background:linear-gradient(135deg,#f3f8fd 0%,#fff 55%,#fff2ec 100%);border:1px solid #dfe5ec;border-radius:20px;padding:22px;margin-bottom:18px} #v-budget .ptc-fin-context h1{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.035em;margin:4px 0 8px} #v-budget .ptc-fin-context p{color:#647080;margin:0 0 15px;font-size:.9rem} #v-budget .ptc-fin-context nav{display:flex;flex-wrap:wrap;gap:8px} #v-budget .ptc-fin-context nav a,#v-budget .ptc-fin-context nav strong{border:1px solid #dfe5ec;border-radius:999px;padding:7px 11px;font-size:.74rem;text-decoration:none;color:#0b3268;background:#fff} #v-budget .ptc-fin-context nav strong{background:#0b3268;color:#fff;border-color:#0b3268} #v-budget .fin-sec{border-color:#dfe5ec;box-shadow:0 7px 22px rgba(26,45,74,.05)} #v-budget .fin-sec[open]>summary{background:#f2f6fa} /* ── Définition au survol — mécanisme COMMUN (Déb, 22/08/2026) ────────── Une définition au survol n'ajoute AUCUN texte visible : elle ouvre la route vers l'explication sans alourdir la page. C'est ce qui permet de tenir ensemble le principe d'allègement et la règle du non-cul-de-sac. Usage : le terme Le tabindex n'est pas décoratif : sans lui, la définition est inaccessible à qui navigue au clavier. */ .ptc-def{border-bottom:1px dotted var(--coral-dark,#c4400f);cursor:help;position:relative;font-style:normal} .ptc-def:hover::after,.ptc-def:focus::after{content:attr(data-def);position:absolute;left:0;bottom:calc(100% + 7px);z-index:80;min-width:210px;max-width:330px;background:var(--navy,#1a2d4a);color:#fff;font-size:.78rem;font-weight:400;line-height:1.5;padding:9px 12px;border-radius:10px;box-shadow:0 10px 26px rgba(26,45,74,.22);white-space:normal} .ptc-def:focus{outline:2px solid var(--coral,#e8541a);outline-offset:2px} @media(max-width:520px){.ptc-def:hover::after,.ptc-def:focus::after{left:auto;right:0;min-width:170px;max-width:74vw}} /* Statuts éditoriaux communs aux pages-outils et aux fiches. */ .ptc-pastille{display:inline-block;margin:3px 0 3px 8px;padding:2px 8px;border:1px solid #d8d0c5;border-radius:999px;background:#fff;color:#5b6573;font-family:"Poppins","DM Sans",sans-serif;font-size:.67rem;font-weight:800;line-height:1.35;vertical-align:middle} .ptc-pastille--legale{border-color:#9ebbd4;background:#eaf3fb;color:#1a2d4a} .ptc-pastille--conditionnelle{border-color:#dfb457;background:#fff8e8;color:#704b00} .ptc-pastille--conseil{border-color:#e7a383;background:#fff1e8;color:#8f2d0c} @media(min-width:940px){ /* Largeur du rail et gouttiere : UNE SEULE SOURCE. La regle jumelle de app/index.html portait les memes chiffres en dur : les deux ont derive, et celle-ci gagnait par !important sans qu'on le voie. */ :root{--ptc-rail-w:208px;--ptc-rail-gap:24px} #app{max-width:min(960px, calc(100vw - 500px))!important} #app .view{padding-left:28px;padding-right:28px} #app nav.tabs.tabs-9{width:var(--ptc-rail-w)!important; left:max(16px, calc(50% - 480px - var(--ptc-rail-w) - var(--ptc-rail-gap)))!important} #v-budget .fin-sec .fs-b{padding:18px 20px} } /* ===== P1 · Uniformisation site <-> app (cadrage du 14/08/2026) ===== En-tête commun, extrait des pages-outils (référence : /construire/budget/). Patron HTML côté pages :
Les pages actuelles portent encore ce patron en styles locaux équivalents (.site-header / .nav / .nav-cta) ; leur bascule vers ces classes se fait en P2 (vocabulaire de composants), page par page. L'app l'adopte en VERSION RÉDUITE (arbitrage n° 1 validé le 15/08/2026) : brand + « Retour au site » + Compte dans header.appbar, au-dessus de sa barre d'onglets. */ .ptc-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line,#e4e0d6);backdrop-filter:blur(10px)} .ptc-header-nav{max-width:1080px;margin:auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px} .ptc-header-cta{background:var(--coral,#d94032);color:#fff;text-decoration:none;font-weight:700;font-size:.84rem;padding:9px 15px;border-radius:999px;white-space:nowrap} /* En-tête réduit de l'app : lien de retour vers le site, même famille que le CTA des pages. */ .appbar .hdr-retour{display:inline-flex;align-items:center;gap:6px;color:#41546e;text-decoration:none;font:700 .74rem/1 "DM Sans",sans-serif;border:1px solid var(--line,#e4e0d6);border-radius:999px;padding:7px 11px;background:#fff;white-space:nowrap} .appbar .hdr-retour:hover{border-color:#b9c6d8;color:var(--brand-navy)} @media(max-width:430px){ .appbar .hdr-retour span{display:none} .appbar .hdr-retour{padding:7px 9px} } /* ------------------------------------------------------------------ « À QUOI SERT CETTE PAGE » — le bloc d'objet, commun aux deux surfaces. Règle 2 de Déb du 22/08. L'application le portait déjà sur ses quarante onglets sous ce nom de classe ; la définition remonte ici pour que les pages du site l'utilisent SANS LA RECOPIER — même code, pas une ressemblance. L'app garde sa règle locale tant qu'elle n'est pas retirée : identique au caractère près, elle ne produit aucun écart. Deux parties, et la seconde est facultative : ce que la page FAIT, puis ce qu'il faut RETENIR — la phrase qu'on emporte même sans se servir de l'outil. Jamais de liste : des phrases qui expliquent. ------------------------------------------------------------------ */ .fo-but{border-left:3px solid var(--coral,#d94032);background:#fffaf7;border-radius:0 12px 12px 0;padding:12px 15px;margin:0 0 16px} .fo-but__o{margin:0 0 5px;font-family:'Syne','Poppins',sans-serif;font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--coral,#d94032)} .fo-but__t{margin:0;font-size:.87rem;line-height:1.6;color:#3c4a5e} .fo-but__r{margin:9px 0 0;padding-top:9px;border-top:1px dashed #f0dcd2;font-size:.85rem;line-height:1.6;color:#3c4a5e} .fo-but__r b{color:#1a2d4a} /* Pied commun côté app : mention P0-05 (même libellé que sur les pages-outils), liens légaux et signature, au-dessus de la barre d'onglets fixe. */ #app .app-footer{margin-top:auto;padding:4px 18px calc(78px + env(safe-area-inset-bottom))} #app .app-footer .af-note{max-width:1050px;margin:0 auto;padding:13px 0;color:#647080;font-size:.8rem;line-height:1.55;border-top:1px solid #e5e0d7} #app .app-footer .af-note strong{color:#1a2d4a} #app .app-footer .af-note a{color:#c4400f;font-weight:800} #app .app-footer .af-links{margin:6px 0 0;text-align:center;font-size:.74rem;color:#647080} #app .app-footer .af-links a{color:#41546e;text-decoration:none} #app .app-footer .af-links a:hover{text-decoration:underline} #app .app-footer .af-copy{margin:6px 0 0;text-align:center;font-size:.7rem;color:#8b97a6} /* --- LE COMPTEUR DE PIÈCES, composant partagé (23/08/2026) ----------------- Premier composant écrit sous la règle posée par Déb le même jour : une fois, en feuille partagée, sous un seul nom, chargé par les deux surfaces. Il dit ce qui est rangé sur ce qui est attendu, et son état se lit AVANT le chiffre : vide, entamé, complet. Le site porte encore son propre `.enc-suivi`, qui compte autre chose (les contrôles faits) ; il adoptera celui-ci à la passe de convergence des composants existants. */ .ptc-compte{display:inline-block;font-family:"Poppins",sans-serif;font-weight:800;font-size:.68rem;line-height:1;border-radius:999px;padding:3px 8px;font-variant-numeric:tabular-nums;background:#e4e9f0;color:#647080} .ptc-compte--vide{background:#f3e3dc;color:#a8410f} .ptc-compte--partiel{background:#fbecd8;color:#8a5a2b} .ptc-compte--plein{background:#dcece4;color:#1f7a52} /* Qualification éditoriale du conseil déjà présent dans les fiches. Le libellé devient une vraie pastille de statut sans dupliquer le texte ni transformer un conseil PTC en obligation. Chargé par toutes les fiches. */ .mc-tip .mc-name.ptc-pastille--conseil{display:inline-block;width:auto;margin:0 0 5px;padding:2px 8px;border:1px solid #e7a383;border-radius:999px;background:#fff1e8;color:#8f2d0c;font-family:"Poppins","DM Sans",sans-serif;font-size:.67rem;font-weight:800;line-height:1.35;letter-spacing:.02em;vertical-align:middle} /* UNE ANCRE NE DOIT PAS ATTERRIR SOUS L EN-TETE (17/09/2026). L en-tete du site est COLLANT : sans marge de defilement, le lecteur qui clique un lien interne arrive sur un titre cache dessous et croit que le lien n a rien fait. Mesure du jour : 31 pages publiques ont un en-tete collant ET des liens d ancre ; presque aucune ne posait de marge, et les rares valeurs figees (80, 86 px) etaient fausses pour un en-tete qui fait 64 px en etroit et 107 en large. La hauteur reelle est posee par ptc-entete.js ; le repli sert les pages qui ne le chargent pas encore. Les douze pixels sont la respiration entre l en-tete et le titre. */ html{scroll-padding-top:calc(var(--ptc-header-height,72px) + 12px)}