/*
Theme Name: Vice Central Ultimate V7.2
Theme URI: https://vice-central.com
Author: Vice Central
Description: Thème éditorial GTA VI (actu, leaks, théories, personnages et lieux).
Version: 7.2.0
Text Domain: gta6wire
*/

/* ===================== RESET & BASE ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --neon:    #D6235F;
  --neon2:   #EA6000;
  --neon3:   #0099BB;
  --gold:    #D4920A;
  --violet:  #7C3AED;

  --bg:      #F7F4F0;
  --bg2:     #EDE9E3;
  --bg3:     #E5E0D8;
  --surface: #FFFFFF;
  --surface2:#F0EDE8;

  --border:  rgba(214,35,95,0.14);

  --text:    #1A1014;
  --muted:   #5E4E54;

  /* Teintes claires ajoutées pour la refonte homepage (validée par Bastien,
     sept. 2026) : HUD compte à rebours (teal), bandeau leaks (rose) et fond
     du bandeau ticker. Additives uniquement — aucun token existant
     ci-dessus n'est modifié. */
  --ticker-bg: #FBEFE3;
  --rose-tint: #FBE4EB;
  --rose-line: #F0B9C9;
  --teal-tint: #DFF2F5;
  --teal-line: #AEDEE6;

  --font-display: 'Bebas Neue', sans-serif;
  --font-ui:      'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; }

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9000;
}

.container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.screen-reader-text { position: absolute; left: -9999px; }

/* ===================== TICKER ===================== */
/* Ticker retinté à plat (refonte homepage validée par Bastien, sept. 2026) :
   remplace le dégradé arc-en-ciel animé par un fond clair + liseré neon, en
   cohérence avec le reste de la page d'accueil. Composant partagé (chargé par
   header.php sur tout le site) — cosmétique uniquement, structure inchangée. */
.ticker {
  background: var(--ticker-bg);
  border-bottom: 2px solid var(--neon);
  overflow: hidden;
  height: 34px;
  display: flex;
  align-items: center;
}
.ticker-label {
  background: rgba(214,35,95,0.08);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 1;
  border-right: 1px solid rgba(214,35,95,0.15);
}
.ticker-dot { width: 6px; height: 6px; background: var(--neon); border-radius: 50%; flex-shrink: 0; animation: pulse-dot 1.5s ease-in-out infinite; }
.ticker-viewport {
  flex: 1; overflow: hidden; height: 100%;
  mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 24px, black calc(100% - 24px), transparent);
}
.ticker-track { display: flex; align-items: center; height: 100%; animation: ticker-scroll 35s linear infinite; white-space: nowrap; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-track a {
  font-family: var(--font-ui); font-weight: 700; font-size: 13px;
  letter-spacing: 0.5px; color: var(--text); text-decoration: none;
  padding: 0 40px;
  transition: opacity 0.2s;
}
.ticker-track a:hover { text-decoration: underline; opacity: .85; }
.ticker-track a::before { content: '◆ '; opacity: 0.6; color: var(--neon); }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ===================== HEADER ===================== */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid rgba(214,35,95,0.12);
  box-shadow: 0 1px 24px rgba(214,35,95,0.06), 0 4px 16px rgba(0,0,0,0.04);
  position: sticky; top: 0; z-index: 500;
}
.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
  height: 70px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px;
}
.logo { display: flex; align-items: baseline; gap: 4px; flex-shrink: 0; }
.logo-gta {
  font-family: var(--font-display); font-size: 38px; letter-spacing: 2px;
  background: linear-gradient(90deg, #D6235F, #EA6000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(214,35,95,0.25));
}
.logo-wire { font-family: var(--font-display); font-size: 38px; letter-spacing: 2px; color: var(--text); line-height: 1; }
.logo-dot {
  width: 8px; height: 8px; background: var(--neon); border-radius: 50%;
  margin-bottom: 4px; animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.main-nav { display: flex; gap: 4px; align-items: center; }
.main-nav-list { display: flex; gap: 4px; align-items: center; list-style: none; margin: 0; padding: 0; }
.main-nav-list li { list-style: none; }
.nav-group-label { display: none; }
.main-nav a {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); padding: 6px 14px; border-radius: 4px;
  transition: color 0.2s, background 0.2s; position: relative;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--text); background: var(--surface2); }
.main-nav a.active::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  transform: translateX(-50%); width: 16px; height: 2px;
  background: var(--neon); border-radius: 2px;
}
.nav-badge {
  background: var(--neon); color: #fff; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px; margin-left: 4px;
  vertical-align: middle; letter-spacing: 0.5px;
}

.main-nav-list li.menu-item-has-children { position: relative; }
.main-nav-list li.menu-item-has-children > a::after { content: '\25BE'; margin-left: 5px; font-size: 10px; display: inline-block; transition: transform .2s; }
.main-nav-list li.menu-item-has-children.vc-dropdown-open > a::after { transform: rotate(180deg); }
.main-nav-list .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 16px 32px rgba(0,0,0,.14); padding: 8px; min-width: 230px; z-index: 600;
  list-style: none;
}
.main-nav-list li.menu-item-has-children:hover > .sub-menu,
.main-nav-list li.menu-item-has-children.vc-dropdown-open > .sub-menu { display: block; }
.main-nav-list .sub-menu li { list-style: none; }
.main-nav-list .sub-menu a {
  display: flex; align-items: center; padding: 9px 14px; border-radius: 4px; white-space: nowrap;
  font-size: 13px; letter-spacing: 1px;
}
.main-nav-list .sub-menu a:hover { background: var(--surface2); color: var(--text); }

/* Icônes par section, en SVG (cohérentes avec la charte, plus d'emoji) —
   appliquées à la fois au dropdown desktop et à la liste mobile : un seul
   jeu de règles, un trait clair (pas le gris sombre --muted, invisible
   depuis que header/dropdown/menu mobile sont tous passés au thème sombre). */
.main-nav-list a[href*="/actualites/"]::before,
.main-nav-list a[href*="/category/rumeurs"]::before,
.main-nav-list a[href*="/category/analyses"]::before,
.main-nav-list a[href*="/personnages/"]::before,
.main-nav-list a[href*="/lieux/"]::before,
.main-nav-list a[href*="/theories/"]::before,
.main-nav-list a[href*="fiches-vehicules"]::before,
.main-nav-list a[href*="fiches-armes"]::before,
.main-nav-list a[href*="/category/guides"]::before,
.main-nav-list a[href*="toutes-les-videos-officielles"]::before,
.main-nav-list a[href*="carte-interactive-de-leonida"]::before,
.main-nav-list a[href*="toutes-les-images-officielles"]::before,
.main-nav-list a[href*="chronologie-developpement"]::before,
.main-nav-list a[href*="radio-musique-gta-vi"]::before,
.main-nav-list a[href*="toutes-les-activites-de-gta-vi"]::before,
.main-nav-list a[href*="tous-les-animaux-de-gta-vi"]::before,
.main-nav-list a[href*="/extended-look/"]::before {
  content: ''; width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.main-nav-list a[href*="/actualites/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='14' height='14' rx='1'/%3E%3Cline x1='7' y1='9' x2='13' y2='9'/%3E%3Cline x1='7' y1='13' x2='13' y2='13'/%3E%3Cpath d='M17 8h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H9'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/category/rumeurs"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/category/analyses"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cline x1='14.5' y1='14.5' x2='20' y2='20'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/personnages/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/lieux/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.5 7-11.5A7 7 0 0 0 5 9.5C5 14.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.3'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/theories/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.5.4.8 1 .8 1.6V16h5.4v-.5c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="fiches-vehicules"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-5A2 2 0 0 1 6.4 6.5h11.2A2 2 0 0 1 19.5 8l1.5 5'/%3E%3Crect x='2.5' y='13' width='19' height='5' rx='1.5'/%3E%3Ccircle cx='7' cy='18.5' r='1.6'/%3E%3Ccircle cx='17' cy='18.5' r='1.6'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="fiches-armes"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.6 4.1 2.2 6.8L12 15.6l-5.6 4.1 2.2-6.8L3 8.8h6.8z'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/category/guides"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5.5C4.5 4.5 7 4 9 4.5S12 6 12 6s1-1 3-1.5 4.5 0 6 1v13c-1.5-1-4-1.5-6-1S12 19 12 19s-1-1-3-1.5-4.5 0-6 1V5.5z'/%3E%3Cline x1='12' y1='6' x2='12' y2='19'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="toutes-les-videos-officielles"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M11 9l5 3-5 3V9z' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="carte-interactive-de-leonida"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4L3 6v14l6-2 6 2 6-2V4l-6 2-6-2z'/%3E%3Cline x1='9' y1='4' x2='9' y2='18'/%3E%3Cline x1='15' y1='6' x2='15' y2='20'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="toutes-les-images-officielles"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.5'/%3E%3Cpath d='M21 16l-5-5-6 6-3-3-4 4'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="chronologie-developpement"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3Cline x1='8' y1='3' x2='8' y2='7'/%3E%3Cline x1='16' y1='3' x2='16' y2='7'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="radio-musique-gta-vi"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Ccircle cx='8' cy='15' r='1.6'/%3E%3Cline x1='13' y1='15' x2='17' y2='15'/%3E%3Cpath d='M12 10L18 4M6 6l2 2'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="toutes-les-activites-de-gta-vi"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-7 4 14 2-7h6'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="tous-les-animaux-de-gta-vi"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 4 13c0-6 7-11 7-11s7 5 7 11a7 7 0 0 1-7 7z'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="/extended-look/"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l6 4-6 4V8z' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); }

/* Extended Look : dossier du moment, mis en avant dans le dropdown Ressources */
.main-nav-list .sub-menu a[href*="/extended-look/"] {
  margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .12); border-radius: 0 0 4px 4px;
  padding-top: 13px; background: linear-gradient(90deg, rgba(124, 58, 237, .18), transparent);
}
.main-nav-list .sub-menu a[href*="/extended-look/"]:hover {
  background: linear-gradient(90deg, rgba(124, 58, 237, .28), rgba(255, 255, 255, .06));
}

.header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.search-btn {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); padding: 8px 16px; border-radius: 6px;
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px;
  cursor: pointer; display: flex; align-items: center; gap: 8px;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.search-btn:hover { border-color: var(--neon); color: var(--text); box-shadow: 0 0 0 3px rgba(214,35,95,0.08); }
.search-icon-btn { background: none; border: none; padding: 0; margin: 0; cursor: pointer; display: flex; align-items: center; color: inherit; flex-shrink: 0; }
.search-input {
  width: 110px; min-width: 0; border: none; background: transparent;
  font-family: var(--font-ui); font-size: 13px; letter-spacing: 1px;
  padding: 8px 14px 8px 8px; outline: none; color: inherit;
}
.search-btn kbd { background: var(--surface2); padding: 1px 5px; border-radius: 3px; font-size: 10px; border: 1px solid var(--border); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: 0.3s; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header-inner { position: relative; }
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .search-btn { position: relative; }
  .search-input {
    display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%);
    width: 200px; max-width: calc(100vw - 96px);
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12); padding: 8px 14px 8px 8px; margin: 0; z-index: 20;
  }
  .search-btn.open .search-input { display: block; }
  .header-right { gap: 8px; }
  .header-inner { padding: 0 16px; }
  .logo-gta, .logo-wire { font-size: 28px; }
  .main-nav {
    display: block; max-height: 0; overflow: hidden;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 32px rgba(0,0,0,.1); z-index: 400;
    transition: max-height .25s ease;
  }
  .main-nav::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg, var(--neon), var(--violet), var(--neon2));
  }
  .main-nav.open { max-height: calc(100vh - 70px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .main-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px 20px; }
  .main-nav-list li { list-style: none; }
  .main-nav-list a {
    display: flex; align-items: center; padding: 14px 10px; border-bottom: 1px solid var(--border);
    border-radius: 8px; transition: background .15s;
  }
  .main-nav-list a:active { background: var(--surface2); }
  .main-nav a.active::after { display: none; }

  .main-nav-list li.menu-item-has-children { margin-top: 14px; }
  .main-nav-list li.menu-item-has-children:first-child { margin-top: 2px; }
  .main-nav-list li.menu-item-has-children > a {
    display: inline-flex; padding: 5px 12px; margin: 0 10px 8px; border-bottom: none;
    font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: #fff; background: linear-gradient(90deg, var(--violet), var(--neon)); border-radius: 20px;
    pointer-events: none;
  }
  .main-nav-list li.menu-item-has-children > a::after { display: none; }
  .main-nav-list .sub-menu {
    display: block; position: static; box-shadow: none; border: none; padding: 0 0 0 8px; margin: 0 0 4px;
    background: none; min-width: 0; border-left: 2px solid var(--border);
  }
  .main-nav-list .sub-menu a {
    padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 15px;
    letter-spacing: normal; text-transform: none;
  }
}

/* ===================== BREADCRUMB ===================== */
.breadcrumb { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); transition: .2s; }
.breadcrumb a:hover { color: var(--neon); }
.bc-sep { opacity: .4; }

/* ===================== HERO (home) ===================== */
.hero { position: relative; height: 580px; overflow: hidden; display: flex; align-items: flex-end; }
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 40%, rgba(214,35,95,0.4) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 60%, rgba(234,96,0,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 50% 20%, rgba(0,153,187,0.22) 0%, transparent 50%),
    linear-gradient(180deg, #2A0F1C 0%, #1A1014 60%, #1A1014 100%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: linear-gradient(to bottom, transparent, black 30%, black 70%, transparent);
}
.hero-img { position: absolute; inset: 0; z-index: 2; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: saturate(1.12) contrast(1.05); }
.hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(20,10,14,.94) 0%, rgba(20,10,14,.82) 26%, rgba(20,10,14,.5) 46%, rgba(20,10,14,.15) 64%, rgba(20,10,14,0) 80%),
    linear-gradient(0deg, rgba(20,10,14,.65) 0%, rgba(20,10,14,0) 42%);
}
@media (max-width: 900px) {
  .hero-img::after { background: linear-gradient(180deg, rgba(20,10,14,.2) 0%, rgba(20,10,14,.82) 70%, rgba(20,10,14,.92) 100%); }
}
.hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg)); z-index: 5; pointer-events: none;
}
.hero-content { position: relative; z-index: 10; max-width: 1400px; margin: 0 auto; padding: 48px 24px 64px; width: 100%; }
.hero-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px; background: var(--neon); color: #fff;
  font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 12px; border-radius: 3px;
  box-shadow: 0 4px 16px rgba(214,35,95,0.35);
}
.hero-tag::before { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
.hero-tags .cat-tag { position: static; font-size: 11px; letter-spacing: 1.5px; padding: 5px 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.hero-title {
  font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 64px); line-height: 1.05; letter-spacing: 1px;
  margin-bottom: 16px; max-width: 780px; color: #FFF8EF;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  text-shadow: 0 2px 6px rgba(0,0,0,.5), 0 8px 40px rgba(0,0,0,.4);
}
.hero-title em {
  font-style: normal; color: var(--neon2);
  filter: drop-shadow(0 2px 10px rgba(234,96,0,0.5));
}
.hero-excerpt {
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55; color: rgba(255,248,239,.88); max-width: 620px;
  margin-bottom: 24px; text-shadow: 0 2px 12px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.hero-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 780px; }
.hero-meta-author { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: #FFF8EF; letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-meta-date { font-family: var(--font-ui); font-size: 13px; color: rgba(255,248,239,.8); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-meta-sep { color: rgba(255,248,239,.35); }
.hero-read-btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--neon); color: #fff;
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; padding: 12px 28px; border-radius: 4px;
  margin-top: 28px; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 6px 24px rgba(214,35,95,0.4);
}
.hero-read-btn:hover { background: #B81D50; transform: translateY(-2px); box-shadow: 0 10px 32px rgba(214,35,95,0.5); }
.hero-read-btn svg { transition: transform 0.2s; }
.hero-read-btn:hover svg { transform: translateX(4px); }

@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.fade-in { animation: fadeUp .6s ease both; }
.delay-1 { animation-delay: .1s; } .delay-2 { animation-delay: .2s; } .delay-3 { animation-delay: .3s; } .delay-4 { animation-delay: .4s; } .delay-5 { animation-delay: .5s; }

/* ===================== HOME H1 (SEO, discret) ===================== */
.home-tagline {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin: 20px 0 0;
}

/* ===================== SECTION LABEL ===================== */
/* Fidélité exacte à la maquette approuvée (demande explicite de Bastien,
   11 sept. 2026) : la barre verticale colorée de l'ancien design est
   remplacée par un "eyebrow" (petit label capitales) au-dessus du H2,
   structure identique à .section-head/.eyebrow de la maquette. Classe
   .section-label confirmée homepage-only (grep : aucun autre template ne
   s'en sert), donc sans impact sur archive.php / single*.php. */
.eyebrow {
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 2px;
  font-weight: 700; font-size: 12px; color: var(--muted);
}
.section-label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section-label-main { display: flex; flex-direction: column; gap: 4px; }
.section-label h2 {
  font-family: var(--font-display); font-size: 28px; letter-spacing: 2px;
  color: var(--text);
}
.section-label .see-all { font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--neon2); text-transform: uppercase; white-space: nowrap; transition: color 0.2s; }
.section-label .see-all:hover { color: var(--neon); }
.section-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(214,35,95,0.15), transparent); }

