/* ═══════════════════════════════════════════════════════════════════════════
   THÈME CLAIR « STUDIO » — PARTAGÉ PAR TOUTES LES PAGES
   Règles appliquées : skill 10k-websites (references/scrub-pipeline.md §Design).
   Voir DESIGN.md, addendum août 2026.

   Un seul fichier, chargé APRÈS le <style> de chaque page : les composants sont
   pilotés par les mêmes variables (--ink, --surface, --wire…), redéfinir la
   palette fait 90 % du travail. Six copies de ce bloc divergeraient — même
   leçon que `deplacerFichier()` ou le harnais des checks : la précaution qu'on
   duplique est celle qu'on oublie de corriger.

   Les sélecteurs propres à une page (pager du dashboard, badges de /clips…)
   vivent ici aussi : inertes ailleurs, corrigés partout d'un seul geste.
   Revenir au sombre = retirer le <link>.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#F2F4F9;        /* canvas — papier froid teinté marque, jamais #fff pur */
  --surface:#FDFDFF;    /* cartes */
  --surface2:#E9EDF5;
  --line:#D9DFEA;
  --signal:#E43D31;     /* rouge « à l'antenne » — doses rares */
  --wire:#087F6F;       /* teal ENCRE, lisible en texte sur clair (4.6:1) */
  --wire-vif:#29E0C4;   /* le teal de marque, réservé aux fonds et lueurs */
  --cloud:#141B2E;      /* texte principal — encre bleutée, pas #000 */
  --slate:#51607A;      /* texte secondaire — 4.6:1 sur le canvas */
  --amber:#B47B00;      /* ambre encre (le #FFB020 ne tient pas sur clair) */
  /* landing.html emploie ses propres noms de surfaces : alignés sur les nôtres. */
  --panel:#FDFDFF;
  --studio:#E9EDF5;
}

/* ── Environnement fixe : deux lueurs de marque qui dérivent (≥ 60 s) ───────── */
body{position:relative}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52vw 42vh at 12% -6%, rgba(41,224,196,.10), transparent 62%),
    radial-gradient(46vw 38vh at 96% 12%, rgba(228,61,49,.05), transparent 60%),
    var(--ink);
  animation:derive 90s ease-in-out infinite alternate;
}
@keyframes derive{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:4vw 3vh, -3vw 2vh, 0 0}
}

/* ── Signatures : le point « à l'antenne » respire, le fil court sous l'en-tête ── */
.dot{animation:antenne 2.6s ease-in-out infinite}
@keyframes antenne{
  0%,100%{box-shadow:0 0 0 0 rgba(228,61,49,.34)}
  55%{box-shadow:0 0 0 9px rgba(228,61,49,0)}
}
header{position:relative;padding-bottom:14px}
header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--wire-vif) 0%,var(--wire-vif) 34%,var(--line) 34%);
  background-size:300% 100%;
  animation:fil 14s linear infinite;
}
@keyframes fil{from{background-position:0% 0}to{background-position:-300% 0}}

