/* Page d'accueil — composants propres à cette page. */

/* ------------------------------------------------------------------- Hero */

.hero {
	--text-color: rgba(255, 255, 255, 0.72);
	--btn-rim: var(--color-rule-on-dark);

	position: relative;
	overflow: hidden;
	padding-block: 96px 100px;
	background: var(--color-dark-900);
	color: var(--color-white);
}

/* La trame vient de `.grid-lines` ; ce qui suit n'est que son fondu vers le navy. */

/*
 * La trame Figma déborde du hero : son fondu court sur 1500 px pour une section
 * de 1459,86, soit 102,75 %. On garde ce rapport plutôt qu'une hauteur figée —
 * en pixels, un hero plus haut que le dégradé laisse réapparaître le fond brut.
 */
.hero__grid::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 17, 39, 0) 0%, rgba(20, 21, 48, 0.55) 42%, var(--color-navy) 100%) top / 100% 102.75% no-repeat;
}

.hero__halo {
	--halo-size: 1020px;
	--halo-height: 620px;
	--halo-color: rgba(47, 91, 232, 0.42);
	--halo-blur: 60px;

	top: -270px;
	left: 50%;
	margin-left: -510px;
}

.hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero__title {
	padding-top: 16px;
	color: var(--color-white);
	font: var(--text-h1);
}

.hero__title-line {
	display: block;
}

.hero__lead {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
	padding-top: 16px;
}

.hero__cta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 34px;
}

.hero__trust {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 26px;
}

.hero__trust-text {
	display: flex;
	gap: 4px;
	color: rgba(255, 255, 255, 0.6);
	font: 400 0.875rem/1.25rem var(--font-sans); /* 14 / 20 */
}

.hero__trust-text strong {
	color: var(--color-white);
	font-weight: 600;
}

.avatars {
	display: flex;
}

.avatars__item {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 2px solid var(--color-navy);
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-blue-dark) 71.429%);
	color: var(--color-white);
	font: 700 0.75rem/1rem var(--font-sans); /* 12 / 16 */
}

.avatars__item + .avatars__item {
	margin-left: -10px;
}

.hero__outro {
	max-width: 640px;
	padding-top: 26px;
	color: rgba(255, 255, 255, 0.5);
	font: 400 0.875rem/1.375rem var(--font-sans); /* 14 / 22 */
}

/* ----------------------------------------------------------------- Ticker */

.ticker {
	--dot-size: 4px;

	width: 100%;
	max-width: 760px;
	padding-top: 36px;
	overflow: hidden;
	/* La maquette rogne le bandeau aux deux bords ; le fondu adoucit la coupe. */
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker__track {
	--copies: 3;

	display: flex;
	width: max-content;
	animation: marquee 32s linear infinite;
}

.ticker__group {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0 20px 0 0;
	list-style: none;
}

.ticker__item {
	color: rgba(255, 255, 255, 0.42);
	font: 600 0.78125rem/1.125rem var(--font-sans); /* 12,5 / 18 */
	letter-spacing: 0.16em; /* 2 px sur 12,5 */
	white-space: nowrap;
}

/*
 * Défilement en boucle : la piste porte N copies identiques et se décale
 * d'exactement une, l'arrivée étant alors indiscernable du départ.
 *
 * Les N-1 copies restantes doivent couvrir le cadre, d'où un N généreux.
 * Élargir les copies au lieu d'en ajouter déréglerait leur rythme.
 */
@keyframes marquee {
	to {
		transform: translateX(calc(-100% / var(--copies)));
	}
}

/* -------------------------------------------------- Capture et décors */

.hero__showcase {
	position: relative;
	width: 100%;
	aspect-ratio: 1132 / 564;
}

.browser {
	position: absolute;
	top: 10.64%; /* 60 / 564 */
	left: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 89.36%; /* 504 / 564 */
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-card);
	background: var(--color-white);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
}

.browser__bar {
	--dot-size: 9px;
	--dot-color: var(--color-rule);

	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 6px;
	padding: 13px 18px 12px;
	border-bottom: 1px solid var(--color-rule);
}

.browser__url {
	padding-left: 10px;
	color: var(--color-text-muted);
	font: 400 0.75rem/1.125rem var(--font-sans); /* 12 / 18 */
}

/*
 * `min-height: 0` rend le `flex: 1` autoritaire. Sans lui, la hauteur minimale
 * automatique laisse l'image imposer sa définition, et changer de visuel
 * déplace le hero.
 */
