/* Fiche détaillée du Portfolio, curseurs, ondes de clic et animations d'ouverture : feuille chargée sans bloquer l'affichage (voir index.html) */

.DetailProjet {
	/* Même taille pour tous les projets */
	--detail-gouttiere: 7rem;	/* Place des flèches de chaque côté de la fiche */
	width: min(130rem, 96vw);
	height: min(64rem, 86dvh);
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;

	background: transparent;
	border: 0;
	color: var(--couleur-texte);
	overflow: visible;
}
.DetailProjet { touch-action: none; }
.DetailProjet[open] { display: flex; flex-direction: column; gap: var(--espace-3); animation: detail-entree 0.3s var(--courbe) both; }
.DetailProjet::backdrop {
	/* Opaque (la grille qui se réarrange derrière ne se voit plus), mais habillé : le fond de page avec les lueurs bleue et violette du site.
	   Elles sont éteintes à l'ouverture et s'allument ensuite (--allumage de 0 à 1, voir .Detail-Allume). */
	--allumage: 0;
	background:
		radial-gradient(70rem 45rem at 88% 4%, color-mix(in srgb, rgba(77, 165, 245, 0.16) calc(var(--allumage) * 100%), transparent), transparent 70%),
		radial-gradient(70rem 45rem at 8% 98%, color-mix(in srgb, rgba(168, 85, 247, 0.16) calc(var(--allumage) * 100%), transparent), transparent 70%),
		radial-gradient(90rem 60rem at 50% 50%, color-mix(in srgb, rgba(77, 165, 245, 0.05) calc(var(--allumage) * 100%), transparent), transparent 75%),
		var(--couleur-fond);
	transition: --allumage 1.3s ease;
}
.DetailProjet.Detail-Allume::backdrop { --allumage: 1; }
.DetailProjet[open]::backdrop { animation: detail-fond-entree 0.3s ease both; }
.DetailProjet.Detail-Sortie { animation: detail-sortie 0.6s cubic-bezier(0.45, 0, 0.2, 1) 0.15s both; }
.DetailProjet.Detail-Sortie::backdrop { animation: detail-fond-sortie 0.56s ease-in-out 0.15s both; }

@keyframes detail-entree { from { opacity: 0; transform: translateY(3rem) scale(0.95); } to { opacity: 1; transform: none; } }
@keyframes detail-sortie { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(1.6rem) scale(0.965); } }
@keyframes detail-fond-entree { from { opacity: 0; } to { opacity: 1; } }
@keyframes detail-fond-sortie { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .DetailProjet[open], .DetailProjet[open]::backdrop { animation: none; } }

/* Scène : la fiche au centre, une flèche de chaque côté */
.Detail-Scene { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }

/* Les projets sont côte à côte dans la même case : le carrousel les fait glisser. Tiré à la main, la fiche suit le doigt
   et le projet voisin arrive à côté. */
.Detail-Corps {
	flex: 1 1 auto;
	min-width: 0;
	margin-inline: var(--detail-gouttiere);
	display: grid;
	overflow: auto;
	border-radius: var(--rayon-2);
	touch-action: pan-y;
	overscroll-behavior: contain;
}
.Detail-Corps > .SectionBestWorks {
	grid-area: 1 / 1;
	margin: 0;
	min-height: 100%;
	/* Le média prend plus de place que dans Best Projects : la fenêtre est plus basse, il faut remplir */
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	animation: none;	/* Pas de pastilles animées pendant les glissements */
}
.Detail-Corps.Detail-Glisse { overflow: hidden; }
.Detail-Corps, .Detail-Corps.Detail-Tire { cursor: var(--curseur-glisse); user-select: none; }
.Detail-Corps .Projet-Description { font-size: calc(var(--taille-texte-second) * 1.1); }
/* Synopsis trop long pour la fiche : seul le texte défile, avec une fine barre aux couleurs du site */
.Detail-Corps .Projet-Description--defile { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding-right: 0.8rem; scrollbar-width: thin; scrollbar-color: var(--accent-1) transparent; cursor: auto; user-select: text; }

/* Sans vidéo : l'image du projet, dans le même cadre et à la même taille que le lecteur vidéo */
.Detail-Affiche { position: absolute; inset: 0; }

/* Liens du projet : une pastille par lien, avec l'icône de la boutique ou du site */
.Detail-Liens { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espace-2) var(--espace-5); }
.Detail-Lien {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	padding: 0.8rem 1.6rem;

	background-color: var(--couleur-surface-1);
	border: var(--bordure-fine) solid var(--couleur-bordure);
	border-radius: var(--rayon-pilule);
	font-size: var(--taille-texte-meta);
	color: var(--couleur-titre);
	text-decoration: none;
	transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe);
}
.Detail-Lien i { font-size: 1.8rem; color: var(--accent-1); }
.Detail-Lien .Logo-Lien { font-size: 1.2rem; }
.Detail-Lien:hover, .Detail-Lien:focus-visible { border-color: var(--accent-1); color: var(--accent-1-clair); }

/* Boutons ronds : flèches de côté, croix, flèches de la bande */
.Detail-Fleche, .Detail-Fermer, .Detail-BandeFleche, .Detail-Recentrer {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	background-color: var(--couleur-surface-1);
	border: var(--bordure-fine) solid var(--couleur-bordure);
	border-radius: 50%;
	color: var(--couleur-titre);
	cursor: var(--curseur-lien);
	transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe), opacity var(--duree-courte) var(--courbe);
}
.Detail-Fleche:hover:not(:disabled), .Detail-Fleche:focus-visible, .Detail-Fermer:hover, .Detail-Fermer:focus-visible,
.Detail-BandeFleche:hover:not(:disabled), .Detail-BandeFleche:focus-visible, .Detail-Recentrer:hover, .Detail-Recentrer:focus-visible { border-color: var(--accent-1); color: var(--accent-1-clair); }
.Detail-Fleche:disabled, .Detail-BandeFleche:disabled { opacity: 0.4; cursor: var(--curseur-base); }

.Detail-Fleche { position: absolute; top: 50%; width: 5rem; height: 5rem; margin-top: -2.5rem; font-size: 2rem; z-index: 5; }
.Detail-Gauche { left: calc((var(--detail-gouttiere) - 5rem) / 2); }
.Detail-Droite { right: calc((var(--detail-gouttiere) - 5rem) / 2); }

.Detail-Fermer {
	position: absolute;
	top: var(--espace-3);
	right: calc(var(--detail-gouttiere) + var(--espace-3));
	z-index: 10;
	width: 4.2rem;
	height: 4.2rem;
	font-size: 1.8rem;
	background-color: var(--couleur-bandeau);
}

/* Bande : compteur près des vignettes de tous les projets du filtre, le projet ouvert au centre */
.Detail-Bande { flex: 0 0 auto; display: flex; align-items: center; gap: var(--espace-3); }
.Detail-BandeFleche, .Detail-Recentrer { display: flex; flex: 0 0 auto; width: 3rem; height: 3rem; font-size: 1.2rem; }
.Detail-Compteur {
	flex: 0 0 auto;
	padding: 0.5rem 1.4rem;

	background-color: var(--couleur-bandeau);
	border: var(--bordure-fine) solid var(--couleur-bordure);
	border-radius: var(--rayon-pilule);
	font-size: var(--taille-texte-meta);
	letter-spacing: 0.08em;
	color: var(--couleur-texte);
}

