@charset "UTF-8";
/* PTC — le module Budget CHEZ SON HÔTE PUBLIC. Feuille d'ADAPTATION, pas de
   composant : elle accompagne `ptc-budget-invite.js`, qui monte le module en
   mode invité sur /construire/budget/, /construire/financement/ et
   /construire/ptz/. Elle n'est PAS chargée par l'application.

   POURQUOI DEUX FEUILLES, ET OÙ PASSE LA FRONTIÈRE (convergence du 10/09/2026).
   `ptc-budget.css` porte le composant : les 39 classes que le seul
   ptc-budget.js emploie — `fin-*`, `dem-*`, `sf-*`, `btotal`, `fs-b` —, écrites
   UNE fois et chargées par les deux surfaces. Cette feuille-ci ne porte que ce
   que l'HÔTE doit fournir : le vocabulaire général que l'application définit
   chez elle (`.btn`, `.card`, `.chip`, `.mut`, `.small`, les champs) et dont
   une page publique ne dispose pas. Ce n'est pas un doublon du composant,
   c'est le sol sur lequel il se pose.

   ON NE RECOPIE PAS LA FEUILLE DE L'APP. Son `.chip` vaut `color:#fff` sur
   `rgba(255,255,255,.08)` — dessiné pour sa colonne sombre. Posé sur une page
   blanche il donnerait du blanc sur blanc, PIRE que nu. Son `.btn` vaut
   `display:block;width:100%`, soit une dalle corail pleine largeur sur 1100 px.
   Les mêmes noms y désignent deux objets différents : c'est exactement ce que
   la convention interdit, et c'était déjà posé avant nous.

   TOUT EST CLOISONNÉ SOUS `[data-ptc-budget]`. `/construire/financement/`
   charge `ptc-step-page.css`, qui définit ses propres `.btn`, `.card` et
   `.small` : ceux-là doivent rester intacts HORS du bloc. Dedans, la
   spécificité (0,2,0) tranche proprement.

   REPLIS DE VARIABLES, mesurés surface par surface le 07 puis le 10/09 :
   `--mut` existe sur budget et ptz mais PAS sur financement, qui porte
   `--muted`. Une `var()` non définie n'affiche aucune erreur — elle rend la
   déclaration invalide en silence et la couleur retombe sur l'héritage. */

/* ------------------------------------------------- le sélecteur de surface
   Le module ouvre sur trois repères — « Calcul public », « Dossier bancaire »,
   « Espace projet · suivi » — dans un <nav> SANS classe (ptc-budget.js). Sans
   règle, les trois libellés se touchaient et se lisaient comme une seule
   phrase : « Calcul publicDossier bancaireEspace projet · suivi ». */
[data-ptc-budget] .ptc-fin-context nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;
  font-size:.82rem;font-weight:700}
