/* =====================================================================
   ENTRE DEUX LUMIÈRES — Feuille de styles (base + composants)
   Dépend de tokens.css
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  RESET DOUX                                                         */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;   /* neutralise le débordement des formes aquarelle */
}
/* Le <strong> doit se détacher d'un corps déjà en 500 : sans cette règle,
   le gras du navigateur (700) casserait la douceur, et hériter de 500 le
   rendrait invisible. */
strong, b { font-weight: var(--fw-body-bold); }
/* Les champs de formulaire ne reprennent pas la graisse du corps : ils
   sont en sans-serif, où 500 se lit déjà comme un semi-gras. Boutons,
   liens de nav et sur-titres portent leur propre graisse plus bas. */
.input, .textarea, .select, .font-ui { font-weight: 400; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
::selection { background: var(--c-coral); color: #fff; }

/* ------------------------------------------------------------------ */
/*  TYPOGRAPHIE                                                        */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--lh-tight);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}
h2 { font-size: var(--fs-2xl); font-weight: 500; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { max-width: 68ch; }

/* Sur-titre "eyebrow" — capitales espacées façon logo */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-accent-text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--color-accent);
  display: inline-block;
}
.eyebrow--center::after {
  content: "";
  width: 28px; height: 1px;
  background: var(--color-accent);
  display: inline-block;
}

.lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  font-style: italic;
  line-height: var(--lh-snug);
}

.text-center { text-align: center; }
.center-block { margin-inline: auto; }
.muted { color: var(--color-text-muted); }

/* ------------------------------------------------------------------ */
/*  UTILITAIRES — rapatriement des styles inline des pages             */
/* ------------------------------------------------------------------ */
.m-0  { margin: 0; }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mt-8 { margin-top: var(--sp-8); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-5 { margin-bottom: var(--sp-5); }
.maxw-52 { max-width: 52ch; }
.h-xl { font-size: var(--fs-xl); }
.self-start { align-self: flex-start; }
.text-2xs { font-size: var(--fs-2xs); }
.text-xs  { font-size: var(--fs-xs); }
.text-sm  { font-size: var(--fs-sm); }
.text-md  { font-size: var(--fs-md); }
.font-ui  { font-family: var(--font-ui); }
.maxw-none { max-width: none; }
.maxw-60   { max-width: 60ch; }
.grid-center { display: grid; place-items: center; }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.btn-row--center { justify-content: center; }
.h-sub { font-size: var(--fs-lg); }

/* Variantes de composants nées du rapatriement */
.grid-2--feature { align-items: center; gap: var(--sp-8); }
.grid-2--contact { gap: var(--sp-8); align-items: start; }
/* Comme --feature, mais photo et texte calés en haut (colonnes de hauteurs
   très différentes : centrer ferait flotter la photo au milieu du texte). */
.grid-2--top { align-items: start; gap: var(--sp-8); }
.illus--centered { max-width: 420px; margin-inline: auto; }
.gallery__cap {
  text-align: center; margin-top: var(--sp-3);
  font-family: var(--font-ui); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-text-muted);
}
.eyebrow--light { color: var(--c-blush); }
.wine-text { color: var(--c-blush-pale); opacity: 0.9; }
.footer-brand__desc { max-width: 34ch; font-size: var(--fs-sm); opacity: 0.85; }
.contact-list { margin-top: var(--sp-6); color: var(--color-text); }
.ico--primary { color: var(--color-primary); }
.card--form { padding: var(--sp-7); }
.page-head__inner { position: relative; z-index: 1; }
.page-head--left { text-align: left; }
.page-head__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-8); flex-wrap: wrap;
}
.page-head__col { flex: 1; min-width: 280px; }
.lead--flush { margin-left: 0; }
.footer-bottom--solo { margin-top: 0; padding-top: 0; border-top: none; }
.rdv-etape--narrow { max-width: 640px; }
.textarea--short { min-height: 90px; }

/* Encart de mise en garde — visible, mais toujours doux */
.notice {
  display: flex; align-items: center; gap: var(--sp-5);
  max-width: 840px; margin: var(--sp-8) auto 0;
  background: linear-gradient(115deg, #fff 0%, var(--c-blush-pale) 100%);
  border: 1px solid var(--c-coral-soft);
  border-left: 5px solid var(--color-accent);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.notice__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-coral-btn); color: #fff;
  display: grid; place-items: center;
  box-shadow: var(--shadow-glow);
}
.notice__icon svg { width: 26px; height: 26px; fill: currentColor; }
.notice__title {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-primary);
}
.notice__text { font-size: var(--fs-sm); color: var(--color-text); margin-top: 5px; max-width: none; }
@media (max-width: 560px) { .notice { flex-direction: column; text-align: center; } }

