/* ==========================================================================
   components.css — reprise des composants existants sur les jetons du
   design system. Chargé après design-system.css.

   On garde les noms de classes du HTML actuel (.video-card, .navbar…) pour ne
   pas devoir toucher au PHP de toutes les pages : seul le style change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau fin au-dessus de la navigation
   Le message de bienvenue occupait un gros bloc centré SOUS la barre, sur
   l'accueil et la page vidéos. Il repoussait les vignettes hors de l'écran
   pour ce qui n'est qu'une phrase d'accroche.
   -------------------------------------------------------------------------- */

.bandeau-haut {
    background: var(--fond-1);
    border-bottom: 1px solid var(--bord);
    font-size: var(--t-xs);
}

.bandeau-haut-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-4);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--e-2) var(--e-5);
}

.bandeau-haut-texte {
    color: var(--texte-doux);
    letter-spacing: 0.01em;
}
.bandeau-haut-texte strong { color: var(--texte); font-weight: 600; }

.bandeau-haut-compteur {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    color: var(--texte-doux);
    white-space: nowrap;
}
.bandeau-haut-compteur:hover { color: var(--rose-clair); }
.bandeau-haut-compteur strong { color: var(--texte); font-weight: 600; }
.bandeau-haut-compteur i { font-size: 14px; }

@media (max-width: 700px) {
    .bandeau-haut-contenu { padding: var(--e-2) var(--e-4); gap: var(--e-2); }
    /* Sur mobile, seul le compteur reste : la phrase complète prendrait
       deux lignes pour une information secondaire. */
    .bandeau-haut-texte { display: none; }
    .bandeau-haut-compteur { margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   Recherche de vidéos
   -------------------------------------------------------------------------- */

.barre-recherche {
    display: flex;
    gap: var(--e-2);
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-5) auto var(--e-2);
    padding-inline: var(--e-5);
}

/* Le gabarit pose .barre-recherche directement sur le <form> : la règle
   `.barre-recherche form` visait un <form> imbriqué qui n'existe pas, si bien
   que champ et bouton s'affichaient avec l'apparence native du navigateur. */
.barre-recherche { max-width: min(var(--largeur-max), 100%); }
.barre-recherche .champ-recherche { max-width: 560px; }

.barre-recherche .btn-chercher {
    min-height: 46px;
    padding: 0 var(--e-5);
    border: none;
    border-radius: var(--r-plein);
    background: var(--degrade-marque, var(--rose));
    color: #fff;
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), transform var(--transition);
}
.barre-recherche .btn-chercher:hover { background: var(--degrade-marque-survol, var(--rose-clair)); transform: translateY(-1px); }

.champ-recherche {
    position: relative;
    flex: 1;
}

.champ-recherche i {
    position: absolute;
    left: var(--e-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--texte-faible);
    font-size: 18px;
    pointer-events: none;
}

.champ-recherche input {
    width: 100%;
    min-height: 46px;
    padding: var(--e-3) var(--e-4) var(--e-3) 44px;
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-plein);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: var(--t-sm);
    transition: border-color var(--transition), background var(--transition);
}
.champ-recherche input::placeholder { color: var(--texte-faible); }
.champ-recherche input:focus {
    outline: none;
    border-color: var(--rose);
    background: var(--fond-2);
}

.barre-recherche .btn-effacer {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--e-4);
    min-height: 46px;
    border: 1px solid var(--bord);
    border-radius: var(--r-plein);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    white-space: nowrap;
}
.barre-recherche .btn-effacer:hover { background: var(--fond-2); color: var(--texte); }

@media (max-width: 640px) {
    .barre-recherche { padding-inline: var(--e-4); }
}

/* --------------------------------------------------------------------------
   Navigation
   Avant : logo en position absolue chevauchant le menu, .nav-menu poussé par
   un margin-left:200px en dur — d'où le débordement horizontal dès que le menu
   s'allonge (sur offres.php, « CASTING » sortait de l'écran).
   Après : une vraie barre en flex, qui tient à toutes les largeurs.
   -------------------------------------------------------------------------- */

.navbar {
    display: flex;
    align-items: center;
    gap: var(--e-6);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--e-3) var(--e-5);
    background: transparent;
    font-family: var(--police-texte);
    font-weight: 500;
    letter-spacing: 0;
}

header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(13, 11, 12, 0.82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--bord);
}

.nav-logo { flex: 0 0 auto; line-height: 0; }
.nav-logo img { max-height: 46px; margin: 0; width: auto; }

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--e-1);
    list-style: none;
    margin: 0;          /* remplace margin-top:70px / margin-left:200px */
    padding: 0;
    flex: 1 1 auto;
}

.nav-menu li a {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-3);
    border-radius: var(--r-sm);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color var(--transition), background var(--transition);
}

.nav-menu li a:hover { color: var(--texte); background: var(--fond-2); }
.nav-menu li a i,
.nav-menu li a:hover i { color: currentColor; font-size: 18px; }

/* Page courante : un repère qui manquait totalement. */
.nav-menu li a[aria-current="page"] {
    color: var(--texte);
    background: var(--rose-voile);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    flex: 0 0 auto;
    margin: 0;
}

