/* ---------------------------------------------------------------------------
   Catégories : rangées défilantes horizontalement.

   Repris des <style> de categories.php, où le bloc des badges était émis DEUX
   FOIS dans la même page (avant et après la grille). Doublon supprimé.
   --------------------------------------------------------------------------- */

/* ======= Global =======
   Le reset ci-dessous (fond #111, texte blanc, police sans-serif générique)
   a été retiré : style-principal.css et design-system.css posent déjà ces
   bases pour tout le site — avec la vraie police (Inter) et les jetons de
   couleur. Cette page chargeait sa propre police après coup, d'où un rendu
   visiblement différent des autres pages (méta, description... en police
   système au lieu d'Inter). Même chose pour le badge « Exclusive/Semaine » à
   droite : sa classe n'est utilisée nulle part dans le gabarit de carte
   (carte-video.ejs utilise `.carte-badge--exclusive`), c'était du code mort. */
a { color:inherit; text-decoration:none; }

/* Même échelle que .titre-section et .rangee-entete h2 (accueil, page vidéo) :
   ces titres de rangée gardaient une taille fixe de 22px quel que soit
   l'écran, nettement plus petite que partout ailleurs sur le site où le même
   type de titre grandit jusqu'à 30-34px. Le résultat détonnait à côté du
   reste — un titre de rangée qui ne s'impose pas au-dessus de sa grille. */
.h3themevideo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-4);
    margin: 0 0 var(--e-5);
    font-family: var(--police-titre);
    font-size: clamp(var(--t-lg), 2.5vw, var(--t-xl));
    font-weight: 600;
    color: var(--texte);
}

.cat-titre-lien {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    color: var(--texte);
}
.cat-titre-lien:hover { color: var(--rose-clair); }

/* Le compteur est mis à l'écart de la police à empattements du titre :
   les chiffres y sont trop larges et déséquilibraient la ligne. */
.cat-titre-compte {
    padding: 2px 9px;
    background: var(--fond-2);
    border-radius: var(--r-plein);
    color: var(--texte-faible);
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.h3themevideo .h3boutonvoirtous {
    flex: 0 0 auto;
    color: var(--rose-clair);
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    font-weight: 500;
    white-space: nowrap;
}
.h3themevideo .h3boutonvoirtous:hover { color: var(--rose); }

/* ======= Catégories ======= */
/* Rangée pleine largeur. Avant : une colonne de 300px pour une vignette qui
   reprenait la miniature de la première vidéo de la rangée — la même image
   deux fois côte à côte — puis un flex-wrap avec des marges en pourcentage
   qui se désalignait dès que la fenêtre changeait de largeur. */
.categorie {
    width: 100%;
    max-width: var(--largeur-max);
    margin: 0 auto var(--e-10);

    /* --e-5 (24px, fixe) collait les titres de rangée au bord sur grand
       écran — le reste du site respire avec une marge qui grandit avec la
       fenêtre. Même formule que --page-marge (page d'accueil), reprise ici
       pour ne pas dépendre d'une feuille propre à une autre page. */
    padding-inline: clamp(20px, 5vw, 72px);

    /* palette.css donne à .categorie son fond et sa bordure arrondie (même
       traitement « panneau » que .bloc, .container…), mais ne pose aucun
       padding vertical — seul le padding horizontal était défini ici. Le
       titre touchait donc directement le bord haut du panneau, et la
       dernière rangée de cartes son bord bas. */
    padding-block: var(--e-6);
}

.cat-entete { padding-inline: clamp(20px, 5vw, 72px); padding-bottom: var(--e-5); }

.videos-container { position: relative; min-width: 0; }

/* Slider */
/*.videos-slider { display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; cursor:grab; padding-bottom:5px; }*/
/* Masque la scrollbar horizontal et vertical du slider mais laisse le scroll actif */
.videos-slider-wrapper {
    overflow: hidden; /* masque toutes les scrollbars */
    position: relative;
}

/* Slider interne scrollable horizontal */
.videos-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;   /* scroll horizontal activé */
    overflow-y: hidden; /* pas de scroll vertical */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;

    /* « scroll-snap-align: start » était posé sur .video-card, mais SANS
       scroll-snap-type sur ce conteneur : l'accrochage ne s'appliquait donc
       jamais et les rangées s'arrêtaient au milieu d'une vignette.
       « proximity » plutôt que « mandatory » : on aide l'alignement sans
       confisquer un défilement libre. */
    scroll-snap-type: x proximity;

    /* Le curseur annonce le glisser-déposer, désormais réellement implémenté
       (voir le script en bas de page). Il était déclaré en mobile seulement,
       sur une page où le glisser n'existait pas du tout. */
    cursor: grab;

    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE 10+ */
}

