/* ==========================================================================
   HOMEPAGE — hero, 5 univers, à la une, notre approche, newsletter
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO (§12)
   -------------------------------------------------------------------------- */

.sc-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(2rem, 1rem + 3vw, 3.5rem) 0;
}

.sc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	align-items: center;
	gap: clamp(1.5rem, 3vw, 3rem);
	min-height: clamp(460px, 58vh, 620px);
}

.sc-hero__body { position: relative; z-index: 2; max-width: 40ch; }
.sc-hero__body .sc-rule { margin-bottom: var(--sc-s4); }

.sc-hero__title {
	font-family: var(--sc-serif);
	font-size: var(--sc-fs-hero);
	font-weight: 400;
	line-height: var(--sc-lh-tight);
	letter-spacing: -0.018em;
	color: var(--sc-text);
	margin-bottom: var(--sc-s3);
	text-wrap: balance;
}
/* Dernier fragment : italique, vert profond (§12) */
.sc-hero__title em {
	font-style: italic;
	color: var(--sc-green);
}

.sc-hero__lede {
	font-size: var(--sc-fs-lede);
	line-height: 1.6;
	color: var(--sc-text-soft);
	max-width: 44ch;
	margin-bottom: var(--sc-s4);
}

/* Média : fondu vers l'ivoire sur le bord gauche et bas — la photo se dissout
   dans le fond au lieu d'être une bannière rectangulaire (§12). */
.sc-hero__media {
	position: relative;
	margin-right: calc(-1 * clamp(1.25rem, 4vw, 3rem));
	align-self: stretch;
	display: flex;
	align-items: center;
}
.sc-hero__media img {
	width: 100%;
	height: 100%;
	max-height: 620px;
	object-fit: cover;
	object-position: 62% 50%;
	-webkit-mask-image:
		linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%),
		linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
	mask-image:
		linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 16%, #000 42%),
		linear-gradient(to bottom, transparent 0%, #000 14%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* --------------------------------------------------------------------------
   LES 5 UNIVERS (§13)
   -------------------------------------------------------------------------- */

.sc-universes { padding-top: clamp(1rem, 2vw, 2rem); }

.sc-universes__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(.75rem, 1.2vw, 1.15rem);
}

.sc-uni {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	aspect-ratio: 5 / 6;
	padding: var(--sc-s4) var(--sc-s3);
	overflow: hidden;
	border-radius: var(--sc-radius-md);
	text-decoration: none;
	color: #fff;
	isolation: isolate;
}
.sc-uni__img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform .7s var(--sc-ease);
}
.sc-uni:hover .sc-uni__img { transform: scale(1.05); }

/* Overlay subtil, jamais un aplat opaque */
.sc-uni::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(4, 26, 26, .12) 0%,
		rgba(4, 26, 26, .38) 45%,
		rgba(3, 22, 22, .78) 100%
	);
	transition: background .4s var(--sc-ease);
}
.sc-uni:hover::after {
	background: linear-gradient(
		to bottom,
		rgba(4, 26, 26, .18) 0%,
		rgba(4, 26, 26, .46) 45%,
		rgba(3, 22, 22, .84) 100%
	);
}

.sc-uni__icon {
	margin-bottom: auto;
	margin-top: 18%;
	color: var(--sc-gold-soft);
	transition: transform .4s var(--sc-ease);
}
.sc-uni:hover .sc-uni__icon { transform: translateY(-4px); }

.sc-uni__name {
	font-family: var(--sc-serif);
	font-size: clamp(1.15rem, .9rem + .5vw, 1.5rem);
	line-height: 1.15;
	margin-bottom: .5rem;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.sc-uni__tagline {
	font-size: var(--sc-fs-sm);
	line-height: 1.45;
	color: rgba(255, 255, 255, .84);
	max-width: 22ch;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   À LA UNE + NOTRE APPROCHE (§14, §15)
   -------------------------------------------------------------------------- */

.sc-editorial {
	border-top: var(--sc-border-w) solid var(--sc-border);
	border-bottom: var(--sc-border-w) solid var(--sc-border);
	background: var(--sc-surface-alt);
}
.sc-editorial__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.9fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 3vw, 3.25rem);
	align-items: start;
}
.sc-editorial__aside {
	border-left: var(--sc-border-w) solid var(--sc-border);
	padding-left: clamp(1.5rem, 3vw, 3rem);
}

