/* ============================================================
   MAISON LIYĀN — Design System
   Direction : « Ivoire & Encre » — luxe éditorial, calme, sur-mesure
   Agence : Lunyce (lunyce.fr)
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Couleurs */
  --ivoire:        #F7F4EF;   /* fond principal */
  --craie:         #FDFCFA;   /* surfaces claires */
  --sable:         #EFE9E0;   /* sections teintées */
  --nacre:         #E5D9CE;   /* nude désaturé, touche féminine */
  --encre:         #17140F;   /* texte / fond sombre */
  --encre-soft:    #241F19;
  --taupe:         #6E6156;   /* texte secondaire (4.9:1 sur ivoire) */
  --champagne:     #B29467;   /* accent décoratif */
  --champagne-txt: #8A6B3D;   /* accent lisible (4.6:1 sur ivoire) */

  --c-bg:      var(--ivoire);
  --c-fg:      var(--encre);
  --c-muted:   var(--taupe);
  --c-border:  rgba(23,20,15,.14);
  --c-accent:  var(--champagne-txt);

  /* Typo */
  --f-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-sans:    "Jost", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(3rem, 9vw, 7.5rem);
  --fs-h2:    clamp(2.1rem, 4.6vw, 3.9rem);
  --fs-h3:    clamp(1.35rem, 2vw, 1.7rem);
  --fs-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-micro: .72rem;

  /* Rythme (base 8) */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 140px;

  --wrap: 1240px;
  --wrap-narrow: 720px;

  /* Mouvement */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);   /* décélération longue, « couture » */
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 620ms;
  --t-reveal: 950ms;
  --stagger-step: 90ms;
  --marquee-duration: 42s;

  --z-header: 100;
  --z-overlay: 200;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-fg);
  font-family:var(--f-sans);
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.7;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:300; line-height:1.08; letter-spacing:-.01em; }
h1 em,h2 em,h3 em{ font-style:italic; color:var(--c-accent); }
p{ margin:0 0 var(--s-2); }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline:2px solid var(--champagne-txt);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--encre); color:var(--ivoire);
  padding:12px 20px; text-decoration:none;
}
.skip-link:focus{ left:8px; top:8px; }

/* ---------- 3. UTILITAIRES ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,56px); }
.wrap--narrow{ max-width:var(--wrap-narrow); }
.center{ text-align:center; }

.section{ padding-block:clamp(64px,10vw,var(--s-8)); }
/* dégagement sous le header collant lors des ancres */
main section[id]{ scroll-margin-top:96px; }
.section--tinted{ background:var(--sable); }
.section--dark{ background:var(--encre); color:var(--ivoire); }
.section--dark .eyebrow{ color:var(--champagne); }
.section--dark .section__lede{ color:rgba(247,244,239,.72); }

.section__head{ margin-bottom:clamp(40px,6vw,var(--s-7)); max-width:56ch; }
.section__head--center{ margin-inline:auto; text-align:center; }
.section__lede{ color:var(--c-muted); max-width:52ch; }
.section__head--center .section__lede{ margin-inline:auto; }

.eyebrow{
  font-size:var(--fs-micro);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:var(--s-2);
}
.h2{ font-size:var(--fs-h2); margin-bottom:var(--s-3); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,var(--s-7)); }
.grid-2--align{ align-items:center; }

/* ---------- 4. PLACEHOLDERS VISUELS ----------
   Remplacer chaque `.ph` par une <img> ou un <video>.
   Le style ci-dessous n'existe que pour la maquette. */
