/* =========================
   Variables & bases
   ========================= */
:root{
  --blue:#26a6d4;
  --blue-strong:#1e9ac7;
  --text:#111;
  --border:#e6e9ee;
  --cta:#ef6a6a;
  --cta-dark:#db5959;
  --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 20px}

/* =========================
   En-tête (bandeau image)
   ========================= */
.topbar img{display:block; width:100%; max-width:1000px; height:auto; margin:0 auto}

/* =========================
   Navigation
   ========================= */
.mainnav{border-block:2px solid var(--blue); margin-top:10px}
.menu{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:24px; list-style:none; padding:14px 0; margin:0;
}
.menu a{
  display:inline-block; padding:10px 14px;
  color:var(--text); text-decoration:none; letter-spacing:.3px; font-weight:600; border-radius:6px;
}
.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.6rem; line-height:1}

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

/* =========================
   Grille contenu
   ========================= */
.content-grid{display:grid; grid-template-columns:280px 1fr; gap:60px; padding:36px 0}
.left-col{display:flex; flex-direction:column; gap:20px}
.right-col{min-width:0}

/* Boutons rouges */
.cta-red{
  display:block; text-align:center; text-transform:uppercase; text-decoration:none;
  font-weight:700; letter-spacing:.35px; line-height:1.15;
  background:var(--cta); color:#fff; border-radius:6px; padding:18px 14px;
  border:1px solid rgba(0,0,0,.06); box-shadow:0 1px 0 rgba(0,0,0,.05) inset;
}
.cta-red:hover{background:var(--cta-dark)}

/* Titre + texte */
.page-title{
  margin:0 0 12px;
  font-size:42px; text-transform:uppercase; letter-spacing:.6px;
  color:var(--blue-strong); font-weight:800;
}
.text{max-width:900px}
.text p{margin:14px 0}

/* =========================
   Footer
   ========================= */
.page-bottom hr{border:0; height:1px; background:var(--border)}
.footer-inner{text-align:center; color:#6b7280; padding:28px 0 48px}

/* =========================
   Breakpoints (alignés sur accueil)
   ========================= */
@media (max-width:1100px){
  :root{--container:92vw}
}
@media (max-width:980px){
  .menu{gap:22px}
  .content-grid{grid-template-columns:240px 1fr; gap:28px}
}
@media (max-width:900px){
  .content-grid{grid-template-columns:1fr; gap:22px}
}
@media (max-width:700px){
  .mainnav,.mainnav .wrap{position:relative}
  .nav-toggle{
    display:block; position:absolute; right:20px; top:8px;
    cursor:pointer; z-index:3; padding:8px 10px; background:none; border:0; line-height:1;
  }
  .menu{
    display:none; flex-direction:column; align-items:stretch;
    gap:16px; padding:8px; margin-top:44px; border-top:1px solid var(--border);
    position:relative; z-index:2; background:#fff;
  }
  .menu.open{display:flex}
  .topbar img{max-width: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);
}