/* ==========================================================================
   Vanessa Sedlak, séances photo hors mariage — feuille de style (reprise du site mariage)
   Esthétique éditoriale inspirée des meilleurs sites de photographes
   de mariage : grands aplats de blanc, typographie serif élégante,
   images pleine largeur, animations discrètes au scroll.
   ========================================================================== */

:root {
  --cream: #fdfbf7;
  --cream-deep: #f6f0e6;
  --ink: #242220;
  --ink-soft: #4a453f;
  --rose: #c9a190;
  --rose-deep: #a97c68;
  --line: #ddd4c8;
  --white: #ffffff;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --nav-h: 88px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-weight: 400;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6vw;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  padding: 0.95em 2.4em;
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--cream); }
.btn-light { border-color: var(--white); color: var(--white); }
.btn-light:hover { background: var(--white); color: var(--ink); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), height 0.4s var(--ease);
  background: transparent;
}
.nav.is-solid,
.nav-page {
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 var(--line);
  height: 76px;
}

.nav__logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: var(--white);
  /* Ombre portée tant que le menu est transparent sur la photo. */
  text-shadow: 0 1px 14px rgba(20,18,16,0.6);
  transition: color 0.5s var(--ease);
}
.nav.is-solid .nav__logo,
.nav-page .nav__logo { color: var(--ink); text-shadow: none; }

.nav__links {
  display: flex;
  gap: 2.6rem;
  list-style: none;
  margin: 0; padding: 0;
}
.nav__links a {
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 12px rgba(20,18,16,0.6);
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  transition: color 0.5s var(--ease), border-color 0.3s var(--ease);
}
.nav.is-solid .nav__links a,
.nav-page .nav__links a { color: var(--ink-soft); text-shadow: none; }
.nav__links a:hover,
.nav__links a.is-active { border-color: currentColor; }

/* Bouton de langue : détaché du menu par un filet, pour qu'on ne le confonde
   pas avec une page du site. */
.nav__langue { padding-left: 1.5rem; border-left: 1px solid currentColor; opacity: 0.7; }
.nav__langue:hover { opacity: 1; }
@media (max-width: 900px) { .nav__langue { padding-left: 0; border-left: none; } }

.nav__toggle {
  display: none;
  width: 30px; height: 22px;
  position: relative;
  background: none; border: none; cursor: pointer;
  z-index: 1001;
}
.nav__toggle span {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--white);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.nav.is-solid .nav__toggle span,
.nav-page .nav__toggle span { background: var(--ink); }
.nav__toggle span:nth-child(1) { top: 0; }
.nav__toggle span:nth-child(2) { top: 10px; }
.nav__toggle span:nth-child(3) { top: 20px; }
.nav--open .nav__toggle span { background: var(--ink) !important; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ---------- Hero (accueil) ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  width: 100%;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.02);
}
/* La photo doit rester nette : pas de voile gris en travers de l'image.
   L'assombrissement est concentré sur les deux extrémités, là où se trouvent
   le menu et le titre. Le reste de la photo est intact. La lisibilité du texte
   est assurée par l'ombre portée, qui ne ternit pas l'image. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(20,18,16,0.34) 0%,
      rgba(20,18,16,0.05) 16%,
      rgba(20,18,16,0.00) 42%,
      rgba(20,18,16,0.00) 58%,
      rgba(20,18,16,0.42) 88%,
      rgba(20,18,16,0.58) 100%);
}
.hero__content {
  position: absolute;
  left: 0; right: 0; bottom: 17vh;
  text-align: center;
  color: var(--white);
  padding: 0 6vw;
  /* Ombres larges et douces : elles détachent le texte sans salir la photo. */
  text-shadow: 0 2px 34px rgba(20,18,16,0.70), 0 1px 6px rgba(20,18,16,0.55);
}
.hero__eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  opacity: 0.92;
}
.hero__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* Indispensable : la règle générale sur h1 impose sinon une couleur foncée,
     illisible sur une photo. */
  color: var(--white);
}
.hero__sub {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  opacity: 0.92;
}
.hero__scroll {
  position: absolute;
  bottom: 1.8rem; left: 50%;
  transform: translateX(-50%);
  color: var(--white);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(20,18,16,0.6);
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 30px;
  background: rgba(255,255,255,0.7);
  animation: scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- Intro / citation ---------- */
.intro {
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 9vh, 7rem);
  text-align: center;
}
.intro__mark {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  color: var(--rose);
  margin-bottom: 1rem;
}
.intro .eyebrow { display: block; margin-bottom: 1.3rem; }
.intro p {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.6;
  color: var(--ink);
}
.intro__sign {
  margin-top: 2rem;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Respiration horizontale pleine largeur ----------
   Une seule photo horizontale, au milieu des formats verticaux. Le rapport
   est moins large sur téléphone, sinon il ne resterait qu'une fente. */
.moment {
  width: 100%;
  overflow: hidden;
  margin: clamp(1rem, 3vh, 2rem) 0;
}
.moment img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}
@media (max-width: 720px) {
  .moment img { aspect-ratio: 4 / 3; }
}

