/* Sublim'Gaïa — le cocon clair.

   Rien ne vient de Maison Kerneur : ici la lumière domine, le cacao
   ponctue, et le motif signature est l'arche, la forme des alcôves et
   des miroirs d'institut, qui cadre chaque photo. Marcellus, une
   capitale romaine calme, porte les titres ; Mulish fait le texte. */

@font-face {
  font-family: 'Marcellus';
  src: url('polices/marcellus-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Mulish';
  src: url('polices/mulish-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  --creme:  #F7F1EA;
  --voile:  #EFE5DA;
  --cacao:  #2B1D16;
  --brun:   #5C4636;
  --cuivre: #B07D52;
  --doux:   #8C7B6C;

  --display: 'Marcellus', Georgia, serif;
  --courant: 'Mulish', system-ui, sans-serif;

  --sortie: cubic-bezier(0.22, 1, 0.36, 1);
  --marge: clamp(1.25rem, 5vw, 6rem);
  /* L'arche : très arrondie en haut, posée au sol. */
  --arche: 999px 999px 18px 18px;
}

* { margin: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  background: var(--creme);
  color: var(--cacao);
  font-family: var(--courant);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.0938rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Le grain, léger : il donne au crème un toucher de papier poudré. */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 900;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23b)'/%3E%3C/svg%3E");
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.01em;
}

p { text-wrap: pretty; }

a { color: inherit; }

.sur-titre {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cuivre);
}

.sur-titre--clair { color: #D9A97E; }

/* Les naissances : masquées seulement si le script est là. */
.js [data-nait] { opacity: 0; transform: translateY(1.1rem); }
.js [data-nait].est-ne {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease, transform 0.8s var(--sortie);
}

/* Les rideaux d'images : l'arche se découvre de bas en haut. Le
   rognage vit sur l'image, jamais sur la figure observée : le guetteur
   d'intersection mesure la zone visible après rognage, et une figure
   rognée à cent pour cent n'intersecte jamais rien. */
.js [data-rideau] img { clip-path: inset(100% 0 0 0); }
.js [data-rideau].est-ne img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--sortie);
}

/* L'ombre de l'arche n'arrive qu'avec son image. */
.js [data-rideau] { box-shadow: none !important; transition: box-shadow 1.1s ease; }
.js [data-rideau].est-ne { box-shadow: 0 30px 60px -30px rgba(43, 29, 22, 0.45) !important; }

/* ── L'en-tête ─────────────────────────────────────────────── */

.entete {
  position: fixed; inset: 0 0 auto; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--marge);
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}

.entete.est-posee {
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(43, 29, 22, 0.08);
}

.entete__nom {
  font-family: var(--display);
  font-size: 1.35rem;
  text-decoration: none;
}

.entete__nav { display: flex; gap: 1.6rem; }

.entete__nav a {
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none; color: var(--brun);
}

.entete__nav a:hover { color: var(--cacao); }

.entete__tel {
  font-size: 0.92rem; font-weight: 700;
  text-decoration: none;
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(43, 29, 22, 0.3);
  border-radius: 999px;
  white-space: nowrap;
}

.entete__tel:hover { border-color: var(--cacao); }

@media (max-width: 720px) {
  .entete__nav { display: none; }
}

/* ── Les boutons ───────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  border: 1px solid rgba(43, 29, 22, 0.3);
  border-radius: 999px;
  font-size: 0.95rem; font-weight: 700;
  text-decoration: none;
  transition: transform 0.25s var(--sortie), background-color 0.25s ease, color 0.25s ease;
}

.bouton--plein { background: var(--cacao); color: var(--creme); border-color: var(--cacao); }

@media (hover: hover) and (pointer: fine) {
  .bouton:hover { transform: translateY(-2px); }
  .bouton--plein:hover { background: var(--brun); }
}

/* ── Le diptyque d'accueil ─────────────────────────────────── */

.accueil {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: 6.5rem var(--marge) 3rem;
}

.accueil h1 {
  font-size: clamp(3.2rem, 8.5vw, 7rem);
  margin-top: 1.1rem;
}

.accueil__art {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  color: var(--cuivre);
  margin-top: 0.5rem;
}

