/* ═══════════════════════════════════════════════════════════════════════
   TAVU, DIRECTION ARTISTIQUE
   ─────────────────────────────────────────────────────────────────────
   Couche chargée APRÈS style.css (functions.php, handle wf-tavu) et dans
   l'éditeur (add_editor_style). style.css reste la base wireframe : ici,
   seulement ce qui fait Tavu.

   Le parti pris, en quatre règles :
     1. Blanc et noir. Pas de gris chaud, pas de couleur de marque.
        L'accent vaut le noir : un survol inverse, il ne colorise pas.
        Les textes posés sur l'accent ou sur un fond sombre sont gérés
        par les tokens --on-acc et --acc-on-dark (style.css), jamais ici.
     2. Des filets francs de 1px, noirs, et des angles droits.
     3. Une seule famille, Inter, du 400 au 900. Les titres sont très
        gros, très gras, serrés, en capitales.
     4. Les étiquettes (rubriques, métadonnées) sont petites, en
        capitales espacées. Plus de monospace.

   Les couleurs se règlent toujours dans Apparence > 🎨 Design : les
   valeurs par défaut de cette variante sont déjà noir et blanc.

   SOMMAIRE
     1. Base
     2. Titres
     3. Navbar
     4. Liens, boutons, étiquettes
     5. Cartes et images
     6. Accueil streaming (hero sombre)
     7. Bandeau défilant
     8. Footer
     9. Accessibilité
    10. En-tête d'article (hero titre + cover, barre de repères)
    11. Blocs, version brute
    12. Pied d'article (sujets, lire aussi, bandeau rubrique)
    13. Commentaires
    14. Tableaux et bloc Coins
    15. Rubriques : en-tête compact, vitrine du catalogue (1.7.1)
    16. Pages : titre aligné sur le contenu (1.7.1)
    17. Accueil : plus d'articles, bouton « Tous les articles » (1.7.1)
═══════════════════════════════════════════════════════════════════════ */


/* ── 1. BASE ─────────────────────────────────────────────────────────── */

:root {
    --tavu-black: #0a0a0a;
    --tavu-white: #ffffff;
    --tavu-line:  var(--wf-border-width, 1px) solid var(--bd);
    --tavu-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);
    --tavu-xl:      clamp(2.25rem, 1.2rem + 4.2vw, 5rem);
    --tavu-l:       clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
}

body {
    font-family: var(--sans);
    color: var(--tx);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv11";
}

::selection {
    background: var(--tavu-black);
    color: var(--tavu-white);
}


/* ── 2. TITRES ───────────────────────────────────────────────────────── */

h1, h2, h3,
.wf-cover-content h1,
.wf-titre-section,
.wf-article-title,
.wfa-title,
.wf404-title,
.stlh-hero-title,
.stlh-section-title {
    font-family: var(--heading, var(--sans));
    font-weight: 900;
    letter-spacing: -.045em;
    text-wrap: balance;
}

.wf-cover-content h1 {
    font-size: var(--tavu-display);
    line-height: .88;
    text-transform: uppercase;
}

.wf-titre-section {
    font-size: var(--tavu-xl);
    line-height: .92;
    text-transform: uppercase;
}

.wf-article-title {
    font-size: var(--tavu-xl);
    line-height: .95;
}

.wfa-title {
    font-size: var(--tavu-display);
    line-height: .88;
}

.wf404-title {
    font-size: var(--tavu-xl);
    line-height: .92;
}

.stlh-hero-title {
    font-weight: 900;
    line-height: .86;
    letter-spacing: -.055em;
}

.stlh-section-title {
    font-size: var(--tavu-l);
    line-height: .95;
}

:where(.entry-content) h2 {
    font-size: var(--tavu-l);
    line-height: 1;
    margin-top: 1.6em;
}

:where(.entry-content) h3 {
    font-weight: 800;
    letter-spacing: -.03em;
}


/* ── 3. NAVBAR ───────────────────────────────────────────────────────
   Une barre de cases collées, séparées par des filets noirs : la
   marque, le menu, puis les outils (sorties du jour, recherche,
   compte). Chaque case s'inverse au survol. La case « Aujourd'hui »
   porte le seul point de couleur du site : un voyant rouge qui dit
   « ça sort maintenant ». Balisage : header.php, données :
   inc/tavu-nav.php. */

header.navbar.tv-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--tavu-black);
}

.tv-nav .site-header {
    flex: 0 0 auto;
    align-self: stretch;
    border-right: 1px solid var(--tavu-black);
}

.tv-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 0 24px 0 var(--pad);
    color: var(--tx);
    text-decoration: none;
    transition: background .12s, color .12s;
}

.tv-brand:hover { background: var(--tavu-black); color: var(--tavu-white); }
.tv-brand:hover .site-logo { filter: invert(1); }

body .tv-nav .site-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

/* Menu : des cases pleine hauteur, pas des liens soulignés. */
header.navbar.tv-nav .nav-links {
    display: flex;
    align-self: stretch;
}

header.navbar.tv-nav .nav-links .menu {
    display: flex;
    height: 100%;
}

header.navbar.tv-nav .nav-links .menu-item {
    display: flex;
    border-right: 1px solid var(--tavu-black);
}

/* La dernière case ne ferme pas : l'espace libre qui suit n'est pas
   une case vide, juste de l'air avant les outils. */
header.navbar.tv-nav .nav-links .menu-item:last-child { border-right: 0; }

header.navbar.tv-nav .nav-links .menu-item a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 18px;
    border: 0;
    font: 800 12.5px/1 var(--sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--tx);
    transition: background .12s, color .12s;
}

header.navbar.tv-nav .nav-links .menu-item a:hover {
    background: var(--tavu-black);
    color: var(--tavu-white);
    text-decoration: none;
}

/* Page en cours : une barre épaisse sous la case, comme un onglet. */
header.navbar.tv-nav .nav-links :is(.current-menu-item, .current-menu-parent, .current-post-ancestor) > a {
    box-shadow: inset 0 -5px 0 var(--tavu-black);
    text-decoration: none;
}

/* Outils à droite */
header.navbar.tv-nav .tv-tools {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    gap: 0;
    margin-left: auto;
}

