/* =========================================================
   LEILA MOULATI — Haute Couture
   styles.css — design tokens + layout + responsive
   ========================================================= */

:root{
  /* Neutres luxe */
  --ivoire:    #FBF8F2;
  --creme:     #F4EEE1;
  --champagne: #E8DCC6;
  --noir:      #100C0B;

  /* Signature */
  --or:        #C9A227;
  --or-clair:  #E7CB7A;
  --or-pale:   #F0E3BE;

  /* Tons bijou */
  --vin:       #5A1024;
  --emeraude:  #14624F;
  --turquoise: #1F9E8F;
  --bleu-roi:  #1C2C7A;
  --petrole:   #0E6E78;
  --terre:     #B14B36;

  /* typographie */
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* layout */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 1400px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--ivoire);
  color:var(--noir);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }

/* lenis */
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

::selection{ background:var(--or); color:var(--noir); }

/* ---------- typography helpers ---------- */
.eyebrow,.section-kicker,.brand__base,.loader__base{
  font-size:clamp(.62rem,1.2vw,.72rem);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:400;
}
.section-kicker{ color:var(--or); margin-bottom:1rem; }
.section-kicker.center,.center{ text-align:center; }

.section-title{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.2rem,5.5vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.01em;
}
.section-lede{
  max-width:46ch;
  margin-top:1.4rem;
  font-size:clamp(1rem,1.6vw,1.15rem);
  color:#3a3330;
}

/* ---------- layout primitives ---------- */
.section{
  padding-block:clamp(4.5rem,10vw,9rem);
  padding-inline:var(--pad);
  max-width:var(--maxw);
  margin-inline:auto;
}
.section-head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--sans);
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.22em;
  padding:1.05em 2.1em;
  border-radius:2px;
  transition:color .5s var(--ease), background-color .5s var(--ease), border-color .5s var(--ease);
  overflow:hidden;
  isolation:isolate;
  white-space:nowrap;
}
.btn--line{
  border:1px solid var(--or);
  color:var(--noir);
  background:transparent;
}
.btn--line::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--or); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.btn--line:hover{ color:var(--noir); }
.btn--line:hover::before{ transform:scaleX(1); }

.btn--fill{
  background:var(--noir);
  color:var(--ivoire);
  border:1px solid var(--noir);
}
.btn--fill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--or); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.btn--fill:hover{ color:var(--noir); border-color:var(--or); }
.btn--fill:hover::before{ transform:scaleY(1); }

