/* =====================================================
   TALACOTE COMPONENTS — Buttons, Cards, Forms, Modals
===================================================== */

/* =====================================================
   LISIBILITÉ GLOBALE — texte sur fond image
===================================================== */

/* Fond sombre opaque derrière TOUT le contenu article */
.tc-section.tc-article .tc-container {
    background: rgba(6, 10, 22, 0.88) !important;
    border-radius: 16px;
    padding: 32px 24px;
}

/* Forcer couleur + ombre sur TOUT le texte article, y compris inline Gutenberg */
.tc-section.tc-article p,
.tc-section.tc-article li,
.tc-section.tc-article em,
.tc-section.tc-article strong,
.tc-section.tc-article span,
.tc-section.tc-article h1,
.tc-section.tc-article h2,
.tc-section.tc-article h3,
.tc-section.tc-article h4 {
    color: #e8f0ff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85) !important;
}

/* Cibler les paragraphes Gutenberg avec couleur inline */
.tc-section.tc-article .wp-block-paragraph[style*="color"],
.tc-section.tc-article p[style*="color"] {
    color: #d4e4ff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9) !important;
}

/* Callouts / blockquotes */
.tc-section.tc-article .wp-block-quote,
.tc-section.tc-article blockquote {
    background: rgba(255, 255, 255, 0.06);
    border-left: 3px solid var(--tc-green);
    padding: 12px 18px;
    border-radius: 6px;
}

.tc-section.tc-article em {
    font-style: italic;
}

/* Front-page sous-textes */
.tc-proof__text,
.tc-tool-card__desc {
    color: #c8d8f0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* =====================================================
   ARTICLE — Footer complet (breadcrumb, meta, share…)
===================================================== */

/* Breadcrumb */
.tc-article__breadcrumb {
    margin-bottom: var(--tc-space-lg);
}
.tc-article__breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    color: var(--tc-text-muted);
}
.tc-article__breadcrumb-list a {
    color: var(--tc-green);
    text-decoration: none;
}
.tc-article__breadcrumb-list a:hover { text-decoration: underline; }
.tc-article__breadcrumb-sep { color: var(--tc-text-muted); }
.tc-article__breadcrumb-current { color: var(--tc-text-muted); }

/* Meta bar (date + lecture) */
.tc-article__meta {
    display: flex;
    gap: var(--tc-space-md);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--tc-space-xl);
    padding-top: var(--tc-space-md);
    border-top: 1px solid rgba(255,255,255,.08);
    font-size: 13px;
    color: var(--tc-text-muted);
}

/* Tags */
.tc-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: var(--tc-space-md);
}
.tc-article__tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    font-size: 12px;
    color: var(--tc-text-muted);
    text-decoration: none;
    transition: all .2s;
}
.tc-article__tag:hover {
    background: var(--tc-green);
    color: #041a09;
    border-color: var(--tc-green);
}

/* Share bar */
.tc-article__share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--tc-space-lg);
    padding: var(--tc-space-md) var(--tc-space-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--tc-radius);
}
.tc-article__share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tc-text-muted);
    margin-right: 4px;
}
.tc-article__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}
.tc-article__share-btn--x   { background: #000; color: #fff; }
.tc-article__share-btn--fb  { background: #1877f2; color: #fff; }
.tc-article__share-btn--wa  { background: #25d366; color: #fff; }
.tc-article__share-btn:hover { opacity: .85; transform: translateY(-1px); }

/* Prev / Next navigation */
.tc-article__nav {
    margin-top: var(--tc-space-xl);
    padding-top: var(--tc-space-lg);
    border-top: 1px solid rgba(255,255,255,.08);
}
.tc-article__nav-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tc-space-md);
}
@media (max-width: 600px) {
    .tc-article__nav-inner { grid-template-columns: 1fr; }
}
.tc-article__nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--tc-space-md) var(--tc-space-lg);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--tc-radius);
    text-decoration: none;
    transition: all .2s;
    min-height: 72px;
}
.tc-article__nav-link:hover {
    background: rgba(57,255,20,.06);
    border-color: var(--tc-green);
}
.tc-article__nav-link--next {
    justify-content: flex-end;
    /* Tâche 30: text-align: end (logical) so it anchors to the far
       edge in both LTR and RTL — was `right` which mis-anchored to
       the visually-trailing edge in Arabic. */
    text-align: end;
}
.tc-article__nav-arrow {
    font-size: 20px;
    color: var(--tc-green);
    flex-shrink: 0;
}
.tc-article__nav-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tc-article__nav-text small {
    font-size: 11px;
    color: var(--tc-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.tc-article__nav-text strong {
    font-size: 14px;
    color: var(--tc-text);
    line-height: 1.35;
}

/* CTA Simulateur */
.tc-article__cta {
    margin-top: var(--tc-space-xl);
}
.tc-article__cta-inner {
    display: flex;
    align-items: center;
    gap: var(--tc-space-lg);
    padding: var(--tc-space-lg) var(--tc-space-xl);
    background: linear-gradient(135deg, rgba(57,255,20,.08) 0%, rgba(11,16,32,.8) 100%);
    border: 1px solid var(--tc-green);
    border-radius: var(--tc-radius-lg, 16px);
}
@media (max-width: 600px) {
    .tc-article__cta-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--tc-space-md);
    }
}
.tc-article__cta-icon {
    font-size: 36px;
    flex-shrink: 0;
}
.tc-article__cta-text {
    flex: 1;
}
.tc-article__cta-text strong {
    display: block;
    font-size: 17px;
    color: var(--tc-text);
    margin-bottom: 4px;
}
.tc-article__cta-text p {
    font-size: 13px;
    color: var(--tc-text-muted);
    margin: 0;
}

/* Supprimer tout lien/bouton WordPress vers anciennes pages
   (guides, paris-sportifs-pour-les-nuls, nuls) */
a[href*="guides"]:not([href*="talacote.com/en/strategies"]):not([href*="talacote.com/strategies"]):not([href*="betting-guide"]):not([href*="kalender-guide"]),
a[href*="paris-sportifs-pour-les-nuls"],
a[href*="pour-les-nuls"],
a[href*="/nuls"] {
    display: none !important;
}

/* Masquer le menu primaire WordPress / Astra (desktop + mobile) */
.main-navigation,
.ast-main-header-bar-wrap .main-navigation,
#ast-desktop-header .main-navigation,
.ast-primary-menu-area,
.ast-header-custom-item .ast-primary-menu-area,
/* Mobile Astra */
#ast-mobile-header,
.ast-mobile-header-wrap,
.ast-mobile-header-content,
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .ast-primary-menu-area,
.ast-header-break-point #ast-hf-menu-1,
.ast-header-break-point .main-navigation,
.ast-mobile-popup-wrapper,
.ast-mobile-header-bar,
.menu-toggle,
.ast-menu-toggle,
.ast-mobile-menu-buttons,
button.ast-mobile-menu-trigger-btn,
.header-main-layout-1 .ast-mobile-header-bar {
    display: none !important;
}

/* ---- BUTTONS ---- */
.tc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 14px 28px;
    border-radius: var(--tc-radius);
    font-size: 15px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: all var(--tc-transition);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}

.tc-btn:hover {
    transform: translateY(-1px);
}

.tc-btn:active {
    transform: translateY(0);
}

.tc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.tc-btn--green {
    background: var(--tc-green);
    color: #041a09;
    box-shadow: var(--tc-shadow-glow-green);
}
.tc-btn--green:hover {
    background: var(--tc-green-dark);
    color: #041a09;
}

