/* Parfum33ml.ma — Feuille de styles partagée pages statiques */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#C9A96E;--gold-l:#DBBF8A;--gold-d:#A8883F;
  --bg:#080604;--bg2:#110E0A;--bg3:#1A1610;--card:#12100C;
  --txt:#EDE6D6;--txt2:#B8AE9A;--txt3:#7A7264;
  --rose:#C27080;--green:#5A9E6F;
  --border:rgba(201,169,110,.12);--border-h:rgba(201,169,110,.28);
  --ff-d:'Playfair Display',Georgia,serif;
  --ff-b:'Plus Jakarta Sans',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);background:var(--bg);color:var(--txt);line-height:1.6;overflow-x:hidden}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--gold-d);border-radius:3px}
a{color:inherit;text-decoration:none}

/* ── ANNOUNCE BAR ────────────────────────── */
.announce-bar{
  background:linear-gradient(135deg,rgba(201,169,110,.1),rgba(201,169,110,.05));
  border-bottom:1px solid var(--border);
  text-align:center;padding:10px 24px;
  font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--txt2);
}
.footer-payment{margin-top:16px}
.footer-payment p{font-size:10px;color:var(--txt3);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.footer-payment img{max-width:100%;width:260px;border-radius:8px;background:#fff;padding:8px 12px;display:block}

/* ── NAV ──────────────────────────────────── */
.static-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(8,6,4,.96);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:0 24px;display:flex;align-items:center;gap:20px;height:70px;
}
.static-logo img{height:56px;width:auto;mix-blend-mode:lighten}
.static-nav-links{display:flex;gap:0;align-items:center;margin-left:auto}
.static-nav-links a{
  font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:var(--txt2);transition:.3s;padding:0 14px;height:70px;
  display:flex;align-items:center;border-bottom:2px solid transparent;
}
.static-nav-links a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.static-nav-cta{
  display:flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,var(--gold-l),var(--gold),var(--gold-d));
  color:var(--bg);padding:9px 20px;border-radius:50px;
  font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  transition:.35s;box-shadow:0 2px 14px rgba(201,169,110,.3);white-space:nowrap;
}
.static-nav-cta:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(201,169,110,.45)}

/* ── BREADCRUMB ──────────────────────────── */
.breadcrumb{
  max-width:820px;margin:0 auto;padding:20px 24px 0;
  display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt3);flex-wrap:wrap;
}
.breadcrumb a{transition:.2s}.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{opacity:.4}

/* ── ARTICLE ─────────────────────────────── */
.article-page{max-width:820px;margin:0 auto;padding:32px 24px 64px}
.article-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt3);margin-bottom:24px;transition:.2s}
.article-back:hover{color:var(--gold)}
.article-header{margin-bottom:36px}
.article-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);background:rgba(201,169,110,.08);padding:5px 14px;border-radius:20px;border:1px solid var(--border);margin-bottom:14px}
.article-header h1{font-family:var(--ff-d);font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.2;margin-bottom:12px}
.article-header h1 em{color:var(--gold);font-style:italic}
.article-meta{display:flex;gap:16px;font-size:12px;color:var(--txt3)}
.article-banner{width:100%;height:340px;border-radius:16px;overflow:hidden;margin-bottom:32px;border:1px solid var(--border)}
.article-banner img{width:100%;height:100%;object-fit:cover;display:block}
.article-body{font-size:15px;line-height:1.85;color:var(--txt2)}
.article-body h2{font-family:var(--ff-d);font-size:24px;font-weight:700;color:var(--txt);margin:32px 0 12px}
.article-body h3{font-family:var(--ff-d);font-size:18px;font-weight:600;color:var(--gold);margin:24px 0 10px}
.article-body p{margin-bottom:16px}
.article-body ul,.article-body ol{padding-left:20px;margin-bottom:16px}
.article-body ul li,.article-body ol li{margin-bottom:6px}
.article-body strong{color:var(--txt)}
.article-body em{color:var(--txt2)}
.article-body .highlight{background:rgba(201,169,110,.06);border-left:3px solid var(--gold);padding:16px 20px;border-radius:0 12px 12px 0;margin:20px 0;font-style:italic;color:var(--txt)}
.art-prod-img{float:right;width:115px;margin:0 0 14px 18px;text-align:center;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#080808;transition:transform .2s,border-color .2s;clear:right;display:block}
.art-prod-img:hover{transform:translateY(-2px);border-color:var(--gold)}
.art-prod-img img{width:100%;height:128px;object-fit:contain;display:block}
.art-prod-img figcaption{font-size:10px;color:var(--gold);padding:5px 8px 7px;font-weight:600;letter-spacing:.4px;line-height:1.3}
.article-cta{margin-top:40px;padding:28px;background:linear-gradient(135deg,rgba(201,169,110,.06),rgba(194,112,128,.03));border:1px solid var(--border);border-radius:16px;text-align:center}

/* ── BUTTONS ─────────────────────────────── */
.btn-p{background:var(--gold);color:var(--bg);padding:12px 28px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:.4s;display:inline-block}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,169,110,.3);color:var(--bg)}
.btn-o{border:1.5px solid var(--border-h);color:var(--gold);padding:12px 28px;border-radius:50px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;transition:.4s;display:inline-block;margin-left:8px}
.btn-o:hover{background:rgba(201,169,110,.08);transform:translateY(-2px)}