/* Mention discrète en pied de section (pleine largeur, ne déséquilibre aucune colonne) */
.footnote {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); text-align: center;
  max-width: 82ch; margin: var(--sp-8) auto 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-ui); font-size: var(--fs-xs);
  color: var(--color-text-muted); line-height: 1.5;
}
.footnote svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-accent); }
.footnote strong { color: var(--color-primary); font-weight: 600; }
@media (max-width: 560px) { .footnote { flex-direction: column; gap: var(--sp-2); } }

/* ------------------------------------------------------------------ */
/*  LAYOUT                                                             */
/* ------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: var(--container-text); }

.section { padding-block: var(--section-y); position: relative; overflow: clip; }
.section--alt { background: var(--color-bg-alt); }
.section--wine { background: var(--grad-wine); color: var(--c-blush-pale); }
.section--wine h2, .section--wine h3 { color: #fff; }
.section--blush { background: var(--grad-dawn); }

.section-head { max-width: 640px; margin-bottom: var(--sp-7); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--sp-4); }
.section-head h2 + p { margin-top: var(--sp-4); }

.grid { display: grid; gap: var(--sp-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------------ */
/*  BOUTONS                                                            */
/* ------------------------------------------------------------------ */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn--primary { --btn-bg: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }
.btn--accent  { --btn-bg: var(--c-coral-btn); }
.btn--accent:hover { background: var(--c-coral-btn-hover); box-shadow: var(--shadow-glow); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-primary);
  border-color: var(--color-line-strong, var(--c-line-strong));
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(141,44,70,0.05); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--color-primary); }
.btn--lg { font-size: var(--fs-sm); padding: 1.05em 2.3em; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Lien texte souligné animé */
.link-underline {
  color: var(--color-primary);
  font-weight: 600;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size var(--dur) var(--ease);
  padding-bottom: 2px;
}
.link-underline:hover { background-size: 100% 1.5px; }

/* ------------------------------------------------------------------ */
/*  CARTES                                                             */
/* ------------------------------------------------------------------ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--hover:hover { box-shadow: var(--shadow-lg); }
.card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--grad-halo);
  color: var(--color-primary);
  margin-bottom: var(--sp-4);
  box-shadow: inset 0 0 0 1px rgba(141,44,70,0.08);
}
.card__icon svg { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.card h3, .card h4 { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------------ */
/*  PILIERS — pastille colorée + titre capitales + texte (style affiche) */
/* ------------------------------------------------------------------ */
.pillars { display: grid; gap: var(--sp-6); max-width: 780px; margin-inline: auto; }
.pillar { display: flex; gap: var(--sp-5); align-items: flex-start; }
.pillar__badge {
  width: 78px; height: 78px; flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.pillar:hover .pillar__badge { transform: scale(1.06) rotate(-3deg); }
.pillar__badge svg { width: 36px; height: 36px; fill: currentColor; }
/* Trois teintes de la palette, partagées par tous les composants à pastille */
.pillar__badge--1, .offer__badge--1, .pack__icon--1 { background: var(--c-blush);      color: var(--c-wine); }
.pillar__badge--2, .offer__badge--2, .pack__icon--2 { background: var(--c-blush-pale); color: var(--c-coral-text); box-shadow: inset 0 0 0 1.5px var(--c-coral-soft); }
.pillar__badge--3, .offer__badge--3, .pack__icon--3 { background: var(--c-coral-soft); color: var(--c-wine-deep); }
.pillar__title {
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--sp-2);
}
.pillar__text { color: var(--color-text-muted); font-size: var(--fs-sm); max-width: 58ch; }
@media (max-width: 640px) {
  .pillar { flex-direction: column; align-items: center; text-align: center; }
  .pillar__text { max-width: none; }
}

/* Piliers en 3 colonnes : pastille au-dessus, tout centré */
.pillars--cols { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7) var(--sp-6); max-width: none; }
.pillars--cols .pillar { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); }
.pillars--cols .pillar__text { max-width: 34ch; }
.pillars--cols .pillar__title { font-size: var(--fs-sm); }
@media (max-width: 860px) { .pillars--cols { grid-template-columns: 1fr; max-width: 620px; } }

/* Variante centrée : icône au centre, titre sur une ligne, texte dessous */

/* ------------------------------------------------------------------ */
/*  ICÔNES FLAT (pleines)                                              */
/* ------------------------------------------------------------------ */
.ico { display: inline-block; fill: currentColor; stroke: none; vertical-align: middle; }

/* ------------------------------------------------------------------ */
/*  EMPLACEMENTS PHOTO (placeholders)                                 */
/* ------------------------------------------------------------------ */
/* Halos aquarelle en fond pour l'ambiance de la marque */

/* Illustrations d'ambiance (image finie) */
.illus {
  display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur) var(--ease);
}
/* Pas de translateY ici : ces images ne sont pas cliquables, et les voir
   sauter de quelques pixels au survol se lit comme un défaut, pas comme
   une réponse. Seule l'ombre s'approfondit — rien ne bouge. */
