/* ── Groupes de créations (CDC_GROUPES.md) ───────────────────────────────────
   Trois surfaces : l'accueil rangé en arbre, la fiche de groupe (modal à
   onglets) et l'éditeur de patrimoine. Parti pris : les groupes sont des
   CONTENANTS, pas des cartes. Un bandeau plein par groupe entrerait en
   concurrence visuelle avec les cartes de création qu'il contient ; on utilise
   donc un rail coloré + une identité sobre, et on laisse les créations porter
   le poids visuel. */
/* Rangée dans la couche `modules` (ordre : tokens, base, layout, components,
   modules, overrides). Sans couche, cette feuille passait DEVANT `overrides`
   et empêchait les reskins Kids/Ado et le Studio shell de reprendre la main. */
@layer modules{


/* ═══ Barre d'outils de l'accueil ═══ */
/* Vit dans le bandeau de tête (.home-tools) : aucune marge propre. */
/* Trois contrôles, une seule grammaire : hauteur 28 px, rayon court. Deux
   registres cependant : la BASCULE est un rail creux (fond teinté) sur lequel
   glisse une pastille claire - c'est ce contraste qui dit « choisis-en un » ;
   la recherche et « Nouveau groupe » sont des surfaces POSÉES (fond `--card`,
   filet `--line2`), car ce sont des actions, pas un choix exclusif. */
.grp-bar{display:flex;align-items:center;gap:var(--sp-6)}
/* Même grammaire que la pilule d'en-tête : le GROUPE porte la teinte d'accent
   (sans filet), le segment actif est une pastille CLAIRE, et l'encre des
   icônes mêle l'accent à l'encre au lieu d'un gris neutre. Survol sans
   transition, comme la barre. */
.grp-seg{display:inline-flex;align-items:center;height:28px;padding:var(--sp-2);gap:var(--sp-2);
  border:0;border-radius:var(--radius-sm);
  background:var(--chrome-bg)}
.grp-seg button{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:22px;padding:0;border:0;border-radius:var(--radius-xs);background:transparent;
  color:var(--chrome-ink);cursor:pointer;transition:none}
.grp-seg button:hover{color:var(--chrome-ink)}
.grp-seg button.on{background:var(--on-solid);color:var(--accent);box-shadow:var(--shadow-sm)}
.grp-seg svg{width:14px;height:14px}
.grp-new{display:inline-flex;align-items:center;gap:var(--sp-6);height:28px;padding:0 var(--sp-10);font:inherit;
  font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--mut);cursor:pointer;
  border:1px solid var(--line2);border-radius:var(--radius-sm);
  background:var(--card);
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1)}
.grp-new:hover{background:color-mix(in srgb,var(--txt) 4%,var(--card));
  border-color:var(--line);color:var(--txt)}
.grp-new svg{width:14px;height:14px}

/* ═══ Section de groupe ═══ */
.grp{--grp-col:var(--accent);display:block;margin:0 0 var(--sp-4)}
/* `display:block` ci-dessus l'emportait sur l'attribut `hidden` : pendant une
   recherche, un groupe sans aucun résultat restait affiché, en-tête et compte
   inchangés, comme s'il contenait encore quelque chose. */
.grp[hidden]{display:none}
.grp .grp{margin:var(--sp-1) 0}

/* Coins droits au repos : arrondir un en-tête qui se prolonge par le corps du
   groupe donne un raccord bancal. L'arrondi n'apparaît qu'au survol, où la
   surface colorée se lit alors comme une pastille autonome. */
.grp-head{display:flex;align-items:center;gap:var(--sp-8);width:100%;height:32px;padding:0 var(--sp-10);
  border-radius:var(--radius-sm);cursor:pointer;user-select:none;
  transition:background var(--dur-1),border-radius var(--dur-1)}
