/* ═══════════════════════════════════════════════════════════
   theme.css — Design system Nexalys (mode formateur) · v3
   Source UNIQUE des couleurs, rayons, ombres et boutons.
   ⚠️ Chargé EN DERNIER dans <head> (après les <style> inline).
   v3 : contraste renforcé + jetons des pages Accueil / Progression / Parcours.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Verts : famille principale ── */
  --nx-green-25:  #f6fbf8;
  --nx-green-50:  #eef8f2;
  --nx-green-100: #e3f2e8;
  --nx-green-200: #d8eddf;   /* fond du bouton principal */
  --nx-green-300: #b9ddc7;   /* bordures vertes */
  --nx-green-400: #8cc3a2;
  --nx-green-500: #4c9a6d;   /* pastilles, barres de progression */
  --nx-green-600: #2e7d52;
  --nx-green-700: #217346;   /* accent, étape en cours */
  --nx-green-800: #185c37;
  --nx-green-900: #0f5132;   /* texte sur fond vert, carte forte */

  /* ── Bleu marine du logo : titres + rares repères ── */
  --nx-navy-900: #0b1f3b;
  --nx-navy-700: #1e3a6e;
  --nx-navy-600: #224494;
  --nx-navy-100: #dbe3f1;
  --nx-navy-50:  #f1f4fa;

  /* ── Neutres ── */
  --nx-ink:   var(--nx-navy-900);   /* titres */
  --nx-text:  #334155;
  --nx-muted: #526071;              /* v3 : était #64748b (contraste 4,7 → 6,4:1) */
  --nx-faint: #94a3b8;
  --nx-bg:        #f6f8f7;
  --nx-surface:   #ffffff;
  --nx-surface-2: #f8faf9;   /* fond discret d'un bloc */
  --nx-surface-3: #eef2f0;   /* pistes, onglets, squelettes */
  --nx-border:        #e2e9e5;
  --nx-border-strong: #cfdad3;

  /* ── États (toujours doux) ── */
  --nx-warn:        #a16207;
  --nx-warn-ink:    #854d0e;
  --nx-warn-soft:   #fffaeb;
  --nx-warn-border: #f3e1b0;
  --nx-warn-dot:    #d9a441;

  --nx-bad:        #b4432d;
  --nx-bad-ink:    #8f2f1e;
  --nx-bad-soft:   #fdf4f1;
  --nx-bad-border: #f1d2c8;

  --nx-info:        var(--nx-navy-600);
  --nx-info-soft:   var(--nx-navy-50);
  --nx-info-border: var(--nx-navy-100);

  /* Notes d'exercice : 3 paliers, pas d'arc-en-ciel */
  --nx-score-low:  #b4432d;
  --nx-score-mid:  #b7791f;
  --nx-score-high: #2e7d52;

  /* ── v3 : pages Accueil, Progression, Parcours ── */
  --nx-page:        #e9efeb;   /* fond de page : les cartes blanches s'en détachent */
  --nx-line:        #dce5df;   /* bordure des cartes */
  --nx-divider:     #edf2ef;   /* séparateurs internes */
  --nx-text-strong: #1f2d3d;   /* texte courant */
  --nx-text-soft:   #3d4b5c;   /* texte secondaire appuyé */

  /* Carte forte (une seule par page) */
  --nx-hero:        var(--nx-green-900);
  --nx-hero-ink:    #c3e6d0;   /* texte secondaire sur le vert profond */
  --nx-hero-soft:   #ecf7f0;
  --nx-hero-accent: #7be0a6;

  /* Ambre (série de jours, « à consolider ») et corail (« à travailler ») */
  --nx-amber:        #c2720c;
  --nx-amber-soft:   #fff7e6;
  --nx-amber-border: #f0d9a4;
  --nx-amber-cell:   #e2a93b;
  --nx-coral:        #c2583f;

  /* Or : réservé au trophée de l'objectif */
  --nx-gold:        #c9962b;
  --nx-gold-dark:   #9a6f17;
  --nx-gold-ink:    #7d5a10;
  --nx-gold-soft:   #fdf7e8;
  --nx-gold-border: #efdcaa;

  /* ── Formes ── */
  --nx-r-sm: 8px;
  --nx-r-md: 12px;
  --nx-r-lg: 16px;
  --nx-shadow-1: 0 1px 2px rgba(11,31,59,.045);
  --nx-shadow-2: 0 1px 2px rgba(11,31,59,.04), 0 8px 22px rgba(11,31,59,.06);
  --nx-shadow-3: 0 4px 12px rgba(11,31,59,.07), 0 18px 42px rgba(11,31,59,.12);
  --nx-shadow-green: 0 4px 12px rgba(33,115,70,.12);
  --nx-focus: 0 0 0 3px rgba(33,115,70,.18);

  /* ── Bouton principal = bouton « Travail réel » ──
     Pour passer un jour à un bouton plein : changer ces 5 lignes seulement. */
  --nx-btn-primary-bg:       var(--nx-green-200);
  --nx-btn-primary-bg-hover: var(--nx-green-300);
  --nx-btn-primary-bd:       var(--nx-green-300);
  --nx-btn-primary-bd-hover: #a9d3b9;
  --nx-btn-primary-fg:       var(--nx-green-900);
}