/* ---------- Blocs éditoriaux de l'accueil ----------
   Toutes les photos du portfolio sont verticales : les cadres le sont aussi,
   pour ne jamais recadrer une image dans un format qui ne lui va pas. */
.editorial {
  display: grid;
  gap: clamp(1rem, 3.5vw, 3.2rem);
  padding: 0 clamp(1.5rem, 8vw, 7rem);
  max-width: 1440px;
  margin: 0 auto;
}
.editorial--duo  { grid-template-columns: repeat(2, 1fr); }
.editorial--trio { grid-template-columns: repeat(3, 1fr); }
.editorial a { display: block; overflow: hidden; }
.editorial img {
  width: 100%;
  height: auto;
  /* Format natif des photos : aucun recadrage. */
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.editorial a:hover img { transform: scale(1.04); }

/* Décalage vertical : c'est lui qui donne le rythme éditorial.
   Réservé aux grands écrans, où il y a la place pour respirer. */
@media (min-width: 900px) {
  .editorial--duo  a:nth-child(2) { margin-top: clamp(3rem, 7vw, 6.5rem); }
  .editorial--trio a:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
  .editorial--trio a:nth-child(3) { margin-top: clamp(0.8rem, 2vw, 1.8rem); }
}
@media (max-width: 560px) {
  .editorial--duo, .editorial--trio { grid-template-columns: 1fr; }
}

/* ---------- Bandeau CTA ---------- */
.cta-band {
  text-align: center;
  padding: clamp(5rem, 10vh, 7rem) 6vw;
}
.cta-band h2 {
  font-style: italic;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 2rem;
}

/* ---------- Section standard avec titre ---------- */
.section-head {
  text-align: center;
  padding: clamp(5rem, 12vh, 8rem) 6vw 3rem;
}
.section-head h2 {
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-top: 0.8rem;
}

/* ---------- Bandeau titre de page (sous-pages) ---------- */
.page-banner {
  position: relative;
  height: 56vh;
  min-height: 380px;
  overflow: hidden;
}
/* Le point de cadrage est réglé page par page : un bandeau très large ne montre
   qu'une bande étroite d'une photo verticale, et il faut viser le bon endroit. */
.page-banner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 50%;
}
.page-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(20,18,16,0.46);
}
.page-banner__label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--white); text-align: center; z-index: 2;
  text-shadow: 0 2px 22px rgba(20,18,16,0.5), 0 1px 4px rgba(20,18,16,0.4);
}
.page-banner__label h1 {
  font-style: italic;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin-top: 0.6rem;
  /* Même raison que le titre d'accueil : la règle générale sur h1 le rendrait sombre. */
  color: var(--white);
}

/* ---------- Galerie : grille régulière ----------
   Toutes les photos verticales ont exactement le même format : la grille se
   termine donc au carré, sans marche d'escalier en bas de page. Les photos
   horizontales occupent deux colonnes, ce qui leur donne une présence
   comparable à une verticale sans casser l'alignement des rangées. */
