/*
 * AI Search Intent — socle visuel « Atelier » (refonte, phase 1).
 *
 * Structure de la démo « design lab », habillée avec DESIGN.md : papier chaud,
 * encre, accent rouille rare, Charter pour les titres, chiffres et textes
 * rédigés, sans-serif système pour les commandes. Contrat :
 * plans/refonte-search-intent/skill.md.
 *
 * Depuis la phase 6, la feuille s'applique à tous : liée par le partiel du thème
 * (search_intent/_atelier_theme.html, clair par défaut, sombre mémorisé), chaque
 * règle reste sous html.si-atelier, posé par les gabarits. Rien ici ne vise un
 * élément existant des pages : seuls les
 * éléments portant une classe .sia-* sont stylés, tokens --sia-* compris
 * (l'espace --si-* est déjà pris par aisearchintent_landing.css).
 * Spécificité basse via :where() ; les seules exceptions, plus fortes, sont le
 * focus (0,3,2) et l'état masqué (0,2,0, en fin de fichier), qui doivent
 * l'emporter sur Bootstrap, Tailwind et aisearchintent.css.
 * Ne jamais poser transform, filter ni backdrop-filter sur un conteneur : les
 * popups fixes de l'outil (#urlPopup, #questionsPopup) seraient rognés.
 * Adopter une classe .sia-* sur un élément existant implique de retirer ses
 * classes de composant Bootstrap (.btn, .form-control, .nav-link, .table…) si
 * elles ne sont pas sous contrat (tests/fixtures/si_dom_contract.json).
 */

/* ---------------------------------------------------------------- tokens -- */
/* Valeurs claires, aussi redéfinies sur les documents de l'outil (.sia-tool-paper :
   score, espace d'analyse, fenêtres), qui restent clairs en thème sombre. */
html.si-atelier,
html.si-atelier .sia-tool-paper {
  /* Papier et encre */
  --sia-page: #fbf8f1;
  --sia-paper: #fdfcf9;
  --sia-soft: #f8f5ef;
  --sia-line: #e6ded2;
  --sia-line-strong: #d8cdbd;
  --sia-faint: #8f8579;          /* bordure de champ, traits porteurs d'information (3:1) */
  --sia-ink: #26221d;
  --sia-muted: #70685c;
  --sia-on-ink: #fdfcf9;

  /* Accent rouille, rare : rubrique active, focus, survol du bouton principal */
  --sia-accent: #9a3412;
  --sia-accent-ink: #7c2a0e;
  --sia-accent-soft: #f6e9df;
  --sia-focus: #9a3412;

  /* Sémantique des données (distincte de l'accent) ; *-line : bordures teintées */
  --sia-good: #3d6b4c;    --sia-good-soft: #e8f0e7;    --sia-good-line: #a2b09c;
  --sia-warn: #8a5d0c;    --sia-warn-soft: #f6eedb;    --sia-warn-line: #c1aa83;
  --sia-bad: #9b2c1f;     --sia-bad-soft: #f7e4df;     --sia-bad-line: #c8978a;
  --sia-info: #35506b;    --sia-info-soft: #e7edf2;    --sia-info-line: #9fa5a9;
  --sia-plum: #6a4b80;    --sia-plum-soft: #efe8f3;

  /* Typographie */
  --sia-serif: Charter, "Iowan Old Style", "Sitka Text", "Source Serif 4", Georgia, serif;
  --sia-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sia-text-label: 0.72rem;
  --sia-text-sm: 0.8rem;
  --sia-text-ui: 0.875rem;
  --sia-text-md: 1rem;
  --sia-text-read: 1.08rem;
  --sia-text-lg: 1.18rem;
  --sia-text-display: 2.05rem;
  --sia-read-measure: 62ch;
  --sia-read-column: 37rem;     /* 62ch de Charter à --sia-text-read, commun à tous les blocs */

  /* Formes, espaces, élévation, mouvement */
  --sia-r-ctl: 6px;
  --sia-r-surface: 8px;
  --sia-r-pill: 999px;
  --sia-ctl-h: 42px;
  --sia-space-1: 0.35rem;
  --sia-space-2: 0.55rem;
  --sia-space-3: 0.85rem;
  --sia-space-4: 1.15rem;
  --sia-space-5: 1.55rem;
  --sia-space-6: 2.2rem;
  --sia-shadow-pop: 0 10px 25px rgba(38, 34, 29, 0.15);   /* modale, toast : jamais au repos */
  --sia-backdrop: rgba(38, 34, 29, 0.45);
  --sia-dur: 120ms;
  --sia-ease: cubic-bezier(0.2, 0, 0, 1);
  --sia-rail-w: 248px;
}

html.si-atelier[data-si-theme="dark"] {
  --sia-page: #1b1814;
  --sia-paper: #23201b;
  --sia-soft: #2a261f;
  --sia-line: #3a342b;
  --sia-line-strong: #4a4237;
  --sia-faint: #857b6d;
  --sia-ink: #ece5d8;
  --sia-muted: #aba190;
  --sia-on-ink: #1b1814;
  --sia-accent: #e08a5c;
  --sia-accent-ink: #f0a57c;
  --sia-accent-soft: #3a2519;
  --sia-focus: #e08a5c;
  --sia-good: #8dbf98;    --sia-good-soft: #223127;    --sia-good-line: #5b6c57;
  --sia-warn: #d9ad5b;    --sia-warn-soft: #33291a;    --sia-warn-line: #7a643e;
  --sia-bad: #e3826f;     --sia-bad-soft: #3a201b;     --sia-bad-line: #7e5346;
  --sia-info: #9db7cf;    --sia-info-soft: #202b35;    --sia-info-line: #62686d;
  --sia-plum: #bfa3d3;    --sia-plum-soft: #2c2433;
  --sia-shadow-pop: 0 12px 28px rgba(0, 0, 0, 0.45);
  --sia-backdrop: rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ base -- */
/* Seuls les éléments .sia-* sont concernés : les pages non migrées restent
   intactes même drapeau actif (focus, sélection, contrôles natifs compris). */
:where(html.si-atelier) :is([class^="sia-"], [class*=" sia-"]),
:where(html.si-atelier) :is([class^="sia-"], [class*=" sia-"])::before,
:where(html.si-atelier) .sia-query input { box-sizing: border-box; }
:where(html.si-atelier[data-si-theme="dark"]) :is([class^="sia-"], [class*=" sia-"]) { color-scheme: dark; }

/* Focus visible des commandes Atelier (0,3,2) : l'emporte sur .btn:focus de Bootstrap (0,2,0)
   et sur le rayon de 4 px que aisearchintent.css impose aux contrôles focalisés (0,2,0). */
html.si-atelier :is(.sia-btn, .sia-link, .sia-chip, .sia-tab, .sia-seg > button, .sia-input,
  .sia-shell-nav-item, .sia-shell-ws, .sia-menu__toggle, .sia-menu__item, .sia-arow__title):focus-visible {
  outline: 3px solid var(--sia-focus);
  outline-offset: 2px;
  box-shadow: none;
}
html.si-atelier :is(.sia-btn, .sia-shell-nav-item, .sia-menu__toggle, .sia-menu__item, .sia-arow__title):focus-visible { border-radius: var(--sia-r-ctl); }
html.si-atelier :is(.sia-input, .sia-shell-ws):focus-visible { border-radius: var(--sia-r-surface); }
html.si-atelier .sia-chip:focus-visible { border-radius: var(--sia-r-pill); }
/* Le cadre du lanceur porte le focus (:focus-within) : pas de second anneau sur le champ. */
html.si-atelier .sia-query input:focus-visible { outline: 0; }

/* ------------------------------------------------------------- utilitaires */
:where(html.si-atelier) .sia-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:where(html.si-atelier) .sia-label {
  font-family: var(--sia-sans);
  font-size: var(--sia-text-label);
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sia-muted);
}
:where(html.si-atelier) .sia-num { font-variant-numeric: tabular-nums lining-nums; }
:where(html.si-atelier) .sia-serif { font-family: var(--sia-serif); }
:where(html.si-atelier) .sia-muted { color: var(--sia-muted); }

/* ----------------------------------------------------------------- titres */
:where(html.si-atelier) .sia-title {
  margin: 0;
  font-family: var(--sia-serif);
  font-size: var(--sia-text-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--sia-ink);
  text-wrap: balance;
}
:where(html.si-atelier) .sia-h2 {
  margin: 0;
  font-family: var(--sia-serif);
  font-size: var(--sia-text-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--sia-ink);
  text-wrap: balance;
}
:where(html.si-atelier) .sia-lede {
  margin: 0;
  font-family: var(--sia-serif);
  font-size: var(--sia-text-md);
  line-height: 1.55;
  color: var(--sia-muted);
}
:where(html.si-atelier) .sia-prose {
  max-width: var(--sia-read-measure);
  font-family: var(--sia-serif);
  font-size: var(--sia-text-read);
  line-height: 1.68;
  color: var(--sia-ink);
}

/* ---------------------------------------------------------------- boutons */
:where(html.si-atelier) .sia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sia-space-2);
  min-height: var(--sia-ctl-h);
  padding: 0.55rem 1rem;
  border: 1px solid var(--sia-line-strong);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--sia-dur) var(--sia-ease), border-color var(--sia-dur) var(--sia-ease), color var(--sia-dur) var(--sia-ease);
}
:where(html.si-atelier) .sia-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-soft); }
:where(html.si-atelier) .sia-btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.55; cursor: not-allowed; }
:where(html.si-atelier) .sia-btn--primary {
  background: var(--sia-ink);
  border-color: var(--sia-ink);
  color: var(--sia-on-ink);
}
:where(html.si-atelier) .sia-btn--primary:hover:not(:disabled, [aria-disabled="true"]) {
  background: var(--sia-accent);
  border-color: var(--sia-accent);
  color: var(--sia-on-ink);
}
:where(html.si-atelier) .sia-btn--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--sia-muted);
}
:where(html.si-atelier) .sia-btn--quiet:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-soft); color: var(--sia-ink); }
:where(html.si-atelier) .sia-btn--danger { color: var(--sia-bad); border-color: var(--sia-bad-line); }
/* Après --quiet : un bouton discret et destructeur garde le rouge au survol. */
:where(html.si-atelier) .sia-btn--danger:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-bad-soft); color: var(--sia-bad); }
:where(html.si-atelier) .sia-btn--quiet.sia-btn--danger { border-color: transparent; }
:where(html.si-atelier) .sia-btn--sm { min-height: 34px; padding: 0.35rem 0.7rem; font-size: var(--sia-text-sm); }
/* Bouton réduit à son icône (libellé dans aria-label) ; carré de la hauteur du bouton. */
:where(html.si-atelier) .sia-btn--icon { min-width: var(--sia-ctl-h); padding-inline: 0; }
:where(html.si-atelier) .sia-btn--sm.sia-btn--icon { min-width: 34px; }
/* Action destructrice répétée sur chaque ligne : discrète, rouge seulement au survol. */
:where(html.si-atelier) .sia-btn--danger-hover:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-bad-soft); color: var(--sia-bad); }
/* Liens : encre soulignée, la rouille seulement au survol (accent rare). */
:where(html.si-atelier) .sia-link {
  color: var(--sia-ink);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--sia-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(html.si-atelier) .sia-link:hover { color: var(--sia-accent); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ champs */
:where(html.si-atelier) .sia-field {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-1);
  min-width: 0;
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-field > span,
:where(html.si-atelier) .sia-field > label { font-weight: 600; }
:where(html.si-atelier) .sia-field small { color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-input {
  width: 100%;
  min-height: var(--sia-ctl-h);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sia-faint);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font: inherit;
  font-size: var(--sia-text-ui);
  font-weight: 400;
}
:where(html.si-atelier) .sia-input::placeholder { color: var(--sia-muted); opacity: 1; }
:where(html.si-atelier) textarea.sia-input { min-height: 7rem; resize: vertical; line-height: 1.5; }
:where(html.si-atelier) .sia-input:focus-visible { border-color: var(--sia-focus); }
:where(html.si-atelier) .sia-input[aria-invalid="true"] { border-color: var(--sia-bad); }
:where(html.si-atelier) .sia-error { color: var(--sia-bad); font-size: var(--sia-text-sm); }

/* Lanceur de requête : champ + bouton dans un même cadre */
:where(html.si-atelier) .sia-query {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sia-space-2);
  padding: 6px;
  border: 1px solid var(--sia-faint);
  border-radius: var(--sia-r-surface);
  background: var(--sia-page);
}
:where(html.si-atelier) .sia-query:focus-within { outline: 3px solid var(--sia-focus); outline-offset: 2px; }
:where(html.si-atelier) .sia-query input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--sia-ink);
  font: inherit;
  font-size: 0.95rem;
  outline: 0;
}
:where(html.si-atelier) .sia-query input::placeholder { color: var(--sia-muted); opacity: 1; }

/* ------------------------------------------------------- surfaces et grilles */
:where(html.si-atelier) .sia-surface {
  min-width: 0;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-surface--soft { background: var(--sia-soft); }
:where(html.si-atelier) .sia-surface__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sia-space-2) var(--sia-space-3);
  padding: var(--sia-space-4) var(--sia-space-4) var(--sia-space-3);
}
:where(html.si-atelier) .sia-surface__head p { margin: 3px 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-surface__body { padding: 0 var(--sia-space-4) var(--sia-space-4); }
:where(html.si-atelier) .sia-divider { height: 0; margin: 0; border: 0; border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-stack { display: flex; flex-direction: column; gap: var(--sia-space-4); min-width: 0; }
:where(html.si-atelier) .sia-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sia-space-2); min-width: 0; }
:where(html.si-atelier) .sia-split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: var(--sia-space-4);
}

/* Encart signature « L'Essentiel » */
:where(html.si-atelier) .sia-essentiel {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-2);
  padding: var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-essentiel ol {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sia-essentiel;
}
:where(html.si-atelier) .sia-essentiel li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--sia-space-2);
  font-family: var(--sia-serif);
  font-size: 0.95rem;
  line-height: 1.35;
  counter-increment: sia-essentiel;
}
:where(html.si-atelier) .sia-essentiel li::before {
  content: counter(sia-essentiel);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--sia-line-strong);
  border-radius: 50%;
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-label);
  font-weight: 650;
}

