/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --sable:      #EEF0E6;
  --surface:    #F8F9F3;
  --photo-bg:   #DDE2D5;
  --encre:      #20291F;
  --encre-rgb:  32 41 31;
  --texte-sec:  #465548;
  --muted:      #60705F;
  --bordure:    #C9D1C3;
  --accent:     #45664C;
  --button-bg:  var(--accent);
  --lin:        #EEF0E6;
  --photo-placeholder-start: #DDE2D5;
  --photo-placeholder-end:   #C5CEBC;
  --section-alt-bg: color-mix(in srgb, var(--surface) 42%, transparent);

  --solar-sun:           #E0E2D3;
  --solar-planet:        #D1D7C7;
  --solar-planet-alt:    #C2CCBA;
  --solar-orbit:         #AFBDA9;
  --solar-texture-light: #D4D9CA;
  --solar-texture-dark:  #B2BEA9;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  --nav-h:      60px;
  --max-w:      1200px;
  --section-v:  clamp(5rem, 10vw, 8rem);

  --ease-luxe:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 220ms;
  --duration-med:  420ms;
  --duration-slow: 760ms;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background-color: var(--sable);
  color: var(--encre);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

/* ============================================================
   UTILITAIRES
   ============================================================ */
.container {
  width: min(var(--max-w), 100% - 3rem);
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--duration-slow) var(--ease-soft),
    transform var(--duration-slow) var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Étiquette de section (petite, uppercase, muted) */
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.section-eyebrow--accent {
  color: var(--accent);
}

/* ============================================================
   BOUTON
   Fond sombre, texte sable, pas de border-radius, uppercase
   ============================================================ */
.btn {
  display: inline-block;
  padding: 0.9em 2em;
  background: var(--button-bg);
  color: var(--sable);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 rgb(var(--encre-rgb) / 0);
  transition:
    background-color var(--duration-med) var(--ease-luxe),
    box-shadow var(--duration-med) var(--ease-luxe),
    opacity var(--duration-fast) ease,
    transform var(--duration-med) var(--ease-luxe);
}

.btn:hover,
.btn:focus-visible {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgb(var(--encre-rgb) / 0.12);
  outline: none;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: color-mix(in srgb, var(--sable) 92%, transparent);
  border-bottom: 0.5px solid var(--bordure);
  backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(var(--max-w), 100% - 3rem);
  margin-inline: auto;
}

.nav__brand {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--encre);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.2vw, 2.25rem);
}

.nav__links a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--texte-sec);
  transition: color var(--duration-fast) ease;
}

.nav__links a:hover { color: var(--encre); }

.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-med) var(--ease-luxe);
}

.nav__links a:not(.nav__cta):hover::after,
.nav__links a:not(.nav__cta):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__links .nav__cta {
  padding: 0.6rem 1rem;
  background: var(--button-bg);
  color: var(--sable);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    box-shadow var(--duration-med) var(--ease-luxe),
    opacity var(--duration-fast) ease,
    transform var(--duration-med) var(--ease-luxe);
}

.nav__links .nav__cta:hover,
.nav__links .nav__cta:focus-visible {
  color: var(--sable);
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgb(var(--encre-rgb) / 0.1);
  outline: none;
}

/* Burger, masqué sur desktop */
.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__burger:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 6px;
}

.nav__burger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--encre);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-med) var(--ease-luxe);
}

/* Menu mobile, positionné sous la nav fixe */
.nav__mobile {
  position: fixed;
  top: var(--nav-h);
  inset-inline: 0;
  z-index: 99;
  background: var(--sable);
  border-bottom: 0.5px solid var(--bordure);
  padding: 0.75rem 1.5rem 1.25rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity var(--duration-med) var(--ease-soft),
    transform var(--duration-med) var(--ease-soft);
  backdrop-filter: blur(12px);
}

