/* --- Reprise des variables de style.css ------------------------------------
   Le levier principal : on redefinit les jetons que style.css utilise partout,
   plutot que de poursuivre chaque regle une par une.                        */

:root {
  --primary:            #8c491a;  /* accent-700 */
  --primary-dark:       #643312;  /* accent-800 */
  --primary-light:      #b2622d;  /* accent-600 */
  --primary-lighter:    #ffc6a5;  /* accent-300, garde les degrades clairs */
  --secondary:          #728157;  /* accent-2-600 */
  --secondary-dark:     #56633f;

  --accent-1:           #8d443c;
  --accent-2:           #8a6216;
  --accent-3:           #56633f;
  --accent-4:           #3b6759;

  --matiere-management:       #8a6216;
  --matiere-economie:         #8c491a;
  --matiere-droit:            #8d443c;
  --matiere-sciences-gestion: #56633f;
  --matiere-other:            #3b6759;

  --success:       #56633f;  --success-light: #e1eecc;
  --warning:       #8a6216;  --warning-light: #f7ecd7;
  --error:         #9a2c1e;  --error-light:   #f8e2dd;
  --info:          #3b6759;  --info-light:    #e3eae4;

  --white:      #ffffff;
  --off-white:  #f9f4ed;
  --gray-50:    #f9f4ed;
  --gray-100:   #eee7db;
  --gray-200:   #dcd3c4;
  --gray-300:   #c0b6a5;
  --gray-400:   #a19786;
  --gray-500:   #82796a;
  --gray-600:   #645c50;
  --gray-700:   #474238;
  --gray-800:   #2e2b25;
  --gray-900:   #201e1d;

  --text-primary:   #201e1d;
  --text-secondary: #645c50;
  --text-tertiary:  #82796a;

  --bg-primary:   #f9f4ed;
  --bg-secondary: #eee7db;
  --bg-tertiary:  #dcd3c4;

  --shadow-xs: 0 1px 2px color-mix(in srgb, #2e2b25 10%, transparent);
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  --shadow-glow: none;
  --shadow-glow-accent: none;

  --font-family-base:    "Figtree", system-ui, sans-serif;
  --font-family-display: "Caprasimo", Georgia, serif;
}

/* ==========================================================================
   EduCarette - passage des pages historiques au design system Organic.
   Chargee APRES style.css, elle redefinit l'apparence sans toucher au balisage
   ni au moteur d'exercices. Les selecteurs sont prefixes par `body` pour
   l'emporter sur les regles a classe unique de style.css.
   Requiert organic-ds.css (les jetons) charge avant.
   ========================================================================== */

/* --- Base ---------------------------------------------------------------- */

body {
  background: var(--color-neutral-100);
  color: var(--color-text);
  font-family: var(--font-body);
}
body h1, body h2, body h3, body h4 { font-family: var(--font-heading); font-weight: 400; }
body a { color: var(--color-accent-700); }
body a:hover { color: var(--color-accent-600); }
body :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* --- En-tete --------------------------------------------------------------- */

body > header, body header[role="banner"] {
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-300);
  backdrop-filter: none;
  box-shadow: none;
}
body .logo, body .logo span { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }
body .nav-link { font-family: var(--font-body); font-weight: 500; color: var(--color-neutral-700); }
body .nav-link:hover, body .nav-link.active { color: var(--color-text); font-weight: 700; }
body .nav-link.active::after, body .nav-link::after { background: var(--color-accent); }
body .auth-btn { border-radius: 999px; font-family: var(--font-body); font-weight: 600; min-height: 44px; }
body .auth-btn.login { color: var(--color-neutral-700); background: none; }
body .auth-btn.register { background: var(--color-accent-700); color: var(--color-accent-100); border: 0; }
body .auth-btn.register:hover { background: var(--color-accent-600); color: var(--color-accent-100); }
body .skip-to-content { background: var(--color-accent-700); color: #fff; }

/* --- Bandeau de chapitre ------------------------------------------------------ */

body .chapitre-hero {
  position: relative; overflow: hidden;
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-300);
  color: var(--color-text);
}
body .chapitre-hero::before, body .chapitre-hero::after {
  content: ""; position: absolute; border-radius: 999px; z-index: 0;
}
body .chapitre-hero::before { top: -150px; right: -80px; width: 330px; height: 330px; background: var(--color-accent-2-200); }
body .chapitre-hero::after { top: 110px; right: 230px; width: 104px; height: 104px; background: var(--color-accent-200); }
body .chapitre-hero > * { position: relative; z-index: 1; }

