/* ==========================================================================
   LéLu Traiteur — feuille de style principale
   Palette beige/crème inspirée du logo, typographie éditoriale.
   ========================================================================== */

:root {
  /* Beiges & crèmes — la teinte de base vient du fond du logo (#F5E9D0) */
  --creme: #faf4e8;
  --creme-clair: #fdfaf3;
  --beige: #f2e6cf;
  --beige-moyen: #e8d8ba;
  --beige-fonce: #d9c39a;
  --sable: #c4a878;

  /* Encre — le noir du logo, adouci pour le corps de texte */
  --encre: #1c1a17;
  --encre-doux: #4a453d;
  --encre-clair: #7d766a;

  --or: #a8834e;
  --or-clair: #c9a06a;

  --blanc: #ffffff;

  --ombre-s: 0 1px 2px rgba(28, 26, 23, .04), 0 2px 8px rgba(28, 26, 23, .04);
  --ombre-m: 0 4px 12px rgba(28, 26, 23, .06), 0 12px 32px rgba(28, 26, 23, .07);
  --ombre-l: 0 8px 24px rgba(28, 26, 23, .08), 0 24px 64px rgba(28, 26, 23, .10);

  --rayon: 4px;
  --rayon-l: 8px;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", system-ui, sans-serif;

  --max: 1240px;
  --gouttiere: clamp(1.25rem, 5vw, 3.5rem);

  --transition: .5s cubic-bezier(.22, 1, .36, 1);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre-doux);
  font-family: var(--sans);
  font-size: 1.0125rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: .008em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--encre);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
}

p { margin: 0; }

button { font: inherit; color: inherit; }

::selection { background: var(--beige-moyen); color: var(--encre); }

/* Lien d'évitement pour la navigation au clavier */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: .875rem 1.5rem;
  background: var(--encre);
  color: var(--creme);
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ── Utilitaires de mise en page ─────────────────────────────────────────── */
.contenu {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.contenu-etroit {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: clamp(4.5rem, 11vw, 9rem); }

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

/* Surtitre en petites capitales, filet à gauche */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1.5rem;
}

.surtitre::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.titre-section {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  margin-bottom: 1.5rem;
}

.chapo {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.75;
  color: var(--encre-doux);
  max-width: 62ch;
}

.entete-section { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.entete-section--centre { text-align: center; }
.entete-section--centre .chapo { margin-inline: auto; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */
.btn {
  --btn-fond: var(--encre);
  --btn-texte: var(--creme);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: 1.0625rem 2.375rem;
  background: var(--btn-fond);
  color: var(--btn-texte);
  border: 1px solid var(--btn-fond);
  border-radius: var(--rayon);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--transition), border-color var(--transition),
              background-color var(--transition), transform .35s ease;
}

/* Remplissage animé au survol */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
  z-index: 0;
}

.btn > * { position: relative; z-index: 1; }

.btn:hover::after,
.btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.btn:hover, .btn:focus-visible {
  color: var(--blanc);
  border-color: var(--or);
  transform: translateY(-2px);
}

.btn--clair {
  --btn-fond: transparent;
  --btn-texte: var(--encre);
  border-color: var(--beige-fonce);
}

.btn--fantome {
  --btn-fond: transparent;
  --btn-texte: var(--creme);
  border-color: rgba(250, 244, 232, .38);
}

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

/* Lien fléché discret */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  transition: gap .35s ease, color .35s ease;
}

.lien-fleche svg { width: 1rem; height: 1rem; }
.lien-fleche:hover { gap: .875rem; color: var(--encre); }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.5rem;
  transition: background-color var(--transition), padding var(--transition),
              box-shadow var(--transition);
}

/* Au repos sur le héros : transparent, texte crème */
.entete--transparent { color: var(--creme); }

/* Après défilement, ou sur les pages sans héros plein écran */
.entete--fixe,
.entete--opaque {
  background: rgba(250, 244, 232, .93);
  color: var(--encre);
  padding-block: .875rem;
  box-shadow: 0 1px 0 rgba(28, 26, 23, .07);
}

