/*
 * Page Application m2A Mobilités (patterns/application-page.php) : la page
 * entière vit sur un fond sombre continu (.solea-app-page, brand-canvas),
 * contrairement aux pages service (ex. Soléa) qui alternent sections claires
 * et sombres. Ce fichier pose la mise en page générique des sections
 * (.solea-app-section, .solea-app-eyebrow, ...) et adapte au fond sombre les
 * variantes de solea/card pensées à l'origine pour un fond clair
 * (feature, stat, timeline) — la variante "icon" gère déjà elle-même son
 * propre fond sombre (voir blocks/card/style.css) et n'a pas besoin d'être
 * réécrite ici.
 */

/*
 * WP's block-gap layout support (.is-layout-flow) adds margin-block-start to
 * every child but the first, assuming a stacked flow — it fights with the
 * CSS grid `gap` on our card grids and staggers the rows out of alignment.
 */
.solea-app-feature-grid > *,
.solea-app-icon-grid > *,
.solea-app-roadmap-grid > *,
.solea-app-stat-grid > *,
.solea-app-feature-banner__text-col > * {
	margin-block-start: 0 !important;
}

.solea-app-page {
	background: #0b0713;
	color: var(--wp--preset--color--brand-lavender);
	/* Full-bleed .solea-faq-accordion overshoots 100vw by the scrollbar's width; clip (not hidden) avoids promoting this box to a scroll container — see hero-panels/style.css for the full explanation. */
	overflow-x: clip;
}

.solea-app-page .solea-faq-accordion {
	margin: 0;
	background: #150f24;
}

/*
 * WP's global root-padding-aware alignment (has-global-padding) adds a
 * top/bottom padding here since the group is align="full" — that pushes
 * the hero down below the header instead of it sitting flush underneath.
 */
.solea-app-page.has-global-padding {
	padding-top: 0;
}

/*
 * Mockup téléphone partagé (bezel + écran), utilisé par solea/app-hero et
 * solea/app-steps — vit ici plutôt que dans chaque bloc puisque les deux
 * blocs en ont besoin à l'identique, seule la taille change (--lg / --sm).
 */
.solea-app-phone {
	border-radius: 44px;
	background: #08040f;
	box-shadow: 0 60px 100px -40px rgba(27, 12, 46, 0.7);
	display: grid;
	place-items: center;
}

.solea-app-phone--lg {
	width: clamp(200px, 85vw, 324px);
	aspect-ratio: 324 / 624;
}

.solea-app-phone--sm {
	width: clamp(180px, 70vw, 277px);
	aspect-ratio: 277 / 534;
	border-radius: 40px;
	box-shadow: none;
}

.solea-app-phone__screen {
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	border-radius: 34px;
	background: #0f0819;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.solea-app-phone--sm .solea-app-phone__screen {
	border-radius: 32px;
}

.solea-app-phone__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.solea-app-phone__placeholder {
	display: grid;
	justify-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.875rem;
	text-align: center;
	padding: 0 16px;
}

.solea-app-section {
	padding: clamp(48px, 7vw, 88px) clamp(20px, 4vw, 56px);
	max-width: 1728px;
	margin-inline: auto;
}

/*
 * Liserés de délimitation entre sections, même construction en gradient que
 * .solea-quick-links (assets/css/homepage.css) : une ligne pleine largeur qui
 * s'estompe aux extrémités plutôt qu'un simple trait plein.
 */
.solea-app-intro,
.solea-app-steps,
.solea-app-capabilities,
.solea-app-roadmap,
.solea-faq-accordion {
	position: relative;
}

.solea-app-intro::before,
.solea-app-steps::before,
.solea-app-steps::after,
.solea-app-capabilities::before,
.solea-app-roadmap::before,
.solea-faq-accordion::before,
.solea-faq-accordion::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(122, 59, 234, 0) 0%, var(--wp--preset--color--brand-purple-light) 35%, var(--wp--preset--color--brand-accent-light) 65%, rgba(196, 169, 255, 0) 100%);
}

.solea-app-intro::before,
.solea-app-steps::before,
.solea-app-capabilities::before,
.solea-app-roadmap::before,
.solea-faq-accordion::before {
	top: 0;
}

