/* ---------------------------------------------------------------------------
   Page vidéo : lecteur habillé, méta-données et cartes de tarifs.

   Ces quatre blocs <style> étaient dispersés dans video.php, dont un imbriqué
   À L'INTÉRIEUR de la balise <video> — du HTML invalide que le navigateur
   corrigeait en le remontant silencieusement dans le <head>, avec un
   margin-top de 140px qui poussait le lecteur vers le bas de l'écran.
   --------------------------------------------------------------------------- */

.errors { background:#900; padding:8px; border-radius:4px; margin-bottom:10px; }
.success { background:#090; padding:8px; border-radius:4px; margin-bottom:10px; }

/* --- Mise en page générale de la page vidéo ---------------------------------
   .categories-offres / .video-left / .video-right n'étaient définis nulle
   part sur cette page : la seule autre feuille à poser .categories-offres est
   style-offres.css, pour une tout autre page. Sans largeur maximale, le
   lecteur (width:100%, aspect-ratio 16/9) s'étirait donc sur toute la largeur
   de l'écran — énorme et toujours plus haut à mesure que l'écran s'élargit —
   et repoussait d'autant les boutons Acheter/S'abonner sous la ligne de
   flottaison. Les noms « video-left »/« video-right » indiquaient une mise en
   page à deux colonnes jamais posée : le lecteur partage maintenant l'espace
   avec le bloc titre/description au lieu de le pousser en dessous, ce qui le
   garde à une taille raisonnable même sur très grand écran. */
.categories-offres {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--e-6) clamp(20px, 5vw, 72px) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e-8);
}

@media (min-width: 960px) {
    .categories-offres {
        grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
        align-items: start;
    }
}

.video-left, .video-right { min-width: 0; }

.videos-similaires {
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-10) auto 0;
}

/* .titre-section (le "À voir aussi") gère déjà sa propre largeur et son
   propre padding — lui en ajouter un second via .videos-similaires aurait
   désaligné le titre par rapport à la grille juste en dessous. */
.videos-similaires .videos-grid { padding-inline: clamp(20px, 5vw, 72px); }

/* Commentaires : dans .video-right (colonne de droite, à côté du lecteur) et
   non plus en pleine largeur sous tout le reste — .categories-offres pose
   déjà la largeur et le padding de cette colonne, donc .commentaires n'a
   besoin que d'un espacement au-dessus des tags. */
.commentaires { margin-top: var(--e-8); }

/* --- Bloc « accès manquant » (sous le lecteur) -------------------------------
   Aucune de ces classes n'avait de règle nulle part : le panneau n'était pas
   un panneau (pas de fond, pas de cadre), et surtout .bouton-abonne/.bouton-
   achat s'affichaient comme du texte de lien nu — palette.css leur donne bien
   une couleur de fond, mais jamais le padding, le border-radius ni le
   display qui les feraient ressembler à des boutons. */
.acces-manquant {
    margin-top: var(--e-5);
    padding: var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-md);
}

.acces-manquant-titre {
    margin: 0 0 var(--e-2);
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 600;
    color: var(--texte);
}

.acces-manquant-texte {
    margin: 0 0 var(--e-4);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.6;
}

.acces-manquant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
}

.bouton-abonne,
.bouton-achat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: var(--r-plein);
    font-weight: 600;
    font-size: var(--t-sm);
    text-decoration: none;
    text-align: center;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

/* Action principale : pleine, en dégradé de marque. */
.bouton-abonne {
    background: var(--degrade-marque);
    color: #fff;
    border: none;
}
.bouton-abonne:hover { background: var(--degrade-marque-survol); transform: translateY(-1px); }

/* Action secondaire : contour seul, pour ne pas concurrencer l'abonnement —
   qui rapporte plus et doit rester le choix par défaut. */
.bouton-achat {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--bord-fort);
}
.bouton-achat:hover { border-color: var(--rose-clair); color: var(--rose-clair); }

.acces-manquant-connexion {
    margin: var(--e-4) 0 0;
    color: var(--texte-faible);
    font-size: var(--t-sm);
}
.acces-manquant-connexion a { color: var(--rose-clair); }

/* --- Titre, description, tags (colonne de droite) --------------------------- */
.titre { margin: 0 0 var(--e-2); }

.video-description {
    margin: var(--e-4) 0 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.7;
}

