/* Vitrine THE VIOLET : accueil nuit violette avec aurore animée, cartes en verre dépoli,
   titres en Playfair Display. Dégradé rose-violet repris du logo de la boutique. Se charge après style.css et n'en modifie que l'apparence. */
:root{
  --navy:#2a0f3f; --navy-2:#3d1659; --ink:#22102f; --muted:#6e5d7c; --line:#ece2f4;
  --bg:#fbf8fd; --soft:#f3eaf9; --teal:#9b5dc4; --teal-dark:#7a3fa0; --teal-deep:#5e2a82;
  --nuit:#14081f; --nuit-2:#211033; --lilas:#c9a7e4; --rose:#f2a7cb; --or:#f6b8dc;
  --degrade:linear-gradient(120deg,#b77cf5 0%,#e070b8 55%,#f6a8cf 100%);
  --r:22px;
  --shadow:0 1px 2px rgba(42,15,63,.05),0 10px 30px rgba(42,15,63,.08);
  --shadow-lg:0 2px 8px rgba(42,15,63,.08),0 24px 60px rgba(42,15,63,.18);
}
h1,h2,.ved-nom,.fiche-info h3,.drawer-head h3,.occ strong{font-family:'Playfair Display',Cairo,serif;letter-spacing:-.01em}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] .ved-nom,[dir=rtl] .fiche-info h3,[dir=rtl] .drawer-head h3,[dir=rtl] .occ strong{font-family:Cairo,serif;letter-spacing:0}
h2 em,h1 span{font-style:italic;background:var(--degrade);-webkit-background-clip:text;background-clip:text;color:transparent}
[dir=rtl] h2 em,[dir=rtl] h1 span{font-style:normal}
h2{font-size:clamp(28px,4vw,46px);font-weight:700;line-height:1.1}
[dir=rtl] h2{line-height:1.35}
.eyebrow{background:none;border:1px solid rgba(155,93,196,.35);color:var(--teal-deep);text-transform:uppercase;letter-spacing:.16em;font-size:11px;padding:6px 14px}
[dir=rtl] .eyebrow{letter-spacing:0;font-size:13px;text-transform:none}
.eyebrow .ic{width:14px;height:14px}

