/* ==========================================================================
   PRANAYANE — Pages interieures
   Depend de site.css. Partage par : pranayane, prestations, partenaires,
   evenements, contact, mentions legales, confidentialite.

    1. Banniere de page      2. Sommaire d'ancres     3. Blocs de contenu
    4. Duos texte/image      5. Listes et encarts     6. Grilles de cartes
    7. Sejours               8. Interventions         9. Partenaires
   10. Evenements           11. Contact              12. Pages legales
   13. Bandeau CTA          14. Remerciement         15. Temoignages
   16. Responsive
   ========================================================================== */

/* 1. Banniere de page ==================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(140deg, var(--rose-50) 0%, var(--rose-25) 55%, var(--rose-100) 100%);
  padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(2.75rem, 5vw, 4rem);
  text-align: center;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}

.page-hero__title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
}

.page-hero__lead {
  max-width: 44rem;
  color: var(--ink-soft);
  font-size: 1rem;
}

.page-hero__motif {
  left: clamp(-0.5rem, 0.5vw, 0.5rem);
  bottom: 0;
  width: clamp(220px, 24vw, 380px);
  aspect-ratio: 1474 / 704;
  opacity: 0.85;
}

.page-hero__feuillage {
  right: -2rem;
  top: -2.5rem;
  width: clamp(160px, 18vw, 260px);
  aspect-ratio: 847 / 1264;
  opacity: 0.65;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-400);
}

.breadcrumb a:hover {
  color: var(--rose-600);
}

.breadcrumb [aria-current] {
  color: var(--rose-700);
}

/* 2. Sommaire d'ancres =================================================== */
.ancres {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rose-100);
}

.ancres ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  padding-block: 0.55rem;
}

.ancres a {
  display: block;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-700);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.ancres a:hover {
  background: var(--rose-100);
  color: var(--rose-600);
}

/* 3. Blocs de contenu ==================================================== */
.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-y);
  scroll-margin-top: 4.5rem;
}

.section--blanc {
  background: var(--white);
}

.section--rose {
  background: linear-gradient(180deg, #fdeef1 0%, #fbe4e9 55%, #fdf1f3 100%);
}

.section--creme {
  background: var(--cream);
}

.section__motif-g {
  left: -2.5rem;
  top: 5%;
  width: clamp(160px, 18vw, 270px);
  aspect-ratio: 847 / 1264;
  opacity: 0.7;
}

.section__motif-d {
  right: -2.5rem;
  bottom: 5%;
  width: clamp(160px, 18vw, 270px);
  aspect-ratio: 847 / 1264;
  opacity: 0.7;
}

.section .shell {
  position: relative;
  z-index: 1;
}

.prose {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}

.prose--centre {
  margin-inline: auto;
  text-align: center;
}

.prose p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.prose strong {
  color: var(--rose-600);
  font-weight: 700;
}

.h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rose-700);
}

.h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-600);
}

/* 4. Duos texte / image ================================================== */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: center;
}