.btn-login,
.btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    /* style-principal.css impose margin-top:25px à ces deux boutons. Dans la
       nouvelle barre en flex, ça les poussait 25px sous l'axe du header collant,
       jusqu'à les faire déborder hors de sa zone cliquable. */
    margin: 0;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-plein);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    min-height: 40px;
    transition: background var(--transition), color var(--transition);
}

.btn-login {
    color: var(--texte);
    border: 1px solid var(--bord-fort);
    background: transparent;
}
.btn-login:hover { background: var(--fond-2); color: var(--texte); }
.btn-login i { color: var(--rose) !important; }

.btn-subscribe { background: var(--rose); color: #fff; }
.btn-subscribe:hover { background: var(--rose-clair); color: #fff; }

/* --------------------------------------------------------------------------
   Grille de vidéos
   Avant : jusqu'à 4 colonnes de vignettes de 300px, titres et descriptions
   empilés sous la carte et se chevauchant d'une rangée à l'autre.
   Après : cartes plus grandes, hauteur homogène, titre posé sur l'image.
   -------------------------------------------------------------------------- */

.videos-grid {
    display: grid;
    /* 320px minimum ne laissait passer que 3 colonnes, même sur un grand
       écran : 280px + le plafond élargi (design-system.css) donnent 4 à 6
       colonnes selon la largeur, la grille utilise enfin l'écran disponible. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--e-5);
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: 0 var(--e-5) var(--e-10);
}

.video-card {
    display: flex;
    flex-direction: column;
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
}

.video-card:hover {
    transform: translateY(-4px);
    border-color: var(--bord-fort);
    box-shadow: var(--ombre-2);
}

.video-wrapper {
    position: relative;
    aspect-ratio: 16 / 9;
    /* Une ancienne règle simulait le ratio avec padding-top:56.25%. Cumulé à
       aspect-ratio, la vignette devenait deux fois trop haute. */
    padding-top: 0;
    height: auto;
    overflow: hidden;
    background: var(--fond-2);
}

.video-wrapper video,
.video-wrapper .poster-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-card:hover .poster-overlay { transform: scale(1.04); }
.poster-overlay { transition: transform 400ms cubic-bezier(.4,0,.2,1); }

/* Badges posés sur la vignette */
.premium-badge,
.exclusive-badge {
    position: absolute;
    top: var(--e-3);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: var(--e-1) var(--e-2);
    border-radius: var(--r-sm);
    font-family: var(--police-texte);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.premium-badge {
    left: var(--e-3);
    background: rgba(224,163,60,.16) !important;
    color: var(--or) !important;
    border: 1px solid rgba(224,163,60,.4);
}

/* !important : une règle héritée impose rgba(255,0,150,.9), un rose fluo
   opaque qui écrasait le badge et cassait la lisibilité du texte. */
.exclusive-badge {
    right: var(--e-3);
    background: rgba(232,51,109,.18) !important;
    color: var(--rose-clair) !important;
    border: 1px solid rgba(232,51,109,.42);
}

/* Les icônes des badges héritaient d'un `color:red` en style inline. */
.premium-badge i, .exclusive-badge i { color: currentColor !important; font-size: 1em !important; }

.video-duration {
    position: absolute;
    left: auto;      /* neutralise le left:8px de style-videos.css */
    right: var(--e-3);
    bottom: var(--e-3);
    z-index: 5;
    padding: 2px var(--e-2);
    border-radius: var(--r-sm);
    background: rgba(13,11,12,.82);
    color: var(--texte);
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px);
}

/* Verrou : avant, un bandeau opaque « 🔒 Réservé aux abonnés » au centre de
   chaque vignette — une grille de cadenas, sans aucun pouvoir d'attraction.
   Maintenant, l'image reste visible (floutée), et le verrou devient une
   invitation discrète en bas de carte. */
.lock-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--e-4);
    background: linear-gradient(to top,
                rgba(13,11,12,.92) 0%,
                rgba(13,11,12,.55) 45%,
                rgba(13,11,12,.15) 100%);
    backdrop-filter: blur(3px);
    color: var(--texte);
    font-size: var(--t-sm);
    font-weight: 600;
    text-align: center;
    transition: backdrop-filter var(--transition);
}

.video-card:hover .lock-overlay { backdrop-filter: blur(1.5px); }

/* Méta + titre sous la vignette */
.video-meta {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-4) 0;
    color: var(--texte-faible);
    font-size: var(--t-xs);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.video-title {
    padding: var(--e-2) var(--e-4) 0;
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--texte);
}

/* Avant : les descriptions débordaient sur la rangée suivante.
   Deux lignes maximum, coupées proprement. */
.video-card .description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: var(--e-2) 0 0;
    padding: 0 var(--e-4) var(--e-4);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Bandeau d'abonnement (accueil)
   Avant : `background: fuchsia` — le mot-clé CSS brut, un magenta pur qui
   jurait avec tout le reste et donnait un air de bandeau publicitaire.
   Après : une surface sombre bordée de rose, dans le même registre que le
   reste du site, avec une vraie hiérarchie entre l'accroche et le détail.
   -------------------------------------------------------------------------- */