.btn--wa{ background:var(--emeraude); border-color:var(--emeraude); color:#fff; }
.btn--wa:hover{ color:#fff; }
.btn--wa::before{ background:var(--turquoise); }

.btn--ig{ border-color:var(--noir); color:var(--noir); }
.btn--ig::before{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.btn--ig:hover{ color:#fff; border-color:transparent; }

/* =========================================================
   LOADER
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem;
  background:var(--noir);
  color:var(--ivoire);
}
.loader__inner{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.loader__khmissa{ width:clamp(78px,16vw,120px); height:auto; }
.loader__word{ text-align:center; opacity:0; transform:translateY(10px); }
.loader__name{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem,6vw,3rem); letter-spacing:.02em; color:var(--or-clair);
}
.loader__base{ display:block; color:var(--champagne); margin-top:.5rem; }
.loader__skip{
  position:absolute; bottom:2.2rem; right:2.2rem;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.25em;
  color:var(--champagne); border-bottom:1px solid transparent; padding-bottom:3px;
  transition:border-color .4s, color .4s;
}
.loader__skip:hover{ color:var(--or-clair); border-color:var(--or-clair); }
body.loaded .loader{ opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; }

/* =========================================================
   KHMISSA SVG (line-art gold)
   ========================================================= */
.khmissa-svg .kh-outline,
.khmissa-svg .kh-detail{
  fill:none; stroke:var(--or); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.khmissa-svg .kh-detail{ stroke-width:1.6; }
.khmissa-svg .kh-dot{ fill:var(--or); stroke:none; }
.loader__khmissa .kh-outline,
.loader__khmissa .kh-detail{ stroke:var(--or-clair); }
.loader__khmissa .kh-dot{ fill:var(--or-clair); }

/* =========================================================
   CURSOR (desktop only — toggled by JS body class)
   ========================================================= */
.cursor,.cursor-trail{ display:none; }
body.has-cursor .cursor,
body.has-cursor .cursor-trail{
  display:block; position:fixed; top:0; left:0; z-index:9998; pointer-events:none;
  border-radius:50%; mix-blend-mode:difference;
}
.cursor{ width:7px; height:7px; background:var(--or-clair); transform:translate(-50%,-50%); }
.cursor-trail{
  width:34px; height:34px; border:1px solid var(--or);
  transform:translate(-50%,-50%);
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s;
}
body.has-cursor.cursor-active .cursor-trail{
  width:54px; height:54px; background:rgba(201,162,39,.08);
}

/* =========================================================
   SCROLL PROGRESS THREAD
   ========================================================= */
.thread-progress{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform:scaleX(0); transform-origin:left; z-index:1000;
  background:linear-gradient(90deg,var(--or),var(--or-clair));
}

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.1rem var(--pad);
  transition:background-color .5s var(--ease), backdrop-filter .5s, box-shadow .5s, padding .5s;
}
.header.scrolled{
  background:rgba(244,238,225,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(201,162,39,.18);
  padding-block:.7rem;
}

/* navbar : claire au-dessus du hero sombre, foncée une fois scrollée */
.header .brand__name,
.header .nav a,
.header .header__cta{ color:var(--ivoire); transition:color .4s var(--ease), border-color .4s var(--ease); }
.header .brand__base{ color:var(--or-clair); }
.header .header__cta{ border-color:var(--or-clair); }
.header .burger span{ background:var(--ivoire); }

.header.scrolled .brand__name,
.header.scrolled .nav a,
.header.scrolled .header__cta{ color:var(--noir); }
.header.scrolled .brand__base{ color:var(--or); }
.header.scrolled .header__cta{ border-color:var(--or); }
.header.scrolled .burger span{ background:var(--noir); }
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand__mark{ width:34px; height:auto; flex:none; }
.brand__name{
  display:block; font-family:var(--serif); font-weight:600;
  font-size:1.4rem; line-height:1; letter-spacing:.01em;
}
.brand__base{ display:block; color:var(--or); font-size:.5rem; letter-spacing:.2em; margin-top:3px; }

.nav{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); }
.nav a{
  position:relative; font-size:.72rem; text-transform:uppercase; letter-spacing:.2em;
  padding:.3rem 0;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--or); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

.header__cta{ padding:.85em 1.6em; }

.burger{ display:none; width:34px; height:24px; position:relative; }
.burger span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--noir);
  transition:transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:6px; }
.burger span:nth-child(2){ bottom:6px; }
body.menu-open .burger span:nth-child(1){ top:11px; transform:rotate(45deg); }
body.menu-open .burger span:nth-child(2){ bottom:11px; transform:rotate(-45deg); }

/* mobile menu */
.mobile-menu{
  position:fixed; inset:0; z-index:850;
  background:var(--noir); color:var(--ivoire);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2rem;
  clip-path:circle(0% at calc(100% - 2.5rem) 2.5rem);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .mobile-menu{ clip-path:circle(150% at calc(100% - 2.5rem) 2.5rem); pointer-events:auto; }
.mobile-menu nav{ display:flex; flex-direction:column; align-items:center; gap:1.4rem; }
.mobile-menu nav a{
  font-family:var(--serif); font-size:2rem; color:var(--ivoire);
}
.mobile-menu nav a:hover{ color:var(--or-clair); }
.mobile-menu__mark{ width:64px; opacity:.5; position:absolute; bottom:2.5rem; }

/* =========================================================
   IMAGE FRAME + FALLBACK
   ========================================================= */
.img-frame,.look__media{ position:relative; overflow:hidden; background:var(--champagne); }
[data-fallback]{ position:relative; }
[data-fallback].img-missing img{ display:none; }
[data-fallback].img-missing::after{
  content:attr(data-fallback-label);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
  font-family:var(--serif); font-size:1.4rem; color:var(--or-pale);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    var(--fallback-color, var(--vin));
  letter-spacing:.02em;
}
.fb-noir{ --fallback-color:var(--noir); }
.fb-vin{ --fallback-color:var(--vin); }
.fb-emeraude{ --fallback-color:var(--emeraude); }
.fb-bleu-roi{ --fallback-color:var(--bleu-roi); }
.fb-petrole{ --fallback-color:var(--petrole); }
.fb-terre{ --fallback-color:var(--terre); }

/* grain overlay */
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:7rem var(--pad) 4rem;
  overflow:hidden;
}
.hero__media{
  position:absolute; inset:0; z-index:-1;
}
.hero__media .img-frame{ position:absolute; inset:0; }
.hero__media img{
  position:absolute; top:-10%; left:0;
  width:100%; height:120%; object-fit:cover; object-position:center 18%;
}
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(16,12,11,.82) 0%, rgba(16,12,11,.45) 45%, rgba(16,12,11,.15) 100%),
             linear-gradient(0deg, rgba(16,12,11,.5), transparent 40%);
}
.hero__content{ position:relative; max-width:680px; color:var(--ivoire); }
.hero .eyebrow{ color:var(--or-clair); margin-bottom:1.4rem; }
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(2.8rem,8vw,7rem); line-height:.98; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line--em{ font-style:italic; font-weight:500; color:var(--or-clair); }
.hero__sub{
  max-width:42ch; margin-top:1.8rem; font-size:clamp(1rem,1.7vw,1.2rem);
  color:var(--champagne); font-weight:300;
}
.hero__actions{ margin-top:2.4rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hero__actions .btn--line{ color:var(--ivoire); border-color:var(--or-clair); }
.hero__actions .btn--line:hover{ color:var(--noir); }

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  color:var(--champagne); font-size:.6rem; text-transform:uppercase; letter-spacing:.25em;
}
.scroll-cue__line{ width:1px; height:48px; background:linear-gradient(var(--or-clair),transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4 } 50%{ transform:scaleY(1); opacity:1 } }

