/* ════════════════════════════════════════════════════════════════
   IT'S RUGBY — HOME PAGE CSS
   Template-specific styles for the homepage
   ════════════════════════════════════════════════════════════════ */

/* Section flush (no vertical padding)
   `.section.section--flush` et non `.section--flush` seul (29/09) : sur les
   pages en cache, RUCSS inline cette feuille AVANT itsrugby-common.css, dont
   `.section{padding:28px 0}` gagnait à spécificité égale (28 px au lieu de 8
   au-dessus de la Une, visiteurs anonymes seulement). */
.section.section--flush { padding-top:8px; padding-bottom:0; }

/* Section title light variant */
/* Variant pour sections à fond sombre (ex: Vidéos & Podcasts sur teal)
   Section parente déjà opaque → pas besoin de fond vanilla, on remet transparent */
.its-v2 h2.section-title.section-title--light,
.section-title.section-title--light{
  color:var(--vanilla);
  background:transparent;
  padding:0;
}
.its-v2 h2.section-title.section-title--light::after,
.section-title.section-title--light::after{
  background:rgba(242,229,210,.22);
}
.section-title--light .section-title-hint{color:rgba(242,229,210,.55);}
.section-title--light a{color:var(--sage);}
.section-title--light a:hover{color:var(--vanilla);}

/* ── Sections "dark theme" : fond teal sombre + cards crème (inverses) ──
   Classe `section--dark` ajoutée par PHP quand `section_theme === 'dark'` côté admin.
   Casse la monotonie du fond beige. */

/* Wrapper section : fond teal */
.its-v2 .section--dark{
  background:var(--teal);
  padding:32px 0 36px;
  margin:24px 0;
}
/* Footer collé au dernier bloc de la home : sa marge haute (48px) créait une
   bande crème entre la section Enquêtes (teal) et le footer (teal). Scopé home
   (cette feuille n'est chargée que sur la home + shortcode blocs). */
body.home .site-footer{margin-top:0;}
.its-v2 #main-content > .section--dark:last-child{margin-bottom:0;}
/* Titre + hint en vanilla */
.its-v2 .section--dark .section-title{
  color:var(--vanilla);
  background:transparent;
}
.its-v2 .section--dark .section-title::after{background:rgba(242,229,210,.22);}
.its-v2 .section--dark .section-title-hint{color:rgba(242,229,210,.55);}
.its-v2 .section--dark .section-title a{color:var(--sage);}
.its-v2 .section--dark .section-title a:hover{color:var(--vanilla);}

/* Cards : règle de CONTRASTE (Félix 03/08) — fond de section vanilla → fade
   teal, fond de section teal → fade vanilla. Ici (sections sombres) : fade
   vanilla + texte teal. La seule vraie erreur était le bloc Vidéos (fade
   vanilla sur fond CLAIR), corrigé dans .media-card-overlay plus bas. */
.its-v2 .section--dark .bento-card{background:var(--teal);}
.its-v2 .section--dark .bento-overlay{
  background:linear-gradient(to top,var(--vanilla) 0%,var(--vanilla) 60%,rgba(242,229,210,.6) 80%,transparent 100%);
  color:var(--teal);
}
.its-v2 .section--dark .bento-title{color:var(--teal);}
.its-v2 .section--dark .une-cat-badge{background:var(--teal);color:var(--vanilla);}
.its-v2 .section--dark .bento-author{color:var(--teal);opacity:.85;}
.its-v2 .section--dark .bento-author::after{color:var(--teal);opacity:.5;}
.its-v2 .section--dark .bento-date{color:var(--teal);opacity:.6;}

/* Comp-zones en mode dark : titre zone + liens en vanilla pour contraste */
.its-v2 .section--dark .comp-zone-title{color:var(--vanilla);}
.its-v2 .section--dark .comp-zone-link,
.its-v2 .section--dark #its-v2 .comp-zone-link{color:var(--vanilla);opacity:.85;}
.its-v2 .section--dark .comp-zone-link:hover{color:var(--sage);opacity:1;}
.its-v2 .section--dark .comp-zone-list li{border-bottom-color:rgba(242,229,210,.18);}

/* Ad slot centered */
.its-ad-center { margin:20px auto; }

/* ── Reset typographie sur le scope #its-v2 ── */
#its-v2 h1, #its-v2 h2, #its-v2 h3,
#its-v2 h4, #its-v2 h5, #its-v2 h6 {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

