@layer layout{
  /* ── En-tête ──
     Barre PLATE : un filet, pas de liseré dégradé, pas de relief. Une console
     d'infrastructure garde son chrome silencieux pour que la couleur, rare,
     serve au contenu. L'identité tient au logo, à l'accent et aux icônes. */
  /* FIXE, pas « sticky » : un sticky se décolle silencieusement dès qu'un
     ancêtre porte overflow ou transform - ce qui arrive dans les vues qui
     montent leur propre conteneur. `fixed` ne dépend d'aucun ancêtre.
     La barre ne prenant plus de place dans le flux, `main` la réserve via
     --hh-bar (hauteur du contenu + les deux paddings + le filet). */
  header{position:fixed;top:0;left:0;right:0;z-index:20;backdrop-filter:blur(10px);
    background:var(--header-bg);border-bottom:1px solid var(--line);
    /* Le fond et le filet du bas traversent l'écran, le CONTENU se cale dans le
       canal : la barre reste une barre, sans flotter au milieu du vide. */
    padding-block:var(--sp-8);
    padding-inline:max(18px,calc((100% - var(--canal,980px))/2 + var(--canal-pad,18px)));
    display:flex;align-items:center;gap:var(--sp-14)}
  .brand{display:flex;align-items:center;gap:var(--sp-6);flex:1 1 0;min-width:0}
  /* Marque « Pilote » : version compacte (3 anneaux) car sous 32 px les six
     anneaux de la version complete se referment. Neutre : elle prend --txt.
     Posée dans une TUILE (fond + filet + rayon court) : le signe se lit comme
     l'icône d'une application, pas comme un pictogramme flottant dans la barre.
     Le glyphe garde ~20 px utiles, la tuile fait la hauteur des contrôles. */
  /* La tuile de marque : fond blanc LÉGÈREMENT teinté de la couleur principale
     (le même `--chrome-bg` que les pilules — une seule recette pour une seule
     intention), filet gris clair incliné vers l'accent, et AUCUNE ombre : la
     teinte et le filet suffisent à poser le signe. */
  /* Le calage retenait la galaxie : 6 px de marge sur 40 ne lui laissaient que
     28 px, et un système d'orbites est large mais PLAT — il disparaît vite.
     Ramené à 2 px, le glyphe occupe 36 px.
     Le fond est plus clair que celui des pilules (5 % d'accent contre 12) :
     une tuile de marque n'est pas un contrôle, elle doit se faire oublier
     derrière le signe. D'où aussi un filet à opacité réduite. */
  .brand-mark{width:var(--hh-brand);height:var(--hh-brand);flex:none;padding:var(--sp-2);box-sizing:border-box;
    color:var(--txt);border-radius:var(--radius);
    /* Filet d'un demi-pixel : sur un écran à densité doublée il tombe sur un
       pixel physique et donne un trait vraiment fin. Sur un écran classique le
       navigateur l'arrondit — le filet reste dessiné, simplement pas plus fin
       qu'un pixel. Aucun risque de disparition. */
    border:.5px solid color-mix(in srgb,color-mix(in srgb,var(--accent) 14%,var(--line)) 45%,transparent);
    background:color-mix(in srgb,var(--accent) 5%,var(--card));
    box-shadow:none}
  .brand .logo{width:34px;height:34px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#3a3a40,#161619);
    display:grid;place-items:center}
  .logo-mark{width:19px;height:19px;fill:none;stroke:var(--on-solid);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  .brand-txt{display:flex;align-items:center;gap:var(--sp-10)}
  header h1{font-size:var(--fs-lg);margin:0;font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
  header h1 span{color:var(--accent)}
  .env-pill{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-medium);
    font-family:var(--font-mono);color:var(--mut);background:var(--card2);
    border:1px solid var(--line);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill)}
  .env-led{width:7px;height:7px;border-radius:50%;background:var(--ok);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 25%,transparent)}
  @media (prefers-reduced-motion:no-preference){ .env-led{animation:pulse 2.4s ease-in-out infinite} }
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
  header .sub{color:var(--mut);font-size:var(--fs-md);flex:1}
  /* ── Système d'en-tête harmonisé ──
     Tous les contrôles d'en-tête partagent une même grammaire : hauteur 40px,
     « pilule » de regroupement identique (.island & .view-toggle), boutons-icônes
     carrés de 40px pour la paire IA (Pilote · Live), même teintes partout.
     Réglage central : --hh (hauteur contrôle) / --hr (rayon pilule) /
     --hsq (rayon des boutons carrés du centre). */
  /* `--hr-in` : rayon intérieur CONCENTRIQUE (extérieur moins le padding).
     Sans lui, chaque élément de la pilule inventait son arrondi (4 px pour les
     vues, 6 px pour la pastille) et les courbes ne se répondaient pas. */
  header{--hh:34px;--hr:9px;--hsq:7px;--hpad:4px;--hr-in:calc(var(--hr) - var(--hpad))}
  /* La réserve dérive des MÊMES termes que la barre (hauteur de contrôle +
     les deux paddings + le filet). Le padding était écrit en dur : la barre ne
     suivait donc pas la densité alors que la réserve, elle, la suivait — 3,2 px
     d'écart en mode aéré, et le contenu qui remontait sous la barre. */
  :root{--hh-ctl:34px;--hh-brand:36px;
    /* La barre est aussi haute que son plus grand objet : les contrôles OU la
       marque. `max()` évite d'avoir à retenir lequel gagne — agrandir la
       marque suffit, la réserve suit. */
    --hh-bar:calc(max(var(--hh-ctl),var(--hh-brand)) + var(--sp-8) * 2 + 1px)}
  header{--hh-ctl:34px}
  /* Réservé sur BODY et non sur `main` : `.wrap` pose déjà un padding et,
     plus spécifique, il l'emportait - le contenu passait sous la barre. */
  body{padding-top:var(--hh-bar)}
  /* Zone centrale - « island bar » flottant qui regroupe les outils (discussions,
     imprimante, alchimie, mode résultat, factory). Centrée quelles que soient les
     largeurs des zones gauche/droite (les deux côtés ont flex:1). */
  .hcenter{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);flex:0 0 auto}
  /* Pilule de regroupement commune (centre + bascule de vues à droite). */
  .island,.view-toggle{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--hh);padding:var(--hpad);
    /* Le groupe doit se LIRE comme un groupe : sur fond clair, un fond à 4 %
       et un filet pâle disparaissaient dans la barre, et les boutons semblaient
       posés au hasard. Le contenant se voit, sans peser. */
    background:color-mix(in srgb,var(--txt) 5%,transparent);
    border:1px solid var(--line);border-radius:var(--hr)}
  .island>button.icon,.island>.icon{width:calc(var(--hh) - var(--hpad)*2);height:calc(var(--hh) - var(--hpad)*2);
    border:0;background:transparent;border-radius:calc(var(--hsq) - 3px);color:var(--mut);
    transition:background .15s ease,color .15s ease,transform .12s ease}
  .island>button.icon svg.ic,.island>.icon svg.ic{width:18px;height:18px}
  .island>button.icon:hover,.island>.icon:hover{background:var(--card);color:var(--txt)}
  .island>button.icon:active,.island>.icon:active{transform:scale(.94)}
  .hactions{display:flex;align-items:center;gap:var(--sp-8);flex:1 1 0;justify-content:flex-end}
  .hsep{width:1px;height:22px;background:var(--line)}
  /* Paire IA (Pilote · Live) - boutons ronds « vedette », à gauche de l'island
     centrale, dans la zone centrale (.hcenter).
     flex:none → ne se déforment jamais en ellipse quand la rangée se resserre. */
  .hcenter>.cockpit-btn{flex:none;width:var(--hh);height:var(--hh);border-radius:var(--hsq)}
  /* Pilote : c'est L'action de l'en-tête, pas une icône de plus - il porte son
     libellé et prend la forme d'une pilule. Sa géométrie vit dans 09-ai.css
     (couche `modules`, celle qui possède .brain-btn) : la poser ici serait
     écrasée par la cascade de couches. */
  .hcenter>.brain-btn{flex:none;height:var(--hh)}
  /* Pilule centrale (outils) - coins assortis aux boutons carrés qu'elle contient. */
  .hcenter .island{border-radius:calc(var(--hsq) + 2px)}
  /* CTA accent - même hauteur, coins assortis aux pilules. */
  .hactions>.primary{flex:none;height:var(--hh);border-radius:var(--hr);padding-inline:14px;font-weight:var(--fw-strong)}
  /* Bouton « Installer » PWA (cf. CDC_PWA.md, Lot 5) - caché tant que non installable. */
  .install-btn[hidden]{display:none}
  .view-toggle .vt-seg[hidden]{display:none}
  .island[hidden]{display:none}
  .install-btn svg.ic{color:var(--accent)}
  .install-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card))}
  /* Bascule de vues (en-tête) - Accueil · Discovery · Paramètres.
     Segmented control compact : track de fond discret (effet « rail ») dérivé du
     texte → s'adapte à tout thème, + pastille active surélevée qui glisse. */
  /* ── Bascule de droite : un rail, pas une barre transparente ──
     Même grammaire que la bascule de l'accueil (.grp-seg) : un track teinté
     + un filet clair, sur lequel glisse la pastille active. Teinte plus légère
     ici (6 % contre 10 %) : posé sur l'en-tête BLANC, le même gris pesait plus
     que sur le fond de page.
     En `--card`, le groupe se confondait avec l'en-tête blanc et les trois
     boutons semblaient posés au hasard - le rail les rassemble. */
  /* Le GROUPE porte la teinte d'accent (et non plus un gris neutre) ; la
     pastille du segment actif devient claire. L'accent dit « ce rail est
     actif », le blanc dit « c'est ici que vous êtes » - deux informations,
     deux traitements, au lieu d'un accent qui servait aux deux. */
  /* `--hh`/`--hr`/`--hpad`/`--hr-in` redéclarées ici (pas seulement sur `header`) :
     le composant est aussi posé hors en-tête (Paramètres…) et n'hériterait sinon
     de rien, `header` n'étant pas un ancêtre de ces panneaux. */
  .view-toggle{--hh:34px;--hr:9px;--hpad:4px;--hr-in:calc(var(--hr) - var(--hpad));
    position:relative;gap:var(--sp-4);
    background:var(--chrome-bg);
    border:0}
  .view-toggle .vt-sep{display:none}
  /* Pastille surélevée qui glisse derrière le segment actif (positionnée + révélée en JS). */
  .view-toggle .vt-ind{position:absolute;top:var(--hpad);left:0;height:calc(100% - var(--hpad)*2);width:0;
    border-radius:var(--hr-in);background:var(--on-solid);
    box-shadow:var(--shadow-sm);
    opacity:0;pointer-events:none;z-index:0;
    transition:transform .24s cubic-bezier(.4,0,.2,1),width .24s cubic-bezier(.4,0,.2,1),opacity .16s}
  /* Encre de la pilule : l'accent MÊLÉ à l'encre, pas un gris neutre. Le gris
     jurait avec le fond teinté ; ce mélange donne un bleu profond en thème
     clair et son pendant clair en sombre — et le contraste y gagne (8,9:1
     contre 6,1 en clair). Hover sans transition : demandé instantané. */
  .view-toggle .vt-seg{position:relative;z-index:1;border:0;background:transparent;color:var(--chrome-ink);
    font-weight:var(--fw-label);font-size:var(--fs-sm);padding:0 var(--sp-10);height:calc(var(--hh) - var(--hpad)*2);
    border-radius:var(--hr-in);gap:var(--sp-6);white-space:nowrap;transition:none}
  .view-toggle .vt-seg svg.ic{width:15px;height:15px;opacity:.8;transition:opacity .16s ease}
  .view-toggle .vt-seg:hover{color:var(--chrome-ink);background:var(--card)}
  .view-toggle .vt-seg.active:hover{background:transparent}
  .view-toggle .vt-seg.active{color:var(--accent);font-weight:var(--fw-label)}
  .view-toggle .vt-seg.active svg.ic{opacity:1}
  @media(max-width:900px){ .view-toggle .vt-seg span{display:none} .view-toggle .vt-seg{padding:var(--sp-4) var(--sp-8)} }

  /* ── Actions logées dans la pilule (Nouvelle création · Infrastructure) ──
     La barre alignait trois objets flottants côte à côte (un CTA plein, un
     bouton nu, la pilule des vues). Tout tient maintenant dans une seule
     pilule : les actions à gauche, un filet, les vues à droite. L'indicateur
     glissant ne les vise jamais (il ne suit que les segments à `data-view`). */
  .view-toggle .vt-act{position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--sp-6);
    border:0;background:transparent;color:var(--chrome-ink);cursor:pointer;font:inherit;
    font-size:var(--fs-sm);font-weight:var(--fw-label);white-space:nowrap;
    height:calc(var(--hh) - var(--hpad)*2);padding:0 var(--sp-10);
    border-radius:var(--hr-in);transition:none}
  .view-toggle .vt-act svg.ic{width:15px;height:15px;opacity:.8}
  .view-toggle .vt-act:hover{color:var(--chrome-ink);background:var(--card)}
  .view-toggle .vt-act:hover svg.ic{opacity:1}
  .view-toggle .vt-act:focus-visible{outline:none;box-shadow:var(--focus)}
  /* Le seul aplat d'accent de la barre : créer est l'action première. */
  .view-toggle .vt-cta{background:var(--accent);color:var(--on-solid);font-weight:var(--fw-label);
    box-shadow:none}
  .view-toggle .vt-cta svg.ic{opacity:1}
  .view-toggle .vt-cta:hover{background:var(--accent-h);color:var(--on-solid)}
  .view-toggle .vt-sep{width:1px;height:16px;align-self:center;margin-inline:5px;
    background:color-mix(in srgb,var(--txt) 14%,transparent);flex:none}
  /* Libellés compacts : les actions suivent la même règle que les vues.
     Étendu à `header` : `.view-toggle` est réutilisé hors en-tête (Paramètres…)
     et ce mode « icônes seules » n'a de sens QUE dans la barre, faute de place -
     ailleurs, sans lui, le composant se comprimait en carrés en gardant son
     texte visible (rien ne l'y masquait), le libellé débordait de sa case. */
  html[data-labels="icons"] header .view-toggle .vt-act>span{display:none}
  /* Carrés : largeur = hauteur, contenu centré. Un padding horizontal laissait
     des rectangles d'largeurs différentes selon la largeur de chaque icône. */
  html[data-labels="icons"] header .view-toggle .vt-act,
  html[data-labels="icons"] header .view-toggle .vt-seg{
    width:calc(var(--hh) - var(--hpad)*2);padding:0;justify-content:center}
  @media(max-width:1100px){ .view-toggle .vt-act:not(.vt-cta) span{display:none}
    .view-toggle .vt-act:not(.vt-cta){padding:0 var(--sp-8)} }
  /* Libellés compacts (Paramètres › Application › Densité) : boutons d'en-tête réduits à
     leur icône, le libellé passe en infobulle (data-tooltip). */
  html[data-labels="icons"] .hactions .install-btn>span[data-i18n],
  html[data-labels="icons"] .hactions>.primary>span[data-i18n],
  html[data-labels="icons"] .hactions>button>span,
  html[data-labels="icons"] header .view-toggle .vt-seg>span{display:none}
  html[data-labels="icons"] .hactions .install-btn{padding-inline:9px}
  /* En mode « icônes seules », le CTA n'a plus de libellé → bouton carré (40×40),
     cohérent avec les autres contrôles d'en-tête (au lieu d'un rectangle). */
  html[data-labels="icons"] .hactions>.primary{width:var(--hh);padding-inline:0;justify-content:center}
  html[data-labels="icons"] header .view-toggle .vt-seg{padding:var(--sp-4) var(--sp-8)}

  /* Bouton Cockpit (« Live ») - visière maison en trait simple (currentColor), identité propre.
     Pas de fond blanc au survol : teinte accent discrète + lentille qui s'accentue. */
  .cockpit-btn{position:relative;color:var(--mut);border-color:transparent;background:transparent}
  .cockpit-btn[hidden]{display:none!important}
  .cockpit-btn svg.ic.ck-vp{width:22px;height:22px}
  .cockpit-btn .ck-vp .ck-visor{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
  .cockpit-btn .ck-vp .ck-strap{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;opacity:.85}
  .cockpit-btn .ck-vp .ck-lens{fill:currentColor;stroke:none;opacity:.55;transition:opacity .18s}
  .cockpit-btn:hover{border-color:transparent;color:var(--accent);
    background:color-mix(in srgb,var(--accent) 12%,transparent)}
  .cockpit-btn:hover .ck-vp .ck-lens{opacity:1}
  .cockpit-btn .ck-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;
    background:transparent;transition:background .18s}
  .cockpit-btn.active{color:var(--accent);border-color:transparent;
    background:color-mix(in srgb,var(--accent) 16%,transparent)}
  .cockpit-btn.active .ck-vp .ck-lens{opacity:1}
  /* Pastille « en direct » : visible + pulsation seulement quand la fenêtre Cockpit est ouverte. */
  .cockpit-btn.active .ck-dot{background:var(--ok);box-shadow:0 0 0 2px var(--card);animation:ckPulse 1.6s ease-in-out infinite}
  @keyframes ckPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.78)}}
  @media(prefers-reduced-motion:reduce){ .cockpit-btn.active .ck-dot{animation:none} }
  @media(max-width:680px){ header .sub,.env-pill{display:none} }

  /* ── Canal central ──
     Le contenu vit dans une colonne bornée, tenue par un filet de chaque côté
     qui court du haut de la page jusqu'en bas : sur un écran large, une rangée
     étalée sur 1900 px éloigne le nom d'une création de ses environnements au
     point qu'il faut balayer des yeux pour relier les deux. L'en-tête se cale
     sur la MÊME colonne (voir `header` plus haut) : les deux textes s'alignent.
     `--canal` est la largeur totale, bordures comprises (box-sizing: border-box). */
  :root{--canal:980px;--canal-pad:18px;--wrap-pad-y:16px}
  /* La reserve verticale vient de --hh-bar, le terme qui SERT deja a decaler le
     body. `--header-h` n'a jamais ete defini nulle part : le repli de 51 px
     sous-estimait la barre de 5 px, l'application debordait donc en permanence
     d'une poignee de pixels et l'en-tete comme le rail des Parametres se
     decollaient au moindre coup de molette. Un seul terme, plus de repli. */
  .wrap{max-width:var(--canal);margin:0 auto;padding:var(--wrap-pad-y) var(--canal-pad);
    border-inline:1px solid var(--line);
    min-height:calc(100dvh - var(--hh-bar))}
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:var(--sp-14)}
  @media(max-width:520px){ .grid{grid-template-columns:1fr} }

  /* ── Carte projet ── */
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    display:flex;flex-direction:column}
  .ptop{padding:var(--sp-10) var(--sp-14);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--sp-10)}
  .ptop h2{font-size:var(--fs-base);margin:0;flex:1;font-weight:var(--fw-strong);letter-spacing:-.01em}
  .ver{font-size:var(--fs-sm);color:var(--mut);font-variant-numeric:tabular-nums;background:var(--bg2);
    border:1px solid var(--line);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill)}
  .badge{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--mut);text-transform:lowercase}

  .envs{padding:var(--sp-8) var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-6)}
  .env{background:var(--card2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-8) var(--sp-10)}
  .ehead{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
  /* Étiquette d'environnement. La couleur du type arrive en `--k` (posée en
     ligne par le JS) : elle TEINTE l'étiquette au lieu de la remplir - un
     tableau de bord d'infrastructure se lit d'un coup d'œil parce que la
     couleur y est rare, pas parce qu'elle est partout. Même grammaire que
     .ov-er-pill : point + fond à 13 %. */
  .etag{--k:var(--mut);display:inline-flex;align-items:center;gap:var(--sp-4);
    font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-sm);
    text-transform:uppercase;letter-spacing:.04em;
    color:var(--k);background:color-mix(in srgb,var(--k) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--k) 26%,transparent)}
  .etag::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
  /* Les couleurs de type (`--k`) sont calibrées pour le fond sombre : posées
     telles quelles sur du blanc, elles délavent. On fonce le texte et on
     éclaircit le fond, pour tenir le contraste dans les deux thèmes. */
  html[data-theme=light] .etag{color:color-mix(in srgb,var(--k) 72%,#000);
    background:color-mix(in srgb,var(--k) 12%,#fff);
    border-color:color-mix(in srgb,var(--k) 30%,var(--on-solid))}
  html[data-theme=light] .etag::before{background:var(--k)}
  .ename{font-weight:var(--fw-strong)}
  .edef{font-size:var(--fs-2xs);color:var(--ok);border:1px solid var(--ok);border-radius:var(--radius-sm);padding:var(--sp-1) var(--sp-6);font-weight:var(--fw-strong)}
  .eurl{font-size:var(--fs-sm);color:var(--mut);margin:var(--sp-6) 0;word-break:break-all;font-family:var(--font-mono)}
  .miss{color:var(--warn);font-size:var(--fs-sm);margin:var(--sp-4) 0;display:flex;gap:var(--sp-6);align-items:flex-start}
  .pacts{margin-left:auto;display:flex;gap:var(--sp-6)}

  .acts{display:flex;gap:var(--sp-6);flex-wrap:wrap;margin-top:var(--sp-8)}
  button{font:inherit;font-size:var(--fs-md);border:1px solid var(--line);background:var(--card);color:var(--txt);
    padding:var(--sp-6) var(--sp-12);border-radius:var(--radius-sm);cursor:pointer;font-weight:var(--fw-medium);display:inline-flex;align-items:center;gap:var(--sp-6)}
  button:hover{border-color:var(--mut2);background:var(--line2)}
  button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-solid)}
  button.primary:hover{background:var(--accent-h);border-color:var(--accent-h)}
  button.danger{border-color:color-mix(in srgb,var(--err) 40%,var(--line));color:var(--err);background:transparent}
  button.danger:hover{background:var(--err);color:var(--on-solid);border-color:var(--err)}
  button.mini{padding:var(--sp-4) var(--sp-8);font-size:var(--fs-sm)}
  /* U2 - .icon découplé du tag <button> : même rendu sur a/span/div (usages JS).
     :where() = spécificité 0 → n'écrase jamais les variantes existantes (.cockpit-btn,
     .brain-btn, .island>…) ; sur <button>, le socle button{} ci-dessus reprend la main. */
  :where(.icon){font:inherit;font-size:var(--fs-md);border:1px solid var(--line);background:var(--card);
    color:var(--txt);cursor:pointer;font-weight:var(--fw-medium);display:inline-flex;align-items:center;
    text-decoration:none;user-select:none}
  :where(.icon:hover){border-color:var(--mut2);background:var(--line2)}
  button.icon,.icon{padding:var(--sp-6);width:34px;height:34px;justify-content:center;border-radius:var(--radius-sm)}
  button:disabled{opacity:.4;cursor:not-allowed}
  svg.ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:2;
    stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.2em}
  /* Duotone maison : surface remplie en currentColor à --ic-duo, posée derrière le trait.
     Réglage global unique de l'opacité ; remonte légèrement sur fond sombre. */
  svg.ic .du{fill:currentColor;fill-opacity:var(--ic-duo,.15);stroke:none}
  .mini svg.ic{width:14px;height:14px}
  /* Icônes posées dans d'anciens « slots » de glyphe (onglets de section, notes, puces) :
     elles épousent la taille du conteneur au lieu du 16px par défaut. */
  .at-nav-ic svg.ic,.at-cat-ic svg.ic,.smed-nav-ic svg.ic,.fig-nav-ic svg.ic,
  .wiz-feat-ic svg.ic,.bc-ico svg.ic,.cmp-stars svg.ic,.dsc-th-chan svg.ic{
    width:1.05em;height:1.05em;vertical-align:-.15em}
  /* Titres : l'icône épouse la taille du titre */
  .fx-title svg.ic,.dsc-title svg.ic,.alch-title svg.ic{width:1em;height:1em;vertical-align:-.1em}
  /* Badges/slots à taille fixe des modules Discussions/Alchimie */
  .dsc-av-ch svg.ic{width:13px;height:13px}
  .dsc-thread-empty-ic svg.ic,.dsc-alch-g svg.ic,.dsc-att-ic svg.ic,.alch-chip-g svg.ic{
    width:1em;height:1em;vertical-align:-.12em}
  .alch-card-flask svg.ic{width:20px;height:20px}
  .alch-flask svg.ic{width:1.05em;height:1.05em;vertical-align:-.12em}

  .st{display:block;font-size:var(--fs-md);margin-top:var(--sp-8);min-height:1px}
  .st-ok{color:var(--ok)} .st-warn{color:var(--warn)} .st-err{color:var(--err)}
  .log{margin-top:var(--sp-8);font-family:var(--font-mono);font-size:var(--fs-xs);white-space:pre-wrap;
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-10);max-height:200px;overflow:auto;display:none}
  .addbar{padding:0 var(--sp-12) var(--sp-14);margin-top:auto}
  a{color:var(--link)}
  .small{font-size:var(--fs-sm);color:var(--mut)}

  /* ── État vide ── */
  .empty{grid-column:1/-1;text-align:center;padding:var(--sp-56) var(--sp-20);border:1px dashed var(--line);
    border-radius:var(--radius);background:var(--card2)}
  .empty h2{margin:0 0 var(--sp-6);font-size:var(--fs-lg)}
  .empty p{color:var(--mut);margin:0 0 var(--sp-18)}

  /* ── Vue liste ── */
  .section-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);margin:0 0 var(--sp-4);letter-spacing:var(--ls-tight)}
  .section-sub{color:var(--mut);margin:0 0 var(--sp-16);font-size:var(--fs-base)}
  .plist{display:flex;flex-direction:column;gap:var(--sp-6);max-width:none}
  /* ── Carte de création ─────────────────────────────────────────────────
     Densité assumée : une création tient sur UNE ligne. Tout ce qui poussait
     la hauteur a été mis à plat - les environnements en pastilles alignées au
     lieu de trois lignes empilées, l'aperçu réduit, l'étiquette au-dessus de
     l'aperçu supprimée (elle répétait la pastille d'environnement).
     Chaque zone borne son contenu (`min-width:0` + ellipse) : sinon un nom long
     pousse par-dessus l'aperçu au lieu de se réduire. */
  .prow{display:flex;align-items:center;gap:var(--sp-12);width:100%;min-height:42px;text-align:left;font:inherit;
    background:var(--card);border:1px solid var(--line2);border-radius:var(--radius-sm);
    padding:var(--sp-4) var(--sp-10);cursor:pointer;
    transition:border-color var(--dur-1),background var(--dur-1)}
  .prow:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));
    background:color-mix(in srgb,var(--accent) 4%,var(--card))}
  .prow:focus-visible{outline:none;box-shadow:var(--focus)}

  .prow-id{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-8)}
  .prow-txt{min-width:0;display:flex;align-items:center;gap:var(--sp-8)}
  .prow .pname{font-weight:var(--fw-strong);font-size:var(--fs-md);letter-spacing:-.01em;line-height:var(--lh-tight);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Compléments actifs : six icônes TEINTÉES par rangée faisaient une quinzaine
     de couleurs concurrentes dans la liste, pour une information d'identité -
     jamais d'état. Elles se tiennent en gris et ne reprennent leur teinte qu'au
     survol de LEUR rangée, là où l'œil s'est déjà posé. La couleur arrive en
     `--pc` (posée en ligne par le JS), jamais en `color:` : sinon le style en
     ligne battrait la règle de repos. */
  .pplugs{display:flex;align-items:center;gap:var(--sp-2);flex:none}
  .pplug{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;
    border-radius:var(--radius-sm);color:var(--mut2);transition:color var(--dur-1)}
  .pplug svg.ic{width:12px;height:12px;color:currentColor}
  .prow:hover .pplug{color:var(--pc,var(--accent))}
  .pplug-more{font-size:var(--fs-2xs);font-weight:var(--fw-strong)}
  .prow:hover .pplug-more{color:var(--mut)}

  /* ── Bande d'environnements ──
     Une seule chose est à faire d'un coup d'œil : repérer ce qui est EN RETARD
     sur la version locale. Le tri (JS) met ces cellules en tête ; le style leur
     donne le seul relief de la bande - fond teinté et version en clair. Tout le
     reste se tait : « à jour » n'est qu'un point et un mot gris, « jamais
     publié » s'estompe, et au-delà de trois cellules un jeton « +N » ramasse
     la queue de liste. Une création à dix environnements tient donc sur la même
     ligne qu'une création à deux.
     Le point garde la couleur du TYPE (--k, posée en ligne) : identité. Le fond,
     lui, ne s'allume que pour un ÉTAT - la couleur reste rare et signifiante. */
  .prow-envs{flex:none;min-width:0;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
    justify-content:flex-end}
  .penv{display:inline-flex;align-items:center;gap:var(--sp-4);height:19px;padding:0 var(--sp-6);
    border:1px solid transparent;background:none;border-radius:var(--radius-sm);
    font-size:var(--fs-2xs);line-height:var(--lh-flat);white-space:nowrap}
  .penv-d{width:5px;height:5px;border-radius:50%;flex:none;background:var(--k,var(--mut2))}
  .penv-k{font-weight:var(--fw-bold);letter-spacing:.05em;color:var(--mut)}
  .penv-v{font-family:var(--font-mono);font-size:var(--fs-2xs);color:var(--txt);font-variant-numeric:tabular-nums}
  .penv-w{display:inline-flex;flex:none}
  .penv svg.ic{width:10px;height:10px;color:var(--warn);flex:none}

  /* En retard : LA cellule qui demande une action. C'est la seule à porter un
     fond, et donc la seule que l'œil trouve sans chercher. */
  .penv-behind{background:color-mix(in srgb,var(--warn) 13%,transparent);
    border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
  .penv-behind .penv-k{color:color-mix(in srgb,var(--warn) 62%,var(--txt))}
  .penv-behind .penv-v{color:color-mix(in srgb,var(--warn) 55%,var(--txt))}
  /* Le chevron dit « une version attend » sans coûter un mot. */
  .penv-behind::after{content:'';width:0;height:0;flex:none;
    border-inline:3.2px solid transparent;border-bottom:4.4px solid currentColor;
    color:color-mix(in srgb,var(--warn) 70%,var(--txt))}
  /* Version en ligne illisible : ni alarme ni feu vert. */
  .penv-unknown .penv-v{color:var(--mut2)}
  /* À jour : rien à faire, donc rien à dire. Un point vert minuscule suffit à
     confirmer, sans entrer en concurrence avec les cellules en retard. */
  .penv-sync .penv-d{background:var(--ok);
    box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 18%,transparent)}
  /* Jamais publié : présent mais effacé - il n'a rien à jouer dans la liste. */
  .penv-never{opacity:.42}
  .penv-never .penv-k{font-weight:var(--fw-strong)}
  .penv-never .penv-d{background:none;box-shadow:inset 0 0 0 1px var(--k,var(--mut2))}
  /* Débordement : un jeton neutre, jamais un signal. L'infobulle porte le détail. */
  .penv-more{font-weight:var(--fw-strong);color:var(--mut2);background:color-mix(in srgb,var(--txt) 6%,transparent);
    padding:0 var(--sp-6);font-variant-numeric:tabular-nums}
  .prow:hover .penv-more{color:var(--mut);background:color-mix(in srgb,var(--txt) 10%,transparent)}
  /* …sauf s'il cache des retards : le compteur reprend alors la teinte d'alerte,
     pour ne pas faire passer du travail en attente pour de la queue de liste. */
  .penv-more-late,.prow:hover .penv-more-late{background:color-mix(in srgb,var(--warn) 13%,transparent);
    border-color:color-mix(in srgb,var(--warn) 26%,transparent);
    color:color-mix(in srgb,var(--warn) 62%,var(--txt))}

  /* Col 3 : aperçu + chevron */
  .pcol3{flex:none;display:flex;align-items:center;gap:var(--sp-10)}
  .pcol3-prev{display:flex;align-items:center}
  .prow .chev{color:var(--mut2);flex:none;opacity:0;
    transition:transform var(--dur-1),color var(--dur-1),opacity var(--dur-1)}
  .prow .chev svg.ic{width:14px;height:14px}
  .prow:hover .chev,.prow:focus-visible .chev{color:var(--accent);opacity:1;transform:translateX(2px)}

  /* Écran étroit : l'aperçu coûte un quart de la largeur pour peu d'information. */
  @media (max-width:640px){
    .prow{gap:var(--sp-10);padding:var(--sp-6) var(--sp-10);flex-wrap:wrap}
    .pcol3-prev{display:none}
    /* Écran étroit : la bande passe sous le nom, sur toute la largeur. */
    .prow-envs{width:100%;justify-content:flex-start;order:3;gap:var(--sp-2)}
  }

  /* ── Mode Carte : sans mockup tablette ── */
  html[data-card-view="card"] .pcol3-prev{display:none}

  /* ── Mode Ligne : une ligne par projet ── */
  html[data-card-view="line"] .prow{padding:var(--sp-8) var(--sp-14);gap:var(--sp-14)}
  html[data-card-view="line"] .prow-txt{flex-direction:row;align-items:center;gap:var(--sp-10)}
  html[data-card-view="line"] .pplugs{display:none}
  html[data-card-view="line"] .prow-envs{display:flex;align-items:center;gap:0;flex-wrap:wrap}
  html[data-card-view="line"] .pcol3-prev{display:none}
  html[data-card-view="line"] .picon{width:28px;height:28px;border-radius:var(--radius)}
  /* Icône projet */
  .picon{display:block;position:relative;width:26px;height:26px;border-radius:var(--radius-sm);overflow:hidden;
    border:1px solid var(--line);background:var(--card2)}
  .picon img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--paper)}
  .picon-mono{position:absolute;inset:0;display:grid;place-items:center;color:var(--on-solid);font-weight:var(--fw-bold);font-size:var(--fs-sm)}
  .ptop .picon{width:34px;height:34px}
  .pill{display:inline-flex;align-items:center;gap:var(--sp-4);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);
    border:1px solid var(--line);font-size:var(--fs-xs)}
  .pill.warn{color:var(--warn);border-color:var(--warn)}
  .pill.warn svg.ic{width:12px;height:12px}

  /* ── Mockup tablette iPad dans la carte projet ── */
  /* display:flex + line-height:0 : en inline-block, l'espace de descente de
     ligne ajoutait 12 px sous la maquette - invisible, mais c'est ce qui fixait
     la hauteur de la rangée entière. */
  .ptab{flex:none;display:flex;line-height:0}
  /* Wrapper pour les boutons physiques (::before=volume, ::after=lock) */
  .ptab-device{position:relative;display:inline-flex}
  /* Boutons volume (gauche) : Vol+ et Vol- */
  .ptab-device::before{content:'';position:absolute;left:-1.5px;top:22px;
    width:1.5px;height:20px;border-radius:1px 0 0 1px;
    background:linear-gradient(90deg,#141417,#1a1a1d) 0 0/1.5px 8px no-repeat,
               linear-gradient(90deg,#141417,#1a1a1d) 0 12px/1.5px 8px no-repeat;
    opacity:.7}
  /* Bouton lock (droite) */
  .ptab-device::after{content:'';position:absolute;right:-1.5px;top:25px;
    width:1.5px;height:11px;border-radius:0 1px 1px 0;
    background:linear-gradient(270deg,#141417,#1a1a1d);
    opacity:.7}
  .ptab-frame{width:46px;height:60px;background:#1a1a1d;border-radius:5px;
    overflow:hidden;display:flex;flex-direction:column;padding:0 2px;
    box-shadow:0 0 0 1px rgba(0,0,0,.8),0 2px 5px -1px rgba(0,0,0,.12),
               0 1px 2px rgba(0,0,0,.08);
    transition:transform .16s,box-shadow .16s}
  .prow:hover .ptab-frame{transform:scale(1.06) translateY(-1px);
    box-shadow:0 0 0 1px rgba(0,0,0,.8),0 3px 8px rgba(0,0,0,.16),
               0 1px 3px rgba(0,0,0,.1)}
  .ptab-top{height:7px;flex:none;display:flex;align-items:center;
    justify-content:center}
  .ptab-cam{width:2px;height:2px;border-radius:50%;background:#0a0a0c}
  .ptab-screen{flex:1;background:var(--paper);overflow:hidden;
    display:flex;flex-direction:column;min-height:0;border-radius:2px}
  .ptab-bar{background:#f5f5f7;padding:2px 3px;flex:none;
    border-bottom:1px solid #e8e8ec;display:flex;align-items:center;gap:2px}
  .ptab-dots{display:flex;gap:1.5px;flex:none;align-items:center}
  .ptab-dot{width:2.5px;height:2.5px;border-radius:50%;flex:none}
  .ptab-dot:nth-child(1){background:#ff5f57}
  .ptab-dot:nth-child(2){background:#febc2e}
  .ptab-dot:nth-child(3){background:#28c840}
  .ptab-url-bar{flex:1;background:rgba(0,0,0,.05);border-radius:1.5px;
    padding:0.5px 3px;margin:0 1.5px;overflow:hidden}
  .ptab-url{font-size:2.5px;color:var(--mut);font-family:var(--font-mono);
    overflow:hidden;white-space:nowrap;line-height:2;display:block;width:100%}
  .ptab-canvas{flex:1;overflow:hidden;position:relative;background:#f9fafb}
  .ptab-canvas iframe{position:absolute;top:0;left:0;border:none;
    pointer-events:none;width:960px;height:1100px;
    transform:scale(0.0437);transform-origin:top left}   /* (46 - 2×2 de cadre) / 960 */
  .ptab-fallback{position:absolute;inset:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    background:linear-gradient(140deg,
      color-mix(in srgb,var(--pc,var(--accent)) 10%,#fff),
      color-mix(in srgb,var(--pc,var(--accent)) 3%,#fff))}
  .ptab-initial{font-size:12px;font-weight:var(--fw-bold);line-height:1;
    color:var(--pc,var(--accent));opacity:.35}
  .ptab-badge{font-size:3px;color:#9ca3af;font-family:var(--font-mono);
    text-align:center;padding:0 3px;max-width:100%;overflow:hidden;white-space:nowrap}
  .ptab-env-pill{flex:none;font-size:2px;font-weight:700;color:var(--on-solid);border-radius:1px;
    padding:0.5px 1.5px;text-transform:uppercase;font-family:var(--font-mono);
    letter-spacing:.3px;white-space:nowrap;line-height:1.6}
  .ptab-chin{height:6px;flex:none;display:flex;align-items:center;
    justify-content:center}
  .ptab-home{width:17px;height:1.5px;background:rgba(255,255,255,.22);border-radius:1px}

  /* ── Vue détail ── */
  .back{margin-bottom:var(--sp-18);color:var(--mut)}
  .back:hover{color:var(--txt)}
  .detail{max-width:840px}

  /* ── Split view : le contenu, sur toute la largeur ──
     Le panneau « Vue d'ensemble » de droite a été retiré : il redisait ce que
     les rangées portent déjà (état des environnements, version, action), au
     prix d'un tiers de la largeur et d'un sondage toutes les 30 secondes. */
  .split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-24);align-items:start}
  .col-main{min-width:0}
  .col-profile[hidden]{display:none!important}

  /* ── Vue d'ensemble (panneau de droite) ─────────────────────────────────
     Même vocabulaire que la liste de gauche : rangées basses, une seule teinte
     d'accent, la couleur réservée à ce qui demande une action. */
  .report{background:var(--card);border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden}
  .report-head{padding:var(--sp-10) var(--sp-14);border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:var(--sp-8)}
  .report-head h2{font-size:var(--fs-md);margin:0;flex:1;font-weight:var(--fw-strong);display:flex;align-items:center;gap:var(--sp-8);
    letter-spacing:-.01em}
  .report-head .led{width:7px;height:7px;border-radius:50%;background:var(--ok);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
  .report-head .led.pending{background:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 20%,transparent)}

  /* Indicateurs : tuiles plates, chiffres de même couleur. L'ambre n'apparaît
     que sur ce qui appelle une action. */
  .kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-1);background:var(--line2);
    border-bottom:1px solid var(--line2)}
  .kpi{background:var(--card);padding:var(--sp-10) var(--sp-14)}
  .kpi .n{font-size:var(--fs-lg);font-weight:var(--fw-strong);font-variant-numeric:tabular-nums;line-height:1.15;
    letter-spacing:var(--ls-tight);color:var(--txt)}
  .kpi .n-txt{font-size:var(--fs-md);font-weight:var(--fw-strong);padding-top:var(--sp-4);letter-spacing:var(--ls-none)}
  .kpi .l{font-size:var(--fs-2xs);color:var(--mut2);margin-top:var(--sp-2);line-height:var(--lh-snug)}
  .kpi.warn .n{color:var(--warn)}

  .report-body{padding:var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-6);max-height:62vh;overflow:auto}
  .report-empty{padding:var(--sp-24) var(--sp-14);text-align:center;color:var(--mut2);font-size:var(--fs-sm)}
  .report-empty .led{display:inline-block;margin-bottom:var(--sp-8)}

  /* Une création en attente : en-tête cliquable + une ligne par environnement. */
  /* flex:none — le conteneur est borné (max-height + overflow) : sans cela les
     items se COMPRESSENT au lieu de faire défiler, et `overflow:hidden` rogne
     leurs lignes d'environnement. C'est ce qui masquait les actions. */
  .ritem{flex:none;border:1px solid var(--line2);border-radius:var(--radius-sm);overflow:hidden}
  .ritem .rh{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-8);background:transparent;
    border-bottom:1px solid var(--line2);cursor:pointer;transition:background var(--dur-1)}
  .ritem .rh:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
  .ritem .rh .picon{width:22px;height:22px;border-radius:var(--radius-sm)}
  .ritem .rh .picon-mono{font-size:var(--fs-xs)}
  .ritem .rname{font-weight:var(--fw-strong);font-size:var(--fs-sm);flex:1;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ritem .rh .badge{font-size:var(--fs-2xs);color:var(--mut2);padding:var(--sp-1) var(--sp-6);border-radius:var(--radius-pill);
    border:1px solid var(--line2)}
  .renv{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-6) var(--sp-8)}
  .renv+.renv{border-top:1px solid var(--line2)}
  .renv .etag{display:inline-flex;align-items:center;font-size:8.5px;font-weight:var(--fw-bold);letter-spacing:.05em;
    color:var(--on-solid);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-6);text-transform:uppercase;flex:none;white-space:nowrap}
  .renv .rinfo{flex:1;min-width:0;font-size:var(--fs-xs);color:var(--mut);font-variant-numeric:tabular-nums;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .renv .rinfo b{color:var(--txt);font-weight:var(--fw-strong)}
  .renv .stat-update{color:var(--warn)} .renv .stat-never{color:var(--mut2)} .renv .stat-online{color:var(--ok)}
  .renv button{padding:var(--sp-2) var(--sp-8);font-size:var(--fs-xs);flex:none}
  .renv button svg.ic{width:11px;height:11px}
  .verflow{font-family:var(--font-mono)}

  /* ── Environnements : vue liste ── */
  .env-list-view{padding:var(--sp-16) var(--sp-20) var(--sp-24)}
  .env-list-hd{display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--sp-20);gap:var(--sp-12);padding-bottom:var(--sp-14);border-bottom:1px solid var(--line)}
  .env-grid{display:flex;flex-direction:column;gap:var(--sp-10)}
  .env-card{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;cursor:pointer;width:100%;text-align:left;
    transition:border-color .15s,box-shadow .15s,background .15s}
  .env-card:hover,.env-card:focus{outline:none;border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent) inset,0 3px 10px rgba(0,0,0,.07)}
  .ec-stripe{width:4px;flex:none}
  .ec-body{flex:1;padding:var(--sp-12) var(--sp-16);min-width:0}
  .ec-head{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
  .ec-name{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .ec-miss-ic{color:var(--warn);display:inline-flex;opacity:.85}
  .ec-url{font-size:var(--fs-sm);color:var(--mut);font-family:var(--font-mono);
    margin:var(--sp-4) 0 var(--sp-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ec-foot{margin-top:var(--sp-1)}
  .ec-st{font-size:var(--fs-sm);font-weight:var(--fw-strong)}
  .ec-st-ok{color:var(--ok)} .ec-st-warn{color:var(--warn)} .ec-st-muted{color:var(--mut)}
  .ec-arr{display:flex;align-items:center;padding:0 var(--sp-14);color:var(--mut);opacity:.5}
  .env-empty{padding:var(--sp-32) var(--sp-20);text-align:center;background:var(--bg2);
    border:1px dashed var(--line);border-radius:var(--radius);color:var(--mut)}

  /* ── Sélecteur de type d'environnement ── */
  .env-kind-picker{display:flex;flex-direction:column;gap:var(--sp-10)}
  .ekp-card{display:flex;flex-direction:column;gap:var(--sp-4);text-align:left;
    background:var(--bg2);border:1.5px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-16) var(--sp-18);cursor:pointer;transition:border-color .15s,box-shadow .15s}
  .ekp-card:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .ekp-icon{font-size:var(--fs-lg);margin-bottom:var(--sp-4);display:inline-flex;color:var(--accent)}
  .ekp-title{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .ekp-sub{font-size:var(--fs-sm);color:var(--mut);line-height:1.4}

  /* ── Bac à sable : hero ── */
  .sbx-hero{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) var(--sp-16) var(--sp-14) var(--sp-20);
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    margin:0 0 var(--sp-16);border-left:3px solid var(--ec,var(--accent))}
  .sbx-hero-icon{font-size:var(--fs-2xl);flex:none;color:var(--accent);display:flex}
  .sbx-hero-info{flex:1;min-width:0}
  .sbx-path{display:block;font-size:var(--fs-sm);color:var(--mut);font-family:var(--font-mono);
    word-break:break-all;margin-bottom:var(--sp-8)}
  .sbx-hero-btns{display:flex;gap:var(--sp-6);flex-wrap:wrap}

  /* ── Bac à sable : KPIs (3 col) ── */
  .ed-kpis-3{grid-template-columns:repeat(3,1fr)!important}
  @media(max-width:560px){.ed-kpis-3{grid-template-columns:repeat(2,1fr)!important}}
  .ed-kv-sm{font-size:var(--fs-md);font-weight:var(--fw-strong)}

  /* ── Bac à sable : éditeurs ── */
  .sbx-editors{margin:0 0 var(--sp-20)}
  .sbx-ed-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;
    color:var(--mut);margin-bottom:var(--sp-10)}
  .sbx-ed-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8)}
  @media(max-width:560px){.sbx-ed-grid{grid-template-columns:repeat(2,1fr)}}
  .sbx-ed-btn{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-14) var(--sp-8);cursor:pointer;text-align:center;font-size:var(--fs-sm);
    transition:border-color .15s,background .15s;color:var(--txt)}
  .sbx-ed-btn:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg2))}
  .sbx-ed-btn span{font-weight:var(--fw-strong)}
  .sbx-ed-btn small{font-size:var(--fs-2xs);color:var(--mut);line-height:1.3}

  /* ── Bac à sable : liste de fichiers ── */
  .sbx-files-section{margin:0 0 var(--sp-20)}
  .sbx-files-hd{display:flex;align-items:center;justify-content:space-between;
    padding-bottom:var(--sp-8);border-bottom:1px solid var(--line);margin-bottom:var(--sp-10);
    font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .sbx-file-list{display:flex;flex-direction:column;gap:var(--sp-2)}
  .sbx-file-row{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-6) var(--sp-8);
    border-radius:var(--radius);font-size:var(--fs-md);transition:background .1s}
  .sbx-file-row:hover{background:var(--bg2)}
  .sbx-file-ic{font-size:var(--fs-base);flex:none;width:22px;text-align:center}
  .sbx-file-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sbx-file-sz{color:var(--mut);font-size:var(--fs-xs);flex:none}
  .sbx-file-dt{color:var(--mut);font-size:var(--fs-xs);flex:none;min-width:52px;text-align:right}

  /* ── Environnements : vue détail ── */
  .env-detail{padding:0 var(--sp-20) var(--sp-32)}
  .ed-nav{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;
    padding:var(--sp-14) 0 var(--sp-16);border-bottom:1px solid var(--line);margin-bottom:var(--sp-20)}
  .ed-back-btn{border:1px solid transparent;background:transparent;color:var(--mut);
    padding:var(--sp-4) var(--sp-8);font-size:var(--fs-md);cursor:pointer;font-weight:var(--fw-medium);gap:var(--sp-4);border-radius:var(--radius-sm)}
  .ed-back-btn:hover{color:var(--txt);background:var(--line2);border-color:var(--line)}
  .ed-sep{color:var(--line2);font-size:var(--fs-lg);line-height:var(--lh-flat)}
  .ed-env-name{font-weight:var(--fw-strong);font-size:var(--fs-base)}
  .ed-miss{margin:0 0 var(--sp-16)}
  .ed-url-row{margin:0 0 var(--sp-20)}
  .ed-url-code{display:block;font-size:var(--fs-sm);color:var(--mut);font-family:var(--font-mono);
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--sp-8) var(--sp-12);word-break:break-all}
  .ed-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-1);margin:0 0 var(--sp-20);
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .ed-kpi{background:var(--card);padding:var(--sp-14) var(--sp-12);text-align:center}
  .ed-kv{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
  .ed-kl{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);line-height:1.3}
  @media(max-width:560px){.ed-kpis{grid-template-columns:repeat(2,1fr)}}
  .ed-acts{margin:var(--sp-18) 0 0;display:flex;gap:var(--sp-6);flex-wrap:wrap}

  /* ── Deploy steps ── */
  .deploy-zone{margin:var(--sp-20) 0;background:var(--card2);border:1px solid var(--line);
    border-radius:var(--radius);padding:var(--sp-16) var(--sp-20)}
  .ds-title{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mut);text-transform:uppercase;
    letter-spacing:.07em;margin-bottom:var(--sp-14)}
  .deploy-steps{display:flex;flex-direction:column;gap:0}
  .ds-step{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-10) 0;position:relative}
  .ds-step:not(:last-child)::after{content:'';position:absolute;left:9px;top:32px;
    width:1px;height:calc(100% - 18px);background:var(--line)}
  /* ring = cercle extérieur animé ; dot = cercle intérieur masque */
  .ds-ring{width:20px;height:20px;border-radius:50%;flex:none;margin-top:var(--sp-1);
    position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
    background:var(--line);transition:background .25s}
  .ds-dot{width:12px;height:12px;border-radius:50%;background:var(--bg2);
    display:flex;align-items:center;justify-content:center;
    font-size:8px;font-weight:var(--fw-bold);color:var(--on-solid);transition:background .2s}
  .ds-body{flex:1;min-width:0;padding-top:var(--sp-2)}
  .ds-lbl{font-size:var(--fs-md);font-weight:var(--fw-medium);line-height:1.3;transition:color .2s}
  .ds-sub{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2);line-height:1.4;transition:opacity .2s}
  .ds-det{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-4);font-family:var(--font-mono);
    word-break:break-all;display:none}
  .ds-det:not(:empty){display:block}
  /* pending */
  .ds-pending .ds-ring{background:var(--line)}
  .ds-pending .ds-dot{background:var(--bg2)}
  .ds-pending .ds-lbl{color:var(--mut);font-weight:var(--fw-regular)}
  .ds-pending .ds-sub{opacity:.4}
  /* active : conic-gradient qui avance de 0° → 360° */
  @property --ds-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
  @keyframes dsRing{0%{--ds-angle:0deg}100%{--ds-angle:360deg}}
  .ds-active .ds-ring{
    background:conic-gradient(var(--accent) var(--ds-angle),color-mix(in srgb,var(--accent) 18%,var(--line)) 0deg);
    animation:dsRing 1.1s linear infinite}
  .ds-active .ds-dot{background:var(--card,var(--bg))}
  .ds-active .ds-lbl{color:var(--fg)}
  .ds-active .ds-sub{opacity:.7}
  /* ok */
  .ds-ok .ds-ring{background:var(--ok)}
  .ds-ok .ds-dot{background:transparent}
  .ds-ok .ds-dot::before{content:'✓';font-size:8px;font-weight:var(--fw-bold);color:var(--on-solid)}
  /* err */
  .ds-err .ds-ring{background:var(--err)}
  .ds-err .ds-dot{background:transparent}
  .ds-err .ds-dot::before{content:'✗';font-size:8px;font-weight:var(--fw-bold);color:var(--on-solid)}
  .ds-err .ds-lbl{color:var(--err)}
  .ds-err .ds-sub{color:var(--err);opacity:.65}

  /* ── History timeline ── */
  .ed-hist{margin-top:var(--sp-28)}
  .ed-hist-hd{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-14);
    padding-bottom:var(--sp-10);border-bottom:1px solid var(--line)}
  .hist-loading,.hist-empty{color:var(--mut);font-size:var(--fs-md);padding:var(--sp-10) 0;
    display:flex;align-items:center;gap:var(--sp-8)}
  .hist-timeline{display:flex;flex-direction:column}
  .hist-entry{display:flex;align-items:flex-start;gap:var(--sp-14);padding:var(--sp-10) 0;
    border-bottom:1px solid var(--line2)}
  .hist-entry:last-child{border-bottom:none}
  .he-dot{width:10px;height:10px;border-radius:50%;flex:none;margin-top:var(--sp-4);border:2px solid var(--line)}
  .he-ok .he-dot{border-color:var(--ok);background:var(--ok)}
  .he-err .he-dot{border-color:var(--err);background:color-mix(in srgb,var(--err) 30%,transparent)}
  .he-body{flex:1;min-width:0}
  .he-head{display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;line-height:1.4}
  .he-action{font-size:var(--fs-md);font-weight:var(--fw-strong)}
  .he-code{font-size:var(--fs-xs);font-family:var(--font-mono);
    background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-xs);padding:var(--sp-1) var(--sp-4);color:var(--mut)}
  .he-code-err{color:var(--err);border-color:color-mix(in srgb,var(--err) 30%,var(--line))}
  .he-ver{font-size:var(--fs-xs);font-family:var(--font-mono);color:var(--mut)}
  .he-files,.he-size{font-size:var(--fs-xs);color:var(--mut)}
  .he-date{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2)}


