/* ==========================================================================
   ESE — Espace créatif, langage éditorial adapté à la dominante sombre :
   le texte respire, l’azur accompagne, l’italique est réservé aux citations.
   ========================================================================== */

:root { --crea-panel: #2E3136; --crea-line: rgba(255, 255, 255, .1); }

/* ---------- Héros sombre ---------- */
.crea-hero { position: relative; isolation: isolate; overflow: hidden; padding: 80px 0 128px; }
.crea-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.crea-hero__lead { font-size: 18px; line-height: 1.65; color: var(--ese-gris-clair); max-width: 540px; margin-top: 22px; }
.crea-stats { border-top-color: var(--crea-line); }
.crea-stats dt { color: var(--ese-texte-4); }
.crea-stats dd { color: var(--ese-azur); }
.crea-hero .waves--hero { bottom: -30px; }

/* Sommaire des thèmes, version sombre */
.index-card--dark { background: var(--crea-panel); color: #fff; border: 1px solid var(--crea-line); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); }
.index-card--dark .index-card__head { color: var(--ese-texte-4); border-bottom-color: var(--crea-line); }
.index-card--dark .index-card__head span:first-child { color: var(--ese-azur); }
.index-card--dark .index-card__list li + li { border-top-color: rgba(255, 255, 255, .07); }
.index-card--dark .index-card__list a { grid-template-columns: 26px 1fr auto; color: #fff; }
.index-card--dark .index-card__num { color: var(--ese-texte-4); }
.index-card--dark .index-card__count { background: rgba(255, 255, 255, .08); color: var(--ese-gris-clair); }
.index-card--dark .index-card__list a:hover,
.index-card--dark .index-card__list a:focus-visible,
.index-card--dark .index-card__list a.is-active { background: rgba(89, 183, 232, .12); color: var(--ese-azur); }
.index-card--dark .index-card__list a:hover .index-card__num { color: var(--ese-azur); }

/* ---------- Texte en avant ---------- */
.spotlight { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-top: 72px; padding-bottom: 96px; color: #fff; }
.spotlight .eyebrow { color: var(--ese-azur); }
.spotlight__quote {
	position: relative;
	margin: 22px 0 0;
	padding-left: 28px;
	font-size: clamp(24px, 3vw, 38px);
	font-style: italic;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.spotlight__quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	bottom: .2em;
	width: 2px;
	background: var(--ese-azur);
	transform-origin: top;
	transition: transform 1.2s var(--ease-out) .2s;
}
.js .spotlight__quote:not(.is-in)::before { transform: scaleY(0); }
.spotlight__title { font-size: 22px; margin-top: 30px; }
.spotlight__meta { font-size: 13.5px; color: var(--ese-texte-4); margin-top: 6px; }
.spotlight .btn-row { margin-top: 26px; }
.spotlight__media { border-radius: 20px; overflow: hidden; }
.spotlight__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.spotlight__media iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; }

/* Carte d’écoute */
.listen {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	min-height: 380px;
	padding: 32px;
	border-radius: 24px;
	background: var(--crea-panel);
	border: 1px solid var(--crea-line);
	text-align: center;
}
.listen .waves--listen { left: 0; width: 100%; margin-left: 0; top: 30%; bottom: auto; height: 150px; }
.listen__play {
	position: relative;
	width: 112px;
	height: 112px;
	border: 0;
	border-radius: 50%;
	background: var(--ese-azur);
	color: var(--ese-sombre-creatif);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	transition: transform var(--dur-md) var(--ease-out), background-color var(--dur-sm);
}
.listen__play:hover { transform: scale(1.04); background: #7AC6EE; }
.listen__play:active { transform: scale(.97); }
.listen__ring { position: absolute; inset: -10px; border: 1.5px solid var(--ese-azur); border-radius: 50%; opacity: .45; animation: ese-ring 2.6s var(--ease-out) infinite; pointer-events: none; }
.listen__play.is-playing .listen__ring { animation: none; opacity: .25; }
@keyframes ese-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } }
.listen__icon--play { display: flex; margin-left: 4px; }
.listen__icon--pause { display: none; gap: 6px; }
.listen__icon--pause i { width: 5px; height: 24px; border-radius: 2px; background: currentColor; }
.is-playing .listen__icon--play { display: none; }
.is-playing .listen__icon--pause { display: flex; }
.listen__label strong { font-size: 18px; }
.listen__label span { margin-left: 8px; font-size: 13.5px; color: var(--ese-texte-4); font-variant-numeric: tabular-nums; }
.listen__note { font-size: 12.5px; color: var(--ese-texte-4); }
.listen--quote span { font-size: 220px; line-height: 1; color: var(--ese-azur); opacity: .3; }

/* ---------- Encart chronique ---------- */
.chron {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 48px;
	align-items: center;
	margin-bottom: 96px;
	padding: 48px;
	border-radius: 24px;
	border: 1px solid var(--crea-line);
	background: rgba(255, 255, 255, .03);
	color: #fff;
}
.chron::before {
	content: "";
	position: absolute;
	inset: 0 0 0 55%;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%2359B7E8'/%3E%3C/svg%3E");
	opacity: .1;
}
.chron .eyebrow { color: var(--ese-azur); }
.chron__title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.015em; margin-top: 12px; }
.chron__text { font-size: 15.5px; line-height: 1.6; color: var(--ese-gris-clair); margin-top: 12px; }
.chron .btn-row { margin-top: 24px; }
.chron__list { list-style: none; margin: 0; padding: 0; }
.chron__list li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; padding: 16px 0; }
.chron__list li + li { border-top: 1px solid var(--crea-line); }
.chron__num { font-size: 24px; font-weight: 700; color: var(--ese-azur); font-variant-numeric: tabular-nums; transition: transform var(--dur-md) var(--ease-out); }
.chron__name { font-size: 17px; font-weight: 600; color: #fff; text-decoration: none; transition: color var(--dur-sm); }
a.chron__name:hover { color: var(--ese-azur); }
.chron__list li:hover .chron__num { transform: translateX(4px); }
.chron__list small { font-size: 13px; color: var(--ese-texte-4); }
.chron__list .is-soon { opacity: .5; }

/* ---------- Feuille claire : tous les textes ---------- */
.crea-sheet { padding: 72px 0 96px; }
.crea-sheet .eyebrow { color: var(--ese-bleu-pro); }
.crea-list__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.crea-list__tools { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; width: 100%; }
.crea-list__tools .chips { margin: 0; justify-content: flex-start; }
/* La feuille est claire : les pastilles reprennent le style clair malgré l’ambiance sombre de la page. */
.crea-sheet .chip { background: #fff; border-color: var(--ese-bordure-2); color: var(--ese-texte-2); box-shadow: none; }
.crea-sheet .chip:hover { border-color: var(--ese-bleu-pro); color: var(--ese-bleu-pro); }
.crea-sheet .chip.is-active { background: var(--ese-bleu-pro); border-color: var(--ese-bleu-pro); color: #fff; font-weight: 600; box-shadow: none; }

.tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.tcard {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 250px;
	padding: 26px;
	background: #fff;
	border: 1px solid var(--ese-bordure);
	border-radius: var(--radius-panel);
	transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.tcard::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: var(--ese-bleu-pro);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-lg) var(--ease-out);
}
.tcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(38, 41, 46, .09); }
.tcard:hover::before { transform: scaleX(1); }
.tcard__top { display: flex; align-items: center; justify-content: space-between; }
.tcard__theme { font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ese-bleu-pro); }
.tcard__num { font-size: 13px; font-weight: 700; color: var(--ese-texte-4); font-variant-numeric: tabular-nums; transition: color var(--dur-sm); }
.tcard:hover .tcard__num { color: var(--ese-bleu-pro); }
.tcard__title { font-size: 20px; line-height: 1.3; margin-top: 4px; }
.tcard__title a { color: var(--ese-texte); text-decoration: none; transition: color var(--dur-sm); }
.tcard:hover .tcard__title a { color: var(--ese-bleu-pro); }
.tcard__desc { font-size: 14.5px; line-height: 1.6; color: var(--ese-texte-2); flex: 1; }
.tcard__foot { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--ese-bordure); }
.tcard__type { padding: 4px 10px; border-radius: 20px; background: var(--ese-surface); font-size: 11.5px; font-weight: 600; color: var(--ese-texte-2); }
.tcard__meta { font-size: 12.5px; color: var(--ese-texte-3); font-variant-numeric: tabular-nums; }
.tcard__foot .pcard__go { margin-left: auto; }
.tcard__play {
	position: relative;
	z-index: 2;
	margin-left: auto;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: var(--ese-bleu-tint);
	color: var(--ese-bleu-pro);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color var(--dur-sm), color var(--dur-sm), transform var(--dur-xs);
}
.tcard__play .listen__icon--play { margin-left: 2px; }
.tcard__play .listen__icon--pause i { width: 3px; height: 12px; }
.tcard__play .listen__icon--pause { gap: 3px; }
.tcard__play:hover, .tcard__play.is-playing { background: var(--ese-bleu-pro); color: #fff; }
.tcard__play:active { transform: scale(.94); }
.tcard__play + .pcard__go { margin-left: 0; }

/* Recueil */
.recueil {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
	margin-top: 40px;
	padding: 28px 32px;
	background: #fff;
	border: 1px solid var(--ese-bordure);
	border-radius: 20px;
}
.recueil__cover { font-size: 8px; transform: rotate(-4deg); transition: transform var(--dur-lg) var(--ease-out); }
.recueil:hover .recueil__cover { transform: rotate(0) translateY(-4px); }
.recueil__title { font-size: 21px; margin-top: 6px; }
.recueil__text { font-size: 14.5px; color: var(--ese-texte-2); margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crea-hero__grid, .spotlight { gap: 40px; }
}
@media (max-width: 899px) {
	.crea-hero { padding: 48px 0 96px; }
	.crea-hero__grid, .spotlight, .chron { grid-template-columns: 1fr; }
	.spotlight { padding-top: 40px; padding-bottom: 64px; }
	.listen { min-height: 300px; }
	.chron { padding: 28px; gap: 28px; margin-bottom: 64px; }
	.recueil { grid-template-columns: 80px minmax(0, 1fr); padding: 24px; gap: 20px; }
	.recueil > .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) {
	.tgrid { grid-template-columns: 1fr; gap: 12px; }
	.tcard { min-height: 0; padding: 20px; }
	.crea-sheet { padding: 40px 0 64px; }
}
@media (prefers-reduced-motion: reduce) {
	.listen__ring { animation: none; }
	.js .spotlight__quote:not(.is-in)::before { transform: none; }
}