/* ==========================================================================
   Raphaëlle Beaufils — Psychologue clinicienne
   Direction : éditorial chaleureux et sobre (ivoire + bleu canard profond),
   vagues organiques, images en arche, cartes teintées, illustrations au trait.
   Palette : bleu canard / bleu profond (comme les fauteuils du cabinet)
   + vert kaki et sable en accents secondaires, sur fond ivoire.
   Typo (locale, dossier typo/) : Commissioner uniquement (titres + texte),
   pas de police cursive, pas de sur-titres (hors label « Programme de groupe »).
   ========================================================================== */

/* ---- Polices locales ---- */
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-ExtraLight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commissioner";
  src: url("typo/Commissioner-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Couleurs */
  --bg: #f7f3ec;            /* fond de page : ivoire chaud */
  --cream: #ece6db;         /* crème d'origine : aplats */
  --cream-soft: #f1ebe0;    /* sections alternées */
  --ink: #1e2c33;           /* texte : bleu-nuit très foncé */
  --ink-soft: #55666d;      /* texte secondaire */
  --blue: #265f72;          /* bleu canard : boutons, prix, titres forts */
  --blue-deep: #183d4b;     /* bleu profond (fauteuils du cabinet) : aplats, footer */
  --blue-bright: #2a7d8c;   /* accent : liens, mots accentués des titres */
  --blue-tint: #e2eef0;     /* fond léger bleu */
  --khaki: #e3e6d2;         /* vert kaki clair : cartes, respiration */
  --khaki-deep: #5a6238;    /* texte sur kaki */
  --sand: #ebdfc8;          /* sable chaud : bandeau CTA, cartes */
  --sand-soft: #f4ecdc;     /* sable très léger */
  --line: #e0d9cb;          /* filets */

  --font-display: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Commissioner", "Helvetica Neue", Arial, sans-serif;

  --radius: 20px;
  --radius-arch: 260px 260px 22px 22px;
  --shadow: 0 2px 8px rgba(24, 61, 75, 0.06), 0 14px 36px rgba(24, 61, 75, 0.08);

  /* Vague organique — remplie de la couleur du fond de page (#f7f3ec) */
  --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'><path d='M0,40 C90,18 190,54 300,44 C410,34 490,8 610,20 C730,32 800,58 920,50 C1040,42 1120,16 1240,22 C1330,27 1390,44 1440,36 L1440,64 L0,64 Z' fill='%23f7f3ec'/></svg>");
  --wave-h: 64px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); letter-spacing: -0.02em; }
h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; }

/* Mots accentués dans les titres : bold teinté, même typo */
h1 em, h2 em, h3 em {
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue-bright);
}

p { margin: 0 0 1em; }

a { color: var(--blue-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: 1140px; margin-inline: auto; padding-inline: 24px; }
.narrow { max-width: 740px; }

.section { padding-block: 80px; }
.section.alt { background: var(--cream-soft); }

/* Sur-titre : petit label sobre en capitales (utilisé uniquement
   pour « Programme de groupe » sur la page MBCT) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 14px;
}

.lead { font-size: 1.15rem; color: var(--ink-soft); }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 236, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Le header occupe (presque) toute la largeur de l'écran,
   indépendamment de la trame centrée du contenu */
.site-header .container { max-width: 1560px; padding-inline: 32px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
}
.brand { text-decoration: none; color: var(--ink); line-height: 1.2; }
.brand strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--blue-deep);
}
.brand span { font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; }

.nav { display: flex; align-items: center; }
.nav > ul { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.sub { list-style: none; margin: 0; }
.nav a {
  display: block;
  padding: 8px 13px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--blue-tint); color: var(--blue-deep); }
.nav a[aria-current="page"] { color: var(--blue-bright); }

.has-sub { position: relative; }
.has-sub > a::after { content: " ▾"; font-size: 0.7em; }
.sub {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  flex-direction: column;
  gap: 0;
}
/* Pont invisible : couvre l'écart entre le lien et le sous-menu pour que
   la souris puisse descendre sans que le menu se referme */