/* ── FOOTER ──────────────────────────────── */
footer.static-footer{background:var(--bg2);border-top:1px solid var(--border);padding:48px 24px 0}
.footer-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px;margin-bottom:36px}
.footer-brand p{color:var(--txt3);font-size:12px;line-height:1.7;margin-bottom:14px}
footer h4{font-family:var(--ff-d);font-size:15px;font-weight:700;color:var(--txt);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
footer ul{list-style:none}
footer ul li{margin-bottom:6px}
footer ul li a{font-size:12px;color:var(--txt3);transition:.2s}
footer ul li a:hover{color:var(--gold)}
.social-links{display:flex;gap:10px;margin-top:8px}
.social-link{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:.3s}
.social-link:hover{color:var(--gold);border-color:var(--gold-d);transform:translateY(-2px)}
.trust-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.trust-badge{display:flex;align-items:center;gap:5px;padding:5px 10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-size:10px;color:var(--txt3)}
.footer-cities{display:flex;flex-wrap:wrap;gap:4px}
.footer-cities a{font-size:11px;color:var(--txt3);transition:.2s}
.footer-cities a:hover{color:var(--gold)}
.footer-cities a::after{content:' ·';opacity:.4}
.footer-cities a:last-child::after{display:none}
.footer-bottom{max-width:1200px;margin:0 auto;padding:20px 0 24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--txt3)}
.footer-legal{display:flex;gap:14px;flex-wrap:wrap}
.footer-legal a{color:var(--txt3);transition:.2s}
.footer-legal a:hover{color:var(--gold)}

/* ── BRAND / FAMILY PAGE ─────────────────── */
.static-hero{padding:64px 24px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(201,169,110,.07),transparent 60%);border-bottom:1px solid var(--border)}
.static-hero h1{font-family:var(--ff-d);font-size:clamp(32px,5vw,56px);font-weight:700;line-height:1.15;margin-bottom:16px}
.static-hero h1 em{color:var(--gold);font-style:italic}
.static-hero p{font-size:16px;color:var(--txt2);max-width:600px;margin:0 auto 28px;line-height:1.75}
.static-content{max-width:960px;margin:0 auto;padding:48px 24px}
.static-section{margin-bottom:48px}
.static-section h2{font-family:var(--ff-d);font-size:26px;font-weight:700;margin-bottom:16px}
.static-section p{font-size:15px;color:var(--txt2);line-height:1.8;margin-bottom:14px}
.static-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px}
.static-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s}
.static-card:hover{border-color:var(--gold-d);transform:translateY(-4px)}
.static-card-img{width:100%;height:180px;object-fit:contain;background:#080808;display:block}
.static-card-body{padding:14px 16px}
.static-card-brand{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--txt3);margin-bottom:4px}
.static-card-name{font-family:var(--ff-d);font-size:16px;font-weight:600;margin-bottom:8px}
.static-card-price{font-weight:700;color:var(--gold);font-size:14px}

