/* HypeTracker — vitrine. Design system : dark gaming/esport, responsive mobile-first.
   Tokens et patterns : voir design/DESIGN-SYSTEM.md + design/exemple.html. */

/* ===== Fonts auto-hébergées (RGPD/DE + LCP) — aucun appel fonts.googleapis.com/gstatic =====
   Chakra Petch : 3 graisses (400/600/700) x 2 styles (normal/italic) x 2 subsets, fichiers statiques distincts.
   Saira : police variable — un seul fichier par subset couvre toute la plage 400-700 (font-weight en intervalle). */
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-400-latin-2_yGQR-.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-400-latin-ext-khasLbU.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-600-latin-wMdAHqB.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-600-latin-ext-zM8nyOv.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-700-latin-bQR2myt.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/chakra-petch-normal-700-latin-ext-3RXYeHJ.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-400-latin-uycYgxw.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-400-latin-ext-fZhs--G.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-600-latin--3MqI4D.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-600-latin-ext-657kv1t.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-700-latin-EhXicUV.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Chakra Petch';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/chakra-petch-italic-700-latin-ext-bbukXmb.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/saira-normal-latin-jpIP6jY.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/saira-normal-latin-ext-75i1qnw.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* ---- Tokens HypeTracker (design/DESIGN-SYSTEM.md §2) ---- */
    --ht-bg:        #070B12;  /* Abyss — fond de page */
    --ht-surface:   #0E1621;  /* cartes, panneaux */
    --ht-surface-2: #121C29;  /* fond hover / 2e niveau d'élévation */
    --ht-border:    #1B2836;  /* bordures, séparateurs */
    --ht-blue:      #2E9BFF;  /* Volt Blue — liens, navigation, sélection, "HYPE" */
    --ht-green:     #00E871;  /* Hype Green — hausse, CTA, "TRACKER" */
    --ht-teal:      #16BCB4;  /* buzz — intermédiaire du dégradé */
    --ht-red:       #FF4D6A;  /* Drop Red — baisse uniquement */
    --ht-text:      #EDF5FE;  /* texte principal */
    --ht-text-2:    #C7D6E8;  /* texte secondaire */
    --ht-muted:     #7E93AB;  /* labels, meta, placeholders */
    --ht-gradient:  linear-gradient(135deg, #2E9BFF 0%, #00E871 100%);
    --ht-font-display: 'Chakra Petch', sans-serif;
    --ht-font-body: 'Saira', sans-serif;

    /* ---- Tokens structurels non colorés (conservés tels quels) ---- */
    --radius: 16px;
    --radius-sm: 10px;
    --maxw: 1160px;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ht-bg);
    color: var(--ht-text);
    font-family: var(--ht-font-body);
    line-height: 1.5;
    font-size: clamp(15px, 0.5vw + 14px, 17px);
    overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--ht-font-display); }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--ht-blue);
    outline-offset: 2px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.muted { color: var(--ht-muted); }
.num { font-variant-numeric: tabular-nums; }

/* ---- header / nav ---- */
.site-header {
    border-bottom: 1px solid var(--ht-border);
    background: rgba(7,11,18,.82);
    backdrop-filter: blur(8px);
    position: sticky; top: 0; z-index: 10;
}
.site-header__inner { display: flex; align-items: center; gap: 2rem; padding: .85rem 0; }
.brand, .lockup { display: flex; align-items: center; gap: .65rem; }
.wordmark { font-family: var(--ht-font-display); font-style: italic; font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.wordmark .hype { color: var(--ht-blue); }
.wordmark .tracker { color: var(--ht-green); }
.site-nav { display: flex; gap: 1.4rem; font-size: .88rem; }
.site-nav a { color: var(--ht-muted); font-family: var(--ht-font-display); font-weight: 600; }
.site-nav a:hover { color: var(--ht-text); }

/* ---- hero ---- */
.hero { padding: clamp(2rem, 6vw, 3.6rem) 0 1.6rem; }
.hero__title { font-family: var(--ht-font-display); font-style: italic; font-weight: 700; font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1.05; margin: 0 0 .5rem; color: var(--ht-text); }
.hero__pitch { color: var(--ht-muted); font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 56ch; margin: 0 0 1rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .9rem; color: var(--ht-muted); }
.hero__meta b { color: var(--ht-text); }

/* ---- bench strip ---- */
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: 1.4rem 0 .4rem; }
.bench__item { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .75rem .9rem; }
.bench__k { font-size: .78rem; color: var(--ht-muted); text-transform: uppercase; letter-spacing: .04em; }
.bench__v { font-size: 1.25rem; font-weight: 750; margin-top: .15rem; }

/* ---- ranking grid + cards ---- */
.section-title { font-family: var(--ht-font-display); font-weight: 600; font-size: 1.15rem; margin: 2rem 0 1rem; }
/* Marge titre -> graphe resserrée (retour recette 2026-07-10) : un `.section-title` en
   première position dans un bloc `.curve` n'a plus besoin de la marge de section générique
   (2rem au-dessus, déjà couverte par le padding du conteneur `.curve`) ni d'un aussi grand
   écart avant le graphe (1rem -> .6rem). Vaut pour toutes les courbes (vues cumulées, "New
   views per day", Taux de like, historique de rang). */
.curve .section-title { margin: 0 0 .6rem; }
.ranking { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; }
.card {
    position: relative; display: flex; flex-direction: column;
    background: var(--ht-surface); border: 1px solid var(--ht-border);
    border-radius: var(--radius); overflow: hidden;
    transition: border-color 150ms, background 150ms;
}
.card:hover { border-color: rgba(46,155,255,.4); background: var(--ht-surface-2); text-decoration: none; }
.card__thumb { aspect-ratio: 16/9; width: 100%; height: auto; object-fit: cover; background: var(--ht-surface-2); display: block; }
.card__rank {
    position: absolute; top: .6rem; left: .6rem; z-index: 2;
    background: rgba(7,11,18,.72); color: var(--ht-blue);
    font-family: var(--ht-font-display); font-style: italic; font-weight: 700; font-size: 1rem;
    border-radius: 999px; min-width: 2.1rem; height: 2.1rem; display: grid; place-items: center; padding: 0 .5rem;
}
.card__rank.is-top {
    background: none; min-width: 0; height: auto; padding: 0; font-size: 1.35rem;
    background-image: var(--ht-gradient);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
}
.card__body { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
/* Cartes sans vignette (ex. Tendance) : le rang absolu (.card__rank) survole le haut
   de la carte au lieu de la vignette — on réserve la place verticale dans le corps
   pour que le titre ne passe plus dessous. La HOME (avec .card__thumb) est inchangée. */
.card--thumbless .card__body { padding-top: 3rem; }
.card__title-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card__title { font-family: var(--ht-font-display); font-weight: 600; font-size: 1.05rem; }
.card__platforms { font-size: .82rem; color: var(--ht-muted); }
/* Ligne total de vues (retour recette 2026-07-10, v2) : total en gros à gauche, jauge Hype
   Level à droite (non compacte -> cellules un peu plus grandes que l'ancien usage compact de la
   carte ; label "Hype Level : <classe>" gardé, discret via `.engagement-gauge__label`). Les
   pastilles trailer/buzz colorées (`.card__scores`, cf. plus bas) sont restaurées SOUS la
   sparkline/barre, cette ligne ne porte donc plus que total + jauge. */
.card__total-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.card__total { font-size: 1.5rem; font-weight: 700; }
.card__total small { font-size: .8rem; font-weight: 500; color: var(--ht-muted); }
.card__spark { height: 40px; }

/* trailer/gameplay split bar — variante GRANDE par défaut (fiche jeu uniquement depuis la
   refonte 2026-07-10 : plus de place, libellés lisibles, sans contrainte de hauteur de carte). */
.split { display: flex; height: 26px; border-radius: 999px; overflow: hidden; background: var(--ht-surface-2); cursor: default; }
.split__trailer, .split__buzz { display: flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.split__trailer { background: var(--ht-blue); }
.split__gameplay { background: var(--ht-teal); }
/* Libellé dans le segment : masqué (via .split__seg--compact, posé côté Twig quand le segment
   fait < 15% de large) pour ne jamais déborder/rogner sur un segment trop étroit. */
.split__label { padding: 0 .5rem; font-size: .72rem; font-weight: 650; line-height: 1; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.split__seg--compact .split__label { display: none; }
/* Variante FINE (cartes) : hauteur réduite, jamais de libellé (rendu par Twig via `thin: true`
   dans _split_bar.html.twig) — seule l'infobulle porte les pourcentages. */
.split--thin { height: 8px; }
.split-legend { display: flex; gap: .9rem; font-size: .76rem; color: var(--ht-muted); }
/* Conteneur fiche jeu (retour recette 2026-07-10) : marge propre au-dessus/en-dessous de la
   barre GRANDE, pour ne pas la coller au graphe "New views per day" au-dessus. */
.split-wrap { margin: 1.6rem 0 1.8rem; }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
.dot--trailer { background: var(--ht-blue); }
.dot--gameplay { background: var(--ht-teal); }

/* curé / sauvage ratio */
.mix { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--ht-surface-2); }
.mix__cure { background: var(--ht-blue); }
.mix__sauvage { background: var(--ht-teal); }
.mix-legend { font-size: .76rem; color: var(--ht-muted); }

/* ---- chart / sparkline ---- */
.chart { width: 100%; height: 100%; display: block; }
.chart__line { fill: none; stroke: var(--ht-blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.chart__area { fill: rgba(46,155,255,.14); stroke: none; }
.chart--empty { display: grid; place-items: center; height: 100%; color: var(--ht-muted); font-size: .8rem; border: 1px dashed var(--ht-border); border-radius: var(--radius-sm); }

/* ---- badges ---- */
.badge { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--ht-border); white-space: nowrap; }
.badge--officiel { color: var(--ht-bg); background: var(--ht-blue); border-color: transparent; }
.badge--cure { color: var(--ht-blue); border-color: var(--ht-blue); }
.badge--sauvage { color: var(--ht-teal); border-color: var(--ht-teal); }
.badge--reaction { color: var(--ht-muted); }
.badge--ok { color: var(--ht-green); border-color: var(--ht-green); }
.badge--warn { color: #FFB020; border-color: #FFB020; }
.badge--danger { color: var(--ht-red); border-color: var(--ht-red); } /* R4 — dépublication humaine collante */

/* ---- admin reactions (R2.4) ---- */
.reactions-section { margin: 1.6rem 0; }
.reactions-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.reactions-inline-form { display: flex; gap: .4rem; align-items: flex-start; }
.reactions-inline-form input[type="text"], .reactions-inline-form textarea { flex: 1; min-width: 12rem; background: var(--ht-bg-alt, transparent); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); color: inherit; padding: .3rem .5rem; font: inherit; }
.reactions-week-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.reactions-quote-inline { margin-top: .25rem; font-size: .85rem; color: var(--ht-muted); }
.reactions-camps { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.reactions-camp { flex: 1; min-width: 16rem; }

/* ---- work detail ---- */
.work-header { padding: clamp(1.6rem, 5vw, 2.6rem) 0 1rem; }
.work-header h1 { font-family: var(--ht-font-display); font-style: italic; font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.6rem); margin: .2rem 0 .4rem; }
.stats { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: .8rem; }
.stat__k { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ht-muted); }
.stat__v { font-size: 1.35rem; font-weight: 780; }

/* Bannière de fiche jeu (retour recette #4) : décorative, probable LCP -> pas de aspect-ratio
   contraignant la hauteur totale (bornée par la div wrapper), le <img> garde 16/9 pour éviter
   tout CLS avant chargement (width/height + height:auto + aspect-ratio, cf. leçon vignettes). */
.work-banner { position: relative; margin: .8rem 0 1.2rem; max-height: clamp(240px, 22vw, 320px); overflow: hidden; border-radius: var(--radius); background: var(--ht-surface); }
.work-banner__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.work-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,18,0) 55%, var(--ht-bg) 100%); pointer-events: none; }
@media (max-width: 700px) { .work-banner { max-height: clamp(140px, 34vw, 200px); } }
.work-banner__credit { margin: -.9rem 0 1.2rem; font-size: .72rem; color: var(--ht-muted); text-align: right; }
.work-banner__credit a { color: inherit; }