.tv-today {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    border-left: 1px solid var(--tavu-black);
    font: 800 12px/1 var(--sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--tx);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.tv-today:hover { background: var(--tavu-black); color: var(--tavu-white); }

.tv-today-dot {
    width: 9px;
    height: 9px;
    background: var(--wf-red, #d23c0f);
    animation: tv-blink 1.6s steps(2, jump-none) infinite;
}

@keyframes tv-blink { 50% { opacity: .25; } }

.tv-today-n {
    padding: 6px 8px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font-weight: 900;
}

.tv-today:hover .tv-today-n { background: var(--tavu-white); color: var(--tavu-black); }

.tv-icon-btn {
    display: grid;
    place-items: center;
    width: var(--h-navbar);
    padding: 0;
    border: 0;
    border-left: 1px solid var(--tavu-black);
    border-radius: 0;
    background: transparent;
    color: var(--tx);
    cursor: pointer;
    transition: background .12s, color .12s;
}

.tv-icon-btn:hover,
.tv-icon-btn.is-active { background: var(--tavu-black); color: var(--tavu-white); }

.tv-account {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 800 12px/1 var(--sans);
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.tv-account:hover { background: var(--tavu-white); color: var(--tavu-black); box-shadow: inset 0 0 0 1px var(--tavu-black); }

/* Burger : une case carrée, les trois barres deviennent une croix. */
header.navbar.tv-nav .burger {
    width: var(--h-navbar);
    height: auto;
    gap: 5px;
    border: 0;
    border-left: 1px solid var(--tavu-black);
    border-radius: 0;
}

header.navbar.tv-nav .burger span {
    width: 22px;
    height: 3px;
    border-radius: 0;
    background: var(--tx);
    transition: transform .2s, opacity .2s;
}

header.navbar.tv-nav .burger.active { background: var(--tavu-black); }
header.navbar.tv-nav .burger.active span { background: var(--tavu-white); }
header.navbar.tv-nav .burger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
header.navbar.tv-nav .burger.active span:nth-child(2) { opacity: 0; }
header.navbar.tv-nav .burger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Recherche : panneau noir sous la barre, un seul grand champ. */
.tv-search {
    position: fixed;
    top: var(--h-navbar);
    left: 0;
    right: 0;
    z-index: 198;
    padding: 18px var(--pad);
    background: var(--tavu-black);
    border-bottom: 1px solid var(--tavu-black);
}

.tv-search[hidden] { display: none; }

.tv-search-form {
    display: flex;
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
}

.tv-search-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 60px;
    padding: 0 20px;
    border: 1px solid var(--tavu-white);
    border-radius: 0;
    background: var(--tavu-white);
    color: var(--tavu-black);
    font: 800 clamp(17px, 2vw, 24px)/1 var(--sans);
    letter-spacing: -.02em;
}

.tv-search-form input::placeholder { color: #8a8a8a; font-weight: 600; }

.tv-search-form button {
    padding: 0 26px;
    border: 1px solid var(--tavu-white);
    border-left: 0;
    border-radius: 0;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 800 13px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}

.tv-search-form button:hover { background: var(--tavu-white); color: var(--tavu-black); }

/* Résultats instantanés : bloc blanc collé sous le champ, lignes
   séparées par des filets. Alimenté par script.js (tavuLiveSearch). */
.tv-search-results {
    max-width: var(--wf-max-width, var(--max));
    max-height: min(60vh, 480px);
    margin: 0 auto;
    overflow-y: auto;
    border: 1px solid var(--tavu-white);
    border-top: 0;
    background: var(--tavu-white);
    color: var(--tavu-black);
}

.tv-search-results[hidden] { display: none; }

/* La liste défile seule : arrivée en bas, la page derrière ne bouge pas. */
.tv-search-results,
.stlh-search-results {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.tv-result {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px;
    border-top: 1px solid var(--tavu-black);
    color: var(--tavu-black);
    text-decoration: none;
}

/* Survol et clavier se signalent de la même façon : ligne inversée. */
.tv-result:hover,
.tv-result.is-active {
    background: var(--tavu-black);
    color: var(--tavu-white);
}

.tv-result-thumb {
    flex: none;
    display: block;
    width: 34px;
    height: 50px;
    border: 1px solid currentColor;
    background: #e6e6e6;
    object-fit: cover;
}

.tv-result-body { min-width: 0; }

.tv-result-title {
    display: block;
    font: 800 16px/1.2 var(--sans);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tv-result-meta {
    display: block;
    margin-top: 4px;
    font: 700 11px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .6;
}

/* Dernière ligne : tous les résultats, vers le catalogue. */
.tv-result--all {
    justify-content: center;
    padding: 16px 20px;
    font: 800 12px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Intitulé de groupe (Catalogue, Articles) quand la barre cherche
   aussi dans les articles. Pas une ligne : le clavier le saute. */
.tv-result-group {
    margin: 0;
    padding: 12px 20px 8px;
    border-top: 1px solid var(--tavu-black);
    font: 800 11px/1 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.tv-search-results > .tv-result-group:first-child { border-top: 0; }

.tv-search-empty {
    margin: 0;
    padding: 18px 20px;
    border-top: 1px solid var(--tavu-black);
    font: 600 14px/1.45 var(--sans);
    color: #555;
}

.tv-search-empty.is-loading { color: #8a8a8a; }

/* Menu mobile : plein écran noir, gros liens numérotés. */
body .mobile-nav {
    padding: 0;
    background: var(--tavu-black);
    color: var(--tavu-white);
    border-top: 1px solid var(--tavu-black);
}

body .mobile-nav .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tvnav;
}

body .mobile-nav .menu-item a {
    counter-increment: tvnav;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 16px var(--pad);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
    font: 900 clamp(30px, 9vw, 46px)/1 var(--sans);
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: var(--tavu-white);
    text-decoration: none;
}

body .mobile-nav .menu-item a::before {
    content: counter(tvnav, decimal-leading-zero);
    font: 700 12px/1 var(--sans);
    letter-spacing: .08em;
    opacity: .5;
}

body .mobile-nav .menu-item a:hover { background: var(--tavu-white); color: var(--tavu-black); }

.tv-mobile-tools {
    display: grid;
    gap: 12px;
    padding: 22px var(--pad) 40px;
}

.tv-mobile-tools .tv-today,
.tv-mobile-tools .tv-account {
    justify-content: space-between;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--tavu-white);
    color: var(--tavu-white);
    background: transparent;
}

.tv-mobile-tools .tv-search-form input { height: 52px; }
/* Dans le menu : la hauteur est calculée par script.js (fitPanel),
   d'après ce que le clavier laisse visible. */
.tv-mobile-tools .tv-search-results { max-height: 60vh; }
.tv-mobile-tools .tv-result { padding: 10px 16px; }
#tv-msearch,
#stlh-search-wrap { scroll-margin-top: calc(var(--h-navbar, 60px) + 12px); }

/* Téléphone : des lignes plus compactes, plus de résultats visibles. */
@media (max-width: 600px) {
    .tv-result { gap: 12px; padding: 8px 14px; }
    .tv-mobile-tools .tv-result { padding: 8px 14px; }
    .tv-result-thumb { width: 30px; height: 44px; }
    .tv-result-title { font-size: 15px; }
    .tv-result-meta { margin-top: 3px; font-size: 10px; }
    .tv-result--all { padding: 14px; }
    .tv-search-results { max-height: calc(100dvh - var(--h-navbar, 60px) - 110px); }
}

/* Masqué visuellement, lu par les lecteurs d'écran. */
.tv-nav .screen-reader-text,
.tv-search .screen-reader-text,
.mobile-nav .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1180px) {
    .tv-today-lbl { display: none; }
    header.navbar.tv-nav .nav-links .menu-item a { padding: 0 13px; }
}

@media (max-width: 900px) {
    header.navbar.tv-nav .nav-links { display: none; }
    header.navbar.tv-nav .burger { display: flex; }
    .tv-tools > .tv-today,
    .tv-tools > .tv-account { display: none; }
    .tv-brand { padding-right: 18px; }

    /* Connecté : le compte revient dans la barre, en icône seule, à gauche
       de la loupe. Même case carrée que la loupe et le burger. */
    .tv-tools > .tv-account.is-logged {
        display: grid;
        place-items: center;
        order: -1;
        width: var(--h-navbar);
        padding: 0;
        border-left: 1px solid var(--tavu-black);
        background: transparent;
        color: var(--tx);
    }
    .tv-tools > .tv-account.is-logged svg { width: 21px; height: 21px; }
    .tv-tools > .tv-account.is-logged .tv-account-lbl { display: none; }
    .tv-tools > .tv-account.is-logged:hover { background: var(--tavu-black); color: var(--tavu-white); box-shadow: none; }
}

@media (max-width: 600px) {
    body .tv-nav .site-title { font-size: 1.35rem; }
    .tv-search { padding: 12px var(--pad); }
    .tv-search-form input { height: 52px; }
    .tv-search-form button { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-today-dot { animation: none; }
}


/* ── 4. LIENS, BOUTONS, ÉTIQUETTES ───────────────────────────────────── */

:where(.entry-content) a {
    color: var(--tx);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

:where(.entry-content) a:hover {
    background: var(--tavu-black);
    color: var(--tavu-white);
    text-decoration: none;
}

:where(.entry-content, [class*="wp-block-wf-"]) mark {
    background: var(--tavu-black);
    color: var(--tavu-white);
}

/* Boutons : le composant .wf-btn (style.css, section 10) porte déjà le
   parti pris Tavu. Ici on aligne seulement les boutons natifs de
   WordPress et les anciens .btn sur le même dessin. */
.btn,
.wfa-search-btn,
.wp-block-button__link {
    border: var(--wf-border-width, 1px) solid var(--tx);
    border-radius: var(--r);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.btn:hover,
.wfa-search-btn:hover,
.wp-block-button__link:hover {
    background: var(--tx);
    border-color: var(--tx);
    color: var(--bg);
}

.wp-block-button__link {
    background: var(--tx);
    color: var(--bg);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--tx);
}

/* Étiquettes et métadonnées : ex-monospace, désormais Inter en capitales */
.wl, .dim, .ann, .wf-img-lbl, .wf-block-label {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: .08em;
}


/* ── 5. CARTES ET IMAGES ─────────────────────────────────────────────── */

.wf-card {
    border: var(--tavu-line);
    border-radius: var(--r);
}

.wf-card:hover {
    background: var(--bg);
    border-color: var(--tx);
    box-shadow: inset 0 0 0 1px var(--tx);
}

:where(.entry-content) img,
.wf-card img {
    border-radius: var(--r);
}


/* ── 6. ACCUEIL STREAMING ───────────────────────────────────────────── */

/* Le hero reste noir, c'est le négatif du site. Les couleurs lisibles
   sur ce fond viennent du token --acc-on-dark (style.css), rien à
   surcharger ici. */


/* ── 7. BANDEAU DÉFILANT ─────────────────────────────────────────────── */

/* Texte sur accent : token --on-acc (blocks/wf-bandeau2/style.css). */


/* ── 8. FOOTER ───────────────────────────────────────────────────────
   Gabarit : inc/footer-settings.php (wf_footer_markup). Même matière que
   la navbar et la barre de repères des fiches : des cases séparées par
   des filets de 1 px, des étiquettes en capitales, des liens qui
   s'inversent au survol. Noir par défaut (.is-dark), blanc au choix
   (.is-light) ; les couleurs avancées du backoffice passent par les
   variables --foot-*.
     · Ordinateur : présentation | liens | participer / réseaux.
     · Mobile : les cases s'empilent, les liens deviennent des lignes
       pleine largeur, faciles à toucher.
   Sous la grille, le grand logotype, puis la ligne du bas. */

.tv-foot {
    --foot-bg:   var(--tavu-black);
    --foot-tx:   var(--tavu-white);
    --foot-mt:   rgba(255, 255, 255, .62);
    --foot-line: rgba(255, 255, 255, .24);
    --foot-lnk:  var(--foot-tx);
    --foot-btn:  var(--foot-tx);
    --foot-font: var(--sans);
    --foot-body: 15px;
    /* Respiration des cases : une seule source pour les marges internes. */
    --foot-px:   clamp(24px, 2.6vw, 44px);
    --foot-py:   clamp(40px, 4.4vw, 68px);

    background: var(--foot-bg);
    color: var(--foot-tx);
    font-family: var(--foot-font);
    border-top: 1px solid var(--tavu-black);
}

.tv-foot.is-light {
    --foot-bg:   var(--bg, #fff);
    --foot-tx:   var(--tx, #0a0a0a);
    --foot-mt:   var(--mt, #6b6b6b);
    --foot-line: var(--tavu-black);
}

.tv-foot-in {
    max-width: var(--wf-max-width, var(--max, 1320px));
    margin: 0 auto;
    padding: 0 var(--pad);
}

.tv-foot [hidden] { display: none !important; }

/* ── La grille en cases ── */
.tv-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "about links cta"
        "about links social";
    border-left: 1px solid var(--foot-line);
    border-right: 1px solid var(--foot-line);
}

.tv-foot-cell {
    min-width: 0;
    padding: var(--foot-py) var(--foot-px) calc(var(--foot-py) + 4px);
    border-bottom: 1px solid var(--foot-line);
}
.tv-foot-cell + .tv-foot-cell { border-left: 1px solid var(--foot-line); }
.tv-foot-about  { grid-area: about; }
.tv-foot-links  { grid-area: links; padding-left: 0; padding-right: 0; }
.tv-foot-cta    { grid-area: cta; }
.tv-foot-social { grid-area: social; }
.tv-foot-cta + .tv-foot-social { border-top: 0; }

/* Sans appel à participer, les réseaux prennent toute la colonne. */
.tv-foot-grid:not(:has(.tv-foot-cta:not([hidden]))) .tv-foot-social { grid-row: 1 / 3; }
.tv-foot-grid:not(:has(.tv-foot-social:not([hidden]))) .tv-foot-cta { grid-row: 1 / 3; }

/* Titres de case : petites capitales espacées, comme les étiquettes. */
.tv-foot .tv-foot-h {
    margin: 0 0 26px;
    font: 800 11px/1.2 var(--foot-font);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--foot-mt);
}
.tv-foot-links .tv-foot-h { padding: 0 var(--foot-px); }

/* ── Présentation ── */
.tv-foot .tv-foot-name {
    margin: 0 0 24px;
    font: 900 var(--tavu-l)/.95 var(--foot-font);
    letter-spacing: -.045em;
    text-transform: uppercase;
    color: var(--foot-tx);
}

.tv-foot-desc,
.tv-foot-text {
    max-width: 44ch;
    font-size: var(--foot-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--foot-mt);
}
.tv-foot-desc p,
.tv-foot-text p { margin: 0 0 1em; }
.tv-foot-desc p:last-child,
.tv-foot-text p:last-child { margin-bottom: 0; }
.tv-foot-desc a,
.tv-foot-text a { color: var(--foot-tx); text-decoration: underline; text-underline-offset: .18em; }

/* « Aujourd'hui : 3 sorties », comme dans la navbar. */
.tv-foot-today {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    padding: 0 0 0 14px;
    min-height: 44px;
    border: 1px solid var(--foot-tx);
    color: var(--foot-tx);
    font: 800 11.5px/1 var(--foot-font);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.tv-foot-today b {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--foot-tx);
    color: var(--foot-bg);
    font-weight: 900;
}
.tv-foot-today .tv-foot-arr { padding-right: 12px; margin-left: -4px; }
.tv-foot-today:hover { background: var(--foot-tx); color: var(--foot-bg); }
.tv-foot-dot {
    width: 9px;
    height: 9px;
    background: var(--wf-red, #d23c0f);
    animation: tv-blink 1.6s steps(2, jump-none) infinite;
}

/* ── Liens : des lignes pleine largeur ── */
.tv-foot-list,
.tv-foot-socials {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tv-foot-list { border-top: 1px solid var(--foot-line); }

.tv-foot-list a,
.tv-foot-socials a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--foot-lnk);
    text-decoration: none;
    transition: background .12s, color .12s, padding .15s;
}

.tv-foot-list a {
    min-height: 62px;
    padding: 0 var(--foot-px);
    border-bottom: 1px solid var(--foot-line);
    font: 700 clamp(17px, 1.3vw, 20px)/1.1 var(--foot-font);
    letter-spacing: -.01em;
}
.tv-foot-list li:last-child a { border-bottom: 0; }

.tv-foot-arr {
    flex: none;
    font-weight: 400;
    opacity: .5;
    transition: transform .15s, opacity .15s;
}

.tv-foot-list a:hover,
.tv-foot-list a:focus-visible {
    padding-left: calc(var(--foot-px) + 8px);
    background: var(--foot-tx);
    color: var(--foot-bg);
    outline: none;
}
.tv-foot-list a:hover .tv-foot-arr,
.tv-foot-socials a:hover .tv-foot-arr { opacity: 1; transform: translateX(4px); }

.tv-foot-empty { padding: 0 var(--foot-px); font-size: 13px; color: var(--foot-mt); }

/* ── Participer ── */
.tv-foot-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    margin-top: 30px;
    padding: 0 22px;
    border: 1px solid var(--foot-btn);
    background: var(--foot-btn);
    color: var(--foot-bg);
    font: 800 12px/1 var(--foot-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .12s, color .12s, box-shadow .15s, transform .15s;
}
.tv-foot-btn:hover {
    background: transparent;
    color: var(--foot-btn);
}

/* ── Réseaux : des boutons en capitales ── */
.tv-foot-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tv-foot-socials a {
    min-height: 44px;
    padding: 0 14px 0 16px;
    border: 1px solid var(--foot-line);
    font: 800 11.5px/1 var(--foot-font);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tv-foot-socials a:hover,
.tv-foot-socials a:focus-visible {
    border-color: var(--foot-tx);
    background: var(--foot-tx);
    color: var(--foot-bg);
    outline: none;
}

/* ── Le grand logotype ──
   Sa taille suit la largeur de l'écran et le nombre de lettres (--n,
   posé par le gabarit) : il remplit la ligne sans jamais déborder. */
.tv-foot-word {
    margin: 0;
    padding: clamp(40px, 5.5vw, 88px) 0 clamp(6px, 1vw, 14px);
    border-left: 1px solid var(--foot-line);
    border-right: 1px solid var(--foot-line);
    overflow: hidden;
    font: 900 min(calc((100vw - var(--pad) * 2) / (var(--n, 4) * .66)), 22rem)/.78 var(--foot-font);
    letter-spacing: -.065em;
    text-align: center;
    text-transform: uppercase;
    color: var(--foot-tx);
    white-space: nowrap;
    user-select: none;
}

/* ── La ligne du bas ── */
.tv-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--foot-line);
    border-bottom: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--foot-mt);
}
.tv-foot-bottom > * {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 16px var(--foot-px);
}
.tv-foot-bottom > * + * { border-left: 1px solid var(--foot-line); }
/* Texte courant (copyright, crédits) : un bloc, pas une rangée flex,
   sinon un lien se détacherait de sa phrase. */
.tv-foot-bottom > .tv-foot-copy,
.tv-foot-bottom > .tv-foot-credits { display: block; align-content: center; }
.tv-foot-copy { flex: 1 1 auto; }
.tv-foot-bottom a { color: var(--foot-tx); }
.tv-foot-copy a,
.tv-foot-credits a { text-decoration: underline; text-underline-offset: .18em; }

.tv-foot-edit,
.tv-foot-top {
    gap: 8px;
    font: 800 11px/1 var(--foot-font);
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.tv-foot-edit { color: var(--foot-mt) !important; }
.tv-foot-edit:hover,
.tv-foot-top:hover { background: var(--foot-tx); color: var(--foot-bg) !important; }

/* ── Tablette ── */
@media (max-width: 1024px) {
    .tv-foot-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "about about"
            "links cta"
            "links social";
    }
    .tv-foot-about { border-left: 0; }
    .tv-foot-links { border-left: 0 !important; }
}

/* ── Mobile : tout s'empile ── */
@media (max-width: 700px) {
    .tv-foot-in { padding: 0; }
    .tv-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "about" "links" "cta" "social";
        border: 0;
    }
    .tv-foot-grid .tv-foot-social,
    .tv-foot-grid .tv-foot-cta { grid-row: auto !important; }
    .tv-foot { --foot-px: var(--pad); --foot-py: 44px; }
    .tv-foot-cell { padding: var(--foot-py) var(--foot-px) calc(var(--foot-py) + 4px); border-left: 0 !important; }
    .tv-foot-links { padding: var(--foot-py) 0 0; }
    .tv-foot-list a { min-height: 60px; font-size: 18px; }
    .tv-foot-list li:last-child a { border-bottom: 0; }
    .tv-foot-desc,
    .tv-foot-text { font-size: min(var(--foot-body), 15px); }
    .tv-foot-btn { display: flex; justify-content: space-between; width: 100%; }
    .tv-foot-word { border: 0; padding-top: 36px; font-size: min(calc((100vw - 16px) / (var(--n, 4) * .66)), 22rem); }
    .tv-foot-bottom { border-left: 0; border-right: 0; }
    .tv-foot-bottom > * { flex: 1 1 100%; min-height: 0; padding: 18px var(--pad); }
    .tv-foot-bottom > * + * { border-left: 0; border-top: 1px solid var(--foot-line); }
    .tv-foot-edit,
    .tv-foot-top { flex: 1 1 50% !important; min-height: 56px !important; justify-content: center; }
    .tv-foot-edit + .tv-foot-top { border-left: 1px solid var(--foot-line); }
    .tv-foot-top { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-foot-dot { animation: none; }
    .tv-foot-arr { transition: none; }
}


/* ── 9. ACCESSIBILITÉ ────────────────────────────────────────────────── */

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--tx);
    outline-offset: 3px;
}

.stlh-hero :where(a, button, input):focus-visible {
    outline-color: var(--tavu-white);
}


/* ── 10. EN-TÊTE D'ARTICLE ───────────────────────────────────────────
   template-parts/article-header.php. Titre et cover visibles dès le
   chargement, sans jamais se superposer.
     · Ordinateur (≥ 1024px) : hero qui remplit l'écran sous la navbar,
       coupé d'un filet. Titre + chapô à gauche, cover pleine hauteur à
       droite.
     · En dessous : titre, chapô, puis la cover en bandeau.
   Sous le hero, la barre de repères en cases, comme la navbar. Sa
   hauteur (--ahead-bar) est retirée du hero pour qu'elle affleure en
   bas de l'écran : on voit qu'il y a une suite.
   Taille du titre selon sa longueur : .wf-ahead--l / --m / --s. */

.wf-ahead {
    --ahead-bar: 48px;
}

/* ── Hero ── */
.wf-ahead-hero {
    border-bottom: 1px solid var(--tavu-black);
}

.wf-ahead-text {
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
    padding: clamp(28px, 4.5vw, 64px) var(--pad) clamp(24px, 3vw, 40px);
}

body .wf-ahead .wf-article-title {
    margin: 0;
    font-size: clamp(2.4rem, 1rem + 4.6vw, 5.6rem);
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: var(--tx);
    overflow-wrap: anywhere;
    hyphens: auto;
}

body .wf-ahead--m .wf-article-title { font-size: clamp(2.1rem, 1rem + 3.6vw, 4.6rem); }
body .wf-ahead--s .wf-article-title { font-size: clamp(1.85rem, 1rem + 2.8vw, 3.8rem); }

body .wf-ahead .wf-article-lead {
    max-width: 58ch;
    margin: clamp(18px, 2vw, 28px) 0 0;
    font: 500 clamp(16px, 1.3vw, 19px)/1.45 var(--sans);
    color: var(--tx);
}

.wf-ahead-cover {
    position: relative;
    margin: 0;
    border-top: 1px solid var(--tavu-black);
    aspect-ratio: 16 / 10;
    background: var(--surf);
    overflow: hidden;
}

.wf-ahead-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wf-ahead-cover figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    max-width: 70%;
    padding: 7px 10px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 700 10.5px/1.35 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* Cover seule (titre masqué, pas de chapô) : pas de filet au-dessus. */
.wf-ahead-hero > .wf-ahead-cover:first-child { border-top: 0; }

@media (min-width: 1024px) {
    .wf-ahead.has-cover .wf-ahead-hero {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        min-height: clamp(540px,
            calc(100svh - var(--h-navbar, 60px) - var(--wp-admin--admin-bar--height, 0px) - var(--ahead-bar)),
            1000px);
    }

    /* Titre court : l'image prend plus de place. */
    .wf-ahead--l.has-cover .wf-ahead-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }

    .wf-ahead.has-cover .wf-ahead-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        max-width: none;
        margin: 0;
        padding: clamp(32px, 4vw, 64px) clamp(28px, 3vw, 56px) clamp(32px, 3.4vw, 56px) var(--pad);
        border-right: 1px solid var(--tavu-black);
    }

    /* Dans la demi-colonne, le titre se règle sur la largeur d'écran
       ET sur sa hauteur : un portable bas ne pousse pas le chapô dehors. */
    body .wf-ahead.has-cover .wf-article-title   { font-size: clamp(3rem, min(6vw, 11vh), 8rem); }
    body .wf-ahead--m.has-cover .wf-article-title { font-size: clamp(2.5rem, min(4.5vw, 8.4vh), 6rem); }
    body .wf-ahead--s.has-cover .wf-article-title { font-size: clamp(2rem, min(3.5vw, 6.6vh), 4.8rem); }

    .wf-ahead.has-cover .wf-ahead-cover {
        aspect-ratio: auto;
        border-top: 0;
    }

    .wf-ahead.has-cover .wf-ahead-hero > .wf-ahead-cover:only-child { grid-column: 1 / -1; }
}

/* ── Barre de repères ──
   Les filets entre cases sont le fond noir vu à travers un gap de 1px :
   ils suivent aussi les retours à la ligne sur mobile. */
.wf-ahead-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--tavu-black);
    border-bottom: 1px solid var(--tavu-black);
}