.nav__mobile.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav__mobile-link {
  display: block;
  padding: 0.65rem 0;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--texte-sec);
  border-bottom: 0.5px solid var(--bordure);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    color var(--duration-fast) ease,
    opacity var(--duration-med) var(--ease-soft),
    transform var(--duration-med) var(--ease-soft);
}

.nav__mobile.is-open .nav__mobile-link {
  opacity: 1;
  transform: translateY(0);
}

.nav__mobile-link:last-child { border-bottom: none; }
.nav__mobile-link:hover      { color: var(--encre); }

.nav__mobile.is-open .nav__mobile-link:nth-child(2) { transition-delay: 30ms; }
.nav__mobile.is-open .nav__mobile-link:nth-child(3) { transition-delay: 60ms; }
.nav__mobile.is-open .nav__mobile-link:nth-child(4) { transition-delay: 90ms; }
.nav__mobile.is-open .nav__mobile-link:nth-child(5) { transition-delay: 120ms; }

.nav__mobile-link--cta {
  width: fit-content;
  margin-top: 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--button-bg);
  color: var(--sable);
  border-bottom: none;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav__mobile-link--cta:hover,
.nav__mobile-link--cta:focus-visible {
  color: var(--sable);
  opacity: 0.75;
  outline: none;
}


/* ============================================================
   CANVAS SYSTÈME SOLAIRE
   ============================================================ */
#solar-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 700ms var(--ease-soft);
}

/* Tout le contenu passe au-dessus du canvas */
main, footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   HERO : deux colonnes 50/50, plein écran
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100svh - var(--nav-h));
}

/* Colonne gauche, transparente pour laisser voir le canvas derrière */
.hero__left {
  display: flex;
  flex-direction: column;
  padding: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4.5rem);
  background: transparent;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.hero__name {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(5rem, 9vw, 88px);
  line-height: 0.9;
  color: var(--encre);
  margin-bottom: 1.75rem;
}

.hero__name-main {
  display: block;
}

.hero__name-brand {
  display: block;
  margin-top: 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--texte-sec);
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: 2.5rem;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero__discover {
  position: relative;
  display: inline-flex;
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--texte-sec);
  transition: color var(--duration-fast) ease;
}

.hero__discover:hover { color: var(--encre); }

.hero__discover::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.28;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-med) var(--ease-luxe);
}

.hero__discover:hover::after,
.hero__discover:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
  outline: none;
}

/* Stats, poussées en bas de la colonne */
.hero__stats {
  display: flex;
  gap: 2.5rem;
  margin-top: auto;
  padding-top: 2rem;
  border-top: 0.5px solid var(--bordure);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat__value {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--encre);
}

.stat__label {
  font-size: 0.68rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* Colonne droite, panneau photo */
.hero__right {
  position: relative;
  background: var(--photo-bg);
  overflow: hidden;
}

.hero__right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition:
    filter var(--duration-slow) var(--ease-soft),
    transform 1200ms var(--ease-soft);
}

.hero__right:hover img {
  transform: scale(1.012);
}

/* ============================================================
   ACCROCHE
   ============================================================ */
.accroche {
  padding-block: var(--section-v);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-top: 0.5px solid var(--bordure);
}

.accroche__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(300px, 0.72fr);
  gap: clamp(4rem, 8vw, 7rem);
  align-items: end;
  max-width: 1120px;
}

.accroche__main {
  min-width: 0;
}

.accroche__chapter {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.accroche__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--encre);
  max-width: 520px;
  margin-bottom: 1.5rem;
}

.accroche__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--texte-sec);
  margin-bottom: 0;
}

.accroche__symptomes {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 0.5px solid var(--bordure);
}

.accroche__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.accroche__liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.accroche__item {
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.accroche__marker {
  width: 22px;
  height: 1px;
  margin-top: 0.85em;
  background: color-mix(in srgb, var(--accent) 58%, transparent);
  flex-shrink: 0;
}

.accroche__item span:last-child {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--texte-sec);
}

/* ============================================================
   BÉNÉFICES
   ============================================================ */
