/* =========================================================
   Marie & Gaétan — Photographes de mariage
   Stylesheet premium minimaliste
   ========================================================= */

/* -------- DESIGN TOKENS -------- */
:root {
  --bg:          #f7f3ee;   /* blanc cassé */
  --bg-2:        #efe8df;   /* beige doux */
  --ink:        #15110d;   /* noir profond */
  --ink-2:      #3a342e;   /* gris chaud foncé */
  --muted:      #7a716a;   /* gris chaud */
  --line:       #e3dccf;   /* bordures fines */
  --gold:       #b08c5a;   /* accent doré subtil */
  --white:      #ffffff;

  --ff-serif: "Cormorant Garamond", "Times New Roman", serif;
  --ff-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;

  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(20,15,10,.04), 0 8px 24px rgba(20,15,10,.04);
  --shadow:    0 2px 4px rgba(20,15,10,.05), 0 20px 50px rgba(20,15,10,.08);

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* -------- RESET -------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* -------- TYPOGRAPHY -------- */
.h2 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
  color: var(--ink);
}
.h2 em { font-style: italic; color: var(--ink-2); }
h3 { font-family: var(--ff-serif); font-weight: 500; font-size: 1.4rem; margin: 0 0 .5rem; }
p  { margin: 0 0 1rem; color: var(--ink-2); }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 1rem;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 4rem;
}
.section-head__sub {
  color: var(--muted);
  font-size: 1.05rem;
  margin-top: .5rem;
}

/* -------- BUTTONS -------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition: transform .35s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.btn--primary:hover { background: #000; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn--block { width: 100%; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding: 18px 0;
}
.nav.is-scrolled {
  background: rgba(247,243,238,.92);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 var(--line);
  padding: 10px 0;
}
.nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: var(--ink);
}
.nav__logo span { color: var(--gold); font-style: italic; padding: 0 .15em; }
.nav__links {
  display: flex;
  gap: 28px;
}
.nav__links a {
  font-size: .88rem;
  color: var(--ink-2);
  position: relative;
  padding: 4px 0;
  transition: color .3s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width .4s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: .82rem;
  letter-spacing: .04em;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.nav__cta:hover { background: #000; transform: translateY(-1px); }

.nav__burger {
  display: none;
  width: 34px; height: 34px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  height: 1.5px;
  width: 22px;
  background: var(--ink);
  margin: 0 auto;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 18px;
  padding: 30px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { font-family: var(--ff-serif); font-size: 1.4rem; color: var(--ink); }
.nav__mobile .nav__cta { font-family: var(--ff-sans); font-size: .9rem; text-align: center; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  padding: 120px 24px 80px;
}
.hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__bg img {
  width: 100%; height: 115%;
  object-fit: cover;
  transform: translateY(0) scale(1.05);
  will-change: transform;
  transition: transform .1s linear;
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(0,0,0,.0), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  animation: heroIn 1.4s var(--ease) both .2s;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__eyebrow {
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  margin-bottom: 1.4rem;
}
.hero__title {
  font-family: var(--ff-serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 7vw, 5.6rem);
  line-height: 1.05;
  margin: 0 0 1.2rem;
  letter-spacing: -.01em;
  color: #fff;
}
.hero__title em {
  font-style: italic;
  font-weight: 300;
  color: #f1e6d2;
}
.hero__sub {
  color: rgba(255,255,255,.85);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  max-width: 580px;
  margin: 0 auto 2.4rem;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero .btn--primary { background: #fff; color: var(--ink); }
.hero .btn--primary:hover { background: var(--bg); }
.hero .btn--ghost { color: #fff; border-color: rgba(255,255,255,.6); }
.hero .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.hero__scroll {
  position: absolute;
  z-index: 2;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: rgba(255,255,255,.4);
  overflow: hidden;
}
.hero__scroll span {
  position: absolute;
  top: -56px; left: 0;
  width: 1px; height: 56px;
  background: #fff;
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0%   { top: -56px; }
  60%  { top: 56px; }
  100% { top: 56px; }
}

/* =========================================================
   PROOF
   ========================================================= */
