/**
 * TH3REALFR Core — Responsive Foundation
 * Phase 2 : harmonisation PC / tablette / mobile.
 */

:root {
    --th3-responsive-gutter: clamp(16px, 3vw, 58px);
    --th3-responsive-section-y: clamp(42px, 6vw, 96px);
    --th3-responsive-header-offset: 88px;
    --th3-responsive-touch: 44px;
    --th3-responsive-reading: 760px;
}

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

body.th3-core {
    overflow-x: clip;
    min-width: 320px;
}

body.th3-core img,
body.th3-core video,
body.th3-core canvas,
body.th3-core svg {
    max-width: 100%;
}

body.th3-core img,
body.th3-core video {
    height: auto;
}

body.th3-core iframe {
    max-width: 100%;
}

body.th3-core :where(button, [type="button"], [type="submit"], a) {
    -webkit-tap-highlight-color: transparent;
}

body.th3-core :where(input, select, textarea, button) {
    max-width: 100%;
    font: inherit;
}

body.th3-core :where(h1, h2, h3, h4, p, a, span, strong) {
    overflow-wrap: anywhere;
}

/* Conteneurs principaux du core : mêmes marges sur tout le site. */
body.th3-core :where(
    .th3yt-archive,
    .th3yt-single,
    .th3-profile-page,
    .th3-platform-page,
    .th3-dashboard-page,
    .th3-search-page,
    .th3-actrices-explorer,
    .th3-actrices-archive,
    .th3-series-wrap,
    .th3-premium-article,
    .th3-propositions-wrap
) {
    padding-left: var(--th3-responsive-gutter);
    padding-right: var(--th3-responsive-gutter);
}

/* Les blocs Elementor contenant un module TH3 ne doivent pas ajouter une seconde marge. */
body.th3-core :where(.elementor-widget-shortcode, .elementor-shortcode):has(> [class*="th3-"]) {
    min-width: 0;
    max-width: 100%;
}

/* Cibles tactiles cohérentes sans agrandir les liens éditoriaux simples. */
@media (pointer: coarse) {
    body.th3-core :where(
        button,
        input[type="button"],
        input[type="submit"],
        .th3-v6-btn,
        .th3yt-action-button,
        .th3-profile-actions a,
        .th3-membership-upgrade,
        .th3-footer-v300__socials a
    ) {
        min-height: var(--th3-responsive-touch);
    }
}

/* PC portables et petites fenêtres : évite les panneaux trop hauts. */
@media (max-height: 820px) and (min-width: 821px) {
    :root {
        --th3-responsive-header-offset: 72px;
    }

    body.th3-core .th3-v6-panel {
        top: max(16px, var(--th3-responsive-header-offset)) !important;
        max-height: calc(100dvh - 32px) !important;
    }
}

/* Tablettes et petits ordinateurs. */
@media (max-width: 1180px) {
    :root {
        --th3-responsive-gutter: clamp(18px, 3.5vw, 42px);
        --th3-responsive-section-y: clamp(38px, 5.5vw, 72px);
    }

    body.th3-core :where(.th3yt-single-layout, .th3-platform-layout) {
        min-width: 0;
    }
}

/* Tablettes portrait. */
@media (max-width: 900px) {
    :root {
        --th3-responsive-gutter: clamp(16px, 4vw, 30px);
        --th3-responsive-header-offset: 76px;
    }

    body.th3-core :where(.th3-profile-stats, .th3-profile-actions) {
        gap: 12px;
    }

    body.th3-core :where(.th3yt-grid, .th3-series-grid) {
        min-width: 0;
    }
}

/* Mobile et petites tablettes. */
@media (max-width: 700px) {
    :root {
        --th3-responsive-gutter: clamp(12px, 4vw, 20px);
        --th3-responsive-section-y: 40px;
        --th3-responsive-header-offset: 68px;
        --th3-responsive-touch: 46px;
    }

    body.th3-core {
        font-size: 16px;
    }

    body.th3-core :where(input, select, textarea) {
        font-size: 16px; /* évite le zoom automatique sur iOS */
    }

    body.th3-core :where(.th3yt-archive, .th3yt-single) {
        padding-left: var(--th3-responsive-gutter);
        padding-right: var(--th3-responsive-gutter);
    }

    body.th3-core .th3yt-player {
        width: calc(100% + (2 * var(--th3-responsive-gutter)));
        margin-left: calc(-1 * var(--th3-responsive-gutter));
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    body.th3-core :where(.th3yt-video-info, .th3yt-sidebar) {
        margin-left: 0;
        margin-right: 0;
    }

    body.th3-core :where(.th3yt-actions, .th3-login-actions, .th3-crop-actions) {
        width: 100%;
    }

    body.th3-core :where(.th3yt-action-button, .th3-v6-btn, .th3-profile-actions a) {
        touch-action: manipulation;
    }

    body.th3-core .th3-v6-panel,
    body.th3-core .th3-crop-box {
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.th3-core .th3-footer-v300__column a {
        width: 100%;
        min-height: 36px;
        margin-bottom: 6px;
        padding: 7px 0;
    }
}

/* Mobiles standards. */
@media (max-width: 540px) {
    :root {
        --th3-responsive-gutter: 16px;
    }

    body.th3-core :where(.th3yt-grid) {
        gap: 20px 9px;
    }

    body.th3-core :where(.th3-profile-stats, .th3-profile-actions) {
        grid-template-columns: 1fr !important;
    }

    body.th3-core .th3-profile-actions a {
        min-height: 58px;
    }

    body.th3-core .th3-v6-overlay {
        padding: 10px;
    }

    body.th3-core .th3-v6-panel {
        max-width: 430px;
        max-height: calc(100dvh - 20px) !important;
    }

    body.th3-core .th3-crop-area {
        max-height: calc(100dvh - 250px);
    }
}

/* Très petits mobiles : conserver deux cartes uniquement quand elles restent lisibles. */
@media (max-width: 390px) {
    :root {
        --th3-responsive-gutter: 12px;
    }

    body.th3-core .th3yt-grid {
        gap: 18px 8px;
    }

    body.th3-core .th3yt-card-title {
        font-size: 10px;
        line-height: 1.3;
    }

    body.th3-core .th3yt-card-channel,
    body.th3-core .th3yt-card-meta {
        font-size: 8px;
    }

    body.th3-core .th3-v6-panel {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Navigation clavier et préférences système. */
body.th3-core :focus-visible {
    outline: 3px solid var(--th3-gold-light, #e2c37a);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    body.th3-core *,
    body.th3-core *::before,
    body.th3-core *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}