/* ═══════════════════════════════════════════════════════════
   REBORN · Atelier de la bougie
   Editorial luxury · FR/AR · Light/Dark
   Design system: warm tallow & ember, with sage accent
═══════════════════════════════════════════════════════════ */

/* ───────── LIGHT (Tallow) ───────── */
:root {
    --bg:           #EFE7DA;
    --bg-2:         #E5D9C6;
    --surface:      #FBF6EE;
    --surface-2:    #F4EBDD;
    --ink:          #2A2018;
    --ink-2:        #4F4032;
    --ink-soft:     #8A7763;
    --line:         rgba(42,32,24,0.12);
    --ember:        #C0682E;
    --ember-deep:   #9E4E20;
    --gold:         #B89055;
    --gold-soft:    #D9BC8A;
    --sage:         #6E7A52;
    --cream:        #FBF6EE;
    --shadow:       rgba(42,32,24,0.14);
    --shadow-deep:  rgba(42,32,24,0.22);
    --glow:         rgba(192,104,46,0.0);
    --hero-veil:    linear-gradient(105deg, rgba(28,20,14,0.66) 0%, rgba(28,20,14,0.30) 45%, rgba(28,20,14,0.10) 100%);
    --grain-op:     0.05;
    --nav-blur:     rgba(251,246,238,0.72);
}

/* ───────── DARK (Ember Night) ───────── */
[data-theme="dark"] {
    --bg:           #14100C;
    --bg-2:         #1C160F;
    --surface:      #1F1812;
    --surface-2:    #271E15;
    --ink:          #F2E7D6;
    --ink-2:        #D8C7B0;
    --ink-soft:     #93826B;
    --line:         rgba(216,199,176,0.14);
    --ember:        #E07B3C;
    --ember-deep:   #C0682E;
    --gold:         #D9BC8A;
    --gold-soft:    #E8D2A8;
    --sage:         #9AA876;
    --cream:        #1F1812;
    --shadow:       rgba(0,0,0,0.55);
    --shadow-deep:  rgba(0,0,0,0.7);
    --glow:         rgba(224,123,60,0.18);
    --hero-veil:    linear-gradient(105deg, rgba(8,5,3,0.82) 0%, rgba(8,5,3,0.45) 45%, rgba(8,5,3,0.20) 100%);
    --grain-op:     0.07;
    --nav-blur:     rgba(20,16,12,0.78);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::selection { background: var(--ember); color: var(--cream); }

html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    line-height: 1.65;
    transition: background 0.6s cubic-bezier(.4,0,.2,1), color 0.6s cubic-bezier(.4,0,.2,1);
    -webkit-font-smoothing: antialiased;
}

/* Arabic */
[dir="rtl"] body { font-family: 'Rubik', sans-serif; }
[dir="rtl"] .serif,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .wordmark { font-family: 'Reem Kufi', sans-serif; }

.serif { font-family: 'Fraunces', serif; }

/* grain */
body::after {
    content:''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
    opacity: var(--grain-op);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
}
[data-theme="dark"] body::after { mix-blend-mode: screen; }

/* custom cursor (desktop) */
.cursor-dot, .cursor-ring { position: fixed; top:0; left:0; pointer-events:none; z-index:10000; border-radius:50%; transform: translate(-50%,-50%); }
.cursor-dot { width:7px; height:7px; background: var(--ember); transition: opacity .3s; }
.cursor-ring { width:38px; height:38px; border:1.5px solid var(--gold); transition: transform .18s ease, width .25s, height .25s, opacity .3s, border-color .25s; }
.cursor-ring.grow { width:64px; height:64px; border-color: var(--ember); background: var(--glow); }
@media (hover: none) { .cursor-dot, .cursor-ring { display:none; } }