.solea-app-steps::after,
.solea-faq-accordion::after {
	bottom: 0;
}

.solea-app-eyebrow {
	margin: 0 0 12px;
	color: var(--wp--preset--color--brand-accent-light);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.solea-app-section-heading {
	position: relative;
	margin: 0 0 20px;
	padding-bottom: 20px;
	color: var(--wp--preset--color--base);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1.28;
}

.solea-app-intro .solea-app-section-heading,
.solea-app-intro .solea-app-section-text {
	max-width: 820px;
}

.solea-app-section-heading::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--brand-purple-light) 0%, var(--wp--preset--color--brand-accent-light) 35%, rgba(196, 169, 255, 0) 100%);
}

.solea-app-section-text {
	max-width: 62ch;
	margin: 0;
	color: #c6bbd8;
	font-size: 1.125rem;
	line-height: 1.6;
}

/* Grille de 4 cartes "feature" (Le service en bref) */
.solea-app-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: stretch;
	gap: 20px;
	margin-top: 32px;
}

.solea-app-page .solea-card--feature {
	display: flex;
	flex-direction: column;
	height: 100%;
	box-sizing: border-box;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 24px;
	padding: 28px;
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.solea-app-page .solea-card--feature .solea-card__arrow {
	position: static;
	margin-top: auto;
	padding-top: 16px;
	align-self: end;
}

.solea-app-page a.solea-card--feature:hover {
	border-color: var(--wp--preset--color--brand-purple-light);
	box-shadow: 0 18px 34px -18px rgba(122, 59, 234, 0.9);
	transform: translateY(-5px) !important;
}

.solea-app-page .solea-card--feature .solea-card__title {
	color: #efe7fb;
	font-size: 1.25rem;
	font-weight: 700;
}

.solea-app-page .solea-card--feature .solea-card__description {
	color: #a99bbf;
	font-size: 1rem;
	line-height: 1.55;
}

.solea-app-page .solea-card--feature .solea-card__arrow {
	color: var(--wp--preset--color--brand-accent-light);
}

/* "Fond mis en avant" : la carte d'accroche du groupe utilise le fond clair
   plutôt que le fond sombre partagé par les autres cartes classiques. */
.solea-app-page .solea-card--feature.solea-card--emphasis {
	background: #160e29;
	border-color: transparent;
}

.solea-app-page a.solea-card--feature.solea-card--emphasis:hover {
	border-color: var(--wp--preset--color--brand-purple-light);
	box-shadow: 0 18px 34px -18px rgba(66, 18, 102, 0.35);
}

/* Grille d'icônes (Ce que vous pouvez faire) */
.solea-app-capabilities {
	padding-top: clamp(64px, 10vw, 168px);
	padding-bottom: clamp(64px, 10vw, 168px);
	padding-left: clamp(12px, 2vw, 32px);
	padding-right: clamp(12px, 2vw, 32px);
}

/* Semis de points décoratif en haut à droite de l'étage, au-dessus des cartes. */
.solea-app-capabilities::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 46%;
	height: 280px;
	color: var(--wp--preset--color--brand-purple-light);
	opacity: 0.35;
	background-image: radial-gradient(currentColor 1.7px, transparent 1.8px);
	background-size: 14px 14px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	pointer-events: none;
}

.solea-app-capabilities > * {
	position: relative;
	z-index: 1;
}

.solea-app-icon-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	align-items: stretch;
	gap: 4px;
	margin-top: 64px;
}

.solea-app-page .solea-card--icon-stack {
	height: 100%;
	background: #0b0713;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 20px;
	box-sizing: border-box;
	transition: background-color 0.2s ease;
}

.solea-app-page .solea-card--icon-stack:hover {
	background: #160e29;
}

/* Bannière "Voyagez, même sans connexion" */
.solea-app-feature-banner {
	padding: clamp(40px, 9vw, 140px) clamp(20px, 4vw, 48px);
}

/*
 * Le bloc Cover ne rend qu'un seul conteneur natif, .wp-block-cover__inner-container
 * (pas de className custom possible dessus) — on cible donc ce sélecteur
 * générique, scopé à la bannière via le parent, pour poser la grille 2
 * colonnes texte / chiffres clés.
 */
