/* Polices auto-hébergées (Inter, Space Grotesk — SIL Open Font License).
   Servies depuis nosubapp.com : supprime un aller-retour vers un tiers
   mesuré à 1347 ms de blocage du rendu sur les pages d'atterrissage.
   Générées depuis l'API Google Fonts, unicode-range préservés. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/static/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Google Fonts : chargées via <link> dans landing.html (perf : évite la chaîne
   CSS -> @import -> CSS bloquante). Familles : Inter 400-800, Space Grotesk 600-700. */

:root {
    --bg-primary: #0f0f12;
    --bg-secondary: #16161a;
    --bg-card: rgba(22, 22, 26, 0.72);
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --accent-primary: #38bdf8;
    --accent-hover: #0ea5e9;
    --accent-secondary: #c084fc;
    --gradient-accent: linear-gradient(135deg, #38bdf8 0%, #c084fc 100%);
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-card: 0 24px 80px -52px rgba(0, 0, 0, 0.9);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text-primary);
    background:
        radial-gradient(circle at 18% 8%, rgba(56, 189, 248, 0.2), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(192, 132, 252, 0.18), transparent 34%),
        linear-gradient(180deg, #0f0f12 0%, #08080b 100%);
}

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

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--accent-primary);
    color: #04121d;
    font-weight: 800;
    transform: translateY(-140%);
    transition: transform 150ms ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.landing-header,
.landing-footer {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.landing-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
}

.brand-mark {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #061018;
    background: var(--gradient-accent);
}

.brand-word {
    font-size: 1.22rem;
}

.brand-word span {
    color: var(--accent-primary);
}

.landing-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.94rem;
}

.landing-nav a:hover,
.nav-cta:hover {
    color: var(--text-primary);
}

.nav-cta,
.secondary-cta {
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 10px 15px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.04);
}

main {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}

.landing-hero {
    min-height: calc(100vh - 72px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: center;
    gap: 48px;
    padding: 42px 0 80px;
}

.eyebrow {
    margin: 0 0 18px;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 800;
    font-size: 0.78rem;
}

h1,
h2 {
    font-family: "Space Grotesk", sans-serif;
    line-height: 1.04;
}

h1 {
    margin: 0;
    max-width: 760px;
    font-size: clamp(2.6rem, 6vw, 5.8rem);
    letter-spacing: 0;
}

h2 {
    margin: 0 0 14px;
    font-size: clamp(1.55rem, 2.8vw, 2.4rem);
}

.intro {
    max-width: 720px;
    margin: 24px 0 0;
    color: var(--text-secondary);
    font-size: clamp(1.02rem, 1.7vw, 1.24rem);
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    min-height: 44px;
    padding: 12px 18px;
    color: #04121d;
    font-weight: 800;
    background: var(--gradient-accent);
    box-shadow: 0 18px 48px -28px rgba(56, 189, 248, 0.8);
}

/* Pages plateforme : H1 plus compact pour que l'outil reste au-dessus de la
   ligne de flottaison (le titre par défaut monte à ~77px et pousse le formulaire). */
.hero-copy-tool h1 {
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.12;
}

/* Outil réel embarqué dans le hero des pages plateforme (coller un lien). */
.hero-tool {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    max-width: 560px;
}

.hero-tool-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 1rem;
}

.hero-tool-input::placeholder { color: var(--text-muted, rgba(255, 255, 255, 0.5)); }

.hero-tool-input:focus {
    outline: none;
    border-color: rgba(56, 189, 248, 0.8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.hero-tool-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 22px;
    border: none;
    border-radius: 999px;
    color: #04121d;
    font-weight: 800;
    cursor: pointer;
    background: var(--gradient-accent);
    box-shadow: 0 18px 48px -28px rgba(56, 189, 248, 0.8);
}

.hero-tool-hint {
    margin-top: 10px;
    font-size: 0.85rem;
    /* Plus clair que --text-muted : garantit un contraste >= 4.5:1 (WCAG AA)
       sur le dégradé du hero, mesuré à ~2.45:1 avec #71717a sur mobile. */
    color: #b0b0ba;
}

.last-updated {
    margin-top: 16px;
    font-size: 0.8rem;
    /* Même teinte que .hero-tool-hint : >= 4.5:1 (WCAG AA) sur le dégradé du
       hero des pages outil, où --text-muted (#71717a) tombe à ~2.4:1. */
    color: #b0b0ba;
}

/* Aperçu haute-fidélité du lecteur NoSub (pages plateforme) : preuve visuelle
   de l'interface — vidéo + chat synchronisé — au lieu d'une boîte vide. */
.hero-preview {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: var(--shadow-card);
}

.preview-video {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 120% at 30% 20%, rgba(56, 189, 248, 0.22), transparent 60%),
        radial-gradient(120% 120% at 80% 90%, rgba(192, 132, 252, 0.22), transparent 55%),
        #05070a;
}

