/* ===== Reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#2f3a4a; --panel:#6c7b8b; --bg:#f5f7fa; --line:#cfd9e4; --accent:#7bb9ff;
  --bg-tiles-opacity:.45;   /* opacité des tuiles du collage */
  --bg-blur:0px;            /* flou du collage (0 = net) */
}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:#222; display:flex; flex-direction:column; min-height:100vh;
}
header,main,footer{position:relative;z-index:1}

/* ===== Header ===== */
.header{
  background:rgba(47,58,74,.95); color:#fff; padding:20px 0;
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.05) blur(6px);
  box-shadow:0 4px 18px rgba(47,58,74,.15);
}
.header-container{
  width:90%; max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
}
.logo{font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.3px;color:#fff}
.logo a{ color:#fff; text-decoration:none }
.logo .title{font-weight:500;font-size:18px;opacity:.95;color:#fff}
.nav a{
  color:#fff;text-decoration:none;margin-left:18px;font-weight:700;letter-spacing:.2px;
  padding:.55rem .9rem;border:1px solid transparent;border-radius:10px;transition:border-color .2s;
}
.nav a:hover{border-color:color-mix(in srgb,var(--line),var(--accent) 45%)}
.nav a.menu-cta,.nav a.menu-btn{
  border-color:color-mix(in srgb,#ffffff,var(--accent) 75%);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}
/* petit espace entre Accueil et le CTA */
.nav .menu-link{ margin-right:6px }

/* ===== Fond unique ===== */
.collage{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background: url('img/bg-collage.webp') center/cover no-repeat fixed;
  filter: blur(var(--bg-blur));
  transform: translateZ(0);
}
.collage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(245,247,250,.20),rgba(245,247,250,.32));
}

/* ===== ACCUEIL (Hero + CTA + grille de liens) ===== */
.hero{ padding:64px 20px 8px; text-align:center; max-width:1100px; margin:0 auto; }
.hero h1{
  font-size:42px; line-height:1.15; color:#fff; display:inline-block;
  padding:.35rem .9rem .45rem; border-radius:14px;
  background:linear-gradient(180deg,#2f3a4a,#243041);
  box-shadow:0 10px 24px rgba(47,58,74,.25), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
}
.hero p{ color:#4b5563; margin:14px auto 0; max-width:900px; }

/* >>> Pastille lisible du sous-titre (ACCUEIL uniquement) */
.hero .hero-subtitle{
  display:inline-block;
  margin-top:14px;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(47,58,74,.72);
  color:#e8edf5;
  line-height:1.55;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  backdrop-filter:saturate(1.05) blur(2px);
}
.cta-row{ margin-top:18px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{
  text-decoration:none; border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; font-weight:600; color:var(--ink);
  background:#fff; transition:transform .15s, box-shadow .18s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(47,58,74,.12); border-color:color-mix(in srgb,var(--line),var(--accent) 45%); }
.btn-primary{ color:#fff; background:linear-gradient(180deg,#6c7b8b,#5f6d7d); border-color:color-mix(in srgb,var(--line),var(--ink) 25%); }
.btn-outline{ background:#fff; color:var(--ink); }

.menu-section{ padding:28px 0 8px; }
.menu-grid{
  background:linear-gradient(180deg,#6c7b8b,#5f6d7d);
  padding:26px; border-radius:16px;
  display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); gap:22px;
  width:90%; max-width:1000px; margin:0 auto;
  border:1px solid color-mix(in srgb,var(--line),var(--ink) 20%);
  box-shadow:0 16px 40px rgba(47,58,74,.20), inset 0 1px 0 rgba(255,255,255,.08);
}
.menu-btn{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--line),#fff 5%);
  color:#fff; text-decoration:none; text-align:center;
  padding:16px 18px; border-radius:12px; font-weight:600;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s, box-shadow .18s, border-color .2s;
}
.menu-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(47,58,74,.25); border-color:color-mix(in srgb,var(--line),var(--accent) 45%); }
.menu-btn[data-icon]::before{ content:attr(data-icon); font-size:18px; margin-right:10px; }

@media (max-width:900px){
  .hero h1{ font-size:32px }
  .hero .hero-subtitle{ padding:8px 12px; font-size:15px }
  .menu-grid{ grid-template-columns:1fr; padding:22px }
}

/* Bloc portrait (si utilisé) */
.profile-bloc{ padding:28px 0 8px; }
.profile-wrap{
  width:90%; max-width:1000px; margin:0 auto;
  display:flex; align-items:center; gap:24px;
  background:#ffffffcc; backdrop-filter:saturate(1.05) blur(2px);
  border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  box-shadow:0 10px 26px rgba(47,58,74,.12);
}
.profile-photo{
  width:140px; height:140px; object-fit:cover;
  border-radius:12px; border:1px solid var(--line);
  box-shadow:0 6px 16px rgba(47,58,74,.12);
  flex:0 0 auto;
}
.profile-text{
  color:#374151; line-height:1.6; text-align:justify;
  font-size:16px;
}
@media (max-width:900px){
  .profile-wrap{ flex-direction:column; text-align:center; }
  .profile-text{ text-align:left; }
}

/* ===== HÉROS LISIBLES (Consultation / Mon parcours / Prendre RDV / Ressources) ===== */
.page-hero.case-hero {
  text-align: center;
  padding: 80px 20px 40px;
  position: relative;
  z-index: 1;
}
.page-hero.case-hero .hero-content {
  display: inline-block;
  background: rgba(47,58,74,0.85);
  padding: 20px 28px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
}
.page-hero.case-hero h1 { font-size: 40px; color: #fff; margin-bottom: 12px; }
.page-hero.case-hero p  { font-size: 18px; color: #e5e7eb; margin: 0; }

/* ===== Grille de cartes communes ===== */
.cases-grid{
  width:90%; max-width:1100px; margin:16px auto 40px;
  display:grid; gap:22px; grid-template-columns:repeat(2,1fr); justify-content:center;
}
.case{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;
  box-shadow:0 6px 18px rgba(47,58,74,.10); transition:transform .15s, box-shadow .2s;
}
.case:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(47,58,74,.18); }
.case-header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.case-icon{ font-size:28px; }
.case h2{ font-size:22px; font-weight:700; color:var(--ink); }
.case-body{ font-size:16.5px; color:#374151; line-height:1.7; }

.list-check{ list-style:none; padding-left:0; }
.list-check li{ position:relative; padding-left:22px; margin-bottom:12px; }
.list-check li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--accent); font-weight:bold; }

/* ===== Coordonnées (empiler mail + téléphone) ===== */
.case-actions.centered{
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.case-actions.centered .btn{
  width:100%; max-width:300px; text-align:center;
}
.case-actions .btn {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  white-space: nowrap;
}
.case-actions .btn-mail {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 1.5rem;   /* espace en plus pour respirer */
  padding-right: 1.5rem;
  text-align: center;
}

/* ===== Vague & Footer ===== */
.wave-wrap{ margin-top:36px }
.wave{ display:block; width:100%; height:auto }
.footer{
  background:#fff; padding:30px 10px; border-top:1px solid var(--line); text-align:center;
}
.footer-logos{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:24px 48px; max-width:1200px; margin:0 auto;
}
.footer-item{ text-align:center; max-width:260px }
.footer-item img{
  max-width:200px; max-height:60px; width:auto; height:auto; margin-bottom:12px; object-fit:contain;
  filter:saturate(.9) contrast(1.05); transition:transform .15s, filter .2s;
}
.footer-item img:hover{ transform:translateY(-2px); filter:saturate(1) contrast(1.1) }
.footer-item p{ font-size:14px; color:#333 }

/* ===== Responsive ===== */
@media (max-width: 500px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .nav a {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
}
@media (max-width: 600px) {
  .header-container{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 92%;
  }
  .logo{ line-height: 1.25 }
  .nav{
    display:flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .nav a{
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
  .hero{ padding: 40px 16px 8px }
  .hero h1{ font-size: clamp(28px, 8vw, 36px); }
  .page-hero{ padding: 16px }
  .page-hero h1{ font-size: clamp(24px, 7vw, 32px); }
  .menu-grid{ grid-template-columns:1fr; width: 92%; }
  .cases-grid{ grid-template-columns:1fr; width: 92%; margin: 12px auto 28px; justify-items: stretch; }
  .case{ border-radius: 14px; }
  .case-header{ padding: 12px 14px }
  .case-header h2{ font-size: 18px }
  .case-body{ padding: 12px 14px }
  .list-check li{ margin: 6px 0; }
  .profile-wrap{ width: 92%; padding: 14px }
  .footer{ padding: 22px 10px }
}
@media (max-width: 360px) {
  .nav a{ padding: .5rem .75rem; font-size: 15px }
  .hero h1{ font-size: clamp(24px, 9vw, 32px); }
}
/* ——— HERO lisible pour les sous-pages (sans changer le HTML) ——— */
.page-hero.case-hero {
  text-align: center;
  padding: 80px 20px 40px;
  position: relative;
  z-index: 1;
}

/* On transforme titre + sous-titre en "pastilles" lisibles */
.page-hero.case-hero h1,
.page-hero.case-hero p:first-of-type {
  display: inline-block;
  background: rgba(47,58,74,0.85);
  color: #fff;
  padding: 12px 16px;
  margin: 6px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  backdrop-filter: saturate(1.05) blur(2px);
}

/* Titre un peu plus gros que le sous-titre */
.page-hero.case-hero h1 { font-size: 40px; }
.page-hero.case-hero p:first-of-type { font-size: 18px; color:#e5e7eb; }
@media (max-width: 900px){
  .page-hero.case-hero h1 { font-size: clamp(28px, 7vw, 36px); }
  .page-hero.case-hero p:first-of-type { font-size: 16px; }
}
/* ——— HERO lisible pour les sous-pages (sans changer le HTML) ——— */
.page-hero.case-hero {
  text-align: center;
  padding: 80px 20px 40px;
  position: relative;
  z-index: 1;
}

/* On transforme titre + sous-titre en "pastilles" lisibles */
.page-hero.case-hero h1,
.page-hero.case-hero p:first-of-type {
  display: inline-block;
  background: rgba(47,58,74,0.85);
  color: #fff;
  padding: 12px 16px;
  margin: 6px 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.25);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  backdrop-filter: saturate(1.05) blur(2px);
}

/* Titre un peu plus gros que le sous-titre */
.page-hero.case-hero h1 { font-size: 40px; }
.page-hero.case-hero p:first-of-type { font-size: 18px; color:#e5e7eb; }
@media (max-width: 900px){
  .page-hero.case-hero h1 { font-size: clamp(28px, 7vw, 36px); }
  .page-hero.case-hero p:first-of-type { font-size: 16px; }
}