/* Le flou est porté par un pseudo-élément et non par .entete : un
   `backdrop-filter` sur l'en-tête en ferait le bloc conteneur du menu mobile
   (`position: fixed`), qui se retrouverait alors haut de 75px au lieu de
   couvrir l'écran. */
.entete--fixe::before,
.entete--opaque::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

/* Logotype typographique — reprend le lettrage du logo */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex-shrink: 0;
}

.logo-nom {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: currentColor;
}

.logo-sous {
  font-family: var(--sans);
  font-size: .5rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: currentColor;
  opacity: .72;
  margin-top: .3rem;
  padding-top: .3rem;
  border-top: 1px solid currentColor;
}

.nav-liens {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-liens > li > a:not(.btn) {
  position: relative;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding-block: .375rem;
  white-space: nowrap;
  transition: opacity .3s ease;
}

/* Soulignement animé */
.nav-liens > li > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--transition);
}

.nav-liens > li > a:not(.btn):hover::after,
.nav-liens > li > a.actif::after { transform: scaleX(1); transform-origin: left; }

.nav-liens .btn {
  padding: .8125rem 1.625rem;
  font-size: .7rem;
}

/* Le bouton de la nav s'adapte au fond transparent */
/* Bouton en version claire uniquement tant qu'on est sur le héros. Au
   défilement, `entete--fixe` s'ajoute sans retirer `entete--transparent` :
   sans le :not(), le bouton resterait crème sur le fond clair (illisible). */
.entete--transparent:not(.entete--fixe) .nav-liens .btn {
  --btn-fond: transparent;
  --btn-texte: var(--creme);
  border-color: rgba(250, 244, 232, .45);
}

/* Burger */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  z-index: 110;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin-inline: auto;
  background: currentColor;
  transition: transform .35s ease, opacity .25s ease;
}

.nav-burger.ouvert span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.ouvert span:nth-child(2) { opacity: 0; }
.nav-burger.ouvert span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Héros ───────────────────────────────────────────────────────────────── */
.heros {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}

.heros-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.heros-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: zoom-lent 24s ease-out forwards;
}

@keyframes zoom-lent {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

/* Voile dégradé : lisibilité du texte en bas à gauche */
.heros-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(20, 18, 15, .82) 0%, rgba(20, 18, 15, .55) 42%, rgba(20, 18, 15, .18) 100%),
    linear-gradient(to top, rgba(20, 18, 15, .6) 0%, transparent 45%);
}

.heros-contenu {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
  padding-block: 9rem 6rem;
  color: var(--creme);
}

.heros-corps { max-width: 46rem; }

.heros .surtitre { color: var(--beige-moyen); }

.heros h1 {
  font-size: clamp(2.9rem, 8.2vw, 6.25rem);
  color: var(--creme);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-bottom: 1.75rem;
}

.heros h1 em {
  display: block;
  font-style: italic;
  color: var(--beige-moyen);
}

.heros-chapo {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(250, 244, 232, .88);
  max-width: 40ch;
  margin-bottom: 2.75rem;
}

.heros-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Bandeau d'infos en pied de héros */
.heros-pied {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-top: 1px solid rgba(250, 244, 232, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(20, 18, 15, .22);
}

.heros-pied-grille {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  max-width: var(--max);
  margin-inline: auto;
}

.heros-pied-item {
  padding: 1.5rem var(--gouttiere);
  color: rgba(250, 244, 232, .92);
}

.heros-pied-item + .heros-pied-item {
  box-shadow: -1px 0 0 rgba(250, 244, 232, .16);
}

.heros-pied-item dt {
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--beige-fonce);
  margin-bottom: .4rem;
}

.heros-pied-item dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.35;
}

.heros-pied-item dd a:hover { color: var(--beige-moyen); }

/* ── En-tête de page interne ─────────────────────────────────────────────── */
.entete-page {
  position: relative;
  padding-block: clamp(9rem, 16vw, 12.5rem) clamp(3.5rem, 7vw, 5.5rem);
  background: var(--beige);
  overflow: hidden;
}