/* =========================================================
   SEPARATOR THREAD
   ========================================================= */
.separator{ width:100%; max-width:600px; margin:0 auto clamp(2rem,5vw,3.5rem); }
.separator--center{ margin-block:clamp(2.5rem,6vw,4rem); }
.separator svg{ width:100%; height:auto; overflow:visible; }
.thread-path{ fill:none; stroke:var(--or); stroke-width:1.4; stroke-linecap:round; }

/* =========================================================
   MAISON / MANIFESTE
   ========================================================= */
.maison{ text-align:center; max-width:1100px; }
.manifeste{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,3.6vw,2.9rem); line-height:1.28; letter-spacing:-.005em;
}
.manifeste .word{ display:inline-block; }
.maison__sign{
  margin-top:2.2rem; font-style:italic; font-family:var(--serif);
  font-size:1.1rem; color:var(--or);
}

/* =========================================================
   COLLECTIONS / LOOKBOOK (asymmetric editorial grid)
   ========================================================= */
.lookbook{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(.8rem,1.6vw,1.6rem);
}
.look{
  position:relative; grid-column:span 4; cursor:pointer;
  background:var(--champagne);
}
.look--tall{ grid-column:span 4; grid-row:span 2; }
.look--wide{ grid-column:span 4; }
.look__media{ aspect-ratio:3/4; height:100%; }
.look--tall .look__media{ aspect-ratio:3/5.4; }
.look__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1s var(--ease), filter .6s;
}
.look:hover .look__media img{ transform:scale(1.06); }

