/* ============================================================
   MAISON BELVIOR — Conciergerie privée
   Identité : noir · marron / cuir · crème · sérif
   ============================================================ */

:root {
  /* Palette MAISON BELVIOR — papier chaud + encre + laiton.
     5 valeurs réelles, le reste = alias historiques pour ne pas casser l'existant. */
  /* Palette de base — moins chaude, beige discret remis comme accent */
  --paper:      #f5f3ed;   /* fond page : papier neutre crayeux (pas trop chaud) */
  --paper-card: #ffffff;   /* surfaces cartes : blanc pur posé sur papier */
  --ink:        #1a1814;   /* encre chaude (jamais #000) */
  --ink-soft:   #6b665c;   /* texte secondaire */
  --hair:       #e6e2d6;   /* filets sur papier — hairline très léger, refroidi */
  --hair-dark:  rgba(245, 243, 237, 0.18); /* filets sur fond sombre */
  --deep:       #14110d;   /* immersions sombres : hero uniquement */
  --deep-soft:  #d4ccbd;   /* texte secondaire sur sombre */
  --accent:     #b8a47a;   /* beige discret — coches, ronds de listes, filet sous titres */

  /* Alias historiques (mappés vers la palette propre) */
  --noir: var(--deep);
  --charbon: var(--deep);
  --brun-fonce: var(--deep);
  --brun: #1f1b15;
  --cuir: var(--accent);          /* eyebrows, hovers, soulignements → laiton */
  --cuir-clair: var(--accent);
  --terre: var(--paper-card);     /* "crème clair sur fond sombre" */
  --creme: var(--paper);
  --creme-2: #ece5d4;
  --ivoire: var(--paper-card);
  --sable: var(--hair);
  --txt-sombre: var(--ink);
  --txt-doux: var(--ink-soft);
  --txt-clair: var(--paper-card);
  --txt-clair-doux: var(--deep-soft);
  --ligne: var(--hair);
  --ligne-claire: var(--hair-dark);
  --or: var(--accent);
  --beige: var(--accent);

  /* Engravers → Cinzel (serif gravé, capitales) pour la signature de marque.
     Inter pour titres modernes et corps de texte. */
  --serif: "Cinzel", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --maxw: 1240px;

  /* ----- Système unifié (harmonisation) ----- */
  --r: 4px;                 /* rayon unique : cartes, médias, blocs */
  --r-pill: 100px;          /* exception assumée : boutons pilule */
  --shadow: 0 14px 40px -28px rgba(23, 21, 15, 0.45);   /* ombre unique des cartes */

  /* Échelle d'espacement unique (rythme vertical & gaps) */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 7rem;            /* padding vertical des sections (desktop) */
  --gap-card: 1.5rem;      /* entre cartes d'une même grille */
  --gap-split: 4rem;       /* entre les 2 colonnes d'une section */
  --pad-card: 2.4rem;      /* padding interne des cartes */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }

body {
  font-family: var(--sans);
  background: var(--creme);
  color: var(--txt-sombre);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}
/* Sécurité anti-débordement horizontal */
html, body { overflow-x: hidden; max-width: 100%; }
main { overflow-x: hidden; width: 100%; }
img, video { max-width: 100%; height: auto; }
* { min-width: 0; }
.cta-grid { grid-template-columns: minmax(0,1fr) minmax(0,440px); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }

