:root{
  --ink:#0e0d0b;
  --bone:#e8e2d5;
  --khaki:#6b6a4f;
  --brass:#b08d57;
}
*{margin:0;padding:0;box-sizing:border-box}
/* l'attribut hidden doit primer sur les display:flex/grid des composants */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:'IBM Plex Mono',monospace}

/* ------- nav : bandeau minimaliste, sticky discret ------- */
.nav{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem 1rem;
  background:rgba(14,13,11,.82);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(176,141,87,.22);
}
/* Le nom de marque est l'image du logo : "Rebel" en gothique et "NPC" en
   VT323, dessinés ensemble. Aucune police web ne reproduit ce R, et refaire
   le lockup en texte le désaccorderait du sac et du mail. */
.nav-brand{
  display:inline-flex;align-items:center;
  color:var(--bone);text-decoration:none;white-space:nowrap;
}
.wm-goth{display:block;height:1.35rem;width:auto}
.nav-brand:hover{opacity:.75}
.nav-links{display:flex;gap:.7rem;align-items:center}
.nav-links a{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,226,213,.6);text-decoration:none;white-space:nowrap;
}
.nav-links a:hover{color:var(--brass)}
.nav-links a.active{color:var(--brass);text-decoration:underline;text-underline-offset:4px}
.nav-sep{color:rgba(232,226,213,.28)}
@media (max-width:400px){
  .nav{padding:.6rem .7rem}
  .wm-goth{height:1.1rem}
  .nav-links{gap:.5rem}
  .nav-links a{letter-spacing:.12em;font-size:.6rem}
}

/* ------- hero : image native jamais recadrée, logo dessus, dégradé + texte en bas ------- */
.hero{
  position:relative;
}
/* grand écran : la portrait en cover, zoomée/cadrée sur le sac */
@media (min-width:700px){
  .hero{height:100svh;min-height:560px;overflow:hidden}
  section.hero .photo{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    object-position:center 55%;
  }
  .hero .copy{
    padding-top:4.5rem;
    background:linear-gradient(180deg,
      rgba(14,13,11,0) 0%,
      rgba(14,13,11,.22) 42%,
      rgba(14,13,11,.82) 74%,
      var(--ink) 100%);
  }
}
.hero picture{display:contents}
.hero .photo{
  width:100%;
  height:auto;
  display:block;
}
.hero .logo{
  position:absolute;
  top:1.5rem;left:0;right:0;margin:0 auto;
  width:clamp(84px,14vw,116px);height:auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.95)) drop-shadow(0 0 26px rgba(0,0,0,.75));
  padding:1.1rem;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0) 74%);
}
.hero .copy{
  position:absolute;
  left:0;right:0;bottom:-1px;
  padding:6rem 1.25rem 2.4rem;
  text-align:center;
  background:linear-gradient(180deg,
    rgba(14,13,11,0) 0%,
    rgba(14,13,11,.45) 32%,
    rgba(14,13,11,.9) 68%,
    var(--ink) 100%);
}
.hero .fade{display:none}
/* écrans étroits : l'image est trop courte pour porter le texte sans couvrir
   le sac -> le texte passe SOUS l'image, le fondu reste au bas de la photo */
