/* ========= Variables (charte) ========= */
:root{
  --brand-navy: #123b77;      /* bleu profond */
  --brand-teal: #22b8b5;      /* turquoise (CTA) */
  --brand-violet: #6f5ad1;    /* pointe de violet */
  --text-dark: #2f3440;
  --text-darker: #2a2f36;
  --bg-page: #f8f9fa;
  --bg-soft: #f6f9fc;
  --shadow-sm: 0 6px 16px rgba(18,59,119,.08);
  --shadow-md: 0 8px 20px rgba(18,59,119,.10);
}

/* ========= Général ========= */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#333;
  line-height:1.6;
  background-color:var(--bg-page);
}

/* ========= Header (barre simple) ========= */
header{ background:#0077b6; color:#fff; padding:10px 0; }
header nav{
  display:flex; justify-content:space-between; align-items:center; padding:0 20px;
}
header nav .logo{ flex:1; }
header nav .logo img{
  height:60px; background:#fff; padding:10px; border-radius:8px;
}
header nav .nav-center{ flex:2; display:flex; justify-content:center; }
header nav .nav-links{ display:flex; list-style:none; position:relative; gap:18px; }
header nav .nav-links a{ color:#fff; text-decoration:none; font-weight:700; }
header nav .nav-links a:hover{ text-decoration:underline; }
header nav .nav-links .dropdown{ position:relative; }
header nav .nav-links .dropdown-content{
  display:none; position:absolute; background:#fff; min-width:160px;
  box-shadow:0 8px 16px rgba(0,0,0,.2); z-index:10;
}
header nav .nav-links .dropdown:hover .dropdown-content{ display:block; }
header nav .nav-links .dropdown-content li{ padding:12px 16px; }
header nav .nav-links .dropdown-content a{ color:#0077b6; display:block; }
header nav .nav-links .dropdown-content li:hover{ background:#eee; }
header nav .client-button{
  flex:1; display:flex; flex-direction:column; align-items:center; color:#0077b6; text-align:right;
}
header nav .client-button a{ color:#fff; font-size:30px; text-decoration:none; transition:color .3s; }
header nav .client-button a:hover{ color:#cfe1f5; }
header nav .client-button span{ margin-top:4px; color:#fff; font-size:14px; }

/* ========= Utilitaires ========= */
.container{ max-width:1100px; margin:0 auto; padding:0 24px; }
.card{ background:#fff; border-radius:16px; padding:28px; box-shadow:var(--shadow-md); }
.grid{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); }

/* Boutons */
.btn{
  display:inline-block; padding:12px 22px; border-radius:12px; font-weight:700; text-decoration:none;
}
.btn-primary{
  background:var(--brand-teal); color:#fff; box-shadow:0 8px 20px rgba(34,184,181,.25);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary:hover{ filter:brightness(.96); transform:translateY(-1px); box-shadow:0 12px 26px rgba(34,184,181,.32); }
.btn-primary:focus-visible{ outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px rgba(111,90,209,.35); }
.btn-ghost{ color:#fff; border:2px solid rgba(255,255,255,.85); margin-left:10px; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* ========= HERO ========= */
.asso-hero{
  background: linear-gradient(to bottom right, rgba(18,59,119,.68), rgba(111,90,209,.55)),
              url('background.jpg') center/cover no-repeat;
  color:#fff; text-align:center; padding:80px 0 72px;
}
.asso-hero h1{
  font-size:clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height:1.15; margin-bottom:10px;
  text-shadow:0 6px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
}
.asso-hero .subtitle{ font-size:clamp(1.05rem, .9rem + .6vw, 1.25rem); opacity:.95; }
.hero-cta{ margin-top:22px; }
.hero-points{
  display:flex; flex-wrap:wrap; gap:10px 16px; justify-content:center; margin-top:18px;
  font-size:.95rem; opacity:.95;
}
.hero-points li{ list-style:none; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.13); }

/* ========= WHY ========= */
.asso-why{ padding:44px 0; background:var(--bg-soft); }
.asso-why h2{ color:var(--brand-navy); margin-bottom:10px; }
.asso-why p{ color:var(--text-dark); }

/* ========= SERVICES ========= */
.asso-services{ padding:48px 0; background:#eef6f7; }
.asso-services h2{ text-align:center; color:var(--brand-navy); margin-bottom:18px; }
.service{
  background:#fff; border-radius:14px; padding:18px; box-shadow:var(--shadow-sm);
}
.service h3{ margin-bottom:8px; color:var(--brand-navy); }
.service p{ color:var(--text-dark); }

/* ========= PLANS (formules sans prix) ========= */
.asso-plans{ padding:56px 0; background:#fff; text-align:center; }
.asso-plans h2{ color:var(--brand-navy); margin-bottom:12px; }
.asso-plans .intro{
  max-width:780px; margin:0 auto 32px; font-size:1.05rem; color:var(--text-dark); line-height:1.8;
}
.plans .plan{
  background:#fff; border-radius:16px; padding:28px 24px; text-align:left;
  box-shadow:var(--shadow-md);
  transition:transform .25s ease, box-shadow .25s ease;
}
.plan:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(18,59,119,.12); }
.plan h3{ margin-bottom:6px; color:var(--brand-navy); }
.plan .tagline{ font-weight:600; color:var(--brand-violet); margin-bottom:12px; }
.plan ul{ margin:12px 0 20px 18px; line-height:1.7; color:var(--text-darker); }
.plan.featured{ border:2px solid var(--brand-teal); box-shadow:0 12px 26px rgba(34,184,181,.18); transform:scale(1.02); }
.asso-plans .note{ margin-top:28px; font-size:.98rem; color:#3b4253; line-height:1.7; }

/* ========= MÉTHODE ========= */
.asso-method{ padding:48px 0; background:var(--bg-soft); }
.asso-method h2{ color:var(--brand-navy); }
.steps{
  display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); counter-reset:step;
}
.steps li{
  list-style:none; background:#fff; border-radius:14px; padding:16px; box-shadow:var(--shadow-sm);
  position:relative; color:var(--text-dark);
}
.steps li::before{
  counter-increment:step; content:counter(step);
  position:absolute; top:12px; right:12px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand-violet); color:#fff; font-weight:700; font-size:.9rem;
}

/* ========= PROOF ========= */
.asso-proof{ padding:44px 0; background:#fff; }
.asso-proof h2{ color:var(--brand-navy); }
.asso-proof blockquote{ font-size:1.05rem; line-height:1.7; color:var(--text-darker); margin:0; }
.asso-proof cite{ display:block; margin-top:8px; color:#5b6b82; }

/* ========= FAQ ========= */
.asso-faq{ padding:48px 0; background:#fff; }
.asso-faq h2{ color:var(--brand-navy); }
.asso-faq details{ background:var(--bg-soft); border-radius:12px; padding:14px 16px; margin-bottom:10px; }
.asso-faq summary{ cursor:pointer; font-weight:700; color:var(--brand-navy); }

/* ========= CTA final ========= */
.asso-cta{
  text-align:center; padding:56px 0 64px;
  background:linear-gradient(to bottom right, rgba(18,59,119,.08), rgba(111,90,209,.08));
}
.asso-cta h2{ color:var(--brand-navy); margin-bottom:6px; }
.asso-cta p{ margin-bottom:16px; color:var(--text-dark); }

/* ========= Footer ========= */
footer{
  background:#222; color:#fff; padding:20px; text-align:center; font-size:.9rem;
}

/* ========= Responsive léger ========= */
@media (max-width:560px){
  .btn{ padding:11px 18px; }
  .asso-hero{ padding:64px 0 56px; }
}