/* ============================================================
   BlokGrip — nouveau style (charte "Bécane" crème) — feuille partagée
   ------------------------------------------------------------
   ASSETS (chemins RELATIFS ci-dessous) — en prod :
     • Garde le dossier intact : site.css + fonts/ + assets/ au MÊME endroit → les url() marchent tels quels.
     • Sinon, remplace les 5 url() suivants par tes URLs médiathèque WP :
         - 3× polices : url('fonts/PPMonument-*.ttf')      (@font-face ci-dessous)
         - 2× logo    : url('https://blokgrip.com/wp-content/uploads/2026/04/LOGO-BLANC.png')       (.bg-mask et .logo-img)
   Le reste (rendus 360, vidéo, poster, favicon) est déjà en absolu sur blokgrip.com.
   ============================================================ */
@font-face{font-family:'PPMono';src:url('https://blokgrip.com/wp-content/uploads/2026/04/PPMonumentExtended-Black-BF645465a1e687b.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'PPMono';src:url('https://blokgrip.com/wp-content/uploads/2026/04/PPMonumentExtended-Regular-BF645465a253250.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'PPMonoL';src:url('https://blokgrip.com/wp-content/uploads/2026/04/PPMonumentExtended-Light-BF645465a264007.ttf') format('truetype');font-weight:300;font-display:swap}

:root{
  --bg:#f2f1ec;--fg:#141414;--dim:rgba(20,20,20,.4);--line:rgba(20,20,20,.14);
  --pink:#c026a5;--mx:32px;--hd-h:68px;--hd-box-h:68px
}
/* -webkit-tap-highlight-color transparent PARTOUT : jamais de surlignage (couleur d'accentuation système, ex. rouge) au tap/clic. */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Sélection de texte : couleurs de la charte (jamais le rouge système). S'adapte au thème (clair/sombre). */
::selection{background:var(--fg);color:var(--bg)}
::-moz-selection{background:var(--fg);color:var(--bg)}
/* Boutons : retire le rendu NATIF du <button> (macOS colore l'état pressé/focus avec l'accent système = ROUGE ici).
   appearance:none → seul notre CSS s'applique, jamais de fond rouge au clic. Tous les boutons du site sont stylés main. */
button{-webkit-appearance:none;appearance:none}
html{scroll-behavior:smooth}
/* overflow-x:clip (et non hidden) : empêche le scroll horizontal SANS casser position:sticky (bug des couches sur all) */
body{background:var(--bg);color:var(--fg);font-family:'PPMonoL','Helvetica Neue',Arial,sans-serif;letter-spacing:.01em;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* accessibilité : focus clavier visible, adaptatif au thème (currentColor = couleur du texte de l'élément).
   input:focus-visible (0,1,1) bat le outline:none des champs (0,1,0) → la recherche a aussi un focus. */
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* champs texte : soulignement discret au focus (pas de carré).
   1px = le plus fin qui rende de façon fiable (0.5px est incohérent selon les écrans)
   et c'est la même épaisseur que toutes les autres lignes du site (--line, .ln). */
input:focus-visible,textarea:focus-visible{outline:none;box-shadow:inset 0 -1px 0 currentColor}
/* bouton fermer la recherche : pas d'anneau (comme avant) */
.bgs-close:focus-visible,.bgs-close:focus{outline:none;box-shadow:none}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
/* accessibilité : "réduire les animations" du système → on coupe transitions/anims/smooth-scroll.
   (l'auto-360 et le scramble, eux, sont coupés côté JS via la constante REDUCE) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

/* ---- typo utilitaires ---- */
.lab{font-family:'PPMonoL';text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--dim)}
.lab b{font-family:'PPMono';font-weight:500;color:var(--fg)}
.blk{font-family:'PPMono';font-weight:800}
/* accessibilité/SEO : masqué visuellement mais lu par les moteurs & lecteurs d'écran */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   HEADER — encadrés façon Bécane
   ============================================================ */
/* Option B : barre fine pleine largeur (bord à bord, filet en bas), le contenu passe dessous.
   La bande EST la barre (fond crème + filet), z-index 50 → visible partout, y compris sur la vidéo. */
.hd-band{position:fixed;top:0;left:0;right:0;height:var(--hd-h);background:var(--bg);border-bottom:1px solid var(--line);z-index:50}
.hd{position:fixed;top:0;left:var(--mx);height:var(--hd-h);z-index:60;display:flex;align-items:center;gap:20px}
.hd .logo-link{display:flex;align-items:center}
.hd .logo-img{width:34px;height:30px}
/* méta "MACROS 12 / COLLECTIONS 02" à côté du logo (comme avant) */
.hd .hd-meta{display:flex;gap:18px;white-space:nowrap}
.hd .hd-meta a,.hd .hd-meta span{color:var(--dim);transition:color .2s}
.hd .hd-meta a b,.hd .hd-meta span b{color:var(--fg)}          /* les CHIFFRES (12 / 02) en couleur pleine, comme avant */
.hd .hd-meta a:hover,.hd .hd-meta span:hover{color:var(--fg)}
/* ---- logo glitch : réplique EXACTE du site d'origine (5 masques RVB + scan + noise, one-shot .8s au survol) ---- */
.hd .bg-stage{position:relative;display:block;width:56px;height:49px}
.bg-jitter{position:absolute;inset:0}
.bg-mask{position:absolute;inset:0;
  -webkit-mask:url('https://blokgrip.com/wp-content/uploads/2026/04/LOGO-BLANC.png') center/contain no-repeat;mask:url('https://blokgrip.com/wp-content/uploads/2026/04/LOGO-BLANC.png') center/contain no-repeat}
.bg-base{background:var(--fg)}
.bg-red{background:rgb(255,31,74);opacity:0}
.bg-cyan{background:rgb(0,216,255);opacity:0}
.bg-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.55) 1px,transparent 1px,transparent 3px);mix-blend-mode:multiply;opacity:0}
.bg-noise{opacity:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}
@keyframes bg-jitter{0%,18%,50%,100%{transform:translate(0,0)}22%{transform:translate(-3px,-1px)}32%{transform:translate(2px,1px)}42%{transform:translate(-1px,-1px)}}
@keyframes bg-red{0%,18%,52%,100%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(-4px)}32%{opacity:1;transform:translateX(4px)}42%{opacity:.9;transform:translateX(-2px)}}
@keyframes bg-cyan{0%,18%,52%,100%{opacity:0;transform:translateX(0)}22%{opacity:1;transform:translateX(4px)}32%{opacity:1;transform:translateX(-4px)}42%{opacity:.9;transform:translateX(2px)}}
@keyframes bg-scan{0%,20%,100%{opacity:0;transform:translateY(0)}25%{opacity:.9}40%{opacity:.6;transform:translateY(1px)}55%{opacity:.2}}
@keyframes bg-noise{0%,20%,100%{opacity:0;background-position:0 0}25%{opacity:.6;background-position:80px 20px}35%{opacity:.45;background-position:30px 90px}50%{opacity:.2;background-position:150px 40px}}
@keyframes bg-flicker{0%,100%{opacity:1}22%{opacity:.4}26%{opacity:1}34%{opacity:.5}38%{opacity:1}}
.hd .logo-link:hover .bg-jitter{animation:.8s linear forwards bg-jitter}
.hd .logo-link:hover .bg-red{animation:.8s linear forwards bg-red}
.hd .logo-link:hover .bg-cyan{animation:.8s linear forwards bg-cyan}
.hd .logo-link:hover .bg-scan{animation:.8s linear forwards bg-scan}
.hd .logo-link:hover .bg-noise{animation:.8s linear forwards bg-noise}
.hd .logo-link:hover .bg-base{animation:.8s linear forwards bg-flicker}
/* pixellisation / dissolve au survol des macros (façon Bécane) — filtres SVG px-a/px-b injectés par site.js */
@keyframes pixGlitch{
 0%{filter:url(#px-a);transform:translate(-2px,0)}
 22%{filter:url(#px-b);transform:translate(2px,0)}
 44%{filter:url(#px-a);transform:translate(-1px,0)}
 66%{filter:url(#px-b);transform:translate(1px,0)}
 100%{filter:none;transform:scale(1.05)}
}
.logo-img{display:block;width:48px;height:42px;background:var(--fg);
  -webkit-mask:url('https://blokgrip.com/wp-content/uploads/2026/04/LOGO-BLANC.png') center/contain no-repeat;
  mask:url('https://blokgrip.com/wp-content/uploads/2026/04/LOGO-BLANC.png') center/contain no-repeat}

/* cluster à droite, INLINE dans la barre (pas de capsule) : nav · loupe · bouton Order plein */
.hd-r{position:fixed;top:0;right:var(--mx);height:var(--hd-h);z-index:60;display:flex;align-items:center;gap:4px}
.hd-r nav{display:flex;align-items:center;gap:2px}
.hd-r nav a{color:var(--fg);font-size:11px;text-transform:uppercase;letter-spacing:.1em;padding:8px 12px;transition:opacity .2s}
.hd-r nav a:hover{opacity:.55}
.hd-r nav a.on{font-family:'PPMono';font-weight:500}
.hd-div{display:none}
/* mêmes couleurs que la box "Send us an email" : contour clair par défaut → s'inverse (plein foncé) au survol */
.hd-order{flex:none;background:var(--fg);color:var(--bg);border:1px solid var(--fg);border-radius:999px;padding:8px 16px;margin-left:6px;
  font-family:'PPMono';font-weight:500;font-size:10px;text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;transition:background .25s,color .25s,border-color .25s}
.hd-order:hover{background:var(--bg);color:var(--fg);border-color:var(--line)}
.hd-r .srch{border:0;background:none;cursor:pointer;padding:0 8px;color:var(--fg);display:flex;align-items:center;justify-content:center}
.hd-r .srch svg{width:15px;height:15px}
/* slot d'icône à largeur FIXE : loupe / symbole / croix occupent la même place → le header ne bouge plus */
.hd-r .srch .s-ico{display:flex;justify-content:center;width:16px}
.hd-r .srch .s-x{display:none;align-items:center;justify-content:center;width:16px}
.hd-r .srch .s-scr{display:none;width:16px;text-align:center;font-family:'PPMono';font-weight:500;font-size:14px;line-height:1;letter-spacing:-.03em}
/* passe de scramble pilotée en JS (une seule fois par survol) */
.hd-r .srch.scrambling .s-ico{display:none}
.hd-r .srch.scrambling .s-scr{display:inline-block}
/* état ouvert : la loupe devient une croix, pas de scramble (prioritaire) */
.hd-r .srch.open .s-ico{display:none}
.hd-r .srch.open .s-scr{display:none}
.hd-r .srch.open .s-x{display:flex}

/* ---- bouton "MENU" (texte) + menu plein écran (téléphone) ---- */
.hd-r .burger{display:none;border:0;background:none;cursor:pointer;padding:8px 2px;align-items:center;justify-content:center}
.hd-r .burger .brg-t{font-family:'PPMonoL';text-transform:uppercase;letter-spacing:.14em;font-size:11px;color:var(--fg)}
.hd-r .burger .brg-close{display:none}
.hd-r .burger.open .brg-open{display:none}
.hd-r .burger.open .brg-close{display:inline}
.mmenu{position:fixed;inset:0;z-index:58;background:var(--bg);display:none;flex-direction:column;
  padding:calc(var(--hd-box-h) + 46px) var(--mx) var(--mx);overflow-y:auto}
.mmenu.open{display:flex;animation:mmIn .28s cubic-bezier(.2,.7,.2,1)}
@keyframes mmIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
/* champ de recherche intégré au menu (même principe que le site live) */
.mmenu-search{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--bg);padding:15px 18px;margin-bottom:6vh}
.mmenu-sico{flex:0 0 auto;display:flex;color:var(--fg)}
.mmenu-sico svg{width:18px;height:18px}
.mmenu-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--fg);
  font-family:'PPMono';font-weight:500;font-size:clamp(16px,4.6vw,20px);letter-spacing:-.01em}
.mmenu-input::placeholder{color:var(--dim)}
.mmenu-nav{display:flex;flex-direction:column;gap:2px}
.mmenu-nav a{font-family:'PPMono';font-weight:800;font-size:clamp(38px,12vw,68px);line-height:1.06;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--fg);padding:5px 0}
.mmenu-nav a.on{color:var(--pink)}
.mmenu-results{display:none;flex-direction:column}
.mmenu.searching .mmenu-nav{display:none}
.mmenu.searching .mmenu-results{display:flex}
/* résultats dans le menu mobile : réutilise .bgs-item mais aux couleurs du thème clair (pas le volet sombre) */
.mmenu-results .bgs-item{color:var(--fg);border-top:0;border-bottom:1px solid var(--line);padding:12px 2px;min-height:0}
.mmenu-results .bgs-item:hover{background:transparent}
.mmenu-results .bgs-thumb{width:64px;height:40px}
.mmenu-results .bgs-n{color:var(--fg)}
.mmenu-results .bgs-sub{color:var(--dim)!important}
.mmenu-results .bgs-empty{color:var(--dim)!important;padding:18px 2px}

/* mini indicateur (collection en cours) — optionnel selon page */
.hd-tag{position:fixed;top:30px;left:50%;transform:translateX(-50%);z-index:55}

/* ============================================================
   BLOC TITRE DE PAGE — gros titre + légende + filet
   ============================================================ */
.phead{padding:0 var(--mx)}
.phead h1{font-family:'PPMono';font-weight:800;font-size:clamp(34px,5.5vw,82px);line-height:.9;letter-spacing:-.03em}
.phead .rule{display:flex;align-items:center;gap:16px;margin-top:6px}
.phead .rule .cap{font-family:'PPMono';font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:12px;white-space:nowrap}
.phead .rule .ln{flex:1;height:1px;background:var(--fg)}

/* ============================================================
   FOOTER — partagé
   ============================================================ */
/* footer NOIR sur toutes les pages (rappel du site d'origine) */
.ft{border-top:1px solid rgba(242,241,236,.14);margin-top:0;padding:40px var(--mx) 22px;background:#111;color:#f2f1ec}
.ft .cols{display:flex;gap:64px;align-items:flex-start;flex-wrap:wrap}
.ft .col h4{font-family:'PPMono';font-weight:800;font-size:15px;letter-spacing:-.01em;margin-bottom:12px;color:#f2f1ec}
.ft .col a{display:block;font-size:12px;letter-spacing:.02em;padding:3px 0;color:rgba(242,241,236,.72);transition:opacity .2s,color .2s}
.ft .col a:hover{color:#f2f1ec}
.ft .flogo{margin-left:auto}
/* logo footer : même glitch que le header, en clair sur fond sombre */
.ft .flogo a{display:inline-block}
.ft .flogo .bg-stage{position:relative;display:block;width:76px;height:66px}
.ft .flogo .bg-base{background:#f2f1ec}
.ft .flogo a:hover .bg-jitter{animation:.8s linear forwards bg-jitter}
.ft .flogo a:hover .bg-red{animation:.8s linear forwards bg-red}
.ft .flogo a:hover .bg-cyan{animation:.8s linear forwards bg-cyan}
.ft .flogo a:hover .bg-scan{animation:.8s linear forwards bg-scan}
.ft .flogo a:hover .bg-noise{animation:.8s linear forwards bg-noise}
.ft .flogo a:hover .bg-base{animation:.8s linear forwards bg-flicker}
.ft .lab{color:rgba(242,241,236,.5)}
.ft .lab b{color:#f2f1ec}
.ft .fbot{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:16px;border-top:1px solid rgba(242,241,236,.14)}
.ft .fbot a{color:inherit;margin-left:18px;transition:color .2s}   /* liens légaux : même couleur que le copyright */
.ft .fbot a:hover{color:#f2f1ec}

/* ============================================================
   VISIONNEUSE 360 (base commune)
   ============================================================ */
.v360{position:relative;cursor:grab;user-select:none;touch-action:none}
.v360.drag{cursor:grabbing}
.v360 img{width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.deg{font-variant-numeric:tabular-nums}
/* le nombre de degrés occupe un slot fixe de 3 chiffres (aligné à droite) → la case ° ne bouge jamais */
.deg-num{display:inline-block;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}

/* ---- puce préhension ---- */
.tag{display:inline-block;border:1px solid var(--fg);border-radius:999px;padding:6px 16px;
  font-family:'PPMonoL';font-size:10.5px;text-transform:uppercase;letter-spacing:.14em}

/* ---- lien discret ---- */
.mini{font-family:'PPMonoL';text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;color:var(--dim);transition:color .2s}
.mini:hover{color:var(--fg)}

/* ============================================================
   RECHERCHE — s'ouvre DANS la barre (comme l'ancien site) : bandeau plein largeur en haut,
   input inline + Close, panneau de résultats dessous, voile qui assombrit le contenu.
   ============================================================ */
.bgs{position:fixed;top:0;left:0;right:0;z-index:70;background:var(--bg);color:var(--fg);
  display:none;border-bottom:1px solid var(--line)}
.bgs.open{display:block;animation:bgsDrop .22s ease}
@keyframes bgsDrop{from{opacity:0}to{opacity:1}}   /* fade seul : PAS de translateY (sinon le pane fige la barre à -16px → décalage vertical de l'input) */
.bgs-bar{display:flex;align-items:center;gap:14px;height:var(--hd-h);padding:0 var(--mx)}
.bgs-ico{flex:0 0 auto;display:flex;color:var(--fg)}
.bgs-ico svg{width:17px;height:17px}
.bgs-input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--fg);
  font-family:'PPMono';font-weight:500;font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em}
.bgs-input::placeholder{color:var(--dim)}
.bgs-close{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--fg);
  font-family:'PPMonoL';text-transform:uppercase;letter-spacing:.14em;font-size:11px}
/* LE VOLET : panneau flottant CLAIR par défaut (pages crème) — sombre sur l'accueil (override dans index.html).
   Descend UNIQUEMENT quand on tape (comme l'ancien site : caché tant que l'input est vide). Position posée en JS. */
.bgs-res{position:fixed;top:calc(var(--hd-h) + 10px);width:min(680px,calc(100vw - 48px));
  max-height:min(62vh,480px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 26px 60px -28px rgba(20,20,20,.4);
  z-index:71;display:none}
body.bgs-has-res .bgs-res{display:block;animation:bgsPanel .2s ease}
@keyframes bgsPanel{from{opacity:0}to{opacity:1}}
.bgs-count{font-family:'PPMonoL';text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  color:var(--dim);padding:13px 22px;border-bottom:1px solid var(--line)}
.bgs-item{display:flex;align-items:center;gap:18px;padding:14px 22px;color:var(--fg);min-height:83px;
  border-top:1px solid rgba(20,20,20,.07);transition:background .18s}
.bgs-item:first-of-type{border-top:0}
.bgs-item:hover{background:rgba(20,20,20,.04)}
.bgs-thumb{width:88px;height:55px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.bgs-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.bgs-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.bgs-n{font-family:'PPMono';font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--fg)}
.bgs-sub{color:var(--dim)!important;font-size:10.5px}
.bgs-code{color:var(--dim)!important;white-space:nowrap;font-size:9.5px}
.bgs-empty{padding:26px 22px;color:var(--dim)!important}
/* voile qui assombrit ET floute le CONTENU seulement (démarre SOUS le header, comme l'ancien site top:126px)
   → la zone header (barre + logo) n'est jamais assombrie : le logo garde exactement le même fond que la barre */
.bgs-veil{position:fixed;top:var(--hd-h);left:0;right:0;bottom:0;z-index:69;background:rgba(0,0,0,.45);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .26s}
.bgs-veil.on{opacity:1;visibility:visible}
/* recherche ouverte : le LOGO reste visible à gauche (comme l'ancien site) → au-dessus du voile, la barre démarre après lui (left posé en JS), méta masquée */
body.bgs-open .hd{z-index:72}
body.bgs-open .hd .hd-meta{display:none}
/* la recherche remplace la nav de droite → on masque .hd-r (nav + loupe + Order) sinon elle transparaît sous la barre (surtout barre transparente de l'accueil) */
body.bgs-open .hd-r{display:none}

/* ============================================================
   RESPONSIVE commun
   ============================================================ */
@media(max-width:960px){.hd .hd-meta{display:none}}   /* méta masquée < 960px (barre fine trop chargée) */
@media(max-width:960px){.agrid{grid-template-columns:repeat(2,1fr)!important}}   /* archives : 2 cases/ligne < 960px */
@media(max-width:767px){
  :root{--mx:16px;--hd-h:54px;--hd-box-h:54px}
  .hd .bg-stage{width:52px;height:46px}
  .hd-r nav{display:none}          /* nav → menu burger */
  .hd-r .srch{display:none}        /* loupe → recherche dans le menu */
  .hd-order{display:none}          /* Order → dans le menu */
  .hd-r .burger{display:flex}      /* barre fine : "MENU" texte à droite */
  .phead h1{font-size:clamp(26px,8vw,46px)}
  .ft .cols{gap:32px}.ft .flogo{margin-left:0;order:-1;width:100%}
  .ft .fbot{flex-direction:column;gap:6px}
  .agrid{grid-template-columns:1fr!important}       /* archives mobile : 1 seule case/ligne */
  .more .grid{grid-template-columns:1fr!important}  /* fiche produit "more" mobile : 1 case/ligne */
}
@media(max-width:400px){
  .hd .bg-stage{width:44px;height:39px}
}