/* ── 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 est une surface POSÉE (fond `--card`, filet `--line2`), car
   c'est une action, pas un choix exclusif. « Nouveau groupe » a quitté la
   barre le 2026-10-08 (étape « Quoi ajouter ? » de « Nouveau »). */
.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}

/* ═══ 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:none}
/* Survol : le nom se souligne, le fond ne bouge pas (le proprio, 2026-10-25 : « fais text decoration underline
   sur le nom et retire le fond qui change au hover, et transition duration 0s »). Le fond teinté faisait
   clignoter une bande entière pour dire « cliquable », ce que le soulignement dit sur le seul nom. */
.grp-head .grp-name{padding-block:3px;margin-block:-3px}   /* place du soulignement, que l'overflow coupait */
.grp-head:hover .grp-name{text-decoration:underline;text-underline-offset:2px}
/* 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}
/* L'image d'un groupe à la place de l'icône du type (2026-10-31) : accueil, rail de la fenêtre, champ Image de la fiche. */
.grp-badge-img{background:transparent;overflow:hidden}
.grp-badge img,.grp-rail-badge img,.grp-image-ap img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.grp-rail{--grp-col:var(--accent)}
.grp-rail-badge{width:56px;height:56px;border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;margin-bottom:var(--sp-12);
  color:var(--grp-col);background:color-mix(in srgb,var(--grp-col) 13%,transparent)}
.grp-rail-badge svg{width:26px;height:26px}
.grp-rail-faits{list-style:none;margin:var(--sp-16) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}
.grp-rail-faits li{display:flex;align-items:center;gap:var(--sp-8)}
.grp-rail-faits svg{width:14px;height:14px;flex:none;color:var(--accent)}
.grp-image{align-items:start}
.grp-image .pf-ic{flex:1;min-width:0}
.grp-image-ap{color:var(--grp-col);background:color-mix(in srgb,var(--grp-col) 13%,transparent);overflow:hidden}
.grp-image-ap svg{width:20px;height:20px}
.grp-rail-badge.a-image,.grp-image-ap.a-image,.grp-mini.a-image{background:transparent}
.grp-mini img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
/* L'arbre des sous-groupes dans l'onglet Dossiers : chaque étage en retrait, les dossiers d'un sous-groupe sous lui. */
.grp-arbre li{padding-inline-start:calc(var(--prof,0) * 20px)}
.grp-arbre .grp-sg-p .grp-pn{color:var(--mut)}
.grp-h5{margin:var(--sp-16) 0 var(--sp-6);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--mut2)}
.grp-mini.a-image{overflow:hidden}   /* une image posée : sans fond de couleur (le proprio, 2026-10-31) */

/* 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:none}
.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)}
/* Le rail revient, mais seulement pour un groupe qui EN CONTIENT d'autres (le proprio, 2026-10-25, sur capture :
   « quand je déplie, j'ai du mal à savoir quel dossier est dans quel groupe »). Sans retrait, un sous-groupe et
   ses dossiers s'alignaient sur le parent, et on ne savait plus où finissait Polynésie et où reprenait Rāve'a
   digital. Le rail part sous le chevron, porte la couleur du groupe en teinte légère, et décale d'un seul cran
   par niveau. Un groupe sans sous-groupe reste une carte (.grp-card) : c'est sa barre de titre qui dit sa portée. */
/* En pointillés (le proprio, 2026-10-25 : « les lignes verticales, fais des pointillés ») : un trait plein
   se lisait comme une bordure de plus ; le pointillé dit « ceci est rangé sous », sans fermer une boîte.
   1 px (le proprio, 2026-10-25 : « les traits verticaux : plus fins »), teinte relevée pour rester lisible. */
.grp:not(.grp-card)>.grp-body{margin-inline-start:16px;padding-inline-start:var(--sp-12);
  border-inline-start:1px dotted color-mix(in srgb,var(--grp-col) 60%,var(--line2))}

