/* ============================================================
   SOLEM Studio — Thème MediaCMS
   Surcharge les VRAIES variables CSS de MediaCMS
   (définies dans frontend/src/static/css/config/).
   => Applique tout le reskin COULEUR SANS REBUILD.
   Charger via templates/root.html (voir guide).
   Ajuste les hex si tu as la charte exacte.
   ============================================================ */

body {
  /* ---- Palette SOLEM (estimée depuis la maquette) ---- */
  --solem-navy:       #0A2E52;
  --solem-blue:       #1565C0;
  --solem-blue-dark:  #0F4C97;
  --solem-blue-pale:  #E8F0F8;
  --solem-bg:         #F4F5F7;
  --solem-surface:    #FFFFFF;
  --solem-text:       #14263B;
  --solem-muted:      #6B7787;

  /* ============================================================
     Variables globales MediaCMS (index.scss)
     La couleur de marque par défaut est #009933 (vert). On la
     remplace par le bleu SOLEM : liens, accents, item actif...
     ============================================================ */
  --default-theme-color: var(--solem-blue);
  --default-brand-color:  var(--solem-blue);
  --theme-color:          var(--solem-blue);
  --brand-color:          var(--solem-blue);
  --links-color:          var(--solem-blue);
  --default-logo-height:  34px;

  /* ---- Fond général + en-tête ---- */
  --body-bg-color:   var(--solem-bg);
  --body-text-color: var(--solem-text);
  --header-bg-color: var(--solem-surface);

  /* ---- Barre latérale (blanche dans la maquette) ---- */
  --sidebar-bg-color:          var(--solem-surface);
  --sidebar-nav-border-color:  #ECEEF1;
  --sidebar-nav-item-text-color: var(--solem-text);
  --sidebar-nav-item-icon-color: var(--solem-muted);

  /* Item de menu actif = chip bleu pâle ; survol léger */
  --nav-menu-active-item-bg-color: var(--solem-blue-pale);
  --nav-menu-item-hover-bg-color:  rgba(21, 101, 192, 0.06);
  --in-popup-nav-menu-item-hover-bg-color: var(--solem-blue-pale);

  /* ---- Champ de recherche ---- */
  --search-field-input-bg-color:     var(--solem-bg);
  --search-field-input-border-color: #D8DCE1;
  --search-field-input-text-color:   var(--solem-text);
  --search-field-submit-bg-color:    var(--solem-bg);

  /* ---- Cartes média (vidéos, shorts, playlists) ---- */
  --item-bg-color:         var(--solem-surface);
  --item-title-text-color: var(--solem-text);
  --item-meta-text-color:  var(--solem-muted);

  /* ---- Divers ---- */
  --hr-color: #E7E9EC;
}

/* ============================================================
   Ajustements qui ne sont pas de simples variables
   (formes, dégradés, hero) — surcharges de classes.
   ============================================================ */

/* Police : le solem-theme applique Inter. Ajoute le <link>
   Google Fonts dans root.html (voir guide) ou remplace-la. */
body,
input, button, textarea, select {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Item de menu actif : texte bleu + coins arrondis (le bg vient
   déjà de --nav-menu-active-item-bg-color) */
.nav-menu li.link-item a {
  border-radius: 10px;
}
.nav-menu li.link-item.active > a,
.nav-menu li.link-item a.active {
  color: var(--solem-blue);
}

/* Recherche bien arrondie (pilule) comme la maquette */
.search-field input[type="text"],
.search-field input[type="search"] {
  border-radius: 999px !important;
}

/* Cartes catégories : dégradé marine -> bleu.
   NB : cible les items de la page Catégories. Si le rendu ne
   prend pas, c'est le composant React (rebuild) — voir guide. */
.categories-page .item .item-thumb,
.category-item .item-thumb {
  background-image: linear-gradient(160deg, var(--solem-navy) 0%, var(--solem-blue) 100%) !important;
}

/* ============================================================
   Bandeau hero : géré ENTIÈREMENT par solem-custom.js
   (styles + icônes SVG inline, autonome). Rien à styler ici.
   ============================================================ */