/* ==========================================================================
   ESE — Ambiance (phase 2) : fonds, animations, transitions.
   Règles de la charte respectées : palette fixe, aucun dégradé, azur seulement
   sur fond sombre ou en détail, pas d’effet de rebond, le texte reste central.
   ========================================================================== */

:root {
	/* Jetons de mouvement : décélération à l’arrivée, accélération au départ. */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in: cubic-bezier(.7, 0, .84, 0);
	--ease-std: cubic-bezier(.4, 0, .2, 1);
	--dur-xs: 140ms;
	--dur-sm: 220ms;
	--dur-md: 420ms;
	--dur-lg: 800ms;
	--admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* Pied de page toujours en bas : la page occupe au moins l’écran (moins la barre d’admin). */
#ese-swap { min-height: calc(100vh - var(--admin-bar)); min-height: calc(100dvh - var(--admin-bar)); display: flex; flex-direction: column; }
.site-footer { margin-top: auto; }
/* La place réservée au lecteur flottant est prise dans le pied de page, pas sous lui. */
body.has-player { padding-bottom: 0; }
body.has-player .site-footer { padding-bottom: 96px; }
.site-main { overflow-x: clip; flex: 1 0 auto; }

/* ---------- 1. Grain papier (évoque la page écrite) ---------- */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .16 0 0 0 0 .18 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.is-dark::after { opacity: .07; }

/* ---------- 2. En-tête collant, compact au défilement ---------- */
.site-header {
	position: sticky;
	top: var(--admin-bar);
	background: rgba(250, 250, 247, .88);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-sm) var(--ease-std), background-color var(--dur-sm);
	view-transition-name: site-header;
}
.is-dark .site-header { background: rgba(38, 41, 46, .86); }
.site-header__inner { transition: min-height var(--dur-sm) var(--ease-std), padding var(--dur-sm) var(--ease-std); }
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(38, 41, 46, .06), 0 8px 24px rgba(38, 41, 46, .06); }
.is-dark .site-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.site-header.is-scrolled .site-header__inner { min-height: 58px; padding-block: 12px; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .ese-mark { transition: transform var(--dur-md) var(--ease-out); }
.brand:hover .ese-mark { transform: translateY(-2px); }

/* Liens du menu : trait qui se dessine de gauche à droite */
.site-nav__list > li > a { position: relative; padding-block: 6px; }
.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1.5px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-md) var(--ease-out);
}
.site-nav__list > li > a:hover::after,
.site-nav__list > .current-menu-item > a::after,
.site-nav__list > .current-menu-ancestor > a::after,
.site-nav__list > .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }

/* Barre de progression de lecture */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.read-progress span {
	display: block;
	height: 100%;
	background: var(--ese-bleu-pro);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
}
.is-dark .read-progress span { background: var(--ese-azur); }

/* Cible tactile ≥ 44 px pour le menu mobile */
.burger { width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -12px; }

@media (max-width: 899px) {
	.site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ese-fond); }
	.is-dark .site-header { background: var(--ese-sombre-creatif); }
	.site-nav.is-open .site-nav__list > li { animation: ese-item-in var(--dur-md) var(--ease-out) both; }
	.site-nav.is-open .site-nav__list > li:nth-child(2) { animation-delay: 40ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(3) { animation-delay: 80ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(4) { animation-delay: 120ms; }
	.site-nav.is-open .site-nav__list > li:nth-child(5) { animation-delay: 160ms; }
	.site-nav__list > li > a::after { display: none; }
}
@keyframes ese-item-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 3. Accueil : emblème en filigrane ---------- */
.hero--home { position: relative; isolation: isolate; }
.emblem-bg {
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: min(300px, 56vw);
	translate: -50% calc(-58% + var(--parallax, 0px));
	pointer-events: none;
}
.emblem-bg svg { width: 100%; height: auto; display: block; overflow: visible; }
.emblem-bg__drop { fill: var(--ese-bleu-pro); opacity: .045; transform-origin: 50% 30%; animation: ese-emblem-drop 1.6s var(--ease-out) both; }
.emblem-bg__stroke {
	fill: none;
	stroke: var(--ese-sombre-creatif);
	stroke-width: 4;
	stroke-linecap: round;
	opacity: .055;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: ese-draw 1.8s var(--ease-out) .35s forwards;
}
.emblem-bg__stroke:nth-of-type(3) { animation-delay: .9s; }
.emblem-bg__stroke:nth-of-type(4) { animation-delay: 1.05s; }
@keyframes ese-emblem-drop { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: .045; transform: none; } }
.emblem-bg__cut { fill: var(--ese-fond); }
.emblem-bg__cut-line { stroke: var(--ese-fond); stroke-width: 6; stroke-linecap: round; }
@keyframes ese-draw { to { stroke-dashoffset: 0; } }

