/* ===========================================================
   PAGES.CSS — Styles spécifiques aux pages (V2 éditoriale)
   Tous les composants génériques sont dans main.css.
   =========================================================== */

/* ===========================================================
   HOME — 8 sections, layouts variés
   =========================================================== */

/* ============================================================
   Sections III & IV — Splits 2 colonnes harmonisés
   Structure et espacements identiques. Différenciation par :
   - III (Aquarelle)   : fond bleu ciel · photo À GAUCHE en frame polaroid
   - IV (Présentation) : fond crème     · photo À DROITE en rectangle nette
   La signature "Élodie" n'apparaît qu'une seule fois (section IV).
   ============================================================ */
.home-aquarelle__grid,
.home-elodie__grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
}

/* III — média polaroid (frame avec rotation et caption) */
.home-aquarelle__media {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 4vw, 40px) 0;
}
.home-aquarelle__media .frame-photo {
  display: block;
  width: 100%;
  max-width: 460px;
}

/* IV — photo nette rectangulaire */
.home-elodie__photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-deep);
}

/* Texte — colonne identique pour III et IV */
.home-aquarelle__text,
.home-elodie__text {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.home-aquarelle__text .chapter-mark,
.home-elodie__text .chapter-mark { margin: 0 0 var(--space-md); }
.home-aquarelle__text .eyebrow,
.home-elodie__text .eyebrow { margin: 0 0 var(--space-md); }
.home-aquarelle__text .h-1,
.home-elodie__text .h-1 { margin: 0 0 var(--space-lg); }
.home-aquarelle__text .text-body,
.home-elodie__text .text-body { margin: 0 0 var(--space-lg); }
.home-elodie__text .signature { margin: 0 0 var(--space-lg); }
.home-elodie__cta { margin-top: var(--space-xs); }

@media (max-width: 900px) {
  .home-aquarelle__grid,
  .home-elodie__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
  .home-aquarelle__text,
  .home-elodie__text { max-width: none; }
  .home-aquarelle__media .frame-photo,
  .home-elodie__photo { max-width: 480px; margin: 0 auto; }
  /* Sur mobile, la photo passe en premier pour les deux sections */
  .home-elodie__grid .home-elodie__photo { order: -1; }
}

/* 5b. Offres preview — liste éditoriale 4 lignes (style magazine) */
.home-offres .section-head--split {
  margin-bottom: var(--space-2xl);
  /* Colonne du titre plus large : sinon "une seule promesse." wrap en 3 lignes */
  grid-template-columns: 1.5fr 1fr;
}
.home-offres .section-head--split .h-1 {
  text-wrap: balance;
}
@media (max-width: 900px) {
  .home-offres .section-head--split {
    grid-template-columns: 1fr;
  }
}

.offres-list {
  display: flex;
  flex-direction: column;
}
.offres-list__item {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border-soft);
  transition: padding var(--t-base), background var(--t-base);
}
.offres-list__item:last-child { border-bottom: 1px solid var(--border-soft); }
.offres-list__item:hover {
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  background: var(--creme);
}

.offres-list__link {
  display: grid;
  grid-template-columns: 56px 1fr auto 40px;
  gap: var(--space-md);
  align-items: baseline;
  text-decoration: none;
  color: var(--encre);
}
.offres-list__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  color: var(--bleu-jeans);
  line-height: 1;
  letter-spacing: -0.01em;
}
.offres-list__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  color: var(--encre);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  transition: color var(--t-base);
}
.offres-list__item:hover .offres-list__name { color: var(--bleu-nuit); }
.offres-list__price {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  color: var(--encre);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.offres-list__arrow {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--bleu-jeans);
  transition: transform var(--t-base);
  justify-self: end;
}
.offres-list__item:hover .offres-list__arrow { transform: translateX(8px); }
.offres-list__accroche {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gris-doux);
  margin: 10px 0 0;
  padding-left: 72px;
  max-width: 70ch;
}

.home-offres__cta {
  margin-top: var(--space-2xl);
  display: flex;
  justify-content: center;
}

