/* ============================================================
   DESIGN SYSTEM 3A « Électrique » — SOURCE UNIQUE DES TOKENS
   ------------------------------------------------------------
   Chargé GLOBALEMENT via x-head.php (avant les CSS de page).
   ► Pour changer une couleur / ombre / typo de TOUTE l'app :
     on modifie ICI, à un seul endroit.
   Les tokens sont déclarés sur TOUS les wrappers de famille
   (.ac-page + familles module), pour que le thème nuit
   (.ac-dark posé sur le wrapper) surcharge correctement.
   Les familles module (--au-*, --gsc-*, …) aliasent leurs
   propres tokens vers --w-* (cf. leur fichier CSS) → une
   seule vérité de couleur pour tout le monde.
   ============================================================ */

/* ── POLICE INTER, HÉBERGÉE ICI (2026-09-25) ────────────────────────────────────────────────
   `--w-display` et Tailwind (`sans`) déclaraient Inter depuis le début, mais AUCUN fichier n'était
   chargé : chaque poste retombait sur sa police système (Segoe UI sous Windows) — l'écart de dessin
   avec les maquettes, faites en Inter. Fichiers variables (graisses 100-900) de Fontsource 5.3,
   licence OFL-1.1, servis par nos serveurs : aucune requête vers un tiers (RGPD). Deux sous-ensembles
   (latin, latin étendu) : le navigateur ne charge le second que si la page en a besoin. */
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url('../fonts/inter-latin-wght.woff2') format('woff2-variations'), url('../fonts/inter-latin-wght.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; font-style:normal; font-display:swap; font-weight:100 900;
  src:url('../fonts/inter-latin-ext-wght.woff2') format('woff2-variations'), url('../fonts/inter-latin-ext-wght.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens — thème clair ----------
   `:root` EN TÊTE, et ce n'est pas cosmétique. Les jetons ne vivaient que dans les enveloppes de
   page ; tout ce qui est monté AILLEURS dans le shell — MagicModal en premier, greffée sur
   `.app-shell` — voyait ses `var(--w-…)` irrésolus. Or une déclaration contenant une variable
   irrésolue est jetée ENTIÈRE : `border:1px solid var(--w-soft)` ne devient pas « bord par
   défaut », il devient « pas de règle », et le `*{border:0}` de Tailwind reprend la main.
   MESURÉ sur `#magicModalInput` : bordure 0px. Le champ de saisie des modales n'avait donc
   AUCUNE limite visible — un défaut silencieux, parce qu'il n'abîme rien : il efface.
   Le thème nuit reste porté par `.ac-dark` sur l'enveloppe (spécificité 0,2,0 > 0,1,0 de
   `:root`) : à l'intérieur des pages, rien ne change. */
:root,
.ac-page,
.au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page {
  --w-canvas:#f6f7fb; --w-panel:#ffffff; --w-panel-2:#fafaff;
  /* HAUTEUR DES CONTRÔLES. Seul jeton ajouté ici, et ce n'est pas une couleur. Sans lui, le
     `min-height:46px` hérité rend TOUT override de padding inopérant : c'est le motif exact
     pour lequel les barres « compactes » (padding:7px 10px) ne compactaient rien du tout.
     Étant hérité, il se règle par CONTENEUR — ce que le padding ne permettait pas. */
  --w-field-h:42px;
  /* RAYON DES CONTRÔLES. Il y en avait cinq sur le même écran (6, 8, 9, 10 px et le 0 d'un champ
     sans classe) parce que chaque correctif réécrivait le sien. Une valeur nommée est la seule
     façon qu'une famille de formes reste une famille. */
  --w-field-r:10px;
  /* ECHELLE DE RAYONS. 19 valeurs distinctes coexistaient sur 459 declarations — le meme motif
     que les bordures, mais SANS defaut fonctionnel derriere : un rayon ne depend pas du theme.
     On ne convertit donc QUE les valeurs qui tombent PILE sur un cran (252 sur 459), a rendu
     rigoureusement identique. Les 13 autres (9, 3, 6, 2, 7, 11, 14 px...) restent en place :
     les rapprocher se verrait, et rien ne le justifie. Le gain est de donner un cran NOMME au
     code a venir, pas de reecrire l existant. */
  --w-r-xs:4px; --w-r-sm:8px; --w-r-md:10px; --w-r-lg:12px; --w-r-full:999px;
  --w-line:#e6e7f2; --w-line-soft:#eef0f8; --w-line-strong:#d5d8e8;
  --w-ink:#191933; --w-ink-2:#3d3d5c; --w-soft:#6a6e87; --w-faint:#9a9eb5;
  --w-accent:#4f46e5; --w-accent-deep:#4338ca; --w-accent-soft:#eef0ff; --w-accent-line:#c7cbff;
  /* Fond d'un APLAT portant du texte blanc (bouton primaire) : en nuit, --w-accent passe à #7b73f0 = 3,78:1
     sous le blanc ; ce jeton reste assez sombre (5,27:1). Ajouté le 18/09 (relifting), jamais pour du texte. */
  --w-accent-solid:#4f46e5;
  /* PALETTE DES TUILES (relifting 18/09, relevée sur la cible du tableau de bord) : icône teintée sur
     fond pastel, mini-courbe et point de légende de la même teinte. Sept teintes NOMMÉES, pas une
     échelle : chaque nom est un usage (green = généré/positif, blue = publié, violet = accent produit,
     amber = qualité/score, cyan = clusters, red = alerte, pink = amélioration). */
  --w-c-green:#16a34a;  --w-c-green-bg:#dcfce7;  --w-c-green-text:#15803d; /* le vert des ICÔNES fait 3,3:1 : un texte vert prend celui-ci (4,5:1) */
  --w-c-blue:#2563eb;   --w-c-blue-bg:#dbeafe;
  --w-c-violet:#7c5cf6; --w-c-violet-bg:#ede9fe; /* violet des TUILES d'icônes (cible) — la ligne, le solde et la légende prennent l'accent #4f46e5 */
  --w-c-amber:#f97316;  --w-c-amber-bg:#ffedd5; /* la 4e tuile de la cible est orange, pas jaune */
  --w-c-cyan:#0891b2;   --w-c-cyan-bg:#cffafe;
  --w-c-red:#dc2626;    --w-c-red-bg:#fee2e2;  --w-c-red-tint:#fff5f5; --w-c-red-line:#fecaca; /* fond et bord de l'alerte (cible) */
  --w-c-red-text:#b91c1c; /* le rouge des ICÔNES fait 3,95:1 sur son fond : un TEXTE rouge (badge/tag --neg) prend celui-ci (5,4:1) */
  --w-c-pink:#db2777;   --w-c-pink-bg:#fce7f3;
  /* Séries du graphique de production (cible) : barres violet / bleu clair, ligne indigo. */
  --w-chart-1:#9a97f7; --w-chart-2:#a4d3fd; --w-chart-line:#4f46e5; --w-chart-1-dot:#5b50e8; --w-chart-2-dot:#4fa8f8; --w-chart-plot:#f5f6fe;
  --w-pos:#047857; --w-pos-bg:#ecfdf5; --w-pos-line:#a7f3d0;
  --w-neg:#dc2626; --w-neg-bg:#fef2f2; --w-neg-line:#fecaca;
  --w-eeat-bg:#fffbeb; --w-eeat-line:#fcd34d; --w-eeat-ink:#92400e;
  --w-seo-bg:#eef2ff; --w-seo-line:#c7d2fe; --w-seo-ink:#3730a3;
  --w-ring-c:rgba(79,70,229,.16);       /* la COULEUR seule de --w-ring, qui est une ombre complète */
  --w-mat:#2a2c3c; --w-mat-ink:#d6d8e6; /* passe-partout du tirage — cf. le bloc nuit */
  --w-checker:repeating-conic-gradient(#e8ebf3 0% 25%, #ffffff 0% 50%);
  --w-grad:linear-gradient(90deg,#4f46e5,#8b5cf6,#ec4899);
  --w-cta:linear-gradient(90deg,#4f46e5,#7c5cf0);
  --w-sh:0 1px 2px rgba(25,25,51,.05);
  --w-sh-md:0 6px 20px -8px rgba(25,25,51,.14);
  --w-glow:0 3px 12px -2px rgba(79,70,229,.45);
  --w-ring:0 0 0 3px rgba(79,70,229,.16);
  --w-display:'Inter',ui-sans-serif,'SF Pro Display',-apple-system,system-ui,sans-serif;
}

/* ---------- Tokens — thème nuit (.ac-dark posé sur le wrapper) ---------- */
.ac-page.ac-dark,
.au-page.ac-dark, .gsc-page.ac-dark, .prm-page.ac-dark, .elg.ac-dark, .qw-page.ac-dark,
.cal-page.ac-dark, .sadm.ac-dark, .wpm-page.ac-dark, .studio.ac-dark, .cu-page.ac-dark {
  --w-canvas:#0e0f16; --w-panel:#151622; --w-panel-2:#1a1b2b;
  --w-line:#272941; --w-line-soft:#1e2033; --w-line-strong:#343758;
  --w-ink:#ecedf5; --w-ink-2:#c6c8dd; --w-soft:#9a9eb8; --w-faint:#686c8a;
  --w-accent:#7b73f0; --w-accent-deep:#948dff; --w-accent-soft:rgba(123,115,240,.14); --w-accent-line:#4a44a8;
  --w-accent-solid:#5f56e8;
  --w-c-green:#4ade80;  --w-c-green-bg:rgba(74,222,128,.14);  --w-c-green-text:#4ade80;
  --w-c-blue:#60a5fa;   --w-c-blue-bg:rgba(96,165,250,.14);
  --w-c-violet:#a78bfa; --w-c-violet-bg:rgba(167,139,250,.14);
  --w-c-amber:#fb923c;  --w-c-amber-bg:rgba(251,146,60,.14);
  --w-c-cyan:#22d3ee;   --w-c-cyan-bg:rgba(34,211,238,.14);
  --w-c-red:#f87171;    --w-c-red-bg:rgba(248,113,113,.14);  --w-c-red-tint:rgba(248,113,113,.06); --w-c-red-line:rgba(248,113,113,.3);
  --w-c-red-text:#fca5a5;
  --w-c-pink:#f472b6;   --w-c-pink-bg:rgba(244,114,182,.14);
  --w-chart-1:#7f7bf0; --w-chart-2:#6fb6f5; --w-chart-line:#a5b4fc; --w-chart-1-dot:#a5b4fc; --w-chart-2-dot:#7dd3fc; --w-chart-plot:rgba(123,115,240,.06);
  --w-pos:#34d399; --w-pos-bg:rgba(52,211,153,.1); --w-pos-line:rgba(52,211,153,.35);
  --w-neg:#f87171; --w-neg-bg:rgba(248,113,113,.1); --w-neg-line:rgba(248,113,113,.35);
  --w-eeat-bg:rgba(252,211,77,.07); --w-eeat-line:rgba(252,211,77,.35); --w-eeat-ink:#fbd575;
  --w-seo-bg:rgba(129,140,248,.09); --w-seo-line:rgba(129,140,248,.35); --w-seo-ink:#b0bafc;
  --w-sh:0 1px 2px rgba(0,0,0,.3);
  --w-sh-md:0 8px 24px -8px rgba(0,0,0,.45);
  --w-glow:0 3px 14px -2px rgba(123,115,240,.5);

  /* --w-ring MANQUAIT au thème nuit : il héritait de l'indigo CLAIR à 16 % (rgba(79,70,229,.16))
     posé sur #151622 — donc un anneau de focus quasi invisible dans tout le SaaS en mode sombre.
     Constaté le 2026-07-26. */
  --w-ring:0 0 0 3px rgba(148,141,255,.28);
  --w-ring-c:rgba(148,141,255,.28);

  /* PASSE-PARTOUT du tirage : la surface neutre-sombre posée AUTOUR d'une image qu'on juge.
     Ce n'est pas une 4e nuance de panneau, c'est une valeur INVERSÉE — un blanc éclatant autour
     d'une image en décale la saturation perçue (pratique établie des logiciels de jugement
     d'image). `--w-mat-ink` existe pour qu'il y ait une façon LÉGALE d'écrire dessus : sans lui,
     la règle « pas de texte sur fond transparent » serait contournée par un #fff en dur. */
  --w-mat:#0b0c13; --w-mat-ink:#c6c8dd;
  --w-checker:repeating-conic-gradient(#21243a 0% 25%, #171928 0% 50%);
}

/* ============================================================
   CHROME PARTAGÉ — composants réutilisables par TOUTES les familles.
   (Extraits d'autocomposer.css pour être dispo hors .ac-page.)
   ============================================================ */

/* ---------- Alertes (.alert-error/-warning/-info/-success) harmonisées charte 3A ----------
   Style brut (assets/tailwind.css) : fond translucide + flou (backdrop-filter), liseré
   gauche 4px seul bord coloré, ombre teintée lourde — détonne avec les cartes plates de
   partout ailleurs (bordure fine uniforme, radius 12px, ombre douce --w-sh). Remplacé ici
   (chargé après tailwind.css sur TOUTES les pages) : même liseré gauche (cohérent avec les
   cartes "Actions rapides" du Dashboard, qui ont aussi un border-l-4 coloré) mais fond/bordure/
   ombre alignés sur la charte, thème nuit automatique via les tokens --w-neg/-pos/-eeat/-seo. */
.alert-error, .alert-warning, .alert-info, .alert-success { border-radius:var(--w-r-lg); box-shadow:var(--w-sh); backdrop-filter:none; border-width:1px 1px 1px 4px; border-style:solid; }
.alert-error   { background:var(--w-neg-bg);  color:var(--w-neg);      border-color:var(--w-neg-line) var(--w-neg-line) var(--w-neg-line) var(--w-neg); }
.alert-warning { background:var(--w-eeat-bg); color:var(--w-eeat-ink); border-color:var(--w-eeat-line) var(--w-eeat-line) var(--w-eeat-line) var(--w-eeat-ink); }
.alert-info    { background:var(--w-seo-bg);  color:var(--w-seo-ink);  border-color:var(--w-seo-line) var(--w-seo-line) var(--w-seo-line) var(--w-seo-ink); }
.alert-success { background:var(--w-pos-bg);  color:var(--w-pos);      border-color:var(--w-pos-line) var(--w-pos-line) var(--w-pos-line) var(--w-pos); }

/* ---------- Notice-carte (Dashboard) : même langage que les cartes "Actions rapides" ----------
   Un bandeau rouge PLEIN détonne avec les cartes blanches sobres du Dashboard. Ici : carte
   blanche + liseré gauche coloré + pastille d'icône teintée + texte neutre (chiffres en
   couleur) → identique au vocabulaire des cartes border-l-4 juste en dessous. Variante par
   sévérité via un modificateur (défaut = neg/rouge). Tokens → thème nuit automatique. */
.notice-card { display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--w-panel);
  border:1px solid var(--w-line); border-left:4px solid var(--w-neg); border-radius:var(--w-r-lg); box-shadow:var(--w-sh); }
.notice-card--warn { border-left-color:var(--w-eeat-ink); }
.notice-card--info { border-left-color:var(--w-seo-ink); }
.notice-card-icon { flex-shrink:0; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; background:var(--w-neg-bg); color:var(--w-neg); }
.notice-card--warn .notice-card-icon { background:var(--w-eeat-bg); color:var(--w-eeat-ink); }
.notice-card--info .notice-card-icon { background:var(--w-seo-bg); color:var(--w-seo-ink); }
.notice-card-icon svg { width:20px; height:20px; }
.notice-card-text { font-size:13.5px; color:var(--w-ink-2); line-height:1.4; }
.notice-card-text strong { color:var(--w-neg); font-weight:700; }
.notice-card--warn .notice-card-text strong { color:var(--w-eeat-ink); }
.notice-card--info .notice-card-text strong { color:var(--w-seo-ink); }

/* ---------- Sidebar réductible en icônes seules (animée, persistée, avec tooltips) ----------
   État réduit piloté par html.sb-collapsed, posé par un script synchrone AVANT le rendu de la
   sidebar (cf. x-sidebar.php) → ce CSS render-blocking s'applique dès la 1ère frame, donc AUCUN
   flash d'animation au changement de page. La transition ci-dessous n'anime QUE le clic (bascule
   d'état sur une page déjà affichée), jamais le chargement (largeur correcte dès le 1er paint). */
.sidebar { transition:width .22s ease, min-width .22s ease; }
.sidebar-logo { position:relative; }
.sidebar-collapse-btn { position:absolute; top:1.4rem; right:.7rem; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--w-r-sm); color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:color .15s, background .15s, right .22s ease; z-index:2; }
.sidebar-collapse-btn:hover { color:#fff; background:rgba(255,255,255,.14); }
.sidebar-collapse-btn svg { width:15px; height:15px; transition:transform .22s ease; }

/* ── État réduit ── (!important + spécificité html.sb-collapsed .sidebar (2 classes) > le
   .sidebar{width:260px !important} de responsive-fixes.css @media ≥1024px → l'emporte proprement) */
html.sb-collapsed .sidebar { width:76px !important; min-width:76px !important; }
/* La texture de barre (sidebar.jpg / .layer-sidebar-bg, large de 260px) doit SUIVRE la largeur de la
   barre : en mode réduit, sinon la bande 76→260px déborde dans la zone de contenu et le nébuleux
   étoilé « flashe » à droite de la barre 76px au chargement (avant que le contenu ne peigne). */
.layer-sidebar-bg { transition:width .22s ease; }
html.sb-collapsed .layer-sidebar-bg { width:76px; }
/* La fleche etait RECENTREE en mode reduit (right:50% + translateX(50%)) : elle venait donc se
   poser exactement sur le logo, lui aussi centre par la regle `.sidebar-logo > div` ci-dessous.
   Deux elements centres dans le meme espace se superposent, c est arithmetique. On la masque.
   ⚠ Elle etait le SEUL moyen de ressortir du mode reduit : le logo prend le relais (voir le
   gestionnaire dans x-sidebar.php). Masquer sans remplacer aurait enferme l utilisateur. */
html.sb-collapsed .sidebar-collapse-btn { display:none !important; }
html.sb-collapsed .sidebar-logo { cursor:pointer; border-radius:var(--w-r-lg); transition:background .15s ease; }
html.sb-collapsed .sidebar-logo:hover { background:rgba(127,127,160,.12); }
html.sb-collapsed .sb-hide-collapsed { display:none !important; }
html.sb-collapsed .sidebar-logo > div { justify-content:center; }
/* liens nav : icône centrée, libellé (texte brut après le SVG) réduit à 0 ; badge masqué */
html.sb-collapsed .sidebar nav a { justify-content:center !important; padding-left:0 !important; padding-right:0 !important; }
html.sb-collapsed .sidebar nav a > span:not(.sidebar-badge) { font-size:0 !important; gap:0 !important; justify-content:center; }
html.sb-collapsed .sidebar nav a .sidebar-badge { display:none; }

/* Tooltip custom (état réduit) : position:fixed → non rogné par l'overflow:hidden de .sidebar */
.sb-tooltip { position:fixed; z-index:9999; pointer-events:none; padding:5px 10px; font-size:12.5px; font-weight:600; font-family:var(--w-display);
  color:#fff; background:#1a1b2b; border:1px solid rgba(255,255,255,.12); border-radius:var(--w-r-sm); box-shadow:0 8px 24px -6px rgba(0,0,0,.5);
  white-space:nowrap; opacity:0; transform:translateX(-4px); transition:opacity .12s ease, transform .12s ease; }
.sb-tooltip.is-visible { opacity:1; transform:translateX(0); }

/* ---------- Guide : drawer glissant depuis la droite (standard 3A) ---------- */
.ac-guide-open { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; font-family:var(--w-display); font-size:12.5px; font-weight:600;
  color:var(--w-soft); background:transparent; border:1px solid var(--w-line); border-radius:9px; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.ac-guide-open svg { width:16px; height:16px; }
.ac-guide-open:hover { background:var(--w-panel-2); color:var(--w-ink); border-color:var(--w-accent-line); }

.ac-guide-backdrop { position:fixed; inset:0; z-index:9000; background:rgba(10,12,24,.42); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; }
.ac-guide-backdrop.is-open { opacity:1; pointer-events:auto; }

.ac-guide-drawer { position:fixed; top:0; right:0; z-index:9001; width:min(640px,94vw); height:100vh; display:flex; flex-direction:column;
  background:var(--w-canvas); border-left:1px solid var(--w-line); box-shadow:-18px 0 44px -14px rgba(10,12,24,.4);
  transform:translateX(100%); transition:transform .25s ease; }
.ac-guide-drawer.is-open { transform:translateX(0); }
.ac-guide-drawer-head { flex-shrink:0; position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 22px; background:var(--w-panel); border-bottom:1px solid var(--w-line); }
.ac-guide-drawer-head::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--w-grad); }
.ac-guide-drawer-head h2 { margin:0; font-size:15px; font-weight:600; color:var(--w-ink); letter-spacing:-.01em; }
.ac-guide-x { flex-shrink:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
  color:var(--w-soft); background:transparent; border:none; border-radius:var(--w-r-sm); cursor:pointer; transition:background .12s, color .12s; }
.ac-guide-x:hover { background:var(--w-panel-2); color:var(--w-ink); }
.ac-guide-drawer-body { flex:1; overflow-y:auto; padding:20px 22px 44px; }
.ac-guide-drawer-body > div { margin:0; }

/* ============================================================
   AURORA — voile d'ambiance en tête de page (identité 3A « légère »).
   Défini comme token --w-aurora (clair + nuit) → appliqué en background-image
   sur le wrapper (pas de ::before : les cartes opaques passent au-dessus,
   aucun z-index/isolation à gérer, les overlays fixed restent intacts).
   Application : `.X-page{ background-image:var(--w-aurora); background-repeat:no-repeat;
   background-size:100% 420px; background-position:top center; }` (page témoin puis généralisé).
   ============================================================ */
.ac-page, .au-page, .gsc-page, .prm-page, .elg, .qw-page, .cal-page, .sadm, .wpm-page, .studio, .cu-page {
  --w-aurora:
    radial-gradient(120% 150% at 4% -32%,   rgba(248,233,205,.85) 0%, rgba(248,233,205,0) 48%),
    radial-gradient(95% 130% at 26% -38%,    rgba(255,203,150,.64) 0%, rgba(255,203,150,0) 48%),
    radial-gradient(105% 135% at 52% -32%,   rgba(190,186,255,.86) 0%, rgba(190,186,255,0) 52%),
    radial-gradient(95% 130% at 78% -38%,    rgba(139,118,255,.70) 0%, rgba(139,118,255,0) 50%),
    radial-gradient(85% 130% at 103% -28%,   rgba(242,108,168,.60) 0%, rgba(242,108,168,0) 48%);
}
/* Nuit : mesh pastel remplacé par des lueurs indigo/violet/rose (opacité modérée). */
.ac-page.ac-dark, .au-page.ac-dark, .gsc-page.ac-dark, .prm-page.ac-dark, .elg.ac-dark,
.qw-page.ac-dark, .cal-page.ac-dark, .sadm.ac-dark, .wpm-page.ac-dark, .studio.ac-dark, .cu-page.ac-dark {
  --w-aurora:
    radial-gradient(110% 150% at 8% -32%,  rgba(123,115,240,.36) 0%, transparent 54%),
    radial-gradient(100% 140% at 55% -38%, rgba(139,92,246,.28) 0%, transparent 56%),
    radial-gradient(90% 140% at 102% -28%, rgba(236,72,153,.22) 0%, transparent 52%);
}
/* APPLICATION généralisée : aurora en background-image sur le wrapper (bande de 480px en tête,
   estompée par les dégradés). !important pour l'emporter sur le shorthand `background` des
   feuilles de famille (chargées après). GSC / PRM / e-Lagage ont déjà leur propre mesh ::before
   (plus marqué) → volontairement EXCLUS ici pour ne pas doubler l'effet. */
.ac-page, .au-page, .cal-page, .sadm, .wpm-page, .qw-page, .studio, .cu-page {
  background-image: var(--w-aurora) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 480px !important;
  background-position: top center !important;
}

/* ============================================================
   RESCUE NUIT GLOBAL — classes partagées à couleur codée en dur (tailwind.css)
   non gérées en thème sombre. S'applique à TOUTES les familles (.ac-dark sur le wrapper).
   ============================================================ */
/* .form-label : color:#1f2937 en dur → illisible sur fond sombre (labels de formulaire). */
.ac-dark .form-label { color: var(--w-ink-2); }
.ac-dark .form-hint, .ac-dark .form-help { color: var(--w-soft); }

/* ---------- Rescue nuit PARTAGÉ : utilitaires Tailwind clairs codés en dur ----------
   DÉPLACÉ d'autocomposer.css → ICI (design-system.css, chargé globalement) pour bénéficier
   à TOUTES les familles (.au-page/.gsc-page/… et pas seulement .ac-page). Portée .ac-dark. */
.ac-dark .text-gray-900, .ac-dark .text-gray-800 { color:var(--w-ink) !important; }
.ac-dark .text-gray-700, .ac-dark .text-gray-600 { color:var(--w-ink-2) !important; }
.ac-dark .text-gray-500 { color:var(--w-soft) !important; }
.ac-dark .text-gray-400, .ac-dark .text-gray-300, .ac-dark .text-gray-200 { color:var(--w-soft) !important; }
.ac-dark .bg-white { background:var(--w-panel) !important; }
.ac-dark .bg-gray-50, .ac-dark .bg-gray-100 { background:var(--w-panel-2) !important; }
.ac-dark .border-gray-200, .ac-dark .border-gray-100 { border-color:var(--w-line) !important; }
/* THÈME SOMBRE — plus de `!important` sur ces champs, et c'est le point de la passe.
   Cette ligne a longtemps rendu les champs IMPOSSIBLES à délimiter en sombre : `--w-line` est le
   jeton des SÉPARATEURS (mesuré à 1,27 contre le panneau, seuil WCAG 1.4.11 = 3:1), et aucune
   règle à classes ne pouvait passer devant. `studio-video.css` avait fini par riposter avec
   `#studio-app … !important` — deux `!important` qui s'annulent, sur le même bord.
   Les trois propriétés sont désormais portées SANS forçage par `fields.css`, qui charge après :
   fond `--w-panel`, encre `--w-ink`, bord `--w-soft` (5,01 en clair, 6,80 en sombre). Les jetons
   basculent déjà avec le thème — le forçage ne servait qu'à gagner une bataille de spécificité
   contre `tailwind.css`, que l'ordre de chargement règle mieux. */
.ac-dark .bg-green-100  { background:var(--w-pos-bg) !important; }  .ac-dark .text-green-700, .ac-dark .text-green-800  { color:var(--w-pos) !important; }
.ac-dark .bg-orange-100 { background:var(--w-eeat-bg) !important; } .ac-dark .text-orange-700, .ac-dark .text-orange-800 { color:var(--w-eeat-ink) !important; }
.ac-dark .bg-red-100    { background:var(--w-neg-bg) !important; }  .ac-dark .text-red-700, .ac-dark .text-red-800 { color:var(--w-neg) !important; }
.ac-dark .bg-amber-100  { background:var(--w-eeat-bg) !important; } .ac-dark .text-amber-800, .ac-dark .text-amber-700 { color:var(--w-eeat-ink) !important; }
.ac-dark .bg-violet-50, .ac-dark .bg-violet-100 { background:var(--w-accent-soft) !important; }
.ac-dark .text-violet-800, .ac-dark .text-violet-700, .ac-dark .text-violet-600 { color:var(--w-accent-deep) !important; }
.ac-dark .border-violet-200, .ac-dark .border-violet-100 { border-color:var(--w-accent-line) !important; }
.ac-dark .card { background:var(--w-panel) !important; border-color:var(--w-line) !important; color:var(--w-ink-2); }
.ac-dark .bg-amber-50, .ac-dark .bg-emerald-50, .ac-dark .bg-green-50, .ac-dark .bg-red-50, .ac-dark .bg-slate-50, .ac-dark .bg-indigo-50 { background:var(--w-panel-2) !important; }
.ac-dark .border-black, .ac-dark .border-gray-300, .ac-dark .border-slate-200 { border-color:var(--w-line) !important; }
.ac-dark .text-emerald-700, .ac-dark .text-emerald-800 { color:var(--w-pos) !important; }
.ac-dark .page-subtitle { color:var(--w-soft) !important; }
.ac-dark .mg-card-title { color:var(--w-ink) !important; }
.ac-dark .text-gray-600 { color:var(--w-soft) !important; }
.ac-dark .bg-blue-50, .ac-dark .bg-blue-100 { background:var(--w-accent-soft) !important; }
.ac-dark .text-blue-700, .ac-dark .text-blue-800, .ac-dark .text-blue-600 { color:var(--w-accent-deep) !important; }
.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; }
.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; }

/* ---------- Onglets (magic-tabs) — style 3A harmonisé (TOUTES familles de pages) ----------
   Le composant partagé (assets/tailwind.css) a un style par défaut (pilule en dégradé violet,
   fond flouté) que seul AutoComposer avait affiné (fond plat, bordure fine, pilule active
   couleur pleine). Toutes les autres familles (RssFinder/PoolCreator/Phoenix/Quick Wins/
   GSC/e-Lagage/Calendrier/WP Manager…) héritaient donc du style brut, incohérent avec
   AutoComposer. Généralisé ici — chargé APRÈS tailwind.css sur toutes les pages (x-head.php),
   même spécificité que les règles brutes → l'ordre de chargement suffit à les remplacer.
   PRM garde son style « underline » dédié (sélecteur plus spécifique .prm-page …, non affecté).
   Espacement : le helper magic_tabs() pose `mb-6` (24px bas) sur TOUTES les pages mais SEUL
   AutoComposer ajoutait explicitement un espace en haut (.ac-page nav.magic-tabs) → écart
   en-tête→onglets incohérent ailleurs (30px chez AutoComposer, 16px chez les familles à
   header négatif type .au-topbar). Ce 30px = 16px (padding-top de .ac-body, NE collapse PAS
   avec le margin du nav car séparé par un padding) + 14px (margin-top du nav). Sur .au-page
   (header à margin négative -16px -28px 16px), le margin-top du nav COLLAPSE avec le
   margin-bottom de l'en-tête (adjacents, sans padding entre) → le résultat est le MAX des
   deux, pas la somme : il faut donc 30px ici pour obtenir le même espace visuel de 30px. */
.magic-tabs { background:var(--w-panel); backdrop-filter:none; border:1px solid var(--w-line); border-radius:var(--w-r-lg); box-shadow:var(--w-sh); padding:6px; margin-top:30px; }
.magic-tab { color:var(--w-soft); border-radius:9px; }
.magic-tab:hover { color:var(--w-accent); background:var(--w-accent-soft); }
.magic-tab.active, .magic-tab.active:hover { background:var(--w-accent); color:#fff; box-shadow:0 2px 8px rgba(79,70,229,.22); }
.ac-dark .magic-tab.active, .ac-dark .magic-tab.active:hover { box-shadow:none; }

/* ---------- Bloc titre d'en-tête normalisé (TOUTES familles de pages) ----------
   Icône (reprise du menu latéral) + titre + description courte, sous n'importe
   quel titre de page (.ac-head-title / .au-topbar-title / .gsc-head-title / etc.).
   Global (chargé via x-head.php sur toutes les pages), source unique. */
.ac-head-title { font-size:14.5px; font-weight:600; color:var(--w-ink); margin:0; letter-spacing:-.01em; }
/* font-family imposée ici : le titre/sous-titre s'affiche en Inter sur TOUTES les familles
   (.ac-page définit --w-display, mais .au-page/.gsc-page… non → sinon retombe en system-ui,
    d'où un titre en police système sur Phoenix/RssFinder/… vs Inter sur AutoComposer). */
.ac-head-titlewrap { display:flex; align-items:center; gap:10px; min-width:0; font-family:var(--w-display); }
.ac-head-icon { width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ac-head-icon svg { width:16px; height:16px; }
.ac-head-sub { font-size:12px; color:var(--w-soft); margin-top:2px; font-weight:400; letter-spacing:0; }

/* ---------- Thème, déporté dans la barre du haut GLOBALE (x-topbar.php) ----------
   Réglage global (contrairement au Guide, resté dans l'en-tête contextuel de chaque page).
   Icon-btn en verre translucide, cohérent avec .topbar-btn (Mon compte/Déconnexion). */
.topbar-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:var(--w-r-sm); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:rgba(255,255,255,.78);
  cursor:pointer; transition:all .15s ease; backdrop-filter:blur(6px); }
.topbar-icon-btn:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.20); transform:translateY(-1px); }
.topbar-icon-btn svg { width:16px; height:16px; }
/* Raccourci « Calendrier éditorial » (2026-09-24) — collé au bouton vert « Support », qu'il suit où que
   support.js le place. Variante A retenue par le fondateur parmi quatre maquettes : violet DOUX + libellé.
   Coloré sans rivaliser avec le vert plein du Support (deux boutons pleins côte à côte se disputaient
   l'œil) ; le libellé dit où il mène. Gabarit des boutons voisins (36 px en barre d'actions, 38 px en
   repli d'en-tête, rayon 10 px, 13 px/600). Couleurs portées par les jetons de tuile violets. */
