/* ============================================================
   LA COUR SUCRÉE — Feuille de style
   Charte respectée à partir de la phase UI/UX validée :
   - Palette stricte (variables ci-dessous)
   - Cormorant Garamond (titres) + Inter (textes)
   - Mobile-first, breakpoints 768 / 1024 / 1280
   - Système 8pt pour les espacements
============================================================ */


/* --- 1. TOKENS ----------------------------------------------- */
:root {
  /* Couleurs */
  --c-cream:      #FAF7F2;
  --c-nude:       #E8D8CD;
  --c-champagne:  #D6BFA7;
  --c-brown:      #5B4636;
  --c-gold:       #C9A86A;
  --c-gold-dark:  #B69558;
  --c-white:      #FFFFFF;
  --c-text:       #3B3128;
  --c-soft-gray:  #8C7E70;
  --c-line:       #E5DCD2;
  --c-error:      #B86B5A;

  /* Typographie */
  --font-display: "Cormorant Garamond", "Georgia", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacements (système 8pt) */
  --s-xxs: 4px;
  --s-xs:  8px;
  --s-sm:  16px;
  --s-md:  24px;
  --s-lg:  40px;
  --s-xl:  64px;
  --s-xxl: 96px;
  --s-3xl: 160px;

  /* Animations */
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --container-max: 1240px;
  --container-pad: 24px;
}


/* --- 2. RESET LÉGER ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  color: var(--c-text);
  background: var(--c-cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; font-family: inherit; color: inherit; }


/* --- 3. CONTAINER & UTILS ------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--s-xxl) 0;
}
@media (min-width: 1024px) {
  .section { padding: var(--s-3xl) 0; }
  :root { --container-pad: 48px; }
}
@media (min-width: 1280px) {
  :root { --container-pad: 80px; }
}


/* Typographie réutilisable */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--s-md);
}
.eyebrow--light { color: var(--c-cream); opacity: 0.8; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--c-brown);
  margin: 0 0 var(--s-md);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(36px, 7vw, 72px); line-height: 1.05; }
h2 { font-size: clamp(28px, 5vw, 48px); line-height: 1.15; }
h3 { font-size: clamp(18px, 2vw, 22px); line-height: 1.3; }

em { font-style: italic; }

p { margin: 0 0 var(--s-md); }
p.lead { font-size: 17px; max-width: 540px; line-height: 1.7; }


/* --- 4. BOUTONS ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  transition: all 300ms var(--ease-soft);
  border: 1px solid transparent;
}

.btn--primary {
  background: var(--c-gold);
  color: var(--c-cream);
}
.btn--primary:hover { background: var(--c-gold-dark); }

.btn--ghost {
  background: transparent;
  color: var(--c-cream);
  border-color: var(--c-cream);
}
.btn--ghost:hover {
  background: var(--c-cream);
  color: var(--c-brown);
}

.btn--block { width: 100%; }

/* Lien-flèche */
.link-arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-brown);
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 4px;
  transition: all 300ms var(--ease-soft);
}
.link-arrow:hover { color: var(--c-gold); transform: translateX(4px); }


/* --- 5. HEADER ----------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 104px;
  z-index: 100;
  /* Léger dégradé sombre en haut pour rendre logo et menu lisibles
     dès le chargement, sans casser l'effet premium sur la photo hero.
     Disparaît au scroll quand le fond crème prend le relais. */
  background: linear-gradient(
    180deg,
    rgba(42, 32, 24, 0.45) 0%,
    rgba(42, 32, 24, 0.20) 60%,
    rgba(42, 32, 24, 0.00) 100%
  );
  transition: height 400ms var(--ease-soft),
              background 400ms var(--ease-soft),
              border-color 400ms var(--ease-soft);
}
.header.scrolled {
  height: 76px;
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid rgba(201, 168, 106, 0.25);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}
.header__logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-cream);
  transition: color 400ms var(--ease-soft);
  line-height: 1;
}
.header.scrolled .header__logo { color: var(--c-brown); }

/* Logo image — adaptatif selon l'état du header
   ─────────────────────────────────────────────
   Pour ajuster la taille du sceau, modifie ces 4 valeurs :
   • Desktop état initial  → --logo-size-desktop
   • Desktop état scrollé  → --logo-size-scrolled
   • Mobile état initial   → --logo-size-mobile
   • Mobile état scrollé   → --logo-size-mobile-scrolled
*/
:root {
  --logo-size-desktop: 84px;
  --logo-size-scrolled: 60px;
  --logo-size-mobile: 56px;
  --logo-size-mobile-scrolled: 48px;
}

.header__logo-img {
  height: var(--logo-size-desktop);
  width: auto;
  display: block;
  transition: height 400ms var(--ease-soft);
  /* Léger halo doré sur fond photo, pour faire ressortir le sceau */
  filter: drop-shadow(0 2px 6px rgba(58, 44, 34, 0.18));
}
.header.scrolled .header__logo-img {
  height: var(--logo-size-scrolled);
  filter: none;
}

/* Mobile */
@media (max-width: 1023px) {
  .header__logo-img { height: var(--logo-size-mobile); }
  .header.scrolled .header__logo-img { height: var(--logo-size-mobile-scrolled); }
}