/* Filigrane typographique décoratif */
.entete-page::before {
  content: attr(data-filigrane);
  position: absolute;
  right: -.06em;
  bottom: -.28em;
  font-family: var(--serif);
  font-size: clamp(9rem, 24vw, 20rem);
  font-style: italic;
  line-height: 1;
  color: var(--encre);
  opacity: .045;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.entete-page-corps { position: relative; z-index: 1; }

.entete-page h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  margin-bottom: 1.25rem;
}

/* Fil d'Ariane */
.ariane {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin-bottom: 1.5rem;
}

.ariane a:hover { color: var(--or); }
.ariane span { opacity: .45; }

/* ── Intro accueil : texte + image ───────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.duo--inverse .duo-media { order: -1; }

.duo-media {
  position: relative;
  border-radius: var(--rayon-l);
  overflow: hidden;
  box-shadow: var(--ombre-l);
}

.duo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.duo-media:hover img { transform: scale(1.035); }

/* Cartouche chiffré posé sur l'image */
.duo-badge {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 1.5rem 1.875rem;
  background: var(--creme);
  border-top-left-radius: var(--rayon-l);
  text-align: center;
}

.duo-badge strong {
  display: block;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--encre);
}

.duo-badge span {
  display: block;
  margin-top: .375rem;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

.duo-texte > * + * { margin-top: 1.375rem; }
.duo-texte .btn { margin-top: 2.25rem; }

/* Signature manuscrite des fondateurs */
.signature {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--encre);
  margin-top: 2rem;
}

.signature small {
  font-family: var(--sans);
  font-size: .7rem;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

/* ── Cartes de services ──────────────────────────────────────────────────── */
/* 4 prestations → 2×2 : évite la carte orpheline d'un `auto-fit` en 3 colonnes */
.grille-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 700px) {
  .grille-services { grid-template-columns: 1fr; }
}

.carte-service {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--creme-clair);
  border: 1px solid var(--beige-moyen);
  border-radius: var(--rayon-l);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}

.carte-service:hover {
  transform: translateY(-6px);
  border-color: var(--beige-fonce);
  box-shadow: var(--ombre-m);
}

.carte-service-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--beige-moyen);
}

.carte-service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.carte-service:hover .carte-service-media img { transform: scale(1.06); }

.carte-service-corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.5vw, 2.125rem);
}

.carte-service-icone {
  width: 2.375rem;
  height: 2.375rem;
  margin-bottom: 1.125rem;
  color: var(--or);
}

.carte-service-icone svg { width: 100%; height: 100%; }

.carte-service h3 {
  font-size: 1.5rem;
  margin-bottom: .5rem;
}

.carte-service-accroche {
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 1rem;
}

.carte-service p:last-of-type { font-size: .95rem; }

/* ── Étapes de l'accompagnement ──────────────────────────────────────────── */
.grille-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: etape;
}

.etape { position: relative; padding-top: 2.25rem; }

/* Filet supérieur qui se remplit au survol */
.etape::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--beige-fonce);
}

.etape::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.etape:hover::after { transform: scaleX(1); }

.etape-num {
  display: block;
  font-family: var(--serif);
  font-size: 2.75rem;
  font-style: italic;
  line-height: 1;
  color: var(--beige-fonce);
  margin-bottom: 1rem;
  transition: color var(--transition);
}

.etape:hover .etape-num { color: var(--or); }

.etape h3 { font-size: 1.3rem; margin-bottom: .625rem; }
.etape p { font-size: .95rem; }

/* ── Témoignages ─────────────────────────────────────────────────────────── */
.section--temoignages { background: var(--encre); color: rgba(250, 244, 232, .8); }
.section--temoignages .titre-section { color: var(--creme); }
.section--temoignages .surtitre { color: var(--sable); }
.section--temoignages .chapo { color: rgba(250, 244, 232, .72); }

/* 3 colonnes larges : des cartes étroites étiraient les avis en colonnes
   hautes et malcommodes à lire. */