.tc-btn--gold {
    background: var(--tc-gold);
    color: #1a1200;
    box-shadow: var(--tc-shadow-glow-gold);
}
.tc-btn--gold:hover {
    background: var(--tc-gold-dark);
    color: #1a1200;
}

.tc-btn--outline {
    background: transparent;
    border: 2px solid var(--tc-line-strong);
    color: var(--tc-text);
}
.tc-btn--outline:hover {
    border-color: var(--tc-green);
    color: var(--tc-green);
}

.tc-btn--sm {
    min-height: 36px; /* #8: actual small button, touch override in mobile.css */
    padding: 10px 20px;
    font-size: 13px;
}

.tc-btn--lg {
    padding: 18px 36px;
    font-size: 16px;
}

.tc-btn--block {
    width: 100%;
}

/* ---- CARDS ---- */
.tc-card {
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: var(--tc-space-lg);
    transition: all var(--tc-transition);
}

.tc-card:hover {
    border-color: var(--tc-line-strong);
    box-shadow: var(--tc-shadow);
}

.tc-card--interactive:hover {
    border-color: var(--tc-green);
    transform: translateY(-2px);
}

/* ---- GLOSSARY AUTO CROSS-LINKS ----
 * Tâche 51 follow-up (Apr 2026): inline links injected by tc_glossary_link_text()
 * across match-prediction body text point at /lexique/#{slug}. Subtle dotted
 * underline distinguishes them from regular hyperlinks (Wikipedia-style
 * "term-of-art" convention). No color override — inherits the parent's
 * link color so they read coherently inside the surrounding paragraph. */
.tc-glossary-link {
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--tc-line-strong);
    cursor: help;
    transition: text-decoration-color var(--tc-transition);
}
.tc-glossary-link:hover {
    text-decoration-color: var(--tc-green);
}

/* ---- BADGES ---- */
.tc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--tc-radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-badge--green {
    background: var(--tc-green-glow);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: var(--tc-green);
}

.tc-badge--gold {
    background: var(--tc-gold-glow);
    border: 1px solid rgba(245, 196, 81, 0.2);
    color: var(--tc-gold);
}

.tc-badge--premium {
    background: linear-gradient(135deg, rgba(245, 196, 81, 0.15), rgba(34, 197, 94, 0.15));
    border: 1px solid rgba(245, 196, 81, 0.3);
    color: var(--tc-gold);
}

/* ---- FORMS ---- */
.tc-input {
    width: 100%;
    min-height: 44px;
    padding: 14px 18px;
    border-radius: var(--tc-radius);
    border: 1px solid var(--tc-line);
    background: var(--tc-soft);
    color: var(--tc-text);
    font-size: 15px;
    font-family: var(--tc-font);
    outline: none;
    transition: border-color var(--tc-transition);
}

.tc-input:focus {
    border-color: var(--tc-green);
}

.tc-input::placeholder {
    color: var(--tc-muted);
}

.tc-label {
    display: block;
    color: var(--tc-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.tc-form-group {
    margin-bottom: var(--tc-space-md);
}

/* ---- TOAST NOTIFICATIONS ---- */
.tc-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--tc-z-toast);
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

[dir="rtl"] .tc-toast-container {
    right: auto;
    left: 20px;
}

.tc-toast {
    padding: 14px 20px;
    border-radius: var(--tc-radius);
    font-size: 14px;
    font-weight: 600;
    pointer-events: auto;
    animation: tc-toast-in 0.3s ease;
    max-width: 360px;
}

.tc-toast--success {
    background: var(--tc-green-glow);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: var(--tc-green);
}

.tc-toast--error {
    background: var(--tc-red-glow);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: var(--tc-red);
}

.tc-toast--info {
    background: var(--tc-blue-glow);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--tc-blue);
}

@keyframes tc-toast-in {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* #18: RTL toast slides from left */
[dir="rtl"] .tc-toast {
    animation-name: tc-toast-in-rtl;
}
@keyframes tc-toast-in-rtl {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---- PREMIUM CTA ---- */
.tc-premium-cta {
    background: linear-gradient(135deg, rgba(245, 196, 81, 0.08), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(245, 196, 81, 0.2);
    border-radius: var(--tc-radius-lg);
    padding: var(--tc-space-xl);
    text-align: center;
}

.tc-premium-cta h3 {
    color: var(--tc-gold);
    margin-bottom: var(--tc-space-sm);
}

.tc-premium-cta p {
    margin-bottom: var(--tc-space-lg);
}

/* ---- STICKY CTA (mobile + desktop) ---- */
.tc-sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tc-panel);
    border-top: 1px solid var(--tc-line);
    padding: 12px var(--tc-container-padding);
    z-index: var(--tc-z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* ---- PROGRESS BAR ---- */
.tc-progress {
    width: 100%;
    height: 8px;
    background: var(--tc-soft);
    border-radius: var(--tc-radius-full);
    overflow: hidden;
}

.tc-progress__bar {
    height: 100%;
    border-radius: var(--tc-radius-full);
    transition: width var(--tc-transition-slow);
}

.tc-progress__bar--green { background: var(--tc-green); }

/* =====================================================
   GLOBAL LAYOUT — Header, Nav, Footer, Lang Switcher
   These styles are loaded on ALL pages
===================================================== */

/* #2: body background removed — set in base.css as opaque #040810 */
/* #5: padding-bottom now conditional in footer.php for non-premium only */

/* ---- TOP BANNER (Galaxy) ---- */
.tc-top-banner {
    width: 100%;
    background: transparent;
    text-align: center;
    overflow: hidden;
    line-height: 0;
}

.tc-top-banner a {
    display: block;
}

.tc-top-banner__img {
    width: 100%;
    max-width: 700px;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .tc-top-banner__img {
        max-width: 400px;
    }
}

@media (max-width: 480px) {
    .tc-top-banner__img {
        max-width: 280px;
    }
}

/* ---- HEADER ---- */
.tc-header {
    position: sticky;
    top: 0;
    z-index: var(--tc-z-sticky);
    background: rgba(6, 10, 22, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(34, 197, 94, 0.25);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

.tc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
    gap: 16px;
}

.tc-header__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.tc-header__logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .tc-header__logo-img {
        height: 46px;
    }
}

@media (min-width: 1024px) {
    .tc-header__logo-img {
        height: 50px;
    }
}

.tc-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Mobile lang-switcher — May 2026 rework: previously the switcher was
   hidden entirely on mobile (display:none) which forced visitors who
   landed in the wrong language to scroll all the way to the footer or
   bounce. Pattern audit (Stripe / Booking / Airbnb mobile): all keep a
   compact flag-only trigger visible in the header.

   New behaviour: the trigger stays visible at a slimmer size, showing
   ONLY the country flag (the FR/EN/etc code + chevron are hidden so it
   fits next to the avatar + hamburger). Tap → full dropdown with names
   and codes for selection. The mobile.css block at line ~571 that hid
   the flag and kept the code is now superseded by the inverse rules
   here. */
@media (max-width: 767px) {
    .tc-header__actions .tc-lang-switcher {
        display: inline-block;
    }
    .tc-header__actions .tc-lang-switcher__trigger {
        padding: 4px 6px;
        gap: 0;
        font-size: 16px; /* sized for the flag emoji */
        line-height: 1;
    }
    /* Show only the flag — hide the FR/EN code + the chevron SVG */
    .tc-header__actions .tc-lang-switcher__trigger > .tc-lang-switcher__code,
    .tc-header__actions .tc-lang-switcher__trigger > svg {
        display: none;
    }
    .tc-header__actions .tc-lang-switcher__trigger > .tc-lang-switcher__flag {
        display: inline-block;
        font-size: 18px;
    }
    .tc-header__actions {
        gap: 8px;
    }
}

/* ---- NAVIGATION ---- */
.tc-nav {
    display: none;
}

@media (min-width: 1024px) {
    .tc-nav {
        display: flex;
        flex: 1;
        justify-content: center;
    }
}

.tc-nav__menu {
    display: flex;
    list-style: none;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.tc-nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 6px 13px;
    color: #e8f0ff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--tc-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    transition: all var(--tc-transition);
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.01em;
}

.tc-nav__link:hover {
    color: #ffffff !important;
    background: rgba(57, 255, 20, 0.12);
    border-color: rgba(57, 255, 20, 0.35);
}

.tc-nav__link--premium {
    color: var(--tc-gold) !important;
    background: rgba(245, 196, 81, 0.10);
    border-color: rgba(245, 196, 81, 0.30);
}

.tc-nav__link--premium:hover {
    color: var(--tc-gold) !important;
    background: rgba(245, 196, 81, 0.18);
    border-color: rgba(245, 196, 81, 0.55);
}

/* Nav icon wrapper — SaaS-design rework May 2026: holds an SVG via
   tc_icon() instead of an emoji. Wrapper kept so the desktop-hidden
   rule below still works (icons are mobile-only by design). */
.tc-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tc-text);
}

.tc-nav__icon .tc-icon {
    width: 18px;
    height: 18px;
}

@media (min-width: 1024px) {
    .tc-nav__icon {
        display: none;
    }
    .tc-nav__item--mobile {
        display: none;
    }
}

/* Mobile menu */
@media (max-width: 1023px) {
    .tc-nav__menu {
        position: fixed;
        top: 0;
        right: -300px;
        width: 280px;
        /* Mobile viewport height nuances — fix May 2026 after UX
           feedback "on voit pas le bas du menu, on peut pas scroller".
             - 100vh on mobile Chrome / Safari counts the URL bar area
               in the viewport, so the last items of the menu fell
               BELOW the visible region and couldn't be reached.
             - 100dvh ("dynamic viewport height") excludes the chrome,
               giving us the actual usable area. Newer browsers; we
               keep 100vh as a fallback for older ones.
             - Bottom padding includes env(safe-area-inset-bottom) for
               iPhones with home-indicator gesture bars + a generous
               40px so the last item never sits flush against the
               screen edge. */
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        background: var(--tc-panel);
        border-left: 1px solid var(--tc-line);
        flex-direction: column;
        padding: 80px 20px calc(40px + env(safe-area-inset-bottom, 0px));
        gap: 4px;
        z-index: var(--tc-z-modal);
        transition: right 0.3s ease;
        overflow-y: auto;
        /* iOS momentum scroll for older Safari versions where touch
           scroll inside fixed-position containers needs this hint. */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    [dir="rtl"] .tc-nav__menu {
        right: auto;
        left: -300px;
        border-left: none;
        border-right: 1px solid var(--tc-line);
    }

    .tc-nav__menu.active {
        right: 0;
    }

    [dir="rtl"] .tc-nav__menu.active {
        left: 0;
    }

    .tc-nav__link {
        padding: 14px 16px;
        font-size: 15px;
    }

    .tc-nav__icon {
        display: inline;
    }

    .tc-nav__item--mobile {
        display: block;
        border-top: 1px solid var(--tc-line);
        padding-top: 12px;
        margin-top: 12px;
    }
}

.tc-nav__overlay {
    display: none;
}

.tc-nav__overlay.active {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--tc-z-modal) - 1);
}