.sub::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
.sub li { width: 100%; }
.sub a { border-radius: 8px; white-space: normal; }
.has-sub:hover .sub,
.has-sub.open .sub,
.has-sub:focus-within .sub { display: flex; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-ghost { border-color: var(--blue); color: var(--blue); }
.btn-ghost:hover { background: var(--blue-tint); color: var(--blue-deep); }
.btn-light { background: #fffdf9; color: var(--blue-deep); }
.btn-light:hover { background: #fff; color: var(--blue-deep); }

.photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
figure { margin: 0; }
figcaption { font-size: 0.85rem; color: var(--ink-soft); margin-top: 12px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 42px;
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
}
.burger,
.burger::before,
.burger::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-deep);
  transition: transform 0.2s ease, background 0.2s ease;
}
.burger { position: relative; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- Motif anneaux (signature) ---- */
.rings {
  position: absolute;
  pointer-events: none;
  color: var(--blue-bright);
  opacity: 0.13;
}
.rings circle { stroke-dasharray: 1 7; stroke-linecap: round; }

/* ---- Hero (accueil) : texte à gauche, vague douce à droite ---- */
.hero { position: relative; overflow: hidden; padding-block: 96px 88px; }

/* Vague bleu profond dans l'angle supérieur droit (sous le header, contre le
   bord droit de l'écran). Son bord intérieur descend en diagonale avec des
   ondulations douces, à peine plus marquées que les vagues horizontales
   des sections (--wave). */
.hero-wave {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 70%;
  color: var(--blue-deep);
  pointer-events: none;
}
/* Bloc texte ferré à gauche, mais décalé vers le centre de la page */
.hero-text {
  position: relative;
  z-index: 1;
  max-width: min(640px, 54%);
  margin-left: clamp(0px, 8vw, 128px);
}
/* Titre sur trois lignes courtes : il reste à l'écart de la vague */
.hero-text h1 { max-width: 14em; }
.hero-text p { max-width: 60ch; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.hero h1 { margin-bottom: 0.4em; }
.hero .subtitle {
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--blue);
  margin-bottom: 1.2em;
}

/* Badges de qualification : mini-illustrations en icône */
.hero-badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 1.4em;
}
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 18px 6px 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-deep);
}
.hero-badges img {
  height: 34px;
  width: 34px;
  object-fit: contain;
  background: var(--blue-tint);
  border-radius: 50%;
  padding: 4px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Portraits et images des sections profondes : cadre en arche */
.hero .ph-portrait,
.hero .photo,
.photo-arch,
.section-deep .photo,
.section-deep .ph {
  border-radius: var(--radius-arch);
}

/* ---- Placeholder photo ---- */
.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 42%,
      transparent 0 54px, rgba(38, 95, 114, 0.12) 54px 55.5px,
      transparent 55.5px 88px, rgba(38, 95, 114, 0.10) 88px 89.5px,
      transparent 89.5px 126px, rgba(38, 95, 114, 0.08) 126px 127.5px,
      transparent 127.5px 170px, rgba(38, 95, 114, 0.06) 170px 171.5px,
      transparent 171.5px),
    var(--cream);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: 1px solid var(--line);
}
.ph::after {
  content: attr(data-label);
  margin: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.ph-portrait { aspect-ratio: 4 / 5; }
.ph-landscape { aspect-ratio: 16 / 10; }
.ph-wide { aspect-ratio: 21 / 9; }

/* ---- Section profonde (aplat bleu profond, bords en vague) ---- */
.section-deep {
  position: relative;
  background: var(--blue-deep);
  color: var(--cream);
  padding-block: calc(80px + var(--wave-h));
}
.section-deep::before,
.section-deep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: var(--wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
.section-deep::before { top: 0; transform: scaleY(-1); }
.section-deep::after { bottom: 0; }

.section-deep h1, .section-deep h2, .section-deep h3 { color: var(--cream); }
.section-deep h1 em, .section-deep h2 em, .section-deep h3 em { color: var(--sand); }
.section-deep p { color: rgba(240, 232, 220, 0.85); }
.section-deep a { color: var(--sand); }
.section-deep a:hover { color: #fff; }
.section-deep figcaption { color: rgba(240, 232, 220, 0.65); }
.section-deep .btn-ghost { border-color: var(--cream); color: var(--cream); }
.section-deep .btn-ghost:hover { background: rgba(240, 232, 220, 0.12); color: #fff; }
.section-deep .btn-primary { background: var(--sand); color: var(--blue-deep); }
.section-deep .btn-primary:hover { background: #fff; color: var(--blue-deep); }
.section-deep .rings { color: var(--sand); opacity: 0.15; }

/* ---- Cartes accompagnements : teintes variées ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: var(--ink);
}
.card-illus {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 20px;
}
/* Sur la carte bleu profond, le trait bleu serait invisible :
   on pose l'illustration sur une pastille ivoire organique */
.cards .card:nth-child(1) .card-illus {
  background: var(--bg);
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  padding: 8px 20px;
}

.card h3 {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--blue-deep);
  margin-bottom: 0.45em;
}
.card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
/* Titres sur deux lignes (« Accompagnement de couple ») : on réserve la hauteur
   pour que les textes des cartes restent alignés entre eux */
@media (min-width: 901px) {
  .cards .card h3 { min-height: 2.28em; }
}
.card .card-more {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--blue-bright);
}

/* Variantes de teinte, dans l'esprit des inspirations */
.cards .card:nth-child(1) { background: var(--blue-deep); border-color: var(--blue-deep); }
.cards .card:nth-child(1) h3 { color: #fff; }
.cards .card:nth-child(1) p { color: rgba(240, 232, 220, 0.8); }
.cards .card:nth-child(1) .card-more { color: var(--sand); }
.cards .card:nth-child(2) { background: var(--khaki); border-color: var(--khaki); }
.cards .card:nth-child(2) h3 { color: var(--khaki-deep); }
.cards .card:nth-child(2) .card-more { color: var(--khaki-deep); }
.cards .card:nth-child(3) { background: var(--sand-soft); border-color: var(--sand-soft); }

/* ---- Listes à puces (anneaux) ---- */
.ring-list { list-style: none; padding: 0; margin: 0 0 1.2em; }
.ring-list li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.ring-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--blue-bright);
  border-radius: 50%;
}

/* ---- Citations : centrées, comme un temps de respiration ---- */
.pullquote {
  position: relative;
  margin: 2.6em auto;
  padding: 0 12px;
  border: none;
  max-width: 36ch;
  text-align: center;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  color: var(--blue-deep);
}
.pullquote::before {
  content: "“";
  display: block;
  font-size: 3rem;
  line-height: 0.6;
  margin-bottom: 0.25em;
  color: var(--blue-bright);
  opacity: 0.55;
}
.pullquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-bright);
}

