/**
 * sections.css
 * Mise en page spécifique de chaque grande section éditoriale
 * de la page d'accueil.
 */

/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-ivory);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: scale(1);
  animation: heroKenBurns 26s ease-out forwards;
}

/* Vidéo de fond de hero (2026-09-07, voir PROJET-NOTES.md) — même
   traitement "cover" que la photo ci-dessus, sans le zoom Ken Burns
   (la vidéo a déjà son propre mouvement). L'<img> placé à l'intérieur
   de la balise <video> (voir mariages.html) ne sert que de solution de
   repli pour les très rares navigateurs sans support vidéo ; il hérite
   du même habillage via .hero__media img ci-dessus. */
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* Très léger rapprochement de l'image du Hero à l'arrivée sur la page —
   un seul mouvement, lent, qui se termine et ne boucle pas. */
@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.055); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img { animation: none; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Corrigé (2026-08-26) : ce noir était légèrement différent de
     --color-charcoal (14,13,12) — alignement pour l'identité de palette. */
  background:
    linear-gradient(180deg, rgba(14,13,12,0.42) 0%, rgba(14,13,12,0.06) 32%, rgba(14,13,12,0.18) 62%, rgba(14,13,12,0.72) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: var(--gutter);
  padding-bottom: clamp(3rem, 8vh, 6rem);
  padding-top: calc(var(--header-h) + 2rem);
  max-width: var(--container-max);
  margin-inline: auto;
}

.hero__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige-soft);
  margin-bottom: 1.4rem;
  display: block;
}

.hero__title {
  font-size: var(--fs-display);
  color: var(--color-ivory);
  max-width: 14ch;
}

.hero__title em {
  font-style: italic;
  color: var(--color-gold);
}

/* Signature manuscrite (2026-09-01, voir PROJET-NOTES.md) — remplace
   visuellement le texte du H1 du Hero accueil, centrée. Agrandie et
   recontrastée le 2026-09-10 (retour wedding planner : le logo, en
   crème uni, manquait de présence sur le ciel clair du château) —
   taille nettement augmentée + halo sombre en drop-shadow (le SVG
   reste une seule couleur plate, donc le contraste se joue sur
   l'ombre portée plutôt que sur un changement de teinte). Légèrement
   ré-agrandie le 2026-09-11 (retour de la commerciale B2B, sondage
   client) : devient la seule vraie signature visuelle de la page
   maintenant que le petit logo du header a été remplacé par le lien
   texte "Accueil" — voir PROJET-NOTES.md "suite 22". */
.hero__signature {
  display: inline-block;
  width: clamp(260px, 50vw, 520px);
  height: auto;
  filter:
    drop-shadow(0 2px 10px rgba(10, 9, 8, 0.5))
    drop-shadow(0 0 44px rgba(10, 9, 8, 0.4));
}

/* Voile radial très discret juste derrière le logo du Hero accueil,
   pour une zone de respiration/contraste supplémentaire quel que soit
   le ciel de la photo derrière (2026-09-10). Scopé à
   .hero__title--brand (uniquement le H1 signature de l'accueil FR/EN)
   — .hero__title est réutilisée sur d'autres pages avec un vrai texte
   de titre, qui n'a pas besoin de ce voile. */
.hero__title--brand {
  position: relative;
}

.hero__title--brand::before {
  content: "";
  position: absolute;
  /* Dimensions calées sur .hero__signature (pas "inset" en %, qui se
     serait calculé sur la largeur du H1 — pleine largeur du Hero,
     bien plus large que le logo — et aurait produit un halo beaucoup
     trop étendu). Centré sur le H1, comme le logo lui-même. */
  top: 50%;
  left: 50%;
  width: clamp(340px, 63vw, 650px);
  height: clamp(190px, 35vw, 380px);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(10, 9, 8, 0.34) 0%, rgba(10, 9, 8, 0.15) 55%, rgba(10, 9, 8, 0) 78%);
  z-index: -1;
  pointer-events: none;
}