.overlay-banner {
    position: relative;
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-8) auto;
    padding: var(--e-6) var(--e-5);
    border: 1px solid rgba(232, 51, 109, .35);
    border-radius: var(--r-lg);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(232,51,109,.16) 0%, transparent 60%),
        var(--fond-1);
    color: var(--texte);
    text-align: center;
    font-size: var(--t-base);
}

.overlay-banner p { margin: 0 0 var(--e-3); }

/* La première phrase devient l'accroche, le reste passe en second plan. */
.overlay-banner p:first-of-type {
    font-family: var(--police-titre);
    font-size: clamp(var(--t-lg), 3.2vw, var(--t-xl));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin-inline: auto;
    margin-bottom: var(--e-4);
}

.overlay-banner p:not(:first-of-type) {
    color: var(--texte-doux);
    font-size: var(--t-sm);
    line-height: 1.6;
    max-width: 46ch;
    margin-inline: auto;
}

.overlay-banner .buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3);
    margin-top: var(--e-5);
}

.overlay-banner .btn-login2,
.overlay-banner .btn-subscribe2 {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-3) var(--e-6);
    min-height: 48px;
    border-radius: var(--r-plein);
    font-size: var(--t-sm);
    font-weight: 600;
    margin-top: 0;
    transition: background var(--transition), color var(--transition);
}

.overlay-banner .btn-login2 {
    background: var(--rose);
    color: #fff;
    border: none;
}
.overlay-banner .btn-login2:hover { background: var(--rose-clair); color: #fff; }

.overlay-banner .btn-subscribe2 {
    background: transparent;
    color: var(--texte);
    border: 1px solid var(--bord-fort);
}
.overlay-banner .btn-subscribe2:hover { background: var(--fond-2); }

@media (max-width: 640px) {
    .overlay-banner {
        margin: var(--e-6) var(--e-4);
        width: auto;
        padding: var(--e-5) var(--e-4);
    }
    .overlay-banner .buttons { flex-direction: column; }
    .overlay-banner .buttons > a { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Bandeau de bienvenue (accueil)
   -------------------------------------------------------------------------- */

.welcome-banner {
    padding: var(--e-6) var(--e-5) var(--e-4);
    text-align: center;
}

.welcome-text {
    font-family: var(--police-titre);
    font-size: clamp(var(--t-md), 2.6vw, var(--t-xl));
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--texte);
    max-width: 26ch;
    margin: 0 auto var(--e-4);
}

.video-count {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    padding: var(--e-2) var(--e-4);
    border: 1px solid var(--bord);
    border-radius: var(--r-plein);
    background: var(--fond-1);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    font-weight: 500;
}
.video-count strong { color: var(--texte); font-weight: 600; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: var(--e-6) var(--e-5) var(--e-10);
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--e-3);
    border: 1px solid var(--bord);
    border-radius: var(--r-sm);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pagination a:hover { background: var(--fond-2); color: var(--texte); border-color: var(--bord-fort); }
.pagination a.active { background: var(--rose); border-color: var(--rose); color: #fff; }
.pagination span { border-color: transparent; }

/* --------------------------------------------------------------------------
   Portail d'âge
   Avant : « Je n'ai pas 18 ans » était le bouton rose le plus visible, et
   « Entrer sur le site » un bouton gris qui semblait désactivé. La hiérarchie
   visuelle poussait donc le visiteur vers la sortie.
   -------------------------------------------------------------------------- */

.age-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--e-5);
    background: rgba(8, 7, 8, .88);
    backdrop-filter: blur(10px);
}

.age-popup-content {
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--e-8) var(--e-6);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
    box-shadow: var(--ombre-3);
    text-align: center;
}

.age-popup-content h1 {
    margin: 0 0 var(--e-4);
    font-size: var(--t-xl);
    color: var(--texte);
}

.age-popup-content p { color: var(--texte-doux); font-size: var(--t-sm); }

/* Le bouton d'entrée redevient l'action principale. */
.age-popup-content #enterSite,
.age-popup-content .btn-enter {
    background: var(--rose);
    color: #fff;
    border: none;
    border-radius: var(--r-plein);
    padding: var(--e-3) var(--e-6);
    min-height: 48px;
    font-size: var(--t-base);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition);
}
.age-popup-content #enterSite:hover:not(:disabled),
.age-popup-content .btn-enter:hover:not(:disabled) { background: var(--rose-clair); }
.age-popup-content #enterSite:disabled,
.age-popup-content .btn-enter:disabled { opacity: .4; cursor: not-allowed; }

