/* ============================================================================
   FMCourse · theme-openclassrooms.css
   Re-skin façon OpenClassrooms : VIOLET + typo sans-serif + coins arrondis.

   ⚠️ NE MODIFIE AUCUN FICHIER EXISTANT. À charger EN DERNIER, après
   main.css / dashboard.css / course.css / courses.css / live.css :

     <link rel="stylesheet" href="/assets/css/main.css">
     <link rel="stylesheet" href="/assets/css/dashboard.css">   (selon la page)
     ...
     <link rel="stylesheet" href="/assets/css/theme-openclassrooms.css">  ← ICI

   Principe : on redéfinit la VALEUR des tokens (les sélecteurs, la structure
   et le markup restent identiques). Quelques surcharges ciblées corrigent les
   endroits où une couleur était codée « en dur » ou où --navy servait
   d'accent de marque plutôt que de couleur de texte.

   Police : OpenClassrooms utilise une police propriétaire. Le plus proche
   gratuit est « Source Sans 3 » (même famille humaniste). Remplace l'@import
   ci-dessous si tu disposes d'un autre fichier de police.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;900&display=swap');

/* ----------------------------------------------------------------------------
   1. REMAP DES TOKENS  (cascade automatique sur ~80 % du rendu)
   ---------------------------------------------------------------------------- */
:root{
  /* Typo : tout passe en sans-serif (on garde les noms --serif/--sans) */
  --serif:"Source Sans 3", system-ui, -apple-system, sans-serif;
  --sans :"Source Sans 3", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* watermark live */

  /* Couleurs de marque */
  --navy:#22223B;        /* ENCRE : titres + texte fort (n'est plus la couleur d'action) */
  --navy-btn:#7451EB;    /* VIOLET : action primaire (boutons) */
  --navy-logo:#7451EB;
  --navy-dark:#5B3AD6;   /* VIOLET foncé : hover, dégradés */
  --teal:#7451EB;        /* VIOLET : liens, catégories, accents, focus */
  --gold:#FFC83D;        /* JAUNE chaud : notes/étoiles, badges */

  /* Fonds & lignes */
  --bg:#FBFAF7;          /* canvas : blanc chaud */
  --bg-soft:#F3F1FB;     /* sections douces : lilas très clair */
  --card:#FFFFFF;
  --line:#E6E6EF;
  --text:#4A4A63;
  --text-soft:#6E6E85;

  /* Formes (--pill inchangé : les badges/tags restent en pilule) */
  --radius:12px;
  --radius-sm:8px;

  /* Ombres : même géométrie, teinte encre au lieu de navy */
  --shadow:0 6px 24px rgba(34,34,59,.08);
  --shadow-h:0 12px 34px rgba(34,34,59,.14);
  --shadow-sm:0 1px 2px rgba(34,34,59,.05), 0 4px 14px rgba(34,34,59,.05);

  /* Alias dashboard (défini dans dashboard.css) : tint teal → lilas */
  --c-primary-light:#EDE9FB;
}

/* ----------------------------------------------------------------------------
   2. TYPOGRAPHIE
   ---------------------------------------------------------------------------- */
h1, h2, h3, h4{ font-weight:700; letter-spacing:-.01em; }

/* ----------------------------------------------------------------------------
   3. BOUTONS  (violet plein + coins arrondis, pas en pilule)
   ---------------------------------------------------------------------------- */
.btn{ border-radius:var(--radius-sm); }
.btn:hover,
.btn-primary:hover{ background:var(--navy-dark); }
.btn-ghost{ border-color:#7451EB; color:#7451EB; }
.btn-ghost:hover{ background:#7451EB; color:#fff; }
.btn-link{ color:#7451EB; }
.btn-link:hover{ color:var(--navy-dark); }
/* On garde le ghost clair au-dessus du hero sombre */
.hero .btn-ghost{ border-color:#fff; color:#fff; }
.hero .btn-ghost:hover{ background:#fff; color:var(--navy); }

/* ----------------------------------------------------------------------------
   4. HERO / BANDEAUX / FOOTER  (endroits où --navy servait d'accent)
   ---------------------------------------------------------------------------- */
/* Voile vidéo : indigo-violet au lieu de navy */
.hero .overlay{
  background:linear-gradient(90deg,
    rgba(38,28,78,.92) 0%,
    rgba(38,28,78,.76) 45%,
    rgba(38,28,78,.42) 100%);
}
/* Bandeau réassurance + CTA sur-mesure : violet de marque */
.trust{ background:#7451EB; }
.trust .dot{ background:rgba(255,255,255,.22); }
.custom{ background:linear-gradient(120deg, #7451EB 0%, #5B3AD6 100%); }
/* Footer : indigo profond (reste sombre → un logo clair demeure visible) */
.site-footer{ background:#1E1B3A; }

/* ----------------------------------------------------------------------------
   5. FOCUS  (anneau codé en dur en teal → violet)
   ---------------------------------------------------------------------------- */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.review-form-wrap textarea:focus,
.filters-bar input:focus,
.filters-bar select:focus,
.filters-bar input[type="search"]:focus{
  border-color:#7451EB;
  box-shadow:0 0 0 3px rgba(116,81,235,.18);
}

/* ----------------------------------------------------------------------------
   6. PASTILLES / BADGES teintés teal → lilas
   ---------------------------------------------------------------------------- */
.level-intermediate{ background:#EDE9FB; color:#5B3AD6; }
.flash-info{ background:#EDE9FB; color:#4B31B8; }
.status-listed{ background:#EDE9FB; color:#5B3AD6; }
.tag{ background:#EDE9FB; color:#5B3AD6; }
.type-recorded{ background:#EDE9FB; color:#5B3AD6; }

/* ----------------------------------------------------------------------------
   7. DASHBOARD  (états actifs = violet, canvas légèrement lilas)
   ---------------------------------------------------------------------------- */
body.layout-dashboard{ background:#F5F3FB; }
.sidebar nav a.active{ color:var(--navy-dark); }
.period-tabs a.active{ background:#7451EB; border-color:#7451EB; }
.page-link.is-active{ background:#7451EB; border-color:#7451EB; }

/* ----------------------------------------------------------------------------
   8. DIVERS  (avatars, points de carrousel, countdown)
   ---------------------------------------------------------------------------- */
.user-avatar,
.topbar .user-avatar,
.avatar-preview{ background:#7451EB; }
.review-avatar{ background:#7451EB; color:#fff; }

.uni-dots button.active,
.cert-dots button.active{ background:#7451EB; }

.countdown{ background:#EDE9FB; border-color:#D9CEFB; }
.countdown-blocks .value{ color:var(--navy-dark); }