/* 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(--txt);border-bottom-color:var(--accent)}   /* le texte du courant en encre, le trait en accent : lisible en sombre (2026-10-31) */
.gsh-tab svg{width:15px;height:15px}
.gsh-tab:focus-visible{outline:none;box-shadow:var(--focus);border-radius:0}   /* sans arrondi (le proprio, 2026-10-31) */
@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)}
/* Un seul « Groupe », dont la suite est un type (le proprio, 2026-10-08) : le type choisi à l'étape
   d'avant, rappelé avec « Changer de type », et l'interrupteur groupe ↔ suite de la fiche. */
.grp-type-pris{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8);color:var(--txt);font-size:var(--fs-md)}
.grp-type-pris .linkish{font-size:var(--fs-sm)}
/* Une suite ne montre pas le sélecteur de type (c'est l'interrupteur qui le dit) : `hidden` doit gagner sur display:grid. */
.grp-fl[hidden]{display:none}
.grp-sw-w{display:flex;align-items:center;gap:var(--sp-10);min-width:0}
.grp-sw-w .grp-mut{margin:0}
/* Éteint, l'interrupteur maison (bord --line sur fond --bg2) se perdait sur la fiche claire : son bord prend --mut2. */
.grp-sw-w .switch:not(.on){border-color:var(--mut2)}
.grp-sw-w .switch:focus-visible{outline:none;box-shadow:var(--focus)}
.grp-sw-w .switch:disabled{opacity:.6;cursor:progress}

