/* ─────────────────────────────────────────────────────────────────────────────
   Habillage ISM Online des MICRO-FRONTAUX (learning, authn, gradebook, ora-grading…).
   Servi par le LMS sous le même hôte, chargé par l'index.html de chaque MFE.

   ⭐ On agit sur les VARIABLES DE BASE de Paragon, mesurées dans la page réelle :
        --pgn-color-brand-base   : #9d0054  (le bouton « Reprendre »)
        --pgn-color-primary-base : #0a3055  (onglets, titres)
        --pgn-color-info-base    : le bleu des liens
      Toutes les autres variables en dérivent : les redéfinir ici suffit, plutôt que de
      poursuivre chaque composant à la main.
   ⛔ L'orange vif (#F09201) ne sert JAMAIS de fond à du texte blanc : 2,3:1, illisible.
      Les fonds pleins prennent #A85F00 (≈ 5,3:1 avec le blanc), l'orange reste un accent.
   ⚠️ Une reconstruction de l'image « mfe » remet les index.html d'origine : rejouer
      scripts/isf-treso/marque/deployer_marque.sh.
   ───────────────────────────────────────────────────────────────────────────── */
:root, html {
  --ism-or:#F09201; --ism-or-fonce:#A85F00; --ism-brun:#3A2313;

  --pgn-color-brand-base:#A85F00 !important;
  --pgn-color-brand-500:#A85F00 !important;
  --pgn-color-brand-300:#F09201 !important;
  --pgn-color-brand-700:#7C4600 !important;

  --pgn-color-primary-base:#3A2313 !important;
  --pgn-color-primary-500:#3A2313 !important;
  --pgn-color-primary-700:#241408 !important;
  --pgn-color-primary-300:#6B4526 !important;
  /* ⛔ La page de CONNEXION peint son grand panneau avec « primary-400 » : sans ces
     nuances, elle reste BLEUE — c'est pourtant la première page que voit le client. */
  --pgn-color-primary-100:#F6EFE9 !important;
  --pgn-color-primary-200:#8A6244 !important;
  --pgn-color-primary-400:#4A2E1A !important;
  --pgn-color-primary-600:#2E1B0E !important;

  --pgn-color-info-base:#A85F00 !important;
  --pgn-color-info-500:#A85F00 !important;
  --pgn-color-link-base:#A85F00 !important;
  --pgn-color-accent-a:#F09201 !important;
}

/* Les composants qui portent la couleur en dur plutôt qu'en variable. */
a:not(.btn), .pgn__hyperlink { color: var(--ism-or-fonce) !important; }
a:not(.btn):hover, .pgn__hyperlink:hover { color: var(--ism-brun) !important; }
.btn-brand, .btn-primary { background-color: var(--ism-or-fonce) !important;
  border-color: var(--ism-or-fonce) !important; color:#fff !important; }
.btn-brand:hover, .btn-primary:hover { background-color: var(--ism-brun) !important;
  border-color: var(--ism-brun) !important; }
.btn-outline-primary, .btn-outline-brand { color: var(--ism-or-fonce) !important;
  border-color: var(--ism-or-fonce) !important; }
.nav-underline-tabs .nav-link.active, .nav-tabs .nav-link.active {
  color: var(--ism-brun) !important; border-bottom-color: var(--ism-or) !important; }


/* ── page de connexion (micro-frontal « authn ») ────────────────────────────── */
/* ⛔ Le panneau de gauche et son biseau ne suivent aucune variable : ils portent la
   classe utilitaire « bg-primary-400 » et un SVG dont le remplissage est figé. */
.bg-primary-400 { background-color: var(--ism-brun) !important; }
.large-screen-svg-primary, .large-screen-svg-primary path,
svg.large-screen-svg-primary * { fill: var(--ism-brun) !important; }

/* ⚠️ Le logo n'y faisait que 15 px de haut : le gabarit contraint la largeur, or notre
   mot-marque est bien plus large que le carré d'origine. */
header .logo, .logo.position-absolute { height:38px !important; width:auto !important;
  max-width:none !important; top:18px; left:22px; }

/* ⛔ Sur ce panneau brun, le logo brun est ILLISIBLE — son mot-marque disparaît, comme
   il avait disparu du pied de page. On lui substitue la variante claire.
   ⚠️ Le sélecteur porte « position-absolute », qui n'existe QUE sur la page de connexion :
   le logo de l'espace d'apprentissage, lui, est sur fond blanc et ne doit pas changer. */
.logo.position-absolute { content: url("/static/images/logo-white.png") !important; }