/* Caftan Bladi — caftans & djellabas, vitrine (boutique).
   Palette « or chromé sur graphite » : graphite + os (bone) + un seul chroma,
   le chrome-gold. Toutes les couleurs des vêtements (émeraude, fuchsia, marine,
   kaki, taupe) ne vivent QUE dans les photographies, jamais dans l'interface.
   Archétype : « la vitrine » — un triptyque de silhouettes, meneaux d'or. */

@font-face{font-family:'Playfair Display';src:url(../fonts/playfair.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Playfair Display';src:url(../fonts/playfair-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Jost;src:url(../fonts/jost.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --graphite:#1c1b1f;
  --panneau:#232227;
  --panneau-2:#28272d;
  --os:#ece5d8;
  --os-mat:#b7b0a4;
  --os-3:#8f887d;
  --or:#c6a24a;
  --or-clair:#d8b866;
  --filet:#3a3841;
  --filet-2:#2c2b31;
  --wrap:1180px;
  --pad:clamp(18px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--graphite);color:var(--os);
  font-family:Jost,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:700;margin:0;line-height:1.06}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);position:relative}

/* ── Le meneau d'or : filet vertical + le marqueur de section ───────────── */
.meneau{
  position:absolute;top:0;left:var(--pad);width:0;height:34px;
  border-left:1px solid var(--or);opacity:.85;
}
.meneau::before{
  content:"";position:absolute;top:-2px;left:-2px;width:4px;height:4px;
  border-radius:50%;background:var(--or);
}

/* ── Bandeau ───────────────────────────────────────────────────────────── */
.mast{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:clamp(12px,3vw,32px);
  padding:12px var(--pad);
  background:color-mix(in srgb,var(--graphite) 90%,transparent);
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--filet-2);
}
.brand{
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:22px;letter-spacing:.01em;color:var(--os);
  text-decoration:none;flex:0 0 auto;
}
.mast-nav{display:flex;gap:clamp(10px,2vw,22px);margin-left:auto;flex-wrap:wrap}
.mast-nav a{
  font-size:14.5px;font-weight:500;text-decoration:none;color:var(--os-mat);
  padding:4px 0;border-bottom:1px solid transparent;white-space:nowrap;
}
.mast-nav a:hover,.mast-nav a:focus-visible{color:var(--or-clair);border-bottom-color:var(--or)}

.burger{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:6px;color:var(--os);
}
.burger svg{display:block}

/* ── Action (WhatsApp — seul canal) ────────────────────────────────────── */
.act{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--or);color:var(--graphite);text-decoration:none;
  font-family:Jost,sans-serif;font-weight:500;font-size:15.5px;letter-spacing:.01em;
  padding:12px 22px;border-radius:2px;flex:0 0 auto;
  transition:background .18s ease;
}
.act:hover,.act:focus-visible{background:var(--or-clair)}
.act--sm{font-size:14px;padding:9px 16px}
.act--ghost{
  background:transparent;color:var(--or);border:1px solid var(--or);
}
.act--ghost:hover,.act--ghost:focus-visible{background:transparent;color:var(--or-clair);border-color:var(--or-clair)}
.act svg{flex:0 0 auto}

/* ── Hero « la vitrine » ───────────────────────────────────────────────── */
.hero{padding:clamp(42px,6.5vw,80px) 0 clamp(30px,4vw,52px)}
.hero-tete{max-width:60ch}
.kicker{
  font-family:Jost,sans-serif;font-size:12.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin:0 0 .8em;
}
h1{font-size:clamp(52px,10vw,104px);letter-spacing:-.012em;margin:0 0 .12em;color:var(--os)}
.devise{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(18px,2.3vw,25px);color:var(--os-mat);margin:0 0 1em;
}
.lede{font-size:clamp(16px,1.5vw,18px);color:var(--os-mat);max-width:56ch;margin:0 0 1.5em}
.hero-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:clamp(34px,5vw,60px)}
.note{font-size:13.5px;color:var(--os-3)}

/* Le triptyque : trois silhouettes, meneaux d'or entre elles. */
.vitrine{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;border:1px solid var(--filet);background:var(--panneau);
}
.pane{
  position:relative;margin:0;
  border-left:1px solid var(--or);
}
.pane:first-child{border-left:0}
.pane a{display:block;text-decoration:none;color:inherit}
.pane img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top}
.pane figcaption{
  padding:14px clamp(12px,1.6vw,20px) 16px;
}
.pane-t{
  display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-weight:400;font-size:clamp(15px,1.7vw,19px);color:var(--os);
}
.pane-d{
  display:block;font-family:Jost,sans-serif;font-size:12.5px;line-height:1.5;
  color:var(--os-3);margin-top:3px;
}
.pane .ecrire{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:12.5px;font-weight:500;color:var(--or);
}
.pane a:hover .ecrire,.pane a:focus-visible .ecrire{color:var(--or-clair)}
.pane a:hover .pane-t{color:var(--os)}