.cal-raccourci {
  /* Jetons de tuile violets (basculent avec le thème du CONTENU, pas celui de la coque) ; l'encre est
     assombrie vers --w-ink en clair et éclaircie en nuit, pour tenir 4,5:1 sur les deux fonds. */
  --cal-encre:color-mix(in srgb, var(--w-c-violet) 72%, var(--w-ink));
  --cal-ligne:color-mix(in srgb, var(--w-c-violet) 32%, transparent);
  display:inline-flex; align-items:center; justify-content:center; gap:8px; flex:none;
  height:32px; padding:0 12px; margin-right:8px;
  border-radius:9px; border:1px solid var(--cal-ligne); background:var(--w-c-violet-bg); color:var(--cal-encre);
  font-size:13px; font-weight:600; line-height:1; white-space:nowrap; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.cal-raccourci svg { width:16px; height:16px; flex:none; }
.cal-raccourci:hover { background:color-mix(in srgb, var(--w-c-violet) 20%, transparent); border-color:color-mix(in srgb, var(--w-c-violet) 50%, transparent); color:var(--cal-encre); transform:translateY(-1px); }
.cal-raccourci:active { transform:translateY(0); }
.cal-raccourci:focus-visible { outline:2px solid #a78bfa; outline-offset:2px; }
/* Sur la page du calendrier : appuyé, pour dire « vous y êtes ». */
.cal-raccourci[aria-current="page"] { background:color-mix(in srgb, var(--w-c-violet) 22%, transparent); border-color:var(--w-c-violet); box-shadow:inset 0 1px 2px rgba(0,0,0,.15); }
/* Mêmes hauteurs que le Support dans chaque contexte (cf. support.css : .ui-page-actions 36 px, en-tête 38 px). */
.ui-page-actions .cal-raccourci { height:var(--ui-btn-h, 36px); padding:0 14px; margin-right:0; border-radius:var(--w-r-md); }
.topbar-actions .cal-raccourci { height:38px; padding:0 14px; margin-right:0; border-radius:var(--w-r-md); }

/* Incident 2026-07-03 : les pills de modules (AutoComposer/MagicCluster/RssFinder/...) sont
   en nombre variable par tenant et pouvaient, sur un écran laptop courant (~1366px), pousser
   Guide/thème/Mon compte/Déconnexion hors du viewport (aucun scroll, juste invisibles).
   Fix : le nav de modules rétrécit et scrolle EN INTERNE ; les actions à droite ne rétrécissent
   jamais et restent toujours visibles. */
.topbar-modules-nav { min-width:0; flex-shrink:1; overflow-x:auto; scrollbar-width:thin; }
.topbar-modules-nav::-webkit-scrollbar { height:4px; }
.topbar-modules-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15); border-radius:2px; }
.topbar-modules-nav .topbar-module { flex-shrink:0; }
.topbar-actions { display:flex; align-items:center; gap:1rem; flex-shrink:0; }