/* When menu is open, bump header z-index above the overlay
   so the menu inside the header can receive clicks */
body.tc-menu-open .tc-header {
    z-index: calc(var(--tc-z-modal) + 1);
}

/* Hamburger */
.tc-nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
}

@media (min-width: 1024px) {
    .tc-nav__toggle {
        display: none;
    }
}

.tc-nav__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--tc-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.tc-nav__toggle.active span:nth-child(1) {
    transform: rotate(45deg) translateY(7px);
}

.tc-nav__toggle.active span:nth-child(2) {
    opacity: 0;
}

.tc-nav__toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translateY(-7px);
}

/* ---- LANGUAGE SWITCHER ---- */
.tc-lang-switcher {
    position: relative;
}

.tc-lang-switcher__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 14px;
    background: var(--tc-soft);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius-full);
    color: var(--tc-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--tc-transition);
}

.tc-lang-switcher__trigger:hover {
    border-color: var(--tc-line-strong);
}

.tc-lang-switcher__code {
    font-weight: 700;
}

.tc-lang-switcher__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    width: 200px;
    max-height: 320px;
    overflow-y: auto;
    z-index: var(--tc-z-dropdown);
    display: none;
    box-shadow: var(--tc-shadow-lg);
}

[dir="rtl"] .tc-lang-switcher__dropdown {
    right: auto;
    left: 0;
}

.tc-lang-switcher__dropdown.active {
    display: block;
    animation: tc-dropdown-in 0.2s ease;
}

@keyframes tc-dropdown-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tc-lang-switcher__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 14px;
    color: var(--tc-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: all var(--tc-transition);
    border-bottom: 1px solid var(--tc-line);
}

.tc-lang-switcher__item:last-child {
    border-bottom: none;
}

.tc-lang-switcher__item:hover,
.tc-lang-switcher__item.active {
    background: var(--tc-green-glow);
    color: var(--tc-green);
}

.tc-lang-switcher__item-code {
    font-size: 11px;
    font-weight: 700;
    color: var(--tc-muted);
}

/* ---- FOOTER ---- */
.tc-footer {
    background: var(--tc-bg-alt);
    border-top: 1px solid var(--tc-line);
    padding: var(--tc-space-2xl) 0 var(--tc-space-xl);
    margin-top: auto;
}

.tc-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tc-space-xl);
    margin-bottom: var(--tc-space-xl);
}

@media (min-width: 480px) {
    .tc-footer__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .tc-footer__grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

.tc-footer__logo {
    margin-bottom: var(--tc-space-md);
}

.tc-footer__about {
    color: var(--tc-muted);
    font-size: 13px;
    line-height: 1.7;
}

.tc-footer__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tc-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--tc-space-md);
}

.tc-footer__links {
    list-style: none;
    padding: 0;
}

.tc-footer__links li {
    margin-bottom: 8px;
}

.tc-footer__links a {
    color: var(--tc-muted);
    font-size: 14px;
    transition: color var(--tc-transition);
    text-decoration: none;
}

.tc-footer__links a:hover {
    color: var(--tc-green);
}

/* ---- FOOTER LANGUAGE BAR ---- */
.tc-footer__langs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    padding: var(--tc-space-lg) 0;
    border-top: 1px solid var(--tc-line);
}

.tc-footer__lang {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: var(--tc-radius-full);
    border: 1px solid transparent;
    font-size: 12px;
    color: var(--tc-muted);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.tc-footer__lang:hover {
    border-color: var(--tc-line);
    color: var(--tc-text);
    background: var(--tc-panel);
}

.tc-footer__lang--active {
    border-color: var(--tc-gold);
    color: var(--tc-gold);
    font-weight: 600;
}

.tc-footer__lang-name {
    font-size: 11px;
}

/* ---- FOOTER BOTTOM ---- */
.tc-footer__bottom {
    border-top: 1px solid var(--tc-line);
    padding-top: var(--tc-space-lg);
    text-align: center;
}

.tc-footer__bottom p {
    color: var(--tc-muted);
    font-size: 12px;
}

/* ---- TOOL CARDS ---- */
.tc-tool-card {
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: var(--tc-space-lg);
    text-align: center;
    transition: all var(--tc-transition);
    text-decoration: none;
    display: block;
}

.tc-tool-card:hover {
    border-color: var(--tc-green);
    transform: translateY(-4px);
    box-shadow: var(--tc-shadow-glow-green);
}

/* =====================================================================
   ICON SYSTEM (May 2026) — base class for SVG icons rendered via the
   tc_icon() helper. Replaces emoji-as-icon usage across the UI to ship
   the visual polish of a real SaaS (Notion / Linear / Vercel). Colour
   inherits from the parent via currentColor; size defaults from the
   SVG width/height attrs set by tc_icon().
   See inc/icon-system.php for usage / scope.
===================================================================== */
.tc-icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.125em; /* aligns with cap-height for inline text */
}

