/* ── Thème — palette dark + clair (identité comunicato.fr) ────────────────
   Dark (:root) : tokens repris de landing/app/globals.css (navy + cyan/magenta) pour la
   cohérence de marque avec la landing page.
   Clair (:root[data-theme="light"] plus bas) : palette dédiée indigo/orange, volontairement
   différente de la landing (voir le commentaire sur ce bloc pour le pourquoi).
   Variables centralisées ici pour rester faciles à ajuster sans toucher au reste du code —
   voir theme.js pour le toggle (section "Apparence" dans Compte). */

:root {
  --bg: #0b0f17;
  --bg-rgb: 11, 15, 23;
  --bg-elevated: #0f172a;
  --bg-elevated-rgb: 15, 23, 42;
  --bg-card: #131c2e;
  --text: #f8fafc;
  --text-rgb: 248, 250, 252;
  /* Accent générique de l'UI (états actifs, focus, liens, badges...) — rose
     du liseret "Aujourd'hui" (voir --accent-pink-muted plus bas), pas le cyan
     d'origine. --accent-cyan reste du vrai cyan : il sert encore tel quel
     dans le liseret dégradé animé des cards (dashboard.css/config-desktop.css)
     et ne doit pas suivre ce changement. */
  --accent: hsl(338, 45%, 63%);
  --accent-rgb: 203, 118, 149;
  --accent-border-rgb: 203, 118, 149;

  --surface-alt: #1e293b;
  --border-subtle: #1e293b;
  --border-strong: #334155;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;

  --accent-cyan: #0cbce7;
  --accent-cyan-soft: #4dd3f0;
  --accent-purple: #6d1fb0;
  --accent-purple-soft: #9747d6;
  --accent-magenta: #d904aa;
  --accent-magenta-soft: #ea4fc7;
  --accent-pink: #f94989;
  --accent-pink-muted: hsl(338, 45%, 63%);

  /* Vert d'état des pastilles Publié/Programmé (.badge-fait/.badge-programme, index.css) —
     calibré pour les surfaces sombres. Variabilisé pour pouvoir le foncer en thème clair, voir
     le bloc [data-theme="light"] plus bas. */
  --status-green: #7fd99a;
  --status-green-soft: #5cc878;
  /* Ambre des pastilles/cards « Programmé » — volontairement plus jaune que le rouge-orangé de
     « En retard » (rgba(232,90,67,...)). Les deux ne coexistent jamais sur une même card (voir
     `late` dans week.js, jamais calculé pour un post programmé), mais ils se croisent dans une
     même colonne de la Semaine. */
  --status-orange: #f2a54c;

  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --glass-bg: color-mix(in srgb, var(--bg-card) 60%, transparent);

  /* Ombre portée des cards (2 couches, même valeur dans les deux thèmes — une ombre reste sombre
     quel que soit le thème). Deux formes : box-shadow pour les cards "normales", et l'équivalent
     en filter: drop-shadow() pour les cards qui ont overflow:hidden/auto sur elles-mêmes (coins
     arrondis qui clippent leur contenu) — un box-shadow est clippé par le overflow DU MÊME élément,
     pas un filter: drop-shadow, qui rend l'ombre malgré tout (cf. .week-task-wrap, .dash-cal-day,
     .dash-hist-card, .stats-panel, .hist-swipe). */
  --shadow-card: 0 2px 4px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.16);
  --shadow-card-filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18)) drop-shadow(0 6px 16px rgba(0,0,0,0.16));

  /* Liseret dégradé animé des cards (dashboard.css .dash-panel::before et équivalents dans
     config-desktop/atelier-desktop/history-desktop/stats-desktop/week-desktop.css) : un seul
     ton par thème (pas le balayage arc-en-ciel cyan/purple/magenta/pink d'origine) — rose pâle en
     sombre, bleu foncé en clair — avec un "glint" plus clair qui tourne avec l'anneau
     (--dash-border-angle, @property déclaré dans dashboard.css) pour donner un effet de
     brillance/shimmer plutôt qu'un anneau plat. */
  --card-border-base: #e8a9c0;
  --card-border-shine: #fce7ef;
}

