/**
 * Dahu Theme Annad 2026 — page « Technologie » 2026 (4.48.0, maquette
 * modeles/Page Technologie Octobre 2026.png).
 *
 * Compositions « Technologie 2026 — … » (patterns/technologie-2026-*.php), blocs natifs : classes
 * .annad-tp-* posées sur les blocs racines. Les blocs dynamiques du schéma (annad/moteur-points) et du
 * tableau (annad/caracteristiques) ont leurs propres feuilles (moteur-points.css, caracteristiques.css).
 * Chargée sur toute page dont le contenu porte ces classes ou ces blocs (functions.php), et dans
 * l'éditeur (inc/blocks.php). L'ancienne page (technologie.css, .annad-techno__*) n'est pas touchée :
 * « La société » s'en sert encore.
 *
 * Réutilise : sections et titres (front-page.css), styles de boutons « Annad », ombre au survol et
 * classe .electricite (button-effects.css), bandeau vert .annad-techno__band (bandeau.css), motif
 * « Surface claire » (surface-claire.css), format « Vert Annad » (.is-brand). Couleurs : palette
 * uniquement. Mobile-first, paliers 48em / 64em.
 *
 * Images : emplacements Gutenberg vides dans les compositions (Hugo choisit dans la médiathèque) ;
 * en attendant, gris neutre (--color-surface-3). Couvertures : voile « Fond » à 30 % pour la
 * lisibilité une fois la photo choisie ; sans photo, gris neutre.
 */

.annad-tp {
	--annad-tp-radius: 1.25rem;
	--annad-tp-line: color-mix(in srgb, var(--color-on-surface) 18%, transparent);
	--annad-tp-courbe-h: clamp(2.5rem, 10vw, 9.5rem);
}

/* Sections collées : l'espacement vient de leur marge intérieure (.annad-section), pas de l'écart
   automatique entre blocs, qui laisserait une bande de fond de page entre deux sections colorées. */
.annad-blocks > .annad-tp,
.is-root-container > .annad-tp {
	margin-block: 0;
}

/* Sections à fond propre : espace en bas aussi (front-page.css ne donne que le haut). */
.annad-tp.annad-section.has-background {
	padding-bottom: var(--annad-section-space);
}

.annad-tp-titre {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	text-wrap: balance;
}

/* Plus large que le contenu étroit (48rem) de la mise en page contrainte : deux classes. */
.annad-tp .annad-tp-texte-centre {
	max-width: 62rem;
	margin-inline: auto;
	font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
	line-height: 1.75;
	text-align: center;
}

/* Emplacement d'image pas encore choisi : gris neutre, proportions de la maquette. En façade,
   WordPress n'écrit rien pour une image sans photo : inc/blocks.php y met une figure vide
   .annad-tp-image-vide (dans l'éditeur, c'est le sélecteur d'image natif). */
.annad-tp .annad-tp-image-vide,
.annad-tp .wp-block-image:has(img:not([src])),
.annad-tp .wp-block-image:has(img[src=""]) {
	min-height: 12rem;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-3) url("../images/fond-courbes.webp") center / cover no-repeat;
	border-radius: var(--annad-tp-radius);
}

.annad-tp .wp-block-image img:not([src]),
.annad-tp .wp-block-image img[src=""] {
	display: none;
}

/* ---------- 1. Hero clair ---------- */

.annad-tp-hero.annad-section {
	padding-block: clamp(2.5rem, 6vw, 5rem);
}

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

.annad-tp-hero h1 {
	margin-bottom: 1rem;
	font-family: var(--font-heading);
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	text-wrap: balance;
}

.annad-tp-hero__sous-titre {
	margin-bottom: 2rem;
	font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
	line-height: 1.25;
	color: var(--color-accent);
}

/* Boutons du hero : 14rem de large comme la maquette ; « Annad — Clair » en blanc à liseré, sinon il
   disparaîtrait sur le fond clair. */
.annad-tp-hero .wp-block-buttons {
	gap: 1rem 1.5rem;
}

.annad-tp-hero .wp-block-button__link {
	min-width: min(100%, 17.5rem);
}

.annad-tp-hero .wp-block-button.is-style-annad-light .wp-block-button__link {
	background-color: var(--wp--preset--color--blanc);
	border-color: color-mix(in srgb, var(--color-on-surface-light) 30%, transparent);
}

.annad-tp-hero .wp-block-image {
	margin: 0;
}

/* Case photo vide sur fond clair : gris clair plutôt que le gris des sections sombres. */
.annad-tp-hero .annad-tp-image-vide {
	background-image: none;
	background-color: color-mix(in srgb, var(--color-on-surface-light) 10%, var(--color-surface-light));
	border-radius: var(--annad-tp-radius);
}

.annad-tp-hero .wp-block-image img {
	width: 100%;
	height: auto;
}

/* ---------- 3. Chiffres clés ---------- */

.annad-tp-chiffres .wp-block-columns {
	gap: 1rem;
	max-width: 72rem;
	margin-inline: auto;
}