/* ------------------------------------------------------------- indicateurs */
:where(html.si-atelier) .sia-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  overflow: hidden;
}
:where(html.si-atelier) .sia-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: var(--sia-space-4);
  box-shadow: -1px 0 0 var(--sia-line), 0 -1px 0 var(--sia-line);  /* séparateurs, pas une élévation */
}
:where(html.si-atelier) .sia-kpi small { color: var(--sia-muted); font-size: 0.76rem; }
:where(html.si-atelier) .sia-kpi b {
  font-family: var(--sia-serif);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-delta--up { color: var(--sia-good); font-weight: 650; }
:where(html.si-atelier) .sia-delta--down { color: var(--sia-bad); font-weight: 650; }

/* ------------------------------------------------------- pills et étiquettes */
:where(html.si-atelier) .sia-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
}
:where(html.si-atelier) .sia-pill--outline { border-color: var(--sia-line); background: var(--sia-paper); }
:where(html.si-atelier) .sia-pill--good { background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-pill--warn { background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-pill--bad { background: var(--sia-bad-soft); color: var(--sia-bad); }
/* Intentions de recherche */
:where(html.si-atelier) .sia-pill--info,
:where(html.si-atelier) .sia-pill--intent-informationnelle { background: var(--sia-info-soft); color: var(--sia-info); }
:where(html.si-atelier) .sia-pill--intent-commerciale { background: var(--sia-plum-soft); color: var(--sia-plum); }
:where(html.si-atelier) .sia-pill--intent-transactionnelle { background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-pill--intent-navigationnelle { background: var(--sia-warn-soft); color: var(--sia-warn); }

:where(html.si-atelier) .sia-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 11px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: 0.78rem;
  cursor: pointer;
}
:where(html.si-atelier) .sia-chip:hover { border-color: var(--sia-line-strong); }
:where(html.si-atelier) .sia-chip[aria-pressed="true"] { border-color: var(--sia-accent); color: var(--sia-accent-ink); }

/* Termes du contenu : atteint / à compléter */
:where(html.si-atelier) .sia-terms { display: flex; flex-wrap: wrap; gap: 6px; }
:where(html.si-atelier) .sia-term {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: 0.78rem;
}
:where(html.si-atelier) .sia-term small { color: var(--sia-muted); font-variant-numeric: tabular-nums; }
:where(html.si-atelier) .sia-term--done { border-color: var(--sia-good-line); color: var(--sia-good); }
:where(html.si-atelier) .sia-term--todo { border-color: var(--sia-warn-line); color: var(--sia-warn); }

/* ------------------------------------------------------------------ scores */
:where(html.si-atelier) .sia-score {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-score__track {
  width: 56px;
  height: 4px;
  border-radius: var(--sia-r-pill);
  background: var(--sia-line);
  overflow: hidden;
}
:where(html.si-atelier) .sia-score__track > i {
  display: block;
  width: calc(var(--sia-score, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--sia-good);
}
:where(html.si-atelier) .sia-score--mid .sia-score__track > i { background: var(--sia-warn); }
:where(html.si-atelier) .sia-score--low .sia-score__track > i { background: var(--sia-bad); }

/* Anneau de score : --sia-score de 0 à 100 */
:where(html.si-atelier) .sia-ring {
  --sia-ring-color: var(--sia-good);
  display: grid;
  place-items: center;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--sia-ring-color) calc(var(--sia-score, 0) * 1%), var(--sia-line) 0);
}
:where(html.si-atelier) .sia-ring--mid { --sia-ring-color: var(--sia-warn); }
:where(html.si-atelier) .sia-ring--low { --sia-ring-color: var(--sia-bad); }
:where(html.si-atelier) .sia-ring > span {
  display: grid;
  place-items: center;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border-radius: 50%;
  background: var(--sia-paper);
  font-family: var(--sia-serif);
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sia-ink);
}

/* ---------------------------------------------------- onglets et sélecteurs */
:where(html.si-atelier) .sia-tabs {
  display: flex;
  gap: var(--sia-space-4);
  border-bottom: 1px solid var(--sia-line);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Indicateur d'onglet actif : trait inférieur de 2 px (exception assumée, ce n'est pas
   un liseré latéral au sens de DESIGN.md), doublé de l'encre et du gras. */
:where(html.si-atelier) .sia-tab {
  flex: none;
  min-height: 42px;
  padding: 0.6rem 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
:where(html.si-atelier) .sia-tab:hover { color: var(--sia-ink); }
:where(html.si-atelier) .sia-tab:is([aria-selected="true"], .is-active, [data-sia-state="on"]) { border-bottom-color: var(--sia-accent); color: var(--sia-ink); font-weight: 700; }

:where(html.si-atelier) .sia-seg {
  display: inline-flex;
  border: 1px solid var(--sia-line-strong);
  border-radius: var(--sia-r-ctl);
  overflow: hidden;
}
:where(html.si-atelier) .sia-seg > button {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  background: var(--sia-paper);
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
:where(html.si-atelier) .sia-seg > button:not(:first-child) { border-left: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-seg > button:is([aria-pressed="true"], [aria-selected="true"], [data-sia-state="on"]) { background: var(--sia-ink); color: var(--sia-on-ink); box-shadow: none; }

/* Parcours Comprendre / Préparer / Rédiger */
:where(html.si-atelier) .sia-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-space-2) var(--sia-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-steps > li { display: inline-flex; align-items: center; gap: 6px; }
:where(html.si-atelier) .sia-steps > li > b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--sia-line-strong);
  border-radius: 50%;
  font-size: var(--sia-text-label);
}
:where(html.si-atelier) .sia-steps > li[aria-current="step"] { color: var(--sia-ink); font-weight: 650; }
:where(html.si-atelier) .sia-steps > li[aria-current="step"] > b { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }

/* ---------------------------------------------------------------- tableaux */
:where(html.si-atelier) .sia-table-wrap { max-width: 100%; overflow-x: auto; border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-table th {
  padding: 9px var(--sia-space-4);
  border-bottom: 1px solid var(--sia-line);
  background: var(--sia-soft);
  color: var(--sia-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(html.si-atelier) .sia-table td {
  padding: 13px var(--sia-space-4);
  border-bottom: 1px solid var(--sia-line);
  vertical-align: middle;
}
:where(html.si-atelier) .sia-table tr:last-child td { border-bottom: 0; }
:where(html.si-atelier) .sia-table tbody tr:hover { background: var(--sia-soft); }
:where(html.si-atelier) .sia-table .sia-cell-title { display: block; font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 600; }
:where(html.si-atelier) .sia-table small { color: var(--sia-muted); font-size: 0.76rem; }
/* Tableau empilé sous 600 px (--stack, sur option) : chaque ligne devient un bloc et
   chaque cellule reprend le nom de sa colonne (data-sia-label, posé par la page).
   Les en-têtes restent lus par les lecteurs d'écran. */
@media (max-width: 600px) {
  :where(html.si-atelier) .sia-table--stack th {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  :where(html.si-atelier) .sia-table--stack tr { display: grid; gap: 4px; padding: var(--sia-space-3) var(--sia-space-4); border-bottom: 1px solid var(--sia-line); }
  :where(html.si-atelier) .sia-table--stack tr:has(> th) { padding: 0; border: 0; }
  :where(html.si-atelier) .sia-table--stack tr:last-child { border-bottom: 0; }
  :where(html.si-atelier) .sia-table--stack td { display: block; padding: 0; border: 0; }
  :where(html.si-atelier) .sia-table--stack td[data-sia-label]::before {
    content: attr(data-sia-label);
    display: block;
    color: var(--sia-muted);
    font-size: var(--sia-text-label);
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ------------------------------------------------------ priorités et listes */
:where(html.si-atelier) .sia-list { margin: 0; padding: 0; list-style: none; }
:where(html.si-atelier) .sia-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px var(--sia-space-3);
  padding: var(--sia-space-3) 0;
  border-top: 1px solid var(--sia-line);
}
:where(html.si-atelier) .sia-list > li:first-child { border-top: 0; }
:where(html.si-atelier) .sia-list h3 { margin: 0; font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.3; }
:where(html.si-atelier) .sia-list p { grid-column: 1; margin: 0; color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-list > li > .sia-pill { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* ------------------------------------------------- avis, vide, chargement */
:where(html.si-atelier) .sia-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sia-space-2);
  padding: var(--sia-space-3) var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
}
:where(html.si-atelier) .sia-notice--info { border-color: var(--sia-info-line); background: var(--sia-info-soft); }
:where(html.si-atelier) .sia-notice--warn { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); }
:where(html.si-atelier) .sia-notice--bad { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); }
:where(html.si-atelier) .sia-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sia-space-2);
  padding: var(--sia-space-6) var(--sia-space-4);
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  text-align: center;
}
:where(html.si-atelier) .sia-empty h3 { margin: 0; font-family: var(--sia-serif); font-size: var(--sia-text-lg); color: var(--sia-ink); }
:where(html.si-atelier) .sia-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--sia-line);
  border-top-color: var(--sia-accent);
  border-radius: 50%;
  animation: sia-spin 0.85s linear infinite;
}
/* Seule animation de rotation, sur un élément sans enfant (aucun bloc conteneur utile). */
@keyframes sia-spin { to { rotate: 360deg; } }

/* --------------------------------------------- roadmap et connecteurs */
:where(html.si-atelier) .sia-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sia-space-4);
}
:where(html.si-atelier) .sia-kanban__col {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-3);
  min-width: 0;
  padding: var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-card {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-2);
  min-width: 0;
  padding: var(--sia-space-3) var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-card > :is(.sia-pill, .sia-connector-logo) { align-self: flex-start; }
:where(html.si-atelier) .sia-card h3 { margin: 0; font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.3; }
:where(html.si-atelier) .sia-card p { margin: 0; color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2);
  padding-top: var(--sia-space-2);
  border-top: 1px solid var(--sia-line);
  color: var(--sia-muted);
  font-size: 0.76rem;
}
:where(html.si-atelier) .sia-connectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sia-space-3);
}
:where(html.si-atelier) .sia-connector-logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  font-family: var(--sia-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sia-ink);
}

/* ----------------------------------------------------- modale et toast */
:where(html.si-atelier) .sia-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: min(90vh, 760px);
  padding: 0;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  box-shadow: var(--sia-shadow-pop);
  font-family: var(--sia-sans);
  overflow: auto;
}
:where(html.si-atelier) .sia-modal::backdrop { background: var(--sia-backdrop); }
:where(html.si-atelier) .sia-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-3);
  padding: var(--sia-space-4) var(--sia-space-4) var(--sia-space-2);
}
:where(html.si-atelier) .sia-modal__body { padding: 0 var(--sia-space-4) var(--sia-space-4); }
:where(html.si-atelier) .sia-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sia-space-2);
  padding: var(--sia-space-3) var(--sia-space-4);
  border-top: 1px solid var(--sia-line);
  background: var(--sia-soft);
}
:where(html.si-atelier) .sia-toast {
  display: inline-flex;
  align-items: center;
  gap: var(--sia-space-2);
  max-width: min(420px, calc(100vw - 32px));
  padding: 0.7rem 1rem;
  border-radius: var(--sia-r-surface);
  background: var(--sia-ink);
  color: var(--sia-on-ink);
  box-shadow: var(--sia-shadow-pop);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
}

/* ------------------------------------------------ coquille (phase 2) */
/* Rail de navigation et barre haute, montés par atelierShell.js. Sur les pages,
   .sia-shell enveloppe le conteneur existant : cette seconde colonne n'est pas
   restylée et garde le fond de la page. La navigation, la jauge de crédits,
   l'en-tête et la barre du projet sont des éléments existants qui adoptent une
   classe .sia-shell-* (ids, attributs et moteur de navigation inchangés). */
:where(html.si-atelier) .sia-shell {
  display: grid;
  grid-template-columns: var(--sia-rail-w) minmax(0, 1fr);
  min-height: 100vh;
}
:where(html.si-atelier) .sia-shell-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-4);
  height: 100vh;
  padding: var(--sia-space-5) var(--sia-space-3) var(--sia-space-4);
  border-right: 1px solid var(--sia-line);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  line-height: 1.5;
  overflow-y: auto;
}
:where(html.si-atelier) .sia-shell-brand { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--sia-space-2); }
:where(html.si-atelier) .sia-shell-brand b { font-family: var(--sia-serif); font-size: var(--sia-text-lg); letter-spacing: -0.01em; }
:where(html.si-atelier) .sia-shell-brand span { color: var(--sia-muted); font-size: 0.78rem; }
:where(html.si-atelier) .sia-shell-ws {
  display: flex;
  align-items: center;
  gap: var(--sia-space-2);
  width: 100%;
  min-height: var(--sia-ctl-h);
  padding: var(--sia-space-2);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font: inherit;
  font-size: var(--sia-text-ui);
  text-align: left;
  cursor: pointer;
}
:where(html.si-atelier) .sia-shell-ws:hover { border-color: var(--sia-line-strong); }
:where(html.si-atelier) .sia-shell-page,
:where(html.si-atelier) .sia-shell-section { min-width: 0; }
:where(html.si-atelier) .sia-shell-nav { display: flex; flex-direction: column; gap: 2px; }
:where(html.si-atelier) .sia-shell-nav-label { padding: var(--sia-space-3) var(--sia-space-2) var(--sia-space-1); }
/* Sur une page, les entrées sont les liens et boutons de la navigation existante :
   leurs propriétés propres (centrage, graisse, ombre active) sont neutralisées. */
:where(html.si-atelier) .sia-shell-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sia-space-2);
  min-height: 42px;
  padding: 8px var(--sia-space-2);
  border: 0;
  border-radius: var(--sia-r-ctl);
  background: none;
  box-shadow: none;
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
:where(html.si-atelier) .sia-shell-nav-item:hover { background: var(--sia-soft); color: var(--sia-ink); }
:where(html.si-atelier) .sia-shell-nav-item:is([aria-current="page"], .is-active) {
  background: var(--sia-accent-soft);
  box-shadow: none;
  color: var(--sia-accent-ink);
  font-weight: 650;
}
:where(html.si-atelier) .sia-shell-nav-item svg { flex: none; width: 17px; height: 17px; }
:where(html.si-atelier) .sia-shell-nav-count { margin-left: auto; color: var(--sia-muted); font-size: var(--sia-text-label); font-variant-numeric: tabular-nums; }
:where(html.si-atelier) .sia-shell-credits {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-2);
  margin-top: auto;
  padding: var(--sia-space-4) var(--sia-space-2) 0;
  border-top: 1px solid var(--sia-line);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-shell-gauge { height: 4px; border-radius: var(--sia-r-pill); background: var(--sia-line); overflow: hidden; }
:where(html.si-atelier) .sia-shell-gauge > i,
:where(html.si-atelier) .sia-shell-gauge-fill { display: block; width: calc(var(--sia-gauge, 0) * 1%); height: 100%; border-radius: inherit; background: var(--sia-ink); }
/* Lien des crédits : sur le dashboard, c'est la jauge #dashboardCreditGauge
   (creditUsage.js), dont atelierShell.js habille les enfants et recopie l'état
   dans data-sia-state ; sa largeur de remplissage reste posée en ligne. */
:where(html.si-atelier) .sia-shell-credits-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-space-1) var(--sia-space-2);
  width: 100%;
  min-height: var(--sia-ctl-h);
  padding: var(--sia-space-1) 0;
  border: 0;
  border-radius: var(--sia-r-ctl);
  background: none;
  box-shadow: none;
  color: var(--sia-ink);
  font-size: var(--sia-text-sm);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(html.si-atelier) .sia-shell-credits-link:hover { color: var(--sia-accent); }
:where(html.si-atelier) .sia-shell-credits-link[data-sia-state] { text-decoration: none; }
:where(html.si-atelier) .sia-shell-credits-plan {
  padding: 1px 8px;
  border: 1px solid var(--sia-line-strong);
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-size: var(--sia-text-label);
  font-weight: 650;
  letter-spacing: 0.06em;
}
:where(html.si-atelier) .sia-shell-credits-copy { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
:where(html.si-atelier) .sia-shell-credits-primary {
  color: var(--sia-ink);
  font-family: var(--sia-serif);
  font-size: var(--sia-text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
:where(html.si-atelier) .sia-shell-credits-secondary { color: var(--sia-muted); font-size: var(--sia-text-label); }
:where(html.si-atelier) .sia-shell-credits-unlimited {
  width: auto;
  height: auto;
  margin-left: auto;
  border-radius: 0;
  background: none;
  color: var(--sia-good);
  font-family: var(--sia-serif);
  font-size: var(--sia-text-lg);
}
:where(html.si-atelier) .sia-shell-credits-link .sia-shell-gauge { flex: 1 0 100%; }
:where(html.si-atelier) .sia-shell-credits-link[data-sia-state="warning"] .sia-shell-gauge-fill { background: var(--sia-warn); }
:where(html.si-atelier) .sia-shell-credits-link[data-sia-state="exhausted"] .sia-shell-gauge-fill { background: var(--sia-bad); }
:where(html.si-atelier) .sia-shell-credits-link[data-sia-state="exhausted"] .sia-shell-credits-primary { color: var(--sia-bad); }
:where(html.si-atelier) .sia-shell-main {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-5);
  min-width: 0;
  max-width: 1320px;
  padding: var(--sia-space-5) max(16px, 2.4vw) var(--sia-space-6);
  background: var(--sia-page);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-shell-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2);
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
}
/* Barre haute d'une page : l'en-tête existant, dont la marque devient le fil
   d'Ariane (le rail porte désormais le nom de l'outil), puis la barre du projet. */
:where(html.si-atelier) .sia-shell-bar { padding-bottom: var(--sia-space-3); border-bottom: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-shell-crumb {
  color: var(--sia-muted);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-sm);
  font-weight: 650;
  text-decoration: none;
}
:where(html.si-atelier) .sia-shell-crumb:hover { color: var(--sia-accent); }
:where(html.si-atelier) .sia-shell-crumb span {
  display: inline;
  margin: 0 0 0 var(--sia-space-2);
  padding-left: var(--sia-space-2);
  border-left: 1px solid var(--sia-line-strong);
  color: var(--sia-ink);
  font-size: inherit;
  font-weight: inherit;
}
:where(html.si-atelier) .sia-shell-projectbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-3);
  margin: 0;
  padding: var(--sia-space-3) var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
}
:where(html.si-atelier) .sia-shell-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sia-space-3);
}

/* ------------------------------------------------- menus déroulants */
/* Un <details> existant : son résumé et ses entrées gardent leurs écouteurs. Les
   règles des entrées reprennent html.si-atelier sans :where() pour battre celles
   des pages (.workspace-menu summary, .workspace-menu-items > a : 0,1,1). */