.benefits {
  padding-block: var(--section-v);
  border-top: 0.5px solid var(--bordure);
}

.benefits__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--encre);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Grille 2 colonnes, bordures fines comme lignes de séparation */
.benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--bordure);
  border-left: 0.5px solid var(--bordure);
  margin-bottom: 3rem;
}

.benefit {
  padding: 1.75rem 2rem;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--texte-sec);
  line-height: 1.5;
  border-right: 0.5px solid var(--bordure);
  border-bottom: 0.5px solid var(--bordure);
}

/* Le 5e item (seul sur sa ligne) occupe toute la largeur */
.benefit:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.benefits__note {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--muted);
}

/* ============================================================
   DÉMARCHE : "Grâce à votre thème natal"
   ============================================================ */
.demarche {
  padding-block: var(--section-v);
  padding-top: clamp(1.5rem, 3vw, 2.75rem);
  border-top: none;
}

.demarche__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: clamp(4rem, 8vw, 7.5rem);
  align-items: center;
  max-width: 1120px;
}

.demarche__contenu {
  min-width: 0;
}

.demarche__titre {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.2;
  color: var(--encre);
  margin-bottom: 1.5rem;
}

.demarche__titre::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
}

.demarche__intro {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--texte-sec);
  margin-bottom: 2rem;
}

.demarche__grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 6vw, 4.5rem);
  border-top: 0.5px solid var(--bordure);
}

.demarche__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: flex-start;
  gap: 1rem;
  padding-block: 1.4rem;
  border-bottom: 0.5px solid var(--bordure);
  transition:
    border-color var(--duration-med) var(--ease-luxe),
    transform var(--duration-med) var(--ease-luxe);
}

.demarche__item:hover {
  border-bottom-color: color-mix(in srgb, var(--accent) 42%, var(--bordure));
  transform: translateX(2px);
}

.demarche__item--large {
  grid-column: 1 / -1;
}

.demarche__pastille {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}

.demarche__pastille svg {
  width: 22px;
  height: 22px;
  transition: transform var(--duration-med) var(--ease-luxe);
}

.demarche__item:hover .demarche__pastille svg {
  transform: translateY(-1px);
}

.demarche__label {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--encre);
  padding-top: 0.25rem;
}

.demarche__oeuvre {
  margin: 0;
}

.demarche__oeuvre-cadre {
  padding: clamp(0.85rem, 1.7vw, 1.35rem);
  background: var(--surface);
  border: 0.5px solid rgb(var(--encre-rgb) / 0.12);
  box-shadow: 0 22px 60px rgb(var(--encre-rgb) / 0.08);
  transition:
    box-shadow 900ms var(--ease-soft),
    transform 900ms var(--ease-soft);
}

.demarche__oeuvre-cadre:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 70px rgb(var(--encre-rgb) / 0.11);
}

.demarche__oeuvre img {
  width: 100%;
  height: auto;
}

.demarche__legende {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   LA CONSULTATION
   ============================================================ */
.seance {
  padding-block: var(--section-v);
  border-top: 0.5px solid var(--bordure);
}

.seance__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(4rem, 9vw, 8rem);
  align-items: start;
  max-width: 1120px;
}

.seance__content .section-eyebrow {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.seance__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--encre);
  max-width: 15ch;
  margin-bottom: 2rem;
}

.seance__title::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
}

.seance__text {
  display: grid;
  gap: 1.15rem;
  max-width: 610px;
}

.seance__text p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--texte-sec);
}

.seance__note {
  max-width: 560px;
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--muted);
}

.seance__aside {
  margin-top: clamp(5.75rem, 8vw, 7.25rem);
  border-top: 0.5px solid var(--encre);
}

.seance__fact {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: baseline;
  padding-block: 1.15rem;
  border-bottom: 0.5px solid var(--bordure);
}

.seance__fact dt,
.seance__info h3 {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.seance__fact dd {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--encre);
}

.seance__info {
  padding-block: 1.75rem;
  border-bottom: 0.5px solid var(--bordure);
}