/* ── LED (partagé hero + santé) ── */
.ed-led{width:9px;height:9px;border-radius:50%;flex:none;transition:background .3s}
.ed-led-unknown{background:var(--mut);opacity:.35}
.ed-led-ping{background:var(--warn);animation:ledP .6s ease-in-out infinite}
.ed-led-ok{background:var(--ok);animation:ledP 2.4s ease-in-out infinite}
.ed-led-warn{background:var(--warn);animation:ledP 1.5s ease-in-out infinite}
.ed-led-err{background:var(--err)}
@keyframes ledP{0%,100%{opacity:.35}50%{opacity:1}}

/* ── Hero card ── */
.ed-hero{display:flex;align-items:center;gap:var(--sp-14);padding:var(--sp-14) var(--sp-16) var(--sp-14) var(--sp-20);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  margin:0 0 var(--sp-16);border-left:3px solid var(--ec,var(--accent));flex-wrap:wrap}
.ed-hero-left{display:flex;align-items:center;gap:var(--sp-10);flex:1;min-width:0;flex-wrap:wrap}
.ed-hero-url-block{display:flex;flex-direction:column;gap:var(--sp-2);flex:1;min-width:0}
.ed-hero-url{font-size:var(--fs-sm);color:var(--mut);font-family:var(--font-mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.ed-hero-st{font-size:var(--fs-sm);color:var(--mut);line-height:1.3}
.ed-hero-btns{display:flex;gap:var(--sp-6);flex-shrink:0}
.ed-hero-ctas{display:flex;flex-direction:column;gap:var(--sp-6);flex-shrink:0}
.ed-cta-hero{padding:var(--sp-8) var(--sp-22);font-size:var(--fs-base);font-weight:var(--fw-strong);gap:var(--sp-8);
  white-space:nowrap;border-radius:var(--radius-sm)}
.ed-cta-env{font-weight:var(--fw-medium);opacity:.8;font-size:var(--fs-md)}
.ed-promote-btn{padding:var(--sp-6) var(--sp-16);font-size:var(--fs-md);font-weight:var(--fw-strong);gap:var(--sp-6);white-space:nowrap;
  border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 15%,var(--card));
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.ed-promote-btn:hover{background:color-mix(in srgb,var(--accent) 22%,var(--card))}

/* ── KPI grid 5 colonnes ── */
.ed-kpis-5{grid-template-columns:repeat(5,1fr)!important}
@media(max-width:700px){.ed-kpis-5{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:480px){.ed-kpis-5{grid-template-columns:repeat(2,1fr)!important}}
.ed-kpi-icon{font-size:var(--fs-base);margin-bottom:var(--sp-6);opacity:.45;line-height:var(--lh-flat)}
.ed-kpi-icon svg{width:16px;height:16px}
.ed-kv-ok{color:var(--ok)}
.ed-kv-warn{color:var(--warn)}
.ed-kv-muted{color:var(--mut)}
.ed-kpi-ok{background:color-mix(in srgb,var(--ok) 6%,var(--card))!important}
.ed-kpi-ok .ed-kpi-icon{opacity:1;color:var(--ok)}
.ed-kpi-warn{background:color-mix(in srgb,var(--warn) 8%,var(--card))!important}
.ed-kpi-warn .ed-kpi-icon{opacity:1;color:var(--warn)}

/* ── Barre actions secondaires ── */
.ed-sec-bar{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin:0 0 var(--sp-6)}

/* ── Héros statut texte ── */
.ed-hero .st{font-size:var(--fs-sm);margin:0;min-height:0}

/* ── Panneau monitoring (onglets) ── */
.ed-monitor{margin-top:var(--sp-24);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ed-mon-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--card2);
  overflow-x:auto;scrollbar-width:none}
.ed-mon-tabs::-webkit-scrollbar{display:none}
.ed-mon-tab{padding:var(--sp-10) var(--sp-16);font-size:var(--fs-md);font-weight:var(--fw-medium);border:none;border-radius:0;
  background:transparent;color:var(--mut);cursor:pointer;white-space:nowrap;
  border-bottom:2px solid transparent;gap:var(--sp-6);flex:none;display:inline-flex;align-items:center}
.ed-mon-tab:hover{color:var(--txt);background:var(--line2)}
.ed-mon-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.ed-mon-pane{padding:var(--sp-18) var(--sp-20);min-height:100px}

/* ── Santé ── */
.em-health{}
.em-h-status{display:flex;align-items:center;gap:var(--sp-10);margin-bottom:var(--sp-16);
  padding:var(--sp-12) var(--sp-14);border-radius:var(--radius);background:var(--bg2);border:1px solid var(--line)}
.em-h-led{width:9px;height:9px;border-radius:50%;flex:none}
.em-hs-ok .em-h-led{background:var(--ok);animation:ledP 2.4s ease-in-out infinite}
.em-hs-ok{border-color:color-mix(in srgb,var(--ok) 30%,var(--line))}
.em-hs-err .em-h-led{background:var(--err)}
.em-hs-err{border-color:color-mix(in srgb,var(--err) 30%,var(--line))}
.em-h-status strong{font-size:var(--fs-base);font-weight:var(--fw-strong)}
.em-h-ver{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono);margin-left:auto}
.em-h-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--sp-10)}
.em-h-kpi{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-10) var(--sp-12)}
.em-hv{font-size:var(--fs-base);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.em-hl{font-size:var(--fs-xs);color:var(--mut);margin-top:var(--sp-2)}
.em-health-unsupported{display:flex;align-items:center;gap:var(--sp-16);color:var(--mut);
  padding:var(--sp-4) 0;font-size:var(--fs-md)}
.em-health-unsupported strong{color:var(--txt);display:block;margin-bottom:var(--sp-2)}

/* ── Aperçu iframe ── */
.em-preview{display:flex;flex-direction:column;gap:var(--sp-10)}
.em-prev-bar{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
.em-prev-url{font-size:var(--fs-xs);color:var(--mut);font-family:var(--font-mono);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-prev-note{font-size:var(--fs-xs);color:var(--mut);background:var(--bg2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-6) var(--sp-10);
  display:flex;align-items:center;gap:var(--sp-6)}
.em-prev-frame{width:100%;height:380px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--bg)}

/* ── Logs ── */
.em-logs-count{font-size:var(--fs-xs);color:var(--mut);margin-bottom:var(--sp-10)}
.em-logs-pre{font-size:var(--fs-xs);font-family:var(--font-mono);
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--sp-12) var(--sp-14);overflow:auto;max-height:300px;white-space:pre-wrap;
  color:var(--warn);margin:0;line-height:1.6}

/* ── Panneau Claude (complément) ── */
.cl-pane{display:flex;flex-direction:column;gap:0;height:100%}
.cl-detect{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-12);
  border-radius:var(--radius);font-size:var(--fs-sm);background:var(--bg2);border:1px solid var(--line);
  margin-bottom:var(--sp-10);flex-wrap:wrap}
