@layer modules{
/* ── Paramètres v2 : vue plein écran intégrée à l'UI (façon Google Chrome settings) ──
   Plus de modal : la page se monte dans #grid, masque les colonnes profil/aperçu,
   rail gauche persistant (marque + sections + retour) et panneau scrollable à droite.
   Complète 06-components.css (.set-*) ; inclut densité, accent et picker ColorX. */

/* Densité globale de l'interface (Paramètres → Apparence). */
/* Densité : voir 01-tokens.css - c'est --sp-u qui change, plus un zoom. */

/* ── Mode Paramètres : la page occupe toute la zone centrale ── */
body.in-settings .col-profile,body.in-settings .col-report{display:none}
body.in-settings .split{grid-template-columns:1fr}

/* ── Coquille : le rail est FIXE, seul le panneau défile ─────────────────────
   La coquille occupe EXACTEMENT la place restante, et cette place se calcule
   avec les termes qui la produisent : la barre (--hh-bar, celle-là même qui
   décale le body) et les deux paddings verticaux de .wrap. C'était écrit
   « 100vh - 76px » : 12 px de trop, donc toute l'application débordait et le
   rail s'en allait avec le contenu. Et `min-height:520px` reprenait la main
   sous ~600 px de hauteur de fenêtre : la coquille redevenait plus haute que
   l'écran et 48 px de contenu passaient hors d'atteinte. Le plancher est
   retiré : sur une fenêtre basse, c'est au panneau de défiler, pas à la page.
   `align-items:flex-start` : le rail est une CARTE, pas une colonne, il prend
   la hauteur de ses sections et s'arrête là. Il n'a pas besoin d'être étiré
   pour être immobile : la coquille ne défile pas, donc rien ne le déplace. */
.set-page{display:flex;align-items:flex-start;gap:var(--sp-20);min-width:0;
  height:calc(100dvh - var(--hh-bar) - var(--wrap-pad-y) * 2);min-height:0;
  background:transparent;border:0;border-radius:0;overflow:hidden}

/* Le fond des Paramètres est une SURFACE PLEINE, pas le gris de la page.
   Il est posé sur le canal et non sur `.set-page`, qui s'arrête en deçà des
   marges du canal : peint là, il aurait laissé un cadre gris de 16 px sur 18.
   `--card` et non `--bg2` : en clair les deux valent le même blanc, mais en
   sombre `--bg2` est plus SOMBRE que la page (#010409 contre #0d1117), ce qui
   creuserait un puits là où on demande une surface. `--card` monte d'un cran
   dans les deux thèmes, ce qui est la traduction fidèle de « blanc ». */
body.in-settings .wrap{background:var(--card)}

/* ── Rail gauche : carte flottante compacte (retour, marque, groupes, réassurance) ── */
/* La colonne : la carte du menu, puis « Détails des mises à jour » posé dessous, hors de la carte (2026-10-25). */
.set-col{display:flex;flex-direction:column;gap:var(--sp-8);width:204px;flex:none;max-height:100%;min-height:0}
.set-page .set-nav{display:flex;flex-direction:column;gap:var(--sp-1);width:100%;flex:none;
  /* Ni `fixed` ni `sticky` : la coquille ne défile pas, le rail est donc déjà
     immobile par construction, et il reste dans le flux, donc calé sur le
     canal sans avoir à réinventer sa position à chaque largeur.
     Hauteur AUTO, plafonnée à la coquille : la carte s'arrête sous sa dernière
     entrée, et ne défile pour elle-même que si ses sections dépassent l'écran. */
  height:auto;max-height:100%;min-height:0;padding:var(--sp-10);overflow:auto;
  /* Un FILET, et plus d'ombre (2026-09-17). L'ombre détachait le rail d'un fond
     gris ; sur la surface pleine d'à côté, elle n'a plus rien à détacher et se
     voit comme une salissure. En clair, le rail et le fond valent désormais le
     même blanc : c'est le filet d'un demi-pixel qui dit où s'arrête la carte,
     et lui seul. */
  border:.5px solid var(--line);border-radius:var(--radius);background:var(--bg2);
  box-shadow:none}
.set-back{display:flex;align-items:center;gap:var(--sp-6);width:100%;text-align:left;flex:none;
  border:none;background:transparent;color:var(--mut);cursor:pointer;font:inherit;font-size:var(--fs-sm);
  padding:var(--sp-4) var(--sp-8);margin:0 0 var(--sp-4);border-radius:var(--radius);transition:background .12s,color .12s}
.set-back:hover{background:var(--line2);color:var(--txt)}
.set-back svg.ic{width:15px;height:15px;flex:none}
.set-brand{display:flex;align-items:center;gap:var(--sp-8);flex:none;
  padding:0 var(--sp-4) var(--sp-10);margin:0 var(--sp-2) var(--sp-6);border-bottom:1px solid var(--line2)}
.set-nav-g{font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.07em;color:var(--mut2);
  margin:var(--sp-10) var(--sp-6) var(--sp-4);flex:none}
.set-brand+.set-nav-g{margin-top:var(--sp-2)}
.set-page .set-nav-item{display:flex;align-items:center;gap:var(--sp-8);width:100%;text-align:left;
  border:none;background:transparent;color:var(--txt);padding:var(--sp-6) var(--sp-8);border-radius:var(--radius);
  font:inherit;font-size:var(--fs-sm);cursor:pointer;flex:none;transition:background 0s,color 0s}
.set-page .set-nav-item:hover{background:var(--line2);color:var(--txt)}
.set-page .set-nav-item.on{background:var(--accent);color:var(--on-solid)}
.set-nav-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* « Se déconnecter », dernière entrée de Compte (2026-10-08) : neutre au repos, comme ses voisines, pour
   ne pas crier dans une colonne qu'on ouvre surtout pour régler autre chose ; l'alerte (--err, jeton
   redéfini par thème, donc juste dans les trois états, N20) ne vient qu'au survol et au focus clavier.
   Seule entrée à icône : elle dit « geste », pas « section ». */
.set-page .set-nav-sortie svg.ic{width:15px;height:15px;flex:none;color:var(--mut)}
/* Fond du survol = celui des voisines (--line2), opaque : un voile rouge à 10 % faisait tomber --err à
   3,9:1 en clair (banc du 2026-10-08) ; sur --line2, --err tient 4,65:1 en clair et 4,54:1 en sombre. */
.set-page .set-nav-sortie:hover,.set-page .set-nav-sortie:focus-visible{color:var(--err);background:var(--line2)}
.set-page .set-nav-sortie:hover svg.ic,.set-page .set-nav-sortie:focus-visible svg.ic{color:currentColor}
.set-reassure{display:flex;gap:var(--sp-6);align-items:flex-start;font-size:var(--fs-xs);color:var(--mut);line-height:1.45;
  margin:var(--sp-14) var(--sp-2) 0;margin-top:auto;padding:var(--sp-12) var(--sp-4) 0;border-top:1px solid var(--line2);flex:none}
.set-reassure svg.ic{width:13px;height:13px;flex:none;margin-top:var(--sp-1)}

/* ── Panneau : tête éditoriale + contenu scrollable ── */
/* `max-height:100%` n'est pas redondant : 06-components.css plafonne .set-pane
   à 72vh pour la version modale, et un max-height l'emporte sur une height. */
.set-page .set-pane{flex:1;min-width:0;height:100%;max-height:100%;min-height:0;overflow:auto;padding:var(--sp-20) var(--sp-28) var(--sp-26) var(--sp-14)}
.set-head{margin:0 0 var(--sp-18)}
.set-eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.set-head h3{margin:var(--sp-2) 0 var(--sp-6);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.015em}
.set-lead{margin:0;font-size:var(--fs-md);color:var(--mut);line-height:1.55;max-width:600px}

/* ── Fil d'Ariane (l'eyebrow devient « Paramètres › Panneau › Section ») ── */
.set-eyebrow.set-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-6);
  text-transform:none;letter-spacing:var(--ls-none);font-weight:var(--fw-strong);font-size:var(--fs-sm);color:var(--mut2)}