.header__nav { display: none; align-items: center; gap: var(--s-lg); }
@media (min-width: 1024px) { .header__nav { display: flex; } }

.header__menu {
  display: flex;
  gap: var(--s-lg);
}
.header__menu a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--c-cream);
  position: relative;
  padding: 4px 0;
  transition: color 300ms var(--ease-soft);
  /* Légère ombre pour la lisibilité sur photo */
  text-shadow: 0 1px 4px rgba(42, 32, 24, 0.25);
}
.header.scrolled .header__menu a {
  color: var(--c-brown);
  text-shadow: none;
}
.header__menu a::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 1px;
  background: var(--c-gold);
  transition: width 300ms var(--ease-premium);
}
.header__menu a:hover::after { width: 100%; }

.header__cta {
  padding: 12px 26px;
  min-height: 42px;
  font-size: 11px;
  letter-spacing: 0.15em;
  /* Ombre légère pour décoller du fond photo */
  box-shadow: 0 4px 16px rgba(58, 44, 34, 0.18);
}
.header.scrolled .header__cta { box-shadow: none; }

/* Burger */
.header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  gap: 6px;
  position: relative;
}
.header__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-cream);
  transition: all 350ms var(--ease-soft);
}
.header.scrolled .header__burger span { background: var(--c-brown); }
@media (min-width: 1024px) { .header__burger { display: none; } }

body.menu-open .header__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .header__burger span:nth-child(2) { opacity: 0; }
body.menu-open .header__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
body.menu-open .header__burger span { background: var(--c-brown); }


/* --- 6. MENU MOBILE ------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--c-cream);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-16px);
  transition: opacity 500ms var(--ease-premium),
              transform 500ms var(--ease-premium),
              visibility 0s linear 500ms;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.mobile-menu__inner {
  text-align: center;
  width: 100%;
  padding: var(--s-xl) var(--s-md);
}
.mobile-menu__logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--c-brown);
  display: block;
  margin-bottom: var(--s-xl);
}
.mobile-menu__logo-img {
  width: 130px;
  height: auto;
  margin: 0 auto var(--s-xl);
  display: block;
}
.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-md);
  margin-bottom: var(--s-xl);
}
.mobile-menu__list a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  color: var(--c-brown);
}
.mobile-menu__signature {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-champagne);
  margin-bottom: var(--s-md);
}
.mobile-menu__cta {
  width: 80%;
  max-width: 280px;
  margin: 0 auto var(--s-md);
}
.mobile-menu__social a {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-soft-gray);
}


/* --- 7. HERO ------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: #2A2018; /* fallback si l'image met du temps à charger */
}
.hero__image {
  position: absolute;
  inset: 0;
}
.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Recadrage centré sur le gâteau (focus légèrement bas) */
  object-position: center 62%;
}

/*
  OVERLAY HERO — 3 couches superposées pour une lisibilité éditoriale
  ───────────────────────────────────────────────────────────────────
  Couche 1 : voile global marron foncé très léger (texture)
  Couche 2 : gradient vertical, plus dense en haut (header) et en bas (CTA)
  Couche 3 : halo radial doux centré sur la zone de texte (le titre se détache)

  Pour ajuster la lisibilité du hero, modifie ces 3 valeurs :
*/
:root {
  --hero-overlay-strength: 0.30;     /* voile global, 0 = pas de voile */
  --hero-gradient-top:     0.45;     /* densité du gradient en haut */
  --hero-gradient-bottom:  0.60;     /* densité du gradient en bas */
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    /* Halo radial qui adoucit la zone centrale et fait ressortir le titre */
    radial-gradient(
      ellipse 90% 60% at 50% 55%,
      rgba(42, 32, 24, 0.22) 0%,
      transparent 70%
    ),
    /* Gradient vertical : plus dense en haut (sous le header) et en bas (sous les CTA) */
    linear-gradient(
      180deg,
      rgba(42, 32, 24, var(--hero-gradient-top))    0%,
      rgba(42, 32, 24, 0.10)                        45%,
      rgba(42, 32, 24, 0.18)                        70%,
      rgba(42, 32, 24, var(--hero-gradient-bottom)) 100%
    ),
    /* Voile global discret (marron très peu opaque) */
    linear-gradient(
      0deg,
      rgba(91, 70, 54, var(--hero-overlay-strength)),
      rgba(91, 70, 54, var(--hero-overlay-strength))
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  color: var(--c-cream);
  text-align: center;
  padding-top: 80px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .hero__content {
    text-align: left;
    margin: 0;
    max-width: 640px;
  }
}

.hero__title {
  color: var(--c-cream);
  font-weight: 300;
  margin: var(--s-sm) 0 var(--s-md);
  /* Ombre douce pour gagner en lisibilité sans casser le luxe */
  text-shadow: 0 2px 30px rgba(42, 32, 24, 0.45);
  letter-spacing: -0.005em;
}
.hero__title em { font-weight: 300; }

.hero__subtitle {
  font-size: clamp(15px, 1.4vw, 17px);
  font-weight: 300;
  color: var(--c-cream);
  max-width: 540px;
  margin: 0 auto var(--s-lg);
  line-height: 1.85;          /* interlignage augmenté pour respirer */
  opacity: 0.95;
  text-shadow: 0 1px 12px rgba(42, 32, 24, 0.35);
}
@media (min-width: 1024px) {
  .hero__subtitle { margin-left: 0; margin-right: 0; }
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  align-items: center;
}
@media (min-width: 640px) {
  .hero__cta { flex-direction: row; justify-content: center; }
}
@media (min-width: 1024px) {
  .hero__cta {
    justify-content: flex-start;
    /* Plus d'air entre les boutons et le chevron "Découvrir" sur desktop */
    margin-bottom: 72px;
  }
}

/* CTA primaire un peu plus présent dans le hero (vs secondaire) */
.hero__cta .btn--primary {
  box-shadow: 0 8px 24px rgba(201, 168, 106, 0.28);
}
.hero__cta .btn--ghost {
  /* Léger fond translucide pour gagner en lisibilité sans bloc opaque */
  background: rgba(250, 247, 242, 0.06);
  backdrop-filter: blur(2px);
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: floatChevron 1.6s var(--ease-soft) infinite;
}
.hero__scroll-chevron {
  width: 14px; height: 14px;
  border-right: 1.5px solid var(--c-cream);
  border-bottom: 1.5px solid var(--c-cream);
  transform: rotate(45deg);
  display: block;
}
.hero__scroll-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.1em;
}
@keyframes floatChevron {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}