/* Bandeau et en-tête sombres, en verre */
.demo{background:#ffd23f}
.topbar{background:var(--nuit);color:#cdb7e0;border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .ic{color:var(--rose)}
.site-header{background:rgba(20,8,31,.82);border-bottom:1px solid rgba(255,255,255,.08);transition:background .3s}
.site-header.scrolled{background:rgba(20,8,31,.94)}
.logo img{height:50px}
.nav{color:#d9c8e8}
.nav a:hover{color:#fff}
.nav a::after{background:var(--degrade)}
.lang{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.lang:hover{border-color:var(--rose)}
.cart-btn{background:var(--degrade);color:var(--nuit)}
.cart-n{background:#fff;color:var(--teal-deep);border-color:var(--nuit)}

/* Boutons */
.btn{border-radius:999px}
.btn-primary{position:relative;overflow:hidden;background:var(--nuit);color:#fff;box-shadow:0 10px 30px rgba(155,93,196,.35)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn-primary:hover{background:var(--navy-2);transform:translateY(-2px)}
.btn-primary:hover::after{transform:translateX(120%)}
.hero .btn-primary,.reseau .btn-primary{background:var(--degrade);color:var(--nuit)}
.btn-wa:hover{transform:translateY(-2px)}
.btn-ghost{border-radius:999px}

/* Accueil */
html,body{overflow-x:clip}
@media (min-width:761px){.hero-grid{grid-template-columns:1fr 1fr}}
.hero{--mx:70%;--my:30%;background:var(--nuit);color:#fff;padding:72px 0 96px;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(242,167,203,.16),transparent 70%)}
.hero::after{display:none}
.aurore{position:absolute;inset:0;z-index:-2;overflow:hidden}
.aurore i{position:absolute;border-radius:50%;opacity:.55;will-change:transform}
.aurore i:nth-child(1){width:720px;height:720px;top:-320px;inset-inline-end:-160px;background:radial-gradient(closest-side,#7b2fb8,transparent);animation:derive 16s ease-in-out infinite alternate}
.aurore i:nth-child(2){width:560px;height:560px;bottom:-300px;inset-inline-start:-140px;background:radial-gradient(closest-side,#c2468f,transparent);animation:derive 19s ease-in-out infinite alternate-reverse}
.aurore i:nth-child(3){width:420px;height:420px;top:30%;left:38%;background:radial-gradient(closest-side,#4b2bb0,transparent);opacity:.45;animation:derive 23s ease-in-out infinite alternate}
@keyframes derive{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,40px) scale(1.12)}100%{transform:translate(-40px,70px) scale(.94)}}
.hero-mot{position:absolute;inset-inline:0;bottom:-.18em;z-index:-1;text-align:center;font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(120px,24vw,340px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);letter-spacing:.04em;pointer-events:none;user-select:none}
.hero .eyebrow{border-color:rgba(255,255,255,.18);color:#f3dcff;background:rgba(255,255,255,.05)}
.hero .eyebrow .ic{color:var(--or)}
h1{font-size:clamp(42px,6.4vw,82px);line-height:1.02;font-weight:700;color:#fff}
[dir=rtl] h1{font-size:clamp(38px,5.6vw,68px);line-height:1.3}
h1 span{background-image:linear-gradient(120deg,#c58cff,#e86bb0,#f6a8cf,#c58cff);background-size:300% 100%;animation:reflet 8s linear infinite}
@keyframes reflet{to{background-position:300% 0}}
.hero .lead{color:#cdbfdc;font-size:17px}
.trust-ic{background:rgba(255,255,255,.07);color:var(--or);box-shadow:none;border:1px solid rgba(255,255,255,.1)}
.trust small{color:#b9a8ca}

/* Scène : carte vedette en verre et produits flottants */
.scene{position:relative;padding:20px 0}
.ved-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45);transition:transform .25s ease-out;max-width:420px}
.ved-card::before{inset:-1px;width:auto;height:auto;border-radius:29px;transform:none;background:conic-gradient(from var(--angle,0deg),transparent 0 70%,rgba(242,167,203,.9) 80%,rgba(236,200,135,.9) 88%,transparent 96%);z-index:-1;animation:tour 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
[dir=rtl] .ved-card::before{inset:-1px;transform:none}
@property --angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes tour{to{--angle:360deg}}
.ved-pic{aspect-ratio:4/5;background:#f6eefb}
.ved-tag{background:var(--degrade);color:var(--nuit)}
.ved-det{color:#cdbfdc}
.ved-prix{color:var(--or)}
.ved-prix s{color:#b9a8ca}
.ved-card .btn-primary{background:#fff;color:var(--nuit);box-shadow:none}
.ved-card .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.ved-vide{background:linear-gradient(110deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 70%);background-size:200% 100%}
.flotte{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 10px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px rgba(0,0,0,.35);animation:flotte 6s ease-in-out infinite}
.flotte img{width:92px;height:92px;border-radius:14px;display:block;object-fit:cover}
.flotte span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff}
.f1{top:4%;inset-inline-start:-6%;transform:rotate(-6deg)}
.f2{bottom:6%;inset-inline-start:0;animation-delay:-3s}
@keyframes flotte{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* Bandeau défilant */
.defile{background:var(--degrade);color:var(--nuit);overflow:hidden;white-space:nowrap;padding:16px 0;transform:rotate(-1.2deg);margin:-18px -10px 0;position:relative;z-index:3;box-shadow:0 10px 30px rgba(155,93,196,.25)}
.defile-in{display:inline-flex;animation:defile 28s linear infinite}
.defile span{font-family:'Playfair Display',Cairo,serif;font-size:clamp(20px,2.6vw,30px);font-weight:700;font-style:italic;padding-inline-end:.3em}
[dir=rtl] .defile span{font-family:Cairo,serif;font-style:normal}
[dir=rtl] .defile-in{animation-name:defile-rtl}
@keyframes defile{to{transform:translateX(-50%)}}
@keyframes defile-rtl{to{transform:translateX(50%)}}

/* Univers : tuiles photo */
.cats{margin-top:0;padding:84px 0 10px}
.cats .head{margin-bottom:26px}
.cats-grid{gap:16px}
.cat-photo{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border:0;border-radius:26px;aspect-ratio:4/5;background:#e6d4f3;box-shadow:var(--shadow)}
.cat-photo .cat-img{position:absolute;inset:0}
.cat-photo .cat-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cat-photo .cat-img img[src$=".svg"]{object-fit:contain;object-position:center 0}
.cat-photo:hover .cat-img img{transform:scale(1.08) rotate(-1deg)}
.cat-photo>span:last-child{position:absolute;inset:auto 12px 12px;padding:14px 16px;border-radius:18px;background:rgba(20,8,31,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.cat-photo strong{font-family:'Playfair Display',Cairo,serif;font-size:21px}
[dir=rtl] .cat-photo strong{font-family:Cairo,serif}
.cat-photo small{color:#e2d2ef}
.cat-photo:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}

/* Catalogue */
.catalogue{padding-top:72px}
.search{border-radius:999px;padding:0 18px}
.chip{padding:10px 18px}
.chip.on{background:var(--nuit);border-color:var(--nuit)}
.grid{gap:22px}
.card{border:0;border-radius:24px;background:#fff;box-shadow:var(--shadow);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.pic{aspect-ratio:4/5;background:#f6eefb;margin:8px;width:calc(100% - 16px);border-radius:18px}
.card:hover .pic img{transform:scale(1.07)}
.badges{top:18px;inset-inline-start:18px}
.b-promo{background:var(--degrade);color:var(--nuit)}
.info{padding:8px 16px 16px}
.name{font-size:15.5px}
.price{color:var(--teal-deep)}
.order{border-radius:999px;background:var(--nuit)}
.order:hover{background:var(--teal-deep)}
.order.in{background:var(--soft);color:var(--teal-deep)}

@media (min-width:961px){.grid{grid-template-columns:repeat(3,1fr);gap:26px}}

/* Occasions */
.occasions{padding:40px 0 80px}
.occ-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.occ{position:relative;border-radius:28px;overflow:hidden;min-height:360px;display:block;background:#efe4f7;isolation:isolate}
.occ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 72%;z-index:-1;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.occ:hover img{transform:scale(1.06)}
.occ::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 45%,rgba(20,8,31,.82))}
.occ-txt{position:absolute;inset:auto 22px 22px;color:#fff;display:flex;flex-direction:column;gap:2px}
.occ-txt small{font-weight:700;letter-spacing:.2em;color:var(--or);font-size:11px}
.occ strong{font-size:30px;line-height:1.1}
.occ-txt span{color:#e5d8f0;font-size:14px}

/* Pourquoi nous : bloc nuit */
.pourquoi{background:var(--nuit);color:#fff;position:relative;overflow:hidden;border-radius:40px;margin:0 16px;padding:80px 0}
.pourquoi::before{content:"";position:absolute;width:700px;height:700px;top:-380px;left:50%;translate:-50% 0;background:radial-gradient(closest-side,rgba(123,47,184,.6),transparent);pointer-events:none}
.pourquoi h2{position:relative}
.why-grid{position:relative;margin-top:44px}
.why{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);box-shadow:none;border-radius:24px;padding:28px 22px;transition:background .3s,transform .3s}
.why:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.why-ic{background:var(--degrade);color:var(--nuit);border-radius:50%}
.why strong{font-family:'Playfair Display',Cairo,serif;font-size:19px}
[dir=rtl] .why strong{font-family:Cairo,serif}
.why p{color:#bfaed0}

/* Réseau social */
.reseau{padding:90px 0 30px}
.reseau-in{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.reseau-txt p{color:var(--muted);font-size:16px;margin:14px 0 26px;max-width:460px}
.ecrans{position:relative;height:420px}
.ecran{position:absolute;width:190px;aspect-ratio:9/17;border-radius:30px;background:#efe3f7;border:7px solid var(--nuit);overflow:hidden;box-shadow:var(--shadow-lg);display:grid;place-items:center}
.ecran img{width:100%;height:100%;object-fit:cover;background:#efe3f7}
.lecture{position:absolute;width:46px;height:46px;padding:12px;border-radius:50%;background:rgba(20,8,31,.6);color:#fff}
.e1{left:4%;top:40px;rotate:-8deg}
.e2{left:calc(50% - 95px);top:0;z-index:2}
.e3{right:4%;top:40px;rotate:8deg}

/* Contact et pied de page */
.box{border:0;border-radius:24px}
.row-ic{border-radius:50%}
.site-footer{background:var(--nuit);color:#bfaed0}

/* Fenêtres */
dialog{border-radius:28px}
.fiche-media,.ligne-img{background:#f6eefb}
.fiche-info .price,.total strong{color:var(--teal-deep)}

/* Apparition au défilement */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.vu{opacity:1;transform:none}
.occ-grid .reveal:nth-child(2),.why-grid .reveal:nth-child(2){transition-delay:.1s}
.occ-grid .reveal:nth-child(3),.why-grid .reveal:nth-child(3){transition-delay:.2s}
.why-grid .reveal:nth-child(4){transition-delay:.3s}

@media (max-width:960px){
  .occ-grid{grid-template-columns:1fr 1fr}
  .occ-grid>:first-child{grid-column:1/-1}
  .reseau-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  .logo img{height:38px}
  .hero{padding:34px 0 70px}
  .hero-grid{gap:16px}
  h1{font-size:clamp(40px,11vw,54px)}
  [dir=rtl] h1{font-size:clamp(34px,9.5vw,46px)}
  .hero .lead{font-size:15px}
  .trust li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
  .trust small{color:#b9a8ca}
  .scene{padding:30px 0 10px}
  .flotte img{width:70px;height:70px}
  .flotte{padding:6px 6px 8px;border-radius:16px}
  .f1{top:0;inset-inline-start:auto;inset-inline-end:-4px;transform:rotate(6deg)}
  .f2{bottom:auto;top:34%;inset-inline-start:-6px}
  .defile{padding:12px 0}
  .cats{padding:56px 0 0}
  .cats-grid.n4{grid-template-columns:1fr 1fr}
  .cats-grid.n3{grid-template-columns:1fr 1fr}
  .cats-grid.n3>.cat-photo:first-child{grid-column:1/-1;aspect-ratio:16/11}
  .cats-grid.n3>.cat-photo:first-child img{object-position:center 80%}
  .cat-photo>span:last-child{inset:auto 8px 8px;padding:10px 12px;border-radius:14px}
  .cat-photo strong{font-size:17px}
  .cat-photo small{font-size:11px}
  .catalogue{padding-top:48px}
  .grid{gap:12px}
  .card{border-radius:20px}
  .pic{margin:6px;width:calc(100% - 12px);border-radius:15px}
  .badges{top:14px;inset-inline-start:14px}
  .info{padding:6px 11px 13px}
  .occasions{padding:20px 0 50px}
  .occ-grid{grid-template-columns:1fr;gap:12px}
  .occ{min-height:250px}
  .pourquoi{margin:0 8px;border-radius:28px;padding:56px 0}
  .reseau{padding:60px 0 10px}
  .ecrans{height:300px}
  .ecran{width:128px;border-width:5px;border-radius:22px}
  .e2{left:calc(50% - 64px)}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Recherche rapide sur l'en-tête sombre */
.search-btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff}
.search-btn:hover,.search-btn[aria-expanded=true]{border-color:var(--rose);color:#fff}
.rech-panel{border-top-color:rgba(255,255,255,.08)}
.rech-item{border:0;border-radius:16px}
.rech-img{background:#f6eefb}
.rech-vide{color:#cdbfdc}
.rech-tout{color:var(--rose)}

/* Marque et pointures */
.taille{border-radius:999px}
.taille.on{background:var(--nuit);border-color:var(--nuit)}
.form .cadeau-opt:has(input:checked){border-color:var(--teal)}