/* ==========================================================================
   Métiffiot — feuille de style des composants "mtf-*"
   Tout le reste (espacements, tailles, backgrounds photo) se règle
   directement dans le Divi Builder, module par module. Il ne reste ici
   que ce que Divi ne permet pas de régler depuis son interface.
   ========================================================================== */

:root {
	--mtf-navy: #141f36;
}

/* ---- police "Ailerons" (Métiffiot Le Lab) : Divi n'auto-charge un
   @font-face que pour les 4 polices globales du site (titre/corps/
   bouton/nav) réglées dans Options du thème. Ailerons n'est utilisée que
   ponctuellement (sous-titres et boutons de la page Le Lab), donc pas de
   réglage natif possible pour ça -- c'est le seul moyen de la charger. ---- */
@font-face {
	font-family: "Ailerons";
	src: url("/wp-content/uploads/et-fonts/Ailerons-Typeface.otf") format("opentype");
	font-weight: 400;
	font-display: swap;
}

/* ---- petite date au-dessus des titres de la frise "Notre histoire en
   10 dates" (module_class="mtf-hist-date" sur un <span> dans un module
   Texte) : purement une couleur/typo, réglable nulle part ailleurs dans
   Divi puisque c'est un <span> à l'intérieur d'un bloc de texte. ---- */
.mtf-hist-date {
	display: inline-block;
	font-family: 'Inter', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mtf-navy);
}

/* ---- rangées "étapes" (numérotées 01, 02, ...) sur les pages métiers :
   Divi n'expose aucun réglage pour ça dans le Builder. Son moteur code
   en dur, pour une rangée à colonnes égales, deux paliers seulement :
   2 par ligne jusqu'à 980px puis 1 par ligne sous 479px. Entre les deux
   (la plupart des téléphones), rien n'empile automatiquement. Cette
   règle comble ce trou en forçant l'empilement dès 767px. ---- */
@media (max-width: 767px) {
	.mtf-steps-row .et_pb_column {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 28px !important;
	}
	.mtf-steps-row .et_pb_column:last-child { margin-bottom: 0 !important; }
}

/* ---- titres en Bebas Neue : c'est une police très condensée en
   majuscules. Certains titres vivent dans des colonnes étroites (les
   colonnes 1/4 des listes "Nos prestations", par exemple) : un mot
   long ou composé ("Carrosserie", "Véhicules", "Prestations"...) peut
   alors dépasser la largeur disponible, y compris sur desktop, et le
   navigateur le coupe n'importe où ("VÉHICULE" / "S"). Cette règle
   active la coupure syllabique française (le site est en lang="fr-FR")
   pour que ça se coupe proprement ("VÉHICU-LES") au lieu d'un saut au
   milieu d'un mot. Sans effet sur les titres qui tiennent déjà sur une
   ligne : la coupure ne se déclenche qu'en cas de dépassement réel.
   Pas réglable depuis Divi. ---- */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	hyphens: auto;
}