/* --- 8. PHRASE SENSORIELLE ----------------------------------- */
.sensorial {
  padding: var(--s-xxl) 0;
  background: var(--c-cream);
  text-align: center;
}
@media (min-width: 1024px) { .sensorial { padding: 120px 0; } }
.sensorial__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 3vw, 30px);
  color: var(--c-brown);
  line-height: 1.4;
  max-width: 760px;
  margin: 0 auto;
}


/* --- 9. CONCEPT ---------------------------------------------- */
.concept__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
  margin-bottom: var(--s-xxl);
}
@media (min-width: 1024px) {
  .concept__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3xl);
  }
}
.concept__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Promesses — 3 piliers du concept
   ─────────────────────────────────
   Subtle enhancement : fin filet doré décoratif au-dessus,
   typographie un peu plus généreuse, hover désactivé en mobile.
*/
.promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  padding: var(--s-xl) 0 0;
  border-top: 1px solid var(--c-line);
}
@media (min-width: 768px) {
  .promises {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}
.promise {
  position: relative;
  padding: var(--s-lg) var(--s-md);
  text-align: center;
  transition: background 400ms var(--ease-soft);
}
/* Filet vertical fin entre les piliers sur tablette/desktop */
@media (min-width: 768px) {
  .promise + .promise {
    border-left: 1px solid var(--c-line);
  }
  .promise:hover {
    background: rgba(232, 216, 205, 0.28);  /* nude très léger */
  }
}
/* Filet doré décoratif au-dessus de chaque titre */
.promise h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--c-brown);
  margin-bottom: var(--s-xs);
  line-height: 1.3;
}
.promise h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  margin: 0 auto var(--s-md);
}
.promise p {
  font-size: 14.5px;
  color: var(--c-soft-gray);
  margin: 0;
  line-height: 1.7;
}


/* --- 10. CRÉATION SUR MESURE --------------------------------- */
.sur-mesure { background: var(--c-cream); }
.sur-mesure__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .sur-mesure__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3xl);
  }
}
.sur-mesure__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.reassurance-list {
  margin: var(--s-md) 0 var(--s-lg);
}
.reassurance-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: var(--c-text);
  font-size: 15px;
}
.reassurance-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 1px;
  background: var(--c-gold);
}


/* --- 11. RÉALISATIONS (galerie) ------------------------------ */
.realisations__header { text-align: center; margin-bottom: var(--s-xxl); }
.realisations__header .lead { margin: 0 auto; }

/*
   Galerie — grille de réalisations
   ─────────────────────────────────
   Comportement par défaut : 1 col mobile / 2 col tablette / 3 col desktop.
   Variante .gallery--four (utilisée sur la home avec 4 photos) :
       mobile = 1 colonne (empilement vertical)
       tablette = 2 × 2
       desktop = 4 photos en une seule rangée éditoriale
   Pour ajouter une 5e photo plus tard : retirer simplement la classe
   `gallery--four` du <ul> (ou ajouter `gallery--five`) et la grille
   reviendra à 3 colonnes desktop.
*/
.gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

/* Variante 4 photos : 4 colonnes desktop */
@media (min-width: 1024px) {
  .gallery.gallery--four { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* CTA texte discret centré sous la galerie */
.gallery__cta {
  text-align: center;
  margin: var(--s-xl) 0 0;
}
.gallery__cta .link-arrow {
  font-size: 15px;
}
.gallery__item figure {
  margin: 0;
  position: relative;
  overflow: hidden;
}
.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 600ms var(--ease-premium);
}
.gallery__item:hover img { transform: scale(1.03); }
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-brown);
  background: rgba(250, 247, 242, 0.92);
  opacity: 0;
  transform: translateY(8px);
  transition: all 400ms var(--ease-soft);
}
.gallery__item:hover figcaption,
.gallery__item:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}


