:root{
  --bg:#fdfcf9; /* sable */
  --text:#1e293b; /* charbon doux */
  --muted:#475569;
  --soft:#f1f5f9;
  --brand1:#0f766e; /* teal */
  --brand2:#4338ca; /* indigo */
  --ring: 0 0 0 3px rgba(67,56,202,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial; color:var(--text); background:var(--bg); line-height:1.75}
a{color:#0b63c6; text-decoration:none; transition:color .2s ease}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:20px}
.header-wrap{position:sticky; top:0; z-index:50; backdrop-filter: saturate(1.2) blur(6px); background:rgba(255,255,255,.9); border-bottom:1px solid #e5e7eb; transition: background .3s ease, border-color .3s ease}
.header{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; padding:8px 0}
.brand img{height:40px; width:auto}
.brand .title{font-weight:700; font-size:1.1rem; letter-spacing:.3px}
.nav{display:flex; gap:10px; flex-wrap:wrap}
.nav a{padding:10px 12px; border-radius:12px; background:#e0f2f1; color:#1f2937; font-weight:500; transition: background .25s ease, color .25s ease, transform .25s ease}
.nav a:hover{background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; transform:translateY(-1px)}
.nav a[aria-current="page"]{outline:var(--ring)}
.menu-toggle{display:none; border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:8px 10px}
@media (max-width: 900px){
  .nav{display:none}
  .nav.open{display:flex; flex-direction:column; gap:8px; padding:10px 0}
  .menu-toggle{display:block}
}
.hero{
  background-image:url('/assets/hero-bg.svg');
  background-size:cover; background-position:center;
  padding:64px 0 28px;
  border-bottom:1px solid #e5e7eb;
  animation:fadeIn 0.8s ease both;
}
.hero h1{margin:0 0 8px; font-size:clamp(28px,4vw,42px)}
.hero p.lead{color:var(--muted); font-size:clamp(16px,2vw,18px); max-width:820px}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:1fr}
@media(min-width:900px){ .grid-2{grid-template-columns:1fr 1fr} }
.card{background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:18px; box-shadow:0 8px 20px rgba(2,6,23,0.06); transition:box-shadow .3s ease, transform .3s ease; animation:fadeInUp .6s ease both}
.card:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,6,23,0.12)}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; border:1px solid #e5e7eb}
.table th, .table td{padding:12px; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:top}
.table th{background:#f8fafc}
.breadcrumb{color:var(--muted); font-size:.95rem; padding:8px 0}
.breadcrumb a{color:#475569}
aside.note{border-left:4px solid var(--brand2); background:#eef2ff; padding:12px 14px; border-radius:8px}
details{border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff}
details+details{margin-top:10px}
footer{border-top:1px solid #e5e7eb; margin-top:40px; background:#fafafa}
footer .footgrid{display:grid; gap:16px}
@media(min-width:900px){ footer .footgrid{grid-template-columns:1fr 1fr} }
kbd{background:#e5e7eb; border-radius:6px; padding:2px 6px}
img.responsive{max-width:100%; height:auto; border-radius:14px; border:1px solid #e5e7eb}
.figure{display:grid; gap:8px; text-align:center; font-size:.95rem; color:#475569}
.search{display:flex; gap:10px; margin-top:10px}
.search input{flex:1; padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb}
.search button{padding:10px 14px; border-radius:10px; border:1px solid #dbeafe; background:linear-gradient(90deg, var(--brand1), var(--brand2)); color:#fff; font-weight:600; transition:filter .25s ease, transform .25s ease}
.search button:hover{filter:brightness(.98); transform:translateY(-1px)}
.skip{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:12px; top:12px; width:auto; height:auto; background:#fff; padding:8px 10px; border-radius:8px; outline:var(--ring)}
blockquote{border-left:4px solid #c7d2fe; padding-left:12px; color:#334155; background:#f8fafc; border-radius:8px}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes fadeInUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}