/**
 * Dahu Theme Annad 2026 — page « Technologie » (maquette modeles/technologie.png).
 *
 * Page sombre : fond, titres (.annad-title), surtitres (.annad-eyebrow), boutons et conteneurs
 * viennent de front-page.css, déjà chargé sur toutes les pages. Ce fichier ne contient que ce qui
 * est propre à cette page. Mobile-first, breakpoints 40em / 64em.
 */

.annad-techno {
	--annad-techno-figure: #323131; /* cartes de chiffres clés (maquette) */
	--annad-techno-spec: #363535; /* cellules de spécifications */
	--annad-techno-allroad: #444141; /* grille de spécifications All-road */
}

/* ---------- Hero : deux visuels côte à côte ---------- */

.annad-techno__hero.wp-block-columns {
	gap: 0.5rem;
	margin-bottom: 0; /* l'espacement entre sections vient de .annad-section */
}

.annad-techno__hero figure {
	margin: 0;
}

.annad-techno__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.annad-techno__intro {
	max-width: 44rem;
	margin-inline: auto;
	margin-bottom: 0;
	color: var(--color-text-muted);
}

/* ---------- Chiffres clés ---------- */

.annad-techno__figures {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-bottom: 0;
}

@media (min-width: 64em) {
	.annad-techno__figures {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.annad-techno__figure {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	justify-content: center;
	min-height: 8rem;
	padding: 1.5rem;
	text-align: center;
	background-color: var(--annad-techno-figure);
	border-radius: var(--annad-radius-small);
}

.annad-techno__figure-value {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-brand-green);
}

.annad-techno__figure-label {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

/* ---------- Schéma annoté ---------- */
/* Étiquettes en LISTE à côté de l'image (jamais en positionnement absolu) : sous l'image en mobile,
   deux colonnes à partir de 40em. Les repères visuels font partie de l'image fournie. */

.annad-techno__schema.wp-block-columns {
	gap: 3rem;
	align-items: center;
	margin-bottom: 2rem;
}

.annad-techno__schema-img {
	margin: 0 0 1.5rem;
}

.annad-techno__schema-img img {
	width: 100%;
	height: auto;
}

.annad-techno .annad-techno__labels {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.625rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.annad-techno .annad-techno__labels {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.annad-techno .annad-techno__labels li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.9375rem;
	font-weight: 600;
}

/* Puce verte : rappelle l'anneau du schéma sans dépendre de sa position dans l'image */
.annad-techno .annad-techno__labels li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background-color: var(--color-brand-green);
	border-radius: 50%;
}

.annad-techno__tip {
	max-width: 36rem;
	margin-bottom: 0;
	padding: 1.5rem;
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	background-color: var(--color-surface-3);
	border-radius: var(--annad-radius-small);
}

/* ---------- Blocs image + texte alternés ---------- */

.annad-techno__split.wp-block-columns {
	gap: 3rem;
	align-items: center;
	margin-block: 0;
}

.annad-techno__split figure {
	margin: 0;
}

.annad-techno__split img {
	width: 100%;
	height: auto;
	border-radius: var(--annad-radius-small);
}

.annad-techno__split h3 {
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
	font-weight: 800;
	line-height: 1.2;
}

.annad-techno__split p:not(.annad-eyebrow) {
	color: var(--color-text-muted);
}

/* Ordre inversé en desktop seulement : en mobile, l'image reste au-dessus du texte */
@media (min-width: 782px) {
	.annad-techno__split--reverse.wp-block-columns {
		flex-direction: row-reverse;
	}
}

/* ---------- Bandeau vert plein ---------- */
/* .annad-techno__band et .annad-techno__band-title : assets/css/bandeau.css. Le bandeau sert
   aussi au bas des fiches produit des moteurs, où cette feuille n'est pas chargée. */

/* ---------- Spécifications ---------- */

.annad-techno__specs,
.annad-techno__allroad {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-block: 0;
}

/* Marge INTERNE à la composition « Moteur All-road 80 » : sépare le texte de sa grille */
.annad-techno__allroad {
	margin-block: 3rem;
}

@media (min-width: 64em) {
	.annad-techno__specs {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.annad-techno__allroad {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.annad-techno__spec {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem;
	background-color: var(--annad-techno-spec);
	border-radius: var(--annad-radius-small);
}

.annad-techno__spec--allroad {
	background-color: var(--annad-techno-allroad);
}

.annad-techno__spec-label {
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--color-text-muted);
}

.annad-techno__spec-value {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--color-brand-green);
}

/* ---------- Image pleine largeur ---------- */

.annad-techno__banner {
	margin-block: 0;
}

.annad-techno__banner img {
	width: 100%;
	height: auto;
}