/* 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;
  transition:grid-template-columns .2s ease}

.app-flanc{position:sticky;top:0;display:flex;height:100dvh;flex-direction:column;
  min-width:0;padding:26px 20px;background:var(--evergreen);color:var(--eggshell);
  transition:transform .2s ease,opacity .16s ease,padding .2s ease}
/* ── LA COLONNE REDUITE (24/08) ─────────────────────────────────────────
   Le repli faisait DISPARAITRE la navigation : on perdait ses reperes pour
   gagner 256 px. Elle se REDUIT desormais a 72 px — icones et libelles
   courts (`data-short`, deja servi par i18n) — on garde ou l'on est. */
.app.app--flanc-reduit{grid-template-columns:72px minmax(0,1fr)}
.app--flanc-reduit>.app-flanc{padding-inline:10px;align-items:center}
/* REDUITE, LA COLONNE MONTRE LE K — pas le mot « Kelveen » recadre au
   carre, qui donnait un bout de lettres coupees. Deux images, une par
   etat : le recadrage etait un bricolage, la marque a son icone. */
.app--flanc-reduit .app-marque{padding:6px 0 22px;justify-items:center}
.app--flanc-reduit .app-marque-mot{display:none}
.app--flanc-reduit .app-marque .app-marque-k{display:block;width:38px;height:38px}
.app--flanc-reduit .app-marque small{display:none}
/* ET LE SEUL BOUTON DE DECONNEXION : un nom tronque par des points de
   suspension dans 72 px n'apprend rien a qui le porte deja. */
.app--flanc-reduit .app-compte{justify-content:center;padding-inline:0}
.app--flanc-reduit .app-compte>div{display:none}
.app--flanc-reduit .app-nav{width:100%}
/* REDUIT, ON PARLE EN EMOJI. Le libelle court tombait a 0,58 rem — plus
   petit que tout le reste de l'interface, donc illisible au premier coup
   d'oeil, et sans icone pour le rattraper. Un emoji se reconnait de loin et
   ne depend d'aucune police chargee. Le nom complet reste : dans le titre
   au survol, et dans le texte du lien que seul l'oeil ne voit pas
   (`font-size:0` le garde pour les lecteurs d'ecran). */
.app--flanc-reduit .app-nav a{display:grid;justify-items:center;gap:2px;padding:11px 4px;font-size:0;text-align:center}
.app--flanc-reduit .app-nav a::after{content:attr(data-emoji);font-size:1.25rem;line-height:1.15;
  filter:saturate(.9)}
.app--flanc-reduit .app-nav a[data-emoji=""]::after,
.app--flanc-reduit .app-nav a:not([data-emoji])::after{content:attr(data-short);font-size:.75rem;font-weight:800}
.app--flanc-reduit .app-aide{justify-content:center;padding:11px 4px;font-size:0}
.app--flanc-reduit .app-aide span{display:none}
.app--flanc-reduit .app-aide .ico{display:none}
.app--flanc-reduit .app-aide::after{content:attr(data-emoji);font-size:1.25rem;line-height:1.15}
.app--flanc-reduit .app-calcul{font-size:0;padding:6px 0;text-align:center}
/* LE BOUTON QUI LA COMMANDE, dans la colonne : discret, jamais sur le chemin. */
/* LE BOUTON DIT CE QU'IL FAIT (24/08). C'etait un carre de 34 px a 62 %
   d'opacite, flottant sous la navigation, sans libelle : un glyphe qu'il
   fallait deviner. Il devient une commande de la meme famille que les
   entrees de nav — pleine largeur, hauteur de doigt, un chevron qui montre
   le sens et un mot qui le nomme. Reduit, il ne garde que le chevron. */
/* LE BOUTON REDUIRE, troisieme passage (24/08 au soir : « mal fait comme
   bouton »). Encadre et pleine largeur, il avait la forme d'une entree de
   navigation — donc d'une DESTINATION — alors qu'il n'en est pas une : on
   ne va nulle part en cliquant dessus. Il devient ce qu'il est : une
   commande de la colonne. Pas de cadre ; un filet qui le detache de la
   navigation au-dessus ; le chevron dans une pastille qui, elle, est
   clairement pressable ; le mot en retrait, discret jusqu'au survol. */
.app-flanc-reduire{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  margin:6px 0 0;padding:0 4px;border:0;border-top:1px solid rgba(255,253,244,.12);
  background:none;color:var(--eggshell);opacity:.62;font:inherit;font-size:.75rem;
  font-weight:700;letter-spacing:.02em;cursor:pointer;transition:opacity .15s}
.app-flanc-reduire:hover,.app-flanc-reduire:focus-visible{opacity:1}
.app-flanc-reduire-chevron{display:grid;flex:none;place-items:center;width:26px;height:26px;
  border-radius:50%;background:rgba(255,253,244,.1);transition:background .15s}
.app-flanc-reduire-chevron svg{width:15px;height:15px}
.app-flanc-reduire:hover .app-flanc-reduire-chevron,
.app-flanc-reduire:focus-visible .app-flanc-reduire-chevron{background:rgba(255,206,59,.3)}
.app--flanc-reduit .app-flanc-reduire{justify-content:center;padding:0}
.app--flanc-reduit .app-flanc-reduire span:not(.app-flanc-reduire-chevron){display:none}
.app--flanc-reduit .app-flanc-reduire-chevron svg{transform:scaleX(-1)}
.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 .app-marque-k{display:none}
.app-marque small{color:var(--pollen);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}

/* LE TIROIR est transparent a la mise en page sur ordinateur : la colonne du
   flanc reste exactement celle d'avant, `flex:1` de la navigation compris. */
.app-tiroir{display:contents}
/* LE BOUTON SANDWICH n'existe qu'au telephone. */
.app-menu-bouton{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;border:0;border-radius:8px;
  background:none;cursor:pointer}
.app-menu-bouton span{display:block;height:2px;border-radius:2px;background:var(--eggshell);
  transition:transform .2s,opacity .2s}
.app-flanc.menu-ouvert .app-menu-bouton span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.app-flanc.menu-ouvert .app-menu-bouton span:nth-child(2){opacity:0}
.app-flanc.menu-ouvert .app-menu-bouton span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.app-nav{display:flex;flex:1;flex-direction:column;gap:4px}
.app-nav a{padding:11px 12px;border-radius:var(--r-sm);color:var(--clair-2);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 var(--trait-clair)}
.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 var(--trait-clair)}
.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}

/* Le pied de page a 55 % d'encre donnait un contraste de 3,80 — sous le
   seuil AA de 4,5 — et il porte le lien « Confidentialite & cookies », qui
   est justement celui qu'on cherche quand on le cherche. 65 % donne 5,20.
   Trouve par les controles de navigateur des leur premiere execution. */
.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,.65)}
.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)}
/* LA PORTE DE SORTIE. Elle se lit comme un lien, pas comme un bouton :
   c'est une issue offerte, pas une action a prendre. */
.espace-message-annuler{border:0;background:none;padding:0 0 1px;margin-left:2px;
  color:inherit;font:inherit;font-weight:750;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:2px;cursor:pointer}
.espace-message-annuler:hover{color:var(--tangerine-ink)}
.espace-message-annuler[disabled]{opacity:.5;cursor:default;text-decoration:none}
.app-scene .espace-message.error{color:var(--tangerine-ink)}
.app-scene .espace-form{background:var(--white)}

/* --- Le lever de soleil -------------------------------------------------- */
/* LE LEVER : le petit soleil pollen de la couverture (hero-light.css), 24 px,
   son halo en deux couches et une lueur ambiante douce -- rien d'autre. Il
   monte VITE et DROIT depuis le bas, et vient se poser la ou il vit sur la
   page de garde (55 %, 24 %) ; puis le voile se retire vers le haut. Le
   coucher rejoue a rebours. Une fois par session ; rien pour qui prefere
   moins de mouvement. Le faisceau et le miroir ont ete retires a la demande :
   « juste le petit rond avec son halo qui monte rapidement ». */
.lever{position:fixed;inset:0;z-index:60;background:var(--evergreen);overflow:hidden;
  pointer-events:none;opacity:1}
.lever-ambiance{position:absolute;left:55%;top:82%;width:160vmax;height:160vmax;border-radius:50%;
  transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:.5;
  background:radial-gradient(circle,rgba(255,206,59,.14),rgba(255,206,59,.04) 16%,transparent 30%)}
.lever-soleil{position:absolute;left:55%;top:82%;width:24px;height:24px;border-radius:50%;
  background:#ffce3b;transform:translate(-50%,-50%);
  box-shadow:0 0 0 10px rgba(255,206,59,.025),0 0 48px 14px rgba(255,206,59,.17)}

/* Le lever : 0,9 s pour monter, le voile part des que le soleil est pose. */
.lever.parti .lever-soleil{animation:lever-monte .9s cubic-bezier(.2,.7,.25,1) forwards}
.lever.parti .lever-ambiance{animation:lever-monte-ambiance .9s cubic-bezier(.2,.7,.25,1) forwards}
.lever.parti{animation:lever-voile .6s ease-in 1s forwards}
.lever.absent{display:none}

/* Le coucher : le soleil redescend droit, la lueur s'eteint. */
.lever.coucher .lever-soleil{animation:lever-descend 1s cubic-bezier(.6,0,.8,.45) forwards}
.lever.coucher .lever-ambiance{animation:lever-descend-ambiance 1s cubic-bezier(.6,0,.8,.45) forwards}