.tc-tool-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--tc-green-glow);
    color: var(--tc-green);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--tc-space-md);
}

.tc-tool-card__icon .tc-icon {
    width: 28px;
    height: 28px;
}

.tc-tool-card__title {
    font-size: 18px;
    font-weight: 800;
    color: var(--tc-text);
    margin-bottom: var(--tc-space-sm);
}

.tc-tool-card__desc {
    color: var(--tc-muted);
    /* Audit fix #12 (Apr 2026): bumped from 13px → 14px desktop /
       15px mobile to meet WCAG 2.2 readable-text guidance and the
       INP-friendly tap-target size. 13px on a 360 px viewport
       was failing the readability heuristic. */
    font-size: 14px;
    line-height: 1.6;
}
@media (max-width: 600px) {
    .tc-tool-card__desc {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* Scroll animation
   May 2026 — added a CSS-only fallback so .tc-animate elements ALWAYS
   become visible even if the JS scroll observer never fires (script
   blocked by CSP/extension, JS error early in the bundle, slow client
   that never reaches DOMContentLoaded etc.). Symptom that prompted this
   fix: home page rendered "Accès rapide" header with a giant empty space
   before "Pourquoi Talacote ?" because the 3 tool cards were stuck at
   opacity:0 forever. The keyframe below kicks in after 800 ms, animates
   to visible, and is overridden by .tc-visible (set by JS) when the
   observer DOES work — so the fast-path stays unchanged for 99% of
   visitors and the 1% with a broken JS environment also see content. */
.tc-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    animation: tc-animate-fallback 0.5s ease 0.8s forwards;
}

.tc-animate.tc-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none; /* JS path takes over */
}

@keyframes tc-animate-fallback {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Respect prefers-reduced-motion — show immediately, no transition */
@media (prefers-reduced-motion: reduce) {
    .tc-animate {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

/* =====================================================
   SEO TOOL LANDING PAGE COMPONENTS
===================================================== */

/* Snippet Block — Google featured snippet + IA extract */
.tc-snippet-block {
    background: rgba(34, 197, 94, 0.06);
    border-left: 4px solid var(--tc-green);
    padding: 16px 20px;
    border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
}
.tc-snippet-block strong { color: var(--tc-text); }

/* Instant Answer — vocal + IA direct answer */
.tc-instant-answer {
    background: rgba(245, 196, 81, 0.06);
    border-left: 4px solid var(--tc-gold);
    padding: 14px 20px;
    border-radius: 0 var(--tc-radius) var(--tc-radius) 0;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.6;
}

/* Micro-proof + engagement + dynamic signals */
.tc-micro-proof {
    text-align: center;
    color: var(--tc-green);
    font-size: 14px;
    font-weight: 600;
    margin: 16px 0 4px;
}
.tc-engagement {
    text-align: center;
    color: var(--tc-muted);
    font-size: 13px;
    margin: 0 0 4px;
}
.tc-dynamic {
    text-align: center;
    color: var(--tc-muted);
    font-size: 12px;
    font-style: italic;
    margin: 0 0 24px;
}

/* Quick calc table */
.tc-quick-calc {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 32px;
}
.tc-quick-calc th {
    background: var(--tc-panel);
    color: var(--tc-green);
    padding: 12px 16px;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--tc-green);
}
.tc-quick-calc td {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px solid var(--tc-line);
    font-size: 15px;
    color: var(--tc-text);
}
.tc-quick-calc tr:nth-child(even) td {
    background: rgba(255,255,255,0.02);
}

/* HowTo steps */
.tc-howto-steps {
    padding-left: 20px;
    margin: 16px 0 32px;
}
.tc-howto-steps li {
    padding: 8px 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--tc-text-secondary);
}

/* SEO content wrapper */
.tc-seo-content {
    max-width: 800px;
    margin: 0 auto;
}
.tc-seo-content h2 {
    margin-top: 40px;
    margin-bottom: 16px;
    font-size: 22px;
    color: var(--tc-text);
}
.tc-seo-content h3 {
    margin-top: 24px;
    margin-bottom: 8px;
    font-size: 17px;
    color: var(--tc-green);
}
.tc-seo-content p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--tc-text-secondary);
    margin-bottom: 16px;
}
.tc-seo-content ul, .tc-seo-content ol {
    margin-bottom: 24px;
}
.tc-seo-content li {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tc-text-secondary);
    padding: 4px 0;
}

/* Related tools grid */
.tc-related-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 20px 0 32px;
}
.tc-related-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    padding: 14px 16px;
    text-decoration: none;
    color: var(--tc-text);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all var(--tc-transition);
}
.tc-related-tool:hover {
    border-color: var(--tc-green);
    color: var(--tc-green);
    background: rgba(34, 197, 94, 0.05);
}

/* Entity reinforcement text */
.tc-entity-text {
    font-size: 14px;
    color: var(--tc-muted);
    line-height: 1.7;
    margin: 32px 0 16px;
    padding: 16px;
    border-top: 1px solid var(--tc-line);
}

/* Freshness signal */
.tc-update {
    font-size: 12px;
    color: var(--tc-muted);
    /* Tâche 30: logical end → far edge in any direction (was `right`) */
    text-align: end;
    margin: 24px 0 8px;
}

