/* ============================================================
   RadioInternet — feuille de style principale
   Direction « Affiche » (v1.4.0) : fond quasi noir de studio,
   néon rouge, ondes bleu électrique et cyan, typo graffiti.
   Typographies : Anton (titres), Barlow (texte),
   Permanent Marker (notes manuscrites).
   ============================================================ */

:root {
	--bg: #04060d;
	--bg-elev: #070a16;
	--card: #0a0f1e;
	--card-border: rgba(140, 160, 255, 0.16);
	--text: #eef2f7;
	--muted: #9aa7b5;
	--cyan: #35e0ff;
	--blue: #2e7bff;
	--neon: #ff2233;
	/* v2.2.23 « LOOK MAGAZINE » : l'accent principal des maquettes
	   du propriétaire est le magenta néon — --magenta redevient
	   un vrai magenta et deux accents « look » nommés s'ajoutent
	   (magenta + violet). Le rouge néon --neon reste l'accent
	   « ON AIR » des affiches et des liserés historiques. Tous
	   les usages de var(--magenta) (survols, halo du héros,
	   pastille de marque via --gradient) basculent d'un coup
	   dans la palette des maquettes, sans rien casser. */
	--magenta: #ff2e9e;
	--look-magenta: #ff2e9e;
	--look-violet: #8b5cf6;
	--gold: #eec25e;
	--gradient: linear-gradient(120deg, var(--look-magenta), var(--look-violet) 55%, var(--cyan));
	--wave-gradient: linear-gradient(90deg, var(--blue), var(--cyan));
	--radius: 16px;
	--font-title: "Anton", "Archivo Black", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Barlow", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-marker: "Permanent Marker", "Segoe Print", cursive;
	--header-h: 72px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-title);
	line-height: 1.12;
	margin: 0 0 0.6em;
	letter-spacing: 0.015em;
}
h1, h2 { text-transform: uppercase; }

p { margin: 0 0 1em; }
a { color: var(--cyan); }
a:hover { color: #ff5c6c; }

img { max-width: 100%; height: auto; }

::selection { background: rgba(53, 224, 255, 0.3); }

/* ---------- Accessibilité ---------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--cyan);
	color: #04121a;
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 8px 0;
	z-index: 200;
}
.skip-link:focus { left: 0; }

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Utilitaires ---------- */
.container {
	width: min(1140px, 100% - 2.5rem);
	margin-inline: auto;
}
.container.narrow { width: min(760px, 100% - 2.5rem); }

.section { padding: 4.5rem 0; }
.section-alt { background: var(--bg-elev); border-block: 1px solid var(--card-border); }

.eyebrow {
	font-family: var(--font-title);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 1rem;
}

.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.subsection-title { font-size: 1.35rem; margin-top: 3rem; }

.lead { font-size: 1.12rem; color: var(--muted); }
.lead.narrow, p.narrow { max-width: 46rem; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.text-center { text-align: center; }

.gradient-text {
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Boutons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.85rem 1.7rem;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
/* v2.2.0 (passe couleur) : l'arrêt clair du dégradé du bouton
   primaire passe de --neon (#ff2233 — texte blanc à 3,80:1) à
   #e00e24 (4,93:1) : le texte blanc atteint le seuil WCAG AA
   (4,5:1) sur tout le dégradé (5,25:1 côté #d90429). Le rouge
   néon --neon reste l'accent du thème : sur fond noir, il vaut
   5,34:1, conforme pour le texte. */
/* v2.2.23 « LOOK MAGAZINE » : le bouton primaire passe au
   dégradé magenta des maquettes, avec la même discipline de
   contraste que la passe couleur v2.2.0 : les deux arrêts
   (#c4005f à 5,9:1, #d81b74 à 4,8:1) gardent le texte blanc
   au seuil WCAG AA sur tout le dégradé. Le magenta vif
   --look-magenta reste réservé aux halos, bordures et
   grands titres, où il est décoratif. */
.btn-primary {
	background: linear-gradient(120deg, #c4005f, #d81b74);
	color: #ffffff;
	box-shadow: 0 6px 26px rgba(255, 46, 158, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-primary:hover { color: #ffffff; box-shadow: 0 8px 32px rgba(139, 92, 246, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--card-border);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.88rem; }
.btn-lg { padding: 1rem 2.2rem; font-size: 1.08rem; }
.btn-block { display: flex; width: 100%; }

.card-link {
	font-family: var(--font-title);
	font-weight: 600;
	text-decoration: none;
	color: var(--cyan);
}
.card-link:hover { color: var(--magenta); }

/* ---------- Pastilles ---------- */
.pill {
	display: inline-block;
	font-family: var(--font-title);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--card-border);
	color: var(--muted);
	background: rgba(255, 255, 255, 0.03);
}
.pill-ready {
	color: #062b33;
	background: var(--cyan);
	border-color: var(--cyan);
}
.pill-todo {
	color: var(--magenta);
	border-color: rgba(255, 34, 51, 0.5);
	background: rgba(255, 34, 51, 0.08);
}

/* ---------- Badge « Explicite — 18+ » (v1.8.1) ----------
   La mention des titres au langage ou aux thèmes réservés
   aux adultes (règle de Maurence : indiquer, jamais retirer).
   Texte réel, sobre et lisible : pastille dorée (les notes
   manuscrites dorées de l'Affiche), aucun clignotement —
   distincte du badge rouge « EN DIRECT ». */
.rint-badge-explicite {
	display: inline-block;
	font-family: var(--font-title);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.14em 0.55em;
	border-radius: 999px;
	border: 1px solid rgba(238, 194, 94, 0.8);
	color: var(--gold);
	background: rgba(238, 194, 94, 0.1);
	white-space: nowrap;
	vertical-align: 0.1em;
}
.rint-legende-explicite {
	color: var(--muted);
	font-size: 0.92rem;
	margin: 0.9rem 0;
}

/* ---------- En-tête / navigation ---------- */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--header-h);
	z-index: 100;
	background: rgba(4, 6, 13, 0.85);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--card-border); }

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	height: var(--header-h);
}

.brand { display: flex; align-items: baseline; gap: 0.6rem; }
.brand-text {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-title);
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--text);
	text-decoration: none;
	font-size: 1rem;
}
.brand-mark {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--gradient);
	box-shadow: 0 0 12px rgba(53, 224, 255, 0.8);
	flex: none;
}
.brand-sub {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}
.custom-logo { max-height: 40px; width: auto; }

.nav-list {
	display: flex;
	gap: 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav-list a {
	color: var(--muted);
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	/* v1.4.2 : un libellé de menu ne passe jamais sur deux lignes
	   (le cas relevé en audit : « Outils gratuits »). */
	white-space: nowrap;
}
.nav-list a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: 0.8rem; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	cursor: pointer;
	padding: 0 11px;
}
.nav-toggle span {
	display: block;
	height: 2px;
	background: var(--text);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Menu mobile : panneau plein écran (v1.6.2) ----------
   Avant v1.6.2, le menu s'ouvrait EN FLUX dans l'en-tête fixe de
   72 px, sans hauteur maximale ni défilement propre : à 17 entrées,
   les items du bas sortaient de l'écran sans aucun moyen de les
   atteindre — le menu « jammait » (plainte de Maurence sur son
   iPhone, 2026-10-07). Le nav vit désormais HORS de l'en-tête
   (header.php) et devient, sous le breakpoint du bouton hamburger
   (860 px), un panneau fixe sous l'en-tête qui défile en lui-même
   et passe au-dessus de la barre du lecteur (z-index 9990) le
   temps de l'ouverture, pour que le dernier item reste toujours
   atteignable. L'animation d'ouverture est coupée par la règle
   prefers-reduced-motion déjà en place plus bas. */
.menu-mobile[hidden] { display: none; }

/* Page verrouillée pendant que le panneau est ouvert (main.js). */
body.menu-ouvert { overflow: hidden; }

@keyframes rint-menu-ouverture {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
	.menu-mobile {
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9995;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		background: rgba(4, 6, 10, 0.97);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		border-top: 1px solid var(--card-border);
		padding: 1.25rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
		animation: rint-menu-ouverture 0.28s ease;
	}
	.nav-list-mobile { list-style: none; margin: 0 0 1.25rem; padding: 0; }
	.nav-list-mobile > li { border-bottom: 1px solid var(--card-border); }
	.nav-list-mobile a {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		min-height: 52px;
		padding: 0.8rem 0.5rem;
		color: var(--text);
		text-decoration: none;
		font-family: var(--font-title);
		font-weight: 600;
		font-size: 1.12rem;
		letter-spacing: 0.03em;
	}
	/* Pastille alignée sur tous les items ; elle ne s'allume que
	   sur la page courante, pour garder un bord gauche constant. */
	.nav-list-mobile a::before {
		content: "";
		flex: none;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: transparent;
	}
	/* Page courante : accent néon rouge « ON AIR ». */
	.nav-list-mobile .current-menu-item > a,
	.nav-list-mobile a[aria-current="page"] {
		color: var(--neon);
		text-shadow: 0 0 18px rgba(255, 34, 51, 0.45);
	}
	.nav-list-mobile .current-menu-item > a::before,
	.nav-list-mobile a[aria-current="page"]::before {
		background: var(--neon);
		box-shadow: 0 0 10px var(--neon);
	}
	/* Sous-menu (les deux outils sous « Outils gratuits ») :
	   groupe indenté et séparé, sans filet entre ses items. */
	.nav-list-mobile .sub-menu {
		list-style: none;
		margin: 0;
		padding: 0.3rem 0 0.7rem 1.35rem;
		border-top: 1px dashed rgba(255, 255, 255, 0.09);
	}
	.nav-list-mobile .sub-menu li { border-bottom: none; }
	.nav-list-mobile .sub-menu a {
		min-height: 48px;
		padding: 0.6rem 0.5rem;
		font-size: 0.98rem;
		color: var(--muted);
	}
	.nav-list-mobile .sub-menu a:hover { color: var(--text); }
	.menu-mobile .btn-block { margin-top: 0.25rem; }
}

/* ---------- Héros ---------- */
.site-main { padding-top: var(--header-h); }

/* v1.6.7 : en cohérence avec le padding-top ci-dessus, tout
   défilement programmé (ancre, focus, scrollIntoView) laisse
   la hauteur de l'en-tête fixe libre en haut du viewport —
   l'en-tête ne recouvre jamais le contenu visé. Pendant bas :
   le scroll-padding-bottom du module Lecteur persistant. */
html { scroll-padding-top: calc(var(--header-h) + 10px); }

.hero { position: relative; overflow: hidden; padding: 5.5rem 0 4rem; }
.hero-compact { padding: 4rem 0 3rem; }
.hero-decor { position: absolute; inset: 0; pointer-events: none; }
.glow { position: absolute; width: 560px; height: 560px; border-radius: 50%; filter: blur(130px); opacity: 0.28; }
.glow-cyan { background: var(--cyan); top: -220px; left: -140px; }
.glow-magenta { background: var(--magenta); top: -180px; right: -160px; }
.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 30%, transparent 75%);
}
.hero-inner { position: relative; }
.hero-title { font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 16ch; }
.hero-priority { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.95rem; }
.status-dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: var(--cyan);
	box-shadow: 0 0 10px var(--cyan);
	animation: pulse 2s ease-in-out infinite;
	flex: none;
}
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.8); }
}
.hero-offer { color: var(--text); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }
.hero-actions.centered { justify-content: center; }

/* Égaliseur décoratif (barres générées en JS, purement décoratif) */
.waveform {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 84px;
	margin-top: 3rem;
	opacity: 0.85;
}
.waveform span {
	flex: 1;
	min-width: 3px;
	border-radius: 3px;
	background: linear-gradient(to top, var(--blue), var(--cyan));
	box-shadow: 0 0 8px rgba(53, 224, 255, 0.35);
	animation: eq 1.6s ease-in-out infinite;
}
@keyframes eq {
	0%, 100% { transform: scaleY(0.35); }
	50% { transform: scaleY(1); }
}

/* ---------- Statistiques ---------- */
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.stat-card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.6rem 1.2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	align-items: center;
}
.stat-number { font-family: var(--font-title); font-size: 2.4rem; font-weight: 700; line-height: 1; }
.stat-label { color: var(--muted); font-size: 0.92rem; }

/* ---------- Cartes ---------- */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin-top: 2.2rem;
}
.card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.7rem;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: rgba(53, 224, 255, 0.4); transform: translateY(-3px); }
.card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.card p:last-child { margin-bottom: 0; }
.card-highlight { border-color: rgba(255, 34, 51, 0.45); }
.card-wide { padding: 2.2rem; }
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--cyan); }
.card-meta { color: var(--muted); font-size: 0.85rem; }
.card-media img { border-radius: 8px; margin-bottom: 1rem; }
.tool-num {
	font-family: var(--font-title);
	font-size: 0.8rem;
	color: var(--magenta);
	letter-spacing: 0.15em;
}
.card-generic { opacity: 0.75; }
.tags-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }

/* ---------- Étapes ---------- */
.steps-grid {
	list-style: none;
	margin: 2.2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1rem;
	counter-reset: etape;
}
.step-card {
	position: relative;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.6rem 1.2rem;
	counter-increment: etape;
}
.step-card::before {
	content: "0" counter(etape);
	font-family: var(--font-title);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	color: var(--magenta);
}
.step-card h3 { font-size: 1.15rem; margin: 0.6rem 0 0.5rem; }
.step-card p { color: var(--muted); font-size: 0.93rem; }
.step-icon { font-size: 1.6rem; }

/* ---------- Univers radio ---------- */
.univers-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2.2rem;
}
.univers-card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.3rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.univers-num { font-family: var(--font-title); font-weight: 700; color: var(--cyan); letter-spacing: 0.1em; font-size: 0.85rem; }
.univers-desc { color: var(--muted); font-size: 0.92rem; }

/* ---------- Tarifs ---------- */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin-top: 2.2rem;
	align-items: stretch;
}
.price-card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 2rem 1.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.price-featured {
	border: 1px solid transparent;
	background:
		linear-gradient(var(--card), var(--card)) padding-box,
		var(--gradient) border-box;
}
.price { margin: 0; }
.price-amount { font-family: var(--font-title); font-size: 2.6rem; font-weight: 700; }
.price-per { color: var(--muted); }
.price-desc { color: var(--muted); }
.price-list { margin: 0.5rem 0 1.2rem; padding: 0; list-style: none; }
.price-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.55rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.price-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--cyan);
	font-weight: 700;
}
.price-card .btn-block { margin-top: auto; }

.phone-big { font-family: var(--font-title); font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }
.phone-big a { color: var(--text); text-decoration: none; }
.phone-big a:hover { color: var(--cyan); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; margin-top: 2rem; border: 1px solid var(--card-border); border-radius: var(--radius); }
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.compare-table th, .compare-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--card-border); }
.compare-table thead th { font-family: var(--font-title); background: rgba(255, 255, 255, 0.03); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody th[scope="row"] { font-weight: 600; }

/* ---------- Pipeline ---------- */
.pipeline {
	list-style: none;
	margin: 2.2rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	counter-reset: pipe;
}
.pipeline li {
	counter-increment: pipe;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.2rem 1rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
}
.pipeline li::before {
	content: counter(pipe);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem; height: 1.7rem;
	border-radius: 50%;
	background: var(--gradient);
	color: #ffffff;
	font-size: 0.85rem;
	margin-right: 0.6rem;
}
.principe {
	font-family: var(--font-title);
	font-size: clamp(1.3rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---------- FAQ ---------- */
.faq-item {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	margin-bottom: 0.9rem;
	overflow: hidden;
}
.faq-item summary {
	cursor: pointer;
	padding: 1.2rem 1.5rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.05rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--cyan);
	flex: none;
	transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); color: var(--magenta); }
.faq-item p { padding: 0 1.5rem 1.4rem; margin: 0; color: var(--muted); }

/* ---------- Preuves / citation ---------- */
.quote {
	border-left: 3px solid transparent;
	border-image: var(--gradient) 1;
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
	font-family: var(--font-title);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	font-weight: 600;
}
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2rem; }
.proof-card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.7rem;
}

/* ---------- CTA final ---------- */
.cta-final {
	position: relative;
	overflow: hidden;
}
.cta-final::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 90% at 50% 100%, rgba(53, 224, 255, 0.12), transparent 70%),
		radial-gradient(ellipse 50% 80% at 80% 100%, rgba(255, 34, 51, 0.1), transparent 70%);
	pointer-events: none;
}
.cta-final .container { position: relative; }

/* ---------- Listes à cocher ---------- */
.check-list { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.check-list li {
	position: relative;
	padding-left: 1.8rem;
	margin-bottom: 0.8rem;
	color: var(--muted);
}
.check-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--magenta);
	font-weight: 700;
}

/* ---------- Formulaires ---------- */
.contact-form { margin-top: 2rem; }
.form-row { margin-bottom: 1.2rem; }
.form-row label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	color: var(--text);
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	border-color: var(--cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.2);
}
.notice {
	border-radius: var(--radius);
	padding: 1.1rem 1.4rem;
	margin-bottom: 1.5rem;
	font-weight: 500;
}
.notice-success { background: rgba(53, 224, 255, 0.1); border: 1px solid rgba(53, 224, 255, 0.4); }
.notice-error { background: rgba(255, 34, 51, 0.08); border: 1px solid rgba(255, 34, 51, 0.4); }

/* ---------- Pages génériques ---------- */
.page-wrap { padding: 3.5rem 0 4.5rem; }
.page-header { margin-bottom: 2.2rem; }
.page-title { font-size: clamp(2rem, 4.5vw, 3rem); }
.entry-content { max-width: 46rem; }
.entry-content h2, .entry-content h3 { margin-top: 2rem; }
.pagination { margin-top: 3rem; }
.pagination .nav-links { display: flex; gap: 0.6rem; }
.pagination a, .pagination span {
	padding: 0.5rem 1rem;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--muted);
}
.pagination .current { background: var(--cyan); color: #06121a; border-color: var(--cyan); }

/* ---------- Fusion 1.2.0 : services, lecteur concept, promesse ---------- */
.promise-line { border-left: 3px solid var(--cyan); padding-left: 1rem; }

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.2rem;
	margin-top: 2.2rem;
}
.service-card { display: flex; flex-direction: column; gap: 0.4rem; }
.service-card h3 { margin-bottom: 0.2rem; }
.service-card p { color: var(--muted); font-size: 0.95rem; }
.service-card p:last-child { margin-top: auto; }
.service-icon { font-size: 1.6rem; line-height: 1; }

.player-concept {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 2.2rem;
	padding: 1.1rem 1.4rem;
	background: var(--card);
	border: 1px solid rgba(53, 224, 255, 0.35);
	border-radius: 999px;
}
.player-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid var(--card-border);
	color: var(--muted);
	font-size: 0.85rem;
	flex: none;
}
.player-btn-main {
	background: var(--gradient);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	border: none;
	width: 2.9rem;
	height: 2.9rem;
	font-size: 1rem;
}
.player-track {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
	min-width: 60px;
}
.player-track-fill {
	display: block;
	width: 35%;
	height: 100%;
	background: var(--gradient);
}
.player-meta {
	font-family: var(--font-title);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	white-space: nowrap;
}
.player-vol { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; }
.player-vol span { display: block; width: 4px; background: var(--cyan); border-radius: 2px; }
.player-vol span:nth-child(1) { height: 6px; }
.player-vol span:nth-child(2) { height: 10px; }
.player-vol span:nth-child(3) { height: 14px; }
.player-vol span:nth-child(4) { height: 18px; opacity: 0.35; }
.player-caption {
	display: flex;
	align-items: flex-start;
	gap: 0.8rem;
	margin-top: 1rem;
	color: var(--muted);
	font-size: 0.95rem;
}
.player-caption .pill { flex: none; margin-top: 0.15rem; }

@media (max-width: 640px) {
	.player-meta { display: none; }
	.player-caption { flex-direction: column; }
}

/* ---------- Pied de page ---------- */
.site-footer {
	border-top: 1px solid var(--card-border);
	background: var(--bg-elev);
	padding: 3.5rem 0 0;
	margin-top: 2rem;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2rem;
	padding-bottom: 2.5rem;
}
.footer-logo {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-title);
	font-weight: 700;
	letter-spacing: 0.08em;
}
.footer-tagline { color: var(--muted); }
.footer-phone a {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--text);
	text-decoration: none;
}
.footer-phone a:hover { color: var(--cyan); }
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { margin-bottom: 0.6rem; }
.footer-list a { color: var(--muted); text-decoration: none; }
.footer-list a:hover { color: var(--text); }
.footer-note { color: var(--muted); font-size: 0.9rem; }
.footer-bottom {
	border-top: 1px solid var(--card-border);
	padding: 1.4rem 0;
	color: var(--muted);
	font-size: 0.88rem;
}
.footer-bottom p { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	/* v1.4.2 : la nav bureau reste affichée jusqu'à 860 px — on
	   resserre ses espacements aux largeurs intermédiaires pour
	   accompagner le nowrap des libellés sans débordement. */
	.nav-list { gap: 1.05rem; }
	.cards-grid { grid-template-columns: repeat(2, 1fr); }
	.steps-grid { grid-template-columns: repeat(3, 1fr); }
	.univers-grid { grid-template-columns: repeat(2, 1fr); }
	.pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; margin-top: 2.2rem; }
	.pipeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.nav-desktop { display: none; }
	.nav-toggle { display: flex; }
	/* v1.6.7 : le bouton « Essai gratuit — 2 mois » reste DANS
	   la barre d'en-tête à TOUTES les largeurs — avant, cette
	   règle le masquait sous 860 px et il n'existait que dans
	   le panneau du menu mobile. Version compacte, sur une
	   seule ligne; la marque peut rétrécir (ellipsis) pour que
	   la rangée tienne sans déborder, le bouton et le
	   hamburger gardent leur taille. */
	.brand { min-width: 0; flex: 0 1 auto; }
	.brand-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.header-actions { flex: 0 0 auto; gap: 0.55rem; }
	.header-actions .btn {
		display: inline-flex;
		white-space: nowrap;
		padding: 0.5rem 0.75rem;
		font-size: 0.78rem;
		letter-spacing: 0.03em;
	}
}