.wf-ahead-cell,
.wf-ahead-fill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ahead-bar);
    padding: 0 20px;
    background: var(--bg);
    color: var(--tx);
    font: 700 11.5px/1.2 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.wf-ahead-cell:first-child { padding-left: var(--pad); }

.wf-ahead-fill { flex: 1 1 0; padding: 0; }

body .wf-ahead .wf-article-cat {
    border: 0;
    border-radius: 0;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font-weight: 800;
    letter-spacing: .1em;
}

a.wf-ahead-cell { transition: background .12s, color .12s; }

a.wf-ahead-cell:hover {
    background: var(--tavu-black);
    color: var(--tavu-white);
}

body .wf-ahead a.wf-article-cat:hover {
    background: var(--bg);
    color: var(--tx);
}

.wf-ahead-talk { padding-right: var(--pad); }

@media (max-width: 700px) {
    .wf-ahead { --ahead-bar: 42px; }
    .wf-ahead-cell { flex: 1 1 auto; padding: 0 14px; font-size: 10.5px; }
    .wf-ahead-fill { display: none; }
}


/* ── 11. BLOCS, VERSION BRUTE ────────────────────────────────────────
   Les blocs wf/* gardent leur structure (leurs feuilles de style dans
   blocks/*), on leur retire le vocabulaire wireframe : pointillés,
   gris doux, fonds beiges, titres demi-gras. À la place : filets
   pleins, noir, 900 en capitales, boutons pleins.

   Les feuilles des blocs peuvent se charger APRÈS celle-ci (WordPress
   les imprime au premier rendu du bloc) : on prend donc la main par la
   spécificité (préfixe body), jamais par l'ordre de chargement. */