.ph{
  position:relative;
  background:
    radial-gradient(120% 90% at 30% 10%, #fff 0%, transparent 55%),
    linear-gradient(150deg, var(--nacre) 0%, var(--sable) 45%, #DCD1C6 100%);
  overflow:hidden;
}
.ph::after{
  content:attr(data-ph);
  position:absolute; inset:auto 0 16px 0;
  text-align:center;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(23,20,15,.38);
}
.ph::before{
  content:"ML";
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--f-display);
  font-size:clamp(3rem,7vw,6rem);
  letter-spacing:.1em;
  color:rgba(255,255,255,.5);
}
.ph--portrait{ aspect-ratio:3/4; }
.ph--square{ aspect-ratio:1/1; }
.ph--tall{ aspect-ratio:4/5; }
.ph--map{ aspect-ratio:4/3; }

/* ---------- 5. BOUTONS ---------- */
.btn{
  --btn-fg:var(--encre);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px;
  padding:0 var(--s-4);
  font-size:.78rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:background var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.btn--solid{ background:var(--encre); color:var(--ivoire); }
.btn--solid:hover{ background:var(--champagne-txt); }
.btn--line{ background:transparent; border-color:var(--c-border); color:var(--encre); }
.btn--line:hover{ border-color:var(--encre); background:rgba(23,20,15,.04); }
.btn--ghost{ background:transparent; border-color:var(--c-border); min-height:44px; padding:0 var(--s-3); }
.btn--ghost:hover{ background:var(--encre); color:var(--ivoire); border-color:var(--encre); }
.btn--full{ width:100%; }
.btn--onDark{ color:var(--ivoire); border-color:rgba(247,244,239,.35); }
.btn--onDark:hover{ background:var(--ivoire); color:var(--encre); border-color:var(--ivoire); }
.btn--solid.btn--onDark{ background:var(--ivoire); color:var(--encre); }
.btn--solid.btn--onDark:hover{ background:var(--champagne); color:var(--encre); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.link{
  display:inline-block;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid var(--c-border);
  transition:border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.link:hover{ border-color:var(--champagne-txt); color:var(--champagne-txt); }

/* ---------- 6. TOPBAR + HEADER ---------- */
.topbar{
  background:var(--encre); color:rgba(247,244,239,.82);
  text-align:center;
}
.topbar p{
  margin:0; padding:10px 20px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
}

.header{
  position:sticky; top:0; z-index:var(--z-header);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-mid) var(--ease);
}
/* Le flou est porté par un pseudo-élément : appliqué sur .header,
   backdrop-filter créerait un bloc conteneur qui piègerait le menu
   mobile en position:fixed. */
.header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(247,244,239,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:background var(--t-mid) var(--ease);
}
.header.is-stuck{ border-bottom-color:var(--c-border); }
.header.is-stuck::before{ background:rgba(247,244,239,.95); }

.header__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:var(--s-2) clamp(20px,5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
}
.brand{ text-decoration:none; display:block; line-height:1.1; }
.brand__name{
  display:block;
  font-family:var(--f-display);
  font-size:1.12rem; letter-spacing:.3em;
}
.brand__sub{
  display:block;
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--c-muted); margin-top:4px;
}
.brand__name--footer{ font-size:1.3rem; margin:0; }

.nav{ display:flex; align-items:center; gap:var(--s-4); }
.nav ul{ display:flex; gap:var(--s-4); }
/* Portée volontairement limitée aux liens de la liste : `.nav a` viserait
   aussi le bouton d'appel et, plus spécifique que `.nav__cta`, lui imposerait
   son padding vertical — le bouton se retrouvait sans espace latéral. */
.nav ul a{
  text-decoration:none;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
  padding:6px 0;
  position:relative;
}
/* Bouton d'appel du header.
   Le contour précédent utilisait --c-border (14 % d'opacité) : trop pâle,
   le bouton se lisait comme un champ désactivé. Contour plein, et le fond
   encre remonte depuis le bas au survol — l'effet « tampon » d'une maison. */
.nav__cta{
  --cta-x:32px;              /* respiration latérale, reprise par le filet */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:46px;
  padding:0 var(--cta-x);
  border:1px solid var(--encre);
  background:transparent;
  color:var(--encre);
  font-size:.67rem;
  letter-spacing:.2em;
  white-space:nowrap;
}
.nav__cta::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  background:var(--encre);
  transform:scaleY(0);
  transform-origin:center bottom;
  transition:transform var(--t-mid) var(--ease-soft);
}
.nav__cta:hover,
.nav__cta:focus-visible{
  background:transparent;
  color:var(--ivoire);
  border-color:var(--encre);
}
.nav__cta:hover::before,
.nav__cta:focus-visible::before{ transform:scaleY(1); }

/* Filet champagne qui souligne l'intention, révélé avec le fond */
.nav__cta::after{
  content:"";
  position:absolute; left:var(--cta-x); right:var(--cta-x); bottom:11px;
  height:1px;
  background:var(--champagne);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform var(--t-slow) var(--ease-soft) 90ms;
}
.nav__cta:hover::after,
.nav__cta:focus-visible::after{ transform:scaleX(1); }

.nav ul a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--champagne-txt);
  transition:right var(--t-mid) var(--ease);
}
.nav ul a:hover::after, .nav ul a.is-current::after{ right:0; }

