/* L'espace Albedo en application : on sort du site.
   Barre laterale encre, scene papier, accents pollen — le langage
   « Workspace » de l'app Albedo, transpose ici. Les cartes et graphiques
   viennent de compte.css ; cette feuille pose la coquille, l'entree en
   lever de soleil, et adapte les couleurs au fond clair. */

.app-corps{background:var(--eggshell);color:var(--evergreen);min-height:100dvh}

/* --- Coquille ------------------------------------------------------------ */
.app{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:100dvh}

.app-flanc{position:sticky;top:0;display:flex;height:100dvh;flex-direction:column;
  padding:26px 20px;background:var(--evergreen);color:var(--eggshell)}
.app-marque{display:grid;gap:8px;padding:6px 8px 30px;color:inherit;text-decoration:none}
.app-marque img{display:block;width:132px;height:auto}
.app-marque small{color:var(--pollen);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

.app-nav{display:flex;flex:1;flex-direction:column;gap:4px}
.app-nav a{padding:11px 12px;border-radius:6px;color:rgba(245,242,225,.62);font-size:.9rem;
  font-weight:650;text-decoration:none;transition:background .15s,color .15s}
.app-nav a:hover,.app-nav a:focus-visible{background:rgba(245,242,225,.09);color:var(--eggshell)}

.app-retour{margin:10px 0 16px;padding:9px 12px;color:var(--pollen);font-size:.78rem;font-weight:750;
  text-decoration:none;border-top:1px solid rgba(245,242,225,.14)}
.app-retour:hover{color:var(--eggshell)}

.app-compte{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid rgba(245,242,225,.14)}
.app-compte div{min-width:0}
.app-compte strong,.app-compte span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-compte strong{font-size:.8rem}
.app-compte span{color:var(--teal);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em}
.app-compte button{display:grid;width:36px;height:36px;place-items:center;border:0;border-radius:50%;
  background:rgba(245,242,225,.1);color:inherit;font-size:1rem;cursor:pointer;transition:background .15s}
.app-compte button:hover{background:var(--tangerine);color:var(--white)}

/* --- Scene --------------------------------------------------------------- */
.app-scene{min-width:0;padding:clamp(28px,4.5vw,58px) clamp(22px,4.5vw,64px) 40px}
.app-chargement{margin:40px 0;color:rgba(12,29,21,.6)}

.app-tete{margin-bottom:30px}
.app-sur-titre{display:block;margin-bottom:10px;color:#4d675d;font-size:.78rem;font-weight:850;
  letter-spacing:.14em;text-transform:uppercase}
.app-tete h1{margin:0;font-size:clamp(2.6rem,6vw,4.8rem);font-weight:750;line-height:.92;letter-spacing:-.06em}

.app-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0 44px;padding:0}
.app-kpis article{display:grid;gap:4px;padding:22px 24px;border:1px solid rgba(12,29,21,.14);border-radius:8px}
.app-kpis strong{font-size:2.1rem;line-height:1;letter-spacing:-.03em}
.app-kpis span{color:#5a6b63;font-size:.78rem;line-height:1.4}

.app-pied{display:flex;gap:18px;flex-wrap:wrap;margin-top:56px;padding-top:20px;
  border-top:1px solid rgba(12,29,21,.14);font-size:.78rem;color:rgba(12,29,21,.55)}
.app-pied a{color:inherit;text-decoration-color:var(--pollen);text-decoration-thickness:2px;text-underline-offset:3px}

/* --- Adaptation des composants au fond clair ----------------------------- */
/* compte.css les a dessines pour la page sombre : ici les titres reprennent
   l'encre, les cartes gagnent un lisere, les messages aussi. */
.app-scene .espace-section h2{color:var(--evergreen)}
.app-scene .espace-carte,.app-scene .espace-form{box-shadow:none;border:1px solid rgba(12,29,21,.14)}
.app-scene .espace-vide{color:rgba(12,29,21,.62)}
.app-scene .espace-message{color:var(--evergreen)}
.app-scene .espace-message.error{color:var(--tangerine-ink)}
.app-scene .espace-form{background:var(--white)}

/* --- Le lever de soleil -------------------------------------------------- */
/* Un voile vert sapin couvre tout ; le soleil monte, son halo s'etend, puis
   le voile se retire vers le haut et decouvre le tableau de bord. Une fois
   par session ; rien du tout si l'utilisateur prefere moins de mouvement. */
.lever{position:fixed;inset:0;z-index:60;background:var(--evergreen);overflow:hidden;
  pointer-events:none;opacity:1}
.lever-soleil{position:absolute;left:50%;top:62%;width:74px;height:74px;border-radius:50%;
  background:var(--pollen);transform:translate(-50%,-50%);
  box-shadow:0 0 0 18px rgba(255,206,59,.05),0 0 90px 30px rgba(255,206,59,.3)}
.lever-halo{position:absolute;left:50%;top:62%;width:900px;height:900px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  background:radial-gradient(circle,rgba(255,206,59,.32),rgba(255,206,59,.06) 45%,transparent 70%)}

.lever.parti{animation:lever-voile .7s ease-in .9s forwards}
.lever.parti .lever-soleil{animation:lever-monte .9s cubic-bezier(.2,.7,.3,1) forwards}
.lever.parti .lever-halo{animation:lever-rayonne .9s ease-out .15s forwards}
.lever.absent{display:none}

@keyframes lever-monte{from{top:62%}to{top:30%}}
@keyframes lever-rayonne{from{transform:translate(-50%,-50%) scale(.2);opacity:0}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes lever-voile{from{transform:translateY(0);opacity:1}
  to{transform:translateY(-100%);opacity:.9}}

@media(prefers-reduced-motion:reduce){
  .lever{display:none}
}

/* --- Telephone ----------------------------------------------------------- */
/* La barre laterale devient un bandeau : marque a gauche, retour et sortie a
   droite. Les ancres de sections restent utiles au defilement. */
@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .app-flanc{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;
    padding:14px 18px}
  .app-marque{flex:1;padding:0;gap:2px}
  .app-marque img{width:108px}
  .app-nav{display:none}
  .app-retour{margin:0;padding:8px 10px;border:0}
  .app-compte{padding:0;border:0}
  .app-compte div{display:none}
  .app-kpis{grid-template-columns:1fr;gap:10px;margin:20px 0 30px}
  .app-scene{padding:22px 16px 30px}
  .app-tete h1{font-size:2.1rem}
}

/* --- Le recit du projet : frise et fil ----------------------------------- */
.projet-carte{padding:clamp(22px,3vw,34px);border:1px solid rgba(12,29,21,.14);
  border-radius:10px;background:var(--white)}
.projet-carte h3{margin:0 0 20px;font-size:1.25rem;letter-spacing:-.02em}

.frise{display:flex;gap:0;list-style:none;margin:0 0 22px;padding:0;flex-wrap:wrap}
.frise-etape{position:relative;flex:1;min-width:86px;display:grid;gap:8px;
  justify-items:center;text-align:center;padding:0 4px}
.frise-etape::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;
  background:rgba(12,29,21,.15)}
.frise-etape:first-child::before{display:none}
.frise-etape--faite::before{background:var(--pollen)}
.frise-etape--en-cours::before{background:var(--pollen)}
.frise-point{width:16px;height:16px;border-radius:50%;border:2px solid rgba(12,29,21,.25);
  background:var(--white);z-index:1}
.frise-etape--faite .frise-point{background:var(--pollen);border-color:var(--pollen)}
.frise-etape--en-cours .frise-point{background:var(--evergreen);border-color:var(--evergreen);
  box-shadow:0 0 0 5px rgba(255,206,59,.35)}
.frise-nom{font-size:.78rem;font-weight:750;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(12,29,21,.45);line-height:1.25}
.frise-etape--faite .frise-nom{color:rgba(12,29,21,.7)}
.frise-etape--en-cours .frise-nom{color:var(--evergreen)}

.projet-fil{list-style:none;margin:0 0 20px;padding:14px 16px;border-left:3px solid var(--pollen);
  background:var(--eggshell);border-radius:0 8px 8px 0;display:grid;gap:9px}
.projet-fil li{display:grid;grid-template-columns:86px 1fr;gap:12px;font-size:.88rem;line-height:1.5}
.projet-fil time{color:rgba(12,29,21,.5);font-size:.78rem;font-weight:700;padding-top:2px}

.projet-action{display:flex;align-items:center;gap:14px}
.projet-main-kelveen{margin:0;font-size:.92rem;font-weight:650;color:#3d5a4d}

.admin-pipeline{margin-top:18px}
.admin-projet-outils{display:grid;gap:8px}
.admin-projet-outils select,.admin-projet-outils input{padding:9px 10px;border:1.5px solid var(--line);
  border-radius:6px;background:var(--white);font:inherit;font-size:.85rem}

@media(max-width:860px){
  .frise-nom{font-size:.74rem}
  .projet-fil li{grid-template-columns:1fr}
  .projet-fil time{padding:0}
}

/* --- Facades & scenarios ------------------------------------------------- */
.facade-detail{margin:0 0 14px;font-size:.9rem}
.facade-detail summary{cursor:pointer;font-weight:750;color:rgba(12,29,21,.66);padding:4px 0}
.facade-liste{list-style:none;margin:10px 0;padding:0;display:grid;gap:8px}
.facade-liste li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid rgba(12,29,21,.12);border-radius:6px;background:var(--eggshell)}
.facade-liste .button{padding:7px 14px;font-size:.8rem}
.facade-ajout{display:grid;grid-template-columns:1fr 74px 64px auto;gap:6px;margin-top:8px}
.facade-ajout input{padding:8px 9px;border:1.5px solid var(--line);border-radius:6px;
  background:var(--white);font:inherit;font-size:.82rem;min-width:0}
.facade-ajout .button{padding:8px 12px;font-size:.78rem;white-space:nowrap}
@media(max-width:640px){.facade-ajout{grid-template-columns:1fr 1fr}}

.projet-detail{margin:0 0 10px;border:1px solid rgba(12,29,21,.14);border-radius:10px;
  background:var(--white);padding:0}
.projet-detail summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;cursor:pointer;font-weight:750;font-size:1.05rem}
.projet-detail[open] summary{border-bottom:1px solid rgba(12,29,21,.1)}
.projet-detail > *:not(summary){margin-left:20px;margin-right:20px}
.projet-detail > .projet-action{margin-bottom:18px}
.projet-detail > .frise{margin-top:18px}
.projet-chip{padding:5px 10px;border-radius:999px;background:var(--eggshell);
  font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:rgba(12,29,21,.7)}