/* ---------- Grain ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 0.32em;
  text-transform: uppercase; font-weight: 500;
  color: var(--cuir); margin-bottom: 1.5rem;
}
.eyebrow-light { color: var(--terre); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: 0.82rem;
  letter-spacing: 0.05em; font-weight: 400;
  cursor: pointer; border: none;
  transition: all 0.45s var(--ease);
}
.btn-pill { padding: 1rem 1.8rem; border-radius: var(--r); }
.btn-icon { display: inline-flex; transition: transform 0.45s var(--ease); }
.btn:hover .btn-icon { transform: translate(3px, -3px); }

/* CTA principal = noir plein sur fond clair (cf. charte). */
.btn-gold { background: var(--noir); color: var(--ivoire); border: 1px solid var(--noir); }
.btn-gold:hover { background: transparent; color: var(--noir); }
.btn-dark { background: var(--noir); color: var(--ivoire); }
.btn-dark:hover { background: var(--brun); }
/* Sur le hero (photo sombre), le CTA principal passe en crème plein pour rester lisible. */
.hero .btn-gold { background: var(--ivoire); color: var(--noir); border-color: var(--ivoire); }
.hero .btn-gold:hover { background: transparent; color: var(--ivoire); border-color: var(--ivoire); }

.btn-ghost {
  background: transparent; color: var(--txt-sombre);
  border-bottom: 1px solid var(--ligne); border-radius: 0;
  padding: 0.5rem 0.1rem;
}
.btn-ghost:hover { border-color: var(--cuir); color: var(--cuir); }
.btn-ghost-light { color: var(--txt-clair); border-color: var(--ligne-claire); }
.btn-ghost-light:hover { color: var(--terre); border-color: var(--terre); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; letter-spacing: 0.06em; font-weight: 500;
  color: var(--txt-sombre); border-bottom: 1px solid currentColor;
  padding-bottom: 2px; transition: gap 0.4s var(--ease);
}
.link-arrow:hover { gap: 0.8rem; }
.section-dark .link-arrow { color: var(--txt-clair); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: all 0.5s var(--ease); }
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 1.4rem 2rem 1.1rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
}
.nav-wrap.scrolled {
  background: rgba(245, 243, 237, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair); /* même beige hairline que la bordure du formulaire de contact */
}
.nav-wrap.scrolled .nav { padding: 1rem 2rem; }
/* Nav scrollée = fond clair → on repasse logo et textes en sombre */
.nav-wrap.scrolled .nav-logo,
.nav-wrap.scrolled .nav-logo-full { filter: none; }
.nav-wrap.scrolled .nav-name { color: var(--txt-sombre); }
.nav-wrap.scrolled .nav-name-top { color: var(--cuir); }
.nav-wrap.scrolled .nav-links a { color: var(--txt-doux); }
.nav-wrap.scrolled .nav-links a:hover { color: var(--txt-sombre); }
.nav-wrap.scrolled .nav-cta { color: var(--txt-sombre); border-color: var(--ligne); }
.nav-wrap.scrolled .nav-cta:hover { border-color: var(--cuir); color: var(--cuir); }
.nav-wrap.scrolled .nav-toggle-bar { background: var(--txt-sombre); }

.nav-brand { display: flex; align-items: center; gap: 0.85rem; }
.nav-logo {
  width: 36px; height: 36px; object-fit: contain;
  filter: invert(1) brightness(1.8);
  transition: opacity 0.4s var(--ease);
}
/* Logo entier (emblème + MAISON BELVIOR), dimensionné par la hauteur */
/* Logo détouré (logo-nav.png) : la boîte image = le logo visible, donc
   l'alignement bas pose réellement BELVIOR sur la ligne des liens. */
.nav-logo-full {
  height: 42px; width: auto; object-fit: contain;
  filter: invert(1) brightness(1.9);
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav-wrap.scrolled .nav-logo-full { height: 34px; }
.nav-name {
  display: flex; flex-direction: column; align-items: flex-start; line-height: 1;
  color: var(--txt-clair); font-family: var(--serif);
}
.nav-name-top {
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  font-weight: 500; padding-left: 0.12em; margin-bottom: 2px;
}
.nav-name-main {
  font-size: 1.5rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 500;
}

.nav-links { display: flex; gap: 2.2rem; list-style: none; margin-left: auto; }
.nav-links a {
  font-size: 0.8rem; letter-spacing: 0.05em; font-weight: 400;
  color: var(--txt-clair-doux); position: relative; padding-bottom: 4px;
  transition: color 0.4s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px; background: var(--terre);
  transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--txt-clair); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: transparent; color: var(--txt-clair);
  border: 1px solid var(--ligne-claire); padding: 0.7rem 1.3rem;
}
.nav-cta:hover { border-color: var(--terre); color: var(--terre); }

.nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle-bar { width: 26px; height: 1.5px; background: var(--txt-clair); transition: all 0.4s var(--ease); }

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 999; background: var(--noir);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2rem; opacity: 0; visibility: hidden; transition: all 0.5s var(--ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu ul { list-style: none; text-align: center; }
.mobile-menu li { margin: 1.1rem 0; }
.mobile-menu a { font-family: var(--display); font-size: 1.7rem; color: var(--txt-clair); font-weight: 600; letter-spacing: -0.02em; }
.mobile-menu a:hover { color: var(--terre); }
.mobile-menu-foot { color: var(--terre); font-size: 0.85rem; letter-spacing: 0.05em; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; flex-direction: column;
  justify-content: center; padding: 8rem 2rem 6rem; overflow: hidden; background: var(--noir);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img,
.hero-bg .hero-video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  opacity: 1; transform: scale(1.05); animation: heroZoom 18s ease-out forwards;
  display: block;
}
@keyframes heroZoom { to { transform: scale(1); } }
/* Voile : photo claire en hero → voile suffisant pour que le texte crème reste lisible, sans éteindre la chaleur de la photo */
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,18,14,0.5) 0%, rgba(20,18,14,0.32) 45%, rgba(20,18,14,0.66) 100%),
    radial-gradient(120% 90% at 22% 38%, rgba(20,18,14,0.4) 0%, rgba(20,18,14,0.2) 60%);
}

.hero-inner { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; width: 100%; }
.hero-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.8rem, 8vw, 6.3rem); line-height: 1.0;
  letter-spacing: -0.03em; color: var(--ivoire); margin-bottom: 1.8rem;
  text-shadow: 0 2px 30px rgba(20,16,12,0.4);
}
.hero-title em { color: var(--ivoire); font-weight: 700; font-style: normal; }
.hero-lede {
  max-width: 560px; font-size: 1.12rem; color: var(--ivoire);
  font-weight: 300; line-height: 1.7; margin-bottom: 2.6rem;
  text-shadow: 0 1px 18px rgba(20,16,12,0.5);
}
.hero-cta { display: flex; align-items: center; gap: 1.8rem; flex-wrap: wrap; margin-bottom: 4.5rem; }

.hero-meta { display: flex; gap: 3.5rem; flex-wrap: wrap; padding-top: 2.5rem; border-top: 1px solid var(--ligne-claire); max-width: 620px; }
.hero-meta > div { display: flex; flex-direction: column; gap: 0.3rem; }
.meta-num { font-family: var(--display); font-size: 2.4rem; font-weight: 700; color: var(--ivoire); line-height: 1; letter-spacing: -0.03em; }
.meta-lbl { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-clair-doux); line-height: 1.4; }

.hero-scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--txt-clair-doux);
}
.hero-scroll span { width: 1px; height: 44px; background: linear-gradient(var(--terre), transparent); animation: scrollPulse 2.2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100% { opacity: 0.3; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } }

/* ============================================================
   BANDEAU CITATION
   ============================================================ */
.quote-band { background: #fbfaf5; padding: 6rem 2rem; text-align: center; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); position: relative; overflow: hidden; }
.quote-band p { font-family: var(--display); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); max-width: 800px; margin: 0 auto; line-height: 1.15; }
.quote-band em { color: var(--ink); font-style: normal; font-weight: 700; }
.quote-keywords { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 2.2rem; flex-wrap: wrap; }
.quote-keywords span { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); }
.quote-keywords .kw-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); display: inline-block; }

/* ============================================================
   SECTIONS génériques
   ============================================================ */
