/* Les champs de cette feuille sont dessinés par `assets/css/fields.css`, chargée dans
   `x-head.php` : bord `--w-soft` (5,01 clair / 6,80 sombre), rayon `--w-field-r`, aucune
   ombre, chevron dessiné. Ce fichier n'en redéfinit plus ni le bord, ni le rayon, ni le
   fond — il garde la DENSITÉ (largeur, `--w-field-h`, taille de texte), qui est locale.
   Mesuré avant : ce module posait un bord à ~1,2 de contraste, pour un seuil de 3:1. */
/* ============================================================
   AutoComposer — design « 3A Électrique » (validé sur mockup 2026-07-02).
   Base blanche, accent indigo #4f46e5, dégradé réservé au filet + CTA.
   Parcours en 4 étapes (Sujet / Angle / Contenu / Lancement) + résumé permanent.
   THÈME NUIT activable : toutes les couleurs passent par des tokens --w-* ;
   .ac-page.ac-dark surcharge les tokens (toggle en header, persisté localStorage).
   Chrome global (sidebar/topbar) HORS périmètre pour l'instant.
   HTML/JS : ids/hooks legacy préservés (setAcMode, updateCostEstimate, collect*) ;
   switchBriefTab est réécrit en fin de page (rail supprimé → routeur d'étapes).
   ============================================================ */

/* Neutralisation du chrome legacy, page-scopée (technique wp-manager.css) */
body:has(.ac-page) .layer-bg,
body:has(.ac-page) .layer-sparkles,
body:has(.ac-page) .layer-robot,
body:has(.ac-page) .magic-tabs-robot,
body:has(.ac-page) .hero-robot { display:none !important; }
#main-content:has(.ac-page) { max-width:none; padding:0; background:#f6f7fb; min-height:calc(100vh - 60px); }
#main-content:has(.ac-page.ac-dark) { background:#0e0f16; }
#main-content:has(.ac-page) > .page-title { display:none; }
#main-content:has(.ac-page) > .alert-info,
#main-content:has(.ac-page) > .alert-error,
#main-content:has(.ac-page) > .alert-warning { margin:16px 28px 0; }

/* ---------- Marges canoniques (source de vérité UNIQUE de la charte 3A) ----------
   Le shell app (`<main class="main-content">`) et le contenu `.ac-body` sont normalisés
   ICI, une seule fois, pour toutes les pages `.ac-page`. Ne PLUS redéclarer ce padding
   par page (sinon divergence : c'est le bug « marges non homogènes »). Les pages qui
   veulent centrer un contenu étroit ajoutent seulement `max-width` + `margin:0 auto`. */
.main-content:has(.ac-page) { padding:0 !important; }
.ac-page .ac-body { padding:16px 28px 48px; }

/* ---------- Tokens : DÉPLACÉS vers assets/css/design-system.css (source unique, chargée
   via x-head.php). Ici on ne garde que les propriétés de LAYOUT propres au wrapper .ac-page. */
.ac-page {
  font-family:var(--w-display); color:var(--w-ink); font-size:14px; line-height:1.5; letter-spacing:-0.008em;
  -webkit-font-smoothing:antialiased; font-feature-settings:'ss01' 1; /* tnum retiré des conteneurs (25/09) : avec Inter il élargit aussi le tiret ; les chiffres à aligner le demandent eux-mêmes */
  background:var(--w-canvas); margin:0; min-height:calc(100vh - 60px); padding-bottom:48px;
}

/* ---------- Barre d'onglets globale (Composer/Projets/Guide) : intégrée au thème ---------- */
/* ── Barre d'onglets (magic-tabs) adaptée à la charte 3A ──
   Défaut : enfant direct de .ac-page (ex. AutoComposer) → gouttière 28px.
   Dans .ac-body : marge horizontale 0 pour s'aligner sur la gouttière du contenu
   (sinon double-inset = barre plus étroite que les cartes → déséquilibre).
   Marge basse 20px (pas 0) : sans elle, le contenu du panneau actif touchait
   directement le bas de la barre — aucune respiration entre les deux. */
.ac-page nav.magic-tabs { background:var(--w-panel) !important; box-shadow:var(--w-sh) !important; margin:14px 28px 20px !important; border:1px solid var(--w-line); backdrop-filter:none; border-radius:var(--w-r-lg); }
.ac-page .ac-body nav.magic-tabs { margin-left:0 !important; margin-right:0 !important; }
.ac-page nav.magic-tabs .magic-tab { color:var(--w-soft); border-radius:9px; }
.ac-page nav.magic-tabs .magic-tab:hover { color:var(--w-accent); background:var(--w-accent-soft); }
.ac-page nav.magic-tabs .magic-tab.active,
.ac-page nav.magic-tabs .magic-tab.active:hover { background:var(--w-accent) !important; color:#fff !important; box-shadow:0 2px 8px rgba(79,70,229,.22) !important; }
.ac-page.ac-dark nav.magic-tabs .magic-tab.active,
.ac-page.ac-dark nav.magic-tabs .magic-tab.active:hover { box-shadow:none !important; }

/* ---------- Header (filet dégradé + titre + mode + site + toggle nuit) ---------- */
.ac-head { position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:15px 28px 13px; background:var(--w-panel); border-bottom:1px solid var(--w-line); }
.ac-head::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--w-grad); }
.ac-head-spacer { flex:1; }
.ac-head-sep { width:1px; height:24px; background:var(--w-line); margin:0 2px; }
.ac-head .form-select { max-width:220px; }
/* .ac-head-title / .ac-head-titlewrap / .ac-head-icon / .ac-head-sub : DÉPLACÉES vers
   design-system.css (source unique globale — chargée par TOUTES les familles de pages
   via x-head.php, pas seulement .ac-page). Ne pas les redéclarer ici. */
/* Barre de contrôles secondaire (ex. toolbar Composer sous les onglets) : même gabarit
   que .ac-head mais SANS filet dégradé (ce n'est pas l'en-tête de page).
   Fusionnée visuellement avec la carte "Sujet de l'article" juste en dessous (même largeur
   28px d'inset, même bordure/radius/ombre) : la toolbar est la section HAUTE de cette carte
   commune (son border-bottom sert de simple séparateur interne, pas 2 boîtes distinctes). */
.ac-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 20px; margin:0 28px;
  background:var(--w-panel); border:1px solid var(--w-line); border-bottom:1px solid var(--w-line);
  border-radius:12px 12px 0 0; box-shadow:var(--w-sh-md); }
.ac-toolbar .form-select { max-width:220px; }

/* Actions colorées dans l'en-tête (Générer des sujets / Pool / Quick Wins) */
.ac-cta { display:inline-flex; align-items:center; gap:6px; padding:8px 15px; font-family:var(--w-display); font-size:12.5px; font-weight:600;
  border:1px solid transparent; border-radius:9px; cursor:pointer; text-decoration:none; transition:filter .12s, transform .08s, box-shadow .12s; }
