/* ════════════════════════════════════════════════════════════
   9x. VIDÉO ÉPINGLÉE (DOSSIER PANEL V2) — desktop uniquement
   ────────────────────────────────────────────────────────────
   Short/reel YouTube épinglé dans la gouttière gauche, visible
   uniquement sur le layout centré (.dossier-panel-v2), là où le
   rail latéral gauche a été retiré. Fixe le long du scroll,
   repliable via le bouton de son en-tête.

   Largeur fluide : contrainte par la plus petite des trois valeurs
     1. --vp-max      : plafond esthétique
     2. --vp-x        : largeur de gouttière réellement disponible
     3. --vp-y        : hauteur d'écran dispo convertie en largeur 9:16
   Sous 1360px la gouttière devient trop étroite pour être lisible
   → le composant est simplement masqué (pas de repli dans le flux
   ici ; à traiter au cas par cas si la vidéo est indispensable
   sur tablette).
   ════════════════════════════════════════════════════════════ */
.dossier-video-pin {
	--vp-max: 360px;    /* plafond de largeur                         */
	--vp-edge: 24px;    /* marge au bord gauche de la fenêtre         */
	--vp-gap: 28px;     /* espace mini avec la colonne de texte       */
	--vp-col: 1120px;   /* max-width de .dossier-container (panel-v2) */
	--vp-pad: 80px;     /* padding-left de .dossier-container         */
	--vp-top: 24px;     /* espace sous la breadcrumb sticky           */
	--vp-bot: 150px;    /* dégagement pour .back-to-index (60px)      */
	--vp-chrome: 96px;  /* hauteur du label + légende + bordures      */

	--vp-x: calc((100vw - var(--vp-col)) / 2 + var(--vp-pad) - var(--vp-edge) - var(--vp-gap));
	--vp-y: calc((100vh - var(--header-h, 56px) - var(--crumb-h, 44px) - var(--vp-top) - var(--vp-bot) - var(--vp-chrome)) * 9 / 16);
	--vp-w: min(var(--vp-max), var(--vp-x), var(--vp-y));

	position: fixed;
	left: var(--vp-edge);
	top: calc(var(--header-h, 56px) + var(--crumb-h, 44px) + var(--vp-top));
	z-index: 60;

	width: var(--vp-w);
	background: var(--bg-card);
	border: 1px solid var(--border-hi);
	box-shadow: 0 14px 46px rgba(0, 0, 0, 0.6);
	transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dossier-video-pin::before {
	content: '';
	position: absolute;
	top: -1px; left: -1px;
	width: 8px; height: 8px;
	border-top: 1px solid var(--accent-60);
	border-left: 1px solid var(--accent-60);
	z-index: 2;
}

.dossier-video-pin__label {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 12px 9px;
	border-bottom: 1px solid var(--border);
	font-family: 'Share Tech Mono', monospace;
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--accent-60);
}
.dossier-video-pin__label::before {
	content: '';
	width: 6px; height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 6px var(--accent);
}

.dossier-video-pin__toggle {
	margin-left: auto;
	padding: 3px 7px;
	background: none;
	border: 1px solid var(--border-hi);
	color: var(--text-lo);
	font-family: 'Share Tech Mono', monospace;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.dossier-video-pin__toggle:hover {
	color: var(--accent);
	border-color: var(--accent-30);
}
.dossier-video-pin__toggle:focus-visible {
	outline: 2px solid var(--accent-60);
	outline-offset: 1px;
}

.dossier-video-pin__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	background: #000;
	overflow: hidden;
	cursor: pointer;
}
.dossier-video-pin__frame img,
.dossier-video-pin__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.dossier-video-pin__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, rgba(4, 4, 10, 0.12), rgba(4, 4, 10, 0.55));
	transition: background 0.25s;
}
.dossier-video-pin__frame:hover .dossier-video-pin__play {
	background: linear-gradient(180deg, rgba(4, 4, 10, 0.03), rgba(4, 4, 10, 0.38));
}
.dossier-video-pin__play svg {
	width: clamp(46px, 26%, 72px);
	height: auto;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
	transition: transform 0.2s;
}
.dossier-video-pin__frame:hover .dossier-video-pin__play svg {
	transform: scale(1.08);
}

.dossier-video-pin__cap {
	padding: 10px 12px 12px;
	font-family: 'Exo 2', sans-serif;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--text-lo);
}
.dossier-video-pin__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 9px;
	padding: 5px 9px;
	border: 1px solid var(--accent-30);
	font-family: 'Share Tech Mono', monospace;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-85);
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dossier-video-pin__cta:hover {
	background: var(--accent-08);
	border-color: var(--accent-60);
	color: var(--accent);
}

/* ── État replié : ne garde que le bandeau d'en-tête ── */
.dossier-video-pin.is-collapsed {
	width: 190px;
}
.dossier-video-pin.is-collapsed .dossier-video-pin__frame,
.dossier-video-pin.is-collapsed .dossier-video-pin__cap {
	display: none;
}
.dossier-video-pin.is-collapsed .dossier-video-pin__label {
	border-bottom: none;
}

/* ── Desktop uniquement : sous 1360px la gouttière ne suffit plus ── */
@media (max-width: 1440px) {
	.dossier-video-pin {
		display: none;
	}
}

/* ── Confort clavier/tremblement : coupe l'animation de largeur ── */
@media (prefers-reduced-motion: reduce) {
	.dossier-video-pin {
		transition: none;
	}
}