:where(html.si-atelier) .sia-menu { position: relative; }
html.si-atelier .sia-menu__toggle {
  display: flex;
  align-items: center;
  gap: var(--sia-space-2);
  min-height: var(--sia-ctl-h);
  padding: 0 var(--sia-space-3);
  border: 1px solid transparent;
  border-radius: var(--sia-r-ctl);
  background: transparent;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
html.si-atelier .sia-menu__toggle:hover,
html.si-atelier .sia-menu[open] > .sia-menu__toggle { border-color: var(--sia-line); background: var(--sia-soft); }
:where(html.si-atelier) .sia-menu__items {
  padding: var(--sia-space-1);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  box-shadow: var(--sia-shadow-pop);   /* menu déroulant : seule ombre d'un élément ouvert */
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
html.si-atelier .sia-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sia-space-2);
  min-height: var(--sia-ctl-h);
  padding: 0 var(--sia-space-3);
  border: 0;
  border-radius: var(--sia-r-ctl);
  background: transparent;
  color: var(--sia-ink);
  font: 500 var(--sia-text-ui)/1.4 var(--sia-sans);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
/* Interrupteur du thème sombre (bouton [data-sia-theme-toggle], aria-pressed tenu par le
   partiel du thème) : coche à droite quand le sombre est choisi. */
html.si-atelier .sia-menu__item[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--sia-ink); font-weight: 700; }
html.si-atelier .sia-menu__item:hover { background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-menu__item--danger {
  margin-top: var(--sia-space-1);
  border-top: 1px solid var(--sia-line);
  border-radius: 0 0 var(--sia-r-ctl) var(--sia-r-ctl);
  color: var(--sia-bad);
}
html.si-atelier .sia-menu__item--danger:hover { background: var(--sia-bad-soft); color: var(--sia-bad); }
:where(html.si-atelier) .sia-menu__label { padding: var(--sia-space-2) var(--sia-space-3) var(--sia-space-1); }
/* Nom du compte dans le résumé du menu (.user-badge, 0,1,0, garde sa couleur froide). */
:where(html.si-atelier) .sia-dash-user { color: inherit; font-size: var(--sia-text-ui); }

/* --------------------------------------------- jauge et chiffres clés */
/* Jauge d'un contenu (--sia-gauge de 0 à 100, posée en ligne par la page). */
:where(html.si-atelier) .sia-meter {
  display: block;
  height: 4px;
  margin: 6px 0 2px;
  border-radius: var(--sia-r-pill);
  background: var(--sia-line);
  overflow: hidden;
}
:where(html.si-atelier) .sia-meter > i {
  display: block;
  width: calc(var(--sia-gauge, 0) * 1%);
  height: 100%;
  border-radius: inherit;
  background: var(--sia-ink);
}
:where(html.si-atelier) .sia-kpi[data-sia-state="warn"] .sia-meter > i { background: var(--sia-warn); }
:where(html.si-atelier) .sia-kpi[data-sia-state="bad"] .sia-meter > i { background: var(--sia-bad); }
:where(html.si-atelier) .sia-kpi[data-sia-state="bad"] b { color: var(--sia-bad); }

/* ------------------------------------------ dashboard (phase 3) */
/* Éléments existants du dashboard, habillés par atelierDashboard.js. Quand une
   règle de la page reste plus forte que :where() (identifiant, classe sous
   contrat conservée), la règle Atelier reprend html.si-atelier sans :where()
   pour l'emporter, jamais !important. */
:where(html.si-atelier) .sia-dash-page { background: var(--sia-page); }
/* Sous le rail collant (100vh), la colonne garde la couleur du rail. */
:where(html.si-atelier) .sia-dash-shell { background: var(--sia-paper); }
/* Bat .si-workspace-shell .dashboard-container (0,2,0). */
html.si-atelier .sia-dash {
  max-width: 1320px;
  padding: var(--sia-space-5) max(16px, 2.4vw) var(--sia-space-6);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-dash-heading { margin: var(--sia-space-5) 0; }
:where(html.si-atelier) .sia-dash-heading__copy { display: flex; flex-direction: column; gap: var(--sia-space-1); min-width: 0; }
:where(html.si-atelier) .sia-dash-back { display: inline-block; margin: 0 0 var(--sia-space-3); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-select { width: auto; min-width: 220px; max-width: min(390px, 100%); }
:where(html.si-atelier) .sia-shell-projectbar .sia-label { white-space: nowrap; }
/* Espace actif : bat .dashboard-space.is-active (0,2,0) ; [hidden] l'emporte toujours. */
html.si-atelier .sia-dash-space.is-active { display: flex; }
:where(html.si-atelier) .sia-dash-space { flex-direction: column; gap: var(--sia-space-4); min-width: 0; }
:where(html.si-atelier) .sia-dash-required { padding: var(--sia-space-6) var(--sia-space-4); }
:where(html.si-atelier) .sia-dash-required > i { color: var(--sia-muted); font-size: 1.5rem; }
:where(html.si-atelier) .sia-dash-required > p { max-width: 52ch; margin: 0; line-height: 1.55; }

/* Liste des analyses : chaque carte de dashboard.js devient une ligne. */
:where(html.si-atelier) .sia-dash-list { overflow: hidden; }
:where(html.si-atelier) .sia-dash-list > .sia-surface__head { align-items: center; }
/* Bat .si-workspace-shell #workspaceCountBadge (1,1,0). */
html.si-atelier #workspaceCountBadge.sia-dash-count { display: inline-flex; margin: 0; }
:where(html.si-atelier) .sia-dash-state { padding: var(--sia-space-6) var(--sia-space-4); border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-dash-state > p { max-width: 52ch; margin: 0; font-size: var(--sia-text-ui); line-height: 1.55; }
:where(html.si-atelier) .sia-arows { grid-template-columns: minmax(0, 1fr); gap: 0; }
:where(html.si-atelier) .sia-arow-head,
:where(html.si-atelier) .sia-arow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8.5rem 9rem 17.5rem;
  column-gap: var(--sia-space-4);
}
:where(html.si-atelier) .sia-arow-head {
  padding: 9px var(--sia-space-4);
  border-top: 1px solid var(--sia-line);
  border-bottom: 1px solid var(--sia-line);
  background: var(--sia-soft);
}
:where(html.si-atelier) .sia-arow-head > span {
  color: var(--sia-muted);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:where(html.si-atelier) .sia-arow-head > span:last-child { text-align: right; }
:where(html.si-atelier) .sia-arow {
  grid-template-areas:
    "title   type when actions"
    "query   type when actions"
    "info    type when actions"
    "publish type when actions";
  align-items: start;
  row-gap: 4px;
  padding: var(--sia-space-3) var(--sia-space-4);
  border: 0;
  border-bottom: 1px solid var(--sia-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  transition: background-color var(--sia-dur) var(--sia-ease);
}
:where(html.si-atelier) .sia-arow:last-child { border-bottom: 0; }
:where(html.si-atelier) .sia-arow:hover { border-color: var(--sia-line); background: var(--sia-soft); box-shadow: none; }
:where(html.si-atelier) .sia-arow__head { display: contents; }
/* Titre modifiable sur place (contenteditable) : l'affordance de saisie reste. */
:where(html.si-atelier) .sia-arow__title {
  grid-area: title;
  justify-self: start;
  max-width: 100%;
  margin: -2px 0 -2px -5px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--sia-r-ctl);
  color: var(--sia-ink);
  font-family: var(--sia-serif);
  font-size: var(--sia-text-md);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  cursor: text;
}
:where(html.si-atelier) .sia-arow__title:hover { border-color: var(--sia-line-strong); }
:where(html.si-atelier) .sia-arow__title:focus { border-color: var(--sia-focus); background: var(--sia-paper); outline: 0; }
:where(html.si-atelier) .sia-arow__type { grid-area: type; justify-self: start; margin-top: 1px; }
:where(html.si-atelier) .sia-arow__query {
  grid-area: query;
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
  font-style: normal;
  overflow-wrap: anywhere;
}
:where(html.si-atelier) .sia-arow__when {
  grid-area: when;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
  font-variant-numeric: tabular-nums;
}
:where(html.si-atelier) .sia-arow__when > span { display: inline-flex; align-items: center; gap: 6px; }
:where(html.si-atelier) :is(.sia-arow__when, .sia-arow__info) i { color: inherit; font-size: 0.72rem; }
:where(html.si-atelier) .sia-arow__info { grid-area: info; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
:where(html.si-atelier) .sia-arow__info > .sia-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Badge du projet : .card-workspace-badge (0,1,0) reste sous l'habillage ; ses couleurs indigo sont reprises. */
:where(html.si-atelier) .sia-arow__info > .sia-pill--outline { border-color: var(--sia-line); background: var(--sia-paper); color: var(--sia-muted); font-size: 0.74rem; font-weight: 650; padding: 2px 9px; }
:where(html.si-atelier) .sia-arow__publish {
  grid-area: publish;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sia-space-1);
  margin-top: 2px;
}
:where(html.si-atelier) .sia-arow__publish-label { margin-right: var(--sia-space-1); }
:where(html.si-atelier) .sia-arow__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sia-space-1);
}
/* Espaces Intégrations, Compte et Administration : sections (affichées en
   bloc par les modules, display posé en ligne), têtes, blocs de réglages. */
:where(html.si-atelier) .sia-dash-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sia-space-3) var(--sia-space-5);
  padding: var(--sia-space-4);
}
:where(html.si-atelier) .sia-dash-intro p { max-width: 68ch; margin: var(--sia-space-1) 0 0; color: var(--sia-muted); font-size: var(--sia-text-ui); line-height: 1.55; }
:where(html.si-atelier) .sia-dash-stack { display: flex; flex-direction: column; gap: var(--sia-space-4); min-width: 0; }
:where(html.si-atelier) .sia-dash-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sia-space-2) var(--sia-space-4); }
:where(html.si-atelier) .sia-dash-picker > .sia-field { flex: 0 1 380px; }
:where(html.si-atelier) .sia-dash-picker p { margin: 0 0 10px; color: var(--sia-muted); font-size: var(--sia-text-sm); }
/* Connexions (démo : « connexions en grille ») : une carte par outil, dont la pastille
   et le logo disent l'état ; le bouton couvre la carte. Réglages dans .sia-conn-dialog. */
:where(html.si-atelier) .sia-conn-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sia-space-4); }
:where(html.si-atelier) .sia-conn-card {
  position: relative;
  gap: var(--sia-space-1);
  min-height: 216px;
  padding: var(--sia-space-4);
  transition: border-color var(--sia-dur) var(--sia-ease), background-color var(--sia-dur) var(--sia-ease);
}
:where(html.si-atelier) .sia-conn-card:hover { border-color: var(--sia-line-strong); background: var(--sia-soft); }
:where(html.si-atelier) .sia-conn-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sia-space-2); margin-bottom: var(--sia-space-2); }
:where(html.si-atelier) .sia-conn-card[data-connector-state="good"] .sia-connector-logo { border-color: var(--sia-good-line); background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-conn-card[data-connector-state="warn"] .sia-connector-logo { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-card .sia-conn-card__detail { overflow: hidden; color: var(--sia-ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-conn-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2);
  margin-top: auto;
  padding-top: var(--sia-space-3);
  color: var(--sia-muted);
  font-size: 0.76rem;
}
:where(html.si-atelier) .sia-conn-card__action::after { content: ""; position: absolute; inset: 0; border-radius: var(--sia-r-surface); }
:where(html.si-atelier) .sia-conn-status[data-sia-state]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:where(html.si-atelier) .sia-conn-flash { display: flex; flex-direction: column; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-conn-flash p { margin: 0; }

/* Fenêtre des réglages : calque fixe sous les fenêtres des modules (div.modal, z-index
   99999), qui s'ouvrent par-dessus. Les sections y perdent cadre, titre et badge : la
   tête de la fenêtre porte le nom, la description et l'état du connecteur. */
:where(html.si-atelier) .sia-conn-layer {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: var(--sia-space-4);
  background: var(--sia-backdrop);
}
:where(html.si-atelier) .sia-conn-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(90vh, 880px); overscroll-behavior: contain; }
:where(html.si-atelier) .sia-conn-dialog:focus { outline: none; }
:where(html.si-atelier) .sia-conn-dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: flex-start;
  padding-bottom: var(--sia-space-3);
  border-bottom: 1px solid var(--sia-line);
  background: var(--sia-paper);
}
:where(html.si-atelier) .sia-conn-dialog__titles { flex: 1 1 auto; min-width: 0; }
:where(html.si-atelier) .sia-conn-dialog__titles p { margin: 4px 0 0; color: var(--sia-muted); font-size: var(--sia-text-ui); }
:where(html.si-atelier) .sia-conn-dialog__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-space-1) var(--sia-space-3);
  margin: 0 0 var(--sia-space-3);
  padding: var(--sia-space-3) 0;
  border-bottom: 1px solid var(--sia-line);
  font-size: var(--sia-text-ui);
}
:where(html.si-atelier) .sia-conn-dialog__meta > .sia-pill { margin-left: auto; }
html.si-atelier #dashboardSpaceIntegrations .sia-conn-dialog__panels .sia-dash-section { margin: 0; padding: 0; border: 0; background: none; }
:where(html.si-atelier) .sia-conn-dialog__panels .sia-dash-block { padding: 0; border: 0; background: none; }
:where(html.si-atelier) .sia-conn-dialog__panels :is(.sia-dash-grid, .sia-dash-split) { grid-template-columns: minmax(0, 1fr); margin: 0; }
:where(html.si-atelier) .sia-conn-dialog__panels .sia-dash-listbox { order: -1; }
:where(html.si-atelier) .sia-conn-dialog__panels .sia-dash-section > .sia-dash-head :is(.sia-label, .sia-h2, .sia-dash-badge) { display: none; }
:where(html.si-atelier) .sia-conn-dialog__panels .sia-dash-block > h3,
:where(html.si-atelier) .sia-conn-dialog__panels .sia-dash-head--block h3 { display: none; }
:where(html.si-atelier) .sia-conn-google { display: flex; flex-direction: column; gap: var(--sia-space-3); margin: 0 0 var(--sia-space-3); }
:where(html.si-atelier) .sia-conn-google p { margin: 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.55; }

/* Bat #dashboardSpaceIntegrations .wordpress-section (1,1,0), dont la bordure est froide. */
html.si-atelier #dashboardSpaceIntegrations .sia-dash-section,
html.si-atelier .sia-dash-section {
  margin: 0 0 var(--sia-space-4);
  padding: var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  box-shadow: none;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  line-height: 1.55;
}
:where(html.si-atelier) .sia-dash-section > p { max-width: 75ch; margin: var(--sia-space-3) 0; color: var(--sia-muted); }
:where(html.si-atelier) .sia-dash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sia-space-2) var(--sia-space-4);
  margin: 0 0 var(--sia-space-3);
}
:where(html.si-atelier) .sia-dash-head__copy { flex: 1 1 280px; min-width: 0; }
:where(html.si-atelier) .sia-dash-head p { max-width: 70ch; margin: var(--sia-space-1) 0 0; color: var(--sia-muted); font-size: var(--sia-text-ui); line-height: 1.55; }
:where(html.si-atelier) .sia-dash-head h3 { margin: 0; font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.3; color: var(--sia-ink); }
:where(html.si-atelier) .sia-dash-head--block { margin-bottom: var(--sia-space-2); }
:where(html.si-atelier) .sia-dash-head--list { align-items: center; margin: 0 0 var(--sia-space-2); font-weight: 650; }
:where(html.si-atelier) .sia-h2 > i { margin-right: 6px; color: var(--sia-muted); font-size: 0.85em; }
:where(html.si-atelier) .sia-dash-badge[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); color: var(--sia-good); }

