/* ==========================================================================
   Home page — Hero, Business Divisions (bento), ESG banner, News.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   -------------------------------------------------------------------------- */

.hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	color: var(--color-white);
	display: flex;
	align-items: center;
}

.hero__slides {
	position: absolute;
	inset: 0;
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	overflow: hidden; /* le zoom Ken Burns ne déborde jamais de la zone de la slide */
	/* Crossfade LINÉAIRE (était ease-in-out : son démarrage lent se lisait
	   comme un « temps mort » avant que l'image ne change vraiment). Durée
	   1000 ms = valeur HERO_CROSSFADE_MS côté JS (main.js). */
	transition: opacity 1000ms linear;
}

.hero__slide.is-active {
	opacity: 1;
	z-index: 1;
}

.hero__slide.is-leaving {
	/* Reste au-dessus des slides jamais vues pendant qu'elle disparaît. */
	z-index: 1;
}

.hero__slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform-origin: center center;
	/* Repos = DÉBUT du zoom. Une slide jamais affichée n'est donc pas
	   pré-zoomée : quand elle devient active, son zoom part de scale(1) sans
	   aucun saut d'échelle (l'ancienne version les laissait figées à ~1.097,
	   d'où un « recul » brutal de l'image au moment du crossfade). */
	transform: scale(1);
}

/* Slide AFFICHÉE : zoom lent, RÉGULIER (linear) et assez marqué pour se
   lire comme un mouvement continu, calé exactement sur la durée d'autoplay
   (4500 ms, cf. data-hero-autoplay). À 4500 ms le zoom atteint scale(1.14)
   et l'autoplay déclenche le crossfade : zéro pause entre les deux. */
.hero__slide.is-active .hero__slide-img {
	animation: hero-ken-burns 4500ms linear both;
}

/* Slide qui SORT (classe posée par le JS le temps du crossfade) : l'image
   continue de dériver à la MÊME vitesse (0,14 / 4500 ms) pendant le fondu,
   sans se figer ni sauter. `from: scale(1.14)` = reprise pile où le zoom
   d'entrée s'est arrêté. */
.hero__slide.is-leaving .hero__slide-img {
	animation: hero-ken-burns-out 1000ms linear both;
}

@keyframes hero-ken-burns {
	from { transform: scale(1); }
	to   { transform: scale(1.14); }
}

@keyframes hero-ken-burns-out {
	from { transform: scale(1.14); }
	to   { transform: scale(1.171); }
}

.hero__slide-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-xl);
	background-image: repeating-linear-gradient(
		135deg,
		var(--color-teal),
		var(--color-teal) 16px,
		var(--color-teal-dark) 16px,
		var(--color-teal-dark) 32px
	);
	color: rgba(255, 255, 255, 0.55);
	font-size: var(--text-small);
}

.hero__slide-placeholder span {
	display: block;
	max-width: 28ch;
	margin-inline: auto;
}

.hero__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Voile plat très léger (12%) sur toute la photo + dégradé localisé côté
	   texte (gauche) pour assombrir uniquement cette zone, sans flou ni teinte
	   sur le reste de l'image (style « Petronas »). */
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 55%),
		rgba(0, 0, 0, 0.12);
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 2;
	padding-block: var(--space-2xl);
}

.hero__title {
	color: var(--color-white);
	font-size: var(--text-h2);
	max-width: 18ch;
	margin-bottom: var(--space-md);
	/* Ombre marquée : lisibilité sur les zones claires de la photo, le voile
	   étant volontairement très léger (12%) pour garder l'image nette et vive. */
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1024px) {
	.hero__title {
		font-size: 2.5rem;
		max-width: 820px;
	}
}

.hero__subtitle {
	color: rgba(255, 255, 255, 0.85);
	max-width: 55ch;
	margin-bottom: var(--space-xl);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

.hero__controls {
	position: absolute;
	z-index: 2;
	bottom: var(--space-lg);
	right: var(--space-lg);
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.hero__arrow {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-h5);
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.hero__arrow:hover,
.hero__arrow:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-teal);
}

