/* ============================================================
   INOSPECT — design system blog-starter (preset clair "navy/blue/green")
   Les noms de classes restent stables : seules les valeurs de tokens et
   quelques traitements visuels (angles, ombres) changent d'une passe à l'autre.
   ============================================================ */
:root {
  --bg:#F5F7FA; --bg-elev:#ECEFF4; --surface-1:#FFFFFF; --surface-2:#F1F4F9; --surface-3:#E6EAF2;
  --border:#E1E6EE; --border-strong:#CBD3E1; --grid-line:rgba(15,27,45,.04);
  --text:#0F1B2D; --text-soft:#4A5568; --text-faint:#77839A; --text-dim:#9AA5B8;
  --accent:#2F6FED; --accent-bright:#5B8DF6; --accent-deep:#1F4FC4;
  --accent-tint:rgba(47,111,237,.10); --accent-line:rgba(47,111,237,.28); --accent-glow:rgba(47,111,237,.28);
  --grad-accent:linear-gradient(120deg,#5B8DF6,#2F6FED 55%,#1F4FC4);
  --on-accent:#ffffff;
  --success:#1FAE6E; --success-tint:rgba(31,174,110,.12);
  --warning:#EA8C2E; --warning-tint:rgba(234,140,46,.13);
  --danger:#E24C4C;  --danger-tint:rgba(226,76,76,.12);
  --info:#2FA0C7;    --info-tint:rgba(47,160,199,.13);
  --navy:#0F1B2D; --navy-soft:#16263F;
  --font-display:"Sora",system-ui,sans-serif;
  --font-sans:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --notch:0px;
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:18px;
  --fs-lg:21px; --fs-xl:26px; --fs-2xl:33px;
  --fs-3xl:clamp(30px,5vw,46px); --fs-4xl:clamp(40px,7vw,70px);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-full:999px;
  --shadow-sm:0 2px 8px rgba(15,27,45,.06);
  --shadow-md:0 12px 28px rgba(15,27,45,.10); --shadow-lg:0 30px 60px rgba(15,27,45,.16);
  --maxw:1200px; --maxw-prose:720px; --header-h:72px;
  /* Boutons — couleurs pleines calibrées pour un contraste AA (>= 4.5:1) avec du texte blanc */
  --btn-primary-bg:#2F6FED; --btn-primary-bg-hover:#1F4FC4; --btn-primary-bg-active:#183E9E;
  --btn-primary-text:#ffffff;
  --btn-secondary-bg:#0F1B2D; --btn-secondary-bg-hover:#16263F; --btn-secondary-bg-active:#0A1320;
  --btn-secondary-text:#ffffff;
  --btn-outline-text:#0F1B2D; --btn-outline-border:#CBD3E1;
  --btn-outline-hover-bg:rgba(47,111,237,.08); --btn-outline-hover-border:#2F6FED; --btn-outline-hover-text:#1F4FC4;
  --focus-ring:#2F6FED;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:var(--fs-base); line-height:1.6; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--accent); color:var(--on-accent); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; line-height:1.15; margin:0; text-wrap:balance; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,44px); }

/* ---- bandeau supérieur ---- */
.topbar { background:var(--navy); color:#C9D4E6; font-size:12.5px; padding:8px 0; }
.topbar .container { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar a { color:#C9D4E6; }
.topbar a:hover { color:#fff; }
.topbar-links { display:flex; gap:18px; }

/* ---- emplacements publicitaires (gabarit blog-starter) ---- */
.ad-slot {
  position: relative; border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 11px, var(--surface-1) 11px, var(--surface-1) 22px);
  display: grid; place-items: center; text-align: center; color: var(--text-faint); padding: 22px;
}
.ad-slot::before { content: "PUBLICITÉ"; position: absolute; top: 8px; left: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: var(--text-dim); }
.ad-slot .ad-inner { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.ad-leaderboard { width: 728px; max-width: 100%; height: 90px; min-height: 90px; margin: 0 auto; padding: 8px; }
.ad-rectangle { min-height: 250px; }
.ad-band { padding: 22px 0 0; }
.ad-inline { margin: 32px 0; max-width: var(--maxw-prose); }
.ad-footer { padding: var(--s6) 0 0; }

/* ---- widget de traduction automatique (Google Website Translator) ---- */
.gtranslate-mount { display: inline-flex; align-items: center; margin-left: 12px; order: 5; }
.gtranslate-mount .goog-te-gadget { font-family: var(--font-mono) !important; font-size: 0 !important; }
.gtranslate-mount .goog-te-gadget > span > a { display: none !important; }
.gtranslate-mount select.goog-te-combo {
  background: var(--surface-1); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.gtranslate-mount select.goog-te-combo:hover { border-color: var(--accent-line); }
.gtranslate-close { background: none; border: none; color: var(--text-faint); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; margin-left: 4px; order: 6; }
.gtranslate-close:hover { color: var(--text); }
body.goog-te-banner-frame-shown { top: 0 !important; }
@media (max-width: 900px) { .gtranslate-mount { display: none; } .gtranslate-close { display: none; } }

/* ---- header / nav (nomenclature blog-starter : site-header / main-nav / brand) ---- */
.site-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--border); }
.site-header .container { display:flex; align-items:center; gap:var(--s5); padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:19px; color:var(--navy); }
.brand .logo { width:34px; height:34px; display:grid; place-items:center; background:var(--grad-accent); color:var(--on-accent); font-size:15px; border-radius:var(--r-sm); box-shadow:0 6px 16px var(--accent-glow); }
.brand .logo-text b { color:var(--navy); }
.brand .logo-text span { color:var(--accent); }
.main-nav { display:flex; gap:2px; margin-left:auto; }
.main-nav a { padding:9px 14px; font-family:var(--font-sans); font-weight:600; font-size:14px; color:var(--text-soft); border-radius:var(--r-full); transition:color .15s, background-color .15s; }
.main-nav a:hover { color:var(--accent); background:var(--accent-tint); }
.main-nav a.active { color:var(--accent); background:var(--accent-tint); }
.header-actions { display:flex; align-items:center; gap:var(--s3); margin-left:auto; }
.search-box { position:relative; display:flex; align-items:center; }
.search-box input { width:180px; min-width:160px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full); padding:8px 14px 8px 34px; font-family:var(--font-sans); font-size:13.5px; color:var(--text); transition:width .2s, border-color .2s; }
.search-box input::placeholder { color:var(--text-dim); }
.search-box input:focus { width:220px; border-color:var(--accent-line); outline:none; background:var(--surface-1); }
.search-box svg { position:absolute; left:11px; width:15px; height:15px; color:var(--text-faint); pointer-events:none; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--text); font-size:22px; cursor:pointer; }
@media (max-width:1080px) { .search-box { display:none; } }
@media (max-width:900px) { .main-nav { display:none; } .mobile-menu-btn { display:block; margin-left:auto; } }
@media (max-width:560px) { .header-actions .btn { display:none; } }

/* ---- article hero / breadcrumb / toc ---- */
.article-hero { padding:40px 0 26px; border-bottom:1px solid var(--border); }
.article-hero h1 { font-size:var(--fs-3xl); margin:14px 0 12px; color:var(--navy); }
.article-hero-meta { display:flex; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.breadcrumb { padding:14px 0; font-family:var(--font-sans); font-size:13px; color:var(--text-faint); border-bottom:1px solid var(--border); }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb .current { color:var(--text-soft); }
.breadcrumb span { margin:0 6px; color:var(--text-dim); }

.toc { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); padding:18px 20px; position:sticky; top:calc(var(--header-h) + 16px); align-self:start; box-shadow:var(--shadow-sm); }
.toc h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.toc ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc a { display:block; padding:6px 8px; font-size:13.5px; color:var(--text-soft); border-left:2px solid var(--border); border-radius:0 var(--r-sm) var(--r-sm) 0; }
.toc a:hover { color:var(--accent); border-left-color:var(--accent); background:var(--surface-2); }

.article-content { max-width:var(--maxw-prose); color:var(--text-soft); font-size:var(--fs-md); line-height:1.75; }
.article-content > * + * { margin-top:1.1em; }
.article-content h2 { font-size:var(--fs-2xl); color:var(--navy); margin-top:1.6em; }
.article-content h3 { font-size:var(--fs-xl); color:var(--navy); margin-top:1.3em; }
.article-content p { margin:0; }
.article-content strong { color:var(--navy); font-weight:600; }
.article-content a { color:var(--accent); border-bottom:1px solid var(--accent-line); }
.article-content ul, .article-content ol { margin:0; padding-left:1.3em; }
.article-content li { margin:.4em 0; }
.article-content li::marker { color:var(--accent); }

.affiliate-disclaimer, .disclosure { display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--warning-tint); border-left:3px solid var(--warning); border-radius:var(--r-sm); font-size:12.5px; color:#8A5A16; }
.affiliate-disclaimer strong, .disclosure strong { color:#8A5A16; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-right:8px; }

.comparison-table, .data-table { width:100%; border-collapse:collapse; font-size:14px; border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; }
.comparison-table th, .data-table th { background:var(--surface-2); text-align:left; padding:12px 16px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); font-weight:600; }
.comparison-table td, .data-table td { padding:12px 16px; border-top:1px solid var(--border); color:var(--text-soft); }
.comparison-table td strong, .data-table td strong { color:var(--navy); }
.table-wrap { overflow-x:auto; border-radius:var(--r-md); }

.cta-box, .buybox { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm); }
.cta-box h3 { font-size:var(--fs-lg); color:var(--navy); margin-bottom:8px; }
.cta-box p { color:var(--text-soft); font-size:14.5px; margin:0 0 14px; }

/* ---- boutons — pilules, texte toujours >= 4.5:1 de contraste avec son fond ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-sans); font-weight:600; font-size:14px; letter-spacing:0; line-height:1; padding:12px 24px; cursor:pointer; border:1px solid transparent; text-decoration:none; white-space:nowrap; border-radius:var(--r-full); transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .18s ease, transform .1s ease; }
.btn:active { transform:translateY(1px); }

.btn-primary { background:var(--btn-primary-bg); color:var(--btn-primary-text); box-shadow:0 4px 14px var(--accent-glow); }
.btn-primary:hover { background:var(--btn-primary-bg-hover); box-shadow:0 8px 22px var(--accent-glow); transform:translateY(-1px); }
.btn-primary:active { background:var(--btn-primary-bg-active); box-shadow:none; transform:translateY(1px); }

.badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; background:var(--accent-tint); color:var(--accent-deep); border:1px solid var(--accent-line); border-radius:var(--r-full); }
.badge-success { background:var(--success-tint); color:var(--success); border-color:rgba(31,174,110,.3); }

.article-summary { border:1px solid var(--border); background:linear-gradient(160deg,var(--accent-tint),transparent 58%); border-radius:var(--r-lg); margin-bottom:8px; box-shadow:var(--shadow-sm); overflow:hidden; }
.article-summary .as-top { display:grid; grid-template-columns:1.25fr 1fr; }
.article-summary .as-verdict { padding:22px; border-right:1px solid var(--border); }
.article-summary .as-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.article-summary .as-head h2 { font-size:var(--fs-lg); color:var(--navy); margin:0; }
.article-summary .as-verdict p { color:var(--text-soft); font-size:14.5px; line-height:1.55; margin:0; }
.article-summary .as-stats { padding:22px; display:flex; flex-direction:column; justify-content:center; gap:12px; }
.rating { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; }
.rating .score { font-size:26px; color:var(--accent); }
.rating .over { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); font-weight:400; }
@media (max-width:680px) { .article-summary .as-top { grid-template-columns:1fr; } .article-summary .as-verdict { border-right:none; border-bottom:1px solid var(--border); } }

.proscons { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pc-col { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); padding:20px; box-shadow:var(--shadow-sm); }
.pc-col.pros { border-top:3px solid var(--success); } .pc-col.cons { border-top:3px solid var(--danger); }
.pc-col h4 { font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.pc-col.pros h4 { color:var(--success); } .pc-col.cons h4 { color:var(--danger); }
.pc-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.pc-col li { font-size:14px; color:var(--text-soft); padding-left:22px; position:relative; }
.pc-col.pros li::before { content:"+"; position:absolute; left:2px; color:var(--success); font-weight:700; }
.pc-col.cons li::before { content:"\2212"; position:absolute; left:2px; color:var(--danger); font-weight:700; }
@media (max-width:680px) { .proscons { grid-template-columns:1fr; } }

.author-box { display:flex; gap:16px; align-items:flex-start; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm); }
.author-box .avatar { width:52px; height:52px; flex:none; background:var(--grad-accent); display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--on-accent); border-radius:var(--r-md); }
.author-box .a-name { font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); color:var(--navy); }
.author-box .a-role { font-family:var(--font-mono); font-size:11.5px; color:var(--accent); margin:3px 0 8px; }
.author-box .a-bio { font-size:14px; color:var(--text-soft); margin:0; line-height:1.5; }

.article-hero-img { aspect-ratio:21/9; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); margin:20px 0 0; box-shadow:var(--shadow-md); }
.article-hero-img img { width:100%; height:100%; object-fit:cover; }

.site-footer { border-top:1px solid var(--border); margin-top:var(--s9); background:var(--navy); color:#C9D4E6; }
.site-footer .brand { color:#fff; }
.site-footer .brand .logo-text b { color:#fff; }
.footer-grid { display:grid; grid-template-columns:1.6fr repeat(5,1fr); gap:var(--s5); padding:var(--s8) 0 var(--s6); }
.f-col.f-about p { font-size:14px; color:#9CADC7; max-width:34ch; line-height:1.6; margin:12px 0 0; }
.f-col h4 { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#7488A6; margin-bottom:14px; }
.f-col a { display:block; font-size:14px; color:#C9D4E6; padding:5px 0; }
.f-col a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:20px 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11.5px; color:#7488A6; }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { color:#9CADC7; }
.footer-legal a:hover { color:#fff; }
@media (max-width:980px) { .footer-grid { grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:620px) { .footer-grid { grid-template-columns:1fr 1fr; } }

/* ---- hub-header (en-tête de catégorie, remplace category-hero) ---- */
.hub-header { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); padding:36px; min-height:190px; display:flex; flex-direction:column; justify-content:flex-end; box-shadow:var(--shadow-md); }
.hub-header .bg { position:absolute; inset:0; z-index:0; }
.hub-header .bg img { width:100%; height:100%; object-fit:cover; }
.hub-header::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(120deg, rgba(15,27,45,.92) 30%, rgba(15,27,45,.55)); }
.hub-header > * { position:relative; z-index:2; }
.hub-header .h-title { font-size:var(--fs-3xl); color:#fff; margin:10px 0 8px; }
.hub-header .h-desc { color:#DCE3EE; font-size:15px; max-width:56ch; margin:0 0 14px; }
.hub-header .h-stats { display:flex; gap:24px; }
.hub-header .h-stats .hs b { display:block; font-family:var(--font-display); font-size:22px; color:#fff; }
.hub-header .h-stats .hs span { font-size:11px; color:#B7C2D6; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); }

.section-title { margin-bottom:22px; }
.section-title h2 { font-size:var(--fs-xl); color:var(--navy); }
.section-title p { color:var(--text-faint); font-size:14px; margin:6px 0 0; }

/* ---- section-head (titre de section + lien "voir tout") ---- */
.section-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--border); }
.section-head h2 { font-size:var(--fs-xl); color:var(--navy); display:flex; align-items:center; gap:10px; }
.section-head h2::before { content:""; width:4px; height:20px; background:var(--accent); border-radius:2px; flex:none; }
.section-head .see-all { font-family:var(--font-sans); font-weight:600; font-size:13px; color:var(--accent); }

/* ---- grille utilitaire (remplace articles-grid) ---- */
.grid { display:grid; gap:18px; }
.grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }
.grid.cols-5 { grid-template-columns:repeat(5,1fr); }
.grid-span-all { grid-column:1/-1; }
@media (max-width:1080px) { .grid.cols-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px) { .grid.cols-3, .grid.cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5 { grid-template-columns:1fr; } }

/* ---- card (remplace article-card ; vignette + index + excerpt + meta) ---- */
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .18s,border-color .18s,box-shadow .18s; }
.card:hover { transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.card .thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-3); }
.card .thumb img { width:100%; height:100%; object-fit:cover; }
.card .thumb .cat { position:absolute; top:12px; left:12px; z-index:2; }
.card .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card .idx { font-family:var(--font-mono); font-size:11px; color:var(--text-dim); letter-spacing:.1em; }
.card .body h3, .card .body h4 { font-size:16.5px; line-height:1.3; margin:0; color:var(--navy); transition:color .15s; }
.card .body h3 a, .card .body h4 a { color:inherit; }
.card:hover .body h3, .card:hover .body h4 { color:var(--accent); }
.card .excerpt { font-size:13.5px; color:var(--text-soft); line-height:1.5; margin:0; flex:1; }
.card .meta { margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-faint); font-family:var(--font-mono); letter-spacing:.02em; }
.card .meta .sep { color:var(--text-dim); }
.badge.cat { position:relative; }