.grp-head:hover{background:color-mix(in srgb,var(--grp-col) 8%,transparent)}
/* Coins droits UNIQUEMENT au repos et déplié : un en-tête arrondi qui se
   prolonge par le corps du groupe donne un raccord bancal. Au survol (ou en
   cible de dépôt), la surface colorée redevient une pastille autonome.
   La règle « 0 » est la PLUS spécifique : c'est elle qui décide, sans dépendre
   de l'ordre des déclarations ni de l'expansion d'un raccourci avec var(). */
.grp:not(.collapsed)>.grp-head:not(:hover):not(.drop){border-radius:0}
.grp-head:focus-visible{outline:none;box-shadow:var(--focus)}

.grp-tw{display:inline-flex;color:var(--mut2);transform:rotate(90deg);
  transition:transform var(--dur-2) cubic-bezier(.2,.7,.3,1)}
.grp-tw svg{width:13px;height:13px}
.grp.collapsed>.grp-head .grp-tw{transform:rotate(0deg)}
[dir="rtl"] .grp.collapsed>.grp-head .grp-tw{transform:rotate(180deg)}

/* Pastille : c'est elle qui porte la couleur du groupe, pas tout le bandeau. */
.grp-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:20px;height:20px;border-radius:var(--radius-sm);color:var(--grp-col);
  background:color-mix(in srgb,var(--grp-col) 13%,transparent)}
.grp-badge svg{width:12px;height:12px}

/* Nom et méta sur UNE ligne, alignés sur la même base : empilés, ils faisaient
   un bandeau de 44 px de haut par groupe pour deux informations courtes, et le
   nom cessait d'être à la hauteur des noms de créations qu'il coiffe. */
.grp-id{display:flex;flex-direction:row;align-items:baseline;gap:var(--sp-8);min-width:0}
.grp-name{font-weight:var(--fw-strong);font-size:var(--fs-md);letter-spacing:-.01em;color:var(--txt);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:none}
.grp-meta{font-size:var(--fs-xs);color:var(--mut2);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp[data-depth="0"]{margin-bottom:var(--sp-12)}
/* Replié, un groupe n'est plus qu'une ligne de 34 px : lui laisser l'écart
   d'un groupe déplié (12 px de marge + 6 px de gap de la liste) creusait un
   blanc d'une demi-rangée entre deux titres, et la page paraissait vide. */
.grp[data-depth="0"].collapsed{margin-bottom:var(--sp-2)}
.grp[data-depth="0"]>.grp-head{height:34px}
.grp[data-depth="0"]>.grp-head .grp-name{font-size:var(--fs-base);font-weight:var(--fw-bold)}
.grp[data-depth="0"]>.grp-head .grp-badge{width:22px;height:22px}
.grp[data-depth="0"]>.grp-head .grp-badge svg{width:13px;height:13px}
/* Sous-groupe : même grammaire, un cran plus bas. */
.grp .grp>.grp-head .grp-name{font-size:var(--fs-sm)}
.grp .grp>.grp-head .grp-badge{width:20px;height:20px}
.grp .grp>.grp-head .grp-badge svg{width:12px;height:12px}

.grp-acts{margin-inline-start:auto;display:flex;gap:var(--sp-2);opacity:0;
  transition:opacity var(--dur-1)}
.grp-head:hover .grp-acts,.grp-head:focus-within .grp-acts{opacity:1}
.grp-act{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  padding:0;border:0;border-radius:var(--radius);background:transparent;color:var(--mut2);cursor:pointer;
  transition:background var(--dur-1),color var(--dur-1)}
.grp-act:hover{background:var(--card2);color:var(--txt)}
.grp-act svg{width:14px;height:14px}

/* Corps : rail coloré = la portée du groupe, alignée sous sa pastille. */
/* Portée du groupe : UN rail, fin et neutre. Le rail coloré de 2px, répété à
   chaque niveau, alignait trois traits verticaux parallèles le long de la
   carte des créations (parent, sous-groupe, bordure) : trois fois la même
   information. La couleur du groupe vit dans sa pastille, le rail ne fait plus
   que tenir la portée. */
/* Ni rail ni décrochement : la portée du groupe est dite par son en-tête et par
   le blanc qui l'entoure. Un trait vertical + une indentation par niveau
   redécoupaient la page en couloirs et repoussaient les créations vers la
   droite, pour une information que le titre porte déjà. */
.grp-body{margin:0 0 var(--sp-12);padding:0;
  display:flex;flex-direction:column;gap:var(--sp-6)}
.grp.collapsed>.grp-body{display:none}
.grp-orphans{--grp-col:var(--mut2)}

/* Groupe vide : la zone de dépôt le dit, au lieu d'un blanc silencieux. */
.grp-drop{margin:0;padding:var(--sp-12) var(--sp-14);color:var(--mut2);font-size:var(--fs-sm);
  border:1px dashed var(--line);border-radius:var(--radius-sm)}

/* Cible de dépôt active (glisser-déposer d'une création). */
.grp-head.drop{background:color-mix(in srgb,var(--grp-col) 16%,transparent);
  border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1.5px var(--grp-col)}
.grp-head.drop .grp-tw{color:var(--grp-col)}

/* Les rangées gardent leur mise en page d'origine (le wrapper est transparent). */
.plist-grouped [data-pname]{display:contents}
.plist-grouped [data-pname][hidden]{display:none!important}
.plist-grouped [data-pname].dragging .prow{opacity:.4}
.plist-grouped [data-pname][draggable="true"] .prow{cursor:grab}

/* Recherche active : on déplie tout, sinon un résultat resterait invisible
   dans un groupe replié (et paraîtrait inexistant). */
.plist.filtering .grp>.grp-body{display:flex}
.plist.filtering .grp-tw{transform:rotate(90deg)}

/* ═══ Fiche de groupe : onglets ═══ */
.gsh-tabs{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-16);padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line2)}
.gsh-tab{display:inline-flex;align-items:center;gap:var(--sp-6);padding:var(--sp-8) var(--sp-12);margin-bottom:-3px;
  font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--mut);cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;
  transition:color var(--dur-1),border-color var(--dur-1)}