.illus--hover:hover { box-shadow: var(--shadow-lg); }
/* Cadrage d'origine : le 4/5 par défaut de .illus rognerait les côtés et
   donnerait l'impression d'un zoom. Ce ratio est celui du fichier — donc
   `cover` ne rogne rien. À réajuster si la photo est remplacée. */
.illus--natural { aspect-ratio: 4 / 3; }

/* Portrait de Roxane — photo nue, sans cadre ni ombre.
   Le fondu ne fonctionne que parce que la droite du cliché est un aplat
   de lumière surexposée : elle se dissout dans le crème de la page. */
.portrait {
  display: block; width: min(100%, 400px);
  aspect-ratio: 4 / 5; object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 100%);
          mask-image: linear-gradient(to right, #000 52%, transparent 100%);
}

/* Galerie d'ambiance */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.gallery .illus { aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .gallery { grid-template-columns: 1fr; } }

/* Prestation — pastille + titre capitales + prix, sans habillage de carte (visuel léger) */
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2) var(--sp-7); }
.offer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--dur) var(--ease);
}
.offer:hover { background: rgba(255, 255, 255, 0.6); }
.offer__badge {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.offer:hover .offer__badge { transform: scale(1.08) rotate(-4deg); }
.offer__badge svg { width: 22px; height: 22px; fill: currentColor; }
.offer__title {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-text); line-height: 1.3;
}
.offer__meta { font-family: var(--font-ui); font-size: var(--fs-3xs); color: var(--c-ink-faint); letter-spacing: var(--ls-wide); text-transform: uppercase; margin-top: 3px; }
.offer__desc { color: var(--color-text-muted); font-size: var(--fs-xs); margin-top: var(--sp-2); max-width: 42ch; line-height: 1.55; }
.offer__price {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--color-primary); font-weight: 600;
  white-space: nowrap; text-align: right; line-height: 1.1;
}
.offer__price small { display: block; font-family: var(--font-ui); font-size: 0.65rem; color: var(--c-ink-faint); font-weight: 400; margin-top: 3px; }
@media (max-width: 900px) { .offers { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
@media (max-width: 520px) {
  .offer { grid-template-columns: auto 1fr; }
  .offer__price { grid-column: 2 / -1; text-align: left; margin-top: var(--sp-2); }
  .offer__desc { max-width: none; }
}

/* Lien « En savoir plus » d'une prestation qui a sa propre page */
.offer__lien {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--color-primary); margin-top: var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.offer__lien span { transition: transform var(--dur) var(--ease); }
.offer__lien:hover { color: var(--color-accent-text); }
.offer__lien:hover span { transform: translateX(4px); }
/* Deux liens côte à côte (cercles : les dates / les tarifs). Le gap
   vertical sert au repli sur petit écran. */
.offer__liens {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  max-width: none;
}
.offer__liens .offer__lien { margin-top: var(--sp-3); }
/* « Sur devis » n'est pas un montant : même place, ton plus discret. */
.offer__price--devis { font-size: var(--fs-md); color: var(--color-text-muted); font-style: italic; }

/* Carte forfait (mise en avant) */
.pack {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pack--featured {
  background: var(--grad-wine);
  color: var(--c-blush-pale);
  /* transparente plutôt que `none` : sans elle, la carte vedette décale
     son contenu d'1px et les titres ne s'alignent plus tout à fait. */
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.pack--featured .pack__name,
.pack--featured .pack__price,
.pack--featured .pack__list li { color: #fff; }
.pack__old {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 400;
  color: var(--c-ink-faint); text-decoration: line-through;
  margin-left: var(--sp-2); vertical-align: 0.35em;
}
.pack--featured .pack__old { color: rgba(255,255,255,0.6); }
.pack--featured .pack__list li::before { color: var(--c-coral-soft); }
.pack:hover { box-shadow: var(--shadow-lg); }
/* Hors du flux : sinon il décale à lui seul tout le contenu de la carte
   vedette, et les titres ne s'alignent plus d'une colonne à l'autre. */
.pack__badge {
  position: absolute; top: 0; right: var(--sp-5);
  transform: translateY(-50%);
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: var(--c-coral); color: #fff;
  padding: 0.4em 1em; border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
/* Pastille du forfait — reprend le langage des piliers, sur une carte classique */
/* Icône et titre sur une seule ligne */
.pack__head { display: flex; align-items: center; gap: var(--sp-4); }
.pack__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--ease);
}
.pack:hover .pack__icon { transform: scale(1.06) rotate(-3deg); }
.pack__icon svg { width: 22px; height: 22px; fill: currentColor; }
.pack--featured .pack__icon { background: rgba(255,255,255,0.18); color: #fff; box-shadow: none; }
.pack__name { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-heading); font-weight: 600; line-height: 1.15; }
.pack__price { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-accent-text); font-weight: 600; margin-top: var(--sp-4); line-height: 1; }
.pack--featured .pack__price { color: #fff; }
.pack__list { margin: var(--sp-5) 0; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.pack__list li { position: relative; padding-left: 1.6em; }
.pack__list li::before { content: "✦"; position: absolute; left: 0; color: var(--color-accent); }
.pack__who { font-size: var(--fs-sm); font-style: italic; color: var(--color-text-muted); margin-top: auto; }
.pack--featured .pack__who { color: rgba(255,255,255,0.85); }

/* Colonnes de même hauteur : les cartes s'étirent sur la rangée. */
#forfaits .grid-3 { align-items: stretch; }

/* ------------------------------------------------------------------ */
/*  FORMULES DES CERCLES — cartes en 3 colonnes                        */
/* ------------------------------------------------------------------ */
/* Priorité : tenir en hauteur. D'où les partis pris suivants —
   pas de paragraphe de description, seulement des puces qui disent ce
   que contient la formule ; photo en 16/9 plutôt qu'en 4/3 ; prix et
   qualificatif sur une seule ligne au lieu de deux.
   Le prix est en bas, juste avant le bouton : c'est le dernier argument
   avant le geste. Il descend via margin-top:auto sur .formule__tarifs —
   donc quelle que soit la longueur des puces, les trois prix restent
   alignés sur une même ligne d'une colonne à l'autre. */
.formule {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  overflow: hidden;              /* la photo épouse les coins arrondis */
  box-shadow: var(--shadow-md);
  scroll-margin-top: 100px;      /* l'ancre ne passe pas sous l'en-tête */
  transition: box-shadow var(--dur) var(--ease);
}
.formule:hover { box-shadow: var(--shadow-lg); }
.formule__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Corps en flex : c'est lui qui porte la poussée du prix vers le bas. */
.formule__corps { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
/* Deux lignes réservées : « Cercle d'écoute et de parole » en prend deux,
   les deux autres une seule. Sans ce plancher, les puces ne démarrent pas
   à la même hauteur d'une colonne à l'autre. */
.formule__nom {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--color-heading); font-weight: 600; line-height: 1.15;
  min-height: 2.3em;
}
.formule__meta {
  font-family: var(--font-ui); font-size: var(--fs-3xs); color: var(--color-accent-text);
  letter-spacing: var(--ls-wide); text-transform: uppercase; margin-top: var(--sp-2);
}
.formule__points { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.formule__points li {
  position: relative; padding-left: 1.4em;
  font-size: var(--fs-xs); line-height: 1.45; color: var(--color-text-muted);
}
.formule__points li::before { content: "✦"; position: absolute; left: 0; top: 0.1em; color: var(--color-accent); }
.formule__points strong { color: var(--color-text); font-weight: 600; }
/* Le bloc tarifaire, poussé en bas de la carte. */
.formule__tarifs { margin-top: auto; padding-top: var(--sp-5); }
/* Prix et qualificatif sur une ligne, alignés sur la même ligne de base :
   empilés, ils coûtaient une ligne de plus par carte. */
.formule__prix {
  display: flex; align-items: baseline; gap: 0.45em; flex-wrap: wrap;
  font-family: var(--font-display); font-size: var(--fs-xl);
  color: var(--color-primary); font-weight: 600; line-height: 1;
}
.formule__prix small {
  font-family: var(--font-ui); font-size: var(--fs-2xs);
  color: var(--c-ink-faint); font-weight: 400;
}
.formule__alt {
  font-size: var(--fs-2xs); color: var(--color-text-muted);
  margin-top: var(--sp-2); line-height: 1.45;
}
.formule__alt strong { color: var(--c-wine); font-weight: 600; }
.formule__cta { margin-top: var(--sp-4); align-self: flex-start; }

/* ------------------------------------------------------------------ */
/*  ÉLÉMENTS DÉCORATIFS                                                */
/* ------------------------------------------------------------------ */
/* Étoile 4 branches — motif du logo */

/* Filet ornemental centré */
.divider {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); color: var(--color-accent);
  margin: var(--sp-6) auto;
}
.divider::before, .divider::after {
  content: ""; height: 1px; width: min(80px, 12vw);
  background: linear-gradient(to var(--dir, right), transparent, var(--c-line-strong));
}
.divider::before { --dir: left; }

/* Formes aquarelle floues en fond */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.blob--coral { background: var(--c-coral); }
.blob--blush { background: var(--c-blush); }
.blob--wine  { background: var(--c-wine-tint); }

/* Vignette portrait organique (façon logo ovale) */
/* Puce cœur (reprise du flyer) */
.heart-list { display: grid; gap: var(--sp-4); }
.heart-list li { position: relative; padding-left: 2em; }
.heart-list li::before {
  content: "♥"; position: absolute; left: 0; top: 0.05em;
  color: var(--color-accent); font-size: 1.1em;
}

.check-list { display: grid; gap: var(--sp-3); }
.check-list li { position: relative; padding-left: 1.8em; color: var(--color-text); }
.check-list li::before {
  content: ""; position: absolute; left: 0.1em; top: 0.55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(234,126,123,0.18);
}

/* ------------------------------------------------------------------ */
/*  CERCLE DE PAROLE — carte de session (date, thème, places)          */
/* ------------------------------------------------------------------ */
/* Les trois formules (page Cercles) — 3 colonnes. */
.formules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
/* L'offre « venez avec une amie » — mise en avant sans crier */
.formule__offre {
  background: var(--c-blush-pale);
  border-left: 3px solid var(--c-coral);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--sp-4);
  font-size: var(--fs-2xs); line-height: 1.5; color: var(--color-text-muted);
  margin-top: var(--sp-4);
}
.formule__offre strong { color: var(--c-wine); }
@media (max-width: 900px) { .formules-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }

/* Bandeau photo pleine largeur */

/* Case à cocher de formulaire */
.check { display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer; font-weight: 400; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-wine); flex-shrink: 0; cursor: pointer; }
.check span { font-size: var(--fs-xs); color: var(--color-text); line-height: 1.5; }
.check small { color: var(--color-text-muted); }

/* Filtres de l'agenda — type de cercle et mois */
.filtres { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.filtres__groupe { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.chip {
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 0.5em 1.1em; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--c-coral-soft); color: var(--color-primary); }
.chip.is-active { background: var(--c-wine); border-color: var(--c-wine); color: #fff; }
.filtres__vide { text-align: center; color: var(--color-text-muted); font-size: var(--fs-sm); padding: var(--sp-7) 0; }
.filtres__vide button { background: none; border: none; cursor: pointer; font-size: inherit; padding: 0; }

/* Étiquette de type sur une ligne d'agenda */

/* Agenda — rangées filetées, la date en médaillon.
   Heure, lieu et tarif sont annoncés une fois dans le chapô de section :
   identiques pour tous les cercles, les répéter ferait un tableau. */
.cercles { display: grid; }
/* `display: grid` bat la règle [hidden] du navigateur : il faut le dire ici,
   sinon les filtres ne masquent rien. */
.cercle[hidden] { display: none; }
.cercle {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-2);
  border-bottom: 1px solid var(--c-line);
}

/* Médaillon de date */
.cercle__date {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--c-blush-pale);
  box-shadow: inset 0 0 0 1px var(--c-blush);
  display: grid; place-content: center; align-content: center;
  text-align: center; line-height: 1;
}
.cercle__day {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 300;
  color: var(--color-primary); display: block; letter-spacing: var(--ls-tight);
}
.cercle__month {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: var(--fs-sm); color: var(--c-coral-text);
  display: block; margin-top: var(--sp-1);
}

/* Contenu */
.cercle__weekday {
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-text); margin-bottom: var(--sp-2);
}
.cercle__theme { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-heading); font-weight: 600; line-height: 1.2; }
/* Horaire : sous le nom du cercle, dans une graisse légère. C'est une
   information de service, elle ne doit pas concurrencer le titre ni le
   sur-titre de date. */
.cercle__horaire {
  margin-top: var(--sp-2);
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 400;
  letter-spacing: 0.01em; color: var(--color-text-muted);
}

/* Action */
.cercle__cta {
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600;
  color: var(--color-primary); white-space: nowrap;
  border: 1px solid var(--c-line-strong); border-radius: var(--r-pill);
  padding: 0.65em 1.4em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cercle__cta:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* Séance complète — le médaillon s'éteint, la ligne reste lisible */

@media (max-width: 760px) {
  .cercle { grid-template-columns: 72px 1fr; gap: var(--sp-2) var(--sp-4); }
  .cercle__date { width: 72px; height: 72px; }
  .cercle__day { font-size: 1.875rem; }
  .cercle__month { font-size: var(--fs-2xs); }
  .cercle__cta { grid-column: 2; justify-self: start; margin-top: var(--sp-3); }
}


/* ------------------------------------------------------------------ */
/*  NEWSLETTER                                                         */
/* ------------------------------------------------------------------ */
.newsletter {
  background: var(--grad-dawn);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  text-align: center;
  border: 1px solid var(--color-border);
}
.newsletter__form { display: flex; flex-wrap: wrap; gap: var(--sp-3); max-width: 480px; margin: var(--sp-5) auto 0; }
.newsletter__form .input { flex: 1; }
@media (max-width: 520px) { .newsletter__form { flex-direction: column; } }

/* ------------------------------------------------------------------ */
/*  BANDEAU DE PAGE (en-tête des pages intérieures)                    */
/* ------------------------------------------------------------------ */
.page-head { background: var(--grad-dawn); padding-block: var(--sp-8) var(--sp-7); text-align: center; position: relative; overflow: clip; }
.page-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 500; margin-top: var(--sp-3); }
.page-head p { margin: var(--sp-4) auto 0; }


/* ------------------------------------------------------------------ */
/*  EN-TÊTE / NAVIGATION                                               */
/* ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  backdrop-filter: blur(12px);
  background: rgba(255, 249, 246, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-scrolled { border-color: var(--color-border); box-shadow: var(--shadow-xs); }
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); padding-block: var(--sp-3);
  position: relative; /* ancre le menu mobile */
}
.nav__brand { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.nav__brand img { height: 48px; width: auto; filter: drop-shadow(0 2px 4px rgba(141,44,70,0.12)); }
.nav__brand-text { display: flex; flex-direction: column; line-height: 1; }
.nav__brand-name { font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-primary); font-weight: 600; }
.nav__brand-sub { font-family: var(--font-ui); font-size: 0.6rem; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-accent-text); margin-top: 3px; }
.nav__menu { display: flex; align-items: center; gap: var(--sp-5); }
/* Bouton de la nav : plus discret que les CTA de contenu. C'est lui qui paie
   la gouttière entre les liens — la barre dispose de 1072px utiles, pas un de
   plus (container plafonné à 1120px). */