body .chapitre-title {
  font-family: var(--font-heading); font-weight: 400;
  color: var(--color-text); letter-spacing: -0.5px; line-height: 1.1;
}
body .chapitre-theme-label {
  font-family: var(--font-body); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-2-700);
}
body .chapitre-hero p, body .chapitre-description { color: var(--color-neutral-700); }
body .chapitre-breadcrumb, body .chapitre-breadcrumb-link, body .chapitre-breadcrumb-sep { color: var(--color-neutral-700); }
body .chapitre-breadcrumb-link:hover { color: var(--color-accent-700); }
body .chapitre-meta-item { color: var(--color-neutral-700); background: none; }

/* --- Onglets ------------------------------------------------------------------- */

body .chapitre-tabs-bar {
  background: var(--color-neutral-100);
  border-bottom: 1px solid var(--color-neutral-300);
  box-shadow: none;
}
body .chapitre-tab {
  font-family: var(--font-body); font-weight: 500; color: var(--color-neutral-700);
  border-bottom: 2.5px solid transparent; background: none; min-height: 54px;
}
body .chapitre-tab:hover { color: var(--color-text); }
body .chapitre-tab.active, body .chapitre-tab[aria-selected="true"] {
  color: var(--color-text); font-weight: 700; border-bottom-color: var(--color-accent);
}
body .chapitre-tab-badge {
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
  border-radius: 999px; font-weight: 700;
}

/* --- Corps du cours ------------------------------------------------------------- */

body .cours-content { font-size: 17px; line-height: 1.72; color: var(--color-text); }
body .cours-bloc {
  background: transparent; border: 0; box-shadow: none;
  padding: 0; margin: 0 0 34px;
}
body .cours-h1 {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(27px, 4vw, 38px);
  line-height: 1.12; color: var(--color-text); margin: 0 0 20px;
}
body .cours-h2 {
  font-family: var(--font-heading); font-weight: 400; font-size: clamp(22px, 3vw, 29px);
  line-height: 1.2; color: var(--color-accent-700); margin: 38px 0 16px;
  border: 0; padding: 0;
}
body .cours-h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-700);
  margin: 28px 0 12px;
}
body .cours-p { margin: 0 0 1.05em; color: var(--color-text); }
body .cours-list { padding-left: 20px; }
body .cours-list li { margin-bottom: 8px; line-height: 1.62; }
body .cours-sep { border: 0; border-top: 1px solid var(--color-neutral-300); margin: 32px 0; }
body .cours-content strong { font-weight: 700; color: var(--color-text); }

/* --- Encadres --------------------------------------------------------------------- */

body .callout {
  border-radius: var(--radius-md);
  border-left: 0;
  padding: 20px 24px;
  margin: 22px 0;
  box-shadow: none;
}
body .callout p:last-child { margin-bottom: 0; }
body .callout-label {
  display: inline-block; margin-bottom: 10px; padding: 5px 13px;
  border-radius: 999px; font-family: var(--font-body); font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

body .callout-default   { background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300); color: var(--color-text); }
body .callout-def       { background: var(--color-accent-2-100); border: 1px solid var(--color-accent-2-300); color: var(--color-accent-2-900); }
body .callout-def .callout-label { background: var(--color-accent-2-700); color: var(--color-accent-2-100); }
body .callout-exemple   { background: var(--color-accent-2-100); border: 1px dashed var(--color-accent-2-400); color: var(--color-accent-2-900); }
body .callout-exemple .callout-label { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
body .callout-methode   { background: var(--color-accent-100); border: 1px solid var(--color-accent-300); color: var(--color-accent-900); }
body .callout-methode .callout-label { background: var(--color-accent-700); color: var(--color-accent-100); }
body .callout-attention { background: var(--color-accent-100); border: 1.5px solid var(--color-accent-400); color: var(--color-accent-900); }
body .callout-attention .callout-label { background: var(--color-accent-800); color: var(--color-accent-100); }
body .callout-retenir   { background: var(--color-accent-100); border: 1px solid var(--color-accent-300); color: var(--color-accent-900); }
body .callout-retenir .callout-label { background: var(--color-accent-800); color: var(--color-accent-100); }

/* --- Tableaux ---------------------------------------------------------------------- */

body .cours-table-wrap {
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
  background: var(--color-neutral-100); overflow: hidden; margin: 24px 0;
}
body .cours-table { border-collapse: collapse; width: 100%; }
body .cours-table th {
  background: var(--color-neutral-200); color: var(--color-neutral-700);
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; text-align: left;
  padding: 12px 18px; border: 0;
}
body .cours-table td {
  padding: 13px 18px; font-size: 15px; color: var(--color-neutral-800);
  border: 0; border-top: 1px solid var(--color-neutral-200); vertical-align: top;
}
body .cours-table tbody tr:nth-child(even) { background: transparent; }
body .cours-table td strong { color: var(--color-text); }

/* --- Graphiques ---------------------------------------------------------------------- */

body .chart-wrap {
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
  background: var(--color-neutral-100); padding: 20px 22px; margin: 24px 0;
}
body .chart-title {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: var(--color-text); margin: 0 0 14px;
}
body .chart-legend { font-size: 12.5px; color: var(--color-neutral-700); }

/* --- Pied de page ---------------------------------------------------------------------- */

body .footer {
  background: var(--color-neutral-100); color: var(--color-neutral-700);
  border-top: 1px solid var(--color-neutral-300);
}
body .footer h3, body .footer-section h3 {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700);
}
body .footer a { color: var(--color-neutral-700); }
body .footer a:hover { color: var(--color-accent-700); }
body .footer-bottom { border-top: 1px solid var(--color-neutral-300); color: var(--color-neutral-600); }