/* ── Surfaces : relief doux, entrées en scène, élévation au survol ─────────── */
.metric,.card,.vid{
  box-shadow:0 1px 2px rgba(20,27,46,.05),0 8px 22px -14px rgba(20,27,46,.12);
  transition:transform .22s ease, box-shadow .22s ease;
}
.vid:hover,.metric:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(20,27,46,.06),0 16px 32px -16px rgba(20,27,46,.20);
}
.metric,.vid{animation:lever .5s cubic-bezier(.2,.7,.3,1) both}
.metric:nth-child(2),.vid:nth-child(3n+2){animation-delay:.06s}
.metric:nth-child(3),.vid:nth-child(3n+3){animation-delay:.12s}
.metric:nth-child(4){animation-delay:.18s}
@keyframes lever{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── Interactions ──────────────────────────────────────────────────────────── */
.btn{transition:transform .15s ease, filter .15s ease, background .15s ease}
.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0) scale(.99)}
.btn.btn-prompt{background:var(--wire);color:#fff}
.btn.btn-prompt:hover{background:#0a9583}
.btn.btn-prompt .spark{color:#fff}
.mode.on{background:var(--wire);color:#fff}
.btn.ghost{border-color:var(--wire);color:var(--wire)}
/* Studio séries : le bouton plein teal passe en texte blanc, comme .btn-prompt. */
.btn.primary{background:var(--wire);color:#fff;border-color:var(--wire)}
.btn.primary:hover:not(:disabled){background:#0a9583;color:#fff}
.btn.ghost .spark{color:var(--wire)}
:is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--wire);outline-offset:2px}
@media (pointer:coarse){.btn,.pager button,.pubact button{min-height:44px}}

/* ── Encres recalibrées : les valeurs sombres codées en dur, page par page ──── */
input,textarea,select{background:#fff}
.modes{background:var(--surface)}
.logoutbtn:hover{border-color:var(--signal);color:var(--signal)}
.del{color:#B3362B;border-color:rgba(228,61,49,.45)}
.del:hover{background:rgba(228,61,49,.07)}
.err{color:#B3362B}
.flag{background:rgba(228,61,49,.08);color:#A03328;border-color:rgba(228,61,49,.3)}
.tag2{background:rgba(8,127,111,.08);color:var(--wire);border-color:rgba(8,127,111,.28)}
.dlbtn{background:rgba(8,127,111,.07);border-color:rgba(8,127,111,.3);color:var(--wire)}
.dlbtn:hover{background:rgba(8,127,111,.13)}
.vid video{background:#0B0E15} /* la vidéo garde un lit sombre : c'est un écran */

/* Badges (dashboard, /jobs, /clips) — les remplissages teal passent en texte blanc. */
.b.auto{color:var(--amber);border-color:#D9A62E;background:rgba(255,176,32,.10)}
.b.seed{color:var(--wire);border-color:rgba(8,127,111,.45)}
.b-running,.b-RUNNING{color:#fff}
.b-done,.b-SUCCEEDED{color:var(--wire);border-color:rgba(8,127,111,.45)}
.b-POLLING{color:var(--amber);border-color:#D9A62E}
.s-flux,.s-seedance{color:#A05A18;border-color:#D9A62E}
.s-article,.s-wiki,.s-stock,.s-source{color:var(--wire);border-color:rgba(8,127,111,.45)}

/* Bandeaux de /clips : les fonds sombres deviennent des lavis clairs. */
.banner.alert{background:rgba(255,176,32,.12);border-color:#D9A62E;color:var(--amber)}
.banner.stop{background:rgba(228,61,49,.08);border-color:var(--signal);color:#A03328}
.metric.warn{border-color:#D9A62E}.metric.warn .v{color:var(--amber)}
.metric.stop{border-color:var(--signal)}.metric.stop .v{color:#B3362B}

/* ── Le mouvement est un agrément, jamais une condition ────────────────────── */
@media (prefers-reduced-motion:reduce){
  body::before,header::after,.dot{animation:none}
  .metric,.vid{animation:none}
  .metric,.card,.vid,.btn{transition:none}
}

/* ── landing.html : les décors pensés pour la nuit, réglés pour le jour ─────── */
/* La barre : verre CLAIR — le verre sombre codé en dur devenait un bandeau noir. */
.bar{background:rgba(242,244,249,.86)}
/* Le voile derrière le texte du héros : il protégeait un texte clair du ciel étoilé.
   Le texte est désormais encre — le voile s'inverse en lavis de papier, même géométrie. */
.hero > .wrap::before{
  background:radial-gradient(78% 72% at 22% 48%,rgba(242,244,249,.94) 0%,rgba(242,244,249,.7) 52%,transparent 84%);
}
/* Le ciel du Sahara : ses étoiles sont quasi blanches (peintes en JS, hors de portée
   du CSS). L'inversion + rotation de teinte les rend ENCRE en préservant à peu près
   le teal des accents — la constellation devient un semis de points d'encre. */
#fennec-sky{filter:invert(1) hue-rotate(180deg);opacity:.55}