.nav__menu .btn { font-size: var(--fs-2xs); padding: 0.7em 1.4em; }
/* nowrap : un lien de nav sur deux lignes est toujours un défaut. Sans ça,
   quelques pixels de compression suffisent à casser « Prestations & forfaits »
   ou « Qui suis-je » (au trait d'union) en deux lignes. */
.nav__link {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 500;
  color: var(--color-text); position: relative; padding: var(--sp-1) 0;
  white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--color-accent); border-radius: 2px;
  transition: width var(--dur) var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: var(--sp-2); color: var(--color-primary); }

/* ------------------------------------------------------------------ */
/*  HERO                                                               */
/* ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--grad-dawn); }
/* La photo couvre tout le hero, mais s'efface vers la gauche par un fondu
   long : le feuillage se devine derrière le texte au lieu de s'arrêter net.
   C'est possible parce que le cliché est cadré large, Roxane à droite —
   il reste de la matière à gauche à dissoudre.
   Les paliers sont calés sur DEUX contraintes, pas une seule :
   — le texte court jusqu'à ~50 % : le masque doit y rester sous 0.2,
     sinon le feuillage remonte sous les fins de lignes du titre ;
   — Roxane occupe 58 % à 95 %, visage à 72 % : le masque doit être plein
     avant son visage.
   D'où une transition tardive et longue (50 % → 78 %) : elle traverse le
   fond flou derrière son épaule, jamais le texte ni le regard. Déplacer
   ces paliers sans regarder la photo casse l'un ou l'autre. */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("../img/photos/hero-roxane.webp") center right / cover no-repeat;
  -webkit-mask-image: linear-gradient(100deg,
    transparent 22%, rgba(0,0,0,0.07) 42%, rgba(0,0,0,0.19) 52%,
    rgba(0,0,0,0.58) 64%, rgba(0,0,0,0.92) 73%, #000 79%);
          mask-image: linear-gradient(100deg,
    transparent 22%, rgba(0,0,0,0.07) 42%, rgba(0,0,0,0.19) 52%,
    rgba(0,0,0,0.58) 64%, rgba(0,0,0,0.92) 73%, #000 79%);
}
.hero__inner {
  display: grid; grid-template-columns: 1fr;
  align-items: center;
  min-height: calc(100svh - var(--header-h, 74px));
  /* Resserré (2026-07-16) : à 3.5vh/sp-6 au lieu de 4vh/sp-7, une fenêtre
     de 700px de haut (portable courant, chrome de navigateur déduit)
     laissait la dernière ligne du hero sous la ligne de flottaison.
     Voir aussi les boutons et le titre ci-dessous — c'est la combinaison
     des trois réglages qui fait tenir le tout. */
  padding-block: clamp(var(--sp-4), 3.5vh, var(--sp-6));
  position: relative; z-index: 1;
}
.hero__content { max-width: 34rem; }
.hero__title { font-size: clamp(2.35rem, 3.8vw, 3.2rem); font-weight: 500; line-height: 1.08; color: var(--color-primary); }
.hero__title em { font-style: italic; color: var(--color-accent-text); }
/* 40ch au lieu de 34ch : le paragraphe passait à 4 lignes dans la colonne
   de 34rem. Toujours nettement sous les 544px disponibles (pas de risque
   de chevaucher le fondu photo), mais 3 lignes au lieu de 4. */
.hero__text { font-size: var(--fs-md); color: var(--color-text-muted); margin-top: var(--sp-4); max-width: 40ch; }
/* Les deux boutons du hero, à leur taille standard (btn--lg), demandent
   667px : plus que les 544px de la colonne dès qu'on sort d'un très grand
   écran — ils repassaient donc en deux lignes, ajoutant ~90px de hauteur
   à chaque fois. Cette variante, réservée au hero, les fait tenir sur
   une seule ligne sans toucher aux btn--lg utilisés ailleurs sur le site. */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-4); }