.look__cap{
  position:absolute; left:0; bottom:0; width:100%;
  padding:1.4rem 1.3rem; color:var(--ivoire);
  background:linear-gradient(0deg, rgba(16,12,11,.78), transparent);
  transform:translateY(8px); opacity:0; transition:transform .5s var(--ease), opacity .5s;
}
.look:hover .look__cap,.look:focus-within .look__cap{ transform:translateY(0); opacity:1; }
.look__cat{ display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.24em; color:var(--or-clair); }
.look__name{
  display:block; font-family:var(--serif); font-size:1.5rem; margin-top:.2rem;
  position:relative; width:max-content; max-width:100%;
}
.look__name::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--or-clair); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease) .1s;
}
.look:hover .look__name::after{ transform:scaleX(1); }

.look__media::before{
  content:"Voir la pièce"; position:absolute; z-index:2; top:1.2rem; right:1.2rem;
  font-size:.58rem; text-transform:uppercase; letter-spacing:.2em; color:var(--noir);
  background:var(--or-pale); padding:.5em .9em; border-radius:2px;
  opacity:0; transform:translateY(-6px); transition:opacity .4s, transform .4s;
}
.look:hover .look__media::before{ opacity:1; transform:translateY(0); }

/* =========================================================
   ATELIER / SAVOIR-FAIRE
   ========================================================= */
.atelier{ background:var(--noir); color:var(--ivoire); max-width:none; }
.atelier .section-title{ color:var(--ivoire); }
.atelier .section-lede{ color:var(--champagne); }
.atelier__intro{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,4rem); }
.atelier__track{
  max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,2rem);
}
.step{
  border-top:1px solid rgba(201,162,39,.35); padding-top:1.6rem;
  position:relative;
}
.step__num{ font-family:var(--serif); font-size:2.4rem; color:var(--or); display:block; line-height:1; }
.step__title{ font-family:var(--serif); font-weight:600; font-size:1.7rem; margin:.8rem 0 .6rem; }
.step p{ color:var(--champagne); font-size:.95rem; }
.atelier .separator .thread-path{ stroke:var(--or-clair); }

/* =========================================================
   SUR MESURE
   ========================================================= */