.gsh-tab:hover{color:var(--txt)}
.gsh-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.gsh-tab svg{width:15px;height:15px}
.gsh-tab:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-sm)}
@media (max-width:640px){ .gsh-tab span{display:none} .gsh-tab{padding:var(--sp-8) var(--sp-14)} }

/* ═══ Formulaire d'identité ═══ */
.grp-f{display:grid;gap:var(--sp-12)}
.grp-fl{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:var(--sp-12)}
.grp-fl>span{font-size:var(--fs-md);color:var(--mut)}
.grp-colw{display:flex;align-items:center;gap:var(--sp-10)}
.grp-fl input[type="color"]{width:52px;height:34px;padding:var(--sp-2);cursor:pointer;flex:none;
  border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--input)}
.grp-slug{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--mut2)}

.grp-block{margin-top:var(--sp-18)}
.grp-block:first-child{margin-top:0}
.grp-block h5{margin:0 0 var(--sp-8);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut2);font-weight:var(--fw-strong)}
.grp-ul{list-style:none;margin:0 0 var(--sp-12);padding:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.grp-ul li{display:flex;align-items:center;gap:var(--sp-10);font-size:var(--fs-md);
  padding:var(--sp-6) var(--sp-8);border-radius:var(--radius-sm);transition:background var(--dur-1)}
.grp-ul li:hover{background:var(--card2)}
.grp-ul-lg li{padding:var(--sp-8)}
/* Pastille ronde : listes compactes (conformité, assistant de déclinaison). */
.grp-dot{width:9px;height:9px;border-radius:50%;flex:none}
.grp-mini{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:var(--radius-sm);color:var(--grp-col,var(--accent));
  background:color-mix(in srgb,var(--grp-col,var(--accent)) 15%,transparent)}
.grp-mini svg{width:14px;height:14px}
.grp-pn{flex:1;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.grp-mut{color:var(--mut2);font-size:var(--fs-sm)}
.grp-empty-b{margin:0 0 var(--sp-12);padding:var(--sp-16);text-align:center;color:var(--mut2);
  font-size:var(--fs-sm);border:1px dashed var(--line);border-radius:var(--radius-sm)}
.grp-x{margin-inline-start:auto;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:0;border-radius:var(--radius-sm);background:transparent;
  color:var(--mut2);cursor:pointer;opacity:0;transition:opacity var(--dur-1),color var(--dur-1)}
.grp-ul li:hover .grp-x,.grp-x:focus-visible{opacity:1}
.grp-x:hover{color:var(--err)}
.grp-x svg{width:13px;height:13px}
.grp-attach{display:flex;gap:var(--sp-8);align-items:center}
.grp-attach select{flex:1;min-width:0}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--link);cursor:pointer;text-align:start}
.linkish:hover{text-decoration:underline}