.burger{
  display:none;
  position:relative;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  padding:0;
}
.burger span{
  position:absolute; left:10px;
  width:24px; height:1px; background:var(--encre);
  transition:transform var(--t-mid) var(--ease);
}
.burger span:first-child{ top:18px; }
.burger span:last-child{ top:26px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* ---------- 7. HERO ---------- */
.hero{
  position:relative;
  min-height:min(92svh, 900px);
  display:grid; align-items:end;
  isolation:isolate;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  aspect-ratio:auto;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(23,20,15,.42) 0%, rgba(23,20,15,.12) 38%, rgba(23,20,15,.7) 100%);
}
.hero__content{
  width:100%; max-width:var(--wrap); margin-inline:auto;
  padding:0 clamp(20px,5vw,56px) clamp(72px,12vh,140px);
  color:var(--ivoire);
}
.hero .eyebrow{ color:rgba(247,244,239,.8); }
.hero__title{
  font-size:var(--fs-hero);
  line-height:.95;
  margin-bottom:var(--s-3);
  text-shadow:0 2px 40px rgba(0,0,0,.3);
}
.hero__title em{ color:var(--nacre); }
.hero__lede{
  max-width:44ch;
  color:rgba(247,244,239,.86);
  margin-bottom:var(--s-4);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.hero__actions .btn--solid{ background:var(--ivoire); color:var(--encre); }
.hero__actions .btn--solid:hover{ background:var(--nacre); }
.hero__actions .btn--line{ border-color:rgba(247,244,239,.4); color:var(--ivoire); }
.hero__actions .btn--line:hover{ background:rgba(247,244,239,.12); border-color:var(--ivoire); }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; display:grid; place-items:center;
}
.hero__scroll span{
  display:block; width:1px; height:34px;
  background:linear-gradient(180deg, rgba(247,244,239,0), rgba(247,244,239,.9));
  animation:scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse{
  0%,100%{ opacity:.3; transform:scaleY(.6); transform-origin:bottom; }
  50%{ opacity:1; transform:scaleY(1); transform-origin:bottom; }
}

/* ---------- 8. MARQUEE ---------- */
.marquee{
  background:var(--encre); color:var(--ivoire);
  padding:14px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee__track{
  display:inline-flex; align-items:center; gap:var(--s-4);
  animation:slide var(--marquee-duration) linear infinite;
}
.marquee span{
  font-family:var(--f-display);
  font-size:1.05rem; letter-spacing:.22em; text-transform:uppercase;
}
.marquee i{ color:var(--champagne); font-style:normal; font-size:.6rem; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- 9. MAISON ---------- */
.maison__visual{ position:relative; }
.maison__visual .ph--float{
  position:absolute; right:-8%; bottom:-9%;
  width:46%; aspect-ratio:3/4;
  border:8px solid var(--ivoire);
}
.pillars{ margin-top:var(--s-4); border-top:1px solid var(--c-border); }
.pillars li{
  display:flex; gap:var(--s-3); align-items:baseline;
  padding:var(--s-2) 0;
  border-bottom:1px solid var(--c-border);
  color:var(--c-muted);
}
.pillars span{
  font-family:var(--f-display);
  font-size:.95rem; color:var(--champagne-txt);
  letter-spacing:.1em;
}

/* ---------- 10. CARTES ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,var(--s-4)); }
.card{
  background:var(--craie);
  border:1px solid var(--c-border);
  display:flex; flex-direction:column;
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.card:hover{ transform:translateY(-6px); box-shadow:0 24px 60px -30px rgba(23,20,15,.35); }
.card__media{ aspect-ratio:4/5; }
.card__body{ padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-1); flex:1; }
.card__label{
  font-size:var(--fs-micro); letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne-txt); margin:0;
}
.card h3{ font-size:var(--fs-h3); margin-bottom:var(--s-1); }
.card__body > p{ color:var(--c-muted); margin:0; }
.card__meta{
  font-size:.78rem; letter-spacing:.06em;
  color:var(--c-muted); opacity:.75;
  margin-top:auto !important; padding-top:var(--s-2);
}
.card .link{ align-self:flex-start; margin-top:var(--s-2); }

/* ---------- 11. ETAPES ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(24px,3vw,var(--s-5)); counter-reset:step; }
.step{ border-top:1px solid var(--c-border); padding-top:var(--s-3); }
.step__num{
  display:block;
  font-family:var(--f-display); font-size:1.4rem;
  color:var(--champagne-txt); letter-spacing:.12em;
  margin-bottom:var(--s-2);
}
.step h3{ font-size:1.4rem; margin-bottom:var(--s-1); }
.step p{ color:var(--c-muted); margin:0; }

/* ---------- 12. GALERIE ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px);
  padding:0 clamp(10px,2vw,28px);
  margin-bottom:var(--s-5);
}
.gallery__item{ margin:0; }
.gallery__item::before{ color:rgba(255,255,255,.55); }

/* ---------- 13. TEMOIGNAGES ---------- */
.quotes{ background:var(--ivoire); }
.quote-slider{ position:relative; min-height:200px; max-width:820px; margin-inline:auto; text-align:center; }
.quote{
  position:absolute; inset:0;
  margin:0;
  opacity:0; visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease), visibility var(--t-slow);
}
.quote.is-active{ opacity:1; visibility:visible; transform:none; position:relative; }
.quote p{
  font-family:var(--f-display);
  font-size:clamp(1.4rem,3vw,2.3rem);
  line-height:1.35;
  font-weight:300;
}
.quote em{ color:var(--champagne-txt); }
.quote cite{
  display:block;
  font-family:var(--f-sans); font-style:normal;
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  color:var(--c-muted);
}
.quote-dots{ display:flex; justify-content:center; gap:12px; margin-top:var(--s-4); }
.quote-dots button{
  width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  display:grid; place-items:center;
}
.quote-dots button::before{
  content:""; width:28px; height:1px; background:var(--c-border);
  transition:background var(--t-mid) var(--ease);
}
.quote-dots button[aria-selected="true"]::before{ background:var(--champagne-txt); }

/* ---------- 14. INFOS BOUTIQUE ---------- */
.infos{ margin:var(--s-4) 0; border-top:1px solid var(--c-border); }
.infos > div{
  display:grid; grid-template-columns:150px 1fr; gap:var(--s-2);
  padding:var(--s-2) 0; border-bottom:1px solid var(--c-border);
}
.infos dt{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-muted); padding-top:5px;
}
.infos dd{ margin:0; }
.infos a{ text-decoration:none; border-bottom:1px solid var(--c-border); }
.infos a:hover{ border-color:var(--champagne-txt); color:var(--champagne-txt); }

/* ---------- 15. FORMULAIRE ---------- */
.form{ display:flex; flex-direction:column; gap:var(--s-3); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:var(--fs-micro); letter-spacing:.22em; text-transform:uppercase;
  color:var(--c-muted);
}
.field label span{ color:var(--champagne-txt); }
.field input, .field select, .field textarea{
  min-height:52px;
  padding:14px 16px;
  background:var(--craie);
  border:1px solid var(--c-border);
  border-radius:0;
  font-size:1rem; font-weight:300;
  transition:border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:rgba(23,20,15,.3); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--champagne-txt); background:#fff; outline:none;
}
.field ::placeholder{ color:rgba(23,20,15,.34); }
.field__help{ font-size:.8rem; color:var(--c-muted); margin:0; }
.field__error{
  font-size:.8rem; color:#A3241C; margin:0; min-height:0;
}
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:#A3241C; }
.form__status{ font-size:.86rem; text-align:center; margin:0; min-height:1.4em; }
.form__status.is-ok{ color:#3F6B48; }
.form__status.is-err{ color:#A3241C; }

/* ---------- 16. ACCORDEON ---------- */
.accordion{ border-top:1px solid var(--c-border); }
.acc{ border-bottom:1px solid var(--c-border); }
.acc__btn{
  width:100%; min-height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
  padding:var(--s-2) 0;
  background:none; border:0; cursor:pointer;
  text-align:left;
  font-family:var(--f-display); font-size:1.25rem; font-weight:400;
  transition:color var(--t-mid) var(--ease);
}
.acc__btn:hover{ color:var(--champagne-txt); }
.acc__icon{ position:relative; width:14px; height:14px; flex:none; }
.acc__icon::before, .acc__icon::after{
  content:""; position:absolute; inset:50% 0 auto 0;
  height:1px; background:currentColor;
  transition:transform var(--t-mid) var(--ease), opacity var(--t-mid) var(--ease);
}
.acc__icon::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon::after{ transform:rotate(0); opacity:0; }
.acc__panel{
  overflow:hidden;
  height:0;
  transition:height var(--t-mid) var(--ease);
}
.acc__panel p{ color:var(--c-muted); padding-bottom:var(--s-3); margin:0; max-width:62ch; }

/* ---------- 17. CTA FINAL + FOOTER ---------- */
.final{
  background:var(--encre); color:var(--ivoire);
  padding-block:clamp(72px,11vw,var(--s-8));
}
.final__title{
  font-size:var(--fs-h2);
  margin-bottom:var(--s-4);
}
.final__title em{ color:var(--champagne); }

.footer{ background:var(--encre-soft); color:rgba(247,244,239,.75); padding-block:var(--s-6) var(--s-3); }
.footer__grid{
  display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1fr;
  gap:var(--s-4);
  padding-bottom:var(--s-5);
  border-bottom:1px solid rgba(247,244,239,.14);
}
.footer__heading{
  display:block;
  margin:0 0 var(--s-2);
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  color:var(--champagne);
  font-style:normal;
}
.footer .brand__name{ color:var(--ivoire); }
.footer__sub{
  font-size:var(--fs-micro); letter-spacing:.24em; text-transform:uppercase;
  margin-top:8px;
}
.footer__links{ display:flex; flex-direction:column; gap:10px; }
.footer a{ text-decoration:none; transition:color var(--t-mid) var(--ease); }
.footer a:hover{ color:var(--champagne); }
.footer__contact{ font-style:normal; line-height:2; }

.footer__hours{ font-size:.86rem; line-height:1.9; }
/* Pas de largeur plafonnée : la ligne occupe toute sa colonne. Un cap fixe
   laissait un vide à droite dès que la colonne s'élargissait — visible surtout
   sur mobile, où le footer passe sur une seule colonne. */
.footer__hours li{ display:flex; justify-content:space-between; gap:var(--s-2); }
.footer__hours li span:last-child{ color:rgba(247,244,239,.55); }
.footer__note{
  margin:var(--s-2) 0 0;
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--champagne);
}
.footer__bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s-2);
  padding-top:var(--s-3);
  font-size:.76rem; color:rgba(247,244,239,.55);
}
.footer__bottom p{ margin:0; }
.footer__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2); }
.footer__legal a{ text-decoration:none; }
.footer__legal li+li::before{ content:"·"; margin-right:var(--s-2); opacity:.5; }

