/* ============================================================================
   Chrome permanent, et les DEUX gabarits.

   Le projet n'avait qu'un gabarit — une colonne de lecture de 960 px — dans
   lequel il rendait cinq choses de trois natures : deux vues de document, un
   schéma et deux éditeurs. Comme le gabarit était éditorial, l'en-tête faisait
   ~900 px, soit la hauteur d'un écran de portable : cliquer « Plan » ne montrait
   pas un pixel de plan, et l'outil devait sortir de la grille par un hack
   (`left:50%;transform:translateX(-50%)`) pour retrouver de la place.
   ========================================================================= */

.skip{
  position:absolute;left:var(--s-2);top:var(--s-2);z-index:100;
  transform:translateY(-200%);
  background:var(--primary);color:var(--primary-foreground);
  padding:var(--s-2) var(--s-3);border-radius:var(--radius-md);font-size:var(--t-xs);
}
.skip:focus{transform:none}

/* lu par les lecteurs d'écran, invisible à l'œil */
.vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --- barre d'application -------------------------------------------------
   Trois zones : où l'on travaille (à gauche), le projet (au centre), ce qui
   traverse tous les onglets (à droite). Le centre est vraiment au centre : les
   deux côtés prennent la même part de la largeur, quel que soit leur contenu. */
.appbar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--s-3);
  padding:var(--s-2) var(--s-4);
  background:var(--background);border-bottom:1px solid var(--border);
}
.appbar__start{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.appbar__end{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);min-width:0}
.appbar__nav{flex:none}
.appbar__nav[aria-expanded="true"]{background:var(--accent);border-color:var(--border-strong);color:var(--foreground)}

.appbar__mid{
  display:flex;align-items:baseline;gap:var(--s-3);
  text-decoration:none;color:inherit;line-height:var(--lh-tight);white-space:nowrap;
}
.appbar__mid b{font-size:var(--t-sm);font-weight:600;font-variation-settings:"wdth" 104}
.appbar__tot{font-size:var(--t-num-sm);font-weight:500;letter-spacing:-.01em;color:var(--soft-foreground)}
.appbar__tot .u{font-size:.78em;color:var(--muted-foreground);margin-left:.15em}
.appbar__theme{flex:none}

@media (max-width:760px){
  .appbar{padding-inline:var(--s-3);gap:var(--s-2)}
  .appbar__nav span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .appbar__mid b{display:none}
}

/* --- le menu déroulant -----------------------------------------------------
   Celui du thème, et les listes de Paramètres (`views/menu.js`). Un menu de
   shadcn — une surface `--popover`, des lignes, une coche pour ce qui est
   pris — qui s'ouvre en pop depuis le coin de son bouton, et sous lequel une
   pastille glisse de ligne en ligne. `--menu-x` dit de quel côté il s'aligne. */
.menu{position:relative;--menu-x:right}
.menu__list{
  position:absolute;inset-block-start:calc(100% + var(--s-1));inset-inline-end:0;z-index:70;
  min-inline-size:160px;padding:var(--s-1);
  display:flex;flex-direction:column;gap:1px;
  background:var(--popover);color:var(--popover-foreground);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  transform-origin:top var(--menu-x);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out);
}
/* Un déroulant qui s'ouvre sous le début de son bouton, et non sous sa fin. */
.menu--gauche{--menu-x:left}
.menu--gauche .menu__list{inset-inline:0 auto}
.menu__list[data-cote="haut"]{inset-block:auto calc(100% + var(--s-1));transform-origin:bottom var(--menu-x)}
.menu__list[data-etat="ferme"]{opacity:0;transform:scale(.95);transition-duration:var(--dur-1);pointer-events:none}
.menu__pastille{
  position:absolute;inset-block-start:0;inset-inline:var(--s-1);
  border-radius:var(--radius-md);background:var(--accent);
  opacity:0;pointer-events:none;
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-1) ease;
}
.menu__cap{
  position:relative;padding:var(--s-1) var(--s-2);
  font-size:var(--t-3xs);font-weight:600;letter-spacing:var(--track-caps);
  text-transform:uppercase;color:var(--muted-foreground);
}
.menu__sep{position:relative;block-size:1px;margin:var(--s-1) calc(var(--s-1) * -1);background:var(--border)}
/* Une ligne, un mot : le nom à gauche, la coche à droite. La description d'un
   choix passe dans l'infobulle — le menu reste serré. */
