/* ──────────────────────────────────────────────────────────────
   SMASH RIOT — composants de pages internes (neutres)
   Pilotés par les tokens --sr-* définis par chaque direction.
   Chargé APRÈS la feuille de la direction active.
   ────────────────────────────────────────────────────────────── */

/* En-tête de page interne */
.sr-phead{ position:relative; border-bottom:var(--sr-bw) solid var(--sr-line); overflow:hidden; }
.sr-phead__in{ padding:64px 0 56px; position:relative; z-index:2; }
.sr-phead__eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sr-accent2); margin-bottom:16px; }
.sr-phead h1{ font-size:clamp(40px,6vw,84px); }
.sr-phead h1 em{ font-style:normal; color:var(--sr-accent); }
.sr-phead p{ color:var(--sr-muted); font-size:18px; max-width:560px; margin-top:18px; }
.sr-phead--img{ background:#15120f; }
.sr-phead--img .sr-phead__in{ padding:96px 0 84px; }
.sr-phead--img::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; background-image:var(--sr-phead-img); z-index:0; }
.sr-phead--img::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,8,10,.45),rgba(8,8,10,.82)); z-index:1; }
.sr-phead--img h1, .sr-phead--img .sr-phead__eyebrow{ color:#fff; }
.sr-phead--img h1 em{ color:var(--sr-accent); }
.sr-phead--img p{ color:rgba(255,255,255,.9); }

/* Prose (à propos, mentions) */
.sr-prose{ max-width:760px; }
.sr-prose p{ color:var(--sr-muted); font-size:17px; line-height:1.75; margin:0 0 18px; }
.sr-prose h3{ font-size:26px; margin:34px 0 12px; color:var(--sr-ink); }
.sr-prose strong{ color:var(--sr-ink); }

/* Deux colonnes */
.sr-split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.sr-split--40{ grid-template-columns:.8fr 1.2fr; }
.sr-split--60{ grid-template-columns:1.2fr .8fr; }
.sr-split__img{ border-radius:var(--sr-radius); overflow:hidden; border:var(--sr-bw) solid var(--sr-line); box-shadow:var(--sr-shadow); aspect-ratio:4/3; }
.sr-split__img img{ width:100%; height:100%; object-fit:cover; }

/* Sous-grilles */
.sr-cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sr-cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.sr-cols-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* Pavé statistique / valeur */
.sr-stat{ border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); box-shadow:var(--sr-shadow); padding:26px 24px; }
.sr-stat .big{ font-family:var(--sr-fdisp); font-size:42px; line-height:1; color:var(--sr-accent); text-transform:uppercase; }
.sr-stat h3{ font-size:22px; margin:12px 0 8px; }
.sr-stat p{ color:var(--sr-muted); font-size:14px; }

/* Formulaire */
.sr-form{ border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); box-shadow:var(--sr-shadow); padding:32px; }
.sr-field{ display:grid; gap:8px; margin-bottom:18px; }
.sr-field label{ font-size:13px; font-weight:700; color:var(--sr-muted); text-transform:uppercase; letter-spacing:.04em; }
.sr-field input, .sr-field select, .sr-field textarea{
  font:inherit; padding:14px 16px; border-radius:calc(var(--sr-radius) - 4px);
  border:var(--sr-bw) solid var(--sr-line); background:var(--sr-bg); color:var(--sr-ink);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.sr-field input:focus, .sr-field select:focus, .sr-field textarea:focus{
  outline:none; border-color:var(--sr-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--sr-accent) 30%, transparent);
}
.sr-field--row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.sr-ok{ display:none; align-items:center; gap:10px; margin-top:14px; color:var(--sr-accent2); font-weight:700; }

/* FAQ accordéon */
.sr-faq{ max-width:820px; }
.sr-faq__item{ border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); margin-bottom:12px; overflow:hidden; box-shadow:var(--sr-shadow); }
.sr-faq__q{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; cursor:pointer; font-family:var(--sr-fdisp); font-size:19px; text-transform:uppercase; color:var(--sr-ink); background:transparent; border:0; }
.sr-faq__q .ic{ flex:none; width:28px; height:28px; border-radius:999px; background:var(--sr-accent); color:var(--sr-on-accent); display:flex; align-items:center; justify-content:center; font-size:18px; transition:transform .2s ease; }
.sr-faq__item.open .sr-faq__q .ic{ transform:rotate(45deg); }
.sr-faq__a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.sr-faq__a p{ padding:0 24px 22px; color:var(--sr-muted); font-size:15px; line-height:1.7; }
.sr-faq__item.open .sr-faq__a{ max-height:320px; }

