/* ===========================================================
   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
   =========================================================== */
/* Section intro offres (déplacée après les forfaits) — padding standard. */
.offres-intro { text-align: center; }

.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); }
/* Signature équilibrée : autant d'espace au-dessus (fin du paragraphe)
   qu'en dessous (bouton qui suit) */
.apropos-bio__text .signature { margin: var(--space-lg) 0; }

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

.apropos-approche__grid {
  display: grid;
  /* Colonne texte dimensionnée sur son contenu (max 560px) au lieu de 1fr,
     sinon ~1000px de vide entre le texte et la photo. Groupe centré. */
  grid-template-columns: minmax(0, 560px) clamp(300px, 32vw, 400px);
  gap: clamp(48px, 5vw, 88px);
  align-items: center;
  justify-content: center;
}
.apropos-approche__text { max-width: 560px; }
/* Photo dans un cadre blanc (comme accueil / offres) — colonne dimensionnée
   sur la photo pour éviter le grand vide entre texte et image */
.apropos-approche__media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.apropos-approche__media .frame-photo {
  display: block;
  width: 100%;
}
@media (max-width: 900px) {
  .apropos-approche__grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .apropos-approche__media .frame-photo { max-width: 360px; margin: 0 auto; }
}

/* Overrides page À-propos — titres longs, même taille de police, plus de
   largeur pour tenir sur 3 lignes max (sans toucher au font-size). */
body[data-route="a-propos"] .hero__title { max-width: 30ch; }
body[data-route="a-propos"] .apropos-outro .offres-outro { max-width: 920px; }

.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);
}


/* ============= HERO CHIFFRES CLÉS — inline sober editorial ============= */
.hero__chiffres {
  list-style: none;
  padding: clamp(20px, 3vw, 32px) 0 0;
  margin: clamp(22px, 3vw, 32px) 0 0;
  border-top: 1px solid rgba(255,255,255,0.22);
  display: flex;
  gap: clamp(28px, 5vw, 68px);
  flex-wrap: wrap;
  align-items: baseline;
}
.hero__chiffre {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: #fff;
}
.hero__chiffre-value {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero__chiffre-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
  max-width: 22ch;
}
@media (max-width: 640px) {
  .hero__chiffres { gap: 22px; }
  .hero__chiffre-value { font-size: 26px; }
  .hero__chiffre-label { max-width: 16ch; }
}

/* ============= BENEFITS — 3 blocs éditorial magazine (III) ============= */
.home-benefits { position: relative; overflow: hidden; }
.benefits-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2xl) 0 0;
  display: grid;
  gap: 0;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.benefits-list__item {
  display: grid;
  grid-template-columns: minmax(60px, 90px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: baseline;
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid rgba(139, 164, 176, 0.22);
}
.benefits-list__item:last-child { border-bottom: 1px solid rgba(139, 164, 176, 0.22); }
.benefits-list__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.85;
  color: var(--bleu-jeans);
  margin: 0;
}
.benefits-list__body { min-width: 0; max-width: 62ch; }
.benefits-list__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  margin: 0 0 6px;
  color: var(--encre);
  text-wrap: balance;
}
.benefits-list__subtitle {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--bleu-jeans);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0.01em;
}
.benefits-list__text {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--encre);
  margin: 0;
}
@media (max-width: 720px) {
  .benefits-list__item { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
  .benefits-list__num { font-size: 44px; line-height: 0.9; }
}

/* ============= AGENCE PAGE — 3 colonnes éditoriales (V) ============= */
.agence-blocs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 5vw, 72px);
  margin-top: var(--space-2xl);
}
.agence-bloc {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(139, 164, 176, 0.28);
}
.agence-bloc__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 34px;
  line-height: 1;
  color: var(--bleu-jeans);
  margin: 0 0 var(--space-xs);
  opacity: 0.75;
  letter-spacing: 0.02em;
}
.agence-bloc:nth-child(2) .agence-bloc__num { color: #c98364; }
.agence-bloc:nth-child(3) .agence-bloc__num { color: #6f8358; }

.agence-bloc__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  margin: 0 0 var(--space-sm);
  color: var(--encre);
  text-wrap: balance;
}
.agence-bloc__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--encre);
  margin: 0;
  flex: 1;
}
.agence-bloc__cta { align-self: flex-start; margin-top: var(--space-md); }
@media (max-width: 900px) {
  .agence-blocs { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============= HOME OUTRO (VII) — fond encre ============= */
.home-outro { position: relative; overflow: hidden; text-align: center; }
.home-outro__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) 0;
  color: var(--creme);
}
.home-outro__inner .eyebrow { color: var(--bleu-ciel); margin-bottom: var(--space-sm); }
.home-outro__inner .h-display {
  color: var(--creme);
  margin-bottom: var(--space-lg);
}