@media (max-width:699px){
  .hero .photo{
    /* Meme cadre sur les deux pages : le ratio est fixe, donc le titre et le
       bouton Reserve tombent exactement a la meme hauteur sur / et /gloves.
       900x920 c'est la photo des gants moins la bande de jean du bas : rien
       du produit n'est perdu, et l'ecran gagne 70px.
       Le plafond en svh reprend la main sur les ecrans courts, ou le ratio
       seul ferait redescendre le bouton sous la ligne de flottaison. */
    width:100%;
    height:auto;
    aspect-ratio:900/920;
    max-height:calc(100svh - 235px);
    min-height:0;
    object-fit:cover;
    /* la photo du duffle est tres verticale (675x1200) : dans ce cadre plus
       court, un point focal a 60% decapitait le sac. 50% le garde entier et
       laisse la moto dessous ; la page /gloves redefinit le sien. */
    object-position:center 50%;
  }
  .hero .copy{
    position:static;
    background:var(--ink);
    padding:1.4rem 1.25rem 1.8rem;
  }
  .hero .fade{
    display:block;
    position:relative;
    height:120px;
    margin-top:-120px;
    background:linear-gradient(180deg,rgba(14,13,11,0),var(--ink));
    pointer-events:none;
  }
}
.batch-tag{
  display:inline-block;
  font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--brass);margin-bottom:1rem;
  padding:.5rem 1rem .5rem 1.4rem;
  background:rgba(14,13,11,.62);
  border:1px solid rgba(176,141,87,.45);
  backdrop-filter:blur(3px);
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}
h1{
  font-family:'Pirata One',serif;font-weight:400;
  font-size:clamp(2.6rem,9vw,4.6rem);line-height:1.02;
  text-shadow:0 2px 18px rgba(0,0,0,.55);
  margin-bottom:1.1rem;
}
.hero-sub{
  font-size:clamp(.78rem,2.6vw,.95rem);letter-spacing:.14em;line-height:1.9;
  max-width:34rem;margin:0 auto 1.6rem;opacity:.92;
}
/* Sur mobile le formulaire est a deux ecrans sous la photo : le premier ecran
   n'offrait aucune action. Bouton pleine largeur sous le titre. Inutile sur
   grand ecran, ou le hero et la plaque tiennent dans le meme coup d'oeil. */
.hero-cta{display:none}
@media (max-width:699px){
  .hero-cta{
    display:block;
    font:inherit;font-weight:500;font-size:.8rem;
    letter-spacing:.28em;text-transform:uppercase;text-decoration:none;
    color:var(--ink);background:var(--brass);
    padding:.95rem 1.5rem;
  }
  .hero-cta:hover{background:#c9a468}
}
.scroll-cue{
  font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--khaki);text-decoration:none;
}
.scroll-cue:hover{color:var(--brass)}

/* ------- spec sheet ------- */
.sheet{max-width:44rem;margin:0 auto;padding:3.2rem 1.4rem 1rem}
.sheet-title{
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--khaki);margin-bottom:1.6rem;text-align:center;
}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(176,141,87,.35)}
.spec-grid > div{
  padding:1rem .8rem;border-bottom:1px solid rgba(176,141,87,.2);
  font-size:.82rem;letter-spacing:.06em;line-height:1.6;
}
.spec-grid > div:nth-child(odd){
  color:var(--khaki);text-transform:uppercase;
  font-size:.7rem;letter-spacing:.24em;
  border-right:1px solid rgba(176,141,87,.2);
}
.creed{
  max-width:34rem;margin:3.2rem auto 0;text-align:center;
  font-size:clamp(.82rem,2.5vw,.95rem);letter-spacing:.1em;line-height:2.1;
}
.creed em{font-style:normal;color:var(--brass)}

/* ------- gallery ------- */
.gallery{max-width:44rem;margin:0 auto;padding:3.6rem 1.4rem 0}
@media (max-width:480px){.gallery{padding-inline:.8rem}}

/* ------- serial-plate form ------- */
.claim{display:flex;justify-content:center;padding:3.4rem 1.25rem 4.5rem}
.plate{
  width:min(30rem,100%);
  border:1px dashed var(--brass);
  outline:1px solid rgba(176,141,87,.25);outline-offset:5px;
  padding:1.6rem 1.4rem 1.3rem;background:rgba(20,19,16,.85);
}
.plate-price{font-size:1rem;letter-spacing:.14em;color:var(--brass);margin-bottom:.35rem}
.plate-after{font-size:.72rem;letter-spacing:.1em;color:rgba(232,226,213,.6);margin-bottom:1.2rem}
/* "How it works" : trois lignes entre le prix et le formulaire. Plus petit que
   la fiche technique pour rester une note et non une section, et sans cadre :
   la plaque en porte déjà un. Le numéro vient d'un compteur, la puce native
   ferait un retrait et un alignement que ce bloc n'a pas à avoir. */
