/* =====================================================================
   Tunis Bourse Academy — fiche « À propos » des cours
   (lms/templates/courseware/course_about.html)

   PORTÉE : ce fichier ne s'applique QU'AUX cours dont l'identifiant
   correspond à une série déclarée dans header.html (bloc
   TBA_COURSE_SERIES). Le LMS ajoute alors sur <body> :
       .tba-about-custom   -> la mise en page commune
       .tba-serie-esg      -> la palette de la série ESG
   Tous les autres cours gardent l'affichage actuel du thème
   (bandeau Banner1.jpg + encadré latéral sombre de TBA_COURSE_CSS).

   POURQUOI UN FICHIER, ET PAS STUDIO : le LMS retire les balises <style>
   du champ « Aperçu du cours » (clean_dangerous_html).

   POURQUOI CES SÉLECTEURS SONT SI LONGS : header.html injecte déjà des
   règles sur .course-info via un <style> ajouté en fin de <head> par JS.
   À spécificité égale, le dernier en date gagne — le préfixe
   « body.tba-about-custom » nous fait passer devant quelle que soit la
   position dans la cascade.

   Navigateurs : :has() (Chrome 105+, Safari 15.4+, Firefox 121+). Sans
   :has(), seuls les libellés traduits de l'encadré latéral sont perdus,
   la mise en page s'applique quand même.

   Pour AJOUTER UNE SÉRIE : déclarer la série dans header.html, puis
   dupliquer ici le bloc « PALETTE — SÉRIE ESG » avec la nouvelle classe.
   ===================================================================== */


/* =====================================================================
   1. PALETTE PAR DÉFAUT (vert / jaune TBA)
   Base héritée par toutes les séries ; chaque série peut la redéfinir.
   ===================================================================== */
body.tba-about-custom .course-info{
  --tba-fond-1:#004337; --tba-fond-2:#00604F;
  --tba-accent:#FFC745; --tba-accent-survol:#FFD66E; --tba-sur-accent:#00352B; --tba-accent-texte:#8A5A00;
  --tba-titre-police:"Ubuntu","Helvetica Neue",Arial,sans-serif; --tba-titre-graisse:700; --tba-titre-taille:42px;
  --tba-surtitre:"Tunis Bourse Academy";
  --tba-btn-inscription:"S\2019 inscrire au cours\00a0 \00a0 \2192 ";
  --tba-btn-acces:"Acc\00e9 der au cours\00a0 \00a0 \2192 ";
  --tba-encre:#1B2433; --tba-gris:#5A6474; --tba-filet:#E4DFD3; --tba-filet-clair:#ECE8DE;
}

/* =====================================================================
   2. PALETTE — SÉRIE ESG (marine / or, titres Georgia, libellés « module »)
   ===================================================================== */
body.tba-about-custom.tba-serie-esg .course-info{
  --tba-fond-1:#0A1F44; --tba-fond-2:#112C5E;
  --tba-accent:#C9A961; --tba-accent-survol:#D8BD7F; --tba-sur-accent:#0A1F44; --tba-accent-texte:#85672A;
  --tba-titre-police:Georgia,"Times New Roman",serif; --tba-titre-graisse:400; --tba-titre-taille:46px;
  --tba-surtitre:"Parcours ESG";
  --tba-btn-inscription:"S\2019 inscrire au module\00a0 \00a0 \2192 ";
  --tba-btn-acces:"Acc\00e9 der au module\00a0 \00a0 \2192 ";
}


/* =====================================================================
   3. BANDEAU
   ===================================================================== */