@media (max-width: 700px) {
  .offres-list__link {
    grid-template-columns: 40px 1fr;
    grid-template-rows: auto auto;
    gap: 8px var(--space-sm);
  }
  .offres-list__num { grid-row: 1 / span 2; }
  .offres-list__price { grid-column: 2; font-size: 18px; }
  .offres-list__arrow { display: none; }
  .offres-list__accroche { padding-left: 56px; }
}

/* 8. Avis Google — carrousel sobre style éditorial (inspiré VO-MO) :
   - Header : eyebrow gauche, counter droite (flex space-between)
   - Étoiles
   - Citation italique grande (min-height pour stabilité du carrousel)
   - Footer : nom/date gauche, prev/next droite, séparés par une ligne haute */
.avis-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Head : eyebrow + counter */
.avis-carousel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}
.avis-carousel__head-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avis-carousel__head .chapter-mark { margin: 0; }
.avis-carousel__head .eyebrow { margin: 0; }
.avis-carousel__counter {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gris-doux);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Slide (étoiles + citation) */
.avis-carousel__slide {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-height: 280px;
  transition: opacity var(--t-base), transform var(--t-base);
}
.avis-carousel__stars {
  display: inline-flex;
  gap: 6px;
  font-size: 18px;
  color: var(--bleu-jeans);
  line-height: 1;
}
.avis-carousel__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.4;
  color: var(--encre);
  margin: 0;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: -webkit-line-clamp var(--t-base);
}
.avis-carousel__text.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.avis-carousel__more {
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 0 4px;
  margin-top: -4px;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.avis-carousel__more:hover {
  color: var(--encre);
  border-color: var(--encre);
}

/* Footer : nom/date + prev/next */
.avis-carousel__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-soft);
}
.avis-carousel__author {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.avis-carousel__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  color: var(--encre);
  line-height: 1;
}
.avis-carousel__date {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
}

.avis-carousel__nav-group {
  display: flex;
  gap: var(--space-xs);
}
.avis-carousel__nav {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-line);
  color: var(--encre);
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.avis-carousel__nav:hover {
  background: var(--bleu-ciel);
  border-color: var(--bleu-ciel);
}
.avis-carousel__nav--primary {
  background: var(--encre);
  color: var(--creme);
  border-color: var(--encre);
}
.avis-carousel__nav--primary:hover {
  background: var(--bleu-nuit);
  border-color: var(--bleu-nuit);
  color: #fff;
}

.home-avis__cta {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 700px) {
  .avis-carousel__head { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
  .avis-carousel__foot { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .avis-carousel__slide { min-height: 240px; }
}

/* (styles III + IV harmonisés en haut du fichier) */

/* 6. Mariages preview — section bleu-ciel, grille 4 colonnes, chiffres XL en filigrane */
.home-mariages .section-head--split {
  margin-bottom: var(--space-2xl);
}
.home-mariages__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.home-mariages__cta {
  margin-top: var(--space-2xl);
  display: flex;
  justify-content: center;
}
@media (max-width: 1100px) {
  .home-mariages__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
}
@media (max-width: 600px) {
  .home-mariages__grid { grid-template-columns: 1fr; }
}

/* 8. CTA Contact — split 60/40, gros titre à gauche */
.home-cta__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: end;
}
.home-cta__action {
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}
@media (max-width: 900px) {
  .home-cta__grid { grid-template-columns: 1fr; gap: var(--space-lg); align-items: flex-start; }
}

/* ===========================================================
   OFFRES — 4 cartes éditoriales + détails magazine
   =========================================================== */
.offres-intro { text-align: center; max-width: 760px; margin: 0 auto var(--space-2xl); }

.offres-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  align-items: stretch;
}
.offres-grid .card-offre--bandeau {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 6vw, 80px);
}

@media (max-width: 900px) {
  .offres-grid { grid-template-columns: 1fr; }
  .offres-grid .card-offre--bandeau {
    grid-template-columns: 1fr;
    grid-column: auto;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
  }
}

