/* L'EXEMPLE PUBLIC — exemple.html, et la boîte « Explorer un exemple » de
   l'app (cahier des charges découverte, lot D1, 11/09). Les dessins viennent
   de facade-dessins.css, les jetons de kelveen.css. Un seul accent, le
   pollen, pour dire « simulé » et l'action ; « sans » en gris, « avec » en
   sarcelle, comme les résultats de l'app. */

.exemple{--ex-sans:#66756d;--ex-avec:#0f9c87;--ex-avec-encre:#0a5f52;--ex-trait:rgba(12,29,21,.12);
  --ex-doux:rgba(12,29,21,.68);--ex-fond:var(--white,#fffdf4);
  display:grid;gap:16px;min-width:0;color:var(--evergreen,#0c1d15);font-family:var(--font-body)}
.exemple :is(h3,h4,p,dl,dd,ul,figure){margin:0}
.exemple button{font:inherit;color:inherit}
.exemple :is(button,[tabindex="0"]):focus-visible{outline:2px solid var(--evergreen,#0c1d15);outline-offset:2px}

/* Le libellé permanent : il reste là pendant qu'on parcourt. */
.exemple-bandeau{position:sticky;top:var(--exemple-haut,10px);z-index:6;justify-self:start;
  display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:5px 14px 5px 5px;
  border-radius:999px;background:rgba(255,253,244,.95);font-size:.86rem;font-weight:700;line-height:1.3;
  box-shadow:0 0 0 1px rgba(12,29,21,.14),0 8px 20px rgba(12,29,21,.08)}
.exemple-preuve{display:inline-block;flex:none;padding:3px 9px;border-radius:999px;background:var(--pollen,#ffce3b);
  color:var(--evergreen,#0c1d15);font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}

/* Les trois vues, dans l'ordre de l'app : bâtiment, étude, résultats. */
.exemple-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;
  border-radius:14px;background:rgba(12,29,21,.06)}
.exemple-onglets button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ex-doux);font-weight:750;cursor:pointer}
.exemple-onglets button[aria-selected="true"]{background:var(--ex-fond);color:var(--evergreen,#0c1d15);
  box-shadow:0 1px 3px rgba(12,29,21,.16)}
.exemple-onglet-num{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;
  background:rgba(12,29,21,.08);font-size:.75rem;font-variant-numeric:tabular-nums}
.exemple-onglets button[aria-selected="true"] .exemple-onglet-num{background:var(--pollen,#ffce3b)}
.exemple-vue{min-width:0}
.exemple-vue:focus-visible{outline:2px solid var(--evergreen,#0c1d15);outline-offset:4px;border-radius:6px}

.exemple-grille{display:grid;gap:24px;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
@media(max-width:900px){.exemple-grille{grid-template-columns:1fr}}
.exemple-figure{display:grid;gap:12px;min-width:0}

/* La maquette : on la tourne au doigt, on la rapproche aux boutons. */
.exemple-cadre{position:relative;user-select:none;touch-action:pan-y}
.exemple-cadre .fac-maquette{--fac-maq-h:min(52vh,420px);cursor:ew-resize}
.exemple-cadre--tourne .fac-maquette{cursor:grabbing}
.exemple-outils{position:absolute;right:8px;top:8px;z-index:2;display:grid;gap:4px}
.exemple-outils button{width:44px;height:44px;display:grid;place-items:center;padding:0;
  border:1px solid rgba(12,29,21,.16);border-radius:10px;background:rgba(255,253,244,.92);
  font-size:1.05rem;font-weight:700;line-height:1;cursor:pointer}
.exemple-outils button:hover{border-color:rgba(12,29,21,.34)}
.exemple-geste{position:absolute;left:10px;bottom:10px;padding:3px 10px;border-radius:999px;
  background:rgba(255,253,244,.86);font-size:.75rem;color:var(--ex-doux);pointer-events:none}

.exemple-facades{display:flex;flex-wrap:wrap;gap:6px}
.exemple-facades button{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;
  border:1px solid rgba(12,29,21,.16);border-radius:999px;background:var(--ex-fond);font-size:.86rem;font-weight:700;cursor:pointer}
.exemple-facades button[aria-pressed="true"],.exemple-perimetre button[aria-pressed="true"]{
  border-color:var(--evergreen,#0c1d15);box-shadow:inset 0 0 0 1px var(--evergreen,#0c1d15)}

.exemple-face{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--ex-trait);border-radius:12px;background:var(--ex-fond)}
.exemple-face figcaption{font-size:.84rem;line-height:1.45;color:var(--ex-doux)}
.exemple-face figcaption strong{color:var(--evergreen,#0c1d15)}
.exemple-face .fac-elev svg{max-height:170px}

.exemple-texte{display:grid;gap:14px;min-width:0}
.exemple-texte h3,.exemple-resultats-tete h3{font-size:1.3rem;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.exemple-intro{font-size:.95rem;line-height:1.55;max-width:62ch}
.exemple-fiche>div{display:grid;grid-template-columns:minmax(104px,32%) 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--ex-trait)}
.exemple-fiche dt{padding-top:2px;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ex-doux)}
.exemple-fiche dd{font-size:.93rem;line-height:1.45;font-variant-numeric:tabular-nums}
.exemple-note{font-size:.82rem;line-height:1.55;color:var(--ex-doux);max-width:64ch}

/* Le périmètre : chaque façade dit si elle est retenue, et pourquoi. */
.exemple-perimetre{display:grid;gap:8px;padding:0;list-style:none}
.exemple-perimetre button{width:100%;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;
  padding:10px 12px;border:1px solid rgba(12,29,21,.14);border-radius:12px;background:var(--ex-fond);text-align:left;cursor:pointer}
.exemple-perimetre-nom{font-weight:800}
.exemple-etat{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(12,29,21,.07);
  font-size:.75rem;font-weight:800;letter-spacing:.02em;vertical-align:1px}
.exemple-etat--retenue{background:rgba(15,156,135,.15);color:var(--ex-avec-encre)}
.exemple-raison{grid-column:2;font-size:.84rem;line-height:1.45;color:var(--ex-doux)}

/* Les résultats : sans / avec, l'unité sur chaque nombre. */
.exemple-resultats{display:grid;gap:18px}
.exemple-resultats-tete{display:grid;gap:4px}
.exemple-resultats-tete p{font-size:.86rem;color:var(--ex-doux)}
.exemple-ligne{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px 24px;padding:14px 0;border-top:1px solid var(--ex-trait)}
@media(max-width:700px){.exemple-ligne{grid-template-columns:1fr}}
.exemple-ligne h4{font-size:1rem}
.exemple-ligne p{margin-top:3px;font-size:.8rem;line-height:1.45;color:var(--ex-doux)}
.exemple-barres{display:grid;gap:6px;align-content:start}
.exemple-barre{display:grid;grid-template-columns:7.5em minmax(40px,1fr) auto;align-items:center;gap:10px;
  font-size:.8rem;font-variant-numeric:tabular-nums}
.exemple-barre i{display:block;width:var(--l,0%);height:10px;border-radius:5px;background:var(--ex-sans)}
.exemple-barre--avec i{background:var(--ex-avec)}
.exemple-barre b{font-weight:750;white-space:nowrap}
.exemple-ecart{justify-self:end;font-size:.82rem;font-weight:800;color:var(--ex-avec-encre);font-variant-numeric:tabular-nums}

/* Les deux monnaies, ensemble : l'euro avec son carbone, le carbone avec son facteur. */
.exemple-monnaies{display:grid;gap:6px;padding:14px 16px;border-radius:12px;background:rgba(15,156,135,.08)}
.exemple-monnaies-valeurs{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:1.25rem;font-variant-numeric:tabular-nums}
.exemple-monnaies-valeurs b:last-child{color:var(--ex-avec-encre)}
.exemple-monnaies p:last-child{font-size:.8rem;line-height:1.5;color:var(--ex-doux)}

.exemple-details{border-top:1px solid var(--ex-trait)}
.exemple-details summary{min-height:44px;display:flex;align-items:center;font-weight:800;cursor:pointer}
.exemple-details[open] summary{margin-bottom:8px}
.exemple-details>.exemple-note{margin-top:10px}
.exemple-courbes{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.exemple-courbe{display:grid;gap:6px;min-width:0}
.exemple-courbe figcaption{font-size:.82rem;font-weight:750}
.exemple-courbe svg{width:100%;height:auto;display:block}
.exemple-courbe text{font-size:10px;fill:var(--ex-doux);font-variant-numeric:tabular-nums}
.exemple-graduation{stroke:var(--ex-trait);stroke-width:1}
.exemple-trace-sans{fill:none;stroke:var(--ex-sans);stroke-width:2;stroke-dasharray:4 3}
.exemple-trace-avec{fill:none;stroke:var(--ex-avec);stroke-width:2.4;stroke-linejoin:round}
.exemple-legende{display:flex;flex-wrap:wrap;gap:14px;font-size:.76rem;color:var(--ex-doux)}
.exemple-cle{display:inline-flex;align-items:center;gap:6px}
.exemple-cle::before{content:"";width:18px;height:0;border-top:2px dashed var(--ex-sans)}
.exemple-cle--avec::before{border-top:2.4px solid var(--ex-avec)}

.exemple-preuve-bloc{display:grid;gap:6px;padding:14px 16px;border-left:3px solid var(--pollen,#ffce3b);
  border-radius:0 12px 12px 0;background:rgba(255,206,59,.1);font-size:.84rem;line-height:1.5}
.exemple-preuve-bloc .exemple-preuve{margin-right:4px;vertical-align:1px}

.exemple-suite{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.exemple-indisponible{padding:14px 16px;border-radius:12px;background:rgba(214,73,51,.08);color:var(--tangerine-ink,#a52f20)}

/* La page publique. */
.exemple-entete{padding:128px 0 30px}
.exemple-entete h1{max-width:18ch;margin:10px 0 16px;font-size:clamp(2.2rem,5vw,4rem);line-height:.98;letter-spacing:-.05em;text-wrap:balance}
.exemple-lede{max-width:62ch;margin:0 0 22px;font-size:1.06rem;line-height:1.6;color:rgba(12,29,21,.8)}
.exemple-entete-actions{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.exemple-lien{color:inherit;font-weight:750;text-decoration-color:var(--pollen,#ffce3b);text-decoration-thickness:2px;text-underline-offset:4px}
.exemple-corps{padding:10px 0 56px}
body:has(.site-header:not(.is-hidden)) .exemple-corps .exemple-bandeau{--exemple-haut:84px}
@media(max-width:760px){.exemple-entete{padding-top:104px}}

/* La boîte de l'app : par-dessus l'atelier, qui reste où on l'a laissé. */
dialog.exemple-dialogue{width:min(1120px,calc(100vw - 20px));max-height:calc(100dvh - 20px);padding:0;border:0;
  border-radius:18px;background:var(--eggshell,#f5f2e1);color:var(--evergreen,#0c1d15);box-shadow:0 24px 70px rgba(12,29,21,.3)}
dialog.exemple-dialogue::backdrop{background:rgba(12,29,21,.5)}
.exemple-dialogue-tete{position:sticky;top:0;z-index:7;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;background:var(--eggshell,#f5f2e1);border-bottom:1px solid rgba(12,29,21,.1)}
.exemple-dialogue-tete h2{margin:0;font-size:1.1rem}
.exemple-dialogue-fermer{width:44px;height:44px;display:grid;place-items:center;flex:none;padding:0;border:1px solid rgba(12,29,21,.16);
  border-radius:50%;background:var(--white,#fffdf4);color:var(--evergreen,#0c1d15);cursor:pointer}
.exemple-dialogue-fermer svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.exemple-dialogue-corps{padding:16px 18px 22px}
.exemple-dialogue-corps .exemple-bandeau{--exemple-haut:74px}

@media(prefers-reduced-motion:reduce){.exemple *{transition:none!important}}