.how{margin-bottom:1.4rem}
.how-title{
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--khaki);margin-bottom:.6rem;
}
.how ol{list-style:none;counter-reset:how}
.how li{
  counter-increment:how;
  font-size:.72rem;letter-spacing:.04em;line-height:1.7;
  color:rgba(232,226,213,.62);
  /* retrait négatif : sur mobile la ligne 2 passe à la ligne, la suite doit
     s'aligner sur le texte et non repartir sous le numéro. */
  padding-left:1.35em;text-indent:-1.35em;
}
.how li::before{content:counter(how) ". ";color:var(--brass)}
form{display:flex;flex-direction:column;gap:.75rem}
input[type=email],input[type=text],select{
  width:100%;background:transparent;border:1px solid rgba(232,226,213,.35);
  color:var(--bone);font:inherit;font-size:.95rem;padding:.85rem 1rem;letter-spacing:.05em;
}
select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--khaki) 50%),linear-gradient(135deg,var(--khaki) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select:invalid{color:rgba(232,226,213,.4)}
option{background:var(--ink);color:var(--bone)}
::placeholder{color:rgba(232,226,213,.4)}
input:focus-visible,select:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-color:transparent}
button{
  font:inherit;font-weight:500;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink);background:var(--brass);border:none;padding:.95rem 1.5rem;cursor:pointer;
  transition:background .15s ease;
}
button:hover{background:#c9a468}
button:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.consent{
  display:flex;gap:.6rem;align-items:flex-start;text-align:left;
  font-size:.68rem;line-height:1.5;color:rgba(232,226,213,.65);
}
.consent input{width:auto;margin-top:.2rem;accent-color:var(--brass)}
footer{
  padding:0 1.25rem 2.6rem;text-align:center;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--khaki);
}
.hero .copy > *{animation:rise .8s ease both}
.hero .copy > *:nth-child(2){animation-delay:.08s}
.hero .copy > *:nth-child(3){animation-delay:.14s}
.hero .copy > *:nth-child(4){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .copy > *{animation:none}}
@media (max-width:480px){
  .spec-grid{grid-template-columns:1fr}
  .spec-grid > div:nth-child(odd){border-right:none;padding-bottom:.2rem;border-bottom:none}
  .spec-grid > div:nth-child(even){padding-top:.2rem}
}

/* ------- details : galerie à gauche, specs à droite ------- */
.details{
  max-width:76rem;margin:0 auto;
  padding:3.6rem 1.4rem 0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:2.6rem;align-items:stretch;
}
/* le sac est photographie en portrait : le carrousel garde ce format */
.details .carousel{aspect-ratio:4/5}
.details .creed{margin:0 auto 2.8rem}
@media (max-width:899px){
  .details{grid-template-columns:1fr;gap:3rem}
  .d-right{order:-1}
}
/* ------- lightbox ------- */
.lb{
  position:fixed;inset:0;z-index:50;
  background:rgba(10,9,8,.96);
  display:flex;align-items:center;justify-content:center;
  /* rien à faire défiler ici : tout le geste horizontal revient au balayage */
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.lb[hidden]{display:none}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;-webkit-user-drag:none}
.lb button{
  position:absolute;background:none;border:none;color:var(--bone);
  font:inherit;cursor:pointer;padding:1rem;line-height:1;
  font-size:2.2rem;opacity:.8;
  min-width:44px;min-height:44px;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.lb button:hover{opacity:1;background:none;color:var(--brass)}
.lb .lb-x{top:.6rem;right:.9rem;font-size:1.6rem}
.lb .lb-prev{left:.4rem;top:50%;transform:translateY(-50%)}
.lb .lb-next{right:.4rem;top:50%;transform:translateY(-50%)}
/* En plein écran rien n'indiquait qu'il restait des photos derrière celle
   affichée. Les pastilles du carrousel sont reprises ici. position:static est
   nécessaire : .lb button pose un absolu qui empilerait les pastilles. */
.lb-dots{
  position:absolute;bottom:.6rem;left:0;right:0;
  display:flex;justify-content:center;gap:.1rem;
}
.lb .lb-dots button{
  position:static;padding:0;min-width:22px;min-height:26px;
  display:flex;align-items:center;justify-content:center;
}
.lb .lb-dots button::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(232,226,213,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.9);
  transition:background .15s ease;
}
.lb .lb-dots button:hover::after{background:rgba(232,226,213,.75)}
.lb .lb-dots button.on::after{background:var(--brass)}
.lb .lb-dots button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}

