/* =========================================================================
   LAURE GAY-PEILLER - Décoratrice d'intérieur
   Feuille de styles
   -------------------------------------------------------------------------
   ORGANISATION :
   1.  Variables (couleurs, typo)
   2.  Reset & bases
   3.  Utilitaires (container, eyebrow, titres, boutons, séparateurs)
   4.  Navbar
   5.  Hero
   6.  À propos
   7.  Pour qui
   8.  Formules & tarifs
   9.  Réalisations / Instagram
   10. Contact
   11. Footer
   12. Responsive (mobile / tablette)
   ========================================================================= */


/* =========================================================================
   1. VARIABLES
   ========================================================================= */
:root {
  /* Palette - MODIFIER ici pour changer les couleurs de tout le site */
  --creme:        #FDFAF5; /* fond principal */
  --beige:        #F2E8D9; /* sections alternées */
  --beige-moyen:  #E8D9C4; /* bordures, séparateurs */
  --brun:         #8B5A2B; /* accents, boutons, titres */
  --brun-clair:   #C4853A; /* eyebrows, lignes décoratives */
  --brun-fonce:   #5C3A1E; /* textes titres */
  --texte:        #3A2A1A; /* texte courant */
  --muted:        #9A8070; /* texte secondaire */

  /* Typographie */
  --font-titre: 'Cormorant Garamond', Georgia, serif;
  --font-corps: 'Lato', -apple-system, Segoe UI, sans-serif;

  /* Mise en page */
  --max-width: 1180px;
  --nav-height: 76px;
}


/* =========================================================================
   2. RESET & BASES
   ========================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }

body {
  font-family: var(--font-corps);
  font-weight: 300;
  color: var(--texte);
  background: var(--creme);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

::selection { background: var(--brun-clair); color: #fff; }

/* Focus accessibilité */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brun-clair);
  outline-offset: 3px;
}


/* =========================================================================
   3. UTILITAIRES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

section { padding: 110px 0; position: relative; }

.section--creme { background: var(--creme); }
.section--beige { background: var(--beige); }

/* Eyebrow (petit label majuscule) */
.eyebrow {
  font-family: var(--font-corps);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brun-clair);
  display: inline-block;
  margin-bottom: 18px;
}

/* Titres */
.title {
  font-family: var(--font-titre);
  font-weight: 300;
  color: var(--brun-fonce);
  line-height: 1.15;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 0.5px;
}
.title em { font-style: italic; color: var(--brun); }

.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head .subtitle {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--muted);
  margin-top: 14px;
}

/* Séparateur : fine ligne dorée */
.rule {
  width: 60px;
  height: 1px;
  background: var(--brun-clair);
  border: none;
  margin: 0 0 22px;
}

/* Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-corps);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 30px;
  border: 1px solid var(--brun);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--brun); color: var(--creme); }
.btn--primary:hover { background: var(--brun-fonce); border-color: var(--brun-fonce); }
.btn--outline { background: transparent; color: var(--brun); }
.btn--outline:hover { background: var(--brun); color: var(--creme); }

/* Lien texte souligné */
.link-underline {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--brun);
  border-bottom: 1px solid var(--brun-clair);
  padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.link-underline:hover { color: var(--brun-fonce); border-color: var(--brun-fonce); }


/* =========================================================================
   4. NAVBAR
   ========================================================================= */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  z-index: 1000;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  /* Fond translucide clair en permanence (lisible sur le hero beige + photo) */
  background: rgba(253, 250, 245, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
/* État "scrollé" : léger renforcement */
.navbar.scrolled {
  background: rgba(253, 250, 245, 0.92);
  border-bottom: 1px solid var(--beige-moyen);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo { display: flex; align-items: center; gap: 10px; }
.logo svg { width: 26px; height: 26px; flex-shrink: 0; }
.logo img { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; }
.logo span {
  font-family: var(--font-titre);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--brun-fonce);
  letter-spacing: 0.5px;
}
.logo span b { font-weight: 500; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
}
.nav-links a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texte);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--brun); }
.nav-links .btn { padding: 12px 22px; }