body.tba-about-custom .course-info header.course-profile{
  background-color:var(--tba-fond-1) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 240' preserveAspectRatio='none'%3E%3Cpath d='M0 206 L60 198 L120 202 L180 186 L240 192 L300 176 L360 184 L420 164 L480 172 L540 150 L600 160 L660 142 L720 150 L780 126 L840 136 L900 116 L960 124 L1020 98 L1080 110 L1140 88 L1200 96 L1260 70 L1320 80 L1380 58 L1440 48' fill='none' stroke='%23FFFFFF' stroke-opacity='.22' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"),
    radial-gradient(900px 420px at 88% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, rgba(255,255,255,0) 1px 72px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, rgba(255,255,255,0) 1px 72px),
    linear-gradient(135deg, var(--tba-fond-1) 0%, var(--tba-fond-2) 60%, var(--tba-fond-1) 100%) !important;
  background-size:100% 240px, auto, auto, auto, auto !important;
  background-position:left bottom, 0 0, 0 0, 0 0, 0 0 !important;
  background-repeat:no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  border:0 !important; box-shadow:none !important; height:auto !important; overflow:hidden !important;
  position:relative !important;
}
body.tba-about-custom .course-info header.course-profile .intro-inner-wrapper{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  margin:0 auto !important; max-width:1158px !important; min-width:0 !important; width:auto !important;
  padding:64px 24px 72px !important; box-sizing:border-box !important;
}
body.tba-about-custom .course-info header.course-profile .intro-inner-wrapper::after,
body.tba-about-custom .course-info header.course-profile .intro::after{display:none !important}
body.tba-about-custom .course-info header.course-profile .table{display:flex !important; flex-direction:row !important; align-items:center !important; gap:72px !important; width:auto !important}
body.tba-about-custom .course-info header.course-profile .intro{display:block !important; flex:1 1 auto !important; width:auto !important; padding:0 !important; float:none !important; order:1 !important}
body.tba-about-custom .course-info header.course-profile .media{display:block !important; flex:0 0 430px !important; width:430px !important; padding:0 !important; order:2 !important}
body.tba-about-custom .course-info header.course-profile .media .hero{border:0 !important; overflow:visible !important; height:auto !important; position:relative !important}
body.tba-about-custom .course-info header.course-profile .media .hero::before{content:""; position:absolute; top:16px; left:16px; right:-16px; bottom:-16px; border:1px solid var(--tba-accent); opacity:.55; border-radius:4px; z-index:0}
body.tba-about-custom .course-info header.course-profile .media .hero img{position:relative !important; z-index:1 !important; width:100% !important; height:auto !important; border-radius:4px !important; box-shadow:0 32px 64px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.08) !important}

body.tba-about-custom .course-info header.course-profile .heading-group{border:0 !important; box-shadow:none !important; margin:0 !important; padding:0 !important; width:auto !important}
body.tba-about-custom .course-info header.course-profile .heading-group p:first-child{font-size:0 !important; line-height:1 !important; margin:0 0 22px !important}
body.tba-about-custom .course-info header.course-profile .heading-group p:first-child small{display:none !important}
body.tba-about-custom .course-info header.course-profile .heading-group p:first-child::before{
  content:var(--tba-surtitre); display:inline-block; padding-left:42px;
  background:linear-gradient(var(--tba-accent), var(--tba-accent)) left center / 28px 2px no-repeat;
  font:700 13px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--tba-accent);
}
body.tba-about-custom .course-info header.course-profile .heading-group h1{
  display:block !important; margin:0 !important; color:#fff !important; text-shadow:none !important;
  font-family:var(--tba-titre-police) !important; font-weight:var(--tba-titre-graisse) !important; font-size:var(--tba-titre-taille) !important;
  line-height:1.12 !important; letter-spacing:-.01em !important;
}
body.tba-about-custom .course-info header.course-profile .heading-group br{display:none !important}
body.tba-about-custom .course-info header.course-profile .heading-group h1 ~ p{
  margin:22px 0 0 !important; max-width:600px !important; color:rgba(255,255,255,.82) !important; text-transform:none !important; letter-spacing:0 !important;
  font:400 18px/1.65 "Ubuntu","Helvetica Neue",Arial,sans-serif !important;
}
body.tba-about-custom .course-info header.course-profile .heading-group h1 ~ p:empty{display:none !important}


/* =====================================================================
   4. BOUTONS D'INSCRIPTION (tous les états)
   ===================================================================== */