.set-crumb-root{color:var(--mut2)}
.set-crumb-sep{color:var(--mut2);opacity:.6}
.set-crumb-link{border:none;background:transparent;padding:0;font:inherit;color:var(--mut);cursor:pointer}
.set-crumb-link:hover{color:var(--accent);background:transparent}
.set-crumb-cur{color:var(--accent)}

/* Sous la carte, un lien : ni fond ni cadre, souligné au survol (le proprio, 2026-10-25). */
.set-page .set-col>.set-nav-item.set-nav-maj,.set-page .set-col>.set-nav-item.set-nav-maj:hover,.set-page .set-col>.set-nav-item.set-nav-maj.on{
  background:transparent;color:var(--mut);padding:var(--sp-2) var(--sp-10);font-size:var(--fs-sm)}
.set-page .set-col>.set-nav-item.set-nav-maj:hover,.set-page .set-col>.set-nav-item.set-nav-maj:focus-visible{color:var(--txt);text-decoration:underline;text-underline-offset:3px}
.set-page .set-col>.set-nav-item.set-nav-maj.on{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── Sous-onglets de section ──
   Figés en haut du panneau quand on fait défiler son contenu (le proprio, 2026-10-25 : « quand on scroll le contenu, il faut
   figer le menu lorsqu'on arrive en haut » ; pour Application, Compte utilisateur, Entreprise, Facturation : tous passent par
   setPaneTabify). Le panneau défile en lui-même : collée à -20 px, la rangée couvre son rembourrage du haut. */
.set-subtabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin:0 0 var(--sp-20);
  border-bottom:1px solid var(--line)}
.set-pane>.set-subtabs{position:sticky;top:calc(-1 * var(--sp-20));z-index:3;background:var(--card);
  padding-top:var(--sp-4);margin-top:calc(-1 * var(--sp-4))}
.set-subtab{border:none;background:transparent;color:var(--mut);cursor:pointer;
  font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);padding:var(--sp-8) var(--sp-12);border-radius:0;
  position:relative;margin-bottom:-1px;border-bottom:2px solid transparent;transition:color .12s}
.set-subtab:hover{color:var(--txt);background:transparent}
.set-subtab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* La fenêtre du dossier : Réglages, Mises à jour vérifiées (2026-10-19) ; le fragment y perd la marge d'une page. */
.pf-onglets{margin-bottom:var(--sp-16)}
.pf-jx .atelier-page{padding:0;max-width:none}
/* Logo et icône du dossier (CDC_IDENTITE I1, 2026-10-25) : deux cases, l'aperçu sur un damier discret (la transparence se voit),
   le nom, ce qu'on peut déposer, les deux gestes. L'icône tirée du logo s'affiche estompée tant qu'aucune n'est posée. */
.pf-ident-cases{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-10)}
.pf-ic-acts [hidden]{display:none}   /* « Retirer » caché sans image : .mini posait display et gagnait sur hidden (2026-10-31) */
.pf-ic{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10);border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
.pf-ic-ap{flex:none;width:72px;height:48px;display:grid;place-items:center;border-radius:var(--radius-sm);color:var(--mut2);
  background:repeating-conic-gradient(var(--card2) 0 25%,var(--card) 0 50%) 0 0/12px 12px;border:.5px solid var(--line2);overflow:hidden}
.pf-ic-ap.carre{width:48px}
.pf-ic-ap img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.pf-ic-ap img.tiree{opacity:.45}
.pf-ic-ap svg.ic{width:18px;height:18px}
.pf-ic-tx{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.pf-ic-t{font-size:var(--fs-sm);font-weight:var(--fw-medium);color:var(--txt)}
.pf-ic-d{font-size:var(--fs-xs);color:var(--mut2)}
.pf-ic-acts{display:flex;gap:var(--sp-6);margin-top:var(--sp-4)}
@media(max-width:560px){ .pf-ident-cases{grid-template-columns:1fr} }
/* Librairie : sept onglets sur une ligne qui défile à l'horizontale, comme une barre d'app.
   La règle vit ici et non dans 06-components.css : cette feuille est dans @layer modules,
   qui passe après @layer components ; sa « flex-wrap:wrap » y battait toute règle (2026-10-07). */
/* contain:inline-size : en colonne (mobile), .set-page aligne en flex-start et le panneau prend
   la largeur minimale de son contenu ; sans cela, la barre sur une ligne l'élargissait à 630 px. */
.lib-store .lib-nav .lib-tabs-bar{margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;contain:inline-size}
.lib-store .lib-nav .lib-tabs-bar::-webkit-scrollbar{display:none}
/* Même cause pour la fiche d'un moteur : à 375 px elle poussait le panneau à 958 px, que .set-page
   (overflow:hidden) coupait sans défilement (banc parametres.mjs, 2026-10-08, quand la Librairie
   est revenue en entier dans les Paramètres à la demande du proprio). */
.set-page .lib-detail-view{contain:inline-size}
.lib-store .lib-nav .set-subtab{flex:none;white-space:nowrap;margin-bottom:0}
/* Onglet actif : la section occupe seule l'espace, sans filets de séparation ni libellé redondant */
.set-pane.tabbed .set-sec{border-bottom:0;margin-bottom:0;padding-bottom:var(--sp-8)}
.set-label-tabbed{display:none}

/* ── Sections à plat : un simple filet de séparation entre chacune ── */
.set-page .set-sec{border:0;border-radius:0;background:transparent;
  padding:0 0 var(--sp-16);margin:0 0 var(--sp-16);border-bottom:1px solid var(--line)}
.set-page .set-sec:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:var(--sp-8)}
/* Une section qui continue la précédente (Sécurité : Mot de passe, puis Double authentification) : un filet au-dessus.
   Ici et non dans 06-components.css : la règle « .set-page .set-sec » de cette couche l'y écrasait (2026-10-19). */
.set-page .set-sec.set-sec-suite{margin-top:var(--sp-18);padding-top:var(--sp-18);border-top:1px solid var(--line2)}
.set-page .set-label{padding:0 0 var(--sp-2);margin:0 0 var(--sp-2)}
.set-page .set-row{min-height:52px;padding:var(--sp-10) 0;gap:var(--sp-16)}
.set-page .set-row+.set-row{margin:0;border-top:1px solid var(--line2)}
.set-page .set-k{font-size:var(--fs-md);font-weight:var(--fw-medium);gap:var(--sp-2)}
.set-page .set-d{font-weight:var(--fw-regular);line-height:1.45;max-width:520px}
.set-page .set-sec .field{margin:var(--sp-10) 0 var(--sp-14)}
.set-page .set-sec>.set-note{margin:var(--sp-6) 0 var(--sp-10)}
.set-page .set-pane>.set-note{margin:-4px 4px 14px;font-size:var(--fs-sm)}

/* Listes (langues, paquets, compléments) : rangées aplaties dans la carte */
.set-page .lang-list{gap:0;margin-top:var(--sp-2)}
.set-page .lang-row{border:0;background:transparent;border-radius:0;padding:var(--sp-10) var(--sp-2)}
.set-page .lang-row.on{box-shadow:none}
.set-page .lang-row+.lang-row{border-top:1px solid var(--line2)}

/* En-tête identité (Compte) : à plat, séparé comme une section */
.set-page .set-acc-head{padding:0 0 var(--sp-16);margin-bottom:var(--sp-16);border-bottom:1px solid var(--line)}