/* ============= OFFRES INTRO — questions (II) — éditorial minimal ============= */
.offres-intro__questions {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) auto 0;
  max-width: 620px;
  display: grid;
  gap: 0;
}
.offres-intro__questions li {
  position: relative;
  padding: clamp(16px, 2vw, 22px) 0 clamp(16px, 2vw, 22px) 44px;
  border-top: 1px solid rgba(139, 164, 176, 0.22);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--encre);
  text-wrap: balance;
}
.offres-intro__questions li:last-child { border-bottom: 1px solid rgba(139, 164, 176, 0.22); }
.offres-intro__questions li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-52%);
  color: var(--bleu-jeans);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  width: 32px;
  text-align: left;
}

/* ============= FORFAITS — Header + Stack (III) ============= */
.offres-forfaits__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-2xl);
}
.offres-forfaits__head .chapter-mark { margin: 0 0 var(--space-sm); }
.offres-forfaits__head .eyebrow { margin: 0 0 var(--space-md); }
.offres-forfaits__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.15;
  color: var(--encre);
  margin: 0 0 var(--space-md);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.offres-forfaits__lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-body-l);
  color: var(--gris-doux);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 58ch;
}

.forfaits-stack {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.forfait {
  background: var(--blanc);
  border-top: 3px solid var(--bleu-jeans);
  overflow: hidden;
  transition: transform var(--t-base);
}
.forfait--c1 { border-color: var(--bleu-jeans); }
.forfait--c2 { border-color: var(--rose-peche-2, #c98364); }
.forfait--c3 { border-color: var(--vert-sauge); }
.forfait--c4 { border-color: var(--bleu-jeans); }
.forfait__inner { padding: clamp(28px, 3.5vw, 52px); }

/* Photo au centre du header : remplit tout l'espace entre le bloc titre
   (gauche) et le bloc prix/CTA (droite), gap égal des deux côtés. */
.forfait__media {
  align-self: stretch;
  width: 100%;
  min-height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 24px rgba(45, 65, 92, 0.08);
  transition: background-size var(--t-base);
}
.forfait:hover .forfait__media { background-size: 106%; }

.forfait__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-lg);
  align-items: start;
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: var(--space-lg);
}
/* Header avec photo : titre(auto) · photo(1fr, remplit le centre) · prix(auto)
   Le gap de .forfait__head est identique de chaque côté de la photo. */
.forfait__head--photo {
  grid-template-columns: minmax(220px, 32%) 1fr auto;
  align-items: stretch;
}
.forfait__head--photo .forfait__head-left,
.forfait__head--photo .forfait__head-right { align-self: start; }

@media (max-width: 860px) {
  /* Empilé : photo en haut pleine largeur, puis titre, puis prix/CTA */
  .forfait__head--photo {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "left" "right";
    align-items: stretch;
  }
  .forfait__head--photo .forfait__head-left { grid-area: left; }
  .forfait__head--photo .forfait__head-right { grid-area: right; }
  .forfait__head--photo .forfait__media {
    grid-area: media;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    margin-bottom: var(--space-sm);
  }
}
.forfait__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 24px;
  color: var(--gris-doux);
  margin: 0;
}
.forfait__tag {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bleu-jeans);
  margin: 6px 0 12px;
}
.forfait--c2 .forfait__tag { color: #c98364; }
.forfait--c3 .forfait__tag { color: #6f8358; }
.forfait__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  color: var(--encre);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
  max-width: 20ch;
}
.forfait__accroche {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--fs-body-l);
  color: var(--gris-doux);
  line-height: 1.4;
  margin: 0;
  max-width: 52ch;
}
.forfait__head-right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-sm);
}
.forfait__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1;
  color: var(--encre);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.forfait__price-from {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gris-doux);
}