/* ═══ Patrimoine ═══
   Trois états lisibles d'un coup d'œil : propre (accentué), hérité (filigrane
   + puce d'origine), vide. */
.pat-bar{display:flex;align-items:flex-start;gap:var(--sp-12);margin:0 0 var(--sp-12)}
.pat-lead{margin:0;flex:1;color:var(--mut);font-size:var(--fs-md)}
.pat-bar .mini.on{border-color:var(--accent);color:var(--accent)}

.pat-dom{border:1px solid var(--line2);border-radius:var(--radius-sm);margin:0 0 var(--sp-6);background:var(--card)}
.pat-dom>summary{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-10) var(--sp-12);cursor:pointer;
  list-style:none;user-select:none;border-radius:var(--radius-sm)}
.pat-dom>summary::-webkit-details-marker{display:none}
.pat-dom>summary:hover{background:var(--card2)}
.pat-dom>summary:focus-visible{outline:none;box-shadow:var(--focus)}
.pat-dt{font-weight:var(--fw-strong);font-size:var(--fs-md);color:var(--txt)}
.pat-dn{font-size:var(--fs-xs);color:var(--mut2);font-variant-numeric:tabular-nums;
  padding:var(--sp-1) var(--sp-6);border-radius:var(--radius-pill);background:var(--card2)}
.pat-dom[open]>summary .pat-dn{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.pat-dl{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--mut2)}
.pat-car{display:inline-flex;color:var(--mut2);transition:transform var(--dur-1)}
.pat-car svg{width:14px;height:14px}
.pat-dom[open]>summary .pat-car{transform:rotate(90deg)}
.pat-fs{padding:var(--sp-2) var(--sp-12) var(--sp-14);display:flex;flex-direction:column;gap:var(--sp-12)}

.pat-f{display:grid;grid-template-columns:180px 1fr 140px;align-items:start;gap:var(--sp-12)}
.pat-lb{font-size:var(--fs-md);color:var(--mut);padding-top:var(--sp-8)}
.pat-f.is-own .pat-lb{color:var(--txt);font-weight:var(--fw-medium)}
.pat-in input[type="text"],.pat-in textarea{width:100%}
/* Les <textarea> n'ont de style global que dans `.field` : sans ça, blancs sur fond sombre. */
.pat-in textarea{resize:vertical;min-height:64px;font:inherit;padding:var(--sp-8) var(--sp-10);
  background:var(--input);color:var(--txt);border:1px solid var(--line2);border-radius:var(--radius-sm)}
.pat-in textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
/* Une valeur héritée s'affiche en filigrane : on VOIT ce qui s'applique sans
   croire que la création l'a déclaré. */