/* ── Neutraliser les wrappers WP/theme sur la home ── */
.page-template-default .site-main,
.page-template-default .entry-content,
.page-template-default .page-content {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.page-template-default #content,
.page-template-default .hentry {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}
/* Masquer le titre de la page WP sur la home */
body.home .entry-header,
body.home .page-header,
body.page-id-256 .entry-header {
  display: none !important;
}

/* ── Format badges (video/son/image/photo) ──────────────────── */
.format-badge {
  position:absolute; top:40%; left:50%; z-index:3;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:0;
  opacity:.9; transition:opacity .2s, transform .2s;
}
.bento-card:hover .format-badge { opacity:1; transform:translate(-50%,-50%) scale(1.1); }
.format-badge--video { background:var(--sage); color:var(--teal); }
.format-badge--son { background:var(--vanilla); color:var(--teal); }
.format-badge--image { background:rgba(255,255,255,.85); color:var(--teal); }
.format-badge--photo { background:rgba(255,255,255,.85); color:var(--teal); }
.format-badge svg { width:20px; height:20px; }
.format-badge--video svg { margin-left:2px; }

/* ── Scores ticker (press-style) ─────────────────────────────── */
.its-v2 nav.scores-ticker,
nav.scores-ticker{background:#1A1A1A;color:var(--vanilla);padding:0;overflow:hidden;border-bottom:2px solid #8ED968;display:flex;align-items:stretch;min-height:56px;width:100%;max-width:100%;}
/* App WebView Android — FIX RACINE de l'ICB=1706 (testé device 20/07) :
   `contain:content` (= layout+paint+style, PAS size) isole le layout du scroller
   → la rangée de matchs (~4900px) ne compte plus dans le scrollWidth de la page,
   donc le WebView ne gonfle plus le layout viewport : innerWidth revient à 426.
   Corrige d'un coup tabbar/bandeaux/Didomi (qui lisaient innerWidth=1706).
   ⚠️ `content` et NON `size` : `size` aplatirait la hauteur du ticker (inner seul
   sur sa ligne flex en mobile) ; `content` garde la hauteur (~59px). overflow-x
   scroll = conteneur de défilement explicite. */
html.is-app .scores-ticker-inner{overflow-x:scroll;contain:content;}

/* Bandeau "base de données" INSÉRÉ dans le ticker (même ligne), design ticker :
   chiffres vert fluo, libellés vanilla. display:contents → compteurs + slider
   deviennent frères flex de .scores-ticker-inner (scores) → partage de largeur. */
.db-band{display:contents;}
/* Séparateur entre le bloc base-de-données et les scores (inner ajouté par JS) */
.scores-ticker .scores-ticker-inner{border-left:1px solid rgba(255,255,255,.12);flex:1 1 0;}
/* Item commun (compteur + carte du slider) — hauteur calée sur le ticker (56px) */
.db-band a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  height:56px;padding:4px 20px;text-decoration:none;color:var(--vanilla);white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.08);
}
.db-band strong{font-size:17px;font-weight:900;line-height:1;letter-spacing:-.4px;font-variant-numeric:tabular-nums;color:var(--g-bright);}
.db-band span{font-size:9px;font-weight:800;line-height:1.2;text-transform:none;letter-spacing:0;color:var(--vanilla);}
.db-band a:hover,.db-band a:focus-visible{background:rgba(255,255,255,.06);}
.db-band a:hover strong,.db-band a:focus-visible strong{color:#fff;}
/* Compteurs fixes à gauche */
.db-band-counts{display:flex;flex:0 0 auto;list-style:none;margin:0;padding:0;}
.db-band-counts>li{display:flex;}
.db-band-counts a{flex:1;}   /* le <a> remplit sa colonne → contenu bien centré */
.db-band-counts>li:first-child a{border-left:none;}
/* Slider façon ticker : défile en boucle, pause au survol */
/* Zone stats compacte (≈2 cartes visibles, défile en boucle) → le gros de la
   largeur va aux scores. */
.db-slider{flex:0 1 clamp(190px,20vw,330px);min-width:0;overflow:hidden;position:relative;border-left:1px solid rgba(255,255,255,.08);}
/* ⚠️ Ne PAS élargir le slider quand .scores-ticker-inner est absent (tenté puis
   retiré le 06/08) : ce conteneur est injecté par le JS, lui-même différé par
   WP Rocket jusqu'à la première interaction. Une règle `:not(:has(...))` prend
   donc effet à l'affichage puis se retourne dès que le visiteur bouge la
   souris → saut de mise en page à chaque visite. Le vide à droite du bandeau
   signale un manque de DONNÉES (aucun match dans la fenêtre du ticker), pas un
   défaut de style : c'est là qu'il faut chercher. */
.db-slider-track{display:flex;width:max-content;list-style:none;margin:0;padding:0;animation:db-slide 50s linear infinite;}
.db-slider:hover .db-slider-track,.db-slider:focus-within .db-slider-track{animation-play-state:paused;}
.db-slider-track>li{display:flex;}
.db-slider a strong{font-size:16px;letter-spacing:-.3px;}
@keyframes db-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* Accessibilité : pas d'auto-défilement si l'utilisateur le demande → scroll manuel */
@media(prefers-reduced-motion:reduce){
  .db-slider{overflow-x:auto;}
  .db-slider-track{animation:none;}
}
@media(max-width:760px){
  /* Mobile : on empile — ligne 1 = compteurs (3 colonnes), ligne 2 = scores
     (scroll horizontal, pleine largeur). Slider de stats + flèches masqués. */
  .scores-ticker{flex-wrap:wrap;}
  .db-band-counts{flex:1 1 100%;}
  .db-band-counts>li{flex:1 1 0;min-width:0;}
  .db-slider{display:none;}
  .db-band a{height:46px;padding:4px 6px;}
  .db-band strong{font-size:15px;}
  .db-band span{font-size:8px;letter-spacing:.3px;}
  .scores-ticker .scores-ticker-inner{flex:1 1 100%;border-left:none;border-top:1px solid rgba(255,255,255,.1);}
  .ticker-nav{display:none;}
}
.scores-ticker-inner{
  flex:1;min-width:0;max-width:100%;
  display:flex;align-items:stretch;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
  gap:0;
}
.scores-ticker-inner::-webkit-scrollbar{height:0;display:none;}
.ticker-match{
  flex:0 0 auto;scroll-snap-align:start;
  display:flex;align-items:center;gap:10px;padding:10px 20px;
  border-right:1px solid rgba(255,255,255,.08);
  text-decoration:none;color:var(--vanilla);transition:background .15s;white-space:nowrap;
}
.ticker-match:last-child{border-right:none;}
.ticker-match:hover{background:rgba(255,255,255,.06);}
.ticker-match--live{position:relative;}
.ticker-live-dot{width:6px;height:6px;background:#e74c3c;display:inline-block;animation:livePulse 1.5s infinite;flex-shrink:0;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.ticker-comp{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--g-bright);flex-shrink:0;}
.ticker-teams{display:flex;flex-direction:column;gap:2px;}
.ticker-team-row{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;}
.ticker-team-name{min-width:80px;}
/* Spécificité élevée pour neutraliser les styles globaux */
.its-v2 a.ticker-match{color:var(--vanilla);}
.its-v2 a.ticker-match .ticker-team-name{color:var(--vanilla);}
.its-v2 a.ticker-match .ticker-team-score{color:var(--vanilla);}
.its-v2 a.ticker-match .ticker-team-score--winner{color:#8ED968;}
.its-v2 a.ticker-match .ticker-comp{color:#8ED968;}
.its-v2 a.ticker-match .ticker-status{color:rgba(242,229,210,.7);}
.ticker-team-score{font-size:13px;font-weight:900;min-width:20px;text-align:center;}
.ticker-team-score--winner{color:var(--g-bright);}
.ticker-status{font-size:9px;font-weight:700;color:rgba(242,229,210,.7);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;}
.its-v2 .scores-ticker .ticker-nav{display:flex;align-items:stretch;gap:0;flex-shrink:0;background:transparent;border-left:1px solid rgba(255,255,255,.12);}
.its-v2 .scores-ticker button.ticker-nav-btn,
.its-v2 .scores-ticker button.ticker-nav-btn:hover,
.its-v2 .scores-ticker button.ticker-nav-btn:focus{
  background:transparent;border:none;border-right:1px solid rgba(255,255,255,.12);color:rgba(242,229,210,.6);
  cursor:pointer;width:44px;height:auto;align-self:stretch;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:400;line-height:1;font-family:var(--sans);
  transition:all .15s;box-shadow:none;outline:none;padding:0;margin:0;
}
.its-v2 .scores-ticker button.ticker-nav-btn:last-child{border-right:none;}
.its-v2 .scores-ticker button.ticker-nav-btn:hover{color:var(--vanilla);background:rgba(255,255,255,.08);}
/* Mobile : masquer les flèches (scroll tactile) — placé APRÈS la règle de base
   pour la battre à spécificité égale. Touch swipe suffit. */
@media(max-width:760px){
  .its-v2 .scores-ticker .ticker-nav{display:none;}
}
/* ── Native ad (intégré comme un article) ──────────────────── */
.bento-card--pinned{position:relative;}
.bento-card--pinned .une-cat-badge{background:var(--vanilla);color:var(--teal);}
/* Tag "Publicité" en haut-droite UNIQUEMENT pour la pub native en bento
   (badge facon carte article). Scopé : sans le préfixe .bento-card--pinned,
   ce selecteur global poussait le tag des pubs display (rectangle sidebar,
   leaderboard) en haut + majuscules sur toute page chargeant home.css, au lieu
   du petit tag discret en bas-droite défini dans itsrugby-common.css. */
.bento-card--pinned .its-zn-tag{
  position:absolute;top:8px;right:8px;z-index:2;
  font-size:8px;font-weight:700;letter-spacing:0;text-transform:none;
  padding:3px 7px;background:rgba(0,0,0,.45);color:rgba(255,255,255,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pinned-brand{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:6px;font-size:10px;font-weight:700;color:var(--sage);
}
.pinned-brand img{width:16px;height:16px;object-fit:contain;}
.sponsored-cta{
  display:inline-block;margin-top:8px;padding:5px 14px;
  font-size:9px;font-weight:800;letter-spacing:0;text-transform:none;
  background:var(--vanilla);color:var(--teal-dk);transition:background .15s;
}
.sponsored-cta:hover{background:var(--vanilla-d, #E8D8C0);}

/* ── Stats strip (compact inline) ───────────────────────────── */
.stats-strip{
  background:var(--white);
  padding:0;overflow:hidden;border-bottom:1px solid var(--border);
}
.stats-strip-inner{
  display:flex;align-items:stretch;justify-content:center;gap:0;flex-wrap:nowrap;
  max-width:90%;margin:0 auto;
}
.stat-chip{
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px 12px;flex:1;justify-content:center;
  text-decoration:none;transition:background .15s;
  border-right:1px solid var(--border);white-space:nowrap;
}
.stat-chip:last-child{border-right:none;}
.stat-chip:hover{background:rgba(28,61,52,.04);}
.stat-chip-val{font-size:16px;font-weight:900;color:var(--teal);line-height:1;}
.stat-chip-lbl{font-size:8px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted);}

/* ── Home bento (hero + articles + sidebar) ─────────────────── */
.home-bento{
  display:grid;max-width:90%;margin:0 auto;padding:0;
  grid-template-columns:1fr 320px;gap:12px;
}
.bento-articles{
  display:grid;gap:5px;
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:1fr 1fr;
  grid-template-areas:"hero b1" "hero b2";
  /* Cartes 4-5 (Une à 5 sujets) : rangée implicite à la même hauteur que les autres */
  grid-auto-rows:1fr;
}
.bento-card{
  position:relative;display:block;overflow:hidden;background:var(--teal);
  text-decoration:none;min-height:200px;
}
.bento-hero{grid-area:hero;}
/* Scoped aux bentos qui définissent grid-template-areas, sinon cela casse les autres
   layouts (cat-grid, breves-container...) qui utilisent aussi .bento-card. */
.home-bento .bento-card:nth-child(2),
.cat-bento  .bento-card:nth-child(2){grid-area:b1;}
.home-bento .bento-card:nth-child(3),
.cat-bento  .bento-card:nth-child(3){grid-area:b2;}
.bento-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .45s ease;}
/* Cadrage : ancre le crop vers le HAUT de la photo. Le bandeau texte recouvre
   le bas de la carte et object-fit:cover recadre : centré (défaut), la bande
   visible tombe au milieu de la photo et coupe les têtes (sujets sport dans le
   tiers supérieur). 50% 18% garde les visages sans montrer que du ciel. */
.bento-img,.media-card-img,.lr-img,.breve-img{object-position:50% 18%;}
.bento-card:hover .bento-img{transform:scale(1.04);}
.bento-overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:18px;
  background:linear-gradient(to top,var(--teal) 0%,var(--teal) 60%,rgba(28,61,52,.6) 80%,transparent 100%);
  color:var(--vanilla);
}
.bento-hero .bento-overlay{padding:60px 28px 28px;}
.bento-title{font-weight:900;line-height:1.25;margin-top:6px;color:var(--vanilla);}
.bento-hero .bento-title{font-size:22px;}
.bento-card:not(.bento-hero) .bento-title{
  font-size:13px;line-height:1.35;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;
}
/* Petites cartes bento (rectangles) : overlay compact + gradient plus transparent
   pour laisser respirer l'image à la une (sinon les titres longs masquent la photo). */
.home-bento .bento-card:not(.bento-hero) .bento-overlay,
.cat-bento  .bento-card:not(.bento-hero) .bento-overlay{
  padding:10px 14px 12px;
  background:linear-gradient(to top,rgba(28,61,52,.95) 0%,rgba(28,61,52,.82) 55%,rgba(28,61,52,.45) 80%,transparent 100%);
}
.bento-meta{display:flex;align-items:center;gap:8px;margin-top:6px;}
.bento-author{font-size:10px;font-weight:700;color:rgba(242,229,210,.85);}
.bento-author::after{content:'·';margin-left:8px;opacity:.6;}
.bento-date{font-size:10px;color:rgba(242,229,210,.6);}
.une-cat-badge{
  display:inline-block;font-size:9px;font-weight:800;letter-spacing:0;
  text-transform:none;padding:3px 8px;background:var(--vanilla);color:var(--teal-dk);
}

/* ── Sidebar En bref ────────────────────────────────────────── */
.bento-sidebar{
  background:var(--teal);
  /* 610px = hauteur du bento à 5 cartes (3 rangées de 200 + 2 gaps de 5) :
     la sidebar En bref s'aligne sur la Une élargie (03/08). Mobile : 320 plus bas. */
  display:flex;flex-direction:column;overflow-y:auto;max-height:610px;
  border-left:4px solid var(--sage);
}
.sidebar-title{
  font-size:16px;font-weight:900;
  color:var(--vanilla);padding:16px 16px 12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--serif);
}
.sidebar-breves{display:flex;flex-direction:column;}
.sidebar-breve{
  display:block;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);
  text-decoration:none;transition:background .15s;
}
.sidebar-breve:hover{background:rgba(255,255,255,.06);}
.sidebar-breve-cats{font-size:9px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--vanilla);opacity:.7;margin-bottom:4px;}
.sidebar-breve-title{font-size:12px;font-weight:700;line-height:1.4;color:var(--vanilla);}

/* ── Data grid (chiffres cles) ──────────────────────────────── */
.data-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
  max-width:90%;margin:0 auto;padding:0;
}
.data-card{
  background:var(--white);border:1px solid var(--border);padding:20px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;transition:all .2s;position:relative;overflow:hidden;
}
.data-card::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transition:transform .25s;transform-origin:left;}
.data-card:hover{border-color:var(--teal);box-shadow:0 4px 16px rgba(28,61,52,.1);transform:translateY(-2px);}
.data-card:hover::after{transform:scaleX(1);}
.data-val{font-size:28px;font-weight:900;color:var(--teal);line-height:1;}
.data-label{font-size:10px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:6px;}
.data-detail{font-size:11px;color:var(--muted);margin-top:4px;}

