/* ============================================================
   MAISON 31 — shared design system
   Used by every page. Edit here to change the whole site.
   ============================================================ */
/* Florian accent font — swap in the LICENSED file here to activate it.
   (The demo file carries a baked-in "DEMO" watermark, so until the
   purchased font is provided, --script falls back to Playfair italic.) */
@font-face{
  font-family:'Florian';
  src:url('../fonts/florian-regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --cream:#f2ebe1;
  --cream-deep:#e7ddc9;
  --ink:#182338;
  --ink-soft:#3a4a63;
  --gold:#b6924f;
  --gold-soft:#d8c7a0;

  --ete:#d9662f;
  --velours:#8a5a30;
  --bahia:#b8546a;
  --cedre:#2c5748;
  --nuit:#1c2c4d;
  --remparts:#a17738;

  --serif:'Playfair Display', serif;
  --sans:'Montserrat', sans-serif;
  /* --script:'Florian','Playfair Display',serif;  ← use this once licensed Florian is installed */
  --script:'Playfair Display', serif;

  /* semantic surfaces (theme-aware) */
  --bg:#f2ebe1;        /* page background */
  --bg-alt:#e7ddc9;    /* alternate bands */
  --card:#fbf7f0;      /* cards / panels */
  --text:#182338;      /* body text */
  --text-soft:#3a4a63; /* secondary text */
  --line:rgba(24,35,56,.12);
}

/* ---------- NIGHT MODE ---------- */
:root[data-theme="dark"]{
  --bg:#12151c;
  --bg-alt:#191d26;
  --card:#1b202b;
  --text:#efe8da;
  --text-soft:#aeb6c4;
  --line:rgba(242,235,225,.14);
  /* remap the light-only tokens so existing rules follow the theme */
  --cream-deep:#191d26;
  --ink-soft:#aeb6c4;
  --gold-soft:#cbb27e;
}
:root[data-theme="dark"] body{background:var(--bg); color:var(--text);}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-weight:300; line-height:1.6;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
  transition:background .4s ease, color .4s ease;
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important; transition:none!important;} }
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.05;}
a{color:inherit; text-decoration:none;}
img,svg,video{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
section{padding:min(15vh,150px) 6vw;}
.wrap{max-width:1200px; margin:0 auto;}
.narrow{max-width:760px; margin:0 auto;}

.eyebrow{font-family:var(--sans); font-size:0.7rem; letter-spacing:0.34em; text-transform:uppercase; font-weight:500;}
.script{font-family:var(--script); font-weight:400; font-style:italic;}
.brandmark .word, .foot-brand .word{font-style:italic;}

/* buttons */
.btn-line{display:inline-flex; align-items:center; gap:12px; font-size:0.72rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--text);}
.btn-line .arrow{width:34px; height:1px; background:var(--gold); transition:width .3s ease;}
.btn-line:hover .arrow{width:52px;}
.btn-solid{display:inline-flex; align-items:center; gap:12px; background:var(--gold); color:var(--ink); padding:16px 34px; border-radius:999px; font-size:0.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; transition:transform .3s ease, background .3s ease;}
.btn-solid:hover{transform:translateY(-3px); background:var(--gold-soft);}
.btn-ink{background:var(--ink); color:var(--cream);}
.btn-ink:hover{background:var(--gold);}

/* reveal */
.reveal{opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1);}
.reveal.in{opacity:1; transform:none;}

/* ---------- NAV ---------- */
/* centered logo, links split into two sides */
.topnav{position:fixed; top:0; left:0; right:0; z-index:80; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:18px 6vw; color:var(--cream); transition:background .45s ease, color .45s ease, padding .45s ease, box-shadow .45s ease;}
.topnav.solid, .topnav.scrolled{background:var(--bg); color:var(--text); padding:12px 6vw; box-shadow:0 1px 0 rgba(24,35,56,.08);}
.nav-side{display:flex; align-items:center;}
.nav-left{justify-content:flex-start;}
.nav-right{justify-content:flex-end; gap:28px;}
.brandmark{justify-self:center; display:flex; align-items:center;}
.nav-group{display:flex; align-items:center; gap:30px; font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; font-weight:400;}
.nav-group a, .nav-drawer a{opacity:.9; transition:opacity .25s; position:relative;}
.nav-group a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:currentColor; transition:width .3s ease;}
.nav-group a:hover, .nav-group a.active{opacity:1;} .nav-group a:hover::after, .nav-group a.active::after{width:100%;}
.burger{display:none; flex-direction:column; gap:5px; width:26px;}
.burger span{height:1.5px; background:currentColor; transition:.3s;}
/* fullscreen mobile drawer */
.nav-drawer{position:fixed; inset:0; background:var(--ink); color:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; transform:translateY(-100%); transition:transform .5s cubic-bezier(.2,.7,.3,1); z-index:79;}
.nav-drawer.open{transform:none;}
.nav-drawer a{font-size:1.05rem; letter-spacing:.2em; text-transform:uppercase;}
@media(max-width:1000px){
  .nav-group, .nav-right .nav-ctl{display:none;}
  .burger{display:flex; z-index:81;}
  .topnav{grid-template-columns:1fr auto 1fr;}
}