.duo + .duo {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.duo--inverse .duo__media {
  order: -1;
}

.duo__texte {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.duo__media {
  display: grid;
  gap: clamp(0.6rem, 1.2vw, 0.9rem);
}

.duo__media figure {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.duo__media img,
.duo__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.duo__media figure:hover img,
.duo__media figure:hover video {
  transform: scale(1.04);
}

.duo__media--haut figure {
  min-height: clamp(280px, 32vw, 420px);
}

/* Praticienne : photo + fiche (formations, lieu) en colonne laterale,
   texte de presentation en colonne principale a cote — plutot qu'un
   bloc unique centre, qui ecrasait soit le texte soit la photo. */
.praticienne-bio {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(2rem, 4vw, 3.25rem);
  align-items: start;
}

.praticienne-bio__aside {
  display: grid;
  gap: 1.5rem;
}

.praticienne-bio__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

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

.praticienne-bio__formations {
  display: grid;
  gap: 0.7rem;
  padding: clamp(1.1rem, 2vw, 1.4rem);
  border-radius: var(--radius);
  background: var(--rose-50);
}

.praticienne-bio__texte {
  display: grid;
  gap: 1rem;
  justify-items: start;
  align-content: start;
}

@media (max-width: 780px) {
  .praticienne-bio {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .praticienne-bio__aside {
    width: 100%;
    max-width: 320px;
    justify-items: center;
  }

  .praticienne-bio__formations,
  .praticienne-bio__texte {
    text-align: left;
  }

  .praticienne-bio__texte {
    justify-items: start;
  }
}

/* Cabinet : video / texte / video (page /pranayane/) — colonnes video
   etroites de part et d'autre, etirees a la hauteur de la colonne de
   texte pour eviter le vide disproportionne d'un simple duo empile. */
.cabinet-trio {
  display: grid;
  grid-template-columns: minmax(170px, 260px) minmax(0, 1fr) minmax(170px, 260px);
  gap: clamp(1.5rem, 2.5vw, 2.75rem);
  align-items: stretch;
}

.cabinet-trio__texte {
  align-content: start;
}

.cabinet-trio__video figure {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
}

.cabinet-trio__video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}

.cabinet-trio__video figure:hover video {
  transform: scale(1.04);
}

/* 5. Listes et encarts =================================================== */
.liste-puces {
  display: grid;
  gap: 0.6rem;
}

.liste-puces li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.liste-puces li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rose-300);
  box-shadow: 0 0 0 3px var(--rose-100);
}

.encart {
  display: grid;
  gap: 0.55rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.25rem, 2.2vw, 1.85rem);
  border-radius: var(--radius);
  border-left: 3px solid var(--rose-400);
  background: linear-gradient(160deg, var(--rose-100), var(--rose-50));
}

.encart p {
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.encart--sauge {
  border-left-color: var(--sage-500);
  background: linear-gradient(160deg, var(--sage-100), #f6f8ee);
}

.meta-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.35rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.meta-ligne span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.meta-ligne svg {
  width: 14px;
  height: 14px;
  color: var(--rose-400);
  flex: none;
}

.signature {
  font-family: var(--font-script);
  font-size: 2rem;
  line-height: 1.1;
  color: var(--rose-600);
}

/* 6. Grilles de cartes =================================================== */
.grille {
  display: grid;
  gap: clamp(0.9rem, 1.8vw, 1.5rem);
}

.grille--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grille--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grille--4 {
  grid-template-columns: repeat(4, 1fr);
}

.bloc {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.bloc:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.bloc--rose {
  background: linear-gradient(170deg, #fce2e8 0%, #fbeff1 100%);
  border-color: rgba(255, 255, 255, 0.75);
}

.bloc__icone {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--rose-100), var(--rose-50));
  border: 1px solid var(--rose-200);
  color: var(--rose-600);
}

.bloc__icone svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.2;
}

.bloc p {
  font-size: 0.87rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* 7. Sejours ============================================================= */
.sejour {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
}

.sejour + .sejour {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
}

.sejour--inverse .sejour__media {
  order: 2;
}

.sejour__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
}

/* Variante portrait : l'affiche contient du texte jusque dans ses bords
   (logo, coordonnees) — un recadrage en object-fit:cover la couperait.
   Colonne image plus etroite, et object-fit:contain pour montrer
   l'affiche entiere plutot que de la rogner. */
.sejour--portrait {
  grid-template-columns: minmax(240px, 340px) 1fr;
}

.sejour--portrait .sejour__media {
  display: grid;
  place-items: center;
  background: var(--rose-50);
}

.sejour--portrait .sejour__media img {
  min-height: 0;
  object-fit: contain;
}

.sejour__corps {
  display: grid;
  gap: 0.85rem;
  align-content: center;
  justify-items: start;
  padding: clamp(1.6rem, 3vw, 2.5rem);
}

.sejour__corps .liste-puces {
  justify-self: stretch;
}

.badge {
  justify-self: start;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: var(--rose-100);
  color: var(--rose-700);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.badge--sauge {
  background: var(--sage-100);
  color: var(--sage-700);
}

.badge--or {
  background: var(--gold-100);
  color: var(--gold-600);
}

/* 8. Interventions ======================================================= */
.intervention {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 5rem;
}

.intervention__icone {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--rose-100), var(--rose-50));
  border: 1px solid var(--rose-200);
  color: var(--rose-600);
}