/* ── Breves ──────────────────────────────────────────────────── */
.breves-scroll{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.breve-card{
  flex:0 0 280px;scroll-snap-align:start;
  background:var(--white);
  border:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.breve-card:hover{border-color:var(--teal);box-shadow:0 6px 18px rgba(28,61,52,.1);}
.breve-img{width:100%;height:100px;object-fit:cover;display:block;}
.breve-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.breve-badge{
  display:inline-block;width:fit-content;font-size:9px;font-weight:800;letter-spacing:0;
  text-transform:none;padding:2px 7px;background:var(--sage-lt);color:var(--teal);border:none;
}
.breve-title{font-size:12px;font-weight:700;line-height:1.4;color:var(--ink);flex:1;}
.breve-meta{display:flex;align-items:center;gap:6px;margin-top:auto;}
.breve-author{font-size:10px;font-weight:700;color:var(--teal);}
.breve-author::after{content:'·';margin-left:6px;color:var(--border);}
.breve-date{font-size:10px;color:var(--muted);}

/* ── Highlights (joueur + stat) — version compact ───────────── */
.highlights-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:90%;margin:0 auto;padding:0;}
.hl-block{
  background:var(--white);
  border:1px solid var(--border);
  padding:14px 16px;
  display:flex;align-items:center;gap:14px;
  transition:box-shadow .2s ease, border-color .2s ease;
  min-height:80px;
}
.hl-block:hover{
  border-color:var(--teal);
  box-shadow:0 6px 18px rgba(28,61,52,.1);
}
/* Photo + fallback initiales — calés sur le pattern .archive-card-logo
   du site (carré, vanilla bg, teal text, font 900). Cohérent avec les
   listings joueurs / clubs / arbitres / etc. */
.hl-photo{
  width:60px;height:60px;flex-shrink:0;
  background:var(--vanilla);color:var(--teal);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  /* override d'un éventuel border-radius:50% historique */
  border-radius:0;
}
.hl-photo:not(.hl-photo--initials){object-fit:cover;}
img.hl-photo{display:block;}
.hl-photo--initials{
  font-size:20px;font-weight:900;letter-spacing:1px;text-transform:uppercase;
}
.hl-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.hl-name{font-size:14px;font-weight:900;color:var(--teal);line-height:1.2;}
.hl-team{font-size:10px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;}
.hl-stat-hero{font-size:18px;font-weight:900;color:var(--teal);margin-top:2px;line-height:1.1;}
#its-v2 .hl-stat-label,.hl-stat-label{font-size:11px;font-weight:800;color:var(--teal);text-transform:none;letter-spacing:0;}
.hl-context{font-size:10px;color:var(--muted);margin-top:1px;line-height:1.3;}
.hl-big-number{font-size:34px;font-weight:900;color:var(--teal);line-height:1;flex-shrink:0;letter-spacing:-1px;}
@media(max-width:680px){
  .highlights-grid{grid-template-columns:1fr;}
  .hl-block{padding:12px 14px;}
  .hl-photo{width:52px;height:52px;}
  .hl-big-number{font-size:28px;}
}

/* ── Competitions grid ───────────────────────────────────────── */
.comp-zones{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:90%;margin:0 auto;padding:0;}
.comp-zone{background:var(--white);border:1px solid var(--border);padding:18px;}
#its-v2 .comp-zone-title,.comp-zone-title{font-size:11px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--teal);margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--sage);}
#its-v2 .comp-zone-list,.comp-zone-list{list-style:none;padding:0;margin:0;color:var(--teal);}
.comp-zone-list li{padding:5px 0;border-bottom:1px solid rgba(196,196,196,.25);}
.comp-zone-list li:last-child{border-bottom:none;}
#its-v2 .comp-zone-link,.comp-zone-link{font-size:12px;font-weight:600;color:var(--teal);text-decoration:none;transition:color .15s;}
.comp-zone-link:hover{color:var(--teal);text-decoration:underline;}

/* ── Category bento sections ─────────────────────────────────── */
.cat-bento{display:grid;gap:5px;min-height:340px;max-width:90%;margin:0 auto;padding:0;}
.cat-bento .bento-card{min-height:0;}

/* Variante A : hero gauche + 2 petits droite */
.cat-bento--a{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"hero b1" "hero b2";}
.cat-bento--a .bento-card:first-child{grid-area:hero;}
.cat-bento--a .bento-card:nth-child(2){grid-area:b1;}
.cat-bento--a .bento-card:nth-child(3){grid-area:b2;}

/* Variante B : 2 petits gauche + hero droite (miroir) */
.cat-bento--b{grid-template-columns:1fr 1.2fr;grid-template-rows:1fr 1fr;grid-template-areas:"b1 hero" "b2 hero";}
.cat-bento--b .bento-card:first-child{grid-area:hero;}
.cat-bento--b .bento-card:nth-child(2){grid-area:b1;}
.cat-bento--b .bento-card:nth-child(3){grid-area:b2;}

/* Variante C : 3 colonnes egales, pas de hero */
.cat-bento--c{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;grid-template-areas:none;min-height:260px;}
.cat-bento--c .bento-card{grid-area:auto;}
.cat-bento--c .bento-card .bento-title{font-size:14px;}

/* Variante D : 4 colonnes egales, compact */
.cat-bento--d{grid-template-columns:repeat(4,1fr);grid-template-rows:1fr;grid-template-areas:none;min-height:220px;}
.cat-bento--d .bento-card{grid-area:auto;}
.cat-bento--d .bento-card .bento-title{font-size:13px;}

/* Variante E : 1 sujet — image gauche (petite) + texte droite */
.cat-bento--e{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:none;min-height:auto;}
.cat-bento--e .bento-card{display:none;}
.cat-bento--e .bento-card:first-child{display:grid;grid-template-columns:1fr 1.6fr;min-height:220px;position:relative;}
.cat-bento--e .bento-card:first-child .bento-img{position:relative;width:100%;height:100%;object-fit:cover;}
.cat-bento--e .bento-card:first-child .bento-overlay{position:relative;background:var(--teal);padding:30px;display:flex;flex-direction:column;justify-content:center;}
.cat-bento--e .bento-card:first-child .bento-title{font-size:22px;font-weight:900;color:var(--vanilla);line-height:1.3;}
.cat-bento--e .bento-card:first-child .bento-author{color:var(--sage);}
.cat-bento--e .bento-card:first-child .bento-date{color:rgba(242,229,210,.5);}
.cat-bento--e .bento-excerpt{font-size:13px;line-height:1.6;color:rgba(242,229,210,.75);margin-top:12px;}

/* Variante F : bento articles + bandeau data en dessous */
.cat-bento--f{grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"hero b1" "hero b2";min-height:340px;}
.cat-bento--f .bento-card:first-child{grid-area:hero;}
.cat-bento--f .bento-card:nth-child(2){grid-area:b1;}
.cat-bento--f .bento-card:nth-child(3){grid-area:b2;}
/* Layout bento 6-col : 3 heroes span 2 cols (row 1), dataCards compactes span 1 col (rows 2+).
   Les smalls sont 2x plus denses → vraie densité bento. */
.cat-data-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(150px,auto);
  gap:10px;
  max-width:90%;
  margin:8px auto 0;
  padding:0;
}
.cat-data-item--hero{grid-column:span 2;}
.cat-data-item:not(.cat-data-item--hero){grid-column:span 1;}
.cat-data-item--large{grid-column:span 2 !important;}