.browser__screen {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 0;
	background:
		radial-gradient(80.6% 80.6% at 77.4% 125.8%, #dde4fc 0%, rgba(221, 228, 252, 0) 100%),
		var(--color-lavender-alt);
}

.hero__pills {
	position: absolute;
	top: 89.72%; /* 506 / 564 */
	left: 2.12%; /* 24 / 1132 */
	display: flex;
	gap: 10px;
}

/* Le macaron est un composant global ; seule sa pose sur la capture est d'ici. */
.hero__showcase .sticker {
	position: absolute;
	top: 3.19%; /* 18 / 564 */
	right: 3%; /* 34 / 1132 */
}

/*
 * Tailles des médias — exprimées en part du conteneur et en rapport d'image,
 * pour que le partage texte / visuel de la maquette tienne à toute largeur.
 * Les pourcentages sont ceux de la maquette rapportés à ses 1132 px utiles.
 */

.media--supervision {
	flex: 0 0 49.82%; /* 564 / 1132 */
	aspect-ratio: 564 / 400;
}

.media--map {
	flex: 0 0 45.58%; /* 516 / 1132 */
	aspect-ratio: 516 / 430;
}

.media-frame--map {
	box-shadow: var(--shadow-raised);
}

/* ----------------------------------------------------------- Bento services */

.services__head {
	padding-bottom: 60px;
}

.bento {
	display: flex;
	gap: 20px;
}

.bento__feature {
	flex: 0 0 37.81%; /* 428 / 1132 */
	padding-bottom: 20px;
}

/* L'emplacement visuel est plaqué au bas de la carte, quel que soit le texte. */
.bento__feature .card__media {
	margin-top: auto;
}

/* Quatre cartes strictement identiques : 2 colonnes, 2 rangées de même hauteur. */
.bento__grid {
	display: grid;
	flex: 1;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;
	min-width: 0;
}

/* La carte navy suit le retrait haut commun : elle ne porte pas de pastille. */
.bento__grid .card--dark {
	padding-top: 26px;
}

/* Les liens des quatre cartes s'alignent en bas, quelle que soit la longueur du texte. */
.bento__grid .card__link {
	margin-top: auto;
}

/* ------------------------------------------------------------- Supervision */

.supervision__link {
	margin-top: 10px;
}

/* La maquette pose ici l'ombre douce, là où la charte utilise l'ombre haute. */
.supervision__pill {
	box-shadow: var(--shadow-soft);
}

/* ------------------------------------------------------------ Souveraineté */

.souverainete__head {
	padding-bottom: 48px;
}

.souverainete__cards {
	display: flex;
	gap: 20px;
}

.souverainete__cards > .card {
	flex: 1;
	min-width: 0;
}

/* Le bandeau est un composant global ; seul son accolement aux cartes est d'ici. */
.souverainete__cards + .banner {
	margin-top: 20px;
}

/* --------------------------------------------------------------- Proximité */

.proximite__depts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	padding-top: 10px;
}

.proximite__note {
	padding-top: 8px;
	color: var(--color-text-muted);
	font: 400 0.90625rem/1.5rem var(--font-sans); /* 14,5 / 24 */
}

.dept-card {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 15px 17px; /* 16 / 18 moins la bordure */
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-media);
	background: var(--color-white);
}

.dept-card__head {
	display: flex;
	gap: 6px;
	color: var(--color-navy);
	font: 600 0.9375rem/1.3125rem var(--font-sans); /* 15 / 21 */
}

.dept-card__number {
	color: var(--color-blue);
}

.dept-card__cities {
	color: var(--color-text-muted);
	font: 400 0.84375rem/1.25rem var(--font-sans); /* 13,5 / 20 */
}

.map-pin {
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px; /* 9 / 16 moins la bordure */
	border: 1px solid var(--color-rule);
	border-radius: var(--radius-pill);
	background: var(--color-white);
	box-shadow: var(--shadow-soft);
	color: var(--color-navy);
	font: 600 0.8125rem/1.1875rem var(--font-sans); /* 13 / 19 */
	white-space: nowrap;
}

/* --------------------------------------------------------------- Ruban CTA */

.cta {
	--title-color: var(--color-white);
	--text-color: rgba(255, 255, 255, 0.72);
	--btn-rim: var(--color-rule-on-dark);

	position: relative;
	padding-block: 146px 110px;
	background: var(--color-navy);
	color: var(--color-white);
}

.cta__halo-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Diamètre, couleur et flou sont ceux de `.halo` par défaut ; seule la pose est d'ici. */
.cta__halo {
	top: -220px;
	left: calc(50% + 260px); /* x 980 dans le cadre de 1440 centré */
}

.cta__inner {
	position: relative;
}

.cta__actions {
	display: flex;
	align-items: center;
	gap: 26px;
	padding-top: 18px;
}