/* ── PRODUCT FICHE ───────────────────────── */
.prod-hero{display:grid;grid-template-columns:1fr 1.3fr;gap:0;max-width:1100px;margin:0 auto;padding:48px 24px;align-items:center}
.prod-img-wrap{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--bg2),var(--bg3));border:1px solid var(--border);border-radius:20px;height:420px;overflow:hidden}
.prod-img-wrap img{max-width:100%;max-height:100%;object-fit:contain}
.prod-info{padding:0 0 0 48px}
.prod-brand{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.prod-info h1{font-family:var(--ff-d);font-size:clamp(24px,3.5vw,38px);font-weight:700;line-height:1.2;margin-bottom:16px}
.prod-price{font-family:var(--ff-d);font-size:36px;color:var(--gold);font-weight:700;margin-bottom:20px}
.prod-notes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.note-tag{background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:5px 14px;font-size:12px;color:var(--txt2)}
.prod-desc{font-size:15px;color:var(--txt2);line-height:1.8;margin-bottom:28px}
.prod-cta{display:flex;gap:12px;flex-wrap:wrap}
.prod-section{max-width:1100px;margin:0 auto;padding:0 24px 48px}
.prod-section h2{font-family:var(--ff-d);font-size:22px;margin-bottom:14px}
.prod-section p{font-size:15px;color:var(--txt2);line-height:1.8;margin-bottom:12px}

/* ── BLOG LISTING ────────────────────────── */
.blog-hero{padding:64px 24px;text-align:center;border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 0%,rgba(201,169,110,.07),transparent 60%)}
.blog-hero h1{font-family:var(--ff-d);font-size:clamp(32px,5vw,52px);margin-bottom:14px}
.blog-hero h1 em{color:var(--gold);font-style:italic}
.blog-hero p{color:var(--txt2);font-size:16px;max-width:560px;margin:0 auto}
.blog-grid-wrap{max-width:1100px;margin:0 auto;padding:48px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.blog-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:.3s;display:block}
.blog-card:hover{border-color:var(--gold-d);transform:translateY(-4px)}
.blog-card img{width:100%;height:180px;object-fit:cover;display:block}
.blog-card-body{padding:18px 20px}
.blog-card-tag{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.blog-card-title{font-family:var(--ff-d);font-size:17px;font-weight:600;line-height:1.35;margin-bottom:8px;color:var(--txt)}
.blog-card-meta{font-size:11px;color:var(--txt3)}

/* ── COFFRETS PAGE ───────────────────────── */
.packs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px;margin:40px 0}
.pack-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;transition:.3s;display:block}
.pack-card:hover{border-color:var(--gold-d);transform:translateY(-4px)}
.pack-card.pack-pop{border-color:var(--gold);background:linear-gradient(135deg,rgba(201,169,110,.08),var(--card))}
.pack-icon{font-size:36px;margin-bottom:14px}
.pack-card h3{font-family:var(--ff-d);font-size:24px;font-weight:700;margin-bottom:10px}
.pack-desc-text{font-size:14px;color:var(--txt2);margin-bottom:16px;line-height:1.7}
.pack-price{font-family:var(--ff-d);font-size:36px;color:var(--gold);font-weight:700}
.pack-old{font-size:16px;color:var(--txt3);text-decoration:line-through;margin-left:8px}
.pack-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--bg);background:var(--gold);padding:4px 12px;border-radius:20px;margin-bottom:14px}
.pack-features{list-style:none;margin:14px 0 24px;display:flex;flex-direction:column;gap:7px}
.pack-features li{font-size:13px;color:var(--txt2)}
.price-table{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:32px 0}
.price-row{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.price-row.best{border-color:var(--gold);background:linear-gradient(135deg,rgba(201,169,110,.1),var(--card))}
.price-row .pr-qty{font-size:12px;color:var(--txt3);margin-bottom:4px}
.price-row .pr-val{font-family:var(--ff-d);font-size:20px;color:var(--txt)}
.price-row.best .pr-val{color:var(--gold)}
.price-row .pr-note{font-size:11px;color:var(--green)}

/* ── CITY PAGE ───────────────────────────── */
.city-hero{padding:64px 24px;text-align:center;border-bottom:1px solid var(--border);background:radial-gradient(ellipse at 50% 0%,rgba(201,169,110,.07),transparent 60%)}
.city-hero h1{font-family:var(--ff-d);font-size:clamp(30px,5vw,50px);margin-bottom:14px}
.city-hero h1 em{color:var(--gold);font-style:italic}
.city-hero p{color:var(--txt2);font-size:16px;max-width:560px;margin:0 auto 28px}
.delivery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:32px 0}
.delivery-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.delivery-icon{font-size:32px;margin-bottom:10px}
.delivery-title{font-family:var(--ff-d);font-size:16px;font-weight:700;margin-bottom:6px}
.delivery-desc{font-size:13px;color:var(--txt2)}

