:root{
  --bg: #f7f8fb;
  --card: #ffffff;
  --muted: #5b6778;
  --text: #1a2433;
  --accent: #2e6cff;
  --border: #e6e9ef;
  --radius: 16px;
  --maxw: 1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans"}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--maxw);margin-inline:auto;padding:24px}
header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(140%) blur(8px);z-index:10;border-bottom:1px solid var(--border)}
header .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-block:12px}
.brand-btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
  padding:8px 12px;border-radius:999px;background:#f0f4ff;border:1px solid #c9d6ff;color:#214bbb;text-decoration:none;
  box-shadow:0 1px 0 #fff inset, 0 6px 14px rgba(46,108,255,.08);
}
.brand-btn[aria-current="page"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 0 0 3px rgba(46,108,255,.18) inset, 0 8px 18px rgba(46,108,255,.16);
}
.brand-btn:hover{text-decoration:none;box-shadow:0 1px 0 #fff inset, 0 8px 18px rgba(46,108,255,.12)}
.brand-btn img{height:28px;width:28px;object-fit:contain;display:block}

/* Nav visible mobile : scroll horizontal */
nav{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav::-webkit-scrollbar{display:none}
nav a{
  flex:0 0 auto;
  padding:6px 12px;border-radius:999px;background:#f0f4ff;border:1px solid #c9d6ff;
  color:#214bbb;font-weight:500;white-space:nowrap
}
nav a[aria-current="page"]{
  background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;
  box-shadow:0 0 0 3px rgba(46,108,255,.18) inset;text-decoration:none
}

main{padding-top:8px}
section{margin:28px auto;padding:20px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 1px 0 #fff inset, 0 8px 20px rgba(10,20,40,.05)}
h2,h3{margin:0 0 6px}
h2{font-size:1.35rem}
h3{font-size:1.1rem;color:#2a3a55}
.section-head{display:block}
.section-body{margin-top:10px}
.subsection{margin-top:18px;padding-top:12px;border-top:1px dashed var(--border)}
.note{margin:8px 0 0;color:var(--muted)}
.note.intro{
  background:#fff8d6;
  border:1px solid #f2e5a9;
  border-radius:12px;
  padding:12px 14px;
  color:#4a3c1c;
  box-shadow:0 6px 18px rgba(180,140,30,.08);
}
.links{margin:6px 0 0 18px}

/* Grille responsive : 3 cols desktop, 2 cols tablette, 1 col mobile */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));margin-top:12px}
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}
@media (max-width: 600px){
  .grid{grid-template-columns:1fr}
}

.tile{display:flex;flex-direction:column;gap:8px}
.video{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#f5f7fb;aspect-ratio:16/9}
.video iframe{width:100%;height:100%;border:0;display:block;background:#000}
.caption{font-size:.92rem;color:#2a3a55;background:#f9fbff;border:1px solid var(--border);border-radius:10px;padding:8px 10px}

@supports not (aspect-ratio: 16/9){
  .video{padding-top:56.25%}
  .video iframe{position:absolute;inset:0}
}

footer{color:var(--muted);text-align:center;margin:32px 0 50px}

/* --- Améliorations mobile --- */
@media (max-width:900px){
  /* Titre sur sa propre ligne, menu en dessous */
  header .wrap{flex-direction:column;align-items:flex-start;gap:8px}
  .brand-btn{font-size:1.05rem;width:100%;justify-content:flex-start}
  nav{width:100%}
}
@media (max-width:600px){
  /* Sous-sections plus visibles */
  .subsection h3{
    display:inline-block;
    font-size:1.2rem;
    font-weight:700;
    background:#eaf1ff;
    color:#153a8a;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid #c9d6ff;
    margin:6px 0 4px;
  }
  .wrap{padding:16px}
}