.projet-chip--etude,.projet-chip--proposition{background:#fff0ba;color:#755600}
.projet-chip--chantier{background:#ffe2d6;color:#8d3a1d}
.projet-chip--garantie,.projet-chip--suivi{background:#d6e9d8;color:#245d33}

/* --- Le croquis ---------------------------------------------------------- */
.mode-bascule{display:flex;gap:8px;margin-bottom:18px}
.mode-onglet{padding:10px 16px;border:1.5px solid rgba(12,29,21,.2);border-radius:999px;
  background:transparent;color:rgba(12,29,21,.6);font:750 .85rem/1 var(--font-body);cursor:pointer}
.mode-onglet--actif{background:var(--evergreen);border-color:var(--evergreen);color:var(--eggshell)}

/* L'atelier prend la place : pleine colonne par defaut, plein ecran au bouton.
   Un timbre-poste pour dessiner un batiment, c'etait ridicule. */
.croquis{display:grid;gap:16px;padding:clamp(20px,3vw,30px);min-width:0;
  border:1px solid rgba(12,29,21,.14);border-radius:10px;background:var(--white)}
/* Sans min-width:0, un enfant large (le tableau des facades, sept colonnes)
   elargit la piste de grille et fait deborder toute la carte sur telephone.
   C'est le debordement de grille classique, invisible sur grand ecran. */
.croquis > *{min-width:0}
.croquis-entete{grid-template-columns:1fr 1fr}
@media(min-width:700px){.croquis-entete{grid-template-columns:1.4fr 1fr .6fr 1fr 1fr}}
.croquis-etat{margin:0;font-size:.88rem;font-weight:650;color:#3d5a4d;min-height:1.4em}
.croquis [data-croquis-scene]{width:100%;max-width:min(72vh,860px);aspect-ratio:1;display:block;
  margin:0 auto;border:1.5px solid rgba(12,29,21,.2);border-radius:8px;background:var(--eggshell);
  cursor:crosshair;touch-action:none}
/* Le cadre porte la scene ET ses outils : ils flottent sur le dessin, a
   portee de main. Le cadre prend la taille de la scene ; la scene le remplit. */
.croquis-scene-cadre{position:relative;width:100%;max-width:min(72vh,860px);margin:0 auto}
.croquis .croquis-scene-cadre [data-croquis-scene]{max-width:none;margin:0}
.croquis-outils{position:absolute;top:10px;left:10px;z-index:4;display:flex;flex-direction:column;gap:6px}
.croquis-outil{display:grid;place-items:center;width:38px;height:38px;padding:0;
  border:1px solid rgba(12,29,21,.18);border-radius:8px;background:rgba(255,253,244,.94);
  color:var(--evergreen);font-size:1.05rem;line-height:1;cursor:pointer;
  box-shadow:0 1px 6px rgba(12,29,21,.14);backdrop-filter:blur(6px);
  transition:background .15s,transform .15s,opacity .15s}
.croquis-outil:hover{background:var(--white);transform:translateY(-1px)}
.croquis-outil:focus-visible{outline:3px solid var(--pollen);outline-offset:1px}
.croquis-outil:disabled{opacity:.32;cursor:default;transform:none;box-shadow:none}
.croquis-outil--plein{position:absolute;right:10px;bottom:10px;z-index:4;width:42px;height:42px;
  background:var(--pollen);border-color:var(--pollen);font-size:1.15rem}
.croquis-outil--plein:hover{background:#ffd75e}
.croquis-astuce-zoom{margin:-6px 0 0;text-align:center;color:rgba(12,29,21,.45);font-size:.72rem}

/* Plein ecran : la meme carte, posee sur tout l'ecran. Echap pour sortir. */
/* Plein ecran : LA SCENE, en grand, avec ses outils - et rien d'autre.
   L'ancienne version empilait tout l'atelier (recherche, fiche, tableau,
   formulaire) dans l'overlay, la scene perdue au milieu : affreux, a juste
   titre. Ici on masque tout ce qui n'est pas le dessin. */
.croquis--plein{position:fixed;inset:0;z-index:90;max-width:none;margin:0;
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;
  border-radius:0;border:0;overflow:hidden;padding:14px clamp(14px,3vw,36px);
  background:var(--evergreen)}
/* Specificite renforcee (.croquis.croquis--plein) : les regles de base
   ciblent .croquis-recherche etc. avec la meme force, et gagnaient. */
.croquis.croquis--plein > *{display:none !important}
.croquis.croquis--plein > .croquis-etat,
.croquis.croquis--plein > .croquis-scene-cadre,
.croquis.croquis--plein > .croquis-astuce-zoom{display:block !important}
.croquis.croquis--plein > .croquis-etat{color:var(--eggshell);margin:0}
.croquis.croquis--plein > .croquis-astuce-zoom{color:rgba(245,242,225,.6)}
/* Le carre prend le plus grand cote qui tient : la hauteur disponible sur un
   ecran large, la largeur sur un ecran etroit. Les outils suivent, dans le cadre. */
.croquis.croquis--plein > .croquis-scene-cadre{width:min(100%,calc(100dvh - 120px));
  max-width:none;margin:0 auto;align-self:center}
.croquis.croquis--plein > .croquis-scene-cadre > [data-croquis-scene]{width:100%;height:auto;
  max-height:none;aspect-ratio:1;border-color:rgba(245,242,225,.25)}
body.croquis-plein-ouvert{overflow:hidden}

.croquis-volet-modele div{display:flex;align-items:center;gap:6px}
.croquis-volet-modele input{width:72px}
.croquis-volet-modele span{color:rgba(12,29,21,.45);font-weight:700}

/* La teinte d'exposition de chaque facade, sous le contour : la meme couleur
   que sa pastille dans le tableau et que le plan de l'espace. Voir
   CAHIER_DES_CHARGES_ESPACE_2026-08-18.md, partie 4.2. */
.croquis-teinte{stroke-width:10;stroke-linecap:butt}
/* Pas d'opacite : elle recomposait la teinte avec le creme et faisait
   retomber le contraste sous 3:1. Le bandeau est large, le contour et
   les volets se posent dessus — il reste un halo de 2 px de chaque cote. */

/* Les volets a l'echelle le long des aretes ; orange quand ils debordent. */
.croquis-volet{stroke:var(--evergreen);stroke-width:5;stroke-linecap:butt;opacity:.75}
.croquis-volet--deborde{stroke:var(--tangerine);opacity:1}
.croquis-casquette{stroke:#3d5a4d;stroke-width:2;stroke-dasharray:5 3;opacity:.8}
.croquis-note-volets{margin:4px 0 0;font-size:.76rem;color:rgba(12,29,21,.5)}

/* --- L'analyse ROI : ou investir d'abord ---------------------------------- */
.espace-carte-actions{display:flex;flex-wrap:wrap;gap:10px}
.roi-zone{margin-top:14px;padding-top:14px;border-top:1px dashed rgba(12,29,21,.18)}
/* Un batiment par ligne : sa carte porte le tableau des facades et le
   classement ROI, sept colonnes qui n'ont rien a faire dans 290 px. */
.espace-grille[data-liste-batiments]{grid-template-columns:1fr}
.espace-detail-chiffre{font-size:.72rem;font-weight:600;color:rgba(12,29,21,.5)}
.edition-paire{display:inline-flex;align-items:center;gap:6px}
.edition-paire input{width:76px}
.edition-note{margin:8px 0 0;font-size:.78rem;color:rgba(12,29,21,.55)}
.espace-carte--analyse h3{font-size:1rem}
.analyse-jauge{height:6px;margin:6px 0 10px;border-radius:3px;background:rgba(12,29,21,.1);overflow:hidden}
.analyse-jauge i{display:block;height:100%;background:var(--pollen)}
.roi-etat{margin:0;font-size:.85rem;color:rgba(12,29,21,.6)}
.roi-titre{margin:0 0 8px;font-size:.95rem;letter-spacing:-.01em}
.roi-table td{white-space:nowrap}
.roi-meilleure td{background:rgba(255,206,59,.16)}
.roi-badge{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:99px;
  background:var(--pollen);color:var(--evergreen);font-size:.74rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.roi-note{margin:8px 0 0;font-size:.76rem;line-height:1.5;color:rgba(12,29,21,.5)}
.croquis-grille{stroke:rgba(12,29,21,.07);stroke-width:1;fill:none}
.croquis-contour{stroke:var(--evergreen);stroke-width:2.5;fill:none;stroke-linejoin:round}
.croquis-contour--ferme{fill:rgba(255,206,59,.18)}
.croquis-sommet{fill:var(--evergreen)}
.croquis-sommet--fermeture{fill:var(--pollen);stroke:var(--evergreen);stroke-width:2}
.croquis-etiquette{font:800 11px var(--font-body);fill:#3d5a4d;text-anchor:middle}
.croquis-surbrillance{stroke:var(--tangerine);stroke-width:5;stroke-linecap:round}
.croquis-nord circle{fill:var(--white);stroke:rgba(12,29,21,.25);stroke-width:1.5}
.croquis-nord path{fill:var(--tangerine)}
.croquis-nord text{font:800 10px var(--font-body);fill:var(--evergreen);text-anchor:middle}
.croquis-mesure{margin:0;font-size:.95rem}
/* Grand contour : on dit le regroupement, on offre le detail. */
.croquis-regroupement{margin:0;font-size:.85rem;color:rgba(12,29,21,.7)}
.croquis-regroupement .lien-bouton{margin-left:10px}
.croquis-table tr.croquis-secteur th{padding:12px 8px 5px;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(12,29,21,.5);border-bottom:1px solid rgba(12,29,21,.14);background:transparent}
/* Le tableau defile dans son propre cadre plutot que d'imposer sa largeur
   a la page : sur telephone, sept colonnes ne tiennent pas, et une page qui
   defile lateralement est une page cassee. */
.croquis-cadre-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.croquis-table{width:100%;min-width:520px;border-collapse:collapse;font-size:.85rem}
.croquis-table th{text-align:left;padding:6px 8px;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(12,29,21,.55);border-bottom:1px solid rgba(12,29,21,.15)}
.croquis-table td{padding:7px 8px;border-bottom:1px solid rgba(12,29,21,.08)}
.croquis-table tr:hover td{background:var(--eggshell)}
.croquis-table input{width:76px;padding:6px 8px;border:1.5px solid var(--line);border-radius:5px;
  background:var(--white);font:inherit;font-size:.84rem}

/* --- La selection et la proposition -------------------------------------- */
.selection{display:grid;gap:9px;padding:16px;border:1px solid rgba(12,29,21,.14);
  border-radius:8px;background:var(--eggshell);margin-bottom:10px}
.selection h4{margin:0 0 4px;font-size:.95rem}
.selection-facade{display:flex;gap:10px;align-items:center;font-size:.9rem;cursor:pointer}
.selection-facade input{width:16px;height:16px;accent-color:var(--evergreen)}
.selection .button{justify-self:start;margin-top:6px}
.selection-ou{margin:8px 0 0;font-size:.86rem;color:rgba(12,29,21,.65)}
.lien-bouton{border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;
  cursor:pointer;text-decoration:underline;text-decoration-color:var(--pollen);
  text-decoration-thickness:2px;text-underline-offset:3px}

.proposition{display:grid;gap:10px;padding:20px;border:2px solid var(--pollen);
  border-radius:10px;background:var(--white);margin-bottom:8px}
.proposition h4{margin:0;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:#755600}
.proposition-montant{margin:0;font-size:2rem;font-weight:800;letter-spacing:-.03em}
.proposition-perimetre{margin:0;font-size:.86rem;font-weight:700;color:rgba(12,29,21,.65)}
.proposition-conditions{margin:0;font-size:.9rem;line-height:1.6;white-space:pre-line;
  color:rgba(12,29,21,.8)}
.proposition-boutons{display:flex;gap:10px;margin-top:4px}
.proposition-note{margin:0;font-size:.78rem;color:rgba(12,29,21,.55)}
.proposition-decidee{margin:0;padding:12px 14px;border-radius:8px;font-size:.92rem;font-weight:650}
.proposition-decidee--oui{background:#d6e9d8;color:#245d33}

/* --- P3 : chantier et garantie ------------------------------------------- */
.suivi-carte{display:grid;gap:8px;padding:16px 18px;border:1px solid rgba(12,29,21,.14);
  border-radius:8px;background:var(--eggshell);margin-bottom:10px}
.suivi-carte h4{margin:0;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(12,29,21,.6)}
.suivi-carte p{margin:0;font-size:.92rem;line-height:1.5}
.suivi-carte--garantie{border-color:#8fbf98;background:#eaf3ea}
.suivi-carte--garantie h4{color:#245d33}
.suivi-couverture{font-size:.84rem;color:rgba(12,29,21,.65)}
.suivi-carte .button{justify-self:start;padding:8px 14px;font-size:.8rem}
.signalement{display:grid;gap:8px}
.signalement textarea{min-height:70px;padding:10px;border:1.5px solid var(--line);
  border-radius:6px;background:var(--white);font:inherit;font-size:.88rem}
.signalement .button{justify-self:start}

/* --- L'empreinte cadastrale ---------------------------------------------- */
.croquis-recherche{display:grid;grid-template-columns:1fr auto;gap:8px}
.croquis-recherche input{padding:11px 13px;border:1.5px solid var(--line);border-radius:6px;
  background:var(--white);font:inherit;font-size:.9rem}
.croquis-recherche .button{padding:10px 14px;font-size:.82rem;white-space:nowrap}
.croquis-adresse-choix{display:block;width:100%;margin:4px 0;padding:10px 12px;text-align:left;
  border:1px solid rgba(12,29,21,.15);border-radius:6px;background:var(--eggshell);
  font:650 .86rem/1.3 var(--font-body);color:var(--evergreen);cursor:pointer}
.croquis-adresse-choix:hover{border-color:var(--evergreen)}
.croquis-recherche-etat{margin:6px 0 0;font-size:.85rem;color:rgba(12,29,21,.6)}
.croquis-note-services{margin:0;font-size:.76rem;line-height:1.5;color:rgba(12,29,21,.5)}
@media(max-width:640px){.croquis-recherche{grid-template-columns:1fr}}

/* --- P4 : le suivi reel --------------------------------------------------- */
.suivi-carte--mesures{border-color:rgba(15,156,135,.5);background:var(--white)}
.suivi-carte--mesures h4{color:#0b6f60}
.mesures-form{display:grid;gap:10px}
.mesures-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.mesures-grille label{display:grid;gap:4px;font-size:.72rem;font-weight:750;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(12,29,21,.55)}
.mesures-grille input{padding:8px 9px;border:1.5px solid var(--line);border-radius:6px;
  background:var(--white);font:inherit;font-size:.88rem;min-width:0}
.mesures-form .button{justify-self:start}
.mesures-note,.mesures-vide{margin:0;font-size:.8rem;line-height:1.5;color:rgba(12,29,21,.55)}

/* Verification a l'oeil des facades (consultation, jamais extraction). */
.croquis-verif{margin:8px 0 0;font-size:.84rem;color:rgba(12,29,21,.65)}
.croquis-verif a{color:inherit;font-weight:750;text-decoration-color:var(--pollen);
  text-decoration-thickness:2px;text-underline-offset:3px}

/* Prise des sommets : cercle invisible, large pour le doigt. */
.croquis-prise{fill:transparent;cursor:grab}
.croquis-prise:active{cursor:grabbing}

/* --- L'atelier V3 : fond aerien, cotes, accrochage ------------------------ */
.croquis-fond image{image-rendering:auto}
.croquis-credit{font:600 9px var(--font-body);fill:rgba(255,255,255,.9);
  paint-order:stroke;stroke:rgba(12,29,21,.55);stroke-width:2.5px}
/* Sur photo aerienne, le contour doit rester lisible : liseré clair dessous. */
.croquis-contour{paint-order:stroke}
.croquis-elastique{stroke:var(--evergreen);stroke-width:2;stroke-dasharray:6 4;opacity:.75}
.croquis-cote{font:700 10px var(--font-body);fill:var(--evergreen);text-anchor:middle;
  paint-order:stroke;stroke:var(--white);stroke-width:3px}
.croquis-cote--vive{fill:var(--tangerine)}
.croquis-guide{stroke:var(--tangerine);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.croquis-milieu{fill:var(--white);stroke:var(--evergreen);stroke-width:1.6;cursor:crosshair}
.croquis-etiquette{paint-order:stroke;stroke:var(--white);stroke-width:3px}
.croquis-precision{margin-left:6px;padding:1px 6px;border-radius:99px;background:rgba(12,29,21,.08);
  font-size:.78rem;font-weight:700;color:rgba(12,29,21,.55)}

/* --- L'elevation : la facade vue de face -------------------------------- */
.croquis-elev-bouton{width:32px;height:32px;padding:0;border:1px solid rgba(12,29,21,.2);border-radius:6px;
  background:var(--white);color:var(--evergreen);font-size:1rem;line-height:1;cursor:pointer}
.croquis-elev-bouton:hover{background:var(--pollen);border-color:var(--pollen)}
.croquis-elevation{display:grid;gap:14px;padding:16px 18px;border:1px solid rgba(12,29,21,.14);border-radius:10px;
  background:var(--eggshell-deep,#f1ecd6)}
.elev-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.elev-tete h3{margin:0 0 4px;font-size:1.05rem;letter-spacing:-.01em}
.elev-aide{margin:0;font-size:.82rem;color:rgba(12,29,21,.6)}
.elev-scene{overflow-x:auto;padding:6px 0;border-radius:8px;background:var(--white);border:1px solid rgba(12,29,21,.1)}
.elev-svg{display:block;max-width:none;touch-action:none;user-select:none}
.elev-mur{fill:#f7f2de;stroke:var(--evergreen);stroke-width:1.2}
.elev-sol{stroke:var(--evergreen);stroke-width:2}
.elev-plancher{stroke:rgba(12,29,21,.18);stroke-dasharray:3 4}
.elev-etage-zone{fill:transparent;cursor:copy}
.elev-etage-zone:hover{fill:rgba(255,206,59,.10)}
.elev-etage-nom{font-size:9px;font-weight:800;fill:rgba(12,29,21,.5);text-anchor:end}
.elev-etage-nom--sel{fill:var(--evergreen)}
.elev-fenetre rect{fill:#bfe3ea;stroke:var(--evergreen);stroke-width:1;cursor:grab}
.elev-fenetre line{stroke:var(--evergreen);stroke-width:.8;pointer-events:none}
.elev-fenetre:hover rect{fill:#a9dbe4}
.elev-fenetre--sel rect{stroke:var(--tangerine);stroke-width:2;fill:#ffe9a8}
.elev-prot{fill:rgba(12,29,21,.55)}
.elev-prot--balcon{fill:rgba(12,29,21,.35)}
.elev-prot-txt{font-size:8px;font-weight:750;fill:rgba(12,29,21,.7);text-anchor:end}
.elev-cote{font-size:8px;fill:rgba(12,29,21,.5);text-anchor:end}
.elev-controles{display:grid;gap:12px}
.elev-selection{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.85rem;font-weight:700}
.elev-selection label{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.elev-selection input{width:70px;padding:6px 8px;border:1.5px solid var(--line);border-radius:6px;font:inherit}
.elev-protections{display:grid;gap:6px}
.elev-prot-titre{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(12,29,21,.5)}
.elev-prot-ligne{display:grid;grid-template-columns:70px 130px 80px auto;align-items:center;gap:8px;font-size:.85rem}
.elev-prot-ligne select,.elev-prot-ligne input{padding:6px 8px;border:1.5px solid var(--line);border-radius:6px;font:inherit;font-size:.85rem;min-width:0}
.elev-actions{display:flex;flex-wrap:wrap;gap:8px}
.elev-actions .button{padding:8px 12px;font-size:.8rem}
.elev-bilan{margin:0;font-size:.85rem;font-weight:700;color:#3d5a4d}
@media(max-width:860px){
  .croquis-elevation{padding:12px}
  .elev-prot-ligne{grid-template-columns:60px 1fr 70px auto}
  .croquis-elev-bouton{width:44px;height:44px}
  .elev-actions .button{flex:1 1 auto}
}

/* --- Lecture de la photo aerienne ---------------------------------------- */
.croquis-lecture{margin:0;font-size:.82rem;line-height:1.5;color:#3d5a4d;min-height:1.2em}
.env-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.78rem;
  font-weight:750;white-space:nowrap}
.env-degagee{background:rgba(15,156,135,.16);color:#0b6b5c}
.env-ombre{background:rgba(12,29,21,.12);color:#3d5a4d}
.env-vegetation{background:rgba(120,160,60,.18);color:#4a6112}
.env-partielle{background:rgba(255,206,59,.28);color:#6b5200}

/* --- La fiche du batiment, tiree des donnees publiques ------------------- */
.croquis-fiche{padding:16px 18px;border:1px solid rgba(12,29,21,.14);border-radius:8px;
  background:var(--eggshell)}
.croquis-fiche h4{margin:0 0 12px;font-size:.82rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:#3d5a4d}
.croquis-fiche dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 18px;margin:0}
.croquis-fiche dt{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(12,29,21,.5)}
.croquis-fiche dd{margin:2px 0 0;font-size:1rem;font-weight:700;line-height:1.25}
.fiche-source{display:block;font-size:.76rem;font-weight:600;color:rgba(12,29,21,.45)}
.fiche-note{margin:12px 0 0;font-size:.72rem;line-height:1.5;color:rgba(12,29,21,.5)}
.croquis-suivant{margin:2px 0 8px;padding:7px 12px;font-size:.78rem}

/* --- Le retour sur environnement, a cote du retour financier ------------- */
.roe{margin-top:16px;padding:16px 18px;border:1px solid rgba(15,156,135,.3);border-radius:8px;
  background:rgba(15,156,135,.06)}
.roe h4{margin:0 0 10px;font-size:.74rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#0b6b5c}
.roe-note{margin:10px 0 0;font-size:.72rem;line-height:1.55;color:rgba(12,29,21,.55)}

/* --- Les deux monnaies : l'euro et le carbone, meme poids ---------------- */
.app-kpis{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi-monnaie{position:relative}
.kpi-monnaie--carbone{border-color:rgba(15,156,135,.42)}
.kpi-monnaie--carbone strong{color:#0b6b5c}
.roi-carbone{color:#0b6b5c;font-weight:650}

/* Etapes prevues : visibles mais inertes. Montrer le chemin sans le promettre. */
.frise-etape--prevue{opacity:.5}
.frise-etape--prevue .frise-point{background:var(--white);border-style:dashed;
  border-color:rgba(12,29,21,.35)}
.frise-etape--prevue::before{background:repeating-linear-gradient(90deg,
  rgba(12,29,21,.22) 0 4px,transparent 4px 8px)}
.frise-a-venir{display:block;font-size:.72rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(12,29,21,.4)}

/* --- Les configurations : arbitrer entre scenarios ----------------------- */
.configs{margin:0 0 22px;padding:16px 18px;border:1px solid rgba(12,29,21,.14);
  border-radius:8px;background:var(--white)}
.configs h4{margin:0 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#3d5a4d}
.configs-note{margin:10px 0 0;font-size:.74rem;line-height:1.55;color:rgba(12,29,21,.55)}
.config-meilleur{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  background:var(--pollen);color:var(--evergreen);font-size:.74rem;font-weight:800;
  letter-spacing:.04em;white-space:nowrap}
.config-meilleur--carbone{background:rgba(15,156,135,.24);color:#0b6b5c}
.config-partiel{display:block;font-size:.76rem;color:rgba(12,29,21,.5)}
.selection-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* --- Le cap : ou j'en suis, quoi faire. En tete, jamais en bas. ---------- */
.projet-cap{margin:0 0 26px;padding:20px 22px;border-radius:10px;
  border:1px solid rgba(255,206,59,.5);background:rgba(255,206,59,.1)}
.projet-cap-position{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.projet-cap-jalon{padding:3px 9px;border-radius:99px;background:var(--evergreen);
  color:var(--pollen);font-size:.74rem;font-weight:850;letter-spacing:.08em;
  text-transform:uppercase}
.projet-cap-position strong{font-size:1.32rem;letter-spacing:-.02em;line-height:1.1}
.projet-cap .projet-action{margin:0}

/* Les numeros dans la frise : la phrase et le dessin racontent la meme chose. */
.frise-point{display:grid;place-items:center;width:22px;height:22px;
  font-size:.74rem;font-weight:850;color:rgba(12,29,21,.45)}
.frise-etape--faite .frise-point,.frise-etape--en-cours .frise-point{color:var(--white)}
.frise-etape--faite .frise-point{color:var(--evergreen)}
.frise-etape::before{top:10px}

/* L'historique se replie : il compte, mais apres le reste. */
.projet-histoire{margin:0 0 20px}
.projet-histoire summary{cursor:pointer;font-size:.78rem;font-weight:750;color:#3d5a4d;
  padding:8px 0}
.projet-histoire[open] summary{margin-bottom:6px}

/* --- Cibles tactiles : rien sous 24 px ----------------------------------- */
/* Audit du 18/08 : les cases a cocher faisaient 16 px et les boutons-liens
   22 px de haut. En dessous de 24, on vise au lieu de cliquer - et au doigt
   c'est pire. */
.selection-facade input[type="checkbox"]{width:20px;height:20px;flex:none;
  accent-color:var(--evergreen);cursor:pointer}
.selection-facade{display:flex;align-items:center;gap:10px;min-height:34px;
  padding:4px 0;cursor:pointer}
.lien-bouton{min-height:26px;padding:4px 2px}
/* Les liens de pied faisaient 16 a 20 px de haut : sous le seuil de 24. */
.app-pied a{display:inline-block;padding:4px 0}
/* Un mur mitoyen n'est pas une facade : il se lit comme une exclusion. */
.env-mitoyenne{background:rgba(12,29,21,.16);color:#2b3d33;text-decoration:line-through;
  text-decoration-thickness:1px}

/* --- Le selecteur de batiment : cliquer la photo ------------------------- */
.croquis-candidat{fill:rgba(255,206,59,.07);stroke:rgba(255,253,244,.85);stroke-width:1.4;
  stroke-dasharray:5 3;cursor:pointer;pointer-events:all;transition:fill .12s}
.croquis-candidat:hover{fill:rgba(255,206,59,.32);stroke:var(--pollen);stroke-dasharray:none}
.croquis-adresse-repere circle{fill:var(--tangerine);stroke:var(--white);stroke-width:2}
.croquis-adresse-repere path{stroke:var(--tangerine);stroke-width:1.6;opacity:.85}
.croquis-avertissement{margin:0 0 8px;padding:9px 12px;border-radius:6px;font-size:.8rem;
  font-weight:650;background:rgba(226,109,54,.12);color:#8a3c14;line-height:1.45}

/* L'attribut hidden PERD contre tout display explicite (display:grid de
   .espace-form l'ecrasait) : les deux panneaux de creation s'affichaient
   en meme temps, formulaire simple SOUS le croquis. Regle de sanite. */
[hidden]{display:none !important}
.croquis-sous-titre{margin:6px 0 0;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#3d5a4d}

/* --- La pertinence Kelveen : la cible, ce sont les batiments hauts ------- */
.pertinence-badge{display:inline-block;padding:3px 10px;border-radius:99px;
  font-size:.72rem;font-weight:800;letter-spacing:.02em}
.cible-haute{background:rgba(15,156,135,.18);color:#0b6b5c}
.cible-moyenne{background:rgba(255,206,59,.3);color:#5f5922}
.cible-basse{background:rgba(12,29,21,.1);color:#4a5a51}
.croquis-provenance{margin:0 0 8px;font-size:.76rem;line-height:1.5;color:#3d5a4d}

/* --- Edition et suppression : la hierarchie des gestes -------------------- */
/* Le jaune = l'action du parcours ; le clair = les gestes secondaires ;
   la suppression = un lien discret et rouge sombre, jamais un gros bouton. */
.lien-bouton--danger{color:#8a3c14}
.lien-bouton--danger:hover{color:#c04a12}
.espace-edition{margin-top:14px;padding:16px;border:1px solid rgba(12,29,21,.14);
  border-radius:8px;background:var(--eggshell)}
.edition-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.edition-grille label{display:grid;gap:5px;font-size:.72rem;font-weight:750;
  letter-spacing:.05em;text-transform:uppercase;color:rgba(12,29,21,.55)}
.edition-grille input{padding:9px 11px;border:1.5px solid var(--line);border-radius:6px;
  background:var(--white);font:inherit;font-size:.9rem}
.edition-actions{display:flex;gap:10px;margin-top:14px}
.espace-carte{position:relative}
.carte-suppr{position:absolute;top:14px;right:14px;font-size:1rem;line-height:1;
  padding:6px 9px;opacity:.55}
.carte-suppr:hover{opacity:1}
.carte-suppr:disabled{opacity:.2;cursor:default}

/* --- La simulation dit ce qu'elle a fait, deux monnaies en tete ---------- */
.simu-quoi{margin:2px 0 10px;font-size:.78rem;line-height:1.5;color:rgba(12,29,21,.55)}
.simu-monnaies{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.simu-chip{padding:5px 12px;border-radius:99px;font-size:.92rem;font-weight:800;letter-spacing:-.01em}
.simu-chip--euro{background:rgba(255,206,59,.32);color:#4a3f08}
.simu-chip--co2{background:rgba(15,156,135,.16);color:#0b6b5c}

/* --- La faisabilite reglementaire : des feux, pas des verdicts ------------ */
.urba{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(12,29,21,.18)}
.urba h5{margin:0 0 8px;font-size:.78rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#3d5a4d}
.feux{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.feu{display:flex;align-items:flex-start;gap:9px;font-size:.82rem;line-height:1.45}
.feu span{flex:none;width:11px;height:11px;margin-top:4px;border-radius:50%}
.feu--vert span{background:#0f9c87}
.feu--orange span{background:#f0a12a}
.feu--rouge span{background:#a52f20}
.feu--gris span{background:rgba(12,29,21,.3)}
.urba-note{margin:8px 0 0;font-size:.72rem;line-height:1.5;color:rgba(12,29,21,.5)}

/* --- Facades editables en place ------------------------------------------- */
.facade-ligne{display:grid;gap:8px;padding:8px 0;border-bottom:1px solid rgba(12,29,21,.08)}
.facade-resume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.facade-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.facade-edition{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;
  padding:12px;border-radius:6px;background:var(--eggshell)}
.facade-edition label{display:grid;gap:4px;font-size:.72rem;font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(12,29,21,.55)}
.facade-edition input{padding:8px 10px;border:1.5px solid var(--line);border-radius:5px;
  background:var(--white);font:inherit;font-size:.88rem}
.facade-edition-actions{grid-column:1/-1;display:flex;gap:10px}
.bilan-monnaies{margin-top:16px;padding-top:14px;border-top:1px dashed rgba(12,29,21,.18)}
.bilan-monnaies h4{margin:0 0 10px;font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#3d5a4d}

/* ======================================================================== */
/* --- L'application au telephone ------------------------------------------ */
/* Audit du 18/08 sur 390 px : tableau debordant de 54 px, 13 cibles sous
   40 px, cap de projet haut de 678 px, scene a 316 px, pas de navigation.
   Une regle simple : rien sous 44 px au doigt, la scene prend toute la
   largeur, les tableaux defilent chez eux, la navigation vit en bas. */
@media(max-width:860px){
  /* Cibles tactiles : 44 px, la norme du pouce. */
  .app-scene .button,.mode-onglet,.lien-bouton,.app-retour,.app-compte button,
  .facade-detail summary,.projet-histoire summary,.croquis-adresse-choix{
    min-height:44px;padding-top:10px;padding-bottom:10px}
  .lien-bouton{padding-left:8px;padding-right:8px}
  .carte-suppr{width:44px;height:44px;padding:0;display:grid;place-items:center;
    top:6px;right:6px;font-size:1.15rem}
  .app-compte button{width:44px;height:44px}
  .facade-edition input,.edition-grille input,.croquis-recherche input,
  .croquis-table input,.mesures-grille input{min-height:44px;font-size:16px}
  /* 16 px minimum sur les champs : en dessous, iOS zoome la page au focus. */
  input,select,textarea{font-size:max(16px,1em)}

  /* La scene remplit la largeur : le dessin est le geste principal. */
  .croquis{padding:14px 12px;gap:12px}
  .croquis [data-croquis-scene]{max-width:none;width:100%}
  .croquis-scene-cadre{max-width:none}
  /* Cibles de 44 px, toujours sur la scene : le pouce les trouve sans
     quitter le dessin. « Agrandir » reste LE geste, en pollen, en bas a droite. */
  .croquis-outil{width:44px;height:44px;font-size:1.15rem}
  .croquis-outils{top:8px;left:8px;gap:8px}
  .croquis-outil--plein{width:48px;height:48px;right:8px;bottom:8px}
  .croquis-astuce-zoom{display:none}
  .croquis-entete{grid-template-columns:1fr 1fr}
  .croquis-fiche dl{grid-template-columns:1fr 1fr;gap:10px 12px}

  /* Les tableaux defilent chez eux ; le conteneur ne peut plus les
     laisser deborder (min-width:0 sur les cartes qui les portent). */
  .configs,.roi-zone,.projet-carte,.espace-carte,.croquis{min-width:0}
  .configs > *,.roi-zone > *{min-width:0}
  .croquis-cadre-table{margin:0 -12px;padding:0 12px}

  /* Le cap : une phrase, un bouton - pas 678 px. */
  .projet-cap{padding:14px}
  .projet-cap-position strong{font-size:1.1rem}
  .selection-facade{min-height:44px}
  .selection-actions .button{width:100%}
  .espace-carte-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .espace-carte-actions .button--pollen{grid-column:1/-1}
  .espace-carte-actions .lien-bouton{grid-column:1/-1;justify-self:start}

  /* La frise : numeros seuls sur telephone, le nom en dessous a une ligne. */
  .frise{gap:0;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-left:-4px;margin-right:-4px}
  .frise-etape{min-width:58px;flex:1 0 58px}
  .frise-nom{font-size:.6rem;letter-spacing:.02em}
  .frise-a-venir{display:none}

  /* Les chiffres de tete : deux par ligne, pas quatre empiles. */
  .app-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .app-kpis article{padding:14px}
  .app-kpis strong{font-size:1.5rem}

  /* Navigation en bas, sous le pouce. Le bandeau du haut garde la marque. */
  .app-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    flex-direction:row;gap:0;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:var(--evergreen);border-top:1px solid rgba(245,242,225,.14)}
  .app-nav a{flex:1;text-align:center;padding:9px 4px;font-size:.7rem;font-weight:750;
    letter-spacing:.02em;border-radius:8px}
  .app-scene{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .app-flanc{position:sticky;top:0;z-index:40}
  .app-retour{font-size:.72rem}
}
/* Tres petits ecrans : le tableau des facades perd ses colonnes optionnelles. */
@media(max-width:400px){
  .croquis-fiche dl{grid-template-columns:1fr}
  .app-kpis{grid-template-columns:1fr 1fr}
}

/* Le cap au telephone : une phrase, un bouton. La selection des facades
   (cases + libelles longs) se replie derriere un resume - elle restait
   depliee et le cap mesurait 658 px, un ecran entier avant la frise. */
@media(max-width:860px){
  .projet-cap .selection{padding:12px}
  .projet-cap .selection h4{margin:0 0 8px;font-size:.82rem}
  .projet-cap .selection-facade{min-height:40px;padding:2px 0;font-size:.84rem;line-height:1.3}
  .projet-cap .selection-actions{display:grid;gap:8px;margin-top:10px}
  .projet-cap .selection-actions .button{width:100%;padding:12px 10px;font-size:.84rem;
    line-height:1.25;white-space:normal}
  .projet-cap .selection-ou{margin:8px 0 0;font-size:.8rem;line-height:1.4}
  .projet-cap .selection-ou .lien-bouton{display:inline;padding:0;min-height:0;line-height:1.5}
  .projet-main-kelveen{margin:0;font-size:.88rem}
  /* La frise ne deborde plus : la piste defile, les items ont une largeur fixe. */
  .frise{scrollbar-width:none}
  .frise::-webkit-scrollbar{display:none}
  .frise-etape{min-width:64px;flex:0 0 64px}
  .frise-etape::before{left:-50%;width:100%}
  /* Navigation basse : 44 px de haut, texte sur une ligne. */
  .app-nav a{min-height:44px;display:grid;place-items:center;line-height:1.1;font-size:.66rem;padding:6px 2px}
  .app-pied a{display:inline-block;padding:10px 0;min-height:44px}
}

/* Trois cartes imbriquees (projet-carte > projet-detail > projet-cap)
   empilaient leurs marges : 112 px perdus sur 390, tout le texte
   s'enroulait et le cap mesurait 600 px de haut. Au telephone les cartes
   respirent moins et le contenu retrouve sa largeur. */
@media(max-width:860px){
  .projet-carte{padding:14px 10px}
  .projet-detail > *:not(summary){margin-left:8px;margin-right:8px}
  .projet-detail summary{padding-left:10px;padding-right:10px}
  .projet-cap{padding:12px 10px}
  .espace-carte{padding:14px 12px}
  .configs,.roi-zone{padding:12px 10px}
}

/* Au telephone, "Agrandir" devient LE geste : un carre de 332 px n'est
   pas un atelier. Le bouton passe en pollen et en tete des outils ; en
   plein ecran les outils restent colles en bas, sous le pouce. */
@media(max-width:860px){
  .croquis.croquis--plein{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .croquis.croquis--plein > .croquis-scene-cadre{width:100%}
  .croquis.croquis--plein > .croquis-scene-cadre > [data-croquis-scene]{
    max-height:calc(100dvh - 110px - env(safe-area-inset-bottom))}
  /* Pas de clavier au telephone : l'astuce Maj/Ctrl+Z n'a rien a y faire. */
  .croquis.croquis--plein > .croquis-astuce-zoom{display:none !important}
}

/* --- Le questionnaire : comment le batiment vit ---------------------------- */
.questionnaire{margin:0;padding:16px 18px;border:1px solid rgba(12,29,21,.14);border-radius:8px;
  background:var(--eggshell)}
.questionnaire legend{padding:0 6px;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#3d5a4d}
.questionnaire-grille{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.questionnaire select,.edition-grille select{width:100%;padding:10px 12px;border:1.5px solid var(--line);
  border-radius:6px;background:var(--white);font:inherit;font-size:.9rem}
.questionnaire-note{margin:10px 0 0;font-size:.74rem;line-height:1.5;color:rgba(12,29,21,.55)}

/* ======================================================================== */
/* --- La barre laterale EST le parcours ------------------------------------ */
.app-parcours{gap:0}
.parcours-titre{margin:0 0 10px;padding:0 12px;color:rgba(245,242,225,.5);font-size:.66rem;
  font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.parcours-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.parcours-etape a{display:grid;grid-template-columns:24px 1fr;column-gap:10px;align-items:start;
  padding:8px 12px;border-radius:6px;color:rgba(245,242,225,.55);text-decoration:none;
  font-size:.86rem;font-weight:650;transition:background .15s,color .15s}
.parcours-etape a:hover,.parcours-etape a:focus-visible{background:rgba(245,242,225,.08);color:var(--eggshell)}
.parcours-num{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(245,242,225,.3);font-size:.62rem;font-weight:850;line-height:1}
.parcours-nom{align-self:center;line-height:1.2}
.parcours-action{grid-column:2;margin-top:3px;color:rgba(245,242,225,.62);font-size:.72rem;
  font-weight:500;line-height:1.4}
.parcours-bientot{grid-column:2;font-size:.58rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(245,242,225,.35)}
/* Les etats : fait (pollen plein), en cours (encadre pollen + fond), a venir
   (discret), prevue (grise, inerte). */
.parcours-etape--faite a{color:rgba(245,242,225,.78)}
.parcours-etape--faite .parcours-num{background:var(--pollen);border-color:var(--pollen);color:var(--evergreen)}
.parcours-etape--en-cours a{background:rgba(255,206,59,.14);color:var(--eggshell)}
.parcours-etape--en-cours .parcours-num{border-color:var(--pollen);color:var(--pollen);
  box-shadow:0 0 0 3px rgba(255,206,59,.25)}
.parcours-etape--prevue a{opacity:.42;cursor:default;pointer-events:none}
.parcours-etape--prevue .parcours-num{border-style:dashed}

/* Au telephone la barre basse ne peut pas porter dix etapes : elle montre
   la precedente, l'en-cours et la suivante ; le reste vit dans la frise du
   projet. */
@media(max-width:860px){
  .app-parcours .parcours-titre{display:none}
  .parcours-liste{flex-direction:row;gap:4px;width:100%}
  .parcours-etape{flex:1;min-width:0}
  .parcours-etape a{grid-template-columns:1fr;justify-items:center;text-align:center;
    padding:6px 4px;font-size:.66rem;min-height:44px;row-gap:2px}
  .parcours-num{width:20px;height:20px;font-size:.58rem}
  .parcours-action,.parcours-bientot{display:none}
  .parcours-nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* --- Ou l'on est : le projet suivi et l'etape active ---------------------- */
.etape-barre{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0 0 22px;
  padding:14px 18px;border-radius:10px;border:1px solid rgba(255,206,59,.5);background:rgba(255,206,59,.1)}
.projet-selecteur{padding:9px 12px;border:1.5px solid rgba(12,29,21,.25);border-radius:6px;
  background:var(--white);font:inherit;font-size:.9rem;font-weight:700;max-width:100%}
.etape-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 12px;margin:0;min-width:0}
.etape-tete-num{padding:3px 9px;border-radius:99px;background:var(--evergreen);color:var(--pollen);
  font-size:.66rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.etape-tete strong{font-size:1.25rem;letter-spacing:-.02em;line-height:1.1}
.etape-tete-action{flex-basis:100%;color:#3d5a4d;font-size:.86rem;line-height:1.45}
/* L'etape ACTIVE dans la barre (celle qu'on regarde), distincte de l'etape
   en cours (celle du projet) : on relit une etape faite sans la defaire. */
.parcours-etape--active a{outline:2px solid var(--pollen);outline-offset:-2px}
@media(max-width:860px){
  .etape-barre{padding:10px 12px;gap:8px 12px;margin-bottom:14px}
  .etape-tete strong{font-size:1.05rem}
  .etape-tete-action{font-size:.8rem}
  .projet-selecteur{width:100%}
  /* Sur telephone la barre basse montre TROIS etapes : l'active et ses
     voisines (le JS choisit lesquelles - :has() ne sait pas garantir trois
     aux extremites). */
  .parcours-etape{display:none}
  .parcours-etape--mobile{display:block}
}

/* La frise complete dans la carte projet fait doublon avec la barre laterale
   sur grand ecran ; elle reste utile au telephone ou la barre basse ne
   montre que trois etapes. */
@media(min-width:861px){ .projet-carte .frise{display:none} }

/* ======================================================================== */
/* --- Trois ecrans : tableau de bord, projets, le projet ouvert ----------- */
.section-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-tete h1,.section-tete h2{margin:0}
.section-suite{margin:12px 0 0;font-size:.86rem}
.section-suite a{color:var(--evergreen);font-weight:700;text-decoration-color:var(--pollen);text-decoration-thickness:2px;text-underline-offset:3px}

/* La liste des projets : une tuile par projet, cliquable en entier. */
.projets-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.projet-tuile{display:grid;gap:8px;padding:18px 20px;border:1px solid rgba(12,29,21,.14);border-radius:10px;
  background:var(--white);color:var(--evergreen);text-decoration:none;transition:border-color .15s,transform .15s}
.projet-tuile:hover,.projet-tuile:focus-visible{border-color:var(--evergreen);transform:translateY(-1px)}
.projet-tuile-nom{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.projet-tuile-etape{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:750;color:#3d5a4d}
.projet-tuile-etape .parcours-num{border-color:var(--pollen);background:var(--pollen);color:var(--evergreen)}
.projet-tuile-action{font-size:.8rem;line-height:1.45;color:rgba(12,29,21,.6)}
.projet-tuile-monnaies{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.projet-tuile-monnaies .simu-chip{font-size:.78rem;padding:3px 9px}

/* Le projet ouvert : son en-tete. */
.projet-entete{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid rgba(12,29,21,.14)}
.projet-retour,.parcours-retour{display:inline-block;margin-bottom:8px;font-size:.78rem;font-weight:750;
  color:#3d5a4d;text-decoration:none}
.projet-retour:hover,.parcours-retour:hover{color:var(--evergreen);text-decoration:underline}
.parcours-retour{color:rgba(245,242,225,.6);padding:0 12px 6px}
.parcours-retour:hover{color:var(--eggshell)}
.projet-entete h1{margin:0 0 10px;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.03em;line-height:1.05}
.projet-entete .etape-tete{padding:0}

/* La barre globale : l'entree active. */
.app-nav a.nav-active{background:rgba(255,206,59,.14);color:var(--eggshell)}
.parcours-titre{color:var(--eggshell);font-size:.9rem;font-weight:800;letter-spacing:-.01em;text-transform:none;
  margin:0 0 12px;padding:0 12px}

@media(max-width:860px){
  .projets-liste{grid-template-columns:1fr}
  .projet-tuile{padding:14px}
  .projet-entete{margin-bottom:14px;padding-bottom:12px}
  .parcours-retour,.parcours-titre{display:none}
  /* La barre globale en bas : deux entrees. Le fil conducteur en bas : trois etapes. */
  [data-nav-globale] a{min-height:44px;display:grid;place-items:center;font-size:.72rem}
}
/* Au telephone, "Projets" reste dans la barre basse du fil conducteur - c'est
   la sortie - mais compact : la fleche seule, 44 px, a gauche des trois
   etapes. Specificite renforcee : .app-nav a{display:grid} l'emportait. */
@media(max-width:860px){
  .app-nav.app-parcours .parcours-retour{display:grid;place-items:center;flex:0 0 44px;
    min-height:44px;margin:0;padding:0;font-size:1.1rem;color:var(--pollen);overflow:hidden;
    white-space:nowrap;text-indent:-9999px;position:relative}
  .app-nav.app-parcours .parcours-retour::before{content:"←";position:absolute;inset:0;
    display:grid;place-items:center;text-indent:0}
  .app-nav.app-parcours{display:flex;flex-direction:row;align-items:stretch}
  .app-nav.app-parcours .parcours-liste{flex:1}
}

/* ======================================================================== */
/* --- Le tableau de bord : un poste de pilotage, pas une liste ------------ */
.tableau-grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.tableau-bloc{padding:20px 22px;border:1px solid rgba(12,29,21,.14);border-radius:10px;background:var(--white);min-width:0}
.tableau-bloc h2{margin:0 0 14px;font-size:.82rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:#3d5a4d}
.tableau-bloc h3{margin:18px 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:rgba(12,29,21,.45)}
.tableau-afaire{grid-row:span 2}
.tableau-vide{padding:36px 28px;border-radius:12px;background:var(--evergreen);color:var(--eggshell)}
.tableau-vide h2{margin:0 0 10px;font-size:2rem;letter-spacing:-.04em}
.tableau-vide p{margin:0 0 20px;max-width:520px;line-height:1.6;color:rgba(245,242,225,.78)}

/* A faire : chaque ligne est un geste, cliquable en entier, qui mene a l'etape. */
.afaire{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"projet etape" "texte etape";
  column-gap:14px;row-gap:2px;align-items:center;padding:12px 14px;margin:0 -14px;border-radius:8px;
  color:var(--evergreen);text-decoration:none;transition:background .15s}
.afaire:hover,.afaire:focus-visible{background:rgba(255,206,59,.14)}
.afaire + .afaire{border-top:1px solid rgba(12,29,21,.08)}
.afaire-projet{grid-area:projet;font-size:.74rem;font-weight:750;letter-spacing:.03em;text-transform:uppercase;color:rgba(12,29,21,.5)}
.afaire-texte{grid-area:texte;font-size:1rem;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.afaire-etape{grid-area:etape;font-size:.76rem;font-weight:800;color:#3d5a4d;white-space:nowrap}
.afaire:hover .afaire-etape{color:var(--evergreen)}

/* Le parc : deux monnaies, meme poids, en gros. */
.pf-monnaies{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.pf-monnaie{display:grid;gap:4px;padding:14px;border-radius:8px}
.pf-monnaie strong{font-size:1.55rem;letter-spacing:-.03em;line-height:1}
.pf-monnaie span{font-size:.72rem;line-height:1.35;color:rgba(12,29,21,.6)}
.pf-monnaie--euro{background:rgba(255,206,59,.22)}
.pf-monnaie--co2{background:rgba(15,156,135,.12)}
.pf-monnaie--co2 strong{color:#0b6b5c}
.pf-chiffres{display:flex;gap:22px;margin:0}
.pf-chiffres div{display:grid;gap:2px}
.pf-chiffres dt{font-size:.68rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:rgba(12,29,21,.5)}
.pf-chiffres dd{margin:0;font-size:1.15rem;font-weight:800}

/* Le pipeline : une barre par etape, cliquable vers le repertoire filtre. */
.pipe{display:grid;gap:6px}
.pipe-etape{display:grid;grid-template-columns:22px minmax(0,1fr) 30px;grid-template-areas:"num barre compte" "num nom compte";
  column-gap:10px;align-items:center;color:var(--evergreen);text-decoration:none;padding:3px 0;border-radius:6px}
.pipe-etape:hover .pipe-nom{color:var(--evergreen)}
.pipe-num{grid-area:num;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  border:1.5px solid rgba(12,29,21,.25);font-size:.6rem;font-weight:850;color:rgba(12,29,21,.5)}
.pipe-barre{grid-area:barre;height:8px;border-radius:4px;background:rgba(12,29,21,.08);overflow:hidden}
.pipe-barre i{display:block;height:100%;background:var(--pollen);border-radius:4px}
.pipe-nom{grid-area:nom;font-size:.72rem;font-weight:700;color:rgba(12,29,21,.55);line-height:1.2}
.pipe-compte{grid-area:compte;text-align:right;font-size:.95rem;font-weight:850}
.tableau-evenements{margin:0;padding:0 0 0 14px}
.tableau-evenements a{color:var(--evergreen);font-weight:750;text-decoration:none}
.tableau-evenements a:hover{text-decoration:underline}

/* --- Le repertoire : dense, cherchable, triable ---------------------------- */
.repertoire-controles{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:14px}
.repertoire-controles input,.repertoire-controles select{padding:10px 12px;border:1.5px solid var(--line);
  border-radius:6px;background:var(--white);font:inherit;font-size:.9rem;min-width:0}
.repertoire{list-style:none;margin:0;padding:0;border:1px solid rgba(12,29,21,.14);border-radius:10px;overflow:hidden;background:var(--white)}
.repertoire li + li{border-top:1px solid rgba(12,29,21,.08)}
.repertoire-ligne{display:grid;grid-template-columns:minmax(0,1.5fr) 90px minmax(0,1fr) minmax(0,1.5fr) auto;
  gap:14px;align-items:center;padding:12px 16px;color:var(--evergreen);text-decoration:none;transition:background .15s}
.repertoire-ligne:hover,.repertoire-ligne:focus-visible{background:rgba(255,206,59,.1)}
.rep-nom{display:grid;gap:2px;font-weight:800;letter-spacing:-.01em;min-width:0}
.rep-nom small{font-size:.72rem;font-weight:600;color:rgba(12,29,21,.5)}
.rep-jauge{height:6px;border-radius:3px;background:rgba(12,29,21,.1);overflow:hidden}
.rep-jauge i{display:block;height:100%;background:var(--pollen)}
.rep-etape{font-size:.78rem;font-weight:750;color:#3d5a4d;white-space:nowrap}
.rep-action{font-size:.8rem;line-height:1.35;color:rgba(12,29,21,.7)}
.rep-action--attente{color:rgba(12,29,21,.45);font-style:italic}
.rep-monnaies{font-size:.8rem;color:rgba(12,29,21,.6);white-space:nowrap}
.rep-monnaies b{font-weight:800;color:var(--evergreen)}
.rep-monnaies .rep-co2{color:#0b6b5c}

@media(max-width:1000px){
  .tableau-grille{grid-template-columns:1fr}
  .tableau-afaire{grid-row:auto}
  .repertoire-ligne{grid-template-columns:minmax(0,1fr) 70px auto;grid-template-areas:"nom jauge etape" "action action monnaies";row-gap:6px}
  .rep-nom{grid-area:nom}.rep-jauge{grid-area:jauge}.rep-etape{grid-area:etape}.rep-action{grid-area:action}.rep-monnaies{grid-area:monnaies;text-align:right}
}
@media(max-width:860px){
  .tableau-bloc{padding:14px}
  .afaire{margin:0 -6px;padding:10px 8px;grid-template-columns:1fr;grid-template-areas:"projet" "texte" "etape";row-gap:3px}
  .afaire-etape{justify-self:start}
  .pf-monnaies{grid-template-columns:1fr}
  .pf-monnaie strong{font-size:1.35rem}
  .repertoire-controles{grid-template-columns:1fr 1fr}
  .repertoire-controles input{grid-column:1/-1}
  .repertoire-controles input,.repertoire-controles select{min-height:44px;font-size:16px}
  .repertoire-ligne{grid-template-columns:1fr;grid-template-areas:"nom" "jauge" "etape" "action" "monnaies";gap:5px;padding:12px}
  .rep-monnaies{text-align:left}
}

/* --- Le bloc compte : identite + deconnexion en toutes lettres ------------ */
/* Selecteur a deux classes : il doit l'emporter sur « .app-compte button »
   (le rond de 36/44 px de l'ancien bouton ⏻), sinon le libelle s'ecrase. */
.app-compte{flex-wrap:wrap}
.app-compte .app-deconnexion{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;
  min-height:36px;padding:8px 12px;border-radius:6px;font-size:.76rem;font-weight:750;line-height:1;white-space:nowrap;
  background:rgba(245,242,225,.1);color:var(--eggshell)}
.app-compte .app-deconnexion:hover{background:var(--tangerine);color:var(--white)}
@media(max-width:860px){
  .app-compte .app-deconnexion{width:auto;height:auto;min-height:44px;padding:10px 12px}
}

/* --- L'identite de facade : la meme facade se reconnait partout ------------ */
/* Voir CAHIER_DES_CHARGES_ESPACE_2026-08-18.md, partie 4. La couleur porte
   l'exposition solaire (teal au nord, pollen plein sud) ; la lettre porte
   l'orientation. Les deux variables --fac-couleur / --fac-encre sont posees
   en ligne par assets/js/facade-identite.js : la teinte est une donnee
   calculee, pas un choix de feuille de style. */

.fac-pastille{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--fac-couleur,var(--teal));color:var(--fac-encre,var(--evergreen));
  font-size:.68rem;font-weight:850;letter-spacing:.04em;line-height:1;vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(12,29,21,.16)}
.fac-pastille--inconnue{background:rgba(12,29,21,.1);color:rgba(12,29,21,.55)}
.fac-pastille--vedette{box-shadow:inset 0 0 0 1px rgba(12,29,21,.16),0 0 0 2px var(--evergreen)}

/* Le plan enregistre, redessine. Le contour dort dans la base depuis la
   creation ; sans ce bloc il n'avait aucun endroit ou s'afficher. */
.fac-plan{margin:0;display:grid;gap:8px}
.fac-plan svg{width:100%;height:var(--fac-plan-h,190px);display:block;
  background:rgba(151,175,154,.09);border:1px solid rgba(12,29,21,.12);border-radius:10px}
.fac-plan-sol{fill:rgba(12,29,21,.06);stroke:none}
.fac-plan-mur{stroke-linecap:round;transition:opacity .15s}
.fac-plan-mur--orphelin{stroke:rgba(12,29,21,.25);stroke-dasharray:2 3}
.fac-plan-mur--eteint{opacity:.22}
.fac-plan-mur--vedette{filter:drop-shadow(0 0 3px rgba(12,29,21,.45))}
.fac-plan [data-plan-facade]{cursor:pointer}
.fac-plan [data-plan-facade]:focus-visible{outline:2px solid var(--evergreen);outline-offset:2px}
.fac-plan-pastille{pointer-events:none}
.fac-plan-pastille--eteinte{opacity:.28}
.fac-plan-nord circle{fill:rgba(255,253,244,.9);stroke:rgba(12,29,21,.22);stroke-width:.4}
.fac-plan-nord path{fill:var(--tangerine)}
.fac-plan-nord text{fill:rgba(12,29,21,.65);font-weight:800}

.fac-plan-legende{display:flex;align-items:center;gap:8px;color:rgba(12,29,21,.6);font-size:.72rem}
.fac-plan-rampe{flex:1;height:6px;border-radius:99px;
  background:linear-gradient(90deg,#516e71,#586d5e,#927e2a)}
.fac-plan-legende span:not(.fac-plan-rampe){white-space:nowrap}
.fac-plan-legende span:first-of-type{order:-1}

/* L'elevation en lecture : les fenetres posees a la creation, rendues. */
.fac-elev{margin:0;display:grid;gap:4px}
.fac-elev svg{width:100%;max-height:120px;display:block}
.fac-elev-mur{fill:rgba(233,228,205,.75);stroke:rgba(12,29,21,.3);stroke-width:.06}
.fac-elev-plancher{stroke:rgba(12,29,21,.16);stroke-width:.04}
.fac-elev-sol{stroke:rgba(12,29,21,.45);stroke-width:.08}
.fac-elev-fenetre{stroke:rgba(12,29,21,.4);stroke-width:.04}
.fac-elev-prot{fill:rgba(12,29,21,.42)}
.fac-elev figcaption{color:rgba(12,29,21,.6);font-size:.72rem}

/* La ligne de facade selectionnee, dans un tableau ou une liste : le pendant
   de la vedette sur le plan. Le survol seul ne suffisait pas — il n'existe
   pas au doigt, et l'application est faite pour le telephone. */
.fac-choisie,tr.fac-choisie>td{background:rgba(255,206,59,.16)}
.fac-cliquable{cursor:pointer}
.fac-cliquable:focus-visible{outline:2px solid var(--evergreen);outline-offset:-2px}

.fac-hors-plan{color:rgba(12,29,21,.55);font-size:.72rem;font-style:italic}

/* Le plan a cote de son tableau quand la place existe, dessus quand elle
   manque : sur telephone le dessin passe en premier, c'est lui qui situe. */
.fac-duo{display:grid;gap:14px;grid-template-columns:minmax(0,240px) minmax(0,1fr);align-items:start}
@media(max-width:860px){
  .fac-duo{grid-template-columns:1fr}
  .fac-plan svg{height:var(--fac-plan-h,164px)}
}

/* --- L'identite de facade, suite : les contenants -------------------------- */
.fac-duo-liste{min-width:0;display:grid;gap:10px;align-content:start}
.fac-duo > div{min-width:0}
.selection-cases{display:grid;gap:7px;min-width:0;align-content:start}
.config-pastilles{display:inline-flex;flex-wrap:wrap;gap:3px;margin-right:6px;vertical-align:middle}

/* .facade-liste li (0,1,1) imposait display:flex et l'emportait sur
   .facade-ligne (0,1,0), qui se voulait une grille. Avec deux enfants ca
   passait ; avec le resume, l'elevation et le formulaire, l'elevation etait
   ecrasee a 89 px de large. La ligne redevient la pile qu'elle a toujours
   voulu etre — specificite (0,2,1), donc elle gagne. */
.facade-liste li.facade-ligne{display:grid;align-items:stretch;gap:8px}

/* La mini-elevation dans la liste des facades : discrete, jamais dominante.
   Elle est la pour reconnaitre la facade, pas pour la re-dessiner. */
.facade-ligne .fac-elev{width:100%;margin-top:6px;padding:6px 8px;border-radius:6px;background:rgba(151,175,154,.1)}
.facade-ligne .fac-elev svg{max-height:82px}

/* Le tableau des facades au telephone : sept colonnes ne tiennent pas, elles
   defilent. La premiere colonne reste accrochee — c'est elle qui porte la
   pastille et le nom, donc la seule qui dise DE QUELLE facade on parle. */
@media(max-width:860px){
  .croquis-table th:first-child,.croquis-table td:first-child{position:sticky;left:0;z-index:1;
    background:var(--white);box-shadow:1px 0 0 rgba(12,29,21,.1)}
  .croquis-table tr.fac-choisie td:first-child{background:#fdf4d8}
  .roi-table th:first-child,.roi-table td:first-child{background:var(--eggshell)}
  .facade-ligne .fac-elev svg{max-height:66px}
}
.etape-tete-lien{margin-left:8px;color:var(--evergreen);font-weight:800;text-underline-offset:3px}
.etape-tete-lien:hover{color:var(--tangerine-ink)}

/* --- Le statut de preuve : d'ou vient ce chiffre ? ------------------------- */
/* Regle R2 du cahier des charges. Quatre niveaux, une echelle de valeur
   croissante — et « mesure » se distingue nettement des trois autres, parce
   que c'est la seule colonne que presque personne d'autre ne peut remplir. */
.jeton-preuve{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:999px;
  font-size:.62rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap;cursor:help}
.jeton-preuve--simule{background:rgba(12,29,21,.08);color:rgba(12,29,21,.62)}
.jeton-preuve--verifie{background:rgba(151,175,154,.34);color:#2c4a3a}
.jeton-preuve--mesure{background:var(--pollen);color:var(--evergreen)}
.jeton-preuve--atteste{background:var(--evergreen);color:var(--pollen)}

/* ═══════════════════════════════════════════════════════════════════════════
   LE CADRE — le systeme de controles de l'application.

   Constat mesure avant d'ecrire une ligne : DOUZE valeurs de rayon dans cette
   feuille, un titre de page a 77 px (une taille de couverture marketing posee
   dans un outil de travail), SEPT familles de boutons pour QUATRE roles, et
   trois traitements de focus differents. C'est ce qui fait qu'une interface
   parait bricolee : non pas un choix laid, mais l'absence de choix, repetee.

   Ce que font iOS et Material, et qu'on reprend ici : un petit jeu de jetons,
   une echelle de hauteurs, un seul anneau de focus, et une hierarchie de
   boutons a quatre roles — rempli, contour, texte, destructif. La marque ne
   change pas : le pollen reste l'accent, l'evergreen reste l'encre. Ce qui
   change, c'est la DISCIPLINE.

   Ce bloc est en fin de feuille : a specificite egale, l'ordre tranche. Il
   n'agit que sous .app-scene et .app-tete, et espace.html est la seule page
   qui charge ce fichier — le site public ne bouge pas.
   ═══════════════════════════════════════════════════════════════════════════ */

.app-corps{
  /* Rayons : TROIS, plus la pilule reservee aux jetons d'etat. */
  --r-xs:4px;         /* champs, cellules */
  --r-sm:6px;         /* boutons, cartes internes */
  --r-md:10px;        /* panneaux, cartes */
  --r-etat:999px;     /* jetons d'etat UNIQUEMENT */

  /* Hauteurs de controle : TROIS. 44 px est aussi le plancher tactile. */
  --h-sm:32px;        /* dans un tableau, dense */
  --h-md:38px;        /* par defaut */
  --h-lg:44px;        /* action principale, et tout le mobile */

  /* Echelle de texte d'OUTIL. Le plus grand fait 28 px : au-dela on est dans
     une page d'accueil, pas dans un poste de travail. */
  --t-micro:.72rem;   /* etiquettes capitales */
  --t-petit:.82rem;   /* boutons, tableaux */
  --t-corps:.94rem;
  --t-sous:1.1rem;    /* titre de carte */
  --t-section:1.35rem;
  --t-page:1.75rem;

  /* Surfaces, traits, encres secondaires. */
  --surface:var(--white);
  --surface-creuse:#efebd8;
  --trait:rgba(12,29,21,.16);
  --trait-fort:rgba(12,29,21,.30);
  --encre-2:rgba(12,29,21,.62);
  --encre-3:rgba(12,29,21,.45);

  /* UN anneau de focus, en deux couches pour rester visible sur toute
     surface — clair contre le fond, sombre contre le clair. */
  --anneau:0 0 0 2px var(--eggshell),0 0 0 4px var(--evergreen);
}

/* --- Le titre : un outil s'annonce, il ne crie pas ------------------------- */
.app-tete{margin-bottom:24px}
.app-tete h1{font-size:var(--t-page);font-weight:700;line-height:1.15;letter-spacing:-.02em}
.app-sur-titre{margin-bottom:6px;font-size:var(--t-micro);letter-spacing:.1em;color:var(--encre-2)}
.app-scene .espace-section h2{font-size:var(--t-section);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.app-scene .espace-carte h3,.app-scene .projet-entete h1{font-size:var(--t-sous);font-weight:700;letter-spacing:-.01em}
.app-scene h4{font-size:var(--t-petit);font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-2)}

/* --- Le bouton : UNE base, QUATRE roles ----------------------------------- */
/* Le rayon a 6 px au lieu de la pilule est, a lui seul, ce qui fait passer un
   bouton du registre « application grand public » au registre « outil ». */
.app-scene .button,
.app-scene .lien-bouton,
.app-scene .mode-onglet{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--h-md);padding:0 14px;margin:0;
  border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:var(--evergreen);
  font:650 var(--t-petit)/1 var(--font-body);letter-spacing:0;text-transform:none;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease}

/* 1. PRINCIPAL — un seul par ecran. Le pollen de la marque, en aplat. */
.app-scene .button--pollen{background:var(--pollen);border-color:var(--pollen);color:var(--evergreen);font-weight:750}
.app-scene .button--pollen:hover{background:#f0bf2e;border-color:#f0bf2e}
.app-scene .button--pollen:active{background:#e0b228;border-color:#e0b228}

/* 2. SECONDAIRE — contour. Le geste normal, celui qu'on repete. */
.app-scene .button--ghost{border-color:var(--trait-fort);background:var(--surface)}
.app-scene .button--ghost:hover{background:var(--surface-creuse);border-color:var(--evergreen)}

/* 3. TERTIAIRE — texte seul, pour les gestes de service (modifier, annuler).
   Remplace le melange lien/bouton qui brouillait la hierarchie. */
.app-scene .lien-bouton{padding:0 8px;color:var(--encre-2);font-weight:650}
.app-scene .lien-bouton:hover{color:var(--evergreen);background:var(--surface-creuse)}

/* 4. DESTRUCTIF — jamais rempli. Une suppression ne se propose pas, elle
   s'accepte : elle reste discrete jusqu'au survol. */
.app-scene .lien-bouton--danger{color:var(--tangerine-ink)}
.app-scene .lien-bouton--danger:hover{background:rgba(214,73,51,.1);color:var(--tangerine-ink)}

.app-scene .button:disabled,.app-scene .lien-bouton:disabled{
  opacity:.42;cursor:default;background:transparent;border-color:var(--trait)}
.app-scene .button--pollen:disabled{background:var(--trait);border-color:transparent}

/* UN anneau, partout, y compris sur les elements designables du dessin. */
.app-scene .button:focus-visible,.app-scene .lien-bouton:focus-visible,
.app-scene .mode-onglet:focus-visible,.app-scene input:focus-visible,
.app-scene select:focus-visible,.app-scene textarea:focus-visible,
.app-scene [tabindex]:focus-visible,.app-scene summary:focus-visible{
  outline:none;box-shadow:var(--anneau)}

/* --- Le controle segmente : dessiner / formulaire ------------------------- */
/* Deux onglets flottants devenaient deux boutons qui se ressemblaient. Une
   piste unique avec un segment actif dit qu'il y a DEUX etats d'une meme
   chose, pas deux actions. C'est le segmented control d'iOS. */
.mode-bascule{display:inline-flex;gap:2px;margin-bottom:20px;padding:2px;
  border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.app-scene .mode-onglet{min-height:var(--h-sm);border-radius:var(--r-xs);color:var(--encre-2)}
.app-scene .mode-onglet--actif{background:var(--surface);border-color:var(--trait);
  color:var(--evergreen);font-weight:750;box-shadow:0 1px 2px rgba(12,29,21,.1)}

/* --- Les champs : une hauteur, un rayon, un trait ------------------------- */
.app-scene input:not([type=checkbox]):not([type=radio]):not([type=range]),
.app-scene select,.app-scene textarea{
  min-height:var(--h-md);padding:0 10px;
  border:1px solid var(--trait-fort);border-radius:var(--r-xs);
  background:var(--surface);color:var(--evergreen);font:400 var(--t-corps)/1.4 var(--font-body)}
.app-scene textarea{min-height:76px;padding:9px 10px;line-height:1.5}
.app-scene label{font-size:var(--t-micro);font-weight:750;letter-spacing:.04em;
  text-transform:uppercase;color:var(--encre-2)}

/* Dans un tableau, tout se resserre : la densite fait partie du metier. */
.app-scene .croquis-table input{min-height:var(--h-sm);width:78px;font-size:var(--t-petit)}
.app-scene .croquis-table td,.app-scene .croquis-table th{padding:7px 10px}
.app-scene .croquis-table th{font-size:var(--t-micro);letter-spacing:.06em;color:var(--encre-2)}

/* --- Cartes et panneaux : un seul rayon, un seul trait ------------------- */
.app-scene .espace-carte,.app-scene .espace-form,.app-scene .croquis,
.app-scene .selection,.app-scene .suivi-carte,.app-scene .tableau-bloc{
  border:1px solid var(--trait);border-radius:var(--r-md);box-shadow:none}
.app-scene .facade-liste li,.app-scene .facade-edition,
.app-scene .fac-plan svg,.app-scene .croquis-cadre-table{border-radius:var(--r-sm)}

/* --- La barre d'outils du dessin : meme langage que les boutons ---------- */
.croquis-outil{width:var(--h-md);height:var(--h-md);border-radius:var(--r-sm);
  border:1px solid var(--trait-fort);background:rgba(255,253,244,.96);
  box-shadow:0 1px 3px rgba(12,29,21,.12);backdrop-filter:blur(6px)}
.croquis-outil:hover{background:var(--surface);transform:none;border-color:var(--evergreen)}
.croquis-outil:focus-visible{outline:none;box-shadow:var(--anneau)}
.croquis-outil--plein{width:var(--h-lg);height:var(--h-lg)}

/* --- Le jeton d'etat garde la pilule : c'est le SEUL qui y a droit ------- */
.jeton-preuve,.fac-pastille,.parcours-num,.frise-point{border-radius:var(--r-etat)}

/* --- Mobile : le plancher tactile s'applique a tout ---------------------- */
@media(max-width:860px){
  .app-tete h1{font-size:1.45rem}
  .app-scene .button,.app-scene .lien-bouton,.app-scene .mode-onglet{min-height:var(--h-lg)}
  .app-scene .croquis-table input{min-height:var(--h-lg);font-size:16px}
  .app-scene input:not([type=checkbox]):not([type=radio]):not([type=range]),
  .app-scene select,.app-scene textarea{min-height:var(--h-lg);font-size:16px}
  .mode-bascule{display:grid;grid-template-columns:1fr 1fr;width:100%}
}

/* compte.css habille les champs des pages de compte (padding 14/16, rayon 7,
   focus pollen a 3 px). Dans l'application ces regles gagnaient et laissaient
   des champs a 47 px au milieu de champs a 38 : l'ecart se voit, et c'est
   precisement le genre de detail qui fait « pas cadre ». On les aligne. */
.app-scene .compte-champ input,
.app-scene .compte-champ select{
  height:auto;min-height:var(--h-md);padding:0 10px;border-width:1px;
  border-color:var(--trait-fort);border-radius:var(--r-xs);font-size:var(--t-corps)}
.app-scene .compte-champ input:focus-visible,
.app-scene .compte-champ select:focus-visible{outline:none;box-shadow:var(--anneau);border-color:var(--evergreen)}
.app-scene .compte-champ label{font-size:var(--t-micro)}
@media(max-width:860px){
  .app-scene .compte-champ input,.app-scene .compte-champ select{min-height:var(--h-lg);font-size:16px}
}
/* Les champs de l'entete du croquis mesuraient 47 px alors que leur regle en
   dit 38 : ce n'etait pas un conflit de regle mais un ETIREMENT de grille.
   .croquis-entete aligne cinq cellules sur la plus haute (celle du modele de
   volet, qui porte deux champs) et l'input remplissait le reste. On arrete
   l'etirement plutot que de forcer une hauteur. */
.app-scene .compte-champ{align-content:start}
.app-scene .compte-champ input,.app-scene .compte-champ select{align-self:start;width:100%}

/* --- L'etat de la tour de calcul, dans la barre laterale ------------------ */
/* Deux machines, deux sants : le relais peut repondre pendant que la tour
   dort. Un point et une phrase, jamais une alarme — la file qui patiente est
   le fonctionnement NORMAL du montage, pas une panne. */
/* EN LIGNE, l'etat normal : un point et un mot, sans cadre. Un pave qui dit
   « tout va bien » a longueur de journee finit par ne plus se lire -- et il
   prend la place de celui qui, lui, aurait quelque chose a dire. L'explication
   est au survol (attribut title), pas a l'ecran en permanence.
   HORS LIGNE, la phrase revient et le cadre avec : la, l'information sert. */
.app-calcul{display:flex;align-items:flex-start;gap:7px;margin:0 0 10px;padding:4px 2px;
  color:rgba(245,242,225,.62);font-size:.72rem;font-weight:650;line-height:1.35;cursor:help}
.app-calcul small{display:block;margin-top:3px;color:rgba(245,242,225,.55);
  font-size:.7rem;font-weight:500}
.app-calcul-point{flex:none;width:7px;height:7px;border-radius:var(--r-etat);margin-top:4px}
.app-calcul-bref{letter-spacing:.02em}
.app-calcul--en-ligne .app-calcul-point{background:#6fcf97;box-shadow:0 0 0 3px rgba(111,207,151,.18)}
.app-calcul--hors-ligne{padding:9px 11px;border-radius:var(--r-sm);
  background:rgba(255,206,59,.12);color:var(--pollen)}
.app-calcul--hors-ligne .app-calcul-point{background:var(--pollen);box-shadow:0 0 0 3px rgba(255,206,59,.18)}
.app-calcul--hors-ligne small{color:rgba(245,242,225,.6)}
/* Le libelle complet reste dans le DOM pour les lecteurs d'ecran : le point
   vert seul ne dit rien a qui ne le voit pas. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Les icones : un trait, une grille, une taille ------------------------ */
/* Les glyphes typographiques (↩ ↪ ⌫ ⤢) empruntaient leur dessin a la police
   du systeme : ils changeaient d'un appareil a l'autre, et aucun ne partageait
   l'epaisseur de trait des autres. Des SVG inline a 20 px reglent les trois
   problemes d'un coup, et heritent de la couleur du bouton. */
.ico{width:20px;height:20px;display:block;flex:none}
.croquis-outil .ico{width:18px;height:18px}
.croquis-outil--plein .ico{width:20px;height:20px}

/* --- L'annee semaine par semaine : quatre bandes facettees ---------------- */
/* Facettees et non empilees : quatre teintes a distinguer dans un seul dessin
   ne passent pas le controle de separation sur la surface creme (le pire
   couple tombe a 14,5 pour un plancher de 15). Une bande par effet, meme
   echelle verticale, identite portee par l'etiquette. */
.sem-figure svg{width:100%;height:auto;display:block;margin-top:6px}
.sem-nom{fill:var(--evergreen);font-size:11px;font-weight:750}
.sem-total{fill:rgba(12,29,21,.52);font-size:10px;font-weight:650;text-anchor:end}
.sem-socle{stroke:rgba(12,29,21,.22);stroke-width:1}
.sem-mois{fill:rgba(12,29,21,.45);font-size:8.5px;font-weight:700;text-anchor:middle}
.sem-figure rect{cursor:crosshair}
@media(max-width:860px){
  .sem-nom{font-size:13px}
  .sem-total{font-size:12px}
  .sem-mois{font-size:11px}
}

/* --- Le hub d'aide : un « ? » permanent, quatre portes derriere ----------- */
/* Permanent et discret. Un outil dont on ne sait pas a qui parler devient un
   outil qu'on abandonne — mais une bulle qui saute au visage est pire. */
/* Dans la barre laterale, jamais par-dessus la scene. Un bouton flottant en
   bas a droite couvre ce qui se trouve dessous -- ici, les commandes de la
   simulation. Le chrome est le bon endroit pour une porte permanente. */
.app-aide{display:flex;align-items:center;gap:9px;width:100%;margin:0 0 10px;
  padding:9px 12px;border:1px solid transparent;border-radius:var(--r-sm);
  background:transparent;color:rgba(245,242,225,.62);
  font:650 .84rem/1 var(--font-body);text-align:left;cursor:pointer;
  transition:background .15s,color .15s}
.app-aide:hover{background:rgba(245,242,225,.09);color:var(--eggshell)}
.app-aide:focus-visible{outline:none;box-shadow:0 0 0 2px var(--evergreen),0 0 0 4px var(--pollen)}
.app-aide .ico{flex:none;width:18px;height:18px}
@media(max-width:860px){
  .app-aide{width:auto;margin:0;padding:9px 10px}
  .app-aide span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

.aide{width:min(560px,calc(100vw - 32px));max-height:min(82vh,760px);padding:0;
  border:1px solid var(--trait);border-radius:var(--r-md);background:var(--surface);
  color:var(--evergreen);box-shadow:0 24px 70px rgba(12,29,21,.24);overflow:hidden}
.aide::backdrop{background:rgba(12,29,21,.42)}
.aide h2{margin:0;padding:18px 20px 0;font-size:var(--t-section);font-weight:700;letter-spacing:-.02em}
.aide-fermer-forme{float:right;margin:14px 14px 0 0}
.aide-fermer{display:grid;place-items:center;width:32px;height:32px;padding:0;
  border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface);
  color:var(--encre-2);cursor:pointer}
.aide-fermer:hover{background:var(--surface-creuse);color:var(--evergreen)}
.aide-onglets{display:flex;gap:2px;margin:14px 20px 0;padding:2px;
  border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.aide .mode-onglet{flex:1;min-height:var(--h-sm);border-radius:var(--r-xs);
  font-size:var(--t-petit);font-weight:650;color:var(--encre-2);border:1px solid transparent;
  background:transparent;cursor:pointer}
.aide .mode-onglet--actif{background:var(--surface);border-color:var(--trait);
  color:var(--evergreen);font-weight:750;box-shadow:0 1px 2px rgba(12,29,21,.1)}
.aide-corps{padding:16px 20px 22px;max-height:min(60vh,540px);overflow-y:auto}

.aide-faq{border-bottom:1px solid rgba(12,29,21,.1)}
.aide-faq summary{padding:11px 0;font-size:var(--t-corps);font-weight:650;cursor:pointer;list-style:none}
.aide-faq summary::-webkit-details-marker{display:none}
.aide-faq summary::before{content:"+";display:inline-block;width:16px;color:var(--encre-3);font-weight:800}
.aide-faq[open] summary::before{content:"−"}
.aide-faq p{margin:0 0 12px 16px;color:var(--encre-2);font-size:.88rem;line-height:1.55}
.aide-pied{margin:14px 0 0;color:var(--encre-3);font-size:.8rem}

.aide-forme{display:grid;gap:12px}
.aide-forme label{display:grid;gap:5px}
.aide-contexte{margin:0;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--surface-creuse);color:var(--encre-2);font-size:.76rem;line-height:1.5}
.aide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

.aide-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aide-liste li{padding:11px 13px;border:1px solid var(--trait);border-radius:var(--r-sm);
  background:var(--surface-creuse)}
.aide-ligne-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.aide-ligne-meta{margin:3px 0 0;color:var(--encre-3);font-size:.74rem}
.aide-ligne-message{margin:7px 0 0;color:var(--encre-2);font-size:.84rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aide-etat{flex:none;padding:2px 8px;border-radius:var(--r-etat);
  font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.aide-etat--ouvert{background:rgba(12,29,21,.1);color:var(--encre-2)}
.aide-etat--analyse{background:rgba(255,206,59,.32);color:var(--evergreen)}
.aide-etat--corrige{background:rgba(15,156,135,.2);color:#0b6a5c}
.aide-etat--ferme{background:rgba(12,29,21,.08);color:var(--encre-3)}

@media(max-width:860px){
  .aide-bouton{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .aide{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:var(--r-md) var(--r-md) 0 0}
  .aide-onglets{flex-direction:column;margin:14px 16px 0}
  .aide .mode-onglet{min-height:var(--h-lg)}
  .aide-corps{padding:14px 16px 20px}
}

/* --- Le bilan energetique : besoin du batiment, energie de la machine ----- */
.nrj-figure svg{width:100%;height:auto;display:block;margin-top:4px}
.nrj-titre{fill:rgba(12,29,21,.55);font-size:8.5px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.nrj-note{margin:8px 0 0;color:var(--encre-2,rgba(12,29,21,.62));font-size:.76rem;line-height:1.5}
.nrj-note--dim{margin-top:5px;padding:7px 9px;border-radius:var(--r-sm);background:rgba(255,206,59,.15)}
.nrj-note--dim strong{font-weight:800}

/* La FAQ en sections : vingt-six questions a la file, on n'en lit aucune. */
.aide-section{margin-bottom:18px}
.aide-section h3{margin:0 0 4px;font-size:var(--t-micro);font-weight:850;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-3)}

/* --- Les signalements, cote Kelveen -------------------------------------- */
/* Un etat que personne ne peut faire avancer est pire qu'une absence d'etat :
   il promet un suivi qui n'existe pas. C'est ici qu'il avance. */
.admin-bloc{margin-bottom:22px}
.admin-bloc h3{margin:0 0 10px;font-size:var(--t-sous);font-weight:700}
.admin-compte{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.admin-tickets{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.admin-tickets li{padding:12px 14px;border:1px solid var(--trait);border-radius:var(--r-sm);
  background:var(--surface)}
.admin-tickets select{min-width:118px}
.admin-contexte{margin-top:8px}
.admin-contexte summary{font-size:.74rem;font-weight:750;color:var(--encre-3);cursor:pointer}
.admin-contexte dl{display:grid;gap:2px;margin:8px 0 0;padding:9px 11px;border-radius:var(--r-xs);
  background:var(--surface-creuse);font-size:.72rem}
.admin-contexte dl div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.admin-contexte dt{color:var(--encre-3);font-weight:750}
.admin-contexte dd{margin:0;color:var(--encre-2);word-break:break-word}
@media(max-width:860px){
  .admin-contexte dl div{grid-template-columns:1fr}
  .admin-tickets .aide-ligne-tete{flex-direction:column;align-items:stretch;gap:8px}
}

/* --- Le journal de verification : l'etape Etude, en clair ----------------- */
/* « Kelveen a la main » ne disait rien. Ici on voit ce qui est controle, ou
   ca en est, et surtout ce que la verification a CHANGE -- la seule ligne qui
   prouve que l'etude sert a quelque chose. */
.verif{margin:14px 0 0;padding:14px 16px;border:1px solid var(--trait);
  border-radius:var(--r-md);background:var(--surface)}
.verif h4{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.verif-avance{padding:2px 8px;border-radius:var(--r-etat);background:var(--surface-creuse);
  color:var(--encre-2);font-size:.7rem;font-weight:800;letter-spacing:.04em}
.verif-liste{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.verif-ligne{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:9px;padding:7px 0;border-bottom:1px solid rgba(12,29,21,.07)}
.verif-ligne:last-child{border-bottom:0}
.verif-marque{width:9px;height:9px;border-radius:var(--r-etat);
  box-shadow:inset 0 0 0 1.5px rgba(12,29,21,.28)}
.verif-nom{font-size:.86rem;font-weight:650}
.verif-etat{font-size:.68rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-3)}
.verif-note{grid-column:2/-1;margin:3px 0 0;padding:7px 9px;border-radius:var(--r-xs);
  background:var(--surface-creuse);color:var(--encre-2);font-size:.78rem;line-height:1.5}
/* Les etats : a faire reste creux, en cours pulse doucement, verifie se
   remplit. Le vert n'arrive qu'au bout -- il se merite. */
.verif-ligne--en_cours .verif-marque{background:var(--pollen);box-shadow:none}
.verif-ligne--en_cours .verif-etat{color:#8a6d12}
.verif-ligne--fait .verif-marque{background:#0f9c87;box-shadow:none}
.verif-ligne--fait .verif-etat{color:#0b6a5c}
.verif-ligne--sans_objet{opacity:.55}
.verif-ligne--sans_objet .verif-marque{background:rgba(12,29,21,.2);box-shadow:none}
.verif-pied{margin:11px 0 0;color:var(--encre-2);font-size:.8rem;line-height:1.55}
.verif-corriger{margin:8px 0 0;color:var(--encre-3);font-size:.78rem}
@media(max-width:860px){
  .verif-ligne{grid-template-columns:auto minmax(0,1fr);row-gap:3px}
  .verif-etat{grid-column:2;justify-self:start}
}

/* --- La verification, cote Kelveen --------------------------------------- */
.admin-verif{margin-top:10px;padding-top:10px;border-top:1px dashed var(--trait)}
.admin-verif summary{font-size:.76rem;font-weight:750;color:var(--encre-2);cursor:pointer}
.admin-verif-ligne{display:grid;grid-template-columns:150px 118px minmax(0,1fr);gap:7px;
  align-items:center;margin-top:7px;font-size:.78rem}
.admin-verif > .button{margin-top:10px}
@media(max-width:860px){ .admin-verif-ligne{grid-template-columns:1fr} }

/* --- La proposition : le montant, et ce qu'il achete --------------------- */
/* Un euro sans le gain qu'il achete ni son carbone, c'est ce que la regle des
   deux monnaies interdit -- et c'est aussi ce qui separe un devis d'une
   decision. Les jetons se posent sous le montant, au meme poids. */
.proposition-monnaies{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 0}
.proposition-retour{color:var(--encre-2);font-size:.78rem;font-weight:650}
.proposition-partiel{margin:5px 0 0;color:var(--encre-3);font-size:.74rem;font-style:italic}

/* ═══ LE CADRE, SUITE : la barre laterale ═══════════════════════════════════
   Le premier passage ne portait que sur .app-scene. Le flanc est reste avec
   ses valeurs propres -- et avec un anneau de focus mal oriente.

   L'anneau de la scene est fait de deux couches, creme puis encre : la creme
   detache le controle de son fond clair, l'encre ferme le trait. Sur le flanc
   sombre, la couche externe en encre se pose sur un fond de la MEME encre et
   disparait ; il ne reste qu'un lisere creme de 2 px, exactement la couleur du
   texte des liens voisins. Visible, mais confondu avec ce qui l'entoure.

   On le retourne donc : encre a l'interieur, pollen a l'exterieur. 11,76:1
   contre le fond, et surtout une couleur que rien d'autre ne porte ici.
   ═══════════════════════════════════════════════════════════════════════════ */

.app-flanc{
  /* Le meme anneau, retourne : pollen sur encre plutot qu'encre sur creme.
     Deux couches, pour rester lisible sur les etats qui ont deja un fond. */
  --anneau-sombre:0 0 0 2px var(--evergreen),0 0 0 4px var(--pollen);
}
.app-flanc a:focus-visible,
.app-flanc button:focus-visible,
.parcours-etape a:focus-visible{outline:none;box-shadow:var(--anneau-sombre)}

/* Les rayons et les hauteurs rejoignent l'echelle de la scene. */
.app-nav a,.app-retour,.parcours-etape a{border-radius:var(--r-sm)}
.app-nav a{min-height:var(--h-md);display:flex;align-items:center;font-size:.86rem}
.app-compte .app-deconnexion{border-radius:var(--r-sm)}

/* L'entree active de la navigation se voyait a peine : elle prend le meme
   traitement que l'etape en cours du parcours -- fond pollen tres dilue,
   encre pleine. Deux endroits qui disent « vous etes ici » ne devraient pas
   le dire de deux facons. */
.app-nav a.nav-active{background:rgba(255,206,59,.14);color:var(--eggshell);font-weight:750}

/* La marque : la meme echelle typographique que le reste. */
.app-marque{padding-bottom:24px}
.app-marque small{font-size:var(--t-micro)}
.parcours-titre{font-size:var(--t-micro);letter-spacing:.12em}

@media(max-width:860px){
  /* En barre haute, le flanc porte trop de choses de front. Le retour et le
     titre du parcours cedent la place -- ils sont redondants avec la frise du
     projet, qui est juste en dessous. */
  .app-flanc{padding:10px 14px;gap:10px}
  .app-nav a{min-height:var(--h-lg)}
}

/* --- Le questionnaire, une question a la fois ----------------------------- */
/* Cinq listes d'un bloc, c'est un formulaire : on le parcourt des yeux et on
   ne lit pas la note du bas. Une question par ecran donne la place de dire
   POURQUOI on la pose -- c'est tout le gain, pas la mise en scene. */
.questionnaire--pas-a-pas .questionnaire-grille{display:block}
.questionnaire--pas-a-pas .compte-champ{max-width:420px}
.questionnaire--pas-a-pas .questionnaire-note{display:none}
.quest{display:grid;gap:10px;margin-top:14px;max-width:520px}
.quest-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.quest-avance{margin:0;font-size:var(--t-micro);font-weight:850;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-3)}
.quest-jauge{height:3px;border-radius:var(--r-etat);background:rgba(12,29,21,.1);overflow:hidden}
.quest-jauge i{display:block;height:100%;border-radius:var(--r-etat);background:var(--pollen);
  transition:width .2s ease}
.quest-pourquoi{margin:0;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface-creuse);color:var(--encre-2);font-size:.82rem;line-height:1.55}
.quest-pieds{display:flex;gap:10px}
@media(max-width:860px){
  .questionnaire--pas-a-pas .compte-champ{max-width:none}
  .quest-pieds .button{flex:1}
}

/* ======================================================================== */
/* Refonte du poste de travail — le 19/08/2026
   Le parcours reste un repère, pas la navigation principale. Une vue projet
   commence par le geste à faire ; un résultat commence par sa conclusion. */

@media(min-width:861px){
  .app{grid-template-columns:208px minmax(0,1fr)}
  .app-flanc{padding:22px 16px}
  .app-scene{padding:34px clamp(28px,4vw,58px) 42px}
  .app-scene>[data-espace-contenu]{width:min(100%,1280px);margin-inline:auto}
}

.app-tete{margin-bottom:22px}
.app-tete h1{font-size:clamp(2rem,4vw,3.2rem);line-height:.98}
.app-sur-titre{margin-bottom:7px}

/* Le parcours compact vit dans la scène. Il montre uniquement le contexte
   utile ; la trajectoire entière s'ouvre sans changer d'écran. */
.parcours-compact{position:relative;display:grid;gap:12px;margin:0 0 24px;padding:16px 18px;
  border:1px solid rgba(12,29,21,.14);border-radius:var(--r-md);background:var(--white)}
.parcours-compact[hidden]{display:none}
.parcours-compact-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.parcours-compact-tete>div{display:grid;gap:2px;min-width:0}
.parcours-compact-label{font-size:var(--t-micro);font-weight:850;letter-spacing:.09em;
  text-transform:uppercase;color:var(--encre-3)}
.parcours-compact-tete strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.98rem}
.parcours-complet{position:relative;flex:none}
.parcours-complet summary{min-height:38px;display:flex;align-items:center;padding:7px 10px;
  border-radius:var(--r-sm);color:var(--evergreen);font-size:.78rem;font-weight:800;cursor:pointer}
.parcours-complet summary:hover{background:var(--surface-creuse)}
.parcours-complet[open] summary{background:var(--evergreen);color:var(--eggshell)}
.parcours-liste--compacte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.parcours-liste--compacte .parcours-etape{display:block;min-width:0}
.parcours-liste--compacte .parcours-etape a{display:grid;grid-template-columns:28px minmax(0,1fr);
  grid-template-areas:"position position" "numero nom";align-items:center;gap:3px 9px;min-height:66px;
  padding:9px 11px;border:1px solid rgba(12,29,21,.1);border-radius:var(--r-sm);
  background:var(--surface-creuse);color:var(--encre-2);text-decoration:none}
.parcours-liste--compacte .parcours-position{grid-area:position;font-size:.62rem;font-weight:850;
  letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.parcours-liste--compacte .parcours-num{grid-area:numero;width:25px;height:25px;border-color:rgba(12,29,21,.22);
  color:var(--encre-2)}
.parcours-liste--compacte .parcours-nom{grid-area:nom;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.82rem;font-weight:750;color:var(--encre-2)}
.parcours-liste--compacte .parcours-etape--active a{border-color:var(--pollen);
  background:rgba(255,206,59,.15);outline:0;box-shadow:inset 0 0 0 1px var(--pollen)}
.parcours-liste--compacte .parcours-etape--active .parcours-num{border-color:var(--evergreen);
  background:var(--evergreen);color:var(--pollen);box-shadow:none}
.parcours-liste--compacte .parcours-etape--active .parcours-nom{color:var(--evergreen)}
.parcours-liste--compacte .parcours-etape--prevue a{opacity:.48}

.parcours-liste--complete{position:absolute;right:0;z-index:20;width:min(360px,calc(100vw - 48px));
  max-height:min(560px,70vh);overflow-y:auto;margin-top:8px;padding:8px;
  border:1px solid rgba(12,29,21,.14);border-radius:var(--r-md);background:var(--white);
  box-shadow:0 18px 45px rgba(12,29,21,.18)}
.parcours-liste--complete .parcours-etape{display:block}
.parcours-liste--complete .parcours-etape a{display:grid;grid-template-columns:28px minmax(0,1fr);
  column-gap:9px;padding:9px 10px;color:var(--encre-2);border-radius:var(--r-sm)}
.parcours-liste--complete .parcours-etape a:hover{background:var(--surface-creuse);color:var(--evergreen)}
.parcours-liste--complete .parcours-num{width:23px;height:23px;border-color:rgba(12,29,21,.2);color:var(--encre-2)}
.parcours-liste--complete .parcours-nom{font-size:.82rem}
.parcours-liste--complete .parcours-action{color:var(--encre-3)}
.parcours-liste--complete .parcours-etape--active a{outline:0;background:rgba(255,206,59,.14)}
.parcours-liste--complete .parcours-etape--faite .parcours-num{color:var(--evergreen)}
.parcours-liste--complete .parcours-etape--en-cours .parcours-num{color:var(--evergreen);box-shadow:none}

/* Un seul niveau de carte dans la vue projet. */
.projet-entete{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:4px 18px;
  margin-bottom:18px;padding-bottom:14px}
.projet-entete .projet-retour{grid-column:1/-1;width:max-content;margin:0}
.projet-entete h1{margin:0}
.projet-adresse{grid-column:1;margin:0;color:var(--encre-2);font-size:.8rem}
.projet-entete .etape-tete{justify-self:end;max-width:520px}
.projet-entete .etape-tete-action{display:none}
[data-ecran="projet"] #projet>h2{display:none}
.projet-carte{padding:0;border:0;background:transparent}
.projet-cap{display:grid;grid-template-columns:minmax(170px,.42fr) minmax(0,1.58fr);gap:22px;
  align-items:start;margin-bottom:20px;padding:20px;border-color:rgba(12,29,21,.14);background:var(--white)}
.projet-cap-position{display:grid;align-content:start;gap:8px;margin:0}
.projet-cap-position strong{font-size:1.15rem}
.projet-action{display:grid;align-items:start;gap:10px;min-width:0}
.projet-action-label{display:block;font-size:var(--t-micro);font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-3)}
.projet-action>.button{width:max-content}
.projet-action .selection,.projet-action .proposition{margin:0}
.projet-action .selection{padding:0;border:0;background:transparent}
.projet-action .selection>summary{width:max-content;min-height:44px;display:flex;align-items:center;
  padding:11px 16px;border-radius:var(--r-sm);background:var(--pollen);color:var(--evergreen);
  font-size:.84rem;font-weight:850;line-height:1.25;cursor:pointer;list-style:none}
.projet-action .selection>summary::-webkit-details-marker{display:none}
.projet-action .selection>summary::after{content:"＋";margin-left:10px;font-size:1rem}
.projet-action .selection[open]>summary::after{content:"−"}
.projet-action .selection-contenu{display:grid;gap:12px;margin-top:12px;padding:14px;
  border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--surface-creuse)}
.projet-carte>.frise{margin-bottom:20px}
.projet-carte>.verif,.projet-carte>.configs,.projet-carte>.projet-histoire,
.projet-carte>.suivi-carte{margin-bottom:16px}
/* Aux deux premières étapes, cette section sert uniquement de rampe d'action.
   Les résultats et le bâtiment disposent juste après de leur propre espace. */
[data-etape-active="qualification"] #projet .projet-carte>:not(.projet-cap),
[data-etape-active="simulation"] #projet .projet-carte>:not(.projet-cap){display:none}

/* Les résultats occupent la largeur de lecture : la synthèse n'est plus
   comprimée dans une mosaïque de petites cartes. */
.espace-grille[data-liste-simulations]{grid-template-columns:1fr}
.espace-grille[data-liste-simulations]>.espace-carte{padding:20px}
.espace-grille[data-liste-simulations]>.espace-carte>h3{padding-right:44px;margin-bottom:4px}
.resultat-synthese{display:grid;gap:16px;margin-top:14px}
.resultat-verdict{padding:18px 20px;border-radius:var(--r-md);background:var(--evergreen);color:var(--eggshell)}
.resultat-verdict>span{display:flex;align-items:center;flex-wrap:wrap;gap:4px;font-size:var(--t-micro);
  font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.resultat-verdict .jeton-preuve{background:rgba(245,242,225,.14);color:var(--eggshell)}
.resultat-verdict h4{margin:9px 0 6px;max-width:880px;font-size:clamp(1.15rem,2.2vw,1.65rem);
  line-height:1.2;letter-spacing:-.025em;color:var(--white)}
.resultat-verdict p{margin:0;max-width:740px;color:rgba(245,242,225,.72);font-size:.8rem;line-height:1.5}
.resultat-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.resultat-metrics>div{display:grid;gap:5px;padding:15px 16px;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-sm);background:var(--white)}
.resultat-metrics dt{font-size:var(--t-micro);font-weight:850;letter-spacing:.07em;
  text-transform:uppercase;color:var(--encre-3)}
.resultat-metrics dd{margin:0;font-size:clamp(1.2rem,2.3vw,1.65rem);font-weight:850;
  line-height:1.05;letter-spacing:-.035em;color:var(--evergreen)}
.resultat-comparaison>.espace-graphique{margin:0;border:1px solid rgba(12,29,21,.1);
  background:var(--surface-creuse)}
.resultat-details{border-top:1px solid rgba(12,29,21,.12)}
.resultat-details>summary{min-height:44px;display:flex;align-items:center;padding:9px 2px;
  color:var(--evergreen);font-size:.82rem;font-weight:800;cursor:pointer}
.resultat-details[open]>summary{margin-bottom:10px}
.resultat-details-chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:860px){
  .app-flanc{position:sticky;padding:10px 14px}
  .app-marque small{display:none}
  .app-scene{padding:18px 14px calc(82px + env(safe-area-inset-bottom))}
  .app-tete{margin-bottom:16px}
  .app-tete h1{font-size:1.9rem}

  /* Trois entrées globales + l'aide forment une vraie navigation basse. */
  .app-nav{right:25%;padding-right:4px}
  .app-aide{position:fixed;right:0;bottom:0;z-index:51;width:25%;height:auto;min-height:56px;
    margin:0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:center;
    flex-direction:column;gap:2px;border:0;border-radius:0;background:var(--evergreen);
    color:rgba(245,242,225,.72);font-size:.66rem;font-weight:750;text-align:center}
  .app[data-business="true"] .app-nav{right:20%}
  .app[data-business="true"] .app-aide{width:20%}
  .app[data-admin="true"] .app-nav{right:16.666%}
  .app[data-admin="true"] .app-aide{width:16.666%}
  .app-aide .ico{width:17px;height:17px}
  .app-aide span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-calcul{display:none}

  .parcours-compact{gap:10px;margin-bottom:16px;padding:12px}
  .parcours-compact-tete{align-items:center}
  .parcours-compact-tete strong{font-size:.9rem}
  .parcours-complet summary{min-height:44px;max-width:122px;text-align:right;line-height:1.2}
  .parcours-liste--compacte{gap:5px}
  .parcours-liste--compacte .parcours-etape{display:block}
  .parcours-liste--compacte .parcours-etape a{grid-template-columns:1fr;grid-template-areas:"position" "numero" "nom";
    justify-items:center;min-height:86px;padding:8px 4px;text-align:center}
  .parcours-liste--compacte .parcours-nom{max-width:100%;font-size:.68rem}
  .parcours-liste--compacte .parcours-position{font-size:.54rem}
  .parcours-liste--complete{position:fixed;left:12px;right:12px;bottom:72px;width:auto;max-height:65vh}

  .projet-entete{grid-template-columns:1fr;align-items:start;margin-bottom:14px}
  .projet-entete .projet-retour{grid-column:auto}
  .projet-entete .etape-tete{justify-self:start}
  .projet-entete h1{font-size:1.55rem}
  .projet-cap{grid-template-columns:1fr;gap:14px;padding:14px}
  .projet-cap-position{display:flex;margin:0;align-items:center}
  .projet-action>.button{width:100%}
  .projet-action .selection>summary{width:100%;justify-content:space-between}
  .projet-carte{padding:0}
  .projet-carte>.frise{display:none}

  .espace-grille[data-liste-simulations]>.espace-carte{padding:14px 12px}
  .resultat-verdict{padding:15px}
  .resultat-verdict h4{font-size:1.15rem}
  .resultat-metrics{grid-template-columns:1fr}
  .resultat-metrics>div{grid-template-columns:1fr auto;align-items:baseline;padding:12px}
  .resultat-metrics dd{font-size:1.25rem;text-align:right}
  .resultat-details-chiffres{grid-template-columns:1fr 1fr}
}

@media(max-width:420px){
  .parcours-compact-tete{align-items:flex-start}
  .parcours-compact-label{font-size:.62rem}
  .parcours-compact-tete strong{max-width:165px}
  .resultat-details-chiffres{grid-template-columns:1fr}
}

/* --- Le bâtiment devient une fiche de décision -------------------------- */
.batiment-fiche{padding:0!important;overflow:visible;background:var(--white)}
.batiment-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:19px 20px;border-bottom:1px solid rgba(12,29,21,.1)}
.batiment-tete>div{min-width:0}
.batiment-label{display:block;margin-bottom:3px;font-size:var(--t-micro);font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3)}
.batiment-tete h3{margin:0!important;font-size:1.2rem!important}
.batiment-tete p{margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--encre-2);font-size:.82rem}
.batiment-statut{flex:none;padding:5px 9px;border-radius:var(--r-etat);font-size:.67rem;
  font-weight:850;letter-spacing:.04em}
.batiment-statut--pret{background:rgba(15,156,135,.13);color:#0b6b5c}
.batiment-statut--attente{background:rgba(255,206,59,.2);color:#715900}
.batiment-statut--vide{background:rgba(12,29,21,.07);color:var(--encre-3)}
.batiment-corps{display:grid;grid-template-columns:minmax(0,.8fr) minmax(320px,1.2fr);gap:14px;
  padding:16px 20px}
.batiment-faits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.batiment-faits>div{display:grid;align-content:start;gap:4px;padding:13px 12px;border-radius:var(--r-sm);
  background:var(--surface-creuse)}
.batiment-faits dt{font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.batiment-faits dd{margin:0;font-size:1.12rem;font-weight:800;line-height:1.2}
.batiment-faits small{display:block;margin-top:3px}
.batiment-decision{display:grid;align-content:center;gap:5px;padding:15px 16px;border-radius:var(--r-sm);
  background:var(--evergreen);color:var(--eggshell)}
.batiment-decision>span{font-size:.65rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.batiment-decision h4{margin:0;color:var(--white);font-size:1rem;letter-spacing:-.015em}
.batiment-decision p{margin:0;color:rgba(245,242,225,.68);font-size:.76rem;line-height:1.45}
.batiment-actions-principales{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.batiment-actions-principales .button{min-height:38px;padding:9px 12px;font-size:.76rem}
.batiment-decision .button--ghost{border-color:rgba(245,242,225,.28);color:var(--eggshell)}
.batiment-decision .button--ghost:hover{border-color:var(--pollen);color:var(--pollen)}
.batiment-fiche>.facade-detail{margin:0;border-top:1px solid rgba(12,29,21,.1)}
.batiment-fiche>.facade-detail>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;padding:10px 20px;color:var(--evergreen);cursor:pointer}
.batiment-fiche>.facade-detail>summary span{font-size:.84rem;font-weight:850}
.batiment-fiche>.facade-detail>summary small{color:var(--encre-3);font-size:.72rem;font-weight:650}
.batiment-fiche>.facade-detail[open]>summary{background:var(--surface-creuse)}
.batiment-fiche>[data-zone-roi],.batiment-fiche>.facade-detail>[data-zone-facades]{padding:16px 20px}
.batiment-actions-secondaires{align-items:center;padding:10px 20px;border-top:1px solid rgba(12,29,21,.08)}
.batiment-actions-secondaires .button{min-height:32px;padding:6px 10px;font-size:.74rem}
.batiment-actions-secondaires .lien-bouton{margin-left:auto;font-size:.72rem}
.batiment-fiche>.espace-edition{margin:0 20px 16px}

/* Les actions rares d'une façade ne rivalisent plus avec « Simuler ». */
.facade-gestes{display:flex;align-items:center;gap:6px}
.facade-options{position:relative}
.facade-options>summary{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);
  color:var(--encre-2);font-weight:900;letter-spacing:.08em;cursor:pointer;list-style:none}
.facade-options>summary::-webkit-details-marker{display:none}
.facade-options>summary:hover,.facade-options[open]>summary{background:rgba(12,29,21,.08);color:var(--evergreen)}
.facade-options>span{position:absolute;right:0;z-index:6;display:grid;gap:4px;min-width:130px;margin-top:4px;
  padding:7px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-sm);background:var(--white);
  box-shadow:0 12px 28px rgba(12,29,21,.16)}
.facade-options>span .lien-bouton{min-height:34px;padding:6px 8px;text-align:left;text-decoration:none;border-radius:var(--r-xs)}
.facade-options>span .lien-bouton:hover{background:var(--surface-creuse)}

/* Le classement commence par une recommandation, puis expose les preuves. */
.roi-zone{margin-top:0;padding-top:0;border-top:1px solid rgba(12,29,21,.1)}
.roi-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:13px}
.roi-entete>div>span{display:block;margin-bottom:3px;font-size:.65rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3)}
.roi-entete .roi-titre{margin:0;font-size:1.12rem}
.roi-avancement{flex:none;padding:5px 8px;border-radius:var(--r-etat);background:var(--surface-creuse);
  color:var(--encre-2);font-size:.68rem;font-weight:750}
.roi-decision{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(300px,1.3fr);gap:12px;align-items:stretch}
.roi-decision>.roi-verdict:only-child{grid-column:1/-1}
.roi-plan{min-width:0}
.roi-plan .fac-plan{height:100%}
.roi-plan .fac-plan svg{height:100%;min-height:190px}
.roi-verdict{display:grid;align-content:center;gap:7px;padding:18px;border-radius:var(--r-md);
  background:rgba(255,206,59,.17);border:1px solid rgba(255,206,59,.55)}
.roi-verdict>span{font-size:.66rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#755d00}
.roi-verdict h5{margin:0;font-size:1.25rem;letter-spacing:-.025em;color:var(--evergreen)}
.roi-verdict>dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:3px 0 0}
.roi-verdict>dl>div{display:grid;gap:2px;padding:9px;border-radius:var(--r-sm);background:rgba(255,253,244,.75)}
.roi-verdict dt{font-size:.59rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3)}
.roi-verdict dd{margin:0;font-size:.95rem;font-weight:850}
.roi-verdict p{margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.roi-verdict--attente{background:var(--surface-creuse);border-color:rgba(12,29,21,.1)}
.roi-verdict--attente>span{color:var(--encre-3)}
.roi-classement{margin-top:12px;border-top:1px solid rgba(12,29,21,.1)}
.roi-classement>summary{display:flex;align-items:center;min-height:44px;padding:8px 2px;
  color:var(--evergreen);font-size:.78rem;font-weight:850;cursor:pointer}

@media(max-width:900px){
  .batiment-corps{grid-template-columns:1fr}
  .roi-decision{grid-template-columns:1fr}
}
@media(max-width:600px){
  .batiment-tete{padding:14px;align-items:flex-start}
  .batiment-statut{max-width:115px;text-align:center}
  .batiment-corps{padding:12px 14px}
  .batiment-faits{gap:5px}
  .batiment-faits>div{padding:10px 8px}
  .batiment-faits dd{font-size:.98rem}
  .batiment-decision{padding:13px}
  .batiment-actions-principales{display:grid}
  .batiment-actions-principales .button{width:100%;min-height:44px}
  .batiment-fiche>.facade-detail>summary{align-items:flex-start;padding:10px 14px}
  .batiment-fiche>.facade-detail>summary small{text-align:right;max-width:135px}
  .batiment-fiche>[data-zone-roi],.batiment-fiche>.facade-detail>[data-zone-facades]{padding:12px 14px}
  .batiment-actions-secondaires{padding:8px 14px}
  .batiment-fiche>.espace-edition{margin:0 14px 14px}
  .facade-resume{align-items:flex-start}
  .facade-gestes{flex:none}
  .facade-options>summary{width:44px;height:44px}
  .roi-entete{display:grid;gap:8px}
  .roi-avancement{justify-self:start}
  .roi-verdict{padding:14px}
  .roi-verdict>dl{grid-template-columns:1fr}
  .roi-verdict>dl>div{grid-template-columns:1fr auto;align-items:baseline}
}

/* Les scénarios se comparent comme des options de décision, pas comme des
   lignes comptables. Le tableau redevient une grille lisible au doigt. */
.configs{padding:18px;background:var(--white)}
.configs-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:14px}
.configs-tete>div>span{display:block;margin-bottom:3px;font-size:.65rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3)}
.configs .configs-tete h4{margin:0;font-size:1.1rem;letter-spacing:-.02em;text-transform:none;color:var(--evergreen)}
.configs-tete>p{max-width:480px;margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.configs-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.config-carte{display:grid;gap:12px;min-width:0;padding:14px;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-sm);background:var(--surface-creuse)}
.config-carte--meilleure{border-color:rgba(255,206,59,.75);box-shadow:inset 0 3px 0 var(--pollen)}
.config-carte>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.config-carte h5{margin:0 0 6px;font-size:.98rem;letter-spacing:-.015em}
.config-carte>header .lien-bouton{flex:none;color:var(--encre-3);font-size:.68rem}
.config-carte>dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.config-carte>dl>div{position:relative;display:grid;align-content:start;gap:3px;padding:9px;
  border-radius:var(--r-xs);background:var(--white)}
.config-carte>dl>div:last-child{grid-column:1/-1}
.config-carte dt{font-size:.62rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-3)}
.config-carte dd{margin:0;font-size:1rem;font-weight:800}
.config-carte>dl>div:last-child dd{font-size:.78rem;color:var(--encre-2)}
.config-carte .config-meilleur{width:max-content;margin:2px 0 0;font-size:.58rem}
.config-carte>.config-partiel{margin:0;padding:7px 9px;border-radius:var(--r-xs);
  background:rgba(255,206,59,.14);font-size:.7rem;font-style:normal;color:#715900}
@media(max-width:600px){
  .configs{padding:14px 12px}
  .configs-tete{display:grid;gap:7px}
  .configs-cartes{grid-template-columns:1fr}
}

/* Les absences de données indiquent le prochain geste au lieu de laisser un
   paragraphe perdu dans une grande zone blanche. */
.etat-vide{grid-column:1/-1;display:grid;grid-template-columns:38px minmax(0,1fr);gap:13px;
  align-items:start;padding:18px;border:1px dashed rgba(12,29,21,.2);border-radius:var(--r-md);
  background:rgba(255,253,244,.55)}
.etat-vide-marque{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--evergreen);color:var(--pollen);font-size:1.05rem;font-weight:850}
.etat-vide h3{margin:0 0 4px!important;font-size:1rem!important}
.etat-vide p{margin:0;color:var(--encre-2);font-size:.8rem;line-height:1.5}
.etat-vide .button{margin-top:12px}

.espace-grille[data-liste-simulations]>.espace-carte--en_attente,
.espace-grille[data-liste-simulations]>.espace-carte--en_cours{border-color:rgba(255,206,59,.7);
  outline:0;animation:none;background:linear-gradient(90deg,rgba(255,206,59,.08),var(--white) 48%)}
.espace-grille[data-liste-simulations] .espace-attente-note{max-width:680px;margin:9px 0 0;
  color:var(--encre-2);font-size:.8rem;line-height:1.5}
.espace-grille[data-liste-simulations] .espace-etat[data-etat="en_attente"],
.espace-grille[data-liste-simulations] .espace-etat[data-etat="en_cours"]{display:inline-flex;
  align-items:center;width:max-content;padding:4px 8px;border-radius:var(--r-etat);
  background:rgba(255,206,59,.2);color:#715900;font-size:.68rem;font-weight:850}
@media(max-width:600px){
  .etat-vide{grid-template-columns:32px minmax(0,1fr);padding:14px}
  .etat-vide-marque{width:32px;height:32px}
  .etat-vide .button{width:100%}
}

.section-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 13px}
.section-intro>div>span{display:block;margin-bottom:3px;font-size:.65rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3)}
.app-scene .section-intro h2{margin:0;font-size:1.35rem;letter-spacing:-.025em}
.section-intro>p{max-width:510px;margin:0;color:var(--encre-2);font-size:.76rem;line-height:1.45}
@media(max-width:700px){
  .section-intro{display:grid;gap:5px}
  .app-scene .section-intro h2{font-size:1.2rem}
}

/* Passage adresse → projet : confirmer la création, expliquer le geste
   suivant, puis disparaître. */
.projet-arrivee{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;
  margin:-4px 0 16px;padding:16px 48px 16px 18px;border-radius:var(--r-md);
  border:1px solid rgba(15,156,135,.35);background:rgba(15,156,135,.09)}
.projet-arrivee[hidden]{display:none}
.projet-arrivee span{display:block;margin-bottom:3px;color:#0b6b5c;font-size:.65rem;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase}
.projet-arrivee h3{margin:0 0 4px;font-size:1.05rem;letter-spacing:-.02em}
.projet-arrivee p{margin:0;max-width:760px;color:var(--encre-2);font-size:.78rem;line-height:1.5}
.projet-arrivee-fermer{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;background:transparent;color:var(--encre-2);font:700 1.2rem/1 var(--font-body);cursor:pointer}
.projet-arrivee-fermer:hover{background:rgba(12,29,21,.08);color:var(--evergreen)}
@media(max-width:600px){
  .projet-arrivee{padding:14px 42px 14px 14px}
  .projet-arrivee h3{font-size:.98rem}
  .projet-arrivee-fermer{right:4px;top:4px;width:44px;height:44px}
}

/* --- Tableau de bord : décisions d'abord, agrégats ensuite --------------- */
.tableau-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 15px}
.tableau-intro>div>span,.tableau-bloc-tete span{display:block;margin-bottom:3px;font-size:.65rem;
  font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3)}
.tableau-intro h2{margin:0;font-size:1.45rem;letter-spacing:-.03em}
.tableau-intro .button{flex:none}
.tableau-bloc-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:8px}
.tableau-bloc .tableau-bloc-tete h2{margin:0;font-size:1.05rem;letter-spacing:-.02em;text-transform:none;color:var(--evergreen)}
.tableau-bloc-tete>strong{display:grid;place-items:center;min-width:30px;height:30px;border-radius:50%;
  background:var(--pollen);font-size:.78rem}
.tableau-afaire{border-color:rgba(255,206,59,.55);box-shadow:inset 0 3px 0 var(--pollen)}
.tableau-afaire>.afaire:first-of-type{margin-top:2px}
.afaire{grid-template-columns:minmax(0,1fr) auto;padding-top:13px;padding-bottom:13px}
.afaire-etape{padding:5px 8px;border-radius:var(--r-etat);background:var(--surface-creuse)}

/* --- Répertoire : une carte = état, décision, impact --------------------- */
.repertoire{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:11px;
  border:0;border-radius:0;overflow:visible;background:transparent}
.repertoire li{min-width:0}
.repertoire li+li{border-top:0}
.repertoire-ligne{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"tete tete" "avancee avancee" "decision impact";gap:12px 16px;
  align-items:end;padding:16px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);
  background:var(--white)}
.repertoire-ligne:hover,.repertoire-ligne:focus-visible{border-color:rgba(12,29,21,.35);
  background:var(--white);transform:translateY(-1px);box-shadow:0 8px 24px rgba(12,29,21,.07)}
.rep-tete{grid-area:tete;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0}
.rep-nom{font-size:1rem}
.rep-nom small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-etape{display:inline-flex;align-items:center;gap:6px;flex:none;padding:4px 8px;border-radius:var(--r-etat);
  background:rgba(255,206,59,.17);font-size:.68rem;white-space:nowrap}
.rep-etape b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--evergreen);
  color:var(--pollen);font-size:.62rem}
.rep-avancee{grid-area:avancee;display:grid;grid-template-columns:auto minmax(80px,1fr);align-items:center;gap:9px}
.rep-avancee>span:first-child{font-size:.62rem;font-weight:750;color:var(--encre-3)}
.rep-jauge{width:100%;height:5px}
.rep-decision{grid-area:decision;position:relative;display:grid;gap:2px;min-width:0;padding-right:24px}
.rep-decision small{font-size:.61rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.rep-decision strong{font-size:.84rem;line-height:1.3}
.rep-decision i{position:absolute;right:0;bottom:1px;font-style:normal;font-weight:850;color:var(--evergreen)}
.rep-decision--attente strong{color:var(--encre-2);font-weight:650}
.rep-impact{grid-area:impact;display:grid;justify-items:end;gap:2px;white-space:nowrap}
.rep-impact b{font-size:.78rem}
.rep-impact .rep-co2{color:#0b6b5c}
.rep-impact--vide{color:var(--encre-3);font-size:.68rem}

@media(max-width:860px){
  .tableau-intro{align-items:center}
  .tableau-intro h2{font-size:1.25rem}
  .tableau-intro .button{min-height:44px;padding:10px 12px;font-size:.76rem}
  .repertoire{grid-template-columns:1fr}
  .repertoire-ligne{grid-template-columns:1fr auto;grid-template-areas:"tete tete" "avancee avancee" "decision impact";gap:10px 12px}
  .rep-impact{text-align:right}
}
@media(max-width:520px){
  .tableau-intro{align-items:stretch;display:grid}
  .tableau-intro .button{width:100%}
  .repertoire-controles{gap:7px}
  .repertoire-ligne{grid-template-columns:1fr;grid-template-areas:"tete" "avancee" "decision" "impact";align-items:start;padding:14px}
  .rep-tete{display:grid;gap:8px}
  .rep-etape{justify-self:start}
  .rep-impact{display:flex;justify-items:start;gap:10px;text-align:left}
}

.app-scene .espace-message{min-height:0;margin:0 0 14px;padding:10px 13px;border-radius:var(--r-sm);
  border:1px solid rgba(15,156,135,.28);background:rgba(15,156,135,.09);color:#0b6b5c;
  font-size:.8rem;font-weight:700}
.app-scene .espace-message[hidden]{display:none}
.app-scene .espace-message.error{border-color:rgba(165,47,32,.3);background:rgba(165,47,32,.08);
  color:var(--tangerine-ink)}

/* Dans un projet, son nom remplace le grand « Bonjour » : un seul titre de
   page, puis immédiatement le parcours et l'action. */
.app[data-route="projet"] .app-tete{display:none}
.app[data-route="projets"] .app-tete{display:none}
.app[data-route="compte"] .app-tete{display:none}
.app[data-route="admin"] .app-tete{display:none}
.app[data-route="business"] .app-tete{display:none}
.app:not([data-route="admin"]) [data-espace-admin]{display:none}
.app:not([data-route="business"]) [data-espace-business]{display:none}
.app[data-route="projet"] .projet-entete{margin-top:0}
.app[data-route="projet"] .projet-entete .etape-tete{display:none}
.app[data-route="projet"] .projet-entete h1{font-size:clamp(1.65rem,3vw,2.2rem);font-weight:750;letter-spacing:-.035em}
.app[data-route="projets"] .section-tete h1{font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.035em}

.simulation-badge{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:var(--r-etat);
  background:rgba(15,156,135,.13);color:#0b6b5c;font-size:.6rem;font-weight:850;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.espace-grille[data-liste-simulations]>.espace-carte--termine:not(.simulation-vedette){padding-top:14px;padding-bottom:14px}
.simulation-ancienne{margin-top:8px;border-top:1px solid rgba(12,29,21,.1)}
.simulation-ancienne>summary{display:flex;align-items:center;min-height:44px;padding:8px 2px;
  color:var(--evergreen);font-size:.76rem;font-weight:850;cursor:pointer}
.simulation-ancienne[open]>summary{margin-bottom:10px}
.simulation-ancienne .resultat-verdict{background:#18352a}

/* --- Compte : identité, sécurité et données ------------------------------ */
.compte-espace-tete{max-width:720px;margin:0 0 22px}
.compte-espace-tete>span{display:block;margin-bottom:5px;color:var(--encre-3);font-size:.65rem;
  font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.compte-espace-tete h1{margin:0;font-size:clamp(1.75rem,3.5vw,2.45rem);letter-spacing:-.04em}
.compte-espace-tete p{margin:8px 0 0;color:var(--encre-2);font-size:.86rem;line-height:1.55}
.compte-resume{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;
  margin-bottom:12px;padding:18px;border:1px solid rgba(12,29,21,.14);border-radius:var(--r-md);
  background:var(--evergreen);color:var(--eggshell)}
.compte-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--pollen);color:var(--evergreen);font-size:.9rem;font-weight:900;letter-spacing:.03em}
.compte-resume-etat{display:block;margin-bottom:3px;color:var(--teal);font-size:.61rem;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase}
.compte-resume h2{margin:0;font-size:1.08rem;letter-spacing:-.02em}
.compte-resume p{margin:3px 0 0;color:rgba(245,242,225,.68);font-size:.76rem}
.compte-resume-actions{display:grid;justify-items:end;gap:7px}
.compte-verifie{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:var(--r-etat);
  background:rgba(15,156,135,.18);color:#bce9df;font-size:.65rem;font-weight:850;white-space:nowrap}
.compte-verifie::before{content:"✓";margin-right:5px;font-weight:900}
.compte-pilotage{color:var(--pollen);font-size:.7rem;font-weight:850;text-underline-offset:3px}
.compte-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.compte-panneau{display:grid;align-content:start;gap:15px;min-width:0;padding:18px;
  border:1px solid rgba(12,29,21,.14);border-radius:var(--r-md);background:var(--white)}
.compte-panneau--donnees{grid-column:1/-1}
.compte-panneau>header>span{display:block;margin-bottom:3px;color:var(--encre-3);font-size:.61rem;
  font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.compte-panneau>header h2{margin:0;font-size:1.08rem;letter-spacing:-.02em}
.compte-infos{display:grid;margin:0}
.compte-infos>div{display:grid;grid-template-columns:minmax(110px,.7fr) minmax(0,1.3fr);gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(12,29,21,.08)}
.compte-infos>div:last-child{border-bottom:0}
.compte-infos dt{color:var(--encre-3);font-size:.7rem;font-weight:750}
.compte-infos dd{min-width:0;margin:0;overflow-wrap:anywhere;font-size:.78rem;font-weight:750;text-align:right}
.compte-panneau>.button{justify-self:start;min-height:44px}
.compte-panneau-note,.compte-panneau-intro{margin:0;color:var(--encre-2);font-size:.74rem;line-height:1.5}
.compte-action-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 0;border-bottom:1px solid rgba(12,29,21,.08)}
.compte-action-ligne strong{font-size:.82rem}
.compte-action-ligne p{margin:3px 0 0;color:var(--encre-2);font-size:.72rem;line-height:1.45}
.compte-action-ligne .button{min-height:44px;padding:9px 12px}
.compte-recommandation{display:grid;gap:4px;padding:12px;border-radius:var(--r-xs);background:rgba(255,206,59,.12)}
.compte-recommandation>span{color:#715900;font-size:.59rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.compte-recommandation>strong{font-size:.79rem}
.compte-recommandation>p{margin:0;color:var(--encre-2);font-size:.7rem;line-height:1.45}
.compte-donnees-actions{display:flex;flex-wrap:wrap;gap:8px}
.compte-donnees-actions .button{min-height:44px}
.compte-danger{border-color:rgba(165,47,32,.28)!important;color:var(--tangerine-ink)!important}
.compte-danger:hover{background:rgba(165,47,32,.08)!important}

@media(max-width:760px){
  .compte-resume{grid-template-columns:auto minmax(0,1fr)}
  .compte-resume-actions{grid-column:2;justify-items:start}
  .compte-verifie{white-space:normal}
  .compte-grille{grid-template-columns:1fr}
  .compte-panneau--donnees{grid-column:auto}
}

/* --- Développement commercial : territoire -> bâtiments -> CRM ---------- */
.business-espace{display:grid;gap:16px}
.business-tete{max-width:800px}
.business-tete>span{display:block;margin-bottom:4px;color:var(--encre-3);font-size:.63rem;
  font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.business-tete h1{margin:0;font-size:clamp(1.8rem,3.8vw,2.55rem);letter-spacing:-.045em}
.business-tete p{margin:8px 0 0;color:var(--encre-2);font-size:.84rem;line-height:1.55}
.business-onglets{display:flex;gap:4px;padding:4px;border-radius:var(--r-sm);background:rgba(12,29,21,.07)}
.business-onglets a{flex:1;display:grid;min-height:44px;place-items:center;padding:8px 12px;border-radius:var(--r-xs);
  color:var(--encre-2);font-size:.78rem;font-weight:800;text-align:center;text-decoration:none}
.business-onglets a[aria-current="page"]{background:var(--white);color:var(--evergreen);box-shadow:0 1px 5px rgba(12,29,21,.1)}
.business-recherche{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr) auto;gap:10px;
  align-items:end;padding:18px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);background:var(--white)}
.business-recherche--marche{display:block}
.business-recherche-principale{display:grid;grid-template-columns:minmax(180px,.65fr) minmax(260px,1.35fr) auto;gap:10px;align-items:end}
.business-recherche label{display:grid;gap:5px;color:var(--encre-3);font-size:.63rem;font-weight:850;
  letter-spacing:.04em;text-transform:uppercase}
.business-recherche input,.business-recherche select,.crm-controles input,.crm-controles select,
.crm-invitation input,.crm-prospect select,.crm-prospect input{width:100%;min-width:0;min-height:44px;padding:9px 11px;
  border:1.5px solid rgba(12,29,21,.18);border-radius:var(--r-xs);background:var(--white);color:var(--evergreen);
  font:inherit;font-size:16px}
.business-hypotheses{margin-top:14px;padding-top:12px;border-top:1px solid rgba(12,29,21,.1)}
.business-hypotheses summary{width:max-content;max-width:100%;cursor:pointer;color:var(--evergreen);font-size:.72rem;font-weight:850}
.business-hypotheses-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.business-hypotheses>p{margin:9px 0 0;color:var(--encre-3);font-size:.66rem;line-height:1.45}
.business-principe{margin:0;padding:10px 13px;border-left:3px solid var(--pollen);background:rgba(255,206,59,.1);
  color:var(--encre-2);font-size:.75rem;line-height:1.5}
.business-vide{display:grid;gap:5px;padding:24px;border:1px dashed rgba(12,29,21,.2);border-radius:var(--r-md);
  color:var(--encre-2);text-align:center}
.business-vide strong{color:var(--evergreen);font-size:.92rem}
.business-vide span{font-size:.76rem;line-height:1.45}
.marche-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:3px 0 10px}
.marche-entete h2{margin:0;font-size:1.25rem;letter-spacing:-.025em}
.marche-entete p{margin:4px 0 0;color:var(--encre-2);font-size:.75rem}
.preuve-niveau{flex:none;padding:5px 8px;border-radius:var(--r-etat);background:var(--surface-creuse);color:var(--encre-2);
  font-size:.61rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.marche-dimensionnement{margin-bottom:12px;padding:18px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);
  background:linear-gradient(145deg,#fff 0%,rgba(238,244,237,.62) 100%)}
.marche-section-tete{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
.marche-section-tete span{display:block;color:var(--encre-3);font-size:.59rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.marche-section-tete h3{margin:3px 0 0;font-size:1.2rem;letter-spacing:-.035em}
.marche-section-tete p{max-width:360px;margin:0;color:var(--encre-2);font-size:.7rem;line-height:1.45;text-align:right}
.marche-entonoir{display:grid;grid-template-columns:1.12fr 1fr .88fr;gap:9px;align-items:stretch}
.marche-niveau{position:relative;display:grid;align-content:start;gap:5px;min-width:0;padding:15px;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-sm);background:var(--white);overflow:hidden}
.marche-niveau::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:rgba(12,29,21,.18)}
.marche-niveau--sam::before{background:#0f9c87}.marche-niveau--som::before{background:var(--pollen)}
.marche-niveau header{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.marche-niveau header>span{color:var(--evergreen);font-size:.73rem;font-weight:950;letter-spacing:.08em}
.marche-niveau header>small{overflow:hidden;color:var(--encre-3);font-size:.57rem;font-weight:800;text-align:right;text-overflow:ellipsis;white-space:nowrap}
.marche-niveau>strong{margin-top:4px;font-size:clamp(1.2rem,2.3vw,1.65rem);letter-spacing:-.045em}
.marche-niveau>p{margin:0;color:var(--encre-2);font-size:.72rem}
.marche-niveau>div span{display:inline-flex;padding:3px 6px;border-radius:var(--r-etat);background:var(--surface-creuse);
  color:var(--encre-2);font-size:.57rem;font-weight:800}
.marche-niveau>small{margin-top:5px;color:var(--encre-2);font-size:.63rem;line-height:1.4}
.marche-methode{margin-top:12px;padding-top:11px;border-top:1px solid rgba(12,29,21,.1)}
.marche-methode summary{cursor:pointer;color:var(--evergreen);font-size:.68rem;font-weight:850}
.marche-methode>p{margin:9px 0 0;color:var(--encre-2);font-size:.68rem;line-height:1.5}
.marche-methode dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 16px;margin:10px 0 0}
.marche-methode dl>div{display:grid;grid-template-columns:minmax(100px,.65fr) minmax(0,1fr);gap:8px;padding-bottom:6px;border-bottom:1px solid rgba(12,29,21,.08)}
.marche-methode dt{color:var(--encre-3);font-size:.62rem;font-weight:800}.marche-methode dd{margin:0;font-size:.65rem;text-align:right;overflow-wrap:anywhere}
.marche-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:12px}
.marche-kpis--preuve{grid-template-columns:repeat(3,minmax(0,1fr))}
.marche-kpis>article{display:grid;gap:4px;padding:15px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.marche-kpis span{color:var(--encre-3);font-size:.59rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.marche-kpis strong{font-size:clamp(1.15rem,2.4vw,1.65rem);letter-spacing:-.04em}
.marche-kpis small{color:var(--encre-2);font-size:.65rem;line-height:1.35}
.marche-sources{margin:0 0 12px;color:var(--encre-2);font-size:.68rem;line-height:1.5}
.marche-liste{display:grid;gap:8px}
.marche-liste>h2{margin:8px 0 2px;font-size:1rem}
.marche-batiment{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(90px,.55fr)) auto;gap:10px;
  align-items:center;padding:13px 14px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.marche-batiment h3{margin:0 0 3px;font-size:.86rem}
.marche-batiment p{margin:0;color:var(--encre-2);font-size:.67rem;line-height:1.35}
.marche-batiment dl{display:contents}
.marche-batiment dl>div{display:grid;gap:2px}
.marche-batiment dt{color:var(--encre-3);font-size:.56rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.marche-batiment dd{margin:0;font-size:.78rem;font-weight:800}
.marche-batiment .button{white-space:nowrap}
.crm-barre{display:grid;gap:12px}
.crm-resume{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.crm-resume article{display:grid;gap:3px;padding:13px 14px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.crm-resume span{color:var(--encre-3);font-size:.58rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.crm-resume strong{font-size:1.4rem;letter-spacing:-.035em}
.crm-resume small{color:var(--encre-2);font-size:.61rem;line-height:1.35}.crm-resume .crm-kpi--alerte{border-color:rgba(177,64,47,.35);background:rgba(177,64,47,.045)}
.crm-invitation{display:grid;grid-template-columns:minmax(220px,1fr) minmax(140px,.7fr) minmax(190px,.9fr) auto;gap:8px;
  align-items:center;padding:13px 14px;border:1px solid rgba(15,156,135,.25);border-radius:var(--r-sm);background:rgba(15,156,135,.06)}
.crm-invitation>div{display:grid;gap:2px}.crm-invitation strong{font-size:.78rem}.crm-invitation span{color:var(--encre-2);font-size:.65rem;line-height:1.35}
.crm-controles{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,.35fr);gap:8px;margin:14px 0 10px}
.crm-liste{display:grid;gap:9px}
.crm-prospect{display:grid;grid-template-columns:minmax(210px,1.15fr) minmax(125px,.5fr) minmax(170px,.75fr) minmax(128px,.48fr) auto;gap:10px;
  align-items:center;padding:14px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-sm);background:var(--white)}
.crm-prospect h3{margin:0 0 3px;font-size:.88rem}.crm-prospect p{margin:0;color:var(--encre-2);font-size:.67rem;line-height:1.4}
.crm-prospect>div>small{display:block;margin-top:5px;color:var(--encre-3);font-size:.61rem;font-weight:750}
.crm-prospect--retard{border-color:rgba(177,64,47,.34);box-shadow:inset 3px 0 0 #b1402f}
.crm-prospect label{display:grid;gap:3px;color:var(--encre-3);font-size:.58rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}

@media(max-width:980px){
  .marche-kpis,.crm-resume{grid-template-columns:1fr 1fr}
  .marche-kpis--preuve{grid-template-columns:repeat(3,minmax(0,1fr))}
  .marche-batiment{grid-template-columns:minmax(200px,1fr) repeat(3,minmax(82px,.45fr))}
  .marche-batiment>.button{grid-column:1/-1;justify-self:start}
  .crm-invitation{grid-template-columns:1fr 1fr}.crm-invitation>div{grid-column:1/-1}.crm-invitation .button{align-self:stretch}
  .crm-prospect{grid-template-columns:1fr 1fr}.crm-prospect>div:first-child{grid-column:1/-1}.crm-prospect>.button{align-self:end}
}
@media(max-width:700px){
  .business-recherche,.business-recherche-principale,.business-hypotheses-grille{grid-template-columns:1fr}.business-recherche .button{width:100%}
  .marche-entete{display:grid}.preuve-niveau{justify-self:start}
  .marche-section-tete{display:grid}.marche-section-tete p{text-align:left}.marche-entonoir{grid-template-columns:1fr}
  .marche-methode dl{grid-template-columns:1fr}.marche-kpis--preuve{grid-template-columns:1fr}
  .marche-batiment{grid-template-columns:1fr 1fr}.marche-batiment>div:first-child{grid-column:1/-1}
  .marche-batiment dl{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:8px}
  .crm-controles,.crm-invitation,.crm-prospect{grid-template-columns:1fr}
  .crm-invitation>div,.crm-prospect>div:first-child{grid-column:auto}
}
@media(max-width:430px){.marche-kpis,.crm-resume{grid-template-columns:1fr}.marche-batiment{grid-template-columns:1fr}.marche-batiment dl{grid-template-columns:1fr}}

/* --- Pilotage administrateur --------------------------------------------- */
.admin-espace{display:grid;gap:16px}
.admin-espace-tete{max-width:760px;margin-bottom:4px}
.admin-espace-tete>span,.admin-zone-tete span{display:block;margin-bottom:4px;color:var(--encre-3);
  font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.admin-espace-tete h1{margin:0;font-size:clamp(1.8rem,3.8vw,2.55rem);letter-spacing:-.045em}
.admin-espace-tete p{margin:8px 0 0;color:var(--encre-2);font-size:.84rem;line-height:1.55}
.admin-cockpit{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr);overflow:hidden;border-radius:var(--r-md);
  background:var(--evergreen);color:var(--white);box-shadow:0 12px 30px rgba(12,29,21,.12)}
.admin-cap{padding:22px}.admin-cap>span{display:block;color:rgba(255,255,255,.62);font-size:.6rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.admin-cap h2{max-width:540px;margin:5px 0 7px;color:var(--white);font-size:clamp(1.25rem,2.5vw,1.72rem);letter-spacing:-.035em}
.admin-cap p{max-width:610px;margin:0;color:rgba(255,255,255,.72);font-size:.75rem;line-height:1.5}
.admin-cap-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.admin-cap-actions .button--ghost{border-color:rgba(255,255,255,.28);background:transparent;color:var(--white)}
.admin-priorites{display:grid;align-content:start;gap:7px;padding:20px;background:rgba(255,255,255,.075)}
.admin-priorites>strong{margin-bottom:3px;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.admin-priorite{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;min-height:44px;padding:8px 9px;
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-xs);background:rgba(255,255,255,.07);color:var(--white);
  font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.admin-priorite>b{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;background:var(--pollen);color:var(--evergreen);font-size:.69rem}
.admin-priorite span{min-width:0;font-size:.69rem;line-height:1.3}.admin-priorite i{font-style:normal;color:rgba(255,255,255,.6)}
.admin-priorite--ok{grid-template-columns:auto minmax(0,1fr)}.admin-priorite--ok>b{background:rgba(255,255,255,.14);color:var(--white)}
.admin-resume{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.admin-resume>article{display:grid;gap:3px;padding:15px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-sm);background:var(--white)}
.admin-resume>article>span{color:var(--encre-3);font-size:.61rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.admin-resume>article>strong{font-size:1.65rem;letter-spacing:-.04em}
.admin-resume>article>small{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--encre-2);font-size:.67rem;white-space:nowrap}
.admin-outils{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:2px}
.admin-zone{padding:18px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);background:var(--white)}
.admin-zone--tickets{border-color:rgba(255,206,59,.65);box-shadow:inset 0 3px 0 var(--pollen)}
.admin-zone-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.admin-zone-tete h2{margin:0;font-size:1.12rem;letter-spacing:-.02em}
.admin-zone .admin-pipeline,.admin-zone>.espace-grille{margin:0}
.admin-pipeline>.espace-carte{padding:15px;border-radius:var(--r-sm);background:var(--surface-creuse)}
.admin-projet-carte{display:grid;align-content:start;gap:11px}
.admin-projet-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.admin-projet-tete span{display:block;margin-bottom:3px;color:var(--encre-3);font-size:.58rem;
  font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.admin-projet-tete h3{margin:0;font-size:.94rem;letter-spacing:-.015em}
.admin-projet-tete>strong{flex:none;padding:4px 7px;border-radius:var(--r-etat);background:rgba(255,206,59,.18);
  color:#715900;font-size:.59rem;text-transform:uppercase}
.admin-projet-meta{margin:0;color:var(--encre-2);font-size:.68rem;overflow-wrap:anywhere}
.admin-projet-carte .admin-projet-outils{padding:11px;border:1px solid rgba(12,29,21,.1);
  border-radius:var(--r-xs);background:var(--white)}
.admin-outil-label{display:block;margin-bottom:2px;color:var(--encre-3);font-size:.59rem;
  font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.admin-vide{grid-column:1/-1;margin:0;padding:16px;border:1px dashed rgba(12,29,21,.18);
  border-radius:var(--r-sm);color:var(--encre-2);font-size:.78rem;text-align:center}
.admin-compte-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.admin-compte-tete h3{margin:0 0 3px;font-size:.9rem}
.admin-compte-tete p{margin:0;color:var(--encre-2);font-size:.68rem;overflow-wrap:anywhere}
.admin-compte-etat{flex:none;padding:4px 7px;border-radius:var(--r-etat);background:rgba(255,206,59,.18);
  color:#715900;font-size:.59rem;font-weight:850;text-transform:uppercase}
.admin-compte-etat--ok{background:rgba(15,156,135,.11);color:#0b6b5c}
.admin-zone .admin-tickets{margin:0}

@media(max-width:760px){
  .admin-cockpit{grid-template-columns:1fr}.admin-priorites{padding:15px 18px 18px}
  .admin-resume{grid-template-columns:1fr}
  .admin-resume>article{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .admin-resume>article>strong{grid-row:1/3;grid-column:2}
  .admin-resume>article>small{white-space:normal}
  .admin-zone{padding:14px 12px}
}
@media(max-width:520px){
  .app[data-business="true"] .app-nav a{font-size:0;white-space:nowrap}
  .app[data-business="true"] .app-nav a::after{content:attr(data-short);font-size:.58rem;line-height:1.1}
  .app[data-business="true"] .app-aide span{display:none}
  .app[data-business="true"] .app-aide::after{content:attr(data-short);font-size:.58rem;line-height:1.1}
  .compte-espace-tete{margin-bottom:16px}
  .compte-resume{padding:14px 12px}
  .compte-avatar{width:42px;height:42px}
  .compte-panneau{padding:15px 12px}
  .compte-infos>div{grid-template-columns:1fr;gap:3px}
  .compte-infos dd{text-align:left}
  .compte-action-ligne{grid-template-columns:1fr}
  .compte-action-ligne .button,.compte-panneau>.button,.compte-donnees-actions .button{width:100%}
  .compte-donnees-actions{display:grid;grid-template-columns:1fr}
}

/* --- Étapes avancées : statut, preuve, décision ------------------------- */
/* Le journal d'étude devient un vrai état d'avancement. La progression se
   lit avant le détail des contrôles, puis les corrections servent de preuve. */
.verif{padding:18px;background:var(--white)}
.verif-entete,.suivi-entete,.proposition-entete{display:flex;align-items:flex-start;
  justify-content:space-between;gap:18px}
.suivi-sur-titre{margin:0 0 3px!important;color:var(--encre-3)!important;font-size:.63rem!important;
  font-weight:900!important;letter-spacing:.1em;text-transform:uppercase}
.verif .verif-entete h4,.suivi-carte .suivi-entete h4,.proposition .proposition-entete h4{
  display:block;margin:0;color:var(--evergreen);font-size:1.08rem;line-height:1.25;
  letter-spacing:-.02em;text-transform:none}
.verif-avance,.suivi-statut,.proposition-statut{display:inline-flex;align-items:center;
  min-height:28px;padding:5px 9px;border-radius:var(--r-etat);background:var(--surface-creuse);
  color:var(--encre-2);font-size:.66rem;font-weight:850;line-height:1.2;white-space:nowrap}
.verif-progression{height:6px;margin:14px 0 12px;overflow:hidden;border-radius:var(--r-etat);
  background:rgba(12,29,21,.09)}
.verif-progression>span{display:block;height:100%;border-radius:inherit;background:#0f9c87;
  transition:width .35s ease}
.verif-preuve,.verif-attente{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;
  align-items:baseline;margin:0 0 12px;padding:10px 12px;border-radius:var(--r-xs);
  background:rgba(15,156,135,.09);color:#0b6b5c;font-size:.76rem;line-height:1.4}
.verif-attente{background:rgba(255,206,59,.14);color:#715900}
.verif-preuve span,.verif-attente span{color:var(--encre-2)}
.verif-pied{padding-top:10px;border-top:1px solid rgba(12,29,21,.08)}

/* La proposition met l'accord à donner au-dessus du contrat, puis présente
   investissement et résultats avec trois poids visuels comparables. */
.projet-action .proposition{width:min(100%,760px);padding:20px;border:1px solid rgba(255,206,59,.85);
  border-radius:var(--r-md);background:linear-gradient(180deg,rgba(255,206,59,.08),var(--white) 34%);
  box-shadow:inset 0 3px 0 var(--pollen)}
.proposition-statut{background:var(--pollen);color:var(--evergreen)}
.proposition-investissement{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  padding:16px 0 13px;border-bottom:1px solid rgba(12,29,21,.1)}
.proposition-investissement>span{color:var(--encre-2);font-size:.74rem;font-weight:700}
.proposition-investissement>strong{font-size:clamp(1.65rem,4vw,2.25rem);line-height:1;
  letter-spacing:-.045em;white-space:nowrap}
.proposition-perimetre{display:grid;gap:3px;margin:0;padding:3px 0;color:var(--evergreen)}
.proposition-perimetre>span{color:var(--encre-3);font-size:.62rem;font-weight:850;
  letter-spacing:.07em;text-transform:uppercase}
.proposition-perimetre>strong{font-size:.82rem;line-height:1.45}
.proposition-valeur{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.proposition-valeur>p{display:grid;align-content:start;gap:5px;min-width:0;margin:0;padding:12px;
  border-radius:var(--r-xs);background:var(--surface-creuse)}
.proposition-valeur span{color:var(--encre-3);font-size:.62rem;font-weight:850;
  letter-spacing:.05em;text-transform:uppercase}
.proposition-valeur strong{font-size:1rem;line-height:1.2}
.proposition-partiel{padding:9px 11px;border-radius:var(--r-xs);background:rgba(255,206,59,.14);
  color:#715900;font-style:normal}
.proposition-conditions{display:block;margin:0;border-top:1px solid rgba(12,29,21,.09);
  color:var(--encre-2);font-size:.78rem;line-height:1.5;white-space:normal}
.proposition-conditions>summary{display:flex;align-items:center;min-height:44px;padding:8px 0;
  color:var(--evergreen);font-weight:800;cursor:pointer}
.proposition-conditions>p{margin:0 0 10px;white-space:pre-line}
.proposition-boutons{align-items:center;flex-wrap:wrap;margin-top:2px}
.proposition-boutons .button{min-height:44px}
.proposition-note{padding-top:9px;border-top:1px solid rgba(12,29,21,.08);line-height:1.45}
.attente-kelveen{width:min(100%,620px);margin:0;padding:12px 14px;border-left:3px solid var(--pollen);
  border-radius:0 var(--r-xs) var(--r-xs) 0;background:rgba(255,206,59,.1);
  color:var(--encre-2);font-size:.82rem;line-height:1.5}
.decision-confirmee{display:grid;gap:4px;width:min(100%,620px);padding:14px 16px;
  border:1px solid rgba(15,156,135,.3);border-radius:var(--r-sm);background:rgba(15,156,135,.08)}
.decision-confirmee>span{color:#0b6b5c;font-size:.61rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.decision-confirmee>strong{font-size:.9rem}
.decision-confirmee>p{margin:2px 0 0;color:var(--encre-2);font-size:.77rem;line-height:1.45}

/* Chantier, garantie et mesure utilisent la même grammaire : un propriétaire,
   un état, une preuve et seulement ensuite les opérations secondaires. */
.suivi-carte{gap:13px;padding:18px;border-radius:var(--r-md);background:var(--white)}
.suivi-carte--chantier{border-left:3px solid var(--pollen)}
.suivi-statut--chantier{background:rgba(255,206,59,.18);color:#715900}
.suivi-statut--actif{background:rgba(15,156,135,.12);color:#0b6b5c}
.suivi-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(32px,.3fr) minmax(0,1fr);
  align-items:center;gap:10px;padding:12px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.suivi-dates p,.garantie-infos p{display:grid;gap:3px;margin:0}
.suivi-dates p:last-child{text-align:right}
.suivi-dates span,.garantie-infos span,.suivi-couverture>span{color:var(--encre-3);
  font-size:.61rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.suivi-dates strong,.garantie-infos strong{font-size:.84rem}
.suivi-dates-trait{height:1px;background:rgba(12,29,21,.2)}
.suivi-note{color:var(--encre-2);font-size:.78rem!important}
.suivi-preuve{padding:9px 11px;border-radius:var(--r-xs);background:rgba(15,156,135,.09);
  color:#0b6b5c;font-size:.78rem!important}
.suivi-carte--garantie{border:1px solid rgba(15,156,135,.32);background:var(--white)}
.garantie-infos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.garantie-infos>p{padding:11px;border-radius:var(--r-xs);background:rgba(15,156,135,.07)}
.suivi-couverture{display:grid;gap:5px;padding:12px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.suivi-couverture p{color:var(--encre-2);font-size:.8rem;line-height:1.5}
.suivi-carte--mesures{border-color:rgba(12,29,21,.14)}
.mesures-saisie{border-top:1px solid rgba(12,29,21,.09)}
.mesures-saisie>summary{display:flex;align-items:center;min-height:44px;padding:9px 0;
  color:var(--evergreen);font-size:.78rem;font-weight:850;cursor:pointer}
.mesures-saisie[open]>summary{margin-bottom:10px}
.mesures-form{padding:14px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.mesures-grille input{min-height:44px;background:var(--white)}

@media(max-width:640px){
  .verif,.suivi-carte,.projet-action .proposition{padding:14px 12px}
  .verif-entete,.suivi-entete,.proposition-entete{display:grid;gap:8px}
  .verif-avance,.suivi-statut,.proposition-statut{justify-self:start;white-space:normal}
  .verif-preuve,.verif-attente{grid-template-columns:1fr;gap:2px}
  .proposition-investissement{display:grid;gap:6px}
  .proposition-valeur{grid-template-columns:1fr}
  .proposition-valeur>p{grid-template-columns:minmax(0,1fr) auto;align-items:baseline}
  .proposition-boutons{display:grid;grid-template-columns:1fr}
  .proposition-boutons .button{width:100%}
  .suivi-dates{grid-template-columns:1fr;gap:8px}
  .suivi-dates p:last-child{text-align:left}
  .suivi-dates-trait{width:1px;height:18px;margin-left:3px}
  .garantie-infos{grid-template-columns:1fr}
  .mesures-grille{grid-template-columns:1fr}
  .mesures-form .button{width:100%}
}

/* --- Le classement des facades : ce que le calcul ne sait pas ------------- */
/* Le moteur ne connait pas l'immeuble d'en face. Quand l'atelier a detecte un
   masque, le resultat est OPTIMISTE -- et le taire serait pire que de ne pas
   l'avoir detecte. */
.roi-alerte{margin:10px 0 0;padding:9px 11px;border-radius:var(--r-sm);
  background:rgba(255,206,59,.18);color:var(--evergreen);font-size:.8rem;line-height:1.5}
/* Les deux monnaies ne classent pas pareil, et le volet unitaire ne classe pas
   comme le total. Ces nuances ne sont pas des notes de bas de page : ce sont
   les arbitrages eux-memes. */
.roi-nuance{margin:7px 0 0;color:var(--encre-2);font-size:.8rem;line-height:1.5}
.roi-nuance::before{content:"·";margin-right:7px;color:var(--encre-3);font-weight:800}
.env-voisin{display:block;margin-top:2px;color:var(--encre-3);font-size:.68rem}
.roi-table .env-badge{white-space:nowrap}

/* --- Les facades non retenues -------------------------------------------- */
/* Elles ne concourent pas, mais on les montre : les cacher laisserait croire
   a un oubli, et qui compte ses facades ne s'y retrouverait plus. */
.roi-ecartees{margin-top:16px;padding:13px 15px;border:1px dashed var(--trait-fort);
  border-radius:var(--r-sm);background:var(--surface-creuse)}
.roi-ecartees h5{margin:0 0 9px;font-size:var(--t-micro);font-weight:850;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-2)}
.roi-ecartees ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.roi-ecartees li{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.86rem}
.roi-ecartees li span{color:var(--encre-3);font-size:.78rem}
.roi-ecartees p{margin:10px 0 0;color:var(--encre-2);font-size:.78rem;line-height:1.55}