/* ---------- 4. Ondes sonores (sections sombres) ---------- */
.waves {
	position: absolute;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	bottom: 0;
	height: 180px;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}
.waves svg { width: 100%; height: 100%; display: block; overflow: hidden; }
.waves__line {
	fill: none;
	stroke: var(--ese-azur);
	stroke-width: 1.25;
	vector-effect: non-scaling-stroke;
	animation: ese-wave 46s linear infinite;
}
.waves__line--1 { opacity: .32; }
.waves__line--2 { opacity: .18; animation-duration: 62s; animation-direction: reverse; }
.waves__line--3 { opacity: .12; animation-duration: 80s; }
.waves__line--4 { opacity: .22; animation-duration: 36s; animation-direction: reverse; }
@keyframes ese-wave { from { transform: translateX(0); } to { transform: translateX(-1440px); } }

.is-dark .hero, .band--dark, .newsletter { position: relative; isolation: isolate; }
.band--dark, .newsletter { overflow: hidden; }
.waves--hero { bottom: -60px; }
.waves--right { height: 150px; bottom: -64px; }
.waves--band { bottom: -46px; height: 120px; }
.waves--band .waves__line--1 { opacity: .2; }
@media (max-width: 767px) {
	.waves { height: 110px; }
}

/* ---------- 5. Bleu pro : trame de points (structure, rigueur) ---------- */
.band--blue, .space--pro { position: relative; isolation: isolate; overflow: hidden; }
.band--blue::before, .space--pro::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	right: 0;
	width: 46%;
	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='%23fff'/%3E%3C/svg%3E");
	opacity: .16;
	transition: transform 1.2s var(--ease-out), opacity var(--dur-md);
}
.space--pro::before { width: 52%; }

/* Espace créatif (carte d’accueil) : ondes statiques qui glissent au survol */
.space--crea { position: relative; isolation: isolate; overflow: hidden; }
.space--crea::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: -120px;
	bottom: 18px;
	height: 90px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'%3E%3Cpath d='M0 45 Q30 15 60 45 T120 45 T180 45 T240 45' fill='none' stroke='%2359B7E8' stroke-width='1.2' opacity='.5'/%3E%3Cpath d='M0 45 Q30 70 60 45 T120 45 T180 45 T240 45' fill='none' stroke='%2359B7E8' stroke-width='1' opacity='.28'/%3E%3C/svg%3E") repeat-x 0 0 / 240px 90px;
	opacity: .55;
	transition: transform 1.2s var(--ease-out), opacity var(--dur-md);
}
.space:hover::before { transform: translateX(-60px); opacity: .8; }
.space--pro:hover::before { transform: translateX(-12px); opacity: .24; }
.space { transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out); }
.space:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(38, 41, 46, .16); }
.space .btn { transition: background-color var(--dur-sm), color var(--dur-sm), padding var(--dur-md) var(--ease-out); }
.space .btn::after { content: "→"; display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width var(--dur-md) var(--ease-out), opacity var(--dur-sm); }
.space:hover .btn::after { width: 1.1em; opacity: 1; }

