/* ==========================================================================
   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); }

/* ── Menu déroulant « Nos services » ─────────────────────────────────────── */
.nav-deroulant {
  position: relative;
  display: flex;
  align-items: center;
  gap: .1875rem;
}

.nav-deroulant-bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.375rem;
  height: 1.375rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  opacity: .7;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.nav-deroulant-bascule svg { width: .8rem; height: .8rem; }

.nav-deroulant:hover .nav-deroulant-bascule,
.nav-deroulant.ouvert .nav-deroulant-bascule { opacity: 1; transform: rotate(180deg); }

.nav-sous-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 105;
  width: min(24rem, calc(100vw - 2rem));
  margin: 0;
  padding: .625rem;
  list-style: none;
  background: var(--creme-clair);
  color: var(--encre-doux);
  border: 1px solid var(--beige-moyen);
  border-radius: var(--rayon-l);
  box-shadow: var(--ombre-l);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, .5rem);
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1),
              visibility .3s;
}

/* Pont invisible entre le lien et le panneau : sans lui, le survol se coupe
   dans l'espace vide laissé sous l'en-tête et le menu se referme. */
.nav-sous-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5rem;
  height: 1.5rem;
}

.nav-deroulant:hover .nav-sous-menu,
.nav-deroulant:focus-within .nav-sous-menu,
.nav-deroulant.ouvert .nav-sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 1.125rem);
}

.nav-sous-menu > li > a {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .6875rem .8125rem;
  border-radius: var(--rayon);
  transition: background-color .25s ease;
}

.nav-sous-menu > li > a:hover,
.nav-sous-menu > li > a:focus-visible { background: var(--beige); }

.nav-sous-menu-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--beige);
  color: var(--or);
  transition: background-color .25s ease, color .25s ease;
}

.nav-sous-menu-icone svg { width: 1.125rem; height: 1.125rem; }

.nav-sous-menu > li > a:hover .nav-sous-menu-icone { background: var(--blanc); }

.nav-sous-menu-texte { display: grid; gap: .1875rem; }

.nav-sous-menu-texte strong {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.15;
  color: var(--encre);
}

.nav-sous-menu-texte small {
  font-size: .78rem;
  line-height: 1.45;
  color: var(--encre-clair);
}

/* Dernière entrée : retour vers la page d'ensemble */
.nav-sous-menu-tout {
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .375rem;
  border-top: 1px solid var(--beige-moyen);
  border-radius: 0;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
}

.nav-sous-menu-tout svg { width: .9rem; height: .9rem; }

/* ── 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; }

/* Le lien du titre couvre toute la carte : elle devient cliquable sans
   imbriquer le reste du contenu dans le lien. */
.carte-service-lien::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.carte-service-suite {
  margin-top: auto;
  padding-top: 1.375rem;
}

.carte-service:hover .carte-service-suite { gap: .875rem; color: var(--encre); }

/* ── Page « Nos services » ───────────────────────────────────────────────── */
.titre-section a { transition: color .3s ease; }
.titre-section a:hover { color: var(--or); }

/* Rappel des formules sous chaque prestation */
.services-formules {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--or);
  line-height: 1.9;
}

.services-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
}

/* Neutralise `.duo-texte .btn { margin-top: 2.25rem }`, qui décalerait le
   bouton par rapport au lien placé à côté de lui. */
.services-actions .btn { margin-top: 0; }

/* ── Page d'une prestation ───────────────────────────────────────────────── */
/* Liste « ce qui est compris » */
.liste-check {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.liste-check li {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  font-size: .98rem;
}

.liste-check svg {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .32rem;
  color: var(--or);
}

/* Trois photos illustrant la prestation : une grande au-dessus, deux plus
   petites en dessous — la colonne étant étroite, trois vignettes côte à côte
   devenaient minuscules. */
.trio-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  align-content: start;
}

.trio-photos figure:first-child { grid-column: 1 / -1; }
.trio-photos figure:first-child img { aspect-ratio: 16 / 10; }