.solea-app-feature-banner > .wp-block-cover__inner-container {
	max-width: 1512px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 6vw, 120px);
	align-items: center;
	text-align: left;
}

.solea-app-feature-banner__text-col {
	display: grid;
	gap: clamp(20px, 2.5vw, 28px);
}

.solea-app-feature-banner__heading {
	margin: 0;
	color: var(--wp--preset--color--base);
	font-size: clamp(2rem, 3.9vw, 3.75rem);
	font-weight: 800;
	line-height: 1.02;
	text-transform: none;
}

.solea-app-feature-banner__text {
	max-width: 56ch;
	margin: 0;
	color: #c6bbd8;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* Chiffres clés (30 titres / 0 donnée / 100 %) : les 3 cartes forment un
   seul bloc visuel (bordure extérieure unique, lignes de séparation entre
   les lignes) plutôt que 3 cartes espacées avec leur propre bordure. */
.solea-app-stat-grid {
	display: grid;
	gap: 2px;
	border-radius: 16px;
	overflow: hidden;
	width: fit-content;
	justify-self: flex-end;
}

.solea-app-page .solea-card--stat {
	width: 100%;
	background: rgba(10, 5, 20, 0.4);
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 0;
	box-shadow: none;
	padding: 20px 80px 20px 20px;
	text-align: left;
	box-sizing: border-box;
	backdrop-filter: blur(5px);
}

.solea-app-page .solea-card--stat:last-child {
	border-bottom: none;
}

.solea-app-page .solea-card--stat .solea-card__title {
	color: var(--wp--preset--color--base);
	font-size: 2rem;
	font-weight: 800;
}

.solea-app-page .solea-card--stat .solea-card__description {
	margin-top: 4px;
	color: #a99bbf;
	font-size: 0.9375rem;
}

@media (max-width: 960px) {
	.solea-app-feature-banner > .wp-block-cover__inner-container {
		grid-template-columns: 1fr;
	}

	.solea-app-stat-grid {
		width: 100%;
		justify-self: stretch;
	}
}

/* Feuille de route (chronologie) : texte à gauche, cartes empilées à droite */
.solea-app-roadmap {
	display: grid;
	grid-template-columns: minmax(0, 700px) minmax(0, 664px);
	gap: clamp(32px, 5vw, 88px);
	align-items: start;
}

.solea-app-roadmap-grid {
	display: grid;
	gap: 24px;
}

.solea-app-page .solea-card--timeline {
	background: rgba(162, 126, 254, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 24px;
}

.solea-app-page .solea-card--timeline.solea-card--dashed {
	background: rgba(162, 126, 254, 0.1);
	border: 1px dashed rgba(162, 126, 254, 0.5);
}

.solea-app-page .solea-card--timeline .solea-card__eyebrow {
	color: var(--wp--preset--color--brand-accent-light);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}

.solea-app-page .solea-card--timeline .solea-card__title {
	color: var(--wp--preset--color--base);
	font-size: 1.1875rem;
	font-weight: 700;
}

.solea-app-page .solea-card--timeline .solea-card__description {
	color: #c6bbd8;
}

@media (max-width: 960px) {
	.solea-app-roadmap {
		grid-template-columns: 1fr;
	}
}

/*
 * SOLEWPSS002-17 : .solea-cta-banner__heading est partagée avec le CTA de la
 * homepage et de la page service (cta-banner.css) — seule la casse du
 * bandeau de fin de page app a été validée, donc override scopé ici plutôt
 * que retirer l'uppercase à la source.
 */
.solea-app-page h2.solea-cta-banner__heading {
	text-transform: none;
}

/* Sur-titre de la bannière finale (bloc Cover .solea-cta-banner) */
.solea-cta-banner__eyebrow {
	margin: 0 0 16px;
	color: var(--wp--preset--color--brand-accent-light);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
}

@media (max-width: 960px) {
	.solea-app-feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.solea-app-icon-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 640px) {
	.solea-app-feature-grid,
	.solea-app-stat-grid {
		grid-template-columns: 1fr;
	}

	.solea-app-icon-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.solea-app-section-heading {
		font-size: 2rem;
	}
}