.hero__playpause {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.hero__playpause:hover,
.hero__playpause:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-teal);
}

.hero__playpause-icon {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

/* Diaporama en lecture → on montre l'icône « pause » (action du bouton).
   Diaporama mis en pause (.is-paused) → on montre l'icône « lecture ». */
.hero__playpause-icon--play {
	display: none;
}

.hero__playpause.is-paused .hero__playpause-icon--pause {
	display: none;
}

.hero__playpause.is-paused .hero__playpause-icon--play {
	display: block;
}

.hero__dots {
	display: flex;
	align-items: center;
	/* Espacement porté par la zone tactile de chaque puce (voir .hero__dot). */
	gap: 0;
}

/* La puce visible reste un point de 9 px (::before), mais la cible cliquable
   fait 24 × 44 px — bien au-dessus du minimum tactile de 24 px, sans élargir
   le repère visuel ni décaler la rangée de contrôles. */
.hero__dot {
	width: 24px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.hero__dot::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.4);
	transition: background-color 200ms ease, transform 200ms ease;
}

.hero__dot.is-active::before {
	background-color: var(--color-accent);
	transform: scale(1.25);
}

/* Très petits écrans : on resserre le cluster de contrôles pour absorber les
   zones tactiles élargies (puces + flèches) sans débordement. */
@media (max-width: 420px) {
	.hero__controls {
		gap: var(--space-sm);
	}
}

/* --------------------------------------------------------------------------
   2. BUSINESS DIVISIONS — bento
   -------------------------------------------------------------------------- */

.divisions-bento {
	padding-block: var(--space-3xl);
}

.divisions-bento__header {
	margin-bottom: var(--space-xl);
}

.divisions-bento__empty {
	color: var(--color-text);
	opacity: 0.7;
}

.divisions-bento__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {
	.divisions-bento__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.division-card--large {
		grid-column: 1 / 3;
	}
}

@media (min-width: 1024px) {
	.divisions-bento__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, minmax(240px, 1fr));
	}

	.division-card--large {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
}

/* Composant .division-card partagé : voir assets/css/components.css */

/* --------------------------------------------------------------------------
   3. ESG / SUSTAINABILITY
   -------------------------------------------------------------------------- */

.esg-banner {
	background: linear-gradient(135deg, var(--color-teal) 0%, #0A4A43 100%);
	color: var(--color-white);
	padding-block: var(--space-2xl);
}

.esg-banner__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	align-items: center;
}

@media (min-width: 1024px) {
	.esg-banner__inner {
		grid-template-columns: 1.2fr 0.8fr;
	}
}

.esg-banner__eyebrow {
	display: inline-block;
	color: var(--color-amber-on-dark);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-sm);
}

.esg-banner__title {
	color: var(--color-white);
	line-height: 1.15;
	margin-bottom: var(--space-md);
}

.esg-banner__text {
	color: rgba(255, 255, 255, 0.8);
	max-width: 46ch;
	line-height: 1.4;
	margin-bottom: var(--space-lg);
}

.esg-banner__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xl);
	margin-bottom: var(--space-xl);
}

.esg-banner__stat-value {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--text-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-accent);
}

.esg-banner__stat-label {
	display: block;
	max-width: 16ch;
	font-size: var(--text-small);
	color: rgba(255, 255, 255, 0.65);
}

.esg-banner__visual {
	position: relative;
}

.esg-banner__accent {
	position: absolute;
	right: 0;
	bottom: calc(-1 * var(--space-lg));
	width: 55%;
	aspect-ratio: 1;
	background-color: var(--color-accent);
	border-radius: 16px;
	z-index: 0;
}

.esg-banner__image {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 5;
	max-width: 380px;
	margin-inline: auto;
	border-radius: 16px;
	overflow: hidden;
}

.esg-banner__image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   4. NEWS
   -------------------------------------------------------------------------- */

.news {
	padding-block: var(--space-3xl);
}

.news__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	row-gap: var(--space-sm);
	column-gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.news__header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-md);
	margin-left: auto;
}

@media (min-width: 768px) {
	.news__header-actions {
		gap: var(--space-lg);
	}
}