/* SEO invisible elements */
.tc-hidden-cta,
.tc-keyword-focus {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   TABLET (600px – 767px)
   Bridges phablet and desktop — 2-column layouts,
   slightly larger type, comfortable spacing.
===================================================== */
@media (min-width: 600px) and (max-width: 767px) {
    /* Container padding — slightly wider than mobile */
    .tc-container { padding: 0 28px; }

    /* Footer: 2-column instead of stacking */
    .tc-footer__grid { grid-template-columns: 1fr 1fr; }

    /* Related tools: 3 per row instead of auto-fit */
    .tc-related-tools { grid-template-columns: repeat(3, 1fr); }

    /* Tool card grid: 2 columns */
    .tc-grid--3 { grid-template-columns: 1fr 1fr; }

    /* Header logo: tablet size */
    .tc-header__logo-img { height: 44px; }

    /* Sections: breathing room between mobile and desktop */
    .tc-section { padding: var(--tc-space-2xl) 0; }
    .tc-section--hero { padding: 60px 0; }

    /* SEO content: readable column width */
    .tc-seo-content { max-width: 640px; margin: 0 auto; }
}

/* Mobile responsive (< 600px) */
@media (max-width: 599px) {
    .tc-snippet-block, .tc-instant-answer { padding: 12px 14px; }
    .tc-related-tools { grid-template-columns: 1fr 1fr; }
    .tc-quick-calc th, .tc-quick-calc td { padding: 8px 10px; font-size: 13px; }
    .tc-seo-content h2 { font-size: 19px; }
}

/* =====================================================
   FOOTER INLINE STYLES (moved from footer.php)
===================================================== */

/* ================================
   SOCIAL ICONS
================================ */
.tc-footer__socials {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.tc-footer__social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #ddd;
    transition: all 0.2s;
}
.tc-footer__social:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}
.tc-footer__social:nth-child(1):hover { color: #ff0000; } /* YouTube */
.tc-footer__social:nth-child(2):hover { color: #1877f2; } /* Facebook */
.tc-footer__social:nth-child(3):hover { color: #e60023; } /* Pinterest */

/* ================================
   APP STORE COMING SOON
================================ */
.tc-footer__app-soon {
    text-align: center;
    margin-top: var(--tc-space-xl, 40px);
    padding: 24px 20px;
    background: var(--tc-panel-solid);
    border: 1px solid var(--tc-line);
    border-radius: 16px;
}
.tc-footer__app-soon-text {
    color: #f0f0f0;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 14px 0;
}
.tc-footer__app-badges {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.tc-footer__app-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #e0e0e0;
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.2s;
}
.tc-footer__app-badge:hover {
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}
.tc-footer__app-badge svg {
    opacity: 0.7;
}

/* ================================
   FOOTER BOTTOM SECTION
================================ */
.tc-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: var(--tc-space-xl, 40px);
    padding-top: var(--tc-space-lg, 30px);
    text-align: center;
}
.tc-footer__bottom-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tc-footer__bottom-row a {
    color: #f0f0f0;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.tc-footer__bottom-row a:hover {
    color: #00ff70;
}
.tc-footer__sep {
    color: #444;
    font-size: 14px;
}
.tc-footer__seo-row a {
    font-weight: 500;
}
.tc-footer__copyright {
    margin: 15px 0 0 0;
    font-size: 13px;
    color: #f0f0f0;
}
.tc-footer__developed {
    margin: 8px 0 0 0;
    font-size: 12px;
    color: #eaeaea;
}
.tc-footer__developed a {
    color: #f0f0f0;
    text-decoration: none;
    transition: color 0.2s ease;
}
.tc-footer__developed a:hover {
    color: #00ff70;
}
/* Mobile */
@media (max-width: 600px) {
    .tc-footer__bottom-row {
        flex-direction: column;
        gap: 8px;
    }
    .tc-footer__bottom-row .tc-footer__sep {
        display: none;
    }
}
/* RTL Support */
.tc-footer[dir="rtl"] .tc-footer__bottom-row {
    flex-direction: row-reverse;
}
@media (max-width: 600px) {
    .tc-footer[dir="rtl"] .tc-footer__bottom-row {
        flex-direction: column;
    }
}

/* =====================================================
   VOICE ANSWER BLOCK (SEO / IA)
===================================================== */
.tc-voice-answer {
    margin: 0 0 2rem;
    padding: 1.5rem;
    background: var(--tc-bg-alt, #f8f9fa);
    border-radius: 8px;
    border-left: 4px solid var(--tc-green, #22c55e);
}
.tc-voice-answer p:first-child {
    margin: 0 0 0.5rem;
    font-weight: 600;
    color: var(--tc-green, #22c55e);
}
.tc-voice-answer p:last-child {
    margin: 0;
}

/* =====================================================
   ARTICLE CARDS (Strategies page)
===================================================== */
.tc-articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 480px) {
    .tc-articles-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
    .tc-articles-grid { grid-template-columns: repeat(3, 1fr); }
}

.tc-article-card {
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: var(--tc-radius);
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: all 0.2s ease;
}
.tc-article-card:hover {
    border-color: var(--tc-green);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.tc-article-card__img {
    width: 100%;
    height: 180px;
    overflow: hidden;
}
.tc-article-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tc-article-card__body {
    padding: 16px;
}

.tc-article-card__cat {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tc-green);
    margin-bottom: 8px;
}

.tc-article-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tc-text);
    margin-bottom: 8px;
    line-height: 1.4;
}

.tc-article-card__excerpt {
    font-size: 13px;
    color: var(--tc-muted);
    line-height: 1.6;
    margin-bottom: 8px;
}

.tc-article-card__date {
    font-size: 12px;
    color: var(--tc-muted);
}

/* =====================================================
   PROOF SECTION (Homepage)
===================================================== */
.tc-proof__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--tc-line);
}
.tc-proof__item:last-child {
    border-bottom: none;
}
.tc-proof__icon {
    font-size: 24px;
    flex-shrink: 0;
}
.tc-proof__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--tc-text);
}

/* =====================================================
   FAQ ACCORDION
   Apr 2026 a11y refactor — .tc-faq-toggle migrated from a
   <div> to a real <button> so keyboard + screen reader users
   can interact. The button reset below preserves the EXACT
   visual rendering of the previous div-based markup: the
   <h3.tc-faq-question> inside the button continues to flex
   the question text + icon as before, with no hover/focus
   color shift, no border, no UA padding.
===================================================== */
.tc-faq-toggle {
    cursor: pointer;
    /* Button reset — neutralize UA defaults so the rendered
       output matches the previous <div> styling 1:1. */
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    /* Tâche 30: start = reading-flow start (LTR-left, RTL-right) */
    text-align: start;
    color: inherit;
    font: inherit;
    display: block;
}
.tc-faq-toggle:focus-visible {
    /* Keyboard focus indicator — only fires on Tab / programmatic
       focus, not on mouse click. Color-matched to the brand. */
    outline: 2px solid var(--tc-green);
    outline-offset: 2px;
    border-radius: 4px;
}
.tc-faq-question {
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Note: keeping the H3's default user-agent margin intact —
       it's part of the previous visual rhythm inside the card. */
}
.tc-faq-icon {
    color: var(--tc-muted);
}
.tc-faq-answer {
    margin-top: 12px;
}
.tc-faq-answer p {
    font-size: 14px;
}
.tc-faq-answer.tc-hidden {
    display: none;
}

/* =====================================================
   UPCOMING MATCHES WIDGET (homepage + /predictor/)
   Audit fix #6 (Apr 2026) — externalized from
   components/upcoming-matches.php where ~25 inline
   style="" attributes were being rendered server-side.
===================================================== */

.tc-upcoming-matches {
    padding: 48px 0;
    /* Apr 2026 contrast pass: was rgba(255,255,255,0.02). Section spans the
       full viewport width so the stadium image bleeds through prominently —
       muted text inside (date, odds labels) drops below 4.5:1 against the
       brighter pixels. Solid dark panel removes the bleed-through. */
    background: var(--tc-panel-solid);
}

/* Recent articles widget (May 2026 SEO audit) — homepage internal link
   signal toward editorial content. Same visual rhythm as upcoming-matches
   so the page reads as a coherent stack of 3 widgets (matches, articles, trust). */
.tc-recent-articles {
    padding: 48px 0;
    background: var(--tc-panel-solid);
}
.tc-recent-articles__header {
    text-align: center;
    margin-bottom: 32px;
}
.tc-recent-articles__title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--tc-text);
}
.tc-recent-articles__subtitle {
    color: var(--tc-muted);
    font-size: 15px;
    margin: 0;
}
.tc-recent-articles__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.tc-recent-articles__card {
    display: flex;
    flex-direction: column;
    background: var(--tc-panel);
    border: 1px solid var(--tc-line);
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.tc-recent-articles__card:hover,
.tc-recent-articles__card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--tc-line-strong);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    text-decoration: none;
}
.tc-recent-articles__hero {
    aspect-ratio: 16/9;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.tc-recent-articles__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tc-recent-articles__body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.tc-recent-articles__card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--tc-text);
    margin: 0;
    line-height: 1.35;
}
.tc-recent-articles__card-desc {
    font-size: 13px;
    color: var(--tc-muted);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}