/* Deux par ligne sous 782px (le cœur empile les colonnes en pleine largeur, en !important). */
@media (max-width: 781px) {
	.annad-tp-chiffres .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.annad-tp-chiffres .wp-block-columns > .wp-block-column {
		flex-basis: calc(50% - 0.5rem) !important;
	}
}

@media (min-width: 64em) {
	.annad-tp-chiffres .wp-block-columns {
		gap: 2.75rem;
	}
}

.annad-tp-chiffre.wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	min-height: 9.75rem;
	padding: 1.5rem 0.75rem;
	text-align: center;
	background-image: linear-gradient(160deg, var(--color-surface-3), var(--color-surface-2));
	border: 1px solid var(--annad-tp-line);
	border-radius: 1rem;
}

.annad-tp-chiffre__valeur {
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-brand-green);
}

.annad-tp-chiffre__legende {
	font-size: 0.9375rem;
}

/* ---------- Couvertures arrondies (4, 9, 13) ---------- */

.annad-tp-couverture.wp-block-cover {
	min-height: clamp(26rem, 48vw, 43rem);
	padding: clamp(1.5rem, 4vw, 3.5rem);
	overflow: hidden;
	border-radius: var(--annad-tp-radius);
}

/* Sans photo choisie : gris neutre (le voile à 30 % laisserait voir le fond de page). */
.annad-tp-couverture.wp-block-cover:not(:has(> .wp-block-cover__image-background, > .wp-block-cover__video-background)) {
	background-color: var(--color-surface-3);
}

.annad-tp-couverture .wp-block-cover__inner-container {
	color: var(--color-on-surface);
}

.annad-tp-couverture h2 {
	font-family: var(--font-heading);
	font-size: clamp(1.875rem, 1.1rem + 2.8vw, 3.25rem);
	font-weight: 800;
	line-height: 1.05;
	text-wrap: balance;
}

/* 4. « Pensé pour la compétition » : texte en haut à gauche, bouton en bas à droite. */
/* width : le cœur remet « auto » sur une couverture à position de contenu choisie (0-4-0). */
.annad-tp-couverture--haut .wp-block-cover__inner-container {
	width: 100% !important;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.annad-tp-couverture--haut p {
	max-width: 42rem;
	margin-top: clamp(1.5rem, 4vw, 4rem);
	font-size: clamp(1rem, 0.95rem + 0.3vw, 1.25rem);
	font-weight: 600;
	line-height: 1.45;
}

.annad-tp-couverture--haut .wp-block-buttons {
	justify-content: flex-end;
	margin-top: auto;
	padding-top: 2rem;
}

/* Mot barré (format « Barré » de l'éditeur) : trait à la couleur du texte. */
.annad-tp-couverture s {
	text-decoration-thickness: 0.08em;
}

/* 9. « Technologie ALL IN ONE » : titre et bouton en bas à gauche. */
.annad-tp-couverture--bas .wp-block-buttons {
	margin-top: 2rem;
}

/* 9 et 13. Couvertures « bas » (ALL IN ONE) et « centre » (dernière) : même hauteur, moins hautes
   que la règle commune ci-dessus (4.51.0 : la « bas » gardait clamp(26rem, 48vw, 43rem), 688px à
   1440 contre 448px). Hauteur des deux réglée ici seulement : aucun minHeight dans les compositions. */
.annad-tp-couverture--bas.wp-block-cover,
.annad-tp-couverture--centre.wp-block-cover {
	min-height: clamp(20rem, 32vw, 28rem);
}

/* 13. Dernière couverture : centrée en bas. */

.annad-tp-couverture--centre .wp-block-cover__inner-container {
	text-align: center;
}

.annad-tp-couverture--centre h2 {
	max-width: 15ch;
	margin-inline: auto;
}

.annad-tp-couverture--centre .wp-block-buttons {
	justify-content: center;
	margin-top: 1.5rem;
}

.annad-tp-couverture--centre .wp-block-button__link {
	min-width: min(100%, 18rem);
}

/* ---------- 5. Schéma ---------- */

.annad-tp-schema__titre {
	max-width: 14em;
	margin-bottom: 2rem;
	font-family: var(--font-heading);
	font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
	font-weight: 400;
	line-height: 1.1;
}

/* ---------- Courbes de séparation ----------
   Dessinées en haut de la section qui suit, à la couleur de la section précédente
   (--annad-tp-courbe, défaut : fond de page). Le contenu passe au-dessus. */
.annad-tp-courbe {
	position: relative;
	isolation: isolate;
	padding-top: calc(var(--annad-tp-courbe-h) + var(--annad-section-space)) !important;
}

.annad-tp-courbe::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: var(--annad-tp-courbe-h);
	background-color: var(--annad-tp-courbe, var(--color-surface));
	/* 6. Sous le schéma : arc symétrique, plus bas au centre. */
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* 9. Après la grille : arc d'un seul côté, du haut à gauche vers le bas au milieu. */
.annad-tp-courbe--gauche {
	--annad-tp-courbe-h: clamp(2rem, 5vw, 4.5rem);
}

.annad-tp-courbe--gauche::before {
	border-radius: 0 0 0 50% / 0 0 0 100%;
}

/* ---------- 6. Rangées texte / image ---------- */

.annad-tp-rangees > .annad-tp-rangee + .annad-tp-rangee {
	margin-top: clamp(3rem, 6vw, 4.5rem);
}

.annad-tp-rangee {
	display: grid;
	grid-template-areas: "titre" "photo" "texte";
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 48em) {
	.annad-tp-rangee {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas: "titre photo" "texte photo";
		grid-template-rows: auto 1fr;
		column-gap: clamp(2rem, 7vw, 6.5rem);
	}

	.annad-tp-rangee--inverse {
		grid-template-areas: "photo titre" "photo texte";
	}
}

.annad-tp-rangee > .annad-tp-cadre {
	grid-area: titre;
	align-self: end;
	margin: 0;
}

.annad-tp-rangee > .wp-block-image {
	grid-area: photo;
	margin: 0;
}

.annad-tp-rangee > p {
	grid-area: texte;
	align-self: start;
	margin: 0;
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: 1.6;
}

/* Titre vert dans un cadre à bord fin arrondi (maquette : liseré clair, léger dégradé). */
.annad-tp-cadre.wp-block-group {
	width: fit-content;
	max-width: 100%;
	padding: 1.25rem 1.5rem;
	background-image: linear-gradient(135deg, var(--color-surface-3), transparent 70%);
	border: 1px solid var(--annad-tp-line);
	border-radius: 1rem;
}

.annad-tp-cadre h2,
.annad-tp-cadre h3 {
	max-width: 20ch;
	margin: 0;
	font-family: var(--font-heading);
	font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.05;
	color: var(--color-brand-green);
}

.annad-tp-photo.wp-block-image,
.annad-tp-photo.wp-block-image img {
	overflow: hidden;
	border-radius: var(--annad-tp-radius);
}

.annad-tp-photo.wp-block-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ---------- 7. Bandeau vert (bandeau.css) : arc sombre posé sur son haut ---------- */

.annad-tp-bande.annad-techno__band {
	position: relative;
	margin-top: 0;
}

.annad-tp-bande::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: calc(var(--annad-tp-courbe-h) * 0.6);
	background-color: var(--color-surface);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.annad-tp-bande p {
	font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem);
	line-height: 1.6;
}