/* Bouton hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--brun-fonce);
  transition: 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   5. HERO
   ========================================================================= */
/* Hero en deux colonnes : bloc texte (fond beige) à gauche, photo à droite.
   POUR CHANGER LA PHOTO : remplacez images/hero.jpg (voir la balise <img> du hero). */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
/* Colonne texte (gauche) */
.hero__text {
  position: relative;
  z-index: 1;
  background: var(--beige);
  display: flex;
  align-items: center;
  padding: calc(var(--nav-height) + 40px) clamp(28px, 5vw, 80px) 60px;
}
.hero__inner { max-width: 560px; }
.hero .eyebrow { color: var(--brun-clair); font-size: 12px; }
.hero h1 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(2.4rem, 3.7vw, 3.9rem);
  line-height: 1.1;
  color: var(--brun-fonce);
  margin: 18px 0;
  letter-spacing: 0.5px;
}
.hero h1 em { font-style: italic; color: var(--brun); }
.hero__subtitle {
  font-family: var(--font-titre);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--brun);
  margin-bottom: 16px;
}
.hero__desc {
  font-size: 1.05rem;
  color: var(--texte);
  max-width: 520px;
  margin-bottom: 30px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
/* Mention "appel offert" */
.hero__note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 0.92rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.hero__note strong { color: var(--brun); font-weight: 400; }
.hero__note .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brun-clair);
  flex-shrink: 0;
}
/* Colonne photo (droite) — la photo se fond dans le beige */
.hero__media { position: relative; overflow: hidden; }
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Adoucit légèrement la photo (masque le manque de netteté) */
  filter: saturate(0.96) contrast(0.97) brightness(1.02);
}
/* Fondu : le bord gauche de la photo se dissout progressivement dans le beige.
   Courbe étalée sur de nombreux paliers rapprochés pour éviter tout effet
   de "ligne" (l'œil perçoit les écarts d'opacité de façon non-linéaire). */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right,
    var(--beige) 0%,
    rgba(242, 232, 217, 0.96) 6%,
    rgba(242, 232, 217, 0.88) 12%,
    rgba(242, 232, 217, 0.74) 18%,
    rgba(242, 232, 217, 0.58) 26%,
    rgba(242, 232, 217, 0.42) 34%,
    rgba(242, 232, 217, 0.27) 43%,
    rgba(242, 232, 217, 0.15) 52%,
    rgba(242, 232, 217, 0.06) 62%,
    rgba(242, 232, 217, 0) 72%);
}
/* Voile chaleureux très subtil (profondeur, sans assombrir le bord) */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(130% 120% at 85% 30%,
    rgba(253, 250, 245, 0.08) 0%,
    rgba(45, 28, 14, 0) 55%,
    rgba(45, 28, 14, 0.10) 100%);
}


/* =========================================================================
   6. À PROPOS
   ========================================================================= */
.about .container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
/* Photo de Laure encadrée avec accent doré */
.about__photo {
  position: relative;
  align-self: stretch;
}
.about__photo::before {
  content: "";
  position: absolute;
  top: 18px; left: 18px; right: -18px; bottom: -18px;
  border: 1px solid var(--brun-clair);
  z-index: 0;
}
.about__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border: 1px solid var(--beige-moyen);
}
.about__text .eyebrow { margin-top: 4px; }
.about__text .title { margin-bottom: 26px; }
.about__text p { margin-bottom: 20px; font-size: 1.05rem; }

.quote {
  background: var(--beige);
  border: 1px solid var(--beige-moyen);
  border-left: 3px solid var(--brun-clair);
  padding: 30px 32px;
  margin-top: 34px;
}
.quote p {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.4;
  color: var(--brun-fonce);
  margin-bottom: 14px;
}
.quote cite {
  font-family: var(--font-corps);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}


/* =========================================================================
   7. POUR QUI
   ========================================================================= */