.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  gap: clamp(0.9rem, 2.2vw, 2.2rem);
  padding: clamp(1rem, 3vh, 2.5rem) clamp(1.5rem, 7vw, 6rem) clamp(6rem, 12vh, 9rem);
  max-width: 1600px;
  margin: 0 auto;
}
.masonry__item {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  aspect-ratio: 2 / 3;
}
.masonry__item--large { grid-column: span 2; aspect-ratio: auto; }
.masonry__item img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.6s ease;
}
.masonry__item:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .masonry { grid-template-columns: 1fr; }
  .masonry__item--large { grid-column: span 1; aspect-ratio: 3 / 2; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(15,13,12,0.96);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 88vw; max-height: 84vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox__close, .lightbox__prev, .lightbox__next {
  position: absolute;
  background: none; border: none;
  color: var(--white);
  font-family: var(--font-sans);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { opacity: 1; }
.lightbox__close { top: 2.2rem; right: 2.4rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); font-size: 2.2rem; font-family: var(--font-serif); }
.lightbox__prev { left: 1.4rem; }
.lightbox__next { right: 1.4rem; }
.lightbox__count {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: 0.72rem; letter-spacing: 0.2em;
}

/* ---------- À propos ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
}
.about__img { height: 100%; min-height: 520px; overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__text { padding: 6vw 7vw; }
.about__text .eyebrow { display: block; margin-bottom: 1rem; }
.about__text h2 {
  font-style: italic;
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 1.6rem;
}
.about__text p { color: var(--ink-soft); margin: 0 0 1.2rem; font-size: 1.02rem; }
.about__pull {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--rose-deep);
  border-left: 2px solid var(--rose);
  padding-left: 1.4rem;
  margin: 2rem 0;
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about__img { min-height: 60vh; }
}

.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  padding: 1rem 6vw 6rem;
  text-align: center;
}
.values__item .eyebrow { display: block; margin-bottom: 0.6rem; }
.values__item h3 { font-style: italic; font-size: 1.5rem; margin-bottom: 0.7rem; }
.values__item p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
@media (max-width: 720px) { .values { grid-template-columns: 1fr; gap: 3rem; } }

/* ---------- Contact ---------- */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5vw;
  padding: clamp(4rem, 9vh, 7rem) 6vw 8rem;
  max-width: 1280px;
  margin: 0 auto;
}
.contact-info h2 { font-style: italic; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.contact-info p { color: var(--ink-soft); max-width: 420px; }
.contact-detail { margin-top: 2.4rem; }
.contact-detail div { margin-bottom: 1.3rem; }
.contact-detail .eyebrow { display: block; margin-bottom: 0.35rem; }
.contact-detail a, .contact-detail span { font-family: var(--font-serif); font-size: 1.25rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field { margin-bottom: 1.4rem; }
.field label {
  display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 0.6rem;
}
.field input, .field textarea {
  width: 100%;
  border: none; border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0.1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color 0.3s ease;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--rose-deep); }
.field textarea { resize: vertical; min-height: 120px; }
@media (max-width: 860px) { .contact-wrap { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

/* Champ piège à robots : invisible à l'écran, ignoré par les lecteurs d'écran. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.field__hint { text-transform: none; letter-spacing: 0; opacity: 0.7; }

/* Case de consentement : texte lisible, pas en capitales comme les autres libellés. */
.field--consent label {
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-size: 0.88rem; letter-spacing: 0; text-transform: none;
  color: var(--ink-soft); line-height: 1.5; cursor: pointer;
}
.field--consent input {
  width: auto; margin: 0.25rem 0 0; flex: 0 0 auto;
  accent-color: var(--rose-deep);
}
.field--consent a { border-bottom: 1px solid var(--line); }
.field--consent a:hover { border-bottom-color: var(--rose-deep); }
.field__error {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #a8443a;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: #a8443a; }

.form-notice {
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.8rem;
  border-left: 2px solid var(--rose-deep);
  background: rgba(201, 161, 144, 0.10);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.form-notice--error { border-left-color: #a8443a; background: rgba(168, 68, 58, 0.07); }
.form-notice--ok { border-left: none; background: transparent; padding: 0; margin: 0; }
.form-notice--ok h2 { font-style: italic; font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.form-notice--ok p { max-width: 420px; margin-bottom: 2rem; }

/* ---------- Pages de texte : mentions légales, confidentialité, erreur ---------- */
.page-texte {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(3rem, 8vh, 5rem)) clamp(1.5rem, 6vw, 2rem) clamp(5rem, 10vh, 7rem);
}
.page-texte h1 {
  font-style: italic;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.1;
  margin: 0.8rem 0 2rem;
}
.page-texte h2 {
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  margin: 2.6rem 0 0.8rem;
}
.page-texte p { color: var(--ink-soft); margin: 0 0 1.1rem; }
.page-texte a { border-bottom: 1px solid var(--line); }
.page-texte a:hover { border-bottom-color: var(--rose-deep); }
.page-texte__chapeau {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink) !important;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2.2rem !important;
}
.page-texte--centre { text-align: center; }
.page-texte--centre .page-texte__chapeau { border: none; margin-left: auto; margin-right: auto; max-width: 46ch; }
.page-texte__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2.5rem;
}

/* ---------- Carnet de mariage : liste des articles ---------- */
.carnet {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 7vw, 6rem) clamp(4rem, 9vh, 7rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 5.5rem);
}
.carnet__item { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 2.8rem); align-items: center; }
@media (min-width: 820px) {
  .carnet__item { grid-template-columns: 1.05fr 1fr; }
  /* Un article sur deux présente sa photo à droite : cela donne du rythme. */
  .carnet__item:nth-child(even) .carnet__visuel { order: 2; }
}
.carnet__visuel { display: block; overflow: hidden; }
.carnet__visuel img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.carnet__visuel:hover img { transform: scale(1.04); }
.carnet__texte h2 {
  font-style: italic;
  font-size: clamp(1.45rem, 2.8vw, 2.1rem);
  line-height: 1.2;
  margin: 0.7rem 0 1rem;
}
.carnet__texte p { color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 46ch; }
.carnet__lien {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rose-deep); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}

/* ---------- Article ---------- */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) clamp(1.5rem, 6vw, 2rem) clamp(3rem, 6vh, 4rem);
}
.article__meta {
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.75; margin: 0 0 1.4rem;
}
.article__chapeau {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 2.6rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.article p { margin: 0 0 1.3rem; color: var(--ink-soft); }
.article h2 {
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  margin: 3rem 0 1.1rem;
}
.article ul { margin: 0 0 1.4rem; padding-left: 1.1rem; color: var(--ink-soft); }
.article li { margin-bottom: 0.6rem; }
.article em { font-family: var(--font-serif); font-size: 1.05em; color: var(--ink); }

/* Les photos débordent de la colonne de texte, sans jamais dépasser la page. */
.article__figure {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, 92vw);
  margin: 3rem 0;
}
.article__figure img { width: 100%; display: block; height: auto; }
.article__figure--duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.6rem, 1.6vw, 1.4rem); }
.article__figure--portrait { width: min(560px, 88vw); }
@media (max-width: 620px) { .article__figure--duo { grid-template-columns: 1fr; } }

