:root{
--black:#08080A;
--charcoal:#141416;
--charcoal-2:#1C1C1F;
--gold:#C9A227;
--gold-light:#F0D27A;
--gold-dim:#8A711E;
--off-white:#F7F5F2;
--line:rgba(247,245,242,0.12);
--text-dim:rgba(247,245,242,0.6);
--danger:#E0574C;
--glow: 0 0 18px rgba(201,162,39,0.55), 0 0 42px rgba(201,162,39,0.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background-color:var(--black);
background-image:
radial-gradient(circle at 20% 15%, rgba(201,162,39,0.12), transparent 45%),
radial-gradient(circle at 85% 60%, rgba(201,162,39,0.10), transparent 50%),
linear-gradient(180deg, rgba(8,8,10,0.15), rgba(8,8,10,0.45) 55%, rgba(8,8,10,0.75) 100%),
url('https://static.wixstatic.com/media/2fd5c1_85cae83b2aea417fa79ba75d9d7f06f6~mv2.jpg'),
radial-gradient(rgba(247,245,242,0.05) 1px, transparent 1px);
background-size:auto, auto, auto, cover, 22px 22px;
background-position:center, center, center, center top, 0 0;
background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-attachment:fixed, fixed, fixed, fixed, fixed;
color:var(--off-white);font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column
}
body::after{
content:'';
position:fixed;
inset:0;
z-index:9999;
pointer-events:none;
opacity:0.05;
mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:120px 120px;
}
main{flex:1}
h1,h2,.display{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;letter-spacing:0.015em;font-weight:400;line-height:0.95}
h3,.label{font-family:'Oswald',sans-serif;text-transform:uppercase;font-weight:600}
.jp-accent{font-family:'Noto Sans JP',sans-serif;color:var(--gold);opacity:0.5;letter-spacing:0.1em}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,select{font-family:inherit;cursor:pointer}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
::selection{background:var(--gold);color:var(--black)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}
.reveal.d5{transition-delay:.30s}
.reveal.d6{transition-delay:.36s}
.reveal.d7{transition-delay:.42s}
.reveal.d8{transition-delay:.48s}
/* page fade-in */
body{animation:pageIn .5s ease both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
/* NAV */
header{position:sticky;top:0;z-index:50;background:rgba(8,8,10,0.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
header.scrolled{box-shadow:0 1px 0 var(--gold), 0 8px 24px -12px rgba(201,162,39,0.25)}
nav{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto}
.logo-img{height:52px;width:auto;transition:filter .3s}
.logo-img:hover{filter:drop-shadow(0 0 10px rgba(201,162,39,0.6))}
.nav-links{display:flex;gap:26px;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;font-weight:600;align-items:center}
.nav-links > a,.nav-links .has-dropdown > span{white-space:nowrap}
/* Paliers intermediaires : on resserre progressivement plutot que de laisser
les libelles se couper sur deux lignes. */
@media(max-width:1320px){.nav-links{gap:19px;font-size:12.5px;letter-spacing:0.04em}}
@media(max-width:1150px){.nav-links{gap:14px;font-size:11.8px;letter-spacing:0.02em}}
.mobile-only-link{display:none}
.nav-links a{opacity:0.75;transition:opacity .2s, color .2s, text-shadow .2s;position:relative}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .25s, box-shadow .25s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--gold-light);text-shadow:0 0 12px rgba(201,162,39,0.55)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%;box-shadow:0 0 8px var(--gold)}
.has-dropdown{position:relative;padding-bottom:20px;margin-bottom:-20px}
.has-dropdown > span{cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.has-dropdown > span::after{content:'';border:4px solid transparent;border-top-color:currentColor;margin-top:2px;opacity:.7}
.dropdown{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-4px);background:var(--charcoal);border:1px solid var(--line);border-radius:6px;padding:8px;min-width:190px;opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;box-shadow:0 14px 30px -10px rgba(0,0,0,0.6)}
.has-dropdown:hover .dropdown{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:4px;font-size:12px;letter-spacing:0.04em;opacity:.85;white-space:nowrap}
.dropdown a[href="pour-les-pro.html"]{background:var(--charcoal-2);border:1px solid var(--gold-dim);margin-top:4px;padding-top:8px;padding-bottom:8px;font-weight:700;opacity:1;color:var(--gold-light)}
.dropdown a[href="maillot-mystere.html"]{background:rgba(201,162,39,0.1);border:1px solid var(--gold);font-weight:700;opacity:1;color:var(--gold-light);animation:pulse 2.4s ease-in-out infinite}
.dropdown a[href="pour-les-pro.html"]:hover{background:var(--gold);color:var(--black);border-color:var(--gold)}
.dropdown a:hover{background:var(--charcoal-2);opacity:1;color:var(--gold-light)}
.dropdown a::after{display:none}
.nav-icons{display:flex;align-items:center;gap:16px}
.account-link{display:flex;align-items:center;gap:6px;color:var(--off-white);font-size:11.5px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;opacity:0.85;transition:opacity .2s}
.account-link:hover{opacity:1;color:var(--gold-light)}
.icon-btn{background:none;border:none;color:var(--off-white);opacity:.85;display:flex;padding:4px;position:relative;transition:opacity .2s,filter .2s}
.icon-btn:hover{opacity:1;color:var(--gold-light);filter:drop-shadow(0 0 6px rgba(201,162,39,0.6))}
.cart-btn{background:var(--gold);color:var(--black);padding:10px 20px;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;border-radius:3px;font-weight:700;border:none;transition:background .2s, transform .2s, box-shadow .2s;display:flex;align-items:center;gap:8px;position:relative}
.cart-btn:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:var(--glow)}
.cart-count{background:var(--black);color:var(--gold-light);border-radius:20px;font-size:11px;padding:1px 6px;min-width:16px;text-align:center}
.burger{display:none;font-size:20px;background:none;border:none;color:var(--off-white)}
/* BREADCRUMB / PAGE HEAD */
.page-head{padding:44px 0 32px;border-bottom:1px solid var(--line);background:var(--charcoal);position:relative;overflow:hidden}
.page-head::after{content:'';position:absolute;top:-60%;right:-5%;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle, rgba(201,162,39,0.14), transparent 70%)}
.breadcrumb{font-size:12px;color:var(--text-dim);letter-spacing:0.04em;margin-bottom:10px;position:relative;z-index:2}
.breadcrumb a:hover{color:var(--gold-light)}
.page-head h1{font-size:clamp(30px,4vw,48px);position:relative;z-index:2}
/* HERO (home) */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;border-bottom:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg, var(--charcoal) 0%, var(--black) 75%)}
.hero::before{content:'';position:absolute;top:-15%;right:-8%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle, rgba(201,162,39,0.22), transparent 65%);animation:pulseGlow 6s ease-in-out infinite}
.hero::after{content:'';position:absolute;bottom:-20%;left:-6%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle, rgba(201,162,39,0.1), transparent 65%);animation:pulseGlow 8s ease-in-out infinite reverse}
.hero-jp{position:absolute;top:8%;right:4%;font-family:'Noto Sans JP';font-size:clamp(60px,11vw,160px);font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(201,162,39,0.18);letter-spacing:0.1em;z-index:1;pointer-events:none;line-height:1}
@keyframes pulseGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
/* Le titre est passe a "MAILLOT MANGA FOOT" sur une ligne : la colonne texte
avait besoin de place. On lui donne la part la plus large, le maillot reste
parfaitement lisible dans le reste. */
.hero-inner{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:20px;width:100%;position:relative;z-index:2}
.hero-copy{padding:60px 24px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;width:fit-content;font-family:'Oswald';font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-light);margin-bottom:18px;font-weight:600;text-shadow:0 0 12px rgba(201,162,39,0.4)}
.eyebrow::before{content:'';width:20px;height:2px;background:var(--gold);box-shadow:0 0 8px var(--gold)}
/* Le titre est passe de "MAILLOTS / MANGA FOOT" a "MAILLOT MANGA FOOT /
D'EXCEPTION" : un mot bien plus long, qui debordait a 96px (655px de large
pour 542 disponibles). On abaisse le plafond et on elargit le conteneur. */
/* "MAILLOT MANGA FOOT" sur une seule ligne impose une police plus mesuree :
a 74px le bloc reclamait 655px pour 542 disponibles. Mesure au navigateur
de 390px a 1600px. */
/* Plafond a 48px : mesure au navigateur, "MAILLOT MANGA FOOT" reclame 547px
a cette taille pour 570px disponibles. A 52px il debordait. */
.hero h1{font-size:clamp(32px,3.7vw,48px);max-width:700px;letter-spacing:0.01em;line-height:1.06}
.hero h1 .accent{color:var(--gold);text-shadow:0 0 26px rgba(201,162,39,0.55),0 0 60px rgba(201,162,39,0.25)}
.hero p{margin-top:20px;max-width:400px;color:var(--text-dim);font-size:16px;line-height:1.6}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn-primary{background:var(--gold);color:var(--black);padding:16px 32px;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;border-radius:3px;transition:transform .2s, background .2s, box-shadow .2s;border:none;display:inline-block}
.btn-primary:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:var(--glow)}
.btn-primary:disabled{background:var(--charcoal-2);color:var(--text-dim);cursor:not-allowed;box-shadow:none}
.btn-ghost{border:1px solid var(--line);padding:16px 32px;color:var(--off-white);font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;border-radius:3px;transition:all .2s;display:inline-block}
.btn-ghost:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,0.3);color:var(--gold-light)}
.hero-visual{position:relative;width:100%;height:64vh;max-height:560px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;border-radius:12px}
.hero-visual::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%, rgba(201,162,39,0.16), transparent 60%);z-index:1}
.hero-visual img{position:absolute;top:-6%;left:50%;transform:translateX(-50%);width:130%;max-width:none;height:108%;object-fit:cover;object-position:center 12%;filter:drop-shadow(0 40px 80px rgba(0,0,0,0.7));animation:bob 6s ease-in-out infinite;transition:opacity .4s ease}
.hero-visual .hero-front{opacity:1;z-index:1}
.hero-visual .hero-back{opacity:0;z-index:2}
.hero-visual:hover .hero-front{opacity:0}
.hero-visual:hover .hero-back{opacity:1}
.hero-visual::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(0deg, var(--black) 0%, transparent 100%);z-index:2}
.hero-visual-col{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 24px 0}
.hero-caption{margin:4px 0 0}
.hero-tag{position:static;z-index:3;background:var(--charcoal-2);border:1px solid var(--gold);padding:12px 16px;border-radius:5px;font-size:12px;display:flex;align-items:center;gap:10px;box-shadow:var(--glow);text-decoration:none;color:var(--off-white);transition:background .2s, transform .2s}
.hero-tag:hover{background:var(--gold);color:var(--black);transform:translateY(-2px)}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.8s ease-in-out infinite}
.hero-logo{height:180px;width:auto;max-width:100%;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 0 14px rgba(201,162,39,0.3))}
.catalogue-pitch{margin-top:18px;padding:16px 20px;background:var(--charcoal);border:1px solid var(--gold-dim);border-radius:8px;max-width:640px}
.catalogue-pitch p{font-size:13.5px;line-height:1.7;color:var(--text-dim)}
.catalogue-pitch p strong{color:var(--gold-light);font-size:14.5px}
.catalogue-pitch .stock-fr{color:var(--gold-light);font-weight:600;margin-top:4px}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
/* MARQUEE */
.marquee-wrap{border-bottom:1px solid var(--line);background:var(--charcoal);overflow:hidden;padding:10px 0}
.referral-banner{position:relative;background:linear-gradient(90deg, rgba(201,162,39,0.16), rgba(201,162,39,0.06));border-bottom:1px solid var(--gold);color:var(--off-white);text-align:center;font-size:12.5px;padding:10px 46px;line-height:1.5}
.referral-banner b{color:var(--gold-light)}
.referral-banner-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-dim);font-size:14px;cursor:pointer;padding:6px}
.marquee{display:flex;width:max-content;animation:scrollmq 26s linear infinite}
.marquee span{display:flex;align-items:center;gap:14px;font-family:'Oswald';font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-light);padding:0 26px;white-space:nowrap}
.marquee span::before{content:'✦';color:var(--gold);margin-right:14px}
@keyframes scrollmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* TRUST STRIP */
.trust-row{border-bottom:1px solid var(--line);background:var(--charcoal)}
.trust-row .wrap{display:flex;justify-content:center;gap:44px;padding:14px 24px;flex-wrap:wrap;font-size:12px;letter-spacing:0.05em;color:var(--text-dim)}
.trust-row span{display:flex;align-items:center;gap:8px}
.trust-row svg{stroke:var(--gold)}
/* LDC SPOTLIGHT */
.ldc-spotlight{position:relative;padding:90px 0;border-bottom:1px solid var(--line);overflow:hidden;min-height:420px;display:flex;align-items:center}
.ldc-spotlight-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0.28;filter:saturate(0.6) contrast(1.1)}
.ldc-spotlight::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--black) 15%, rgba(8,8,10,0.75) 55%, rgba(8,8,10,0.35) 100%)}
.ldc-content{position:relative;z-index:2;max-width:520px}
.ldc-content h2{font-size:clamp(34px,4.6vw,58px);margin:10px 0 16px}
.ldc-content p{color:var(--text-dim);font-size:15px;line-height:1.6;margin-bottom:30px;max-width:420px}
.ldc-posters{position:absolute;right:0;top:0;bottom:0;width:38%;display:flex;z-index:1}
.ldc-posters img{width:33.33%;height:100%;object-fit:cover;filter:brightness(0.75);transition:filter .3s, transform .3s}
.ldc-posters img:hover{filter:brightness(1);transform:scale(1.03)}
.ldc-posters::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg, var(--black), transparent 25%)}
@media (max-width:900px){.ldc-posters{display:none}.ldc-spotlight-bg{opacity:0.35}}
.sect-head{display:flex;justify-content:space-between;align-items:flex-end;margin:0 0 30px 0;flex-wrap:wrap;gap:12px}
.sect-head h2{font-size:clamp(26px,3.2vw,38px);position:relative;display:inline-block}
.sect-head h2::after{content:'';position:absolute;left:0;bottom:-8px;width:56px;height:2px;background:var(--gold);box-shadow:0 0 10px var(--gold), 0 0 22px rgba(201,162,39,0.6)}
.sect-head .num{display:block;color:var(--gold);font-family:'Oswald';font-weight:700;font-size:12px;letter-spacing:0.1em;text-shadow:0 0 10px rgba(201,162,39,0.5);margin-bottom:8px}
/* Neon boosts */
.card{transition:box-shadow .3s, transform .3s}
.card:hover{box-shadow:0 0 0 1px rgba(201,162,39,0.5), 0 18px 40px -14px rgba(201,162,39,0.35), 0 0 30px rgba(201,162,39,0.12);transform:translateY(-4px)}
.logo-img{filter:drop-shadow(0 0 0 transparent);transition:filter .3s}
header:hover .logo-img, .logo-img:hover{filter:drop-shadow(0 0 10px rgba(201,162,39,0.55))}
.btn-primary{position:relative}
.btn-primary::after{content:'';position:absolute;inset:0;border-radius:3px;box-shadow:0 0 0 rgba(201,162,39,0);transition:box-shadow .3s}
.btn-primary:hover::after{box-shadow:0 0 24px 4px rgba(240,210,122,0.45)}
.sect-link{font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-light);font-weight:600;border-bottom:1px solid var(--gold-dim);padding-bottom:2px;transition:text-shadow .2s}
.sect-link:hover{text-shadow:0 0 10px rgba(201,162,39,0.5)}
section.shop{padding:76px 0;border-bottom:1px solid var(--line);position:relative}
section.shop.classics{background:radial-gradient(circle at 15% 20%, rgba(201,162,39,0.06), transparent 55%)}
/* FILTER TABS (catalogue) */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.filter-btn{background:var(--charcoal);border:1px solid var(--line);color:var(--text-dim);padding:9px 18px;border-radius:20px;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;transition:all .2s}
.filter-btn:hover{border-color:var(--gold);color:var(--gold-light)}
.filter-btn.active{background:var(--gold);border-color:var(--gold);color:var(--black);box-shadow:0 0 14px rgba(201,162,39,0.4)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:26px;padding:16px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px}
.search-box{flex:1;min-width:220px;position:relative}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);stroke:var(--text-dim);pointer-events:none}
.search-box input{width:100%;background:var(--charcoal-2);border:1px solid var(--line);color:var(--off-white);padding:11px 14px 11px 38px;border-radius:5px;font-size:13px;transition:border-color .2s}
.search-box input:focus{outline:none;border-color:var(--gold)}
.toolbar select{background:var(--charcoal-2);border:1px solid var(--line);color:var(--off-white);padding:11px 14px;border-radius:5px;font-size:12.5px;min-width:170px}
.filters-toggle-btn{display:none;align-items:center;justify-content:space-between;width:100%;gap:8px;background:var(--charcoal);border:1px solid var(--line);color:var(--off-white);padding:13px 16px;border-radius:8px;font-size:12.5px;font-weight:600;letter-spacing:0.03em;margin-bottom:14px;transition:border-color .2s}
.filters-toggle-btn.active{border-color:var(--gold);color:var(--gold-light)}
.filters-toggle-btn .chev{transition:transform .2s}
.filters-toggle-btn.active .chev{transform:rotate(180deg)}
.avail-toggle{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);background:var(--charcoal-2);border:1px solid var(--line);padding:11px 14px;border-radius:5px;cursor:pointer;user-select:none;transition:border-color .2s}
.avail-toggle:hover{border-color:var(--gold)}
.avail-toggle input{accent-color:var(--gold);width:15px;height:15px}
.avail-toggle.on{border-color:var(--gold);color:var(--gold-light)}
/* PRODUCT GRID */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{background:var(--charcoal);border:1px solid var(--line);border-radius:8px;overflow:hidden;position:relative;transition:border-color .3s, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s}
.card:hover{border-color:var(--gold);transform:translateY(-7px);box-shadow:0 18px 34px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,162,39,0.25), 0 0 24px -4px rgba(201,162,39,0.25)}
.card-img{aspect-ratio:3/4;background:#0F0F10;position:relative;overflow:hidden}
.card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease}
.card-img .img-front{opacity:1;z-index:1}
.card-img .img-back{opacity:0;z-index:2}
.card:hover .card-img .img-front{opacity:0}
.card:hover .card-img .img-back{opacity:1;transform:scale(1.06)}
.card:hover .card-img .img-front{transform:scale(1.06)}
.badge{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--black);font-size:10px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:5px 10px;border-radius:3px;z-index:2;box-shadow:0 0 10px rgba(201,162,39,0.5)}
.dev-stamp{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-11deg);background:rgba(10,10,11,0.88);border:2px solid var(--gold);color:var(--gold-light);font-weight:800;font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;padding:7px 16px;border-radius:5px;z-index:3;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,0.55);pointer-events:none}
.badge.new{background:var(--off-white);box-shadow:none}
.badge.out{background:var(--charcoal-2);color:var(--text-dim);border:1px solid var(--line);box-shadow:none}
.badge.classic{background:var(--black);color:var(--gold-light);border:1px solid var(--gold);box-shadow:0 0 10px rgba(201,162,39,0.35)}
.card-info{padding:15px}
.card-info h3{font-size:13.5px;font-weight:500;text-transform:none;letter-spacing:0;font-family:'Inter';margin-bottom:10px;min-height:34px;line-height:1.3}
.price{color:var(--off-white);font-family:'Anton';font-weight:400;font-size:18px;margin-bottom:11px;display:block}
.buy-btn{width:100%;background:transparent;border:1px solid var(--gold);color:var(--gold-light);padding:10px;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;border-radius:3px;transition:all .25s}
.buy-btn:hover{background:var(--gold);color:var(--black);box-shadow:var(--glow)}
.buy-btn:disabled{border-color:var(--line);color:var(--text-dim);cursor:not-allowed;background:transparent;box-shadow:none}
.card.is-size-out .card-img img{filter:grayscale(0.85) brightness(0.6)}
.card.is-size-out .card-info h3{color:var(--text-dim)}
.notify-btn{border-color:var(--text-dim);color:var(--text-dim)}
.notify-btn:hover{background:var(--charcoal-2);color:var(--off-white);border-color:var(--off-white)}
.ribbon-tag{display:block;font-family:'Oswald';font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-light);opacity:0.85;margin:-6px 0 8px}
/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.modal-box{background:var(--charcoal);border:1px solid var(--gold);border-radius:10px;padding:30px;max-width:400px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;position:relative;box-shadow:0 20px 60px -10px rgba(0,0,0,0.8)}
.modal-close{position:fixed;top:20px;right:20px;background:rgba(20,20,22,0.85);border:1px solid var(--line);color:var(--off-white);font-size:15px;cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:1001}
.modal-close:hover{color:var(--off-white)}
.modal-box h3{font-size:20px;margin-bottom:6px}
.modal-sub{color:var(--text-dim);font-size:13px;margin-bottom:20px}
.modal-msg{font-size:13px;color:var(--gold-light);margin-top:14px;line-height:1.6}
.size-finder-result{margin-top:18px;padding:16px;background:var(--charcoal-2);border:1px solid var(--gold);border-radius:8px;font-size:14px;text-align:center;line-height:1.6}
.size-finder-result b{font-family:'Bebas Neue';font-size:22px;color:var(--gold-light);letter-spacing:0.04em}
.size-finder-result span{font-size:12px;color:var(--text-dim)}
/* STOCK COUNT BADGE */
.stock-count-badge{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:9px 14px;border-radius:20px;font-size:12.5px;background:var(--charcoal-2);border:1px solid var(--line);opacity:0;transform:translateY(-6px) scale(0.95);transition:all .35s cubic-bezier(.34,1.56,.64,1)}
.stock-count-badge.show{opacity:1;transform:translateY(0) scale(1)}
.stock-count-badge .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.stock-count-badge .dot.ok{background:#4CAF7D;box-shadow:0 0 6px #4CAF7D}
.stock-count-badge .dot.low{background:var(--danger);box-shadow:0 0 8px var(--danger);animation:pulse 1.2s ease-in-out infinite}
.stock-count-badge.low{border-color:rgba(224,87,76,0.4);color:var(--danger);background:rgba(224,87,76,0.08)}
.stock-count-badge b{font-family:'Bebas Neue';font-size:15px;letter-spacing:0.03em}
/* STICKY ADD TO CART (mobile) */
.sticky-add-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--charcoal);border-top:1px solid var(--gold-dim);padding:12px 16px;display:none;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 -10px 30px rgba(0,0,0,0.5);transform:translateY(100%);transition:transform .35s ease}
.sticky-add-bar.show{transform:translateY(0)}
.sticky-add-info{display:flex;flex-direction:column;overflow:hidden;flex:1}
.sticky-add-info span:first-child{font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-add-info .price{font-family:'Bebas Neue';font-size:19px;color:var(--gold-light)}
.sticky-add-bar .btn-primary{padding:12px 22px;font-size:12px;white-space:nowrap;flex-shrink:0}
@media (max-width:768px){.sticky-add-bar{display:flex}}
/* PRODUCT PAGE REVIEWS */
.pd-reviews{max-width:1180px;margin:0 auto;padding:70px 24px}
.pd-reviews-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pd-review-photo img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;border:1px solid var(--line);transition:transform .3s}
.pd-review-photo img:hover{transform:translateY(-4px)}
.pd-reviews-note{margin-top:18px;font-size:12.5px;color:var(--text-dim)}
@media (max-width:900px){.pd-reviews-grid{grid-template-columns:repeat(2,1fr)}}
/* BOUTIQUE PAGE */
.boutique-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0}
.boutique-photo{margin:20px 0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.boutique-photo img{width:100%;display:block}
.press-links{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.press-link{display:flex;flex-direction:column;gap:4px;padding:16px 18px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px;transition:border-color .2s, transform .2s}
.press-link:hover{border-color:var(--gold);transform:translateX(4px)}
.press-source{font-family:'Oswald';font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light)}
.press-title{font-size:14px;color:var(--off-white);font-weight:600}
.press-cta{font-size:12px;color:var(--text-dim)}
.boutique-info-card{display:flex;gap:12px;padding:16px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px}
.boutique-info-card svg{stroke:var(--gold);flex-shrink:0;margin-top:2px}
.boutique-info-card b{display:block;font-size:13px;margin-bottom:4px}
.boutique-info-card span{display:block;font-size:12.5px;color:var(--text-dim);line-height:1.6}
.hours-block b:first-child{margin-bottom:8px}
.hours-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);padding:2px 0}
.hours-row b{font-size:12px;color:var(--off-white)}
/* CHECKOUT STEPS */
.checkout-steps{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.checkout-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim);font-weight:600}
.checkout-step span:first-child{width:24px;height:24px;border-radius:50%;background:var(--charcoal-2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.checkout-step.active{color:var(--off-white)}
.checkout-step.active span{background:var(--gold);border-color:var(--gold);color:var(--black)}
.checkout-step.done span{background:var(--gold-dim);border-color:var(--gold-dim);color:var(--black)}
.checkout-step-line{flex:1;height:1px;background:var(--line);max-width:60px}
.promo-box{display:flex;gap:10px}
.promo-box input{flex:1;background:var(--charcoal);border:1px solid var(--line);color:var(--off-white);padding:12px 14px;border-radius:5px;font-size:13px}
.promo-box input:focus{outline:none;border-color:var(--gold)}
.promo-box .btn-ghost{padding:12px 20px;white-space:nowrap}
.track-result-box{margin-top:24px;padding:20px;background:var(--charcoal);border:1px solid var(--gold);border-radius:8px}
.boutique-map iframe{filter:grayscale(0.3) invert(0.92) contrast(0.9)}
@media (max-width:640px){.boutique-info-grid{grid-template-columns:1fr}}
/* POUR LES PRO */
.pro-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pro-feature{display:flex;align-items:center;gap:14px;padding:18px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px;font-size:13.5px}
.pro-feature svg{stroke:var(--gold);flex-shrink:0}
.pro-cta-box{background:var(--charcoal);border:1px solid var(--gold);border-radius:12px;padding:44px;text-align:center;box-shadow:0 0 30px -8px rgba(201,162,39,0.25)}
.pro-cta-box p{color:var(--text-dim);max-width:520px;margin:14px auto 0;font-size:14.5px;line-height:1.6}
@media (max-width:640px){.pro-features{grid-template-columns:1fr}.pro-cta-box{padding:28px}}
.shipping-progress{background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:18px 22px;margin:24px 0;transition:border-color .3s}
.shipping-progress.unlocked{border-color:var(--gold);box-shadow:0 0 20px rgba(201,162,39,0.25)}
.shipping-progress.maxed{border-color:#4CAF7D;box-shadow:0 0 24px rgba(76,175,125,0.3)}
.shipping-progress.maxed .shipping-progress-fill{background:linear-gradient(90deg, #2f6b4f, #4CAF7D)}
.shipping-progress-text{font-size:13.5px;margin-bottom:10px}
.shipping-progress-text b{color:var(--gold-light)}
.shipping-progress-bar{height:8px;background:var(--charcoal-2);border-radius:10px;overflow:hidden}
.shipping-progress-fill{height:100%;background:linear-gradient(90deg, var(--gold-dim), var(--gold));border-radius:10px;transition:width .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 0 10px rgba(201,162,39,0.6)}
/* FLY TO CART + SAVED CART BADGE */
.fly-to-cart{position:fixed;z-index:1200;border-radius:8px;object-fit:cover;pointer-events:none;transition:transform .65s cubic-bezier(.3,.6,.4,1), opacity .65s ease;box-shadow:0 10px 30px rgba(0,0,0,0.5)}
.cart-count.bump{animation:cartBump .4s ease}
@keyframes cartBump{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
.cart-btn{position:relative}
.saved-cart-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 1.6s ease-in-out infinite}
/* SOCIAL PROOF TOAST */
.social-proof-toast{position:fixed;bottom:24px;left:24px;z-index:1050;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;align-items:center;gap:12px;max-width:290px;box-shadow:0 20px 40px -10px rgba(0,0,0,0.6);transform:translateY(20px);opacity:0;transition:transform .4s ease, opacity .4s ease}
.social-proof-toast.show{transform:translateY(0);opacity:1}
.social-proof-toast img{width:46px;height:46px;object-fit:cover;border-radius:6px;flex-shrink:0}
.sp-title{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.04em}
.sp-product{font-size:13px;font-weight:600;color:var(--off-white);margin:2px 0}
.sp-meta{font-size:11px;color:var(--gold-light)}
@media (max-width:640px){.social-proof-toast{left:12px;right:12px;max-width:none;bottom:16px}}
/* LEVEL UP TOAST */
.level-up-toast{position:fixed;top:100px;right:24px;z-index:1100;background:linear-gradient(135deg, var(--charcoal-2), var(--charcoal));border:1px solid var(--gold);border-radius:10px;padding:16px 20px;display:flex;align-items:center;gap:14px;box-shadow:0 0 0 rgba(201,162,39,0);transform:translateX(120%) scale(0.9);opacity:0;transition:transform .5s cubic-bezier(.34,1.56,.64,1), opacity .4s;max-width:320px}
.level-up-toast.show{transform:translateX(0) scale(1);opacity:1;box-shadow:0 0 30px rgba(201,162,39,0.5), 0 20px 40px -10px rgba(0,0,0,0.6);animation:levelUpPulse 1.4s ease-in-out .1s 2}
.level-up-icon{font-size:30px;filter:drop-shadow(0 0 10px rgba(201,162,39,0.7));animation:levelUpBounce 0.8s ease-in-out}
.level-up-title{font-family:'Bebas Neue';font-size:17px;letter-spacing:0.03em;color:var(--gold-light);text-shadow:0 0 12px rgba(201,162,39,0.6);line-height:1.1}
.level-up-sub{font-size:12px;color:var(--text-dim);margin-top:3px}
@keyframes levelUpPulse{0%,100%{box-shadow:0 0 30px rgba(201,162,39,0.5), 0 20px 40px -10px rgba(0,0,0,0.6)}50%{box-shadow:0 0 46px rgba(201,162,39,0.85), 0 20px 40px -10px rgba(0,0,0,0.6)}}
@keyframes levelUpBounce{0%{transform:scale(0.4) rotate(-15deg)}50%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media (max-width:640px){.level-up-toast{left:16px;right:16px;top:80px;max-width:none}}
.scroll-row{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.scroll-row-arrow{display:none}
.scroll-row::-webkit-scrollbar{height:4px}
.scroll-row::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:4px}
.scroll-row .card{min-width:215px;scroll-snap-align:start;flex-shrink:0}
.view-all-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;text-decoration:none;color:var(--off-white);min-height:340px;padding:20px}
.view-all-card:hover{border-color:var(--gold)}
.view-all-card .vac-icon{width:44px;height:44px;border-radius:50%;background:rgba(201,162,39,0.1);border:1px solid var(--gold-dim);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.view-all-card span{font-size:13px;font-weight:700;letter-spacing:0.04em}
/* PRODUCT DETAIL */
.product-detail{padding:60px 0 90px;display:grid;grid-template-columns:1fr 1fr;gap:56px}
.pd-gallery{position:sticky;top:90px;align-self:start}
.pd-gallery-main{aspect-ratio:1/1;background:var(--charcoal);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.pd-gallery-main img{width:100%;height:100%;object-fit:cover;animation:fadeSwap .35s ease}
@keyframes fadeSwap{from{opacity:0}to{opacity:1}}
.pd-thumbs{display:flex;gap:10px}
.pd-thumb{width:72px;height:72px;border-radius:6px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:border-color .2s, box-shadow .2s;opacity:.7}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb:hover{opacity:1}
.pd-thumb.active{border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,0.4);opacity:1}
.pd-info .cat-tag{font-family:'Oswald';font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px;display:block}
.pd-info h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.pd-price{font-family:'Anton';font-size:32px;color:var(--gold-light);margin-bottom:24px;text-shadow:0 0 20px rgba(201,162,39,0.3)}
.pd-stock{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);margin-bottom:28px}
.pd-stock .dot{width:8px;height:8px;border-radius:50%;background:#5FAE6E;box-shadow:0 0 8px #5FAE6E}
.pd-stock.out .dot{background:var(--danger);box-shadow:0 0 8px var(--danger)}
.pd-block{margin-bottom:28px}
.pd-block h4{font-family:'Oswald';font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:12px}
.size-row{display:flex;gap:10px;flex-wrap:wrap}
.size-btn{width:64px;height:54px;border:1px solid var(--line);border-radius:4px;background:var(--charcoal);color:var(--off-white);font-size:11.5px;font-weight:600;transition:all .2s;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1}
.size-btn span.eu{font-size:9.5px;color:var(--text-dim);font-weight:400}
.size-btn:hover:not(:disabled){border-color:var(--gold)}
.size-btn.selected{background:var(--gold);border-color:var(--gold);color:var(--black);box-shadow:var(--glow)}
.size-btn.selected span.eu{color:rgba(10,10,11,0.65)}
.size-btn.is-out{border-color:rgba(224,87,76,0.4);color:var(--danger);background:rgba(224,87,76,0.06);cursor:pointer;text-decoration:line-through;opacity:.8}
.size-btn.is-out:hover{opacity:1;border-color:var(--danger);background:rgba(224,87,76,0.15)}
.size-btn.is-out span.eu{color:var(--danger);opacity:0.7}
.size-guide-toggle{font-size:12.5px;color:var(--gold-light);text-decoration:none;margin-top:14px;display:inline-flex;align-items:center;gap:6px;background:var(--charcoal-2);border:1px solid var(--gold-dim);padding:9px 14px;border-radius:20px;font-weight:600;transition:all .2s}
.size-guide-toggle:hover{background:var(--gold-dim);border-color:var(--gold);box-shadow:0 0 12px rgba(201,162,39,0.3)}
.size-help-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.size-help-label{font-size:12px;color:var(--text-dim);font-weight:600}
.size-help-row .size-guide-toggle{margin-top:0}
/* MAILLOT MYSTERE */
.mystery-universe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.universe-check{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:8px 10px;background:var(--charcoal-2);border:1px solid var(--line);border-radius:5px;cursor:pointer;transition:border-color .2s}
.universe-check:has(input:checked){border-color:var(--gold);background:rgba(201,162,39,0.08)}
.universe-check input{accent-color:var(--gold)}
.universe-check input:disabled{opacity:0.3}
@media (max-width:640px){.mystery-universe-grid{grid-template-columns:repeat(2,1fr);gap:6px}.universe-check{padding:8px 6px;font-size:10.5px;justify-content:center;text-align:center;gap:5px}}
.size-guide-box{display:none;margin-top:14px;background:var(--charcoal);border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-size:12.5px}
.size-guide-box.open{display:block}
.size-guide-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line);color:var(--text-dim)}
.size-guide-row:last-child{border-bottom:none}
.size-guide-row b{color:var(--off-white);font-weight:600}
.size-guide-mini{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.size-guide-mini-title{font-size:11px;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-dim);margin-bottom:8px}
.size-guide-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.size-guide-mini-item{font-size:11px;text-align:center;padding:6px 4px;background:var(--charcoal-2);border:1px solid var(--line);border-radius:5px;color:var(--text-dim);line-height:1.5}
.size-guide-mini-item b{display:block;color:var(--gold-light);font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:0.03em;font-weight:400}
.size-guide-mini-item span{display:block}
.size-guide-mini-item small{font-family:'Inter',sans-serif;font-size:8px;text-transform:uppercase;letter-spacing:0.03em;opacity:0.65;margin-left:3px;font-weight:600}
.delivery-mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media (max-width:640px){.delivery-mode-choice{grid-template-columns:1fr}}
.delivery-mode-option{position:relative;cursor:pointer}
.delivery-mode-option input{position:absolute;opacity:0;pointer-events:none}
.delivery-mode-card{display:block;background:var(--charcoal-2);border:1px solid var(--line);border-radius:8px;padding:14px 16px;transition:all .2s}
.delivery-mode-option input:checked + .delivery-mode-card{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold), 0 0 14px rgba(201,162,39,0.25);background:var(--charcoal)}
.delivery-mode-option:hover .delivery-mode-card{border-color:var(--gold-dim)}
.delivery-mode-title{display:block;font-weight:600;font-size:14px;color:var(--off-white)}
.delivery-mode-sub{display:block;font-size:11.5px;color:var(--text-dim);margin-top:4px;line-height:1.4}
.relay-badge{display:inline-block;font-size:9.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--black);background:var(--gold-light);padding:2px 6px;border-radius:10px;margin-left:6px;vertical-align:middle;font-weight:700}
.relay-selected-info{margin-top:14px;padding:14px 16px;background:var(--charcoal-2);border:1px solid var(--gold);border-radius:8px;font-size:13px;line-height:1.6;color:var(--text-dim)}
.relay-selected-info b{color:var(--gold-light);display:block;margin-bottom:4px}
/* Le widget Mondial Relay est injecte par leurs propres serveurs - impossible de le
repeindre en sombre depuis notre CSS sans casser leur affichage. On l'encadre pour
que la transition clair/sombre paraisse voulue plutot que subie. */
#Zone_Widget{margin-top:4px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px var(--gold-dim), 0 10px 30px -8px rgba(0,0,0,0.6)}
.confirm-hero{text-align:center;padding:20px 0 8px}
.confirm-check{width:64px;height:64px;line-height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-light));color:var(--black);font-size:30px;font-weight:700;margin:0 auto 20px;box-shadow:var(--glow)}
.confirm-hero h1{font-family:'Bebas Neue',sans-serif;font-size:32px;letter-spacing:0.02em;margin-bottom:8px}
.confirm-hero p{color:var(--text-dim);font-size:13.5px}
.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
@media (max-width:640px){.confirm-actions{grid-template-columns:1fr}}
.video-reviews-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin:20px 0 8px}
.video-review-card{background:var(--charcoal);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;justify-content:center}
.qty-row{display:flex;align-items:center;gap:0;border:1px solid var(--line);border-radius:4px;width:fit-content}
.qty-row button{background:none;border:none;color:var(--off-white);width:40px;height:44px;font-size:16px;transition:color .2s}
.qty-row button:hover{color:var(--gold-light)}
.qty-row span{width:44px;text-align:center;font-weight:600}
.pd-actions{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.pd-actions .btn-primary{flex:1;min-width:220px;text-align:center;border:none}
.pd-desc{color:var(--text-dim);font-size:14px;line-height:1.7;border-top:1px solid var(--line);padding-top:22px;margin-top:6px}
.pd-desc p{margin-bottom:14px}
.pd-desc p:last-child{margin-bottom:0}
.pd-desc b{color:var(--off-white)}
.pd-desc-list{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.pd-desc-list li{padding:9px 14px;background:var(--charcoal);border:1px solid var(--line);border-radius:6px;font-size:13.5px}
.pd-delivery{display:flex;flex-direction:column;gap:14px;margin-top:22px;padding:18px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px}
.pd-delivery-row{display:flex;align-items:flex-start;gap:12px}
.pd-delivery-row svg{stroke:var(--gold);flex-shrink:0;margin-top:2px}
.pd-delivery-row b{display:block;font-size:13px;font-weight:600}
.pd-delivery-row span{display:block;font-size:12px;color:var(--text-dim);margin-top:2px}
.form-msg{font-size:12.5px;color:var(--gold-light);margin-top:12px;min-height:16px}
/* CART PAGE */
.cart-layout{padding:60px 0 90px;display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.cart-item{display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:88px;height:104px;object-fit:cover;border-radius:6px;background:var(--charcoal)}
.cart-item h3{font-family:'Inter';font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;margin-bottom:6px}
.cart-item .meta{font-size:12px;color:var(--text-dim)}
.cart-item .price-col{text-align:right}
.cart-item .price-col .p{font-family:'Anton';font-size:16px;margin-bottom:8px}
.remove-link{font-size:11px;color:var(--text-dim);text-decoration:underline;text-underline-offset:2px}
.remove-link:hover{color:var(--danger)}
.summary-box{background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:26px}
.summary-box h3{font-size:15px;margin-bottom:20px}
.summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-dim);margin-bottom:12px}
.summary-row.total{color:var(--off-white);font-weight:600;font-size:16px;border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.summary-row.total .val{color:var(--gold-light);font-family:'Anton';font-size:20px;text-shadow:0 0 14px rgba(201,162,39,0.3)}
.empty-state{text-align:center;padding:70px 20px;color:var(--text-dim)}
.empty-state h2{color:var(--off-white);margin-bottom:14px;font-size:26px}
/* CHECKOUT / CONTACT FORMS */
.form-page{padding:60px 0 90px;max-width:560px;margin:0 auto}
.form-grid{display:grid;gap:16px}
.form-grid.two{grid-template-columns:1fr 1fr}
.field label{display:block;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--charcoal);border:1px solid var(--line);color:var(--off-white);padding:13px 14px;border-radius:4px;font-size:14px;transition:border-color .2s, box-shadow .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,0.15)}
.form-section-title{font-family:'Oswald';font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light);margin:28px 0 14px}
.checkout-note{background:var(--charcoal);border:1px solid var(--line);border-radius:8px;padding:16px 18px;font-size:13px;color:var(--text-dim);margin-top:24px;line-height:1.6}
/* INFO PAGES */
.info-page{padding:56px 0 90px;max-width:760px;margin:0 auto}
.info-page h2{font-size:22px;margin:36px 0 12px}
.info-page h2:first-child{margin-top:0}
.info-page p,.info-page li{color:var(--text-dim);font-size:14.5px;line-height:1.75}
.info-page ul{padding-left:20px;margin-top:8px}
/* AVIS CLIENTS */
.rating-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:44px;padding:24px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px}
.rating-score{font-family:'Anton';font-size:48px;color:var(--gold-light);text-shadow:0 0 20px rgba(201,162,39,0.3);line-height:1}
.stars{color:var(--gold);font-size:16px;letter-spacing:2px}
.rating-hero .meta{font-size:13px;color:var(--text-dim)}
.review-card{background:var(--charcoal);border:1px solid var(--line);border-radius:8px;padding:20px;margin-bottom:14px;transition:border-color .2s}
.review-card:hover{border-color:var(--gold)}
.review-card .stars{margin-bottom:10px;display:block}
.review-card p{color:var(--text-dim);font-size:14px;line-height:1.65;font-style:italic}
.review-card .who{margin-top:12px;font-size:12px;color:var(--gold-light);font-family:'Oswald';letter-spacing:0.04em;text-transform:uppercase}
.photo-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:20px 0 36px}
.photo-wall img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);transition:transform .3s, box-shadow .3s}
.photo-wall img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 30px -12px rgba(0,0,0,0.6), 0 0 0 1px var(--gold)}
.photo-cta{background:var(--charcoal);border:1px dashed var(--gold-dim);border-radius:10px;padding:28px;text-align:center;margin-bottom:50px}
.photo-cta h3{margin-bottom:10px;font-size:18px}
.photo-cta p{color:var(--text-dim);font-size:14px;margin-bottom:16px}
.photo-cta a{color:var(--gold-light);font-weight:600}
.photo-carousel{position:relative;margin:20px 0 24px}
.photo-carousel-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:10px}
.photo-carousel-track::-webkit-scrollbar{display:none}
.photo-slide{flex:0 0 300px;scroll-snap-align:start}
/* height:auto est indispensable : sans lui, l'attribut height="775" de la
balise ![]()
l'emporte et le ratio 4/5 est ignore. */
.photo-slide img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
border:1px solid var(--line);transition:border-color .2s,transform .2s}
.photo-slide img:hover{border-color:var(--gold);transform:translateY(-3px)}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:var(--charcoal-2);border:1px solid var(--gold);color:var(--gold-light);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,0.5)}
.carousel-arrow.left{left:-14px}
.carousel-arrow.right{right:-14px}
.carousel-arrow:hover{background:var(--gold);color:var(--black)}
@media (max-width:640px){.carousel-arrow{display:none}}
/* PARRAINAGE */
.referral-hero{text-align:center;padding:70px 0 50px;position:relative;overflow:hidden}
.referral-hero::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:600px;height:600px;border-radius:50%;background:radial-gradient(circle, rgba(201,162,39,0.18), transparent 65%);animation:pulseGlow 6s ease-in-out infinite}
.referral-hero h1{font-size:clamp(34px,5vw,58px);position:relative;z-index:2}
.referral-hero p{max-width:480px;margin:16px auto 0;color:var(--text-dim);position:relative;z-index:2}
.referral-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:44px 0}
.ref-step{background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:28px;position:relative;overflow:hidden}
.ref-step .pct{font-family:'Anton';font-size:44px;color:var(--gold);text-shadow:0 0 18px rgba(201,162,39,0.35);margin-bottom:10px}
.ref-step h3{font-size:15px;margin-bottom:8px}
.ref-step p{color:var(--text-dim);font-size:13.5px;line-height:1.6}
.ref-code-box{background:var(--charcoal);border:1px solid var(--gold);border-radius:8px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:36px 0;box-shadow:0 0 24px -8px rgba(201,162,39,0.3)}
.ref-code-box code{font-family:'Anton';font-size:20px;color:var(--gold-light);letter-spacing:2px}
.ref-share{display:flex;gap:10px;flex-wrap:wrap}
.ref-share button{background:var(--charcoal-2);border:1px solid var(--line);color:var(--off-white);padding:9px 16px;border-radius:4px;font-size:12px;transition:all .2s}
.ref-share button:hover{border-color:var(--gold);color:var(--gold-light)}
/* CHARACTER DECOR */
.char-decor{position:absolute;bottom:0;pointer-events:none;z-index:2;filter:drop-shadow(0 20px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 18px rgba(201,162,39,0.15));opacity:0.96}
.char-decor.left{left:2%}
.char-decor.right{right:2%}
@media (max-width:980px){.char-decor{display:none}}
footer{padding:56px 0 28px}
.footer-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:34px;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:20px}
.footer-top p{color:var(--text-dim);font-size:13px;max-width:340px}
.footer-links-row{display:flex;gap:30px;font-size:13px;color:var(--text-dim);flex-wrap:wrap}
.footer-links-row a{transition:color .2s, text-shadow .2s}
.footer-links-row a:hover{color:var(--gold-light);text-shadow:0 0 10px rgba(201,162,39,0.4)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:20px;font-size:12px;color:var(--text-dim);flex-wrap:wrap;gap:10px}
.social-row{display:flex;gap:12px;margin-top:18px}
.social-row a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:all .25s}
.social-row a:hover{color:var(--gold-light);border-color:var(--gold);box-shadow:0 0 14px rgba(201,162,39,0.4);transform:translateY(-2px)}
@media (max-width:980px){
.hero-jp{display:none}
.hero-logo{height:76px}
.grid{grid-template-columns:repeat(2,1fr)}
.hero{min-height:auto}
.hero-inner{grid-template-columns:1fr}
.hero-visual-col{order:-1}
.hero-visual{height:52vh;max-height:420px}
.hero-visual img{width:150%;height:100%;object-position:center 15%}
.product-detail{grid-template-columns:1fr;gap:32px}
.pd-gallery{position:static}
.cart-layout{grid-template-columns:1fr}
.form-grid.two{grid-template-columns:1fr}
}
@media (max-width:640px){
body{background-attachment:scroll, scroll, scroll, scroll, scroll}
.nav-links{display:none}
.burger{display:block}
.burger{width:34px;height:34px;border:1px solid var(--gold-dim);border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(201,162,39,0.08);font-size:17px}
nav{position:relative}
.nav-links.mobile-open{display:flex;flex-direction:column;gap:0;position:absolute;top:100%;left:0;right:0;background:var(--charcoal);border:1px solid var(--gold);border-top:none;padding:6px 24px 14px;box-shadow:0 0 0 1px rgba(201,162,39,0.15), 0 24px 46px -12px rgba(0,0,0,0.75), 0 0 30px -4px rgba(201,162,39,0.35);z-index:200;max-height:calc(100vh - 70px);overflow-y:auto}
.nav-links.mobile-open > a{padding:15px 0;border-bottom:1px solid var(--line)}
.nav-links.mobile-open .has-dropdown{position:static;padding-bottom:0;margin-bottom:0}
.nav-links.mobile-open .has-dropdown > span{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:1px solid var(--line)}
.nav-links.mobile-open .has-dropdown > span::after{transition:transform .2s}
.nav-links.mobile-open .has-dropdown.mobile-expanded > span::after{transform:rotate(180deg)}
.nav-links.mobile-open .dropdown{position:static;opacity:1;pointer-events:none;transform:none;max-height:0;overflow:hidden;transition:max-height .25s ease;border:none;box-shadow:none;padding:0;min-width:0;background:transparent}
.nav-links.mobile-open .has-dropdown.mobile-expanded .dropdown{max-height:600px;pointer-events:auto;padding:4px 0 8px 14px}
.nav-links.mobile-open .dropdown a{padding:12px 0;border-bottom:none;opacity:.8;min-height:24px}
.grid{grid-template-columns:repeat(2,1fr);gap:12px}
.card-info h3{min-height:auto}
section.shop{padding:52px 0}
.trust-row .wrap{gap:20px;justify-content:flex-start}
.footer-links-row{gap:16px}
.cart-item{grid-template-columns:64px 1fr;grid-template-rows:auto auto}
.cart-item .price-col{grid-column:2;text-align:left}
/* ---- Header : plus compact, mieux equilibre sur petit ecran ---- */
nav{padding:10px 16px}
.logo-img{height:36px}
.cart-btn{padding:8px 14px;font-size:11px;gap:6px}
.account-link span{display:none}
.account-link{margin-right:2px}
.cart-btn svg{width:13px;height:13px}
/* ---- Hero accueil : priorite au produit, beaucoup moins de scroll avant ----
d'action. Le logo est deja dans le header juste au-dessus : pas besoin de
le repeter en grand ici. Le titre avait un plancher de 50px meme sur les
tres petits ecrans (iPhone SE 375px) - trop pour ne pas se casser sur 3-4
lignes ; on le fixe a une taille qui tient sur 1-2 lignes lisibles. */
.hero-logo{display:none}
.hero-copy{padding:20px 20px 32px}
.hero h1{font-size:34px;line-height:1.08;max-width:100%}
.hero p{font-size:14px;margin-top:12px;max-width:100%}
.hero-ctas{margin-top:20px;gap:10px}
.hero-ctas .btn-primary,.hero-ctas .btn-ghost{padding:13px 20px;font-size:12px;flex:1;text-align:center;justify-content:center}
.hero .social-row{margin-top:16px !important}
.hero-inner{gap:0}
.hero-visual-col{padding:16px 20px 0;gap:10px}
.hero-visual{height:38vh;max-height:300px;border-radius:8px}
.hero-visual img{object-position:center 8%}
.hero-caption{font-size:11px;text-align:center}
.hero-tag{font-size:11px;padding:10px 14px}
.trust-row .wrap{padding:14px 20px;font-size:11px}
/* ---- Filtres catalogue : replies par defaut derriere un bouton, pour ----
atteindre les produits sans un mur de filtres a faire defiler. */
.filters-toggle-btn{display:flex}
.filters-mobile-panel{display:none;flex-direction:column;gap:14px;margin-bottom:20px;padding:16px;background:var(--charcoal);border:1px solid var(--line);border-radius:8px}
.filters-mobile-panel.open{display:flex}
.filters-mobile-panel .filters{margin-bottom:0}
.filters-mobile-panel .toolbar{margin-bottom:0;padding:0;background:none;border:none}
/* ==========================================================================
PASSE MOBILE — COMPACITE + CONVERSION
Objectif : reduire le scroll avant d'atteindre le contenu utile, alleger
visuellement, sans jamais toucher au rendu desktop (tout est ici, dans ce
bloc @media). Chaque reduction garde une taille de police >= 10px et une
zone de clic confortable — l'idee est "compact" pas "serre".
========================================================================== */
/* ---- Rythme general : marges laterales et paddings de section ---- */
.wrap{padding:0 20px}
.mobile-only-link{display:block !important}
section.shop{padding:38px 0}
.page-head{padding:24px 0 18px}
.page-head h1{font-size:25px}
.sect-head{margin-bottom:14px}
.sect-head h2{font-size:20px}
.sect-head .num{font-size:10px;margin-bottom:4px}
/* ---- Pitch catalogue : bloc de texte trop massif, on resserre ---- */
.catalogue-pitch{padding:12px 14px;margin-top:10px}
.catalogue-pitch p{font-size:12px;line-height:1.5;margin-bottom:3px}
.catalogue-pitch p:last-child{margin-bottom:0}
.catalogue-pitch p strong{font-size:13px}
/* ---- Panneau filtres : boutons et champs plus compacts ---- */
.filters-mobile-panel .filters{gap:7px}
.filters-mobile-panel .filter-btn{padding:7px 13px;font-size:10.5px}
.filters-mobile-panel .toolbar{gap:9px}
.filters-mobile-panel .search-box input{padding:9px 12px 9px 34px;font-size:12.5px}
.filters-mobile-panel .toolbar select{padding:9px 12px;font-size:11.5px;min-width:0;flex:1 1 45%}
/* ---- Cartes produit : le bouton "Me notifier..." est trop lourd tel quel ---- */
.buy-btn{font-size:10.5px;padding:9px}
.notify-btn{font-size:9.5px;letter-spacing:0.02em;padding:9px 4px;line-height:1.3}
/* ---- Fiche produit : moins de vide avant/apres le contenu utile ---- */
.product-detail{padding:16px 0 44px;gap:20px}
.breadcrumb{margin-bottom:10px;font-size:11px}
.pd-price{font-size:26px;margin-bottom:12px}
.pd-stock{margin-bottom:14px}
.pd-block{margin-bottom:16px}
.pd-actions{margin-top:2px}
.size-btn{width:56px;height:48px;font-size:10.5px}
.size-row{gap:7px}
.pd-delivery{padding:14px;gap:10px;margin-top:12px}
.pd-delivery-row b{font-size:12.5px}
.pd-delivery-row span{font-size:11.5px}
.pd-reviews{padding:32px 18px}
.pd-reviews-grid{gap:10px}
.review-card{padding:14px}
.review-card p{font-size:12.5px;line-height:1.55}
/* ---- Rangees horizontales (Nouveautes...) : fleche visible pour signaler ----
qu'il y a plus a voir en glissant. Sans elle, beaucoup de visiteurs ne
comprennent pas qu'ils peuvent faire defiler et manquent des produits. */
.scroll-row-wrap{position:relative}
.scroll-row-wrap::after{content:'';position:absolute;top:0;right:0;bottom:12px;width:46px;background:linear-gradient(90deg, transparent, var(--black) 80%);pointer-events:none}
.scroll-row-arrow{display:flex;align-items:center;justify-content:center;position:absolute;right:8px;top:35%;width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--black);border:none;box-shadow:0 4px 16px rgba(0,0,0,0.55);z-index:3;animation:pulse 2.2s ease-in-out infinite}
/* ---- Pages formulaire (suivi, contact, retour) : trop de vide au-dessus, ----
et .form-page n'a aucune marge laterale de base -> texte colle aux bords */
.form-page{padding:22px 20px 50px}
/* ---- Meme bug sur .info-page (avis-clients, boutique, infos) ---- */
.info-page{padding:22px 20px 50px}
/* ---- Tiroir panier : 3/4 de l'ecran, pas plein ecran (on doit voir la page ----
derriere, ca rassure que c'est bien un aperçu et pas une nouvelle page) */
.cart-drawer{max-width:78vw}
/* ---- Etapes du checkout : le libelle et le cercle se chevauchaient sur ----
petit ecran, trop serre pour "1 Livraison ---- 2 Paiement" en une ligne. */
.checkout-steps{gap:8px;margin-bottom:22px}
.checkout-step{gap:5px;font-size:11px}
.checkout-step span:first-child{width:20px;height:20px;font-size:10.5px;flex-shrink:0}
.checkout-step-line{max-width:24px;flex-shrink:1}
/* ---- Accueil mobile : reordonnance des sections sans toucher au HTML ----
ni au desktop. Ordre voulu : plus vendus -> nouveautes -> classiques ->
football elite -> maillot mystere. */
main{display:flex;flex-direction:column}
.hero{order:1}
.trust-row{order:2}
#mois{order:3}
#nouveautes{order:4}
#classiques{order:5}
#collection-privee{order:6}
#mystere{order:7}
.ldc-spotlight{order:8} /* Football Elite tout en bas, comme sur ordinateur */
/* ---- "Les plus commandes" et "Les classiques" utilisent maintenant scroll-row ----
directement (comme Nouveautes) sur toutes tailles d'ecran - ici juste une taille
de carte un peu plus compacte specifiquement sur mobile. */
#monthGrid .card, #classicsGrid .card{min-width:170px;max-width:170px}
/* ---- Tampon "En developpement" : lisible mais compact sur petit ecran ---- */
.dev-stamp{font-size:10px;padding:5px 10px}
/* ---- Tiroir panier : tout etait trop grand, illisible d'un coup d'oeil ---- */
.cart-drawer-head{padding:14px 16px}
.cart-drawer-head h3{font-size:18px}
.cart-drawer-body{padding:12px 16px}
.cart-drawer-tier{padding:9px 12px;font-size:11px;margin-bottom:12px}
.cart-drawer-item{gap:9px;padding:10px 0}
.cart-drawer-item img{width:44px;height:44px}
.cart-drawer-item-info .name{font-size:12px}
.cart-drawer-item-info .meta{font-size:10.5px}
.cart-drawer-item-right .price{font-size:14px}
.cart-drawer-item-right .remove{font-size:10px}
.cart-drawer-footer{padding:12px 16px}
.cart-drawer-total{font-size:16px}
.cart-drawer-footer .btn-primary,.cart-drawer-footer .btn-ghost{padding:12px 20px;font-size:11.5px}
.cart-drawer-continue{padding:9px;font-size:11.5px;margin-top:8px}
.cart-drawer-crosssell{margin-top:12px;padding-top:12px}
}
@media (min-width:641px){
.filters-toggle-btn{display:none}
}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}
/* ============ CUSTOMIZER ============ */
.custom-layout{display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:start;margin-top:20px}
.custom-preview{position:sticky;top:100px;background:var(--charcoal);border:1px solid var(--line);border-radius:14px;padding:30px;text-align:center}
.custom-preview-stage{position:relative;max-width:340px;margin:0 auto}
.custom-preview svg{width:100%;height:auto;filter:drop-shadow(0 25px 45px rgba(0,0,0,0.55))}
.jersey-shading{pointer-events:none;mix-blend-mode:soft-light}
.jersey-logo-img{cursor:grab}
.jersey-logo-img:active{cursor:grabbing}
.jersey-logo-outline{fill:none;stroke:rgba(247,245,242,0.35);stroke-width:2;stroke-dasharray:6 5;pointer-events:none}
.view-toggle{display:flex;justify-content:center;gap:10px;margin-top:22px}
.view-toggle button{background:var(--charcoal-2);border:1px solid var(--line);color:var(--text-dim);padding:9px 20px;border-radius:20px;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;transition:all .2s}
.view-toggle button.active{background:var(--gold);border-color:var(--gold);color:var(--black)}
.preview-actions{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.custom-panel{display:flex;flex-direction:column;gap:26px}
.custom-block{background:var(--charcoal);border:1px solid var(--line);border-radius:10px;padding:20px}
.custom-block h4{font-family:'Oswald';font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.zone-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.zone-tab{background:var(--charcoal-2);border:1px solid var(--line);color:var(--text-dim);padding:8px 14px;border-radius:20px;font-size:12px;transition:all .2s}
.zone-tab.active{background:var(--gold-dim);border-color:var(--gold);color:var(--off-white)}
.zone-tab .swatch-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;border:1px solid rgba(255,255,255,0.3);vertical-align:middle}
.color-swatches{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.color-swatch{width:32px;height:32px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:transform .15s, border-color .15s;position:relative}
.color-swatch:hover{transform:scale(1.12)}
.color-swatch.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--black), 0 0 0 3px var(--gold)}
.color-swatch-custom{width:32px;height:32px;padding:0;border:2px solid var(--line);border-radius:50%;overflow:hidden;cursor:pointer;background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.color-swatch-custom input{width:140%;height:140%;margin:-20%;cursor:pointer;border:none}
.logo-drop{border:2px dashed var(--line);border-radius:8px;padding:22px;text-align:center;cursor:pointer;transition:border-color .2s}
.logo-drop:hover, .logo-drop.dragover{border-color:var(--gold)}
.logo-drop p{font-size:12.5px;color:var(--text-dim);margin-top:8px}
.logo-controls{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.logo-controls label{font-size:11.5px;color:var(--text-dim);display:flex;justify-content:space-between}
.logo-controls input[type="range"]{width:100%;accent-color:var(--gold)}
.logo-remove{font-size:12px;color:var(--danger);cursor:pointer;text-decoration:underline;margin-top:6px;display:inline-block}
.custom-block .field{margin-bottom:14px}
.custom-block .field:last-child{margin-bottom:0}
.font-tabs{display:flex;gap:8px}
.font-tab{flex:1;background:var(--charcoal-2);border:1px solid var(--line);color:var(--off-white);padding:12px 6px;border-radius:6px;font-size:16px;text-align:center;cursor:pointer;transition:all .2s}
.font-tab.active{border-color:var(--gold);background:var(--gold-dim);box-shadow:0 0 12px rgba(201,162,39,0.3)}
.quote-summary{font-size:12.5px;color:var(--text-dim);line-height:1.7;background:var(--charcoal-2);border-radius:8px;padding:14px 16px;margin-bottom:16px}
.quote-summary b{color:var(--off-white)}
@media (max-width:900px){
.custom-layout{grid-template-columns:1fr}
.custom-preview{position:static}
}
/* ============ CUSTOMIZER v2 : photo-based ============ */
.custom-preview-stage{position:relative;max-width:360px;margin:0 auto;aspect-ratio:7/8.6;border-radius:10px;overflow:hidden;background:#1c1c1e;user-select:none}
.jersey-base-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.jersey-color-layer{position:absolute;inset:0;mix-blend-mode:multiply;pointer-events:none;transition:background-color .15s}
.jersey-pattern-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:luminosity;pointer-events:none}
.draggable-el{position:absolute;cursor:grab;touch-action:none;user-select:none}
.draggable-el.dragging{cursor:grabbing;z-index:50}
.draggable-el img{width:100%;display:block;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4))}
.logo-placeholder-outline{width:15%;aspect-ratio:1;left:42%;top:22%;border:2px dashed rgba(247,245,242,0.4);border-radius:6px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.04)}
.logo-placeholder-outline span{font-size:8px;color:rgba(247,245,242,0.5);font-family:'Oswald';letter-spacing:0.05em;text-align:center}
.jersey-text{font-family:'Bebas Neue';font-size:15px;letter-spacing:0.06em;color:#F7F5F2;text-shadow:0 1px 2px rgba(0,0,0,0.5);white-space:nowrap;padding:4px 8px;left:18%}
.jersey-number{font-family:'Bebas Neue';font-size:46px;color:#F7F5F2;text-shadow:0 2px 4px rgba(0,0,0,0.5);line-height:1;padding:2px 8px;left:35%}
.draggable-el:hover{outline:1px dashed rgba(201,162,39,0.6);outline-offset:3px}
.pattern-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pattern-thumb{aspect-ratio:1;border-radius:6px;background-size:cover;background-position:center top;border:2px solid var(--line);cursor:pointer;transition:border-color .2s, transform .15s;background-color:var(--charcoal-2)}
.pattern-thumb:hover{transform:scale(1.05)}
.pattern-thumb.selected{border-color:var(--gold);box-shadow:0 0 10px rgba(201,162,39,0.4)}
/* ============ SLIDE-OUT CART DRAWER ============ */
.cart-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:1300;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(2px)}
.cart-drawer-backdrop.open{opacity:1;pointer-events:auto}
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:92vw;background:var(--charcoal);border-left:1px solid var(--line);z-index:1301;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.8,.35,1);box-shadow:-20px 0 50px rgba(0,0,0,0.5)}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.cart-drawer-head h3{font-family:'Bebas Neue';font-size:22px;letter-spacing:0.03em}
.cart-drawer-body{flex:1;overflow-y:auto;padding:18px 22px}
.cart-drawer-tier{background:var(--charcoal-2);border:1px solid var(--gold-dim);border-radius:8px;padding:11px 14px;font-size:12.5px;color:var(--gold-light);margin-bottom:18px;text-align:center}
.cart-drawer-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-drawer-item img{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0}
.cart-drawer-item-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-drawer-item-info .name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-drawer-item-info .meta{font-size:11.5px;color:var(--text-dim)}
.cart-drawer-item-right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;flex-shrink:0}
.cart-drawer-item-right .price{font-family:'Bebas Neue';font-size:16px;color:var(--gold-light)}
.cart-drawer-item-right .remove{font-size:11px;color:var(--text-dim);text-decoration:underline;cursor:pointer}
.cart-drawer-item-right .remove:hover{color:var(--danger)}
.cart-drawer-empty{text-align:center;padding:60px 20px;color:var(--text-dim)}
.cart-drawer-footer{padding:18px 22px;border-top:1px solid var(--line)}
.cart-drawer-total{display:flex;justify-content:space-between;font-family:'Bebas Neue';font-size:20px;color:var(--off-white)}
.cart-drawer-continue{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:11px;border-radius:5px;border:1px solid var(--gold-dim);background:var(--charcoal-2);font-size:12.5px;font-weight:600;color:var(--gold-light);text-decoration:none;transition:all .2s}
.cart-drawer-continue:hover{background:var(--gold-dim);border-color:var(--gold);color:var(--off-white)}
.cart-drawer-crosssell{margin-top:16px;padding-top:16px;border-top:1px dashed var(--line)}
.cross-sell-title{font-family:'Oswald';font-size:11.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gold-light);margin-bottom:10px}
.cross-sell-item{display:flex;align-items:center;gap:10px;padding:8px 0}
.cross-sell-item img{width:40px;height:40px;object-fit:cover;border-radius:5px;flex-shrink:0}
.cross-sell-info{flex:1;display:flex;flex-direction:column;min-width:0}
.cross-sell-info span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cross-sell-info b{font-size:12px;color:var(--gold-light)}
.cross-sell-add{padding:8px 14px !important;font-size:11.5px !important;white-space:nowrap;flex-shrink:0;box-shadow:0 0 10px rgba(201,162,39,0.35)}
@media (max-width:480px){.cart-drawer{width:100vw;max-width:100vw}}
/* ============ MAILLOT MYSTERE (page dediee) ============ */
.mystery-2col{display:grid;grid-template-columns:1.3fr 0.9fr;gap:36px;padding:32px 0 60px;align-items:start}
.mystery-hero-inline{position:relative;padding:24px 26px;border-radius:14px;background:radial-gradient(circle at 20% 10%, rgba(201,162,39,0.14), transparent 55%), var(--charcoal);border:1px solid var(--line);overflow:hidden}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'Oswald';font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.mystery-title{font-size:clamp(26px,3.4vw,38px);position:relative;z-index:2;text-shadow:0 0 30px rgba(201,162,39,0.4);margin-top:10px}
.mystery-sub{position:relative;z-index:2;color:var(--text-dim);font-size:13.5px;line-height:1.6;max-width:420px;margin:8px 0 0}
.mystery-savings-tag{position:relative;z-index:2;display:inline-flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:16px;background:var(--charcoal-2);border:1px solid var(--gold);padding:12px 20px;border-radius:10px;box-shadow:0 0 24px -6px rgba(201,162,39,0.45)}
.mystery-savings-price{display:flex;align-items:baseline;gap:10px}
.mystery-savings-price .old{font-size:15px;color:var(--text-dim);text-decoration:line-through}
.mystery-savings-price .arrow{color:var(--gold)}
.mystery-savings-price .new{font-family:'Bebas Neue';font-size:30px;color:var(--gold-light)}
.mystery-savings-badge{font-size:12px;color:#6FDDA0;font-weight:600;background:rgba(76,175,125,0.14);padding:5px 12px;border-radius:20px}
.mystery-savings-badge b{color:#8CFFC0}
.mystery-how-title{text-align:center;font-family:'Bebas Neue';font-size:22px;letter-spacing:0.03em;color:var(--gold-light);background:var(--charcoal);border:1px solid var(--gold-dim);border-radius:10px;padding:12px;margin-top:18px;text-shadow:0 0 16px rgba(201,162,39,0.35)}
.mystery-how{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 18px}
.mystery-how-step{text-align:center;padding:14px 8px;background:var(--charcoal);border:1px solid var(--line);border-radius:10px}
.mystery-how-step .num{width:28px;height:28px;border-radius:50%;background:var(--gold);color:var(--black);font-family:'Bebas Neue';font-size:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:0 0 16px rgba(201,162,39,0.4)}
.mystery-how-step h3{font-size:12.5px;font-weight:600;font-family:'Inter';line-height:1.35}
.mystery-game{margin-top:18px;padding:20px;background:var(--charcoal);border:1px solid var(--line);border-radius:14px}
.mystery-game h2{font-size:17px;text-align:center;margin-bottom:14px;font-family:'Oswald';text-transform:none;letter-spacing:0}
.mystery-reel-wrap{position:relative;margin:0 auto 12px;height:120px;overflow:hidden;border-radius:12px;background:linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.15));border:1px solid var(--line)}
.mystery-reel-frame{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 70px 0 36px -22px var(--charcoal), inset -70px 0 36px -22px var(--charcoal);border-radius:12px}
.mystery-reel-spotlight{position:absolute;top:0;bottom:0;left:50%;width:112px;transform:translateX(-50%);z-index:1;background:radial-gradient(ellipse at center, rgba(201,162,39,0.22), transparent 72%);pointer-events:none}
.mystery-reel-track{display:flex;position:absolute;left:50%;top:0;height:100%;z-index:2}
.mystery-reel-card{width:112px;height:120px;flex-shrink:0;padding:9px;transition:transform .1s linear, opacity .1s linear, filter .1s linear;will-change:transform}
.mystery-reel-card img{width:100%;height:100%;object-fit:cover;border-radius:9px;border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,0.5)}
.mystery-result-msg{margin-top:12px;font-size:12px;color:var(--text-dim);max-width:460px;margin-left:auto;margin-right:auto;line-height:1.55;text-align:center}
.mystery-result-msg b{color:var(--gold-light)}
.mystery-order{position:sticky;top:100px}
.mystery-order-box{background:var(--charcoal);border:1px solid var(--gold-dim);border-radius:14px;padding:24px;box-shadow:0 20px 50px -20px rgba(0,0,0,0.6)}
.mystery-order-box h2{text-align:center;margin-bottom:10px;font-size:19px;font-family:'Bebas Neue'}
.mystery-order-intro{font-size:12.5px;color:var(--text-dim);line-height:1.65;margin-bottom:18px;text-align:center}
.mystery-order-intro b{color:var(--gold-light);font-weight:600}
@media (max-width:980px){
.mystery-2col{grid-template-columns:1fr}
.mystery-order{position:static}
}
@media (max-width:640px){
.mystery-how{grid-template-columns:1fr}
.mystery-order-box{padding:20px}
.mystery-hero-inline{padding:20px}
}
/* MYSTERY HOME CARD */
.mystery-home-card{display:flex;gap:32px;align-items:center;background:radial-gradient(circle at 15% 20%, rgba(201,162,39,0.12), transparent 55%), var(--charcoal);border:1px solid var(--gold);border-radius:16px;padding:30px;box-shadow:0 0 40px -10px rgba(201,162,39,0.3)}
.mystery-home-card img{width:180px;height:180px;object-fit:cover;border-radius:12px;flex-shrink:0;box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.mystery-home-info{flex:1}
.mystery-home-badge{display:inline-block;font-size:11.5px;font-weight:700;color:#6FDDA0;background:rgba(76,175,125,0.14);padding:5px 12px;border-radius:20px;margin-bottom:10px}
.mystery-home-info h3{font-family:'Bebas Neue';font-size:clamp(20px,2.4vw,28px);letter-spacing:0.02em;margin-bottom:10px}
.mystery-home-info p{color:var(--text-dim);font-size:13.5px;line-height:1.6;margin-bottom:18px;max-width:480px}
@media (max-width:640px){
.mystery-home-card{flex-direction:column;text-align:center;padding:22px}
.mystery-home-card img{width:140px;height:140px}
.mystery-home-info p{max-width:none}
}
/* =========================================================================
CORRECTIONS MOBILE
========================================================================= */
/* --- 1. Debordement horizontal ---
Aucune page ne doit pouvoir se faire glisser lateralement. On coupe le
depassement a la racine, et on empeche les elements larges (images, tableaux,
iframes de widgets tiers) de forcer la largeur du document. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table, pre { max-width: 100%; }
* { min-width: 0; }
/* --- 2. Zoom automatique sur iPhone ---
iOS zoome des qu'un champ a une taille de police inferieure a 16px, et le
dezoom manuel est ensuite penible. On force donc 16px sur TOUS les champs en
mobile, y compris ceux des widgets tiers comme Mondial Relay. */
@media (max-width: 900px) {
input, select, textarea,
.field input, .field select, .field textarea,
.search-box input, .promo-box input,
#Zone_Widget input, #Zone_Widget select {
font-size: 16px !important;
}
}
/* --- 3. Widget Mondial Relay ---
Widget injecte par un script tiers : on ne peut pas modifier son HTML, mais
on impose nos couleurs. Sans ca, il herite d'un texte clair sur fond clair,
totalement illisible. */
#Zone_Widget { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#Zone_Widget * { max-width: 100%; box-sizing: border-box; }
#Zone_Widget input[type="text"],
#Zone_Widget input[type="search"],
#Zone_Widget input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#Zone_Widget select {
background: #ffffff !important;
color: #111111 !important;
-webkit-text-fill-color: #111111 !important; /* Safari ignore color sur certains champs */
border: 1px solid #b9b9b9 !important;
border-radius: 5px !important;
padding: 11px 12px !important;
width: 100% !important;
}
#Zone_Widget input::placeholder { color: #6b6b6b !important; opacity: 1 !important; }
#Zone_Widget label, #Zone_Widget p, #Zone_Widget span, #Zone_Widget div, #Zone_Widget td, #Zone_Widget li {
color: #1a1a1a;
}
/* Le fond blanc du widget garantit un contraste correct quel que soit son propre habillage */
#Zone_Widget { background: #f4f4f4; border-radius: 8px; padding: 12px; }
#Zone_Widget button, #Zone_Widget .btn {
background: var(--gold) !important; color: #1a1408 !important;
border: none !important; border-radius: 5px !important;
padding: 11px 16px !important; font-size: 15px !important; font-weight: 600;
}
#Zone_Widget img { max-width: 100%; height: auto; }
/* =========================================================================
MENU MOBILE — refonte
=========================================================================
Problemes corriges : entrees centrees sans hierarchie, menu trop haut, et
surtout le sous-menu Catalogue qui occupait tout l'ecran une fois deplie.
========================================================================= */
@media (max-width: 900px) {
.nav-links.mobile-open {
padding: 4px 18px 12px;
max-height: calc(100dvh - 64px); /* dvh : tient compte de la barre Safari */
font-size: 13px;
letter-spacing: 0.04em;
}
/* Entrees alignees a gauche : on lit une liste, pas un poeme centre */
.nav-links.mobile-open > a,
.nav-links.mobile-open .has-dropdown > span {
text-align: left;
justify-content: flex-start;
padding: 13px 2px;
opacity: 1;
}
.nav-links.mobile-open > a::after { display: none; } /* pas de soulignement anime en liste */
/* Les entetes de section (Catalogue, Information) se distinguent du reste */
.nav-links.mobile-open .has-dropdown > span {
justify-content: space-between;
color: var(--gold-light);
font-weight: 700;
}
/* Sous-menu : dense, avec un filet vertical qui montre l'imbrication.
⚠️ NE PAS remettre de max-height ici. Le sous-menu etait plafonne a 46vh
avec son propre defilement interne. Sur un ecran de 736 points (iPhone
courant), cela donnait 339px d'affichage pour 355px de contenu : les deux
dernieres entrees — "Maillot Mystere" et "Pour les pro" — passaient sous
le bord, dans une zone de defilement que personne ne devine. Le bug etait
invisible sur les grands ecrans, ou tout rentrait de justesse.
C'est desormais le menu ENTIER qui defile : un seul defilement, evident. */
.nav-links.mobile-open .has-dropdown.mobile-expanded .dropdown {
max-height: none;
padding: 2px 0 6px 14px;
margin-left: 2px;
border-left: 2px solid var(--gold-dim);
}
.nav-links.mobile-open .dropdown a {
padding: 10px 0;
font-size: 12.5px;
opacity: .82;
text-align: left;
}
.nav-links.mobile-open .dropdown a:active { opacity: 1; color: var(--gold-light); }
/* Separateurs plus discrets : le trait plein partout alourdissait l'ensemble */
.nav-links.mobile-open > a,
.nav-links.mobile-open .has-dropdown > span {
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.nav-links.mobile-open > a:last-child { border-bottom: none; }
}
/* =========================================================================
LISIBILITE DES BOUTONS SECONDAIRES
=========================================================================
"Modifier l'adresse de livraison" s'affichait en blanc sur blanc, sur mobile
comme sur ordinateur : illisible tant qu'on ne le survolait pas.
========================================================================= */
.btn-ghost, button.btn-ghost, a.btn-ghost {
background: var(--charcoal-2);
border: 1px solid var(--gold-dim);
color: var(--gold-light);
}
.btn-ghost:hover, button.btn-ghost:hover, a.btn-ghost:hover {
background: rgba(201,162,39,0.14);
border-color: var(--gold);
color: var(--gold-light);
}
/* =========================================================================
ALIGNEMENT ET DEBORDEMENTS
========================================================================= */
/* --- En-tete aligne sur le contenu ---
La barre de navigation etait a 16px de marge alors que .wrap est a 24px :
le logo et le panier n'etaient donc jamais dans l'axe du contenu en dessous. */
@media (max-width: 900px) {
nav { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 400px) {
.wrap { padding: 0 16px; }
nav { padding-left: 16px; padding-right: 16px; }
}
/* --- Selecteur de tailles ---
Les boutons etaient a largeur fixe (64px) : sur un ecran de 360px, la rangee
depassait et provoquait un defilement horizontal de toute la page. Ils
s'adaptent desormais a la largeur disponible. */
@media (max-width: 560px) {
.size-btn { width: auto; min-width: 0; flex: 1 1 calc(25% - 8px); max-width: 33%; }
}
/* --- Filet de securite anti-debordement ---
Les conteneurs de defilement horizontal volontaires (carrousels, galeries)
sont preserves ; tout le reste est contraint a la largeur de l'ecran. */
@media (max-width: 900px) {
.summary-box, .checkout-note, .field, form, main, section { max-width: 100%; }
pre, code { white-space: pre-wrap; word-break: break-word; }
table { display: block; overflow-x: auto; }
}
/* =========================================================================
ILLUSTRATIONS DE PERSONNAGES
=========================================================================
Visuels decoratifs places en arriere-plan des sections. Ils habillent le
site sans jamais gener la lecture ni le clic (pointer-events:none), et
disparaissent sur petit ecran ou l'espace manque.
========================================================================= */
.illus-zone { position: relative; }
.illus {
position: absolute;
bottom: 0;
pointer-events: none; /* jamais d'obstacle au clic */
user-select: none;
z-index: 0;
opacity: .9;
filter: drop-shadow(0 18px 40px rgba(0,0,0,.55));
}
.illus-zone > *:not(.illus) { position: relative; z-index: 1; }
.illus-left { left: -10px; }
.illus-right { right: -10px; }
/* Taille par defaut : proportionnelle a la hauteur de la section */
.illus-sm { height: 240px; }
.illus-md { height: 320px; }
.illus-lg { height: 420px; }
/* Fondu vers le bas : le personnage semble emerger du fond au lieu d'etre
colle sur un bord net */
.illus-fade { -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
/* --- Responsive ---
Sous 1250px on reduit, sous 900px on masque les illustrations laterales :
sur mobile la place manque et elles passeraient derriere le texte. */
@media (max-width: 1250px) {
.illus-lg { height: 330px; }
.illus-md { height: 250px; }
.illus-sm { height: 190px; }
.illus-left { left: -50px; }
.illus-right { right: -50px; }
.illus { opacity: .55; }
}
/* Sur mobile on ne masque plus : on rapetisse et on estompe. L'illustration
reste derriere le contenu (z-index 0) et ne gene ni la lecture ni le clic,
mais la page garde son identite — c'est la ou se trouve la majorite du trafic. */
@media (max-width: 900px) {
.illus-side { height: 175px !important; opacity: .28; }
.illus-left { left: -38px; }
.illus-right { right: -38px; }
}
@media (max-width: 560px) {
.illus-side { height: 140px !important; opacity: .22; }
.illus-left { left: -30px; }
.illus-right { right: -30px; }
}
/* --- Illustration mise en avant (visible aussi sur mobile) ---
Utilisee en element de contenu, pas en decor de fond. */
.illus-feature { display: block; margin: 0 auto; height: 300px; width: auto; max-width: 100%;
filter: drop-shadow(0 16px 34px rgba(0,0,0,.5)); }
@media (max-width: 700px) { .illus-feature { height: 210px; } }
/* Duo d'illustrations qui encadrent un bloc */
.illus-duo { display: flex; align-items: flex-end; justify-content: center; gap: 24px; flex-wrap: wrap; }
.illus-duo img { height: 260px; width: auto; filter: drop-shadow(0 16px 34px rgba(0,0,0,.5)); }
@media (max-width: 700px) { .illus-duo img { height: 165px; } .illus-duo { gap: 10px; } }
/* --- Illustrations incrustees DANS une banniere -------------------------
Lecon tiree de "pour les pro" : une .illus posee dans le .wrap qui englobe
toute la page se colle en bas de CETTE page (bottom:0) — donc derriere le
dernier bloc, la ou personne ne la voit. Une illustration de banniere doit
vivre dans la banniere elle-meme, jamais dans le conteneur general.
Elles restent en arriere-plan (z-index 0), ne captent aucun clic, et
s'effacent presque entierement sur mobile : la ou l'espace manque, une
silhouette a 15% d'opacite habille le fond au lieu de faire tache. */
/* ⚠️ LECON DE PRODUCTION — pourquoi un fond CSS et pas une balise ![]()
.
Ces personnages etaient des ![]()
. En v20, poses dans le flux
de la page, ils s'affichaient partout. Une fois passes en position absolue
dans une banniere en overflow:hidden, le moteur de Safari/iOS n'a plus su
decider s'ils etaient visibles : il n'a PLUS JAMAIS demande le fichier au
serveur. Resultat, sur iPhone : la place reservee, et rien dedans. Invisible
sur Chrome et Firefox, ou le comportement est different.
Un fond CSS n'a pas de chargement differe ni de notion de visibilite : il est
telecharge des que l'element est affiche, par tous les moteurs. Le probleme
ne peut donc plus se reproduire.
Les chemins sont relatifs a CE fichier : illus/x.webp = assets/illus/x.webp */
.hero-illus{position:absolute;bottom:0;z-index:0;pointer-events:none;user-select:none;
background-repeat:no-repeat;background-position:bottom center;background-size:contain;
filter:drop-shadow(0 16px 34px rgba(0,0,0,.55));
-webkit-mask-image:linear-gradient(to bottom,#000 66%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 66%,transparent 100%)}
.illus-rengoku {background-image:url('illus/rengoku.webp')}
.illus-shanks {background-image:url('illus/shanks.webp')}
.illus-gojo {background-image:url('illus/gojo.webp')}
.illus-sukuna {background-image:url('illus/sukuna.webp')}
.illus-tanjiro {background-image:url('illus/tanjiro.webp')}
.illus-black_goku{background-image:url('illus/black_goku.webp')}
.illus-buu {background-image:url('illus/buu.webp')}
/* Les dessins restent NETS : seul le fondu vers le bas les fait "emerger" de
la banniere. Une illustration a demi transparente donnait un rendu sale. */
.hero-illus.avant{opacity:1}
.hero-illus.arriere{opacity:.9}
/* Le texte de la banniere doit rester au-dessus : un element statique se peint
SOUS un element positionne, meme en z-index 0. */
.referral-hero .eyebrow,.page-head .wrap{position:relative;z-index:2}
@media (max-width:1150px){
.hero-illus.arriere{display:none} /* un seul personnage : l'espace se resserre */
}
/* --- Mobile : "accent d'angle" -------------------------------------------
Sur telephone, un personnage entier pose au milieu ressemble a un
autocollant et coupe la lecture. On garde UN seul personnage, ancre dans
l'angle et volontairement RECADRE par le bord de la banniere : coupe, il se
lit comme une mise en scene et non comme une vignette collee. Le texte
passe a gauche et recupere toute la place dont il a besoin. */
@media (max-width:900px){
/* Tailles calibrees sur un ecran de 390px REEL (mesure au navigateur) :
a 170px de haut, le personnage occupe ~95px de large, soit un quart de
l'ecran — present sans ecraser. Le decalage de 6px suffit a le faire
"sortir" du cadre : au-dela il disparait purement et simplement. */
.hero-illus{height:186px!important;max-height:none;opacity:1!important;
left:auto!important;right:-6px!important;bottom:0!important;
-webkit-mask-image:linear-gradient(to bottom,#000 74%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 74%,transparent 100%)}
/* Largeurs calculees sur les proportions reelles de chaque dessin. */
.hero-illus.illus-rengoku{width:104px!important}
.hero-illus.illus-gojo{width:104px!important}
.hero-illus.illus-shanks{width:113px!important}
.hero-illus.illus-sukuna{width:128px!important}
.hero-illus.illus-tanjiro{width:125px!important}
.hero-illus.illus-black_goku{width:129px!important}
.hero-illus.illus-buu{width:124px!important}
/* La banniere du maillot mystere est un encadre, pas une bande pleine
largeur : le personnage y est un peu plus petit pour rester a sa place. */
.mystery-hero-inline .hero-illus{height:158px!important;right:-4px!important}
.mystery-hero-inline .illus-buu{width:106px!important}
.mystery-hero-inline{padding-right:98px}
.hero-illus.arriere{display:none} /* jamais deux personnages sur mobile */
/* La banniere passe a gauche et se reserve une gouttiere a droite, pour que
le texte ne chevauche jamais le personnage. */
.referral-hero{text-align:left;padding:30px 0 24px;padding-right:112px;min-height:200px}
.referral-hero .eyebrow{justify-content:flex-start!important;margin:0 0 12px!important}
.referral-hero h1{font-size:29px}
.referral-hero p{margin-left:0;margin-right:0;max-width:none}
/* Bandeau de titre (page Avis) : plus court, donc personnage plus petit. */
.illus-head{min-height:132px}
.illus-head .hero-illus{height:134px!important;right:-6px!important}
.illus-head .illus-gojo{width:75px!important}
.illus-head .illus-sukuna{width:92px!important}
.illus-head .illus-shanks{width:82px!important}
.illus-head .wrap{padding-right:86px}
}
@media (max-width:370px){
.hero-illus{height:166px!important}
.hero-illus.illus-rengoku{width:93px!important}
.hero-illus.illus-gojo{width:93px!important}
.hero-illus.illus-tanjiro{width:112px!important}
.referral-hero{padding-right:94px;min-height:172px}
.referral-hero h1{font-size:26px}
.illus-head .hero-illus{height:122px!important}
.illus-head .illus-gojo{width:68px!important}
.illus-head .wrap{padding-right:78px}
}
/* --- Correctifs mobile releves lors de l'audit des pages secondaires --- */
@media (max-width: 640px){
/* Carte Google : 360px de haut mangeaient un ecran entier de telephone. */
.boutique-map iframe{height:240px}
/* Integrations TikTok : elles reclament 280px minimum. Avec les marges de la
page, ca depassait sur les petits telephones — et comme la page interdit le
defilement horizontal, la video etait coupee au lieu d'etre atteignable. */
.video-reviews-grid{margin-left:-20px;margin-right:-20px}
.video-review-card{padding:4px;max-width:100%;overflow:hidden}
.video-review-card .tiktok-embed{min-width:0!important;max-width:100%!important}
}
@media (prefers-reduced-motion: reduce) { .illus { transition: none; } }
/* =========================================================================
RECUPERATION DES PANIERS ABANDONNES
========================================================================= */
/* --- Fenetre de sortie --- */
#exitIntent{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.exit-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);animation:exitFade .25s ease}
.exit-box{position:relative;z-index:1;width:100%;max-width:400px;background:var(--charcoal);border:1px solid var(--gold-dim);
border-radius:14px;padding:28px 24px 22px;text-align:center;box-shadow:0 26px 70px rgba(0,0,0,.6);
animation:exitPop .32s cubic-bezier(.2,.9,.3,1.1)}
.exit-emoji{font-size:38px;line-height:1;margin-bottom:8px}
.exit-box h3{font-family:'Anton',sans-serif;font-size:26px;letter-spacing:.02em;margin:0 0 8px;color:var(--off-white)}
.exit-resume{font-size:14.5px;color:var(--gold-light);margin:0 0 10px}
.exit-txt{font-size:13px;color:var(--text-dim);line-height:1.6;margin:0 0 16px}
#exitEmail{width:100%;padding:13px 14px;border-radius:7px;border:1px solid var(--line);background:var(--charcoal-2);
color:var(--off-white);font-size:16px;margin-bottom:12px} /* 16px : evite le zoom iOS */
#exitEmail:focus{outline:none;border-color:var(--gold)}
.exit-consent{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:12.5px;color:var(--text-dim);
line-height:1.45;margin-bottom:14px;cursor:pointer}
.exit-consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--gold);flex-shrink:0;cursor:pointer}
.exit-msg{font-size:12.5px;min-height:17px;margin-bottom:9px;color:var(--text-dim)}
.exit-msg.erreur{color:var(--danger)}
.exit-msg.ok{color:#6FDDA0}
.exit-skip{display:block;width:100%;margin-top:11px;background:none;border:none;color:var(--text-dim);
font-size:12.5px;text-decoration:underline;cursor:pointer}
.exit-skip:hover{color:var(--off-white)}
.exit-close{position:absolute;top:11px;right:13px;background:none;border:none;color:var(--text-dim);
font-size:17px;cursor:pointer;line-height:1;padding:4px}
.exit-close:hover{color:var(--off-white)}
@keyframes exitFade{from{opacity:0}to{opacity:1}}
@keyframes exitPop{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
/* --- Bandeau de retour --- */
#retourPanier{position:fixed;left:50%;bottom:20px;transform:translate(-50%,130%);z-index:9998;
display:flex;align-items:center;gap:14px;max-width:calc(100vw - 32px);
background:var(--charcoal);border:1px solid var(--gold-dim);border-radius:99px;
padding:10px 12px 10px 20px;box-shadow:0 14px 40px rgba(0,0,0,.55);
transition:transform .45s cubic-bezier(.2,.9,.3,1.05);opacity:.99}
#retourPanier.visible{transform:translate(-50%,0)}
.retour-txt{font-size:13.5px;color:var(--off-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.retour-cta{padding:9px 18px!important;font-size:12px!important;border-radius:99px!important;
text-decoration:none;white-space:nowrap;flex-shrink:0}
.retour-close{background:none;border:none;color:var(--text-dim);font-size:15px;cursor:pointer;padding:2px 4px;flex-shrink:0}
.retour-close:hover{color:var(--off-white)}
@media(max-width:620px){
#retourPanier{left:12px;right:12px;transform:translateY(130%);max-width:none;
border-radius:12px;padding:12px 12px 12px 16px;gap:10px}
#retourPanier.visible{transform:translateY(0)}
.retour-txt{font-size:12.5px;white-space:normal}
.exit-box{padding:24px 18px 18px}
.exit-box h3{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
.exit-backdrop,.exit-box{animation:none}
#retourPanier{transition:none}
}
/* =========================================================================
GRILLES DE 3 CARTES — parrainage, fidelite, pros
=========================================================================
Ces grilles etaient forcees en style INLINE dans le HTML. Un style inline
bat TOUTE regle CSS, media queries comprises : sur telephone les 3 colonnes
restaient en place et le texte etait coupe en plein mot ("ENTREPRIS",
"ASSOCIATI"). Constate sur une capture reelle a 390px.
⚠️ Ce bloc doit rester EN FIN DE FICHIER : la regle generale .grid impose
2 colonnes sous 640px, a specificite egale. Le dernier ecrit l'emporte.
========================================================================= */
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:780px){.grid-3{grid-template-columns:1fr!important}}
/* =========================================================================
MON COMPTE — ligne "Statut" d'une commande
=========================================================================
La valeur ("En cours de traitement — 35,48 €") est affichee en Anton 20px.
Face au libelle "Statut", sur un ecran de telephone, les deux blocs se
chevauchaient purement et simplement. On les empile, et la valeur reprend
une taille lisible sans deborder.
========================================================================= */
.summary-row.cmd-statut{align-items:baseline;gap:14px}
.summary-row.cmd-statut .val{text-align:right;line-height:1.25}
@media (max-width:640px){
.summary-row.cmd-statut{flex-direction:column;align-items:flex-start;gap:4px}
.summary-row.cmd-statut .val{text-align:left;font-size:17px}
}
/* --- Raccourci "Maillot Mystere" dans le catalogue -----------------------
Deux emplacements complementaires :
- dans la barre de filtres (ordinateur), marque en dore pour qu'on
comprenne qu'il emmene ailleurs au lieu de filtrer la liste ;
- en bandeau au-dessus des filtres, seul visible sur telephone ou le
panneau de filtres est replie par defaut.
Sans le second, le bouton etait invisible pour la majorite du trafic. */
.filter-btn-lien{display:inline-flex;align-items:center;border-color:var(--gold);
color:var(--gold-light);background:rgba(201,162,39,0.10);text-decoration:none}
.filter-btn-lien:hover{background:var(--gold);color:var(--black);
box-shadow:0 0 14px rgba(201,162,39,0.45)}
.lien-mystere{display:none;align-items:center;justify-content:center;gap:10px;
width:100%;margin-bottom:14px;padding:13px 16px;border-radius:8px;
background:rgba(201,162,39,0.10);border:1px solid var(--gold);
color:var(--gold-light);font-family:'Oswald',sans-serif;font-size:13px;
font-weight:700;letter-spacing:0.04em;text-transform:uppercase;text-decoration:none}
.lien-mystere span{background:var(--gold);color:var(--black);border-radius:20px;
padding:3px 10px;font-size:10.5px;letter-spacing:0.02em}
@media (max-width:640px){
.lien-mystere{display:flex}
.filter-btn-lien{display:none} /* le bandeau le remplace, pas de doublon */
}
/* =========================================================================
VISIONNEUSE DE PHOTOS CLIENTS
=========================================================================
Les vignettes sont recadrees (4/5) ; en plein ecran on affiche la photo
ENTIERE, sans rogner, quel que soit son format d'origine.
La croix est volontairement grande, opaque et posee en dehors de l'image :
sur telephone, une croix discrete sur fond photo est invisible, et le
visiteur se sent piege.
========================================================================= */
.photo-viewer{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;
justify-content:center;background:rgba(0,0,0,.93);padding:64px 16px 56px}
.photo-viewer[hidden]{display:none}
.pv-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.pv-close{position:absolute;top:14px;right:14px;z-index:2;width:46px;height:46px;
border-radius:50%;background:var(--gold);color:#141414;border:none;font-size:20px;
font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 20px rgba(0,0,0,.5)}
.pv-close:hover{background:var(--gold-light)}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
border-radius:50%;background:rgba(28,28,31,.9);border:1px solid var(--gold-dim);
color:var(--gold-light);font-size:24px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.pv-nav:hover{background:var(--gold);color:#141414;border-color:var(--gold)}
.pv-prev{left:12px} .pv-next{right:12px}
.pv-compteur{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
color:var(--text-dim);font-size:12.5px;letter-spacing:.06em}
@media (max-width:640px){
.photo-viewer{padding:60px 8px 50px}
.pv-nav{width:38px;height:38px;font-size:20px}
.pv-prev{left:4px} .pv-next{right:4px}
.photo-slide{flex:0 0 230px}
}
/* =========================================================================
PRIX EN PROMOTION
=========================================================================
Le prix barre et l'etiquette de remise n'apparaissent QUE si le produit
porte un prix d'origine superieur (champ oldPrice de products.js, rempli
par la synchronisation quand Wix signale une promotion). Hors soldes,
l'affichage est rigoureusement identique a avant.
========================================================================= */
.price.en-promo,.pd-price-val.en-promo{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.prix-barre{color:var(--text-dim);font-family:'Inter',sans-serif;font-weight:400;
font-size:.62em;text-decoration:line-through;text-decoration-thickness:1.5px}
.etiq-promo{background:var(--danger);color:#fff;font-family:'Oswald',sans-serif;
font-size:.44em;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:20px;
white-space:nowrap;box-shadow:0 0 12px rgba(224,87,76,.35)}
.pd-price .pd-price-val{font-family:'Anton',sans-serif;font-size:inherit;color:var(--gold-light)}
@media (max-width:640px){
.prix-barre{font-size:.58em}
.etiq-promo{font-size:.4em;padding:2px 7px}
}
/* =========================================================================
COLLECTION PRIVÉE — tailles françaises
=========================================================================
Ces maillots sont vendus en tailles FR, pas en tailles japonaises comme le
reste du catalogue. Un code couleur bleu-blanc-rouge le signale au premier
coup d'oeil : c'est la seule chose qui empeche un client habitue de commander
une taille au-dessus par reflexe.
========================================================================= */
:root{--fr-bleu:#2b6cd4;--fr-bleu-clair:#7fb3ff;--fr-rouge:#d8443c}
/* Boutons de taille */
.size-btn.fr{border-color:rgba(127,179,255,.35)}
.size-btn.fr:hover:not(:disabled){border-color:var(--fr-bleu-clair)}
.size-btn.fr.selected{background:var(--fr-bleu);border-color:var(--fr-bleu);color:#fff;
box-shadow:0 0 18px rgba(43,108,212,.55)}
.size-btn.fr.selected span.eu{color:rgba(255,255,255,.72)}
.size-btn.fr.is-out{border-color:rgba(216,68,60,.4);color:var(--danger);
background:rgba(216,68,60,.06)}
/* Lien vers le guide */
.size-guide-toggle.fr{border-color:var(--fr-bleu);color:var(--fr-bleu-clair);
background:rgba(43,108,212,.12)}
.size-guide-toggle.fr:hover{background:rgba(43,108,212,.24);border-color:var(--fr-bleu-clair);
box-shadow:0 0 12px rgba(43,108,212,.35)}
/* Fenetre du guide */
.modal-box.box-fr{border-color:var(--fr-bleu);position:relative;
box-shadow:0 20px 60px -10px rgba(0,0,0,.8),0 0 0 1px rgba(43,108,212,.4)}
.bandeau-fr{display:flex;height:4px;margin:-30px -30px 20px;border-radius:9px 9px 0 0;overflow:hidden}
.bandeau-fr span{flex:1}
.bandeau-fr span:nth-child(1){background:var(--fr-bleu)}
.bandeau-fr span:nth-child(2){background:#f2f2f2}
.bandeau-fr span:nth-child(3){background:var(--fr-rouge)}
.size-finder-result.fr{border-color:var(--fr-bleu);background:rgba(43,108,212,.10)}
.size-finder-result.fr b{color:var(--fr-bleu-clair)}
.size-guide-mini-grid.fr{grid-template-columns:repeat(3,1fr)}
.size-guide-mini-item.fr{border-color:rgba(127,179,255,.3);background:rgba(43,108,212,.08)}
.size-guide-mini-item.fr b{color:var(--fr-bleu-clair)}
@media (max-width:480px){.bandeau-fr{margin:-24px -18px 16px}}
/* Ruban sur les vignettes du catalogue */
.ribbon-tag.prive{color:var(--fr-bleu-clair)}
.badge.prive{background:var(--fr-bleu);color:#fff;box-shadow:0 0 10px rgba(43,108,212,.5)}
/* =========================================================================
SECTION COLLECTION PRIVÉE — accueil
=========================================================================
Meme principe que Football Elite, mais la banniere fournie contient deja les
quatre maillots : pas besoin d'affiches separees a droite. Le texte se pose
sur la partie sombre de gauche, qui a ete pensee pour ca.
========================================================================= */
.prive-spotlight{position:relative;overflow:hidden;background:#07070a;
border-bottom:1px solid var(--line);padding:70px 0;min-height:430px}
/* L'image est une balise ![]()
(et non un fond CSS) pour pouvoir servir trois
tailles selon l'ecran. Il faut donc lui imposer le comportement d'un fond. */
.prive-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:right center;z-index:0}
/* Le degrade noircit la gauche de la banniere : c'est la zone ou le texte se
pose. Sans lui, le texte passerait sur les maillots et deviendrait illisible. */
.prive-spotlight::before{content:'';position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,#07070a 0%,rgba(7,7,10,.96) 28%,rgba(7,7,10,.62) 48%,rgba(7,7,10,.12) 70%,transparent 100%)}
.prive-spotlight .wrap{position:relative;z-index:2}
.prive-content{max-width:430px}
.prive-content h2{font-size:clamp(30px,3.6vw,46px);margin:8px 0 14px;line-height:1.02}
.prive-content p{color:var(--text-dim);font-size:14.5px;line-height:1.6;margin-bottom:24px}
/* Le prix est l'argument principal de cette collection : il passe avant meme
le titre. En or sur fond sombre — une pastille pleine faisait etiquette de
soldes, ce qui dessert un produit qu'on veut premium. */
.prive-prix{display:inline-flex;align-items:baseline;gap:11px;margin-bottom:12px}
.prive-prix small{font-family:'Oswald',sans-serif;font-size:11.5px;font-weight:700;
letter-spacing:.16em;color:var(--text-dim)}
.prive-prix b{font-family:'Anton',sans-serif;font-size:34px;line-height:1;
letter-spacing:.01em;color:var(--gold-light);text-shadow:0 0 22px rgba(201,162,39,.45)}
@media (max-width:1100px){
.prive-spotlight::before{background:linear-gradient(90deg,#07070a 0%,rgba(7,7,10,.94) 40%,rgba(7,7,10,.55) 62%,rgba(7,7,10,.15) 85%,transparent 100%)}
.prive-content{max-width:380px}
}
/* Sous 900px les maillots de la banniere deviennent trop petits pour etre lus :
l'image passe en fond d'ambiance et le texte reprend toute la largeur. */
/* Sous 900px : l'image occupe le haut, RECADREE sur les maillots plutot
qu'ecrasee sur toute sa largeur — a 2,74:1 en pleine largeur d'un telephone,
les maillots ne faisaient plus que quelques millimetres. On la coupe donc
a gauche et a droite pour les montrer en grand.
Le texte se pose dessous, sur un fond qui prolonge l'image sans rupture. */
@media (max-width:900px){
.prive-spotlight{padding:0;min-height:0;display:block}
.prive-bg{position:relative;display:block;width:100%;height:250px;opacity:1;
object-fit:cover;object-position:60% center}
.prive-spotlight::before{content:'';position:absolute;top:0;left:0;right:0;height:250px;
z-index:1;background:linear-gradient(180deg,transparent 55%,rgba(13,13,14,.55) 82%,#0d0d0e 100%)}
.prive-spotlight .wrap{position:relative;z-index:2;margin-top:-26px;
padding-top:0;padding-bottom:30px;text-align:center}
.prive-content{max-width:none;text-align:center}
.prive-content h2{font-size:29px;margin:6px 0 12px}
.prive-content p{font-size:13.5px;margin-bottom:22px}
.prive-content .btn-primary{display:block;text-align:center}
}
@media (max-width:420px){
.prive-bg{height:215px}
.prive-spotlight::before{height:215px}
.prive-content h2{font-size:26px}
}
/* --- Vignettes de la Collection Privée -----------------------------------
Les photos Wix de ces maillots sont cadrees bord a bord : en "cover" elles
remplissent toute la vignette et paraissent bien plus grosses que le reste
du catalogue. On les affiche entieres, avec un peu d'air autour, pour que
la grille reste homogene. */
.card.prive .card-img{background:#141416}
.card.prive .card-img img{object-fit:contain;padding:8px 10px}
.card.prive:hover .card-img .img-back{transform:scale(1.03)}
/* =========================================================================
VISIONNEUSE DE PHOTOS PRODUIT
========================================================================= */
.photo-zoom{position:fixed;inset:0;z-index:1500;display:flex;align-items:center;
justify-content:center;background:rgba(0,0,0,.94);padding:70px 16px 60px}
.pz-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.75)}
.pz-close{position:absolute;top:16px;right:16px;z-index:2;width:48px;height:48px;
border-radius:50%;background:var(--gold);color:#141414;border:none;font-size:21px;
font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 22px rgba(0,0,0,.55)}
.pz-close:hover{background:var(--gold-light)}
.pz-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
border-radius:50%;background:rgba(28,28,31,.92);border:1px solid var(--gold-dim);
color:var(--gold-light);font-size:26px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center}
.pz-nav:hover{background:var(--gold);color:#141414;border-color:var(--gold)}
.pz-prev{left:14px} .pz-next{right:14px}
.pz-compteur{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
color:var(--text-dim);font-size:12.5px;letter-spacing:.06em}
@media (max-width:640px){
.photo-zoom{padding:64px 8px 52px}
.pz-nav{width:40px;height:40px;font-size:22px}
.pz-prev{left:5px} .pz-next{right:5px}
}
/* --- Phrase mise en valeur dans les descriptions ------------------------- */
.pd-desc .d-fort, .d-fort{color:#fff;font-weight:700}
/* =========================================================================
INTRODUCTION DE LA COLLECTION PRIVÉE (catalogue)
=========================================================================
Le visiteur qui arrive par le filtre doit comprendre en trois secondes ce
qui distingue ces quatre maillots — et pourquoi leurs tailles sont
françaises. Sans ce bloc, il ne voit que quatre produits de plus.
========================================================================= */
.intro-prive{position:relative;background:linear-gradient(135deg,rgba(43,108,212,.10),rgba(216,68,60,.07) 55%,transparent);
border:1px solid var(--trait,#2e2e2e);border-left:3px solid var(--fr-bleu);
border-radius:12px;padding:18px 22px;margin:4px 0 20px}
.intro-prive-tag{display:inline-block;font-family:'Oswald',sans-serif;font-size:11px;
font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--fr-bleu-clair);
margin-bottom:6px}
.intro-prive h2{font-family:'Anton',sans-serif;font-size:clamp(26px,3.4vw,38px);
letter-spacing:.01em;margin:0 0 12px;color:#fff}
/* Le texte prenait 760px de large au maximum : sur telephone il s'empilait sur
six lignes et le bloc devenait une colonne. On le laisse occuper toute la
largeur disponible, le pave est nettement plus bas. */
.intro-prive p{color:var(--text-dim);font-size:14px;line-height:1.6;margin:0 0 6px;max-width:none}
.intro-prive p:last-child{margin-bottom:0}
.intro-prive b{color:#fff;font-weight:700}
@media (max-width:640px){
.intro-prive{padding:15px 14px;margin-bottom:16px}
.intro-prive h2{font-size:24px;margin-bottom:9px}
.intro-prive p{font-size:13px;line-height:1.55}
}
/* =========================================================================
SORTIE PROGRAMMÉE — "bientôt disponible"
========================================================================= */
.badge-bientot{position:absolute;top:10px;left:10px;z-index:3;
background:linear-gradient(135deg,var(--gold),var(--gold-light));color:#141414;
font-family:'Oswald',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.06em;
padding:5px 11px;border-radius:20px;box-shadow:0 3px 14px rgba(201,162,39,.45)}
.card.bientot .card-img{opacity:.9}
.card.bientot .card-img::after{content:'';position:absolute;inset:0;
background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35));pointer-events:none}
.bandeau-sortie{display:flex;flex-direction:column;gap:5px;margin:0 0 16px;padding:15px 17px;
background:linear-gradient(135deg,rgba(201,162,39,.13),rgba(201,162,39,.04));
border:1px solid var(--gold-dim);border-left:3px solid var(--gold);border-radius:11px}
.bandeau-sortie b{font-family:'Oswald',sans-serif;font-size:14px;letter-spacing:.06em;
text-transform:uppercase;color:var(--gold-light)}
.bandeau-sortie span{font-size:12.5px;color:var(--text-dim);line-height:1.55}
.btn-primary.btn-attente{background:linear-gradient(135deg,#2f2a17,#3d3520);
color:var(--gold-light);border:1px solid var(--gold)}
.btn-primary.btn-attente:hover{background:var(--gold);color:#141414}
/* --- Bouton d'action dans le guide des tailles -------------------------- */
.sf-action{display:block;width:100%;margin-top:14px;padding:13px 16px;border:none;
border-radius:9px;background:var(--gold);color:#141414;font-family:'Oswald',sans-serif;
font-size:13.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.sf-action:hover{background:var(--gold-light)}
.sf-action.fr{background:var(--fr-bleu);color:#fff}
.sf-action.fr:hover{background:#3f80e8}
.sf-action.rupture,.sf-action.attente{background:transparent;border:1px solid var(--gold);
color:var(--gold-light)}
.sf-action.rupture:hover,.sf-action.attente:hover{background:var(--gold);color:#141414}
/* --- Taille "à venir" (produit pas encore sorti) -------------------------
Neutre et doree, pas rouge : ces tailles ne sont pas en rupture, elles
n'existent simplement pas encore a la vente. Cliquer dessus inscrit a
l'alerte de sortie. */
.size-btn.a-venir{border-style:dashed;border-color:var(--gold-dim);
color:var(--gold-light);opacity:.85;text-decoration:none}
.size-btn.a-venir:hover{border-color:var(--gold);background:rgba(201,162,39,.10);opacity:1}
.size-btn.fr.a-venir{border-color:rgba(127,179,255,.45);color:var(--fr-bleu-clair)}
.size-btn.fr.a-venir:hover{border-color:var(--fr-bleu);background:rgba(43,108,212,.12)}
/* --- Titre d'accueil : liseré doré sur les mots blancs -------------------
Un contour tres fin, pas un remplissage : le mot reste blanc et lisible,
le doré ne fait que le souligner pour accompagner "Manga Foot". */
/* Liseré doré autour des mots blancs. paint-order:stroke fill place le
contour DERRIERE le remplissage : sans ca, le trait ronge l'interieur des
lettres et le mot parait plus maigre. */
.hero-copy h1 .contour{-webkit-text-stroke:1.6px rgba(201,162,39,.8);
paint-order:stroke fill}
/* "MAILLOT MANGA FOOT" tient sur une seule ligne : le titre fait donc deux
lignes au total, quelle que soit la largeur d'ecran. */
.hero-copy h1 .ligne1{white-space:nowrap}
@media (max-width:640px){
.hero-copy h1 .contour{-webkit-text-stroke-width:1.1px}
.hero-copy h1 .ligne1{white-space:normal}
}
/* --- Sélecteur de taille dans la fenêtre d'alerte ----------------------- */
#notifyTaille{width:100%;background:var(--charcoal,#1c1c1f);border:1px solid var(--line);
color:var(--text);border-radius:8px;padding:12px 13px;font-size:16px;
font-family:inherit;appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--gold-light) 50%),linear-gradient(135deg,var(--gold-light) 50%,transparent 50%);
background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
background-size:5px 5px,5px 5px;background-repeat:no-repeat}
#notifyTaille:focus{outline:none;border-color:var(--gold)}