/* ---------- 17bis. BOUTON FLOTTANT INSTAGRAM ---------- */
.insta-fab{
  position:fixed;
  right:clamp(16px, 2.5vw, 32px);
  bottom:clamp(16px, 2.5vw, 32px);
  bottom:max(clamp(16px, 2.5vw, 32px), env(safe-area-inset-bottom, 0px));
  z-index:calc(var(--z-header) - 1);

  display:inline-flex; align-items:center; gap:0;
  min-width:56px; height:56px;
  padding:0 16px;
  border-radius:999px;
  background:var(--encre);
  color:var(--ivoire);
  text-decoration:none;
  box-shadow:0 10px 30px -12px rgba(23,20,15,.55);
  overflow:hidden;
  transition:background var(--t-mid) var(--ease),
             gap var(--t-mid) var(--ease),
             transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             opacity var(--t-mid) var(--ease);
}
.insta-fab:hover, .insta-fab:focus-visible{
  background:var(--champagne-txt);
  gap:10px;
  transform:translateY(-2px);
  box-shadow:0 16px 36px -12px rgba(23,20,15,.6);
}
.insta-fab__icon{ width:24px; height:24px; flex:none; }

/* Le libellé se déplie au survol ; il reste lisible par les lecteurs d'écran. */
.insta-fab__label{
  max-width:0;
  opacity:0;
  white-space:nowrap;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  transition:max-width var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.insta-fab:hover .insta-fab__label,
.insta-fab:focus-visible .insta-fab__label{ max-width:120px; opacity:1; }

/* Masqué quand le menu mobile plein écran est ouvert */
body.nav-open .insta-fab{ opacity:0; pointer-events:none; }

@media (prefers-reduced-motion: reduce){
  .insta-fab:hover, .insta-fab:focus-visible{ transform:none; }
}

/* ---------- 17ter. PAGES LÉGALES ---------- */
.legal-hero{
  background:var(--sable);
  padding-block:clamp(88px,12vw,150px) clamp(40px,6vw,64px);
  border-bottom:1px solid var(--c-border);
}
.legal-hero h1{ font-size:var(--fs-h2); }
.legal-hero .eyebrow{ margin-bottom:var(--s-2); }
.legal-hero__date{
  margin:var(--s-2) 0 0;
  font-size:.8rem; color:var(--c-muted);
}

.legal{ padding-block:clamp(48px,7vw,var(--s-7)); }
.legal__body{ max-width:74ch; }
.legal__body h2{
  font-size:clamp(1.5rem,2.4vw,2rem);
  margin:var(--s-6) 0 var(--s-2);
  padding-top:var(--s-3);
  border-top:1px solid var(--c-border);
}
.legal__body h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.legal__body h3{
  font-size:1.25rem;
  margin:var(--s-4) 0 var(--s-1);
}
.legal__body p, .legal__body li{ color:var(--c-muted); }
.legal__body ul{ margin:0 0 var(--s-2); padding-left:1.2em; list-style:disc; }
.legal__body li{ margin-bottom:6px; }
.legal__body a{ color:var(--champagne-txt); }
.legal__body dl{ margin:0 0 var(--s-3); }
.legal__body dl > div{
  display:grid; grid-template-columns:220px 1fr; gap:var(--s-2);
  padding:12px 0; border-bottom:1px solid var(--c-border);
}
.legal__body dt{
  font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase;
  color:var(--c-muted); padding-top:5px;
}
.legal__body dd{ margin:0; }

/* Emplacement à renseigner avant mise en ligne — volontairement voyant. */
.todo{
  background:#FBE4E1; color:#8E1F16;
  padding:2px 8px; border-radius:2px;
  font-family:var(--f-sans); font-size:.82rem; font-weight:400;
  letter-spacing:.02em;
}

.legal-nav{
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  margin-top:var(--s-6); padding-top:var(--s-3);
  border-top:1px solid var(--c-border);
}

@media (max-width:720px){
  .legal__body dl > div{ grid-template-columns:1fr; gap:2px; }
}

/* ============================================================
   18. SYSTÈME D'ANIMATION
   Un seul vocabulaire pour tout le site.

   · .reveal              → apparition par défaut (montée + fondu)
   · [data-reveal="fade"] → fondu seul
   · [data-reveal="clip"] → dévoilement d'image (volet + léger dézoom)
   · [data-reveal="lines"]→ titre ligne par ligne, masquées
   · [data-reveal="rule"] → filet horizontal qui se trace
   · [data-stagger]       → décale l'entrée des enfants
   · [data-parallax]      → dérive lente au défilement

   Règle : on n'anime que `transform`, `opacity` et `clip-path`.
   Jamais width/height/top/left — cela force un recalcul de mise en page.
   ============================================================ */

/* Les états de départ sont tous conditionnés à `.js` : sans JavaScript,
   aucun contenu n'est masqué. C'est la seule protection qui vaille — un
   fichier JS qui ne se charge pas ne doit jamais rendre une page blanche. */
.reveal, [data-reveal]{ --reveal-delay:0ms; }

/* Défaut : montée + fondu */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease-soft) var(--reveal-delay),
             transform var(--t-reveal) var(--ease-soft) var(--reveal-delay);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* Fondu seul — pour les blocs déjà denses */