@keyframes lever-monte{from{top:82%}to{top:24%}}
@keyframes lever-monte-ambiance{from{top:82%;opacity:.5}to{top:24%;opacity:1}}
@keyframes lever-voile{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes lever-descend{from{top:24%}to{top:86%}}
@keyframes lever-descend-ambiance{from{top:24%;opacity:1}to{top:86%;opacity:.15}}

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

/* Pas de vue de rue ici n'est pas une panne. Le ton reste celui d'une
   information — le rouge de .croquis-vision-erreur dirait au client qu'il a
   casse quelque chose, alors qu'il manque seulement une photo. */
.croquis-vision-attente { margin: 0; color: var(--texte-doux, #66645f); }
.croquis-vision-charge { animation: espace-pulse 1.25s ease-in-out infinite alternate; }
.croquis-vision-erreur { color: var(--erreur, #a52b21); font-weight: 650; }

.admin-integrations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.admin-integrations > div:first-child,
.admin-integrations-note { grid-column: 1 / -1; }
.admin-integrations label { display: grid; gap: .35rem; font-weight: 650; }
.admin-integrations input { min-height: 44px; width: 100%; }
.admin-integrations [data-admin-integrations-etat] { display: flex; gap: .55rem; flex-wrap: wrap; }
.admin-integration-etat {
  padding: .45rem .65rem;
  border-radius: 999px;
  background: #f2efea;
  color: #675f55;
  font-size: .83rem;
}
.admin-integration-etat--ok { background: #e9f6ed; color: #17663a; }
.admin-integrations-note { margin: 0; color: var(--texte-doux, #66645f); font-size: .86rem; }

@media (max-width: 760px) {
  .admin-integrations { grid-template-columns: 1fr; }
  .admin-integrations > * { grid-column: 1 !important; }
}

@media (max-width: 430px) {
}

/* --- 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,.app.app--flanc-reduit{grid-template-columns:1fr}
  .app-flanc{position:static;height:auto;flex-direction:row;align-items:center;gap:14px;
    padding:14px 18px}
  /* Au telephone la colonne est deja un bandeau-menu : la reduction n'a
     pas de sens, et le bouton qui la commande s'efface. */
  .app--flanc-reduit>.app-flanc{padding:14px 18px;align-items:center}
  .app-flanc-reduire{display:none}
  .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}
  /* Le sandwich dans le COIN, ou le pouce l'attend : mesure du 23/08, il
     flottait a x=188 -- au milieu -- parce que l'ancien bouton de
     deconnexion etalait 119 px de texte a sa droite. */
  .app-menu-bouton{order:3}
  .app-compte{order:2}
  .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:.75rem}
  .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}
/* Le formulaire d'ajout parle `C("champ")` : des champs nommes, pas des
   placeholders (revue #37) -- la grille d'edition les aligne. */

.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.6fr 1.2fr .7fr}}
.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}
/* LA COLONNE D'OUTILS SE MESURE SUR LE JETON EXISTANT (10/09).
   Le groupe « corriger le contour » se pose SOUS les quatre premiers outils.
   Son décalage dépend donc de la TAILLE d'un outil — qui vit déjà dans
   `--h-md`, le jeton de hauteur de contrôle. Écrit en dur, il se trompait au
   format téléphone ; recopié dans une variable à moi, il aurait menti dès
   que `--h-md` bougerait. Seuls l'écart et la marge sont propres à cette
   colonne, et ceux-là sont déclarés ici. */
.croquis-scene-cadre{--outils-ecart:6px;--outils-marge:10px}
.croquis-outils{position:absolute;top:var(--outils-marge);left:var(--outils-marge);z-index:4;display:flex;flex-direction:column;gap:var(--outils-ecart)}
.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}
/* La bascule de fond porte un MOT, pas une icone : « Vue Google » et
   « Vue IGN » ne se dessinent pas, et un glyphe inventé demanderait une
   légende. Elle s'élargit donc, et garde la hauteur de la rangée. */
/* LES GESTES D'UNE CARTE.
   Le curseur de souris est le signal le plus rapide qui existe : avant toute
   notice, une main ouverte dit « ceci se saisit ». Elle se ferme pendant
   qu'on tire, comme partout ailleurs. */
.croquis [data-croquis-scene].croquis-scene--carte{cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none}
.croquis [data-croquis-scene].croquis-scene--carte.croquis-scene--tire{cursor:grabbing}
.croquis [data-croquis-scene].croquis-scene--carte:focus-visible{
  outline:2px solid var(--pollen);outline-offset:2px}

/* Plus et moins, empiles en bas a droite -- au-dessus du bouton Agrandir. */
.croquis-zoom-pas{position:absolute;right:10px;bottom:60px;z-index:4;
  display:flex;flex-direction:column;border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px rgba(12,29,21,.18)}
.croquis-zoom-pas[hidden]{display:none}
.croquis-zoom-pas button{width:38px;height:38px;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:#0C1D15;font-size:1.15rem;line-height:1;
  font-weight:600;display:grid;place-items:center}
.croquis-zoom-pas button:first-child{border-bottom:1px solid rgba(12,29,21,.12)}
.croquis-zoom-pas button:hover{background:#fff}
.croquis-zoom-pas button:active{background:var(--pollen)}

/* La regle d'echelle, en bas a gauche. Sa LARGEUR porte l'information : le
   trait mesure vraiment la distance annoncee, sinon il mentirait. */
.croquis-echelle{position:absolute;left:10px;bottom:12px;z-index:4;
  min-width:44px;height:16px;border:1px solid rgba(12,29,21,.65);border-top:0;
  background:rgba(255,255,255,.55);pointer-events:none}
.croquis-echelle[hidden]{display:none}
.croquis-echelle span{position:absolute;left:0;right:0;bottom:15px;text-align:center;
  font-size:.75rem;font-weight:700;color:#0C1D15;text-shadow:0 0 3px rgba(255,255,255,.9);
  white-space:nowrap}

/* « Ou je suis », a cote du curseur de zoom : les deux commandes de carte
   vivent dans le meme coin. */
.croquis-ici{position:absolute;left:10px;top:10px;z-index:5;width:38px;height:38px;
  padding:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);border:1px solid rgba(12,29,21,.14);border-radius:19px;
  box-shadow:0 2px 10px rgba(12,29,21,.12);color:#0C1D15}
.croquis-ici[hidden]{display:none}
.croquis-ici[disabled]{opacity:.55;cursor:progress}
.croquis-ici .ico{width:19px;height:19px}
@media (max-width:640px){
    }

.croquis-outil--plein{position:absolute;right:10px;bottom:10px;z-index:4;width:42px;height:42px;
  background:rgba(255,253,244,.96);border-color:rgba(12,29,21,.48);font-size:1.15rem}
.croquis-outil--plein:hover{background:var(--white);border-color:var(--evergreen)}
/* LE PANNEAU DE RACCOURCIS. Il s'ouvre SOUS son bouton, dans le cadre du
   plan : au-dessus de la scene mais jamais hors d'elle, sinon il sortirait
   du plan agrandi. Deux colonnes de touches et d'actions, largeur bornee. */
.croquis-outil--aide{position:absolute;right:var(--outils-marge);top:var(--outils-marge);z-index:5}
.croquis-aide{position:absolute;right:var(--outils-marge);top:calc(var(--outils-marge) + var(--h-md) + 8px);z-index:6;width:min(310px,calc(100% - 20px));
  max-height:calc(100% - 70px);overflow:auto;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(12,29,21,.18);background:rgba(255,253,244,.98);
  box-shadow:0 10px 34px rgba(12,29,21,.22);backdrop-filter:blur(8px);color:var(--evergreen)}
.croquis-aide[hidden]{display:none}
.croquis-aide-titre{margin:0 0 10px;font-size:.78rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.croquis-aide dl{display:grid;gap:7px;margin:0}
.croquis-aide dl>div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:baseline}
.croquis-aide dt{display:flex;gap:3px;margin:0;white-space:nowrap}
.croquis-aide dd{margin:0;font-size:.82rem;line-height:1.35;color:rgba(12,29,21,.78)}
.croquis-aide kbd{display:inline-block;min-width:20px;padding:2px 5px;border-radius:5px;
  border:1px solid rgba(12,29,21,.22);border-bottom-width:2px;background:#f3f4e9;
  font:inherit;font-size:.76rem;font-weight:750;text-align:center;line-height:1.25}
.croquis-aide-note{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(12,29,21,.12);
  font-size:.78rem;line-height:1.45;color:rgba(12,29,21,.6)}
@media(max-width:640px){.croquis-aide{right:8px;left:8px;width:auto;top:52px}}

/* L'infobulle des boutons à icône (11/09) : nom, touche, une phrase. */
.infobulle{position:fixed;z-index:200;display:grid;gap:3px;max-width:260px;padding:8px 10px;
  border-radius:8px;background:var(--evergreen,#0c1d15);color:var(--eggshell,#f5f2e1);
  box-shadow:0 8px 24px rgba(12,29,21,.28);font-size:.78rem;line-height:1.35;pointer-events:none;
  animation:infobulle-vient .12s ease-out}
.infobulle[hidden]{display:none}
.infobulle-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.infobulle-tete strong{font-size:.8rem;font-weight:800}
.infobulle kbd{padding:1px 6px;border-radius:4px;border:1px solid rgba(245,242,225,.35);
  background:rgba(245,242,225,.12);font:inherit;font-size:.75rem;font-weight:750;white-space:nowrap}
.infobulle-phrase{color:rgba(245,242,225,.82);font-size:.75rem}
@keyframes infobulle-vient{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.infobulle{animation:none}}

/* Plein ecran : la meme carte, posee sur tout l'ecran. Echap pour sortir. */
/* LA PLEINE PAGE (11/09). « Il n'agrandit plus rien » : la règle masquait
   tous les enfants du croquis, cadre de la scène compris. Elle montre
   désormais TOUT — la carte à gauche sur toute la hauteur, à droite la
   recherche, les questions, la fiche. La colonne défile, la carte (fixed)
   reste ; la marge gauche du conteneur lui garde sa place. */
.croquis.croquis--plein{position:fixed;inset:0;z-index:90;max-width:none;margin:0;
  display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;
  overflow:auto;overscroll-behavior:contain;border:0;border-radius:0;
  padding:18px 20px 28px calc(100vw - min(460px,40vw));background:var(--surface,#fffdf4)}
.croquis.croquis--plein > .croquis-scene-cadre{position:fixed;left:0;top:0;bottom:0;z-index:1;
  width:calc(100vw - min(460px,40vw) - 20px);max-width:none;margin:0;border-right:1px solid var(--trait-fort)}
.croquis.croquis--plein > .croquis-scene-cadre > [data-croquis-scene]{width:100%;height:100%;
  max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0}
/* La colonne fait 440 px : ses grilles à trois colonnes passent à une. */
.croquis.croquis--plein{overflow-x:hidden}
.croquis.croquis--plein > *{min-width:0}
.croquis.croquis--plein .croquis-entete,.croquis.croquis--plein .questionnaire-grille{grid-template-columns:minmax(0,1fr)}
body.croquis-plein-ouvert{overflow:hidden}

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

/* --- 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:.75rem;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-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}
/* 50 % d'encre donnait 3,35. Cette note dit COMMENT le classement est fait :
   une méthode illisible ne vaut pas mieux qu'une méthode tue. */
.roi-note{margin:8px 0 0;font-size:.76rem;line-height:1.5;color:rgba(12,29,21,.68)}
.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}
/* La rose se saisit : le curseur le dit avant le premier essai. La prise est
   un disque transparent plus large que le dessin - viser une fleche de 10 px
   au doigt ne marche pas. Elle passe en DERNIER dans le balisage, donc au
   dessus pour la detection, sans rien masquer a l'oeil. */
.croquis-nord{cursor:grab}
.croquis-nord:active{cursor:grabbing}
.croquis-nord circle.croquis-nord-prise{fill:transparent;stroke:none}
.croquis-nord text.croquis-nord-valeur{font:700 9px var(--font-body);fill:rgba(12,29,21,.55)}
.croquis-nord:focus{outline:none}
.croquis-nord:focus-visible circle.croquis-nord-prise{stroke:var(--pollen);stroke-width:3}
/* Grand contour : on dit le regroupement, on offre le detail. */
/* 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-label{grid-column:1/-1;margin-bottom:-2px}
.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). */

/* 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-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}
/* LA SCENE DEFILE DANS LES DEUX SENS des qu'on zoome : un dessin plus grand
   que son cadre doit pouvoir se parcourir, sinon le zoom ne montre que le
   coin haut-gauche. `overscroll-behavior` empeche le geste de deborder sur
   la page derriere la modale. */
/* `scrollbar-gutter:stable` reserve la gouttiere TOUT LE TEMPS. Sans elle,
   l'apparition de la barre verticale reprend quinze pixels a la largeur
   utile : le dessin ajuste a la largeur d'AVANT deborde alors de neuf
   pixels, et une barre horizontale apparait pour rien. Mesure, pas
   supposition — c'est ce qui s'est produit au banc. */
.elev-scene{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:6px 0;border-radius:8px;background:var(--white);border:1px solid rgba(12,29,21,.1)}
.elev-scene.est-glissee{cursor:grabbing}
.elev-zoom{display:inline-flex;gap:6px;align-items:center;padding-right:10px;
  border-right:1px solid rgba(12,29,21,.14)}
.elev-zoom-valeur{min-width:52px;font-variant-numeric:tabular-nums}
/* LE CALQUE PHOTO. L'image redressee ne prend aucun clic : c'est le mur et
   ses etages qui doivent les recevoir, sinon on ne pourrait plus poser une
   fenetre la ou la photo en montre une. */
.elev-calque-outils{display:inline-flex;gap:8px;align-items:center}
.elev-calque-voir{display:inline-flex;gap:6px;align-items:center}
.elev-calque-voir input[type=range]{width:86px}
.elev-calque-img{pointer-events:none}
/* LE CALAGE montre la photo BRUTE : c'est le seul moment ou l'on veut voir
   la fuite, puisque c'est elle qu'on mesure. */
.elev-calage{position:relative;margin-inline:auto;cursor:crosshair;max-width:100%}
.elev-calage img{display:block;width:100%;height:100%;object-fit:fill;user-select:none}
.elev-calage svg{position:absolute;inset:0;pointer-events:none}
.elev-calage-cadre{fill:rgba(255,206,59,.18);stroke:var(--pollen,#ffce3b);stroke-width:2}
.elev-calage-pt circle{fill:var(--pollen,#ffce3b);stroke:var(--evergreen);stroke-width:1.5}
.elev-calage-pt text{text-anchor:middle;font-size:.75rem;font-weight:700;fill:var(--evergreen)}
.elev-calage-aide{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 10px;
  padding:8px 10px;border-radius:8px;font-size:.82rem;background:rgba(255,206,59,.16)}
.elev-zoom button[disabled]{opacity:.35;cursor:default}
.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}
/* Le mur vide se fait glisser ; avec un outil de pose, il reçoit. */
.elev-etage-zone{fill:transparent;cursor:grab}
.elev-scene.est-pose .elev-etage-zone{cursor:copy}
.elev-scene.est-pose .elev-etage-zone:hover{fill:rgba(255,206,59,.10)}
.elev-scene.est-glissee .elev-etage-zone{cursor:grabbing}
.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)}
/* LA BAIE DESSINÉE (11/09) : son verre, sa porte, ses traits de vitres,
   ses occultations. Les classes nomment chaque pièce : un « rect » générique
   peignait aussi le coffre d'un volet roulant en verre. */
.elev-verre{fill:#cfe7ec;stroke:var(--evergreen);stroke-width:1;cursor:grab}
.elev-fenetre:hover .elev-verre{fill:#b6dde5}
.elev-fenetre--simple .elev-verre{fill:#e4f2f4}
.elev-fenetre--renforce .elev-vitre{stroke:#0f7a6a}
.elev-meneau{stroke:var(--evergreen);stroke-width:.8;pointer-events:none}
.elev-porte{fill:#b99a74;stroke:var(--evergreen);stroke-width:1;cursor:grab}
.elev-porte-poignee{fill:var(--evergreen);pointer-events:none}
.elev-vitre{fill:none;stroke:rgba(12,29,21,.38);stroke-width:.7;pointer-events:none}
.elev-occ-coffre{fill:#e8e2cc;stroke:rgba(12,29,21,.55);stroke-width:.8}
.elev-occ-lame{stroke:rgba(12,29,21,.5);stroke-width:.8;pointer-events:none}
.elev-occ-vantail{fill:#d9cfb0;stroke:rgba(12,29,21,.5);stroke-width:.8}
.elev-occ-interieur{stroke:rgba(12,29,21,.45);stroke-width:1;stroke-dasharray:3 2;pointer-events:none}
.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}
/* ── LE STUDIO : histoire, groupe, repetition (24/08) ───────────────────── */
/* LE NIVEAU DE PREUVE SE VOIT SUR LA BAIE. On ne change pas le remplissage
   (la selection s'en sert deja) mais le CONTOUR : trait plein pour ce qui
   est deduit, trait appuye vert pour ce qui est decalque sur photo, trait
   pollen pour ce qui a ete releve sur place. Les couleurs sont celles des
   jetons `.jeton-preuve--*` : un seul vocabulaire pour une seule idee. */
.elev-fenetre--p-verifie rect{stroke:#2c4a3a;stroke-width:1.8}
.elev-fenetre--p-mesure rect{stroke:var(--pollen);stroke-width:2.2}
.elev-fenetre--p-mesure line{stroke:var(--pollen)}
.elev-preuves{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0}
/* Le cadre elastique de selection. */
.elev-cadre{fill:rgba(255,206,59,.16);stroke:rgba(115,89,0,.7);stroke-width:1;stroke-dasharray:3 2}

.elev-bilan{margin:0;font-size:.85rem;font-weight:700;color:#3d5a4d}
@media(max-width:860px){
  .croquis-elevation{padding:12px}
}

/* --- Lecture de la photo aerienne ---------------------------------------- */
.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 ------------------- */
/* LA FICHE EN LIGNES (11/09). Plus de second cadre dans le pliant qui en a
   deja un ; une ligne par donnee — libelle, valeur, source en pastille —,
   un filet entre les lignes, trois groupes. */
.croquis-fiche{padding:0;border:0;background:transparent}
.fiche-groupe{margin-top:14px}
.fiche-groupe:first-child{margin-top:2px}
.croquis-fiche dl{display:grid;gap:0;margin:0}
.fiche-ligne{display:grid;grid-template-columns:minmax(96px,34%) minmax(0,1fr);gap:4px 12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--trait)}
.fiche-ligne:first-child{border-top:0}
.croquis-fiche dt{margin:0;font-size:.78rem;font-weight:650;color:var(--encre-2)}
/* UNE MAJUSCULE EN TETE DE LIBELLE. La cle `croquis.niveaux` vaut « niveaux » :
   elle sert aussi en milieu de phrase (« 3 niveaux · 3,00 m/et. »). En tete
   de ligne, entre « Surface au sol » et « Fenetres et vitrage », elle
   detonnait. La premiere lettre se capitalise ici, pour les quatre langues,
   sans cle de plus. */
.croquis-fiche dt::first-letter{text-transform:uppercase}
.croquis-fiche dd{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;
  font-size:.88rem;font-weight:750;line-height:1.3;color:var(--evergreen)}
.fiche-source{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--surface-creuse,#f4f1e3);
  font-size:.75rem;font-weight:700;color:var(--encre-3);white-space:nowrap}
/* LES LIGNES DU CALCUL SE CORRIGENT SUR PLACE (11/09). Une liste à la place
   de la valeur, la provenance à côté : dorée quand c'est vous, en pointillé
   quand personne n'a répondu et que le calcul suppose. */
.fiche-groupe--calcul .fiche-sous-titre{color:var(--evergreen)}
.fiche-ligne--edit{align-items:center}
/* Le libellé d'une ligne qui se corrige est un <label> — et les <label>
   du croquis sont en capitales. Dans la fiche, il se lit comme ses voisins. */
.croquis-fiche dt label{display:inline;margin:0;font:inherit;letter-spacing:normal;text-transform:none;color:inherit;cursor:pointer}
.croquis-fiche .fiche-champ{flex:0 1 auto;min-width:0;max-width:100%;min-height:34px;padding:5px 8px;
  border:1px solid var(--trait-fort);border-radius:var(--r-sm);background-color:var(--white);
  font:inherit;font-size:.85rem;font-weight:750;color:var(--evergreen);cursor:pointer}
.croquis-fiche input.fiche-champ{width:5.5em;cursor:text;font-variant-numeric:tabular-nums}
.croquis-fiche .fiche-champ:hover{border-color:var(--evergreen)}
.croquis-fiche .fiche-champ:focus-visible{outline:none;box-shadow:var(--anneau)}
.croquis-fiche .fiche-champ--vide{border-style:dashed;color:var(--encre-2);font-weight:650}
.fiche-source--vous{background:rgba(255,206,59,.3);color:#715900}
.fiche-source--hypothese{background:transparent;border:1px dashed var(--trait-fort)}
.fiche-manque{flex-basis:100%;margin:0;font-size:.75rem;font-weight:600;line-height:1.4;color:var(--encre-3)}
/* Le bloc reglementaire s'appelle `.urba` : le lire plutot que le deviner. */
.croquis-fiche .urba{margin-top:14px}
.croquis-fiche h5{margin:0 0 4px}
.fiche-note{margin:12px 0 0;font-size:.75rem;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:.75rem;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:.75rem;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:.75rem;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:.75rem;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-caracteristiques-note{margin:2px 0 0;font-size:.75rem;color:var(--encre-2);line-height:1.5}
@media(min-width:700px){.croquis-fen-volet{grid-template-columns:minmax(0,320px)}}
.croquis-sous-titre{margin:6px 0 0;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#3d5a4d}






.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}

/* --- 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:.75rem;line-height:1.5;color:rgba(12,29,21,.5)}

/* L'aide d'un champ : elle explique, elle ne crie pas. Casse normale et non
   capitales -- le libelle au-dessus est souvent en majuscules, et deux
   niveaux de capitales rendraient le bloc illisible. (Le formulaire de
   facade qui la portait est parti le 11/09 ; le composant `champ` la garde.) */
.champ-aide{display:block;margin-top:2px;font-size:.75rem;line-height:1.4;
  font-weight:400;letter-spacing:0;text-transform:none;color:rgba(12,29,21,.58)}
.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}
  .app-compte button{width:44px;height:44px}
  .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. */
  /* LA REGLE TACTILE PASSE PAR LE JETON, SINON ELLE NE PASSE PAS (10/09).
     Elle disait `.croquis-outil{width:44px;height:44px}` — et n'a jamais pris
     effet : `.croquis-outil{width:var(--h-md)}`, plus bas dans le fichier,
     la reprenait. Les outils du croquis faisaient 38 px au doigt, sous le
     plancher que ce même fichier applique partout ailleurs. On redéfinit
     donc le JETON sur le cadre du plan : tout ce qui s'y mesure suit. */
  .croquis-scene-cadre{--h-md:var(--h-lg);--outils-ecart:8px;--outils-marge:8px}
  .croquis-outil{font-size:1.15rem}
  .croquis-outil--plein{right:8px;bottom:8px}
  .croquis-entete{grid-template-columns:1fr 1fr}

  /* 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:.75rem;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}

  /* LE SANDWICH. La barre basse prenait 57 px sous le pouce en permanence,
     plus 84 px reserves dans la scene -- 141 px sur 812, un sixieme de
     l'ecran, pour cinq entrees dont trois s'ouvrent rarement. Le tiroir rend
     cette place au contenu et ne s'ouvre qu'a la demande. */
  .app-menu-bouton{display:flex}
  .app-tiroir{display:none;position:absolute;left:0;right:0;top:100%;z-index:50;
    flex-direction:column;gap:2px;padding:4px 14px 14px;
    background:var(--evergreen);border-top:1px solid rgba(245,242,225,.14);
    box-shadow:0 16px 34px rgba(12,29,21,.42)}
  .app-flanc.menu-ouvert .app-tiroir{display:flex}
  .app-nav{display:flex;flex:0 0 auto;flex-direction:column;gap:0;padding:0;background:none;border:0}
  .app-nav a{padding:12px 4px;border-top:1px solid rgba(245,242,225,.12);
    font-size:1rem;font-weight:700;letter-spacing:0;border-radius:0}
  .app-scene{padding-bottom:34px}
  .app-flanc{position:sticky;top:0;z-index:40}
  .app-retour{font-size:.75rem}
}
/* Tres petits ecrans : le tableau des facades perd ses colonnes optionnelles. */
@media(max-width:400px){
  .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%}
  /* Dans le tiroir : 48 px de haut, aligne a gauche comme une vraie liste.
     La version basse centrait sur 44 px et 0,66 rem -- une contrainte de
     barre, plus une contrainte de lisibilite. */
  .app-nav a{min-height:48px;display:flex;align-items:center;line-height:1.2;font-size:1rem;padding:12px 4px}
  .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, la pleine page s'empile : la carte en haut, sur 58 % de
   l'ecran, et tout le reste dessous, qui defile sous le pouce. */
@media(max-width:860px){
  .croquis.croquis--plein{padding:calc(58dvh + 12px) 12px calc(16px + env(safe-area-inset-bottom))}
  .croquis.croquis--plein > .croquis-scene-cadre{right:0;bottom:auto;width:auto;height:58dvh;
    border-right:0;border-bottom:1px solid var(--trait-fort)}
}

/* --- 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}
/* DEUX LISTES, DEUX COLONNES. `auto-fit` en donnait trois : avec cinq
   questions la derniere ligne se remplissait, avec deux il restait un vide
   a droite. Elles ont quitte le bloc le 25/08 ; la grille suit. */
.questionnaire-grille{grid-template-columns:repeat(2,minmax(200px,1fr))}
@media(max-width:520px){ .questionnaire-grille{grid-template-columns: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:.75rem;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:.7rem;
  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:.75rem;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:.75rem;
  font-weight:500;line-height:1.4}
.parcours-bientot{grid-column:2;font-size:.7rem;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:.75rem;min-height:44px;row-gap:2px}
  .parcours-num{width:20px;height:20px;font-size:.75rem}
  .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:.7rem;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}
/* LE TITRE SE CHANGE LA OU IL S'AFFICHE.
   Le bouton porte exactement la typographie du h1 : c'est ce qui permet de
   relier l'element d'origine a sa version editable. L'affordance est au
   SURVOL -- un fond leger et un curseur texte -- pas un crayon permanent qui
   encombrerait un titre qu'on ne renomme qu'une fois. */
.projet-titre-modifiable{font:inherit;color:inherit;letter-spacing:inherit;
  background:none;border:0;padding:2px 8px;margin:0 0 0 -8px;border-radius:8px;
  text-align:left;cursor:text;max-width:100%;transition:background .12s}
.projet-titre-modifiable:hover{background:rgba(12,29,21,.06)}
.projet-titre-modifiable:focus-visible{outline:2px solid var(--pollen);outline-offset:2px}
.app-scene input.projet-titre-champ:not([type="checkbox"]):not([type="radio"]):not([type="range"]){
  font:inherit;color:inherit;letter-spacing:inherit;
  width:100%;max-width:100%;padding:2px 8px;margin:0 0 0 -8px;border-radius:8px;
  border:1px solid var(--pollen);background:#fff}

/* 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:.75rem}
}
/* 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)}
.tableau-vide .lien-bouton{margin-left:14px;color:var(--eggshell)}
.etat-vide .lien-bouton{margin-left:12px}

/* 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-ligne{display:grid}
.afaire-ligne + .afaire-ligne{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)}
button.afaire{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.afaire-detail{display:block;margin-top:2px;font-size:.78rem;font-weight:500;letter-spacing:0;color:rgba(12,29,21,.62)}
.afaire-secondaire{justify-self:start;min-height:24px;margin:-6px 0 10px 12px;padding:2px 0;border:0;background:none;font:inherit;font-size:.8rem;font-weight:700;color:#3d5a4d;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pf-hors-total{margin:10px 0 0;font-size:.75rem;line-height:1.4;color:rgba(12,29,21,.6)}

/* 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:.75rem;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:.7rem;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:minmax(0,1fr) 30px;grid-template-areas:"barre compte" "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-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:.75rem;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:.75rem;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 + bouton power ----------------------------- */
/* Le rond de 36/44 px vit dans la regle de base « .app-compte button ».
   L'icone est un SVG au trait, comme celle de l'aide : le caractere ⏻ --
   l'ancien bouton -- s'affiche mal sur une partie des systemes. */
.app-compte .app-deconnexion .ico{width:19px;height:19px}

/* --- L'identite de facade ------------------------------------------------ */
/* Ses dessins (pastille, plan, maquette, élévation) vivent dans
   facade-dessins.css, chargée avant cette feuille : l'exemple public les
   partage. Seules les règles de contexte restent ici. */

/* 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-hors-plan{color:rgba(12,29,21,.55);font-size:.75rem;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 > 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}

/* 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)}
  .roi-table th:first-child,.roi-table td:first-child{background:var(--eggshell)}
}
.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:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap;cursor:help}
/* 62 % d'encre donnait 4,44 sur fond ivoire — sous le seuil AA, et sur le
   jeton qui porte le NIVEAU DE PREUVE. 68 % donne 5,33. (Contrôles de
   navigateur, 25/08.) */
.jeton-preuve--simule{background:rgba(12,29,21,.08);color:rgba(12,29,21,.68)}
.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,.72);
  /* 64 % tient 4,5:1 sur les trois surfaces claires de l'app. La hiérarchie
     vient désormais de la taille et de la graisse, pas d'un texte illisible. */
  --encre-3:rgba(12,29,21,.64);

  /* LA MEME FAMILLE, SUR FOND SOMBRE. La barre laterale est la seule surface
     sombre de l'app : elle a donc besoin de ses propres encres secondaires,
     et elles reprennent les MEMES paliers que celles du fond clair -- .62
     pour le texte apaise, .14 pour un filet.
     Ne sont nommees que les valeurs qui reviennent cinq fois ou plus. Les
     vingt-six autres nuances d'eggshell attendent un arbitrage de direction
     artistique : les unifier deplacerait des pixels. */
  --clair-2:rgba(245,242,225,.62);
  --trait-clair:rgba(245,242,225,.14);

  /* 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. */
/* 48 % donne 3,17:1 sur la surface blanche : le contour du contrôle reste
   perceptible sans dépendre de son libellé. */
.app-scene .button--ghost{border-color:rgba(12,29,21,.48);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 .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 ses cellules sur la plus haute, et l'input remplissait
   le reste. On arrete l'etirement plutot que de forcer une hauteur. (La cellule
   fautive etait le modele de volet, parti a l'etape de comptage ; la regle
   reste, car tout champ plus haut etirerait de nouveau ses voisins.) */
.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:.75rem;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:.75rem;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. */
/* L'AIDE, EN ROND JAUNE EN BAS A DROITE.
   C'est la place qu'occupe un centre d'aide dans a peu pres toute
   application : on la cherche la avant de la chercher ailleurs.

   ON REVIENT SUR UNE DECISION DOCUMENTEE, et il faut le dire : elle avait
   quitte cette place le 21/08 parce qu'elle « tombait sur les commandes de
   la simulation -- c'est le defaut de toute bulle fixe : elle ignore ce
   qu'elle couvre ». Le defaut est reel, donc on le traite plutot que de le
   reintroduire : la scene reserve la hauteur du rond plus sa marge, et le
   plein ecran du croquis la fait disparaitre -- la, chaque pixel compte et
   les outils vivent justement dans ce coin. */
.app-aide{position:fixed;right:20px;bottom:20px;z-index:60;
  display:grid;place-items:center;gap:0;width:56px;height:56px;margin:0;padding:0;
  border:0;border-radius:50%;background:var(--pollen);color:var(--evergreen);
  font:650 .84rem/1 var(--font-body);cursor:pointer;
  box-shadow:0 6px 20px rgba(12,29,21,.28);
  transition:transform .15s,box-shadow .15s}
/* Le libelle reste dans le DOM pour les lecteurs d'ecran et pour l'infobulle,
   mais un rond n'a pas la place de l'ecrire. */
.app-aide span{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.app-aide .ico{width:24px;height:24px}
.app-aide:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(12,29,21,.34)}
/* La scene lui reserve sa place : sans cela le rond couvre le dernier
   bouton de la page, ce qui est exactement le reproche d'origine. */
.app-scene{padding-bottom:96px}
/* En plein ecran du croquis, les outils vivent dans ce coin : le rond s'efface. */
.croquis--plein ~ .app-aide,
body:has(.croquis--plein) .app-aide{display:none}
.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){
  /* L'aide rejoint le tiroir sur telephone. Elle reste accessible depuis le
     sandwich mais ne flotte plus au-dessus des chiffres, formulaires et CTA. */
  .app-flanc.menu-ouvert .app-aide{position:static;display:flex;justify-content:flex-start;gap:10px;width:100%;height:48px;
    margin:0;padding:12px 4px;border-top:1px solid rgba(245,242,225,.12);border-radius:0;background:transparent;
    color:var(--eggshell);box-shadow:none}
  .app-flanc.menu-ouvert .app-aide span{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
    color:inherit;font-size:1rem;font-weight:700;white-space:normal}
}

.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:.75rem}
.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:.7rem;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-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:.75rem;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:.75rem}
.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:.75rem;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:.7rem;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:.75rem;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}

/* 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:.7rem;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(470px,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-responsable,
.parcours-liste--complete .parcours-jalons,
.parcours-liste--complete .parcours-sortie{grid-column:2;display:block;line-height:1.4}
.parcours-liste--complete .parcours-responsable{margin-top:4px;color:var(--evergreen);font-size:.75rem;font-weight:800}
.parcours-liste--complete .parcours-jalons{margin-top:5px;color:var(--encre-3);font-size:.75rem}
.parcours-liste--complete .parcours-sortie{width:max-content;max-width:100%;margin-top:7px;padding:3px 7px;
  border-radius:var(--r-etat);background:rgba(255,206,59,.16);color:#715900;font-size:.75rem;font-weight:800}
.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}
.parcours-liste--complete .parcours-etape--a-venir a{opacity:.58;cursor:default;pointer-events: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}
/* LE TITRE NE SE PLIE PLUS EN TROIS (11/09). À côté du fil de cinq pas, la
   colonne du titre tombait à la largeur d'un mot sous 1 320 px : « Residence
   / Les / Tilleuls », trois lignes de haut en tête de chaque page. Le fil
   passe dessous quand la place manque — une ligne, pas trois. */
@media(max-width:1320px){
  .projet-entete{grid-template-columns:minmax(0,1fr)}
  .projet-entete .etape-tete{justify-self:start}
}
[data-ecran="projet"] #projet>h2{display:none}
.projet-carte{padding:0;border:0;background:transparent}
.projet-cap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;
  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-note{max-width:620px;margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.projet-analyse-attente{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 16px;max-width:720px}
.projet-analyse-attente>div:first-child{display:grid;gap:2px}
.projet-analyse-attente strong{font-size:.98rem}.projet-analyse-attente span{color:var(--encre-2);font-size:.75rem}
.projet-analyse-pourcentage{align-self:center;font-weight:850!important;color:var(--evergreen)!important}
.projet-analyse-attente .analyse-jauge{grid-column:1/-1}
.projet-analyse-attente p{grid-column:1/-1;margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.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}
[data-etape-active="qualification"] #batiments .section-intro,
[data-etape-active="simulation"] #batiments .section-intro{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))}
.albedo-lecture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 16px}
.albedo-carte{min-width:0;padding:14px 15px;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-sm);background:var(--white)}
.albedo-carte>span{display:block;color:var(--encre-3);font-size:.7rem;font-weight:850;
  letter-spacing:.08em;text-transform:uppercase}
.albedo-carte h5{margin:6px 0 11px;color:var(--evergreen);font-size:1.05rem;line-height:1.2}
.albedo-carte dl{display:grid;gap:6px;margin:0}
.albedo-carte dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding-top:6px;border-top:1px solid rgba(12,29,21,.08)}
.albedo-carte dt{color:var(--encre-2);font-size:.75rem}
.albedo-carte dd{margin:0;font-size:.76rem;font-weight:800;text-align:right}

/* --- Étude de potentiel : le verdict se lit avant le dossier ------------ */
.resultat-etude{display:block;margin-top:0;padding:0;overflow:hidden;
  border:1px solid rgba(12,29,21,.12);border-radius:var(--r-md);background:var(--surface-creuse);
  box-shadow:0 16px 42px rgba(12,29,21,.07);container-type:inline-size}
.resultat-etude-resume{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;padding:12px 16px;
  color:var(--evergreen);cursor:pointer;list-style:none;background:var(--white)}
.resultat-etude-resume::-webkit-details-marker{display:none}.resultat-etude-resume>span{display:grid;gap:3px}
.resultat-etude-resume>span>strong{font-size:.92rem}.resultat-etude-resume small{color:var(--encre-2);font-size:.78rem;line-height:1.4}
.resultat-etude-resume::after{content:"＋";font-weight:900}.resultat-etude[open]>.resultat-etude-resume::after{content:"−"}
.resultat-etude-resume .jeton-preuve{margin-left:auto}.resultat-etude-corps{display:grid;gap:16px;padding:clamp(16px,2.5vw,26px);border-top:1px solid rgba(12,29,21,.1)}
.resultat-etude-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.resultat-etude-tete>div{display:grid;gap:4px}.resultat-etude-tete>div>span,
.resultat-etude-lecture article>header>span{color:var(--encre-3);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.resultat-etude-tete h4{margin:0;color:var(--evergreen);font-size:clamp(1.35rem,2.8vw,2.05rem);line-height:1.08;letter-spacing:-.035em}
.resultat-etude-tete p{margin:2px 0 0;color:var(--encre-2);font-size:.8rem}.resultat-etude-tete .jeton-preuve{flex:none}
.resultat-etude-lecture{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(250px,.92fr);gap:10px}
.resultat-etude-lecture article{min-width:0;padding:16px;border:1px solid rgba(12,29,21,.1);border-radius:var(--r-sm);background:var(--white)}
.resultat-etude-lecture article>header{display:grid;gap:4px;margin-bottom:14px}.resultat-etude-lecture article>header small{color:var(--encre-3);font-size:.75rem;line-height:1.4}
.resultat-etude-repartition>div{display:grid;gap:10px}.resultat-etude-poste>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.resultat-etude-poste span{color:var(--encre-2);font-size:.75rem}.resultat-etude-poste strong{color:var(--evergreen);font-size:.78rem}
.resultat-etude-poste>i{display:block;height:7px;margin-top:4px;overflow:hidden;border-radius:99px;background:rgba(12,29,21,.07)}
.resultat-etude-poste>i>b{display:block;height:100%;border-radius:inherit;background:var(--pollen)}
.resultat-etude-poste--froid>i>b{background:var(--teal)}.resultat-etude-poste--pv>i>b{background:#287a4f}
.resultat-etude-impact,.resultat-etude-avenir{display:grid;gap:12px;padding:16px;border:1px solid rgba(12,29,21,.1);
  border-radius:var(--r-sm);background:var(--white)}
.resultat-etude-impact>header,.resultat-etude-avenir>header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.resultat-etude-impact>header>div{display:grid;gap:3px}.resultat-etude-impact>header span,.resultat-etude-avenir>header span{
  color:var(--encre-3);font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.resultat-etude-impact>header h5{margin:0;color:var(--evergreen);font-size:.9rem}.resultat-etude-impact>header p,
.resultat-etude-avenir>header p{max-width:520px;margin:0;color:var(--encre-3);font-size:.75rem;line-height:1.45;text-align:right}
.resultat-etude-impact>div,.resultat-etude-avenir>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.resultat-etude-comparaison,.resultat-etude-avenir article{display:grid;gap:9px;min-width:0;padding:13px;border-radius:var(--r-xs);
  background:var(--surface-creuse)}
.resultat-etude-comparaison>span,.resultat-etude-avenir article>span{color:var(--encre-2);font-size:.75rem;font-weight:850}
.resultat-etude-comparaison>div{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:7px}
.resultat-etude-comparaison p{display:grid;gap:2px;margin:0}.resultat-etude-comparaison p small{color:var(--encre-3);font-size:.75rem}
.resultat-etude-comparaison p strong{color:var(--evergreen);font-size:.84rem;line-height:1.15}.resultat-etude-comparaison>div>i{
  color:var(--encre-3);font-size:.75rem;font-style:normal}.resultat-etude-comparaison footer{display:flex;align-items:baseline;gap:7px;
  padding-top:7px;border-top:1px solid rgba(12,29,21,.08)}.resultat-etude-comparaison footer b{color:var(--teal);font-size:.78rem}
.resultat-etude-comparaison footer span{color:var(--encre-3);font-size:.75rem}.resultat-etude-avenir article strong{
  color:var(--evergreen);font-size:1.12rem;line-height:1}.resultat-etude-avenir article small{color:var(--encre-3);font-size:.75rem;line-height:1.4}
.resultat-etude-confort dl{display:grid;gap:0;margin:0}.resultat-etude-confort dl>div{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:9px 0;border-top:1px solid rgba(12,29,21,.08)}.resultat-etude-confort dt{color:var(--encre-2);font-size:.75rem}
.resultat-etude-confort dd{margin:0;text-align:right;color:var(--evergreen);font-size:.78rem;font-weight:850}
.resultat-etude-confort dd strong,.resultat-etude-confort dd span{display:block}.resultat-etude-confort dd span{margin-top:2px;color:var(--encre-3);font-size:.75rem}
.diag-mensuel{margin:0;padding:14px 15px;border:1px solid rgba(12,29,21,.1);border-radius:var(--r-sm);background:var(--white)}
.diag-mensuel figcaption{display:flex;justify-content:space-between;gap:12px}.diag-mensuel figcaption span{color:var(--encre-3);
  font-size:.7rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.diag-mensuel figcaption strong{font-size:.75rem;color:var(--evergreen)}
/* LA LEGENDE ET L'HABILLAGE DU SVG MENSUEL SONT PARTIS AVEC LUI, le 27/08 :
   la saisonnalite passe desormais par `moteur-graphes.js`, qui porte sa
   propre legende et son propre axe dans `atelier-moteur.css`. Garder ces
   regles aurait laisse deux vocabulaires visuels dont l'un sans porteur.
   (Le nom de la classe retiree n'est pas ecrit ici : `code_mort.js` lit les
   commentaires comme le reste, et le citer la recompterait orpheline.) */
.diag-mensuel .mg{margin:0}.diag-mensuel>p{margin:3px 0 0;color:var(--encre-3);font-size:.75rem;line-height:1.4}
/* Le selecteur prend la place qu'occupait le nom de la facade : meme ligne,
   meme poids. Il n'ajoute pas une commande a un ecran deja dense, il rend
   cliquable une etiquette qui ne l'etait pas. */
.diag-mensuel figcaption .diag-mensuel-choix{display:flex;align-items:center;gap:8px}
.diag-mensuel figcaption .diag-mensuel-choix>span{font-size:.7rem;font-weight:700;
  color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em}
.diag-mensuel figcaption .diag-mensuel-choix select{min-height:44px;padding:6px 9px;
  font-size:.78rem;font-weight:700;color:var(--evergreen);background:var(--surface-creuse);
  border:1px solid rgba(12,29,21,.16);border-radius:7px;max-width:16rem}
.resultat-etude-technique{border:1px solid rgba(12,29,21,.1);border-radius:var(--r-sm);background:var(--white)}
.resultat-etude-technique>summary{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 13px;color:var(--evergreen);cursor:pointer}
.resultat-etude-technique>summary span{margin-left:auto;color:var(--encre-3);font-size:.75rem}.resultat-etude-trace{display:grid;
  grid-template-columns:minmax(210px,.7fr) minmax(0,1.3fr);gap:14px;padding:0 13px 13px}
.resultat-etude-trace dl{display:grid;align-content:start;gap:7px;margin:0}.resultat-etude-trace dl>div{display:grid;grid-template-columns:90px 1fr;gap:8px}
.resultat-etude-trace dt{color:var(--encre-3);font-size:.75rem}.resultat-etude-trace dd{margin:0;color:var(--evergreen);font-size:.75rem;font-weight:750}
.resultat-etude-trace ul{display:grid;gap:5px;margin:0;padding:0;list-style:none}.resultat-etude-trace li{display:grid;grid-template-columns:1fr auto auto;
  gap:8px;padding:7px 9px;border-radius:var(--r-xs);background:var(--surface-creuse);font-size:.75rem}.resultat-etude-trace li span{color:var(--encre-3)}
.resultat-etude-hash{display:flex;flex-wrap:wrap;gap:6px;padding:0 13px 13px}.resultat-etude-hash strong{width:100%;color:var(--encre-3);
  font-size:.7rem;text-transform:uppercase}.resultat-etude-hash code{padding:4px 6px;border-radius:4px;background:var(--surface-creuse);font-size:.75rem}
.resultat-etude-albedo-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;padding:0 13px 13px}.resultat-etude-albedo-detail section{
  display:grid;align-content:start;gap:8px;padding:12px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.resultat-etude-albedo-detail section>strong{color:var(--evergreen);font-size:.75rem}.resultat-etude-albedo-detail dl{display:grid;gap:5px;margin:0}
.resultat-etude-albedo-detail dl>div{display:flex;justify-content:space-between;gap:10px}.resultat-etude-albedo-detail dt{
  color:var(--encre-2);font-size:.75rem}.resultat-etude-albedo-detail dd{margin:0;color:var(--evergreen);font-size:.75rem;font-weight:850}
.resultat-etude-albedo-detail small{color:var(--encre-3);font-size:.75rem;line-height:1.45}
.resultat-etude-technique>.espace-avertissement{margin:0 13px 10px}.resultat-etude-methode{margin:0;padding:10px 12px;border-left:3px solid var(--teal);
  border-radius:0 var(--r-xs) var(--r-xs) 0;background:rgba(15,156,135,.08);color:var(--encre-2);font-size:.75rem;line-height:1.5}

@container (max-width:720px){
  .resultat-etude-impact>div,.resultat-etude-avenir>div{grid-template-columns:1fr 1fr}.resultat-etude-comparaison:last-child,
  .resultat-etude-avenir article:last-child:nth-child(odd){grid-column:1/-1}
  .resultat-etude-lecture{grid-template-columns:1fr}.resultat-etude-trace{grid-template-columns:1fr}
  .resultat-etude-trace li{grid-template-columns:1fr auto}.resultat-etude-trace li span:last-child{grid-column:1/-1}
}
@media(max-width:620px){
  .albedo-lecture{grid-template-columns:1fr}
  .albedo-carte{padding:13px}
  .resultat-etude{padding:14px}.resultat-etude-tete{align-items:flex-start}.resultat-etude-tete .jeton-preuve{margin-top:2px}
  .resultat-etude-impact>header,.resultat-etude-avenir>header{align-items:flex-start;flex-direction:column;gap:5px}
  .resultat-etude-impact>header p,.resultat-etude-avenir>header p{text-align:left}.resultat-etude-impact>div,
  .resultat-etude-avenir>div{grid-template-columns:1fr}.resultat-etude-comparaison:last-child,
  .resultat-etude-avenir article:last-child:nth-child(odd){grid-column:auto}.resultat-etude-albedo-detail{grid-template-columns:1fr}
  .resultat-etude-technique>summary{align-items:flex-start;flex-direction:column;gap:2px}.resultat-etude-technique>summary span{margin-left:0}
  .resultat-etude-trace{grid-template-columns:1fr}.resultat-etude-trace li{grid-template-columns:1fr}.resultat-etude-trace li span:last-child{grid-column:auto}
}

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

  /* L'AIDE FLOTTE AUSSI AU TELEPHONE, au meme endroit et pour la meme
     raison : c'est la qu'on la cherche. Un peu plus petite, et la scene lui
     reserve sa place comme sur ordinateur. */
  .app-aide{right:14px;bottom:14px;width:50px;height:50px}
  .app-aide .ico{width:22px;height:22px}
  .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:.75rem}
  .parcours-liste--compacte .parcours-position{font-size:.75rem}
  .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:.75rem}
  .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-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:.75rem;
  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,1fr);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:.7rem;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:.7rem;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:.75rem;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-outils-modele{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:14px 20px 10px}
.batiment-outils-modele .button{min-height:38px;padding:8px 11px;font-size:.75rem}
.batiment-outils-modele .lien-bouton{margin-left:auto}
.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:.75rem}
.batiment-actions-secondaires .lien-bouton{margin-left:auto;font-size:.75rem}
.batiment-fiche>.espace-edition{margin:0 20px 16px}

/* Le détail du bâtiment est une vérification facultative, pas une deuxième
   action principale. La suppression reste accessible sans vivre au premier
   niveau de lecture. */
.batiment-supprimer{margin-left:auto;min-height:38px;padding:7px 10px;border-radius:7px}
.batiment-supprimer:hover{background:rgba(165,47,32,.08)}

/* Dans la vue projet, le cycle tient sur une ligne. Le détail des cinq
   phases ne se déplie qu'à la demande. */
[data-ecran="projet"] .parcours-compact{gap:0;margin-bottom:16px;padding:12px 14px}
[data-ecran="projet"] .parcours-compact-tete{align-items:center}
[data-ecran="projet"] .parcours-liste--compacte[hidden]{display:none}
[data-ecran="projet"] #projet{margin-bottom:14px}

/* La façade est un espace de travail à part entière. Le projet reste bref ;
   la pré-étude dispose de sa propre URL et de toute la largeur utile. */
.facade-page{max-width:1120px;margin-inline:auto}
.facade-page-entete{display:grid;gap:3px;margin-bottom:8px}
.facade-page-entete>.projet-retour{width:max-content;margin-bottom:10px}
.facade-page-entete>span{color:var(--tangerine);font-size:.7rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase}
.facade-page-entete h2{max-width:760px;margin:0;font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.03em}
.facade-page-entete p{max-width:70ch;margin:1px 0 0;color:var(--encre-3);font-size:.78rem;line-height:1.5}
.facade-page>[data-page-facades]{overflow:visible;background:transparent}
/* LE DOSSIER DE CALCUL — clair, et hierarchise (24/08).
   Le bloc etait une dalle vert fonce glissee dans un accordeon blanc : rien
   n'expliquait ce changement de monde, et surtout la liste d'hypotheses y
   heritait d'une encre foncee — contraste 1.00, texte INVISIBLE. Mesure, pas
   supposee. Il redevient donc clair comme la page qui le porte. */
.diagnostic-dossier{display:grid;gap:14px;padding:18px;background:var(--white);color:var(--evergreen)}
/* LA JAUGE EST LE SUJET : le pourcentage se lit en premier, en gros. */
.dossier-tete{display:flex;align-items:center;gap:16px}
.dossier-tete>div{display:grid;gap:3px;min-width:0;flex:1}
.dossier-part{display:flex;align-items:baseline;gap:2px;margin:0;flex:none;
  font-variant-numeric:tabular-nums;color:var(--encre-3)}
.dossier-part strong{font-size:2.1rem;line-height:1;letter-spacing:-.03em;color:var(--evergreen)}
.dossier-part span{font-size:.9rem;font-weight:800}
.dossier-tete--pret .dossier-part strong{color:#17653f}
.diagnostic-dossier>header span{color:var(--encre-3);font-size:.7rem;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase}
.diagnostic-dossier>header strong{font-size:1rem;letter-spacing:-.01em;color:var(--evergreen)}
.diagnostic-dossier>header .button{flex:none;min-height:44px}
.dossier-jalons{font-style:normal;color:var(--encre-3);font-size:.75rem;font-weight:700}
.diagnostic-indicateurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.diagnostic-indicateurs p{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:9px;margin:0;
  padding:10px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--eggshell)}
.diagnostic-indicateurs strong{font-size:1.3rem;font-variant-numeric:tabular-nums;color:var(--evergreen)}
.diagnostic-indicateurs span{font-size:.75rem;line-height:1.3;color:var(--encre-2)}
/* CE QUI APPELLE UN GESTE SE VOIT ; UN ZERO NE SE SIGNALE PAS EN ORANGE.
   Les deux tons servent les couleurs des jetons deja definis plus bas :
   un seul vocabulaire pour une seule idee. */
.diagnostic-indicateurs .indic--faire{border-color:rgba(255,206,59,.55);background:rgba(255,206,59,.16)}
.diagnostic-indicateurs .indic--faire strong{color:#715900}
.diagnostic-indicateurs .indic--fait{border-color:rgba(151,175,154,.5);background:rgba(151,175,154,.18)}
.diagnostic-indicateurs .indic--fait strong{color:#2c4a3a}
.diagnostic-bloquants{margin:0;padding:10px 12px;border:1px solid rgba(138,60,20,.3);
  border-radius:var(--r-xs);background:rgba(138,60,20,.08);color:#6d3311;
  font-size:.75rem;line-height:1.5}.diagnostic-bloquants strong{color:#8a3c14}
.diagnostic-dossier>details{border-top:1px solid var(--trait)}
.diagnostic-dossier>details>summary{min-height:42px;display:flex;align-items:center;padding-top:8px;
  color:var(--encre-2);font-size:.75rem;font-weight:800;cursor:pointer}
.facade-potentiel{padding:4px 7px;border-radius:var(--r-etat);font-size:.75rem;font-weight:850;white-space:nowrap}
.facade-potentiel--prioritaire{background:rgba(25,115,75,.12);color:#17653f}
.facade-potentiel--a_verifier{background:rgba(240,161,42,.16);color:#7c4b06}
.facade-potentiel--secondaire{background:rgba(12,29,21,.07);color:var(--encre-2)}
.facade-potentiel--hors_etude{background:rgba(165,47,32,.09);color:#842a20}
.facade-statut{padding:4px 7px;border-radius:var(--r-etat);font-size:.75rem;font-weight:850;white-space:nowrap}
.facade-statut--prete{background:rgba(15,156,135,.13);color:#0b6b5c}
.facade-statut--attente{background:rgba(255,206,59,.2);color:#715900}
.facade-statut--erreur{background:rgba(165,47,32,.1);color:#8b291e}
.facade-statut--vide{background:rgba(12,29,21,.07);color:var(--encre-3)}

@media(max-width:700px){
  .facade-page-entete{padding-inline:2px}
  .diagnostic-dossier{padding:16px 14px}
  .dossier-tete{align-items:flex-start}
  .diagnostic-dossier>header{align-items:stretch;flex-direction:column}
  .diagnostic-dossier>header .button{width:100%}
  .diagnostic-indicateurs{grid-template-columns:1fr}
  .facade-plan-pliant{margin:10px 14px 0}
  .facade-plan-pliant>summary{min-height:44px}
  .facade-statut{white-space:normal;text-align:center}
}

/* 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)}
.decision-zone{margin-bottom:12px;padding:18px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-md);background:var(--white)}
.decision-zone[hidden]{display:none}
.decision-attente{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 13px;align-items:center;
  padding:16px;border-radius:var(--r-sm);background:var(--surface-creuse)}
.decision-attente-icone{width:24px;height:24px;border:3px solid rgba(12,29,21,.14);border-top-color:var(--evergreen);
  border-radius:50%;animation:decision-tour 1.1s linear infinite}
.decision-attente strong{font-size:.9rem}.decision-attente p{margin:3px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.decision-attente .analyse-jauge{grid-column:1/-1}
@keyframes decision-tour{to{transform:rotate(360deg)}}
.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:.7rem;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:.75rem;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:.7rem;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:.7rem;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-outils-modele{display:grid;padding:12px 14px 8px}
  .batiment-outils-modele .button{width:100%;min-height:44px}
  .batiment-outils-modele .lien-bouton{margin:2px 0 0;justify-self:start;min-height:44px}
  .batiment-supprimer{width:100%;margin:0;min-height:44px}
  .batiment-actions-secondaires{padding:8px 14px}
  .batiment-fiche>.espace-edition{margin:0 14px 14px}
  .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:.7rem;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}
.config-facteur{display:block;margin-top:5px;color:var(--encre-3);font-size:.75rem;line-height:1.4}
.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:.75rem}
.config-actions{display:flex;flex:none;align-items:center;gap:8px}
.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:.7rem;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:.75rem}
.config-carte>.config-partiel{margin:0;padding:7px 9px;border-radius:var(--r-xs);
  background:rgba(255,206,59,.14);font-size:.75rem;font-style:normal;color:#715900}
.config-carte--edition{grid-column:1/-1;border-color:rgba(12,29,21,.28);background:var(--white)}
.config-edition{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr);gap:14px;
  margin-top:2px;padding-top:14px;border-top:1px solid var(--trait)}
.config-edition[hidden]{display:none}
.config-edition-tete{grid-column:1/-1;display:grid;gap:3px}
.config-edition-tete strong{font-size:.86rem}
.config-edition-tete small{color:var(--encre-3);font-size:.75rem;line-height:1.45}
.config-edition-nom{display:grid;align-content:start;gap:7px;font-size:.75rem;font-weight:800;color:var(--encre-2)}
.config-edition-nom input{width:100%;min-height:44px;padding:9px 11px;border:1px solid var(--trait-fort);
  border-radius:var(--r-xs);background:var(--surface);color:var(--encre);font:inherit}
.config-edition-facades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 12px;
  min-width:0;margin:0;padding:0;border:0}
.config-edition-facades legend{grid-column:1/-1;margin-bottom:4px;padding:0;font-size:.75rem;
  font-weight:800;color:var(--encre-2)}
.config-edition-facade{min-width:0;padding:6px 8px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.config-edition-facade>span{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 7px;align-items:center;min-width:0}
.config-edition-facade strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem}
.config-edition-facade small{grid-column:2;color:var(--encre-3);font-size:.75rem}
.config-edition-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.config-suppression{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;min-height:116px}
.config-suppression-marque{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(214,73,51,.12);font-size:1.05rem}
.config-suppression strong{font-size:.88rem}
.config-suppression p{margin:4px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.4}
@media(max-width:600px){
  .configs{padding:14px 12px}
  .configs-tete{display:grid;gap:7px}
  .configs-cartes{grid-template-columns:1fr}
  .config-carte>header{display:grid}
  .config-actions{justify-content:space-between}
  .config-actions .lien-bouton{min-height:44px}
  .config-edition{grid-template-columns:1fr}
  .config-edition-tete,.config-edition-actions{grid-column:1}
  .config-edition-facades{grid-template-columns:1fr}
  .config-edition-actions{display:grid}
  .config-edition-actions .button{width:100%}
  .config-suppression{grid-template-columns:auto minmax(0,1fr)}
  .config-suppression .button{grid-column:1/-1;width:100%}
}

/* 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:.75rem;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:.7rem;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:.7rem;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:.7rem;
  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-ligne:first-of-type>.afaire{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:.75rem;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:.75rem}
.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:.75rem;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:.7rem;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:.75rem}

@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-tete>.rep-nom,.rep-tete>.rep-etape{grid-area:auto}
  .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}

/* La création est une page de travail, pas la fin du répertoire. Le même
   en-tête accompagne l'atelier quand il est déplacé dans la fiche bâtiment. */
.atelier-page-tete{display:grid;gap:5px;margin-bottom:18px}
.atelier-page-tete>span{color:var(--teal);font-size:.7rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.atelier-page-tete h2{margin:0;color:var(--evergreen);font-size:clamp(1.55rem,3.5vw,2.45rem);line-height:1.05;letter-spacing:-.035em}
.atelier-page-tete p{max-width:68ch;margin:2px 0 0;color:var(--encre-2);font-size:.86rem;line-height:1.5}
[data-ecran="projets"]>[data-atelier]{margin-top:0}
[data-ecran="projet"]>[data-atelier]{margin-top:0}
.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}
/* Atelier : page à la création, section au projet. Un titre sur deux. */
.atelier-titre-projet{display:none}
.croquis-sous-titre-projet{display:none}
[data-ecran="projet"] .atelier-titre-creation{display:none}
[data-ecran="projet"] .atelier-titre-projet{display:block}
/* L'exemple public s'ouvre par-dessus l'atelier (CDC découverte, D1) : une
   aide à la création, pas au projet. */
.atelier-exemple{margin-top:4px;font-size:.84rem}
[data-ecran="projet"] .atelier-exemple{display:none}
.aide-exemple{margin:0 0 14px}
/* Le bâtiment préparé avant la connexion (CDC découverte, D2) : proposé,
   jamais importé en silence — deux gestes, reprendre ou écarter. */
.reprise-brouillon{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;
  margin:0 0 16px;padding:14px 18px;border:1px solid rgba(255,206,59,.7);border-radius:12px;background:rgba(255,206,59,.14)}
.reprise-brouillon h2{margin:0 0 4px;font-size:1rem}
.reprise-brouillon p{margin:0;font-size:.9rem;color:var(--encre-2)}
.reprise-brouillon-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* Lots D3/D5 : l'étude datée, ce qu'un chiffre de scénario doit, la variante. */
.roi-etude{margin:4px 0 0;font-size:.78rem;line-height:1.4;color:var(--encre-2)}
.roi-etude--perime,.roi-etude--moteur_change,.roi-etude--suspendue{color:#8a4b00;font-weight:700}
.config-provenance,.config-origine{margin:0;font-size:.75rem;line-height:1.45;color:var(--encre-2)}
.config-etat{color:#8a4b00}
.configs-incomparables{margin:0 0 10px;font-size:.78rem;line-height:1.45;color:var(--encre-2)}
.rep-impact-etat{font-size:.75rem;font-weight:700;color:#8a4b00}
@media(max-width:600px){.afaire-secondaire{min-height:44px}}
/* « Discuter de ce projet avec Kelveen » (CDC découverte, D4) : un panneau
   court, et le résumé exact de ce qui part. */
.demande-dialogue{width:min(640px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:0;border-radius:16px;
  background:var(--white,#fffdf4);color:var(--evergreen);box-shadow:0 24px 70px rgba(12,29,21,.3)}
.demande-dialogue::backdrop{background:rgba(12,29,21,.5)}
.demande-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--trait)}
.demande-tete h2,.demande-recue h2{margin:0;font-size:1.1rem}
.demande-fermer{width:44px;height:44px;display:grid;place-items:center;flex:none;padding:0;border:1px solid var(--trait-fort);border-radius:50%;
  background:transparent;color:var(--evergreen);cursor:pointer}
.demande-fermer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.demande-corps{display:grid;gap:14px;padding:16px 20px 20px}
.demande-intentions{display:grid;gap:6px;margin:0;padding:0;border:0}
.demande-intentions legend{margin-bottom:6px;font-weight:800}
.demande-intentions label{display:flex;gap:10px;align-items:center;min-height:44px;padding:8px 12px;border:1px solid var(--trait);border-radius:10px;cursor:pointer}
.demande-intentions label:has(input:checked){border-color:var(--evergreen);box-shadow:inset 0 0 0 1px var(--evergreen)}
.demande-intentions label:has(input:disabled){opacity:.55;cursor:not-allowed}
.demande-champ{display:grid;gap:6px;font-weight:700}
.demande-champ small{font-weight:500;color:var(--encre-2)}
.demande-champ textarea{width:100%;min-height:88px;padding:10px 12px;border:1px solid var(--trait-fort);border-radius:8px;font:inherit;font-weight:400}
.demande-resume{display:grid;gap:8px;padding:12px 14px;border-radius:10px;background:var(--surface-creuse)}
.demande-resume h3{margin:0;font-size:.9rem}
.demande-resume dl{display:grid;gap:6px;margin:0}
.demande-resume dl>div{display:grid;grid-template-columns:minmax(104px,30%) 1fr;gap:10px;font-size:.86rem}
.demande-resume dt{color:var(--encre-2)}
.demande-resume dd{margin:0}
.demande-note{margin:0;font-size:.8rem;color:var(--encre-2)}
.demande-erreur{margin:0;color:var(--tangerine-ink,#a52f20);font-size:.9rem}
.demande-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.demande-recue{display:grid;gap:10px;padding:20px}
.demande-recue p{margin:0}
.resultats-demande{margin:14px 0 0;font-size:.9rem;color:var(--encre-2)}
[data-ecran="projet"] .croquis-sous-titre-creation{display:none}
[data-ecran="projet"] .croquis-sous-titre-projet{display:block}

.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:.7rem;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:.7rem;
  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:.7rem;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:.75rem;font-weight:850;white-space:nowrap}
.compte-verifie::before{content:"✓";margin-right:5px;font-weight:900}
.compte-pilotage{color:var(--pollen);font-size:.75rem;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:.7rem;
  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:.75rem;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:.75rem;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:.75rem;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:.7rem;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:.75rem;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:.7rem;
  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:.7rem;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:.75rem;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:.75rem;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}

/* --- Études territoriales -------------------------------------------------
   La liste est le point d'entrée, comme dans le CRM : une étude se retrouve,
   se lit et s'ouvre. La carte n'apparaîtra qu'avec un artefact réel ; aucun
   rectangle de démonstration ne se fait passer pour un territoire mesuré. */
.etudes-territoriales-outil{display:grid;gap:14px}
.etudes-territoriales-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:18px;border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);background:var(--white)}
.etudes-territoriales-tete>div:first-child{max-width:720px}
.etudes-territoriales-tete span,.etude-territoriale-forme>div:first-child>span,
.etude-detail-tete>div>span,.etude-potentiel-tete>span{display:block;color:var(--encre-3);font-size:.75rem;font-weight:900;
  letter-spacing:.08em;text-transform:uppercase}
.etudes-territoriales-tete h2,.etude-detail-tete h2{margin:3px 0 5px;font-size:1.35rem;letter-spacing:-.035em}
.etudes-territoriales-tete p,.etude-territoriale-forme>div:first-child>p{margin:0;color:var(--encre-2);
  font-size:.78rem;line-height:1.5}
.etudes-territoriales-actions{display:flex;flex:none;flex-wrap:wrap;gap:8px}
.etudes-territoriales-contenu{min-height:160px}
.etudes-territoriales-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.etude-territoriale{display:grid;gap:13px;padding:16px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-md);background:var(--white)}
.etude-territoriale>header,.etude-territoriale>footer{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.etude-territoriale h3{margin:0 0 3px;font-size:1rem;letter-spacing:-.02em}
.etude-territoriale p{margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.4}
.etude-detail-compteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
.etude-detail-compteurs>div{display:grid;gap:2px;padding:9px 10px;
  border-radius:var(--r-xs);background:var(--surface-creuse)}
.etude-detail-compteurs dt{color:var(--encre-3);font-size:.75rem;
  font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.etude-detail-compteurs dd{margin:0;color:var(--evergreen);font-size:1.05rem;font-weight:900}
/* ── L'ENTONNOIR D'UNE ETUDE ─────────────────────────────────────────────
   Les couleurs du cadrage, une par niveau de preuve : bleu recense, pollen
   potentiel geometrique, turquoise prequalifie, vert simule ou verifie.
   Le rouge n'y figure pas — il est reserve aux erreurs et aux suppressions.

   UNE COULEUR N'EST JAMAIS SEULE A PORTER L'INFORMATION : chaque etage garde
   son libelle, son etat ecrit (« calcule » / « non calcule ») et sa part en
   pourcentage. Un etage inconnu se decolore et s'ecrit en pointilles, pour
   que l'absence se VOIE sans dependre d'une teinte. */
.etude-entonnoir{display:grid;gap:5px;margin:0}
.etude-entonnoir-etage{display:grid;grid-template-columns:minmax(96px,auto) auto 1fr auto;
  gap:9px;align-items:center;padding:7px 10px;border-radius:var(--r-xs);
  background:var(--surface-creuse)}
.etude-entonnoir-etage dt{margin:0;color:var(--encre-3);font-size:.75rem;
  font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.etude-entonnoir-etage dd{margin:0;color:var(--evergreen);font-size:1.05rem;font-weight:900}
.etude-entonnoir-etage dd small{color:var(--encre-3);font-size:.75rem;font-weight:700}
.etude-entonnoir-barre{height:7px;border-radius:99px;background:rgba(12,29,21,.07);overflow:hidden}
.etude-entonnoir-barre span{display:block;height:100%;border-radius:99px;background:var(--encre-3);
  transition:width .3s ease}
.etude-entonnoir-part{color:var(--encre-2);font-size:.75rem;font-weight:800}
.etude-entonnoir-etage--recense .etude-entonnoir-barre span{background:#3b6fb6}
.etude-entonnoir-etage--potentiel .etude-entonnoir-barre span{background:var(--pollen)}
.etude-entonnoir-etage--prequalifie .etude-entonnoir-barre span{background:var(--teal)}
.etude-entonnoir-etage--simule .etude-entonnoir-barre span,
.etude-entonnoir-etage--verifie .etude-entonnoir-barre span{background:var(--evergreen)}
/* L'ABSENCE SE VOIT SANS COULEUR : le tiret, le mot, et le trait en
   pointilles disent la meme chose de trois facons. */
.etude-entonnoir-etage.est-inconnu{background:transparent;
  border:1px dashed var(--trait)}
.etude-entonnoir-etage.est-inconnu dd{color:var(--encre-3);font-weight:800}
.etude-entonnoir-etage.est-inconnu .etude-entonnoir-barre{background:transparent;
  border:1px dashed var(--trait)}
/* Le detail du jalon, sous la barre de progression : ce que l'ouvrier a
   reellement rapporte, pas une phrase d'ambiance. */
.etude-territoriale-jalon-detail{margin:3px 0 0;color:var(--encre-3);
  font-size:.75rem;font-style:italic}
@media(max-width:620px){
  .etude-entonnoir-etage{grid-template-columns:1fr auto;row-gap:4px}
  .etude-entonnoir-barre{grid-column:1/-1}
}
.etude-territoriale-progression{display:grid;grid-template-columns:auto minmax(90px,1fr) auto;gap:9px;align-items:center;
  color:var(--encre-2);font-size:.75rem}
.etude-territoriale-progression progress{width:100%;height:8px;accent-color:var(--pollen)}
.etude-territoriale>footer{align-items:center;padding-top:2px}.etude-territoriale>footer small{color:var(--encre-3);font-size:.75rem}
.etude-territoriale-forme{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(360px,1.2fr) auto;gap:16px;
  align-items:end;padding:18px;border:1px solid rgba(15,156,135,.28);border-radius:var(--r-md);background:rgba(15,156,135,.055)}
.etude-territoriale-forme h3{margin:3px 0 5px;font-size:1.05rem}
/* LA COMMUNE PREND LA LARGE COLONNE (31/08). Les proportions dataient du
   champ « code INSEE » : cinq caracteres tenaient dans 150 px, et le
   segment prenait le reste. Le champ porte desormais « Bordeaux
   (Gironde) · 33063 » — vingt-six caracteres dans 166 px mesures, soit
   une valeur qu'on ne peut pas relire apres l'avoir choisie. */
/* LES ETIQUETTES SE CALENT EN HAUT, elles ne s'etirent pas. Sans cela la
   plus haute des deux — celle qui porte un texte d'aide sur deux lignes —
   impose sa hauteur a l'autre, et la liste deroulante du segment se retrouve
   etire a 74 px a cote d'une saisie de 46. Mesure du 31/08. */
.etude-territoriale-champs{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(180px,.9fr);gap:9px;align-items:start}
.etude-territoriale-champs label{display:grid;gap:5px;color:var(--encre-3);font-size:.7rem;font-weight:850;
  letter-spacing:.04em;text-transform:uppercase}
/* LA CHAINE DE `:not()` EST RECOPIEE, ET C'EST LA SEULE RAISON DE SON
   EXISTENCE ICI. `.app-scene input:not([type=checkbox]):not([type=radio])
   :not([type=range])` pese (0,4,1) ; `.etude-territoriale-champs input` ne
   pesait que (0,1,1) et perdait. Le `min-height:44px` etait donc MORT sur
   ordinateur depuis toujours : mesure du 31/08, la saisie rendait 38 px a
   cote d'un `select` de 44 — deux controles de hauteurs differentes sur la
   meme ligne. A egalite de poids, c'est l'ordre du fichier qui tranche, et
   cette regle vient apres. */
.etude-territoriale-champs input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.etude-territoriale-champs select{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;
  /* LA HAUTEUR DE LIGNE EST POSEE, sinon les deux controles ne font pas
     la meme hauteur : la saisie herite du 1,6 du corps de page — 25,6 px
     de ligne, donc 46 px au total — quand la liste deroulante garde son
     `normal` et s'arrete au plancher de 44. Deux pixels, cote a cote. */
  line-height:1.25}
.etude-territoriale-champs .champ-aide{color:var(--encre-3);font-size:.75rem;font-weight:500;letter-spacing:0;text-transform:none}
/* CE QUE L'ANNUAIRE REPOND. Deux tons, parce que « aucune commune » et
   « l'annuaire ne repond pas » demandent deux gestes opposes : corriger sa
   frappe, ou attendre. Le plancher typographique du depot est .75rem. */
.etude-commune-etat{grid-column:1/-1;margin:0;color:var(--encre-3);font-size:.75rem;font-weight:600}
.etude-commune-etat.est-erreur{color:var(--tangerine-ink);font-weight:800}
.etude-territoriale-forme-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.etude-detail{display:grid;gap:14px}.etude-detail-retour{width:max-content;color:var(--evergreen);font-size:.76rem;font-weight:800;text-decoration:none}
.etude-detail-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px;
  border-radius:var(--r-md);background:var(--evergreen);color:var(--white)}
.etude-detail-tete>div>span,.etude-detail-tete p{color:var(--clair-2)}.etude-detail-tete h2{color:var(--white)}
.etude-detail-tete p{margin:0;font-size:.75rem}.etude-detail-tete .jeton{background:rgba(255,255,255,.12);color:var(--white)}
.etude-detail-compteurs{grid-template-columns:repeat(5,minmax(0,1fr))}
/* ── ECRAN 4 : LA CARTE DE POTENTIEL ───────────────────────────────────
   Bandeau, filtres, liste, fiche laterale. Les couleurs d'etat suivent la
   table du cadrage -- bleu recense, pollen potentiel geometrique, turquoise
   prequalifie, vert simule ou verifie -- et AUCUNE ne porte seule
   l'information : chaque etat garde son libelle ecrit. */
.etude-potentiel{display:grid;gap:12px;padding:18px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-md);background:var(--white)}
.etude-potentiel-tete h3{margin:2px 0 0;font-size:1.05rem}
.etude-bandeau{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.etude-bandeau>div{padding:9px 11px;border-radius:var(--r-xs);background:rgba(12,29,21,.04)}
.etude-bandeau dt{color:var(--encre-3);font-size:.7rem;font-weight:850;
  letter-spacing:.05em;text-transform:uppercase}
.etude-bandeau dd{margin:2px 0 0;color:var(--evergreen);font-size:.9rem;font-weight:800}
/* L'INCONNU SE VOIT SANS COULEUR : le mot est ecrit, et le trait pointille
   le redit a qui ne distingue pas les gris. */
.etude-bandeau dd.est-inconnu,.etude-fiche dd.est-inconnu{color:var(--encre-3);font-weight:600;font-style:italic}

.etude-filtres{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;padding:12px;
  border:1px dashed rgba(12,29,21,.18);border-radius:var(--r-xs)}
.etude-filtres fieldset{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;border:0}
.etude-filtres legend,.etude-filtres label>span:first-child{color:var(--encre-3);font-size:.7rem;
  font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.etude-filtre-case{display:inline-flex;gap:6px;align-items:center;min-height:44px;
  color:var(--evergreen);font-size:.78rem;font-weight:700}
.etude-filtre-case input{width:18px;height:18px;min-height:0;accent-color:var(--evergreen)}
.etude-filtre-seuil,.etude-filtre-crm{display:grid;gap:4px}
.etude-filtre-seuil input{min-height:44px;accent-color:var(--pollen)}
.etude-filtre-seuil output{color:var(--evergreen);font-size:.78rem;font-weight:800}
.etude-filtres-compte{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;
  color:var(--encre-2);font-size:.78rem}
.etude-filtres-compte strong{color:var(--evergreen);font-size:.95rem}
.etude-filtres-compte em{font-style:normal}

/* ── LA CARTE DE POTENTIEL ─────────────────────────────────────────────
   Tuiles IGN posees en absolu, marqueurs par-dessus. Le cadre ROGNE : les
   tuiles debordent volontiers de la vue, et sans `overflow:hidden` elles
   pousseraient la page entiere. */
.etude-carte{display:grid;gap:8px}
.etude-carte-vue{position:relative;height:340px;overflow:hidden;
  border:1px solid rgba(12,29,21,.16);border-radius:var(--r-xs);
  background:var(--eggshell-deep);cursor:grab;touch-action:none}
.etude-carte-vue.est-glisse{cursor:grabbing}
.carte-fond,.carte-points{position:absolute;inset:0}
.carte-fond img{position:absolute;width:257px;height:257px;
  /* +1 px de recouvrement : sans lui un lisere clair apparait entre tuiles. */
  user-select:none;pointer-events:none}
/* Les points recoivent le clic, le calque non : glisser doit marcher entre
   deux marqueurs. */
.carte-points{pointer-events:none}
.carte-point{position:absolute;width:18px;height:18px;padding:0;
  /* Le point est POSE sur sa coordonnee : on le recentre sur elle. */
  transform:translate(-50%,-50%);
  border:2px solid var(--white);border-radius:999px;
  box-shadow:0 1px 3px rgba(12,29,21,.45);cursor:pointer;pointer-events:auto}
/* LA CIBLE TACTILE FAIT 44 px SANS GROSSIR LE POINT. Un disque de 44 px
   masquerait ses voisins dans une rue serree ; la zone cliquable, elle,
   n'a pas besoin d'etre visible. */
.carte-point::after{content:"";position:absolute;inset:-13px}
.carte-point.est-choisi{width:26px;height:26px;border-width:3px;
  box-shadow:0 0 0 3px var(--evergreen),0 2px 6px rgba(12,29,21,.5);z-index:2}
.carte-credit{position:absolute;right:6px;bottom:4px;margin:0;padding:2px 6px;
  border-radius:var(--r-xs);background:rgba(255,253,244,.82);
  color:var(--encre-2);font-size:.75rem;letter-spacing:.01em}
.etude-carte-outils{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.etude-carte-compte{color:var(--encre-2);font-size:.75rem}
.etude-carte-compte em{font-style:normal}
.carte-absente{margin:0;padding:12px;border:1px dashed rgba(12,29,21,.2);
  border-radius:var(--r-xs);color:var(--encre-3);font-size:.75rem;font-style:italic}

@media (prefers-reduced-motion:reduce){
  .carte-point{transition:none}
}
.etude-potentiel-corps{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:14px;align-items:start}
.etude-candidats{display:grid;gap:6px;max-height:420px;overflow-y:auto;margin:0;padding:0;list-style:none}
.etude-candidat{display:grid;grid-template-columns:auto 1fr auto;gap:4px 10px;width:100%;
  min-height:44px;padding:9px 11px;border:1.5px solid rgba(12,29,21,.13);border-radius:var(--r-xs);
  background:var(--white);color:var(--evergreen);font:inherit;text-align:left;cursor:pointer}
.etude-candidat:hover{border-color:rgba(12,29,21,.3)}
.etude-candidat.est-choisi{border-color:var(--evergreen);background:rgba(12,29,21,.045)}
.etude-candidat strong{grid-column:2;font-size:.85rem}
.etude-candidat small{grid-column:2;color:var(--encre-3);font-size:.75rem}
.etude-candidat-preuve{grid-row:1/3;align-self:center;padding:3px 7px;border-radius:999px;
  font-size:.7rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.etude-candidat-score{grid-row:1/3;align-self:center;font-size:.95rem;font-weight:850;
  font-variant-numeric:tabular-nums}
.etude-candidat-score.est-inconnu{color:var(--encre-3);font-weight:600}

/* La table du cadrage. Le ROUGE n'y figure pas : il reste reserve aux
   erreurs et aux suppressions. */
.etude-preuve--territoire{background:rgba(59,111,182,.14);color:#2c5487}
.etude-preuve--prequalifie{background:rgba(15,156,135,.16);color:#0b6d5e}
.etude-preuve--simule,.etude-preuve--verifie,.etude-preuve--atteste{
  background:rgba(12,29,21,.1);color:var(--evergreen)}
.etude-preuve--aucun{background:rgba(12,29,21,.06);color:var(--encre-3)}

.etude-potentiel-fiche{position:sticky;top:8px}
.etude-fiche{display:grid;gap:10px;padding:14px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-xs);background:rgba(12,29,21,.03)}
.etude-fiche header>span{display:inline-block;padding:3px 7px;border-radius:999px;
  font-size:.7rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}
.etude-fiche h4{margin:6px 0 2px;font-size:1rem}
.etude-fiche header p{margin:0;color:var(--encre-3);font-size:.75rem}
.etude-fiche dl{display:grid;gap:6px;margin:0}
.etude-fiche dl>div{display:flex;justify-content:space-between;gap:10px}
.etude-fiche dt{color:var(--encre-3);font-size:.72rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.etude-fiche dd{margin:0;color:var(--evergreen);font-size:.82rem;font-weight:800;
  font-variant-numeric:tabular-nums}
/* LA MESURE QUI A FAIT ENTRER LE BATIMENT DANS LA LISTE. Elle se lit avant
   les raisons : c'est un chiffre avec son unite, pas un motif. */
.etude-fiche-mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:8px;margin:0;padding:8px 10px;border-radius:var(--r-xs);background:rgba(12,29,21,.05)}
.etude-fiche-mesures dt{color:var(--encre-3);font-size:.72rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}
.etude-fiche-mesures dd{margin:1px 0 0;color:var(--evergreen);font-size:.85rem;
  font-weight:850;font-variant-numeric:tabular-nums}
.etude-fiche-raisons{display:grid;gap:3px;margin:0;padding-left:18px;
  color:var(--encre-2);font-size:.75rem}
.etude-fiche-crm.est-present{margin:0;color:var(--evergreen);font-size:.78rem;font-weight:800}
.etude-potentiel-note{margin:0;color:var(--encre-3);font-size:.75rem;font-style:italic}

@media (max-width:860px){
  .etude-potentiel-corps{grid-template-columns:minmax(0,1fr)}
  .etude-potentiel-fiche{position:static}
  .etude-candidats{max-height:none}
}
.etude-detail-sources{margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.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:.7rem;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:.7rem;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:.75rem;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:.75rem;font-weight:950;letter-spacing:.08em}
.marche-niveau header>small{overflow:hidden;color:var(--encre-3);font-size:.75rem;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:.75rem}
.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:.75rem;font-weight:800}
.marche-niveau>small{margin-top:5px;color:var(--encre-2);font-size:.75rem;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:.75rem;font-weight:850}
.marche-methode>p{margin:9px 0 0;color:var(--encre-2);font-size:.75rem;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:.75rem;font-weight:800}.marche-methode dd{margin:0;font-size:.75rem;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:.7rem;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:.75rem;line-height:1.35}
.marche-sources{margin:0 0 12px;color:var(--encre-2);font-size:.75rem;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:.75rem;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:.7rem;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:.7rem;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:.75rem;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:.75rem;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}
/* La fiche etait une grille A CINQ COLONNES, taillee pour l'ancien balisage
   plat : titre | etape | action | echeance | bouton. La fiche refaite a un
   en-tete, une grille de champs, un pied et deux pliants — ces blocs se
   retrouvaient distribues dans les cinq colonnes, et la lecture s'effondrait.
   C'est desormais une PILE : chaque bloc prend sa largeur, et c'est la grille
   d'edition interne qui repartit les champs. */
.crm-prospect{display:block;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:.75rem;line-height:1.4}
.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:.7rem;font-weight:850;letter-spacing:.04em;text-transform:uppercase}

@media(max-width:980px){
  .etudes-territoriales-liste{grid-template-columns:1fr}
  .etude-territoriale-forme{grid-template-columns:1fr}.etude-territoriale-forme-actions{justify-content:flex-start}
  .etude-detail-compteurs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .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}
  /* La fiche est une pile : rien a reorganiser en petite largeur. */
}
@media(max-width:700px){
  .etudes-territoriales-tete,.etude-detail-tete{display:grid}.etudes-territoriales-actions{width:100%}
  .etudes-territoriales-actions .button{flex:1}.etude-territoriale-champs{grid-template-columns:1fr}
  .etude-territoriale-forme-actions{display:grid;grid-template-columns:1fr}.etude-territoriale-forme-actions .button{width:100%}
  .etude-detail-compteurs{grid-template-columns:1fr 1fr}
  .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){.etude-detail-compteurs{grid-template-columns:1fr}.etude-territoriale>footer{display:grid}.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:.7rem;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:.7rem;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:.7rem;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:.75rem}
.admin-priorite span{min-width:0;font-size:.75rem;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:.7rem;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:.75rem;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}
/* Le pipeline se replie : une LIGNE par projet, pas une carte.

   La grille de cartes affichait tous les outils de tous les projets en
   permanence — emettre, planifier, receptionner, verifier — y compris pour
   les projets qui n'attendent rien. Passe une dizaine de dossiers, c'etait un
   mur. Une ligne par projet, qui s'ouvre au clic, et le resume porte la seule
   chose qui decide d'ouvrir : ce que Kelveen doit a ce projet.

   <details> natif : l'etat d'ouverture, le clavier et le lecteur d'ecran
   viennent avec, sans une ligne de JavaScript. Meme choix que la FAQ d'aide
   et que le classement des facades. */
.admin-pipeline{grid-template-columns:1fr;gap:7px}
.admin-pipeline>.espace-carte{padding:0;border-radius:var(--r-sm);background:var(--surface-creuse);overflow:hidden}
.admin-projet-carte{display:block}
.admin-projet-resume{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,13rem) 16px;
  align-items:center;gap:12px;padding:11px 13px;cursor:pointer;list-style:none}
.admin-projet-resume::-webkit-details-marker{display:none}
.admin-projet-resume:hover{background:rgba(255,206,59,.12)}
.admin-projet-carte:focus-within>.admin-projet-resume{background:rgba(255,206,59,.12)}
.admin-projet-resume::after{content:"›";justify-self:end;color:var(--encre-3);font-weight:800;
  transform:rotate(90deg);transition:transform .15s ease}
.admin-projet-carte[open]>.admin-projet-resume{border-bottom:1px solid rgba(12,29,21,.1)}
.admin-projet-carte[open]>.admin-projet-resume::after{transform:rotate(270deg)}
.admin-projet-titre{min-width:0}
.admin-projet-titre strong{display:block;font-size:.9rem;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --encre-3 tombe a 2,80:1 sur le fond creme — sous le seuil de 4,5:1 pour du
   petit texte, et c'est ici le NOM DU CLIENT, pas une decoration. --encre-2
   tient 4,61:1. */
.admin-projet-titre small{display:block;color:var(--encre-2);font-size:.75rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-projet-jeton{flex:none;padding:4px 7px;border-radius:var(--r-etat);background:rgba(255,206,59,.18);
  color:#715900;font-size:.7rem;font-weight:800;text-transform:uppercase;white-space:nowrap}
/* Ce qui est DU se lit ; ce qui attend le client s'efface. La hierarchie tient
   au contraste et a la graisse, pas a la couleur seule — un daltonien lit la
   meme difference. Mesure sur le fond creme : 14,59:1 contre 4,61:1. */
.admin-projet-du{min-width:0;color:var(--evergreen);font-size:.75rem;font-weight:750;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-projet-du--attente{color:var(--encre-2);font-weight:600}
.admin-projet-meta{margin:0;padding:11px 13px 0;color:var(--encre-2);font-size:.75rem;overflow-wrap:anywhere}

/* Les filtres du pipeline, et le compteur qui dit ce qu'on ne voit pas. */
.admin-filtres{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px;
  align-items:end;margin:14px 0 4px}
.admin-filtres label{display:grid;gap:4px;min-width:0}
.admin-filtres label>span{color:var(--encre-3);font-size:.7rem;font-weight:850;
  letter-spacing:.07em;text-transform:uppercase}
.admin-filtres input,.admin-filtres select{padding:9px 11px;border:1.5px solid var(--trait);
  border-radius:var(--r-xs);background:var(--white);font:inherit;font-size:.8rem}
.admin-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-top:11px;color:var(--encre-2);font-size:.75rem}
.admin-pagination-boutons{display:flex;align-items:center;gap:9px}
.admin-pagination-boutons .button{min-height:32px;padding:5px 11px;font-size:.75rem}

@media(max-width:720px){
  .admin-projet-resume{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"titre jeton" "du du";gap:8px 10px}
  .admin-projet-titre{grid-area:titre}
  .admin-projet-jeton{grid-area:jeton}
  .admin-projet-du{grid-area:du;white-space:normal}
  .admin-projet-resume::after{display:none}
  .admin-filtres{grid-template-columns:1fr}
  .admin-filtres input,.admin-filtres select{min-height:44px;font-size:16px}
}
.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:.7rem;
  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:.75rem;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:.7rem;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:.75rem;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:.75rem;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:.7rem!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:.75rem;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
   le « productible » Kelveen, les deux monnaies et le retour. */
.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:.75rem;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:.7rem;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(4,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:.7rem;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:.7rem;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:.7rem;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:.75rem}
.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}

/* --- Supprimer un projet : une croix rouge dans le coin (11/09) ----------
   « Le bouton supprimer peut juste être une croix rouge. Beaucoup plus
   simple. » Il était un bouton plein, corbeille et libellé : le plus gros
   objet de la carte après son titre, pour un geste rare. La croix garde le
   rouge et le coin ; le nom complet (« Supprimer ce projet — … ») reste pour
   le lecteur d'écran et au survol, et la confirmation rattrape un geste
   manqué. Toujours HORS du lien : un <button> dans un <a> est invalide.
   32 px à la souris, 44 au doigt (règle `pointer:coarse` commune, plus bas). */
.repertoire-item{position:relative}
.repertoire-item .rep-tete{padding-right:40px}
.rep-suppr{position:absolute;top:8px;right:8px;z-index:1;
  justify-content:center;width:32px;min-width:32px;height:32px;padding:0;
  border:1px solid transparent;border-radius:50%;background:transparent;
  color:var(--tangerine-ink,#a52f20);cursor:pointer;transition:background .12s ease,border-color .12s ease}
.rep-suppr svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.rep-suppr:hover{background:rgba(165,47,32,.1);border-color:rgba(165,47,32,.35)}
.rep-suppr:focus-visible{outline:none;box-shadow:var(--anneau)}

@media(max-width:860px){
  .rep-suppr{top:4px;right:4px}
}

/* Le rôle d'un compte, modifiable depuis le cockpit.
   C'est le seul endroit qui fait entrer un commercial dans l'équipe : sans
   lui, `users.role` existait en base sans qu'aucun geste puisse le changer. */
.admin-role{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin-top:10px;
  padding-top:10px;border-top:1px solid rgba(12,29,21,.1)}
.admin-role label{display:grid;gap:3px;flex:1 1 8rem;min-width:0;
  color:var(--encre-2);font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.admin-role select{padding:8px 10px;border:1.5px solid var(--trait);border-radius:var(--r-xs);
  background:var(--white);font:inherit;font-size:.78rem;text-transform:none;letter-spacing:0}
.admin-role .button{min-height:34px;padding:6px 12px;font-size:.75rem}

/* Le pont vers le parcours client, dans la fiche prospect. */
.crm-pont{align-self:end;font-size:.76rem;font-weight:750;text-decoration:none;white-space:nowrap}

/* --- L'objectif, et la proposition qui en découle -------------------------
   Le bloc est posé AVANT le classement complet : on répond d'abord à « que
   voulez-vous ? », le tableau détaillé reste dessous pour qui veut vérifier.

   Deux éléments ne sont pas décoratifs et ne doivent jamais être discrets :
   la phrase « ce que cet objectif ne regarde pas » (--encre-2, 4,61:1 sur le
   fond crème) et l'avertissement d'un objectif non simulé (6,41:1). Les
   effacer en gris clair reviendrait à les retirer.                        */
.objectifs{margin:14px 0;padding:15px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-md);background:var(--surface-creuse)}
.objectifs-tete{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px}
.objectifs-tete span{display:block;color:var(--encre-2);font-size:.7rem;font-weight:850;
  letter-spacing:.07em;text-transform:uppercase}
.objectifs-tete h4{margin:2px 0 0;font-size:1rem;letter-spacing:-.015em}
.objectifs-choix select{padding:9px 11px;border:1.5px solid var(--trait);border-radius:var(--r-xs);
  background:var(--white);font:inherit;font-size:.8rem;max-width:100%}
.objectifs-validation{margin:0 0 10px;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.objectifs-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.objectifs-liste li{border:1px solid transparent;border-radius:var(--r-xs);background:var(--white);font-size:.84rem}
.objectifs-liste li.est-recommandee{border-color:rgba(255,206,59,.75)}
.objectifs-facade{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 10px;cursor:pointer}
.objectifs-facade input{width:19px;height:19px;flex:none}
.objectifs-facade em{padding:2px 6px;border-radius:99px;background:rgba(255,206,59,.22);
  color:#755d00;font-size:.7rem;font-style:normal;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.objectifs-facade span{margin-left:auto;font-weight:750;white-space:nowrap}
.objectifs-facade small{flex-basis:100%;padding-left:27px;color:var(--encre-2);font-size:.75rem}
.objectifs-monnaies{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin:11px 0 0}
.objectifs-monnaies b{font-size:1rem}
.objectifs-co2{color:#0b6b5c}
.objectifs-monnaies span{color:var(--encre-2);font-size:.75rem}
.objectifs-ignore{margin:11px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.55}
.objectifs-ignore strong{color:var(--evergreen)}
.objectifs-alerte{margin:10px 0 0;padding:9px 11px;border-left:3px solid #8a3c14;
  border-radius:var(--r-xs);background:rgba(138,60,20,.07);color:#8a3c14;font-size:.76rem;line-height:1.5}
.objectifs-note,.objectifs-suite{margin:9px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.55}
.objectifs-vide{margin:12px 0 0;color:var(--encre-2);font-size:.8rem}
.objectifs-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}

@media(max-width:620px){
  .objectifs{padding:13px}
  .objectifs-choix{width:100%}
  .objectifs-choix select{width:100%;min-height:44px;font-size:16px}
  .objectifs-actions .button{width:100%}
  .objectifs-facade span{width:100%;margin-left:27px}
}

/* --- Le studio de projet -------------------------------------------------
   Trois décisions, pas trois écrans : l'objectif, les quatre périmètres,
   puis la qualité de la preuve. La colonne numérotée garde le fil sur grand
   écran et disparaît sur téléphone, où chaque section doit rester compacte. */
.studio{display:grid;gap:12px;margin:14px 0}
.studio-etape{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:16px;
  border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);background:var(--surface-creuse)}
.studio-numero{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;
  background:var(--evergreen);color:var(--pollen);font-size:.8rem;font-weight:900}
.studio-contenu{min-width:0}
.studio-objectifs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.studio-objectif{position:relative;display:grid;align-content:start;gap:5px;min-height:96px;padding:13px;
  border:1.5px solid var(--trait);border-radius:var(--r-sm);background:var(--white);cursor:pointer}
.studio-objectif:hover{border-color:rgba(12,29,21,.42)}
.studio-objectif.est-actif{border-color:#b68b00;background:rgba(255,206,59,.12);box-shadow:inset 0 0 0 1px rgba(182,139,0,.25)}
.studio-objectif input{position:absolute;right:10px;top:10px;width:19px;height:19px}
.studio-objectif strong{padding-right:24px;font-size:.82rem}
.studio-objectif span{color:var(--encre-2);font-size:.75rem;line-height:1.4;text-transform:none;letter-spacing:0}
.studio-contraintes{margin-top:10px;border-top:1px solid rgba(12,29,21,.09)}
.studio-contraintes>summary{display:flex;align-items:center;min-height:44px;padding:8px 0;color:var(--evergreen);
  font-size:.76rem;font-weight:800;cursor:pointer}
.studio-contraintes-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.studio-contraintes-grille label{position:relative;display:grid;gap:4px;min-width:0}
.studio-contraintes-grille label>span{color:var(--encre-2);font-size:.75rem;font-weight:800}
.studio-contraintes-grille input,.studio-contraintes-grille select{width:100%;min-height:44px;padding:9px 42px 9px 10px;
  border:1.5px solid var(--trait);border-radius:var(--r-xs);background:var(--white);font:inherit;font-size:.82rem}
.studio-contraintes-grille label>small{position:absolute;right:10px;bottom:13px;color:var(--encre-2);font-size:.75rem;pointer-events:none}
.studio-contraintes>p{margin:9px 0 3px;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.studio-projets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:14px}
.studio-projet{display:grid;align-content:start;gap:9px;min-width:0;padding:13px;border:1.5px solid var(--trait);
  border-radius:var(--r-sm);background:var(--white)}
.studio-projet.est-actif{border-color:#b68b00;box-shadow:0 4px 18px rgba(12,29,21,.08)}
.studio-projet.est-vide{background:rgba(255,255,255,.48)}
.studio-projet>header{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.studio-projet>header span{font-size:.75rem;font-weight:850}
.studio-projet>header em{padding:3px 6px;border-radius:99px;background:var(--pollen);color:#5f4a00;
  font-size:.7rem;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
.studio-projet-score{font-size:clamp(1.25rem,2.5vw,1.7rem);line-height:1;letter-spacing:-.035em}
.studio-projet>small{color:var(--encre-2);font-size:.75rem}
.studio-projet dl{display:grid;gap:5px;margin:0;padding-top:8px;border-top:1px solid rgba(12,29,21,.08)}
.studio-projet dl>div{display:flex;justify-content:space-between;gap:8px;font-size:.75rem}
.studio-projet dt{color:var(--encre-2)}.studio-projet dd{margin:0;font-weight:800;text-align:right}
.studio-projet .deux-monnaies{display:grid;grid-template-columns:1fr;gap:3px;padding-top:8px;border-top:1px solid rgba(12,29,21,.08)}
.studio-projet .deux-monnaies b{font-size:.78rem}.studio-projet .deux-monnaies small{line-height:1.35}
.studio-projet-couverture,.studio-projet-facades,.studio-projet>p{margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.studio-projet-couverture{font-weight:750}
.studio-projet-facades{min-height:2.9em;color:var(--evergreen);font-weight:700}
.studio-projet .button{align-self:end;width:100%;min-height:44px;padding:8px;font-size:.75rem}
.studio-incertitude{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(13rem,1fr);gap:10px;margin-top:14px}
.studio-plages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.studio-plages article{display:grid;gap:4px;padding:11px;border:1px solid rgba(12,29,21,.1);border-radius:var(--r-xs);background:var(--white)}
.studio-plages span{color:var(--encre-2);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.studio-plages strong{font-size:.85rem;line-height:1.35}
.studio-a-verifier{padding:12px;border-left:3px solid var(--tangerine);border-radius:var(--r-xs);background:rgba(225,103,63,.07)}
.studio-a-verifier>strong{font-size:.76rem}.studio-a-verifier ul{margin:8px 0 0;padding-left:18px}
.studio-a-verifier li,.studio-a-verifier p{margin:3px 0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.studio-validation{display:grid;gap:10px;margin-top:12px;padding:13px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-sm);background:var(--white)}
.studio-validation-tete{display:grid;gap:3px}.studio-validation-tete strong{font-size:.8rem}
.studio-validation-tete span{color:var(--encre-2);font-size:.75rem;line-height:1.45}
.studio-validation-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end}
.studio-validation-nom,.selection-nom-scenario{display:grid;gap:4px;min-width:0;color:var(--encre-2);font-size:.75rem;font-weight:800}
.studio-validation-nom input,.selection-nom-scenario input{width:100%;min-height:44px;padding:9px 10px;border:1.5px solid var(--trait);
  border-radius:var(--r-xs);background:var(--white);font:inherit;font-size:.8rem;color:var(--encre)}
.studio-validation-actions .button{min-height:44px}
.selection-scenario{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:end;flex:1 1 28rem}
.selection-actions .selection-nom-scenario{min-width:0}
.selection-scenario .button{min-height:44px}
.roi-analyse-detail{margin:12px 0;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.roi-analyse-detail>summary{min-height:44px;padding:13px 16px;color:var(--evergreen);font-size:.75rem;font-weight:850;cursor:pointer}
.roi-analyse-detail>summary:hover{background:rgba(12,29,21,.035)}
.roi-analyse-detail-contenu{padding:0 14px 14px}

/* Le studio progressif ne montre qu'une décision à la fois. Les alternatives,
   les hypothèses et l'intervention Kelveen restent disponibles, mais ne
   rivalisent plus avec le projet recommandé et son enregistrement. */
.studio--progressif{gap:10px;margin-bottom:10px}
.studio-pilote,.studio-recommandation,.studio-comparaison,.studio-fiabilite,.studio-validation{
  border:1px solid rgba(12,29,21,.13);border-radius:var(--r-md);background:var(--white)}
.studio-pilote{padding:15px}
.studio-pilote>header span,.studio-recommandation>header>div>span{display:block;color:var(--encre-3);
  font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.studio-pilote>header h4,.studio-recommandation>header h4{margin:3px 0 0;font-size:1.05rem;letter-spacing:-.02em}
.studio--progressif .studio-objectifs{margin-top:11px}
.studio--progressif .studio-objectif{min-height:76px;padding:11px}
.studio--progressif .studio-objectif span{display:-webkit-box;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.studio-vente{display:grid;gap:0;overflow:hidden;border-radius:var(--r-md);box-shadow:0 16px 42px rgba(12,29,21,.1)}
.studio-vente>.studio-recommandation{border-radius:var(--r-md) var(--r-md) 0 0}
.studio-vente>.studio-recommandation:last-child{border-radius:var(--r-md)}
.studio-vente>.studio-engagement{margin:0;border-top:0;border-radius:0 0 var(--r-md) var(--r-md)}
.studio-recommandation{overflow:hidden;border-color:rgba(255,206,59,.72);box-shadow:inset 4px 0 0 var(--pollen);
  background:linear-gradient(145deg,rgba(255,253,244,.96),var(--white) 52%,rgba(15,156,135,.035))}
.studio-recommandation>header{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 18px 10px}
.studio-recommandation>header>div>p{margin:4px 0 0;max-width:64ch;color:var(--encre-2);font-size:.82rem;line-height:1.4}
.studio-qualite{flex:none;padding:5px 8px;border-radius:var(--r-etat);background:rgba(255,206,59,.16);
  color:#715900;font-size:.75rem;font-weight:800}
.studio-vente-chiffres{display:grid;grid-template-columns:minmax(290px,1.5fr) repeat(2,minmax(145px,.75fr));
  gap:9px;padding:10px 18px 16px}
.studio-vente-monnaies,.studio-vente-indicateur{display:grid;align-content:start;gap:6px;min-width:0;padding:14px;
  border:1px solid rgba(12,29,21,.09);border-radius:var(--r-sm);background:rgba(255,255,255,.82)}
.studio-vente-monnaies>span,.studio-vente-indicateur>span,.studio-vente-bilan span{color:var(--encre-3);
  font-size:.7rem;font-weight:850;letter-spacing:.045em;text-transform:uppercase}
.studio-recommandation .studio-vente-monnaies .deux-monnaies{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:7px;margin:0}
.studio-recommandation .studio-vente-monnaies .deux-monnaies b{font-size:clamp(1.25rem,2.4vw,1.85rem);line-height:1.05;letter-spacing:-.035em}
.studio-recommandation .studio-vente-monnaies .deux-monnaies small{grid-column:1/-1;margin-top:2px;font-size:.75rem;line-height:1.4}
.studio-vente-indicateur strong{margin-top:3px;color:var(--evergreen);font-size:clamp(1.2rem,2.4vw,1.75rem);line-height:1;letter-spacing:-.035em}
.studio-vente-indicateur small{margin-top:auto;color:var(--encre-2);font-size:.75rem;line-height:1.4}
.studio-vente-indicateur--principal{border-color:rgba(255,206,59,.5);background:rgba(255,206,59,.1)}
.studio-vente-bilan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 18px 14px;
  overflow:hidden;border:1px solid rgba(12,29,21,.09);border-radius:var(--r-sm);background:var(--surface-creuse)}
.studio-vente-bilan p{display:grid;gap:3px;min-width:0;margin:0;padding:11px 13px;border-left:1px solid rgba(12,29,21,.08)}
.studio-vente-bilan p:first-child{border-left:0}
/* LES FIGURES DE LA PAGE DE VENTE (27/08). Deux colonnes sur ordinateur,
   une seule au telephone. Le style des figures elles-memes vit dans
   `atelier-moteur.css`, chargee avec `moteur-graphes.js` : elles n'ont pas
   deux vocabulaires visuels, elles ont le meme. */
.studio-vente-figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;margin:4px 18px 16px}
.studio-vente-figures>*{min-width:0}
@media (max-width:760px){.studio-vente-figures{grid-template-columns:1fr;margin:4px 12px 14px}}
.studio-vente-bilan strong{color:var(--evergreen);font-size:.9rem;line-height:1.25}
.studio-vente-bilan small{color:var(--encre-3);font-size:.75rem;line-height:1.4}.studio-vente-bilan .carbone-produit{margin:0}
.studio-recommandation>.studio-engagement{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin:0 18px 16px;padding:14px 16px;
  border-color:rgba(15,156,135,.28);border-radius:var(--r-sm);background:rgba(15,156,135,.07)}
.studio-recommandation>.studio-engagement .objectifs-actions{justify-content:flex-end}.studio-recommandation>.studio-engagement .button--pollen{min-width:240px}
.studio-vente-perimetre{border-top:1px solid rgba(12,29,21,.08);background:var(--surface-creuse)}
.studio-vente-perimetre>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:14px 18px 8px}
.studio-vente-perimetre>header>div{display:grid;gap:2px}.studio-vente-perimetre>header span{color:var(--encre-3);font-size:.72rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.studio-vente-perimetre h5{margin:0;color:var(--evergreen);font-size:.95rem}.studio-vente-perimetre>header p{max-width:420px;margin:0;color:var(--encre-2);font-size:.78rem;line-height:1.4;text-align:right}
.studio-vente-perimetre-corps{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(280px,1.1fr);gap:14px;padding:8px 18px 16px}
.studio-vente-plan{min-width:0;padding:8px;border:1px solid rgba(12,29,21,.09);border-radius:var(--r-sm);background:var(--white)}
.studio-vente-plan .fac-plan svg{height:180px;border:0;background:transparent}.studio-vente-perimetre ul{display:grid;align-content:start;gap:6px;margin:0;padding:0;list-style:none}
.studio-vente-perimetre li{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border:1px solid rgba(12,29,21,.08);border-radius:var(--r-xs);background:var(--white)}
.studio-vente-perimetre li>span{display:grid;gap:2px}.studio-vente-perimetre li strong{font-size:.84rem}.studio-vente-perimetre li small{color:var(--encre-2);font-size:.76rem}
.studio-recommandation-a-verifier{margin:0;padding:10px 18px;border-top:1px solid rgba(12,29,21,.08);
  color:var(--encre-2);font-size:.8rem;line-height:1.45}
.studio-recommandation-a-verifier strong{color:var(--evergreen)}
.studio-comparaison>summary,.studio-fiabilite>summary,.studio-pilote>summary,.studio-validation>summary{display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:50px;padding:10px 15px;color:var(--evergreen);cursor:pointer;list-style:none}
.studio-comparaison>summary::-webkit-details-marker,.studio-fiabilite>summary::-webkit-details-marker,
.studio-pilote>summary::-webkit-details-marker,.studio-validation>summary::-webkit-details-marker{display:none}
.studio-comparaison>summary::after,.studio-fiabilite>summary::after,.studio-pilote>summary::after,.studio-validation>summary::after{content:"＋";font-weight:900}
.studio-comparaison[open]>summary::after,.studio-fiabilite[open]>summary::after,.studio-pilote[open]>summary::after,.studio-validation[open]>summary::after{content:"−"}
.studio-comparaison>summary span,.studio-fiabilite>summary span{margin-left:auto;color:var(--encre-3);font-size:.75rem}
.studio--progressif .studio-projets{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0 14px 14px}
.studio-fiabilite-corps{padding:0 14px 14px}
.studio-fiabilite-corps>p{margin:0 0 10px;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.studio-fiabilite .studio-incertitude{margin-top:0}
.studio-perimetre{margin-top:10px;border-top:1px solid rgba(12,29,21,.1)}
.studio-perimetre>summary{min-height:44px;padding:9px 0;color:var(--evergreen);font-size:.76rem;font-weight:800;cursor:pointer}
.studio-perimetre>p{margin:0 0 8px;color:var(--encre-2);font-size:.75rem}
.studio--progressif .studio-validation{margin-top:0;border-color:rgba(255,206,59,.7);background:rgba(255,206,59,.08)}

/* Deux portes, pas neuf. La décision reste visible ; ces deux pliants portent
   uniquement les questions secondaires « pourquoi ? » et « et si ? ». */
.studio-comprendre,.studio-comparer{overflow:hidden;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--white)}
.studio-comprendre>summary,.studio-comparer>summary{display:flex;align-items:center;gap:14px;min-height:62px;padding:12px 16px;
  color:var(--evergreen);cursor:pointer;list-style:none}
.studio-comprendre>summary::-webkit-details-marker,.studio-comparer>summary::-webkit-details-marker{display:none}
.studio-comprendre>summary>span,.studio-comparer>summary>span{display:grid;gap:3px}
.studio-comprendre>summary strong,.studio-comparer>summary strong{font-size:.94rem}
.studio-comprendre>summary small,.studio-comparer>summary small{color:var(--encre-2);font-size:.76rem;line-height:1.4}
.studio-comprendre>summary::after,.studio-comparer>summary::after{content:"＋";margin-left:auto;font-weight:900}
.studio-comprendre[open]>summary::after,.studio-comparer[open]>summary::after{content:"−"}
.studio-comprendre-corps,.studio-comparer-corps{display:grid;gap:18px;padding:16px;border-top:1px solid var(--trait)}
.studio-comprendre-corps>.studio-vente-figures{margin:0}
.studio-sous-titre{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.studio-sous-titre>strong{color:var(--evergreen);font-size:.88rem}
.studio-sous-titre>span{max-width:58ch;color:var(--encre-2);font-size:.76rem;line-height:1.4;text-align:right}
.studio-fiabilite-corps{display:grid;gap:10px;padding:16px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.studio-fiabilite-corps>p{margin:0;color:var(--encre-2);font-size:.76rem;line-height:1.5}
.studio-comprendre [data-studio-classement]{display:grid;gap:12px;padding-top:2px}
.studio-comprendre .roi-decision{margin:0}.studio-comprendre .roi-ecartees{margin:0}
.studio-pilote-corps,.studio-comparaison-corps{display:grid;gap:12px}
.studio-pilote-corps>header{display:grid;gap:3px}.studio-pilote-corps>header strong{font-size:.88rem}
.studio-pilote-corps>header span{color:var(--encre-2);font-size:.76rem;line-height:1.4}
.studio-pilote-corps .studio-objectifs{margin:0}
.studio-contraintes{display:grid;gap:10px;padding:14px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.studio-contraintes h5,.studio-perimetre h5{margin:0;color:var(--evergreen);font-size:.8rem}
.studio-contraintes>p{margin:0;color:var(--encre-2);font-size:.75rem;line-height:1.45}
.studio-comparaison-corps{padding-top:16px;border-top:1px solid var(--trait)}
.studio-comparaison-corps .studio-projets{margin:0;padding:0}
.studio-facteur-commun{margin:0;padding:9px 11px;border-radius:var(--r-xs);background:var(--surface-creuse);
  color:var(--encre-2);font-size:.75rem;line-height:1.45}
.studio-validation{margin:0;padding:14px}.studio-rapport-acces{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 16px;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--surface-creuse)}
.studio-rapport-acces>div{display:grid;gap:3px}.studio-rapport-acces strong{font-size:.86rem}
.studio-rapport-acces span{color:var(--encre-2);font-size:.76rem;line-height:1.4}.studio-rapport-acces .button{flex:none}

@media(max-width:1050px){
  .studio-objectifs,.studio-projets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio--progressif .studio-projets{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .studio-etape{grid-template-columns:1fr;padding:13px}
  .studio-numero{width:28px;height:28px}
  .studio-contraintes-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .studio-incertitude{grid-template-columns:1fr}
  .studio-vente-chiffres{grid-template-columns:1fr 1fr}.studio-vente-monnaies{grid-column:1/-1}
  .studio-vente-bilan{grid-template-columns:1fr}.studio-vente-bilan p{border-left:0;border-top:1px solid rgba(12,29,21,.08)}
  .studio-vente-bilan p:first-child{border-top:0}
  .studio-recommandation>.studio-engagement{grid-template-columns:1fr}.studio-recommandation>.studio-engagement .objectifs-actions{justify-content:start}
  .studio-vente-perimetre-corps{grid-template-columns:1fr}.studio-vente-perimetre>header{align-items:flex-start;flex-direction:column;gap:4px}.studio-vente-perimetre>header p{text-align:left}
  .studio-sous-titre{align-items:flex-start;flex-direction:column;gap:4px}.studio-sous-titre>span{text-align:left}
  .studio-rapport-acces{align-items:stretch;flex-direction:column}.studio-rapport-acces .button{width:100%}
}
@media(max-width:520px){
  .studio-objectifs,.studio-projets,.studio-contraintes-grille,.studio-plages{grid-template-columns:1fr}
  .studio-objectif{min-height:82px}
  .studio-projet-facades{min-height:0}
  .studio .objectifs-facade span{width:100%;margin-left:27px;white-space:normal}
  .studio .objectifs-actions{display:grid;grid-template-columns:1fr}
  .studio .objectifs-actions .button{width:100%}
  .studio-validation-actions{grid-template-columns:1fr}
  .studio-validation-actions .button{width:100%}
  .selection-scenario{grid-template-columns:1fr;width:100%}
  .studio--progressif .studio-projets{grid-template-columns:1fr}
  .studio-recommandation>header{display:grid;padding:14px}
  .studio-qualite{justify-self:start}
  .studio-vente-chiffres{grid-template-columns:1fr 1fr;padding:8px 14px 13px}.studio-vente-monnaies{grid-column:1/-1}
  .studio-recommandation .studio-vente-monnaies .deux-monnaies{grid-template-columns:1fr 1fr}
  .studio-recommandation .studio-vente-monnaies .deux-monnaies small{grid-column:1/-1}
  .studio-vente-bilan{grid-template-columns:1fr;margin:0 14px 12px}
  .studio-vente-bilan p:nth-child(2){border-top:1px solid rgba(12,29,21,.08);border-left:0}
  .studio-recommandation>.studio-engagement{margin:0 14px 14px}.studio-recommandation>.studio-engagement .button--pollen{width:100%;min-width:0}
  .studio-vente-perimetre-corps{padding:8px 14px 14px}.studio-vente-plan .fac-plan svg{height:155px}
  .studio-comparaison>summary span,.studio-fiabilite>summary span{display:none}
}

/* --- Les composants partagés ---------------------------------------------
   Ces trois-là sont les seuls VRAIMENT nouveaux : `etat-vide` et
   `jeton-preuve` existaient déjà plus haut, et les composants servent ces
   classes-là plutôt que d'en introduire des concurrentes. Deux vocabulaires
   visuels pour la même idée, c'est exactement ce que la bibliothèque doit
   empêcher.                                                                */

/* Le jeton d'état générique, pour ce qui n'est pas un niveau de preuve.
   Mesuré sur fond crème : encre 4,61:1, pollen 5,36:1, alerte 6,41:1. */
.jeton{display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-etat);
  background:rgba(12,29,21,.07);color:var(--encre-2);font-size:.7rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.jeton--faire{background:rgba(255,206,59,.2);color:#715900}
.jeton--attente{background:rgba(12,29,21,.07);color:var(--encre-2)}
.jeton--alerte{background:rgba(138,60,20,.1);color:#8a3c14}
.jeton--fait{background:rgba(151,175,154,.32);color:#2c4a3a}

/* LES DEUX MONNAIES. L'euro et le carbone sortent ensemble, et le carbone
   porte son facteur d'émission : c'est l'invariant du produit, rendu
   difficile à enfreindre par distraction. */
.deux-monnaies{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0}
.deux-monnaies b{font-size:1rem}
.deux-monnaies-co2{color:#0b6b5c}
.deux-monnaies small{color:var(--encre-2);font-size:.75rem}
.deux-monnaies span{color:var(--encre-2);font-size:.75rem}

/* La ligne dépliable générique — même geste que le pipeline du cockpit. */
.depliable{border:1px solid rgba(12,29,21,.13);border-radius:var(--r-sm);
  background:var(--surface-creuse);overflow:hidden}
.depliable + .depliable{margin-top:7px}
.depliable-resume{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,12rem) 16px;
  align-items:center;gap:12px;padding:11px 13px;cursor:pointer;list-style:none}
.depliable-resume::-webkit-details-marker{display:none}
.depliable-resume:hover{background:rgba(255,206,59,.12)}
.depliable-resume::after{content:"›";justify-self:end;color:var(--encre-2);font-weight:800;
  transform:rotate(90deg);transition:transform .15s ease}
.depliable[open]>.depliable-resume{border-bottom:1px solid rgba(12,29,21,.1)}
.depliable[open]>.depliable-resume::after{transform:rotate(270deg)}
.depliable-titre{min-width:0}
.depliable-titre strong{display:block;font-size:.9rem;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.depliable-titre small{display:block;color:var(--encre-2);font-size:.75rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.depliable-suite{min-width:0;color:var(--evergreen);font-size:.75rem;font-weight:750;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.depliable-corps{padding:11px 13px}

@media(max-width:720px){
  .depliable-resume{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"titre jeton" "suite suite";gap:8px 10px}
  .depliable-titre{grid-area:titre}
  .depliable-resume>.jeton,.depliable-resume>.jeton-preuve{grid-area:jeton}
  .depliable-suite{grid-area:suite;white-space:normal}
  .depliable-resume::after{display:none}
}

/* --- L'alerte, en trois tons ---------------------------------------------
   Les deux exemplaires trouvés dans espace.js n'étaient PAS le même objet
   écrit deux fois : `.roi-alerte` nuance un résultat (pollen), tandis que
   `.objectifs-alerte` avertit (tangerine, filet à gauche). Le composant garde
   donc les deux, nommés — et n'en fabrique pas un troisième par défaut.

   `nuance` reste le défaut : la plupart de ces messages précisent un chiffre,
   ils n'annoncent pas une panne. Tout mettre en rouge, c'est n'avoir plus de
   rouge quand il en faut vraiment un.

   Contrastes mesurés : nuance 16,21:1, avertissement 6,87:1, danger 6,13:1,
   et le filet 7,67:1 — bien au-delà des 3:1 d'un objet d'interface.        */
.alerte{margin:10px 0 0;padding:9px 11px;border-radius:var(--r-sm);font-size:.8rem;line-height:1.5}
.alerte--nuance{background:rgba(255,206,59,.18);color:var(--evergreen)}
.alerte--avertissement{border-left:3px solid #8a3c14;border-radius:var(--r-xs);
  background:rgba(138,60,20,.07);color:#8a3c14;font-size:.76rem}
.alerte--danger{border-left:3px solid #8a3c14;border-radius:var(--r-xs);
  background:rgba(138,60,20,.14);color:#8a3c14;font-weight:600}
.alerte strong{font-weight:850}

/* ═══ L'ÉCRAN CRM ═════════════════════════════════════════════════════════
   Refait le 19/08. Les patrons d'ergonomie viennent de ce que font les bons
   CRM — la liste est le produit, l'édition se fait en ligne, le kanban montre
   la distribution. Les patrons, pas le code.                              */

.crm-barre{display:grid;gap:11px;margin-bottom:16px}
.crm-filtres{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px;align-items:end}
.crm-filtres label{display:grid;gap:4px;min-width:0}
.crm-filtres label>span{color:var(--encre-2);font-size:.7rem;font-weight:850;
  letter-spacing:.07em;text-transform:uppercase}
.crm-filtres input,.crm-filtres select{padding:9px 11px;border:1.5px solid var(--trait);
  border-radius:var(--r-xs);background:var(--white);font:inherit;font-size:.8rem}
.crm-barre-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.crm-vues{display:flex;gap:6px}
.crm-vues .button{min-height:32px;padding:5px 13px;font-size:.75rem}

/* La création : repliée par défaut. L'écran sert d'abord à travailler ses
   affaires, pas à en créer. */
.crm-creation{margin-bottom:16px;padding:16px;border:1px solid rgba(12,29,21,.14);
  border-radius:var(--r-md);background:var(--surface-creuse)}
.crm-creation h3{margin:0 0 12px;font-size:1rem}
.crm-rgpd-note{margin:11px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.55}

.crm-liste{display:grid;gap:11px}
.crm-prospect-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.crm-prospect-tete h3{margin:0;font-size:1rem;letter-spacing:-.015em}
.crm-prospect-tete p{margin:3px 0 0;color:var(--encre-2);font-size:.75rem;overflow-wrap:anywhere}
.crm-champs{margin-top:12px}
.crm-prospect-pied{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;margin-top:12px}
.crm-prospect-pied small{color:var(--encre-2);font-size:.75rem}
.crm-prospect-actions{display:flex;flex-wrap:wrap;gap:8px}

.crm-conformite,.crm-journal{margin-top:11px}
.crm-conformite>summary,.crm-journal>summary{padding:7px 0;color:var(--encre-2);
  font-size:.75rem;font-weight:750;cursor:pointer}

/* LE JOURNAL. Une ligne par fait, du plus récent au plus ancien. On n'efface
   jamais une trace commerciale : il n'y a pas de bouton de suppression, et
   c'est voulu. */
.crm-fil{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.crm-fil li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:8px 10px;
  border-left:2px solid rgba(12,29,21,.13);background:var(--white);font-size:.8rem}
.crm-fil time{color:var(--encre-2);font-size:.75rem;font-variant-numeric:tabular-nums}
.crm-fil span{flex:1 1 12rem;min-width:0;overflow-wrap:anywhere}
.crm-fil small{color:var(--encre-2);font-size:.75rem}
.crm-journal-vide{margin:0 0 12px;color:var(--encre-2);font-size:.78rem}
.crm-journal-ajout{display:grid;gap:9px;padding:11px;border-radius:var(--r-xs);
  background:var(--surface-creuse)}
.crm-journal-ajout label{display:grid;gap:4px;font-size:.75rem;font-weight:750;color:var(--encre-2)}
.crm-journal-ajout select,.crm-journal-ajout textarea{padding:8px 10px;border:1.5px solid var(--trait);
  border-radius:var(--r-xs);background:var(--white);font:inherit;font-size:.8rem}
.crm-journal-ajout textarea{min-height:64px;resize:vertical}

/* LE KANBAN. Il défile horizontalement DANS SON CADRE : le corps de la page
   ne doit jamais défiler de côté. Le glisser-déposer n'est pas le seul
   chemin — la liste d'étapes de chaque fiche reste utilisable au clavier. */
.crm-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);
  gap:10px;overflow-x:auto;padding-bottom:8px}
.crm-colonne{display:flex;flex-direction:column;min-width:0;border-radius:var(--r-sm);
  background:var(--surface-creuse)}
.crm-colonne>header{padding:10px 12px;border-bottom:1px solid rgba(12,29,21,.1)}
.crm-colonne>header h4{margin:0;font-size:.78rem}
.crm-colonne>header span{color:var(--encre-2);font-size:.75rem;font-variant-numeric:tabular-nums}
.crm-colonne-corps{flex:1;display:grid;align-content:start;gap:7px;padding:10px;min-height:80px}
.crm-colonne--visee{background:rgba(255,206,59,.18);outline:2px dashed rgba(12,29,21,.3);outline-offset:-4px}
.crm-carte{display:grid;gap:4px;padding:10px;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-xs);background:var(--white);cursor:grab}
.crm-carte:active{cursor:grabbing}
.crm-carte--prise{opacity:.45}
.crm-carte strong{font-size:.82rem;line-height:1.3}
.crm-carte span{color:var(--evergreen);font-size:.76rem;font-weight:750}
.crm-carte small{color:var(--encre-2);font-size:.75rem}

@media(max-width:860px){
  .crm-filtres{grid-template-columns:1fr}
  .crm-filtres input,.crm-filtres select{min-height:44px;font-size:16px}
  .crm-barre-actions{flex-direction:column;align-items:stretch}
  .crm-vues,.crm-barre-actions>.button{width:100%}
  .crm-vues .button{flex:1}
  /* Au doigt, le glisser-déposer est peu fiable : les cartes cessent d'être
     saisissables et l'on passe par la liste d'étapes de la fiche. */
  .crm-carte{cursor:default}
  .crm-kanban{grid-auto-columns:minmax(200px,80%)}
}

/* --- La sensibilité : par quoi commencer ----------------------------------
   Posé dans l'étape Étude, sous la barre d'avancement. Le classement vient de
   `sensibilite.js`, où chaque facteur déclare comment son influence est
   connue. La fourchette rétrécit à chaque poste vérifié : c'est ce qui rend
   la valeur de cette étape visible.                                        */
.sens{margin-top:14px;padding:14px;border:1px solid rgba(12,29,21,.13);
  border-radius:var(--r-md);background:var(--surface-creuse)}
.sens-tete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px}
.sens-tete span{color:var(--encre-2);font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.sens-tete h5{margin:2px 0 0;font-size:.94rem;letter-spacing:-.015em}
.sens-fourchette{margin:0;text-align:right}
.sens-fourchette strong{display:block;font-size:1rem;white-space:nowrap}
.sens-fourchette small{color:var(--encre-2);font-size:.75rem}
.sens-liste{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px;counter-reset:sens}
.sens-liste li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:start;gap:10px;
  padding:9px 11px;border-radius:var(--r-xs);background:var(--white)}
.sens-rang{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--evergreen);color:var(--pollen);font-size:.75rem;font-weight:850}
.sens-nom{min-width:0;font-size:.84rem;font-weight:750}
.sens-nom small{display:block;margin-top:2px;color:var(--encre-2);font-size:.75rem;font-weight:400;line-height:1.5}
.sens-poids{display:grid;justify-items:end;gap:3px;text-align:right}
.sens-poids small{color:var(--encre-2);font-size:.75rem}
.sens-inconnu,.sens-acquis{margin:10px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.55}
.sens-inconnu strong{color:var(--evergreen)}

@media(max-width:620px){
  .sens-tete{flex-direction:column;align-items:flex-start}
  .sens-fourchette{text-align:left}
  .sens-liste li{grid-template-columns:22px minmax(0,1fr);grid-template-areas:"rang nom" "poids poids";gap:7px 10px}
  .sens-rang{grid-area:rang}.sens-nom{grid-area:nom}
  .sens-poids{grid-area:poids;justify-items:start;text-align:left}
}

/* Le relevé de l'existant : ce qu'on sait, et d'où. La colonne « source » est
   la raison d'être du tableau — une valeur sans provenance ne se défend pas. */
.releve{margin-top:12px}
.releve>summary{padding:7px 0;color:var(--encre-2);font-size:.75rem;font-weight:750;cursor:pointer}
.releve-table{width:100%;border-collapse:collapse;font-size:.78rem}
.releve-table th{width:38%;padding:6px 8px 6px 0;text-align:left;font-weight:650;color:var(--encre-2)}
.releve-table td{padding:6px 8px 6px 0;font-weight:750}
.releve-table tr+tr th,.releve-table tr+tr td{border-top:1px solid rgba(12,29,21,.08)}
.releve-source{width:30%;color:var(--encre-2);font-size:.75rem;font-weight:400;text-align:right}
.releve-date,.releve-vide{margin:9px 0 0;color:var(--encre-2);font-size:.75rem;line-height:1.55}
@media(max-width:520px){
  .releve-table th{width:auto}
  .releve-source{display:none}   /* la source passe en dessous, pas en colonne */
}

/* L'aperçu vivant de la façade — le geste des configurateurs de menuiserie.
   Le dessin sert de contrôle de cohérence : quand les volets ne tiennent pas
   sur le mur, on ne les dessine PAS hors du mur, on le dit. Une image fausse
   serait pire que pas d'image. */
.fac-apercu{margin:0}
.fac-apercu svg{width:100%;max-height:150px}
.fac-apercu figcaption{margin-top:5px;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.fac-apercu--deborde figcaption{padding:6px 9px;border-left:3px solid #8a3c14;border-radius:var(--r-xs);
  background:rgba(138,60,20,.07);color:#8a3c14;font-weight:650}

/* La fiche distingue les données utiles au dessin et leur provenance. */





.fiche-sous-titre{margin:14px 0 4px;font-size:.72rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--encre-2)}

/* La raison d'un refus de création. Un bouton grisé sans explication est une
   impasse : l'utilisateur ne sait ni ce qui manque ni où le fournir. */
.croquis-manque{margin:8px 0 0;padding:8px 11px;border-left:3px solid #8a3c14;
  border-radius:var(--r-xs);background:rgba(138,60,20,.07);color:#8a3c14;
  font-size:.78rem;line-height:1.5}

/* --- Confirmer le comptage des fenêtres -----------------------------------
   Ce chiffre a une influence EXACTE sur le résultat, pas estimée : le gain
   total est le nombre de volets multiplié par le gain de chacun. Il vivait
   dans une colonne de tableau, au milieu de seize autres lignes.

   Seules les façades portant des volets sont listées, triées par nombre
   décroissant : en faire confirmer dix-sept serait une corvée qu'on expédie,
   et une confirmation expédiée ne vaut rien. */
.croquis-techniques{margin-top:14px;border:1px solid rgba(12,29,21,.14);
  border-radius:var(--r-sm);background:var(--white)}
.croquis-techniques>summary{padding:13px 15px;color:var(--evergreen);font-size:.82rem;
  font-weight:800;cursor:pointer;list-style-position:inside}
.croquis-techniques>p{margin:0;padding:0 15px 12px;color:var(--encre-2);font-size:.75rem;line-height:1.5}
.croquis-techniques>[data-croquis-technique]{padding:0 15px 15px}
/* LA LIGNE « LU DES BASES PUBLIQUES » EST PARTIE LE 11/09 : chaque valeur
   dont le calcul se sert est maintenant une ligne de la fiche, avec sa
   source en pastille — et elle se corrige sur place. */
.croquis-techniques[open]>summary{padding-bottom:7px}
.croquis-techniques summary:focus-visible{outline:3px solid var(--pollen);outline-offset:3px}

/* LA SELECTION DE FACADES. La case vit dans la carte, l'action vit sous la
   liste : une seule decision pour trente-sept facades au lieu de trente-sept.
   Cible tactile de 44px, comme les filtres. */
/* La case « retenir » et la barre de lot ont demenage page PILOTAGE le
   23/08 (parcours en cinq pages) : leurs styles sont partis avec elles
   (.pilotage-liste / .pilotage-action). */

/* LE FORMULAIRE DU BATIMENT, GROUPE. C'etait une grille plate de treize
   champs melant l'identite, les dimensions, la nature du batiment et le
   produit Kelveen. Les separer ne deplace aucune donnee : ca rend seulement
   lisible ce qui l'etait deja. */
.edition-groupe{border:1px solid var(--bord,#dde2e9);border-radius:8px;padding:12px 14px 14px;margin:0 0 14px}
.edition-groupe>legend{padding:0 6px;font-weight:600;font-size:.92rem;letter-spacing:.01em}
.edition-groupe .edition-grille{margin:0}





/* L'EDITION DE L'IDENTITE, DANS LE PANNEAU.
   Le formulaire REMPLACE la liste de definitions au meme endroit : ouvrir un
   volet en dessous aurait pousse le reste du panneau et fait perdre la ligne
   qu'on venait de lire.
   Les pastilles viennent de compte.css, chargee par les deux pages : c'est la
   meme civilite qu'a la creation du compte, et deux habillages pour la meme
   idee sont exactement ce que la bibliotheque doit empecher. */
.compte-identite-form{display:grid;gap:14px;margin:0}
.compte-identite-actions{display:flex;flex-wrap:wrap;gap:9px}
.app-scene .compte-civilite legend{font-size:var(--t-micro)}
.app-scene .compte-pilules span{min-height:var(--h-md);padding:0 15px;border-width:1px;
  border-color:var(--trait-fort);font-size:var(--t-corps)}
/* SUR MOBILE, LA PASTILLE EST LA CIBLE DU DOIGT : le bouton radio etant
   masque, c'est le `span` qu'on touche, et aucune des regles generales de
   l'app ne le couvre. La media query doit venir ICI, apres la regle de base :
   posee plus haut dans le fichier elle perdait a specificite egale, et les
   pastilles restaient a 38 px au milieu de champs a 44. */
@media(max-width:860px){
  .app-scene .compte-pilules span{min-height:var(--h-lg);font-size:16px}
}
.app-scene .compte-pilules input:focus+span{outline:none;box-shadow:var(--anneau);
  border-color:var(--evergreen)}
.app-scene .compte-pilules input:focus:not(:focus-visible)+span{box-shadow:none}

/* --- Le lot de la radiographie du 23/08 ---------------------------------- */
/* 04. Le bloc d'engagement suit immédiatement le verdict : l'utilisateur
   voit la décision et son prochain geste avant les outils d'exploration. */
.studio-engagement{display:grid;gap:10px;padding:16px;border:1px solid var(--trait-fort);
  border-radius:var(--r-sm);background:rgba(255,206,59,.09)}
.studio-engagement .objectifs-actions{display:flex;flex-wrap:wrap;gap:9px}
.studio-engagement .button--pollen{min-height:48px}

/* 05. Les nouveaux replis du studio : la priorite et la conservation
   reprennent la grammaire des replis existants (comparaison, fiabilite) --
   un resume en deux temps, gras puis note. */
.studio-pilote>summary span,.studio-validation>summary span{color:var(--encre-3);font-size:.78rem;font-weight:400}
details.studio-pilote>*:not(summary){margin:12px 14px}
details.studio-validation .studio-validation-actions{margin:12px 14px}

/* 11. Un compteur vide s'efface ; un compteur plein dit qu'il filtre. */

/* Le cout carbone du produit : discret mais toujours colle a l'euro qu'il
   accompagne -- c'est la meme regle que les deux monnaies du gain. */
.carbone-produit{display:block;color:var(--encre-2);font-size:.75rem}
.proposition-fabrication{margin:6px 0 0}

/* Le pourcentage du dossier : une jauge fine sous le titre, et le compte de
   jalons en toutes lettres -- « 78 % · 14/18 jalons » se verifie, « 78 % »
   tout seul se croit. */
/* La jauge ne porte plus son texte EN ABSOLU par-dessus le reste : il
   flottait hors du flux et se superposait au bloc suivant des que le
   panneau retrecissait. Le compte des jalons est maintenant un frere. */
.dossier-jauge{display:block;margin-top:4px;max-width:320px;height:8px;
  border-radius:4px;background:rgba(12,29,21,.1);overflow:hidden}
.dossier-jauge i{display:block;height:100%;border-radius:4px;background:var(--pollen)}
.dossier-tete--pret .dossier-jauge i{background:#3f8f66}

/* LE VERDICT QUI MARQUE : une carte, une NOTE sur 10 dans un disque de
   couleur (vert, jaune, orange, rouge), et les points qui la composent en
   toutes lettres. Le titre double la couleur : jamais la couleur seule. */






@media(max-width:560px){
  
  
}

/* La reponse de Kelveen dans le fil : un bloc en retrait, marque du trait
   pollen -- ce n'est pas le message du client, et ca se voit. */
.aide-reponse{margin:8px 0 0;padding:9px 12px;border-left:3px solid var(--pollen);
  border-radius:0 var(--r-xs) var(--r-xs) 0;background:var(--surface-creuse)}
.aide-reponse span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--encre-3)}
.aide-reponse p{margin:4px 0 0;font-size:.85rem}
.admin-ticket-reponse{display:flex;gap:8px;align-items:flex-start;margin:8px 0}
.admin-ticket-reponse textarea{flex:1;min-height:44px;padding:8px 10px;font-size:.85rem;
  border:1px solid var(--trait-fort);border-radius:var(--r-xs);resize:vertical}

/* --- Pendant le calcul : la pedagogie de l'attente -------------------------
   Cinq etapes, celles du moteur. L'etape probable pulse doucement -- c'est
   une estimation, et la note le dit ; un curseur net mentirait. */
.pedago{margin:12px 0 4px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.pedago>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:10px 14px;cursor:pointer;font-weight:700;font-size:.88rem}
.pedago>summary span{color:var(--encre-3);font-weight:500;font-size:.78rem}
.pedago-etapes{list-style:none;counter-reset:pedago;margin:0;padding:2px 14px 8px;display:grid;gap:2px}
.pedago-etape{counter-increment:pedago;position:relative;display:grid;gap:2px;padding:8px 8px 8px 38px;border-radius:var(--r-xs)}
.pedago-etape::before{content:counter(pedago);position:absolute;left:8px;top:8px;width:22px;height:22px;
  display:grid;place-items:center;border-radius:50%;background:rgba(12,29,21,.08);
  font-size:.75rem;font-weight:800;color:var(--encre-2)}
.pedago-etape strong{font-size:.85rem}
.pedago-etape span{font-size:.78rem;line-height:1.45;color:var(--encre-2)}
.pedago-etape.est-probable{background:rgba(255,206,59,.16)}
.pedago-etape.est-probable::before{background:var(--pollen);color:var(--evergreen);animation:pedago-pulse 1.6s ease-in-out infinite}
@keyframes pedago-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,206,59,.6)}50%{box-shadow:0 0 0 6px rgba(255,206,59,0)}}
@media(prefers-reduced-motion:reduce){.pedago-etape.est-probable::before{animation:none}}
.pedago-note{margin:0;padding:4px 14px 12px;font-size:.75rem;line-height:1.45;color:var(--encre-3)}

/* --- La toiture, vue du ciel (page facades) ------------------------------ */
.toiture{margin:14px 0;padding:16px 18px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.toiture-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px}
.toiture-tete>div{min-width:0;flex:1 1 280px}
.toiture-tete span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.toiture-tete h3{margin:2px 0 4px;font-size:1rem}
.toiture-tete p{margin:0;font-size:.8rem;color:var(--encre-2);line-height:1.45}

/* --- Lot A : la vue de rue de chaque facade ------------------------------ */
.facade-vue{margin:8px 0 2px;padding:8px 10px;border:1px dashed var(--trait);border-radius:var(--r-xs);background:rgba(12,29,21,.025)}
.facade-vue-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.78rem;color:var(--encre-2)}
.facade-vue-tete>span{flex:1 1 220px}
.facade-vue-corps{margin-top:10px}
.facade-vue-corps[hidden]{display:none}
.facade-vue-figure{margin:0;display:grid;gap:4px}
.facade-vue-figure img{display:block;width:100%;max-width:560px;height:auto;border-radius:var(--r-xs);border:1px solid var(--trait)}
.facade-vue-figure figcaption{font-size:.75rem;color:var(--encre-3)}
.facade-vue-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:8px}
.facade-vue-note{flex:1 1 240px;font-size:.75rem;color:var(--encre-3);line-height:1.4}
.facade-vue-ia{margin-top:8px;padding-top:8px;border-top:1px solid var(--trait)}
.facade-vue-compte{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.facade-vue-compte strong{font-size:1rem}
.facade-vue-compte span{font-size:.78rem;color:var(--encre-2)}

/* --- Lot B : modeles, accroche, cotes, mesure ----------------------------- */
.elev-scene.est-mesure{cursor:crosshair}
.elev-cote-sel line{stroke:var(--pollen);stroke-width:1.5;stroke-dasharray:3 3}
.elev-cote-sel text{font-size:9px;font-weight:700;fill:#7c4b06;text-anchor:middle}
.elev-mesure{stroke:var(--tangerine);stroke-width:1.5;stroke-dasharray:4 3}
.elev-mesure-pt{fill:var(--tangerine)}
.elev-mesure-txt{font-size:10px;font-weight:800;fill:var(--tangerine-ink);text-anchor:middle}

/* LE VOLUME (studio façades, lot C) : la maquette axonométrique, les voisins
   en gris, le toit à deux pans. Un voisin dont la BD TOPO ignore la hauteur
   se dessine en pointillé : six mètres supposés, pas mesurés. */
.volume{margin:16px 0;padding:18px 20px;border:1px solid var(--trait-fort);border-radius:var(--r-md,12px);background:var(--surface-creuse)}
.volume-outils{display:flex;gap:6px;flex:none}
.volume-cadre{margin-top:12px;user-select:none}
.volume-cadre .fac-maquette{--fac-maq-h:360px}

.volume-legende{margin:8px 0 0;font-size:.76rem;color:var(--encre-2)}
@media(max-width:560px){
  .volume{padding:14px}
  .volume-cadre .fac-maquette{--fac-maq-h:260px}
}

/* La toiture compacte : une ligne, les problemes, rien d'autre. */
.toiture--compacte{padding:12px 16px}
.toiture--compacte .toiture-tete p{font-size:.76rem}
/* Le depot de photo : un champ, et la zone entiere en cible. */
.facade-vue-deposer{cursor:pointer}
.facade-vue.est-survolee{border-color:var(--pollen);background:rgba(255,206,59,.12)}
.facade-vue-miniature{display:block;width:100%;max-width:320px;height:auto;margin:0 0 8px;border-radius:var(--r-xs);border:1px solid var(--trait)}

/* --- LES RESULTATS, INSPIRES D'ALBEDO --------------------------------------
   Une seule palette d'effets, en variables : apport pollen, protection
   tangerine, nuit sarcelle, PV orange, surventilation bleu ; « sans
   Kelveen » gris neutre, « avec » teal. Le rouge reste réservé aux erreurs
   et aux suppressions. */
:root{--eff-gain:#e6b800;--eff-shade:#d64933;--eff-night:#5d928d;--eff-pv:#e07b12;--eff-vent:#3c7fb5;
  --eff-base:#66756d;--eff-kelveen:#0f9c87}
.resultat-metrics--quatre{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.resultat-metrics small{display:block;font-size:.75rem;font-weight:600;color:var(--encre-3);letter-spacing:0;text-transform:none}
.res-mois,.res-besoins,.res-roi{margin:0;padding:14px 16px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.res-mois figcaption,.res-besoins figcaption,.res-roi figcaption,.res-confort header,.res-meca header,.res-visuel header,.res-climat header,.res-avis header{display:grid;gap:3px;margin-bottom:10px}
.res-mois figcaption strong,.res-besoins figcaption strong,.res-roi figcaption strong,.res-confort header strong,.res-meca header strong,.res-visuel header strong,.res-climat header strong,.res-avis header strong{font-size:.95rem;color:var(--evergreen)}
.res-mois figcaption span,.res-besoins figcaption span,.res-roi figcaption span,.res-confort header span,.res-meca header span,.res-visuel header span,.res-climat header span,.res-avis header span{font-size:.76rem;color:var(--encre-2);line-height:1.45}
.res-mois ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.res-mois li{display:grid;grid-template-columns:34px minmax(0,1fr) 56px;align-items:center;gap:8px;font-size:.75rem}
.res-mois-nom{text-align:right;color:var(--encre-2);font-weight:700}
.res-mois-piste{display:flex;height:14px;border-radius:999px;overflow:hidden;background:rgba(12,29,21,.06)}
.res-mois-piste i{display:block;height:100%;transition:width .4s}
.res-mois-total{text-align:right;font-variant-numeric:tabular-nums;color:var(--encre-2)}
.res-legende{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;font-size:.75rem;color:var(--encre-2)}
.res-legende i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.res-besoins svg,.res-roi svg{width:100%;height:auto;display:block}
.res-axe{font-size:9px;fill:rgba(12,29,21,.72);font-weight:700}
.res-zero{stroke:rgba(12,29,21,.45);stroke-width:.8}
.res-roi-aire{fill:rgba(15,156,135,.12)}
.res-roi-ligne{fill:none;stroke:var(--eff-kelveen);stroke-width:1.8;stroke-linejoin:round}
.res-roi-point{fill:var(--pollen);stroke:var(--evergreen);stroke-width:1}
.res-confort,.res-meca,.res-visuel,.res-climat{padding:14px 16px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.res-jauges{display:grid;gap:8px}
.res-jauge{display:grid;grid-template-columns:110px minmax(0,1fr) 90px;align-items:center;gap:10px;font-size:.78rem}
.res-jauge>span{color:var(--encre-2)}
.res-jauge strong{text-align:right;font-variant-numeric:tabular-nums}
.res-jauge-piste{position:relative;height:14px;border-radius:999px;background:rgba(12,29,21,.07);overflow:hidden}
.res-jauge-piste i{display:block;height:100%;border-radius:999px;background:#2c8a4f}
.res-jauge-piste i.est-trop{background:var(--tangerine)}
.res-jauge-piste b{position:absolute;top:0;width:2px;height:100%;background:var(--evergreen)}
.res-jauges small{font-size:.75rem;color:var(--encre-3)}
.res-confort-heures{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:10px 0 0;font-size:.8rem;color:var(--encre-2)}
.res-confort-heures b{font-size:1.05rem;color:var(--evergreen)}
.res-confort-heures em{font-style:normal;font-weight:800;color:#2c8a4f}
.res-meca ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.res-meca li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 90px;align-items:center;gap:10px;font-size:.78rem}
.res-meca-nom{display:grid;color:var(--evergreen);font-weight:700}
.res-meca-nom small{font-weight:500;color:var(--encre-3);font-size:.75rem}
/* ── Le duo avant/apres : deux barres par ligne, valeurs en colonne ───── */
.res-duo{margin:14px 0;padding:14px 15px;border:1px solid rgba(12,29,21,.1);border-radius:var(--r-sm);background:var(--white)}
.res-duo header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.res-duo header strong{font-size:.8rem;color:var(--evergreen)}
.res-duo header span{color:var(--encre-3);font-size:.7rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.res-duo-legende{display:flex;gap:14px;margin:0 0 10px;font-size:.75rem;color:var(--encre-2)}
.res-duo-legende span{display:inline-flex;align-items:center;gap:5px}
.res-duo-legende i{width:10px;height:10px;border-radius:3px}
.res-duo-groupe{margin:12px 0 6px;font-size:.7rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-3)}
.res-duo-lignes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.res-duo-lignes li{display:grid;grid-template-columns:minmax(84px,9ch) 1fr auto;gap:4px 12px;align-items:center;font-size:.8rem}
.res-duo-nom{font-weight:700;color:var(--encre-1)}
.res-duo-pistes{display:grid;gap:3px}
.res-duo-piste{display:block;height:11px;border-radius:999px;background:rgba(12,29,21,.06);overflow:hidden}
.res-duo-piste i{display:block;height:100%;border-radius:999px}
.res-duo-valeurs{display:grid;gap:3px;justify-items:end;font-variant-numeric:tabular-nums;font-size:.75rem;line-height:1.1}
.res-duo-valeurs b:last-child{color:var(--evergreen)}
@media(max-width:640px){.res-duo-lignes li{grid-template-columns:1fr auto}.res-duo-nom{grid-column:1/-1}}

.res-meca-piste{height:10px;border-radius:999px;background:rgba(12,29,21,.06);overflow:hidden}
.res-meca-piste i{display:block;height:100%;border-radius:999px}
.res-meca li b{text-align:right;font-variant-numeric:tabular-nums}
.res-meca-reel{margin:10px 0 0;padding:8px 12px;border-left:3px solid var(--eff-kelveen);background:rgba(15,156,135,.07);font-size:.78rem;line-height:1.45}
.res-visuel small{display:block;margin-top:8px;font-size:.75rem;color:var(--encre-3);line-height:1.45}
.res-tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.res-tuiles>div{display:grid;gap:3px;padding:10px 12px;border-radius:var(--r-xs);background:var(--surface-creuse)}
.res-tuiles dt{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-3)}
.res-tuiles dd{margin:0;font-size:1rem;font-weight:800;color:var(--evergreen)}
.res-tuiles dd.est-plus{color:#2c8a4f}.res-tuiles dd.est-moins{color:var(--tangerine-ink)}
.res-panne{margin:0;padding:10px 12px;border-radius:var(--r-xs);background:rgba(12,29,21,.05);font-size:.78rem;line-height:1.45}
.res-avis-repli{margin-top:14px;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--white)}
.res-avis-repli>summary{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 15px;color:var(--evergreen);cursor:pointer;list-style:none}
.res-avis-repli>summary::-webkit-details-marker{display:none}.res-avis-repli>summary span{margin-left:auto;color:var(--encre-2);font-size:.78rem}
.res-avis-repli>summary::after{content:"＋";font-weight:900}.res-avis-repli[open]>summary::after{content:"−"}
.res-avis-repli .res-avis{margin:0;border:0;border-top:1px solid var(--trait);border-radius:0 0 var(--r-md) var(--r-md)}
.res-avis{margin-top:14px;padding:16px 18px;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--surface-creuse)}
.res-avis-choix{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px}
.res-avis-chip{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--white);text-align:left;cursor:pointer;color:var(--evergreen)}
.res-avis-chip b{font-size:.86rem}.res-avis-chip small{font-size:.75rem;color:var(--encre-3)}
.res-avis-chip.est-choisi{border-color:var(--evergreen);background:var(--evergreen);color:var(--eggshell)}
.res-avis-chip.est-choisi small{color:rgba(245,242,225,.75)}
.res-avis-label{display:block;margin-top:12px;color:var(--evergreen);font-size:.8rem;font-weight:800}.res-avis-label small{color:var(--encre-2);font-weight:500}
.res-avis-mot{width:100%;margin:5px 0 0;padding:8px 10px;border:1px solid var(--trait);border-radius:var(--r-xs);font:inherit;font-size:.82rem;resize:vertical}
.res-avis-actions{margin-top:10px}
.res-avis--donne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.res-avis--donne header{margin:0}
@media(max-width:560px){
  .res-jauge{grid-template-columns:84px minmax(0,1fr) 76px}
  .res-meca li{grid-template-columns:minmax(0,1fr) 70px;}
  .res-meca-piste{grid-column:1 / -1}
}
.crm-prospect-jetons{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.alerte--ok{border-left:3px solid #2c8a4f;border-radius:var(--r-xs);background:rgba(44,138,79,.08)}
.alerte.toiture-controle{margin-top:10px}
.roe-parc{margin-top:6px}

/* L'ATELIER DE LA FACADE : la maquette et la décision restent dans le même
   regard. Sur grand écran le panneau suit le défilement ; au doigt il passe
   sous la maquette, sans modifier l'ordre du document. */
.facade-studio{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);gap:14px;align-items:start}
.facade-studio-mode{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px;min-height:44px}
/* LE « ? » DE LA PAGE FAÇADES (11/09) : le même panneau que le plan du
   bâtiment, ouvert sous son bouton. `.croquis-aide` se cale sur le cadre du
   plan (100 % de sa hauteur, 100 % de sa largeur) : ici son abri fait la
   taille d'un bouton, donc la largeur et la hauteur se reprennent. */
.facade-studio-aide{margin-right:auto}
.aide-raccourcis{position:relative}
.aide-raccourcis-bouton{display:grid;place-items:center;width:var(--h-md,38px);height:var(--h-md,38px);padding:0;
  border:1px solid var(--trait-fort);border-radius:999px;background:var(--white);color:var(--evergreen);
  font:800 .95rem/1 var(--font-body);cursor:help;transition:background .15s,border-color .15s}
.aide-raccourcis-bouton:hover,.aide-raccourcis-bouton[aria-expanded="true"]{border-color:var(--evergreen);background:var(--pollen)}
.aide-raccourcis-bouton:focus-visible{outline:none;box-shadow:var(--anneau)}
/* UN CLAVIER PLUS UN « ? », ET RIEN AU DOIGT (12/09) : le pourquoi est dans
   tests/raccourcis-clavier.test.js. Le rond etait calibre pour du texte. */
.aide-raccourcis-bouton .ico{width:19px;height:19px}
.elev-etat .aide-raccourcis-bouton .ico{width:16px;height:16px}
/* AU DOIGT, SEUL LE PANNEAU PUREMENT CLAVIER PART (12/09, apres mesure).
   Celui du plan (espace.html) annonce 14 lignes, 14 TOUCHES : inutile sans
   clavier. Celui de l'editeur de facade en compte 7 de POINTEUR sur 18 --
   dont « Clic : poser le modele choisi », la seule phrase qui explique
   comment ajouter une fenetre. Le masquer avait retire ce mode d'emploi
   la ou il sert le plus. `.aide-raccourcis` est donc EXEMPTE. */
@media (pointer: coarse){
  .croquis-outil--aide,.croquis-aide{display:none}
}
.aide-raccourcis .aide-raccourcis-panneau{left:0;right:auto;top:calc(100% + 8px);z-index:40;
  width:min(340px,calc(100vw - 32px));max-height:min(70vh,520px)}
.facade-studio-onglets{display:flex;gap:4px;padding:4px;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.app-scene .facade-studio-onglet{min-height:44px;padding-inline:16px;border-color:transparent;background:transparent;color:var(--encre-2)}
.app-scene .facade-studio-onglet:not(.mode-onglet--actif):hover{border-color:transparent;background:var(--white);color:var(--evergreen)}
.app-scene .facade-studio-onglet.mode-onglet--actif{border-color:var(--evergreen);background:var(--evergreen);color:var(--white)}
.facade-studio-scene{min-width:0;overflow:hidden;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-md);background:var(--white);box-shadow:0 10px 28px rgba(12,29,21,.05)}
.facade-studio-panneau{position:sticky;top:14px;min-width:0;max-height:calc(100vh - 28px);overflow:auto;
  scrollbar-gutter:stable}
.facade-focus{margin:0;padding:16px;border:1px solid rgba(12,29,21,.16);border-radius:var(--r-md);
  background:var(--white);box-shadow:0 10px 28px rgba(12,29,21,.06)}
.facade-focus--vide{border-style:dashed;border-color:var(--trait-fort);background:transparent}
.facade-focus--vide p{margin:0;font-size:.8rem;color:var(--encre-2)}
.facade-focus-tete{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.facade-focus-sur{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-3)}
.facade-focus h3{margin:2px 0 0;font-size:1.05rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.facade-focus-axes{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}
/* Trois axes dans une grille a deux colonnes : le troisieme prend la
   ligne entiere plutot que de laisser un trou a sa droite. */
.facade-focus-calcul{grid-column:1/-1}
.facade-focus-axes>div{display:grid;align-content:start;gap:5px;min-width:0;padding:9px;
  border-radius:var(--r-xs);background:var(--surface-creuse)}
.facade-focus-axes>div>span,.facade-focus-ombrage>span{font-size:.7rem;font-weight:850;
  letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.facade-focus-axes .jeton,.facade-focus-axes .facade-potentiel,
.facade-focus-axes .facade-statut{width:max-content;max-width:100%;white-space:normal}
.facade-focus-mesures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 0}
.facade-focus-mesures>div{display:grid;gap:2px;padding:9px;border:1px solid rgba(12,29,21,.09);
  border-radius:var(--r-xs);background:var(--white)}
.facade-focus-mesures dt{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--encre-3)}
.facade-focus-mesures dd{margin:0;font-size:1rem;font-weight:850;color:var(--evergreen)}
.facade-focus-dimensions{margin:6px 2px 0;color:var(--encre-3);font-size:.75rem}
.facade-focus-ombrage{display:grid;gap:5px;margin-top:10px;padding:9px 10px;border-left:3px solid var(--pollen);
  border-radius:0 var(--r-xs) var(--r-xs) 0;background:rgba(255,206,59,.09)}
.facade-focus-ombrage small{color:var(--encre-2);font-size:.75rem;line-height:1.4}
.facade-focus-ombrage .facade-ombrage{display:grid;gap:3px}
.facade-focus-ombrage .facade-ombrage small{font-size:.75rem}
.facade-focus .facade-vue{margin-top:10px}
/* LA FICHE REORGANISEE (11/09). L'etat ouvre la fiche, seul sur sa ligne :
   c'est la premiere chose a lire — qui a confirme quoi. La consigne dit ce
   qu'il faut regarder AVANT de confirmer ; les deux pliants portent ce qui
   complete, sans le mettre sur le chemin. */
.facade-focus-etat{margin-top:10px}
.facade-focus-consigne{margin:10px 0 0;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--surface-creuse);color:var(--encre-2);font-size:.8rem;line-height:1.45}
.facade-complement{margin-top:10px;border-top:1px solid var(--trait)}
.facade-complement>summary{padding:10px 2px 4px;cursor:pointer;font-size:.8rem;font-weight:750;color:var(--evergreen)}
.facade-complement>summary:focus-visible{outline:3px solid var(--pollen);outline-offset:2px}
.facade-complement[open]>summary{padding-bottom:8px}
.facade-complement>.button{margin:2px 0 8px}
.facade-focus-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
.facade-focus-actions>.button{width:100%;min-height:44px}
.facade-focus-actions>.button:first-child{grid-column:1/-1}
.facade-focus .facade-vue{padding:10px;border-style:solid;background:var(--surface-creuse)}
.facade-focus .facade-vue[hidden]{display:none}
.facade-focus .facade-vue-tete{display:grid;gap:3px}
.facade-focus .facade-vue-tete>strong{font-size:.75rem;color:var(--evergreen)}
.facade-focus .facade-vue-tete>span{font-size:.75rem;line-height:1.4;color:var(--encre-2)}
.facade-focus .facade-vue-actions{gap:6px;margin-top:9px}
.facade-focus .facade-vue-actions>.lien-bouton,.facade-focus .facade-vue-actions>.bouton-discret{font-size:.75rem}

/* Le curseur dit le geste : on fait tourner la maquette. */
.volume-cadre .fac-maquette{cursor:ew-resize;touch-action:pan-y}
.volume-cadre--tourne .fac-maquette{cursor:grabbing}

/* LE BATIMENT DANS SON ILOT, EN GRAND : c'est le sujet de la page. */
/* ── LA MAQUETTE EST LA PAGE (24/08) ────────────────────────────────────
   Plus de carte, plus de cadre : la figure occupe la largeur, les outils se
   posent DESSUS en coin (ils flottaient a cote, « mal integres »), l'aide
   du geste est une pastille discrete, la legende chuchote. */
.volume--grand{margin:4px 0 0;padding:0;border:none;background:transparent;border-radius:0;box-shadow:none}
.volume--grand .volume-cadre{position:relative;margin:0;
  background:radial-gradient(120% 90% at 50% 12%, rgba(151,175,154,.14), transparent 70%)}
.volume--grand .volume-cadre .fac-maquette{--fac-maq-h:min(64vh,620px)}
.volume--grand .volume-legende{margin:2px 0 0;font-size:.75rem;color:var(--encre-3);line-height:1.5}

/* Les outils : quatre pastilles en colonne, posees sur la figure. */
.volume--grand .volume-outils{position:absolute;right:8px;top:50%;transform:translateY(-50%);
  z-index:4;display:grid;gap:4px}
.volume-outil{display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid rgba(12,29,21,.14);border-radius:10px;background:rgba(255,253,244,.9);
  color:var(--encre-2);font-size:1rem;line-height:1;cursor:pointer;
  backdrop-filter:blur(3px);transition:background .15s,border-color .15s,color .15s}
.volume-outil:hover,.volume-outil:focus-visible{background:var(--white,#fffdf4);
  border-color:rgba(12,29,21,.3);color:var(--evergreen)}
.volume-outil:active{transform:scale(.94)}

/* L'aide du geste : elle se retire des qu'on a compris (au survol). */
.volume-aide{position:absolute;left:10px;bottom:8px;z-index:3;margin:0;
  font-size:.75rem;color:var(--encre-3);background:rgba(255,253,244,.78);
  border-radius:999px;padding:3px 10px;pointer-events:none;transition:opacity .3s}
.volume-cadre:hover .volume-aide,.volume-cadre--tourne .volume-aide{opacity:0}

@media(max-width:700px){
  .volume--grand .volume-cadre .fac-maquette{--fac-maq-h:min(40vh,330px)}
  .volume--grand .volume-outils{right:6px;gap:3px}
  .volume-outil{width:44px;height:44px}
}
/* Ce qui prepare le calcul et ce qui verifie notre travail : en arriere-plan. */
.facades-arriere{margin:18px 20px 8px;display:grid;gap:8px}
.facades-arriere>details{border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--surface-creuse)}
.facades-arriere>details>summary{min-height:42px;display:flex;align-items:center;padding:9px 14px;
  color:var(--evergreen);font-size:.78rem;font-weight:800;cursor:pointer}
.facades-arriere>details[open]>summary{border-bottom:1px solid var(--trait)}
.facades-arriere .diagnostic-dossier,.facades-arriere .toiture{margin:12px;border:0;background:transparent;padding:0}
.facades-controles-note{margin:12px 12px 0;font-size:.78rem;color:var(--encre-2);line-height:1.5}

/* ── Les arbres autour : le bloc de questions ─────────────────────────── */
/* Le mode QUESTION : une phrase, deux reponses, rien d'autre. */
.arbres-question{margin:0 0 12px;font-size:1.02rem;font-weight:700;color:var(--encre-1);max-width:56ch}
.arbres-note{margin:8px 0 0;font-size:.78rem;color:var(--encre-2);max-width:62ch}
.arbres-reponses{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.arbres-resume{margin:0 0 14px;color:var(--encre-2);line-height:1.5}
.arbres-reponses--groupe .button{flex:1 1 150px;min-height:48px}
.arbres-non-bloquants{margin:16px 0 0;padding:9px 11px;border-left:3px solid rgba(44,138,79,.45);
  background:rgba(44,138,79,.06);color:var(--encre-2);font-size:.75rem;line-height:1.45}
.arbre-details{margin-top:12px;border-top:1px solid var(--trait)}
.arbre-details>summary{display:flex;align-items:center;min-height:44px;color:var(--encre-2);font-size:.78rem;font-weight:800;cursor:pointer}
.arbre-details-corps{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0 10px}
/* Avancement d'abord, puis une file horizontale toujours accessible. */
/* LE ROND D'AVANCEMENT (11/09) : discret, en tête de la file, et il s'ouvre
   sur ce qui manque pour 100 %. Le trait se dessine en `pathLength` 100 :
   le pourcentage EST la longueur du trait, sans calcul de circonférence. */
.facade-etat-barre{position:relative;min-width:0}
.validation-anneau>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:3px 14px 3px 3px;
  border:1px solid var(--trait);border-radius:999px;background:var(--surface,#fffdf4);cursor:pointer;list-style:none}
.validation-anneau>summary::-webkit-details-marker{display:none}
.validation-anneau>summary:hover,.validation-anneau[open]>summary{border-color:var(--evergreen)}
.validation-anneau>summary:focus-visible{outline:none;box-shadow:var(--anneau)}
.validation-anneau-jauge{position:relative;display:grid;place-items:center;flex:none;width:40px;height:40px}
.validation-anneau-jauge svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.validation-anneau-fond,.validation-anneau-part{fill:none;stroke-width:3.2}
.validation-anneau-fond{stroke:rgba(12,29,21,.1)}
.validation-anneau-part{stroke:#2c8a4f;stroke-linecap:round;transition:stroke-dasharray .4s}
.validation-anneau-texte{display:grid;line-height:1.2;white-space:nowrap}
.validation-anneau-texte strong{font-size:.8rem}
.validation-anneau-texte small{font-size:.75rem;color:var(--encre-3)}
.validation-anneau--complet .validation-anneau-texte strong{color:#2c7a4b}
.validation-anneau-detail{position:absolute;left:0;top:calc(100% + 8px);z-index:30;width:min(360px,calc(100vw - 32px));
  padding:14px 14px 12px;border:1px solid rgba(12,29,21,.18);border-radius:12px;background:rgba(255,253,244,.98);
  box-shadow:0 10px 34px rgba(12,29,21,.22)}
.validation-anneau-titre{margin:0 0 6px;font-size:.75rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-2)}
.validation-anneau-detail ul{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.validation-anneau-detail button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 8px;
  border:0;border-radius:var(--r-sm);background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.validation-anneau-detail button:hover{background:var(--surface-creuse,#f4f1e3)}
.validation-anneau-detail button:focus-visible{outline:none;box-shadow:var(--anneau)}
.validation-anneau-detail button>span{display:grid;min-width:0}
.validation-anneau-detail button strong{font-size:.85rem}
.validation-anneau-detail button small{font-size:.75rem;color:var(--encre-3)}
.validation-anneau-note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--trait);font-size:.75rem;line-height:1.45;color:var(--encre-2)}
.validation-anneau-note--ok{margin:0;padding:0;border:0;color:#2c7a4b;font-weight:700}
.facade-file{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;margin:0 0 10px;padding:9px 10px;
  border:1px solid rgba(12,29,21,.12);border-radius:var(--r-sm);background:var(--white)}
.facade-file-liste{display:flex;gap:6px;min-width:0;overflow-x:auto;padding:1px 18px 5px 1px;
  scrollbar-width:thin;scroll-snap-type:x proximity;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%)}
.facade-file-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px;min-width:150px;
  min-height:44px;padding:7px 9px;border:1px solid rgba(12,29,21,.12);border-radius:var(--r-xs);background:var(--surface-creuse);
  color:var(--evergreen);font:inherit;text-align:left;cursor:pointer;scroll-snap-align:start}
.facade-file-item>span{display:grid;gap:1px;min-width:0}.facade-file-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem}
.facade-file-item small{color:var(--encre-3);font-size:.75rem}.facade-file-item i{font-style:normal;color:#2c8a4f;font-weight:900}
.facade-file-item:hover,.facade-file-item:focus-visible{border-color:rgba(12,29,21,.35);outline:0;background:var(--white)}
.facade-file-item.est-active{border-color:var(--evergreen);box-shadow:inset 0 -3px 0 var(--pollen);background:var(--white)}
.facade-file-item--verifier:not(.est-active){border-color:rgba(240,161,42,.32)}
.facade-file-item--validee:not(.est-active){background:rgba(44,138,79,.07)}

/* L'élévation est un outil de dessin : elle gagne la place de l'écran au
   lieu de s'insérer dans les 340 px du panneau de diagnostic. */
.facade-editeur-dialogue{width:min(1400px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 24px);
  padding:0;border:1px solid rgba(12,29,21,.2);border-radius:var(--r-md);background:var(--eggshell-deep,#f1ecd6);
  color:var(--evergreen);overflow:auto;box-shadow:0 28px 80px rgba(12,29,21,.34)}
.facade-editeur-dialogue::backdrop{background:rgba(5,17,11,.58);backdrop-filter:blur(3px)}
.facade-editeur-dialogue .facade-elevation{min-height:min(760px,calc(100dvh - 26px));padding:18px 20px;
  border:0;border-radius:0;background:transparent}
.facade-editeur-dialogue .elev-scene{min-height:300px;max-height:62dvh;display:grid;align-items:center}
/* CENTRER ET DEFILER NE VONT PAS ENSEMBLE : un contenu centre qui deborde
   rend son bord HAUT-GAUCHE inatteignable — on ne peut pas defiler vers du
   negatif. Des que le dessin est plus grand que son cadre, on le cale au
   coin, ce qui est de toute facon la lecture d'un plan. */
.facade-editeur-dialogue .elev-scene.est-zoomee{align-items:start;justify-items:start}
.facade-editeur-dialogue .elev-scene.est-zoomee .elev-svg{margin-inline:0}
.facade-editeur-dialogue .elev-svg{margin-inline:auto}
.facade-editeur-dialogue .elev-tete{position:sticky;top:-18px;z-index:6;margin:-18px -20px 0;padding:18px 20px 12px;
  border-bottom:1px solid rgba(12,29,21,.12);background:rgba(241,236,214,.97);backdrop-filter:blur(6px)}
.facade-editeur-dialogue .elev-modele,.facade-editeur-dialogue .elev-masque,
.facade-editeur-dialogue .elev-etat .lien-bouton,.facade-editeur-dialogue [data-elev-fermer]{min-height:44px}

@media(max-width:1240px){
  .facade-studio{grid-template-columns:1fr}
  .facade-studio-panneau{position:static;max-height:none;overflow:visible}
  .facade-file{grid-template-columns:1fr}
  .facade-etat-barre{justify-self:start}
}
@media(max-width:560px){
  .facade-page-entete p{font-size:.75rem}
  .facade-file{margin-inline:-2px;padding:8px}.facade-file-item{min-width:136px}
  .facade-studio{gap:8px}.facade-focus{padding:14px 12px}
  .facade-focus-axes{grid-template-columns:1fr}
  .facade-editeur-dialogue{width:100vw;height:100dvh;max-height:none;margin:0;border:0;border-radius:0}
  .facade-editeur-dialogue .facade-elevation{min-height:100dvh;padding:12px}
  .facade-editeur-dialogue .elev-tete{top:-12px;margin:-12px -12px 0;padding:12px 12px 10px}
  .facade-editeur-dialogue .elev-scene{min-height:220px}
}
@media(max-width:860px){
  .facade-studio-mode{justify-content:stretch}
  .facade-studio-onglets{flex:1;min-width:0}
  .app-scene .facade-studio-onglet{flex:1;min-width:0;padding-inline:8px}
}

.arbre-hauteur{display:inline-flex;align-items:center;gap:5px;color:var(--encre-2)}
.arbre-hauteur input{width:68px;min-height:44px;padding:6px 8px;border:1px solid var(--trait, rgba(12,29,21,.18));border-radius:7px;font:inherit}

@media(max-width:560px){
  .arbres-reponses--groupe{display:grid;grid-template-columns:1fr}
  .arbres-reponses--groupe .button{width:100%}
}

/* ══ LE FIL DU PARCOURS DE SIMULATION : cinq pas, dans l'ordre ══════════ */
.fil-simulation{margin:10px 0 0}
.fil-mobile-resume{display:none}
.fil-liste{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;padding:0}
.fil-pas{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700}
.fil-pas a{color:var(--encre-1, #0c1d15);text-decoration:none;padding:4px 2px;border-bottom:2px solid transparent}
.fil-pas--actif a{border-bottom-color:var(--pollen, #ffce3b)}
.fil-pas--fait a,.fil-pas--fait span{color:#2c4a3a}
.fil-pas--ferme span{color:var(--encre-3, #7b8a80);cursor:not-allowed}
.fil-coche{color:#2c4a3a;font-weight:800}
/* Un pas non fait devant des pas faits : « a reprendre », pas « saute ». */
.fil-reprendre{font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:#715900;background:rgba(255,206,59,.22);border-radius:999px;padding:2px 7px}
.fil-lien{font-size:.8rem;font-weight:700;color:var(--encre-2);text-decoration:none}
.fil-fermee{margin:18px 0;padding:16px;border:1px dashed rgba(12,29,21,.25);border-radius:12px}
.fil-fermee p{margin:0 0 12px;color:var(--encre-2)}
/* Le fil condense des etapes d'engagement : une ligne. */
.fil-simulation--condense{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;font-size:.8rem}
.fil-condense-ok{color:#2c7a4b;font-weight:800}

@media(max-width:700px){
  /* Le résumé de l'étape est un BOUTON : il déplie les cinq pas (11/09),
     à la place des flèches « précédent / suivant » parties ce jour-là. */
  .fil-mobile-resume{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;
    margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
  .fil-mobile-resume span{font-size:.75rem;font-weight:850;color:var(--encre-3);text-transform:uppercase;letter-spacing:.04em}
  .fil-mobile-resume strong{flex:1;font-size:.95rem;text-align:right}
  .fil-mobile-resume::after{content:"";flex:none;width:7px;height:7px;margin:0 4px 4px 0;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
  .fil-simulation.est-deplie>.fil-mobile-resume::after{transform:rotate(-135deg);margin-bottom:-4px}
  .fil-mobile-resume:focus-visible{outline:none;box-shadow:var(--anneau)}
  .fil-simulation:not(.fil-simulation--vue-projet)>.fil-liste{display:none}
  .fil-simulation--vue-projet>.fil-liste{display:grid;grid-template-columns:1fr;gap:4px}
  .fil-simulation.est-deplie>.fil-liste{display:grid;grid-template-columns:1fr;gap:4px;margin-top:6px}
}

/* Le pas suivant, en bas de page : on conclut sans remonter. */
.pas-suivant{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 6px;padding-top:14px;border-top:1px solid rgba(12,29,21,.1)}
/* CE QUI MANQUE, SOUS LE BOUTON ETEINT (24/08 au soir).
   Bordeaux et non rouge vif : rien n'est casse, il manque quelque chose —
   le rouge de l'erreur accuserait l'utilisateur d'une faute qu'il n'a pas
   commise. C'est deja l'encre des blocages du dossier, donc un seul
   vocabulaire pour une seule idee. Gras, parce que c'est la consigne ; a
   12,5 px, parce que sous cette taille une consigne ne se lit plus. */
.pas-suivant--bloque{flex-direction:column;align-items:flex-end;gap:6px}
.pas-suivant-manque{margin:0;max-width:52ch;font-size:.78rem;font-weight:700;
  line-height:1.45;color:#6d3311;text-align:right}
@media(max-width:860px){
  .pas-suivant--bloque{align-items:stretch}
  .pas-suivant-manque{text-align:left}
}
.pas-suivant [aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* La trace du calcul : une ligne de provenance, en pied des details. */
.trace-moteur{margin:10px 0 0;font-size:.75rem;color:var(--encre-3)}
/* Le bilan d'une facade : une carte repliee, le corps rendu a l'ouverture. */
.resultats-groupe,.resultats-avis{grid-column:1/-1;min-width:0}
.resultats-groupe{overflow:hidden;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--white)}
.resultats-groupe>summary{display:flex;align-items:center;gap:14px;min-height:58px;padding:11px 16px;
  color:var(--evergreen);cursor:pointer;list-style:none}
.resultats-groupe>summary::-webkit-details-marker{display:none}
.resultats-groupe>summary>span{display:grid;gap:3px}.resultats-groupe>summary strong{font-size:.92rem}
.resultats-groupe>summary small{color:var(--encre-2);font-size:.76rem;line-height:1.4}
.resultats-groupe>summary::after{content:"＋";margin-left:auto;font-weight:900}.resultats-groupe[open]>summary::after{content:"−"}
.resultats-groupe-corps{display:grid;gap:9px;padding:0 12px 12px;border-top:1px solid var(--trait)}
.resultats-groupe-corps>.resultat-facade{margin:12px 0 0;box-shadow:none}
.resultat-facade>details>summary{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;cursor:pointer;list-style:none;min-height:44px}
.resultat-facade>details>summary::-webkit-details-marker{display:none}
.resultat-facade>details>summary strong{font-size:.95rem}
.resultat-facade>details>summary span{color:var(--encre-2);font-size:.8rem}
.resultat-facade>details>summary em{margin-left:auto;font-style:normal;font-size:.75rem;font-weight:700;color:var(--evergreen)}
.resultat-facade>details[open]>summary em{opacity:.5}
.resultats-groupe--liens{padding-bottom:10px}
.resultats-groupe--liens>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px}
.resultats-groupe--liens>header>span{display:grid;gap:3px}.resultats-groupe--liens>header strong{font-size:.92rem}
.resultats-groupe--liens>header small{color:var(--encre-2);font-size:.76rem}.resultats-groupe--liens .resultats-groupe-corps{padding-top:8px}
.resultat-facades-legende,.rapport-facades-legende{display:grid;grid-template-columns:minmax(180px,1.25fr) repeat(3,minmax(105px,.65fr)) minmax(100px,.6fr);
  gap:10px;padding:7px 14px;color:var(--encre-3);font-size:.7rem;font-weight:850;letter-spacing:.05em;text-transform:uppercase}
.resultat-facade-lien,.rapport-facade-lien{display:grid;grid-template-columns:minmax(180px,1.25fr) repeat(3,minmax(105px,.65fr)) minmax(100px,.6fr);
  align-items:center;gap:10px;min-height:54px;padding:9px 12px;border:1px solid var(--trait);border-radius:var(--r-xs);
  color:var(--evergreen);text-decoration:none;background:var(--white);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.resultat-facade-lien:hover,.rapport-facade-lien:hover{border-color:var(--teal);background:rgba(15,156,135,.045);transform:translateY(-1px)}
.resultat-facade-lien>span:first-child,.rapport-facade-lien>span:first-child{display:grid;gap:2px}
.resultat-facade-lien small,.rapport-facade-lien small{color:var(--encre-2);font-size:.75rem}
.resultat-facade-lien>span:not(:first-child),.rapport-facade-lien>span:not(:first-child){font-size:.8rem;font-weight:800}
.resultat-facade-lien em{font-size:.75rem;font-style:normal;font-weight:800;text-align:right}

.rapport-technique{display:grid;gap:18px}.rapport-technique-tete,.rapport-facade-detail>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:18px;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:linear-gradient(145deg,var(--surface-creuse),var(--white))}
.rapport-technique-tete>div,.rapport-facade-detail>header>div{display:grid;gap:4px}.rapport-technique-tete span,.rapport-facade-detail>header span{
  color:var(--encre-3);font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.rapport-technique-tete h3,.rapport-facade-detail>header h3{margin:0;color:var(--evergreen);font-size:clamp(1.35rem,2.4vw,1.9rem)}
.rapport-technique-tete p{max-width:68ch;margin:0;color:var(--encre-2);font-size:.8rem;line-height:1.5}
.resultat-etude--page{padding:0;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--white)}
.resultat-etude--page>.resultat-etude-corps{border-top:0}.resultat-etude-technique--page{display:grid;gap:12px;padding-top:4px;border:0;background:transparent}
.rapport-classement,.rapport-facades{display:grid;gap:12px;padding:16px;border:1px solid var(--trait-fort);border-radius:var(--r-md);background:var(--white)}
.rapport-facades{grid-column:1/-1}.rapport-facades-liste{display:grid;gap:7px}.rapport-facade-lien.est-actif{border-color:var(--teal);box-shadow:inset 3px 0 0 var(--teal);background:rgba(15,156,135,.06)}
.rapport-facade-lien .jeton-preuve{justify-self:end}.rapport-facade-facteur{grid-column:2/-1}
.rapport-facade-detail{display:grid;grid-column:1/-1;gap:12px}.rapport-facade-detail .resultat-synthese{margin:0}
.rapport-facade-detail .resultat-details--page{display:grid;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--trait)}
.simulation-carte-barre{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.simulation-carte-barre h3{margin:0}.simulation-carte-barre .espace-etat{margin-bottom:0}
.resultat-suppr{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;min-height:44px;padding:8px 11px;
  border:1px solid var(--tangerine-ink);border-radius:var(--r-xs);background:var(--tangerine-ink);color:var(--white);font-weight:800}
.resultat-suppr svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.resultat-suppr:hover{background:#7f2419;color:var(--white)}.resultat-suppr:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:640px){
  .resultats-groupe>summary{align-items:flex-start}.resultats-groupe>summary small{max-width:34ch}
  .resultats-groupe--liens>header,.rapport-technique-tete,.rapport-facade-detail>header{align-items:stretch;flex-direction:column}
  .resultats-groupe--liens>header .button,.rapport-technique-tete .button,.rapport-facade-detail>header .button{width:100%}
  .resultat-facades-legende,.rapport-facades-legende{display:none}
  .resultat-facade-lien,.rapport-facade-lien{grid-template-columns:1fr auto;gap:5px 12px}
  .resultat-facade-lien>span:first-child,.rapport-facade-lien>span:first-child{grid-row:1/4}
  .resultat-facade-lien em,.rapport-facade-lien .jeton-preuve{grid-column:2;justify-self:end}
  .simulation-carte-barre{display:grid}.resultat-suppr{width:100%}
}
/* Une section verrouillee ne montre QUE son intro et le verrou. */
.section--verrouillee > :not(.section-intro):not([data-verrou]):not(h2){display:none}

/* ══ PAGE PILOTAGE ══════════════════════════════════════════════════════ */
.pilotage-groupe{margin:16px 0;padding:0 0 4px}
.pilotage-groupe-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:0 0 8px}
.pilotage-groupe-tete strong{font-size:.9rem}
.pilotage-groupe-compte{color:var(--encre-2);font-size:.78rem;margin-left:6px}
.pilotage-groupe-tete small{display:block;color:var(--encre-3);font-size:.75rem;max-width:64ch;margin-top:2px}
.pilotage-groupe--secondaire .pilotage-ligne,.pilotage-groupe--hors_etude .pilotage-ligne{opacity:.82}
.pilotage-ombrage{font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px}
.pilotage-ombrage--faible{background:rgba(151,175,154,.28);color:#2c4a3a}
.pilotage-ombrage--moyen{background:rgba(255,206,59,.22);color:#715900}
.pilotage-ombrage--fort{background:rgba(138,60,20,.12);color:#8a3c14}
/* L'action reste sous la main : collee en bas pendant qu'on parcourt. */
.pilotage-action--collee{position:sticky;bottom:0;z-index:5;margin:16px -4px 0;padding:12px 14px;
  background:var(--white,#fffdf4);border:1px solid rgba(12,29,21,.14);border-radius:12px;
  box-shadow:0 -3px 14px rgba(12,29,21,.09)}
.pilotage-liste{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pilotage-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 12px;border:1px solid rgba(12,29,21,.12);border-radius:10px}
.pilotage-ligne label{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.9rem}
.pilotage-ligne--figee{opacity:.6}
.pilotage-mesures{color:var(--encre-2);font-size:.8rem}
.pilotage-jetons{display:inline-flex;gap:5px;flex-wrap:wrap}
.pilotage-action{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 6px}
/* Le motif du blocage occupe sa propre ligne, AVANT le bouton qu'il
   explique : sur telephone la barre est en colonne, et c'est la premiere
   chose qu'on lit. Ton d'alerte doux — c'est un etat, pas une faute. */
.pilotage-action-motif{flex-basis:100%;margin:0;padding:8px 10px;border-radius:7px;
  border:1px solid rgba(138,60,20,.28);background:rgba(138,60,20,.07);
  font-size:.78rem;line-height:1.45;color:#6d3311}
.pilotage-action-motif .fil-lien{white-space:nowrap}
.pilotage-recommandation{display:grid;gap:5px;margin:0 0 14px;padding:18px 20px;border:1px solid rgba(12,29,21,.12);
  border-left:4px solid var(--pollen);border-radius:10px;background:rgba(255,253,244,.74)}
.pilotage-recommandation>span{color:var(--encre-3);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.pilotage-recommandation>strong{font-size:1.08rem}.pilotage-recommandation>p{margin:0;color:var(--encre-2)}
.pilotage-recommandation>small{margin-top:3px;color:var(--encre-3);line-height:1.45}
.pilotage-avant-apres{display:grid;gap:6px;margin:0 0 14px;padding:16px 20px;border:1px solid rgba(12,29,21,.12);border-radius:12px;background:var(--fond-2,#fff)}
.pilotage-avant-apres>span{color:var(--encre-3);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}
.pilotage-avant-apres>strong{font-size:1rem}.pilotage-avant-apres>p{margin:0;color:var(--encre-2)}
.pilotage-avant-apres>small{color:var(--encre-3);line-height:1.45}
.pilotage-avant-apres-lignes{display:grid;gap:6px;margin:4px 0 0}.pilotage-avant-apres-lignes>div{display:grid;gap:2px}
.pilotage-avant-apres-lignes dt{color:var(--encre-3);font-size:.75rem}.pilotage-avant-apres-lignes dd{margin:0;font-size:.95rem}
.pilotage-avant-apres-lignes dd em{margin-left:6px;font-style:normal;font-weight:700;color:var(--vert-fonce,#2f6b57)}
.pilotage-selection,.pilotage-dossier,.encours-termines{margin:10px 0;border:1px solid rgba(12,29,21,.12);border-radius:9px;background:var(--white)}
.pilotage-selection>summary,.pilotage-dossier>summary,.encours-termines>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:48px;padding:10px 14px;cursor:pointer;color:var(--evergreen);font-size:.82rem;font-weight:800}
.pilotage-selection>summary span,.pilotage-dossier>summary span{color:var(--encre-3);font-size:.75rem;font-weight:650}
.pilotage-selection-corps{padding:0 14px 10px;border-top:1px solid rgba(12,29,21,.08)}
.pilotage-dossier>.diagnostic-dossier{border-radius:0 0 8px 8px}
/* DOUZE HYPOTHESES SEPAREES PAR DES POINTS forment un mur ou l'on ne
   distingue pas la fin de l'une du debut de la suivante. Des jetons, donc —
   et la classe `.jeton` existait deja, servie partout ailleurs. */
.diagnostic-hypotheses{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px;font-size:.84rem;color:var(--encre-2)}
.diagnostic-hypotheses em{font-style:normal}
/* L'analyse de l'environnement en cours : le classement peut encore bouger,
   la page le DIT au lieu de laisser deviner un bouton eteint. */
.pilotage-horizon{display:flex;align-items:center;gap:8px;margin:10px 0;padding:9px 12px;
  border:1px solid rgba(255,206,59,.5);border-radius:8px;background:rgba(255,206,59,.14);
  font-size:.8rem;font-weight:650;color:#715900}
.pilotage-horizon::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--pollen);animation:pilotage-pouls 1.4s ease-in-out infinite}
@keyframes pilotage-pouls{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.pilotage-horizon::before{animation:none}}
/* Ce que valent les masques dans la pre-etude, dit sous leur palette. */
.elev-masques-note{grid-column:2;margin-top:2px;font-size:.75rem;color:var(--encre-3)}
/* D'OU VIENT CETTE VALEUR. Une donnee deduite d'une source publique et une
   valeur inventee par defaut avaient la meme apparence : un champ rempli.
   Celle-ci dit sa source, et invite a la corriger — une hypothese n'a jamais
   le statut d'une reponse. */
.champ-provenance{display:block;margin-top:3px;font-size:.75rem;font-style:italic;
  color:var(--encre-3)}
/* SON JUMEAU, POUR LE CAS INVERSE. Un champ que les bases n'ont pas su
   remplir restait muet, et trois muets sur cinq passaient pour facultatifs.
   Ils ne le sont pas : le relais et le moteur les repondent A NOTRE PLACE.
   Meme place, meme forme, ton different -- une provenance rassure, un
   manque appelle une reponse. Pas de rouge : ce n'est pas une erreur, c'est
   un trou dans les donnees, et le formulaire n'accuse personne. */
/* LA RAISON D'UN ECHEC. Elle etait envoyee par le relais et jamais lue.
   Technique, oui — c'est mieux qu'un silence, et c'est ce qui part dans un
   message d'aide. */
.encours-raison{grid-column:1/-1;margin:6px 0 0;padding:8px 11px;border-radius:var(--r-sm);
  background:rgba(165,47,32,.07);color:var(--encre-2);font-size:.78rem;line-height:1.55}
.encours-raison code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95em;
  overflow-wrap:anywhere;color:#8b291e}
.champ-manque{display:block;margin-top:3px;padding-left:9px;font-size:.75rem;
  line-height:1.45;color:var(--encre-2);border-left:2px solid rgba(240,161,42,.55)}

/* ══ PAGE EN COURS ══════════════════════════════════════════════════════ */
.encours-compte{font-size:.95rem;font-weight:700;margin:0 0 12px}
.encours-liste{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.encours-ligne{display:flex;align-items:center;gap:12px;padding:8px 12px;
  border:1px solid rgba(12,29,21,.12);border-radius:10px;font-size:.88rem}
.encours-ligne .jeton{margin-left:auto}
.encours-mesures{color:var(--encre-2);font-size:.8rem}
.encours-ligne--en_cours{border-color:rgba(255,206,59,.75);background:rgba(255,206,59,.07)}
.encours-termines>.encours-liste{margin:0;padding:0 10px 10px}
/* LA PAGE DE SIMULATION EN DEUX BLOCS (11/09) : le calcul du bâtiment, qui
   chiffre l'étude, puis les calculs par façade, qui disent qui contribue. */
.encours-bloc{margin:0 0 18px}
.encours-sous-titre{margin:0 0 2px;font-size:.95rem}
.encours-note{margin:0 0 10px;color:var(--encre-2);font-size:.8rem;line-height:1.45}
.encours-termines>.encours-note{margin:0;padding:0 12px 8px}
@media(max-width:700px){
  .pilotage-recommandation{padding:15px 14px}
  .pilotage-selection>summary,.pilotage-dossier>summary{align-items:flex-start;flex-direction:column;gap:2px}
  .pilotage-selection-corps{padding:0 10px 8px}
  .pilotage-groupe-tete{flex-direction:column}.pilotage-groupe-tete .button{min-height:44px}
  .pilotage-action--collee{align-items:stretch;flex-direction:column;margin-left:-8px;margin-right:-8px}
  .pilotage-action--collee .button{width:100%;min-height:48px}
  .encours-ligne{display:grid;grid-template-columns:1fr auto;gap:4px 8px}
  .encours-ligne .jeton{grid-column:2;grid-row:1/3}.encours-mesures{grid-column:1}
}

/* Le jeton d'ombrage du focus : le chiffre, puis sa methode en petit. */
.facade-ombrage{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:8px}
.facade-ombrage small{font-size:.75rem;color:var(--encre-3);max-width:26ch;text-align:right;line-height:1.25}
/* LES MASQUES POSÉS SUR LE MUR : le béton brun, le balcon et sa rambarde,
   la joue, la toile du store, les lames du brise-soleil. */
.elev-masque-pose rect{fill:#8a6d1f;stroke:rgba(12,29,21,.45);stroke-width:1;cursor:pointer}
.elev-masque-pose--balcon rect{fill:#7d7469}
.elev-masque-pose--joue rect{fill:#8d8478}
.elev-masque-pose--brise_soleil>rect{fill:rgba(138,109,31,.16);stroke-dasharray:2 2}
.elev-masque-pose--sel rect{stroke:var(--evergreen);stroke-width:2.4}
.elev-masque-pose--erreur rect{stroke:#a52f20;stroke-width:1.6;stroke-dasharray:4 2}
.elev-masque-pose .elev-garde-corps{fill:rgba(125,116,105,.45)}
.elev-store-toile{fill:rgba(214,73,51,.55);stroke:rgba(12,29,21,.35);stroke-width:1}
.elev-brise-lame{stroke:#6f5a1e;stroke-width:1.4;stroke-linecap:round;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════════
   LES CIBLES CLIQUABLES (point 9 de l'audit approfondi, 24/08 au soir).

   MESURE : vingt-deux cibles sous 44 px sur quatre pages, dont les SORTIES DE
   SECOURS a 17 px de haut — « Compléter sur la page bâtiment → », « ← Les
   façades ». Un lien de rattrapage qu'on n'arrive pas a toucher est un
   cul-de-sac de plus, et c'est exactement celui qu'on cherche quand on est
   bloque.

   DEUX SEUILS, parce qu'une souris et un doigt ne visent pas pareil, et que
   44 px partout sur un ecran d'ordinateur boursouflerait l'interface :
     - a la souris, 24 px : le minimum WCAG 2.2 AA (« Target Size (Minimum) ») ;
     - au doigt (`pointer:coarse`), 44 px : la cible confortable.

   On gagne la hauteur par du REMPLISSAGE, jamais par de la taille de texte —
   le plancher typographique vient d'etre pose, il ne s'agit pas de le
   contourner par le bas.
   ═══════════════════════════════════════════════════════════════════════════ */
.fil-lien,.projet-retour,.fil-pas a,.fil-pas span,.rep-suppr,
.lien-bouton,.projet-titre-modifiable,.app-deconnexion{
  min-height:24px;display:inline-flex;align-items:center}
.fil-lien,.projet-retour{padding-block:4px}
.fil-pas a,.fil-pas span{padding-block:3px}

@media(pointer:coarse){
  /* AU DOIGT. `pointer:coarse` vise le doigt, pas la largeur d'ecran : une
     tablette large se touche aussi, et un telephone branche a un clavier se
     vise toujours au doigt. */
  .fil-lien,.projet-retour,.fil-pas a,.fil-pas span,.rep-suppr,
  .lien-bouton,.projet-titre-modifiable,.app-deconnexion,
  .button,.app-nav a,.app-aide,.app-marque,.app-scene summary,.pliant>summary,
  .pilotage-selection>summary,.pilotage-dossier>summary,.encours-termines>summary{
    min-height:44px}
  .app-scene summary{display:flex;align-items:center}
  .diagnostic-dossier>details>summary,.facades-arriere>details>summary{min-height:44px}
  .fil-lien,.projet-retour{padding-block:12px}
  .rep-suppr,.app-deconnexion{min-width:44px}
  .pliant>summary,.pilotage-selection>summary,.pilotage-dossier>summary,
  .encours-termines>summary{display:flex;align-items:center}
}

/* LE PLAFONNEMENT SE VOIT AUTANT QU'IL SE LIT. Un avertissement qui dit
   qu'un chiffre a ete borne ne doit pas ressembler a une note de bas de
   page : c'est une correction de facteur quatre, pas une nuance. */
.studio-vente-plafond{margin:12px 0 0;padding:10px 14px;border-radius:8px;
  border-left:4px solid #8a5a14;background:rgba(138,90,20,.07);
  color:#5c3c0d;font-size:.86rem;line-height:1.45}
.studio-vente-plafond small{display:block;margin-top:4px;font-size:.78rem;opacity:.8}
/* L'INCOHÉRENCE PHYSIQUE (11/09) : elle n'avait AUCUNE règle, et s'affichait
   en texte courant. Elle suspend désormais la vente : même famille que le
   plafond, au ton de l'avertissement. */
.studio-vente-anomalie{margin:12px 0 0;padding:10px 14px;border-radius:8px;
  border-left:4px solid #8a3c14;background:rgba(138,60,20,.07);
  color:#6d3311;font-size:.86rem;line-height:1.45}
.studio-vente-anomalie small{display:block;margin-top:4px;font-size:.78rem;opacity:.85}

/* ══ LE MODE SAVANT ═════════════════════════════════════════════════════ */
/* Dense et sobre : cet ecran s'adresse a quelqu'un qui vient VERIFIER, pas
   se laisser convaincre. Aucune mise en scene, des chiffres alignes. */
.savant-pliant{margin:14px 0;border:1px solid rgba(12,29,21,.14);border-radius:var(--r-sm);
  background:var(--surface-creuse,rgba(151,175,154,.08))}
.savant-intro{margin:0 0 10px;color:var(--encre-2);font-size:.82rem;line-height:1.5}
.savant-note{margin:8px 0 0;color:var(--encre-3);font-size:.76rem;line-height:1.5}
.savant-mesures{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:8px;margin:0}
.savant-mesures>div{padding:9px 11px;border-radius:var(--r-xs);background:var(--white);
  border:1px solid rgba(12,29,21,.1)}
/* 0,75 rem, PAS 0,72 : le plancher typographique du depot (essais du 24/08).
   Un libelle de dossier se lit ou ne se lit pas — il n'y a pas de « presque ». */
.savant-mesures dt{color:var(--encre-3);font-size:.75rem;line-height:1.35}
.savant-mesures dd{margin:2px 0 0;font-weight:800;font-size:.95rem;
  font-variant-numeric:tabular-nums}
.savant-attente{margin:0;color:var(--encre-2);font-size:.85rem}
.savant-echec{margin:0;padding:9px 12px;border-radius:var(--r-sm);
  background:rgba(165,47,32,.07);color:var(--encre-2);font-size:.82rem;line-height:1.55}
/* CE QUE LE FILTRE A COUPE. Pas en rouge : ce n'est pas une erreur, c'est une
   decision, et elle se lit sans dramatiser. */
.savant-retires,.savant-inconnus{margin:12px 0 0;padding:9px 12px;border-radius:var(--r-sm);
  background:var(--white);border-left:2px solid rgba(240,161,42,.55);
  color:var(--encre-2);font-size:.78rem;line-height:1.6}
.savant-inconnus{border-left-color:rgba(12,29,21,.22)}
.savant-retires code,.savant-inconnus code,.savant-echec code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  padding:1px 5px;border-radius:4px;background:rgba(12,29,21,.06);overflow-wrap:anywhere}
.savant-retires small,.savant-inconnus small{display:block;margin-top:4px;color:var(--encre-3)}
@media(max-width:560px){ .savant-mesures{grid-template-columns:1fr} }

/* Les quatre sections savantes : chacune son titre, son bouton, son aveu. */
.savant-section{margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(12,29,21,.1)}
.savant-section:first-of-type{margin-top:10px;padding-top:0;border-top:0}
.savant-section>h4{margin:0 0 9px;font-size:.88rem;font-weight:800;color:var(--evergreen)}
/* LE TABLEAU DEFILE DANS SON PROPRE CADRE plutot que d'imposer sa largeur a
   la page : sept colonnes ne tiennent pas sur un telephone, et une page qui
   defile lateralement est une page cassee. */
.savant-cadre-table{overflow-x:auto;margin:8px 0 0;border:1px solid rgba(12,29,21,.12);
  border-radius:var(--r-sm);background:var(--white)}
.savant-table{width:100%;border-collapse:collapse;font-size:.78rem}
.savant-table--large{min-width:640px}
.savant-table th,.savant-table td{padding:7px 10px;text-align:right;
  border-bottom:1px solid rgba(12,29,21,.08);font-variant-numeric:tabular-nums}
.savant-table thead th{position:sticky;top:0;background:var(--surface-creuse,rgba(151,175,154,.12));
  color:var(--encre-3);font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  text-align:right;white-space:nowrap}
.savant-table th[scope="row"],.savant-table thead th:first-child{text-align:left;font-weight:700;color:var(--evergreen)}
.savant-table th[scope="row"] small{display:block;margin-top:2px;color:var(--encre-3);
  font-weight:400;font-size:.75rem;line-height:1.4;white-space:normal;max-width:34ch}
.savant-table td small{display:block;color:var(--encre-3);font-weight:400;font-size:.75rem}
.savant-table tbody tr:last-child th,.savant-table tbody tr:last-child td{border-bottom:0}
/* La solution que le MOTEUR retient — pas forcement la notre, et c'est ce
   qui rend le tableau croyable. */
.savant-recommande{background:rgba(255,206,59,.14)}
.savant-recommande em{display:block;margin-top:2px;color:var(--encre-2);font-size:.75rem;font-style:normal}
/* Le rang porte un chiffre, pas du texte — mais le plancher ne fait pas
   cette distinction, et il a raison : un 7 illisible est illisible. */
.savant-rang{display:inline-grid;place-items:center;width:19px;height:19px;margin-right:5px;
  border-radius:50%;background:rgba(12,29,21,.08);color:var(--encre-2);font-size:.75rem;font-weight:800}
.savant-limite{margin-top:14px;padding-top:10px;border-top:1px dashed rgba(12,29,21,.16)}

/* La bascule du droit savant, dans la carte d'un compte. */
.admin-savant{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px;
  padding-top:8px;border-top:1px solid rgba(12,29,21,.09);font-size:.78rem}
.admin-savant>span{color:var(--encre-3)}
.admin-savant-etat{padding:2px 8px;border-radius:999px;background:rgba(12,29,21,.07);
  color:var(--encre-2);font-size:.75rem;font-weight:800}
.admin-savant-etat--ouvert{background:rgba(15,156,135,.13);color:#0b6b5c}
.admin-savant--doffice{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(12,29,21,.09);
  color:var(--encre-3);font-size:.75rem}
/* Les champs rendus bruts : en monospace, parce que ce sont des noms de
   champ et non des mots choisis. Les habiller en francais les ferait passer
   pour une mise en forme qui n'a pas eu lieu. */
.savant-mesures--brut dt code,.savant-table th code,.savant-table thead th code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
  overflow-wrap:anywhere;text-transform:none;letter-spacing:0}

/* La condition de reference, a cote des chiffres qu'elle conditionne. Un
   filet la distingue d'une note ordinaire : sans elle, les energies de
   cette section seraient fausses pour toutes les autres nuits. */
.savant-reference{margin-top:8px;padding-left:9px;
  border-left:2px solid rgba(240,161,42,.55);color:var(--encre-2)}

/* LE TYPE DE BATIMENT, marqueur discret a cote du niveau de preuve.
   Le tertiaire est SIGNALE et non ecarte : 66 % de la liste courte de
   Bordeaux n'est pas du logement, et un commercial doit le voir avant
   d'appeler un syndic qui n'existe pas. Discret, parce qu'un bailleur
   social ou un hopital reste un client. */
.etude-type {
  font-size: 0.75rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  border: 1px solid currentColor;
  opacity: 0.75;
}
.etude-type--tertiaire { font-weight: 600; opacity: 1; }

/* LE CLIMAT DU TERRITOIRE, sous le bandeau. Il porte DEUX facteurs cote a
   cote parce que le classement des marches ne survit pas au choix de
   l'indicateur : Grenoble est 1re de France sur le chauffage et 13e sur le
   total. Les montrer ensemble evite de trancher en silence. */
.etude-climat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: rgba(59, 111, 182, .06);
  font-size: 0.8rem;
}
.etude-climat div { display: flex; gap: 0.4em; align-items: baseline; }
.etude-climat dt { opacity: 0.7; }
.etude-climat dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Outils explicites de correction, utilisables aussi au toucher. */
.croquis-gestes{display:flex;gap:8px;flex-wrap:wrap}
.croquis-gestes [aria-pressed="true"],.elev-outils [aria-pressed="true"]{background:var(--pollen,#ffd45a);color:#19241c}
.elev-outils button{min-height:44px}

.croquis-scene-cadre{max-width:none}
.croquis .croquis-scene-cadre [data-croquis-scene]{max-width:none;aspect-ratio:auto;height:clamp(420px,62vh,680px)}
@media(max-width:600px){.croquis .croquis-scene-cadre [data-croquis-scene]{height: min(75vh,480px)}}

/* Les commandes restent au contact de la carte, y compris en plein écran. */
.croquis-scene-cadre .croquis-etat{position:absolute;top:10px;left:64px;right:64px;z-index:4;
  padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.95);font-size:.8rem;pointer-events:none}
.croquis-scene-cadre .croquis-etat:empty{display:none}
/* LES TROIS OUTILS DE CONTOUR REJOIGNENT LA COLONNE (10/09).
   Ils occupaient une barre horizontale a droite des quatre autres, en
   boutons de formulaire : autre forme, autre taille, autre place. Meme
   colonne, meme icone, meme carre -- et un filet qui dit qu'ils forment un
   groupe a part, celui qui corrige un contour deja ferme. */
.croquis-scene-cadre .croquis-gestes{position:absolute;left:var(--outils-marge);z-index:4;
  top:calc(var(--outils-marge) + 4 * var(--h-md) + 3 * var(--outils-ecart) + 6px);
  flex-direction:column;gap:var(--outils-ecart);padding-top:10px;
  border-top:1px solid var(--trait-fort)}
.croquis-gestes[hidden]{display:none}
.croquis-parametres{display:grid;gap:16px}
.croquis-parametres[hidden]{display:none}
.croquis-position{pointer-events:none}
.croquis-ici{left:auto;top:auto;right:10px;bottom:150px}
.croquis-echelle{min-width:0}

/* ═══════════════════════════════════════════════════════════════════════════
   L'ATELIER DE DESSIN DE FACADE (11/09)

   « Trop fouillis. Trouve comment faire quelque chose de tres dessin visuel.
   Inspire-toi de Figma ou d'AutoCAD, surtout du dessin d'archi. »

   MESURE AVANT LA REFONTE, a 1440 x 900 : le dessin occupait 882 px de haut
   et AUCUN outil n'etait visible en meme temps que lui — la palette
   commencait a 1 110 px, la barre de quinze boutons texte a 1 254, les
   actions a 1 386. Dans un outil de dessin, les outils encadrent la planche ;
   ici ils etaient ranges dessous.

   LA PLANCHE. Quatre zones, les memes que dans tout logiciel de dessin :
     - le RAIL a gauche : les outils, en icones, une lettre chacun ;
     - la SCENE au centre, sur un calque pointe comme une feuille de dessin ;
     - l'INSPECTEUR a droite : les proprietes de ce qui est selectionne, puis
       la bibliotheque et les gestes qui portent sur toute la facade ;
     - la BARRE D'ETAT en bas : echelle, accroche, calque photo, aide.
   Le code ne voit rien de ce changement : il ne cherche que des crochets
   `data-elev-*`, et chacun existe toujours, une seule fois.
   ═══════════════════════════════════════════════════════════════════════════ */
.elev-monte.croquis-elevation{padding:0;border:0;background:transparent;gap:0}
.elev-atelier{display:grid;height:min(780px,82dvh);min-height:480px;
  grid-template-columns:auto minmax(0,1fr) minmax(270px,320px);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"tete tete tete" "rail scene inspecteur" "etat etat etat";
  border:1px solid var(--trait-fort);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface,#fffdf4);color:var(--evergreen)}

/* La tete : le nom de la facade et ce qu'elle porte deja. */
.elev-atelier>.elev-tete{grid-area:tete;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  padding:11px 14px;border-bottom:1px solid var(--trait)}
.elev-tete-titre{display:grid;gap:1px;min-width:0;flex:1 1 260px}
.elev-atelier .elev-tete h3{margin:0;font-size:1rem;line-height:1.25}
.elev-atelier .elev-bilan{margin:0;font-size:.78rem;font-weight:700;color:var(--encre-2)}
.elev-atelier .elev-preuves{margin:0}

/* Le rail : des outils, pas des liens. Meme carre que les outils du plan. */
.elev-rail{grid-area:rail;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 8px;border-right:1px solid var(--trait);background:var(--surface-creuse,#f4f1e3)}
.elev-outil{display:grid;place-items:center;width:var(--h-md,38px);height:var(--h-md,38px);padding:0;
  border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--white);
  color:var(--evergreen);cursor:pointer;transition:background .15s,border-color .15s}
.elev-outil:hover{border-color:var(--evergreen)}
.elev-outil:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-outil[aria-pressed="true"]{background:var(--pollen);border-color:var(--evergreen)}
.elev-outil:disabled{opacity:.35;cursor:default}
.elev-outil svg{width:20px;height:20px}
.elev-rail-filet{width:70%;height:1px;margin:4px 0;background:var(--trait-fort)}

/* La scene : une feuille de dessin. Le point du calque tous les 16 px donne
   l'echelle a l'oeil, comme le papier pointe d'un dessinateur, sans rien
   pretendre mesurer — les cotes du dessin, elles, sont exactes. */
/* La facade au milieu de sa feuille ; au coin des qu'on zoome, sinon son
   bord haut-gauche deviendrait inatteignable (centrer et defiler ne vont
   pas ensemble — voir la modale, qui l'a appris la premiere). */
.elev-atelier>.elev-scene{grid-area:scene;min-height:0;border:0;border-radius:0;padding:10px 0;
  display:grid;align-items:center;
  background-color:#fbfaf3;
  background-image:radial-gradient(rgba(12,29,21,.14) 1px,transparent 1.3px);
  background-size:16px 16px}

/* ── L'INSPECTEUR, REFAIT LE 11/09 ────────────────────────────────────────
   « Données techniques de la façade : horrible, imbuvable. » Un seul
   vocabulaire désormais, celui des panneaux de propriétés : une rubrique par
   propriété, son nom en petites capitales, des champs qui disent leur nom en
   toutes lettres avec l'unité dedans, des segments pour les choix courts, des
   gestes qui portent une icône ET un mot. */
.elev-inspecteur{grid-area:inspecteur;display:grid;align-content:start;gap:10px;min-width:0;min-height:0;
  overflow:auto;overscroll-behavior:contain;padding:12px;border-left:1px solid var(--trait)}
.elev-panneau{display:grid;gap:10px;padding:12px;border:1px solid var(--trait);
  border-radius:var(--r-sm);background:var(--white)}
.elev-panneau[hidden]{display:none}
.elev-panneau-tete{display:flex;align-items:center;gap:10px;min-width:0}
.elev-panneau-titre{margin:0;font-size:.7rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--encre-3)}
/* Ce qui est choisi se nomme en clair, pas en petites capitales. */
.elev-selection .elev-panneau-titre{font-size:.9rem;font-weight:800;letter-spacing:0;text-transform:none;
  color:var(--evergreen);line-height:1.25}
.elev-picto{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--trait);
  border-radius:var(--r-sm);background:var(--surface-creuse,#f4f1e3)}
.elev-picto:empty{display:none}
.elev-picto svg{width:34px;height:34px}

.elev-rubrique{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
.elev-rubrique[hidden]{display:none}
.elev-rubrique--pleine{grid-template-columns:minmax(0,1fr)}
.elev-rubrique-titre{grid-column:1/-1;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.elev-champ{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 4px;min-width:0;
  padding:4px 8px 5px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--white);cursor:text}
.elev-champ:focus-within{border-color:var(--evergreen);box-shadow:var(--anneau)}
.elev-champ>span{grid-column:1/-1;font-size:.75rem;font-weight:650;line-height:1.2;color:var(--encre-3)}
.elev-champ input,.elev-champ select{width:100%;min-width:0;padding:1px 0;border:0;background:transparent;
  font:inherit;font-size:.9rem;font-weight:700;color:var(--evergreen);font-variant-numeric:tabular-nums}
.elev-champ input:focus,.elev-champ select:focus{outline:none}
.elev-champ input::placeholder{color:var(--encre-3);font-weight:600;font-style:italic}
.elev-champ i{font-style:normal;font-size:.75rem;color:var(--encre-3)}
.elev-champ--large{grid-column:1/-1}
.elev-champ--liste,.elev-champ--liste select{cursor:pointer}
/* Les flèches d'un champ numérique mangeaient la moitié d'un champ étroit
   (« 18( » pour 180°) : les touches ↑ ↓ suffisent, comme dans tout outil de dessin. */
.elev-champ input[type=number]{-moz-appearance:textfield;appearance:textfield}
.elev-champ input[type=number]::-webkit-inner-spin-button,
.elev-champ input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* DANS L'APPLICATION, LES CHAMPS DE L'INSPECTEUR GARDENT LEUR FORME. Les
   règles de formulaire de la scène (0,4,1 pour un input) mettaient les
   libellés en capitales et encadraient le champ DANS son cadre — vu dans
   l'atelier de la page façades, invisible au banc, qui n'a pas de scène. */
.app-scene .elev-champ{font-size:inherit;font-weight:inherit;letter-spacing:0;text-transform:none;color:inherit}
.app-scene .elev-champ input:not([type=checkbox]):not([type=radio]):not([type=range]),
.app-scene .elev-champ select{min-height:0;padding:1px 0;border:0;border-radius:0;background:transparent;
  font:700 .9rem/1.3 var(--font-body);color:var(--evergreen)}

/* Les segments : un choix parmi quelques-uns, lisible d'un coup d'œil. */
.elev-segments{display:flex;flex-wrap:wrap;gap:4px}
.elev-segments--grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.elev-segment{min-height:30px;padding:4px 9px;border:1px solid var(--trait-fort);border-radius:var(--r-sm);
  background:var(--white);color:var(--evergreen);font:inherit;font-size:.78rem;font-weight:700;line-height:1.2;cursor:pointer}
.elev-segment:hover{border-color:var(--evergreen)}
.elev-segment:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-segment.est-actif{background:var(--evergreen);border-color:var(--evergreen);color:var(--eggshell)}
.elev-segment.est-propose{border-style:dashed;border-color:var(--evergreen);background:rgba(255,206,59,.18)}
.elev-segment[aria-disabled="true"]{cursor:default}
.elev-segments--niveaux .elev-segment{min-width:48px}
.elev-aide-champ{margin:0;font-size:.75rem;line-height:1.45;color:var(--encre-3)}
.elev-aide-champ:empty{display:none}
.elev-statut{margin:0;font-size:.78rem;line-height:1.4;color:var(--encre-2)}
.elev-statut:empty{display:none}

/* LA PORTÉE : une question posée AVANT de modifier — elle se voit. */
.elev-portee{display:grid;gap:6px;padding:8px;border-radius:var(--r-sm);background:rgba(255,206,59,.16)}
.elev-portee[hidden]{display:none}
.elev-portee .elev-segments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.elev-portee .lien-bouton{justify-self:start;font-size:.75rem}

/* Les gestes : une icône ET un nom. */
.elev-gestes{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px}
.elev-gestes--texte{grid-template-columns:repeat(auto-fit,minmax(124px,1fr))}
.elev-geste{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:5px 8px;
  border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--surface,#fffdf4);color:var(--evergreen);
  font:inherit;font-size:.78rem;font-weight:700;line-height:1.2;cursor:pointer}
.elev-geste:hover{border-color:var(--evergreen);background:var(--white)}
.elev-geste:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-geste svg{flex:none;width:16px;height:16px}
.elev-geste[aria-expanded="true"]{background:var(--pollen);border-color:var(--evergreen)}
.elev-geste--danger{color:#8b291e}
.elev-geste--danger:hover{border-color:#a52f20}
.elev-lien-secondaire{justify-self:start;font-size:.78rem}
.elev-repeter-actions{display:flex;align-items:center;gap:12px}

/* LA FAÇADE : sa boussole à côté de son nom, ce que dit le dessin en quatre
   lignes, ce qui lui fait face. */
.elev-facade-identite{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.elev-facade-champs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center}
.elev-boussole{width:76px;height:76px;border-radius:50%;cursor:grab;touch-action:none}
.elev-boussole:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-boussole-fond{fill:var(--surface-creuse,#f4f1e3);stroke:var(--trait-fort);stroke-width:1}
.elev-boussole-lettre{font-size:8px;font-weight:800;fill:var(--encre-3);text-anchor:middle}
.elev-boussole-mur{stroke:var(--evergreen);stroke-width:3.4;stroke-linecap:round}
.elev-boussole-aiguille{stroke:var(--tangerine);stroke-width:2;stroke-linecap:round}
.elev-boussole-pointe{fill:var(--tangerine)}
.elev-boussole-nom{font-size:.82rem;font-weight:800;color:var(--evergreen);font-variant-numeric:tabular-nums}
.elev-facade-resume{display:grid;margin:0}
.elev-facade-resume div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--trait-fort)}
.elev-facade-resume div:last-child{border-bottom:0}
.elev-facade-resume dt{font-size:.78rem;color:var(--encre-2)}
.elev-facade-resume dd{margin:0;font-size:.82rem;font-weight:750;color:var(--evergreen);text-align:right;font-variant-numeric:tabular-nums}
.elev-facade-supprimer{justify-self:start;font-size:.78rem;color:#8b291e}

/* LA BIBLIOTHÈQUE : des onglets, puis des tuiles à l'échelle — le picto, le
   nom, les dimensions, et le compte de ce qui est déjà posé. */
.elev-inspecteur .elev-masques-note{grid-column:auto}
.elev-onglets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:2px;
  border-radius:var(--r-sm);background:var(--surface-creuse,#f4f1e3)}
.elev-onglet{min-height:30px;padding:4px 2px;border:0;border-radius:calc(var(--r-sm) - 2px);background:transparent;
  color:var(--encre-2);font:inherit;font-size:.75rem;font-weight:750;cursor:pointer}
.elev-onglet.est-actif{background:var(--white);color:var(--evergreen);box-shadow:0 1px 2px rgba(12,29,21,.14)}
.elev-onglet:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-modeles,.elev-masques{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.elev-modeles[hidden],.elev-bib-protections[hidden]{display:none}
.elev-bib-protections{display:grid;gap:6px}
.elev-bib-sous-titre{margin:6px 0 0;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--encre-3)}
.elev-modele,.elev-masque{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;
  column-gap:8px;min-width:0;padding:6px 8px;border:1px solid var(--trait);border-radius:var(--r-sm);
  background:var(--white);color:var(--evergreen);font:inherit;text-align:left;cursor:pointer}
.elev-modele:hover,.elev-masque:hover{border-color:var(--evergreen)}
.elev-modele:focus-visible,.elev-masque:focus-visible{outline:none;box-shadow:var(--anneau)}
.elev-modele.est-actif,.elev-masque.est-actif{border-color:var(--evergreen);background:rgba(255,206,59,.22);
  box-shadow:inset 0 0 0 1px var(--evergreen)}
.elev-modele.est-perso{border-style:dashed}
.elev-masque[aria-disabled="true"]{opacity:.6}
.elev-tuile-picto{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px}
.elev-tuile-picto svg{width:40px;height:40px}
/* Un mot long se coupe à la syllabe, pas n'importe où : « Persienne/s »
   se lisait au banc dans une tuile étroite. */
.elev-tuile-nom{font-size:.78rem;font-weight:750;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
.elev-masque .elev-tuile-nom{grid-row:1/3}
.elev-tuile-dims{font-size:.75rem;color:var(--encre-3);font-variant-numeric:tabular-nums}
.elev-modele b{position:absolute;top:4px;right:4px;min-width:18px;padding:0 5px;border-radius:999px;
  background:var(--evergreen);color:var(--eggshell);font-size:.75rem;line-height:18px;text-align:center}
/* Les pictogrammes : le verre bleu pâle, la porte en bois, le béton, la toile. */
.elev-picto-sol{stroke:var(--trait-fort);stroke-width:1}
.elev-picto-verre{fill:#cfe7ec;stroke:var(--evergreen);stroke-width:1}
.elev-picto-porte{fill:#b99a74;stroke:var(--evergreen);stroke-width:1}
.elev-picto-poignee{fill:var(--evergreen)}
.elev-picto-meneau{stroke:var(--evergreen);stroke-width:.8}
.elev-picto-beton{fill:#8d8478}
.elev-picto-trait{fill:none;stroke:#8d8478;stroke-width:1.2}
.elev-picto-lame{stroke:#6f5a1e;stroke-width:1.3;stroke-linecap:round}
.elev-picto-toile{fill:rgba(214,73,51,.55);stroke:rgba(12,29,21,.35);stroke-width:.8}
.elev-picto-coffre{fill:#e8e2cc;stroke:rgba(12,29,21,.55);stroke-width:.8}
.elev-picto-vantail{fill:#d9cfb0;stroke:rgba(12,29,21,.5);stroke-width:.8}
.elev-picto-interieur{stroke:rgba(12,29,21,.5);stroke-width:1.2;stroke-dasharray:2 1.5}

/* ── SUR LE DESSIN : sélection, erreurs, poignées, aperçus ─────────────────
   La sélection bat la preuve (le trait tangerine se voit sur un contour
   vérifié), l'erreur bat la sélection : un chevauchement choisi reste un
   chevauchement. */
.elev-fenetre--sel .elev-verre,.elev-fenetre--sel .elev-porte{stroke:var(--tangerine);stroke-width:2}
.elev-fenetre--sel .elev-verre{fill:#ffe9a8}
.elev-fenetre--ancre .elev-verre,.elev-fenetre--ancre .elev-porte{stroke-width:2.6}
.elev-fenetre--erreur .elev-verre,.elev-fenetre--erreur .elev-porte{stroke:#a52f20;stroke-width:1.8;stroke-dasharray:4 2}
.elev-conflit{fill:rgba(165,47,32,.3);stroke:#a52f20;stroke-width:1;pointer-events:none}
.elev-alerte{pointer-events:none}
.elev-alerte circle{fill:#a52f20;stroke:var(--white);stroke-width:1.5}
.elev-alerte text{fill:var(--white);font-size:10px;font-weight:900;text-anchor:middle}
.elev-alerte--avertissement circle{fill:#9a6400}
.elev-poignee-zone{fill:transparent}
.elev-poignee--n .elev-poignee-zone,.elev-poignee--s .elev-poignee-zone{cursor:ns-resize}
.elev-poignee--e .elev-poignee-zone,.elev-poignee--w .elev-poignee-zone{cursor:ew-resize}
.elev-poignee--ne .elev-poignee-zone,.elev-poignee--sw .elev-poignee-zone{cursor:nesw-resize}
.elev-poignee--nw .elev-poignee-zone,.elev-poignee--se .elev-poignee-zone{cursor:nwse-resize}
.elev-poignee-carre{fill:var(--white);stroke:var(--tangerine);stroke-width:1.5;pointer-events:none}
.elev-poignee:hover .elev-poignee-carre{fill:var(--tangerine)}
.elev-fantome{fill:rgba(207,231,236,.5);stroke:var(--evergreen);stroke-width:1;stroke-dasharray:4 3;pointer-events:none}
.elev-fantome--refus{fill:rgba(165,47,32,.14);stroke:#a52f20}
.elev-trace{fill:rgba(255,206,59,.22);stroke:var(--evergreen);stroke-width:1.2;stroke-dasharray:5 3;pointer-events:none}
.elev-trace-cote{font-size:10px;font-weight:800;fill:var(--evergreen);text-anchor:middle;pointer-events:none}
.elev-cote-sel--v text{text-anchor:end}

/* ── LES ERREURS EN TÊTE : un compte par gravité, la liste au clic ───────── */
.elev-tete-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.elev-erreurs{position:relative}
.elev-erreurs[hidden]{display:none}
.elev-erreurs>summary{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px;border-radius:999px;
  background:rgba(165,47,32,.1);color:#8b291e;font-size:.78rem;font-weight:800;list-style:none;cursor:pointer}
.elev-erreurs>summary::-webkit-details-marker{display:none}
.elev-erreurs>summary::before{content:"!";display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:#a52f20;color:var(--white);font-size:.75rem}
.elev-erreurs--avertissement>summary{background:rgba(154,100,0,.12);color:#6e4700}
.elev-erreurs--avertissement>summary::before{content:"?";background:#9a6400}
/* La liste s'ouvre VERS L'INTÉRIEUR : ancrée à gauche, l'atelier (overflow
   caché) la coupait à son bord droit — « Deux baies se ch… », vu au banc. */
.elev-erreurs ul{position:absolute;z-index:8;top:calc(100% + 6px);right:0;width:min(360px,80vw);margin:0;padding:6px;
  list-style:none;border:1px solid var(--trait-fort);border-radius:var(--r-sm);background:var(--white);
  box-shadow:0 12px 32px rgba(12,29,21,.18)}
.elev-erreur button{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;width:100%;padding:7px 8px;
  border:0;border-radius:var(--r-sm);background:transparent;color:var(--evergreen);font:inherit;font-size:.8rem;
  font-weight:700;text-align:left;cursor:pointer}
.elev-erreur button:hover,.elev-erreur button:focus-visible{outline:none;background:var(--surface-creuse,#f4f1e3)}
.elev-erreur b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#a52f20;
  color:var(--white);font-size:.75rem}
.elev-erreur--avertissement b{background:#9a6400}
.elev-erreur small{display:block;margin-top:2px;font-size:.75rem;font-weight:600;color:var(--encre-3)}

/* AU DOIGT, RIEN SOUS 44 PX — la souris garde un inspecteur compact. */
@media (pointer:coarse){
  .elev-segment,.elev-geste,.elev-onglet,.elev-champ,.elev-erreurs>summary{min-height:var(--h-lg,44px)}
}
.elev-atelier .button--ghost{color:var(--evergreen);background:var(--white);border:1px solid var(--trait-fort)}
.elev-atelier .button--ghost:hover{border-color:var(--evergreen);background:var(--surface,#fffdf4)}
.elev-inspecteur .elev-calage-aide{margin:0}

/* La barre d'etat : l'echelle, l'accroche, le calque, et l'aide en une ligne. */
.elev-etat{grid-area:etat;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  padding:7px 12px;border-top:1px solid var(--trait);background:var(--surface-creuse,#f4f1e3);font-size:.78rem}
.elev-etat .elev-zoom{border-right:1px solid var(--trait-fort)}
.elev-etat .lien-bouton{font-size:.78rem}
/* Le « ? » de la barre d'état ouvre son panneau vers le haut. */
.elev-etat .elev-aide-raccourcis{margin-left:auto}
.elev-etat .aide-raccourcis-bouton{width:30px;height:30px;font-size:.85rem}
.elev-etat .aide-raccourcis .aide-raccourcis-panneau{top:auto;bottom:calc(100% + 8px);left:auto;right:0}
/* L'aimant coupé s'éteint. */
.elev-outil--bascule[aria-pressed="false"]{color:var(--encre-3)}
.elev-outil--bascule[aria-pressed="false"] svg{opacity:.55}

/* Dans la modale : la planche prend tout l'ecran offert. */
.facade-editeur-dialogue .facade-elevation.elev-monte{min-height:0;padding:0}
.facade-editeur-dialogue .elev-atelier{height:min(900px,calc(100dvh - 26px));border:0;border-radius:0}
.facade-editeur-dialogue .elev-atelier>.elev-scene{max-height:none}
.facade-editeur-dialogue .elev-atelier>.elev-tete{position:static;margin:0;padding:11px 14px;background:transparent}

/* Au telephone : la planche s'empile, le rail devient une barre. */
@media(max-width:900px){
  /* LA SCENE SUIT SON DESSIN. Fixee a 58 % de l'ecran, elle offrait
     490 px a un mur de 20 m qui, ajuste a 326 px de large, n'en occupe
     que 130 : trois quarts de papier pointe vide entre le rail et les
     proprietes. Elle prend maintenant la hauteur du dessin, 240 px au moins. */
  .elev-atelier{height:auto;min-height:0;grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto minmax(240px,auto) auto auto;
    grid-template-areas:"tete" "rail" "scene" "inspecteur" "etat"}
  /* RIEN SOUS 44 PX AU DOIGT — mesure au banc a 390 px : quinze cibles
     dessous, dont les tuiles de protection a 26 px. */
  .elev-atelier .lien-bouton,.elev-atelier .elev-modele,.elev-atelier .elev-masque,
  .elev-atelier .elev-geste,.elev-atelier .elev-segment,.elev-atelier .button{min-height:var(--h-lg,44px)}
  .elev-atelier .elev-champ,.elev-atelier .elev-calque-voir{min-height:var(--h-lg,44px)}
  .elev-etat .aide-raccourcis-bouton{width:var(--h-lg,44px);height:var(--h-lg,44px)}
  .facade-editeur-dialogue .elev-atelier{height:auto}
  .elev-rail{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;border-right:0;border-bottom:1px solid var(--trait)}
  .elev-rail-filet{width:1px;height:28px;margin:0 4px}
  .elev-outil{width:var(--h-lg,44px);height:var(--h-lg,44px)}
  .elev-inspecteur{overflow:visible;border-left:0;border-top:1px solid var(--trait)}
}
.elev-atelier>.elev-scene.est-zoomee{align-items:start;justify-items:start}