/* ---------- 6. Boutons, liens, cartes : retours de survol nets ---------- */
.btn { transition: background-color var(--dur-sm) var(--ease-std), color var(--dur-sm) var(--ease-std), border-color var(--dur-sm) var(--ease-std), box-shadow var(--dur-sm) var(--ease-std), transform var(--dur-xs) var(--ease-std); }
.btn:hover { transform: none; }
.btn:active { transform: scale(.98); }
.btn--blue:hover { box-shadow: 0 6px 18px rgba(31, 111, 178, .28); }
.btn--azur:hover { box-shadow: 0 6px 18px rgba(89, 183, 232, .25); }
.btn--white:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

.link { text-decoration-thickness: 1px; transition: color var(--dur-sm), text-underline-offset var(--dur-sm) var(--ease-out); }
.link:hover { text-underline-offset: 5px; }

.card { transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out), border-color var(--dur-sm); }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(38, 41, 46, .09); border-color: #E2E2DC; }
.card__title a {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--dur-sm), color var(--dur-sm);
}
.card:hover .card__title a { color: var(--ese-bleu-pro); text-decoration-color: currentColor; }
.card__icon svg { transition: transform var(--dur-md) var(--ease-out); }
.card:hover .card__icon svg { transform: rotate(-8deg) scale(1.1); }

.chip { transition: background-color var(--dur-sm), border-color var(--dur-sm), color var(--dur-sm), box-shadow var(--dur-sm); }
.chip:active { transform: scale(.97); }
@media (pointer: coarse) { .chip { min-height: 40px; display: inline-flex; align-items: center; } }

.ep { transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out); }
.ep__num { transition: transform var(--dur-md) var(--ease-out); }
.ep:not(.is-soon):hover { transform: translateX(6px); }
.ep:not(.is-soon):hover .ep__num { transform: translateX(-4px); }
.ep__title a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--dur-sm), color var(--dur-sm); }
.ep:hover .ep__title a { color: var(--ese-bleu-pro); text-decoration-color: currentColor; }
.icon-btn { width: 36px; height: 36px; transition: background-color var(--dur-sm), color var(--dur-sm), transform var(--dur-xs); }
.icon-btn:active { transform: scale(.94); }

.info, .banner-card, .form-card { transition: box-shadow var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out); }
.info:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(38, 41, 46, .07); }
.tile-icon { transition: background-color var(--dur-sm), color var(--dur-sm); }
.info:hover .tile-icon, .contact__list li:hover .tile-icon { background: var(--ese-bleu-pro); color: #fff; }

.featured__media img, .book__cover img, .about__portrait img { transition: transform 1.2s var(--ease-out); }
.featured:hover .featured__media img, .book:hover .book__cover img, .about__portrait:hover img { transform: scale(1.04); }

/* Champs de formulaire : focus net */
.ese-form input[type="text"], .ese-form input[type="email"], .ese-form select, .ese-form textarea, .input {
	transition: border-color var(--dur-sm), box-shadow var(--dur-sm);
}
.ese-form input:focus, .ese-form select:focus, .ese-form textarea:focus { box-shadow: 0 0 0 3px rgba(31, 111, 178, .14); }
.input:focus { box-shadow: 0 0 0 3px rgba(89, 183, 232, .3); }

/* ---------- 7. Citations : le filet azur se trace ---------- */
.quote { position: relative; border-left-color: transparent; }
.quote::before {
	content: "";
	position: absolute;
	left: -2px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ese-azur);
	transform-origin: top;
	transition: transform 1s var(--ease-out) .25s;
}
.js .quote:not(.is-in)::before { transform: scaleY(0); }

