/* =====================================================================
 | TuYaMo — /videos/ — AFFICHAGE DU PANNEAU DE PRIX (APRÈS LES 9 s)
 |
 | PROBLÈME CORRIGÉ
 | ----------------
 | Le panneau de prix était un calque `position: absolute` enfermé dans
 | le cadre du lecteur. Ce cadre respecte un rapport 16/9 : sur un
 | téléphone de 360 px de large, il ne fait qu'environ 200 px de haut.
 | Les trois formules d'accès ne pouvaient donc pas y tenir : la carte
 | était coupée par le `overflow: hidden` du lecteur, sans aucun
 | défilement atteignable au doigt.
 |
 | SOLUTION
 | --------
 | Sur téléphone, le panneau SORT du cadre du lecteur et devient une
 | feuille du bas (« bottom sheet ») en `position: fixed`, dimensionnée
 | sur la hauteur de l'écran :
 |   - les trois propositions sont visibles d'un coup ;
 |   - la liste défile au doigt si l'écran est vraiment court ;
 |   - la page derrière ne défile plus par accident ;
 |   - la feuille passe au-dessus de la barre d'onglets basse
 |     (celle-ci est en z-index 60, la feuille en 70).
 |
 | Ce fichier est chargé APRÈS `tmv-tailwind.css` : il ne fait que
 | surcharger. Aucune règle existante n'est supprimée, aucune logique
 | métier n'est touchée.
 |
 | Les couleurs reprennent exactement celles de `tmv-tailwind.css`
 | (blanc #fff, bordure #e5e5e5, texte doux #737373).
 * ===================================================================== */

/* ---------------------------------------------------------------------
 | 1. TOUS FORMATS — la carte ne doit JAMAIS être coupée
 |
 | Si la carte dépasse la place disponible, son contenu doit rester
 | atteignable : on autorise le défilement plutôt que la coupure.
 * ------------------------------------------------------------------- */

.tmv-paywall {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.tmv-paywall .tmv-paywall-card {
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------
 | 2. TÉLÉPHONE (ou tout cadre trop bas) — feuille du bas plein écran
 |
 | Deux conditions, car la gêne dépend de la HAUTEUR disponible :
 |   - largeur <= 700 px  : téléphones en portrait ;
 |   - hauteur <= 560 px  : téléphones en paysage, petites fenêtres.
 * ------------------------------------------------------------------- */

@media (max-width: 700px), (max-height: 560px) {

    .tmv-paywall {
        /* `fixed` échappe au cadre 16/9 ET à son `overflow: hidden`. */
        position: fixed;
        inset: 0;
        z-index: 70;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 0;
        overflow: hidden;
        background-color: rgba(8, 10, 18, .66);
    }

    .tmv-paywall .tmv-paywall-card {
        width: 100%;
        max-width: 560px;
        /* `dvh` suit la barre d'adresse mobile ; `vh` sert de repli. */
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        padding: 0 14px calc(16px + env(safe-area-inset-bottom, 0px));
        border-radius: 22px 22px 0 0;
        text-align: left;
        animation: tmv-sheet-up 300ms ease-out both;
    }

    /* Poignée de préhension : signale clairement une feuille glissable. */
    .tmv-paywall .tmv-paywall-card::before {
        content: '';
        display: block;
        width: 46px;
        height: 4px;
        margin: 9px auto 8px;
        border-radius: 999px;
        background-color: #d4d4d4;
    }

    /* --- En-tête : il défile avec le contenu ---
       On ne le colle PAS en haut : deux blocs collants au même `top: 0`
       se chevaucheraient au défilement, ce qui masquerait justement le
       premier prix. La carte s'ouvrant en haut de son contenu,
       l'en-tête est de toute façon visible d'emblée. */
    .tmv-paywall .tmv-paywall-badge {
        margin-bottom: 6px;
    }

    .tmv-paywall .tmv-paywall-title {
        margin-bottom: 2px;
        font-size: 1.0625rem;
        line-height: 1.5rem;
    }

    .tmv-paywall .tmv-paywall-text {
        margin-bottom: 12px;
        font-size: 0.8125rem;
        line-height: 1.15rem;
    }

    /* --- Les propositions, compactées pour en montrer davantage --- */
    .tmv-paywall .tmv-choices {
        gap: 8px;
    }

    .tmv-paywall .tmv-choice {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    /* Un doigt ne survole pas : l'effet de survol décalait la carte. */
    .tmv-paywall .tmv-choice:hover {
        background-color: transparent;
    }

    .tmv-paywall .tmv-choice-main:hover {
        background-color: rgb(254 242 242 / 0.6);
    }

    /* --- Solde : dernière ligne, jamais collée sous le bord --- */
    .tmv-paywall .tmv-paywall-solde {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #f5f5f5;
    }

    /* --- Modal de paiement au-dessus de la feuille de prix ---
       Dans ce media query, .tmv-paywall passe en z-index: 70 (fixed).
       Les modals (.tmv-modal, watch.css) restaient à 60 : invisibles
       et inatteignables sous la feuille. On les repasse devant, sans
       toucher au toast (z-index: 80, watch.css) qui doit rester
       au-dessus de tout, modal compris. */
    .tmv-modal {
        z-index: 75;
    }
}

@keyframes tmv-sheet-up {
    from { transform: translateY(16%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ---------------------------------------------------------------------
 | 3. Écrans VRAIMENT courts : on resserre encore, sans jamais masquer
 |    l'essentiel — les TITRES et les PRIX des trois formules restent
 |    visibles ; seules les descriptions secondaires cèdent la place.
 * ------------------------------------------------------------------- */

@media (max-height: 430px) {

    .tmv-paywall .tmv-paywall-card {
        max-height: 96vh;
        max-height: 96dvh;
    }

    .tmv-paywall .tmv-paywall-badge {
        display: none;
    }

    .tmv-paywall .tmv-paywall-title {
        font-size: 1rem;
    }

    .tmv-paywall .tmv-paywall-text {
        margin-bottom: 8px;
    }

    .tmv-paywall .tmv-choice-desc {
        display: none;
    }
}

/* ---------------------------------------------------------------------
 | 4. Page figée derrière la feuille (classe `tmv-sheet-open` posée sur
 |    <html> par le lecteur). Sans cela, le doigt faisait défiler la
 |    page au lieu de la liste des formules.
 * ------------------------------------------------------------------- */

html.tmv-sheet-open,
html.tmv-sheet-open body {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Sur grand écran, le panneau reste dans le lecteur : rien à figer. */
@media (min-width: 701px) and (min-height: 561px) {
    html.tmv-sheet-open,
    html.tmv-sheet-open body {
        overflow: visible;
        overscroll-behavior: auto;
    }
}

/* `hidden` doit rester prioritaire sur tous nos `display`. */
.tmv-paywall[hidden] {
    display: none !important;
}