[data-ptc-budget] .ptc-fin-context nav a{color:var(--coral-dark,#c4400f)}
[data-ptc-budget] .ptc-fin-context nav strong{color:var(--navy,#1a2d4a)}

/* ------------------------------------------------------------------ boutons
   Le bloc est posé sur une page large : les actions restent en ligne, à leur
   largeur de texte, jamais en dalle pleine largeur comme dans l'application. */
[data-ptc-budget] .btn,
[data-ptc-budget] .btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border-radius:10px;padding:10px 15px;
  font:700 .87rem/1.2 "DM Sans",system-ui,sans-serif;
  text-decoration:none;cursor:pointer;border:1px solid transparent}
[data-ptc-budget] .btn{background:var(--coral,#e8541a);color:#fff}
[data-ptc-budget] .btn:hover{background:var(--coral-dark,#c4400f)}
[data-ptc-budget] .btn:disabled{opacity:.42;cursor:default}
/* La variante fantôme s'écrit de deux façons dans le module — `.btn-ghost`
   pour les actions secondaires, `.btn.ghost` pour « Restaurer une sauvegarde ».
   Les deux existent dans le HTML rendu : on habille les deux plutôt que de
   renommer dans un fichier de 126 Ko. */
[data-ptc-budget] .btn-ghost,
[data-ptc-budget] .btn.ghost{
  background:#fff;color:var(--navy,#1a2d4a);
  border-color:var(--line,#dfe5ec);font-weight:700}
[data-ptc-budget] .btn-ghost:hover,
[data-ptc-budget] .btn.ghost:hover{border-color:var(--coral,#e8541a)}
[data-ptc-budget] .btn:focus-visible,
[data-ptc-budget] .btn-ghost:focus-visible{outline:3px solid #79aee0;outline-offset:2px}

/* La rangée d'actions du module porte son `display:flex;gap:8px` EN LIGNE
   (ptc-budget.js) : le style en ligne l'emporte, on ne le combat pas. Il ne
   manquait que l'air au-dessus. */
[data-ptc-budget] .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ------------------------------------------------------------------- cartes */
[data-ptc-budget] .card{
  background:#fff;border:1px solid var(--line,#dfe5ec);border-radius:14px;
  padding:16px 18px;margin-bottom:14px}

/* --------------------------------------------------------- champs de saisie
   Aucune feuille de ces trois pages ne stylait `input`, `select` ni `label` :
   les champs étaient en défaut navigateur, sans rythme ni alignement. */
[data-ptc-budget] label{
  display:block;font-size:.82rem;font-weight:700;
  color:var(--navy,#1a2d4a);margin:12px 0 5px}
[data-ptc-budget] input[type=text],
[data-ptc-budget] input[type=number],
[data-ptc-budget] input[type=date],
[data-ptc-budget] input:not([type]),
[data-ptc-budget] select,
[data-ptc-budget] textarea{
  width:100%;max-width:320px;box-sizing:border-box;
  border:1.5px solid var(--line,#dfe5ec);border-radius:10px;
  padding:9px 11px;font:inherit;background:#fff;color:var(--ink,#22293a)}
[data-ptc-budget] input:focus,
[data-ptc-budget] select:focus,
[data-ptc-budget] textarea:focus{
  outline:0;border-color:var(--coral,#e8541a)}
[data-ptc-budget] .dgrid label{margin-top:12px}

/* --------------------------------------------- replis « pour aller plus loin » */
[data-ptc-budget] details.adv{
  background:#fff;border:1px solid var(--line,#dfe5ec);
  border-radius:12px;padding:2px 15px;margin:12px 0}
[data-ptc-budget] details.adv summary{
  font-weight:700;color:var(--navy,#1a2d4a);font-size:.88rem;
  padding:11px 0;cursor:pointer}
[data-ptc-budget] details.adv[open] summary{
  border-bottom:1px solid var(--line,#dfe5ec);margin-bottom:10px}

/* ------------------------------------------------------------ montants en vue
   `.prixbox` et `.pl-go` sont désormais écrits UNE fois dans
   `ptc-blocs-partages.css`, chargée par les deux surfaces. Ne restent ici
   que les écarts propres à une page large : de l’air autour du bandeau et
   un retour à la ligne quand le montant ne tient plus à côté du libellé.
   L’application n’a ni l’un ni l’autre, et ne doit pas les recevoir. */
[data-ptc-budget] .prixbox{margin:12px 0;gap:14px;flex-wrap:wrap}

/* `.btotal` est COLLANT dans le composant, calé au-dessus de la barre
   d'onglets de l'application (`bottom:88px`). Cette barre n'existe pas sur une
   page publique, où deux pastilles flottantes occupent déjà le bas de l'écran :
   on le remet dans le flux ICI, sans toucher au composant. C'est la
   composition qui diffère, jamais le composant. */
[data-ptc-budget] .btotal{position:static;margin:12px 0}

/* --------------------------------------------------------------- pastilles
   Les trois pastilles du bloc sont toutes dans `.fin-mode`, dont le composant
   porte déjà la variante claire. Cette règle-ci n'est qu'un filet pour un état
   où le module en rendrait hors de ce conteneur : sans elle, elles hériteraient
   du blanc-sur-blanc de l'application. */
[data-ptc-budget] .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
[data-ptc-budget] .chip{
  border:1.5px solid var(--line,#dfe5ec);background:#fff;
  color:var(--ink,#22293a);border-radius:999px;padding:8px 15px;
  font:700 .82rem/1.3 "DM Sans",system-ui,sans-serif;cursor:pointer}
[data-ptc-budget] .chip:hover{border-color:var(--coral,#e8541a)}
[data-ptc-budget] .chip.sel{
  background:var(--coral,#e8541a);border-color:var(--coral,#e8541a);color:#fff}
[data-ptc-budget] .chips.ob-col{flex-direction:column;align-items:stretch}
[data-ptc-budget] .chips.ob-col .chip{
  text-align:left;white-space:normal;line-height:1.35;padding:11px 14px}

/* ---------------------------------------------------- l'appui pédagogique */
[data-ptc-budget] .ped-callout{
  background:linear-gradient(135deg,#fff7f3,#fff);
  border:1px solid #f2c7b4;border-left:5px solid var(--coral,#e8541a);
  border-radius:14px;padding:14px 16px;margin:12px 0 16px;
  display:flex;gap:12px;align-items:flex-start}
[data-ptc-budget] .ped-callout .ped-icon{line-height:1;flex:0 0 auto}
[data-ptc-budget] .ped-callout b{display:block;color:var(--navy,#1a2d4a);margin-bottom:3px}
[data-ptc-budget] .ped-callout p{margin:0;font-size:.82rem;color:var(--mut,var(--muted,#647080))}
[data-ptc-budget] .ped-callout button{margin-top:9px}

/* `.mut` est défini sur budget et ptz mais PAS sur financement, dont la feuille
   porte `--muted` : sans cette ligne, 27 éléments y restent à pleine encre au
   lieu d'être en retrait. Mesuré le 07/09. */
[data-ptc-budget] .mut{color:var(--mut,var(--muted,#647080))}
[data-ptc-budget] .small{font-size:.79rem}

@media(max-width:560px){
  [data-ptc-budget] input[type=text],
  [data-ptc-budget] input[type=number],
  [data-ptc-budget] select{max-width:100%}
  [data-ptc-budget] .btn,
  [data-ptc-budget] .btn-ghost{width:100%}
  [data-ptc-budget] .ped-callout{padding:13px}
}