.article__fin { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); text-align: center; }

/* ---------- À lire aussi ---------- */
.suite {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 7vw, 6rem) clamp(5rem, 10vh, 7rem);
  text-align: center;
}
.suite__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3.5vw, 2.6rem);
  margin-top: 2rem; text-align: left;
}
@media (min-width: 700px) { .suite__grid { grid-template-columns: 1fr 1fr; } }
.suite__item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.1s var(--ease); }
.suite__item { display: block; overflow: hidden; }
.suite__item h3 {
  font-style: italic; font-weight: 400;
  font-size: 1.15rem; line-height: 1.3; margin-top: 1rem;
}
.suite__item:hover img { transform: scale(1.04); }

/* ---------- Prestataires ---------- */
.presta {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 7vw, 6rem) clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
}
.presta__carte { border-top: 1px solid var(--line); padding-top: 1.5rem; }
/* La photo garde ses proportions. Sans « height: auto », la hauteur inscrite
   dans la page (1000 px) s'appliquait telle quelle alors que la largeur, elle,
   était ramenée à celle de la colonne : les photos étaient étirées en hauteur,
   surtout sur téléphone. */
.presta__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: 1.2rem;
}
.presta__carte h3 {
  font-style: italic; font-size: 1.5rem; line-height: 1.25; margin-bottom: 0.5rem;
}
.presta__metier { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.1rem; }
.presta__lien {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--rose-deep); border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
/* Titre de catégorie dans la grille des prestataires : il prend toute la largeur. */
.presta__groupe {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  font-style: normal;
  color: var(--rose-deep);
  margin: clamp(1.2rem, 3vh, 2.4rem) 0 -0.8rem;
}
.presta__groupe:first-child { margin-top: 0; }

