/* 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}

/* 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 > [data-croquis-scene]{display:block !important}
.croquis.croquis--plein > .croquis-outils{display:flex !important}
.croquis.croquis--plein > .croquis-etat{color:var(--eggshell);margin:0}
/* Le carre prend le plus grand cote qui tient : la hauteur disponible sur un
   ecran large, la largeur sur un ecran etroit. */
.croquis.croquis--plein > [data-croquis-scene]{width:min(100%,calc(100dvh - 120px));
  height:auto;max-width:none;max-height:none;aspect-ratio:1;margin:0 auto;
  border-color:rgba(245,242,225,.25)}
.croquis--plein > .croquis-outils .button{border-color:rgba(245,242,225,.35);color:var(--eggshell)}
.croquis--plein > .croquis-outils .button:hover{background:rgba(245,242,225,.12)}
.croquis--plein > .croquis-outils .croquis-astuce-zoom{color:rgba(245,242,225,.6)}
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}
.croquis-astuce-zoom{align-self:center;margin-left:auto;color:rgba(12,29,21,.45);font-size:.72rem}

/* 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)}
.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-outils{display:flex;gap:10px}
.croquis-outils .button{padding:8px 14px;font-size:.8rem}
.croquis-mesure{margin:0;font-size:.95rem}
/* 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-outils .button[aria-pressed="false"]{opacity:.55}
.croquis-outils .button:disabled{opacity:.35;cursor:default}
.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)}

/* --- 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}