/* ─── reveal util ─── */
.reveal { opacity:0; transform: translateY(36px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* ═══════════ MARQUEE TOPBAR ═══════════ */
.marquee {
    background: var(--ink);
    color: var(--bg);
    overflow: hidden; white-space: nowrap;
    font-size: .74rem; letter-spacing: .28em; text-transform: uppercase;
    padding: .62rem 0; font-weight: 500;
}
.marquee span { display:inline-block; padding-inline-end: 3rem; animation: slide 26s linear infinite; }
[data-theme="dark"] .marquee { background: var(--gold); color:#14100C; }
@keyframes slide { from { transform: translateX(0);} to { transform: translateX(-50%);} }
[dir="rtl"] .marquee span { animation-direction: reverse; }

/* ═══════════ HEADER ═══════════ */
.site-head {
    position: sticky; top:0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem clamp(1.2rem, 4vw, 3.4rem);
    background: var(--nav-blur);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--line);
    transition: background .6s, border-color .6s;
}
.brand { display:flex; align-items:center; gap:.85rem; text-decoration:none; }
.flame {
    width: 42px; height: 42px; position: relative; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
}
.flame svg { width:100%; height:100%; overflow: visible; }
.flame .fl-body { transform-origin: 50% 100%; animation: flicker 2.4s ease-in-out infinite alternate; }
@keyframes flicker {
    0% { transform: scaleY(1) scaleX(1) rotate(-1deg); opacity:1; }
    35% { transform: scaleY(.94) scaleX(1.04) rotate(1.5deg); opacity:.92; }
    60% { transform: scaleY(1.05) scaleX(.97) rotate(-1deg); opacity:1; }
    100% { transform: scaleY(.97) scaleX(1.02) rotate(1deg); opacity:.96; }
}
.wordmark {
    font-family: 'Fraunces', serif; font-weight: 500;
    font-size: 1.62rem; letter-spacing: .42em; color: var(--ink);
    line-height:1; padding-inline-start:.42em;
}
.wordmark b { color: var(--ember); font-weight:500; }

.head-tools { display:flex; align-items:center; gap:.55rem; }
.pill {
    height: 42px; min-width:42px; padding:0 .55rem;
    border:1px solid var(--line); border-radius: 100px;
    background: transparent; color: var(--ink-2);
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    cursor:pointer; font-size:.92rem; font-weight:500;
    transition: all .35s cubic-bezier(.16,1,.3,1);
}
.pill:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }
.pill .lab { font-size:.82rem; letter-spacing:.08em; }

/* ═══════════ NAV ═══════════ */
.mainnav { background: var(--nav-blur); backdrop-filter: blur(14px); border-bottom:1px solid var(--line); transition: background .6s; }
.mainnav ul { list-style:none; display:flex; justify-content:center; gap:.3rem; flex-wrap:wrap; padding:.55rem; }
.mainnav a {
    color: var(--ink-2); text-decoration:none; font-size:.86rem;
    letter-spacing:.16em; text-transform:uppercase; font-weight:500;
    padding:.6rem 1.25rem; border-radius:100px; position:relative;
    transition: color .3s;
}
.mainnav a::after {
    content:''; position:absolute; left:50%; bottom:.42rem; width:0; height:1.5px;
    background: var(--ember); transition: width .35s cubic-bezier(.16,1,.3,1); transform: translateX(-50%);
}
.mainnav a:hover { color: var(--ink); }
.mainnav a:hover::after { width:42%; }

/* ═══════════ HERO ═══════════ */
.hero { position: relative; height: clamp(560px, 86vh, 820px); overflow:hidden; }
.hero .swiper, .hero .swiper-slide { width:100%; height:100%; }
.hero .swiper-slide { background-size:cover; background-position:center; display:flex; align-items:center; }
.hero .swiper-slide::before { content:''; position:absolute; inset:0; background: var(--hero-veil); transition: background .6s; }
.hero-inner { position:relative; z-index:3; padding: 0 clamp(1.4rem, 7vw, 7rem); max-width: 1500px; margin:0 auto; width:100%; }
.hero-eyebrow {
    display:inline-flex; align-items:center; gap:.7rem;
    color: var(--gold-soft); font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
    margin-bottom:1.6rem; font-weight:500;
}
.hero-eyebrow::before { content:''; width:46px; height:1px; background: var(--gold-soft); }
.hero-title {
    font-family:'Fraunces', serif; font-weight:400;
    color:#FBF6EE; font-size: clamp(2.6rem, 6.4vw, 5.6rem);
    line-height:1.02; letter-spacing:-.01em; max-width: 16ch;
    text-shadow: 0 6px 40px rgba(0,0,0,.4);
}
.hero-title em { font-style: italic; color: var(--gold-soft); }
.hero-sub {
    color: rgba(251,246,238,.86); font-size: clamp(1rem,1.5vw,1.22rem);
    max-width: 46ch; margin: 1.5rem 0 2.4rem; line-height:1.7; font-weight:300;
}
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

.btn {
    --b: var(--ember);
    display:inline-flex; align-items:center; gap:.7rem;
    padding: 1.05rem 2.5rem; border-radius:100px;
    font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
    text-decoration:none; cursor:pointer; border:none; position:relative; overflow:hidden;
    background: var(--b); color:#FBF6EE;
    transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s;
    box-shadow: 0 10px 30px -8px rgba(192,104,46,.6);
}
.btn span { position:relative; z-index:2; }
.btn::before { content:''; position:absolute; inset:0; background: var(--ember-deep); transform: translateY(101%); transition: transform .45s cubic-bezier(.16,1,.3,1); z-index:1; }
.btn:hover::before { transform: translateY(0); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(192,104,46,.7); }
.btn i { position:relative; z-index:2; transition: transform .35s; }
.btn:hover i { transform: translateX(5px); }
[dir="rtl"] .btn:hover i { transform: translateX(-5px); }

.btn-ghost { background:transparent; color:#FBF6EE; border:1px solid rgba(251,246,238,.4); box-shadow:none; }
.btn-ghost::before { background:#FBF6EE; }
.btn-ghost:hover { color: var(--ink); box-shadow:none; }

.hero-frac {
    position:absolute; bottom:2.2rem; inset-inline-end: clamp(1.4rem,7vw,7rem); z-index:3;
    color: rgba(251,246,238,.8); font-family:'Fraunces',serif; font-size:1rem; letter-spacing:.1em;
    display:flex; align-items:center; gap:.6rem;
}
.hero-frac b { font-size:2.2rem; color: var(--gold-soft); }
.swiper-pagination { bottom: 2.4rem !important; text-align:left; padding-inline-start: clamp(1.4rem,7vw,7rem); }
.hero .swiper-pagination-bullet { width:34px; height:3px; border-radius:2px; background: rgba(251,246,238,.4); opacity:1; transition:.3s; }
.hero .swiper-pagination-bullet-active { background: var(--gold-soft); width:54px; }

/* ═══════════ SECTION SHELL ═══════════ */
.wrap { max-width: 1500px; margin:0 auto; padding: 0 clamp(1.4rem, 5vw, 4rem); }
.sec { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom: clamp(2.4rem,5vw,4rem); flex-wrap:wrap; }
.sec-head .left { max-width: 60ch; }
.kicker { display:inline-flex; align-items:center; gap:.7rem; color: var(--ember); font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; font-weight:600; margin-bottom:1rem; }
.kicker::before { content:''; width:34px; height:1px; background: var(--ember); }
.sec-title { font-family:'Fraunces',serif; font-weight:400; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height:1.05; letter-spacing:-.01em; color: var(--ink); }
.sec-title em { font-style:italic; color: var(--ember); }
.sec-note { color: var(--ink-soft); font-size:1.02rem; max-width:42ch; }

/* ═══════════ CATEGORIES — editorial mosaic ═══════════ */
.mosaic { display:grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 220px; gap: clamp(.8rem,1.4vw,1.4rem); }
.tile { position:relative; overflow:hidden; border-radius: 8px; text-decoration:none; background: var(--surface-2); box-shadow: 0 14px 40px -22px var(--shadow); }
.tile.big { grid-column: span 4; grid-row: span 2; }
.tile.tall { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 4; }
.tile.small { grid-column: span 2; }
.tile img { width:100%; height:100%; object-fit:cover; transition: transform 1.1s cubic-bezier(.16,1,.3,1), filter .6s; filter: saturate(.95); }
.tile::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,12,6,.78) 0%, rgba(20,12,6,.18) 45%, transparent 70%); transition: opacity .5s; }
.tile:hover img { transform: scale(1.07); filter: saturate(1.1); }
.tile-cap { position:absolute; inset-inline:0; bottom:0; z-index:2; padding: clamp(1.2rem,2vw,1.8rem); }
.tile-cap .num { font-family:'Fraunces',serif; font-size:.85rem; color: var(--gold-soft); letter-spacing:.1em; }
.tile-cap h3 { font-family:'Fraunces',serif; font-weight:500; color:#FBF6EE; font-size: clamp(1.2rem,1.8vw,1.7rem); margin-top:.2rem; display:flex; align-items:center; gap:.6rem; }
.tile-cap .go { display:inline-flex; align-items:center; gap:.5rem; color: rgba(251,246,238,.85); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; margin-top:.7rem; opacity:0; transform: translateY(8px); transition: all .45s cubic-bezier(.16,1,.3,1); }
.tile:hover .go { opacity:1; transform:none; }
.tile .arrow { width:42px; height:42px; border-radius:50%; background:#FBF6EE; color: var(--ink); display:flex; align-items:center; justify-content:center; position:absolute; top: clamp(1rem,2vw,1.5rem); inset-inline-end: clamp(1rem,2vw,1.5rem); z-index:2; transform: scale(0) rotate(-30deg); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.tile:hover .arrow { transform: scale(1) rotate(0); }
[dir="rtl"] .tile .arrow i { transform: scaleX(-1); }

/* ═══════════ MARQUEE QUOTE ═══════════ */
.quote-strip { background: var(--ink); color: var(--bg); padding: clamp(3rem,6vw,5rem) 0; overflow:hidden; }
[data-theme="dark"] .quote-strip { background: var(--surface); border-block:1px solid var(--line); }
.qm { white-space:nowrap; display:flex; }
.qm .t { font-family:'Fraunces',serif; font-style:italic; font-size: clamp(2rem,5vw,4rem); padding-inline-end: 2.5rem; animation: slide 38s linear infinite; }
.qm .t .dot { color: var(--ember); }
[dir="rtl"] .qm .t { animation-direction: reverse; }

/* ═══════════ PRODUCTS ═══════════ */
.prod-sec { background: var(--bg-2); transition: background .6s; }
.card {
    background: var(--surface); border:1px solid var(--line); border-radius: 10px;
    overflow:hidden; height: calc(100% - 1rem); margin: .5rem;
    display:flex; flex-direction:column; position:relative;
    transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s;
}
.card:hover { transform: translateY(-9px); box-shadow: 0 30px 55px -28px var(--shadow-deep); border-color: var(--gold-soft); }
.card-media { position:relative; aspect-ratio: 4/3.4; overflow:hidden; }
.card-media img { width:100%; height:100%; object-fit:cover; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.card:hover .card-media img { transform: scale(1.08); }
.tag { position:absolute; top:.9rem; inset-inline-start:.9rem; z-index:2; background: var(--cream); color: var(--ember-deep); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:.4rem .85rem; border-radius:100px; box-shadow:0 4px 14px -6px var(--shadow-deep); }
.tag.sage { background: var(--sage); color:#FBF6EE; }
.tag.ember { background: var(--ember); color:#FBF6EE; }
.fav { position:absolute; top:.9rem; inset-inline-end:.9rem; z-index:2; width:38px; height:38px; border-radius:50%; background: rgba(251,246,238,.85); backdrop-filter:blur(6px); border:none; color: var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; transition: all .3s; opacity:0; transform: scale(.7); }
.card:hover .fav { opacity:1; transform:scale(1); }
.fav:hover { color: var(--ember); background:#FBF6EE; }
.fav.on { color: var(--ember); }
.card-body { padding: 1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.card-body h3 { font-family:'Fraunces',serif; font-weight:500; font-size:1.28rem; color: var(--ink); line-height:1.25; }
[dir="rtl"] .card-body h3 { font-family:'Reem Kufi',sans-serif; font-weight:600; }
.card-body p { color: var(--ink-soft); font-size:.88rem; line-height:1.6; flex:1; }
.card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:.7rem; padding-top:1rem; border-top:1px solid var(--line); }
.price { display:flex; align-items:baseline; gap:.5rem; }
.price .now { font-family:'Fraunces',serif; font-size:1.5rem; font-weight:500; color: var(--ink); }
.price .was { font-size:.9rem; color: var(--ink-soft); text-decoration:line-through; }
.buy { width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; color: var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:1rem; transition: all .4s cubic-bezier(.16,1,.3,1); }
.buy:hover { background: var(--ember); color:#FBF6EE; border-color: var(--ember); transform: rotate(360deg) scale(1.05); }

/* swiper arrows shared */
.nav-arrows { display:flex; gap:.6rem; }
.arr { width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background: var(--surface); color: var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all .35s; }
.arr:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.arr.swiper-button-disabled { opacity:.35; cursor:default; }
.swiper-slide { height:auto; }

/* ═══════════ OFFERS — feature split ═══════════ */
.offers-sec { background: var(--surface); transition: background .6s; }
.offer-card .card-media { aspect-ratio: 4/3; }
.timer { display:flex; gap:.5rem; margin-top:.6rem; }
.timer .unit { background: var(--bg-2); border:1px solid var(--line); border-radius:6px; padding:.4rem .55rem; text-align:center; min-width:46px; }
.timer .unit b { font-family:'Fraunces',serif; font-size:1.15rem; color: var(--ember); display:block; line-height:1; }
.timer .unit s { font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-soft); text-decoration:none; }

/* ═══════════ VALUES ═══════════ */
.values { display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,2rem); }
.val { padding: 2.4rem 1.6rem; border-radius:10px; background: var(--surface); border:1px solid var(--line); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s; position:relative; overflow:hidden; }
.val::before { content:''; position:absolute; top:0; inset-inline-start:0; width:100%; height:3px; background: linear-gradient(90deg, var(--ember), var(--gold)); transform: scaleX(0); transform-origin:left; transition: transform .5s; }
[dir="rtl"] .val::before { transform-origin:right; }
.val:hover { transform: translateY(-7px); box-shadow: 0 28px 50px -30px var(--shadow-deep); }
.val:hover::before { transform: scaleX(1); }
.val .ic { width:58px; height:58px; border-radius:14px; background: var(--bg-2); color: var(--ember); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1.3rem; }
.val h3 { font-family:'Fraunces',serif; font-weight:500; font-size:1.3rem; color: var(--ink); margin-bottom:.4rem; }
[dir="rtl"] .val h3 { font-family:'Reem Kufi',sans-serif; }
.val p { color: var(--ink-soft); font-size:.92rem; }

/* ═══════════ NEWSLETTER ═══════════ */
.news-sec { padding: clamp(4rem,8vw,7rem) 0; }
.news-box { background: var(--ink); border-radius: 18px; padding: clamp(2.4rem,5vw,4.5rem); text-align:center; position:relative; overflow:hidden; }
[data-theme="dark"] .news-box { background: var(--surface); border:1px solid var(--line); }
.news-box::before { content:''; position:absolute; width:340px; height:340px; background: radial-gradient(circle, rgba(192,104,46,.35), transparent 70%); top:-120px; inset-inline-end:-80px; }
.news-box .k { color: var(--gold-soft); font-size:.76rem; letter-spacing:.3em; text-transform:uppercase; position:relative; }
.news-box h2 { font-family:'Fraunces',serif; font-weight:400; color: var(--cream); font-size: clamp(1.8rem,4vw,3rem); margin:.8rem 0 1.4rem; position:relative; }
[data-theme="dark"] .news-box h2 { color: var(--ink); }
.news-box p { color: rgba(251,246,238,.75); max-width:46ch; margin: 0 auto 2rem; position:relative; }
[data-theme="dark"] .news-box p { color: var(--ink-soft); }
.news-form { display:flex; gap:.7rem; max-width:480px; margin:0 auto; position:relative; flex-wrap:wrap; justify-content:center; }
.news-form input { flex:1; min-width:220px; padding:1rem 1.4rem; border-radius:100px; border:1px solid rgba(251,246,238,.25); background: rgba(251,246,238,.08); color: var(--cream); font-family:inherit; font-size:.95rem; }
[data-theme="dark"] .news-form input { background: var(--bg-2); color: var(--ink); border-color: var(--line); }
.news-form input::placeholder { color: rgba(251,246,238,.5); }
[data-theme="dark"] .news-form input::placeholder { color: var(--ink-soft); }
.news-form input:focus { outline:none; border-color: var(--gold); }

/* ═══════════ FOOTER ═══════════ */
footer { background: var(--bg-2); border-top:1px solid var(--line); padding: clamp(3.5rem,7vw,5.5rem) 0 2.5rem; transition: background .6s; }
.foot-grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(2rem,4vw,4rem); }
.foot-brand .wordmark { color: var(--ink); margin-bottom:1.2rem; display:inline-block; }
.foot-brand p { color: var(--ink-soft); font-size:.95rem; max-width:34ch; line-height:1.8; }
.foot-col h4 { font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color: var(--ink); margin-bottom:1.4rem; font-weight:600; }
.foot-col a, .foot-col li { display:flex; align-items:center; gap:.6rem; color: var(--ink-soft); text-decoration:none; font-size:.94rem; margin-bottom:.85rem; transition: all .3s; list-style:none; }
.foot-col a:hover { color: var(--ember); transform: translateX(5px); }
[dir="rtl"] .foot-col a:hover { transform: translateX(-5px); }
.foot-col i { color: var(--gold); width:18px; }
.socials { display:flex; gap:.7rem; margin-top:1.4rem; }
.socials a { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color: var(--ink-2); transition: all .35s; }
.socials a:hover { background: var(--ember); color:#FBF6EE; border-color: var(--ember); transform: translateY(-4px); }
.foot-bottom { max-width:1500px; margin: 3rem auto 0; padding: 1.8rem clamp(1.4rem,5vw,4rem) 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color: var(--ink-soft); font-size:.84rem; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1000px) {
    .mosaic { grid-template-columns: repeat(2,1fr); grid-auto-rows: 200px; }
    .tile.big { grid-column: span 2; grid-row: span 2; }
    .tile.tall, .tile.wide, .tile.small { grid-column: span 2; grid-row: span 1; }
    .values { grid-template-columns: repeat(2,1fr); }
    .foot-grid { grid-template-columns: 1fr 1fr; }
    .foot-brand { grid-column: 1/-1; }
}
@media (max-width: 600px) {
    .wordmark { font-size:1.3rem; letter-spacing:.3em; }
    .pill .lab { display:none; }
    .lang-pill .lab { display:inline; }
    .values { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr; }
    .mainnav a { font-size:.72rem; padding:.5rem .8rem; letter-spacing:.1em; }
    .hero-frac { display:none; }
}

/* ═══════════════════════════════════════════════════════════
   AJOUTS E-COMMERCE — même langage visuel REBORN
═══════════════════════════════════════════════════════════ */

/* ----- Badge panier ----- */
.cart-count{position:absolute;top:-6px;inset-inline-end:-6px;background:var(--ember);color:#FBF6EE;font-size:.66rem;font-weight:600;min-width:18px;height:18px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;}
.head-tools .pill{position:relative;}

/* ----- Grille produits boutique ----- */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start;}
.shop-aside{position:sticky;top:120px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.4rem;}
.shop-aside h4{font-family:'Fraunces',serif;font-weight:500;font-size:1.1rem;margin-bottom:1rem;color:var(--ink);}
.filter-list{list-style:none;display:flex;flex-direction:column;gap:.2rem;}
.filter-list a{display:flex;justify-content:space-between;align-items:center;gap:.5rem;text-decoration:none;color:var(--ink-2);font-size:.92rem;padding:.6rem .9rem;border-radius:100px;transition:all .3s;}
.filter-list a:hover{background:var(--bg-2);color:var(--ink);}
.filter-list a.active{background:var(--ink);color:var(--bg);}
.filter-list a .qty{font-size:.72rem;opacity:.7;}
.shop-search{width:100%;padding:.8rem 1rem;border-radius:100px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:.9rem;margin-bottom:1.4rem;}
.shop-search:focus{outline:none;border-color:var(--gold);}
.grid-prod{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(1rem,2vw,1.8rem);}
.grid-prod .card{height:100%;}
.shop-toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap;}
.shop-toolbar .count{color:var(--ink-soft);font-size:.9rem;}
.sortsel{padding:.6rem 1rem;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:inherit;font-size:.88rem;cursor:pointer;}
.empty-state{text-align:center;padding:5rem 1rem;color:var(--ink-soft);}
.empty-state i{font-size:2.6rem;color:var(--gold-soft);margin-bottom:1rem;}

/* ----- Fil d'ariane ----- */
.breadcrumb{display:flex;gap:.6rem;align-items:center;color:var(--ink-soft);font-size:.82rem;letter-spacing:.04em;margin-bottom:1.6rem;flex-wrap:wrap;}
.breadcrumb a{color:var(--ink-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--ember);}

/* ----- Pagination ----- */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:3rem;flex-wrap:wrap;}
.pagination a,.pagination span{min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:100px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);text-decoration:none;font-size:.9rem;transition:all .3s;padding:0 .6rem;}
.pagination a:hover{background:var(--bg-2);}
.pagination .on{background:var(--ink);color:var(--bg);border-color:var(--ink);}

/* ----- Page produit ----- */
.product-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.pd-gallery{position:sticky;top:120px;}
.pd-main{border-radius:12px;overflow:hidden;background:var(--surface-2);aspect-ratio:1;box-shadow:0 24px 60px -34px var(--shadow-deep);}
.pd-main img{width:100%;height:100%;object-fit:cover;}
.pd-thumbs{display:flex;gap:.7rem;margin-top:.9rem;}
.pd-thumbs button{width:80px;height:80px;border-radius:8px;overflow:hidden;border:2px solid transparent;background:none;cursor:pointer;padding:0;transition:border-color .3s;}
.pd-thumbs button.active{border-color:var(--ember);}
.pd-thumbs img{width:100%;height:100%;object-fit:cover;}
.pd-info .kicker{margin-bottom:.8rem;}
.pd-info h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1;color:var(--ink);margin-bottom:1rem;}
[dir="rtl"] .pd-info h1{font-family:'Reem Kufi',sans-serif;}
.pd-price{display:flex;align-items:baseline;gap:.8rem;margin:1.2rem 0;}
.pd-price .now{font-family:'Fraunces',serif;font-size:2.2rem;font-weight:500;color:var(--ember);}
.pd-price .was{font-size:1.1rem;color:var(--ink-soft);text-decoration:line-through;}
.pd-desc{color:var(--ink-2);line-height:1.8;margin-bottom:1.8rem;font-size:1rem;}
.pd-stock{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:500;padding:.4rem .9rem;border-radius:100px;margin-bottom:1.6rem;}
.pd-stock.in{background:rgba(110,122,82,.16);color:var(--sage);}
.pd-stock.low{background:rgba(192,104,46,.16);color:var(--ember);}
.pd-stock.out{background:rgba(120,120,120,.16);color:var(--ink-soft);}
.qty-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap;}
.qty-pick{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden;}
.qty-pick button{width:46px;height:46px;border:none;background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.1rem;}
.qty-pick button:hover{background:var(--bg-2);}
.qty-pick span{min-width:48px;text-align:center;font-weight:500;}
.btn-add{flex:1;min-width:200px;}
.pd-meta{border-top:1px solid var(--line);margin-top:1.6rem;padding-top:1.4rem;display:flex;flex-direction:column;gap:.7rem;color:var(--ink-soft);font-size:.9rem;}
.pd-meta span i{color:var(--gold);width:20px;}

