/* ==========================================================
   Effets du site (voir assets/js/effets.js)
   ========================================================== */

/* Barre de progression de lecture */
.lcx-progression {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; height: 3px; width: 100%;
	background: #1F4D3A; transform-origin: 0 50%; transform: scaleX(0);
	z-index: 100; pointer-events: none;
}

/* Titre : mots qui montent un par un */
.lc-effets main h1 { animation: none !important; }
.lc-effets main h1 em { animation: none !important; display: inline; }
/* Marge intérieure : les jambages (j, p, y) et les accents ne sont pas rognés */
.lcx-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em 0 .2em; margin: -.08em 0 -.2em; }
.lcx-mot > span {
	display: inline-block; transform: translateY(110%);
	animation: lcx-monte .9s cubic-bezier(.2,.8,.2,1) forwards;
	animation-delay: calc(var(--i) * 70ms + 100ms);
}
@keyframes lcx-monte { to { transform: none; } }

/* Tache de couleur qui flotte derrière le haut de page */
.lcx-hero { position: relative; isolation: isolate; overflow: hidden; }
.lcx-hero::before {
	content: ""; position: absolute; z-index: -1; width: 620px; height: 620px;
	right: -120px; top: -160px; border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #DCE6DE 0%, rgba(220,230,222,0) 65%);
	animation: lcx-flotte 14s ease-in-out infinite alternate;
}
@keyframes lcx-flotte {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-140px, 80px) scale(1.15); }
	100% { transform: translate(-40px, 160px) scale(.95); }
}

/* Bandeau défilant */
.lcx-bandeau {
	background: #1D2420; color: #F6F1E7; overflow: hidden; position: relative;
	border-block: 1px solid #1D2420; padding: 18px 0;
}
.lcx-piste { display: flex; width: max-content; animation: lcx-defile 76s linear infinite; }
.lcx-bandeau:hover .lcx-piste,
.lcx-bandeau.is-pause .lcx-piste { animation-play-state: paused; }
.lcx-piste span {
	font-family: Fraunces, serif; font-size: clamp(22px, 3vw, 34px); white-space: nowrap; padding-right: 48px;
}
.lcx-piste span::after { content: "✦"; font-size: .6em; margin-left: 48px; color: #B9CDBF; vertical-align: middle; }
@keyframes lcx-defile { to { transform: translateX(-50%); } }
.lcx-pause {
	position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
	background: #F6F1E7; color: #1D2420; border: 0; border-radius: 999px;
	width: 36px; height: 36px; cursor: pointer; font-size: 14px; z-index: 2;
}

/* Cartes inclinées en 3D */
.lcx-tilt { transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s ease !important; }

/* Comparateur avant / après */
.lcx-avant-apres { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid #DDD5C4; box-shadow: 0 24px 48px -32px rgba(29,36,32,.45); }
.lcx-avant-apres img { display: block; width: 100%; height: auto; }
.lcx-avant-apres .lcx-dessus { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.lcx-avant-apres .lcx-dessus img { height: 100%; object-fit: cover; object-position: top; }
.lcx-poignee {
	position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px;
	background: #F6F1E7; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none;
}
.lcx-poignee::after {
	content: "↔"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 44px; height: 44px; border-radius: 50%; background: #1F4D3A; color: #F6F1E7;
	display: grid; place-items: center; font-size: 18px;
}
.lcx-etiquette {
	position: absolute; top: 14px; background: rgba(29,36,32,.8); color: #F6F1E7;
	font: 500 12px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase;
	padding: 8px 10px; border-radius: 6px; pointer-events: none;
}
.lcx-etiquette.g { left: 14px; } .lcx-etiquette.d { right: 14px; }
.lcx-avant-apres input[type=range] {
	position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
}
.lcx-avant-apres input[type=range]:focus-visible + .lcx-poignee::after { outline: 3px solid #F6F1E7; outline-offset: 2px; }

/* Sommaire collant de l'étude de cas */
.lcx-sommaire {
	position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px); z-index: 40;
	background: rgba(246,241,231,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid #DDD5C4;
}
.lcx-sommaire ol {
	list-style: none; margin: 0 auto; padding: 10px 32px; max-width: 1200px;
	display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
}
.lcx-sommaire a {
	display: block; white-space: nowrap; text-decoration: none; color: #2E3833;
	font-size: 14px; padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
	background-image: none !important; transition: background-color .2s, color .2s;
}
.lcx-sommaire a:hover { border-color: #C9C2B2; }
.lcx-sommaire a[aria-current] { background: #1F4D3A; color: #F6F1E7; }

/* Pas d'effets de mouvement si l'utilisateur en a demandé moins */
@media (prefers-reduced-motion: reduce) {
	.lcx-hero::before, .lcx-piste { animation: none !important; }
	.lcx-mot > span { animation: none !important; transform: none !important; }
}