/* ============================================
   SHADOW PICKS OR NOTHING · la DA du media kit
   --------------------------------------------
   Reference : le media kit PDF de Steeve (lynks.pro/MK), valide le 2026-09-29.
   Verrou DA : picks/DA.md. Active par la classe `spon` sur <body class="picks">.

   Feuilles de dossier blanches a filets noirs posees sur le noir d'Animal Shadow,
   titres condenses massifs (Anton), portraits de Steeve, banc de test, sceau d'or
   reserve aux incontournables, barre noire en pied. Le rouge ne sert qu'a l'action.
   Aucun element de spectacle retire : loader, curseur, pieces, succes, easter egg.
   ============================================ */

body.picks.spon {
  --spon-dehors: #161616;
  --spon-papier: #FFFFFF;
  --spon-papier-2: #F4F4F2;
  --spon-encre: #0B0B0B;
  --spon-gris: #5A5A5A;
  --spon-gris-2: #8C8C8C;
  --spon-filet: 1.5px solid #0B0B0B;
  --spon-filet-fin: 1px solid #0B0B0B;
  --spon-vert: #1F9D6B;
  --spon-or: #CDA85C;
  --spon-or-fonce: #8F6D2C;
  --spon-rouge: #AE0000;
  --spon-display: 'Anton', 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --spon-etiquette: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --spon-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--spon-dehors);
}
body.picks.spon :is(h1,h2,h3,h4,h5,h6) { text-transform: uppercase; }

/* ---------- La feuille de dossier ---------- */
body.picks.spon .spon-page { max-width: 1320px; margin: clamp(1rem,3vw,2.2rem) auto; background: var(--spon-papier); color: var(--spon-encre); border: var(--spon-filet); }
@media (max-width: 1360px) { body.picks.spon .spon-page { margin-inline: clamp(8px,2vw,20px); } }
body.picks.spon .spon-tete { display: grid; grid-template-columns: auto 1fr auto; border-bottom: var(--spon-filet); }
body.picks.spon .spon-tete > * { padding: .7rem 1rem; display: flex; align-items: center; }
body.picks.spon .spon-tete__marque { gap: .55rem; border-right: var(--spon-filet); font-family: var(--spon-etiquette); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--spon-encre); text-decoration: none; }
body.picks.spon .spon-tete__marque img { width: 26px; height: 26px; }
body.picks.spon .spon-rayures { font-family: var(--spon-etiquette); font-weight: 700; letter-spacing: .05em; overflow: hidden; white-space: nowrap; font-size: 1.1rem; color: var(--spon-encre); }
body.picks.spon .spon-codebarre { border-left: var(--spon-filet); gap: 1.5px; align-items: stretch !important; height: 48px; }
body.picks.spon .spon-codebarre span { width: 2px; background: var(--spon-encre); }
body.picks.spon .spon-codebarre span:nth-child(2n) { width: 3px; }
body.picks.spon .spon-codebarre span:nth-child(3n) { width: 1px; }
body.picks.spon .spon-codebarre span:nth-child(5n) { width: 4px; }
@media (max-width: 640px) { body.picks.spon .spon-rayures { display: none; } body.picks.spon .spon-tete { grid-template-columns: 1fr auto; } }