/* La sortie devient un lien discret. */
.age-popup-content #exitSite,
.age-popup-content .btn-exit {
    background: transparent !important;
    background-image: none !important;
    color: var(--texte-faible) !important;
    border: 1px solid var(--bord) !important;
    border-radius: var(--r-plein);
    padding: var(--e-3) var(--e-5);
    min-height: 48px;
    font-size: var(--t-sm);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.age-popup-content #exitSite:hover,
.age-popup-content .btn-exit:hover { color: var(--texte-doux) !important; border-color: var(--bord-fort) !important; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */

.footer {
    border-top: 1px solid var(--bord);
    background: var(--fond-1);
    color: var(--texte-doux);
    font-size: var(--t-sm);
    padding-block: var(--e-8);
}

.footer a { color: var(--texte-doux); }
.footer a:hover { color: var(--rose-clair); }

/* --------------------------------------------------------------------------
   Adaptation mobile
   -------------------------------------------------------------------------- */

/* Les panneaux hors écran (menu mobile, filtres) étaient sortis du cadre avec
   `right: -100%`. Un élément ainsi décalé agrandit la zone défilable : la page
   faisait 750px de large sur un écran de 375px, d'où un défilement horizontal
   sur tout le site en mobile.
   On les laisse à `right: 0` et on les sort avec une transformation, qui
   n'entre pas dans le calcul du défilement. */
html, body { overflow-x: hidden; max-width: 100%; }

/* --------------------------------------------------------------------------
   Menu mobile
   Avant : un tiroir de 50% de large, collé à droite, sorti de l'écran avec
   `right: -100%` — donc toujours présent dans la largeur de la page (d'où le
   défilement horizontal), avec des liens minuscules empilés en haut et une
   croix « x » en texte brut.
   Après : une surface plein écran. Comme elle occupe exactement le viewport
   (`inset: 0`), elle ne peut plus rien déborder, et on gagne la place pour
   des cibles tactiles confortables et une vraie typographie.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        inset: 0;                    /* remplace top:-60px / right:-100% / width:50% */
        top: 0 !important;
        right: 0 !important;
        left: 0;
        width: 100% !important;
        height: 100dvh;
        max-width: none;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: var(--e-1);
        padding: var(--e-10) var(--e-5) var(--e-8);
        background: var(--fond-0);
        overflow-y: auto;
        z-index: 1000;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: opacity .22s ease, visibility .22s ease;
    }

    .nav-menu.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Liens : grands, aérés, séparés par un filet discret. */
    .nav-menu > li { border-bottom: 1px solid var(--bord); }
    .nav-menu > li:last-of-type { border-bottom: none; }

    .nav-menu > li > a {
        justify-content: flex-start;
        gap: var(--e-4);
        padding: var(--e-4) var(--e-2);
        min-height: 56px;
        font-family: var(--police-titre);
        font-size: var(--t-lg);
        font-weight: 600;
        letter-spacing: -0.01em;
        text-transform: none;
        color: var(--texte);
        border-radius: var(--r-sm);
    }
    .nav-menu > li > a i { font-size: 22px !important; color: var(--rose) !important; width: 26px; }
    .nav-menu > li > a:active { background: var(--fond-2); }

    /* Boutons de compte, poussés en bas du panneau. */
    /* Le séparateur du dernier lien fait déjà la coupure : pas de border-top,
       sinon on voit deux filets accolés. */
    .nav-menu .mobile-actions {
        display: flex;
        flex-direction: column;
        gap: var(--e-3);
        margin-top: var(--e-5);
        padding-top: 0;
        border: none;
    }
    .nav-menu .mobile-actions a {
        width: 100%;
        max-width: none;
        justify-content: center;
        min-height: 52px;
        font-size: var(--t-base);
        font-family: var(--police-texte);
    }

    /* Le bouton de fermeture : une vraie cible tactile, pas un « x » perdu.
       La croix est tracée avec deux barres pivotées plutôt qu'avec la lettre
       « x » : un glyphe n'est jamais centré optiquement dans une pastille
       ronde (la boîte de ligne inclut jambages et hauteurs d'ascendantes, si
       bien que le signe paraît toujours remonté). Deux barres positionnées en
       absolu se croisent exactement au centre géométrique. */
    .close-btn {
        position: fixed;
        top: var(--e-4);
        right: var(--e-4);
        z-index: 1001;
        display: none;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--bord-fort);
        border-radius: var(--r-plein);
        background: var(--fond-1);
        color: var(--texte);
        font-size: 0;          /* neutralise tout texte restant dans le bouton */
        line-height: 0;
        cursor: pointer;
        transition: background var(--transition), border-color var(--transition);
    }
    .close-btn.show { display: flex; }
    .close-btn:hover { background: var(--fond-2); border-color: var(--rose); }

    .close-btn::before,
    .close-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 17px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .close-btn::before { transform: translate(-50%, -50%) rotate(45deg); }
    .close-btn::after  { transform: translate(-50%, -50%) rotate(-45deg); }

    /* Le hamburger : trois traits nets, cible de 44px.
       L'ancienne règle lui appliquait `margin: -20px 20px 0 0`, ce qui le
       remontait au-dessus de l'axe de la barre et l'écartait du bord droit,
       alors que le logo, lui, s'aligne sur le padding de 16px. */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0 9px;
        /* Réinitialise les styles propres à <button> (bordure et fond par
           défaut du navigateur), qui décalaient les traits de 2px. */
        border: none;
        background: transparent;
        -webkit-appearance: none;
        appearance: none;
        cursor: pointer;
        /* Compense le padding interne pour que les traits s'alignent
           optiquement sur le bord du logo, en face. */
        margin-right: -9px;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background: var(--texte);
        transition: background var(--transition);
    }
    .hamburger:active span { background: var(--rose); }

    /* Empêche la page de défiler derrière le menu ouvert. */
    body:has(.nav-menu.show) { overflow: hidden; }
}

