/**
 * VideoDL — feuille du non-bloc.
 *
 * Périmètre strict : balisage natif de GeneratePress (en-tête, navigation, conteneurs),
 * composants de l'extension GeneratePerf, logo, décor et keyframes. Les blocs
 * GenerateBlocks portent leurs propres styles par leurs classes globales : aucune règle
 * dont le sujet est un bloc n'a sa place ici.
 */

/* ------------------------------------------------------------------
   Jetons propres au thème
   ------------------------------------------------------------------ */
:root {
	--cut: 10px;              /* l'angle coupé, motif partagé de toute l'interface */
	--lift: 4px;              /* l'ombre portée dure, second motif partagé */
	--bordure-champ: #8A8DA8; /* 3,25:1 sur blanc : seuil RGAA des éléments d'interface */
}

/* ------------------------------------------------------------------
   Logo
   Un seul dessin, servi en SVG inline par GeneratePerf. Les couleurs
   passent par des variables pour que le pied de page inverse la version
   claire sans dupliquer le tracé.
   ------------------------------------------------------------------ */
.is-logo-image {
	color: var(--contrast);
	--logo-mark: var(--accent);
	--logo-play: var(--base-3);
	--logo-dl: var(--accent);
}

.is-logo-image.on-dark {
	color: var(--base-3);
	--logo-mark: var(--vert);
	--logo-play: var(--contrast);
	--logo-dl: var(--vert);
}

/* Copie du pied : même tracé, rappelé par <use>. Elle ne s'anime pas — les
   sélecteurs externes n'atteignent pas l'arbre cloné —, seules les variables
   ci-dessus y descendent. */
.pied-page .is-logo-image.on-dark {
	display: block;
	width: 190px;
	height: auto;
	margin-bottom: 20px;
}

.logo-mark {
	transform-box: fill-box;
	transform-origin: center;
	animation: logo-breathe 3.2s ease-in-out infinite;
	will-change: transform;
}

.logo-play {
	transform-box: fill-box;
	transform-origin: center;
	animation: logo-nudge 3.2s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   Navigation native GeneratePress
   Reprend les deux motifs de l'interface : angle coupé au survol,
   panneau déroulant en aplat encre.
   ------------------------------------------------------------------ */
.main-navigation .main-nav ul li a {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
	transition: background-color 0.16s ease, color 0.16s ease;
}

.main-navigation .main-nav ul li:is(:hover, :focus-within) > a,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
	background-color: var(--contrast);
	color: var(--base-3);
}

/* Panneau déroulant : aplat encre, angle coupé large, liens en capitales. */
.main-navigation ul ul {
	background-color: var(--contrast);
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
	padding: 10px;
	box-shadow: 0 24px 50px -22px rgba(18, 18, 46, 0.55);
}

.main-navigation ul ul li a {
	font-size: 14px;
	color: var(--base-3);
	clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 7px);
}

.main-navigation ul ul li:is(:hover, :focus-within) > a,
.main-navigation ul ul li.current-menu-item > a {
	background-color: var(--vert);
	color: var(--contrast);
}

/* ------------------------------------------------------------------
   Pastille tournante
   La rotation est centrée sur le disque : transform-box view-box, et
   non fill-box, qui prendrait la boîte du texte pour origine.
   ------------------------------------------------------------------ */
.badge-spin {
	transform-box: view-box;
	transform-origin: 60px 60px;
	animation: badge-spin 22s linear infinite;
}

/* ------------------------------------------------------------------
   Keyframes
   GenerateBlocks ne sait pas en écrire : les blocs ne portent que les
   longhands animation-*. Chaque élément animé porte .pause-offscreen.
   ------------------------------------------------------------------ */
@keyframes logo-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.07); }
}

@keyframes logo-nudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(2px); }
}

@keyframes marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes badge-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ------------------------------------------------------------------
   Révélations au défilement
   L'état masqué n'est posé que si le script a pris la main : sans
   JavaScript, tout reste visible.
   ------------------------------------------------------------------ */