/* ---------- INTERIOR PAGE HERO ---------- */
.page-hero{position:relative; min-height:64vh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 6vw 8vh; color:var(--cream); isolation:isolate; overflow:hidden;}
.page-hero .bg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;}
.page-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,22,38,.34), rgba(12,16,26,.8));}
.page-hero .eyebrow{color:var(--gold-soft); margin-bottom:18px;}
.page-hero h1{font-size:clamp(2.8rem,7vw,6rem); letter-spacing:.01em;}
.page-hero .lede{margin-top:20px; max-width:52ch; font-family:var(--serif); font-style:italic; font-size:1.15rem; color:#e7e1d4;}

/* ---------- EDITORIAL (articles) ---------- */
.editorial{padding-top:110px;}
.editorial .eyebrow{color:var(--gold); display:block; margin-bottom:16px; text-align:center;}
.editorial h2{font-size:clamp(2rem,3.6vw,2.9rem); margin:2.4em 0 .7em;}
.editorial h2:first-of-type{margin-top:1em;}
.editorial p{font-size:1.06rem; line-height:1.95; color:var(--ink-soft); margin-bottom:1.3em;}
.editorial p strong{color:var(--text); font-weight:500;}
.editorial .dropcap::first-letter{font-family:var(--serif); font-size:3.6em; float:left; line-height:.8; padding:6px 14px 0 0; color:var(--gold);}
.editorial figure{margin:3em 0;}
.editorial figure img{width:100%; border-radius:6px;}
.editorial figcaption{margin-top:12px; font-size:0.8rem; letter-spacing:.06em; color:var(--ink-soft); text-align:center;}
.pullquote{font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.35; color:var(--text); text-align:center; margin:1.6em auto; max-width:20ch; font-style:italic;}
.pullquote .script{color:var(--gold);}

/* two-column split (image + text) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:6vw; align-items:center;}
.split.rev .split-txt{order:2;}
.split-img{position:relative; aspect-ratio:4/5; border-radius:999px 999px 8px 8px; overflow:hidden; box-shadow:0 40px 80px -34px rgba(24,35,56,.45);}
.split-img img{width:100%; height:100%; object-fit:cover; object-position:center;}
.split .eyebrow{color:var(--gold); display:block; margin-bottom:14px;}
.split h2{font-size:clamp(2rem,3.6vw,2.9rem); margin-bottom:20px;}
.split p{color:var(--ink-soft); line-height:1.9; margin-bottom:1.2em;}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:2.2rem;} .split.rev .split-txt{order:0;} .split-img{aspect-ratio:4/5; max-width:400px; margin:0 auto; border-radius:999px 999px 8px 8px;}}

.sec-intro{text-align:center; max-width:660px; margin:0 auto 68px;}
.sec-intro .eyebrow{color:var(--gold); display:block; margin-bottom:16px;}
.sec-intro h2{font-size:clamp(2.2rem,4.2vw,3.3rem);}
.sec-intro p{color:var(--ink-soft); margin-top:16px;}

/* ---------- COLLECTION ARCADE ---------- */
.arcade{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
.arch-card{position:relative; aspect-ratio:3/4.7; border-radius:200px 200px 6px 6px; padding:26px 16px 22px; display:flex; flex-direction:column; justify-content:flex-end; color:var(--cream); overflow:hidden; isolation:isolate; transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.arch-card:hover{transform:translateY(-12px);}
.arch-card .bgimg{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .8s ease;}
.arch-card:hover .bgimg{transform:scale(1.06);}
.arch-card::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.05) 40%, rgba(0,0,0,.7));}
.arch-card .tint{position:absolute; inset:0; z-index:-1; opacity:.34; mix-blend-mode:multiply;}
.arch-card .fname{font-family:var(--serif); font-size:1.24rem; line-height:1.14; margin-bottom:5px;}
.arch-card .ffam{font-size:0.58rem; letter-spacing:.14em; text-transform:uppercase; opacity:.92;}
@media(max-width:900px){.arcade{grid-template-columns:repeat(3,1fr); gap:14px;}}
@media(max-width:520px){.arcade{grid-template-columns:repeat(2,1fr);}}