/* --- 12. PRESTATIONS ----------------------------------------- */
.prestations { background: var(--c-nude); }
.prestations__header { text-align: center; margin-bottom: var(--s-xxl); }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 768px) {
  .cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-md); }
}
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--s-lg);
  transition: transform 400ms var(--ease-soft), border-color 400ms var(--ease-soft), box-shadow 400ms var(--ease-soft);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--c-gold);
  box-shadow: 0 8px 24px rgba(91, 70, 54, 0.06);
}
.card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  margin-bottom: var(--s-sm);
}
.card p {
  font-size: 14px;
  color: var(--c-soft-gray);
  margin: 0;
  line-height: 1.7;
}
.prestations__note {
  text-align: center;
  font-style: italic;
  color: var(--c-soft-gray);
  margin: var(--s-xl) 0 var(--s-lg);
}
.prestations__cta { text-align: center; }


/* --- 13. À PROPOS -------------------------------------------- */
.apropos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .apropos__grid {
    grid-template-columns: 45% 1fr;
    gap: var(--s-3xl);
  }
}
.apropos__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.apropos__text p { color: var(--c-text); font-size: 16px; line-height: 1.75; }


/* --- 14. TÉMOIGNAGES ----------------------------------------- */
.testimonials { background: var(--c-cream); text-align: center; }
.testimonials__inner { max-width: 760px; margin: 0 auto; }

.testimonials__carousel {
  position: relative;
  min-height: 200px;
  margin: var(--s-lg) 0 var(--s-md);
}
.testimonial {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-soft);
  pointer-events: none;
}
.testimonial.active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}
.testimonial p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--c-brown);
  line-height: 1.45;
  margin-bottom: var(--s-md);
}
.testimonial cite {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--c-champagne);
  text-transform: uppercase;
}
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--s-md);
}
.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background 300ms var(--ease-soft);
  padding: 0;
}
.dot.active { background: var(--c-gold); }


/* --- 15. FAQ ------------------------------------------------- */
.faq { background: var(--c-cream); }
.faq__inner { max-width: 800px; margin: 0 auto; text-align: center; }
.faq__list { text-align: left; margin-top: var(--s-xl); }

.faq__item {
  border-bottom: 1px solid var(--c-line);
}
.faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--s-md) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--c-brown);
  text-align: left;
  transition: color 300ms var(--ease-soft);
}
.faq__question:hover { color: var(--c-gold); }

.faq__icon {
  position: relative;
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-left: var(--s-md);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--c-gold);
  transition: transform 400ms var(--ease-soft);
}
.faq__icon::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.faq__item.open .faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 500ms var(--ease-soft);
}
.faq__answer p {
  padding-bottom: var(--s-md);
  font-size: 15px;
  color: var(--c-soft-gray);
  line-height: 1.7;
  margin: 0;
  max-width: 700px;
}


/* --- 16. CONTACT --------------------------------------------- */
.contact { background: var(--c-cream); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
}
@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--s-3xl);
    align-items: start;
  }
}
.contact__coords {
  margin-top: var(--s-lg);
}
.contact__coords li { margin-bottom: var(--s-md); font-size: 14px; }
.contact__coords strong {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.contact__coords a {
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease-soft);
}
.contact__coords a:hover { border-bottom-color: var(--c-gold); }

/* Formulaire */
.form {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--s-xl) var(--s-lg);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .form { padding: var(--s-xl) var(--s-xl); }
}
.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 640px) {
  .form__row { grid-template-columns: 1fr 1fr; }
}

.field {
  display: block;
  margin-bottom: var(--s-md);
  position: relative;
}
.field__label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;                /* +100 pour mieux ressortir */
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brown);           /* marron au lieu de gris doux */
  margin-bottom: 10px;
  transition: color 300ms var(--ease-soft);
}
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--c-champagne);   /* trait plus visible */
  background: transparent;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--c-text);
  outline: none;
  transition: border-color 350ms var(--ease-premium);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input:focus,
.field textarea:focus {
  border-bottom: 2px solid var(--c-gold);
  padding-bottom: 9px;
}
.field input:focus + .field__label,
.field:focus-within .field__label { color: var(--c-gold); }