/* ---- En-tête de page intérieure ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: 72px calc(56px + var(--wave-h));
  background: var(--cream-soft);
}
.page-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: var(--wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { max-width: 62ch; margin-bottom: 0; }

/* Illustration d'en-tête : posée à droite du titre */
.page-hero-illus {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  height: 200px;
  width: auto;
  pointer-events: none;
}
@media (max-width: 1060px) {
  .page-hero-illus { display: none; }
}

/* ---- Bloc infos pratiques ---- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.info-card {
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.info-card h3 { color: var(--blue-deep); font-size: 1.15rem; }
.info-card p:last-child, .info-card ul:last-child { margin-bottom: 0; }

/* Variantes teintées (page Contact) */
.info-card--khaki { background: var(--khaki); border-color: var(--khaki); }
.info-card--khaki h3 { color: var(--khaki-deep); }
.info-card--deep { background: var(--blue-deep); border-color: var(--blue-deep); color: rgba(240, 232, 220, 0.85); }
.info-card--deep h3 { color: var(--sand); }
.info-card--deep a { color: #fff; }
.info-card--sand { background: var(--sand-soft); border-color: var(--sand-soft); }
.tel-big {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.tel-big:hover { text-decoration: underline; }

/* Carte Google Maps intégrée */
.map-embed {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---- Prochaine session MBCT : bloc pleine largeur, calendrier lisible ---- */
.session-block { margin-top: 48px; }
.session-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.session-side { display: grid; gap: 18px; grid-auto-rows: 1fr; }
.session-card { padding: 34px 32px; }
.session-card h3 { font-size: 1.4rem; margin-bottom: 0.35em; }
.session-lead { color: var(--ink-soft); margin-bottom: 1.4em; }
.schedule { margin: 0 0 1.4em; padding: 0; }
.schedule > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 8px 16px;
  padding-block: 10px;
  border-top: 1px dashed var(--line);
}
.schedule > div:last-child { border-bottom: 1px dashed var(--line); }
.schedule dt { font-weight: 600; color: var(--blue-deep); }
.schedule dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 8px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-deep);
  font-weight: 700;
  font-size: 0.95rem;
}
.day--special { background: var(--sand); }
.session-place { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }
.session-side .info-card p { margin-bottom: 0.6em; }
.session-side .info-card p:last-child { margin-bottom: 0; }