/* Fiche (éditeur/développeur/genre/sortie) — retours recette #2 : distincte de .stats/.stat
   (tuiles de score) pour ne pas fausser les comptages qui ciblent .stats .stat. */
.work-fiche { margin-top: .6rem; }
.work-fiche__grid { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.work-fiche__k { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ht-muted); }
.work-fiche__v { font-size: .95rem; font-weight: 600; }

/* Détail des dates de sortie par plateforme (item 6 recette) : replié par défaut, sobre,
   cohérent avec le thème sombre. La date PRINCIPALE (`.work-fiche__v`) reste la source unique
   affichée en tête (release_label, même helper/format que la carte d'accueil) ; ce <details>
   n'apporte qu'un COMPLÉMENT (une ligne par plateforme), jamais une valeur contradictoire. */
.work-fiche__item--release { flex-basis: 100%; }
.release-dates { margin-top: .35rem; font-size: .82rem; }
.release-dates > summary { cursor: pointer; color: var(--ht-blue); font-weight: 600; list-style: none; }
.release-dates > summary::-webkit-details-marker { display: none; }
.release-dates > summary::before { content: '▸'; display: inline-block; margin-right: .35rem; transition: transform .15s ease; }
.release-dates[open] > summary::before { transform: rotate(90deg); }
.release-dates__list { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; max-width: 28rem; }
.release-dates__list li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .6rem; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); }
.release-dates__platform { color: var(--ht-text-2); }
.release-dates__date { font-weight: 600; }
.curve { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.curve__frame { height: clamp(160px, 26vw, 240px); }
.curve__axis { display: flex; justify-content: space-between; font-size: .76rem; color: var(--ht-muted); margin-top: .4rem; }
.curve-axis { position: relative; height: 1.3rem; margin-top: .3rem; }
.curve-axis__tick { position: absolute; top: 0; transform: translateX(-50%); font-size: .68rem; color: var(--ht-muted); white-space: nowrap; }
.curve-axis__tick::before { content: ''; position: absolute; top: -.35rem; left: 50%; width: 1px; height: .3rem; background: var(--ht-border); }

/* Signaux v2 : bloc engagement. Refonte compacité 2026-07-10 : la jauge + les commentaires 7j
   sont montés dans `.stats` (fiche) ; `.engagement` ne reste que le wrapper compact de la carte
   (jauge seule, cf. `_engagement.html.twig` + `_adhesion_gauge.html.twig`) — pas de marge propre
   pour ne pas allonger la carte au-delà du `gap` déjà géré par `.card__body`. */
.engagement--compact { margin: 0; }
.curve--engagement { margin-top: .8rem; }
/* Espace entre deux graphes consécutifs sur la fiche (retour recette : « trop collés »). */
.curve + .curve { margin-top: 1.5rem; }

/* Jauge « niveau d'adhésion » (remplace la pastille discret/aime/adore) : 3 cellules, allumées
   selon la classe (faible=0, moyenne=1, importante=2, folle=3). Les cellules éteintes restent
   visibles (contour) pour que "faible" se lise "bas", pas "donnée manquante". */
.engagement-gauge { display: inline-flex; align-items: center; gap: .4rem; cursor: default; }
.engagement-gauge__label { font-size: .8rem; color: var(--ht-text-2); }
.engagement-gauge__cells { display: inline-flex; gap: .2rem; }
.engagement-gauge__cell {
    width: .6rem;
    height: .6rem;
    border-radius: 2px;
    border: 1px solid var(--ht-muted);
    background: transparent;
}
.engagement-gauge__cell--on { background: var(--ht-blue); border-color: var(--ht-blue); }
.engagement-gauge--folle .engagement-gauge__cell--on { background: var(--ht-green); border-color: var(--ht-green); }
/* Variante compacte (carte + `.stat__v` de la fiche, cf. _adhesion_gauge.html.twig) : cellules
   et espacement légèrement réduits pour tenir dans un contexte restreint. */
.engagement-gauge--compact { gap: .3rem; }
.engagement-gauge--compact .engagement-gauge__cell { width: .5rem; height: .5rem; }
/* Jauge montée directement dans `.stat__v` de la fiche jeu (retour recette 2026-07-10, showLabel:
   false côté Twig) : le libellé visible n'est plus que le nom de classe ("Wild"), affiché à la
   MÊME grosseur/graisse que les autres valeurs `.stat__v num` plutôt que la taille discrète par
   défaut du `.engagement-gauge__label` (utilisée telle quelle sur la carte). */
.stat__v .engagement-gauge__label { font-size: inherit; font-weight: inherit; color: inherit; }

/* Historique du rang (App\View\RankChart) : axe #1..#N à gauche, courbe à droite. */
.rank-history { margin-top: 1.4rem; }
.rank-chart { position: relative; display: block; }
/* Étiquettes #1/#N en surimpression (et non en colonne) : le graphe garde la MÊME largeur
   que la courbe de vues au-dessus (retour recette 2026-07-10). */
.rank-chart__scale { position: absolute; left: .5rem; top: .25rem; bottom: .25rem; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; font-size: .74rem; font-weight: 700; color: var(--ht-muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.rank-chart__frame { height: clamp(110px, 15vw, 150px); }
.rank-chart__frame .chart, .rank-chart__frame .chart-wrap { width: 100%; height: 100%; }
.rank-chart__frame .chart-wrap .chart { display: block; width: 100%; height: 100%; }
.rank-chart__svg .chart__line { stroke: var(--ht-blue); }

.cols { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.6rem; }
@media (min-width: 820px) { .cols--2 { grid-template-columns: 1fr 1fr; } }

.videos { display: flex; flex-direction: column; gap: .6rem; }
.video { display: grid; grid-template-columns: 104px 1fr auto; gap: .8rem; align-items: center;
    background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .5rem; }
.video:hover { border-color: rgba(46,155,255,.4); text-decoration: none; }
.video__thumb { width: 104px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: var(--ht-surface-2); }
.video__title { font-weight: 650; font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video__sub { font-size: .78rem; color: var(--ht-muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .2rem; }
.video__views { font-weight: 750; text-align: right; white-space: nowrap; }
.video__views small { display: block; font-weight: 500; font-size: .72rem; color: var(--ht-muted); }

.fakes-note { margin-top: .9rem; font-size: .86rem; color: var(--ht-red); }

.sourcemix { display: flex; flex-direction: column; gap: .5rem; }
.sourcemix__row { display: grid; grid-template-columns: 120px 1fr auto; gap: .6rem; align-items: center; font-size: .85rem; }
.sourcemix__track { height: 8px; border-radius: 999px; background: var(--ht-surface-2); overflow: hidden; }
.sourcemix__fill { height: 100%; background: var(--ht-blue); }
.sourcemix__fill--sauvage { background: var(--ht-teal); }

.back-link { display: inline-block; margin: 1.4rem 0 0; color: var(--ht-muted); font-size: .9rem; }

.site-footer { border-top: 1px solid var(--ht-border); margin-top: 3rem; padding: 1.6rem 0; color: var(--ht-muted); font-size: .85rem; }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; }
.site-footer__about { margin: 0; }
.site-footer__tagline { margin: 0; }
.site-footer__credit { margin: .3rem 0 0; font-size: .8rem; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-size: .82rem; }
.site-footer__nav a { color: var(--ht-muted); text-decoration: none; }
.site-footer__nav a:hover { color: var(--ht-text); text-decoration: underline; }
/* Bloc légal : même rang visuel que la nav de contenu, mais placé en fin de ligne (ordre de
   lecture) et forcé sur sa propre ligne en desktop pour ne pas concurrencer la nav éditoriale. */
.site-footer__nav--legal { flex-basis: 100%; justify-content: flex-end; font-size: .78rem; opacity: .85; }
.site-footer__publisher { flex-basis: 100%; margin: .2rem 0 0; text-align: right; font-size: .75rem; }

@media (max-width: 520px) {
    .site-footer__inner { flex-direction: column; }
    .site-footer__nav--legal { justify-content: flex-start; }
    .site-footer__publisher { text-align: left; }
}

@media (max-width: 520px) {
    .video { grid-template-columns: 80px 1fr; }
    .video__views { grid-column: 2; text-align: left; }
    .video__thumb { width: 80px; }
}

/* ============================================================================
   ADMIN (back-office propriétaire) — scopé .admin, réutilise les tokens vitrine.
   Mobile-first, dark, zones de tap ≥44px. CSS du swipe (ADM2) ajouté plus bas.
   ============================================================================ */
.admin { color: var(--ht-text); }
.admin-header { position: sticky; top: 0; z-index: 10; background: rgba(14,17,22,.85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ht-border); }
.admin-header__inner { max-width: var(--maxw); margin: 0 auto; padding: .7rem clamp(12px, 4vw, 24px); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.admin-brand { font-size: 1.05rem; font-weight: 700; color: var(--ht-text); text-decoration: none; }
.admin-brand b { color: var(--ht-blue); }
.admin-nav { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.admin-nav a { color: var(--ht-muted); text-decoration: none; padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.admin-nav a:hover { color: var(--ht-text); background: var(--ht-surface); }
.admin-nav a.is-active { color: var(--ht-text); background: var(--ht-surface-2); }
.admin-nav__logout { color: var(--ht-teal) !important; }
.admin-main { max-width: var(--maxw); margin: 0 auto; padding: clamp(16px, 4vw, 28px); }
.admin-title { font-size: 1.3rem; font-weight: 750; margin: 0 0 .6rem; }

.admin-btn { appearance: none; border: 1px solid var(--ht-border); background: var(--ht-surface); color: var(--ht-text); font: inherit; font-weight: 650; padding: .7rem 1rem; border-radius: var(--radius-sm); cursor: pointer; min-height: 44px; }
.admin-btn:hover { background: var(--ht-surface-2); }
.admin-btn--primary { background: var(--ht-blue); color: var(--ht-bg); border-color: transparent; }
.admin-btn--primary:hover { filter: brightness(1.08); }
.admin-btn--danger { color: var(--ht-red); border-color: var(--ht-red); background: rgba(255,77,106,.08); }
.admin-btn--danger:hover { background: rgba(255,77,106,.18); }
.work-card__actions, .work-detail-head__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.admin-field { display: flex; flex-direction: column; gap: .35rem; }
.admin-field > span { font-size: .82rem; color: var(--ht-muted); font-weight: 600; }
.admin-field input, .admin-select { background: var(--ht-bg); border: 1px solid var(--ht-border); color: var(--ht-text); border-radius: var(--radius-sm); padding: .7rem .8rem; font: inherit; min-height: 44px; }
.admin-field input:focus, .admin-select:focus { outline: 2px solid var(--ht-blue); outline-offset: 1px; }

.admin-login { min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem; }
.admin-login__card { width: 100%; max-width: 360px; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.admin-login__brand { font-size: 1.2rem; font-weight: 750; margin: 0; text-align: center; }
.admin-login__brand b { color: var(--ht-blue); }
.admin-login__error { background: rgba(255,77,106,.12); border: 1px solid var(--ht-red); color: var(--ht-red); padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .88rem; margin: 0; }

/* ---- ADM2 : sélecteur de revue ---- */
.admin-works { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 1.2rem; }
.admin-work-card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); text-decoration: none; color: var(--ht-text); }
.admin-work-card:hover { border-color: var(--ht-blue); }
.admin-work-card__name { font-weight: 700; }
.admin-work-card__filters { display: flex; gap: .35rem; flex-wrap: wrap; }
.admin-chip { font-size: .72rem; padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--ht-border); color: var(--ht-muted); text-decoration: none; }
.admin-chip--on { background: var(--ht-blue); color: var(--ht-bg); border-color: transparent; font-weight: 700; }

/* ---- ADM2 : revue en LISTE scrollable + swipe ---- */
.review { max-width: 620px; margin: 0 auto; }
.review-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.review-back { color: var(--ht-muted); text-decoration: none; font-size: .9rem; }
.review-title { font-weight: 750; flex: 1; }
.review-progress { color: var(--ht-muted); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.review-filters { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.review-filters a { text-decoration: none; }
.review-hint { font-size: .82rem; margin: 0 0 1rem; }
.review-hint kbd { background: var(--ht-surface-2); border: 1px solid var(--ht-border); border-radius: 4px; padding: 0 .3rem; font-size: .78rem; }

.review-list { display: flex; flex-direction: column; gap: .55rem; }
.review-tag { font-size: .72rem; padding: .1rem .4rem; border-radius: 999px; border: 1px solid var(--ht-border); }
.review-tag--cure { color: var(--ht-blue); border-color: var(--ht-blue); }
.review-tag--sauvage { color: var(--ht-teal); border-color: var(--ht-teal); }

.review-row { position: relative; display: grid; grid-template-columns: 104px 1fr; grid-template-areas: 'thumb body' 'actions actions'; column-gap: .7rem; row-gap: .45rem; align-items: start; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: .55rem; touch-action: pan-y; user-select: none; }
.review-row.is-excluded { opacity: .58; }
.review-row.drag-exclude { border-color: var(--ht-red); box-shadow: -6px 0 0 -2px var(--ht-red); }
.review-row.drag-include { border-color: var(--ht-blue); box-shadow: 6px 0 0 -2px var(--ht-blue); }
@keyframes flashIn { from { background: rgba(46,155,255,.28); } to { background: var(--ht-surface); } }
@keyframes flashOut { from { background: rgba(255,77,106,.28); } to { background: var(--ht-surface); } }
.review-row.flash-in { animation: flashIn .5s ease-out; }
.review-row.flash-out { animation: flashOut .5s ease-out; }
.review-row__thumb { position: relative; display: block; width: 104px; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: var(--ht-surface-2); grid-area: thumb; }
.review-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-row__anchor { position: absolute; top: .2rem; left: .2rem; background: var(--ht-blue); color: var(--ht-bg); font-size: .7rem; padding: 0 .25rem; border-radius: 999px; }
.review-row__body { min-width: 0; display: flex; flex-direction: column; gap: .25rem; grid-area: body; }
.review-row__title { font-weight: 650; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.review-row__sub { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; font-size: .76rem; color: var(--ht-muted); }
.review-row__state { font-size: .78rem; font-weight: 650; }
/* Actions en LARGEUR (icônes côte à côte) sous le corps de carte, au lieu d'un empilement
   vertical — c'est ce qui imposait une carte haute (5 x 40px + gaps ~= 219px de colonne). */
.review-row__actions { grid-area: actions; display: flex; flex-direction: row; justify-content: flex-end; gap: .4rem; }
.review-mini { appearance: none; background: var(--ht-surface-2); border: 1px solid var(--ht-border); color: var(--ht-text); font-size: .9rem; line-height: 1; width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.review-mini:hover { background: var(--ht-border); }
.review-mini--exclude:hover { border-color: var(--ht-red); }
.review-mini--official:hover { border-color: var(--ht-blue); }
.review-mini--media:hover { border-color: var(--ht-teal); }

@media (max-width: 520px) {
    .review-row { grid-template-columns: 88px 1fr; }
    .review-row__thumb { width: 88px; }
    .review-row__actions { justify-content: space-between; }
    .review-mini { flex: 1; height: 44px; }
}

.review-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--ht-surface-2); border: 1px solid var(--ht-border); color: var(--ht-text); padding: .7rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: .88rem; z-index: 50; }

/* ---- ADM-doc : guide /admin/guide ---- */
.guide-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.6rem; }
.guide-toc a { text-decoration: none; color: var(--ht-muted); font-size: .85rem; padding: .45rem .7rem; border: 1px solid var(--ht-border); border-radius: 999px; }
.guide-toc a:hover { color: var(--ht-text); background: var(--ht-surface); }
.guide-section { margin: 2rem 0; scroll-margin-top: 5rem; }
.guide-h3 { font-size: .95rem; font-weight: 700; margin: 1.4rem 0 .6rem; }
.guide-cards { display: grid; gap: .7rem; margin: 1rem 0; }
.guide-card { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem; }
.guide-card--in { border-left: 4px solid var(--ht-blue); }
.guide-card p { margin: .5rem 0 0; font-size: .9rem; }
.guide-badge { font-weight: 750; }
.guide-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: .5rem 0; }
.guide-table th, .guide-table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--ht-border); vertical-align: top; }
.guide-table th { color: var(--ht-muted); font-weight: 650; }
.guide-table code { background: var(--ht-surface-2); padding: .1rem .35rem; border-radius: 4px; font-size: .82rem; white-space: nowrap; }
.guide-list { margin: .6rem 0; padding-left: 1.2rem; }
.guide-list li { margin: .4rem 0; font-size: .9rem; }
.guide-note { font-size: .82rem; margin-top: 1rem; }
.guide-dl { margin: 1rem 0; }
.guide-dl dt { font-weight: 700; margin-top: 1rem; }
.guide-dl dd { margin: .3rem 0 0; padding-left: 0; font-size: .9rem; color: var(--ht-text); }
.guide-steps { margin: 1rem 0; padding-left: 1.3rem; }
.guide-steps li { margin: .6rem 0; font-size: .9rem; }
.guide-section code { background: var(--ht-surface-2); padding: .1rem .35rem; border-radius: 4px; font-size: .84rem; }
.guide-section kbd { background: var(--ht-surface-2); border: 1px solid var(--ht-border); border-radius: 4px; padding: 0 .3rem; font-size: .82rem; }

/* ---- ADM3 : /admin/works ---- */
.works { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.2rem; }
.works-search { margin: 0 0 1rem; }
.works-search input { width: 100%; max-width: 420px; }
.work-card { display: flex; gap: .9rem; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: .7rem .8rem; }
.work-card__thumb { flex: 0 0 128px; width: 128px; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); background: var(--ht-surface-2); display: block; align-self: flex-start; }
.work-card__thumb--empty { border: 1px dashed var(--ht-border); }
.work-card__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.work-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.work-card__name { font-size: 1.05rem; font-weight: 750; margin: 0; }
.work-card__meta { margin: .2rem 0 0; font-size: .8rem; }
.work-card__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.work-card__views { font-size: .82rem; color: var(--ht-muted); white-space: nowrap; }
.work-card__views .num { font-size: 1.05rem; font-weight: 750; color: var(--ht-text); }
.work-card__delta { color: var(--ht-teal); font-weight: 700; margin-left: .4rem; }
@media (max-width: 560px) { .work-card { flex-direction: column; } .work-card__thumb { width: 100%; flex-basis: auto; } }
.work-stats { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.work-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .35rem .6rem; min-width: 62px; background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--ht-text); }
.work-stat:hover { border-color: var(--ht-blue); }
.work-stat__v { font-size: 1.05rem; font-weight: 750; }
.work-stat__k { font-size: .72rem; color: var(--ht-muted); }
.work-stat--warn .work-stat__v { color: var(--ht-teal); }
.work-anchors__title { font-size: .92rem; font-weight: 700; margin: .6rem 0 .5rem; }
.work-anchors__empty { font-size: .85rem; margin: 0; }
.anchor-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.anchor-row { display: grid; grid-template-columns: 68px 1fr auto; gap: .6rem; align-items: center; background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .4rem; }
.anchor-row.is-anchor { border-color: var(--ht-blue); }
.anchor-row__thumb { display: block; width: 68px; aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--ht-surface-2); }
.anchor-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anchor-row__body { min-width: 0; }
.anchor-row__title { font-size: .84rem; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.anchor-row__sub { font-size: .74rem; margin-top: .15rem; }
.anchor-row__flag { color: var(--ht-blue); font-weight: 650; }

@media (max-width: 520px) {
    .work-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- ADM4 : dashboard monitoring ---- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin: 1.2rem 0; }
.dash-card { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.dash-card__k { font-size: .8rem; color: var(--ht-muted); font-weight: 600; }
.dash-card__v { font-size: 1.7rem; font-weight: 750; margin: .3rem 0 .2rem; }
.dash-card__sub { font-size: .78rem; }
.dash-warn { color: var(--ht-teal); }
.dash-section { margin-top: 1.8rem; }
.dash-cov { overflow-x: auto; }
.dash-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 420px; }
.dash-table th, .dash-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--ht-border); }
.dash-table th.num, .dash-table td.num { text-align: right; }
.dash-table th { color: var(--ht-muted); font-weight: 650; }
.dash-table a { color: var(--ht-text); text-decoration: none; }
.dash-table a:hover { color: var(--ht-blue); }