.ac-cta svg { width:16px; height:16px; }
.ac-cta:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.05); }
.ac-cta:active:not(:disabled) { transform:translateY(0); }
.ac-cta:disabled { opacity:.5; cursor:not-allowed; }
.ac-cta--topics { background:var(--w-accent-soft); color:var(--w-accent-deep); border-color:var(--w-accent-line); }
.ac-cta--topics:hover:not(:disabled) { background:var(--w-accent); color:#fff; border-color:var(--w-accent); }
.ac-cta--pool { background:var(--w-panel); color:#7c3aed; border-color:#d8ccff; }
.ac-cta--pool:hover:not(:disabled) { background:#f5f0ff; }
/* Pool isolé à DROITE de la toolbar (2026-07-10 : retrait de Quick Wins, Pool séparé du cluster d'actions). */
.ac-cta--right { margin-left:auto; }
/* Harmonisé avec .ac-cta--topics (2026-07-10) : fond doux rempli, jumeau VERT via les tokens
   sémantiques --w-pos-* (design system). Theme-aware → pas d'override .ac-dark nécessaire. */
.ac-cta--kwm { background:var(--w-pos-bg); color:var(--w-pos); border-color:var(--w-pos-line); }
.ac-cta--kwm:hover:not(:disabled) { background:var(--w-pos); color:#fff; border-color:var(--w-pos); }
.ac-dark .ac-cta--pool { background:rgba(124,58,237,.14); color:#c4b5fd; border-color:rgba(124,58,237,.4); }
/* Raccourci Calendrier (2026-07-19) : accent rose du Calendrier éditorial (cf. x-calendrier icône). */
.ac-cta--calendar { background:#fb71851f; color:#e11d48; border-color:#fbcfe8; }
.ac-cta--calendar:hover:not(:disabled) { background:#e11d48; color:#fff; border-color:#e11d48; }
.ac-dark .ac-cta--calendar { background:rgba(225,29,72,.16); color:#fda4af; border-color:rgba(225,29,72,.4); }

/* ══ Modale Calendrier (iframe isolée du Calendrier éditorial en mode embed) ══ */
.ac-calmodal-overlay { position:fixed; inset:0; z-index:1000; background:rgba(15,23,42,.55);
  display:flex; align-items:center; justify-content:center; padding:16px; animation:acCalFade .14s ease; }
@keyframes acCalFade { from { opacity:0; } to { opacity:1; } }
/* Hauteur portée à 93vh (cap 1040) : la vue Année (~746px de contenu en embed) tient sans scroll
   sur les écrans usuels (≥ 864px de haut). Cf. embed x-calendrier.php (min-height:0 + cellules 22px). */
.ac-calmodal { width:min(1120px,96vw); height:min(93vh,1040px); background:var(--w-panel,#fff);
  border:1px solid var(--w-line,var(--w-line)); border-radius:14px; box-shadow:0 24px 64px rgba(0,0,0,.34);
  display:flex; flex-direction:column; overflow:hidden; }
.ac-calmodal-head { display:flex; align-items:center; gap:12px; padding:11px 14px 11px 16px;
  border-bottom:1px solid var(--w-line,var(--w-line)); flex:0 0 auto; }
.ac-calmodal-title { font-family:var(--w-display); font-weight:600; font-size:13.5px; color:var(--w-ink,#0f172a); }
.ac-calmodal-title b { font-weight:700; }
.ac-calmodal-full { margin-left:auto; font-size:12px; font-weight:600; color:#e11d48; text-decoration:none;
  padding:4px 9px; border-radius:7px; transition:background .12s; }
.ac-calmodal-full:hover { background:#fb71851f; }
.ac-calmodal-close { width:30px; height:30px; border:none; background:transparent; cursor:pointer;
  font-size:15px; line-height:1; color:#64748b; border-radius:7px; transition:background .12s, color .12s; }
.ac-calmodal-close:hover { background:var(--w-line,#f1f5f9); color:var(--w-ink,#0f172a); }
.ac-calmodal-body { position:relative; flex:1 1 auto; min-height:0; }
.ac-calmodal-load { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:13px; color:#94a3b8; }
.ac-calmodal-frame { position:relative; width:100%; height:100%; border:0; display:block; }
.ac-dark .ac-calmodal-full { color:#fda4af; }
.ac-dark .ac-calmodal-full:hover { background:rgba(225,29,72,.16); }
.ac-icon-btn { width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--w-line); border-radius:9px; background:var(--w-panel); color:var(--w-soft); cursor:pointer;
  transition:border-color .12s, color .12s, background .12s; }
.ac-icon-btn:hover { border-color:var(--w-accent-line); color:var(--w-accent); }
.ac-icon-btn svg { width:16px; height:16px; }

.ac-mode-switch { display:inline-flex; border:1px solid var(--w-line); border-radius:9px; overflow:hidden; background:var(--w-panel-2); }
.ac-mode-switch-btn { padding:7px 15px; font-size:12px; font-weight:600; border:none; cursor:pointer; background:transparent; color:var(--w-soft); transition:background .12s,color .12s; }
.ac-mode-switch-btn.is-active { background:var(--w-accent); color:#fff; }

/* ---------- Zone d'état (progress brief + résultat de run) ---------- */
.ac-alerts { padding:0 28px; }
.ac-alerts > div { margin-top:14px; }
.ac-progress-panel { padding:14px 16px; border:1px solid var(--w-line); border-radius:var(--w-r-md); background:var(--w-panel); box-shadow:var(--w-sh); }
.ac-progress-track { margin-top:10px; height:6px; background:var(--w-line-soft); border-radius:3px; overflow:hidden; }
.ac-progress-fill { height:100%; width:0%; background:var(--w-cta); transition:width .5s; }
.ac-progress-text { font-size:11px; color:var(--w-soft); margin-top:6px; text-align:center; }

/* ---------- Composer : sujet + onglets directs (rail wizard supprimé) ---------- */
/* padding-top:0 (au lieu de 18px) : la 1re carte (.ac-subject-card) doit toucher directement
   le bas de .ac-toolbar juste au-dessus — les deux ne forment qu'une seule carte visuelle. */
.ac-compose { display:flex; flex-direction:column; gap:14px; padding:0 28px 0; }
/* Carte "Sujet de l'article" = section BASSE de la carte commune avec .ac-toolbar : pas de
   bordure/radius/ombre en haut (déjà fournis par la toolbar), sinon double-liseré visible. */
.ac-subject-card { border-top:none !important; border-radius:0 0 12px 12px !important; }
@keyframes ac-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }

.ac-card { background:var(--w-panel); border:1px solid var(--w-line); border-radius:var(--w-r-lg); box-shadow:var(--w-sh-md); padding:18px 20px; }
.ac-subject-card { padding:16px 20px; }
.ac-subject-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.ac-panels { padding:18px 20px; }
.ac-step-title { font-size:14px; font-weight:600; color:var(--w-ink); }
.ac-step-sub2 { font-size:12px; color:var(--w-soft); margin-top:3px; margin-bottom:14px; }
.ac-step-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ac-link-back { border:none; background:none; padding:6px 4px; font-size:12.5px; color:var(--w-soft); cursor:pointer; font-family:inherit; }
.ac-link-back:hover { color:var(--w-soft); }
.ac-btn { border:none; cursor:pointer; padding:9px 20px; font-size:12.5px; font-weight:600; font-family:var(--w-display);
  background:var(--w-accent); color:#fff; border-radius:var(--w-r-sm); box-shadow:var(--w-glow); transition:background .12s, box-shadow .12s, transform .08s; }
.ac-btn:hover { background:var(--w-accent-deep); }
.ac-btn:active { transform:translateY(1px); }

/* ---------- Étape 1 : sujet ---------- */
.ac-subject-input { width:100%; min-height:88px; padding:12px 14px; border:1.5px solid var(--w-line); font-size:14.5px; resize:vertical;
  font-family:inherit; border-radius:var(--w-r-md); background:var(--w-panel-2); color:var(--w-ink); transition:border-color .12s, box-shadow .12s; }
.ac-subject-input::placeholder { color:var(--w-faint); }
.ac-subject-input:focus { outline:none; border-color:var(--w-accent); box-shadow:var(--w-ring); background:var(--w-panel); }
.ac-field-row { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin-top:14px; }
.ac-field { display:flex; flex-direction:column; gap:4px; }
.ac-field > span { font-size:11px; font-weight:600; color:var(--w-soft); letter-spacing:.02em; }
.ac-sep { height:1px; background:var(--w-line-soft); margin:16px 0 12px; }
.ac-inline-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ac-muted { font-size:12px; color:var(--w-soft); }

.ac-btn-neo { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; font-family:var(--w-display);
  font-size:12px; font-weight:600; border:1px solid var(--w-line); border-radius:var(--w-r-sm); cursor:pointer;
  background:var(--w-panel); color:var(--w-soft); text-decoration:none; transition:border-color .12s, color .12s, background .12s; }
.ac-btn-neo:hover:not(:disabled) { border-color:var(--w-accent-line); color:var(--w-accent); background:var(--w-accent-soft); }
.ac-btn-neo:disabled { opacity:.45; cursor:not-allowed; }
.ac-btn-ghost { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:8px 15px; font-family:var(--w-display);
  font-size:12px; font-weight:600; border:1px solid transparent; border-radius:var(--w-r-sm); cursor:pointer;
  background:var(--w-accent-soft); color:var(--w-accent-deep); transition:background .12s; white-space:nowrap; }
.ac-btn-ghost:hover:not(:disabled) { border-color:var(--w-accent-line); }
.ac-btn-ghost:disabled { opacity:.5; cursor:not-allowed; }
.ac-inline-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--w-soft); cursor:pointer; }

/* ---------- Étape 2 : angle (cartes avec badge d'icône) ---------- */
/* Angle : « Auto » (recommandé/défaut) en carte pleine largeur en tête, puis 9 angles en 3×3. */
.ac-mode-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
@media (max-width:760px) { .ac-mode-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
#ac-angle-card-auto { grid-column:1/-1; flex-direction:row; align-items:center; gap:14px; padding:14px 16px; }
#ac-angle-card-auto .ac-mode-icon { margin-bottom:0; width:38px; height:38px; }
#ac-angle-card-auto .ac-mode-icon svg { width:21px; height:21px; }
#ac-angle-card-auto .ac-mode-title { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; }
.ac-reco-badge { font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:2px 8px; border-radius:var(--w-r-full); background:var(--w-accent-soft); color:var(--w-accent-deep); border:1px solid var(--w-accent-line); }
.ac-mode-card { padding:13px 13px 12px; background:var(--w-panel); border:1px solid var(--w-line); border-radius:11px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; text-align:left; transition:border-color .12s, background .12s, box-shadow .12s, transform .1s; margin:0; }
.ac-mode-card:hover { border-color:var(--w-accent-line); transform:translateY(-1px); }
.ac-mode-card.is-checked { border:1.5px solid var(--w-accent); background:var(--w-accent-soft); box-shadow:0 3px 10px -3px rgba(79,70,229,.35); }
.ac-mode-card input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ac-mode-card .ac-mode-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px;
  background:var(--w-accent-soft); color:var(--w-accent); margin-bottom:5px; transition:background .12s, color .12s; }
.ac-mode-card .ac-mode-icon svg { width:19px; height:19px; }
.ac-mode-card.is-checked .ac-mode-icon { background:var(--w-accent); color:#fff; }
.ac-mode-card .ac-mode-title { font-weight:600; font-size:12.5px; color:var(--w-ink); display:block; }
.ac-mode-card.is-checked .ac-mode-title { color:var(--w-accent-deep); }
.ac-mode-card .ac-mode-desc { font-size:11px; color:var(--w-soft); display:block; line-height:1.4; }
.ac-mode-card--wide { flex-direction:row; align-items:flex-start; gap:10px; }
.ac-mode-card--wide .ac-mode-icon { margin-bottom:0; flex-shrink:0; }
.ac-mode-card--wide input[type="radio"], .ac-mode-card--wide input[type="checkbox"] { position:static; opacity:1; width:auto; height:auto; margin-top:3px; flex-shrink:0; pointer-events:auto; }

/* ---------- Onglets « Contenu & options » (étape 3) ---------- */
.ac-opt-tabs { display:flex; gap:4px; flex-wrap:wrap; margin:4px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--w-line); }
.ac-opt-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 13px; font-family:var(--w-display); font-size:12.5px; font-weight:600;
  border:1px solid transparent; border-radius:var(--w-r-sm); background:transparent; color:var(--w-soft); cursor:pointer; transition:background .12s, color .12s; }
.ac-opt-tab svg { width:15px; height:15px; }
.ac-opt-tab:hover { background:var(--w-panel-2); color:var(--w-ink); }
.ac-opt-tab.is-active { background:var(--w-accent); color:#fff; }
.ac-opt-panel { display:none; }
.ac-opt-panel.is-active { display:block; animation:ac-in .14s ease-out; }

/* Barre d'onglets principale (directement sous le sujet) : fusionnée visuellement avec la
   carte .ac-panels juste en dessous (même largeur, bordure/radius/ombre partagés) — elle en
   est la section HAUTE ; le margin négatif annule le gap flex de .ac-compose (14px) pour que
   les deux se touchent, son border-bottom sert de simple séparateur interne. */
.ac-opt-tabs--main { margin:0 0 -14px; padding:5px; background:var(--w-panel); border:1px solid var(--w-line);
  border-radius:11px 11px 0 0; box-shadow:var(--w-sh); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; align-items:center; }
.ac-card.ac-panels { border-top:none !important; border-radius:0 0 12px 12px !important; }
.ac-opt-tabs--main::-webkit-scrollbar { height:5px; }
.ac-opt-tabs--main .ac-opt-tab { white-space:nowrap; flex-shrink:0; }
/* Séparateur : réglages édités | sorties générées (SERP/Plan) */
.ac-opt-tabs-div { flex-shrink:0; width:1px; align-self:stretch; margin:4px 6px; background:var(--w-line); }
/* Onglets « sortie générée » : distingués des réglages éditables (petit tag "auto") */
.ac-opt-tab--output { color:var(--w-soft); }
.ac-opt-flag { font-size:9.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:1px 5px; border-radius:var(--w-r-full);
  background:var(--w-panel-2); color:var(--w-soft); border:1px solid var(--w-line); }
.ac-opt-tab--output.is-active { color:#fff; }
.ac-opt-tab--output.is-active .ac-opt-flag { background:rgba(255,255,255,.2); color:#fff; border-color:transparent; }

/* Spinner (bouton « Remplir automatiquement » pendant l'analyse) */
.ac-spin { display:inline-block; width:13px; height:13px; border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:ac-spin .7s linear infinite; vertical-align:-2px; }
@keyframes ac-spin { to { transform:rotate(360deg); } }
.ac-btn-ghost.is-loading { opacity:.85; cursor:progress; }

/* ---------- Sections & accordéons (étape 3) ---------- */
.ac-acc { border:1px solid var(--w-line); border-radius:var(--w-r-md); background:var(--w-panel); margin-bottom:10px; overflow:hidden; }
.ac-acc > .ac-acc-sum { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:12px 14px;
  font-family:var(--w-display); font-size:12.5px; font-weight:600; color:var(--w-ink); user-select:none; }
.ac-acc > .ac-acc-sum::-webkit-details-marker { display:none; }
.ac-acc > .ac-acc-sum::after { content:"\203A"; margin-left:auto; font-size:17px; color:var(--w-soft); transition:transform .15s; line-height:1; }
.ac-acc[open] > .ac-acc-sum::after { transform:rotate(90deg); }
.ac-acc > .ac-acc-sum:hover { background:var(--w-panel-2); }
.ac-acc[open] { border-color:var(--w-accent-line); }
.ac-acc-ico { display:inline-flex; align-items:center; color:var(--w-accent); }
.ac-acc-ico svg { width:16px; height:16px; display:block; }
.ac-acc-hint { font-weight:400; font-size:11px; color:var(--w-soft); letter-spacing:0; }
.ac-acc-body { padding:14px 16px 16px; border-top:1px solid var(--w-line-soft); }
.ac-acc-body > .ac-section { border:none; box-shadow:none; background:transparent; padding:0 0 14px; margin:0 0 14px; border-bottom:1px solid var(--w-line-soft); }
.ac-acc-body > .ac-section:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.ac-acc-body > .ac-accent-card:last-child { margin-bottom:0; }

.ac-section { margin-bottom:14px; padding:14px 16px; background:var(--w-panel); border:1px solid var(--w-line); border-radius:var(--w-r-md); }
.ac-section-title { font-family:var(--w-display); font-weight:600; font-size:12px; color:var(--w-ink); margin:0 0 11px; letter-spacing:.04em; text-transform:uppercase; display:flex; align-items:center; gap:7px; }
.ac-section-title .ac-hint { font-weight:400; font-size:11px; color:var(--w-soft); letter-spacing:0; text-transform:none; font-style:italic; margin-left:auto; }
.ac-section-title > span:first-child { filter:grayscale(1) opacity(.85); }
.ac-label { font-weight:600; font-size:12px; color:var(--w-ink-2); display:block; margin-bottom:5px; }
.ac-label-row { font-weight:600; font-size:12px; color:var(--w-ink-2); display:inline-flex; align-items:center; gap:6px; margin:0; }
.ac-label-hint { font-weight:400; color:var(--w-soft); font-style:italic; margin-left:4px; font-size:11px; }
.ac-cb-row { display:flex; flex-wrap:wrap; gap:12px 18px; }
.ac-cb-row label { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--w-ink-2); cursor:pointer; }

.ac-accent-card { margin-top:0; padding:14px 16px; border:1px solid; border-radius:var(--w-r-md); }
.ac-accent-eeat { background:var(--w-eeat-bg); border-color:var(--w-eeat-line); }
.ac-accent-eeat .ac-section-title, .ac-accent-eeat .ac-label { color:var(--w-eeat-ink) !important; }
.ac-accent-eeat textarea { font-size:12px; }
.ac-accent-seo { background:var(--w-seo-bg); border-color:var(--w-seo-line); }
.ac-accent-seo .ac-section-title, .ac-accent-seo .ac-label { color:var(--w-seo-ink) !important; }
.ac-accent-seo textarea { font-size:12px; }
.ac-section-sourced { background:var(--w-panel); border-color:var(--w-line); }
.ac-section-sourced .ac-section-title { color:var(--w-ink); }
.ac-section-accent { border:1px solid var(--w-accent-line) !important; background:var(--w-accent-soft) !important; border-radius:var(--w-r-md); padding:14px 16px !important; margin-bottom:12px; }
.ac-section-accent label, .ac-section-accent p { color:var(--w-accent-deep) !important; }
.ac-section-note { border:1px dashed var(--w-line) !important; background:var(--w-panel-2) !important; border-radius:var(--w-r-md); padding:12px 14px !important; }
.ac-section-note ul, .ac-section-note li, .ac-section-note p { color:var(--w-soft) !important; }
.ac-subsection { margin-top:10px; padding:10px 12px; background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:var(--w-r-sm); }
.ac-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ac-grid-auto { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; }
.ac-stack { display:flex; flex-direction:column; gap:10px; }
.ac-price-tag { font-size:11px; font-weight:600; color:var(--w-pos); font-variant-numeric:tabular-nums; }
/* Badges d'état unifiés (bêta / premium) — un seul langage visuel, remplace ~7 pastilles hex inline.
   Pills auto-portantes (fond clair + texte foncé) : lisibles en thème clair ET nuit. */
.ac-badge { display:inline-flex; align-items:center; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:2px 7px; border-radius:var(--w-r-full); border:1px solid transparent; vertical-align:middle; line-height:1.5; white-space:nowrap; margin-left:2px; }
.ac-badge--beta    { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.ac-badge--premium { background:#ede9fe; color:#6d28d9; border-color:#ddd6fe; }
.ac-badge--advanced { background:#e0f2fe; color:#075985; border-color:#bae6fd; }
/* Sous-titre de groupe dans une carte (regroupe des cases apparentées sans multiplier les cartes). */
.ac-group-label { font-size:11px; font-weight:600; color:var(--w-soft); letter-spacing:.03em; text-transform:uppercase; margin:14px 0 7px; }
.ac-section-title + .ac-group-label { margin-top:2px; }
.ac-note-amber { margin-top:10px; padding:10px 12px; border:1px solid var(--w-eeat-line); border-radius:var(--w-r-sm); background:var(--w-eeat-bg); }
.ac-note-amber label, .ac-note-amber p { color:var(--w-eeat-ink) !important; }

/* ══ Rescousse mode NUIT des couleurs #hex inline des panneaux (Lot #1) ══
   Les panneaux Images/GEO/Avancé/BETA portent ~77 couleurs codées en dur (texte gris, encarts
   colorés) qui ignorent les tokens. Plutôt que réécrire 77 sites HTML (risqué), on remappe les
   valeurs récurrentes vers les tokens UNIQUEMENT en nuit, via sélecteurs d'attribut, scopé aux
   panneaux. Bounded, réversible, ne touche pas le HTML. */
.ac-dark .ac-section p, .ac-dark .ac-section li, .ac-dark .ac-section ul { color:var(--w-soft) !important; }
.ac-dark .ac-section label { color:var(--w-ink-2); }
.ac-dark #ac-serp-results, .ac-dark #ac-plan-editor > div { background:var(--w-panel-2) !important; color:var(--w-soft) !important; border-color:var(--w-line) !important; }
/* Textes gris → tokens lisibles sur fond sombre */
.ac-dark .ac-opt-panel [style*="color:#475569"], .ac-dark .ac-opt-panel [style*="color:#334155"], .ac-dark .ac-opt-panel [style*="color:#1e293b"], .ac-dark .ac-opt-panel [style*="color:#0f172a"] { color:var(--w-ink-2) !important; }
.ac-dark .ac-opt-panel [style*="color:#64748b"] { color:var(--w-soft) !important; }
.ac-dark .ac-opt-panel [style*="color:#94a3b8"], .ac-dark .ac-opt-panel [style*="color:#a0aec0"] { color:var(--w-soft) !important; }
/* Accents texte violet/indigo hérités → accent nuit */
.ac-dark .ac-opt-panel [style*="color:#7c3aed"], .ac-dark .ac-opt-panel [style*="color:#6d28d9"], .ac-dark .ac-opt-panel [style*="color:#4338ca"], .ac-dark .ac-opt-panel [style*="color:#3730a3"], .ac-dark .ac-opt-panel [style*="color:#4f46e5"] { color:var(--w-accent-deep) !important; }
/* Encarts colorés : fond clair codé en dur → teinte sombre + texte lisible */
.ac-dark .ac-opt-panel [style*="background:#fef2f2"], .ac-dark .ac-opt-panel [style*="background:#fef3f2"] { background:var(--w-neg-bg) !important; border-color:var(--w-neg-line) !important; }
.ac-dark .ac-opt-panel [style*="color:#7f1d1d"], .ac-dark .ac-opt-panel [style*="color:#991b1b"], .ac-dark .ac-opt-panel [style*="color:#b91c1c"], .ac-dark .ac-opt-panel [style*="color:#9f1239"] { color:var(--w-neg) !important; }
.ac-dark .ac-opt-panel [style*="background:#fffbeb"], .ac-dark .ac-opt-panel [style*="background:#fef3c7"] { background:var(--w-eeat-bg) !important; border-color:var(--w-eeat-line) !important; }
.ac-dark .ac-opt-panel [style*="color:#92400e"], .ac-dark .ac-opt-panel [style*="color:#78350f"], .ac-dark .ac-opt-panel [style*="color:#b45309"], .ac-dark .ac-opt-panel [style*="color:#d97706"] { color:var(--w-eeat-ink) !important; }
.ac-dark .ac-opt-panel [style*="background:#ecfdf5"] { background:var(--w-pos-bg) !important; }
.ac-dark .ac-opt-panel [style*="color:#065f46"], .ac-dark .ac-opt-panel [style*="color:#15803d"] { color:var(--w-pos) !important; }
.ac-dark .ac-opt-panel [style*="background:#eef2ff"], .ac-dark .ac-opt-panel [style*="background:#f3f0ff"], .ac-dark .ac-opt-panel [style*="background:#ede9fe"], .ac-dark .ac-opt-panel [style*="background:#faf5ff"] { background:var(--w-seo-bg) !important; border-color:var(--w-seo-line) !important; }
.ac-dark .ac-opt-panel [style*="background:#f8fafc"], .ac-dark .ac-opt-panel [style*="background:#f1f5f9"], .ac-dark .ac-opt-panel [style*="background:white"], .ac-dark .ac-opt-panel [style*="background:#fff"] { background:var(--w-panel-2) !important; }
/* Bordures claires héritées → hairline nuit */
.ac-dark .ac-opt-panel [style*="border:1px solid #e2e8f0"], .ac-dark .ac-opt-panel [style*="border:2px solid #e2e8f0"], .ac-dark .ac-opt-panel [style*="border-color:#e2e8f0"], .ac-dark .ac-opt-panel [style*="1px solid #d1d5db"], .ac-dark .ac-opt-panel [style*="1px solid #cbd5e1"] { border-color:var(--w-line) !important; }

/* ---------- Champs de formulaire ---------- */
.ac-page input.form-input, .ac-page textarea.form-textarea, .ac-page select.form-select, .ac-page textarea:not([class]), .ac-page input[type="text"]:not([class]) { background-color:var(--w-panel) !important; color:var(--w-ink) !important;
  transition:border-color .12s, box-shadow .12s; }
.ac-page input.form-input::placeholder, .ac-page textarea.form-textarea::placeholder { color:var(--w-faint); }/* .ac-page input.form-input:hover, .ac-page textarea.form-textarea:hover, .ac-page select.form-select:hover — dressing retiré : `fields.css` en est la seule autorité. */

.ac-page input.form-input:focus, .ac-page textarea.form-textarea:focus, .ac-page select.form-select:focus {
  outline:none !important; }
.ac-page input.form-checkbox, .ac-page input[type="checkbox"], .ac-page input[type="radio"] { accent-color:var(--w-accent); width:14px; height:14px; }
.ac-page .btn-primary { background:var(--w-accent) !important; color:#fff !important; border:none !important; border-radius:8px !important;
  box-shadow:none !important; font-family:var(--w-display) !important; font-weight:600 !important; padding:8px 16px !important; }
.ac-page .btn-primary:hover:not(:disabled) { background:var(--w-accent-deep) !important; }
.ac-page .btn-secondary { background:var(--w-panel) !important; color:var(--w-soft) !important; border:1px solid var(--w-line) !important; border-radius:7px !important; }
#ac-brief-section textarea.form-textarea { min-height:220px; }
.ac-accent-card textarea.form-textarea, .ac-acc textarea.form-textarea { min-height:120px; }

/* ---------- Barre coût + CTA (sticky bas, remplace la colonne résumé) ---------- */
.ac-launchbar { position:sticky; bottom:0; z-index:6; margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  /* padding-right élargi : dégage « Générer » du widget support « Aide ? » (FAB global bas-droite). */
  padding:13px 150px 13px 28px; background:var(--w-panel); border-top:1px solid var(--w-line); box-shadow:0 -6px 18px -10px rgba(25,25,51,.28); }
.ac-launchbar-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.ac-launchbar-actions { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.ac-launchbar-chips { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ac-chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border:1px solid var(--w-line); border-radius:var(--w-r-full); font-size:11.5px; color:var(--w-soft); background:var(--w-panel-2); }
.ac-chip b { color:var(--w-ink); font-weight:600; }
#ac-cost-estimate { font-size:13px; font-weight:600; color:var(--w-pos); line-height:1.4; white-space:nowrap; }
#ac-budget-warning { display:none; flex-basis:100%; margin-top:4px; font-size:12px; font-weight:500; color:var(--w-neg); background:var(--w-neg-bg); border:1px solid var(--w-neg-line); border-radius:var(--w-r-sm); padding:8px 12px; }
#ac-budget-warning a { color:var(--w-accent-deep) !important; background:transparent !important; padding:0 !important; }
#btn-generate { flex-shrink:0; border:none; cursor:pointer; padding:12px 34px; font-size:14px; font-weight:600; font-family:var(--w-display);
  background:var(--w-cta) !important; color:#fff !important; border-radius:10px !important; box-shadow:var(--w-glow) !important; transition:filter .12s, transform .08s; }
#btn-generate:hover:not(:disabled) { filter:brightness(1.08); }
#btn-generate:active:not(:disabled) { transform:translateY(1px); }
#btn-generate:disabled { opacity:.45; cursor:not-allowed; box-shadow:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:1080px) {
  .ac-wiz { grid-template-columns:1fr; }
  .ac-wiz-steps { position:static; flex-direction:row; flex-wrap:wrap; gap:8px; }
  .ac-step-sub { display:none; }
  .ac-launchbar { flex-wrap:wrap; }
}

/* ============================================================
   Onglets Projets & Guide + modales — alignés sur les tokens --w-*
   (clair + nuit). Projets/Guide sont dans .ac-page ; les modales
   sont hors .ac-page → ciblées via body:has(.ac-page.ac-dark).
   ============================================================ */

/* ---------- Projets ---------- */
.ac-page .section-title { font-family:var(--w-display); font-size:15px; font-weight:600; color:var(--w-ink); letter-spacing:-.01em; }
.ac-page table.data-table { width:100%; border-collapse:collapse; }
.ac-page table.data-table th { text-align:left; padding:10px 12px; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--w-soft); background:var(--w-panel-2); border-bottom:1px solid var(--w-line); }
.ac-page table.data-table td { padding:11px 12px; border-top:1px solid var(--w-line-soft); color:var(--w-ink-2); font-size:13px; vertical-align:middle; }
.ac-page table.data-table tbody tr:hover td { background:var(--w-panel-2); }
.ac-page .badge { display:inline-block; font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:var(--w-r-full); border:1px solid transparent; }
.ac-page .badge-neutral { background:var(--w-panel-2); color:var(--w-soft); border-color:var(--w-line); }
.ac-page .badge-info { background:var(--w-accent-soft); color:var(--w-accent-deep); border-color:var(--w-accent-line); }
.ac-page .badge-success { background:var(--w-pos-bg); color:var(--w-pos); border-color:var(--w-pos-line); }
.ac-page .badge-danger { background:var(--w-neg-bg); color:var(--w-neg); border-color:var(--w-neg-line); }

/* ---------- Onglet Projets : surface 3A + tableau encadré ---------- */
.ac-projets { padding:18px 28px 34px; }
.ac-projets-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ac-projets-head .ac-step-title { margin:0; }
.ac-projets-count { font-size:11px; font-weight:600; color:var(--w-soft); background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:var(--w-r-full); padding:2px 10px; }
.ac-projets-empty { text-align:center; padding:40px 20px; color:var(--w-soft); font-size:13px; }
.ac-table-wrap { border:1px solid var(--w-line); border-radius:var(--w-r-md); overflow:hidden; }
.ac-table-wrap table.data-table th:first-child { border-top-left-radius:10px; }
.ac-table-wrap table.data-table th:last-child { border-top-right-radius:10px; }

/* ---------- Rescue thème nuit PARTAGÉ des utilitaires Tailwind : DÉPLACÉ vers
   design-system.css (chargé globalement → bénéficie à toutes les familles, pas que .ac-page). ---------- */
/* Tailwind opacity-modifier utilities sur fonds CLAIRS (bg-white/95, bg-gray-50/80…) : le "/" fait
   partie du nom de classe brut dans l'attribut HTML → sélecteur attribut (marche quel que soit
   l'échappement CSS). Ne touche PAS text-white/* ni border-white/* : utilisés intentionnellement en
   blanc sur fonds colorés/dégradés (cartes stats, boutons) — corrects dans les 2 thèmes, à ne pas inverser. */
.ac-dark [class*="bg-white/"] { background:var(--w-panel) !important; }
.ac-dark [class*="bg-gray-50/"], .ac-dark [class*="bg-gray-100/"] { background:var(--w-panel-2) !important; }
.ac-dark [class*="border-gray-200/"] { border-color:var(--w-line) !important; }
/* Palette slate (pages "premium" : x-autopilot2 & co) */
.ac-dark .text-slate-900, .ac-dark .text-slate-800 { color:var(--w-ink) !important; }
.ac-dark .text-slate-700, .ac-dark .text-slate-600 { color:var(--w-ink-2) !important; }
.ac-dark .text-slate-500, .ac-dark .text-slate-400 { color:var(--w-soft) !important; }
.ac-dark .bg-slate-50, .ac-dark .bg-slate-100 { background:var(--w-panel-2) !important; }
.ac-dark .border-slate-100, .ac-dark .border-slate-200 { border-color:var(--w-line) !important; }
.ac-dark [class*="bg-slate-50/"] { background:var(--w-panel-2) !important; }
.ac-dark [class*="border-slate-100/"] { border-color:var(--w-line) !important; }
.ac-dark .table-card, .ac-dark .config-panel-card { background:var(--w-panel) !important; color:var(--w-ink-2) !important; border-color:var(--w-line) !important; }
.ac-dark .premium-shell { background:var(--w-panel) !important; border-color:var(--w-line) !important; }
.ac-dark .premium-shell__top { background:var(--w-panel-2) !important; border-color:var(--w-line) !important; }
.ac-dark .section-subtitle { color:var(--w-soft) !important; }
.ac-page .text-blue-400 { color:var(--w-accent) !important; }
.ac-page .text-blue-400:hover { color:var(--w-accent-deep) !important; }
.ac-page .text-red-400 { color:var(--w-neg) !important; }

/* ---------- Composants .mg-* réutilisés tels quels (billing) : rescue nuit ---------- */
.ac-dark .mg-pack-card, .ac-dark .mg-info-card, .ac-dark .mg-balance-card { background:var(--w-panel) !important; border-color:var(--w-line) !important; box-shadow:var(--w-sh-md) !important; }
.ac-dark .mg-pack-card-name, .ac-dark .mg-pack-card-credits-value, .ac-dark .mg-info-card-title, .ac-dark .mg-balance-card-title, .ac-dark .mg-balance-card-value { color:var(--w-ink) !important; }
.ac-dark .mg-pack-card-desc, .ac-dark .mg-pack-card-credits-label, .ac-dark .mg-info-card-text, .ac-dark .mg-balance-card-desc { color:var(--w-soft) !important; }
.ac-dark .mg-pack-buy-subscription { background:var(--w-accent) !important; color:#fff !important; border-color:var(--w-accent-deep) !important; box-shadow:3px 3px 0 rgba(0,0,0,.4) !important; }
.ac-dark .mg-pack-buy-oneshot { border-color:var(--w-line) !important; box-shadow:3px 3px 0 rgba(0,0,0,.4) !important; }
.ac-dark .alert-success { background:rgba(52,211,153,.1) !important; color:#6ee7b7 !important; }
.ac-dark .alert-error { background:rgba(248,113,113,.1) !important; color:#fca5a5 !important; }
.ac-dark .alert-warning { background:rgba(245,158,11,.1) !important; color:#fcd34d !important; }
.ac-dark .alert-info { background:rgba(123,115,240,.12) !important; color:#c7c3ff !important; }

/* ---------- Bouton pack (état "formule actuelle", non couvert par mg-pack-buy-*) ---------- */
.ac-page .pack-buy-btn--current { opacity:1; cursor:not-allowed; background:var(--w-pos-bg); color:var(--w-pos); border:2px solid var(--w-pos-line) !important; font-weight:800; font-size:.8125rem; padding:.65rem 1rem; text-transform:uppercase; letter-spacing:.06em; border-radius:var(--w-r-xs); }

/* ---------- Petites étiquettes de statut (Essai/BYOK/Annulation…), hors palette --w-* ---------- */
.ac-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:var(--w-r-full); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; border:1px solid transparent; white-space:nowrap; }
.ac-pill--trial { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
.ac-pill--byok { background:#ede9fe; color:#5b21b6; border-color:#c4b5fd; }
.ac-dark .ac-pill--trial { background:rgba(96,165,250,.14); color:#93c5fd; border-color:rgba(96,165,250,.35); }
.ac-dark .ac-pill--byok { background:rgba(167,139,250,.16); color:#c4b5fd; border-color:rgba(167,139,250,.4); }

/* ---------- Guide (ex-bloc <style> inline, tokenisé) ---------- */
#ac-guide-root .ac-guide-toc { display:flex; flex-wrap:wrap; gap:8px; padding:12px; background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:var(--w-r-sm); margin-bottom:20px; }
#ac-guide-root .ac-guide-toc a { font-size:12px; color:var(--w-accent-deep); text-decoration:none; padding:5px 11px; background:var(--w-panel); border:1px solid var(--w-line); border-radius:var(--w-r-full); transition:all .15s; }
#ac-guide-root .ac-guide-toc a:hover { background:var(--w-accent-soft); border-color:var(--w-accent-line); color:var(--w-accent-deep); }
#ac-guide-root .ac-guide-section { padding:16px 18px; border:1px solid var(--w-line); border-radius:var(--w-r-md); margin-bottom:16px; background:var(--w-panel); }
#ac-guide-root .ac-guide-section h3 { font-weight:600; font-size:15px; color:var(--w-ink); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
#ac-guide-root .ac-guide-section h4 { font-weight:600; font-size:13px; color:var(--w-ink-2); margin:14px 0 6px; display:flex; align-items:center; gap:6px; }
#ac-guide-root .ac-guide-section p, #ac-guide-root .ac-guide-section li { font-size:13px; color:var(--w-soft); line-height:1.55; }
#ac-guide-root .ac-guide-section ul, #ac-guide-root .ac-guide-section ol { margin:6px 0 6px 20px; }
#ac-guide-root .ac-guide-section strong { color:var(--w-ink); }
#ac-guide-root .ac-guide-callout { padding:10px 12px; border-left:3px solid var(--w-accent); background:var(--w-accent-soft); border-radius:0 6px 6px 0; margin:10px 0; font-size:12.5px; color:var(--w-ink-2); }
#ac-guide-root .ac-guide-callout strong { color:var(--w-accent-deep); }
#ac-guide-root .ac-guide-callout-warn { padding:10px 12px; border-left:3px solid var(--w-eeat-line); background:var(--w-eeat-bg); border-radius:0 6px 6px 0; margin:10px 0; font-size:12.5px; color:var(--w-eeat-ink); }
#ac-guide-root .ac-guide-tip { padding:10px 12px; border-left:3px solid var(--w-pos); background:var(--w-pos-bg); border-radius:0 6px 6px 0; margin:10px 0; font-size:12.5px; color:var(--w-pos); }
#ac-guide-root .ac-guide-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
#ac-guide-root .ac-guide-compare > div { padding:10px 12px; border:1px solid var(--w-line); border-radius:var(--w-r-sm); font-size:12.5px; color:var(--w-soft); }
#ac-guide-root .ac-guide-compare .news-card { background:var(--w-eeat-bg); border-color:var(--w-eeat-line); }
#ac-guide-root .ac-guide-compare .edit-card { background:var(--w-seo-bg); border-color:var(--w-seo-line); }
#ac-guide-root .ac-guide-compare strong { display:block; font-size:13px; margin-bottom:6px; color:var(--w-ink); }
#ac-guide-root .ac-guide-kbd { font-family:var(--w-mono,ui-monospace,'Courier New',monospace); font-size:11px; padding:2px 6px; background:var(--w-panel-2); border:1px solid var(--w-line); border-radius:var(--w-r-xs); color:var(--w-ink-2); }
#ac-guide-root table.ac-guide-tbl { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px; }
#ac-guide-root table.ac-guide-tbl th { background:var(--w-panel-2); padding:8px; border:1px solid var(--w-line); text-align:left; font-weight:600; color:var(--w-ink-2); }
#ac-guide-root table.ac-guide-tbl td { padding:8px; border:1px solid var(--w-line); color:var(--w-soft); }
#ac-guide-root table.ac-guide-tbl tr:nth-child(even) td { background:var(--w-panel-2); }

/* ---------- Guide : drawer glissant — chrome DÉPLACÉ vers design-system.css
   (composant partagé, dispo pour toutes les familles). ---------- */

/* ---------- Modales (Générer des sujets / Pool) ----------
   Hors .ac-page et truffées de couleurs inline claires : gardées CLAIRES dans les deux
   thèmes (surface focus, motif courant et sûr). Seul l'accent est aligné sur l'indigo 3A. */
#topics-modal-v2 .btn-primary, #pool-modal .btn-primary { background:#4f46e5 !important; border-color:#4f46e5 !important; }
#topics-modal-v2 .btn-primary:hover, #pool-modal .btn-primary:hover { background:#4338ca !important; }

/* ---------- Tri-état des options (beta_options_auto, 2026-08-26) ----------
   Même vocabulaire que .ac-mode-switch (segments, accent plein sur l'état actif).
   « Auto » a sa couleur propre (accent doux + encre accent) : l'état doit se DISTINGUER
   d'un Oui — c'est lui qui dit au client « l'IA décide », jamais « option absente ». */
.ac-tri-row { display:flex; flex-wrap:wrap; gap:10px 14px; }
.ac-tri { display:inline-flex; align-items:center; gap:9px; padding:5px 8px 5px 12px; border:1px solid var(--w-line); border-radius:var(--w-r-md); background:var(--w-panel-2); }
.ac-tri-label { font-size:12.5px; color:var(--w-ink-2); white-space:nowrap; }
.ac-tri-seg { display:inline-flex; border:1px solid var(--w-line); border-radius:var(--w-r-full); overflow:hidden; background:var(--w-panel-2); }
.ac-tri-btn { padding:3px 10px; font-size:11px; font-weight:600; border:none; cursor:pointer; background:transparent; color:var(--w-soft); line-height:1.5; transition:background .12s,color .12s; }
.ac-tri-btn + .ac-tri-btn { border-left:1px solid var(--w-line); }
.ac-tri-btn:hover { background:var(--w-accent-soft); color:var(--w-accent-deep); }
.ac-tri-btn.is-on { background:var(--w-accent); color:#fff; }
.ac-tri-btn.is-on[data-v="2"] { background:var(--w-accent-soft); color:var(--w-accent-deep); box-shadow:inset 0 0 0 1px var(--w-accent-line); }
.ac-tri-btn.is-on[data-v="0"] { background:var(--w-line); color:var(--w-ink-2); }
.ac-tri-legende { font-size:11.5px; color:var(--w-soft); margin:2px 0 10px; }


/* ==============================================================================
   RELIFTING 19/09/2026 — parcours en 3 étapes + récapitulatif collé
   ------------------------------------------------------------------------------
   Appendé en FIN de feuille : il prime par l'ordre sur les anciennes règles du
   module (mêmes classes, mêmes ids — le JS ne change pas). Les composants viennent
   de components.css ; ici, le LAYOUT et la mise au canon des primitives internes
   conservées dans les panneaux (.ac-mode-card, .ac-tri, .ac-section-title…).
   Registre : Obsidian design-system.md §6 · inventaire autocomposer-inventaire-relifting.md
   ============================================================================ */

/* Page : fond uni, gouttière commune, en-tête sans filet dégradé */
.ac-page:has(> .ac-body > .ui-page-head) { background-image:none !important; --w-canvas:#f7f7fb; --w-line:#e9eaf4; background-color:var(--w-canvas); }
.ac-page.ac-dark:has(> .ac-body > .ui-page-head) { --w-canvas:#0e0f16; --w-line:#272941; }
.ac-page > .ac-body { padding:0 28px 32px; }
.ac-page > .ac-body nav.magic-tabs { margin-left:0 !important; margin-right:0 !important; }

/* Barre d'outils : plus de carte, plus de marges négatives */
.ac-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:0; margin:0 0 16px; background:none; border:0; box-shadow:none; border-radius:0; }
.ac-toolbar-right { margin-left:auto; }
.ac-mode-switch-btn { height:calc(var(--ui-btn-h) - 6px); padding:0 14px; font-size:13px; font-weight:600; border:0; border-radius:var(--w-r-sm); background:transparent; color:var(--w-soft); cursor:pointer; }
.ac-mode-switch-btn.is-active { background:var(--w-panel); color:var(--w-ink); box-shadow:0 1px 2px rgba(25,25,51,.08); }

/* Zone d'état */
.ac-alerts { padding:0; }
.ac-alerts > div { margin:0 0 16px; }
.ac-progress-panel { padding:20px; }
#ac-progress-steps { display:grid; gap:6px; font-size:13px; color:var(--w-ink-2); }
.ac-progress-track { margin-top:12px; height:6px; background:var(--w-line-soft); border-radius:var(--w-r-full); overflow:hidden; }
.ac-progress-fill { height:100%; width:0; background:var(--w-accent); transition:width .5s; }
.ac-progress-text { font-size:12.5px; color:var(--w-soft); margin-top:8px; text-align:left; }
#ac-run-result-body { color:var(--w-ink-2); }
#ac-alerte-multi { margin-top:10px; padding:10px 12px; border-radius:var(--w-r-md); background:#fffbeb; border:1px solid #fde68a; font-size:12.5px; color:var(--w-ink-2); }

/* Parcours : colonne + récapitulatif collé (340 px) */
.ac-compose.ac-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:16px; align-items:start; padding:0; }
.ac-steps { display:grid; gap:16px; min-width:0; }
.ac-subject-card { border-top:1px solid var(--ui-card-line) !important; border-radius:var(--ui-card-r) !important; padding:20px; }
.ac-subject-input { min-height:0; padding:12px 14px; }
.ac-panels { padding:0; }
.ac-mode-switch { border:0; overflow:visible; }

/* Panneaux d'options = lignes dépliables : plus de display:none piloté par .is-active */
.ac-opt-panel { display:block; animation:none; }
.ac-opt-panel.is-active { display:block; animation:none; }
.ac-opt-panel > .ui-acc-body > .ac-section { margin:0 0 14px; padding:0; background:none; border:0; box-shadow:none; }
.ac-opt-panel > .ui-acc-body > .ac-section:last-child { margin-bottom:0; }
.ac-opt-panel .ac-section-title { font-family:inherit; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--w-soft); margin:0 0 10px; display:flex; align-items:center; gap:8px; }
.ac-opt-panel .ac-section-title > span:first-child { display:none; }
.ac-opt-panel .ac-section-title .ac-hint { font-size:12px; font-weight:400; text-transform:none; letter-spacing:0; font-style:normal; color:var(--w-soft); margin-left:auto; }
.ac-opt-panel[data-opt="angle"] > .ui-acc-body > .ac-section > .ac-section-title,
.ac-opt-panel[data-opt="serp"] > .ui-acc-body > .ac-section > .ac-section-title { display:none; }
.ac-opt-panel .ac-section-accent, .ac-opt-panel .ac-section-sourced { background:none !important; border:0 !important; padding:0 !important; }
.ac-opt-panel .ac-section-accent label, .ac-opt-panel .ac-section-accent p { color:var(--w-ink-2) !important; }
.ac-opt-panel .ac-section-note { border:0 !important; background:var(--w-canvas) !important; border-radius:10px !important; padding:10px 12px !important; font-size:12.5px; }
.ac-opt-panel .ac-subsection { margin-top:12px; padding:12px; background:var(--w-canvas); border:0; border-radius:var(--w-r-md); }
.ac-opt-panel .ac-accent-card { padding:12px; border-radius:var(--w-r-lg); }
.ac-opt-panel .ac-label, .ac-opt-panel .ac-label-row { font-size:12.5px; font-weight:600; color:var(--w-ink-2); margin-bottom:6px; }
.ac-opt-panel .ac-cb-row label, .ac-opt-panel .ac-tri-row label { font-size:13px; color:var(--w-ink-2); }
.ac-opt-panel .ac-cb-row, .ac-opt-panel .ac-tri-row { gap:8px 18px; }
.ac-opt-panel .ac-group-label { font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--w-soft); margin:12px 0 6px; width:100%; }
.ac-opt-panel .ac-subgroup { margin-top:12px; padding:12px; background:var(--w-canvas); border-radius:var(--w-r-md); }
.ac-price-tag { font-size:12px; font-weight:600; color:var(--w-soft); }
.ac-badge { font-size:10.5px; font-weight:600; letter-spacing:0; text-transform:none; padding:1px 8px; border-radius:var(--w-r-full); border:0; }
.ac-badge--beta { background:#fffbeb; color:#92400e; }
.ac-badge--premium { background:var(--w-c-violet-bg); color:var(--w-c-violet); }
.ac-badge--advanced { background:var(--w-c-blue-bg); color:var(--w-c-blue); }

/* Cartes d'angle → cartes de choix (icône grise au repos, indigo sélectionnée) */
.ac-mode-cards { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.ac-mode-card { position:relative; display:flex; flex-direction:row; align-items:flex-start; gap:12px; padding:12px 38px 12px 12px; background:var(--w-panel); border:1px solid var(--w-line); border-radius:var(--w-r-lg); cursor:pointer; box-shadow:none; transition:border-color .15s, box-shadow .15s; }
.ac-mode-card:hover { border-color:var(--w-accent-line); transform:none; }
.ac-mode-card.is-checked { border:1px solid var(--w-accent); background:#fbfbff; box-shadow:0 0 0 3px var(--w-accent-soft); }
.ac-dark .ac-mode-card.is-checked { background:var(--w-panel-2); }
.ac-mode-card::after { content:""; position:absolute; top:12px; right:12px; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--w-line-strong); background:var(--w-panel); }
.ac-mode-card.is-checked::after { border-color:var(--w-accent); background:var(--w-accent); box-shadow:inset 0 0 0 3px var(--w-panel); }
.ac-mode-card .ac-mode-icon { width:32px; height:32px; border-radius:9px; background:var(--w-line-soft); color:var(--w-ink-2); margin:0; flex-shrink:0; }
.ac-mode-card .ac-mode-icon svg { width:16px; height:16px; }
.ac-mode-card.is-checked .ac-mode-icon { background:var(--w-accent-soft); color:var(--w-accent-deep); }
.ac-mode-card .ac-mode-title { font-size:13px; font-weight:700; color:var(--w-ink); }
.ac-mode-card.is-checked .ac-mode-title { color:var(--w-ink); }
.ac-mode-card .ac-mode-desc { font-size:11.5px; color:var(--w-soft); margin-top:2px; }
.ac-mode-card--wide { grid-column:1 / -1; }
.ac-mode-card--wide input[type="radio"], .ac-mode-card--wide input[type="checkbox"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.ac-mode-card:has(> input:focus-visible) { outline:2px solid var(--w-accent); outline-offset:2px; }

/* Tri-états → segmenté compact aligné à droite d'une ligne */
.ac-tri-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 24px; }
.ac-tri { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0; border:0; background:none; min-height:30px; }
.ac-tri-label { font-size:13px; color:var(--w-ink-2); white-space:normal; }
.ac-tri-seg { display:inline-flex; padding:2px; gap:2px; background:var(--w-line-soft); border:0; border-radius:var(--w-r-sm); }
.ac-tri-btn { height:26px; padding:0 10px; font-size:12px; font-weight:600; border:0; border-radius:6px; background:transparent; color:var(--w-soft); cursor:pointer; }
.ac-tri-btn + .ac-tri-btn { border-left:0; }
.ac-tri-btn:hover { background:transparent; color:var(--w-ink); }
.ac-tri-btn.is-on { background:var(--w-panel); color:var(--w-ink); box-shadow:0 1px 2px rgba(25,25,51,.08); }
.ac-tri-btn:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; }
/* Sans le flag tri-état : les cases binaires s'alignent sur la même grille */
.ac-cb-row.ac-tri-row label, .ac-tri-row > label { justify-content:flex-start; }

/* Récapitulatif (ex-barre de lancement) */
.ac-summary { position:sticky; top:16px; bottom:auto; z-index:1; margin:0; display:block; padding:20px; background:var(--w-panel); backdrop-filter:none; border:1px solid var(--ui-card-line); box-shadow:var(--ui-card-sh); }
.ac-launchbar-chips { display:block; }
.ac-launchbar-chips .ac-chip { display:flex; padding:6px 0; border:0; background:none; border-radius:0; font-size:13.5px; }
.ac-launchbar-chips .ac-chip .ui-kv-k { color:var(--w-soft); }
.ac-launchbar-meta { display:block; margin-top:6px; padding-top:12px; border-top:1px solid var(--w-line); }
.ac-cost { font-size:13.5px; color:var(--w-ink); font-weight:600; font-variant-numeric:tabular-nums; }
#ac-budget-warning { margin-top:10px; font-size:12.5px; color:var(--w-ink-2); line-height:1.4; }
#ac-budget-warning:not(:empty) { padding:10px 12px; background:#fffbeb; border-radius:var(--w-r-md); }
#ac-budget-warning a { color:var(--w-accent-deep); font-weight:600; }
.ac-launchbar-actions { display:grid; gap:10px; margin-top:14px; }
.ac-launchbar-actions .ac-inline-toggle { font-size:13.5px; font-weight:500; color:var(--w-ink-2); }
#btn-generate { width:100%; height:44px; font-size:14px; }
.ac-launch-help { text-align:center; margin:0; }
.ac-kbd { font-size:11px; color:var(--w-soft); text-align:center; }
.ac-kbd kbd { font-family:inherit; border:1px solid var(--w-line-strong); border-radius:var(--w-r-xs); padding:0 5px; }

/* Onglet Projets */
.ac-projets .ac-card { padding:0; }
.ac-projets-head { padding:16px 20px 10px; }
.ac-projets-head .ac-step-title { font-size:15px; font-weight:700; }
.ac-projets-count { font-size:12px; color:var(--w-soft); margin-left:8px; }
.ac-projets-empty { padding:28px 16px; text-align:center; font-size:13.5px; color:var(--w-soft); }

@media (max-width:1200px) { .ac-compose.ac-layout { grid-template-columns:1fr; } .ac-summary { position:static; } }
@media (max-width:900px) { .ac-mode-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } .ac-tri-row { grid-template-columns:1fr; } }

/* Onglets Composer / Projets (helper magic_tabs) : canon « onglets soulignés » des pages reliftées */
.ac-page > .ac-body .magic-tabs-wrapper { margin:0 0 16px; }
.ac-page > .ac-body nav.magic-tabs { display:flex; gap:4px; padding:0; margin:0 0 16px !important; background:none !important; border:0; border-bottom:1px solid var(--w-line); border-radius:0; box-shadow:none !important; }
.ac-page > .ac-body .magic-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 14px 12px; margin-bottom:-1px; font-size:13.5px; font-weight:600; color:var(--w-soft); background:none; border:0; border-bottom:2px solid transparent; border-radius:6px 6px 0 0; box-shadow:none; }
.ac-page > .ac-body .magic-tab:hover { color:var(--w-ink); background:none; }
.ac-page > .ac-body nav.magic-tabs .magic-tab.active, .ac-page > .ac-body nav.magic-tabs .magic-tab.active:hover { color:var(--w-accent) !important; background:none !important; border-bottom-color:var(--w-accent); box-shadow:none !important; }
.ac-page > .ac-body .magic-tab:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; }
.ac-page > .ac-body .magic-tabs-robot { display:none !important; }
/* Sujet : hauteur de deux lignes, le JS ajuste min-height en mode Lot */
#ac-brief-section .ac-subject-card textarea.ac-subject-input { height:auto; min-height:84px; }

/* Tri-états : colonnes selon la place réelle (la colonne des étapes fait ~560 px à 1440) */
.ac-opt-panel .ac-tri-row, .ac-opt-panel .ac-cb-row.ac-tri-row { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.ac-opt-panel .ac-tri { min-width:0; }
.ac-opt-panel .ac-tri-seg { flex-shrink:0; }
.ac-opt-panel .ac-tri-row > label { min-height:30px; }
/* Encarts à styles en ligne hérités (URLs de référence, source vidéo) : ramenés au canon des notes */
#ac-news-urls-wrap, #ac-video-source-wrap { background:var(--w-canvas) !important; border:0 !important; border-radius:10px !important; padding:12px !important; }
#ac-news-urls-wrap label, #ac-news-urls-wrap p, #ac-news-urls-wrap div { color:var(--w-ink-2) !important; }
#ac-news-urls-wrap p, #ac-news-urls-wrap [style*="font-size:11px"] { color:var(--w-soft) !important; }
.ac-opt-panel [style*="background:#fef2f2"] { background:var(--w-canvas) !important; border:0 !important; border-radius:10px !important; }
.ac-opt-panel [style*="color:#991b1b"], .ac-opt-panel [style*="color:#7f1d1d"] { color:var(--w-ink-2) !important; }
.ac-opt-panel .btn-secondary.btn-xs { height:32px; padding:0 12px; border-radius:var(--w-r-sm); font-size:13px; font-weight:600; background:var(--w-panel); color:var(--w-ink); border:1px solid var(--w-line-strong); }

/* Nuit : segment tri-état actif et coût en encre, pas en accent ni en blanc */
.ac-dark .ac-opt-panel .ac-tri-btn.is-on { background:var(--w-panel-2); color:var(--w-ink); }
.ac-summary #ac-cost-estimate { color:var(--w-ink); }

/* ══ PARCOURS PAR ÉTAPES (cible ChatGPT 19/09) : contexte en tête, stepper vertical, un panneau à la fois, récapitulatif ══ */
/* Contexte de rédaction */
.ac-context { padding:18px 20px 20px; display:grid; gap:14px; }
.ac-context-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ac-context-head .ui-card-title { margin-right:auto; }
.ac-context-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; --ui-btn-h:36px; --w-field-h:36px; }
.ac-context-tools .ui-btn { padding:0 12px; font-size:13px; }
.ac-context-tools .ui-seg { padding:2px; } .ac-context-tools .ac-mode-switch-btn { height:30px; padding:0 12px; }
.ac-context-site { width:190px; min-width:150px; }
.ac-context-subject .ui-label-row { margin-bottom:6px; }
.ac-context-subject .ui-label { font-size:13px; font-weight:700; color:var(--w-ink); }
.ac-context-subject textarea.ac-subject-input { height:auto; min-height:56px; }
.ac-context-row { display:grid; grid-template-columns:120px minmax(160px,220px) 160px auto; gap:14px; align-items:end; }
.ac-context-keep { margin-bottom:12px; font-size:13px; }
/* Grille : stepper 210 · panneau · récapitulatif 290 */
.ac-compose.ac-layout.ac-wizard { grid-template-columns:210px minmax(0,1fr) 290px; gap:16px; }
.ac-stepper-col { position:sticky; top:16px; padding:14px 10px; }
.ac-stepper-title { font-size:13.5px; font-weight:700; color:var(--w-ink); padding:4px 10px 12px; }
.ac-stepper { list-style:none; margin:0; padding:0; display:grid; gap:2px; position:relative; }
.ac-stepper::before { content:""; position:absolute; left:22px; top:22px; bottom:22px; width:2px; background:var(--w-line-soft); }
.ac-stepper-item { position:relative; z-index:1; display:flex; align-items:center; gap:10px; width:100%; padding:8px 8px 8px 8px; border:0; border-radius:var(--w-r-md); background:transparent; font:inherit; font-size:13.5px; font-weight:600; color:var(--w-ink-2); text-align:left; cursor:pointer; }
.ac-stepper-item:hover { background:var(--w-canvas); }
.ac-stepper-item:focus-visible { outline:2px solid var(--w-accent); outline-offset:-2px; }
.ac-stepper-num { width:28px; height:28px; border-radius:50%; flex-shrink:0; display:inline-grid; place-items:center; font-size:12.5px; font-weight:700; background:var(--w-line-soft); color:var(--w-soft); border:2px solid var(--w-panel); }
.ac-stepper-ico { display:none; }
.ac-stepper-label { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-stepper-badge { font-size:10px; padding:1px 7px; letter-spacing:.04em; text-transform:uppercase; background:var(--w-line-soft); color:var(--w-soft); }
.ac-stepper-chev { width:14px; height:14px; color:var(--w-soft); opacity:0; flex-shrink:0; }
.ac-stepper-item.is-active { background:var(--w-accent-soft); color:var(--w-accent-deep); }
.ac-stepper-item.is-active .ac-stepper-num { background:var(--w-accent); color:#fff; border-color:var(--w-accent-soft); }
.ac-stepper-item.is-active .ac-stepper-chev { opacity:1; color:var(--w-accent-deep); }
.ac-stepper-item.is-active .ac-stepper-badge { background:var(--w-panel); color:var(--w-accent-deep); }
/* Un panneau à la fois */
.ac-steps > .ac-opt-panel { display:none; padding:0; }
.ac-steps > .ac-opt-panel.is-active { display:block; }
.ac-wstep-head { padding:20px 24px 0; }
.ac-wstep-chip { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--w-accent-deep); background:var(--w-accent-soft); border-radius:6px; padding:3px 8px; margin-bottom:10px; }
.ac-wstep-title { font-family:var(--w-display); font-size:21px; font-weight:700; letter-spacing:-.015em; color:var(--w-ink); margin:0; line-height:1.2; }
.ac-wstep-sub { font-size:13px; color:var(--w-soft); margin:6px 0 0; line-height:1.45; }
.ac-wstep-body { padding:18px 24px 20px; }
.ac-wstep-block { margin-top:18px; padding-top:16px; border-top:1px solid var(--w-line-soft); }
.ac-wstep-block > .ui-group-label { margin-top:0; }
.ac-wstep-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 24px; border-top:1px solid var(--w-line-soft); background:var(--w-panel-2); border-radius:0 0 var(--ui-card-r) var(--ui-card-r); }
.ac-wstep-foot-state { display:flex; align-items:center; gap:10px; margin-right:auto; min-width:0; }
.ac-wstep-foot-state > div { display:grid; line-height:1.3; }
.ac-wstep-foot-state b { font-size:13px; color:var(--w-ink); }
.ac-wstep-foot-state > div span { font-size:12px; color:var(--w-soft); }
.ac-wstep-foot .ui-btn--sm { --ui-btn-h:36px; font-size:13px; padding:0 14px; }
/* Corps des panneaux : mêmes règles que les anciennes lignes dépliables */
.ac-opt-panel > .ac-wstep-body > .ac-section { margin:0 0 14px; padding:0; background:none; border:0; box-shadow:none; }
.ac-opt-panel > .ac-wstep-body > .ac-section:last-child { margin-bottom:0; }
.ac-opt-panel[data-opt="angle"] > .ac-wstep-body > .ac-section > .ac-section-title,
.ac-opt-panel[data-opt="serp"] > .ac-wstep-body > .ac-section > .ac-section-title { display:none; }
/* Récapitulatif : deux cartes empilées + conseil d'étape */
.ac-wizard .ac-summary { position:sticky; top:16px; display:grid; gap:14px; padding:0; background:none; border:0; box-shadow:none; border-radius:0; }
.ac-recap-list li { padding:7px 0; align-items:flex-start; }
.ac-recap-list .ui-kv-k { flex:0 0 118px; font-size:12.5px; }
.ac-recap-list .ui-kv-v { text-align:right; white-space:normal; font-size:13px; overflow-wrap:anywhere; }
.ac-recap-list .ui-kv-v.is-auto { color:var(--w-accent-deep); }
.ac-estimate .ac-launchbar-meta { margin:0; padding:12px 14px; border:0; border-radius:var(--w-r-lg); background:var(--w-canvas); }
.ac-estimate .ac-launchbar-meta > .ui-label { font-size:12.5px; color:var(--w-soft); margin-bottom:4px; }
.ac-estimate .ac-cost { font-family:var(--w-display); font-size:20px; font-weight:800; color:var(--w-c-green-text); letter-spacing:-.01em; }
.ac-dark .ac-estimate .ac-cost { color:var(--w-c-green); }
.ac-estimate-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ac-estimate-chips .ac-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--w-r-full); background:var(--w-canvas); font-size:12px; color:var(--w-soft); }
.ac-estimate-chips .ac-chip b { color:var(--w-ink); }
.ac-estimate-chips .ac-chip b.is-auto { color:var(--w-accent-deep); }
.ac-estimate .ac-launchbar-actions { margin-top:14px; }
.ac-estimate .ac-launch-now { justify-content:center; padding:9px 12px; border:1px solid var(--w-line); border-radius:var(--w-r-md); }
/* Conseil d'étape : encart doux (fond ambre pâle, filet fin, ampoule), pas un bandeau d'alerte */
.ac-step-tip { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:start; padding:12px 14px; border-radius:var(--w-r-lg); font-size:12.5px; line-height:1.5; color:var(--w-ink-2); background:#fffbeb; border:1px solid #fde68a; border-left-width:1px; box-shadow:none; }
.ac-step-tip-ico { grid-row:1 / span 2; width:26px; height:26px; border-radius:var(--w-r-sm); background:#fef3c7; color:#b45309; display:inline-grid; place-items:center; }
.ac-step-tip-ico svg { width:15px; height:15px; }
.ac-step-tip b { display:block; font-size:13px; color:var(--w-ink); }
.ac-step-tip > span:not(.ac-step-tip-ico) { grid-column:2; }
.ac-dark .ac-step-tip { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
.ac-dark .ac-step-tip-ico { background:rgba(245,158,11,.16); color:var(--w-eeat-ink); }
.ac-step-tip:empty { display:none; }
@media (max-width:1280px) { .ac-compose.ac-layout.ac-wizard { grid-template-columns:190px minmax(0,1fr); } .ac-wizard .ac-summary { grid-column:1 / -1; position:static; grid-template-columns:1fr 1fr; } .ac-step-tip { grid-column:1 / -1; } }
@media (max-width:900px) { .ac-compose.ac-layout.ac-wizard { grid-template-columns:1fr; } .ac-stepper-col { position:static; } .ac-stepper { grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } .ac-stepper::before { display:none; } .ac-wizard .ac-summary { grid-template-columns:1fr; } .ac-context-row { grid-template-columns:1fr 1fr; } }

.ac-compose.ac-layout.ac-wizard { grid-template-columns:190px minmax(0,1fr) 272px; }
.ac-recap-list .ui-kv-v.ac-recap-subject { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.ac-stepper li { min-width:0; }
.ac-stepper-item { min-width:0; overflow:hidden; }
.ac-stepper-badge { text-transform:none; letter-spacing:0; font-size:10.5px; padding:1px 6px; }
.ac-compose.ac-layout.ac-wizard { grid-template-columns:200px minmax(0,1fr) 272px; }
.ac-context-subject textarea.ac-subject-input { height:auto; }
.ac-estimate .ac-cost { font-size:15px; font-weight:700; white-space:normal; overflow-wrap:anywhere; line-height:1.4; }
.ac-wizard .ac-mode-cards { grid-template-columns:repeat(2, minmax(0,1fr)); }
.ac-estimate .ac-launchbar-meta, .ac-estimate #ac-cost-estimate, .ac-estimate .ac-cost { white-space:normal !important; min-width:0; }
.ac-wstep-foot .ac-wstep-prev { padding:0 10px; }
.ac-wstep-foot-state { flex:1 1 180px; }
/* Icône du bouton Générer en CSS : le JS réécrit son texte (acGenLabel), un SVG inline disparaîtrait */
.ac-estimate #btn-generate::before { content:""; width:16px; height:16px; flex-shrink:0; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M9.8 15.9L9 18.75l-.8-2.85a4.5 4.5 0 00-3.1-3.1L2.25 12l2.85-.8a4.5 4.5 0 003.1-3.1L9 5.25l.8 2.85a4.5 4.5 0 003.1 3.1l2.85.8-2.85.8a4.5 4.5 0 00-3.1 3.1z'/></svg>") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M9.8 15.9L9 18.75l-.8-2.85a4.5 4.5 0 00-3.1-3.1L2.25 12l2.85-.8a4.5 4.5 0 003.1-3.1L9 5.25l.8 2.85a4.5 4.5 0 003.1 3.1l2.85.8-2.85.8a4.5 4.5 0 00-3.1 3.1z'/></svg>") center/contain no-repeat; }
.ac-dark #ac-budget-warning:not(:empty) { background:rgba(245,158,11,.1); color:var(--w-ink-2); }
/* Contexte du projet (maquette 1) : sujet + Pré-remplir sur une ligne, récapitulatif en encart à droite */
.ac-context-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:20px; align-items:start; }
.ac-context-main { display:grid; gap:14px; min-width:0; }
.ac-context-subject-row { display:flex; gap:12px; align-items:flex-start; }
.ac-context-subject-row textarea.ac-subject-input { flex:1; min-width:0; }
.ac-context-subject-row .ui-btn { flex-shrink:0; --ui-btn-h:42px; }
.ac-context-subject > .ui-help { display:none; }
.ac-context-recap { background:var(--w-canvas); border-radius:var(--w-r-lg); padding:12px 14px; }
.ac-context-recap-title { font-size:13px; font-weight:700; color:var(--w-ink); margin-bottom:6px; }
.ac-context-recap .ac-recap-list li { padding:5px 0; align-items:center; }
.ac-context-recap .ac-recap-list .ui-kv-k { flex:0 0 92px; font-size:12.5px; }
.ac-context-recap .ac-recap-list .ui-kv-v { text-align:left; font-size:12.5px; flex:1; min-width:0; }
.ac-context-recap .ac-recap-list .ui-kv-v.ac-recap-subject { max-width:none; }
.ac-context-recap .ac-recap-list .ui-kv-v.is-auto { color:var(--w-ink); }
.ac-context-tools .ac-context-site { width:170px; }
@media (max-width:1100px) { .ac-context-grid { grid-template-columns:1fr; } }
.ac-context-subject textarea#ac-subject { min-height:var(--w-field-h); }
.ac-recap-list .fs-flag { width:18px; height:12px; border-radius:2px; margin-right:6px; vertical-align:-1px; display:inline-block; }
.ac-context { margin-bottom:16px; }

/* ═══ Maquettes ChatGPT 20/09 (Angle, Médias) — socle commun ═══════════════════════════════════
   Relevé sur la maquette (1527 px) : cartes de mode en 3 colonnes (icône 30 px, titre 13 px, 2
   lignes de description 11,5 px, radio à droite) ; « Résumé de génération » avec coût sur 2 lignes,
   bloc « Prêt » vert, conseil repliable ; barre ANCRÉE en bas : coche verte + « Étape enregistrée
   automatiquement » + ← + « Enregistrer comme brouillon » + « Continuer vers … → ». */
.ac-wizard #ac-angle-cards, #ac-angle-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#ac-angle-cards .ac-mode-card { padding: 11px 34px 11px 11px; gap: 10px; }
#ac-angle-cards .ac-mode-icon { width: 30px; height: 30px; }
#ac-angle-cards .ac-mode-title { font-size: 12.5px; }
#ac-angle-cards .ac-mode-desc { font-size: 11.5px; line-height: 1.4; }
#ac-angle-cards .ac-mode-card--wide, #ac-angle-cards .ac-mode-card:first-child { grid-column: 1 / -1; }
@media (max-width: 1100px) { .ac-wizard #ac-angle-cards, #ac-angle-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Source YouTube : ligne compacte (icône, titre, Bêta, prix), champs dépliés dessous. */
.ac-yt { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-panel); }
.ac-yt-head { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--w-ink); }
.ac-yt-head input { margin: 0; }
.ac-yt-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--w-c-red-tint, #fdeaf1); color: var(--w-c-red); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ac-yt-ico svg { width: 15px; height: 15px; }
.ac-yt-body { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--w-line-soft); display: flex; flex-direction: column; gap: 8px; }
.ac-yt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Résumé de génération */
.ac-cost { display: flex; flex-direction: column; gap: 2px; }
.ac-cost b { font-weight: 700; }
.ac-cost-mods { font-size: 12px; font-weight: 500; color: var(--w-soft); }
.ac-ready { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--w-r-md); margin: 0 0 12px; border: 1px solid transparent; }
.ac-ready > div { display: grid; line-height: 1.3; min-width: 0; }
.ac-ready b { font-size: 13px; }
.ac-ready > div span { font-size: 11.5px; color: var(--w-soft); }
.ac-ready.is-ok { background: var(--w-c-green-bg, #e2f4ee); border-color: #bce5d4; }
.ac-ready.is-ok b { color: #15803d; }
.ac-ready.is-warn { background: #fff8e6; border-color: #f0dca8; }
.ac-ready.is-warn b { color: #92400e; }
.ac-dark .ac-ready.is-ok { background: rgba(52, 211, 153, .10); border-color: rgba(52, 211, 153, .3); }
.ac-dark .ac-ready.is-warn { background: rgba(245, 158, 11, .10); border-color: rgba(245, 158, 11, .3); }
.ac-step-tip { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.ac-step-tip b { grid-column: 2; }
.ac-step-tip-toggle { grid-column: 3; width: 24px; height: 24px; border: 0; background: none; color: var(--w-soft); cursor: pointer; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; }
.ac-step-tip-toggle svg { width: 15px; height: 15px; transition: transform .15s; }
.ac-step-tip-toggle:hover { background: rgba(0,0,0,.06); color: var(--w-ink); }
.ac-step-tip-body { grid-column: 2 / 4; margin-top: 4px; }
.ac-step-tip.is-replie .ac-step-tip-body { display: none; }
.ac-step-tip.is-replie .ac-step-tip-toggle svg { transform: rotate(180deg); }

/* Stepper : étape passée = coche verte */
.ac-stepper-item.is-done .ac-stepper-num { background: #16a34a; color: #fff; border-color: #16a34a; font-size: 0; }
.ac-stepper-item.is-done .ac-stepper-num::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: block; margin: -2px auto 0; }

/* Barre ancrée en bas ; le pied de chaque panneau disparaît (doublon). */
.ac-wstep-foot { display: none !important; }
.ac-stickybar { position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 12px; margin: 18px -28px -48px; padding: 12px 28px; background: var(--w-panel); border-top: 1px solid var(--w-line); box-shadow: 0 -6px 18px rgba(25, 25, 51, .06); }
.ac-stickybar-state { display: grid; line-height: 1.3; margin-right: auto; min-width: 0; }
.ac-stickybar-state b { font-size: 13px; color: var(--w-ink); }
.ac-stickybar-state span { font-size: 12px; color: var(--w-soft); }
.ac-stickybar-prev { width: 40px; padding: 0; }
.ac-stickybar-prev[hidden] { display: none; }
.ac-stickybar #ac-step-next svg { width: 16px; height: 16px; }
.ac-dark .ac-stickybar { box-shadow: 0 -6px 18px rgba(0, 0, 0, .35); }
@media (max-width: 760px) { .ac-stickybar { flex-wrap: wrap; margin-left: -16px; margin-right: -16px; padding: 10px 16px; } .ac-stickybar-state { flex: 1 1 100%; } }
.ac-step-tip .ac-step-tip-ico { grid-row: 1; align-self: center; }

/* ═══ Étape Médias (maquette 20/09) — les contrôles d'origine, réordonnés par autocomposer-medias.js ═══ */
.ac-med-legacy { display: none !important; }
.ac-med { display: flex; flex-direction: column; gap: 10px; }
.ac-med-head { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin: -46px 0 4px; min-height: 30px; }
.ac-med-head-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--w-ink); cursor: pointer; }
.ac-med-total { background: var(--w-accent-soft); color: var(--w-accent-deep); }
.ac-med-h4 { font-size: 12.5px; font-weight: 700; color: var(--w-ink); margin: 6px 0 0; }
.ac-med-list { display: flex; flex-direction: column; gap: 8px; }
.ac-med-row { display: grid; grid-template-columns: 36px auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-panel); }
.ac-med-ico { width: 30px; height: 30px; border-radius: var(--w-r-sm); background: var(--w-accent-soft); color: var(--w-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.ac-med-ico svg { width: 16px; height: 16px; }
.ac-med-sw { display: inline-flex; align-items: center; }
.ac-med-sw .ui-switch { transform: scale(.92); transform-origin: left center; }
.ac-med-txt { min-width: 0; }
.ac-med-title { font-size: 13px; font-weight: 700; color: var(--w-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-med-sub { font-size: 11.5px; color: var(--w-soft); margin-top: 1px; }
.ac-med-ctrl { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--w-line); border-radius: var(--w-r-sm); overflow: hidden; background: var(--w-canvas); }
.ac-med-ctrl:empty { display: none; }
.ac-med-step { width: 30px; height: 30px; border: 0; background: none; font-size: 16px; color: var(--w-ink-2); cursor: pointer; font-family: inherit; }
.ac-med-step:hover:not([disabled]) { background: var(--w-line-soft); }
.ac-med-step[disabled] { opacity: .35; cursor: not-allowed; }
.ac-med-val, .ac-med-fixe { min-width: 30px; text-align: center; font-size: 13px; font-weight: 700; color: var(--w-ink); font-variant-numeric: tabular-nums; }
.ac-med-fixe { padding: 0 8px; line-height: 30px; }
.ac-med-hidden { position: absolute !important; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ac-med-prix { font-size: 12px; color: var(--w-soft); min-width: 70px; text-align: right; white-space: nowrap; }
.ac-med-prix .ac-price-tag { font-size: 12px; color: var(--w-soft); font-weight: 500; }
.ac-med-prix:empty { display: none; }
.ac-med-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .ac-med-duo { grid-template-columns: 1fr; } }
.ac-med-row--compact { grid-template-columns: 36px auto minmax(0, 1fr) auto; }
.ac-med-row--check .ac-med-sw input { width: 16px; height: 16px; margin: 0; accent-color: var(--w-accent); }
.ac-med-sources { padding: 10px 12px; border: 1px dashed var(--w-line); border-radius: var(--w-r-md); background: var(--w-canvas); }
.ac-med-checks { display: flex; gap: 22px; flex-wrap: wrap; }
.ac-med-checks .ui-check { font-size: 13px; }
.ac-med-em { font-style: italic; color: var(--w-soft); font-size: 11.5px; margin-left: 2px; }
.ac-med-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--w-line); border-radius: var(--w-r-md); background: var(--w-canvas); font-size: 12.5px; color: var(--w-ink-2); }
.ac-med-foot-l { font-weight: 600; color: var(--w-ink); margin-right: auto; }
.ac-med-foot-i { display: inline-flex; align-items: center; gap: 6px; }
.ac-med-foot-i svg { width: 15px; height: 15px; color: var(--w-soft); }
.ac-med-foot-i b, .ac-med-foot-t b { font-weight: 700; color: var(--w-ink); }
.ac-med-foot-t { padding-left: 14px; border-left: 1px solid var(--w-line); }
.ac-med-foot-t b { color: var(--w-accent-deep); }
.ac-wstep-head--med { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; }
.ac-wstep-head--med > .ac-wstep-chip, .ac-wstep-head--med > .ac-wstep-title, .ac-wstep-head--med > .ac-wstep-sub { grid-column: 1; }
.ac-wstep-head--med > .ac-med-head { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
.ac-med-row--compact .ac-med-title { white-space: nowrap; }
.ac-wstep-head--med > .ac-wstep-chip { justify-self: start; }

/* ═══ Étape Structure (maquette 20/09) — contrôles d'origine réordonnés par autocomposer-structure.js ═══ */
.ac-str-legacy { display: none !important; }
.ac-str { display: flex; flex-direction: column; gap: 10px; }
.ac-str-h4 { font-size: 12.5px; font-weight: 700; color: var(--w-ink); margin: 4px 0 0; }
.ac-str-power { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ac-str-pcard { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-panel); cursor: pointer; }
.ac-str-pcard.is-checked { border-color: var(--w-accent); background: #f7f6ff; box-shadow: 0 0 0 3px var(--w-accent-soft); }
.ac-dark .ac-str-pcard.is-checked { background: var(--w-panel-2); }
.ac-str-radio { width: 16px; height: 16px; margin: 0; accent-color: var(--w-accent); }
.ac-str-pico { width: 26px; height: 26px; border-radius: 7px; background: var(--w-accent-soft); color: var(--w-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.ac-str-pico svg { width: 14px; height: 14px; }
.ac-str-ptxt { display: grid; min-width: 0; line-height: 1.25; }
.ac-str-ptxt b { font-size: 13px; color: var(--w-ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-str-ptxt > span { font-size: 11.5px; color: var(--w-soft); }
.ac-str-pdelta { font-size: 12px; font-weight: 700; color: var(--w-accent-deep); white-space: nowrap; }
.ac-str-pdelta:empty { display: none; }
.ac-str-legende { font-size: 11.5px; color: var(--w-soft); }
.ac-str-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-str-card { padding: 12px 14px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-panel); display: flex; flex-direction: column; gap: 6px; }
.ac-str-card-title { font-size: 13px; font-weight: 700; color: var(--w-ink); margin-bottom: 2px; }
.ac-str-line { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-height: 26px; }
.ac-str-ico { color: var(--w-soft); display: inline-flex; }
.ac-str-ico svg { width: 15px; height: 15px; }
.ac-str-lbl { font-size: 12.5px; color: var(--w-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-str-ctl { display: inline-flex; align-items: center; }
.ac-str-ctl .ac-tri-seg { margin: 0; }
.ac-str-ctl .ui-switch { transform: scale(.9); transform-origin: right center; }
.ac-str-quality { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1300px) { .ac-str-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .ac-str-power, .ac-str-duo { grid-template-columns: 1fr; } }
.ac-str-qcard { padding: 10px 12px; border: 1px solid var(--w-line); border-radius: 11px; background: var(--w-panel); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-str-qhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-str-qhead .ui-switch { transform: scale(.9); transform-origin: left center; }
.ac-str-qtitle { font-size: 12px; font-weight: 700; color: var(--w-ink); line-height: 1.3; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.ac-str-qprix { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--w-ink); white-space: nowrap; }
.ac-str-qsub { font-size: 11px; color: var(--w-soft); line-height: 1.35; }
.ac-str-qsubs { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.ac-str-qsubs .ui-check { font-size: 12px; }
.ac-str-qsubs .ac-price-tag { color: var(--w-soft); font-size: 11.5px; }
.ac-str-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border: 1px solid var(--w-line); border-radius: var(--w-r-md); background: var(--w-canvas); font-size: 12.5px; color: var(--w-ink-2); }
.ac-str-foot span { display: inline-flex; align-items: center; gap: 6px; }
.ac-str-foot svg { width: 14px; height: 14px; color: var(--w-soft); }
.ac-str-foot i { color: var(--w-soft); font-style: normal; }
.ac-str-foot b { color: var(--w-ink); }
.ac-str-foot-pw b { color: var(--w-accent-deep); background: var(--w-accent-soft); padding: 1px 8px; border-radius: var(--w-r-full); }
/* Mesuré : à 690 px de colonne, le surcoût Ultra+ chevauchait le badge — il passe en coin supérieur droit. */
.ac-str-pcard { grid-template-columns: auto auto minmax(0, 1fr); padding-right: 14px; }
.ac-str-pdelta { position: absolute; top: 7px; right: 10px; font-size: 11.5px; }
.ac-str-pcard:has(.ac-str-pdelta:not(:empty)) .ac-str-ptxt { padding-right: 52px; }
.ac-str-qcard { padding: 9px 10px; }
.ac-str-qtitle { font-size: 11.5px; }
.ac-str-qsubs .ui-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 6px; font-size: 11.5px; }
.ac-str-qsubs .ac-price-tag { white-space: nowrap; }

/* Retour fondateur : la barre doit être AU BAS DE L'ÉCRAN même quand le parcours est plus court que
   la fenêtre (le sticky seul la laissait en fin de contenu). La page devient une colonne flex de la
   hauteur de la zone de défilement (topbar 64 px mesurée), la barre est poussée en bas (margin-top
   auto) et reste collée (sticky) quand le contenu dépasse. */
/* Le conteneur de défilement (#main-content, hauteur = fenêtre) devient une colonne flex : les nœuds
   blancs entre scripts ne prennent plus de hauteur (8 px mesurés), et la page prend tout le reste. */
#main-content:has(.ac-stickybar) { display: flex; flex-direction: column; min-height: calc(100% - 64px); } /* .main-content (défilement) = topbar 64 px + #main-content */
#main-content:has(.ac-stickybar) > * { flex: none; }
.ac-page:has(.ac-stickybar) { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; } /* la règle .ac-page { min-height: 100vh − 60 } ajoutait 4 px de défilement fantôme */
.ac-page:has(.ac-stickybar) > * { flex: none; }
.ac-page:has(.ac-stickybar) > .ac-body { flex: 1 0 auto; }
.ac-stickybar { margin-top: auto; }
/* La barre vit dans le panneau « Composer » (.ac-page > .ac-body > .magic-tab-panel) : chaque niveau
   devient une colonne flex qui prend la hauteur restante, la barre est poussée en bas. */
.ac-page:has(.ac-stickybar) > .ac-body { display: flex; flex-direction: column; }
.ac-page:has(.ac-stickybar) > .ac-body > * { flex: none; }
.ac-page:has(.ac-stickybar) > .ac-body > .magic-tab-panel.active:has(.ac-stickybar) { flex: 1 0 auto; display: flex; flex-direction: column; }
.ac-page:has(.ac-stickybar) > .ac-body > .magic-tab-panel.active > * { flex: none; }
/* Mesuré : 48 px (page) + 32 px (corps) de rembourrage sous la barre → 32 px de vide. Les
   rembourrages tombent, la barre porte son propre espace au-dessus. */
.ac-page:has(.ac-stickybar) { padding-bottom: 0 !important; }
.ac-page:has(.ac-stickybar) > .ac-body { padding-bottom: 0 !important; }
.ac-stickybar { margin-bottom: 0; }
/* Spécificité : la règle « > * { flex:none } » à id battait celle de la page — on la dépasse. */
#main-content:has(.ac-stickybar) > .ac-page { flex: 1 0 auto; }