.badge-primary, .badge.info { background:var(--info-tint); color:#1D7A99; border-color:rgba(47,160,199,.3); }
.badge-warning, .badge.warning { background:var(--warning-tint); color:#B36A1A; border-color:rgba(234,140,46,.3); }
.badge-info { background:var(--info-tint); color:#1D7A99; border-color:rgba(47,160,199,.3); }
.badge.success { background:var(--success-tint); color:var(--success); border-color:rgba(31,174,110,.3); }

/* ---- spotlight (hero home : article vedette + mini-cartes) ---- */
.spotlight { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }
.spotlight .feature { position:relative; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; padding:28px; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md); }
.spotlight .feature .bg { position:absolute; inset:0; z-index:0; }
.spotlight .feature .bg img { width:100%; height:100%; object-fit:cover; }
.spotlight .feature::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(15,27,45,.92) 6%, rgba(15,27,45,.25) 60%, transparent); }
.spotlight .feature > * { position:relative; z-index:2; }
.spotlight .feature h2 { font-size:var(--fs-2xl); color:#fff; margin:12px 0 8px; max-width:24ch; }
.spotlight .feature p { color:#E3E8F0; font-size:15px; margin:0; max-width:46ch; }
.spotlight .side { display:flex; flex-direction:column; gap:14px; }
.spotlight .side .mini { display:flex; gap:14px; align-items:center; padding:12px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md); transition:border-color .15s, box-shadow .15s; }
.spotlight .side .mini:hover { border-color:var(--accent-line); box-shadow:var(--shadow-sm); }
.spotlight .side .mini .thumb { width:84px; height:60px; flex:none; border-radius:var(--r-sm); overflow:hidden; aspect-ratio:auto; }
.spotlight .side .mini h4 { font-size:14.5px; line-height:1.25; color:var(--navy); margin:0; }
.spotlight .side .mini .m-meta { font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:5px; }
@media (max-width:820px) { .spotlight { grid-template-columns:1fr; } }

/* ---- game-card (ici : catégorie couverte, vignette + compteur) ---- */
.game-card { position:relative; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--border); border-radius:var(--r-lg); display:flex; align-items:flex-end; padding:14px; transition:transform .18s, border-color .18s; box-shadow:var(--shadow-sm); }
.game-card:hover { transform:translateY(-4px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.game-card .bg { position:absolute; inset:0; z-index:0; }
.game-card .bg img { width:100%; height:100%; object-fit:cover; }
.game-card::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(15,27,45,.85), transparent 55%); }
.game-card .g-name { position:relative; z-index:2; font-family:var(--font-display); font-weight:700; color:#fff; font-size:16px; }
.game-card .g-count { position:relative; z-index:2; font-family:var(--font-mono); font-size:11px; color:#fff; opacity:.9; display:block; margin-top:3px; }

/* ---- listing-layout (contenu principal + sidebar sticky) ---- */
.listing-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
.listing-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.listing-side { position:sticky; top:calc(var(--header-h) + 16px); display:flex; flex-direction:column; gap:24px; }
@media (max-width:900px) { .listing-layout { grid-template-columns:minmax(0,1fr); } .listing-side { position:static; } .listing-grid { grid-template-columns:1fr; } }

/* ---- trending (liste numérotée, sidebar) ---- */
.trending { display:flex; flex-direction:column; }
.trending .tr-item { display:flex; align-items:center; gap:14px; padding:12px 4px; border-bottom:1px solid var(--border); }
.trending .tr-item:last-child { border-bottom:none; }
.trending .tr-item .rank { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--text-dim); width:30px; text-align:center; flex:none; }
.trending .tr-item:nth-child(1) .rank, .trending .tr-item:nth-child(2) .rank, .trending .tr-item:nth-child(3) .rank { color:var(--accent); }
.trending .tr-item h4 { font-size:14px; color:var(--navy); line-height:1.3; margin:0; }
.trending .tr-item .t-meta { font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-top:3px; }

/* ---- pagination ---- */
.pagination { display:flex; align-items:center; gap:6px; }
.pagination a, .pagination span.page { min-width:36px; height:36px; padding:0 10px; display:grid; place-items:center; font-family:var(--font-mono); font-size:13px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface-1); color:var(--text-soft); transition:all .15s; }
.pagination a:hover { border-color:var(--accent-line); color:var(--accent); }
.pagination .current { background:var(--accent-tint); border-color:var(--accent-line); color:var(--accent); }
.pagination .dots { color:var(--text-dim); padding:0 4px; }
.btn-ghost { background:transparent; color:var(--text-faint); }
.btn-ghost:hover { color:var(--accent); }