/* === Cartes d'offres — accents palette === */
/* Carte 1 — Organisation A à Z : bleu-jeans */
.card-offre--c1 {
  border: 2px solid var(--bleu-jeans);
}
.card-offre--c1 .card-offre__num,
.card-offre--c1 .card-offre__tag { color: var(--bleu-jeans); }
.card-offre--c1 .card-offre__list li::before { color: var(--bleu-jeans); }
.card-offre--c1:hover {
  border-color: var(--bleu-nuit);
  box-shadow: 0 14px 32px rgba(61, 77, 92, 0.18);
}

/* Carte 2 — Jour J + Décoration : rose pêche 2 */
.card-offre--c2 {
  border: 2px solid var(--rose-peche-2);
}
.card-offre--c2 .card-offre__num,
.card-offre--c2 .card-offre__tag { color: #c98364; }
.card-offre--c2 .card-offre__list li::before { color: var(--rose-peche-2); }
.card-offre--c2:hover {
  border-color: #c98364;
  box-shadow: 0 14px 32px rgba(236, 200, 182, 0.32);
}

/* Carte 3 — À la carte : vert sauge */
.card-offre--c3 {
  border: 2px solid var(--vert-sauge);
}
.card-offre--c3 .card-offre__num,
.card-offre--c3 .card-offre__tag { color: #6f8358; }
.card-offre--c3 .card-offre__list li::before { color: var(--vert-sauge); }
.card-offre--c3:hover {
  border-color: #6f8358;
  box-shadow: 0 14px 32px rgba(185, 200, 169, 0.32);
}

/* Carte 4 — Élopement : bandeau bleu ciel doux */
.card-offre--c4 {
  background: var(--bleu-ciel);
  border: 2px solid var(--bleu-ciel-2);
}
.card-offre--c4 .card-offre__num,
.card-offre--c4 .card-offre__tag { color: var(--bleu-nuit); }
.card-offre--c4 .card-offre__list li::before { color: var(--bleu-jeans); }
.card-offre--c4:hover {
  border-color: var(--bleu-jeans);
  box-shadow: 0 14px 36px rgba(61, 77, 92, 0.18);
}

.offres-outro { text-align: center; max-width: 680px; margin: 0 auto; }
.offres-outro .h-1 { margin-top: var(--space-md); }
.offres-outro .text-body { margin-left: auto; margin-right: auto; }
.offres-outro .btn { margin-top: var(--space-md); }

/* ===========================================================
   À PROPOS
   =========================================================== */
.apropos-bio__paragraphes p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--encre);
  margin: 0 0 var(--space-md);
  max-width: 48ch;
}

.engagements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 40px);
  margin-top: var(--space-2xl);
}
@media (max-width: 1100px) {
  .engagements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .engagements-grid { grid-template-columns: 1fr; }
}
.engagement-card {
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.engagement-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(54px, 5vw, 72px);
  line-height: 0.9;
  color: var(--bleu-jeans);
  margin: 0;
  letter-spacing: -0.02em;
}
.engagement-card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  margin: 0;
  color: var(--encre);
}
.engagement-card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--gris-doux);
  margin: 0;
  max-width: 30ch;
}

/* ===========================================================
   MARIAGES (liste) — V2 éditoriale horizontale
   Chaque mariage = une ligne avec numéro, petite photo, contenu, flèche.
   =========================================================== */
.mariages-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-2xl);
}
.mariages-list__item {
  border-top: 1px solid var(--border-soft);
  transition: background var(--t-base);
}
.mariages-list__item:last-child {
  border-bottom: 1px solid var(--border-soft);
}
.mariages-list__item:hover {
  background: var(--creme);
}