.section { position: relative; max-width: var(--maxw); margin: 0 auto; padding: var(--sp-7) 2rem; }
.section-dark { position: relative; }
.section-dark { max-width: none; background: var(--noir); color: var(--txt-clair); }
.section-dark > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* En-tête de section.
   Avec chapô → 2 colonnes (titre à gauche, chapô à droite) : on occupe toute
   la largeur utile au lieu de laisser le côté droit vide. Sans chapô → titre
   pleine largeur, qui respire au lieu d'être coincé à gauche. */
.section-head { max-width: none; margin-bottom: var(--sp-6); }
.section-head:not(:has(.section-lede)) { max-width: 760px; }
.section-head:has(.section-lede) {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  column-gap: var(--gap-split); row-gap: var(--sp-3); align-items: end;
}
.section-head:has(.section-lede) .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.section-head:has(.section-lede) .section-title { margin-bottom: 0; }
.section-head:has(.section-lede) .section-lede { max-width: 460px; }
.section-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.08;
  letter-spacing: -0.03em; margin-bottom: 1.4rem;
}
.section-title em { color: var(--txt-sombre); font-weight: 700; font-style: normal; }
/* Pas de filet sous les grands titres de section — la respiration suffit */
.section-head .section-title::after { content: none; }
.section-dark .section-title em { color: var(--terre); }
.section-lede { font-size: 1.08rem; color: var(--txt-doux); font-weight: 300; max-width: 560px; }
.section-dark .section-lede { color: var(--txt-clair-doux); }
/* Lisibilité sections sombres : titres, eyebrow, listes voyageurs, lien flèche */
.section-dark .section-title { color: var(--ivoire); }
.section-dark .eyebrow { color: var(--txt-clair-doux); }
.section-dark .voy-list li { color: var(--txt-clair-doux); border-color: var(--ligne-claire); }
.section-dark .link-arrow { color: var(--txt-clair); }
.section-foot { margin-top: 3.5rem; display: flex; justify-content: flex-end; }
@media (max-width: 780px) { .section-foot { justify-content: flex-start; } }

/* ---------- Services ---------- */
/* Cartes style SKL : blanches, coins arrondis, bordure fine, numéro en haut-droite */
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
.card.service {
  padding: var(--pad-card); border: 1px solid var(--ligne); border-radius: var(--r);
  background: var(--ivoire); transition: all 0.4s var(--ease);
  position: relative; display: flex; flex-direction: column;
}
.card-num {
  position: absolute; top: 1.6rem; right: 1.8rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 400;
  color: var(--txt-doux); opacity: 0.6; letter-spacing: 0.05em;
}
.card.service h3 {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  margin: 0.4rem 0 0.7rem; letter-spacing: -0.01em;
}
.card.service p { font-size: 0.92rem; color: var(--txt-doux); line-height: 1.65; }
.card.service:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 50px -30px rgba(23,21,15,0.4); }
/* Cartes services : toutes neutres, plus de damier noir. Le rythme vient du contenu. */
.services-grid .card.service:nth-child(3n+2) { background: var(--paper-card); border-color: var(--hair); }
.services-grid .card.service:nth-child(3n+2) h3 { color: var(--txt-sombre); }
.services-grid .card.service:nth-child(3n+2) p { color: var(--txt-doux); }
.services-grid .card.service:nth-child(3n+2) .card-num { color: var(--txt-doux); }
.services-grid .card.service:nth-child(3n+2):hover { border-color: var(--accent); }

/* ---------- Voyageurs split ---------- */
.voy-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-split); align-items: center; }
.voy-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.voy-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.voy-media:hover img { transform: scale(1.05); }
.voy-list { list-style: none; margin: 2rem 0; }
.voy-list li {
  padding: 1rem 0; border-top: 1px solid var(--ligne);
  font-size: 1rem; color: var(--txt-doux); display: flex; gap: 0.9rem;
}
.voy-list li::before { content: "·"; color: var(--cuir); font-size: 1.4rem; line-height: 1; }