.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 (point accentué), hérité (filigrane + étage d'origine), vide.
   Refait le 2026-10-25 (le proprio, sur capture : « il faudrait améliorer le design de cette page ») : une tête (chaîne
   d'héritage, compte, bascule Tous / Renseignés), un sommaire collant à gauche, des rubriques à filets d'un demi-pixel, des
   champs en lignes compactes séparées par un filet, au lieu de quinze boîtes empilées aux champs gris. */
.pat-host{max-width:1180px}
.pat-bar{display:flex;align-items:flex-end;gap:var(--sp-16);margin:0 0 var(--sp-18);padding-bottom:var(--sp-14);
  border-bottom:.5px solid var(--line)}
.pat-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.pat-chaine{list-style:none;margin:0 0 var(--sp-2);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  font-size:var(--fs-xs);color:var(--mut2)}
.pat-chaine li{display:inline-flex;align-items:center;gap:var(--sp-4)}
.pat-chaine li+li::before{content:"›";color:var(--mut2)}
.pat-chaine li.ici{color:var(--txt);font-weight:var(--fw-medium)}
.pat-lead{margin:0;color:var(--txt);font-size:var(--fs-md)}
.pat-stats{margin:0;color:var(--mut2);font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.pat-acts{display:flex;align-items:center;gap:var(--sp-8);flex:none}
.pat-vue{--hh:30px;--hpad:3px}
.pat-vue .vt-seg{padding:0 var(--sp-12);font-size:var(--fs-sm)}

.pat-corps{display:grid;grid-template-columns:190px minmax(0,1fr);gap:var(--sp-24);align-items:start}
/* Dans la fiche d'un groupe (rail à gauche), le Patrimoine n'a pas la largeur d'un écran : sous 760 px de conteneur, l'index
   passe au-dessus en rangée et le volet prend toute la largeur ; sous 560 px, chaque champ s'empile (le proprio, 2026-10-31 :
   les champs étaient réduits à trois lettres). */
.gsh-pane[data-pane="pat"]{container-type:inline-size}
@container (max-width:760px){
  .pat-corps{grid-template-columns:1fr;gap:var(--sp-14)}
  .pat-corps .pat-index{position:static;flex-direction:row;flex-wrap:wrap;gap:var(--sp-4);max-height:none}   /* plus précis que .pat-index écrit plus bas */
  .pat-corps .pat-index .pat-ix{width:auto;padding:var(--sp-4) var(--sp-10);border:.5px solid var(--line2);border-radius:var(--radius-pill)}   /* plus précis que .pat-ix{width:100%} écrit plus bas */
}
@container (max-width:560px){
  .pat-f{grid-template-columns:1fr;gap:var(--sp-4)}
  .pat-lb{padding-top:0}
}
.pat-index{position:sticky;top:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-1);
  max-height:calc(100vh - 120px);overflow:auto}
.pat-ix{display:flex;align-items:center;gap:var(--sp-8);width:100%;padding:var(--sp-6) var(--sp-8);border:0;
  border-radius:var(--radius-sm);background:transparent;color:var(--txt);font:inherit;font-size:var(--fs-sm);text-align:start;cursor:pointer}
.pat-ix:hover{background:var(--card2)}
.pat-ix:focus-visible{outline:none;box-shadow:var(--focus)}
.pat-ix.vide{color:var(--mut2)}
.pat-ixl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pat-ixn{flex:none;font-size:var(--fs-2xs);color:var(--mut2);font-variant-numeric:tabular-nums}
.pat-doms{display:flex;flex-direction:column;gap:var(--sp-10);min-width:0}

.pat-dom{border:.5px solid var(--line);border-radius:var(--radius);background:var(--card);scroll-margin-top:var(--sp-16)}
.pat-dom>summary{display:flex;align-items:center;gap:var(--sp-8);min-height:40px;padding:0 var(--sp-14);cursor:pointer;
  list-style:none;user-select:none;border-radius:var(--radius)}
.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-dom[open]>summary{border-bottom:.5px solid var(--line2);border-radius:var(--radius) var(--radius) 0 0}
.pat-dt{font-weight:var(--fw-strong);font-size:var(--fs-sm);color:var(--txt)}
.pat-dn{font-size:var(--fs-2xs);color:var(--accent);font-variant-numeric:tabular-nums;
  padding:var(--sp-1) var(--sp-6);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pat-dn.vide{color:var(--mut2);background:var(--card2)}
/* « Décliner la société » reste poussé à droite depuis que l'indication d'étage (.pat-dl, qui le poussait) est partie (2026-11-06). */
.pat-dom>summary>.mini{margin-inline-start:auto}
.pat-car{display:inline-flex;color:var(--mut2);transition:transform var(--dur-1)}
.pat-car svg{width:12px;height:12px}
.pat-dom[open]>summary .pat-car{transform:rotate(90deg)}
.pat-fs{padding:0 var(--sp-14);display:flex;flex-direction:column}

.pat-f{display:grid;grid-template-columns:170px minmax(0,1fr) 130px;align-items:start;gap:var(--sp-14);padding:var(--sp-8) 0}
.pat-f+.pat-f{border-top:.5px solid var(--line2)}
/* Le libellé global (06-components.css : medium, bloc à marge basse) se tient ici en ligne, en texte courant. */
.pat-lb{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--mut);padding-top:var(--sp-6);line-height:var(--lh-tight)}
.pat-f.is-own .pat-lb{color:var(--txt);font-weight:var(--fw-medium)}
.pat-in input[type="text"],.pat-in textarea{width:100%;font-size:var(--fs-sm)}
/* Une valeur héritée s'affiche en filigrane, dans un champ sans fond : on VOIT ce qui s'applique sans croire que la création
   l'a déclaré ; un champ propre a son fond et son filet. */
.pat-in input[type="text"]{height:30px;padding:0 var(--sp-10);background:transparent;border:.5px solid var(--line2);
  border-radius:var(--radius-sm);color:var(--txt);box-shadow:none}
/* Les <textarea> n'ont de style global que dans `.field` : sans ça, blancs sur fond sombre. */
.pat-in textarea{resize:vertical;min-height:56px;font-family:inherit;line-height:var(--lh-normal);padding:var(--sp-6) var(--sp-10);
  background:transparent;color:var(--txt);border:.5px solid var(--line2);border-radius:var(--radius-sm)}
.pat-in input[type="text"]:hover,.pat-in textarea:hover{border-color:var(--line)}
.pat-in input[type="text"]:focus,.pat-in textarea:focus{outline:none;background:var(--input);border-color:var(--accent);box-shadow:var(--focus)}
.pat-in input::placeholder,.pat-in textarea::placeholder{color:var(--mut2);opacity:1}
.pat-f.is-own .pat-in input[type="text"],.pat-f.is-own .pat-in textarea{background:var(--input);
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line2))}
.pat-col{display:flex;gap:var(--sp-8);align-items:center}
.pat-in>input[type="color"],.pat-col input[type="color"]{width:30px;height:30px;padding:var(--sp-2);flex:none;
  cursor:pointer;border:.5px solid var(--line2);border-radius:var(--radius-sm);background:transparent}