/* ---------- PARFUM PAGE ---------- */
.parfum-hero{display:grid; grid-template-columns:1fr .9fr; min-height:92vh; padding-top:70px;}
.parfum-visual{position:relative; background-size:cover; background-position:center; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.parfum-visual .tint{position:absolute; inset:0; mix-blend-mode:multiply; opacity:.5;}
.parfum-visual::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.4));}
.parfum-visual .frame{position:relative; z-index:2; width:56%; aspect-ratio:3/4.4; border-radius:400px 400px 6px 6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.35); box-shadow:0 30px 60px -20px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(1px);}
.parfum-visual .frame .glyph{font-size:3rem; color:rgba(255,255,255,.95); filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));}
.parfum-body{background:var(--card); padding:min(12vh,120px) 5vw; display:flex; flex-direction:column; justify-content:center;}
.parfum-body .eyebrow{color:var(--accent);}
.parfum-body h1, .parfum-body h2{font-size:clamp(2.6rem,4.6vw,4rem); margin:12px 0 6px; color:var(--text);}
.parfum-body .tagline{font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--ink-soft); margin-bottom:26px;}
.fam-tag{display:inline-block; font-size:0.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:8px 18px; margin-bottom:28px; align-self:flex-start;}
.parfum-body .desc{font-size:1.03rem; line-height:1.9; color:var(--ink-soft); max-width:48ch; margin-bottom:30px;}
.parfum-body .desc em{color:var(--text); font-style:normal; font-weight:500;}
.pyramid{display:flex; gap:36px; flex-wrap:wrap; margin-bottom:34px;}
.pyramid .col-label{font-size:0.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; display:block;}
.pyramid ul{list-style:none;}
.pyramid li{font-size:0.94rem; line-height:1.9; color:var(--ink-soft); padding-left:14px; position:relative;}
.pyramid li::before{content:"·"; position:absolute; left:0; color:var(--accent);}
.parfum-buy{display:flex; align-items:center; gap:26px; flex-wrap:wrap;}
.parfum-price{font-family:var(--serif); font-size:1.5rem;}
@media(max-width:900px){.parfum-hero{grid-template-columns:1fr;} .parfum-visual{min-height:52vh;}}
/* home: stacked per-perfume sections (same design, no page-top padding) */
.pf-sec{display:grid; grid-template-columns:1fr .85fr; min-height:86vh; align-items:stretch; scroll-margin-top:80px;}
@media(max-width:900px){.pf-sec{grid-template-columns:1fr;} .pf-sec .parfum-visual{min-height:52vh;}}

/* ---------- BOUTIQUE ---------- */
.product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:920px){.product-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.product-grid{grid-template-columns:1fr;}}
.product-card{background:var(--card); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 18px 40px -26px rgba(24,35,56,.4); transition:transform .4s ease;}
.product-card:hover{transform:translateY(-6px);}
.product-photo{position:relative; aspect-ratio:4/3.2; background-size:cover; background-position:center;}
.product-photo .tint{position:absolute; inset:0; opacity:.28; mix-blend-mode:multiply;}
.product-body{padding:24px; display:flex; flex-direction:column; gap:6px; flex:1;}
.product-fam{font-size:0.58rem; letter-spacing:.16em; text-transform:uppercase;}
.product-name{font-family:var(--serif); font-size:1.5rem;}
.product-vol{font-size:0.82rem; color:var(--ink-soft); margin-bottom:8px;}
.product-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px;}
.product-price{font-family:var(--serif); font-size:1.2rem;}
.add-btn{font-size:0.64rem; letter-spacing:.14em; text-transform:uppercase; background:var(--ink); color:var(--cream); padding:11px 16px; border-radius:999px; transition:background .25s;}
.add-btn:hover{background:var(--gold);}

/* ---------- JOURNAL ---------- */
.journal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
@media(max-width:920px){.journal-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.journal-grid{grid-template-columns:1fr;}}
.article-card{display:flex; flex-direction:column;}
.article-card .thumb{aspect-ratio:4/3; border-radius:6px; overflow:hidden; margin-bottom:20px;}
.article-card .thumb .img{width:100%; height:100%; background-size:cover; background-position:center; transition:transform .6s ease;}
.article-card:hover .thumb .img{transform:scale(1.05);}
.article-card .meta{font-size:0.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:10px;}
.article-card h3{font-size:1.5rem; margin-bottom:10px;}
.article-card p{color:var(--ink-soft); font-size:0.95rem; line-height:1.75;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:6vw;}
.contact-block{margin-bottom:30px;}
.contact-block .role{font-size:0.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:8px;}
.contact-block .name{font-family:var(--serif); font-size:1.5rem; margin-bottom:8px;}
.contact-block a{display:block; color:var(--ink-soft);}
.contact-block a:hover{color:var(--gold);}
.contact-form{display:flex; flex-direction:column; gap:18px;}
.contact-form input, .contact-form textarea{font-family:var(--sans); font-size:0.95rem; padding:14px 16px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text);}
.contact-form textarea{min-height:140px; resize:vertical;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr; gap:2.6rem;}}