@media (max-width: 480px) {
	/* v1.6.7 : petit écran — la rangée d'en-tête (marque,
	   bouton d'essai, hamburger) tient dans la largeur sans
	   qu'aucun des trois ne disparaisse. */
	.header-inner { gap: 0.6rem; }
	.brand-text { font-size: 0.84rem; }
	.brand-mark { width: 11px; height: 11px; }
	.header-actions .btn { padding: 0.45rem 0.6rem; font-size: 0.74rem; }
	.nav-toggle { width: 40px; height: 40px; padding: 0 9px; }
}

@media (max-width: 640px) {
	.section { padding: 3.2rem 0; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.cards-grid { grid-template-columns: 1fr; }
	.steps-grid { grid-template-columns: 1fr; }
	.proof-grid { grid-template-columns: 1fr; }
	.pipeline { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero-actions .btn { width: 100%; }
	.brand-sub { display: none; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   ULTRA 2026 — v1.3.0
   Direction : affiche éditoriale, mouvement CSS d'abord,
   un héros distinct par page, rythmes variés (anti-robot).
   Aucun contenu nouveau : seulement la mise en scène des
   textes et chiffres réels du site.
   ============================================================ */

/* ---------- Dégradé vivant ---------- */
.gradient-text {
	background-size: 200% 200%;
	animation: rint-text-pan 7s ease-in-out infinite alternate;
}
@keyframes rint-text-pan {
	from { background-position: 0% 50%; }
	to { background-position: 100% 50%; }
}

/* ---------- Révélation au défilement (activée en JS seulement) ---------- */
.has-reveal .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.has-reveal .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Boutons : reflet qui passe ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
	transform: translateX(-130%);
	transition: transform 0.6s ease;
	pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(130%); }

/* ---------- Navigation : soulignement qui grandit ---------- */
.nav-list a { position: relative; }
.nav-list a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px;
	height: 2px;
	width: 100%;
	border-radius: 2px;
	background: var(--gradient);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}
.nav-list a:hover::after { transform: scaleX(1); }

/* ---------- Héros : variantes par page ---------- */
.hero--home .hero-title { font-size: clamp(2.6rem, 7vw, 5rem); }
.hero--home .glow { animation: rint-drift 11s ease-in-out infinite alternate; }
.hero--home .glow-magenta { animation-delay: -5s; }
@keyframes rint-drift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(46px, 30px) scale(1.12); }
}
.hero--magenta .glow-cyan { opacity: 0.14; left: auto; right: -200px; top: -120px; }
.hero--magenta .glow-magenta { opacity: 0.4; left: -160px; right: auto; }
.hero--cyan .glow-magenta { opacity: 0.13; }
.hero--cyan .glow-cyan { opacity: 0.4; }
.hero--split .glow-cyan { top: auto; bottom: -260px; left: -120px; }
.hero--split .glow-magenta { top: -200px; right: -120px; }
.hero--contact .glow-cyan { top: auto; bottom: -280px; left: 12%; }
.hero--contact .glow-magenta { top: auto; bottom: -280px; right: 12%; }

/* Mot-fantôme d'affiche, propre à chaque page (décoratif) */
.hero-ghost {
	position: absolute;
	right: -0.4rem;
	bottom: -1.6rem;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(4.6rem, 15vw, 10.5rem);
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
	pointer-events: none;
	user-select: none;
}

/* Anneaux radar décoratifs (Link Analyzer, Écouter) */
.hero-rings {
	position: absolute;
	right: -130px;
	top: -130px;
	width: 430px;
	height: 430px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, transparent 0 56px, rgba(53, 224, 255, 0.13) 56px 57.5px);
	overflow: hidden;
}
.hero-rings::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(53, 224, 255, 0.20), transparent 70deg);
	animation: rint-spin 9s linear infinite;
}
@keyframes rint-spin { to { transform: rotate(360deg); } }

/* Vinyle décoratif (Scratch Lab) */
.vinyl {
	position: absolute;
	right: -80px;
	top: 50%;
	width: 350px;
	height: 350px;
	margin-top: -175px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, #090c11 0 2px, #141a24 2px 4px);
	border: 1px solid rgba(255, 255, 255, 0.09);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 60px rgba(0, 0, 0, 0.6);
	animation: rint-spin 16s linear infinite;
}
.vinyl::before {
	content: "";
	position: absolute;
	inset: 34%;
	border-radius: 50%;
	background: var(--gradient);
	opacity: 0.9;
}
.vinyl::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

/* ---------- Bandeau défilant (promesse, décoratif) ---------- */
.marquee {
	overflow: hidden;
	border-block: 1px solid var(--card-border);
	background: var(--bg-elev);
	padding: 0.95rem 0;
}
.marquee-track {
	display: flex;
	width: max-content;
	animation: rint-marquee 30s linear infinite;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--muted);
}
.marquee-track span { padding-right: 3.2rem; white-space: nowrap; }
.marquee-track b { color: var(--cyan); font-weight: 700; }
.marquee-track i { color: var(--magenta); font-style: normal; }
@keyframes rint-marquee { to { transform: translateX(-50%); } }

/* ---------- Statistiques : chiffres d'affiche ---------- */
.stat-card { position: relative; overflow: hidden; }
.stat-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--gradient);
	opacity: 0.75;
}
.stat-number { font-size: clamp(2.9rem, 5vw, 3.7rem); }

/* ---------- Étapes : numéros éditoriaux ---------- */
.step-card::before { font-size: 1.7rem; font-weight: 700; }
.step-card { transition: border-color 0.2s ease, transform 0.2s ease; }
.step-card:hover { border-color: rgba(255, 34, 51, 0.4); transform: translateY(-3px); }

/* ---------- Services : accents alternés cyan / magenta ---------- */
.services-grid .service-card { border-top: 3px solid rgba(53, 224, 255, 0.55); }
.services-grid .service-card:nth-child(even) { border-top-color: rgba(255, 34, 51, 0.55); }

/* ---------- Cartes : reflet au survol ---------- */
.card { position: relative; }
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.05) 50%, transparent 58%);
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* ---------- Cartes de présentation (révision audit visiteur, 1.3.1) ----------
   Une carte SANS lien réel reçoit la classe .card--presentation :
   aucun soulèvement, aucun reflet, aucune lueur au survol — elle ne
   doit pas avoir l'air cliquable (verdict INERTE de l'audit des clics
   en visiteur réel). Les cartes qui contiennent un vrai lien gardent
   l'effet au survol, qui signale alors un lien réel à l'intérieur. */
.card--presentation { cursor: default; }
.card--presentation:hover { border-color: var(--card-border); transform: none; }
.card--presentation::after { display: none; }

/* ---------- Tarifs : prix d'affiche, bordure animée ---------- */
.price-amount { font-size: clamp(3rem, 5.5vw, 3.9rem); }
.price-featured {
	background:
		linear-gradient(var(--card), var(--card)) padding-box,
		linear-gradient(120deg, var(--cyan), var(--magenta), var(--cyan)) border-box;
	background-size: 100% 100%, 220% 220%;
	animation: rint-border-pan 6s linear infinite;
}
@keyframes rint-border-pan {
	from { background-position: 0 0, 0% 50%; }
	to { background-position: 0 0, 220% 50%; }
}

/* ---------- Pipeline : balayage décoratif ---------- */
.pipeline li { overflow: hidden; }
.pipeline li::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(53, 224, 255, 0.09) 50%, transparent 70%);
	transform: translateX(-110%);
	animation: rint-scan 4.2s ease-in-out infinite;
	pointer-events: none;
}
.pipeline li:nth-child(2)::after { animation-delay: 0.5s; }
.pipeline li:nth-child(3)::after { animation-delay: 1s; }
.pipeline li:nth-child(4)::after { animation-delay: 1.5s; }
.pipeline li:nth-child(5)::after { animation-delay: 2s; }
@keyframes rint-scan {
	55%, 100% { transform: translateX(110%); }
}

/* ---------- Citation : guillemet d'affiche ---------- */
.quote { position: relative; }
.quote::before {
	content: "«";
	position: absolute;
	left: -0.55rem;
	top: -2.6rem;
	font-size: 4.6rem;
	line-height: 1;
	color: var(--magenta);
	opacity: 0.55;
}

/* ---------- Comparatif : notre carte en pleine largeur ---------- */
@media (min-width: 1025px) {
	.cards-grid > .card-highlight {
		grid-column: 1 / -1;
		border: 1px solid transparent;
		background:
			linear-gradient(var(--card), var(--card)) padding-box,
			var(--gradient) border-box;
	}
}

/* ---------- Outils : numéros fantômes, rythme décalé ---------- */
.tools-generic .card { overflow: hidden; }
.tools-generic .tool-num {
	font-size: 2.6rem;
	font-weight: 700;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 34, 51, 0.4);
}
@media (min-width: 1025px) {
	.tools-generic .card:nth-child(3n+2) { transform: translateY(14px); }
	.tools-generic .card:nth-child(3n) { transform: translateY(28px); }
	.tools-generic { padding-bottom: 28px; }
}

/* ---------- Contact : formulaire en panneau ---------- */
.contact-form {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-top: 3px solid transparent;
	border-image: var(--gradient) 1;
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 2rem;
}
.hero--contact .phone-big { font-size: clamp(2rem, 6vw, 3.4rem); }

/* ---------- Pages génériques : titres d'affiche ---------- */
.page-title { font-size: clamp(2.4rem, 6vw, 3.9rem); }
.site-footer { position: relative; }
.site-footer::before {
	content: "";
	position: absolute;
	inset: -1px 0 auto 0;
	height: 2px;
	background: var(--gradient);
	opacity: 0.6;
}

/* ---------- Barres d'égaliseur décoratives (CSS pur) ---------- */
.eq-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 26px;
}
.eq-bars span {
	width: 4px;
	border-radius: 2px;
	background: linear-gradient(to top, var(--blue), var(--cyan));
	transform-origin: bottom;
	animation: eq 1.25s ease-in-out infinite;
}
.eq-bars span:nth-child(1) { height: 40%; }
.eq-bars span:nth-child(2) { height: 75%; animation-delay: 0.12s; }
.eq-bars span:nth-child(3) { height: 100%; animation-delay: 0.24s; }
.eq-bars span:nth-child(4) { height: 55%; animation-delay: 0.36s; }
.eq-bars span:nth-child(5) { height: 85%; animation-delay: 0.48s; }
.eq-bars span:nth-child(6) { height: 45%; animation-delay: 0.6s; }
.eq-bars span:nth-child(7) { height: 95%; animation-delay: 0.72s; }
.eq-bars span:nth-child(8) { height: 60%; animation-delay: 0.84s; }
.eq-bars span:nth-child(9) { height: 80%; animation-delay: 0.96s; }
.eq-bars span:nth-child(10) { height: 50%; animation-delay: 1.08s; }
.eq-bars span:nth-child(11) { height: 70%; animation-delay: 0.3s; }
.eq-bars span:nth-child(12) { height: 38%; animation-delay: 0.54s; }

/* ============================================================
   ÉCOUTER — la scène (maquette de présentation étiquetée).
   Tout ce qui est dans .stage est un décor : aucune donnée,
   aucun morceau, aucune progression réelle.
   ============================================================ */
.stage {
	margin-top: 2.6rem;
	border: 1px solid rgba(53, 224, 255, 0.35);
	border-radius: 22px;
	background:
		radial-gradient(ellipse 70% 90% at 18% 0%, rgba(53, 224, 255, 0.10), transparent 60%),
		radial-gradient(ellipse 60% 90% at 88% 100%, rgba(255, 34, 51, 0.10), transparent 60%),
		var(--card);
	padding: 1.6rem;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.stage-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--card-border);
}
.stage-sign {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(1.5rem, 4vw, 2.3rem);
	letter-spacing: 0.14em;
}
.stage-sign::before {
	content: "";
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--magenta);
	box-shadow: 0 0 14px var(--magenta);
	animation: pulse 2s ease-in-out infinite;
}
.stage-tag {
	font-family: var(--font-title);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #06121a;
	background: var(--cyan);
	border-radius: 999px;
	padding: 0.35rem 0.8rem;
}
.stage-main {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 2rem;
	align-items: center;
	padding: 1.8rem 0 0.4rem;
}
.stage-art {
	position: relative;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, #0a0e14 0 2px, #151c27 2px 4px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 0 50px rgba(0, 0, 0, 0.55);
	animation: rint-spin 22s linear infinite;
}
.stage-art::before {
	content: "";
	position: absolute;
	inset: 30%;
	border-radius: 50%;
	background: var(--gradient);
}
.stage-art::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid rgba(255, 255, 255, 0.55);
}
.stage-kicker {
	font-family: var(--font-title);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cyan);
	margin: 0 0 0.4rem;
}
.stage-track-name {
	font-family: var(--font-title);
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.3rem;
}
.stage-artist { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.4rem; }
.stage-progress {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}
.stage-progress i { display: block; width: 0; height: 100%; background: var(--gradient); }
.stage-times {
	display: flex;
	justify-content: space-between;
	color: var(--muted);
	font-size: 0.85rem;
	margin-top: 0.45rem;
	font-variant-numeric: tabular-nums;
}
.stage-controls {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin-top: 1.3rem;
}
.stage-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1px solid var(--card-border);
	color: var(--muted);
	font-size: 0.95rem;
}
.stage-btn-main {
	width: 3.8rem;
	height: 3.8rem;
	background: var(--gradient);
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	border: none;
	font-size: 1.15rem;
	box-shadow: 0 10px 30px rgba(53, 224, 255, 0.3);
}
.stage-cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.2rem;
	margin-top: 1.8rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--card-border);
}
.stage-col h3 {
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 0.8rem;
}
.stage-col ul { list-style: none; margin: 0; padding: 0; }
.stage-col li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.55rem 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.09);
	color: var(--muted);
	font-size: 0.93rem;
}
.stage-col li:last-child { border-bottom: none; }
.stage-col .stage-slot { color: var(--text); font-family: var(--font-title); font-weight: 600; }

@media (max-width: 860px) {
	.stage-main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.stage-art { width: 200px; height: 200px; }
	.stage-controls { justify-content: center; }
	.stage-cols { grid-template-columns: 1fr; }
	.vinyl { width: 240px; height: 240px; margin-top: -120px; right: -110px; opacity: 0.55; }
	.hero-rings { width: 300px; height: 300px; right: -110px; top: -110px; }
}

@media (max-width: 640px) {
	.hero-ghost { font-size: clamp(3.4rem, 18vw, 5rem); bottom: -0.9rem; }
	.marquee-track { font-size: 0.9rem; letter-spacing: 0.24em; animation-duration: 22s; }
	.contact-form { padding: 1.3rem; }
	.stage { padding: 1.1rem; border-radius: 18px; }
}



/* ============================================================
   AFFICHE — v1.4.0
   Direction des affiches de Maurence : fond noir de scène,
   néon rouge « ON AIR », typo graffiti blanche et rouge,
   ondes sonores bleu électrique / cyan, notes manuscrites
   dorées, chips de stations façon autocollants, couronne.
   Aucun effet ne simule de données : tout est décoratif et
   étiqueté comme tel (§56). Le mouvement reste coupé par la
   règle prefers-reduced-motion déjà en place plus haut.
   ============================================================ */

/* ---------- Badge « ON AIR » néon (décoratif) ----------
   Enseigne de studio façon affiche : ce badge est un élément
   graphique, il n'affirme AUCUN direct réel. Il ne doit jamais
   être combiné à un flux, un compteur ou un horaire. */
.onair-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--font-title);
	font-size: 1rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #ff5c6c;
	padding: 0.45rem 1rem 0.45rem 1.2rem;
	border: 2px solid rgba(255, 34, 51, 0.75);
	border-radius: 8px;
	background: rgba(20, 2, 6, 0.55);
	box-shadow: 0 0 18px rgba(255, 34, 51, 0.45), inset 0 0 14px rgba(255, 34, 51, 0.22);
	text-shadow: 0 0 8px rgba(255, 34, 51, 0.9), 0 0 22px rgba(255, 34, 51, 0.55);
	animation: rint-neon-glow 3.2s ease-in-out infinite;
}
.onair-badge::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #ff8291;
	box-shadow: 0 0 10px rgba(255, 34, 51, 0.95);
	flex: none;
}
@keyframes rint-neon-glow {
	0%, 100% { box-shadow: 0 0 18px rgba(255, 34, 51, 0.45), inset 0 0 14px rgba(255, 34, 51, 0.22); }
	50% { box-shadow: 0 0 26px rgba(255, 34, 51, 0.65), inset 0 0 18px rgba(255, 34, 51, 0.3); }
}

/* ---------- Couronne (badge affiche) ---------- */
.crown-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--gold);
	font-size: 1.35rem;
	line-height: 1;
	text-shadow: 0 0 12px rgba(238, 194, 94, 0.65);
	transform: rotate(-8deg);
}

/* ---------- Notes manuscrites dorées ---------- */
.marker-note {
	font-family: var(--font-marker);
	color: var(--gold);
	font-size: 1.15rem;
	letter-spacing: 0.02em;
	transform: rotate(-2.5deg);
	display: inline-block;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.marker-note--light { color: #f5e3ae; }

/* ---------- Séparateur waveform (ondes sonores) ---------- */
.wave-sep {
	height: 28px;
	margin: 1.6rem 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='28' viewBox='0 0 128 28'%3E%3Cg%3E%3Crect x='0' y='10' width='4' height='8' rx='2' fill='%232e7bff'/%3E%3Crect x='9' y='6' width='4' height='16' rx='2' fill='%2335e0ff'/%3E%3Crect x='18' y='3' width='4' height='22' rx='2' fill='%232e7bff'/%3E%3Crect x='27' y='9' width='4' height='10' rx='2' fill='%2335e0ff'/%3E%3Crect x='36' y='1' width='4' height='26' rx='2' fill='%232e7bff'/%3E%3Crect x='45' y='7' width='4' height='14' rx='2' fill='%2335e0ff'/%3E%3Crect x='54' y='11' width='4' height='6' rx='2' fill='%232e7bff'/%3E%3Crect x='63' y='4' width='4' height='20' rx='2' fill='%2335e0ff'/%3E%3Crect x='72' y='8' width='4' height='12' rx='2' fill='%232e7bff'/%3E%3Crect x='81' y='2' width='4' height='24' rx='2' fill='%2335e0ff'/%3E%3Crect x='90' y='10' width='4' height='8' rx='2' fill='%232e7bff'/%3E%3Crect x='99' y='5' width='4' height='18' rx='2' fill='%2335e0ff'/%3E%3Crect x='108' y='9' width='4' height='10' rx='2' fill='%232e7bff'/%3E%3Crect x='117' y='6' width='4' height='16' rx='2' fill='%2335e0ff'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 0.85;
}

/* ---------- Chips de stations (façon autocollants) ---------- */
.station-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
}
.station-chip {
	font-family: var(--font-title);
	font-size: 0.92rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text);
	background: #0d1420;
	border: 2px solid rgba(255, 255, 255, 0.75);
	border-radius: 8px;
	padding: 0.5rem 0.9rem;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.station-chip small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--cyan);
	text-transform: uppercase;
}
.station-chips li:nth-child(odd) .station-chip { transform: rotate(-1.4deg); }
.station-chips li:nth-child(even) .station-chip { transform: rotate(1.2deg); border-color: rgba(53, 224, 255, 0.75); }
.station-chips li:nth-child(3n) .station-chip { border-color: rgba(255, 34, 51, 0.8); }

/* ---------- Titres graffiti / affiche ---------- */
.poster-name {
	font-family: var(--font-title);
	text-transform: uppercase;
	line-height: 0.92;
	margin: 0;
}
.poster-name .name-white {
	display: block;
	color: #ffffff;
	text-shadow: 3px 3px 0 rgba(46, 123, 255, 0.55), 0 10px 34px rgba(0, 0, 0, 0.7);
	transform: rotate(-1.6deg);
	transform-origin: left center;
}
.poster-name .name-red {
	display: block;
	color: var(--neon);
	text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 34, 51, 0.45);
	transform: rotate(-1.6deg);
	transform-origin: left center;
}
.poster-quote {
	font-family: var(--font-marker);
	color: #f5e3ae;
	font-size: clamp(1.15rem, 2.4vw, 1.5rem);
	line-height: 1.45;
	transform: rotate(-1.2deg);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
	max-width: 34ch;
}

