/* =========================================================
   Vaybo Insight — CSS Refactorisé et Nettoyé
   - Container fixe 1340px, min page width 768px
   - Design flat moderne avec liquid glass
   - Code organisé et doublons supprimés
   ========================================================= */

/* ================= Base & Reset ================= */
html, body {
  min-width: 768px;
  height: 100%;
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial;
}
* { box-sizing: border-box; }

/* ================= Variables CSS ================= */
:root{
  --container: 1200px;   /* largeur max globale */
  --gutter:    20px;     /* padding gauche/droite */
  --wrap-pad: clamp(12px, 3.2vw, var(--gutter));

  /* Palette principale */
  --page: #eeede4;
  --ink: #0f172a;
  --muted: #667085;

  /* Couleurs UI */
  --hero: #7a0d19;
  --card: #f8f7f1;
  --block: #0d111a;
  --band: #34d0cf;
  --bar: #dbaa08;

  /* Navigation */
  --menu-accent: #ffe0e5;

  /* Rayons & ombres */
  --r-card: 16px;
  --r-bar: 8px;
  --shadow-1: 0 1px 0 rgba(15,23,42,.06);
  --shadow-2: 0 10px 24px rgba(16,24,40,.06);

  /* Charts & grids */
  --chart-h: 460px;
  --gap: 18px;
  --thumb: 100px;
  --chart-bg: #fff;
  --chart-area-bg: var(--chart-bg);
  --chart-pad: 20px;

  /* Top100 banner */
  --t100-grid-bg: #f8f7f1;
  --t100-pad-t: 20px;
  --t100-pad-r: 20px;
  --t100-pad-b: 20px;
  --t100-pad-l: 20px;
}

/* ================= Layout ================= */
/* Conteneur global */
.wrap{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
}

/* Réduit l’offset à gauche seulement dans le HERO */
.hero .wrap{
  padding-left: 24px;   /* ajuste 16/24/32/40px jusqu’à ta ligne repère */
  padding-right: var(--wrap-pad); /* on garde la valeur globale à droite */
}

/* Sécurité : pas de marge parasite sur le bloc texte/titre */
.hero .hero-left{ margin-left: 0; }
.hero .hero-title{ margin-left: 0; }

@media (max-width: 768px){
  .hero .hero-left{ margin-block-start: 12px; }
}

/* Reste de la mise en page */
.maincol{ display: grid; gap: 24px; }
.list{ margin-top: 0; }