.surmesure{ background:var(--creme); max-width:none; }
.surmesure__head{ max-width:var(--maxw); margin:0 auto clamp(2.5rem,5vw,3.5rem); text-align:center; }
.surmesure__head .section-lede{ margin-inline:auto; }
.config{ max-width:860px; margin-inline:auto; }
.config__group{ border:none; margin-bottom:2.4rem; }
.config__group legend{
  font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--or);
  margin-bottom:1rem;
}
.chips{ display:flex; flex-wrap:wrap; gap:.7rem; }
.chip{
  position:relative; border:1px solid rgba(16,12,11,.2);
  padding:.85em 1.4em; border-radius:2px;
  font-size:.74rem; text-transform:uppercase; letter-spacing:.16em;
  display:inline-flex; align-items:center; gap:.6em;
  transition:border-color .4s, background-color .4s, color .4s;
}
.chip[style*="--swatch"]::before{
  content:""; width:11px; height:11px; border-radius:50%;
  background:var(--swatch); outline:1px solid rgba(255,255,255,.4); outline-offset:-2px;
}
.chip:hover{ border-color:var(--or); }
.chip.active{ background:var(--noir); color:var(--ivoire); border-color:var(--noir); }
.config__note{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(16,12,11,.25);
  padding:.9em .2em; font-family:var(--sans); font-size:1rem; color:var(--noir);
}
.config__note:focus{ outline:none; border-color:var(--or); }
.config__note::placeholder{ color:#9a9088; }

.config__summary{
  font-family:var(--serif); font-style:italic; font-size:1.2rem; color:#3a3330;
  text-align:center; margin:1.5rem 0 2rem; min-height:1.6em;
}
.config__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */
.temoins{ background:var(--vin); color:var(--ivoire); max-width:none; overflow:hidden; }
.temoins .section-kicker{ color:var(--or-clair); }
.temoins__viewport{ max-width:840px; margin:2.5rem auto 0; overflow:hidden; }
.temoins__track{ display:flex; transition:transform .8s var(--ease); }
.temoin{
  flex:0 0 100%; text-align:center; padding:0 1rem;
}
.temoin p{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.4rem,3.2vw,2.2rem); line-height:1.35;
}
.temoin cite{
  display:block; margin-top:1.6rem; font-style:normal; font-family:var(--sans);
  font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--or-clair);
}
.temoins__dots{ display:flex; gap:.6rem; justify-content:center; margin-top:2.4rem; }
.temoins__dots button{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3);
  transition:background-color .4s, transform .4s;
}
.temoins__dots button.active{ background:var(--or-clair); transform:scale(1.3); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  position:relative; background:var(--noir); color:var(--champagne);
  padding:clamp(4rem,8vw,7rem) var(--pad) 2rem; overflow:hidden;
}
.footer__grain{ opacity:.35; }
.footer__watermark{
  position:absolute; right:-3%; bottom:-8%; width:min(46vw,520px);
  opacity:.06; pointer-events:none;
}
.footer__inner{
  position:relative; max-width:var(--maxw); margin-inline:auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
}
.footer__mark{ width:48px; margin-bottom:1rem; }
.footer__name{ font-family:var(--serif); font-size:1.8rem; color:var(--ivoire); }
.footer__base{ font-size:.58rem; text-transform:uppercase; letter-spacing:.22em; color:var(--or); margin-top:.3rem; }
.footer__col h3{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.22em; color:var(--or-clair);
  margin-bottom:1.1rem; font-weight:500;
}
.footer__col p{ font-size:.92rem; margin-bottom:.5rem; }
.footer__col a{ display:block; font-size:.92rem; margin-bottom:.5rem; width:max-content; position:relative; }
.footer__col a::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--or); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.footer__col a:hover::after{ transform:scaleX(1); }
.footer__bottom{
  position:relative; max-width:var(--maxw); margin:clamp(3rem,6vw,5rem) auto 0;
  padding-top:1.5rem; border-top:1px solid rgba(201,162,39,.2);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.18em; color:#8a7f72;
}

/* =========================================================
   WHATSAPP FLOAT
   ========================================================= */