/* ---- newsletter (nl-form) ---- */
.newsletter { position:relative; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:linear-gradient(135deg,var(--accent-tint),transparent 60%); padding:48px 0; text-align:center; }
.newsletter h3 { font-size:var(--fs-xl); color:var(--navy); margin-bottom:8px; }
.newsletter p { color:var(--text-soft); font-size:15px; margin:0 auto 20px; max-width:44ch; }
.nl-form { display:flex; flex-wrap:wrap; gap:10px; max-width:420px; margin:0 auto; }
.nl-form input { flex:1; min-width:200px; background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-full); color:var(--text); padding:11px 18px; font-family:var(--font-sans); font-size:14.5px; }
.nl-form input::placeholder { color:var(--text-dim); }

/* ---- article : hero 2 colonnes, prose, byline, progression de lecture ---- */
.reading-progress { height:3px; background:var(--surface-3); position:relative; overflow:hidden; }
.reading-progress > span { position:absolute; left:0; top:0; bottom:0; background:var(--grad-accent); width:0; }

.article-hero-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; padding:32px 0; align-items:start; }
.article-head .head-tags { display:flex; gap:8px; margin:14px 0 12px; flex-wrap:wrap; }
.article-head h1 { font-size:var(--fs-3xl); color:var(--navy); margin:0 0 12px; }
.article-head .dek { color:var(--text-soft); font-size:16px; line-height:1.55; margin:0 0 16px; }
.article-byline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12.5px; color:var(--text-faint); }
.article-byline .who { display:flex; align-items:center; gap:8px; }
.article-byline .mini-av { width:24px; height:24px; border-radius:50%; background:var(--grad-accent); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:700; font-size:11px; flex:none; }
.hero-ad { flex:none; }
@media (max-width:900px) { .article-hero-split { grid-template-columns:minmax(0,1fr); } }