.intervention__icone svg {
  width: 30px;
  height: 30px;
  stroke-width: 1.2;
}

.intervention__corps {
  display: grid;
  gap: 0.6rem;
}

/* 9. Partenaires ========================================================= */
.partenaire {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: clamp(1.35rem, 2.4vw, 1.9rem);
  text-align: center;
  justify-items: center;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.partenaire:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

/* Emplacement du futur logo partenaire */
.partenaire__logo {
  display: grid;
  place-items: center;
  gap: 0.45rem;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, var(--rose-50), var(--white));
  border: 1px dashed var(--rose-200);
  color: var(--rose-300);
}

.partenaire__logo svg {
  width: 42px;
  height: 42px;
}

.partenaire__logo span {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* 10. Evenements ========================================================= */
.evenement {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: center;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.evenement:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.evenement + .evenement {
  margin-top: 0.9rem;
}

.date-pastille {
  display: grid;
  place-items: center;
  gap: 0.05rem;
  width: 96px;
  padding-block: 0.9rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--rose-600), var(--rose-500));
  color: var(--white);
  line-height: 1;
}

.date-pastille__jour {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
}

.date-pastille__mois {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.date-pastille--passe {
  background: linear-gradient(160deg, var(--rose-200), var(--rose-100));
  color: var(--rose-700);
}

.evenement__corps {
  display: grid;
  gap: 0.45rem;
}

.evenement__titre {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 600;
  color: var(--rose-800);
}

.evenement--passe {
  opacity: 0.78;
}

.evenement__corps p {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Regroupement du calendrier par annee */
.calendrier-annee + .calendrier-annee {
  margin-top: clamp(2.25rem, 4vw, 3rem);
}

.calendrier-annee__titre {
  margin-bottom: 1rem;
}

/* Occasions permanentes (sans date fixe) : separees du calendrier par un
   simple filet, pour que la distinction avec les periodes datees soit
   structurelle (cartes .bloc) et non seulement une question de couleur. */
.calendrier-permanent {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rose-100);
}

.calendrier-permanent__titre {
  margin-bottom: 1.25rem;
}

/* 11. Contact ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.infos-pratiques {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border-radius: var(--radius);
  background: linear-gradient(165deg, var(--rose-100), var(--rose-50));
}

.infos-pratiques dl {
  display: grid;
  gap: 1.1rem;
  margin: 0;
}

.info-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  align-items: start;
}

.info-item__icone {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--white);
  color: var(--rose-600);
}

.info-item__icone svg {
  width: 16px;
  height: 16px;
}

.info-item dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-600);
}

.info-item dd {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.info-item dd a:hover {
  color: var(--rose-600);
}

/* Formulaire long */
.formulaire {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
}

.formulaire__ligne {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
}

.formulaire__ligne--3 {
  grid-template-columns: repeat(3, 1fr);
}

.formulaire__groupe {
  display: grid;
  gap: clamp(0.85rem, 1.6vw, 1.15rem);
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border-radius: var(--radius-sm);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
}

.formulaire__groupe[hidden] {
  display: none;
}

.formulaire__legende {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose-600);
}

.textarea {
  width: 100%;
  min-height: 130px;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.textarea:focus {
  outline: none;
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px rgba(222, 110, 150, 0.16);
}

.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
}