/* Intertitres d'article : noir 900, en capitales, sous un filet épais.
   Vaut pour le bloc wf/titre comme pour un titre Gutenberg. */
body .wf-article-content > :is(h2, .wf-titre-section) {
    padding-top: 14px;
    border-top: 4px solid var(--tavu-black);
    font-weight: 900;
    font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.8rem);
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

body .wf-article-content > h3 {
    font-weight: 800;
    letter-spacing: -.025em;
}

/* Les titres DANS un bloc ne prennent pas le filet des intertitres. */
body .wf-article-content [class*="wp-block-wf-"] h2 {
    padding-top: 0;
    border-top: 0;
}

/* Bandeau : il colle à ce qui l'entoure. Les réglages d'espacement de
   l'éditeur (wf-mt-*, wf-mb-*) le décollaient de 40 à 80px, ce qui
   laissait deux bandes blanches vides autour d'un élément qui n'a de
   sens que plein cadre. */
body .wp-block-wf-bandeau2.wf-marquee-outer {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Premier bloc de l'article : il se pose directement sous l'en-tête. */
body .wf-article-content:has(> .wp-block-wf-bandeau2:first-child) { margin-top: 0; }

/* Ce qui suit un bandeau respire, sans double espace. */
body .wf-article-content > .wp-block-wf-bandeau2 + * { margin-top: var(--wf-art-flow-md, 34px); }

body .wf-marquee-inner {
    height: 48px;
    border-top: 1px solid var(--tavu-black);
    border-bottom: 1px solid var(--tavu-black);
}

body .wf-marquee-outer .item {
    font-weight: 900;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

/* Split (image + texte) */
body .wf-split-title {
    font-weight: 900;
    line-height: .92;
    letter-spacing: -.05em;
    text-transform: uppercase;
}

body .wf-split-description,
body .wf-split-description p { color: var(--tx); }

body .wf-split-image-wrap img { border: 1px solid var(--tavu-black); border-radius: 0; }

/* Libellés de section (« // BANGER #2 ») : étiquette pleine. */
body .wf-section-label {
    display: inline-block;
    padding: 6px 9px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 800 11px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Boutons des blocs : pleins, noirs, carrés. Les couleurs choisies
   dans l'éditeur (variables --_btn-*) gardent la main : on ne change
   que la valeur par défaut, de « contour » à « plein ». */
body .wf-btn-brutal {
    border: 1px solid var(--_btn-bd, var(--tavu-black));
    border-radius: 0;
    background: var(--_btn-bg, var(--tavu-black));
    color: var(--_btn-tx, var(--tavu-white));
    font: 800 12px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

body .wf-btn-brutal:hover {
    background: var(--tavu-white);
    color: var(--_btn-bd, var(--tavu-black));
    border-color: var(--_btn-bd, var(--tavu-black));
}

/* Cartes : filets pleins, texte à gauche, titre fort. */
body .wf-cards-grid .wf-card {
    border: 1px solid var(--tavu-black);
    border-radius: 0;
    box-shadow: none;
}

body .wf-cards-grid .wf-card:hover { box-shadow: 6px 6px 0 var(--tavu-black); transform: translate(-3px, -3px); }

body .wf-card-image {
    border-bottom: 1px solid var(--tavu-black);
    background: var(--surf);
}

body .wf-cards--centered .wf-card-body { text-align: left; }

body .wf-card-title {
    font: 900 clamp(15px, 1.3vw, 18px)/1.1 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

body .wf-card-text { color: var(--tx); }

/* Fonctionnalités, coins, appel à l'action */
body :is(.wf-features-title, .wf-cta-title, .wf-corners-title, .wf-feature-title) {
    font-weight: 900;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

/* Couleur seulement, jamais border-style : chaque bloc dessine ses propres
   côtés. Un `border-style: solid` posé ici allumait aussi les côtés sans
   largeur déclarée, qui tombaient sur la valeur par défaut du navigateur
   (medium, 3px) : d'où le gros trait noir à gauche et en haut des coins. */
body .wf-feature-item,
body .wf-corners-cell { border-color: var(--tavu-black); }

body .wf-cta-section { border-top: 6px solid var(--tavu-black); }

@media (prefers-reduced-motion: reduce) {
    body .wf-cards-grid .wf-card:hover { transform: none; }
}


/* ── 12. PIED D'ARTICLE ──────────────────────────────────────────────
   Dans l'ordre de lecture :
     · les sujets (template-parts/article-footer.php), dans la colonne
       du texte, chaque case avec son nombre d'articles ;
     · « Lire aussi » (template-parts/article-related.php), trois cartes
       numérotées, en carrousel à glisser sous 860px ;
     · le bandeau de la rubrique, noir, pleine largeur, qui ferme la
       page juste avant le footer.
   Les commentaires s'intercalent entre les sujets et « Lire aussi »
   (section 13). */

.wf-afoot {
    max-width: calc(var(--wf-art-measure, 680px) + var(--pad) * 2);
    margin: clamp(56px, 6vw, 80px) auto 0;
    padding: 0 var(--pad);
}

.wf-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    padding-top: 14px;
    border-top: 4px solid var(--tavu-black);
}

.wf-topics-label {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 800 11px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wf-topics-list {
    display: contents;
    list-style: none;
}

.wf-topics-list li { margin: 0; }

.wf-topic {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--tavu-black);
    color: var(--tx);
    font: 800 12px/1 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: background .12s, color .12s;
}

.wf-topic-name { padding: 11px 12px; }

.wf-topic-count {
    display: flex;
    align-items: center;
    padding: 0 9px;
    border-left: 1px solid var(--tavu-black);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.wf-topic:hover {
    background: var(--tavu-black);
    color: var(--tavu-white);
}

.wf-topic:hover .wf-topic-count { border-left-color: var(--tavu-white); }

/* ── Lire aussi ── */
.wf-rel {
    max-width: calc(var(--wf-art-wide, 1080px) + var(--pad) * 2);
    margin: clamp(72px, 8vw, 112px) auto 0;
    padding: 0 var(--pad);
}

body .wf-rel-title {
    margin: 0;
    padding-top: 14px;
    border-top: 6px solid var(--tavu-black);
    font-size: var(--tavu-l);
    line-height: .95;
    text-transform: uppercase;
}

.wf-rel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    margin-top: clamp(20px, 2.4vw, 32px);
}

.wf-rel-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tavu-black);
    background: var(--bg);
    color: var(--tx);
    transition: transform .15s, box-shadow .15s;
}

.wf-rel-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 6px 6px 0 var(--tavu-black);
}

.wf-rel-thumb {
    position: relative;
    aspect-ratio: 3 / 2;
    border-bottom: 1px solid var(--tavu-black);
    background: var(--surf);
    overflow: hidden;
}

.wf-rel-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wf-rel-num {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px 10px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 900 14px/1 var(--sans);
    letter-spacing: -.02em;
}

.wf-rel-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px 18px;
}

.wf-rel-cat {
    padding: 5px 8px;
    border: 1px solid var(--tavu-black);
    font: 800 10px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

body .wf-rel-name {
    margin: 0;
    font: 900 clamp(17px, 1.35vw, 21px)/1.05 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
}

.wf-rel-meta {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    color: var(--mt);
    font: 700 10.5px/1.3 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Sous 860px : carrousel à glisser, la carte suivante dépasse pour
   montrer qu'il y en a d'autres. */
@media (max-width: 860px) {
    .wf-rel-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: min(78%, 340px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin-inline: calc(var(--pad) * -1);
        padding: 0 var(--pad) 10px;
        scroll-padding-inline: var(--pad);
        scrollbar-width: none;
    }
    .wf-rel-grid::-webkit-scrollbar { display: none; }
    .wf-rel-card { scroll-snap-align: start; }
    .wf-rel-card:hover { transform: none; box-shadow: none; }
}

/* ── Bandeau rubrique ── */
.wf-article:has(.wf-rubrique) { padding-bottom: 0; }

.wf-rubrique {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "kicker arrow"
        "name   arrow"
        "count  arrow";
    align-items: end;
    column-gap: 24px;
    margin-top: clamp(72px, 8vw, 112px);
    padding: clamp(28px, 4vw, 56px) var(--pad);
    background: var(--tavu-black);
    color: var(--tavu-white);
    transition: background .15s, color .15s;
}

.wf-rubrique-kicker,
.wf-rubrique-count {
    font: 800 12px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.wf-rubrique-kicker { grid-area: kicker; }
.wf-rubrique-count  { grid-area: count; opacity: .7; }

.wf-rubrique-name {
    grid-area: name;
    margin: 14px 0 16px;
    font: 900 clamp(3rem, 1rem + 8vw, 9rem)/.85 var(--sans);
    letter-spacing: -.055em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.wf-rubrique-arrow {
    grid-area: arrow;
    font: 900 clamp(3rem, 1rem + 8vw, 9rem)/.85 var(--sans);
    transition: transform .2s;
}

.wf-rubrique:hover {
    background: var(--bg);
    color: var(--tx);
    box-shadow: inset 0 1px 0 var(--tavu-black);
}

.wf-rubrique:hover .wf-rubrique-arrow { transform: translateX(10px); }


/* ── 13. COMMENTAIRES ────────────────────────────────────────────────
   comments.php. Deux colonnes dès 900px : le titre et son compteur à
   gauche (collés au scroll), la liste et le formulaire à droite. Sans
   commentaire, une invitation remplace la liste vide.
   Les règles de style.css (section 21) restent la base : on n'écrase
   ici que le vocabulaire (filets noirs, angles droits, pas de mono). */

body .wf-article-comments {
    max-width: calc(var(--wf-art-wide, 1080px) + var(--pad) * 2);
    margin: clamp(72px, 8vw, 112px) auto 0;
    padding: 0 var(--pad);
}

body .wf-article-comments::before { display: none; }

.wf-cmts {
    padding-top: 14px;
    border-top: 6px solid var(--tavu-black);
}

@media (min-width: 900px) {
    .wf-cmts {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
        gap: clamp(32px, 5vw, 72px);
    }

    .wf-cmts-head {
        position: sticky;
        top: calc(var(--h-navbar, 60px) + var(--wp-admin--admin-bar--height, 0px) + 24px);
        align-self: start;
    }
}

body .wf-cmts-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: var(--tavu-l);
    line-height: .95;
    text-transform: uppercase;
}

.wf-cmts-count {
    padding: 6px 9px;
    background: var(--tavu-black);
    color: var(--tavu-white);
    font: 900 .5em/1 var(--sans);
    letter-spacing: 0;
}

.wf-cmts-empty {
    max-width: 34ch;
    margin: 18px 0 0;
    font: 500 17px/1.45 var(--sans);
    color: var(--tx);
}

.wf-cmts-main { min-width: 0; }

@media (max-width: 899px) {
    .wf-cmts-main { margin-top: 28px; }
}

/* ── Liste ── */
.wf-cmts .commentlist { margin: 0; }

.wf-cmts .commentlist li.comment { border-bottom: 1px solid var(--tavu-black); }

.wf-cmts .commentlist .children { border-left: 2px solid var(--tavu-black); }

.wf-cmts .comment-author .avatar {
    border: 1px solid var(--tavu-black);
    border-radius: 0;
}

.wf-cmts .comment-author .fn {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: .9rem;
}

.wf-cmts :is(.comment-meta, .wf-cmts-nav, .nocomments) {
    font: 700 10.5px/1.4 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-cmts-nav {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.wf-cmts .comment-reply-link {
    border: 1px solid var(--tavu-black);
    border-radius: 0;
    color: var(--tx);
    font: 800 10.5px/1 var(--sans);
    letter-spacing: .08em;
}

.wf-cmts .comment-reply-link:hover {
    background: var(--tavu-black);
    border-color: var(--tavu-black);
    color: var(--tavu-white);
}

.wf-cmts .comment-awaiting-moderation {
    border-radius: 0;
    font: 700 10.5px/1.4 var(--sans);
}

/* ── Formulaire ── */
body .wf-cmts .comment-respond {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

body .wf-cmts .commentlist ~ .comment-respond {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--tavu-black);
}

body .wf-cmts .comment-reply-title {
    margin: 0;
    font: 900 clamp(20px, 1.8vw, 26px)/1 var(--sans);
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--tx);
}

.wf-cmts .comment-form { margin-top: 16px; }

.wf-cmts :is(.comment-notes, .logged-in-as, .comment-form-cookies-consent label) {
    font: 500 13px/1.5 var(--sans);
    letter-spacing: 0;
    color: var(--mt);
}

.wf-cmts .logged-in-as a { color: var(--tx); text-decoration: underline; }

.wf-cmts .comment-form label {
    font: 800 11px/1 var(--sans);
    letter-spacing: .1em;
    color: var(--tx);
}

body .wf-cmts .comment-form .comment-form-cookies-consent label {
    font: 500 13px/1.5 var(--sans);
    letter-spacing: 0;
    text-transform: none;
    color: var(--mt);
}

.wf-cmts .required { color: var(--tx); }

.wf-cmts :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
    background: var(--bg);
    border: 1px solid var(--tavu-black);
    border-radius: 0;
    transition: box-shadow .12s;
}

.wf-cmts :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
    border-color: var(--tavu-black);
    box-shadow: 4px 4px 0 var(--tavu-black);
}

/* Le texte d'abord : sans commentaire publié, le formulaire commence
   par la zone de saisie, les champs d'identité suivent. */
@media (max-width: 699px) {
    .wf-cmts .comment-form { display: flex; flex-direction: column; }
}
.wf-cmts :is(.comment-notes, .logged-in-as) { order: -2; }
.wf-cmts .comment-form-comment { order: -1; }

body .wf-cmts input[type="submit"] {
    padding: 15px 28px;
    background: var(--tavu-black);
    border: 1px solid var(--tavu-black);
    border-radius: 0;
    color: var(--tavu-white);
    font: 800 12px/1 var(--sans);
    letter-spacing: .1em;
}

body .wf-cmts input[type="submit"]:hover {
    background: var(--bg);
    border-color: var(--tavu-black);
    color: var(--tavu-black);
}

@media (prefers-reduced-motion: reduce) {
    .wf-rel-card:hover,
    .wf-rubrique:hover .wf-rubrique-arrow { transform: none; }
}


/* ── 14. TABLEAUX ET BLOC COINS ──────────────────────────────────────
   Deux blocs qui juraient avec le reste du site :

   · core/table : la grille complète de style.css (section 24), cadre,
     colonnes et fond teinté, faisait formulaire administratif. Et ses
     420px minimum (--wf-tbl-min) coupaient la dernière colonne sur
     mobile, sans rien pour signaler qu'il fallait faire défiler.
   · wf/corners : voir la correction de border-style en section 11.

   Version Tavu, commune aux deux : un filet noir de 2px en tête, des
   lignes fines entre les rangées, un filet noir de 1px pour fermer.
   Pas de colonnes, pas de cadre, pas d'angles arrondis.

   On surcharge style.css sans le toucher : chaque règle pèse un cran
   de plus grâce au `body` en tête. Le contrat « un filet, un seul
   propriétaire » de la section 24 reste vrai : les cellules ne
   dessinent que leur bord bas, le cadre de la <table> dessine le haut
   et le bas du tableau, et la dernière rangée rend son filet (règle de
   style.css, plus lourde, qu'on laisse gagner exprès).
─────────────────────────────────────────────────────────────────── */

body .entry-content .wp-block-table {
    --r: 0px;   /* les angles des cellules de coin lisent cette variable */

    /* Ombres de défilement. Les deux voiles couleur de fond suivent le
       contenu (local), les deux ombres restent collées aux bords de la
       <figure> (scroll). Au repos, chaque voile cache l'ombre de son
       côté : une ombre n'apparaît que s'il reste du tableau à voir
       dans cette direction. Sans effet quand le tableau tient. */
    background:
        linear-gradient(to right, var(--bg) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--bg) 30%, transparent) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), transparent) left center / 14px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), transparent) right center / 14px 100% no-repeat scroll;
}