/* ------- gloves : deux modèles côte à côte ------- */
/* la photo hero des gants : les gants sont sur la gauche du cadre, on décale
   le point focal pour qu'ils survivent au recadrage en cover. */
@media (min-width:700px){
  section.hero-gloves .photo{object-position:30% 55%}
}
@media (max-width:699px){
  /* Le cadre commun (900x920) recoupe a peine la photo des gants (900x989) :
     la paire reste entiere et le phare jaune, tout en haut a droite, ne sort
     jamais du cadre. 35% place la coupe du cote du jean, pas des doigts. */
  .hero-gloves .photo{object-position:center 35%}
}
.gloves-models{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  max-width:44rem;margin:2rem auto 0;padding:0 1.4rem;
}
.model figure{margin:0}
/* carrousel : les 6 photos sont normalisées en 1000x1000 (fond studio prolongé),
   donc cover ne recadre rien et les six vignettes ont un cadrage identique. */
/* pan-y : le navigateur garde le défilement vertical, on récupère l'horizontal
   pour le balayage. Sans ça le geste est mangé par le scroll sur mobile. */
.carousel{
  position:relative;aspect-ratio:1/1;background:#131313;overflow:hidden;cursor:zoom-in;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.carousel img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  opacity:0;transition:opacity .25s ease;
  /* sans ça, glisser la souris sur la photo lance le glisser-deposer natif de
     l'image : le navigateur annule le pointeur et le balayage ne part jamais. */
  -webkit-user-drag:none;
}
.carousel img.on{opacity:1}
/* Pas de cadre : le bloc opaque des flèches masquait le produit. Une chevron
   nue posée sur le bord, lisible grâce à son ombre portée. Le rembourrage porte
   la cible tactile à 44px sans grossir le signe dessiné. */
.carousel-prev,.carousel-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
  font:inherit;font-size:1.9rem;line-height:1;padding:0;cursor:pointer;
  color:var(--bone);background:none;border:0;opacity:.8;
  text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8);
  transition:opacity .15s ease,color .15s ease;
}
.carousel-prev{left:0}
.carousel-next{right:0}
.carousel-prev:hover,.carousel-next:hover{opacity:1;color:var(--brass);background:none}
.carousel-dots{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;justify-content:center;gap:.1rem;
}
/* La pastille visible reste un point de 6px, mais le bouton qui la porte fait
   22px : au doigt, viser un point de 5px était perdu d'avance. */