.Detail-Piste {
	position: relative;	/* Les décalages des vignettes se mesurent depuis la bande */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	gap: var(--espace-2);
	overflow-x: auto;
	padding: 0.6rem 0;
	scrollbar-width: none;
}
.Detail-Piste::-webkit-scrollbar { display: none; }
/* L'allumage d'une vignette est continu (--actif de 0 à 1, posé par le script pendant le glissement) : opacité et couleur
   du cadre suivent le geste au lieu de basculer entre deux états. */
.Detail-Vignette {
	--actif: 0;
	flex: 0 0 auto;
	width: clamp(10rem, 10vw, 14rem);
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0;

	background: none;
	border: 0;
	opacity: calc(0.55 + 0.45 * var(--actif));
	cursor: var(--curseur-lien);
}
.Detail-VignetteImage {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;

	background: var(--couleur-fond);
	border: 2px solid color-mix(in srgb, var(--accent-1) calc(var(--actif) * 100%), transparent);
	border-radius: var(--rayon-1);
}
.Detail-VignetteDate { font-size: var(--taille-texte-micro); letter-spacing: 0.08em; text-align: center; color: var(--couleur-texte-doux); }
.Detail-Vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.Detail-Vignette img.Image-Entiere { object-fit: contain; }	/* Affiches et formats verticaux : vignette entière, bandes sombres sur les côtés */
.Detail-Vignette:hover, .Detail-Vignette:focus-visible { opacity: calc(0.9 + 0.1 * var(--actif)); }
.Detail-Vignette[aria-current="true"] { --actif: 1; }

/* Tablette et téléphone : plein écran, pas de flèches de côté (glissement du doigt, flèches de la bande) */
@media (max-width: 1199px) {
	.DetailProjet { --detail-gouttiere: 0rem; width: 100vw; height: 100dvh; padding: var(--espace-2); }
	.Detail-Fleche { display: none; }
	.Detail-Fermer { right: var(--espace-3); }
	/* Une colonne : la vidéo, le titre, le texte et la fiche sont répartis à égale distance sur toute la hauteur du cadre */
	.Detail-Corps > .SectionBestWorks { grid-template-columns: minmax(0, 1fr); align-content: space-evenly; padding-inline: clamp(1.2rem, 6vw - 1.1rem, 4.8rem); }
	.Detail-Corps .SectionBestWorks-Informations-Right { display: contents; }
	/* Des blancs de chaque côté de la fiche, d'autant plus larges que l'écran l'est ; synopsis plus aéré */
	.Detail-Corps { margin-inline: clamp(0px, 8vw - 2.5rem, 8rem); }
	.Detail-Corps .Projet-Description { line-height: 1.8; }
	/* Même taille de lecteur pour tous les projets, limitée sur les écrans larges et bas (tablette en paysage) */
	.Detail-Corps .SectionBestWorks-Informations-Left { width: 100%; max-width: calc(21dvh * 16 / 9); margin-inline: auto; }
}


/* Fiche ouverte : les animations en boucle de la page derrière sont suspendues (le défilement de la page est bloqué par
   le script, sans cacher sa barre : rien ne bouge). Pendant un glissement, la fiche se prépare sur sa propre couche et ses boucles s'arrêtent. */
.Detail-Ouvert main *, .Detail-Ouvert main *::before, .Detail-Ouvert main *::after,
.Detail-Ouvert nav *, .Detail-Ouvert footer * { animation-play-state: paused !important; }
.Detail-Glisse > .SectionBestWorks { will-change: transform; }
.Detail-Glisse * { animation-play-state: paused !important; }

/* Grand écran : le cadre prend la hauteur du contenu du projet (posée par le script) ; le texte garde la même taille partout */
@media (min-width: 1200px) {
	/* La fiche est toujours centrée dans l'écran : la bande de vignettes est posée sous elle, hors du calcul de centrage */
	.DetailProjet { height: fit-content; max-height: none; }
	.Detail-Scene { flex: 0 1 auto; }
	.Detail-Corps { flex: 1 1 auto; max-height: calc(100dvh - 2 * var(--detail-reserve, 10.4rem)); align-items: center; }
	.Detail-Bande { position: absolute; top: calc(100% + var(--espace-3)); left: 0; right: 0; }
	.Detail-Corps > .SectionBestWorks { min-height: 0; align-self: center; overflow-y: auto; scrollbar-width: none; }
}

/* Bande de vignettes : se parcourt à la main (glisser à la souris) ; les icônes de boutique de la fiche sont centrées sur la ligne */
.Detail-Piste { cursor: var(--curseur-glisse); }
.Detail-Piste.Detail-PisteTiree { cursor: var(--curseur-glisse); user-select: none; }
.Detail-Liens { align-items: center; }

/* Bouton de retour au projet ouvert (visible quand sa vignette n'est plus au centre) ; le contenu de la fiche n'est pas
   sélectionnable : le glisser-déposer ne le sélectionne plus au passage */
.Detail-Recentrer { padding: 0; opacity: 0; visibility: hidden; transition: opacity var(--duree-courte) var(--courbe), visibility 0s var(--duree-courte); }
.Detail-Recentrer.Detail-Recentrer--visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.Detail-Corps { user-select: none; -webkit-user-select: none; }
.Detail-Corps img { -webkit-user-drag: none; }

/* Fiche détaillée, grand écran : le lecteur ne bouge jamais verticalement d'un projet à l'autre (il reste au centre du cadre ;
   miniatures et légende sont accrochées dessous et ne comptent pas dans le centrage) ; seul le texte explicatif est centré
   dans sa colonne. */
