/* ============================================================
   DA ACCUEIL — ADOPTÉE (arbitrage fondateur 6-7 juillet 2026)
   ------------------------------------------------------------
   État final, appliqué en dur (plus de toggles) :
     1. .cat-mosaic      — grille catégories « chasse dominante » (A)
     2. .hero-preuve     — relevé du banc en cartouche sur la photo (A)
     3. .banc-classement — top 4 en « podium 1 + 3 » (C)
     4. .mt-index        — index de gamme mono dans l'îlot MT-Sling
     6. .manifeste       — bande manifeste display
   (5 — catalogue SEO en bas de page : ordre géré par Home.jsx.)
   À reporter au projet DS en fin de refonte (avec ds-overrides.css).
   Tokens DS uniquement.
   ============================================================ */

/* ---- 1. MOSAÏQUE CATÉGORIES ---------------------------------
   Hiérarchie merchandising : chasse (2×2) et puissant (2×1) =
   catégories business ; les sans-photo restent en petites tuiles. */
.cat-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 224px; gap: 20px; }
.cat-mosaic .cat-card { aspect-ratio: auto; height: 100%; }
.cat-mosaic .cm-a { grid-column: span 2; grid-row: span 2; }
.cat-mosaic .cm-b { grid-column: span 2; }
@media (max-width: 960px) {
  .cat-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 14px; }
  .cat-mosaic .cm-a { grid-column: span 2; grid-row: span 2; }
  .cat-mosaic .cm-b { grid-column: span 2; grid-row: auto; }
}
/* ≤560 : tuiles PLEINE LARGEUR — les demi-tuiles clippaient leurs titres à 390 (revue 13, P1.1-h) */
@media (max-width: 560px) {
  .cat-mosaic { grid-template-columns: 1fr; grid-auto-rows: 168px; }
  .cat-mosaic .cm-a, .cat-mosaic .cm-b { grid-column: auto; }
  .cat-mosaic .cm-a { grid-row: span 2; }
}
/* object-position par tuile (revue 13, P1.1-c/-p) : recadrages accidentels des packshots
   carrés dans des tuiles paysage (fourche coupée, panneau du décor plein centre).
   Réglages provisoires — à re-caler quand le shooting livrera des cadrages dédiés. */
.cat-mosaic .cat-card:nth-child(1) .cat-bg { object-position: 50% 30%; }
.cat-mosaic .cat-card:nth-child(2) .cat-bg { object-position: 50% 42%; }
.cat-mosaic .cat-card:nth-child(3) .cat-bg { object-position: 50% 40%; }
.cat-mosaic .cat-card:nth-child(4) .cat-bg { object-position: 50% 52%; }
.cat-mosaic .cat-card:nth-child(5) .cat-bg { object-position: 50% 45%; }
.cat-mosaic .cat-card:nth-child(8) .cat-bg { object-position: 62% 55%; }

/* ---- 2. HERO PREUVE ------------------------------------------
   Cartouche « relevé du banc » sur la photo (zone noire → jaune
   légal, mesure réelle uniquement). Cliquable → fiche du relevé. */
.hero-preuve { position: absolute; z-index: 3; right: 48px; top: 44px; width: 238px; padding: 16px 18px 15px; background: rgba(10,10,10,.62); backdrop-filter: blur(8px); border: 1px solid var(--noir-700); border-left: 2px solid var(--latex); border-radius: 2px; display: flex; flex-direction: column; transition: border-color var(--dur, .2s) var(--ease, ease); }
.hero-preuve:hover { border-color: var(--accent-500); border-left-color: var(--latex); }
.hero-preuve .stamp-protocole { color: var(--cream-300); opacity: .78; margin: 0 0 8px; }
.hero-preuve svg { display: block; margin: 2px auto 10px; }
.hero-preuve .hp-val { font: 700 26px var(--font-mono); color: var(--latex); line-height: 1; letter-spacing: .01em; }
.hero-preuve .hp-lbl { font: 500 12px var(--font-body); color: var(--cream-200); margin-top: 7px; line-height: 1.45; }
.hero-preuve .hp-link { font: 600 11px var(--font-body); letter-spacing: var(--ls-cta, .04em); text-transform: uppercase; color: var(--cream-100); margin-top: 12px; transition: color var(--dur, .2s); }
.hero-preuve:hover .hp-link { color: var(--accent-500); }
@media (max-width: 1100px) { .hero-preuve { display: none; } }

/* ---- 3. TOP 4 EN CLASSEMENT DU BANC --------------------------
   Un rayon devient un verdict : rang mono (classement commercial
   → neutre, jamais jaune), UNE mesure réelle en jaune sur noir,
   prix mono = donnée. Panneau .banc-inset du DS. */