.carousel-dots button{
  width:22px;height:26px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.carousel-dots button::after{
  content:"";width:6px;height:6px;border-radius:50%;
  background:rgba(232,226,213,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.9);
  transition:background .15s ease;
}
.carousel-dots button:hover{background:none}
.carousel-dots button:hover::after{background:rgba(232,226,213,.75)}
.carousel-dots button.on::after{background:var(--brass)}
.carousel-dots button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
/* Les photos gants portent un fond studio carré incrusté, plus clair que la
   page : on dézoome pour dégager les bords et on estompe le carré en dégradé
   radial, pour que la photo se fonde dans le fond au lieu d'être un panneau. */
.gloves-models .carousel{background:transparent}
.gloves-models .carousel img{
  object-fit:contain;padding:0 7%;
  -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.carousel img{transition:none}}
.model figcaption{
  margin-top:.7rem;font-size:.7rem;letter-spacing:.12em;
  color:rgba(232,226,213,.6);text-align:center;line-height:1.5;
}
/* le nom du modèle sur sa propre ligne, la description en dessous */
.model-name{
  display:block;margin-bottom:.35rem;color:var(--brass);
  letter-spacing:.16em;text-transform:uppercase;
}
@media (max-width:480px){.gloves-models{gap:.7rem;padding-inline:.9rem}}
.cross-link{
  display:block;text-align:center;margin:1.6rem auto 0;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--khaki);text-decoration:none;
}
.cross-link:hover{color:var(--brass)}
.disclaimer{
  text-align:center;padding:2.4rem 1.25rem 2.6rem;
  font-size:.6rem;letter-spacing:.08em;color:rgba(232,226,213,.32);
}

/* ------- choix de modèle (page gloves + cross-sell landing) ------- */
.model-choice{display:flex;gap:.5rem}
.model-choice button,.model-pick{
  flex:1;font:inherit;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:.7rem .3rem;cursor:pointer;
  color:var(--bone);background:transparent;border:1px solid rgba(232,226,213,.35);
}
.model-choice button:hover,.model-pick:hover{background:rgba(176,141,87,.12);border-color:var(--brass)}
.model-choice button.sel,.model-pick.sel{background:var(--brass);color:var(--ink);border-color:var(--brass)}
/* Les deux modeles sur une ligne, la paire double en dessous sur toute la
   largeur : ce n'est pas un troisieme modele mais une commande d'une autre
   nature. Le liseré laiton la distingue sans la remplir, elle reste un choix. */
.model-choice-duo{display:grid;grid-template-columns:1fr 1fr}
.model-choice-duo .model-both{grid-column:1 / -1}
.model-choice .model-both,.xsell .model-both{
  color:var(--brass);border-color:rgba(176,141,87,.55);background:transparent;
}
.field-label{
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--khaki);margin-bottom:-.2rem;
}

/* ------- cross-sell gants sur l'écran de confirmation de la landing ------- */
.xsell{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(176,141,87,.25);text-align:center}
/* Les deux galeries sont celles de /gloves, mais logées dans la plaque : elles
   reprennent la largeur disponible au lieu de leur gouttière de page. */
.xsell .gloves-models{margin:0;padding:0;max-width:none;gap:.6rem}
.xsell .model figcaption{margin-top:.5rem;font-size:.62rem;letter-spacing:.08em}
.xsell > p{font-size:.78rem;letter-spacing:.08em;color:rgba(232,226,213,.8);margin-bottom:.9rem}
.xsell-cta,.xsell-send{display:flex;gap:.5rem;margin-top:.6rem}
.xsell-cta[hidden],.xsell-send[hidden]{display:none}
/* Trois boutons alignes sous deux photos ne disaient pas lequel allait avec
   laquelle : chaque modele porte le sien, "Both" reste seul et centre dessous. */
/* les deux legendes n'ont pas la meme hauteur : on colle les boutons au bas
   de leur colonne pour qu'ils restent alignes entre eux. */
.xsell .model{display:flex;flex-direction:column;justify-content:space-between}
/* flex:0 : le bouton herite du flex:1 des boutons de choix, qui dans une
   colonne le ferait grandir pour combler le vide sous la legende la plus
   courte. Il garde sa hauteur, c'est la colonne qui l'aligne en bas. */
.model-pick{display:block;flex:0 0 auto;width:100%;margin-top:.6rem}
.model-pick[hidden]{display:none}
.xsell .field-label{margin-bottom:.5rem}
.xsell-cta button,.xsell-send button{flex:1}
.btn-no{background:transparent;color:var(--bone);border:1px solid rgba(232,226,213,.35)}
.btn-no:hover{background:rgba(232,226,213,.08)}