body.tba-about-custom .course-info header.course-profile .main-cta{float:none !important; width:auto !important; margin:36px 0 0 !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; gap:14px !important}
body.tba-about-custom .course-info header.course-profile .main-cta::after{display:none !important}
body.tba-about-custom .course-info header.course-profile .main-cta a.register,
body.tba-about-custom .course-info header.course-profile .main-cta a strong{
  display:inline-flex !important; align-items:center !important; width:auto !important; float:none !important; margin:0 !important;
  background:var(--tba-accent) !important; background-image:none !important; color:var(--tba-sur-accent) !important;
  border:0 !important; border-radius:3px !important; box-shadow:0 14px 30px -14px rgba(0,0,0,.55) !important; text-shadow:none !important;
  padding:18px 30px !important; font-size:0 !important; text-decoration:none !important; cursor:pointer !important;
  transition:background-color .15s ease, transform .15s ease !important;
}
body.tba-about-custom .course-info header.course-profile .main-cta a.register::after{content:var(--tba-btn-inscription); font:700 16px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif; letter-spacing:.02em}
body.tba-about-custom .course-info header.course-profile .main-cta a strong::after{content:var(--tba-btn-acces); font:700 16px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif; letter-spacing:.02em}
body.tba-about-custom .course-info header.course-profile .main-cta a.register:hover,
body.tba-about-custom .course-info header.course-profile .main-cta a:hover strong{background:var(--tba-accent-survol) !important; background-image:none !important; transform:translateY(-1px)}
body.tba-about-custom .course-info header.course-profile .main-cta a:focus-visible{outline:2px solid #fff !important; outline-offset:4px}
body.tba-about-custom .course-info header.course-profile .main-cta a:not(.register){display:inline-flex !important; flex-wrap:wrap !important; align-items:center !important; gap:14px !important; text-decoration:none !important}
body.tba-about-custom .course-info header.course-profile .main-cta a strong{order:1}
/* « You are enrolled », « Enrollment is Closed », « Course is full » */
body.tba-about-custom .course-info header.course-profile .main-cta span.register{
  display:inline-flex !important; align-items:center !important; float:none !important; width:auto !important; margin:0 !important; order:2;
  background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.3) !important; border-radius:3px !important; color:#fff !important;
  padding:16px 20px !important; letter-spacing:.02em !important; font:600 14px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif !important;
}
/* Dans le lien vers le cours, ce badge signifie toujours « inscrit » */
body.tba-about-custom .course-info header.course-profile .main-cta a span.register{font-size:0 !important}
body.tba-about-custom .course-info header.course-profile .main-cta a span.register::before{content:"\2713 \00a0 \00a0 Inscription confirm\00e9 e"; font:600 14px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif; color:var(--tba-accent)}
body.tba-about-custom .course-info header.course-profile .main-cta #register_error{flex-basis:100%; border-radius:3px}


/* =====================================================================
   5. COLONNES
   ===================================================================== */
body.tba-about-custom .course-info .container{
  max-width:1158px !important; width:auto !important; box-sizing:border-box !important; margin:0 auto !important; padding:56px 24px 96px !important;
  display:flex !important; align-items:flex-start !important; gap:48px !important;
}
body.tba-about-custom .course-info .container::before, body.tba-about-custom .course-info .container::after{display:none !important}
body.tba-about-custom .course-info .details{float:none !important; width:auto !important; margin:0 !important; flex:1 1 0 !important; min-width:0 !important; display:flex !important; flex-direction:column !important}
body.tba-about-custom .course-info .details .inner-wrapper{order:1}
/* Lien « View About Page in studio » (équipe) : en fin de colonne, plus en flottant */
body.tba-about-custom .course-info .details .studio-view{order:2; float:none !important; margin-top:24px}
body.tba-about-custom .course-info .course-sidebar{float:none !important; width:340px !important; flex:0 0 340px !important; margin:0 !important; position:sticky !important; top:calc(var(--tba-nav-height, 49px) + 24px) !important}


/* =====================================================================
   6. ENCADRÉ LATÉRAL « EN BREF »
   ===================================================================== */