.news__view-all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-amber-text);
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
	transition: color 200ms ease;
}

.news__view-all:hover,
.news__view-all:focus-visible {
	color: var(--color-teal-dark);
}

.news__view-all span {
	transition: transform 200ms ease;
	display: inline-block;
}

.news__view-all:hover span,
.news__view-all:focus-visible span {
	transform: translateX(3px);
}

.news__nav {
	display: flex;
	gap: var(--space-sm);
}

.news__arrow {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1.5px solid var(--color-teal);
	background-color: transparent;
	color: var(--color-teal);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-h5);
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.news__arrow:hover,
.news__arrow:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-teal);
}

.news__empty {
	color: var(--color-text);
	opacity: 0.7;
}

.news__track {
	display: flex;
	gap: var(--space-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.news__track::-webkit-scrollbar {
	display: none;
}

.news-card {
	display: flex;
	flex-direction: column;
	flex: 0 0 100%;
	scroll-snap-align: start;
	background-color: var(--color-surface);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(var(--color-teal-rgb), 0.18);
}

@media (min-width: 768px) {
	.news-card {
		flex: 0 0 calc(50% - (var(--space-lg) / 2));
	}
}

@media (min-width: 1024px) {
	.news-card {
		flex: 0 0 calc((100% - (2 * var(--space-lg))) / 3);
	}
}

.news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
}

.news-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-lg);
}

.news-card__badge {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	z-index: 1;
	display: inline-block;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	background-color: var(--color-teal);
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.6875rem;
	font-weight: var(--font-weight-semibold);
	line-height: 1.4;
}

.news-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease;
}

.news-card:hover .news-card__img {
	transform: scale(1.05);
}

.news-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-md);
	/* M3 — teal-dark (plus teal-light sous du texte) + texte à 0,85. */
	background-color: var(--color-teal-dark);
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--text-small);
}

.news-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px var(--space-xs);
	font-size: var(--text-small);
	margin-bottom: var(--space-xs);
}

.news-card__cat {
	color: var(--color-amber-text);
	font-weight: var(--font-weight-semibold);
	white-space: nowrap;
}

.news-card__dot {
	color: rgba(var(--color-text-rgb), 0.4);
}

.news-card__date {
	color: rgba(var(--color-text-rgb), 0.55);
	white-space: nowrap;
}

.news-card__title {
	font-size: var(--text-h6);
}

.news-card__title a {
	color: var(--color-heading);
	transition: color 200ms ease;
}

.news-card:hover .news-card__title a,
.news-card__title a:hover,
.news-card__title a:focus-visible {
	color: var(--color-accent);
}

.news-card__excerpt {
	margin-top: var(--space-xs);
	font-size: var(--text-small);
	color: rgba(var(--color-text-rgb), 0.7);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__readmore {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
	color: var(--color-amber-text);
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	transition: color 200ms ease;
}

.news-card__readmore:hover,
.news-card__readmore:focus-visible {
	color: var(--color-teal-dark);
}

.news-card__readmore span {
	display: inline-block;
	transition: transform 200ms ease;
}

.news-card__readmore:hover span,
.news-card__readmore:focus-visible span {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   5. TRAINING CTA (bannière Carrières — cahier des charges section 3.3)
   -------------------------------------------------------------------------- */

.training-cta {
	position: relative;
	min-height: 60vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	text-align: center;
}

.training-cta__media {
	position: absolute;
	inset: 0;
}

.training-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.training-cta__overlay {
	position: absolute;
	inset: 0;
	/* G6 — voile plat porté de 0,75 à 0,82 : garantit ≥4,5:1 pour le titre
	   blanc par-dessus n'importe quelle photo de formation (l'eyebrow utilise
	   --color-amber-on-dark, cf. .esg-banner__eyebrow). */
	background-color: rgba(var(--color-ink-rgb), 0.82);
}

.training-cta__content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	padding-block: var(--space-2xl);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.training-cta__eyebrow {
	display: inline-block;
	padding: var(--space-xs) var(--space-md);
	border: 1.5px solid var(--color-accent);
	border-radius: 999px;
	color: var(--color-amber-on-dark);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-lg);
}

.training-cta__title {
	color: var(--color-white);
	font-size: var(--text-h4);
	max-width: 26ch;
	margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
	.training-cta__title {
		font-size: var(--text-h3);
		max-width: 22ch;
	}
}

@media (min-width: 1024px) {
	.training-cta__title {
		font-size: var(--text-h1);
		max-width: 20ch;
	}
}

.training-cta__subtitle {
	color: rgba(255, 255, 255, 0.85);
	max-width: 55ch;
	margin-bottom: var(--space-xl);
}

/* --------------------------------------------------------------------------
   6. BROCHURE CTA — ressource PDF téléchargeable
   -------------------------------------------------------------------------- */

.brochure-cta {
	background-color: var(--color-white);
	border-top: 1px solid rgba(var(--color-teal-rgb), 0.12);
	padding-block: var(--space-2xl);
}

.brochure-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	text-align: center;
}