/* ---- ADM5 : pilotage pipeline ---- */
.pipe-form { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem; margin: 1.2rem 0; }
.pipe-works { margin-bottom: .9rem; max-width: 360px; }
.pipe-commands { display: flex; flex-wrap: wrap; gap: .5rem; }
.pipe-cmd { flex: 1 1 auto; min-width: 46%; }
.pipe-cmd--wild { border-color: var(--ht-teal); }
.pipe-cmd:disabled { opacity: .5; cursor: not-allowed; }
.pipe-live { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem; margin: 1rem 0; }
.pipe-live__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.pipe-live__label { font-weight: 700; }
.pipe-log { background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .7rem; max-height: 300px; overflow: auto; font-size: .8rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; margin: 0; }
.pipe-progress { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.pipe-progress__track { flex: 1 1 auto; height: 8px; background: var(--ht-bg); border: 1px solid var(--ht-border); border-radius: 999px; overflow: hidden; }
.pipe-progress__bar { height: 100%; width: 0; background: var(--ht-blue); border-radius: 999px; transition: width .4s ease; }
.pipe-progress__pct { font-weight: 700; font-size: .82rem; white-space: nowrap; }
.pipe-progress__eta { font-size: .8rem; white-space: nowrap; }
.pipe-heartbeat { display: flex; align-items: center; gap: .6rem; font-size: .78rem; margin-bottom: .6rem; }
.pipe-stuck { color: var(--ht-red); font-weight: 700; }
.pipe-section { margin-top: 1.8rem; }
.pipe-runs { overflow-x: auto; }
.pipe-badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--ht-border); color: var(--ht-muted); }
.pipe-badge--running { color: var(--ht-blue); border-color: var(--ht-blue); }
.pipe-badge--done { color: var(--ht-blue); border-color: var(--ht-blue); }
.pipe-badge--failed { color: var(--ht-red); border-color: var(--ht-red); }