.trio-photos figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--rayon-l);
  background: var(--beige-moyen);
}

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

.trio-photos figure:hover img { transform: scale(1.05); }

/* Navigation entre prestations, en pied de page détaillée */
.autres-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.autre-prestation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--creme-clair);
  border: 1px solid var(--beige-moyen);
  border-radius: var(--rayon-l);
  transition: transform var(--transition), border-color var(--transition),
              box-shadow var(--transition);
}

.autre-prestation:hover {
  transform: translateY(-4px);
  border-color: var(--beige-fonce);
  box-shadow: var(--ombre-m);
}

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

.autre-prestation-icone svg { width: 1.25rem; height: 1.25rem; }

.autre-prestation strong {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--encre);
}

.autre-prestation small {
  display: block;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--encre-clair);
  margin-top: .25rem;
}

/* ── É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.5fr 1fr 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: repeat(3, 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;
    /* `safe center` : sous-menu déplié, le contenu peut dépasser la hauteur
       de l'écran ; le centrage classique rendrait alors le haut de la liste
       inaccessible au défilement. Le `center` qui précède sert de repli. */
    justify-content: safe center;
    overflow-y: auto;
    padding-block: 5.5rem 3rem;
    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;
  }

  /* Le déroulant devient un accordéon : le lien et son chevron sur une ligne,
     le sous-menu déplié en dessous. Le survol n'existant pas au tactile, seul
     l'état `.ouvert` (posé par le chevron) affiche le sous-menu. */
  .nav-deroulant {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: .375rem;
  }

  /* Le sous-menu, plus large que le couple lien + chevron, étire les deux
     colonnes : sans ces `justify-self`, le lien occuperait toute sa colonne
     et son soulignement dépasserait largement le texte. */
  .nav-deroulant > a { justify-self: end; }
  .nav-deroulant-bascule {
    justify-self: start;
    width: 2.25rem;
    height: 2.25rem;
  }
  .nav-deroulant-bascule svg { width: 1rem; height: 1rem; }

  .nav-sous-menu {
    grid-column: 1 / -1;
    position: static;
    display: none;
    width: min(23rem, 84vw);
    max-height: 42svh;
    overflow-y: auto;
    margin-inline: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-sous-menu::before { display: none; }

  /* Sur mobile, ni le survol ni le focus ne doivent déplier : sans ce
     rétablissement, tabuler sur « Nos services » ouvrirait l'accordéon. */
  .nav-deroulant:hover .nav-sous-menu,
  .nav-deroulant:focus-within .nav-sous-menu { display: none; }

  .nav-deroulant.ouvert .nav-sous-menu,
  .nav-deroulant.ouvert:hover .nav-sous-menu,
  .nav-deroulant.ouvert:focus-within .nav-sous-menu {
    display: block;
    transform: none;
  }

  .nav-sous-menu > li > a { padding: .625rem .5rem; }
  .nav-sous-menu-texte strong { font-size: 1rem; }
  .nav-sous-menu-texte small { font-size: .74rem; }
  .nav-sous-menu-icone { width: 2rem; height: 2rem; }
  .nav-sous-menu-icone svg { width: 1rem; height: 1rem; }

  .nav-liens .btn { padding: 1rem 2.25rem; font-size: .74rem; }
  /* Le menu plein écran a toujours un fond crème : le bouton y est donc
     encre sur crème, quel que soit l'état de l'en-tête (--transparent sur
     l'accueil, --opaque sur les pages internes). Sans cette règle, les pages
     internes affichaient un bouton encre sur encre, illisible. */
  /* Spécificité alignée sur `.entete--transparent .nav-liens .btn` (définie
     hors media query), qui sinon repasserait le texte en crème sur l'accueil. */
  .entete .nav-liens.ouvert .btn,
  .entete--transparent .nav-liens.ouvert .btn {
    --btn-fond: transparent;
    --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; }
}