/* ----- Boutons génériques (réutilise .btn déjà présent) ----- */
.btn-block{width:100%;justify-content:center;}

/* ----- Drawer panier ----- */
.drawer-overlay{position:fixed;inset:0;background:rgba(20,12,6,.5);backdrop-filter:blur(3px);z-index:2000;opacity:0;visibility:hidden;transition:.4s;}
.drawer-overlay.open{opacity:1;visibility:visible;}
.cart-drawer{position:fixed;top:0;inset-inline-end:0;height:100%;width:min(440px,92vw);background:var(--bg);z-index:2001;display:flex;flex-direction:column;transform:translateX(110%);transition:transform .5s cubic-bezier(.16,1,.3,1);box-shadow:-20px 0 60px -20px var(--shadow-deep);}
[dir="rtl"] .cart-drawer{inset-inline-end:auto;inset-inline-start:0;transform:translateX(-110%);}
.cart-drawer.open{transform:translateX(0);}
.cart-head{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid var(--line);}
.cart-head h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.4rem;color:var(--ink);}
.cart-close{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;}
.cart-close:hover{background:var(--ink);color:var(--bg);}
.cart-items{flex:1;overflow-y:auto;padding:1rem 1.5rem;display:flex;flex-direction:column;gap:1rem;}
.cart-line{display:flex;gap:1rem;align-items:center;}
.cart-line img{width:72px;height:72px;border-radius:8px;object-fit:cover;background:var(--surface-2);}
.cart-line .cl-info{flex:1;}
.cart-line .cl-info h5{font-family:'Fraunces',serif;font-weight:500;font-size:1rem;color:var(--ink);margin-bottom:.2rem;}
.cart-line .cl-info .cl-price{color:var(--ember);font-weight:500;font-size:.95rem;}
.cart-line .cl-qty{display:flex;align-items:center;gap:.5rem;margin-top:.4rem;}
.cart-line .cl-qty button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:.8rem;}
.cart-line .cl-rm{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:1rem;}
.cart-line .cl-rm:hover{color:var(--ember);}
.cart-foot{padding:1.5rem;border-top:1px solid var(--line);background:var(--surface);}
.cart-total{display:flex;justify-content:space-between;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--ink);margin-bottom:1.2rem;}
.cart-total b{color:var(--ember);}
.cart-empty{text-align:center;color:var(--ink-soft);padding:3rem 1rem;}
.cart-empty i{font-size:2.4rem;color:var(--gold-soft);margin-bottom:1rem;}