/* ---- ADM6 : registre de chaînes ---- */
.chan-form { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem; margin: 1.2rem 0; }
.chan-form .admin-field { flex: 1 1 260px; }
.chan-cat { flex: 0 0 auto; }
.chan-result { margin: 1rem 0; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--ht-border); font-size: .9rem; line-height: 1.5; }
.chan-result--ok { border-color: var(--ht-blue); background: rgba(46,155,255,.1); }
.chan-result--warn { border-color: var(--ht-teal); background: rgba(22,188,180,.1); }
.chan-result--info { color: var(--ht-muted); }
.chan-result code { background: var(--ht-surface-2); padding: 0 .3rem; border-radius: 4px; font-size: .82rem; }
.chan-section { margin-top: 1.8rem; }
.chan-list { overflow-x: auto; }
.chan-list code { font-size: .78rem; color: var(--ht-muted); }

/* ---- Mod2 : actions chaîne (voir / supprimer) ---- */
.chan-actions { display: flex; gap: .4rem; }
.chan-actions .review-mini { width: 36px; height: 36px; text-decoration: none; }

/* ---- Mod3 : panneau d'explication pipeline ---- */
.pipe-help { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0 1.4rem; font-size: .88rem; }
.pipe-help > summary { cursor: pointer; font-weight: 700; color: var(--ht-blue); }
.pipe-help p { margin: .6rem 0; line-height: 1.5; }
.pipe-help__steps { margin: .6rem 0; padding-left: 1.3rem; }
.pipe-help__steps li { margin: .45rem 0; line-height: 1.45; }

/* ---- Mod4 : works liste/détail/création ---- */
.works-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.work-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin: .4rem 0 1rem; }
.work-form { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem; }
.work-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.work-form__actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.work-form__msg { font-size: .88rem; color: var(--ht-muted); }
.work-form__calendar { margin-top: 1.2rem; }
.work-form__editorial { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin-top: .8rem; }
.work-form__editorial textarea { background: var(--ht-bg); border: 1px solid var(--ht-border); color: var(--ht-text); border-radius: var(--radius-sm); padding: .7rem .8rem; font: inherit; resize: vertical; }
.work-videos { margin-top: 2rem; }
.work-video-add { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .8rem 0 1rem; }
.work-video-add input { flex: 1 1 280px; background: var(--ht-bg); border: 1px solid var(--ht-border); color: var(--ht-text); border-radius: var(--radius-sm); padding: .7rem .8rem; font: inherit; min-height: 44px; }
.work-videos__table { overflow-x: auto; }

/* ---- Mod5 : config scrap ---- */
.config-form { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1.2rem; margin: 1rem 0 1.4rem; }
.config-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.config-form input, .config-form textarea { background: var(--ht-bg); border: 1px solid var(--ht-border); color: var(--ht-text); border-radius: var(--radius-sm); padding: .7rem .8rem; font: inherit; }
.config-form input { min-height: 44px; }
.config-cookies { margin-top: 1rem; }
.config-cookies textarea { font-family: ui-monospace, monospace; font-size: .82rem; resize: vertical; }
.config-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; }
.config-cron { margin-top: 1.5rem; }

/* ---- Modèle deux scores : tags trailer/buzz + courbes superposées ----
   `.card__scores` (pastilles colorées trailer/buzz de la carte) restaurée sous la sparkline/barre
   fine (retour recette 2026-07-10, v2 : le proprio regrettait leur suppression). `.score-tag`
   reste aussi utilisée par la légende de la courbe "New views per day" (_daily_views_chart.html.twig). */
.card__scores { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 0; }
.score-tag { font-size: .72rem; font-weight: 650; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--ht-border); }
.score-tag--trailer { color: var(--ht-blue); border-color: var(--ht-blue); }
.score-tag--buzz { color: var(--ht-teal); border-color: var(--ht-teal); }
.split__buzz { background: var(--ht-teal); }
.curve__legend { display: flex; gap: .5rem; margin-bottom: .4rem; }
.curve__frame--overlay { position: relative; }
.curve__frame--overlay .chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart--trailer .chart__line { stroke: var(--ht-blue); }
.chart--trailer .chart__area { fill: color-mix(in srgb, var(--ht-blue) 18%, transparent); }
.chart--buzz .chart__line { stroke: var(--ht-teal); }
.chart--buzz .chart__area { fill: color-mix(in srgb, var(--ht-teal) 14%, transparent); }

/* ---- Phase 3 : tags source + état actif/inactif ultra-visible (revue) ---- */
.src-tag { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; border: 1px solid var(--ht-border); }
.src-tag--officiel { color: var(--ht-blue); border-color: var(--ht-blue); }
.src-tag--cure { color: var(--ht-blue); border-color: var(--ht-blue); }
.src-tag--sauvage { color: var(--ht-teal); border-color: var(--ht-teal); }

.review-row { position: relative; overflow: hidden; }
.review-row__flag { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--ht-border); }
.review-row.is-active { opacity: 1; }
.review-row.is-active .review-row__flag { background: var(--ht-blue); }
.review-row.is-excluded { opacity: .62; }
.review-row.is-excluded .review-row__flag { background: var(--ht-red); }
.review-row.is-excluded .review-row__title { text-decoration: line-through; text-decoration-color: var(--ht-red); }
.review-row__state { font-weight: 750; }
.review-row.is-active .review-row__state { color: var(--ht-blue); }
.review-row.is-excluded .review-row__state { color: var(--ht-red); }
.review-row__thumb { margin-left: .3rem; }

/* ---- Phase 3 : tableaux triables ---- */
.dash-table th[role="button"] { user-select: none; }
.dash-table th[data-sort-dir="asc"]::after { content: ' ▲'; color: var(--ht-blue); }
.dash-table th[data-sort-dir="desc"]::after { content: ' ▼'; color: var(--ht-blue); }

/* ---- Phase 3 : boutons pipeline avec sous-titre ---- */
.pipe-cmd { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; }
.pipe-cmd__name { font-weight: 750; }
.pipe-cmd__desc { font-size: .74rem; color: var(--ht-muted); font-weight: 500; }

/* ---- Config : suffixe d'unité ---- */
.config-unit { display: flex; align-items: center; gap: .4rem; }
.config-unit input { flex: 1; }
.config-unit__suffix { color: var(--ht-muted); font-weight: 700; }

/* --- Refonte publique : logo + sélecteur de langue --- */
.brand__logo { height: 34px; width: 34px; display: block; }
.lang-switch { display: flex; gap: .25rem; margin-left: auto; font-size: .78rem; }
.lang-switch__item { color: var(--ht-muted); font-family: var(--ht-font-display); font-weight: 600; padding: .15rem .35rem; border-radius: var(--radius-sm); }
.lang-switch__item:hover { color: var(--ht-text); background: var(--ht-surface-2); }
.lang-switch__item.is-active { color: var(--ht-bg); background: var(--ht-blue); font-weight: 700; }