/* ── Couleur d'accentuation : pastilles + déclencheur du picker ── */
.acc-swatches{display:flex;gap:var(--sp-8);flex-wrap:wrap;align-items:center;flex:none}
.acc-sw{width:26px;height:26px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--sw);
  display:grid;place-items:center;color:var(--on-solid);box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.acc-sw:hover{transform:scale(1.08)}
.acc-sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--sw)}
.acc-sw svg.ic{width:13px;height:13px}
.acc-custom{background:conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);color:var(--on-solid)}
.acc-custom.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--accent)}

/* « Ajouter un badge » au bord droit de la liste (U2, 2026-11-02), aligné sur les gestes des lignes. */
.env-ajout{display:flex;justify-content:flex-end;margin-top:var(--sp-12)}
/* ── Badges d'environnements de déploiement ── liste gérable (comme Vos
   appareils/Utilisateurs : une ligne = un badge, actions toujours visibles à
   droite - pas des pastilles serrées avec deux icônes minuscules accrochées,
   ça ne respire pas et ça ne passe pas à l'échelle dès qu'on en ajoute). */
/* La pastille est celle de l'accentuation (.acc-sw), et ses voisins (renommer, supprimer) n'ont plus de cadre ; tous trois
   répondent sans transition (le proprio, 2026-10-25 : « même DA », « retire la bordure », « transition duration : 0s »). */
.env-col-swatch,.dev-actions .lang-x.env-act{transition:none}
.dev-actions .lang-x.env-act{border:0}
.dev-actions .lang-x.env-act:hover{background:var(--line2);color:var(--txt)}