.mariage-row {
  display: grid;
  grid-template-columns: 64px 200px 1fr 40px;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  text-decoration: none;
  color: var(--encre);
}
.mariage-row__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 52px);
  color: var(--bleu-jeans);
  line-height: 0.9;
  letter-spacing: -0.01em;
}
.mariage-row__media {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: transform var(--t-base);
}
.mariages-list__item:hover .mariage-row__media {
  transform: scale(1.02);
}
.mariage-row__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mariage-row__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
  margin: 0;
}
.mariage-row__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  margin: 0;
  letter-spacing: var(--ls-tight);
  transition: color var(--t-base);
}
.mariages-list__item:hover .mariage-row__title {
  color: var(--bleu-nuit);
}
.mariage-row__excerpt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--gris-doux);
  margin: 0;
  max-width: 56ch;
  line-height: 1.4;
}
.mariage-row__arrow {
  font-family: var(--font-serif);
  font-size: 24px;
  color: var(--bleu-jeans);
  transition: transform var(--t-base);
  text-align: right;
  justify-self: end;
}
.mariages-list__item:hover .mariage-row__arrow {
  transform: translateX(8px);
}

@media (max-width: 900px) {
  .mariage-row {
    grid-template-columns: 48px 140px 1fr;
    grid-template-rows: auto;
    gap: var(--space-md);
    padding: var(--space-md) 0;
  }
  .mariage-row__arrow { display: none; }
}
@media (max-width: 600px) {
  .mariage-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .mariage-row__num { font-size: 28px; }
  .mariage-row__media {
    height: 220px;
    aspect-ratio: auto;
  }
}

/* ===========================================================
   MARIAGE (détail)
   =========================================================== */
.mariage-intro { text-align: center; max-width: 720px; margin: 0 auto; }
.mariage-intro .text-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-xl);
  color: var(--encre);
  margin-left: auto;
  margin-right: auto;
}

/* Galerie mariage — grille uniforme, alignement haut/bas parfait sur chaque ligne */
.mariage-galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mariage-galerie__item {
  background-size: cover;
  background-position: center;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xs);
  transition: transform var(--t-base), box-shadow var(--t-base);
  border: 0;
  padding: 0;
  cursor: zoom-in;
  position: relative;
  display: block;
  width: 100%;
}
.mariage-galerie__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25) 100%);
  opacity: 0;
  transition: opacity var(--t-base);
}
.mariage-galerie__item:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-card);
}
.mariage-galerie__item:hover::after { opacity: 1; }
.mariage-galerie__item:focus-visible {
  outline: 2px solid var(--bleu-jeans);
  outline-offset: 4px;
}
@media (max-width: 900px) {
  .mariage-galerie { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .mariage-galerie { grid-template-columns: 1fr; }
}

/* ─── Lightbox ─── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 15, 15, 0.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 60px);
  animation: lightboxFade 200ms ease-out;
}
.lightbox.is-open { display: flex; }
@keyframes lightboxFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox__inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 160px);
  max-height: 100%;
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%;
  max-height: 88vh;
  display: block;
  object-fit: contain;
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
  border-radius: var(--radius-xs);
  cursor: default;
  animation: lightboxImg 280ms cubic-bezier(.22,.61,.36,1);
}
@keyframes lightboxImg {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.lightbox__close,
.lightbox__nav {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 52px; height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-base);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 0;
}
.lightbox__close:hover,
.lightbox__nav:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.5);
}
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 1;
}
.lightbox__nav { z-index: 1; }
.lightbox__nav--prev:hover { transform: translateX(-3px); }
.lightbox__nav--next:hover { transform: translateX(3px); }
.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lightbox__inner { max-width: 100%; }
  .lightbox__close { top: 12px; right: 12px; width: 44px; height: 44px; }
  .lightbox__nav {
    position: absolute;
    bottom: 70px;
    width: 44px; height: 44px;
  }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__counter { bottom: 24px; }
}

.mariage-aquarelle .split__media {
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-deep);
}
.mariage-retour { text-align: center; }
.mariage-retour a {
  color: var(--bleu-jeans);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.mariage-retour a:hover { color: var(--encre); }

/* ===========================================================
   CONTACT — page de remerciement (après envoi formulaire)
   =========================================================== */
.thank-you {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  animation: thankYouIn 600ms cubic-bezier(.22,.61,.36,1);
}
@keyframes thankYouIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.thank-you__eyebrow {
  margin: 0 auto var(--space-lg);
  justify-content: center;
}
.thank-you__title {
  margin: 0 0 var(--space-lg);
  font-size: clamp(44px, 6.5vw, 88px);
}
.thank-you__title em {
  font-style: normal;
  color: var(--bleu-jeans);
}
.thank-you__text {
  margin: 0 auto var(--space-xl);
  max-width: 50ch;
  text-align: center;
}
.thank-you__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .thank-you__actions { flex-direction: column; align-items: stretch; }
  .thank-you__actions .btn { justify-content: center; }
}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-infos {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.contact-infos__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border-soft);
}
.contact-infos__item dt {
  font-family: var(--font-sans);
  font-size: var(--fs-nano);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
  margin: 0;
}
.contact-infos__item dd {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  color: var(--encre);
}
.contact-infos__item dd a {
  border-bottom: 1px solid var(--border-soft);
  transition: border-color var(--t-fast);
}
.contact-infos__item dd a:hover { border-color: var(--bleu-jeans); }