/* --- Pages de matiere ---------------------------------------------------------------- */

body .matiere-hero, body .subject-hero { background: var(--color-neutral-100); color: var(--color-text); }
body .matiere-hero h1, body .subject-hero h1 { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }
body .module-card, body .lecon-card, body .chapitre-card, body .card {
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md); box-shadow: none;
}
body .module-card:hover, body .lecon-card:hover, body .chapitre-card:hover, body .card:hover {
  border-color: var(--color-accent-300); box-shadow: var(--shadow-sm);
}
body .module-card h2, body .module-card h3, body .lecon-card h3, body .chapitre-card h3 {
  font-family: var(--font-heading); font-weight: 400; color: var(--color-text);
}
body .btn, body .btn-primary {
  border-radius: 999px; font-family: var(--font-body); font-weight: 600; min-height: 44px;
}
body .btn-primary { background: var(--color-accent-700); color: var(--color-accent-100); border: 0; }
body .btn-primary:hover { background: var(--color-accent-600); color: var(--color-accent-100); }

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* --- Corrections ciblees ---------------------------------------------------- */

/* Le fil d'Ariane etait blanc sur l'ancien bandeau violet. */
body .chapitre-breadcrumb-link { color: var(--color-neutral-700); }
body .chapitre-breadcrumb-link:hover { color: var(--color-accent-700); }
body .chapitre-breadcrumb-sep { color: var(--color-neutral-500); opacity: 1; }
body .chapitre-breadcrumb-current { color: var(--color-text); font-weight: 700; }
body .chapitre-theme-label { color: var(--color-accent-2-700); }
body .chapitre-hero, body .chapitre-hero * { color: inherit; }
body .chapitre-hero .chapitre-title { color: var(--color-text); }
body .chapitre-hero .chapitre-meta-item { color: var(--color-neutral-700); }

/* Le titre de cours portait un soulignement bleu. */
body .cours-h1 { border-bottom: 1px solid var(--color-neutral-300); padding-bottom: 14px; }
body .cours-list li::marker { color: var(--color-accent-500); }

/* Le bouton de connexion restait indigo. */
body .auth-btn.login { border: 1.5px solid var(--color-neutral-400); color: var(--color-neutral-700); background: transparent; }
body .auth-btn.login:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); color: var(--color-accent-100); }

/* --- Grand bandeau des pages de matiere et d'accueil -------------------------
   style.css en faisait un degrade plein ecran, centre. Organic veut un fond
   creme, un alignement a gauche et des formes rondes en decor.              */

body .hero {
  background: var(--color-neutral-100);
  min-height: 0;
  padding: 54px 0 62px;
  justify-content: flex-start;
  border-bottom: 1px solid var(--color-neutral-300);
}
body .hero::before {
  content: ""; position: absolute; inset: auto;
  top: -150px; right: -90px; width: 360px; height: 360px;
  border-radius: 999px; background: var(--color-accent-2-200);
  transform: none; filter: none; opacity: 1;
}
body .hero::after {
  content: ""; position: absolute;
  top: 140px; right: 250px; width: 110px; height: 110px;
  border-radius: 999px; background: var(--color-accent-200);
}
body .hero > *, body .hero-content { position: relative; z-index: 1; }
body .hero-content {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px;
  text-align: left; box-sizing: border-box;
}
body .hero-content > * { max-width: 42em; margin-left: 0; margin-right: 0; }
body .hero-content h1, body .hero h1 {
  font-family: var(--font-heading); font-weight: 400; color: var(--color-text);
  text-align: left; line-height: 1.08;
}
body .hero-subtitle, body .hero .subtitle { color: var(--color-neutral-700); text-align: left; }
body .hero .hero-cta { justify-content: flex-start; }
body .hero .chapitre-theme-label { color: var(--color-accent-2-700); }