@media (min-width: 768px) {
	.brochure-cta__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--space-2xl);
		text-align: left;
	}
}

.brochure-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background-color: rgba(var(--color-teal-rgb), 0.08);
	color: var(--color-teal);
	transition: transform 200ms ease, background-color 200ms ease;
}

.brochure-cta__icon:hover {
	transform: scale(1.05);
	background-color: rgba(var(--color-teal-rgb), 0.14);
}

.brochure-cta__icon svg {
	width: 44px;
	height: 44px;
}

.brochure-cta__content {
	max-width: 640px;
}

.brochure-cta__eyebrow {
	display: inline-block;
	color: var(--color-amber-text);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--space-sm);
}

.brochure-cta__title {
	color: var(--color-teal);
	line-height: 1.2;
	margin-bottom: var(--space-md);
}

.brochure-cta__text {
	color: var(--color-text);
	max-width: 56ch;
	margin-inline: auto;
	line-height: var(--leading-normal);
	margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
	.brochure-cta__text {
		margin-inline: 0;
	}
}

.brochure-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
}

@media (min-width: 768px) {
	.brochure-cta__actions {
		justify-content: flex-start;
	}
}

/* Lift au survol + retour clavier — box-shadow ajoutée seulement sur :hover
   (souris) pour ne pas remplacer le liseré blanc du focus ring partagé
   .btn:focus-visible (main.css) : le clavier garde exactement le même
   contour que le reste du site, juste complété par le même léger lift. */
.brochure-cta__btn {
	transition: background-color 250ms ease, color 250ms ease, transform 220ms ease-out, box-shadow 220ms ease-out;
}

.brochure-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(var(--color-teal-rgb), 0.28);
}

.brochure-cta__btn:focus-visible {
	transform: translateY(-2px);
}

.brochure-cta__btn:active {
	transform: scale(0.98);
}

.brochure-cta__btn-icon {
	width: 16px;
	height: 16px;
	margin-right: var(--space-xs);
	transition: transform 220ms ease-out;
}

.brochure-cta__btn:hover .brochure-cta__btn-icon,
.brochure-cta__btn:focus-visible .brochure-cta__btn-icon {
	transform: translateY(2px);
}

.brochure-cta__filesize {
	font-size: var(--text-small);
	color: rgba(var(--color-text-rgb), 0.6);
}

/* --------------------------------------------------------------------------
   Accessibilité : mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.hero__slide,
	.hero__arrow,
	.hero__playpause,
	.hero__dot,
	.hero__dot::before,
	.news__arrow,
	.news-card__img,
	.news-card__title a,
	.news-card__readmore,
	.news-card__readmore span,
	.brochure-cta__icon,
	.brochure-cta__btn,
	.brochure-cta__btn-icon {
		transition-duration: 0.01ms;
	}

	/* Ken Burns entièrement désactivé : image fixe à scale(1). */
	.hero__slide-img,
	.hero__slide.is-active .hero__slide-img,
	.hero__slide.is-leaving .hero__slide-img {
		animation: none;
		transform: none;
		transition: none;
	}
}