/* ── ColorX : moteur maison (aire SV + teinte + alpha + hex + champs) - compact ── */
.cx{display:flex;flex-direction:column;gap:var(--sp-8);width:100%}
.cx-sv{position:relative;height:122px;border-radius:var(--radius-sm);cursor:crosshair;touch-action:none;
  background:linear-gradient(180deg,transparent,#000),linear-gradient(90deg,#fff,hsl(var(--cx-h,255) 100% 50%))}
.cx-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:2px solid var(--on-solid);border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.cx-sliders{display:flex;flex-direction:column;gap:var(--sp-8)}
.cx-hue{position:relative;height:9px;border-radius:var(--radius-pill);cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.cx-cur{position:absolute;top:-3px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;
  border:2px solid var(--on-solid);box-shadow:var(--elev-1);background:hsl(var(--cx-h,255) 100% 50%);pointer-events:none}
.cx-alpha{position:relative;height:9px;border-radius:var(--radius-pill);cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,transparent,var(--cx-solid,#000)),repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0/10px 10px}
.cx-acur{position:absolute;top:-3px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;
  border:2px solid var(--on-solid);box-shadow:var(--elev-1);background:var(--cx-solid,#000);pointer-events:none}
.cx-row{display:flex;gap:var(--sp-6);align-items:center}
.cx-prev{width:26px;height:26px;border-radius:var(--radius-sm);flex:none;box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);
  background:linear-gradient(var(--c,#000),var(--c,#000)),repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0/9px 9px}
.cx-eye{flex:none;width:26px;height:26px;border-radius:var(--radius-sm);cursor:pointer;display:grid;place-items:center;
  border:1px solid var(--cxc-line,#3a424c);background:var(--cxc-surf,#262c33);color:var(--cxc-txt,#eef2f6)}
.cx-eye:hover{border-color:var(--cxc-mut,#9aa4b0)}
.cx-eye svg{width:13px;height:13px}
.cx-hex{flex:1;min-width:0;font-family:var(--font-mono);font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-8);text-transform:lowercase}
.cx-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4) var(--sp-6)}
.cx-fields label{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.05em;opacity:.55}
.cx-fields input{font-family:var(--font-mono);font-size:var(--fs-xs);padding:var(--sp-4) var(--sp-2);text-align:center}

/* ── Pop-up du picker : habillage TOUJOURS en inverse du thème ── */
html[data-theme="light"] .cxp{--cxc-bg:#1c2128;--cxc-surf:#2b313a;--cxc-line:#3a424c;--cxc-txt:#eef2f6;--cxc-mut:#9aa4b0;--cxc-in:#13171c}
html[data-theme="dark"] .cxp{--cxc-bg:#ffffff;--cxc-surf:#f1f3f6;--cxc-line:#dde2e8;--cxc-txt:#1c2024;--cxc-mut:#69717b;--cxc-in:#ffffff}
.cxp:not([data-theme]){--cxc-bg:#1c2128;--cxc-surf:#2b313a;--cxc-line:#3a424c;--cxc-txt:#eef2f6;--cxc-mut:#9aa4b0;--cxc-in:#13171c}
#cx-pop{position:fixed;inset:auto;margin:0;border:none;padding:0;background:transparent;color:inherit;
  max-width:none;max-height:none;overflow:visible}
#cx-pop::backdrop{background:transparent}
.cxm-card{width:min(228px,calc(100vw - 20px));background:var(--cxc-bg);color:var(--cxc-txt);
  border-radius:var(--radius);box-shadow:0 2px 5px -1px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.04),0 0 0 1px rgba(128,128,128,.16);
  padding:var(--sp-10);display:flex;flex-direction:column;gap:var(--sp-8);font:inherit}
.cxm-card.expand{width:min(296px,calc(100vw - 20px))}
.cxm-card input{background:var(--cxc-in);color:var(--cxc-txt);border:1px solid var(--cxc-line);border-radius:var(--radius-sm);outline:none}
.cxm-card input:focus{border-color:var(--accent);box-shadow:var(--focus)}
.cxm-head{display:flex;align-items:center;gap:var(--sp-6);margin-bottom:var(--sp-1)}
.cxm-head h3{margin:0;font-size:var(--fs-sm);font-weight:var(--fw-strong);flex:1;color:var(--cxc-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cxm-x{width:22px;height:22px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--cxc-mut);
  cursor:pointer;display:grid;place-items:center;flex:none}
.cxm-x:hover{background:var(--cxc-surf);color:var(--cxc-txt)}
.cxm-x svg.ic{width:13px;height:13px}
.cxm-tabs{display:flex;gap:var(--sp-2);background:var(--cxc-surf);border-radius:var(--radius);padding:var(--sp-2)}
.cxm-tab{flex:1;border:none;background:transparent;color:var(--cxc-mut);font:inherit;font-size:var(--fs-xs);font-weight:var(--fw-strong);
  padding:var(--sp-4);border-radius:var(--radius-sm);cursor:pointer}
.cxm-tab.on{background:var(--cxc-bg);color:var(--cxc-txt);box-shadow:var(--elev-1)}
.cxm-body{display:flex;flex-direction:column}
.cx-recents-wrap:not(:empty){display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap}
.cx-rec-lab{font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--cxc-mut);flex:none}
.cx-recents{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.cx-rec{width:18px;height:18px;border-radius:var(--radius-sm);border:none;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);
  background:linear-gradient(var(--c,#000),var(--c,#000)),repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0/7px 7px}
.cx-rec:hover{transform:scale(1.12)}
.cxm-foot{display:flex;gap:var(--sp-6);justify-content:flex-end;align-items:center;margin-top:var(--sp-1)}
.cxm-foot button{border:none;background:transparent;color:var(--cxc-mut);
  border-radius:var(--radius-sm);padding:var(--sp-6) var(--sp-10);font:inherit;font-size:var(--fs-sm);font-weight:var(--fw-strong);cursor:pointer}
.cxm-foot button:hover{color:var(--cxc-txt)}
.cxm-foot button.primary{background:var(--accent);color:var(--on-solid);padding:var(--sp-6) var(--sp-14)}
.cxm-foot button.primary:hover{background:var(--accent-h);color:var(--on-solid)}

/* ── Éditeur de dégradé (mode Expand) ── */
.cxg{display:flex;flex-direction:column;gap:var(--sp-8)}
.cxg-prev{position:relative;height:26px;border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);
  background-size:cover,9px 9px;background-position:0 0,0 0}
.cxg-stop{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--on-solid);box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);cursor:grab;touch-action:none}
.cxg-stop.on{outline:2px solid var(--accent);outline-offset:1px}
.cxg-ctl{display:flex;gap:var(--sp-6);align-items:center}
.cxg-seg{display:flex;gap:var(--sp-2);flex:1;background:var(--cxc-surf);border-radius:var(--radius-sm);padding:var(--sp-2)}
.cxg-seg button{flex:1;border:none;background:transparent;color:var(--cxc-mut);font:inherit;font-size:var(--fs-xs);
  font-weight:var(--fw-strong);padding:var(--sp-4) var(--sp-4);border-radius:var(--radius-sm);cursor:pointer}
.cxg-seg button.on{background:var(--cxc-bg);color:var(--cxc-txt)}
.cxg-angle{width:50px;font-size:var(--fs-xs);padding:var(--sp-4) var(--sp-6);text-align:center}
.cxg-angle:disabled{opacity:.4}
.cxg-stops-row{display:flex;gap:var(--sp-4);align-items:center}
.cxg-stops{display:flex;gap:var(--sp-4);flex:1;flex-wrap:wrap}
.cxg-chip{width:20px;height:20px;border-radius:var(--radius-sm);border:none;cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(128,128,128,.4);
  background:linear-gradient(var(--c,#000),var(--c,#000)),repeating-conic-gradient(#bbb 0 25%,#fff 0 50%) 0/7px 7px}
.cxg-chip.on{outline:2px solid var(--accent);outline-offset:1px}
.cxg-add,.cxg-del{flex:none;width:24px;height:24px;border-radius:var(--radius-sm);border:1px solid var(--cxc-line);
  background:var(--cxc-surf);color:var(--cxc-txt);cursor:pointer;display:grid;place-items:center}
.cxg-add:hover,.cxg-del:hover{border-color:var(--cxc-mut)}
.cxg-add svg.ic,.cxg-del svg.ic{width:13px;height:13px}

/* ── Pilote : barre d'outils des facultés apprises et recherche ── */
.cap-head{display:flex;align-items:center;gap:var(--sp-6);margin:var(--sp-10) 0;flex-wrap:wrap}
.cap-head .sp{flex:1}
.cap-search{width:100%;padding:var(--sp-6) var(--sp-10);font-size:var(--fs-sm);margin-bottom:var(--sp-4)}

/* ── Vos appareils : cartes, appairage mobile (QR), formulaire d'ajout ── */
.dev-card{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-2)}
.dev-card+.dev-card{border-top:1px solid var(--line2)}
.dev-ic{width:38px;height:38px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
  background:var(--bg2);border:1px solid var(--line);color:var(--accent)}
.dev-ic svg.ic{width:18px;height:18px}
.dev-card.this .dev-ic{background:color-mix(in srgb,var(--accent) 14%,var(--bg2));border-color:transparent}
.dev-meta{flex:1;min-width:0}
.dev-n{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;font-size:var(--fs-md);font-weight:var(--fw-medium)}
.dev-d{font-size:var(--fs-sm);color:var(--mut);margin-top:var(--sp-2)}
.dev-actions{flex:none;display:flex;align-items:center;gap:var(--sp-8)}
.dev-badge{flex:none;display:inline-flex;align-items:center;gap:var(--sp-4);font-size:var(--fs-2xs);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em;padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);
  background:var(--line2);color:var(--mut)}
.dev-badge svg.ic{width:11px;height:11px}
.dev-badge.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.dev-badge.cur{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.dev-badge.pend{color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.dev-card.pending{opacity:.92}

.dev-cta-row{display:flex;gap:var(--sp-10);flex-wrap:wrap;align-items:center}

.dev-pair{display:flex;gap:var(--sp-18);align-items:flex-start;flex-wrap:wrap;
  padding:var(--sp-16);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
.dev-pair-qr{flex:none;width:148px;height:148px;padding:var(--sp-10);border-radius:var(--radius);
  background:var(--paper);box-shadow:var(--elev-1);color:#0b0b14}
.dev-qr{width:100%;height:100%;display:block}
.dev-pair-side{flex:1;min-width:220px;display:flex;flex-direction:column;gap:var(--sp-6)}
.dev-pair-step{font-size:var(--fs-md);color:var(--txt)}
.dev-pair-step b{color:var(--accent)}
.dev-pair-code{align-self:flex-start;font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:.12em;
  padding:var(--sp-8) var(--sp-14);border-radius:var(--radius);border:1px dashed var(--line);background:var(--card);margin:var(--sp-2) 0}
.dev-pair-actions{display:flex;gap:var(--sp-8);flex-wrap:wrap;margin-top:var(--sp-4)}

.dev-add{padding:var(--sp-14);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg2)}
.set-page .dev-add .field{margin:0 0 var(--sp-12)}
.dev-add-foot{display:flex;justify-content:flex-end;gap:var(--sp-8);margin-top:var(--sp-14)}

/* ── Écrans étroits : la coquille passe en pile (nav horizontale au-dessus du panneau) ── */
@media(max-width:760px){
  .set-page{flex-direction:column;height:auto;min-height:0}
  .set-col{width:auto;align-self:stretch;min-width:0;max-width:100%}
  .set-pane>.set-subtabs{top:var(--hh-bar)}   /* ici, la page défile : la rangée se fige sous l'en-tête */
  .set-page .set-nav{flex-direction:row;align-items:center;width:auto;gap:var(--sp-4);flex-wrap:nowrap;
    height:auto;padding:var(--sp-10) var(--sp-12);border-right:0;border-bottom:1px solid var(--line);overflow:auto;
    /* align-self : sous `align-items:flex-start` (la coquille de bureau), la rangée prenait la largeur de
       son contenu (1 417 px mesurés le 2026-10-08) et .set-page (overflow:hidden) la COUPAIT : au doigt,
       rien au-delà d'« Installations » n'était atteignable, « Se déconnecter » compris. Tenue à la largeur
       de l'écran, c'est elle qui défile de côté, comme son overflow:auto le voulait. */
    align-self:stretch;min-width:0;max-width:100%}
  .set-page .set-nav .set-nav-subwrap{display:none}      /* sous-menus repliés en barre */
  .set-brand,.set-reassure{display:none}
  .set-back{width:auto;flex:none;margin:0 var(--sp-4) 0 0}
  .set-back span{display:none}
  .set-nav-g{margin:0 var(--sp-6);white-space:nowrap}
  .set-page .set-nav-item{width:auto;white-space:nowrap}
  .set-page .set-pane{padding:var(--sp-18) var(--sp-18) var(--sp-22);height:auto;max-height:none;overflow:visible}
  .set-head{padding-right:0}
}

/* ── Administration › Icônes ─────────────────────────────────────────────── */
.icons-cats{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-4)}
.icons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--sp-4);
  padding:var(--sp-4) 0 var(--sp-20)}
.icon-cell{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-10) var(--sp-6);
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;
  transition:background .12s,border-color .12s;user-select:none}
.icon-cell:hover{background:var(--bg2);border-color:var(--line)}
.icon-cell:active{background:var(--line2)}
.icon-cell-ic{width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  color:var(--txt)}
.icon-cell-ic svg.ic{width:22px;height:22px}
.icon-cell-name{font-size:var(--fs-2xs);color:var(--mut);text-align:center;line-height:var(--lh-tight);
  max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Icons detail panel ───────────────────────────────────────────────────── */
.icons-layout{display:flex;gap:var(--sp-14);align-items:flex-start}
.icons-layout .icons-grid{flex:1;min-width:0}
.icons-detail{width:230px;flex:none;position:sticky;top:8px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);padding:var(--sp-16) var(--sp-14) var(--sp-18);
  display:flex;flex-direction:column;gap:var(--sp-8)}
.icons-detail-close{position:absolute;top:8px;right:8px;background:none;border:none;
  color:var(--mut);cursor:pointer;padding:var(--sp-4);border-radius:var(--radius-sm);line-height:var(--lh-flat);
  display:flex;align-items:center;justify-content:center}
.icons-detail-close:hover{background:var(--bg2);color:var(--txt)}
.icons-detail-close svg.ic{width:14px;height:14px}
.icons-detail{position:sticky;top:8px}
.icons-detail-preview{display:flex;align-items:center;justify-content:center;
  width:72px;height:72px;border-radius:var(--radius);background:var(--bg2);
  border:1px solid var(--line);margin:0 auto var(--sp-4);color:var(--txt)}
.icons-detail-preview svg.ic{width:40px;height:40px}
.icons-detail-name{font-size:var(--fs-base);font-weight:var(--fw-strong);color:var(--txt);text-align:center;
  font-family:var(--font-mono,monospace)}
.icons-detail-tags{display:flex;gap:var(--sp-6);justify-content:center;flex-wrap:wrap}
.icons-detail-cat{font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.06em;
  padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:var(--accent)}
.icons-detail-badge{font-size:var(--fs-xs);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-pill);
  background:var(--bg2);color:var(--mut)}
.icons-detail-kw{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center}
.icons-detail-kw span{font-size:var(--fs-2xs);color:var(--mut);background:var(--bg2);
  padding:var(--sp-1) var(--sp-6);border-radius:var(--radius-xs)}
.icons-detail-section{font-size:var(--fs-2xs);font-weight:var(--fw-strong);text-transform:uppercase;
  letter-spacing:.06em;color:var(--mut);margin-top:var(--sp-4)}
.icons-detail-snippet{display:flex;align-items:center;gap:var(--sp-6);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:var(--sp-6) var(--sp-8);overflow:hidden}
.icons-detail-snippet code{flex:1;font-size:var(--fs-xs);font-family:var(--font-mono,monospace);
  color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icons-detail-snippet--svg code{font-size:var(--fs-2xs)}
.icons-detail-snippet button{flex:none;background:none;border:none;cursor:pointer;
  color:var(--mut);padding:var(--sp-2);border-radius:var(--radius-xs);display:flex;align-items:center}
.icons-detail-snippet button:hover{background:var(--line2);color:var(--txt)}
.icons-detail-snippet button svg.ic{width:14px;height:14px}
.icon-cell.sel{background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-color:var(--accent)}

/* ── Signature électronique ── */
.sig-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--sp-28);align-items:start}
.sig-texte{max-width:520px}
.sig-texte .set-note{margin:0 0 var(--sp-4)}
.sig-titre-suite{margin-top:var(--sp-18)}
.sig-texte .sig-saved{margin:var(--sp-18) 0 0}
.sig-aucune{margin:var(--sp-18) 0 0;padding-top:var(--sp-14);border-top:1px solid var(--line2);font-size:var(--fs-sm);color:var(--mut2)}
/* La fenêtre de signature dans une carte : sélecteur segmenté en tête, la ligne de signature dans le cadre, les gestes en pied
   (2026-10-19, le proprio : « plus esthétique »). */
/* Sans ombre (le proprio, 2026-10-25 : « la box à droite pour la signature : retire le box shadow ») : le filet suffit. */
.sig-carte{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:var(--sp-14);box-shadow:none}
.sig-carte .sig-tabs{display:inline-flex;gap:var(--sp-2);padding:var(--sp-2);margin:0 0 var(--sp-14);border:0;
  border-radius:var(--radius-sm);background:var(--card2)}
.sig-carte .sig-tab{padding:var(--sp-4) var(--sp-14);border:0;margin:0;border-radius:var(--radius-xs);font-size:var(--fs-sm)}
.sig-carte .sig-tab.on{background:var(--card);color:var(--txt);box-shadow:var(--shadow-sm)}
.sig-carte .sig-canvas-wrap{max-width:none;border:1px solid var(--line2);position:relative}
#sig-mode-draw .sig-canvas-wrap::after{content:'';position:absolute;left:var(--sp-18);right:var(--sp-18);bottom:46px;
  border-bottom:1px dashed var(--line);pointer-events:none}
#sig-mode-draw .sig-canvas-wrap::before{content:'Signez ici';position:absolute;left:var(--sp-18);bottom:26px;
  font-size:var(--fs-2xs);color:var(--mut2);pointer-events:none}
.sig-carte .sig-actions{margin-top:var(--sp-14)}
.sig-carte .sig-actions .sp{flex:1}
@media (max-width:900px){.sig-grille{grid-template-columns:minmax(0,1fr)}}
.sig-tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-16);border-bottom:1px solid var(--line)}
.sig-tab{border:none;background:transparent;color:var(--mut);cursor:pointer;
  font:inherit;font-size:var(--fs-md);font-weight:var(--fw-medium);padding:var(--sp-6) var(--sp-12);
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .12s;border-radius:0}
.sig-tab:hover{color:var(--txt);background:transparent}
.sig-tab.on{color:var(--accent);border-bottom-color:var(--accent)}

.sig-modes>div{display:none}
.sig-modes>div.on{display:block}

.sig-canvas-wrap{border:1.5px solid var(--line);border-radius:var(--radius);
  background:var(--paper);overflow:hidden;cursor:crosshair;touch-action:none;max-width:420px}
.sig-canvas-wrap canvas{display:block;width:100%;height:200px}

.sig-import-zone{display:flex;align-items:center;justify-content:center;
  border:1.5px dashed var(--line);border-radius:var(--radius);
  padding:var(--sp-18);font-size:var(--fs-md);color:var(--mut);cursor:pointer;
  transition:border-color .15s,color .15s;text-align:center}
.sig-import-zone:hover{border-color:var(--accent);color:var(--accent)}

.sig-actions{display:flex;gap:var(--sp-8);margin-top:var(--sp-10);align-items:center;flex-wrap:wrap}

.sig-saved{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-10) var(--sp-14);align-items:center;padding:var(--sp-12);
  border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
/* L'image en grand, sur toute la largeur de la carte (2026-10-25, « un design plus propre ») : la signature et sa guilloche se
   lisent ; avant, une vignette de 52 px. Sur le papier (--paper), comme elle sera posée sur le document. */
.sig-saved-img{grid-column:1/-1;width:100%;height:auto;aspect-ratio:21/10;object-fit:contain;border-radius:var(--radius-sm);
  border:.5px solid var(--line2);background:var(--paper)}
.sig-saved-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.sig-saved-method{font-size:var(--fs-sm);color:var(--mut);font-weight:var(--fw-medium)}
.sig-saved-hash{font-size:var(--fs-2xs);font-family:var(--font-mono,monospace);color:var(--mut2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Paramètres › Application › Vos créations (CDC_STOCKAGE S0, D6) ──
   Le chemin peut être long : il passe à la ligne (anywhere) au lieu de pousser le panneau à 375 px ; le champ
   prend toute la largeur sous son libellé. Couleurs par jetons seulement (--warn, --err, --txt) : les trois
   états du thème suivent sans bloc sombre à garder (N20). */
.set-page #dc-sec .dc-tete{border-bottom:0;padding-bottom:0}
.set-page #dc-sec .dc-vide{margin:var(--sp-6) 0 var(--sp-10);padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-sm);
  border:1px solid var(--line);border-left:3px solid var(--warn);background:var(--card);color:var(--txt);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.set-page #dc-sec .dc-form{max-width:none;width:100%;flex-wrap:wrap;margin:var(--sp-6) 0}
.set-page #dc-sec .dc-form .set-dirinput{flex:1 1 220px;width:auto;max-width:none;min-width:0}
.set-page #dc-sec .dc-chemin{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;margin:var(--sp-6) 0;min-width:0}
.set-page #dc-sec .dc-ic{display:inline-flex;color:var(--mut)}
.set-page #dc-sec .dc-val{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;word-break:break-all;color:var(--txt);font-size:var(--fs-sm)}
.set-page #dc-sec .dc-msg{margin:var(--sp-4) 0 0;font-size:var(--fs-sm);color:var(--txt)}
.set-page #dc-sec .dc-msg-ko{color:var(--err)}
.set-page #dc-sec [aria-invalid="true"]{border-color:var(--err)}
/* L'assistant « Nouvelle création », réglage vide : la phrase et le geste, au-dessus des trois entrées. */
.wiz-dc-vide{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;margin:0 0 var(--sp-14);padding:var(--sp-10) var(--sp-12);
  border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--radius-sm);background:var(--card);color:var(--txt);font-size:var(--fs-sm)}
.wiz-dc-vide p{margin:0;flex:1 1 220px}

}

/* ── Utilisateurs invités (CDC_INVITES I4, 2026-10-19) : une carte par invité, la grille d'une création en blocs ──
   Pas de pastille ronde dans les états (le proprio n'en veut pas) : un libellé teinté ; les initiales dans un carré adouci. */
@layer modules{
.inv-entete{margin-bottom:var(--sp-14)}
.inv-liste{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.inv-carte{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-14)}
.inv-carte+.inv-carte{border-top:1px solid var(--line2)}
.inv-av{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 12%,var(--card2));color:var(--accent);font-size:var(--fs-sm);font-weight:var(--fw-strong)}
.inv-meta{flex:1;min-width:0}
.inv-nom{display:flex;align-items:center;gap:var(--sp-8);font-weight:var(--fw-medium);color:var(--txt)}
.inv-sous{font-size:var(--fs-sm);color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-etat{font-size:var(--fs-2xs);font-weight:var(--fw-medium);padding:var(--sp-2) var(--sp-8);border-radius:var(--radius-xs);
  background:var(--card2);color:var(--mut)}
.inv-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.inv-attente{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.inv-alerte{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.inv-gestes{display:flex;gap:var(--sp-8);flex:none}
.inv-crea-tete{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin:var(--sp-18) 0 var(--sp-10)}
.inv-crea-tete .set-titre{margin:0}
.inv-filtre{max-width:240px}
.inv-crea{display:flex;flex-direction:column;gap:var(--sp-8);max-height:48vh;overflow:auto;padding-right:var(--sp-2)}
.inv-ligne{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-6) var(--sp-4);color:var(--txt)}
.inv-bloc{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:var(--sp-12) var(--sp-14)}
.inv-bloc-tete{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap}
.inv-bloc-nom{font-weight:var(--fw-medium);color:var(--txt);flex:1;min-width:120px}
.inv-segs{display:inline-flex;gap:var(--sp-2);padding:var(--sp-2);border-radius:var(--radius-sm);background:var(--card2)}
.inv-seg{border:0;background:transparent;color:var(--mut);font:inherit;font-size:var(--fs-sm);padding:var(--sp-4) var(--sp-10);
  border-radius:var(--radius-xs);cursor:pointer}
.inv-seg:hover{color:var(--txt);background:transparent}
.inv-seg.on{background:var(--card);color:var(--txt);box-shadow:var(--shadow-sm)}
.inv-seg-fixe{cursor:default}
.inv-bloc-desc{margin:var(--sp-8) 0 0}
.inv-detail{border:0;background:transparent;color:var(--accent);font:inherit;font-size:var(--fs-sm);padding:0;margin-left:var(--sp-6);cursor:pointer}
.inv-detail:hover{background:transparent;text-decoration:underline}
.inv-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-12);margin-top:var(--sp-12);
  padding-top:var(--sp-12);border-top:1px solid var(--line2)}
.inv-grp-t{font-size:var(--fs-2xs);font-weight:var(--fw-strong);letter-spacing:.04em;text-transform:uppercase;color:var(--mut2);margin-bottom:var(--sp-6)}
.inv-case{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-10);padding:var(--sp-6) 0}
.inv-case-txt{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--txt)}
.inv-case-txt small{font-size:var(--fs-2xs);color:var(--mut2);line-height:1.35}
.inv-prod .inv-case-txt>span{color:var(--warn)}
.inv-grille .switch{width:32px;height:18px}
.inv-grille .switch-kn{top:1px;left:1px;width:14px;height:14px}
.inv-grille .switch.on .switch-kn{left:15px}
.inv-ajout{display:flex;gap:var(--sp-8);align-items:center;margin-top:var(--sp-14)}
.inv-ajout .set-select{flex:1}
.inv-lien{display:flex;gap:var(--sp-8);margin-top:var(--sp-12)}
.inv-lien input{flex:1;font-family:var(--font-mono,monospace);font-size:var(--fs-sm)}
@media (max-width:640px){.inv-carte{flex-wrap:wrap}.inv-gestes{width:100%;justify-content:flex-end}.inv-filtre{max-width:none}}
}

/* ── Vos appareils, onglet de Compte utilisateur (2026-10-19) : une liste où chaque ligne ouvre la fiche de l'appareil ── */
@layer modules{
.app-liste{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.app-ligne,.app-choix{display:flex;align-items:center;gap:var(--sp-12);width:100%;padding:var(--sp-12) var(--sp-14);border:0;
  background:transparent;color:var(--txt);font:inherit;text-align:left;cursor:pointer;border-radius:0}
.app-ligne+.app-ligne{border-top:1px solid var(--line2)}
.app-ligne:hover,.app-choix:hover{background:var(--card2)}
.app-meta{display:flex;flex-direction:column;gap:var(--sp-2);flex:1;min-width:0}
.app-nom{display:flex;align-items:center;gap:var(--sp-8);font-weight:var(--fw-medium)}
.app-sous{font-size:var(--fs-sm);color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-chevron{flex:none;color:var(--mut2);display:inline-flex}
.app-chevron svg{width:12px;height:12px}
.app-fiche{display:flex;flex-direction:column}
.app-f-ligne{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-12);padding:var(--sp-10) 0}
.app-f-ligne+.app-f-ligne{border-top:1px solid var(--line2)}
.app-f-k{font-size:var(--fs-sm);color:var(--mut2)}
.app-f-v{font-size:var(--fs-sm);color:var(--txt);overflow-wrap:anywhere}
.app-choix-liste{display:flex;flex-direction:column;gap:var(--sp-8)}
.app-choix{border:1px solid var(--line);border-radius:var(--radius)}
@media (max-width:640px){.app-f-ligne{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}}
}

/* ── L'affichage des dossiers : deux bascules et l'aperçu en squelette (2026-10-25) ──
   Une mini page de l'accueil : barres grises pour les noms, pastille d'accent pour les badges d'environnement, une ligne
   pâle de contenu en Détaillée, une tête de groupe et un rail en pointillés par groupe. Rien n'y est cliquable. */
.set-affichage-tg{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap;justify-content:flex-end}
/* Le gris de la page d'accueil : les cartes blanches s'en détachent comme sur le vrai écran. Sans filet, sur des hachures fines de
   la même teinte un cran plus foncée (le proprio, 2026-11-02, VAGUE_UI_MODIF U4) : un fond de « maquette », que les cartes
   couvrent ; les deux teintes sont des jetons, elles suivent donc le thème. */
.set-apercu-dossiers{margin:0 0 var(--sp-12);padding:var(--sp-12);border:0;border-radius:var(--radius);background-color:var(--bg);
  background-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--txt) 5%,var(--bg)) 0 1px,transparent 1px 6px)}