.hero__location {
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-beige-soft);
}

/* Accroche italique sous le titre du Hero (pages intérieures :
   Corporate, Expériences…) — un cran plus discret qu'un sous-titre. */
.hero__tagline {
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--color-beige-soft);
  max-width: 34ch;
  line-height: 1.5;
}

.hero__footrow {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--color-line);
  padding-top: 1.8rem;
}

.hero__line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  max-width: 34ch;
  color: var(--color-ivory);
  line-height: 1.5;
}

.hero__scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 2rem;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige-soft);
}

@media (min-width: 720px) {
  .hero__scroll-cue { display: flex; }
}

.hero__scroll-cue .cue-line {
  width: 1px;
  height: 34px;
  background: var(--color-beige-soft);
  position: relative;
  overflow: hidden;
}

.hero__scroll-cue .cue-line::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 100%; height: 100%;
  background: var(--color-gold);
  animation: cueDrop 2.6s var(--ease-editorial) infinite;
}

@keyframes cueDrop {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-cue .cue-line::after { animation: none; top: 0; }
}

/* =========================================================
   POSITIONNEMENT — double page éditoriale
   ========================================================= */

.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(3rem, 6vw, 6rem);
  }
  .editorial--reverse {
    grid-template-columns: 1.05fr 0.95fr;
  }
  .editorial--reverse .editorial__media { order: 2; }
  .editorial--reverse .editorial__text { order: 1; }
}

.editorial__text {
  max-width: 46ch;
}

@media (min-width: 900px) {
  .editorial__text {
    margin-left: clamp(0px, 4vw, 3rem);
  }
  .editorial--reverse .editorial__text {
    margin-left: 0;
    margin-right: clamp(0px, 4vw, 3rem);
  }
}

.editorial__title {
  font-size: var(--fs-h2);
  margin-top: 1rem;
  margin-bottom: 1.6rem;
  max-width: 12ch;
}

.editorial__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.editorial__lead p + p {
  margin-top: 1.1rem;
}

.editorial__media {
  position: relative;
}

.editorial__media .media {
  width: min(420px, 82vw);
}

@media (min-width: 900px) {
  .editorial__media .media { width: 88%; margin-left: auto; }
  .editorial--reverse .editorial__media .media { margin-left: 0; margin-right: auto; }
}

.editorial__caption {
  margin-top: 1rem;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold-ink);
  text-transform: uppercase;
}

/* =========================================================
   À PROPOS
   ========================================================= */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4rem);
}

@media (min-width: 940px) {
  .about {
    grid-template-columns: 0.85fr 1.15fr;
    align-items: center;
  }
}

.about__media {
  position: relative;
}

.about__media .media {
  width: min(460px, 78vw);
}

.about__media--secondary {
  display: none;
}

@media (min-width: 1180px) {
  .about__media { position: relative; padding-right: 5rem; }
  .about__media--secondary {
    display: block;
    position: absolute;
    right: 0;
    bottom: -12%;
    width: 46%;
    border: 8px solid var(--color-charcoal);
  }
}

/* Passé en ivoire le 2026-09-04 (retour d'usage, voir layout.css
   .bg-charcoal .eyebrow et PROJET-NOTES.md). */
.about__eyebrow { color: var(--color-ivory); }

.about__title {
  font-size: var(--fs-h2);
  color: var(--color-ivory);
  margin-top: 1rem;
  margin-bottom: 1.8rem;
}

.about__text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--color-beige-soft);
  max-width: 52ch;
}

.about__text p + p {
  margin-top: 1.15rem;
}

