/* ============================================================
   REGISTRE DES DÉRIVES — maquette V8 ↔ Design System
   ------------------------------------------------------------
   ✅ VIDE — synchronisé le 5 juillet 2026 avec le DS V8.6.0
   (« Retours maquette ») : D-OV1 (fix mesure/stock), D-OV2
   (achat révélé au survol, permanent au tactile) et D-OV3
   (AgeNotice hors listings) sont désormais des règles OFFICIELLES
   du Design System — plus aucune surcharge nécessaire ici.

   Ce fichier reste chargé APRÈS le DS sur toutes les pages :
   toute NOUVELLE dérive se consigne ICI (bloc commenté : raison,
   règle DS contredite, fichiers touchés), jamais en douce,
   puis se reporte dans le DS via un paquet sync-ds/.
   ============================================================ */

/* ------------------------------------------------------------
   D-OV8 · TAP TARGETS MINI-PANIER (arbitrage fondateur 7 juil)
   Le DS fixe .mc-qty button à 28×28 px (components.css) — sous la
   cible tactile 44 px (RGAA/WCAG 2.2). Au tactile uniquement, on
   élargit les contrôles de quantité du drawer ; le rendu desktop
   (souris) reste celui du DS.
   → À reporter dans le DS (SYNC) : même règle dans components.css.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
  .mc-qty button { width: 42px; height: 42px; }
  .mc-qty span { width: 34px; }
}

/* ------------------------------------------------------------
   D-OV9 · CONTRASTE DES EYEBROWS SUR NOIR — palette forest
   (arbitrage fondateur 7 juil : « fais ce que tu juges important,
   on mettra à jour le design system »)
   Le token forest --eyebrow-c: var(--brand-600) (#365322) tombe à
   2,35:1 sur noir-950 — échec AA pour du texte 11px — sur toutes
   les sections sombres (hero, îlot MT-Sling, preuve, footer). On
   éclaircit l'eyebrow en contexte sombre (≈ 6,4:1) et le souligné
   de nav du header (toujours noir). Balanced/heritage (4,2:1)
   laissées au DS — à traiter au SYNC avec un vrai token
   --eyebrow-c-dark sur toute la rampe.
   ------------------------------------------------------------ */