.hero__actions .btn { font-size: var(--fs-xs); padding: 0.75em 1.3em; }

/* ------------------------------------------------------------------ */
/*  CITATION                                                           */
/* ------------------------------------------------------------------ */
.quote { text-align: center; max-width: 760px; margin-inline: auto; }
.quote__text {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  line-height: var(--lh-snug); color: var(--color-heading);
  max-width: none; margin-inline: auto;
}
.quote__author { margin: var(--sp-4) auto 0; max-width: none; text-align: center; font-family: var(--font-ui); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-accent-text); }

/* ------------------------------------------------------------------ */
/*  FORMULAIRE (contact)                                               */
/* ------------------------------------------------------------------ */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field[hidden] { display: none; }  /* même piège que .cercle[hidden] : grid bat la règle du navigateur */
.field__opt { font-weight: 400; color: var(--color-text-muted); }

/* Piège à robots — jamais visible, jamais atteignable au clavier.
   `display:none` suffirait pour l'œil, mais certains robots ignorent les
   champs masqués ainsi ; on le sort de l'écran tout en le laissant
   « affiché », ce qui piège davantage de spams. */
.hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

/* Retour d'envoi d'un formulaire */
.form-status {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: var(--fs-xs); line-height: 1.5;
  max-width: none;
}
.form-status--ok {
  background: var(--c-blush-pale); color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--c-blush);
}
.form-status--ko {
  background: #fff; color: var(--c-coral-text);
  box-shadow: inset 0 0 0 1px var(--c-coral-soft);
}
.form-status--bloc { flex-basis: 100%; text-align: center; }