/* ---------- Galerie ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 1.2rem; }
.gal { position: relative; overflow: hidden; border-radius: var(--r); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gal:hover img { transform: scale(1.06); }
.gal-tall { grid-row: span 2; }
.gal-wide { grid-column: span 2; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.5rem 1.2rem;
  font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ivoire);
  background: linear-gradient(transparent, rgba(20,16,12,0.85));
  opacity: 0; transform: translateY(8px); transition: all 0.5s var(--ease);
}
.gal:hover figcaption { opacity: 1; transform: translateY(0); }

/* ---------- Split (La Maison) ---------- */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--gap-split); align-items: center; }
.split-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; background: var(--brun-fonce); }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-body .manifesto-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.7rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.8rem; }
.split-body .manifesto-title em { color: var(--txt-sombre); font-weight: 700; }
.split-body p { font-size: 1.02rem; color: var(--txt-doux); margin-bottom: 1.2rem; max-width: 520px; }
.signature { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--txt-sombre); margin-top: 1.5rem !important; }
.values { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; border-top: 1px solid var(--ligne); padding-top: 2.5rem; margin-top: 4rem; }
.values li { display: flex; flex-direction: column; gap: 0.4rem; }
.values-k { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--txt-sombre); }
.values-v { font-size: 0.85rem; color: var(--txt-doux); letter-spacing: 0.01em; white-space: nowrap; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--noir); color: var(--txt-clair); padding: 5rem 2rem 0; }
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; display: grid;
  grid-template-columns: 1fr auto auto auto; gap: 2rem 4rem;
  align-items: start; padding-bottom: 3.5rem;
}
/* La marque occupe la gauche ; les 3 colonnes de liens sont groupées à droite */
.footer-col { min-width: 0; }
.footer-col:last-of-type { justify-self: start; }
.footer-brand { display: flex; flex-direction: column; gap: 0.4rem; max-width: 340px; }
.footer-logo-full {
  height: 96px; width: auto; max-width: 100%; object-fit: contain; object-position: left;
  filter: invert(1); mix-blend-mode: screen; margin-bottom: 1.2rem;
}
.footer-brand span { font-size: 0.9rem; line-height: 1.6; color: var(--txt-clair-doux); }
/* Colonnes de liens titrées */
.footer-col h4 {
  font-family: var(--display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ivoire);
  margin-bottom: 1.2rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a, .footer-contact li { font-size: 0.9rem; color: var(--txt-clair-doux); transition: color 0.4s var(--ease); }
.footer-col a:hover { color: var(--ivoire); }
.footer-contact li { line-height: 1.4; }
/* Barre du bas */
.footer-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 1.6rem 0;
  border-top: 1px solid var(--ligne-claire);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--txt-clair-doux);
}
.footer-bottom a { color: var(--txt-clair-doux); }
.footer-bottom a:hover { color: var(--ivoire); }

/* ============================================================
   BANDEAU ENGAGEMENTS
   ============================================================ */
.engage-bar { background: var(--ivoire); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: 1.1rem 2rem; }
.engage-inner {
  max-width: var(--maxw); margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 0.5rem 1rem;
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--txt-doux); text-align: center;
}
.engage-inner .sep { color: var(--cuir); }

/* ============================================================
   AVANT / APRÈS
   ============================================================ */
.ba-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-card); }
.ba-card { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--ivoire); padding: var(--pad-card); transition: all 0.5s var(--ease); }
.ba-card:hover { box-shadow: 0 24px 60px -32px rgba(44,31,21,0.35); transform: translateY(-3px); }
/* Deux cartes neutres en crème, contraste porté par les tags */
.ba-before, .ba-after { background: var(--ivoire); border-color: var(--ligne); }
.ba-before h3, .ba-after h3 { color: var(--txt-sombre); }
.ba-before .ba-list li, .ba-after .ba-list li { color: var(--txt-doux); }
.ba-tag { display: inline-block; font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.9rem; border-radius: 100px; margin-bottom: 1.4rem; }
.ba-tag-before { color: var(--txt-doux); border: 1px solid var(--ligne); }
.ba-tag-after { color: var(--txt-sombre); border: 1px solid var(--accent); }
.ba-card h3 { font-family: var(--display); font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.ba-list { list-style: none; display: flex; flex-direction: column; gap: 0.95rem; }
.ba-list li { position: relative; padding-left: 1.6rem; font-size: 0.96rem; color: var(--txt-doux); line-height: 1.55; }
.ba-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--beige); }

