@charset "UTF-8";
/* ---------------------------------------------------------------------------------------------
   page-videos.css — la page « Vidéos » (/videos/). Brique « page-videos », JulienWeb, 03/10/2026.

   Servie sur cette page seulement, après style.css et commun.css du socle (variables --jws-*,
   .jws-sr, .jws-btn, .jws-tesselle). Chaque variable porte sa valeur de repli.
   Écrite pour 320 px de large, puis élargie par min-width.

   Règles de la cliente tenues ici :
   - rien ne se pose sur une vignette : ni voile, ni bouton de lecture, ni titre. Le signe
     « lecture », le titre et le nom de l'artiste sont DESSOUS ;
   - pas d'orange en texte sur fond clair : l'orange est un filet, un losange, un triangle ;
   - losanges et triangles, pas de pixels ; pas de gras ajouté (le titre d'une vidéo a la
     graisse de .video-titre a, sur les fiches).

   1. Titre      2. Tête et pastilles      3. Mur      4. Vignette      5. Lecture sur place
   --------------------------------------------------------------------------------------------- */

/* 22 px en haut, pas 1.5em : avec les 2em du bandeau, le cartouche est à 31 px de l'en-tête,
   comme sur les autres pages (un <br> de 22 px avant .section-row). C'était 33 px (06/10). */
.jws-page-videos {
    padding: 22px 0 3em;
}

/* Avec JavaScript (classe posée sur <html> avant le premier affichage), la suite du mur attend
   que page-videos.js prenne la main : pas de mur entier qui se replie sous les yeux. */
.jws-page-videos-js .jws-page-videos:not([data-jws-pret]) .jws-page-videos__carte--suite,
.jws-page-videos-js .jws-page-videos:not([data-jws-pret]) .jws-page-videos__an--suite {
    display: none;
}


/* -- 1. Titre : le cartouche indigo à cheval sur le filet, celui des autres pages (.section-row h3) -- */

/* 29,2 px sous le cartouche, la mesure du site (.section-row : le contenu à 49 px du filet,
   le cartouche à 19,8 px). C'était 1.5em, soit 24 px (06/10). */