.prose { max-width:var(--maxw-prose); color:var(--text-soft); font-size:var(--fs-md); line-height:1.75; }
.prose > * + * { margin-top:1.1em; }
.prose h2 { font-size:var(--fs-2xl); color:var(--navy); margin-top:1.6em; }
.prose h3 { font-size:var(--fs-xl); color:var(--navy); margin-top:1.3em; }
.prose p { margin:0; }
.prose strong { color:var(--navy); font-weight:600; }
.prose a { color:var(--accent); border-bottom:1px solid var(--accent-line); }
.prose ul, .prose ol { margin:0; padding-left:1.3em; }
.prose li { margin:.4em 0; }
.prose li::marker { color:var(--accent); }
.prose figure { margin:0; }
.prose figure img { width:100%; border-radius:var(--r-lg); border:1px solid var(--border); aspect-ratio:16/9; object-fit:cover; }
.prose figcaption { font-family:var(--font-mono); font-size:12px; color:var(--text-faint); text-align:center; margin-top:8px; }

.article-body { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; align-items:start; }
.article-side { position:sticky; top:calc(var(--header-h) + 16px); display:flex; flex-direction:column; gap:24px; }
@media (max-width:900px) { .article-body { grid-template-columns:minmax(0,1fr); } .article-side { position:static; } }