.form-rgpd {
  margin-top: var(--sp-4);
  font-family: var(--font-ui); font-size: var(--fs-3xs);
  color: var(--c-ink-faint); line-height: 1.5; max-width: none;
}
.form-rgpd a { text-decoration: underline; }
.field label { font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600; color: var(--color-text); }
.input, .textarea, .select {
  font-family: var(--font-ui); font-size: var(--fs-sm);
  width: 100%; padding: 0.8em 1em;
  background: #fff; border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm); color: var(--color-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-ghost); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-accent); box-shadow: var(--focus-ring); outline: none; }
.textarea { min-height: 140px; resize: vertical; }

/* ------------------------------------------------------------------ */
/*  PIED DE PAGE                                                       */
/* ------------------------------------------------------------------ */
.site-footer { background: var(--grad-wine); color: var(--c-blush-pale); padding-block: var(--sp-8) var(--sp-6); }
.site-footer a { color: var(--c-blush-pale); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-7); }
.site-footer h4 { color: #fff; margin-bottom: var(--sp-4); font-size: var(--fs-lg); }
.footer-brand__lockup { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.footer-brand__lockup img { height: 74px; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18)); }
/* Empile le nom et le sous-titre (sinon les <span> restent en ligne) */
.footer-brand__lockup > span { display: flex; flex-direction: column; }
.footer-brand__name { display: block; font-family: var(--font-display); font-size: var(--fs-lg); color: #fff; font-weight: 600; line-height: 1.1; }
.footer-brand__sub { display: block; font-family: var(--font-ui); font-size: 0.62rem; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--c-blush); margin-top: 6px; white-space: nowrap; }
.footer-contact li { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-xs); }
.footer-contact svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.8; }
.footer-nav li { margin-bottom: var(--sp-3); font-family: var(--font-ui); font-size: var(--fs-xs); }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3);
  font-family: var(--font-ui); font-size: var(--fs-3xs); color: rgba(255,255,255,0.7);
}
/* Signature de l'auteur du site : présente, mais en retrait — c'est la
   marque de Roxane qui doit rester au premier plan. */