/* ═══ 1. Écran de connexion ═══
   Géré entièrement dans le <style> « Écran d'auth — design v3 » de taskpane.html. */

/* ═══ 2. Boutons et champs génériques ═══
   (corrige aussi un bug : au survol, le bouton principal devenait
   bleu très clair avec un texte blanc illisible) */
.app-shell .btn:not(.send-btn):not(.btn-logout) {
  border-color: var(--nx-border-strong);
  color: var(--nx-ink);
}
.app-shell .btn:not(.send-btn):not(.btn-logout):hover {
  background: var(--nx-surface-2);
  border-color: var(--nx-border-strong);
  box-shadow: none;
  transform: none;
}
.app-shell .btn.btn-primary:not(.send-btn):not(.btn-logout) {
  background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bd);
  color: var(--nx-btn-primary-fg);
}
.app-shell .btn.btn-primary:not(.send-btn):not(.btn-logout):hover {
  background: var(--nx-btn-primary-bg-hover);
  border-color: var(--nx-btn-primary-bd-hover);
  box-shadow: var(--nx-shadow-green);
}

.app-shell input[type="text"]:focus-visible,
.app-shell input[type="email"]:focus-visible,
.app-shell input[type="number"]:focus-visible,
.app-shell textarea:focus-visible,
.privacy-select:focus-visible,
.privacy-item-sheet:focus-visible,
.privacy-item-range:focus-visible,
.support-input:focus,
.support-select:focus,
.support-textarea:focus {
  border-color: var(--nx-green-400);
  box-shadow: var(--nx-focus);
}

/* ═══ 3. Ruban + menu compte ═══ */
.app-shell[data-mode="apprentissage"] .top-ribbon { background: rgba(255,255,255,.97); }
.top-ribbon { box-shadow: var(--nx-shadow-1); }

#top-ribbon #lrn-tabs .lrn-tab:hover { background: var(--nx-surface-2); color: var(--nx-ink); }
#top-ribbon #lrn-tabs .lrn-tab.is-active { background: var(--nx-green-50); color: var(--nx-green-800); }
#top-ribbon #lrn-tabs .lrn-tab:focus-visible { outline: none; box-shadow: var(--nx-focus); }

.account-menu-head { background: var(--nx-surface-2); border-color: var(--nx-border); }
.account-menu-head .account-stats-row { border-top-color: var(--nx-border); }
.plan-badge,
.plan-badge.plan-free { border-color: var(--nx-green-200); }
.plan-badge.plan-pro { background: var(--nx-info-soft); border-color: var(--nx-info-border); color: var(--nx-info); }