.grille-temoignages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 1000px) {
  .grille-temoignages { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile : carrousel horizontal. Les cartes restent côte à côte et se
   parcourent au doigt (défilement natif + accroche), plutôt que de s'empiler
   en une longue colonne. */
@media (max-width: 680px) {
  .grille-temoignages {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Largeur calée sur le viewport (et non sur la piste, qui déborde des
       deux côtés) : la carte occupe presque tout l'écran, il ne reste
       qu'un liseré de la suivante pour signaler le défilement. */
    grid-auto-columns: calc(100vw - var(--gouttiere) - 3.25rem);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Marges négatives : le carrousel déborde jusqu'aux bords de l'écran… */
    margin-inline: calc(var(--gouttiere) * -1);
    /* …et le padding réaligne la 1re carte sur la grille du contenu. */
    padding-inline: var(--gouttiere);
    padding-bottom: .5rem;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .grille-temoignages::-webkit-scrollbar { display: none; }

  /* Padding resserré : sur un écran étroit, chaque pixel compte pour la
     largeur de ligne (le texte s'allongeait en colonne trop haute). */
  .temoignage {
    scroll-snap-align: start;
    /* La carte doit remplir sa colonne : sans largeur explicite elle se
       rétracte au contenu et le texte s'étire en colonne trop haute. */
    width: calc(100vw - var(--gouttiere) - 3.25rem);
    padding: 1.5rem 1.375rem;
  }

  .temoignage p { line-height: 1.7; }

  /* Le décalage d'apparition gênerait la mesure du défilement */
  .grille-temoignages .apparait { transition-delay: 0ms !important; }
}

/* Points indicateurs + invite au swipe — masqués hors carrousel */
.temoignages-nav { display: none; }

@media (max-width: 680px) {
  .temoignages-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
  }

  .temoignages-points {
    display: flex;
    align-items: center;
    gap: .5rem;
  }

  .temoignages-points button {
    width: .5rem;
    height: .5rem;
    padding: 0;
    background: rgba(250, 244, 232, .3);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
  }

  .temoignages-points button[aria-current="true"] {
    width: 1.5rem;
    background: var(--or-clair);
  }

  .temoignages-invite {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(250, 244, 232, .55);
    transition: opacity .4s ease;
  }

  .temoignages-invite.masquee { opacity: 0; }

  .temoignages-invite svg {
    width: 1.125rem;
    height: 1.125rem;
    animation: invite-glisse 1.6s ease-in-out infinite;
  }

  @keyframes invite-glisse {
    0%, 100% { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
  }
}

.temoignage {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Occupe toute la colonne de la grille (sinon la carte se rétracte au
     contenu et le texte se retrouve à l'étroit). `justify-self` plutôt que
     `width: 100%`, qui débordait en s'ajoutant au padding. */
  justify-self: stretch;
  min-width: 0;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  background: rgba(250, 244, 232, .045);
  border: 1px solid rgba(250, 244, 232, .12);
  border-radius: var(--rayon-l);
  transition: background-color var(--transition), border-color var(--transition),
              transform var(--transition);
}

.temoignage:hover {
  background: rgba(250, 244, 232, .075);
  border-color: rgba(250, 244, 232, .24);
  transform: translateY(-4px);
}

/* Guillemet ouvrant décoratif */
/* Note en étoiles — remplace le guillemet décoratif en tête de carte */
.etoiles {
  display: flex;
  gap: .25rem;
  margin-bottom: 1.25rem;
  color: var(--or-clair);
}

.etoiles svg { width: 1rem; height: 1rem; }

/* Sans-serif droit : le serif italique clair sur fond sombre était peu
   lisible. Contraste et interlignage relevés pour le confort de lecture. */
.temoignage p {
  flex: 1;
  font-family: var(--sans);
  font-size: 1.0125rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(250, 244, 232, .96);
}

.temoignage cite {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.75rem;
  font-family: var(--sans);
  font-size: .74rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sable);
}

.temoignage cite::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .6;
}

/* ── Galerie en mosaïque ─────────────────────────────────────────────────── */
/* Grille uniforme : toutes les tuiles au même format, aucun trou possible */
.mosaique {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.125rem);
}

.mosaique-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--rayon-l);
  overflow: hidden;
  background: var(--beige-moyen);
  cursor: zoom-in;
}