.about__cta {
  margin-top: 2.2rem;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* =========================================================
   DERRIÈRE LAURENT MAS EVENTS
   — présentation éditoriale d'une seule photo + texte, pensée
   pour que le portrait (temporaire) puisse être remplacé sans
   toucher au balisage ni à ces règles.
   ========================================================= */

.derriere__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 940px) {
  .derriere__grid {
    /* Photo légèrement plus large que le texte (~53 / 47). */
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

.derriere__media .media {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Réduction mobile (2026-09-12, suite à l'audit UX du nouveau parcours
   accueil — voir PROJET-NOTES.md) : la photo à pleine largeur du
   conteneur (~335px de large sur un iPhone standard, donc ~447px de
   haut en 3/4) allongeait sensiblement le trajet avant le texte de la
   citation, qui est le vrai porteur de la "connexion" recherchée par ce
   bloc. Ratio inchangé (object-fit: cover évite toute distorsion),
   simplement une largeur/hauteur plus modeste sur mobile. Desktop et
   tablette (≥ 940px, colonne photo/texte) inchangés. */
@media (max-width: 939px) {
  .derriere__media .media {
    max-width: 260px;
  }
}

@media (min-width: 1180px) {
  .derriere__media .media {
    max-width: none;
    /* Léger débordement vertical pour donner plus d'impact au portrait. */
    margin-block: -2.5rem;
  }
}

.derriere__title {
  font-size: var(--fs-h2);
  color: var(--color-ivory);
  margin-bottom: 1.8rem;
}

.derriere__text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--color-beige-soft);
  max-width: 52ch;
}

.derriere__text p + p {
  margin-top: 1.15rem;
}

/* Citation personnelle (2026-09-10) — remplace .derriere__text sur
   l'accueil : traitement serif/italique (registre "prise de parole",
   pas argumentaire commercial), guillemet décoratif discret en tête,
   paragraphes resserrés pour rester scannable sur mobile malgré la
   longueur du texte. */
.derriere__quote {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--color-beige-soft);
  max-width: 54ch;
}

.derriere__quote::before {
  content: "\201C";
  display: block;
  font-style: normal;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--color-gold);
  opacity: 0.8;
  margin-bottom: 0.3rem;
}

.derriere__quote p + p {
  margin-top: 0.9rem;
}

/* Phrase mise en valeur au sein de la citation (2026-09-12, voir
   PROJET-NOTES.md "suite 23") — "J'aime être le chef d'orchestre..."
   rompt volontairement l'italique/serif du reste de la citation
   (upright, doré, légèrement plus grand) pour offrir un point d'ancrage
   visuel qui rend le bloc scannable même sans tout lire. Sélecteur
   composé (2 classes) pour battre .derriere__quote p + p ci-dessus. */
.derriere__quote p.derriere__highlight {
  font-style: normal;
  font-weight: 600;
  color: var(--color-gold);
  font-size: 1.08em;
  margin-block: 1.4rem;
}

.derriere__quote p.derriere__highlight + p {
  margin-top: 1.4rem;
}

.derriere__signature {
  display: block;
  width: clamp(110px, 18vw, 160px);
  height: auto;
  margin-top: 1.8rem;
  filter: drop-shadow(0 2px 8px rgba(10, 9, 8, 0.35));
}

.derriere__note {
  margin-top: 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--color-beige-soft);
  opacity: 0.85;
  max-width: 52ch;
}

.derriere__cta {
  margin-top: 2.2rem;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* =========================================================
   BAR À VINYLES — teaser mystérieux
   ========================================================= */

.vinyles-teaser {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.vinyles-teaser__title {
  font-size: var(--fs-h1);
  color: var(--color-ivory);
  margin-top: 1.2rem;
}

.vinyles-teaser__text {
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--color-beige-soft);
  line-height: 1.6;
}

.vinyles-teaser__words {
  margin-top: 2.4rem;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.7;
}

.vinyles-teaser__words span:not(:last-child)::after {
  content: "·";
  margin-left: 1.4rem;
  color: var(--color-gold);
}

/* Encadré retiré (2026-08-27, voir PROJET-NOTES.md). */
.vinyles-teaser__soon {
  display: inline-block;
  margin-top: 2.6rem;
  font-size: 0.7rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-style: italic;
  color: var(--color-gold);
}

/* =========================================================
   CTA FINAL
   ========================================================= */

.cta-final {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-ivory);
  overflow: hidden;
}