/* ============================================================
   MÉTHODE — escalier montant
   ============================================================ */
.stair { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 1.5rem; align-items: start; margin-top: 1rem; }
.stair-step { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }
.stair-step:nth-child(1) { margin-top: 7rem; }
.stair-step:nth-child(2) { margin-top: 3.5rem; }
.stair-step:nth-child(3) { margin-top: 0; }
.stair-node {
  align-self: flex-start; width: 48px; height: 48px; border-radius: 50%;
  background: var(--ivoire); border: 1px solid var(--cuir);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--txt-sombre);
  box-shadow: 0 0 0 6px var(--creme);
}
.stair-card { border: 1px solid var(--ligne); border-radius: var(--r); background: var(--ivoire); padding: 1.8rem; transition: all 0.4s var(--ease); }
.stair-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 50px -30px rgba(23,21,15,0.35); }
.stair-ph { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cuir); display: block; margin-bottom: 0.7rem; }
.stair-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.7rem; color: var(--txt-sombre); letter-spacing: -0.01em; }
.stair-card p { font-size: 0.93rem; color: var(--txt-doux); line-height: 1.65; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--ligne); max-width: none; }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--txt-sombre); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 300; font-size: 1.6rem; color: var(--txt-sombre); transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.5rem; font-size: 1rem; color: var(--txt-doux); line-height: 1.7; max-width: 75ch; }
/* Intertitres de thème dans la FAQ */
.faq-group {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 600; color: var(--cuir);
  margin: 2.6rem 0 0.2rem;
}
.faq-group:first-child { margin-top: 1.8rem; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.section-cta { max-width: none; background: var(--ivoire); border-top: 1px solid var(--ligne); }
.section-cta > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section-cta .section-title em { color: var(--txt-sombre); }
.cta-grid { display: grid; grid-template-columns: 1fr 440px; gap: var(--gap-split); align-items: start; }
.cta-checklist { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; margin: 2rem 0; }
.cta-checklist li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 1rem; color: var(--txt-doux); }
.cta-checklist .ck { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(31,29,22,0.10); color: var(--txt-sombre); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 1px; }
.cta-left .contact-info { margin-top: 1.5rem; }
.cta-left .contact-info li { border-top: 1px solid var(--ligne); }
.cta-left .contact-info span { color: var(--cuir); }
.cta-left .contact-info a { color: var(--txt-sombre); }
.cta-left .contact-info a:hover { color: var(--cuir); }
.contact-info { list-style: none; }
.contact-info li { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.2rem 0; }
.contact-info span { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.contact-info a, .contact-info p { font-family: var(--display); font-weight: 500; font-size: 1.2rem; }

.contact-form { background: var(--ivoire); border: 1px solid var(--ligne); padding: var(--pad-card); border-radius: var(--r); }
.contact-form .ft { font-family: var(--display); font-size: 1.2rem; font-weight: 600; color: var(--txt-sombre); margin-bottom: 0.2rem; }
.contact-form .fs { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cuir); margin-bottom: 1.6rem; }
.field { margin-bottom: 1.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.field label { display: block; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-doux); margin-bottom: 0.6rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.85rem 0; background: transparent; border: none;
  border-bottom: 1px solid var(--ligne); font-family: var(--sans); font-size: 0.98rem;
  color: var(--txt-sombre); font-weight: 300; transition: border-color 0.4s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--txt-doux); opacity: 0.6; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cuir); }