.form__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  justify-content: center;
  margin: var(--s-lg) 0 var(--s-md);
}
.form__reassure li {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.form__reassure li::before {
  content: "✦";
  color: var(--c-gold);
  margin-right: 6px;
}

.form__success {
  margin-top: var(--s-md);
  padding: var(--s-md);
  background: var(--c-nude);
  color: var(--c-brown);
  font-style: italic;
  text-align: center;
  font-family: var(--font-display);
  font-size: 17px;
}


/* --- 17. FOOTER ---------------------------------------------- */
.footer {
  background: var(--c-brown);
  color: var(--c-cream);
  padding: var(--s-xxl) 0 var(--s-md);
  border-top: 1px solid rgba(201, 168, 106, 0.4);
}
.footer__inner { text-align: center; }
.footer__brand { margin-bottom: var(--s-xl); }
.footer__logo {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  display: block;
  margin-bottom: var(--s-sm);
}
.footer__logo-img {
  width: 120px;
  height: auto;
  margin: 0 auto var(--s-md);
  display: block;
}
.footer__signature {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--c-champagne);
  margin-bottom: 4px;
  font-size: 16px;
}
.footer__baseline {
  font-size: 13px;
  color: var(--c-champagne);
  letter-spacing: 0.04em;
  margin: 0;
}
.footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-lg);
  margin-bottom: var(--s-lg);
  text-align: center;
}
@media (min-width: 768px) {
  .footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3xl);
  }
}
.footer__col h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-champagne);
  margin-bottom: var(--s-md);
}
.footer__col ul li { margin-bottom: 10px; }
.footer__col a {
  font-size: 14px;
  color: var(--c-cream);
  transition: color 250ms var(--ease-soft);
}
.footer__col a:hover { color: var(--c-gold); }
.footer__copyright {
  font-size: 11px;
  color: var(--c-champagne);
  letter-spacing: 0.05em;
  padding-top: var(--s-lg);
  border-top: 1px solid rgba(201, 168, 106, 0.2);
  margin: var(--s-lg) 0 0;
}


/* --- 18. ANIMATIONS SCROLL-REVEAL ---------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 800ms var(--ease-premium),
              transform 800ms var(--ease-premium);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Sur la page d'accueil, les éléments du hero apparaissent au chargement */
.hero .reveal { transition-delay: 0.1s; }
.hero .reveal:nth-child(2) { transition-delay: 0.25s; }
.hero .reveal:nth-child(3) { transition-delay: 0.4s; }
.hero .reveal:nth-child(4) { transition-delay: 0.55s; }


/* --- 19. RESPONSIVE LAYOUT FINETUNING ------------------------ */
@media (max-width: 767px) {
  /* Padding latéral réduit pour mobile */
  :root { --container-pad: 24px; }
  .section { padding: 64px 0; }

  /* HERO MOBILE — composition équilibrée */
  .hero { min-height: 580px; }
  .hero__content {
    padding-top: 120px;            /* dégager du header sticky */
    padding-bottom: 32px;
    text-align: center;
  }
  .hero__title {
    font-size: 40px;
    line-height: 1.12;
    margin: 12px 0 20px;
  }
  .hero__subtitle {
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 36px;
    padding: 0 8px;
  }
  .hero__cta { gap: 12px; width: 100%; }
  .hero__cta .btn {
    width: 100%;
    max-width: 280px;
    min-height: 52px;
  }

  /* Header mobile : voile crème dès le départ pour lisibilité du logo */
  .header {
    height: 80px;
    background: rgba(250, 247, 242, 0.20);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .header.scrolled { height: 64px; }

  /* Sur mobile : image AVANT texte pour les sections immersives */
  .concept__grid .concept__image { order: -1; }
  .sur-mesure__grid .sur-mesure__image { order: -1; }
  .apropos__grid .apropos__image { order: -1; }
}

/* Tablette intermédiaire : équilibre supplémentaire */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__content { text-align: center; padding: 100px 24px 32px; }
  .hero__title { font-size: 52px; line-height: 1.1; }
  .hero__cta { justify-content: center; }
}

/* Lecteurs préférant moins d'animation : on coupe tout */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ============================================================
   20. PAGE PRESTATIONS & SAVEURS
   Styles spécifiques à cette page uniquement.
   Toutes les classes sont préfixées pour éviter tout conflit
   avec la page d'accueil.
============================================================ */

/* Indicateur de page active dans le menu */
.header__menu a.is-active {
  color: var(--c-gold);
}
.header__menu a.is-active::after {
  width: 100%;
}
.header.scrolled .header__menu a.is-active { color: var(--c-gold); }


/* ----- 20.1  HERO DE PAGE (sobre, 2 colonnes) ----- */
.page-hero {
  padding: 160px 0 96px;
  background: var(--c-cream);
}
@media (max-width: 1023px) {
  .page-hero { padding: 132px 0 64px; }
}
.page-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
}
@media (min-width: 1024px) {
  .page-hero__grid {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--s-3xl);
  }
}
.page-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  color: var(--c-brown);
  margin: var(--s-sm) 0 var(--s-lg);
  letter-spacing: -0.01em;
}
.page-hero__lead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.45;
  color: var(--c-brown);
  margin-bottom: var(--s-md);
  max-width: 560px;
}
.page-hero__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-text);
  max-width: 540px;
  margin-bottom: var(--s-lg);
}
.page-hero__image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 1023px) {
  .page-hero__grid .page-hero__image { order: -1; }
}


/* ----- 20.2  INTRODUCTION PREMIUM ----- */
.intro-premium { background: var(--c-cream); padding: 64px 0; }
.intro-premium__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.intro-premium__inner h2 {
  font-style: italic;
  margin-bottom: var(--s-lg);
}
.intro-premium__inner p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
}