.seance__info h3 {
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.seance__info p {
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--texte-sec);
}

.seance__fine-print {
  margin-top: 0.75rem;
  color: var(--muted) !important;
}

.seance__cta {
  margin-top: 1.5rem;
}

/* ============================================================
   MON PARCOURS
   ============================================================ */
.approche {
  padding-block: clamp(6rem, 11vw, 9rem);
  border-top: 0.5px solid var(--bordure);
  background: var(--section-alt-bg);
}

.approche__grid {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: clamp(4rem, 8vw, 7.5rem);
  align-items: center;
  max-width: 1120px;
}

.approche__col-gauche {
  position: relative;
}

.approche__photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--photo-placeholder-start) 0%,
    var(--photo-placeholder-end) 100%
  );
  box-shadow: 0 22px 60px rgb(var(--encre-rgb) / 0.08);
  transition: box-shadow 900ms var(--ease-soft);
}

.approche__photo-wrap:hover {
  box-shadow: 0 28px 70px rgb(var(--encre-rgb) / 0.11);
}

.approche__photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgb(var(--encre-rgb) / 0.08);
  pointer-events: none;
}

.approche__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition:
    filter var(--duration-slow) var(--ease-soft),
    transform 1200ms var(--ease-soft);
}

.approche__photo-wrap:hover .approche__photo {
  transform: scale(1.015);
}

.approche__encart {
  position: relative;
  width: calc(100% - 1.5rem);
  margin: -2.75rem 0 0 1.5rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border: 0.5px solid rgb(var(--encre-rgb) / 0.14);
  border-radius: 2px;
  padding: 1.4rem 1.5rem 1.3rem;
  box-shadow: 0 16px 42px rgb(var(--encre-rgb) / 0.07);
  backdrop-filter: blur(10px);
  transition:
    box-shadow 700ms var(--ease-soft),
    transform 700ms var(--ease-soft);
}

.approche__encart:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 52px rgb(var(--encre-rgb) / 0.09);
}

.approche__encart-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

.approche__pratique {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.approche__pratique-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--texte-sec);
  padding-block: 0.62rem;
  border-top: 0.5px solid rgb(var(--encre-rgb) / 0.1);
}

.approche__pratique-item:last-child {
  padding-bottom: 0;
}

.approche__pratique-item svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 2px;
}

.approche__col-droite .section-eyebrow {
  margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

.approche__quote {
  position: relative;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--encre);
  line-height: 1.16;
  max-width: 23ch;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 0.5px solid var(--bordure);
}

.approche__quote::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.5rem;
}

.approche__bio-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  max-width: 680px;
}

.approche__bio {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--texte-sec);
}

@media (min-width: 769px) and (max-width: 1024px) {
  .approche__grid {
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 3rem;
  }

  .approche__quote {
    font-size: clamp(1.65rem, 3vw, 2rem);
  }

  .approche__bio-group {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.temoignages {
  padding-block: var(--section-v);
  border-top: 0.5px solid var(--bordure);
  background: var(--section-alt-bg);
}

.temoignages__inner {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: clamp(3.5rem, 8vw, 7rem);
  max-width: 1120px;
}

.temoignages__header {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  align-self: start;
}

.temoignages__header .section-eyebrow {
  margin-bottom: 2.25rem;
}

.temoignages__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--encre);
  max-width: 12ch;
}

.temoignages__title::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
}

.temoignages__list {
  display: grid;
  border-top: 0.5px solid var(--bordure);
}

.temoignage {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4vw, 3.5rem);
  row-gap: 0.85rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-bottom: 0.5px solid var(--bordure);
}

.temoignage__name {
  grid-row: span 2;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.1;
  color: var(--encre);
}

.temoignage p {
  max-width: 660px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--texte-sec);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact {
  padding-block: var(--section-v);
  border-top: 0.5px solid var(--bordure);
}