/* .video-tags est la liste réellement posée par le gabarit — .tag, plus haut
   dans ce fichier, ne cible que les pastilles de la page /tags et ne
   s'appliquait jamais ici : les tags s'affichaient comme une liste de liens
   roses nus, sans le moindre repère de pastille. */
.video-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2);
    padding: 0;
    margin: var(--e-4) 0 0;
    list-style: none;
}
.video-tags a {
    display: inline-block;
    background: var(--rose-voile);
    color: var(--rose-clair);
    border: 1px solid rgba(232, 51, 109, .35);
    padding: 4px 12px;
    border-radius: var(--r-plein);
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}
.video-tags a:hover { background: rgba(232, 51, 109, .22); color: var(--rose); }

/* --- Commentaires ------------------------------------------------------------
   Même constat : formulaire et liste n'avaient aucune mise en forme propre,
   seulement les couleurs de bouton héritées de palette.css. */
.commentaires h2 { margin: 0 0 var(--e-4); }

.commentaire-form {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
    margin-bottom: var(--e-6);
}
.commentaire-form textarea {
    width: 100%;
    padding: var(--e-3);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-md);
    color: var(--texte);
    font: inherit;
    font-size: var(--t-sm);
    line-height: 1.5;
    resize: vertical;
}
.commentaire-form textarea:focus {
    outline: none;
    border-color: var(--rose-clair);
    background: var(--fond-2);
}
.commentaire-form textarea::placeholder { color: var(--texte-faible); }
.commentaire-form button {
    align-self: flex-end;
    padding: 10px 24px;
    border-radius: var(--r-plein);
    font-weight: 600;
    font-size: var(--t-sm);
    border: none;
    cursor: pointer;
}

.commentaire-connexion {
    margin: 0 0 var(--e-6);
    color: var(--texte-faible);
    font-size: var(--t-sm);
}
.commentaire-connexion a { color: var(--rose-clair); }

.commentaires-liste {
    display: flex;
    flex-direction: column;
    gap: var(--e-3);
}
.commentaires-liste .vide {
    color: var(--texte-faible);
    font-size: var(--t-sm);
}
.comment-box {
    padding: var(--e-4);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-md);
}
.comment-text {
    margin: 0 0 var(--e-2);
    color: var(--texte);
    font-size: var(--t-sm);
    line-height: 1.6;
}
.comment-meta {
    margin: 0;
    color: var(--texte-faible);
    font-size: var(--t-xs);
}
.comment-meta strong { color: var(--texte-doux); font-weight: 600; }

/* --- Lecteur habillé, en remplacement des commandes natives du navigateur --- */
.lecteur {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--r-md);
    border: 1px solid var(--bord);
    overflow: hidden;
    outline: none;
}

.lecteur video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* Recouvrement central : gros bouton lecture tant que la vidéo est en pause. */
.lecteur-recouvrement {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .25);
    border: none;
    cursor: pointer;
    transition: opacity var(--transition), background var(--transition);
}
.lecteur.en-lecture .lecteur-recouvrement {
    background: transparent;
    opacity: 0;
    pointer-events: none;
}
.lecteur:not(.en-lecture):hover .lecteur-recouvrement { background: rgba(0, 0, 0, .35); }

