/* === FIX espace vide juste après le header === */
header + .svsanst-course { margin-top: 0 !important; }
main.svsanst-course { margin-top: 0 !important; }
.svsanst-course > :first-child { margin-top: 0 !important; }

/* ================= Thème & base ================= */
:root{
  --c-text:#293241;
  --c-muted:#5b6b7b;
  --c-bg:#f7f8fb;
  --c-card:#ffffff;
  --c-primary:#1f4e79;   /* titres */
  --c-accent:#4a90e2;    /* étiquettes */
  /* Code couleur des callouts */
  --c-def-bg:#eaf3ff;    --c-def-bd:#2f6feb; --c-def-tx:#0b3d91;
  --c-rap-bg:#fff7e6;    --c-rap-bd:#f59e0b; --c-rap-tx:#7a4a00;
  --c-ex-bg:#eefcf7;     --c-ex-bd:#10b981; --c-ex-tx:#065f46;
  --c-bil-bg:#edf7ee;    --c-bil-bd:#2a7f38; --c-bil-tx:#1b4d28;
}

.svsanst-course {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--c-text);
  background: var(--c-bg);
}

.svsanst-course .container {
  max-width: 980px;
  margin: 2rem auto;
  background: var(--c-card);
  padding: 2rem;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border-radius: 14px;
}

/* ================= Titres ================= */
.svsanst-course h1,
.svsanst-course h2,
.svsanst-course h3 {
  color: var(--c-primary);
  line-height: 1.2;
  letter-spacing:.2px;
}
.svsanst-course h1 { font-size: 2.1rem; margin: 0 0 .5rem; }
.svsanst-course h2 { font-size: 1.55rem; margin: 1.4rem 0 .6rem; }
.svsanst-course h3 { font-size: 1.2rem; margin: 1.1rem 0 .3rem; color:#184061; }

/* ================= Bloc Méta ================= */
.svsanst-course .course-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin: .8rem 0 1.2rem;
  font-size: .9rem;
}
.svsanst-course .course-meta span {
  background: var(--c-accent);
  color: #fff; padding: .38rem .7rem; border-radius: 999px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(74,144,226,.25);
}

/* ================= Texte & listes ================= */
.svsanst-course p,
.svsanst-course ul,
.svsanst-course ol {
  margin: .7rem 0; line-height: 1.7;
}
.svsanst-course ul, .svsanst-course ol { padding-left: 1.1rem; }
.muted { color: var(--c-muted); }

/* ================= Callouts (code couleur) ================= */
.callout{
  border-left: 6px solid transparent;
  padding: .9rem 1rem;
  border-radius: 10px;
  margin: 1rem 0;
  background: #f5f5f5;
}
.callout .label{
  font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing:.04em;
  display:inline-block; margin-bottom:.35rem;
}
.callout.def   { background: var(--c-def-bg); border-color: var(--c-def-bd); color: var(--c-def-tx); }
.callout.def .label{ color: var(--c-def-bd); }
.callout.rappel{ background: var(--c-rap-bg); border-color: var(--c-rap-bd); color: var(--c-rap-tx); }
.callout.rappel .label{ color: var(--c-rap-bd); }
.callout.exemple{ background: var(--c-ex-bg); border-color: var(--c-ex-bd); color: var(--c-ex-tx); }
.callout.exemple .label{ color: var(--c-ex-bd); }
.callout.bilan { background: var(--c-bil-bg); border-color: var(--c-bil-bd); color: var(--c-bil-tx); }
.callout.bilan .label{ color: var(--c-bil-bd); }