.case input {
  width: 17px;
  height: 17px;
  margin-top: 0.18rem;
  accent-color: var(--rose-600);
  cursor: pointer;
}

.case a {
  color: var(--rose-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* FAQ */
.faq {
  display: grid;
  gap: 0.7rem;
  max-width: 48rem;
  margin-inline: auto;
}

.faq details {
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--rose-100);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1.1rem, 2vw, 1.5rem);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rose-700);
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 1.6px solid var(--rose-500);
  border-bottom: 1.6px solid var(--rose-500);
  rotate: 45deg;
  transition: rotate 0.3s var(--ease);
}

.faq details[open] summary::after {
  rotate: -135deg;
}

.faq details p {
  padding: 0 clamp(1.1rem, 2vw, 1.5rem) 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* 12. Pages legales ====================================================== */
.legal {
  max-width: 48rem;
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}

.legal section {
  display: grid;
  gap: 0.7rem;
  scroll-margin-top: 5rem;
}

.legal h2 {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--rose-700);
}

.legal h3 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rose-600);
}

.legal p,
.legal li {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ink-soft);
}

.legal ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.3rem;
  list-style: disc;
}

.legal a {
  color: var(--rose-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Marqueur des informations a completer par la cliente */
.a-completer {
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
  background: var(--gold-100);
  border: 1px dashed var(--gold-500);
  font-size: 0.82em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-600);
  white-space: nowrap;
}

.sommaire-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--rose-50), var(--white));
  border: 1px solid var(--rose-100);
}

.sommaire-legal a {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--rose-200);
  font-size: 0.72rem;
  color: var(--rose-700);
  text-decoration: none;
}

.sommaire-legal a:hover {
  background: var(--rose-100);
}

/* 13. Bandeau CTA ======================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
  background: linear-gradient(110deg, #fbe4ea 0%, #fdeff2 55%, #fbe7ec 100%);
  text-align: center;
}

/* Variante blanche : pour les pages ou la bande CTA suit directement une
   section deja rose, ce qui rendrait la limite entre les deux invisible. */
.cta-band--blanc {
  background: var(--white);
}

.cta-band__motif {
  right: clamp(-6rem, -4vw, -3rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(260px, 30vw, 440px);
  aspect-ratio: 1264 / 843;
  opacity: 0.85;
  transform: scaleX(-1);
}

.cta-band__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-width: 42rem;
  margin-inline: auto;
}

.cta-band p {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 0.35rem;
}

/* 14. Remerciement =======================================================
   La couronne encadre le message de /merci/, comme elle entoure le logo sur
   la planche de reference. L'anneau est un decor de fond : le texte reste
   dans le flux et peut grandir sans casser le cadrage. */
.merci-couronne {
  /* Diametre de l'anneau : la hauteur du bloc en decoule, pour que la
     couronne soit toujours contenue et ne deborde pas sur le texte suivant. */
  --anneau: min(92vw, 540px);

  position: relative;
  isolation: isolate;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.45rem;
  width: min(100%, 300px);
  min-height: calc(var(--anneau) * 430 / 420 + 4rem);
  margin-inline: auto;
}

.merci-couronne::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  /* L'anneau est descendu de quelques pixels : sa grande fleur d'ancrage
     occupe le bas-gauche, le titre se place donc un peu plus haut. */
  translate: -50% calc(-50% + 2rem);
  width: var(--anneau);
  aspect-ratio: 420 / 430;
  background: url("/assets/media/motifs/couronne-pranayane.svg") center / contain no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* 15. Temoignages (carrousel) ============================================
   Defilement horizontal natif (scroll-snap) : utilisable au doigt sur
   mobile sans JS. Les fleches ne sont qu'un confort desktop, ajoute par
   site.js — scrollBy() sur le conteneur, rien de plus. */