/* Layout 2-col pour la card "Meilleure série" (large = span 2).
   Grid avec template-areas : col 1 = icon+val+label+detail empilés, col 2 = games */
.cat-data-item--large.cat-data-item{
  display:grid !important;
  grid-template-columns:minmax(140px,1fr) 1.6fr;
  grid-template-rows:auto 1fr auto auto auto;
  grid-template-areas:
    "icon   games"
    ".      games"
    "val    games"
    "label  games"
    "detail games";
  align-items:start;
  column-gap:24px;
  row-gap:4px;
  padding:18px 22px;
}
.cat-data-item--large .cat-data-icon{
  position:relative;
  grid-area:icon;
  bottom:auto;right:auto;
  width:34px;height:34px;
  padding:7px;
  background:var(--teal);
  color:var(--vanilla);
  opacity:1;
  align-self:flex-start;
  margin-bottom:8px;
}
.cat-data-item--large .cat-data-val{
  grid-area:val;
  font-size:34px;
  font-weight:900;
  color:var(--teal);
  line-height:1;
  letter-spacing:-1px;
  font-family:var(--serif);
  margin:0;
}
.cat-data-item--large .cat-data-label{
  grid-area:label;
  font-size:10px;
  font-weight:800;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
  margin:6px 0 0;
}
.cat-data-item--large .cat-data-detail{
  grid-area:detail;
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  line-height:1.35;
  margin:4px 0 0;
  min-height:0;
  align-self:flex-start;
}
.cat-data-item--large .cat-data-games{
  grid-area:games;
  margin-top:0;
  align-self:center;
}