/* ---------- 8. Apparitions au défilement ---------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out);
	transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Titre de héros : les mots montent un à un, comme une ligne qu’on écrit */
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w > span { display: inline-block; }
.js .hero__title.is-split .w > span { transform: translateY(105%); transition: transform 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .hero__title.is-split.is-in .w > span { transform: none; }

/* ---------- 9. Lecteur flottant : égaliseur pendant l’écoute ---------- */
.player__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex-shrink: 0; }
.eq i { width: 2.5px; height: 100%; background: var(--ese-azur); border-radius: 1px; transform-origin: bottom; animation: ese-eq 1s var(--ease-std) infinite alternate; }
.eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.6s; }
.eq i:nth-child(4) { animation-duration: .9s; animation-delay: -.15s; }
.player.is-paused .eq i { animation-play-state: paused; transform: scaleY(.3); }
@keyframes ese-eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }
.player { view-transition-name: ese-player; }
.player__toggle { transition: transform var(--dur-xs), background-color var(--dur-sm); }
.player__toggle:hover { background: #7AC6EE; }
.player__toggle:active { transform: scale(.94); }
.player__fill { transition: width .25s linear; }
.player__bar { transition: height var(--dur-sm); }
.player__bar:hover { height: 6px; }
.player__close { width: 44px; height: 44px; align-items: center; justify-content: center; margin: -10px -12px -10px 0; border-radius: 50%; }

/* ---------- 10. Transitions de page ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: ese-page-out 180ms var(--ease-in) both; }
::view-transition-new(root) { animation: ese-page-in 520ms var(--ease-out) both; }
@keyframes ese-page-out { to { opacity: 0; } }
@keyframes ese-page-in { from { opacity: 0; transform: translateY(10px); } }
#ese-swap.is-leaving { opacity: .4; transition: opacity var(--dur-sm) var(--ease-in); }

/* ---------- 11. Mouvement réduit : état final immédiat ---------- */
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal], .js .hero__title.is-split .w > span, .js .quote:not(.is-in)::before { opacity: 1; transform: none; }
	.emblem-bg__drop { opacity: .045; }
	.emblem-bg__stroke { stroke-dashoffset: 0; }
	.waves__line, .eq i { animation: none !important; }
	.site-header.is-hidden { transform: none; }
	::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Lisibilité au-dessus des ondes : pastilles et encarts sombres opaques (même teinte qu’avant). */
.is-dark .chip { background: var(--ese-sombre-creatif); }
.is-dark .chip.is-active { background: #fff; }
.featured { background: #303338; position: relative; }

/* Titres : lignes équilibrées, pas de mot orphelin. */
.hero__title, .pro-h2, .pfeat__title { text-wrap: balance; }

/* ---------- Panier dans l’en-tête (WooCommerce) ---------- */
.site-nav { margin-left: auto; }
.cart-link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: 14px;
	border-radius: 50%;
	color: var(--ese-texte);
	transition: background-color var(--dur-sm), color var(--dur-sm);
}
.cart-link:hover { background: var(--ese-bleu-tint); color: var(--ese-bleu-pro); }
.is-dark .cart-link { color: #fff; }
.is-dark .cart-link:hover { background: rgba(255, 255, 255, .08); color: var(--ese-azur); }
.cart-count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--ese-bleu-pro);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	animation: ese-count-in var(--dur-md) var(--ease-out);
}
.is-dark .cart-count { background: var(--ese-azur); color: var(--ese-sombre-creatif); }
.cart-count[data-count="0"] { display: none; }
@keyframes ese-count-in { from { opacity: 0; transform: scale(.6); } }
@media (max-width: 899px) {
	.cart-link { order: 2; margin-left: auto; }
	.burger { order: 3; margin-left: 4px; }
}

/* ---------- Outils d’en-tête : compte + panier ---------- */
.head-tools { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.head-tools .cart-link { margin-left: 0; }
.head-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ese-texte);
	transition: background-color var(--dur-sm), color var(--dur-sm);
}
.head-icon:hover { background: var(--ese-bleu-tint); color: var(--ese-bleu-pro); }
.is-dark .head-icon { color: #fff; }
.is-dark .head-icon:hover { background: rgba(255, 255, 255, .08); color: var(--ese-azur); }
.account-link__initials {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ese-bleu-pro);
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .3px;
	transition: box-shadow var(--dur-sm);
}
.account-link:hover .account-link__initials { box-shadow: 0 0 0 3px var(--ese-bleu-tint); }
.is-dark .account-link__initials { background: var(--ese-azur); color: var(--ese-sombre-creatif); }
@media (max-width: 899px) {
	.head-tools { order: 2; margin-left: auto; }
	.head-tools .cart-link { order: 0; margin-left: 0; }
	.burger { order: 3; margin-left: 2px; }
}