body .entry-content .wp-block-table table {
    min-width: 0;   /* le tableau tient dans l'écran, il ne défile qu'en dernier recours */
    border: 0;
    border-top: 2px solid var(--tavu-black);
    border-bottom: 1px solid var(--tavu-black);
    border-radius: 0;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

/* Rangées : un filet fin, pas de colonnes. La première cellule colle
   au bord gauche, la dernière au bord droit : le tableau s'aligne sur
   la colonne de texte au lieu de flotter dans un cadre. */
body .entry-content .wp-block-table :is(th, td) {
    padding: 14px 16px 14px 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--tavu-black) 12%, transparent);
}

body .entry-content .wp-block-table :is(th, td):last-child {
    padding-right: 0;
}

/* En-tête : étiquette Tavu (petite, grasse, capitales espacées), sans
   fond. C'est le filet noir sous l'en-tête qui le détache. */
body .entry-content .wp-block-table thead th {
    padding-top: 12px;
    padding-bottom: 12px;
    background: transparent;
    border-bottom: 1px solid var(--tavu-black);
    font: 700 11px/1.3 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mt);
}

/* Première colonne : souvent la clé (année, nom). Un peu plus de poids. */
body .entry-content .wp-block-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

body .entry-content .wp-block-table td a {
    font-weight: 600;
}