.js [data-reveal="fade"]{
  opacity:0;
  transition:opacity var(--t-reveal) var(--ease-soft) var(--reveal-delay);
}
.js [data-reveal="fade"].is-in{ opacity:1; }

/* Dévoilement d'image : le volet remonte pendant que le visuel se pose */
.js [data-reveal="clip"]{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.06);
  transition:clip-path var(--t-reveal) var(--ease-soft) var(--reveal-delay),
             transform 1400ms var(--ease-soft) var(--reveal-delay);
}
.js [data-reveal="clip"].is-in{ clip-path:inset(0 0 0 0); transform:none; }

/* Titre ligne par ligne : chaque ligne monte depuis son propre masque */
[data-reveal="lines"] .line{ display:block; overflow:hidden; }
.js [data-reveal="lines"] .line > span{
  display:block;
  font-style:inherit; color:inherit;
  transform:translateY(115%);
  transition:transform 1100ms var(--ease-soft);
  transition-delay:calc(var(--reveal-delay) + var(--i, 0) * 110ms);
}
.js [data-reveal="lines"].is-in .line > span{ transform:none; }

/* Filet qui se trace */
.js [data-reveal="rule"]{
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--t-reveal) var(--ease-soft) var(--reveal-delay);
}
.js [data-reveal="rule"].is-in{ transform:none; }