.forfait__body {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: var(--space-md);
}
.forfait__col-title {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bleu-jeans);
  margin: 0 0 var(--space-md);
}
.forfait--c2 .forfait__col-title { color: #c98364; }
.forfait--c3 .forfait__col-title { color: #6f8358; }
.forfait__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.forfait__list li {
  position: relative;
  padding-left: 24px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--encre);
}
.forfait__list--check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bleu-jeans);
  font-weight: 700;
}
.forfait--c2 .forfait__list--check li::before { color: #c98364; }
.forfait--c3 .forfait__list--check li::before { color: #6f8358; }
.forfait__list--dots li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: -3px;
  color: var(--bleu-jeans);
  font-size: 20px;
}
.forfait--c2 .forfait__list--dots li::before { color: #c98364; }
.forfait--c3 .forfait__list--dots li::before { color: #6f8358; }

.forfait__options {
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--gris-doux);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-soft);
  margin: var(--space-md) 0 0;
}

@media (max-width: 900px) {
  .forfait__head { grid-template-columns: 1fr; }
  .forfait__head-right { text-align: left; align-items: flex-start; }
  .forfait__body { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ============= PAPETERIE (offres IV) ============= */
.offres-papeterie { position: relative; overflow: hidden; }
.papeterie-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.papeterie-grid__media {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Fix : sans width explicite le .frame-photo inline-block se réduit à zéro */
.papeterie-grid__media .frame-photo {
  display: block;
  width: 100%;
  max-width: 420px;
}
.papeterie-grid__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.papeterie-grid__text .signature {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.4;
  letter-spacing: 0;
  transform: none;
  margin-top: var(--space-lg);
  color: var(--bleu-jeans);
  max-width: 48ch;
}
@media (max-width: 900px) {
  .papeterie-grid { grid-template-columns: 1fr; }
  .papeterie-grid__media .frame-photo { max-width: 360px; margin: 0 auto; }
}

/* ============= FAQ (offres V) ============= */
.faq-list {
  display: grid;
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-top: 1px solid rgba(139, 164, 176, 0.25);
  transition: none;
}
.faq-item:last-child { border-bottom: 1px solid rgba(139, 164, 176, 0.25); }
.faq-item__question {
  cursor: pointer;
  padding: clamp(20px, 2.5vw, 32px) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.3;
  color: var(--encre);
  list-style: none;
  text-wrap: balance;
}
.faq-item__question:hover { color: var(--bleu-jeans); }
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: var(--bleu-jeans);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 300;
  line-height: 1;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1);
  margin-top: 2px;
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer {
  padding: 4px 0 clamp(20px, 2.5vw, 28px);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--encre);
  margin: 0;
  max-width: 68ch;
}
/* Animation d'ouverture : la réponse fade-in avec un slight slide */
.faq-item[open] .faq-item__answer {
  animation: faq-open 320ms cubic-bezier(.25, 0.1, .25, 1) both;
}
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-item__answer { animation: none; }
}

/* ============= À PROPOS — Manifesto, Histoire, PAGE Explication, Traits, Schätzi ============= */
.apropos-histoire__paragraphes { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.apropos-histoire__paragraphes p { font-size: var(--fs-body); line-height: 1.65; color: var(--encre); margin: 0; }

/* Signature du manifesto (III) — centrée sur 2 lignes.
   Le .signature de base est inline-block + rotate : ici on force block
   centré et on réduit la taille pour que les 2 lignes tiennent et soient
   réellement centrées horizontalement. */
.apropos-manifesto .signature {
  display: block;
  text-align: center;
  transform: none;
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.35;
  max-width: 100%;
}

.page-explication { max-width: 760px; margin: 0 auto; text-align: center; }
.page-explication__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(60px, 8vw, 112px);
  line-height: 1;
  color: var(--bleu-jeans);
  margin: var(--space-md) 0 var(--space-lg);
  letter-spacing: 0.05em;
}
.page-explication__text {
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: var(--encre);
  max-width: 58ch;
  margin: 0 auto;
}
.page-explication__text strong {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--bleu-jeans);
}