/* --- Top jeux : toggle + tableau --- */
/* L'attribut HTML `hidden` (display:none de la feuille UA) est écrasé par tout
   `display` en CSS auteur : sans cette règle, .ranking { display:grid } garde les
   cartes visibles quand on bascule sur le tableau (bouton « en apparence » mort,
   surtout en mobile où le tableau est renvoyé tout en bas). Deux sélecteurs
   d'attribut = spécificité (0,2,0) > .ranking (0,1,0), donc le masquage gagne. */
[data-view-panel][hidden] { display: none; }
/* Même piège pour la recherche : une carte masquée par le filtre (.card { display:flex })
   ignore [hidden]. Le sélecteur d'attribut du target (0,2,0) > .card (0,1,0) rétablit le
   masquage — sinon le filtre « n'agit que sur le tableau », pas sur les vignettes. */
[data-ranking-filter-target="item"][hidden] { display: none; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.view-toggle { display: inline-flex; border: 1px solid var(--ht-border); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle__btn { background: var(--ht-surface); color: var(--ht-muted); font-family: var(--ht-font-display); font-weight: 600; border: 0; padding: .5rem .9rem; font-size: .85rem; cursor: pointer; }
.view-toggle__btn:hover { color: var(--ht-text); }
.view-toggle__btn.is-active { background: var(--ht-blue); color: var(--ht-bg); font-weight: 700; }
.games-table-wrap { overflow-x: auto; }
.games-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.games-table th, .games-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--ht-border); text-align: left; }
.games-table th { font-family: var(--ht-font-display); font-weight: 600; color: var(--ht-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.games-table th.num, .games-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.games-table td.num { font-weight: 600; }
.games-table tbody tr { cursor: pointer; }
.games-table tbody tr:hover { background: var(--ht-surface-2); }
.games-table th[data-sort] { cursor: pointer; user-select: none; }
.games-table th[data-sort]:hover { color: var(--ht-text); }
.games-table th[aria-sort="ascending"]::after { content: ' \25B2'; }
.games-table th[aria-sort="descending"]::after { content: ' \25BC'; }

/* --- Classement : recherche client (ranking-filter_controller) --- */
.ranking-search { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; }
.ranking-search input[type="search"] { flex: 1 1 320px; max-width: 420px; background: var(--ht-bg); border: 1px solid var(--ht-border); color: var(--ht-text); border-radius: var(--radius-sm); padding: .6rem .8rem; font: inherit; min-height: 44px; }
.ranking-search input[type="search"]:focus { outline: 2px solid var(--ht-blue); outline-offset: 1px; }
.ranking-search__count { font-size: .85rem; white-space: nowrap; }
.ranking-search__empty { margin: .5rem 0 1.5rem; }

/* --- Graphiques survolables --- */
.chart-wrap { position: relative; }
.chart-tip { position: absolute; transform: translate(-50%, calc(-100% - 10px)); background: var(--ht-surface-2); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .35rem .55rem; font-size: .74rem; line-height: 1.35; white-space: nowrap; pointer-events: none; z-index: 6; }
.chart-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ht-text); border: 2px solid var(--ht-bg); transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }

/* --- Top tendance : onglets de période --- */
.period-tabs { display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.period-tab { padding: .5rem .9rem; border: 1px solid var(--ht-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--ht-muted); background: var(--ht-surface); font-family: var(--ht-font-display); font-weight: 600; font-size: .85rem; }
.period-tab:hover { color: var(--ht-text); }
.period-tab.is-active { background: var(--ht-blue); color: var(--ht-bg); border-color: var(--ht-blue); font-weight: 700; }
/* Le design system ne définit pas de couleur "avertissement" (seuls bleu/vert/rouge sont sémantiques) :
   traitement neutre volontaire ici — cf. concern rapporté dans H0-report.md. */
.notice { color: var(--ht-muted); margin: 2rem 0; padding: .8rem 1rem; border: 1px solid var(--ht-border); border-radius: var(--radius-sm); background: var(--ht-surface); }
.notice--warn { color: var(--ht-text); font-weight: 600; }

/* --- Prose (méthodologie, pages de confiance) --- */
.prose { max-width: 70ch; }
.prose h1 { font-family: var(--ht-font-display); font-style: italic; font-weight: 700; margin-bottom: .5rem; }
.prose__lead { font-size: 1.1rem; color: var(--ht-text); }
.prose p { color: var(--ht-muted); line-height: 1.7; margin: .9rem 0; }
.prose a { color: var(--ht-blue); }
.prose ul { color: var(--ht-muted); line-height: 1.7; margin: .9rem 0; padding-left: 1.2rem; }
.prose ul li { margin: .4rem 0; }
.prose ul strong { color: var(--ht-text); }

/* --- Mentions légales : bloc d'identité (dl) + iframe opt-out Matomo --- */
.legal-id { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .35rem 1.2rem; margin: .9rem 0; line-height: 1.6; }
.legal-id dt { color: var(--ht-text); font-weight: 600; }
.legal-id dd { color: var(--ht-muted); margin: 0; }
.legal-optout { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--ht-border); border-radius: var(--radius-sm); background: var(--ht-surface); text-decoration: none; }
.legal-optout:hover { border-color: var(--ht-blue); }

@media (max-width: 520px) {
    /* Étiquette au-dessus de la valeur : en dessous de ~9rem de colonne, « Directeur de la
       publication » casse en trois lignes et le tableau devient illisible. */
    .legal-id { grid-template-columns: 1fr; gap: 0; }
    .legal-id dd { margin: 0 0 .7rem; }
}

/* --- Fiche jeu : badge de rang --- */
.work-header__top { display: flex; align-items: center; gap: .8rem; }
.rank-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .5rem; border-radius: 999px; background: var(--ht-blue); color: var(--ht-bg); font-family: var(--ht-font-display); font-style: italic; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank-badge.is-top { background: var(--ht-gradient); }

/* --- Hit targets mobile (design system §5 : ≥ 44 px) --- */
@media (max-width: 700px) {
    .view-toggle__btn, .period-tab { min-height: 44px; }
}

/* --- Menu burger mobile (< 1000px) : remplace la nav horizontale + le sélecteur de langue
   (site-header__inner) par un bouton hamburger + panneau plein-largeur, piloté par
   mobile-menu_controller. Seuil relevé 840->1000px le 2026-07-09 (nav passée à 6 entrées avec Calendrier+Historique : wrap constaté à 900px) —
   les 2 entrées de nav à venir (Calendar, History) : logo + 6 liens + sélecteur ne tiennent plus
   sur une ligne, même repliés, au-dessous de cette largeur. --- */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    flex: none;
    background: transparent;
    border: 1px solid var(--ht-border);
    border-radius: var(--radius-sm);
    color: var(--ht-text);
    cursor: pointer;
    padding: 0;
}
.mobile-menu-btn:hover { background: var(--ht-surface-2); }
.mobile-menu-btn__icon { position: relative; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; transition: background 150ms ease; }
.mobile-menu-btn__icon::before, .mobile-menu-btn__icon::after {
    content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; border-radius: 1px;
    transition: transform 150ms ease, top 150ms ease;
}
.mobile-menu-btn__icon::before { top: -6px; }
.mobile-menu-btn__icon::after { top: 6px; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__icon { background: transparent; }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__icon::before { top: 0; transform: rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .mobile-menu-btn__icon::after { top: 0; transform: rotate(-45deg); }

.mobile-menu-panel {
    display: none;
    flex-direction: column;
    gap: 1rem;
    padding: .9rem clamp(16px, 4vw, 32px) 1.1rem;
    border-top: 1px solid var(--ht-border);
    background: var(--ht-surface);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
}
/* spécificité (0,2,0) > règle display:none ci-dessus (0,1,0) : cf. note [hidden] plus haut. */
.mobile-menu-panel:not([hidden]) { display: flex; }
.mobile-menu-panel.is-open { opacity: 1; transform: translateY(0); }
.mobile-menu-panel__nav { display: flex; flex-direction: column; }
.mobile-menu-panel__nav a {
    min-height: 44px; display: flex; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--ht-border);
    color: var(--ht-text-2); font-family: var(--ht-font-display); font-weight: 600;
}
.mobile-menu-panel__nav a:last-child { border-bottom: 0; }
.mobile-menu-panel__nav a:hover { color: var(--ht-text); text-decoration: none; }
.mobile-menu-panel__lang { display: flex; gap: .5rem; flex-wrap: wrap; }
.mobile-menu-panel__lang .lang-switch__item {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .6rem; border: 1px solid var(--ht-border); border-radius: var(--radius-sm);
}

@media (max-width: 999.98px) {
    .site-header__inner > .site-nav, .site-header__inner > .lang-switch { display: none; }
    .mobile-menu-btn { display: inline-flex; }
}

/* Sans JS, le clic sur le bouton ne fait rien (pas de handler) : le panneau reste `hidden`
   (fermé par défaut côté serveur) — aucune casse de mise en page. Pour l'impression et les
   grands écrans, la nav desktop reste/redevient seule source de vérité (bouton+panneau masqués). */
@media print, (min-width: 1000px) {
    .mobile-menu-btn, .mobile-menu-panel { display: none !important; }
}

/* --- Méthodologie : FAQ --- */
.faq { max-width: 70ch; margin-top: 2.5rem; }
.faq__q { font-family: var(--ht-font-display); font-weight: 600; font-size: 1rem; margin: 1.4rem 0 .3rem; }
.faq__a { color: var(--ht-muted); line-height: 1.7; margin: 0; }

/* --- Fiche jeu : tendance 7 j --- */
.trend-badge { font-family: var(--ht-font-display); font-weight: 700; font-style: italic; border-radius: 6px; padding: .12rem .5rem; font-size: .85rem; }
.trend-badge--up { color: var(--ht-green); background: rgba(0, 232, 113, .1); }
.trend-badge--down { color: var(--ht-red); background: rgba(255, 77, 106, .1); }
.trend-badge--flat { color: var(--ht-muted); }
.stat__v--up { color: var(--ht-green); }
.video__delta { display: inline-block; color: var(--ht-green); background: rgba(0, 232, 113, .1); font-family: var(--ht-font-display); font-weight: 700; font-style: italic; border-radius: 6px; padding: .05rem .4rem; font-size: .74rem; margin-top: .2rem; }
.hype-summary { max-width: 70ch; color: var(--ht-text-2); margin: 1rem 0; }

/* --- Fiche jeu : lien vers la sous-page « toutes les vidéos » (W2 recette v2) --- */
.videos-page-link { text-align: center; margin: 1.4rem 0; }

/* --- Sous-page « toutes les vidéos » (W2 recette v2 ; filtre + Δ7j v2.7 §D) --- */
.videos-page__intro { max-width: 70ch; color: var(--ht-text-2); margin: .6rem 0 1.4rem; }
.videos-table__video { display: flex; align-items: center; gap: .7rem; color: var(--ht-text); text-decoration: none; }
.videos-table__video:hover { text-decoration: underline; }
.videos-table__thumb { border-radius: var(--radius-sm); flex-shrink: 0; }
.videos-table__delta { color: var(--ht-green); font-weight: 600; }
/* Filtre Officiel/Buzz (v2.7 §D2) : progressif -> sans JS, aucune ligne n'est masquée (les boutons
   ne font rien tant que assets/table-sort.js n'a pas lié le clic). */
.videos-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0 1rem; }
.videos-filter__btn { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: 999px;
    color: var(--ht-text-2); font-size: .82rem; padding: .35rem .9rem; cursor: pointer; }