.pat-hex{font-family:var(--font-mono)}

.pat-or{display:flex;justify-content:flex-end;padding-top:var(--sp-6);min-width:0}
.pat-chip{display:inline-flex;align-items:center;gap:var(--sp-4);max-width:100%;font-size:var(--fs-2xs);
  color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pat-chip.own{color:var(--accent);font-weight:var(--fw-medium)}
.pat-pt{width:6px;height:6px;flex:none;border-radius:var(--radius-pill);background:currentColor}
.pat-x{background:none;border:0;padding:0;margin:0;display:inline-flex;cursor:pointer;color:var(--mut2);opacity:0;
  transition:opacity var(--dur-1)}
.pat-f:hover .pat-x,.pat-x:focus-visible{opacity:1}
.pat-x:hover{color:var(--txt)}
.pat-x svg{width:12px;height:12px}

/* ═══ Rendu au déploiement ═══ */
.pat-out{margin-top:var(--sp-14);border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
.pat-out-tete{display:flex;align-items:flex-start;gap:var(--sp-12);padding:var(--sp-12) var(--sp-14)}
.pat-out-tete>div{flex:1;min-width:0}
.pat-out h4{margin:0 0 var(--sp-2);font-size:var(--fs-sm);color:var(--txt);font-weight:var(--fw-strong)}
.pat-out-lead{margin:0;font-size:var(--fs-xs);color:var(--mut2)}
.pat-files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border-top:.5px solid var(--line2)}
.pat-file{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-6) var(--sp-14);font-size:var(--fs-sm)}
.pat-file+.pat-file{border-top:.5px solid var(--line2)}
.pat-file:hover{background:var(--card2)}
.pat-file:last-child{border-radius:0 0 var(--radius) var(--radius)}
.pat-file.bad{background:color-mix(in srgb,var(--warn) 6%,var(--card))}
.pat-fp{flex:1;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pat-fo{flex:none;font-size:var(--fs-2xs);color:var(--mut2);font-variant-numeric:tabular-nums}
.pat-out .pat-warn{margin:0 var(--sp-14) var(--sp-12)}
/* 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-corps{grid-template-columns:1fr}
  .pat-index{display:none}
  .pat-bar{flex-direction:column;align-items:stretch}
  .pat-acts{justify-content:flex-end}
  .pat-x{opacity:1}
  .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:640px){
  .grp-body{margin-inline-start:14px;padding-inline-start:10px}
  .grp-acts{opacity:1}
  /* La fiche porte quatre gestes au pied (Supprimer, Annuler, Décliner, Enregistrer) : en 375 px,
     « Enregistrer » sortait du dialogue, rogné (vu au banc groupe_unique le 2026-10-08). Ils passent à la ligne. */
  .mx-main:has(.gsh) .mx-foot{flex-wrap:wrap;row-gap:var(--sp-8)}
}
}

/* ── 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}
/* Survol d'un dossier : la grammaire du groupe, le nom souligné ; le fond reste, mais à moitié moins teinté
   (le proprio, 2026-10-25 : « il faut faire le text decoration underline au hover, et le fond moins opaque »). */
.grp-rows .prow,.grp-rows .prow *{transition:none}
.grp-rows .prow:hover{border-color:var(--line2);
  background:color-mix(in srgb,var(--accent) 2.5%,transparent)}
/* Le nom coupe ce qui dépasse (overflow:hidden, ligne serrée) : le soulignement tombait sous sa boîte et
   disparaissait, déclaré mais invisible (le proprio, 2026-10-25 : « nn toujours pas »). 3 px de marge
   intérieure, rendus par une marge négative, lui donnent la place sans bouger la rangée. */
