/* ===== Header mobile (burger) ===== */

.header-mobile .header-mobile-titre {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--current-color);
	min-width: 0; /* autorise le text-truncate dans un flex */
}

/* Liens principaux colorés dans l'offcanvas */
.menu-mobile-lien {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 20px;
	border-radius: var(--border-radius);
	padding: .5rem .75rem;
}
/* !important pour battre la regle globale d'index.php : a,a:hover,a:focus{color:var(--color-X)!important} */
.menu-mobile-lien.couleur-marron { color: var(--color-marron) !important; }
.menu-mobile-lien.couleur-rouge  { color: var(--color-rouge) !important; }
.menu-mobile-lien.couleur-violet { color: var(--color-violet) !important; }
.menu-mobile-lien.couleur-vert   { color: var(--color-vert) !important; }

.menu-mobile-lien.couleur-marron.active { background-color: var(--color-marron); }
.menu-mobile-lien.couleur-rouge.active  { background-color: var(--color-rouge); }
.menu-mobile-lien.couleur-violet.active { background-color: var(--color-violet); }
.menu-mobile-lien.couleur-vert.active   { background-color: var(--color-vert); }
.menu-mobile-lien.active { color: #fff !important; }

/* Liens secondaires (menu haut) */
.menu-mobile-lien-secondaire {
	font-size: 15px;
	color: var(--color-main-text) !important;
}

/* ===== Footer mobile ===== */
/* Le bandeau desktop attend du texte blanc ; sur mobile fond clair -> liens lisibles. */
.footer-mobile .menu-bas-mobile {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: .25rem .75rem;
}
.footer-mobile .menu-bas-mobile li {
	position: relative;
	margin: 0;
}
/* Point separateur entre les items (sauf le dernier) */
.footer-mobile .menu-bas-mobile li:not(:last-child)::after {
	content: "\f111";
	font-family: var(--font-family-fontawesome);
	font-weight: 900;
	font-size: 5px;
	color: var(--color-gris);
	vertical-align: middle;
	margin-left: .75rem;
}
.footer-mobile .menu-bas-mobile a {
	color: var(--color-gris) !important; /* bat la regle globale a{color:var(--color-X)!important} */
	font-size: 13px;
	text-decoration: none;
}
.footer-mobile .menu-bas-mobile a:hover {
	text-decoration: underline;
}

/* ===== Accueil mobile ===== */
/* Cartes colorees empilees verticalement (remplacent l'image de fond + bulles du desktop) */
.accueil-mobile .accueil-carte {
	display: block;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow-elevation-m);
	transition: var(--transition-transform);
}
.accueil-mobile .accueil-carte:hover,
.accueil-mobile .accueil-carte:focus-within {
	transform: translateY(-2px);
}

/* Fond de la couleur de la page */
.accueil-mobile .accueil-carte.marron { background-color: var(--color-marron); }
.accueil-mobile .accueil-carte.rouge  { background-color: var(--color-rouge); }
.accueil-mobile .accueil-carte.violet { background-color: var(--color-violet); }
.accueil-mobile .accueil-carte.vert   { background-color: var(--color-vert); }

/*
 * Titre + description : on reutilise les classes .titre / .text (texte blanc),
 * mais on surcharge la taille (le 48px du desktop est trop grand sur mobile).
 * Selecteurs surspecifies (.module.accueil ...) pour passer devant le <style>
 * inline du module quel que soit l'ordre de chargement des CSS.
 */
.module.accueil .accueil-carte a.titre {
	display: block;
	font-size: 30px;
	line-height: 1.15;
}
.module.accueil .accueil-carte a.text {
	display: block;
	font-size: 14px;
}

/* Menu bas centre sous les cartes */
.accueil-mobile .menu-bas a {
	color: var(--color-gris);
	text-decoration: none;
}
.accueil-mobile .menu-bas a:hover {
	text-decoration: underline;
}