/* Photos retirées le 2026-09-07 (demande de Laurent, voir PROJET-NOTES.md) :
   fond uni noir (color-charcoal) à la place de la photo, sur les 4 pages
   utilisant .cta-final__media (index, mariages, a-propos, accompagnement). */
.cta-final__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--color-charcoal);
}

.cta-final__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.cta-final__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Corrigé (2026-08-26) : ce noir était légèrement différent de
     --color-charcoal (14,13,12) — alignement pour l'identité de palette. */
  background: rgba(14, 13, 12, 0.78);
}

.cta-final__content {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
}

.cta-final__title {
  font-size: var(--fs-display);
  max-width: 16ch;
  margin-inline: auto;
  color: var(--color-ivory);
}

.cta-final__cta {
  margin-top: 2.4rem;
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* =========================================================
   EN-TÊTE D'EXPÉRIENCE (Épure / Instants / Vintage Signature)
   Prix, accroche — communs aux différentes présentations,
   sans jamais former une « carte tarifaire ».
   ========================================================= */

.exp-index {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-gold-ink);
  display: block;
  margin-bottom: 1rem;
}

.bg-charcoal .exp-index { color: var(--color-gold); }

/* Agrandi le 2026-08-24 (BRIEF — rendre les prix plus visibles) : taille
   sensiblement augmentée et passage au serif, pour que le prix se
   remarque au premier regard sans devenir une étiquette tarifaire —
   toujours un simple filet fin au-dessus, jamais de fond ni de badge. */
.exp-price {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.5rem, 1vw + 1.2rem, 1.85rem);
  letter-spacing: 0.01em;
  color: var(--color-gold-ink);
  margin-top: 1.3rem;
  margin-bottom: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-line-dark);
}

.bg-charcoal .exp-price {
  color: var(--color-gold);
  border-top-color: var(--color-line);
}

/* Exception : à l'intérieur d'une petite carte d'effet (.effect-card,
   ex. "Fumée lourde" sur mariages.html), .exp-price reste au format
   compact d'origine — même registre que .mini-option__price /
   .addon-card__price, dont ces cartes sont voisines. Le grand format
   ne concerne que les pavés de présentation d'expérience. */
.effect-card .exp-price {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold-ink);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  border-top: none;
}

/* Capacité de la configuration technique incluse — affichée à
   proximité immédiate du tarif (voir AJOUT — Capacité des expériences
   Mariage). Le margin-top négatif compense le margin-bottom de
   .exp-price pour rapprocher visuellement les deux lignes, sans
   toucher à .exp-price (réutilisé ailleurs, ex. cartes "Imaginez
   votre expérience", où cette proximité n'a pas lieu d'être). */
.exp-capacity {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-top: -1.5rem;
  margin-bottom: 1rem;
}

.bg-charcoal .exp-capacity { color: var(--color-gold-quiet); }

.exp-capacity-note {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-faint);
  max-width: 46ch;
  margin-bottom: 1.6rem;
}

.bg-charcoal .exp-capacity-note {
  color: var(--color-beige-soft);
  opacity: 0.85;
}

/* Badge "Avantage expérience combinée" — Photobooth / Bar à Vinyles
   (2026-08-27, voir BRIEF CLAUDE + PROJET-NOTES.md). Traitement
   volontairement plus valorisé que .exp-capacity-note (argument
   commercial qui encourage l'ajout d'une expérience à une prestation
   DJ), tout en restant discret.

   Pastille (bordure + fond teinté + coins arrondis) retirée le même
   jour, sur le même retour que .tag-row__item : Laurent trouve que ce
   type d'encadré fait "généré par IA". Remplacé par du texte courant
   avec juste la coche en repère visuel — utilisé à la fois sur fond
   ivoire (Bar à Vinyles) et sur fond charbon (MODJA, dans
   .bg-charcoal-soft), d'où l'override .bg-charcoal ci-dessous pour
   garder un bon contraste sur fond sombre. */