.cl-detect-dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--mut);opacity:.4}
.cl-detect-ok .cl-detect-dot{background:var(--ok);animation:ledP 2.4s ease-in-out infinite;opacity:1}
.cl-detect-err .cl-detect-dot{background:var(--err);opacity:1}
.cl-detect-ok{border-color:color-mix(in srgb,var(--ok) 25%,var(--line))}
.cl-detect-err{border-color:color-mix(in srgb,var(--err) 25%,var(--line))}

/* Mode buttons + toolbar */
.cl-toolbar{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-10);flex-wrap:wrap}
.cl-mode-grp{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0}
.cl-mode-btn{padding:var(--sp-6) var(--sp-12);font-size:var(--fs-sm);font-weight:var(--fw-medium);border:none;background:transparent;
  color:var(--mut);cursor:pointer;display:inline-flex;align-items:center;gap:var(--sp-4);
  border-right:1px solid var(--line);white-space:nowrap}
.cl-mode-btn:last-child{border-right:none}
.cl-mode-btn:hover{background:var(--line2);color:var(--txt)}
.cl-mode-btn.on{background:var(--accent);color:var(--on-solid)}
.cl-file-in{font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-8);border:1px solid var(--line);border-radius:var(--radius-sm);
  background:var(--bg2);color:var(--txt);font-family:var(--font-mono);flex:1}