/* Décalage des enfants — l'indice --i est posé par motion.js */
[data-stagger] > *{ --reveal-delay:calc(var(--i, 0) * var(--stagger-step, 90ms)); }

/* Dérive au défilement — la valeur est écrite par motion.js */
[data-parallax]{ will-change:transform; }

/* Barre de progression de lecture */
.progress{
  position:fixed; top:0; left:0; right:0;
  height:2px;
  z-index:calc(var(--z-header) + 1);
  background:var(--champagne);
  transform:scaleX(0); transform-origin:left center;
  opacity:0;
  transition:opacity var(--t-mid) var(--ease);
  pointer-events:none;
}
.progress.is-visible{ opacity:1; }

/* Zoom lent des visuels de carte au survol */
.card__media, .gallery__item{ overflow:hidden; }
.card__media::before, .gallery__item::before{
  transition:transform 1200ms var(--ease-soft);
}
.card:hover .card__media::before,
.gallery__item:hover::before{ transform:scale(1.06); }

/* Le bandeau défilant s'arrête au survol pour rester lisible */
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- 18bis. SIGNATURE SUR LES VISUELS ----------
   Monogramme apposé en haut à droite de chaque visuel produit.
   L'élément est décoratif : alt vide et aria-hidden, il ne doit
   jamais être annoncé par un lecteur d'écran. */