/* ===================== NEWS GRID ===================== */
.news-section { padding: 60px 0; position: relative; overflow: hidden; }
/* Filigrane "NEWS" en fond (::before géant à 160px) retiré le 11 sept. 2026 :
   c'était un reliquat de l'ancien design, absent de la maquette approuvée
   (template2.html), et Bastien l'a signalé comme un élément visuel resté
   de l'ancienne version malgré la refonte. Idem pour les 3 autres bandeaux
   ci-dessous (VIDÉOS, LEAKS, REDDIT). */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card {
  background: var(--surface); border: 1px solid rgba(214,35,95,0.1); border-radius: 10px; overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.news-card:hover { transform: translateY(-6px); border-color: rgba(214,35,95,0.3); box-shadow: 0 16px 48px rgba(214,35,95,0.12), 0 4px 16px rgba(0,0,0,0.08); }
.news-card-img { height: 200px; position: relative; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.news-card-img .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 48px; letter-spacing: 3px; position: relative; }
.news-card-img .img-placeholder::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(255,255,255,0.95)); }
.news-card-img .cat-tag { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; }
.news-card-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.news-card-badges .cat-tag { position: static; }
.news-card-badges .hero-tag { font-size: 10px; padding: 3px 10px; }
.news-card.featured .news-card-badges .hero-tag { font-size: 11px; padding: 4px 12px; }
.tag-news   { background: var(--neon); color: #fff; }
.tag-tuto   { background: var(--neon3); color: #fff; }
.tag-video  { background: var(--neon2); color: #fff; }
.tag-rumeur { background: var(--gold); color: #fff; }
.tag-leak   { background: linear-gradient(90deg, #7C3AED, #D6235F); color: #fff; }
.tag-analyse{ background: var(--violet); color: #fff; }
.tag-guide  { background: var(--neon3); color: #fff; }
.role-protagoniste { background: linear-gradient(90deg,#7C3AED,#D6235F); color: #fff; }
.role-secondaire   { background: var(--neon3); color: #fff; }
.role-antagoniste  { background: var(--neon); color: #fff; }
.role-faction      { background: var(--gold); color: #fff; }
.type-ville    { background: var(--neon2); color: #fff; }
.type-quartier { background: var(--neon3); color: #fff; }
.type-nature   { background: #16a34a; color: #fff; }
.type-poi      { background: var(--gold); color: #fff; }
.status-rumeur        { background: var(--gold); color: #fff; }
.status-en-discussion { background: var(--violet); color: #fff; }
.status-confirmee     { background: #16a34a; color: #fff; }
.status-dementie       { background: var(--neon); color: #fff; }
.vehicule-voiture { background: var(--neon2); color: #fff; }
.vehicule-moto    { background: var(--neon3); color: #fff; }
.vehicule-avion   { background: var(--violet); color: #fff; }
.vehicule-bateau  { background: #16a34a; color: #fff; }
.vehicule-velo    { background: var(--gold); color: #fff; }
.arme-fusil         { background: var(--neon2); color: #fff; }
.arme-poing         { background: var(--neon3); color: #fff; }
.arme-lourde        { background: var(--violet); color: #fff; }
.arme-explosif      { background: var(--neon); color: #fff; }
.arme-corps-a-corps { background: var(--gold); color: #fff; }

/* Pastille de taxonomie réutilisée dans l'encart clé de la sidebar (hors .hero-tags/.news-card-img) */
.kf-pill .cat-tag { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 12px; border-radius: 3px; margin-top: 2px; }

.news-card-body { padding: 20px; }
.news-card-body h3 { font-family: var(--font-ui); font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: var(--text); transition: color 0.2s; }
.news-card:hover .news-card-body h3 { color: var(--neon); }
.news-card-body p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card.featured .news-card-body p { font-size: 16px; -webkit-line-clamp: 2; }
.news-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.07); }
.news-card-author { display: flex; align-items: center; gap: 8px; }
.author-avatar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 12px; font-weight: 700; flex-shrink: 0; color: #fff; overflow: hidden; }
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.av1 { background: linear-gradient(135deg, #D6235F, #EA6000); }
.av2 { background: linear-gradient(135deg, #0099BB, #7C3AED); }
.av3 { background: linear-gradient(135deg, #D4920A, #EA6000); }
.av4 { background: linear-gradient(135deg, #7C3AED, #D6235F); }
.av5 { background: linear-gradient(135deg, #0099BB, #D6235F); }
.author-name { font-family: var(--font-ui); font-size: 12px; color: var(--muted); }
.news-date { font-family: var(--font-ui); font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
.news-card.featured { grid-column: 1 / 3; }
.news-card.featured .news-card-img { height: 320px; }
.news-card.featured .news-card-body h3 { font-size: 26px; }

/* ===================== HOME BENTO (page d'accueil uniquement) =====================
   Grille "Dernières news" de la page d'accueil, refonte validée par Bastien
   (sept. 2026) : visuel plein cadre + dégradé + texte en surimpression.
   Classes dédiées et non partagées avec .news-grid/.news-card (archive.php,
   pages catégorie) pour ne pas modifier ces pages avant leur propre passage
   en revue. */
.home-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 120px; gap: 16px; }
.bento-tile {
  position: relative; grid-column: span 2; grid-row: span 2; overflow: hidden; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: flex-end; background: var(--text);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: transform 0.3s, box-shadow 0.3s;
}
.bento-tile.big { grid-column: span 4; grid-row: span 4; }
.bento-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(214,35,95,0.18); }
.bento-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 10%; transition: transform 0.5s ease; }
.bento-tile:hover img { transform: scale(1.045); }
.bento-tile .img-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 32px; letter-spacing: 3px; }
.bento-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,16,20,0) 38%, rgba(26,16,20,0.88) 100%); }
.bento-badges { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.bento-badges .hero-tag { font-size: 10px; padding: 3px 10px; }
.bento-tile.big .bento-badges .hero-tag { font-size: 11px; padding: 4px 12px; }
.bento-body { position: relative; z-index: 2; padding: 10px 16px 16px; width: 100%; }
.bento-body h3 { font-family: var(--font-ui); font-weight: 700; color: #fff; font-size: 16px; line-height: 1.25; margin-bottom: 6px; transition: color 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bento-tile.big .bento-body h3 { font-size: 25px; line-height: 1.15; -webkit-line-clamp: 3; }
.bento-tile:hover .bento-body h3 { color: #FFD9E4; }
.bento-meta { font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.5px; color: rgba(255,255,255,0.72); text-transform: uppercase; }

/* ===================== SIDEBAR LAYOUT (home) ===================== */
.content-sidebar { display: grid; grid-template-columns: 1fr 340px; gap: 40px; padding: 60px 0; }

/* Tutos / list — rangées à plat (refonte homepage validée), plus l'ancien
   pavé blanc avec ombre/dégradé : cohérent avec le ton plus éditorial du
   reste de la page d'accueil. Classe homepage-only (non partagée). */
/* Grille à 2 colonnes (numéro + contenu) identique à .guide-row de la
   maquette (fidélité exacte demandée par Bastien, 11 sept. 2026). Le tag de
   catégorie et le temps de lecture — absents de la maquette — sont
   conservés à l'intérieur du bloc contenu plutôt que dans une 3e colonne :
   déviation volontaire pour ne pas perdre ces infos réelles. */
.tuto-list { display: flex; flex-direction: column; }
.tuto-card { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding-block: 18px; border-top: 1px solid var(--border); transition: border-color 0.2s; }
.tuto-list .tuto-card:last-child { border-bottom: 1px solid var(--border); }
.tuto-num { font-family: var(--font-display); font-size: 28px; color: var(--neon2); line-height: 1; }
.tuto-card:hover .tuto-num { color: var(--neon3); }
.tuto-body .tuto-tag { display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--neon3); text-transform: uppercase; margin-bottom: 4px; }
.tuto-body h3 { font-family: var(--font-ui); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 5px; transition: color 0.2s; }
.tuto-card:hover .tuto-body h3 { color: var(--neon2); }
.tuto-body p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.45; max-width: 56ch; }
.tuto-meta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-family: var(--font-ui); font-size: 11px; color: var(--muted); white-space: nowrap; }

/* Sidebar widgets */
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.sidebar-widget { background: var(--surface); border: 1px solid rgba(214,35,95,0.1); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.widget-header { padding: 14px 18px; border-bottom: 1px solid rgba(214,35,95,0.1); font-family: var(--font-display); font-size: 18px; letter-spacing: 1.5px; color: var(--text); display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #FFF8FA, #FFF4EE); }
.widget-header span.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); flex-shrink: 0; }

.tweets-embed-wrap { min-height: 60px; padding: 4px; }
.tweets-embed-wrap a.twitter-timeline { color: transparent; font-size: 0; line-height: 0; display: block; }
.tweets-embed-wrap iframe { width: 100% !important; }

.tweets-cta { padding: 20px 18px; text-align: center; }
.tweets-cta p { font-family: var(--font-ui); font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.tweets-follow-btn { display: inline-flex; width: auto; padding: 10px 20px; }

/* HUD compte à rebours : reproduction fidèle du composant .hud de la
   maquette (encoche clip-path + double liseré) plutôt qu'un simple
   reteintage du .sidebar-widget générique — fidélité exacte demandée par
   Bastien, 11 sept. 2026. .sidebar-widget-countdown devient autonome (ne
   dépend plus de .sidebar-widget/.widget-header), donc toujours sans impact
   sur les autres pages single-*.php qui utilisent .sidebar-widget nu. */
.sidebar-widget-countdown {
  background: var(--teal-tint); color: var(--text);
  padding: 18px 18px 20px; border: 1px solid var(--teal-line);
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}
.sidebar-widget-countdown::after {
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(0,153,187,0.3);
  pointer-events: none;
}
.sidebar-widget-countdown .eyebrow { color: var(--neon3); display: flex; align-items: center; gap: 7px; }
.sidebar-widget-countdown h3 {
  font-family: var(--font-ui); font-size: 17px; color: var(--text); margin-top: 6px;
  text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
}
.countdown-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; position: relative; }
.countdown-unit { text-align: center; }
.countdown-num { display: block; font-family: var(--font-display); font-size: 32px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-lbl { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--neon3); margin-top: 4px; }
.countdown-note { margin-top: 12px; position: relative; font-family: var(--font-ui); font-size: 12px; color: var(--muted); text-align: center; letter-spacing: 0.3px; }
.countdown-note strong { color: var(--neon3); }

.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon3); box-shadow: 0 0 0 0 rgba(0,153,187,0.6); animation: live-pulse 1.6s infinite; flex-shrink: 0; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,153,187,0.55); }
  70% { box-shadow: 0 0 0 6px rgba(0,153,187,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,153,187,0); }
}

/* Widgets sidebar homepage alignés sur le style .card à plat de la maquette
   (bordure fine, sans dégradé ni ombre) — scopé via ".sidebar", wrapper
   présent uniquement sur front-page.php : les .sidebar-widget de
   single*.php (aside.article-sidebar) restent inchangés. */
.sidebar .sidebar-widget { background: var(--surface); border: 1px solid var(--border); border-radius: 0; box-shadow: none; padding: 18px; }
.sidebar .sidebar-widget .widget-header { background: none; border-bottom: none; padding: 0 0 12px; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sidebar .sidebar-widget .widget-header span.dot { display: none; }
.sidebar .hot-topics { padding: 0; }
.sidebar .hot-topic-item { padding: 12px 0; border-top: 1px solid var(--border); border-bottom: none; }
.sidebar .hot-topic-item:first-child { border-top: none; }
.sidebar .hot-topic-item:hover { background: none; }
.sidebar .hot-rank { font-size: 20px; }
.sidebar .social-links { padding: 0; gap: 10px; }
.sidebar .social-btn { border-radius: 0; }
.sidebar .tweets-cta { padding: 0; text-align: left; }
.sidebar .tweets-embed-wrap { padding: 0; }

.hot-topics { padding: 6px 0; }
.hot-topic-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; transition: background 0.2s; border-bottom: 1px solid rgba(0,0,0,0.05); }
.hot-topic-item:last-child { border-bottom: none; }
.hot-topic-item:hover { background: #FDF5F7; }
.hot-rank { font-family: var(--font-display); font-size: 22px; color: rgba(214,35,95,0.12); width: 24px; flex-shrink: 0; line-height: 1; }
.hot-topic-item:nth-child(1) .hot-rank { color: var(--neon); }
.hot-topic-item:nth-child(2) .hot-rank { color: var(--neon2); }
.hot-topic-item:nth-child(3) .hot-rank { color: var(--gold); }
.hot-info h4 { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 2px; transition: color 0.2s; }
.hot-topic-item:hover .hot-info h4 { color: var(--neon); }
.hot-info span { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }

.social-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 6px; border: 1px solid rgba(214,35,95,0.14); font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: 0.5px; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: pointer; }
.social-btn:hover { background: #FDF5F7; border-color: rgba(214,35,95,0.3); box-shadow: 0 2px 8px rgba(214,35,95,0.1); }
.social-btn-soon { flex-direction: column; gap: 2px; color: var(--muted); border-style: dashed; cursor: default; background: rgba(0,0,0,0.02); }
.social-btn-soon:hover { background: rgba(0,0,0,0.02); border-color: rgba(214,35,95,0.14); box-shadow: none; }
.social-btn-soon small { font-size: 9px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--muted); opacity: 0.75; }

/* ===================== VIDEOS SECTION ===================== */
.videos-section { padding: 60px 0; position: relative; overflow: hidden; }
/* Filigrane "VIDÉOS" retiré, voir commentaire sur .news-section ci-dessus. */
.video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.video-card { background: var(--surface); border: 1px solid rgba(214,35,95,0.1); border-radius: 10px; overflow: hidden; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.video-card:hover { transform: translateY(-4px); border-color: rgba(234,96,0,0.3); box-shadow: 0 12px 36px rgba(234,96,0,0.12); }
.video-thumb { height: 140px; position: relative; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; position: absolute; inset: 0; }
.video-thumb .vthumb-bg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.play-btn { width: 48px; height: 48px; background: var(--neon); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 16px rgba(214,35,95,0.4); position: relative; }
.video-card:hover .play-btn { transform: scale(1.1); background: #B81D50; }
.play-btn svg { margin-left: 3px; }
.video-duration { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,0.65); color: #fff; font-family: var(--font-ui); font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; z-index: 2; }
.video-info { padding: 14px; }
.video-info h3 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 6px; transition: color 0.2s; }
.video-card:hover .video-info h3 { color: var(--neon2); }
.video-meta { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: 11px; color: var(--muted); }

/* ===================== LEAKS BAND ===================== */
.leaks-band { background: var(--rose-tint); border-top: 1px solid var(--rose-line); border-bottom: 1px solid var(--rose-line); padding: 40px 0; position: relative; overflow: hidden; }
/* Filigrane "LEAKS" retiré, voir commentaire sur .news-section plus haut. */
.leaks-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; position: relative; }
/* Fidélité exacte à la maquette (demande de Bastien, 11 sept. 2026) : carte à
   plat avec liseré gauche coloré (.rumeur-card) au lieu de la barre dégradée
   du haut, et pastille + libellé qualitatif (.reliability) au lieu du seul
   pourcentage. Le score réel (0-100, attribué par la rédaction) est conservé
   et affiché en complément du libellé plutôt que supprimé. */
.rumeurs-note { font-family: var(--font-body); color: var(--muted); font-size: 14px; max-width: 62ch; margin: -8px 0 20px; line-height: 1.5; }
.leaks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; }
.leak-card { background: var(--surface); border: 1px solid var(--rose-line); border-left: 4px solid var(--neon); border-radius: 0; padding: 20px; position: relative; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 2px 8px rgba(214,35,95,0.06); }
.leak-card:hover { border-color: var(--neon); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(214,35,95,0.12); }
.reliability { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-weight: 700; margin-bottom: 12px; }
.reliability .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.reliability.unconfirmed { color: var(--neon2); }
.reliability.unconfirmed .dot { background: var(--neon2); }
.reliability.partial { color: var(--violet); }
.reliability.partial .dot { background: var(--violet); }
.reliability.pending { color: var(--muted); }
.reliability.pending .dot { background: var(--muted); }
.leak-card h3 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.leak-card p { font-size: 13px; color: var(--muted); line-height: 1.55; }
.leak-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.07); }
.leak-source { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.leak-votes { font-family: var(--font-ui); font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }

/* ===================== COMMUNITY (REDDIT) ===================== */
.community-section { padding: 48px 0; position: relative; overflow: hidden; }
/* Filigrane "REDDIT" retiré, voir commentaire sur .news-section plus haut. */
.community-sub { font-size: 13px; color: var(--muted); margin: -8px 0 24px; }
.reddit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.reddit-card { display: flex; align-items: flex-start; gap: 12px; background: var(--surface); border: 1px solid rgba(214,35,95,0.1); border-radius: 10px; padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
.reddit-card:hover { transform: translateY(-3px); border-color: #FF4500; box-shadow: 0 10px 24px rgba(255,69,0,0.12); }
.reddit-card-arrow { flex-shrink: 0; font-size: 15px; color: #FF4500; background: rgba(255,69,0,0.08); width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.reddit-card-body { min-width: 0; }
.reddit-card-title { font-family: var(--font-ui); font-weight: 600; font-size: 14.5px; color: var(--text); line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.reddit-card-meta { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); }

/* ===================== NEWSLETTER ===================== */
/* Fidélité exacte à la maquette (demande de Bastien, 11 sept. 2026) : bandeau
   plein orange sur 2 colonnes (texte + formulaire), au lieu du dégradé pastel
   centré précédent. Le vrai formulaire MailPoet est conservé, seul son
   habillage change pour matcher .nl-form/.nl-input/.nl-btn. */
.newsletter-section { margin: 0; padding: clamp(28px,4vw,44px) 24px; background: var(--neon2); border-top: none; border-bottom: none; }
.nl-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; }
.nl-title { font-family: var(--font-display); font-size: clamp(28px, 3vw, 37px); letter-spacing: 1px; color: #fff; line-height: 1.05; margin-bottom: 0; }
.nl-sub { font-size: 15px; color: rgba(255,255,255,0.9); margin: 6px 0 0; max-width: 48ch; }
.nl-form { display: flex; gap: 0; background: #fff; padding: 5px; }
.nl-input { flex: 1; background: transparent; border: none; color: var(--text); font-family: var(--font-body); font-size: 15px; padding: 12px 14px; border-radius: 0; outline: none; box-shadow: none; min-width: 0; }
.nl-input::placeholder { color: var(--muted); }
.nl-btn { background: var(--text); color: #fff; border: none; font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0 20px; border-radius: 0; cursor: pointer; transition: background 0.2s; white-space: nowrap; box-shadow: none; }
.nl-btn:hover { background: var(--neon); opacity: 1; transform: none; box-shadow: none; }

/* Formulaire MailPoet réel (remplace le <form> statique), réhabillé pour matcher .nl-form/.nl-input/.nl-btn */
.nl-mailpoet .mailpoet_form_popup_overlay { display: none !important; }
.nl-mailpoet #mailpoet_form_1 { width: 100% !important; border-radius: 0 !important; text-align: left !important; }
.nl-mailpoet .mailpoet_form_image,
.nl-mailpoet .mailpoet-heading,
.nl-mailpoet .mailpoet_spacer,
.nl-mailpoet .mailpoet_form_paragraph { display: none !important; }
.nl-mailpoet form.mailpoet_form {
	display: flex !important; flex-wrap: wrap; align-items: stretch; gap: 0 !important;
	padding: 0 !important; margin: 0 !important;
}
.nl-mailpoet .mailpoet_paragraph { display: contents !important; margin: 0 !important; }
.nl-mailpoet input.mailpoet_text {
	flex: 1 !important; width: auto !important; min-width: 160px; height: auto !important;
	box-sizing: border-box !important;
	background: transparent !important; border: none !important; color: var(--text) !important;
	font-family: var(--font-body) !important; font-size: 15px !important; padding: 12px 14px !important;
	margin: 0 !important; outline: none; box-shadow: none !important; border-radius: 0 !important;
}
.nl-mailpoet input.mailpoet_text:focus { outline: none !important; box-shadow: none !important; }
.nl-mailpoet input.mailpoet_text::placeholder { color: var(--muted); }
/* Le span d'erreur MailPoet est vide tant qu'aucune validation n'a échoué ;
   en display:contents (hérité de .mailpoet_paragraph) il reste un flex-item
   à part entière, et un flex-basis:100% même vide forçait un retour à la
   ligne entre le champ email et le bouton — d'où le formulaire "cassé"
   signalé par Bastien (11 sept. 2026). On ne réserve la ligne pleine largeur
   que lorsqu'il contient effectivement un message d'erreur. */
.nl-mailpoet [class*="mailpoet_error_"]:empty { display: none !important; }
.nl-mailpoet [class*="mailpoet_error_"]:not(:empty) { flex-basis: 100%; display: block; color: #fff; background: rgba(0,0,0,0.18); font-size: 12px; text-align: left; padding: 6px 14px; margin-top: 6px; }
.nl-mailpoet input.mailpoet_submit {
	background: var(--text) !important; color: #fff !important; border: none !important;
	font-family: var(--font-ui) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important;
	padding: 0 20px !important; width: auto !important; height: auto !important; cursor: pointer; white-space: nowrap;
	box-shadow: none !important; border-radius: 0 !important; transition: background 0.2s;
}
.nl-mailpoet input.mailpoet_submit:hover { background: var(--neon) !important; opacity: 1; transform: none; }
.nl-mailpoet .mailpoet_form_loading { display: none !important; }
.nl-mailpoet .mailpoet_message { flex-basis: 100%; margin: 10px 0 0 !important; padding: 0 !important; font-family: var(--font-body); font-size: 14px; text-align: left; color: #fff; }
.nl-mailpoet .mailpoet_validate_success { color: #fff !important; font-weight: 700; }
.nl-mailpoet .mailpoet_validate_error { color: #fff !important; font-weight: 700; background: rgba(0,0,0,0.2); padding: 4px 10px; }

/* ===================== ARCHIVE HERO (simple) ===================== */
.archive-hero { padding: 48px 24px 8px; max-width: 1400px; margin: 0 auto; }
.archive-hero h1 { font-family: var(--font-display); font-size: clamp(38px,6vw,64px); letter-spacing: 1px; margin-bottom: 8px; }
.archive-hero p { color: var(--muted); font-size: 15px; max-width: 640px; }
.archive-grid-wrap { padding: 32px 0 80px; }
.search-empty-state { padding: 24px 0 60px; text-align: center; }
.search-empty-state > p { color: var(--muted); font-size: 15px; margin-bottom: 20px; }
.search-empty-suggestions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; font-family: var(--font-ui); }
.pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.pagination .current { background: var(--neon); color: #fff; border-color: var(--neon); }
.pagination a:hover { border-color: var(--neon); color: var(--neon); }

/* ===================== ARTICLE HERO ===================== */
.article-hero { max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; }
.article-cats { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.cat-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 2px; padding: 4px 14px; border-radius: 3px; color: #fff; }
.cat-pill::before { content: ''; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: pulse-dot 1.5s ease-in-out infinite; }
.cat-leak { background: linear-gradient(90deg,#7C3AED,#D6235F); box-shadow: 0 4px 16px rgba(124,58,237,.3); }
.cat-hot  { background: var(--neon2); box-shadow: 0 4px 16px rgba(234,96,0,.3); }

.article-title {
  font-family: var(--font-display); font-size: clamp(38px,6vw,72px); line-height: .95; letter-spacing: 1px; margin-bottom: 22px; max-width: 860px;
  color: var(--violet);
  background: linear-gradient(90deg, var(--violet), var(--neon));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.article-title em { font-style: normal; background: linear-gradient(90deg,#7C3AED,#D6235F,#EA6000); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,.07); margin-bottom: 32px; }
.meta-author { display: flex; align-items: center; gap: 10px; }
.author-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,#7C3AED,#D6235F); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.author-av img { width: 100%; height: 100%; object-fit: cover; }
.author-info { display: flex; flex-direction: column; }
.author-name-lg { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text); }
.author-role { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.meta-sep { color: rgba(0,0,0,.12); font-size: 18px; }
.meta-item { font-family: var(--font-ui); font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.share-row { display: flex; gap: 8px; margin-left: auto; }
.share-row a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); transition: .2s; }
.share-row a:hover { border-color: var(--neon); color: var(--neon); }

.reliability-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,#F5F0FF,#EDE8FF); border: 1px solid rgba(124,58,237,.2); border-radius: 6px; padding: 6px 14px; }
.rb-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: #7C3AED; }
.rb-bar { width: 80px; height: 5px; background: rgba(124,58,237,.15); border-radius: 3px; overflow: hidden; }
.rb-fill { height: 100%; background: linear-gradient(90deg,#7C3AED,#D6235F); border-radius: 3px; }
.rb-val { font-family: var(--font-display); font-size: 18px; color: #7C3AED; line-height: 1; }

/* Cover image */
.article-cover { max-width: 1200px; margin: 0 auto; padding: 0 24px 40px; }
.cover-wrap { width: 100%; height: 460px; border-radius: 14px; overflow: hidden; position: relative; }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.cover-inner { width: 100%; height: 100%; position: relative; background: linear-gradient(135deg,#EDE8FF 0%,#F5E8FF 30%,#FFE8F0 60%,#FFF0E0 100%); display: flex; align-items: center; justify-content: center; }
.cover-inner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(124,58,237,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(124,58,237,.06) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,transparent,black 25%,black 75%,transparent); }
.cover-glow-left  { position: absolute; top: 20%; left: -5%; width: 50%; height: 70%; background: radial-gradient(ellipse,rgba(124,58,237,.18),transparent 65%); pointer-events: none; }
.cover-glow-right { position: absolute; bottom: 10%; right: 0%; width: 45%; height: 60%; background: radial-gradient(ellipse,rgba(214,35,95,.14),transparent 65%); pointer-events: none; }
.cover-text { font-family: var(--font-display); font-size: clamp(70px,14vw,160px); letter-spacing: 6px; background: linear-gradient(135deg,rgba(124,58,237,.25),rgba(214,35,95,.2),rgba(234,96,0,.15)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; z-index: 1; user-select: none; }
.cover-caption { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 10px; text-align: center; letter-spacing: .5px; }

/* Layout */
.article-layout { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; display: grid; grid-template-columns: 1fr 300px; gap: 48px; }
.article-body { min-width: 0; }

/* Chapô */
.article-intro { font-size: 18px; font-weight: 500; line-height: 1.6; color: #3a2a30; border-left: 3px solid var(--violet); padding: 14px 20px; margin-bottom: 32px; background: linear-gradient(135deg,rgba(124,58,237,.04),transparent); border-radius: 0 6px 6px 0; }

/* Body typography */
.article-body p { margin-bottom: 20px; color: #3a2a30; font-size: 16px; }
.article-body p strong { color: var(--text); font-weight: 600; }
.article-body h2 {
  font-family: var(--font-display); font-size: 34px; letter-spacing: 1.5px; margin: 40px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); position: relative;
  color: var(--neon);
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.article-body h2::before { content: ''; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: linear-gradient(90deg,var(--violet),var(--neon)); border-radius: 2px; }
.article-body h3 { font-family: var(--font-ui); font-size: 20px; font-weight: 700; color: var(--text); margin: 28px 0 10px; letter-spacing: .5px; }
.article-body img { border-radius: 10px; margin: 16px 0; }
.article-body ul, .article-body ol { margin: 0 0 20px 20px; color: #3a2a30; }
.article-body ul { list-style: disc; } .article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 8px; }

/* Claim box (leak citation) */
.claim-box { background: linear-gradient(135deg,#F5F0FF,#EDE8FF); border: 1px solid rgba(124,58,237,.2); border-left: 3px solid var(--violet); border-radius: 8px; padding: 20px 24px; margin: 28px 0; position: relative; }
.claim-box::before { content: '💬'; font-size: 20px; position: absolute; top: -12px; left: 16px; background: var(--bg); padding: 0 6px; }
.claim-box .cb-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--violet); margin-bottom: 8px; }
.claim-box p { margin: 0; font-size: 15px; color: #2a1e30; font-style: italic; }
.claim-box cite { display: block; font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 8px; font-style: normal; }

/* Feature grid */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }
.feature-card { background: #fff; border: 1px solid rgba(214,35,95,.1); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.04); transition: .2s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(124,58,237,.1); border-color: rgba(124,58,237,.25); }
.fc-icon { font-size: 22px; line-height: 1; }
.fc-title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text); }
.fc-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fc-cred { margin-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.fc-bar { height: 3px; width: 48px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; }
.fc-fill { height: 100%; border-radius: 2px; }
.high   { color: #16a34a; } .fc-fill.high   { background: #16a34a; width: 85%; }
.medium { color: #D4920A; } .fc-fill.medium { background: #D4920A; width: 55%; }
.low    { color: #D6235F; } .fc-fill.low    { background: #D6235F; width: 30%; }

/* Highlight / warning boxes */
.highlight-box { background: linear-gradient(135deg,#FFF8F0,#FFF0F4); border: 1px solid rgba(234,96,0,.18); border-left: 3px solid var(--neon2); border-radius: 8px; padding: 18px 22px; margin: 24px 0; }
.hb-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--neon2); margin-bottom: 8px; }
.highlight-box p { margin: 0; font-size: 15px; color: #2a1a10; }
.highlight-box ul { margin: 0; padding-left: 20px; list-style: disc; }
.highlight-box li { font-size: 15px; color: #2a1a10; margin-bottom: 6px; }
.highlight-box li:last-child { margin-bottom: 0; }

.warning-box { background: linear-gradient(135deg,#FFFBF0,#FFF8E0); border: 1px solid rgba(212,146,10,.2); border-left: 3px solid var(--gold); border-radius: 8px; padding: 18px 22px; margin: 24px 0; }
.warning-box .wb-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--gold); margin-bottom: 8px; }
.warning-box p { margin: 0; font-size: 15px; color: #2a1a00; }
.warning-box ul { margin: 0; padding-left: 20px; list-style: disc; }
.warning-box li { font-size: 15px; color: #2a1a00; margin-bottom: 6px; }
.warning-box li:last-child { margin-bottom: 0; }
.update-box { background: linear-gradient(135deg,#F0FBFF,#EAF7FA); border: 1px solid rgba(0,153,187,.2); border-left: 3px solid var(--neon3); border-radius: 8px; padding: 18px 22px; margin: 24px 0; }
.update-box .ub-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--neon3); text-transform: uppercase; margin-bottom: 8px; }
.update-box p { margin: 0; font-size: 15px; color: #0a2a30; }

.sources-box { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 18px 22px; margin: 32px 0 24px; }
.sources-box .sb-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.sources-box ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sources-box li { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.sources-box li a { color: var(--neon3); text-decoration: none; }
.sources-box li a:hover { text-decoration: underline; }

/* Timeline page enhancements (illustrations + video links) */
.tl-hero-img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 24px 0 8px; display: block; }
.tl-thumb { width: 100%; max-width: 380px; border-radius: 10px; margin: 14px 0; display: block; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.tl-video-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 20px;
  background: linear-gradient(135deg,var(--violet),var(--neon2)); color: #fff; font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-decoration: none; border-radius: 5px;
  transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 16px rgba(124,58,237,.25);
}
.tl-video-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124,58,237,.35); }

/* Quote */
.article-quote { position: relative; margin: 32px 0; padding: 20px 24px 20px 28px; border-left: 3px solid var(--gold); background: linear-gradient(135deg,#FFFBF0,transparent); }
.article-quote::before { content: '"'; font-family: var(--font-display); font-size: 72px; color: var(--gold); opacity: .2; position: absolute; top: -8px; left: 14px; line-height: 1; }
.article-quote blockquote { font-family: var(--font-ui); font-size: 19px; font-weight: 600; line-height: 1.4; color: var(--text); font-style: italic; position: relative; z-index: 1; }
.article-quote cite { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 8px; font-style: normal; }

/* Timeline */
.timeline { margin: 28px 0; display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: 16px; position: relative; }
.tl-left { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 36px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--violet); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--violet); flex-shrink: 0; margin-top: 3px; }
.tl-line { width: 2px; background: linear-gradient(to bottom,var(--violet),rgba(124,58,237,.15)); flex: 1; min-height: 24px; }
.tl-item:last-child .tl-line { display: none; }
.tl-content { padding-bottom: 20px; }
.tl-date { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--violet); margin-bottom: 4px; }
.tl-title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.tl-desc { font-size: 14px; color: var(--muted); line-height: 1.5; }

.tl-item.tl-upcoming .tl-dot { background: var(--gold); box-shadow: 0 0 0 2px var(--gold); animation: tlPulse 1.8s infinite; }
.tl-item.tl-upcoming .tl-line { background: linear-gradient(to bottom,var(--gold),rgba(212,146,10,.15)); }
.tl-item.tl-upcoming .tl-date { color: var(--gold); }
@keyframes tlPulse { 0%,100% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 2px var(--gold); } 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 0 7px rgba(212,146,10,.25); } }
.tl-upcoming-badge {
  display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
  color: #fff; background: var(--gold); padding: 2px 9px; border-radius: 3px; margin-left: 8px; vertical-align: middle;
}

/* Timeline : barre de filtres par catégorie */
.tl-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 32px; }
.tl-filter-btn {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2);
  color: var(--muted); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.tl-filter-btn:hover { border-color: var(--violet); color: var(--violet); }
.tl-filter-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.tl-filter-btn.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }
.tl-item.tl-hidden { display: none; }

/* Timeline : pastille de catégorie devant chaque date */
.tl-badge {
  display: inline-block; font-family: var(--font-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--muted);
  padding: 3px 8px; border-radius: 4px; margin-right: 8px; vertical-align: middle;
}
.tl-badge--announce { background: var(--neon2); }
.tl-badge--leak      { background: linear-gradient(90deg, #7C3AED, #D6235F); }
.tl-badge--delay     { background: var(--gold); }
.tl-badge--data      { background: var(--violet); }
.tl-badge--event     { background: var(--neon3); }
.tl-badge--context   { background: rgba(94,78,84,.55); }

/* Tags */
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.07); }
.article-tag { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--surface2); border: 1px solid var(--border); color: var(--muted); padding: 5px 12px; border-radius: 20px; transition: .2s; }
.article-tag:hover { color: var(--violet); border-color: rgba(124,58,237,.35); }

/* Author box */
.author-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 22px; margin-top: 36px; display: flex; gap: 18px; align-items: flex-start; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.author-box-av { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#7C3AED,#D6235F); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 22px; color: #fff; overflow: hidden; }
.author-box-av img { width: 100%; height: 100%; object-fit: cover; }
.author-box-info h4 { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.author-box-info .role { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--violet); margin-bottom: 8px; }
.author-box-info p { font-size: 13px; color: var(--muted); margin: 0; }

/* Related */
.related-articles { margin-top: 44px; }
.related-title { font-family: var(--font-display); font-size: 24px; letter-spacing: 2px; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.related-title::before { content: ''; display: block; width: 4px; height: 22px; background: var(--neon); border-radius: 2px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.related-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: .25s; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.related-card:hover { transform: translateY(-4px); border-color: rgba(214,35,95,.3); box-shadow: 0 10px 28px rgba(214,35,95,.1); }
.related-thumb { height: 110px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; letter-spacing: 3px; position: relative; overflow: hidden; }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; position: absolute; inset: 0; }
.related-info { padding: 12px; }
.related-cat { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--neon); margin-bottom: 3px; }
.related-info h4 { font-family: var(--font-ui); font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); transition: .2s; }
.related-card:hover .related-info h4 { color: var(--neon); }
.related-date { font-family: var(--font-ui); font-size: 11px; color: var(--muted); margin-top: 5px; }

/* Article sidebar */
.article-sidebar { display: flex; flex-direction: column; gap: 20px; }
/* Un seul widget sticky à la fois : avec plusieurs .sidebar-widget frères partageant le même
   top, ils se collent tous à top:86px simultanément dès qu'on scrolle assez loin et se
   superposent visuellement (vérifié en direct sur single.php, single-personnage.php et
   single-lieu.php, desktop >= 1101px — cf. audit du 10 sept. 2026). Seul le premier widget
   (fiche/infos clés, court) reste épinglé ; les widgets suivants (listes plus longues :
   autres personnages, à lire aussi...) défilent normalement. */
.article-sidebar .sidebar-widget:first-child { position: sticky; top: 86px; }

/* Verdict widget */
.verdict-body { padding: 16px; }
.verdict-score { text-align: center; padding: 12px 0 16px; }
.vs-num { font-family: var(--font-display); font-size: 64px; line-height: 1; background: linear-gradient(135deg,#7C3AED,#D6235F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.vs-label { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); margin-top: 4px; }
.verdict-bar { height: 8px; background: rgba(124,58,237,.12); border-radius: 4px; overflow: hidden; margin: 0 0 16px; }
.verdict-fill { height: 100%; background: linear-gradient(90deg,#7C3AED,#D6235F); border-radius: 4px; }
.verdict-criteria { display: flex; flex-direction: column; gap: 10px; }
.vc-item { display: flex; flex-direction: column; gap: 4px; }
.vc-header { display: flex; justify-content: space-between; }
.vc-name { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--muted); }
.vc-val  { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--text); }
.vc-bar  { height: 3px; background: rgba(0,0,0,.08); border-radius: 2px; overflow: hidden; }
.vc-fill { height: 100%; border-radius: 2px; }

/* Key facts */
.key-facts { padding: 8px 0; }
.key-fact { padding: 9px 16px; border-bottom: 1px solid rgba(0,0,0,.05); display: flex; flex-direction: column; gap: 2px; }
.key-fact:last-child { border-bottom: none; }
.kf-label { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); }
.kf-value { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--text); }
.kf-value.violet { color: var(--violet); } .kf-value.orange { color: var(--neon2); } .kf-value.green { color: #16a34a; } .kf-value.red { color: var(--neon); }

/* ===================== ART FIGURE (contenu ported de l'ancien thème) ===================== */
.article-body figure.art-figure { margin: 28px 0; }
.article-body figure.art-figure img {
  width: 100%; max-height: 520px; object-fit: contain; object-position: center;
  border-radius: 10px; display: block; margin: 0; background: var(--surface2);
  cursor: zoom-in; transition: opacity .2s;
}
.article-body figure.art-figure img:hover { opacity: .92; }
.article-body figure.art-figure figcaption { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.article-body figure.art-figure figcaption .src { display: block; margin-top: 3px; opacity: .75; }
.article-body p > img:only-child {
  max-height: 520px; width: 100%; object-fit: contain; border-radius: 10px;
  background: var(--surface2); cursor: zoom-in;
}

/* Pull-quote (variante de citation utilisée sur les fiches personnages/lieux) */
.pull-quote { position: relative; margin: 32px 0; padding: 24px 28px 20px 32px; border-left: 3px solid var(--gold); background: linear-gradient(135deg,#FFFBF0,transparent); border-radius: 0 8px 8px 0; }
.pull-quote .qmark { position: absolute; top: -6px; left: 10px; font-family: var(--font-display); font-size: 64px; color: var(--gold); opacity: .25; line-height: 1; }
.pull-quote p { font-family: var(--font-ui); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--text); font-style: italic; margin: 0; position: relative; z-index: 1; }
.pull-quote .attr { font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 10px; font-style: normal; }

/* Callout (encadré de contexte / avertissement) */
.callout { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(135deg,#F5F0FF,#EDE8FF); border: 1px solid rgba(124,58,237,.2); border-left: 3px solid var(--violet); border-radius: 8px; padding: 18px 22px; margin: 28px 0; }
.callout .ic { font-size: 20px; line-height: 1; flex-shrink: 0; }
.callout p { margin: 0; font-size: 14px; color: #2a1e30; line-height: 1.6; }
.callout-rumeur { background: linear-gradient(135deg,#FFF8F0,#FFF4E8); border-color: rgba(212,146,10,.25); border-left-color: var(--gold); }
.callout-rumeur p { color: #2a1a00; }

/* ===================== ID CARD (personnage / lieu) ===================== */
.id-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.05); margin: 28px 0; }
.id-card-head { padding: 14px 18px; border-bottom: 1px solid var(--border); font-family: var(--font-display); font-size: 18px; letter-spacing: 1.5px; background: linear-gradient(135deg,#FFF8FA,#FFF4EE); display: flex; align-items: center; gap: 10px; }
.id-card-head h4 { margin: 0; }
.id-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.id-grid dt { font-family: var(--font-ui); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); padding: 12px 18px 2px; }
.id-grid dd { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--text); padding: 0 18px 12px; }
.id-grid .full { grid-column: 1 / -1; }

/* ===================== COMMENTS ===================== */
.comments { margin-top: 44px; }
.comment-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.comment-item { display: flex; gap: 12px; }
.comment-item .avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.comment-item .who { font-family: var(--font-ui); font-size: 13px; font-weight: 700; color: var(--text); margin-right: 8px; }
.comment-item .when { font-family: var(--font-ui); font-size: 11px; color: var(--muted); }
.comment-item p { font-size: 14px; color: #3a2a30; margin: 4px 0; }
.comment-item .reply a { font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: var(--neon); text-transform: uppercase; letter-spacing: .5px; }
.comment-form-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px; }
.comment-form-wrap > p { margin-bottom: 12px; }
.comment-input-row { display: flex; gap: 12px; align-items: flex-start; }
.comment-input-row .avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.comment-form-wrap textarea, .comment-form-wrap input[type="text"], .comment-form-wrap input[type="email"], .comment-form-wrap input[type="url"] {
  width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: var(--font-body); font-size: 14px; background: var(--bg); color: var(--text); resize: vertical; min-height: 48px;
}
.comment-form-wrap textarea:focus, .comment-form-wrap input:focus { outline: none; border-color: var(--neon); box-shadow: 0 0 0 3px rgba(214,35,95,.1); }
.comment-form-wrap .submit { text-align: right; margin-top: 10px; }
.comment-form-wrap .submit input[type="submit"] { background: var(--neon); color: #fff; font-family: var(--font-ui); font-weight: 700; letter-spacing: 1.5px; padding: 10px 22px; border-radius: 6px; cursor: pointer; }
.comment-nav { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.no-comments { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

/* ===================== FOOTER ===================== */
/* Fidélité exacte à la maquette (demande de Bastien, 11 sept. 2026) : simple
   bandeau sur une ligne (copyright + nav à plat), au lieu des 4 colonnes de
   l'ancien design. Les vrais menus configurés (footer-1/2/3) sont conservés
   et simplement mis bout à bout dans une seule liste au lieu de 3 colonnes
   avec titres — aucune perte de navigation réelle. Composant partagé
   (footer.php, chargé sur toutes les pages). */
.site-footer { background: var(--bg); border-top: 1px solid var(--border); padding: 28px 0; }
.footer-bar { max-width: 1400px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bar .eyebrow { color: var(--muted); font-weight: 700; }
.footer-nav-flat ul { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-nav-flat li { list-style: none; }
.footer-nav-flat a { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.footer-nav-flat a:hover { color: var(--text); }

/* Widget area (WP default sidebar widgets, e.g. search) */
.widget { margin-bottom: 20px; }
.widget input[type="search"] { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; }

/* ===================== MOBILE ===================== */
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card.featured { grid-column: 1 / 3; }
  .home-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .bento-tile { grid-column: span 1; grid-row: span 1; }
  .bento-tile.big { grid-column: span 2; grid-row: span 2; }
  .content-sidebar { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: 1fr 1fr; }
  .nl-inner { grid-template-columns: 1fr; text-align: left; }
  .article-layout { grid-template-columns: 1fr; }
  /* .sidebar-widget seul (0,2,0) perdait contre .sidebar-widget:first-child
     (0,3,0) de la ligne ~908 malgré l'ordre — :first-child compte comme une
     classe pour la spécificité, donc la règle "sticky" restait gagnante ici
     même en dessous de 1100px. Widget "Infos clés" collé en position fixe
     et recouvrant "À lire aussi" en dessous, sur mobile. Le sélecteur doit
     matcher :first-child explicitement pour gagner. */
  .article-sidebar .sidebar-widget,
  .article-sidebar .sidebar-widget:first-child { position: static; }
  .feature-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-card.featured { grid-column: 1; }
  .home-bento { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .bento-tile, .bento-tile.big { grid-column: span 1; grid-row: span 1; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .leaks-grid { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: 1fr; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .hero { height: 520px; }
  .hero-excerpt { display: none; }
  .hero-title { -webkit-line-clamp: 4; }
  .cover-wrap { height: 260px; }
  .id-grid { grid-template-columns: 1fr; }
  .gw-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ===================== GALLERY / LIGHTBOX ===================== */
.gw-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 28px 0; }
.gw-gallery-item {
  position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; margin: 0; border: 1px solid var(--border);
  border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--surface2);
  box-shadow: 0 2px 8px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.gw-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; flex: 0 0 auto; transition: transform .3s; }
.gw-gallery-item:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(214,35,95,.15); border-color: rgba(214,35,95,.3); }
.gw-gallery-item:hover img { transform: scale(1.05); }
.gw-gallery-item::after {
  content: '\26f6'; position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(26,16,20,.55); color: #fff; font-size: 13px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s;
}
.gw-gallery-item:hover::after { opacity: 1; }
.gw-gallery-cap {
  display: block; padding: 9px 11px; background: transparent;
  color: var(--text); font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  text-align: left; line-height: 1.35; border-top: 1px solid var(--border);
}

.gw-gallery-title { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin: 32px 0 10px; display: flex; align-items: center; gap: 8px; }
.gw-gallery-title::before { content: ''; width: 4px; height: 14px; background: var(--neon); border-radius: 2px; }

.gw-lightbox {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  background: rgba(10,6,8,.92); opacity: 0; visibility: hidden; transition: opacity .25s ease;
  padding: 40px 24px;
}
.gw-lightbox.open { opacity: 1; visibility: visible; }
.gw-lightbox figure { max-width: 1100px; max-height: 90vh; margin: 0; display: flex; flex-direction: column; align-items: center; }
.gw-lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); transform: scale(.96); transition: transform .25s ease; }
.gw-lightbox.open img { transform: scale(1); }
.gw-lightbox figcaption { color: rgba(255,255,255,.75); font-family: var(--font-ui); font-size: 13px; letter-spacing: .3px; margin-top: 16px; text-align: center; max-width: 700px; }
.gw-lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s;
}
.gw-lightbox-close:hover { background: rgba(255,255,255,.18); }
.gw-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s;
}
.gw-lightbox-nav:hover { background: rgba(255,255,255,.18); }
.gw-lightbox-prev { left: 20px; }
.gw-lightbox-next { right: 20px; }
@media (max-width: 640px) {
  .gw-gallery { grid-template-columns: 1fr 1fr; }
  .gw-lightbox-nav { width: 38px; height: 38px; font-size: 16px; }
  .gw-lightbox-prev { left: 8px; } .gw-lightbox-next { right: 8px; }
}

/* =========================================================
   VICE CENTRAL V4.2 ALPHA — Visual system & UX refinement
   Non-destructive layer: keeps existing selectors intact.
   ========================================================= */
:root{--vc42-ink:#17151b;--vc42-muted:#716b78;--vc42-line:rgba(23,21,27,.10);--vc42-shadow:0 12px 34px rgba(42,25,48,.08);--vc42-radius-md:16px;--vc42-ease:cubic-bezier(.22,1,.36,1)}
body{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a,button,input,textarea,select{transition:color .2s var(--vc42-ease),background-color .2s var(--vc42-ease),border-color .2s var(--vc42-ease),box-shadow .2s var(--vc42-ease),transform .2s var(--vc42-ease)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(90,169,199,.65);outline-offset:3px}
.container{width:min(100% - 32px,1240px);margin-inline:auto}
.card,.post-card,.article-card,.guide-card,.news-card,.video-card,.theory-card,.character-card{border-radius:var(--vc42-radius-md);overflow:clip;box-shadow:0 1px 0 var(--vc42-line)}
.card:hover,.post-card:hover,.article-card:hover,.guide-card:hover,.news-card:hover,.video-card:hover,.theory-card:hover,.character-card:hover{box-shadow:var(--vc42-shadow);transform:translateY(-2px)}
.card img,.post-card img,.article-card img,.guide-card img,.news-card img,.video-card img,.theory-card img,.character-card img{transition:transform .45s var(--vc42-ease)}
.card:hover img,.post-card:hover img,.article-card:hover img,.guide-card:hover img,.news-card:hover img,.video-card:hover img,.theory-card:hover img,.character-card:hover img{transform:scale(1.025)}
button,.button,.btn,.wp-block-button__link{border-radius:999px;font-weight:700}
button:hover,.button:hover,.btn:hover,.wp-block-button__link:hover{transform:translateY(-1px)}
section>.section-title,.section-heading,.archive-title{letter-spacing:-.025em}
@media(max-width:767px){.container{width:min(100% - 24px,1240px)}button,.button,.btn,.wp-block-button__link,.nav-toggle,.menu-toggle{min-height:44px}.card:hover,.post-card:hover,.article-card:hover,.guide-card:hover,.news-card:hover,.video-card:hover,.theory-card:hover,.character-card:hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* =========================================================
   VICE CENTRAL V4.2 BETA — Editorial polish
   ========================================================= */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,253,251,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--vc42-line)}
.header-inner{min-height:76px;gap:24px}
.logo{letter-spacing:-.04em}
.main-nav-list>li>a{border-radius:999px;padding:10px 13px}
.main-nav-list>li>a:hover,.main-nav-list>li>a:focus-visible{background:rgba(227,79,131,.09);color:var(--vc42-pink)}
.hero{border-radius:0 0 var(--vc42-radius-lg) var(--vc42-radius-lg)}
.hero-content{padding-top:64px;padding-bottom:72px}
.hero-title{max-width:900px;letter-spacing:-.045em}
.hero-excerpt{max-width:680px;line-height:1.65}
.section-title{letter-spacing:-.04em}
.cat-tag,.hero-tag{border-radius:999px}
.post-card,.article-card,.guide-card,.news-card,.video-card,.theory-card,.character-card{background:var(--vc42-paper);border:1px solid var(--vc42-line)}
.post-card a:focus-visible,.article-card a:focus-visible,.guide-card a:focus-visible,.news-card a:focus-visible{outline-offset:-3px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border-radius:999px;border:1px solid var(--vc42-line)}
.pagination .current,.pagination a:hover{background:var(--vc42-pink);border-color:var(--vc42-pink);color:#fff}
@media(max-width:767px){.site-header{position:relative}.header-inner{min-height:64px}.hero{border-radius:0}.hero-content{padding-top:36px;padding-bottom:42px}.hero-title{font-size:clamp(34px,9vw,54px)}.main-nav-list>li>a{padding:12px 14px}}


/* =========================================================
   VICE CENTRAL V4.2 RC — Mobile, accessibility & finishing
   ========================================================= */
html { scroll-padding-top: 88px; }
body { overflow-x: hidden; }
img { height: auto; }
.main-nav a, .search-toggle, #gw-menu-toggle, #gw-search-toggle { touch-action: manipulation; }
@media (max-width: 767px) {
  .site-header { backdrop-filter: none; }
  .header-inner { gap: 12px; }
  /* .open manquant ici cassait le menu : cette règle (max-height non nul)
     avait la même spécificité que le ".main-nav { max-height:0 }" de base
     et gagnait par ordre d'apparition (elle vient après dans ce fichier),
     donc le menu mobile restait visuellement "ouvert" en permanence —
     débordant par-dessus le contenu qui suit puisqu'il est en
     position:absolute et ne réserve pas sa propre place dans le flux. */
  .main-nav.open { max-height: calc(100vh - 72px); overflow-y: auto; }
  .main-nav-list { gap: 4px; }
  .main-nav-list > li > a { display: flex; align-items: center; min-height: 44px; }
  .hero-excerpt { font-size: 15px; }
  .section-title { line-height: 1.08; }
}
@media (min-width: 768px) {
  .site-header { box-shadow: 0 1px 0 rgba(23,21,27,.04); }
}

/* =========================================================
   VICE CENTRAL V4.2.1 — Homepage editorial polish
   ========================================================= */
.home-tagline{font-size:clamp(28px,4vw,54px);line-height:1.02;letter-spacing:-.055em;max-width:900px;margin:38px auto 30px;font-weight:900}
.news-section{padding-top:8px}
.section-label{align-items:end;gap:18px}
.section-label-main h2{margin-top:5px}
.see-all{white-space:nowrap}
.home-bento{gap:14px}
.bento-tile{border-radius:18px;box-shadow:0 8px 26px rgba(42,25,48,.07);isolation:isolate}
.bento-tile::after{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,.22);border-radius:inherit;pointer-events:none;z-index:3}
.bento-tile img{transition:transform .65s cubic-bezier(.22,1,.36,1),filter .3s ease}
.bento-tile:hover img{transform:scale(1.045);filter:saturate(1.06)}
.bento-scrim{background:linear-gradient(180deg,rgba(15,10,18,.02) 20%,rgba(15,10,18,.82) 100%)}
.bento-body h3{font-size:clamp(18px,2vw,29px);line-height:1.08;letter-spacing:-.025em}
.bento-tile:not(.big) .bento-body h3{font-size:clamp(16px,1.5vw,21px)}
.bento-meta{opacity:.82}
.tuto-card{border-radius:14px;padding:18px 20px;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease}
.tuto-card:hover{transform:translateX(4px);box-shadow:0 8px 24px rgba(42,25,48,.06)}
.tuto-num{font-variant-numeric:tabular-nums}
.sidebar-widget,.sidebar-widget-countdown{border-radius:18px;box-shadow:0 8px 26px rgba(42,25,48,.055)}
.countdown-grid{gap:8px}
.countdown-unit{border-radius:12px;padding:12px 6px}
.hot-topic-item{border-radius:10px;padding:12px 10px}
.hot-topic-item:hover{background:rgba(227,79,131,.06)}
@media(max-width:767px){
 .home-tagline{margin:28px auto 24px;font-size:clamp(30px,9vw,44px)}
 .section-label{align-items:flex-start;flex-direction:column;gap:10px}
 .section-label .see-all{align-self:flex-start}
 .home-bento{gap:10px}
 .bento-tile{border-radius:14px}
 .bento-body{padding:18px}
 .tuto-card{padding:15px}
}

/* =========================================================
   VICE CENTRAL V4.2.3 — Final UX polish
   ========================================================= */
:root{--vc42-focus:rgba(227,79,131,.42)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--vc42-focus);outline-offset:3px}
.site-main{min-width:0}
.container,.content-area,.site-content{min-width:0}
.post-card,.article-card,.guide-card,.news-card,.video-card,.theory-card,.character-card{overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.post-card:hover,.article-card:hover,.guide-card:hover,.news-card:hover,.video-card:hover,.theory-card:hover,.character-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(42,25,48,.09);border-color:rgba(227,79,131,.22)}
.post-card img,.article-card img,.guide-card img,.news-card img,.video-card img,.theory-card img,.character-card img{display:block}
.entry-content{overflow-wrap:anywhere}
.entry-content a{text-decoration-thickness:1px;text-underline-offset:3px}
.entry-content blockquote{border-left:4px solid var(--vc42-pink);padding:14px 18px;background:rgba(227,79,131,.055);border-radius:0 12px 12px 0}
.wp-block-image img,.post-thumbnail img,.featured-image img{border-radius:14px}
input,textarea,select{max-width:100%;border-radius:10px;border:1px solid var(--vc42-line);background:var(--vc42-paper);color:inherit;padding:11px 13px}
input:focus,textarea:focus,select:focus{border-color:var(--vc42-pink)}
@media(max-width:767px){
 .post-card:hover,.article-card:hover,.guide-card:hover,.news-card:hover,.video-card:hover,.theory-card:hover,.character-card:hover{transform:none;box-shadow:none}
 .entry-content blockquote{padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){.post-card,.article-card,.guide-card,.news-card,.video-card,.theory-card,.character-card{transition:none}}

/* =========================================================
   VICE CENTRAL V4.2.3 — Readability & editorial details
   ========================================================= */
:root{--vc42-radius:16px}
.entry-content{font-size:1.04rem;line-height:1.78}
.entry-content h2,.entry-content h3,.entry-content h4{scroll-margin-top:96px;line-height:1.15;letter-spacing:-.025em}
.entry-content ul,.entry-content ol{padding-left:1.35rem}
.entry-content li+li{margin-top:.4rem}
.entry-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse}
.entry-content th,.entry-content td{padding:10px 12px;border:1px solid var(--vc42-line);text-align:left}
.entry-content th{background:rgba(227,79,131,.07);font-weight:800}
.wp-caption{max-width:100%;margin:1.5rem auto}
.wp-caption-text{font-size:.85rem;line-height:1.45;opacity:.72;margin-top:8px}
.comments-area input,.comments-area textarea{width:100%;box-sizing:border-box}
.comments-area .comment-list{padding-left:0;list-style:none}
.comments-area .comment{padding:18px 0;border-bottom:1px solid var(--vc42-line)}
.comments-area .comment-meta{font-size:.85rem;opacity:.72}
@media(max-width:767px){
 .entry-content{font-size:1rem;line-height:1.7}
 .entry-content h2{font-size:1.55rem}
 .entry-content h3{font-size:1.25rem}
 .entry-content table{font-size:.92rem}
}
@media print{
 .site-header,.site-footer,.main-nav,.sidebar,.comments-area,.share-buttons,.ad,.cookie-banner{display:none!important}
 .site-main,.content-area{width:100%!important;max-width:none!important}
 a{color:inherit!important;text-decoration:none!important}
}


/* Vice Central V4.2.4 polish */
:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--vc42-accent, #ff6b9a);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .entry-content img,
  .post-content img,
  .wp-block-image img {
    height: auto;
    max-width: 100%;
  }

  .entry-content pre,
  .post-content pre,
  .wp-block-code {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media print {
  .site-header,
  .site-footer,
  .mobile-menu,
  .comments-area,
  .share-buttons {
    display: none !important;
  }

  a {
    color: inherit !important;
    text-decoration: none !important;
  }
}


/* ===================== V4.3 HOMEPAGE + BRAND SYSTEM ===================== */
:root {
  --vc-brand-pink: #d6235f;
  --vc-brand-orange: #ea6000;
  --vc-brand-blue: #0099bb;
  --vc-ink-soft: #3f3037;
  --vc-card-radius: 14px;
}
.home-tagline {
  max-width: 900px;
  margin: 42px auto 28px;
  padding: 0 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: .98;
  letter-spacing: 1px;
  text-wrap: balance;
  background: linear-gradient(110deg, var(--vc-brand-pink), var(--vc-brand-orange) 55%, var(--vc-brand-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.news-section { padding-top: 8px; }
.section-label { align-items: end; gap: 18px; }
.section-label h2 { letter-spacing: 1.8px; }
.see-all { white-space: nowrap; }
.home-bento { gap: 14px; }
.bento-tile {
  border-radius: var(--vc-card-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 28px rgba(45,20,30,.07);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bento-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: inherit;
  pointer-events: none;
}
.bento-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(45,20,30,.14); }
.bento-tile img { transition: transform .45s ease; }
.bento-tile:hover img { transform: scale(1.035); }
.bento-body h3 { text-wrap: balance; }
.bento-meta { opacity: .9; }
.tuto-card, .sidebar-widget, .sidebar-widget-countdown {
  border-radius: var(--vc-card-radius);
  box-shadow: 0 6px 24px rgba(45,20,30,.05);
}
.tuto-card { transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.tuto-card:hover { transform: translateX(4px); }
.widget-header { letter-spacing: 1.5px; }
@media (max-width: 768px) {
  .home-tagline { margin-top: 28px; margin-bottom: 22px; font-size: clamp(38px, 11vw, 58px); }
  .section-label { align-items: start; flex-direction: column; gap: 8px; }
  .section-label .see-all { align-self: flex-start; }
  .bento-tile:hover { transform: none; }
  .bento-tile:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bento-tile, .bento-tile img, .tuto-card { transition: none; }
}


/* ===================== V4.4 HOMEPAGE SECTION LAYOUT ===================== */
.home-tagline{margin-bottom:34px}
.news-section{padding:18px 0 54px;background:linear-gradient(180deg,rgba(255,245,249,.72),rgba(255,255,255,0))}
.news-section .container{position:relative}
.news-section .section-label{margin-bottom:20px}
.home-bento{margin-bottom:0}
.section-divider{height:1px;background:linear-gradient(90deg,transparent,var(--vc42-line),transparent);margin:0}
.content-sidebar{padding:58px 0 64px;align-items:start}
.content-sidebar>div:first-child{min-width:0}
.content-sidebar .section-label{margin-bottom:18px}
.tuto-list{display:grid;gap:12px}
.sidebar{display:grid;gap:18px;position:sticky;top:104px;align-self:start}
.videos-section{padding:58px 0 62px;background:linear-gradient(180deg,rgba(238,249,255,.42),rgba(255,255,255,0))}
.videos-section .section-label,.leaks-band .section-label,.community-section .section-label{margin-bottom:20px}
.video-grid{gap:18px}
.leaks-band{padding:60px 0 64px;background:linear-gradient(135deg,rgba(255,242,231,.72),rgba(255,232,242,.52))}
.leaks-inner{max-width:1240px;margin:0 auto;padding:0 24px}
.rumeurs-note{max-width:820px;margin:-4px 0 24px;color:var(--vc-ink-soft);font-size:.96rem;line-height:1.65}
.community-section{padding:58px 0 62px;background:linear-gradient(180deg,rgba(246,241,255,.52),rgba(255,255,255,0))}
.community-sub{max-width:720px;margin:-4px 0 24px;color:var(--vc-ink-soft)}
.newsletter-section{margin-top:0}
@media(min-width:1000px){
 .home-bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:116px}
 .bento-tile.big{grid-column:span 7;grid-row:span 4}
 .bento-tile:not(.big){grid-column:span 5;grid-row:span 2}
 .content-sidebar{grid-template-columns:minmax(0,1fr) 320px;gap:48px}
}
@media(max-width:999px){
 .sidebar{position:static}
}
@media(max-width:767px){
 .news-section,.content-sidebar,.videos-section,.leaks-band,.community-section{padding-top:38px;padding-bottom:42px}
 .leaks-inner{padding:0 18px}
 .rumeurs-note,.community-sub{font-size:.92rem}
}



/* =====================================================================
   HOMEPAGE — hero mosaic ("Le fil") + secondary feed ("À ne pas manquer")
   Scoped to body.home for specificity/safety against global card styles.
   ===================================================================== */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home {
  --mosaic-bg: #17151b;
  --mosaic-panel: #29232d;
  --mosaic-accent: #ff477e;
  background: var(--mosaic-bg) !important;
  color: #fff !important;
  padding: 0 !important;
}

/* ---------- section shell ---------- */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-home-retain,
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed {
  background: transparent !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-home-retain > .container,
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed > .container {
  width: min(calc(100% - 48px), 1500px) !important;
  max-width: 1500px !important;
  margin-inline: auto !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-home-retain {
  padding: 70px 0 78px !important;
  background: radial-gradient(circle at 80% 0%, #302033 0%, var(--mosaic-bg) 48%, #121116 100%) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: end !important;
  gap: 14px 24px !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head > span {
  grid-column: 1/-1 !important;
  color: var(--mosaic-accent) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head h1,
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head h2 {
  margin: 0 !important;
  color: #fff !important;
  font-size: clamp(34px, 4vw, 62px) !important;
  line-height: .98 !important;
  letter-spacing: -2px !important;
  text-transform: none !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head > a {
  align-self: end !important;
  color: #fff !important;
  border: 1px solid rgba(255, 71, 126, .65) !important;
  border-radius: 999px !important;
  padding: 12px 17px !important;
  background: rgba(255, 71, 126, .08) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background-color .2s ease, border-color .2s ease;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head > a:hover {
  background: rgba(255, 71, 126, .18) !important;
  border-color: var(--mosaic-accent) !important;
}

/* ---------- mosaic grid ----------
   CSS Grid auto-placement with row/column spans: the lead card is 2x2,
   the second card is 1x2 (tall), the rest are plain 1x1 tiles. Because
   this relies on spans rather than named grid-template-areas, it degrades
   gracefully with any number of posts (1 to 8+) — important while the
   site is still building up its article catalogue. */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-rows: 108px !important;
  grid-auto-flow: row dense !important;
  gap: 16px !important;
  margin: 0 !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card {
  position: relative !important;
  grid-column: span 1 !important;
  grid-row: span 2 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: var(--mosaic-panel) !important;
  color: #fff !important;
  text-decoration: none !important;
  isolation: isolate;
  /* ombre extérieure pour le détachement + léger reflet intérieur en haut,
     pour une sensation de matière plutôt qu'un rectangle plat */
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  /* entrée en fondu/glissé au chargement, décalée carte par carte ;
     @media(prefers-reduced-motion:reduce) plus haut dans ce fichier
     ramène déjà toutes les durées d'animation à ~0, donc rien à refaire ici */
  animation: vc-card-in .5s cubic-bezier(.16, 1, .3, 1) backwards;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card:focus-visible {
  outline: 3px solid var(--mosaic-accent) !important;
  outline-offset: 3px !important;
}
@keyframes vc-card-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(1) { animation-delay: .02s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(2) { animation-delay: .08s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(3) { animation-delay: .14s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(4) { animation-delay: .2s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(5) { animation-delay: .26s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(6) { animation-delay: .32s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(7) { animation-delay: .38s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic > .vc-editorial-card:nth-child(8) { animation-delay: .44s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-lead {
  grid-column: span 2 !important;
  grid-row: span 4 !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-tall {
  /* span 4, matching is-lead: the column to its right holds two stacked
     span-2 standard cards (4 rows total), so anything other than 4 here
     staggers every row below it out of alignment. A span-3 "gentler crop"
     was tried and reverted for exactly that reason — pick source images
     without edge-to-edge text/banners for this slot instead. */
  grid-row: span 4 !important;
}
@media (hover: hover) and (pointer: fine) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--mosaic-accent) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .45) !important;
  }
}

/* full-bleed image with a bottom gradient the copy sits on — the card's
   height is entirely driven by its grid row-span, so a single rule set
   covers the lead card, the tall card and every standard tile. */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: var(--mosaic-panel) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* ties disparate screenshots/photos into one tonal palette instead of
     each card fighting the next at its own native brightness/saturation;
     starts blurred and clears once the browser fires onload (see the
     inline onload attribute in front-page.php), so a slow connection
     shows a soft placeholder instead of a flash of empty panel colour */
  filter: saturate(1.05) brightness(.95) blur(16px) !important;
  transform: scale(1.06) !important;
  transition: transform .35s ease, filter .5s ease !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-media img.is-loaded {
  filter: saturate(1.05) brightness(.95) blur(0) !important;
  transform: scale(1) !important;
}
@media (hover: hover) and (pointer: fine) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card:hover .vc-editorial-card-media img.is-loaded {
    transform: scale(1.05) !important;
  }
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-media span.vc-editorial-placeholder {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
  letter-spacing: 2px !important;
  color: rgba(255, 255, 255, .3) !important;
  /* motif discret plutôt qu'un aplat uni, pour que le cas "sans miniature"
     ne ressemble pas à une case vide/cassée */
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 30% 20%, rgba(255, 71, 126, .18), transparent 60%),
    var(--mosaic-panel) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-badge {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 3 !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: #22c55e !important;
  color: #06210f !important;
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, 0) 82%) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-copy {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 16px 18px 18px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag {
  display: inline-flex !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: var(--mosaic-accent) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}
/* réutilise le code couleur par catégorie déjà en place sur le reste du
   site (gw_tag_class(), voir .tag-news/.tag-rumeur/... plus haut dans ce
   fichier) plutôt qu'une seule teinte rose sur les dix cartes. */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-news    { background: var(--neon) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-rumeur  { background: var(--gold) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-leak    { background: linear-gradient(90deg, #7C3AED, #D6235F) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-analyse { background: var(--violet) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-guide,
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-tuto    { background: var(--neon3) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-tag.tag-video   { background: var(--neon2) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-copy h2 {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  overflow: hidden !important;
  margin: 0 !important;
  width: 100% !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-size: 18px !important;
  /* 700 : c'est une graisse réellement chargée par gw-google-fonts (comme
     900), mais 900 rendait le texte trop épais/massif sur une police déjà
     condensée — 700 reste net et lisible sans écraser la carte. */
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  /* filet de contraste en plus du dégradé, discret pour ne pas épaissir
     visuellement le texte */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-lead .vc-editorial-card-copy h2 {
  -webkit-line-clamp: 4 !important;
  font-size: 29px !important;
  line-height: 1.22 !important;
  letter-spacing: -.2px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-tall .vc-editorial-card-copy h2 {
  font-size: 20px !important;
  line-height: 1.3 !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card-copy small {
  margin: 0 !important;
  color: rgba(255, 255, 255, .65) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

@media (max-width: 900px) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 150px !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-lead {
    grid-column: span 2 !important;
    grid-row: span 3 !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-tall {
    grid-row: span 2 !important;
  }
}
@media (max-width: 560px) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-mosaic {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 220px !important;
    gap: 12px !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card,
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-tall {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-lead {
    grid-column: span 1 !important;
    grid-row: span 2 !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-editorial-card.is-lead .vc-editorial-card-copy h2 {
    font-size: 23px !important;
  }
}

/* ---------- secondary feed ("À ne pas manquer") ----------
   One large lead article (same visual language as the mosaic's is-lead:
   full-bleed image, gradient scrim, overlaid copy) next to a dense 2-col
   list of smaller items — a hero+river pattern rather than a repeat of
   the equal-weight mosaic grid, requested to match a reference layout. */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed {
  padding: 54px 0 70px !important;
  background: #29152f !important;
  border-top: 1px solid rgba(255, 71, 126, .3) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* -- lead article -- */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead {
  position: relative !important;
  display: block !important;
  min-height: 360px !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  background: var(--mosaic-panel) !important;
  color: #fff !important;
  text-decoration: none !important;
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: vc-card-in .5s cubic-bezier(.16, 1, .3, 1) backwards !important;
}
@media (hover: hover) and (pointer: fine) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead:hover {
    transform: translateY(-4px) !important;
    border-color: var(--mosaic-accent) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .45) !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead:hover .vc-extra-feed-lead-media img.is-loaded {
    transform: scale(1.05) !important;
  }
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead:focus-visible {
  outline: 3px solid var(--mosaic-accent) !important;
  outline-offset: 3px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: var(--mosaic-panel) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.05) brightness(.95) blur(16px) !important;
  transform: scale(1.06) !important;
  transition: transform .35s ease, filter .5s ease !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-media img.is-loaded {
  filter: saturate(1.05) brightness(.95) blur(0) !important;
  transform: scale(1) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .3) 58%, rgba(0, 0, 0, 0) 82%) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-copy {
  position: absolute !important;
  z-index: 2 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 22px 24px 24px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-copy h3 {
  margin: 0 !important;
  width: 100% !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -.2px !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-copy .vc-extra-feed-date {
  color: rgba(255, 255, 255, .65) !important;
}

/* -- list -- */
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: min-content !important;
  gap: 12px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .2s ease, border-color .2s ease, background-color .2s ease;
  animation: vc-card-in .5s cubic-bezier(.16, 1, .3, 1) backwards !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(1) { animation-delay: .06s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(2) { animation-delay: .1s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(3) { animation-delay: .14s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(4) { animation-delay: .18s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(5) { animation-delay: .22s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(6) { animation-delay: .26s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(7) { animation-delay: .3s !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list > a:nth-child(8) { animation-delay: .34s !important; }
@media (hover: hover) and (pointer: fine) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-item:hover {
    transform: translateY(-2px) !important;
    border-color: var(--mosaic-accent) !important;
    background: rgba(255, 255, 255, .08) !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-item:hover .vc-extra-feed-thumb img.is-loaded {
    transform: scale(1.06) !important;
  }
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-item:focus-visible {
  outline: 3px solid var(--mosaic-accent) !important;
  outline-offset: 2px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-thumb {
  width: 58px !important;
  height: 58px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: var(--mosaic-panel) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.05) brightness(.95) blur(10px) !important;
  transform: scale(1.06) !important;
  transition: transform .35s ease, filter .5s ease !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-thumb img.is-loaded {
  filter: saturate(1.05) brightness(.95) blur(0) !important;
  transform: scale(1) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-placeholder {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  color: rgba(255, 255, 255, .35) !important;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 12px),
    var(--mosaic-panel) !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead-media span.vc-extra-feed-placeholder {
  font-size: 20px !important;
  line-height: 1.15 !important;
  text-align: center !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-body {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
  padding-top: 1px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag {
  display: inline-flex !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: var(--mosaic-accent) !important;
  color: #fff !important;
  font-family: var(--font-ui) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-news    { background: var(--neon) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-rumeur  { background: var(--gold) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-leak    { background: linear-gradient(90deg, #7C3AED, #D6235F) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-analyse { background: var(--violet) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-guide,
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-tuto    { background: var(--neon3) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-tag.tag-video   { background: var(--neon2) !important; }
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-item strong {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  width: 100% !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  margin-top: 2px !important;
}
body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-date {
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, .55) !important;
}

@media (max-width: 900px) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-layout {
    grid-template-columns: 1fr !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-lead {
    min-height: 280px !important;
  }
}
@media (max-width: 520px) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 600px) {
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-home-retain {
    padding: 42px 0 50px !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-home-retain > .container,
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed > .container {
    width: calc(100% - 28px) !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head {
    display: block !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-zero-section-head > a {
    display: inline-block !important;
    margin-top: 16px !important;
  }
  body.home main.vc-zero-home.vc-home-minimal.vc-ultimate-home .vc-extra-feed-list {
    grid-template-columns: 1fr !important;
  }
}

/* 03 / L'UNIVERS — tuiles vers les hubs de contenu (fiches + dossier) */
.vc-universe { padding: 20px 0 70px; }
.vc-universe-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.vc-universe-tile {
  position: relative;
  grid-column: span 2;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.vc-universe-tile:hover {
  transform: translateY(-3px);
  border-color: var(--mosaic-accent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.vc-universe-tile:focus-visible { outline: 3px solid var(--mosaic-accent); outline-offset: 2px; }
.vc-universe-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 18px 20px;
}
.vc-universe-tile h3 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: .5px;
  color: #fff;
  margin-bottom: 3px;
}
.vc-universe-tile p {
  font-family: var(--font-ui);
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
}

/* Variante avec image de couverture (personnages, lieux, théories...) */
.vc-universe-tile-cover { background: var(--mosaic-panel); }
.vc-universe-cover-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.vc-universe-tile-cover:hover .vc-universe-cover-img { transform: scale(1.06); }
.vc-universe-tile-cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 8, 12, .92) 0%, rgba(10, 8, 12, .35) 48%, transparent 78%);
}

/* Variante sans image (repli icône, tant que le visuel n'est pas fourni) */
.vc-universe-tile-icon {
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--mosaic-panel);
  padding: 18px 20px;
}
.vc-universe-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  color: #fff;
  margin-bottom: 12px;
}
.vc-universe-icon svg { width: 20px; height: 20px; }
.vc-universe-tile-icon .vc-universe-body { position: static; padding: 0; }

.vc-universe-tile-featured {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .28), rgba(255, 71, 126, .12)), var(--mosaic-panel);
  border-color: rgba(124, 58, 237, .35);
}
@media (max-width: 900px) {
  .vc-universe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-universe-tile { grid-column: span 1; }
}
@media (max-width: 520px) {
  .vc-universe-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   ARCHIVE ("Toutes les actualités" et autres listes — archive.php)
   Même langage visuel que la homepage (fond sombre, cartes, couleurs par
   catégorie, flou-vers-net, focus clavier) mais sur ses propres variables
   scoped à .vc-archive : ces pages n'ont pas la classe body.home, donc
   les --mosaic-* définies là-bas ne sont pas héritées ici.
   ===================================================================== */
.vc-archive {
  --arc-bg: #17151b;
  --arc-panel: #29232d;
  --arc-accent: #ff477e;
  display: block;
  background: var(--arc-bg);
  color: #fff;
  padding-bottom: 70px;
}
.vc-archive-hero {
  padding: 60px 0 34px;
  background: radial-gradient(circle at 80% 0%, #302033 0%, var(--arc-bg) 48%, #121116 100%);
}
.vc-archive-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--arc-accent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.vc-archive-hero h1 {
  margin: 0 0 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 58px);
  line-height: .98;
  letter-spacing: 1px;
}
.vc-archive-desc {
  max-width: 640px;
  color: rgba(255, 255, 255, .6);
  font-size: 15px;
  line-height: 1.6;
}
.vc-archive-body {
  padding-top: 36px;
}
.vc-archive-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.vc-archive-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: var(--arc-panel);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  animation: vc-card-in .5s cubic-bezier(.16, 1, .3, 1) backwards;
}
.vc-archive-grid > a:nth-child(4n+1) { animation-delay: .02s; }
.vc-archive-grid > a:nth-child(4n+2) { animation-delay: .07s; }
.vc-archive-grid > a:nth-child(4n+3) { animation-delay: .12s; }
.vc-archive-grid > a:nth-child(4n+4) { animation-delay: .17s; }
@media (hover: hover) and (pointer: fine) {
  .vc-archive-card:hover {
    transform: translateY(-4px);
    border-color: var(--arc-accent);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .4);
  }
  .vc-archive-card:hover .vc-archive-card-media img.is-loaded {
    transform: scale(1.05);
  }
}
.vc-archive-card:focus-visible {
  outline: 3px solid var(--arc-accent);
  outline-offset: 3px;
}
.vc-archive-card-media {
  position: relative;
  height: 170px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--arc-panel);
}
.vc-archive-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(.95) blur(14px);
  transform: scale(1.06);
  transition: transform .35s ease, filter .5s ease;
}
.vc-archive-card-media img.is-loaded {
  filter: saturate(1.05) brightness(.95) blur(0);
  transform: scale(1);
}
.vc-archive-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .3);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 16px),
    var(--arc-panel);
}
.vc-archive-card-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 16px 15px;
}
.vc-archive-tag {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--arc-accent);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.vc-archive-tag.tag-news    { background: var(--neon); }
.vc-archive-tag.tag-rumeur  { background: var(--gold); }
.vc-archive-tag.tag-leak    { background: linear-gradient(90deg, #7C3AED, #D6235F); }
.vc-archive-tag.tag-analyse { background: var(--violet); }
.vc-archive-tag.tag-guide,
.vc-archive-tag.tag-tuto    { background: var(--neon3); }
.vc-archive-tag.tag-video   { background: var(--neon2); }
/* archive-personnage.php / archive-theorie.php : mêmes couleurs que les
   pastilles de rôle/statut déjà définies plus haut dans ce fichier
   (role-*, status-*), réutilisées telles quelles sur fond sombre. */
.vc-archive-tag.role-protagoniste { background: linear-gradient(90deg, #7C3AED, #D6235F); }
.vc-archive-tag.role-secondaire   { background: var(--neon3); }
.vc-archive-tag.role-antagoniste  { background: var(--neon); }
.vc-archive-tag.role-faction      { background: var(--gold); }
.vc-archive-tag.status-rumeur        { background: var(--gold); }
.vc-archive-tag.status-en-discussion { background: var(--violet); }
.vc-archive-tag.status-confirmee     { background: #16a34a; }
.vc-archive-tag.status-dementie      { background: var(--neon); }
/* search.php : résultats mixtes (lieux, véhicules, armes en plus des
   articles/personnages/théories déjà couverts ci-dessus). */
.vc-archive-tag.type-ville    { background: var(--neon2); }
.vc-archive-tag.type-quartier { background: var(--neon3); }
.vc-archive-tag.type-nature   { background: #16a34a; }
.vc-archive-tag.type-poi      { background: var(--gold); }
.vc-archive-tag.vehicule-voiture { background: var(--neon2); }
.vc-archive-tag.vehicule-moto    { background: var(--neon3); }
.vc-archive-tag.vehicule-avion   { background: var(--violet); }
.vc-archive-tag.vehicule-bateau  { background: #16a34a; }
.vc-archive-tag.vehicule-velo    { background: var(--gold); }
.vc-archive-tag.arme-fusil         { background: var(--neon2); }
.vc-archive-tag.arme-poing         { background: var(--neon3); }
.vc-archive-tag.arme-lourde        { background: var(--violet); }
.vc-archive-tag.arme-explosif      { background: var(--neon); }
.vc-archive-tag.arme-corps-a-corps { background: var(--gold); }

/* -- état vide (aucun résultat) -- */
.vc-archive-empty-state { padding: 20px 0 40px; }
.vc-archive-empty-state > p { color: rgba(255, 255, 255, .6); font-size: 15px; margin-bottom: 20px; }
.vc-archive-empty-suggestions { display: flex; flex-wrap: wrap; gap: 10px; }
.vc-archive-suggestion {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .75);
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
.vc-archive-suggestion:hover { color: #fff; border-color: var(--arc-accent); }
.vc-archive-card-copy h2 {
  margin: 0;
  width: 100%;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.1px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vc-archive-card-copy p {
  margin: 0;
  width: 100%;
  color: rgba(255, 255, 255, .55);
  font-size: 13.5px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.vc-archive-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5);
  font-size: 11.5px;
}
.vc-archive-card-author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vc-archive-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--arc-accent), var(--violet));
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
}
.vc-archive-empty {
  padding: 40px 0;
  color: rgba(255, 255, 255, .6);
}
.vc-archive-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 44px;
  font-family: var(--font-ui);
}
.vc-archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.vc-archive-pagination a.page-numbers:hover {
  border-color: var(--arc-accent);
  color: #fff;
}
.vc-archive-pagination .page-numbers.current {
  background: var(--arc-accent);
  border-color: var(--arc-accent);
  color: #fff;
}
.vc-archive-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

@media (max-width: 1100px) {
  .vc-archive-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .vc-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .vc-archive-grid { grid-template-columns: 1fr; }
  .vc-archive-hero { padding: 44px 0 28px; }
}


/* =====================================================================
   ARTICLE (single.php) — même langage visuel que la homepage et l'archive.
   Scoped à .vc-article (pas de body.home ici) : les autres templates
   single-*.php gardent l'ancien thème clair tant qu'ils ne sont pas
   repassés un par un, comme convenu.
   ===================================================================== */
.vc-article {
  --art-bg: #17151b;
  --art-panel: #29232d;
  --art-accent: #ff477e;
  display: block;
  background: var(--art-bg);
  color: #fff;
  padding-bottom: 20px;
}

/* -- breadcrumb -- */
.vc-article .breadcrumb { color: rgba(255, 255, 255, .45); }
.vc-article .breadcrumb a { color: rgba(255, 255, 255, .55); }
.vc-article .breadcrumb a:hover { color: var(--art-accent); }
.vc-article .bc-current { color: #fff; }

/* -- hero -- */
.vc-article .article-title { color: #fff; }
.vc-article .article-meta { border-bottom-color: rgba(255, 255, 255, .1); }
.vc-article .author-name-lg { color: #fff; }
.vc-article .author-role,
.vc-article .meta-item { color: rgba(255, 255, 255, .55); }
.vc-article .meta-sep { color: rgba(255, 255, 255, .18); }
.vc-article .share-row a { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .6); }
.vc-article .share-row a:hover { border-color: var(--art-accent); color: #fff; }
.vc-article .reliability-badge {
  background: linear-gradient(135deg, rgba(124, 58, 237, .22), rgba(214, 35, 95, .14));
  border-color: rgba(124, 58, 237, .35);
}
.vc-article .rb-label { color: #c9a8ff; }
.vc-article .rb-bar { background: rgba(124, 58, 237, .25); }
.vc-article .rb-val { color: #c9a8ff; }

/* -- cover -- */
.vc-article .cover-wrap { background: var(--art-panel); }

/* -- body copy -- */
.vc-article .article-body p,
.vc-article .article-body ul,
.vc-article .article-body ol { color: rgba(255, 255, 255, .8); }
.vc-article .article-body p strong { color: #fff; }
.vc-article .article-body h2,
.vc-article .article-body h3 { color: #fff; }
.vc-article .article-intro {
  color: rgba(255, 255, 255, .85);
  background: linear-gradient(135deg, rgba(124, 58, 237, .16), transparent);
}
.vc-article .article-body figure.art-figure img,
.vc-article .article-body p > img:only-child {
  background: var(--art-panel);
}
.vc-article .article-body figure.art-figure figcaption { color: rgba(255, 255, 255, .5); }

/* -- callout boxes : même structure, fond teinté sombre par accent -- */
.vc-article .highlight-box {
  background: linear-gradient(135deg, rgba(234, 96, 0, .16), rgba(255, 71, 126, .06));
  border-color: rgba(234, 96, 0, .3);
}
.vc-article .highlight-box p,
.vc-article .highlight-box li { color: rgba(255, 255, 255, .85); }
.vc-article .warning-box {
  background: linear-gradient(135deg, rgba(212, 146, 10, .18), rgba(255, 71, 126, .05));
  border-color: rgba(212, 146, 10, .32);
}
.vc-article .warning-box p,
.vc-article .warning-box li { color: rgba(255, 255, 255, .85); }
.vc-article .update-box {
  background: linear-gradient(135deg, rgba(0, 153, 187, .18), rgba(124, 58, 237, .05));
  border-color: rgba(0, 153, 187, .32);
}
.vc-article .update-box p { color: rgba(255, 255, 255, .85); }

/* -- callout / sources-box / feature-grid / galerie : composants saisis
   directement dans le contenu des articles (the_content()), donc absents
   des fichiers de template — repérés après coup via un audit du contenu
   réel de plusieurs articles plutôt que par lecture des .php. Même
   défaut que highlight/warning/update-box avant correction : le texte
   restait clair (hérité de .article-body p) sur un fond resté clair,
   illisible sur fond sombre. */
.vc-article .callout {
  background: linear-gradient(135deg, rgba(124, 58, 237, .18), rgba(255, 71, 126, .05));
  border-color: rgba(124, 58, 237, .32);
}
.vc-article .callout p { color: rgba(255, 255, 255, .85) !important; }
.vc-article .callout-rumeur {
  background: linear-gradient(135deg, rgba(212, 146, 10, .18), rgba(255, 71, 126, .05));
  border-color: rgba(212, 146, 10, .32);
}
.vc-article .callout-rumeur p { color: rgba(255, 255, 255, .85) !important; }
/* .callout-info n'avait aucune règle de couleur propre (même en clair) :
   ajoutée ici plutôt que de la laisser retomber sur le violet de .callout
   par défaut, alors que l'icône 📅 suggère plutôt un ton "info neutre". */
.vc-article .callout-info {
  background: linear-gradient(135deg, rgba(0, 153, 187, .18), rgba(124, 58, 237, .05));
  border-color: rgba(0, 153, 187, .32);
}
.vc-article .callout-info p { color: rgba(255, 255, 255, .85) !important; }

.vc-article .sources-box {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .1);
}
.vc-article .sources-box .sb-label { color: rgba(255, 255, 255, .45); }
.vc-article .sources-box li { color: rgba(255, 255, 255, .7); }
.vc-article .sources-box li a { color: #5fd0e8; }

.vc-article .feature-card {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.vc-article .feature-card:hover { border-color: var(--art-accent); }
.vc-article .fc-title { color: #fff; }
.vc-article .fc-desc { color: rgba(255, 255, 255, .6); }

.vc-article .gw-gallery-title { color: rgba(255, 255, 255, .5); }
.vc-article .gw-gallery-item { background: var(--art-panel); border-color: rgba(255, 255, 255, .1); }
.vc-article .gw-gallery-cap { color: rgba(255, 255, 255, .85); border-top-color: rgba(255, 255, 255, .1); }
.vc-article .tl-title { color: #fff; }
.vc-article .tl-desc { color: rgba(255, 255, 255, .65); }
.vc-article .tl-filter-btn { background: var(--art-panel); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .6); }
.vc-article .tl-filter-btn:hover { border-color: var(--violet); color: #fff; }
.vc-article .tl-filter-btn.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }
.vc-article .article-quote { background: linear-gradient(135deg, rgba(124, 58, 237, .16), transparent); }
.vc-article .article-quote blockquote { color: #fff; }
.vc-article .article-quote cite { color: rgba(255, 255, 255, .5); }
.vc-article .pull-quote { background: linear-gradient(135deg, rgba(212, 146, 10, .14), transparent); }
.vc-article .pull-quote p { color: #fff; }
.vc-article .pull-quote .attr { color: rgba(255, 255, 255, .5); }
.vc-article .claim-box { background: linear-gradient(135deg, rgba(124, 58, 237, .16), rgba(124, 58, 237, .04)); }
.vc-article .claim-box::before { background: var(--art-bg); }
.vc-article .claim-box p { color: rgba(255, 255, 255, .85); }
.vc-article .claim-box cite { color: rgba(255, 255, 255, .5); }
.vc-article .id-card { background: var(--art-panel); border-color: rgba(255, 255, 255, .1); }
.vc-article .id-card-head { background: rgba(255, 255, 255, .04); border-bottom-color: rgba(255, 255, 255, .1); color: #fff; }
.vc-article .id-grid dt { color: rgba(255, 255, 255, .45); }
.vc-article .id-grid dd { color: #fff; }

/* -- tags -- */
.vc-article .article-tags { border-top-color: rgba(255, 255, 255, .1); }
.vc-article .article-tag {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .7);
}
.vc-article .article-tag:hover { color: #fff; border-color: var(--art-accent); }

/* -- author box -- */
.vc-article .author-box {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
.vc-article .author-box-info h4 { color: #fff; }
.vc-article .author-box-info .role { color: #c9a8ff; }
.vc-article .author-box-info p { color: rgba(255, 255, 255, .6); }

/* -- related articles -- */
.vc-article .related-title { color: #fff; }
.vc-article .related-card {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.vc-article .related-card:hover {
  border-color: var(--art-accent);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}
.vc-article .related-thumb { background: var(--art-panel); }
.vc-article .related-thumb img {
  filter: saturate(1.05) brightness(.95) blur(12px);
  transform: scale(1.06);
  transition: transform .35s ease, filter .5s ease;
}
.vc-article .related-thumb img.is-loaded {
  filter: saturate(1.05) brightness(.95) blur(0);
  transform: scale(1);
}
.vc-article .related-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-display);
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .3);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 12px),
    var(--art-panel);
}
.vc-article .related-info h4 { color: #fff; }
.vc-article .related-card:hover .related-info h4 { color: var(--art-accent); }
.vc-article .related-date { color: rgba(255, 255, 255, .5); }

/* -- sidebar -- */
.vc-article .article-sidebar .sidebar-widget {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
}
.vc-article .article-sidebar .widget-header {
  background: rgba(255, 255, 255, .03);
  border-bottom-color: rgba(255, 255, 255, .08);
  color: #fff;
}
.vc-article .key-fact { border-bottom-color: rgba(255, 255, 255, .07); }
.vc-article .kf-label { color: rgba(255, 255, 255, .45); }
.vc-article .kf-value { color: #fff; }
.vc-article .kf-value.violet { color: #c9a8ff; }
.vc-article .kf-value.orange { color: #ffb27a; }
.vc-article .hot-topic-item { border-bottom-color: rgba(255, 255, 255, .06); }
.vc-article .hot-topic-item:hover { background: rgba(255, 255, 255, .04); }
.vc-article .hot-rank { color: rgba(255, 71, 126, .25); }
.vc-article .hot-topic-item:nth-child(1) .hot-rank { color: var(--art-accent); }
.vc-article .hot-info h4 { color: #fff; }
.vc-article .hot-topic-item:hover .hot-info h4 { color: var(--art-accent); }
.vc-article .hot-info span { color: rgba(255, 255, 255, .45); }

/* -- comments -- */
.vc-article .section-label h2 { color: #fff; }
.vc-article .comment-item .who { color: #fff; }
.vc-article .comment-item .when { color: rgba(255, 255, 255, .45); }
.vc-article .comment-item p { color: rgba(255, 255, 255, .8); }
.vc-article .comment-item .reply a { color: var(--art-accent); }
.vc-article .comment-form-wrap {
  background: var(--art-panel);
  border-color: rgba(255, 255, 255, .1);
}
.vc-article .comment-form-wrap textarea,
.vc-article .comment-form-wrap input[type="text"],
.vc-article .comment-form-wrap input[type="email"],
.vc-article .comment-form-wrap input[type="url"] {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.vc-article .comment-form-wrap textarea::placeholder { color: rgba(255, 255, 255, .35); }
.vc-article .no-comments { color: rgba(255, 255, 255, .55); }
.vc-article .comment-form-wrap h4 { color: #fff; }

/* -- focus visible, sur-mesure -- */
.vc-article a:focus-visible,
.vc-article button:focus-visible {
  outline: 3px solid var(--art-accent) !important;
  outline-offset: 2px !important;
}

/* =====================================================================
   404
   ===================================================================== */
.vc-404 {
  display: flex;
  align-items: center;
  min-height: 60vh;
  background: radial-gradient(circle at 80% 0%, #302033 0%, #17151b 48%, #121116 100%);
  color: #fff;
}
.vc-404-inner { padding: 80px 24px; text-align: center; }
.vc-404-code {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(60px, 12vw, 140px);
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #D6235F, #EA6000);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vc-404-text {
  font-size: 18px;
  color: rgba(255, 255, 255, .6);
  margin: 12px 0 28px;
}

/* =====================================================================
   HEADER — sombre, cohérent avec le reste du site (quasiment toutes les
   pages le sont désormais). Placé en toute fin de fichier + !important
   ponctuel pour gagner sur la fois la règle de base (ligne ~124) ET la
   surcouche ".site-header" plus tardive (section "V4.2 RC", qui fixe
   encore un fond crème avec sa propre spécificité).
   ===================================================================== */
.site-header {
  /* ton "panneau" (celui des cartes) plutôt que la teinte quasi-noire du
     fond de page : sans ça le header se fondait dans le hero juste en
     dessous, sans hiérarchie visuelle — là il se détache clairement,
     façon barre d'outils posée au-dessus du contenu. */
  background: #29232d !important;
  border-bottom: 1px solid rgba(255, 71, 126, .22) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .4) !important;
}
.logo-wire { color: #fff !important; }
.main-nav a { color: rgba(255, 255, 255, .62) !important; }
.main-nav a:hover,
.main-nav a.active { color: #fff !important; background: rgba(255, 255, 255, .09) !important; }
.main-nav-list .sub-menu {
  background: #332c38 !important;
  border-color: rgba(255, 255, 255, .12) !important;
}
.main-nav-list .sub-menu a { color: rgba(255, 255, 255, .7) !important; }
.main-nav-list .sub-menu a:hover { background: rgba(255, 255, 255, .09) !important; color: #fff !important; }
.search-btn {
  background: rgba(255, 255, 255, .05) !important;
  border-color: rgba(255, 71, 126, .3) !important;
  color: rgba(255, 255, 255, .65) !important;
}
.search-btn:hover { border-color: #ff477e !important; color: #fff !important; background: rgba(255, 71, 126, .08) !important; }
.search-btn kbd {
  background: rgba(255, 255, 255, .1) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: rgba(255, 255, 255, .7) !important;
}
.hamburger span { background: #fff !important; }
@media (max-width: 768px) {
  .search-input {
    background: #332c38 !important;
    border-color: rgba(255, 71, 126, .25) !important;
    color: #fff !important;
  }
  .main-nav {
    background: #29232d !important;
    border-bottom-color: rgba(255, 71, 126, .22) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35) !important;
  }
  .main-nav-list a {
    color: rgba(255, 255, 255, .75) !important;
    border-bottom-color: rgba(255, 255, 255, .08) !important;
  }
  .main-nav-list a:active { background: rgba(255, 255, 255, .06) !important; }
}

/* =====================================================================
   FOOTER — sombre, dernière pièce sitewide qui restait dans l'ancien
   thème clair (chargée par get_footer() sur toutes les pages).
   ===================================================================== */
.site-footer {
  background: #1c1a20 !important;
  border-top: 1px solid rgba(255, 71, 126, .18) !important;
}
.footer-bar .eyebrow { color: rgba(255, 255, 255, .45) !important; }
.footer-nav-flat a { color: rgba(255, 255, 255, .6) !important; }
.footer-nav-flat a:hover { color: #fff !important; }

/* =====================================================================
   BODY — le fond de page lui-même n'avait jamais été repassé en sombre
   lors de la conversion ci-dessus : il restait sur l'ancien fond crème
   clair (var(--bg)). Invisible sur les pages assez longues pour être
   entièrement recouvertes par les blocs sombres (header/hero/cartes/
   footer), mais un bandeau clair bien visible apparaissait sous le
   footer sur les pages courtes (ex. dernière page de pagination avec
   peu d'éléments), le contenu ne remplissant pas toute la hauteur de
   la fenêtre. Fond aligné sur le ton le plus sombre déjà utilisé
   ailleurs sur le site (dégradé de la page 404).
   ===================================================================== */
html { background: #121116; }
body { background: #121116 !important; }

/* =====================================================================
   FOOTER ANCRÉ EN BAS — corriger le fond ci-dessus ne réglait que la
   couleur du vide sous le footer sur les pages courtes ; le footer
   restait positionné juste après le contenu au lieu d'être ancré en
   bas de la fenêtre, laissant un vide visible en dessous de lui.
   Pattern "sticky footer" classique : le <main> (présent sur tous les
   templates, juste après le header) s'étire pour occuper l'espace
   restant et pousse le footer tout en bas quand le contenu est court,
   sans rien changer sur les pages déjà assez longues pour remplir
   l'écran.
   ===================================================================== */
html { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > .site-footer { flex-shrink: 0; }

/* =====================================================================
   V8 : tagline, hero (une + 4), badges de fiabilité, bloc "Où en est
   GTA VI ?", newsletter, fraîcheur des tuiles, footer étoffé.
   Ajouts uniquement, en fin de fichier ; classes nouvelles préfixées vc-.
   ===================================================================== */

/* Tagline de positionnement sous le titre de la homepage */
body.home main.vc-zero-home .vc-tagline {
  margin: -8px 0 22px;
  color: rgba(255, 255, 255, .7);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

/* Rangée tag de catégorie + badge de fiabilité */
.vc-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* Badges Confirmé / Rapporté / Rumeur (meta _gw_reliability) */
.vc-rel-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid currentColor; background: rgba(18, 17, 22, .78);
  font-family: var(--font-ui); font-size: 9px; font-weight: 700; line-height: 1;
  letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.vc-rel-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vc-rel-confirme { color: #3cc4e4; }
.vc-rel-rapporte { color: #a98bf5; }
.vc-rel-rumeur   { color: #f0b13a; }
.article-cats .vc-rel-pill { font-size: 11px; padding: 5px 12px; letter-spacing: 1.2px; vertical-align: middle; }

/* Accroche de la grande une : 2 lignes maximum */
body.home main.vc-zero-home .vc-hero-teaser {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Bloc "Où en est GTA VI ?" */
body.home main.vc-zero-home .vc-status { padding: 44px 0 36px; background: radial-gradient(circle at 85% 0%, #3a2340 0%, #17151b 55%, #121116 100%); }
.vc-status-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
  list-style: none; margin: 0; padding: 0;
}
.vc-status-grid li { list-style: none; margin: 0; }
.vc-status-item {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  padding: 16px 18px; border-radius: 14px; text-decoration: none;
  background: #29232d; border: 1px solid rgba(255, 255, 255, .08); color: #fff;
  transition: transform .2s, border-color .2s;
}
.vc-status-item:hover { transform: translateY(-3px); border-color: #ff477e; }
.vc-status-item:focus-visible { outline: 3px solid #ff477e; outline-offset: 2px; }
.vc-status-label {
  color: #ff477e; font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.vc-status-value { font-family: var(--font-ui); font-size: 18px; font-weight: 700; line-height: 1.25; color: #fff; }
.vc-status-more { margin-top: auto; color: rgba(255, 255, 255, .55); font-size: 12px; }
@media (max-width: 1100px) { .vc-status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .vc-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .vc-status-grid { grid-template-columns: 1fr; } }

/* Encart newsletter : bandeau compact, une seule ligne (homepage et footer) */
.vc-newsletter { padding: 40px 0 48px; background: radial-gradient(circle at 85% 0%, #3a2340 0%, #17151b 55%, #121116 100%); }
.vc-newsletter-inner {
  max-width: 560px; margin: 0 auto; padding: 20px 22px; text-align: center;
  background: #29232d; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px;
}
.vc-newsletter-eyebrow { display: block; margin-bottom: 6px; color: #ff477e; font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.vc-newsletter-copy h2 { margin: 0 0 14px; color: #fff; font-family: var(--font-ui); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: 0; }
.vc-newsletter-form { max-width: 100%; }
.vc-foot-newsletter-form { flex: 1 1 380px; max-width: 520px; }
.vc-newsletter-form form, .vc-foot-newsletter-form form {
  margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px;
}
/* Éléments décoratifs du gabarit MailPoet par défaut : on ne garde que le champ et le bouton */
.vc-newsletter-form .mailpoet_form_image, .vc-newsletter-form .mailpoet-heading, .vc-newsletter-form .mailpoet_spacer,
.vc-newsletter-form .mailpoet_form_paragraph, .vc-newsletter-form .mailpoet_hp_email_label,
.vc-foot-newsletter-form .mailpoet_form_image, .vc-foot-newsletter-form .mailpoet-heading, .vc-foot-newsletter-form .mailpoet_spacer,
.vc-foot-newsletter-form .mailpoet_form_paragraph, .vc-foot-newsletter-form .mailpoet_hp_email_label { display: none !important; }
.vc-newsletter-form .mailpoet_paragraph, .vc-foot-newsletter-form .mailpoet_paragraph { margin: 0 !important; }
.vc-newsletter-form .mailpoet_paragraph:first-of-type, .vc-foot-newsletter-form .mailpoet_paragraph:first-of-type { flex: 1 1 180px; }
.vc-newsletter-form input[type="email"], .vc-newsletter-form input[type="text"],
.vc-foot-newsletter-form input[type="email"], .vc-foot-newsletter-form input[type="text"] {
  width: 100% !important; box-sizing: border-box; padding: 11px 14px !important; border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, .2) !important; background: #121116 !important; color: #fff !important;
}
.vc-newsletter-form input[type="submit"], .vc-foot-newsletter-form input[type="submit"] {
  width: auto !important; padding: 11px 22px !important; border-radius: 10px !important; border: 0 !important;
  background: #ff477e !important; color: #fff !important; font-weight: 700 !important; cursor: pointer;
}
.vc-newsletter-form .mailpoet_message, .vc-foot-newsletter-form .mailpoet_message { flex: 1 1 100%; color: rgba(255, 255, 255, .8); font-size: 13px; }

/* Fraîcheur des tuiles "Explorez GTA VI" */
.vc-universe-fresh { display: block; margin-top: 4px; color: rgba(255, 255, 255, .6); font-size: 11px; line-height: 1.3; }

/* Footer étoffé */
.site-footer { padding: 40px 0 0 !important; }
.vc-foot-main {
  max-width: 1400px; margin: 0 auto; padding: 0 24px 28px;
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px;
}
.vc-foot-logo { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.vc-foot-logo .logo-gta, .vc-foot-logo .logo-wire { color: #fff; font-size: 30px; }
.vc-foot-tagline { margin: 12px 0 14px; color: rgba(255, 255, 255, .65); font-size: 14px; line-height: 1.5; max-width: 34ch; }
.vc-foot-social { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.vc-foot-social a { color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .5px; text-decoration: none; border-bottom: 1px solid rgba(255, 71, 126, .6); }
.vc-foot-social a:hover { color: #ff477e; }
.vc-foot-col-title {
  margin: 0 0 12px; color: #fff; font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
.vc-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vc-foot-col li { list-style: none; }
.vc-foot-col a { color: rgba(255, 255, 255, .62); font-size: 14px; text-decoration: none; }
.vc-foot-col a:hover { color: #fff; }
.vc-foot-newsletter {
  max-width: 1400px; margin: 0 auto; padding: 24px; border-top: 1px solid rgba(255, 255, 255, .08);
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 48px; align-items: center;
}
.vc-foot-newsletter .vc-foot-col-title { margin: 0; font-size: 14px; }
.site-footer .footer-bar { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; padding-bottom: 22px; }
@media (max-width: 1000px) { .vc-foot-main { grid-template-columns: repeat(2, 1fr); } .vc-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 800px)  { .vc-foot-newsletter { grid-template-columns: 1fr; } }
@media (max-width: 480px)  { .vc-foot-main { grid-template-columns: 1fr; } }

/* Le calque de grain global (body::before) est retiré : fond net, les halos sont portés par les sections. */
body::before { display: none !important; }

/* "Où en est GTA VI ?" : carte compte à rebours + 4 cartes avec icône */
.vc-status-grid {
  grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(150px, auto);
  gap: 16px;
}
.vc-status-grid > li:first-child { grid-row: span 2; }
.vc-status-item { gap: 8px; padding: 20px 22px; border-radius: 16px; }
.vc-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 4px; border-radius: 10px;
  background: rgba(255, 71, 126, .14); color: #ff477e;
}
.vc-status-icon svg { width: 20px; height: 20px; }
.vc-status-item .vc-status-value { display: flex; flex-direction: column; gap: 2px; font-size: 19px; line-height: 1.25; }
.vc-status-item .vc-status-value span { display: block; }
.vc-status-hero {
  justify-content: space-between; padding: 26px 28px;
  background: linear-gradient(135deg, #ff477e 0%, #7c3aed 100%); border-color: transparent;
}
.vc-status-hero:hover { border-color: rgba(255, 255, 255, .5); }
.vc-status-hero .vc-status-label { color: rgba(255, 255, 255, .9); }
.vc-status-count { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.vc-status-count strong { font-family: var(--font-display); font-size: 110px; line-height: .9; color: #fff; letter-spacing: 1px; }
.vc-status-count span { color: rgba(255, 255, 255, .92); font-family: var(--font-ui); font-size: 15px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.vc-status-hero .vc-status-value { font-size: 22px; }
.vc-status-hero .vc-status-more { color: rgba(255, 255, 255, .85); }
@media (max-width: 900px) {
  .vc-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-status-grid > li:first-child { grid-column: 1 / -1; grid-row: auto; }
  .vc-status-count strong { font-size: 84px; }
}
@media (max-width: 520px) {
  .vc-status-grid { grid-template-columns: 1fr; }
  .vc-status-item { padding: 18px 18px; }
}

/* "Où en est GTA VI ?" : illustration de fond sur chaque carte (images officielles de la médiathèque) */
.vc-status-grid { grid-auto-rows: minmax(190px, auto); }
.vc-status-item { position: relative; overflow: hidden; isolation: isolate; justify-content: flex-end; background: #1c1a20; }
.vc-status-bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%; transition: transform .5s ease;
}
.vc-status-item:hover .vc-status-bg { transform: scale(1.05); }
.vc-status-item::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 17, 22, .1) 0%, rgba(18, 17, 22, .55) 50%, rgba(18, 17, 22, .94) 100%);
}
.vc-status-icon { position: absolute; top: 16px; left: 18px; margin: 0; background: rgba(18, 17, 22, .62); }
.vc-status-item .vc-status-value { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.vc-status-item .vc-status-more { color: rgba(255, 255, 255, .78); }
.vc-status-hero { background: #1c1a20; justify-content: space-between; }
.vc-status-hero::before {
  background: linear-gradient(180deg, rgba(255, 71, 126, .3) 0%, rgba(38, 16, 52, .55) 45%, rgba(18, 10, 28, .95) 100%);
}
.vc-status-hero .vc-status-label { position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.vc-status-count strong { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.vc-status-item:not(.vc-status-hero) .vc-status-more { margin-top: 2px; }
.vc-status-item:not(.vc-status-hero)::before {
  background: linear-gradient(180deg, rgba(18, 17, 22, .05) 0%, rgba(18, 17, 22, .6) 40%, rgba(18, 17, 22, .95) 78%);
}

/* Guide des versions console : badges de fiabilité, légende, verdicts et tableau comparatif */
.vc-badge { display: inline-block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.vc-badge.b-ok  { color: #3cc4e4; background: rgba(60, 196, 228, .1); }
.vc-badge.b-rep { color: #a98bf5; background: rgba(169, 139, 245, .1); }
.vc-badge.b-rum { color: #f0b13a; background: rgba(240, 177, 58, .1); }
.vc-badge.b-abs { color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .04); }
.vc-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 28px; padding: 0; list-style: none; }
.vc-legend li { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; line-height: 1.45; margin: 0; }
.vc-legend .vc-badge { display: table; margin-bottom: 8px; }
.vc-verdict { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 4px 0 18px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); border-left: 3px solid var(--neon); }
.vc-verdict p { margin: 0; }
.vc-verdict .vc-badge { flex: 0 0 auto; margin-top: 2px; }
.vc-table-wrap { overflow-x: auto; margin: 24px 0 30px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .025); -webkit-overflow-scrolling: touch; }
.vc-table-wrap table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; font-size: 14px; }
.vc-table-wrap th, .vc-table-wrap td { padding: 13px 14px; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); line-height: 1.45; }
.vc-table-wrap tbody tr:last-child td { border-bottom: 0; }
.vc-table-wrap thead th { font-family: var(--font-display); font-size: 17px; letter-spacing: 1.2px; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .06); border-bottom: 2px solid var(--neon); white-space: nowrap; }
.vc-table-wrap thead th.c-ps { border-bottom-color: #3b82f6; }
.vc-table-wrap thead th.c-pro { border-bottom-color: #a98bf5; }
.vc-table-wrap thead th.c-xbox { border-bottom-color: #4ade80; }
.vc-table-wrap tbody th[scope="row"] { font-weight: 700; color: #fff; background: #1b1a21; width: 150px; min-width: 150px; position: sticky; left: 0; z-index: 1; }
.vc-table-wrap thead th:first-child { position: sticky; left: 0; z-index: 2; width: 150px; min-width: 150px; background: #23222a; }
.vc-table-wrap tr.vc-cmp-group th { font-family: var(--font-ui); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--neon); background: #241722; padding: 9px 14px; }
.vc-table-wrap td { min-width: 150px; color: rgba(255, 255, 255, .82); }
.vc-table-wrap td .vc-badge { display: table; margin-bottom: 6px; }
.vc-verif { font-size: 14px; opacity: .8; margin: 6px 0 22px; }
@media (max-width: 720px) {
  .vc-legend { grid-template-columns: 1fr 1fr; }
  .vc-table-wrap tbody th[scope="row"], .vc-table-wrap thead th:first-child { width: 112px; min-width: 112px; font-size: 13px; }
}

/* Bloc "À lire aussi" sous les articles */
.vc-see-also { margin: 34px 0 10px; padding: 20px 22px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09); border-left: 3px solid var(--neon3); }
.vc-see-also-title { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--neon3); margin: 0 0 10px; }
.vc-see-also ul { margin: 0; padding: 0; list-style: none; }
.vc-see-also li { margin: 0; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.vc-see-also li:first-child { border-top: 0; }
.vc-see-also a { color: #fff; font-weight: 600; text-decoration: none; }
.vc-see-also a:hover { color: var(--neon3); }

/* Pied de page mobile : deux colonnes, zones tactiles de 44 px, formulaire confortable, lien retour en haut */
.vc-foot-top { color: rgba(255, 255, 255, .7); font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.vc-foot-top:hover { color: #fff; }
.vc-foot-toggle { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 0; color: inherit; cursor: default; }
.vc-foot-toggle:focus-visible { outline: 2px solid #0099BB; outline-offset: 2px; }
.vc-foot-chev { display: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); transition: transform .2s; }
@media (max-width: 600px) { .vc-foot-toggle { min-height: 52px; } }
@media (max-width: 600px) {
  .site-footer { padding-top: 30px !important; }
  .vc-foot-main { grid-template-columns: 1fr; gap: 0; padding: 0 20px 18px; }
  .vc-foot-brand { grid-column: 1 / -1; margin-bottom: 18px; }
  .vc-foot-col { border-top: 1px solid rgba(255, 255, 255, .1); }
  .vc-foot-col-title { margin: 0; }
  .vc-foot-col ul { gap: 0; padding-bottom: 10px; }
  .vc-foot-col.is-collapsible:not(.is-open) ul { display: none; }
  .vc-foot-col.is-collapsible .vc-foot-toggle { cursor: pointer; }
  .vc-foot-col.is-collapsible .vc-foot-chev { display: block; }
  .vc-foot-col.is-open .vc-foot-chev { transform: rotate(-135deg); }
  .vc-foot-col a { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
  .vc-foot-social { gap: 0 22px; }
  .vc-foot-social a { display: inline-flex; align-items: center; min-height: 44px; }
  .vc-foot-newsletter { padding: 22px 20px; gap: 12px; }
  .vc-foot-newsletter-form { max-width: none; flex-basis: auto; }
  .vc-foot-newsletter-form input[type="email"], .vc-foot-newsletter-form input[type="text"] { min-height: 48px; font-size: 16px !important; }
  .vc-foot-newsletter-form input[type="submit"] { min-height: 48px; width: 100% !important; }
  .site-footer .footer-bar { flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px calc(22px + env(safe-area-inset-bottom)); }
  .vc-foot-top { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 340px) { .vc-foot-main { grid-template-columns: 1fr; } }

/* Sommaire automatique des longs articles (assets/js/toc.js) */
.article-body h2[id] { scroll-margin-top: 96px; }
.vc-toc { margin: 8px 0 30px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); overflow: hidden; }
.vc-toc-toggle { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; color: #fff; font-family: var(--font-ui); font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.vc-toc-toggle:focus-visible { outline: 2px solid #0099BB; outline-offset: -2px; }
.vc-toc-toggle em { font-style: normal; font-weight: 400; letter-spacing: .5px; text-transform: none; color: rgba(255, 255, 255, .55); }
.vc-toc-toggle i { margin-left: auto; width: 8px; height: 8px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(-135deg); transition: transform .2s; }
.vc-toc.is-collapsed .vc-toc-toggle i { transform: rotate(45deg); }
.vc-toc ol { margin: 0; padding: 2px 18px 14px 44px; columns: 2; column-gap: 32px; counter-reset: toc; list-style: none; }
.vc-toc li { counter-increment: toc; break-inside: avoid; margin: 0; padding: 5px 0; position: relative; }
.vc-toc li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: -28px; top: 7px; font-family: var(--font-ui); font-size: 12px; color: var(--neon); }
.vc-toc a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: 15px; line-height: 1.4; }
.vc-toc a:hover { color: #fff; text-decoration: underline; }
.vc-toc.is-collapsed ol { display: none; }
@media (max-width: 720px) { .vc-toc ol { columns: 1; } .vc-toc a { display: block; padding: 6px 0; } }

/* Catalogue des véhicules par classe (guide des véhicules) */
.vc-table-wrap.is-compact table { min-width: 0; }
.vc-table-wrap.is-compact tbody th[scope="row"] { width: auto; min-width: 0; position: static; }
.vc-table-wrap.is-compact thead th:first-child { position: static; width: auto; min-width: 0; }
.vc-table-wrap.is-compact td { min-width: 0; }
.vc-veh-class { margin: 10px 0; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); overflow: hidden; }
.vc-veh-class > summary { display: flex; align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; list-style: none; color: #fff; font-family: var(--font-ui); font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; }
.vc-veh-class > summary::-webkit-details-marker { display: none; }
.vc-veh-class > summary em { font-style: normal; font-weight: 400; letter-spacing: .4px; text-transform: none; color: rgba(255, 255, 255, .55); }
.vc-veh-class > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); transform: rotate(45deg); transition: transform .2s; }
.vc-veh-class[open] > summary::after { transform: rotate(-135deg); }
.vc-veh-class > summary:focus-visible { outline: 2px solid #0099BB; outline-offset: -2px; }
.vc-veh-class .vc-table-wrap { margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; }
@media (max-width: 720px) {
  .vc-table-wrap.is-compact th, .vc-table-wrap.is-compact td { padding: 9px 8px; font-size: 13px; }
  .vc-table-wrap.is-compact thead th { white-space: normal; font-size: 14px; letter-spacing: .6px; }
  .vc-table-wrap.is-compact .vc-badge { white-space: normal; font-size: 9.5px; letter-spacing: .3px; padding: 2px 7px; }
  .vc-table-wrap.is-compact table { table-layout: fixed; }
  .vc-table-wrap.is-compact th[scope="row"] { overflow-wrap: anywhere; }
}

/* ===================== Refonte navigation et confort (21 septembre 2026) ===================== */
/* Menus déroulants Univers / Ressources : deux colonnes sur ordinateur (7 entrées chacun),
   le dernier s'ouvre vers la gauche pour ne jamais dépasser de l'écran. */
@media (min-width: 769px) {
  .main-nav-list li.menu-item-has-children:hover > .sub-menu,
  .main-nav-list li.menu-item-has-children.vc-dropdown-open > .sub-menu {
    display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 2px 6px; min-width: 410px;
  }
  .main-nav-list > li.menu-item-has-children:last-child > .sub-menu { left: auto; right: 0; }
}

/* Menu mobile : les sous-menus passent en tuiles à deux colonnes (moitié moins de hauteur). */
@media (max-width: 768px) {
  .main-nav-list .sub-menu {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 0 8px; border-left: none; margin: 0 0 6px;
  }
  .main-nav-list .sub-menu a {
    padding: 12px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; line-height: 1.25; min-height: 44px;
  }
  .main-nav-list .sub-menu a:active { background: rgba(255, 255, 255, .09); }
  .search-icon-btn { min-width: 44px; min-height: 44px; }
}

/* Cartes des pages de liste : titres sur trois lignes au lieu de deux, pour ne plus couper les longs titres. */
.vc-archive-card-copy h2 { -webkit-line-clamp: 3; }

/* Bandeau de consentement sur téléphone : une carte compacte en bas d'écran (boutons sur une ligne)
   au lieu d'un panneau qui couvrait plus de la moitié de l'écran. Les trois choix restent visibles. */
@media (max-width: 600px) {
  .cmplz-cookiebanner.cmplz-bottom-right, .cmplz-cookiebanner {
    left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important;
    width: auto !important; max-width: none !important; padding: 12px !important; border-radius: 14px !important;
    max-height: 60vh; overflow-y: auto;
  }
  .cmplz-cookiebanner .cmplz-header { margin-bottom: 4px !important; }
  .cmplz-cookiebanner .cmplz-title { font-size: 14px !important; }
  .cmplz-cookiebanner .cmplz-message { font-size: 11.5px !important; line-height: 1.4 !important; margin-bottom: 8px !important; }
  .cmplz-cookiebanner .cmplz-buttons { display: flex !important; flex-direction: row !important; gap: 6px !important; flex-wrap: nowrap !important; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; margin: 0 !important;
    padding: 10px 4px !important; font-size: 12.5px !important; min-height: 40px !important; line-height: 1.15 !important;
  }
  .cmplz-cookiebanner .cmplz-documents { margin-top: 6px !important; }
}
@media (max-width: 600px) {
  .cmplz-cookiebanner { row-gap: 4px !important; gap: 4px !important; }
  .cmplz-cookiebanner .cmplz-divider { display: none !important; }
  .cmplz-cookiebanner .cmplz-documents { margin-top: 2px !important; }
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { font-size: 12px !important; padding-left: 2px !important; padding-right: 2px !important; }
}

/* Icônes Véhicules et Armes : les liens du menu pointent désormais vers les guides, plus vers les archives de fiches. */
.main-nav-list a[href*="guide-tous-les-vehicules"]::before,
.main-nav-list a[href*="guide-toutes-les-armes"]::before { content: ""; width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; }
.main-nav-list a[href*="guide-tous-les-vehicules"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l1.5-5A2 2 0 0 1 6.4 6.5h11.2A2 2 0 0 1 19.5 8l1.5 5'/%3E%3Crect x='2.5' y='13' width='19' height='5' rx='1.5'/%3E%3Ccircle cx='7' cy='18.5' r='1.6'/%3E%3Ccircle cx='17' cy='18.5' r='1.6'/%3E%3C/svg%3E"); }
.main-nav-list a[href*="guide-toutes-les-armes"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.2 6.8H21l-5.6 4.1 2.2 6.8L12 15.6l-5.6 4.1 2.2-6.8L3 8.8h6.8z'/%3E%3C/svg%3E"); }
/* Extended Look dans la grille des menus : même tuile que les autres, sans bandeau séparé. */
.main-nav-list .sub-menu a[href*="/extended-look/"] { margin-top: 0; border-top: 1px solid var(--border); border-radius: 10px; padding-top: 12px; background: linear-gradient(90deg, rgba(124,58,237,.22), rgba(124,58,237,.06)); }

/* Menu mobile : la règle de survol (qui reste "collée" après un toucher) repassait les sous-menus en une colonne
   et décalait les tuiles sous le doigt. La grille à deux colonnes est maintenant imposée quel que soit l'état de survol. */
@media (max-width: 768px) {
  .main-nav-list li.menu-item-has-children:hover > .sub-menu,
  .main-nav-list li.menu-item-has-children.vc-dropdown-open > .sub-menu,
  .main-nav-list li.menu-item-has-children > .sub-menu {
    display: grid; grid-template-columns: 1fr 1fr;
  }
}

/* ===================== Fiche article : confort de lecture (21 septembre 2026) ===================== */
/* Barre de progression de lecture (assets/js/article.js). */
.vc-read-progress { position: fixed; z-index: 300; left: 0; right: 0; top: 0; height: 3px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.vc-read-progress.is-on { opacity: 1; }
.vc-read-progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--violet), var(--neon), var(--neon2)); }
.share-row a.is-copied { border-color: var(--neon3); color: #fff; background: rgba(0, 153, 187, .25); }

/* Colonne de lecture : sur ordinateur, le texte tenait sur toute la largeur (près de 130 signes par ligne).
   Il est ramené à environ 70 signes, centré ; tableaux, images et galeries gardent la pleine largeur.
   Les pages à onglets (galeries, chronologies) ne sont pas touchées. */
body.single-post .article-body:not(:has(.vc-gal-tabs, .tl-filter-bar)) > :is(p, ul, ol, h2, h3, h4, blockquote, .article-intro, .update-box, .highlight-box, .warning-box, .sources-box, .vc-toc, .vc-see-also) {
  max-width: 740px; margin-left: auto; margin-right: auto;
}
body.single-post .article-body > :is(p, ul, ol) { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .88); }
body.single-post .article-body > :is(ul, ol) li { margin-bottom: .45em; }
body.single-post .article-body > h2 { margin-top: 2.2em; }

@media (max-width: 720px) {
  body.single-post .article-body > :is(p, ul, ol) { font-size: 16.5px; line-height: 1.7; }
  /* Le fil d'Ariane ne répète plus le titre sur deux lignes : une ligne, tronquée. */
  .vc-article .breadcrumb .bc-current { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-article .article-hero { padding-bottom: 20px; }
  .vc-article .article-meta { margin-bottom: 16px; padding-bottom: 16px; }
  .vc-article .article-cover { padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .vc-read-progress { transition: none; } }

/* ===================== Fiche lieu (21 septembre 2026) ===================== */
/* Pastille de type aux couleurs de la page Lieux. */
.cat-pill.vc-type-ville { background: var(--neon); box-shadow: 0 4px 16px rgba(214, 35, 95, .3); }
.cat-pill.vc-type-quartier { background: var(--violet); box-shadow: 0 4px 16px rgba(124, 58, 237, .3); }
.cat-pill.vc-type-point-dinteret { background: var(--gold); box-shadow: 0 4px 16px rgba(212, 146, 10, .3); }
.cat-pill.vc-type-nature { background: var(--neon3); box-shadow: 0 4px 16px rgba(0, 153, 187, .3); }
.cat-pill.vc-type-lieu { background: var(--neon2); box-shadow: 0 4px 16px rgba(234, 96, 0, .3); }
.article-cats .vc-badge { align-self: center; }
.vc-more-places .related-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vc-more-all { margin: 14px 0 0; }
.vc-more-all a { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--neon3); text-decoration: none; }
.vc-more-all a:hover { text-decoration: underline; }

/* Même colonne de lecture que les articles pour les fiches lieu et personnage. */
body.single-lieu .article-body > :is(p, ul, ol, h2, h3, h4, blockquote, .article-intro, .update-box, .highlight-box, .warning-box, .sources-box),
body.single-personnage .article-body > :is(p, ul, ol, h2, h3, h4, blockquote, .article-intro, .update-box, .highlight-box, .warning-box, .sources-box) {
  max-width: 740px; margin-left: auto; margin-right: auto;
}
body.single-lieu .article-body > :is(p, ul, ol),
body.single-personnage .article-body > :is(p, ul, ol) { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .88); }
@media (max-width: 720px) {
  body.single-lieu .article-body > :is(p, ul, ol),
  body.single-personnage .article-body > :is(p, ul, ol) { font-size: 16.5px; line-height: 1.7; }
}

/* Fiche personnage : pastille de rôle aux couleurs de la page Personnages (21 septembre 2026). */
.cat-pill.vc-rolepill-protagoniste, .cat-pill.vc-rolepill-antagoniste { background: var(--neon); box-shadow: 0 4px 16px rgba(214, 35, 95, .3); }
.cat-pill.vc-rolepill-faction { background: var(--violet); box-shadow: 0 4px 16px rgba(124, 58, 237, .3); }
.cat-pill.vc-rolepill-secondaire { background: var(--neon3); box-shadow: 0 4px 16px rgba(0, 153, 187, .3); }
.cat-pill.vc-rolepill-autre { background: var(--violet); box-shadow: 0 4px 16px rgba(124, 58, 237, .3); }
.vc-more-cast .related-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* ===================== Accueil : section "L'univers" (21 septembre 2026) ===================== */
/* Tuiles moins hautes (elles occupaient 800 px sur ordinateur et près de 2000 px sur téléphone),
   avec une flèche d'accès, dans l'esprit des pages Personnages et Lieux. */
.vc-universe-tile { aspect-ratio: 4 / 3; }
.vc-universe-tile::before {
  content: "\2197"; position: absolute; z-index: 2; top: 14px; right: 14px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(10, 8, 12, .55); border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: 16px; line-height: 1;
  transition: background .2s, transform .2s, border-color .2s;
}
.vc-universe-tile:hover::before, .vc-universe-tile:focus-visible::before { background: var(--neon); border-color: var(--neon); transform: translate(2px, -2px); }
.vc-universe-tile p { font-size: 13px; }
@media (max-width: 520px) {
  .vc-universe-tile { aspect-ratio: 16 / 10; }
}

/* ===================== Actualités : filtres par catégorie et recherche (21 septembre 2026) ===================== */
.vc-news-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 0 0 22px; }
.vc-news-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.vc-news-chip { font-family: var(--font-ui); font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #fff; text-decoration: none; transition: background .2s, border-color .2s, transform .2s; }
.vc-news-chip span { opacity: .6; margin-left: 4px; }
.vc-news-chip:hover { border-color: rgba(255, 255, 255, .4); transform: translateY(-1px); }
.vc-news-chip.is-active { background: var(--neon); border-color: var(--neon); }
.vc-news-search input { min-width: 240px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font-size: 15px; }
.vc-news-search input:focus { outline: 2px solid var(--neon3); outline-offset: 2px; }
@media (max-width: 720px) {
  .vc-news-search, .vc-news-search input { width: 100%; }
  .vc-news-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; width: calc(100% + 32px); }
  .vc-news-filters::-webkit-scrollbar { display: none; }
  .vc-news-chip { white-space: nowrap; flex: 0 0 auto; }
}

/* ===================== Page Extended Look (21 septembre 2026) ===================== */
.vc-el-hero { padding: 44px 0 26px; background: radial-gradient(1000px 420px at 80% -60px, rgba(124, 58, 237, .32), transparent 70%), radial-gradient(800px 380px at 10% 0, rgba(214, 35, 95, .2), transparent 70%); }
.vc-el-hero-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 36px; align-items: center; }
.vc-el-hero h1 { font-family: var(--font-display); font-size: clamp(44px, 7vw, 82px); line-height: .95; margin: 6px 0 14px; color: #fff; }
.vc-el-hero .vc-archive-eyebrow { display: inline-block; font-family: var(--font-ui); font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; color: var(--neon); }
.vc-el-intro { color: rgba(255, 255, 255, .8); max-width: 62ch; font-size: 17px; line-height: 1.65; }
.vc-el-intro p { margin: 0 0 10px; }
.vc-el-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.vc-el-facts li { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); min-width: 118px; }
.vc-el-facts strong { font-family: var(--font-display); font-size: 24px; line-height: 1; color: #fff; }
.vc-el-facts span { font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.vc-el-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.vc-el-btn { font-family: var(--font-ui); font-size: 14px; letter-spacing: 1.3px; text-transform: uppercase; padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; transition: background .2s, transform .2s; }
.vc-el-btn:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.vc-el-btn.is-primary { background: var(--neon); border-color: var(--neon); }
.vc-el-btn.is-primary:hover { background: #ea2f6d; }
.vc-el-hero-art img { display: block; width: 100%; max-width: 360px; height: auto; margin-left: auto; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 24px 70px rgba(124, 58, 237, .35), 0 0 0 1px rgba(214, 35, 95, .25); transform: rotate(1.5deg); }

.vc-el-body { padding-top: 26px; }
.vc-el-flagship { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; margin-bottom: 38px; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); background: #1a1922; color: #fff; text-decoration: none; transition: border-color .25s, box-shadow .25s, transform .25s; }
.vc-el-flagship:hover { border-color: rgba(214, 35, 95, .55); box-shadow: 0 18px 50px rgba(0, 0, 0, .45); transform: translateY(-3px); }
.vc-el-flagship-media { position: relative; min-height: 260px; background: #121116; }
.vc-el-flagship-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vc-el-flagship-copy { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.vc-el-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 700; color: var(--neon); }
.vc-el-flagship h2 { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.02; margin: 0; }
.vc-el-flagship p { margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.vc-el-more { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--neon3); }

.vc-el-group { margin-bottom: 34px; }
.vc-el-group-title { font-family: var(--font-display); font-size: 30px; margin: 0 0 14px; color: #fff; display: flex; align-items: baseline; gap: 10px; }
.vc-el-group-title span { font-family: var(--font-ui); font-size: 14px; letter-spacing: 1px; color: rgba(255, 255, 255, .5); }

@media (max-width: 860px) {
  .vc-el-hero-in { grid-template-columns: 1fr; gap: 24px; }
  .vc-el-hero-art { order: -1; }
  .vc-el-hero-art img { max-width: 140px; margin: 0 auto 0 0; }
  .vc-el-flagship { grid-template-columns: 1fr; }
  .vc-el-flagship-media { min-height: 0; aspect-ratio: 16 / 9; }
  .vc-el-flagship-copy { padding: 20px; }
  .vc-el-facts li { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
}
@media (prefers-reduced-motion: reduce) { .vc-el-flagship, .vc-el-btn { transition: none; } .vc-el-hero-art img { transform: none; } }

/* ===================== Chronologie : cartes, années, recherche (21 septembre 2026) ===================== */
.tl-filter-bar { margin: 22px 0 12px; }
.tl-filter-btn { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 9px 16px; border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #fff; }
.tl-filter-btn:hover { border-color: rgba(255, 255, 255, .4); color: #fff; }
.tl-filter-btn.is-active { background: var(--neon); border-color: var(--neon); }

.tl-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.tl-search input { min-width: 260px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .05); color: #fff; font-size: 15px; }
.tl-search input:focus { outline: 2px solid var(--neon3); outline-offset: 2px; }
.tl-count { margin: 0; font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255, 255, 255, .55); }

/* Navigation par année, collée sous l'en-tête pendant le défilement. */
.tl-rail { position: sticky; top: 70px; z-index: 40; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 0 18px; background: linear-gradient(#121116 82%, rgba(18, 17, 22, 0)); scrollbar-width: none; }
.tl-rail::-webkit-scrollbar { display: none; }
.tl-rail-label { flex: 0 0 auto; margin-right: 6px; font-family: var(--font-ui); font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.tl-rail a { flex: 0 0 auto; font-family: var(--font-display); font-size: 20px; line-height: 1; padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; transition: background .2s, border-color .2s; }
.tl-rail a:hover { border-color: var(--neon); background: rgba(214, 35, 95, .18); }
.tl-rail a.is-off { opacity: .3; pointer-events: none; }

.tl-year { position: relative; margin: 26px 0 8px; padding-left: 52px; }
.tl-year span { font-family: var(--font-display); font-size: clamp(38px, 6vw, 58px); line-height: 1; background: linear-gradient(90deg, var(--violet), var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-year.tl-hidden { display: none; }
.tl-empty { margin: 8px 0 24px; color: rgba(255, 255, 255, .7); }
.tl-empty[hidden] { display: none; }

/* Chaque événement devient une carte. */
.timeline .tl-content { flex: 1 1 auto; min-width: 0; margin-bottom: 16px; padding: 16px 20px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .035); transition: border-color .25s, background .25s, transform .25s; }
.timeline .tl-item:hover .tl-content { border-color: rgba(214, 35, 95, .45); background: rgba(255, 255, 255, .055); }
.timeline .tl-title { font-size: 19px; line-height: 1.3; margin-bottom: 8px; }
.timeline .tl-desc { font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.timeline .tl-desc a { color: var(--neon3); }
.timeline .tl-date { font-size: 12px; margin-bottom: 8px; }
.timeline .tl-thumb { max-width: 100%; width: 100%; max-height: 260px; object-fit: cover; }
.timeline .tl-dot { border-color: #121116; }
.timeline .tl-left { width: 40px; }
.timeline .tl-item.tl-upcoming .tl-content { border-color: rgba(212, 146, 10, .55); background: linear-gradient(135deg, rgba(212, 146, 10, .16), rgba(255, 255, 255, .03)); }

@media (max-width: 720px) {
  .tl-search, .tl-search input { width: 100%; }
  .tl-year { padding-left: 40px; }
  .timeline .tl-left { width: 28px; }
  .timeline .tl-content { padding: 14px 15px 16px; }
  .timeline .tl-title { font-size: 17px; }
  .tl-rail { top: 60px; }
}
@media (prefers-reduced-motion: reduce) { .timeline .tl-content { transition: none; } }

/* ===================== Pages Vidéos, Carte et Radio (21 septembre 2026) ===================== */
/* Titres de section avec barre d'accent, lecteurs et carte en cartes arrondies avec halo. */
body.postid-396 .article-body > h2,
body.postid-409 .article-body > h2,
body.page-id-454 .article-body > h2 { position: relative; padding-left: 18px; margin-top: 2.2em; }
body.postid-396 .article-body > h2::before,
body.postid-409 .article-body > h2::before,
body.page-id-454 .article-body > h2::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--violet), var(--neon), var(--neon2)); }

/* Vidéos : numérotation des trois vidéos et lecteurs 16/9 arrondis. */
body.postid-396 .article-body { counter-reset: vc-vid; }
body.postid-396 .article-body > h2 { counter-increment: vc-vid; }
body.postid-396 .article-body > h2::after { content: counter(vc-vid, decimal-leading-zero); position: absolute; right: 0; top: 0; font-family: var(--font-display); font-size: 46px; line-height: 1; color: rgba(255, 255, 255, .09); pointer-events: none; }
body.postid-396 .article-body div:has(> iframe[src*="youtube"]) { border-radius: 18px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 22px 60px rgba(124, 58, 237, .28), 0 0 0 1px rgba(214, 35, 95, .18); margin: 18px 0 30px; }

/* Carte : plus large, coins arrondis, halo, hauteur adaptée à l'écran. */
body.postid-409 .sol-map-embed { height: min(78vh, 760px); min-height: 460px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 22px 60px rgba(0, 153, 187, .22), 0 0 0 1px rgba(214, 35, 95, .16); margin: 28px 0 34px; }

/* Radio : lecteurs Spotify alignés avec des espaces réguliers. */
body.page-id-454 .article-body iframe[src*="spotify"] { display: block; width: 100%; margin: 12px 0 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }

/* Colonne de lecture de la page Radio, comme les articles. */
body.page-id-454 .article-body > :is(p, ul, ol, h2, h3, blockquote) { max-width: 740px; margin-left: auto; margin-right: auto; }
body.page-id-454 .article-body > :is(p, ul, ol) { font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, .88); }
body.page-id-454 .article-body > :is(iframe, div:has(> iframe)) { max-width: 740px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) {
  body.postid-396 .article-body > h2::after { font-size: 34px; }
  body.postid-409 .sol-map-embed { height: 70vh; min-height: 420px; border-radius: 14px; }
  body.page-id-454 .article-body > :is(p, ul, ol) { font-size: 16.5px; line-height: 1.7; }
}

/* ===================== Archive des récaps hebdomadaires (21 septembre 2026) ===================== */
.vc-recap-hero { background: radial-gradient(900px 340px at 85% -60px, rgba(124, 58, 237, .3), transparent 70%), radial-gradient(700px 300px at 5% 0, rgba(214, 35, 95, .2), transparent 70%); }
.vc-recap-hero-in { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.vc-recap-hero h1 { font-family: var(--font-display); font-size: clamp(42px, 7vw, 78px); line-height: .95; margin: 6px 0 12px; color: #fff; }
.vc-recap-count { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 30px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); box-shadow: 0 18px 50px rgba(124, 58, 237, .25); }
.vc-recap-count strong { font-family: var(--font-display); font-size: clamp(52px, 8vw, 86px); line-height: 1; background: linear-gradient(90deg, var(--violet), var(--neon), var(--neon2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-recap-count span { font-family: var(--font-ui); font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255, 255, 255, .6); text-align: center; }
@media (max-width: 720px) { .vc-recap-count { width: 100%; } }

/* Icône du lien "Récaps" dans le menu Ressources. */
.main-nav-list a[href*="/tag/recap-hebdo"]::before { content: ""; width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M8 2v4M16 2v4M3 10h18'/%3E%3C/svg%3E"); }