.temoignages {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.temoignages__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.temoignages__head .h4 {
  margin: 0;
}

.temoignages__nav {
  display: flex;
  gap: 0.4rem;
}

.temoignages__fleche {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--rose-200);
  background: var(--white);
  color: var(--rose-600);
  cursor: pointer;
  transition:
    background 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.temoignages__fleche svg {
  width: 16px;
  height: 16px;
}

.temoignages__fleche:hover {
  background: var(--rose-100);
  border-color: var(--rose-300);
}

.temoignages__fleche:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.temoignages__scroller {
  display: flex;
  gap: clamp(0.75rem, 1.5vw, 1.1rem);
  margin: 0;
  padding: 0.25rem 0.15rem 0.85rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-300) transparent;
}

.temoignages__scroller::-webkit-scrollbar {
  height: 6px;
}

.temoignages__scroller::-webkit-scrollbar-thumb {
  background: var(--rose-300);
  border-radius: 999px;
}

.temoignages__scroller::-webkit-scrollbar-track {
  background: transparent;
}

.temoignage-card {
  flex: 0 0 clamp(230px, 72vw, 280px);
  scroll-snap-align: start;
}

.temoignage-card blockquote {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  height: 100%;
  margin: 0;
  padding: 1.1rem 1.15rem 1rem;
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--rose-100), var(--rose-50));
  box-shadow: var(--shadow-sm);
}

.temoignage-card__quote {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 0.5;
  color: var(--rose-300);
}

.temoignage-card p {
  font-family: var(--font-display);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--rose-700);
}

.temoignage-card cite {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rose-500);
}

/* 16. Responsive ========================================================= */
@media (max-width: 1024px) {
  .grille--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .duo,
  .sejour,
  .sejour--portrait {
    grid-template-columns: 1fr;
  }

  .duo--inverse .duo__media,
  .sejour--inverse .sejour__media {
    order: 0;
  }

  .cabinet-trio {
    grid-template-columns: 1fr;
  }

  .cabinet-trio__video figure {
    height: auto;
    max-width: 320px;
    margin-inline: auto;
  }

  .cabinet-trio__video video {
    height: auto;
  }

  .grille--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .page-hero__motif,
  .page-hero__feuillage,
  .section__motif-g,
  .section__motif-d {
    display: none;
  }

  .evenement {
    grid-template-columns: 78px 1fr;
  }

  .evenement .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .date-pastille {
    width: 78px;
  }
}

@media (max-width: 760px) {
  /* Trop etroit pour que le texte tienne dans l'anneau : la couronne passe
     derriere en toile de fond, agrandie et adoucie, plutot que de contraindre
     la largeur du message. */
  /* Ecran etroit : l'anneau deborde volontairement de la colonne de texte
     (la banniere masque le debordement) et s'adoucit, pour garder un titre
     lisible sans le comprimer. */
  .merci-couronne {
    --anneau: min(128vw, 460px);
    width: min(100%, 250px);
  }

  .merci-couronne::before {
    opacity: 0.8;
  }

  /* Sur mobile, la barre d'ancres reste sur une ligne et defile
     horizontalement : empilee, elle mangerait un tiers de l'ecran. */
  .ancres ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .ancres ul::-webkit-scrollbar {
    display: none;
  }

  .ancres a {
    white-space: nowrap;
    padding-inline: 0.85rem;
    font-size: 0.64rem;
  }
}

@media (max-width: 640px) {
  .grille--2,
  .grille--3,
  .grille--4 {
    grid-template-columns: 1fr;
  }

  .formulaire__ligne,
  .formulaire__ligne--3 {
    grid-template-columns: 1fr;
  }

  .intervention {
    grid-template-columns: 1fr;
  }

  .evenement {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .auteur {
    flex-direction: column;
    text-align: center;
  }

  .cta-band__motif {
    display: none;
  }

  /* Le doigt suffit pour naviguer le carrousel sur petit ecran ; les
     fleches restent un confort desktop (souris/trackpad). */
  .temoignages__nav {
    display: none;
  }
}