:root{
  /* Palette JC Mamiah (d'après le logo) */
  --cfaa-vert:#060502;            /* noir profond (sidebar) */
  --cfaa-vert-fonce:#241e13;      /* brun/noir (gradient) */
  --cfaa-ocre:#e9af1d;            /* or (accent principal) */
  --cfaa-bleu:#7d9e64;            /* olive (accent secondaire) */

  --fond:#f4f6f8;
  --texte:#1f2937;
  --muted:#6b7280;
  --carte:#ffffff;
  --bord:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.08);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--texte);
  background:var(--fond);
  line-height:1.55;
}

.layout{display:flex; min-height:100vh;}
/* Sidebar dockée */
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  width:300px;
  background:linear-gradient(180deg,var(--cfaa-vert),var(--cfaa-vert-fonce));
  color:#fff;
  padding:16px;
  overflow:auto;
  z-index:1000;
  box-shadow:var(--shadow);
}
.sidebar .brand{
  display:flex; gap:12px; align-items:center; padding:8px 6px 14px 6px; border-bottom:1px solid rgba(255,255,255,.18);
}
.sidebar .brand img{width:44px; height:44px; border-radius:10px; background:#fff; object-fit:contain; padding:5px;}
.sidebar .brand .t{display:flex; flex-direction:column}
.sidebar .brand .t strong{font-size:14px; letter-spacing:.3px}
.sidebar .brand .t span{font-size:12px; opacity:.9}

.sidebar .trainer{display:flex; gap:10px; align-items:center; padding:14px 6px 10px 6px;}
.sidebar .trainer img{width:46px; height:46px; border-radius:999px; object-fit:cover; border:2px solid rgba(255,255,255,.45);}
.sidebar .trainer .meta{font-size:12px; opacity:.95}
.sidebar .trainer .meta strong{display:block; font-size:13px; opacity:1}

.sidebar nav{margin-top:6px; display:flex; flex-direction:column; gap:6px;}
.sidebar nav a{
  text-decoration:none; color:#fff;
  padding:10px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  transition:.15s ease;
  font-size:13px;
}
.sidebar nav a:hover{background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.22)}
.sidebar nav a.active{
  background:rgba(255,255,255,.24);
  border-color:rgba(255,255,255,.35);
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.sidebar .side-actions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  font-size:13px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.12);
  color:#fff;
}
.btn.secondary{background:rgba(255,255,255,.14)}
.btn:hover{filter:brightness(1.05)}

/* Contenu principal décallé pour ne pas passer sous le menu */
.main{
  margin-left:300px;
  width:calc(100% - 300px);
  padding:22px 22px 60px 22px;
}

.header{
  position:sticky;
  top:0;
  z-index:900;
  background:rgba(244,246,248,.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--bord);
  padding:12px 0;
  margin-bottom:14px;
}
.header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.header h1{margin:0; font-size:20px; letter-spacing:.2px}
.header .sub{color:var(--muted); font-size:13px}

/* barre de progression */
.progress{
  width:100%;
  height:10px;
  background:#e6edf2;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #d7e1ea;
}
.progress > div{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--cfaa-bleu),var(--cfaa-ocre));
}

/* cartes et contenu */
.card{
  background:var(--carte);
  border:1px solid var(--bord);
  border-radius:16px;
  padding:18px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  margin-bottom:16px;
}
.card h2{margin:0 0 10px 0; font-size:18px}
.card h3{margin:16px 0 8px 0; font-size:15px}
.badge{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:700;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--bord);
  background:#f8fafc;
  color:var(--cfaa-ocre);
}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 980px){
  .sidebar{width:280px}
  .main{margin-left:280px; width:calc(100% - 280px)}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .sidebar{position:static; width:100%; border-radius:0}
  .main{margin-left:0; width:100%}
  .header{position:static}
}

figure{margin:12px 0; padding:0}
figure img{
  display:block;
  max-width:900px;
  width:100%;
  height:auto;
  margin:0 auto;
  border-radius:14px;
  border:1px solid var(--bord);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}
figcaption{margin-top:8px; color:var(--muted); font-size:13px; text-align:center}
ul{margin:8px 0 8px 22px}
hr.sep{border:none;border-top:1px dashed var(--bord);margin:14px 0}
.callout{
  border-left:6px solid var(--cfaa-ocre);
  background:#fff7ed;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #fde2c1;
}
.small{font-size:13px;color:var(--muted)}
.kpi{display:flex; gap:10px; flex-wrap:wrap}
.kpi .item{background:#f8fafc;border:1px solid var(--bord);padding:10px 12px;border-radius:14px;font-size:13px}

/* --- Ajouts communs (fusion conduites) --- */
.formateur-box{
  display:flex;
  gap:12px;
  align-items:center;
  margin:12px 0 16px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
}
.formateur-box img{
  width:56px;height:56px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}
.formateur-info{color:#fff; line-height:1.15}
.formateur-info strong{display:block; font-size:14px}
.formateur-info span{display:block; font-size:12px; opacity:.9}

.sidebar a, #toc a, .toc a{
  color:#ffffff;
}
.sidebar a:hover, #toc a:hover, .toc a:hover{
  color:#fff;
  background: rgba(255,255,255,.10);
  text-decoration:none;
}

.sidebar .menu a.active,
.sidebar .menu a[aria-current="page"]{
  background: rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.18);
}

/* =========================================
   Gestion des images de contenu (anti-flou)
========================================= */

.media {
  display: flex;
  justify-content: center;
  margin: 1.5rem 0;
}

.media img {
  max-width: 520px;        /* largeur pédagogique optimale */
  width: 100%;             /* responsive si écran plus petit */
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* Variante pour images très détaillées (schémas) */
.media.large img {
  max-width: 720px;
}

/* Mobile */
@media (max-width: 600px) {
  .media img {
    max-width: 100%;
  }
}
/* ---------- Navigation bas de page ---------- */
.nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}
.nav a{
  display:inline-block;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  text-decoration:none;
  background:#fff;
}
.nav a:hover{
  border-color: rgba(11,132,198,.6);
  background: var(--cfaa-blue-soft);
}