/* Chat log */
.cl-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-12);
  padding:var(--sp-4) 0 var(--sp-8);min-height:120px;max-height:44vh}
.cl-row{display:flex;align-items:flex-start;gap:var(--sp-10)}
.cl-av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-solid);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-md);flex:none;margin-top:var(--sp-2)}
.cl-av-spin{animation:ledP .8s ease-in-out infinite}
.cl-bubble{padding:var(--sp-10) var(--sp-12);border-radius:var(--radius);font-size:var(--fs-md);line-height:1.55;
  white-space:pre-wrap;word-break:break-word;max-width:88%;display:flex;flex-direction:column}
.cl-me{align-self:flex-end;background:var(--accent);color:var(--on-solid);border-radius:var(--radius) var(--radius) var(--radius-xs) var(--radius);margin-left:auto}
.cl-ai{background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-xs) var(--radius) var(--radius) var(--radius)}
.cl-ai-err{border-color:color-mix(in srgb,var(--err) 30%,var(--line));
  background:color-mix(in srgb,var(--err) 6%,var(--card2))}
.cl-bubble-body{white-space:pre-wrap;word-break:break-word}
.cl-think{font-size:var(--fs-md);color:var(--mut);padding:var(--sp-8) var(--sp-12);background:var(--card2);
  border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;gap:var(--sp-8)}