.pat-in input::placeholder,.pat-in textarea::placeholder{color:var(--mut2);opacity:.8}
.pat-f.is-own .pat-in input,.pat-f.is-own .pat-in textarea{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line2))}
.pat-col{display:flex;gap:var(--sp-8);align-items:center}
.pat-in>input[type="color"],.pat-col input[type="color"]{width:40px;height:34px;padding:var(--sp-2);flex:none;
  cursor:pointer;border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--input)}
.pat-hex{font-family:var(--font-mono);font-size:var(--fs-sm)}

.pat-or{display:flex;justify-content:flex-end;padding-top:var(--sp-6)}
.pat-chip{display:inline-flex;align-items:center;gap:var(--sp-4);max-width:100%;
  padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);font-size:var(--fs-xs);border:1px solid var(--line2);
  color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pat-chip.own{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--line2));
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pat-x{background:none;border:0;padding:0;margin:0;display:inline-flex;cursor:pointer;color:inherit;opacity:.7}
.pat-x:hover{opacity:1}
.pat-x svg{width:12px;height:12px}
.pat-host{max-width:980px}

/* ═══ Rendu au déploiement ═══ */
.pat-out{margin-top:var(--sp-20);padding-top:var(--sp-16);border-top:1px solid var(--line2)}
.pat-out h4{margin:0 0 var(--sp-4);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut2);font-weight:var(--fw-strong)}
.pat-out>.grp-mut{margin:0 0 var(--sp-12)}
.pat-files{list-style:none;margin:0 0 var(--sp-12);padding:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.pat-file{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8) var(--sp-12);font-size:var(--fs-md);
  border:1px solid var(--line2);border-radius:var(--radius-sm);background:var(--card)}
.pat-file.bad{border-color:color-mix(in srgb,var(--warn) 55%,var(--line2));
  background:color-mix(in srgb,var(--warn) 5%,var(--card))}
.pat-fp{flex:1;font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Bloquant : la couleur d'alerte dit que le déploiement ne partira pas. */
.pat-warn{display:flex;gap:var(--sp-10);padding:var(--sp-12) var(--sp-14);margin:0 0 var(--sp-12);font-size:var(--fs-md);
  border:1px solid color-mix(in srgb,var(--warn) 55%,var(--line2));border-radius:var(--radius-sm);
  background:color-mix(in srgb,var(--warn) 10%,transparent);color:var(--txt)}
.pat-warn svg{width:18px;height:18px;flex:none;color:var(--warn)}
.pat-warn ul{margin:var(--sp-6) 0 0;padding-inline-start:18px;display:flex;flex-direction:column;gap:var(--sp-2)}
.pat-warn code{font-family:var(--font-mono);font-size:var(--fs-sm)}
.pat-pre{margin:0;padding:var(--sp-16);max-height:60vh;overflow:auto;white-space:pre-wrap;word-break:break-word;
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;
  background:var(--code-bg);color:var(--code-fg);border-radius:var(--radius-sm)}

/* ═══ Conformité ═══ */
.cf-tab{width:100%;border-collapse:collapse;margin:var(--sp-8) 0 var(--sp-14);font-size:var(--fs-md)}
.cf-tab th{text-align:start;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut2);font-weight:var(--fw-strong);padding:0 var(--sp-10) var(--sp-8) 0;border-bottom:1px solid var(--line2)}
.cf-tab td{padding:var(--sp-8) var(--sp-10) var(--sp-8) 0;border-bottom:1px solid var(--line2);vertical-align:middle}
.cf-tab tr:last-child td{border-bottom:0}
.cf-tab td:first-child{display:flex;align-items:center;gap:var(--sp-8);color:var(--txt)}
.cf-tab tr.late td:first-child{font-weight:var(--fw-strong)}
.cf-chip{display:inline-block;padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);font-size:var(--fs-xs);
  border:1px solid var(--line2);color:var(--mut2)}
.cf-chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line2));
  background:color-mix(in srgb,var(--ok) 8%,transparent)}