/* ── RESPONSIVE ──────────────────────────── */
@media(max-width:1200px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:900px){.static-nav-links a{padding:0 10px;font-size:11px}}
@media(max-width:768px){.static-nav{gap:10px}.static-nav-links a{padding:0 8px;font-size:10px}.static-logo img{height:46px}}
@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .article-banner{height:220px}
  .prod-hero{grid-template-columns:1fr;gap:24px}
  .prod-info{padding:0}
  .prod-img-wrap{height:280px}
  .static-hero{padding:40px 16px}
  .static-content{padding:32px 16px 48px}
}
@media(max-width:640px){
  /* Nav : 2 lignes — logo + CTA | liens de nav */
  .static-nav{height:auto;flex-wrap:wrap;padding:0 14px;gap:0}
  .static-logo{padding:10px 0;flex-shrink:0}
  .static-logo img{height:44px}
  .static-nav-cta{margin-left:auto;min-height:44px;display:flex;align-items:center;padding:0 14px;font-size:10px;letter-spacing:0}
  .static-nav-links{width:100%;margin-left:0;border-top:1px solid var(--border);justify-content:space-evenly;gap:0}
  .static-nav-links a{font-size:10px;letter-spacing:0.3px;padding:0 6px;min-height:44px;height:44px}
  /* Boutons CTA full-width sur mobile */
  .btn-p{display:block;width:100%;text-align:center;box-sizing:border-box}
  .btn-o{display:block;width:100%;text-align:center;box-sizing:border-box;margin-left:0;margin-top:10px}
  /* Article */
  .article-page{padding:24px 16px 48px}
  .article-banner{height:180px}
  /* Image produit dans article blog : ne plus floater */
  .art-prod-img{float:none;display:block;width:110px;margin:0 auto 20px;clear:both}
  .art-prod-img img{height:120px}
  /* Sections légales */
  .static-section h2{font-size:21px}
  .static-section p,.static-section li{font-size:16px}
}
@media(max-width:480px){
  .footer-grid{grid-template-columns:1fr}
  .static-nav-links a{font-size:9px;padding:0 3px;letter-spacing:0}
  .static-nav-cta{display:none!important}
}

/* ── FLOATING WHATSAPP (pages statiques) ── */
.static-float-wa{
  position:fixed;bottom:24px;right:20px;z-index:999;
  width:52px;height:52px;background:#25D366;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  text-decoration:none;transition:.25s;
}
.static-float-wa:hover{transform:scale(1.1)}
.static-float-wa svg{width:28px;height:28px;fill:#fff;flex-shrink:0}
@media(max-width:640px){
  .static-float-wa{display:flex}
}