.wa-float{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(1rem,3vw,2rem); z-index:800;
  width:56px; height:56px; border-radius:50%;
  background:var(--emeraude); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(20,98,79,.4);
  opacity:0; transform:scale(.6) translateY(20px); pointer-events:none;
  transition:transform .5s var(--ease), opacity .5s, background-color .4s;
}
.wa-float.show{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.wa-float:hover{ background:var(--turquoise); }
.wa-float svg{ width:30px; height:30px; }

/* =========================================================
   INSTAGRAM FLOAT
   ========================================================= */
.ig-float{
  position:fixed; right:clamp(1rem,3vw,2rem); bottom:clamp(4.6rem,9vw,5.6rem); z-index:800;
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fdf497,#fdf497 10%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(214,36,159,.35);
  opacity:0; transform:scale(.6) translateY(20px); pointer-events:none;
  transition:transform .5s var(--ease), opacity .5s, filter .4s;
}
.ig-float.show{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }
.ig-float:hover{ filter:brightness(1.15); }
.ig-float svg{ width:30px; height:30px; }

/* =========================================================
   MODAL
   ========================================================= */
.modal{
  position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.modal.open{ opacity:1; visibility:visible; }
.modal__overlay{ position:absolute; inset:0; background:rgba(16,12,11,.72); backdrop-filter:blur(6px); }
.modal__panel{
  position:relative; z-index:2; background:var(--ivoire);
  width:min(960px,100%); max-height:90vh; overflow:hidden;
  display:grid; grid-template-columns:1fr 1fr;
  transform:translateY(28px) scale(.98); opacity:0;
  transition:transform .6s var(--ease), opacity .6s;
  border-radius:2px;
}
.modal.open .modal__panel{ transform:none; opacity:1; }
.modal__media{ position:relative; background:var(--champagne); min-height:340px; }
.modal__img{
  position:absolute; inset:0; background-size:cover; background-position:center top;
}
.modal__img[data-bg]{ background-image:var(--bg); }
.modal__body{
  padding:clamp(1.6rem,3vw,2.8rem); overflow-y:auto;
  display:flex; flex-direction:column;
}
.modal__tag{
  align-self:flex-start; font-size:.58rem; text-transform:uppercase; letter-spacing:.2em;
  color:var(--noir); background:var(--or-pale); padding:.5em .9em; border-radius:2px;
}
.modal__cat{ margin-top:1.2rem; font-size:.66rem; text-transform:uppercase; letter-spacing:.24em; color:var(--or); }
.modal__name{ font-family:var(--serif); font-weight:600; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.05; margin-top:.3rem; }
.modal__desc{ margin-top:1.2rem; color:#3a3330; font-size:1.02rem; }
.modal__meta{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.6rem; }
.modal__meta li{ position:relative; padding-left:1.4rem; font-size:.9rem; color:#4a423e; }
.modal__meta li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--or); border-radius:50%; }
.modal__actions{ margin-top:auto; padding-top:1.8rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.modal__close{
  position:absolute; top:1rem; right:1rem; z-index:5;
  width:42px; height:42px; border-radius:50%;
  background:var(--ivoire); color:var(--noir); font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.18); transition:transform .4s, background-color .4s, color .4s;
}
.modal__close:hover{ transform:rotate(90deg); background:var(--noir); color:var(--ivoire); }

/* =========================================================
   REVEAL ANIMATION STATES (JS adds .is-in)
   ========================================================= */
[data-reveal],[data-reveal-line] .inner{ will-change:transform,opacity; }
[data-reveal]{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }

.line .inner{ display:block; transform:translateY(110%); transition:transform 1s var(--ease); }
[data-reveal-line].is-in .inner{ transform:none; }

.manifeste .word{ opacity:.12; transition:opacity .6s var(--ease); }
.manifeste.is-in .word{ opacity:1; }

/* --- no-JS fallback : tout reste visible si le JS ne s'exécute pas --- */
html:not(.js) .loader{ display:none !important; }
html:not(.js) [data-reveal],
html:not(.js) [data-reveal-line] .inner,
html:not(.js) .line .inner{ opacity:1 !important; transform:none !important; }
html:not(.js) .manifeste .word{ opacity:1 !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .nav,.header__cta{ display:none; }
  .burger{ display:block; }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2rem; }
  .footer__brand{ grid-column:1/-1; }
}
@media (max-width:860px){
  .atelier__track{ grid-template-columns:1fr 1fr; gap:2rem 1.5rem; }
  .modal__panel{ grid-template-columns:1fr; max-height:92vh; }
  .modal__media{ min-height:46vh; }
}
@media (max-width:680px){
  .lookbook{ grid-template-columns:repeat(2,1fr); }
  .look,.look--tall,.look--wide{ grid-column:span 1; grid-row:auto; }
  .look--tall .look__media{ aspect-ratio:3/4; }
  .look__cap{ opacity:1; transform:none; }
  .hero{ padding-top:6rem; }
}
@media (max-width:480px){
  .atelier__track{ grid-template-columns:1fr; }
  .footer__inner{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; gap:.4rem; }
  .hero__actions .btn{ flex:1 1 auto; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal],[data-reveal-line] .inner,.line .inner{ opacity:1 !important; transform:none !important; }
  .manifeste .word{ opacity:1 !important; }
  .loader{ display:none !important; }
  .scroll-cue__line{ animation:none; }
}