/*
 * Encart ovale — mise en avant des mots-clés de titre en Averia Serif Libre.
 * cf. docs/08-da-design-system.md §1 : asset non confirmé au moment de la rédaction (🟡),
 * confirmé en recette le 31/08/2026 par inspection de https://0toheros.com/ — ce sont de
 * vraies images PNG (pas un SVG dessiné en CSS), mesurées via getComputedStyle().
 * Exception documentée à la règle "aucun CSS hors theme.json" (10-specs-techniques.md §Conventions).
 */

/* Variante "outline" — h1 de l'accueil uniquement (Ellipse-7.png, tracé fin, texte accent). */
.mot-hero {
	display: inline-block;
	padding: 30px 50px;
	color: var(--wp--preset--color--accent);
	background: url("../images/Ellipse-7.png") no-repeat 50% 50%;
	background-size: 100% 80%;
}

/* Variante "pleine" — toutes les autres occurrences (Ellipse7.png, fond plein menthe, texte sombre). */
.mot-encart {
	display: inline-block;
	padding: 25px 40px;
	color: var(--wp--preset--color--texte-sur-accent);
	background: url("../images/Ellipse7.png") no-repeat 50% 50%;
	background-size: 100% 80%;
}

/*
 * Carte offre — bloc "0 to héros s'adapte à la vie de ton projet" (accueil + 3 pages offre).
 * Mesuré sur https://0toheros.com/ le 31/08/2026 (desktop 1440px) : bordure pleine (pas juste
 * à gauche), padding 32px, icône+label en ligne, flèche en coin bas-droit, carte cliquable
 * en entier (contrainte native Gutenberg : impossible en blocs composables, cf. wp:html).
 * Deuxième exception documentée à "aucun CSS hors theme.json" — même raison que l'encart ovale :
 * mise en page non exprimable en tokens theme.json (bordure de bloc + positionnement absolu).
 */
.carte-offre {
	display: block;
	position: relative;
	border: 1.5px solid var(--wp--preset--color--accent);
	padding: 32px;
	margin-bottom: 20px;
	color: var(--wp--preset--color--texte);
	text-decoration: none;
}

.carte-offre__entete {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.carte-offre__icone {
	width: 44px;
	height: 36px;
}

.carte-offre__label {
	font-family: var(--wp--preset--font-family--open-sans);
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.carte-offre__titre {
	font-family: var(--wp--preset--font-family--averia-serif-libre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h3);
	margin: 0 0 20px;
}

.carte-offre__description {
	font-size: 18px;
	margin: 0 0 34px;
}

.carte-offre__liste {
	margin: 0;
	padding-left: 1.2em;
}

.carte-offre__fleche {
	position: absolute;
	right: 32px;
	bottom: 32px;
	width: 40px;
	height: 33px;
}

/*
 * Citation — questions mises en avant ("Tu te poses sûrement ces questions" et section
 * équivalente sur les 3 pages offre). Mesuré : Averia Serif Libre 400, 28px fixe (ne suit
 * pas l'échelle fluide h2/h3), couleur accent, simple paragraphe (pas de liste à puces).
 */
.citation {
	font-family: var(--wp--preset--font-family--averia-serif-libre);
	font-weight: 400;
	font-size: 28px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 20px;
}

/*
 * Ligne icône + texte — "0 to héros est fait pour toi si...", 3 pages offre.
 * Mesuré : icône ~77px, gap 20px, texte Open Sans 18px blanc.
 */
.ligne-icone-texte {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 20px;
}

.ligne-icone-texte img {
	width: 77px;
	flex-shrink: 0;
}

.ligne-icone-texte p {
	font-size: 18px;
	margin: 0;
}

/*
 * Stat / nom de témoignage — "Résultats", 3 pages offre. Mesuré : H4, 40px pour les
 * chiffres, 24px pour le nom du client (même balise, tailles différentes par contexte).
 */
.stat-nombre {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 40px;
	margin: 0 0 8px;
}

.temoignage-nom {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 24px;
	margin: 0;
}

/*
 * Carte simple — "Pourquoi choisir 0 to héros ?", 3 pages offre. Mesuré : pas de bordure
 * ni de fond (contrairement à .carte-offre), icône + titre 26px uppercase + texte.
 */
.carte-simple__icone {
	width: 62px;
	margin-bottom: 20px;
}

.carte-simple__titre {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/*
 * Carte étape numérotée — "0 to héros s'adapte à la vie de ton projet", 3 pages offre
 * (variante différente des cartes offre de l'accueil : bordure 2px, padding 40px, numéro
 * "01" en H4 séparé du titre H3, pas d'icône ni de flèche).
 */
.carte-etape {
	border: 2px solid var(--wp--preset--color--accent);
	padding: 40px;
	margin-bottom: 20px;
}

.carte-etape__numero {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 12px;
}

.carte-etape__titre {
	font-family: var(--wp--preset--font-family--averia-serif-libre);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--h3);
	margin: 0 0 20px;
}

/*
 * Étape de méthode — "Notre méthode pour réussir...", 3 pages offre. Pas de bordure,
 * numéro "01" en H4, titre en 26px uppercase (fixe, ne suit pas l'échelle fluide h3).
 */
.etape-methode__numero {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 20px;
	color: var(--wp--preset--color--accent);
	margin: 0 0 8px;
}

.etape-methode__titre {
	font-family: var(--wp--preset--font-family--open-sans);
	font-weight: 700;
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

/*
 * Bloc Calendly du footer (Accueil + Contact) — mesuré : 2 colonnes en desktop
 * (texte + photo à gauche, widget Calendly à droite), photo de Gabrielle réelle
 * (pas une icône), icône décorative à côté du H2.
 */
.calendly-section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}

.calendly-section__titre {
	display: flex;
	align-items: center;
	gap: 20px;
}

.calendly-section__titre img {
	width: 44px;
	height: 44px;
}

.calendly-section__intervenant {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.calendly-section__photo {
	width: 144px;
	height: 138px;
	object-fit: cover;
}

/*
 * Coordonnées (email/téléphone) du footer — mesuré : masquées en desktop sur le site
 * réel (seul le logo reste visible dans cette colonne), visibles uniquement en mobile.
 */
@media (min-width: 1025px) {
	.footer-coordonnees {
		display: none;
	}
}

/*
 * Boutons pleine largeur en mobile — mesuré sur https://0toheros.com/ (375px) :
 * les boutons (hero, CTA de section) passent en display:block, largeur 100%.
 */
@media (max-width: 781px) {
	.wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.wp-block-buttons .wp-block-button .wp-block-button__link {
		display: block;
		text-align: center;
	}
}