/* Liste des 5 derniers matchs : opposant + score, bordure color-coded W/L/D */
.cat-data-games{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
.cat-data-game{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
  padding:5px 12px;
  font-size:12px;
  border-left:3px solid var(--sage);
  background:var(--vanilla);
  min-height:26px;
  text-decoration:none;
  color:inherit;
  transition:background .15s ease;
}
.cat-data-game:hover{
  background:var(--vanilla-d);
}
.cat-data-game--lost{border-left-color:var(--red);}
.cat-data-game--draw{border-left-color:var(--muted);}
.cat-data-game-opp{
  font-weight:700;
  color:var(--teal);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  letter-spacing:-.1px;
}
.cat-data-game-score{
  font-weight:900;
  color:var(--teal);
  font-family:var(--serif);
  letter-spacing:-.3px;
  font-size:14px;
}

/* ── Cartes compactes (white, chip d'icône coloré) ──────────── */
.cat-data-item{
  position:relative;
  background:var(--white);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  overflow:hidden;
}

/* Icône en chip carré teal (icône vanilla, charte teal/vanilla 15/10) — flow normal, en haut */
.cat-data-icon{
  width:34px;
  height:34px;
  padding:7px;
  background:var(--teal);
  color:var(--vanilla);
  flex-shrink:0;
}

/* Val / label / detail (compactes) — val poussée en bas par margin-top:auto */
.cat-data-val{font-size:34px;font-weight:900;color:var(--teal);line-height:1;letter-spacing:-1px;font-family:var(--serif);margin-top:auto;padding-top:14px;}
.cat-data-label{font-size:10px;font-weight:800;text-transform:none;letter-spacing:0;color:var(--muted);margin-top:8px;}
.cat-data-detail{font-size:11px;font-weight:600;color:var(--muted);margin-top:3px;line-height:1.35;min-height:2.6em;}
.cat-data-detail-line{display:block;min-height:1.3em;}

/* ── Hero : teal + watermark icon (1×1 compact) ──────────── */
.cat-data-item--hero{
  background:var(--teal);
  border:none;
  padding:18px 20px 16px;
  justify-content:center;
  color:var(--vanilla);
  min-height:210px;
  /* Stripe diagonale subtile en arrière-plan */
  background-image:
    linear-gradient(135deg,transparent 0%,transparent 60%,rgba(171,200,162,.05) 60%,rgba(171,200,162,.05) 65%,transparent 65%),
    linear-gradient(180deg,var(--teal) 0%,#15302A 100%);
}
/* Icône watermark en bas-droite (taille adaptée au hero 1×1) */
.cat-data-item--hero .cat-data-icon{
  position:absolute;
  bottom:-20px;
  right:-20px;
  width:130px;
  height:130px;
  padding:0;
  background:transparent;
  color:var(--sage);
  opacity:.14;
  pointer-events:none;
}

/* Label = badge vanilla en haut, collé au val */
.cat-data-item--hero .cat-data-label{
  position:relative;
  z-index:1;
  order:-1;
  margin:0 0 10px;
  align-self:flex-start;
  background:var(--vanilla);
  color:var(--teal-dk);
  font-size:10px;
  font-weight:900;
  letter-spacing:1.4px;
  padding:4px 8px 3px;
}

/* Val (compacte pour hero 1×1) */
.cat-data-item--hero .cat-data-val{
  position:relative;
  z-index:1;
  font-size:48px;
  letter-spacing:-1.5px;
  color:var(--vanilla);
  margin-top:0;
  font-weight:900;
  font-family:var(--serif);
  line-height:1;
}

/* Detail en bas, vanilla translucide */
.cat-data-item--hero .cat-data-detail{
  position:relative;
  z-index:1;
  font-size:12px;
  font-weight:600;
  color:rgba(242,229,210,.72);
  margin-top:8px;
  min-height:0;
  line-height:1.35;
}

/* Accent bar sauge top du hero, full width */
.cat-data-item--hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--sage);
}

