/* ==========================================================================
   ESE — Accueil, langage éditorial « Swiss » partagé avec les autres pages.
   ========================================================================== */

/* ---------- Héros : titre + emblème en anneau ---------- */
.home-hero { position: relative; isolation: isolate; overflow: hidden; padding: 72px 0 96px; border-bottom: 1px solid var(--ese-bordure); }
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 0 58%;
	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='%231F6FB2'/%3E%3C/svg%3E");
	opacity: .16;
}
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.home-hero .pro-hero__title { color: var(--ese-texte); font-size: clamp(42px, 6vw, 84px); line-height: 1; letter-spacing: -.035em; }
.home-hero__lead { font-size: 19px; line-height: 1.6; color: var(--ese-texte-2); max-width: 560px; margin-top: 26px; }
.home-hero .btn-row { margin-top: 34px; }
.home-hero__sign { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--ese-bordure); font-size: 11px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--ese-texte-3); }
.home-hero__sign span { color: var(--ese-bleu-pro); margin: 0 6px; }

.hero-art { position: relative; width: min(440px, 100%); aspect-ratio: 1; justify-self: center; }
.hero-art__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: ese-spin 60s linear infinite; }
.hero-art__ring text { font-family: var(--ese-font); font-size: 13px; font-weight: 600; letter-spacing: 3.9px; fill: var(--ese-texte-3); }
@keyframes ese-spin { to { transform: rotate(360deg); } }
.hero-art__disc {
	position: absolute;
	inset: 17%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--ese-bordure);
	box-shadow: 0 30px 70px rgba(38, 41, 46, .12);
}
/* L’emblème complet, dans ses couleurs de charte, qui se dessine au chargement */
.hero-art__emblem { position: static; z-index: auto; translate: none; width: 38%; }
.hero-art__emblem .emblem-bg__drop { opacity: 1; animation-name: ese-emblem-solid; }
.hero-art__emblem .emblem-bg__cut { fill: #fff; }
.hero-art__emblem .emblem-bg__cut-line { stroke: #fff; }
.hero-art__emblem .emblem-bg__stroke { opacity: 1; stroke-width: 9; }
@keyframes ese-emblem-solid { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---------- Deux espaces ---------- */
.home-spaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding-top: 72px; }
.home-space {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 40px;
	border-radius: 24px;
	color: #fff;
	transition: transform var(--dur-md) var(--ease-out), box-shadow var(--dur-md) var(--ease-out);
}
.home-space:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(38, 41, 46, .18); }
.home-space--pro { background: var(--ese-bleu-pro); }
.home-space--pro::before {
	content: "";
	position: absolute;
	inset: 0 0 0 52%;
	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='%23fff'/%3E%3C/svg%3E");
	opacity: .16;
}
.home-space--crea { background: var(--ese-sombre-creatif); }
.home-space--crea::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: -120px;
	top: 28px;
	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: .5;
	transition: transform 1.4s var(--ease-out);
}
.home-space--crea:hover::before { transform: translateX(-60px); }
.home-space__top { display: flex; align-items: center; gap: 14px; }
.home-space__num { font-size: 13px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 20px; background: rgba(255, 255, 255, .14); }
.home-space--pro .eyebrow { color: var(--ese-bleu-pale); }
.home-space--crea .eyebrow { color: var(--ese-azur); }
.home-space--crea .home-space__num { color: var(--ese-azur); background: rgba(89, 183, 232, .12); }
.home-space__title { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -.02em; margin-top: 14px; }
.home-space__text { font-size: 15.5px; line-height: 1.6; color: var(--ese-bleu-pale); max-width: 460px; }
.home-space--crea .home-space__text { color: var(--ese-gris-clair); }
.home-space__list { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.home-space__list li { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.home-space__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; color: #fff; text-decoration: none; font-size: 15px; font-weight: 500; transition: padding var(--dur-md) var(--ease-out), color var(--dur-sm); }
.home-space__list a::after { content: "→"; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-sm), transform var(--dur-md) var(--ease-out); }
.home-space__list a:hover { padding-left: 6px; }
.home-space__list a:hover::after { opacity: 1; transform: none; }
.home-space--crea .home-space__list a:hover { color: var(--ese-azur); }
.home-space > .btn { align-self: flex-start; margin-top: 18px; }

/* ---------- Derniers textes : index numéroté ---------- */
.home-feed { padding-top: 96px; }
.home-feed__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.feed { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ese-texte); }
.feed__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 170px minmax(0, 1fr) auto 38px;
	align-items: center;
	gap: 20px;
	padding: 22px 12px;
	border-bottom: 1px solid var(--ese-bordure);
	transition: background-color var(--dur-sm);
}
.feed__item:hover { background: #fff; }
.feed__num { font-size: 13px; font-weight: 700; color: var(--ese-texte-4); font-variant-numeric: tabular-nums; transition: color var(--dur-sm); }
.feed__label { font-size: 10.5px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--ese-bleu-pro); }
.feed__title { font-size: 21px; font-weight: 700; line-height: 1.3; color: var(--ese-texte); text-decoration: none; transition: color var(--dur-sm), transform var(--dur-md) var(--ease-out); }
.feed__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ese-texte-3); white-space: nowrap; }
.feed__item:hover .feed__num, .feed__item:hover .feed__title { color: var(--ese-bleu-pro); }
.feed__item:hover .feed__title { transform: translateX(6px); }
.feed__item:hover .pcard__go { background: var(--ese-bleu-pro); border-color: var(--ese-bleu-pro); color: #fff; }

/* ---------- Le livre ---------- */
.home-book { margin-top: 96px; padding: 88px 0; background: var(--ese-surface); position: relative; isolation: isolate; }
.home-book::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='8'%3E%3Crect width='1' height='8' fill='%2326292E'/%3E%3C/svg%3E");
	opacity: .045;
}
.home-book__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.home-book .book3d { font-size: 22px; }
.home-book__title { max-width: 560px; }
.home-book__text { font-size: 16.5px; line-height: 1.65; color: var(--ese-texte-2); margin-top: 14px; max-width: 520px; }
.home-book .btn-row { margin-top: 28px; }