.videos-filter__btn[aria-pressed="true"] { background: var(--ht-blue); border-color: var(--ht-blue); color: var(--ht-bg); font-weight: 600; }
.videos-table tbody tr[hidden] { display: none; }

/* --- CTA pilule (bouton d'action publique réutilisable, ex. « voir toutes les vidéos ») --- */
.cta {
    display: inline-block; padding: .6rem 1.25rem; border-radius: 999px;
    background: var(--ht-blue); color: #fff; font-weight: 600; text-decoration: none;
    transition: filter .15s ease, background-color .15s ease;
}
.cta:hover, .cta:focus-visible { filter: brightness(1.08); text-decoration: none; }
.cta:focus-visible { outline: 2px solid var(--ht-blue); outline-offset: 2px; }

/* --- Retour recette 2026-07-13 : tableau 5 colonnes illisible en scroll horizontal sous 700px.
   CSS PUR sur le markup unique du tableau (aucun doublon de contenu : le <tr> devient la carte,
   pas de second bloc de cartes dans le DOM statique — évite de doubler ~700 lignes de HTML sur les
   jeux les plus suivis). Desktop (>700px) : AUCUN changement, `.games-table`/`.videos-table`
   restent le tableau trié par en-têtes existant. Sous 700px : thead masqué visuellement (mais gardé
   pour les lecteurs d'écran), <tr> devient une grille flex — la cellule Vidéo (thumb+titre) force un
   retour à la ligne (`flex-basis: 100%`) puis les 4 autres cellules (badge/date/vues/Δ7j) se
   regroupent sur la ligne suivante et WRAPPENT entre elles si la place manque (jamais de débordement
   horizontal, y compris à 390px). Le tri passe par .videos-sort-mobile (rangée de boutons) qui pilote
   le MÊME mécanisme que les <th> (assets/table-sort.js, initMobileSort()). */
.videos-sort-mobile { display: none; }
@media (max-width: 700px) {
    .videos-sort-mobile {
        display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem;
    }
    .videos-sort-mobile__btn {
        background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: 999px;
        color: var(--ht-text-2); font-size: .78rem; padding: .35rem .8rem; cursor: pointer; min-height: 36px;
    }
    .videos-sort-mobile__btn[aria-pressed="true"] { background: var(--ht-blue); border-color: var(--ht-blue); color: var(--ht-bg); font-weight: 600; }
    .videos-sort-mobile__btn[data-sort-dir="ascending"]::after { content: ' \25B2'; }
    .videos-sort-mobile__btn[data-sort-dir="descending"]::after { content: ' \25BC'; }

    .videos-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .videos-table, .videos-table tbody { display: block; width: 100%; }
    .videos-table tr {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .35rem;
        padding: .8rem 0; border-bottom: 1px solid var(--ht-border);
    }
    .videos-table td { display: block; padding: 0; border-bottom: 0; min-width: 0; }
    .videos-table td:first-child { flex: 1 1 100%; } /* Vidéo (thumb+titre) : pleine largeur, force le retour à la ligne des cellules suivantes. */
    .videos-table td:not(:first-child) { flex: 0 1 auto; font-size: .8rem; color: var(--ht-muted); }
    .videos-table td.num { text-align: left; font-weight: 600; color: var(--ht-text); }
    /* Séparateur discret + libellé généré par colonne (data-label posé en Twig pour vues/Δ7j
       uniquement — pas de doublon DOM, juste un attribut lu par `attr()`) : le badge (2) reste
       distinct par sa couleur, la date (3) n'a besoin que d'un séparateur (format déjà auto-porteur),
       vues (4) et Δ7j (5) lèvent l'ambiguïté des deux nombres nus une fois l'en-tête disparu. */
    .videos-table td:nth-child(3)::before { content: '\00b7\00a0'; color: var(--ht-border); }
    .videos-table td:nth-child(4)::before, .videos-table td:nth-child(5)::before {
        content: '\00b7\00a0' attr(data-label) '\00a0:\00a0'; color: var(--ht-muted); font-weight: 400;
    }
    .videos-table__video { align-items: flex-start; }
    .videos-table__thumb { width: 96px; height: 54px; }
    .videos-table__video span {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        font-size: .9rem;
    }
}

/* --- Home : gagnants de la semaine --- */
.winners { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.2rem 0; }
.winners__title { font-family: var(--ht-font-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 .2rem; }
.winners__sub { color: var(--ht-muted); font-size: .88rem; margin: 0 0 .9rem; }
.winners__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.winners__item { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .85rem; background: var(--ht-surface-2); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); text-decoration: none; }
.winners__item:hover { border-color: rgba(46,155,255,.4); text-decoration: none; }
.winners__name { font-family: var(--ht-font-display); font-weight: 600; color: var(--ht-text); font-size: .95rem; }
.winners__delta { color: var(--ht-green); font-family: var(--ht-font-display); font-weight: 700; font-style: italic; font-size: 1.1rem; }
.winners__label { font-size: .76rem; }
.winners__all { display: inline-block; margin-top: .9rem; color: var(--ht-blue); font-weight: 600; font-size: .9rem; }

/* --- Page Records --- */
.records-answer { max-width: 78ch; background: var(--ht-surface); border-left: 3px solid var(--ht-blue); border-radius: var(--radius-sm); padding: .7rem .9rem; color: var(--ht-text); margin: 0 0 1rem; }
.records-video { display: flex; gap: .6rem; align-items: center; text-decoration: none; color: var(--ht-text); }
.records-video:hover .records-video__title { text-decoration: underline; }
.records-video__thumb { width: 88px; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; background: var(--ht-surface-2); flex: none; }
.records-video__title { font-weight: 650; font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.records-table td.num.is-top { color: var(--ht-blue); font-weight: 750; }
.records-delta { color: var(--ht-green); font-family: var(--ht-font-display); font-weight: 700; font-style: italic; }
.records-context { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: .2rem 1.2rem 1rem; margin: 2rem 0; }
.records-context p { color: var(--ht-muted); line-height: 1.7; max-width: 78ch; }
.records-context a { color: var(--ht-blue); }

/* Records en mobile : CARTES empilées (même patron CSS-pur que .videos-table/.debates-index-table,
   retour proprio 2026-07-13/15). Colonnes desktop : # / vidéo(vignette+titre) / jeu / chaîne / vues
   / Δ7j / date. La vidéo devient le titre de carte (order:-1) ; le rang reste visible, en petit ;
   jeu/chaîne passent en métadonnées ; vues/Δ7j/date reçoivent un data-label (mêmes clés de trad que
   le thead, posées côté Twig) + le même séparateur ::before que .videos-table. */
@media (max-width: 700px) {
    .records-wrap { overflow-x: visible; }
    .records-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .records-table, .records-table tbody { display: block; width: 100%; }
    .records-table tr {
        display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .6rem; row-gap: .35rem;
        padding: .8rem 0; border-bottom: 1px solid var(--ht-border);
    }
    .records-table td { display: block; padding: 0; border-bottom: 0; min-width: 0; }
    .records-table td:nth-child(2) { order: -1; flex: 1 1 100%; } /* vidéo (vignette+titre) : titre de carte */
    .records-table td:nth-child(1) {
        flex: 0 1 auto; text-align: left; font-size: .8rem; font-weight: 600; color: var(--ht-muted);
    } /* rang : reste visible, en petit */
    .records-table td:nth-child(3), .records-table td:nth-child(4) {
        flex: 0 1 auto; font-size: .8rem; color: var(--ht-muted);
    } /* jeu, chaîne : métadonnées */
    .records-table td:nth-child(5), .records-table td:nth-child(6), .records-table td:nth-child(7) {
        flex: 0 1 auto; text-align: left; font-size: .78rem; font-weight: 400; color: var(--ht-muted);
    }
    .records-table td:nth-child(5)::before, .records-table td:nth-child(6)::before, .records-table td:nth-child(7)::before {
        content: '\00b7\00a0' attr(data-label) '\00a0:\00a0';
    }
    .records-video__thumb { max-width: 88px; height: auto; }
}

/* --- Page Calendrier --- */
.calendar-month { margin: 2rem 0 1rem; }
.calendar-row { display: grid; grid-template-columns: 108px 1fr auto; gap: .5rem 1rem; align-items: start; padding: .8rem 0; border-bottom: 1px solid var(--ht-border); }
.calendar-row__date { font-family: var(--ht-font-display); font-weight: 600; color: var(--ht-text-2); white-space: nowrap; }
.calendar-row__title { font-family: var(--ht-font-display); font-weight: 650; font-size: 1rem; }
.calendar-row__meta { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; margin-top: .3rem; font-size: .82rem; color: var(--ht-muted); }
.calendar-row__editorial { max-width: 68ch; color: var(--ht-text-2); font-size: .9rem; margin: .4rem 0 0; }
.calendar-row__hype { font-size: .85rem; font-weight: 650; white-space: nowrap; text-align: right; }
.calendar-row__hype--measured { color: var(--ht-blue); }
.calendar-row__hype--unmeasured { color: var(--ht-muted); font-weight: 500; }
.badge--status-confirmed { color: var(--ht-green); border-color: var(--ht-green); }
.badge--status-window { color: var(--ht-blue); border-color: var(--ht-blue); }
.badge--status-tba { color: var(--ht-muted); }
.badge--tier-aaa { color: var(--ht-bg); background: var(--ht-blue); border-color: transparent; }
.badge--tier-aa { color: var(--ht-teal); border-color: var(--ht-teal); }
.badge--tier-inde { color: var(--ht-muted); }
.calendar-legend { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: 1rem 1.2rem 1.4rem; margin: 2.4rem 0; }
.calendar-legend h3 { font-size: .95rem; margin: 1.1rem 0 .5rem; }
.calendar-legend dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0; }
.calendar-legend dt { font-weight: 650; color: var(--ht-text); }
.calendar-legend dd { margin: 0; color: var(--ht-muted); }
.calendar-legend p { color: var(--ht-muted); line-height: 1.6; max-width: 78ch; }
.calendar-recent__item { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--ht-border); }
@media (max-width: 640px) {
    .calendar-row { grid-template-columns: 1fr; }
    .calendar-row__hype { text-align: left; }
}