@media (min-width: 1200px) {
	.Detail-Corps .SectionBestWorks-Informations-Left {
		align-self: stretch;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: minmax(6.2rem, 1fr) auto minmax(6.2rem, 1fr);	/* 6.2rem : la place des miniatures sous le lecteur */
	}
	.Detail-Corps .SectionBestWorks-Informations-Left > .video-container { grid-row: 2; }
	.Detail-Corps .SectionBestWorks-Informations-Left > .video-thumbnails { grid-row: 3; align-self: start; }
	/* Une légende en dessous, un espace égal au-dessus : le lecteur est au milieu du bloc (image seule : même réserve) */
	.Detail-Corps .video-container { padding-block: calc(1.5em) 0; }
	/* Image ou vidéo : même taille, même position pour tous les projets. La légende (ou, sans vidéo, la réserve qui la remplace) a la même hauteur,
	   et les diapositives se touchent (plus de marge de 4 px qui rétrécissait la vidéo) */
	.Detail-Corps { --legende: 2.4rem; }
	.Detail-Corps .video-container { container-type: inline-size; }
	.Detail-Corps .video-slide.slick-slide { margin: 0; width: 100cqw !important; }
	.Detail-Corps :is(.prev-arrow, .next-arrow) { --bord: 0px; }
	.Detail-Corps .slideCaption { box-sizing: border-box; height: var(--legende); min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.Detail-Corps .video-container:not(:has(.slideCaption))::after { content: ""; display: block; height: var(--legende); }
	.Detail-Corps .SectionBestWorks-Informations-Right { justify-content: center; }
}
@media (min-width: 1200px) {
	.Detail-Corps .video-thumbnails { padding-top: var(--espace-1); }
	.Detail-Corps .video-thumbnails .slick-slide img { width: 9.6rem; }
}

/* Numéro du projet : on peut le taper (puis Entrée) pour s'y rendre */
.Detail-Numero {
	padding: 0;
	margin: 0;

	background: transparent;
	border: 0;
	border-bottom: var(--bordure-fine) solid transparent;
	border-radius: 0;
	font: inherit;
	letter-spacing: inherit;
	color: var(--couleur-titre);
	text-align: right;
	transition: border-color var(--duree-courte) var(--courbe);
}
.Detail-Numero:hover, .Detail-Numero:focus { border-bottom-color: var(--accent-1); outline: none; }

/* Curseurs aux couleurs du site : une flèche fine au contour bleu qui vire au violet, et un petit anneau du même dégradé sur
   tout ce qui se clique (liens, boutons, cartes), avec un léger halo clair pour bien se voir sur fond sombre. Petites images
   vectorielles intégrées ici : rien à charger, rien à animer. Pendant un appui (bouton gauche ou droit), une variante pleine
   les remplace. */
:root {
	--curseur-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 25 25'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3 L4 18.6 L8.1 15 L11 21.2 L13.7 20 L10.8 13.9 L16.4 13.7 Z' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='4.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M4 3 L4 18.6 L8.1 15 L11 21.2 L13.7 20 L10.8 13.9 L16.4 13.7 Z' fill='%230b0e16' stroke='url(%23g)' stroke-opacity='1' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto;
	--curseur-glisse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-2.5 -2.5 29 29'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='5.6' stroke-linejoin='round'%3E%3Crect x='6.2' y='3.2' width='3.2' height='12' rx='1.6' /%3E%3Crect x='9.7' y='1.6' width='3.2' height='13.5' rx='1.6' /%3E%3Crect x='13.2' y='2.6' width='3.2' height='12.5' rx='1.6' /%3E%3Crect x='16.7' y='5.4' width='3' height='9.5' rx='1.5' /%3E%3Crect x='6.2' y='9' width='13.5' height='11.2' rx='5.5' /%3E%3Crect x='2.6' y='11.4' width='4' height='8' rx='2' transform='rotate(-28 4.6 15.4)'/%3E%3C/g%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='3.8' stroke-linejoin='round'%3E%3Crect x='6.2' y='3.2' width='3.2' height='12' rx='1.6' /%3E%3Crect x='9.7' y='1.6' width='3.2' height='13.5' rx='1.6' /%3E%3Crect x='13.2' y='2.6' width='3.2' height='12.5' rx='1.6' /%3E%3Crect x='16.7' y='5.4' width='3' height='9.5' rx='1.5' /%3E%3Crect x='6.2' y='9' width='13.5' height='11.2' rx='5.5' /%3E%3Crect x='2.6' y='11.4' width='4' height='8' rx='2' transform='rotate(-28 4.6 15.4)'/%3E%3C/g%3E%3Cg fill='%23161d2e'%3E%3Crect x='6.2' y='3.2' width='3.2' height='12' rx='1.6' /%3E%3Crect x='9.7' y='1.6' width='3.2' height='13.5' rx='1.6' /%3E%3Crect x='13.2' y='2.6' width='3.2' height='12.5' rx='1.6' /%3E%3Crect x='16.7' y='5.4' width='3' height='9.5' rx='1.5' /%3E%3Crect x='6.2' y='9' width='13.5' height='11.2' rx='5.5' /%3E%3Crect x='2.6' y='11.4' width='4' height='8' rx='2' transform='rotate(-28 4.6 15.4)'/%3E%3C/g%3E%3C/svg%3E") 12 10, grab;
	--curseur-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='10.5' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='4.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='10.5' fill='%230b0e16' fill-opacity='0.55' stroke='url(%23g)' stroke-width='2.2'/%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E") 17 17, pointer;
}
html { cursor: var(--curseur-base); }
a[href], button, summary, label, select, [role="button"], [tabindex="0"]:not(input, textarea) { cursor: var(--curseur-lien); }
:active, html.Appui {
	--curseur-base: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 25 25'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 3 L4 18.6 L8.1 15 L11 21.2 L13.7 20 L10.8 13.9 L16.4 13.7 Z' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='4.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M4 3 L4 18.6 L8.1 15 L11 21.2 L13.7 20 L10.8 13.9 L16.4 13.7 Z' fill='url(%23g)' stroke='url(%23g)' stroke-opacity='1' stroke-width='2.1' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto;
	--curseur-glisse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-2.5 -2.5 29 29'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='5.6' stroke-linejoin='round'%3E%3Crect x='4.2' y='9.2' width='15.6' height='11' rx='5.2' /%3E%3Ccircle cx='7.4' cy='9.6' r='2.5'/%3E%3Ccircle cx='10.7' cy='8.8' r='2.5'/%3E%3Ccircle cx='14' cy='8.8' r='2.5'/%3E%3Ccircle cx='17.2' cy='9.6' r='2.5'/%3E%3Crect x='3' y='12.6' width='9.4' height='3.6' rx='1.8' /%3E%3C/g%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='3.8' stroke-linejoin='round'%3E%3Crect x='4.2' y='9.2' width='15.6' height='11' rx='5.2' /%3E%3Ccircle cx='7.4' cy='9.6' r='2.5'/%3E%3Ccircle cx='10.7' cy='8.8' r='2.5'/%3E%3Ccircle cx='14' cy='8.8' r='2.5'/%3E%3Ccircle cx='17.2' cy='9.6' r='2.5'/%3E%3Crect x='3' y='12.6' width='9.4' height='3.6' rx='1.8' /%3E%3C/g%3E%3Cg fill='%23161d2e'%3E%3Crect x='4.2' y='9.2' width='15.6' height='11' rx='5.2' /%3E%3Ccircle cx='7.4' cy='9.6' r='2.5'/%3E%3Ccircle cx='10.7' cy='8.8' r='2.5'/%3E%3Ccircle cx='14' cy='8.8' r='2.5'/%3E%3Ccircle cx='17.2' cy='9.6' r='2.5'/%3E%3Crect x='3' y='12.6' width='9.4' height='3.6' rx='1.8' /%3E%3C/g%3E%3C/svg%3E") 12 12, grabbing;
	--curseur-lien: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='8.2' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='4.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='8.2' fill='url(%23g)' fill-opacity='0.8' stroke='url(%23g)' stroke-width='2.2'/%3E%3Ccircle cx='16' cy='16' r='2.2' fill='%23ffffff'/%3E%3C/svg%3E") 17 17, pointer;
}

/* Barre de filtres de la fiche : au-dessus du cadre sur grand écran (symétrique de la bande de vignettes), en tête sur mobile */
.Detail-Filtres { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--espace-1); padding: 0.4rem 0; }
.Detail-FiltresLigne { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem var(--espace-2); }
/* Sous-filtres : plus petits, sur leur propre ligne, sous les groupes */
.Detail-FiltresLigne--sous .Detail-Filtre { padding: 0.3rem 1.1rem; font-size: var(--taille-texte-micro); background-color: transparent; }
.Detail-Filtre {
	flex: 0 0 auto;
	font-family: inherit;
	padding: 0.6rem 1.4rem;

	background-color: var(--couleur-bandeau);
	border: var(--bordure-fine) solid var(--couleur-bordure);
	border-radius: var(--rayon-pilule);
	font-size: var(--taille-texte-meta);
	color: var(--couleur-texte);
	cursor: var(--curseur-lien);
	transition: border-color var(--duree-courte) var(--courbe), color var(--duree-courte) var(--courbe), background-color var(--duree-courte) var(--courbe);
}
.Detail-Filtre:hover, .Detail-Filtre:focus-visible { border-color: var(--accent-1); color: var(--accent-1-clair); }
.Detail-Filtre--actif { border-color: var(--accent-1); color: var(--couleur-titre); background-color: color-mix(in srgb, var(--accent-1) 22%, var(--couleur-bandeau)); }
@media (min-width: 1200px) {
	.Detail-Filtres { position: absolute; bottom: calc(100% + var(--espace-2)); left: 0; right: 0; }
}
@media (max-width: 1199px) {
	.Detail-Filtres { align-items: stretch; padding-right: 5.6rem; }	/* La croix de fermeture reste libre */
	.Detail-FiltresLigne { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.Detail-FiltresLigne::-webkit-scrollbar { display: none; }
}

/* Carrousels : le curseur du site aussi entre les vignettes et pendant le glissement */
.slick-list, .slick-list.dragging { cursor: var(--curseur-glisse); }

/* Clic molette (défilement automatique) : le curseur lui-même change, violet, avec deux flèches au repos puis seulement celle du haut ou du bas.
   Les classes sont posées par initCurseurAppui ; !important car chaque élément cliquable a déjà son propre curseur. */
:root {
	--curseur-molette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='4.2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='12' fill='%230b0e16' fill-opacity='0.55' stroke='url(%23g)' stroke-width='1.9'/%3E%3Cpath d='M12 12.2 L16 8.2 L20 12.2 M12 19.8 L16 23.8 L20 19.8' fill='none' stroke='url(%23g)' stroke-opacity='1' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='url(%23g)'/%3E%3C/svg%3E") 17 17, move;
	--curseur-molette-haut: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10.8 18.6 L16 13 L21.2 18.6' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M10.8 18.6 L16 13 L21.2 18.6' fill='none' stroke='url(%23g)' stroke-opacity='1' stroke-width='2.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, move;
	--curseur-molette-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%2377bdff'/%3E%3Cstop offset='1' stop-color='%23c28aff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10.8 13.4 L16 19 L21.2 13.4' fill='none' stroke='%230b0e16' stroke-opacity='0.95' stroke-width='5' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M10.8 13.4 L16 19 L21.2 13.4' fill='none' stroke='url(%23g)' stroke-opacity='1' stroke-width='2.3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, move;
}
html.Appui-Molette, html.Appui-Molette * { cursor: var(--curseur-molette) !important; }
html.Appui-Molette--haut, html.Appui-Molette--haut * { cursor: var(--curseur-molette-haut) !important; }
html.Appui-Molette--bas, html.Appui-Molette--bas * { cursor: var(--curseur-molette-bas) !important; }
/* Sur une barre de défilement : le curseur normal du site */
html.Sur-Barre:not(.Appui-Molette), html.Sur-Barre:not(.Appui-Molette) * { cursor: var(--curseur-base) !important; }
.Onde {
	position: fixed;
	z-index: 100000;
	pointer-events: none;
}
/* Onde d'un clic : la couleur dépend du bouton (gauche bleu, molette violet, droit rose) ; remplie sur ce qui se clique */
.Onde {
	--c: var(--accent-1);
	width: 2.2rem;
	height: 2.2rem;
	margin: -1.1rem 0 0 -1.1rem;

	border: 1.5px solid var(--c);
	border-radius: 50%;
	animation: onde-clic 0.5s var(--courbe) both;
}
.Onde--molette { --c: var(--accent-2); }
/* Clic molette : un anneau en dégradé des deux couleurs (bleu et violet), de la même taille que les autres ondes ; celles d'un glissement sont plus petites */
.Onde--molette {
	background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
	border: 0;
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
}
.Onde--trace { width: 1.4rem; height: 1.4rem; margin: -0.7rem 0 0 -0.7rem; animation-name: onde-trace; }
@keyframes onde-trace { from { opacity: 0.8; transform: scale(0.4); } to { opacity: 0; transform: scale(2.2); } }
.Onde--droit { --c: var(--accent-3); }
.Onde--lien:not(.Onde--molette) { background-color: color-mix(in srgb, var(--c) 22%, transparent); }
@keyframes onde-clic { from { opacity: 0.85; transform: scale(0.4); } to { opacity: 0; transform: scale(2.8); } }
@media (prefers-reduced-motion: reduce) { .Onde { display: none; } }

/* Navigation : le curseur des liens est posé explicitement sur la barre, le logo et ses liens (quels que soient les styles de la barre) */
.Navigation a, .Navigation a *, .NavLogo-Lien, .NavLogo-Lien *, .Hamburger, .Hamburger * { cursor: var(--curseur-lien); }

/* Filtres de la fiche, plus lisibles : un panneau sombre derrière (le titre et la barre de la page ne transparaissent plus), des pastilles
   au contour clair et au texte blanc, la pastille active pleine de bleu */
.Detail-Filtres {
	padding: 0.8rem 1.4rem;
	background-color: rgba(8, 10, 16, 0.92);
	border: var(--bordure-fine) solid rgba(255, 255, 255, 0.14);
	border-radius: 2.2rem;
}
.Detail-Filtre {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.34);
	color: #ffffff;
	font-weight: 600;
}
.Detail-Filtre:hover, .Detail-Filtre:focus-visible { background-color: rgba(255, 255, 255, 0.14); border-color: var(--accent-1-clair); color: #ffffff; }
.Detail-Filtre--actif, .Detail-Filtre--actif:hover { background-color: var(--accent-1); border-color: var(--accent-1-clair); color: #06101c; }
.Detail-FiltresLigne--sous .Detail-Filtre { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.26); color: #e6ecf5; font-weight: 500; }
.Detail-FiltresLigne--sous .Detail-Filtre--actif, .Detail-FiltresLigne--sous .Detail-Filtre--actif:hover { background-color: var(--accent-2); border-color: #d2a8ff; color: #ffffff; }


/* Filtres de la fiche, sobres : pastilles neutres au fin contour bleu (groupes) ou gris clair (sous-filtres), la couleur est réservée à ce qui
   est actif ; les deux lignes sont bien séparées. */
.Detail-Filtres {
	gap: 0.9rem;
	padding: 0.7rem 1.6rem;
	background: rgba(8, 10, 16, 0.94);
	border-color: rgba(77, 165, 245, 0.3);
	box-shadow: none;
}
.Detail-Filtre {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(77, 165, 245, 0.45);
	color: #f2f6fb;
}
.Detail-Filtre:hover, .Detail-Filtre:focus-visible { background-color: rgba(77, 165, 245, 0.2); border-color: var(--accent-1-clair); color: #ffffff; }
.Detail-Filtre--actif, .Detail-Filtre--actif:hover {
	background: linear-gradient(135deg, rgba(77, 165, 245, 0.5), rgba(130, 120, 245, 0.5)), #0d1422;
	border-color: var(--accent-1-clair);	/* Contour net : la pastille choisie se détache de ses voisines sans éblouir */
	color: #ffffff;
	box-shadow: 0 0 0 2px rgba(142, 200, 255, 0.18);
}
.Detail-FiltresLigne--sous .Detail-Filtre { background-color: transparent; border-color: rgba(255, 255, 255, 0.24); color: #dfe6f0; }
.Detail-FiltresLigne--sous .Detail-Filtre:hover, .Detail-FiltresLigne--sous .Detail-Filtre:focus-visible { background-color: rgba(168, 85, 247, 0.18); border-color: #c9a0f7; color: #ffffff; }
.Detail-FiltresLigne--sous .Detail-Filtre--actif, .Detail-FiltresLigne--sous .Detail-Filtre--actif:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.5), rgba(168, 85, 247, 0.4)), #120d1e; border-color: #c9a0f7; color: #ffffff; box-shadow: 0 0 0 2px rgba(201, 160, 247, 0.18); }

/* Fiche détaillée : lignes de la fiche technique (Date, Tasks, Clients) et icône de boutique moins collées ; l'écart suit la hauteur de l'écran */
.Detail-Corps .SectionBestWorks .Projet-Fiche { gap: clamp(1.3rem, 2dvh, 2.8rem); padding-top: clamp(1.3rem, 1.8dvh, 2.6rem); }
.Detail-Corps .Projet-Fiche dd { gap: 0.8rem 1rem; }
.Detail-Corps .Detail-Liens, .Detail-Corps .BestWorks-Icon { margin-block: clamp(1rem, 1.8dvh, 2.4rem); }

/* Panneau de taille constante : toute la largeur de la fiche, deuxième ligne toujours réservée (aide discrète quand aucun groupe n'est choisi) */
.Detail-FiltresLigne--sous { min-height: 2.9rem; align-items: center; }
.Detail-FiltresAide { font-size: var(--taille-texte-micro); letter-spacing: 0.06em; color: rgba(223, 230, 240, 0.5); }

/* Changement de filtre : la pastille choisie fait un petit rebond, les sous-filtres arrivent l'un après l'autre, les vignettes de la bande
   remontent doucement (coupé si le système demande de réduire les animations) */
@keyframes filtre-rebond { 0% { transform: scale(0.88); } 55% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes filtre-arrivee { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
@keyframes vignette-arrivee { from { transform: translateY(1.8rem) scale(0.78); } to { transform: none; } }
.Detail-Filtre--actif { animation: filtre-rebond 0.34s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.Detail-FiltresLigne--sous .Detail-Filtre { animation: filtre-arrivee 0.28s var(--courbe) both; }
.Detail-FiltresLigne--sous .Detail-Filtre--actif { animation: filtre-arrivee 0.28s var(--courbe) both, filtre-rebond 0.34s cubic-bezier(0.2, 1.3, 0.4, 1) 0.1s both; }
.Detail-FiltresAide { animation: filtre-arrivee 0.3s var(--courbe) both; }
.Detail-Vignette--neuve { animation: vignette-arrivee 0.4s var(--courbe) 0.15s both; }
.Detail-Vignette--fantome { position: absolute; pointer-events: none; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(1) { animation-delay: 28ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(2) { animation-delay: 56ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(3) { animation-delay: 84ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(4) { animation-delay: 112ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(5) { animation-delay: 140ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(6) { animation-delay: 168ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(7) { animation-delay: 196ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(8) { animation-delay: 224ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(9) { animation-delay: 252ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(10) { animation-delay: 280ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(11) { animation-delay: 308ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(12) { animation-delay: 336ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(13) { animation-delay: 364ms; }
.Detail-FiltresLigne--sous .Detail-Filtre:nth-child(14) { animation-delay: 392ms; }
@media (prefers-reduced-motion: reduce) {
	.Detail-Filtre--actif, .Detail-FiltresLigne--sous .Detail-Filtre, .Detail-FiltresLigne--sous .Detail-Filtre--actif, .Detail-FiltresAide, .Detail-Vignette--neuve { animation: none; }
}

/* Étiquettes du projet dans la fiche : plus lisibles (même bleu que les filtres) */
.Detail-Corps .Projet-Tag {
	background-color: rgba(77, 165, 245, 0.14);
	border-color: rgba(77, 165, 245, 0.5);
	color: #e6f2ff;
}
.Detail-Corps .Projet-Tag:hover, .Detail-Corps .Projet-Tag:focus-visible { background-color: rgba(77, 165, 245, 0.3); border-color: var(--accent-1-clair); color: #ffffff; }

.Detail-Total { display: inline-block; text-align: left; font-variant-numeric: tabular-nums; }
.Detail-Numero { font-variant-numeric: tabular-nums; }

/* Compteur : taille fixe et contenu bien centré (numéro aligné à droite, total à gauche : le « / » ne bouge jamais) */
.Detail-Compteur {
	flex: 0 0 9.6rem;
	width: 9.6rem;
	height: 3.4rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6ch;
	padding: 0;
	white-space: nowrap;
}
.Detail-Numero { text-align: right; flex: 0 0 auto; }
.Detail-Total { text-align: left; flex: 0 0 auto; }

/* Fiche trop haute pour l'écran : espaces resserrés (une barre de défilement dans la fiche n'est pas souhaitable) */
.Detail-Corps .SectionBestWorks.Detail-Serre .Projet-Fiche { gap: 1.1rem; padding-top: 1.1rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre .Detail-Liens,.Detail-Corps .SectionBestWorks.Detail-Serre .BestWorks-Icon { margin-block: 0.8rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre .Projet-Description { line-height: 1.55; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Fiche { gap: 0.6rem; padding-top: 0.4rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Detail-Liens,.Detail-Corps .SectionBestWorks.Detail-Serre--fort .BestWorks-Icon { margin-block: 0.4rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Description { line-height: 1.45; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Fiche dd { gap: 0.5rem 0.8rem; }
/* Écran bas : la fiche se resserre encore pour laisser au moins 4 lignes au synopsis (tailles des images et des vidéos inchangées) */
.Detail-Corps .SectionBestWorks.Detail-Serre--fort { padding-block: 0.4rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Entete { gap: 0.6rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Entete :is(h2, h3) { padding-bottom: 0.2rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .Projet-Fiche dd span { padding-block: 0.2rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .video-thumbnails { padding-top: 0.2rem; }
.Detail-Corps .SectionBestWorks.Detail-Serre--fort .BestWorks-Icon { margin-block: 0 0.8rem; }
.Detail-Vignette { width: clamp(9rem, 8.4vw, 12.6rem); }
@media (min-width: 1200px) {
	.Detail-Corps .Detail-Serre .SectionBestWorks-Informations-Left, .Detail-Corps .Detail-Serre.SectionBestWorks .SectionBestWorks-Informations-Left { grid-template-rows: minmax(4.8rem, 1fr) auto minmax(4.8rem, 1fr); }
	.Detail-Corps .Detail-Serre--fort.SectionBestWorks .SectionBestWorks-Informations-Left { grid-template-rows: minmax(4rem, 1fr) auto minmax(4rem, 1fr); }
}

/* Bande du bas : trois colonnes. Le compteur et la flèche de gauche occupent la colonne de gauche, la flèche de droite et le retour au projet
   la colonne de droite ; les deux colonnes ont la même largeur, donc la bande de vignettes est toujours exactement au centre. Peu de vignettes :
   elles se centrent. */
.Detail-Bande { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 16rem; gap: var(--espace-3); align-items: center; }
.Detail-BandeCote { display: flex; align-items: center; gap: var(--espace-2); }
.Detail-BandeCote--gauche { justify-content: flex-end; }
.Detail-BandeCote--droite { justify-content: flex-start; }
/* Peu de vignettes : elles se centrent (les vignettes qui partent, ajoutées en fin de bande, ne décalent plus rien) */
.Detail-Piste { justify-content: safe center; }
@media (max-width: 1199px) {
	/* Bande en deux lignes : les vignettes prennent toute la largeur, le compteur et les flèches passent dessous */
	.Detail-Bande { position: relative; grid-template-columns: 1fr 1fr; grid-template-areas: "piste piste" "gauche droite"; row-gap: var(--espace-1); column-gap: 0; --compteur: 8.6rem; }
	.Detail-Piste { grid-area: piste; }
	.Detail-BandeCote--gauche { grid-area: gauche; flex-direction: row-reverse; justify-content: flex-start; gap: var(--espace-2); margin-right: calc(var(--compteur) / -2); }
	.Detail-BandeCote--droite { grid-area: droite; gap: var(--espace-2); margin-left: calc(var(--compteur) / 2 + var(--espace-2)); }
	.Detail-Recentrer { position: absolute; right: 0; bottom: 0; }
	.Detail-Compteur { flex-basis: var(--compteur); width: var(--compteur); height: 3rem; }
	.Detail-Vignette { width: clamp(8.6rem, 22vw, 13rem); }
	.Detail-VignetteDate { display: none; }
}

/* La bordure de la fiche est toujours « allumée » (celle qu'a une carte survolée), sans effet au survol */
.Detail-Corps > .SectionBestWorks, .Detail-Corps > .SectionBestWorks:hover { border-color: var(--accent-1-a50); box-shadow: var(--ombre-2); }

/* Pastilles des coins (compteur, flèches de la bande, retour au projet, croix) : fond beaucoup moins opaque, le fond de la fiche transparaît */
.Detail-Compteur, .Detail-BandeFleche, .Detail-Recentrer, .Detail-Fermer {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
}
.Detail-Fermer { background-color: rgba(8, 10, 16, 0.65); border-color: rgba(255, 255, 255, 0.45); color: #ffffff; }
.Detail-BandeFleche:hover:not(:disabled), .Detail-BandeFleche:focus-visible, .Detail-Recentrer:hover, .Detail-Recentrer:focus-visible, .Detail-Fermer:hover, .Detail-Fermer:focus-visible { background-color: rgba(77, 165, 245, 0.14); border-color: var(--accent-1); }

/* Ouverture de la fiche : une fois le cadre en place, tout s'allume dans l'ordre. Les pastilles (filtres, coins, étiquettes, valeurs de la fiche
   technique) apparaissent avec un anneau en dégradé bleu et violet qui fait un tour et s'efface ; la bordure de la fiche s'allume ; le contour
   du lecteur se trace (le tracé habituel des vidéos) ; l'éclat des coins du lecteur monte. */
.DetailProjet:not(.Detail-Allume) :is(.Detail-Filtres, .Detail-Fleche, .Detail-Fermer, .Detail-BandeCote, .Detail-Piste),
.DetailProjet:not(.Detail-Allume) .Detail-Premiere :is(.Projet-Tag, .Projet-Fiche dd span, .Detail-Lien, .BestWorks-Icon, .prev-arrow, .next-arrow, .video-thumbnails, .slideCaption) { opacity: 0; }
.DetailProjet:not(.Detail-Allume) .Detail-Premiere { border-color: transparent !important; box-shadow: none !important; transition: none !important; }
.Detail-Corps > .SectionBestWorks { transition: border-color 0.8s ease, box-shadow 0.8s ease; }

.DetailProjet.Detail-Allume :is(.Detail-Filtres, .Detail-Fleche, .Detail-Fermer, .Detail-BandeCote),
.DetailProjet.Detail-Allume .Detail-Premiere :is(.Projet-Tag, .Projet-Fiche dd span, .Detail-Lien, .BestWorks-Icon) {
	animation: pastille-allumee 0.6s var(--courbe) var(--retard, 0s) both;
}
.DetailProjet.Detail-Allume .Detail-Piste { animation: pastille-allumee-douce 0.5s var(--courbe) 0.22s both; }
.DetailProjet.Detail-Allume .Detail-Premiere :is(.prev-arrow, .next-arrow, .video-thumbnails, .slideCaption) { animation: pastille-allumee-douce 0.5s var(--courbe) 0.4s both; }
.Detail-Filtres { --retard: 0.0s; }
.Detail-Gauche { --retard: 0.1s; }
.Detail-Droite { --retard: 0.14s; }
.Detail-Fermer { --retard: 0.19s; }
.Detail-BandeCote--gauche { --retard: 0.22s; }
.Detail-BandeCote--droite { --retard: 0.29s; }
.Detail-Premiere .Projet-Tag:nth-child(1) { --retard: 0.16s; }
.Detail-Premiere .Projet-Tag:nth-child(2) { --retard: 0.25s; }
.Detail-Premiere .Projet-Tag:nth-child(3) { --retard: 0.32s; }
.Detail-Premiere .Projet-Fiche-Ligne:nth-child(1) dd span { --retard: 0.36s; }
.Detail-Premiere .Projet-Fiche-Ligne:nth-child(2) dd span { --retard: 0.43s; }
.Detail-Premiere .Projet-Fiche-Ligne:nth-child(3) dd span { --retard: 0.52s; }
.Detail-Premiere .Detail-Lien, .Detail-Premiere .BestWorks-Icon { --retard: 0.59s; }
.Detail-Filtre { --retard: 0.09s; }

/* L'anneau : un dégradé bleu vers violet, découpé en fine bordure, qui tourne une fois et s'efface */
.Detail-Allume :is(.Detail-BandeFleche, .Detail-Recentrer, .Detail-Compteur, .Detail-Filtre, .Detail-Premiere .Projet-Tag, .Detail-Premiere .Projet-Fiche dd span) { position: relative; }
.Detail-Allume :is(.Detail-Fleche, .Detail-Fermer, .Detail-BandeFleche, .Detail-Recentrer, .Detail-Compteur, .Detail-Filtre, .Detail-Premiere .Projet-Tag, .Detail-Premiere .Projet-Fiche dd span)::after {
	content: "";
	position: absolute;
	inset: -2px;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from var(--angle-cadre), var(--accent-1), var(--accent-2), var(--accent-1));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	pointer-events: none;
	opacity: 0;
	animation: anneau-allume 1s ease-out var(--retard, 0s) both;
}
@keyframes anneau-allume { 0% { opacity: 0; --angle-cadre: 0deg; } 25% { opacity: 1; } 100% { opacity: 0; --angle-cadre: 360deg; } }
/* Fondu seul, sans zoom : un zoom (transformation) fait recaler le texte d'un cran à la fin de l'animation ; l'anneau en dégradé suffit à l'effet */
@keyframes pastille-allumee {
	0% { opacity: 0; }
	55% { opacity: 1; }
	100% { opacity: 1; }
}
@keyframes pastille-allumee-douce { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.DetailProjet :is(.Detail-Filtres, .Detail-Fleche, .Detail-Fermer, .Detail-BandeCote, .Detail-Piste, .Projet-Tag, .Projet-Fiche dd span, .Detail-Lien, .BestWorks-Icon) { opacity: 1 !important; animation: none !important; }
	.DetailProjet :is(.Detail-Fleche, .Detail-Fermer, .Detail-BandeFleche, .Detail-Recentrer, .Detail-Compteur, .Detail-Filtre, .Projet-Tag, .Projet-Fiche dd span)::after { display: none; }
}

/* Lueurs d'angle de la fiche (bleue en haut à droite, violette en bas à gauche) : éteintes à l'ouverture, elles s'allument une fois le cadre en place */
@property --allumage { syntax: "<number>"; inherits: true; initial-value: 1; }
.Detail-Corps > .SectionBestWorks {
	background:
		radial-gradient(ellipse 50% 60% at 100% 0%, color-mix(in srgb, var(--coin-haut) calc(var(--allumage) * 100%), transparent), transparent 70%),
		radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in srgb, var(--coin-bas) calc(var(--allumage) * 100%), transparent), transparent 70%),
		var(--couleur-surface-1);
	transition: border-color 0.65s ease, box-shadow 0.65s ease, --allumage 1.3s ease;
}
.DetailProjet:not(.Detail-Allume) .Detail-Premiere { --allumage: 0; }
@media (prefers-reduced-motion: reduce) { .Detail-Corps > .SectionBestWorks, .DetailProjet::backdrop { transition: none; } }

/* Fermeture en douceur : d'abord tout s'éteint (pastilles, contour du lecteur, lueurs d'angle), puis le cadre et le fond s'effacent doucement */
.DetailProjet.Detail-Sortie :is(.Detail-Filtres, .Detail-Fleche, .Detail-Fermer, .Detail-BandeCote, .Detail-Piste, .Projet-Tag, .Projet-Fiche dd span, .Detail-Lien, .BestWorks-Icon, .prev-arrow, .next-arrow, .video-thumbnails, .slideCaption) {
	animation: pastille-eteinte 0.45s ease-in-out both;
}
@keyframes pastille-eteinte { from { opacity: 1; } to { opacity: 0; } }
.DetailProjet.Detail-Sortie .Detail-Corps > .SectionBestWorks { --allumage: 0; transition: border-color 0.52s ease, box-shadow 0.52s ease, --allumage 0.6s ease; border-color: transparent; }
.DetailProjet.Detail-Sortie::backdrop { --allumage: 0; transition: --allumage 0.68s ease; }

/* Synopsis qui défile : la barre est toujours visible (sur tactile, celle du système n'apparaît qu'au toucher) et un fondu en bas
   montre qu'il y a une suite */
.Detail-Corps .Projet-Description--defile {
	--fondu: 2.6rem;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fondu)), transparent);
}
@media (pointer: coarse) {
	.Detail-Corps .Projet-Description--defile { scrollbar-width: auto; scrollbar-color: auto; }
	.Detail-Corps .Projet-Description--defile::-webkit-scrollbar { width: 0.5rem; }
	.Detail-Corps .Projet-Description--defile::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 0.3rem; }
	.Detail-Corps .Projet-Description--defile::-webkit-scrollbar-thumb { background: var(--accent-1); border-radius: 0.3rem; }
}

/* Boutons d'ouverture des filtres et de la bande (tablette, téléphone) */
.Detail-Outil {
	display: flex; align-items: center; justify-content: center; padding: 0;
	width: var(--bouton, 3.6rem); height: var(--bouton, 3.6rem);
	background-color: rgba(8, 10, 16, 0.65); border: var(--bordure-fine) solid rgba(255, 255, 255, 0.45); border-radius: 50%; color: #ffffff;
	cursor: var(--curseur-lien);
}
.Detail-Outil svg { width: 1.6rem; height: 1.6rem; }
.Detail-Outil[aria-pressed="true"] { background-color: var(--accent-1); border-color: var(--accent-1); color: #0a0a0c; }

/* Portrait (tablette, téléphone) : une rangée de boutons en haut (filtres à gauche de la croix) ; les filtres, repliés, s'ouvrent par-dessus */
@media (orientation: portrait) and (max-width: 1199px) {
	.DetailProjet { --bouton: 4rem; padding-top: calc(var(--bouton) + var(--espace-4)); }
	.Detail-Scene { position: static; }
	.Detail-Fermer { top: var(--espace-2); right: var(--espace-3); width: var(--bouton); height: var(--bouton); }
	.Detail-Outils { display: flex; position: absolute; top: var(--espace-2); right: calc(var(--espace-3) + var(--bouton) + var(--espace-2)); z-index: 10; }
	.Detail-Outil[data-outil="bande"] { display: none; }
	.DetailProjet:not(.Detail-filtres-ouvert) .Detail-Filtres { display: none; }
	.Detail-Filtres {
		position: absolute; top: calc(var(--bouton) + var(--espace-3)); left: var(--espace-2); right: var(--espace-2); z-index: 20;
		padding: var(--espace-2); background-color: rgba(10, 12, 18, 0.95);
		border: var(--bordure-fine) solid var(--couleur-bordure); border-radius: var(--rayon-2); box-shadow: var(--ombre-3);
	}
	.Detail-FiltresAide { display: none; }
	.Detail-Corps > .SectionBestWorks { padding-top: var(--espace-3); }
}

/* Paysage (téléphone, tablette) : le projet occupe tout l'écran, média à gauche et texte à droite. Les boutons (filtres, bande
   de projets, croix) sont dans la carte, sur son bord droit, en colonne ; les filtres et la bande s'ouvrent par-dessus le projet. */
.Detail-Outils { display: none; }
@media (orientation: landscape) and (max-width: 1199px) {
	.DetailProjet { --bouton: 3.6rem; --haut-boutons: calc(var(--espace-2) + var(--espace-2)); gap: 0; }
	.Detail-Scene { position: static; }
	.Detail-Fermer { top: var(--haut-boutons); right: calc(var(--espace-2) + var(--espace-3)); width: var(--bouton); height: var(--bouton); font-size: 1.5rem; }
	.Detail-Outils { display: flex; flex-direction: column; gap: var(--espace-2); position: absolute; top: calc(var(--haut-boutons) + var(--bouton) + var(--espace-2)); right: calc(var(--espace-2) + var(--espace-3)); z-index: 10; }

	.DetailProjet:not(.Detail-filtres-ouvert) .Detail-Filtres,
	.DetailProjet:not(.Detail-bande-ouvert) .Detail-Bande { display: none; }
	.Detail-Filtres, .Detail-Bande {
		position: absolute; left: calc(var(--espace-2) + var(--espace-3)); right: calc(var(--espace-2) + var(--espace-3)); z-index: 20;
		padding: var(--espace-2); background-color: rgba(10, 12, 18, 0.95);
		border: var(--bordure-fine) solid var(--couleur-bordure); border-radius: var(--rayon-2); box-shadow: var(--ombre-3);
	}
	.Detail-Filtres { top: calc(var(--espace-2) + var(--espace-3)); padding-right: var(--espace-2); right: calc(var(--espace-2) + 2 * var(--espace-3) + var(--bouton)); }
	.Detail-Bande { bottom: calc(var(--espace-2) + var(--espace-3)); }
	.Detail-FiltresAide { display: none; }

	.Detail-Corps { margin-inline: 0; }
	/* La colonne des boutons occupe le bord droit de la carte : le contenu s'arrête avant */
	.Detail-Corps > .SectionBestWorks {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: safe center; align-items: center; column-gap: var(--espace-4);
		padding: var(--espace-3) calc(var(--bouton) + 2 * var(--espace-3)) var(--espace-3) var(--espace-4);
	}
	.Detail-Corps .SectionBestWorks-Informations-Left { max-width: none; width: 100%; margin-inline: 0; }
	/* Toute la fiche défile (média et texte ensemble) quand elle dépasse l'écran */
	.Detail-Corps > .SectionBestWorks { height: auto; min-height: 100%; align-content: safe center; }
	.Detail-Corps .SectionBestWorks-Informations-Left { align-self: center; }
	.Detail-Corps .SectionBestWorks-Informations-Right { display: flex; flex-direction: column; gap: var(--espace-2); align-self: center; }
	/* Fiche plus compacte : libellés étroits, pastilles plus petites */
	.Detail-Corps .Projet-Fiche-Ligne { grid-template-columns: 9rem minmax(0, 1fr); }
	.Detail-Corps .Projet-Fiche dd { gap: 0.4rem 0.6rem; }
	.Detail-Corps .Projet-Fiche dd span { padding: 0.2rem 0.9rem; font-size: var(--taille-texte-micro); }
}

/* Téléphone en paysage : fiche plus compacte pour que l'essentiel tienne sans défiler longtemps */
@media (orientation: landscape) and (max-height: 520px) {
	.Detail-Corps .SectionBestWorks-Informations-Right { gap: var(--espace-1); }
	.Detail-Corps .Projet-Description { font-size: var(--taille-texte-meta); line-height: 1.5; }
	.Detail-Corps .Projet-Tag { font-size: var(--taille-texte-micro); padding: 0.2rem 0.9rem; }
	.Detail-Corps .SectionBestWorks-Informations-Title { font-size: var(--taille-texte-premier); }
	.Detail-Corps .Projet-Fiche { gap: 0.6rem; padding-top: 0.6rem; }
	.Detail-Corps .Detail-Liens, .Detail-Corps .BestWorks-Icon { margin-block: 0.4rem; }
}

@media (orientation: landscape) and (max-width: 1199px) { .Detail-Corps .SectionBestWorks-Informations-Right { scrollbar-width: auto; } }
@media (orientation: portrait) and (max-width: 1199px) { .Detail-Outils { display: flex; } }

/* Tablette et téléphone, toutes orientations : la fiche entière défile ; sa barre est dessinée par le script (voir .Detail-Barre) */
@media (max-width: 1199px) {
	.Detail-Corps { overflow-y: auto; scrollbar-width: none; }
	.Detail-Corps::-webkit-scrollbar { display: none; }
	.Detail-Corps.Detail-Glisse { overflow: hidden; }
}
.Detail-Barre { position: absolute; z-index: 12; width: 0.5rem; background: rgba(255, 255, 255, 0.12); border-radius: 0.3rem; pointer-events: none; }
.Detail-Barre[hidden] { display: none; }
.Detail-BarrePouce { display: block; width: 100%; background: var(--accent-1); border-radius: 0.3rem; }

/* Indice de glissement : deux chevrons discrets sur les bords, un instant */
.Detail-Indice { display: none; position: absolute; top: 50%; z-index: 12; width: 4.4rem; height: 8rem; margin-top: -4rem; padding: 0; background: none; border: 0; cursor: var(--curseur-lien); align-items: center; justify-content: center; font-size: 2.2rem; color: #ffffff; opacity: 0; pointer-events: none; text-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.9); }
.Detail-Indice-actif .Detail-Indice { pointer-events: auto; }
.Detail-Indice--gauche { left: 0; }
.Detail-Indice--droite { right: 0; }
@media (pointer: coarse) { .Detail-Indice { display: flex; } }
.Detail-Indice-actif .Detail-Indice--gauche { animation: indice-gauche 3.2s ease-in-out both; }
.Detail-Indice-actif .Detail-Indice--droite { animation: indice-droite 3.2s ease-in-out both; }
@keyframes indice-gauche { 0%, 100% { opacity: 0; translate: 0 0; } 15%, 70% { opacity: 0.7; } 20%, 45%, 70% { translate: 0 0; } 32%, 58% { translate: -0.8rem 0; } }
@keyframes indice-droite { 0%, 100% { opacity: 0; translate: 0 0; } 15%, 70% { opacity: 0.7; } 20%, 45%, 70% { translate: 0 0; } 32%, 58% { translate: 0.8rem 0; } }

/* Tablette et téléphone : la carte a une taille fixe (la hauteur disponible) ; ce qui dépasse défile À L'INTÉRIEUR de la carte, dont la bordure
   reste visible tout autour. La ligne de la grille est bloquée à la hauteur du cadre. */
@media (max-width: 1199px) {
	.Detail-Corps { overflow: hidden; grid-template-rows: minmax(0, 1fr); }
	.Detail-Corps > .SectionBestWorks {
		align-self: stretch; height: auto; min-height: 0; max-height: 100%;
		overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
	}
	.Detail-Corps > .SectionBestWorks::-webkit-scrollbar { display: none; }
}

/* iPad en paysage : les filtres et le carrousel de projets sont affichés directement (au-dessus et en dessous de la carte), sans boutons */
@media (orientation: landscape) and (max-width: 1199px) and (min-height: 700px) {
	.Detail-Outils { display: none; }
	.DetailProjet:not(.Detail-filtres-ouvert) .Detail-Filtres { display: flex; }
	.DetailProjet:not(.Detail-bande-ouvert) .Detail-Bande { display: grid; }
	.DetailProjet { gap: var(--espace-2); padding: var(--espace-2); }
	.Detail-Filtres, .Detail-Bande { position: static; left: auto; right: auto; top: auto; bottom: auto; padding: 0; background: none; border: 0; box-shadow: none; }
	.Detail-Filtres { padding: 0.4rem 5.6rem 0.4rem 0; align-items: center; }
	.Detail-FiltresLigne { flex-wrap: wrap; justify-content: center; overflow: visible; }
	.Detail-FiltresAide { display: block; }
	.Detail-Fermer { top: var(--espace-2); right: var(--espace-3); }
	.Detail-Corps > .SectionBestWorks { padding: var(--espace-3) var(--espace-4); }
}

@media (max-width: 1199px) { .Detail-Corps > .SectionBestWorks { align-content: safe center; } }

/* La carte défile à l'intérieur de son cadre : sans ceci, le navigateur prenait le balayage horizontal au doigt et le passage d'un projet à l'autre ne marchait plus */
@media (max-width: 1199px) { .Detail-Corps > .SectionBestWorks { touch-action: pan-y; } }