.grp-rows .prow .pname{padding-block:3px;margin-block:-3px}
.grp-rows .prow:hover .pname{text-decoration:underline;text-underline-offset:2px}
/* La main cliquable sur un dossier, un groupe et un sous-groupe, jamais la main de glisser (le proprio,
   2026-10-25 : d'abord « met le cursor normal », puis « il faut le cursor style clickable ») : c'est la main
   « saisir » du glisser-déposer qu'il refusait ; le glisser marche toujours, il ne s'annonce plus. */
.grp-rows .prow,.plist-grouped [data-pname][draggable="true"] .prow,.grp-head{cursor:pointer}
/* 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: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}

/* Les en-têtes du premier niveau partagent UNE DA, carte ou non (le proprio, 2026-10-25, sur capture :
   « ces deux lignes doivent avoir la même DA ; fond transparent, lorsqu'on clique il devient fond blanc ;
   transition 0s partout »). « Rāve'a digital » flottait sur le gris et « Sans groupe » portait une barre
   blanche : deux matières pour deux objets de même rang. Replié = transparent ; déplié = la barre blanche
   de la carte, filet compris. Placées après .grp-card pour l'emporter à spécificité égale au survol. */
.grp[data-depth="0"]>.grp-head,
.grp[data-depth="0"]>.grp-head:hover{background:transparent;border-bottom:0;border-radius:0;height:36px}
.grp[data-depth="0"]:not(.collapsed)>.grp-head,
.grp[data-depth="0"]:not(.collapsed)>.grp-head:hover{background:var(--card);border-bottom:1px solid var(--line2)}
.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}
/* Déplié, le groupe du premier niveau devient UN conteneur blanc aux coins arrondis, enfants compris (le
   proprio, 2026-10-25 : « le container parent doit avoir un fond blanc et un border radius »). Les rangées
   restent sur leur propre blanc : c'est le gris de la page autour qui dessine l'objet entier. */
.grp[data-depth="0"]:not(.collapsed){background:var(--card);border-radius:var(--radius);overflow:hidden}
/* Le bas d'un groupe déplié (le proprio, 2026-10-25, sur capture : « trop d'espace en bas ») : les marges basses du corps
   d'un sous-groupe (12 px chacun) et celle du dernier sous-groupe s'ajoutaient au rembourrage du parent, jusqu'à 34 px sous
   la dernière rangée, rail compris. Un seul blanc reste : le rembourrage du premier niveau. */
.grp[data-depth="0"]:not(.collapsed)>.grp-body{margin-bottom:0;padding-bottom:var(--sp-6)}
.grp .grp>.grp-body,.grp-body>.grp:last-child{margin-bottom:0}
.grp[data-depth="0"].collapsed>.grp-head{border-radius:var(--radius)}
/* Aucune transition dans l'arbre : déplier, survoler et tourner le chevron sont instantanés. */
.plist-grouped .grp-head,.plist-grouped .grp-tw,.plist-grouped .grp-acts,.plist-grouped .grp-act,
.plist-grouped .prow{transition:none}

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

/* Les dossiers d'une solution neuve (2026-10-25) : une liste à cocher dans un seul cadre, un trait entre chaque dossier. */
@layer modules{
.grp-sol{margin-top:var(--sp-12)}
.grp-sol-d{font-size:var(--fs-sm);color:var(--mut);line-height:var(--lh-normal)}
.grp-sol-m{max-height:260px;overflow:auto;border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
.grp-sol-l{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-12);cursor:pointer;font-size:var(--fs-md)}
.grp-sol-l+.grp-sol-l{border-top:.5px solid var(--line)}
.grp-sol-l:hover{background:var(--card2)}
.grp-sol-l input{margin:0;accent-color:var(--accent)}
.grp-sol-l .picon{width:22px;height:22px}
.grp-sol-g{margin-inline-start:auto;font-size:var(--fs-xs);color:var(--mut)}
}