.menu__item{
  appearance:none;position:relative;display:flex;align-items:center;gap:var(--s-2);
  min-block-size:calc(var(--ctl-h) - var(--s-1));padding:0 var(--s-2);
  font:inherit;font-size:var(--t-xs);font-weight:500;color:inherit;text-align:start;
  background:none;border:0;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;
}
.menu__item span{flex:1}
.menu__item::after{content:"";inline-size:var(--s-3);text-align:end;font-weight:600}
.menu__item[aria-checked="true"]::after{content:"✓"}
/* La ligne visée ne s'allume pas : la pastille glisse dessous. */
.menu__item:focus{outline:none;color:var(--accent-foreground)}

/* --- la barre « Atelier et outils » ----------------------------------------
   Une ligne par onglet, son numéro devant. Elle POUSSE le contenu : le plan et
   la 3D se recadrent au lieu d'être recouverts. Sa hauteur de départ est celle
   de la barre d'application, MESURÉE par main.js (`--appbar-h`) — une
   géométrie, pas une valeur de dessin. */
.sidenav{
  position:fixed;z-index:35;
  inset-block:var(--appbar-h,52px) 0;inset-inline-start:0;
  inline-size:var(--sidebar-w);
  display:flex;flex-direction:column;overflow-y:auto;
  padding:var(--s-3) var(--s-2);
  background:var(--sidebar);color:var(--sidebar-foreground);
  border-inline-end:1px solid var(--sidebar-border);
}
.sidenav__list{display:flex;flex-direction:column;gap:2px}
.sidenav__item{
  appearance:none;display:flex;align-items:center;gap:var(--s-3);
  min-block-size:var(--ctl-h);padding:var(--s-1) var(--s-2);
  font:inherit;font-size:var(--t-sm);text-align:start;color:inherit;
  background:none;border:0;border-radius:var(--radius-md);cursor:pointer;
}
.sidenav__item:hover{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.sidenav__item:focus-visible{outline-color:var(--sidebar-ring)}
.sidenav__n{
  flex:none;inline-size:var(--s-5);display:inline-flex;justify-content:center;
  font-size:var(--t-2xs);color:var(--muted-foreground);
}
.sidenav__l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* une ligne : l'onglet, puis son cadenas */
.sidenav__row{display:flex;align-items:center;gap:0}
.sidenav__row>.sidenav__item{flex:1;min-width:0}
.sidenav__lock{
  appearance:none;flex:none;display:inline-flex;align-items:center;justify-content:center;
  inline-size:24px;block-size:var(--ctl-h);padding:0;
  background:none;border:0;border-radius:var(--radius-md);cursor:pointer;
  color:var(--faint-foreground);opacity:.55;
}
.sidenav__lock svg{inline-size:14px;block-size:14px}
.sidenav__lock:hover{opacity:1;background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.sidenav__lock:focus-visible{opacity:1;outline-color:var(--sidebar-ring)}
.sidenav__lock[data-etat="ferme"]{opacity:1;color:var(--foreground)}
.sidenav__lock[data-etat="fige"]{opacity:.8;color:var(--muted-foreground)}
/* Le cadre du projet n'est pas une étape : un filet le sépare de la chronologie. */
.sidenav__row.is-cadre{position:relative;margin-block-end:var(--s-3)}
.sidenav__row.is-cadre::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:calc(var(--s-2) * -1);
  block-size:1px;background:var(--sidebar-border);
}
.sidenav__item[aria-selected="true"]{
  background:var(--sidebar-primary);color:var(--sidebar-primary-foreground);font-weight:500;
}
.sidenav__item[aria-selected="true"] .sidenav__n{color:inherit;opacity:.72}

/* Ce que la barre prend à gauche : les deux gabarits le lisent. */
body.has-nav{--nav-off:var(--sidebar-w)}
/* Écran étroit : la barre se pose par-dessus, elle ne pousse plus rien. */
@media (max-width:900px){
  body.has-nav{--nav-off:0px}
  .sidenav{box-shadow:var(--shadow-lg);inline-size:min(var(--sidebar-w),86vw)}
}

/* --- les deux gabarits --------------------------------------------------- */
/* La colonne de lecture se centre dans la place que laisse la barre, pas sur
   toute la fenêtre : elle glisserait sinon dessous. */
body[data-kind="doc"] #panels{
  display:block;max-width:960px;
  margin-inline-start:max(var(--nav-off,0px),calc((100vw + var(--nav-off,0px) - 960px) / 2));
  margin-inline-end:auto;
  padding-inline:var(--s-5);padding-block:var(--s-6) var(--s-8);
}
/* Cadre plein : l'outil occupe la fenêtre au lieu de s'en échapper. */
body[data-kind="tool"] #panels{
  display:block;max-width:none;margin:0;margin-inline-start:var(--nav-off,0px);
  padding-inline:var(--s-4);padding-block:var(--s-4) var(--s-5);
}
#panels:focus-visible{outline:none}