/* État des sources de données : libellé et pastille d'état. */
:where(html.si-atelier) .sia-dash-statuses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sia-space-2);
  margin: var(--sia-space-3) 0;
}
:where(html.si-atelier) .sia-dash-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: var(--sia-space-2) var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
}
:where(html.si-atelier) .sia-dash-statuses span { color: var(--sia-muted); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:where(html.si-atelier) .sia-dash-statuses .sia-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
:where(html.si-atelier) .sia-pill[data-sia-state="good"] { background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-pill[data-sia-state="warn"] { background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-pill[data-sia-state="bad"] { background: var(--sia-bad-soft); color: var(--sia-bad); }

:where(html.si-atelier) .sia-dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sia-space-3);
  margin: var(--sia-space-3) 0;
}
:where(html.si-atelier) .sia-dash-block {
  min-width: 0;
  padding: var(--sia-space-4);
  overflow-wrap: anywhere;
}
:where(html.si-atelier) .sia-dash-block > h3 { margin: 0 0 var(--sia-space-2); font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.3; }
:where(html.si-atelier) .sia-dash-block p { margin: var(--sia-space-2) 0; color: var(--sia-muted); line-height: 1.55; }
:where(html.si-atelier) .sia-dash-block > small,
:where(html.si-atelier) .sia-dash-block h3 > small { color: var(--sia-muted); font-family: var(--sia-sans); font-size: 0.8em; font-weight: 500; }
:where(html.si-atelier) .sia-dash-h4 { margin: var(--sia-space-4) 0 var(--sia-space-2); font-family: var(--sia-serif); font-size: 0.95rem; line-height: 1.35; color: var(--sia-ink); }
:where(html.si-atelier) .sia-dash-subsection { margin-top: var(--sia-space-4); padding-top: var(--sia-space-3); border-top: 1px solid var(--sia-line); }

/* Champs : libellé au-dessus, champ pleine largeur, actions à la suite. */
:where(html.si-atelier) .sia-dash-label {
  display: block;
  margin: var(--sia-space-3) 0 var(--sia-space-1);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-sm);
  font-weight: 650;
  line-height: 1.4;
}
:where(html.si-atelier) .sia-dash-label small { display: block; margin-top: 2px; color: var(--sia-muted); font-weight: 400; }
:where(html.si-atelier) .sia-dash-form { display: flex; flex-direction: column; min-width: 0; }
:where(html.si-atelier) .sia-dash-form > .sia-dash-label:first-child { margin-top: 0; }
:where(html.si-atelier) .sia-dash-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sia-space-2) var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-fields > .sia-field { flex: 1 1 160px; }
:where(html.si-atelier) .sia-dash-fields .sia-dash-label { margin: 0; }
:where(html.si-atelier) .sia-dash-field-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sia-space-2); min-width: 0; }
:where(html.si-atelier) .sia-dash-field-row > .sia-input { flex: 1 1 220px; width: auto; min-width: 0; }
:where(html.si-atelier) .sia-dash-actions { margin: var(--sia-space-3) 0 0; }
:where(html.si-atelier) .sia-dash-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0 var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0 var(--sia-space-2); }
:where(html.si-atelier) .sia-dash-hint { margin: var(--sia-space-1) 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.5; }
:where(html.si-atelier) .sia-dash-text { max-width: 75ch; margin: 0 0 var(--sia-space-3); color: var(--sia-ink); line-height: 1.6; }
:where(html.si-atelier) .sia-dash-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sia-space-2);
  margin: var(--sia-space-2) 0;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  line-height: 1.45;
  cursor: pointer;
}
:where(html.si-atelier) .sia-dash-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--sia-ink); }
:where(html.si-atelier) .sia-dash-file { max-width: 100%; color: var(--sia-muted); font: inherit; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-message { min-height: 0; margin: var(--sia-space-2) 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.5; }
:where(html.si-atelier) .sia-dash-message:empty { display: none; }
:where(html.si-atelier) .sia-dash-message[data-sia-state="good"] { color: var(--sia-good); }
:where(html.si-atelier) .sia-dash-message[data-sia-state="warn"] { color: var(--sia-warn); }
:where(html.si-atelier) .sia-dash-message[data-sia-state="bad"] { color: var(--sia-bad); }
:where(html.si-atelier) .sia-notice--good { border-color: var(--sia-good-line); background: var(--sia-good-soft); }
:where(html.si-atelier) .sia-notice:empty { display: none; }
:where(html.si-atelier) .sia-dash-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2);
  margin: var(--sia-space-3) 0;
  padding: var(--sia-space-2) var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
}
:where(html.si-atelier) .sia-dash-identity span { display: block; color: var(--sia-muted); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:where(html.si-atelier) .sia-dash-details { margin: var(--sia-space-3) 0; }
html.si-atelier .sia-dash-details__summary {
  display: flex;
  align-items: center;
  min-height: var(--sia-ctl-h);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  font-weight: 650;
  cursor: pointer;
}
html.si-atelier .sia-dash-details__summary:hover { color: var(--sia-accent); }
html.si-atelier .sia-dash-details__summary:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; border-radius: var(--sia-r-ctl); }
:where(html.si-atelier) .sia-dash-ul { margin: var(--sia-space-2) 0; padding-left: 1.25rem; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-ul > li { margin: var(--sia-space-1) 0; line-height: 1.55; }
:where(html.si-atelier) .sia-code {
  padding: 1px 5px;
  border: 1px solid var(--sia-line);
  border-radius: 4px;
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  overflow-wrap: anywhere;
}
:where(html.si-atelier) .sia-dash-code {
  max-width: 100%;
  margin: var(--sia-space-2) 0;
  padding: var(--sia-space-2) var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sia-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
:where(html.si-atelier) .sia-dash-caption { padding: var(--sia-space-2) var(--sia-space-4); color: var(--sia-muted); font-size: var(--sia-text-sm); font-weight: 650; text-align: left; }
:where(html.si-atelier) .sia-dash-tablebox { margin: var(--sia-space-3) 0; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); }
:where(html.si-atelier) .sia-dash-tablebox small { display: block; margin-top: 2px; }
:where(html.si-atelier) .sia-dash-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sia-space-2);
  margin: var(--sia-space-3) 0;
}
:where(html.si-atelier) .sia-dash-figures > p {
  margin: 0;
  padding: var(--sia-space-2) var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-variant-numeric: tabular-nums;
}
:where(html.si-atelier) .sia-dash-preview { margin: var(--sia-space-3) 0; padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-dash-posttext { color: var(--sia-ink); font-family: var(--sia-serif); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Publication : formulaire et connexions actives côte à côte. */
:where(html.si-atelier) .sia-dash-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  align-items: start;
  gap: var(--sia-space-4);
}
:where(html.si-atelier) .sia-dash-listbox { padding: var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-connections { display: flex; flex-direction: column; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-dash-connection { flex-direction: row; align-items: flex-start; justify-content: space-between; padding: var(--sia-space-2) var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-connection__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-connection__main span,
:where(html.si-atelier) .sia-dash-connection__main small { color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-connection__title { color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); }
:where(html.si-atelier) .sia-dash-empty { padding: var(--sia-space-3) 0; color: var(--sia-muted); font-size: var(--sia-text-sm); }

/* Compte : crédits, historique, clé API. */
:where(html.si-atelier) .sia-dash-credit { margin: 0 0 var(--sia-space-3); padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-dash-credit__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sia-space-2) var(--sia-space-4); }
:where(html.si-atelier) .sia-dash-credit__plan { display: flex; flex-direction: column; gap: 2px; }
:where(html.si-atelier) .sia-dash-credit__name { font-family: var(--sia-serif); font-size: var(--sia-text-lg); font-weight: 700; }
:where(html.si-atelier) .sia-dash-credit__usage { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
:where(html.si-atelier) .sia-dash-credit__value { font-family: var(--sia-serif); font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; }
:where(html.si-atelier) .sia-dash-credit__unlimited { color: var(--sia-good); font-family: var(--sia-serif); font-size: var(--sia-text-lg); }
:where(html.si-atelier) .sia-dash-credit__meter { margin: var(--sia-space-2) 0; }
:where(html.si-atelier) .sia-dash-credit__foot { display: flex; flex-wrap: wrap; gap: var(--sia-space-1) var(--sia-space-3); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sia-space-2) var(--sia-space-3); margin: var(--sia-space-3) 0; }
:where(html.si-atelier) .sia-dash-toolbar > .sia-field { flex: 1 1 150px; color: var(--sia-ink); font-size: var(--sia-text-sm); font-weight: 650; }
:where(html.si-atelier) .sia-dash-statusline { display: flex; align-items: center; gap: var(--sia-space-2); margin: var(--sia-space-2) 0; color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-statusline:empty { display: none; }
:where(html.si-atelier) .sia-dash-statusline[data-sia-state="bad"] { color: var(--sia-bad); }
:where(html.si-atelier) .sia-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
:where(html.si-atelier) .sia-dash-history { margin: 0; }
:where(html.si-atelier) .sia-dash-history > li { gap: 6px var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-history__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(html.si-atelier) .sia-dash-history__main p { margin: 0; font-size: var(--sia-text-sm); overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-history__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-dash-history__label { color: var(--sia-ink); font-weight: 650; }
:where(html.si-atelier) .sia-dash-history__amount { color: var(--sia-ink); font-weight: 650; }
:where(html.si-atelier) .sia-dash-history__amount[data-sia-state="good"] { color: var(--sia-good); }
:where(html.si-atelier) .sia-dash-history__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-more { margin-top: var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-keybox { flex-direction: column; align-items: stretch; gap: var(--sia-space-2); margin: var(--sia-space-3) 0 0; }
/* Abonnement : section affichée en flex par dashboard.js (display posé en ligne). */
:where(html.si-atelier) .sia-dash-subscription { flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sia-space-3) var(--sia-space-5); }
:where(html.si-atelier) .sia-dash-subscription p { max-width: 70ch; margin: var(--sia-space-1) 0 0; color: var(--sia-muted); }
:where(html.si-atelier) .sia-dash-subscription > .sia-btn { flex: none; }

/* Administration : tuiles, barres quotidiennes, répartitions. */
:where(html.si-atelier) .sia-kpi__label { color: var(--sia-muted); font-size: 0.76rem; }
/* Tuiles de coûts : montants longs (12 décimales), trois par ligne au plus. */
:where(html.si-atelier) .sia-dash-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
:where(html.si-atelier) .sia-kpi__value {
  font-family: var(--sia-serif);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 140px;
  padding-top: var(--sia-space-2);
  overflow-x: auto;
}
:where(html.si-atelier) .sia-bars__item { display: flex; flex: 1 0 10px; flex-direction: column; justify-content: flex-end; align-items: stretch; max-width: 96px; height: 100%; min-width: 10px; }
:where(html.si-atelier) .sia-bars__bar { min-height: 1px; border-radius: 2px 2px 0 0; background: var(--sia-muted); }
/* Libellé rogné à la largeur de sa barre : jamais de chevauchement. */
:where(html.si-atelier) .sia-bars__label { margin-top: 4px; overflow: hidden; color: var(--sia-muted); font-size: var(--sia-text-label); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-dash-breakdowns { display: flex; flex-direction: column; gap: var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-breakdown { display: flex; flex-direction: column; gap: 6px; }
:where(html.si-atelier) .sia-dash-breakdown__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sia-space-2); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-breakdown__copy { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-breakdown__copy small { color: var(--sia-muted); }
:where(html.si-atelier) .sia-dash-bar { height: 4px; border-radius: var(--sia-r-pill); background: var(--sia-line); overflow: hidden; }
:where(html.si-atelier) .sia-dash-bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--sia-ink); }

/* Fenêtres existantes (div.modal) et retour produit (<dialog>) : la boîte prend
   la modale Atelier, le fond l'ombre de la page ; affichage toujours piloté par
   les modules (style display en ligne, attribut open). */
:where(html.si-atelier) .sia-dash-overlay { background: var(--sia-backdrop); }
:where(html.si-atelier) .sia-dash-modal { padding: var(--sia-space-4) var(--sia-space-4) 0; line-height: 1.5; }
:where(html.si-atelier) .sia-dash-modal--wide { width: min(760px, calc(100vw - 32px)); }
:where(html.si-atelier) .sia-dash-modal__title { margin: 0 0 var(--sia-space-1); }
:where(html.si-atelier) .sia-dash-modal__subtitle { margin: 0 0 var(--sia-space-3); color: var(--sia-muted); font-size: var(--sia-text-ui); overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sia-space-3); }
:where(html.si-atelier) .sia-dash-modal p { overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-dash-modal__foot {
  position: sticky;
  bottom: 0;
  margin: var(--sia-space-4) calc(-1 * var(--sia-space-4)) 0;
  padding: var(--sia-space-3) var(--sia-space-4);
}
:where(html.si-atelier) .sia-dash-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sia-space-2); margin: 0 0 var(--sia-space-3); }
/* .share-option (0,1,0) reste sous contrat : mêmes propriétés redéfinies. */
:where(html.si-atelier) .sia-dash-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sia-space-2) var(--sia-space-3);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--sia-dur) var(--sia-ease), background-color var(--sia-dur) var(--sia-ease);
}
:where(html.si-atelier) .sia-dash-option:hover,
:where(html.si-atelier) .sia-dash-option[data-sia-state="on"] { border-color: var(--sia-ink); background: var(--sia-soft); }
html.si-atelier .sia-dash-option:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; }
:where(html.si-atelier) .sia-dash-option i { color: var(--sia-muted); }
:where(html.si-atelier) .sia-dash-option span { color: var(--sia-ink); font-weight: 650; }
:where(html.si-atelier) .sia-dash-option small { color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-dash-dialog { margin: auto; }
:where(html.si-atelier) .sia-dash-dialog p { margin: var(--sia-space-2) 0; color: var(--sia-muted); }
:where(html.si-atelier) .sia-dash-success p { color: var(--sia-ink); }

/* Sous 860 px, chaque ligne se met en pile : titre, requête, type et date, faits,
   publication, actions ; l'en-tête de colonnes disparaît. */
@media (max-width: 860px) {
  :where(html.si-atelier) .sia-arow-head { display: none; }
  :where(html.si-atelier) .sia-arow {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "title   title"
      "query   query"
      "type    when"
      "info    info"
      "publish publish"
      "actions actions";
    row-gap: 6px;
  }
  :where(html.si-atelier) .sia-arow__when { flex-flow: row wrap; align-self: center; column-gap: var(--sia-space-3); }
  :where(html.si-atelier) .sia-arow__actions { justify-content: flex-start; margin-top: 2px; }
  :where(html.si-atelier) .sia-dash-select { min-width: 0; width: 100%; max-width: none; }
  :where(html.si-atelier) .sia-dash-split { grid-template-columns: minmax(0, 1fr); }
  :where(html.si-atelier) .sia-dash-credit__usage { align-items: flex-start; text-align: left; }
  /* Historique des crédits : la date et les étiquettes passent sous l'opération. */
  :where(html.si-atelier) .sia-dash-history > li { grid-template-columns: minmax(0, 1fr); }
  :where(html.si-atelier) .sia-dash-history__meta { justify-content: flex-start; }
}

/* ----------------------------------------- page projet (phase 4) */
/* La page projet reprend les composants du dashboard (.sia-dash-*) ; seules son
   ossature (contexte de rubrique, sous-onglets, panneaux) et ses rubriques propres
   ont des classes .sia-proj-*. Le mode lecteur (.project-readonly … display: none
   !important) reste maître : aucune règle ici ne rend un contrôle visible. */
:where(html.si-atelier) .sia-proj .sia-dash-heading { margin-bottom: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2) var(--sia-space-4);
  margin: 0 0 var(--sia-space-4);
}
:where(html.si-atelier) .sia-proj-tabs { margin: 0 0 var(--sia-space-5); }
/* .project-tab (0,1,0) reste sous contrat ; son survol indigo (0,3,0) est repris. */
html.si-atelier .sia-proj-tab:hover:not(:disabled) { color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-tab > i { color: inherit; font-size: 0.85em; }
:where(html.si-atelier) .sia-proj-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-muted);
  font-size: var(--sia-text-label);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
:where(html.si-atelier) .sia-proj-panel-head { margin-bottom: var(--sia-space-4); }
/* En-têtes de bloc : titre puis description dessous (h3 + p sans enveloppe),
   titre de niveau 4 sans sa marge haute. */
:where(html.si-atelier) .sia-proj .sia-dash-head:has(> p) { flex-direction: column; align-items: flex-start; gap: var(--sia-space-1); }
:where(html.si-atelier) .sia-proj .sia-dash-head > p { margin-top: 0; }
:where(html.si-atelier) .sia-proj .sia-dash-head .sia-dash-h4 { margin: 0; }
/* Actions d'un en-tête (div.sia-row, aussi reprise comme __copy) : largeur propre, à droite ;
   un champ parmi elles (échéance des brouillons importés) garde sa largeur. */
:where(html.si-atelier) .sia-proj .sia-dash-head > .sia-row { flex: 0 1 auto; }
:where(html.si-atelier) .sia-proj .sia-dash-actions > .sia-input { flex: 0 1 auto; width: auto; min-width: 0; }