/* Le sélecteur de langue (widget GTranslate) se place lui-même en bas à
   gauche, par-dessus le contenu : sur mobile il recouvrait entièrement le
   bouton « Me Connecter » du bandeau d'abonnement. On le renvoie en bas à
   droite, où aucune action pleine largeur n'est ancrée, et on l'estompe tant
   qu'on ne le survole pas. Le widget pose ses styles en ligne, d'où !important. */
.gtranslate_wrapper > div[style] {
    left: auto !important;
    right: 16px !important;
    bottom: 16px !important;
    z-index: 80 !important;
}

.gtranslate_wrapper .gt_float_switcher {
    opacity: .55;
    transition: opacity var(--transition);
}
.gtranslate_wrapper:hover .gt_float_switcher,
.gtranslate_wrapper:focus-within .gt_float_switcher { opacity: 1; }

@media (max-width: 640px) {
    .gtranslate_wrapper .gt_float_switcher { font-size: 12px; }
}

/* Entre 769px (fin du menu hors écran) et 1100px, les six entrées du menu ne
   tenaient plus : « CASTING » sortait de l'écran. On compacte au lieu de rogner. */
@media (min-width: 769px) and (max-width: 1100px) {
    .navbar { gap: var(--e-3); }
    .nav-menu li a { padding: var(--e-2); font-size: var(--t-xs); gap: var(--e-1); }
    .nav-menu li a i { display: none; }
    .nav-logo img { max-height: 38px; }
}

@media (max-width: 900px) {
    .navbar { gap: var(--e-3); padding: var(--e-3) var(--e-4); }
    .nav-menu { gap: 0; }
    .nav-menu li a { padding: var(--e-2); font-size: var(--t-xs); }
}

@media (max-width: 640px) {
    .videos-grid {
        grid-template-columns: 1fr;
        gap: var(--e-4);
        padding: 0 var(--e-4) var(--e-8);
    }
    .video-title { font-size: var(--t-md); }
    .age-popup-content { padding: var(--e-6) var(--e-4); }
}

/* ==========================================================================
   Formules d'abonnement et barre de réassurance
   Ces styles vivaient dans un <style> de offres.php. L'accueil affiche
   désormais les mêmes cartes : une seule source, pas de copie.
   ========================================================================== */

/* --- Formules d'abonnement ---
   Les trois cartes portaient chacune un dégradé de couleur différent (rose,
   violet, doré) avec halos et effets de zoom : trois identités visuelles qui
   n'avaient aucun rapport entre elles ni avec le reste du site. Une seule
   présentation, la formule mise en avant se distinguant par sa bordure. */

.formules {
    display: grid;
    /* auto-fit avec un minimum de 260px basculait à 2 colonnes dès que le
       conteneur passait sous ~880px, laissant la 3e carte seule sur une
       deuxième ligne. Trois colonnes explicites tant qu'il y a la place. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
    width: 100%;
    max-width: 1100px;
    margin: var(--e-8) auto;
    padding-inline: var(--e-5);
    /* stretch (défaut) et non start : les cartes n'ont pas le même contenu
       — celle mise en avant porte un badge d'économie en plus — et se
       retrouvaient donc de hauteurs différentes, alignées par le haut. */
    align-items: stretch;
}

@media (max-width: 900px) { .formules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .formules { grid-template-columns: minmax(0, 1fr); } }

.formules-vide {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--texte-doux);
    padding: var(--e-8) 0;
}

.formule {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--e-6) var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
    text-align: center;
    transition: border-color var(--transition), transform var(--transition);
}

.formule:hover { border-color: var(--bord-fort); transform: translateY(-4px); }

/* La mise en avant vient de la base (colonne mise_en_avant), plus d'une
   classe CSS écrite à la main sur une carte précise. */
.formule--avant {
    border-color: var(--rose);
    box-shadow: 0 0 0 1px var(--rose), var(--ombre-2);
}

.formule-badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px var(--e-3);
    background: var(--rose);
    border-radius: var(--r-plein);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.formule-titre {
    margin: 0 0 var(--e-3);
    font-family: var(--police-titre);
    font-size: var(--t-lg);
    color: var(--texte);
}

.formule-prix {
    font-family: var(--police-titre);
    font-size: var(--t-2xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--texte);
}

