/* =========================
   Variables & bases
   ========================= */
:root{
  --blue:#26a6d4;
  --blue-strong:#1e9ac7;
  --text:#222;
  --muted:#6b7280;
  --border:#e5e7eb;
  --panel:#f9fafb;
  --container:1100px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font:400 16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:#fff;
}
.wrap{max-width:var(--container); margin-inline:auto; padding:0 24px}
.wrap--full{max-width:none; padding:0}

/* =========================
   Bandeau
   ========================= */
.topbar{padding:0; margin:0}
.topbar img{display:block; width:100%; max-width:1000px; height:auto; margin:0 auto}

/* =========================
   Navigation
   ========================= */
.mainnav{border-block:2px solid var(--blue); margin-top:18px}
.menu{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:38px; list-style:none; padding:16px 0; margin:0;
}
.menu a{
  display:inline-block; padding:10px 14px; border-radius:6px;
  text-decoration:none; color:#111; letter-spacing:.5px; font-weight:600;
}
.menu a.active{background:var(--blue); color:#fff; box-shadow:0 2px 0 var(--blue-strong) inset}
.nav-toggle{display:none; background:none; border:0; font-size:1.5rem; line-height:1}

.subline{border-block:1px solid var(--blue); background:#fff}
.under-title{text-align:center; margin:10px 0; letter-spacing:.6px; font-weight:600; color:#111}

/* =========================
   Contenu
   ========================= */
.content{padding:36px 0 56px}

/* ===== Accordions ===== */
.accordions{max-width:820px; margin-inline:auto}
.acc{background:#fff; border-radius:12px; border:1px solid var(--border); margin:16px 0; overflow:hidden}

/* clickable header */
.acc-summary{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; cursor:pointer; user-select:none;
  background:linear-gradient(#ffffff,#fbfdff);
  position:relative; font-weight:700;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.acc-summary:hover{background:#f1fbff}
.acc-summary:focus{outline:none}
.acc-summary:focus-visible{box-shadow:0 0 0 3px rgba(28,157,199,.25)}

/* chevron rond à gauche */
.acc-indicator{
  width:22px; height:22px; border:2px solid var(--blue-strong);
  border-radius:999px; display:inline-grid; place-items:center; flex:0 0 22px;
}
.acc-indicator::before{
  content:"▸"; font-size:13px; line-height:1; color:var(--blue-strong);
  transform:translateX(1px); transition:transform .2s;
}

/* titre + petite aide à droite */
.acc-title{font-weight:700; letter-spacing:.2px}
.acc-hint{margin-left:auto; font-weight:600; color:#2c6b83; font-size:.85rem; opacity:.8}

/* ouvert */
.acc[open] .acc-indicator::before{content:"▾"; transform:translateY(1px)}
.acc[open] .acc-summary{background:#e9f8fe; border-bottom:1px solid var(--border)}

/* panneau */
.panel{background:#fff; padding:14px 18px}
.doclist{margin:0; padding:0; list-style:none}
.doclist li{margin:8px 0}
.doclist a{
  display:inline-flex; align-items:center; gap:8px;
  color:#0666a1; text-decoration:none; font-weight:600;
}
.doclist a::before{content:"📄"; font-size:1rem}
.doclist a:hover{text-decoration:underline}

/* =========================
   Footer
   ========================= */
.footer{border-top:1px solid var(--border); color:var(--muted); font-size:.95rem; padding:28px 0; text-align:center}

/* =========================
   Responsive
   ========================= */
@media (max-width:900px){
  .menu{gap:20px}
}
@media (max-width:700px){
  .mainnav,.mainnav .wrap{position:relative}
  .nav-toggle{
    display:block; position:absolute; right:24px; top:10px;
    cursor:pointer; z-index:3; padding:8px 10px; background:none; border:0; line-height:1;
  }
  .menu{
    display:none; flex-direction:column; align-items:stretch;
    padding:8px; margin-top:44px; border-top:1px solid var(--border);
  }
  .menu.open{display:flex}
  .menu a{padding:12px 10px}
  .acc-summary{padding:14px}
  .acc-hint{display:none}
}
@media (max-width:1100px){
  :root{--container:92vw}
}
@media (max-width:360px){
  .menu a{padding:10px 8px}
}
.under-title a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.under-title a:hover {
  color: var(--blue);
}