/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #1A1A1A;
  background: #F7F4EF;
  overflow-x: hidden;
}

/* ─── PALETTE ─── */
:root {
  --green-deep:   #0A4D3C;
  --green-mid:    #1D8C68;
  --green-light:  #D6EFE6;
  --green-pale:   #EEF8F4;
  --sand:         #F7F4EF;
  --sand-dark:    #EDE9E2;
  --ink:          #1A1A1A;
  --ink-soft:     #4A4A4A;
  --ink-mute:     #7A7A7A;
  --line:         rgba(0,0,0,0.1);
  --gold:         #B07D2A;
  --gold-pale:    #F5EDDB;
}

/* ─── PAGES ─── */
.page { display: none; }
.page.active { display: block; }

/* ─── NAVBAR ─── */
nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  height: 60px;
  background: rgba(247,244,239,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  text-decoration: none; color: inherit;
}
.logo-mark {
  height: 36px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
}
.logo-text {
  font-size: 14px; font-weight: 500; color: var(--ink);
  line-height: 1.2;
}
.logo-text span { display: block; font-size: 11px; color: var(--ink-mute); font-weight: 400; }
.nav-links {
  display: flex; align-items: center; gap: 4px;
}
.nav-links a {
  display: inline-block; text-decoration: none;
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; color: var(--ink-soft);
  padding: 6px 12px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.nav-links a:hover, .nav-links a.active-link {
  background: var(--green-pale); color: var(--green-deep); font-weight: 500;
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  display: flex; gap: 2px; background: var(--sand-dark); border-radius: 6px; padding: 2px;
}
.lang-toggle button {
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-family: 'DM Sans', sans-serif;
  padding: 3px 9px; border-radius: 4px; color: var(--ink-mute);
  font-weight: 500; transition: all .15s;
}
.lang-toggle button.active {
  background: #fff; color: var(--green-deep);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.btn-nav {
  display: inline-block; text-decoration: none;
  padding: 8px 18px;
  background: var(--green-deep);
  color: #fff;
  border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s;
}
.btn-nav:hover { background: var(--green-mid); }

/* ─── BUTTONS ─── */
.btn-primary {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px;
  background: var(--green-deep); color: #fff;
  border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: background .15s;
}
.btn-primary:hover { background: var(--green-mid); }
.btn-outline {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 24px;
  background: transparent; color: var(--green-deep);
  border: 1.5px solid var(--green-mid); border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.btn-outline:hover { background: var(--green-pale); }

/* ─── EYEBROW ─── */
.eyebrow {
  display: inline-block;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--green-mid);
  background: var(--green-pale);
  border: 1px solid var(--green-light);
  border-radius: 20px; padding: 4px 14px;
  margin-bottom: 14px;
}

/* ─── SERIF DISPLAY ─── */
h1, h2, .serif { font-family: 'DM Serif Display', serif; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.15; color: var(--green-deep); font-weight: 400; }
h2 { font-size: clamp(24px, 3.5vw, 36px); line-height: 1.2; color: var(--green-deep); font-weight: 400; }
h3 { font-size: 17px; font-weight: 500; color: var(--ink); }
h4 { font-size: 14px; font-weight: 600; color: var(--ink); }

/* ─── SECTION LAYOUT ─── */
.section { padding: 72px 40px; max-width: 1080px; margin: 0 auto; }
.section-center { text-align: center; }
.section-center p.lead { max-width: 540px; margin: 0 auto; }
.section-divider { height: 1px; background: var(--line); max-width: 1080px; margin: 0 auto; }
p.lead { font-size: 16px; color: var(--ink-soft); margin-top: 12px; }

/* ─── TAG ─── */
.tag {
  display: inline-block; font-size: 11px; font-weight: 500;
  padding: 3px 10px; border-radius: 4px; margin-right: 4px; margin-top: 6px;
}
.tag-green { background: #D6EFE6; color: #0A4D3C; }
.tag-blue  { background: #DDEAF9; color: #0C3D7A; }
.tag-gold  { background: #F5EDDB; color: #7A5415; }

/* ═══════════════════════════
   PAGE 1 — ACCUEIL
═══════════════════════════ */
/* hero */
/* Photo de fond recouverte du dégradé vert de la marque : l'image donne
   l'ambiance, le voile garantit le contraste du texte. Le vignettage
   radial assombrit en plus la zone centrale, là où se pose le titre.
   La 1re déclaration (JPEG) sert de repli aux navigateurs sans image-set. */
.hero {
  background-color: var(--green-deep);
  background-image:
    radial-gradient(ellipse 68% 62% at 50% 48%, rgba(3,38,30,.62) 0%, rgba(3,38,30,0) 75%),
    linear-gradient(160deg, rgba(10,77,60,.88) 0%, rgba(22,95,72,.83) 50%, rgba(46,143,107,.75) 100%),
    url('/hero-bg.jpg');
  background-image:
    radial-gradient(ellipse 68% 62% at 50% 48%, rgba(3,38,30,.62) 0%, rgba(3,38,30,0) 75%),
    linear-gradient(160deg, rgba(10,77,60,.88) 0%, rgba(22,95,72,.83) 50%, rgba(46,143,107,.75) 100%),
    image-set(url('/hero-bg.webp') type('image/webp'), url('/hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center 32%;
  background-repeat: no-repeat;
  padding: 90px 40px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero h1 { color: #fff; max-width: 620px; margin: 0 auto 16px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero h1 em { font-style: italic; color: #7DCFB0; }
.hero .lead { color: rgba(255,255,255,.88); max-width: 420px; margin: 0 auto 32px; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-hero-white {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: #fff; color: var(--green-deep);
  border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: opacity .15s;
}
.btn-hero-white:hover { opacity: .9; }
.btn-hero-outline {
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  background: transparent; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14.5px; font-weight: 500;
  cursor: pointer; transition: border-color .15s;
}
.btn-hero-outline:hover { border-color: rgba(255,255,255,.8); }

/* stats bar */
.stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.stat-item { padding: 24px 16px; text-align: center; border-right: 1px solid var(--line); }
.stat-item:last-child { border-right: none; }
.stat-num { font-family: 'DM Serif Display', serif; font-size: 36px; color: var(--green-mid); line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--ink-mute); margin-top: 4px; }

/* programmes cards */
.prog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.prog-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 28px;
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
}
.prog-card:hover { box-shadow: 0 8px 32px rgba(10,77,60,.1); transform: translateY(-2px); }
.prog-card-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.prog-card h3 { margin-bottom: 6px; }
.prog-card p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }

/* steps */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; position: relative; }
.steps-grid::before {
  content: '';
  position: absolute;
  top: 20px; left: 10%; right: 10%;
  height: 1px; background: var(--green-light);
}
.step-item { text-align: center; padding: 0 16px; position: relative; }
.step-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-deep); color: #fff;
  font-family: 'DM Serif Display', serif;
  font-size: 18px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px; position: relative; z-index: 1;
}
.step-item h4 { font-size: 14px; margin-bottom: 6px; }
.step-item p { font-size: 13px; color: var(--ink-mute); }

/* testimonials */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.testi-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 24px;
}
.testi-stars { color: var(--gold); font-size: 13px; margin-bottom: 10px; }
.testi-quote { font-size: 14px; color: var(--ink-soft); font-style: italic; line-height: 1.7; margin-bottom: 16px; }
.testi-author { display: flex; align-items: center; gap: 10px; }
/* Monogramme : les initiales sont composées dans la police de titre de la
   marque et cerclées d'un anneau, pour se lire comme un choix graphique
   plutôt que comme une photo manquante. Déposer une <img> à l'intérieur
   suffit à afficher un vrai portrait, sans rien changer d'autre. */
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 14px; font-weight: 400; letter-spacing: .03em;
  flex-shrink: 0; position: relative; overflow: hidden;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px rgba(10,77,60,.12);
}
.avatar img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.testi-name { font-size: 14px; font-weight: 500; }
.testi-role { font-size: 12px; color: var(--ink-mute); }

/* CTA band */
.cta-band {
  background: var(--green-deep);
  padding: 64px 40px; text-align: center;
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band p { color: rgba(255,255,255,.7); max-width: 440px; margin: 0 auto 28px; }

/* ═══════════════════════════
   PAGE 2 — PROGRAMMES
═══════════════════════════ */
.prog-hero {
  background: var(--green-pale);
  padding: 64px 40px 52px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.prog-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.prog-detail-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.prog-detail-header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.prog-detail-body { padding: 24px 28px; }
.prog-detail-body ul { padding-left: 0; list-style: none; }
.prog-detail-body ul li {
  font-size: 14px; color: var(--ink-soft);
  padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.05);
  display: flex; align-items: flex-start; gap: 8px;
}
.prog-detail-body ul li::before { content: '→'; color: var(--green-mid); flex-shrink: 0; }
.prog-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.prog-meta-item {
  font-size: 12px; font-weight: 500;
  padding: 4px 10px; background: var(--sand-dark); border-radius: 6px;
  color: var(--ink-soft);
}
.prog-cta {
  text-decoration: none;
  display: block; width: 100%; margin-top: 20px;
  padding: 11px; background: var(--green-deep); color: #fff;
  border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .15s; text-align: center;
}
.prog-cta:hover { background: var(--green-mid); }

/* planning */
.planning-table {
  width: 100%; border-collapse: collapse; margin-top: 32px;
  font-size: 14px;
}
.planning-table th {
  text-align: left; padding: 10px 16px;
  background: var(--green-deep); color: #fff;
  font-weight: 500; font-size: 13px;
}
.planning-table th:first-child { border-radius: 8px 0 0 0; }
.planning-table th:last-child  { border-radius: 0 8px 0 0; }
.planning-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.planning-table tr:last-child td { border-bottom: none; }
.planning-table tr:hover td { background: var(--green-pale); }
.badge-open  { background: #D6EFE6; color: #0A4D3C; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.badge-full  { background: #FFE8E8; color: #8B1A1A; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }

/* ═══════════════════════════
   PAGE 3 — ÉQUIPE
═══════════════════════════ */
.team-hero {
  background: var(--green-deep);
  padding: 64px 40px 52px;
  text-align: center;
}
.team-hero h1 { color: #fff; }
.team-hero .lead { color: rgba(255,255,255,.7); }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.team-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
  transition: box-shadow .2s;
}
.team-card:hover { box-shadow: 0 8px 32px rgba(10,77,60,.1); }
.team-avatar-wrap {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.team-avatar-big {
  width: 80px; height: 80px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Serif Display', serif;
  font-size: 28px; font-weight: 400;
}
.team-body { padding: 0 24px 24px; }
.team-role { font-size: 12px; color: var(--green-mid); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.team-card h3 { margin-bottom: 8px; }
.team-card p { font-size: 13px; color: var(--ink-soft); }
.team-quote {
  background: var(--green-pale); border-left: 3px solid var(--green-mid);
  padding: 12px 16px; margin-top: 14px; border-radius: 0 6px 6px 0;
  font-size: 13px; font-style: italic; color: var(--ink-soft);
}
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.value-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 24px;
  text-align: center;
}
.value-icon { font-size: 28px; margin-bottom: 12px; }
.value-card h4 { margin-bottom: 6px; }
.value-card p { font-size: 13px; color: var(--ink-soft); }
.partenaires { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.partner-badge {
  padding: 10px 20px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--ink-soft);
}

/* ═══════════════════════════
   PAGE 4 — TÉMOIGNAGES
═══════════════════════════ */
.testi-hero {
  background: var(--sand-dark); padding: 64px 40px 52px; text-align: center;
  border-bottom: 1px solid var(--line);
}
.testi-big-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.testi-big-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 32px;
}
.testi-big-card .testi-stars { font-size: 16px; }
.testi-big-card .testi-quote { font-size: 15px; }
.testi-detail { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.testi-detail-item { display: flex; gap: 8px; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }
.testi-detail-item strong { color: var(--ink); font-weight: 500; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.stat-card {
  background: var(--green-deep); border-radius: 14px;
  padding: 24px; text-align: center;
}
.stat-card .stat-num { color: #7DCFB0; font-size: 40px; }
.stat-card .stat-lbl { color: rgba(255,255,255,.7); }

/* ═══════════════════════════
   PAGE 5 — CONTACT
═══════════════════════════ */
.contact-hero {
  background: var(--green-pale); padding: 64px 40px 52px; text-align: center;
  border-bottom: 1px solid var(--line);
}
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; margin-top: 48px; }
.contact-info h3 { margin-bottom: 6px; font-size: 20px; }
.contact-info p { color: var(--ink-soft); margin-bottom: 32px; }
.contact-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.contact-icon {
  width: 38px; height: 38px; border-radius: 8px;
  background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.contact-label { font-size: 12px; color: var(--ink-mute); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.contact-val { font-size: 14px; color: var(--ink); }
.session-box {
  background: var(--green-deep); border-radius: 14px; padding: 24px; margin-top: 24px;
}
.session-box h4 { color: #fff; margin-bottom: 12px; }
.session-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.session-row:last-child { border-bottom: none; }
.session-row span { color: rgba(255,255,255,.8); font-size: 14px; }
.badge-s-open  { background: #7DCFB0; color: #0A4D3C; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.badge-s-close { background: rgba(255,255,255,.15); color: rgba(255,255,255,.6); padding: 2px 9px; border-radius: 4px; font-size: 12px; }

/* FORM */
/* scroll-margin-top : quand on arrive via /contact#formulaire, le nav
   sticky (60px) ne doit pas recouvrir le haut du formulaire. */
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px; scroll-margin-top: 80px; }
.contact-form h3 { margin-bottom: 4px; }
.contact-form > p { font-size: 14px; color: var(--ink-mute); margin-bottom: 24px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; color: var(--ink);
  background: var(--sand);
  transition: border-color .15s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--green-mid); background: #fff; }
.form-group textarea { height: 100px; resize: vertical; }
.form-group input.input-error,
.form-group select.input-error,
.form-group textarea.input-error { border-color: #c0392b; background: #fff5f5; }
.field-error { font-size: 11px; color: #c0392b; font-weight: 500; display: none; }
.field-error.visible { display: block; }
.form-submit {
  width: 100%; padding: 13px;
  background: var(--green-deep); color: #fff;
  border: none; border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 500; cursor: pointer;
  transition: background .15s; margin-top: 4px;
}
.form-submit:hover { background: var(--green-mid); }
.form-note { font-size: 12px; color: var(--ink-mute); text-align: center; margin-top: 10px; }

/* ─── FOOTER ─── */
footer {
  background: var(--ink); color: rgba(255,255,255,.7);
  padding: 48px 40px 28px;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 32px; margin-bottom: 40px;
}
.footer-brand h3 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.footer-brand p { font-size: 13px; line-height: 1.7; }
.footer-col h4 { color: #fff; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.footer-col a {
  display: block; font-size: 13px; color: rgba(255,255,255,.6);
  text-decoration: none; padding: 3px 0;
  transition: color .15s;
}
.footer-col a:hover { color: #7DCFB0; }
.footer-wa {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 12px; padding: 8px 16px;
  background: #25D366; color: #fff;
  border-radius: 8px; font-size: 13px; font-weight: 500; text-decoration: none;
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12px;
}

/* ─── TOAST ─── */
.toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--green-deep); color: #fff;
  padding: 14px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  transform: translateY(80px); opacity: 0;
  transition: all .3s; z-index: 999;
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ─── HAMBURGER ─── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 6px;
  transition: background .15s;
}
.hamburger:hover { background: var(--sand-dark); }
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: all .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ─── MOBILE DRAWER ─── */
.mobile-menu {
  display: none;
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
  background: rgba(247,244,239,0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
  flex-direction: column;
  padding: 16px;
  gap: 4px;
  overflow-y: auto;
  animation: slideDown .2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: block; text-decoration: none;
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 17px; font-weight: 500; color: var(--ink);
  text-align: left; padding: 14px 16px;
  border-radius: 10px; transition: background .15s, color .15s;
  width: 100%;
}
.mobile-menu a:hover { background: var(--green-pale); color: var(--green-deep); }
.mobile-menu .mobile-divider {
  height: 1px; background: var(--line); margin: 8px 4px;
}
.mobile-menu .btn-nav-mobile {
  background: var(--green-deep) !important; color: #fff !important;
  border-radius: 10px; padding: 15px 16px;
  font-size: 16px; font-weight: 600; margin-top: 4px;
  text-align: center !important;
}
.mobile-lang {
  display: flex; gap: 2px;
  background: var(--sand-dark); border-radius: 8px; padding: 3px;
  margin: 8px 4px 0; align-self: flex-start;
}
.mobile-lang button {
  font-size: 13px !important; font-weight: 600 !important;
  padding: 6px 16px !important; border-radius: 6px !important;
  color: var(--ink-mute) !important; background: none !important;
  width: auto !important;
}
.mobile-lang button.active {
  background: #fff !important; color: var(--green-deep) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}

/* ══════════════════════════════
   RESPONSIVE — TABLET (≤ 900px)
══════════════════════════════ */
@media (max-width: 900px) {
  /* Nav */
  .nav-links, .nav-right { display: none; }
  .hamburger { display: flex; }
  nav { padding: 0 20px; }

  /* Hero */
  .hero { padding: 64px 24px 56px; }

  /* Section padding */
  .section { padding: 52px 24px; }
  .prog-hero, .team-hero, .testi-hero, .contact-hero { padding: 52px 24px 44px; }
  .cta-band { padding: 52px 24px; }
  footer { padding: 48px 24px 28px; }

  /* Stats bar: 2×2 */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar .stat-item:nth-child(2) { border-right: none; }
  .stats-bar .stat-item:nth-child(3) { border-top: 1px solid var(--line); }
  .stats-bar .stat-item:nth-child(4) { border-top: 1px solid var(--line); border-right: none; }

  /* Grids → 2 col */
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .steps-grid::before { display: none; }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 2 col */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: span 2; }

  /* Contact grid */
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }

  /* Team: keep 2 col on tablet */
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════
   RESPONSIVE — MOBILE (≤ 600px)
══════════════════════════════ */
@media (max-width: 600px) {
  /* Typography */
  h1 { font-size: clamp(26px, 7vw, 34px); }
  h2 { font-size: clamp(22px, 5.5vw, 28px); }
  h3 { font-size: 16px; }
  p.lead { font-size: 15px; }

  /* Nav */
  nav { padding: 0 16px; }
  .logo-text span { display: none; }
  .logo-text { font-size: 13px; }

  /* Hero */
  .hero { padding: 52px 16px 44px; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-hero-white, .btn-hero-outline {
    justify-content: center; width: 100%; padding: 14px 20px;
  }

  /* Sections */
  .section { padding: 40px 16px; }
  .prog-hero, .team-hero, .testi-hero, .contact-hero { padding: 40px 16px 32px; }
  .cta-band { padding: 40px 16px; }
  footer { padding: 36px 16px 24px; }

  /* Stats bar → 2×2 */
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stat-num { font-size: 28px; }
  .stat-item { padding: 18px 12px; }

  /* All grids → 1 col */
  .prog-grid         { grid-template-columns: 1fr; }
  .prog-detail-grid  { grid-template-columns: 1fr; }
  .steps-grid        { grid-template-columns: 1fr; gap: 20px; }
  .testi-grid        { grid-template-columns: 1fr; }
  .testi-big-grid    { grid-template-columns: 1fr; }
  .team-grid         { grid-template-columns: 1fr; }
  .values-grid       { grid-template-columns: 1fr; }
  .stats-row         { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .contact-grid      { grid-template-columns: 1fr; gap: 24px; }
  .form-row          { grid-template-columns: 1fr; }
  .footer-top        { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand      { grid-column: span 1; }
  .footer-bottom     { flex-direction: column; gap: 8px; text-align: center; }

  /* Steps : restent centrées même en colonne unique (mobile), pour que le
     numéro et le texte de chaque étape (Inscription, Test de niveau,
     Formation, Mise en réseau) soient bien alignés au centre du bloc,
     comme sur desktop. */
  .step-item { text-align: center; align-items: center; }
  .step-num  { margin: 0 auto 16px; }

  /* Cards */
  .prog-card    { padding: 20px; }
  .testi-card   { padding: 20px; }
  .testi-big-card { padding: 20px; }
  .contact-form { padding: 20px; }
  .team-body    { padding: 0 18px 20px; }
  .stat-card    { padding: 18px 12px; }
  .stat-card .stat-num { font-size: 32px; }

  /* Table → scrollable */
  .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 8px; }
  .planning-table { min-width: 580px; font-size: 13px; }
  .planning-table th, .planning-table td { padding: 10px 12px; }

  /* Partner badges */
  .partenaires { gap: 8px; }
  .partner-badge { font-size: 12px; padding: 8px 12px; }

  /* Session box */
  .session-row { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Toast full-width */
  .toast { left: 12px; right: 12px; bottom: 12px; font-size: 13px; text-align: center; }

  /* CTA band button */
  .cta-band .btn-hero-white { width: 100%; justify-content: center; }
}

/* ═══════════════════════════
   BOUTON WHATSAPP FLOTTANT
═══════════════════════════ */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 18px 13px 15px;
  background: #25D366; color: #fff;
  border-radius: 999px; text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 6px 22px rgba(37,211,102,.4);
  transition: transform .18s, box-shadow .18s, background .18s;
}
.wa-float:hover { background: #1FBA59; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,.5); }
.wa-float svg { width: 24px; height: 24px; fill: #fff; flex-shrink: 0; }

/* Sur mobile, seule la pastille reste : elle ne doit pas masquer le contenu. */
@media (max-width: 600px) {
  .wa-float { right: 14px; bottom: 14px; padding: 14px; }
  .wa-float-txt { display: none; }
}

/* ═══════════════════════════
   BANDEAU D'URGENCE (places restantes)
═══════════════════════════ */
.urgence {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
  background: var(--gold-pale); border: 1px solid #E8DCC0;
  border-radius: 12px; padding: 13px 18px; margin-bottom: 22px;
  font-size: 14px; color: #6B4A12; text-align: center;
}
.urgence strong { color: #7A5415; font-weight: 600; }
.urgence .urgence-pastille {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #E8DCC0; border-radius: 999px;
  padding: 3px 12px; font-size: 13px; font-weight: 600; color: #7A5415;
}

/* ═══════════════════════════
   FAQ (accordéon natif <details>)
═══════════════════════════ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 10px; overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item[open] { box-shadow: 0 6px 24px rgba(10,77,60,.07); border-color: var(--green-light); }
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 18px 52px 18px 22px; position: relative;
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  transition: color .15s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--green-deep); }
/* Chevron dessiné en CSS : pivote à l'ouverture. */
.faq-item summary::after {
  content: ''; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--green-mid);
  border-bottom: 2px solid var(--green-mid);
  transform: rotate(45deg); transition: transform .2s;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-answer { padding: 0 22px 20px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.7; }
.faq-answer p + p { margin-top: 10px; }

.faq-cta {
  max-width: 760px; margin: 40px auto 0; text-align: center;
  background: var(--green-pale); border: 1px solid var(--green-light);
  border-radius: 14px; padding: 32px 24px;
}
.faq-cta h3 { font-size: 19px; color: var(--green-deep); margin-bottom: 6px; }
.faq-cta p { color: var(--ink-soft); font-size: 14.5px; }

/* ═══════════════════════════
   FORMULAIRE EN DEUX ÉTAPES
═══════════════════════════ */
.form-steps {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 22px;
}
.form-step-dot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-mute);
  transition: color .2s;
}
.form-step-dot span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sand-dark); color: var(--ink-mute);
  font-size: 12px; font-weight: 700;
  transition: background .2s, color .2s;
}
.form-step-dot.active { color: var(--green-deep); }
.form-step-dot.active span { background: var(--green-deep); color: #fff; }
.form-step-line { flex: 1; height: 2px; background: var(--sand-dark); border-radius: 2px; }

/* Les deux étapes cohabitent dans le DOM ; seule la visibilité change,
   pour que la soumission continue de lire tous les champs. */
.form-step { display: none; }
.form-step.active { display: block; }

.label-optionnel { color: var(--ink-mute); font-weight: 400; font-size: 11.5px; }

.form-retour {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  color: var(--ink-mute); padding: 8px;
  transition: color .15s;
}
.form-retour:hover { color: var(--green-deep); }

@media (max-width: 600px) {
  .form-step-dot { font-size: 11.5px; }
  .form-steps { gap: 7px; }
}

/* ═══════════════════════════
   PAGES LÉGALES
═══════════════════════════ */
.legal-contenu { max-width: 760px; }
.legal-contenu h2 {
  font-size: 21px; margin: 38px 0 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.legal-contenu h2:first-of-type { margin-top: 0; }
.legal-contenu p { color: var(--ink-soft); font-size: 14.8px; line-height: 1.75; margin-bottom: 12px; }
.legal-contenu ul { color: var(--ink-soft); font-size: 14.8px; line-height: 1.75; padding-left: 22px; margin-bottom: 14px; }
.legal-contenu li { margin-bottom: 6px; }
.legal-contenu a { color: var(--green-mid); }
.legal-contenu strong { color: var(--ink); font-weight: 600; }
.legal-contenu code {
  background: var(--sand-dark); border-radius: 4px;
  padding: 1px 6px; font-size: 13px;
}

/* Signale une information légale obligatoire encore absente : la mention
   doit sauter aux yeux plutôt que de passer pour un texte anodin. */
.a-completer {
  background: #FFF3E0; color: #B34700;
  border: 1px dashed #E8A76B; border-radius: 4px;
  padding: 1px 8px; font-size: 13.5px; font-style: italic;
}
.legal-alerte {
  background: #FFF8E6; border: 1px solid #F0D9A8;
  border-left: 4px solid #D89A2E;
  border-radius: 10px; padding: 16px 18px; margin-bottom: 30px;
  font-size: 14px; color: #6B4A12; line-height: 1.65;
}
.legal-alerte code { background: #fff; }

/* ═══════════════════════════
   ACCESSIBILITÉ AU CLAVIER
═══════════════════════════ */
/* :focus-visible ne s'active qu'à la navigation clavier : les utilisateurs
   à la souris ne voient pas d'anneau, ceux au clavier savent où ils sont. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--green-mid);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sur les fonds verts, l'anneau doit rester visible. */
.hero a:focus-visible,
.cta-band a:focus-visible,
.wa-float:focus-visible {
  outline-color: #fff;
}

/* Lien d'évitement : permet d'atteindre le contenu sans parcourir tout le
   menu au clavier ou au lecteur d'écran. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 400;
  background: var(--green-deep); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ═══════════════════════════
   APPARITION AU DÉFILEMENT
═══════════════════════════ */
.reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* Respect du réglage système « réduire les animations » : le contenu
   s'affiche immédiatement, sans mouvement ni défilement animé. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}