/* Compose row */
.cl-compose{display:flex;gap:var(--sp-8);align-items:flex-end;margin-top:var(--sp-10);
  border-top:1px solid var(--line);padding-top:var(--sp-10)}
.cl-compose-ta{flex:1;min-height:56px;max-height:140px;resize:vertical;font:inherit;font-size:var(--fs-md);
  padding:var(--sp-8) var(--sp-12);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2);
  color:var(--txt);line-height:var(--lh-normal)}
.cl-compose-ta:focus{outline:none;border-color:var(--accent)}
.cl-compose-send{padding:var(--sp-8) var(--sp-16);font-size:var(--fs-md);font-weight:var(--fw-strong);gap:var(--sp-6);white-space:nowrap;align-self:flex-end}

/* ── Recherche accueil (lot U4) ── */
/* Enveloppes de filtre : transparentes pour la mise en page (flex/grid intactes). */
.plist>[data-pname]{display:contents}
.plist>[data-pname][hidden]{display:none!important}
.plist-none{color:var(--mut);padding:var(--sp-14) 0}

}

/* ── Bandeau de tête de l'accueil ───────────────────────────────────────────
   Hors de la couche `layout` À DESSEIN : `components` y déclare un `input{}`
   générique (padding 9px 11px, font 14px) qui bat toute règle de `layout`,
   spécificité comprise - l'ordre des couches prime. Le champ de recherche
   compact n'existe donc qu'à partir de `modules`. */
