/* widget-video.css — Le bandeau vidéo DP (YouTube / Vimeo / fichier hébergé)
 *
 * Le bloc ne dessine plus un lecteur encadré posé dans la colonne : il dessine
 * le bandeau de la maquette — la photo en plein cadre, un voile qui la protège,
 * et au centre la pastille de lecture, le titre et la durée empilés.
 *
 * C'est un remplacement, pas une variante. Une page déjà construite reprend le
 * dessin au jour de la mise à jour, sans qu'on rouvre le bloc : c'est pour ça
 * que les noms de contrôles et de variables d'avant sont conservés à
 * l'identique — un réglage enregistré retombe sur son rôle.
 */

.dp-video {
    /* Chaîne à trois niveaux : override Elementor -> charte -> dernier repli. */
    --dp-video-radius:        var(--dp-vid-radius, var(--dp-radius-lg, 20px));

    /* La pastille est blanche à l'encre, et non en couleur de marque : posée
       sur une photo assombrie, elle doit rester le point le plus clair du
       cadre. `accent_color` la repeint pour qui veut. */
    --dp-video-accent:        var(--dp-vid-accent, var(--dp-color-surface, #ffffff));
    --dp-video-accent-dark:   var(--dp-vid-accent-dark, var(--dp-color-surface, #ffffff));
    --dp-video-icon:          var(--dp-vid-icon, var(--dp-color-text, #303030));
    --dp-video-icon-hover:    var(--dp-vid-icon-hover, var(--dp-video-icon));

    --dp-video-bg:            var(--dp-vid-bg, var(--dp-color-text, #303030));
    --dp-video-shadow:        var(--dp-vid-shadow, 0 10px 30px rgba(16, 51, 96, 0.18));

    /* Texte posé sur une photo assombrie : blanc en dur, hors charte et assumé
       (skill dp-charte §4e). Un jeton `on-…` dirait la couleur lisible sur un
       aplat de marque, ce qui n'est pas la surface ici. */
    --dp-video-title:         var(--dp-vid-title, #ffffff);
    --dp-video-duration:      var(--dp-vid-duration, rgba(255, 255, 255, 0.82));

    /* Le voile : deux arrêts, du clair en haut au sombre en bas. Il n'est pas
       décoratif — c'est lui qui rend le titre lisible sur n'importe quelle
       photo. */
    --dp-video-veil-top:      var(--dp-vid-veil-top, rgba(48, 48, 48, 0.25));
    --dp-video-veil-bottom:   var(--dp-vid-veil-bottom, rgba(48, 48, 48, 0.6));

    font-family: var(--dp-font-base, inherit);
    font-weight: var(--dp-font-base-weight, 400);
    width: 100%;
}

/* Le bandeau bord à bord : il quitte la colonne de son conteneur et prend la
   largeur de la fenêtre. Réservé aux sections qui n'ont pas déjà leur propre
   pleine largeur — sinon la marge négative se cumule. */
.dp-video--full {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Les angles vifs : l'interrupteur « Coins arrondis » d'Elementor. Le curseur
   de rayon lui est conditionné, Elementor n'émet donc aucune règle concurrente
   quand il est éteint. */
.dp-video--square {
    --dp-vid-radius: 0px;
}

/* ── Le cadre ────────────────────────────────────────────────────────────── */

.dp-video__frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-height: var(--dp-vid-min-height, 0px);
    max-height: var(--dp-vid-max-height, none);
    overflow: hidden;
    border-radius: var(--dp-video-radius);
    background: var(--dp-video-bg);
    box-shadow: var(--dp-video-shadow);
    /* Le cadre porte son propre contexte d'empilement : la carte de citation
       qui le chevauche ne doit pas passer sous la façade. */
    isolation: isolate;
}

/*
 * La cale de format.
 *
 * Elle donne au cadre la hauteur du format choisi. Une cellule de grille et non
 * un `aspect-ratio` : le format en `aspect-ratio` fixe la hauteur, et un titre
 * de trois lignes sur un écran étroit en ressort rogné — la pastille coupée en
 * haut, la durée disparue. Cale et calque partagent la même cellule, la rangée
 * prend la hauteur du plus grand des deux, et le bandeau grandit plutôt que
 * d'escamoter son contenu.
 */
.dp-video__frame::before {
    content: "";
    grid-area: 1 / 1;
    width: 0;
    padding-top: var(--dp-vid-ratio, 56.25%);
}

.dp-video__frame iframe,
.dp-video__frame video,
.dp-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

.dp-video__frame video {
    object-fit: cover;
    display: block;
    background: var(--dp-video-bg);
}

/* ── La façade ───────────────────────────────────────────────────────────── */
/*
 * Un bouton qui couvre tout le cadre, et rien d'autre dedans que la photo et
 * son voile. Le titre vit dans un calque frère : un `<h2>` dans un `<button>`
 * n'est pas du HTML valide, et une vidéo dont le titre ne compte pas dans le
 * document est une vidéo que personne ne trouve.
 */
.dp-video__poster {
    display: block;
    padding: 0;
    cursor: pointer;
    background: var(--dp-video-bg);
    overflow: hidden;
    z-index: 1;
}

.dp-video--no-zoom {
    --dp-vid-zoom: 1;
}

img.dp-video__poster-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
    object-position: var(--dp-vid-focal, center);
    transition: transform 0.6s var(--dp-ease, cubic-bezier(0.22, 1, 0.36, 1)), filter 0.4s ease;
}

.dp-video__veil {
    position: absolute;
    inset: 0;
    opacity: var(--dp-vid-veil-opacity, 1);
    background: linear-gradient(
        var(--dp-vid-veil-angle, 180deg),
        var(--dp-video-veil-top) 0%,
        var(--dp-video-veil-bottom) 100%
    );
    transition: opacity 0.3s ease;
}

/* Voile uniforme : les deux arrêts se valent, seul le premier est lu. */
.dp-video--veil-flat .dp-video__veil {
    background: var(--dp-video-veil-bottom);
}

/* Voile de bas de cadre : la photo reste nette en haut, le texte reste lisible
   en bas. C'est le voile à choisir quand le titre est posé en bas à gauche. */
.dp-video--veil-foot .dp-video__veil {
    background: linear-gradient(
        180deg,
        transparent 28%,
        var(--dp-video-veil-bottom) 100%
    );
}

.dp-video--veil-none .dp-video__veil {
    display: none;
}

/* ── Le calque de contenu ────────────────────────────────────────────────── */
/*
 * Posé devant la façade et transparent au clic : il tient le titre, il ne le
 * rend pas cliquable à la place du bouton. Seul le texte reprend les
 * événements, pour rester sélectionnable.
 */
.dp-video__overlay {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dp-vid-gap, 20px);
    padding: var(--dp-vid-pad, clamp(24px, 4vw, 40px));
    text-align: center;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.dp-video__title,
.dp-video__duration {
    pointer-events: auto;
}

.dp-video--place-bottom .dp-video__overlay {
    justify-content: flex-end;
}

.dp-video--place-bottom-left .dp-video__overlay,
.dp-video--place-left .dp-video__overlay {
    align-items: flex-start;
    text-align: left;
}

.dp-video--place-bottom-left .dp-video__overlay {
    justify-content: flex-end;
}

/* Le lecteur lancé, le calque s'efface : il n'a plus rien à annoncer, et il
   couvrirait les commandes de la vidéo. */
.dp-video.is-playing .dp-video__overlay {
    opacity: 0;
    visibility: hidden;
}

/* ── La pastille de lecture ──────────────────────────────────────────────── */

.dp-video__play {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--dp-vid-play-size, clamp(58px, 6vw, 78px));
    height: var(--dp-vid-play-size, clamp(58px, 6vw, 78px));
    border-radius: var(--dp-radius-pill, 999px);
    background: var(--dp-video-accent);
    color: var(--dp-video-icon);
    box-shadow: var(--dp-vid-play-shadow, 0 6px 20px rgba(16, 51, 96, 0.25));
    transition: transform 0.25s var(--dp-ease, ease), background 0.25s ease, color 0.25s ease;
}

.dp-video__play svg {
    width: 36%;
    height: 36%;
    margin-left: 8%; /* recentrage optique du triangle */
    fill: currentColor;
}

.dp-video__poster:hover ~ .dp-video__overlay .dp-video__play,
.dp-video__poster:focus-visible ~ .dp-video__overlay .dp-video__play {
    transform: scale(var(--dp-vid-play-grow, 1.08));
    background: var(--dp-video-accent-dark);
    color: var(--dp-video-icon-hover);
}

.dp-video__poster:hover img.dp-video__poster-img {
    transform: scale(var(--dp-vid-zoom, 1.04));
}

.dp-video__poster:hover .dp-video__veil {
    opacity: calc(var(--dp-vid-veil-opacity, 1) * 1.12);
}

.dp-video__poster:focus-visible {
    outline: 3px solid var(--dp-video-accent);
    outline-offset: -5px;
}

/* Le halo : une onde qui part de la pastille, pour signaler qu'on peut lancer
   sans avoir à survoler. Désactivé par défaut — la maquette ne l'a pas. */
.dp-video--pulse .dp-video__play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid var(--dp-video-accent);
    animation: dp-video-pulse var(--dp-vid-pulse-duration, 2.6s) var(--dp-ease, ease-out) infinite;
}

@keyframes dp-video-pulse {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(1.65); }
    100% { opacity: 0;    transform: scale(1.65); }
}

/* ── Le titre et la durée ────────────────────────────────────────────────── */

.dp-video__title {
    margin: 0;
    font-family: var(--dp-font-heading, inherit);
    font-weight: var(--dp-font-heading-weight, 700);
    /* L'échelle de la maquette — clamp(28px, 3.3vw, 44px) — suivie de près au
       delà de 900 px, mais avec un plancher qui descend : la maquette est un
       bandeau pleine largeur, le bloc vit aussi dans une colonne de téléphone. */
    font-size: var(--dp-vid-title-size, clamp(20px, 0.55rem + 2.6vw, 44px));
    line-height: 1.08;
    letter-spacing: -0.015em;
    /* Couleur explicite : sans elle, un thème qui impose `h1-h6 { color:
       inherit }` ferait remonter la global color d'Elementor (skill §4a). */
    color: var(--dp-video-title);
    max-width: var(--dp-vid-title-max, 22ch);
    text-wrap: balance;
}

.dp-video__duration {
    margin: 0;
    font-family: var(--dp-font-heading, inherit);
    font-weight: 700;
    font-size: var(--dp-vid-duration-size, 11px);
    letter-spacing: var(--dp-tracking-caps, 0.12em);
    text-transform: uppercase;
    color: var(--dp-video-duration);
}

/* ── L'apparition à l'entrée dans l'écran ───────────────────────────────── */
/*
 * La classe est posée par le script, jamais par PHP : sans JavaScript, le
 * contenu ne doit pas rester invisible.
 */
.dp-video--reveal .dp-video__play,
.dp-video--reveal .dp-video__title,
.dp-video--reveal .dp-video__duration {
    opacity: 0;
    transform: translateY(var(--dp-vid-reveal-shift, 22px));
    transition:
        opacity var(--dp-vid-reveal-duration, 0.8s) var(--dp-ease, cubic-bezier(0.22, 1, 0.36, 1)),
        transform var(--dp-vid-reveal-duration, 0.8s) var(--dp-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

.dp-video--reveal.is-in-view .dp-video__play,
.dp-video--reveal.is-in-view .dp-video__title,
.dp-video--reveal.is-in-view .dp-video__duration {
    opacity: 1;
    transform: none;
}

/* Le décalage : la pastille, puis le titre, puis la durée. */
.dp-video--reveal .dp-video__title    { transition-delay: 0.12s; }
.dp-video--reveal .dp-video__duration { transition-delay: 0.24s; }

/* La pastille garde son propre grossissement au survol : sa transition de
   transform est réécrite ci-dessus par l'apparition, on la rétablit une fois
   l'entrée jouée. */
.dp-video--reveal.is-in-view .dp-video__play {
    transition: transform 0.25s var(--dp-ease, ease), background 0.25s ease, color 0.25s ease;
}

/* ── La légende ──────────────────────────────────────────────────────────── */

.dp-video__caption {
    margin: 12px 2px 0;
    font-size: var(--dp-vid-caption-size, 14px);
    line-height: 1.5;
    color: var(--dp-vid-caption, var(--dp-color-text-muted, #5b5b5b));
    font-family: var(--dp-font-base, inherit);
    font-weight: var(--dp-font-base-weight, 400);
}

/* Le mouvement n'est pas le sujet : sous `prefers-reduced-motion`, le bandeau
   se donne d'emblée et ne bouge plus. */
@media (prefers-reduced-motion: reduce) {
    .dp-video__play,
    img.dp-video__poster-img,
    .dp-video__overlay,
    .dp-video--reveal .dp-video__play,
    .dp-video--reveal .dp-video__title,
    .dp-video--reveal .dp-video__duration {
        transition: none;
    }

    .dp-video--reveal .dp-video__play,
    .dp-video--reveal .dp-video__title,
    .dp-video--reveal .dp-video__duration {
        opacity: 1;
        transform: none;
    }

    .dp-video__poster:hover img.dp-video__poster-img,
    .dp-video__poster:hover ~ .dp-video__overlay .dp-video__play {
        transform: none;
    }

    .dp-video--pulse .dp-video__play::after {
        animation: none;
        opacity: 0;
    }
}

/* =====================================================================
 * La citation posée devant le bandeau
 * =====================================================================
 * « Vidéo avec citation devant. »
 *
 * La carte chevauche le cadre au lieu de se poser dessous : c'est le
 * chevauchement qui fait tenir les deux comme un seul objet, et c'est le motif
 * de la page « Smart Moves » du site groupe.
 *
 * Elle est rendue hors du cadre, parce que le cadre porte `overflow: hidden`
 * pour que la vidéo prenne ses coins arrondis — une carte qui dépasse y serait
 * rognée net.
 *
 * Elle ne recouvre jamais le centre : la pastille de lecture et le titre y
 * vivent. Les quatre positions proposées sont toutes périphériques, et la
 * largeur est bornée.
 * ===================================================================== */
.dp-video--has-quote {
	position: relative;
	/* Le cadre garde sa place ; la carte dépasse par le bas ou par le côté, et
	   cette marge lui réserve l'espace pour que le bloc suivant ne la recouvre
	   pas. */
	margin-bottom: var(--dp-vid-quote-overhang, 48px);
}

.dp-video__quote {
	position: absolute;
	z-index: 3;
	width: var(--dp-vid-quote-width, min(420px, 46%));
	margin: 0;
	padding: var(--dp-vid-quote-pad, clamp(22px, 2.4vw, 34px));

	background: var(--dp-vid-quote-bg, var(--dp-color-surface, #ffffff));
	color: var(--dp-vid-quote-text, var(--dp-color-text, #303030));
	border-radius: var(--dp-vid-quote-radius, var(--dp-radius-lg, 20px));
	box-shadow: var(--dp-shadow-lg, 0 24px 48px rgba(16, 51, 96, 0.14));

	/* Posée devant un lecteur, elle intercepterait le clic qui lance la vidéo.
	   Elle laisse donc passer les clics, sauf sur son propre texte — qu'on doit
	   pouvoir sélectionner. */
	pointer-events: none;
}

.dp-video__quote-text,
.dp-video__quote-author {
	pointer-events: auto;
}

.dp-video__quote--bottom-left  { left: var(--dp-vid-quote-inset, 6%);  bottom: calc(var(--dp-vid-quote-overhang, 48px) * -1); }
.dp-video__quote--bottom-right { right: var(--dp-vid-quote-inset, 6%); bottom: calc(var(--dp-vid-quote-overhang, 48px) * -1); }
.dp-video__quote--left         { left: calc(var(--dp-vid-quote-inset, 6%) * -1);  top: 50%; transform: translateY(-50%); }
.dp-video__quote--right        { right: calc(var(--dp-vid-quote-inset, 6%) * -1); top: 50%; transform: translateY(-50%); }

/* Les guillemets : le caractère typographique et non une icône — la charte n'a
   pas de jeu d'icônes pour ça et n'en veut pas. */
.dp-video__quote-mark {
	display: block;
	font-family: var(--dp-font-heading, inherit);
	font-size: 42px;
	line-height: 0.6;
	color: var(--dp-vid-quote-accent, var(--dp-color-primary-strong, #417e88));
}

.dp-video__quote-text {
	margin: 12px 0 0;
	font-family: var(--dp-font-heading, inherit);
	font-size: clamp(15px, 1.2vw, 19px);
	font-style: italic;
	line-height: 1.5;
	color: var(--dp-vid-quote-text, var(--dp-color-text, #303030));
}

.dp-video__quote-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 14px;
}

.dp-video__quote-name {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: var(--dp-tracking-caps, 0.08em);
	text-transform: uppercase;
	color: var(--dp-vid-quote-accent, var(--dp-color-primary-strong, #417e88));
}

.dp-video__quote-role {
	font-size: 13px;
	color: var(--dp-vid-quote-muted, var(--dp-color-text-muted, #5b5b5b));
}

@media (max-width: 767px) {
	/*
	 * Sous 768 px, une carte de 46 % recouvrirait la moitié du lecteur. Elle
	 * quitte le chevauchement et se pose sous la vidéo, pleine largeur : la
	 * citation reste lue, la vidéo reste jouable.
	 */
	.dp-video--has-quote { margin-bottom: 0; }

	.dp-video__quote,
	.dp-video__quote--bottom-left,
	.dp-video__quote--bottom-right,
	.dp-video__quote--left,
	.dp-video__quote--right {
		position: static;
		width: auto;
		transform: none;
		margin-top: -18px;
		margin-inline: 16px;
	}
}