/* --- Page jeu : état « sorti » (bandeau + hype figée, plan E5) --- */
.released-banner { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius); padding: .7rem 1rem; margin: .8rem 0; color: var(--ht-text-2); display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; }
.released-banner a { color: var(--ht-blue); }

/* --- Page Historique --- */
.history-table td { vertical-align: top; }
.history-hype__total { font-weight: 700; }
.history-hype__detail { font-size: .78rem; margin-top: .1rem; }
.history-empty { margin: 1.4rem 0; }

/* Historique en mobile : CARTES empilées (même patron CSS-pur que .records-table/.videos-table).
   Colonnes desktop : jeu(+badge tier) / date de sortie / plateformes / hype. Le jeu devient le
   titre de carte (order:-1, badge tier resté inline) ; date/plateformes/hype passent en
   métadonnées avec data-label (mêmes clés de trad que le thead) + le même séparateur ::before. */
@media (max-width: 700px) {
    .history-wrap { overflow-x: visible; }
    .history-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .history-table, .history-table tbody { display: block; width: 100%; }
    .history-table tr {
        display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: .6rem; row-gap: .35rem;
        padding: .8rem 0; border-bottom: 1px solid var(--ht-border);
    }
    .history-table td { display: block; padding: 0; border-bottom: 0; min-width: 0; }
    .history-table td:nth-child(1) {
        order: -1; flex: 1 1 100%; font-size: .95rem; font-weight: 600; color: var(--ht-text);
    } /* jeu (+badge tier) : titre de carte */
    .history-table td:nth-child(2), .history-table td:nth-child(3), .history-table td:nth-child(4) {
        flex: 0 1 auto; text-align: left; font-size: .78rem; color: var(--ht-muted);
    }
    /* la cellule hype conclut la carte seule sur sa ligne (sinon elle se coince à droite des plateformes),
       et son total reste accolé au libellé « · Hype finale : » (les div internes redeviennent inline) */
    .history-table td:nth-child(4) { flex: 1 1 100%; }
    .history-table td:nth-child(4) .history-hype__total { display: inline; font-weight: 600; color: var(--ht-text); }
    .history-table td:nth-child(2)::before, .history-table td:nth-child(3)::before, .history-table td:nth-child(4)::before {
        content: '\00b7\00a0' attr(data-label) '\00a0:\00a0';
    }
    .history-hype__detail { display: block; font-size: .74rem; margin-top: .1rem; }
}

/* --- Fiche jeu v2.5 : bloc « Réactions de la communauté » (R3.1, ALLÉGÉ en v2.6) ---
   Port du gabarit POC validé (staging-poc/v2/gta6.html, style v2.3/v2.5), adapté aux variables
   --ht-* déjà déclarées ci-dessus (aucun fallback nécessaire, contrairement au POC autonome).
   Timeline (.rx-tl) : DOM en ordre CHRONOLOGIQUE ASCENDANT (le plus ancien en premier, cf.
   ShowcaseReactionsBuilder) -> desktop = ligne horizontale (le plus récent/futur à droite) ;
   mobile = colonne dans le MÊME ordre (le PASSÉ en haut, on descend vers le présent/futur), sans
   JS — décision v2.6 (retour proprio 2026-07-13) qui ANNULE la v2.2 (`column-reverse`, futur en
   haut sur mobile). */
.rx { margin: 1.6rem 0; max-width: 100%; }
.rx-part { margin: 2.2rem 0 .4rem; padding: .5rem 0 .4rem; border-bottom: 2px solid var(--ht-border);
    display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.rx-part b { font-family: var(--ht-font-display); font-size: 1.2rem; letter-spacing: .3px; }
.rx-part span { color: var(--ht-muted); font-size: .82rem; }
.rx-h3 { font-size: .8rem; letter-spacing: .8px; text-transform: uppercase; color: var(--ht-muted); margin: 1.3rem 0 .6rem; }
.rx-week { background: var(--ht-surface); border: 1px solid var(--ht-border); border-left: 3px solid var(--ht-blue);
    border-radius: var(--radius-sm); padding: .9rem 1rem; }
.rx-week .rx-chapeau { font-size: .98rem; margin: 0 0 .6rem; }
.rx-ref { font-size: .8rem; color: var(--ht-blue); margin-top: .25rem; }
.rx-quote { border-left: 3px solid var(--ht-blue); background: rgba(46,155,255,.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: .55rem .8rem; margin-top: .6rem;
    font-size: .92rem; overflow-wrap: anywhere; }
.rx-quote .rx-qa { color: var(--ht-muted); font-size: .74rem; margin-top: .3rem; }
.rx-quote .rx-qa a { color: var(--ht-blue); text-decoration: none; }
.rx-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: .85rem; }
.rx-card { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm);
    padding: .85rem 1rem; min-width: 0; }
.rx-card h4 { margin: 0 0 .1rem; font-size: 1.02rem; }
.rx-tag { display: inline-block; font-size: .64rem; letter-spacing: .6px; text-transform: uppercase;
    padding: .12rem .5rem; border-radius: 3px; margin-bottom: .5rem; }
.rx-tag--dom { color: var(--ht-green); border: 1px solid var(--ht-green); }
.rx-tag--pol { color: var(--ht-red); border: 1px solid var(--ht-red); }
.rx-card .rx-resume { font-size: .88rem; color: var(--ht-muted); margin: 0; }
.rx-bar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; margin: .6rem 0 .3rem; }
.rx-bar i { display: block; height: 100%; }
.rx-lab { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; flex-wrap: wrap; }
.rx-curvebox { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm);
    padding: .85rem .85rem .5rem; }
.chart--positive .chart__line { stroke: var(--ht-green); }
.chart--positive .chart__area { fill: color-mix(in srgb, var(--ht-green) 14%, transparent); }
.chart--negative .chart__line { stroke: var(--ht-red); }
.chart--negative .chart__area { fill: color-mix(in srgb, var(--ht-red) 14%, transparent); }
.rx-legend { display: flex; gap: 1rem; font-size: .75rem; color: var(--ht-muted); margin-top: .4rem; flex-wrap: wrap; }
.rx-tl { display: flex; flex-direction: row; margin-top: 1.1rem; overflow-x: auto; }
.rx-tl-item { flex: 1 1 0; min-width: 130px; position: relative; padding: 1.1rem .6rem 0; }
.rx-tl-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ht-border); }
.rx-tl-item::after { content: ''; position: absolute; top: -4px; left: 50%; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ht-blue); transform: translateX(-50%); }
.rx-tl-item.rx-tl--periodique::after { background: var(--ht-muted); width: 8px; height: 8px; top: -3px; }
.rx-tl-item.rx-tl--futur::after { background: var(--ht-green); box-shadow: 0 0 0 3px rgba(0,232,113,.25); }
.rx-tl-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.rx-tl-head b { font-size: .92rem; }
.rx-tl-bal { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .9rem; }
/* Sous-ligne discrète (v2.7 §B) : le label ACTUEL (dates/intitulé) quand un thème dominant LLM
   prend sa place en titre — cf. _reactions.html.twig, ShowcaseReactionsBuilder::timelineAndCurve(). */
.rx-tl-sub { color: var(--ht-muted); font-size: .76rem; margin-top: .1rem; }
.rx-tl-date { color: var(--ht-muted); font-size: .74rem; }
.rx-tl-txt { font-size: .85rem; color: var(--ht-muted); margin-top: .25rem; }
.rx-note { color: var(--ht-muted); font-size: .72rem; margin-top: .7rem; }
/* Index des débats en mobile : CARTES empilées (retour proprio 2026-07-13, même patron CSS-pur
   sur markup unique que .videos-table) — la question devient le titre de carte (order:-1), la
   barre de position passe pleine largeur sous les métadonnées, plus aucun scroll horizontal. */
@media (max-width: 700px) {
    .debates-index-wrap { overflow-x: visible; }
    .debates-index-table thead {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }
    .debates-index-table, .debates-index-table tbody { display: block; width: 100%; }
    .debates-index-table tr {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: .6rem; row-gap: .4rem;
        padding: .85rem 0; border-bottom: 1px solid var(--ht-border);
    }
    .debates-index-table td { display: block; padding: 0; border-bottom: 0; min-width: 0; }
    .debates-index-table td.debates-index-table__subject {
        order: -1; flex: 1 1 100%; font-size: .95rem; font-weight: 600; line-height: 1.35;
    }
    .debates-index-table td:not(.debates-index-table__subject):not(.debates-index-table__stance) {
        flex: 0 1 auto; font-size: .78rem; color: var(--ht-muted);
    }
    .debates-index-table td.debates-index-table__stance { flex: 1 1 100%; }
    .debates-index-table .db-index-bar { min-width: 0; width: 100%; }
}

@media (max-width: 700px) {
    /* v2.6 : `column` (pas `column-reverse`) — le DOM est déjà chronologique ASCENDANT (le plus
       ancien en premier), donc l'empilement top->bottom naturel place le PASSÉ en haut et on
       descend vers le présent/futur, sans retourner l'ordre visuel (cf. commentaire de tête). */
    .rx-tl { flex-direction: column; overflow-x: visible; }
    .rx-tl-item { min-width: 0; padding: 0 0 1.1rem 1.1rem; }
    .rx-tl-item::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
    .rx-tl-item::after { top: 2px; left: 0; transform: translateX(-40%); }
}

