/* ============================================================
BAKRIM STORE V2 — e-commerce B2B premium
Typo: Archivo (+ IBM Plex Sans Arabic). Coque neutre encre/crème,
LA COULEUR VIENT DES MARQUES. Propriétés logiques → RTL natif.
============================================================ */
:root {
--paper: #faf9f6; --white: #fff; --ink: #332e3a; --soft: #6f6a62; --line: #e9e5dd;
--gold: #f0c41f; --wa: #1fa855;
--z: #552988; --z2: #3d1d66; --sm: #0b7ea8; --sm2: #90c018; --td: #2c48a0; --td2: #781860;
--tt: #cc0c30; --tt2: #f0c41f; --tm: #1b3a5f; --dm: #16336e; --dm2: #c8102e; --bl: #5a2d84; --bl2: #6db33f;
--display: "Plus Jakarta Sans", "IBM Plex Sans Arabic", sans-serif;
--text: "Plus Jakarta Sans", "IBM Plex Sans Arabic", sans-serif;
--sh: 0 8px 26px rgba(25,25,25,.08);
--sh-lg: 0 26px 64px rgba(25,25,25,.16);
--r: 16px; --r-lg: 24px;
}
html[lang="ar"] { --display: "IBM Plex Sans Arabic", sans-serif; --text: "IBM Plex Sans Arabic", sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--text); background: var(--paper); color: var(--ink);
transition: background-color .9s ease; }
img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
.wrap { max-width: 1340px; margin-inline: auto; padding-inline: clamp(14px, 2.6vw, 36px); }
h1,h2,h3 { font-family: var(--display); letter-spacing: -.015em; }
[data-b="zeina"] { --bc: var(--z); --bc2: var(--z2); }
[data-b="smile"] { --bc: var(--sm); --bc2: var(--sm2); }
[data-b="tenderly"] { --bc: var(--td); --bc2: var(--td2); }
[data-b="tutto"] { --bc: var(--tt); --bc2: var(--tt2); }
[data-b="tamara"] { --bc: var(--tm); --bc2: var(--tm); }
[data-b="doomty"] { --bc: var(--dm); --bc2: var(--dm2); }
[data-b="belira"] { --bc: var(--bl); --bc2: var(--bl2); }
/* ================= HEADER PREMIUM ================= */
.hdr { background: rgba(250,249,246,.88); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 140;
border-bottom: 1px solid var(--line); }
.hdr-in { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 34px); padding-block: 15px; }
.hdr .brand { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr .brand img { height: 44px; transition: transform .3s; }
.hdr .brand:hover img { transform: rotate(-6deg) scale(1.06); }
.hdr .brand .t b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .01em; display: block; line-height: 1; }
.hdr .brand .t small { font-size: 9.5px; color: var(--soft); letter-spacing: .34em; font-weight: 600; }
.srch { flex: 1; position: relative; max-width: 640px; }
.srch input { width: 100%; padding: 14px 52px 14px 22px; font-size: 14.5px; font-family: var(--text); font-weight: 500;
border: 2px solid transparent; border-radius: 999px; background: #efece5; outline: none;
transition: border-color .25s, background .25s, box-shadow .25s; }
html[dir="rtl"] .srch input { padding: 14px 22px 14px 52px; }
.srch input:focus { border-color: var(--ink); background: #fff; box-shadow: var(--sh); }
.srch .go { position: absolute; inset-inline-end: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px;
border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .2s; }
.srch .go:hover { transform: scale(1.08); }
/* recherche vivante */
.sugg { position: absolute; inset-inline: 0; top: calc(100% + 8px); background: #fff; border-radius: var(--r);
box-shadow: var(--sh-lg); overflow: hidden; display: none; max-height: 420px; overflow-y: auto; }
.sugg.open { display: block; }
.sugg .sg { display: flex; align-items: center; gap: 13px; padding: 10px 16px; transition: background .12s; }
.sugg .sg:hover { background: var(--paper); }
.sugg .sg img { width: 46px; height: 46px; object-fit: contain; background: var(--paper); border-radius: 10px; padding: 4px; }
.sugg .sg .n { font-size: 13.5px; font-weight: 600; }
.sugg .sg .c { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bc, var(--soft)); }
.sugg .none { padding: 16px; font-size: 13px; color: var(--soft); }
.hdr-act { display: flex; gap: 6px; align-items: center; flex: none; }
.hact { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 13px; border-radius: 14px;
font-size: 11px; font-weight: 700; color: var(--ink); position: relative; transition: background .15s; }
.hact:hover { background: #efece5; }
.hact svg { width: 22px; height: 22px; }
.hact .badge { position: absolute; top: 1px; inset-inline-end: 5px; min-width: 18px; height: 18px; border-radius: 999px;
background: var(--gold); color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center;
padding-inline: 4px; transition: transform .2s; }
.hact .badge.bump { animation: bump .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes bump { 40% { transform: scale(1.5); } }
.lang { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 15px;
font-family: var(--display); font-weight: 700; font-size: 13px; transition: all .2s; }
.lang:hover { border-color: var(--ink); }
/* ================= NAV + MÉGA-MENU LUXE ================= */
.cnav { background: var(--white); border-bottom: 1px solid var(--line); position: relative; z-index: 130; }
.cnav-in { display: flex; overflow-x: auto; scrollbar-width: none; gap: 2px; padding-block: 6px; }
.cnav-in::-webkit-scrollbar { display: none; }
.cnav a { padding: 9px 15px; font-size: 14px; font-weight: 700; white-space: nowrap; color: #4a453e;
border-radius: 999px; position: relative; transition: background .2s, color .2s; }
.cnav a::after { content: ""; position: absolute; inset-inline: 15px; bottom: 3px; height: 2.5px;
border-radius: 99px; background: var(--gold); transform: scaleX(0); transform-origin: center;
transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.cnav a:hover, .cnav a.on { background: var(--paper); color: var(--ink); }
.cnav a:hover::after, .cnav a.on::after { transform: scaleX(1); }
.cnav a.hot { color: var(--tt); }
.mega { position: absolute; inset-inline: 0; top: 100%; background: #fff;
box-shadow: 0 40px 80px rgba(25,25,25,.18); border-radius: 0 0 26px 26px;
opacity: 0; transform: translateY(-10px); pointer-events: none;
transition: opacity .26s cubic-bezier(.2,.8,.2,1), transform .26s cubic-bezier(.2,.8,.2,1); }
.mega.open { opacity: 1; transform: none; pointer-events: auto; }
.mega-in { display: grid; grid-template-columns: 1fr 1.1fr 1fr; padding-block: 26px 30px; }
.mega .col { padding-inline: clamp(16px, 2.4vw, 34px); }
.mega .col + .col { border-inline-start: 1px solid var(--line); }
.mega h4 { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #a39c8f;
margin-bottom: 15px; font-weight: 700; }
/* stagger d'entrée */
.mega .stag { opacity: 0; transform: translateY(9px); }
.mega.open .stag { animation: stagIn .45s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i, 0) * 34ms); }
@keyframes stagIn { to { opacity: 1; transform: none; } }
.mega.open .soft .stag { animation: softIn .28s ease-out forwards; animation-delay: 0s; }
@keyframes softIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* zone 1 : le menu complet */
.mega .mcat { display: flex; align-items: center; gap: 11px; padding: 8px 13px; border-radius: 13px;
font-size: 14px; font-weight: 700; color: #4a453e; transition: background .18s, color .18s, padding .18s; }
.mega .mcat img, .mega .mcat svg { width: 26px; height: 26px; object-fit: contain; flex: none; }
.mega .mcat:hover, .mega .mcat.on { background: var(--paper); color: var(--ink); padding-inline-start: 17px; }
.mega .mcat.on { box-shadow: inset 3px 0 0 var(--gold); }
html[dir="rtl"] .mega .mcat.on { box-shadow: inset -3px 0 0 var(--gold); }
/* zone 2 : gammes en pills + marques en pastilles */
.mega .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.mega .gpill { padding: 8px 16px; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--line);
font-size: 12.5px; font-weight: 700; letter-spacing: .06em; transition: all .18s; }
.mega .gpill:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.mega .mbrand { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14.5px;
font-weight: 600; color: #4a453e; transition: color .18s, padding .18s; }
.mega .mbrand .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bc); flex: none;
transition: transform .18s; }
.mega .mbrand:hover { color: var(--bc); padding-inline-start: 6px; }
.mega .mbrand:hover .dot { transform: scale(1.35); }
/* zone 3 : carte vedette */
.mega .feat { background: #fff; border: 1px solid var(--line); border-radius: 20px;
padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative; }
.mega .feat .fpromo { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; background: var(--tt); color: #fff !important;
color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 12px; padding: 4px 12px; border-radius: 999px; }
.mega .feat .fstack { position: relative; width: 100%; height: 172px; }
.mega .feat .fstack img { position: absolute; inset: 0; margin: auto; max-height: 172px; max-width: 92%; object-fit: contain;
filter: drop-shadow(0 16px 20px rgba(25,25,25,.14)); opacity: 0; transform: translateX(34px) rotate(6deg) scale(.84);
transition: opacity .22s, transform .34s cubic-bezier(.2,.8,.2,1); }
.mega .feat .fstack img.cur { opacity: 1; transform: none; }
.mega .feat:hover .fstack img.cur { transform: scale(1.05) rotate(-1.5deg); }
.mega .fdots { display: flex; gap: 4px; justify-content: center; }
.mega .fdots i { width: 5px; height: 5px; border-radius: 99px; background: var(--line); transition: width .25s, background .25s; }
.mega .fdots i.on { width: 16px; background: var(--gold); }
.mega .feat .fname { font-size: 12.5px; font-weight: 600; color: var(--soft); text-align: center; }
.mega .feat .btn { padding: 11px 22px; font-size: 13px; background: var(--gold); color: var(--ink); }
/* ================= BURGER + TIROIR MENU MOBILE ================= */
.burger { display: none; width: 42px; height: 42px; border-radius: 13px; place-items: center; flex: none;
transition: background .15s; }
.burger:hover { background: #efece5; }
.burger svg { width: 22px; height: 22px; }
@media (max-width: 900px) { .burger { display: grid; } .cnav { display: none; } }
.mnav { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(340px, 88vw); background: var(--white);
z-index: 330; transform: translateX(-110%); transition: transform .34s cubic-bezier(.2,.8,.2,1);
display: flex; flex-direction: column; box-shadow: var(--sh-lg); }
html[dir="rtl"] .mnav { transform: translateX(110%); }
.mnav.open { transform: none !important; }
.mnav .mh { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px;
border-bottom: 1px solid var(--line); }
.mnav .mh img { height: 34px; }
.mnav .mh button { background: var(--paper); width: 36px; height: 36px; border-radius: 50%; }
.mnav .mbody { flex: 1; overflow-y: auto; padding: 14px 14px 24px; }
.mnav h6 { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #a39c8f;
margin: 18px 8px 9px; font-weight: 700; }
.mnav .mi { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px;
font-size: 15px; font-weight: 700; color: #3d3830; transition: background .15s; }
.mnav .mi:active, .mnav .mi:hover { background: var(--paper); }
.mnav .mi img, .mnav .mi svg { width: 26px; height: 26px; object-fit: contain; }
.mnav .mi .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bc); }
.mnav .mfoot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
/* ================= CARROUSEL BANNIÈRES — hauteur unique, zéro vide ================= */
.bslider { position: relative; overflow: hidden; margin-top: clamp(14px, 2vw, 24px); }
.btrack { display: flex; align-items: center; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.bslide { flex: 0 0 100%; }
/* colonnes centrées verticalement : la case la plus courte se pose au milieu */
.bslide .bento { margin-top: 0; align-items: center; }
/* RÈGLE DURE : une vidéo ne se coupe jamais */
.bslide .bento .cell video, .bslide .bento .cell img { object-fit: contain; }
/* MÊME GABARIT pour les 4 bannières : carré à gauche, 16:9 + deux carrés à droite — hauteur identique d'une marque à l'autre */
.bslide .bento { display: grid; grid-template-columns: 1.0625fr 1fr; gap: 14px; }
.bslide .bento .bento-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Tutto : la case large est un trio de produits sur blanc */
.bento .cell.trio { background: linear-gradient(160deg, #ffe14a, #f5c400); display: flex; align-items: center; justify-content: center; gap: 2%; padding: 2% 2.5%; }
.bento .cell.trio img { width: 32%; height: 96%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(120,80,0,.22)); }
@media (max-width: 860px) {
.bslide .bento { display: grid !important; grid-template-columns: 1fr !important; }
}
.bnav { position: absolute; inset-block: 0; display: flex; align-items: center; z-index: 5; }
.bnav.prev { inset-inline-start: 10px; } .bnav.next { inset-inline-end: 10px; }
.bnav button { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.82);
-webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
color: var(--ink); font-size: 0; border: 0; cursor: pointer; display: grid; place-items: center;
box-shadow: 0 2px 10px rgba(30,20,45,.10), 0 8px 26px rgba(30,20,45,.10);
opacity: .55; transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s; }
.bslider:hover .bnav button { opacity: 1; }
.bnav button svg { display: block; }
.bnav button:hover { background: #fff; transform: scale(1.06); }
.bnav button:active { transform: scale(.94); }
.bnav button:focus { outline: none; }
.bnav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bdots button:focus { outline: none; }
.bdots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.bdots { position: absolute; inset-inline: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; z-index: 5; }
.bdots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.75);
box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: all .25s; }
.bdots button.on { width: 24px; background: var(--gold); }
/* ================= HÉROS BENTO — les cases épousent la forme des médias ================= */
.bento { display: grid; grid-template-columns: 1.0625fr 1fr; gap: 14px; margin-top: clamp(14px, 2vw, 24px);
align-items: start; }
.bento-r { display: grid; gap: 14px; }
.bento-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bento .cell { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh);
opacity: 0; transform: translateY(26px) scale(.97); animation: cellIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
.bento-r .cell { animation-delay: .12s; }
.bento-duo .cell:first-child { animation-delay: .22s; }
.bento-duo .cell:last-child { animation-delay: .32s; }
@keyframes cellIn { to { opacity: 1; transform: none; } }
.bento .cell.sq { aspect-ratio: 1 / 1; } /* vidéos carrées → cases carrées */
.bento .cell.wide2 { aspect-ratio: 2929 / 1431; }
.bento .cell.wide169 { aspect-ratio: 16 / 9; } /* vidéo paysage → sa forme exacte */
.bento .cell.v169 { aspect-ratio: 16 / 9; }
.bento .cell.w50a { aspect-ratio: 1024 / 568; }
.bento .cell.w180 { aspect-ratio: 1440 / 800; }
.bento .cell img, .bento .cell video { width: 100%; height: 100%; object-fit: cover;
transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bento .cell:hover img, .bento .cell:hover video { transform: scale(1.03); }
@media (max-width: 860px) {
.bento { grid-template-columns: 1fr; }
}
/* ================= ICÔNES CATÉGORIES ================= */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px;
margin-top: clamp(28px, 4vw, 46px); }
.cat { background: var(--white); border-radius: var(--r); padding: 18px 10px 14px; text-align: center;
border: 2px solid transparent; box-shadow: var(--sh); transition: transform .22s, border-color .22s; }
.cat:hover { transform: translateY(-5px); border-color: var(--ink); }
.cat .ic { height: 72px; display: grid; place-items: center; margin-bottom: 10px; }
.cat .ic img, .cat .ic svg { height: 68px; width: 68px; object-fit: contain; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.cat:hover .ic img { transform: scale(1.12) rotate(-3deg); }
.cat b { font-size: 12.5px; font-weight: 700; display: block; }
.cat small { color: var(--soft); font-size: 11px; }
/* ================= SECTIONS MARQUES (mondes) ================= */
.bworld { margin-top: clamp(40px, 6vw, 72px); border-radius: var(--r-lg); overflow: hidden; position: relative; }
.bw-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px) 0; position: relative; z-index: 2; }
.bw-head .lg { display: flex; align-items: center; gap: 14px; }
.bw-head .lg img { height: clamp(30px, 4vw, 44px); max-width: 170px; object-fit: contain; }
.bw-head .tag { font-size: 13px; opacity: .85; font-weight: 500; }
.bw-all { font-family: var(--display); font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 999px;
background: rgba(255,255,255,.92); color: var(--bc); box-shadow: var(--sh); transition: transform .2s; }
.bw-all:hover { transform: translateY(-2px); }
/* marquee par marque */
.bw-marq { overflow: hidden; padding-block: 8px; position: relative; z-index: 2; }
.bw-marq .trk { display: flex; gap: 48px; width: max-content; animation: marq 26s linear infinite; }
.bw-marq span { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .16em;
text-transform: uppercase; white-space: nowrap; opacity: .85; }
.bw-marq i { font-style: normal; color: var(--gold); }
@keyframes marq { to { transform: translateX(-50%); } }
html[dir="rtl"] .bw-marq .trk { animation-name: marqR; }
@keyframes marqR { to { transform: translateX(50%); } }
/* bande de contenu : promos + produits + vidéos ensemble */
.bw-strip { display: flex; gap: 14px; overflow-x: auto; padding: 18px clamp(18px, 3vw, 34px) 24px;
position: relative; z-index: 2; scrollbar-width: none; }
.bw-strip::-webkit-scrollbar { display: none; }
.bw-visual { flex: 0 0 clamp(240px, 26vw, 340px); border-radius: var(--r); overflow: hidden; scroll-snap-align: start;
box-shadow: var(--sh); }
.bw-visual img { width: auto; height: 100%; max-width: none; object-fit: contain; display: block; }
.bw-visual:hover img { transform: none; }
.bw-visual:hover img { transform: scale(1.05); }
.bw-video { flex: 0 0 clamp(170px, 17vw, 215px); aspect-ratio: 9/16; border-radius: var(--r); overflow: hidden;
background: #101010; scroll-snap-align: start; cursor: pointer; box-shadow: var(--sh); position: relative; }
.bw-video video { width: 100%; height: 100%; object-fit: cover; }
.bw-video.wide { flex: 0 0 clamp(280px, 30vw, 380px); aspect-ratio: 16/9; align-self: center; }
.bw-video::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); border-radius: var(--r); }
/* décors par marque */
.bw-zeina { background: linear-gradient(150deg, #552988, #3d1d66); color: #fff; }
.bw-zeina .safari { position: absolute; inset: -8%; opacity: .05; display: grid; grid-template-columns: repeat(7,1fr);
align-content: space-between; pointer-events: none; z-index: 1; animation: drift 60s linear infinite alternate; }
.bw-zeina .safari img { width: 58px; filter: brightness(0) invert(1); justify-self: center; }
@keyframes drift { from { transform: translate(-1.4%,-1%); } to { transform: translate(1.4%,1%); } }
.bw-zeina .bw-marq { background: rgba(255,255,255,.07); }
.bw-smile { background: linear-gradient(150deg, #0b7ea8, #095e7e); color: #fff; }
.bw-smile::before { content: ""; position: absolute; inset-inline-start: -10%; top: -40%; width: 70%; aspect-ratio: 1;
background: radial-gradient(circle, rgba(144,192,24,.35), transparent 65%); pointer-events: none; }
.bw-tenderly { background: linear-gradient(150deg, #eef2fb, #dfe7f7); color: #223; }
.bw-tenderly .bw-all { color: var(--td); }
.bw-tenderly .bw-marq { background: rgba(44,72,160,.08); }
.bw-tenderly .bw-marq span { color: var(--td); }
.bw-tutto { background: linear-gradient(150deg, #f9df25, #f3c412); color: #8f0a20; }
.bw-tutto .bw-all { color: var(--tt); }
.bw-tutto .bw-marq { background: rgba(204,12,48,.1); }
.bw-doomty { background: linear-gradient(150deg, #16336e, #0e2350); color: #fff; }
.bw-belira { background: linear-gradient(150deg, #f6f2fb, #ece2f7); color: #3c2158; }
.bw-belira .bw-all { color: var(--bl); }
.bw-belira .leaf { position: absolute; width: 220px; aspect-ratio: 2/1; border-radius: 0 110px 0 110px;
opacity: .16; pointer-events: none; }
.bw-tamara { background: linear-gradient(150deg, #1b3a5f, #12293f); color: #fff; }
/* ================= CARTE PRODUIT ================= */
.pcard { flex: 0 0 208px; scroll-snap-align: start; background: var(--white); border-radius: var(--r);
overflow: hidden; display: flex; flex-direction: column; position: relative; color: var(--ink);
box-shadow: var(--sh); transition: transform .22s, box-shadow .22s; }
.pcard:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
/* offres X+Y : ROUGE, c'est l'argument qui doit sauter aux yeux */
.pcard .promo-b { position: absolute; top: 9px; inset-inline-start: 9px; z-index: 3;
background: linear-gradient(135deg, #E01B3C, #B8102C);
color: #fff; font-family: var(--display); font-weight: 800; font-size: 12px; padding: 5px 11px;
border-radius: 999px; letter-spacing: .01em;
box-shadow: 0 4px 14px rgba(200,16,44,.34), 0 0 0 2px rgba(255,255,255,.9); }
.pcard .vbadge { position: absolute; top: 9px; inset-inline-end: 9px; z-index: 3; width: 27px; height: 27px;
border-radius: 50%; background: rgba(25,25,25,.72); color: #fff; display: grid; place-items: center; font-size: 10px; }
.pcard .ph { aspect-ratio: 1; display: grid; place-items: center; padding: 14px; background: #fff; position: relative; }
.pcard .ph img { max-height: 100%; max-width: 90%; object-fit: contain; transition: transform .28s; }
.pcard:hover .ph img { transform: scale(1.07) rotate(-1deg); }
.pcard .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.pcard.playing .ph video { opacity: 1; }
.pcard .bd { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1; border-top: 1px solid var(--line); }
.pcard .chip { align-self: flex-start; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: #fff; background: var(--bc, var(--ink)); padding: 3px 9px; border-radius: 999px; }
.pcard .nm { font-weight: 700; font-size: 13px; line-height: 1.32; min-height: 2.6em; }
.pcard .sp { font-size: 11px; color: var(--soft); display: flex; gap: 8px; flex-wrap: wrap; font-weight: 500; }
.pcard .row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard .lock { font-size: 11px; color: var(--soft); display: flex; align-items: center; gap: 5px; font-weight: 600; }
.pcard .add { width: 38px; height: 38px; border-radius: 50%; background: var(--bc, var(--ink)); color: #fff;
font-size: 20px; display: grid; place-items: center; transition: transform .18s, filter .18s; flex: none; }
.pcard .add:hover { transform: scale(1.14); filter: brightness(1.15); }
/* pack qui vole vers le panier */
.fly { position: fixed; z-index: 400; pointer-events: none; width: 76px; height: 76px; object-fit: contain;
transition: all .75s cubic-bezier(.4,.1,.6,1); border-radius: 12px; }
/* ================= BAKRIM & SES MARQUES ================= */
.bkintro { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.bk-title { font-weight: 700; font-size: clamp(24px, 3.8vw, 42px); letter-spacing: -.015em;
color: #4a4453; margin-bottom: clamp(22px, 3.4vw, 36px); }
.bk-title::after { content: ""; display: block; width: 64px; height: 3.5px; border-radius: 99px;
background: var(--gold); margin: 14px auto 0; }
.ltrack { display: flex; width: max-content; animation: marq 34s linear infinite; }
.lgrid:hover .ltrack { animation-play-state: paused; }
html[dir="rtl"] .ltrack { animation-name: marqR; }
.lgrid { overflow: hidden; padding-block: 4px 8px; }
.lcard { background: var(--white); border-radius: 22px; box-shadow: var(--sh); padding: 12px;
display: grid; place-items: center; width: 236px; height: 124px; flex: none; margin-inline-end: 18px;
position: relative; overflow: hidden;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lcard:hover { transform: scale(1.03); box-shadow: 0 14px 34px rgba(51,46,58,.12); }
.lcard img { width: 90%; height: 86%; object-fit: contain; }
.lcard img { max-height: 100px; }
.lcard[data-b="koko"] img { width: auto; height: 100px; }
.lcard[data-b="smile"] img, .lcard[data-b="tamara"] img { height: 98%; width: 96%; }
/* ================= PARTENAIRES / CLIENTS ================= */
.partners { margin-top: clamp(36px, 5vw, 60px); }
.partners h5 { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft);
text-align: center; margin-bottom: 18px; font-weight: 700; }
.p-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.p-card { background: var(--white); border-radius: var(--r); box-shadow: var(--sh); padding: 16px 26px;
display: grid; place-items: center; min-width: 120px; min-height: 66px; transition: transform .2s; }
.p-card:hover { transform: translateY(-4px); }
.p-card img { max-height: 38px; max-width: 120px; object-fit: contain; }
.p-card b { font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--bc, var(--ink)); }
.p-card.cl b { color: var(--ink); }
/* socials footer */
.socials { display: flex; gap: 10px; margin-top: 16px; }
.socials a, .socials span { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
background: rgba(255,255,255,.1); color: #fff; transition: background .2s, transform .2s; }
.socials a:hover { background: var(--gold); color: var(--ink); transform: translateY(-3px); }
.socials span { opacity: .45; cursor: default; }
.socials svg { width: 18px; height: 18px; }
/* ================= CTA REVENDEUR ================= */
.b2b { margin-top: clamp(40px, 6vw, 72px); background: var(--ink); border-radius: var(--r-lg); color: #fff;
padding: clamp(28px, 5vw, 58px); position: relative; overflow: hidden;
display: grid; grid-template-columns: 1.4fr 1fr; gap: 26px; align-items: center; }
.b2b::before { content: ""; position: absolute; inset-inline-end: -80px; top: -80px; width: 320px; aspect-ratio: 1;
border-radius: 50%; background: radial-gradient(circle, rgba(240,196,31,.25), transparent 70%); }
@media (max-width: 780px) { .b2b { grid-template-columns: 1fr; } }
.b2b h2 { font-weight: 800; font-size: clamp(24px, 3.6vw, 42px); }
.b2b p { opacity: .82; margin-top: 10px; font-size: 15.5px; max-width: 56ch; line-height: 1.65; }
.b2b .acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; }
.btn { font-family: var(--display); font-weight: 700; font-size: 14.5px; padding: 15px 28px; border-radius: 999px;
display: inline-flex; align-items: center; gap: 9px; transition: transform .18s, box-shadow .18s; }
.btn:hover { transform: translateY(-2px); }
.btn-w { background: #fff; color: var(--ink); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-line { border: 2px solid rgba(255,255,255,.5); color: #fff; }
/* ================= FOOTER PREMIUM ================= */
.foot { background: var(--ink); color: rgba(255,255,255,.85); margin-top: clamp(44px, 6vw, 80px); }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(22px, 3.5vw, 52px);
padding-block: clamp(36px, 5vw, 60px); }
@media (max-width: 880px) { .foot-top { grid-template-columns: 1fr 1fr; } }
.foot .fb { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.foot .fb img { height: 46px; filter: drop-shadow(0 0 14px rgba(255,255,255,.15)); }
.foot .fb b { font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; }
.foot p.ab { font-size: 13.5px; line-height: 1.75; opacity: .75; }
.foot h5 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 15px; font-weight: 700; }
.foot ul { list-style: none; display: grid; gap: 9px; font-size: 14px; }
.foot ul a { opacity: .8; transition: opacity .15s, padding .15s; }
.foot ul a:hover { opacity: 1; padding-inline-start: 4px; }
.foot .legal { border-top: 1px solid rgba(255,255,255,.12); padding-block: 16px; font-size: 12px; opacity: .6;
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* ================= TIROIR COMMANDE ================= */
.drawer { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(430px, 100vw); background: var(--white);
z-index: 320; box-shadow: var(--sh-lg); transform: translateX(110%); transition: transform .34s cubic-bezier(.2,.8,.2,1);
display: flex; flex-direction: column; }
html[dir="rtl"] .drawer { transform: translateX(-110%); }
.drawer.open { transform: none !important; }
.drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer .dh b { font-family: var(--display); font-weight: 800; font-size: 18px; }
.drawer .dh button { background: var(--paper); width: 38px; height: 38px; border-radius: 50%; font-size: 16px; }
.drawer .items { flex: 1; overflow-y: auto; padding: 16px 22px; display: grid; gap: 12px; align-content: start; }
.ditem { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
background: var(--paper); border-radius: var(--r); padding: 10px; border-inline-start: 4px solid var(--bc, var(--line)); }
.ditem img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 10px; }
.ditem .n { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.ditem .b { font-size: 10px; color: var(--bc, var(--soft)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ditem .q { display: flex; align-items: center; gap: 8px; }
.ditem .q button { width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; }
.ditem .q b { min-width: 20px; text-align: center; font-size: 14px; }
.drawer .df { padding: 16px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.drawer .note { font-size: 12px; color: var(--soft); display: flex; gap: 7px; align-items: center; font-weight: 500; }
.btn-wa { background: var(--wa); color: #fff; justify-content: center; width: 100%; }
.btn-wa:hover { box-shadow: 0 14px 34px rgba(31,168,85,.4); }
.overlay { position: fixed; inset: 0; background: rgba(25,25,25,.5); backdrop-filter: blur(3px); z-index: 310;
opacity: 0; pointer-events: none; transition: opacity .3s; }
.overlay.on { opacity: 1; pointer-events: auto; }
.empty-cart { text-align: center; color: var(--soft); font-size: 13.5px; padding: 34px 12px; }
/* ================= LIGHTBOX VIDÉO ================= */
.lb { position: fixed; inset: 0; z-index: 380; background: rgba(15,13,18,.9); backdrop-filter: blur(8px);
display: none; place-items: center; padding: 20px; }
.lb.open { display: grid; }
.lb video, .lb img { max-width: min(94vw, 900px); max-height: 88svh; border-radius: 18px; box-shadow: var(--sh-lg); }
.lb .x { position: fixed; top: 18px; inset-inline-end: 20px; width: 44px; height: 44px; border-radius: 50%;
background: #fff; font-size: 18px; }
/* ================= BARRE MOBILE ================= */
.mbar { display: none; }
@media (max-width: 768px) {
.mbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 200;
background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--line);
padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
.mbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700;
color: var(--soft); position: relative; }
.mbar button.on, .mbar button:active { color: var(--ink); }
.mbar svg { width: 22px; height: 22px; }
.mbar .badge { position: absolute; top: -3px; inset-inline-end: 16%; min-width: 17px; height: 17px; border-radius: 99px;
background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 800; display: grid; place-items: center; }
body { padding-bottom: 74px; }
.hdr-act .hact { display: none; }
}
/* reveal générique */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; } }
/* ================= BLOC MARQUE — ouverture logo, spec band, marquee en pied ================= */
.bw-open { text-align: center; padding: clamp(26px,4vw,54px) 16px clamp(20px,3vw,34px); position: relative; z-index: 2; }
.bw-lg { height: clamp(58px, 7.5vw, 104px); width: auto; margin-inline: auto; display: block;
filter: drop-shadow(0 6px 22px rgba(0,0,0,.22)); }
.bw-wm { font-size: clamp(30px,5vw,54px); font-weight: 800; letter-spacing: -.02em; }
.bw-sig { margin-top: 14px; font-size: clamp(12.5px,1.3vw,15px); letter-spacing: .2em;
text-transform: uppercase; opacity: .78; font-weight: 500; }
.bw-rule { display: block; width: 54px; height: 2px; background: var(--gold); margin: 20px auto 0; border-radius: 2px; }
.bw-feat { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px,1.4vw,20px);
padding-inline: clamp(14px,2vw,26px); position: relative; z-index: 2; }
@media (max-width: 1000px) { .bw-feat { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bw-feat { grid-template-columns: 1fr; } }
.hcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 34px rgba(20,10,40,.16);
display: flex; flex-direction: column; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.hcard:hover { transform: translateY(-6px); }
.hc-ph { aspect-ratio: 1/1; display: grid; place-items: center; padding: 12px; background: #fff; }
.hc-ph img { width: 100%; height: 100%; object-fit: contain; }
.hc-lb { padding: 0 16px 12px; text-align: center; }
.hc-lb small { display: block; font-size: 10.5px; letter-spacing: .18em; color: #8a83a0; font-weight: 700; }
.hc-lb b { display: block; margin-top: 5px; font-size: 13.5px; color: var(--ink); line-height: 1.28; }
/* bandeau couleur-marque : les icônes BLANCHES ne vont QUE sur fond coloré */
.hc-band { margin-top: auto; display: flex; align-items: center; justify-content: center;
background: #552988; padding: 12px 6px; }
.hc-band i { flex: 1; display: grid; place-items: center; padding: 0 6px; }
.hc-band i + i { border-inline-start: 1px solid rgba(255,255,255,.26); }
.hc-band img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.hc-sub { background: #43206b; padding: 9px 12px; display: grid; place-items: center; }
.hc-sub img { height: 20px; width: auto; object-fit: contain; }
.bw-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
padding: clamp(16px,2vw,26px) clamp(14px,2vw,26px) clamp(20px,2.6vw,32px); position: relative; z-index: 2; }
.bw-foot .bw-marq { flex: 1; min-width: 200px; border-radius: 99px; }
/* ---- badge origine (drapeau dessiné, zéro emoji) ---- */
.bw-origin { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
padding: 7px 14px 7px 8px; border-radius: 99px;
background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.20); }
.bw-origin .flag { width: 24px; height: 16px; display: block; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0,0,0,.28); flex: none; }
.bw-tenderly .bw-origin, .bw-smile .bw-origin, .bw-tutto .bw-origin,
.bw-doomty .bw-origin, .bw-belira .bw-origin, .bw-tamara .bw-origin {
background: rgba(20,12,40,.06); border-color: rgba(20,12,40,.12); }
/* ---- promos : pleine largeur, ratio réel, AUCUN texte coupé ---- */
.bw-promos { display: grid; gap: clamp(12px,1.4vw,20px); position: relative; z-index: 2;
padding: clamp(16px,2vw,24px) clamp(18px,3vw,34px) 0;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bw-promo { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); cursor: zoom-in;
background: rgba(255,255,255,.06); }
.bw-promo img { width: 100%; height: auto; display: block; object-fit: contain;
transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.bw-promo:hover img { transform: scale(1.02); }
/* sous-titre de la section logos */
.bk-sub { margin-top: 10px; margin-bottom: clamp(22px, 3vw, 36px); font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
font-weight: 600; color: #8a83a0; }
.pcard .ph .nophoto { display: grid; place-items: center; width: 100%; height: 100%;
font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
color: #a49dba; background: repeating-linear-gradient(135deg, #f6f4f8 0 10px, #f1eef5 10px 20px); }
/* ---- films de marque : rangée séparée, jamais mélangée aux produits ---- */
.bw-films { position: relative; z-index: 2; padding: clamp(10px,1.4vw,18px) clamp(18px,3vw,34px) 4px; }
.bw-sect { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
opacity: .62; margin-bottom: 12px; }
.bw-filmrow { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; }
.bw-filmrow::-webkit-scrollbar { display: none; }
/* ---- pastilles de couleur (variantes d'un même produit) ---- */
.vars { display: flex; gap: 7px; margin-top: 9px; }
.sw { width: 17px; height: 17px; border-radius: 50%; background: var(--sw); cursor: pointer;
border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(20,12,40,.18); padding: 0;
transition: transform .18s, box-shadow .18s; }
.sw:hover { transform: scale(1.14); }
.sw.on { box-shadow: 0 0 0 2px var(--ink); }
.sw:focus { outline: none; }
.sw:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
/* ================= CATALOGUE — facettes + résultats ================= */
.cat-head { padding: clamp(18px,2.4vw,30px) 0 clamp(12px,1.6vw,18px); }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8a83a0; font-weight: 500; }
.crumb a { color: #8a83a0; } .crumb a:hover { color: var(--ink); }
.crumb b { color: var(--ink); font-weight: 700; }
.cat-head h1 { margin-top: 10px; font-size: clamp(26px,3.4vw,42px); font-weight: 800; letter-spacing: -.02em; }
.cat-lede { margin-top: 7px; font-size: 14px; color: #6f6885; }
.cat-lay { display: grid; grid-template-columns: 262px 1fr; gap: clamp(18px,2.4vw,32px);
align-items: start; padding-bottom: clamp(40px,6vw,80px); }
/* --- panneau de facettes --- */
.facets { position: sticky; top: 96px; background: #fff; border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 16px; box-shadow: 0 2px 14px rgba(30,20,45,.05); }
.fx-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px;
border-bottom: 1px solid var(--line); }
.fx-head b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.fx-clear { font-size: 12px; font-weight: 600; color: var(--wa); background: none; border: 0; cursor: pointer; padding: 0; }
.fx-clear:hover { text-decoration: underline; }
.fx-active { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0 0; }
.fx-active:empty { padding: 0; }
.fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: #faf9fc;
color: var(--ink); cursor: pointer; }
.fchip i { font-style: normal; opacity: .5; font-size: 10px; }
.fchip:hover { background: #f2eff7; } .fchip:hover i { opacity: 1; }
.fx { border-bottom: 1px solid var(--line); padding: 12px 0; }
.fx:last-child { border-bottom: 0; padding-bottom: 0; }
.fx > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 700; color: var(--ink); }
.fx > summary::-webkit-details-marker { display: none; }
.fx > summary::after { content: ""; margin-inline-start: auto; width: 8px; height: 8px;
border-right: 2px solid #a49dba; border-bottom: 2px solid #a49dba; transform: rotate(45deg);
transition: transform .2s; }
.fx[open] > summary::after { transform: rotate(-135deg); }
.fx > summary em { font-style: normal; font-size: 11px; font-weight: 700; color: #fff;
background: var(--ink); border-radius: 99px; min-width: 18px; height: 18px; display: grid;
place-items: center; padding: 0 5px; }
.fx ul { list-style: none; margin: 10px 0 0; padding: 0; max-height: 232px; overflow-y: auto; }
.fx ul::-webkit-scrollbar { width: 6px; }
.fx ul::-webkit-scrollbar-thumb { background: rgba(20,12,40,.16); border-radius: 99px; }
.fopt { display: flex; align-items: center; gap: 10px; padding: 7px 2px; cursor: pointer; font-size: 13.5px; }
.fopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fopt .bx { width: 16px; height: 16px; border-radius: 5px; border: 1.6px solid #cfc9dc;
flex: none; position: relative; transition: all .16s; }
.fopt input:checked + .bx { background: var(--ink); border-color: var(--ink); }
.fopt input:checked + .bx::after { content: ""; position: absolute; inset-inline-start: 5px; top: 2px;
width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.fopt input:focus-visible + .bx { box-shadow: 0 0 0 3px rgba(240,196,0,.5); }
.fopt .bdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--ink); }
.fopt .bdot[data-b="zeina"] { background: #552988; } .fopt .bdot[data-b="smile"] { background: #0090c0; }
.fopt .bdot[data-b="tenderly"] { background: #003087; } .fopt .bdot[data-b="tutto"] { background: #e30613; }
.fopt .bdot[data-b="tamara"] { background: #8a6bbf; } .fopt .bdot[data-b="doomty"] { background: #16357a; }
.fopt .bdot[data-b="belira"] { background: #6db33f; }
.fopt .ftxt { flex: 1; color: #453e59; }
.fopt:hover .ftxt { color: var(--ink); }
.fopt b { font-size: 11.5px; font-weight: 600; color: #a49dba; }
/* --- barre d'outils + résultats --- */
.rtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.rspace { flex: 1; }
.fx-toggle { display: none; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff;
color: var(--ink); cursor: pointer; }
.fx-toggle .n { background: var(--ink); color: #fff; border-radius: 99px; font-size: 11px;
min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 4px; }
.sortw { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6f6885; }
.sortw select { font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff;
border: 1px solid var(--line); border-radius: 99px; padding: 8px 12px; cursor: pointer; }
.viewt { display: inline-flex; background: #f2eff7; border-radius: 99px; padding: 3px; }
.viewt button { width: 32px; height: 30px; border-radius: 99px; border: 0; background: none;
color: #8a83a0; cursor: pointer; display: grid; place-items: center; transition: all .18s; }
.viewt button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(30,20,45,.12); }
.pgrid { display: grid; gap: clamp(12px,1.4vw,18px);
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.pgrid.list { grid-template-columns: 1fr; }
.pgrid.list .pcard { display: grid; grid-template-columns: 132px 1fr; align-items: center; }
.pgrid.list .pcard .ph { aspect-ratio: 1/1; }
.pgrid.list .pcard .bd { padding: 14px 18px; }
.empty { text-align: center; padding: 60px 20px; display: grid; gap: 16px; justify-items: center; }
.empty b { font-size: 17px; color: #6f6885; font-weight: 600; }
@media (max-width: 900px) {
.cat-lay { grid-template-columns: 1fr; }
.fx-toggle { display: inline-flex; }
.facets { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(88vw, 330px);
z-index: 60; border-radius: 0; overflow-y: auto; transform: translateX(-102%);
transition: transform .3s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 40px rgba(20,12,40,.22); }
html[dir="rtl"] .facets { transform: translateX(102%); }
.facets.open { transform: none; }
}
/* ---- facettes : logos de marque + icones de categorie ---- */
.fopt .blogo { width: 56px; height: 28px; flex: none; display: grid; place-items: center; }
.fopt .blogo img { max-width: 100%; max-height: 100%; object-fit: contain;
filter: saturate(.25) opacity(.62); transition: filter .18s; }
.fopt:hover .blogo img, .fopt input:checked ~ .blogo img { filter: none; }
.fopt .cico { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.fopt .cico img { max-width: 100%; max-height: 100%; object-fit: contain;
opacity: .55; transition: opacity .18s; }
.fopt:hover .cico img, .fopt input:checked ~ .cico img { opacity: 1; }
.fx ul { max-height: 296px; }
/* ---- barre de marques en haut du catalogue ---- */
.brandbar { display: grid; grid-auto-flow: column; gap: 10px; overflow-x: auto;
padding: 4px 2px 14px; scroll-snap-type: x proximity; }
.bb { flex: none; min-width: 118px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line);
border-radius: 14px; padding: 12px 14px 10px; display: grid; gap: 5px; justify-items: center;
cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s; }
.bb:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(30,20,45,.10); }
.bb img { height: 38px; width: auto; max-width: 100%; object-fit: contain; }
.bb small { font-size: 11px; color: #a49dba; font-weight: 600; }
.bb.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
@media (max-width: 900px) { .brandbar { grid-auto-flow: column; } }
/* ================= FICHE PRODUIT — la page prend les couleurs de la marque ================= */
.pdp-crumb { padding: clamp(14px,2vw,22px) 0 clamp(10px,1.4vw,16px); flex-wrap: wrap; }
.wrapin { max-width: var(--w, 1280px); margin-inline: auto; padding-inline: clamp(14px,3vw,28px); }
/* ---- HÉROS ---- */
.phero { position: relative; margin-inline: calc(50% - 50vw); width: 100vw;
background: linear-gradient(135deg, var(--bp2) 0%, var(--bp) 55%, var(--bp) 100%);
color: #fff; overflow: hidden; padding-block: clamp(28px,5vw,60px); border-radius: 0 0 clamp(22px,3vw,40px) clamp(22px,3vw,40px); }
.phero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(90% 70% at 78% 18%, rgba(255,255,255,.16), transparent 62%); }
.phero-in { position: relative; z-index: 2; max-width: 1280px; margin-inline: auto;
padding-inline: clamp(16px,3vw,28px); display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(20px,4vw,56px); align-items: center; }
.phero-txt { display: grid; gap: 14px; justify-items: start;
animation: pIn .7s cubic-bezier(.2,.8,.2,1) both; }
.phero-lg { height: clamp(38px,4.4vw,58px); width: auto; max-width: 210px; object-fit: contain;
filter: brightness(0) invert(1) drop-shadow(0 3px 12px rgba(0,0,0,.25)); }
.phero-tag { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.74); font-weight: 600; }
.phero h1 { font-size: clamp(26px,3.8vw,50px); line-height: 1.04; font-weight: 800; letter-spacing: -.025em; }
.phero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.phero-chips span { font-size: 12.5px; font-weight: 600; color: #fff;
background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2);
border-radius: 99px; padding: 6px 13px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* ---- bloc offre 5+1 ---- */
.offer { display: inline-flex; align-items: center; gap: 14px; margin-top: 4px;
background: linear-gradient(135deg,#E01B3C,#B8102C); color: #fff;
border-radius: 16px; padding: 11px 20px 11px 14px;
box-shadow: 0 10px 26px rgba(200,16,44,.36), 0 0 0 2px rgba(255,255,255,.16) inset;
animation: offPulse 2.6s ease-in-out infinite; }
.offer-n { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--display); }
.offer-n b { font-size: 30px; font-weight: 800; line-height: 1; }
.offer-n i { font-style: normal; font-size: 17px; opacity: .8; }
.offer-n em { font-style: normal; font-size: 30px; font-weight: 800; color: var(--gold); line-height: 1; }
.offer-t { display: grid; gap: 2px; line-height: 1.15; }
.offer-t b { font-size: 14px; font-weight: 700; }
.offer-t small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
@keyframes offPulse {
0%,100% { box-shadow: 0 10px 26px rgba(200,16,44,.36), 0 0 0 2px rgba(255,255,255,.16) inset; }
50% { box-shadow: 0 10px 34px rgba(200,16,44,.55), 0 0 0 2px rgba(255,255,255,.28) inset; }
}
/* sélecteur de quantité — base (réutilisable partout) */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px;
overflow: hidden; background: #fff; }
.qty button { width: 42px; height: 46px; border: 0; background: none; font-size: 19px; cursor: pointer;
color: var(--ink); transition: background .15s; }
.qty button:hover { background: rgba(0,0,0,.05); }
.qty input { width: 54px; height: 46px; border: 0; background: none; text-align: center;
font: inherit; font-weight: 800; font-size: 16px; color: var(--ink); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.phero-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.phero-buy .qty { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.phero-buy .qty button, .phero-buy .qty input { color: #fff; }
.phero-buy .qty button:hover { background: rgba(255,255,255,.14); }
.btn-add { background: #fff; color: var(--bp2); font-weight: 700; padding: 13px 26px;
border-radius: 99px; border: 0; cursor: pointer; font-size: 14.5px;
transition: transform .2s, box-shadow .2s; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.btn-add:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.26); }
.btn-add:active { transform: translateY(0); }
.phero-lock { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(255,255,255,.72); }
.phero-ph { position: relative; display: grid; place-items: center; background: #fff;
border-radius: clamp(20px,2.4vw,30px); padding: clamp(18px,2.6vw,36px);
box-shadow: 0 30px 60px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.08);
animation: pIn .9s cubic-bezier(.2,.8,.2,1) both;
transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s; will-change: transform; }
.phero-ph.tilt { transition: transform .08s linear, box-shadow .3s;
box-shadow: 0 40px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.10); }
.phero-ph.tilt img { pointer-events: none; }
.phero-ph img { width: 100%; max-width: 460px; height: auto; object-fit: contain; transition: opacity .18s; }
/* sticker d'offre sur le coin de la photo */
.offer-sticker { position: absolute; top: -16px; inset-inline-end: -14px; z-index: 4;
display: grid; place-items: center; gap: 1px; min-width: 96px; min-height: 96px;
padding: 12px 14px; border-radius: 50%;
background: linear-gradient(160deg, #E5233F, #B8102C);
color: #fff; text-align: center; transform: rotate(8deg);
box-shadow: 0 14px 30px rgba(184,16,44,.38), 0 0 0 4px #fff;
animation: stickerIn .6s cubic-bezier(.2,1.4,.3,1) .5s both; }
.offer-sticker b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1;
display: inline-flex; align-items: baseline; gap: 1px; }
.offer-sticker b i { font-style: normal; font-size: 16px; opacity: .85; }
.offer-sticker b em { font-style: normal; color: var(--gold); }
.offer-sticker small.ar { font-family: "IBM Plex Sans Arabic", var(--display); font-size: 14px;
font-weight: 700; letter-spacing: 0; line-height: 1.1; }
@keyframes stickerIn { from { transform: rotate(8deg) scale(0); } to { transform: rotate(8deg) scale(1); } }
html[dir="rtl"] .offer-sticker { transform: rotate(-8deg); }
@keyframes pIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* ---- vignettes de variantes ---- */
.pdp-vars { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
padding-block: clamp(16px,2.4vw,26px); }
.vthumb { position: relative; width: 74px; height: 74px; border-radius: 14px; background: #fff;
border: 1.6px solid var(--line); cursor: pointer; padding: 6px; transition: all .18s; }
.vthumb img { width: 100%; height: 100%; object-fit: contain; }
.vthumb i { position: absolute; inset-block-end: -4px; inset-inline-end: -4px; width: 17px; height: 17px;
border-radius: 50%; background: var(--sw); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(20,12,40,.18); }
.vthumb:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(30,20,45,.14); }
.vthumb.on { border-color: var(--bp); box-shadow: 0 0 0 2px var(--bp); }
/* ---- BANDEAU SPECS : les icônes de la marque, EN GRAND et légendées ---- */
.specband { margin: 18px 0 0; width: auto; border-radius: clamp(18px,2.4vw,30px); background: #fff; border: 1.5px solid var(--line); box-shadow: 0 10px 30px rgba(30,20,45,.06);
padding-block: clamp(20px,3vw,34px); }
.sb-row { max-width: 1180px; margin-inline: auto; padding-inline: clamp(14px,3vw,28px);
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; }
.sb-i { display: grid; justify-items: center; gap: 12px; padding-inline: clamp(8px,2vw,22px);
text-align: center; }
.sb-i + .sb-i { border-inline-start: 1px solid var(--line); }
.sb-i img { height: clamp(88px,9.5vw,130px); width: auto; max-width: 100%; object-fit: contain; }
.sb-i span { font-size: clamp(11.5px,1.15vw,13.5px); font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--bp); text-wrap: balance; max-width: 18ch; line-height: 1.35; }
.sb-sub { margin-top: clamp(16px,2.4vw,26px); display: grid; place-items: center; }
.sb-sub img { height: clamp(26px,3vw,40px); width: auto; object-fit: contain; }
@media (max-width: 700px) {
.sb-row { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 22px; }
.sb-i + .sb-i { border-inline-start: 0; }
.sb-i:nth-child(even) { border-inline-start: 1px solid var(--line); }
}
/* ---- bandeau défilant de la marque ---- */
.pmarq { margin: 18px 0 0; width: auto; border-radius: 14px; background: var(--bp2);
overflow: hidden; padding-block: 11px; }
.pmarq .trk { display: flex; gap: 42px; width: max-content; animation: marq 32s linear infinite; }
.pmarq span { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .18em;
text-transform: uppercase; color: rgba(255,255,255,.86); white-space: nowrap; }
.pmarq i { font-style: normal; color: var(--ba); }
/* ---- sections ---- */
.psec { padding-block: clamp(26px,4vw,52px); opacity: 0; transform: translateY(22px);
transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.psec.in { opacity: 1; transform: none; }
.psec-t { font-size: clamp(17px,2.2vw,26px); font-weight: 800; letter-spacing: -.015em;
margin-bottom: clamp(14px,2vw,22px); }
.psec-t::after { content: ""; display: block; width: 42px; height: 3px; border-radius: 3px;
background: var(--bp); margin-top: 9px; }
/* ---- promos : ratio réel, aucun recadrage ---- */
.promogrid { display: grid; gap: clamp(12px,1.6vw,20px); align-items: start;
grid-template-columns: repeat(auto-fit, minmax(min(100%,280px), 1fr)); }
.promoc { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh); line-height: 0;
background: #fff; }
.promoc img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.promoc:hover img { transform: scale(1.03); }
/* ---- reels ---- */
.reelrow { display: flex; gap: clamp(10px,1.4vw,16px); overflow-x: auto; padding-bottom: 10px;
scroll-snap-type: x proximity; }
.reelrow::-webkit-scrollbar { height: 8px; }
.reelrow::-webkit-scrollbar-thumb { background: rgba(20,12,40,.16); border-radius: 99px; }
.reel { position: relative; flex: 0 0 clamp(150px,17vw,208px); aspect-ratio: 9/16;
border-radius: var(--r); overflow: hidden; background: #14101c;
scroll-snap-align: start; box-shadow: var(--sh); transition: transform .25s; }
.reel:hover { transform: translateY(-4px); }
.reel video { width: 100%; height: 100%; object-fit: cover; background: #101010; }
.reel.hero { flex: 0 0 clamp(180px,20vw,250px); box-shadow: 0 0 0 2px var(--ba), var(--sh-lg); }
/* ---- détails ---- */
.detgrid { display: grid; gap: clamp(16px,2vw,28px); grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr)); align-items: start; }
.detcol { background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 3px 9px rgba(30,20,45,.05), 0 18px 44px rgba(30,20,45,.08); }
.detcol h3 { display: flex; align-items: center; gap: 10px; margin: 0;
font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: #fff;
background: linear-gradient(120deg, var(--bp2), var(--bp)); padding: 15px 20px; }
.detcol h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ba); flex: none; }
.dtable { display: grid; padding: 6px 0 10px; }
.dtable > div { display: grid; grid-template-columns: minmax(120px,.72fr) 1.28fr; gap: 16px;
padding: 12px 20px; font-size: 13.5px; align-items: baseline; }
.dtable > div + div { border-top: 1px solid #f2eff6; }
.dtable dt { color: #8a83a0; font-weight: 600; font-size: 12.5px; }
.dtable dd { color: var(--ink); font-weight: 600; line-height: 1.55; }
.srcl { color: #b3abc6; font-size: 12px; text-decoration: none; }
.srcl:hover { color: var(--bp); }
.pdp-note { margin-top: 22px; border-inline-start: 3px solid var(--gold); background: #fffaed;
border-radius: 0 12px 12px 0; padding: 14px 16px; }
.pdp-note b { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
color: #8a6b12; margin-bottom: 7px; }
.pdp-note ul { margin: 0; padding-inline-start: 18px; font-size: 13px; color: #5b5470; line-height: 1.65; }
.relrow { display: grid; gap: clamp(12px,1.4vw,18px);
grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.relrow .pcard { display: block; }
/* ---- barre d'achat collante ---- */
.stickybuy { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70;
background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border-top: 1px solid var(--line); padding: 10px clamp(14px,3vw,24px);
display: flex; align-items: center; gap: 14px; transform: translateY(110%);
transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.stickybuy.on { transform: none; }
.stickybuy .sb-nm { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stickybuy .btn-add { background: var(--bp); color: #fff; padding: 11px 20px; font-size: 13.5px; }
@media (min-width: 861px) { .stickybuy { display: none; } }
@media (max-width: 860px) {
.phero-in { grid-template-columns: 1fr; text-align: center; }
.phero-txt { justify-items: center; }
.phero-ph { order: -1; }
.phero-ph img { max-width: 320px; }
.stickybuy { border-radius: 16px 16px 0 0; box-shadow: 0 -8px 26px rgba(25,25,25,.10);
padding-bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 190; }
}
/* la barre d'achat se pose AU-DESSUS de la barre app du bas (visible ≤768px) */
@media (max-width: 768px) {
.stickybuy { inset-block-end: 56px; padding-bottom: 10px; }
}
/* ---- raffinements héros : cascade d'entrée + pastille catégorie ---- */
.phero-txt { animation: none; }
.phero-txt > * { opacity: 0; transform: translateY(18px);
animation: pIn .65s cubic-bezier(.2,.8,.2,1) forwards; }
.phero-txt > *:nth-child(1) { animation-delay: .05s; }
.phero-txt > *:nth-child(2) { animation-delay: .13s; }
.phero-txt > *:nth-child(3) { animation-delay: .21s; }
.phero-txt > *:nth-child(4) { animation-delay: .29s; }
.phero-txt > *:nth-child(5) { animation-delay: .37s; }
.phero-txt > *:nth-child(6) { animation-delay: .45s; }
.phero-txt > *:nth-child(7) { animation-delay: .53s; }
.phero-txt > *:nth-child(8) { animation-delay: .61s; }
.phero-pill { display: inline-block; background: var(--gold); color: #3a2c00;
font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .12em;
text-transform: uppercase; padding: 6px 14px; border-radius: 999px;
box-shadow: 0 4px 14px rgba(0,0,0,.18); }
/* balayage lumineux sur l'offre */
.offer { position: relative; overflow: hidden; }
.offer::after { content: ""; position: absolute; inset: -40% auto -40% -70%; width: 42%;
background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
transform: skewX(-18deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 55% { inset-inline-start: -70%; } 100% { inset-inline-start: 160%; } }
html[dir="rtl"] .offer::after { animation-name: shineR; }
@keyframes shineR { 0%, 55% { inset-inline-end: -70%; inset-inline-start: auto; } 100% { inset-inline-end: 160%; inset-inline-start: auto; } }
/* cascade du bandeau specs */
.specband.rvv { opacity: 1; transform: none; }
.specband .sb-i { opacity: 0; transform: translateY(16px);
transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.specband.in .sb-i { opacity: 1; transform: none; }
.specband .sb-i:nth-child(2) { transition-delay: .1s; }
.specband .sb-i:nth-child(3) { transition-delay: .2s; }
.specband .sb-i:nth-child(4) { transition-delay: .3s; }
.specband .sb-sub { opacity: 0; transition: opacity .6s .45s; }
.specband.in .sb-sub { opacity: 1; }
/* ================= RANGÉE GUIDE BAKRIM — icônes du catalogue, chiffres vivants ================= */
.bakrow { display: flex; align-items: stretch; justify-content: center; gap: clamp(14px,3vw,44px);
flex-wrap: wrap; padding: clamp(18px,2.6vw,30px) clamp(14px,3vw,28px);
margin-top: clamp(16px,2.2vw,26px); background: #fff; border-radius: 20px;
box-shadow: 0 3px 9px rgba(30,20,45,.05), 0 18px 44px rgba(30,20,45,.08); }
.bk-i { display: grid; justify-items: center; gap: 8px; }
.bk-i i { display: grid; place-items: center; font-style: normal; color: var(--bp);
font-family: var(--display); }
.bk-i i svg { height: clamp(56px,6.4vw,78px); width: auto; display: block; }
.bk-i small { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a83a0; }
.bk-claim { align-self: center; font-family: var(--display); font-weight: 800;
font-size: clamp(14px,1.6vw,19px); color: var(--bp);
background: color-mix(in srgb, var(--bp) 9%, #fff); border: 2px dashed color-mix(in srgb, var(--bp) 35%, #fff);
border-radius: 16px; padding: 12px 20px; transform: rotate(-2deg); }
/* ================= RAILS SANS ASCENSEUR, PARTOUT ================= */
.reelrow, .bw-strip, .bw-filmrow, .brandbar, .fx ul {
scrollbar-width: none; -ms-overflow-style: none; }
.reelrow::-webkit-scrollbar, .bw-strip::-webkit-scrollbar, .bw-filmrow::-webkit-scrollbar,
.brandbar::-webkit-scrollbar, .fx ul::-webkit-scrollbar { display: none; }
.reelrow { padding-bottom: 4px; }
.lcard.nolink { cursor: default; }
.foot .soon { color: rgba(255,255,255,.44); }
.sb-claim { justify-self: center; }
.sb-claim b { font-family: var(--display); font-weight: 800; color: #fff;
font-size: clamp(15px,1.7vw,21px); line-height: 1.3; white-space: nowrap;
border: 2px dashed rgba(255,255,255,.55); border-radius: 14px; padding: 12px 18px;
transform: rotate(-2deg); display: inline-block; }
/* pile gauche des détails + vidéos carrées à leur place */
.detstack { display: grid; gap: clamp(14px,1.8vw,22px); align-content: start; }
.sqvids { display: grid; gap: clamp(12px,1.6vw,18px); }
.sqvids:empty { display: none; }
.sqvids .reel { flex: none; width: 100%; aspect-ratio: 1/1; border-radius: var(--r-lg); }
.sqvids .reel.wide { aspect-ratio: 16/9; }
.reelrow.sqrow .reel.sq { aspect-ratio: 1; flex-basis: clamp(200px, 24vw, 300px); }
.reelrow.sqrow .reel.sq.wide { aspect-ratio: 16/9; flex-basis: clamp(300px, 36vw, 460px); }
.sqvids .reel:hover { transform: none; }
.promo-b .mj { font-style: normal; font-family: "IBM Plex Sans Arabic", var(--display);
font-size: .82em; font-weight: 700; margin-inline-start: 2px; }
/* pictos colorés sur pastille blanche (Tutto / Tenderly) */
.sb-i.chip img { background: none; border-radius: 0; padding: 0;
height: clamp(58px,7vw,94px); width: clamp(58px,7vw,94px); object-fit: contain;
box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.bw-lg.chip { background: #fff; padding: 14px 26px; border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,.22); height: clamp(64px, 8vw, 112px); }
/* ---- identité revendeur dans le tiroir ---- */
.dident { padding-bottom: 12px; }
.di-t { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
font-weight: 800; color: #8a83a0; margin-bottom: 9px; }
.di-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.di-grid input { font: inherit; font-size: 13.5px; padding: 11px 13px; border-radius: 12px;
border: 1.4px solid var(--line); background: #faf9fc; color: var(--ink); outline: none;
transition: border-color .15s, box-shadow .15s; min-width: 0; }
.di-grid input:focus { border-color: var(--ink); background: #fff; }
.di-grid input.err { border-color: #E01B3C; box-shadow: 0 0 0 3px rgba(224,27,60,.12); }
/* ================= CANEVAS DE MARQUE (RESTAURÉ) — le média n'est JAMAIS coupé ================= */
.cv { height: var(--bH); position: relative; overflow: hidden; border-radius: var(--r-lg); }
.cv::after { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.16), transparent 62%); }
.cv-zeina { background: linear-gradient(112deg, #43206b 0%, #552988 46%, #6b34a4 100%); }
.cv-tenderly { background: linear-gradient(112deg, #00205c 0%, #003087 48%, #1a56b8 100%); }
.cv-in { position: relative; z-index: 1; height: 100%; display: grid; align-items: center;
gap: clamp(16px, 2vw, 30px); padding: clamp(16px, 2vw, 26px);
grid-template-columns: minmax(220px, 1fr) auto auto; }
.cv-tenderly .cv-in { grid-template-columns: minmax(220px, 1fr) auto; }
.cv-txt { color: #fff; display: grid; gap: 14px; justify-items: start;
padding-inline-start: clamp(6px, 1.6vw, 26px); }
.cv-logo { width: clamp(150px, 15vw, 226px); height: auto; display: block;
filter: drop-shadow(0 4px 18px rgba(0,0,0,.28)); }
.cv-logo.tn { width: clamp(130px, 12vw, 186px); background: #fff; padding: 12px 16px; border-radius: 14px; }
.cv-logo.chipw { width: clamp(140px, 13vw, 196px); }
.cv-kick { font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: rgba(255,255,255,.72); font-weight: 600; }
.cv-h { font-size: clamp(28px, 3.6vw, 52px); line-height: .98; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.cv-h em { display: block; font-style: normal; font-weight: 600;
font-size: clamp(14px, 1.35vw, 20px); letter-spacing: 0; margin-top: 10px; color: var(--gold); }
.cv-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px;
background: #fff; color: #3a1d5c; font-weight: 700; font-size: 14px;
padding: 12px 22px; border-radius: 99px; transition: transform .2s, box-shadow .2s; }
.cv-tenderly .cv-cta { color: #00205c; }
.cv-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
/* boîtes média au ratio EXACT du fichier — aucun crop possible */
.cv-m { height: 100%; border-radius: 16px; overflow: hidden; background: rgba(0,0,0,.14);
box-shadow: 0 18px 44px rgba(0,0,0,.26); }
.cv-m img, .cv-m video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cv video { object-fit: contain !important; }
.cv-v { aspect-ratio: 9 / 16; }
.cv-s { aspect-ratio: 1 / 1; height: 78%; }
.cv-w { aspect-ratio: 16 / 9; height: auto; width: 100%; max-height: 100%; }
@media (max-width: 1080px) { .cv-s { display: none; } }
@media (max-width: 860px) {
.cv { height: auto; }
.cv-in { grid-template-columns: 1fr !important; padding: 18px; justify-items: center; }
.cv-txt { justify-items: center; text-align: center; padding: 6px 0 4px; }
.cv-v { aspect-ratio: 9 / 16; height: min(62vh, 420px); width: auto; }
.cv-s { display: none; }
}
/* ================= KICKERS DE SECTION ================= */
.sec-kick { text-align: center; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase;
font-weight: 800; color: #a49dba; margin-bottom: 10px; }
.sec-kick.gold { color: var(--gold); }
.sec-kick.red { color: #E01B3C; }
/* ================= COMMANDER EN 30 SECONDES — rail animé, le carton voyage jusqu'à Bakrim ================= */
.how { padding-block: clamp(30px,4.6vw,64px); text-align: center; }
.flow { position: relative; margin-top: clamp(30px,4vw,54px); display: grid; grid-template-columns: repeat(4, 1fr);
gap: clamp(10px,1.6vw,24px); align-items: start; --ic: 76px; --T: 8s; }
.flow-rail { position: absolute; left: 12.5%; right: 12.5%; top: calc(var(--ic) / 2); height: 3px; border-radius: 99px;
background: rgba(85,41,136,.10); z-index: 0; }
.flow-dash { position: absolute; inset: 0; border-radius: 99px;
background: repeating-linear-gradient(90deg, var(--gold) 0 14px, transparent 14px 26px); background-size: 26px 100%;
opacity: .9; animation: flowDash 1.1s linear infinite; }
html[dir="rtl"] .flow-dash { animation-name: flowDashR; }
@keyframes flowDash { to { background-position: 26px 0; } }
@keyframes flowDashR { to { background-position: -26px 0; } }
.flow-pack { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; transform: translate(-50%, -50%);
filter: drop-shadow(0 10px 16px rgba(60,40,10,.35)); z-index: 3; animation: packRun var(--T) cubic-bezier(.45,0,.2,1) infinite; }
html[dir="rtl"] .flow-pack { animation-name: packRunR; }
.flow-pack svg { width: 100%; height: 100%; display: block; }
@keyframes packRun {
0%, 11% { left: 0%; transform: translate(-50%, -50%) scale(1); }
30%, 41% { left: 33.333%; transform: translate(-50%, -50%) scale(1); }
60%, 71% { left: 66.666%; transform: translate(-50%, -50%) scale(1); }
92% { left: 100%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
97%, 100% { left: 100%; transform: translate(-50%, -50%) scale(.2); opacity: 0; }
}
@keyframes packRunR {
0%, 11% { left: 100%; transform: translate(-50%, -50%) scale(1); }
30%, 41% { left: 66.666%; transform: translate(-50%, -50%) scale(1); }
60%, 71% { left: 33.333%; transform: translate(-50%, -50%) scale(1); }
92% { left: 0%; transform: translate(-50%, -50%) scale(1); opacity: 1; }
97%, 100% { left: 0%; transform: translate(-50%, -50%) scale(.2); opacity: 0; }
}
.flow-step { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding-inline: 6px; }
.flow-step i { width: var(--ic); height: var(--ic); border-radius: 50%; display: grid; place-items: center; position: relative;
background: #fff; color: var(--z); border: 1.6px solid rgba(85,41,136,.16);
box-shadow: 0 0 0 8px var(--bg, #faf9f6), 0 12px 28px rgba(85,41,136,.14);
animation: stepGlow var(--T) cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--k) * 2.4s); }
.flow-step[style*="--k:3"] i { animation-delay: 7.36s; }
@keyframes stepGlow {
0%, 12% { transform: scale(1.12); box-shadow: 0 0 0 8px var(--bg, #faf9f6), 0 0 0 14px rgba(240,196,31,.35), 0 18px 40px rgba(85,41,136,.22); border-color: var(--gold); }
20%, 100% { transform: scale(1); box-shadow: 0 0 0 8px var(--bg, #faf9f6), 0 12px 28px rgba(85,41,136,.14); border-color: rgba(85,41,136,.16); }
}
.flow-step i svg { width: 36px; height: 36px; }
.flow-step i.wa { color: var(--wa); }
.flow-step b { font-size: clamp(14.5px,1.5vw,17.5px); font-weight: 800; margin-top: 6px; }
.flow-step p { font-size: 13px; color: #6f6885; line-height: 1.55; max-width: 230px; }
.flow-step.hub i { width: calc(var(--ic) + 18px); height: calc(var(--ic) + 18px); margin-top: -9px; border-color: rgba(85,41,136,.3);
background: #fff; }
.flow-step.hub i img { width: 60%; height: 60%; object-fit: contain; position: relative; z-index: 1; }
.flow-step.hub .ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(85,41,136,.28);
animation: hubRing 2.6s ease-out infinite; }
.flow-step.hub .ring.r2 { animation-delay: 1.3s; }
@keyframes hubRing { from { transform: scale(.85); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.flow-step.hub b { color: var(--z); }
@media (max-width: 860px) {
.flow { grid-template-columns: 1fr 1fr; gap: 26px 14px; }
.flow-rail { display: none; }
.flow-step i { animation: none; }
}
@media (max-width: 420px) { .flow { grid-template-columns: 1fr; } }
/* ================= ZONE PRO — encre pleine largeur, verre + or ================= */
.prozone { margin-inline: calc(50% - 50vw); width: 100vw;
background:
radial-gradient(110% 90% at 85% -10%, rgba(240,196,31,.14), transparent 55%),
radial-gradient(90% 80% at 0% 110%, rgba(85,41,136,.35), transparent 60%),
linear-gradient(160deg, #221c2e 0%, #17121f 60%, #131019 100%);
padding-block: clamp(38px,5.6vw,84px); color: #fff; }
.pz-in { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px,3vw,28px); }
.prozone h2 { text-align: center; font-size: clamp(24px,3.2vw,40px); font-weight: 800;
letter-spacing: -.02em; color: #fff; margin-bottom: clamp(24px,3.4vw,44px); }
.pz-tools { display: grid; gap: clamp(16px,2.2vw,28px);
grid-template-columns: repeat(auto-fit, minmax(min(100%,360px),1fr)); }
.tool.glass { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
border-radius: 24px; padding: clamp(22px,2.8vw,34px);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: 0 30px 70px rgba(0,0,0,.35); transition: border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
.tool.glass:hover { border-color: rgba(240,196,31,.36); transform: translateY(-4px); }
.tool.glass h3 { font-size: clamp(17px,2vw,22px); font-weight: 800; color: #fff; }
.tool.glass .t-sub { margin: 7px 0 18px; font-size: 13px; color: rgba(255,255,255,.6); }
.tool.glass label { display: grid; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.5); }
.tool.glass select, .tool.glass input { font: inherit; font-size: 13.5px; padding: 12px 14px;
border-radius: 13px; border: 1.4px solid rgba(255,255,255,.16); background: rgba(255,255,255,.07);
color: #fff; outline: none; width: 100%; transition: border-color .2s, background .2s; }
.tool.glass select:focus, .tool.glass input:focus { border-color: var(--gold); background: rgba(255,255,255,.11); }
.tool.glass select option { color: var(--ink); background: #fff; }
.tool.glass input::placeholder { color: rgba(255,255,255,.35); }
.t-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.t-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.t-duel > div { display: grid; gap: 9px; }
.t-out { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 18px;
border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.t-out[hidden] { display: none; }
.t-out.duel { grid-template-columns: 1fr 1fr; }
.t-out div { display: grid; gap: 4px; text-align: center; border-radius: 14px; padding: 12px 8px; }
.t-out small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
color: rgba(255,255,255,.5); }
.t-out b { font-family: var(--display); font-size: clamp(16px,1.9vw,22px); font-weight: 800; color: #fff; }
.t-out .hero { background: linear-gradient(150deg, rgba(240,196,31,.2), rgba(240,196,31,.06));
box-shadow: inset 0 0 0 1px rgba(240,196,31,.32); }
.t-out .hero b { color: var(--gold); }
.t-out.neg b { color: #ff6b84; }
.t-out .win { background: rgba(31,168,85,.16); box-shadow: inset 0 0 0 1px rgba(31,168,85,.4); }
.t-out .win b { color: #5fdc92; }
.t-verdict { margin-top: 14px; font-size: 13px; font-weight: 700; color: #5fdc92; text-align: center; }
@media (max-width: 560px) { .t-grid, .t-duel { grid-template-columns: 1fr; } }
/* chiffres animés, dans la zone pro */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
gap: clamp(12px,2vw,20px); margin-top: clamp(30px,4vw,54px); text-align: center;
border-top: 1px solid rgba(255,255,255,.1); padding-top: clamp(24px,3vw,40px); }
.figures > div { display: grid; gap: 6px; }
.figures b { font-family: var(--display); font-size: clamp(34px,4.4vw,56px); font-weight: 800;
letter-spacing: -.02em; color: #fff;
background: linear-gradient(160deg, #fff 30%, var(--gold)); -webkit-background-clip: text;
background-clip: text; -webkit-text-fill-color: transparent; }
.figures b.ma { background: linear-gradient(160deg, #ff8a97 20%, #E01B3C);
-webkit-background-clip: text; background-clip: text; }
.figures span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
color: rgba(255,255,255,.45); }
/* ================= OFFRES DU MOMENT — grandes cartes, en bas ================= */
.offersec { padding-block: clamp(30px,4.6vw,60px); }
.offrail { display: flex; gap: clamp(14px,1.8vw,22px); overflow-x: auto; padding: 10px 4px 18px;
scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.offrail::-webkit-scrollbar { display: none; }
.offcard { position: relative; flex: 0 0 clamp(240px,24vw,300px); scroll-snap-align: start;
background: #fff; border-radius: 24px; overflow: hidden; padding: 18px 18px 20px;
display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--ink);
box-shadow: 0 2px 8px rgba(30,20,45,.05), 0 22px 54px rgba(30,20,45,.10);
transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.offcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
background: linear-gradient(90deg, #E01B3C, #B8102C); }
.offcard:hover { transform: translateY(-8px); box-shadow: 0 4px 12px rgba(30,20,45,.07), 0 34px 76px rgba(200,16,44,.18); }
.offcard img { width: 78%; aspect-ratio: 1/1; object-fit: contain;
transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.offcard:hover img { transform: scale(1.06) rotate(-1.5deg); }
.oc-badge { position: absolute; top: 14px; inset-inline-start: 14px;
display: grid; place-items: center; gap: 0; min-width: 62px; min-height: 62px; padding: 8px;
border-radius: 50%; background: linear-gradient(160deg, #E5233F, #B8102C); color: #fff;
transform: rotate(-7deg); box-shadow: 0 8px 20px rgba(200,16,44,.35), 0 0 0 3px #fff; }
.oc-badge b { font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1; }
.oc-badge b i { font-style: normal; color: var(--gold); }
.oc-badge small { font-family: "IBM Plex Sans Arabic", var(--display); font-size: 10.5px; font-weight: 700; }
.oc-nm { font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.oc-cta { font-size: 12px; font-weight: 700; color: #a49dba; transition: color .2s; }
.offcard:hover .oc-cta { color: #E01B3C; }
/* ================= DEVENIR REVENDEUR — carte scindée ================= */
.devenir { display: grid; grid-template-columns: 1fr 1.2fr; border-radius: 28px; overflow: hidden;
margin-block: clamp(20px,3vw,40px); box-shadow: 0 3px 10px rgba(30,20,45,.06), 0 30px 70px rgba(30,20,45,.14);
scroll-margin-top: 110px; }
.dv-side { background:
radial-gradient(120% 100% at 100% 0%, rgba(240,196,31,.22), transparent 55%),
linear-gradient(160deg, #221c2e, #131019);
color: #fff; padding: clamp(26px,3.4vw,46px); display: grid; align-content: center; gap: 6px; }
.dv-side .sec-kick { text-align: start; margin-bottom: 2px; }
.dv-side h2 { font-size: clamp(21px,2.6vw,30px); font-weight: 800; color: #fff; letter-spacing: -.02em; }
.dv-perks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.dv-perks li { position: relative; padding-inline-start: 30px; font-size: 13.5px; color: rgba(255,255,255,.78); }
.dv-perks li::before { content: ""; position: absolute; inset-inline-start: 0; top: 1px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--gold) url('data:image/svg+xml;utf8,') center/11px no-repeat; }
.dv-form { background: #fff; padding: clamp(26px,3.4vw,46px); display: grid; align-content: center; gap: 14px; }
.dv-form p { font-size: 13px; color: #6f6885; }
.dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dev-grid input { font: inherit; font-size: 13.5px; padding: 13px 15px; border-radius: 13px;
border: 1.4px solid var(--line); background: #faf9fc; color: var(--ink); outline: none; min-width: 0;
transition: border-color .2s, box-shadow .2s; }
.dev-grid input:focus { border-color: var(--ink); background: #fff; }
.dev-grid input.err { border-color: #E01B3C; box-shadow: 0 0 0 3px rgba(224,27,60,.12); }
@media (max-width: 860px) { .devenir { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dev-grid { grid-template-columns: 1fr; } }
/* révélation chorégraphiée : les .rv internes héritent d'un délai --d */
.rv { transition-delay: var(--d, 0s); }
.offersec .bk-title, .how .bk-title { text-align: center; }
/* ================= PAGE MARQUE ================= */
.mhero { position: relative; margin-inline: calc(50% - 50vw); width: 100vw; overflow: hidden;
background:
radial-gradient(100% 80% at 82% 8%, rgba(255,255,255,.15), transparent 58%),
linear-gradient(150deg, var(--bp2) 0%, var(--bp) 55%, color-mix(in srgb, var(--bp) 78%, #fff) 130%);
color: #fff; padding-block: clamp(34px,5.4vw,78px);
border-radius: 0 0 clamp(22px,3vw,40px) clamp(22px,3vw,40px); }
.mh-motifs { position: absolute; inset: -6%; opacity: .06; display: grid;
grid-template-columns: repeat(6, 1fr); gap: 34px; pointer-events: none; transform: rotate(-7deg); }
.mh-motifs img { width: 64px; filter: brightness(0) invert(1); justify-self: center; }
.mh-in { position: relative; z-index: 2; max-width: 1280px; margin-inline: auto;
padding-inline: clamp(16px,3vw,28px); display: grid; grid-template-columns: 1.15fr 1fr;
gap: clamp(22px,4vw,60px); align-items: center; }
.mh-txt { display: grid; gap: 15px; justify-items: start; }
.mh-txt > * { opacity: 0; transform: translateY(18px); animation: pIn .65s cubic-bezier(.2,.8,.2,1) forwards; }
.mh-txt > *:nth-child(1) { animation-delay: .05s; } .mh-txt > *:nth-child(2) { animation-delay: .13s; }
.mh-txt > *:nth-child(3) { animation-delay: .21s; } .mh-txt > *:nth-child(4) { animation-delay: .29s; }
.mh-txt > *:nth-child(5) { animation-delay: .37s; } .mh-txt > *:nth-child(6) { animation-delay: .45s; }
.mh-logo { height: clamp(52px,6.4vw,86px); width: auto; max-width: 250px; object-fit: contain;
filter: drop-shadow(0 6px 20px rgba(0,0,0,.28)); }
.mh-logo.chip { background: #fff; padding: 12px 22px; border-radius: 16px; }
.mh-kick { font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
color: rgba(255,255,255,.7); font-weight: 700; }
.mhero h1 { font-size: clamp(28px,4vw,56px); line-height: 1.02; font-weight: 800;
letter-spacing: -.025em; color: #fff; }
.mh-lede { font-size: clamp(13.5px,1.4vw,16px); line-height: 1.65; color: rgba(255,255,255,.82);
max-width: 520px; }
.mh-acts .btn-add { display: inline-flex; text-decoration: none; }
.mh-media { border-radius: 22px; overflow: hidden; box-shadow: 0 34px 70px rgba(0,0,0,.35);
max-height: clamp(320px,44vw,520px); justify-self: center;
animation: pIn .9s cubic-bezier(.2,.8,.2,1) .2s both; }
.mh-media video, .mh-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mh-media.card { background: #fff; padding: clamp(16px,2vw,28px); }
@media (max-width: 860px) {
.mh-in { grid-template-columns: 1fr; }
.mh-txt { justify-items: center; text-align: center; }
.mh-media { order: -1; max-width: 320px; }
}
/* histoire : repères */
.mstory { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr));
gap: clamp(14px,2vw,24px); }
.ms-item { background: #fff; border-radius: 20px; padding: clamp(20px,2.6vw,30px);
box-shadow: 0 2px 8px rgba(30,20,45,.04), 0 20px 50px rgba(30,20,45,.09);
border-top: 4px solid var(--bp);
opacity: 0; transform: translateY(20px);
transition: opacity .7s cubic-bezier(.2,.8,.2,1) var(--d,0s), transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0s); }
.mstory.in .ms-item { opacity: 1; transform: none; }
.ms-item b { display: block; font-family: var(--display); font-size: clamp(18px,2vw,24px);
font-weight: 800; color: var(--bp); margin-bottom: 8px; letter-spacing: -.01em; }
.ms-item p { font-size: 13.5px; color: #5b5470; line-height: 1.65; }
/* gammes : rails */
.mline { margin-bottom: clamp(20px,2.6vw,34px); }
.mline .psec-t small { font-size: .6em; color: #a49dba; font-weight: 700; margin-inline-start: 6px; }
.mrail { display: flex; gap: clamp(12px,1.4vw,18px); overflow-x: auto; padding: 6px 2px 14px;
scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; }
.mrail::-webkit-scrollbar { display: none; }
.mrail .pcard { flex: 0 0 clamp(190px,20vw,240px); scroll-snap-align: start; }
/* CTA de fin */
.mcta { margin-block: clamp(20px,3vw,40px); border-radius: 26px; text-align: center;
background: radial-gradient(120% 100% at 85% 0%, rgba(240,196,31,.18), transparent 55%),
linear-gradient(160deg, #221c2e, #131019);
color: #fff; padding: clamp(28px,4vw,52px); }
.mcta h2 { font-size: clamp(19px,2.4vw,28px); font-weight: 800; color: #fff; margin-bottom: 18px; }
.mcta .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* 404 + pages légales */
.p404 { text-align: center; padding: clamp(50px,9vw,120px) 20px; display: grid; gap: 14px; justify-items: center; }
.p404 .code { font-family: var(--display); font-weight: 800; font-size: clamp(80px,14vw,160px);
line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(85,41,136,.25); }
.p404 h1 { font-size: clamp(20px,2.6vw,30px); font-weight: 800; }
.p404 p { color: #6f6885; font-size: 14px; }
.p404 .acts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.legalpage { max-width: 760px; margin-inline: auto; padding-block: clamp(30px,4vw,60px); }
.legalpage h1 { font-size: clamp(24px,3vw,36px); font-weight: 800; margin-bottom: 22px; }
.legalpage h2 { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
color: var(--z); margin: 26px 0 8px; }
.legalpage p { font-size: 14px; line-height: 1.75; color: #5b5470; }
.foot .legal-link { color: rgba(255,255,255,.55); margin-inline-end: 14px; }
.foot .legal-link:hover { color: #fff; }
/* ================= ESPACE PRO ================= */
.promodal { position: fixed; inset: 0; z-index: 400; background: rgba(15,13,18,.66);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
display: none; place-items: center; padding: 20px; }
.promodal.open { display: grid; }
.pm-card { position: relative; width: min(94vw, 400px); background: #fff; border-radius: 24px;
padding: clamp(24px,4vw,34px); display: grid; gap: 12px; text-align: center;
box-shadow: 0 40px 90px rgba(0,0,0,.4); }
.pm-x { position: absolute; top: 12px; inset-inline-end: 14px; font-size: 15px; color: #a49dba; }
.pm-t { font-family: var(--display); font-size: 20px; font-weight: 800; }
.pm-p { font-size: 13px; color: #6f6885; }
.pm-card input { font: inherit; font-size: 15px; text-align: center; letter-spacing: .12em;
padding: 13px; border-radius: 13px; border: 1.4px solid var(--line); background: #faf9fc; outline: none; }
.pm-card input:focus { border-color: var(--ink); background: #fff; }
.pm-err { font-size: 12.5px; font-weight: 700; color: #E01B3C; }
.pm-face { display: grid; gap: 12px; }
.pm-face[hidden] { display: none; }
.pm-form { display: grid; gap: 8px; }
.pm-card .pm-form input { text-align: start; letter-spacing: 0; font-size: 14px; padding: 12px 14px; }
.pm-card input.err { border-color: #E01B3C; box-shadow: 0 0 0 3px rgba(224,27,60,.12); }
.pm-card .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.pm-ask { font-size: 12.5px; color: #6f6885; text-decoration: underline; background: none; cursor: pointer; font: inherit; font-size: 12.5px; justify-self: center; text-align: center; width: 100%; }
.pm-out { font-size: 12.5px; color: #a49dba; background: none; }
.pm-out:hover { color: #E01B3C; }
.ptag { display: inline-flex; align-items: baseline; gap: 5px; }
.ptag b { font-family: var(--display); font-weight: 800; font-size: 14.5px; color: var(--wa); }
.ptag small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #a49dba; }
.phero-price { display: inline-flex; align-items: baseline; gap: 10px;
background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22);
border-radius: 14px; padding: 10px 16px; }
.phero-price b { font-family: var(--display); font-weight: 800; font-size: clamp(20px,2.2vw,27px); color: var(--gold); }
.phero-price small { font-size: 12px; color: rgba(255,255,255,.8); }
.phero-price small i { font-style: normal; font-weight: 800; color: #fff; }
.phero-price[hidden] { display: none; }
.palette .pal-carton.part { opacity: .35 !important; }
.dctn { margin-top: 5px; font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; border: 1.3px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.dctn:hover { border-color: var(--ink); }
.ditem .dc { font-size: 11px; color: #8a83a0; margin-top: 3px; line-height: 1.4; }
.ditem .dc b { color: var(--ink); font-weight: 800; }
.ditem .q b small { display: block; font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #a49dba; font-weight: 800; line-height: 1; margin-top: 1px; }
.ditem .dp { font-size: 12px; color: #6f6885; margin-top: 2px; }
.ditem .dp b { color: var(--wa); }
.dtotal { display: flex; justify-content: space-between; align-items: center; padding: 14px 4px 4px;
border-top: 2px solid var(--line); margin-top: 10px; font-weight: 700; }
.dtotal b { font-family: var(--display); font-size: 18px; font-weight: 800; color: var(--wa); }
.phero-lock[hidden] { display: none; }
/* ================= CATALOGUE PDF (A4) ================= */
.pdfbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px;
flex-wrap: wrap; background: #fff; border-bottom: 1px solid var(--line); padding: 14px clamp(16px,3vw,28px); }
.pdfbar b { font-family: var(--display); font-weight: 800; }
.pdfbar select { font: inherit; font-size: 13.5px; padding: 9px 12px; border-radius: 10px; border: 1.4px solid var(--line); }
.pdfchk { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.pdfback { font-size: 13px; color: #6f6885; text-decoration: underline; margin-inline-start: auto; }
#pdfDoc { max-width: 1000px; margin: 20px auto 60px; padding-inline: 16px; background: #fff; }
.pdf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px;
border-bottom: 3px solid var(--z); padding-bottom: 12px; margin-bottom: 16px; }
.ph-l { display: flex; align-items: center; gap: 12px; }
.ph-l img { height: 44px; }
.ph-l b { font-family: var(--display); font-weight: 800; display: block; }
.ph-l small { color: #6f6885; font-size: 12px; }
.ph-r { display: grid; gap: 2px; text-align: end; font-size: 11.5px; color: #5b5470; }
.pdf-brand { margin-bottom: 22px; break-inside: avoid-page; }
.pb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pb-head img { height: 34px; width: auto; object-fit: contain; }
.pb-head b { font-size: 12px; color: #8a83a0; font-weight: 700; }
.pdf-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pdf-table th { text-align: start; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
color: #8a83a0; border-bottom: 1.5px solid var(--line); padding: 6px 8px; }
.pdf-table td { border-bottom: 1px solid #f0edf4; padding: 6px 8px; vertical-align: middle; }
.td-img img { width: 44px; height: 44px; object-fit: contain; }
.td-nm { font-weight: 700; }
.td-off { font-style: normal; color: #B8102C; font-weight: 800; font-size: 10.5px; white-space: nowrap; }
.td-ean { font-variant-numeric: tabular-nums; color: #6f6885; }
.td-px { font-weight: 800; white-space: nowrap; }
.pdf-order { break-before: page; border: 1.6px dashed #cfc9dc; border-radius: 14px; padding: 18px; margin-top: 26px; }
.pdf-order h2 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.pdf-order p { font-size: 12px; color: #5b5470; }
.po-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; font-size: 12.5px; }
.po-wa { font-weight: 700; }
@media print {
.noprint, .promodal, .drawer, .overlay, .mnav, .mbar { display: none !important; }
body { background: #fff; }
#pdfDoc { max-width: none; margin: 0; }
.pdf-table { font-size: 10px; }
.td-img img { width: 34px; height: 34px; }
@page { size: A4; margin: 12mm; }
}
/* ================= 1 · TRANSITIONS ENTRE PAGES — le pack vole ================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .16s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: vtIn .18s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
/* l'image cliquée et le héros de la fiche partagent le même nom → morphing */
#pdpImg { view-transition-name: pack; }
::view-transition-group(pack) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } }
/* ================= 2 · PALETTE VIRTUELLE ================= */
.palette { display: grid; justify-items: center; gap: 6px; padding: 14px 16px 10px;
border-bottom: 1px solid var(--line); }
.palette svg { width: 186px; height: auto; display: block; }
.palette .pal-carton { opacity: 0; animation: palDrop .45s cubic-bezier(.2,1.3,.3,1) forwards; }
@keyframes palDrop { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
.palette small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #8a83a0; }
.palette.full small { color: var(--wa); }
.palette.full svg { animation: palShine 1.2s ease-in-out; }
@keyframes palShine { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 14px rgba(240,196,31,.65)); } }
/* ================= 3 · RECHERCHE PLEIN ÉCRAN ================= */
.searchx { position: fixed; inset: 0; z-index: 420; background: rgba(250,249,246,.94);
-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
display: none; flex-direction: column; padding: clamp(16px,4vw,44px); }
.searchx.open { display: flex; }
.sx-top { display: flex; align-items: center; gap: 14px; max-width: 860px; width: 100%; margin-inline: auto; }
.sx-top input { flex: 1; font: inherit; font-size: clamp(19px,2.6vw,28px); font-weight: 700;
padding: 16px 4px; border: 0; border-bottom: 3px solid var(--ink); background: none; outline: none;
color: var(--ink); }
.sx-top input::placeholder { color: #b3abc6; font-weight: 500; }
.sx-x { width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: var(--sh);
font-size: 16px; color: var(--ink); flex: none; }
.sx-hint { max-width: 860px; width: 100%; margin: 10px auto 0; font-size: 12px; color: #a49dba; }
.sx-hint b { color: #6f6885; }
.sx-res { max-width: 860px; width: 100%; margin: 18px auto 0; overflow-y: auto; flex: 1;
display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
align-content: start; padding-bottom: 30px; scrollbar-width: none; }
.sx-res::-webkit-scrollbar { display: none; }
.sx-item { background: #fff; border-radius: 16px; padding: 12px; display: grid; gap: 8px;
justify-items: center; text-align: center; color: var(--ink); box-shadow: 0 2px 8px rgba(30,20,45,.05);
border: 2px solid transparent; opacity: 0; transform: translateY(14px) scale(.97);
animation: sxIn .4s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * .03s);
transition: border-color .15s, transform .2s; }
@keyframes sxIn { to { opacity: 1; transform: none; } }
.sx-item:hover, .sx-item.on { border-color: var(--z); transform: translateY(-3px); }
.sx-item img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.sx-item b { font-size: 12px; font-weight: 700; line-height: 1.3; }
.sx-item .chip { font-size: 9.5px; }
.sx-none { grid-column: 1/-1; text-align: center; color: #8a83a0; font-weight: 600; padding: 40px 0; }
/* ================= 5 · SCROLL-CINÉMA (pages marques) ================= */
.mh-motifs { will-change: transform; }
.mrail .pcard { opacity: 0; transform: translateY(26px); }
.mline.in .pcard { opacity: 1; transform: none;
transition: opacity .6s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .07s),
transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .07s); }
.promoc { transform: scale(.96); transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.psec.in .promoc { transform: none; }
.reel { transform: scale(.94); }
.psec.in .reel { transform: none; transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .08s); }
/* ================= PAGE MARQUE TENDERLY — sections calquées sur tenderly.it ================= */
.phero-off { display: grid; gap: 2px; }
.phero-off b { font-size: clamp(15px,1.5vw,19px); font-weight: 800; }
.phero-off span { font-size: 13px; color: rgba(255,255,255,.78); font-weight: 600; }
.phero-intro { font-size: 13.5px; line-height: 1.65; color: rgba(255,255,255,.86); max-width: 560px; }
.pdp-gal .gthumb { width: 84px; height: 84px; border-radius: 16px; }
.pdp-gal .gthumb img { object-fit: contain; }
.bfeat-in { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px,4vw,64px); align-items: center; }
.bfeat-t, .bcert-t, .bfmt-t { font-size: clamp(24px,3.2vw,40px); font-weight: 800; letter-spacing: -.02em; color: var(--bp); }
.bfeat-t { margin-bottom: clamp(18px,2.4vw,30px); }
.bfeat-i { display: flex; align-items: center; gap: clamp(14px,1.8vw,24px); padding-block: clamp(8px,1.1vw,14px); }
.bfeat-i i { flex: none; width: clamp(64px,7vw,96px); height: clamp(64px,7vw,96px); border-radius: 50%; background: var(--bp);
display: grid; place-items: center; box-shadow: 0 10px 24px color-mix(in srgb, var(--bp) 30%, transparent); }
.bfeat-i i img { width: 100%; height: 100%; object-fit: contain; }
.bfeat-i span { font-size: clamp(15px,1.5vw,20px); font-weight: 600; color: var(--bp); line-height: 1.35; }
.bfeat-ph { border-radius: clamp(20px,2.4vw,30px); overflow: hidden; background: #fff; }
.bfeat-ph img { width: 100%; height: auto; display: block; }
.bcert { text-align: center; }
.bcert-t { margin-bottom: clamp(20px,2.6vw,34px); }
.bcert-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,48px); align-items: start; }
.bcert-i { display: grid; justify-items: center; gap: 14px; }
.bcert-i img { height: clamp(88px,9vw,120px); width: auto; object-fit: contain; }
.bcert-i p { font-size: 13.5px; line-height: 1.7; color: var(--bp); max-width: 380px; }
.bfmt { text-align: center; }
.bfmt-t { margin-bottom: clamp(18px,2.4vw,30px); }
.bfmt-row { display: flex; justify-content: center; gap: clamp(16px,2.6vw,40px); flex-wrap: wrap; }
.bfmt-i { display: grid; justify-items: center; gap: 8px; width: clamp(180px,20vw,280px); padding: 18px 12px 16px; border-radius: 24px;
border: 1.6px solid transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; }
.bfmt-i:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.08); border-color: var(--line); }
.bfmt-i.cur { border-color: var(--bp); }
.bfmt-ph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.bfmt-ph img { max-width: 92%; max-height: 92%; object-fit: contain; }
.bfmt-i b { font-size: clamp(16px,1.6vw,21px); font-weight: 800; color: var(--bp); }
.bfmt-i small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #8a83a0; }
.bfmt-i.cur small { color: var(--bp); }
.bfmt-cta { margin-top: clamp(16px,2vw,26px); }
.bfmt-cta .btn { background: var(--bp); color: #fff; padding: 14px 30px; border-radius: 999px; font-size: 15px; }
/* pied de page aux couleurs de la marque (fiche produit) */
.foot[data-b] { border-radius: clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0; }
.foot[data-b="tenderly"] { background: #003087; }
.foot-brand { display: flex; align-items: center; gap: clamp(18px,3vw,40px); padding-top: clamp(30px,4vw,56px); }
.fb-blob { display: flex; align-items: center; justify-content: center; width: clamp(170px,19vw,260px); height: clamp(120px,13.5vw,186px);
background: #fff; border-radius: 46% 54% 52% 48% / 58% 56% 44% 42%; padding: 0; flex: none; }
.fb-blob img { width: 76%; height: auto; max-height: 76%; object-fit: contain; display: block; }
.foot-brand p { display: grid; gap: 2px; }
.foot-brand small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.foot-brand b { font-family: var(--display); font-size: clamp(16px,1.8vw,22px); font-weight: 800; color: #fff; }
.foot[data-b] h5 { color: #fff; }
@media (max-width: 860px) {
.bfeat-in { grid-template-columns: 1fr; }
.bcert-row { grid-template-columns: 1fr; }
}
/* infos revendeur dans le style de la marque (cercles marine, trait blanc) */
.binfo { text-align: center; }
.binfo-t { font-size: clamp(24px,3.2vw,40px); font-weight: 800; letter-spacing: -.02em; color: var(--bp); margin-bottom: clamp(18px,2.4vw,30px); }
.binfo-row { display: flex; justify-content: center; gap: clamp(28px,5vw,90px); flex-wrap: wrap; }
.binfo-i { display: grid; justify-items: center; gap: 6px; min-width: 150px; }
.binfo-i i { width: clamp(72px,7.6vw,100px); height: clamp(72px,7.6vw,100px); border-radius: 50%; background: var(--bp);
display: grid; place-items: center; box-shadow: 0 10px 24px color-mix(in srgb, var(--bp) 30%, transparent); margin-bottom: 6px; }
.binfo-i i svg { width: 56%; height: 56%; }
.binfo-i small { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #8a83a0; }
.binfo-i b { font-size: clamp(15px,1.5vw,19px); font-weight: 800; color: var(--bp); font-variant-numeric: tabular-nums; }
.bfmt-ph img { max-width: 88%; max-height: 88%; }
.promogrid.single { grid-template-columns: minmax(0, 980px); justify-content: center; }
/* ================= HÉROS CLAIR — pages de marque ================= */
.phero.light { background: #fff; color: var(--bp); border-bottom: 1px solid var(--line); }
.phero.light::before { display: none; }
.phero.light .phero-lg { filter: none; }
.phero.light .phero-tag { color: color-mix(in srgb, var(--bp) 70%, #fff); }
.phero.light .phero-pill { background: var(--bp); color: #fff; }
.phero.light h1 { color: var(--bp); }
.phero.light .phero-off span, .phero.light .phero-intro { color: color-mix(in srgb, var(--bp) 78%, #333); }
.phero.light .phero-intro { font-size: 14.5px; max-width: 520px; }
.phero.light .phero-chips span { color: var(--bp); background: color-mix(in srgb, var(--bp) 7%, #fff); border-color: color-mix(in srgb, var(--bp) 22%, #fff); backdrop-filter: none; }
.phero.light .phero-buy .qty { background: #fff; border-color: color-mix(in srgb, var(--bp) 30%, #fff); }
.phero.light .phero-buy .qty button, .phero.light .phero-buy .qty input { color: var(--bp); }
.phero.light .btn-add { background: var(--bp); color: #fff; box-shadow: 0 10px 24px color-mix(in srgb, var(--bp) 30%, transparent); }
.phero.light .phero-lock { color: #8a83a0; }
.phero.light .phero-ph { background: var(--paper); box-shadow: 0 24px 60px rgba(0,0,0,.10), 0 0 0 1px var(--line); }
.phero.light .phero-price { color: var(--bp); }
.rstrip { display: flex; gap: clamp(14px,2.4vw,34px); flex-wrap: wrap; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); width: 100%; }
.rstrip span { display: grid; gap: 2px; }
.rstrip small { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a83a0; font-weight: 700; }
.rstrip b { font-size: 14px; font-weight: 800; color: var(--bp); font-variant-numeric: tabular-nums; }
/* fonctionnalités + certifications, un seul bloc */
.bfeat-in { grid-template-columns: 1.1fr .9fr; align-items: start; }
.bfeat-note { margin-top: 14px; font-size: 13px; color: #6b6478; line-height: 1.6; }
.bfeat-note b { color: var(--bp); font-weight: 700; }
.bcert-col { padding-top: 6px; }
.bcert-t { font-size: clamp(24px,3.2vw,40px); margin-bottom: clamp(18px,2.4vw,30px); text-align: left; }
details.bcert-i { display: block; border-top: 1px solid var(--line); }
details.bcert-i:last-child { border-bottom: 1px solid var(--line); }
details.bcert-i summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 14px 0; cursor: pointer; }
details.bcert-i summary::-webkit-details-marker { display: none; }
details.bcert-i summary img { height: 64px; width: 64px; object-fit: contain; flex: none; }
details.bcert-i summary span { font-size: clamp(14px,1.3vw,17px); font-weight: 700; color: var(--bp); flex: 1; }
details.bcert-i summary::after { content: "+"; font-size: 22px; color: var(--bp); opacity: .6; }
details.bcert-i[open] summary::after { content: "–"; }
details.bcert-i p { font-size: 13.5px; line-height: 1.7; color: #4a4457; padding: 0 0 16px 80px; margin: 0; }
.bvid-t { font-size: clamp(20px,2.4vw,30px); font-weight: 800; color: var(--bp); margin-bottom: 16px; }
@media (max-width: 860px) {
.bfeat-in { grid-template-columns: 1fr; }
.bcert-t { margin-top: 10px; }
details.bcert-i p { padding-inline-start: 0; }
.bfmt-row { gap: 8px; } .bfmt-i { width: calc(33.33% - 6px); padding: 10px 4px 12px; }
.bfmt-i b { font-size: 14px; } .bfmt-i small { font-size: 9.5px; }
}
/* méga-menu : marques en logos cliquables */
.mega .mlogos { display: flex; flex-wrap: wrap; gap: 10px; }
.mega .mlogo { width: 112px; height: 56px; border-radius: 14px; background: #fff; border: 1.4px solid var(--line);
display: grid; place-items: center; padding: 7px 10px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.mega .mlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mega .mlogo:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,20,45,.12); border-color: var(--gold); }
/* photo avec fond (rectangle) : pas d'ombre portée, sinon on voit le rectangle */
.mega .feat .fstack img.rect { filter: none; }
/* logos du méga-menu : ni soulignement, ni fond de survol hérités des liens */
.mega .mlogo::after { display: none !important; content: none !important; }
.mega .mlogo:hover { background: #fff; }
/* vidéos carrées dans la rangée des mondes ; blobs Tutto sur fond marque ; visuels intercalés */
.bw-video.sq { flex: 0 0 clamp(200px, 21vw, 280px); aspect-ratio: 1; align-self: center; }
.bento .cell.blob { background: #fff; }
.bento .cell.blob img { object-fit: contain; padding: 4%; }
.bw-strip .bw-visual { align-self: center; flex: 0 0 auto; height: clamp(280px, 24vw, 340px); border-radius: var(--r); }
/* logo Smile sur fond bleu : en couleur sur pastille blanche (inversé, il devient une tache) */
.phero[data-b="smile"] .phero-lg { filter: none; background: #fff; padding: 6px 14px; border-radius: 12px; height: clamp(46px,5vw,66px); }
/* ---- promos verticales : rangée dédiée ---- */
.tallrow { display: flex; gap: clamp(10px,1.4vw,16px); overflow-x: auto; padding-bottom: 6px; margin-bottom: clamp(12px,1.6vw,20px); scrollbar-width: none; }
.tallrow::-webkit-scrollbar { display: none; }
.tallrow .promoc { flex: 0 0 clamp(170px,19vw,250px); }
.tallrow .promoc img { width: 100%; height: auto; }
/* ---- pied de page + bandes revendeur : bleu Bakrim, arrondi comme Tenderly ---- */
.foot { background: linear-gradient(160deg, #163d8f, #0f2a66); border-radius: clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0; color: rgba(255,255,255,.88); }
.foot h5 { color: #f4c542; }
.foot .legal { border-top-color: rgba(255,255,255,.16); }
/* bande chiffres : le bleu Smile, lumineux */
.prozone { background:
radial-gradient(90% 80% at 100% 0%, rgba(255,255,255,.16), transparent 55%),
linear-gradient(160deg, #1aa3d8 0%, #0b7ea8 55%, #086a90 100%) !important; }
.figures { border-top-color: rgba(255,255,255,.22); }
.figures b { background: linear-gradient(160deg, #fff 35%, #ffe27a); -webkit-background-clip: text; background-clip: text; }
.figures b.ma { background: linear-gradient(160deg, #fff 35%, #ffe27a); -webkit-background-clip: text; background-clip: text; }
.figures span { color: rgba(255,255,255,.72); }
.prozone .sec-kick.gold { color: #ffe27a; }
.b2b { position: relative; overflow: hidden; background: #0f2a66; isolation: isolate; }
.b2b::before { display: none; }
.b2b-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 1; }
.b2b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,42,102,.88) 0%, rgba(15,42,102,.45) 55%, rgba(15,42,102,.15) 100%); z-index: 1; }
.b2b .b2b-in, .b2b .acts { position: relative; z-index: 2; }
/* ---- clients : logos réels en marquee ---- */
.clgrid { margin-top: 10px; }
.lcard.cl { width: 236px; height: 110px; padding: 10px 18px; }
.lcard.cl img { width: 100%; height: 100%; object-fit: contain; }
/* ---- chiffres : marques en dessous, sens inverse ---- */
.fig-logos { overflow: hidden; margin-top: clamp(26px,3.4vw,44px); }
.fig-logos .ltrack { animation-duration: 40s; }
.fig-logos .ltrack.rev { animation-direction: reverse; }
.lcard.sm { width: 150px; height: 76px; padding: 8px 14px; margin-inline-end: 12px; border-radius: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.lcard.sm img { width: 100%; height: 100%; object-fit: contain; }
/* ---- monde à un seul produit (Tamara) : compact ---- */
.bworld.bw-mini { display: grid; grid-template-columns: 1fr minmax(240px, 300px); align-items: center; gap: clamp(16px,3vw,40px); padding: clamp(18px,2.6vw,30px) clamp(18px,3vw,40px); }
.bw-mini .bw-open { padding: 0; text-align: start; }
.bw-mini .bw-lg { margin-inline: 0; height: clamp(46px,5vw,72px); }
.bw-mini .bw-rule { display: none; }
.bw-mini .bw-one .pcard { width: 100%; }
@media (max-width: 700px) { .bworld.bw-mini { grid-template-columns: 1fr; } .bw-mini .bw-open { text-align: center; } .bw-mini .bw-lg { margin-inline: auto; } }
/* ---- vidéos : deux rangées séparées ---- */
.bw-filmrow + .bw-filmrow { margin-top: 12px; }
/* CTA des pages marques : bleu Bakrim comme le pied de page */
.mcta { background: linear-gradient(160deg, #163d8f, #0f2a66) !important; }
.specband .sb-claim b { color: var(--bp); border-color: var(--bp); }
.sb-sub img { filter: none; }
/* icônes catégories plus grandes */
.cat .ic { height: 92px; } .cat .ic img, .cat .ic svg { height: 86px; width: 86px; }
/* logos de marque dans le héros : couleurs d'origine quand le logo est coloré, grands */
.phero[data-b="tutto"] .phero-lg, .phero[data-b="smile"] .phero-lg, .phero[data-b="tamara"] .phero-lg, .phero[data-b="belira"] .phero-lg {
filter: none; background: none; padding: 0; height: clamp(64px,7.5vw,104px); max-width: 300px; }
.phero[data-b="doomty"] .phero-lg { filter: none; background: #fff; padding: 8px 16px; border-radius: 14px; height: clamp(56px,6.5vw,90px); }
.bw-smile .bw-lg { height: clamp(96px, 12vw, 160px); filter: drop-shadow(0 10px 26px rgba(0,0,0,.28)); }
/* chargement : la page garde sa hauteur, le pied de page ne remonte jamais */
#pdp:empty, #mq:empty, #grid:empty { min-height: 78vh; }
/* ---- PIED DE PAGE : identité Bakrim (violet → bleu) + rayure des marques + carte ---- */
.foot { background: linear-gradient(150deg, #5b3a8c 0%, #3b3f9a 45%, #1f7fb4 100%); border-radius: clamp(28px,4vw,56px) clamp(28px,4vw,56px) 0 0; position: relative; overflow: hidden; }
.foot::before { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); pointer-events: none; }
.foot-stripe { display: flex; height: 7px; }
.foot-stripe i { flex: 1; } .foot-stripe .z { background: #552988; } .foot-stripe .s { background: #0090C0; } .foot-stripe .t { background: #003087; }
.foot-stripe .u { background: #E30613; } .foot-stripe .a { background: #F5A623; } .foot-stripe .d { background: #16357A; } .foot-stripe .b { background: #8CC63E; }
.foot-top { grid-template-columns: 1.35fr .8fr .8fr 1.35fr; position: relative; }
.foot h5 { color: #f4c542; }
.foot .fb img { height: 52px; filter: drop-shadow(0 0 16px rgba(255,255,255,.3)); }
.foot-more { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.foot-map { margin-top: 16px; border-radius: 16px; overflow: hidden; aspect-ratio: 16/10; box-shadow: 0 16px 40px rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.18); }
.foot-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.socials .so { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform .2s; }
.socials .so:hover { transform: translateY(-3px); }
.socials .so svg { width: 20px; height: 20px; }
.socials .so.fb { background: #1877F2; }
.socials .so.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.socials .so.in { background: #0A66C2; }
.socials .so.tk { background: #111; }
@media (max-width: 880px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-contact { grid-column: 1 / -1; } }
/* ================= À PROPOS ================= */
html[lang="ar"] .lang-fr { display: none !important; } html[lang="fr"] .lang-ar { display: none !important; }
.about .sec-kick { margin-bottom: 8px; }
.ab-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,60px); align-items: center; padding-block: clamp(30px,5vw,70px); }
.ab-hero h1 { font-size: clamp(30px,4.4vw,58px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.ab-hero h1 em { font-style: normal; background: linear-gradient(90deg, #7B4A9E, #2E9BC6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-lede { margin-top: 18px; font-size: clamp(15px,1.3vw,17.5px); line-height: 1.7; color: #4a4457; max-width: 60ch; }
.ab-figs { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(14px,2.4vw,34px); margin-top: 28px; justify-content: start; }
.ab-figs b { display: block; font-family: var(--display); font-size: clamp(26px,3vw,40px); font-weight: 800; color: var(--ink); line-height: 1; }
.ab-figs b.ma { color: #E01B3C; }
.ab-figs span { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--soft); font-weight: 700; margin-top: 6px; }
.ab-orbit { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.ab-mark { position: absolute; inset: 0; margin: auto; width: 34%; filter: drop-shadow(0 20px 40px rgba(123,74,158,.35)); animation: abFloat 5s ease-in-out infinite; }
@keyframes abFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ab-orbit::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 1.5px dashed rgba(123,74,158,.25); animation: abSpin 60s linear infinite; }
@keyframes abSpin { to { transform: rotate(360deg); } }
.ab-sat { position: absolute; width: 26%; aspect-ratio: 2/1; background: #fff; border-radius: 16px; box-shadow: 0 12px 30px rgba(30,20,45,.14); display: grid; place-items: center; padding: 8px 12px; animation: abFloat 6s ease-in-out infinite; }
.ab-sat img { width: 100%; height: 100%; object-fit: contain; }
.ab-sat.s1 { top: 0; left: 37%; animation-delay: .2s; } .ab-sat.s2 { top: 16%; right: 0; animation-delay: .8s; } .ab-sat.s3 { top: 52%; right: -2%; animation-delay: 1.4s; }
.ab-sat.s4 { bottom: 2%; right: 18%; animation-delay: 2s; } .ab-sat.s5 { bottom: 2%; left: 18%; animation-delay: 2.6s; } .ab-sat.s6 { top: 52%; left: -2%; animation-delay: 3.2s; } .ab-sat.s7 { top: 16%; left: 0; animation-delay: 3.8s; }
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,2vw,26px); margin-top: clamp(20px,3vw,40px); }
.ab-card { border-radius: 28px; padding: clamp(24px,3.4vw,46px); color: #fff; }
.ab-card.violet { background: linear-gradient(160deg, #6a3f9a, #4a2a72); } .ab-card.teal { background: linear-gradient(160deg, #2E9BC6, #1f6f93); }
.ab-card .sec-kick { color: rgba(255,255,255,.75); } .ab-card h2 { font-size: clamp(20px,2.4vw,30px); font-weight: 800; line-height: 1.15; margin-bottom: 12px; }
.ab-card p { font-size: 14.5px; line-height: 1.7; opacity: .92; }
.ab-net { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,60px); align-items: center; margin-top: clamp(40px,6vw,80px); }
.ab-net h2, .ab-partners h2 { font-size: clamp(24px,3.2vw,40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; }
.ab-net p { font-size: 15px; line-height: 1.7; color: #4a4457; }
.ab-chan { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.ab-chan li { background: #fff; border: 1.4px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; }
.ab-map { border-radius: 26px; overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 24px 60px rgba(30,20,45,.14); border: 1px solid var(--line); }
.ab-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ab-partners { margin-top: clamp(40px,6vw,80px); text-align: center; }
.ab-lede2 { max-width: 70ch; margin-inline: auto; color: #4a4457; line-height: 1.7; }
.ab-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,24px); margin-top: clamp(22px,3vw,40px); text-align: start; }
.ab-part { background: #fff; border: 1.4px solid var(--line); border-radius: 26px; padding: clamp(20px,2.6vw,34px); display: grid; gap: 10px; align-content: start; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.ab-part:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(30,20,45,.12); }
.ab-part-lg { height: 76px; display: grid; place-items: start; } .ab-part-lg img { max-height: 76px; max-width: 220px; object-fit: contain; }
.ab-part h3 { font-size: 20px; font-weight: 800; }
.ab-part-meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ab-part p { font-size: 14px; line-height: 1.65; color: #4a4457; }
.ab-part-brands { display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.ab-part-brands img { height: 44px; width: 96px; object-fit: contain; background: var(--paper); border-radius: 12px; padding: 6px 10px; }
.flag-it, .flag-eg, .flag-ma { width: 22px; height: 15px; border-radius: 3px; display: inline-block; }
.flag-it { background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #CE2B37 66%); }
.flag-eg { background: linear-gradient(180deg, #CE1126 33%, #fff 33% 66%, #000 66%); }
.flag-ma { background: #C1272D; }
.ab-cta { margin-block: clamp(40px,6vw,80px); text-align: center; background: linear-gradient(150deg, #5b3a8c, #1f7fb4); color: #fff; border-radius: 32px; padding: clamp(30px,5vw,64px) clamp(20px,4vw,60px); }
.ab-cta h2 { font-size: clamp(22px,3vw,38px); font-weight: 800; letter-spacing: -.02em; max-width: 24ch; margin-inline: auto; }
.ab-cta p { margin-top: 12px; opacity: .9; max-width: 60ch; margin-inline: auto; line-height: 1.7; }
.ab-cta .acts { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
@media (max-width: 860px) { .ab-hero, .ab-split, .ab-net { grid-template-columns: 1fr; } .ab-pgrid { grid-template-columns: 1fr; } .ab-figs { grid-template-columns: 1fr 1fr; } .ab-hero-vis { order: -1; } .ab-orbit { width: min(100%, 300px); } }
/* ================= retours 14 sept ================= */
/* 9 · « Aucun produit trouvé » ne s'affiche que s'il n'y a vraiment rien */
.empty[hidden] { display: none; }
/* 4 · vidéos des mondes : UNE rangée choisie (5 max), cartes égales, le reste sur la page marque */
.bw-films-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.bw-more { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
color: inherit; opacity: .85; white-space: nowrap; }
.bw-more:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.bw-films .bw-filmrow { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: clamp(12px, 1.4vw, 18px); overflow: visible; padding: 0 0 6px; }
.bw-films .bw-video { flex: none; width: 100%; aspect-ratio: 9 / 16; border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.22); }
.bw-films .bw-video.sq { aspect-ratio: 1; }
.bw-films .bw-video.wide { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
.bw-films .bw-filmrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
.bw-films .bw-video { flex: 0 0 64vw; scroll-snap-align: start; }
.bw-films .bw-video.sq, .bw-films .bw-video.wide { flex-basis: 84vw; }
}
/* 5 · Tamara : une seule bande fine et claire, pas un monde entier */
.bworld.bw-line { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); flex-wrap: wrap;
margin-top: clamp(22px, 3vw, 36px); padding: 14px clamp(16px, 2.4vw, 26px); background: #fff; color: var(--ink);
border: 1.5px solid var(--line); box-shadow: var(--sh); border-radius: 22px; overflow: visible; }
.bw-line.bw-tamara { background: #fff; color: var(--ink); }
.bl-brand { display: flex; align-items: center; gap: 14px; color: inherit; }
.bl-lg { height: 44px; width: auto; object-fit: contain; background: #fff; }
.bl-brand span { display: grid; line-height: 1.2; }
.bl-brand b { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.bl-brand small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #6f6885; font-weight: 700; }
.bw-line .bw-origin { margin-top: 0; background: #f1f4f9; color: #1b3a5f; border: 0; }
.bl-prod { display: flex; align-items: center; gap: 14px; color: inherit; margin-inline-start: auto; min-width: 0; }
.bl-prod img { width: 74px; height: 74px; object-fit: contain; background: #fff; border-radius: 14px; border: 1.5px solid var(--line); padding: 4px; }
.bl-prod span { display: grid; gap: 3px; min-width: 0; }
.bl-prod b { font-size: 13.5px; font-weight: 800; }
.bl-prod small { font-size: 12px; color: #6f6885; }
.bl-buy { display: flex; align-items: center; gap: 12px; }
.bl-buy .add { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1b3a5f; color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
box-shadow: 0 8px 20px rgba(27,58,95,.28); transition: transform .2s; }
.bl-buy .add:hover { transform: scale(1.06); }
@media (max-width: 760px) { .bl-prod { margin-inline-start: 0; width: 100%; } }
/* 7 · compte revendeur : panneau clair (bleu Smile très pâle), fini l'encre sombre */
.dv-side { background:
radial-gradient(120% 100% at 100% 0%, rgba(26,163,216,.16), transparent 55%),
linear-gradient(160deg, #eef8fc, #dcefF8); color: var(--ink); }
.dv-side .sec-kick.gold { color: #0b7ea8; }
.dv-side h2 { color: #0d2f45; }
.dv-perks li { color: #3a4552; }
.dv-perks li::before { background-color: #0b7ea8; }
.dv-perks li::before { background-image: url('data:image/svg+xml;utf8,'); }
/* ================= retours 14 sept (2) ================= */
/* 1 · logos clients détourés : la carte reste blanche et propre */
.lcard.cl { padding: 16px 24px; }
/* 2 · bande specs Zeina : icônes blanches officielles → fond violet Zeina */
.specband.sb-dark { background: linear-gradient(160deg, #5a2d8f, #3d1d66); border-color: transparent; box-shadow: 0 16px 40px rgba(61,29,102,.28); }
.specband.sb-dark .sb-i span { color: #fff; }
.specband.sb-dark .sb-i + .sb-i { border-inline-start-color: rgba(255,255,255,.18); }
@media (max-width: 700px) { .specband.sb-dark .sb-i:nth-child(even) { border-inline-start-color: rgba(255,255,255,.18); } }
/* 3 · Tutto : trio de produits plus grand sur le jaune */
.bento .cell.trio { gap: 1%; padding: 1.5% 1.5%; }
.bento .cell.trio img { width: 33%; height: 100%; filter: drop-shadow(0 12px 20px rgba(120,80,0,.25)); }
/* 4 · Tamara : bande plus généreuse */
.bworld.bw-line { padding: 22px clamp(20px, 3vw, 36px); border-radius: 26px; gap: clamp(18px, 3vw, 40px); }
.bl-lg { height: 64px; }
.bl-brand b { font-size: 19px; }
.bl-brand small { font-size: 12px; }
.bw-line .bw-origin { font-size: 12.5px; padding: 9px 16px; }
.bl-prod img { width: 112px; height: 112px; border-radius: 18px; }
.bl-prod b { font-size: 16px; }
.bl-prod small { font-size: 13px; }
.bl-buy .add { width: 50px; height: 50px; font-size: 24px; }
/* 5 · bande chiffres vivante : halos qui dérivent, cartes verre, chiffres qui scintillent */
.prozone { position: relative; overflow: hidden; }
.prozone::before, .prozone::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(30px); }
.prozone::before { width: 54vw; height: 54vw; top: -34%; left: -14%; background: radial-gradient(circle, rgba(255,226,122,.5), transparent 62%); animation: pzA 16s ease-in-out infinite alternate; }
.prozone::after { width: 48vw; height: 48vw; bottom: -40%; right: -12%; background: radial-gradient(circle, rgba(255,255,255,.34), transparent 62%); animation: pzB 20s ease-in-out infinite alternate; }
@keyframes pzA { to { transform: translate(16vw, 10vh) scale(1.18); } }
@keyframes pzB { to { transform: translate(-14vw, -12vh) scale(.88); } }
.pz-in { position: relative; z-index: 1; }
.figures { border-top: 0; padding-top: 0; }
.figures > div { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); border-radius: 24px; padding: clamp(18px,2.4vw,28px) 12px;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .45s cubic-bezier(.2,.8,.2,1), background .45s; }
.figures > div:hover { transform: translateY(-6px); background: rgba(255,255,255,.15); }
.figures b { background: linear-gradient(100deg, #fff 20%, #ffe27a 45%, #fff 70%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; animation: pzShimmer 5s linear infinite; }
.figures b.ma { background: linear-gradient(100deg, #fff 20%, #ffe27a 45%, #fff 70%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; }
@keyframes pzShimmer { to { background-position: -220% center; } }
@media (prefers-reduced-motion: reduce) { .prozone::before, .prozone::after, .figures b { animation: none; } }
/* 7 · carte animée du réseau : dépôt Berrechid → villes livrées, colis en mouvement */
.ab-net { grid-template-columns: 1fr 1.15fr; align-items: center; }
.ab-map.mm-wrap { aspect-ratio: auto; padding: clamp(16px,2.4vw,30px); background:
radial-gradient(90% 70% at 100% 0%, rgba(123,74,158,.10), transparent 60%),
linear-gradient(160deg, #f9f8fc, #eef1f9); }
.mm-head { font-family: var(--display); font-weight: 800; font-size: clamp(14px,1.4vw,17px); color: var(--ink); margin-bottom: 10px; letter-spacing: -.01em; }
.mm-head b { display: block; }
.mmap { width: 100%; height: auto; display: block; }
.mm-dots circle { fill: #cfc8e0; }
.mm-routes path { fill: none; stroke: #7B4A9E; stroke-width: 1.3; stroke-opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ab-net.in .mm-routes path { animation: mmDraw 1.5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.4s + var(--i) * .1s); }
@keyframes mmDraw { to { stroke-dashoffset: 0; } }
.mm-pk { fill: #E01B3C; opacity: 0; }
.ab-net.in .mm-pk { animation: mmFade .4s forwards; animation-delay: calc(1.6s + var(--i) * .1s); }
.mm-c { fill: #fff; stroke: #7B4A9E; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ab-net.in .mm-c { animation: mmPop .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(1.1s + var(--i) * .1s); }
@keyframes mmPop { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.mm-l { font-family: var(--display); font-weight: 700; font-size: 11px; fill: #332e3a; opacity: 0; }
.ab-net.in .mm-l { animation: mmFade .6s forwards; animation-delay: calc(1.3s + var(--i) * .1s); }
@keyframes mmFade { to { opacity: 1; } }
.mm-hub .mm-core { fill: #7B4A9E; }
.mm-ring { fill: none; stroke: #7B4A9E; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: mmRing 2.6s ease-out infinite; }
.mm-ring.r2 { animation-delay: 1.3s; }
@keyframes mmRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
.mm-hl { font-family: var(--display); font-weight: 800; font-size: 12px; fill: #7B4A9E; letter-spacing: .04em; }
.mm-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: #6f6885; font-weight: 600; }
.mm-legend > span { display: inline-flex; align-items: center; }
.mm-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-inline-end: 7px; }
.mm-legend i.hub { background: #7B4A9E; box-shadow: 0 0 0 3px rgba(123,74,158,.22); }
.mm-legend i.city { background: #fff; border: 2px solid #7B4A9E; }
.mm-legend i.pk { background: #E01B3C; }
html[lang="ar"] .mm-l, html[lang="ar"] .mm-hl { font-family: var(--display); }
@media (max-width: 600px) { .mm-l { font-size: 13px; } .mm-hl { font-size: 13px; } }
/* ---- 15 sept : mobile, réseau à une colonne ; fiche produit sans débordement ---- */
@media (max-width: 860px) { .ab-net { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
html, body { overflow-x: hidden; }
.phero h1 { font-size: clamp(22px, 7vw, 30px); overflow-wrap: anywhere; }
.phero-buy { flex-wrap: wrap; }
.phero-buy .btn-add { flex: 1 1 100%; }
.crumb { overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-wrap: nowrap; }
.crumb::-webkit-scrollbar { display: none; }
}
/* ---- 15 sept : en-tête mobile compact — logo réduit, recherche qui respire, langue dans le menu ---- */
@media (max-width: 600px) {
.hdr-in { gap: 10px; padding-block: 11px; }
.brand img { height: 36px; width: 36px; }
.brand .t b { font-size: 14px; }
.brand .t small { font-size: 8px; letter-spacing: .18em; }
.srch { min-width: 0; }
.srch input { padding: 11px 44px 11px 14px; font-size: 13px; }
html[dir="rtl"] .srch input { padding: 11px 14px 11px 44px; }
.srch .go { width: 32px; height: 32px; }
.hdr-act .lang { display: none; } /* le bouton عربية reste dans le menu mobile */
}
/* ---- 15 sept : catalogue mobile en deux colonnes ---- */
@media (max-width: 600px) {
.pgrid:not(.list) { grid-template-columns: 1fr 1fr !important; gap: 10px; }
.pgrid:not(.list) .pcard .bd { padding: 10px 10px 12px; }
.pgrid:not(.list) .pcard .nm { font-size: 12px; }
.pgrid:not(.list) .pcard .ph { padding: 8px; }
}
/* ---- 16 sept : libellés d'icônes assortis aux icônes (jamais en rouge), Tamara blanc sur marine, lien marque, squelette ---- */
.sb-i span { color: #2f2a3d; }
.specband[data-b="tutto"] .sb-i span { color: #1b3f8f; }
.specband[data-b="tenderly"] .sb-i span { color: #1e3a8a; }
.specband[data-b="smile"] .sb-i span { color: #0b7ea8; }
.specband.sb-dark .sb-i span { color: #fff; }
.phero-brand { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-family: var(--display); font-weight: 700; font-size: 12.5px;
padding: 8px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.12); transition: background .2s, transform .2s; }
.phero-brand:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.phero.light .phero-brand { color: var(--bp); border-color: color-mix(in srgb, var(--bp) 40%, #fff); background: color-mix(in srgb, var(--bp) 8%, #fff); }
.bbw { display: grid; gap: 6px; justify-items: center; flex: none; }
.bbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6f6885; }
.bbl:hover { color: var(--ink); text-decoration: underline; }
/* squelette : cartes grises qui respirent pendant le chargement des données */
#grid:empty, #pdp:empty, #mq:empty { min-height: 78vh; background-image: linear-gradient(#f1eee9, #f1eee9); background-size: calc(25% - 14px) 320px; background-repeat: space; animation: skel 1.3s ease-in-out infinite alternate; }
@keyframes skel { from { opacity: .55; } to { opacity: 1; } }
@media (max-width: 700px) { #grid:empty, #pdp:empty, #mq:empty { background-size: calc(50% - 8px) 260px; } }
/* Tamara : logo blanc sur le héros marine de la page marque */
.mhero[data-b="tamara"] .mh-logo, .mh-logo.tamara-w { content: url("../img/brands/lg-tamara-w.png"); background: none; padding: 0; }
/* ================= EFFETS (16 sept) ================= */
/* 8 · continuité : logo de marque */
.mh-logo { view-transition-name: brandlogo; }
::view-transition-group(brandlogo) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
::view-transition-old(pack), ::view-transition-new(pack), ::view-transition-old(brandlogo), ::view-transition-new(brandlogo) { mix-blend-mode: normal; object-fit: contain; }
/* 5 · inclinaison du pack + reflet */
.phero-ph { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; position: relative; }
.phero-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 42%); }
.phero-ph.tilting::after { opacity: 1; }
.phero-ph.tilting { transition: transform .08s linear; }
/* 2 · entrée des mondes : balayage lumineux, logo qui s'ouvre, cartes en cascade */
.bworld { --sweep: rgba(255,255,255,.28); }
.bworld::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
background: linear-gradient(100deg, transparent 20%, var(--sweep) 50%, transparent 80%); transform: translateX(-120%); }
.bworld.in::before { animation: bwSweep 1.1s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes bwSweep { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 0; transform: translateX(120%); } }
.bworld .bw-lg { opacity: 0; transform: scale(.55) translateY(10px); transition: opacity .7s cubic-bezier(.2,.8,.2,1) .12s, transform .9s cubic-bezier(.34,1.4,.64,1) .12s; }
.bworld.in .bw-lg { opacity: 1; transform: none; }
.bworld .bw-strip > *, .bworld .bw-feat > * { opacity: 0; transform: translateY(26px);
transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(.28s + var(--k, 0) * 70ms); }
.bworld.in .bw-strip > *, .bworld.in .bw-feat > * { opacity: 1; transform: none; }
/* 6 · icônes du bandeau : elles se posent une à une */
.specband .sb-i img { transform: scale(.6) rotate(-8deg); transition: transform .8s cubic-bezier(.34,1.5,.64,1); }
.specband.in .sb-i img { transform: none; }
.specband .sb-i:nth-child(2) img { transition-delay: .1s; } .specband .sb-i:nth-child(3) img { transition-delay: .2s; }
.specband .sb-i:nth-child(4) img { transition-delay: .3s; } .specband .sb-i:nth-child(5) img { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .bworld::before, .bworld .bw-lg, .bworld .bw-strip > *, .bworld .bw-feat > *, .specband .sb-i img { animation: none; transition: none; opacity: 1; transform: none; } }
/* ================= À PROPOS — refonte 16 sept ================= */
.about .sec-kick { text-align: start; }
.ab-pillars { margin-top: clamp(40px,6vw,80px); }
.ab-pillars h2, .ab-house h2, .ab-lucart h2, .ab-zeina h2 { font-size: clamp(26px,3.4vw,44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; margin: 6px 0 22px; }
.ab-pil3 { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,26px); }
.ab-pil { position: relative; background: #fff; border: 1.5px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 18px 46px rgba(30,20,45,.08); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.ab-pil:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(30,20,45,.14); }
.ab-pil figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: #f6f4f9; display: grid; place-items: center; }
.ab-pil figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.ab-pil figure img.pack { object-fit: contain; padding: 8%; }
.ab-pil:hover figure img { transform: scale(1.05); }
.ab-pil .ab-num { position: absolute; top: 14px; inset-inline-start: 14px; font-family: var(--display); font-weight: 800; font-size: 12px; letter-spacing: .14em; background: #fff; color: var(--z); padding: 6px 10px; border-radius: 999px; }
.ab-pil h3 { font-size: 20px; font-weight: 800; margin: 18px 22px 8px; letter-spacing: -.01em; }
.ab-pil p { margin: 0 22px 22px; font-size: 14px; line-height: 1.65; color: #4a4457; }
/* Lucart */
.ab-lucart { margin-top: clamp(48px,7vw,96px); padding: clamp(26px,4vw,56px); border-radius: 32px; color: #fff;
background: radial-gradient(90% 70% at 100% 0%, rgba(140,198,62,.28), transparent 60%), linear-gradient(160deg, #123d2b, #0b2a1e 70%, #0a2419); position: relative; overflow: hidden; }
.ab-lucart .sec-kick { color: #9ad45a; }
.ab-lucart h2 { color: #fff; }
.ab-lu-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(22px,4vw,56px); align-items: center; }
.ab-lu-logo { height: 46px; width: auto; background: #fff; padding: 8px 14px; border-radius: 12px; margin-bottom: 18px; }
.ab-lu-txt p:not(.sec-kick) { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.82); margin-bottom: 12px; }
.ab-lu-vis { position: relative; min-height: 380px; }
.ab-lu-ph { position: absolute; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.ab-lu-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-lu-ph.a { inset: 0 18% 22% 0; }
.ab-lu-ph.b { inset: 40% 0 0 34%; border: 4px solid #0b2a1e; }
.ab-lu-ph figcaption { position: absolute; bottom: 10px; inset-inline-start: 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.55); padding: 5px 9px; border-radius: 8px; }
.ab-lu-figs { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-top: clamp(26px,3.6vw,44px); }
.ab-lu-figs > div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 16px 10px; text-align: center; }
.ab-lu-figs b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(22px,2.4vw,34px); line-height: 1; color: #fff; letter-spacing: -.02em; }
.ab-lu-figs span { display: block; margin-top: 7px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 700; }
.ab-lu-time { list-style: none; margin: clamp(22px,3vw,36px) 0 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; position: relative; }
.ab-lu-time::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, #9ad45a, rgba(154,212,90,.15)); }
.ab-lu-time li { position: relative; padding-top: 12px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.75); }
.ab-lu-time li::before { content: ""; position: absolute; top: -6px; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: #9ad45a; box-shadow: 0 0 0 4px rgba(154,212,90,.25); }
.ab-lu-time b { display: block; font-family: var(--display); font-size: 17px; color: #fff; margin-bottom: 4px; }
.ab-lu-brands { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: clamp(24px,3vw,40px); }
.ab-lb { display: block; background: #fff; color: var(--ink); border-radius: 22px; overflow: hidden; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ab-lb:hover { transform: translateY(-5px); }
.ab-lb figure { margin: 0; aspect-ratio: 16/9; overflow: hidden; }
.ab-lb figure img { width: 100%; height: 100%; object-fit: cover; }
.ab-lb .lg { height: 34px; width: auto; margin: 16px 18px 6px; display: block; }
.ab-lb p { margin: 0 18px 18px; font-size: 13px; line-height: 1.6; color: #4a4457; }
/* Zeina Group */
.ab-zeina { margin-top: clamp(40px,6vw,80px); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(22px,4vw,56px); align-items: center; padding: clamp(26px,4vw,56px); border-radius: 32px;
background: radial-gradient(80% 80% at 0% 100%, rgba(255,255,255,.12), transparent 60%), linear-gradient(160deg, #5a2d8f, #3d1d66); color: #fff; }
.ab-zeina .sec-kick { color: #f2c94c; }
.ab-zeina h2 { color: #fff; }
.ab-zg-txt p:not(.sec-kick) { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.85); }
.ab-zg-logo { height: 54px; width: auto; background: #fff; padding: 8px 16px; border-radius: 12px; margin-bottom: 18px; }
.ab-zg-vis { position: relative; min-height: 360px; }
.ab-zg-ph { position: absolute; inset: 0 22% 14% 0; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ab-zg-ph img { width: 100%; height: 100%; object-fit: cover; }
.ab-zg-pack { position: absolute; inset: auto 0 0 auto; width: 46%; margin: 0; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 24px 50px rgba(0,0,0,.35); }
.ab-zg-pack img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.ab-zg-brands { display: flex; gap: 12px; margin-top: 18px; }
.ab-zg-brands a { background: #fff; border-radius: 14px; padding: 10px 16px; display: grid; place-items: center; }
.ab-zg-brands img { height: 34px; width: auto; }
/* marques maison */
.ab-house { margin-top: clamp(40px,6vw,80px); }
.ab-hgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,2vw,26px); }
.ab-hb { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 22px; border-radius: 26px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); box-shadow: 0 18px 46px rgba(30,20,45,.08); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.ab-hb:hover { transform: translateY(-5px); }
.ab-hb.doomty { background: linear-gradient(160deg, #fff, #eef2fb); } .ab-hb.belira { background: linear-gradient(160deg, #fff, #f3ecfa); } .ab-hb.excl { background: linear-gradient(160deg, #fff, #f8f0f6); }
.ab-hb .pk { width: 120px; height: 120px; object-fit: contain; }
.ab-hb .lg { height: 30px; width: auto; display: block; margin-bottom: 8px; }
.ab-hb p { font-size: 13.5px; line-height: 1.55; color: #4a4457; }
@media (max-width: 960px) { .ab-pil3, .ab-lu-brands, .ab-hgrid { grid-template-columns: 1fr 1fr; } .ab-lu-figs { grid-template-columns: repeat(3,1fr); } .ab-lu-time { grid-template-columns: repeat(3,1fr); row-gap: 22px; } .ab-lu-top, .ab-zeina { grid-template-columns: 1fr; } .ab-zg-vis { order: -1; } }
@media (max-width: 600px) { .ab-pil3, .ab-lu-brands, .ab-hgrid { grid-template-columns: 1fr; } .ab-lu-figs { grid-template-columns: 1fr 1fr; } .ab-lu-time { grid-template-columns: 1fr 1fr; } .ab-lu-vis, .ab-zg-vis { min-height: 300px; } .ab-hb { grid-template-columns: 90px 1fr; } .ab-hb .pk { width: 90px; height: 90px; } }
.ab-lu-ph.a figcaption { bottom: auto; top: 10px; }
/* à propos : vraies photos partout (16 sept) */
.ab-lb { padding-top: 6px; }
.ab-lb .lg { margin-top: 18px; }
.ab-zg-ph { inset: 0; }
.ab-hb .pk { object-fit: cover; border-radius: 18px; }
/* ================= retours 17 sept ================= */
/* 1 · cartes héros Zeina vivantes au survol */
.hcard { position: relative; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.hcard::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-60%); }
.hcard:hover { transform: translateY(-10px) scale(1.025); box-shadow: 0 30px 60px rgba(20,10,40,.28); }
.hcard:hover::after { opacity: 1; animation: hcShine .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes hcShine { to { transform: translateX(60%); } }
.hcard .hc-ph img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.hcard:hover .hc-ph img { transform: scale(1.08) rotate(-2deg); }
/* 2 · Tamara : la photo s'agrandit au survol */
.bl-prod { position: relative; }
.bl-prod img { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; transform-origin: center; position: relative; z-index: 1; }
.bl-prod:hover img { transform: scale(2.6); z-index: 20; box-shadow: 0 30px 70px rgba(20,10,40,.35); border-color: transparent; }
.bworld.bw-line { overflow: visible; }
/* 6 · canaux de distribution : cartes premium avec icône */
.ab-chan { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.ab-chan li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1.5px solid var(--line);
box-shadow: 0 10px 28px rgba(30,20,45,.06); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.ab-chan li:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(30,20,45,.12); }
.ab-chan li i { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff;
background: linear-gradient(160deg, #7B4A9E, #2E9BC6); }
.ab-chan li i svg { width: 22px; height: 22px; }
.ab-chan li b { font-size: 14px; font-weight: 700; line-height: 1.3; }
/* 7 · légende de la carte sur une ligne */
.mm-legend { display: grid; grid-template-columns: auto auto auto; gap: 10px 28px; justify-content: start; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(123,74,158,.14); }
.mm-legend > span { white-space: nowrap; }
@media (max-width: 700px) { .mm-legend { grid-template-columns: 1fr; } }
/* 7b · accueil : la maison Bakrim en priorité */
.bkhome { margin-top: clamp(30px,5vw,60px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(22px,4vw,56px); align-items: center;
padding: clamp(26px,4vw,52px); border-radius: 32px; color: #fff; position: relative; overflow: hidden;
background: radial-gradient(90% 80% at 100% 0%, rgba(46,155,198,.45), transparent 60%), linear-gradient(160deg, #4b2483, #2a1650 70%, #1c0f3a); }
.bkhome .sec-kick { text-align: start; color: #f2c94c; }
.bkhome h2 { font-size: clamp(26px,3.4vw,44px); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; color: #fff; margin: 6px 0 16px; }
.bkh-txt > p:not(.sec-kick) { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.82); max-width: 54ch; }
.bkh-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; padding: 0; }
.bkh-pills li { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .04em; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.bkh-vis { position: relative; min-height: 380px; }
.bkh-vis img { position: absolute; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.bkh-vis .p1 { inset: 0 34% 30% 0; }
.bkh-vis .p2 { inset: 36% 0 0 30%; border: 4px solid #2a1650; }
.bkh-vis .p3 { width: 38%; aspect-ratio: 1; top: 0; inset-inline-end: 0; border: 4px solid #2a1650; }
@media (max-width: 900px) { .bkhome { grid-template-columns: 1fr; } .bkh-vis { min-height: 300px; } }
.mm-legend { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.mm-legend > span { white-space: nowrap; font-size: 12px; }
/* ================= PERF (17 sept) — fluidité au défilement, tout prêt tout de suite ================= */
/* 1 · plus de flou en temps réel sur les éléments collants (le flou repeint à chaque image de défilement) */
.hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,249,246,.97); }
.mbar, .mega, .cnav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.figures > div { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,.12); }
.prozone::before, .prozone::after { filter: none; animation: none; opacity: .8; }
/* 2 · rien n'apparaît « en retard » : les sections et cartes sont visibles dès le premier rendu */
.rv, .rv.in { opacity: 1 !important; transform: none !important; transition: none !important; }
.bworld .bw-strip > *, .bworld .bw-feat > *, .bworld .bw-lg, .bworld.in .bw-strip > *, .bworld.in .bw-feat > *, .bworld.in .bw-lg,
.specband .sb-i, .specband .sb-i img, .specband.in .sb-i, .specband.in .sb-i img, .specband .sb-sub, .specband.in .sb-sub,
.mrail .pcard, .mline.in .pcard, .specband, .specband.rvv { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
.bworld::before { display: none; }
/* 3 · ombres portées par filtre (recalculées à chaque transformation) → ombres classiques ou rien */
.bw-lg, .bw-smile .bw-lg, .foot .fb img, .ab-mark, .bento .cell.trio img { filter: none !important; }
.mh-logo { filter: none; }
/* 4 · le navigateur ne dessine que ce qui est proche de l'écran */
.bworld { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.offersec, .partners, .devenir, .prozone, .bkhome { content-visibility: auto; contain-intrinsic-size: auto 600px; }
/* 5 · transitions de survol courtes */
.pcard, .hcard, .ab-pil, .ab-lb, .ab-hb, .lcard { transition-duration: .22s; }