/* =========================================================
   Pages Prestations (Mariage, Événement privé, Séminaire)
   S'ajoute à base.css + theme.css. Aucune nouvelle taille de texte :
   Boska = --fs-section / --fs-card ; Clash = small / body / label.
   Fonds : chalk → beige → chalk (comme l’en-tête) → olive (FAQ), jamais deux fois de suite.
   ========================================================= */

/* ---------- Fonds des blocs ---------- */
.theme-v2 .presta-head, .theme-v2 .presta-others { --bg: var(--chalk); }
.theme-v2 .presta-list { --bg: var(--linen); padding-block: calc(var(--section-y) * .45); }

/* ---------- En-tête (pas de hero : la barre est pleine dès l'arrivée) ---------- */
.theme-v2 .presta-head { padding-top: calc(5.25rem + var(--section-y) * .35); padding-bottom: calc(var(--section-y) * .3); }
/* Accroche (Boska, taille carte, italique) puis chapô de deux phrases */
.presta-head__hook { margin-top: clamp(1rem, 2vw, 1.5rem); font-style: italic; color: var(--ink-soft); }
.presta-head__chapo { margin-top: clamp(1rem, 2vw, 1.4rem); max-width: 46rem; }
/* « Nos formules » suivi d'une phrase : l'intitulé se rapproche d'elle */
.theme-v2 .presta-list .section__label.has-sub { margin-bottom: clamp(.9rem, 1.6vw, 1.2rem); }
.presta-list__sub { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Formules ----------
   Repos : image seule, titre + sous-titre en bas, dans l'image.
   Survol : une courte description apparaît sous le sous-titre.
   Clic : le bloc s'élargit (≈ 60 %), le détail apparaît à côté de l'image, élément par élément. */
.formulas {
  --grow: 4;                                 /* bloc ouvert ≈ 57 % de la ligne */
  --main: 34%;                               /* part de l'image dans le bloc ouvert */
  --open: cubic-bezier(.77, 0, .18, 1);      /* élargissement doux, sans à-coup */
  position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; gap: clamp(.75rem, 1.2vw, 1.25rem);
  height: var(--formulas-h, clamp(36rem, 80svh, 44rem)); /* ajustée par le script au plus long contenu */
}
.formula {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; overflow: hidden;
  transition: flex-grow 1s var(--open);
}
.formula.is-active { flex-grow: var(--grow); }

/* Image (bouton) : pleine largeur au repos, 34 % une fois ouverte */
.formula__main {
  position: relative; flex: 0 0 100%; min-width: 0; overflow: hidden;
  display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--night);
  font: inherit; color: var(--chalk); text-align: left; cursor: pointer;
  transition: flex-basis 1s var(--open);
}
.formula.is-active .formula__main { flex-basis: var(--main); }
.formula__main:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.formula__main img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) sepia(.3) contrast(1.05);
  transform: scale(1.06);
  transition: filter 1s var(--ease), transform 1.6s var(--ease);
}
.formula__main:hover img, .formula__main:focus-visible img, .formula.is-active .formula__main img { filter: grayscale(0) sepia(.1); transform: scale(1); }
.formula__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 11, 9, .8), rgba(12, 11, 9, .38) 42%, rgba(12, 11, 9, 0) 68%);
  transition: opacity .6s var(--ease);
}

.formula__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid; gap: .4rem;
  padding: clamp(1rem, 1.8vw, 1.75rem);
}
.formula__title { display: block; line-height: 1.1; white-space: nowrap; transition: font-size .8s var(--open); }
/* Blocs resserrés : titre à la taille Boska des questions de la FAQ (pas de nouvelle taille) */
.formulas.has-active .formula:not(.is-active) .formula__title { font-size: clamp(1.15rem, 1.5vw, 1.35rem); }
/* marges latérales réduites sur les blocs resserrés (le bas ne bouge pas : titres alignés) */
.formulas.has-active .formula:not(.is-active) .formula__cap { padding-inline: .9rem; }
/* Sous-titre : une seule ligne quand tout est fermé ; deux lignes au plus dès qu'un bloc est ouvert.
   Les deux lignes sont réservées sur tous les blocs : les titres restent alignés. */
