/* ============================================================
   BLACK FRIDAY 2026 — BOX ANTI-NUISIBLES
   Feuille de style dédiée (page black-friday.html + bandeau accueil).
   Tout est préfixé "bf-" : aucune règle existante n'est surchargée,
   sauf le décalage du header quand le bandeau d'accueil est actif.
   Adapté de la maquette V6 ; polices du site (Archivo Black / Poppins /
   JetBrains Mono) déjà chargées par les pages.
   ============================================================ */
:root{
  --bf-bg:#060607;
  --bf-lime:#b4ff39;
  --bf-orange:#ff7920;
  --bf-pink:#ff2f9e;
  --bf-souris:#ffe300;
  --bf-blattes:#00d9ff;
  --bf-bzzz:#ff831b;
  --bf-fourmis:#ff2f9e;
  --bf-rats:#a8ff28;
  --bf-ribbon-h:44px;
}
[hidden]{display:none !important;}

/* ---------- Bandeau d'accueil ---------- */
.bf-ribbon{position:absolute; top:0; left:0; right:0; z-index:101; height:var(--bf-ribbon-h);
  background:linear-gradient(90deg,#f97719,#e63073,#aeff28); color:#090909;}
.bf-ribbon-link{display:flex; align-items:center; justify-content:center; gap:16px; height:100%; padding:0 16px;
  font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}
.bf-ribbon-tag{font-family:'Archivo Black',sans-serif; letter-spacing:.04em; font-size:13px;}
.bf-dots{display:inline-flex; gap:5px; vertical-align:middle; margin-left:10px;}
.bf-dots i{width:9px; height:9px; border-radius:50%; border:1.5px solid #090909; display:block;}
.bf-ribbon-cta{background:#090909; color:#fff; padding:7px 14px; font-size:11px; letter-spacing:.06em; transition:transform .2s ease, background .2s ease;}
.bf-ribbon-link:hover .bf-ribbon-cta{transform:translateY(-1px); background:#1b1b1b;}
/* le header fixe descend sous le bandeau tant que la page n'est pas défilée */
body.bf-on .site-header{top:var(--bf-ribbon-h);}
body.bf-on .site-header.scrolled{top:0;}
body.bf-on .hero{padding-top:calc(140px + var(--bf-ribbon-h));}
@media (max-width:640px){
  :root{--bf-ribbon-h:40px;}
  .bf-ribbon-link{gap:10px; font-size:10px; letter-spacing:.04em; padding:0 10px;}
  .bf-ribbon-tag{font-size:11px;}
  .bf-ribbon-text,.bf-dots{display:none;}
  .bf-ribbon-cta{padding:6px 10px; font-size:10px;}
  body.bf-on .hero{padding-top:calc(120px + var(--bf-ribbon-h));}
}

/* ---------- Page Black Friday ---------- */
.bf-page{background:var(--bf-bg);}
.bf-hero{position:relative; overflow:hidden; display:grid; grid-template-columns:1.06fr .94fr; align-items:center; gap:20px;
  min-height:680px; padding:150px max(5vw,24px) 95px;
  background:radial-gradient(ellipse at 82% 38%,#ff6d1b2c,transparent 45%),radial-gradient(ellipse at 20% 72%,#c3296a24,transparent 42%),#080809;}
.bf-hero:before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(118deg,transparent 0 70px,#ffffff04 71px 72px); pointer-events:none;}
.bf-hero-content{position:relative; z-index:2;}
.bf-eyebrow{display:inline-block; border:1px solid #ff8329; color:#ffae6a; border-radius:99px; padding:10px 18px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.22em;}
.bf-h1{font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(58px,8.4vw,142px); letter-spacing:-.045em; line-height:.84; margin:34px 0 24px; text-transform:uppercase;}
.bf-h1 span{display:block; color:var(--bf-orange); text-shadow:0 0 50px #ff6a0055;}
.bf-lead{font-family:'Archivo Black',sans-serif; font-size:clamp(18px,2vw,26px); letter-spacing:-.01em; margin-bottom:12px; text-transform:uppercase;}
.bf-hero p.bf-sub{max-width:580px; color:#d4d0d0; font-size:clamp(15px,1.5vw,19px); line-height:1.6;}
.bf-cta{display:inline-flex; align-items:center; gap:26px; margin-top:26px; background:var(--bf-lime); color:#111; padding:19px 26px;
  font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; box-shadow:0 0 55px #b4ff3940; transition:transform .25s ease, box-shadow .25s ease;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
.bf-cta:hover{transform:translateY(-4px); box-shadow:0 0 70px #b4ff3980;}

.bf-countwrap{position:relative; z-index:2; display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:36px;}
.bf-countlabel{font-family:'JetBrains Mono',monospace; font-size:11px; color:#c4c4c4; letter-spacing:.08em; font-weight:700; line-height:1.6; text-transform:uppercase;}
.bf-count{display:flex; gap:7px;}
.bf-num{min-width:66px; background:#191919; border:1px solid #3a3a3a; padding:10px 9px; text-align:center;}
.bf-num strong{display:block; font-family:'JetBrains Mono',monospace; font-size:28px; color:#fff; font-variant-numeric:tabular-nums; line-height:1.3;}
.bf-num small{display:block; color:#9d9d9d; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em;}

/* ---------- Carrousel 3D des affiches (amélioration progressive) ----------
   Sans JavaScript : rangée statique des 5 affiches, chacune cliquable.
   Avec JavaScript : la classe .is-3d active la mise en scène 3D. */
.bf-car{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; z-index:1;}
.bf-car-stage{position:relative; width:100%; max-width:620px; margin-inline:auto; --pw:min(62%,380px);}
.bf-car-track{list-style:none; margin:0; padding:0;}
.bf-car:not(.is-3d) .bf-car-track{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.bf-car:not(.is-3d) .bf-car-item{width:calc(33.333% - 8px);}
.bf-car-card{display:block; position:relative; border-radius:6px; outline-offset:5px;}
.bf-car-card img{display:block; width:100%; height:auto; border-radius:6px; -webkit-user-drag:none; user-select:none; -webkit-user-select:none;}
.bf-car.is-3d .bf-car-stage{aspect-ratio:1/.92; perspective:1500px; perspective-origin:50% 42%; touch-action:pan-y; cursor:grab; -webkit-tap-highlight-color:transparent;}
.bf-car.is-3d .bf-car-stage.is-drag{cursor:grabbing;}
.bf-car.is-3d .bf-car-track{position:absolute; inset:0;}
.bf-car.is-3d .bf-car-item{position:absolute; left:50%; top:50%; width:var(--pw); margin:calc(var(--pw) / -2) 0 0 calc(var(--pw) / -2); will-change:transform,opacity; backface-visibility:hidden;}
.bf-car.is-3d .bf-car-card{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.bf-car.is-3d .bf-car-card::before{content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  box-shadow:0 0 46px 4px var(--glow),0 24px 70px #000; opacity:var(--g,.3); transition:opacity .45s ease;}
.bf-car.is-3d .bf-car-card::after{content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none; background:#050507; opacity:var(--dim,0); transition:opacity .4s ease;}
.bf-car-btn{width:42px; height:42px; border-radius:50%; border:1px solid #ffffff36; background:#0d0d0fcc; color:#fff; display:grid; place-items:center; cursor:pointer; transition:border-color .2s ease,background .2s ease;}
.bf-car-btn svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.bf-car-btn:hover{border-color:var(--bf-lime); background:#17171a;}
.bf-car-btn:focus-visible,.bf-car-card:focus-visible{outline:2px solid var(--bf-lime);}
.bf-car-ui{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:4px; position:relative; z-index:5;}
.bf-car-dots{display:flex; gap:9px;}
.bf-car-dots span{width:8px; height:8px; border-radius:50%; background:#ffffff40; cursor:pointer; transition:background .25s ease,transform .25s ease;}
.bf-car-dots span.on{background:var(--bf-lime); transform:scale(1.3);}
@media (hover:hover) and (pointer:fine){
  .bf-car.is-3d .bf-car-card:hover{transform:scale(1.05);}
  .bf-car.is-3d .bf-car-card:hover::before{opacity:1; box-shadow:0 0 70px 12px var(--glow),0 24px 70px #000;}
  .bf-car.is-3d .bf-car-card:hover::after{opacity:0;}
}
.bf-car.is-3d .bf-car-card:focus-visible::after{opacity:0;}


/* Bandeau incliné : sa boîte pivotée dépasse géométriquement de ~0,5 px de chaque côté ; le conteneur le recadre latéralement (sans toucher au scroll vertical). */
.bf-marquee-wrap{position:relative; z-index:3; margin-top:-17px; overflow-x:clip;}
.bf-marquee{overflow:hidden; background:var(--bf-lime); color:#090909; transform:rotate(-1deg); border-block:2px solid #090909;}
.bf-marquee div{white-space:nowrap; padding:16px; font-family:'Archivo Black',sans-serif; letter-spacing:.14em; font-size:15px; text-align:center;}

.bf-offers{padding:100px max(5vw,24px); scroll-margin-top:70px;}
.bf-sectionhead{display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:35px;}
.bf-kicker{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--bf-lime); font-weight:700; letter-spacing:.2em;}
.bf-h2{font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(34px,5vw,72px); letter-spacing:-.04em; line-height:.98; margin:12px 0; text-transform:uppercase;}
.bf-sectionhead p{color:#aaa; max-width:400px; line-height:1.6;}

.bf-grid{display:flex; flex-wrap:wrap; justify-content:center; gap:23px;}
.bf-card{--accent:#fff; flex:0 0 calc((100% - 46px)/3); min-width:0; border:1px solid #303033; background:#111113; overflow:hidden; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; display:flex; flex-direction:column;}
.bf-card:hover{transform:translateY(-8px); border-color:var(--accent); box-shadow:0 18px 65px #000,0 0 30px color-mix(in srgb,var(--accent) 22%,transparent);}
.bf-art{position:relative; overflow:hidden; background:#090909; display:block;}
.bf-art img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain;}
.bf-details{padding:23px; display:flex; flex-direction:column; flex:1;}
.bf-edition{font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:.2em; font-weight:700;}
.bf-card h3{font-family:'Archivo Black',sans-serif; font-weight:400; font-size:clamp(20px,2vw,28px); margin:10px 0 4px; text-transform:uppercase;}
.bf-box{color:#aaa; margin:0 0 16px; font-size:14px;}
.bf-price{margin-top:auto; border-top:1px solid #ffffff1a; padding-top:16px; min-height:64px; color:#b8b8b8; font-size:12px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.bf-price .bf-old{color:#8d8d8d; text-decoration:line-through; font-size:15px;}
.bf-price ins{text-decoration:none;}
.bf-price .bf-now{color:var(--accent); font-family:'Archivo Black',sans-serif; font-size:28px; line-height:1.1;}
.bf-price .bf-note{font-size:12px;}
.bf-buy{display:flex; justify-content:space-between; align-items:center; background:var(--accent); color:#080808; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:16px 18px; margin-top:16px; transition:filter .2s ease;}
.bf-buy:hover{filter:brightness(1.13);}

.bf-reassure{padding:44px max(5vw,24px) 58px; border-top:1px solid #ffffff12;}
.bf-reassure .bf-kicker{opacity:.75;}
.bf-reassure-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px 32px; margin-top:20px;}
.bf-tile{display:grid; grid-template-columns:22px 1fr; column-gap:12px; align-items:start; padding:4px 0; border:0; background:none;}
.bf-tile svg{width:20px; height:20px; stroke:#b3b3b8; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin:2px 0 0; grid-row:1 / 3;}
.bf-tile h3{font-family:'Poppins',sans-serif; font-weight:600; font-size:13.5px; margin:0 0 3px; text-transform:none; letter-spacing:0; color:#e6e6e8;}
.bf-tile p{color:#8c8c92; font-size:12.5px; line-height:1.55; margin:0;}


.bf-ended{margin:0 max(5vw,24px) 80px; background:radial-gradient(ellipse at 50% 0,#fb6d1d30,transparent 65%),#141013; border:1px solid #ff8b314d; padding:65px 24px; text-align:center;}
.bf-ended .bf-h2{color:#ff9b39;}
.bf-ended p{color:#ccc; max-width:560px; margin:0 auto;}
.bf-ended{margin-top:150px; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.bf-ended-links{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px;}
.bf-ended-links a{border:1px solid #ffffff33; padding:10px 16px; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; transition:border-color .2s ease;}
.bf-ended-links a:hover{border-color:var(--bf-lime);}

@media (max-width:1100px){ .bf-reassure-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:900px){
  .bf-hero{grid-template-columns:1fr; min-height:unset; padding-top:130px;}
  .bf-card{flex-basis:calc((100% - 23px)/2);}
  .bf-sectionhead{display:block;}
}
@media (max-width:580px){
  .bf-hero{padding-top:110px;}
  .bf-card{flex-basis:100%;}
  .bf-car-stage{--pw:min(68%,380px);}
  .bf-car:not(.is-3d) .bf-car-item{width:calc(50% - 6px);}
  .bf-countwrap{gap:12px;}
  .bf-num{min-width:56px;}
  .bf-num strong{font-size:23px;}
  .bf-sectionhead p{font-size:14px;}
  .bf-reassure-grid{grid-template-columns:1fr;}
  .bf-offers{padding-top:70px;}
}
@media (prefers-reduced-motion:reduce){
  .bf-card,.bf-cta,.bf-ribbon-cta,.bf-buy{transition:none !important;}
  .bf-card:hover{transform:none;}
  .bf-car-card,.bf-car-card::before,.bf-car-card::after,.bf-car-dots span{transition:none !important;}
  .bf-car.is-3d .bf-car-card:hover{transform:none;}
}