body.picks.spon .spon-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 2rem; background: var(--spon-encre); color: #EDEDED; padding: .85rem 1.1rem; font-family: var(--spon-etiquette); font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
body.picks.spon .spon-pied a { color: inherit; text-decoration: none; }
body.picks.spon .spon-pied a:hover { color: var(--spon-or); }
body.picks.spon .spon-pied__reseaux { display: flex; gap: 2rem; flex-wrap: wrap; }
body.picks.spon .spon-pied__reseaux a + a { padding-left: 2rem; border-left: 1px solid #444; }
body.picks.spon .spon-pied__compte { display: flex; align-items: center; gap: .8rem; font-family: var(--spon-display); letter-spacing: .06em; font-size: .95rem; }
body.picks.spon .spon-pied__compte i { display: inline-block; width: 70px; height: 1px; background: #EDEDED; }

/* ---------- Couverture ---------- */
body.picks.spon .spon-couv { display: grid; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  body.picks.spon .spon-couv { grid-template-columns: repeat(12, 1fr); }
  body.picks.spon .c-titre { grid-column: 1/9; border-right: var(--spon-filet); }
  body.picks.spon .c-portrait { grid-column: 9/13; }
  body.picks.spon .c-banc { grid-column: 1/6; border-right: var(--spon-filet); border-bottom: 0 !important; }
  body.picks.spon .c-rituel { grid-column: 6/10; border-right: var(--spon-filet); border-bottom: 0 !important; }
  body.picks.spon .c-sceau { grid-column: 10/13; border-bottom: 0 !important; }
}
body.picks.spon .spon-case { position: relative; border-bottom: var(--spon-filet); min-width: 0; }
body.picks.spon .c-titre { padding: clamp(1.6rem,4vw,3rem) clamp(16px,3vw,2.4rem); overflow: hidden; min-height: 320px; display: flex; align-items: center; }
body.picks.spon .c-titre .filigrane { position: absolute; inset: 0; background-size: cover; background-position: 62% 30%; opacity: .1; filter: grayscale(1); pointer-events: none; }
body.picks.spon .c-titre h1 { position: relative; font-family: var(--spon-display); font-weight: 400; font-size: clamp(3.1rem,8.6vw,7.8rem); line-height: .98; letter-spacing: -.005em; margin: 0; color: var(--spon-encre); }
body.picks.spon .c-titre h1 .ligne { display: block; white-space: nowrap; }
body.picks.spon .c-titre h1 img { display: inline-block; width: .78em; height: .78em; vertical-align: -.06em; margin-left: .08em; filter: drop-shadow(0 8px 12px rgba(90,64,20,.35)); }
body.picks.spon .c-portrait { display: grid; grid-template-rows: 1fr auto; background: var(--spon-papier-2); }
body.picks.spon .c-portrait figure { margin: 1rem; overflow: hidden; background: #ddd; aspect-ratio: 3/4; }
body.picks.spon .c-portrait figure img { width: 100%; height: 100%; object-fit: cover; }
body.picks.spon .c-portrait p { margin: 0; border-top: var(--spon-filet); padding: .8rem 1rem; font-family: var(--spon-display); font-size: 1.3rem; text-transform: uppercase; }
body.picks.spon .c-banc { padding: 1.1rem 1.1rem 1.1rem 1.8rem; }
body.picks.spon .banc { position: relative; display: block; text-decoration: none; color: inherit; }
body.picks.spon .banc::before, body.picks.spon .banc::after { content: ""; position: absolute; width: 18px; height: 18px; border: 1.5px solid var(--spon-encre); z-index: 2; }
body.picks.spon .banc::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
body.picks.spon .banc::after { bottom: 4px; right: -6px; border-left: 0; border-top: 0; }
body.picks.spon .banc__photo { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
body.picks.spon .banc__photo img { width: 100%; height: 100%; object-fit: cover; }
body.picks.spon .regle-v { position: absolute; left: -14px; top: 0; bottom: 10px; width: 9px; background: repeating-linear-gradient(to bottom,#8a8a8a 0 1px,transparent 1px 10px); }
body.picks.spon .regle-h { height: 9px; margin-top: 5px; background: repeating-linear-gradient(to right,#8a8a8a 0 1px,transparent 1px 10px); }
body.picks.spon .balayage { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,transparent,rgba(31,157,107,.95),transparent); box-shadow: 0 0 14px rgba(31,157,107,.55); animation: sponBalayer 3.8s cubic-bezier(.45,0,.55,1) infinite; z-index: 1; }
@keyframes sponBalayer { 0% { top: 6%; opacity: 0 } 12% { opacity: 1 } 88% { opacity: 1 } 100% { top: 94%; opacity: 0 } }
body.picks.spon .ruban { position: absolute; left: 0; top: .9rem; z-index: 2; background: var(--spon-encre); color: #fff; font-family: var(--spon-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; padding: .42rem .75rem .42rem .85rem; }
body.picks.spon .ruban b { color: var(--spon-or); font-weight: 500; }
body.picks.spon .banc__donnees { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; margin: .8rem 0 0; font-family: var(--spon-mono); font-size: .72rem; }
body.picks.spon .banc__donnees dt { text-transform: uppercase; letter-spacing: .08em; color: var(--spon-gris-2); }
body.picks.spon .banc__donnees dd { margin: 0; color: var(--spon-encre); }
body.picks.spon .c-rituel { display: grid; grid-template-rows: auto 1fr; }
body.picks.spon .c-rituel h2 { margin: 0; padding: 1rem 1.1rem; border-bottom: var(--spon-filet); font-family: var(--spon-etiquette); font-weight: 700; font-size: .95rem; letter-spacing: .06em; line-height: 1.3; color: var(--spon-encre); }
body.picks.spon .c-rituel__corps { padding: 1.1rem; display: flex; flex-direction: column; gap: 1.2rem; justify-content: center; }
body.picks.spon .c-rituel__corps p { margin: 0; color: var(--spon-gris); text-align: center; font-size: 1rem; line-height: 1.6; }
body.picks.spon .c-rituel__corps p b { color: var(--spon-encre); }
body.picks.spon .spon-boutons { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
body.picks.spon .spon-btn { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .8rem 1.2rem; font-family: var(--spon-etiquette); font-weight: 600; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1.5px solid var(--spon-encre); border-radius: 0; background: var(--spon-papier); color: var(--spon-encre); transition: background .2s ease, color .2s ease; }
body.picks.spon .spon-btn:hover { background: var(--spon-encre); color: #fff; }
body.picks.spon .spon-btn--achat { background: var(--spon-rouge); border-color: var(--spon-rouge); color: #fff; }
body.picks.spon .spon-btn--achat:hover { background: #8E0000; border-color: #8E0000; }
body.picks.spon .spon-btn:focus-visible, body.picks.spon .spon-planche:focus-visible, body.picks.spon .banc:focus-visible, body.picks.spon .cat-card:focus-visible, body.picks.spon .quiz-card:focus-visible { outline: 2px solid var(--spon-vert); outline-offset: 3px; }
body.picks.spon .c-sceau { display: grid; place-items: center; padding: 1.4rem; background: var(--spon-papier-2); overflow: hidden; min-height: 240px; }
body.picks.spon .c-sceau img { width: min(78%,220px); filter: drop-shadow(0 18px 24px rgba(90,64,20,.35)); }
body.picks.spon .spon-annee { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--spon-display); font-size: 1.8rem; letter-spacing: .06em; color: var(--spon-encre); }

/* ---------- Titres de feuille ---------- */
body.picks.spon .spon-titre { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 900px) { body.picks.spon .spon-titre { grid-template-columns: 2fr 1fr; } body.picks.spon .spon-titre h2 { border-right: var(--spon-filet); } }
body.picks.spon .spon-titre h2 { margin: 0; padding: clamp(1.2rem,3vw,2rem) clamp(16px,3vw,2rem); font-family: var(--spon-display); font-weight: 400; font-size: clamp(2.4rem,6vw,4.8rem); line-height: 1; color: var(--spon-encre); }
body.picks.spon .spon-titre p { margin: .6rem 0 0; font-family: 'Montserrat', sans-serif; font-size: .95rem; text-transform: none; color: var(--spon-gris); max-width: 58ch; letter-spacing: 0; line-height: 1.55; }
body.picks.spon .spon-noir { background: var(--spon-encre); color: #fff; display: flex; align-items: center; justify-content: center; gap: 1rem; font-family: var(--spon-etiquette); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; padding: 1rem; text-decoration: none; }
body.picks.spon a.spon-noir:hover { color: var(--spon-or); }

/* ---------- Scene humaine ---------- */
body.picks.spon .spon-scene { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 900px) { body.picks.spon .spon-scene { grid-template-columns: 7fr 5fr; } body.picks.spon .spon-scene figure { border-right: var(--spon-filet); } }
body.picks.spon .spon-scene figure { margin: 0; aspect-ratio: 4/3; overflow: hidden; background: #eee; }
body.picks.spon .spon-scene figure img { width: 100%; height: 100%; object-fit: cover; }
body.picks.spon .spon-scene > div { padding: clamp(1.4rem,3vw,2.4rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
body.picks.spon .spon-scene h3 { margin: 0; font-family: var(--spon-display); font-weight: 400; font-size: clamp(1.8rem,3.6vw,2.8rem); line-height: 1; color: var(--spon-encre); }
body.picks.spon .spon-scene p { margin: 0; color: var(--spon-gris); max-width: 40ch; }

/* ---------- Planches a chiffre geant (rendues par picks.js) ---------- */
body.picks.spon .spon-planches { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { body.picks.spon .spon-planches { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1100px) { body.picks.spon .spon-planches { grid-template-columns: repeat(4,1fr); } }
body.picks.spon .spon-planche { position: relative; text-decoration: none; display: flex; flex-direction: column; border-bottom: var(--spon-filet); border-right: var(--spon-filet); color: var(--spon-encre); background: var(--spon-papier); transition: background .2s ease; }
body.picks.spon .spon-planche:hover { background: var(--spon-papier-2); }
@media (max-width: 699px) { body.picks.spon .spon-planche { border-right: 0; } }
@media (min-width: 700px) and (max-width: 1099px) { body.picks.spon .spon-planche:nth-child(2n) { border-right: 0; } }
@media (min-width: 1100px) { body.picks.spon .spon-planche:nth-child(4n) { border-right: 0; } }
body.picks.spon .spon-planche__haut { display: flex; justify-content: space-between; align-items: flex-start; padding: 1rem 1.1rem 0; }
body.picks.spon .spon-planche__note { font-family: var(--spon-display); font-size: clamp(3.8rem,6vw,5.6rem); line-height: .86; }
body.picks.spon .spon-planche--scelle .spon-planche__note { color: var(--spon-or-fonce); }
body.picks.spon .spon-planche--refus .spon-planche__note { color: var(--spon-rouge); }
body.picks.spon .spon-planche__num { font-family: var(--spon-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--spon-gris); text-align: right; }
body.picks.spon .spon-planche--scelle .spon-planche__num { margin-right: 76px; }
body.picks.spon .spon-planche__img { position: relative; margin: 1rem 1.1rem 0; aspect-ratio: 16/10; background: #0A0A0A; overflow: hidden; }
body.picks.spon .spon-planche__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); }
body.picks.spon .spon-planche:hover .spon-planche__img img { transform: scale(1.03); }
body.picks.spon .spon-planche__img .ruban { top: auto; bottom: .7rem; }
body.picks.spon .spon-planche__corps { padding: 1rem 1.1rem 1.2rem; display: grid; gap: .45rem; flex: 1; align-content: start; }
body.picks.spon .spon-planche h3 { margin: 0; font-family: var(--spon-display); font-weight: 400; font-size: 1.35rem; line-height: 1.05; color: var(--spon-encre); }
body.picks.spon .spon-planche p { margin: 0; color: var(--spon-gris); font-size: .9rem; line-height: 1.5; }
body.picks.spon .spon-planche__pied { margin-top: auto; padding-top: .7rem; border-top: var(--spon-filet-fin); display: flex; justify-content: space-between; gap: .6rem; font-family: var(--spon-etiquette); font-weight: 600; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
body.picks.spon .spon-planche__pied span:last-child { color: var(--spon-rouge); white-space: nowrap; }
body.picks.spon .spon-planche .sceau { position: absolute; width: 72px; height: 72px; top: .6rem; right: .8rem; filter: drop-shadow(0 8px 12px rgba(90,64,20,.35)); pointer-events: none; }
body.picks.spon .spon-bas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--spon-filet); }
body.picks.spon .spon-bas span { padding: .9rem 1rem; text-align: center; font-family: var(--spon-display); font-size: 1.3rem; letter-spacing: .04em; text-transform: uppercase; }
body.picks.spon .spon-bas span:first-child { border-right: var(--spon-filet); }

/* ---------- Rayons (categories) et outils ---------- */
body.picks.spon .spon-rayons { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { body.picks.spon .spon-rayons { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { body.picks.spon .spon-rayons { grid-template-columns: repeat(3,1fr); } }
body.picks.spon .spon-rayons .cat-card { background: var(--spon-papier) !important; border: 0; border-radius: 0; border-bottom: var(--spon-filet); border-right: var(--spon-filet); min-height: 0 !important; padding: 1.4rem 1.2rem; color: var(--spon-encre); transform: none !important; }
body.picks.spon .spon-rayons .cat-card:hover { background: var(--spon-papier-2) !important; }
@media (max-width: 699px) { body.picks.spon .spon-rayons .cat-card { border-right: 0; } }
@media (min-width: 700px) and (max-width: 999px) { body.picks.spon .spon-rayons .cat-card:nth-child(2n) { border-right: 0; } }
@media (min-width: 1000px) { body.picks.spon .spon-rayons .cat-card:nth-child(3n) { border-right: 0; } }
body.picks.spon .spon-rayons .cat-card::before, body.picks.spon .spon-rayons .cat-bg { display: none !important; }
body.picks.spon .spon-rayons .cat-card .icon { background: var(--spon-encre); border-radius: 0; width: 44px; height: 44px; color: #fff; font-family: var(--spon-display); font-weight: 400; }
body.picks.spon .spon-rayons .cat-card .icon img { filter: brightness(0) invert(1) !important; }
body.picks.spon .spon-rayons .cat-card h3 { font-family: var(--spon-display); font-weight: 400; font-size: 1.6rem; line-height: 1; margin: 1rem 0 .4rem; color: var(--spon-encre); }
body.picks.spon .spon-rayons .cat-card p { color: var(--spon-gris); }
body.picks.spon .spon-rayons .cat-card .arrow { color: var(--spon-rouge); top: 1.4rem; right: 1.2rem; }
body.picks.spon .spon-quiz { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { body.picks.spon .spon-quiz { grid-template-columns: 1fr 1fr; } body.picks.spon .spon-quiz .quiz-card:first-child { border-right: var(--spon-filet); } }
body.picks.spon .spon-quiz .quiz-card { background: var(--spon-encre); color: #fff; border: 0; border-radius: 0; border-bottom: var(--spon-filet); padding: clamp(1.4rem,3vw,2.2rem); }
body.picks.spon .spon-quiz .quiz-card::before { display: none; }
body.picks.spon .spon-quiz .quiz-card h3 { font-family: var(--spon-display); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1; color: #fff; }
body.picks.spon .spon-quiz .quiz-card p { color: #BDBDBD; }
body.picks.spon .spon-quiz .quiz-card .step-count { font-family: var(--spon-etiquette); letter-spacing: .2em; color: var(--spon-or); }
body.picks.spon .spon-quiz .btn-gold { background: var(--spon-or); color: #111; border-radius: 0; font-family: var(--spon-etiquette); }

/* ---------- Lettre du vendredi et marques ---------- */
body.picks.spon .spon-lettre { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { body.picks.spon .spon-lettre { grid-template-columns: 1fr 1fr; } body.picks.spon .spon-lettre > div:first-child { border-right: var(--spon-filet); } }
body.picks.spon .spon-lettre > div { padding: clamp(1.4rem,3vw,2.4rem); border-bottom: var(--spon-filet); }
body.picks.spon .spon-lettre h3 { margin: 0 0 .6rem; font-family: var(--spon-display); font-weight: 400; font-size: clamp(1.8rem,3.4vw,2.6rem); line-height: 1; color: var(--spon-encre); }
body.picks.spon .spon-lettre p { margin: 0 0 1.2rem; color: var(--spon-gris); }
body.picks.spon .spon-lettre .newsletter-form { max-width: none; margin: 0; }
body.picks.spon .spon-lettre .newsletter-form input { border-radius: 0; border: var(--spon-filet); background: #fff; color: var(--spon-encre); }
body.picks.spon .spon-lettre .newsletter-form button { border-radius: 0; background: var(--spon-rouge); box-shadow: none; }
body.picks.spon .spon-lettre .perks { margin-top: .8rem; display: flex; gap: 1.2rem; flex-wrap: wrap; font-family: var(--spon-etiquette); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spon-gris); }
body.picks.spon .spon-khaos { background: var(--spon-encre); color: #fff; text-align: center; padding: clamp(2.4rem,6vw,4.4rem) 1rem; border-bottom: var(--spon-filet); }
body.picks.spon .spon-khaos p { margin: 0; font-family: var(--spon-display); font-size: clamp(3rem,10vw,8.4rem); line-height: .9; text-transform: uppercase; }
body.picks.spon .spon-khaos p b { color: var(--spon-rouge); font-weight: 400; }
body.picks.spon .spon-khaos small { display: block; margin-top: 1rem; font-family: var(--spon-etiquette); letter-spacing: .3em; text-transform: uppercase; color: var(--spon-or); font-size: .75rem; }

/* ---------- Pied de page ---------- */
body.picks.spon .picks-footer { background: var(--spon-dehors); }

@media (prefers-reduced-motion: reduce) {
  body.picks.spon .balayage { animation: none; top: 50%; }
  body.picks.spon .spon-btn, body.picks.spon .spon-planche, body.picks.spon .spon-planche__img img { transition: none; }
  body.picks.spon .spon-planche:hover .spon-planche__img img { transform: none; }
}

/* « Ne l'achete pas » : tant qu'il n'y a qu'un ou deux refus, planche pleine largeur,
   jamais une grille a cases vides. */
body.picks.spon #dontbuy-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  body.picks.spon #dontbuy-grid .spon-planche { display: grid; grid-template-columns: minmax(180px,.8fr) 1.4fr 1.6fr; align-items: stretch; border-right: 0; }
  body.picks.spon #dontbuy-grid .spon-planche__haut { flex-direction: column; justify-content: center; gap: .6rem; padding: 1.4rem; border-right: var(--spon-filet-fin); }
  body.picks.spon #dontbuy-grid .spon-planche__img { margin: 1.2rem; }
  body.picks.spon #dontbuy-grid .spon-planche__corps { padding: 1.4rem 1.4rem 1.4rem .4rem; align-content: center; }
  body.picks.spon #dontbuy-grid .spon-planche__num { text-align: left; }
}

/* La barre du site garde un fond plein au-dessus des feuilles. */
body.picks.spon .nav { background: rgba(10,10,10,.97); }
@media (max-width: 640px) { body.picks.spon .spon-pied__reseaux { flex-direction: column; gap: .45rem; } body.picks.spon .spon-pied__reseaux a + a { padding-left: 0; border-left: 0; } }

/* ---------- Couleurs du theme Picks a l'interieur d'une feuille ----------
   picks-seo.js (FAQ, auteur, resume) ecrit ses couleurs avec les variables
   --picks-* du theme sombre : dans une feuille blanche, elles passent a l'encre. */
body.picks.spon .spon-page { --picks-text: #0B0B0B; --picks-text-soft: #5A5A5A; --picks-text-dim: #8C8C8C; --picks-gold: #8F6D2C; --picks-gold-light: #8F6D2C; --picks-border: #0B0B0B; --picks-border-soft: #DADADA; --picks-card: #FFFFFF; --picks-bg: #FFFFFF; --picks-bg-soft: #F4F4F2; }
/* L'ancien radar de picks-visual.js ne tourne plus sur les pages spon : la fiche
   rend le sien (.spon-criteres), a partir des seules notes reelles du banc. */
body.picks.spon .radar-chart { display: none !important; }

/* ---------- Le banc · sept criteres (fiche produit) ---------- */
body.picks.spon .spon-noir a { color: inherit; text-underline-offset: 3px; }
body.picks.spon .spon-noir a:hover { color: var(--spon-or); }
body.picks.spon .spon-criteres { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 860px) { body.picks.spon .spon-criteres { grid-template-columns: minmax(300px, 5fr) 7fr; } body.picks.spon .spon-criteres__radar { border-right: var(--spon-filet); } }
@media (max-width: 859px) { body.picks.spon .spon-criteres__radar { border-bottom: var(--spon-filet); } }
body.picks.spon .spon-criteres__radar { padding: clamp(1rem,3vw,2rem); background: var(--spon-papier-2); display: flex; align-items: center; justify-content: center; }
body.picks.spon .spon-criteres__radar svg { width: 100%; max-width: 380px; height: auto; overflow: visible; }
body.picks.spon .spon-criteres__radar .grille { fill: none; stroke: #C9C9C4; stroke-width: 1; }
body.picks.spon .spon-criteres__radar polygon.grille:last-of-type { stroke: var(--spon-encre); stroke-width: 1.5; }
body.picks.spon .spon-criteres__radar .axe { stroke: #C9C9C4; stroke-width: 1; }
body.picks.spon .spon-criteres__radar .donnees { fill: rgba(31,157,107,.16); stroke: var(--spon-encre); stroke-width: 2; stroke-linejoin: round; }
body.picks.spon .spon-criteres__radar .point { fill: var(--spon-vert); stroke: var(--spon-encre); stroke-width: 1.5; }
body.picks.spon .spon-criteres__radar text { font-family: var(--spon-etiquette); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--spon-encre); }
body.picks.spon .spon-criteres__liste { list-style: none; margin: 0; padding: 0; }
body.picks.spon .spon-criteres__liste li { display: grid; grid-template-columns: 1fr auto 3.2rem; grid-template-rows: auto auto; align-items: baseline; gap: .35rem 1rem; padding: .85rem clamp(16px,3vw,2rem); border-bottom: var(--spon-filet-fin); }
body.picks.spon .spon-criteres__liste li:last-child { border-bottom: 0; }
body.picks.spon .spon-criteres__liste .nom { font-family: var(--spon-etiquette); font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase; color: var(--spon-encre); }
body.picks.spon .spon-criteres__liste .poids { font-family: var(--spon-mono); font-size: .72rem; color: var(--spon-gris); }
body.picks.spon .spon-criteres__liste b { font-family: var(--spon-display); font-weight: 400; font-size: 1.9rem; line-height: 1; text-align: right; color: var(--spon-encre); }
body.picks.spon .spon-criteres__liste .jauge { grid-column: 1 / -1; height: 6px; border: var(--spon-filet-fin); background: var(--spon-papier); }
body.picks.spon .spon-criteres__liste .jauge i { display: block; height: 100%; background: var(--spon-encre); }

/* ---------- Fiche produit ---------- */
body.picks.spon.picks-fiche .product-page { padding: 0; }
body.picks.spon .spon-fil { font-family: var(--spon-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; gap: .4rem; }
body.picks.spon .spon-fil a { color: var(--spon-gris); text-decoration: none; }
body.picks.spon .spon-fil a:hover { color: var(--spon-rouge); }
body.picks.spon .spon-fil span { color: var(--spon-encre); overflow: hidden; text-overflow: ellipsis; }
body.picks.spon .spon-fiche__haut { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 960px) { body.picks.spon .spon-fiche__haut { grid-template-columns: 7fr 5fr; } body.picks.spon .spon-fiche__banc { border-right: var(--spon-filet); } }
body.picks.spon .spon-fiche__haut > .spon-case { border-bottom: 0; }
@media (max-width: 959px) { body.picks.spon .spon-fiche__banc { border-bottom: var(--spon-filet) !important; } }
body.picks.spon .spon-fiche__banc { padding: 1.4rem 1.4rem 1.4rem 2.1rem; position: relative; }
body.picks.spon .banc__photo--carre { aspect-ratio: 1/1; background: #0A0A0A; }
body.picks.spon .spon-fiche__sceau { position: absolute; top: .6rem; right: .8rem; width: 110px; height: 110px; transform: rotate(10deg); filter: drop-shadow(0 12px 16px rgba(90,64,20,.4)); z-index: 3; pointer-events: none; }
body.picks.spon .spon-fiche__detail { padding: clamp(1.4rem,3vw,2.4rem); display: flex; flex-direction: column; gap: 1.1rem; }
body.picks.spon .spon-fiche__index { margin: 0; font-family: var(--spon-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--spon-gris); }
body.picks.spon .spon-fiche__detail h1 { margin: 0; font-family: var(--spon-display); font-weight: 400; font-size: clamp(2.2rem,4.8vw,4rem); line-height: .98; color: var(--spon-encre); text-wrap: balance; }
body.picks.spon .spon-fiche__note { display: flex; align-items: flex-end; gap: .7rem; border-top: var(--spon-filet-fin); border-bottom: var(--spon-filet-fin); padding: .8rem 0; }
body.picks.spon .spon-fiche__note b { font-family: var(--spon-display); font-weight: 400; font-size: clamp(5rem,9vw,7.6rem); line-height: .8; color: var(--spon-encre); }
body.picks.spon .spon-fiche__note.is-scelle b { color: var(--spon-or-fonce); }
body.picks.spon .spon-fiche__note.is-refus b { color: var(--spon-rouge); }
body.picks.spon .spon-fiche__note span { font-family: var(--spon-display); font-size: 1.6rem; line-height: 1; padding-bottom: .3rem; }
body.picks.spon .spon-fiche__note small { font-family: var(--spon-etiquette); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--spon-gris); }
body.picks.spon .spon-fiche__verdict { margin: 0; font-size: 1.12rem; line-height: 1.55; color: var(--spon-encre); }
body.picks.spon .spon-fiche__achat { display: flex; flex-wrap: wrap; gap: .6rem; }
body.picks.spon .spon-fiche__achat .wish-btn.active { background: var(--spon-encre); color: #fff; }
body.picks.spon .spon-fiche__mention { margin: 0; font-size: .8rem; color: var(--spon-gris); line-height: 1.5; }
body.picks.spon .spon-duo { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 800px) { body.picks.spon .spon-duo { grid-template-columns: 1fr 1fr; } body.picks.spon .spon-duo > div:first-child { border-right: var(--spon-filet); } }
@media (max-width: 799px) { body.picks.spon .spon-duo > div:first-child { border-bottom: var(--spon-filet); } }
body.picks.spon .spon-duo > div { padding: clamp(1.2rem,3vw,2rem); }
body.picks.spon .spon-duo h2 { margin: 0 0 .9rem; font-family: var(--spon-display); font-weight: 400; font-size: clamp(1.6rem,3vw,2.2rem); line-height: 1; color: var(--spon-encre); }
body.picks.spon .spon-duo p { margin: 0; color: var(--spon-gris); line-height: 1.6; }
body.picks.spon .spon-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
body.picks.spon .spon-liste li { position: relative; padding-left: 1.5rem; color: var(--spon-encre); line-height: 1.5; }
body.picks.spon .spon-liste li::before { position: absolute; left: 0; top: 0; font-family: var(--spon-mono); font-weight: 500; }
body.picks.spon .spon-liste--plus li::before { content: "+"; color: var(--spon-vert); }
body.picks.spon .spon-liste--moins li::before { content: "-"; color: var(--spon-rouge); }
body.picks.spon .spon-planches--alt { border-bottom: 0; }
body.picks.spon .spon-fiche .faq-block, body.picks.spon .spon-fiche .author-block, body.picks.spon .spon-fiche .product-summary, body.picks.spon .spon-fiche .non-teste, body.picks.spon .spon-fiche .updated-on { color: var(--spon-encre); }

/* Blocs ajoutes par picks-seo.js, habilles en cases de feuille. */
body.picks.spon .spon-page :is(strong,b) { color: inherit; }
body.picks.spon .spon-fiche .product-summary, body.picks.spon .spon-fiche .non-teste, body.picks.spon .spon-fiche .updated-on { border-radius: 0 !important; border: var(--spon-filet-fin) !important; background: var(--spon-papier-2) !important; box-shadow: none !important; }
body.picks.spon .spon-annexe > .faq-block, body.picks.spon .spon-annexe > .author-block { margin: 0 !important; padding: clamp(1.2rem,3vw,2rem) !important; border: 0 !important; border-radius: 0 !important; background: var(--spon-papier) !important; box-shadow: none !important; }
body.picks.spon .spon-annexe > .faq-block h3 { font-family: var(--spon-display) !important; font-weight: 400 !important; font-size: clamp(1.6rem,3vw,2.2rem) !important; letter-spacing: 0 !important; color: var(--spon-encre); }
body.picks.spon .spon-annexe summary { color: var(--spon-encre) !important; }
body.picks.spon .spon-annexe summary::marker { color: var(--spon-rouge); }
body.picks.spon .spon-fiche .spon-titre h2 { font-size: clamp(1.9rem,4vw,3.2rem); }

/* Pages rayon et refus : le titre de feuille porte le h1. */
body.picks.spon .spon-titre h1 { margin: 0; font-family: var(--spon-display); font-weight: 400; font-size: clamp(2.6rem,6.4vw,5.2rem); line-height: .98; color: var(--spon-encre); }
body.picks.spon .spon-titre > div:first-child { padding: clamp(1.2rem,3vw,2rem) clamp(16px,3vw,2rem); }
body.picks.spon .spon-titre > div:first-child > h2 { padding: 0; }
body.picks.spon .spon-titre h1 + p, body.picks.spon .spon-titre p:not(.spon-surtitre) { margin: .7rem 0 0; font-size: 1rem; color: var(--spon-gris); max-width: 58ch; text-transform: none; }
body.picks.spon .spon-titre p.spon-surtitre { margin: 0 0 .6rem; font-family: var(--spon-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--spon-rouge); }
@media (min-width: 900px) { body.picks.spon .spon-titre > div:first-child { border-right: var(--spon-filet); } body.picks.spon .spon-titre h2 { border-right: 0; } }
body.picks.spon #dont-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  body.picks.spon #dont-grid .spon-planche { display: grid; grid-template-columns: minmax(180px,.8fr) 1.4fr 1.6fr; align-items: stretch; border-right: 0; }
  body.picks.spon #dont-grid .spon-planche__haut { flex-direction: column; justify-content: center; gap: .6rem; padding: 1.4rem; border-right: var(--spon-filet-fin); }
  body.picks.spon #dont-grid .spon-planche__img { margin: 1.2rem; }
  body.picks.spon #dont-grid .spon-planche__corps { padding: 1.4rem 1.4rem 1.4rem .4rem; align-content: center; }
  body.picks.spon #dont-grid .spon-planche__num { text-align: left; }
}

/* ---------- Marque partenaire : bonus declare sur la fiche (2026-09-30) ---------- */
body.picks.spon .spon-fiche__partenaire { margin: .2rem 0 .9rem; padding: .6rem .8rem; border: var(--spon-filet-fin); background: var(--spon-papier-2); font-size: .86rem; line-height: 1.5; color: var(--spon-encre); }
body.picks.spon .spon-fiche__partenaire b { font-family: var(--spon-etiquette); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--spon-or-fonce); }
body.picks.spon .spon-fiche__partenaire a { color: var(--spon-rouge); text-underline-offset: 3px; }

/* ---------- Tier list (2026-09-30) ---------- */
body.picks.spon .spon-titre p a { color: var(--spon-rouge); text-underline-offset: 3px; }
body.picks.spon .spon-tier { display: grid; grid-template-columns: 1fr; border-bottom: var(--spon-filet); }
@media (min-width: 760px) { body.picks.spon .spon-tier { grid-template-columns: 180px 1fr; } body.picks.spon .spon-tier__lettre { border-right: var(--spon-filet); } }
@media (max-width: 759px) { body.picks.spon .spon-tier__lettre { border-bottom: var(--spon-filet); flex-direction: row; align-items: baseline; gap: 1rem; } }
body.picks.spon .spon-tier__lettre { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.2rem; background: var(--spon-papier-2); }
body.picks.spon .spon-tier__lettre b { font-family: var(--spon-display); font-weight: 400; font-size: clamp(3.2rem,7vw,5.4rem); line-height: .9; color: var(--spon-encre); }
body.picks.spon .spon-tier__lettre span { font-family: var(--spon-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--spon-gris); }
body.picks.spon .spon-tier__lettre span + span { font-family: var(--spon-etiquette); font-weight: 700; font-size: .82rem; color: var(--spon-encre); }
body.picks.spon .spon-tier--S .spon-tier__lettre b { color: var(--spon-or-fonce); }
body.picks.spon .spon-tier--A .spon-tier__lettre { background: var(--spon-encre); }
body.picks.spon .spon-tier--A .spon-tier__lettre b, body.picks.spon .spon-tier--A .spon-tier__lettre span { color: #fff; }
body.picks.spon .spon-tier--F .spon-tier__lettre b { color: var(--spon-rouge); }
body.picks.spon .spon-tier__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
body.picks.spon .spon-tier__item { position: relative; display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--spon-encre); border-right: var(--spon-filet-fin); border-bottom: var(--spon-filet-fin); background: var(--spon-papier); transition: background .2s ease; }
body.picks.spon .spon-tier__item:hover { background: var(--spon-papier-2); }
body.picks.spon .spon-tier__item:focus-visible { outline: 3px solid var(--spon-vert); outline-offset: -3px; }
body.picks.spon .spon-tier__item img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; border-bottom: var(--spon-filet-fin); }
body.picks.spon .spon-tier__nom { padding: .55rem .6rem 2.2rem; font-family: var(--spon-etiquette); font-weight: 600; font-size: .82rem; line-height: 1.25; letter-spacing: .02em; text-transform: uppercase; }
body.picks.spon .spon-tier__nom small { display: block; margin-top: .3rem; font-family: var(--spon-mono); font-weight: 400; font-size: .64rem; letter-spacing: .1em; color: var(--spon-or-fonce); }
body.picks.spon .spon-tier__item b { position: absolute; right: .55rem; bottom: .4rem; font-family: var(--spon-display); font-weight: 400; font-size: 1.7rem; line-height: 1; }
body.picks.spon .spon-tier__item.is-scelle b { color: var(--spon-or-fonce); }
body.picks.spon .spon-tier__vide { grid-column: 1 / -1; max-width: 60ch; margin: 0; padding: 1.4rem 1.2rem; color: var(--spon-gris); font-size: .95rem; align-self: center; }

/* ============================================
   PAGES OUTILS (2026-09-30) · body.picks.spon.spon-outil
   Les pages Picks de l'ancienne DA passent dans une feuille : leurs composants
   (cartes, outils, formulaires) sont repeints en papier et filets, sans toucher
   a leur logique. Les variables --picks-* sont deja remappees dans .spon-page.
   ============================================ */
body.picks.spon .spon-contenu { padding: clamp(1.2rem,3vw,2.4rem) clamp(16px,3vw,2.2rem) clamp(1.6rem,4vw,3rem); color: var(--spon-encre); }
body.picks.spon .spon-contenu .section, body.picks.spon .spon-contenu .picks-hero { padding: 0 !important; background: none !important; border: 0 !important; }
body.picks.spon .spon-contenu .section + .section { margin-top: clamp(1.6rem,4vw,2.6rem); }
body.picks.spon .spon-contenu .section-inner, body.picks.spon .spon-contenu .picks-hero-inner { max-width: 980px !important; margin: 0 auto !important; padding: 0 !important; }
body.picks.spon .spon-contenu :is(h2, h3) { font-family: var(--spon-display) !important; font-weight: 400 !important; color: var(--spon-encre) !important; letter-spacing: .005em; }
body.picks.spon .spon-contenu h2 { font-size: clamp(1.8rem,4vw,2.8rem) !important; line-height: 1 !important; text-transform: uppercase; }
body.picks.spon .spon-contenu h3 { font-size: 1.25rem !important; line-height: 1.1; text-transform: uppercase; }
body.picks.spon .spon-contenu h1 { font-family: var(--spon-display) !important; font-weight: 400 !important; color: var(--spon-encre) !important; line-height: .98; }
body.picks.spon .spon-contenu p, body.picks.spon .spon-contenu li { color: var(--spon-gris); }
body.picks.spon .spon-contenu strong, body.picks.spon .spon-contenu b { color: var(--spon-encre); }
body.picks.spon .spon-contenu .or, body.picks.spon .spon-titre .or { color: var(--spon-or-fonce) !important; }
body.picks.spon .spon-contenu :is(p, li) a:not([class]) { color: var(--spon-rouge); text-underline-offset: 3px; }
body.picks.spon .spon-contenu .picks-eyebrow { font-family: var(--spon-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--spon-rouge); background: none; border: 0; padding: 0; }
body.picks.spon .spon-contenu .picks-eyebrow .dot { display: none; }
body.picks.spon .spon-contenu :is(.cat-card, .decryptor-tool, .decryptor-result, .quiz-card, .quiz-option, .quiz-question, .lex-card, .notice, .deal-card, .radar-card, .school-card, .setup-tile, .banned-card, .battle-card, .mood-card, .timeline-item, .product-card, .proof-stat, .iq-result, .newsletter-block, .seal-block, .for-block, .audit-zone, .compare-grid, .battle-arena, .gift-hero, .brand-cta, .setup-cta) {
  background: var(--spon-papier) !important; color: var(--spon-encre) !important; border: var(--spon-filet) !important; border-radius: 0 !important; box-shadow: none !important; backdrop-filter: none !important; }
body.picks.spon .spon-contenu :is(.cat-card, .quiz-card, .deal-card, .radar-card, .school-card, .setup-tile, .banned-card, .product-card, .mood-card):hover { background: var(--spon-papier-2) !important; transform: none !important; }
body.picks.spon .spon-contenu :is(.cat-grid, .quiz-grid, .deals-grid, .radar-grid, .school-grid, .banned-grid, .lex-list, .mood-grid, .products-grid, .setups-wall) { gap: 0 !important; }
body.picks.spon .spon-contenu :is(.cat-grid, .quiz-grid, .deals-grid, .radar-grid, .school-grid, .banned-grid, .lex-list, .mood-grid, .products-grid, .setups-wall) > * { margin: 0 -1.5px -1.5px 0 !important; }
body.picks.spon .spon-contenu .cat-card .icon { background: var(--spon-encre) !important; color: #fff !important; border-radius: 0 !important; font-family: var(--spon-display); }
body.picks.spon .spon-contenu .notice { background: var(--spon-papier-2) !important; }
body.picks.spon .spon-contenu .quiz-option.selected, body.picks.spon .spon-contenu .quiz-option[aria-pressed="true"] { background: var(--spon-encre) !important; color: #fff !important; }
body.picks.spon .spon-contenu .btn { border-radius: 0 !important; font-family: var(--spon-etiquette) !important; font-weight: 700 !important; letter-spacing: .12em !important; text-transform: uppercase; box-shadow: none !important; }
body.picks.spon .spon-contenu :is(.btn-primary, .btn-gold) { background: var(--spon-rouge) !important; color: #fff !important; border: 1.5px solid var(--spon-rouge) !important; }
body.picks.spon .spon-contenu :is(.btn-primary, .btn-gold):hover { background: #8a0000 !important; }
body.picks.spon .spon-contenu .btn-ghost { background: var(--spon-papier) !important; color: var(--spon-encre) !important; border: var(--spon-filet) !important; }
body.picks.spon .spon-contenu :is(input, select, textarea) { background: var(--spon-papier) !important; color: var(--spon-encre) !important; border: var(--spon-filet) !important; border-radius: 0 !important; box-shadow: none !important; }
body.picks.spon .spon-contenu :is(input, select, textarea):focus-visible { outline: 3px solid var(--spon-vert); outline-offset: 2px; }
body.picks.spon .spon-contenu :is(input, textarea)::placeholder { color: var(--spon-gris-2); }
body.picks.spon .spon-contenu [style*="background:#0a0a0a"] { background: var(--spon-papier-2) !important; }
body.picks.spon .spon-contenu .badge { border-radius: 0 !important; }
body.picks.spon .spon-contenu .score-badge, body.picks.spon .spon-contenu .score-circle { border-radius: 0 !important; background: var(--spon-encre) !important; color: #fff !important; }
body.picks.spon .spon-contenu .tier-chip { background: var(--spon-papier) !important; border: var(--spon-filet-fin) !important; border-radius: 0 !important; color: var(--spon-encre) !important; }
body.picks.spon .spon-contenu .quiz-progress { background: var(--spon-papier-2) !important; border: var(--spon-filet-fin); border-radius: 0 !important; }
body.picks.spon .spon-contenu .quiz-progress-bar { background: var(--spon-vert) !important; border-radius: 0 !important; }
body.picks.spon .spon-titre h1 .or { color: var(--spon-or-fonce); }
body.picks.spon .spon-contenu .hero-video-bg { display: none !important; }
body.picks.spon .spon-contenu [style*="border-radius"] { border-radius: 0 !important; }
body.picks.spon .spon-contenu [style*="Benzin"] { font-family: var(--spon-display) !important; font-weight: 400 !important; letter-spacing: .01em !important; }
body.picks.spon .spon-contenu a[style*="display:flex"] { color: var(--spon-encre); text-decoration: none; }
body.picks.spon .spon-contenu a[style*="display:flex"]:hover { background: var(--spon-papier-2) !important; }

body.picks.spon .spon-contenu h4 { font-family: var(--spon-display) !important; font-weight: 400 !important; font-size: 1.15rem !important; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: var(--spon-encre) !important; }
body.picks.spon .spon-contenu .banned-card h4 { color: var(--spon-rouge) !important; }
body.picks.spon .spon-contenu .field { background: none !important; border: 0 !important; padding: 0 !important; }
body.picks.spon .spon-contenu label { color: var(--spon-encre) !important; font-family: var(--spon-etiquette); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }
body.picks.spon .spon-contenu .timeline-item { padding: 1rem 1.2rem !important; }
body.picks.spon .spon-contenu .timeline-item::before { box-shadow: none; background: var(--spon-vert); border-radius: 0; }
body.picks.spon .spon-contenu .deal-card .discount { border-radius: 0 !important; background: var(--spon-rouge) !important; }
body.picks.spon .spon-contenu .deal-card .code { border-radius: 0 !important; }

/* ---------- Lettre Picks seule (fiches et rayons, 2026-09-30) ---------- */
body.picks.spon .spon-lettre--seule { grid-template-columns: 1fr !important; }
body.picks.spon .spon-lettre--seule > div { border-right: 0 !important; max-width: 760px; }
body.picks.spon .spon-lettre .newsletter-form { display: flex; flex-wrap: wrap; gap: 0; }
body.picks.spon .spon-lettre .newsletter-form input[type=email] { flex: 1 1 16rem; min-height: 48px; padding: .8rem 1rem; background: var(--spon-papier); color: var(--spon-encre); border: var(--spon-filet); border-right: 0; border-radius: 0; font-size: 1rem; }
body.picks.spon .spon-lettre .newsletter-form button { min-height: 48px; border-radius: 0; background: var(--spon-rouge); color: #fff; border: 1.5px solid var(--spon-rouge); font-family: var(--spon-etiquette); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 0 1.4rem; }
body.picks.spon .spon-lettre__msg { margin: .8rem 0 0 !important; color: var(--spon-encre) !important; min-height: 1.4em; }
body.picks.spon .spon-lettre .perks { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: .9rem; font-family: var(--spon-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--spon-gris); }

/* AUDIT MOBILE DU 2026-10-09 (ecran de 375 px).
   1. Le compteur du pied de planche (38 fiches, 27 testees, 4 scellees)
      tenait sur une seule ligne de 439 px dans une boite de 356 px. Ce seul
      bloc elargissait la page a 466 px : le telephone dezoomait TOUTE la page
      d'accueil et la laissait glisser de cote. Il passe a la ligne, et ses
      filets raccourcissent sur telephone. */
body.picks.spon .spon-pied__compte { flex-wrap: wrap; min-width: 0; max-width: 100%; row-gap: .3rem; }
@media (max-width: 640px) {
  body.picks.spon .spon-pied__compte { font-size: .8rem; gap: .55rem; }
  body.picks.spon .spon-pied__compte i { width: 16px; }
  /* Les liens TikTok et Instagram faisaient 18 px de haut : trop petits pour un pouce. */
  body.picks.spon .spon-pied__reseaux a { display: inline-block; padding: .55rem 0; }
}
/* 2. La pastille Shadow Coins est posee en bas a droite, en position fixe :
      elle recouvrait la mention Partenaire Amazon en fin de page, qui doit
      rester lisible. Le pied de page lui laisse la place. */
@media (max-width: 760px) {
  body.picks .picks-footer { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.picks .coins-hud { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 8px 14px; }
  body.picks .coins-popup { right: 14px; left: 14px; max-width: none; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}
/* 3. Le rappel "Tu lisais" etait pose a 80 px du haut, sous une nav qui en
      mesure 124 sur telephone, et au plan inferieur : il restait invisible,
      sa croix de fermeture faisait 9 px. Il se pose sous la nav, quelle que
      soit sa hauteur. */
body.picks .last-visited { top: calc(var(--as-nav-h, 72px) + 10px); max-width: calc(100vw - 28px); }
body.picks .last-visited > span:first-child { white-space: nowrap; flex: none; }
body.picks .last-visited a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
body.picks .last-visited .dismiss { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin: -8px -10px -8px 0; }
/* Sur telephone il descend en bas, a gauche de la pastille Shadow Coins : fixe
   en haut, il restait colle sur le contenu pendant toute la lecture. */
@media (max-width: 760px) { body.picks .last-visited { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 14px; right: 108px; padding: 9px 14px; justify-content: space-between; } }

/* CARROUSEL DES INCONTOURNABLES (telephone seulement, decision de Steeve du
   2026-10-09). La piste est rendue par sponCarrousel() dans picks.js. La carte
   suivante depasse de 16 % a droite : c'est ce bord coupe qui fait comprendre
   qu'on peut glisser, avant meme le libelle. Au-dela de 700 px, la grille reste
   et les controles sont caches. */
body.picks.spon .spon-carrousel__ctl { display: none; }
@media (max-width: 699px) {
  body.picks.spon .spon-carrousel { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; }
  body.picks.spon .spon-carrousel::-webkit-scrollbar { display: none; }
  body.picks.spon .spon-carrousel > .spon-planche { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; border-right: var(--spon-filet); border-bottom: 0; }
  body.picks.spon .spon-carrousel > .spon-planche:last-child { border-right: 0; }
  body.picks.spon .spon-carrousel--amorce > .spon-planche { animation: spon-amorce 1.2s cubic-bezier(.16,1,.3,1); }
  @keyframes spon-amorce { 0%, 100% { transform: translateX(0); } 38% { transform: translateX(-26%); } 62% { transform: translateX(-26%); } }

  body.picks.spon .spon-carrousel__ctl { position: relative; display: flex; align-items: center; gap: .6rem; max-width: 100%; overflow: hidden; padding: .8rem 1.1rem .95rem; border-top: var(--spon-filet); border-bottom: var(--spon-filet); background: var(--spon-papier); font-family: var(--spon-etiquette); text-transform: uppercase; }
  body.picks.spon .spon-carrousel__glisse { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .72rem; letter-spacing: .22em; color: var(--spon-encre); transition: opacity .4s ease; }
  body.picks.spon .spon-carrousel__glisse i { font-style: normal; display: inline-block; color: var(--spon-or-fonce); animation: spon-glisse 1.4s ease-in-out infinite; }
  @keyframes spon-glisse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
  body.picks.spon .spon-carrousel__ctl.a-glisse .spon-carrousel__glisse { opacity: .45; }
  body.picks.spon .spon-carrousel__ctl.a-glisse .spon-carrousel__glisse i { animation: none; }
  body.picks.spon .spon-carrousel__points { display: flex; align-items: center; gap: 0; margin-left: auto; min-width: 0; }
  body.picks.spon .spon-carrousel__points button { width: 18px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
  body.picks.spon .spon-carrousel__points button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); border: 1.5px solid var(--spon-encre); background: transparent; transition: background .2s ease; }
  body.picks.spon .spon-carrousel__points button[aria-current="true"]::before { width: 14px; background: var(--spon-encre); }
  /* Le compteur reste pour les lecteurs d'ecran ; a l'oeil, les points suffisent
     et la barre ne tenait pas dans 375 px avec lui. */
  body.picks.spon .spon-carrousel__compte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.picks.spon .spon-carrousel__pause { width: 36px; height: 36px; flex: none; border: var(--spon-filet); background: var(--spon-papier); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
  body.picks.spon .spon-carrousel__pause span { width: 10px; height: 12px; background: linear-gradient(to right, var(--spon-encre) 0 3px, transparent 3px 7px, var(--spon-encre) 7px 10px); }
  body.picks.spon .spon-carrousel__pause.est-en-pause span { width: 0; height: 0; background: none; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--spon-encre); }
  body.picks.spon .spon-carrousel__pause:focus-visible, body.picks.spon .spon-carrousel__points button:focus-visible { outline: 2px solid var(--spon-or-fonce); outline-offset: 2px; }
  /* La barre d'or sous les controles se remplit pendant que la fiche est a
     l'ecran : on voit que la piste va avancer seule. */
  body.picks.spon .spon-carrousel__barre { position: absolute; left: 0; right: 0; bottom: -1.5px; height: 3px; overflow: hidden; }
  body.picks.spon .spon-carrousel__barre b { display: block; height: 100%; background: var(--spon-or); transform: scaleX(0); transform-origin: left center; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  body.picks.spon .spon-carrousel { scroll-behavior: auto; }
  body.picks.spon .spon-carrousel__glisse i, body.picks.spon .spon-carrousel--amorce > .spon-planche { animation: none; }
}