.footer-signature { color: rgba(255,255,255,0.5); }
.footer-signature a { color: rgba(255,255,255,0.72); }
.footer-signature a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/*  VALEURS — bandeau de cinq mots, ponctués de l'étoile du logo       */
/* ------------------------------------------------------------------ */
.valeurs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.valeur {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 700;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--color-primary);
}
.valeur::before { content: "✦"; color: var(--color-accent); font-size: 0.9em; }

/* ------------------------------------------------------------------ */
/*  TÉMOIGNAGES — cartes de parole rapportée                           */
/* ------------------------------------------------------------------ */
.temoignages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.temoignage {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.temoignage::before {
  content: "«";
  font-family: var(--font-display); font-size: 3rem; line-height: 0.6;
  color: var(--c-coral-soft);
  display: block; margin-bottom: var(--sp-3);
}
.temoignage__texte {
  font-style: italic; font-size: var(--fs-sm);
  color: var(--color-text); line-height: var(--lh-normal);
  max-width: none;
}
.temoignage__qui {
  margin-top: auto; padding-top: var(--sp-4);
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-text);
}
@media (max-width: 860px) { .temoignages { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ------------------------------------------------------------------ */
/*  PRISE DE RENDEZ-VOUS — choix du type, créneaux, récapitulatif      */
/* ------------------------------------------------------------------ */
/* Étape numérotée */
.rdv-etape { margin-bottom: var(--sp-7); }
.rdv-etape__titre {
  display: flex; align-items: center; gap: var(--sp-4);
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--color-heading); font-weight: 600;
  margin-bottom: var(--sp-5);
}
.rdv-etape__num {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-blush); color: var(--c-wine);
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
}