/* Flexbox (et non grid) pour que la dernière ligne incomplète
   (5 cartes = 3 + 2) se centre au lieu de rester collée à gauche. */
.audience-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.audience-card {
  flex: 1 1 300px;
  max-width: 360px;
  background: var(--creme);
  border: 1px solid var(--beige-moyen);
  border-top: 3px solid var(--brun-clair); /* liseré doré */
  padding: 38px 32px 34px;
  box-shadow: 0 14px 34px -16px rgba(92, 58, 30, 0.20);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.audience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(92, 58, 30, 0.30);
}
/* Pastille icône */
.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--beige);
  color: var(--brun);
  margin-bottom: 20px;
}
.audience-icon svg { width: 26px; height: 26px; }
.audience-card h3 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--brun-fonce);
  margin: 0 0 12px;
}
.audience-card p { font-size: 0.98rem; color: var(--texte); }


/* =========================================================================
   8. FORMULES & TARIFS
   ========================================================================= */
/* La zone des formules déborde du conteneur standard pour élargir les cartes */
.plans-section > .container { max-width: 1500px; padding: 0 40px; }

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.plan {
  background: var(--creme);
  border: 1px solid var(--beige-moyen);
  border-top: 3px solid var(--brun-clair); /* liseré doré : identité + relief */
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 14px 34px -16px rgba(92, 58, 30, 0.22);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(92, 58, 30, 0.32);
}
/* Carte mise en avant */
.plan--featured {
  background: var(--brun-fonce);
  border-color: var(--brun-fonce);
  border-top-color: var(--brun-clair); /* garde le liseré doré en haut */
  color: var(--creme);
  box-shadow: 0 22px 50px -14px rgba(92, 58, 30, 0.45);
}
.plan--featured:hover { box-shadow: 0 30px 60px -14px rgba(92, 58, 30, 0.52); }
.plan--featured .plan__name,
.plan--featured .plan__price { color: var(--creme); }
.plan--featured .plan__tagline { color: var(--beige-moyen); }
.plan--featured .plan__features li { color: var(--beige); }
.plan--featured .plan__features li::before { color: var(--brun-clair); }
.plan--featured .plan__meta { color: var(--beige-moyen); border-color: rgba(232,217,196,0.25); }
.plan--featured .btn--primary { background: var(--brun-clair); border-color: var(--brun-clair); color: var(--brun-fonce); }
.plan--featured .btn--primary:hover { background: var(--creme); border-color: var(--creme); }

.plan__flag {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 12px;
  color: var(--brun-clair);
}
.plan__name {
  font-family: var(--font-corps);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brun);
  margin-bottom: 12px;
}
.plan__tagline {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
  min-height: 2.6em;
  margin-bottom: 16px;
  line-height: 1.3;
}
.plan__features {
  list-style: none;
  flex-grow: 1;
  margin-bottom: 20px;
}
.plan__features li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--texte);
}
.plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--brun-clair);
  font-weight: 700;
}
.plan__meta {
  font-size: 0.82rem;
  color: var(--muted);
  border-top: 1px solid var(--beige-moyen);
  padding-top: 14px;
  margin-bottom: 16px;
}
.plan__price {
  font-family: var(--font-titre);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--brun-fonce);
  margin-bottom: 4px;
  white-space: nowrap; /* évite que "2 500 €" se coupe sur deux lignes */
}
.plan__price small { font-size: 0.95rem; color: var(--muted); }
.plan__example {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.plan .btn { justify-content: center; width: 100%; padding: 13px; font-size: 11px; }

/* Phrase "devis personnalisé" sous les formules */
.plans-devis {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: center;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--brun-fonce);
}
.plans-legal {
  text-align: center;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--muted);
  margin-top: 16px;
}

