@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* ==========================================================================
   Systeme visuel Robert Studio
   ==========================================================================

   Refonte du 06/09. L'audit a mesure le rendu reel dans Chrome plutot que de
   se fier a l'impression : sur la page Voix en 1440x900, les champs faisaient
   46 px de haut, les boutons 44 px, la carte mediane 611 px, et la page
   entiere 5503 px — six ecrans pour une seule page.
   Dans le meme temps le CSS comptait 42 regles en 12 px, 40 en 11 px, 38 en
   10 px et 31 en 9 px : de grandes boites vides remplies de texte minuscule.

   La correction est donc asymetrique, et non un retrecissement uniforme :
   les CONTENANTS et les CONTROLES retrecissent, le TEXTE grandit.

   Les valeurs ci-dessous sont la seule source de verite. Avant cette refonte
   le CSS portait 8 rayons codes en dur (7px 39 fois, 8px 23 fois, 6px 13
   fois...) alors que --radius-* existait deja sans etre utilise : d'ou des
   ecarts d'un pixel partout, invisibles un par un, incoherents a l'echelle
   de la page.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Fonds et surfaces ------------------------------------------------ */
  --bg: #07080c;
  --surface: #101219;
  --surface-2: #151822;
  --surface-3: #1b1f2b;
  --surface-raised: #1f2431;

  /* --- Bordures --------------------------------------------------------- */
  --line: rgba(225, 222, 255, .09);
  --line-strong: rgba(225, 222, 255, .17);

  /* --- Texte : trois niveaux explicites --------------------------------- */
  --text: #f8f7fc;
  --text-secondary: #b4b6c6;
  --muted: #a5a7b6;

  /* --- Couleurs d'accent ------------------------------------------------ */
  --violet: #9276ff;
  --violet-soft: rgba(146, 118, 255, .13);
  --violet-strong: #a68eff;
  --cyan: #5dd7e8;
  --green: #4cdb94;
  --amber: #f5bd64;
  --danger: #ff7180;
  --focus-ring: rgba(146, 118, 255, .45);

  /* --- Typographie : une seule echelle ---------------------------------- */
  --text-2xs: 11px;   /* metadonnee, horodatage */
  --text-xs: 12px;    /* label, texte d'aide */
  --text-sm: 13px;    /* corps secondaire */
  --text-md: 14px;    /* corps */
  --text-lg: 16px;    /* titre de carte */
  --text-xl: 20px;    /* titre de section */
  --text-2xl: 26px;   /* titre de page */
  --text-3xl: 34px;   /* banniere */

  /* --- Espacements : 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 ---------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --- Rayons : quatre niveaux, pas huit -------------------------------- */
  --radius-xs: 6px;   /* puce, case a cocher */
  --radius-sm: 8px;   /* champ, bouton */
  --radius-md: 12px;  /* carte */
  --radius-lg: 16px;  /* panneau majeur */

  /* --- Hauteurs de controle --------------------------------------------- */
  --control-h: 36px;      /* champ et bouton par defaut (46 px avant) */
  --control-h-sm: 30px;   /* action compacte en ligne */
  --control-h-lg: 42px;   /* action principale isolee */
  --row-h: 44px;          /* ligne de liste, membre compris */

  /* --- Profondeur : peu d'ombres, du contraste de surface ---------------- */
  --shadow-card: 0 16px 44px rgba(0, 0, 0, .18);
  --shadow-elevated: 0 22px 70px rgba(0, 0, 0, .32);

  /* --- Motifs des bannieres (SVG ecrit a la main, encode en data URI) --- */
  /* Trame de points : la maille technique de fond. */
  --trame-points: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%239276ff' fill-opacity='.5'/%3E%3C/svg%3E");
  /* Arcs concentriques : la profondeur, l'idee de portee et de signal. */
  --arcs-signal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='220' fill='none'%3E%3Cg stroke='%239276ff' stroke-opacity='.34'%3E%3Cpath d='M0 220a220 220 0 0 1 220-220' stroke-width='1'/%3E%3Cpath d='M0 220a160 160 0 0 1 160-160' stroke-width='.8'/%3E%3Cpath d='M0 220a100 100 0 0 1 100-100' stroke-width='.6'/%3E%3C/g%3E%3Cg stroke='%235dd7e8' stroke-opacity='.22'%3E%3Cpath d='M420 0a260 260 0 0 0-260 260' stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");

  /* --- Mise en page ----------------------------------------------------- */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--text); font-family: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
p, span { color: inherit; }
/* Le titre montait a 108 px : plus haut qu'une carte entiere, il poussait tout
   le contenu utile sous la ligne de flottaison. Ramene a une taille de titre
   de page, il garde son caractere (Barlow Condensed, capitales) sans manger
   l'ecran. */