.sc-featured__head { margin-bottom: var(--sc-s4); }
.sc-featured__head .sc-rule { margin-top: var(--sc-s2); width: 42px; }
.sc-featured__title,
.sc-approach__title {
	font-family: var(--sc-serif);
	font-size: clamp(1.4rem, 1.1rem + .8vw, 1.85rem);
	line-height: 1.2;
}

.sc-featured__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(.75rem, 1.4vw, 1.25rem);
	align-items: stretch;
}

/* Composition horizontale : vignette à gauche, texte à droite (§14).
   Les cartes s'étirent à la même hauteur et le lien est poussé en bas :
   les « Lire l'article » tombent tous sur la même ligne de base. */
.sc-feat {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: var(--sc-s2);
	align-items: stretch;
	height: 100%;
	padding: var(--sc-s3);
	background: var(--sc-surface);
	border: var(--sc-border-w) solid var(--sc-border-light);
	border-radius: var(--sc-radius);
	transition: border-color .25s var(--sc-ease);
}
.sc-feat:hover { border-color: var(--sc-border-dark); }
.sc-feat__media {
	overflow: hidden;
	border-radius: 2px;
	aspect-ratio: 1 / 1;
	height: auto;
	align-self: start;
	background: var(--sc-bg-warm);
}
.sc-feat__media img { width: 100%; height: 100%; object-fit: cover; }

.sc-feat__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}
.sc-feat__title {
	font-family: var(--sc-serif);
	font-size: .9rem;
	line-height: 1.3;
	margin: .3rem 0 .4rem;
	hyphens: auto;
	/* Trois lignes maximum : au-delà, la carte se déséquilibre. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sc-feat__title a { text-decoration: none; }
.sc-feat__title a:hover { color: var(--sc-green); }
.sc-feat__excerpt {
	font-size: .78125rem;
	line-height: 1.5;
	color: var(--sc-muted);
	margin-bottom: .7rem;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sc-feat .sc-link {
	font-size: .78125rem;
	margin-top: auto;   /* colle le lien au bas de la carte */
	align-self: flex-start;
}

.sc-featured__more { display: flex; justify-content: center; margin-top: var(--sc-s4); }

/* Notre approche — petits pictos fins, pas de cartes (§15) */
.sc-approach__head { margin-bottom: var(--sc-s4); }
.sc-approach__head .sc-rule { margin-top: var(--sc-s2); width: 42px; }
.sc-approach__list { display: grid; gap: var(--sc-s4); }
.sc-approach__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sc-s3); }
.sc-approach__icon { color: var(--sc-green); padding-top: .15rem; }
.sc-approach__name {
	font-family: var(--sc-sans);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: .3rem;
}
.sc-approach__text { font-size: var(--sc-fs-sm); line-height: 1.58; color: var(--sc-muted); }

/* --------------------------------------------------------------------------
   NEWSLETTER (§16)
   -------------------------------------------------------------------------- */

.sc-newsletter {
	background: var(--sc-green-dark);
	color: #f2ece1;
	padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.sc-newsletter__inner {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, .95fr);
	align-items: center;
	gap: clamp(1rem, 2.5vw, 2.5rem);
}
.sc-newsletter__icon { color: var(--sc-gold); }
.sc-newsletter__title {
	font-family: var(--sc-serif);
	font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.1rem);
	line-height: 1.18;
	margin-bottom: .4rem;
	color: #fdfbf6;
}
.sc-newsletter__sub { font-size: var(--sc-fs-sm); color: rgba(242, 236, 225, .74); }

.sc-newsletter__form { display: flex; gap: .6rem; }
.sc-newsletter__form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: .95rem 1.1rem;
	background: rgba(255, 255, 255, .07);
	border: var(--sc-border-w) solid rgba(242, 236, 225, .24);
	border-radius: var(--sc-radius);
	color: #fdfbf6;
	font-size: var(--sc-fs-ui);
}
.sc-newsletter__form input::placeholder { color: rgba(242, 236, 225, .48); }
.sc-newsletter__form input:focus { border-color: var(--sc-gold); outline: none; }
.sc-newsletter__note {
	grid-column: 3;
	font-size: var(--sc-fs-xs);
	color: rgba(242, 236, 225, .55);
	text-align: center;
	margin-top: .7rem;
}

/* Aucun système d'envoi n'est connecté : le bloc est présenté sans promesse. */
.sc-newsletter--inactive .sc-newsletter__form button { opacity: .95; }