.mosaique-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.mosaique-item:hover img { transform: scale(1.06); }

/* Voile au survol */
.mosaique-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 18, 15, .5), transparent 55%);
  opacity: 0;
  transition: opacity var(--transition);
}

.mosaique-item:hover::after { opacity: 1; }

/* ── Visionneuse plein écran ─────────────────────────────────────────────── */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(16, 14, 12, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}

.visionneuse.ouverte { opacity: 1; visibility: visible; }

/* Masquée tant qu'aucune photo n'est chargée (évite l'icône d'image vide) */
.visionneuse img:not([src]) { display: none; }

.visionneuse img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-l);
  transform: scale(.96);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.visionneuse.ouverte img { transform: scale(1); }

.visionneuse-legende {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  transform: translateX(-50%);
  max-width: 44ch;
  text-align: center;
  font-size: .85rem;
  color: rgba(250, 244, 232, .72);
  padding-inline: 1rem;
}

.visionneuse-fermer,
.visionneuse-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  background: rgba(250, 244, 232, .1);
  color: var(--creme);
  border: 1px solid rgba(250, 244, 232, .2);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .3s ease, transform .3s ease;
}

.visionneuse-fermer:hover,
.visionneuse-nav:hover { background: rgba(250, 244, 232, .2); transform: scale(1.08); }

.visionneuse-fermer { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); font-size: 1.5rem; }
.visionneuse-nav svg { width: 1.25rem; height: 1.25rem; }
.visionneuse-nav--prec { left: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse-nav--suiv { right: clamp(.5rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.visionneuse-nav--prec:hover { transform: translateY(-50%) scale(1.08); }
.visionneuse-nav--suiv:hover { transform: translateY(-50%) scale(1.08); }

/* ── Appel à l'action ────────────────────────────────────────────────────── */
.appel {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 12vw, 9rem);
  text-align: center;
  overflow: hidden;
}

.appel-media { position: absolute; inset: 0; z-index: -2; }

.appel-media img { width: 100%; height: 100%; object-fit: cover; }

.appel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 15, .76);
}

.appel h2 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  color: var(--creme);
  margin-bottom: 1.25rem;
}

.appel .surtitre { color: var(--beige-fonce); }

.appel p {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  color: rgba(250, 244, 232, .82);
  font-size: 1.075rem;
}

.appel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.appel .btn:not(.btn--fantome) {
  --btn-fond: var(--creme);
  --btn-texte: var(--encre);
  border-color: var(--creme);
}

/* ── Page contact ────────────────────────────────────────────────────────── */
.contact-grille {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* Coordonnées */
.coordonnees { display: grid; gap: 2rem; }

.coordonnee {
  display: flex;
  gap: 1.125rem;
  align-items: flex-start;
}

.coordonnee-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  background: var(--beige);
  border-radius: 50%;
  color: var(--or);
}

.coordonnee-icone svg { width: 1.125rem; height: 1.125rem; }

.coordonnee dt {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--encre-clair);
  margin-bottom: .375rem;
}

.coordonnee dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.45;
  color: var(--encre);
}

.coordonnee dd a { transition: color .3s ease; }
.coordonnee dd a:hover { color: var(--or); }

/* Formulaire */
.formulaire {
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--creme-clair);
  border: 1px solid var(--beige-moyen);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-s);
}

.champs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.champ { display: flex; flex-direction: column; gap: .5rem; }
.champ--pleine { grid-column: 1 / -1; }

.champ label {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-clair);
}

.champ label .requis { color: var(--or); }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: .875rem 1rem;
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--beige-moyen);
  border-radius: var(--rayon);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 300;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.champ textarea { resize: vertical; min-height: 8.5rem; line-height: 1.65; }

.champ select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d766a' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.125rem;
  padding-right: 2.75rem;
  cursor: pointer;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--or);
  box-shadow: 0 0 0 3px rgba(168, 131, 78, .13);
}