.accueil__dit {
  margin-top: 1.4rem;
  max-width: 44ch;
  color: var(--brun);
}

.accueil__actions {
  display: flex; flex-wrap: wrap; gap: 0.8rem;
  margin-top: 2rem;
}

.accueil__arche {
  height: min(78svh, 46rem);
  border-radius: var(--arche);
  overflow: hidden;
  /* L'ombre chaude assoit l'arche sans la détacher du crème. */
  box-shadow: 0 30px 60px -30px rgba(43, 29, 22, 0.45);
}

@media (max-width: 900px) {
  .accueil {
    grid-template-columns: 1fr;
    padding-top: 5.5rem;
    gap: 2.25rem;
  }
  .accueil__arche { height: 52svh; order: -1; }
}

/* ── Les valeurs ───────────────────────────────────────────── */

.valeurs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 2.4rem;
  padding: 1.1rem var(--marge);
  border-block: 1px solid rgba(43, 29, 22, 0.12);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--doux);
}

/* ── Le rituel ─────────────────────────────────────────────── */

.rituel { padding: clamp(5rem, 11vw, 8rem) 0 0; }

.rituel__tete {
  text-align: center;
  padding: 0 var(--marge) clamp(1rem, 4vw, 2rem);
}

.rituel__tete h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin-top: 0.8rem; }

/* Chaque chapitre épingle un écran : le chiffre romain traverse en
   fond, l'arche et le texte échangent leurs côtés d'un chapitre à
   l'autre. */
/* La longueur fait la cérémonie : un écran et demi de geste par
   chapitre, l'arche prend son temps. */
.chapitre { height: 250svh; }

.chapitre__colle {
  position: sticky; top: 0;
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: 5rem var(--marge) 2rem;
  overflow: hidden;
}

.chapitre__chiffre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-size: clamp(16rem, 44vw, 34rem);
  line-height: 1;
  color: var(--voile);
  z-index: -1;
  user-select: none;
}

.chapitre__arche {
  height: min(66svh, 38rem);
  max-width: 30rem;
  width: 100%;
  justify-self: center;
  border-radius: var(--arche);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(43, 29, 22, 0.45);
}

.chapitre--droite .chapitre__arche { order: 2; }
.chapitre--droite .chapitre__texte { order: 1; text-align: right; justify-self: end; }

/* États de départ du rituel scrubbé, seulement si le script officie.
   L'image déborde son échelle de repos : la respiration a besoin de
   marge, sinon le zoom découvre les bords. */
.js [data-chapitre] .chapitre__arche img { clip-path: inset(100% 0 0 0); transform: scale(1.22); }
.js [data-chapitre] .chapitre__texte { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js [data-chapitre] .chapitre__arche img { clip-path: none; transform: none; }
  .js [data-chapitre] .chapitre__texte { opacity: 1; }
}

.chapitre__texte { max-width: 34ch; }
.chapitre__texte h3 { font-size: clamp(1.9rem, 4vw, 3rem); }
.chapitre__texte p { margin-top: 1rem; color: var(--brun); }

@media (max-width: 820px) {
  .chapitre { height: 210svh; }
  .chapitre__colle {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.75rem;
    text-align: center;
  }
  /* Trois I de Marcellus à 44vw débordent d'un écran de téléphone. */
  .chapitre__chiffre { font-size: 24vw; }
  .chapitre__arche { height: 44svh; }
  .chapitre--droite .chapitre__arche { order: 0; }
  .chapitre--droite .chapitre__texte { order: 1; text-align: center; justify-self: center; }
  .chapitre__texte { justify-self: center; }
}

/* ── Les soins dépliables ──────────────────────────────────── */

.soins {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(5rem, 11vw, 8rem) var(--marge);
}

.soins__tete { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.soins__tete h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); margin-top: 0.8rem; }
.soins__note { margin-top: 1rem; color: var(--doux); font-size: 0.95rem; }

.famille {
  border-top: 1px solid rgba(43, 29, 22, 0.15);
}

.famille:last-of-type { border-bottom: 1px solid rgba(43, 29, 22, 0.15); }

.famille summary {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.4rem 0.2rem;
  cursor: pointer;
  list-style: none;
}