/* ---------- Aperçu à propos ---------- */
.home-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; padding-top: 96px; padding-bottom: 96px; }
.home-about__text { font-size: 16.5px; line-height: 1.65; color: var(--ese-texte-2); margin: 16px 0 18px; max-width: 480px; }
.home-about__quote {
	position: relative;
	margin: 0;
	padding-left: 32px;
	font-size: clamp(26px, 3.2vw, 42px);
	font-style: italic;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--ese-texte);
	text-wrap: balance;
}
.home-about__quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	bottom: .15em;
	width: 2px;
	background: var(--ese-bleu-pro);
	transform-origin: top;
	transition: transform 1.2s var(--ease-out) .2s;
}
.js .home-about__quote:not(.is-in)::before { transform: scaleY(0); }

/* ---------- Newsletter (bandeau sombre) ---------- */
.home .newsletter__inner { padding-block: 72px; }
.home .newsletter__title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; max-width: 620px; letter-spacing: -.01em; }
.home .newsletter__form .input { height: 52px; width: 300px; }
.home .newsletter__form .btn { min-height: 52px; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.home-hero__grid, .home-book__grid, .home-about { gap: 40px; }
	.feed__item { grid-template-columns: 44px 130px minmax(0, 1fr) 38px; }
	.feed__meta { display: none; }
}
@media (max-width: 899px) {
	.home-hero { padding: 40px 0 64px; }
	.home-hero::before { inset: 55% 0 0 0; }
	.home-hero__grid { grid-template-columns: 1fr; }
	.hero-art { width: min(300px, 80%); order: -1; }
	.home-spaces { grid-template-columns: 1fr; padding-top: 48px; }
	.home-space { padding: 28px; }
	.home-feed { padding-top: 64px; }
	.home-book { margin-top: 64px; padding: 56px 0; }
	.home-book__grid, .home-about { grid-template-columns: 1fr; }
	.home-book .book3d { font-size: 18px; }
	.home-about { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 600px) {
	.feed__item { grid-template-columns: 32px minmax(0, 1fr) 38px; grid-template-areas: "num label go" "num title go"; row-gap: 4px; padding: 18px 4px; }
	.feed__num { grid-area: num; align-self: start; padding-top: 2px; }
	.feed__label { grid-area: label; }
	.feed__title { grid-area: title; font-size: 17px; }
	.feed__item .pcard__go { grid-area: go; }
	.home .newsletter__form .input { width: auto; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-art__ring { animation: none; }
	.js .home-about__quote:not(.is-in)::before { transform: none; }
}