.cta__media {
	position: relative;
	flex: 0 0 43.64%; /* 494 / 1132 */
	aspect-ratio: 494 / 454;
}

.brand-visual {
	width: 100%;
	aspect-ratio: 494 / 420;
	background: url("../../img/brand-visual.svg") center / contain no-repeat;
}

/* Reprend le cadre du motif de marque qu'il remplace. */
.cta__visual {
	width: 100%;
	aspect-ratio: 494 / 420;
	overflow: hidden;
	border-radius: var(--radius-card);
}

/*
 * Ancré par le bas, pas par un pourcentage depuis le haut : le macaron garde sa
 * hauteur fixe alors que le cadre se réduit, et déborderait sur petit écran.
 */
.badge-48h {
	position: absolute;
	bottom: 0;
	left: 5.67%; /* 28 / 494 */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 19px 27px; /* 20 / 28 moins la bordure */
	border: 1px solid var(--color-rule-on-dark);
	border-radius: var(--radius-media);
	background: linear-gradient(180deg, var(--color-blue-bright) 0%, var(--color-blue) 55%, var(--color-blue-dark) 100%);
	box-shadow: 0 24px 48px -18px rgba(13, 26, 92, 0.6), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
}

.badge-48h__figure {
	color: var(--color-white);
	font: var(--text-figure);
}

.badge-48h__label {
	color: rgba(255, 255, 255, 0.88);
	font: 500 0.84375rem/1.1875rem var(--font-sans); /* 13,5 / 19 */
}

.ribbon {
	position: absolute;
	top: -36px;
	right: 0;
	left: 0;
	height: 56px;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.22);
	background: linear-gradient(180deg, #4a70f5 0%, var(--color-blue) 55%, var(--color-blue-dark) 100%);
	box-shadow: 0 24px 48px -22px rgba(36, 71, 190, 0.55);
}

.ribbon__track {
	--copies: 5;

	display: flex;
	width: max-content;
	height: 100%;
	animation: marquee 20s linear infinite;
}

.ribbon__group {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0 22px 0 0;
	list-style: none;
}

.ribbon__item {
	color: var(--color-white);
	font: 600 0.875rem/1.25rem var(--font-sans); /* 14 / 20 */
	letter-spacing: 0.12em; /* 1,68 px sur 14 */
	white-space: nowrap;
}

.ribbon__sep {
	color: var(--color-blue-pale);
	font: 400 0.75rem/1.125rem var(--font-sans); /* 12 / 18 */
}

/* ---------------------------------------------- Tablette et en dessous */

@media (max-width: 1024px) {
	.hero {
		padding-block: 72px 80px;
	}

	/* Le macaron est calé sur un cadre de 1132 : il écrase la capture en dessous. */
	.sticker {
		width: 108px;
		height: 108px;
	}

	.bento {
		flex-direction: column;
	}

	.bento__feature {
		flex: none;
		width: 100%;
	}

	/* Deux rangées égales n'ont plus de sens hors du gabarit à deux colonnes. */
	.bento__grid {
		grid-template-rows: auto;
	}

	.souverainete__cards {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Le libellé du bouton ne se coupe pas : à deux colonnes, il garde sa largeur
	 * et le texte se retrouve comprimé dans une bande étroite. On empile.
	 */
	.banner {
		flex-direction: column;
		align-items: flex-start;
	}

	.cta {
		padding-block: 112px 80px;
	}

	.cta__halo {
		left: 50%;
	}
}

/* ------------------------------------------------------------- Téléphone */

@media (max-width: 640px) {
	.hero {
		padding-block: 56px 64px;
	}

	.hero__cta {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.hero__cta .btn {
		justify-content: center;
	}

	/*
	 * La capture cesse d'être un cadre à proportions fixes : le navigateur
	 * reprend le flux, et les pastilles passent sous lui faute de place.
	 */
	.hero__showcase {
		aspect-ratio: auto;
		padding-top: 28px;
	}

	.browser {
		position: static;
		height: auto;
		aspect-ratio: 1132 / 620;
	}

	.hero__pills {
		position: static;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 14px;
	}

	.sticker {
		top: 0;
		right: 0;
		width: 84px;
		height: 84px;
	}

	.bento__grid,
	.souverainete__cards,
	.proximite__depts {
		grid-template-columns: 1fr;
	}

	/* Le repli des visuels et des étiquettes est mutualisé dans global.css. */

	.banner {
		flex-direction: column;
		align-items: stretch;
		padding: 22px;
	}

	.banner .btn {
		justify-content: center;
	}

	.cta {
		padding-block: 88px 64px;
	}

	.cta__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.cta__actions .btn {
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ticker__track,
	.ribbon__track {
		animation: none;
	}
}