.card__media, .gallery__item, .hero__media, .ph{ position:relative; }

.signature{
  position:absolute;
  top:clamp(10px, 4%, 20px);
  right:clamp(10px, 4%, 20px);
  width:clamp(30px, 11%, 54px);
  height:auto;
  opacity:.85;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 1px 3px rgba(23,20,15,.45));
  z-index:2;
}
/* Sur le hero, la signature reste discrète face au titre */
.hero__media .signature{ opacity:.6; width:clamp(36px, 5%, 64px); }

/* ---------- 19. RESPONSIVE ---------- */
/* Resserrement de la barre de navigation avant le passage au menu mobile */
@media (max-width:1180px){
  .nav{ gap:var(--s-3); }
  .nav ul{ gap:var(--s-3); }
  .nav ul a{ font-size:.66rem; letter-spacing:.14em; }
  .nav__cta{ --cta-x:20px; }   /* on resserre sans supprimer la respiration */
}

@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr 1fr; row-gap:var(--s-5); }
}

@media (max-width:1000px){
  .nav{
    position:fixed; inset:0;
    z-index:var(--z-overlay);
    flex-direction:column; justify-content:center;
    gap:var(--s-5);
    background:var(--ivoire);
    transform:translateY(-100%);
    transition:transform var(--t-slow) var(--ease);
  }
  .nav.is-open{ transform:none; }
  .nav ul{ flex-direction:column; align-items:center; gap:var(--s-3); }
  .nav ul a{ font-size:.95rem; letter-spacing:.24em; }
  .burger{ display:grid; position:relative; z-index:calc(var(--z-overlay) + 1); }
  body.nav-open{ overflow:hidden; }
}