.proof {
  padding: 90px 0 60px;
  background: var(--bg);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 50px 0;
}
.proof__item .proof__num {
  font-family: var(--ff-serif);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.01em;
}
.proof__item .proof__num span {
  font-size: .45em;
  color: var(--gold);
  font-style: italic;
  margin-left: .15em;
}
.proof__item .proof__label {
  margin-top: .65rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: var(--muted);
}

.proof__logos {
  margin-top: 60px;
  text-align: center;
}
.proof__logos > span {
  display: block;
  text-transform: uppercase;
  letter-spacing: .35em;
  font-size: .7rem;
  color: var(--muted);
  margin-bottom: 22px;
}
.proof__logos-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
}
.logo-pill {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .95rem;
  letter-spacing: .15em;
  color: var(--ink-2);
  opacity: .6;
  transition: opacity .3s var(--ease);
}
.logo-pill:hover { opacity: 1; }

/* =========================================================
   APPROCHE
   ========================================================= */
.approche { padding: 110px 0; background: var(--bg); }
.approche__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.approche__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.approche__media img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.approche__media:hover img { transform: scale(1.04); }
.approche__media-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(247,243,238,.92);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--ink);
}
.approche__text p { font-size: 1.05rem; max-width: 520px; }
.approche__signature {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  align-items: center;
}
.sig {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.8rem;
  color: var(--ink);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
}
.sig--alt { color: var(--ink-2); }

/* =========================================================
   WHY / CARDS
   ========================================================= */
.why { padding: 110px 0; background: var(--bg-2); }
.why__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  margin-bottom: 22px;
}
.card__icon svg { width: 100%; height: 100%; }
.card h3 { color: var(--ink); }
.card p { margin: 0; color: var(--muted); font-size: .98rem; }

/* =========================================================
   GALLERY — Justified rows à la Flickr
   --------------------------------------------------------
   La galerie est composée de lignes à hauteur fixe.
   Le nombre de photos par ligne est calculé dynamiquement
   par script.js pour remplir exactement la largeur du
   conteneur (les images sont étirées proportionnellement
   pour atteindre la hauteur cible de la ligne).

   ▶︎ POUR MODIFIER LA HAUTEUR DES LIGNES, change
      uniquement les variables `--row-h` ci-dessous
      pour chaque breakpoint.
   ========================================================= */

.container_gallery {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 24px;
}

.gallery {
  padding: 110px 0;
  background: var(--bg);
  position: relative;

  /* ====== HAUTEUR DE LIGNE PAR BREAKPOINT ====== */
  /* Desktop large (par défaut) */
  --row-h: 640px;
  /* Espace entre images (horizontal & vertical) */
  --row-gap: 14px;
}
@media (max-width: 1700px) {
  .gallery { --row-h: 540px; }
}
@media (max-width: 1200px) {
  .gallery { --row-h: 440px; }
}
@media (max-width: 900px) {
  .gallery { --row-h: 340px; }
}
@media (max-width: 640px) {
  .gallery {
    --row-h: 240px;
    --row-gap: 10px;
  }
}
@media (max-width: 420px) {
  .gallery { --row-h: 150px; }
}

/* ----- Conteneur de la galerie (justified rows) -----
    On utilise flexbox : chaque image se voit attribuer
    par JS une largeur calculée pour que la somme d'une
    ligne == largeur du conteneur, à hauteur --row-h. */