.preview-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px;
    font-size: 0.72rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}

.preview-badge {
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    color: #04121d;
    background: #53fc18; /* Kick */
}
.preview-badge-twitch { background: #a970ff; color: #fff; }

.preview-title { font-weight: 700; color: #fff; }
.preview-quality {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    padding: 1px 6px;
}

.preview-timeline {
    position: absolute;
    left: 11px; right: 11px; bottom: 12px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
}
.preview-timeline span {
    display: block;
    height: 100%;
    width: 62%;
    background: var(--gradient-accent);
}

.preview-chat {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.72rem;
    line-height: 1.25;
    overflow: hidden;
}
.preview-chat-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2px;
}
.preview-live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.preview-msg { color: rgba(255, 255, 255, 0.82); }
.preview-msg b { margin-right: 4px; }
.preview-msg .c1 { color: #ff7ab6; }
.preview-msg .c2 { color: #7ad1ff; }
.preview-msg .c3 { color: #ffd166; }
.preview-msg .c4 { color: #9d8cff; }
.preview-msg .c5 { color: #5eead4; }

@media (max-width: 720px) {
    .hero-preview { grid-template-columns: 1fr; }
    .preview-chat { display: none; }
}

@media (max-width: 560px) {
    .hero-tool { flex-direction: column; }
    .hero-tool-btn { width: 100%; }
}

.hero-panel {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
    box-shadow: var(--shadow-card);
}

.video-frame {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    background:
        linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(192, 132, 252, 0.16)),
        #05070a;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.play-core {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--gradient-accent);
    position: relative;
}

.play-core::after {
    content: "";
    position: absolute;
    left: 31px;
    top: 22px;
    border-left: 24px solid #051018;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
}

.fake-timeline {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

.fake-timeline span {
    display: block;
    width: 54%;
    height: 100%;
    border-radius: inherit;
    background: var(--accent-primary);
}

.platform-row {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.platform-row span {
    flex: 1;
    padding: 10px;
    text-align: center;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    font-weight: 700;
}

.content-section,
.faq-section,
.bottom-cta {
    margin: 22px 0;
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: var(--shadow-card);
}

.content-section p,
.faq-section p,
.bottom-cta p {
    color: var(--text-secondary);
    line-height: 1.78;
}

ul {
    display: grid;
    gap: 10px;
    padding-left: 20px;
    color: var(--text-secondary);
}

.related-links ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

.related-links a {
    color: var(--accent-primary);
    font-weight: 600;
}

.related-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

li::marker {
    color: var(--accent-primary);
}

details {
    border-top: 1px solid var(--border-color);
    padding: 16px 0;
}

details:first-of-type {
    border-top: 0;
}

summary {
    cursor: pointer;
    font-weight: 800;
}

.bottom-cta {
    text-align: center;
    margin-bottom: 54px;
}

.landing-footer {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.landing-footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 18px;
    font-weight: 600;
    font-size: 0.9rem;
}

.landing-footer-nav a {
    color: var(--text-secondary);
}

.landing-footer-nav a:hover {
    color: var(--text-primary);
}

@media (max-width: 820px) {
    .landing-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 0;
    }

    .landing-nav {
        flex-wrap: wrap;
        gap: 10px 14px;
    }

    .landing-hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 28px;
    }

    .content-section,
    .faq-section,
    .bottom-cta {
        padding: 22px;
    }

    .landing-footer {
        flex-direction: column;
        justify-content: center;
        padding: 22px 0;
    }
}

/* ── Pages annuaire (streamers / jeux) ────────────────────────────────── */
.directory-breadcrumb {
    max-width: 1100px;
    margin: 18px auto 0;
    padding: 0 24px;
    color: #8b8b95;
    font-size: 0.82rem;
}

.directory-breadcrumb a {
    color: #b0b0ba;
    text-decoration: none;
}

.directory-breadcrumb a:hover {
    color: #fff;
    text-decoration: underline;
}

.directory-list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.directory-item {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.directory-item:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.045);
}

.directory-item-link {
    display: block;
    color: #f7f9fb;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.directory-item-link:hover {
    text-decoration: underline;
}

.directory-item-meta {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: #b0b0ba;
    font-size: 0.82rem;
}

.admin-platform-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.09);
    color: #e6e6ec;
}

.admin-platform-badge.platform-twitch { background: rgba(145, 70, 255, 0.22); color: #cbb0ff; }
.admin-platform-badge.platform-kick   { background: rgba(83, 252, 24, 0.16);  color: #a6f58a; }

/* Liens contextuels en corps de texte : ils transmettent la pertinence aux
   guides, que les liens de pied de page seuls ne suffisaient pas à nourrir. */
.section-links {
    margin-top: 14px;
    font-size: 0.95rem;
}

.section-links a {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.section-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.admin-empty-copy {
    color: #b0b0ba;
    font-size: 0.92rem;
}

/* Groupes de liens du hub /trending : beaucoup d'entrées, donc une grille
   compacte plutôt qu'une longue colonne à faire défiler. */
.directory-links {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px 18px;
}

.directory-links a {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.directory-links a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 720px) {
    .directory-breadcrumb { padding: 0 16px; }
}

/* Hero des pages annuaire : compact et pleine largeur. Le hero des landings
   est une grille 2 colonnes en 100vh (il porte un aperçu à droite) ; ici la
   liste de rediffs est le contenu principal, elle ne doit pas être repoussée
   sous la ligne de flottaison par un hero vide à moitié. */
.landing-hero.directory-hero {
    min-height: 0;
    display: block;
    padding: 28px 0 24px;
}

.directory-hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.14;
}

.directory-hero .intro {
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Mots longs et césure
   ═══════════════════════════════════════════════════════════════════════════

   L'allemand et le russe forment des mots que d'autres langues découpent :
   « Datenschutzerklärung » (20 caractères) et « конфиденциальности » (18) ne
   tiennent pas dans un titre à 375 px. Sans autorisation de coupure le mot ne
   se replie pas — il élargit son conteneur, qui élargit la page, et le
   visiteur hérite d'un défilement horizontal.

   Mesuré avant correctif, en 375 px : /de/privacy débordait de 90 px,
   /ru/privacy de 94 px et /ru/vod-playback-help de 5 px.

   `hyphens: auto` s'appuie sur l'attribut lang du document, correct pour les
   sept langues, et ne coupe qu'en cas de nécessité, avec un trait d'union.
   `overflow-wrap: break-word` sert de filet pour les navigateurs sans
   dictionnaire de césure. */

.hero-copy h1,
.hero-copy .eyebrow,
.landing-section h2,
.landing-faq dt,
h1, h2, h3 {
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Le correctif décisif. `overflow-wrap: break-word` autorise la coupure au
   moment du rendu mais NE RÉDUIT PAS la taille min-content, et c'est cette
   taille qui dimensionne une piste de grille. Résultat mesuré sur
   /de/privacy en 375 px : la piste faisait 449 px, soit la largeur du mot le
   plus long, et la page débordait de 90 px malgré la césure autorisée.

   `min-width: 0` lève le minimum automatique des éléments de grille et les
   laisse se réduire à la largeur disponible ; la césure fait alors son travail
   normalement. */
.landing-hero > * {
    min-width: 0;
}

/* Les identifiants techniques ne se coupent jamais : une commande FFmpeg ou une
   URL M3U8 coupée par un trait d'union serait fausse si on la recopie. */
code, pre, kbd, samp {
    hyphens: none;
    overflow-wrap: anywhere;
}