.champ input::placeholder,
.champ textarea::placeholder { color: #b3aa9c; }

.formulaire .btn { margin-top: 1.75rem; }

.formulaire-note {
  margin-top: 1.125rem;
  font-size: .82rem;
  color: var(--encre-clair);
  text-align: center;
}

/* Messages flash */
.alerte {
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border-radius: var(--rayon);
  border-left: 3px solid;
  font-size: .92rem;
}

.alerte--succes { background: #eef4ea; border-color: #6f9455; color: #3d5230; }
.alerte--erreur { background: #f9ece7; border-color: #c1714f; color: #7d4429; }

/* Carte / plan */
.plan {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  border-radius: var(--rayon-l);
  overflow: hidden;
  border: 1px solid var(--beige-moyen);
  box-shadow: var(--ombre-s);
  line-height: 0;
}

.plan iframe { width: 100%; height: 420px; border: 0; display: block; }

/* Lien vers la fiche Google, sous la carte */
.plan-lien {
  margin: 0;
  padding: .875rem 1.25rem;
  background: var(--creme-clair);
  border-top: 1px solid var(--beige-moyen);
  line-height: 1.5;
  text-align: center;
}

.plan-lien a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  transition: gap .35s ease, color .35s ease;
}

.plan-lien a svg { width: 1rem; height: 1rem; }
.plan-lien a:hover { gap: .875rem; color: var(--encre); }

/* ── Bandeau de valeurs ──────────────────────────────────────────────────── */
.valeurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.valeur-icone {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1.25rem;
  border: 1px solid var(--beige-fonce);
  border-radius: 50%;
  color: var(--or);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}

.valeur-icone svg { width: 1.375rem; height: 1.375rem; }

.valeur:hover .valeur-icone {
  background: var(--or);
  border-color: var(--or);
  color: var(--creme);
}

.valeur h3 { font-size: 1.3rem; margin-bottom: .625rem; }
.valeur p { font-size: .95rem; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
.pied {
  background: var(--encre);
  color: rgba(250, 244, 232, .62);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
}

.pied-haut {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.pied .logo { color: var(--creme); margin-bottom: 1.25rem; }

.pied-desc { font-size: .95rem; max-width: 34ch; }

.pied h4 {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sable);
  margin-bottom: 1.25rem;
}

.pied-liens { display: grid; gap: .75rem; }

.pied-liens a {
  font-size: .95rem;
  width: fit-content;
  transition: color .3s ease, padding-left .3s ease;
}

.pied-liens a:hover { color: var(--creme); padding-left: .3rem; }

.pied-contact { display: grid; gap: .75rem; font-size: .95rem; }
.pied-contact a { transition: color .3s ease; }
.pied-contact a:hover { color: var(--creme); }

.pied-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(250, 244, 232, .11);
  font-size: .82rem;
}

.kilco-credit {
  text-align: center;
  padding: 16px 16px 20px;
  border-top: 1px solid rgba(250, 244, 232, .11);
  font-size: 13px;
  line-height: 1.5;
  opacity: .85;
}

.kilco-credit a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Lisibilité sur fond sombre ──────────────────────────────────────────────
   Le contraste pur est déjà conforme (≥ 6,7:1), mais une graisse 300 en clair
   sur fond sombre « bave » optiquement (irradiation) : le texte paraît flou et
   fatigue à la lecture. On remonte donc la graisse, l'interlignage et le
   contraste sur toutes les zones sombres, et on désactive le lissage fin
   hérité du corps de page (pensé pour du texte foncé sur fond clair). */
.section--temoignages,
.appel,
.pied,
.heros-pied,
.visionneuse {
  -webkit-font-smoothing: subpixel-antialiased;
}

.section--temoignages p,
.section--temoignages .chapo,
.appel p,
.pied-desc,
.pied-liens a,
.pied-contact,
.pied-contact a,
.pied-bas,
.heros-chapo,
.visionneuse-legende {
  font-weight: 400;
  letter-spacing: .012em;
}

/* Contrastes relevés : le texte courant sur fond sombre ne descend plus
   sous ~.9 d'opacité, les libellés secondaires sous ~.78. */
.section--temoignages { color: rgba(250, 244, 232, .9); }
.section--temoignages .chapo { color: rgba(250, 244, 232, .86); }
.appel p { color: rgba(250, 244, 232, .92); }
.heros-chapo { color: rgba(250, 244, 232, .95); }
.visionneuse-legende { color: rgba(250, 244, 232, .86); }
.pied { color: rgba(250, 244, 232, .78); }
.pied-desc { line-height: 1.8; }

/* ── Apparition au défilement ────────────────────────────────────────────── */
.apparait {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1),
              transform .9s cubic-bezier(.22, 1, .36, 1);
}

.apparait.visible { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .contact-grille { grid-template-columns: 1fr; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
  .pied-marque { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo-media { order: 0; }
  .duo-media img { aspect-ratio: 3 / 2; }

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

  /* Le bandeau d'infos sort du héros et devient une bande pleine largeur.
     Le héros passe en grille : le visuel (absolu) est calé sur la 1re rangée
     via .heros-media, il ne recouvre donc plus la bande d'infos. */
  .heros {
    min-height: auto;
    display: grid;
    grid-template-rows: auto auto;
  }

  .heros-contenu {
    display: flex;
    align-items: flex-end;
    min-height: 88svh;
    padding-block: 9rem 3.5rem;
  }

  .heros-pied {
    position: static;
    background: var(--encre);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 0;
  }

  .heros-pied-grille { grid-template-columns: 1fr; }

  .heros-pied-item { padding-block: 1.25rem; }

  .heros-pied-item + .heros-pied-item {
    box-shadow: 0 -1px 0 rgba(250, 244, 232, .16);
  }

  /* Visuel et texte partagent la 1re cellule de la grille : le visuel s'étire
     à la taille de cette cellule (et non de tout le héros), la bande d'infos
     reste donc dégagée. */
  .heros-media,
  .heros-contenu { grid-row: 1; grid-column: 1; }

  .heros-media {
    position: relative;
    inset: auto;
    align-self: stretch;
    justify-self: stretch;
    min-height: 100%;
  }

  .heros-media img { position: absolute; inset: 0; }

  .heros-contenu { position: relative; z-index: 1; }

  .heros-pied { grid-row: 2; grid-column: 1; }

  /* Menu plein écran */
  .nav-burger { display: flex; }

  .nav-liens {
    position: fixed;
    /* Ancré au viewport via des valeurs explicites : `inset: 0` seul se
       montrait fragile dès qu'un ancêtre créait un bloc conteneur. */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    background: var(--creme);
    color: var(--encre);
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
    z-index: 105;
  }

  .nav-liens.ouvert { transform: none; }

  /* Menu ouvert : le burger (croix) repasse en encre sur le panneau crème,
     sinon il resterait crème sur crème et donc invisible. */
  .nav-burger.ouvert { color: var(--encre); }

  /* Le logo est masqué derrière le panneau : on l'efface pour éviter
     qu'il ne transparaisse en crème sur crème. */
  body.menu-ouvert .logo { opacity: 0; pointer-events: none; }

  .nav-liens > li > a:not(.btn) {
    font-family: var(--serif);
    font-size: 1.75rem;
    letter-spacing: .04em;
    text-transform: none;
  }

  .nav-liens .btn { padding: 1rem 2.25rem; font-size: .74rem; }
  /* Dans le menu plein écran (fond crème), le bouton repasse en encre quel
     que soit l'état de défilement de l'en-tête. */
  .entete--transparent .nav-liens .btn,
  .entete--transparent:not(.entete--fixe) .nav-liens .btn {
    --btn-texte: var(--encre);
    border-color: var(--beige-fonce);
  }

  body.menu-ouvert { overflow: hidden; }
}

@media (max-width: 620px) {
  .champs { grid-template-columns: 1fr; }
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .pied-haut { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; text-align: center; }
  /* Boutons empilés : même largeur, sinon chacun se dimensionne sur son
     texte (« Demander un devis » vs le numéro de téléphone). */
  .heros-actions .btn,
  .appel-actions .btn { width: 100%; }

  .appel-actions { flex-direction: column; align-items: stretch; }
}

/* ── Accessibilité : mouvement réduit ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .apparait { opacity: 1; transform: none; }
}