/* ---------- HÉROS AFFICHE (page Lawrence) ---------- */
.poster-hero {
	position: relative;
	overflow: hidden;
	padding: 0;
	min-height: min(92vh, 780px);
	display: flex;
	align-items: flex-end;
	background: #04060a;
}
.poster-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* v1.5.9 : nouveau visuel de héros (recomposé de l'affiche
	   « Formations ») : visage, geste et enseigne ON AIR sont
	   dans la zone sûre centre-droite du fichier (env. 60–86 %
	   en largeur, 9–100 % en hauteur); le cadrage 60 % / 20 %
	   garde cette zone dans la fenêtre aux formats courants.
	   (Remplace le cadrage 70 % / 20 % de l'ancien bandeau
	   foule — v1.4.2.) */
	object-position: 60% 20%;
}
.poster-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.52) 0%, rgba(4, 6, 10, 0.12) 34%, rgba(4, 6, 10, 0.88) 78%, var(--bg) 100%),
		linear-gradient(90deg, rgba(4, 6, 10, 0.72) 0%, transparent 55%);
	pointer-events: none;
}
.poster-hero-inner {
	position: relative;
	z-index: 2;
	width: min(1140px, 100% - 2.5rem);
	margin-inline: auto;
	padding: 7.5rem 0 3.2rem;
}
.poster-hero-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.4rem;
}
.poster-name { font-size: clamp(3.4rem, 11vw, 7.6rem); }
.poster-roles {
	font-family: var(--font-title);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	font-size: clamp(0.85rem, 2vw, 1.05rem);
	color: var(--text);
	margin: 1.3rem 0 1rem;
}
.poster-roles b { color: var(--cyan); font-weight: 400; }
.poster-hero .poster-quote { margin: 0.6rem 0 1.6rem; }
.poster-hero-note {
	position: absolute;
	right: 0;
	top: 6.4rem;
	z-index: 2;
	text-align: right;
}
@media (max-width: 860px) {
	.poster-hero-note { display: none; }
	.poster-hero { min-height: 0; }
	.poster-hero-inner { padding-top: 6rem; }
}
@media (max-width: 760px) {
	/* v1.5.9 — héros Lawrence sur téléphone (portrait). Le nouvel
	   visuel de héros est servi en deux variantes par <picture> :
	   la recomposition large (bureau) et une variante PORTRAIT
	   tirée de la même affiche « Formations » (visage et enseigne
	   ON AIR entiers). Sur petit écran, la variante portrait
	   passe EN FLUX, affichée entière à son format naturel en
	   haut du héros; le contenu (titre, rôles, citation, boutons)
	   coule dessous sur le fond noir de scène. Aucun rognage,
	   aucune distorsion.
	   Seuil 760 px : couvre tous les téléphones en portrait
	   (≤ 480 px CSS) avec marge, reste sous les tablettes en
	   portrait (768 px) et les téléphones en paysage (≥ 800 px),
	   qui conservent la composition « cover » du bureau. */
	.poster-hero {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}
	.poster-hero picture {
		display: block;
		width: 100%;
	}
	.poster-hero-img {
		position: static;
		width: 100%;
		height: auto;
		/* height:auto → la boîte suit le ratio naturel de la
		   variante portrait : « initial » (fill) n'a alors aucun
		   effet de distorsion, l'image est montrée entière. */
		object-fit: initial;
		object-position: initial;
	}
	.poster-hero::after {
		/* Voile allégé : transparent sur le bandeau (en haut), il ne
		   sert plus qu'à fondre le bas du héros dans le fond. */
		background: linear-gradient(180deg, rgba(4, 6, 10, 0) 52%, rgba(4, 6, 10, 0.5) 84%, var(--bg) 100%);
	}
	.poster-hero-inner { padding: 2.2rem 0 2.8rem; }
}

/* ---------- Sections « affiche » (page Lawrence) ---------- */
.affiche-kicker {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-family: var(--font-title);
	font-size: 0.8rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 0.8rem;
}
.affiche-kicker::after {
	content: "";
	flex: 0 0 74px;
	height: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='74' height='10' viewBox='0 0 74 10'%3E%3Cg%3E%3Crect x='0' y='3' width='3' height='4' rx='1.5' fill='%232e7bff'/%3E%3Crect x='7' y='1' width='3' height='8' rx='1.5' fill='%2335e0ff'/%3E%3Crect x='14' y='2' width='3' height='6' rx='1.5' fill='%232e7bff'/%3E%3Crect x='21' y='0' width='3' height='10' rx='1.5' fill='%2335e0ff'/%3E%3Crect x='28' y='3' width='3' height='4' rx='1.5' fill='%232e7bff'/%3E%3Crect x='35' y='1' width='3' height='8' rx='1.5' fill='%2335e0ff'/%3E%3Crect x='42' y='2' width='3' height='6' rx='1.5' fill='%232e7bff'/%3E%3Crect x='49' y='0' width='3' height='10' rx='1.5' fill='%2335e0ff'/%3E%3Crect x='56' y='3' width='3' height='4' rx='1.5' fill='%232e7bff'/%3E%3Crect x='63' y='1' width='3' height='8' rx='1.5' fill='%2335e0ff'/%3E%3Crect x='70' y='2' width='3' height='6' rx='1.5' fill='%232e7bff'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
}

/* Chronologie expérience radio */
.xp-list { list-style: none; margin: 2rem 0 0; padding: 0; position: relative; }
.xp-list::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: linear-gradient(180deg, var(--neon), var(--blue), var(--cyan));
	opacity: 0.7;
}
.xp-item {
	position: relative;
	padding: 0 0 1.9rem 2.2rem;
}
.xp-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 3px solid var(--cyan);
	box-shadow: 0 0 10px rgba(53, 224, 255, 0.6);
}
.xp-item:nth-child(even)::before { border-color: var(--neon); box-shadow: 0 0 10px rgba(255, 34, 51, 0.6); }
.xp-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
}
.xp-station {
	font-family: var(--font-title);
	font-size: 1.45rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.xp-dates {
	font-family: var(--font-title);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	color: #06121a;
	background: var(--cyan);
	border-radius: 5px;
	padding: 0.18rem 0.6rem;
}
.xp-item:nth-child(even) .xp-dates { background: var(--neon); color: #ffffff; }
.xp-role { color: var(--muted); font-size: 1.02rem; margin: 0.25rem 0 0; }

/* Compétences : grille à coches rouges */
.skill-grid {
	list-style: none;
	margin: 1.8rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem 2rem;
}
.skill-grid li {
	position: relative;
	padding: 0.7rem 0.9rem 0.7rem 2.4rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	font-weight: 500;
}
.skill-grid li::before {
	content: "✓";
	position: absolute;
	left: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--neon);
	font-weight: 700;
	font-size: 1.1rem;
	text-shadow: 0 0 8px rgba(255, 34, 51, 0.6);
}
@media (max-width: 640px) { .skill-grid { grid-template-columns: 1fr; } }

/* Chips génériques (logiciels, genres, rôles) */
.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	margin: 1.4rem 0 0;
	padding: 0;
}
.chip-list li {
	font-family: var(--font-title);
	font-size: 0.88rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.45rem 0.85rem;
	border: 1px solid rgba(53, 224, 255, 0.45);
	border-radius: 6px;
	background: rgba(46, 123, 255, 0.08);
	color: var(--text);
}
.chip-list--red li { border-color: rgba(255, 34, 51, 0.5); background: rgba(255, 34, 51, 0.07); }

/* Pochette (section Musique) */
.pochette-card {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.2rem;
	transform: rotate(-1deg);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.pochette-card img {
	display: block;
	width: 100%;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.pochette-card figcaption { padding-top: 1rem; }
.pochette-title {
	font-family: var(--font-title);
	font-size: 1.3rem;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 0.3rem;
}
.pochette-card figcaption p { color: var(--muted); margin: 0; }

/* Bandeau photo pleine largeur (page Lawrence, section Équipe — v1.5.9) */
.affiche-bandeau {
	margin: 1.8rem 0 0;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.2rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.affiche-bandeau img {
	display: block;
	width: 100%;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.affiche-bandeau figcaption { padding-top: 1rem; }
.affiche-bandeau figcaption p { color: var(--muted); margin: 0; }
.affiche-bandeau figcaption .pochette-title { color: var(--text); }

/* Liste de chansons vérifiées */
.song-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.song-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0.2rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
}
.song-list a {
	font-family: var(--font-title);
	font-size: 1.02rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
}
.song-list a:hover { color: var(--cyan); }
.song-stats {
	color: var(--muted);
	font-size: 0.88rem;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Bandeau final « STAY » */
.stay-band {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding: 4.5rem 0 4rem;
}
.stay-title {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-size: clamp(2.6rem, 8vw, 5.4rem);
	line-height: 0.98;
	margin: 0;
	transform: rotate(-1.4deg);
}
.stay-title .stay-red {
	color: var(--neon);
	text-shadow: 0 0 24px rgba(255, 34, 51, 0.5), 3px 3px 0 rgba(0, 0, 0, 0.6);
}
.stay-band .waveform { margin-top: 2.4rem; }

/* Bordures « affiche » pour les cartes génériques */
.card { border-width: 1px 1px 1px 3px; border-left-color: rgba(46, 123, 255, 0.55); }
.card-highlight { border-left-color: rgba(255, 34, 51, 0.75); }
.card--presentation { border-left-color: var(--card-border); }

/* ---------- Vidéos intégrées (v1.4.2) ----------
   Lecteurs YouTube officiels en 16:9, dans l'esprit « affiche » :
   carte sombre, liseré bleu électrique, légende sous le lecteur. */
.video-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem;
	margin-top: 2rem;
}
.video-card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-left: 3px solid rgba(46, 123, 255, 0.55);
	border-radius: var(--radius);
	overflow: hidden;
}
.video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}
.video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.video-caption { padding: 0.9rem 1.1rem 1.05rem; }
.video-title {
	font-family: var(--font-title);
	font-size: 1.02rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 0.3rem;
}
.video-meta { color: var(--muted); font-size: 0.9rem; margin: 0; }
@media (max-width: 640px) {
	.video-grid { grid-template-columns: 1fr; }
}

/* ---------- v1.4.3 — banque d'images de Maurence ----------
   Duo de pochettes (page Lawrence), bandeau « STAY » photographique
   et héros de la page des articles (Formation Suno Québec). */

/* Duo de pochettes côte à côte (section Musique) */
.pochette-duo {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem;
	margin-top: 2rem;
	align-items: start;
}
.pochette-duo .pochette-card img { aspect-ratio: 4 / 5; object-fit: cover; }
.pochette-card--tilt-r { transform: rotate(1deg); }
@media (max-width: 640px) {
	.pochette-duo { grid-template-columns: 1fr; }
}

/* Bandeau final « STAY DANS MA TÊTE » : portrait plein cadre,
   voile sombre pour garder le titre HTML lisible par-dessus. */
.stay-band--photo { padding: 7rem 0 5.5rem; }
.stay-band-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
}
.stay-band--photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.58) 0%, rgba(4, 6, 10, 0.38) 40%, rgba(4, 6, 10, 0.86) 82%, var(--bg) 100%),
		linear-gradient(90deg, rgba(4, 6, 10, 0.45) 0%, transparent 50%, rgba(4, 6, 10, 0.45) 100%);
	pointer-events: none;
}
.stay-band-inner { position: relative; z-index: 2; }

/* Héros de la page des articles — « Formation Suno Québec » */
.blog-hero {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	margin-bottom: 2.4rem;
	min-height: min(54vh, 460px);
	display: flex;
	align-items: flex-end;
	background: #04060a;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.blog-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
}
.blog-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(4, 6, 10, 0.42) 0%, rgba(4, 6, 10, 0.18) 38%, rgba(4, 6, 10, 0.9) 84%, rgba(4, 6, 10, 0.97) 100%),
		linear-gradient(90deg, rgba(4, 6, 10, 0.66) 0%, transparent 60%);
	pointer-events: none;
}
.blog-hero-inner {
	position: relative;
	z-index: 2;
	padding: 3.2rem 2rem 2.1rem;
	max-width: 44rem;
}
.blog-hero-title {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-size: clamp(2.3rem, 6vw, 4.1rem);
	line-height: 0.98;
	margin: 0 0 0.9rem;
	text-shadow: 0 4px 28px rgba(0, 0, 0, 0.7);
}
.blog-hero-inner .lead { margin: 0; }

/* ---------- Article de blogue, vue intégrale (v1.4.4) ---------- */
.article-wrap { max-width: 60rem; }
.article-hero { margin-bottom: 1.6rem; }
.article-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.04;
	margin: 0 0 0.7rem;
}
.article-meta {
	color: var(--muted);
	font-size: 0.95rem;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
}
.article-cats a { color: var(--cyan); text-decoration: none; }
.article-cats a:hover { color: #ff5c6c; }
.article-featured { margin: 0 0 2.2rem; }
.article-featured img {
	display: block;
	width: 100%;
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Corps de l'article : colonne de lecture centrée, éléments du
   contenu importé (paragraphes, listes, images, embeds). */
.article-content { margin-inline: auto; font-size: 1.05rem; }
.article-content p { margin: 0 0 1.15em; }
.article-content h2 { font-size: 1.7rem; margin-top: 2.4rem; }
.article-content h3 { font-size: 1.35rem; margin-top: 2rem; }
.article-content h4 { font-size: 1.12rem; margin-top: 1.6rem; }
.article-content ul, .article-content ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.article-content li { margin-bottom: 0.4em; }
.article-content li::marker { color: var(--cyan); }
.article-content blockquote {
	margin: 1.6rem 0;
	padding: 0.4rem 0 0.4rem 1.2rem;
	border-left: 3px solid var(--cyan);
	color: var(--text);
	font-size: 1.08rem;
}
.article-content img {
	border-radius: 8px;
}
.article-content figure { margin: 1.8rem 0; }
.article-content figcaption {
	color: var(--muted);
	font-size: 0.88rem;
	text-align: center;
	margin-top: 0.5rem;
}
.article-content .aligncenter { display: block; margin-inline: auto; }
.article-content .alignleft { float: left; margin: 0.3rem 1.2rem 1rem 0; }
.article-content .alignright { float: right; margin: 0.3rem 0 1rem 1.2rem; }
.article-content iframe,
.article-content embed,
.article-content object,
.article-content video { max-width: 100%; }
.article-content .wp-block-embed { margin: 1.8rem 0; }
.article-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.article-content .wp-block-embed-videopress .wp-block-embed__wrapper,
.article-content .wp-block-embed-video .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}
.article-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.article-content .wp-block-embed-videopress .wp-block-embed__wrapper iframe,
.article-content .wp-block-embed-video .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
}
.article-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.6rem 0;
	font-size: 0.97rem;
}
.article-content th, .article-content td {
	border: 1px solid var(--card-border);
	padding: 0.55rem 0.8rem;
	text-align: left;
}
.article-content th { background: var(--bg-elev); font-family: var(--font-title); letter-spacing: 0.04em; }
.article-content pre {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 1rem 1.2rem;
	overflow-x: auto;
	font-size: 0.92rem;
}
.article-content code { font-size: 0.92em; }
.article-content hr {
	border: 0;
	border-top: 1px solid var(--card-border);
	margin: 2.2rem 0;
}
.article-content .pages-links { margin-top: 2.5rem; }

/* Pied d'article : retour au blogue + navigation précédent/suivant. */
.article-footer {
	max-width: 46rem;
	margin: 3rem auto 0;
	border-top: 1px solid var(--card-border);
	padding-top: 1.8rem;
}
.article-back { margin: 0 0 1.6rem; }
.post-nav {
	display: flex;
	gap: 0.8rem;
	justify-content: space-between;
}
.post-nav > div { flex: 1 1 0; display: flex; }
.post-nav-next { justify-content: flex-end; text-align: right; }
.post-nav a {
	display: block;
	width: 100%;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--text);
	background: var(--card);
}
.post-nav a:hover { border-color: var(--cyan); }
.post-nav-label {
	display: block;
	font-family: var(--font-title);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cyan);
	margin-bottom: 0.35rem;
}
.post-nav-title { font-weight: 600; line-height: 1.35; }
@media (max-width: 640px) {
	.post-nav { flex-direction: column; }
	.post-nav-next { text-align: left; }
	.article-content .alignleft, .article-content .alignright { float: none; margin: 0 0 1rem; }
}

/* ============================================================
   v1.4.5 — RÉCEPTIONNISTE IA : panneau de la démo vocale
   (page /receptionniste-ia/ seulement). Direction « Affiche » :
   panneau sombre de studio, enseigne ON AIR au néon rouge,
   bulles visiteur cyan / réceptionniste carte sombre.
   ============================================================ */
.recept-panel {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.6rem;
	margin-top: 2rem;
}
.recept-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.2rem;
}
.recept-sign {
	font-family: var(--font-title);
	font-size: 0.85rem;
	letter-spacing: 0.22em;
	color: var(--muted);
	border: 1px solid var(--card-border);
	border-radius: 6px;
	padding: 0.35rem 0.8rem;
}
.recept-sign.is-on {
	color: #fff;
	background: var(--neon);
	border-color: var(--neon);
	box-shadow: 0 0 18px rgba(255, 34, 51, 0.65), 0 0 42px rgba(255, 34, 51, 0.3);
	animation: rint-rec-pulse 1.1s ease-in-out infinite;
}
@keyframes rint-rec-pulse {
	0%, 100% { box-shadow: 0 0 18px rgba(255, 34, 51, 0.65), 0 0 42px rgba(255, 34, 51, 0.3); }
	50% { box-shadow: 0 0 10px rgba(255, 34, 51, 0.4), 0 0 24px rgba(255, 34, 51, 0.18); }
}
.recept-statut { color: var(--muted); font-size: 0.98rem; }
.recept-journal {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	max-height: 380px;
	overflow-y: auto;
	padding: 1rem;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
}
.recept-msg {
	max-width: 88%;
	padding: 0.7rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--card-border);
}
.recept-msg p { margin: 0; }
.recept-msg-role {
	display: block;
	font-family: var(--font-title);
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 0.3rem;
}
.recept-msg--visiteur {
	align-self: flex-end;
	border-color: rgba(53, 224, 255, 0.45);
	background: rgba(53, 224, 255, 0.07);
}
.recept-msg--visiteur .recept-msg-role { color: var(--cyan); }
.recept-msg--recept {
	align-self: flex-start;
	background: var(--card);
}
.recept-msg--recept .recept-msg-role { color: var(--gold); }
.recept-erreur {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(255, 34, 51, 0.55);
	border-radius: 8px;
	background: rgba(255, 34, 51, 0.08);
	color: var(--text);
}
.recept-controles {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 1.2rem;
}
.btn.is-listening {
	background: var(--neon);
	border-color: var(--neon);
	color: #fff;
	animation: rint-rec-pulse 1.1s ease-in-out infinite;
}
.recept-note {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border: 1px dashed rgba(238, 194, 94, 0.5);
	border-radius: 8px;
	color: var(--muted);
}
.recept-form { margin-top: 1.4rem; }
.recept-form .form-row { margin-bottom: 0; }
.recept-form-row { display: flex; gap: 0.7rem; }
.recept-form-row input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	color: var(--text);
	padding: 0.75rem 1rem;
	font: inherit;
}
.recept-form-row input[type="text"]:focus {
	outline: 2px solid var(--cyan);
	outline-offset: 2px;
}
.recept-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem;
	margin-top: 1.3rem;
}
.recept-chips-label { color: var(--muted); font-weight: 600; }
.recept-chips button {
	font: inherit;
	font-size: 0.92rem;
	color: var(--cyan);
	background: rgba(53, 224, 255, 0.06);
	border: 1px solid rgba(53, 224, 255, 0.4);
	border-radius: 999px;
	padding: 0.4rem 0.95rem;
	cursor: pointer;
}
.recept-chips button:hover { border-color: var(--cyan); color: #fff; }
.recept-confidentialite {
	margin: 1.3rem 0 0;
	color: var(--muted);
	font-size: 0.9rem;
}
@media (max-width: 640px) {
	.recept-panel { padding: 1.1rem; }
	.recept-msg { max-width: 96%; }
	.recept-form-row { flex-direction: column; }
	.recept-form-row .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.recept-sign.is-on, .btn.is-listening { animation: none; }
}

/* ============================================================
   v1.4.6 — Musique, Palmarès, Salle de presse, en-têtes Affiche,
   compte à rebours d'événements.
   ============================================================ */

/* Image de fond d'un héros (réglée au Personnaliseur; absente
   par défaut — aucun changement visuel si rien n'est réglé). */
.hero { position: relative; }
.hero-fond-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.26;
	pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }

/* ---------- Page Musique ---------- */
.musique-recherche {
	margin: 2rem 0 0.5rem;
	max-width: 34rem;
}
.musique-recherche label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.45rem;
}
.musique-recherche input[type="search"] {
	width: 100%;
	font: inherit;
	color: var(--text);
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.7rem 1rem;
}
.musique-recherche input[type="search"]:focus {
	border-color: var(--cyan);
	outline: none;
}
.musique-compteur {
	color: var(--gold);
	font-family: var(--font-marker);
	margin: 0.6rem 0 0;
	min-height: 1.4em;
}
.catalogue-plus {
	margin-top: 1.6rem;
	text-align: center;
}
.catalogue-plus .musique-compteur {
	margin: 0 0 0.8rem;
}
.pl-chargement {
	color: var(--gold);
	font-family: var(--font-marker);
	padding: 0.6rem 0;
}
.musique-playlist { margin-top: 2.6rem; }
.musique-playlist-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.4rem 1.2rem;
	border-bottom: 1px solid var(--card-border);
	padding-bottom: 0.4rem;
}
.musique-playlist-entete .subsection-title { margin-top: 0; }
.musique-nb {
	font-family: var(--font-marker);
	font-size: 0.95rem;
	color: var(--gold);
	text-transform: none;
	letter-spacing: 0;
	margin-left: 0.6rem;
	white-space: nowrap;
}
.musique-mixte { margin: 0.9rem 0 0.2rem; color: var(--muted); }
.musique-mixte .pill { margin-right: 0.6rem; }
.musique-liste {
	margin: 0.8rem 0 0;
	padding-left: 1.4rem;
	columns: 2;
	column-gap: 2.5rem;
}
.musique-liste li {
	break-inside: avoid;
	margin-bottom: 0.32rem;
}
.musique-liste a { text-decoration: none; }
.musique-liste a:hover { text-decoration: underline; }
.musique-artiste { color: var(--muted); }
@media (max-width: 720px) {
	.musique-liste { columns: 1; }
}

/* ---------- Catalogue complet (page Musique, v1.4.9) ---------- */
.catalogue-index {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 1.1rem 0 0.4rem;
}
.catalogue-lettre {
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	padding: 0.3rem 0.62rem;
	border-radius: 999px;
	border: 1px solid var(--card-border);
	background: var(--card);
	color: var(--text);
	cursor: pointer;
}
.catalogue-lettre:hover { border-color: var(--cyan); }
.catalogue-lettre.est-actif {
	border-color: var(--gold);
	color: var(--gold);
}
.catalogue-liste { columns: 3; }
@media (max-width: 1000px) {
	.catalogue-liste { columns: 2; }
}
@media (max-width: 720px) {
	.catalogue-liste { columns: 1; }
}

/* ---------- Palmarès ---------- */
.palmares-statut { color: var(--muted); font-style: italic; }
.palmares-classement {
	margin: 0.6rem 0 0;
	padding-left: 1.5rem;
	font-size: 1.05rem;
}
.palmares-classement li { margin-bottom: 0.3rem; }
.palmares-classement a { text-decoration: none; }
.palmares-classement a:hover { text-decoration: underline; }
.palmares-liste {
	list-style: none;
	margin: 1.6rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 0.55rem 1.4rem;
}
.palmares-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 0.55rem 0.8rem;
}
.palmares-titre {
	flex: 1 1 auto;
	text-decoration: none;
	color: var(--text);
	font-weight: 600;
}
.palmares-titre:hover { color: var(--cyan); }
.palmares-votes { color: var(--muted); white-space: nowrap; font-size: 0.92rem; }
.palmares-nombre { color: var(--gold); font-weight: 700; }
.palmares-voter { white-space: nowrap; }
.palmares-voter[disabled] {
	opacity: 0.65;
	cursor: default;
	color: var(--gold);
	border-color: rgba(238, 194, 94, 0.5);
}

/* ---------- Compte à rebours d'événement ---------- */
.evenement-section { background: var(--bg-elev); border-block: 1px solid var(--card-border); }
.evenement-date {
	font-family: var(--font-marker);
	color: var(--gold);
	font-size: 1.15rem;
	margin-bottom: 1.6rem;
}
.compte-rebours {
	display: flex;
	justify-content: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}
.cr-bloc {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	min-width: 5.2rem;
	padding: 0.8rem 0.6rem 0.65rem;
}
.cr-nombre {
	display: block;
	font-family: var(--font-title);
	font-size: 2rem;
	line-height: 1.1;
	color: var(--cyan);
}
.cr-label {
	display: block;
	color: var(--muted);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* ---------- Salle de presse ---------- */
.presse-date {
	font-family: var(--font-marker);
	color: var(--gold);
	margin-bottom: 0.4rem;
}
.presse-carte-titre { font-size: 1.3rem; }
.presse-carte-titre a { color: var(--text); text-decoration: none; }
.presse-carte-titre a:hover { color: var(--cyan); }
.presse-vide .lead { margin-inline: auto; }
.presse-contact { margin-top: 1.4rem; }

/* ---------- Newsroom multi-auteurs (v1.5.0) ---------- */

/* Portrait d'auteur : image locale de la médiathèque, ou
   monogramme stylé quand aucun portrait n'est réglé (repli
   honnête — jamais une fausse photo). */
.author-portrait { object-fit: cover; }
.author-monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gradient);
	color: #fff;
	font-family: var(--font-title);
	letter-spacing: 0.05em;
	line-height: 1;
	flex: 0 0 auto;
}

/* Byline d'article : photo, nom lié, fonction, courte bio, dates. */
.article-byline {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-top: 1.4rem;
	padding: 1.1rem 1.2rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
}
.byline-portrait { flex: 0 0 auto; line-height: 0; }
.byline-photo { border-radius: 50%; }
.article-byline .author-monogram { border-radius: 50%; }
.byline-body { min-width: 0; }
.byline-name {
	margin: 0;
	font-family: var(--font-title);
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}
.byline-name a { color: var(--text); text-decoration: none; }
.byline-name a:hover { color: var(--cyan); }
.byline-fonction { margin: 0.15rem 0 0; color: var(--gold); font-size: 0.92rem; }
.byline-bio { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.95rem; }
.byline-dates { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.85rem; }
.byline-maj::before { content: "·"; margin: 0 0.35rem; }

/* Ligne d'intégrité éditoriale : discrète, au pied de l'article.
   Absente du code source quand les quatre champs sont vides. */
.article-integrite {
	color: var(--muted);
	font-size: 0.85rem;
	margin: 0 0 1.6rem;
}