@media (max-width:720px){
  .grid-2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .field-row{ grid-template-columns:1fr; }
  .infos > div{ grid-template-columns:1fr; gap:2px; }
  .maison__visual .ph--float{ position:static; width:60%; margin:-14% 0 0 auto; }
  .footer__grid{ grid-template-columns:1fr; }
  .hero{ min-height:88svh; }
  .topbar p{ font-size:.58rem; letter-spacing:.14em; }
  /* dégagement pour que le bouton Instagram flottant ne couvre pas le pied de page */
  .footer{ padding-bottom:calc(var(--s-3) + 72px); }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- 20. PRÉFÉRENCES SYSTÈME ---------- */
/* Mouvement réduit — on ne coupe pas tout à l'aveugle.
   La préférence vise le déplacement, pas l'animation en général : un fondu
   ne provoque pas de gêne vestibulaire, un défilement ou une parallaxe si.
   On garde donc les apparitions en fondu, on supprime tout ce qui bouge. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }

  /* Apparitions : le fondu reste, le déplacement et le volet disparaissent */
  .js .reveal,
  .js [data-reveal="fade"],
  .js [data-reveal="clip"],
  .js [data-reveal="rule"]{
    opacity:0;
    transform:none !important;
    clip-path:none !important;
    transition:opacity var(--t-slow) ease var(--reveal-delay) !important;
  }
  .js .reveal.is-in,
  .js [data-reveal="fade"].is-in,
  .js [data-reveal="clip"].is-in,
  .js [data-reveal="rule"].is-in{ opacity:1; }

  /* Les lignes de titre apparaissent ensemble, sans monter */
  .js [data-reveal="lines"]{
    opacity:0;
    transition:opacity var(--t-slow) ease !important;
  }
  .js [data-reveal="lines"].is-in{ opacity:1; }
  .js [data-reveal="lines"] .line{ overflow:visible; }
  .js [data-reveal="lines"] .line > span{ transform:none !important; transition:none !important; }

  /* Boucles et dérives : supprimées */
  .marquee__track{ animation:none; transform:none; }
  .hero__scroll span{ animation:none; opacity:.8; }
  [data-parallax]{ transform:none !important; }
  .progress{ display:none; }

  /* Survols : plus de déplacement ni de zoom, la couleur suffit */
  .card:hover{ transform:none; }
  .card__media::before, .gallery__item::before{ transition:none; }
  .card:hover .card__media::before, .gallery__item:hover::before{ transform:none; }
  .insta-fab:hover, .insta-fab:focus-visible{ transform:none; }
  .insta-fab__label{ transition:none; }

  /* Le bouton du header change d'état sans balayage */
  .nav__cta::before{ transition:none; }
  .nav__cta::after{ display:none; }
}

@media print{
  .header,.topbar,.marquee,.hero__scroll,.burger{ display:none; }
  body{ background:#fff; color:#000; }
}