/* Palette dédiée au thème clair du dashboard (choix produit 2026-08-11) : indigo "tech" +
   corail/orange "énergie/IA", volontairement DIFFÉRENTE de la palette cyan/purple/magenta de la
   landing page (voir memory landing_page_comunicato_fr — coral/indigo avaient été écartés là-bas
   au profit du vrai logo). Divergence assumée : cette palette ne s'applique qu'ici, pas à
   landing/app/globals.css. */
:root[data-theme="light"] {
  --bg: #e8ecf2;
  --bg-rgb: 232, 236, 242;
  --bg-elevated: #ffffff;
  --bg-elevated-rgb: 255, 255, 255;
  --bg-card: #ffffff;
  --text: #0f172a;
  --text-rgb: 15, 23, 42;

  /* Indigo "primaire tech" — assez foncé pour rester lisible en texte ET en fond de bouton
     texte blanc (le motif `color: var(--bg-elevated)` sur `background: var(--accent)`, cf.
     .btn-primary/.btn-full-soft dans index.css, suppose un accent assez sombre). */
  --accent: #4f46e5;
  --accent-rgb: 79, 70, 229;
  --accent-border-rgb: 79, 70, 229;
  --accent-pink-muted: #4f46e5;

  --surface-alt: #eef2f7;
  --border-subtle: #e2e8f0;
  --border-strong: #cbd5e1;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;

  /* Liseret dégradé animé des cards (icon-chip-gradient, bordures conic-gradient de
     config-desktop.css/dashboard.css/etc.) : balayage indigo → violet → orange, plutôt que le
     cyan/purple/pink de marque. --accent-magenta/-soft restent EXPRÈS la teinte magenta du dark
     (pas de variante ici) : ce sont les seules variables de ce groupe posées derrière du texte
     blanc en dur (.btn-full, .dash-hist-lightbox-btn-primary) — un orange assez vif pour "l'énergie
     IA" n'a pas un contraste suffisant avec du blanc à cet endroit, donc on ne les détourne pas
     du magenta déjà vérifié plutôt que de risquer un bouton "Publier" illisible. */
  --accent-cyan: #4f46e5;
  --accent-cyan-soft: #818cf8;
  --accent-purple: #8b5cf6;
  --accent-purple-soft: #a78bfa;
  --accent-pink: #f97316;

  --card-border-base: #1e3a8a;
  --card-border-shine: #93c5fd;

  /* Les verts d'état du thème sombre posés sur une surface claire tombent à 1,3:1 de contraste
     (mesuré sur .badge-fait au-dessus de --surface-alt) : la pastille se voyait, son texte non.
     Même famille de vert, assez foncée pour rester lisible sur le fond teinté de la pastille. */
  --status-green: #14663a;
  --status-green-soft: #157347;
  --status-orange: #7d4600;
}

/* Le changement de thème modifie des variables sur :root ; certains éléments qui ont une
   transition CSS sur color/background (boutons, icônes d'onglets...) peuvent alors rester
   bloqués à mi-chemin de l'ancienne couleur (bug de retriggering de transition des navigateurs
   quand seule une custom property change, pas une classe locale). On coupe toutes les
   transitions le temps d'appliquer le nouveau thème pour forcer un rendu instantané. */
:root.theme-switching, :root.theme-switching * { transition: none !important; }

.theme-toggle { display: flex; gap: 8px; justify-content: center; }
.theme-toggle-btn {
  padding: 8px 20px; border-radius: var(--radius-lg); cursor: pointer;
  background: rgba(var(--accent-rgb),0.06); border: 1px solid rgba(var(--accent-border-rgb),0.2);
  color: rgba(var(--text-rgb),0.6); font-size: 13px; font-weight: 600; transition: all 0.15s;
}
.theme-toggle-btn.active {
  background: rgba(var(--accent-rgb),0.16); border-color: rgba(var(--accent-border-rgb),0.55); color: var(--accent);
}