.article-related { padding:48px 0; border-top:1px solid var(--border); margin-top:40px; background:var(--surface-2); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px) { .related-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .related-grid { grid-template-columns:1fr; } }

/* ---- ancre pub (mobile, apparaît après la byline, fermable) ---- */
.ad-anchor { position:fixed; left:0; right:0; bottom:0; z-index:55; display:none; align-items:center; justify-content:center; gap:10px; background:var(--surface-1); border-top:1px solid var(--border); padding:8px; box-shadow:0 -8px 24px rgba(15,27,45,.12); }
.ad-anchor.is-visible { display:flex; }
.ad-anchor .close { background:none; border:none; color:var(--text-faint); font-size:16px; cursor:pointer; padding:4px 8px; }

.btn-secondary { position: relative; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: rgba(255,255,255,.16); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); border-color: rgba(255,255,255,.28); }
.btn-secondary:active { background: var(--btn-secondary-bg-active); }

.btn-outline { background: transparent; border-color: var(--btn-outline-border); color: var(--btn-outline-text); }
.btn-outline:hover { background: var(--btn-outline-hover-bg); border-color: var(--btn-outline-hover-border); color: var(--btn-outline-hover-text); }
.btn-outline:active { background: var(--accent-tint); }

.btn-sm { padding: 8px 18px; font-size: 12.5px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

/* état focus clavier — visible sur tous les éléments interactifs, jamais juste esthétique */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.section { padding: 60px 0; }
.section-title { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.section-title h2 { font-size: var(--fs-2xl); color: var(--navy); }
.section-title p { color: var(--text-faint); font-size: 15px; margin: 10px 0 0; }

.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .features-grid { grid-template-columns: 1fr; } }
.feature-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 26px 24px; text-align: center; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s; }
.feature-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon { width: 46px; height: 46px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--accent-tint); border: 1px solid var(--accent-line); color: var(--accent); border-radius: var(--r-md); }
.feature-item h4 { font-size: 16px; color: var(--navy); margin-bottom: 8px; }
.feature-item p { font-size: 13.5px; color: var(--text-soft); margin: 0; line-height: 1.5; }

.cta-section { background: var(--navy); border: 1px solid var(--navy); border-radius: var(--r-lg); padding: 52px; text-align: center; color: #fff; box-shadow: var(--shadow-lg); }
.cta-section h2 { font-size: var(--fs-2xl); color: #fff; }
.cta-section p { color: #C9D4E6; font-size: 15px; margin: 14px auto 24px; max-width: 56ch; }

/* ---- bande de statistiques (confiance) ---- */
.stats-strip { background: var(--navy); padding: 48px 0; }
.stats-strip .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; }
.stats-strip .stat-value { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 40px); color: #fff; line-height: 1.1; }
.stats-strip .stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #8CA1C2; margin-top: 8px; }

/* ---- FAQ ---- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.faq-item { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; color: var(--accent); flex: none; transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; }