body.tba-about-custom .course-info .course-sidebar .course-summary{
  display:flex !important; flex-direction:column !important; background:#fff !important; color:var(--tba-encre) !important;
  border:1px solid var(--tba-filet) !important; border-top:3px solid var(--tba-accent) !important; border-radius:4px !important;
  box-shadow:0 24px 48px -28px rgba(10,31,68,.45) !important; padding:26px 28px 22px !important;
}
body.tba-about-custom .course-info .course-sidebar .course-summary::before{content:"En bref"; order:0; margin:0 0 8px; font-family:var(--tba-titre-police); font-weight:var(--tba-titre-graisse); font-size:22px; line-height:1.2; color:var(--tba-fond-1)}
body.tba-about-custom .course-info .course-sidebar .important-dates{order:1; margin:0 !important; padding:0 !important; border:0 !important}
body.tba-about-custom .course-info .course-sidebar .important-dates .important-dates-item{border:0 !important; border-bottom:1px solid var(--tba-filet-clair) !important; padding:14px 0 !important; color:var(--tba-encre) !important; gap:12px !important}
body.tba-about-custom .course-info .course-sidebar .important-dates .important-dates-item:last-child{border-bottom:0 !important}
body.tba-about-custom .course-info .course-sidebar .important-dates .important-dates-item .icon{color:var(--tba-accent-texte) !important; font-size:15px !important}
body.tba-about-custom .course-info .course-sidebar .important-dates .important-dates-item-title{color:var(--tba-gris) !important; font-size:14px !important}
body.tba-about-custom .course-info .course-sidebar .important-dates .important-dates-item-text{color:var(--tba-fond-1) !important; font-size:15px !important; font-weight:700 !important}
/* Libellés en français */
body.tba-about-custom .course-info .course-sidebar li:has(.course-number) .important-dates-item-title,
body.tba-about-custom .course-info .course-sidebar li:has(.effort) .important-dates-item-title,
body.tba-about-custom .course-info .course-sidebar li:has(.start-date) .important-dates-item-title,
body.tba-about-custom .course-info .course-sidebar li:has(.final-date) .important-dates-item-title,
body.tba-about-custom .course-info .course-sidebar li.prerequisite-course .important-dates-item-title{font-size:0 !important}
body.tba-about-custom .course-info .course-sidebar li:has(.course-number) .important-dates-item-title::after{content:"R\00e9 f\00e9 rence"; font-size:14px}
body.tba-about-custom .course-info .course-sidebar li:has(.effort) .important-dates-item-title::after{content:"Dur\00e9 e estim\00e9 e"; font-size:14px}
body.tba-about-custom .course-info .course-sidebar li:has(.start-date) .important-dates-item-title::after{content:"D\00e9 but"; font-size:14px}
body.tba-about-custom .course-info .course-sidebar li:has(.final-date) .important-dates-item-title::after{content:"Fin"; font-size:14px}
body.tba-about-custom .course-info .course-sidebar li.prerequisite-course .important-dates-item-title::after{content:"Pr\00e9 requis"; font-size:14px}
/* Prérequis : sur trois lignes (libellé, cours, consigne) — corrige le débordement */
body.tba-about-custom .course-info .course-sidebar .important-dates li.prerequisite-course.important-dates-item{display:grid !important; grid-template-columns:18px 1fr; column-gap:12px; row-gap:6px; align-items:center}
body.tba-about-custom .course-info .course-sidebar .important-dates li.prerequisite-course .important-dates-item-text,
body.tba-about-custom .course-info .course-sidebar .important-dates li.prerequisite-course .tip{grid-column:2; text-align:left !important; margin:0 !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; max-width:none !important; width:auto !important; position:static !important}
body.tba-about-custom .course-info .course-sidebar li.prerequisite-course .tip{font-size:0 !important; color:var(--tba-gris) !important}
body.tba-about-custom .course-info .course-sidebar li.prerequisite-course .tip::before{content:"\00c0  valider avant de commencer."; font-size:13px; line-height:1.5}
body.tba-about-custom .course-info .course-sidebar li.prerequisite-course .tip a{display:none !important}
body.tba-about-custom .course-info .course-sidebar .pre-requisite a{color:var(--tba-fond-1) !important; text-decoration:none !important; border-bottom:1px solid var(--tba-accent); line-height:1.5}