/* ── Sections ──────────────────────────────────────────────────────────── */
.sec{padding:clamp(48px,7vw,88px) 0}
.sec--panneau{background:var(--panneau);border-top:1px solid var(--filet-2);border-bottom:1px solid var(--filet-2)}
.sec-h2{
  font-size:clamp(30px,4.4vw,48px);letter-spacing:-.01em;
  padding-top:26px;margin:0 0 .55em;position:relative;color:var(--os);
}
.chapo{font-size:16.5px;color:var(--os-mat);max-width:62ch;margin:0 0 2em}

/* ── Notre vitrine (présentation) ──────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:center}
.duo-txt p{color:var(--os-mat);max-width:56ch}
.duo-txt p strong{color:var(--os);font-weight:500}
.duo .ph img{width:100%;border:1px solid var(--filet)}

.marque{margin-top:1.8em;border-top:1px solid var(--filet);padding-top:1.15em}
.marque-lab{font-size:13.5px;color:var(--os-3);margin:0 0 .8em}
.marque-liste{display:flex;flex-wrap:wrap;gap:8px 10px}
.marque-liste li{
  font-family:'Playfair Display',Georgia,serif;font-size:15.5px;
  border:1px solid var(--filet);border-radius:2px;padding:5px 13px;color:var(--os);
}
.gloss{font-family:Jost,sans-serif;font-style:normal;font-size:12px;color:var(--os-3)}

/* ── Cartels de galerie ────────────────────────────────────────────────── */
.cartel{display:block;margin:11px 0 0;max-width:36ch}
.cartel-t{
  display:block;font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-weight:400;font-size:17px;color:var(--os);
}
.cartel-d{display:block;font-family:Jost,sans-serif;font-size:13px;line-height:1.5;color:var(--os-3);margin-top:3px}
.cartel-lien{
  display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:12.5px;font-weight:500;color:var(--or);text-decoration:none;
}
.cartel-lien:hover,.cartel-lien:focus-visible{color:var(--or-clair)}

/* ── Lookbook ──────────────────────────────────────────────────────────── */
.ph{margin:0}
.ph img{width:100%;border:1px solid var(--filet)}
.paire{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.6vw,48px);
}
.paire .ph img{aspect-ratio:3/4;object-fit:cover;object-position:center top}

.sous-titre{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(20px,2.4vw,26px);color:var(--os);
  margin:clamp(40px,5.5vw,64px) 0 .2em;
}
.sous-note{font-size:14px;color:var(--os-mat);margin:0 0 1.6em;max-width:56ch}

/* ── Détails ───────────────────────────────────────────────────────────── */
.details{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3.4vw,46px);
}
.details .ph img{aspect-ratio:4/5;object-fit:cover;object-position:center}

/* ── Nous écrire ───────────────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.contact-txt p{color:var(--os-mat);max-width:52ch}
.tel-bloc{margin:1.4em 0 1.6em;border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:1.1em 0}
.tel-lab{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--or);margin:0 0 .35em}
.tel-num{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:clamp(26px,3.6vw,38px);color:var(--os);margin:0;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tel-int{font-size:13.5px;color:var(--os-3);margin:.35em 0 0}
.contact-note{font-size:13.5px;color:var(--os-3);font-style:italic}

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied{padding:clamp(38px,5vw,60px) 0 clamp(30px,4vw,46px);border-top:1px solid var(--filet-2)}
.pied .wrap{padding-top:26px}
.pied-nom{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:30px;margin:0 0 .35em;color:var(--os)}
.pied-l{font-size:14px;color:var(--os-3);margin:0 0 .25em}
.pied-devise{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:400;font-size:16px;color:var(--os-mat);margin-top:.55em}

/* ── Apparition ────────────────────────────────────────────────────────── */
.rvl{opacity:0;transform:translateY(12px)}
.rvl.vu{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}

/* ── Adaptatif ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:30px}
  .duo .ph{max-width:460px}
  .look{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .mast{flex-wrap:wrap;row-gap:8px;padding:10px var(--pad)}
  .burger{display:inline-flex}
  .mast-nav{
    order:3;width:100%;margin-left:0;gap:4px 18px;flex-direction:column;
    display:none;padding-top:6px;
  }
  .mast-nav.ouvert{display:flex}
  .mast-nav a{font-size:15px;padding:6px 0}
  h1{font-size:clamp(44px,14vw,66px)}
  .vitrine{grid-template-columns:1fr}
  .pane{border-left:0;border-top:1px solid var(--or)}
  .pane:first-child{border-top:0}
  .pane img{aspect-ratio:4/5}
  .look{grid-template-columns:1fr;gap:26px}
  .look .ph img{aspect-ratio:4/5}
  .details{grid-template-columns:1fr;gap:26px}
  .cartel{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .rvl,.rvl.vu{opacity:1;transform:none;transition:none}
}