.traits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(40px, 5vw, 72px) clamp(48px, 6vw, 96px);
  margin-top: var(--space-2xl);
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
.trait-card {
  padding-top: var(--space-md);
  border-top: 1px solid rgba(139, 164, 176, 0.25);
}
.trait-card__num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  line-height: 1;
  color: var(--bleu-jeans);
  margin: 0 0 var(--space-sm);
  opacity: 0.75;
}
.trait-card:nth-child(2) .trait-card__num { color: #c98364; }
.trait-card:nth-child(3) .trait-card__num { color: #6f8358; }
.trait-card:nth-child(4) .trait-card__num { color: var(--rose-peche-2); }
.trait-card__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  color: var(--encre);
  margin: 0 0 var(--space-sm);
  text-wrap: balance;
}
.trait-card__text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--encre);
  margin: 0;
}
@media (max-width: 720px) { .traits-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }

.schatzi-block { max-width: 780px; margin: 0 auto; }
.schatzi-block .h-1 { color: var(--encre); }

/* Schàtzi Chérie — 2 colonnes texte + photo */
.schatzi-grid {
  display: grid;
  grid-template-columns: clamp(300px, 34vw, 420px) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  justify-content: center;
}
.schatzi-grid__media { display: flex; justify-content: center; }
.schatzi-grid__media .frame-photo { display: block; width: 100%; }
.schatzi-grid__text { max-width: 560px; }
.schatzi-grid__text .h-1 { color: var(--encre); }
.schatzi-grid__text .text-body { margin: var(--space-md) 0 var(--space-lg); }
@media (max-width: 900px) {
  .schatzi-grid { grid-template-columns: 1fr; }
  .schatzi-grid__media .frame-photo { max-width: 360px; margin: 0 auto; }
}

/* ============= MARIAGES — Photos à venir (soon) ============= */
.mariage-row--soon {
  opacity: 0.72;
  cursor: default;
  pointer-events: none;
  filter: grayscale(35%);
}
.mariage-row--soon .mariage-row__media {
  background-color: var(--bleu-ciel);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mariage-row__badge {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bleu-nuit);
  background: rgba(255,255,255,0.9);
  padding: 8px 14px;
  border-radius: 999px;
  z-index: 1;
}
.mariage-row__soon-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris-doux);
  align-self: center;
}


/* ============= HOME BENEFITS — asymétrique 2 photos empilées/liste (III) ============= */
.home-benefits__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}
.home-benefits__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-benefits__media .frame-photo {
  display: block;
  width: 100%;
  max-width: 340px;
}
/* Décalage éditorial : photo du haut à gauche, photo du bas à droite */
.home-benefits__photo--top {
  transform: rotate(-2deg);
  align-self: flex-start;
  margin-left: -12px;
  z-index: 1;
}
.home-benefits__photo--bottom {
  transform: rotate(2.5deg);
  align-self: flex-end;
  margin-right: -8px;
  margin-top: -28px;
  z-index: 2;
}
/* Variante frame-photo aspect ratio 3/4 (plus haute) */
.frame-photo--tall .frame-photo__media { aspect-ratio: 3 / 4; }

.home-benefits__content { max-width: 620px; }
.home-benefits__content .chapter-mark { margin: 0 0 var(--space-sm); }
.home-benefits__content .eyebrow { margin: 0 0 var(--space-sm); }
.home-benefits__content .h-1 { margin: 0 0 var(--space-lg); }