/* Pied et cellules d'en-tête de ligne : sans fond teinté non plus. */
body .entry-content .wp-block-table :is(tbody th, tfoot th, tfoot td) {
    background: transparent;
}

@media (max-width: 600px) {
    body .entry-content .wp-block-table table {
        font-size: 14px;
    }

    body .entry-content .wp-block-table :is(th, td) {
        padding: 12px 12px 12px 0;
    }

    /* Sur mobile, un intitulé de colonne peut passer à la ligne : c'était
       lui qui imposait sa largeur à toute la colonne. */
    body .entry-content .wp-block-table thead th {
        white-space: normal;
        font-size: 10px;
    }
}

/* ── Bloc Coins ──
   Même grammaire que les tableaux : filet noir de 2px en tête, filet de
   1px en pied, et un numéro 01, 02, 03, 04 au-dessus de chaque titre,
   comme les étiquettes du reste du site. Les séparateurs internes
   restent ceux du bloc (blocks/wf-corners/style.css). */
body .wf-corners-grid {
    counter-reset: wf-corner;
    border-top: 2px solid var(--_corners-divider, var(--tavu-black));
    border-bottom: 1px solid var(--_corners-divider, var(--tavu-black));
}

body .wf-corners-cell {
    counter-increment: wf-corner;
}