/* Types de rendez-vous — cartes sélectionnables (boutons radio habillés) */
.rdv-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.rdv-type {
  position: relative; text-align: left;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.rdv-type:hover { border-color: var(--c-coral-soft); box-shadow: var(--shadow-sm); }
.rdv-type.is-selected {
  border-color: var(--c-wine);
  background: linear-gradient(150deg, #fff 30%, var(--c-blush-pale) 100%);
  box-shadow: var(--shadow-md);
}
.rdv-type.is-selected::after {
  content: "✓"; position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--c-wine); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 700;
}
.rdv-type__nom {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-text); line-height: 1.3;
}
.rdv-type__meta {
  font-family: var(--font-ui); font-size: var(--fs-3xs);
  color: var(--c-ink-faint); letter-spacing: var(--ls-wide);
  text-transform: uppercase; margin-top: var(--sp-2);
}
.rdv-type__prix {
  font-family: var(--font-display); font-size: var(--fs-lg);
  color: var(--color-primary); font-weight: 600; margin-top: var(--sp-3);
}
.rdv-type__prix small { font-family: var(--font-ui); font-size: var(--fs-3xs); color: var(--c-ink-faint); font-weight: 400; display: block; margin-top: 2px; }
.rdv-type__offert {
  display: inline-block;
  font-family: var(--font-ui); font-size: var(--fs-3xs); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  background: var(--c-coral); color: #fff;
  padding: 0.3em 0.9em; border-radius: var(--r-pill);
  margin-top: var(--sp-3);
}
@media (max-width: 900px) { .rdv-types { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .rdv-types { grid-template-columns: 1fr; } }

/* Créneaux — groupés par jour */
/* Disponibilités : plusieurs choix possibles, d'où des boutons à bascule
   (aria-pressed) et non des créneaux exclusifs. */
.rdv-dispos { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.slot {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  padding: 0.55em 1.3em; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.slot:hover { border-color: var(--c-coral); color: var(--color-primary); }
.slot.is-selected { background: var(--c-wine); border-color: var(--c-wine); color: #fff; }
.slot:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }

/* Récapitulatif au-dessus du formulaire */
.rdv-recap {
  background: var(--grad-dawn);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm); color: var(--color-text);
}
.rdv-recap strong { color: var(--color-primary); }
.rdv-recap--vide { color: var(--color-text-muted); font-style: italic; }

/* ------------------------------------------------------------------ */
/*  ANIMATIONS D'APPARITION                                            */
/* ------------------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/*  RESPONSIVE                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* Le texte prend toute la largeur : la photo ne peut plus rester à côté,
     elle passe en bandeau haut et se fond vers le bas. Le fondu latéral
     n'aurait aucun sens ici — le texte passerait dessous.
     Le cadrage se recentre sur Roxane (72 % dans le cliché) : en portrait,
     `cover` rogne les côtés, et le point de fuite doit rester son visage. */
  .hero__bg {
    inset: 0 0 auto 0; height: 52svh;
    background-position: 72% 28%;
    /* Le fondu doit être ÉTEINT avant que le texte commence : à 80 % de
       52svh la photo a disparu (≈41svh), le contenu démarre à 44svh.
       Sans cette avance, le sur-titre retombe dans la fin du dégradé et
       le pantalon transparaît sous les capitales. */
    -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 80%);
            mask-image: linear-gradient(to bottom, #000 42%, transparent 80%);
  }
  .hero__inner {
    align-items: end; min-height: auto;
    padding-top: 44svh; padding-bottom: var(--sp-7);
  }
  .hero__content { max-width: none; }
}
/* Menu mobile — se déclenche à 1100px. Mesuré : la nav complète demande
   1005px (marque 227 + menu 778), soit 1077px de fenêtre minimum une fois
   le padding et une marge décente comptés. En dessous, le logo se ferait
   écraser — d'où la bascule. */
@media (max-width: 1100px) {
  .nav__menu { display: none; }
  .nav__menu.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-4);
    position: absolute; top: calc(100% + 6px); right: 0; left: auto; min-width: 240px;
    background: #fff; padding: var(--sp-5);
    border: 1px solid var(--color-border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
  }
  .nav__menu.is-open .btn { width: 100%; }
  .nav__toggle { display: inline-flex; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .offer__head { flex-direction: column; gap: var(--sp-1); }
  .footer-grid { grid-template-columns: 1fr; }
  h2 { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  /* Annuler la durée ne suffit pas : sans elle, le déplacement au survol
     ne glisse plus, il saute d'un coup — soit exactement le mouvement
     brusque que ce réglage cherche à éviter. Le bouton est le dernier à
     encore se déplacer ; cartes et images ne bougent plus du tout. */
  .btn:hover { transform: none; }
}