.contact-form { background: transparent; }
.contact-form .form { gap: var(--space-lg); }

.avis-placeholder {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
  margin-top: var(--space-xl);
}
@media (max-width: 900px) { .avis-placeholder { grid-template-columns: 1fr; } }
.avis-card {
  background: var(--blanc);
  border: 1px solid var(--border-soft);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  opacity: 0.7;
}
.avis-card__stars {
  display: flex; gap: 4px; color: var(--rose-peche-2);
}
.avis-card__stars svg { width: 18px; height: 18px; }
.avis-card__placeholder {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-l);
  line-height: var(--lh-normal);
  color: var(--gris-doux);
  margin: 0;
}
.avis-card__author {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
  margin: auto 0 0;
}

/* ===========================================================
   LEGAL
   =========================================================== */
.legal-page {
  padding: clamp(120px, 16vh, 180px) 0 var(--space-3xl);
  background: var(--creme);
}
.legal-page__head {
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
.legal-page__title {
  margin: var(--space-md) 0 var(--space-sm);
}
.legal-page__updated {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--gris-doux);
  margin: 0;
}
.legal-page__content {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--encre);
}
.legal-page__content > h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--encre);
  margin: var(--space-xl) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
  line-height: 1.2;
}
.legal-page__content > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.legal-page__content > h3 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--encre);
  margin: var(--space-lg) 0 var(--space-sm);
  line-height: 1.3;
}
.legal-page__content p {
  margin: 0 0 var(--space-md);
}
.legal-page__content ul,
.legal-page__content ol {
  margin: 0 0 var(--space-md);
  padding-left: 0;
  list-style: none;
}
.legal-page__content ul li {
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: var(--lh-normal);
}
.legal-page__content ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--bleu-jeans);
}
.legal-page__content ol {
  counter-reset: legal-ol;
}
.legal-page__content ol li {
  counter-increment: legal-ol;
  padding: 6px 0 6px 32px;
  position: relative;
  line-height: var(--lh-normal);
}
.legal-page__content ol li::before {
  content: counter(legal-ol) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bleu-jeans);
}
.legal-page__content strong {
  font-weight: 500;
  color: var(--encre);
}
.legal-page__content em { font-style: italic; }
.legal-page__content a {
  color: var(--bleu-jeans);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--t-fast);
}
.legal-page__content a:hover { color: var(--encre); }
.legal-page__content hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-xl) 0;
}

.legal-page__nav {
  max-width: 720px;
  margin: var(--space-3xl) auto 0;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}
.legal-page__nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--bleu-jeans);
  border: 1px solid var(--border-soft);
  padding: 12px 22px;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.legal-page__nav a:hover {
  background: var(--encre);
  color: var(--creme);
  border-color: var(--encre);
}

/* ===========================================================
   404
   =========================================================== */