/* Panier / commander */
/* Commander : résumé en haut, puis « ajoute à ta commande » en dessous */
.sr-order{ display:grid; grid-template-columns:1fr; gap:24px; align-items:start; max-width:760px; margin:0 auto; }
.sr-pick h3{ font-size:24px; margin-bottom:16px; }
.sr-pickitem{ display:grid; grid-template-columns:64px 1fr auto; gap:16px; align-items:center; border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); padding:14px; margin-bottom:12px; }
.sr-pickitem .th{ width:64px; height:64px; border-radius:calc(var(--sr-radius) - 4px); background-size:cover; background-position:center; }
.sr-pickitem h4{ font-size:18px; }
.sr-pickitem p{ color:var(--sr-muted); font-size:12.5px; }
.sr-pickitem .pr{ font-family:var(--sr-fdisp); font-size:20px; color:var(--sr-accent); }
.sr-cart{ border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); box-shadow:var(--sr-shadow); padding:24px; }
.sr-cart h3{ font-size:22px; margin-bottom:16px; }
.sr-li{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px dashed var(--sr-line); font-size:14px; }
.sr-li > span:last-child{ white-space:nowrap; }
.sr-li:first-of-type{ border-top:0; }
.sr-li .q{ display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; border-radius:6px; background:var(--sr-accent); color:var(--sr-on-accent); font-weight:700; font-size:12px; margin-right:8px; }
.sr-li .nm{ flex:1; }
.sr-tot{ display:flex; align-items:baseline; justify-content:space-between; margin:18px 0; padding-top:16px; border-top:var(--sr-bw) solid var(--sr-line); }
.sr-tot .lab{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--sr-muted); font-weight:700; }
.sr-tot .val{ font-family:var(--sr-fdisp); font-size:30px; color:var(--sr-ink); }

/* Créneaux */
.sr-slots{ display:flex; flex-wrap:wrap; gap:9px; }
.sr-slot{ padding:11px 16px; border-radius:999px; border:var(--sr-bw) solid var(--sr-line); background:var(--sr-bg); color:var(--sr-ink); font-weight:700; font-size:14px; cursor:pointer; transition:all .15s ease; }
.sr-slot:hover{ border-color:var(--sr-accent); }
.sr-slot.active{ background:var(--sr-accent); color:var(--sr-on-accent); border-color:var(--sr-accent); }

/* Suivi */
.sr-track{ max-width:680px; }
.sr-tcode{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; border:var(--sr-bw) solid var(--sr-line); border-radius:var(--sr-radius); background:var(--sr-surface); padding:20px 24px; margin-bottom:30px; box-shadow:var(--sr-shadow); }
.sr-tcode .code{ font-family:var(--sr-fdisp); font-size:32px; color:var(--sr-accent); letter-spacing:.04em; }
.sr-tstep{ display:grid; grid-template-columns:44px 1fr; gap:18px; padding-bottom:26px; position:relative; }
.sr-tstep::before{ content:""; position:absolute; left:21px; top:40px; bottom:-4px; width:2px; background:var(--sr-line); }
.sr-tstep:last-child::before{ display:none; }
.sr-tdot{ width:44px; height:44px; border-radius:999px; border:var(--sr-bw) solid var(--sr-line); display:flex; align-items:center; justify-content:center; font-family:var(--sr-fdisp); background:var(--sr-bg); color:var(--sr-muted); z-index:1; }
.sr-tstep.done .sr-tdot{ background:var(--sr-accent); color:var(--sr-on-accent); border-color:var(--sr-accent); }
.sr-tstep.active .sr-tdot{ background:var(--sr-accent2); color:#fff; border-color:var(--sr-accent2); }
.sr-tstep h3{ font-size:21px; }
.sr-tstep p{ color:var(--sr-muted); font-size:14px; margin-top:4px; }

/* Tags produit / pills */
.sr-tagrow{ display:flex; flex-wrap:wrap; gap:6px; }
.sr-tagrow span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--sr-surface2); color:var(--sr-ink); }

/* Filtres carte */
.sr-filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:30px; }
.sr-filter{ padding:9px 15px; border-radius:999px; border:var(--sr-bw) solid var(--sr-line); background:transparent; color:var(--sr-muted); font-weight:700; font-size:13px; cursor:pointer; transition:all .15s ease; }
.sr-filter:hover{ border-color:var(--sr-accent); }
.sr-filter.active{ background:var(--sr-accent); color:var(--sr-on-accent); border-color:var(--sr-accent); }

/* Onglets catégorie */
.sr-tabs{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:34px; }
.sr-tab{ padding:11px 18px; border-radius:999px; border:var(--sr-bw) solid var(--sr-line); background:var(--sr-surface); color:var(--sr-muted); font-weight:700; font-size:14px; cursor:pointer; transition:all .15s ease; }
.sr-tab:hover{ color:var(--sr-ink); border-color:var(--sr-ink); }
.sr-tab.active{ background:var(--sr-ink); color:var(--sr-bg); border-color:var(--sr-ink); }

@media(max-width:900px){
  .sr-split, .sr-split--40, .sr-split--60, .sr-cols-2, .sr-cols-3, .sr-cols-4, .sr-order{ grid-template-columns:1fr; }
  .sr-cart{ position:static; }
  .sr-field--row{ grid-template-columns:1fr; }
}