.banc-classement { padding: 26px 30px 12px; }
.banc-classement .bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; }
.banc-classement .bc-head .stamp-protocole { margin: 0; }
.banc-classement .bc-note { font: 500 12px var(--font-body); color: var(--gray-400); }
.bc-row { display: grid; grid-template-columns: 44px 64px minmax(0, 1fr) auto auto auto; align-items: center; gap: 22px; padding: 14px 0; border-top: 1px solid var(--noir-700); }
.bc-rank { font: 700 18px var(--font-mono); color: var(--cream-300); letter-spacing: .04em; }
.bc-shot { width: 64px; height: 80px; background: var(--ecrin); overflow: hidden; border-radius: 2px; display: block; flex: 0 0 auto; }
.bc-shot img { width: 100%; height: 100%; object-fit: cover; }
.bc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bc-name { font: 600 16px var(--font-body); color: var(--cream-100); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--dur, .2s); }
.bc-name:hover { color: var(--accent-500); }
.bc-sub { font: 400 12px var(--font-body); color: var(--gray-400); }
.bc-measure { font: 500 13px var(--font-mono); color: var(--latex); letter-spacing: .02em; text-align: right; }
.bc-price { font: 700 16px var(--font-mono); color: var(--cream-100); }
@media (max-width: 860px) {
  .bc-row { grid-template-columns: 36px 64px minmax(0, 1fr) auto; grid-template-areas: "rank shot id id" "rank shot measure measure" "rank shot price btn"; align-items: start; row-gap: 6px; gap: 10px 16px; }
  .bc-rank { grid-area: rank; }
  .bc-shot { grid-area: shot; height: 96px; }
  .bc-id { grid-area: id; }
  .bc-name { white-space: normal; }
  .bc-measure { grid-area: measure; text-align: left; }
  .bc-price { grid-area: price; align-self: center; }
  .bc-row .btn { grid-area: btn; justify-self: end; align-self: center; min-height: 44px; }
}

/* ---- 4. INDEX DE GAMME MT-SLING ------------------------------
   Nomenclature d'atelier : 10 réfs mono cliquables vers les fiches. */
.mt-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin: -14px 0 30px; }
.mt-index-k { font: 700 10px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cream-300); opacity: .65; margin-right: 6px; }
.mt-index a { font: 500 13px var(--font-mono); letter-spacing: .06em; color: var(--cream-200); border-bottom: 1px solid var(--noir-700); padding-bottom: 2px; position: relative; transition: color var(--dur, .2s), border-color var(--dur, .2s); }
.mt-index a:hover { color: var(--accent-500); border-color: var(--accent-500); }
/* A11y tap target (audit 7 juil) : zone de frappe élargie à ~44px de haut au tactile,
   sans changer le rendu (DA P4 intouchée) — le ::after étend la surface cliquable. */
@media (pointer: coarse) {
  .mt-index a::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* ---- P3 · podium 1 + 3 (C, adoptée) ---- */
.bc-podium .bp-feat { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 16px 0 20px; border-top: 1px solid var(--noir-700); }
.bp-shot { width: 190px; aspect-ratio: 4 / 5; background: var(--ecrin); border-radius: 2px; overflow: hidden; display: block; }
.bp-shot img { width: 100%; height: 100%; object-fit: cover; }
.bp-id { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bp-name { font: 700 24px var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--cream-100); transition: color var(--dur, .2s); }
.bp-name:hover { color: var(--accent-500); }
.bp-measure { font: 600 15px var(--font-mono); color: var(--latex); letter-spacing: .02em; }
.bp-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.bp-buy .bc-price { font-size: 20px; }
@media (max-width: 860px) {
  .bc-podium .bp-feat { grid-template-columns: 120px minmax(0, 1fr); }
  .bp-shot { width: 120px; }
  .bp-buy { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
}
/* ---- Île MT-Sling : séparateurs · masqués quand les stats wrappent (revue 13, P1.1-j) ---- */
@media (max-width: 560px) { .mt-island .mt-sep { display: none; } }

/* ---- Index catalogue SEO : repli <details> par catégorie ≤560 (revue 13, P1.1-i) ---- */
.catalog-fold summary { list-style: none; cursor: pointer; }
.catalog-fold summary::-webkit-details-marker { display: none; }
.catalog-fold summary h3 .fold-ind { font: 500 14px var(--font-mono); color: var(--gray-500); flex: 0 0 auto; margin-left: 4px; transition: transform var(--dur, .2s) var(--ease, ease); }
.catalog-fold[open] summary h3 .fold-ind { transform: rotate(45deg); }

/* ---- 6. BANDE MANIFESTE (ADOPTÉE) ----------------------------
   Un seul moment display pleine largeur — dosage DS respecté. */
.manifeste { background: var(--cream-100); padding: 88px 0 84px; border-top: 1px solid var(--gray-200); }
.mfst-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 6.5vw, 92px); line-height: .95; letter-spacing: .015em; text-transform: uppercase; color: var(--gray-900); margin: 10px 0 22px; max-width: 1100px; text-wrap: balance; }
.mfst-title em { font-style: italic; font-weight: 700; color: var(--accent-500); }
.mfst-notes { font: 500 13px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gray-600); margin: 0; }
@media (max-width: 560px) { .manifeste { padding: 64px 0 60px; } }