/* ---------- Avis des mariés (Google) ---------- */
.avis-band {
  padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 8vw, 7rem) clamp(4rem, 9vh, 6rem);
  text-align: center;
}
.avis-carte__etoiles {
  color: var(--rose-deep);
  letter-spacing: 0.28em;
  font-size: 0.8rem;
  margin-bottom: 1.1rem;
}
.avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1.6rem, 3.5vw, 3.2rem);
  max-width: 1200px;
  margin: 3rem auto 0;
  text-align: left;
}
.avis-carte {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
}
.avis-carte__texte {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink);
  margin: 0 0 1.2rem;
}
.avis-carte__nom {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.avis-carte__quand { display: block; margin-top: 0.35rem; opacity: 0.7; letter-spacing: 0.1em; }
.avis-band__lien { display: inline-block; margin-top: 3rem; }

/* ---------- Instagram teaser ---------- */
.insta-band {
  padding: clamp(5rem, 11vh, 8rem) clamp(1.5rem, 8vw, 7rem) clamp(6rem, 12vh, 8rem);
  text-align: center;
}
.insta-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(6px, 1.1vw, 14px);
  max-width: 1200px;
  margin: 2.6rem auto 0;
}
.insta-grid a { aspect-ratio: 1/1; overflow: hidden; display: block; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.insta-grid a:hover img { transform: scale(1.06); }
@media (max-width: 720px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 3.4rem 6vw 2.4rem;
  text-align: center;
}
.site-footer__logo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem;
  margin-bottom: 1.2rem;
}
.site-footer__links {
  display: flex; justify-content: center; gap: 2.2rem;
  list-style: none; margin: 0 0 1.6rem; padding: 0;
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft);
}
.site-footer__legal {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem 1.6rem;
  list-style: none; margin: 0 0 1.4rem; padding: 0;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.8;
}
.site-footer__legal a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.site-footer__legal a:hover { border-bottom-color: var(--rose-deep); }
.site-footer__meta {
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-soft); opacity: 0.75;
}

/* ---------- Reveal on scroll ----------
   Progressive enhancement : le contenu reste visible par défaut (si le JS
   ne se charge pas, rien n'est perdu). L'animation ne s'active que lorsque
   la classe "js" est posée sur <html> par script.js. */
.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
}
html.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Menu mobile plein écran ---------- */
@media (max-width: 900px) {
  .nav__toggle { display: block; }
  /* Le flou d'arrière-plan de la barre du haut enfermait le menu déroulant
     dans la hauteur de cette barre (76 px) : les derniers liens débordaient et
     restaient visibles en permanence sur la page, menu fermé. Sans le flou, le
     menu retrouve toute la hauteur de l'écran. Le fond de la barre reste opaque
     à 94 %, la différence à l'œil est nulle. */
  .nav.is-solid,
  .nav-page { backdrop-filter: none; }
  .nav__links {
    position: fixed; inset: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2.4rem;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0.5s var(--ease);
  }
  .nav--open .nav__links { transform: translateY(0); visibility: visible; }
  .nav__links a { color: var(--ink) !important; font-size: 1rem; }
  .nav__logo { color: var(--white); }
  .nav-page .nav__logo { color: var(--ink); }
}

/* Les photos sont livrées dans un <picture> (version WebP légère + JPEG de
   secours). « display: contents » efface cette enveloppe de la mise en page :
   l'image se comporte exactement comme avant. */
picture { display: contents; }

/* ==========================================================================
   Ajouts propres au site des séances (vanessasedlak.fr)
   ========================================================================== */

