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

/* ======================================================================== */
/* --- 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-outils{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom));z-index:5;
    flex-wrap:wrap;gap:8px;padding:8px;margin:0 -4px;border-radius:10px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    box-shadow:0 -2px 14px rgba(12,29,21,.08)}
  .croquis-outils .button{flex:1 1 auto;min-width:0;padding-left:8px;padding-right:8px;font-size:.78rem}
  .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-outils [data-croquis-plein]{order:-1;flex:1 1 100%;background:var(--pollen);
    color:var(--evergreen);border-color:var(--pollen);font-weight:800}
  .croquis.croquis--plein{padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .croquis.croquis--plein > .croquis-outils{position:static;background:transparent;
    box-shadow:none;margin:0;padding:0}
  .croquis.croquis--plein > .croquis-outils [data-croquis-plein]{flex:1 1 100%}
  .croquis.croquis--plein > [data-croquis-scene]{width:100%;
    max-height:calc(100dvh - 150px - env(safe-area-inset-bottom))}
}

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