/* ============================================================
   HEROS BOXING GYM — SYSTÈME DE DESIGN PARTAGÉ
   Palette : encre chaude / bone / ember / oxblood / sage / plum
   Signature : le "fil du bandage" — trait noué qui parcourt le site
   ============================================================ */

::selection{background:var(--y,#F7C600);color:var(--b,#0A0A0A);}

html{-webkit-tap-highlight-color:transparent;}

/* Grain cinéma — discret, sur tout le site */
body{position:relative;}
body::before{
  content:'';
  position:fixed; inset:0; z-index:9000;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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");
}

/* Focus clavier visible, partout */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--y,#F7C600);
  outline-offset:2px;
  border-radius:2px;
}

/* Mouvement réduit respecté */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* Icônes ligne — remplacent les emojis */
.ic{display:inline-block;flex-shrink:0;vertical-align:middle;color:currentColor;}
.ic-xs{width:14px;height:14px;}
.ic-sm{width:18px;height:18px;}
.ic-md{width:24px;height:24px;}
.ic-lg{width:34px;height:34px;}
.ic-xl{width:48px;height:48px;}

/* Le fil du bandage — divider noué, signature du site */
.wrap-rule{
  position:relative;
  height:3px;
  background:repeating-linear-gradient(100deg,var(--y,#F7C600) 0 10px,transparent 10px 14px);
  border-radius:2px;
}
.wrap-knot{
  display:inline-flex;align-items:center;gap:8px;
}
.wrap-knot::before{
  content:'';width:22px;height:2px;
  background:repeating-linear-gradient(100deg,currentColor 0 5px,transparent 5px 7px);
}

/* Eyebrow standard à base de wrap-knot */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--y,#F7C600);margin-bottom:12px;}
.eyebrow::before{content:'';width:22px;height:2px;background:repeating-linear-gradient(100deg,currentColor 0 5px,transparent 5px 7px);flex-shrink:0;}

/* Bouton "ticket" — coin coupé, réservé aux CTA marketing */
.btn-ticket{
  position:relative;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}

/* Photo en duoton encre/ember — remplace le simple brightness() plat */
.duotone{position:relative;}
.duotone img,.duotone .duotone-img{filter:grayscale(1) brightness(.62) contrast(1.18) sepia(.18);}
.duotone::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,15,12,.15),rgba(18,15,12,.92));
  pointer-events:none;
}

/* Carte "fiche" — utilisée pour témoignages/notes type carnet de gym */
.index-card{
  background:var(--b3,#1F1810);
  border:1px solid var(--b4,#2B2218);
  border-left:3px solid var(--y,#F7C600);
}

@media print{ body::before{display:none;} }