/* Nom de l'auteur dans la méta des cartes du blogue. */
.card-author a { color: var(--cyan); text-decoration: none; }
.card-author a:hover { color: #ff5c6c; }

/* Page auteur : fiche de la signature + ses articles. */
.author-wrap { max-width: 72rem; }
.author-card {
	display: flex;
	gap: 1.8rem;
	flex-wrap: wrap;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 2rem;
	margin-bottom: 2.6rem;
}
.author-card-portrait { flex: 0 0 auto; line-height: 0; }
.author-card-portrait .author-portrait { border-radius: var(--radius); }
.author-card-portrait .author-monogram { border-radius: var(--radius); }
.author-card-body { flex: 1 1 22rem; min-width: 0; }
.author-name {
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.04;
	margin: 0 0 0.4rem;
}
.author-fonction { color: var(--gold); font-size: 1.05rem; margin: 0 0 1rem; }
.author-bio { color: var(--text); }
.author-bio p { margin: 0 0 0.9em; }
.author-subtitle {
	font-size: 1.05rem;
	margin: 1.4rem 0 0.6rem;
	letter-spacing: 0.03em;
}
.author-specialites {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.author-specialites li {
	border: 1px solid rgba(53, 224, 255, 0.4);
	color: var(--cyan);
	border-radius: 999px;
	padding: 0.25rem 0.8rem;
	font-size: 0.88rem;
}
.author-reseaux {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.2rem;
}
.author-reseaux a { color: var(--cyan); text-decoration: none; font-weight: 600; }
.author-reseaux a:hover { color: #ff5c6c; }
.author-articles-title { font-size: 1.7rem; margin: 0 0 0.4rem; }
.author-empty { color: var(--muted); }

@media (max-width: 640px) {
	.article-byline { flex-direction: column; }
	.author-card { padding: 1.4rem; }
}

/* ==================================================================
   Link Analyzer intégré (v1.5.1) — l'outil vit dans la page.
   Préfixe .la- : aucun style hérité n'est modifié.
   ================================================================== */
.la-tool { text-align: left; }
.la-label {
	display: block;
	font-family: var(--font-title);
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}
.la-url-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: center;
	margin-bottom: 1rem;
}
.la-input {
	flex: 1 1 22rem;
	min-width: 0;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	color: var(--text);
	font: inherit;
	padding: 0.75rem 1rem;
}
.la-input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.la-file-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.la-import-btn { cursor: pointer; }
.la-rights {
	border: 1px solid rgba(238, 194, 94, 0.45);
	border-radius: var(--radius);
	padding: 0.8rem 1rem;
	margin-bottom: 1rem;
	color: var(--text);
}
.la-rights input { margin-right: 0.5rem; }
.la-message {
	border-radius: var(--radius);
	padding: 0.7rem 1rem;
	margin: 0 0 1rem;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
}
.la-message-erreur { border-color: var(--neon); color: #ffb3ba; }
.la-message-succes { border-color: var(--cyan); }
.la-message-info { border-color: var(--gold); }
.la-etapes {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.4rem;
	padding: 0;
}
.la-etape span {
	display: inline-block;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	color: var(--muted);
	font-size: 0.9rem;
}
.la-etape.en-cours span { border-color: var(--gold); color: var(--gold); }
.la-etape.est-faite span { border-color: var(--cyan); color: var(--cyan); }
.la-etape.est-bloquee span { border-color: var(--neon); color: #ff8f9a; }
.la-result-title { font-size: 1.35rem; margin: 0 0 0.6rem; }
.la-classe { font-size: 1.12rem; margin: 0 0 0.3rem; }
.la-classe strong { color: var(--cyan); }
.la-subtitle {
	font-size: 1.02rem;
	margin: 1.3rem 0 0.5rem;
	letter-spacing: 0.02em;
}
.la-grid {
	display: grid;
	grid-template-columns: minmax(9rem, 13rem) 1fr;
	gap: 0.35rem 1.2rem;
	margin: 0;
}
.la-grid dt { color: var(--gold); font-weight: 600; }
.la-grid dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.la-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
.la-conversion { margin: 0; padding-left: 1.2rem; color: var(--text); }
.la-conversion li { margin-bottom: 0.25rem; }

@media (max-width: 640px) {
	.la-grid { grid-template-columns: 1fr; }
	.la-grid dt { margin-top: 0.5rem; }
}

/* ---------- Plateforme intégrée (v1.5.2) ---------- */
.pf-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.6rem;
}
.pf-nav a {
	border: 1px solid var(--card-border);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	color: var(--text);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	background: rgba(255, 255, 255, 0.03);
}
.pf-nav a:hover { border-color: var(--cyan); color: var(--cyan); }
.pf-module { scroll-margin-top: calc(var(--header-h) + 12px); }
.pf-perimetre {
	border-left: 3px solid var(--gold);
	padding: 0.45rem 0.9rem;
	background: rgba(238, 194, 94, 0.07);
	color: var(--text);
	max-width: 62rem;
}
.pf-bloc {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.2rem 1.3rem;
	margin: 1.2rem 0;
}
.pf-bloc h3 { margin-top: 0; }
.pf-label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.4rem;
	letter-spacing: 0.02em;
}
.pf-input {
	width: 100%;
	box-sizing: border-box;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	color: var(--text);
	padding: 0.6rem 0.8rem;
	font: inherit;
}
.pf-input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
textarea.pf-texte { resize: vertical; min-height: 8rem; }
.pf-rangee {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	align-items: flex-end;
	margin: 0.6rem 0;
}
.pf-grand { flex: 1 1 22rem; }
.pf-champ { flex: 1 1 12rem; }
.pf-case {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 600;
	cursor: pointer;
}
.pf-msg { min-height: 1.2em; color: var(--cyan); font-weight: 600; }
.pf-msg-erreur { color: var(--neon); }
.pf-liste { list-style: none; margin: 0.6rem 0; padding: 0; }
.pf-liste > li { margin-bottom: 0.5rem; }
.pf-source {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.55rem 0.8rem;
}
.pf-source-infos { flex: 1 1 18rem; display: flex; flex-direction: column; }
.pf-source-meta { color: var(--muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.pf-petit-bouton { padding: 0.25rem 0.7rem; font-size: 0.88rem; }
.pf-bouton-fichier { cursor: pointer; display: inline-block; }
.pf-file-item {
	display: flex;
	flex-direction: column;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.5rem 0.8rem;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
}
.pf-file-bouton { cursor: pointer; color: var(--text); font: inherit; }
.pf-file-bouton:hover { border-color: var(--cyan); }
.pf-file-courante { border-color: var(--neon); box-shadow: 0 0 0 1px var(--neon); }
.pf-file-titre { font-weight: 700; }

/* Régie */
.pf-regie-boite {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.2rem 1.3rem;
	margin: 1.2rem 0;
}
.pf-regie-ecran {
	background: #000;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.pf-regie-ecran iframe { width: 100%; height: 240px; border: 0; }
.pf-regie-ecran #pf-regie-yt { width: 100%; aspect-ratio: 16 / 9; }
.pf-regie-ecran #pf-regie-yt iframe { width: 100%; height: 100%; }
.pf-regie-vide { color: var(--muted); text-align: center; padding: 2rem 1rem; }
#pf-regie-audio-face { text-align: center; padding: 1.5rem 1rem; }
.pf-audio-disque { font-size: 2.4rem; color: var(--neon); margin: 0; }
.pf-regie-infos { margin-top: 1rem; }
.pf-now-etiquette {
	font-family: var(--font-title);
	letter-spacing: 0.08em;
	color: var(--neon);
	margin: 0.6rem 0 0.15rem;
	font-size: 0.85rem;
}
.pf-now-titre { font-size: 1.25rem; font-weight: 700; margin: 0; }
.pf-transport {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin-top: 1rem;
}
.pf-vol-ligne { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.pf-regie-note { color: var(--muted); max-width: 62rem; }
.pf-deux-colonnes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.4rem;
}
@media (max-width: 820px) {
	.pf-deux-colonnes { grid-template-columns: 1fr; }
}

/* Studio */
.pf-rec-temps { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.1rem; }
.pf-prise {
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.7rem 0.9rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pf-prise audio { width: 100%; }
.pf-prise-liens { display: flex; gap: 0.9rem; align-items: center; }
.pf-analyse-liste { margin: 0.4rem 0; padding-left: 1.2rem; }
.pf-resume {
	border-left: 3px solid var(--cyan);
	margin: 0.6rem 0;
	padding: 0.4rem 0.9rem;
	background: rgba(53, 224, 255, 0.05);
}
.pf-bande {
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.7rem 0.9rem;
	margin-bottom: 0.6rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}
.pf-bande strong { flex: 1 1 12rem; }
.pf-bande input[type="range"] { flex: 1 1 10rem; }
.pf-bande-boutons { display: flex; gap: 0.5rem; }
.pf-bande-boutons button[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); }

/* Analytics */
.pf-ana-total { font-size: 1.3rem; font-weight: 700; }
.pf-ana-liste li { padding: 0.3rem 0; border-bottom: 1px dashed var(--card-border); }

/* ---------- Actions par chanson, zone d'écoute, répertoires (page Musique, v1.5.3) ---------- */
.chanson-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-left: 0.55rem;
	vertical-align: middle;
}
.chanson-btn {
	font: inherit;
	font-size: 0.8rem;
	line-height: 1.25;
	padding: 0.16rem 0.55rem;
	border-radius: 999px;
	border: 1px solid var(--card-border);
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	white-space: nowrap;
}
.chanson-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.palmares-item .chanson-actions { flex: 1 1 100%; margin-left: 0; }

.zone-ecoute-piste {
	font-family: var(--font-marker);
	font-size: 1.25rem;
	color: var(--gold);
	margin: 0.4rem 0 0.8rem;
}
.zone-ecoute-lecteur iframe {
	width: 100%;
	height: 240px;
	border: 0;
	border-radius: var(--radius);
	background: #000;
	display: block;
}
.zone-ecoute-statut { color: var(--muted); font-style: italic; }

.rint-menu {
	position: fixed;
	z-index: 999;
	min-width: 240px;
	max-width: 88vw;
	max-height: 80vh;
	overflow-y: auto;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 0.45rem;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.rint-menu-item {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 0.95rem;
	text-align: left;
	padding: 0.45rem 0.6rem;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	color: var(--text);
	text-decoration: none;
	cursor: pointer;
}
.rint-menu-item:hover { background: var(--bg-elev); color: var(--cyan); }
.rint-menu-statut {
	font-size: 0.85rem;
	color: var(--muted);
	margin: 0;
	padding: 0.35rem 0.6rem;
}
.rint-menu-sep { border-top: 1px solid var(--card-border); margin: 0.35rem 0; }

.rep-statut { color: var(--muted); font-style: italic; min-height: 1.2em; }
.rep-carte {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1rem 1.1rem;
	margin-bottom: 1rem;
}
.rep-entete { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.rep-nom { margin: 0; }
.rep-compte { color: var(--gold); font-weight: 700; white-space: nowrap; }
.rep-liste { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.rep-ligne {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	padding: 0.32rem 0;
	border-bottom: 1px dashed var(--card-border);
}
.rep-ligne a { flex: 1 1 12rem; text-decoration: none; }
.rep-ligne a:hover { text-decoration: underline; }
.rep-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; }

/* ============================================================
   Scratch Lab intégré (v1.5.4) — l’outil vit dans la page.
   Console deux platines : A cyan, B rose (vocabulaire des
   planches), fond de scène noir, néon rouge en accent global.
   ============================================================ */
.sl-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sl-message { min-height: 1.2em; color: var(--cyan); font-weight: 600; }
.sl-console {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem;
	align-items: start;
}
.sl-deck {
	--acc: var(--cyan);
	background: var(--card);
	border: 1px solid var(--card-border);
	border-top: 3px solid var(--acc);
	border-radius: var(--radius);
	padding: 1rem 1.1rem 1.1rem;
	text-align: left;
}
.sl-deck-b { --acc: #ff4d94; }
.sl-deck-entete {
	display: flex;
	align-items: baseline;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-bottom: 0.8rem;
}
.sl-platine-chip {
	font-family: var(--font-title);
	letter-spacing: 0.06em;
	color: var(--acc);
	border: 1px solid var(--acc);
	border-radius: 0.4rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.85rem;
}
.sl-nom { font-weight: 700; flex: 1 1 10rem; overflow-wrap: anywhere; }
.sl-temps { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-disque-zone { text-align: center; }
.sl-disque {
	width: 188px;
	height: 188px;
	margin: 0 auto;
	border-radius: 50%;
	border: 3px solid var(--acc);
	background:
		radial-gradient(circle at 50% 50%, #131a26 0 26%, transparent 27%),
		repeating-radial-gradient(circle at 50% 50%, #0a0e15 0 4px, #111826 4px 6px);
	box-shadow: 0 0 22px rgba(0, 0, 0, 0.65), 0 0 14px -4px var(--acc);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.sl-disque.sl-gratte { cursor: grabbing; box-shadow: 0 0 22px rgba(0, 0, 0, 0.65), 0 0 26px -2px var(--acc); }
.sl-disque-etiquette {
	font-family: var(--font-title);
	font-size: 1.6rem;
	color: var(--bg);
	background: var(--acc);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.sl-disque-aide { margin: 0.5rem 0 0.8rem; }
.sl-forme {
	width: 100%;
	height: 74px;
	display: block;
	background: #070a10;
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	cursor: pointer;
	touch-action: none;
}
.sl-transport {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin: 0.8rem 0;
}
.sl-charge {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-bottom: 0.9rem;
}
.sl-fichier-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sl-controles { display: grid; gap: 0.55rem; margin-bottom: 0.9rem; }
.sl-controle {
	display: grid;
	grid-template-columns: 8.2rem 1fr 7.2rem;
	align-items: center;
	gap: 0.6rem;
}
.sl-controle label, .sl-etiquette { font-weight: 600; font-size: 0.92rem; }
.sl-controle input[type="range"] { width: 100%; accent-color: var(--acc); }
.sl-controle input[type="number"] {
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 0.5rem;
	color: var(--text);
	padding: 0.4rem 0.5rem;
	width: 6.2rem;
}
.sl-controle-bpm { grid-template-columns: 8.2rem 1fr; }
.sl-controle-bpm .sl-val { grid-column: 2; }
.sl-controle-bpm input[type="number"] { margin-right: 0.4rem; }
.sl-val { color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.sl-groupe {
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 0.7rem 0.9rem 0.9rem;
	margin: 0 0 0.9rem;
	display: grid;
	gap: 0.55rem;
}
.sl-groupe legend {
	font-family: var(--font-title);
	letter-spacing: 0.05em;
	font-size: 0.85rem;
	color: var(--muted);
	padding: 0 0.4rem;
}
.sl-boucles { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.sl-actif {
	border-color: var(--cyan) !important;
	color: var(--cyan) !important;
	background: var(--bg-elev);
}
.sl-mixeur {
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
	text-align: left;
}
.sl-mixeur-bloc { flex: 1 1 16rem; display: grid; gap: 0.45rem; align-content: start; }
.sl-mixeur-bloc label, .sl-mixeur-bloc .sl-etiquette { font-weight: 700; }
.sl-mixeur-bloc input[type="range"] { width: 100%; accent-color: var(--neon); }
.sl-xfade-bloc input[type="range"] { accent-color: var(--gold); }
.sl-niveau { width: 100%; max-width: 260px; height: 18px; display: block; border: 1px solid var(--card-border); border-radius: 0.3rem; }
.sl-pads { display: flex; gap: 0.5rem; flex-wrap: wrap; }
@media (max-width: 900px) {
	.sl-console { grid-template-columns: 1fr; }
	.sl-controle { grid-template-columns: 6.6rem 1fr 5.6rem; }
	.sl-controle-bpm { grid-template-columns: 6.6rem 1fr; }
	.sl-disque { width: 160px; height: 160px; }
}

/* ============================================================
   Lecteur URL to URL — page /ecouter/ (v1.5.6)
   Le vrai lecteur porté de l'artefact d'atelier : scène sombre
   Affiche, néon rouge, ondes cyan. Préfixe .lec- pour tout ce
   qui est propre au lecteur (ids lec-* dans le modèle).
   ============================================================ */
.lec-scene {
	background: linear-gradient(180deg, #070a10, #04060a);
	border: 1px solid var(--card-border);
	border-radius: 18px;
	padding: 1.4rem;
	margin-top: 1.6rem;
	text-align: left;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.lec-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.lec-marque {
	font-family: var(--font-title);
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	line-height: 1.1;
}
.lec-marque span { color: var(--neon); }
.lec-marque small {
	display: block;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--muted);
	margin-top: 0.25rem;
}
.lec-onair-note {
	color: var(--muted);
	font-size: 0.88rem;
	margin: 0.7rem 0 0;
	max-width: 46rem;
}
.lec-modes { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.lec-mode {
	font-family: var(--font-title);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.92rem;
	color: var(--text);
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 999px;
	padding: 0.5rem 1.1rem;
	cursor: pointer;
}
.lec-mode:hover { border-color: var(--cyan); color: var(--cyan); }
.lec-mode[aria-pressed="true"] {
	background: linear-gradient(120deg, #d90429, #e00e24); /* v2.2.0 : même correction AA que .btn-primary (texte blanc) */
	border-color: transparent;
	color: #fff;
}
.lec-deck { margin-top: 1.2rem; }
.lec-maintenant { display: grid; gap: 0.15rem; margin-bottom: 0.8rem; }
.lec-etiquette {
	font-family: var(--font-title);
	font-size: 0.78rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cyan);
}
.lec-titre { font-size: 1.3rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lec-meta { color: var(--muted); font-size: 0.92rem; }
.lec-cadre {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 7;
	min-height: 190px;
	background: #000;
	border: 1px solid var(--card-border);
	border-radius: 12px;
	overflow: hidden;
}
.lec-cadre iframe, .lec-cadre #lec-yt, .lec-cadre #lec-yt iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.lec-vide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	padding: 1rem;
	color: var(--muted);
	background: radial-gradient(ellipse at center, #0a0e15 0%, #000 75%);
}
.lec-vide[hidden] { display: none; }
.lec-vide-titre { font-family: var(--font-title); font-size: 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.lec-audio-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	text-align: center;
	padding: 1rem;
	background: radial-gradient(ellipse at center, #0a0e15 0%, #000 75%);
}
.lec-audio-face[hidden] { display: none; }
.lec-disque {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, #10141c 0 3px, #05070b 3px 6px);
	border: 2px solid rgba(255, 34, 51, 0.55);
	box-shadow: 0 0 22px rgba(53, 224, 255, 0.25);
	position: relative;
}
.lec-disque::after {
	content: "";
	position: absolute;
	inset: 38%;
	border-radius: 50%;
	background: var(--neon);
}
.lec-disque.lec-tourne { animation: lec-rotation 2.4s linear infinite; }
@keyframes lec-rotation { to { transform: rotate(360deg); } }
.lec-audio-nom { font-weight: 700; overflow-wrap: anywhere; }
.lec-lien-source { color: var(--cyan); font-weight: 600; font-size: 0.92rem; }
.lec-lien-source:hover { color: #ff5c6c; }
.lec-note { color: var(--muted); font-size: 0.92rem; margin: 0.8rem 0 0; }
.lec-note b { color: var(--text); }
.lec-transport {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex-wrap: wrap;
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--card-border);
}
.lec-tbtn {
	font-family: var(--font-title);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.95rem;
	color: var(--text);
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 0.6rem 1rem;
	cursor: pointer;
}
.lec-tbtn:hover { border-color: var(--cyan); color: var(--cyan); }
.lec-tbtn.lec-principal {
	background: linear-gradient(120deg, #d90429, #e00e24); /* v2.2.0 : même correction AA que .btn-primary (texte blanc) */
	border-color: transparent;
	color: #fff;
	padding: 0.6rem 1.4rem;
}
.lec-vol { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-left: auto; }
.lec-vol input[type="range"] { accent-color: var(--neon); width: 130px; }
.lec-vol-note { color: var(--gold); font-size: 0.9rem; }
.lec-panneau { margin-top: 2.2rem; }
.lec-panneau:first-of-type { margin-top: 0; }
.lec-panneau h3 { font-size: 1.35rem; }
.lec-sous { color: var(--muted); }
.lec-panneau label { font-weight: 600; display: block; margin-top: 0.6rem; }
.lec-panneau select, .lec-panneau input[type="text"], .lec-panneau input[type="url"] {
	width: 100%;
	max-width: 34rem;
	background: var(--bg-elev);
	color: var(--text);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	padding: 0.55rem 0.8rem;
	font: inherit;
	margin-top: 0.4rem;
}
.lec-panneau select:focus, .lec-panneau input:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.lec-rangee { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.lec-rangee input[type="url"] { flex: 1 1 20rem; margin-top: 0; }
.lec-abtn {
	font-family: var(--font-title);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.92rem;
	color: var(--text);
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 0.6rem 1.1rem;
	cursor: pointer;
}
.lec-abtn:hover { border-color: var(--cyan); color: var(--cyan); }
.lec-abtn.lec-rouge {
	background: linear-gradient(120deg, #d90429, #e00e24); /* v2.2.0 : même correction AA que .btn-primary (texte blanc) */
	border-color: transparent;
	color: #fff;
}
.lec-pistes, .lec-attente { list-style: none; margin: 1rem 0 0; padding: 0; }
.lec-pistes > li, .lec-attente > li { margin-bottom: 0.4rem; }
.lec-piste {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	text-align: left;
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
	font: inherit;
	cursor: pointer;
}
.lec-piste:hover { border-color: var(--cyan); }
.lec-piste.lec-courante { border-color: var(--neon); box-shadow: 0 0 12px rgba(255, 34, 51, 0.35); }
.lec-piste-vide { cursor: default; color: var(--muted); }
.lec-piste-vide:hover { border-color: var(--card-border); }
.lec-n { font-family: var(--font-title); color: var(--cyan); min-width: 2rem; }
.lec-t { flex: 1; overflow-wrap: anywhere; }
.lec-genre { color: var(--gold); font-size: 0.85rem; font-weight: 600; }
.lec-attente > li {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
}
.lec-pos { font-family: var(--font-title); color: var(--neon); min-width: 2rem; }
.lec-attente-titre { flex: 1; overflow-wrap: anywhere; }
.lec-attente-liste { color: var(--muted); font-size: 0.88rem; }
h4.lec-attente-titre { font-size: 1rem; margin: 1.2rem 0 0; text-transform: uppercase; letter-spacing: 0.06em; }
.lec-msg { min-height: 1.2em; color: var(--cyan); font-weight: 600; }
.lec-msg.lec-err { color: var(--neon); }
.lec-note-vide { color: var(--muted); }
@media (max-width: 700px) {
	.lec-scene { padding: 1rem; }
	.lec-cadre { aspect-ratio: 16 / 10; }
	.lec-vol { margin-left: 0; }
}

/* ============================================================
   Page Musique — version « Famous » (v1.5.7)
   Héros de star, palmarès en podium, playlists en grandes
   cartes dépliables, catalogue en mode spectacle. Ajouts et
   surcharges bornés aux nouvelles classes de la page Musique;
   aucune règle existante n'est modifiée.
   ============================================================ */

/* ---------- Héros de star ---------- */
.hero--musique { padding: 5.5rem 0 4.5rem; }
.hero--musique .glow-cyan { opacity: 0.14; left: auto; right: -200px; top: -120px; }
.hero--musique .glow-magenta { opacity: 0.4; left: -160px; right: auto; }
.hero-title--star {
	font-size: clamp(3rem, 10.5vw, 6.2rem);
	line-height: 0.98;
	max-width: 12ch;
	text-shadow: 0 0 34px rgba(255, 34, 51, 0.25);
}
.musique-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.6rem;
	margin: 1.9rem 0 0.4rem;
}
.musique-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.musique-stat-nombre {
	font-family: var(--font-title);
	font-size: clamp(2rem, 6vw, 3.1rem);
	line-height: 1;
}
.musique-stat-label {
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}
.marquee--musique {
	border-block-color: rgba(255, 34, 51, 0.35);
	background: #07030a;
}
.hero--musique .hero-priority { max-width: 44rem; }

/* ---------- Recherches en mode spectacle ---------- */
.musique-recherche--xl,
.musique-recherche--hero { max-width: 46rem; }
.musique-recherche--xl label,
.musique-recherche--hero label {
	font-family: var(--font-title);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 1.02rem;
}
.musique-recherche--xl input[type="search"],
.musique-recherche--hero input[type="search"] {
	font-size: 1.15rem;
	padding: 1rem 1.2rem;
	border-width: 2px;
	border-radius: 12px;
	background: #05070c;
}
.musique-recherche--xl input[type="search"]:focus,
.musique-recherche--hero input[type="search"]:focus {
	border-color: var(--neon);
	box-shadow: 0 0 0 3px rgba(255, 34, 51, 0.22), 0 0 22px rgba(53, 224, 255, 0.25);
}

/* ---------- Zone d'écoute « scène » ---------- */
.zone-ecoute--scene { position: relative; }
.zone-ecoute--scene::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 90% at 50% 0%, rgba(255, 34, 51, 0.13), transparent 65%),
		radial-gradient(45% 70% at 85% 20%, rgba(53, 224, 255, 0.1), transparent 70%);
	pointer-events: none;
}
.zone-ecoute--scene .container { position: relative; }
.zone-ecoute--scene .section-title { font-size: clamp(2rem, 5.5vw, 3rem); }
.zone-ecoute--scene .zone-ecoute-piste {
	font-size: clamp(1.35rem, 3.6vw, 1.7rem);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.zone-ecoute--scene .zone-ecoute-lecteur {
	border: 2px solid rgba(255, 34, 51, 0.55);
	border-radius: 14px;
	padding: 0.55rem;
	background: linear-gradient(180deg, rgba(255, 34, 51, 0.08), rgba(53, 224, 255, 0.05)), #000;
	box-shadow: 0 0 0 1px rgba(53, 224, 255, 0.25), 0 18px 50px rgba(0, 0, 0, 0.65), 0 0 42px rgba(255, 34, 51, 0.22);
}
.zone-ecoute--scene .zone-ecoute-lecteur iframe { border-radius: 9px; }

/* ---------- Palmarès en podium ---------- */
.palmares-podium {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
	margin: 1.1rem 0 0.4rem;
}
.palmares-podium[hidden] { display: none; }
.podium-carte {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	overflow: hidden;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.podium-carte:hover { transform: translateY(-2px); }
.podium-rang-1 {
	grid-column: 1 / -1;
	border-color: rgba(238, 194, 94, 0.65);
	background: linear-gradient(120deg, rgba(238, 194, 94, 0.13), rgba(255, 34, 51, 0.07) 60%, rgba(53, 224, 255, 0.06)), var(--card);
	box-shadow: 0 0 34px rgba(238, 194, 94, 0.16);
	padding: 1.3rem 1.3rem;
}
.podium-rang-2 { border-color: rgba(53, 224, 255, 0.45); }
.podium-rang-3 { border-color: rgba(255, 34, 51, 0.45); }
.podium-rang-num {
	font-family: var(--font-title);
	line-height: 0.9;
	color: var(--muted);
	font-size: 2.6rem;
	min-width: 2.4rem;
	text-align: center;
}
.podium-rang-1 .podium-rang-num {
	font-size: clamp(4rem, 10vw, 5.6rem);
	min-width: 4.6rem;
	background: var(--gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.podium-rang-2 .podium-rang-num { color: var(--cyan); }
.podium-rang-3 .podium-rang-num { color: var(--neon); }
.podium-infos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.podium-titre {
	font-weight: 700;
	font-size: 1.08rem;
	color: var(--text);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.podium-titre:hover { color: var(--cyan); }
.podium-rang-1 .podium-titre { font-size: clamp(1.3rem, 4vw, 1.7rem); font-family: var(--font-title); letter-spacing: 0.02em; }
.podium-votes { color: var(--muted); font-size: 0.95rem; }
.podium-votes strong { color: var(--gold); font-size: 1.15em; }
.podium-actions { display: flex; flex-direction: column; gap: 0.45rem; align-items: stretch; }
.podium-actions .chanson-btn { font-size: 0.88rem; padding: 0.35rem 0.8rem; text-align: center; }
.podium-actions .palmares-voter { justify-content: center; }
.palmares-classement:empty { margin: 0; }
@media (max-width: 720px) {
	.palmares-podium { grid-template-columns: 1fr; }
	.podium-carte { flex-wrap: wrap; }
	.podium-actions { flex-direction: row; flex: 1 1 100%; }
	.podium-actions > * { flex: 1; }
}

/* ---------- Playlists en grandes cartes ---------- */
.pl-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 1.4rem 0 0.4rem;
}
.pl-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	max-width: 100%;
	padding: 0.42rem 0.8rem;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	background: var(--card);
	color: var(--text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.pl-chip:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-1px); }
.pl-chip-num { font-family: var(--font-title); color: var(--neon); font-size: 0.82rem; letter-spacing: 0.06em; }
.pl-carte {
	position: relative;
	margin-top: 1.6rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 55%), var(--card);
	border: 1px solid var(--card-border);
	border-radius: 16px;
	padding: 1.4rem 1.5rem 1.2rem;
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pl-carte:hover { border-color: rgba(53, 224, 255, 0.4); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
.pl-carte-entete {
	display: flex;
	align-items: flex-start;
	gap: 1.1rem;
	flex-wrap: wrap;
}
.pl-numero {
	font-family: var(--font-title);
	font-size: clamp(2.6rem, 7vw, 4rem);
	line-height: 0.9;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(53, 224, 255, 0.55);
	min-width: 2ch;
}
.pl-carte-titres { flex: 1 1 16rem; min-width: 0; }
.pl-nom {
	font-size: clamp(1.45rem, 4.4vw, 2.15rem);
	margin: 0;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.pl-precision { color: var(--muted); font-size: 0.62em; letter-spacing: 0.03em; }
.pl-accroche { margin: 0.35rem 0 0; color: var(--muted); }
.pl-accroche em { color: var(--text); font-style: normal; font-weight: 600; }
.pl-lien-suno { white-space: nowrap; margin-top: 0.35rem; }
.pl-carte .musique-mixte { margin-top: 0.9rem; }
.pl-basculer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	margin-top: 1.05rem;
	padding: 0.85rem 1.1rem;
	font-family: var(--font-title);
	font-size: 1rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(255, 34, 51, 0.07);
	border: 1px solid rgba(255, 34, 51, 0.45);
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.pl-basculer:hover { background: rgba(255, 34, 51, 0.14); border-color: var(--neon); }
.pl-basculer:active { transform: scale(0.995); }
.pl-bascule-fleche { color: var(--cyan); transition: transform 0.2s ease; }
.pl-basculer[aria-expanded="true"] .pl-bascule-fleche { transform: rotate(180deg); }
.pl-corps[hidden] { display: none; }
.pl-corps .musique-liste { margin-top: 1rem; }
.pl-corps .musique-liste li {
	padding: 0.34rem 0.25rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
	border-radius: 6px;
	transition: background 0.12s ease;
}
.pl-corps .musique-liste li:hover { background: rgba(53, 224, 255, 0.05); }
.pl-corps .musique-liste a { font-weight: 600; }
@media (max-width: 720px) {
	.pl-carte { padding: 1.1rem 1rem 1rem; }
	.pl-numero { font-size: 2.4rem; }
	.pl-lien-suno { margin-top: 0; }
}

/* ---------- Catalogue en mode spectacle ---------- */
.catalogue-index--xl { gap: 0.5rem; margin-top: 1.3rem; }
.catalogue-index--xl .catalogue-lettre {
	font-family: var(--font-title);
	font-size: 1.02rem;
	letter-spacing: 0.08em;
	padding: 0.55rem 0.95rem;
	border-width: 2px;
	transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.catalogue-index--xl .catalogue-lettre:hover { transform: translateY(-1px); }
.catalogue-index--xl .catalogue-lettre.est-actif {
	background: rgba(238, 194, 94, 0.12);
	box-shadow: 0 0 16px rgba(238, 194, 94, 0.25);
}
.catalogue-liste--scene li {
	padding: 0.3rem 0.25rem;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	transition: background 0.12s ease;
}
.catalogue-liste--scene li:hover { background: rgba(53, 224, 255, 0.05); }
.catalogue-liste--scene a { font-weight: 600; }
.catalogue-rang {
	font-family: var(--font-title);
	font-size: 0.78rem;
	color: var(--muted);
	margin-right: 0.55rem;
	min-width: 2.2ch;
	display: inline-block;
}

/* Micro-interactions communes de la page */
.chanson-btn { transition: color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.chanson-btn:active { transform: scale(0.96); }
.palmares-voter { transition: border-color 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.palmares-voter:active { transform: scale(0.96); }

/* ==========================================================================
   v1.6.0 — AJOUTS SEULEMENT (aucune règle existante modifiée) :
   étiquette d'état du paiement (module inc/paiement-godaddy.php, page
   Tarifs) et cartes du bloc « Dernières nouveautés » (inc/nouveautes.php).
   ========================================================================== */

/* État du paiement sous chaque bouton de forfait : texte discret et
   honnête — la couleur suit l'état (jamais de vert « actif » tant que
   l'état ne l'est pas). */
.paiement-etat {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	text-align: center;
	color: var(--muted);
}
.paiement-etat--en-attente { color: var(--gold); }
.paiement-etat--actif { color: var(--cyan); }

/* Cartes « Dernières nouveautés » : ligne méta (type + date), titre
   lié, description — sur les cartes existantes (.card / .cards-grid). */
.nouv-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 0.6rem;
}
.nouv-meta time {
	font-size: 0.88rem;
	color: var(--muted);
}
.nouv-titre { font-size: 1.25rem; margin-bottom: 0.5rem; }
.nouv-titre a { color: var(--text); text-decoration: none; }
.nouv-titre a:hover, .nouv-titre a:focus { color: var(--cyan); text-decoration: underline; }
.nouv-desc { color: var(--muted); }
.nouv-card p:last-child { margin-bottom: 0; }

/* ============================================================
   PASSE ESTHÉTIQUE v1.6.2 — finitions ciblées, identité
   « Affiche » inchangée, aucun contenu touché. Chaque retouche
   est listée avant/après dans files/RAPPORT-V162-MENU-ESTHETIQUE.md.
   ============================================================ */

/* ---------- Retouche 1 : nav bureau — page courante + déroulant ----------
   Avant : la nav bureau ne stylait ni l'item courant (indiscernable)
   ni le sous-menu (aucune règle .sub-menu dans le thème : les deux
   outils sous « Outils gratuits » s'affichaient en liste brute dans
   l'en-tête fixe). Après : item courant en texte plein avec le
   soulignement déployé, et panneau déroulant au survol/focus. */
.nav-list > li { position: relative; }
.nav-list .current-menu-item > a,
.nav-list .current-menu-ancestor > a { color: var(--text); }
.nav-list .current-menu-item > a::after { transform: scaleX(1); }
.nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 22px);
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 230px;
	margin: 0;
	padding: 0.45rem;
	list-style: none;
	background: var(--bg-elev);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 120;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
/* Pont de survol : la souris traverse l'écart sans perdre le panneau. */
.nav-list > li.menu-item-has-children::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 22px;
}
.nav-list .sub-menu a {
	display: block;
	padding: 0.6rem 0.8rem;
	border-radius: 8px;
	font-size: 0.92rem;
}
.nav-list .sub-menu a::after { display: none; }
.nav-list .sub-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.nav-list .sub-menu .current-menu-item > a { color: var(--cyan); }

/* ---------- Retouche 2 : pied de page aux largeurs intermédiaires ----------
   Avant : .footer-grid restait à 3 colonnes jusqu'à 640 px ; entre
   641 et 860 px, marque, liens et note se serraient dans ~92vw
   alors que le reste du site bascule en mode compact dès 860 px.
   Après : 2 colonnes dès 860 px, la marque en pleine largeur ;
   le passage à 1 colonne à 640 px demeure. */
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

/* ---------- Retouche 3 : héros — respiration mobile ----------
   Avant : à 640 px et moins, .section descendait à 3.2rem mais
   les héros gardaient leurs grands espacements bureau (5.5/4rem,
   4/3rem en compact) : le haut des pages intérieures — dont les
   trois nouvelles pages — écrasait le rythme sur téléphone.
   Après : espacements réduits dans les mêmes proportions que
   .section sur mobile. */
@media (max-width: 640px) {
	.hero { padding: 3.6rem 0 2.8rem; }
	.hero-compact { padding: 2.8rem 0 2.2rem; }
}

/* ==========================================================================
   PAGES « AFFICHES » — v1.6.4 (AJOUTS SEULEMENT, aucune règle existante
   modifiée) : les pages Formations (/formations/) et IA Projets
   (/ia-projets/), construites d’après les affiches de Maurence du
   2026-10-07. Chaque affiche devient le visuel latéral de son héros :
   colonne dédiée, image ENTIÈRE (jamais rognée — son texte fait partie
   du visuel), cadre sombre et halo néon discret. Sur mobile, la grille
   passe à une colonne : le texte (donc le titre) vient d’abord, le
   visuel suit en dessous, en largeur contenue — il n’écrase jamais
   le titre. La signature « Avec Lawrence Morel » reprend la police
   manuscrite des affiches; les quatre verbes, la typographie titre
   en cyan électrique. Les cartes et tuiles réutilisent .cards-grid,
   .card et .pill tels quels. */

.hero--affiche .hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 2.6rem;
	align-items: center;
}
.hero-affiche-visuel { margin: 0; }
.hero-affiche-visuel img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--card-border);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 42px rgba(255, 34, 51, 0.14);
}
.hero-signature {
	font-family: var(--font-marker);
	color: var(--magenta);
	font-size: 1.55rem;
	letter-spacing: 0.02em;
	transform: rotate(-2deg);
	margin: 0.5rem 0 0.3rem;
}
.hero-verbes {
	font-family: var(--font-title);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--cyan);
	font-size: clamp(0.95rem, 2.4vw, 1.15rem);
	margin: 0.2rem 0 1rem;
}

@media (max-width: 920px) {
	.hero--affiche .hero-inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.hero-affiche-visuel { width: 100%; max-width: 330px; margin-inline: auto; }
}

/* ==========================================================================
   DÉPOSE TA CHANSON — v1.6.5 (AJOUTS SEULEMENT, aucune règle existante
   modifiée) : la section de dépôt public des créateurs Suno (accueil +
   /ecouter/, module inc/depose-chanson.php) et le lecteur du flux de
   diffusion de la page Écouter quand l'URL du flux est configurée.
   La section reprend le rythme des sections du thème et les classes du
   formulaire de contact (.contact-form, .form-row, .notice) : seuls
   manquaient le champ d'URL, l'aide sous le champ, la case
   d'autorisation et le pot de miel. Le pot de miel est garé hors écran :
   invisible pour un humain, présent pour les robots — ne jamais le
   rendre visible. */

.depose-section {
	border-top: 1px solid rgba(255, 34, 51, 0.25);
	background:
		radial-gradient(640px 300px at 85% 0%, rgba(53, 224, 255, 0.08), transparent 65%),
		radial-gradient(560px 280px at 8% 100%, rgba(255, 34, 51, 0.07), transparent 65%);
}
.depose-form input[type="url"] {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	color: var(--text);
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
}
.depose-form input[type="url"]:focus {
	border-color: var(--cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.2);
}
.depose-aide {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--muted, #b9c2cc);
}
.depose-consentement label {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-weight: 500;
	line-height: 1.55;
	cursor: pointer;
}
.depose-consentement input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	accent-color: var(--magenta);
}
.depose-pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.rint-flux-audio {
	width: 100%;
	margin: 0.8rem 0;
}

/* ==========================================================================
   COMPTES CLIENTS + RESSOURCES FORMATIONS — v1.6.6 (AJOUTS SEULEMENT,
   aucune règle existante modifiée) : les pages virtuelles /inscription/
   et /mon-compte/ (module inc/comptes-clients.php, modèle
   templates/template-compte.php), le panneau « forfait requis » de la
   Plateforme, et la section Ressources de la page Formations (module
   inc/formations-ressources.php). Les deux pages de compte reprennent
   les classes du formulaire de contact (.contact-form, .form-row,
   .notice) et les cartes/pastilles du thème : seuls manquaient le pot
   de miel, l'aide sous les champs, la case des conditions, les cartes
   d'état du compte et les listes de la section Ressources. Le pot de
   miel est garé hors écran, même technique que Dépose ta chanson :
   invisible pour un humain, présent pour les robots — ne jamais le
   rendre visible. */

.compte-section select {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	padding: 0.8rem 1rem;
	color: var(--text);
	font: inherit;
}
.compte-aide {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.9rem;
	color: var(--muted, #b9c2cc);
}
.compte-conditions label {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-weight: 500;
	line-height: 1.55;
	cursor: pointer;
}
.compte-conditions input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	accent-color: var(--magenta);
}
.compte-pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.compte-carte {
	margin-top: 1.6rem;
}
.compte-liens {
	margin-top: 2rem;
}
.ressources-sous-titre {
	margin: 2.4rem 0 1rem;
	font-size: 1.45rem;
}
.guide-etapes {
	margin: 0 0 1rem;
	padding-left: 1.4rem;
	line-height: 1.6;
}
.guide-etapes li {
	margin-bottom: 0.9rem;
}


/* ==========================================================================
   DÉPOSE TA MUSIQUE — v1.7.1 (AJOUTS SEULEMENT, aucune règle existante
   modifiée) : le formulaire de dépôt devient multi-plateformes (module
   inc/depose-chanson.php v2) — sélecteur de plateforme, champs courriel
   et profil alignés sur les autres champs, et la boîte qui affiche le
   code de vérification de propriété après l'envoi. Le code est rendu en
   très gros caractères espacés : le déposant doit le recopier sans
   erreur dans la description de sa chanson. */

.depose-form select {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	color: var(--text);
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
}
.depose-form select:focus {
	border-color: var(--cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.2);
}
.depose-form input[type="email"] {
	width: 100%;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	color: var(--text);
	padding: 0.85rem 1rem;
	font-family: var(--font-body);
	font-size: 1rem;
}
.depose-form input[type="email"]:focus {
	border-color: var(--cyan);
	outline: none;
	box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.2);
}
.depose-code-boite {
	text-align: left;
}
.depose-code {
	margin: 0.6rem 0;
}
.depose-code code {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 2px dashed var(--cyan);
	border-radius: 10px;
	background: rgba(53, 224, 255, 0.08);
	color: var(--text);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: 0.22em;
}

/* Sélecteur de langue FR | EN (v1.7.4) — n'apparaît que sur
   les pages qui ont leur jumelle (inc/langue-en.php). */
.rint-langue {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.rint-langue a {
	color: var(--cyan);
	text-decoration: none;
}
.rint-langue a:hover,
.rint-langue a:focus {
	color: var(--text);
	text-decoration: underline;
}
.rint-langue-actif { color: var(--text); }
.rint-langue-sep { opacity: 0.45; }
.menu-mobile .rint-langue {
	display: flex;
	justify-content: center;
	margin: 0.6rem 0 1rem;
	font-size: 1rem;
}

/* ---------- Conformité v1.8.7 : pied de page légal + bannière témoins ----------
   La rangée légale vit dans le pied de page (footer.php) sur
   chaque page; la bannière des témoins est une carte fixe
   rendue CACHÉE par le serveur et affichée par
   consentement-temoins.js seulement quand il n'y a pas de
   choix ou quand le visiteur la rouvre. z-index 9996 :
   au-dessus de la barre du lecteur (9990) et du panneau de
   menu mobile (9995), sans jamais les remplacer. */
.footer-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	align-items: center;
	margin-top: 0.35rem;
}
.footer-legal a { color: var(--cyan); text-decoration: none; }
.footer-legal a:hover,
.footer-legal a:focus { text-decoration: underline; }
.footer-legal-bouton {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--cyan);
	cursor: pointer;
}
.footer-legal-bouton:hover,
.footer-legal-bouton:focus { text-decoration: underline; }

.rint-temoins {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 6rem;
	z-index: 9996;
}
.rint-temoins[hidden] { display: none; }
.rint-temoins-carte {
	max-width: 34rem;
	margin-left: auto;
	background: rgba(6, 9, 14, 0.97);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	padding: 1.1rem 1.25rem 1.25rem;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.rint-temoins-titre {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 700;
}
.rint-temoins-texte { margin: 0 0 0.9rem; font-size: 0.95rem; line-height: 1.55; }
.rint-temoins-etat { margin: 0 0 0.9rem; font-size: 0.92rem; font-weight: 600; }
.rint-temoins-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 860px) {
	.rint-temoins { bottom: 5.25rem; }
	.rint-temoins-carte { max-width: none; margin-left: 0; }
}

/* ============================================================
   v2.2.4 — « ARRIVÉE SUPER BOUTON » + PASSE SPECTACULAIRE
   (2026-10-13, atelier — NON déployé)
   Demande du titulaire : « Déployer, améliorer tout — rendre
   spectaculaire, couleurs percutantes, images, photos, vidéo. »
   Passe purement visuelle, dans la charte « Affiche » (fond
   noir, néon rouge, cyan/bleu électrique, doré) : aucun texte,
   aucune structure, aucune couleur de FOND porteuse de texte
   n'est touchée — la correction WCAG AA de la v2.2.0 (bouton
   primaire #d90429 → #e00e24, texte blanc ≥ 4,5:1) est
   conservée telle quelle; ce qui monte, c'est la lumière
   AUTOUR des éléments (ombres portées, halos, bordures
   teintées) et la présence des visuels de la banque du thème.
   Aucun sélecteur de ce bloc ne vise les classes des plugins
   (vedette vidéo, dock, panneau du Super Bouton) : seuls le
   contenant d'arrivée et les classes du thème sont stylés.
   Aucune animation nouvelle (rien à figer pour
   prefers-reduced-motion).
   ============================================================ */

/* ---------- Titres : halo néon doux — le texte reste blanc,
   son contraste ne bouge pas. ---------- */
.section-title,
.page-title {
	text-shadow: 0 0 22px rgba(53, 224, 255, 0.3), 0 0 48px rgba(255, 34, 51, 0.18);
}
.gradient-text { filter: drop-shadow(0 0 14px rgba(46, 123, 255, 0.45)); }
.eyebrow { text-shadow: 0 0 12px rgba(53, 224, 255, 0.55); }

/* ---------- Boutons : lueur externe renforcée (le fond du
   bouton primaire, corrigé AA en v2.2.0, ne change pas). --- */
.btn-primary {
	box-shadow: 0 10px 34px rgba(255, 34, 51, 0.55), 0 0 24px rgba(255, 34, 51, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-primary:hover {
	box-shadow: 0 14px 44px rgba(255, 34, 51, 0.65), 0 0 36px rgba(53, 224, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}
.btn-ghost:hover { box-shadow: 0 0 18px rgba(53, 224, 255, 0.35); }

/* ---------- Cartes et chiffres : bordures teintées néon,
   reflet au survol. Les variantes de pastilles prêtes/à faire
   (fonds pleins) sont exclues de la retouche des .pill. ----- */
.card {
	border-color: rgba(53, 224, 255, 0.26);
	border-left-color: rgba(46, 123, 255, 0.7);
}
.services-grid .service-card { border-top-color: rgba(53, 224, 255, 0.85); }
.services-grid .service-card:nth-child(even) { border-top-color: rgba(255, 34, 51, 0.85); }
.service-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.service-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(53, 224, 255, 0.16);
}
.step-card:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 34, 51, 0.18); }
.stat-card { border-color: rgba(238, 194, 94, 0.3); }
.stat-card::before { opacity: 1; }
.pill:not(.pill-ready):not(.pill-todo) {
	border-color: rgba(53, 224, 255, 0.35);
	color: #c7d2de;
	background: rgba(53, 224, 255, 0.05);
}

/* ---------- Bandeau défilant : bordure rouge franche, texte
   plus clair (il reste un élément décoratif). -------------- */
.marquee { border-block-color: rgba(255, 34, 51, 0.45); }
.marquee-track { color: #c7d2de; }

/* ---------- Héros de l'accueil : les halos de fond montent
   (0,28 → 0,42; décor flou derrière le texte, inchangé). --- */
.hero--home .glow { opacity: 0.42; }

/* ---------- CTA final de l'accueil : la photo de l'Affiche.
   Visuel de la banque DU THÈME — assets/images/partage/
   partage-accueil.jpg, le visuel de partage de l'accueil —
   sous un voile sombre (le texte blanc reste lisible
   partout). Aucune adresse externe. Le filet de lueurs
   ::before existant est renforcé au même pas. ------------- */
.cta-final {
	background-image: linear-gradient(rgba(4, 6, 10, 0.88), rgba(4, 6, 10, 0.8)), url("../images/partage/partage-accueil.jpg");
	background-size: cover;
	background-position: center;
}
.cta-final::before {
	background:
		radial-gradient(ellipse 60% 90% at 50% 100%, rgba(53, 224, 255, 0.2), transparent 70%),
		radial-gradient(ellipse 50% 80% at 80% 100%, rgba(255, 34, 51, 0.18), transparent 70%);
}

/* ---------- Articles : cadre néon de l'image à la une
   (la mécanique est déjà là : single.php l'affiche en
   grand; on renforce son cadre). --------------------------- */
.article-featured img {
	border-color: rgba(53, 224, 255, 0.35);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 28px rgba(255, 34, 51, 0.14);
}

/* ---------- FAQ et citation : accents renforcés. ---------- */
.faq-item { border-color: rgba(53, 224, 255, 0.22); }
.faq-item[open] { border-color: rgba(255, 34, 51, 0.5); }
.quote p { text-shadow: 0 0 18px rgba(238, 194, 94, 0.35); }

/* ============================================================
   v2.2.6 « FINI PRO » — appendice (ajouté en fin de fichier,
   au patron des appendices précédents : les règles de base
   ne sont pas touchées, seuls des correctifs ciblés).
   Corrections de l'audit qualité du 2026-10-13.
   ============================================================ */

/* ---------- Nº 8 : l'étiquette du logo reste sur UNE ligne.
   « RADIO OS · QUÉBEC » (.brand-sub) se cassait mot à mot
   (3 lignes) quand le menu comprimait le bloc de marque :
   le texte ne s'enroule plus, et le bloc de marque ne
   rétrécit plus dans l'en-tête. Sous 640 px, l'étiquette
   reste masquée par la règle de base (aucun retour). ------ */
.brand { flex: none; }
.brand-sub { white-space: nowrap; }

/* ---------- Nº 4 : gabarit large des pages-outils.
   La classe « rint-page-large » est posée sur le <body> par
   le module inc/gabarit-large.php (modèle « Pleine largeur
   outil » assigné, ou adresse d'outil connue). Le conteneur
   de la page et son contenu passent de la colonne de
   lecture (46 rem) à 75 rem (~1 200 px) : les grilles, les
   explorateurs et les cartes respirent sur bureau. Les
   pages de lecture et les articles ne portent pas la
   classe : leur colonne confortable ne bouge pas. -------- */
body.rint-page-large .container.page-wrap { width: min(75rem, 100% - 2.5rem); }
body.rint-page-large .entry-content { max-width: 75rem; }

/* ================================================================
   APPENDICE v2.2.8 « ACCUEIL À ONGLETS » + « CARTES EN IMAGES »
   (demandes du titulaire, 2026-10-15)
   1. Onglets de l'accueil : les sections qui suivent le héros
      se regroupent sous cinq onglets (Découvrir / La plateforme /
      Participer / Pourquoi RadioInternet / Aide et contact).
      Sans JavaScript, aucun panneau n'est masqué : le script
      assets/js/accueil-onglets.js pose seul l'attribut hidden.
   2. Cartes d'articles : l'image à la une devient le visuel de
      la carte, le TITRE est superposé sur l'image avec un
      dégradé de lisibilité (inc/cartes-articles.php).
   3. Cartes d'explication : emplacement d'image en tête de
      carte (inc/cartes-illustrations.php), actif seulement
      quand la table du module nomme un fichier pour la carte.
   ================================================================ */

/* ---------- 1. Onglets de l'accueil ---------- */
.accueil-onglets .onglets-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	padding: 1.6rem 0 0.4rem;
}
.onglet-btn {
	font-family: "Anton", "Arial Black", sans-serif;
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #e9ecf5;
	background: #10101a;
	border: 1px solid rgba(0, 229, 255, 0.4);
	border-radius: 999px;
	padding: 0.65rem 1.35rem;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.onglet-btn:hover { border-color: rgba(0, 229, 255, 0.85); }
.onglet-btn:focus-visible {
	outline: 2px solid #00e5ff;
	outline-offset: 3px;
}
.onglet-btn[aria-selected="true"] {
	color: #ffffff;
	background: linear-gradient(135deg, #c4002f 0%, #ff2d55 55%, #ff7847 130%);
	border-color: #ff2d55;
	box-shadow: 0 0 20px rgba(255, 45, 85, 0.5);
}
.onglet-panneau[hidden] { display: none; }
.onglet-panneau:focus { outline: none; }

/* ---------- 2. Média des cartes d'articles ---------- */
.carte-media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: 1rem;
	aspect-ratio: 1200 / 630;
	background: #0a0a12;
}
.carte-media .carte-media-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.carte-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(2, 2, 8, 0.92) 0%, rgba(2, 2, 8, 0.55) 42%, rgba(2, 2, 8, 0) 72%);
}
.carte-media-titre {
	position: absolute;
	z-index: 2;
	left: 1rem;
	right: 1rem;
	bottom: 0.85rem;
	margin: 0;
	font-family: "Anton", "Arial Black", sans-serif;
	font-size: clamp(1.05rem, 1.6vw + 0.7rem, 1.45rem);
	line-height: 1.18;
	letter-spacing: 0.02em;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.carte-media-titre .carte-media-lien {
	color: inherit;
	text-decoration: none;
}
.carte-media-titre .carte-media-lien::after {
	content: "";
	position: absolute;
	inset: 0;
}
.carte-media-titre .carte-media-lien:hover { text-decoration: underline; }
.carte-media-titre .carte-media-lien:focus-visible {
	outline: 2px solid #00e5ff;
	outline-offset: 2px;
}

/* ---------- 3. Illustration des cartes d'explication ---------- */
.carte-illustration {
	display: block;
	width: 100%;
	aspect-ratio: 1200 / 630;
	object-fit: cover;
	border-radius: 8px;
	margin-bottom: 1rem;
}

/* ==========================================================================
   v2.2.12 — Vague A transversale : fil d’Ariane (T2), rangée de
   partage (T1), cartes liées (T3), mini-sommaires (T5).
   Charte « Affiche » : panneaux sombres, liseré néon rouge,
   liens cyan, pastilles dorées — discret et propre.
   ========================================================================== */

/* ---------- T2. Fil d’Ariane ---------- */
.rint-ariane {
	background: var(--bg-elev);
	border-bottom: 1px solid var(--card-border);
	font-size: 0.92rem;
}
.rint-ariane-liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.15rem 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0.55rem 0;
}
.rint-ariane-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--muted);
}
.rint-ariane-item a {
	color: var(--cyan);
	text-decoration: none;
}
.rint-ariane-item a:hover { text-decoration: underline; }
.rint-ariane-item [aria-current="page"] {
	color: var(--text);
	font-weight: 600;
}
.rint-ariane-sep {
	color: var(--neon);
	font-weight: 700;
}

/* ---------- T1. Rangée de partage ---------- */
.rint-partage {
	background: var(--bg-elev);
	border-top: 2px solid var(--neon);
	padding: 1.4rem 0 1.6rem;
}
.rint-partage-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
}
.rint-partage-titre {
	font-family: var(--font-title);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0;
	color: var(--text);
}
.rint-partage-boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.rint-partage-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--text);
	font: inherit;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.rint-partage-btn:hover {
	border-color: var(--cyan);
	color: var(--cyan);
}
.rint-partage-icone {
	color: var(--gold);
	font-weight: 700;
	line-height: 1;
}
.rint-copier-lien.rint-copie-ok {
	border-color: var(--cyan);
	color: var(--cyan);
}

/* ---------- T5. Mini-sommaires ancrés ---------- */
.rint-sommaire {
	background: var(--bg-elev);
	border-bottom: 1px solid var(--card-border);
}
.rint-sommaire-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
}
.rint-sommaire-titre {
	font-family: var(--font-title);
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gold);
}
.rint-sommaire-liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rint-sommaire-liste a {
	color: var(--cyan);
	text-decoration: none;
	font-size: 0.95rem;
}
.rint-sommaire-liste a:hover { text-decoration: underline; }
/* Dans le contenu (pages Caya et Rick) : pas de bande pleine
   largeur, une simple ligne de sommaire en tête d’article. */
.entry-content > .rint-sommaire {
	background: transparent;
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 0.7rem 1rem;
	margin-bottom: 1.4rem;
}
.entry-content > .rint-sommaire .rint-sommaire-titre {
	display: block;
	margin-bottom: 0.4rem;
}

/* ---------- T3. Cartes liées ---------- */
.rint-liees-grille { margin-top: 1.6rem; }
.rint-liee .nouv-meta { margin: 0.8rem 0 0; }

/* ---------- V2214. Design par famille (ENRICHISSEMENT 2026-10-16) ----------
   Familles : Écouter = cyan #00e5ff · Créer = magenta #ff4d94 ·
   Jouer = doré #eec25e · Découvrir = bleu var(--blue) · Maison = rouge
   néon var(--neon). Le texte courant reste --text / --muted (>= 7:1);
   la couleur de famille ne vit que dans les fonds teintés (5-7 %),
   les bordures et les liserés — jamais en texte courant. Le magenta
   (~4,6:1) est réservé aux titres et aux bordures; le doré aux
   libellés gras en capitales sur fond teinté. */
.section.tint-cyan { background: rgba(0, 229, 255, .06); border-top: 1px solid rgba(0, 229, 255, .35); }
.section.tint-bleu { background: rgba(46, 123, 255, .06); border-top: 1px solid rgba(46, 123, 255, .35); }
.section.tint-dore { background: rgba(238, 194, 94, .06); border-top: 1px solid rgba(238, 194, 94, .35); }
.section.tint-magenta { background: rgba(255, 77, 148, .06); border-top: 1px solid rgba(255, 77, 148, .35); }
.section.tint-neon { background: rgba(255, 34, 51, .05); border-top: 1px solid rgba(255, 34, 51, .35); }

.card-famille-ecouter { border-color: rgba(0, 229, 255, .4); border-top: 3px solid #00e5ff; }
.card-famille-ecouter:hover { border-color: rgba(0, 229, 255, .7); }
.card-famille-creer { border-color: rgba(255, 77, 148, .4); border-top: 3px solid #ff4d94; }
.card-famille-creer:hover { border-color: rgba(255, 77, 148, .7); }
.card-famille-jouer { border-color: rgba(238, 194, 94, .4); border-top: 3px solid var(--gold); }
.card-famille-jouer:hover { border-color: rgba(238, 194, 94, .7); }
.card-famille-decouvrir { border-color: rgba(46, 123, 255, .4); border-top: 3px solid var(--blue); }
.card-famille-decouvrir:hover { border-color: rgba(46, 123, 255, .7); }

/* Carte d'exemple vécu (histoire courte, vraie, datée) : fond doré 6 %,
   liseré gauche doré 4 px, libellé EXEMPLE en capitales dorées. */
.card-exemple { background: rgba(238, 194, 94, .06); border-left: 4px solid var(--gold); }
.card-exemple::before { content: "EXEMPLE"; display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--gold); margin-bottom: .45rem; }
.card-exemple--en::before { content: "EXAMPLE"; }

/* Un mot accentué dans un titre de section (un seul par titre). */
.accent-cyan { color: #00e5ff; }
.accent-magenta { color: #ff4d94; }
.accent-dore { color: var(--gold); }
.accent-bleu { color: var(--blue); }

/* Filet de séparation 2 px, dégradé transparent -> famille -> transparent. */
.filet-neon { height: 2px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--neon), transparent); }
.filet-cyan { background: linear-gradient(90deg, transparent, #00e5ff, transparent); }
.filet-magenta { background: linear-gradient(90deg, transparent, #ff4d94, transparent); }
.filet-dore { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.filet-bleu { background: linear-gradient(90deg, transparent, var(--blue), transparent); }

/* Sommaire : point de couleur de la famille de la page devant chaque lien. */
.rint-sommaire--famille-ecouter a::before, .rint-sommaire--famille-creer a::before,
.rint-sommaire--famille-jouer a::before, .rint-sommaire--famille-decouvrir a::before {
	content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin-right: .55em; vertical-align: .08em;
}
.rint-sommaire--famille-ecouter a::before { background: #00e5ff; }
.rint-sommaire--famille-creer a::before { background: #ff4d94; }
.rint-sommaire--famille-jouer a::before { background: var(--gold); }
.rint-sommaire--famille-decouvrir a::before { background: var(--blue); }

/* Unité publicitaire manuelle (v2.2.15, inc/pub-manuelle.php) :
   le support servi est VIDE tant que la porte de consentement
   n'a pas matérialisé l'annonce — aucune hauteur, aucune marge,
   aucun cadre fantôme. Une fois l'annonce construite par la
   porte, le support prend sa place dans le flux, centré et
   borné à la largeur utile d'un emplacement responsive. */
.rint-pub-manuelle { max-width: 970px; margin: 0 auto; padding: 0 1rem; }
.rint-pub-manuelle:not(:empty) { margin-top: 2.5rem; margin-bottom: 2.5rem; }

/* === v2.2.16 « SIMPLICITÉ » — barre d'actions rapides et
   sauts de page. La barre vit sous l'en-tête, sur toutes les
   pages : six portes en un clic vers les actions vedettes.
   Sur mobile, la rangée se fait défiler du doigt plutôt que
   de s'empiler. Les sauts (.rint-sauts) sont la même idée à
   l'intérieur d'une longue page (Écouter) : des ancres vers
   les sections, rien de retiré, rien de déplacé. */
.rint-actions-rapides { background: #0d0d12; border-bottom: 1px solid rgba(255, 45, 85, .45); }
.rint-actions-rapides-inner { display: flex; align-items: center; gap: .5rem; padding-top: .55rem; padding-bottom: .55rem; overflow-x: auto; scrollbar-width: thin; }
.rint-actions-rapides-titre { flex: 0 0 auto; font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: #ffd166; }
.rint-action-rapide { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #fff; text-decoration: none; font-size: .92rem; line-height: 1.2; background: rgba(255, 255, 255, .04); }
.rint-action-rapide:hover, .rint-action-rapide:focus-visible { border-color: #ff2d55; background: rgba(255, 45, 85, .14); color: #fff; }
.rint-action-rapide-icone { font-size: 1rem; }
.rint-sauts { background: rgba(255, 255, 255, .03); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.rint-sauts-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding-top: .6rem; padding-bottom: .6rem; }
.rint-sauts-titre { font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: #ffd166; }
.rint-sauts a { color: #7ee7ff; text-decoration: none; font-size: .95rem; }
.rint-sauts a:hover, .rint-sauts a:focus-visible { text-decoration: underline; }

/* === v2.2.17 « OUVRIR / REFERMER AU CLIC » — boutons chevrons
   des sous-menus (bureau + mobile) et états ouverts/fermés.
   Le bouton (.rint-sous-menu-bascule) est inséré par
   assets/js/main.js à côté du lien parent : sans JavaScript,
   aucune de ces règles ne s'applique et le comportement
   d'avant demeure (survol au bureau, liste complète dans le
   panneau mobile). Les règles d'état gagnent sur le survol :
   le préfixe .site-header et la position en fin de fichier
   donnent la priorité aux classes posées par le clic. */
.nav-list li.rint-avec-bascule, .nav-list-mobile li.rint-avec-bascule { display: flex; flex-wrap: wrap; align-items: center; }
.nav-list li.rint-avec-bascule > a, .nav-list-mobile li.rint-avec-bascule > a { flex: 1 1 auto; }
.rint-sous-menu-bascule { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: .15rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: .8rem; line-height: 1; cursor: pointer; }
.rint-sous-menu-bascule:hover, .rint-sous-menu-bascule:focus-visible { color: var(--text); border-color: var(--card-border); }
.rint-sous-menu-bascule > span { display: inline-block; transition: transform .18s ease; }
li.rint-sous-menu-ouvert > .rint-sous-menu-bascule > span { transform: rotate(180deg); }
/* Ouvert au clic (bureau) : mêmes valeurs que le survol. */
.site-header .nav-list li.rint-sous-menu-ouvert > .sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Fermé au clic (bureau) : gagne sur le survol et le focus tant
   que la souris n'a pas quitté l'item (le script retire la
   classe au départ de la souris). */
.site-header .nav-list li.rint-sous-menu-ferme > .sub-menu, .site-header .nav-list li.rint-sous-menu-ferme:hover > .sub-menu, .site-header .nav-list li.rint-sous-menu-ferme:focus-within > .sub-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 6px); }
/* Panneau mobile : avec bouton, le sous-menu part fermé et
   s'ouvre au clic; il occupe sa propre rangée sous le lien. */
.nav-list-mobile li.rint-avec-bascule > .sub-menu { flex: 1 1 100%; display: none; }
.nav-list-mobile li.rint-avec-bascule.rint-sous-menu-ouvert > .sub-menu { display: block; }
.nav-list-mobile .rint-sous-menu-bascule { width: 44px; height: 44px; font-size: 1rem; }

/* ==========================================================================
   v2.2.22 — « SPRINT 9.5 » : bande parcours de l'accueil +
   accessibilité (focus visible renforcé).
   ========================================================================== */

/* Bande parcours en 5 étapes, juste après le héros (accueil
   FR + EN) : fond noir « Affiche », liseré néon rouge en
   tête, numérotation des cartes d'étapes existante. */
.rint-parcours-sprint {
	background: var(--bg);
	border-top: 3px solid var(--neon);
	border-bottom: 1px solid var(--card-border);
	padding: 3rem 0;
}
.rint-parcours-sprint .section-title { margin-top: 0.4rem; }
.rint-parcours-sprint .steps-grid { margin-top: 1.6rem; }

/* Focus visible RENFORCÉ (accessibilité) : sur les éléments
   interactifs de l'en-tête et des lecteurs (barre persistante
   du plugin Lecteur, lecteur de flux des pages Écouter, régie
   de la Plateforme), le contour clavier est épais, cyan, avec
   un halo rouge néon — impossible à manquer sur le fond noir,
   sans dépendre de la seule couleur. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.menu-mobile a:focus-visible,
.menu-mobile button:focus-visible,
.rint-lecteur button:focus-visible,
.rint-lecteur input[type="range"]:focus-visible,
.rint-rc-btn:focus-visible,
.rint-flux-audio:focus-visible,
.pf-transport button:focus-visible,
.pf-transport input[type="range"]:focus-visible {
	outline: 3px solid var(--cyan);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px rgba(255, 34, 51, 0.45);
	border-radius: 4px;
}


/* ==========================================================================
   v2.2.23 — « LOOK MAGAZINE » : héros magazine en deux colonnes,
   tuiles d'accès rapide, section « Le Magazine RadioInternet »,
   « Nos signatures » et bande devise (module inc/accueil-look.php,
   accueils FR + EN). Palette : bleu nuit, magenta néon, violet,
   cyan électrique; cartes à bordures fines lumineuses et coins
   arrondis généreux, comme les maquettes du propriétaire.
   ========================================================================== */

/* ---------- Héros magazine ---------- */
.hero-look-grille {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 2.5rem;
	align-items: center;
}
.hero-slogan {
	font-family: var(--font-title);
	font-size: clamp(1.05rem, 2.2vw, 1.45rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text);
	margin: 0 0 1.1rem;
}
.hero-look-visuel { margin: 0; position: relative; }
.hero-look-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	border: 1px solid rgba(255, 46, 158, 0.45);
	box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25), 0 24px 60px rgba(255, 46, 158, 0.18), 0 30px 80px rgba(0, 0, 0, 0.55);
}
.hero-look-note {
	font-family: var(--font-marker);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	color: #ffffff;
	text-align: center;
	margin-top: 1.1rem;
	transform: rotate(-3deg);
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
}
.hero-look-note::after {
	content: "";
	display: block;
	width: 62%;
	height: 4px;
	margin: 0.3rem auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, transparent, var(--look-magenta), transparent);
}
.btn-look { border-color: rgba(255, 46, 158, 0.6); }
.btn-look:hover {
	border-color: var(--look-magenta);
	color: #ff8ac2;
	box-shadow: 0 6px 24px rgba(255, 46, 158, 0.25);
}

/* ---------- Tuiles d'accès rapide ---------- */
.look-tuiles {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
.look-tuile {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1.3rem 1.2rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	text-decoration: none;
	color: var(--text);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.look-tuile:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 46, 158, 0.55);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 46, 158, 0.22);
	color: var(--text);
}
.look-tuile-icone { font-size: 1.9rem; line-height: 1; }
.look-tuile-nom {
	font-family: var(--font-title);
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.look-tuile-phrase { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }
.look-tuile--vedette {
	border-color: rgba(255, 46, 158, 0.75);
	background: linear-gradient(160deg, rgba(255, 46, 158, 0.16), rgba(139, 92, 246, 0.1) 60%, var(--card));
	box-shadow: 0 0 0 1px rgba(255, 46, 158, 0.35), 0 16px 40px rgba(255, 46, 158, 0.16);
}
.look-tuile--vedette .look-tuile-nom { color: #ff8ac2; }

/* ---------- Le Magazine RadioInternet ---------- */
.look-magazine-entete {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.look-chip {
	display: inline-block;
	font-family: var(--font-title);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.32rem 0.7rem;
	border-radius: 999px;
	color: #ffffff;
	background: #087f9e;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.chip--magenta { background: #c4005f; }
.chip--cyan { background: #087f9e; }
.chip--bleu { background: #2563eb; }
.chip--rose { background: #c2185b; }
.chip--violet { background: #7c3aed; }
.chip--or { background: #9a6a00; }
.chip--vert { background: #1e7d46; }
.look-une {
	margin-top: 2rem;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid var(--card-border);
	background: var(--card);
}
.look-une-lien { position: relative; display: block; text-decoration: none; color: #ffffff; }
.look-une-lien:hover { color: #ffffff; }
.look-une-img { width: 100%; height: clamp(320px, 52vw, 520px); object-fit: cover; display: block; }
.look-une-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(3, 4, 10, 0.93) 0%, rgba(3, 4, 10, 0.5) 46%, rgba(3, 4, 10, 0.05) 76%);
}
.look-une-contenu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.6rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}
.look-une-titre {
	font-family: var(--font-title);
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	line-height: 1.15;
	text-transform: uppercase;
}
.look-une-extrait { color: rgba(255, 255, 255, 0.86); max-width: 62ch; }
.look-une-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; }
.look-magazine-grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}
.look-carte {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	overflow: hidden;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.look-carte:hover {
	transform: translateY(-3px);
	border-color: rgba(139, 92, 246, 0.55);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}
.look-carte-lien { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text); }
.look-carte-lien:hover { color: var(--text); }
.look-carte-media { position: relative; display: block; }
.look-carte-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.look-carte-media .look-chip { position: absolute; top: 0.6rem; left: 0.6rem; }
.look-carte-titre {
	font-family: var(--font-title);
	font-size: 1rem;
	line-height: 1.3;
	padding: 0.9rem 1rem 0.3rem;
}
.look-carte-date { color: var(--muted); font-size: 0.85rem; padding: 0 1rem 1rem; margin-top: auto; }

/* ---------- Nos signatures ---------- */
.look-signatures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
.look-signature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	padding: 1.6rem 1rem;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 20px;
	text-decoration: none;
	color: var(--text);
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.look-signature:hover {
	transform: translateY(-3px);
	border-color: rgba(255, 46, 158, 0.55);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
	color: var(--text);
}
.look-signature-mono,
.look-signature .author-monogram {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-title);
	font-size: 2.1rem;
	color: #ffffff;
	background: linear-gradient(140deg, var(--look-magenta), var(--look-violet));
	border: 2px solid rgba(255, 46, 158, 0.5);
	flex: none;
}
.look-signature img.author-portrait {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(255, 46, 158, 0.5);
}
.look-signature-nom { font-family: var(--font-title); font-size: 1.1rem; letter-spacing: 0.02em; }
.look-signature-domaine { color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

/* ---------- Bande devise ---------- */
.look-devise {
	position: relative;
	overflow: hidden;
	padding: 4.5rem 0;
	border-block: 1px solid var(--card-border);
	background: var(--bg-elev);
}
.look-devise-fond {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.look-devise-voile {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(4, 6, 13, 0.85), rgba(4, 6, 13, 0.45) 55%, rgba(4, 6, 13, 0.85));
}
.look-devise-contenu { position: relative; text-align: center; }
.look-devise-titre {
	font-family: var(--font-title);
	font-size: clamp(1.8rem, 4.6vw, 3.2rem);
	line-height: 1.12;
	text-transform: uppercase;
	color: #ffffff;
	margin: 0 0 0.7rem;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.65);
}
.look-devise-note {
	font-family: var(--font-marker);
	font-size: clamp(1.3rem, 2.6vw, 1.9rem);
	color: var(--gold);
	transform: rotate(-2deg);
	margin: 0 0 2rem;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.look-devise-liens { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.look-devise-lien {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-title);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	padding: 0.6rem 1.15rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: rgba(4, 6, 13, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.look-devise-lien:hover {
	color: #ffffff;
	border-color: var(--look-magenta);
	box-shadow: 0 8px 26px rgba(255, 46, 158, 0.3);
}

/* ---------- Pied de page : survol aux couleurs du look ---------- */
.site-footer a:hover { color: #ff6fb5; }

/* ---------- Responsive du look ---------- */
@media (max-width: 900px) {
	.hero-look-grille { grid-template-columns: 1fr; gap: 1.8rem; }
	.hero-look-visuel { max-width: 480px; }
	.look-magazine-grille { grid-template-columns: repeat(2, 1fr); }
	.look-signatures { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.look-tuiles { grid-template-columns: repeat(2, 1fr); }
	.look-une-img { height: 300px; }
	.look-une-contenu { padding: 1.1rem; }
	.look-devise { padding: 3rem 0; }
}

/* ============================================================
   ACCUEIL MAQUETTE (v2.2.24) — la maquette du propriétaire
   (2026-10-18) : « Monte le thème de cette façon […] juste les
   cases et les couleurs », « La page d'accueil se doit d'être
   comme ça ». APPENDICE STRICT : tout ce qui précède reste la
   feuille 2.2.23, octet pour octet ; rien au-dessus n'est
   retouché. Fonds noirs, cases sombres à bordure rouge sombre,
   accents rouge vif / bleu / violet de la maquette, bordures
   multicolores des tuiles, bouton JAUNE du bandeau.

   Bouton « SE CONNECTER » de l'en-tête (header.php) : rouge vif
   de la maquette, il mène au vrai système de comptes.

   Barre du bas : le lecteur RESTE le Lecteur Persistant du
   plugin (élément unique #lp-audio, aucun <audio> créé par le
   thème). Sur l'accueil seulement (body.home), sa barre est
   soulevée de la hauteur du dock de navigation du thème et
   reçoit les couleurs de la maquette ; le pied de page reçoit
   le même espace pour que rien ne passe sous le dock.
   ============================================================ */
.btn-connecter {
  background:#e8112d;
  border-color:#ff3b57;
  color:#fff;
  font-weight:800;
  letter-spacing:.04em;
}
.btn-connecter:hover,
.btn-connecter:focus-visible {
  background:#ff2233;
  border-color:#ff5c74;
  color:#fff;
}

.mq-rangs {
  max-width:1180px;
  margin:0 auto;
  padding:26px 20px 8px;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.mq-panel {
  background:#07070d;
  border:1px solid rgba(255,34,51,.32);
  border-radius:18px;
  padding:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.mq-panel-tete {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.mq-panel-icone { font-size:1.25rem; line-height:1; }
.mq-panel-titre {
  font-family:var(--font-title);
  font-size:1.3rem;
  letter-spacing:.03em;
  margin:0;
  color:var(--text);
}
.mq-panel-lien {
  margin-left:auto;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.3rem;
  line-height:1;
  text-decoration:none;
  flex:none;
}
.mq-panel-lien:hover { border-color:var(--cyan); color:var(--cyan); }

/* — Trois cartes colorées — */
.mq-cartes3 {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}
.mq-carte3 {
  border-radius:18px;
  padding:20px;
  background:#0a0a12;
  border:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mq-carte3--rouge   { border-color:rgba(255,34,51,.65);  box-shadow:0 0 0 1px rgba(255,34,51,.25),  0 14px 30px rgba(0,0,0,.5); }
.mq-carte3--bleue   { border-color:rgba(46,123,255,.65); box-shadow:0 0 0 1px rgba(46,123,255,.25), 0 14px 30px rgba(0,0,0,.5); }
.mq-carte3--violette{ border-color:rgba(139,92,246,.7);  box-shadow:0 0 0 1px rgba(139,92,246,.28), 0 14px 30px rgba(0,0,0,.5); }
.mq-carte3-icone { font-size:1.9rem; margin:0; line-height:1; }
.mq-carte3-titre {
  font-family:var(--font-title);
  font-size:1.35rem;
  letter-spacing:.02em;
  margin:0;
  color:#fff;
}
.mq-carte3-texte { color:var(--muted); margin:0; flex:1; }
.mq-carte3-btn {
  align-self:stretch;
  text-align:center;
  padding:12px 16px;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  letter-spacing:.03em;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.mq-carte3--rouge    .mq-carte3-btn { background:#e8112d; }
.mq-carte3--bleue    .mq-carte3-btn { background:#2e7bff; }
.mq-carte3--violette .mq-carte3-btn { background:#8b5cf6; }
.mq-carte3-btn:hover { filter:brightness(1.15); color:#fff; }

/* — Articles + musique — */
.mq-articles-grille {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:18px;
}
.mq-articles-liste {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.mq-carte-article,
.mq-carte-musique,
.mq-media-carte,
.mq-tendance {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mq-carte-article-media,
.mq-media-media {
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  aspect-ratio:16 / 10;
  background:#0b0e18;
}
.mq-carte-article-media img,
.mq-media-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mq-onglet {
  position:absolute;
  top:0;
  left:14px;
  width:52px;
  height:12px;
  border-radius:0 0 6px 6px;
}
.mq-onglet--rouge { background:#ff2233; }
.mq-onglet--bleue { background:#2e7bff; }
.mq-onglet--violet { background:#8b5cf6; }
.mq-carte-cat {
  color:var(--cyan);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin:0;
}
.mq-carte-titre {
  font-family:var(--font-title);
  font-size:1.12rem;
  line-height:1.25;
  margin:0;
}
.mq-carte-titre a { color:var(--text); text-decoration:none; }
.mq-carte-titre a:hover { color:var(--magenta); }
.mq-carte-date { color:var(--muted); font-size:.85rem; margin:0; }
.mq-carte-texte { color:var(--muted); margin:0; }

/* — Dix tuiles à bordures multicolores — */
.mq-tuiles10 {
  display:grid;
  grid-template-columns:repeat(10, 1fr);
  gap:12px;
}
.mq-tuile10 {
  border:2px solid var(--line);
  border-radius:14px;
  background:#0b0e18;
  padding:12px 6px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
  text-decoration:none;
  color:var(--text);
}
.mq-tuile10:nth-child(1)  { border-color:#ff2233; }
.mq-tuile10:nth-child(2)  { border-color:#35e0ff; }
.mq-tuile10:nth-child(3)  { border-color:#8b5cf6; }
.mq-tuile10:nth-child(4)  { border-color:#eec25e; }
.mq-tuile10:nth-child(5)  { border-color:#37e08b; }
.mq-tuile10:nth-child(6)  { border-color:#2e7bff; }
.mq-tuile10:nth-child(7)  { border-color:#eec25e; }
.mq-tuile10:nth-child(8)  { border-color:#37e08b; }
.mq-tuile10:nth-child(9)  { border-color:#2e7bff; }
.mq-tuile10:nth-child(10) { border-color:#eec25e; }
.mq-tuile10:hover { background:#12172b; transform:translateY(-2px); }
.mq-tuile10-icone { font-size:1.45rem; line-height:1; }
.mq-tuile10-nom { font-size:.78rem; font-weight:700; line-height:1.2; }

/* — Boutique : 5 produits + couronne — */
.mq-boutique-grille {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
}
.mq-produits {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.mq-produit {
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
}
.mq-produit-bande {
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:12px;
}
.mq-produit--bleue   .mq-produit-bande { background:#2e7bff; }
.mq-produit--sombre  .mq-produit-bande { background:#23283d; }
.mq-produit--rouge   .mq-produit-bande { background:#e8112d; }
.mq-produit--violette .mq-produit-bande { background:#8b5cf6; }
.mq-produit--rouge::after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-style:solid;
  border-width:0 26px 26px 0;
  border-color:transparent #8b5cf6 transparent transparent;
}
.mq-produit-titre {
  font-family:var(--font-title);
  font-size:1.08rem;
  margin:10px 0 0;
}
.mq-produit-texte { color:var(--muted); font-size:.92rem; margin:0; flex:1; }
.mq-produit-prix {
  font-family:var(--font-title);
  font-size:1.2rem;
  color:var(--gold);
  margin:0;
}
.mq-produit-btn {
  text-align:center;
  padding:9px 10px;
  border-radius:10px;
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.mq-produit--bleue   .mq-produit-btn { background:#2e7bff; }
.mq-produit--sombre  .mq-produit-btn { background:#23283d; }
.mq-produit--rouge   .mq-produit-btn { background:#e8112d; }
.mq-produit--violette .mq-produit-btn { background:#8b5cf6; }
.mq-produit-btn:hover { filter:brightness(1.18); color:#fff; }
.mq-couronne {
  background:#0a0a12;
  border:1px solid rgba(238,194,94,.55);
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.mq-couronne-icone { font-size:2rem; margin:0; line-height:1; }
.mq-couronne-titre {
  font-family:var(--font-title);
  font-size:1.5rem;
  margin:0;
  color:#fff;
}
.mq-couronne-texte { color:var(--muted); margin:0; flex:1; }
.mq-couronne-btn {
  align-self:stretch;
  text-align:center;
  background:#e8112d;
  color:#fff;
  font-weight:800;
  padding:13px 16px;
  border-radius:12px;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.mq-couronne-btn:hover { background:#ff2233; color:#fff; }

/* — Médias + tendance — */
.mq-medias-grille {
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
}
.mq-medias-liste {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.mq-media-play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:54px;
  height:54px;
  border-radius:50%;
  background:rgba(4,6,13,.72);
  border:2px solid #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  padding-left:4px;
}
.mq-tendance { border-color:rgba(255,34,51,.5); }
.mq-tendance-icone { font-size:1.8rem; margin:0; line-height:1; }
.mq-tendance-tag {
  align-self:flex-start;
  background:#e8112d;
  color:#fff;
  font-weight:800;
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin:auto 0 0;
}

/* — Bande de 5 cellules — */
.mq-bande5 {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
}
.mq-cellule {
  background:#0d0f16;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
}
.mq-cellule-icone { font-size:1.9rem; line-height:1; flex:none; }
.mq-cellule-textes { display:flex; flex-direction:column; gap:2px; }
.mq-cellule-textes strong { color:#fff; font-size:.98rem; }
.mq-cellule-textes span { color:var(--muted); font-size:.85rem; line-height:1.35; }

/* — Bandeau concours : couronne + bouton JAUNE — */
.mq-bandeau {
  background:linear-gradient(120deg, #12081f, #1c0b2e 55%, #12081f);
  border:1px solid rgba(139,92,246,.55);
  border-radius:18px;
  padding:22px;
  display:flex;
  align-items:center;
  gap:20px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.mq-bandeau-textes { flex:1; }
.mq-bandeau-titre {
  font-family:var(--font-title);
  font-size:1.55rem;
  margin:0 0 6px;
  color:#fff;
}
.mq-bandeau-texte { color:#cfc6e8; margin:0; }
.mq-bandeau-couronne { font-size:2.2rem; color:var(--gold); line-height:1; }
.mq-bandeau-btn {
  background:#ffd21f;
  color:#14100a;
  font-weight:900;
  letter-spacing:.03em;
  padding:15px 30px;
  border-radius:12px;
  text-decoration:none;
  flex:none;
}
.mq-bandeau-btn:hover { background:#ffe14d; color:#14100a; }

/* — Rail vertical de droite (bureau, accueil) — */
.mq-rail {
  position:fixed;
  top:110px;
  right:10px;
  z-index:900;
  display:none;
  flex-direction:column;
  gap:14px;
}
@media (min-width:1280px) {
  .mq-rail { display:flex; }
}
.mq-rail-nav {
  background:rgba(5,6,10,.92);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mq-rail-lien {
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:10px;
  color:#e8e8f2;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
}
.mq-rail-lien:hover { background:rgba(255,46,158,.16); color:#fff; }
.mq-rail-icone { font-size:1.05rem; line-height:1; }
.mq-flottants {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
.mq-flottant {
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(5,6,10,.92);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  text-decoration:none;
}
.mq-flottant:hover { border-color:var(--magenta); }

/* — Barre du bas : dock de navigation + lecteur soulevé — */
.mq-dock {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:58px;
  z-index:9980;
  background:#05060a;
  border-top:1px solid rgba(255,46,158,.4);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  padding:0 10px;
}
.mq-dock-lien {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:#cfd2e8;
  text-decoration:none;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.02em;
}
.mq-dock-lien:first-child { color:#ff5c74; }
.mq-dock-lien:hover { color:#fff; }
.mq-dock-icone { font-size:1.15rem; line-height:1; }
body.home .rint-lecteur { bottom:58px; }
body.home .site-footer { padding-bottom:74px; }
body.home .rint-lecteur {
  background:#05060a;
  border-top:1px solid rgba(255,34,51,.45);
}

/* — Responsive maquette — */
@media (max-width:1023px) {
  .mq-articles-grille,
  .mq-boutique-grille,
  .mq-medias-grille { grid-template-columns:1fr; }
  .mq-produits { grid-template-columns:repeat(3, 1fr); }
  .mq-tuiles10 { grid-template-columns:repeat(5, 1fr); }
  .mq-bande5 { grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:767px) {
  .mq-rangs { padding:18px 12px 4px; gap:18px; }
  .mq-cartes3 { grid-template-columns:1fr; }
  .mq-articles-liste,
  .mq-medias-liste { grid-template-columns:1fr; }
  .mq-produits { grid-template-columns:1fr 1fr; }
  .mq-tuiles10 { grid-template-columns:repeat(3, 1fr); }
  .mq-bande5 { grid-template-columns:1fr; }
  .mq-bandeau { flex-direction:column; align-items:stretch; text-align:left; }
  .mq-bandeau-couronne { display:none; }
  .mq-bandeau-btn { text-align:center; }
  .mq-dock-nom { font-size:.62rem; }
  .mq-dock { padding:0 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-tuile10:hover { transform:none; }
}

/* — Fusion « structure d'accueil » reçue le 2026-10-18 —
   panneau EN DIRECT (le bloc réel du module En Direct, quand
   il est actif ; sinon les liens réels vers /ecouter/ et le
   guide horaire — jamais de fausse file), preuves chiffrées
   RÉELLES seulement (140+ articles publiés, 1 568 chansons
   Suno vérifiées, 41 entrevues, 30+ ans de métier — aucun
   témoignage, aucun compteur fabriqué), titre « Pourquoi
   RadioInternet.ca » au-dessus de la bande de 5 cellules, et
   pied de section (Tarifs · À propos · Contact). */
.mq-direct { border-color:rgba(255,34,51,.55); }
.mq-direct-texte { color:var(--muted); margin:0 0 14px; }
.mq-direct-actions { display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.mq-direct-btn {
  background:#e8112d;
  color:#fff;
  font-weight:800;
  letter-spacing:.03em;
  padding:13px 22px;
  border-radius:12px;
  text-decoration:none;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}
.mq-direct-btn:hover { background:#ff2233; color:#fff; }
.mq-direct-btn2 {
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  font-weight:700;
  padding:13px 22px;
  border-radius:12px;
  text-decoration:none;
}
.mq-direct-btn2:hover { border-color:var(--cyan); color:var(--cyan); }
.mq-preuves {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.mq-preuve {
  background:#0a0a12;
  border:1px solid rgba(139,92,246,.45);
  border-radius:16px;
  padding:18px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
}
.mq-preuve-chiffre {
  font-family:var(--font-title);
  font-size:2.1rem;
  line-height:1;
  background:linear-gradient(120deg, #ff2e9e, #8b5cf6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.mq-preuve-libelle { color:var(--muted); font-size:.92rem; font-weight:600; }
.mq-titre-section {
  font-family:var(--font-title);
  font-size:1.6rem;
  letter-spacing:.02em;
  margin:0 0 -8px;
  color:var(--text);
}
.mq-pied {
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  justify-content:center;
  padding:6px 0 2px;
}
.mq-pied a {
  color:var(--muted);
  font-weight:700;
  text-decoration:none;
  letter-spacing:.03em;
}
.mq-pied a:hover { color:var(--magenta); }
@media (max-width:767px) {
  .mq-preuves { grid-template-columns:1fr 1fr; }
  .mq-direct-actions .mq-direct-btn,
  .mq-direct-actions .mq-direct-btn2 { flex:1; text-align:center; }
}

/* ============================================================
   ACCUEIL MAQUETTE MOBILE (v2.2.25) — la maquette du
   propriétaire, pensée pour le TÉLÉPHONE (2026-10-18, soir).
   Déclencheur : le propriétaire regarde son site sur son
   iPhone et dit « je n'ai pas remarqué le changement ». La
   2.2.24 empilait les rangées, mais la COMPOSITION de la
   maquette remplie ne paraissait pas aux largeurs 360-430 px,
   et le slogan de la maquette (« LA RADIO NOUVELLE
   GÉNÉRATION », sous le logo) était masqué sous 640 px par
   une règle héritée. APPENDICE STRICT : tout ce qui précède
   reste la feuille 2.2.24, octet pour octet ; cet appendice
   ne fait que surcharger, presque uniquement sous 1280 px.
   Hors mobile, seuls la pastille EN DIRECT et la loupe de
   l'en-tête (présentes à toutes les largeurs, comme la
   maquette) et l'encoche sûre du dock s'ajoutent. Contenus :
   ceux de la 2.2.24, réels — aucun forfait inventé, aucun
   compteur fabriqué, aucune personne ajoutée ; le lecteur
   reste le Lecteur Persistant du plugin, le thème ne crée
   toujours aucun élément audio.
   ============================================================ */

/* — En-tête façon maquette : pastille EN DIRECT — */
.hdr-live {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  color:#fff;
  font-weight:800;
  letter-spacing:.06em;
  font-size:.74rem;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid rgba(255,34,51,.6);
  border-radius:999px;
  padding:.45rem .7rem;
  background:rgba(232,17,45,.12);
  flex:none;
}
.hdr-live:hover { color:#fff; border-color:#ff3b57; }
.hdr-live-point {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff2233;
  box-shadow:0 0 8px rgba(255,34,51,.9);
  flex:none;
  animation:hdr-live-pulse 1.6s ease-in-out infinite;
}
@keyframes hdr-live-pulse {
  0%, 100% { opacity:1; }
  50% { opacity:.35; }
}

/* — En-tête façon maquette : loupe et recherche réelle — */
.hdr-search { position:relative; flex:none; }
.hdr-search-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  font-size:1rem;
  line-height:1;
  color:#fff;
  cursor:pointer;
  list-style:none;
}
.hdr-search-btn::-webkit-details-marker { display:none; }
.hdr-search[open] .hdr-search-btn { border-color:var(--cyan); }
.hdr-search-label {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.hdr-search-form {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  display:flex;
  gap:8px;
  background:#0a0a12;
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:10px;
  z-index:1300;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.hdr-search-form input[type="search"] {
  background:#12172b;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  color:#fff;
  padding:.55rem .7rem;
  min-width:180px;
  font-size:.95rem;
}
.hdr-search-form button {
  background:#e8112d;
  color:#fff;
  border:0;
  border-radius:9px;
  padding:.55rem .9rem;
  font-weight:800;
  cursor:pointer;
}
.hdr-search-form button:hover { background:#ff2233; }

/* — Dock et lecteur : encoche sûre des téléphones — */
.mq-dock {
  height:calc(58px + env(safe-area-inset-bottom, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.home .rint-lecteur { bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
body.home .site-footer { padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px)); }

/* — Rail d'icônes au bord droit, sur mobile aussi —
   La maquette garde son rail au bord droit à toutes les
   largeurs. Sous 1280 px, la colonne des libellés (bureau)
   se retire et il reste les quatre accès flottants de la
   2.2.24, en pastilles au bord droit, au milieu de l'écran :
   écrire, le Palmarès, le guide horaire, remonter. */
@media (max-width:1279px) {
  .mq-rail {
    display:flex;
    top:50%;
    transform:translateY(-50%);
    right:6px;
  }
  .mq-rail-nav { display:none; }
  .mq-flottant {
    width:40px;
    height:40px;
    font-size:1rem;
    background:rgba(5,6,10,.86);
  }
}

/* — En-tête compact sous 860 px : la maquette ne montre
   qu'un seul bouton (SE CONNECTER) à côté du hamburger ; le
   bouton d'appel « Tout est gratuit » reste offert dans le
   panneau du menu mobile, où il vit déjà en pleine largeur. */
@media (max-width:860px) {
  .header-actions .btn-primary { display:none; }
  .header-actions { gap:.5rem; }
}

/* — Téléphone (360-640 px) : l'en-tête de la maquette — */
@media (max-width:640px) {
  .brand {
    flex-direction:column;
    align-items:flex-start;
    gap:0;
  }
  .brand-sub {
    display:block;
    font-size:.58rem;
    letter-spacing:.16em;
    margin-top:2px;
  }
  .header-inner { gap:.5rem; }
  .hdr-live { font-size:.66rem; padding:.36rem .52rem; gap:.35rem; }
  .hdr-search-btn { width:36px; height:36px; font-size:.92rem; }
  .hdr-search-form {
    position:fixed;
    left:10px;
    right:10px;
    top:calc(var(--header-h, 72px) + 6px);
  }
  .hdr-search-form input[type="search"] { flex:1; min-width:0; }
}
@media (max-width:380px) {
  .brand-text { font-size:.78rem; }
  .hdr-live { font-size:.6rem; padding:.32rem .44rem; }
  .header-actions .btn-connecter { padding:.45rem .5rem; font-size:.7rem; }
}

/* — Héros plein écran au téléphone — */
@media (max-width:767px) {
  .hero-look-grille { gap:1.4rem; }
  .hero-look-visuel { max-width:none; }
  .hero-look-img { max-height:400px; }
  .hero-slogan { font-size:1.12rem; }
  .hero-look-note { font-size:1.1rem; margin-top:.8rem; }
}

/* — Rangées de la maquette au téléphone — */
@media (max-width:767px) {
  .mq-rangs { padding:16px 10px 4px; gap:16px; }
  .mq-panel { padding:14px; }
  .mq-panel-titre { font-size:1.12rem; }
  .mq-panel-lien { width:30px; height:30px; font-size:1.1rem; }
  .mq-carte3 { padding:16px; gap:8px; }
  .mq-carte3-titre { font-size:1.18rem; }
  .mq-carte3-icone { font-size:1.6rem; }
  /* Articles et médias : la rangée de cartes de la maquette
     devient un défilement horizontal au doigt (accroche au
     bord de chaque carte), la carte Musique et la carte
     Tendance gardent leur pleine largeur dessous. */
  .mq-articles-liste,
  .mq-medias-liste {
    display:flex;
    gap:12px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mq-articles-liste::-webkit-scrollbar,
  .mq-medias-liste::-webkit-scrollbar { display:none; }
  .mq-articles-liste .mq-carte-article,
  .mq-medias-liste .mq-media-carte {
    flex:0 0 76%;
    scroll-snap-align:start;
  }
  /* Tuiles services : cinq par rangée, icône ET libellé,
     comme la rangée unique de la maquette, en deux rangées. */
  .mq-tuiles10 { grid-template-columns:repeat(5, 1fr); gap:8px; }
  .mq-tuile10 { padding:9px 2px 8px; border-radius:11px; gap:5px; }
  .mq-tuile10-icone { font-size:1.15rem; }
  .mq-tuile10-nom { font-size:.6rem; line-height:1.15; }
  /* Boutique : cartes resserrées, prix lisibles. */
  .mq-produits { gap:10px; }
  .mq-produit { padding:12px 10px; }
  .mq-produit-titre { font-size:.98rem; }
  .mq-produit-texte { font-size:.84rem; }
  .mq-produit-prix { font-size:1.05rem; }
  .mq-produit-btn { font-size:.8rem; padding:8px 6px; }
  .mq-couronne { padding:16px; }
  .mq-couronne-titre { font-size:1.3rem; }
  /* Preuves : la bande de chiffres de la maquette tient sur
     une seule rangée, quatre cellules. */
  .mq-preuves { grid-template-columns:repeat(4, 1fr); gap:8px; }
  .mq-preuve { padding:12px 5px; border-radius:12px; gap:2px; }
  .mq-preuve-chiffre { font-size:1.3rem; }
  .mq-preuve-libelle { font-size:.64rem; line-height:1.25; }
  /* Bande avantages : cellules compactes, une par rangée. */
  .mq-bande5 { gap:10px; }
  .mq-cellule { padding:10px 12px; }
  .mq-cellule-icone { font-size:1.35rem; }
  .mq-cellule-textes strong { font-size:.9rem; }
  .mq-cellule-textes span { font-size:.8rem; }
  /* Bandeau concours : la couronne de la maquette paraît
     aussi au téléphone, au-dessus du bouton jaune. */
  .mq-bandeau-couronne { display:block; align-self:center; font-size:1.7rem; }
  .mq-titre-section { font-size:1.3rem; }
  .mq-dock-nom { font-size:.6rem; }
}
@media (max-width:380px) {
  .mq-tuiles10 { gap:6px; }
  .mq-tuile10-nom { font-size:.56rem; }
  .mq-preuve-chiffre { font-size:1.15rem; }
  .mq-preuve-libelle { font-size:.6rem; }
  .mq-articles-liste .mq-carte-article,
  .mq-medias-liste .mq-media-carte { flex-basis:82%; }
}
@media (prefers-reduced-motion: reduce) {
  .hdr-live-point { animation:none; }
}