/* ----- 20.3  ENCART À PARTIR DE 50 PARTS ----- */
.parts-block {
  background: var(--c-nude);
  padding: 96px 0;
  position: relative;
}
@media (min-width: 1024px) {
  .parts-block { padding: 120px 0; }
}
.parts-block__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .parts-block__grid {
    grid-template-columns: auto 1fr;
    gap: var(--s-3xl);
    text-align: left;
  }
}
.parts-block__number {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.parts-block__digit {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(140px, 20vw, 240px);
  line-height: 0.85;
  color: var(--c-gold);
  letter-spacing: -0.04em;
}
.parts-block__legend {
  margin-top: var(--s-sm);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-brown);
}
.parts-block__text h2 {
  font-style: italic;
  margin-bottom: var(--s-md);
}
.parts-block__text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  max-width: 560px;
}


/* ----- 20.4  CARTES PRESTATIONS (3 cartes premium) ----- */
.prestations-list { background: var(--c-cream); }
.prestations-list__header {
  text-align: center;
  margin-bottom: var(--s-xxl);
}
.prestations-list__header h2 { font-style: italic; }

.prestation-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 768px) {
  .prestation-cards {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-md);
    align-items: stretch;
  }
}
.prestation-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--s-xl) var(--s-lg);
  display: flex;
  flex-direction: column;
  transition: transform 400ms var(--ease-soft),
              border-color 400ms var(--ease-soft),
              box-shadow 400ms var(--ease-soft);
}
.prestation-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-gold);
  box-shadow: 0 12px 28px rgba(91, 70, 54, 0.07);
}
.prestation-card--feature {
  border-top: 3px solid var(--c-gold);
}
.prestation-card__label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: var(--s-md);
}
.prestation-card__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.35;
  color: var(--c-brown);
  margin: 0 0 var(--s-md);
}
.prestation-card__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-soft-gray);
  margin-bottom: var(--s-md);
}
.prestation-card__list {
  margin-top: auto;
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-line);
}
.prestation-card__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--c-text);
}
.prestation-card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 1px;
  background: var(--c-gold);
}

.prestations-list__note {
  text-align: center;
  margin-top: var(--s-xl);
  font-style: italic;
  color: var(--c-soft-gray);
}


/* ----- 20.5  GRILLE "CE QUI COMPOSE VOTRE DEVIS" ----- */
.devis-influence { background: var(--c-cream); }
.devis-influence__header {
  text-align: center;
  margin-bottom: var(--s-xxl);
}
.devis-influence__header h2 { font-style: italic; }

.devis-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
@media (min-width: 640px) {
  .devis-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .devis-grid { grid-template-columns: repeat(4, 1fr); }
}
.devis-grid__item {
  background: var(--c-cream);
  padding: var(--s-lg) var(--s-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-xs);
  min-height: 120px;
  transition: background 300ms var(--ease-soft);
}
.devis-grid__item:hover {
  background: var(--c-white);
}
.devis-grid__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--c-gold);
  letter-spacing: 0.05em;
}
.devis-grid__item > span:last-child {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.3;
  color: var(--c-brown);
}

.devis-influence__note {
  text-align: center;
  margin-top: var(--s-xl);
  font-style: italic;
  color: var(--c-soft-gray);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}


/* ----- 20.6  SAVEURS SIGNATURES ----- */
.saveurs {
  background: var(--c-nude);
  padding: 96px 0;
}
@media (min-width: 1024px) {
  .saveurs { padding: 160px 0; }
}
/*
  Section Saveurs — composition verticale.
  L'image cut.jpg est une coupe d'entremets en format paysage.
  On lui donne donc toute la largeur, en ratio éditorial 16:10 desktop / 4:3 mobile.
  Si l'image se retrouve toujours rognée d'un côté important, passer
  `object-fit` de `cover` à `contain` dans la classe .saveurs-image (voir plus bas).
*/
.saveurs__intro {
  display: block;
  text-align: center;
  margin-bottom: var(--s-xxl);
}
.saveurs__image,
.saveurs-image {
  margin: 0 auto var(--s-xl);
  max-width: 1040px;
  /* Fond crème en cas de marges si l'on passe en object-fit: contain */
  background: var(--c-cream);
}
.saveurs__image img,
.saveurs-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
  display: block;
}
@media (max-width: 767px) {
  .saveurs__image img,
  .saveurs-image img {
    aspect-ratio: 4 / 3;
  }
}

/* Texte de la section, centré sous l'image */
.saveurs__text {
  max-width: 640px;
  margin: 0 auto;
}
.saveurs__text h2 { font-style: italic; }
.saveurs__text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  margin: 0 auto;
}

/*
  Variante de secours — si tu vois que ton image cut.jpg est encore rognée
  (parce qu'elle est en panoramique très allongé par ex.), remplace
  `object-fit: cover` par `object-fit: contain` dans le bloc ci-dessus,
  OU ajoute la classe .saveurs-image--contain à ta balise <div class="saveurs__image">
  dans le HTML.
*/
.saveurs__image.saveurs-image--contain img,
.saveurs-image--contain img {
  object-fit: contain;
  background: var(--c-cream);
}

