/* ---------------------------------------------------------------------------
   Page d'un film en location / achat.

   Reprend la charte du site (fond noir, Times, texte #C8D2DA fixes dans
   design.css) plutot que l'habillage de Vimeo. Les fonctionnalites sont les
   memes, la presentation est la notre.
   --------------------------------------------------------------------------- */

:root {
    --vod-texte:       #C8D2DA;
    --vod-attenue:     #8b949c;
    --vod-trait:       #2b2f33;
    --vod-surface:     #131518;
    --vod-accent:      rgb(80, 130, 220);   /* deja utilise par oli_vod.php */
    --vod-accent-vif:  rgb(108, 154, 233);
    --vod-accent-doux: rgba(80, 130, 220, 0.14);
    --vod-alerte:      #d98b5f;
    --vod-largeur:     1040px;              /* largeur commune bandeau / contenu */
}

/* --- Bandeau de bande-annonce --------------------------------------------- */

.vod-hero {
    position: relative;
    max-width: var(--vod-largeur);
    margin: 24px auto 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--vod-trait);
    overflow: hidden;
}

.vod-hero-fond {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Un voile bas assure la lisibilite du bouton quelle que soit l'image. */
.vod-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
    pointer-events: none;
    transition: opacity 0.25s;
}

.vod-hero-lecture {
    position: absolute;
    left: 22px;
    bottom: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px 11px 14px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    font-family: inherit;
    font-size: 1.02em;
    cursor: pointer;
    backdrop-filter: blur(3px);
    transition: background-color 0.15s, border-color 0.15s;
}

.vod-hero-lecture:hover,
.vod-hero-lecture:focus-visible {
    background: var(--vod-accent);
    border-color: var(--vod-accent);
    outline: none;
}

.vod-hero-triangle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
}

.vod-hero-triangle svg {
    width: 17px;
    height: 17px;
    fill: #000;
    margin-left: 2px;   /* recentre optiquement le triangle dans le disque */
}

.vod-hero-video {
    display: none;
    width: 100%;
    height: 100%;
}

/* Une fois la lecture lancee, l'image et l'invite s'effacent. */
.vod-hero-en-lecture .vod-hero-fond,
.vod-hero-en-lecture .vod-hero-lecture {
    display: none;
}

.vod-hero-en-lecture::after {
    opacity: 0;
}

.vod-hero-en-lecture .vod-hero-video,
.vod-hero-en-lecture .plyr {
    display: block;
    height: 100%;
}

/* --- Mise en page generale ------------------------------------------------ */

.vod-film {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: var(--vod-largeur);
    margin: 28px auto 12px;
    align-items: flex-start;
}

.vod-infos {
    flex: 1 1 440px;
    min-width: 0;
}

.vod-infos h1 {
    font-size: 2em;
    margin: 0 0 4px;
    line-height: 1.15;
}

.vod-soustitre {
    color: var(--vod-attenue);
    font-style: italic;
    margin: 0 0 18px;
}

/* --- Metadonnees ---------------------------------------------------------- */

.vod-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    padding: 0;
    margin: 0 0 18px;
    font-size: 0.92em;
    color: var(--vod-attenue);
}

.vod-meta li:not(:last-child)::after {
    content: "·";
    margin-left: 10px;
}

.vod-synopsis {
    margin: 0 0 20px;
    max-width: 62ch;   /* au-dela, l'oeil perd la ligne */
}

.vod-langues {
    margin: 0 0 22px;
    font-size: 0.92em;
    color: var(--vod-attenue);
}

.vod-langues-titre {
    color: var(--vod-texte);
}

.vod-langues-titre::after {
    content: " : ";
}

/* --- Offres --------------------------------------------------------------- */

.vod-offres {
    flex: 0 1 320px;
    border: 1px solid var(--vod-trait);
    background: var(--vod-surface);
    padding: 20px;
}

