/* Vidéo tierce en façade (WebseeImageExtension::websee_youtube()).

   Servie en feuille autonome depuis base_frontend.html.twig, comme cookies.css et
   copyright.css : elle n'est pas concaténée dans le CSS figé à la publication, donc elle
   s'applique aussi aux pages publiées avant l'arrivée des vidéos.

   La façade doit ressembler à un lecteur vidéo, sinon personne ne comprend qu'il faut
   cliquer. Elle en reprend donc les codes — vignette pleine largeur, pastille de lecture
   au centre — mais reste, elle, un bouton HTML natif : focus visible, activable à
   l'espace et à l'entrée, nom accessible visible (RGAA 7.3 / 11.x).

   Aucune dépendance à Bootstrap : le rapport d'aspect est tenu ici, pour que la feuille
   fonctionne aussi dans un site dont la charte ne charge pas la grille. */

:root {
    --ws-video-fond: #18181b;
    --ws-video-texte: #fafafa;
    --ws-video-voile: rgba(9, 9, 11, .55);
    --ws-video-accent: rgba(255, 255, 255, .95);
    --ws-video-accent-texte: #18181b;
    --ws-video-rayon: 12px;
    --ws-video-mention: #52525b;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ws-video-mention: #a1a1aa;
    }
}

.ws-video {
    margin: 0 0 1rem;
    max-width: 100%;
}

/* Rapport 16/9 tenu par le padding : le contenu (bouton puis cadre) est posé en
   absolu par-dessus. La bascule vignette → lecteur ne fait donc bouger aucune ligne
   de la page — un « saut » à la lecture est aussi désagréable qu'une publicité qui
   pousse le texte. */
.ws-video__cadre {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: var(--ws-video-rayon);
    background: var(--ws-video-fond);
}

.ws-video__cadre > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ws-video__iframe {
    border: 0;
}

/* Le déclencheur est un <button> : il hérite donc de styles d'agent utilisateur
   qu'il faut neutraliser, sans jamais toucher à ce qui le rend utilisable. */
.ws-video__lecture {
    display: block;
    padding: 0;
    border: 0;
    background: var(--ws-video-fond);
    color: var(--ws-video-texte);
    cursor: pointer;
    text-align: left;
}

.ws-video__miniature {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Pastille de lecture. `aria-hidden` côté HTML : c'est une image de bouton, le nom
   accessible est porté par le libellé visible juste en dessous. */
.ws-video__picto {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4.5rem;
    height: 4.5rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--ws-video-accent);
    transition: transform .15s ease-out;
}

.ws-video__picto::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: .75rem 0 .75rem 1.25rem;
    border-color: transparent transparent transparent var(--ws-video-accent-texte);
}

.ws-video__lecture:hover .ws-video__picto,
.ws-video__lecture:focus-visible .ws-video__picto {
    transform: translate(-50%, -50%) scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .ws-video__picto { transition: none; }
    .ws-video__lecture:hover .ws-video__picto,
    .ws-video__lecture:focus-visible .ws-video__picto { transform: translate(-50%, -50%); }
}

/* Libellé « Lire la vidéo : … » — VISIBLE, et non caché dans un aria-label : c'est le
   nom accessible du bouton, il doit pouvoir être lu par tout le monde. Posé sur un
   voile sombre pour tenir le contraste quelle que soit la vignette (RGAA 3.2). */
.ws-video__libelle {
    position: absolute;
    inset: auto 0 0 0;
    top: auto;
    height: auto;
    padding: 2.5rem .875rem .75rem;
    background: linear-gradient(to top, var(--ws-video-voile), transparent);
    color: var(--ws-video-texte);
    font-size: .95rem;
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.ws-video__lecture:focus-visible {
    outline: 3px solid var(--ws-video-accent);
    outline-offset: 2px;
}

/* Panneau de refus : il remplace le lecteur quand YouTube décline la lecture. Traité
   comme une information, pas comme une alerte du site — ce n'est pas une panne de la
   page, c'est un réglage du propriétaire de la vidéo. */
.ws-video__echec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.5rem;
    background: var(--ws-video-fond);
    color: var(--ws-video-texte);
    text-align: center;
}

.ws-video__echec:focus-visible {
    outline: 3px solid var(--ws-video-accent);
    outline-offset: -3px;
}

.ws-video__echec-texte {
    margin: 0;
    max-width: 34rem;
    font-size: .95rem;
    line-height: 1.45;
}

/* Le lien reste dans le panneau sombre : il doit contraster avec LUI, pas avec la
   page — d'où la couleur reprise du composant plutôt que celle de la charte. */
.ws-video__echec-lien {
    color: var(--ws-video-texte) !important;
    font-size: .95rem !important;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* La mention n'est pas une note de bas de page : elle informe AVANT le clic de ce que
   la lecture déclenche. Sans elle, le clic ne serait pas un consentement éclairé. */
.ws-video__mention {
    margin-top: .5rem;
    font-size: .8125rem;
    line-height: 1.4;
    color: var(--ws-video-mention);
}

/* La couleur du lien reste celle de la charte — c'est elle qui signale « ceci est un
   lien » sur tout le site. Seule la TAILLE est reprise : la charte pose un
   `font-size` sur tous les liens de contenu (`.websee-container a:not(…)`, spécificité
   0-5-1), et un lien de 18 px au milieu d'une mention de 13 px casse la ligne. C'est
   le seul cas où cette feuille passe devant la charte, d'où le `!important` : la
   spécificité seule ne suffit pas, et répliquer la chaîne de `:not()` serait pire. */
.ws-video__mention a {
    font-size: inherit !important;
}

/* Les liens de la mention (page de la vidéo, confidentialité Google, conditions
   YouTube) restent sur la même ligne que la phrase tant que la place le permet, et
   passent à la ligne ensemble sinon — jamais un lien seul détaché de ses voisins. */
.ws-video__liens {
    display: inline-block;
}

/* En cas de refus, la mention d'avant-clic disparaît : le panneau porte déjà le motif
   et le lien, et la répéter reviendrait à annoncer un chargement qui n'aura pas lieu. */
.ws-video--echec .ws-video__mention {
    display: none;
}

.ws-video__transcription {
    margin-top: .5rem;
    font-size: .875rem;
}

.ws-video__transcription summary {
    cursor: pointer;
}

.ws-video__transcription-corps {
    margin-top: .5rem;
}