.combo-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.4rem;
}

.combo-badge__mark {
  color: var(--color-gold-ink);
  font-size: 0.9rem;
  line-height: 1;
}

.combo-badge__text {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--color-gold-ink);
  text-align: left;
}

.bg-charcoal .combo-badge__mark,
.bg-charcoal .combo-badge__text {
  color: var(--color-beige-soft);
}

.combo-badge__text strong {
  font-weight: 600;
}

.exp-tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: inherit;
}

/* =========================================================
   FORMULES MARIAGE — chapitres nettement identifiables
   (2026-09-10, retour wedding planner : un précédent essai pour
   rendre Épure / Instants / Vintage Signature plus identifiables
   était resté trop discret). Le nom de la formule devient
   l'élément typographique dominant de chaque section, avec un
   traitement strictement identique sur les 3 — jusqu'ici Épure et
   Instants utilisaient .editorial__title (taille --fs-h2) alors
   que Vintage Signature utilisait .exp-showcase__title (taille
   --fs-display), une incohérence en plus d'un manque d'impact.
   .formule-chapter marque une rupture nette avec la formule
   précédente (espace vertical renforcé + filet fin en tête de
   section) ; .formule-name/.formule-marker remplacent
   .editorial__title/.exp-showcase__title et .eyebrow/.exp-index
   à l'intérieur des 3 sections #epure / #instants /
   #vintage-signature uniquement.
   ========================================================= */

.formule-chapter {
  padding-top: clamp(4.5rem, 11vw, 8rem) !important;
  position: relative;
}

.formule-chapter::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--color-line-dark);
}

.bg-charcoal.formule-chapter::before,
.bg-charcoal-soft.formule-chapter::before {
  background: var(--color-line);
}

.formule-marker {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-bottom: 1.3rem;
}

.bg-charcoal .formule-marker,
.bg-charcoal-soft .formule-marker {
  color: var(--color-gold);
}

/* Taille réduite le 2026-09-11 (retour Laurent : "beaucoup trop
   grosse", surtout sur mobile où 15vw écrasait le reste du contenu).
   Reste un vrai titre de chapitre, mais plus proche de l'échelle
   --fs-display du reste du site que d'une bannière promotionnelle. */
.formule-name {
  display: block;
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  /* Plafond mesuré pour le format 2 colonnes (≥900px, voir
     .editorial__text, contrainte à 46ch) — un mot de 8 lettres
     ("INSTANTS") ne doit jamais dépasser cette colonne. */
  font-size: clamp(2.4rem, 10vw, 4rem);
  line-height: 0.98;
  max-width: none;
  margin-bottom: clamp(1.1rem, 2.4vw, 1.5rem);
}

/* h1-h4 fixent color: var(--color-ink) par défaut (base.css) : sur fond
   sombre (Vintage Signature, bg-charcoal), le nom doit rester ivoire —
   même règle que .exp-showcase__title/.derriere__title juste à côté. */
.bg-charcoal .formule-name,
.bg-charcoal-soft .formule-name {
  color: var(--color-ivory);
}

/* La "promesse" (2e position du nouvel ordre nom → promesse → prix →
   contenu → CTA) réutilise .exp-tagline telle quelle, simplement
   déplacée juste sous .formule-name dans le balisage (voir
   mariages.html) — pas de nouvelle classe nécessaire. */