.vod-boutons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.vod-bouton {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 13px 20px;
    background: transparent;
    color: var(--vod-texte);
    border: 1px solid var(--vod-trait);
    border-radius: 3px;
    font-family: inherit;
    font-size: 1em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.vod-bouton:hover,
.vod-bouton:focus-visible {
    border-color: var(--vod-accent);
    background: var(--vod-accent-doux);
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Louer : l'action principale, pleine et contrastee. */
.vod-bouton-principal {
    background: var(--vod-accent);
    border-color: var(--vod-accent);
    color: #fff;
}

.vod-bouton-principal:hover,
.vod-bouton-principal:focus-visible {
    background: var(--vod-accent-vif);
    border-color: var(--vod-accent-vif);
}

/* Acheter : meme poids visuel, en creux, pour ne pas rivaliser avec Louer. */
.vod-bouton-secondaire {
    border-color: var(--vod-accent);
    color: #fff;
}

.vod-bouton[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.vod-bouton[disabled]:hover {
    background: var(--vod-accent);
    border-color: var(--vod-accent);
}

.vod-bouton-secondaire[disabled]:hover {
    background: transparent;
}

.vod-bouton strong {
    font-size: 1.08em;
    font-weight: bold;
}

.vod-prix {
    font-size: 1.26em;
    line-height: 1.15;
}

.vod-detail,
.vod-mention {
    color: var(--vod-attenue);
    font-size: 0.84em;
}

.vod-bouton-principal .vod-detail,
.vod-bouton-secondaire .vod-detail {
    color: rgba(255, 255, 255, 0.75);
}

.vod-mention {
    margin: 14px 0 0;
}

/* La mention de TVA accompagne le prix sans lui disputer l'attention :
   l'acheteur decide sur le montant TTC, le detail n'est la que pour dire
   qu'il n'y aura pas de supplement. */
.vod-tva {
    font-size: 0.76em;
    opacity: 0.7;
}

/* --- Recapitulatif de paiement -------------------------------------------- */

.vod-recu {
    margin: 22px auto 6px;
    border-collapse: collapse;
    font-size: 0.9em;
    text-align: left;
}

.vod-recu caption {
    padding-bottom: 6px;
    color: var(--vod-attenue);
    text-align: left;
}

.vod-recu th {
    padding: 2px 26px 2px 0;
    font-weight: normal;
    color: var(--vod-attenue);
}

.vod-recu td {
    padding: 2px 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vod-recu-total th,
.vod-recu-total td {
    padding-top: 6px;
    border-top: 1px solid currentColor;
    font-weight: bold;
    color: inherit;
}

/* --- Champ e-mail --------------------------------------------------------- */

.vod-champ {
    display: block;
}

.vod-champ > span {
    display: block;
    margin-bottom: 6px;
    font-size: 0.94em;
}

.vod-champ input[type="email"],
.vod-lien-brut input {
    width: 100%;
    padding: 9px 11px;
    background: #0b0d0f;
    color: var(--vod-texte);
    border: 1px solid var(--vod-trait);
    border-radius: 3px;
    font-family: inherit;
    font-size: 1em;
}

.vod-champ input[type="email"]:focus,
.vod-lien-brut input:focus {
    outline: none;
    border-color: var(--vod-accent);
    box-shadow: 0 0 0 3px var(--vod-accent-doux);
}

.vod-champ small {
    display: block;
    margin-top: 6px;
    color: var(--vod-attenue);
    font-size: 0.84em;
    line-height: 1.35;
}

.vod-erreur {
    border-left: 3px solid var(--vod-alerte);
    padding-left: 12px;
    margin: 0 0 18px;
    color: var(--vod-alerte);
    font-size: 0.9em;
    line-height: 1.4;
}

.vod-avertissement {
    color: var(--vod-alerte);
}

/* Bandeau de developpement : volontairement voyant, pour qu'une instance de
   test ne puisse jamais etre confondue avec le site en production. */
.vod-mode-local {
    margin: 0 0 18px;
    padding: 9px 12px;
    border: 1px dashed var(--vod-alerte);
    color: var(--vod-alerte);
    font-size: 0.84em;
    line-height: 1.4;
}

/* --- Palmares et liens ---------------------------------------------------- */

.vod-palmares {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 0.86em;
    color: var(--vod-attenue);
    columns: 2;
    column-gap: 28px;
}

.vod-palmares li {
    margin-bottom: 4px;
    break-inside: avoid;
}

.vod-liens {
    font-size: 0.9em;
}

/* --- Photogrammes --------------------------------------------------------- */

.vod-galerie {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    /* Un conteneur flex etire ses enfants sur l'axe transversal. Une image dont
       la hauteur est « auto » y prend donc la hauteur de la plus grande de ses
       voisines, deformee pour remplir la ligne : une photo 16/9 posee a cote
       d'une image carree devenait carree elle aussi. */
    align-items: flex-start;
    max-width: var(--vod-largeur);
    margin: 0 auto 32px;
}

.vod-galerie img {
    flex: 1 1 300px;
    max-width: 336px;
    /* Une tuile de forme constante, et l'image logee dedans sans etre etiree.
       Les photos de film sont toutes en 1920x1080 : elles la remplissent
       exactement. Une image d'un autre format s'y poserait entiere sur le fond
       noir, plutot que d'etre recadree. */
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
    border: 1px solid var(--vod-trait);
}

/* --- Pages de message (merci, refus) -------------------------------------- */

.vod-message {
    max-width: 640px;
    margin: 48px auto;
    text-align: center;
}

.vod-message h1 {
    font-size: 1.7em;
    margin-bottom: 10px;
}

.vod-message .vod-bouton {
    align-items: center;
}

.vod-lien-brut {
    margin-top: 26px;
    font-size: 0.86em;
    color: var(--vod-attenue);
}

/* --- Page de lecture ------------------------------------------------------ */

.vod-lecture {
    padding: 0;
}

.vod-lecteur {
    max-width: 1200px;
    /* 44px : le selecteur de langue du site est en position fixe en haut a gauche */
    margin: 44px auto 0;
    padding: 0 16px 32px;
}

.vod-lecteur-pied {
    margin-top: 16px;
}

.vod-lecteur-pied h1 {
    font-size: 1.3em;
    margin: 0 0 4px;
}

/* Plyr aux couleurs du site : ses variables suffisent, pas de surcharge de regles. */
.plyr {
    --plyr-color-main: var(--vod-accent);
    --plyr-video-background: #000;
    --plyr-menu-background: #16181b;
    --plyr-menu-color: var(--vod-texte);
    --plyr-font-family: inherit;
    --plyr-captions-background: rgba(0, 0, 0, 0.75);
}

/* --- Petits ecrans -------------------------------------------------------- */

@media (max-width: 760px) {
    .vod-film {
        gap: 24px;
        margin-top: 20px;
    }

    .vod-infos h1 {
        font-size: 1.6em;
    }

    .vod-palmares {
        columns: 1;
    }

    .vod-offres {
        flex: 1 1 100%;
    }

    .vod-hero-lecture {
        left: 12px;
        bottom: 12px;
        padding: 9px 15px 9px 11px;
        font-size: 0.94em;
    }
}

/* Accord expres avant paiement. Jamais pre-cochee : un consentement pre-coche
   n'en est pas un, et c'est precisement ce que la loi refuse ici. */
.vod-consentement {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0 0 .8rem;
    font-size: .88rem;
    line-height: 1.45;
    cursor: pointer;
}

.vod-consentement input {
    flex: 0 0 auto;
    margin-top: .2rem;
    width: 1rem;
    height: 1rem;
    accent-color: var(--vod-accent);
    cursor: pointer;
}

.vod-legal {
    margin: 0 0 1.2rem;
    font-size: .82rem;
    opacity: .75;
}

.vod-legal a { color: inherit; }