/* Bannière CTA sous les formules */
.plans-cta {
  margin-top: 54px;
  background: var(--brun);
  color: var(--creme);
  padding: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.plans-cta p {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.7rem;
}
.plans-cta .btn--outline { border-color: var(--creme); color: var(--creme); }
.plans-cta .btn--outline:hover { background: var(--creme); color: var(--brun); }


/* =========================================================================
   9. RÉALISATIONS / INSTAGRAM
   ========================================================================= */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.gallery figure {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--beige-moyen);
  position: relative;
  cursor: zoom-in;
}
.gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery figure:hover img { transform: scale(1.06); }
/* Voile + icône loupe au survol */
.gallery figure::after {
  content: "+";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-titre);
  font-size: 2.4rem;
  color: var(--creme);
  background: rgba(60, 42, 26, 0);
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  pointer-events: none;
}
.gallery figure:hover::after { opacity: 1; background: rgba(60, 42, 26, 0.28); }

/* ---- Visionneuse (lightbox) ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(30, 18, 8, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: 1100px;
  max-height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__caption {
  margin-top: 16px;
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--beige);
  text-align: center;
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: none;
  border: none;
  color: var(--creme);
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}
.lightbox__close {
  top: 24px; right: 30px;
  font-size: 2.6rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.4rem;
  padding: 10px 18px;
}
.lightbox__prev { left: 14px; }
.lightbox__next { right: 14px; }
.lightbox__close:hover,
.lightbox__nav:hover { color: var(--brun-clair); }
.lightbox__prev:hover { transform: translateY(-50%) translateX(-3px); }
.lightbox__next:hover { transform: translateY(-50%) translateX(3px); }

.gallery-actions {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.gallery-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.gallery-link {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--brun);
  border-bottom: 1px solid var(--brun-clair);
  padding-bottom: 4px;
}
.gallery-link:hover { color: var(--brun-fonce); }

/* ---- Comparateur Avant / Après ---- */
.ba-block { margin-top: 54px; }
.ba-eyebrow {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brun-clair);
  margin-bottom: 18px;
}
.ba {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--beige-moyen);
  user-select: none;
  touch-action: none;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* La photo "avant" est révélée jusqu'à la position du curseur */
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--creme);
  box-shadow: 0 0 0 1px rgba(30,18,8,0.15);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--creme);
  color: var(--brun);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(30,18,8,0.35);
}
.ba__grip svg { width: 20px; height: 20px; }
.ba__tag {
  position: absolute;
  bottom: 14px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme);
  background: rgba(30, 18, 8, 0.55);
  padding: 5px 12px;
  pointer-events: none;
}
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; }
/* Zone d'interaction (glisser) + accessibilité clavier */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

/* ---- Pop-up Instagram ---- */
.ig-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(30, 18, 8, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ig-modal.open { opacity: 1; visibility: visible; }
.ig-modal__panel {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--creme);
  border-top: 3px solid var(--brun-clair);
  padding: 34px;
}
.ig-modal__close {
  position: absolute;
  top: 14px; right: 18px;
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease;
}
.ig-modal__close:hover { color: var(--brun-fonce); }
.ig-modal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--beige-moyen);
}
.ig-modal__avatar {
  flex-shrink: 0;
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--beige);
  color: var(--brun);
}
.ig-modal__avatar svg { width: 26px; height: 26px; }
.ig-modal__id { flex-grow: 1; }
.ig-modal__handle {
  font-family: var(--font-titre);
  font-size: 1.4rem;
  color: var(--brun-fonce);
}
.ig-modal__sub { font-size: 0.9rem; color: var(--muted); }
.ig-modal__follow { padding: 10px 20px; }
.ig-modal__feed { min-height: 180px; }
.ig-modal__placeholder {
  text-align: center;
  padding: 30px 10px;
}
.ig-modal__placeholder p { margin-bottom: 14px; color: var(--texte); }
.ig-modal__hint { font-size: 0.9rem; color: var(--muted); }
.ig-modal__placeholder .btn { margin-top: 8px; }


/* =========================================================================
   9b. TÉMOIGNAGES (avis Google)
   ========================================================================= */