body .wf-corners-cell::before {
    content: counter(wf-corner, decimal-leading-zero);
    font: 800 11px/1 var(--sans);
    letter-spacing: .12em;
    color: var(--_corners-text, var(--mt));
}

body .wf-corners-text {
    color: var(--_corners-text, var(--tx));
}

@media (max-width: 768px) {
    /* Dans un article sur mobile, le bloc s'aligne sur la colonne de
       texte : sa marge latérale le décalait de 16px par rapport aux
       paragraphes et aux tableaux. Sur bureau, on garde la marge : le
       bloc y est plus large que la colonne et elle le recentre. */
    body .wf-article-content .wf-corners-section {
        padding-left: 0;
        padding-right: 0;
    }

    body .wf-corners-cell {
        padding: 22px 0 26px;
        gap: 10px;
    }
}


/* ── 15. RUBRIQUES : EN-TÊTE COMPACT, VITRINE DU CATALOGUE ──────────────
   Une rubrique ne s'annonce plus en lettres de 9rem : on voit son nom,
   une ligne, et le contenu tout de suite (template-parts/archive-head.php,
   mode « compact »). Séries et Cinéma montrent ensuite les vitrines du
   plugin Streamlog (rangées d'affiches), puis les articles. */

.wfa-head.is-compact {
    padding: clamp(18px, 2.6vw, 30px) 0 clamp(16px, 2.2vw, 24px);
    background: var(--bg);
    border-bottom: var(--tavu-line);
}