.masonry {
  display: flex;
  flex-wrap: wrap;
  gap: var(--row-gap);
  position: relative;
  overflow: hidden;
  /* État réduit (par défaut) : on n'affiche qu'environ 2 lignes
     et demie de photos. On laisse volontairement une 3ème ligne
     coupée pour suggérer qu'il y a plus de photos à découvrir.
     Un dégradé (voir .masonry::after) vient fondre cette troisième
     ligne dans le fond pour un rendu élégant. */
  max-height: calc(var(--row-h) * 2.3 + var(--row-gap) * 2);
  transition: max-height .9s var(--ease);
}
/* Dégradé "fade" sur la 3ème ligne (état réduit uniquement).
   Hauteur du voile = la hauteur d'environ une ligne, pour couvrir
   doucement la rangée coupée et laisser deviner les photos en
   dessous. Pointer-events: none pour laisser le clic passer. */
.masonry::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--row-h) * 0.9);
  background: linear-gradient(
    to bottom,
    rgba(247, 243, 238, 0) 0%,
    rgba(247, 243, 238, 0.55) 40%,
    rgba(247, 243, 238, 0.92) 75%,
    var(--bg) 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity .6s var(--ease);
  z-index: 2;
}
/* État déployé : on libère la hauteur et on retire le voile. */
.masonry.is-expanded {
  max-height: var(--masonry-full, 99999px);
}
.masonry.is-expanded::after {
  opacity: 0;
}

/* Languette « intercalaire » sous la galerie */
.masonry__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  /* État initial : le bouton "monte" de 2px pour coller à la dernière
     photo. Au survol, on annule cette translation (translateY(0)) plutôt
     que d'aller plus bas, ce qui donne l'illusion inverse (bouton "qui
     descend") tout en gardant le bouton collé à la galerie au repos. */
  margin-top: 2px;
  padding: 14px 28px 16px;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  font-family: var(--ff-sans);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 24px -18px rgba(20,15,10,.25);
  transform: translateY(-2px) ;
  transition: transform .35s var(--ease), color .35s var(--ease), background .35s var(--ease);
}
.masonry__toggle:hover {
  transform: translateY(0);
  padding: 17px 28px 16px;
  color: var(--gold);
}
.masonry__toggle-icon {
  display: inline-block;
  transition: transform .45s var(--ease);
}
.masonry__toggle[aria-expanded="true"] .masonry__toggle-icon {
  transform: rotate(180deg);
}

/* ----- Items (figures) ----- */
.masonry__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  background: var(--bg-2);
  /* Hauteur fixée par variable, largeur fixée par JS. */
  height: var(--row-h);
  flex: 0 0 auto;
}
.masonry__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.2s var(--ease), filter .6s var(--ease);
}
.masonry__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.25));
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.masonry__item:hover img { transform: scale(1.06); filter: brightness(1.02); }
.masonry__item:hover::after { opacity: 1; }


/* =========================================================
   EXPERIENCE / TIMELINE
   ========================================================= */
.experience { padding: 110px 0; background: var(--bg-2); }
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5%; right: 5%;
  top: 28px;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