.apd{display:flex;flex-direction:column;gap:var(--sp-6);max-width:520px;margin-inline:auto}
.apd-bloc{background:var(--card);border-radius:var(--radius-sm);overflow:hidden}
.apd-grp{display:flex;align-items:center;gap:var(--sp-6);height:22px;padding:0 var(--sp-8)}
.apd-bloc .apd-grp+.apd-rail{border-top:.5px solid var(--line2)}
.apd-chev{width:6px;height:6px;border-right:1.5px solid var(--mut2);border-bottom:1.5px solid var(--mut2);transform:rotate(-45deg);flex:none}
.apd-chev.ouvert{transform:rotate(45deg)}
.apd-badge{width:10px;height:10px;border-radius:var(--radius-xs);background:color-mix(in srgb,var(--accent) 22%,transparent);flex:none}
.apd-rail{margin-inline-start:var(--sp-10);padding:var(--sp-2) 0 var(--sp-4) var(--sp-8);border-inline-start:1px dotted var(--line)}
.apd-row{display:flex;align-items:center;gap:var(--sp-6);min-height:20px;padding:var(--sp-4) var(--sp-8);background:var(--card);border-radius:var(--radius-sm)}
.apd-rail .apd-row{padding-inline:var(--sp-4)}
.apd-rail .apd-row+.apd-row{border-top:.5px solid var(--line2);border-radius:0}
.apd.det .apd-row{min-height:28px}
.apd-ic{width:10px;height:10px;border-radius:var(--radius-xs);background:var(--line);flex:none}
.apd-l{display:block;height:5px;border-radius:var(--radius-pill);background:var(--line)}
.apd-l.fort{background:color-mix(in srgb,var(--txt) 30%,transparent)}
.apd-droite{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-4)}
.apd-droite .apd-l{width:46px}
.apd-droite .apd-l.acc{width:30px;background:color-mix(in srgb,var(--accent) 35%,transparent)}
.apd-droite .apd-l.mut{width:64px;background:var(--line2)}