.formule-mensuel {
    margin: var(--e-2) 0 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

.formule-economie {
    display: inline-block;
    margin: var(--e-3) auto 0;
    padding: 3px var(--e-3);
    background: var(--or-voile);
    border: 1px solid rgba(224,163,60,.35);
    border-radius: var(--r-plein);
    color: var(--or);
    font-size: var(--t-xs);
    font-weight: 600;
}

.formule-atouts {
    list-style: none;
    margin: var(--e-5) 0;
    padding: 0;
    text-align: left;
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

.formule-atouts li {
    position: relative;
    padding: var(--e-2) 0 var(--e-2) var(--e-5);
    border-bottom: 1px solid var(--bord);
}
.formule-atouts li:last-child { border-bottom: none; }

/* Coche dessinée en CSS plutôt qu'un emoji : rendu identique partout. */
.formule-atouts li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 6px;
    height: 11px;
    margin-top: -7px;
    border: solid var(--rose);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.formule-bouton {
    display: block;
    margin-top: auto;
    padding: var(--e-3) var(--e-5);
    min-height: 48px;
    line-height: 24px;
    background: var(--rose);
    border-radius: var(--r-plein);
    color: #fff;
    font-size: var(--t-base);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition);
}
.formule-bouton:hover { background: var(--rose-clair); color: #fff; }

.formule-bouton--inactif {
    background: var(--fond-2);
    color: var(--texte-faible);
    cursor: not-allowed;
}
.formule-bouton--inactif:hover { background: var(--fond-2); color: var(--texte-faible); }

/* --- Barre de réassurance --- */
.reassurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-5);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto var(--e-10);
    padding: var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
}

@media (max-width: 760px) { .reassurance { grid-template-columns: minmax(0, 1fr); } }

.reassurance-point {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
}

.reassurance-icone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    background: var(--rose-voile);
}
.reassurance-icone svg { width: 18px; height: 18px; fill: var(--rose-clair); }

.reassurance-point strong {
    display: block;
    margin-bottom: 2px;
    color: var(--texte);
    font-size: var(--t-sm);
    font-weight: 600;
}
.reassurance-point span {
    color: var(--texte-doux);
    font-size: var(--t-xs);
    line-height: 1.5;
}

.formule-securite {
    margin: var(--e-4) 0 0;
    color: var(--texte-faible);
    font-size: var(--t-xs);
    line-height: 1.5;
}
/* --------------------------------------------------------------------------
   Bloc de conversion sur l'accueil
   Remplace un bandeau qui ne proposait qu'un bouton « Me Connecter » : aucun
   prix n'était visible avant d'ouvrir le menu.
   -------------------------------------------------------------------------- */

.chiffres-cles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-2) var(--e-5);
    padding: var(--e-5) var(--e-5) 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
    text-align: center;
}
.chiffres-cles strong { color: var(--texte); font-weight: 600; }

/* Séparateur entre les chiffres, sans caractère parasite dans le HTML. */
.chiffres-cles span + span::before {
    content: '·';
    margin-right: var(--e-5);
    color: var(--texte-faible);
}
@media (max-width: 620px) {
    .chiffres-cles span + span::before { content: none; margin: 0; }
}

/* Le bloc est placé APRÈS la grille de vidéos : le visiteur voit d'abord le
   catalogue, l'offre arrive quand l'intérêt est déjà là. Comme il suit
   directement la pagination, il lui faut une rupture visuelle nette, sinon il
   se lit comme la fin de la liste. */
.bloc-conversion {
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-10) auto var(--e-10);
    padding: var(--e-10) var(--e-5) 0;
    border-top: 1px solid var(--bord);
    text-align: center;
}

.bloc-conversion-titre {
    margin: 0 0 var(--e-2);
    font-family: var(--police-titre);
    font-size: clamp(var(--t-xl), 3.5vw, var(--t-2xl));
    color: var(--texte);
}

.bloc-conversion-sous {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

/* La grille des formules porte déjà ses marges : on neutralise la marge
   haute pour qu'elle ne se cumule pas avec le sous-titre. */
.bloc-conversion .formules { margin-top: var(--e-6); padding-inline: 0; }
.bloc-conversion .reassurance { margin-bottom: 0; }

.bloc-conversion-connexion {
    margin: var(--e-5) 0 0;
    color: var(--texte-faible);
    font-size: var(--t-sm);
}

/* ==========================================================================
   Rappel de la vidéo demandée — offres.php
   --------------------------------------------------------------------------
   exige_acces_video() redirige ici avec « ?video=N » quand un visiteur bute sur
   une vidéo verrouillée. Il arrivait jusqu'ici sur la grille d'abonnements sans
   un mot sur ce qu'il venait chercher. Ce bandeau lui rappelle la vidéo et lui
   donne les deux voies : l'achat à l'unité, quand le palier est configuré, et
   l'abonnement.
   ========================================================================== */

.rappel-video {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e-5);
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-8) auto 0;
    padding: var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
}

.rappel-video-vignette {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-md);
    display: block;
}

.rappel-video-sur {
    margin: 0 0 var(--e-1);
    color: var(--texte-faible);
    font-size: var(--t-sm);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.rappel-video-titre {
    margin: 0 0 var(--e-2);
    font-family: var(--police-titre);
    font-size: var(--t-xl);
    line-height: 1.2;
    color: var(--texte);
}

.rappel-video-desc {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

.rappel-video-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--e-2);
}

.rappel-video-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px : cible tactile minimale, la même que les autres boutons du site. */
    min-height: 44px;
    padding: var(--e-3) var(--e-5);
    border-radius: var(--r-plein);
    font-size: var(--t-sm);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
}