.pricing { list-style: none; padding: 0; margin: 0; }
.pricing li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 10px;
  border-bottom: 1px dashed var(--line);
}
.pricing li:last-child { border-bottom: none; }
.pricing .price { font-size: 1rem; font-weight: 600; color: var(--blue); white-space: nowrap; }
.pricing .note { display: block; font-size: 0.85rem; color: var(--ink-soft); }

/* ---- FAQ ---- */
.faq { margin-top: 24px; }
.faq details {
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--blue-deep);
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--blue-bright);
}
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 20px 18px; color: var(--ink-soft); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---- Bandeau CTA : sable chaleureux, illustration du service à droite ---- */
.cta-band {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 6%, rgba(227, 230, 210, 0.75) 0 130px, transparent 131px),
    radial-gradient(circle at 3% 102%, rgba(247, 243, 236, 0.6) 0 110px, transparent 111px),
    var(--sand);
  color: var(--blue-deep);
  border-radius: 32px;
  padding: 56px 360px 56px 56px;
  text-align: left;
}
.cta-band h2 { color: var(--blue-deep); }
.cta-band p { color: rgba(24, 61, 75, 0.78); max-width: 52ch; }
.cta-band .btn { margin-top: 14px; }
.cta-band .btn + .btn { margin-left: 8px; }
.cta-band .btn-light { background: var(--blue-deep); color: var(--cream); }
.cta-band .btn-light:hover { background: var(--blue); color: #fff; }
.cta-band .rings { opacity: 0.22; color: var(--blue); }
.cta-illus {
  position: absolute;
  right: 60px;
  top: 50%;
  transform: translateY(-50%);
  height: 200px;
  width: auto;
  pointer-events: none;
}

/* ---- Mentions légales ---- */
.legal h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 2.2em; }
.legal h2:first-of-type { margin-top: 0; }
.legal-date { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 1.6em; }
.legal-id {
  margin: 0 0 1.4em;
  padding: 10px 26px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal-id > div {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 4px 20px;
  padding-block: 11px;
  border-bottom: 1px dashed var(--line);
}
.legal-id > div:last-child { border-bottom: none; }
.legal-id dt { font-weight: 600; color: var(--blue-deep); }
.legal-id dd { margin: 0; }
@media (max-width: 600px) {
  .legal-id { padding-inline: 20px; }
  .legal-id > div { grid-template-columns: 1fr; gap: 2px; }
  .schedule > div { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Navigation croisée bas de page ---- */
.next-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* ---- Footer : aplat bleu profond, bord en vague ---- */
.site-footer {
  position: relative;
  background: var(--blue-deep);
  color: rgba(240, 232, 220, 0.8);
  margin-top: 88px;
  padding-block: calc(40px + var(--wave-h)) 32px;
  font-size: 0.93rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: var(--wave) center / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.site-footer h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.9em;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: rgba(240, 232, 220, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid rgba(240, 232, 220, 0.2);
  padding-top: 20px;
  font-size: 0.82rem;
  color: rgba(240, 232, 220, 0.6);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  :root { --wave-h: 42px; }

  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding-block: 112px 56px; }
  .hero-wave { width: clamp(128px, 40vw, 340px); height: auto; }
  .hero-text { max-width: none; margin-left: 0; }
  .hero .ph-portrait, .portrait { max-width: 420px; }

  /* Typographie allégée sur mobile : titres plus petits, jamais tronqués */
  h1 { font-size: clamp(1.5rem, 6.8vw, 2.1rem); }
  .hero p { font-size: 0.98rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }

  .nav-toggle { display: inline-flex; }

  /* Sous-titre du logo sur deux lignes propres, jamais tronqué */
  .brand-dot { display: none; }
  .brand-place { display: block; white-space: nowrap; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 12px 24px 20px;
  }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: 11px 10px; white-space: normal; }
  .sub {
    display: flex;
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0 18px;
    min-width: 0;
  }
  .has-sub > a::after { content: ""; }

  .section { padding-block: 56px; }
  .session-grid { grid-template-columns: 1fr; }
  .session-side { grid-auto-rows: auto; }
  .session-card { padding: 28px 24px; }
  .section-deep { padding-block: calc(56px + var(--wave-h)); }
  .page-hero { padding-block: 52px calc(44px + var(--wave-h)); }
  .cta-band { padding: 44px 28px; text-align: center; }
  .cta-band p { margin-inline: auto; }
  .cta-illus { position: static; transform: none; height: 130px; margin: 0 auto 18px; }
  .site-footer { margin-top: 64px; }
}