/* Override : dans le split, la liste des bénéfices doit rester compacte à gauche */
.home-benefits__content .benefits-list { margin-top: 0; max-width: none; }
.home-benefits__content .benefits-list__item {
  grid-template-columns: minmax(50px, 72px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(24px, 3vw, 36px) 0;
}
.home-benefits__content .benefits-list__num { font-size: clamp(40px, 5vw, 64px); }
.home-benefits__content .benefits-list__title { font-size: clamp(20px, 2.2vw, 26px); }

@media (max-width: 900px) {
  .home-benefits__grid { grid-template-columns: 1fr; gap: var(--space-2xl); }
  /* Sur mobile : les 2 photos côte à côte (au lieu d'empilées) et plus petites */
  .home-benefits__media {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  .home-benefits__media .frame-photo {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 8px;
  }
  .home-benefits__photo--top,
  .home-benefits__photo--bottom {
    transform: none;
    align-self: flex-start;
    margin: 0;
  }
  .home-benefits__content { max-width: none; }
}

/* ============= HOME AGENCE PAGE — Header full width + 3 blocs ============= */
.home-agence__head {
  text-align: left;
  margin-bottom: var(--space-2xl);
}
.home-agence__head .chapter-mark { margin: 0 0 var(--space-md); }
.home-agence__head .eyebrow { margin: 0 0 var(--space-md); }
.home-agence__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.1;
  color: var(--encre);
  margin: 0;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
@media (max-width: 900px) {
  .home-agence__title { font-size: 32px; }
}


/* ============= HOME OFFRES PREVIEW — Header stacked (V4) ============= */
.home-offres__head {
  text-align: left;
  margin-bottom: var(--space-2xl);
}
.home-offres__head .chapter-mark { margin: 0 0 var(--space-sm); }
.home-offres__head .eyebrow { margin: 0 0 var(--space-md); }
.home-offres__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.1;
  color: var(--encre);
  margin: 0 0 var(--space-md);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
  max-width: 22ch;
}
.home-offres__lead {
  max-width: 62ch;
  margin: 0;
}

/* ============= FRAME-PHOTO — variante sans caption ============= */
.frame-photo--no-caption { padding-bottom: 18px; }
.frame-photo--no-caption .frame-photo__caption { display: none; }

/* ============= HOME PÊLE-MÊLE — Full-bleed mosaïque photos (IV bis) ============= */
.home-pelmell {
  width: 100%;
  padding: 0;
  background: var(--rose-peche);
}
.pelmell-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
  height: clamp(480px, 80vh, 720px);
  padding: 8px;
}
.pelmell-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 700ms cubic-bezier(.2, 0, .2, 1);
}
.pelmell-photo:hover { transform: scale(1.02); }

/* Répartition éditoriale — 6 photos, tailles variées */
.pelmell-photo--1 { grid-column: 1 / 5;  grid-row: 1 / 3; }  /* grande gauche */
.pelmell-photo--2 { grid-column: 5 / 8;  grid-row: 1; }       /* haut centre */
.pelmell-photo--3 { grid-column: 8 / 13; grid-row: 1; }       /* haut droit */
.pelmell-photo--4 { grid-column: 5 / 8;  grid-row: 2; }       /* bas centre */
.pelmell-photo--5 { grid-column: 8 / 11; grid-row: 2; }       /* bas milieu-droite */
.pelmell-photo--6 { grid-column: 11 / 13; grid-row: 2; }      /* bas droit petit */

@media (max-width: 900px) {
  .pelmell-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: clamp(500px, 70vh, 620px);
  }
  .pelmell-photo--1 { grid-column: 1 / 4; grid-row: 1 / 3; }
  .pelmell-photo--2 { grid-column: 4 / 7; grid-row: 1; }
  .pelmell-photo--3 { grid-column: 4 / 7; grid-row: 2; }
  .pelmell-photo--4 { grid-column: 1 / 3; grid-row: 3; }
  .pelmell-photo--5 { grid-column: 3 / 5; grid-row: 3; }
  .pelmell-photo--6 { grid-column: 5 / 7; grid-row: 3; }
}