/* ================= Header (Liquid Glass) ================= */
.header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  background: color-mix(in srgb, #3b2d2d 18%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
 
}
.topbar{ display:flex; align-items:center; gap:20px; padding:12px 0; color:#e7edf5; }
.brand{ color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
.brand:hover{ color:#fff; }

/* Nav */
.nav{ display:flex; align-items:center; gap:22px; overflow-x:auto; scrollbar-width:none; }
.nav::-webkit-scrollbar{ display:none; }
.navlink{
  position:relative; display:inline-flex; align-items:center;
  padding:10px 2px; font-weight:700; letter-spacing:.01em;
  color:#e7edf5; text-decoration:none;
}
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: var(--menu-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.navlink:hover,.navlink:focus{ color:#ffffff; }
.navlink:hover::after,.navlink:focus-visible::after,
.navlink[aria-current="page"]::after,.navlink.active::after{ transform: scaleX(1); }
.navlink:focus-visible{ outline:2px dashed var(--menu-accent); outline-offset:4px; }

/* Search */
.search{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.search input{
  width:min(280px, 36vw); height:36px; padding:0 12px; border-radius:999px;
  background: transparent;
  border:1px solid color-mix(in srgb, #9fb2c5 28%, transparent);
  color:#e7edf5; outline:0;
}
.search input::placeholder{ color:#a9b4c4; }
.search button{ all:unset; cursor:pointer; padding:6px 10px; color:#e7edf5; }

/* Fallback si blur non supporté */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .header{ background:#0b1020; }
}

/* ================= Catégories (tuiles) ================= */
.cats{ margin-block:18px; }
.cats-grid{
  display:grid; gap:14px; padding-block:8px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width:1200px){ .cats-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){ .cats-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .cats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .cats-grid{ grid-template-columns:1fr; } }

.cat-tile{
  position:relative; display:block; aspect-ratio:1/1; border-radius:16px; overflow:hidden;
  text-decoration:none; color:#fff; background:#0b0f14;
}
.cat-tile::before{
  content:""; position:absolute; inset:0;
  background: var(--bg, #0b0f14) center/cover no-repeat;
  transform: scale(1.02); transition: transform .25s ease;
}
.cat-tile:hover::before{ transform: scale(1.05); }
.cat-tile .scrim{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.cat-tile h3,.cat-tile p{
  position:absolute; left:12px; right:12px; margin:0; text-shadow:0 1px 2px #0008;
}
.cat-tile h3{ bottom:34px; font-weight:800; }
.cat-tile p{ bottom:10px; font-size:12px; opacity:.95; }

/* ================= Chart (barres) ================= */
.chart{
  background: var(--chart-bg);
  border-radius: 16px;
  padding: 42px var(--chart-pad) 24px;
  box-shadow: var(--shadow-2);
  overflow-x: hidden;
}
.bars{
  --bar-count: 10;
  width:100%; display:grid;
  grid-template-columns: repeat(var(--bar-count), minmax(0,1fr));
  gap: clamp(10px, 1.6vw, var(--gap));
  align-items:end; background:var(--chart-area-bg);
  border-radius:14px; padding:16px clamp(10px,2vw,20px) 28px;
}
.col{ min-width:0; display:flex; flex-direction:column; align-items:center; }
.barblock{
  position:relative; width:100%; height:var(--h, 0px);
  background:#dbaa08; border-radius:var(--r-bar);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  transition: height .6s ease;
}
.barblock .pct{
  position:absolute; top:-26px; left:50%; transform:translateX(-50%);
  color:#061017; font-weight:900; font-size:18px; letter-spacing:.4px; text-shadow:0 1px 0 #ffffffaa;
}
.barblock .count{
  position:absolute; left:50%; bottom:-32px; transform:translateX(-50%);
  color:#0f172a; font-weight:500; text-transform:uppercase; line-height:1.1; font-size:12px; text-shadow:0 1px 0 #ffffffaa;
}
.photo{
  margin-top:42px; width:min(var(--thumb),100%); aspect-ratio:1/1;
  border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; background:#f1f5f9;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.name{
  margin-top:10px; text-align:center; font-weight:800; letter-spacing:.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}

/* ================= Tables (Top 50 / Top 100) ================= */
.list{ margin-top:26px; }
.table-card{ padding:6px 0 2px; }

table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
thead th{ color:var(--muted); font-weight:600; text-align:left; padding:0 12px; }
tbody tr{ background:#fff; box-shadow:var(--shadow-2); }
tbody td{ padding:12px 12px; }
tbody tr:first-child td{ border-top-left-radius:0px; border-top-right-radius:0px; }
tbody tr:last-child td{ border-bottom-left-radius:14px; border-bottom-right-radius:14px; }

.table-avatar{ width:48px; height:48px; border-radius:50%; object-fit:cover; }

/* Thumbs réutilisables */
.cover-40{
  width:40px; height:40px; object-fit:cover; border-radius:8px; display:block;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}
.td-thumb{ width:120px; }
.cover-64{
  width:96px; height:96px; border-radius:12px; object-fit:cover; display:block; background:#f1f5f9;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}
@media (max-width:768px){
  .td-thumb{ width:56px; }
  .cover-64{ width:40px; height:40px; border-radius:10px; }
}

/* Spécifique liste Top100 chansons (covers plus grands) */
#tblSongs .td-thumb{ width:150px; }
#tblSongs .cover-40{
  width:100px !important; height:100px !important; border-radius:12px; max-width:none; max-height:none;
}
@media (max-width:768px){
  #tblSongs .td-thumb{ width:64px; }
  #tblSongs .cover-40{ width:48px !important; height:48px !important; }
}

.song-stack{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.song-title{ font-weight:600; line-height:1.15; }
.song-artist{ color:var(--muted); font-size:.95em; line-height:1.1; }

/* Variations (petits badges +/-) */
.var{ font-weight:700; font-size:12px; padding:2px 6px; border-radius:999px; display:inline-block; }
.up{ background:#dcfce7; color:#15803d; }
.down{ background:#fee2e2; color:#b91c1c; }
.same{ background:#e5e7eb; color:#374151; }

/* ================= Top 100 Preview (grille) ================= */
.card--t100{ border-radius:18px; overflow:hidden; padding:0; }
.t100-banner{
  margin:0; background:#d4a60a;
  border-radius:16px 16px 0 0; padding:14px var(--t100-pad-r) 14px var(--t100-pad-l);
  display:flex; align-items:center; justify-content:space-between;
  text-transform:uppercase; font-weight:800; letter-spacing:.02em;
}
.t100-banner-title{ color:#ffffff; font-size:24px; }

/* lien "VOIR CHART" sans underline */
.t100-banner-link,
.t100-banner-link:visited,
.t100-banner-link:hover,
.t100-banner-link:focus{
  color:#061017;
  text-decoration: none !important;
  font-weight: 800;
  white-space: nowrap;
  outline: none;
}

/* vignettes Top100 (si ce sont des <a>) sans underline */
.t100-grid .t100-card,
.t100-grid .t100-card:visited,
.t100-grid .t100-card:hover,
.t100-grid .t100-card:focus{
  text-decoration: none !important;
  outline: none;
}

.t100-sub{ margin:0 20px 4px; color:#64748b; font-size:.95rem; }

.t100-grid{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:18px;
  background:var(--t100-grid-bg);
  padding:var(--t100-pad-t) var(--t100-pad-r) var(--t100-pad-b) var(--t100-pad-l);
  border-radius:0 0 16px 16px; margin:0;
}
@media (max-width:1100px){ .t100-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){ .t100-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .t100-grid{ grid-template-columns:repeat(2,1fr); } }

.t100-card{ display:flex; flex-direction:column; gap:6px; }
.t100-cover{
  position:relative; width:100%; padding-top:100%;
  border-radius:20px; overflow:hidden; background:#0f172a0d;
  box-shadow:0 10px 24px rgba(16,24,40,.08);
}
.t100-cover img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.t100-rank{
  position:absolute; left:10px; bottom:10px; width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#d93875; color:#000; font-weight:800; z-index:2;
}
.t100-title{ font-weight:700; }
.t100-artist{ color:#1d181a; font-size:.95rem; }

/* ================= Grid Tiles ================= */
.grid-tiles{ display:grid; gap:16px; grid-template-columns:repeat(5, minmax(0,1fr)); }
@media (max-width:1100px){ .grid-tiles{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:700px){ .grid-tiles{ grid-template-columns:repeat(2,1fr); } }
.tile .cover{ position:relative; border-radius:14px; overflow:hidden; background:#111; }
.tile .thumb{ position:relative; }
.tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.tile-rank{
  position:absolute; left:8px; bottom:8px; width:28px; height:28px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:#c2c6fe; color:#000; font-weight:800; z-index:2;
}
.tile .title{ margin:.5rem 0 0; font-weight:800; color:#ffffff; }
.tile .meta{ color:#667085; font-size:13px; }

/* ================= Newsletter & Footer ================= */
.newsletter{ background:var(--band); color:#0b1020; }
.newsletter .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-block: clamp(22px, 4vw, 34px);
}
.newsletter h3{ margin:0; font-size:clamp(20px,3vw,32px); font-weight:800; }
.nl-form{ display:flex; gap:10px; width:min(680px,100%); }
.nl-form input{
  flex:1; height:50px; border-radius:999px; border:2px solid #0b1020;
  padding:0 18px; background:transparent; color:#0b1020; outline:0;
}
.nl-form button{
  height:50px; padding:0 22px; border-radius:999px; border:0;
  background:#0b1020; color:#fff; font-weight:800; cursor:pointer;
}

.footer{ background:var(--block); color:#cbd5e1; }
.footer .wrap{ padding-block:clamp(24px, 4vw, 40px); text-align:center; }
.footer a{ color:#e2e8f0; text-decoration:none; }
.footer small{ display:block; margin-top:10px; opacity:.7; }

/* Sidebar ads */
.sidebar-ads{
  display: grid;
  gap: 18px;               /* ← espace entre les pubs */
}

.sidebar-ads .ad{
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
  display: block;
}

.sidebar-ads .ad img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Label “Publicité” */
.sidebar-ads .ad-label{
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0f172a;               /* lisible sur fond clair */
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ================= Cartes “glass” ================= */
.card.glass{
  position:relative;
  background: color-mix(in srgb, #ffffff 12%, transparent);
  border: 1px solid color-mix(in srgb, #9fb2c5 26%, transparent);
  border-radius: 18px;
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 24px 60px rgba(14, 22, 39, .18), inset 0 1px 0 #ffffff22;
  overflow: hidden;
}
.card.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(180deg,#73f2b840,#6cdca533 40%,#2f6c5e22 78%,#12372611);
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; opacity:.9;
}
.card.glass::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  mix-blend-mode: overlay;
}

/* ====== Classements: layout + cartes ====== */
.layout{
  display:grid; grid-template-columns:minmax(0,1fr) 320px;
  gap:22px; align-items:start;
}
@media (max-width:1100px){ .layout{ grid-template-columns:1fr; } }

.section-bar{
  display:flex; align-items:center; justify-content:space-between;
  background: var(--bar, #dbaa08); color:#0b0f14;
  font-weight:900; letter-spacing:.02em;
  padding:12px 16px; margin:28px 0 16px; border-radius:12px;
  text-transform:uppercase;
}
.section-bar .view{ font-weight:800; text-decoration:none; color:inherit; }

.chart-grid{
  display:grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap:18px;
}
@media (max-width:1100px){ .chart-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:720px){  .chart-grid{ grid-template-columns: repeat(2,1fr); } }

.card-t{
  position:relative; background:#fff; border-radius:16px; padding:14px;
  box-shadow: var(--shadow-2, 0 10px 24px rgba(16,24,40,.06));
}
.card-t .cover{
  width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#eef2f6;
}
.card-t .cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-t .rank{
  position:absolute; left:14px; top:14px;
  background:#00ff95; color:#030507; font:900 14px/1 system-ui;
  padding:6px 8px; border-radius:8px;
}
.card-t .title{ margin:.7rem 0 .2rem; font:800 16px/1.2 system-ui; }
.card-t .sub{ margin:0; color:var(--muted, #667085); font-size:13px; }

.sidecol .card{ width:100%; }
.sidecol img{ display:block; width:100%; height:auto; border-radius:12px; }

/* ================= Overrides utiles ================= */
/* Forcer les textes du preview Top100 en blanc */
.t100-title, .t100-title a{ color:#1e181b; font-weight:700; }
.t100-artist, .t100-artist a{ color:#1e181b; }

/* Badge de rang — forcer la couleur partout */
.t100-rank, .tile-rank{
  background:#dbaa08 !important;
  color:#000 !important;
}

/* Card */
.table-card{ padding:0; overflow:hidden; border-radius:18px; }

/* Header bar */
.tbl-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px; background:#d4a60a; color:#0b0f14;
  border-radius:18px; box-shadow:0 6px 16px rgba(16,24,40,.08);
}
.tbl-title{ margin:0; font:900 22px/1 system-ui; letter-spacing:.2px; }
.tbl-sub{ margin-top:2px; opacity:.9; font-weight:600; }
.tbl-more{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; background:#0b0f14; color:#fff;
  text-decoration:none; font-weight:800;
}

/* Table shell */
.tbl-wrap{ padding:0 12px 18px; }
.vi-table{
  width:100%; table-layout:fixed;
  border-collapse:separate; border-spacing:0 10px; /* “cartes” */
}
.vi-table thead th{
  text-align:left; color:#5a667a; font-weight:700; padding:0 14px;
}

/* Col widths — l’ordre correspond au colgroup ci-dessus */
.vi-table col.col-rank   { width:68px; }
.vi-table col.col-artist { width:auto; }
.vi-table col.col-subs   { width:120px; }
.vi-table col.col-views  { width:140px; }
.vi-table col.col-score  { width:110px; }

/* Lignes */
.vi-table tbody tr{
  background:#fff; border-radius:14px;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.vi-table tbody tr:hover{ box-shadow:0 12px 26px rgba(16,24,40,.10); transform:translateY(-1px); }
.vi-table tbody td{ padding:14px; vertical-align:middle; }
.vi-table tbody tr:first-child td{ border-top-left-radius:14px; border-top-right-radius:14px; }
.vi-table tbody tr:last-child  td{ border-bottom-left-radius:14px; border-bottom-right-radius:14px; }

/* Cellules que ton script génère */
.rankcell{ display:flex; align-items:center; gap:6px; white-space:nowrap; font-weight:800; }
.rankcell strong{ min-width:28px; text-align:right; }

/* la médaille Lottie (#1–#3) — ton script crée .lottie-medal */
.lottie-medal{ width:22px; height:22px; display:inline-block; }

/* Artiste = avatar + nom (ellipsis) */
.cell-artist{ display:flex; align-items:center; gap:12px; min-width:0; }
.cell-artist .name{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.table-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:#f1f5f9; flex:0 0 40px; }

/* Numériques à droite */
.cell-num{ text-align:right; white-space:nowrap; }

/* “Chargement…” */
.center.muted{ padding:24px 0; color:#6b7280; text-align:center; }

/* Responsive : on masque progressivement les colonnes de droite si besoin */
@media (max-width:900px){
  .vi-table thead th:nth-child(4), .vi-table tbody td:nth-child(4){ display:none; } /* Vues totales */
}
@media (max-width:640px){
  .vi-table thead th:nth-child(5), .vi-table tbody td:nth-child(5){ display:none; } /* Score */
  .table-avatar{ width:36px; height:36px; }
  .vi-table tbody td{ padding:12px; }
}
/* =========================================================
   NAV GLOBALE — Header + Menu + Dropdowns (cleaned)
   Ajuste simplement les variables ci-dessous.
========================================================= */

/* ---------- Variables ---------- */
:root{
  /* Couleurs */
  --nav-bg: #ffcc00;          /* fond header */
  --nav-ink: #ffffff;         /* texte principal */
  --nav-ink-dim:#ffffff;      /* texte atténué */
  --nav-accent:#ffcc00;       /* accent (hover/actif/bouton) */

  /* Pills / boutons */
  --pill-bg:transparent;
  --pill-bd:#283244;
  --pill-bg-h:#202736;

  /* Dropdown */
  --dd-bg:#161b23;
  --dd-bd:#283244;

  /* Divers */
  --ring:#7aa2ff55;           /* focus ring inset */
  --nav-radius: 12px;
  --nav-shadow: 0 8px 24px rgba(0,0,0,.12);

  /* Tailles rapides (hauteur header & paddings) */
  --header-h: 64px;
  --link-pad-y: 10px;         /* padding vertical des liens */
  --link-pad-x: 14px;         /* padding horizontal des liens */
  --logo-gap: 8px;
}

/* ---------- Header (fond “glass” optionnel) ---------- */
.header{
  position: sticky; top:0; z-index:50;
  background: color-mix(in oklab, var(--nav-bg) 92%, transparent);
  border-bottom:1px solid #1f2633;
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--nav-ink);
}
.header .wrap{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* ---------- Marque / logo ---------- */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:800; letter-spacing:.2px }
.brand-mark{ width:26px; height:26px; border-radius:7px; background:#7aa2ff }
.brand img{ height: calc(var(--header-h) - 2*var(--logo-gap)); width:auto; display:block; }

/* ---------- Barre principale ---------- */
.navbar{ display:flex; align-items:center; gap:14px; width:100%; white-space:nowrap; padding-block:0; }

/* Menu aligné centre (prend la place), brand à gauche, search à droite */
.brand{ flex:0 0 auto; }
.main-menu{ flex:1 1 auto; min-width:0; display:flex; align-items:center; }
.main-menu .nav-menu-wrapper{ flex:1; }
.main-menu .nav-menu-wrapper > ul{
  display:flex; align-items:center; gap:8px; list-style:none; margin:0; padding:0; flex-wrap:nowrap;
}

/* Liens de 1er niveau (style “pill”) */
.main-menu ul li{ position:relative; }
.main-menu ul li > a,
.nav .navlink,
.nav summary.navlink{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:8px;
  padding: var(--link-pad-y) var(--link-pad-x);
  border:1px solid var(--pill-bd);
  background:var(--pill-bg);
  color:inherit; text-decoration:none; cursor:pointer;
  border-radius:999px; font-weight:700; line-height:1;
  transition: background .15s ease, transform .1s ease, color .15s ease;
}
.main-menu ul li > a:hover,
.nav .navlink:hover,
.nav summary.navlink:hover{
  background:var(--pill-bg-h);
  transform: translateY(-1px);
}
a[aria-current="page"]{ box-shadow:0 0 0 3px var(--ring) inset; color:var(--nav-ink); }

/* Caret (fallback si Font Awesome absent) */
.main-menu li.submenu > a::after{
  content:""; width:.5em; height:.5em; margin-left:8px;
  border:2px solid currentColor; border-left:0; border-top:0;
  transform:rotate(45deg) translateY(-1px); opacity:.8;
}

/* ---------- Dropdowns ---------- */
.main-menu ul ul{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:220px; padding:8px; margin:0; list-style:none;
  background:var(--dd-bg); color:#fff; border:0px solid var(--dd-bd);
  border-radius:12px; box-shadow:var(--nav-shadow);
  transform-origin: top; transform:scale(.98); opacity:0; visibility:hidden;
  transition: transform .16s ease, opacity .16s ease, visibility .16s ease;
}
.main-menu ul ul li a{
  display:block; padding:10px 12px; border-radius:8px; color:#fff; font-weight:600;
}
.main-menu ul ul li a:hover{ background:rgba(255,255,255,.08); }

/* Sous-sous menu (à droite) */
.main-menu ul ul ul{ left:100%; top:0; }

/* Afficher au survol (desktop) */
.main-menu li.submenu:hover > ul{ transform:scale(1); opacity:1; visibility:visible; }

/* Afficher au clic (mobile/tactile) — ajouter .open sur <li> en JS */
.main-menu li.submenu.open > ul{ transform:scale(1); opacity:1; visibility:visible; }

/* Fleche pour sous-sous */
.main-menu li.submenu ul li.submenu > a::after{
  content:""; margin-left:auto; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:6px solid currentColor;
}

/* ---------- Recherche ---------- */
.search{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }
.search input[type="search"]{
  height:36px; padding:0 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08); color:var(--nav-ink);
  outline:none;
  width:240px; max-width:22vw;
}
.search button{
  height:36px; padding:0 12px; border-radius:10px; border:1px solid transparent;
  background:var(--nav-accent); color:#0b1b12; font-weight:800; cursor:pointer;
}

/* ---------- Mobile ---------- */
.navbar-toggle{ display:none; background:none; border:0; font-size:22px; color:inherit; }
@media (max-width: 900px){
  .navbar{ padding:0; }
  .navbar-toggle{ display:block; }

  .main-menu .nav-menu-wrapper > ul{
    position:absolute; left:16px; right:16px; top:calc(var(--header-h) - 6px);
    flex-direction:column; align-items:stretch; gap:6px;
    background:rgba(15,23,42,.96); color:#fff; padding:10px; border-radius:14px;
    border:1px solid rgba(255,255,255,.1); box-shadow:var(--nav-shadow);
    transform-origin: top; transform:scale(.98); opacity:0; visibility:hidden; transition:all .16s ease;
  }
  .main-menu.open .nav-menu-wrapper > ul{ transform:scale(1); opacity:1; visibility:visible; }

  .main-menu ul li > a{ padding:12px 12px; border-radius:10px; }
  .main-menu ul ul{ position:static; min-width:unset; top:auto; left:auto; border:none; box-shadow:none; padding:6px; background:transparent; }
  .main-menu ul ul li a{ padding:9px 12px; border-radius:8px; background:rgba(255,255,255,.06); }
  .main-menu ul ul ul{ position:static; }

  .search input[type="search"]{ width:140px; max-width:40vw; }
}

/* ---------- Garder une seule ligne sur grands écrans ---------- */
@media (min-width: 901px){
  .main-menu .nav-menu-wrapper > ul{ flex-wrap:nowrap; gap:10px; }
}
/* ===== Footer 4 colonnes, left-justified ===== */
.footer{ background:#251a17; color:#e9e3e2; margin-top:48px; border-top:1px solid rgba(255,255,255,.06); }
.footer a{ color:#e6f3eb; }
.footer a:hover{ color:var(--accent-color,#22c55e); }

.footer .footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr; /* ← 4 colonnes */
  gap: clamp(18px, 3vw, 36px);
  padding: clamp(28px, 4vw, 48px) 0;
  align-items:start;              /* left-justify vertical */
  justify-items:start;            /* left-justify horizontal */
  text-align:left;                /* tout aligné à gauche */
}
@media (max-width: 1100px){
  .footer .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px){
  .footer .footer-grid{ grid-template-columns: 1fr; }
}

.brand--foot{ display:inline-flex; align-items:center; gap:10px; font-size:20px; }
.brand--foot .brand-mark{
  width:28px; height:28px; border-radius:8px;
  background:var(--accent-color,#dbaa08);
  box-shadow:0 0 0 6px rgba(34,197,94,.12);
}

.foot-blurb{ margin:10px 0 16px; color:#e9e3e2; max-width:46ch; }

.foot-social{ display:flex; gap:10px; margin-top:12px; }
.foot-social a{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.foot-social svg{ width:18px; height:18px; fill:#e6f3eb; }
.foot-social a:hover{ transform:translateY(-1px); background:rgba(34,197,94,.2); }

.foot-title{ margin:4px 0 10px; font-weight:800; letter-spacing:.3px; }
.foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.foot-links a{ color:#e9e3e2; }
.foot-links a:hover{ color:#fff; }

.foot-note{ color:#e9e3e2; margin:4px 0 10px; }

.foot-news{ display:flex; gap:10px; align-items:center; }
.foot-news input{
  flex:1; min-width:0; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.05); color:#fff; padding:0 12px; outline:none;
}
.foot-news input::placeholder{ color:#e9e3e2; }
.foot-news button{
  width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
  background:var(--accent-color,#22c55e); color:#062411; font-weight:800;
}
.foot-news button:hover{ filter:brightness(1.05); transform:translateY(-1px); }

.foot-contact p{ display:flex; align-items:center; gap:10px; margin:8px 0; color:#cfe7da; }
.foot-contact svg{ width:18px; height:18px; fill:#9bd3b1; flex:0 0 auto; }

.foot-bar{ border-top:1px solid rgba(255,255,255,.06); background:#160f0d; }
.foot-bottom{ display:flex; justify-content:space-between; gap:16px; padding:12px 0; }
@media (max-width:720px){ .foot-bottom{ flex-direction:column; align-items:flex-start; } }

/* utilitaire */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
/* ===== Mobile only fixes (≤820px) ===== */
@media (max-width:820px){

  /* Layout : une seule colonne, sidebar cachée */
  .layout{ grid-template-columns:1fr !important; }
  .sidecol{ display:none !important; }

  /* Conteneur générique */
  .wrap{ padding-inline:16px !important; }

  /* Topbar mobile : burger à gauche, logo centré, search à droite */
  .mobile-bar{
    display:grid !important;
    grid-template-columns:40px 1fr 40px;
    align-items:center;
    gap:10px;
    padding:10px 12px;
  }
  #mbOpen{ justify-self:start; }
  .mobile-bar .brand{ justify-self:center; }
  #mbSearchBtn{ justify-self:end; }

  /* Icône search desktop : cachée sur mobile */
  .search-btn{ display:none !important; }
  .brand--desktop,
  .nav-menu-wrapper{ display:none !important; }

  /* Hero mobile : plein écran sans décalage */
  :root{
    --vi-offset:0 !important;
    --vi-height:420px; /* ajuste si besoin */
  }
  .vi-hero{
    margin-top:0 !important;
    height:var(--vi-height) !important;
    background-position:center right;
  }
  .vi-hero__container,
  .vi-hero .wrap{
    margin-top:0 !important;
    padding-inline:16px !important;
  }

  /* Section “meters” (si présente) : pile l’image et les barres */
  .meters{ grid-template-columns:1fr !important; }
  .meters-visual img{ height:auto; }

  /* Tables/cartes : un peu d’air aux bords */
  .card, .table-card{ border-radius:14px; }
  
  /* ========== QUICK FIX OVERRIDES (mobile + header/hero + layout) ========== */

/* 1) Laisse le mobile respirer : PAS de min-width globale */
html, body { min-width: 0 !important; }

/* 2) Conteneur standard */
.wrap{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(12px, 3.2vw, 20px);
}

/* 3) Header unifié (“glass”) */
.header{
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, #3b2d2d 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #ffffff 10%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  color: #e7edf5;
}
.header .wrap{
  height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* 4) Grille principale */
.layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }

/* 5) MOBILE (≤ 820px) — une seule version, bien fermée */
@media (max-width: 820px){

  /* Layout : une seule colonne, sidebar cachée */
  .layout{ grid-template-columns: 1fr !important; }
  .sidecol{ display: none !important; }

  /* Conteneur générique */
  .wrap{ padding-inline: 16px !important; }

  /* Topbar mobile : burger à gauche, logo centré, loupe à droite */
  .mobile-bar{
    display: grid !important;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 0;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    min-height: 56px;
  }
  #mbOpen{ justify-self: start; }
  .mobile-bar .brand{ justify-self: center; }
  #mbSearchBtn{ justify-self: end; }

  /* Safe area iOS */
  .header{ padding-top: env(safe-area-inset-top); }

  /* Icône search desktop + menus desktop : cachés en mobile */
  .search-btn,
  .brand--desktop,
  .nav-menu-wrapper{ display: none !important; }

  /* Hero plein écran mobile, texte aligné au conteneur */
  .vi-hero{
    margin-top: 0 !important;
    height: 420px !important;
    background-position: center right !important;
  }
  .vi-hero__container,
  .vi-hero .wrap{
    margin-top: 0 !important;
    padding-inline: 16px !important;
  }

  /* Meters en pile si présents */
  .meters{ grid-template-columns: 1fr !important; }
  .meters-visual img{ height: auto; }
}
/* ========== FIN QUICK FIX ========== */
  
/* 1) Couper le débordement global */
html, body{
  overflow-x: hidden;           /* coupe la barre horizontale */
  width: 100%;                  /* évite un body > viewport */
}

/* Bonus : sur navigateurs récents, c’est encore plus strict */
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* 2) Empêcher les éléments “coupables” de dépasser */
*, *::before, *::after{ box-sizing: border-box; }
img, video, svg{ max-width: 100%; height: auto; display: block; }

/* 3) Éviter le piège du 100vw qui crée du débordement sur mobile */
.full-bleed{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 4) Si un composant déborde encore, isole-le */
.overflow-guard{ overflow-x: hidden; 
    
}