/* Résumé de la note Google */
.rating-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--beige-moyen);
}
.rating-summary__google { width: 34px; height: 34px; flex-shrink: 0; }
.rating-summary__stars {
  color: var(--brun-clair);
  font-size: 1.1rem;
  letter-spacing: 2px;
  line-height: 1;
}
.rating-summary__text p {
  font-size: 0.92rem;
  color: var(--muted);
  margin-top: 4px;
}
.rating-summary__text strong { color: var(--brun-fonce); font-weight: 700; }

/* Grille des avis : flexbox (et non grid) pour que la dernière ligne
   incomplète (ex. 5 cartes = 3 + 2) se centre au lieu de rester collée
   à gauche avec un grand vide à droite. */
.testimonials-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.testimonial-card {
  flex: 1 1 300px;
  max-width: 360px;
  background: var(--creme);
  border: 1px solid var(--beige-moyen);
  border-top: 3px solid var(--brun-clair);
  padding: 30px 26px;
  box-shadow: 0 14px 34px -16px rgba(92, 58, 30, 0.20);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -16px rgba(92, 58, 30, 0.30);
}
.testimonial-card__stars {
  color: var(--brun-clair);
  font-size: 0.95rem;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.testimonial-card__text {
  font-family: var(--font-titre);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--texte);
  margin-bottom: 16px;
}
.testimonial-card__author {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brun);
}

.testimonials-cta { text-align: center; margin-top: 44px; }


/* =========================================================================
   10. CONTACT
   ========================================================================= */
.contact .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
}
.contact__intro p { font-size: 1.08rem; margin-bottom: 30px; }
.contact__details { list-style: none; }
.contact__details li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--beige-moyen);
  font-size: 0.98rem;
}
.contact__details li:last-child { border-bottom: 1px solid var(--beige-moyen); }
.contact__details svg { width: 20px; height: 20px; color: var(--brun); flex-shrink: 0; }

/* Formulaire */
.contact-form { display: grid; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-corps);
  font-size: 1rem;
  font-weight: 300;
  color: var(--texte);
  background: var(--creme);
  border: 1px solid var(--beige-moyen);
  padding: 14px 16px;
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--brun);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 130px; }
.contact-form .btn { justify-content: center; margin-top: 4px; }


/* =========================================================================
   11. FOOTER
   ========================================================================= */
.footer {
  background: var(--brun-fonce);
  color: var(--beige);
  padding: 40px 0;
}
.footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.footer .logo span { color: var(--creme); }
.footer .logo svg { color: var(--beige); }
.footer .logo img { filter: brightness(0) invert(1); } /* logo en blanc sur fond sombre */
.footer__copy { font-size: 0.85rem; color: var(--beige-moyen); }
.footer__links { display: flex; gap: 24px; }
.footer__links a {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--beige);
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--brun-clair); }

/* Crédit de création (Clique & Brille) */
.footer__credit {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(232, 217, 196, 0.2);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--beige-moyen);
}
.footer__credit strong { color: var(--brun-clair); font-weight: 400; }
.footer__credit a:hover strong { color: var(--creme); }


/* =========================================================================
   11b. PAGE LÉGALE (mentions-legales.html)
   ========================================================================= */
/* En-tête simplifié (indépendant de la navbar principale) */
.legal-nav {
  position: sticky;
  top: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(253, 250, 245, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--beige-moyen);
  z-index: 1000;
}
.legal-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-nav .legal-back { margin-top: 0; }