/* ── Détails des mises à jour : la liste et le calendrier fixe à droite (2026-10-25) ──
   Le calendrier colle en haut du panneau qui défile ; le jour lu est plein (accent), un jour de mise à jour est pointé,
   aujourd'hui est cerclé. Sous 900 px, il s'efface : la liste suffit. */
.nouv-grille{display:grid;grid-template-columns:minmax(0,1fr) 232px;gap:var(--sp-24);align-items:start}
.nouv-cal{position:sticky;top:0;padding:var(--sp-12);border:.5px solid var(--line);border-radius:var(--radius);background:var(--card)}
.nc-tete{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-8);margin:0 0 var(--sp-10)}
.nc-mois{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt);text-transform:capitalize}
.nc-n{font-size:var(--fs-2xs);color:var(--mut2)}
.nc-sem,.nc-grille{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-2);text-align:center}
.nc-sem span{font-size:var(--fs-2xs);color:var(--mut2);padding-bottom:var(--sp-4)}
.nc-j{display:grid;place-items:center;height:26px;font-size:var(--fs-xs);color:var(--mut2);border-radius:var(--radius-pill);
  font-variant-numeric:tabular-nums;border:0;background:transparent;padding:0;font-family:inherit}
.nc-j.vide{visibility:hidden}
.nc-j.auj{box-shadow:inset 0 0 0 1px var(--line)}
.nc-j.maj{position:relative;color:var(--txt);font-weight:var(--fw-medium);cursor:pointer;transition:none}
.nc-j.maj::after{content:'';position:absolute;bottom:3px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:var(--radius-pill);background:var(--accent)}
.nc-j.maj:hover{background:var(--line2)}
.nc-j.maj:focus-visible{outline:none;box-shadow:var(--focus)}
.nc-j.maj.on{background:var(--accent);color:var(--on-solid)}
.nc-j.maj.on::after{background:var(--on-solid)}
.nc-lu{margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:.5px solid var(--line2);font-size:var(--fs-xs);color:var(--mut);text-align:center}
@media(max-width:900px){ .nouv-grille{grid-template-columns:1fr} .nouv-cal{display:none} }
/* La déconnexion automatique (2026-10-25) : le sélecteur de durée et l'interrupteur côte à côte. */
.sec-deco-acts{display:flex;align-items:center;gap:var(--sp-10);flex:none}