.rappel-video-btn--achat { background: var(--rose); color: #fff; }
.rappel-video-btn--achat:hover { background: var(--rose-clair); color: #fff; }

.rappel-video-btn--abo { border-color: var(--bord-fort); color: var(--texte); }
.rappel-video-btn--abo:hover { background: var(--fond-2); }

.rappel-video-mention {
    color: var(--texte-faible);
    font-size: var(--t-xs);
    text-align: center;
}

@media (max-width: 860px) {
    /* Une seule colonne plutôt que de rétrécir la vignette : à 120px de large
       face à un titre sur deux lignes, l'image devenait un timbre-poste posé
       de travers. En pleine largeur, elle redevient ce qu'elle doit être —
       l'aperçu de ce que la personne voulait voir. */
    .rappel-video {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e-4);
        margin-top: var(--e-6);
    }
    .rappel-video-titre { font-size: var(--t-lg); }
}

/* ==========================================================================
   Page des tags
   --------------------------------------------------------------------------
   Avant : une grille de 4 colonnes rigides (1 seule sous 600px), des pastilles
   en dégradé rose toutes identiques, une pseudo-case à cocher héritée d'un
   formulaire (.tag-label input {display:none}) et un ✅ en ::after jamais
   visible — la page était un copier-coller du sélecteur de tags de l'admin.
   Ici, un nuage qui coule sur la largeur, et trois tailles selon la popularité.
   ========================================================================== */

.page-tags {
    width: 100%;
    max-width: var(--largeur-max);
    margin-inline: auto;
    padding: var(--e-8) var(--e-5) var(--e-12);
}

.page-tags-entete { margin-bottom: var(--e-6); }

.page-tags-entete h1 {
    /* style-principal.css centre tous les h1 : le titre se retrouvait au
       milieu au-dessus d'un sous-titre et d'un nuage alignés à gauche. */
    text-align: left;
    margin: 0 0 var(--e-2);
    font-family: var(--police-titre);
    font-size: clamp(var(--t-xl), 4vw, var(--t-2xl));
    line-height: 1.15;
    color: var(--texte);
}

.page-tags-entete p {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--t-sm);
}

/* Flex plutôt que grid : les noms de tags ont des longueurs très inégales.
   Une grille leur imposait des colonnes égales, d'où les blancs entre pastilles. */
.nuage-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tag-pastille {
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    /* 44px : cible tactile minimale. Les anciennes pastilles faisaient 30px
       de haut, difficiles à viser au pouce. */
    min-height: 44px;
    padding: var(--e-2) var(--e-4);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-plein);
    color: var(--texte-doux);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition),
                color var(--transition), transform var(--transition);
}

.tag-pastille:hover {
    background: var(--fond-2);
    border-color: var(--rose);
    color: var(--texte);
    transform: translateY(-2px);
}

.tag-nom { font-weight: 500; }

.tag-nombre {
    min-width: 24px;
    padding: 1px 7px;
    background: var(--fond-3);
    border-radius: var(--r-plein);
    color: var(--texte-faible);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tag-pastille:hover .tag-nombre { background: var(--rose-voile); color: var(--rose-clair); }

/* Trois poids selon le nombre de vidéos : sans hiérarchie, un nuage de tags
   ne dit pas où se trouve la matière. */
.tag-pastille--petit  .tag-nom { font-size: var(--t-sm); }
.tag-pastille--moyen  .tag-nom { font-size: var(--t-base); }
.tag-pastille--grand  .tag-nom { font-size: var(--t-md); font-weight: 600; }

.tag-pastille--grand {
    background: var(--rose-voile);
    border-color: rgba(232, 51, 109, .35);
    color: var(--texte);
}

.page-tags-vide {
    padding: var(--e-10) var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
    text-align: center;
}

.page-tags-vide p { margin: 0 0 var(--e-5); color: var(--texte-doux); }

.page-tags-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--e-3) var(--e-5);
    background: var(--rose);
    border-radius: var(--r-plein);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
    text-decoration: none;
}
.page-tags-btn:hover { background: var(--rose-clair); color: #fff; }

@media (max-width: 640px) {
    .page-tags { padding: var(--e-6) var(--e-4) var(--e-10); }
    .nuage-tags { gap: var(--e-2); }
}

/* ==========================================================================
   En-tête de la page de vente (offres.php)
   --------------------------------------------------------------------------
   Remplace le bloc « Devenir Membre Prémium » : un lecteur vidéo pointant sur
   un fichier absent — donc un rectangle noir figé à 0:00 en haut de la page de
   vente — face à un pavé d'accroche truffé d'emojis. Ici, la promesse, les
   chiffres réels du catalogue, et un aperçu de vraies vignettes.
   ========================================================================== */

.vente-entete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--e-8);
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-8) auto var(--e-10);
    padding-inline: var(--e-5);
}