/* Formulaires, barres d'outils et listes partagés par les rubriques. */
:where(html.si-atelier) .sia-proj-form { margin: 0 0 var(--sia-space-4); padding: var(--sia-space-4); box-shadow: none; }
:where(html.si-atelier) .sia-proj-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--sia-space-3);
  margin-top: var(--sia-space-3);
}
:where(html.si-atelier) .sia-proj-form-row .sia-dash-label { margin-top: 0; }
:where(html.si-atelier) .sia-proj-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(html.si-atelier) .sia-proj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-space-2) var(--sia-space-3);
  margin: 0 0 var(--sia-space-3);
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-proj-toolbar .sia-input { width: auto; min-width: 0; max-width: 100%; }
:where(html.si-atelier) .sia-proj-toolbar__label { display: inline-flex; align-items: center; gap: 6px; }
:where(html.si-atelier) .sia-proj-toolbar__count { margin-left: auto; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-empty { padding: var(--sia-space-5) var(--sia-space-4); border: 1px dashed var(--sia-line-strong); border-radius: var(--sia-r-surface); }
:where(html.si-atelier) .sia-proj-empty > i { color: var(--sia-faint); font-size: 1.5rem; }
:where(html.si-atelier) .sia-proj-empty > p { max-width: 52ch; margin: 0; }
/* Pastille cliquable (analyse liée, commentaires) : bouton existant. */
:where(html.si-atelier) .sia-proj-pill-btn { gap: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
:where(html.si-atelier) .sia-proj-pill-btn:hover { border-color: var(--sia-line-strong); color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-pill-btn[data-sia-state="on"] { border-color: var(--sia-ink); background: var(--sia-paper); color: var(--sia-ink); }
html.si-atelier .sia-proj-pill-btn:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; }
:where(html.si-atelier) .sia-proj-pill-btn i { font-size: 0.7rem; }

/* Cartes de liste (sujets de la roadmap, suggestions, images). .roadmap-card
   (0,1,0) reste sous l'habillage : .sia-card en redéfinit bordure et rayon. */
:where(html.si-atelier) .sia-proj-cards { display: flex; flex-direction: column; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-card__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
:where(html.si-atelier) .sia-proj-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--sia-ink);
  font-family: var(--sia-serif);
  font-size: var(--sia-text-md);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
:where(html.si-atelier) .sia-proj-card__meta { display: flex; flex-wrap: wrap; gap: var(--sia-space-1) var(--sia-space-3); color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-card__head { justify-content: space-between; }
:where(html.si-atelier) .sia-proj-card__head label { display: inline-flex; align-items: center; gap: var(--sia-space-2); font-weight: 650; }
:where(html.si-atelier) .sia-proj-card__head input { width: 16px; height: 16px; accent-color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-edit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sia-space-2);
  padding-top: var(--sia-space-2);
  border-top: 1px solid var(--sia-line);
}
:where(html.si-atelier) .sia-proj-edit-row .sia-input { flex: 1 1 150px; width: auto; min-width: 0; }
:where(html.si-atelier) .sia-proj-selection { margin-top: var(--sia-space-3); padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-warnings { flex-direction: column; gap: 2px; margin: var(--sia-space-2) 0; padding-left: 2rem; }

/* Roadmap : vues, kanban (colonnes défilantes) et calendrier (grille de 7 jours). */
/* .roadmap-view-switch et .rv-btn (lues) restent : fond, retrait et survol repris. */
:where(html.si-atelier) .sia-proj-views { flex: none; gap: 0; padding: 0; background: var(--sia-paper); }
:where(html.si-atelier) .sia-proj-views > button:hover:not([data-sia-state="on"]) { color: var(--sia-ink); }
/* Kanban (démo « Roadmap ») : quatre étapes côte à côte, sans défilement horizontal ;
   la colonne Abandonné (filtre « Archivés ») passe à la ligne. Carte : nature, titre,
   repères, échéance et statut, puis « Ouvrir le contenu » ; toute la carte ouvre la fiche. */
:where(html.si-atelier) .sia-proj-kanban {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr));
  align-items: start;
  gap: var(--sia-space-3);
}
:where(html.si-atelier) .sia-proj-kb-col { min-height: 220px; }
:where(html.si-atelier) .sia-proj-kb-col__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 34px; }
:where(html.si-atelier) .sia-proj-kb-col__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sia-space-2);
  margin: 0;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
  font-weight: 650;
}
:where(html.si-atelier) .sia-proj-kb-col__body {
  display: flex;
  flex-direction: column;
  gap: var(--sia-space-2);
  min-height: 72px;
  border-radius: var(--sia-r-ctl);
}
:where(html.si-atelier) :is(.sia-proj-kb-col__body, .sia-proj-cal__day, .sia-proj-cal__unplanned-list)[data-sia-state="drop"] {
  background: var(--sia-accent-soft);
  outline: 1px dashed var(--sia-accent);
  outline-offset: -4px;
}
:where(html.si-atelier) .sia-proj-kb-card { gap: var(--sia-space-1); padding: var(--sia-space-3); cursor: pointer; }
:where(html.si-atelier) .sia-proj-kb-card[draggable="true"] { cursor: grab; }
:where(html.si-atelier) .sia-proj-kb-card[draggable="true"]:active { cursor: grabbing; }
:where(html.si-atelier) .sia-proj-kb-card:hover { border-color: var(--sia-line-strong); }
:where(html.si-atelier) :is(.sia-proj-kb-card, .sia-proj-cal__chip)[data-sia-state="drag"] { opacity: 0.5; }
:where(html.si-atelier) :is(.sia-proj-kb-card, .sia-proj-cal__chip)[data-sia-archived] { opacity: 0.65; }
:where(html.si-atelier) .sia-proj-kb-card__top { flex-wrap: wrap; gap: 6px; }
:where(html.si-atelier) .sia-proj-kb-card__top > .sia-proj-pill-btn { margin-left: auto; }
:where(html.si-atelier) .sia-proj-kb-type[data-kind="creation"] { background: var(--sia-info-soft); color: var(--sia-info); }
:where(html.si-atelier) .sia-proj-kb-type[data-kind="optimization"] { background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-proj-kb-type[data-kind="technical"] { background: var(--sia-plum-soft); color: var(--sia-plum); }
:where(html.si-atelier) .sia-card .sia-proj-kb-card__title { margin: var(--sia-space-1) 0 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: 0.98rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-card .sia-proj-kb-card__meta { font-size: 0.78rem; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-kb-card__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-2);
  margin-top: var(--sia-space-2);
  padding-top: var(--sia-space-2);
  border-top: 1px solid var(--sia-line);
}
:where(html.si-atelier) .sia-proj-kb-status { width: auto; max-width: 100%; min-height: 32px; padding: 2px 8px; font-size: 0.78rem; }
:where(html.si-atelier) .sia-proj-kb-card__open {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sia-accent);
  font: inherit;
  font-size: var(--sia-text-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
html.si-atelier .sia-proj-kb-card__open:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; }

/* Fenêtres de la roadmap : calque fixe sous les fenêtres des modules (div.modal,
   z-index 99999, brouillon et commentaires). Le formulaire et la fiche y perdent leur
   cadre ; la tête porte le titre et l'étape. */
:where(html.si-atelier) .sia-proj-layer {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: center;
  padding: var(--sia-space-4);
  background: var(--sia-backdrop);
}
:where(html.si-atelier) .sia-proj-dialog { width: min(760px, calc(100vw - 32px)); max-height: min(90vh, 880px); overscroll-behavior: contain; }
:where(html.si-atelier) .sia-proj-dialog:focus { outline: none; }
:where(html.si-atelier) .sia-proj-dialog__head {
  position: sticky;
  top: 0;
  z-index: 1;
  align-items: flex-start;
  padding-bottom: var(--sia-space-3);
  border-bottom: 1px solid var(--sia-line);
  background: var(--sia-paper);
}
:where(html.si-atelier) .sia-proj-dialog__head p { margin: 4px 0 0; color: var(--sia-muted); font-size: var(--sia-text-ui); }
:where(html.si-atelier) .sia-proj-dialog .sia-proj-form { margin: 0; padding: var(--sia-space-3) var(--sia-space-4) var(--sia-space-4); border: 0; background: none; }
:where(html.si-atelier) .sia-proj-dialog .sia-proj-card { padding: 0; border: 0; background: none; }
:where(html.si-atelier) .sia-proj-dialog .sia-proj-edit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sia-space-3); margin-top: var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-dialog .sia-proj-edit-row .sia-input { flex: none; width: 100%; }
:where(html.si-atelier) .sia-proj-dialog__actions { flex-wrap: wrap; gap: var(--sia-space-2); margin-top: var(--sia-space-4); padding-top: var(--sia-space-3); border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-dialog__actions > .sia-btn--danger { margin-left: auto; }
/* .btn-primary garde sa marge haute de 16 px (search_intent_dashboard.css) : annulée ici. */
:where(html.si-atelier) .sia-proj-dialog__actions > .sia-btn { margin-top: 0; }
:where(html.si-atelier) .sia-proj-due { display: inline-flex; align-items: center; gap: 4px; color: var(--sia-muted); font-size: 0.74rem; }
:where(html.si-atelier) .sia-proj-due[data-sia-state="bad"] { color: var(--sia-bad); font-weight: 650; }
:where(html.si-atelier) .sia-proj-cal__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sia-space-2); margin: 0 0 var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-cal__month { min-width: 11ch; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; text-align: center; }
:where(html.si-atelier) .sia-proj-cal__weekdays,
:where(html.si-atelier) .sia-proj-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
:where(html.si-atelier) .sia-proj-cal__weekdays { margin-bottom: 4px; }
:where(html.si-atelier) .sia-proj-cal__weekdays > span { color: var(--sia-muted); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
:where(html.si-atelier) .sia-proj-cal__day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  min-height: 92px;
  padding: 6px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-paper);
}
:where(html.si-atelier) .sia-proj-cal__day[data-sia-blank] { border-color: transparent; background: transparent; }
:where(html.si-atelier) .sia-proj-cal__day[data-sia-today] { border-color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-cal__num { color: var(--sia-muted); font-size: var(--sia-text-label); font-weight: 650; font-variant-numeric: tabular-nums; }
:where(html.si-atelier) .sia-proj-cal__day[data-sia-today] .sia-proj-cal__num { color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-cal__items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
:where(html.si-atelier) .sia-proj-cal__chip {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-size: 0.74rem;
  cursor: grab;
}
:where(html.si-atelier) .sia-proj-cal__chip:hover { border-color: var(--sia-line-strong); }
:where(html.si-atelier) .sia-proj-cal__chip[data-sia-state="bad"] { border-color: var(--sia-bad-line); color: var(--sia-bad); }
:where(html.si-atelier) .sia-proj-cal__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sia-faint); }
:where(html.si-atelier) .sia-proj-cal__chip[data-sia-prio="warn"] .sia-proj-cal__dot { background: var(--sia-warn); }
:where(html.si-atelier) .sia-proj-cal__chip[data-sia-prio="bad"] .sia-proj-cal__dot { background: var(--sia-bad); }
:where(html.si-atelier) .sia-proj-cal__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-proj-cal__unplanned { margin-top: var(--sia-space-3); padding: var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-cal__unplanned-head { margin-bottom: var(--sia-space-2); color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-cal__unplanned-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 40px; padding: 4px; border-radius: var(--sia-r-ctl); }
:where(html.si-atelier) .sia-proj-cal__unplanned-list .sia-proj-cal__chip { max-width: 220px; }

/* Fenêtre du brouillon : onglets, éditeur, aperçu Markdown, images, publication. */
:where(html.si-atelier) .sia-proj-draft-tabs { margin: var(--sia-space-2) 0 var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-textarea { min-height: 9rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--sia-text-sm); line-height: 1.6; }
:where(html.si-atelier) .sia-proj-draft-preview {
  max-width: none;
  padding: var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  overflow-wrap: anywhere;
}
/* Aperçus Markdown (brouillon, contexte, style). .draft-preview (0,1,0) et ses enfants
   (0,1,1) restent sous l'aperçu du brouillon : ces règles, à deux classes, les reprennent. */
:where(html.si-atelier) .sia-proj-md { color: var(--sia-ink); overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-md p { margin: 0 0 0.85em; }
:where(html.si-atelier) .sia-proj-md .sia-proj-md-heading { margin: 1.1em 0 0.5em; color: var(--sia-ink); font-family: var(--sia-serif); line-height: 1.3; }
:where(html.si-atelier) .sia-proj-md .sia-proj-md-quote { margin: 0 0 0.85em; padding-left: 14px; border-left: 1px solid var(--sia-line-strong); color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-md .sia-link { color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-md .sia-code { border-color: var(--sia-line); background: var(--sia-soft); color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-md .sia-dash-code { background: var(--sia-soft); color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-md .sia-dash-code .sia-code { padding: 0; border: 0; background: none; }
:where(html.si-atelier) .sia-proj-md .sia-table { margin: 0 0 0.85em; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-md .sia-divider { margin: 1.2em 0; }
:where(html.si-atelier) .sia-proj-image { flex-direction: row; align-items: center; gap: var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-image[data-sia-state="on"] { border-color: var(--sia-good-line); }
:where(html.si-atelier) .sia-proj-image__thumb { flex: none; width: 72px; height: 54px; border: 1px solid var(--sia-line); border-radius: var(--sia-r-ctl); object-fit: cover; }
:where(html.si-atelier) .sia-proj-image__meta { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
:where(html.si-atelier) .sia-proj-image__meta > .sia-pill { align-self: flex-start; }
:where(html.si-atelier) .sia-proj-field { margin-top: var(--sia-space-2); color: var(--sia-ink); font-size: var(--sia-text-sm); font-weight: 650; }
:where(html.si-atelier) .sia-proj-comments { display: flex; flex-direction: column; gap: var(--sia-space-2); max-height: 46vh; margin: 0 0 var(--sia-space-3); overflow-y: auto; }
:where(html.si-atelier) .sia-proj-comment { padding: var(--sia-space-2) var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-soft); }
:where(html.si-atelier) .sia-proj-comment__head { justify-content: space-between; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-comment__body { margin-top: 4px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Contexte et style : éditeur Markdown à deux volets, aperçu en direct, indicateur. */
:where(html.si-atelier) .sia-proj-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 520px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  overflow: hidden;
}
:where(html.si-atelier) .sia-proj-editor__pane { display: flex; flex-direction: column; min-width: 0; }
:where(html.si-atelier) .sia-proj-editor__pane:first-child { border-right: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sia-space-3);
  padding: var(--sia-space-2) var(--sia-space-4);
  border-bottom: 1px solid var(--sia-line);
  background: var(--sia-soft);
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
  font-weight: 650;
}
:where(html.si-atelier) .sia-proj-editor__head i { margin-right: 6px; color: var(--sia-faint); }
/* textarea.sia-input (0,1,1) : même spécificité pour le champ de l'éditeur. */
:where(html.si-atelier) textarea.sia-proj-editor__input {
  flex: 1;
  min-height: 0;
  padding: var(--sia-space-4);
  border: 0;
  border-radius: 0;
  background: var(--sia-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--sia-text-sm);
  line-height: 1.65;
  resize: none;
  tab-size: 2;
}
/* Anneau de focus à l'intérieur du volet (le cadre de l'éditeur rogne l'extérieur). */
html.si-atelier .sia-proj-editor__input:focus-visible { outline-offset: -3px; border-radius: 0; }
:where(html.si-atelier) .sia-proj-editor__preview { flex: 1; max-width: none; padding: var(--sia-space-4) var(--sia-space-5); overflow-y: auto; font-size: var(--sia-text-md); }
:where(html.si-atelier) .sia-proj-editor__preview[data-sia-state="empty"] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
  font-style: italic;
}
/* Indicateur d'enregistrement : .saved-indicator.saving… (0,2,0) restent, repris ici. */
:where(html.si-atelier) .sia-proj-saved { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--sia-r-pill); font-size: var(--sia-text-sm); font-weight: 650; }
:where(html.si-atelier) .sia-proj-saved:not([data-sia-state]) { background: transparent; color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-saved[data-sia-state="good"] { background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-proj-saved[data-sia-state="warn"] { background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-proj-saved[data-sia-state="bad"] { background: var(--sia-bad-soft); color: var(--sia-bad); }

/* Cartes de liste (feedbacks, skills, concurrents, sitemaps) : .fb-card garde sa grille. */
:where(html.si-atelier) .sia-proj-fbcard {
  padding: var(--sia-space-3) var(--sia-space-4);
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  color: var(--sia-ink);
  font-family: var(--sia-sans);
}
:where(html.si-atelier) .sia-proj-fbcard[role="button"] { cursor: pointer; }
:where(html.si-atelier) .sia-proj-fbcard[role="button"]:hover { border-color: var(--sia-line-strong); }
html.si-atelier .sia-proj-fbcard[role="button"]:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; }
:where(html.si-atelier) .sia-proj-fbcard__text { margin: 0 0 var(--sia-space-2); color: var(--sia-ink); font-size: var(--sia-text-ui); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-date { margin-left: auto; font-size: var(--sia-text-label); }

/* Partage, rapports automatiques, destinations de publication, identité du site. */
:where(html.si-atelier) .sia-proj-member { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sia-space-2) var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-member__role { width: auto; min-width: 140px; }
:where(html.si-atelier) .sia-proj-group { margin: var(--sia-space-3) 0; padding: var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); }
:where(html.si-atelier) .sia-proj-auto__main { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sia-space-2) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-auto__next { margin: 0; padding-top: var(--sia-space-2); border-top: 1px solid var(--sia-line); color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-run {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sia-space-1) var(--sia-space-3);
  padding: var(--sia-space-2) 0;
  border-bottom: 1px solid var(--sia-line);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-proj-run small { grid-column: 2 / -1; color: var(--sia-bad); }
:where(html.si-atelier) .sia-proj-providers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-provider { flex-direction: row; align-items: center; gap: var(--sia-space-3); padding: var(--sia-space-2) var(--sia-space-3); text-decoration: none; cursor: pointer; }
:where(html.si-atelier) .sia-proj-provider:hover { border-color: var(--sia-line-strong); background: var(--sia-soft); }
:where(html.si-atelier) .sia-proj-provider[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); }
html.si-atelier .sia-proj-provider:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: 2px; }
:where(html.si-atelier) .sia-proj-provider__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-paper);
  color: var(--sia-ink);
}
:where(html.si-atelier) .sia-proj-provider__main { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--sia-text-ui); }
:where(html.si-atelier) .sia-proj-provider__main small { overflow: hidden; color: var(--sia-muted); font-size: var(--sia-text-sm); text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-proj-form-actions { display: flex; align-items: flex-end; min-width: 0; }

/* Mémoire du projet : synthèse, revue, bibliothèque, fiche (<dialog>) et carte. */
:where(html.si-atelier) .sia-proj-memory { color: var(--sia-ink); font-family: var(--sia-sans); }
:where(html.si-atelier) .sia-proj-memory__section { margin: var(--sia-space-4) 0; }
:where(html.si-atelier) .sia-proj-memory__form { align-items: flex-end; margin: var(--sia-space-3) 0; }
:where(html.si-atelier) .sia-proj-memory__form > .sia-field { flex: 1 1 170px; color: var(--sia-ink); font-size: var(--sia-text-sm); font-weight: 650; }
:where(html.si-atelier) .sia-proj-memory__prose { margin: var(--sia-space-3) 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-read); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-memory__row { padding: var(--sia-space-3) 0; border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-memory__row p { margin: 0 0 6px; }
:where(html.si-atelier) .sia-proj-memory__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-memory__excerpt {
  display: -webkit-box;
  margin: var(--sia-space-1) 0;
  overflow: hidden;
  color: var(--sia-ink);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:where(html.si-atelier) .sia-proj-memory__editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-memory__editor > .sia-field:has(textarea, [name="title"], [name="scope_value"]) { grid-column: 1 / -1; }
:where(html.si-atelier) .sia-proj-memory__editor > p { grid-column: 1 / -1; }
:where(html.si-atelier) .sia-proj-memory__relations { display: grid; grid-column: 1 / -1; gap: var(--sia-space-2); margin: 0; padding: var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); }
:where(html.si-atelier) .sia-proj-memory__relation { justify-content: space-between; padding: 6px 0; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-memory__server { max-height: 260px; margin-top: var(--sia-space-3); padding-top: var(--sia-space-3); border-top: 1px solid var(--sia-warn-line); overflow: auto; }
:where(html.si-atelier) .sia-proj-memory__graph { margin-top: var(--sia-space-5); padding-top: var(--sia-space-2); border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-meta {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: 6px var(--sia-space-4);
  margin: var(--sia-space-3) 0;
  padding: var(--sia-space-3) var(--sia-space-4);
  border-radius: var(--sia-r-surface);
  background: var(--sia-soft);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-proj-meta__term { color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-meta__value { margin: 0; color: var(--sia-ink); overflow-wrap: anywhere; }
@media (max-width: 700px) {
  :where(html.si-atelier) .sia-proj-memory__editor,
  :where(html.si-atelier) .sia-proj-meta { grid-template-columns: minmax(0, 1fr); }
}
/* Carte : la scène, les liens (SVG) et les nœuds (boutons placés par le module) gardent
   leur géométrie ; couleurs reprises au-dessus des règles existantes (jusqu'à 0,2,0). */
:where(html.si-atelier) .sia-proj-grow { flex: 1 1 250px; }
:where(html.si-atelier) .sia-proj-graph { border-color: var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); box-shadow: none; }
html.si-atelier .sia-proj-graph__arrow { fill: var(--sia-faint); }
html.si-atelier .sia-proj-graph__edge { stroke: var(--sia-faint); }
html.si-atelier .sia-proj-graph__edge[data-sia-state="on"] { stroke: var(--sia-ink); }
html.si-atelier .sia-proj-graph__node { background: var(--sia-paper); color: var(--sia-ink); box-shadow: none; }
html.si-atelier .sia-proj-graph__node[data-sia-state="warn"] { background: var(--sia-warn-soft); }
html.si-atelier .sia-proj-graph__node[data-sia-state="info"] { background: var(--sia-info-soft); }
html.si-atelier .sia-proj-graph__node:is(:hover, :focus-visible, [data-sia-state="on"]) { border-color: var(--sia-ink); }
html.si-atelier .sia-proj-graph__kind { color: var(--sia-muted); }
html.si-atelier .sia-proj-graph__title { color: var(--sia-ink); }
html.si-atelier .sia-proj-graph__meta { color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-graph__empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sia-space-2);
  width: min(320px, calc(100% - 32px));
  height: fit-content;
  margin: auto;
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
  text-align: center;
}
:where(html.si-atelier) .sia-proj-graph__empty i { color: var(--sia-faint); font-size: 1.5rem; }
:where(html.si-atelier) .sia-proj-graph-inspector { min-height: 260px; padding: var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-graph-inspector h3 { margin: 0 0 var(--sia-space-2); color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.3; }

/* Rubriques Performances (GSC/GA4, trafic IA, crawl, logs serveur, positions,
   netlinking) : fenêtres, tuiles, listes de résultats et graphiques faits main. */
:where(html.si-atelier) .sia-notice[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); }
:where(html.si-atelier) .sia-notice[data-sia-state="warn"] { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); }
:where(html.si-atelier) .sia-notice[data-sia-state="bad"] { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); }
:where(html.si-atelier) .sia-chip[data-sia-state="on"] { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }
:where(html.si-atelier) .sia-proj-window { display: flex; flex-direction: column; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-window > .sia-dash-head { margin: 0; }
:where(html.si-atelier) .sia-proj-window__body { min-width: 0; overflow-x: auto; }
:where(html.si-atelier) .sia-proj-controls { gap: var(--sia-space-2) var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-controls .sia-input { flex: 1 1 180px; width: auto; min-width: 0; }
:where(html.si-atelier) .sia-proj-controls > .sia-btn { flex: none; }
:where(html.si-atelier) .sia-proj-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sia-space-1) var(--sia-space-3);
  margin: 0 0 var(--sia-space-3);
  color: var(--sia-muted);
  font-size: var(--sia-text-sm);
}
:where(html.si-atelier) .sia-proj-notes { margin: var(--sia-space-3) 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.5; }
:where(html.si-atelier) .sia-proj-loading { flex-direction: row; justify-content: center; padding: var(--sia-space-4); font-size: var(--sia-text-sm); }

/* Tuiles : libellé au-dessus du chiffre, comme les indicateurs du dashboard ;
   les icônes décoratives des tuiles existantes ne sont pas reprises. */
:where(html.si-atelier) .sia-proj-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: var(--sia-space-3) 0; }
:where(html.si-atelier) .sia-proj-kpis > .sia-kpi { gap: 2px; padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-kpis .sia-kpi__label { order: -1; }
:where(html.si-atelier) .sia-proj-kpis .sia-kpi__value { font-size: 1.45rem; letter-spacing: 0; }
:where(html.si-atelier) .sia-proj-kpi-icon { display: none; }
:where(html.si-atelier) .sia-proj-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
:where(html.si-atelier) .sia-proj-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-muted);
  font-size: var(--sia-text-label);
  font-weight: 650;
  line-height: 1.5;
}
:where(html.si-atelier) .sia-proj-delta[data-sia-state="good"] { background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-proj-delta[data-sia-state="bad"] { background: var(--sia-bad-soft); color: var(--sia-bad); }

/* Lignes de résultats : contenu à gauche, métriques à droite (dessous sur mobile). */
:where(html.si-atelier) .sia-proj-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sia-space-2) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-row > .sia-proj-card__main { flex: 1 1 280px; }
:where(html.si-atelier) .sia-proj-row > .sia-proj-card__meta { flex: 0 1 auto; justify-content: flex-end; gap: 6px; }
:where(html.si-atelier) .sia-proj-card__main > .sia-pill { align-self: flex-start; }
:where(html.si-atelier) .sia-proj-metric {
  padding: 1px 8px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-pill);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-size: var(--sia-text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
:where(html.si-atelier) .sia-proj-tone[data-sia-state="good"] { color: var(--sia-good); }
:where(html.si-atelier) .sia-proj-tone[data-sia-state="bad"] { color: var(--sia-bad); }
:where(html.si-atelier) .sia-proj-metric.sia-proj-tone[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); }
:where(html.si-atelier) .sia-proj-metric.sia-proj-tone[data-sia-state="bad"] { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); }
:where(html.si-atelier) .sia-proj-small { font-size: var(--sia-text-sm); overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-row .sia-dash-ul { font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-row .sia-link { font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-pill-wrap { max-width: 100%; white-space: normal; }
/* Titres de liste : icône contre le texte, compteur ou indication à droite. */
:where(html.si-atelier) .sia-proj .sia-dash-head--list { justify-content: flex-start; }
:where(html.si-atelier) .sia-proj .sia-dash-head--list > :is(.sia-proj-small, .sia-muted) { margin-left: auto; }

/* Histogramme du trafic IA et barres horizontales (largeurs posées en ligne). */
:where(html.si-atelier) .sia-proj-spark { display: flex; align-items: flex-end; gap: 2px; height: 70px; }
:where(html.si-atelier) .sia-proj-spark__bar { flex: 1 1 auto; min-width: 2px; border-radius: 2px 2px 0 0; background: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-spark__bar:hover { background: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-hbars { display: flex; flex-direction: column; gap: var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-hbar { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-hbar small { color: var(--sia-muted); font-size: var(--sia-text-label); }
:where(html.si-atelier) .sia-proj-hbar__label { display: flex; justify-content: space-between; gap: var(--sia-space-2); min-width: 0; color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-hbar__label > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-proj-hbar--inline { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; align-items: center; gap: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-hbar--inline > .sia-proj-hbar__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(html.si-atelier) .sia-proj-hbar--inline > .sia-num { min-width: 3ch; color: var(--sia-ink); font-weight: 650; text-align: right; }
:where(html.si-atelier) .sia-proj-hbar > .sia-dash-bar { height: 6px; }

/* Cartes de graphiques. Les couleurs des séries (attributs du module, pastilles
   de légende en ligne) restent ; grille, axes, guides, points et infobulles
   prennent les tokens, au-dessus des règles existantes (jusqu'à 0,2,0). */
:where(html.si-atelier) .sia-proj-charts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
:where(html.si-atelier) .sia-proj-chart { display: flex; flex-direction: column; gap: var(--sia-space-2); padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-chart > .sia-dash-head { margin: 0; }
:where(html.si-atelier) .sia-proj-chart__plot { min-width: 0; }
html.si-atelier .sia-chart-grid { stroke: var(--sia-line-strong); }
html.si-atelier .sia-chart-axis { fill: var(--sia-muted); }
html.si-atelier .sia-chart-guide { stroke: var(--sia-faint); }
html.si-atelier .sia-chart-dot { stroke: var(--sia-paper); }
html.si-atelier .sia-chart-spark { stroke: var(--sia-ink); }
html.si-atelier .sia-chart-spark-dot { fill: var(--sia-ink); }
html.si-atelier .sia-chart-focus { fill: var(--sia-paper); stroke: var(--sia-ink); }
html.si-atelier .sia-chart-value { fill: var(--sia-ink); font-family: var(--sia-serif); font-weight: 700; }
html.si-atelier .sia-chart-tip {
  padding: 5px 9px;
  border: 1px solid var(--sia-ink);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-ink);
  color: var(--sia-on-ink);
  box-shadow: var(--sia-shadow-pop);
  font-family: var(--sia-sans);
}
html.si-atelier .sia-chart-tip span { color: inherit; opacity: 0.85; }
:where(html.si-atelier) .sia-proj-legend { display: flex; flex-wrap: wrap; gap: 6px var(--sia-space-4); margin-top: var(--sia-space-2); color: var(--sia-muted); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-legend b { color: var(--sia-ink); }

/* Carte thermique GSC : en-têtes collants opaques, cellules sur la couleur posée
   en ligne (texte inversé conservé), liens des pages lisibles. */
:where(html.si-atelier) .sia-proj-heatmap-toggles { margin: 0 0 var(--sia-space-3); }
:where(html.si-atelier) .sia-proj-heatmap { font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-heatmap td,
:where(html.si-atelier) .sia-proj-heatmap th { padding: 7px 10px; border-color: var(--sia-line); color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-heatmap thead th { color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-heatmap tbody th { color: var(--sia-ink); letter-spacing: 0; text-transform: none; }
html.si-atelier .sia-proj-heatmap td { background: transparent; }
html.si-atelier .sia-proj-heatmap thead th { background: var(--sia-soft); }
html.si-atelier .sia-proj-heatmap tbody th { background: var(--sia-paper); }
html.si-atelier .sia-proj-heatmap .sia-link { color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-trend { margin-left: 6px; font-size: var(--sia-text-label); text-transform: uppercase; }

/* Crawl et maillage : options, automatisation, tableaux en grille défilants. */
:where(html.si-atelier) .sia-proj-wide { grid-column: 1 / -1; }
:where(html.si-atelier) .sia-proj-options { display: flex; flex-wrap: wrap; gap: var(--sia-space-2) var(--sia-space-4); margin: var(--sia-space-2) 0; }
:where(html.si-atelier) .sia-proj-inline-box { display: flex; flex-direction: column; gap: var(--sia-space-2); margin: var(--sia-space-3) 0; padding: var(--sia-space-3) var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-inline-box .sia-input { flex: 0 1 auto; width: auto; min-width: 0; }
:where(html.si-atelier) .sia-proj-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); }
/* Lignes en grille du module (gabarit conservé) : couleurs seulement. */
:where(html.si-atelier) .sia-proj-gridrow { border-bottom-color: var(--sia-line); background: var(--sia-paper); color: var(--sia-ink); font-size: var(--sia-text-sm); }
:where(html.si-atelier) .sia-proj-gridrow span { color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-gridrow .sia-link { color: var(--sia-ink); }

/* Logs serveur : URLs non couvertes par le crawl (liste défilante). */
:where(html.si-atelier) .sia-proj-coverage { margin-top: var(--sia-space-3); padding-top: var(--sia-space-3); border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-uncovered { max-height: 270px; padding: 4px var(--sia-space-2); overflow-y: auto; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-soft); }
:where(html.si-atelier) .sia-proj-uncovered__row { display: flex; align-items: baseline; gap: var(--sia-space-2); padding: 6px 2px; border-bottom: 1px solid var(--sia-line); font-size: var(--sia-text-sm); line-height: 1.35; overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-uncovered__row:last-child { border-bottom: 0; }
:where(html.si-atelier) .sia-proj-uncovered__row i { color: var(--sia-bad); font-size: 0.65rem; }
:where(html.si-atelier) .sia-dash-hint[data-sia-state="good"] { color: var(--sia-good); }

/* Assistant d'installation des logs serveur : étapes, consignes, permissions. */
:where(html.si-atelier) .sia-proj-step { border: 1px solid var(--sia-line-strong); background: var(--sia-paper); color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-step[data-sia-state="on"] { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }
:where(html.si-atelier) .sia-proj-step[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-proj-step-line { flex: 1; min-width: 24px; max-width: 80px; height: 1px; background: var(--sia-line-strong); }
:where(html.si-atelier) .sia-proj-step-panel { padding: var(--sia-space-4) var(--sia-space-5); }
:where(html.si-atelier) .sia-proj-step-head { display: flex; align-items: flex-start; gap: var(--sia-space-3); margin-bottom: var(--sia-space-4); }
:where(html.si-atelier) .sia-proj-step-head h3 { margin: 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); line-height: 1.35; }
:where(html.si-atelier) .sia-proj-step-head p { margin: 4px 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.5; }
:where(html.si-atelier) .sia-proj-instruction { display: flex; align-items: flex-start; gap: var(--sia-space-3); color: var(--sia-ink); font-size: var(--sia-text-ui); }
:where(html.si-atelier) .sia-proj-instruction p { margin: 4px 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); line-height: 1.5; }
:where(html.si-atelier) .sia-proj-instruction .sia-btn { margin-top: var(--sia-space-2); }
:where(html.si-atelier) .sia-proj-perms { margin-top: var(--sia-space-2); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); font-size: var(--sia-text-sm); overflow: hidden; }
:where(html.si-atelier) .sia-proj-perms__row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--sia-line); color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-perms__row:first-child { border-top: 0; }
:where(html.si-atelier) .sia-proj-perms__head { background: var(--sia-soft); color: var(--sia-muted); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
:where(html.si-atelier) .sia-proj-progress { color: var(--sia-ink); }

/* Suivi de positions : la ligne garde sa grille, la position devient une pastille. */
:where(html.si-atelier) .sia-proj-search .sia-input { width: 100%; padding-left: 2.1rem; }
:where(html.si-atelier) .sia-proj-search > i { color: var(--sia-muted); }
:where(html.si-atelier) .sia-proj-rt-row { border-color: var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); box-shadow: none; color: var(--sia-ink); }
:where(html.si-atelier) .sia-proj-rt-row:hover { border-color: var(--sia-line-strong); box-shadow: none; }
:where(html.si-atelier) .sia-proj-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--sia-line);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-soft);
  color: var(--sia-ink);
  font-family: var(--sia-serif);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
:where(html.si-atelier) .sia-proj-rank[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); color: var(--sia-good); }
:where(html.si-atelier) .sia-proj-rank[data-sia-state="warn"] { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); color: var(--sia-warn); }
:where(html.si-atelier) .sia-proj-rank[data-sia-state="bad"] { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); color: var(--sia-bad); }

/* Netlinking : groupes de domaines repliables (<details>), lignes de liens. */
:where(html.si-atelier) .sia-proj-linkline { margin: 2px 0 0; color: var(--sia-muted); font-size: var(--sia-text-sm); overflow-wrap: anywhere; }
:where(html.si-atelier) .sia-proj-linkline i { margin-right: 5px; color: var(--sia-faint); }
:where(html.si-atelier) .sia-proj-linkline__label { color: var(--sia-ink); font-weight: 650; }
:where(html.si-atelier) .sia-proj-domain { gap: 0; padding: 0; overflow: hidden; }
:where(html.si-atelier) .sia-proj-domain__summary { padding: var(--sia-space-2) var(--sia-space-3); color: var(--sia-ink); }
html.si-atelier .sia-proj-domain__summary:hover { background: var(--sia-soft); }
html.si-atelier .sia-proj-domain__summary:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: -3px; }
:where(html.si-atelier) .sia-proj-domain > .sia-proj-cards { padding: var(--sia-space-2) var(--sia-space-3) var(--sia-space-3); border-top: 1px solid var(--sia-line); }
:where(html.si-atelier) .sia-proj-domain .sia-proj-row { padding: var(--sia-space-2) 0 0; border: 0; border-radius: 0; background: none; }

/* ------------------------------------------- outil d'analyse (phase 5) */
/* L'outil garde ses feuilles (aisearchintent*.css, dont « premium », chargée après la feuille
   Atelier et qui porte la mise en page de l'espace d'analyse) et ses styles en ligne. Ses
   règles passent donc par .sia-tool (0,3,1 et plus) ; les propriétés figées par un
   identifiant et !important (fond du bouton « Lancer l'analyse »…) gardent leur valeur. */
html.si-atelier .sia-tool { min-height: 100vh; background: var(--sia-page); color: var(--sia-ink); }
/* Composants du socle repris au-dessus des feuilles de l'outil. */
html.si-atelier .sia-tool .sia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sia-space-2);
  min-height: var(--sia-ctl-h);
  padding: 0.55rem 1rem;
  border: 1px solid var(--sia-line-strong);
  border-radius: var(--sia-r-ctl);
  background: var(--sia-paper);
  box-shadow: none;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  transform: none;
}
html.si-atelier .sia-tool .sia-btn:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-btn--sm { min-height: 34px; padding: 0.35rem 0.7rem; font-size: var(--sia-text-sm); }
html.si-atelier .sia-tool .sia-btn--primary { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }
html.si-atelier .sia-tool .sia-btn--primary:hover:not(:disabled, [aria-disabled="true"]) { border-color: var(--sia-accent); background: var(--sia-accent); color: var(--sia-on-ink); }
html.si-atelier .sia-tool .sia-input {
  min-height: var(--sia-ctl-h);
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sia-faint);
  border-radius: var(--sia-r-surface);
  background: var(--sia-paper);
  box-shadow: none;
  color: var(--sia-ink);
  font-family: var(--sia-sans);
  font-size: var(--sia-text-ui);
}
html.si-atelier .sia-tool .sia-seg { display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--sia-line-strong); border-radius: var(--sia-r-ctl); background: var(--sia-paper); box-shadow: none; overflow: hidden; }
html.si-atelier .sia-tool .sia-seg > button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 0; background: var(--sia-paper); box-shadow: none; color: var(--sia-muted); font-family: var(--sia-sans); font-size: 0.78rem; font-weight: 650; }
html.si-atelier .sia-tool .sia-seg > button:not(:first-child) { border-left: 1px solid var(--sia-line); }
html.si-atelier .sia-tool .sia-seg > button[aria-pressed="true"] { background: var(--sia-ink); color: var(--sia-on-ink); }

/* Barre d'actions fixe et pied de page. */
html.si-atelier .sia-tool .sia-tool-dock { border-bottom: 1px solid var(--sia-line); background: var(--sia-paper); box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-brand { color: var(--sia-ink); font-family: var(--sia-serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; }
html.si-atelier .sia-tool-footer { border-top: 1px solid var(--sia-line); background: var(--sia-page); color: var(--sia-muted); font-family: var(--sia-sans); }
html.si-atelier .sia-tool-footer .sia-link { border-bottom: 0; color: var(--sia-ink); }

/* Lanceur : modes, champs, bouton. Le fond blanc de l'onglet actif (.bg-white) est
   figé : son texte reste foncé dans les deux thèmes. */
html.si-atelier .sia-tool .sia-tool-launcher { border: 0; background: transparent; box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-modes { padding: 4px; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-soft); }
html.si-atelier .sia-tool .sia-tool-mode { min-height: 40px; border: 0; border-radius: var(--sia-r-ctl); background: transparent; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-ui); font-weight: 650; }
html.si-atelier .sia-tool .sia-tool-mode[data-sia-state="on"] { color: var(--sia-ink); }
html.si-atelier[data-si-theme="dark"] .sia-tool .sia-tool-mode[data-sia-state="on"] { color: var(--sia-on-ink); }
html.si-atelier .sia-tool .sia-tool-label { margin: 0 0 var(--sia-space-1); color: var(--sia-ink); font-size: var(--sia-text-sm); font-weight: 650; }
html.si-atelier .sia-tool .sia-tool-cta { min-height: 44px; }
/* Lettres du titre : celles qui ont perdu l'encre de la marque prennent celle du thème. */
html.si-atelier .sia-tool .sia-tool-letter { color: var(--sia-ink); }
/* Jauge de crédits sous le bouton : en ligne, centrée (classes de la jauge du rail). */
html.si-atelier .sia-tool .sia-tool-credits { display: inline-flex; justify-content: center; width: auto; max-width: 100%; padding: var(--sia-space-1) var(--sia-space-2); }
html.si-atelier .sia-tool .sia-tool-credits .sia-shell-gauge { flex: 0 0 96px; }

/* Messages, chargement, score. */
html.si-atelier .sia-tool .sia-tool-message { border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-tool-message[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); }
html.si-atelier .sia-tool .sia-tool-message[data-sia-state="warn"] { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); }
html.si-atelier .sia-tool .sia-tool-message[data-sia-state="bad"] { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); }
html.si-atelier .sia-tool .sia-tool-loading { color: var(--sia-muted); }
/* Retour produit : mise en page reprise de product-feedback.css (supprimée en phase 6) ;
   masqué, il garde l'état masqué du socle. */
html.si-atelier .sia-tool .sia-tool-feedback:not([hidden]) { display: flex; justify-content: flex-end; margin-left: auto; }
/* Bandeau fixe du brouillon local (ajouté à body, hors de .sia-tool). */
html.si-atelier .sia-tool-toast { border: 1px solid var(--sia-warn-line); border-radius: var(--sia-r-surface); background: var(--sia-warn-soft); box-shadow: var(--sia-shadow-pop); color: var(--sia-ink); font-family: var(--sia-sans); font-size: var(--sia-text-sm); }
html.si-atelier .sia-tool .sia-tool-banner { margin: var(--sia-space-3) 24px 0; padding: var(--sia-space-2) var(--sia-space-3); border: 1px solid var(--sia-info-line); border-radius: var(--sia-r-surface); background: var(--sia-info-soft); color: var(--sia-ink); font-family: var(--sia-sans); font-size: var(--sia-text-ui); }
html.si-atelier .sia-tool .sia-tool-score { padding: var(--sia-space-3) var(--sia-space-4); border-color: var(--sia-line); background: var(--sia-paper); box-shadow: none; }

/* Parcours d'analyse : étapes (vue simple), sous-vues, groupes d'onglets (vue experte). */
html.si-atelier .sia-tool .sia-tool-path { padding: var(--sia-space-3) var(--sia-space-4); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-hint { color: var(--sia-muted); font-size: var(--sia-text-sm); }
html.si-atelier .sia-tool .sia-tool-steps { gap: var(--sia-space-2); }
html.si-atelier .sia-tool .sia-tool-step { border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); box-shadow: none; color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-tool-step:hover { border-color: var(--sia-line-strong); background: var(--sia-soft); }
html.si-atelier .sia-tool .sia-tool-step:is(.is-active, [aria-selected="true"]) { border-color: var(--sia-ink); background: var(--sia-soft); }
html.si-atelier .sia-tool .sia-tool-step__num { border: 1px solid var(--sia-line-strong); background: var(--sia-paper); color: var(--sia-muted); font-family: var(--sia-sans); }
html.si-atelier .sia-tool .sia-tool-step:is(.is-active, [aria-selected="true"]) .sia-tool-step__num { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }
html.si-atelier .sia-tool .sia-tool-step__title { color: var(--sia-ink); font-family: var(--sia-serif); }
html.si-atelier .sia-tool .sia-tool-step__hint { color: var(--sia-muted); }
html.si-atelier .sia-tool .sia-tool-subnav { gap: 6px; }
html.si-atelier .sia-tool .sia-tool-subtab { border: 1px solid var(--sia-line); border-radius: var(--sia-r-pill); background: var(--sia-soft); box-shadow: none; color: var(--sia-ink); font-family: var(--sia-sans); font-size: 0.78rem; font-weight: 650; }
html.si-atelier .sia-tool .sia-tool-subtab:hover { border-color: var(--sia-line-strong); }
html.si-atelier .sia-tool .sia-tool-subtab:is(.is-active, [aria-selected="true"], [aria-pressed="true"]) { border-color: var(--sia-ink); background: var(--sia-ink); color: var(--sia-on-ink); }
html.si-atelier .sia-tool .sia-tool-group__title { margin: 0 0 4px; color: var(--sia-muted); font-family: var(--sia-sans); }
/* Sous-vues sur trois colonnes en mobile (feuille premium) : libellés à la taille d'origine. */
@media (max-width: 768px) {
  html.si-atelier .sia-tool .sia-tool-subtab { font-size: 0.75rem; }
}
html.si-atelier .sia-tool .sia-tool-tabs { gap: var(--sia-space-3); border: 0; border-bottom: 1px solid var(--sia-line); border-radius: 0; background: transparent; box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-tab { padding: 0.5rem 2px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; box-shadow: none; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); font-weight: 600; }
html.si-atelier .sia-tool .sia-tool-tab:hover { color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-tool-tab:is(.is-active, [aria-selected="true"], [data-sia-state="on"]) { border-bottom-color: var(--sia-accent); color: var(--sia-ink); font-weight: 700; }

/* Documents : papier clair dans les deux thèmes (jetons clairs redéfinis, voir tokens). Leur
   contenu garde ses couleurs : HTML d'analyse enregistré, styles en ligne des modules. */
:where(html.si-atelier[data-si-theme="dark"]) :is(.sia-tool-paper, .sia-tool-paper :is([class^="sia-"], [class*=" sia-"])) { color-scheme: light; }
html.si-atelier .sia-tool-paper { color: var(--sia-ink); }

/* Volets d'analyse et de l'éditeur (bordure et fond figés par la feuille premium, qui lit
   les jetons). */
html.si-atelier .sia-tool #resultsContainer > .sia-tool-pane { box-shadow: none; }
html.si-atelier .sia-tool .sia-btn--quiet { border-color: transparent; background: transparent; color: var(--sia-muted); }
html.si-atelier .sia-tool .sia-btn--quiet:hover:not(:disabled, [aria-disabled="true"]) { background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-btn--icon { min-width: var(--sia-ctl-h); padding-inline: 0; }
html.si-atelier .sia-tool .sia-btn--sm.sia-btn--icon { min-width: 34px; }
/* Interrupteur du thème dans la barre fixe : pressé quand le sombre est choisi. */
html.si-atelier .sia-tool .sia-btn--quiet[aria-pressed="true"] { border-color: var(--sia-line-strong); background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-tool-panel__title { margin-bottom: var(--sia-space-2); }
html.si-atelier .sia-tool .sia-tool-filter { align-items: center; gap: var(--sia-space-2) var(--sia-space-3); }
html.si-atelier .sia-tool .sia-tool-select { width: auto; max-width: 100%; min-height: 34px; padding-block: 0.3rem; font-size: var(--sia-text-sm); }
html.si-atelier .sia-tool .sia-tool-coverage { margin-top: var(--sia-space-4); padding: var(--sia-space-4); border-radius: var(--sia-r-surface); }
html.si-atelier .sia-tool .sia-tool-coverage__row { padding: var(--sia-space-3); border-radius: var(--sia-r-surface); }
html.si-atelier .sia-tool .sia-tool-coverage .sia-dash-hint { color: var(--sia-muted); }
html.si-atelier .sia-tool .sia-tool-tier { display: flex; align-items: baseline; gap: var(--sia-space-2); margin: var(--sia-space-4) 0 var(--sia-space-2); }

/* Carte « Votre contenu » et balises SEO : en-tête dépliant, corps, compteurs à état. Les
   chevrons gardent leurs classes (rotation à l'ouverture, feuille de l'outil). */
html.si-atelier .sia-tool .sia-tool-card { margin-bottom: var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); overflow: hidden; }
html.si-atelier .sia-tool .sia-tool-card--soft { background: var(--sia-soft); }
html.si-atelier .sia-tool .sia-tool-card__toggle { min-height: var(--sia-ctl-h); padding: var(--sia-space-2) var(--sia-space-3); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; }
html.si-atelier .sia-tool .sia-tool-card__toggle:hover { background: var(--sia-soft); }
html.si-atelier .sia-tool .sia-tool-card--soft .sia-tool-card__toggle:hover { background: var(--sia-line); }
html.si-atelier .sia-tool .sia-tool-card__body { padding: var(--sia-space-1) var(--sia-space-3) var(--sia-space-3); }
html.si-atelier .sia-tool .sia-tool-card__title { color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; }
html.si-atelier .sia-tool .sia-tool-chevron { border: 1px solid var(--sia-line-strong); background: var(--sia-paper); color: var(--sia-muted); }
html.si-atelier .sia-tool .sia-tool-counter { min-width: 0; padding: 2px 9px; border: 1px solid var(--sia-line-strong); background: var(--sia-paper); color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-label); font-weight: 650; font-variant-numeric: tabular-nums; }
html.si-atelier .sia-tool .sia-tool-counter[data-sia-state="good"] { border-color: var(--sia-good-line); background: var(--sia-good-soft); color: var(--sia-good); }
html.si-atelier .sia-tool .sia-tool-counter[data-sia-state="warn"] { border-color: var(--sia-warn-line); background: var(--sia-warn-soft); color: var(--sia-warn); }
html.si-atelier .sia-tool .sia-tool-counter[data-sia-state="bad"] { border-color: var(--sia-bad-line); background: var(--sia-bad-soft); color: var(--sia-bad); }
html.si-atelier .sia-tool .sia-tool-field { gap: 0; }
html.si-atelier .sia-tool .sia-tool-field .sia-tool-label { margin: 0; }

/* Éditeur : cadre et barre d'outils Quill. Le contenu (editor_content) et le HTML d'analyse
   (#results) sont enregistrés : aucune classe n'y entre, leur typographie est restylée par
   élément nu sous .sia-tool-persisted. Texte rédigé en Charter, colonne de lecture commune
   d'environ 62 caractères ; tailles des titres et alignements gardés. */
html.si-atelier .sia-tool .sia-tool-toolbar { border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface) var(--sia-r-surface) 0 0; background: var(--sia-soft); font-family: var(--sia-sans); }
html.si-atelier .sia-tool .sia-tool-editor { border: 1px solid var(--sia-line); border-top: 0; border-radius: 0 0 var(--sia-r-surface) var(--sia-r-surface); background: var(--sia-paper); box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted p,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted li,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted blockquote { color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-read); line-height: 1.68; }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted p,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted ul,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted ol,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted blockquote,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted pre,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h1,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h2,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h3,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h4,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h5,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h6 { max-width: var(--sia-read-column); margin-inline: auto; }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h1,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h2,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h3,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h4,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h5,
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted h6 { color: var(--sia-ink); font-family: var(--sia-serif); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted blockquote { border-left: 2px solid var(--sia-line-strong); color: var(--sia-muted); }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted pre { border-radius: var(--sia-r-ctl); background: var(--sia-soft); color: var(--sia-ink); }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted a { color: var(--sia-ink); text-decoration: underline; text-decoration-color: var(--sia-faint); text-underline-offset: 3px; }
html.si-atelier .sia-tool .sia-tool-editor.sia-tool-persisted a:hover { color: var(--sia-accent); text-decoration-color: currentColor; }
html.si-atelier .sia-tool .sia-tool-results.sia-tool-persisted h4 { color: var(--sia-ink); font-family: var(--sia-serif); font-weight: 700; letter-spacing: -0.005em; }
html.si-atelier .sia-tool .sia-tool-push { gap: var(--sia-space-2); margin-top: var(--sia-space-2); }

/* Plein écran de l'éditeur : overlay papier (fond, barre, colonnes latérales). Son fond, posé
   par identifiant, est repris par identifiant. */
html.si-atelier #aiFullscreenOverlay.sia-tool-fullscreen { background: var(--sia-page); font-family: var(--sia-sans); }
html.si-atelier .sia-tool .sia-tool-fs-bar { border-bottom: 1px solid var(--sia-line); background: var(--sia-paper); box-shadow: none; }
html.si-atelier .sia-tool .sia-tool-fs-side { border-color: var(--sia-line); background: var(--sia-paper); }
html.si-atelier .sia-tool .sia-tool-fs-head { border-bottom: 1px solid var(--sia-line); color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-label); letter-spacing: 0.06em; }

/* ------------------------------------------ Studio de rédaction (phase 7, lot 7.2) */
/* Aperçu admin : html.sia-studio-on est posé par search_intent/_studio_outil.html, émis
   pour les seuls admins (verrou si_studio_allowed), drapeau actif par défaut (?studio=0
   l'éteint). Studio unifié : une analyse affichée s'ouvre directement dans le Studio, dont le
   panneau réunit l'analyse et le coach.
   studioTool.js déplace dans le Studio des éléments de l'outil qui gardent leurs classes ;
   ces règles ne visent que des classes .sia-* (composants du Studio, éléments habillés par
   atelierTool.js). Le contenu des modules déplacés dans le panneau (HTML d'analyse enregistré,
   pages concurrentes, brief) est restylé dans aisearchintent_premium.css, sous les
   identifiants des volets. Le reste de la mise en page est mis de côté dans un conteneur
   masqué, et la hauteur de l'éditeur est posée en ligne par le script. Le Studio est un document : papier clair dans les deux thèmes
   (.sia-tool-paper). */
/* Hauteur du bandeau fixe de l'outil (.si-top-actions : 71 px, 67 px sur mobile), sous lequel
   se collent la barre de l'éditeur et le panneau ; largeurs du panneau (colonne d'onglets
   comprise), normale et élargie pour les onglets de lecture. */
html.si-atelier.sia-studio-on {
  --sia-studio-top: 72px;
  --sia-studio-rail: 84px;
  --sia-studio-coach: clamp(472px, 35%, 560px);
  --sia-studio-coach-wide: clamp(472px, 45%, 720px);
}

/* En-tête : l'analyse ouverte (requête, repères) et ses actions. */
html.si-atelier.sia-studio-on .sia-studio-bar { scroll-margin-top: calc(var(--sia-studio-top) + var(--sia-space-3)); }
html.si-atelier.sia-studio-on .sia-studio-bar:not([hidden]) { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--sia-space-3) var(--sia-space-5); margin: var(--sia-space-1) 0 var(--sia-space-4); padding: 0 2px var(--sia-space-4); border-bottom: 1px solid var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-bar__main { display: grid; gap: 6px; min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-bar__eyebrow { margin: 0; }
html.si-atelier.sia-studio-on .sia-studio-bar__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sia-space-1) var(--sia-space-3); min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-title { margin: 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: clamp(1.55rem, 1.1rem + 1.1vw, 2.05rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; text-wrap: balance; }
html.si-atelier.sia-studio-on .sia-studio-bar__switch { min-height: 30px; padding-inline: 0.55rem; text-decoration: underline; text-decoration-color: var(--sia-faint); text-underline-offset: 3px; }
html.si-atelier.sia-studio-on .sia-studio-bar__meta { margin: 0; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-ui); font-variant-numeric: tabular-nums; }
html.si-atelier.sia-studio-on .sia-studio-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sia-space-2); }

/* Mise en page : document au centre, panneau à droite (collant, défilement propre), élargi
   pour la lecture (Vue d'ensemble, Concurrents, Entités, Brief). */
html.si-atelier.sia-studio-on .sia-studio:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) var(--sia-studio-coach); align-items: start; gap: var(--sia-space-4); margin: 0 0 var(--sia-space-6); transition: grid-template-columns 220ms var(--sia-ease); }
html.si-atelier.sia-studio-on .sia-studio[data-sia-wide]:not([hidden]) { grid-template-columns: minmax(0, 1fr) var(--sia-studio-coach-wide); }
html.si-atelier.sia-studio-on .sia-studio-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sia-space-3); min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-paper { min-width: 0; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); }
html.si-atelier.sia-studio-on .sia-studio .sia-tool-card { margin: 0; }
/* Barre Quill : son emplacement (enfant direct du document) se colle sous le bandeau fixe ;
   elle tient sur une ligne quand la largeur le permet. */