/* --- introduction de l'onglet Programme ---------------------------------- */
.intro{border-bottom:1px solid var(--border);padding-bottom:var(--s-5)}
.intro__head h1{
  font-size:var(--t-xl);font-weight:600;font-variation-settings:"wdth" 112;
  letter-spacing:-.018em;line-height:var(--lh-tight);text-wrap:balance;margin:0;
}
.intro__lead{margin:var(--s-2) 0 0;max-width:62ch;color:var(--soft-foreground);font-size:var(--t-md)}

.intro__fig{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s-2) var(--s-6);margin-top:var(--s-5)}
.intro__big{
  margin:0;font-family:var(--font-mono);font-size:var(--t-num-lg);font-weight:500;
  letter-spacing:-.03em;line-height:.95;font-variant-numeric:tabular-nums;
}
.intro__big .u{font-size:.34em;letter-spacing:0;margin-left:.3em;color:var(--soft-foreground);font-weight:400}
.intro__break{
  display:grid;grid-template-columns:auto auto;gap:0 var(--s-3);margin:0 0 var(--s-1);
  font-size:var(--t-xs);
}
.intro__break dt{color:var(--muted-foreground)}
.intro__break dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}

/* --- surfaces à préciser, saisissables sur place ------------------------- */
.vars{margin-top:var(--s-5);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--s-4)}
.vars__head h2{margin:0}
.vars__note{margin:var(--s-1) 0 var(--s-3);font-size:var(--t-xs);color:var(--soft-foreground);max-width:70ch}
.vars__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:0 var(--s-5);
}
.vars__list li{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s-1) var(--s-3);
  padding:var(--s-2) 0;border-top:1px solid var(--border-soft);font-size:var(--t-xs);
}
.vars__name{color:var(--soft-foreground);min-width:0}
.vars__state{
  display:block;font-size:var(--t-3xs);text-transform:uppercase;
  letter-spacing:var(--track-caps);font-weight:600;color:var(--muted-foreground);
}
.vars__list li.is-set .vars__state{color:var(--ok)}
.vars__field{display:grid;grid-template-columns:auto auto;align-items:center;gap:0 var(--s-2);justify-items:end}
.vars__field input{
  width:5.5em;font:inherit;font-family:var(--font-mono);font-size:var(--t-xs);
  text-align:right;padding:var(--s-1) var(--s-2);
  border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--card);color:var(--foreground);min-height:var(--tap-min);
}
.vars__unit{font-size:var(--t-3xs);color:var(--muted-foreground)}
.vars__tot{grid-column:1/-1;font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.vars__msg{grid-column:1/-1;margin:0;font-size:var(--t-3xs);color:var(--destructive);text-align:right}
.vars__list li.is-bad input{border-color:var(--destructive)}

/* --- légende des familles ------------------------------------------------ */
.legend{margin-top:var(--s-5)}
.legend h2{margin:0 0 var(--s-2)}
.legend__track{display:flex;gap:2px;height:20px}
.legend__seg{border-radius:var(--radius-sm);min-width:2px}
.legend__key{
  list-style:none;margin:var(--s-3) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:0 var(--s-5);
}
.legend__key li{
  display:grid;grid-template-columns:11px 1fr auto;align-items:baseline;gap:0 var(--s-2);
  font-size:var(--t-xs);padding:var(--s-1) 0;
}
.legend__key .sw{width:11px;height:11px;border-radius:var(--radius-sm);position:relative;top:1px}
.legend__key .sw--dashed{background:none;border:1px dashed var(--muted-foreground)}
.legend__lb{color:var(--foreground)}
.legend__lb i{display:block;font-style:normal;font-size:var(--t-2xs);color:var(--muted-foreground);line-height:var(--lh-snug)}
.legend__vl{font-family:var(--font-mono);color:var(--soft-foreground);font-variant-numeric:tabular-nums}
.legend__extra{border-top:1px solid var(--border-soft);margin-top:var(--s-1);padding-top:var(--s-2)}

/* Le technique est un neutre : en dessin d'architecture il se hachure, et la
   hachure est l'encodage secondaire qui le rend identifiable sans la couleur. Elle n'apparaissait pas : les mêmes éléments reçoivent
   un `style.background` RACCOURCI en inline, qui remet `background-image` à
   `none` avec la spécificité d'un style en ligne. Le JS ne pose plus que
   `backgroundColor`. */
.is-hatched{
  background-image:repeating-linear-gradient(45deg,
    var(--hatch-ink) 0 1.5px, transparent 1.5px 5px);
}

/* --- barre de vue -------------------------------------------------------- */
.viewbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);
  padding-block:var(--s-4);border-bottom:1px solid var(--border);
}
.viewbar .spacer{flex:1 1 var(--s-5)}