.videos-slider.attrape { cursor: grabbing; scroll-behavior: auto; }

/* Pendant un glisser, on neutralise la sélection de texte et le glisser natif
   des images, qui prennent sinon le pas sur le geste. */
.videos-slider.attrape * { user-select: none; }
.videos-slider img { -webkit-user-drag: none; user-drag: none; }

/* La taille, les couleurs, les badges et le texte de la carte viennent tous
   de cartes.css — le même composant que sur l'accueil et le catalogue.
   Cette page ne fixe que la largeur et l'accrochage au défilement, propres
   au slider horizontal (les cartes n'ont sinon aucune contrainte de taille
   dans un flex qui défile). Une ancienne règle imposait ici une hauteur de
   280px avec overflow:hidden — plus petite que le contenu réel de la carte
   une fois le titre et la description comptés, qui se retrouvaient donc
   invisibles, coupés juste sous la ligne de durée. Les classes de badge
   qu'elle stylait (.premium-badge, .lock-overlay, .exclusive-badge,
   .video-duration) ne sont par ailleurs utilisées par aucun gabarit :
   carte-video.ejs pose .carte-badge, .carte-verrou et .carte-duree, déjà
   stylés par cartes.css. */
.videos-slider > .video-card {
    scroll-snap-align: start;

    /* flex-shrink à 0 : un conteneur en overflow-x:auto rétrécit quand même
       ses enfants flex par défaut avant de laisser déborder, ce qui aurait
       tassé les cartes au lieu de les laisser défiler à leur largeur réelle. */
    flex: 0 0 auto;
    width: 320px;
}
.videos-slider::-webkit-scrollbar {
    display: none;             /* Chrome, Safari, Edge */
}

/* « body { overflow-y: hidden } » a été retiré : la règle visait à masquer la
   barre de défilement verticale, mais elle coupe le défilement de la page
   entière dès que le navigateur choisit body plutôt que html comme élément
   défilant — ce qui est le cas sur plusieurs navigateurs mobiles. Masquer une
   barre de défilement ne vaut pas le risque de rendre la page impossible à
   parcourir. Seul le carrousel horizontal masque la sienne, ci-dessus. */

/* Flèches desktop */
.btn-prev, .btn-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(13, 11, 12, .82);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bord-fort);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    /* Au-dessus de 12 : ni .videos-slider-wrapper ni .videos-container ne créent
       de contexte d'empilement (position:relative + z-index:auto), donc les
       z-index des badges de carte — .video-duration à 10, .exclusive-badge à 12
       — remontent au MÊME contexte que ces boutons et passaient devant eux. */
    z-index: 15;
    transition: background .2s, opacity .2s, border-color .2s;
}
.btn-prev { left: 8px; }
.btn-next { right: 8px; }
.btn-prev:hover, .btn-next:hover { background: var(--rose); border-color: var(--rose); }

/* En bout de course, la flèche ne sert plus à rien : le JS pose cette classe
   plutôt que de laisser un bouton qui ne fait rien. */
.btn-prev.inactif, .btn-next.inactif { opacity: 0; pointer-events: none; }

/* ======= Responsive Mobile ======= */
@media (max-width:768px){

.h3themevideo {
    font-weight: 400;  /* texte plus fin que bold */
    font-size: 1rem;   /* taille un peu plus petite si tu veux */
    margin: 10px 0;
    text-align:left;
}
    .categorie {
        margin-bottom: var(--e-8);
        padding-inline: var(--e-4);
    }

    .videos-container {
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    /* Le tactile utilise le défilement natif du navigateur, avec son inertie :
       le glisser à la souris ne s'y applique pas, et « cursor » n'a pas de sens. */
    .video-card {
        flex: 0 0 auto;
        width: 70%;
    }

    /* Pas de flèches sur mobile */
    .btn-prev, .btn-next {
        display: none;
    }
}