.page-404 {
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--creme);
  text-align: center;
  padding: var(--space-3xl) var(--container-px);
}
.page-404__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(140px, 22vw, 280px);
  line-height: 0.85;
  margin: 0;
  color: var(--bleu-jeans);
  letter-spacing: -0.04em;
}
.page-404__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.15;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--encre);
}
.page-404__cta { margin-top: var(--space-md); }

/* ===========================================================
   OFFRES — outro CTA encre
   =========================================================== */
.offres-outro .chapter-mark { color: var(--bleu-ciel); }
.offres-outro .eyebrow { color: var(--bleu-ciel); }
.offres-outro .text-body {
  color: rgba(250, 246, 241, 0.75);
  margin-left: auto;
  margin-right: auto;
  max-width: 48ch;
}
.offres-outro .h-display { color: var(--creme); margin-bottom: var(--space-md); }

/* ===========================================================
   À PROPOS — splits + CTA
   =========================================================== */
.apropos-bio__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.apropos-bio__media {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-soft);
}
.apropos-bio__text { max-width: 560px; }
.apropos-bio__text .chapter-mark { margin-bottom: var(--space-md); }
.apropos-bio__text .signature { margin-top: var(--space-lg); }

@media (max-width: 900px) {
  .apropos-bio__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.apropos-approche__grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.apropos-approche__text { max-width: 560px; }
.apropos-approche__media {
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-soft);
}
@media (max-width: 900px) {
  .apropos-approche__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

.apropos-bio__paragraphes p {
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--encre);
  margin: 0 0 var(--space-md);
  max-width: 52ch;
}

.apropos-cta {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.apropos-cta .eyebrow { color: var(--bleu-ciel); }
.apropos-cta .h-display { color: var(--creme); margin-bottom: var(--space-md); }
.apropos-cta .text-body {
  color: rgba(250, 246, 241, 0.75);
  margin: 0 auto var(--space-lg);
  max-width: 48ch;
}

/* ===========================================================
   MARIAGES — CTA bleu ciel
   =========================================================== */
.mariages-cta {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.mariages-cta .h-display { margin-bottom: var(--space-md); }
.mariages-cta .text-body {
  margin: 0 auto var(--space-lg);
  max-width: 48ch;
}

/* ===========================================================
   MARIAGE DÉTAIL — aquarelle split + intro
   =========================================================== */
.mariage-intro .chapter-mark { color: var(--bleu-jeans); }
.mariage-intro .h-manifest { margin-bottom: var(--space-md); }
.mariage-intro .text-body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-xl);
  color: var(--encre);
  margin-left: auto;
  margin-right: auto;
  max-width: 56ch;
}
.mariage-intro .ornament { margin-top: var(--space-lg); }

.mariage-aquarelle__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 7vw, 120px);
  align-items: center;
}
.mariage-aquarelle__media {
  position: relative;
  padding: clamp(20px, 4vw, 60px) 0;
}
.mariage-aquarelle__media .frame-photo {
  display: block;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}
.mariage-aquarelle__text { max-width: 540px; }
.mariage-aquarelle__text .chapter-mark { margin-bottom: var(--space-md); }
.mariage-aquarelle__text .signature { margin-top: var(--space-lg); }

@media (max-width: 900px) {
  .mariage-aquarelle__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* ===========================================================
   CONTACT — checkbox, phone CTA
   =========================================================== */
.contact-intro .chapter-mark { margin-bottom: var(--space-md); }

.field__checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--gris-doux);
  cursor: pointer;
  max-width: 56ch;
}
.field__checkbox input[type="checkbox"] {
  margin: 4px 0 0;
  width: 16px;
  height: 16px;
  accent-color: var(--bleu-jeans);
  flex-shrink: 0;
}

.contact-phone {
  text-align: center;
}
.contact-phone .chapter-mark { color: var(--bleu-ciel); margin-bottom: var(--space-md); }
.contact-phone__link {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1;
  color: var(--creme);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--bleu-ciel);
  padding-bottom: 8px;
  transition: color var(--t-base), border-color var(--t-base);
}
.contact-phone__link:hover {
  color: var(--bleu-ciel);
  border-color: var(--creme);
}