/* --- divulgation progressive --------------------------------------------
   Règle anti-accordéon : au plus un repli par panneau, et son résumé nomme ce
   qu'il contient au lieu de dire « en savoir plus ». */
.disclose{margin-top:var(--s-4)}
.disclose>summary{
  cursor:pointer;font-size:var(--t-xs);color:var(--soft-foreground);
  padding:var(--s-2) 0;list-style:none;display:flex;align-items:center;gap:var(--s-2);
  min-height:var(--tap-min);
}
.disclose>summary::-webkit-details-marker{display:none}
.disclose>summary::before{
  content:"";width:0;height:0;flex:none;
  border-left:5px solid currentColor;border-block:4px solid transparent;
  transition:transform var(--dur-2) var(--ease);
}
.disclose[open]>summary::before{transform:rotate(90deg) translateX(1px)}
.disclose>summary:hover{color:var(--foreground)}
.disclose--sources{border-top:1px solid var(--border);margin-top:var(--s-6)}
.disclose--sources p{
  margin:0 0 var(--s-3);font-size:var(--t-xs);color:var(--soft-foreground);
  line-height:var(--lh-loose);max-width:72ch;
}
.disclose--sources b{color:var(--foreground);font-weight:500}

/* --- la circulation, neuvième ligne des surfaces à préciser --------------
   Elle n'est pas un local : elle ferme la liste, séparée par un filet, et dit
   son arithmétique sur place — c'est une part de la surface BÂTIE, et la
   confusion avec « un supplément de 18 % » valait 200 m². */
.vars__list li.vars__circ{
  grid-template-columns:1fr auto;
  border-top:1px solid var(--border);margin-top:var(--s-2);padding-top:var(--s-3);
}
.vars__why{
  grid-column:1/-1;margin:var(--s-1) 0 0;
  font-size:var(--t-3xs);color:var(--muted-foreground);line-height:var(--lh-snug);
}
/* Elle n'a pas de couleur de famille parce qu'elle n'est aucun usage : sa
   pastille est un filet, pas un aplat. */
.legend__key .sw--circ{
  background:none;border:1px solid var(--faint-foreground);
  background-image:repeating-linear-gradient(45deg,
    var(--hatch-ink) 0 1px, transparent 1px 4px);
}