.saveurs-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
}
@media (min-width: 640px) {
  .saveurs-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .saveurs-cards { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
}
.saveur-card {
  background: var(--c-cream);
  padding: var(--s-lg);
  border: 1px solid rgba(201, 168, 106, 0.15);
  transition: border-color 400ms var(--ease-soft), transform 400ms var(--ease-soft);
}
.saveur-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-2px);
}
.saveur-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--c-brown);
  margin: 0 0 var(--s-sm);
}
.saveur-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-soft-gray);
  margin: 0;
}

.saveurs__note {
  text-align: center;
  margin-top: var(--s-xl);
  font-style: italic;
  color: var(--c-brown);
}


/* ----- 20.7  OPTIONS & PERSONNALISATION ----- */
.options { background: var(--c-cream); }
.options__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-xl);
  align-items: start;
}
@media (min-width: 1024px) {
  .options__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3xl);
  }
}
.options__text h2 { font-style: italic; }
.options__text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--c-text);
  max-width: 480px;
}

.options-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.options-list li {
  position: relative;
  padding: var(--s-md) 0 var(--s-md) 36px;
  border-bottom: 1px solid var(--c-line);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--c-brown);
}
.options-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 1px;
  background: var(--c-gold);
}


/* ----- 20.8  CTA FINAL ----- */
.cta-final {
  background: var(--c-nude);
  padding: 120px 0;
  text-align: center;
}
@media (min-width: 1024px) {
  .cta-final { padding: 160px 0; }
}
.cta-final__inner {
  max-width: 640px;
  margin: 0 auto;
}
.cta-final__inner h2 {
  font-style: italic;
  margin-bottom: var(--s-md);
}
.cta-final__inner p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-text);
  margin-bottom: var(--s-lg);
}
.cta-final__inner .btn {
  min-height: 56px;
  padding-left: var(--s-lg);
  padding-right: var(--s-lg);
}
.cta-final__reassure {
  margin-top: var(--s-md);
  font-size: 12px;
  font-style: italic;
  color: var(--c-soft-gray);
}


/* ============================================================
   21. IMAGE DE COUPE D'ENTREMETS — SECTION CONCEPT (homepage)
   ───────────────────────────────────────────────────────────
   Cette image est une coupe d'entremets horizontale.
   On la met dans un cadre paysage pour qu'elle reste entièrement
   lisible (object-fit: contain par défaut, fond crème en cas
   de marges sur les côtés).

   POUR AJUSTER :
   • Ratio desktop    → modifier `aspect-ratio: 16 / 10`
   • Ratio mobile     → modifier le `aspect-ratio: 4 / 3` du @media
   • Largeur max      → modifier `max-width: 620px`
   • Passer en cover  → soit modifier object-fit ci-dessous,
                        soit ajouter la classe `is-cover` au div HTML
============================================================ */

.concept__image.concept-cut-image {
  width: 100%;
  max-width: 620px;
  aspect-ratio: 16 / 10;
  background: var(--c-cream);
  overflow: hidden;
  margin: 0 auto;            /* centre l'image dans sa colonne */
}

.concept__image.concept-cut-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;        /* annule le 4:5 hérité de .concept__image img */
  object-fit: contain;       /* affiche l'image entière, sans rognage */
  object-position: center center;
  display: block;
}

/* Variante : remplir le cadre sans marges (peut rogner les côtés).
   À utiliser uniquement si l'image n'a pas de bords importants à conserver.
   Pour l'activer, ajouter la classe `is-cover` au div HTML :
   <div class="concept__image concept-cut-image is-cover reveal"> */
.concept__image.concept-cut-image.is-cover img {
  object-fit: cover;
}

/* Mobile : on adoucit le ratio en 4:3 et on laisse l'image prendre toute la largeur */
@media (max-width: 767px) {
  .concept__image.concept-cut-image {
    aspect-ratio: 4 / 3;
    max-width: 100%;
  }
}


/* ============================================================
   22. ACCESSIBILITÉ — focus visible élégant
   ───────────────────────────────────────────────────────────
   Remplace l'outline bleu par défaut par un anneau doré subtil,
   uniquement visible quand l'utilisateur navigue au clavier.
============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid rgba(201, 168, 106, 0.8);
  outline-offset: 4px;
  border-radius: 2px;
}
.btn:focus-visible {
  outline-offset: 5px;
}
.faq__question:focus-visible {
  outline-offset: 2px;
}


/* ============================================================
   23. MENTIONS SEO LOCALES — phrases discrètes
============================================================ */

/* Petite phrase de géolocalisation sous le sous-titre du hero */
.hero__location {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--c-cream);
  opacity: 0.85;
  margin: 0 auto var(--s-lg);
  max-width: 540px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(42, 32, 24, 0.35);
}
@media (min-width: 1024px) {
  .hero__location { margin-left: 0; margin-right: 0; }
}

/* Phrase de zone d'intervention dans la section À propos */
.apropos__location {
  color: var(--c-soft-gray);
  font-size: 15px;
  font-style: italic;
  margin-bottom: var(--s-md);
}

/* CTA texte intermédiaire dans la section À propos */
.apropos__cta {
  display: inline-block;
  margin-top: var(--s-sm);
}