.theme-v2 .formula__sub {
  display: block; color: var(--almond); letter-spacing: .1em; line-height: 1.4;
  white-space: nowrap; min-height: 1.4em;
  transition: min-height .6s var(--open);
}
.theme-v2 .formulas.has-active .formula__sub {
  white-space: normal; min-height: 2.8em; letter-spacing: .06em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Description au survol : se déplie sous le sous-titre */
.formula__summary {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .6s var(--ease), opacity .45s var(--ease);
}
.formula__summary > .body { display: block; overflow: hidden; min-height: 0; padding-top: .35rem; max-width: 24em; color: color-mix(in srgb, var(--chalk) 85%, transparent); }
.formula__main:hover .formula__summary,
.formula__main:focus-visible .formula__summary { grid-template-rows: 1fr; opacity: 1; transition-delay: .08s; }
/* Un bloc ouvert : plus de description (ni sur lui, il a son détail, ni sur les blocs resserrés) */
.formulas.has-active .formula__summary { grid-template-rows: 0fr; opacity: 0; }

/* Détail : à côté de l'image */
.formula__detail {
  /* largeur figée à celle du bloc ouvert (calculée par le script) : les lignes ne bougent pas pendant l'ouverture */
  flex: 0 0 var(--detail-w, calc(100% - var(--main))); min-width: 0;
  padding-left: clamp(1.5rem, 2.6vw, 2.75rem);
  display: flex; flex-direction: column; gap: 1.4rem;
  overflow: hidden; visibility: hidden; pointer-events: none;
  transition: visibility 0s .35s;
}
.formula.is-active .formula__detail { visibility: visible; pointer-events: auto; transition: none; }
/* Apparition : chaque élément monte, se dé-floute et s'éclaircit, l'un après l'autre,
   une fois le bloc presque ouvert. À la fermeture, il s'efface vite et sans délai. */
.formula__detail > :not(ul), .formula__inc > li {
  opacity: 0; transform: translateY(1.6rem); filter: blur(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.formula.is-active .formula__detail > :not(ul), .formula.is-active .formula__inc > li {
  --d: calc(.55s + var(--i, 0) * .07s);
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity .9s var(--ease) var(--d), transform 1.2s var(--ease) var(--d), filter 1s var(--ease) var(--d);
}
.formula__lead { color: var(--ink); max-width: 36em; }
.formula__inc-title { color: var(--accent); font-weight: 400; }
/* Liste « Ce que ce pack inclut » : un petit carré devant chaque ligne */
.formula__inc { list-style: none; margin: -.6rem 0 0; padding: 0; display: grid; gap: .5rem; }
.formula__inc > li { position: relative; padding-left: 1.25rem; max-width: 36em; }
.formula__inc > li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--accent); }
.formula__foot { margin-top: auto; display: grid; gap: 1.1rem; justify-items: start; }
.formula__note { color: var(--ink-soft); max-width: 40em; }

/* Mesure invisible du contenu (script) */
.formula__detail.is-measure { position: absolute; left: 0; top: 0; visibility: hidden; height: auto; overflow: visible; }


/* ---------- Nos autres prestations ---------- */
.presta-others__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.25rem); }
.presta-others .offer__media { aspect-ratio: 4 / 3; }


/* ---------- Tablette et mobile : blocs empilés, un appui ouvre le détail sous l'image ---------- */
@media (max-width: 1180px) {
  .formulas { flex-direction: column; height: auto; gap: 2rem; }
  .formula, .formula.is-active { display: block; flex: none; }
  .formula__main { width: 100%; aspect-ratio: 16 / 9; }
  /* chevron ⌄ / ⌃ comme la FAQ, en bas à droite de l'image */
  .formula__cap { padding-right: 3.5rem; }
  .formula__main::after {
    content: ""; position: absolute; right: 1.5rem; bottom: 1.6rem;
    width: .65rem; height: .65rem;
    border-right: 1.5px solid var(--chalk); border-bottom: 1.5px solid var(--chalk);
    transform: translateY(-25%) rotate(45deg); transition: transform .5s var(--ease);
  }
  .formula.is-active .formula__main::after { transform: translateY(25%) rotate(-135deg); }
  .formula__detail {
    padding: 0; height: 0;
    transition: height .7s var(--ease), padding .7s var(--ease), visibility 0s .7s;
  }
  .formula.is-active .formula__detail { height: auto; padding-top: 1.75rem; transition: height .7s var(--ease), padding .7s var(--ease); }
  .formula.is-active .formula__detail > :not(ul), .formula.is-active .formula__inc > li { --d: calc(.15s + var(--i, 0) * .06s); }
  .formula__foot { margin-top: 0; }
  .formula__detail { width: auto; }
  /* pleine largeur : le sous-titre tient toujours sur une ligne */
  .theme-v2 .formulas.has-active .formula__sub { min-height: 1.4em; white-space: nowrap; display: block; }
}
/* Écrans tactiles : pas de survol, la description reste affichée */
@media (hover: none) {
  .formula__summary { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 960px) {
}
@media (max-width: 560px) {
  .formula__main { aspect-ratio: 4 / 3; }
  .presta-others__grid { grid-template-columns: 1fr; gap: 3rem; }
}