.tc-recent-articles__card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--tc-line);
}
.tc-recent-articles__card-meta time {
    color: var(--tc-muted);
}
.tc-recent-articles__card-cta {
    color: var(--tc-green, #22c55e);
    font-weight: 600;
}

.tc-upcoming-matches .tc-container {
    max-width: 1200px;
}

.tc-upcoming-matches__header {
    text-align: center;
    margin-bottom: 32px;
}

.tc-upcoming-matches__title {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--tc-text);
}

.tc-upcoming-matches__subtitle {
    color: var(--tc-muted);
    font-size: 15px;
    max-width: 700px;
    margin: 0 auto;
}

.tc-upcoming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.tc-upcoming-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: rgba(34, 44, 70, 0.5);
    border: 1px solid var(--tc-line);
    border-radius: 14px;
    padding: 18px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.tc-upcoming-card:hover {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.35);
    transform: translateY(-2px);
}

.tc-upcoming-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tc-upcoming-card__competition { color: var(--tc-gold); }
.tc-upcoming-card__date        { color: var(--tc-muted); }

.tc-upcoming-card__teams {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 14px;
    min-height: 42px;
}
.tc-upcoming-card__vs {
    color: var(--tc-muted);
    font-weight: 400;
}

.tc-upcoming-card__odds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    font-size: 13px;
}

.tc-upcoming-card__odd-cell {
    text-align: center;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
}
.tc-upcoming-card__odd-cell.is-favorite {
    background: rgba(34, 197, 94, 0.12);
}

.tc-upcoming-card__odd-label {
    color: var(--tc-muted);
    font-size: 10px;
    margin-bottom: 2px;
}
.tc-upcoming-card__odd-value {
    font-weight: 700;
}

.tc-data-freshness {
    margin: 14px auto 0;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tc-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    text-align: center;
}

.tc-stats-section {
    text-align: center;
}

.tc-upcoming-card__legend {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--tc-muted);
    text-align: center;
    opacity: 0.8;
}

.tc-upcoming-card__cta {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
    color: var(--tc-gold);
    /* Tâche 30: logical end → trailing edge in LTR + RTL */
    text-align: end;
}

.tc-upcoming-matches__see-all {
    text-align: center;
}

.tc-upcoming-matches__see-all-btn {
    display: inline-block;
    padding: 14px 28px;
    background: var(--tc-green);
    color: #041a09;
    font-size: 15px;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none;
}
.tc-upcoming-matches__see-all-btn:hover {
    filter: brightness(1.08);
}

/* =====================================================
   SKIP LINK (a11y, WCAG 2.4.1) — audit fix #11 Apr 2026
   Visually hidden until keyboard-focused. When focused,
   becomes a high-contrast pill in the top-left corner.
===================================================== */
.tc-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 10000;
}
.tc-skip-link:focus,
.tc-skip-link:focus-visible {
    position: fixed;
    left: 12px;
    top: 12px;
    width: auto;
    height: auto;
    padding: 12px 18px;
    background: var(--tc-green, #22c55e);
    color: #041a09;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    outline: 3px solid #fff;
    outline-offset: 2px;
}
/* Remove the focus ring around <main> when the skip link
   targets it — but keep a subtle indicator for screen reader
   users who arrived via this link. */
#tc-main:focus {
    outline: none;
}

/* =====================================================
   HUB STRIP (competition nav under header)
   Audit fix #10 (Apr 2026) — externalized from
   components/header.php (~9 inline style="" attributes
   + 8 inline onmouseover/onmouseout handlers).
===================================================== */
.tc-hub-strip {
    background: rgba(34, 197, 94, 0.04);
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
    padding: 10px 0;
}

.tc-hub-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    justify-content: center;
    font-size: 13px;
}

.tc-hub-strip__label {
    color: var(--tc-gold);
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.tc-hub-strip__link {
    color: var(--tc-text);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}

.tc-hub-strip__link:hover,
.tc-hub-strip__link:focus-visible {
    background: rgba(34, 197, 94, 0.1);
    outline: none;
}
.tc-hub-strip__link:focus-visible {
    outline: 2px solid var(--tc-green, #22c55e);
    outline-offset: 2px;
}

/* =====================================================
   E-E-A-T DISCLAIMER BLOCK (May 2026)
   Prominent compliance disclaimer rendered at the TOP of any
   page that emits betting predictions (predictor, match pages).
   Required by Google's YMYL guidelines for the betting niche.
===================================================== */
.tc-eeat-disclaimer {
    margin: 0 0 24px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(245, 196, 81, 0.08), rgba(245, 196, 81, 0.02));
    border-left: 3px solid var(--tc-gold);
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tc-text);
}
.tc-eeat-disclaimer strong {
    color: var(--tc-text);
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}
.tc-eeat-disclaimer__details {
    display: block;
    color: var(--tc-muted);
    font-size: 12px;
}
.tc-eeat-disclaimer a {
    color: var(--tc-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tc-eeat-disclaimer a:hover {
    opacity: 0.85;
}

/* =====================================================
   LANGUAGE SUGGESTION BANNER (May 2026)
   Polite top banner suggesting a language switch when geo IP
   (or browser Accept-Language) hints at a different language
   than the URL is serving. Dismissible for 30 days.
===================================================== */
.tc-lang-suggest {
    /* M9 audit May 2026: above sticky elements but below modals/cookie banner. */
    position: relative;
    z-index: var(--tc-z-lang-banner, 350);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));
    border-bottom: 1px solid rgba(34, 197, 94, 0.30);
    color: var(--tc-text);
    font-size: 14px;
    line-height: 1.4;
}
.tc-lang-suggest__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.tc-lang-suggest__icon {
    font-size: 18px;
    line-height: 1;
}
.tc-lang-suggest__text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: var(--tc-text);
}
.tc-lang-suggest__btn {
    flex: 0 0 auto;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.2;
    transition: opacity 0.15s, transform 0.1s;
}
.tc-lang-suggest__btn--primary {
    background: var(--tc-green);
    color: #fff;
}
.tc-lang-suggest__btn--primary:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}
.tc-lang-suggest__btn--ghost {
    color: var(--tc-muted);
    border: 1px solid transparent;
}
.tc-lang-suggest__btn--ghost:hover {
    color: var(--tc-text);
    border-color: var(--tc-line);
}
@media (max-width: 479px) {
    .tc-lang-suggest__inner {
        gap: 8px;
        padding: 8px 12px;
    }
    .tc-lang-suggest__text {
        flex-basis: 100%;
        font-size: 13px;
    }
}

/* =====================================================
   FOCUS-VISIBLE — WCAG 2.4.7 (Apr 2026, Tâche 22)
   -----------------------------------------------------
   Keyboard-only focus rings on every interactive element.
   :focus-visible (not :focus) so a mouse click never paints
   the ring — only Tab / Shift+Tab / arrow-key navigation does,
   matching native browser behaviour and the design intent.
   The rules deliberately set ONLY `outline` + `outline-offset`
   so existing `background`, `color`, `transform`, and
   `box-shadow` declarations on `:hover` / `:active` keep
   working untouched.
   Outline color rationale:
     - Default → var(--tc-green) (brand, ~7:1 contrast on dark
       panels & most surfaces — passes WCAG AA non-text 3:1).
     - Filled green/gold buttons → use --tc-text
       (#f0f6ff) so the ring stays visible against a saturated
       background. A green ring on a green button = invisible.
   ===================================================== */

/* Default ring — outline, ghost, secondary buttons & generic CTAs */
.tc-btn:focus-visible,
.tc-fm-banner__cta:focus-visible,
.tc-fm-modal__cta:focus-visible {
    outline: 3px solid var(--tc-green);
    outline-offset: 3px;
}