/* Les cinq styles de la signature générée (2026-10-25) : une rangée de boutons, chacun écrit dans son style. */
.sig-styles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-6);margin:0 0 var(--sp-10)}
.sig-style{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-8) var(--sp-4);border:.5px solid var(--line);
  border-radius:var(--radius-sm);background:var(--card);cursor:pointer;min-width:0;transition:none;box-shadow:none}
.sig-style:hover{background:var(--card2)}
.sig-style.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.sig-style:focus-visible{outline:none;box-shadow:var(--focus)}
.sig-style-ap{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.sig-style-n{font-size:var(--fs-2xs);color:var(--mut)}
@media(max-width:560px){ .sig-styles{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Vos appareils : les connexions par système, puis par support (2026-10-25). Le squelette tient la forme exacte pendant la lecture.
   2026-11-01 : chaque appareil a son dessin (Mac, PC, iPad, iPhone) et sa version du système ; l'app de bureau a l'icône
   d'Hdplio, le navigateur une fenêtre à onglet ; un ordinateur en ligne montre ses écrans à droite, une vignette chacun. */
.app-connexions{display:flex;flex-direction:column;gap:var(--sp-8);margin:0 0 var(--sp-12)}
.app-grp{display:flex;flex-wrap:wrap;border:.5px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden}
.app-grp-corps{flex:1 1 300px;min-width:0}
.app-grp-t{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-10) var(--sp-12);border-bottom:.5px solid var(--line2)}
.app-vis{flex:none;display:block;width:56px;height:39px}
.app-vis svg{display:block;width:100%;height:100%}
/* l'écran du dessin : éteint (gris profond) ; allumé à l'accent quand l'appareil est en ligne. Les bords gardent la couleur de
   l'objet (noir, aluminium), dans les deux thèmes, comme les appareils de la vitrine. */
.app-vis-ecran{fill:#2a2c33}
.app-grp.vivant .app-vis-ecran{fill:color-mix(in srgb,var(--accent) 55%,#1b1d24)}
/* un liseré fin autour des corps noirs, sans quoi l'iPad et le PC disparaissent dans le thème sombre (banc du 2026-11-01) */
.app-vis rect[fill="#101013"],.app-vis rect[fill="#18181c"],.app-vis path[fill="#2b2b31"]{stroke:color-mix(in srgb,var(--txt) 28%,transparent);stroke-width:.6}
.app-vis-alu{fill:#c6c8ce}
.app-vis-creux{fill:#a3a5ac}
.app-grp-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.app-grp-n{font-size:var(--fs-sm);font-weight:var(--fw-strong);color:var(--txt)}
.app-grp-os{font-size:var(--fs-xs);color:var(--mut)}
.app-grp-d,.app-sup-d{font-size:var(--fs-xs);color:var(--mut2);font-variant-numeric:tabular-nums}
.app-enligne{display:inline-flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--ok)}
.app-enligne::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.app-sup{display:flex;align-items:center;gap:var(--sp-10);padding:var(--sp-8) var(--sp-12) var(--sp-8) calc(var(--sp-12) + 18px)}
.app-sup+.app-sup{border-top:.5px solid var(--line2)}
.app-sup-ic{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--mut)}
.app-sup-ic img{display:block;width:20px;height:20px;border-radius:5px}
.app-sup-vis{width:20px;height:20px}
.app-sup-n{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--txt)}
.app-sup-l{color:var(--mut)}
.app-sup-note{font-size:var(--fs-xs);color:var(--mut2);max-width:240px;text-align:end}
/* Les écrans d'un ordinateur en ligne : à droite de l'appareil (sous lui quand la place manque), chacun dans un cadre noir fin,
   à ses proportions, avec son nom et sa définition. */
.app-ecrans{flex:0 1 auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--sp-10);padding:var(--sp-12);border-inline-start:.5px solid var(--line2);background:var(--card2)}
.app-ecran{margin:0;width:150px;display:flex;flex-direction:column;gap:var(--sp-4)}
.app-ecran-cadre{position:relative;display:grid;place-items:center;padding:3px;border-radius:5px;background:#101013;overflow:hidden}
.app-ecran-cadre img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
.app-ecran-att{font-size:var(--fs-2xs);color:#9a9ca4}
.app-ecran figcaption{display:flex;justify-content:space-between;gap:var(--sp-6);font-size:var(--fs-2xs);color:var(--mut)}
.app-ecran-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.app-ecran-p{color:var(--mut2)}
.app-ecran-d{flex:none;font-variant-numeric:tabular-nums}
@media(max-width:560px){ .app-ecrans{border-inline-start:0;border-top:.5px solid var(--line2);width:100%} .app-ecran{width:calc(50% - var(--sp-10) / 2)} }

/* Les trois offres de Paramètres › Abonnement (Solo, Studio, Pro, le proprio, 2026-11-01) : des cartes côte à côte, le prix
   en tête ; celle du récapitulatif à l'accent, l'offre active badgée. Sous 560 px, l'une sous l'autre. */
@layer modules{
  .abos-offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-10);margin:var(--sp-14) 0 var(--sp-6)}
  @media(max-width:560px){ .abos-offres{grid-template-columns:1fr} }
  .abos-offre{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);padding:var(--sp-14);text-align:left;
    border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--txt);box-shadow:none;cursor:pointer;font:inherit}
  .abos-offre:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .abos-offre.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
  .abos-offre-n{display:flex;align-items:center;gap:var(--sp-6);font-size:var(--fs-base);font-weight:var(--fw-strong)}
  .abos-offre-p{font-size:var(--fs-sm);color:var(--mut);margin-bottom:var(--sp-6)}
  .abos-offre-p b{font-size:var(--fs-xl,20px);font-weight:var(--fw-bold);color:var(--txt);font-variant-numeric:tabular-nums}
  .abos-offre-f{font-size:var(--fs-sm);color:var(--mut)}
}

/* ── Paramètres › Facturation › Factures (VAGUE_UI_MODIF U10, 2026-11-02) : une ligne par facture, la plus récente en tête ;
   la date, le numéro, l'objet, le montant TTC à droite et l'état ; un clic ouvre l'aperçu (factureApercu) et son PDF. */
@layer modules{
  .fact-liste{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
  .fact-ligne{display:grid;grid-template-columns:minmax(0,9em) minmax(0,8em) minmax(0,1fr) auto auto;align-items:center;gap:var(--sp-12);
    width:100%;padding:var(--sp-10) var(--sp-12);border:0;border-radius:0;background:transparent;text-align:start;font-weight:var(--fw-regular,400)}
  .fact-ligne+.fact-ligne{border-top:1px solid var(--line2)}
  .fact-ligne:hover{background:var(--line2)}
  .fact-date,.fact-num{color:var(--mut);font-size:var(--fs-sm)}
  .fact-objet{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fact-montant{font-variant-numeric:tabular-nums;font-weight:var(--fw-medium)}
  .fact-apercu{display:flex;flex-direction:column;gap:var(--sp-8);min-width:min(420px,80vw)}
  .fact-ap-l{display:flex;justify-content:space-between;gap:var(--sp-16)}
  .fact-ap-k{color:var(--mut)}
  .fact-ap-gestes{justify-content:flex-end}
  @media (max-width:640px){ .fact-ligne{grid-template-columns:1fr auto;row-gap:var(--sp-2)} .fact-num,.fact-objet{grid-column:1} }
}

/* ── Paramètres › Facturation › Serveur email : les Sessions Mail (le proprio, 2026-11-06) ── L'écran reprend les classes
   de l'Abonnement (abos-split, abos-offre, abos-step, abos-recap) et de Factures (fact-liste) ; ne s'ajoute ici que ce qu'elles
   n'ont pas : les champs nom et domaine, l'adresse avec son domaine, les usages à cocher et les jauges de consommation.
   Que des jetons : le sombre et le clair suivent seuls (N20). */
@layer modules{
  .mail-label{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-10)}
  .mail-def{margin:0 0 var(--sp-12)}
  .mail-ligne{grid-template-columns:minmax(0,1fr) auto auto auto}
  .mail-ligne.on{background:color-mix(in srgb,var(--accent) 8%,transparent)}
  .mail-ligne-t{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
  .mail-ligne-t b,.mail-ligne-d{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mail-ligne-d,.mail-ligne-m{font-size:var(--fs-xs);color:var(--mut)}
  .mail-sous{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap}
  .mail-sous-g{display:flex;gap:var(--sp-6);margin-inline-start:auto}
  .mail-sous-g .mini svg.ic{width:13px;height:13px}
  .mail-sous-g .danger{color:var(--err)}
  .mail-champs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-10);margin-top:var(--sp-14)}
  .mail-champ{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
  .mail-champ .abos-dom-in{min-width:0;width:100%}
  #mail-nom{font-family:inherit}   /* un nom se lit en texte ; le domaine et les adresses restent en chasse fixe comme Noms de domaine */
  .mail-champ-k{font-size:var(--fs-sm);font-weight:var(--fw-strong)}
  .mail-k-p{font-weight:var(--fw-regular,400);color:var(--mut);margin-inline-start:var(--sp-6)}
  .mail-adrs{display:flex;flex-direction:column;gap:var(--sp-6);margin-top:var(--sp-8)}
  .mail-adr{display:flex;align-items:center;gap:var(--sp-6);min-width:0}
  .mail-adr .mail-adr-in{flex:0 1 220px;min-width:90px}
  .mail-arobase-d{font-size:var(--fs-sm);color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .mail-usages{display:flex;flex-direction:column;gap:var(--sp-6)}
  .mail-usage{display:flex;align-items:flex-start;gap:var(--sp-10);padding:var(--sp-10) var(--sp-14);border:1px solid var(--line);
    border-radius:var(--radius);background:var(--card);cursor:pointer}
  .mail-usage.on{border-color:var(--accent)}
  .mail-usage input{margin-top:3px;accent-color:var(--accent)}
  .mail-usage-t{display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-sm)}
  .mail-usage-t span{color:var(--mut);font-size:var(--fs-xs);line-height:var(--lh-normal)}
  .mail-jauges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
  .mail-jauge{padding:var(--sp-10) var(--sp-14);border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
  .mail-jauge-h{display:flex;justify-content:space-between;gap:var(--sp-8);font-size:var(--fs-sm);color:var(--mut)}
  .mail-jauge-h b{color:var(--txt);font-variant-numeric:tabular-nums}
  .mail-jauge .abos-bar{margin-top:var(--sp-8)}
  .mail-recap-tous{margin-top:var(--sp-8)}
  .mail-manque{margin-top:var(--sp-6)}
  @media(max-width:560px){
    .mail-champs,.mail-jauges{grid-template-columns:1fr}
    .mail-ligne{grid-template-columns:minmax(0,1fr) auto}
    .mail-ligne .mail-ligne-m{grid-column:1}
  }
}