/* Mini scoreboard pour Plus gros score (parsing X-Y + Team A vs Team B) */
.hero-scoreboard{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:0;
}
.hero-scoreboard-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
}
.hero-scoreboard-team{
  font-size:13px;
  font-weight:800;
  color:var(--vanilla);
  text-transform:none;
  letter-spacing:0;
  line-height:1.2;
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.hero-scoreboard-pts{
  font-size:34px;
  font-weight:900;
  color:var(--vanilla);
  font-family:var(--serif);
  letter-spacing:-1px;
  line-height:1;
  flex-shrink:0;
}

/* ── Hero body : flat 3-zones (photo + id + stat) ─────────── *
   Utilisé par les 3 heroes (Plus gros score sans photo, Joueur, Top réal).
   Photo + nom/équipe (id) + val/pill (stat) sur une seule ligne flex,
   centrés verticalement. Le detail/contexte se rend HORS body en sibling. */
.cat-data-item--hero-joueur .hero-joueur-body,
.cat-data-item--hero-stat .hero-joueur-body,
.cat-data-item--hero-card .hero-joueur-body{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  margin:0;
}
.cat-data-item--hero-joueur .hl-photo,
.cat-data-item--hero-stat .hl-photo,
.cat-data-item--hero-card .hl-photo{
  width:64px;
  height:64px;
  flex-shrink:0;
  background:var(--vanilla);
  color:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
}
.cat-data-item--hero-joueur img.hl-photo,
.cat-data-item--hero-stat img.hl-photo,
.cat-data-item--hero-card img.hl-photo{object-fit:cover;display:block;}
/* Zone identité (col 2 du body) : nom + équipe — ou val pour Plus gros score */
.hero-joueur-id{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* Zone stat (col 3 du body) : val (gros) + pill extra, alignés droite */
.hero-joueur-stat{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:6px;
  flex-shrink:0;
}
.hero-joueur-stat .cat-data-val{margin-top:0 !important;}
.hero-joueur-stat .hero-extra{margin-top:0;}


/* Info supplémentaire (champ extra auto-rempli depuis Supabase ou admin)
   — pill solide vanilla avec texte teal-dk (même pattern que les badges,
   contraste maximal sur fond teal des heroes). */
.hero-extra{
  position:relative;
  z-index:1;
  display:inline-block;
  margin-top:6px;
  padding:4px 8px 3px;
  background:var(--vanilla);
  color:var(--teal-dk);
  font-size:10px;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
  align-self:flex-start;
}
.cat-data-item--hero-joueur .hero-joueur-name,
.cat-data-item--hero-stat .hero-joueur-name,
.cat-data-item--hero-card .hero-joueur-name{
  font-size:18px !important;
  font-weight:900;
  color:var(--vanilla) !important;
  line-height:1.15;
  letter-spacing:-0.3px;
  margin:0;
  padding:0;
  text-transform:none;
}
.cat-data-item--hero-joueur .hero-joueur-team,
.cat-data-item--hero-stat .hero-joueur-team,
.cat-data-item--hero-card .hero-joueur-team{
  font-size:10px;
  font-weight:800;
  color:var(--sage);
  text-transform:none;
  letter-spacing:0;
  margin-bottom:2px;
}
.cat-data-item--hero-joueur .cat-data-val,
.cat-data-item--hero-stat .cat-data-val,
.cat-data-item--hero-card .cat-data-val{
  font-size:30px;
  letter-spacing:-0.8px;
  margin-top:4px;
  font-family:var(--serif);
  line-height:1;
}

@media(max-width:920px){
  .cat-data-strip{grid-template-columns:repeat(4,1fr);}
  .cat-data-item--hero{grid-column:span 2;padding:20px;min-height:170px;}
  .cat-data-item:not(.cat-data-item--hero){grid-column:span 2;}
  .cat-data-item--hero-card .cat-data-val{font-size:42px;letter-spacing:-1.2px;}
  .cat-data-item--hero-joueur .cat-data-val,
  .cat-data-item--hero-stat .cat-data-val{font-size:26px;letter-spacing:-0.6px;}
  .cat-data-item--hero-joueur .hl-photo,
  .cat-data-item--hero-stat .hl-photo{width:56px;height:56px;font-size:20px;}
  .hero-scoreboard-pts{font-size:28px;}
  .cat-data-item--hero .cat-data-icon{width:110px;height:110px;}
  /* Meilleure série : à 273px de large, seuls 3 games tiennent à côté des
     infos sans casser la hauteur de la row. On masque les games 4-5 et on
     élargit la col games pour que les noms ("Stade Toulousain") soient lisibles. */
  .cat-data-item--large.cat-data-item{
    padding:14px 16px;
    grid-template-columns:auto 1fr;
    column-gap:14px;
  }
  .cat-data-item--large .cat-data-games{gap:3px;}
  .cat-data-item--large .cat-data-game{min-height:20px;padding:3px 8px;font-size:11px;}
  .cat-data-item--large .cat-data-game-score{font-size:12px;}
  .cat-data-item--large .cat-data-game:nth-child(n+4){display:none;}
  /* Hero cards : à 273px de large, le layout flex horizontal (photo + id +
     stat) compresse le nom + le subtitle ("STADE TOULOUSAIN · TOP 14 J23")
     ne tient pas à côté d'une photo 56px → wrapping moche et hauteur explosée.
     On masque la photo et on fait wrapper le stat sur sa propre ligne pour
     un layout uniforme sur les 3 heroes (Plus gros score n'a déjà pas de photo). */
  .cat-data-item--hero-joueur .hl-photo,
  .cat-data-item--hero-stat .hl-photo,
  .cat-data-item--hero-joueur img.hl-photo,
  .cat-data-item--hero-stat img.hl-photo{display:none;}
  .cat-data-item--hero-joueur .hero-joueur-body,
  .cat-data-item--hero-stat .hero-joueur-body,
  .cat-data-item--hero-card .hero-joueur-body{
    flex-wrap:wrap;
    row-gap:10px;
  }
  .cat-data-item--hero-joueur .hero-joueur-id,
  .cat-data-item--hero-stat .hero-joueur-id,
  .cat-data-item--hero-card .hero-joueur-id{flex:1 1 100%;min-width:0;}
  .cat-data-item--hero-joueur .hero-joueur-stat,
  .cat-data-item--hero-stat .hero-joueur-stat,
  .cat-data-item--hero-card .hero-joueur-stat{
    flex:1 0 100%;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }
  /* Empêche le label hero de wrapper sur 2 lignes (cas "Top réalisateur
     cross-compétitions" qui ajouterait ~30px à la card et désynchronise la row) */
  .cat-data-item--hero .cat-data-label{
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:.8px;
  }
}
@media(max-width:720px){
  /* Mobile/tablette portrait : single column, toutes les cards full-width.
     --large doit aussi passer en span 1 (le !important sur span 2 du base force
     sinon une colonne implicite et la card "Meilleure série" finit seule sur
     une double colonne). */
  .cat-data-strip{grid-template-columns:1fr;}
  .cat-data-item--hero,
  .cat-data-item:not(.cat-data-item--hero),
  .cat-data-item--large{grid-column:span 1 !important;}
  .cat-data-item--hero{padding:20px;min-height:auto;}
  .cat-data-item--hero-card .cat-data-val{font-size:40px;}
  .cat-data-item--hero-joueur .cat-data-val,
  .cat-data-item--hero-stat .cat-data-val{font-size:24px;}
  .hero-scoreboard-pts{font-size:26px;}
  .cat-data-item--hero .cat-data-icon{width:100px;height:100px;}
  /* Les chips de label peuvent retrouver toute leur largeur en 1-col (plus de
     besoin de truncate) — restaure le wrap normal. */
  .cat-data-item--hero .cat-data-label{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }
  /* --large : repasse en stack vertical (icon/val/label en haut, games en bas)
     puisque la 2-col interne n'a plus de place. */
  .cat-data-item--large.cat-data-item{
    display:flex !important;
    flex-direction:column;
    padding:16px 18px;
  }
  .cat-data-item--large .cat-data-games{width:100%;margin-top:10px;align-self:stretch;}
  .cat-data-item--large .cat-data-game:nth-child(n+4){display:flex;}
}

/* ── Video / Mediatheque ────────────────────────────────────── */
.media-section{background:var(--teal);padding:24px 0;margin:0;}
.media-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:5px;max-width:90%;margin:0 auto;padding:0;}
.media-card{position:relative;display:block;overflow:hidden;text-decoration:none;background:var(--teal);min-height:200px;}
.media-card--hero{grid-row:1/3;}
.media-card-img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;transition:transform .45s ease;}
.media-card:hover .media-card-img{transform:scale(1.04);}
/* Règle de contraste : la section media a un FOND TEAL (dégradé sombre plus
   bas) → fade vanilla + texte teal, comme les .section--dark. */