/* Cartes de theme et de chapitre des pages de matiere */
body .module-header { background: var(--color-neutral-200); border-bottom: 1px solid var(--color-neutral-300); }
body .module-title { font-family: var(--font-heading); font-weight: 400; color: var(--color-accent-700); }
body .badge-available { background: var(--color-accent-2-200); color: var(--color-accent-2-800); border-radius: 999px; font-weight: 700; }
body .lecon-item { border-bottom: 1px solid var(--color-neutral-200); }
body .lecon-item:hover { background: var(--color-neutral-200); }
body .lecon-titre { font-family: var(--font-body); font-weight: 700; color: var(--color-text); }
body .lecon-meta { color: var(--color-neutral-700); }
body .lecon-arrow { color: var(--color-accent-600); }
body .btn-secondary { border-radius: 999px; border: 1.5px solid var(--color-neutral-400); color: var(--color-text); background: transparent; }
body .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-text); background: transparent; }
body section.with-pattern { background-image: none; background: var(--color-neutral-100); }

/* --- Cartes matiere de la page Matieres ---------------------------------------
   style.css y posait des lavis en degrade indigo et rose codes en dur, et des
   pastilles d'icone en degrade. Organic veut des aplats sobres.             */

body .matiere-card {
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
  border-top: 4px solid var(--color-accent-500);
  border-radius: var(--radius-md);
  box-shadow: none;
}
body .matiere-card:hover { box-shadow: var(--shadow-sm); transform: none; border-color: var(--color-accent-300); border-top-color: var(--color-accent-500); }
body .matiere-card::before, body .matiere-card:hover::before,
body .matiere-card.economie::before, body .matiere-card.droit::before,
body .matiere-card.management::before, body .matiere-card.sciences-gestion::before,
body .matiere-card.gestion-finance::before, body .matiere-card.cejm::before { display: none; content: none; }

body .matiere-card.economie { border-top-color: #8c491a; }
body .matiere-card.droit { border-top-color: #8d443c; }
body .matiere-card.management { border-top-color: #8a6216; }
body .matiere-card.sciences-gestion { border-top-color: #56633f; }
body .matiere-card.gestion-finance { border-top-color: #3b6759; }
body .matiere-card.cejm { border-top-color: #3d5a73; }

body .matiere-icon { background: var(--color-accent-200); color: var(--color-accent-800); border-radius: var(--radius-md); }
body .matiere-card.economie .matiere-icon { background: #ffe1d0; color: #8c491a; }
body .matiere-card.droit .matiere-icon { background: #f6e4e0; color: #8d443c; }
body .matiere-card.management .matiere-icon { background: #f7ecd7; color: #8a6216; }
body .matiere-card.sciences-gestion .matiere-icon { background: #e1eecc; color: #56633f; }
body .matiere-card.gestion-finance .matiere-icon { background: #e3eae4; color: #3b6759; }
body .matiere-card.cejm .matiere-icon { background: #dfe8ee; color: #3d5a73; }
body .matiere-icon svg { stroke: currentColor; }

body .matiere-title { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }
body .matiere-description { color: var(--color-neutral-700); }
body .matiere-stats b, body .matiere-stats strong { color: var(--color-accent-700); }
body .matiere-link, body .matiere-cta { color: var(--color-accent-700); font-weight: 700; }

/* Cartes et sections generiques restantes */
body .card, body .stat-card, body .feature-card, body .info-card {
  background: var(--color-neutral-100); border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md); box-shadow: none;
}
body .section-title, body .section-header h2 { font-family: var(--font-heading); font-weight: 400; color: var(--color-text); }
body .section-header p, body .section-subtitle { color: var(--color-neutral-700); }

/* --- Formes decoratives sur telephone ------------------------------------------
   Reduites pour qu'elles ne passent jamais derriere le titre ni le chapo.      */

@media (max-width: 760px) {
  body .chapitre-hero::before { width: 190px; height: 190px; top: -100px; right: -70px; }
  body .chapitre-hero::after { display: none; }
  body .hero::before { width: 200px; height: 200px; top: -104px; right: -76px; }
  body .hero::after { display: none; }
  body .hero { padding: 40px 0 46px; }
}

/* Halos violets codes en dur dans style.css sous les boutons principaux. */
body .btn-primary, body .btn-primary:hover,
body .auth-btn.register, body .auth-btn.register:hover { box-shadow: none; }

/* Logo Organic : l'ancienne feuille recolorait les tracés du logo en violet. */
body .logo svg path { fill: var(--color-accent-2-300, #ccdbb2); }
body .logo svg text { fill: currentColor; }
body .logo svg line { stroke: currentColor; }