[data-palette="forest"] { --nav-underline: #7E9868; }
[data-palette="forest"] .eyebrow.on-dark { color: #7E9868; }

/* ------------------------------------------------------------
   D-OV5 · JEU 3D « LE BANC DU TIREUR » — MÉDIUM RENDU (5 juil)
   Le DS impose « imagerie = photographie réelle, jamais d'illustration ».
   Le jeu de conversion (Jeu.html) est une scène 3D temps réel (Three.js
   r128, WebGL) — ni photo ni illustration plate, mais un médium interactif
   que le DS ne couvre pas. La scène RESPECTE la charte : environnement
   noir/terre, HUD & réticule crème, typo mono (JetBrains Mono), et surtout
   la DOCTRINE JAUNE — le latex-yellow n'est utilisé QUE pour la mesure
   (impacts + relevé de groupement extreme-spread), jamais décoratif.
   Aucune règle CSS ici : dérive de médium documentée pour traçabilité.
   Dépendances : maquette/jeu-engine.js (moteur) + CDN three@0.128.0.
   → À la reconstruction du thème : porter le jeu tel quel (enqueue Three.js
     en local/CDN + jeu-engine.js), il ne dépend d'aucun composant DS.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   D-OV4 · CÂBLAGE FOOTER — chrome-wire.js (rappel)
   Constat fondateur : le SiteFooter du DS rend TOUS ses liens de
   colonnes (Catalogue/MT-Sling/Aide/Maison) et ses socials en
   href="#" — le composant n'accepte pas d'URL par lien ni par social.
   Le footer paraît complet mais rien n'est cliquable.
   Fix maquette (pas de CSS) : maquette/chrome-wire.js RECONSTRUIT chaque
   colonne du footer une fois monté — libellés exact-match SEO (D8) +
   catalogue COMPLET (le DEFAULT_COLS du DS omettait Accessoires /
   Élastiques / Billes) + socials. Chargé sur toutes les pages V8.
   → À reporter dans le DS : SiteFooter doit accepter des colonnes
     { h, links:[{label, href}] } et des socials { name, href },
     et son DEFAULT_COLS doit lister les 8 catégories. Puis retirer chrome-wire.js.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   D-OV6 · CÂBLAGE HEADER — bouton « Compte » inerte (7 juil)
   Constat fondateur (« quand je clique sur mon compte dans le
   header ça ne marche pas ») : le SiteHeader du DS rend le contrôle
   compte en <button class="icon-btn" aria-label="Compte"> SANS
   onClick ni href — il ne fait rien au clic. Le panier, lui, est un
   <a> (intercepté par les pages) ; les handlers de navigation
   délégués des pages ne matchent que closest('a') → le bouton
   passait au travers.
   Fix maquette (pas de CSS) : maquette/chrome-wire.js écoute le
   clic en délégué sur header.site button[aria-label="Compte"] et
   navigue vers Mon compte.html — toutes pages, clavier compris.
   → À reporter dans le DS (lot SYNC-7) : le compte doit être un
     LIEN — prop accountHref sur SiteHeader (et cartHref pour le
     <a> panier aujourd'hui en href="#" dur). Puis retirer ce câblage.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   D-OV7 · CÂBLAGE RECHERCHE — header muet (audit 7 juil)
   Constat audit final : les DEUX entrées de recherche du SiteHeader
   DS (champ desktop .head-search >960px ET feuille mobile
   .search-sheet ≤960px) rendent un <input> sans <form>, sans handler
   Enter, sans navigation — la recherche siège dans le chrome de
   TOUTES les pages mais ne mène nulle part, alors que Recherche.html
   consomme déjà ?q=.
   Fix maquette (pas de CSS) : maquette/chrome-wire.js écoute keydown
   Enter en délégué sur ces inputs et navigue vers
   Recherche.html?q={terme encodé} — toutes pages.
   → À reporter dans le DS (lot SYNC-7) : SiteHeader doit accepter
     searchHref/onSearch (ou envelopper ses inputs d'un <form action>).
     Puis retirer ce câblage.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   A-1 · DOCTRINE JAUNE ÉTENDUE (arbitrage fondateur 10 juil — revue 13)
   Règle consignée : « jaune = donnée du banc, MESURÉE ou CALIBRÉE-BANC,
   toujours étiquetée ». Le calculateur de joules (courbe d'énergie +
   grand chiffre résultat) reste donc JAUNE : c'est un instrument du
   banc, son estimation est calibrée sur nos relevés et étiquetée
   (« seul le chronographe fait foi »). Le jaune décoratif reste interdit.
   Aucune règle CSS — doctrine à reporter dans le guide du DS (SYNC).
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   D-OV10 · ÉCRIN VIDE → RATIO 4:3 (revue 13, P1.2-a·3 / Top 10 #4)
   Le DS fixe .product-img à aspect-ratio 4/5 — justifié quand un
   packshot l'habite. Sans photo (l'essentiel des 73 réfs avant le
   shooting), l'écrin devient un aplat noir géant en rayon, recherche,
   quiz et cross-sell. Palliatif : sans <img>, l'écrin passe en 4:3
   et rend l'écran à la donnée (nom / prix / mesure). Navigateurs
   sans :has() : ratio DS inchangé (dégradation propre).
   → À reporter au DS (SYNC) : état « sans packshot » de ProductCard.
   ------------------------------------------------------------ */
.product-img:not(:has(img)) { aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------
   D-OV11 · GRILLES PLEINES LARGES + CATALOGUE MOBILE (revue 13,
   P1.1-l/-m/-i — préfigure SYNC-9)
   Le DS laisse .reassure-grid / .catalog-grid retomber en 2 colonnes
   sous certaines largeurs : on garantit 4 colonnes ≥1200px (socle du
   hero + index SEO en 2 rangées de 4) et 1 colonne ≤560px pour
   l'index catalogue (le mur de liens 2 col à 390 est illisible).
   → À reporter au DS (SYNC-9) : components.css, mêmes règles.
   ------------------------------------------------------------ */
@media (min-width: 1200px) {
  .reassure-grid { grid-template-columns: repeat(4, 1fr); }
  .catalog-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .catalog-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------------------
   D-OV12 · SCROLLBARS NATIVES SUR SURFACES DESIGN (revue 13,
   P1.1-n / P1.2-c / P1.3-d — préfigure SYNC-10)
   Utilitaire .no-scrollbar + application aux trois surfaces signature
   à défilement interne : barre d'ancres de la fiche, rail Instagram
   (les flèches existent), enveloppe du tableau « Le banc parle ».
   Le défilement reste fonctionnel (molette / geste), seule la barre
   système disparaît.
   → À reporter au DS (SYNC-10) : utilitaire .no-scrollbar.
   ------------------------------------------------------------ */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pdp-anchors .row { scrollbar-width: none; }
.pdp-anchors .row::-webkit-scrollbar { display: none; height: 0; }
.ig-rail { scrollbar-width: none; }
.ig-rail::-webkit-scrollbar { display: none; height: 0; }

/* ------------------------------------------------------------
   D-OV13 · NAV DESKTOP DÈS 900px (revue 13, P5.1-c / Top 10 #3 —
   préfigure SYNC-8)
   Le SiteHeader du DS bascule au burger ≤960px : les laptops 13" et
   tablettes paysage (911px…) perdent la nav ET le mega-menu — l'atout
   SEO/UX du chrome. Entre 900 et 960px on restaure la nav desktop
   (gap resserré, recherche compactée pour tenir).
   → À reporter au DS (SYNC-8) : breakpoint du SiteHeader 960 → 900.
   ------------------------------------------------------------ */
@media (min-width: 900px) and (max-width: 960px) {
  nav.primary { display: flex; gap: 20px; }
  .head-search { display: flex; min-width: 150px; }
  .mega { display: block; }
  .nav-burger, .search-btn-mobile, .search-sheet, .mobile-nav { display: none; }
}

/* ------------------------------------------------------------
   D-OV14 · TAP TARGET « RETIRER » DU MINI-PANIER (revue 13, P1.5-b /
   Top 10 #9 — étend D-OV8, préfigure SYNC-11)
   Le DS rend .mc-remove en 17×20px (padding 2px) — sous le minimum
   WCAG 2.5.8 (24px) même au pointeur fin. On porte la cible à ≥25px
   au desktop (padding), et à ≥45px au tactile via une zone de frappe
   étendue (::after) sans changer le rendu.
   → À reporter au DS (SYNC-11) : .mc-remove dans components.css.
   ------------------------------------------------------------ */
.mc-remove { position: relative; padding: 6px; margin: -4px -4px -4px 0; }
@media (pointer: coarse) {
  .mc-remove::after { content: ""; position: absolute; inset: -10px; }
}

/* ------------------------------------------------------------
   D-OV15 · SPECS FICHE EN 1 COLONNE ≤560px (revue 13, P1.3-e)
   La dl 2 colonnes du DS (.pdp-spec-table : libellé | valeur alignée
   droite) écrase les valeurs à 390px (« 5,4 / cm à / 10 m » sur 3
   lignes). En mobile serré : libellé au-dessus, valeur en dessous,
   alignée à gauche.
   → À reporter au DS (SYNC) : components.css, même règle.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  .pdp-spec-table dl { grid-template-columns: 1fr; }
  .pdp-spec-table dt { padding: 12px 0 2px; border-bottom: 0; }
  .pdp-spec-table dd { padding: 0 0 12px; text-align: left; }
}

/* ------------------------------------------------------------
   D-OV16 · CROSS-SELL FICHE EN 1 COLONNE ≤560px (revue 13, P1.3-f)
   La .grid-4 du DS retombe en 2 colonnes en mobile : sur la fiche,
   les cards cross-sell y deviennent trop étroites (chip stock qui
   casse « … 24-48 / H », mesure tronquée). En ≤560 : 1 colonne.
   Scopé à la section cross-sell de la fiche (data-screen-label).
   → À reporter au DS (SYNC) : état mobile 1 col du rail cross-sell.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
  section[data-screen-label="03 Cross-sell"] .grid-4 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   DA ACCUEIL — ARBITRÉE ET APPLIQUÉE EN DUR (7 juil) · home-proto-da.css
   Les 6 explorations « Revue DA » ont été tranchées par le fondateur
   (P1 grille « chasse dominante » A · P2 relevé hero cartouche A ·
   P3 top 4 « podium 1+3 » C · P4 index de gamme · P5 catalogue SEO
   en bas · P6 bande manifeste) — plus aucun toggle, styles appliqués
   en dur. Tokens DS uniquement, doctrine jaune respectée.
   + Audit 7 juil : zone de frappe tactile des liens .mt-index étendue
   à 44px de haut (::after, pointer:coarse) — rendu visuel inchangé.
   → À promouvoir au DS (sync-ds/) puis supprimer le fichier.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   DA GUIDES — « KIOSQUE COUVERTURES » (B) ADOPTÉE (7 juil) ·
   guides-proto-da.css — appliquée en dur dans Guides.jsx, variantes
   A/C et grille d'origine purgées. Article : numérotation mono
   TOC/sections + signature auteur. Tokens DS uniquement.
   → À promouvoir au DS (sync-ds/) puis supprimer le fichier.
   ------------------------------------------------------------ */