.media-card-overlay{position:absolute;bottom:0;left:0;right:0;padding:16px;background:linear-gradient(to top,var(--vanilla) 0%,var(--vanilla) 60%,rgba(242,229,210,.6) 80%,transparent 100%);color:var(--teal);}
.media-card--hero .media-card-overlay{padding:60px 24px 24px;}
.media-card-badge{display:inline-block;font-size:8px;font-weight:800;letter-spacing:0;text-transform:none;padding:3px 8px;background:var(--teal);color:var(--vanilla);margin-bottom:6px;}
.media-card-title{font-size:13px;font-weight:700;line-height:1.35;color:var(--teal);}
.media-card--hero .media-card-title{font-size:20px;}
.media-card-meta{font-size:10px;color:var(--muted);margin-top:4px;}
.media-play{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:0;transition:transform .2s;}
.media-card--hero .media-play{width:56px;height:56px;}
.media-card:hover .media-play{transform:translate(-50%,-50%) scale(1.1);}
.media-play svg{width:20px;height:20px;fill:#fff;}
.media-play--video{background:var(--vanilla);}
.media-play--video svg{fill:var(--teal);margin-left:3px;}
.media-play--podcast{background:var(--vanilla);}
.media-play--podcast svg{fill:var(--teal);}

/* ── Sondage : utilise le rendu rzu-sondages-item du plugin (rz-pronos-ultimate) ── */
/* La section conserve son padding standard (32px haut/bas comme les autres sections home) */
/* Liste : meme largeur que les autres conteneurs (90% centre), espacement standard */
#sec-sondage-wrap > .rzu-sondages-list{max-width:90%;margin:0 auto;padding:0;list-style:none;}
/* Bug plugin : .rzu-sondage-results{display:flex} ecrase l'attribut [hidden] natif.
   Forcer le masquage tant que l'utilisateur n'a pas vote / sondage non cloture. */
.rzu-sondage-results[hidden]{display:none!important;}
/* 2 sondages cote a cote sur grand ecran (>=1100px).
   align-items:stretch (default grid) : meme hauteur pour les 2 cartes */
@media(min-width:1100px){
  #sec-sondage-wrap > .rzu-sondages-list:has(> .rzu-sondages-item:nth-child(2)){
    display:grid;grid-template-columns:1fr 1fr;gap:16px;
  }
  #sec-sondage-wrap > .rzu-sondages-list:has(> .rzu-sondages-item:nth-child(2)) > .rzu-sondages-item{margin:0;display:flex;flex-direction:column;}
  /* Le detail prend l'espace vertical restant pour egaliser les hauteurs */
  #sec-sondage-wrap > .rzu-sondages-list:has(> .rzu-sondages-item:nth-child(2)) > .rzu-sondages-item > .rzu-sondages-item-detail{flex:1;}
}
@media(max-width:900px){
  .home-bento{grid-template-columns:1fr;gap:16px;}
  .bento-articles{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;}
  .bento-hero{min-height:280px;}
  .bento-card:not(.bento-hero){min-height:180px;}
  .bento-sidebar{max-height:320px;}
  .data-grid{grid-template-columns:repeat(2,1fr);}
  .highlights-grid{grid-template-columns:1fr;}
  .media-grid{grid-template-columns:1fr;}
  .media-card--hero{grid-row:auto;min-height:240px;}
  .comp-zones{grid-template-columns:repeat(2,1fr);}
  .cat-bento--a,.cat-bento--b{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;min-height:auto;}
  .cat-bento--c,.cat-bento--d{grid-template-columns:1fr;grid-template-rows:auto;min-height:auto;}
  .cat-bento--f{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;min-height:auto;}
}
@media(max-width:680px){
  .bento-articles{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;}
  .bento-card{display:flex;flex-direction:column;min-height:auto!important;}
  .bento-card .bento-img{position:relative;inset:auto;height:180px;width:100%;}
  .bento-hero .bento-img{height:220px;}
  .bento-card .bento-overlay{position:relative;background:var(--teal);padding:10px 14px 12px;}
  .bento-hero .bento-overlay{padding:12px 16px 14px;}
  .home-bento{padding:0;}
  .data-grid{grid-template-columns:repeat(2,1fr);}
  .highlights-grid{padding:0;}
  .comp-zones{grid-template-columns:1fr;}
  .cat-bento--a,.cat-bento--b{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;min-height:auto;}
  .cat-bento--c,.cat-bento--d{grid-template-columns:1fr;grid-template-rows:auto;min-height:auto;}
  .cat-bento--e{padding:0;}
  .cat-bento--f{grid-template-columns:1fr;grid-template-areas:"hero" "b1" "b2";grid-template-rows:auto auto auto;min-height:auto;}
  .media-grid{grid-template-columns:1fr;}
  .media-card{display:flex;flex-direction:column;min-height:auto!important;position:relative;}
  .media-card .media-card-img{position:relative;inset:auto;height:200px;width:100%;}
  .media-card--hero .media-card-img{height:220px;}
  .media-card .media-play{top:100px;} /* centré sur l'image 200px */
  .media-card--hero .media-play{top:110px;} /* centré sur l'image 220px */
  .media-card .media-card-overlay{position:relative;background:var(--vanilla);padding:10px 14px 12px;color:var(--teal);}
  .media-card .media-card-title{color:var(--teal);}
  .media-card .media-card-meta{color:var(--muted);}
  .media-card .media-card-badge{background:var(--teal);color:var(--vanilla);}
  .media-card--hero .media-card-overlay{padding:12px 16px 14px;}
  .media-card--hero{min-height:auto;}
  .cat-bento--e .bento-card:first-child{grid-template-columns:1fr;}
  .sondage-bar-label{min-width:100px;font-size:11px;}
  .stat-chip{padding:10px 8px;}
  .stat-chip-val{font-size:14px;}
  .ticker-match{padding:8px 14px;}
}
@media(max-width:480px){
  .une-hero-title{font-size:17px;}
  .hl-big-number{font-size:36px;}
  .hl-photo{width:64px;height:64px;}
  .hl-block{padding:16px;gap:14px;}
  .stats-strip-inner{justify-content:flex-start;overflow-x:auto;}
}