.annad-tp-bande .annad-techno__band-title {
	max-width: 16ch;
	margin-inline: auto;
	font-size: clamp(2rem, 1.1rem + 4vw, 4.5rem);
	line-height: 1;
}

/* Rangées juste avant : bandeau collé, l'arc se pose sur leur marge basse (agrandie d'autant). */
.annad-tp.annad-tp-rangees.has-background {
	padding-bottom: calc(var(--annad-section-space) + var(--annad-tp-courbe-h) * 0.6);
}

.annad-tp-rangees:has(+ .annad-tp-bande) {
	margin-bottom: 0 !important;
}

/* ---------- 8. Grille 2 × 2 ---------- */

.annad-tp-grille.wp-block-group {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	overflow: hidden;
	border-radius: var(--annad-tp-radius);
}

@media (min-width: 48em) {
	.annad-tp-grille.wp-block-group {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.annad-tp-grille > * {
	margin: 0 !important;
}

.annad-tp-grille > .wp-block-image {
	min-height: 16rem;
}

.annad-tp-grille > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.annad-tp-grille > .annad-tp-image-vide,
.annad-tp-grille > .wp-block-image:has(img:not([src])) {
	aspect-ratio: auto;
	border-radius: 0;
}

.annad-tp-grille__carte.wp-block-group {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3.25rem);
}

.annad-tp-grille__carte h2,
.annad-tp-grille__carte h3 {
	font-family: var(--font-heading);
	font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
}

.annad-tp-grille__carte p {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: 1.75;
}

/* Mobile : photo, texte, photo, texte (ordre du DOM : photo, texte, texte, photo). */
@media (max-width: 47.99em) {
	.annad-tp-grille > :nth-child(3) {
		order: 4;
	}

	.annad-tp-grille > :nth-child(4) {
		order: 3;
	}
}

.annad-tp-surtitre {
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-brand-green);
}

/* ---------- 11. Intégré jusqu'à la batterie ---------- */

.annad-tp-batterie.wp-block-columns {
	align-items: center;
	gap: 2rem clamp(2rem, 7vw, 9rem);
}

.annad-tp-batterie h2 {
	margin-bottom: 1.5rem;
	font-family: var(--font-heading);
	font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
	font-weight: 600;
	line-height: 1.2;
}

.annad-tp-batterie p {
	font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
	line-height: 1.75;
}

.annad-tp-batterie .wp-block-buttons {
	justify-content: center;
	margin-top: 1rem;
}

.annad-tp-batterie .wp-block-button__link {
	min-width: min(100%, 17.5rem);
}

/* ---------- 12. Spécificités ---------- */

.annad-tp-specs .annad-tp-titre {
	max-width: var(--wp--style--global--wide-size, 80rem);
	margin-bottom: clamp(2rem, 5vw, 4rem);
	text-align: center;
}