.has-reveal [data-reveal] {
	opacity: 0;
	transition:
		opacity 620ms cubic-bezier(.22, .61, .36, 1),
		transform 620ms cubic-bezier(.22, .61, .36, 1);
	transition-delay: calc(var(--reveal-i, 0) * 90ms);
	will-change: opacity, transform;
}

.has-reveal [data-reveal="rise"]  { transform: translateY(22px); }
.has-reveal [data-reveal="pop"]   { transform: scale(.94); }
.has-reveal [data-reveal="peel"]  { transform: rotate(-3deg) translateY(14px); }

.has-reveal [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal [data-reveal],
	.has-reveal [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Champs de formulaire (balisage natif)
   La bordure héritait de --contrast-3, soit 1,4:1 sur blanc, sous le
   seuil de 3:1 des éléments d'interface.
   ------------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select {
	border-color: var(--bordure-champ);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--accent);
}

/* ------------------------------------------------------------------
   En-tête d'article : sortie des codes courts GeneratePerf
   Posée sur un aplat coloré, elle hériterait du gris de lecture.
   ------------------------------------------------------------------ */
.post-hero-band .entry-meta,
.post-hero-band .entry-meta a,
.post-hero-band .entry-meta span,
.post-hero-band .entry-meta time,
.post-hero-band [role="doc-subtitle"] {
	color: var(--base-3);
}

.post-hero-band .entry-meta a:is(:hover, :focus) {
	color: var(--vert);
}

/* ------------------------------------------------------------------
   Modale de recherche (balisage natif GeneratePress)
   Le panneau reprend les deux motifs de l'interface : angle coupé et
   ombre portée dure. Le champ garde le balisage que le script cible.
   ------------------------------------------------------------------ */

.gp-search-modal .gp-modal__overlay {
	background-color: rgba(11, 11, 28, 0.82);
	backdrop-filter: blur(3px);
	padding-top: 16vh;
}

.gp-search-modal .gp-modal__container {
	width: min(760px, calc(100vw - 2 * clamp(18px, 4vw, 40px)));
	background-color: var(--base-3);
	padding: clamp(26px, 4vw, 44px);
	clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
	filter: drop-shadow(var(--lift) var(--lift) 0 var(--vert));
}

.search-modal-form {
	background: none;
	width: 100%;
	max-width: none;
}

.search-modal-fields {
	display: flex;
	align-items: stretch;
	gap: 0;
	border: 2px solid var(--contrast);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}

.search-modal-form .search-field {
	flex: 1;
	border: 0;
	background: none;
	font-size: 18px;
	padding: 16px 18px;
	color: var(--contrast);
}

.search-modal-form .search-field::placeholder {
	color: var(--contrast-2);
	opacity: 1;
}

.search-modal-form .search-field:focus {
	outline: 0;
	background-color: var(--base);
}

/* GeneratePress impose au survol une largeur de 60px et currentColor sur ce
   bouton : on fixe largeur, fond et couleur sur tous les états. */
.search-modal-form .search-modal-fields button,
.search-modal-form .search-modal-fields button:is(:hover, :focus, :focus-visible, :active) {
	width: 62px;
	flex: none;
	border: 0;
	border-radius: 0;
	background-color: var(--contrast);
	color: var(--base-3);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.search-modal-form .search-modal-fields button:is(:hover, :focus, :focus-visible) {
	background-color: var(--vert);
	color: var(--contrast);
}

/* ==================================================================
   « À voir aussi » des archives d'étiquettes
   GeneratePerf accroche ce bloc à generate_after_main_content, hors du
   conteneur : il sortait en pleine largeur et en liste à puces sur quatre
   colonnes. On le recentre sur la largeur du site et on reprend le
   vocabulaire des pastilles de rubrique affichées plus haut sur la page.
   ================================================================== */
.related-tags {
	max-width: var(--gb-container-width);
	margin: 0 auto;
	padding: 8px clamp(18px, 4vw, 40px) 72px;
}

.related-tags > h2 {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: clamp(24px, 3vw, 34px);
	letter-spacing: -0.015em;
	line-height: 0.98;
	color: var(--contrast);
	margin: 0 0 22px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.related-tags > h2::after {
	content: '';
	height: 3px;
	flex: 1 1 auto;
	background-color: var(--vert);
}

/* La mise en colonnes du composant n'a pas de sens pour des étiquettes
   courtes : on repasse en rangée de pastilles. */
.related-tags .splitted-list[data-columns] {
	column-count: initial;
	margin: 0 !important;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.related-tags .splitted-list > li {
	margin: 0;
	break-inside: auto;
}

.related-tags .splitted-list > li > a {
	display: inline-block;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.05em;
	line-height: 1;
	padding: 9px 15px;
	color: var(--contrast);
	border: 2px solid currentColor;
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.18s ease;
}

.related-tags .splitted-list > li > a:is(:hover, :focus) {
	background-color: var(--vert);
	border-color: var(--vert);
	color: var(--contrast);
	transform: translateY(-2px) rotate(-1.8deg);
}

/* ==================================================================
   Index A–Z des sujets (/sujets)
   Balisage produit par GeneratePerf : ul.tags_list_summary (le bandeau de
   lettres), puis une alternance h2 (la lettre) / ul.splitted-list (ses
   sujets). Sélecteurs structurels plutôt qu'un identifiant de page, pour
   survivre à un changement de page d'accueil de l'index.
   ================================================================== */

/* --- Bandeau de lettres : mêmes pastilles que les rubriques --- */
.entry-content > ul.tags_list_summary {
	justify-content: flex-start;
	margin-bottom: 52px !important;
}

.entry-content > ul.tags_list_summary > li > a {
	display: grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--contrast);
	background-color: transparent;
	border: 2px solid currentColor;
	border-radius: 0;
	clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
	transition: background-color 0.18s ease, border-color 0.18s ease,
		color 0.18s ease, transform 0.18s ease;
}

.entry-content > ul.tags_list_summary > li > a:is(:hover, :focus) {
	background-color: var(--vert);
	border-color: var(--vert);
	color: var(--contrast);
	transform: translateY(-2px) rotate(-2deg);
}

/* --- Titre de lettre : même barre que les titres de section --- */
.entry-content > ul.tags_list_summary ~ h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: 34px;
	letter-spacing: -0.015em;
	line-height: 1;
	color: var(--contrast);
	margin: 46px 0 18px;
	scroll-margin-top: 90px;
}

.entry-content > ul.tags_list_summary ~ h2::after {
	content: '';
	height: 3px;
	flex: 1 1 auto;
	background-color: var(--vert);
}

/* --- Colonnes de sujets : la puce cède la place à un tiret vert --- */
.entry-content > ul.tags_list_summary ~ ul.splitted-list[data-columns] {
	margin: 0 0 12px !important;
	padding: 0;
	list-style: none;
	column-gap: 40px;
}

.entry-content > ul.tags_list_summary ~ ul.splitted-list > li {
	margin: 0;
	break-inside: avoid;
}

.entry-content > ul.tags_list_summary ~ ul.splitted-list > li > a {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 5px 0;
	color: var(--contrast);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.entry-content > ul.tags_list_summary ~ ul.splitted-list > li > a::before {
	content: '';
	width: 11px;
	height: 2px;
	flex: none;
	background-color: var(--bordure-champ);
	transform: translateY(-4px);
	transition: background-color 0.18s ease, width 0.18s ease;
}

.entry-content > ul.tags_list_summary ~ ul.splitted-list > li > a:is(:hover, :focus) {
	color: var(--accent);
}

.entry-content > ul.tags_list_summary ~ ul.splitted-list > li > a:is(:hover, :focus)::before {
	background-color: var(--vert);
	width: 18px;
}