/* ---------- Accueil : les cinq activités en vignettes ---------- */
.activites {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 1.6vw, 1.6rem);
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(4rem, 9vh, 7rem);
  max-width: 1600px;
  margin: 0 auto;
}
.activite { display: block; }
.activite__visuel { display: block; overflow: hidden; aspect-ratio: 2 / 3; }
.activite__visuel img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.activite:hover .activite__visuel img { transform: scale(1.04); }
.activite h2 {
  font-style: italic;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  margin: 1rem 0 0.3rem;
}
.activite p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; line-height: 1.55; }
@media (max-width: 1100px) { .activites { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .activites { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Pages activités : bloc de texte en colonne ---------- */
.texte {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(4rem, 10vh, 7rem) 6vw clamp(2rem, 5vh, 3rem);
}
.texte .eyebrow { display: block; margin-bottom: 1rem; }
.texte h2 { font-style: italic; font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: 1.2rem; }
.texte p { color: var(--ink-soft); margin: 0 0 1.1rem; font-size: 1.02rem; }
.texte ul { color: var(--ink-soft); padding-left: 1.1rem; margin: 0 0 1.2rem; }
.texte li { margin-bottom: 0.5rem; }
.texte a:not(.btn) { border-bottom: 1px solid var(--line); }
.texte a:not(.btn):hover { border-bottom-color: var(--rose-deep); }

/* ---------- Déroulement d'une séance, en étapes numérotées ---------- */
.etapes {
  list-style: none;
  counter-reset: etape;
  padding: 0;
  margin: 0.5rem 0 1.5rem;
}
.etapes li {
  counter-increment: etape;
  position: relative;
  padding: 0 0 1.3rem 3.2rem;
  margin: 0;
}
.etapes li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -0.2rem;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.9rem; line-height: 1;
  color: var(--rose-deep);
}
.etapes strong { color: var(--ink); font-weight: 400; }

/* ---------- Formules : cartes légères, jamais une grille de prix en bloc ---------- */
.formules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 6vw clamp(3rem, 7vh, 5rem);
}
.formule {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 2rem 1.8rem 1.8rem;
  text-align: center;
  display: flex; flex-direction: column;
}
.formule h3 { font-style: italic; font-size: 1.55rem; margin-bottom: 0.3rem; }
.formule__type { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rose-deep); }
.formule__prix { font-family: var(--font-serif); font-size: 2.1rem; color: var(--ink); margin: 1rem 0 0.2rem; }
.formule__prix small { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.formule ul { list-style: none; padding: 0; margin: 1rem 0 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; }
.formule li + li { margin-top: 0.35rem; }
.formules__note {
  max-width: 760px; margin: 0 auto; padding: 0 6vw clamp(3rem, 7vh, 5rem);
  text-align: center; color: var(--ink-soft); font-size: 0.92rem;
}

/* ---------- Galerie courte d'une page activité ---------- */
.masonry--courte { padding-top: 0; }

/* ---------- Contact : formulaire sans bandeau photo ---------- */
/* La page n'a pas de bandeau : on laisse la place du menu, qui est fixe. */
.contact-wrap { padding-top: calc(var(--nav-h) + clamp(3rem, 7vh, 5rem)); }
.contact-info__titre { font-style: italic; font-size: clamp(2rem, 3.6vw, 3rem); margin: 1rem 0 1.2rem; }
.contact-info p { color: var(--ink-soft); max-width: 420px; }
.field select {
  width: 100%;
  border: none; border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 0.6rem 0.1rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  border-radius: 0;
}
.field select:focus { outline: none; border-color: var(--rose-deep); }
.field select[aria-invalid="true"] { border-bottom-color: #a8443a; }

/* ---------- Menu : six entrées au lieu de quatre ----------
   Le menu ne doit jamais passer sur deux lignes : on resserre les écarts sur
   les écrans moyens, et le menu mobile prend le relais un peu plus tôt. */
.nav__logo, .nav__links a { white-space: nowrap; }
@media (max-width: 1300px) { .nav__links { gap: 1.6rem; } .nav__links a { letter-spacing: 0.16em; } }