/* Filled brand buttons need a near-white ring to stay visible
   against the saturated background fill. */
.tc-btn--green:focus-visible,
.tc-btn--gold:focus-visible {
    outline-color: var(--tc-text);
}

/* Header navigation — links + hamburger toggle + lang switcher.
   Smaller offset (2px) because these sit closer to the header
   border and 3px would visually clip into adjacent elements. */
.tc-nav__link:focus-visible,
.tc-nav__toggle:focus-visible,
.tc-lang-switcher__trigger:focus-visible,
.tc-lang-switcher__item:focus-visible {
    outline: 2px solid var(--tc-green);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Interactive cards (tool tiles, dashboard quick-links). The
   border-radius mirrors `.tc-tool-card` / `.tc-card` so the
   ring follows the rounded corners instead of drawing a
   square box outside the card. */
.tc-card--interactive:focus-visible,
.tc-tool-card:focus-visible {
    outline: 3px solid var(--tc-green);
    outline-offset: 3px;
}

/* =====================================================
   COOKIE CONSENT — Tâche 36 (Apr 2026)
   -----------------------------------------------------
   Two surfaces: the banner (fixed bottom, non-modal) and
   the customize modal (centered overlay, modal). Both
   match the dark-theme aesthetic without introducing new
   color tokens — reuses --tc-panel, --tc-line, --tc-text.
   The banner is intentionally NOT a full-screen blocker —
   visitor can still read the page while deciding (CNIL:
   consent must be "informed", which means the visitor
   must have seen what they're consenting to).
   ===================================================== */

/* Banner — fixed bottom card, full-width on mobile, max-width 880 on desktop.
 *
 * Apr 2026 redesign: was a 2-column row (copy | buttons) at >= 768px which
 * squeezed the copy down to ~260px on a 720px max-width banner. With 3
 * buttons eating ~390px + padding + gap, the title wrapped to "🍪 Cookies
 * & vie / privée" (mid-word). Restructured to stack vertically always:
 *   - copy on top, full width (title + 1-line lead)
 *   - buttons row below, right-aligned on desktop, stretched on mobile
 * Cleaner read order, no horizontal competition between text and CTAs. */
.tc-cookie-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    max-width: 880px;
    margin: 0 auto;
    background: var(--tc-panel, #131b2e);
    border: 1px solid var(--tc-line, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    z-index: var(--tc-z-cookie, 10000); /* C4 audit May 2026: above all modals (GDPR consent must never be trapped behind an upsell) */
    color: var(--tc-text, #edf3ff);
    /* Slide-up reveal, gentle */
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.tc-cookie-banner--show {
    transform: translateY(0);
    opacity: 1;
}
.tc-cookie-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tc-cookie-banner__copy {
    /* Reserve full width — no flex:1 fight with the actions row anymore. */
    width: 100%;
}
.tc-cookie-banner__title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    color: var(--tc-text, #edf3ff);
}
.tc-cookie-banner__lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tc-muted, #9fb8e0);
}
.tc-cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
@media (max-width: 600px) {
    /* Tâche audit May 2026 — visual bug fix.
       Previously: `flex: 1` + `min-width: 0` on each button squeezed
       the 3 actions into a single row. With localized labels ("REFUSE
       ALL", "ACCEPT ALL", "CUSTOMIZE"), the row overflowed; the middle
       button got truncated mid-word ("REFUSE A...") and visually
       collided with the green ACCEPT button on narrow Android viewports
       (Huawei 360px screenshot, May 1 2026).
       Now: stack each button on its own row, full width. Order matters
       for CNIL — REFUSE must be at least as visible as ACCEPT, so we
       keep the same DOM order and let normal flex flow produce the
       Customize → Refuse → Accept stack from top to bottom. */
    .tc-cookie-banner__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tc-cookie-banner__actions .tc-btn {
        width: 100%;
        min-width: 0;
        white-space: normal; /* allow 2-line labels on narrow phones */
    }
}

/* Modal — centered, dimmed backdrop, panel max-width 480 */
.tc-cookie-modal {
    position: fixed;
    inset: 0;
    z-index: var(--tc-z-cookie, 10000); /* same layer as the cookie banner — never trapped */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
/* Apr 2026 fix: explicit `display: flex` above outranks the UA
   `[hidden] { display: none }` rule (same specificity, my class
   wins by cascade order). Without this !important guard, setting
   modal.hidden = true in JS doesn't visually hide it. Same gotcha
   for the banner below.
   May 2026: extended to .tc-user-avatar + .tc-btn — both used in the
   header auth toggle (anon login button vs logged-in avatar pill).
   `display: inline-flex` was overriding the `hidden` attribute, so
   BOTH icons rendered side-by-side instead of one being hidden. */
.tc-cookie-modal[hidden],
.tc-cookie-banner[hidden],
.tc-user-avatar[hidden],
.tc-btn[hidden] {
    display: none !important;
}
.tc-cookie-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 16, 0.7);
    backdrop-filter: blur(2px);
}
.tc-cookie-modal__panel {
    position: relative;
    background: var(--tc-panel, #131b2e);
    border: 1px solid var(--tc-line, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.tc-cookie-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.tc-cookie-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: var(--tc-text, #edf3ff);
}
.tc-cookie-modal__close {
    background: none;
    border: 0;
    color: var(--tc-muted, #9fb8e0);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.tc-cookie-modal__close:hover { color: var(--tc-text, #edf3ff); }
.tc-cookie-modal__intro {
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tc-muted, #9fb8e0);
}
.tc-cookie-modal__cats {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tc-cookie-cat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--tc-line, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    padding: 12px 14px;
}
.tc-cookie-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}
.tc-cookie-cat__head strong {
    font-size: 14px;
    color: var(--tc-text, #edf3ff);
}
.tc-cookie-cat__locked {
    font-size: 11px;
    color: var(--tc-green, #22c55e);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tc-cookie-cat__desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--tc-muted, #9fb8e0);
}
/* Native checkbox, hidden, with a custom slider track. Keeps keyboard
   focus + screen reader semantics for free (label[input] pattern). */
.tc-cookie-cat__switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
    cursor: pointer;
}
.tc-cookie-cat__switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}
.tc-cookie-cat__slider {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    transition: background 0.2s;
}
.tc-cookie-cat__slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.tc-cookie-cat__switch input:checked ~ .tc-cookie-cat__slider {
    background: var(--tc-green, #22c55e);
}
.tc-cookie-cat__switch input:checked ~ .tc-cookie-cat__slider::before {
    transform: translateX(18px);
}
.tc-cookie-cat__switch input:focus-visible ~ .tc-cookie-cat__slider {
    outline: 2px solid var(--tc-green, #22c55e);
    outline-offset: 2px;
}
.tc-cookie-modal__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* When the modal is open, prevent body scroll behind it. Class is
   added/removed by consent.js. */
body.tc-no-scroll { overflow: hidden; }


/* =====================================================
   BYLINE — Tâche 34 (Apr 2026)
   "✍️ Par X · Mis à jour le Y" line, sits under H1 or
   replaces the previous (misleading) tc-update block.
===================================================== */
.tc-byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: var(--tc-muted, #9fb8e0);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 18px;
}
.tc-byline--compact {
    font-size: 12px;
    margin: 24px 0 8px;
    justify-content: center;
}
.tc-byline__icon { font-size: 14px; }
.tc-byline__author {
    color: var(--tc-text, #edf3ff);
    text-decoration: none;
    font-weight: 600;
}
.tc-byline__author:hover { color: var(--tc-green, #22c55e); }
.tc-byline__sep { color: var(--tc-line, rgba(255,255,255,0.18)); }
.tc-byline time { font-variant-numeric: tabular-nums; }

/* =====================================================
   FILE-BASED ARTICLE TEMPLATE — Apr 2026 cutover
   Styles for templates/page-article.php (renders .md files
   from articles/<lang>/<slug>.md). Reuses .tc-section.tc-article
   base styles + adds class-specific polish for header / hero /
   body / meta row.
===================================================== */
.tc-article__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.2;
    margin: 12px 0 16px;
    color: var(--tc-text, #edf3ff);
}
.tc-article__lead {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--tc-text-secondary, #ccd9f5);
    margin: 0 0 18px;
    font-weight: 500;
}
.tc-article__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--tc-line, rgba(255,255,255,.08));
    color: var(--tc-muted, #9fb8e0);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.tc-article__meta time { font-variant-numeric: tabular-nums; }
.tc-article__reading-time::before  { content: "· "; color: var(--tc-line, rgba(255,255,255,.18)); }
.tc-article__category::before      { content: "· "; color: var(--tc-line, rgba(255,255,255,.18)); }
.tc-article__category {
    color: var(--tc-green, #22c55e);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.tc-article__hero {
    margin: 0 0 28px;
    border-radius: 12px;
    overflow: hidden;
}
.tc-article__hero img {
    width: 100%;
    height: auto;
    display: block;
}
.tc-article__body {
    line-height: 1.7;
    font-size: 16px;
}
.tc-article__body h2,
.tc-article__body h3,
.tc-article__body h4 {
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}
.tc-article__body h2 { font-size: 1.4rem; }
.tc-article__body h3 { font-size: 1.2rem; }
.tc-article__body p  { margin: 0 0 1em; }
.tc-article__body ul,
.tc-article__body ol { margin: 0 0 1em 1.5em; }
.tc-article__body li { margin-bottom: 0.4em; }
.tc-article__body a {
    color: var(--tc-green, #22c55e);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tc-article__body code {
    background: rgba(255,255,255,.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.tc-article__body pre {
    background: rgba(255,255,255,.04);
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
}
.tc-article__body blockquote {
    border-left: 3px solid var(--tc-green, #22c55e);
    padding: 6px 0 6px 18px;
    margin: 1em 0;
    color: var(--tc-text-secondary, #ccd9f5);
    font-style: italic;
}
.tc-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95em;
}
.tc-article__body th,
.tc-article__body td {
    padding: 8px 12px;
    border: 1px solid var(--tc-line, rgba(255,255,255,.08));
    text-align: left;
}
.tc-article__body th {
    background: rgba(255,255,255,.04);
    font-weight: 600;
}

/* =====================================================================
   Defensive overrides — moved from inline <style id="tc-overflow-fix">
   in components/header.php (Tâche audit Apr 2026, perf #11).
   Cacheable now (was repeated inline on every pageload).
===================================================================== */

/* 1. Anti-scroll horizontal mobile : indispensable, sinon le tc-top-banner
      ou un autre élément >100vw fait défiler. */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

/* 2. Sur mobile/tablette (<1024px), le menu desktop horizontal (.tc-nav)
      ne doit pas occuper d'espace. components.css le fait déjà via
      .tc-nav { display: none; } par défaut + flex desktop, mais on
      sécurise au cas où une autre CSS le réafficherait. */
@media (max-width: 1023px) {
    .tc-header__inner > .tc-nav { display: none !important; }
}

/* 3. Hamburger toujours visible sur mobile — règles défensives.
      Le bouton est ancré en bout de la rangée actions (flex-end), jamais
      réduit sous 44×44 (touch target WCAG), et reste cliquable au-dessus
      du reste via z-index. Sur très petits écrans (≤360 px) le bouton
      "Connexion" passe en icône (texte caché) pour libérer la place sans
      toucher au padding du container. */
.tc-header__inner {
    flex-wrap: nowrap;
    min-width: 0;
}
.tc-header__actions {
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.tc-nav__toggle {
    display: flex !important;
    position: relative;
    z-index: 5;
    min-width: 44px;
    min-height: 44px;
    flex-shrink: 0;
    margin-left: 4px;
}
@media (min-width: 1024px) {
    .tc-nav__toggle { display: none !important; }
}
@media (max-width: 360px) {
    /* Connexion → icône seule pour laisser respirer le hamburger
       sans toucher au padding global. L'attribut aria-label reste
       sur le <a>, donc l'accessibilité n'est pas dégradée. */
    .tc-header__actions .tc-btn--sm {
        font-size: 0;
        padding: 8px 10px;
        min-width: 36px;
    }
    .tc-header__actions .tc-btn--sm::before {
        content: '👤';
        font-size: 16px;
        line-height: 1;
    }
}

/* Premium-user upsell suppression (May 2026): hide every "Become Premium"
   CTA site-wide for users who already paid. Driven by `body.tc-is-premium`
   added by the body_class filter in inc/user.php. Single selector kills:
     - Inline "Buy Premium" buttons ([data-tc-premium-link])
     - Hero-style upsell blocks (.tc-premium-cta, .tc-pv4-cta)
     - Sticky bottom bar on /premium/ (.tc-pv4-sticky)
     - Premium teaser sections wrapping the CTAs
     - The freemium banner — already JS-removed when is_premium:true,
       but the rule here is belt-and-suspenders for SSR.
   The /premium/ landing page itself is also redirected to /dashboard/
   in templates/page-premium.php — see PHP guard near top of that file. */
body.tc-is-premium [data-tc-premium-link],
body.tc-is-premium .tc-premium-cta,
body.tc-is-premium .tc-premium-section,
body.tc-is-premium .tc-pv4-sticky,
body.tc-is-premium .tc-fm-banner,
body.tc-is-premium .tc-fm-sticky {
    display: none !important;
}

/* User avatar pill — SaaS-design rework May 2026.
   Previously: bright green-filled circle with green text. Looked like
   a WordPress 2015 default-avatar plugin icon, didn't match the dark/
   neon Talacote brand. Now: glassmorphism — semi-transparent dark fill
   + subtle green border + WHITE text/icon, with green glow on hover.
   Visually identical to Notion / Linear / Vercel header avatars.
   For logged-in users with initials: those initials display white.
   For logged-in users without initials (rare fallback): the Lucide
   `user` SVG renders in WHITE, never the anchor-default blue. */
.tc-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff !important; /* defeats anchor-default blue (a:link) */
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-decoration: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    line-height: 1;
}

/* When the avatar holds 2 character initials (e.g. "CP"), allow the
   pill to expand slightly so the letters don't get cropped. */
.tc-user-avatar:has(.tc-user-avatar__initials:not(:empty)) {
    min-width: 40px;
    width: auto;
    padding: 0 12px;
}

.tc-user-avatar:hover,
.tc-user-avatar:focus-visible {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 4px 14px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
    color: #ffffff !important;
}

.tc-user-avatar__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0.5px); /* visual-center the cap-height letters */
    color: inherit;
}

/* Icon variant — explicit white stroke regardless of parent anchor
   defaults; size matches the avatar inner padding. */
.tc-user-avatar__initials .tc-icon {
    width: 20px;
    height: 20px;
    color: #ffffff;
}
@media (max-width: 360px) {
    .tc-user-avatar {
        min-width: 36px;
        min-height: 36px;
        padding: 0 8px;
        font-size: 13px;
    }
}

/* 4. Clover icone hero — manquait après restauration du critical.css. */
.tc-hero__icon {
    display: flex;
    justify-content: center;
}
.tc-hero__icon-img {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    margin: 0 auto var(--tc-space-lg, 32px);
    display: block;
}