.cf-chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line2));
  background:color-mix(in srgb,var(--warn) 8%,transparent)}
.cf-chip.bad{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,var(--line2));
  background:color-mix(in srgb,var(--err) 8%,transparent)}
.cf-n{margin-inline-start:6px;font-size:var(--fs-xs)}

/* ═══ Assistant de déclinaison ═══ */
.dec-tab{width:100%;border-collapse:collapse;margin:var(--sp-10) 0}
.dec-tab th{text-align:start;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut2);font-weight:var(--fw-strong);padding:0 var(--sp-8) var(--sp-8) 0}
.dec-tab td{padding:var(--sp-2) var(--sp-8) var(--sp-2) 0;vertical-align:middle}
.dec-tab td:first-child,.dec-tab th:first-child{width:26px;padding-inline-end:0}
.dec-tab input[type="text"]{width:100%}
.dec-tab .dec-path{font-family:var(--font-mono);font-size:var(--fs-sm)}
.dec-on{display:inline-flex;align-items:center;cursor:pointer}
.dec-mk{display:inline-flex;align-items:center;gap:var(--sp-6);margin:var(--sp-4) 0 var(--sp-12);font-size:var(--fs-md);
  color:var(--mut);cursor:pointer}

@media (max-width:820px){
  .pat-f{grid-template-columns:1fr;gap:var(--sp-4)}
  .pat-lb{padding-top:0}
  .pat-or{justify-content:flex-start;padding-top:0}
  .pat-dl{display:none}
  .grp-fl{grid-template-columns:1fr;gap:var(--sp-4)}
  .cf-tab thead{display:none}
  .cf-tab td{display:block;padding:var(--sp-2) 0;border:0}
  .cf-tab tr{display:block;padding:var(--sp-10) 0;border-bottom:1px solid var(--line2)}
}
@media (max-width:720px){
  /* Le libellé du bouton mangeait la moitié de la barre : l'icône suffit,
     l'intitulé reste porté par l'infobulle et aria-label. */
  .grp-new span{display:none}
  .grp-new{padding:var(--sp-6) var(--sp-8)}
}
@media (max-width:640px){
  .grp-body{margin-inline-start:14px;padding-inline-start:10px}
  .grp-acts{opacity:1}
}
}

/* ── La liste est UNE carte, pas une pile de cartes ──────────────────────
   Sept créations, c'était sept bordures, sept rayons, sept ombres portées :
   l'œil comptait des boîtes au lieu de lire des noms. Les rangées d'un même
   groupe partagent désormais un seul cadre et se séparent d'un filet, comme
   les tableaux d'une console d'infrastructure. Le rail coloré du groupe reste
   à gauche : c'est lui qui dit la portée, la carte dit seulement l'ensemble. */
/* Une SURFACE, pas une boîte : le cadre fermé autour de sept créations les
   enfermait dans un objet de plus. Le fond de carte suffit à dire « voici la
   liste », les filets internes à dire « voici les lignes ». */
.grp-rows{background:var(--card);border:0;border-radius:0;overflow:hidden}
.grp-rows .prow{border:0;border-radius:0;background:transparent;
  border-bottom:1px solid var(--line2)}
/* Dernière rangée VISIBLE : pendant une recherche, les rangées filtrées sont
   masquées (hidden) et `:last-child` viserait une ligne invisible, laissant un
   filet en l'air sous la dernière ligne affichée. */
.grp-rows>[data-pname]:last-child .prow,
.grp-rows>[data-pname]:has(~[data-pname][hidden]:last-child) .prow{border-bottom:0}
.grp-rows .prow:hover{border-color:var(--line2);
  background:color-mix(in srgb,var(--accent) 5%,transparent)}
/* Sélection : un fond et un liseré d'accent à gauche, jamais un contour complet
   (un contour dans un tableau redécoupe la ligne en boîte). */