.timeline__step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 8px;
}
.timeline__num {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  transition: transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.timeline__step:hover .timeline__num {
  background: var(--ink);
  color: #fff;
  transform: scale(1.08);
}
.timeline__body h3 { font-size: 1.2rem; color: var(--ink); }
.timeline__body p { color: var(--muted); font-size: .95rem; }

/* =========================================================
   TESTIMONIALS — photo de mariage + capture d'avis détachées
   ========================================================= */
.testimonials { padding: 110px 0; background: var(--bg-2); }
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Chaque témoignage = deux blocs visuellement séparés */
.testi {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Bloc 1 : photo du mariage */
.testi__photo {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 4 / 5;
  background: var(--bg);
}
.testi__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}
.testi__photo:hover img { transform: scale(1.04); }

/* Bloc 2 : capture de l'avis Google, détachée */
.testi__review {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Tablette */
@media (max-width: 1024px) {
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid > .testi:nth-child(3) {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .testimonials__grid { grid-template-columns: 1fr; gap: 56px; }
  .testimonials__grid > .testi:nth-child(3) { max-width: none; }
}



/* =========================================================
   FAQ
   ========================================================= */
.faq { padding: 110px 0; background: var(--bg); }
.faq__wrap { max-width: 880px; }
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.faq__item[open] { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--ff-serif);
  font-size: 1.2rem;
  color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon {
  position: relative;
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-left: 18px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1px;
  background: var(--ink);
  transition: transform .35s var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }

.faq__item p {
  padding: 0 24px 24px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  animation: faqOpen .4s var(--ease) both;
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: 110px 0; background: var(--bg-2); }
.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.contact__intro p { font-size: 1.05rem; max-width: 470px; }
.contact__meta {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}
.contact__meta li {
  display: flex;
  flex-direction: column;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact__meta strong {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .7rem;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: 4px;
}
.contact__meta a { color: var(--ink); transition: color .3s var(--ease); }
.contact__meta a:hover { color: var(--gold); }

.form {
  background: var(--bg);
  padding: 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field {
  display: flex;
  flex-direction: column;
  margin-bottom: 18px;
  position: relative;
}
.field span {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .68rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 500;
}
.field input,
.field textarea,
.field select {
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  transition: border-color .3s var(--ease), color .3s var(--ease);
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: #b6ada3; }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--ink);
}
.field.is-error input,
.field.is-error textarea,
.field.is-error select { border-color: #c0392b; }

/* ----- Select (champ "Comment nous avez-vous trouvé ?") -----
   On retire le style natif du navigateur et on ajoute notre
   propre chevron SVG en arrière-plan, calé à droite. Le rendu
   suit la même grammaire que les autres champs (souligné fin,
   police hover dorée), pour rester cohérent avec le design. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding-right: 28px;
  /* Chevron doré dessiné en SVG inline pour éviter une requête.
     Couleur = var(--gold) ≈ #b08c5a (encodée en URL). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b08c5a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 14px 14px;
}
/* Couleur "placeholder" tant que l'utilisateur n'a pas choisi
   (option disabled selected hidden avec value=""). */
.field select:invalid,
.field select:has(option[value=""]:checked) { color: #b6ada3; }
.field select option { color: var(--ink); background: var(--bg); }
.field select option[disabled] { color: #b6ada3; }
.field select:focus { border-color: var(--ink); }
.field.is-error::after {
  content: attr(data-error);
  position: absolute;
  bottom: -18px;
  left: 0;
  font-size: .75rem;
  color: #c0392b;
}

.form__success {
  display: none;
  margin-top: 18px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 1.5rem;
  text-align: center;
}
.form__success.is-visible {
  display: block;
  animation: fadeUp .6s var(--ease);
}
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer__logo {
  font-family: var(--ff-serif);
  font-size: 1.8rem;
  margin-bottom: 8px;
}
.footer__logo span { color: var(--gold); font-style: italic; padding: 0 .15em; }
.footer__tag {
  font-family: var(--ff-serif);
  font-style: italic;
  color: rgba(255,255,255,.6);
  font-size: 1.05rem;
  margin: 0;
}
.footer h4 {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 18px;
  font-weight: 500;
}
.footer a {
  display: block;
  color: rgba(255,255,255,.85);
  font-size: .95rem;
  padding: 4px 0;
  transition: color .3s var(--ease);
}
.footer a:hover { color: var(--gold); }
.footer__bottom {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 24px 0;
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  letter-spacing: .1em;
}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .proof__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .approche__grid { grid-template-columns: 1fr; gap: 50px; }
  .approche__media img { height: 480px; }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); gap: 50px 24px; }
  .timeline::before { display: none; }
  .pricing__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .plan--featured { transform: none; }
  .plan--featured:hover { transform: translateY(-6px); }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid > .testi:nth-child(4),
  .testimonials__grid > .testi:nth-child(5) { grid-column: auto; grid-row: auto; }
  .contact__grid { grid-template-columns: 1fr; gap: 50px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__bg img { object-position: 20% 50%; }
}

@media (max-width: 640px) {
  .hero { min-height: 92vh; padding-top: 100px; }
  .hero__title { font-size: 3rem; }
  .why__grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .form { padding: 28px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .approche__media img { height: 380px; }
  .hero__bg img { object-position: 20% 50%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   LIGHTBOX — zoom image élégant
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 15, 10, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition:
    background-color .55s var(--ease),
    backdrop-filter .55s var(--ease),
    -webkit-backdrop-filter .55s var(--ease),
    opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(20, 15, 10, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cadre de l'image agrandie : s'adapte au ratio de la photo.
   - L'image elle-même est limitée à 80vw × 80vh.
   - Le cadre épouse exactement les dimensions de l'image,
     donc plus de bandes blanches sur les côtés. */
.lightbox__frame {
  position: relative;
  margin: 0;
  max-width: 80vw;
  max-height: 80vh;
  display: inline-flex;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: transparent;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  transform: scale(.92);
  opacity: 0;
  transition: transform .55s var(--ease), opacity .45s var(--ease);
}
.lightbox.is-open .lightbox__frame {
  transform: scale(1);
  opacity: 1;
}

.lightbox__img {
  max-width: 80vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}


/* Bouton de fermeture */
.lightbox__close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(247, 243, 238, .9);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s var(--ease), transform .3s var(--ease);
  z-index: 2;
}
.lightbox__close:hover {
  background: var(--bg);
  transform: rotate(90deg);
}
.lightbox__close span {
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.lightbox__close span:nth-child(1) { transform: rotate(45deg); }
.lightbox__close span:nth-child(2) { transform: rotate(-45deg); }

/* Curseur "zoom" sur les images cliquables */
.zoomable { cursor: zoom-in; }

/* Boutons précédent / suivant (uniquement sur la galerie) */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(247, 243, 238, .9);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.lightbox__nav:hover {
  background: var(--bg);
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav[hidden] { display: none; }
.lightbox__nav--prev { left: 28px; }
.lightbox__nav--next { right: 28px; }
.lightbox__nav svg { display: block; }


/* Mobile : on élargit légèrement la zone pour conserver la lisibilité */
@media (max-width: 640px) {
  .lightbox { padding: 14px; }
  .lightbox__frame {
    max-width: 92vw;
    max-height: 82vh;
    border-radius: var(--radius);
  }
  .lightbox__img {
    max-width: 92vw;
    max-height: 82vh;
  }
  .lightbox__close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__frame {
    transition: opacity .2s linear;
    transform: none;
  }
}

/* =========================================================
   BANNIÈRE COOKIES — RGPD / Consent
   ========================================================= */

.mg-cookie {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 24px);
  width: calc(100% - 32px);
  max-width: 460px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 20px 22px 18px;
  font-family: var(--ff-sans);
  font-size: 13.5px;
  line-height: 1.55;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
.mg-cookie.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.mg-cookie[hidden] { display: none; }

.mg-cookie__title {
  font-family: var(--ff-serif);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 6px;
  color: var(--ink);
}
.mg-cookie__text {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13px;
}
.mg-cookie__text a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mg-cookie__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.mg-cookie__btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .25s ease, color .25s ease,
              border-color .25s ease, transform .25s ease;
}
.mg-cookie__btn--ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--line);
}
.mg-cookie__btn--ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.mg-cookie__btn--primary {
  background: var(--ink);
  color: var(--bg);
}
.mg-cookie__btn--primary:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}

/* Responsive : mobile */
@media (max-width: 640px) {
  .mg-cookie {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: translateY(24px);
    width: auto;
    max-width: none;
    padding: 18px 18px 16px;
    border-radius: 12px;
  }
  .mg-cookie.is-visible { transform: translateY(0); }
  .mg-cookie__title { font-size: 1.2rem; }
  .mg-cookie__actions { justify-content: stretch; }
  .mg-cookie__btn { flex: 1; text-align: center; padding: 11px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-cookie { transition: opacity .2s linear; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .mg-cookie { transform: translateY(0); }
}