/* ----- Toast ----- */
.toast{position:fixed;bottom:24px;inset-inline-end:24px;background:var(--ink);color:var(--bg);padding:1rem 1.4rem;border-radius:10px;z-index:3000;display:flex;align-items:center;gap:.7rem;transform:translateY(120%);opacity:0;transition:.4s cubic-bezier(.16,1,.3,1);box-shadow:0 18px 40px -16px var(--shadow-deep);font-size:.92rem;}
.toast.show{transform:translateY(0);opacity:1;}
.toast i{color:var(--gold-soft);}

/* ----- Pages contenu (checkout, formulaires) ----- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(1.6rem,3vw,2.4rem);}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem;font-weight:500;}
.field input,.field textarea,.field select{width:100%;padding:.85rem 1.1rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-family:inherit;font-size:.95rem;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);}
.field textarea{min-height:90px;resize:vertical;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.checkout-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start;}
.summary{position:sticky;top:120px;}
.summary-line{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.92rem;}
.summary-line.tot{border:none;font-family:'Fraunces',serif;font-size:1.4rem;color:var(--ink);padding-top:1rem;}
.summary-line.tot b{color:var(--ember);}

@media(max-width:900px){
 .shop-layout,.product-detail,.checkout-layout{grid-template-columns:1fr;}
 .shop-aside,.pd-gallery,.summary{position:static;}
 .grid-2{grid-template-columns:1fr;}
}