.famille summary::-webkit-details-marker { display: none; }

.famille__nom {
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.famille__gamme {
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--cuivre);
  white-space: nowrap;
}

/* Le signe : un trait qui devient croix, dessiné, pas un caractère. */
.famille__signe {
  position: relative;
  width: 0.95rem; height: 0.95rem;
  align-self: center;
}

.famille__signe::before,
.famille__signe::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  background: var(--cacao);
  transition: transform 0.35s var(--sortie);
}

.famille__signe::before { width: 100%; height: 1.5px; }
.famille__signe::after { width: 1.5px; height: 100%; }

.famille[open] .famille__signe::after { transform: scaleY(0); }

.lignes {
  list-style: none;
  padding: 0 0.2rem 1.6rem;
}

.lignes li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.75rem 0;
}

.lignes li + li { border-top: 1px dashed rgba(43, 29, 22, 0.12); }

.ligne__nom { font-weight: 700; }

.ligne__nom em {
  display: block;
  font-style: normal; font-weight: 400;
  font-size: 0.88rem;
  color: var(--doux);
  max-width: 40ch;
}

.ligne__duree {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--doux);
  white-space: nowrap;
}

.ligne__prix {
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--cuivre);
  white-space: nowrap;
}

.ligne__prix small { font-size: 0.6em; color: var(--doux); }

@media (max-width: 620px) {
  .lignes li { grid-template-columns: 1fr auto; }
  .ligne__duree { grid-column: 1; grid-row: 2; }
  .lignes li + li { padding-top: 0.9rem; }
}

/* ── Elles en parlent ──────────────────────────────────────── */

.avis {
  background: var(--cacao);
  color: var(--creme);
  padding: clamp(5rem, 12vw, 9rem) var(--marge);
  /* L'arche renversée : le cacao s'ouvre comme une alcôve. */
  border-radius: 40px 40px 0 0;
}

.avis h2 {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  margin-top: 0.9rem;
}

.avis__file {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.temoin__etoiles { color: #D9A97E; letter-spacing: 0.28em; font-size: 0.8rem; }

.temoin blockquote {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.3;
}

.temoin figcaption {
  margin-top: 1rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(247, 241, 234, 0.55);
}

/* ── L'institut ────────────────────────────────────────────── */

.institut {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(5rem, 11vw, 8rem) var(--marge);
}

.institut__arche {
  height: min(72svh, 42rem);
  border-radius: var(--arche);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(43, 29, 22, 0.45);
}

.institut h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); margin-top: 0.8rem; }
.institut__texte > p { margin-top: 1.2rem; max-width: 46ch; color: var(--brun); }

.fiche { margin-top: 2rem; display: grid; gap: 1.1rem; }

.fiche dt {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cuivre);
  margin-bottom: 0.2rem;
}

.fiche dd { margin: 0; }
.fiche a { font-weight: 700; text-decoration-color: var(--cuivre); text-underline-offset: 0.2em; }

@media (max-width: 820px) {
  .institut { grid-template-columns: 1fr; }
  .institut__arche { height: 46svh; }
}

/* ── Offrez-vous une heure ─────────────────────────────────── */

.offrir {
  text-align: center;
  padding: 0 var(--marge) clamp(5rem, 11vw, 8rem);
}

.offrir h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.offrir p { margin-top: 1.1rem; color: var(--brun); max-width: 52ch; margin-inline: auto; }

.offrir__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.8rem; margin-top: 1.8rem;
}

/* ── Le pied ───────────────────────────────────────────────── */

.pied {
  background: var(--cacao);
  color: rgba(247, 241, 234, 0.75);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) var(--marge) 1.8rem;
}

.pied__nom {
  font-family: var(--display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--creme);
}

.pied__infos { margin-top: 0.9rem; font-size: 0.95rem; }
.pied__infos a { font-weight: 700; }

.pied__mention {
  margin-top: 1.6rem;
  font-size: 0.75rem;
  color: rgba(247, 241, 234, 0.45);
}

/* ── Mouvement réduit ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-nait], .js [data-rideau] {
    opacity: 1; transform: none; clip-path: none; transition: none;
  }
}