.field select { cursor: pointer; }
.btn-submit { width: 100%; justify-content: center; margin-top: 0.6rem; }
.form-legal { font-size: 0.72rem; color: var(--txt-doux); line-height: 1.6; margin-top: 1.4rem; }
.form-status { font-size: 0.9rem; margin-top: 1rem; min-height: 1.2em; }
.form-status.ok { color: var(--cuir); }
.form-status.err { color: #a3402b; }

/* ============================================================
   CARTES PHOTO (services)
   Photo en haut, texte toujours visible dessous. Pas de flip 3D :
   l'image reste, la lecture est immédiate, toutes les cartes sont identiques.
   ============================================================ */
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
.photo-card {
  display: flex; flex-direction: column;
  background: var(--ivoire); border: 1px solid var(--ligne); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.photo-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 22px 60px -32px rgba(23,21,15,.5); }
.photo-card:focus-visible { outline: 2px solid var(--noir); outline-offset: 4px; }
.photo-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.photo-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.photo-card:hover .photo-card-media img { transform: scale(1.05); }
.photo-card-body { padding: var(--pad-card); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.photo-card-num { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-doux); }
.photo-card-title { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; color: var(--txt-sombre); line-height: 1.15; }
.photo-card-body p { font-size: 0.95rem; line-height: 1.65; color: var(--txt-doux); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Reveal en cascade */
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Contrôle propriétaire — deux cartes « vous / nous » */
.ctrl-split { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: var(--gap-split); align-items: start; }
.ctrl-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-card); }
.ctrl-col { border: 1px solid var(--ligne); border-radius: var(--r); padding: var(--pad-card); box-shadow: var(--shadow); }
.ctrl-col h4 {
  font-family: var(--display); font-size: 1rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--txt-sombre); margin-bottom: 1.3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ligne);
}
.ctrl-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.ctrl-col li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--txt-doux); line-height: 1.5; }
.ctrl-col li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--beige); }
/* « Nous gérons » : fond sable (différencié de la carte blanche voisine) */
.ctrl-col--dark { background: var(--paper-card); border-color: var(--hair); }
.ctrl-col--dark h4 { color: var(--txt-sombre); border-color: var(--hair); }
.ctrl-col--dark li { color: var(--txt-doux); }
.ctrl-col--dark li::before { background: var(--accent); }

/* Tarifs — trois cartes structurées (même grammaire que le reste) */
.tarifs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-card); }
.tarif-card { display: flex; flex-direction: column; gap: 0.6rem; border: 1px solid var(--ligne-claire); border-radius: var(--r); padding: var(--pad-card); }
.tarif-label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--txt-clair-doux); }
.tarif-big { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 700; letter-spacing: -0.03em; color: var(--ivoire); line-height: 1; }
.tarif-card p { font-size: 0.92rem; color: var(--txt-clair-doux); line-height: 1.6; margin-top: 0.4rem; }

/* Pour qui / pas pour qui */
.pourqui-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--gap-card); }
.pourqui-col { border: 1px solid var(--ligne); border-radius: var(--r); padding: var(--pad-card); }
.pourqui-yes { background: var(--paper-card); }
.pourqui-no { background: var(--paper-card); opacity: 0.78; }
.pourqui-k { font-family: var(--display); font-size: 0.95rem; font-weight: 600; color: var(--txt-sombre); display: block; margin-bottom: 1.4rem; line-height: 1.4; }
.pourqui-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; }
.pourqui-col li { position: relative; padding-left: 1.6rem; font-size: 0.96rem; color: var(--txt-doux); line-height: 1.5; }
.pourqui-yes li::before { content: "✓"; position: absolute; left: 0; color: var(--cuir); font-size: 0.9rem; }
.pourqui-no li::before { content: "·"; position: absolute; left: 0; color: var(--txt-doux); opacity: 0.6; font-size: 1.4rem; }