.grp-rows .prow.active,.grp-rows .prow[aria-current="true"]{
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  box-shadow:inset 3px 0 0 var(--accent)}
.grp-rows .prow:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}

/* ── Un groupe de créations = UNE carte ──────────────────────────────────
   Quand un groupe ne contient que des créations (pas de sous-groupe), son
   en-tête cesse de flotter au-dessus d'une liste : il DEVIENT la barre de
   titre de la carte, et les rangées en sont le corps. On lit alors « voici
   Polynésie, et voici ce qu'elle contient » au lieu de deux objets posés
   l'un sur l'autre. Le rail et l'indentation deviennent inutiles ici : la
   carte dit la portée mieux qu'un trait. */
/* La barre de titre partage la surface des rangées et s'en sépare d'un filet :
   un aplat gris au-dessus d'une liste blanche faisait DEUX matières empilées là
   où il n'y a qu'un objet. On lit une légende de tableau, pas un couvercle. */
.grp-card>.grp-head{background:var(--card);border:0;border-bottom:1px solid var(--line2);
  border-radius:0;height:36px}
.grp-card:not(.collapsed)>.grp-head:not(:hover):not(.drop){border-radius:0}
.grp-card>.grp-head:hover{background:color-mix(in srgb,var(--grp-col) 5%,var(--card))}
.grp-card>.grp-body{margin:0 0 var(--sp-12)}
/* Replié : le filet du bas n'a plus rien à séparer. */
.grp-card.collapsed>.grp-head{border-bottom:0}

/* ── Volet « Suite » de la fiche de groupe (CDC_SUITES.md S5) ─────────────
   Une suite se lit d'un coup d'œil : ses réglages en clair, puis une ligne par
   app avec ses environnements en pastilles et l'état de son commun. Rien de
   neuf visuellement : on réemploie la grammaire de la fiche de groupe, on
   n'ajoute que ce qu'une app impose de plus (pastilles d'environnement,
   adresse locale, verdict du lien). */
@layer modules{
/* Fond NEUTRE, pas `--chrome-bg` : celui-ci est teinté par l'accent de la
   création courante, et un chemin de dossier affiché en rose dit une couleur
   qui ne veut rien dire ici. */
.su-code{display:inline-block;padding:var(--sp-2) var(--sp-6);border-radius:var(--radius-xs);
  background:color-mix(in srgb,var(--txt) 5%,var(--card));color:var(--txt);
  font-size:var(--fs-sm);word-break:break-all}
/* Les <textarea> n'ont de style global que dans `.field` : sans ça, blancs sur
   fond sombre et larges de vingt caractères (même leçon que `.pat-in`). */
.su-ta{width:100%;resize:vertical;min-height:64px;font:inherit;font-family:var(--font-mono);
  font-size:var(--fs-sm);padding:var(--sp-8) var(--sp-10);
  background:var(--input);color:var(--txt);border:1px solid var(--line2);border-radius:var(--radius-sm)}
.su-ta:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.su-ta::placeholder{color:var(--mut2);opacity:.8}
.su-pills{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
/* La pastille porte la couleur de son TYPE d'environnement (bleu, ambre,
   rouge), en teinte de fond seulement : trois aplats pleins par ligne d'app
   feraient un damier là où on cherche un état. */
.su-pill{display:inline-flex;align-items:center;height:18px;padding:0 var(--sp-6);
  border-radius:var(--radius-xs);font-size:var(--fs-xs);font-weight:var(--fw-strong);
  color:var(--su-c,var(--accent));background:color-mix(in srgb,var(--su-c,var(--accent)) 12%,transparent)}
.su-apps li{flex-wrap:wrap;gap:var(--sp-6)}
.su-url{color:var(--mut);font-size:var(--fs-xs);text-decoration:none}
.su-url:hover{color:var(--accent)}
.su-liens{display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-xs)}
.su-ok{color:var(--mut)}
.su-bad{color:var(--bad);font-size:var(--fs-xs)}
}