.contact__inner {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 540px);
  justify-content: space-between;
  gap: clamp(4rem, 9vw, 8rem);
  max-width: 1120px;
}

.contact__header .section-eyebrow {
  color: var(--accent);
  margin-bottom: 2.25rem;
}

.contact__intro {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  color: var(--encre);
  max-width: 13ch;
}

.contact__intro::before {
  content: '';
  display: block;
  width: 44px;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--accent);
}

.contact__note {
  max-width: 38ch;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--texte-sec);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact__form .btn {
  align-self: flex-start;
}

.form__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.form__row:has(.picker-trigger[aria-expanded="true"]) {
  z-index: 60;
}

.form__group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form__group:has(.picker-trigger[aria-expanded="true"]) {
  z-index: 70;
}

.form__label {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.form__label-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.form__optional {
  letter-spacing: 0.08em;
  text-transform: none;
}

.form__tooltip {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.form__tooltip-trigger {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: var(--accent);
  background: transparent;
  border: 0.5px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: 50%;
  font: 400 0.68rem/1 var(--font-sans);
  cursor: help;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    border-color var(--duration-fast) ease;
}

.form__tooltip-trigger:hover,
.form__tooltip-trigger:focus-visible {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.form__tooltip-content {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.7rem);
  z-index: 30;
  width: min(290px, calc(100vw - 3rem));
  padding: 0.85rem 0.95rem;
  color: var(--texte-sec);
  background: var(--surface);
  border: 0.5px solid var(--bordure);
  border-radius: 3px;
  box-shadow: 0 16px 42px rgb(var(--encre-rgb) / 0.1);
  font: 300 0.75rem/1.55 var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition:
    opacity var(--duration-med) var(--ease-soft),
    transform var(--duration-med) var(--ease-soft);
}

.form__tooltip-content::after {
  content: '';
  position: absolute;
  right: 6px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  background: var(--surface);
  border-right: 0.5px solid var(--bordure);
  border-bottom: 0.5px solid var(--bordure);
  transform: rotate(45deg);
}

.form__tooltip:hover .form__tooltip-content,
.form__tooltip:focus-within .form__tooltip-content {
  opacity: 1;
  transform: translateY(0);
}

.form__input {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--encre);
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--bordure);
  padding: 0.5rem 0;
  width: 100%;
  outline: none;
  transition:
    border-color var(--duration-med) var(--ease-luxe),
    color var(--duration-fast) ease;
  color-scheme: light;
}

.form__input::placeholder { color: var(--muted); opacity: 0.7; }
.form__input:focus        { border-bottom-color: var(--encre); }

.desktop-picker {
  display: none;
  position: relative;
}

.picker-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 43px;
  padding: 0.5rem 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid var(--bordure);
  font: 300 0.95rem/1.5 var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--duration-med) var(--ease-luxe),
    color var(--duration-fast) ease;
}

.picker-trigger:hover,
.picker-trigger:focus-visible,
.picker-trigger[aria-expanded="true"] {
  color: var(--encre);
  border-bottom-color: var(--encre);
  outline: none;
}

.picker-trigger.has-value {
  color: var(--encre);
}

.picker-trigger[aria-invalid="true"] {
  border-bottom-color: var(--accent);
}

.picker-trigger__mark {
  width: 22px;
  color: var(--accent);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1;
  text-align: center;
  transition: transform 0.2s ease;
}

.picker-trigger[aria-expanded="true"] .picker-trigger__mark {
  transform: rotate(45deg);
}

.picker-popover {
  position: absolute;
  top: calc(100% + 0.75rem);
  z-index: 80;
  width: min(360px, calc(100vw - 3rem));
  padding: 1.25rem;
  background: var(--surface);
  border: 0.5px solid var(--bordure);
  border-radius: 3px;
  box-shadow: 0 18px 45px rgb(var(--encre-rgb) / 0.12);
  animation: popover-in var(--duration-med) var(--ease-soft) both;
}

.picker-popover[hidden] {
  display: none;
}

