/**
 * Composants réutilisables — préfixe "maef-"
 * --------------------------------------------
 * Classes à ajouter manuellement dans Divi Builder (champ "Classe CSS" des
 * modules/lignes/sections). Voir README.md pour la liste des associations
 * module Divi ↔ classe. Chaque composant ne dépend que des variables
 * déclarées dans variables.css.
 */

/* ==========================================================
   Layout — conteneur, sections, courbes
   ========================================================== */
.maef-container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.maef-section {
	padding-block: var(--space-xl);
}

.maef-section--tight {
	padding-block: var(--space-lg);
}

.maef-section--surface {
	background-color: var(--color-surface-alt);
}

.maef-section--primary {
	background-color: var(--color-primary);
	color: var(--color-white);
}

.maef-section--primary h1,
.maef-section--primary h2,
.maef-section--primary h3,
.maef-section--primary h4,
.maef-section--primary h5,
.maef-section--primary h6 {
	color: var(--color-white);
}

/* Grandes courbes utilisées entre les sections pleine largeur (hero, blocs
   de couleur) — à appliquer sur la ligne/section Divi concernée. */
.maef-section--curved-top {
	border-top-left-radius: var(--border-radius-lg);
	border-top-right-radius: var(--border-radius-lg);
}

.maef-section--curved-bottom {
	border-bottom-left-radius: var(--border-radius-lg);
	border-bottom-right-radius: var(--border-radius-lg);
}

/* ==========================================================
   Titres spécifiques — hero, chapeau, kicker de section
   ========================================================== */

/* Titre plein écran de la page d'accueil ("H1 Home Titre Header", 71px/blanc).
   À appliquer sur le module Titre de texte Divi de la section hero,
   en complément (pas en remplacement) du H1 sémantique de la page. */
.maef-title-hero {
	font-family: var(--font-heading);
	font-size: var(--font-size-hero);
	line-height: var(--line-height-hero);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	margin: 0;
}

/* Paragraphe d'introduction ("Chapeau") affiché sous le hero. */
.maef-lead {
	font-family: var(--font-heading);
	font-size: var(--font-size-lead);
	line-height: var(--line-height-lead);
	font-weight: var(--font-weight-regular);
	color: var(--color-primary);
	margin: 0 0 var(--space-md);
}

/* Kicker/titre de section en accent tan, pour les cas où le niveau de titre
   sémantique (h1/h2, déjà stylés en tan par défaut, voir base.css) ne
   convient pas — ex. un intitulé secondaire dans un module Texte Divi. */
.maef-section-title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	font-weight: var(--font-weight-bold);
	color: var(--color-secondary);
	margin: 0 0 var(--space-sm);
}

/* ==========================================================
   Boutons — 4 variantes relevées dans la maquette
   ========================================================== */
.maef-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	min-height: 44px; /* zone cliquable accessible */
	padding: 0.75rem 1.75rem;
	border-radius: var(--border-radius-pill);
	border: 2px solid transparent;
	font-family: var(--font-heading);
	font-size: var(--font-size-sm);
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--transition-default),
		border-color var(--transition-default),
		color var(--transition-default),
		transform var(--transition-default);
}

.maef-button:hover {
	transform: translateY(-2px);
}

.maef-button:active {
	transform: translateY(0);
}

.maef-button:disabled,
.maef-button[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

/* Bouton 01 — fond navy, texte blanc, regular */
.maef-button--primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: var(--font-weight-regular);
}

.maef-button--primary:hover {
	background-color: color-mix(in srgb, var(--color-primary) 85%, black);
	border-color: color-mix(in srgb, var(--color-primary) 85%, black);
	color: var(--color-white);
}

/* Bouton 02 — contour noir, texte navy, bold */
.maef-button--secondary {
	background-color: transparent;
	border-color: var(--color-black);
	color: var(--color-primary);
	font-weight: var(--font-weight-bold);
}

.maef-button--secondary:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--color-primary);
}

/* Bouton 03 — contour noir, texte noir, regular */
.maef-button--tertiary {
	background-color: transparent;
	border-color: var(--color-black);
	color: var(--color-black);
	font-weight: var(--font-weight-regular);
}

.maef-button--tertiary:hover {
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--color-black);
}

/* Bouton 04 — contour blanc, texte blanc, bold (sur fond sombre) */
.maef-button--on-dark {
	background-color: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
	font-weight: var(--font-weight-bold);
}

.maef-button--on-dark:hover {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--color-white);
}

/* ==========================================================
   Grille de cartes — "Nos projets", partenaires (logos)
   Nombre de colonnes réduit progressivement en responsive, voir responsive.css.
   ========================================================== */
.maef-grid {
	display: grid;
	grid-template-columns: repeat(var(--maef-grid-columns, 4), 1fr);
	gap: var(--space-md);
}

.maef-grid--2 {
	--maef-grid-columns: 2;
}