html.si-atelier.sia-studio-on .sia-studio-toolbar { position: sticky; top: var(--sia-studio-top); z-index: 5; border-radius: var(--sia-r-surface) var(--sia-r-surface) 0 0; background: var(--sia-paper); }
html.si-atelier.sia-studio-on .sia-studio .sia-tool-toolbar { border: 0; border-bottom: 1px solid var(--sia-line); border-radius: var(--sia-r-surface) var(--sia-r-surface) 0 0; background: var(--sia-paper); }
/* Éditeur : cadre fondu dans le document ; sa hauteur (vue moins les barres) est posée en
   ligne par studioTool.js : il défile en lui-même, comme avant, et les modules font défiler
   sa racine jusqu'au passage surligné. */
html.si-atelier.sia-studio-on .sia-studio .sia-tool-editor { border: 0; border-radius: 0; }
html.si-atelier.sia-studio-on .sia-studio-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sia-space-2) var(--sia-space-3); padding: var(--sia-space-2) var(--sia-space-3); border-top: 1px solid var(--sia-line); color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on .sia-studio-status__count { color: var(--sia-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
html.si-atelier.sia-studio-on .sia-studio-status__space { flex: 1 1 auto; }
html.si-atelier.sia-studio-on .sia-studio-status__save[data-sia-state="warn"] { color: var(--sia-warn); }
html.si-atelier.sia-studio-on .sia-studio-status__save[data-sia-state="good"] { color: var(--sia-good); }
html.si-atelier.sia-studio-on .sia-studio .sia-tool-push { margin: 0; }

/* Panneau : volet défilant à gauche, colonne d'onglets à droite (icône et libellé). */
html.si-atelier.sia-studio-on .sia-studio-coach { position: sticky; top: var(--sia-studio-top); display: grid; grid-template-columns: minmax(0, 1fr) var(--sia-studio-rail); height: calc(100vh - var(--sia-studio-top) - 16px); min-height: 520px; min-width: 0; border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); }
html.si-atelier.sia-studio-on .sia-studio-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; }
html.si-atelier.sia-studio-on .sia-studio-panel__scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
html.si-atelier.sia-studio-on .sia-studio-rail { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: var(--sia-space-2) 5px; overflow-y: auto; border-left: 1px solid var(--sia-line); border-radius: 0 calc(var(--sia-r-surface) - 1px) calc(var(--sia-r-surface) - 1px) 0; background: var(--sia-soft); scrollbar-width: none; }
html.si-atelier.sia-studio-on .sia-studio-rail__sep { flex: none; height: 1px; margin: 5px 12px; background: var(--sia-line-strong); }
html.si-atelier.sia-studio-on .sia-studio-tab { display: grid; flex: none; justify-items: center; align-content: center; gap: 3px; min-height: 50px; padding: 4px 1px 5px; border: 0; border-radius: var(--sia-r-ctl); background: transparent; box-shadow: none; color: var(--sia-muted); font-family: var(--sia-sans); font-size: 0.68rem; font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; text-align: center; cursor: pointer; }
html.si-atelier.sia-studio-on .sia-studio-tab__icon { display: grid; place-items: center; width: 44px; height: 26px; border-radius: var(--sia-r-pill); transition: background-color var(--sia-dur) var(--sia-ease), color var(--sia-dur) var(--sia-ease); }
html.si-atelier.sia-studio-on .sia-studio-tab__icon > svg { width: 20px; height: 20px; }
html.si-atelier.sia-studio-on .sia-studio-tab__label { max-width: 100%; overflow-wrap: break-word; hyphens: none; }
html.si-atelier.sia-studio-on .sia-studio-tab:hover { color: var(--sia-ink); }
html.si-atelier.sia-studio-on .sia-studio-tab:hover > .sia-studio-tab__icon { background: var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-tab[aria-selected="true"] { color: var(--sia-ink); font-weight: 700; }
html.si-atelier.sia-studio-on .sia-studio-tab[aria-selected="true"] > .sia-studio-tab__icon { background: var(--sia-ink); color: var(--sia-on-ink); }
html.si-atelier.sia-studio-on .sia-studio-tab:focus-visible { outline: 3px solid var(--sia-focus); outline-offset: -2px; }

/* En-tête du volet : groupe, titre de l'onglet et aide. */
html.si-atelier.sia-studio-on .sia-studio-panel__head { display: grid; gap: 3px; padding: var(--sia-space-4) var(--sia-space-4) var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-panel__head > .sia-label { margin: 0; }
html.si-atelier.sia-studio-on .sia-studio-panel__title { margin: 0; color: var(--sia-ink); text-align: start; font-family: var(--sia-serif); font-size: 1.32rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
html.si-atelier.sia-studio-on .sia-studio-panel__hint { margin: 1px 0 0; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); line-height: 1.45; }
html.si-atelier.sia-studio-on .sia-studio-pane:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sia-space-3); min-width: 0; padding: var(--sia-space-2) var(--sia-space-4) var(--sia-space-5); }
html.si-atelier.sia-studio-on .sia-studio-seg { display: flex; width: 100%; }
html.si-atelier.sia-studio-on .sia-studio-seg > button { flex: 1 1 0; min-width: 0; padding-inline: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.si-atelier.sia-studio-on .sia-studio-empty { display: grid; justify-items: start; gap: var(--sia-space-2); padding: var(--sia-space-4); border: 1px dashed var(--sia-line-strong); border-radius: var(--sia-r-surface); background: var(--sia-soft); }
html.si-atelier.sia-studio-on .sia-studio-empty__title { margin: 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; }

/* Note du coach (onglets du coach) : anneau du socle (.sia-ring) et composantes, lus dans le
   bloc Qualité article existant. Sa note compacte est mise de côté par studioTool.js ; le
   titre de la carte, en double, est masqué dans le panneau seulement. */
html.si-atelier.sia-studio-on .sia-studio-gauge:not([hidden]) { display: grid; border-bottom: 1px solid var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-coach .sia-tool-score { margin: 0; border: 0; border-radius: 0; background: transparent; }
html.si-atelier.sia-studio-on .sia-studio-score:not([hidden]) { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--sia-space-3); padding: var(--sia-space-4) var(--sia-space-4) var(--sia-space-3); }
html.si-atelier.sia-studio-on .sia-studio-score__label { margin: 0 0 2px; color: var(--sia-ink); font-family: var(--sia-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
html.si-atelier.sia-studio-on .sia-studio-score__rank { margin: 0; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on .sia-studio-score__link { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html.si-atelier.sia-studio-on .sia-studio-score__link:hover { color: var(--sia-ink); }
html.si-atelier.sia-studio-on .sia-studio-subs:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sia-space-2) var(--sia-space-4); padding: 0 var(--sia-space-4) var(--sia-space-3); }
html.si-atelier.sia-studio-on .sia-studio-sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px var(--sia-space-2); color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on .sia-studio-sub > b { color: var(--sia-ink); font-weight: 650; }
html.si-atelier.sia-studio-on .sia-studio-sub__bar { grid-column: 1 / -1; display: block; height: 4px; border-radius: var(--sia-r-pill); background: var(--sia-line); overflow: hidden; }
html.si-atelier.sia-studio-on .sia-studio-sub__bar > i { display: block; width: calc(var(--sia-score, 0) * 1%); height: 100%; border-radius: inherit; background: var(--sia-good); }
html.si-atelier.sia-studio-on .sia-studio-sub[data-sia-state="warn"] .sia-studio-sub__bar > i { background: var(--sia-warn); }
html.si-atelier.sia-studio-on .sia-studio-sub[data-sia-state="bad"] .sia-studio-sub__bar > i { background: var(--sia-bad); }
html.si-atelier.sia-studio-on #siaStudioCoach .sia-studio-hidden { display: none; }
/* Onglet Priorités : leviers tirés du rapport de la note (écart à « Très solide »). */
html.si-atelier.sia-studio-on .sia-studio-priorities { display: grid; gap: var(--sia-space-3); }
html.si-atelier.sia-studio-on .sia-studio-action { display: grid; gap: var(--sia-space-2); padding: var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); }
html.si-atelier.sia-studio-on .sia-studio-action__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-action__head > h3 { margin: 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; }
html.si-atelier.sia-studio-on .sia-studio-action__list { display: grid; gap: var(--sia-space-1); margin: 0; padding-left: 1.1rem; color: var(--sia-ink); font-family: var(--sia-sans); font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on .sia-studio-solid { padding-top: var(--sia-space-1); }
/* Panneau des balises dans le volet Google : ses compteurs passent sous le titre. */
html.si-atelier.sia-studio-on .sia-studio-coach .sia-tool-card__toggle { flex-wrap: wrap; row-gap: var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-serp { display: grid; gap: 2px; padding: var(--sia-space-3); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); font-family: Arial, var(--sia-sans); }
html.si-atelier.sia-studio-on .sia-studio-serp__title { margin: 0; color: var(--sia-info); font-size: 1.05rem; line-height: 1.3; }
html.si-atelier.sia-studio-on .sia-studio-serp__desc { margin: 0; color: var(--sia-muted); font-size: 0.84rem; line-height: 1.5; }

/* Vue d'ensemble : fiche du lecteur et terrain, ajoutés par studioTool.js au-dessus du HTML
   d'analyse enregistré (#results, restylé dans aisearchintent_premium.css). */
html.si-atelier.sia-studio-on .sia-studio-reader:not([hidden]) { display: grid; gap: var(--sia-space-3); padding: var(--sia-space-4); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-paper); }
html.si-atelier.sia-studio-on .sia-studio-reader__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-reader__head > .sia-label { margin: 0; }
html.si-atelier.sia-studio-on .sia-studio-reader__lead { margin: 0; color: var(--sia-ink); font-family: var(--sia-serif); font-size: 1.14rem; line-height: 1.55; text-wrap: pretty; }
html.si-atelier.sia-studio-on .sia-studio-reader__list { display: grid; gap: var(--sia-space-3) var(--sia-space-5); margin: 0; padding-top: var(--sia-space-3); border-top: 1px solid var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-reader__row { display: grid; align-content: start; gap: 3px; min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-reader__key { color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
html.si-atelier.sia-studio-on .sia-studio-reader__val { display: grid; justify-items: start; gap: 3px; margin: 0; min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-reader__text { display: -webkit-box; margin: 0; overflow: hidden; color: var(--sia-ink); font-family: var(--sia-sans); font-size: var(--sia-text-ui); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
html.si-atelier.sia-studio-on .sia-studio-reader__val[data-sia-open] > .sia-studio-reader__text { display: block; overflow: visible; }
html.si-atelier.sia-studio-on .sia-studio-more { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--sia-ink); font-family: var(--sia-sans); font-size: var(--sia-text-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--sia-faint); text-underline-offset: 3px; cursor: pointer; }
html.si-atelier.sia-studio-on .sia-studio-more:hover { color: var(--sia-accent); text-decoration-color: currentColor; }
html.si-atelier.sia-studio-on .sia-studio-terrain:not([hidden]) { display: grid; gap: var(--sia-space-3); padding: var(--sia-space-3) var(--sia-space-4) var(--sia-space-4); border: 1px solid var(--sia-line); border-radius: var(--sia-r-surface); background: var(--sia-soft); }
html.si-atelier.sia-studio-on .sia-studio-terrain__head > .sia-label { margin: 0; }
html.si-atelier.sia-studio-on .sia-studio-terrain__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: var(--sia-space-3) var(--sia-space-4); margin: 0; }
html.si-atelier.sia-studio-on .sia-studio-stat { display: grid; align-content: start; gap: 3px; min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-stat__label { color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-label); font-weight: 650; letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; }
html.si-atelier.sia-studio-on .sia-studio-stat__value { display: grid; gap: 1px; margin: 0; min-width: 0; }
html.si-atelier.sia-studio-on .sia-studio-stat__num { color: var(--sia-ink); font-family: var(--sia-serif); font-size: 1.42rem; font-weight: 700; line-height: 1.15; }
html.si-atelier.sia-studio-on .sia-studio-stat__note { min-width: 0; overflow: hidden; color: var(--sia-muted); font-family: var(--sia-sans); font-size: var(--sia-text-sm); text-overflow: ellipsis; white-space: nowrap; }
html.si-atelier.sia-studio-on .sia-studio-stat[data-sia-state="good"] .sia-studio-stat__num { color: var(--sia-good); }
html.si-atelier.sia-studio-on .sia-studio-stat[data-sia-state="warn"] .sia-studio-stat__num { color: var(--sia-warn); }
/* Boutons des modules dans le panneau (habillés .sia-btn par atelierTool.js) : données par URL
   en taille compacte ; titre des entités et question de l'évaluation. Le reste du contenu des
   modules (HTML d'analyse enregistré, pages concurrentes, brief) est restylé dans
   aisearchintent_premium.css, sous les identifiants du Studio. */
html.si-atelier.sia-studio-on #siaCoachPane-ensemble :is(#toggleUrlDataTableBtn, #downloadUrlDataBtn).sia-btn { min-height: 36px; padding: 0.35rem 0.85rem; font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on #siaCoachPane-entites .sia-tool-panel__title { display: none; }
/* Évaluation : la question de la carte se lit d'une traite (pas d'équilibrage des lignes,
   qui la coupait au trait d'union de « répond-il »). */
html.si-atelier.sia-studio-on #siaCoachPane-evaluation .sia-tool-coverage > .sia-h2 { text-wrap: wrap; }

/* Fenêtre « Changer d'analyse » (ajoutée à body) : au-dessus du bandeau fixe de l'outil
   (.si-top-actions, z-index 1005) et du tiroir du panneau, sous les fenêtres des modules. */
html.si-atelier.sia-studio-on .sia-studio-layer { position: fixed; inset: 0; z-index: 1020; display: grid; place-items: center; min-height: 0; padding: 16px; background: var(--sia-backdrop); }
html.si-atelier.sia-studio-on .sia-studio-picker { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(720px, calc(100vh - 32px)); padding: 0; overflow: hidden; box-shadow: var(--sia-shadow-pop); }
html.si-atelier.sia-studio-on .sia-studio-picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sia-space-3); padding: var(--sia-space-4) var(--sia-space-4) var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-picker__tools { display: grid; gap: var(--sia-space-2); padding: 0 var(--sia-space-4) var(--sia-space-3); border-bottom: 1px solid var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-picker__filters { flex-wrap: wrap; align-items: center; gap: var(--sia-space-2); }
html.si-atelier.sia-studio-on .sia-studio-picker__filters .sia-input { width: auto; min-height: 34px; padding-block: 0.25rem; }
html.si-atelier.sia-studio-on .sia-studio-picker__list { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; min-height: 0; padding: var(--sia-space-2) var(--sia-space-3) var(--sia-space-4); overflow-y: auto; }
html.si-atelier.sia-studio-on .sia-studio-picker__group { margin: 0; padding: var(--sia-space-3) var(--sia-space-1) var(--sia-space-1); }
html.si-atelier.sia-studio-on .sia-studio-picker__empty { display: grid; justify-items: start; gap: var(--sia-space-2); padding: var(--sia-space-3) var(--sia-space-1); }
html.si-atelier.sia-studio-on .sia-studio-picker__foot { display: flex; justify-content: flex-end; padding: var(--sia-space-3) var(--sia-space-4); border-top: 1px solid var(--sia-line); }
html.si-atelier.sia-studio-on .sia-studio-option { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--sia-space-3); padding: var(--sia-space-2); border: 1px solid transparent; border-radius: var(--sia-r-ctl); color: var(--sia-ink); cursor: pointer; }
html.si-atelier.sia-studio-on .sia-studio-option.is-active { border-color: var(--sia-line); background: var(--sia-soft); }
html.si-atelier.sia-studio-on .sia-studio-option > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sia-serif); font-size: var(--sia-text-md); font-weight: 700; }
html.si-atelier.sia-studio-on .sia-studio-option > small { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sia-muted); font-size: var(--sia-text-sm); }
html.si-atelier.sia-studio-on .sia-studio-option > .sia-pill { grid-column: 2; grid-row: 1 / span 2; }

/* En-tête et bouton du tiroir : seulement quand le panneau est un tiroir (voir plus bas). */
html.si-atelier.sia-studio-on .sia-studio-coach__head { display: none; }
html.si-atelier.sia-studio-on .sia-studio-coach-toggle { display: none; }

/* Fiche du lecteur en deux colonnes quand le panneau élargi la loge. */
@media (min-width: 1181px) {
  html.si-atelier.sia-studio-on .sia-studio[data-sia-wide] .sia-studio-reader__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Sous 1 180 px (pas de rail sur l'outil avant le lot 7.3), le panneau devient un tiroir
   fixe à droite, sans transform : les fenêtres fixes des modules restent placées. Fermé,
   il n'est pas rendu, comme les panneaux de modes masqués qu'il contient ; ouvert, il couvre
   le bandeau fixe de l'outil (.si-top-actions, z-index 1005). */
@media (max-width: 1180px) {
  html.si-atelier.sia-studio-on .sia-studio:not([hidden]),
  html.si-atelier.sia-studio-on .sia-studio[data-sia-wide]:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  html.si-atelier.sia-studio-on .sia-studio-coach { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1010; width: min(520px, 100%); height: auto; min-height: 0; border-width: 0 0 0 1px; border-radius: 0; box-shadow: var(--sia-shadow-pop); }
  html.si-atelier.sia-studio-on .sia-studio-coach:not([data-sia-open]) { display: none; }
  html.si-atelier.sia-studio-on .sia-studio-rail { border-radius: 0; }
  html.si-atelier.sia-studio-on .sia-studio-coach__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sia-space-2); padding: var(--sia-space-2) var(--sia-space-3); border-bottom: 1px solid var(--sia-line); }
  html.si-atelier.sia-studio-on .sia-studio-coach__head > .sia-label { margin: 0; }
  html.si-atelier.sia-studio-on .sia-studio-coach-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 899; display: inline-flex; box-shadow: var(--sia-shadow-pop); }
}
@media (max-width: 700px) {
  html.si-atelier.sia-studio-on { --sia-studio-rail: 80px; }
  html.si-atelier.sia-studio-on .sia-studio-tab { font-size: 0.65rem; }
  html.si-atelier.sia-studio-on .sia-studio-bar:not([hidden]) { align-items: stretch; }
  html.si-atelier.sia-studio-on .sia-studio-bar__actions > .sia-btn { flex: 1 1 auto; }
  html.si-atelier.sia-studio-on .sia-studio-option { grid-template-columns: minmax(0, 1fr); }
  html.si-atelier.sia-studio-on .sia-studio-option > .sia-pill { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html.si-atelier.sia-studio-on .sia-studio:not([hidden]) { transition: none; }
  html.si-atelier.sia-studio-on .sia-studio-tab__icon { transition: none; }
}

/* ------------------------------------------------------------- réactif */
@media (max-width: 1279px) {
  /* Sous 1 280 px, le rail se replie en bandeau au-dessus de la page : la
     colonne de contenu ne descend jamais sous les 1 024 px de vue où la mise en
     page existante est vérifiée (1 280 − 248 = 1 032 px). */
  /* Rangées explicites : sinon min-height répartit l'espace libre jusque dans le bandeau. */
  :where(html.si-atelier) .sia-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  :where(html.si-atelier) .sia-shell-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sia-space-2) var(--sia-space-4);
    height: auto;
    padding: var(--sia-space-2) 16px;
    border-right: 0;
    border-bottom: 1px solid var(--sia-line);
  }
  /* La barre haute de la page porte déjà le nom de l'outil. */
  :where(html.si-atelier) .sia-shell-brand { display: none; }
  :where(html.si-atelier) .sia-shell-section { flex: 1 1 0; }
  :where(html.si-atelier) .sia-shell-nav { flex-direction: row; gap: 4px; overflow-x: auto; }
  :where(html.si-atelier) .sia-shell-nav-label { display: none; }
  :where(html.si-atelier) .sia-shell-nav-item { flex: none; white-space: nowrap; }
  /* Crédits gardés, en fin de bandeau. */
  :where(html.si-atelier) .sia-shell-credits {
    flex-direction: row;
    align-items: center;
    margin: 0 0 0 auto;
    padding: 0;
    border-top: 0;
  }
  :where(html.si-atelier) .sia-shell-credits > .sia-label { display: none; }
  :where(html.si-atelier) .sia-shell-credits-link { flex-wrap: nowrap; width: auto; }
  :where(html.si-atelier) .sia-shell-credits-link .sia-shell-gauge { flex: 0 0 72px; }
}
@media (max-width: 1100px) {
  :where(html.si-atelier) .sia-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  :where(html.si-atelier) .sia-shell-main { padding-inline: 16px; }
  :where(html.si-atelier) .sia-title { font-size: 1.7rem; }
  /* Cibles tactiles de 42 px (DESIGN.md). */
  :where(html.si-atelier) :is(.sia-chip, .sia-btn--sm, .sia-seg > button) { min-height: 42px; }
  :where(html.si-atelier) .sia-btn--sm.sia-btn--icon { min-width: 42px; }
}
@media (max-width: 700px) {
  /* Comme la jauge de l'en-tête jusqu'ici : pas de crédits sur téléphone, le
     menu du compte y mène. Le bandeau se réduit alors à la navigation, et
     disparaît quand la page la masque (compte, administration, chargement). */
  :where(html.si-atelier) .sia-shell-credits { display: none; }
  :where(html.si-atelier) :where(body[data-dashboard-space="account"], body[data-dashboard-space="admin"]) .sia-shell-rail,
  :where(html.si-atelier) .sia-shell-rail:has(> .sia-shell-section[hidden]) { display: none; }
  :where(html.si-atelier) .sia-shell-projectbar { justify-content: flex-end; gap: 10px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html.si-atelier) .sia-btn { transition: none; }
  :where(html.si-atelier) .sia-shell-nav-item { transition: none; }
  :where(html.si-atelier) .sia-spinner { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------- état masqué */
/* En dernier (0,2,0) : .hidden de Tailwind et [hidden] l'emportent sur tous les display
   des composants et de leurs enfants nus, égalités de spécificité comprises. */
:where(html.si-atelier) :is([class^="sia-"], [class*=" sia-"], [class^="sia-"] *, [class*=" sia-"] *):is(.hidden, [hidden]) { display: none; }