/* trio gateway cards */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.trio-card{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:40px 34px; display:flex; flex-direction:column; min-height:320px; transition:transform .4s ease, box-shadow .4s ease;}
.trio-card:hover{transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(24,35,56,.4);}
.trio-card .num{font-family:var(--serif); color:var(--gold); font-size:1rem; letter-spacing:.1em; margin-bottom:22px;}
.trio-card h3{font-size:1.8rem; margin-bottom:14px;}
.trio-card p{color:var(--ink-soft); font-size:0.94rem; line-height:1.8; flex:1;}
.trio-card .btn-line{margin-top:24px;}
@media(max-width:860px){.trio{grid-template-columns:1fr;}}

/* ---------- FOOTER ---------- */
footer.site{background:var(--ink); color:#9aa2b4; padding:80px 6vw 44px;}
.foot-grid{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:5vw; padding-bottom:50px; border-bottom:1px solid rgba(242,235,225,.12);}
.foot-brand .word{font-family:var(--script); font-size:2rem; color:var(--cream); margin-bottom:16px;}
.foot-brand p{font-size:0.92rem; line-height:1.8; max-width:34ch;}
.foot-col h4{font-family:var(--sans); font-size:0.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px; font-weight:600;}
.foot-col a{display:block; font-size:0.92rem; margin-bottom:12px; color:#c3c8d4; transition:color .25s;}
.foot-col a:hover{color:var(--cream);}
.foot-bottom{max-width:1200px; margin:26px auto 0; text-align:center; font-size:0.7rem; letter-spacing:.14em; text-transform:uppercase;}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr; gap:2.4rem;}}

/* ---------- BRAND LOGO (monochrome lion, takes nav text colour) ---------- */
.brandmark .brand-logo{
  height:58px; width:64px; background:currentColor; flex:none; display:block;
  -webkit-mask:url('../logo/maison31-logo.svg') center/contain no-repeat;
  mask:url('../logo/maison31-logo.svg') center/contain no-repeat;
  transition:height .45s ease, width .45s ease;
}
.topnav.scrolled .brandmark .brand-logo, .topnav.solid .brandmark .brand-logo{height:48px; width:52px;}
@media(max-width:900px){ .brandmark .brand-logo{height:46px; width:50px;} }

/* ---------- NAV CONTROLS: night mode + language ---------- */
.nav-ctl{display:flex; align-items:center; gap:16px;}
.theme-btn{width:34px; height:34px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:0.9rem; opacity:.85; transition:opacity .25s, transform .4s ease;}
.theme-btn:hover{opacity:1; transform:rotate(20deg);}
.lang-switch{display:flex; align-items:center; gap:9px; font-size:0.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:500;}
.lang-switch button{opacity:.55; transition:opacity .2s;}
.lang-switch button.active{opacity:1; color:var(--gold);}
.lang-switch .sep{opacity:.3;}
.nav-drawer .nav-ctl{margin-top:10px;}
:root[dir="rtl"] .nav-left{justify-content:flex-end;} :root[dir="rtl"] .nav-right{justify-content:flex-start;}

/* ---------- RTL (Arabic) ---------- */
:root[dir="rtl"] .btn-line .arrow{transform:scaleX(-1);}
:root[dir="rtl"] .btn-solid span, :root[dir="rtl"] .hero-sub, :root[dir="rtl"] .parfum-buy{direction:rtl;}
:root[dir="rtl"] .split.rev .split-txt{order:0;}
:root[dir="rtl"] .editorial .dropcap::first-letter{float:right; padding:6px 0 0 14px;}
:root[dir="rtl"] .foot-grid, :root[dir="rtl"] .contact-grid{direction:rtl;}
:root[dir="rtl"] .pyramid li{padding-left:0; padding-right:14px;}
:root[dir="rtl"] .pyramid li::before{left:auto; right:0;}
:root[dir="rtl"] .arch-card, :root[dir="rtl"] .product-body{text-align:right;}
:root[dir="rtl"] body{font-family:'Segoe UI', Tahoma, var(--sans);}
:root[dir="rtl"] h1, :root[dir="rtl"] h2, :root[dir="rtl"] h3{font-family:'Playfair Display', serif;}