.picker-popover--date {
  left: 0;
}

.picker-popover--time {
  right: 0;
}

.calendar__header {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.picker-icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--texte-sec);
  background: transparent;
  border: 0;
  border-radius: 2px;
  font: 300 1rem/1 var(--font-sans);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.picker-icon-button:hover,
.picker-icon-button:focus-visible {
  color: var(--encre);
  background: var(--sable);
  outline: none;
}

.picker-icon-button:disabled,
.calendar__day:disabled,
.calendar__choice:disabled {
  cursor: not-allowed;
  opacity: 0.25;
}

.calendar__title {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
}

.calendar__title-button {
  padding: 0.25rem;
  color: var(--encre);
  background: transparent;
  border: 0;
  font: 400 1.15rem/1.2 var(--font-serif);
  cursor: pointer;
}

.calendar__title-button:hover,
.calendar__title-button:focus-visible {
  color: var(--accent);
  outline: none;
}

.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.2rem;
}

.calendar__weekdays {
  margin-bottom: 0.35rem;
}

.calendar__weekday {
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.calendar__day,
.calendar__choice {
  display: grid;
  place-items: center;
  color: var(--texte-sec);
  background: transparent;
  border: 0;
  border-radius: 2px;
  font: 300 0.8rem/1 var(--font-sans);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.calendar__day {
  aspect-ratio: 1;
}

.calendar__day:hover,
.calendar__day:focus-visible,
.calendar__choice:hover,
.calendar__choice:focus-visible {
  color: var(--encre);
  background: var(--sable);
  outline: none;
}

.calendar__day.is-selected,
.calendar__choice.is-selected {
  color: var(--surface);
  background: var(--accent);
  font-weight: 400;
}

.calendar__day.is-outside {
  color: var(--bordure);
}

.calendar__choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.calendar__choice {
  min-height: 42px;
  padding: 0.5rem 0.25rem;
}

.picker-clear {
  margin-top: 1rem;
  padding: 0.25rem 0;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 0.5px solid transparent;
  font: 300 0.7rem/1.4 var(--font-sans);
  cursor: pointer;
}

.picker-clear:hover,
.picker-clear:focus-visible {
  color: var(--encre);
  border-bottom-color: var(--bordure);
  outline: none;
}

.time-picker__heading {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  color: var(--muted);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.time-picker__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.time-picker__list {
  height: 190px;
  overflow-y: auto;
  background: var(--sable);
  border-radius: 2px;
  scrollbar-color: var(--bordure) transparent;
  scrollbar-width: thin;
}

.time-picker__option {
  display: block;
  width: 100%;
  min-height: 36px;
  color: var(--texte-sec);
  background: transparent;
  border: 0;
  font: 300 0.85rem/1 var(--font-sans);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease;
}

.time-picker__option:hover,
.time-picker__option:focus-visible {
  color: var(--encre);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  outline: none;
}

.time-picker__option.is-selected {
  color: var(--surface);
  background: var(--accent);
  font-weight: 400;
}

.time-picker__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.picker-confirm {
  margin-top: 1rem;
  padding: 0.65rem 1rem;
  color: var(--surface);
  background: var(--encre);
  border: 0;
  border-radius: 2px;
  font: 400 0.65rem/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--duration-med) var(--ease-luxe),
    opacity var(--duration-fast) ease;
}

.picker-confirm:hover,
.picker-confirm:focus-visible {
  background: var(--accent);
  outline: none;
}

.picker-confirm:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

@media (min-width: 769px) {
  .has-desktop-date-time .form__input--native-date,
  .has-desktop-date-time .form__input--native-time {
    display: none;
  }

  .has-desktop-date-time .desktop-picker {
    display: block;
  }
}

.form__textarea {
  resize: vertical;
  min-height: 120px;
}

@media (max-width: 900px) {
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 620px;
  }
}

/* ============================================================
   CONFIRMATION DU FORMULAIRE
   ============================================================ */
.confirmation-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.confirmation__nav-link {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--texte-sec);
  transition: color var(--duration-fast) ease;
}