.wfa-head.is-compact .wfa-crumbs {
    margin-bottom: 12px;
    font: 700 10.5px/1.4 var(--sans);
    letter-spacing: .1em;
}

.wfa-chead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px 32px;
}

.wfa-chead-text { min-width: 0; max-width: 72ch; }

.wfa-head.is-compact .wfa-title {
    font-size: clamp(28px, 1.2rem + 1.8vw, 44px);
    line-height: .95;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.wfa-cdesc {
    margin: 8px 0 0;
    font: 400 14.5px/1.45 var(--sans);
    color: var(--mt);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wfa-clinks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wfa-clink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--tx);
    font: 800 11.5px/1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tx);
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, color .12s;
}

.wfa-clink span { font-weight: 600; opacity: .65; }

.wfa-clink:hover,
.wfa-clink:focus-visible {
    background: var(--tx);
    color: var(--bg);
    outline: none;
}

/* La vitrine : pleine largeur du contenu, au-dessus des articles. */
.wfa-hub {
    padding-bottom: clamp(8px, 2vw, 20px);
}

/* Titre de la liste d'articles, quand l'en-tête est compact. */
.wfa-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 24px;
    margin-bottom: clamp(18px, 2.4vw, 28px);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tx);
}

.wfa-list-title {
    margin: 0;
    font: 900 clamp(22px, 1rem + 1.4vw, 34px)/1 var(--sans);
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.wfa-list-title span {
    margin-left: 6px;
    font-size: .5em;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--mt);
    vertical-align: .35em;
}

.wfa-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    font: 700 11px/1.4 var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--mt);
}

.wf-archive--hub .wfa-list { padding-top: clamp(30px, 4vw, 52px); }

@media (max-width: 700px) {
    .wfa-chead { align-items: flex-start; flex-direction: column; }
    .wfa-clinks { width: 100%; }
}


/* ── 16. PAGES : TITRE ALIGNÉ SUR LE CONTENU ─────────────────────────────
   page.php rend le titre hors du .container : il collait au bord gauche
   de l'écran, désaligné du texte (page Calendrier, par exemple). On lui
   donne la même largeur et les mêmes marges que le contenu. */

.page-template > .page-article > .entry-title {
    max-width: var(--wf-max-width, var(--max));
    margin: 0 auto;
    padding: clamp(28px, 4vw, 52px) var(--pad) clamp(10px, 1.6vw, 18px);
    font-size: var(--tavu-xl);
    line-height: .92;
    text-transform: uppercase;
}


/* ── 17. ACCUEIL : PLUS D'ARTICLES, BOUTON « TOUS LES ARTICLES » ────────
   Le journal de l'accueil passe de 9 à 15 articles : une vedette et deux
   à côté, quatre cartes, puis huit titres « Aussi » sur quatre colonnes.
   Il se termine par un grand bouton noir vers /articles/ (inc/wf-articles.php). */

.stlh-also--wide {
    border: 1px solid var(--bd);
    border-top: 0;
}

.stlh-also--wide .stlh-also-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 24px;
}

.stlh-also--wide .stlh-also-list a,
.stlh-also--wide .stlh-also-list li:first-child a { border-top: 1px solid var(--bd); }

.stlh-also--wide .stlh-also-list li:nth-child(-n+4) a { border-top: 0; }

.stlh-allposts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding: clamp(20px, 3vw, 34px) clamp(20px, 3vw, 36px);
    background: var(--tavu-black);
    color: var(--tavu-white);
    text-decoration: none;
    transition: background .15s, color .15s;
}

.stlh-allposts-txt { display: grid; gap: 8px; min-width: 0; }

.stlh-allposts-kicker {
    font: 800 11.5px/1 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .7;
}

.stlh-allposts-title {
    font: 900 var(--tavu-xl)/.9 var(--sans);
    letter-spacing: -.05em;
    text-transform: uppercase;
}

.stlh-allposts-arrow {
    flex: none;
    font: 400 clamp(36px, 5vw, 72px)/1 var(--sans);
    transition: transform .2s ease;
}

.stlh-allposts:hover,
.stlh-allposts:focus-visible {
    background: var(--tavu-white);
    color: var(--tavu-black);
    outline: 1px solid var(--tavu-black);
    outline-offset: -1px;
}

.stlh-allposts:hover .stlh-allposts-arrow { transform: translateX(8px); }

@media (max-width: 1100px) {
    body .stlh-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .stlh-posts-grid > :nth-child(3) { border-left: 0; }
    body .stlh-posts-grid > :nth-child(n+3) { border-top: 1px solid var(--bd); }
    .stlh-also--wide .stlh-also-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stlh-also--wide .stlh-also-list li:nth-child(-n+4) a { border-top: 1px solid var(--bd); }
    .stlh-also--wide .stlh-also-list li:nth-child(-n+2) a { border-top: 0; }
}

@media (max-width: 700px) {
    body .stlh-posts-grid { grid-template-columns: minmax(0, 1fr); }
    body .stlh-posts-grid > * + * { border-left: 0; border-top: 1px solid var(--bd); }
    .stlh-also--wide .stlh-also-list { grid-template-columns: minmax(0, 1fr); }
    .stlh-also--wide .stlh-also-list li:nth-child(n) a { border-top: 1px solid var(--bd); }
    .stlh-also--wide .stlh-also-list li:first-child a { border-top: 0; }
}