/*
Theme Name: ECRtech Flux
Theme URI: https://ecrtech.fr
Author: ECRtech
Description: Nouveau thème ECRtech, structure magazine inspirée de Flux avec l'identité rouge/marine ECRtech. Basé sur les mêmes types de contenu (tests, guides), champs et réglages que le thème ECRtech d'origine pour une migration sans perte de données.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ecrtech-flux
*/

:root{
  --navy:#0c1b30;
  --navy-soft:#152743;
  --paper:#ffffff;
  --canvas:#f5f6f8;
  --red:#dc2f2f;
  --red-dark:#b81f1f;
  --red-soft:#fdecec;
  --line:#e3e6ea;
  --muted:#667085;
  --ink:#0c1b30;
  --on-accent:#ffffff;
  --green:#2fae5c;
  /* Esthétique éditoriale façon Flux : quasiment plus d'ombre portée,
     on sépare les blocs avec des filets (var(--line)) plutôt que des
     drop-shadows. Gardé en variable pour les 2-3 endroits qui ont
     encore besoin de se détacher légèrement (score flottant, etc). */
  --shadow: 0 1px 2px rgba(12,27,48,.05);
  --radius-sharp: 2px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#0a1526; --navy-soft:#0f1e35; --paper:#101b2e; --canvas:#0b1424;
    --red:#ff5252; --red-dark:#ff7a7a; --red-soft:#2a1416; --line:#22314a; --muted:#93a0b8; --ink:#eef1f6; --on-accent:#0c1b30;
  }
}
:root[data-theme="dark"]{
  --navy:#0a1526; --navy-soft:#0f1e35; --paper:#101b2e; --canvas:#0b1424;
  --red:#ff5252; --red-dark:#ff7a7a; --red-soft:#2a1416; --line:#22314a; --muted:#93a0b8; --ink:#eef1f6; --on-accent:#0c1b30;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:"Public Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.disp{ font-family:"Space Grotesk", system-ui, sans-serif; letter-spacing:-0.01em; text-wrap:balance; color:var(--ink); margin:0;}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1220px; margin:0 auto; padding-inline:16px; }
@media (min-width:600px){ .wrap{ padding-inline:20px; } }

/* ---- header ---- */
header.site{ background:var(--navy); position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(255,255,255,.08); }
.header-row{ display:flex; align-items:center; gap:26px; padding-block:14px; position:relative; }
.burger{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; height:18px; background:none; border:none; padding:0; cursor:pointer; flex:none; }
.burger span{ display:block; width:100%; height:2px; background:#fff; border-radius:2px; }
.logo{ display:flex; align-items:center; gap:10px; flex:none; }
.logo img{ width:36px; height:36px; border-radius:8px; object-fit:cover; }
.logo span{ font-family:"Space Grotesk"; font-weight:700; font-size:19px; color:#fff; white-space:nowrap; }
nav.primary{ display:flex; align-items:center; gap:22px; flex:1; min-width:0; overflow:visible; }
nav.primary a{ color:#c7d1e0; font-size:14.5px; font-weight:500; padding:6px 2px; border-bottom:2px solid transparent; white-space:nowrap; transition:color .15s ease, border-color .15s ease; }
nav.primary a.on, nav.primary a:hover, nav.primary a.current-menu-item{ color:#fff; border-color:var(--red); }
.has-drop{ position:relative; flex:none; }
.drop-trigger{ display:flex; align-items:center; gap:5px; background:none; border:none; font-family:inherit; color:#c7d1e0; font-size:14.5px; font-weight:500; padding:6px 2px; cursor:pointer; white-space:nowrap; transition:color .15s ease; }
.drop-trigger .chev{ font-size:10px; transition:transform .18s ease; display:inline-block; }
.has-drop:hover .drop-trigger{ color:#fff; }
.has-drop:hover .chev{ transform:rotate(180deg); }
/* Alignées à gauche du déclencheur (comme le menu "Features" du thème Flux
   de référence), pas centrées. */
.dropdown{
  position:absolute; top:100%; left:0; transform:translateY(-6px);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sharp); box-shadow:var(--shadow);
  padding:8px; margin-top:6px; min-width:170px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:25;
}
/* zone tampon invisible entre le déclencheur et le menu, pour que la souris
   puisse passer de l'un à l'autre sans que le survol ne se coupe */
.dropdown::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.has-drop:hover .dropdown,
.has-drop.open .dropdown{ opacity:1; pointer-events:auto; transform:translateY(0); }
.dropdown a{ display:block; padding:9px 12px; font-size:13.5px; font-weight:500; color:var(--ink); border-radius:6px; border:none; white-space:nowrap; }
.dropdown a:hover{ background:var(--canvas); color:var(--ink); }

/* ---- méga-menu avec miniatures (façon Flux) ---- */
.mega-dropdown{ min-width:360px; padding:14px; }
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mega-tile{ position:relative; aspect-ratio:1/1; border-radius:0; overflow:hidden; display:flex; align-items:flex-end; padding:8px; background:var(--g,linear-gradient(135deg,var(--navy),var(--navy-soft))); }
.mega-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mega-label{ position:relative; z-index:1; background:#111318; color:#fff; font-family:"Space Grotesk"; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; padding:3px 7px; white-space:nowrap; }
.popular-dropdown{ min-width:300px; padding:8px; }
.popular-tile{ display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:var(--radius-sharp); white-space:normal; }
.popular-tile:hover{ background:var(--canvas); }
.pt-thumb{ width:56px; height:40px; border-radius:0; flex:none; background:var(--g,linear-gradient(135deg,var(--navy),var(--navy-soft))); background-size:cover; background-position:center; }
.pt-info{ display:flex; align-items:center; gap:8px; min-width:0; }
.pt-rank{ font-family:"Space Grotesk"; font-weight:700; color:var(--red); font-size:12px; flex:none; }
.pt-title{ font-size:12.5px; font-weight:600; line-height:1.3; color:var(--ink); }

/* ---- "Naviguer" en bandeau plein largeur au survol, façon menu
   "Categories" du thème Flux de référence : pas de boîte flottante, une
   bande de vignettes accolées qui couvre toute la largeur de la page,
   ancrée sous le header (qui est sticky, donc bloc de positionnement pour
   ce bandeau en absolute). */
.has-drop.nav-categories{ position:static; }
.nav-strip-dropdown{
  left:0; right:0; margin-top:0; padding:0; min-width:0;
  background:var(--navy); border:none; border-top:1px solid rgba(255,255,255,.1);
  border-radius:0; box-shadow:none;
}
.nav-strip-dropdown .mega-grid{
  display:flex; max-width:1220px; margin:0 auto; padding-inline:16px; gap:0;
}
@media (min-width:600px){ .nav-strip-dropdown .mega-grid{ padding-inline:20px; } }
.nav-strip-dropdown .mega-tile{
  flex:1 1 0; height:160px; aspect-ratio:auto; border-radius:0;
  border-right:1px solid rgba(255,255,255,.1); padding:12px;
}
.nav-strip-dropdown .mega-tile:last-child{ border-right:none; }
.nav-strip-dropdown .mega-label{ font-size:11px; }
.header-actions{ display:flex; align-items:center; gap:16px; flex:none; margin-left:auto; }
.icon-btn{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; background:none; border:none; color:#dfe6f0; cursor:pointer; padding:0; flex:none; transition:color .15s ease, transform .15s ease; }
.icon-btn:hover{ color:#fff; }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn.on{ color:var(--red); }

/* ---- search panel ---- */
.search-panel{ max-height:0; overflow:hidden; background:var(--paper); border-bottom:1px solid var(--line); transition:max-height .25s ease; }
body.search-open .search-panel{ max-height:76px; }
.search-panel .wrap{ padding-block:16px; }
.search-panel input{ width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 16px; font-size:14.5px; font-family:"Public Sans"; background:var(--canvas); color:var(--ink); }
.search-panel input:focus{ outline:2px solid var(--red); outline-offset:1px; }
.subscribe{ background:var(--red); color:#fff; font-weight:600; font-size:13.5px; padding:9px 16px; border-radius:8px; white-space:nowrap; flex:none; }
@media (max-width:640px){
  .header-row{ gap:14px; justify-content:space-between; }
  nav.primary, .subscribe{ display:none; }
  .logo{ position:absolute; left:50%; transform:translateX(-50%); }
  .logo span{ font-size:17px; }
  .header-actions{ margin-left:0; }
}

/* ---- hamburger : se transforme en croix quand le panneau est ouvert ---- */
.burger span{ transition:transform .2s ease, opacity .2s ease; }
body.menu-panel-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-panel-open .burger span:nth-child(2){ opacity:0; }
body.menu-panel-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---- panneau de menu complet (hamburger), façon Flux ----
   Un écran plein largeur ancré sous le header (absolute, le header sticky
   sert de bloc de positionnement) plutôt qu'un tiroir latéral : colonne de
   sections / colonne de liens / colonne "articles populaires" en
   vignettes, et un bandeau réseaux sociaux + mentions légales tout en bas.
   Remplace l'ancien tiroir mobile ; sert à la fois en desktop et en mobile. */
.menu-panel{
  position:absolute; top:100%; left:0; right:0; z-index:26;
  background:var(--navy); color:#fff;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  max-height:calc(100vh - 56px); overflow-y:auto;
}
body.menu-panel-open .menu-panel{ opacity:1; visibility:visible; transform:translateY(0); transition:opacity .22s ease, transform .22s ease; }
body.menu-panel-open{ overflow:hidden; }
.menu-panel-cols{ display:grid; grid-template-columns:180px 200px 1fr; gap:36px; padding-block:36px; }
@media (max-width:900px){ .menu-panel-cols{ grid-template-columns:1fr; gap:26px; padding-block:26px; } }
.menu-col-main{ display:flex; flex-direction:column; gap:4px; }
.menu-sec-btn{ text-align:left; background:none; border:none; color:#fff; font-family:"Space Grotesk"; font-weight:700; font-size:21px; padding:7px 0; cursor:pointer; opacity:.5; transition:opacity .15s ease; }
.menu-sec-btn.on, .menu-sec-btn:hover{ opacity:1; }
.menu-sec-link{ font-family:"Space Grotesk"; font-weight:700; font-size:21px; padding:7px 0; color:#fff; opacity:.5; transition:opacity .15s ease; }
.menu-sec-link:hover{ opacity:1; }
.menu-col-sub{ min-width:0; }
.menu-sub{ display:flex; flex-direction:column; }
.menu-sub a{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:500; color:#c7d1e0; padding:9px 0; border-top:1px solid rgba(255,255,255,.08); }
.menu-sub a:first-child{ border-top:none; }
.menu-sub a:hover{ color:#fff; }
.menu-sub-rank{ font-family:"Space Grotesk"; font-weight:700; color:var(--red); font-size:12px; flex:none; }
.menu-col-promo h5{ font-family:"Space Grotesk"; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:#8fa0b8; margin:0 0 14px; }
.menu-promo-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:480px){ .menu-promo-grid{ grid-template-columns:1fr; } }
.menu-promo-tile{ display:block; }
.menu-promo-tile img, .menu-promo-tile .ph{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.menu-promo-title{ display:block; color:#fff; font-size:13.5px; font-weight:600; margin-top:9px; line-height:1.35; }
.menu-panel-foot{ background:rgba(255,255,255,.04); border-top:1px solid rgba(255,255,255,.08); }
.menu-panel-foot-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-block:16px; font-size:12.5px; color:#8fa0b8; }
.menu-follow-label{ text-transform:uppercase; font-size:11px; letter-spacing:.06em; font-weight:700; color:#fff; }
.menu-follow-socials{ display:flex; gap:8px; }
.menu-follow-socials a{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; }
.menu-cta{ background:var(--red); color:#fff; font-weight:600; font-size:12.5px; padding:8px 14px; }
@media (min-width:641px){ .menu-cta{ display:none; } }
.menu-panel-legal{ margin-left:auto; }
.menu-panel-legal a{ color:#8fa0b8; }
.menu-panel-legal a:hover{ color:#fff; }

main{ padding-block:32px 64px; }

/* ---- tag badge (style Flux : bandeau noir) ---- */
.tag{ display:inline-block; background:#111318; color:#fff; font-family:"Space Grotesk"; font-weight:600; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; }
.tag.red{ background:var(--red); }

/* ---- homepage grid ---- */
.layout{ display:grid; grid-template-columns: 1fr 320px; gap:40px; align-items:start; }
@media (max-width:900px){ .layout{ grid-template-columns:1fr; } }
.article-layout, .home-layout{ align-items:stretch; }
.sticky-follow{ position:sticky; top:84px; }

.feature-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:22px; margin-bottom:34px; }
@media (max-width:700px){ .feature-grid{ grid-template-columns:1fr; } }
.feature-grid .stack{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.feature-grid .stack .card h3{ font-size:14.5px; line-height:1.3; margin-top:9px; }
.feature-grid .stack .card .meta{ margin-top:7px; }
@media (max-width:480px){ .feature-grid .stack{ grid-template-columns:1fr 1fr; } }

/* Style éditorial façon Flux : images à bord franc (pas d'arrondi, pas
   d'ombre), la carte se distingue au survol par la couleur du titre
   plutôt que par un effet de lévitation/zoom. */
.card{ position:relative; }
.card:hover h3{ color:var(--red); }
.card .media{ position:relative; aspect-ratio: 16/10; border-radius:0; overflow:hidden; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); }
.card .media img{ width:100%; height:100%; object-fit:cover; }
.card .media .tag{ position:absolute; top:12px; left:12px; }
.card.big .media{ aspect-ratio:16/9.5; }
.card h3{ font-size:19px; line-height:1.28; margin-top:12px; transition:color .15s ease; }
.card.big h3{ font-size:25px; margin-top:16px; }
.card p.dek{ color:var(--muted); font-size:14px; margin-top:8px; line-height:1.55; }
.card .meta{ display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12.5px; margin-top:10px; }
.card .meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); flex:none; }
.meta .ic{ display:inline-flex; }
.meta .ic svg{ width:13px; height:13px; vertical-align:-2px; }

/* Bandeau de catégories : défilement horizontal plutôt qu'une grille figée,
   pour ne jamais avoir à cacher des catégories quand il y en a plus que ce
   qui tient sur une ligne (le nombre de catégories affichées n'est plus
   plafonné côté PHP, voir ecrtech_flux_featured_categories()). */
/* Tuiles à bord franc et accolées (comme le bandeau "Trending Topics"
   du thème de référence) : plus de gap ni de coins arrondis, juste un
   filet de 1px pour séparer les tuiles. On garde en revanche le
   défilement horizontal et la demi-tuile de fin de ligne, qui répondent
   à un besoin d'usage (indiquer que ça scrolle) indépendant du style. */
.trending-strip{
  display:flex; margin-block:34px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; padding-bottom:6px;
  scrollbar-width:thin;
}
.trending-strip::-webkit-scrollbar{ height:6px; }
.trending-strip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.trending-strip a{
  position:relative; aspect-ratio:1/1; border-radius:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:10px; background-size:cover; background-position:center;
  flex:0 0 auto; scroll-snap-align:start;
  border-right:1px solid var(--line);
  /* Tuiles volontairement dimensionnées pour qu'il n'y ait jamais un nombre
     entier de tuiles visibles : la dernière de la ligne est coupée en deux,
     ce qui indique visuellement que le bandeau se scrolle horizontalement. */
  width:calc(100% / 2.5);
}
.trending-strip a:last-child{ border-right:none; }
.trending-label{ position:relative; z-index:1; background:#fff; color:#111318; font-family:"Space Grotesk"; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.03em; padding:5px 10px; }
@media (min-width:801px){
  .trending-strip{ flex-wrap:nowrap; }
  .trending-strip a{ width:calc(100% / 5.5); }
}

.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.section-head h2{ font-size:22px; }
.section-head a{ font-size:13px; font-weight:600; color:var(--red); }

.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px 22px; }
@media (max-width:700px){ .post-grid{ grid-template-columns:1fr; } }

.load-more-wrap{ text-align:center; margin-top:36px; }
.load-more-btn{ display:inline-block; background:var(--navy); color:#fff; font-weight:600; font-size:14px; padding:12px 30px; border-radius:9px; }
.load-more-btn:hover{ background:var(--red); }

/* ---- sidebar ---- */
.side-block{ background:var(--paper); border:1px solid var(--line); border-radius:0; padding:18px; margin-bottom:20px; }
.side-block h4{ font-family:"Space Grotesk"; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:14px; }
.rank-item{ display:flex; gap:12px; padding-block:11px; border-top:1px solid var(--line); }
.rank-item:first-child{ border-top:none; padding-top:0; }
.rank-num{ font-family:"Space Grotesk"; font-weight:700; color:#fff; background:var(--red); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; }
.rank-item .t{ font-size:13.5px; line-height:1.4; font-weight:600; }
.follow-row{ display:flex; align-items:center; gap:10px; padding-block:9px; }
.follow-row .ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; flex:none; }
.follow-row .n{ font-size:13.5px; font-weight:600; }
.follow-row .c{ font-size:11.5px; color:var(--muted); }

/* ---- dernières vidéos YouTube (sidebar) ---- */
.video-item{ display:flex; gap:10px; padding-block:10px; border-top:1px solid var(--line); }
.video-item:first-of-type{ border-top:none; padding-top:0; }
.video-thumb{ position:relative; width:88px; aspect-ratio:16/9; border-radius:0; overflow:hidden; flex:none; background:var(--g,linear-gradient(135deg,var(--navy),var(--navy-soft))); background-size:cover; background-position:center; }
.video-thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; opacity:.9; }
.video-info{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.video-info .vt{ font-size:12.5px; font-weight:600; line-height:1.35; }
.video-info .vm{ font-size:11px; color:var(--muted); margin-top:4px; }

/* ---- radar (note EcoRadinMalin) ---- */
.radar-wrap{ position:relative; display:flex; justify-content:center; padding-bottom:10px; }
.radar-svg{ width:100%; max-width:230px; }
.radar-grid{ fill:none; stroke:var(--line); stroke-width:1; }
.radar-axis{ stroke:var(--line); stroke-width:1; }
.radar-data{ fill:color-mix(in srgb, var(--red) 22%, transparent); stroke:var(--red); stroke-width:2; }
.radar-dot{ fill:var(--red); }
.radar-label{ font-family:"Public Sans"; font-size:8.5px; fill:var(--muted); font-weight:600; }
.radar-score{ position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:6px 14px; display:flex; align-items:baseline; gap:2px; }
.radar-score b{ font-family:"Space Grotesk"; font-size:16px; color:var(--red); }
.radar-score span{ font-size:11px; color:var(--muted); }
.score-total{ font-size:40px; color:var(--red); font-family:"Space Grotesk"; font-weight:700; }

/* ---- article view ---- */
.breadcrumb{ font-size:12.5px; color:var(--muted); padding-block:18px; }
.breadcrumb a{ color:var(--muted); }
.article-head{ max-width:760px; }
.article-head .tag{ margin-bottom:12px; }
.article-head h1{ font-size:clamp(26px,4vw,38px); line-height:1.14; }
.article-head .dek{ color:var(--muted); font-size:16px; margin-top:12px; line-height:1.55; }
.byline{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:18px; font-size:13px; color:var(--muted); }
.byline .dot{ width:3px; height:3px; border-radius:50%; background:var(--muted); flex:none; }
.byline .av{ width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk"; font-weight:700; font-size:12px; }
.byline b{ color:var(--ink); }
.article-media{ max-width:760px; aspect-ratio:16/9; border-radius:0; overflow:hidden; margin-block:24px; background:var(--navy); }
.article-media img{ width:100%; height:100%; object-fit:cover; }

.ai-card{ max-width:760px; background:var(--red-soft); border:1px solid color-mix(in srgb, var(--red) 35%, var(--line)); border-radius:0; padding:20px 22px; margin-bottom:22px; }
.ai-card .h{ display:flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:700; font-size:14.5px; color:var(--red-dark); margin-bottom:10px; }
.ai-card .h .dot-ic{ width:24px; height:24px; border-radius:7px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.ai-card p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink); }

.moments{ max-width:760px; background:var(--paper); border:1px solid var(--line); border-radius:0; padding:20px 22px; margin-bottom:28px; }
.moments h4{ font-family:"Space Grotesk"; font-size:15px; margin-bottom:14px; }
.moment{ display:flex; gap:12px; padding-block:12px; border-top:1px solid var(--line); cursor:pointer; }
.moment:first-of-type{ border-top:none; padding-top:0; }
.moment .n{ width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff; font-family:"Space Grotesk"; font-weight:700; font-size:11.5px; display:flex; align-items:center; justify-content:center; flex:none; }
.moment .body{ flex:1; }
.moment .t{ font-weight:600; font-size:13.5px; }
.moment .d{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.moment .arrow{ color:var(--red); font-size:15px; align-self:center; }

.video-embed-card .head{ display:flex; align-items:center; gap:8px; padding:14px 20px; font-size:13.5px; font-weight:600; border-bottom:1px solid var(--line); }
.video-embed-card .thumb{ position:relative; display:block; aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy),var(--navy-soft)); background-size:cover; background-position:center; }
.video-embed-card .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-embed-card .play span{ width:56px; height:56px; border-radius:50%; background:rgba(220,47,47,.9); display:flex; align-items:center; justify-content:center; }

/* ---- boîte d'achat (prix + liens affiliés) ---- */
.buy-box, .affiliate-inline{ max-width:760px; border:1px solid var(--line); border-radius:0; overflow:hidden; margin-bottom:28px; background:var(--paper); padding:0; }
.affiliate-inline{ padding:20px; }
.buy-box-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; background:var(--canvas); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.buy-box-head h4{ font-family:"Space Grotesk"; font-size:14.5px; margin:0; }
.dot-live{ width:6px; height:6px; border-radius:50%; background:var(--green); display:inline-block; flex:none; }
.buy-row{ display:flex; align-items:center; gap:14px; padding:14px 8px; border-top:1px solid var(--line); flex-wrap:wrap; }
.buy-row:first-child{ border-top:none; }
.buy-row .info{ flex:1; min-width:120px; }
.buy-row .info .name{ font-size:13.5px; font-weight:600; }
.buy-row .price-wrap{ text-align:right; flex:none; margin-left:auto; }
.buy-row .price{ font-family:"Space Grotesk"; font-weight:700; font-size:17px; color:var(--ink); }
.buy-row .cta{ display:inline-block; margin-top:6px; background:var(--red); color:#fff; font-weight:600; font-size:12.5px; padding:7px 14px; border-radius:7px; white-space:nowrap; }
.buy-box-foot{ padding:10px 20px 16px; font-size:11px; color:var(--muted); line-height:1.6; }

/* ---- radar + prix : se détachent et suivent le scroll ---- */
.sticky-group{ position:sticky; top:84px; display:flex; flex-direction:column; }
.mini-buy-row{ display:flex; align-items:center; gap:8px; padding-block:9px; border-top:1px solid var(--line); }
.mini-buy-row:first-of-type{ border-top:none; padding-top:0; }
.mini-merchant{ font-family:"Space Grotesk"; font-weight:700; font-size:10.5px; padding:4px 8px; border-radius:5px; flex:none; background:var(--navy); color:#fff; }
.mini-price{ font-family:"Space Grotesk"; font-weight:700; font-size:14px; color:var(--ink); flex:1; }
.mini-arrow{ color:var(--red); font-size:14px; flex:none; }
.mini-updated{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mini-legal{ font-size:10.5px; color:var(--muted); line-height:1.5; margin-top:8px; }

/* ---- prix compact sur les cartes tests ---- */
.test-price{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.test-price .amount{ font-family:"Space Grotesk"; font-weight:700; font-size:15px; line-height:1.2; }
.test-price .amount small{ display:block; font-size:10.5px; color:var(--muted); font-weight:500; }
.test-price .buy-btn{ background:var(--red); color:#fff; font-weight:600; font-size:12px; padding:7px 12px; border-radius:7px; white-space:nowrap; }
.aff-note{ font-size:11.5px; color:var(--muted); text-align:center; margin-top:22px; line-height:1.6; }

.affiliate-disclosure{ max-width:760px; margin-bottom:20px; }
.affiliate-disclosure .box{ display:flex; gap:10px; background:#fdf6e3; border:1px solid #f0dea0; border-radius:0; padding:14px 16px; font-size:12.5px; color:#6b5518; line-height:1.55; }

.prose{ max-width:760px; font-size:16px; line-height:1.75; }
.prose p{ margin:0 0 20px; }
.prose h2{ font-size:21px; margin:34px 0 14px; }
blockquote.pull{ border-left:3px solid var(--red); padding:4px 0 4px 20px; margin:28px 0; font-family:"Space Grotesk"; font-weight:600; font-size:18px; line-height:1.45; }
.quote-block{ background:var(--navy); color:#fff; border-radius:0; padding:30px 32px; margin:30px 0; }
.caption-note{ font-size:12.5px; color:var(--muted); text-align:center; margin-top:-14px; margin-bottom:24px; }

.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:760px; margin-bottom:28px; }
@media (max-width:600px){ .pros-cons{ grid-template-columns:1fr; } }
.pros-cons .card{ border:1px solid var(--line); border-radius:0; padding:18px 20px; background:var(--paper); }
.bottom-cta{ max-width:760px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:var(--navy); border-radius:0; padding:22px 26px; margin-bottom:10px; }

/* ---- tests/category view ---- */
.page-head{ margin-bottom:22px; padding-top:12px; }
.page-head h1{ font-size:30px; }
.page-head p{ color:var(--muted); font-size:15px; margin-top:8px; max-width:640px; }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.chip{ font-size:13px; font-weight:600; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); }
.chip.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .test-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .test-grid{ grid-template-columns:1fr; } }
.test-card .media{ position:relative; }
.score-badge{ position:absolute; top:12px; right:12px; width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.score-badge b{ font-family:"Space Grotesk"; font-size:13px; color:var(--red); line-height:1; }
.score-badge span{ font-size:8px; color:var(--muted); text-transform:uppercase; }

.pager{ display:flex; justify-content:center; gap:8px; margin-top:36px; }
.pager .page-numbers{ min-width:34px; height:34px; padding:0 8px; border-radius:8px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; }
.pager .page-numbers.current{ background:var(--navy); color:#fff; border-color:var(--navy); }

footer.site{ background:#0a0f1a; color:#c7d1e0; margin-top:60px; overflow:hidden; }
.footer-top{ padding-block:44px 30px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:28px; border-bottom:1px solid rgba(255,255,255,.08); }
@media (max-width:800px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand .logo span{ color:#fff; }
.footer-brand p{ font-size:13px; color:#8fa0b8; line-height:1.6; margin-top:12px; max-width:280px; }
.footer-col h5{ font-family:"Space Grotesk"; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:#8fa0b8; margin:0 0 14px; }
.footer-col a{ display:block; font-size:13.5px; color:#c7d1e0; padding-block:6px; transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-socials{ display:flex; gap:10px; }
.footer-socials a{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; transition:transform .15s ease; }
.footer-socials a:hover{ transform:translateY(-2px); }
.footer-ghost{ font-family:"Space Grotesk"; font-weight:700; font-size:clamp(52px,11vw,120px); color:rgba(255,255,255,.045); white-space:nowrap; text-align:center; padding-block:8px; letter-spacing:-0.02em; user-select:none; overflow:hidden; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-block:18px 26px; font-size:12px; color:#75839c; }
.footer-bottom a{ color:#75839c; }
.footer-bottom a:hover{ color:#c7d1e0; }

/* placeholder tile helper */
.ph{ position:relative; width:100%; height:100%; background:var(--g,linear-gradient(135deg,var(--navy),var(--navy-soft))); background-size:cover; background-position:center; }

/* Bandeau de catégories secondaire — sous le header, sur toutes les pages.
   Barre compacte à défilement horizontal (mêmes principes que .trending-strip
   côté UX : pas de wrap, scrollbar fine), mais en pastilles de texte plutôt
   qu'en grandes vignettes image, pour rester lisible en permanence sans
   prendre la hauteur d'un bloc éditorial. */
.category-bar-wrap{ background:var(--paper); border-bottom:1px solid var(--line); }
.category-bar{
  display:flex; gap:8px; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; padding-block:10px;
}
.category-bar::-webkit-scrollbar{ display:none; }
.cat-pill{
  flex:0 0 auto; font-size:12.5px; font-weight:600; white-space:nowrap;
  padding:6px 14px; border-radius:999px; border:1px solid var(--line);
  color:var(--muted); background:var(--canvas);
}
.cat-pill.on, .cat-pill:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }

/* Bloc "Verdict d'achat" — shortcode [ecrtech_verdict], inséré dans le
   corps d'un article pour recommander un produit sans dupliquer une fiche
   test complète. Reprend le vocabulaire visuel du bloc de score existant
   (badge rond, CTA rouge) pour rester cohérent avec single-test.php. */
.verdict-block{ margin:28px 0; padding:22px; }
.verdict-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.verdict-eyebrow{ font-family:"Space Grotesk"; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--red); }
.verdict-score{ display:flex; align-items:baseline; gap:3px; }
.verdict-score b{ font-family:"Space Grotesk"; font-size:20px; }
.verdict-score span{ font-size:12px; color:var(--muted); }
.verdict-title{ font-family:"Space Grotesk"; font-weight:700; font-size:17px; margin-bottom:6px; }
.verdict-text{ font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:16px; }
.verdict-cta{ display:flex; align-items:center; justify-content:space-between; background:var(--red); color:#fff; padding:11px 16px; border-radius:8px; font-size:13.5px; font-weight:600; }
.verdict-price{ font-family:"Space Grotesk"; font-weight:700; }