.confirmation__nav-link:hover {
  color: var(--encre);
}

.confirmation {
  flex: 1;
  display: grid;
  place-items: center;
  padding-block: var(--section-v);
}

.confirmation__inner {
  max-width: 760px;
  text-align: center;
}

.confirmation__inner .section-eyebrow {
  margin-bottom: 1.5rem;
}

.confirmation__title {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 8vw, 5.5rem);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.confirmation__text {
  max-width: 38ch;
  margin: 1.75rem auto 2.5rem;
  color: var(--texte-sec);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding-block: 2rem;
  border-top: 0.5px solid var(--bordure);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__name {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
}

.footer__links {
  display: flex;
  gap: 2rem;
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--muted);
}

.footer__links a { transition: color var(--duration-fast) ease; }
.footer__links a:hover { color: var(--encre); }

@keyframes popover-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal-on-scroll {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   RESPONSIVE : ≤ 768px
   ============================================================ */
@media (max-width: 768px) {

  /* Canvas désactivé sur mobile (perf + lisibilité) */
  #solar-canvas { display: none; }

  /* Nav */
  .nav__links  { display: none; }
  .nav__burger { display: flex; }

  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Hero en colonne unique, photo d'abord */
  .hero {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .hero__right {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  .hero__left {
    padding: 2.5rem 1.5rem 3rem;
  }

  .hero__stats { margin-top: 2.5rem; }

  /* Benefits en colonne */
  .benefits__grid { grid-template-columns: 1fr; }

  .benefit:last-child:nth-child(odd) { grid-column: auto; }

  /* Accroche en colonne */
  .accroche__inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    max-width: 640px;
  }

  .accroche__symptomes {
    padding-top: 1.75rem;
  }

  /* Démarche : contenu puis œuvre, en une seule colonne */
  .demarche__inner {
    grid-template-columns: 1fr;
    gap: 3.75rem;
  }

  .demarche__grille { grid-template-columns: 1fr; }
  .demarche__item--large { grid-column: auto; }
  .demarche__oeuvre { width: min(100%, 520px); margin-inline: auto; }

  /* Consultation détaillée */
  .seance__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .seance__aside { margin-top: 0; }
  .seance__title { max-width: 18ch; }

  /* Approche : empilé, texte d'abord */
  .approche__grid { grid-template-columns: 1fr; gap: 3.75rem; }
  .approche__col-gauche { order: 2; }
  .approche__col-droite { order: 1; }
  .approche__col-gauche { width: min(100%, 390px); margin-inline: auto; }
  .approche__quote { max-width: 26ch; }
  .approche__bio-group { max-width: 620px; }

  /* Témoignages empilés */
  .temoignages__inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
    max-width: 680px;
  }

  .temoignages__header {
    position: static;
  }

  .temoignages__title {
    max-width: 16ch;
  }

  .temoignage {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .temoignage__name {
    grid-row: auto;
  }

  /* Contact : texte puis formulaire */
  .contact__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    max-width: 620px;
  }

  /* Footer empilé */
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE : ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .approche {
    padding-block: 5rem;
  }

  .accroche,
  .demarche,
  .temoignages,
  .contact {
    padding-block: 4.5rem;
  }

  .accroche {
    padding-bottom: 1.5rem;
  }

  .demarche {
    padding-top: 1.25rem;
  }

  .demarche__item {
    gap: 12px;
    padding-block: 1.15rem;
  }

  .demarche__pastille {
    width: 32px;
    height: 32px;
  }

  .demarche__pastille svg {
    width: 22px;
    height: 22px;
  }

  .demarche__label {
    font-size: 0.9375rem;
    padding-top: 0.2rem;
  }

  .approche__bio-group {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .approche__encart {
    width: calc(100% - 0.75rem);
    margin-left: 0.75rem;
    padding-inline: 1.25rem;
  }

  .form__row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}