/* ── Layouts complémentaires (alignés sur le 90% commun de la home) ─── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}
.breves-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}
.breves-container > * { scroll-snap-align: start; flex: 0 0 auto; }
.sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 920px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cat-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   Layouts grille additionnels (refacto Phase A)
   ══════════════════════════════════════════ */

/* Grid 2 colonnes (magazine larges) */
.cat-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  min-height: 280px;
}
.cat-grid-2 .bento-card { min-height: 280px; }
@media (max-width: 720px) { .cat-grid-2 { grid-template-columns: 1fr; } }

/* Grid 4 colonnes (compact) */
.cat-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}
.cat-grid-4 .bento-card { min-height: 180px; }
@media (max-width: 1100px) { .cat-grid-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .cat-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .cat-grid-4 { grid-template-columns: 1fr; } }

/* Grid hero 3 (1 grande + 3 petites à droite) */
.cat-grid-hero-3 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "hero a" "hero b" "hero c";
  gap: 8px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  min-height: 460px;
}
.cat-grid-hero-3 .bento-card:nth-child(1) { grid-area: hero; }
.cat-grid-hero-3 .bento-card:nth-child(2) { grid-area: a; }
.cat-grid-hero-3 .bento-card:nth-child(3) { grid-area: b; }
.cat-grid-hero-3 .bento-card:nth-child(4) { grid-area: c; }
@media (max-width: 720px) {
  .cat-grid-hero-3 { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "hero" "a" "b" "c"; min-height: auto; }
}

/* Magazine : 1 hero (gauche) + 4 mosaïque (droite) */
.cat-grid-magazine {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "hero a c" "hero b d";
  gap: 8px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
  min-height: 420px;
}
.cat-grid-magazine .bento-card:nth-child(1) { grid-area: hero; }
.cat-grid-magazine .bento-card:nth-child(2) { grid-area: a; }
.cat-grid-magazine .bento-card:nth-child(3) { grid-area: b; }
.cat-grid-magazine .bento-card:nth-child(4) { grid-area: c; }
.cat-grid-magazine .bento-card:nth-child(5) { grid-area: d; }
@media (max-width: 900px) {
  .cat-grid-magazine { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "hero hero" "a b" "c d"; }
}
@media (max-width: 600px) {
  .cat-grid-magazine { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "hero" "a" "b" "c" "d"; min-height: auto; }
}

/* Liste enrichie : image à gauche + titre + excerpt + meta */
.cat-list-rich {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 90%;
  margin: 0 auto;
  padding: 0;
}
.cat-list-rich .lr-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--teal);
  transition: transform .12s, box-shadow .12s;
}
.cat-list-rich .lr-item:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.cat-list-rich .lr-img { width: 100%; height: 140px; object-fit: cover; display: block; }
.cat-list-rich .lr-body { padding: 14px 18px 14px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-list-rich .lr-cat { font-size: 10px; font-weight: 800; letter-spacing:0; text-transform:none; color: var(--teal); }
.cat-list-rich .lr-title { font-size: 16px; font-weight: 800; line-height: 1.3; margin: 0; }
.cat-list-rich .lr-excerpt { font-size: 13px; line-height: 1.45; color: var(--muted); margin: 0; }
.cat-list-rich .lr-meta { font-size: 11px; color: var(--muted); margin-top: auto; }
@media (max-width: 600px) {
  .cat-list-rich .lr-item { grid-template-columns: 1fr; }
  .cat-list-rich .lr-img { height: 180px; }
  .cat-list-rich .lr-body { padding: 14px 18px; }
}

/* ── Mobile : pas de fondu sur les cartes (retour Félix 03/08) ───────────────
   Sur petit écran le dégradé teal est quasi invisible (sombre sur photo) alors
   que le vanilla mange le bas des photos → rendu incohérent entre sections.
   Bandeau de titre PLEIN partout : teal sur sections claires, vanilla sur
   sections sombres. Placé en fin de fichier pour gagner la cascade. */
@media(max-width:900px){
  .bento-overlay,
  .home-bento .bento-card:not(.bento-hero) .bento-overlay,
  .cat-bento .bento-card:not(.bento-hero) .bento-overlay{
    background:var(--teal);
  }
  .its-v2 .section--dark .bento-overlay{
    background:var(--vanilla);
  }
  .media-card-overlay{
    background:var(--vanilla);
  }
}

/* ── Cartes : photo AU-DESSUS du bandeau entre 681 et 900 px (21/09) ──────
   Sous 680 px, la carte empile photo puis bandeau de titre. Entre 681 et
   900 px (iPhone en paysage dans l'app, tablette en portrait), la carte
   gardait une hauteur fixe avec la photo en fond, et le bandeau, passé en
   teal PLEIN pour cette plage (règle du 03/08 ci-dessus), recouvrait 197 px
   sur 280 de la photo à la une : on n'en voyait qu'une bande en haut
   (remontée Félix, app en paysage). On étend donc l'empilement du mobile. */
@media(min-width:681px) and (max-width:900px){
  .bento-card{display:flex;flex-direction:column;min-height:auto!important;}
  .bento-card .bento-img{position:relative;inset:auto;height:200px;width:100%;}
  .bento-hero .bento-img{height:260px;}
  .bento-card .bento-overlay,
  .home-bento .bento-card:not(.bento-hero) .bento-overlay,
  .cat-bento .bento-card:not(.bento-hero) .bento-overlay{position:relative;padding:12px 16px 14px;}
  .bento-hero .bento-overlay{padding:14px 18px 16px;}
}