.legal-hero {
  background: var(--beige);
  padding: calc(var(--nav-height) + 60px) 0 46px;
}
.legal-hero .eyebrow { color: var(--brun-clair); }
.legal-hero h1 {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: var(--brun-fonce);
  line-height: 1.15;
}
.legal-hero .legal-updated {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}
.legal { padding: 64px 0 90px; background: var(--creme); }
.legal .container { max-width: 840px; }
.legal section { padding: 0; margin-bottom: 48px; }
.legal section:last-child { margin-bottom: 0; }
.legal h2 {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--brun-fonce);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--beige-moyen);
}
.legal h3 {
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brun);
  margin: 26px 0 10px;
}
.legal p { margin-bottom: 14px; font-size: 1rem; }
.legal ul { list-style: none; margin: 0 0 14px; }
.legal li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 1rem;
}
.legal li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--brun-clair);
}
.legal a { color: var(--brun); border-bottom: 1px solid var(--beige-moyen); }
.legal a:hover { color: var(--brun-fonce); border-color: var(--brun-clair); }
.legal strong { font-weight: 700; color: var(--brun-fonce); }
/* Zone à compléter mise en évidence pour Laure */
.legal .todo {
  background: var(--beige);
  border-left: 3px solid var(--brun-clair);
  padding: 3px 8px;
  font-style: italic;
  color: var(--brun);
}
/* Tableau (page cookies) - conteneur scrollable pour éviter tout
   débordement horizontal sur mobile */
.legal-table-wrap {
  overflow-x: auto;
  margin: 4px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.legal-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--beige-moyen);
  vertical-align: top;
}
.legal-table th {
  background: var(--beige);
  color: var(--brun-fonce);
  font-family: var(--font-corps);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.legal-table tr:nth-child(even) td { background: var(--creme); }
.legal-note {
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
}
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brun);
}


/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */

/* Tablette */
@media (max-width: 1024px) {

  /* Hero : colonnes empilées (texte puis photo) */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero__media { height: 54vh; }
  /* Fondu vertical : le haut de la photo se dissout progressivement dans le beige */
  .hero__media::before {
    background: linear-gradient(to bottom,
      var(--beige) 0%,
      rgba(242, 232, 217, 0.96) 6%,
      rgba(242, 232, 217, 0.88) 12%,
      rgba(242, 232, 217, 0.74) 18%,
      rgba(242, 232, 217, 0.58) 26%,
      rgba(242, 232, 217, 0.42) 34%,
      rgba(242, 232, 217, 0.27) 43%,
      rgba(242, 232, 217, 0.15) 52%,
      rgba(242, 232, 217, 0.06) 62%,
      rgba(242, 232, 217, 0) 72%);
  }
  .hero__media::after { display: none; }

  /* À propos : photo au-dessus du texte */
  .about .container { grid-template-columns: 1fr; gap: 54px; }
  .about__photo { max-width: 480px; margin-right: 18px; }
  .about__photo img { min-height: 340px; }

  /* Formules : scroll horizontal */
  .plans {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 16px;
    -webkit-overflow-scrolling: touch;
  }
  .plan { scroll-snap-align: start; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile */
@media (max-width: 768px) {
  section { padding: 72px 0; }
  .container { padding: 0 22px; }

  /* Nav mobile */
  .hamburger { display: flex; }
  .nav-links {
    position: fixed;
    top: var(--nav-height); left: 0; right: 0;
    background: var(--creme);
    border-bottom: 1px solid var(--beige-moyen);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 22px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .nav-links.open { max-height: 420px; padding: 14px 22px 28px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 14px 0; width: 100%; }
  .nav-links .btn { margin-top: 12px; width: 100%; justify-content: center; }

  .about .container,
  .contact .container { grid-template-columns: 1fr; gap: 40px; }

  .plans { grid-auto-columns: 86%; }

  .plans-cta { flex-direction: column; text-align: center; padding: 36px 24px; }
  .plans-cta p { font-size: 1.4rem; }
  /* Le bouton ne doit plus forcer une seule ligne (texte trop long pour mobile) */
  .plans-cta .btn {
    white-space: normal;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Hero mobile : photo retirée (retour client), texte seul sur fond beige */
  .hero__text { padding: calc(var(--nav-height) + 30px) 22px 50px; }
  .hero h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
  .hero__media { display: none; }
  .hero__actions { gap: 18px; }
  .footer .container { flex-direction: column; text-align: center; }

  .about__photo { margin-right: 14px; max-width: 100%; }
}

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .hero__photo { animation: none !important; }
}