/* Noms lisibles des cours prérequis — propres à la série ESG.
   Pour une autre série : dupliquer ce bloc avec sa classe et ses href.

   NUMÉROTATION : sur la prod, ESG0N = Module N (vérifié le 2026-10-02 sur
   les pages « about » et les images des cours) :
       ESG01 = Module 1 « Un levier stratégique »
       ESG02 = Module 2 « Référentiels nationaux et internationaux »
       ESG03 = Module 3 « Construction d'un reporting »
       ESG04 = Module 4 « La démarche de décarbonation »
       ESG05 = Module 5 « Reporting & marchés financiers » (jamais prérequis)
   L'ancienne table (ESG04 = Module 1, ESG01 = Module 4) venait d'un import
   de la préprod et affichait de mauvais libellés sur la prod. */
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG01"],
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG02"],
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG03"],
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG04"]{font-size:0 !important}
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG01"]::after{content:"Module 1\00a0 \00b7  Un levier strat\00e9 gique"; font-size:15px}
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG02"]::after{content:"Module 2\00a0 \00b7  R\00e9 f\00e9 rentiels nationaux et internationaux"; font-size:15px}
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG03"]::after{content:"Module 3\00a0 \00b7  Construction d\2019 un reporting"; font-size:15px}
body.tba-about-custom.tba-serie-esg .course-info .course-sidebar .pre-requisite a[href*="ESG04"]::after{content:"Module 4\00a0 \00b7  La d\00e9 marche de d\00e9 carbonation"; font-size:15px}

/* Partage : « Twitter » retiré (le compte de la plateforme n'est pas configuré) */
body.tba-about-custom .course-info .course-sidebar .course-summary header{order:2; margin:10px 0 0 !important; padding:16px 0 0 !important; border-top:1px solid var(--tba-filet-clair) !important}
body.tba-about-custom .course-info .course-sidebar .social-sharing{justify-content:flex-start !important; gap:10px !important; padding:0 !important}
body.tba-about-custom .course-info .course-sidebar .social-sharing::before{content:"Partager"; margin-right:auto; font:700 12px/1 "Ubuntu","Helvetica Neue",Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--tba-gris)}
body.tba-about-custom .course-info .course-sidebar .social-sharing .share{display:inline-flex !important; align-items:center !important; justify-content:center !important; width:38px !important; height:38px !important; border:1px solid var(--tba-filet) !important; border-radius:50% !important; color:var(--tba-fond-1) !important; font-size:15px !important}
body.tba-about-custom .course-info .course-sidebar .social-sharing .share .icon{font-size:15px !important}
body.tba-about-custom .course-info .course-sidebar .social-sharing .share:hover{background:var(--tba-fond-1) !important; border-color:var(--tba-fond-1) !important; color:var(--tba-accent) !important; transform:none !important}
body.tba-about-custom .course-info .course-sidebar .social-sharing .share[href*="twitter.com"]{display:none !important}


/* =====================================================================
   7. CONTENU RÉDIGÉ DANS STUDIO (classes .tba-cta / .tba-q)
   ===================================================================== */
/* Déjà inscrit ou inscriptions fermées : l'appel final « S'inscrire » n'a pas lieu d'être */
body.tba-about-custom:has(.main-cta span.register) .course-info .tba-cta{display:none !important}
body.tba-about-custom .course-info .tba-q summary::marker{color:var(--tba-accent-texte)}


/* =====================================================================
   8. TABLETTE ET MOBILE
   ===================================================================== */
@media (max-width: 960px){
  body.tba-about-custom .course-info header.course-profile .intro-inner-wrapper{padding:40px 16px 56px !important}
  body.tba-about-custom .course-info header.course-profile .table{flex-direction:column !important; align-items:stretch !important; gap:40px !important}
  body.tba-about-custom .course-info header.course-profile .media{flex:none !important; width:auto !important; max-width:400px !important}
  body.tba-about-custom .course-info header.course-profile .media .hero::before{display:none}
  body.tba-about-custom .course-info header.course-profile .heading-group h1{font-size:32px !important}
  body.tba-about-custom .course-info header.course-profile .heading-group h1 ~ p{font-size:16px !important}
  body.tba-about-custom .course-info .container{flex-direction:column !important; align-items:stretch !important; padding:40px 16px 64px !important; gap:40px !important}
  body.tba-about-custom .course-info .course-sidebar{position:static !important; width:auto !important; flex:none !important}
}