/* ═══ 4. Assistant flottant : bleu marine (≠ bulle du Prof, verte) ═══ */
.nx-chat-fab {
  background: var(--nx-navy-700);
  border-color: var(--nx-navy-900);
  box-shadow: 0 10px 26px rgba(11,31,59,.24);
}
.nx-chat-fab:hover,
.nx-chat-fab:focus-visible {
  background: var(--nx-navy-900);
  box-shadow: 0 14px 32px rgba(11,31,59,.30);
}
.cw-logo { border-color: var(--nx-green-200); box-shadow: none; }
.cw-example:hover,
.scroll-bottom-fab:hover,
.kebab:hover { border-color: var(--nx-green-300); }
.pv-open-modern {
  background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bd);
  color: var(--nx-btn-primary-fg);
}
.pv-open-modern:hover {
  background: var(--nx-btn-primary-bg-hover);
  border-color: var(--nx-btn-primary-bd-hover);
  box-shadow: var(--nx-shadow-green);
}
.pv-open-modern svg { color: currentColor; }
.content-md .nx-code { background: var(--nx-green-50); color: var(--nx-green-800); }

/* ═══ 5. Historique + Preview : plus de barres latérales ═══ */
.hist-row { border-left-width: 1px; }
.history-item:hover .hist-row {
  border-color: var(--nx-border-strong);
  border-left-color: var(--nx-border-strong);
  background: var(--nx-surface);
}
.history-item.active .hist-row {
  background: var(--nx-green-50);
  border-color: var(--nx-green-200);
  border-left-color: var(--nx-green-200);
  box-shadow: none;
}
.history-icon-btn:hover { background: var(--nx-green-50); border-color: var(--nx-green-300); color: var(--nx-green-800); }

.pv-step::before { display: none; }
.pv-step:hover { border-color: var(--nx-border-strong); }
.pv-step.is-selected { border-color: var(--nx-green-400); background: var(--nx-green-25); }
.pv-actions .pv-run {
  background: var(--nx-btn-primary-bg);
  border-color: var(--nx-btn-primary-bd);
  color: var(--nx-btn-primary-fg);
}
.pv-actions .pv-run:hover {
  background: var(--nx-btn-primary-bg-hover);
  border-color: var(--nx-btn-primary-bd-hover);
}
.pv-step--played .pv-step-check { border-color: var(--nx-green-600); background: var(--nx-green-600); }

/* ═══ 6. Facturation : plus de barres latérales ═══ */
.plan-card,
.plan-card--featured { border-left-width: 1px; }
.plan-card:hover {
  border-color: var(--nx-green-300);
  border-left-color: var(--nx-green-300);
  transform: none;
}
.plan-card--featured {
  background: var(--nx-green-50);
  border-color: var(--nx-green-200);
  border-left-color: var(--nx-green-200);
}
.plan-tag--current { background: var(--nx-green-700); border-color: var(--nx-green-700); }
.plan-tag--pill { background: var(--nx-green-50); border-color: var(--nx-green-200); }
.pack-card { background: var(--nx-surface); border: 1px solid var(--nx-border); }
.pack-card:hover { border-color: var(--nx-green-300); transform: none; }
#tab-shop-pack .sub-card { background: var(--nx-surface-2); border-color: var(--nx-border); }

.bh-kind { background: var(--nx-surface-2); border-color: var(--nx-border); color: var(--nx-muted); }
.bh-kind-sub { background: var(--nx-info-soft); border-color: var(--nx-info-border); color: var(--nx-info); }
.sub-badge-ok,
.bh-kind-topup { background: var(--nx-green-50); border-color: var(--nx-green-200); color: var(--nx-green-800); }
.sub-badge-warn,
.bh-kind-usage { background: var(--nx-warn-soft); border-color: var(--nx-warn-border); color: var(--nx-warn-ink); }
.bh-amount-plus { color: var(--nx-green-700); }
.bh-amount-minus { color: var(--nx-bad); }

/* ═══ 7. Confidentialité : plus de barres latérales ═══ */
.privacy-section,
.privacy-item-row { border-left-width: 1px; }
.privacy-section:hover {
  border-color: var(--nx-border-strong);
  border-left-color: var(--nx-border-strong);
  transform: none;
}
.privacy-item-row { border-color: var(--nx-border); background: var(--nx-surface); }
.privacy-item-row:hover { border-color: var(--nx-border-strong); }
.privacy-switch input:checked + .privacy-switch-ui { border-color: var(--nx-green-800); }