.maef-grid--3 {
	--maef-grid-columns: 3;
}

/* ==========================================================
   Cartes — grille "Nos projets" et grille logos partenaires
   ========================================================== */
.maef-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 12rem;
	padding: var(--space-md);
	background-color: var(--color-surface);
	border-radius: var(--border-radius-md);
	transition: transform var(--transition-default), box-shadow var(--transition-default);
}

.maef-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}

.maef-card__title {
	font-family: var(--font-heading);
	font-size: var(--font-size-h5);
	font-weight: var(--font-weight-bold);
	color: var(--color-primary);
	margin: 0;
}

.maef-card__arrow {
	align-self: flex-end;
	color: var(--color-secondary);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform var(--transition-default);
}

/* Le glyphe flèche est généré en CSS : il suffit de placer un élément vide
   (ex. <span class="maef-card__arrow"></span>) dans le module Divi. */
.maef-card__arrow::after {
	content: '\2192';
}

.maef-card:hover .maef-card__arrow {
	transform: translateX(4px);
}

/* Variante "logo" — grille de partenaires (page Projet HUB) */
.maef-card--logo {
	align-items: center;
	justify-content: center;
	min-height: 10rem;
}

.maef-card--logo img {
	max-height: 4rem;
	width: auto;
	margin: 0 auto;
}

/* ==========================================================
   Bloc CTA / mise en avant (fond navy, coins arrondis)
   ========================================================== */
.maef-cta {
	background-color: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--border-radius-lg);
	padding: var(--space-lg) var(--container-padding);
}

.maef-cta h1,
.maef-cta h2,
.maef-cta h3,
.maef-cta h4,
.maef-cta h5,
.maef-cta p {
	color: var(--color-white);
}

/* ==========================================================
   Pied de page — identique sur les 9 gabarits maquettés :
   fond navy PLAT (aucun coin arrondi sur le footer lui-même — le rayon
   visible juste au-dessus vient du bloc clair qui le précède, voir
   .maef-section--curved-top/--curved-bottom), ligne adresse+CTA, puis
   ligne copyright+lien, sans filet de séparation entre les deux.
   ========================================================== */
.maef-footer {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-lg) var(--container-padding);
}

.maef-footer h1,
.maef-footer h2,
.maef-footer h3,
.maef-footer h4,
.maef-footer h5,
.maef-footer p {
	color: var(--color-white);
}

/* Ligne du haut : coordonnées (à gauche) + bouton CTA (à droite) */
.maef-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}

/* Ligne du bas : copyright + lien politique de confidentialité.
   Pas de filet de séparation avec la ligne du haut — absent de la
   maquette, seul l'espacement vertical (margin-bottom du bloc du haut)
   les distingue. */
.maef-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--font-size-xs);
}

.maef-footer__bottom a {
	color: var(--color-white);
	opacity: 0.8;
}

.maef-footer__bottom a:hover {
	color: var(--color-white);
	opacity: 1;
}

/* ==========================================================
   Liste à flèche — articles de presse, archives de rapports
   ========================================================== */
.maef-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.maef-icon-list__item a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--color-text);
	font-weight: var(--font-weight-regular);
}

.maef-icon-list__arrow {
	color: var(--color-secondary);
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
	transition: transform var(--transition-default);
}

.maef-icon-list__arrow::after {
	content: '\2192';
}

.maef-icon-list__item a:hover .maef-icon-list__arrow {
	transform: translateX(4px);
}

/* ==========================================================
   Icônes sociales
   ========================================================== */
.maef-social-icons {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.maef-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--color-text);
}

.maef-social-icons a:hover {
	color: var(--color-secondary);
}

.maef-social-icons svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ==========================================================
   Formulaire (page Contact)
   ========================================================== */
.maef-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.maef-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.maef-form__field {
	width: 100%;
	background-color: var(--color-surface-alt);
	border: 1px solid transparent;
	border-radius: var(--border-radius-sm);
	padding: 1rem 1.25rem;
	font-size: var(--font-size-base);
	color: var(--color-text);
	transition: border-color var(--transition-default), background-color var(--transition-default);
}

.maef-form__field::placeholder {
	color: var(--color-text-muted);
}

.maef-form__field:focus-visible {
	/* Remplace l'outline par défaut par un contour + halo mieux intégrés au
	   design (même intention d'accessibilité : bien visible au clavier). */
	outline: none;
	border-color: var(--color-primary);
	background-color: var(--color-white);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

textarea.maef-form__field {
	min-height: 8rem;
	resize: vertical;
}

.maef-form__actions {
	display: flex;
	justify-content: flex-end;
}

/* ==========================================================
   Images et séparateurs
   ========================================================== */
.maef-image-rounded {
	border-radius: var(--border-radius-md);
	overflow: hidden;
}

.maef-image-rounded--lg {
	border-radius: var(--border-radius-lg);
}

.maef-divider {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: var(--space-lg) 0;
}