:root{--primary:#35478c;--bg:#f5f6fa;--text:#1f2937}
*{box-sizing:border-box}
body{margin:0;font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:inherit}
header{background:var(--primary);color:#fff}
.nav-container{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:.9rem 1rem}
.nav-container .brand a{color:#fff;text-decoration:none;font-weight:700}
.nav-container nav a{color:#fff;margin-left:1rem;text-decoration:none;opacity:.95}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.lead{opacity:.9}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:1rem}
.card{display:block;border:1px solid #e8e8e8;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04);text-decoration:none}
.card-placeholder{width:100%;height:150px;background:#fff;border-bottom:1px solid #eee}
.card-content{padding:1rem}
.card-title{font-weight:700;margin-bottom:.35rem}
.card-description{opacity:.8;font-size:.95rem}
footer{background:#2b356a;color:#cfd6ff;margin-top:2rem}
footer .container{padding:1rem}
.button{display:inline-block;background:var(--primary);color:#fff;padding:.6rem 1rem;border-radius:10px;text-decoration:none}
.spacer{height:1rem}

/* Placeholders 16:9 */
.placeholder-16x9{background:#ffffff;border:1px solid #eee;border-radius:12px;aspect-ratio:16/9;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.02);margin:1rem 0}

/* Local TOC with anchors */
.local-toc{position:sticky;top:72px;align-self:start;border:1px solid #e8e8e8;border-radius:12px;padding:1rem;background:#fff}
.local-toc h3{margin:0 0 .75rem 0;font-size:1rem}
.local-toc ul{margin:0;padding-left:1rem}
.local-toc a{text-decoration:none;color:#35478c}
.local-toc a:hover{text-decoration:underline}

/* Layout with TOC */
.page-with-toc{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:2rem}
@media (max-width: 900px){.page-with-toc{grid-template-columns:1fr}.local-toc{position:static}}

/* Badges */
.badge{display:inline-block;background:#eef2ff;color:#2c3e50;padding:.15rem .5rem;border-radius:999px;font-size:.8rem;margin-right:.25rem}

/* Quiz */
.quiz{border:1px solid #eee;border-radius:12px;padding:1rem;background:#fff}
.quiz .q{margin:.5rem 0}
.quiz .answers label{display:block;margin:.35rem 0;cursor:pointer}
.quiz .check{margin-top:.5rem}
.quiz .feedback{margin-top:.35rem;font-weight:600}
.quiz .ok{color:#1b7a3a}
.quiz .ko{color:#b31d1d}
/* Accordions pour le storyboard */
details.accordion {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  margin: .6rem 0;
  overflow: hidden;
}
details.accordion summary {
  cursor: pointer;
  list-style: none;
  padding: .75rem 1rem;
  background: #f7f8ff;
  font-weight: 600;
  outline: none;
}
details.accordion[open] summary {
  border-bottom: 1px solid #e8e8e8;
}
details.accordion .accordion-body {
  padding: 1rem;
}
details.accordion summary::-webkit-details-marker { display: none; }
.card-img {
  width: 100%;
  height: 160px;   /* ajuste la hauteur comme tu veux */
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}