/* ═══ 8. Support ═══ */
.support-ticket-card:hover { border-color: var(--nx-green-300); box-shadow: var(--nx-shadow-1); }
.support-ticket-status.status-open { background: var(--nx-info-soft); border-color: var(--nx-info-border); color: var(--nx-info); }
.support-ticket-status.status-in_progress { background: var(--nx-warn-soft); border-color: var(--nx-warn-border); color: var(--nx-warn-ink); }
.support-ticket-status.status-resolved { background: var(--nx-green-50); border-color: var(--nx-green-200); color: var(--nx-green-800); }
.support-form-error { background: var(--nx-bad-soft); border-color: var(--nx-bad-border); color: var(--nx-bad-ink); }
.support-form-success,
.support-reply-text { background: var(--nx-green-50); border-color: var(--nx-green-200); }
.support-form-success { color: var(--nx-green-800); }

/* ═══ 9. v3 — Accueil, Progression, Parcours : fond de page ═══
   .main a un padding de 12 px : ces trois panneaux le recouvrent pour que
   leur fond plus soutenu aille jusqu'aux bords du volet. */
#tab-accueil.tab-panel,
#tab-fiche.tab-panel,
#tab-parcours.tab-panel,
#tab-onboarding.tab-panel,
#tab-fact-sub.tab-panel {
  margin: -12px;
  height: calc(100% + 24px);
  background: var(--nx-page);
}
/* Mon abonnement (billing.ts) : la marge vient de .nxk-page, comme l'Accueil. */
#tab-fact-sub.tab-panel { padding-right: 0; }

/* ═══ 10. Astuces et félicitations : un ton par type de message ═══
   Le vert ne porte plus tout : chaque astuce (lib/coach-tips.ts) et chaque félicitation
   (lib/coach-guide.ts) prend son ton avec l'attribut data-nx-tone.
     guide  vert      le chemin : ta prochaine étape
     new    marine    une fonction à découvrir
     excel  sarcelle  ce qui se passe dans ton classeur
     tip    ambre     un raccourci, un bon réflexe
     gold   or        une réussite qui compte
   Changer une couleur ici la change partout. */
:root {
  --nx-teal-800: #0b5f68;
  --nx-teal-700: #0e7c86;
  --nx-teal-200: #c3e6eb;
  --nx-teal-50:  #edf8fa;
}
[data-nx-tone="guide"] {
  --tone: var(--nx-green-700);
  --tone-ink: var(--nx-green-800);
  --tone-soft: var(--nx-green-50);
  --tone-border: var(--nx-green-200);
  --tone-glow: rgba(33,115,70,.24);
}
[data-nx-tone="new"] {
  --tone: var(--nx-navy-600);
  --tone-ink: var(--nx-navy-700);
  --tone-soft: var(--nx-navy-50);
  --tone-border: var(--nx-navy-100);
  --tone-glow: rgba(34,68,148,.22);
}
[data-nx-tone="excel"] {
  --tone: var(--nx-teal-700);
  --tone-ink: var(--nx-teal-800);
  --tone-soft: var(--nx-teal-50);
  --tone-border: var(--nx-teal-200);
  --tone-glow: rgba(14,124,134,.24);
}
[data-nx-tone="tip"] {
  --tone: var(--nx-amber);
  --tone-ink: var(--nx-warn-ink);
  --tone-soft: var(--nx-amber-soft);
  --tone-border: var(--nx-amber-border);
  --tone-glow: rgba(194,114,12,.24);
}
[data-nx-tone="gold"] {
  --tone: var(--nx-gold);
  --tone-ink: var(--nx-gold-ink);
  --tone-soft: var(--nx-gold-soft);
  --tone-border: var(--nx-gold-border);
  --tone-glow: rgba(201,150,43,.26);
}