.jws-page-videos__bandeau {
    margin: 2em 0 0;
    padding: 0 15px 29.2px;
    border-top: 1px dashed var(--jws-orange, #f39200);
}

/* Calculé d'après style.css (.section-row h3 : top -45 px, plus la marge par défaut d'un h3 de
   22 px) : le cartouche commence 23 px au-dessus du filet et fait 42,8 px de haut. Ici -24 px,
   le filet d'un pixel étant la bordure du bandeau. display: table = largeur du texte, centré.
   À comparer à l'œil avec le cartouche « Albums » de /albums/. */
.jws-page-videos__h1 {
    display: table;
    margin: -24px auto 0;
    padding: 10px 15px;
    background: var(--jws-indigo, #312783);
    color: #fff;
    font-size: 22px;
    line-height: 22.8px;
    text-transform: uppercase;
}


/* -- 2. Tête et pastilles ---------------------------------------------------------------------- */

/* La tête ne porte plus que le lien vers la chaîne (06/10) : le compte est dans la carte. */
.jws-page-videos__tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px 24px;
    margin: 0 0 6px;
}

.jws-page-videos__compte {
    margin: 0;
    color: var(--jws-gris, #666);
    font-size: .9em;
}

/* Le pictogramme YouTube du thème (Font Awesome, celui du bouton « Plus de vidéos » des fiches)
   devant le lien, depuis le 07/10 ; avant, une tesselle. Le soulignement ne porte que sur le texte. */
.jws-page-videos__chaine {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--jws-indigo, #312783);
    font-size: .9em;
    text-decoration: none;
}

.jws-page-videos__chaine .fa {
    font-size: 1.9em;
}

.jws-page-videos__chaine-texte {
    text-decoration: underline;
    text-decoration-color: var(--jws-orange, #f39200);
    text-underline-offset: 3px;
}

.jws-page-videos__chaine:hover {
    color: var(--jws-indigo-fonce, #241d63);
}

.jws-page-videos__chaine:hover .jws-page-videos__chaine-texte {
    text-decoration-thickness: 2px;
}

/* La carte des filtres (06/10) : celle de la page des actus (actus-liste.css), règle pour règle.
   Fond blanc, filet orange en tête, une rangée par axe derrière son libellé, puis la recherche
   sous un filet, le compte et « Réinitialiser » à sa droite. */
.jws-page-videos__filtres {
    margin: 0 0 26px;
}

.jws-page-videos__boite {
    position: relative;      /* le libellé .jws-sr du champ est en position absolue */
    padding: 16px 16px 14px;
    border: 1px solid #e3e6ef;
    border-top: 3px solid var(--jws-orange, #f39200);
    border-radius: 4px;
    background: #fff;
}

.jws-page-videos__groupe {
    margin: 0 0 8px;
}

/* minmax(0, 1fr) : une rangée qui défile ne doit pas élargir la carte. */
@media (min-width: 576px) {
    .jws-page-videos__groupe {
        display: grid;
        grid-template-columns: 6.5em minmax(0, 1fr);
        align-items: center;
        column-gap: 10px;
    }

    .jws-page-videos__groupe .jws-page-videos__libelle {
        margin: 0;
    }

    .jws-page-videos__groupe .jws-page-videos__ligne {
        flex-wrap: wrap;
        padding: 3px;
        overflow: visible;
    }
}

/* 12/10 : une seule rangee de pastilles, sans libelle devant (mur.php). Pas de colonne reservee au libelle. */
@media (min-width: 576px) {
    .jws-page-videos__groupe--seul {
        display: block;
    }
}

.jws-page-videos__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin: 10px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid #e3e6ef;
}

/* La recherche part du même bord que les pastilles (08/10, demande de Julien) : elle était calée
   sous les libellés. Le retrait vaut la colonne des libellés et son écart (mesuré). */
@media (min-width: 576px) {
    .jws-page-videos__bas {
        padding-left: calc(6.5em + 10px + 3px);
    }
}

/* 12/10 : sans libelle, la recherche revient a l'aplomb des pastilles. */
@media (min-width: 576px) {
    .jws-page-videos__groupe--seul ~ .jws-page-videos__bas {
        padding-left: 3px;
    }
}

.jws-page-videos__recherche {
    position: relative;
    flex: 1 1 280px;
    max-width: 560px;
}

.jws-page-videos__recherche[hidden],
.jws-page-videos__etat[hidden] {
    display: none;
}

/* 16 px : en dessous, iOS agrandit la page quand le champ prend le curseur. */
.jws-page-videos__champ {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 12px 0 44px;
    border: 1px solid #b9bdd6;
    border-radius: 4px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23312783' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='5.5'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 14px 50%;
    color: var(--jws-encre, #262830);
    font-family: inherit;
    font-size: 16px;
    transition: border-color .15s;
}

.jws-page-videos__champ::placeholder {
    color: var(--jws-gris, #666);
    opacity: 1;
}

.jws-page-videos__champ:hover {
    border-color: var(--jws-indigo, #312783);
}

.jws-page-videos__champ:focus {
    border-color: var(--jws-indigo, #312783);
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

.jws-page-videos__etat {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    min-height: 28px;
    margin: 0 0 0 auto;
}

/* Le sélecteur porte la carte : le thème colore ses liens avec le poids d'une classe seule. */
.jws-page-videos__boite .jws-page-videos__raz {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon-pilule, 20px);
    background: #fff;
    color: var(--jws-indigo, #312783);
    font-size: .8em;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.jws-page-videos__boite .jws-page-videos__raz:hover {
    background: var(--jws-indigo, #312783);
    color: #fff;
}

.jws-page-videos__raz:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

/* Au téléphone, les pastilles tiennent sur une ligne qui défile, au lieu de huit rangées qui
   repoussent les vidéos sous le pli. La page, elle, ne défile jamais de côté. */
.jws-page-videos__ligne {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 12px 8px 3px;      /* la place de l'anneau de la pastille active */
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.jws-page-videos__ligne > li {
    flex: 0 0 auto;
}

/* 11 px, gris, capitales : le libellé des rangées de la page des actus. */
.jws-page-videos__libelle {
    display: block;
    margin: 0 0 2px;
    color: var(--jws-gris, #666);
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* La pastille de l'agenda d'accueil (.agenda-chip, assets/agenda-home.css), en lien. */
.jws-page-videos__pastille {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon, 3px);
    background: #fff;
    color: var(--jws-indigo, #312783);
    font-size: .8em;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s, color .15s;
}

.jws-page-videos__pastille small {
    font-size: .8em;
    opacity: .7;
}

.jws-page-videos__pastille:hover {
    background: #eef0f7;
    color: var(--jws-indigo, #312783);
}

/* L'état actif se dit par le fond plein ET l'anneau, pas par la couleur seule. */
.jws-page-videos__pastille[aria-current="true"] {
    background: var(--jws-indigo, #312783);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--jws-indigo, #312783), 0 0 0 2px var(--jws-orange, #f39200);
}

.jws-page-videos__pastille[aria-current="true"] small {
    opacity: .85;
}

.jws-page-videos__pastille small[hidden] {
    display: none;
}

/* Une pastille qui ne donnerait rien avec les autres filtres : grisée, jamais cachée. */
.jws-page-videos__pastille[aria-disabled="true"] {
    opacity: .4;
    cursor: default;
}

.jws-page-videos__pastille[aria-disabled="true"]:hover {
    background: #fff;
}

/* Pastilles sur fond blanc : anneau en indigo (l'orange y fait 2,35:1). */
.jws-page-videos__pastille:focus-visible {
    outline: 3px solid var(--jws-indigo, #312783);
    outline-offset: 2px;
}

.jws-page-videos__chaine:focus-visible,
.jws-page-videos__lire:focus-visible,
.jws-page-videos__titre a:focus-visible,
.jws-page-videos__artiste a:focus-visible,
.jws-page-videos__fermer:focus-visible {
    outline: 3px solid var(--jws-orange, #f39200);
    outline-offset: 2px;
}

/* Au doigt : 44 px de haut. */
@media (pointer: coarse) {
    .jws-page-videos__pastille {
        min-height: 44px;
        padding: 6px 12px;
    }
}

@media (min-width: 576px) {
    .jws-page-videos__filtres {
        padding: 12px 14px;
    }
    .jws-page-videos__ligne {
        flex-wrap: wrap;
        padding: 0;
        overflow-x: visible;
    }
    .jws-page-videos__libelle {
        margin: 12px 0 6px;
    }
}


/* -- 3. Mur : deux colonnes sur téléphone (08/10), quatre dans le conteneur de 1140 px -- */

/* Un mur par année, sous l'intertitre des albums (.jws-albums__annee, albums.css) : filet pointillé
   orange, tesselle du socle, texte indigo. */
.jws-page-videos__an {
    margin: 0 0 30px;
}

.jws-page-videos__an:last-of-type {
    margin-bottom: 0;
}

.jws-page-videos__an[hidden] {
    display: none;
}

.jws-page-videos__annee {
    display: flex;
    align-items: center;
    margin: 0 0 .8em;
    padding: 0 0 .4em;
    border-bottom: 1px dashed var(--jws-orange, #f39200);
    color: var(--jws-indigo, #312783);
    font-size: 1.25em;
    line-height: 1.2;
    scroll-margin-top: calc(var(--jws-entete, 141px) + 16px);
}

.jws-page-videos__mur {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
    grid-auto-flow: row dense;      /* la vidéo en lecture prend une rangée : les suivantes comblent */
    gap: 22px 20px;                 /* 08/10 : légendes resserrées, 30px 24px avant */
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Téléphone : deux vidéos par rangée (08/10, demande de Julien ; une seule avant, jusqu'à 520 px
   environ). L'écart se resserre pour laisser de la largeur aux vignettes. */
@media (max-width: 519.98px) {
    .jws-page-videos__mur {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
    }
}

/* La légende (08/10, demandes de Julien : « plus jolie, un peu plus compacte », puis « s'inspirer
   des descriptions de la page albums ») : titre sur deux lignes au plus, artiste, captation. */
.jws-page-videos__carte {
    display: flex;
    flex-direction: column;
    min-width: 0;
    scroll-margin-top: calc(var(--jws-entete, 141px) + 16px);
}

/* 12/10 : le display ci-dessus (pose le 08/10) l'emportait sur l'attribut hidden : une vignette ecartee par un filtre,
   par la recherche ou par « Plus de videos » restait affichee. Vu par Julien sur ?artiste=abraham-reunion. */
.jws-page-videos__carte[hidden] {
    display: none;
}

.jws-page-videos__pied {
    margin: 28px 0 0;
    text-align: center;
}

.jws-page-videos__plus {
    min-height: 44px;
    margin: 0;
    padding: .5em 1.4em;
    font-size: .9em;
}

/* .jws-btn (commun.css) pose un display : sans cette règle, l'attribut hidden ne cacherait pas le bouton. */
.jws-page-videos__plus[hidden] {
    display: none;
}

.jws-page-videos__plus span {
    opacity: .8;
}


/* -- 4. Vignette : l'image et sa pastille « lecture », puis dessous le titre, l'artiste ------- */

.jws-page-videos__lire {
    display: block;
    color: var(--jws-indigo, #312783);
    text-decoration: none;
}

/* Même raison que pour le bouton : la vignette se cache pendant la lecture. */
.jws-page-videos__lire[hidden] {
    display: none;
}

.jws-page-videos__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--jws-rayon, 3px);
    background: #eceef5;
}

/* Le cadre 16:9 coupe les bandes noires des anciennes vignettes YouTube (4:3). */
.jws-page-videos__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vidéo sans image à la une : un pavé indigo et un losange, pas une image d'emprunt. */
.jws-page-videos__image--vide {
    position: relative;
    background: var(--jws-indigo, #312783);
}

.jws-page-videos__image--vide::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    rotate: 45deg;
    background: var(--jws-orange, #f39200);
}

/* Le signe « lecture » : une mosaïque au centre de l'image, de la famille des flèches du carrousel
   de l'accueil (07/10, demande de Julien ; avant, « Lire la vidéo » en toutes lettres sous l'image).
   Un triangle de dix tesselles en losange et une petite à la pointe, posé en masque : la couleur est
   un fond. ::before est son ombre, décalée d'une case. Aucun disque, aucun
   voile sur l'image. Le texte reste dans la page pour qui lit sans la feuille ; le lien porte déjà
   son nom en aria-label. */
.jws-page-videos__lire {
    position: relative;
}

.jws-page-videos__signe {
    --jws-lecture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12.8 12.8' fill='%23000'%3E%3Cpolygon points='3,0.15 4.45,1.6 3,3.05 1.55,1.6'/%3E%3Cpolygon points='3,3.35 4.45,4.8 3,6.25 1.55,4.8'/%3E%3Cpolygon points='3,6.55 4.45,8 3,9.45 1.55,8'/%3E%3Cpolygon points='3,9.75 4.45,11.2 3,12.65 1.55,11.2'/%3E%3Cpolygon points='4.6,1.75 6.05,3.2 4.6,4.65 3.15,3.2'/%3E%3Cpolygon points='4.6,4.95 6.05,6.4 4.6,7.85 3.15,6.4'/%3E%3Cpolygon points='4.6,8.15 6.05,9.6 4.6,11.05 3.15,9.6'/%3E%3Cpolygon points='6.2,3.35 7.65,4.8 6.2,6.25 4.75,4.8'/%3E%3Cpolygon points='6.2,6.55 7.65,8 6.2,9.45 4.75,8'/%3E%3Cpolygon points='7.8,4.95 9.25,6.4 7.8,7.85 6.35,6.4'/%3E%3Cpolygon points='10.3,5.6 11.1,6.4 10.3,7.2 9.5,6.4'/%3E%3C/svg%3E");
    position: absolute;
    inset: auto 10px 10px auto;    /* en bas à droite de la vignette (07/10, Julien ; centré avant) */
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    pointer-events: none;
    transition: opacity .2s;
}

.jws-page-videos__signe::before,
.jws-page-videos__signe::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    -webkit-mask: var(--jws-lecture) center / contain no-repeat;
    mask: var(--jws-lecture) center / contain no-repeat;
    transition: background-color .2s, translate .2s;
}

.jws-page-videos__signe::before {
    background-color: rgba(0, 0, 0, .85);
    translate: 3px 3px;
}

.jws-page-videos__signe::after {
    background-color: var(--jws-orange, #f39200);
}

/* À la souris, le signe s'efface dès qu'on passe sur la vignette : l'image seule. Au clavier, il reste. */
.jws-page-videos__lire:hover .jws-page-videos__signe {
    opacity: 0;
}

.jws-page-videos__lire:focus-visible .jws-page-videos__signe {
    opacity: 1;
}

.jws-page-videos__lire:focus-visible .jws-page-videos__signe::after {
    background-color: #ffb347;
}

/* Vidéo sans image : le signe remplace le losange. */
.jws-page-videos__image--vide::before {
    content: none;
}

@media (prefers-reduced-motion: reduce) {
    .jws-page-videos__signe,
    .jws-page-videos__signe::before,
    .jws-page-videos__signe::after {
        transition: none;
    }
}

.jws-page-videos__titre {
    margin: 8px 0 0;
    font-family: var(--jws-police, 'Open Sans', sans-serif);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* Deux lignes au plus : le titre entier reste dans l'infobulle et le nom accessible de la vignette. */
.jws-page-videos__titre a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--jws-encre, #262830);
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* Le nom de l'artiste : celui des vignettes d'albums, indigo en petites capitales. */
.jws-page-videos__artiste {
    margin: 3px 0 0;
    color: var(--jws-gris, #666);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
}

.jws-page-videos__artiste a {
    display: inline-block;
    color: var(--jws-indigo, #312783);
    text-decoration: none;
}

.jws-page-videos__titre a:hover,
.jws-page-videos__artiste a:hover {
    color: var(--jws-indigo, #312783);
    text-decoration: underline;
    text-decoration-color: var(--jws-orange, #f39200);
    text-underline-offset: 3px;
}

/* La captation, derrière un losange orange : la ligne grise des albums (#555, 7,46:1). */
.jws-page-videos__meta {
    margin: 2px 0 0;
    color: #555;
    font-size: .75rem;
    line-height: 1.4;
}

.jws-page-videos__media::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 6px 0 1px;
    background: var(--jws-orange, #f39200);
    transform: rotate(45deg) translateY(-2px);
}

@media (pointer: coarse) {
    .jws-page-videos__titre a {
        padding: 2px 0;
    }
    .jws-page-videos__artiste a {
        padding: 4px 0;
    }
}


/* -- 5. Lecture sur place : la vidéo choisie prend toute la rangée ------------------------------ */

.jws-page-videos__carte--lecture {
    grid-column: 1 / -1;
}

.jws-page-videos__carte--lecture > * {
    width: 100%;                    /* la carte est en colonne : sans largeur, les marges auto la réduiraient */
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
}

.jws-page-videos__ecran {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #020202;
}

/* Sans aspect-ratio (Safari avant la version 15), l'écran ferait 0 px de haut : le lecteur serait invisible. */
@supports not (aspect-ratio: 16 / 9) {
    .jws-page-videos__ecran {
        height: 0;
        padding-top: 56.25%;
    }
}

.jws-page-videos__ecran iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.jws-page-videos__fermer {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 8px 0 4px;
    padding: 0 14px;
    border: 1px solid var(--jws-indigo, #312783);
    border-radius: var(--jws-rayon, 3px);
    background: #fff;
    color: var(--jws-indigo, #312783);
    font: inherit;
    font-size: .8em;
    cursor: pointer;
}

.jws-page-videos__fermer:hover {
    background: #eef0f7;
}


/* Le signe « lecture » n'est plus affiché (08/10, demande de Julien : « on enlève l'icône partout »).
   Son dessin reste plus haut dans la feuille : retirer cette règle le remet, en bas à droite. */
.jws-page-videos__signe {
    display: none;
}