/* Protocole — timeline verticale */
.protocole { list-style: none; max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--gap-card); counter-reset: none; }
.proto-step { display: grid; grid-template-columns: 240px 1fr; align-items: stretch; border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; background: var(--ivoire); transition: all 0.4s var(--ease); min-height: 200px; }
.proto-step:hover { border-color: var(--accent); box-shadow: 0 18px 50px -32px rgba(23,21,15,0.3); }
.proto-media { position: relative; overflow: hidden; }
.proto-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.proto-body { padding: var(--pad-card); }
.proto-num { font-family: var(--display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; color: var(--cuir); }
.proto-when { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-doux); display: block; margin: 0.3rem 0 0.6rem; }
.proto-body h3 { font-family: var(--display); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
.proto-body p { font-size: 0.95rem; color: var(--txt-doux); line-height: 1.6; }

/* Garanties — grille 2 colonnes, cartes toutes neutres (pas de damier) */
.services-grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.services-grid-2 .card.service,
.services-grid-2 .card.service:nth-child(3n+2) { background: var(--ivoire); border-color: var(--ligne); }
.services-grid-2 .card.service h3,
.services-grid-2 .card.service:nth-child(3n+2) h3 { color: var(--txt-sombre); }
.services-grid-2 .card.service p, .services-grid-2 .card.service .card-num,
.services-grid-2 .card.service:nth-child(3n+2) p, .services-grid-2 .card.service:nth-child(3n+2) .card-num { color: var(--txt-doux); }

/* Eyebrow à pastille (seul détail signature conservé) */
.eyebrow { display:inline-flex; align-items:center; gap:0.6rem; }
.eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cuir); flex-shrink:0; }
.eyebrow-light::before { background:var(--terre); }

/* Ombre unique sur toutes les cartes (plus de halos, plus de reflet balayage) */
.card.service, .ba-card, .proto-step, .pourqui-col, .contact-form { box-shadow: var(--shadow); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Nav : passage en menu burger plus tôt pour éviter le débordement */
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-logo-full { height: 56px; }
}

@media (max-width: 980px) {
  .proto-step { grid-template-columns: 1fr; }
  .proto-media { aspect-ratio: 16/9; }
  .proto-body { padding: 1.6rem 1.8rem; }
  .services-grid-2 { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .voy-split { grid-template-columns: 1fr; }
  .pourqui-grid { grid-template-columns: 1fr; }
  .ctrl-cols { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .ctrl-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .tarifs-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pourqui-grid { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gal-wide { grid-column: span 2; }
  .gal-tall { grid-row: span 1; }
  .voy-split, .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .voy-media, .split-media { aspect-ratio: 16 / 11; }
  .ba-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .stair { grid-template-columns: 48px 1fr; column-gap: 1.2rem; row-gap: 1rem; }
  .stair-step, .stair-step:nth-child(1), .stair-step:nth-child(2), .stair-step:nth-child(3) { margin-top: 0; flex-direction: row; gap: 1.2rem; align-items: start; }
  .stair-card { flex: 1; }
  .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; text-align: left; }
  .footer-legal { text-align: left; }
}

@media (max-width: 560px) {
  .section { padding: 4.5rem 1.4rem; }
  .hero { padding: 7rem 1.4rem 5rem; }
  .nav { padding: 1.2rem 1.4rem; }
  .services-grid, .values { grid-template-columns: 1fr; }
  .services-grid-2 { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: 1fr; }
  .stair { grid-template-columns: 44px 1fr; }
  .gallery { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gal-wide { grid-column: span 1; }
  .field-row { grid-template-columns: 1fr; }
  .hero-meta { gap: 2rem; }
  .hero-cta { gap: 1.2rem; }
  .nav-logo-full { height: 36px; }
  .nav-wrap.scrolled .nav-logo-full { height: 30px; }
  .contact-form { padding: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .stagger > * { opacity: 1; transform: none; }
}

/* Fallback : si JavaScript est désactivé, tout reste visible */
@media (scripting: none) {
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}