/* ===== POLICES AUTO-HÉBERGÉES (variables, latin), plus d'appel Google Fonts ===== */
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/hanken-grotesk.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500 900;font-display:swap;src:url('../fonts/archivo.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/jetbrains-mono.woff2') format('woff2')}

/* =========================================================================
   PARIS DES LIONS, design system (extrait de la maquette Claude Design)
   Tokens en haut → thémable par site via --accent / --soft (voir layout.php)
   ========================================================================= */

:root{
  --bg:#f4f6fb; --surface:#fff; --surface-2:#f3f6fc;
  --ink:#0e1320; --muted:#5b6478; --faint:#79839a; --border:#e7eaf2;
  --accent:#0e7a44; --soft:#e3f3ea;
  --pos:#0a7d3c; --neg:#c0392b; --star:#f5a623;
  --radius:14px;
  --shadow:0 1px 2px rgba(14,19,32,.04),0 10px 26px rgba(14,19,32,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;background:var(--bg);color:var(--ink);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

.mono{font-family:'JetBrains Mono',monospace}
.archivo{font-family:'Archivo',sans-serif}
.stars{letter-spacing:1px;color:var(--star)}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.container-narrow{max-width:1120px;margin:0 auto;padding:0 24px}
.container-faq{max-width:760px;margin:0 auto;padding:0 24px}

/* ---------- bandeau + header ---------- */
.topstrip{height:5px;background:var(--accent)}
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;gap:26px;height:60px}
.logo{display:flex;align-items:center;gap:8px;font-family:'Archivo';font-weight:900;font-size:19px;letter-spacing:-.01em}
.logo .mark{width:27px;height:27px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.logo img{height:34px;width:auto;display:block}
.main-nav{display:flex;gap:6px;font:700 11.5px 'Archivo';letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.main-nav .has-sub{position:relative}
.main-nav .has-sub > a{display:inline-flex;align-items:center;gap:5px;padding:20px 10px;color:var(--muted)}
.main-nav .has-sub > a:hover,.main-nav .has-sub:hover > a{color:var(--accent)}
.main-nav .caret{font-size:8px;opacity:.7}
.main-nav .submenu{position:absolute;top:100%;left:0;min-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.main-nav .has-sub:hover .submenu{display:flex}
.main-nav .submenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;text-transform:none;font:700 13px 'Archivo';color:var(--ink);letter-spacing:0}
.main-nav .submenu a:hover{background:var(--soft);color:var(--accent)}
.main-nav .submenu .sm-ico{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 18px}
/* ===== BLOCS DATA (design validé 06/07) : match semaine (mw-), cotes marque (bo-), prochains matchs (nx-) ===== */
.verif{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-top:22px}
.verif .hd{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.verif .ti{font:800 15px 'Archivo';margin:0}
.verif .when{font:600 10.5px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:4px 10px;border-radius:20px}
.verif ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.verif li{font:500 13.5px 'Hanken Grotesk';color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.verif li .ok{color:var(--pos);font-weight:800;flex:0 0 auto}
.qr-box{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 20px;margin-top:14px}
.qr-box img{width:132px;height:132px;flex:0 0 132px;border:1px solid var(--border);border-radius:10px}
.qr-box .t{font:800 15px 'Archivo';margin:0 0 6px}
.qr-box .d{font:500 13.5px 'Hanken Grotesk';color:var(--muted);margin:0}
@media(max-width:768px){.qr-box{display:none}}
.app-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}
.app-facts .cell{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;text-align:center}
.app-facts .l{display:block;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.app-facts .v{display:block;font:800 14px 'Hanken Grotesk';color:var(--ink);margin-top:5px}
.calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-top:14px}
.calc-in{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 16px}
.calc-in label{font:700 13px 'Hanken Grotesk';color:var(--muted)}
.calc-in input{font:800 18px 'Hanken Grotesk';color:var(--ink);width:150px;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface-2)}
.calc-in input:focus{outline:2px solid var(--accent);border-color:var(--accent)}
.calc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.calc-cell{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;text-align:center}
.calc-cell .l{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:block}
.calc-cell .v{font:800 19px 'Archivo';color:var(--ink);margin-top:10px;display:block;font-variant-numeric:tabular-nums}
.calc-cell.hot{background:var(--soft);border-color:var(--accent)}
.calc-cell.hot .v{color:var(--accent)}
.calc-note{font:500 12px 'Hanken Grotesk';color:var(--faint);margin:12px 0 0}
.crest{border-radius:50%;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:10px;color:var(--muted);flex-shrink:0;overflow:hidden;line-height:1}
.crest img{width:100%;height:100%;object-fit:contain}
.btn-bet{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:#fff;font:700 13px 'Hanken Grotesk',sans-serif;padding:9px 14px;border-radius:10px;text-decoration:none;white-space:nowrap;border:none;cursor:pointer}
.btn-bet:hover{filter:brightness(1.08)}
.ed a.btn-bet,.ed a.btn-bet:hover{color:#fff;font-weight:700}
.mw-card{padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.mw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mw-chip{font:600 10.5px/1 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:6px 10px;border-radius:8px}
.mw-when{font:600 12.5px 'Hanken Grotesk',sans-serif;color:var(--muted)}
.mw-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:6px 0 20px;margin:0}
.mw-team{display:flex;align-items:center;gap:11px;min-width:0}
.mw-team.away{flex-direction:row-reverse;text-align:right}
.mw-team .crest{width:40px;height:40px}
.mw-team b{font:800 17px/1.15 'Archivo',sans-serif;letter-spacing:-.01em}
.mw-sep{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:var(--faint);background:var(--surface-2);border:1px solid var(--border);padding:5px 9px;border-radius:8px}
.mw-tbl{width:100%;border-collapse:collapse;min-width:440px}
.mw-tbl thead th{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);padding:10px 8px;text-align:center;border-bottom:1px solid var(--border)}
.mw-tbl thead th.book{text-align:left;padding-left:14px}
.mw-tbl tbody td{padding:12px 8px;border-bottom:1px solid var(--border);text-align:center}
.mw-tbl tbody tr:last-child td{border-bottom:none}
.mw-book{display:flex;align-items:center;gap:10px;text-align:left;padding-left:14px !important}
.mw-book .crest{width:30px;height:30px;border-radius:8px}
.mw-book-txt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;min-width:0}
.mw-book-name{font:700 14px 'Hanken Grotesk',sans-serif}
.mw-partner{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:3px 6px;border-radius:5px;margin-top:3px;display:inline-block}
.mw-odd{position:relative;font:600 15px 'Hanken Grotesk',sans-serif;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;min-width:58px;height:32px;padding:0 8px;border-radius:8px;font-variant-numeric:tabular-nums}
.mw-odd.best{font-weight:800;color:var(--accent);background:var(--soft)}
.mw-odd .mark{position:static;transform:none;margin-right:4px;font-size:9px}
.mw-cta-cell{width:1%;white-space:nowrap}
.mw-ref{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.mw-foot{font:500 11.5px 'Hanken Grotesk',sans-serif;color:var(--faint);margin:14px 0 0;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mw-legend{display:inline-flex;align-items:center;gap:5px}
.mw-legend .mw-odd{min-width:0;padding:2px 7px;font-size:12px;height:auto}
.mw-legend .mw-odd .mark{position:static;transform:none;margin-right:2px}
.bo-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.bo-head .crest{width:34px;height:34px;border-radius:9px}
.bo-title{font:800 18px 'Archivo',sans-serif;letter-spacing:-.01em;margin:0}
.bo-list{display:flex;flex-direction:column;gap:10px}
.bo-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.bo-match{min-width:0}
.bo-teams{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bo-teams .crest{width:26px;height:26px}
.bo-teams b{font:700 14.5px 'Hanken Grotesk',sans-serif}
.bo-teams .x{font:600 11px 'JetBrains Mono',monospace;color:var(--faint)}
.bo-meta{font:500 11.5px 'Hanken Grotesk',sans-serif;color:var(--faint);margin-top:6px}
.bo-odds{display:flex;gap:7px}
.bo-o{text-align:center;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:6px 10px;min-width:56px}
.bo-o .lab{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);display:block}
.bo-o .val{font:700 15px 'Hanken Grotesk',sans-serif;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.bo-o.best{background:var(--soft);border-color:var(--accent)}
.bo-o.best .val{color:var(--accent);font-weight:800}
.bo-o.best .lab{color:var(--accent)}
.bo-summary{font:500 13px/1.6 'Hanken Grotesk',sans-serif;color:var(--muted);margin:14px 0 0;padding:12px 14px;background:var(--surface-2);border-radius:10px}
.bo-summary b{color:var(--ink);font-weight:800}
.nx-tbl{width:100%;border-collapse:collapse;min-width:460px}
.nx-tbl thead th{font:600 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);background:var(--surface-2);padding:10px 10px;text-align:center;border-bottom:1px solid var(--border)}
.nx-tbl thead th.match{text-align:left}
.nx-tbl tbody td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.nx-match{text-align:left}
.nx-stack{display:flex;flex-direction:column;gap:6px}
.nx-t{display:flex;align-items:center;gap:8px}
.nx-t .crest{width:22px;height:22px}
.nx-t b{font:700 13.5px 'Hanken Grotesk',sans-serif}
.nx-teams{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nx-teams .crest{width:22px;height:22px}
.nx-teams b{font:700 13.5px 'Hanken Grotesk',sans-serif}
.nx-teams .x{font:600 10px 'JetBrains Mono',monospace;color:var(--faint)}
.nx-date{font:500 11px 'Hanken Grotesk',sans-serif;color:var(--faint);margin-top:4px}
.nx-o{position:relative;font:600 14px 'Hanken Grotesk',sans-serif;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:30px;padding:0 8px;border-radius:7px;font-variant-numeric:tabular-nums}
.nx-o.best{font-weight:800;color:var(--accent);background:var(--soft)}
.nx-o .mark{position:static;transform:none;margin-right:4px;font-size:9px}
.nx-cta{width:1%;white-space:nowrap}
.nx-read{font:500 13px/1.65 'Hanken Grotesk',sans-serif;color:var(--muted);margin:16px 0 0}
.nx-read .eyebrow{margin-bottom:6px;display:block}
@media (max-width:560px){.bo-row{grid-template-columns:1fr}.bo-odds{margin-top:12px}.bo-o{flex:1}.mw-team b{font-size:15px}}
.sm-ico{width:18px;height:18px;object-fit:contain;border-radius:4px;flex:0 0 18px}
.sm-ico-brand{width:58px;height:22px;object-fit:contain;object-position:left center;flex:0 0 58px;border-radius:0}
.sm-mono{width:26px;height:26px;border-radius:7px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font:900 10px 'Archivo';flex-shrink:0}
.header-right{margin-left:auto;display:flex;align-items:center;gap:11px}
.badge18{width:30px;height:30px;border-radius:50%;border:2px solid var(--neg);color:var(--neg);display:grid;place-items:center;font:800 10px 'JetBrains Mono',monospace}
.header-note{font:700 10px/1.2 'JetBrains Mono',monospace;color:var(--faint);text-align:right}

/* ---------- titres / sections ---------- */
section{scroll-margin-top:74px}
.eyebrow{font:700 11px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.h1{font-family:'Archivo';font-weight:900;font-size:clamp(32px,5vw,54px);line-height:1;letter-spacing:-.02em;margin:12px 0 0;text-transform:uppercase}
.h1 .hl{color:var(--accent)}
.h2{font-family:'Archivo';font-weight:900;font-size:clamp(24px,3.4vw,38px);letter-spacing:-.01em;margin:8px 0 22px;text-transform:uppercase}
.h2-sm{font-family:'Archivo';font-weight:900;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin:0;text-transform:uppercase}
.lead{font-size:17px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.lead strong{color:var(--ink)}
.meta-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:13.5px;color:var(--faint)}
.meta-line strong{color:var(--muted);font-weight:700}
.dot-pos{width:7px;height:7px;border-radius:50%;background:var(--pos);display:inline-block;margin-right:6px}
.link-accent{font:700 12px 'Archivo';text-transform:uppercase;letter-spacing:.04em;color:var(--accent)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:'Archivo';font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-radius:10px;cursor:pointer;border:none;text-align:center;white-space:nowrap;font-size:13px;padding:12px 22px}
/* 09/09 : le padding et la taille sont désormais des VALEURS PAR DÉFAUT de .btn, plus
   seulement des propriétés de .btn-lg/-md/-sm. Sept boutons du site portaient .btn sans
   classe de taille et se retrouvaient donc sans padding du tout : 19 px de haut, texte
   collé aux bords, impossibles à viser au doigt. Le plus coûteux était le CTA d'affiliation
   de partials/cta-enlace.php, répété deux fois par page marque. Les variantes de taille
   redéfinissent ces deux propriétés, donc aucun bouton déjà correct ne change. */
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 14px rgba(14,122,68,.25)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-lg{font-size:14px;padding:13px 26px}
.btn-md{font-size:13px;padding:12px 22px}
.btn-sm{font-size:12px;padding:11px 18px}
.btn-code{font:700 10px 'JetBrains Mono',monospace;color:var(--accent);background:var(--soft);border:1px dashed var(--accent);border-radius:8px;padding:7px 11px;text-transform:none}
.btn-code:hover{background:#d3ecde}

/* ---------- classement (home) ---------- */
.rank-list{display:flex;flex-direction:column;gap:10px}
.rank-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:stretch;overflow:hidden}
.rank-row[data-top="1"]{box-shadow:0 0 0 2px var(--accent),0 18px 40px rgba(14,122,68,.16);border-color:transparent}
.rank-id{display:flex;align-items:center;gap:13px;padding:13px 16px;width:360px;flex-shrink:0}
.rank-num{font-family:'Archivo';font-weight:900;font-size:28px;font-style:italic;min-width:34px;text-align:center;flex-shrink:0;color:#c2c9d6;white-space:nowrap;letter-spacing:-.03em}
.rank-logo{width:96px;height:50px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:15px;flex-shrink:0;overflow:hidden}
.rank-logo img{width:100%;height:100%;object-fit:contain}
.rank-name{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rank-name .nm{font-family:'Archivo';font-weight:800;font-size:17px}
.chip{font:800 8px 'Archivo';letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--soft);padding:3px 7px;border-radius:5px}
.chip-local{color:#8a5a00;background:#fdf0d6}
.rank-note{font:500 11.5px 'Hanken Grotesk';margin-top:4px}
.rank-note .faint{color:var(--faint)}
.rank-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center;padding:13px 16px;border-left:1px solid var(--border)}
.rank-mid .li{display:flex;align-items:center;gap:8px;font:600 13px 'Hanken Grotesk';color:var(--ink)}
.rank-mid .li.ok{color:var(--pos)}
.rank-mid .li .plus{color:var(--accent);font-weight:800}
.rank-bonus{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;border-left:1px solid var(--border);background:var(--surface-2);width:300px;flex-shrink:0}
.rank-bonus .amt{text-align:left;flex:1;min-width:0}
.rank-bonus .amt .big{font-family:'Archivo';font-weight:900;font-size:23px;line-height:.95;color:var(--ink)}
.rank-bonus .amt .lbl{font:700 11px 'Hanken Grotesk';color:var(--muted)}
.cta-col{display:flex;flex-direction:column;gap:7px;flex-shrink:0;width:120px}
.cta-col .btn,.cta-col .btn-code{width:100%}
/* ---- mise en avant : trio brands recommandés ---- */
.reco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.reco-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px}
.reco-card.feat{box-shadow:0 0 0 2px var(--accent),0 18px 40px rgba(14,122,68,.16);border-color:transparent}
.reco-top{display:flex;align-items:center;gap:11px;position:relative}
.reco-logo{width:120px;height:54px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font:900 16px 'Archivo';flex-shrink:0;overflow:hidden}
.reco-logo img{width:100%;height:100%;object-fit:contain}
.rank-logo.haslogo,.reco-logo.haslogo{background:#fff;border:1px solid var(--border);padding:6px}
.reco-name{font:900 19px 'Archivo';letter-spacing:-.01em}
.reco-badge{position:absolute;top:-4px;right:0;font:800 8px 'Archivo';letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:3px 7px;border-radius:5px}
.reco-bonus{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border-radius:10px;padding:10px 12px}
.reco-bonus .big{font:900 22px 'Archivo';color:var(--ink);line-height:1}
.reco-bonus .lbl{font:700 11.5px 'Hanken Grotesk';color:var(--muted)}
.reco-link{text-align:center;font:700 12px 'Archivo';text-transform:uppercase;letter-spacing:.03em;color:var(--accent)}
.reco-disclaimer{display:flex;align-items:center;gap:8px;font:500 12px 'Hanken Grotesk';color:var(--faint);margin:12px 0 0}
.b18mini{width:30px;height:20px;border:1.5px solid var(--neg);color:var(--neg);border-radius:5px;display:grid;place-items:center;font:800 9px 'JetBrains Mono',monospace;flex-shrink:0}
@media(max-width:760px){.reco-grid{grid-template-columns:1fr}}

.risk-note{font:500 12px 'Hanken Grotesk';color:var(--faint);margin-top:14px;display:flex;align-items:center;gap:8px}
.risk-note .b18{width:32px;height:21px;border:1.5px solid var(--neg);color:var(--neg);border-radius:5px;display:grid;place-items:center;font:800 9px 'JetBrains Mono',monospace;flex-shrink:0}

/* ---------- fiches analyses (home) ---------- */
.fiche-list{display:flex;flex-direction:column;gap:22px}
.fiche{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.fiche[data-top="1"]{box-shadow:0 0 0 2px var(--accent),0 18px 44px rgba(14,122,68,.16);border-color:transparent}
.fiche-head{display:flex;align-items:center;gap:18px;padding:18px 24px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.fiche[data-top="1"] .fiche-head{background:var(--soft)}
.fiche-logo{width:158px;height:66px;border:1.5px dashed var(--border);border-radius:12px;display:grid;place-items:center;color:var(--faint);font:600 12px 'JetBrains Mono',monospace;flex-shrink:0;background:#fff;overflow:hidden}
.fiche-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.fiche-name{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fiche-name .nm{font-family:'Archivo';font-weight:900;font-size:26px;letter-spacing:-.01em}
.fiche-name h3{margin:0}
.tag-rank{font:800 10px 'Archivo';letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent);padding:4px 8px;border-radius:6px}
.fiche-angle{font-family:'Archivo';font-weight:800;font-size:15px;color:var(--accent);margin-top:3px}
.fiche-score{margin-left:auto;text-align:right;flex-shrink:0}
.fiche-score .row{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.fiche-score .n{font-family:'Archivo';font-weight:900;font-size:22px}
.fiche-score .x{font-size:12px;color:var(--faint)}
.verified{font:700 10px 'JetBrains Mono',monospace;color:var(--pos);margin-top:5px}
.fiche-grid{display:grid;grid-template-columns:1fr 320px;gap:26px;padding:22px 24px;align-items:start}
.fiche-desc{font-size:15.5px;line-height:1.62;color:var(--muted);margin:0 0 18px}
.bars{display:flex;flex-direction:column;gap:11px;margin-bottom:20px}
.bar{display:flex;align-items:center;gap:13px}
.bar .lbl{width:96px;flex-shrink:0;font:600 13px 'Hanken Grotesk';color:var(--ink)}
.bar .track{flex:1;height:8px;background:var(--soft);border-radius:99px;overflow:hidden}
.bar .fill{display:block;height:100%;background:var(--accent);border-radius:99px}
.bar .val{font-family:'Archivo';font-weight:800;font-size:14px;width:34px;text-align:right}
.bar .val.hot{color:var(--accent)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--border);padding-top:18px}
.proscons-title{font:800 11px 'JetBrains Mono',monospace;letter-spacing:.05em;text-transform:uppercase;margin-bottom:9px}
.proscons-title.pos{color:var(--pos)}
.proscons-title.neg{color:var(--neg)}
.proscons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.proscons li{display:flex;gap:9px;font-size:14px}
.proscons li .ic{font-weight:900;flex-shrink:0}
.proscons.pos li{color:var(--ink)}.proscons.pos .ic{color:var(--pos)}
.proscons.neg li{color:var(--muted)}.proscons.neg .ic{color:var(--neg)}
.verdict-quote{margin-top:18px;border-left:3px solid var(--accent);padding:2px 0 2px 14px}
.verdict-quote .who{font:800 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.verdict-quote p{margin:0;font-size:15px;line-height:1.5;color:var(--ink);font-style:italic}
.shots{display:flex;flex-direction:column;gap:12px}
.shot{aspect-ratio:16/11;background:repeating-linear-gradient(135deg,var(--surface-2),var(--surface-2) 11px,var(--border) 11px,var(--border) 12px);border:1px solid var(--border);border-radius:12px;display:grid;place-items:center;color:var(--faint);font:600 10.5px 'JetBrains Mono',monospace;text-align:center;padding:8px;overflow:hidden}
.shot:has(img){padding:0;background:var(--surface-2)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;border-radius:11px}
.bonusbar{margin:0 16px 16px;background:var(--ink);color:#fff;border-radius:14px;padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bonusbar .amt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bonusbar .amt .big{font-family:'Archivo';font-weight:900;font-size:26px;line-height:1}
.bonusbar .amt .code{font-size:13px;color:#aeb8d6}
.bonusbar .amt .code b{font-family:'JetBrains Mono',monospace;color:#9fe3bd}
.bonusbar .actions{display:flex;gap:10px;flex-shrink:0}
.fiche-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:0 24px 18px;font:700 12px 'Archivo';text-transform:uppercase;letter-spacing:.03em}
.fiche-links a{color:var(--accent);background:var(--soft);padding:7px 13px;border-radius:8px}
.fiche-links a:hover{background:#d3ecde}
.fiche-links .sep{color:var(--faint);font-weight:400}
.btn-ghost{display:flex;align-items:center;gap:7px;font:700 12px 'Hanken Grotesk';color:#fff;background:rgba(255,255,255,.08);border:1px dashed rgba(255,255,255,.4);border-radius:10px;padding:11px 16px;cursor:pointer}

/* ---------- carte auteurs ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.authors-card{padding:22px 24px}
.authors-eyebrow{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.authors-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.author{display:flex;gap:13px;align-items:center}
.avatar{width:54px;height:54px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:17px;flex-shrink:0}
.author .nm{font-family:'Archivo';font-weight:800;font-size:16px;border-bottom:2px solid var(--accent)}
.author .role{font-size:13px;color:var(--muted);margin-top:2px}
.author .bio{font-size:12px;color:var(--faint);margin-top:3px}
.authors-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:12.5px;color:var(--faint);display:flex;gap:16px;flex-wrap:wrap}
.authors-foot strong{color:var(--muted);font-weight:700}

/* ---------- comparatif (tables) ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface);margin-bottom:24px}
table.cmp{width:100%;border-collapse:collapse;font-size:14px}
table.cmp thead tr{background:var(--surface-2)}
table.cmp th{padding:13px 10px;font-family:'Archivo';font-weight:800;font-size:13px}
table.cmp th.lbl{text-align:left;padding:13px 18px;font:800 11px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.05em;color:var(--faint)}
table.cmp td{text-align:center;padding:12px 10px}
table.cmp td.lbl{text-align:left;padding:12px 18px;font-weight:600;color:var(--muted)}
table.cmp tbody tr{border-top:1px solid var(--border)}
.mk{font-weight:900;font-size:16px}
.mk.ok{color:var(--pos)}.mk.no{color:var(--neg)}
.note20{font-family:'Archivo';font-weight:900;color:var(--accent)}
.cell-hot{color:var(--accent)!important;font-weight:700}

/* ---------- méthodologie ---------- */
.methodo{background:var(--ink);color:#fff;border-radius:18px;padding:32px 28px}
.methodo .eyebrow{color:#9fe3bd}
.methodo h2{color:#fff}
.methodo p.intro{font-size:15.5px;line-height:1.6;color:#c2cbe6;margin:0 0 26px;max-width:64ch}
.methodo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.methodo-grid .step{border-top:2px solid var(--accent);padding-top:14px}
.methodo-grid .num{font-family:'Archivo';font-weight:900;font-size:28px;color:#9fe3bd;line-height:1}
.methodo-grid .ttl{font-family:'Archivo';font-weight:800;font-size:15px;margin:8px 0 6px}
.methodo-grid p{margin:0;font-size:13px;line-height:1.55;color:#aeb8d6}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:10px}
details.faq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
details.faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;font-family:'Archivo';font-weight:700;font-size:15.5px}
details.faq>summary::-webkit-details-marker{display:none}
details.faq .chev{transition:transform .2s;color:var(--accent);flex-shrink:0}
details.faq[open] .chev{transform:rotate(180deg)}
details.faq .body{padding:0 20px 18px;font-size:14.5px;line-height:1.62;color:var(--muted)}

/* ---------- footer ---------- */
.site-footer{margin-top:46px;background:var(--surface);border-top:1px solid var(--border)}
.warn-box{border:1.5px solid var(--neg);border-radius:var(--radius);padding:16px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.warn-box .b18{width:46px;height:30px;border:2px solid var(--neg);color:var(--neg);border-radius:6px;display:grid;place-items:center;font:800 13px 'JetBrains Mono',monospace;flex-shrink:0}
.warn-box .ttl{font-family:'Archivo';font-weight:900;font-size:14px;letter-spacing:.02em;color:var(--neg)}
.warn-box .txt{font-size:13px;color:var(--muted);margin-top:4px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.footer-grid .brand-row{display:flex;align-items:center;gap:8px;font-family:'Archivo';font-weight:900;font-size:18px;margin-bottom:10px}
.footer-grid p{font-size:13px;line-height:1.6;color:var(--muted);margin:0;max-width:42ch}
.footer-badges{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.fb{font:700 11px 'JetBrains Mono',monospace;border:1px solid var(--border);border-radius:7px;padding:6px 10px;color:var(--muted)}
.fb.neg{border-color:var(--neg);color:var(--neg)}
.footer-col .ttl{font:700 10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:12px}
.footer-col .links{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--muted)}
.footer-col .links a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);margin-top:24px;padding-top:18px;font-size:12.5px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- contenu éditorial (sections SEO Hn) ---------- */
.ed h2{font-family:'Archivo';font-weight:900;font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;text-transform:uppercase;margin:0 0 6px}
.ed > p.sub{font-size:15.5px;color:var(--muted);margin:0 0 18px}
.ed h3{font-family:'Archivo';font-weight:800;font-size:18px;margin:24px 0 8px;color:var(--ink)}
.ed p{font-size:15.5px;line-height:1.7;color:var(--muted);margin:0 0 14px}
.ed p strong{color:var(--ink);font-weight:700}
.ed ul{margin:0 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.ed ul li{position:relative;padding-left:24px;font-size:15px;line-height:1.6;color:var(--muted)}
.ed ul li:before{content:'✓';position:absolute;left:0;top:0;color:var(--accent);font-weight:900}
.ed a{color:var(--accent);font-weight:700}
.ed a.btn-primary,.ed a.btn-primary:hover{color:#fff;font-weight:800}
.ed .crit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:6px 0 8px}
.ed .crit-grid .ed-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px}
.ed .crit-grid .ed-card h3{margin:0 0 6px}
.ed .crit-grid .ed-card p{margin:0;font-size:14px}
.ed-cta{background:var(--soft);border-radius:var(--radius);padding:18px 22px;margin:8px 0 14px;font-size:15px;line-height:1.6;color:var(--ink)}
.ed-cta strong{color:var(--accent)}
@media(max-width:760px){.ed .crit-grid{grid-template-columns:1fr}}

/* ============================ PAGE AVIS ============================ */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);padding:18px 0 0;flex-wrap:wrap}
.breadcrumb .cur{color:var(--ink);font-weight:700}
.breadcrumb .mid{color:var(--muted);font-weight:600}
.tabs{display:flex;gap:8px;margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;width:fit-content;box-shadow:var(--shadow)}
.tabs a,.tabs span{font:800 12px 'Archivo';text-transform:uppercase;letter-spacing:.03em;padding:9px 16px;border-radius:8px;color:var(--muted)}
.tabs .active{color:#fff;background:var(--accent)}
.hcard{display:flex;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:0 0 0 2px var(--accent),0 18px 44px rgba(14,122,68,.14);padding:22px 24px;margin-top:22px}
.hcard .logo-box{width:120px;height:80px;border:1.5px dashed var(--border);border-radius:12px;display:grid;place-items:center;color:var(--faint);font:600 12px 'JetBrains Mono',monospace;flex-shrink:0;background:#fff;overflow:hidden}
.hcard .logo-box img{width:100%;height:100%;object-fit:contain;padding:6px}
.hcard .mid{flex:1;min-width:0}
.hcard .nm{font-family:'Archivo';font-weight:900;font-size:26px}
.hcard .score{display:flex;align-items:center;gap:8px;margin-top:6px}
.hcard .score .n{font-family:'Archivo';font-weight:900;font-size:20px}
.hcard .facts{font:700 12.5px 'Hanken Grotesk';color:var(--muted);margin-top:6px}
.hcard .cta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;flex-shrink:0}
.hcard .cta .bonus{text-align:right}
.hcard .cta .bonus .big{font-family:'Archivo';font-weight:900;font-size:24px;line-height:1;color:var(--ink)}
.hcard .cta .bonus .lbl{font:700 11px 'Hanken Grotesk';color:var(--muted)}
.notebox-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:22px}
.notebox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.notebox .lbl{font:800 11px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.notebox .big{display:flex;align-items:flex-end;gap:8px;margin-bottom:16px}
.notebox .big .n{font-family:'Archivo';font-weight:900;font-size:40px;line-height:.8;color:var(--accent)}
.notebox .big .x{font-size:14px;color:var(--faint);font-weight:700;margin-bottom:4px}
.notebox .bar .lbl-inline{width:150px;flex-shrink:0;font:600 13px 'Hanken Grotesk';color:var(--ink);margin-bottom:0;text-transform:none;letter-spacing:normal}
.avis-brief{background:var(--soft);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column}
.avis-brief .lbl{font:800 10px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.avis-brief p{margin:0;font-size:16px;line-height:1.55;color:var(--ink);font-style:italic;flex:1}
.avis-brief .sig{display:flex;align-items:center;gap:10px;margin-top:16px}
.avis-brief .sig .av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:13px}
.toc{border:1px dashed var(--border);border-radius:var(--radius);padding:16px 18px;margin-top:22px}
.toc .lbl{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:11px}
.toc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px 18px}
.toc-grid a{display:flex;align-items:center;gap:8px;font:600 13.5px 'Hanken Grotesk';color:var(--muted)}
.toc-grid a .num{font:700 11px 'JetBrains Mono',monospace;color:var(--accent)}
.author-strip{padding:18px 20px;margin-top:22px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.author-strip .av{width:52px;height:52px;border-radius:50%;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:16px;flex-shrink:0}
.author-strip .mid{flex:1;min-width:200px}
.author-strip .nm{font-family:'Archivo';font-weight:800;font-size:16px;border-bottom:2px solid var(--accent)}
.author-strip .role{font-size:13px;color:var(--muted);margin-top:2px}
.author-strip .when{font-size:12.5px;color:var(--faint);text-align:right}
.pc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.pc-card{padding:20px 22px}
.shots-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:18px}
.crit-list{display:flex;flex-direction:column;gap:16px}
.crit{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.crit .body{flex:1;min-width:0;padding:20px 22px}
.crit .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.crit h3{font-family:'Archivo';font-weight:900;font-size:18px;margin:0}
.crit .pill{font:800 11px 'JetBrains Mono',monospace;color:var(--accent);background:var(--soft);padding:4px 9px;border-radius:999px}
.crit p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:10px 0 0}
.crit .quote{margin-top:12px;border-left:3px solid var(--accent);padding-left:12px;font-size:14px;line-height:1.5;color:var(--ink);font-style:italic}
.crit .quote .by{font-style:normal;font-weight:700;color:var(--accent)}
.crit aside{width:150px;flex-shrink:0;border-left:1px solid var(--border);background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:18px}
.crit aside .n{font-family:'Archivo';font-weight:900;font-size:34px;color:var(--accent);line-height:.8}
.crit aside .x{font:700 10px 'JetBrains Mono',monospace;color:var(--faint)}
.profils{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.profil{padding:18px 20px}
.profil .tag{font:800 12px 'JetBrains Mono',monospace;text-transform:uppercase;margin-bottom:8px}
.profil .tag.ok{color:var(--pos)}.profil .tag.no{color:var(--neg)}
.profil .ttl{font-family:'Archivo';font-weight:800;font-size:15px;margin-bottom:4px}
.profil .desc{font-size:13.5px;line-height:1.5;color:var(--muted)}
.verdict-final{margin-top:38px;background:var(--ink);color:#fff;border-radius:18px;padding:30px 28px}
.verdict-final .eyebrow{color:#9fe3bd}
.verdict-final .big{display:flex;align-items:flex-end;gap:12px;margin:10px 0 14px}
.verdict-final .big .n{font-family:'Archivo';font-weight:900;font-size:54px;line-height:.8}
.verdict-final .big .x{font-size:16px;color:#aeb8d6;font-weight:700;margin-bottom:7px}
.verdict-final p{font-size:16px;line-height:1.6;color:#c2cbe6;margin:0 0 20px;max-width:70ch}
.section-mt{margin-top:38px}
.disclosure{font-size:12.5px;line-height:1.6;color:var(--faint);margin:0}
.disclosure strong{color:var(--muted)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .main-nav{display:none}
  .logo img{height:28px;width:auto}
  .rank-row{flex-direction:column;align-items:stretch}
  .rank-id,.rank-bonus{width:auto}
  .rank-mid,.rank-bonus{border-left:none;border-top:1px solid var(--border)}
  .cta-col{flex-direction:row;width:auto;flex:1}
  .rank-bonus{justify-content:space-between}
  .fiche-grid{grid-template-columns:1fr}
  .shots{flex-direction:row}
  .cols2{grid-template-columns:1fr}
  .authors-grid{grid-template-columns:1fr}
  .methodo-grid{grid-template-columns:1fr 1fr}
  .notebox-grid{grid-template-columns:1fr}
  .pc-grid{grid-template-columns:1fr}
  .shots-3{grid-template-columns:1fr 1fr}
  .crit{flex-direction:column}
  .crit aside{width:auto;border-left:none;border-top:1px solid var(--border);flex-direction:row;gap:10px}
  .profils{grid-template-columns:1fr}
  .toc-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .hcard{flex-direction:column;align-items:stretch}
  .hcard .cta{align-items:stretch;text-align:left}
}
@media(max-width:560px){
  .shots-3{grid-template-columns:1fr}
  .methodo-grid{grid-template-columns:1fr}
  .toc-grid{grid-template-columns:1fr}
}
/* ---------- avis lecteurs (rv-) ---------- */
.rv-wrap{margin-top:26px}
.rv-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rv-avg{font-weight:800;font-size:15px;color:var(--ink)}
.rv-avg b{font-size:26px;line-height:1}
.rv-count{color:var(--muted);font-size:14px}
.rv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rv-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.rv-meta{display:flex;align-items:center;gap:10px}
.rv-ava{width:36px;height:36px;font-size:15px;color:var(--accent);background:var(--soft);border-color:transparent}
.rv-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.rv-who b{font-size:14.5px;color:var(--ink)}
.rv-when{font-size:12.5px;color:var(--faint)}
.rv-note{margin-left:auto;font-size:13px;flex-shrink:0}
.ed .rv-txt,.rv-txt{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.rv-form-box{margin-top:14px;background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);padding:18px}
.rv-form-ttl{font-weight:800;font-size:15px;margin-bottom:12px;color:var(--ink)}
.rv-form{display:flex;flex-direction:column;gap:10px}
.rv-form-row{display:flex;gap:10px;flex-wrap:wrap}
.rv-in{font:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.rv-form-row .rv-in{flex:1;min-width:150px}
textarea.rv-in{width:100%;resize:vertical}
.rv-in:focus{outline:2px solid var(--accent);outline-offset:1px}
.rv-form-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-mod{font-size:12.5px;color:var(--faint)}
.rv-thanks{margin:0;font-weight:600;color:var(--pos)}
@media(max-width:768px){
  .rv-grid{grid-template-columns:1fr}
}

/* ==== ui-variants 07/07 : blocs secondaires à variantes (methodo/ops/faq/reviews) ==== */
/* méthodo : timeline horizontale */
.mtl-h{display:flex;position:relative;margin-top:26px;min-width:640px}
.mtl-h::before{content:'';position:absolute;top:17px;left:8%;right:8%;height:3px;background:linear-gradient(90deg,var(--accent),var(--soft))}
.mtl-h .st{flex:1;text-align:center;padding:0 10px;position:relative}
.mtl-h .dot{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:grid;place-items:center;margin:0 auto 10px;position:relative;z-index:1;border:4px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.mtl-h b{display:block;font-size:14.5px;margin-bottom:3px}
.mtl-h span{font-size:13px;color:var(--muted)}
.methodo .mtl-h{overflow-x:auto}
/* méthodo : frise verticale */
.mtl-v{position:relative;padding-left:34px;max-width:620px;margin-top:18px}
.mtl-v::before{content:'';position:absolute;left:11px;top:8px;bottom:8px;width:3px;background:var(--soft)}
.mtl-v .st{position:relative;padding:0 0 22px}
.mtl-v .st::before{content:'';position:absolute;left:-30px;top:4px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--soft)}
.mtl-v b{font-size:15px}
.mtl-v p{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
/* méthodo : récit signé */
.mrecit{display:flex;gap:18px;background:var(--ink);color:#eef2f0;border-radius:14px;padding:24px;margin-top:18px}
.mrecit-ava{width:52px;height:52px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-weight:800;font-size:18px;flex-shrink:0;color:#fff}
.mrecit blockquote{margin:0;font-size:15.5px;line-height:1.6}
.mrecit-sig{margin-top:10px;font-size:13px;opacity:.75}
.mrecit-sig a{color:inherit;text-decoration:underline}
.mrecit-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.mrecit-badges span{font-size:12.5px;background:rgba(255,255,255,.12);border-radius:99px;padding:4px 12px}
@media(max-width:700px){.mrecit{flex-direction:column;gap:12px}}
/* ops : liste compacte */
.ops-list .row{display:flex;align-items:center;gap:14px;padding:11px 4px;border-bottom:1px solid var(--border);font-size:14px;flex-wrap:wrap}
.ops-list .nm{font-weight:700;min-width:90px}
.ops-list .nt strong{font-weight:800}
.ops-list .tag{font-size:12.5px;color:var(--muted)}
.ops-list .links{margin-left:auto;display:flex;gap:6px}
.ops-list .links a{font:700 11px 'Archivo';text-transform:uppercase;color:var(--accent);background:var(--soft);border-radius:7px;padding:5px 10px;white-space:nowrap}
/* ops : rangée scrollable */
.ops-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
.ops-scroll .c{min-width:190px;border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);flex-shrink:0}
.ops-scroll .nm{font-weight:800;font-size:15px}
.ops-scroll .st{color:var(--gold,#e8a413);font-weight:700;font-size:13px}
.ops-scroll .s{font-size:12.5px;color:var(--muted);display:block;margin:2px 0 10px}
.ops-scroll .chip{font:700 12px 'Archivo';color:var(--accent);background:var(--soft);border-radius:8px;padding:5px 10px;display:inline-block}
/* ops : mini-tableau */
.ops-table{border-collapse:collapse;width:100%;min-width:480px;font-size:13.5px}
.ops-table td{padding:10px;border-bottom:1px solid var(--border)}
.ops-table .nm{font-weight:700}
.ops-table .tag{color:var(--muted);font-size:12.5px}
.ops-table .go{color:var(--accent);font-weight:700;white-space:nowrap}
/* faq : liste ouverte */
.faq-open .qa{padding:13px 0;border-bottom:1px solid var(--border)}
.faq-open b{display:block;font-size:15px;margin-bottom:4px}
.faq-open p{margin:0;font-size:14px;color:var(--muted)}
/* faq : 2 colonnes */
.faq-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px 34px}
.faq-2col .qa{padding:12px 0;border-bottom:1px solid var(--border)}
.faq-2col b{display:block;font-size:14.5px;margin-bottom:4px}
.faq-2col p{margin:0;font-size:13.5px;color:var(--muted)}
/* faq : numérotée */
.faq-num .qa{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--border)}
.faq-num .num{font:800 15px 'JetBrains Mono',monospace;color:var(--accent);background:var(--soft);width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.faq-num b{display:block;font-size:14.5px;margin-bottom:3px}
.faq-num p{margin:0;font-size:13.5px;color:var(--muted)}
/* reviews : fil */
.rv-fil .r{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--border)}
.rv-fil .rv-txt{margin:5px 0 0}
.rv-fil .rv-who{font-size:13px;color:var(--faint);margin-left:8px}
/* reviews : moyenne + extraits */
.rv-avgbox{display:grid;gap:16px;margin-top:6px}
.rv-avgbox .bars{max-width:420px}
.rv-avgbox .b{display:grid;grid-template-columns:30px 1fr 34px;gap:10px;align-items:center;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.rv-avgbox .track{height:8px;background:var(--border);border-radius:99px;overflow:hidden}
.rv-avgbox .fill{height:100%;background:var(--gold,#e8a413);border-radius:99px}
.rv-avgbox .extraits{display:grid;gap:8px}
.rv-avgbox .extraits q{display:block;font-size:13.5px;background:var(--surface);border-left:3px solid var(--gold,#e8a413);border-radius:0 10px 10px 0;padding:10px 14px;color:var(--muted);quotes:'« ' ' »'}
/* reviews : bulles */
.rv-bulles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rv-bulles .c{background:var(--surface);border:1px solid var(--border);border-radius:14px 14px 14px 4px;padding:16px}
.rv-bulles .rv-txt{font-size:13.5px;margin:8px 0 10px}
.rv-bulles .rv-who{font-size:12.5px;color:var(--faint)}

/* CTA compact "top pick" — MOBILE ONLY, remonte le 1er CTA au-dessus du pli (17/07) */
.quickpick{display:none}
@media(max-width:600px){
  .quickpick{display:flex;width:100%;justify-content:center;align-items:center;gap:7px;margin:14px 0 2px;font-size:15px}
  .quickpick .qp-rank{background:rgba(255,255,255,.22);border-radius:6px;padding:1px 7px;font-size:12.5px;font-weight:800}
}

/* Fix mobile 17/07 : reco-grid 1 col (bat le style inline) + boutons longs qui débordent */
@media(max-width:600px){
  .reco-grid{grid-template-columns:1fr !important}
  .btn{white-space:normal}
}

/* Burger mobile ajouté 17/07 (base coldtoneharvest sans menu mobile) */
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;width:42px;height:38px;font-size:19px;line-height:1;color:var(--ink);cursor:pointer}
@media(max-width:900px){
  .site-header .inner{position:relative}
  .nav-toggle{display:grid;place-items:center}
  body.nav-open .main-nav{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:8px 18px 14px;gap:0;box-shadow:var(--shadow);z-index:60}
  body.nav-open .main-nav>a,body.nav-open .main-nav .has-sub>a{display:flex;justify-content:space-between;align-items:center;padding:12px 6px;border-bottom:1px solid var(--border);width:100%}
  body.nav-open .main-nav .has-sub{width:100%}
  body.nav-open .main-nav .submenu{position:static;display:none}
}

/* Fix mobile 17/07b : bonusbar (fiches Top10) — bouton + texte bonus qui débordaient */
@media(max-width:600px){
  .bonusbar{flex-direction:column;align-items:stretch;gap:12px}
  .bonusbar .actions{width:100%;flex-shrink:1}
  .bonusbar .actions>.btn{flex:1 1 auto;min-width:0}
  .bonusbar .amt .big{font-size:18px;line-height:1.25}
  .bonusbar .amt{width:100%}
}

/* correctif 5 : cible tactile 44x44 min pour le burger mobile */
.nav-toggle{min-width:44px;min-height:44px}

/* ---------- mobile : tetes de box du ranking (audit UX 25/08, captures Remi) ----------
   Sous 640px le logo fixe + la note etranglaient le nom et l'angle (texte mot a mot).
   Deux lignes : [logo ..... note] puis [nom + angle] en pleine largeur. */
@media(max-width:640px){
  .fiche-head{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .fiche-head .fiche-logo{width:118px;height:48px;order:1}
  .fiche-head .fiche-score{order:2;margin-left:auto}
  .fiche-head .fiche-id{order:3;flex-basis:100%;min-width:100%}
  .fiche-head .fiche-angle{white-space:normal}
  /* methodes de pago : boutons moins vides */
  .pay-badges a,.pay-badge{padding:8px 12px}
}

/* ── VIDÉO DE LA MARQUE (08/09/2026) ──────────────────────────────────────────
   Façade cliquable : la vignette est une image locale, le player YouTube n'arrive
   qu'au clic. La vignette est violette quand le site est clair et vert : on la pose
   donc dans une carte blanche bordée, qui fait la transition au lieu de la subir. */
.vidbloc{margin:38px 0}
.vidbloc-eyebrow{display:inline-block;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  background:var(--soft);border-radius:999px;padding:5px 12px;margin-bottom:12px}
.vidbloc-ttl{font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;line-height:1.2;
  margin:0 0 8px;color:var(--ink);letter-spacing:-.01em}
.vidbloc-sub{margin:0 0 18px;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:62ch}
.vidbloc-play{position:relative;display:block;width:100%;padding:0;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent}
.vidbloc-play img{display:block;width:100%;height:auto}
.vidbloc-btn{position:absolute;inset:0;display:grid;place-items:center}
.vidbloc-btn svg{width:88px;height:62px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.vidbloc-btn-bg{fill:#14132b;opacity:.86;transition:fill .16s ease,opacity .16s ease}
.vidbloc-play:hover .vidbloc-btn-bg,.vidbloc-play:focus-visible .vidbloc-btn-bg{fill:#cc0000;opacity:1}
.vidbloc-play:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vidbloc-marco{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);background:#000}
.vidbloc-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:640px){
  .vidbloc{margin:28px 0}
  .vidbloc-ttl{font-size:21px}
  .vidbloc-sub{font-size:14.5px;margin-bottom:14px}
  .vidbloc-btn svg{width:66px;height:47px}
}
/* lecteur natif : le fichier local remplace l'iframe (une vidéo YouTube soumise à une
   limite d'âge ne peut pas être intégrée, elle renvoie l'erreur 153). */
.vidbloc-marco video{position:absolute;inset:0;width:100%;height:100%;display:block;
  background:#14132b;border-radius:var(--radius)}
.vidbloc-marco{border:1px solid var(--border)}

/* ── CORRECTIONS MOBILE DU 09/09/2026 ────────────────────────────────────────
   Six points relevés par Rémi sur iPhone. Tout est traité en CSS, donc le flux de
   mots des pages ne change pas et les scores Serpmantics restent inchangés. */

/* 1. LES DEUX CAPTURES DES BLOCS DE MARQUE. En dessous de 900 px, .shots passait en
   flex-direction:row, mais les vignettes n'avaient ni largeur ni flex : leur
   aspect-ratio ne s'appliquait donc à rien et le conteneur tombait à 2 px de haut.
   Les images étaient bien là, simplement écrasées. Une grille à deux colonnes est
   plus sûre qu'un flex ici, parce que la largeur ne dépend plus du contenu. */
@media(max-width:900px){
  .shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .shots .shot{aspect-ratio:16/11;min-width:0}
}

/* 2. LES MÉTHODES DE PAIEMENT : corrigé à la source dans pl_pay_strip() (config/helpers.php),
   et non ici. La fonction injecte son propre <style> APRÈS cette feuille, donc à
   spécificité égale c'est le sien qui gagne : une règle posée ici resterait sans effet. */

/* 3. LE MATCH DE LA SEMAINE. Sur une largeur de téléphone, la ligne d'affiche en
   trois colonnes 1fr auto 1fr écrasait les noms d'équipe et le badge VS venait se
   superposer au texte. On empile : équipe, VS, équipe, chacun aligné à gauche, ce qui
   rend les noms longs lisibles. Le tableau des cotes, lui, défile horizontalement
   par construction (min-width 440) : on le signale par un dégradé sur le bord droit
   plutôt que de laisser croire que la colonne « 2 » est tronquée. */
@media(max-width:640px){
  .mw-card{padding:14px}
  .mw-vs{grid-template-columns:1fr;gap:8px;padding:4px 0 16px;justify-items:start}
  .mw-team.away{flex-direction:row;text-align:left}
  .mw-team b{font-size:16px}
  .mw-sep{justify-self:start;margin-left:51px}
  .mw-head{gap:6px}
  .mw-when{font-size:12px}
  .tablewrap{position:relative}
  .tablewrap:after{content:'';position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),var(--surface))}
}

/* 4. LE TABLEAU DES NOTES. Les pastilles « Top » suivaient la longueur du nom, donc
   elles tombaient à cinq abscisses différentes. Poussées à droite de leur cellule,
   elles s'alignent. Le titre de la seconde moitié du classement sort du tableau :
   en ligne de colspan, il était coupé par le défilement horizontal. */
.cmp td.lbl{white-space:nowrap}
.cmp td.lbl .tag-rank{float:right;margin-left:14px}
.cmp-sous-titre{font:700 11.5px system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;
  color:var(--muted);margin:22px 0 8px}

/* ── DEUXIÈME PASSE MOBILE, 09/09/2026 ───────────────────────────────────────
   Cinq points relevés par Rémi sur une page marque. Tout en CSS : les partials
   concernés sont partagés par les trois pages de chaque bookmaker, donc une
   correction ici vaut pour les trente marques, et aucun mot du document ne change,
   ce qui laisse les scores Serpmantics intacts. */

/* 5. LES TROIS ONGLETS Reseña / Código promo / Aplicación. La barre était en
   width:fit-content avec des libellés de longueurs très inégales : sur téléphone les
   trois onglets se répartissaient mal et les hauteurs ne correspondaient pas, l'actif
   étant plus court que les deux autres qui passaient sur deux lignes. On passe à trois
   colonnes égales, texte centré et hauteur commune. */
@media(max-width:640px){
  .tabs{width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;padding:5px}
  .tabs a,.tabs span{display:flex;align-items:center;justify-content:center;text-align:center;
    padding:10px 6px;font-size:10.5px;line-height:1.18;letter-spacing:.01em;min-height:46px}
}

/* 6. LE BLOC AUTEUR. Les deux dates étaient alignées à droite d'une colonne qui, une
   fois la ligne repliée sur téléphone, occupait toute la largeur : le nom et le rôle
   restaient à gauche et les dates partaient à droite, sans rapport visuel entre les
   deux. Repliées, elles passent au centre, avec un filet de séparation. */
@media(max-width:640px){
  .author-strip{gap:12px}
  .author-strip .mid{min-width:0;flex:1 1 100%}
  .author-strip .when{flex:1 1 100%;text-align:center;line-height:1.5;
    padding-top:11px;border-top:1px solid var(--border)}
}

/* 7. « LO QUE VERIFICAMOS ». Les puces étaient en display:flex, ce qui fait de chaque
   nœud de texte un élément flexible autonome : la ligne du code promocional, qui porte
   un <strong> au milieu de la phrase, se retrouvait donc éclatée en trois colonnes
   séparées par le gap. En flux inline avec un retrait négatif, la phrase redevient une
   phrase et la coche reste en saillie. */
.verif li{display:block;padding-left:21px;text-indent:-21px}
.verif li .ok{display:inline-block;width:13px;text-indent:0}
.verif li strong{font-weight:700;color:var(--ink)}

/* 8. LE CTA DU BANDEAU « la regla que nunca cambia ». Le bouton était un élément
   flexible à côté du paragraphe : sur téléphone il ne recevait que la largeur
   résiduelle, et un libellé long comme « Activar el bono 300% » venait toucher les
   bords. Il prend maintenant toute la largeur sous le texte. */
@media(max-width:640px){
  /* Tous les boutons d'action principaux passent en pleine largeur de leur conteneur,
     avec un padding horizontal réduit : à 26 px de chaque côté, un libellé comme
     « Activar el bono 300% » venait toucher les bords. white-space:normal autorise en
     dernier recours une seconde ligne plutôt qu'un débordement. */
  .ed > a.btn,aside.ed > a.btn,.hcard .cta > a.btn,.verdict-final > a.btn,
  .bonusbar .actions > a.btn,.cta-col > a.btn{
    width:100%;white-space:normal;padding-left:13px;padding-right:13px;line-height:1.2}
  .hcard .cta > a.btn,.verdict-final > a.btn{min-height:46px}
}

/* 9. LES NOMS DE CLUBS TROP LONGS. « Independiente del Valle » passait à la ligne et
   décalait tout le bloc du match. On borne la largeur et on coupe proprement par des
   points de suspension. La troncature est VISUELLE : le nom complet reste dans le
   document, ce qui compte, parce que les noms d'équipe des fixtures sont des
   expressions notées sur les pages qui portent le calendrier. */
.bo-teams b{max-width:12.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-team b{max-width:9.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:640px){
  .bo-teams b{max-width:8.6em}
  .mw-team b{max-width:12em}
}

/* 10. LA BARRE D'APPEL À L'ACTION COLLANTE (téléphone). Construite par
   assets/js/cta-movil.js à partir du CTA déjà présent dans la page. Elle glisse depuis
   le bas après 420 px de défilement et s'efface à l'approche du pied de page, pour ne
   pas recouvrir les mentions légales. */
.cta-movil{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-top:1px solid var(--border);box-shadow:0 -6px 22px rgba(14,19,32,.13);
  transform:translateY(105%);transition:transform .22s ease}
.cta-movil.visible{transform:translateY(0)}
.cta-movil-monto{font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
  color:var(--ink);line-height:1.15;flex:0 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cta-movil-btn{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  text-align:center;background:var(--accent);color:#fff;font-family:'Archivo',sans-serif;
  font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;
  padding:13px 14px;border-radius:10px;min-height:46px;line-height:1.15}
.ed a.cta-movil-btn,.ed a.cta-movil-btn:hover{color:#fff}
@media(max-width:640px){ .cta-movil{display:flex} }
@media(prefers-reduced-motion:reduce){ .cta-movil{transition:none} }