/* Encadré "Ce que comprend X" (2026-09-11, retour Laurent : le contenu
   de chaque formule doit être plus délimité et les 3 formules encore
   plus démarquées entre elles, surtout sur mobile). Remplace l'ancien
   `border-top` seul (trop faible pour lire le bloc comme une carte à
   part entière) par un contour complet + un liseré de couleur à gauche,
   propre à chaque formule — sans ombre ni angle arrondi, cohérent avec
   le reste du site (voir .feature-list__item--plus pour le seul autre
   usage de border-radius du site, conservé ici pour rester cohérent
   avec ce repère visuel déjà existant). */
.formule-panel {
  border: 1px solid var(--color-line-dark);
  border-left-width: 4px;
  border-radius: 0 4px 4px 0;
}

/* Sélecteurs composés (pas de descendant) : bg-charcoal-soft est posé
   directement sur le même élément que .formule-panel dans le balisage
   (voir Vintage Signature), pas sur un ancêtre. */
.formule-panel.bg-charcoal,
.formule-panel.bg-charcoal-soft,
.bg-charcoal .formule-panel,
.bg-charcoal-soft .formule-panel {
  border-color: var(--color-line);
  border-left-width: 4px;
}

/* Épure — univers simple/maîtrisé : liseré neutre, encre atténuée. */
.formule-panel--epure {
  border-left-color: var(--color-text-faint);
}

/* Instants — univers musique + souvenirs : liseré doré, en écho au
   badge "EN PLUS" du Photobooth dans la liste ci-dessous. */
.formule-panel--instants {
  border-left-color: var(--color-gold-ink);
}

/* Vintage Signature — univers vinyle/matière : liseré doré plus clair,
   lisible sur le fond charcoal-soft. Sélecteur composé (.formule-panel
   répété) : nécessaire pour égaler la spécificité de la règle
   .formule-panel.bg-charcoal-soft ci-dessus (2 classes) — sinon, malgré
   l'ordre dans la feuille de style, cette règle plus spécifique gagne
   et écrase border-left-color via le raccourci border-color. */
.formule-panel.formule-panel--vintage {
  border-left-color: var(--color-gold);
}

/* =========================================================
   EXP-PHOTO — la photographie seule, plein cadre, sans aucun
   texte superposé : elle doit se suffire à elle-même avant
   même que le texte ne soit lu (Vintage Signature).
   ========================================================= */

.exp-photo {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
}

@media (min-width: 760px) {
  .exp-photo { min-height: 88vh; }
}

.exp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  display: block;
}

/* =========================================================
   EXP-SHOWCASE — le texte de l'expérience, juste après sa
   photographie, dans un bloc distinct (jamais superposé).
   ========================================================= */

.exp-showcase__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

@media (min-width: 900px) {
  .exp-showcase__grid {
    /* Photo plafonnée à 520px de large : au-delà, le fichier disponible
       (1086px max) ne suffit plus à rester net sur les écrans Retina. */
    grid-template-columns: minmax(0, 520px) 1fr;
    align-items: start;
    gap: clamp(3rem, 6vw, 5rem);
  }
}

.exp-showcase__title {
  font-size: var(--fs-display);
  color: var(--color-ivory);
  max-width: 13ch;
}

.exp-showcase__text {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: 1.8;
  color: var(--color-beige-soft);
  max-width: 50ch;
}

.exp-showcase__availability {
  margin-top: 2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--color-beige);
  opacity: 0.9;
}

/* =========================================================
   BANDE PANORAMIQUE (moments forts / prestations complémentaires
   illustrées par une vraie photographie, sans en faire un
   catalogue d'options)
   ========================================================= */

.panorama {
  width: 100%;
}

.panorama__caption {
  margin-top: 1rem;
  text-align: center;
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold-ink);
  text-transform: uppercase;
}

/* =========================================================
   En-tête de section générique (titre + eyebrow ivoire/charbon)
   ========================================================= */

.section-head {
  max-width: 640px;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head .eyebrow {
  margin-bottom: 1.1rem;
  display: block;
}

.section-head__title {
  font-size: var(--fs-h2);
}