/* Mention géographique dans le footer */
.footer__location {
  font-size: 12px;
  color: var(--c-champagne);
  opacity: 0.85;
  margin-top: var(--s-md);
  font-style: italic;
  line-height: 1.6;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   24. SECTION « CE QUE NOS CRÉATIONS APPORTENT » (anciens témoignages)
============================================================ */
.values { background: var(--c-cream); }
.values__inner {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}
.values__inner h2 {
  font-style: italic;
  margin-bottom: var(--s-xxl);
}
.values-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-md);
  text-align: left;
}
@media (min-width: 768px) {
  .values-list { grid-template-columns: repeat(3, 1fr); gap: var(--s-lg); }
}
.value-card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: var(--s-lg);
  transition: border-color 400ms var(--ease-soft), transform 400ms var(--ease-soft);
}
.value-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-3px);
}
.value-card h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--c-brown);
  margin: 0 0 var(--s-sm);
}
.value-card p {
  font-size: 14px;
  color: var(--c-soft-gray);
  line-height: 1.7;
  margin: 0;
}


/* ============================================================
   25. SECTION SEO LOCALE discrète avant le footer
============================================================ */
.local-seo {
  background: var(--c-cream);
  padding: 64px 0 96px;
  border-top: 1px solid var(--c-line);
}
.local-seo__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.local-seo__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--c-brown);
  margin-bottom: var(--s-md);
}
.local-seo p {
  font-size: 14px;
  color: var(--c-soft-gray);
  line-height: 1.8;
  margin: 0;
}


/* ============================================================
   26. PAGES LÉGALES (mentions, confidentialité, 404)
============================================================ */
.legal-page {
  background: var(--c-cream);
  padding: 160px 0 96px;
  min-height: 80vh;
}
.legal-page__inner {
  max-width: 760px;
  margin: 0 auto;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 52px);
  color: var(--c-brown);
  margin-bottom: var(--s-lg);
}
.legal-page h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: var(--c-brown);
  margin: var(--s-xl) 0 var(--s-sm);
}
.legal-page p,
.legal-page li {
  font-size: 15px;
  line-height: 1.75;
  color: var(--c-text);
  margin-bottom: var(--s-sm);
}
.legal-page ul {
  padding-left: 22px;
  list-style: none;
  margin-bottom: var(--s-md);
}
.legal-page ul li {
  position: relative;
  padding-left: 18px;
}
.legal-page ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 10px; height: 1px;
  background: var(--c-gold);
}
.legal-page a {
  color: var(--c-brown);
  border-bottom: 1px solid var(--c-gold);
  transition: color 300ms var(--ease-soft);
}
.legal-page a:hover { color: var(--c-gold); }
.legal-page__meta {
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  color: var(--c-soft-gray);
  font-style: italic;
}


/* ============================================================
   27. UTILITAIRES + HEADER DES PAGES INTERNES
   ───────────────────────────────────────────────────────────
   .hidden          : pour le honeypot Netlify (invisible aux humains)
   .page-internal   : ajoute un fond stable et un texte marron au header,
                      sur les pages sans hero photo (Prestations, mentions,
                      politique, merci, etc.)
============================================================ */

/* Honeypot Netlify */
.hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Header lisible sur toutes les pages internes
   On force le rendu "scrolled" en permanence : fond crème translucide,
   texte marron, logo réduit. Spécificité élevée pour gagner sur les
   règles initiales du hero. */
.page-internal .header {
  background: rgba(250, 247, 242, 0.94);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border-bottom: 1px solid rgba(201, 168, 106, 0.25);
  height: 76px;
}
.page-internal .header__logo,
.page-internal .header.scrolled .header__logo {
  color: var(--c-brown);
}
.page-internal .header__menu a,
.page-internal .header.scrolled .header__menu a {
  color: var(--c-brown);
  text-shadow: none;
}
.page-internal .header__logo-img,
.page-internal .header.scrolled .header__logo-img {
  height: var(--logo-size-scrolled);
  filter: none;
}
.page-internal .header__burger span,
.page-internal .header.scrolled .header__burger span {
  background: var(--c-brown);
}
.page-internal .header__cta {
  box-shadow: none;
}
@media (max-width: 1023px) {
  .page-internal .header { height: 64px; }
  .page-internal .header__logo-img,
  .page-internal .header.scrolled .header__logo-img {
    height: var(--logo-size-mobile-scrolled);
  }
}


/* ============================================================
   28. PAGE MERCI (post-soumission formulaire)
============================================================ */
.merci-page {
  background: var(--c-cream);
  padding: 200px 0 120px;
  min-height: 80vh;
  text-align: center;
}
@media (max-width: 767px) {
  .merci-page { padding: 140px 0 80px; }
}
.merci-page__inner {
  max-width: 640px;
  margin: 0 auto;
}
.merci-page h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--c-brown);
  margin: var(--s-md) 0 var(--s-lg);
  line-height: 1.1;
}
.merci-page p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-text);
  margin-bottom: var(--s-xl);
}
.merci-page .btn { margin-top: var(--s-sm); }