/* ================= Médias (images / vidéo / 3D) ================= */
.figure{
  margin: 1rem 0; border-radius: 12px; overflow: hidden; background:#f1f5f9; border:1px solid #e5e7eb;
}
.figure img{ display:block; width:100%; height:auto; }
.figure .caption{ padding:.6rem .8rem; font-size:.9rem; color:var(--c-muted); background:#fafafa; }

.media-16x9{
  position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; margin:1rem 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.1);
}
.media-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.sketchfab-frame{
  position:relative; width:100%; aspect-ratio:16/9; background:#0b1020; border-radius:12px; overflow:hidden; margin:1rem 0;
  min-height:420px;
}
.sketchfab-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ================= Tableau ================= */
.table-wrap{ margin:1rem 0; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; }
table.data{
  width:100%; border-collapse: collapse; background:#fff; font-size:.98rem;
}
table.data thead th{
  background:#0f3057; color:#fff; text-align:left; padding:.9rem .8rem; font-weight:800; letter-spacing:.02em;
}
table.data tbody td{
  padding:.8rem .8rem; border-top:1px solid #eef2f7; vertical-align:top;
}
table.data tbody tr:nth-child(even){ background:#fafcff; }

/* ================= Cartes (quiz / fiches / exos) ================= */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; }
.card{
  display:block; padding:1rem; border:1px solid #e5e7eb; border-radius:12px; text-decoration:none; background:#fff;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,.06); border-color:#cfe3ff; }
.card h3{ margin:.1rem 0 .4rem; color:#163a59; font-size:1.03rem; }
.card p{ margin:0; color:var(--c-muted); }

/* ================= Pied de page ================= */
.svsanst-course footer {
  text-align: center; font-size: 0.92rem; color: #6b7280; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e5e7eb;
}
.svsanst-course footer a { color: #6b7280; text-decoration: none; }

/* Responsive */
@media (max-width: 720px){
  .svsanst-course .container { margin: 1rem auto; padding: 1.1rem; border-radius: 12px; }
  .sketchfab-frame{ min-height:320px; }
}

/* === Accessibilité : h1 invisibles pour SEO / lecteurs d'écran === */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ================= Barre de progression de lecture (version minimaliste) ================= */

/* Utilisée pour placer la barre juste sous le header */
:root{
  --svs-header-h: 64px;
}

/* Conteneur fixe en haut de l'écran */
.course-progress-floating{
  position: fixed;
  top: var(--svs-header-h, 64px); /* juste sous ton header */
  left: 0;
  right: 0;
  z-index: 80;
  pointer-events: none; /* ne bloque pas les clics sur le contenu */
}

/* On vire complètement le texte : barre pure */
.course-progress-label{
  display: none;
}

/* La barre elle-même : fine ligne sur toute la largeur */
.course-progress-track{
  position: relative;
  width: 100%;
  height: 3px;
  background: rgba(148,163,184,.35); /* gris clair discret */
  overflow: hidden;
}

/* Le remplissage */
.course-progress-inner{
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #1d4ed8, #3b82f6);
  transition: width .18s ease-out;
}

/* Optionnel : sur mobile, même chose, pas besoin de changer */
@media (max-width: 480px){
  .course-progress-track{
    height: 3px;
  }
}

/* ================= Bannière info (optionnelle) ================= */

.deploy-banners{
  position: sticky;
  top: var(--svs-header-h, 64px);
  z-index: 50;
  display: grid;
  gap: 6px;
}

.deploy-banner{
  position: static;
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .9rem;
  background: rgba(37, 99, 235, .08);
  backdrop-filter: saturate(150%) blur(6px);
  -webkit-backdrop-filter: saturate(150%) blur(6px);
  border-bottom: 1px solid rgba(30, 41, 59, .08);
  color:#0f172a;
  font-size:.95rem;
}

.deploy-banner .dot{
  width:.6rem;
  height:.6rem;
  border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 4px rgba(37, 99, 235, .12);
  flex:0 0 auto;
  margin-left:.1rem;
}

.deploy-banner .msg{ line-height:1.3; }
.deploy-banner .dates{ font-weight:600; }

.deploy-banner.warn{
  background: rgba(245,158,11,.10);
  border-bottom-color: rgba(245,158,11,.25);
}

.deploy-banner.success{
  background: rgba(16,185,129,.10);
  border-bottom-color: rgba(16,185,129,.25);
}

@media (max-width: 520px){
  .deploy-banner{
    font-size:.88rem;
    padding:.55rem .75rem;
  }
  .deploy-banner .dates{ display:inline-block; }
}