.vente-entete h1 {
    /* style-principal.css centre tous les h1. */
    text-align: left;
    margin: 0 0 var(--e-4);
    font-family: var(--police-titre);
    font-size: clamp(var(--t-2xl), 4.5vw, var(--t-3xl));
    line-height: 1.1;
    color: var(--texte);
}

.vente-entete-promesse {
    margin: 0 0 var(--e-6);
    max-width: 46ch;   /* longueur de ligne confortable */
    color: var(--texte-doux);
    font-size: var(--t-md);
    line-height: 1.6;
}

.vente-entete-chiffres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
    list-style: none;
    margin: 0 0 var(--e-6);
    padding: 0;
    color: var(--texte-faible);
    font-size: var(--t-sm);
}
.vente-entete-chiffres strong { color: var(--texte); font-weight: 600; }

.vente-entete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-4);
}

.vente-entete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--e-3) var(--e-6);
    background: var(--rose);
    border-radius: var(--r-plein);
    color: #fff;
    font-size: var(--t-base);
    font-weight: 600;
    text-decoration: none;
}
.vente-entete-btn:hover { background: var(--rose-clair); color: #fff; }

.vente-entete-lien { color: var(--texte-faible); font-size: var(--t-sm); }
.vente-entete-lien:hover { color: var(--rose-clair); }

/* Mosaïque d'aperçu : trois colonnes de vignettes réelles. Elle remplace le
   lecteur mort et montre ce qu'on achète. */
.vente-entete-apercu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-2);
}

.vente-entete-apercu img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r-md);
    display: block;
    /* Léger voile : c'est un décor, il ne doit pas concurrencer le texte. */
    opacity: .82;
}

/* La première vignette occupe deux colonnes et deux rangées : sans elle, la
   mosaïque n'était qu'une grille plate de six imagettes identiques. */
.vente-entete-apercu img:first-child {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: 16 / 10;
    opacity: 1;
}

@media (max-width: 900px) {
    .vente-entete {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--e-6);
        margin-top: var(--e-6);
    }
    /* L'aperçu passe devant le texte : sur mobile, une image accroche mieux
       qu'un titre en haut d'écran. */
    .vente-entete-apercu { order: -1; }
    .vente-entete-promesse { font-size: var(--t-base); }
}

@media (max-width: 640px) {
    .vente-entete { padding-inline: var(--e-4); }
    /* Quatre vignettes suffisent : au-delà, elles deviennent des timbres. */
    .vente-entete-apercu img:nth-child(n + 5) { display: none; }
    .vente-entete-actions { flex-direction: column; align-items: stretch; }
    .vente-entete-btn { width: 100%; }
    .vente-entete-lien { text-align: center; }
}

/* ==========================================================================
   Page des catégories — en-tête et état vide
   --------------------------------------------------------------------------
   La liste des catégories était écrite en dur dans categories.php : sept noms
   qui ne correspondaient pas aux tags de la base. Six rangées sur sept
   s'affichaient donc avec leur image et leur titre, mais sans une seule vidéo.
   Les catégories viennent maintenant de la base ; il fallait par conséquent
   prévoir le cas où il n'y en a aucune.
   ========================================================================== */

.cat-entete {
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-8) auto var(--e-6);
    padding-inline: var(--e-5);
}

.cat-entete h1 {
    text-align: left;   /* style-principal.css centre tous les h1 */
    margin: 0 0 var(--e-2);
    font-family: var(--police-titre);
    font-size: clamp(var(--t-xl), 4vw, var(--t-2xl));
    line-height: 1.15;
    color: var(--texte);
}

.cat-entete p { margin: 0; color: var(--texte-doux); font-size: var(--t-sm); }

.cat-vide {
    width: 100%;
    max-width: 640px;
    margin: var(--e-8) auto var(--e-12);
    padding: var(--e-10) var(--e-5);
    background: var(--fond-1);
    border: 1px solid var(--bord);
    border-radius: var(--r-lg);
    text-align: center;
}

.cat-vide p { margin: 0 0 var(--e-5); color: var(--texte-doux); }

.cat-vide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--e-3) var(--e-5);
    background: var(--rose);
    border-radius: var(--r-plein);
    color: #fff;
    font-size: var(--t-sm);
    font-weight: 600;
}
.cat-vide-btn:hover { background: var(--rose-clair); color: #fff; }

@media (max-width: 640px) {
    .cat-entete { margin-top: var(--e-6); padding-inline: var(--e-4); }
}

/* --------------------------------------------------------------------------
   Titre de section au-dessus d'une grille de vidéos
   Le <h3> n'était contenu par rien : il s'étendait sur toute la largeur du
   body, collé au bord gauche, alors que la grille juste en dessous est centrée
   dans --largeur-max avec une marge intérieure. Les deux ne s'alignaient pas.
   -------------------------------------------------------------------------- */

.titre-section {
    width: 100%;
    max-width: var(--largeur-max);
    margin: var(--e-6) auto var(--e-4);
    /* Même retrait horizontal que .videos-grid : les deux commencent au même
       endroit, quelle que soit la largeur de l'écran. */
    padding-inline: 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);
}

@media (max-width: 640px) {
    .titre-section { padding-inline: var(--e-4); margin-top: var(--e-5); }
}