.lecteur-icone-centrale {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--rose);
    box-shadow: var(--ombre-2);
    transition: transform var(--transition), background var(--transition);
}
.lecteur-recouvrement:hover .lecteur-icone-centrale { background: var(--rose-clair); transform: scale(1.06); }
.lecteur-icone-centrale svg { width: 30px; height: 30px; fill: #fff; margin-left: 3px; }

/* Barre de commandes basse : visible au repos et en pause, discrète en
   lecture (n'apparaît qu'au survol) — comportement standard des lecteurs vidéo. */
.lecteur-commandes {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: var(--e-2) var(--e-3) var(--e-3);
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
    opacity: 1;
    transition: opacity var(--transition);
}
.lecteur.en-lecture .lecteur-commandes { opacity: 0; }
.lecteur.en-lecture:hover .lecteur-commandes,
.lecteur:focus-within .lecteur-commandes { opacity: 1; }

.lecteur-barre {
    position: relative;
    height: 4px;
    margin-bottom: var(--e-2);
    background: rgba(255,255,255,.25);
    border-radius: var(--r-plein);
    cursor: pointer;
}
.lecteur-barre:hover { height: 6px; }
.lecteur-barre-remplie {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: var(--rose);
    border-radius: var(--r-plein);
}

.lecteur-ligne {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.lecteur-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--transition);
}
.lecteur-btn:hover { background: rgba(255,255,255,.12); }
.lecteur-btn svg { width: 20px; height: 20px; fill: #fff; }
/* Classe plutôt que l'attribut HTML "hidden" : sa réflexion depuis la
   propriété JS .hidden n'est pas fiable sur les éléments SVG, ce qui laissait
   les icônes lecture/pause et son/muet affichées l'une sur l'autre. */
.icone-masquee { display: none; }

.lecteur-temps {
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.lecteur-espace { flex: 1; }

@media (max-width: 640px) {
    .lecteur-icone-centrale { width: 56px; height: 56px; }
    .lecteur-icone-centrale svg { width: 24px; height: 24px; }
}

.video-meta-inline{
    display:flex;
    justify-content:center;
    gap:20px;
    list-style:none;
    padding:0;
    margin:18px 0;
}
/* Chaque donnée en colonne : libellé discret au-dessus, valeur en évidence.
   Plus lisible qu'une ligne d'emoji suivis de chiffres. */
.video-meta-inline li{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding-right:var(--e-5);
    border-right:1px solid var(--bord);
}
.video-meta-inline li:last-child{ border-right:none; padding-right:0; }

.meta-libelle{
    font-size:var(--t-xs);
    font-weight:500;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--texte-faible);
}
.video-meta-inline .meta-value{
    font-size:var(--t-md);
    font-weight:600;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
    color:var(--texte);
}

.tag {
    display: inline-block;
    background: var(--rose-voile);
    color: var(--rose-clair);
    border: 1px solid rgba(232,51,109,.35);
    padding: 4px 12px;
    border-radius: var(--r-plein);
    font-size: 0.85rem;
    margin: 2px 4px 2px 0;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* 1 MOIS — ROSE */
.pricing-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(255, 47, 125, 0.2), rgba(255, 105, 180, 0.15));
    border: 1px solid rgba(255, 47, 125, 0.4);
}

.pricing-card:nth-child(1) .price {
    color: #ff2f7d;
}

.pricing-card:nth-child(1) .epoch-btn {
    background: linear-gradient(135deg, #ff2f7d, #ff6ec7);
}


/* 3 MOIS — VIOLET (mise en avant) */
.pricing-card.popular {
    background: linear-gradient(135deg, rgba(140, 82, 255, 0.25), rgba(180, 120, 255, 0.15));
    border: 2px solid #8c52ff;
    box-shadow: 0 0 30px rgba(140, 82, 255, 0.5);
}

.pricing-card.popular .price {
    color: #b388ff;
}

.pricing-card.popular .epoch-btn {
    background: linear-gradient(135deg, #8c52ff, #c084fc);
}


/* GOLD — DORÉ */
.gold {
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,180,0,0.1));
    border: 1px solid gold;
    box-shadow: 0 0 25px rgba(255,215,0,0.4);
}

.gold .price {
    color: gold;
}

.gold-btn {
    background: linear-gradient(135deg, gold, #ffcc00);
    color: #000;
}
.pricing-container {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 40px 20px;
}

/* CARTE */


/* HOVER */
.pricing-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 40px rgba(255, 0, 100, 0.4);
}

/* TITRE */
.pricing-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

/* PRIX */
.price {
    font-size: 2.2em;
    font-weight: bold;
    color: #ff2f7d;
    margin: 10px 0;
}

/* BOUTON */
.epoch-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #ff2f7d, #ff6ec7);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 0 15px rgba(255, 0, 100, 0.6);
}

/* HOVER bouton */
.epoch-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(255, 0, 100, 1);
}

/* SECURE */
.secure {
    font-size: 0.85em;
    margin-top: 15px;
    opacity: 0.8;
}

/* POPULAIRE */
.popular {
    border: 2px solid #ff2f7d;
    transform: scale(1.05);
}

.popular-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff2f7d;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: bold;
}

/* GOLD */
.gold {
    background: linear-gradient(135deg, #1a1a1a, #2b2b2b);
    border: 1px solid gold;
}

.gold .price {
    color: gold;
}

.gold-btn {
    background: linear-gradient(135deg, gold, #ffcc00);
    color: #000;
    box-shadow: 0 0 20px rgba(255,215,0,0.8);
}

.gold-btn:hover {
    box-shadow: 0 0 30px rgba(255,215,0,1);
}