/* --- Détails repliables du bloc Réactions (v2.6) : <details> natif, zéro JS, contenu conservé
   dans le DOM (exigence SEO explicite). Réutilise le motif chevron déjà en place pour
   `.release-dates` (fiche jeu) — sobre, cohérent thème sombre. --- */
.rx-details { margin-top: .5rem; }
.rx-details > summary { cursor: pointer; color: var(--ht-blue); font-weight: 600; font-size: .85rem; list-style: none; }
.rx-details > summary::-webkit-details-marker { display: none; }
.rx-details > summary::before { content: '▸'; display: inline-block; margin-right: .35rem; transition: transform .15s ease; }
.rx-details[open] > summary::before { transform: rotate(90deg); }
.rx-details__body { margin-top: .5rem; }
.rx-witem.rx-details { padding: .6rem 0; border-top: 1px solid var(--ht-border); margin-top: 0; }
.rx-witem.rx-details:first-child { border-top: none; padding-top: 0; }
.rx-witem.rx-details > summary { color: var(--ht-text); font-size: .98rem; }
.rx-witem.rx-details > summary b { font-weight: 650; }
.rx-witem .rx-details__body p { margin: .25rem 0 0; font-size: .9rem; color: var(--ht-muted); }
.rx-tl-details { margin-top: .35rem; }
.rx-tl-details > summary { font-size: .74rem; }

/* --- Carte « top des réactions & polémiques » (v2.6 allégée -> v2.7 ÉTOFFÉE, retour recette
   2026-07-13) : titre + tag + part + résumé + UNE citation (+ barre de camps pour les polémiques)
   TOUS visibles sans repli (plus de <details> sur ces cartes, cf. _reactions.html.twig §A). */
.rx-share { font-size: .78rem; color: var(--ht-muted); margin: .3rem 0 0; font-weight: 600; }
/* Pourcentage agrandi (v2.7 §A) : élément visuel fort de la carte, couleur accent du thème
   (--ht-blue, déjà la couleur d'accent liens/marque, cf. .wordmark .hype). */
.rx-share--big { font-size: 1.7em; font-weight: 800; color: var(--ht-blue); margin: .3rem 0 .6rem; line-height: 1; }

/* --- Points permanents + marqueurs d'événement de la courbe de sentiment (v2.6, OPT-IN via
   LineChart/_chart.html.twig — cf. docblocks) --- */
.chart__point { fill: var(--ht-bg); stroke-width: 1.5; }
.chart--positive .chart__point { stroke: var(--ht-green); }
.chart--negative .chart__point { stroke: var(--ht-red); }
.chart__point--event { fill: var(--ht-text); stroke: var(--ht-blue); stroke-width: 2; }

/* Légende des moments clés (v2.6) : liste en MARGE du graphe (jamais superposée en absolu sur la
   largeur du SVG) -> flux normal + flex-wrap = aucun débordement horizontal possible, y compris à
   390 px (contrainte dure de la spec). Sur mobile, les puces se réduisent/s'enroulent naturellement. */
.rx-curve-events { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: .5rem 0 0; padding: 0; }
.rx-curve-event { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--ht-text-2);
    background: var(--ht-surface-2); border: 1px solid var(--ht-border); border-radius: 999px; padding: .12rem .55rem .12rem .4rem;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-curve-event i { width: 6px; height: 6px; border-radius: 50%; background: var(--ht-blue); flex: 0 0 auto; }
@media (max-width: 480px) {
    .rx-curve-event { font-size: .68rem; max-width: 46vw; }
}

/* --- Page débat (W3, /{locale}/debat/{slug}) : gabarit éditorial POC v2.4 étendu multi-jeux.
   Réutilise .rx-bar/.rx-quote/.rx-note (fiche) pour les barres/citations/note de méthode. --- */
.db-breadcrumb { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.db-kicker { display: inline-block; margin-top: 1.1rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ht-red); }
.db-h1 { margin: .35rem 0 .4rem; font-size: 1.7rem; line-height: 1.2; }
.db-sub { color: var(--ht-muted); font-size: .98rem; margin: 0 0 .6rem; max-width: 72ch; }
.db-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; color: var(--ht-muted); font-size: .8rem; margin-bottom: 1rem; }
/* Sujet moins actif : signalement SOBRE, pas un avertissement. La page reste un contenu valable
   (et indexé) — un badge alarmiste ferait fuir un lecteur venu d'une recherche. */
.db-badge-inactive { display: inline-block; padding: .05rem .45rem; border: 1px solid var(--ht-border);
    border-radius: 999px; color: var(--ht-muted); font-size: .72rem; white-space: nowrap; }
.db-inactive-note { color: var(--ht-muted); font-size: .82rem; line-height: 1.6; max-width: 78ch;
    margin: -.4rem 0 1rem; }
.debates-index-table__subject .db-badge-inactive { margin-left: .4rem; vertical-align: middle; }
.db-chapeau { border-left: 3px solid var(--ht-blue); background: rgba(46,155,255,.06);
    padding: .7rem .9rem; border-radius: 0 6px 6px 0; font-size: .95rem; max-width: 78ch; }
.db-section { margin-top: 1.8rem; }
.db-h2row { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.db-h2row h2 { margin: 0 0 .5rem; font-size: 1.2rem; }
.db-h2row h2 a { color: inherit; }
.db-upd { color: var(--ht-muted); font-size: .76rem; }
.db-recit { border-left: 2px solid var(--ht-border); padding-left: 1rem; display: grid; gap: .8rem; }
.db-step-date { font-size: .74rem; font-weight: 700; color: var(--ht-blue); }
.db-step p { margin: .15rem 0 0; font-size: .9rem; max-width: 76ch; }
.db-game-intro { color: var(--ht-muted); font-size: .92rem; max-width: 78ch; }
.db-camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; margin-top: .6rem; }
.db-camp { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm); padding: .8rem .9rem; }
.db-camp h3 { margin: 0 0 .5rem; font-size: .98rem; display: flex; justify-content: space-between; gap: .6rem; }
.db-camp--contre h3 { color: var(--ht-red); }
.db-camp--pour h3 { color: var(--ht-green); }
/* Axe sans polarité morale (« X ou Y ? », stance.polar=false) : neutralise le rouge/vert
   critique-vs-défense au profit du même duo bleu/ambre que la barre de position. */
.db-camp--contre.db-camp--neutral h3 { color: var(--ht-blue); }
.db-camp--pour.db-camp--neutral h3 { color: #d97706; }
.db-camp-w { color: var(--ht-muted); font-weight: 600; }
.db-arg { font-size: .88rem; margin-top: .55rem; }
.db-verdict { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm);
    padding: .8rem .9rem; font-size: .92rem; max-width: 80ch; }
.db-verdict b { display: block; margin-bottom: .3rem; }
.db-faq dt { font-weight: 600; margin-top: 1rem; }
.db-faq dd { color: var(--ht-muted); font-size: .92rem; margin: .25rem 0 0; max-width: 72ch; }
.db-method { margin-top: 1.6rem; }
.db-method a { color: var(--ht-blue); }
.rx-debate-link { display: inline-block; margin-top: .5rem; font-size: .82rem; color: var(--ht-blue); text-decoration: none; }
.rx-debate-link:hover { text-decoration: underline; }

/* --- « Le contexte » (v2.8) : encadré discret, distinct du .db-chapeau (chapeau = accroche
   éditoriale du sujet ; contexte = rappel factuel sourcé, ton neutre). --- */
.db-context { background: var(--ht-surface); border: 1px solid var(--ht-border); border-radius: var(--radius-sm);
    padding: .9rem 1rem; }
.db-context__paragraph { font-size: .9rem; max-width: 78ch; margin: 0 0 .6rem; }
.db-context__paragraph:last-of-type { margin-bottom: .4rem; }
.db-context__sources { font-size: .82rem; color: var(--ht-muted); margin: .4rem 0 0; }
.db-context__sources a { color: var(--ht-blue); }
.db-context__note { color: var(--ht-muted); font-size: .74rem; margin: .6rem 0 0; }

/* --- Index des débats (v2.8, `/{locale}/debat(e)s`) : format TABLEAU (retour proprio 2026-07-13,
   remplace les cartes). Réutilise .games-table (tri, `.games-table-wrap { overflow-x: auto }` pour
   le mobile — même patron que work_videos.html.twig, jamais de colonnes masquées/compressées) et
   .rx-bar (même langage visuel que la barre de camps des fiches débat/réactions : rouge=contre,
   vert=pour ; bleu/ambre si l'axe du débat est sans polarité morale, cf. .db-index-bar--options
   ci-dessous, 2026-07-15). --- */
.debates-index-table__subject a { color: var(--ht-text); }
.debates-index-table__subject a:hover { color: var(--ht-blue); }
.debates-index-table__stance { min-width: 90px; }
.db-index-bar { margin: 0; min-width: 70px; }
.db-index-bar i:first-child { background: var(--ht-red); }
.db-index-bar i:last-child { background: var(--ht-green); }
/* Axe sans polarité morale (« X ou Y ? », stance.polar=false, 2026-07-15) : même duo bleu/ambre que
   .db-camp--neutral, remplace le rouge/vert critique-vs-défense. */
.db-index-bar--options i:first-child { background: var(--ht-blue); }
.db-index-bar--options i:last-child { background: #d97706; }
.db-index-empty { color: var(--ht-muted); }
/* Résumé indicatif sans barre (stance.aggregate=false, 2026-07-15) : la polarité des camps n'est pas
   cohérente d'un jeu à l'autre du débat, une moyenne globale serait trompeuse. */
.db-index-nobar { font-size: .78rem; color: var(--ht-muted); }
/* Légende sous la barre de position (retour proprio 2026-07-13) : mêmes couleurs que la barre. */
.db-index-legend { display: flex; gap: .35rem; font-size: .7rem; margin-top: .25rem; color: var(--ht-muted); white-space: nowrap; }
.db-index-legend__contre { color: var(--ht-red); }
.db-index-legend__pour { color: var(--ht-green); }
/* ... y compris en axe « options » : la légende suit le duo bleu/ambre de .db-index-bar--options. */
.db-index-bar--options + .db-index-legend .db-index-legend__contre { color: var(--ht-blue); }
.db-index-bar--options + .db-index-legend .db-index-legend__pour { color: #d97706; }