@layer modules{
/* Titre + compteur à gauche, outils à droite, sur UNE ligne. Le sous-titre
   explicatif ne subsiste qu'en mode Kids/Ado : en usage courant il répétait ce
   que la liste montre déjà, tout en coûtant une rangée entière. */
/* Bandeau de tête : une BARRE D'OUTILS, pas une affiche. Tous les contrôles
   partagent la même hauteur (28 px) et le même rayon, le titre descend à la
   taille d'un intitulé de section, et un filet ferme la barre : ce qui suit est
   le contenu. Le compteur perd sa gélule grise - c'est un nombre, pas un état. */
.home-top{display:flex;align-items:center;gap:var(--sp-14);flex-wrap:wrap;
  margin:0 0 var(--sp-12);padding-bottom:var(--sp-10);border-bottom:1px solid var(--line2)}
.home-ttl{display:flex;align-items:baseline;gap:var(--sp-8);min-width:0}
.home-ttl .section-title{margin:0;font-size:var(--fs-base);font-weight:var(--fw-bold);letter-spacing:var(--ls-tight)}
.home-count{font-size:var(--fs-xs);font-weight:var(--fw-strong);color:var(--mut2);font-variant-numeric:tabular-nums;
  padding:0;background:none}
.home-tools{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}

/* Champ de recherche : une surface, pas une boîte. Le contour n'apparaît qu'au
   survol et au focus - au repos, seul le texte gris signale l'entrée. */
.home-search{position:relative;display:flex;align-items:center;flex:none}
.home-search svg.ic{position:absolute;inset-inline-start:9px;width:13px;height:13px;
  color:var(--mut2);pointer-events:none}
/* Champ POSÉ sur la page : surface `--card` (blanc en clair) + filet `--line2`,
   plus clair que le filet standard. Le champ se détache du fond sans peser ;
   le contour ne se renforce qu'au survol et au focus. */
.home-search-inp{flex:none;width:180px;height:28px;padding:0 var(--sp-10) 0 var(--sp-26);font-size:var(--fs-sm);color:var(--txt);
  background:var(--card);
  border:1px solid var(--line2);border-radius:var(--radius-sm);
  transition:width var(--dur-2),border-color var(--dur-1),background var(--dur-1)}
[dir="rtl"] .home-search-inp{padding:0 var(--sp-26) 0 var(--sp-10)}
.home-search-inp::placeholder{color:var(--mut2)}
.home-search-inp:hover{border-color:var(--line)}
.home-search-inp:focus{outline:none;width:230px;background:var(--card);
  border-color:var(--accent);box-shadow:var(--focus)}
.home-search-inp::-webkit-search-cancel-button{filter:grayscale(1);opacity:.5}
@media (max-width:720px){
  .home-tools{margin-inline-start:0;width:100%}
  .home-search{flex:1}
  .home-search-inp,.home-search-inp:focus{width:100%}
}
}

/* La marque EST l'icône animée du Pilote (orbites + comètes) : le signe vivant
   de l'application. `.bic` (couche `modules`) impose 24 px et l'ordre des
   couches lui donne raison sur `layout` quelle que soit la spécificité — d'où
   cette règle en couche `overrides`, la dernière déclarée. */
@layer overrides{
  .brand-mark.bic{width:var(--hh-brand);height:var(--hh-brand)}
}