h1 { font-family: "Barlow Condensed", sans-serif; font-size: clamp(26px, 3.2vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: .015em; text-transform: uppercase; text-shadow: none; }
h2 { margin: 0; color: var(--text); font-size: var(--text-xl); line-height: 1.25; }
strong.ok { color: var(--green); }
strong.bad { color: var(--danger); }
.ui-icon { display: block; width: 19px; height: 19px; filter: invert(1); opacity: .82; }

nav { display: grid; }

.studio { width: min(1360px, calc(100% - 32px)); min-height: 100vh; margin: 0 auto; padding: var(--space-8) 0 var(--space-10); }
.eyebrow {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #d5d0e7;
  font-size: var(--text-xs) !important;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.eyebrow::after { content: ""; width: 42px; height: 7px; opacity: .26; background: repeating-linear-gradient(120deg, #8f72ff 0 5px, transparent 5px 9px); }

.studio-form { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-4); }
/* L'espace entre deux blocs appartient au conteneur, pas aux blocs : chacun
   portait sa propre marge (14, 18, 22 ou 36 px), et deux blocs sans marge se
   collaient — « Vocal » et « Écoute directe », « Message général » et « Accès
   au chat privé ». */
.studio-form > form, .studio-form > [data-tab-panel] { display: flex; flex-direction: column; gap: var(--space-4); }
.studio-form > *, .studio-form > form > *, .studio-form > [data-tab-panel] > * { margin-block: 0; }
.notice, .error { max-width: none; margin: 0 0 var(--space-4); font-size: var(--text-md); }
.notice { color: #bff4d5; border: 1px solid rgba(70, 216, 141, .28); }
.error { color: #ffc2c8; border: 1px solid rgba(255, 107, 122, .28); }
.error.inline { width: auto; margin: 0; }

.status-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); }
.status-strip > div { min-width: 0; min-height: 68px; padding: var(--space-3) var(--space-4); display: grid; border: 1px solid var(--line); grid-template-columns: auto minmax(0, 1fr); align-content: center; gap: 2px 10px; }
.status-strip .ui-icon, .status-strip .status-dot { grid-row: 1 / 3; align-self: center; }
.status-strip span:not(.status-dot) { color: var(--muted); font-size: var(--text-xs); }
.status-strip strong { font-size: var(--text-md); }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgba(255, 107, 122, .1); }
.status-dot.online { background: var(--green); box-shadow: 0 0 0 4px rgba(70, 216, 141, .1); }
.dashboard-heading { margin: 0; display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.dashboard-heading h2 { margin-top: 3px; }
.activity-dashboard { min-height: 258px; padding: 23px 25px 20px; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 28px; overflow: hidden; background: radial-gradient(circle at 72% 15%, rgba(120, 96, 255, .16), transparent 34%), var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.activity-summary { display: grid; align-content: start; gap: 5px; }
.activity-summary span, .activity-summary small, .activity-stats span { color: var(--muted); font-size: var(--text-xs); }
.activity-summary strong { margin-top: 4px; font: 500 var(--text-3xl)/.95 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.activity-chart { min-width: 0; min-height: 155px; position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.055) calc(25% - 1px) 25%); }
.activity-line { position: absolute; inset: 0 0 25px; width: 100%; height: calc(100% - 25px); overflow: visible; }
.activity-area { fill: rgba(126, 101, 255, .09); }
.activity-path { fill: none; stroke: url(#robertLine); stroke-width: 2.3; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(139, 106, 255, .7)); }
.activity-axis { position: absolute; right: 0; bottom: 5px; left: 0; display: flex; justify-content: space-between; color: #696b78; font-size: var(--text-xs); }
.activity-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 8, 13, .45); }
.activity-stats article { min-width: 0; padding: 13px 16px; display: grid; gap: 5px; border-right: 1px solid var(--line); }
.activity-stats article:last-child { border-right: 0; }
.activity-stats strong { font-size: var(--text-xl); }
.orchestration-dashboard { min-height: 0; padding: 23px 25px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: center; gap: 22px; background: linear-gradient(135deg, rgba(120, 96, 255, .09), transparent 42%), var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.orchestration-dashboard h2 { margin: 5px 0 0; font-size: var(--text-xl); }
/* Le donut et sa légende se lisent ensemble : la légende était rejetée à
   500 px de son graphique, au milieu de la carte. */
.orchestration-repartition { min-width: 0; display: flex; align-items: center; gap: var(--space-8); }
.orchestration-repartition > div:last-child { min-width: 0; flex: 0 1 320px; }
.task-donut { --a: calc(var(--chat) * 1%); --b: calc((var(--chat) + var(--moderation)) * 1%); --c: calc((var(--chat) + var(--moderation) + var(--research)) * 1%); width: 132px; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border-radius: 50%; background: radial-gradient(circle, var(--surface) 0 52%, transparent 53%), conic-gradient(#7461ff 0 var(--a), #4dd69a var(--a) var(--b), #f2be59 var(--b) var(--c), #d962d0 var(--c) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 28px rgba(114, 91, 255, .15); }
.task-donut strong { font-size: var(--text-2xl); line-height: 1; }.task-donut small { margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }
.task-legend { margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 11px; list-style: none; color: var(--muted); font-size: var(--text-xs); }
.task-legend li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; }.task-legend i { width: 8px; height: 8px; border-radius: 50%; }.task-legend i.chat { background: #7461ff; }.task-legend i.moderation { background: #4dd69a; }.task-legend i.research { background: #f2be59; }.task-legend i.other { background: #d962d0; }.task-legend b { color: #d9d7e4; font-size: var(--text-xs); }
.budget-card { min-height: 170px; padding: 19px; display: grid; align-content: center; gap: 8px; background: rgba(11, 12, 19, .7); border: 1px solid rgba(143, 114, 255, .27); border-radius: 8px; }.budget-card span, .budget-card small { color: var(--muted); font-size: var(--text-xs); }.budget-card strong { font-size: var(--text-2xl); letter-spacing: -.04em; }.budget-card a { margin-top: 7px; color: #c8befd; font-size: var(--text-xs); text-decoration: none; }
.section-kicker { font-size: var(--text-2xs); font-weight: 750; text-transform: uppercase; }
.text-link { color: var(--violet); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
@media (max-width: 900px) {
  .text-link { min-height: var(--control-h-sm); display: inline-flex; align-items: center; }
}

.credential-result {
  margin-bottom: 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: end;
  background: rgba(70, 216, 141, .07);
  border: 1px solid rgba(70, 216, 141, .3);
  border-radius: 8px;
}
.credential-result > div span { color: var(--green); font-size: var(--text-2xs); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.credential-result h2 { margin-top: 5px; }
.credential-result p { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-xs); }
.credential-result input[readonly] { color: #dffbec; border-color: rgba(70, 216, 141, .25); }
.account-state { padding: 5px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 750; }
.account-state.active { color: var(--green); background: rgba(70, 216, 141, .1); }
.account-state.disabled { color: var(--danger); background: rgba(255, 107, 122, .1); }
.moderator-actions { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.moderator-actions form { margin: 0; }
.moderator-actions button { min-height: 36px; padding: 0 11px; font-size: var(--text-sm); }
.permission-switch { min-height: 28px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); background: rgba(255, 255, 255, .04); border-color: var(--line); font-size: var(--text-xs); }
.permission-switch i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.permission-switch.enabled { color: #c8f8db; background: rgba(70, 216, 141, .08); border-color: rgba(70, 216, 141, .22); }
.permission-switch.enabled i { background: var(--green); }
.permission-switch b { font-size: var(--text-xs); }
.danger-button { color: #ffd1d5; background: rgba(255, 107, 122, .08); border-color: rgba(255, 107, 122, .24); }
.table-scroll { overflow-x: auto; }

.cards { display: grid; gap: var(--space-3); }
/* Deux colonnes, rangée par rangée — refonte du 17/09.
   Le 06/09, la grille était passée en colonnes CSS (column-count) : chaque
   bloc y prenait sa hauteur exacte, mais l'ORDRE devenait illisible — on
   descendait toute la colonne de gauche avant de remonter à droite, si bien
   que sur Voix « Moteurs de voix » tombait sous « Modèle » et loin de
   « Limites ». Les rangées reviennent, sans étirer les blocs
   (align-items: start) : chaque page range désormais ses blocs par PAIRES de
   hauteur voisine, et un bloc long prend toute la largeur. */
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
/* Deux blocs courts empilés dans une seule cellule, face à un bloc long
   (Modération : Activation et Admission des droits face à Détection). */
.cards-pile { min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.studio-card, .wide-section { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; backdrop-filter: none; }
.studio-card h2, .wide-section h2 { margin: 0 0 22px; display: flex; align-items: center; gap: 10px; }
.studio-card h2::before, .wide-section h2::before { content: ""; margin: 0; border: 0; border-radius: 4px; background: var(--violet); }
.accent-card h2::before { background: var(--cyan); }
.danger-card { border-color: rgba(255, 107, 122, .26); }
.danger-card h2::before { background: var(--danger); }
.portrait-card { background: var(--surface); }
.glow-card { box-shadow: none; border-top: 2px solid var(--violet); }
.wide-section { grid-column: 1 / -1; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label { display: block; margin: 0 0 16px; }
label > span:not(.toggle-copy):not(.toggle-control):not(.membre-identite):not(.membre-fin) { display: block; margin-bottom: 7px; font-size: var(--text-xs); font-weight: 700; }
input, select, textarea { width: 100%; border: 1px solid var(--line-strong); outline: 0; color: var(--text); font-size: var(--text-md); }
textarea { min-height: 190px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.toggle-field { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle-field:last-child { border-bottom: 0; }
.toggle-copy { min-width: 0; display: grid; gap: 3px; }
.toggle-copy strong { font-size: var(--text-sm); }
.toggle-copy small { color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.toggle-control { position: relative; width: 40px; height: 22px; flex: 0 0 auto; }
.toggle-control input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-control i { display: block; width: 40px; height: 22px; border-radius: 12px; background: #30313a; transition: background .18s ease; }
.toggle-control i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #d7d8df; transition: transform .18s ease; }
.toggle-control input:checked + i { background: var(--violet); }
.toggle-control input:checked + i::after { transform: translateX(18px); background: white; }
[data-depends-on] { margin-top: 14px; padding-top: 2px; }
.help { margin: var(--space-2) 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: 1.55; }
.help:last-child { margin-bottom: 0; }
.prominent-help { margin: 0 0 18px; color: #c8f6fc; border-left: 3px solid var(--cyan); }
.advanced-settings { margin-top: 18px; border-top: 1px solid var(--line); }
summary { min-height: var(--control-h-sm); display: flex; align-items: center; cursor: pointer; }
.advanced-settings summary { padding: var(--space-2) 0 2px; font-size: var(--text-xs); font-weight: 750; }
.advanced-settings > div { padding-top: 15px; }
.system-status { margin-bottom: 20px; display: flex; align-items: center; gap: 13px; }
.system-status > div { display: grid; gap: 3px; }
.system-status strong { font-size: var(--text-md); }
.system-status span:not(.status-dot) { color: var(--muted); font-size: var(--text-xs); }
.health-link {
  min-height: 40px;
  margin: 4px 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
}
.health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.health-summary article {
  display: grid;
  align-content: center;
  gap: 5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
}
.health-summary span, .health-summary small { color: var(--muted); font-size: var(--text-xs); }
.settings-search input { min-height: var(--control-h); }
.settings-search-empty { margin-bottom: var(--space-3); }
.settings-grid > [data-settings-card] { min-width: 0; }
.wide-card { grid-column: 1 / -1; }
.settings-history ul { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.settings-history li { min-height: 58px; padding: 11px 13px; display: flex; justify-content: space-between; align-items: center; gap: 14px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.settings-history li > div { min-width: 0; display: grid; gap: 3px; }
.settings-history li strong { font-size: var(--text-xs); }
.settings-history li span, .settings-history li small { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.settings-history-empty { display: block !important; color: var(--muted); font-size: var(--text-xs); }
/* Quatre blocs sur trois colonnes laissaient « Agents Robert » seul sous les
   trois autres, et chaque liste d'état tenait dans un tiers d'écran. */
.health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--space-3); }
.health-grid .wide-section { grid-column: auto; }
.health-list { display: grid; }
/* Plus de bordure par ligne : c'est le conteneur .health-list qui porte le
   cadre, et les filets entre lignes viennent de sa gouttiere de 1 px. */
.health-check { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.health-check > div { min-width: 0; display: grid; gap: 3px; }
.health-check strong { font-size: var(--text-xs); }
.health-check span { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.health-check b { flex: 0 0 auto; color: var(--text-secondary); background: rgba(255, 255, 255, .05); font-size: var(--text-xs); }
.health-check.ok b { color: var(--green); background: rgba(70, 216, 141, .08); }
.health-check.bad b { color: #ffabb6; background: rgba(255, 107, 122, .1); }
.health-check b.neutral { color: var(--muted); background: rgba(255, 255, 255, .06); }
.health-unavailable { padding: 12px; color: var(--muted); font-size: var(--text-xs); }
.health-notices { display: grid; gap: 8px; }
.health-notices p { padding: 13px 15px; color: #ded8ff; background: rgba(143, 114, 255, .09); border: 1px solid rgba(143, 114, 255, .25); font-size: var(--text-xs); line-height: 1.45; }
.health-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.health-actions > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.health-actions .health-link { margin: 0; padding: 0 12px; }
.agent-overview {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
}
.agent-overview article {
  display: grid;
  align-content: center;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.agent-overview span, .agent-overview small { color: var(--text-secondary); font-size: var(--text-2xs); }
.agent-overview strong { font-size: var(--text-lg); }
.agent-flow {
  margin-bottom: 18px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow-x: auto;
  color: var(--muted);
  background: rgba(143, 114, 255, .055);
  border: 1px solid rgba(143, 114, 255, .2);
  border-radius: 8px;
  white-space: nowrap;
  font-size: var(--text-xs);
}
.agent-flow span, .agent-flow strong { padding: 7px 9px; color: #ded9f8; background: #111219; border: 1px solid var(--line); border-radius: 6px; }
.agent-flow strong { color: white; border-color: rgba(143, 114, 255, .4); }
.agent-flow i { color: var(--violet); font-style: normal; }
.agent-master-control {
  margin-bottom: 16px;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .75fr);
  align-items: center;
  gap: 24px;
  border-top: 2px solid var(--violet);
}
.agent-master-control h2 { margin-bottom: 7px; }
.agent-master-control p { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.agent-master-control .toggle-field { border: 0; }
.agent-grid { margin-bottom: var(--space-3); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.agent-card { min-width: 0; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.agent-card.enabled { border-top: 2px solid var(--green); }
.agent-card.disabled { opacity: .78; border-top: 2px solid #4d4e58; }
.agent-card-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.agent-card-icon { width: 42px; height: 42px; display: grid; place-items: center; background: var(--violet-soft); border-radius: 7px; }
.agent-card-head h3 { margin: 0 0 3px; font-size: var(--text-md); }
.agent-card-head p { color: var(--muted); font-size: var(--text-xs); line-height: 1.4; }
.agent-state { padding: 5px 7px; border-radius: 5px; font-size: var(--text-xs); font-weight: 750; white-space: nowrap; }
.agent-state.ok { color: var(--green); background: rgba(70, 216, 141, .09); }
.agent-state.bad { color: #ffabb6; background: rgba(255, 107, 122, .1); }
.agent-state.neutral { color: var(--muted); background: rgba(255, 255, 255, .055); }
.agent-card-metrics { margin: var(--space-3) 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.agent-card-metrics span { min-width: 0; display: flex; align-items: baseline; gap: var(--space-1); }
.agent-card-metrics small { color: var(--text-secondary); font-size: var(--text-2xs); }
.agent-card-metrics strong { overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.agent-settings-grid { margin-bottom: 16px; }
.agent-rules { margin: 14px 0; padding-left: 18px; color: var(--muted); font-size: var(--text-xs); line-height: 1.8; }
.agent-activity { margin-top: 0; }
.agent-activity table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.agent-activity th, .agent-activity td { padding: 11px 10px; border-top: 1px solid var(--line); text-align: left; }
.agent-activity th { color: var(--muted); font-size: var(--text-2xs); letter-spacing: .06em; text-transform: uppercase; }
.agent-name-pill { padding: 4px 6px; color: #d9d2ff; background: rgba(143, 114, 255, .1); border-radius: 5px; font-size: var(--text-xs); }
.agent-event-state { padding: 4px 6px; border-radius: 5px; font-size: var(--text-xs); font-weight: 750; }
.agent-event-state.ok { color: var(--green); background: rgba(70, 216, 141, .08); }
.agent-event-state.bad { color: var(--danger); background: rgba(255, 107, 122, .08); }
.agent-empty-row { padding: var(--space-4) !important; border: 0; text-align: center !important; }
.private-chat-picker { display: grid; gap: var(--space-2); }

.profile-introduction { margin-bottom: 16px; }
.profile-settings-form { margin-bottom: 16px; }
.profile-settings-form > .section-head { align-items: center; }
.profile-settings-form > [data-depends-on] { margin-top: 12px; }
.profile-workspace {
  min-height: 610px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
  overflow: hidden;
}
.profile-directory { min-width: 0; padding: 19px; background: #0c0d12; border-right: 1px solid var(--line); }
.profile-directory > label { margin: 0 0 12px; }
.profile-options { max-height: 560px; display: grid; gap: 7px; overflow-y: auto; }
.profile-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
  padding: 10px 12px;
  color: var(--muted);
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: var(--text-xs);
}
.profile-pagination + .profile-workspace { margin-top: 0; }
.profile-workspace + .profile-pagination { margin-top: 14px; margin-bottom: 0; }
.profile-pagination a { color: #d8d0ff; font-weight: 700; text-decoration: none; }
.profile-pagination a.disabled { opacity: .35; pointer-events: none; }
.profile-option {
  width: 100%;
  min-height: 64px;
  padding: 9px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
}
.profile-option:hover { filter: none; background: rgba(255,255,255,.035); border-color: var(--line); }
.profile-option.active { background: rgba(143, 114, 255, .11); border-color: rgba(143, 114, 255, .35); box-shadow: inset 3px 0 0 var(--violet); }
.profile-detail-avatar, .dm-recipient-avatar { display: block; object-fit: cover; background: var(--surface-3); border-radius: 50%; }
.profile-option > span { min-width: 0; display: grid; gap: 3px; }
.profile-option strong, .profile-option small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-option strong { font-size: var(--text-xs); }
.profile-option small { color: var(--muted); font-size: var(--text-xs); }
.profile-option em { padding: 4px 6px; color: #cbbfff; background: rgba(143, 114, 255, .1); border-radius: 5px; font-size: var(--text-xs); font-style: normal; }
.profile-search-empty { padding: 18px 8px; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.profile-details { min-width: 0; padding: clamp(20px, 3vw, 34px); }
.profile-detail { display: grid; gap: 20px; }
.profile-detail-head { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.profile-detail-avatar { width: 74px; height: 74px; border: 2px solid rgba(143, 114, 255, .45); }
.profile-detail-head > div { min-width: 0; }
.profile-detail-head > div > span { color: var(--violet); font-size: var(--text-2xs); font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.profile-detail-head h2 { margin: 4px 0; font-size: var(--text-2xl); }
.profile-detail-head h2::before { display: none; }
.profile-detail-head p { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.profile-detail-head > strong { padding: 7px 9px; color: #d8d0ff; background: rgba(143, 114, 255, .1); border: 1px solid rgba(143, 114, 255, .22); border-radius: 6px; font-size: var(--text-xs); }
.profile-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.profile-metrics > span { padding: 13px; display: grid; gap: 5px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.profile-metrics small { color: var(--muted); font-size: var(--text-xs); }
.profile-metrics strong { font-size: var(--text-md); }
.profile-information-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-information-grid > section { min-width: 0; padding: 16px; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 7px; }
.profile-information-grid h3 { margin: 0 0 10px; font-size: var(--text-sm); }
.profile-information-grid section > p { color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.profile-tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.profile-tags span { padding: 5px 7px; color: #d9d2ff; background: rgba(143,114,255,.1); border-radius: 5px; font-size: var(--text-xs); }
.profile-tags i { color: var(--muted); font-size: var(--text-xs); font-style: normal; }
.profile-detail-actions { padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); }
.profile-detail-actions p { color: var(--muted); font-size: var(--text-xs); line-height: 1.5; }
.profile-detail-buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.profile-detail-buttons form { margin: 0; }
.profile-report { padding: 18px; background: linear-gradient(135deg, rgba(143, 114, 255, .1), rgba(255, 75, 145, .04)); border: 1px solid rgba(143, 114, 255, .24); border-radius: 8px; }
.profile-report > header { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.profile-report header span { color: var(--violet); font-size: var(--text-2xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.profile-report h3 { margin: 4px 0 0; font-size: var(--text-lg); }
.profile-report > header > strong { padding: 6px 8px; color: #d8d0ff; background: rgba(143, 114, 255, .1); border-radius: 6px; font-size: var(--text-xs); white-space: nowrap; }
.profile-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.profile-report-grid article { padding: 12px; background: rgba(8, 9, 13, .58); border: 1px solid var(--line); border-radius: 7px; }
.profile-report-grid h4 { margin: 0 0 6px; font-size: var(--text-xs); }
.profile-report-grid p, .profile-report-conclusion { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.profile-report-conclusion { margin-top: 13px; }

.dm-composer, .dm-review { margin-bottom: 16px; }
.dm-step { padding: 6px 8px; color: #d9d2ff; background: rgba(143,114,255,.1); border-radius: 6px; font-size: var(--text-xs); font-weight: 750; }
.dm-compose-form { display: grid; grid-template-columns: minmax(220px, .65fr) minmax(320px, 1.35fr); gap: 16px; align-items: start; }
.dm-compose-form > button { grid-column: 2; justify-self: start; }
.dm-recipient-column { display: grid; gap: 12px; }
.dm-recipient-column label { margin: 0; }
.dm-recipient-preview { min-height: 70px; padding: 10px; display: flex; align-items: center; gap: 11px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.dm-recipient-avatar { width: 48px; height: 48px; }
.dm-recipient-preview > span { min-width: 0; display: grid; gap: 3px; }
.dm-recipient-preview strong, .dm-recipient-preview small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-recipient-preview strong { font-size: var(--text-sm); }
.dm-recipient-preview small { color: var(--muted); font-size: var(--text-xs); }
.dm-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dm-comparison article { min-width: 0; padding: 15px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.dm-comparison article:last-child { border-color: rgba(143,114,255,.3); }
.dm-comparison span { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dm-comparison p { margin-top: 10px; font-size: var(--text-xs); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-send-form { margin-top: 16px; display: grid; gap: 12px; }
.dm-send-form > button { justify-self: end; }
.dm-confirm { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; background: rgba(80,213,232,.05); border: 1px solid rgba(80,213,232,.18); border-radius: 7px; }
.dm-confirm input { width: 17px; min-height: 17px; margin: 0; accent-color: var(--violet); }
.dm-confirm span { font-size: var(--text-xs); }
.public-everyone-option { border-color: rgba(255, 196, 89, .35); background: rgba(255, 196, 89, .06); }
.public-everyone-option span { display: grid; gap: 3px; }
.public-everyone-option small { color: #e3c983; font-size: var(--text-xs); }
.public-media-preview { padding: 12px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.public-media-preview p { margin: 0 0 9px; color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.public-media-preview img, .public-media-preview video { display: block; width: min(100%, 420px); max-height: 260px; object-fit: contain; background: #08090d; border-radius: 6px; }
.public-channel-picker { position: relative; min-width: 0; margin: 0; padding: 0; border: 0; }
.public-channel-picker legend { width: 100%; margin-bottom: 7px; padding: 0; color: #a9abb6; font-size: var(--text-xs); font-weight: 700; }
.public-channel-compact { min-width: 0; padding: 9px; background: #0c0d12; border: 1px solid var(--line); border-radius: 8px; }
.public-channel-trigger { width: 100%; min-height: 54px; padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); background: #090a0f; border: 1px solid var(--line-strong); border-radius: 7px; text-align: left; }
.public-channel-trigger:hover { border-color: rgba(143,114,255,.44); background: rgba(143,114,255,.055); }
.public-channel-trigger:focus-visible { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(143,114,255,.12); outline: 0; }
.public-channel-trigger-copy { min-width: 0; display: grid; gap: 3px; }
.public-channel-trigger-copy small { color: var(--muted); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.public-channel-trigger-copy strong { overflow: hidden; color: #ebe8ff; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.public-channel-trigger-icon { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; color: #c9bdff; background: rgba(143,114,255,.1); border: 1px solid rgba(143,114,255,.2); border-radius: 6px; transition: transform .18s ease, background .18s ease; }
.public-channel-trigger-icon svg { width: 15px; height: 15px; }
.public-channel-picker.is-open .public-channel-trigger { border-color: rgba(143,114,255,.55); }
.public-channel-picker.is-open .public-channel-trigger-icon { transform: rotate(180deg); background: rgba(143,114,255,.18); }
.public-channel-chips { min-width: 0; margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.public-channel-chips[hidden], .public-channel-panel[hidden] { display: none; }
.public-channel-chip { max-width: min(180px, 100%); padding: 4px 7px; overflow: hidden; color: #ded8ff; background: rgba(143,114,255,.09); border: 1px solid rgba(143,114,255,.18); border-radius: 999px; font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.public-channel-chip.more { flex: 0 0 auto; color: #bdf4fb; background: rgba(80,213,232,.07); border-color: rgba(80,213,232,.2); }
.public-channel-panel { position: absolute; z-index: 35; top: calc(100% + 8px); right: 0; left: 0; max-height: min(560px, 70vh); padding: 14px; overflow: hidden; background: #0a0b10; border: 1px solid rgba(143,114,255,.42); border-radius: 9px; box-shadow: 0 22px 55px rgba(0,0,0,.56), 0 0 0 1px rgba(143,114,255,.06); }
.public-channel-tools { display: grid; grid-template-columns: minmax(220px, 1fr) auto; gap: 10px; align-items: end; }
.public-channel-tools label { margin: 0; }
.public-channel-tools > div { display: flex; gap: 7px; }
.public-channel-tools button { min-height: 39px; padding: 0 11px; white-space: nowrap; }
.public-channel-list { max-height: min(330px, 46vh); margin-top: 12px; padding: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.public-channel-group { min-width: 0; padding: 9px; background: rgba(255,255,255,.018); border: 1px solid var(--line); border-radius: 7px; }
.public-channel-group > strong { display: block; margin-bottom: 7px; color: var(--muted); font-size: var(--text-2xs); letter-spacing: .08em; text-transform: uppercase; }
.public-channel-group > div { display: grid; gap: 5px; }
.public-channel-option { min-width: 0; min-height: 47px; margin: 0; padding: 7px 8px; display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 8px; background: #0a0b10; border: 1px solid transparent; border-radius: 6px; cursor: pointer; }
.public-channel-option:hover { border-color: rgba(143,114,255,.25); }
.public-channel-option:has(input:checked) { background: rgba(143,114,255,.1); border-color: rgba(143,114,255,.38); }
.public-channel-option.unavailable { opacity: .56; cursor: not-allowed; }
.public-channel-option input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--violet); }
.public-channel-option > span { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 5px; align-items: center; }
.public-channel-option b { color: var(--muted); font-size: var(--text-xs); }
.public-channel-option strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.public-channel-option small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.public-channel-panel-footer { margin-top: 10px; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.public-channel-selection { min-width: 0; display: flex; justify-content: space-between; gap: 12px; }
.public-channel-selection strong { color: #d9d2ff; font-size: var(--text-xs); }
.public-channel-selection span, .public-channel-error { color: var(--muted); font-size: var(--text-xs); }
.public-channel-close { min-height: 36px; flex: 0 0 auto; padding: 0 12px; }
.public-channel-error { margin: 9px 0 0; color: var(--danger); }
.public-channel-review { margin-bottom: 13px; padding: 12px; background: rgba(143,114,255,.07); border: 1px solid rgba(143,114,255,.2); border-radius: 7px; }
.public-channel-review > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-channel-review > div strong, .public-channel-review a { font-size: var(--text-xs); }
.public-channel-review a { color: #c9bdff; }
.public-channel-review ul { margin: 9px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.public-channel-review li { padding: 5px 7px; color: #e3deff; background: rgba(255,255,255,.045); border-radius: 5px; font-size: var(--text-xs); }
.public-channel-review li span { margin-right: 2px; color: var(--violet); }
.public-publish-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.public-publish-summary strong { color: var(--green); font-size: var(--text-sm); }
.public-publish-summary span { color: var(--muted); font-size: var(--text-xs); }
.public-publish-columns { margin-top: 13px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.public-publish-columns section { min-width: 0; padding: 12px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.public-publish-columns h3 { margin: 0 0 8px; font-size: var(--text-xs); }
.public-publish-columns ul { margin: 0; padding: 0; display: grid; gap: 5px; list-style: none; }
.public-publish-columns li { display: grid; gap: 2px; font-size: var(--text-xs); overflow-wrap: anywhere; }
.public-publish-columns li span, .public-publish-columns p { margin: 0; color: var(--muted); font-size: var(--text-xs); }
.dm-access-card, .dm-history-card { min-width: 0; }
.dm-access-card form > button { margin-top: 14px; }
.dm-history { margin: 0; padding: 0; display: grid; gap: 7px; list-style: none; }
.dm-history li { min-height: 55px; padding: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.dm-history li > div { min-width: 0; display: grid; gap: 3px; }
.dm-history strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); }
.dm-history span { color: var(--muted); font-size: var(--text-xs); }
.dm-history-empty { border: 0; }
.dm-status { padding: 5px 7px; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 5px; font-size: var(--text-xs); font-style: normal; }
.dm-status.sent { color: var(--green); background: rgba(70,216,141,.08); }
.dm-status.failed { color: var(--danger); background: rgba(255,107,122,.08); }
.broadcast-composer { margin-top: 16px; }
.broadcast-compose-form { display: grid; gap: 13px; }
.broadcast-settings-line { padding: 10px 12px; color: #d9d2ff; background: rgba(143,114,255,.08); border: 1px solid rgba(143,114,255,.2); border-radius: 7px; font-size: var(--text-xs); }
.broadcast-picker { min-width: 0; }
.broadcast-review { border-color: rgba(143,114,255,.35); }
.broadcast-settings-form { margin-top: 14px; padding: 12px; display: grid; gap: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 7px; }
.broadcast-settings-form > button { justify-self: start; }

button, .card-action, .refresh { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(143, 114, 255, .42); color: #160913; cursor: pointer; font-size: var(--text-sm); font-weight: 800; text-decoration: none; }
button:disabled { cursor: wait; opacity: .65; }
button.ghost, button.secondary, .refresh { color: var(--text); border-color: var(--line-strong); }
button.full { width: 100%; margin-top: 12px; }
.system-action { margin-top: 4px; }
.system-action .ui-icon, button .ui-icon { width: 17px; height: 17px; }
.card-action { width: 100%; margin-top: 18px; }
.button-row { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 9px; }
.actions { position: relative; z-index: 12; display: flex; justify-content: flex-end; align-items: center; gap: 18px; border: 1px solid var(--line-strong); backdrop-filter: blur(12px); }
.save-state { margin-right: auto; color: var(--muted); font-size: var(--text-xs); }
form.is-dirty > .actions { position: sticky; bottom: var(--space-3); border-color: rgba(143, 114, 255, .42); box-shadow: 0 18px 54px rgba(0, 0, 0, .45), 0 0 0 1px rgba(146, 118, 255, .12); }
form.is-dirty .save-state { color: #ddd5ff; }
/* Le résultat d'un enregistrement s'affiche dans la barre, sans recharger la page. */
.save-state.ok { color: var(--green); }
.save-state-auto { display: block; margin-top: 8px; }
.save-state-auto:empty { display: none; }
.save-state.erreur { color: var(--danger); }
.actions button:disabled { opacity: .7; cursor: progress; }
/* Un champ qui empêche d'enregistrer doit se voir, même s'il était dans un onglet fermé. */
.champ-invalide input, .champ-invalide select, .champ-invalide textarea { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.champ-erreur { display: block; margin-top: 6px; color: var(--danger); font-size: var(--text-xs); }
.metric-row { min-height: 48px; padding: 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.section-head > strong { flex: 0 0 auto; padding: 2px var(--space-2); color: var(--violet-strong); font-size: var(--text-xs); font-weight: 650; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { font-size: var(--text-sm); }

.section-tabs, .log-tabs { align-self: flex-start; max-width: 100%; margin: 0; display: inline-flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--surface); border: 1px solid var(--line); }
.section-tabs::-webkit-scrollbar, .log-tabs::-webkit-scrollbar { display: none; }
.section-tabs button, .log-tabs button { flex: 0 0 auto; min-width: 0; min-height: 36px; white-space: nowrap; padding: 0 14px; color: var(--muted); background: transparent; border: 0; font-size: var(--text-sm); }
.section-tabs button.active, .log-tabs button.active { color: var(--text); border: 0; box-shadow: none; }
.logs { max-height: 670px; padding-right: 4px; display: grid; gap: 10px; overflow: auto; }
.logs-workspace { min-width: 0; }
.voice-state-card { position: relative; overflow: hidden; }
.voice-state-card::after { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--violet), var(--cyan)); opacity: .8; }
.voice-state-badge { padding: 7px 11px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: var(--text-xs); }
.voice-state-badge.ok { color: var(--green); border-color: rgba(70, 216, 141, .35); background: rgba(70, 216, 141, .08); }
.voice-connect-form { display: grid; grid-template-columns: minmax(240px, 1fr) auto; gap: 12px; align-items: end; }
.voice-connect-form button { min-width: 180px; }
.voice-control-actions form { margin: 0; }
.voice-queue-meter { height: 9px; margin: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(255, 255, 255, .035); }
.voice-queue-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--cyan)); transition: width .2s ease; }
/* La file tenait un bloc entier : titre, sous-titre, jauge, puis trois lignes
   pour « element en cours », « capacite » et « derniere activite ». Elle
   devient une ligne du poste de pilotage — la jauge dit deja l'essentiel. */
.voice-queue-line { margin: var(--space-3) 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-2) var(--space-3); }
.voice-queue-line > span { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 650; }
.voice-queue-line > strong { font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.voice-queue-line > small { grid-column: 1 / -1; color: var(--text-secondary); font-size: var(--text-2xs); }
.log-card { padding: 16px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.log-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.log-head strong { color: var(--text); font-size: var(--text-sm); }
.log-head time, .log-meta { color: var(--muted); font-size: var(--text-xs); }
.log-meta { margin-top: 6px; overflow-wrap: anywhere; }
.log-text { margin-top: 10px; color: #e4e4e9; font-size: var(--text-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-link { display: inline-block; margin-top: 10px; color: var(--cyan); font-size: var(--text-xs); font-weight: 700; text-decoration: none; }
.log-image { display: block; width: min(100%, 340px); margin-top: 12px; border: 1px solid var(--line); border-radius: 7px; }

.soundboard-layout { display: grid; gap: var(--space-3); }
.sound-upload-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.sound-upload-form audio, .sound-upload-form .sound-range-label, .sound-upload-form button { grid-column: 1 / -1; }
.sound-upload-form audio { width: 100%; margin: 4px 0 16px; }
.sound-range-label input { min-height: 20px; padding: 0; accent-color: var(--violet); }
.sound-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-2); }
.sound-card { min-width: 0; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.sound-card-head { margin-bottom: var(--space-2); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.sound-card-head > div { min-width: 0; display: grid; gap: 3px; }
.sound-card-head strong { overflow-wrap: anywhere; font-size: var(--text-sm); }
.sound-card-head span { color: var(--muted); font-size: var(--text-xs); }
.sound-card form { margin: 0; }
.sound-card audio { display: block; width: 100%; height: var(--control-h); margin-bottom: var(--space-2); }
.sound-card .sound-play { width: 100%; }
.soundboard-command-status { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); display: grid; gap: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text-secondary); background: rgba(255, 255, 255, .025); font-size: var(--text-xs); line-height: 1.4; }
.soundboard-command-status strong { color: var(--text); }
.soundboard-command-status.pending { border-color: rgba(143, 114, 255, .38); color: #ddd5ff; background: rgba(143, 114, 255, .08); }
.soundboard-command-status.accepted { border-color: rgba(70, 216, 141, .34); color: #bff4d5; background: rgba(70, 216, 141, .08); }
.soundboard-command-status.failed { border-color: rgba(255, 107, 122, .34); color: #ffc2c8; background: rgba(255, 107, 122, .08); }
.icon-button { width: 34px; min-height: 34px; padding: 0; flex: 0 0 auto; font-size: var(--text-xl); }
.icon-button.danger { color: #ffc0c7; background: rgba(255, 107, 122, .08); border-color: rgba(255, 107, 122, .24); }
.soundboard-empty { grid-column: 1 / -1; }
.quiz-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(270px, .6fr); gap: 16px; align-items: start; }
.quiz-launcher { max-width: none; }
.quiz-launcher .section-head > .ui-icon { width: 34px; height: 34px; opacity: .9; }
.quiz-form { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(180px, .45fr) auto; gap: 14px; align-items: end; }
.quiz-form button { min-height: var(--control-h-lg); white-space: nowrap; }
.quiz-settings form { display: grid; gap: 13px; }
.quiz-settings form label { margin: 0; }
.poll-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 16px; align-items: start; }
.poll-composer { max-width: none; }
/* La grille declare deux colonnes — 726 px pour le formulaire, 350 px pour
   l'apercu — mais la regle globale `.wide-section { grid-column: 1 / -1 }`
   faisait occuper toute la largeur a CHACUN de ses trois enfants. Les deux
   colonnes ne se sont donc jamais affichees, et l'apercu Discord, cale en
   `position: sticky` pour suivre la saisie, se retrouvait sous le bouton de
   publication, la ou on ne le regarde plus. */
.poll-layout > .poll-composer { grid-column: 1; }
.poll-layout > .poll-preview { grid-column: 2; }
.poll-layout > .poll-history-section { grid-column: 1 / -1; }
.poll-form { display: grid; gap: 16px; }
.poll-answer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.poll-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.poll-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.poll-toggles label { min-height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 9px; color: var(--text); background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 7px; }
.poll-toggles input { width: 17px; min-height: 17px; accent-color: var(--violet); }
/* 96 px : la barre du haut, collée elle aussi, occupe les 76 premiers pixels. */
.poll-preview { position: sticky; top: 96px; align-self: start; min-height: 0; }
.poll-preview > span { color: var(--violet); font-size: var(--text-2xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.poll-preview h3 { margin: 14px 0 16px; font-size: var(--text-xl); overflow-wrap: anywhere; }
.poll-preview-answers { display: grid; gap: 8px; }
.poll-preview-answers i { padding: 10px 12px; color: var(--text); background: #0b0c12; border: 1px solid var(--line-strong); border-radius: 7px; font-style: normal; }
.poll-preview small { display: block; margin-top: 15px; color: var(--muted); }
.poll-history-section { grid-column: 1 / -1; }
.poll-history { display: grid; gap: 9px; }
.poll-history article { padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center; background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 7px; }
.poll-history article > div { min-width: 0; display: grid; gap: 4px; }
.poll-history article strong { overflow-wrap: anywhere; }
.poll-history article span, .poll-history article a { color: var(--muted); font-size: var(--text-xs); }
.poll-history article a { color: #cbbfff; }
.poll-status { padding: 5px 8px; border-radius: 5px; background: rgba(255,255,255,.05); }
.poll-status.sent { color: var(--green); background: rgba(70,216,141,.08); }
.poll-status.error { color: #ff9ca8; background: rgba(255,107,122,.08); }

.protected-list { margin-bottom: 0; display: grid; gap: 8px; }
.protected-member { padding: 11px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.protected-member > div { min-width: 0; display: grid; gap: 3px; }
.protected-member strong { font-size: var(--text-sm); }
.protected-member span { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.protected-add { padding-top: 0; border-top: 0; }
.command-checklist { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.command-checklist legend { padding: 0 0 6px; font-size: var(--text-xs); color: var(--muted); }
.command-checklist label { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--text-xs); cursor: pointer; }
.command-checklist label:last-child { border-bottom: 0; }
.command-checklist input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--violet); }
.moderation-history { max-height: 590px; display: grid; gap: 8px; overflow: auto; }
.moderation-history article { padding: 13px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.moderation-history article > div { display: flex; justify-content: space-between; gap: 12px; }
.moderation-history time, .moderation-history span { color: var(--muted); font-size: var(--text-xs); }
.moderation-history p { margin: 6px 0 4px; color: var(--text); font-size: var(--text-xs); text-transform: capitalize; }
/* Meme logique que STATUS ROW, pour les listes explicatives : le libelle et
   sa valeur cohabitent sur une ligne des qu'il y a la place, et ne repassent
   l'un sous l'autre que si la valeur est une vraie phrase. */
.safety-list { display: grid; gap: 0; }
.safety-list p {
  min-height: 38px;
  padding: var(--space-2) 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.safety-list p:last-child { border-bottom: 0; }
.safety-list strong { flex: 0 0 auto; font-size: var(--text-sm); }
.safety-list span { color: var(--muted); font-size: var(--text-sm); text-align: right; }
@media (max-width: 600px) {
  .safety-list p { align-items: flex-start; flex-direction: column; gap: var(--space-1); }
  .safety-list span { text-align: left; }
}

.moderation-control-center { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.moderation-control-center article { display: grid; align-content: center; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.moderation-control-center span, .moderation-control-center small { color: var(--muted); font-size: var(--text-xs); }
.moderation-control-center strong { font-size: var(--text-lg); }
.moderation-ladder { padding: var(--space-3) var(--space-4); background: rgba(143,114,255,.08); border: 1px solid rgba(143,114,255,.24); border-radius: 8px; }
.moderation-ladder > strong { display: block; margin-bottom: 10px; font-size: var(--text-sm); }
.moderation-ladder > div { display: flex; flex-wrap: wrap; gap: 8px; }
.moderation-ladder span { padding: 7px 9px; color: #d8d0f7; background: #0c0d12; border: 1px solid var(--line); border-radius: 6px; font-size: var(--text-xs); }
.warning-member-list { display: grid; gap: 9px; }
.warning-member { padding: 13px; display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.35fr) auto; align-items: center; gap: 14px; background: #0c0d12; border: 1px solid var(--line); border-radius: 7px; }
.warning-member > div { min-width: 0; display: grid; gap: 3px; }
.warning-member span, .warning-member small { color: var(--muted); font-size: var(--text-xs); }
.warning-member b { font-size: var(--text-xs); text-transform: capitalize; }
.warning-member button { min-height: 36px; font-size: var(--text-sm); }

.compact-textarea {
  min-height: 106px;
  resize: vertical;
  line-height: 1.5;
}
.variable-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}
.variable-list code {
  padding: 7px 9px;
  color: #b8a7ff;
  background: rgba(143, 114, 255, .08);
  border: 1px solid rgba(143, 114, 255, .32);
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
}
.variable-list span { color: var(--muted); font-size: var(--text-sm); }
.member-preview-heading { margin-top: 32px; }
.member-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.member-preview-card {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.member-preview-copy {
  min-height: 82px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
}
.member-preview-copy > div { min-width: 0; }
.member-preview-copy span {
  display: block;
  margin-bottom: 3px;
  color: #9f8bff;
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
}
.member-preview-copy h2 { font-size: var(--text-lg); }
.member-preview-copy button { flex: 0 0 auto; }
.member-preview-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --- Page de connexion OBSIDIAN (refonte du 18/09) -------------------------
   La pierre de la vidéo est le cœur de l'IA : sa lumière doit sembler
   alimenter le panneau. La vidéo occupe les deux tiers gauches et se fond
   dans le fond sombre ; la carte flotte par-dessus sa lisière, floutant ce
   qui passe derrière elle. Le titre reste en HTML, jamais dans la vidéo.
   Sans vidéo, l'affiche prend sa place ; sans affiche, le fond sombre suffit.

   Recadré le même jour, à la demande de Nicolas : le cadre de 1320 x 760 px
   laissait un grand vide, puis la carte a chevauché une vidéo qui s'arrêtait
   net contre sa bordure. Désormais le cadre épouse le formulaire ; la vidéo,
   de même hauteur, s'éteint dans un vrai dégradé AVANT lui ; et le formulaire
   est centré dans sa propre zone, sans boîte autour sur ordinateur.
   Le téléphone (760 px et moins) n'a pas changé. */
.connexion {
  --connexion-fond: #08080e;
  --connexion-violet: #956dff;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(16px, 3vw, 40px);
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 30% 42%, rgba(96, 60, 220, .1), transparent 70%),
    radial-gradient(ellipse 36% 40% at 88% 84%, rgba(70, 110, 220, .05), transparent 70%),
    #07070b;
}
.connexion-cadre {
  position: relative;
  isolation: isolate;
  --connexion-carte: 440px;
  --connexion-marge: 32px;
  width: min(1060px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--connexion-fond);
  border: 1px solid rgba(145, 105, 255, .12);
  border-radius: 26px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .03);
}
/* La lumière de la pierre qui coule vers la carte. */
.connexion-cadre::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 12%;
  bottom: 12%;
  left: 10%;
  right: 40%;
  background: radial-gradient(ellipse 70% 60% at 42% 50%, rgba(128, 86, 255, .18), rgba(98, 62, 230, .06) 55%, transparent 76%);
  pointer-events: none;
}
.connexion-scene {
  position: absolute;
  z-index: -3;
  inset: 0 auto 0 0;
  width: calc(100% - var(--connexion-carte) - 2 * var(--connexion-marge) + 24px);
  overflow: hidden;
  background: #050508 url("/obsidian-login-poster.webp") 50% 45% / cover no-repeat;
}
.connexion-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 45%;
  filter: saturate(.95) contrast(1.05) brightness(.9);
}
.connexion-voile {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 8, 14, 0) 0%, rgba(8, 8, 14, 0) 42%, rgba(8, 8, 14, .22) 55%, rgba(8, 8, 14, .55) 70%, rgba(8, 8, 14, .85) 84%, #08080e 95%),
    radial-gradient(ellipse 95% 88% at 42% 50%, transparent 55%, rgba(4, 4, 8, .72) 100%),
    linear-gradient(180deg, rgba(7, 7, 11, .38) 0%, rgba(7, 7, 11, .16) 42%, rgba(7, 7, 11, .55) 100%);
}
/* Grain très léger, pour que l'image ne paraisse pas plate. */
.connexion-voile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.connexion-halo {
  position: absolute;
  z-index: -2;
  top: 50%;
  right: calc(var(--connexion-carte) / 2 + var(--connexion-marge));
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123, 82, 255, .2), rgba(90, 50, 220, .07) 45%, transparent 70%);
  transform: translate(50%, -50%);
  pointer-events: none;
  animation: connexion-halo 5.5s ease-in-out infinite alternate;
}
.connexion-carte {
  position: relative;
  width: var(--connexion-carte);
  margin: var(--connexion-marge);
  padding: clamp(28px, 3.2vw, 44px);
  background: rgba(10, 9, 18, .7);
  -webkit-backdrop-filter: blur(24px) saturate(1.1);
  backdrop-filter: blur(24px) saturate(1.1);
  border: 1px solid rgba(145, 105, 255, .18);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .03);
  animation: connexion-apparition .7s cubic-bezier(.2, .7, .2, 1) .1s both;
}
/* Un filet de lumière qui glisse lentement sur le bord haut de la carte. */
.connexion-carte::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(176, 148, 255, .75), transparent);
  animation: connexion-filet 7s ease-in-out infinite;
}
.connexion-surtitre {
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #b9b3d4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.connexion-point {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--connexion-violet);
  box-shadow: 0 0 0 0 rgba(149, 109, 255, .5), 0 0 12px rgba(149, 109, 255, .8);
  animation: connexion-pulsation 2.6s ease-out infinite;
}
.connexion-titre {
  margin: 0;
  color: #cdc7e2;
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(54px, 5.6vw, 84px);
  font-weight: 800;
  line-height: .9;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-shadow: none;
  background: linear-gradient(180deg, #f5f3fb 0%, #cdc7e2 34%, #9a83f0 64%, #5a3dc4 84%, #2e2170 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 28px rgba(100, 62, 240, .28));
}
.connexion-accroche { margin: 20px 0 4px; color: #e7e4f3; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
.connexion-detail { margin: 0 0 28px; color: #8f8aa6; font-size: 14px; line-height: 1.5; }
.connexion-erreur { margin: 0 0 18px; border-radius: 12px; }
.connexion-formulaire { margin: 0; }
.connexion-champ { margin: 0 0 16px; }
.connexion-champ > .connexion-libelle { margin-bottom: 8px; color: #a9a3c2; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.connexion-champ > .connexion-saisie { position: relative; display: block; margin: 0; color: #8d84ad; transition: color .22s ease; }
.connexion-saisie:focus-within { color: #bba7ff; }
.connexion-icone { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.connexion-saisie > .connexion-icone { position: absolute; top: 50%; left: 15px; width: 17px; height: 17px; transform: translateY(-50%); pointer-events: none; }
.connexion-saisie input {
  min-height: 52px;
  padding: 0 52px 0 44px;
  color: #f1eff8;
  font-size: 15px;
  letter-spacing: .02em;
  background: rgba(5, 5, 10, .75);
  border: 1px solid rgba(150, 110, 255, .25);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.connexion-saisie-code input { padding-left: 16px; letter-spacing: .3em; }
.connexion-saisie input::placeholder { color: rgba(170, 160, 205, .4); letter-spacing: .02em; }
.connexion-saisie input:hover { border-color: rgba(150, 110, 255, .4); }
.connexion-saisie input:focus {
  background: rgba(6, 6, 12, .9);
  border-color: #956dff;
  box-shadow: 0 0 0 3px rgba(149, 109, 255, .08), 0 0 28px rgba(115, 70, 255, .15);
}
.connexion-saisie input:focus-visible { outline: none; }
.connexion-oeil {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  color: #8d84ad;
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  transform: translateY(-50%);
}
.connexion-oeil:hover, .connexion-oeil:active { color: #dcd2ff; background: rgba(149, 109, 255, .1); box-shadow: none; filter: none; transform: translateY(-50%); }
.connexion-oeil[hidden] { display: none; }
.connexion-oeil .connexion-icone { width: 18px; height: 18px; }
.connexion-oeil[aria-pressed="true"] .connexion-icone-voir, .connexion-oeil:not([aria-pressed="true"]) .connexion-icone-cacher { display: none; }
.connexion-bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 54px;
  margin-top: 8px;
  padding: 0 22px;
  gap: 12px;
  color: #ece8fa;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #17151f 0%, #0e0d15 100%);
  border: 1px solid rgba(149, 109, 255, .34);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, color .25s ease;
}
/* Au survol, le violet monte en fondu et un reflet traverse le bouton. */
.connexion-bouton::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, #5b3fd0 0%, #7452e8 55%, #4a33b3 100%);
  opacity: 0;
  transition: opacity .28s ease;
}
.connexion-bouton::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  transform: translateX(-100%);
  transition: transform .7s ease;
}
.connexion-bouton:hover {
  color: #fff;
  border-color: rgba(170, 140, 255, .7);
  box-shadow: 0 16px 40px rgba(75, 45, 190, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  filter: none;
  transform: translateY(-1px);
}
.connexion-bouton:hover::before { opacity: 1; }
.connexion-bouton:hover::after { transform: translateX(450%); }
.connexion-bouton:active { box-shadow: 0 6px 18px rgba(75, 45, 190, .3), inset 0 2px 8px rgba(0, 0, 0, .35); transform: translateY(0) scale(.99); }
.connexion-bouton .connexion-fleche { width: 17px; height: 17px; transition: transform .25s ease; }
.connexion-bouton:hover .connexion-fleche { transform: translateX(3px); }

@keyframes connexion-apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes connexion-halo { from { opacity: .55; transform: translate(50%, -50%) scale(.95); } to { opacity: .9; transform: translate(50%, -50%) scale(1.05); } }
@keyframes connexion-halo-mobile { from { opacity: .5; transform: translate(50%, -50%) scale(.95); } to { opacity: .85; transform: translate(50%, -50%) scale(1.05); } }
@keyframes connexion-filet { 0%, 100% { opacity: .35; transform: translateX(-12%); } 50% { opacity: .9; transform: translateX(12%); } }
@keyframes connexion-pulsation { 0% { box-shadow: 0 0 0 0 rgba(149, 109, 255, .5), 0 0 12px rgba(149, 109, 255, .8); } 70%, 100% { box-shadow: 0 0 0 7px rgba(149, 109, 255, 0), 0 0 12px rgba(149, 109, 255, .8); } }

/* Ordinateur et tablette : pas de carte. Le titre et le formulaire se posent
   directement sur le fond où la vidéo s'éteint, dans la même surface qu'elle ;
   une boîte à côté de la vidéo faisait deux blocs juxtaposés (retour de
   Nicolas). Le téléphone, lui, garde sa carte : il est validé tel quel. */
@media (min-width: 761px) {
  .connexion-carte {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .connexion-carte::before { display: none; }
}

/* Tablette : la carte se resserre un peu, la vidéo suit. */
@media (max-width: 1100px) {
  .connexion-cadre { --connexion-carte: min(420px, 52%); }
  .connexion-titre { font-size: clamp(48px, 6vw, 72px); }
}

/* Téléphone : pas deux colonnes minuscules. La vidéo devient un bandeau plus
   sombre en haut, la carte remonte par-dessus sa fin. */
@media (max-width: 760px) {
  .connexion { padding: 0; place-items: stretch; }
  .connexion-cadre { width: 100%; min-height: 100vh; min-height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; border: 0; border-radius: 0; box-shadow: none; }
  .connexion-cadre::before { display: none; }
  .connexion-scene { position: relative; inset: auto; flex: 0 0 auto; width: 100%; height: 42vh; min-height: 250px; max-height: 420px; }
  .connexion-video { object-position: 50% 40%; }
  .connexion-voile {
    background:
      linear-gradient(180deg, rgba(7, 7, 11, .4) 0%, rgba(7, 7, 11, .28) 45%, rgba(8, 8, 14, .86) 84%, #08080e 100%),
      radial-gradient(ellipse 100% 90% at 50% 40%, transparent 50%, rgba(4, 4, 8, .7) 100%);
  }
  .connexion-halo { top: 42vh; right: 50%; width: 420px; height: 420px; transform: translate(50%, -50%); animation-name: connexion-halo-mobile; }
  .connexion-carte { width: auto; margin: -72px 16px 24px; padding: 28px 22px; }
  .connexion-titre { font-size: clamp(44px, 14vw, 64px); }
  .connexion-oeil { width: 44px; height: 44px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .connexion-carte, .connexion-carte::before, .connexion-halo, .connexion-point { animation: none; }
  .connexion-bouton, .connexion-bouton::before, .connexion-bouton::after, .connexion-bouton .connexion-fleche, .connexion-saisie input, .connexion-champ > .connexion-saisie { transition: none; }
  .connexion-bouton:hover, .connexion-bouton:active { transform: none; }
  .connexion-bouton:hover::after { transform: translateX(-100%); }
  .connexion-bouton:hover .connexion-fleche { transform: none; }
}

@media (max-width: 1180px) {
  .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .activity-dashboard { grid-template-columns: 1fr; }
  .activity-summary { grid-template-columns: auto auto 1fr; align-items: end; }
  .activity-summary strong { margin: 0; }
  .activity-stats { grid-column: auto; }
  .budget-card { min-height: 100px; }
  .agent-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quiz-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .cards.two { grid-template-columns: minmax(0, 1fr); }
  .quiz-form { grid-template-columns: 1fr; }
  .poll-layout, .poll-answer-grid, .poll-options-grid { grid-template-columns: 1fr; }
  .poll-layout > .poll-composer, .poll-layout > .poll-preview { grid-column: 1 / -1; }
  .poll-preview { position: static; }
  .poll-history article { grid-template-columns: 1fr auto; }
  .poll-history article a { grid-column: 1 / -1; }
  .credential-result { grid-template-columns: 1fr 1fr; }
  .credential-result > div, .credential-result p { grid-column: 1 / -1; }
  .member-preview-grid { grid-template-columns: 1fr; }
  .moderation-control-center { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .health-grid { grid-template-columns: 1fr; }
  .dm-compose-form { grid-template-columns: 1fr; }
  .dm-compose-form > button { grid-column: 1; }
}

@media (max-width: 620px) {
  h1 { font-size: clamp(26px, 3.2vw, 40px); }
  .eyebrow { margin-bottom: 16px; font-size: var(--text-xs) !important; letter-spacing: .2em; }
  .eyebrow::after { display: none; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-dashboard, .orchestration-dashboard { padding: 19px; grid-template-columns: 1fr; }
  .activity-summary { grid-template-columns: 1fr; }
  .activity-stats article { padding: 10px 12px; }
  .activity-stats strong { font-size: var(--text-lg); }
  .orchestration-repartition { gap: var(--space-5); }
  .task-donut { width: 104px; }
  .budget-card { min-height: 0; }
  .agent-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-overview article:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .agent-grid { grid-template-columns: 1fr; }
  .agent-card-head { grid-template-columns: 42px minmax(0, 1fr); }
  .agent-state { grid-column: 1 / -1; justify-self: start; }
  .agent-card-metrics { gap: var(--space-1) var(--space-3); }
  .agent-flow { justify-content: flex-start; }
  .agent-master-control { grid-template-columns: 1fr; }
  .status-strip > div { min-height: 58px; padding: var(--space-2) var(--space-3); }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading .text-link { display: none; }
  .studio-card, .wide-section { padding: var(--space-3) var(--space-4); }
  .credential-result { grid-template-columns: 1fr; }
  .credential-result > div, .credential-result p { grid-column: 1; }
  .moderator-actions { display: grid; }
  .moderator-actions button { width: 100%; }
  .field-pair, .sound-upload-form { grid-template-columns: 1fr; }
  .sound-upload-form > * { grid-column: 1; }
  .section-tabs, .log-tabs { align-self: stretch; }
  .actions { padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); gap: var(--space-2); }
  .actions button { flex: 0 0 auto; padding: 0 var(--space-3); }
  .save-state { min-width: 0; }
  .section-head { align-items: center; }
  .section-head > div { min-width: 0; }
  .refresh { align-self: flex-start; }
  .moderation-control-center { grid-template-columns: 1fr 1fr; }
  .warning-member { grid-template-columns: 1fr; }
  .warning-member button { width: 100%; }
  .settings-history li, .health-actions { align-items: stretch; flex-direction: column; }
  .health-actions .health-link { width: 100%; }
  .profile-workspace { min-height: 0; grid-template-columns: 1fr; }
  .profile-directory { border-right: 0; border-bottom: 1px solid var(--line); }
  .profile-options { max-height: 260px; }
  .profile-pagination { align-items: stretch; flex-direction: column; text-align: center; }
  .profile-details { padding: 18px; }
  .profile-detail-head { grid-template-columns: 58px minmax(0, 1fr); }
  .profile-detail-avatar { width: 58px; height: 58px; }
  .profile-detail-head > strong { grid-column: 1 / -1; justify-self: start; }
  .profile-information-grid, .dm-comparison { grid-template-columns: 1fr; }
  .profile-detail-actions { align-items: stretch; flex-direction: column; }
  .profile-detail-buttons { justify-content: stretch; flex-direction: column; }
  .profile-detail-buttons form, .profile-detail-actions button, .dm-send-form > button { width: 100%; }
  .profile-report-grid { grid-template-columns: 1fr; }
  .public-channel-panel { position: static; width: 100%; max-height: none; margin-top: 8px; padding: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.36); }
  .public-channel-tools, .public-channel-list, .public-publish-columns { grid-template-columns: 1fr; }
  .public-channel-list { max-height: min(360px, 52vh); }
  .public-channel-tools > div { display: grid; grid-template-columns: 1fr; }
  .public-channel-tools button { width: 100%; }
  .public-channel-panel-footer, .public-channel-selection, .public-publish-summary { align-items: stretch; flex-direction: column; }
  .public-channel-close { width: 100%; }
  .public-channel-review > div { align-items: flex-start; flex-direction: column; }
}
@media (min-width: 621px) and (max-width: 900px) {
  .agent-overview, .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-master-control { grid-template-columns: 1fr; }
}
.cleanup-form {
  display: grid;
  gap: 18px;
}

.cleanup-confirm {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(255, 96, 118, .3);
  border-radius: 10px;
  background: rgba(255, 96, 118, .08);
  color: var(--text);
}

.cleanup-confirm input {
  width: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #ff6076;
}

.cleanup-form button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.video-upload-form {
  display: grid;
  gap: 18px;
}

.video-upload-form input[type="file"] {
  padding: 12px;
}

.video-upload-form textarea {
  min-height: 100px;
  resize: vertical;
}

.video-post-grid {
  display: grid;
  gap: 12px;
  max-height: 420px;
  overflow-y: auto;
}

.video-post-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.video-post-card > div:first-child {
  display: grid;
  gap: 5px;
}

.video-post-card span,
.video-post-card small {
  color: var(--muted);
}

.video-post-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 720px) {
  .video-post-card,
  .video-post-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Robert Studio visual refresh — presentation only, no behavior changes. */
body {
  background:
    radial-gradient(circle at 78% -10%, rgba(112, 84, 215, .09), transparent 34rem),
    radial-gradient(circle at 18% 110%, rgba(80, 213, 232, .035), transparent 32rem),
    var(--bg);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  display: block;
  background-image: linear-gradient(rgba(255, 255, 255, .012) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .012) 1px, transparent 1px);
  background-size: 42px 42px;
  content: "";
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent 75%);
}

::selection { color: #fff; background: rgba(146, 118, 255, .55); }

nav { gap: 19px; }


.notice, .error {
  padding: 14px 17px;
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}
.notice { background: linear-gradient(90deg, rgba(76, 219, 148, .11), rgba(76, 219, 148, .045)); }
.error { background: linear-gradient(90deg, rgba(255, 113, 128, .11), rgba(255, 113, 128, .045)); }

.status-strip > div,
.activity-dashboard,
.orchestration-dashboard,
.studio-card,
.wide-section,
.health-summary article,
.agent-overview article,
.moderation-control-center article {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .018), transparent 44%),
    var(--surface);
  border-color: var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.dashboard-heading h2 { font-size: var(--text-2xl); letter-spacing: -.025em; }
.section-kicker { color: #aaa0d4; letter-spacing: .13em; }

.studio-card, .wide-section { padding: var(--space-4) var(--space-5); }
.studio-card h2, .wide-section h2 { margin-bottom: var(--space-3); font-size: var(--text-lg); letter-spacing: -.02em; }
.studio-card h2::before, .wide-section h2::before {
  width: 3px;
  height: 22px;
  box-shadow: 0 0 16px rgba(146, 118, 255, .28);
}
.section-head { margin-bottom: var(--space-3); }
.section-head p { max-width: 760px; margin-top: 7px; color: #a8aab8; line-height: 1.55; }

label > span:not(.toggle-copy):not(.toggle-control):not(.membre-identite):not(.membre-fin) { color: #b6b8c5; letter-spacing: .005em; }
input, select, textarea {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  background: rgba(7, 8, 13, .82);
  border-color: rgba(225, 222, 255, .15);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
/* Le textarea garde une hauteur libre : le padding vertical nul ci-dessus
   collerait le texte au bord. */
textarea { padding: var(--space-3); }
input:hover, select:hover, textarea:hover { border-color: rgba(225, 222, 255, .24); }
input:focus, select:focus, textarea:focus {
  background: #0a0b12;
  border-color: rgba(146, 118, 255, .78);
  box-shadow: 0 0 0 3px rgba(146, 118, 255, .13), 0 10px 32px rgba(0, 0, 0, .16);
}
.toggle-field { min-height: 64px; padding: 13px 2px; }
.toggle-control i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.toggle-control input:checked + i { box-shadow: 0 0 18px rgba(146, 118, 255, .22); }
.prominent-help {
  padding: 14px 15px;
  background: linear-gradient(90deg, rgba(93, 215, 232, .09), rgba(93, 215, 232, .025));
  border-radius: 0 9px 9px 0;
}
.advanced-settings { border-top-color: rgba(225, 222, 255, .11); }
.advanced-settings summary { color: #c5c6d0; }

button, .card-action, .refresh {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border-color: rgba(165, 143, 255, .56);
  border-radius: var(--radius-sm);
  /* La borne basse etait #785bdd : le texte sombre du bouton n'y tenait
     que 4.01:1, sous le seuil de lisibilite. Le BAS de chaque bouton
     principal etait donc moins lisible que son haut — un defaut qu'on
     ne voit pas en regardant, parce que le haut, lui, est net.
     Eclaircie a #8468e7 : 4.72:1 sur toute la hauteur. */
  background: linear-gradient(180deg, #ac96ff 0%, #8468e7 100%);
  box-shadow: 0 9px 25px rgba(78, 56, 155, .2), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
button:hover, .card-action:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 13px 30px rgba(78, 56, 155, .26), inset 0 1px 0 rgba(255, 255, 255, .24);
}
button:active, .card-action:active { transform: translateY(0); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #b7a5ff;
  outline-offset: 3px;
}
button.ghost, button.secondary, .refresh {
  background: rgba(255, 255, 255, .025);
  box-shadow: none;
}
button.ghost:hover, button.secondary:hover, .refresh:hover { background: rgba(255, 255, 255, .065); }
.actions {
  padding: 13px 15px;
  background: rgba(15, 17, 24, .92);
  border-radius: 12px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .3);
}

/* Des tuiles de 110 px pour un libellé et une valeur : sur iPhone, les quatre
   de Modération tenaient un écran entier. Elles se lisent d'un regard. */
.health-summary article,
.agent-overview article,
.moderation-control-center article {
  min-height: 0;
  padding: var(--space-3) var(--space-4);
  position: relative;
  overflow: hidden;
}
.health-summary article::after,
.agent-overview article::after,
.moderation-control-center article::after {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(146, 118, 255, .72), transparent 72%);
  content: "";
}
.health-summary article:nth-child(1)::after { background: linear-gradient(90deg, var(--green), transparent 72%); }
.health-summary article:nth-child(2)::after { background: linear-gradient(90deg, var(--amber), transparent 72%); }
.health-summary article:nth-child(3)::after { background: linear-gradient(90deg, var(--danger), transparent 72%); }
.health-summary article:nth-child(4)::after { background: linear-gradient(90deg, var(--violet), transparent 72%); }
.health-summary strong { font-size: var(--text-lg); }

/* --- STATUS ROW ---------------------------------------------------------
   Chaque ligne d'etat etait une carte complete : 66 px de haut, 9 px de
   gouttiere, bordure, coins arrondis et ombre. Cinq etats occupaient donc
   375 px pour afficher cinq couples libelle/valeur.
   Elles deviennent les lignes d'un meme tableau : une seule bordure autour
   du groupe, des filets de 1 px entre les lignes (obtenus par la gouttiere
   qui laisse voir le fond du conteneur), et deux colonnes des qu'il y a la
   place. La couleur n'est jamais le seul signal : la valeur est ecrite en
   toutes lettres a droite. */
.health-list {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 1100px) {
  .health-list { grid-template-columns: 1fr 1fr; }
  /* Un nombre impair de lignes laissait une demi-case vide au bas du tableau,
     visible comme un rectangle sans contenu. La derniere ligne occupe alors
     toute la largeur. */
  .health-check:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.health-check {
  min-height: 38px;
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: 0;
  border-radius: 0;
  transition: background .18s ease;
}
.health-check:hover { background: var(--surface-2); }
.health-check.ok { box-shadow: inset 2px 0 0 rgba(76, 219, 148, .68); }
.health-check.bad { box-shadow: inset 2px 0 0 rgba(255, 113, 128, .7); }
.health-check > div:last-child { justify-items: end; }
.health-check b { padding: 4px var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-xs); }
.health-check.ok b { border-color: rgba(76, 219, 148, .13); }
.health-check.bad b { border-color: rgba(255, 113, 128, .16); }
.health-check small { color: #c2b9ec; font-size: var(--text-xs); line-height: 1.4; }
.health-notices p { border-radius: 10px; }

/* --- MEMBER ROW ---------------------------------------------------------
   Studio avait CINQ facons de dessiner « une personne dans une liste », pour
   le meme geste : les fiches de Profils membres (58 px), les cases a cocher
   du chat prive (62 px et aucun visage), celles du message general (46 px),
   les blocs d'exception du Top Robert — qui n'avaient aucune regle du tout,
   .member-card n'existant nulle part dans cette feuille, d'ou 114 px de
   blocs sans mise en forme — et un jeu de regles .always-reply-* dont le
   balisage avait disparu depuis des mois.

   Une seule ligne desormais : avatar 30 px, pseudo lisible a 13 px,
   identifiant en micro-libelle, etat a droite. Filets de 1 px entre les
   lignes plutot que des cartes espacees, deux colonnes des qu'il y a la
   place. On reconnait un membre a sa photo avant son pseudo : l'avatar n'est
   pas decoratif, c'est l'information principale de la ligne. */
.liste-membres {
  display: grid;
  gap: 1px;
  max-height: 340px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden auto;
}
.membre-ligne {
  min-height: 40px;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease;
}
.membre-ligne:hover { background: var(--surface-2); }
.membre-ligne.selectionnee, .membre-ligne:has(input:checked) { background: var(--violet-soft); box-shadow: inset 2px 0 0 var(--violet); }
.membre-ligne[hidden] { display: none; }
.membre-ligne input[type="checkbox"], .membre-ligne input[type="radio"] {
  width: 16px;
  min-height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--violet);
}
.membre-avatar {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: block;
  object-fit: cover;
  border-radius: 50%;
  background: var(--surface-3);
}
.membre-identite { min-width: 0; flex: 1 1 auto; display: grid; }
.membre-identite strong, .membre-identite small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membre-identite strong { font-size: var(--text-sm); font-weight: 650; }
.membre-identite small { color: var(--text-secondary); font-size: var(--text-2xs); }
.membre-fin {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
}
.membre-fin form { margin: 0; }
.membre-etat { padding: 2px var(--space-2); border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.membre-etat.actif { color: var(--violet-strong); border-color: var(--violet); }
@media (min-width: 1100px) {
  .liste-membres.deux-colonnes { grid-template-columns: 1fr 1fr; }
  /* Un nombre impair de lignes laissait une demi-case vide au bas du tableau. */
  .liste-membres.deux-colonnes > .membre-ligne:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Sur telephone, la ligne devient une vraie cible tactile. */
@media (max-width: 900px) {
  .membre-ligne { min-height: var(--row-h); }
}

/* Selection multiple : recherche, avatars, cases, compteur, selection
   visible. Repliable — mais ouvert par defaut : replier l'etape de selection
   la ferait manquer. */
.selecteur-membres { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.selecteur-membres > summary {
  min-height: var(--control-h);
  padding: 0 var(--space-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}
.selecteur-membres > summary strong { color: var(--violet-strong); font-size: var(--text-xs); font-weight: 650; }
.selecteur-corps { padding: 0 var(--space-3) var(--space-3); display: grid; gap: var(--space-2); }
.liste-membres.courte { max-height: 220px; }
.selecteur-liste { display: grid; gap: var(--space-2); }
.selecteur-outils { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.selecteur-outils label { flex: 1 1 220px; margin: 0; }
.selecteur-outils > div { display: flex; align-items: center; gap: var(--space-2); }
.selecteur-outils .case-en-ligne { flex: 0 0 auto; min-height: var(--control-h-sm); display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-xs); white-space: nowrap; }
.selecteur-outils .case-en-ligne input { width: 16px; min-height: 16px; margin: 0; accent-color: var(--violet); }
.selecteur-aide { margin: 0; color: var(--text-secondary); font-size: var(--text-xs); }
/* « Il n'y a rien ici » : une seule facon de le dire dans tout Studio. Les
   noms restent distincts parce que la SEMANTIQUE l'est — une ligne de tableau
   ne peut pas etre un paragraphe, ni un element de liste — mais l'apparence
   est commune. Un etat vide doit se lire comme un etat, pas comme un
   chargement qui n'a pas abouti. */
.etat-vide,
.moderation-empty,
.logs-empty-filter,
.settings-search-empty,
.agent-empty-row,
.dm-history-empty {
  margin: 0;
  padding: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
}

.table-scroll {
  border: 1px solid var(--line);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(146, 118, 255, .35) transparent;
}
.section-tabs, .log-tabs { padding: 5px; border-radius: 10px; }
.section-tabs button, .log-tabs button { border-radius: 7px; box-shadow: none; }
.section-tabs button.active, .log-tabs button.active { background: linear-gradient(180deg, rgba(146, 118, 255, .18), rgba(146, 118, 255, .09)); }



@media (max-width: 620px) {
  body::before { opacity: .6; }
  .studio-card, .wide-section { padding: var(--space-4); border-radius: var(--radius-md); }
  .health-summary article, .agent-overview article, .moderation-control-center article { padding: var(--space-2) var(--space-3); }
  /* Une ligne d'etat tient sur un seul rang meme a 390 px : un libelle court
     a gauche, sa valeur a droite. L'empiler verticalement doublait sa hauteur
     pour ne rien gagner en lisibilite. */
  .health-check { min-height: var(--row-h); }
  /* Cible tactile sur telephone : 44 px. La taille VISUELLE peut rester
     plus petite — c'est la ZONE que le doigt doit trouver. Les plis, les
     liens-commandes et les onglets sont des actions au meme titre que les
     boutons ; ils faisaient 30 a 36 px. */
  button, .card-action, .refresh, summary, a.text-link, a.ghost, .section-tabs button, .log-tabs button, .poll-toggles label, .selecteur-outils .case-en-ligne { min-height: var(--row-h); }
  /* Les petits boutons carres — la croix d'un son, le menu, la fermeture —
     doivent rester petits a l'ecran. On etend leur zone sensible autour
     d'eux, sans toucher a leur dessin. */
  .icon-button { position: relative; }
  .icon-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--row-h);
    height: var(--row-h);
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  /* Ces trois-la portent leur propre hauteur ailleurs dans la feuille, avec
     une specificite superieure : on les nomme explicitement plutot que de
     jouer au plus fort avec !important. */
  .selecteur-membres > summary,
  .quiz-form button { min-height: var(--row-h); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Paramètres — refonte du 17/09.
   Trois niveaux de boîtes s'emboîtaient : la catégorie, la carte, l'encadré.
   Sur iPhone, chaque niveau reprenait 16 px de marge de chaque côté, et un
   champ ne gardait que 270 px sur 390. La catégorie devient un TITRE posé sur
   la page, ses cartes se rangent par rangées. */
.settings-search {
  width: min(100%, 520px);
  max-width: none;
  margin: 0;
}

.settings-layout {
  display: grid;
  gap: var(--space-8);
}

.settings-category { min-width: 0; }

.settings-category:not(:has([data-settings-card]:not([hidden]))) { display: none; }

.settings-category-heading {
  margin-bottom: var(--space-3);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.settings-category-heading > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #d7ceff;
  background: linear-gradient(145deg, rgba(146, 118, 255, .22), rgba(146, 118, 255, .08));
  border: 1px solid rgba(146, 118, 255, .28);
  border-radius: 10px;
  font: 700 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}

.settings-category-heading h2 {
  margin: 0;
  font-size: var(--text-xl);
  letter-spacing: -.02em;
}

.settings-category-heading p {
  max-width: 760px;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.settings-category-badge {
  padding: 4px 10px;
  color: var(--text-secondary);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 650;
  white-space: nowrap;
}

.settings-category-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-3);
}
.settings-category-grid > .studio-card { min-width: 0; }
.settings-category-grid .system-status { min-height: 48px; }

@media (max-width: 900px) {
  .settings-category-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .voice-connect-form { grid-template-columns: 1fr; }
  .voice-connect-form button { width: 100%; }
  .voice-control-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .voice-control-actions form, .voice-control-actions button { width: 100%; }
  .settings-search { width: 100%; }
  .settings-layout { gap: var(--space-6); }
  .settings-category-heading { grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: var(--space-2) var(--space-3); }
  .settings-category-heading > span { width: 30px; height: 30px; border-radius: 8px; }
  .settings-category-heading h2 { font-size: var(--text-lg); }
  .settings-category-heading p { font-size: var(--text-xs); }
  .settings-category-badge { grid-column: 2; justify-self: start; }
  .settings-category-grid { gap: var(--space-2); }
}

/* Texte réservé aux lecteurs d'écran. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Habillage des salons */
.habillage-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.habillage-style { display: grid; gap: 3px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; margin: 0; }
/* Le cadre doit suivre le clic sans attendre le serveur.
   La classe .actif rendue cote serveur sert de filet aux navigateurs sans
   :has(). La ou :has() existe, on la neutralise : sinon deux cartes
   paraissent selectionnees en meme temps, l'ancienne et la nouvelle. */
.habillage-style.actif { border-color: var(--violet); background: var(--violet-soft); }
@supports selector(:has(*)) {
  .habillage-style.actif { border-color: var(--line); background: var(--surface-2); }
  .habillage-style:has(input:checked) { border-color: var(--violet); background: var(--violet-soft); }
}
.habillage-style:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.habillage-style input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.habillage-style strong { font-size: var(--text-lg); }
.habillage-style small { color: var(--muted); font-size: var(--text-xs); }
.habillage-separateur { max-width: 260px; }
.habillage-table { width: 100%; border-collapse: collapse; min-width: 40rem; }
.habillage-table th, .habillage-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.habillage-table thead th { font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.habillage-groupe th { background: var(--surface-2); font-size: var(--text-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.habillage-case { width: 70px; }
@media (max-width: 900px) {
  .habillage-case { padding: 0; }
  .habillage-case input[type="checkbox"] { min-height: var(--row-h); }
}
.habillage-avant { color: var(--muted); }
.habillage-apres { font-size: var(--text-lg); }
.habillage-emoji input { width: 72px; min-height: 34px; padding: 4px 8px; text-align: center; }
.habillage-refuse { opacity: .5; }
.habillage-alerte { color: var(--danger); font-size: var(--text-xs); margin-left: 8px; }
.habillage-inchange { color: var(--muted); font-size: var(--text-xs); margin-left: 8px; }
.habillage-rapport { margin-bottom: 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; }
.habillage-rapport ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: var(--text-sm); }

/* Liste des membres : on reconnait un visage avant un pseudo, surtout quand
   celui-ci est ecrit en police stylisee. */

/* ==========================================================================
   BARRE DU HAUT ET MENU DÉROULANT — refonte du 16/09

   La barre latérale fixe mangeait 284 px de largeur sur chaque page et
   devenait un tiroir sur téléphone. Elle laisse la place à une barre du haut :
   le menu descend au clic sur « ROBERT STUDIO », se ferme au clic en dehors,
   et la recherche ⌘K trouve une page en deux touches.

   Le menu est un <details> : sans JavaScript, il s'ouvre et donne accès à
   toutes les pages. Les icônes sont des MASQUES colorés (--icone), parce que
   les <img> de Studio, blanchies par un filtre, ne prennent aucune couleur.
   ========================================================================== */
@keyframes menu-descend {
  from { opacity: 0; transform: translateY(-10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.studio-topbar {
  position: sticky;
  z-index: 40;
  top: 12px;
  width: min(1360px, calc(100% - 32px));
  min-height: 64px;
  margin: 12px auto 0;
  padding: 8px 10px 8px 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  background: linear-gradient(180deg, rgba(26, 23, 46, .84), rgba(13, 13, 24, .8));
  border: 1px solid rgba(166, 142, 255, .17);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.studio-topbar [hidden], .studio-menu [hidden] { display: none !important; }
/* La barre reste collée en haut de l'écran : un saut vers une section doit
   s'arrêter sous elle, pas derrière. */
html { scroll-padding-top: 96px; }
.studio-topbar summary { min-height: 0; list-style: none; }
.studio-topbar summary::-webkit-details-marker { display: none; }

/* Icônes colorables : la couleur vient de « color ». */
.nav-icon, .nav-label-icon, .nav-chevron, .topbar-chevron-icon, .menu-settings-icon, .menu-search-icon,
.topbar-search-icon, .menu-footer-icon, .menu-footer-chevron, .account-icon, .topbar-icon, .notifications-vide-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}

/* Marque et déclencheur du menu */
.studio-menu-details { position: relative; }
.topbar-brand {
  padding: 4px 8px 4px 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  transition: background .18s ease;
}
.topbar-brand:hover { background: rgba(255, 255, 255, .04); }
.topbar-avatar, .menu-avatar { position: relative; flex: 0 0 auto; width: 40px; height: 40px; }
.menu-avatar { width: 48px; height: 48px; }
.topbar-avatar img, .menu-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 18%;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
}
.presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  background: var(--danger);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #100f1c;
}
.presence.online { background: var(--green); }
.topbar-wordmark {
  color: var(--text);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.topbar-wordmark span { color: #a894ff; }
.topbar-chevron {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(146, 118, 255, .22);
  border: 1px solid rgba(166, 142, 255, .4);
  border-radius: 50%;
  transition: transform .22s ease, background .22s ease;
}
.topbar-chevron-icon { width: 16px; height: 16px; }
.studio-menu-details[open] .topbar-chevron { transform: rotate(180deg); background: rgba(146, 118, 255, .36); }
/* Petite flèche qui relie le menu à la barre. */
.studio-menu-details[open] > .topbar-brand::after {
  content: "";
  position: absolute;
  z-index: 51;
  top: calc(100% + 8px);
  left: 26px;
  width: 14px;
  height: 14px;
  background: #1a1830;
  border-top: 1px solid rgba(166, 142, 255, .28);
  border-left: 1px solid rgba(166, 142, 255, .28);
  transform: rotate(45deg);
}

/* Recherche de la barre : ouvre le menu sur sa recherche */
.topbar-search, .topbar-search:hover {
  justify-self: center;
  width: min(480px, 100%);
  min-height: 44px;
  padding: 0 8px 0 14px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: var(--text-md);
  font-weight: 400;
  background: rgba(6, 6, 14, .55);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  transform: none;
}
.topbar-search:hover { color: var(--text-secondary); border-color: rgba(166, 142, 255, .38); }
.topbar-search-label { flex: 1; text-align: left; }
.raccourci {
  padding: 4px 7px;
  color: var(--text-secondary);
  font: 600 11px/1 "Space Grotesk", sans-serif;
  white-space: nowrap;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
}

/* Actions de droite : thème, notifications, compte */
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 6px; }
.topbar-actions form { margin: 0; }
.topbar-icon-button, .topbar-theme button, .topbar-theme button:hover {
  position: relative;
  width: 44px;
  min-width: 0;
  height: 44px;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: none;
  filter: none;
  transform: none;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.topbar-icon-button:hover, .topbar-theme button:hover, .topbar-notifications[open] .topbar-icon-button {
  color: var(--text);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(166, 142, 255, .42);
}
.topbar-icon { width: 20px; height: 20px; }
.cloche-point {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 9px;
  height: 9px;
  background: var(--violet-strong);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #15132a, 0 0 12px rgba(166, 142, 255, .8);
}
.topbar-notifications { position: relative; }
.notifications-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  right: -54px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(520px, calc(100dvh - 110px));
  overflow-y: auto;
  background: linear-gradient(180deg, #1a182f, #0c0c16);
  border: 1px solid rgba(166, 142, 255, .22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: menu-descend .18s ease-out;
}
.notifications-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  background: #19172d;
  border-bottom: 1px solid var(--line);
}
.notifications-head strong { font-size: var(--text-lg); }
.notifications-head span { color: var(--muted); font-size: var(--text-xs); }
.notifications-liste { margin: 0; padding: 6px; display: grid; gap: 2px; list-style: none; }
.notification {
  padding: 10px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 10px;
}
.notification:hover { background: rgba(255, 255, 255, .05); }
.notification-point { width: 8px; height: 8px; margin-top: 6px; background: var(--line-strong); border-radius: 50%; }
.notification.a-voir .notification-point { background: var(--violet-strong); }
.notification.niveau-attention.a-voir .notification-point { background: var(--amber); }
.notification.niveau-alerte.a-voir .notification-point { background: var(--danger); box-shadow: 0 0 10px rgba(255, 113, 128, .6); }
.notification-texte { min-width: 0; display: grid; gap: 3px; }
.notification-texte strong { color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.notification:not(.a-voir) .notification-texte strong { font-weight: 500; }
.notification-texte span { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.notification time { color: var(--muted); font-size: var(--text-2xs); white-space: nowrap; }
.notifications-vide { margin: 0; padding: 22px 18px; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--text-sm); }
.notifications-vide-icon { width: 20px; height: 20px; color: var(--green); }

/* Compteur d'un lien du menu (messages non lus) */
.nav-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 700;
  background: linear-gradient(180deg, #8f74ff, #6c4ff0);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(108, 79, 240, .4);
}

/* Compte */
.topbar-account { position: relative; justify-self: end; }
.topbar-account-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background .18s ease;
}
.topbar-account-button:hover, .topbar-account[open] .topbar-account-button { background: rgba(255, 255, 255, .06); }
.account-popover {
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  right: 0;
  width: 240px;
  padding: 8px;
  display: grid;
  gap: 2px;
  background: #17162b;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: menu-descend .18s ease-out;
}
.compte-etat {
  margin: 0 0 4px;
  padding: 8px 10px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--line);
}
.compte-etat .presence { position: static; box-shadow: none; }
.account-popover form { margin: 0; }
.account-theme { display: none; }
.account-popover a, .account-popover button, .account-popover button:hover {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 11px;
  color: var(--text);
  font-size: var(--text-md);
  font-weight: 400;
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 9px;
  box-shadow: none;
  filter: none;
  transform: none;
}
.account-popover a:hover, .account-popover button:hover { background: rgba(255, 255, 255, .06); }
.account-icon { color: var(--muted); }

/* Le menu */
.studio-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 14px);
  left: 0;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100dvh - 110px);
  padding: 14px 12px 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Opaque : à .97, le texte de la page restait lisible à travers le menu. */
  background: linear-gradient(180deg, #1a182f, #0c0c16);
  border: 1px solid rgba(166, 142, 255, .22);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform-origin: top left;
  animation: menu-descend .22s cubic-bezier(.2, .8, .2, 1);
  scrollbar-width: thin;
  scrollbar-color: rgba(166, 142, 255, .3) transparent;
}
/* Assombrit la page derrière le menu ; un clic dessus le ferme. */
body.menu-ouvert::after {
  content: "";
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgba(4, 4, 10, .42);
  animation: menu-descend .2s ease-out;
}

.menu-head { padding: 2px 2px 14px; display: flex; align-items: center; gap: 10px; }
.menu-identity {
  min-width: 0;
  flex: 1;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 14px;
}
.menu-identity:hover { background: rgba(255, 255, 255, .04); }
.menu-identity-copy { min-width: 0; display: grid; gap: 3px; }
.menu-identity-copy strong { font-size: var(--text-lg); }
.menu-identity-copy span { overflow: hidden; color: var(--muted); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
.menu-settings {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-strong);
  border-radius: 13px;
}
.menu-settings:hover { color: var(--text); border-color: rgba(166, 142, 255, .45); }
.menu-settings-icon { width: 20px; height: 20px; }

.menu-search {
  height: 46px;
  margin: 0 2px 12px;
  padding: 0 8px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  background: rgba(6, 6, 14, .62);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.menu-search:focus-within { border-color: rgba(166, 142, 255, .6); box-shadow: 0 0 0 3px var(--focus-ring); }
.menu-search input[type="search"], .menu-search input[type="search"]:hover, .menu-search input[type="search"]:focus {
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  flex: 1;
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}
.menu-search input::placeholder { color: var(--muted); }

.menu-navigation { display: grid; gap: 4px; }
.menu-navigation .nav-section { margin-top: 6px; padding-top: 10px; display: grid; gap: 2px; border-top: 1px solid var(--line); }
.menu-navigation .nav-section-static { margin-top: 0; padding-top: 0; border-top: 0; }
.menu-navigation .nav-label {
  margin: 0;
  padding: 4px 12px 6px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #8f90a7;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-label-icon { width: 16px; height: 16px; color: var(--violet-strong); }
.menu-navigation .nav-group-links { margin: 0; padding: 0; display: grid; gap: 2px; list-style: none; }
.menu-navigation .nav-link {
  position: relative;
  min-height: 42px;
  padding: 0 10px 0 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #dddce9;
  font-size: var(--text-md);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 11px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.menu-navigation .nav-link:hover, .menu-navigation .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .055); }
.menu-navigation .nav-link:focus-visible { outline: 2px solid #b7a5ff; outline-offset: -2px; }
.nav-icon { width: 20px; height: 20px; color: var(--nav-accent, var(--text-secondary)); }
.nav-link-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chevron { width: 16px; height: 16px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.nav-link:hover .nav-chevron, .nav-link:focus-visible .nav-chevron, .nav-link.active .nav-chevron { opacity: 1; transform: none; }
.menu-navigation .nav-link.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(146, 118, 255, .36), rgba(146, 118, 255, .12));
  border-color: rgba(166, 142, 255, .48);
  box-shadow: 0 8px 24px rgba(92, 64, 220, .24);
}
.menu-navigation .nav-link.active::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -1px;
  width: 3px;
  background: var(--violet-strong);
  border-radius: 3px;
}
.menu-navigation .nav-link.active .nav-icon, .menu-navigation .nav-link.active .nav-chevron { color: #fff; }
/* Couleur propre à chaque page, comme sur la maquette. */
:is(.nav-link, .page-header)[data-page="accueil"] { --nav-accent: #c9b8ff; }
:is(.nav-link, .page-header)[data-page="agents"] { --nav-accent: #ddd8ff; }
:is(.nav-link, .page-header)[data-page="chat"] { --nav-accent: #c38bff; }
:is(.nav-link, .page-header)[data-page="messages-prives"] { --nav-accent: #ff76b8; }
:is(.nav-link, .page-header)[data-page="personnalite"] { --nav-accent: #8aa9ff; }
:is(.nav-link, .page-header)[data-page="toprobert"] { --nav-accent: #ffc94d; }
:is(.nav-link, .page-header)[data-page="voix"] { --nav-accent: #e6e4f4; }
:is(.nav-link, .page-header)[data-page="soundboard"] { --nav-accent: #5ee0e6; }
:is(.nav-link, .page-header)[data-page="membres"] { --nav-accent: #ff85be; }
:is(.nav-link, .page-header)[data-page="quiz"] { --nav-accent: #f090ff; }
:is(.nav-link, .page-header)[data-page="sondages"] { --nav-accent: #e6e4f4; }
:is(.nav-link, .page-header)[data-page="videos"] { --nav-accent: #79bcff; }
:is(.nav-link, .page-header)[data-page="moderation"] { --nav-accent: #6fc4ff; }
:is(.nav-link, .page-header)[data-page="nettoyage"] { --nav-accent: #ff8190; }
:is(.nav-link, .page-header)[data-page="logs"] { --nav-accent: #a8c7ff; }
:is(.nav-link, .page-header)[data-page="moderateurs"] { --nav-accent: #ddd8ff; }
:is(.nav-link, .page-header)[data-page="parametres"] { --nav-accent: #7fb2ff; }
:is(.nav-link, .page-header)[data-page="habillage"] { --nav-accent: #62e6c9; }
:is(.nav-link, .page-header)[data-page="sante"] { --nav-accent: #5ee0c0; }
.menu-empty { margin: 10px 12px; color: var(--muted); font-size: var(--text-sm); }

.menu-footer {
  margin-top: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  text-decoration: none;
  background: linear-gradient(90deg, rgba(146, 118, 255, .22), rgba(93, 215, 232, .05));
  border: 1px solid rgba(166, 142, 255, .3);
  border-radius: 14px;
}
.menu-footer:hover { border-color: rgba(166, 142, 255, .56); }
.menu-footer-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #7c5cff, #a98fff);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(124, 92, 255, .45);
}
.menu-footer-icon { width: 20px; height: 20px; color: #fff; }
.menu-footer-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.menu-footer-copy strong { font-size: var(--text-md); }
.menu-footer-copy span { color: var(--muted); font-size: var(--text-xs); }
.menu-footer-chevron { width: 16px; height: 16px; margin-right: 7px; color: var(--text-secondary); border-radius: 50%; outline: 1px solid var(--line-strong); outline-offset: 7px; }

/* Sur écran tactile, pas de survol : le chevron reste visible. */
@media (hover: none) {
  .nav-chevron { opacity: .55; transform: none; }
}

@media (max-width: 620px) {
  .studio-topbar {
    top: 8px;
    width: calc(100% - 16px);
    min-height: 58px;
    margin-top: 8px;
    padding: 6px 6px 6px 6px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 6px;
    border-radius: 16px;
  }
  .studio-menu-details { position: static; }
  .topbar-avatar { width: 36px; height: 36px; }
  .topbar-wordmark { font-size: 20px; }
  .topbar-search, .topbar-search:hover { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .topbar-search-label, .topbar-search .raccourci, .menu-search .raccourci { display: none; }
  .topbar-account-button { width: 40px; height: 40px; }
  .topbar-actions { gap: 4px; }
  .topbar-icon-button { width: 40px; height: 40px; }
  /* Pas la place pour quatre boutons : le thème passe dans le menu du compte. */
  .topbar-theme { display: none; }
  .account-theme { display: block; }
  .notifications-popover { position: fixed; top: 74px; right: 8px; left: 8px; width: auto; }
  .studio-menu { top: calc(100% + 10px); right: 0; width: auto; max-height: calc(100dvh - 86px); }
  .studio-menu-details[open] > .topbar-brand::after { left: 20px; top: calc(100% - 2px); }
  .menu-navigation .nav-link { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .studio-menu, .account-popover, body.menu-ouvert::after { animation: none; }
  .topbar-chevron, .nav-chevron, .menu-search { transition: none; }
}

/* ==========================================================================
   PAGES — refonte du 17/09

   La barre du haut porte déjà l'identité, l'état du service et la navigation.
   Les pages n'ont donc plus à le répéter : chacune s'ouvre sur un en-tête de
   document aligné sur la barre, puis ses blocs, espacés d'un seul pas.
   ========================================================================== */

/* --- En-tête de page ---------------------------------------------------- */
.page-header {
  --nav-accent: var(--violet-strong);
  margin: 0 0 var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.page-header-icone {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--nav-accent);
  background: color-mix(in srgb, var(--nav-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-accent) 30%, transparent);
  border-radius: 15px;
  box-shadow: 0 12px 34px color-mix(in srgb, var(--nav-accent) 14%, transparent);
}
.page-icon {
  width: 24px;
  height: 24px;
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icone) center / contain no-repeat;
  mask: var(--icone) center / contain no-repeat;
}
.page-header-texte { min-width: 0; }
.page-fil {
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-2xs);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-fil a { color: inherit; text-decoration: none; }
.page-fil a:hover { color: var(--text); }
.page-header h1 {
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-transform: none;
}
.page-resume { margin-top: 4px; color: var(--text-secondary); font-size: var(--text-md); line-height: 1.5; }

/* --- Carte d'accueil ------------------------------------------------------
   La bannière d'Obsidian, le nom du panneau depuis le 18/09 : le cristal à
   droite, le titre en deux tons à gauche. Le bot, lui, s'appelle toujours
   Robert et garde son visage dans la barre du haut. */
.accueil-hero {
  position: relative;
  isolation: isolate;
  min-height: 230px;
  padding: var(--space-8) clamp(var(--space-5), 4vw, var(--space-10));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b0c14;
  border: 1px solid rgba(166, 142, 255, .16);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.accueil-hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    var(--arcs-signal) left -40px bottom -60px / 420px 220px no-repeat,
    var(--trame-points) 0 0 / 26px 26px,
    radial-gradient(circle at 72% 30%, rgba(146, 118, 255, .24), transparent 46%);
  opacity: .8;
}
.accueil-visuel {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 auto;
  width: 64%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.accueil-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 12, 20, .92) 0%, rgba(11, 12, 20, .7) 38%, rgba(11, 12, 20, 0) 70%);
  pointer-events: none;
}
.accueil-hero-texte { max-width: 540px; }
.accueil-hero h1 { font-size: clamp(42px, 5vw, 64px); line-height: .95; letter-spacing: .01em; }
.accueil-hero h1 span, .accueil-hero h1 em { color: #f7f7fa; font-style: normal; }
/* « OBSI » argenté, « DIAN » violet, comme sur la maquette. */
.accueil-hero h1 span {
  background: linear-gradient(180deg, #ffffff 15%, #c9cbd8 70%, #9a9db0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accueil-hero h1 em {
  color: var(--violet);
  background: linear-gradient(180deg, #aa92ff 8%, #7254db 68%, #332a67 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.accueil-hero .page-resume { margin-top: var(--space-3); color: #c7c8d4; font-size: var(--text-lg); }

/* --- Liens en forme de bouton ---------------------------------------------
   « Ouvrir Santé Robert » n'avait ni bordure ni fond : sur iPhone, il se lisait
   comme une phrase centrée, pas comme une action. */
a.ghost {
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--text);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
a.ghost:hover { background: rgba(255, 255, 255, .065); border-color: rgba(225, 222, 255, .26); }
.button-row { align-items: center; }

/* --- Plis ------------------------------------------------------------------
   Un <summary> en display:flex perd son triangle : « Voix OpenAI » et « Voix
   Piper » ressemblaient à des titres de rubriques vides. Un chevron dit qu'il
   y a quelque chose à déplier. */
.advanced-settings > summary { justify-content: space-between; gap: var(--space-3); list-style: none; }
.advanced-settings > summary::-webkit-details-marker { display: none; }
.advanced-settings > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 5px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .7;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.advanced-settings[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.advanced-settings > summary:hover { color: var(--text); }

/* L'encadré d'aide écrivait plus gros que le titre de sa carte. */
.prominent-help { font-size: var(--text-sm); line-height: 1.55; }

/* --- Rôles Discord à cocher ------------------------------------------------ */
.choix-roles { min-width: 0; margin: 0 0 var(--space-3); padding: 0; border: 0; }
.choix-roles legend { margin-bottom: var(--space-2); padding: 0; color: #b6b8c5; font-size: var(--text-xs); font-weight: 700; }
.choix-roles-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-role {
  min-height: 34px;
  margin: 0;
  padding: 0 12px 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: var(--text-sm);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.choix-role:hover { border-color: rgba(225, 222, 255, .3); }
.choix-role input { width: 15px; height: 15px; min-height: 15px; margin: 0; padding: 0; flex: 0 0 auto; accent-color: var(--violet); box-shadow: none; }
.choix-role-pastille { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--role, #8b8d9c); }
.choix-role strong { font-weight: 600; }
.choix-role:has(input:checked) { color: var(--text); background: var(--violet-soft); border-color: rgba(146, 118, 255, .55); }
.choix-role.disparu strong { color: var(--danger); }
.choix-roles .help { margin-top: var(--space-2); }
/* --- Blocs composés ---------------------------------------------------------- */
.field-pair.champs-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-pair.champs-quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field-pair > div { min-width: 0; }
.automatisations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: start; }
.automatisation { min-width: 0; padding: 0 var(--space-4) var(--space-2); background: rgba(255, 255, 255, .018); border: 1px solid var(--line); border-radius: var(--radius-md); }
.automatisation .toggle-field { border-bottom: 0; }
.automatisation [data-depends-on] { margin-top: 0; }
.moteurs-voix { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-3) var(--space-8); align-items: start; }
.agent-consigne { display: grid; justify-items: start; gap: var(--space-2); }
.agent-consigne label { width: 100%; margin: 0; }

@media (max-width: 1100px) {
  .automatisations { grid-template-columns: minmax(0, 1fr); }
  .field-pair.champs-trois, .field-pair.champs-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .studio { padding-top: var(--space-6); }
  .moteurs-voix { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .studio { padding: var(--space-5) 0 var(--space-8); }
  .studio-form { gap: var(--space-3); }
  .page-header { margin-bottom: var(--space-5); gap: var(--space-3); }
  .page-header-icone { width: 44px; height: 44px; border-radius: 13px; }
  .page-icon { width: 21px; height: 21px; }
  .page-header h1 { font-size: 24px; }
  .page-resume { font-size: var(--text-sm); }
  .accueil-hero { min-height: 196px; padding: var(--space-6) var(--space-5); align-items: flex-end; border-radius: 16px; }
  .accueil-visuel { width: 82%; opacity: .72; }
  .accueil-hero::after { background: linear-gradient(90deg, rgba(11, 12, 20, .9) 0%, rgba(11, 12, 20, .55) 55%, rgba(11, 12, 20, .1) 100%), linear-gradient(180deg, transparent 40%, rgba(11, 12, 20, .8) 100%); }
  .accueil-hero h1 { font-size: 42px; }
  .accueil-hero .page-resume { max-width: 250px; font-size: var(--text-sm); }
  .field-pair.champs-trois, .field-pair.champs-quatre { grid-template-columns: minmax(0, 1fr); }
  .button-row > a.ghost, .button-row > button { flex: 1 1 auto; }
}

/* Un bouton qui suit un pli s'y collait : « Enregistrer la qualité » touchait
   « Voix Piper ». Et un champ qui suit un interrupteur aussi. */
.advanced-settings + button, .advanced-settings + .button-row, .toggle-field + .field-pair { margin-top: var(--space-3); }
/* Dans une paire de champs, c'est la gouttière qui espace, pas la marge du
   libellé : sur iPhone, les deux s'additionnaient en 30 px entre deux champs. */
.field-pair { row-gap: var(--space-3); }
.field-pair > label, .field-pair > div > label:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .automatisation { padding: 0; background: none; border: 0; border-radius: 0; }
  .automatisation + .automatisation { border-top: 1px solid var(--line); }
}

/* Thème clair de Robert Studio — FICHIER GÉNÉRÉ, ne pas modifier à la main.
   Source : src/admin-panel.css. Régénérer : node scripts/generer-theme-clair.mjs
   Les retouches manuelles vont dans src/admin-theme-clair-retouches.css. */
html[data-theme="clair"] {
  --bg: #f3f4f8;
  --surface: #e6e8ef;
  --surface-2: #dde0ea;
  --surface-3: #d4d8e4;
  --surface-raised: #ced3e0;
  --line: rgba(3, 0, 33, 0.09);
  --line-strong: rgba(3, 0, 33, 0.17);
  --text: #040308;
  --text-secondary: #393b4b;
  --muted: #494b5a;
  --violet: #2800c2;
  --violet-soft: rgba(40, 0, 194, 0.13);
  --violet-strong: #2900c2;
  --cyan: #1898aa;
  --green: #24b36c;
  --amber: #b6740c;
  --danger: #c20014;
  --focus-ring: rgba(40, 0, 194, 0.45);
  --shadow-card: 0 16px 44px rgba(0, 0, 0, 0.063);
  --shadow-elevated: 0 22px 70px rgba(0, 0, 0, 0.112);
}
html[data-theme="clair"] {
  background: var(--bg);
}
html[data-theme="clair"] body {
  color: var(--text);
}
html[data-theme="clair"] p,
html[data-theme="clair"] span {
  color: inherit;
}
html[data-theme="clair"] h1 {
  text-shadow: none;
}
html[data-theme="clair"] h2 {
  color: var(--text);
}
html[data-theme="clair"] strong.ok {
  color: var(--green);
}
html[data-theme="clair"] strong.bad {
  color: var(--danger);
}
html[data-theme="clair"] .eyebrow {
  color: #1d182f;
}
html[data-theme="clair"] .eyebrow::before {
  background: var(--violet);
  box-shadow: 0 0 12px var(--violet);
}
html[data-theme="clair"] .eyebrow::after {
  background-color: transparent;
  background-image: repeating-linear-gradient(120deg, #2800c2 0 5px, transparent 5px 9px);
}
html[data-theme="clair"] .notice {
  color: #1ca555;
  border: 1px solid rgba(39, 185, 110, 0.28);
}
html[data-theme="clair"] .error {
  color: #c20013;
  border: 1px solid rgba(194, 0, 20, 0.28);
}
html[data-theme="clair"] .status-strip > div {
  border: 1px solid var(--line);
}
html[data-theme="clair"] .status-strip span:not(.status-dot) {
  color: var(--muted);
}
html[data-theme="clair"] .status-dot {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255, 107, 122, 0.055);
}
html[data-theme="clair"] .status-dot.online {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(70, 216, 141, 0.055);
}
html[data-theme="clair"] .activity-dashboard {
  background: radial-gradient(circle at 72% 15%, rgba(29, 0, 194, 0.16), transparent 34%), var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .activity-summary span,
html[data-theme="clair"] .activity-summary small,
html[data-theme="clair"] .activity-stats span {
  color: var(--muted);
}
html[data-theme="clair"] .activity-chart {
  border-bottom: 1px solid var(--line);
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(0, 0, 0, 0.055) calc(25% - 1px) 25%);
}
html[data-theme="clair"] .activity-area {
  fill: rgba(31, 0, 194, 0.09);
}
html[data-theme="clair"] .activity-path {
  fill: none;
  stroke: url(#robertLine);
  filter: drop-shadow(0 0 5px rgba(43, 0, 194, 0.7));
}
html[data-theme="clair"] .activity-axis {
  color: #878996;
}
html[data-theme="clair"] .activity-stats {
  border: 1px solid var(--line);
  background-color: rgba(242, 243, 248, 0.45);
  background-image: none;
}
html[data-theme="clair"] .activity-stats article {
  border-right: 1px solid var(--line);
}
html[data-theme="clair"] .activity-stats article:last-child {
  border-right: 0;
}
html[data-theme="clair"] .orchestration-dashboard {
  background: linear-gradient(135deg, rgba(29, 0, 194, 0.09), transparent 42%), var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .task-donut {
  background-color: transparent;
  background-image: radial-gradient(circle, var(--surface) 0 52%, transparent 53%), conic-gradient(#1700c2 0 var(--a), #29b276 var(--a) var(--b), #b47b0e var(--b) var(--c), #9d2694 var(--c) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(114, 91, 255, 0.083);
}
html[data-theme="clair"] .task-donut small {
  color: var(--muted);
}
html[data-theme="clair"] .task-legend {
  color: var(--muted);
}
html[data-theme="clair"] .task-legend i.chat {
  background-color: #1700c2;
  background-image: none;
}
html[data-theme="clair"] .task-legend i.moderation {
  background-color: #29b276;
  background-image: none;
}
html[data-theme="clair"] .task-legend i.research {
  background-color: #b47b0e;
  background-image: none;
}
html[data-theme="clair"] .task-legend i.other {
  background-color: #9d2694;
  background-image: none;
}
html[data-theme="clair"] .task-legend b {
  color: #1d1b28;
}
html[data-theme="clair"] .budget-card {
  background-color: rgba(236, 237, 244, 0.7);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.27);
}
html[data-theme="clair"] .budget-card span,
html[data-theme="clair"] .budget-card small {
  color: var(--muted);
}
html[data-theme="clair"] .budget-card a {
  color: #2306bc;
}
html[data-theme="clair"] .text-link {
  color: var(--violet);
}
html[data-theme="clair"] .credential-result {
  background-color: rgba(39, 185, 110, 0.07);
  background-image: none;
  border: 1px solid rgba(39, 185, 110, 0.3);
}
html[data-theme="clair"] .credential-result > div span {
  color: var(--green);
}
html[data-theme="clair"] .credential-result p {
  color: var(--muted);
}
html[data-theme="clair"] .credential-result input[readonly] {
  color: #042011;
  border-color: rgba(39, 185, 110, 0.25);
}
html[data-theme="clair"] .account-state.active {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.1);
  background-image: none;
}
html[data-theme="clair"] .account-state.disabled {
  color: var(--danger);
  background-color: rgba(194, 0, 20, 0.1);
  background-image: none;
}
html[data-theme="clair"] .permission-switch {
  color: var(--muted);
  background-color: rgba(0, 0, 0, 0.04);
  background-image: none;
  border-color: var(--line);
}
html[data-theme="clair"] .permission-switch i {
  background: var(--danger);
}
html[data-theme="clair"] .permission-switch.enabled {
  color: #16ac51;
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
  border-color: rgba(39, 185, 110, 0.22);
}
html[data-theme="clair"] .permission-switch.enabled i {
  background: var(--green);
}
html[data-theme="clair"] .danger-button {
  color: #c20011;
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
  border-color: rgba(194, 0, 20, 0.24);
}
html[data-theme="clair"] .studio-card,
html[data-theme="clair"] .wide-section {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: none;
}
html[data-theme="clair"] .studio-card h2::before,
html[data-theme="clair"] .wide-section h2::before {
  border: 0;
  background: var(--violet);
}
html[data-theme="clair"] .accent-card h2::before {
  background: var(--cyan);
}
html[data-theme="clair"] .danger-card {
  border-color: rgba(194, 0, 20, 0.26);
}
html[data-theme="clair"] .danger-card h2::before {
  background: var(--danger);
}
html[data-theme="clair"] .portrait-card {
  background: var(--surface);
}
html[data-theme="clair"] .glow-card {
  box-shadow: none;
  border-top: 2px solid var(--violet);
}
html[data-theme="clair"] input,
html[data-theme="clair"] select,
html[data-theme="clair"] textarea {
  border: 1px solid var(--line-strong);
  outline: 0;
  color: var(--text);
}
html[data-theme="clair"] .toggle-field {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .toggle-field:last-child {
  border-bottom: 0;
}
html[data-theme="clair"] .toggle-copy small {
  color: var(--muted);
}
html[data-theme="clair"] .toggle-control i {
  background-color: #c5c6cf;
  background-image: none;
}
html[data-theme="clair"] .toggle-control i::after {
  background-color: #202128;
  background-image: none;
}
html[data-theme="clair"] .toggle-control input:checked + i {
  background: var(--violet);
}
html[data-theme="clair"] .toggle-control input:checked + i::after {
  background: white;
}
html[data-theme="clair"] .help {
  color: var(--muted);
}
html[data-theme="clair"] .prominent-help {
  color: #0aa4b8;
  border-left: 3px solid var(--cyan);
}
html[data-theme="clair"] .advanced-settings {
  border-top: 1px solid var(--line);
}
html[data-theme="clair"] .system-status span:not(.status-dot) {
  color: var(--muted);
}
html[data-theme="clair"] .health-link {
  color: var(--text);
}
html[data-theme="clair"] .health-summary article {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .health-summary span,
html[data-theme="clair"] .health-summary small {
  color: var(--muted);
}
html[data-theme="clair"] .settings-history li {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .settings-history li span,
html[data-theme="clair"] .settings-history li small {
  color: var(--muted);
}
html[data-theme="clair"] .settings-history-empty {
  color: var(--muted);
}
html[data-theme="clair"] .health-check span {
  color: var(--muted);
}
html[data-theme="clair"] .health-check b {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.05);
  background-image: none;
}
html[data-theme="clair"] .health-check.ok b {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .health-check.bad b {
  color: #c20019;
  background-color: rgba(194, 0, 20, 0.1);
  background-image: none;
}
html[data-theme="clair"] .health-check b.neutral {
  color: var(--muted);
  background-color: rgba(0, 0, 0, 0.06);
  background-image: none;
}
html[data-theme="clair"] .health-unavailable {
  color: var(--muted);
}
html[data-theme="clair"] .health-notices p {
  color: #060027;
  background-color: rgba(40, 0, 194, 0.09);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.25);
}
html[data-theme="clair"] .agent-overview article {
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .agent-overview span,
html[data-theme="clair"] .agent-overview small {
  color: var(--text-secondary);
}
html[data-theme="clair"] .agent-flow {
  color: var(--muted);
  background-color: rgba(40, 0, 194, 0.055);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.2);
}
html[data-theme="clair"] .agent-flow span,
html[data-theme="clair"] .agent-flow strong {
  color: #341ea4;
  background-color: #e6e7ee;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .agent-flow strong {
  color: white;
  border-color: rgba(40, 0, 194, 0.4);
}
html[data-theme="clair"] .agent-flow i {
  color: var(--violet);
}
html[data-theme="clair"] .agent-master-control {
  border-top: 2px solid var(--violet);
}
html[data-theme="clair"] .agent-master-control p {
  color: var(--muted);
}
html[data-theme="clair"] .agent-master-control .toggle-field {
  border: 0;
}
html[data-theme="clair"] .agent-card {
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .agent-card.enabled {
  border-top: 2px solid var(--green);
}
html[data-theme="clair"] .agent-card.disabled {
  border-top: 2px solid #a7a8b2;
}
html[data-theme="clair"] .agent-card-icon {
  background: var(--violet-soft);
}
html[data-theme="clair"] .agent-card-head p {
  color: var(--muted);
}
html[data-theme="clair"] .agent-state.ok {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.09);
  background-image: none;
}
html[data-theme="clair"] .agent-state.bad {
  color: #c20019;
  background-color: rgba(194, 0, 20, 0.1);
  background-image: none;
}
html[data-theme="clair"] .agent-state.neutral {
  color: var(--muted);
  background-color: rgba(0, 0, 0, 0.055);
  background-image: none;
}
html[data-theme="clair"] .agent-card-metrics small {
  color: var(--text-secondary);
}
html[data-theme="clair"] .agent-rules {
  color: var(--muted);
}
html[data-theme="clair"] .agent-activity th,
html[data-theme="clair"] .agent-activity td {
  border-top: 1px solid var(--line);
}
html[data-theme="clair"] .agent-activity th {
  color: var(--muted);
}
html[data-theme="clair"] .agent-name-pill {
  color: #1e00c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
}
html[data-theme="clair"] .agent-event-state.ok {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .agent-event-state.bad {
  color: var(--danger);
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
}
html[data-theme="clair"] .agent-empty-row {
  border: 0;
}
html[data-theme="clair"] .profile-directory {
  background-color: #edeef3;
  background-image: none;
  border-right: 1px solid var(--line);
}
html[data-theme="clair"] .profile-pagination {
  color: var(--muted);
  background-color: rgba(0, 0, 0, 0.02);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .profile-pagination a {
  color: #2100c2;
}
html[data-theme="clair"] .profile-option {
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
}
html[data-theme="clair"] .profile-option:hover {
  background-color: rgba(0, 0, 0, 0.035);
  background-image: none;
  border-color: var(--line);
}
html[data-theme="clair"] .profile-option.active {
  background-color: rgba(40, 0, 194, 0.11);
  background-image: none;
  border-color: rgba(40, 0, 194, 0.35);
  box-shadow: inset 3px 0 0 var(--violet);
}
html[data-theme="clair"] .profile-detail-avatar,
html[data-theme="clair"] .dm-recipient-avatar {
  background: var(--surface-3);
}
html[data-theme="clair"] .profile-option small {
  color: var(--muted);
}
html[data-theme="clair"] .profile-option em {
  color: #2400c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
}
html[data-theme="clair"] .profile-search-empty {
  color: var(--muted);
}
html[data-theme="clair"] .profile-detail-avatar {
  border: 2px solid rgba(40, 0, 194, 0.45);
}
html[data-theme="clair"] .profile-detail-head > div > span {
  color: var(--violet);
}
html[data-theme="clair"] .profile-detail-head p {
  color: var(--muted);
}
html[data-theme="clair"] .profile-detail-head > strong {
  color: #2100c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.22);
}
html[data-theme="clair"] .profile-metrics > span {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .profile-metrics small {
  color: var(--muted);
}
html[data-theme="clair"] .profile-information-grid > section {
  background-color: rgba(0, 0, 0, 0.018);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .profile-information-grid section > p {
  color: var(--muted);
}
html[data-theme="clair"] .profile-tags span {
  color: #1e00c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
}
html[data-theme="clair"] .profile-tags i {
  color: var(--muted);
}
html[data-theme="clair"] .profile-detail-actions {
  border-top: 1px solid var(--line);
}
html[data-theme="clair"] .profile-detail-actions p {
  color: var(--muted);
}
html[data-theme="clair"] .profile-report {
  background-color: transparent;
  background-image: linear-gradient(135deg, rgba(40, 0, 194, 0.1), rgba(194, 0, 75, 0.04));
  border: 1px solid rgba(40, 0, 194, 0.24);
}
html[data-theme="clair"] .profile-report header span {
  color: var(--violet);
}
html[data-theme="clair"] .profile-report > header > strong {
  color: #2100c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
}
html[data-theme="clair"] .profile-report-grid article {
  background-color: rgba(242, 243, 247, 0.58);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .profile-report-grid p,
html[data-theme="clair"] .profile-report-conclusion {
  color: var(--muted);
}
html[data-theme="clair"] .dm-step {
  color: #1e00c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
}
html[data-theme="clair"] .dm-recipient-preview {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .dm-recipient-preview small {
  color: var(--muted);
}
html[data-theme="clair"] .dm-comparison article {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .dm-comparison article:last-child {
  border-color: rgba(40, 0, 194, 0.3);
}
html[data-theme="clair"] .dm-comparison span {
  color: var(--muted);
}
html[data-theme="clair"] .dm-confirm {
  background-color: rgba(23, 156, 175, 0.05);
  background-image: none;
  border: 1px solid rgba(23, 156, 175, 0.18);
}
html[data-theme="clair"] .dm-confirm input {
  accent-color: var(--violet);
}
html[data-theme="clair"] .public-everyone-option {
  border-color: rgba(194, 125, 0, 0.35);
  background-color: rgba(194, 125, 0, 0.06);
  background-image: none;
}
html[data-theme="clair"] .public-everyone-option small {
  color: #9e7d24;
}
html[data-theme="clair"] .public-media-preview {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .public-media-preview p {
  color: var(--muted);
}
html[data-theme="clair"] .public-media-preview img,
html[data-theme="clair"] .public-media-preview video {
  background-color: #f2f3f7;
  background-image: none;
}
html[data-theme="clair"] .public-channel-picker {
  border: 0;
}
html[data-theme="clair"] .public-channel-picker legend {
  color: #494b56;
}
html[data-theme="clair"] .public-channel-compact {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .public-channel-trigger {
  color: var(--text);
  background-color: #f0f1f6;
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .public-channel-trigger:hover {
  border-color: rgba(40, 0, 194, 0.44);
  background-color: rgba(40, 0, 194, 0.055);
  background-image: none;
}
html[data-theme="clair"] .public-channel-trigger:focus-visible {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(143, 114, 255, 0.066);
  outline: 0;
}
html[data-theme="clair"] .public-channel-trigger-copy small {
  color: var(--muted);
}
html[data-theme="clair"] .public-channel-trigger-copy strong {
  color: #030017;
}
html[data-theme="clair"] .public-channel-trigger-icon {
  color: #2300c2;
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.2);
}
html[data-theme="clair"] .public-channel-picker.is-open .public-channel-trigger {
  border-color: rgba(40, 0, 194, 0.55);
}
html[data-theme="clair"] .public-channel-picker.is-open .public-channel-trigger-icon {
  background-color: rgba(40, 0, 194, 0.18);
  background-image: none;
}
html[data-theme="clair"] .public-channel-chip {
  color: #060027;
  background-color: rgba(40, 0, 194, 0.09);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.18);
}
html[data-theme="clair"] .public-channel-chip.more {
  color: #0ba3b7;
  background-color: rgba(23, 156, 175, 0.07);
  background-image: none;
  border-color: rgba(23, 156, 175, 0.2);
}
html[data-theme="clair"] .public-channel-panel {
  background-color: #eff0f5;
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.42);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.196), 0 0 0 1px rgba(143, 114, 255, 0.033);
}
html[data-theme="clair"] .public-channel-group {
  background-color: rgba(0, 0, 0, 0.018);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .public-channel-group > strong {
  color: var(--muted);
}
html[data-theme="clair"] .public-channel-option {
  background-color: #eff0f5;
  background-image: none;
  border: 1px solid transparent;
}
html[data-theme="clair"] .public-channel-option:hover {
  border-color: rgba(40, 0, 194, 0.25);
}
html[data-theme="clair"] .public-channel-option:has(input:checked) {
  background-color: rgba(40, 0, 194, 0.1);
  background-image: none;
  border-color: rgba(40, 0, 194, 0.38);
}
html[data-theme="clair"] .public-channel-option input {
  accent-color: var(--violet);
}
html[data-theme="clair"] .public-channel-option b {
  color: var(--muted);
}
html[data-theme="clair"] .public-channel-option small {
  color: var(--muted);
}
html[data-theme="clair"] .public-channel-panel-footer {
  border-top: 1px solid var(--line);
}
html[data-theme="clair"] .public-channel-selection strong {
  color: #1e00c2;
}
html[data-theme="clair"] .public-channel-selection span,
html[data-theme="clair"] .public-channel-error {
  color: var(--muted);
}
html[data-theme="clair"] .public-channel-error {
  color: var(--danger);
}
html[data-theme="clair"] .public-channel-review {
  background-color: rgba(40, 0, 194, 0.07);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.2);
}
html[data-theme="clair"] .public-channel-review a {
  color: #2300c2;
}
html[data-theme="clair"] .public-channel-review li {
  color: #050021;
  background-color: rgba(0, 0, 0, 0.045);
  background-image: none;
}
html[data-theme="clair"] .public-channel-review li span {
  color: var(--violet);
}
html[data-theme="clair"] .public-publish-summary strong {
  color: var(--green);
}
html[data-theme="clair"] .public-publish-summary span {
  color: var(--muted);
}
html[data-theme="clair"] .public-publish-columns section {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .public-publish-columns li span,
html[data-theme="clair"] .public-publish-columns p {
  color: var(--muted);
}
html[data-theme="clair"] .dm-history li {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .dm-history span {
  color: var(--muted);
}
html[data-theme="clair"] .dm-history-empty {
  border: 0;
}
html[data-theme="clair"] .dm-status {
  color: var(--muted);
  background-color: rgba(0, 0, 0, 0.05);
  background-image: none;
}
html[data-theme="clair"] .dm-status.sent {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .dm-status.failed {
  color: var(--danger);
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
}
html[data-theme="clair"] .broadcast-settings-line {
  color: #1e00c2;
  background-color: rgba(40, 0, 194, 0.08);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.2);
}
html[data-theme="clair"] .broadcast-review {
  border-color: rgba(40, 0, 194, 0.35);
}
html[data-theme="clair"] .broadcast-settings-form {
  background-color: rgba(0, 0, 0, 0.02);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] button,
html[data-theme="clair"] .card-action,
html[data-theme="clair"] .refresh {
  border: 1px solid rgba(40, 0, 194, 0.42);
  color: #f6e9f3;
}
html[data-theme="clair"] button.ghost,
html[data-theme="clair"] button.secondary,
html[data-theme="clair"] .refresh {
  color: var(--text);
  border-color: var(--line-strong);
}
html[data-theme="clair"] .actions {
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .save-state {
  color: var(--muted);
}
html[data-theme="clair"] form.is-dirty > .actions {
  border-color: rgba(40, 0, 194, 0.42);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.158), 0 0 0 1px rgba(146, 118, 255, 0.066);
}
html[data-theme="clair"] form.is-dirty .save-state {
  color: #2500c2;
}
html[data-theme="clair"] .save-state.ok {
  color: var(--green);
}
html[data-theme="clair"] .save-state.erreur {
  color: var(--danger);
}
html[data-theme="clair"] .champ-invalide input,
html[data-theme="clair"] .champ-invalide select,
html[data-theme="clair"] .champ-invalide textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}
html[data-theme="clair"] .champ-erreur {
  color: var(--danger);
}
html[data-theme="clair"] .metric-row {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .section-head > strong {
  color: var(--violet-strong);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .section-tabs,
html[data-theme="clair"] .log-tabs {
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .section-tabs button,
html[data-theme="clair"] .log-tabs button {
  color: var(--muted);
  background: transparent;
  border: 0;
}
html[data-theme="clair"] .section-tabs button.active,
html[data-theme="clair"] .log-tabs button.active {
  color: var(--text);
  border: 0;
  box-shadow: none;
}
html[data-theme="clair"] .voice-state-card::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--violet), var(--cyan));
}
html[data-theme="clair"] .voice-state-badge {
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
html[data-theme="clair"] .voice-state-badge.ok {
  color: var(--green);
  border-color: rgba(39, 185, 110, 0.35);
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .voice-queue-meter {
  border: 1px solid var(--line-strong);
  background-color: rgba(0, 0, 0, 0.035);
  background-image: none;
}
html[data-theme="clair"] .voice-queue-meter span {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--violet), var(--cyan));
}
html[data-theme="clair"] .voice-queue-line > span {
  color: var(--text-secondary);
}
html[data-theme="clair"] .voice-queue-line > small {
  color: var(--text-secondary);
}
html[data-theme="clair"] .log-card {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .log-head strong {
  color: var(--text);
}
html[data-theme="clair"] .log-head time,
html[data-theme="clair"] .log-meta {
  color: var(--muted);
}
html[data-theme="clair"] .log-text {
  color: #16161b;
}
html[data-theme="clair"] .log-link {
  color: var(--cyan);
}
html[data-theme="clair"] .log-image {
  border: 1px solid var(--line);
}
html[data-theme="clair"] .sound-range-label input {
  accent-color: var(--violet);
}
html[data-theme="clair"] .sound-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .sound-card-head span {
  color: var(--muted);
}
html[data-theme="clair"] .soundboard-command-status {
  border: 1px solid var(--line-strong);
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.025);
  background-image: none;
}
html[data-theme="clair"] .soundboard-command-status strong {
  color: var(--text);
}
html[data-theme="clair"] .soundboard-command-status.pending {
  border-color: rgba(40, 0, 194, 0.38);
  color: #2500c2;
  background-color: rgba(40, 0, 194, 0.08);
  background-image: none;
}
html[data-theme="clair"] .soundboard-command-status.accepted {
  border-color: rgba(39, 185, 110, 0.34);
  color: #1ca555;
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .soundboard-command-status.failed {
  border-color: rgba(194, 0, 20, 0.34);
  color: #c20013;
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
}
html[data-theme="clair"] .icon-button.danger {
  color: #c20016;
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
  border-color: rgba(194, 0, 20, 0.24);
}
html[data-theme="clair"] .poll-toggles label {
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.025);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .poll-toggles input {
  accent-color: var(--violet);
}
html[data-theme="clair"] .poll-preview > span {
  color: var(--violet);
}
html[data-theme="clair"] .poll-preview-answers i {
  color: var(--text);
  background-color: #edeef4;
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .poll-preview small {
  color: var(--muted);
}
html[data-theme="clair"] .poll-history article {
  background-color: rgba(0, 0, 0, 0.02);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .poll-history article span,
html[data-theme="clair"] .poll-history article a {
  color: var(--muted);
}
html[data-theme="clair"] .poll-history article a {
  color: #2400c2;
}
html[data-theme="clair"] .poll-status {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: none;
}
html[data-theme="clair"] .poll-status.sent {
  color: var(--green);
  background-color: rgba(39, 185, 110, 0.08);
  background-image: none;
}
html[data-theme="clair"] .poll-status.error {
  color: #c20017;
  background-color: rgba(194, 0, 20, 0.08);
  background-image: none;
}
html[data-theme="clair"] .protected-member {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .protected-member span {
  color: var(--muted);
}
html[data-theme="clair"] .protected-add {
  border-top: 0;
}
html[data-theme="clair"] .command-checklist {
  border: 0;
}
html[data-theme="clair"] .command-checklist legend {
  color: var(--muted);
}
html[data-theme="clair"] .command-checklist label {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .command-checklist label:last-child {
  border-bottom: 0;
}
html[data-theme="clair"] .command-checklist input[type="checkbox"] {
  accent-color: var(--violet);
}
html[data-theme="clair"] .moderation-history article {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .moderation-history time,
html[data-theme="clair"] .moderation-history span {
  color: var(--muted);
}
html[data-theme="clair"] .moderation-history p {
  color: var(--text);
}
html[data-theme="clair"] .safety-list p {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .safety-list p:last-child {
  border-bottom: 0;
}
html[data-theme="clair"] .safety-list span {
  color: var(--muted);
}
html[data-theme="clair"] .moderation-control-center article {
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .moderation-control-center span,
html[data-theme="clair"] .moderation-control-center small {
  color: var(--muted);
}
html[data-theme="clair"] .moderation-ladder {
  background-color: rgba(40, 0, 194, 0.08);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.24);
}
html[data-theme="clair"] .moderation-ladder span {
  color: #381ca6;
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .warning-member {
  background-color: #edeef3;
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .warning-member span,
html[data-theme="clair"] .warning-member small {
  color: var(--muted);
}
html[data-theme="clair"] .variable-list code {
  color: #2500c2;
  background-color: rgba(40, 0, 194, 0.08);
  background-image: none;
  border: 1px solid rgba(40, 0, 194, 0.32);
}
html[data-theme="clair"] .variable-list span {
  color: var(--muted);
}
html[data-theme="clair"] .member-preview-card {
  background: var(--surface);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .member-preview-copy {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .member-preview-copy span {
  color: #2100c2;
}
html[data-theme="clair"] .connexion {
  --connexion-fond: #f1f1f7;
  --connexion-violet: #3500c2;
  background: radial-gradient(ellipse 60% 50% at 30% 42%, rgba(71, 35, 195, 0.1), transparent 70%), radial-gradient(ellipse 36% 40% at 88% 84%, rgba(35, 75, 185, 0.05), transparent 70%), #f4f4f8;
}
html[data-theme="clair"] .connexion-cadre {
  background: var(--connexion-fond);
  border: 1px solid rgba(52, 0, 194, 0.12);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
html[data-theme="clair"] .connexion-cadre::before {
  background-color: transparent;
  background-image: radial-gradient(ellipse 70% 60% at 42% 50%, rgba(48, 0, 194, 0.18), rgba(61, 25, 193, 0.06) 55%, transparent 76%);
}
html[data-theme="clair"] .connexion-scene {
  background: #f7f7fa url("/obsidian-login-poster.webp") 50% 45% / cover no-repeat;
}
html[data-theme="clair"] .connexion-voile {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(241, 241, 247, 0) 0%, rgba(241, 241, 247, 0) 42%, rgba(241, 241, 247, 0.22) 55%, rgba(241, 241, 247, 0.55) 70%, rgba(241, 241, 247, 0.85) 84%, #f1f1f7 95%), radial-gradient(ellipse 95% 88% at 42% 50%, transparent 55%, rgba(247, 247, 251, 0.72) 100%), linear-gradient(180deg, rgba(244, 244, 248, 0.38) 0%, rgba(244, 244, 248, 0.16) 42%, rgba(244, 244, 248, 0.55) 100%);
}
html[data-theme="clair"] .connexion-voile::after {
  background-image: url("data:image/svg+xml;
}
html[data-theme="clair"] .connexion-halo {
  background-color: transparent;
  background-image: radial-gradient(circle, rgba(46, 0, 194, 0.2), rgba(75, 35, 205, 0.07) 45%, transparent 70%);
}
html[data-theme="clair"] .connexion-carte {
  background-color: rgba(238, 237, 246, 0.7);
  background-image: none;
  border: 1px solid rgba(52, 0, 194, 0.18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.158), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
html[data-theme="clair"] .connexion-carte::before {
  background-color: transparent;
  background-image: linear-gradient(90deg, transparent, rgba(51, 0, 194, 0.75), transparent);
}
html[data-theme="clair"] .connexion-surtitre {
  color: #312b4c;
}
html[data-theme="clair"] .connexion-point {
  background: var(--connexion-violet);
  box-shadow: 0 0 0 0 rgba(149, 109, 255, 0.275), 0 0 12px rgba(149, 109, 255, 0.44);
}
html[data-theme="clair"] .connexion-titre {
  color: #231d38;
  text-shadow: none;
  background-color: transparent;
  background-image: linear-gradient(180deg, #06040c 0%, #231d38 34%, #3515ad 64%, #583bc2 84%, #513ac5 100%);
  filter: drop-shadow(0 10px 28px rgba(53, 15, 193, 0.28));
}
html[data-theme="clair"] .connexion-accroche {
  color: #0f0c1b;
}
html[data-theme="clair"] .connexion-detail {
  color: #5e5975;
}
html[data-theme="clair"] .connexion-champ > .connexion-libelle {
  color: #433d5c;
}
html[data-theme="clair"] .connexion-champ > .connexion-saisie {
  color: #5b527b;
}
html[data-theme="clair"] .connexion-saisie:focus-within {
  color: #2c00c2;
}
html[data-theme="clair"] .connexion-icone {
  fill: none;
  stroke: currentColor;
}
html[data-theme="clair"] .connexion-saisie input {
  color: #090710;
  background-color: rgba(245, 245, 250, 0.75);
  background-image: none;
  border: 1px solid rgba(53, 0, 194, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
html[data-theme="clair"] .connexion-saisie input::placeholder {
  color: rgba(60, 50, 95, 0.4);
}
html[data-theme="clair"] .connexion-saisie input:hover {
  border-color: rgba(53, 0, 194, 0.4);
}
html[data-theme="clair"] .connexion-saisie input:focus {
  background-color: rgba(243, 243, 249, 0.9);
  background-image: none;
  border-color: #3500c2;
  box-shadow: 0 0 0 3px rgba(149, 109, 255, 0.044), 0 0 28px rgba(115, 70, 255, 0.083);
}
html[data-theme="clair"] .connexion-saisie input:focus-visible {
  outline: none;
}
html[data-theme="clair"] .connexion-oeil {
  color: #5b527b;
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="clair"] .connexion-oeil:hover,
html[data-theme="clair"] .connexion-oeil:active {
  color: #2b00c2;
  background-color: rgba(53, 0, 194, 0.1);
  background-image: none;
  box-shadow: none;
}
html[data-theme="clair"] .connexion-bouton {
  color: #090517;
  background-color: transparent;
  background-image: linear-gradient(180deg, #e2e0ea 0%, #ebeaf2 100%);
  border: 1px solid rgba(53, 0, 194, 0.34);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.122), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="clair"] .connexion-bouton::before {
  background-color: transparent;
  background-image: linear-gradient(135deg, #4b2fc0 0%, #3917ad 55%, #5239c6 100%);
}
html[data-theme="clair"] .connexion-bouton::after {
  background-color: transparent;
  background-image: linear-gradient(100deg, transparent, rgba(0, 0, 0, 0.16), transparent);
}
html[data-theme="clair"] .connexion-bouton:hover {
  color: #000000;
  border-color: rgba(51, 0, 194, 0.7);
  box-shadow: 0 16px 40px rgba(75, 45, 190, 0.193), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="clair"] .connexion-bouton:active {
  box-shadow: 0 6px 18px rgba(75, 45, 190, 0.165), inset 0 2px 8px rgba(0, 0, 0, 0.122);
}
@media (min-width: 761px) {
  html[data-theme="clair"] .connexion-carte {
    background: none;
    border: 0;
    box-shadow: none;
  }
}
@media (max-width: 760px) {
  html[data-theme="clair"] .connexion-cadre {
    border: 0;
    box-shadow: none;
  }
  html[data-theme="clair"] .connexion-voile {
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(244, 244, 248, 0.4) 0%, rgba(244, 244, 248, 0.28) 45%, rgba(241, 241, 247, 0.86) 84%, #f1f1f7 100%), radial-gradient(ellipse 100% 90% at 50% 40%, transparent 50%, rgba(247, 247, 251, 0.7) 100%);
  }
}
@media (max-width: 620px) {
  html[data-theme="clair"] .profile-directory {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  html[data-theme="clair"] .public-channel-panel {
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.126);
  }
}
html[data-theme="clair"] .cleanup-confirm {
  border: 1px solid rgba(194, 0, 27, 0.3);
  background-color: rgba(194, 0, 27, 0.08);
  background-image: none;
  color: var(--text);
}
html[data-theme="clair"] .cleanup-confirm input {
  accent-color: #c2001b;
}
html[data-theme="clair"] .video-post-card {
  border: 1px solid var(--line);
  background: var(--surface);
}
html[data-theme="clair"] .video-post-card span,
html[data-theme="clair"] .video-post-card small {
  color: var(--muted);
}
html[data-theme="clair"] body {
  background: radial-gradient(circle at 78% -10%, rgba(68, 40, 171, 0.09), transparent 34rem), radial-gradient(circle at 18% 110%, rgba(23, 156, 175, 0.035), transparent 32rem), var(--bg);
}
html[data-theme="clair"] body::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.012) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.012) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 75%);
}
html[data-theme="clair"] ::selection {
  color: #000000;
  background-color: rgba(40, 0, 194, 0.55);
  background-image: none;
}
html[data-theme="clair"] .notice,
html[data-theme="clair"] .error {
  box-shadow: var(--shadow-card);
}
html[data-theme="clair"] .notice {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(36, 179, 108, 0.11), rgba(36, 179, 108, 0.045));
}
html[data-theme="clair"] .error {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(194, 0, 20, 0.11), rgba(194, 0, 20, 0.045));
}
html[data-theme="clair"] .status-strip > div,
html[data-theme="clair"] .activity-dashboard,
html[data-theme="clair"] .orchestration-dashboard,
html[data-theme="clair"] .studio-card,
html[data-theme="clair"] .wide-section,
html[data-theme="clair"] .health-summary article,
html[data-theme="clair"] .agent-overview article,
html[data-theme="clair"] .moderation-control-center article {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.018), transparent 44%), var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-card);
}
html[data-theme="clair"] .section-kicker {
  color: #4a3c85;
}
html[data-theme="clair"] .studio-card h2::before,
html[data-theme="clair"] .wide-section h2::before {
  box-shadow: 0 0 16px rgba(146, 118, 255, 0.154);
}
html[data-theme="clair"] .section-head p {
  color: #474957;
}
html[data-theme="clair"] label > span:not(.toggle-copy):not(.toggle-control):not(.membre-identite):not(.membre-fin) {
  color: #3a3c49;
}
html[data-theme="clair"] input,
html[data-theme="clair"] select,
html[data-theme="clair"] textarea {
  background-color: rgba(242, 243, 248, 0.82);
  background-image: none;
  border-color: rgba(3, 0, 33, 0.15);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
html[data-theme="clair"] input:hover,
html[data-theme="clair"] select:hover,
html[data-theme="clair"] textarea:hover {
  border-color: rgba(3, 0, 33, 0.24);
}
html[data-theme="clair"] input:focus,
html[data-theme="clair"] select:focus,
html[data-theme="clair"] textarea:focus {
  background-color: #edeef5;
  background-image: none;
  border-color: rgba(40, 0, 194, 0.78);
  box-shadow: 0 0 0 3px rgba(146, 118, 255, 0.072), 0 10px 32px rgba(0, 0, 0, 0.056);
}
html[data-theme="clair"] .toggle-control i {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
html[data-theme="clair"] .toggle-control input:checked + i {
  box-shadow: 0 0 18px rgba(146, 118, 255, 0.121);
}
html[data-theme="clair"] .prominent-help {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(24, 152, 170, 0.09), rgba(24, 152, 170, 0.025));
}
html[data-theme="clair"] .advanced-settings {
  border-top-color: rgba(3, 0, 33, 0.11);
}
html[data-theme="clair"] .advanced-settings summary {
  color: #2f303a;
}
html[data-theme="clair"] button,
html[data-theme="clair"] .card-action,
html[data-theme="clair"] .refresh {
  border-color: rgba(38, 0, 194, 0.56);
  background-color: transparent;
  background-image: linear-gradient(180deg, #2900c2 0%, #3a1ba7 100%);
  box-shadow: 0 9px 25px rgba(78, 56, 155, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
html[data-theme="clair"] button:hover,
html[data-theme="clair"] .card-action:hover {
  box-shadow: 0 13px 30px rgba(78, 56, 155, 0.143), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
html[data-theme="clair"] button:focus-visible,
html[data-theme="clair"] a:focus-visible,
html[data-theme="clair"] input:focus-visible,
html[data-theme="clair"] select:focus-visible,
html[data-theme="clair"] textarea:focus-visible,
html[data-theme="clair"] summary:focus-visible {
  outline: 2px solid #2700c2;
}
html[data-theme="clair"] button.ghost,
html[data-theme="clair"] button.secondary,
html[data-theme="clair"] .refresh {
  background-color: rgba(0, 0, 0, 0.025);
  background-image: none;
  box-shadow: none;
}
html[data-theme="clair"] button.ghost:hover,
html[data-theme="clair"] button.secondary:hover,
html[data-theme="clair"] .refresh:hover {
  background-color: rgba(0, 0, 0, 0.065);
  background-image: none;
}
html[data-theme="clair"] .actions {
  background-color: rgba(231, 233, 240, 0.92);
  background-image: none;
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.105);
}
html[data-theme="clair"] .health-summary article::after,
html[data-theme="clair"] .agent-overview article::after,
html[data-theme="clair"] .moderation-control-center article::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(40, 0, 194, 0.72), transparent 72%);
}
html[data-theme="clair"] .health-summary article:nth-child(1)::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--green), transparent 72%);
}
html[data-theme="clair"] .health-summary article:nth-child(2)::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--amber), transparent 72%);
}
html[data-theme="clair"] .health-summary article:nth-child(3)::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--danger), transparent 72%);
}
html[data-theme="clair"] .health-summary article:nth-child(4)::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--violet), transparent 72%);
}
html[data-theme="clair"] .health-list {
  background: var(--line);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .health-check {
  background: var(--surface);
  border: 0;
}
html[data-theme="clair"] .health-check:hover {
  background: var(--surface-2);
}
html[data-theme="clair"] .health-check.ok {
  box-shadow: inset 2px 0 0 rgba(76, 219, 148, 0.374);
}
html[data-theme="clair"] .health-check.bad {
  box-shadow: inset 2px 0 0 rgba(255, 113, 128, 0.385);
}
html[data-theme="clair"] .health-check b {
  border: 1px solid var(--line);
}
html[data-theme="clair"] .health-check.ok b {
  border-color: rgba(36, 179, 108, 0.13);
}
html[data-theme="clair"] .health-check.bad b {
  border-color: rgba(194, 0, 20, 0.16);
}
html[data-theme="clair"] .health-check small {
  color: #3d2998;
}
html[data-theme="clair"] .liste-membres {
  background: var(--line);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .membre-ligne {
  background: var(--surface);
  color: inherit;
}
html[data-theme="clair"] .membre-ligne:hover {
  background: var(--surface-2);
}
html[data-theme="clair"] .membre-ligne.selectionnee,
html[data-theme="clair"] .membre-ligne:has(input:checked) {
  background: var(--violet-soft);
  box-shadow: inset 2px 0 0 var(--violet);
}
html[data-theme="clair"] .membre-ligne input[type="checkbox"],
html[data-theme="clair"] .membre-ligne input[type="radio"] {
  accent-color: var(--violet);
}
html[data-theme="clair"] .membre-avatar {
  background: var(--surface-3);
}
html[data-theme="clair"] .membre-identite small {
  color: var(--text-secondary);
}
html[data-theme="clair"] .membre-fin {
  color: var(--text-secondary);
}
html[data-theme="clair"] .membre-etat {
  border: 1px solid var(--line);
}
html[data-theme="clair"] .membre-etat.actif {
  color: var(--violet-strong);
  border-color: var(--violet);
}
html[data-theme="clair"] .selecteur-membres {
  background: var(--surface-raised);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .selecteur-membres > summary strong {
  color: var(--violet-strong);
}
html[data-theme="clair"] .selecteur-outils .case-en-ligne {
  color: var(--text-secondary);
}
html[data-theme="clair"] .selecteur-outils .case-en-ligne input {
  accent-color: var(--violet);
}
html[data-theme="clair"] .selecteur-aide {
  color: var(--text-secondary);
}
html[data-theme="clair"] .etat-vide,
html[data-theme="clair"] .moderation-empty,
html[data-theme="clair"] .logs-empty-filter,
html[data-theme="clair"] .settings-search-empty,
html[data-theme="clair"] .agent-empty-row,
html[data-theme="clair"] .dm-history-empty {
  color: var(--text-secondary);
  border: 1px dashed var(--line);
}
html[data-theme="clair"] .table-scroll {
  border: 1px solid var(--line);
  scrollbar-color: rgba(40, 0, 194, 0.35) transparent;
}
html[data-theme="clair"] .section-tabs button,
html[data-theme="clair"] .log-tabs button {
  box-shadow: none;
}
html[data-theme="clair"] .section-tabs button.active,
html[data-theme="clair"] .log-tabs button.active {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(40, 0, 194, 0.18), rgba(40, 0, 194, 0.09));
}
html[data-theme="clair"] .settings-category-heading > span {
  color: #2400c2;
  background-color: transparent;
  background-image: linear-gradient(145deg, rgba(40, 0, 194, 0.22), rgba(40, 0, 194, 0.08));
  border: 1px solid rgba(40, 0, 194, 0.28);
}
html[data-theme="clair"] .settings-category-heading p {
  color: var(--muted);
}
html[data-theme="clair"] .settings-category-badge {
  color: var(--text-secondary);
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .sr-only {
  border: 0 !important;
}
html[data-theme="clair"] .habillage-style {
  background: var(--surface-2);
  border: 1px solid var(--line);
}
html[data-theme="clair"] .habillage-style.actif {
  border-color: var(--violet);
  background: var(--violet-soft);
}
@supports selector(:has(*)) {
  html[data-theme="clair"] .habillage-style.actif {
    border-color: var(--line);
    background: var(--surface-2);
  }
  html[data-theme="clair"] .habillage-style:has(input:checked) {
    border-color: var(--violet);
    background: var(--violet-soft);
  }
}
html[data-theme="clair"] .habillage-style:has(input:focus-visible) {
  outline: 2px solid var(--violet);
}
html[data-theme="clair"] .habillage-style small {
  color: var(--muted);
}
html[data-theme="clair"] .habillage-table th,
html[data-theme="clair"] .habillage-table td {
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .habillage-table thead th {
  color: var(--muted);
}
html[data-theme="clair"] .habillage-groupe th {
  background: var(--surface-2);
  color: var(--muted);
}
html[data-theme="clair"] .habillage-avant {
  color: var(--muted);
}
html[data-theme="clair"] .habillage-alerte {
  color: var(--danger);
}
html[data-theme="clair"] .habillage-inchange {
  color: var(--muted);
}
html[data-theme="clair"] .habillage-rapport {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
}
html[data-theme="clair"] .habillage-rapport ul {
  color: var(--muted);
}
html[data-theme="clair"] .studio-topbar {
  background-color: transparent;
  background-image: linear-gradient(180deg, rgba(212, 209, 232, 0.84), rgba(231, 231, 242, 0.8));
  border: 1px solid rgba(41, 0, 194, 0.17);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.147), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html[data-theme="clair"] .nav-icon,
html[data-theme="clair"] .nav-label-icon,
html[data-theme="clair"] .nav-chevron,
html[data-theme="clair"] .topbar-chevron-icon,
html[data-theme="clair"] .menu-settings-icon,
html[data-theme="clair"] .menu-search-icon,
html[data-theme="clair"] .topbar-search-icon,
html[data-theme="clair"] .menu-footer-icon,
html[data-theme="clair"] .menu-footer-chevron,
html[data-theme="clair"] .account-icon,
html[data-theme="clair"] .topbar-icon,
html[data-theme="clair"] .notifications-vide-icon {
  background-color: currentColor;
}
html[data-theme="clair"] .topbar-brand:hover {
  background-color: rgba(0, 0, 0, 0.04);
  background-image: none;
}
html[data-theme="clair"] .topbar-avatar img,
html[data-theme="clair"] .menu-avatar img {
  border: 1px solid rgba(0, 0, 0, 0.16);
}
html[data-theme="clair"] .presence {
  background: var(--danger);
  box-shadow: 0 0 0 2px rgba(16, 15, 28, 0.35);
}
html[data-theme="clair"] .presence.online {
  background: var(--green);
}
html[data-theme="clair"] .topbar-wordmark {
  color: var(--text);
}
html[data-theme="clair"] .topbar-wordmark span {
  color: #2400c2;
}
html[data-theme="clair"] .topbar-chevron {
  color: #000000;
  background-color: rgba(40, 0, 194, 0.22);
  background-image: none;
  border: 1px solid rgba(41, 0, 194, 0.4);
}
html[data-theme="clair"] .studio-menu-details[open] .topbar-chevron {
  background-color: rgba(40, 0, 194, 0.36);
  background-image: none;
}
html[data-theme="clair"] .studio-menu-details[open] > .topbar-brand::after {
  background-color: #d1cfe7;
  background-image: none;
  border-top: 1px solid rgba(41, 0, 194, 0.28);
  border-left: 1px solid rgba(41, 0, 194, 0.28);
}
html[data-theme="clair"] .topbar-search,
html[data-theme="clair"] .topbar-search:hover {
  color: var(--muted);
  background-color: rgba(241, 241, 249, 0.55);
  background-image: none;
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
html[data-theme="clair"] .topbar-search:hover {
  color: var(--text-secondary);
  border-color: rgba(41, 0, 194, 0.38);
}
html[data-theme="clair"] .raccourci {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.06);
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .topbar-icon-button,
html[data-theme="clair"] .topbar-theme button,
html[data-theme="clair"] .topbar-theme button:hover {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.035);
  background-image: none;
  border: 1px solid var(--line-strong);
  box-shadow: none;
}
html[data-theme="clair"] .topbar-icon-button:hover,
html[data-theme="clair"] .topbar-theme button:hover,
html[data-theme="clair"] .topbar-notifications[open] .topbar-icon-button {
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.07);
  background-image: none;
  border-color: rgba(41, 0, 194, 0.42);
}
html[data-theme="clair"] .cloche-point {
  background: var(--violet-strong);
  box-shadow: 0 0 0 2px rgba(21, 19, 42, 0.35), 0 0 12px rgba(166, 142, 255, 0.44);
}
html[data-theme="clair"] .notifications-popover {
  background-color: transparent;
  background-image: linear-gradient(180deg, #d2d0e7, #e9e9f3);
  border: 1px solid rgba(41, 0, 194, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.193);
}
html[data-theme="clair"] .notifications-head {
  background-color: #d4d2e8;
  background-image: none;
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .notifications-head span {
  color: var(--muted);
}
html[data-theme="clair"] .notification {
  color: var(--text-secondary);
}
html[data-theme="clair"] .notification:hover {
  background-color: rgba(0, 0, 0, 0.05);
  background-image: none;
}
html[data-theme="clair"] .notification-point {
  background: var(--line-strong);
}
html[data-theme="clair"] .notification.a-voir .notification-point {
  background: var(--violet-strong);
}
html[data-theme="clair"] .notification.niveau-attention.a-voir .notification-point {
  background: var(--amber);
}
html[data-theme="clair"] .notification.niveau-alerte.a-voir .notification-point {
  background: var(--danger);
  box-shadow: 0 0 10px rgba(255, 113, 128, 0.33);
}
html[data-theme="clair"] .notification-texte strong {
  color: var(--text);
}
html[data-theme="clair"] .notification-texte span {
  color: var(--muted);
}
html[data-theme="clair"] .notification time {
  color: var(--muted);
}
html[data-theme="clair"] .notifications-vide {
  color: var(--muted);
}
html[data-theme="clair"] .notifications-vide-icon {
  color: var(--green);
}
html[data-theme="clair"] .nav-badge {
  color: #000000;
  background-color: transparent;
  background-image: linear-gradient(180deg, #2600c2, #2d0fb3);
  box-shadow: 0 4px 12px rgba(108, 79, 240, 0.22);
}
html[data-theme="clair"] .topbar-account-button:hover,
html[data-theme="clair"] .topbar-account[open] .topbar-account-button {
  background-color: rgba(0, 0, 0, 0.06);
  background-image: none;
}
html[data-theme="clair"] .account-popover {
  background-color: #d5d4e9;
  background-image: none;
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.193);
}
html[data-theme="clair"] .compte-etat {
  color: var(--text-secondary);
  border-bottom: 1px solid var(--line);
}
html[data-theme="clair"] .compte-etat .presence {
  box-shadow: none;
}
html[data-theme="clair"] .account-popover a,
html[data-theme="clair"] .account-popover button,
html[data-theme="clair"] .account-popover button:hover {
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="clair"] .account-popover a:hover,
html[data-theme="clair"] .account-popover button:hover {
  background-color: rgba(0, 0, 0, 0.06);
  background-image: none;
}
html[data-theme="clair"] .account-icon {
  color: var(--muted);
}
html[data-theme="clair"] .studio-menu {
  background-color: transparent;
  background-image: linear-gradient(180deg, #d2d0e7, #e9e9f3);
  border: 1px solid rgba(41, 0, 194, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  scrollbar-color: rgba(41, 0, 194, 0.3) transparent;
}
html[data-theme="clair"] body.menu-ouvert::after {
  background-color: rgba(245, 245, 251, 0.42);
  background-image: none;
}
html[data-theme="clair"] .menu-identity {
  color: var(--text);
}
html[data-theme="clair"] .menu-identity:hover {
  background-color: rgba(0, 0, 0, 0.04);
  background-image: none;
}
html[data-theme="clair"] .menu-identity-copy span {
  color: var(--muted);
}
html[data-theme="clair"] .menu-settings {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.04);
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .menu-settings:hover {
  color: var(--text);
  border-color: rgba(41, 0, 194, 0.45);
}
html[data-theme="clair"] .menu-search {
  color: var(--muted);
  background-color: rgba(241, 241, 249, 0.62);
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .menu-search:focus-within {
  border-color: rgba(41, 0, 194, 0.6);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
html[data-theme="clair"] .menu-search input[type="search"],
html[data-theme="clair"] .menu-search input[type="search"]:hover,
html[data-theme="clair"] .menu-search input[type="search"]:focus {
  color: var(--text);
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}
html[data-theme="clair"] .menu-search input::placeholder {
  color: var(--muted);
}
html[data-theme="clair"] .menu-navigation .nav-section {
  border-top: 1px solid var(--line);
}
html[data-theme="clair"] .menu-navigation .nav-section-static {
  border-top: 0;
}
html[data-theme="clair"] .menu-navigation .nav-label {
  color: #585970;
}
html[data-theme="clair"] .nav-label-icon {
  color: var(--violet-strong);
}
html[data-theme="clair"] .menu-navigation .nav-link {
  color: #171623;
  border: 1px solid transparent;
}
html[data-theme="clair"] .menu-navigation .nav-link:hover,
html[data-theme="clair"] .menu-navigation .nav-link:focus-visible {
  color: #000000;
  background-color: rgba(0, 0, 0, 0.055);
  background-image: none;
}
html[data-theme="clair"] .menu-navigation .nav-link:focus-visible {
  outline: 2px solid #2700c2;
}
html[data-theme="clair"] .nav-icon {
  color: var(--nav-accent, var(--text-secondary));
}
html[data-theme="clair"] .nav-chevron {
  color: var(--muted);
}
html[data-theme="clair"] .menu-navigation .nav-link.active {
  color: #000000;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(40, 0, 194, 0.36), rgba(40, 0, 194, 0.12));
  border-color: rgba(41, 0, 194, 0.48);
  box-shadow: 0 8px 24px rgba(92, 64, 220, 0.132);
}
html[data-theme="clair"] .menu-navigation .nav-link.active::before {
  background: var(--violet-strong);
}
html[data-theme="clair"] .menu-navigation .nav-link.active .nav-icon,
html[data-theme="clair"] .menu-navigation .nav-link.active .nav-chevron {
  color: #000000;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="accueil"] {
  --nav-accent: #2e00c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="agents"] {
  --nav-accent: #050027;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="chat"] {
  --nav-accent: #5e00c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="messages-prives"] {
  --nav-accent: #c2005d;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="personnalite"] {
  --nav-accent: #0033c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="toprobert"] {
  --nav-accent: #c28700;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="voix"] {
  --nav-accent: #0d0b1b;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="soundboard"] {
  --nav-accent: #1aa1a8;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="membres"] {
  --nav-accent: #c2005b;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="quiz"] {
  --nav-accent: #a800c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="sondages"] {
  --nav-accent: #0d0b1b;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="videos"] {
  --nav-accent: #0061c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="moderation"] {
  --nav-accent: #0072c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="nettoyage"] {
  --nav-accent: #c20017;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="logs"] {
  --nav-accent: #0045c2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="moderateurs"] {
  --nav-accent: #050027;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="parametres"] {
  --nav-accent: #004dc2;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="habillage"] {
  --nav-accent: #1ba788;
}
html[data-theme="clair"] :is(.nav-link, .page-header)[data-page="sante"] {
  --nav-accent: #1fa382;
}
html[data-theme="clair"] .menu-empty {
  color: var(--muted);
}
html[data-theme="clair"] .menu-footer {
  color: var(--text);
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(40, 0, 194, 0.22), rgba(24, 152, 170, 0.05));
  border: 1px solid rgba(41, 0, 194, 0.3);
}
html[data-theme="clair"] .menu-footer:hover {
  border-color: rgba(41, 0, 194, 0.56);
}
html[data-theme="clair"] .menu-footer-mark {
  background-color: transparent;
  background-image: linear-gradient(135deg, #2600c2, #2d00c2);
  box-shadow: 0 6px 18px rgba(124, 92, 255, 0.248);
}
html[data-theme="clair"] .menu-footer-icon {
  color: #000000;
}
html[data-theme="clair"] .menu-footer-copy span {
  color: var(--muted);
}
html[data-theme="clair"] .menu-footer-chevron {
  color: var(--text-secondary);
  outline: 1px solid var(--line-strong);
}
html[data-theme="clair"] .page-header-icone {
  color: var(--nav-accent);
  background: color-mix(in srgb, var(--nav-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--nav-accent) 30%, transparent);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--nav-accent) 14%, transparent);
}
html[data-theme="clair"] .page-icon {
  background-color: currentColor;
}
html[data-theme="clair"] .page-fil {
  color: var(--muted);
}
html[data-theme="clair"] .page-fil a {
  color: inherit;
}
html[data-theme="clair"] .page-fil a:hover {
  color: var(--text);
}
html[data-theme="clair"] .page-resume {
  color: var(--text-secondary);
}
html[data-theme="clair"] .accueil-hero {
  background-color: #ebecf4;
  background-image: none;
  border: 1px solid rgba(41, 0, 194, 0.16);
  box-shadow: var(--shadow-card);
}
html[data-theme="clair"] .accueil-hero::before {
  background: var(--arcs-signal) left -40px bottom -60px / 420px 220px no-repeat, var(--trame-points) 0 0 / 26px 26px, radial-gradient(circle at 72% 30%, rgba(40, 0, 194, 0.24), transparent 46%);
}
html[data-theme="clair"] .accueil-visuel {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #ffffff 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #ffffff 30%);
}
html[data-theme="clair"] .accueil-hero::after {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(235, 236, 244, 0.92) 0%, rgba(235, 236, 244, 0.7) 38%, rgba(235, 236, 244, 0) 70%);
}
html[data-theme="clair"] .accueil-hero h1 span,
html[data-theme="clair"] .accueil-hero h1 em {
  color: #050508;
}
html[data-theme="clair"] .accueil-hero h1 span {
  background-color: transparent;
  background-image: linear-gradient(180deg, #000000 15%, #272936 70%, #4f5265 100%);
}
html[data-theme="clair"] .accueil-hero h1 em {
  color: var(--violet);
  background-color: transparent;
  background-image: linear-gradient(180deg, #2b00c2 8%, #4224ab 68%, #5a4ab5 100%);
}
html[data-theme="clair"] .accueil-hero .page-resume {
  color: #2b2c38;
}
html[data-theme="clair"] a.ghost {
  color: var(--text);
  background-color: rgba(0, 0, 0, 0.025);
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] a.ghost:hover {
  background-color: rgba(0, 0, 0, 0.065);
  background-image: none;
  border-color: rgba(3, 0, 33, 0.26);
}
html[data-theme="clair"] .advanced-settings > summary::after {
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
html[data-theme="clair"] .advanced-settings > summary:hover {
  color: var(--text);
}
html[data-theme="clair"] .choix-roles {
  border: 0;
}
html[data-theme="clair"] .choix-roles legend {
  color: #3a3c49;
}
html[data-theme="clair"] .choix-role {
  color: var(--text-secondary);
  background-color: rgba(0, 0, 0, 0.025);
  background-image: none;
  border: 1px solid var(--line-strong);
}
html[data-theme="clair"] .choix-role:hover {
  border-color: rgba(3, 0, 33, 0.3);
}
html[data-theme="clair"] .choix-role input {
  accent-color: var(--violet);
  box-shadow: none;
}
html[data-theme="clair"] .choix-role-pastille {
  background: var(--role, #636574);
}
html[data-theme="clair"] .choix-role:has(input:checked) {
  color: var(--text);
  background: var(--violet-soft);
  border-color: rgba(40, 0, 194, 0.55);
}
html[data-theme="clair"] .choix-role.disparu strong {
  color: var(--danger);
}
html[data-theme="clair"] .automatisation {
  background-color: rgba(0, 0, 0, 0.018);
  background-image: none;
  border: 1px solid var(--line);
}
html[data-theme="clair"] .automatisation .toggle-field {
  border-bottom: 0;
}
@media (max-width: 620px) {
  html[data-theme="clair"] .accueil-hero::after {
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(235, 236, 244, 0.9) 0%, rgba(235, 236, 244, 0.55) 55%, rgba(235, 236, 244, 0.1) 100%), linear-gradient(180deg, transparent 40%, rgba(235, 236, 244, 0.8) 100%);
  }
}
@media (max-width: 1100px) {
  html[data-theme="clair"] .automatisation {
    background: none;
    border: 0;
  }
  html[data-theme="clair"] .automatisation + .automatisation {
    border-top: 1px solid var(--line);
  }
}

/* Thème clair de Robert Studio — retouches manuelles.

   Le thème clair est généré à partir du thème sombre (src/admin-theme-clair.css).
   Ce fichier corrige ce qu'une conversion automatique ne peut pas deviner. Il
   est servi APRÈS le fichier généré. */

html[data-theme="clair"] {
  color-scheme: light;
  /* Inverser la luminosité donnait des cartes plus sombres que la page. Une
     interface claire se lit mieux à l'inverse : cartes blanches sur fond gris. */
  --bg: #eef0f6;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --surface-3: #eef0f5;
  --surface-raised: #ffffff;
  /* La conversion automatique garde des accents vifs, mais le vert des statuts
     « OK » (2,7:1) et l'orange des avertissements (3,8:1) ne se lisaient pas
     sur fond blanc. Assombris au-delà de 4,5:1. */
  --green: #0f7a45;
  --amber: #8a5a00;
  --cyan: #0e6f7c;
}

html[data-theme="clair"] body { background: var(--bg); }

/* Les icônes <img> de Studio sont blanchies par un filtre sur fond sombre : sur
   fond clair, elles doivent garder leur trait sombre d'origine. */
html[data-theme="clair"] .ui-icon { filter: none; opacity: .72; }