/* MADA-ANNUAIRE - composants.
   Tout est reproductible dans Elementor gratuit : aucune propriété exotique,
   aucune dépendance à un widget Pro. */

/* ------------------------------------------------------------------ Boutons */

.mada-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--rayon-pilule);
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	/* « Inscrire mon entreprise » se coupait en deux lignes dans la pilule des
	   que la colonne devenait juste. Un libelle de bouton ne se coupe pas : il
	   vaut mieux que le bouton pousse sa colonne. Le repli reste autorise en
	   dessous de 600 px, ou les boutons passent pleine largeur. */
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}

.mada-btn-principal { background: var(--btn); color: var(--btn-ink); }
.mada-btn-principal:hover { background: var(--btn-hover); color: var(--btn-ink); transform: translateY(-1px); }

.mada-btn-secondaire { background: var(--btn-2); color: var(--btn-2-ink); border-color: var(--line-fort); }
.mada-btn-secondaire:hover { border-color: var(--accent); color: var(--accent-700); }

.mada-btn-whatsapp { background: var(--turq); color: #fff; }
.mada-btn-whatsapp:hover { background: var(--turq-600); color: #fff; }

/* ------------------------------------------------------------------- Badges */

.mada-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--e-1);
	padding: 4px 10px;
	border: 1px solid transparent;
	border-radius: var(--rayon-pilule);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	white-space: nowrap;
	/* Repli : un badge sans variante resterait transparent, donc invisible. */
	background: var(--surface-2);
	color: var(--ink-2);
}

.mada-badge-verifie { background: var(--badge-bg); color: var(--badge-ink); border-color: var(--badge-line); }
.mada-badge-attente { background: var(--avert-bg); color: var(--avert); }
.mada-badge-offre { background: var(--accent-050); color: var(--accent-700); border-color: var(--accent-100); }

.mada-puce {
	display: inline-block;
	padding: 3px 10px;
	margin: 0 var(--e-1) var(--e-1) 0;
	background: var(--surface-3);
	border-radius: var(--rayon-pilule);
	font-size: var(--t-xs);
	color: var(--ink-2);
}

.mada-puce-lien { text-decoration: none; }
.mada-puce-lien:hover { background: var(--accent-100); color: var(--accent-700); }

/* ------------------------------------------------------------------ En-tête */

.mada-entete { background: var(--surface); border-bottom: 1px solid var(--line); }

.mada-entete-collante .mada-entete {
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: var(--ombre-sm);
}




.mada-entete-int {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-5);
	min-height: var(--entete-hauteur);
}

.mada-logo { display: grid; text-decoration: none; line-height: 1.15; }
.mada-logo-ligne { display: block; }

.mada-logo-marque {
	font-family: var(--police-titre);
	font-size: var(--t-md);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--deep);
}

/* Le suffixe .MG porte l'accent : c'est le seul endroit de l'en-tête où la
   couleur de marque apparaît, et ça suffit à la faire exister. */
.mada-logo-suffixe {
	font-family: var(--police-titre);
	font-size: var(--t-md);
	font-weight: 700;
	color: var(--accent);
}

.mada-logo-baseline { display: block; font-size: var(--t-xs); color: var(--muted); }
.mada-entete-nav { display: flex; align-items: center; gap: var(--e-6); margin-left: auto; }

.mada-menu {
	display: flex;
	align-items: center;
	gap: var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mada-menu a {
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}

.mada-menu a:hover,
.mada-menu .current-menu-item > a { color: var(--accent-700); }

.mada-menu-vertical { display: grid; gap: var(--e-2); }
.mada-menu-vertical a { display: flex; justify-content: space-between; gap: var(--e-3); }
.mada-nav-vertical .mada-menu { flex-direction: column; align-items: stretch; }

.mada-entete-actions { display: flex; align-items: center; gap: var(--e-4); }

.mada-lien-compte {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}

.mada-burger {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--line-fort);
	border-radius: var(--rayon-sm);
	background: var(--surface);
	cursor: pointer;
}

.mada-burger-trait,
.mada-burger-trait::before,
.mada-burger-trait::after {
	display: block;
	width: 18px;
	height: 2px;
	margin-inline: auto;
	background: var(--deep);
	border-radius: 2px;
	content: "";
}

.mada-burger-trait::before { transform: translateY(-6px); }
.mada-burger-trait::after { transform: translateY(4px); }

/* --------------------------------------------------------------- Recherche */

.mada-recherche { display: grid; gap: var(--e-3); width: 100%; }
.mada-recherche-rangee { display: flex; gap: var(--e-2); min-width: 0; }
.mada-recherche.mada-dispo-empilee .mada-recherche-rangee { flex-direction: column; }

.mada-recherche.sur-panneau {
	padding: var(--e-4);
	background: var(--surface);
	border-radius: var(--rayon-lg);
	box-shadow: var(--ombre-md);
}

.mada-recherche-champ,
.mada-recherche-liste {
	min-width: 0;
	padding: 12px 16px;
	border: 1px solid var(--line-fort);
	border-radius: var(--rayon-pilule);
	background: var(--surface);
	font-family: var(--police-texte);
	font-size: var(--t-sm);
	color: var(--ink);
}

.mada-recherche-champ { flex: 1; }
.mada-recherche-liste { flex: 0 1 auto; }
.mada-recherche-champ::placeholder { color: var(--faint); }

.mada-suggestions { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--muted); }
.mada-suggestions-titre { margin-right: var(--e-2); }

/* ------------------------------------------------------------------ Filtres */

.mada-filtres {
	padding: var(--e-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-filtres-bascule { display: none; }
.mada-filtre-bloc { margin-bottom: var(--e-4); }

.mada-filtre-titre {
	display: block;
	margin: 0 0 var(--e-2);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.mada-filtre-bloc .mada-recherche-liste { width: 100%; }

.mada-case {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin-bottom: var(--e-2);
	font-size: var(--t-sm);
	cursor: pointer;
}

.mada-filtre-actions { display: flex; align-items: center; gap: var(--e-4); }
.mada-lien-effacer { font-size: var(--t-xs); color: var(--muted); }

/* ----------------------------------------------------------- Carte de fiche */

.mada-carte-fiche {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	padding: var(--e-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.mada-leve .mada-carte-fiche:hover,
a.mada-carte-fiche:hover {
	border-color: var(--accent-300);
	box-shadow: var(--ombre-md);
	transform: translateY(-2px);
}

.mada-carte-lien { display: flex; gap: var(--e-4); text-decoration: none; color: inherit; }
.mada-dispo-grille .mada-carte-lien { flex-direction: column; }
.mada-carte-corps { min-width: 0; flex: 1; }

.mada-carte-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.mada-carte-titre { margin: 0; font-size: var(--t-md); }
.mada-carte-badges { display: inline-flex; flex-wrap: wrap; gap: var(--e-1); }
.mada-carte-accroche { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--muted); }
.mada-carte-secteurs { margin: var(--e-2) 0 0; }
.mada-carte-note { margin: var(--e-2) 0 0; }
.mada-carte-services { margin: var(--e-2) 0 0; padding-left: var(--e-4); font-size: var(--t-sm); color: var(--muted); }

.mada-carte-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: auto; }
.mada-carte-actions .mada-btn { flex: 1; min-width: 120px; padding: 10px 14px; }

.mada-fiche-logo {
	flex: 0 0 auto;
	width: 72px;
	overflow: hidden;
	background: var(--surface-3);
	border-radius: var(--rayon);
}

.mada-dispo-grille .mada-fiche-logo { width: 88px; }

.mada-initiales {
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	font-family: var(--police-titre);
	font-size: var(--t-xl);
	font-weight: 700;
	color: var(--accent);
	background: var(--accent-100);
}

.mada-lieu {
	display: flex;
	align-items: center;
	gap: var(--e-1);
	margin: var(--e-2) 0 0;
	font-size: var(--t-xs);
	color: var(--muted);
}

/* --------------------------------------------------------------- Étoiles */

.mada-etoiles { display: inline-flex; gap: 2px; vertical-align: middle; }

.mada-etoile {
	width: 14px;
	height: 14px;
	background: var(--line-fort);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.2 3.3L7 14.3 2 9.4l7-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .9-5 4.9 1.2 7L12 18l-6.2 3.3L7 14.3 2 9.4l7-.9z'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.mada-etoile.est-pleine { background: var(--turq-600); }

.mada-note-chiffre { margin-left: var(--e-2); font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.mada-note-total { color: var(--muted); font-weight: 400; }

/* ------------------------------------------------------------ Bande défilante */

.mada-bande {
	position: relative;
	padding: var(--e-5) 0;
	background: var(--surface-2);
	border-block: 1px solid var(--line);
	overflow: hidden;
}

/* Pleine largeur depuis n'importe quel conteneur, sans toucher au parent. */
.mada-bande.est-pleine-largeur {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}

.mada-bande-mention {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	margin: 0 0 var(--e-4);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.mada-bande-fenetre { overflow: hidden; }

.mada-bande-piste {
	display: flex;
	gap: var(--e-4);
	width: max-content;
	animation: mada-defile 70s linear infinite;
}

.mada-bande:hover .mada-bande-piste,
.mada-bande-piste:focus-within { animation-play-state: paused; }

@keyframes mada-defile {
	from { transform: translateX(0); }
	/* -50% : la piste est écrite deux fois, la boucle est donc invisible. */
	to { transform: translateX(-50%); }
}

.mada-bande-fiche {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	align-items: flex-start;
	width: 288px;
	padding: var(--e-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
	text-decoration: none;
	color: inherit;
}

.mada-bande-fiche:hover { border-color: var(--accent-300); }
.mada-bande-fiche .mada-fiche-logo { width: 44px; }
.mada-bande-texte { min-width: 0; display: grid; }
/* Le nom tenait sur une ligne, coupe aux points de suspension (« Epices
   Analanjirofo SA... »). La tuile a la place pour deux lignes : on les lui
   donne, et la coupe ne tombe qu'au-dela. */
.mada-bande-nom {
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--deep);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mada-bande-lieu { font-size: var(--t-xs); color: var(--muted); }

.mada-bande.a-des-voiles::before,
.mada-bande.a-des-voiles::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}

.mada-bande.a-des-voiles::before { left: 0; background: linear-gradient(to right, var(--surface-2), transparent); }
.mada-bande.a-des-voiles::after { right: 0; background: linear-gradient(to left, var(--surface-2), transparent); }

/* ----------------------------------------------------- Carte des régions */

.mada-regions-bloc { display: grid; gap: var(--e-6); align-items: start; }
/* La silhouette du pays est deux fois plus haute que large : a 50 % elle laisse
   un grand vide a cote d'elle. Un tiers lui suffit, et la liste recupere la
   place pour deux colonnes lisibles. */
.mada-regions-droite .mada-regions { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
.mada-regions-gauche .mada-regions { grid-template-columns: minmax(0, 1fr) minmax(0, 34%); direction: rtl; }
.mada-regions-gauche .mada-regions > * { direction: ltr; }
.mada-regions-dessous .mada-regions { grid-template-columns: 1fr; }

.mada-regions { display: grid; gap: var(--e-7); align-items: center; }
/* Le pays est deux fois plus haut que large : pilote en largeur, il deborderait
   l'ecran en hauteur. On fixe la hauteur et on centre. */
.mada-regions-carte { display: flex; justify-content: center; }
.mada-regions-carte svg { display: block; height: min(68vh, 520px); width: auto; max-width: 100%; }

.mada-regions-carte path {
	/* Valeur de depart : le PHP la remplace region par region selon la densite. */
	--teinte: var(--carte-vide);
	fill: var(--carte-vide);
	stroke: var(--surface);
	stroke-width: 0.75;
	transition: fill var(--transition);
	cursor: pointer;
}

/* L'intensité est posée par le script à partir du nombre de fiches. */
.mada-regions-carte path[data-intensite] { fill: var(--teinte, var(--carte-vide)); }
.mada-regions-carte path.est-survolee { fill: var(--carte-survol, var(--accent)); }

/* Chaque region est desormais un vrai lien. Le navigateur soulignerait le trace
   et poserait son propre cadre au focus : on reprend les deux a la main pour
   garder un reperage visible sans abimer le dessin. */
.mada-region-forme { cursor: pointer; text-decoration: none; }
.mada-region-forme:focus { outline: none; }
.mada-region-forme:hover path { fill: var(--carte-survol, var(--accent)); }
.mada-region-forme:focus-visible path { fill: var(--carte-survol, var(--accent)); stroke: var(--ring); stroke-width: 2; }

.mada-regions-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--e-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Une ligne se lit comme une petite carte : forme de la region, nom, chef-lieu,
   nombre de fiches. Une simple liste de 22 noms ne disait rien du territoire. */
.mada-region-ligne a {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: var(--rayon);
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
	transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.mada-region-ligne.est-survolee a,
.mada-region-ligne a:hover {
	border-color: var(--accent);
	background: var(--accent-050);
	box-shadow: var(--ombre-sm);
	transform: translateY(-1px);
}

.mada-region-texte { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; gap: 1px; }

/* Les noms longs (« Vatovavy Fitovinany ») se coupaient en deux dans une colonne
   etroite. Ils tiennent la ligne et passent a la ligne proprement si besoin. */
.mada-region-nom { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-sm); line-height: 1.25; color: var(--ink); text-wrap: balance; }
.mada-region-chef { font-size: var(--t-xs); line-height: 1.3; color: var(--muted); }
.mada-region-ligne.est-survolee .mada-region-chef,
.mada-region-ligne a:hover .mada-region-chef { color: var(--accent-700); }

/* Le nombre de fiches en pastille : aligne a droite, il donne la colonne de
   lecture qui manquait quand c'etait un simple chiffre gris. */
.mada-region-nombre {
	flex: 0 0 auto;
	min-width: 30px;
	padding: 2px 8px;
	border-radius: var(--rayon-pilule);
	background: var(--surface-2);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink-2);
	text-align: center;
	transition: background var(--transition), color var(--transition);
}

.mada-region-ligne.est-survolee .mada-region-nombre,
.mada-region-ligne a:hover .mada-region-nombre { background: var(--accent); color: var(--btn-ink); }
.sans-nombres .mada-region-nombre { display: none; }

/* ------------------------------------------------------------------ Secteurs */

.mada-secteur { align-items: flex-start; text-decoration: none; color: inherit; }
.mada-secteur-icone { width: 26px; height: 26px; color: var(--accent); }
.mada-secteur-nom { font-family: var(--police-titre); font-size: var(--t-md); font-weight: 600; color: var(--deep); }
.mada-secteur-nombre { font-size: var(--t-xs); color: var(--muted); }
.mada-secteur-desc { font-size: var(--t-sm); color: var(--muted); }

/* ------------------------------------------------------------ Chiffres clés */

.mada-chiffre-bloc { align-items: center; text-align: center; }
.mada-chiffre-valeur { margin: 0; font-family: var(--police-titre); font-size: var(--t-3xl); font-weight: 700; line-height: 1; color: var(--accent); }
.mada-chiffre-suffixe { font-size: 0.6em; vertical-align: super; }
.mada-chiffre-libelle { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--muted); }

/* -------------------------------------------------------------- Fiche entreprise */

.mada-fiche-agencement { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--e-6); align-items: start; }
.mada-fiche-identite { display: flex; gap: var(--e-5); align-items: flex-start; }
.mada-agencement-dessus { flex-direction: column; }
.mada-agencement-centre { flex-direction: column; align-items: center; text-align: center; }
.mada-fiche-identite .mada-fiche-logo { width: 120px; }
.mada-fiche-identite-texte { min-width: 0; }
.mada-fiche-badges { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-bottom: var(--e-2); }
.mada-fiche-nom { margin: 0 0 var(--e-2); font-size: var(--t-2xl); }
.mada-fiche-accroche { font-size: var(--t-md); color: var(--muted); }
.mada-fiche-meta { margin-top: var(--e-3); font-size: var(--t-xs); color: var(--faint); }

.mada-services { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.mada-services-puces li a { display: inline-block; padding: 6px 12px; background: var(--surface-3); border-radius: var(--rayon-pilule); font-size: var(--t-sm); text-decoration: none; color: var(--ink-2); }
.mada-services-puces li a:hover { background: var(--accent-100); color: var(--accent-700); }

.mada-services-coches,
.mada-services-colonnes { display: grid; gap: var(--e-2); }
.mada-services-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.mada-services-coches li,
.mada-services-colonnes li { position: relative; padding-left: var(--e-5); font-size: var(--t-sm); }

.mada-services-coches li::before,
.mada-services-colonnes li::before {
	position: absolute;
	left: 0;
	content: "✓";
	color: var(--turq-600);
	font-weight: 700;
}

.mada-certifs,
.mada-references,
.mada-a-faire { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); }
.mada-certifs li { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.mada-certifs .mada-ico { color: var(--turq-600); }

.mada-reference { padding: var(--e-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rayon); }
.mada-reference-intitule { display: block; font-family: var(--police-titre); font-weight: 600; color: var(--deep); }
.mada-reference-details { display: block; font-size: var(--t-xs); color: var(--muted); }

.mada-a-faire li { position: relative; padding-left: var(--e-5); font-size: var(--t-sm); color: var(--avert); }
.mada-a-faire li::before { position: absolute; left: 0; content: "!"; font-weight: 700; }

/* --------------------------------------------------------------- Coordonnées */

.mada-coordonnees-titre { font-size: var(--t-md); }
.mada-coordonnees-actions { display: grid; gap: var(--e-2); margin-bottom: var(--e-4); }
.mada-coordonnees-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-3); }
.mada-coord { display: flex; align-items: flex-start; gap: var(--e-3); font-size: var(--t-sm); }
.mada-coord .mada-ico { margin-top: 3px; color: var(--accent); }
.mada-horaires { white-space: pre-line; }
.mada-adresse { margin-bottom: var(--e-3); font-size: var(--t-sm); color: var(--muted); }

/* ------------------------------------------------------------------- Cartes */

.mada-carte { border-radius: var(--rayon-lg); overflow: hidden; background: var(--surface-3); }
.mada-carte iframe { width: 100%; height: 100%; border: 0; }
.mada-carte-resultats { margin-bottom: var(--e-5); }

/* Les étiquettes Leaflet doivent suivre la typographie du site. */
.leaflet-container { font-family: var(--police-texte); }
.mada-carte-bulle-nom { font-family: var(--police-titre); font-weight: 600; color: var(--deep); }

/* -------------------------------------------------------------------- Vidéo */

.mada-videos { display: grid; gap: var(--e-4); }

.mada-video {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	border-radius: var(--rayon-lg);
	background-color: var(--deep);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.mada-video-lecture {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border: 0;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--ombre-md);
	cursor: pointer;
	transition: transform var(--transition);
}

.mada-video-lecture:hover { transform: scale(1.06); }

.mada-video-triangle {
	width: 0;
	height: 0;
	margin-left: 4px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid var(--accent);
}

.mada-video-titre,
.mada-video-note {
	position: absolute;
	left: var(--e-4);
	margin: 0;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.mada-video-titre { top: var(--e-3); font-family: var(--police-titre); font-weight: 600; }
.mada-video-note { bottom: var(--e-3); font-size: var(--t-xs); }
.mada-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* -------------------------------------------------------- Économie de données */

.mada-economie-bascule {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: 4px 10px;
	border: 1px solid var(--on-deep-line);
	border-radius: var(--rayon-pilule);
	background: transparent;
	color: var(--on-deep-2);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	cursor: pointer;
}

.mada-economie-bascule[aria-pressed="true"] { background: var(--turq); border-color: var(--turq); color: #fff; }

.mada-economie .mada-video,
.mada-economie .elementor-background-overlay,
.mada-economie [data-mada-decor] { background-image: none !important; }

.mada-economie .mada-video { background: var(--surface-3); }
.mada-economie .mada-galerie img:not(:first-child) { display: none; }
.mada-economie .mada-carte { display: none; }

/* ------------------------------------------------------------------- Galerie */

.mada-galerie-vue { display: block; overflow: hidden; border-radius: var(--rayon); }
.mada-ratio-1 img { aspect-ratio: 1 / 1; object-fit: cover; }
.mada-ratio-4-3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.mada-ratio-16-9 img { aspect-ratio: 16 / 9; object-fit: cover; }
/* « Proportions d'origine » : l'option existait dans le widget sans aucune
   regle, l'image gardait donc le dernier format applique. */
.mada-ratio-auto img { aspect-ratio: auto; object-fit: contain; }

/* --------------------------------------------------------------------- Avis */

.mada-avis { padding: var(--e-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-lg); }
.mada-avis-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin-bottom: var(--e-2); }
.mada-avis-auteur { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-sm); color: var(--deep); }
.mada-avis-date { font-size: var(--t-xs); color: var(--faint); margin-left: auto; }

.mada-avis-mission {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin: 0 0 var(--e-2);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--turq-600);
}

.mada-avis-texte { font-size: var(--t-sm); }
.mada-avis-texte p:last-child { margin-bottom: 0; }
.mada-avis-resume { margin-bottom: var(--e-4); }
.mada-avis-aucun { color: var(--muted); font-size: var(--t-sm); }
.mada-avis-depot { margin-top: var(--e-5); }
/* Ne JAMAIS poser de display sur un <summary> : Safari et plusieurs versions
   de Chrome cessent alors d'ouvrir le <details> au clic. Le bouton est donc
   un <span> a l'interieur, et le summary garde son display natif. */
.mada-avis-ouvrir { list-style: none; cursor: pointer; }
.mada-avis-ouvrir::-webkit-details-marker { display: none; }
.mada-avis-ouvrir::marker { content: ""; }
.mada-avis-depot[open] .mada-avis-ouvrir { margin-bottom: var(--e-4); }

.mada-notes { display: flex; flex-wrap: wrap; gap: var(--e-2); border: 0; padding: 0; margin: 0 0 var(--e-4); }
.mada-notes legend { font-family: var(--police-titre); font-size: var(--t-sm); font-weight: 600; margin-bottom: var(--e-2); }
.mada-note-choix { display: inline-flex; align-items: center; gap: var(--e-1); padding: 6px 12px; border: 1px solid var(--line-fort); border-radius: var(--rayon-pilule); font-size: var(--t-sm); cursor: pointer; }
.mada-note-choix:has(input:checked) { background: var(--accent-100); border-color: var(--accent); color: var(--accent-700); }

/* --------------------------------------------------------------- Formulaires */

.mada-formulaire { display: grid; gap: var(--e-4); }
.mada-formulaire-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.mada-champ { display: grid; gap: var(--e-1); margin: 0; }

.mada-champ label,
.mada-champ-libelle {
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--ink-2);
}

.mada-champ input[type="text"],
.mada-champ input[type="email"],
.mada-champ input[type="tel"],
.mada-champ input[type="url"],
.mada-champ input[type="number"],
.mada-champ input[type="date"],
.mada-champ input[type="search"],
.mada-champ textarea,
.mada-champ select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--line-fort);
	border-radius: var(--rayon);
	background: var(--surface);
	font-family: var(--police-texte);
	font-size: var(--t-sm);
	color: var(--ink);
}

.mada-champ textarea { resize: vertical; }
.mada-aide, .mada-champ-aide { font-size: var(--t-xs); color: var(--muted); }

.mada-avertissement {
	display: flex;
	align-items: flex-start;
	gap: var(--e-2);
	padding: var(--e-2) var(--e-3);
	background: var(--avert-bg);
	border-radius: var(--rayon-sm);
	font-size: var(--t-xs);
	color: var(--avert);
}

.mada-champ.est-bloque { opacity: 0.7; }
.mada-champ-bloque { margin: 0; padding: var(--e-2) var(--e-3); background: var(--surface-3); border-radius: var(--rayon-sm); font-size: var(--t-xs); color: var(--muted); }

/* Le piège à robots ne doit jamais apparaître, ni au clavier. */
.mada-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mada-groupe { border: 0; padding: 0; margin: 0 0 var(--e-6); }
.mada-groupe-aide { font-size: var(--t-xs); color: var(--muted); }
.mada-formulaire-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

.mada-gps { display: flex; gap: var(--e-2); }
.mada-gps input { flex: 1; }

.mada-repeteur { display: grid; gap: var(--e-2); }
.mada-repeteur-lignes { display: grid; gap: var(--e-2); }
.mada-repeteur-ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: end; padding: var(--e-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rayon); }
.mada-repeteur-champ { display: grid; gap: 2px; flex: 1; min-width: 120px; font-size: var(--t-xs); }
.mada-repeteur-retirer { border: 0; background: transparent; color: var(--avert); font-size: var(--t-lg); cursor: pointer; line-height: 1; }

.mada-message { padding: var(--e-3) var(--e-4); border-radius: var(--rayon); font-size: var(--t-sm); }
.mada-message.est-succes { background: var(--ok-bg); color: var(--ok); }
.mada-message.est-attente { background: var(--avert-bg); color: var(--avert); }
.mada-message.est-attente a { color: inherit; text-decoration: underline; }
.mada-message.est-erreur { background: var(--avert-bg); color: var(--avert); }

/* --------------------------------------------------------- Espace entreprise */

.mada-compte { padding-block: var(--e-6); }
.mada-compte-entete { display: flex; flex-wrap: wrap; gap: var(--e-4); justify-content: space-between; align-items: flex-start; margin-bottom: var(--e-6); }
.mada-compte-etat { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; }
.mada-compte-entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.mada-lien-deconnexion { font-size: var(--t-xs); color: var(--muted); }

.mada-compte-agencement { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.mada-compte-onglets ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.mada-compte-onglets a {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	padding: 10px 12px;
	border-radius: var(--rayon);
	font-family: var(--police-titre);
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--ink-2);
	text-decoration: none;
}

.mada-compte-onglets a:hover { background: var(--surface-2); }
.mada-compte-onglets a.est-actif { background: var(--accent-100); color: var(--accent-700); font-weight: 600; }
.mada-compte-onglets .mada-ico { color: currentColor; }

.mada-compteur {
	margin-left: auto;
	padding: 1px 7px;
	background: var(--turq);
	border-radius: var(--rayon-pilule);
	font-size: var(--t-xs);
	color: #fff;
}

.mada-compte-panneau { padding: var(--e-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-lg); }
.mada-compte-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-4); margin-bottom: var(--e-6); }
.mada-compte-chiffre { padding: var(--e-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-lg); text-align: center; }

.mada-jauge { height: 8px; background: var(--surface-3); border-radius: var(--rayon-pilule); overflow: hidden; }
.mada-jauge span { display: block; height: 100%; background: var(--turq); border-radius: var(--rayon-pilule); }
.mada-jauge-grande { height: 14px; }
.mada-jauge-legende { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--muted); }

.mada-note-promesse {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-4);
	background: var(--surface-2);
	border-left: 3px solid var(--turq);
	border-radius: var(--rayon-sm);
	font-size: var(--t-xs);
	color: var(--ink-2);
}

.mada-note-promesse .mada-ico { color: var(--turq-600); }

.mada-demande-entete { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: baseline; justify-content: space-between; }
.mada-demande-nom { margin: 0; font-size: var(--t-md); }
.mada-demande-date { font-size: var(--t-xs); color: var(--faint); }
.mada-demande-meta { font-size: var(--t-xs); color: var(--muted); }
.mada-demande-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Les trois offres n'ont pas le meme nombre de lignes : sans cette regle, le
   bouton de chacune tombait a une hauteur differente et la rangee paraissait
   bancale. */
.mada-offre { align-items: stretch; }
.mada-offre.est-mise-en-avant { border-color: var(--accent); box-shadow: var(--ombre-md); }
.mada-offre.est-actuelle { border-color: var(--turq); }
.mada-offre-nom { margin: 0; font-size: var(--t-lg); }
.mada-offre-nom-grand { margin: 0; font-family: var(--police-titre); font-size: var(--t-2xl); font-weight: 700; color: var(--accent); }
.mada-offre-resume { font-size: var(--t-sm); color: var(--muted); }
.mada-offre-liste, .mada-offre-usage { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.mada-offre-liste li { display: flex; align-items: flex-start; gap: var(--e-2); }
.mada-offre-liste .mada-ico { margin-top: 3px; color: var(--turq-600); }
.mada-offre-courante { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--turq-600); }
.mada-offre-fin { font-size: var(--t-xs); color: var(--muted); }

.mada-compte-connexion { padding-block: var(--e-8); }
.mada-compte-liens { display: flex; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-4); font-size: var(--t-xs); }

/* --------------------------------------------------------------- Pied de page */

.mada-pied { margin-top: var(--e-9); background: var(--deep); color: var(--on-deep-2); font-size: var(--t-sm); }
.mada-pied h2, .mada-pied h3 { color: var(--on-deep); }
.mada-pied a { color: var(--on-deep-2); text-decoration: none; }
.mada-pied a:hover { color: var(--on-deep); text-decoration: underline; }
.mada-pied .mada-logo-marque { color: var(--on-deep); }
.mada-pied .mada-logo-baseline { color: var(--on-deep-2); }
.mada-pied-int { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: var(--e-7); padding-block: var(--e-8); }

.mada-pied-promesse {
	display: flex;
	align-items: center;
	gap: var(--e-2);
	margin: var(--e-4) 0 0;
	padding: var(--e-3) var(--e-4);
	border: 1px solid var(--on-deep-line);
	border-radius: var(--rayon);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--on-deep);
}

.mada-pied-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--e-6); }
.mada-pied-titre { margin-bottom: var(--e-3); font-size: var(--t-sm); text-transform: uppercase; letter-spacing: 0.08em; }
.mada-pied-nombre { color: var(--faint); font-size: var(--t-xs); }
.mada-pied-bas { border-top: 1px solid var(--on-deep-line); }
.mada-pied-bas-int { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-4); font-size: var(--t-xs); }
.mada-copyright { margin: 0; }

/* ------------------------------------------------------------------- Divers */

.mada-fil ol { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: var(--e-4) 0; list-style: none; font-size: var(--t-xs); color: var(--muted); }
.mada-fil li + li::before { content: "/"; margin-right: var(--e-2); color: var(--faint); }
.mada-fil a { color: var(--muted); }

.mada-vide { padding: var(--e-7) var(--e-5); text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-lg); }
.mada-vide-titre { font-family: var(--police-titre); font-size: var(--t-md); font-weight: 600; color: var(--deep); }
.mada-vide-aide { font-size: var(--t-sm); color: var(--muted); }

.mada-pagination { display: flex; justify-content: center; gap: var(--e-2); margin-top: var(--e-6); }
.mada-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line-fort); border-radius: var(--rayon-sm); font-size: var(--t-sm); text-decoration: none; color: var(--ink-2); }
.mada-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: var(--btn-ink); }

.mada-promesse { display: flex; align-items: center; gap: var(--e-2); font-family: var(--police-titre); font-weight: 600; color: var(--deep); }
.mada-contenu-simple { padding-block: var(--e-6); }
.mada-404 { padding-block: var(--e-8); text-align: center; }
.mada-404 .mada-recherche { max-width: 560px; margin-inline: auto; }

.mada-note-editeur {
	padding: var(--e-3) var(--e-4);
	background: var(--avert-bg);
	border-left: 3px solid var(--avert);
	border-radius: var(--rayon-sm);
	font-size: var(--t-sm);
	color: var(--avert);
}

.mada-note-editeur strong { margin-right: var(--e-2); }

/* ------------------------------------------------------------------- Icônes */

.mada-ico {
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
}

/* --------------------------------------------------------------- Responsive */

@media (max-width: 1099px) {
	.mada-fiche-agencement { grid-template-columns: 1fr; }
	.mada-regions-droite .mada-regions,
	.mada-regions-gauche .mada-regions { grid-template-columns: 1fr; }
	/* En une colonne la carte reprend toute la largeur : sans ca elle resterait
	   au tiers de la page, minuscule et centree. */
	.mada-regions-carte svg { height: auto; width: min(100%, 360px); }
}

@media (max-width: 899px) {
	.mada-burger { display: grid; place-items: center; order: 3; }
	.mada-entete-int { flex-wrap: wrap; }

	.mada-entete-nav {
		display: none;
		order: 4;
		flex-direction: column;
		align-items: stretch;
		gap: var(--e-4);
		width: 100%;
		padding-block: var(--e-4);
		border-top: 1px solid var(--line);
	}

	.mada-entete-nav.est-ouvert { display: flex; }
	.mada-menu { flex-direction: column; align-items: stretch; gap: var(--e-3); }
	.mada-entete-actions { flex-direction: column; align-items: stretch; }
	.mada-entete-actions .mada-btn { width: 100%; }
	
	.mada-recherche-rangee { flex-wrap: wrap; }
	.mada-recherche-champ, .mada-recherche-liste { flex: 1 1 100%; }
	.mada-recherche .mada-btn { width: 100%; }

	.mada-formulaire-grille { grid-template-columns: 1fr; }
	.mada-compte-agencement { grid-template-columns: 1fr; }
	.mada-compte-onglets ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: var(--e-2); padding-bottom: var(--e-2); }
	.mada-compte-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mada-compte-panneau { padding: var(--e-4); }

	.mada-filtres .mada-filtres-corps { display: none; }
	.mada-filtres.est-ouvert .mada-filtres-corps { display: block; }
	.mada-filtres.est-repliable .mada-filtres-bascule { display: inline-flex; align-items: center; gap: var(--e-2); padding: 10px 16px; border: 1px solid var(--line-fort); border-radius: var(--rayon-pilule); background: var(--surface); font-family: var(--police-titre); font-size: var(--t-sm); cursor: pointer; }

	.mada-pied-int { grid-template-columns: 1fr; gap: var(--e-6); padding-block: var(--e-7); }
	.mada-regions-liste { grid-template-columns: 1fr; }
	.mada-services-colonnes { grid-template-columns: 1fr; }
	.mada-fiche-identite { flex-direction: column; }
}

@media print {
	.mada-burger,
	.mada-economie-bascule,
	.mada-pied-colonnes,
	.mada-bande,
	.mada-carte { display: none !important; }
}

/* ----------------------------------------------------------------- Bannière */

.mada-banniere {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 560px;
	padding-block: var(--e-7);
	background-color: var(--deep);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mada-banniere.est-pleine-largeur { width: 100vw; margin-left: calc(50% - 50vw); }

/* Paysage livre avec le plugin : c'est un dessin vectoriel, donc « cover » le
   deformerait moins qu'une photo mais couperait le ciel. On l'ancre en bas pour
   garder les baobabs et la ligne d'horizon visibles. */
.mada-banniere.a-fond-livre { background-position: center bottom; background-size: cover; }
.mada-banniere-int { display: grid; gap: var(--e-5); width: 100%; }

/* Ombre portée plutôt qu'un voile sombre : l'image reste claire et le texte
   lisible, ce qui était la demande. */
.mada-banniere.a-ombre-texte .mada-banniere-titre,
.mada-banniere.a-ombre-texte .mada-banniere-surtitre {
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mada-banniere-surtitre {
	margin: 0 0 var(--e-2);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.mada-banniere-titre {
	max-width: 22ch;
	margin: 0;
	font-size: var(--t-3xl);
	color: #fff;
}

.mada-banniere-panneau {
	display: grid;
	gap: var(--e-4);
	max-width: 640px;
	padding: var(--e-5);
	background: var(--surface);
	border-radius: var(--rayon-lg);
	box-shadow: var(--ombre-lg);
}

.mada-panneau-bas-centre .mada-banniere-panneau { margin-inline: auto; }
.mada-panneau-bas-large .mada-banniere-panneau { max-width: none; }
.mada-banniere-texte { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

.mada-banniere-arguments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-2) var(--e-5);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--t-xs);
	color: var(--muted);
}

.mada-banniere-arguments li { display: flex; align-items: center; gap: var(--e-1); }
.mada-banniere-arguments .mada-ico { color: var(--turq-600); }
.mada-banniere-panneau .mada-btn { justify-self: start; }

/* ------------------------------------------- Tonalités de section */

.mada-ton-nue { background: transparent; }
.mada-ton-claire { background: var(--surface-2); }
.mada-ton-sombre { background: var(--deep); color: var(--on-deep-2); }
.mada-ton-turq { background: var(--deepTeal, var(--turq)); color: #fff; }

/* Sur fond coloré, les titres et les textes discrets doivent basculer : sans
   ça, le texte sombre du thème se pose sur un fond sombre. */
.mada-ton-sombre h2, .mada-ton-sombre h3, .mada-ton-turq h2, .mada-ton-turq h3 { color: #fff; }
.mada-ton-sombre .mada-surtitre { color: var(--turq); }
.mada-ton-turq .mada-surtitre { color: rgba(255, 255, 255, 0.82); }
.mada-ton-sombre .mada-intro, .mada-ton-turq .mada-intro { color: rgba(255, 255, 255, 0.82); }

.mada-engagements, .mada-cta { padding-block: var(--e-8); }
.mada-engagements.est-pleine-largeur,
.mada-cta.est-pleine-largeur { width: 100vw; margin-left: calc(50% - 50vw); }

.mada-engagements-int,
.mada-cta-int {
	width: 100%;
	max-width: var(--largeur-contenu);
	margin-inline: auto;
	padding-inline: var(--gouttiere);
}

.mada-ton-nue.mada-engagements, .mada-ton-nue.mada-cta { padding-block: var(--e-6); }

/* ------------------------------------------------------------- Engagements */

.mada-engagement {
	display: grid;
	gap: var(--e-2);
	align-content: start;
	padding: var(--e-5);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-ton-sombre .mada-engagement,
.mada-ton-turq .mada-engagement { border-color: var(--on-deep-line); }

.mada-engagement-icone { width: 26px; height: 26px; color: var(--turq); }
.mada-engagement-titre { margin: 0; font-size: var(--t-md); }
.mada-engagement-texte { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.mada-ton-sombre .mada-engagement-texte,
.mada-ton-turq .mada-engagement-texte { color: rgba(255, 255, 255, 0.82); }

/* ------------------------------------------------------------------ Étapes */

.mada-etapes { margin: 0; padding: 0; list-style: none; counter-reset: mada; }
.mada-etapes-horizontale { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--e-5); }
.mada-etapes-verticale { display: grid; gap: var(--e-5); }

.mada-etape { position: relative; display: flex; gap: var(--e-4); align-items: flex-start; }
.mada-etapes-horizontale .mada-etape { flex-direction: column; text-align: center; align-items: center; }

.mada-etape-numero {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	background: var(--accent);
	border-radius: 50%;
	font-family: var(--police-titre);
	font-size: var(--t-md);
	font-weight: 700;
	color: var(--btn-ink);
}

/* Le trait de liaison relie les étapes sans dépasser à la dernière. */
.mada-etapes-horizontale .mada-etape:not(:last-child)::after {
	position: absolute;
	top: 22px;
	left: calc(50% + 34px);
	width: calc(100% - 68px);
	height: 2px;
	background: var(--line-fort);
	content: "";
}

.mada-etape-corps { display: grid; gap: var(--e-1); }
.mada-etape-titre { font-family: var(--police-titre); font-size: var(--t-md); font-weight: 600; color: var(--deep); }
.mada-etape-texte { font-size: var(--t-sm); color: var(--muted); }
.mada-etape-duree { font-size: var(--t-xs); font-weight: 600; color: var(--turq-600); }

/* --------------------------------------------------------------------- FAQ */

.mada-faq { display: grid; gap: var(--e-2); }

.mada-question {
	padding: var(--e-4) var(--e-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon);
}

.mada-question-titre {
	font-family: var(--police-titre);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--deep);
	cursor: pointer;
	list-style: none;
}

.mada-question-titre::-webkit-details-marker { display: none; }
.mada-question-titre::marker { content: ""; }

/* La mise en ligne vit dans un span : le summary garde son display natif. */
.mada-question-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); }

.mada-question-signe {
	position: relative;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}

.mada-question-signe::before,
.mada-question-signe::after {
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--accent);
	content: "";
	transition: transform var(--transition);
}

.mada-question-signe::after { transform: rotate(90deg); }
.mada-question[open] .mada-question-signe::after { transform: rotate(0); }
.mada-question-reponse { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--ink-2); }
.mada-question-reponse p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Appel à l'action */

.mada-cta-int { display: grid; gap: var(--e-3); justify-items: center; text-align: center; position: relative; z-index: 1; }
.mada-cta { position: relative; overflow: hidden; }

/* Motif discret : deux dégradés radiaux, aucune image à charger. */
.mada-cta.a-un-motif::before {
	position: absolute;
	inset: 0;
	opacity: 0.35;
	background-image: radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.25) 0, transparent 38%),
		radial-gradient(circle at 88% 78%, rgba(255, 255, 255, 0.18) 0, transparent 42%);
	content: "";
}

.mada-cta-titre { margin: 0; font-size: var(--t-2xl); max-width: 26ch; }
.mada-cta-texte { margin: 0; max-width: 56ch; }
.mada-ton-sombre .mada-cta-texte, .mada-ton-turq .mada-cta-texte { color: rgba(255, 255, 255, 0.88); }
.mada-cta-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin: var(--e-2) 0 0; }
.mada-ton-turq .mada-btn-principal { background: var(--surface); color: var(--accent-700); }
.mada-ton-turq .mada-btn-principal:hover { background: var(--surface-2); color: var(--accent-700); }
.mada-ton-turq .mada-btn-secondaire,
.mada-ton-sombre .mada-btn-secondaire { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.mada-ton-turq .mada-btn-secondaire:hover,
.mada-ton-sombre .mada-btn-secondaire:hover { border-color: #fff; color: #fff; }

/* ------------------------------------------------------------------ Journal */

.mada-article-carte { padding: 0; overflow: hidden; }
.mada-article-lien { display: grid; text-decoration: none; color: inherit; }
.mada-dispo-liste .mada-article-lien { grid-template-columns: 200px minmax(0, 1fr); }
.mada-article-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mada-dispo-liste .mada-article-image img { aspect-ratio: 1 / 1; height: 100%; }
.mada-article-corps { display: grid; gap: var(--e-2); align-content: start; padding: var(--e-4); }
.mada-article-corps .mada-puce { justify-self: start; margin: 0; }
.mada-article-titre { font-family: var(--police-titre); font-size: var(--t-md); font-weight: 600; color: var(--deep); }
.mada-article-extrait { font-size: var(--t-sm); color: var(--muted); }
.mada-article-date { font-size: var(--t-xs); color: var(--faint); }

.mada-article-complet { display: grid; gap: var(--e-4); }
.mada-article-complet .mada-puce { justify-self: start; }
.mada-article-grand-titre { margin: 0; font-size: var(--t-3xl); max-width: 30ch; }
.mada-article-meta { margin: 0; font-size: var(--t-xs); color: var(--muted); }
.mada-article-une img { width: 100%; border-radius: var(--rayon-lg); }
.mada-article-texte { max-width: 70ch; font-size: var(--t-md); }
.mada-article-texte h2 { margin-top: var(--e-6); font-size: var(--t-xl); }
.mada-article-texte h3 { margin-top: var(--e-5); font-size: var(--t-lg); }
.mada-article-texte img { border-radius: var(--rayon); margin-block: var(--e-4); }

.mada-article-texte blockquote {
	margin: var(--e-5) 0;
	padding-left: var(--e-5);
	border-left: 3px solid var(--turq);
	font-size: var(--t-lg);
	color: var(--ink-2);
}

.mada-partage { display: flex; align-items: center; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid var(--line); }
.mada-partage-titre { font-size: var(--t-xs); color: var(--muted); }
.mada-partage-lien { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-fort); border-radius: 50%; color: var(--ink-2); }
.mada-partage-lien:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ Avis vitrine */

.mada-avis-pied { display: grid; gap: 2px; margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--line); }
.mada-avis-entreprise { font-size: var(--t-xs); color: var(--accent-600); }
.mada-avis blockquote { margin: 0; font-size: var(--t-sm); }

@media (max-width: 899px) {
	.mada-banniere { min-height: 460px; align-items: flex-end; }
	.mada-banniere-titre { font-size: var(--t-2xl); max-width: none; }
	.mada-banniere-panneau { max-width: none !important; padding: var(--e-4); }
	.mada-etapes-horizontale { grid-template-columns: 1fr; }
	.mada-etapes-horizontale .mada-etape { flex-direction: row; text-align: left; align-items: flex-start; }
	.mada-etapes-horizontale .mada-etape::after { display: none; }
	.mada-dispo-liste .mada-article-lien { grid-template-columns: 1fr; }
	.mada-article-grand-titre { font-size: var(--t-2xl); max-width: none; }
}

/* Masques des icônes d'interface. Écrites à la main ici, contrairement aux
   icônes de secteur qui viennent de outils/icones.py : ne pas croire le
   contraire, aucun script ne régénère cette feuille. Des SVG en masque
   suivent la couleur du texte, ce qui évite une variante par couleur. */

.mada-ico-verifie {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%2016.2%204.8%2012l-1.4%201.4L9%2019%2021%207l-1.4-1.4z'/%3E%3C/svg%3E");
}

.mada-ico-compte {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010zm0%202c-5%200-9%202.5-9%205.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%2012a5%205%200%201%200%200-10%205%205%200%200%200%200%2010zm0%202c-5%200-9%202.5-9%205.5V22h18v-2.5c0-3-4-5.5-9-5.5z'/%3E%3C/svg%3E");
}

.mada-ico-verrou {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17%209V7a5%205%200%200%200-10%200v2H5v12h14V9zm-8-2a3%203%200%200%201%206%200v2H9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17%209V7a5%205%200%200%200-10%200v2H5v12h14V9zm-8-2a3%203%200%200%201%206%200v2H9z'/%3E%3C/svg%3E");
}

.mada-ico-eco {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20%204c-9%200-14%204-14%2010%200%202%20.6%203.6%201.6%204.8L5%2021l1.4%201.4%202.2-2.2A7.6%207.6%200%200%200%2013%2021c6%200%207-8%207-17z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20%204c-9%200-14%204-14%2010%200%202%20.6%203.6%201.6%204.8L5%2021l1.4%201.4%202.2-2.2A7.6%207.6%200%200%200%2013%2021c6%200%207-8%207-17z'/%3E%3C/svg%3E");
}

.mada-ico-lieu {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a7%207%200%200%200-7%207c0%205.3%207%2013%207%2013s7-7.7%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a7%207%200%200%200-7%207c0%205.3%207%2013%207%2013s7-7.7%207-13a7%207%200%200%200-7-7zm0%209.5A2.5%202.5%200%201%201%2012%206.5a2.5%202.5%200%200%201%200%205z'/%3E%3C/svg%3E");
}

.mada-ico-tel {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6%2010.8a15.5%2015.5%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.7-.2%201z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6%2010.8a15.5%2015.5%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.7-.2%201z'/%3E%3C/svg%3E");
}

.mada-ico-whatsapp {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%200%200-8.5%2015.2L2%2022l4.9-1.4A10%2010%200%201%200%2012%202zm5.3%2014.1c-.2.6-1.2%201.2-1.7%201.2-.4%200-1%200-2.2-.5a11%2011%200%200%201-4.4-3.9c-.8-1.2-1.1-2.2-1.1-2.9%200-.6.4-1.5.9-1.9.2-.2.4-.2.6-.2h.5c.2%200%20.4%200%20.5.4l.7%201.7c0%20.2%200%20.3-.1.5l-.4.5c-.1.2-.2.3%200%20.6.5.8%201.6%201.9%202.6%202.3.2.1.4.1.6-.1l.6-.7c.2-.2.3-.2.5-.1l1.6.8c.2.1.3.2.3.4%200%20.2%200%20.8-.2%201.2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%200%200-8.5%2015.2L2%2022l4.9-1.4A10%2010%200%201%200%2012%202zm5.3%2014.1c-.2.6-1.2%201.2-1.7%201.2-.4%200-1%200-2.2-.5a11%2011%200%200%201-4.4-3.9c-.8-1.2-1.1-2.2-1.1-2.9%200-.6.4-1.5.9-1.9.2-.2.4-.2.6-.2h.5c.2%200%20.4%200%20.5.4l.7%201.7c0%20.2%200%20.3-.1.5l-.4.5c-.1.2-.2.3%200%20.6.5.8%201.6%201.9%202.6%202.3.2.1.4.1.6-.1l.6-.7c.2-.2.3-.2.5-.1l1.6.8c.2.1.3.2.3.4%200%20.2%200%20.8-.2%201.2z'/%3E%3C/svg%3E");
}

.mada-ico-mail {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18v14H3zm9%208%207.5-5H4.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18v14H3zm9%208%207.5-5H4.5z'/%3E%3C/svg%3E");
}

.mada-ico-monde {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm6.9%206h-2.7a12%2012%200%200%200-1.3-3.4A8%208%200%200%201%2018.9%208zM12%204c.7%201%201.3%202.4%201.7%204h-3.4C10.7%206.4%2011.3%205%2012%204zM4.3%2014A8%208%200%200%201%204%2012c0-.7.1-1.4.3-2h3a15%2015%200%200%200%200%204zm.8%202h2.7c.3%201.2.8%202.4%201.3%203.4A8%208%200%200%201%205.1%2016zm2.7-8H5.1a8%208%200%200%201%204-3.4A12%2012%200%200%200%207.8%208zM12%2020c-.7-1-1.3-2.4-1.7-4h3.4c-.4%201.6-1%203-1.7%204zm2.1-6H9.9a13%2013%200%200%201%200-4h4.2a13%2013%200%200%201%200%204zm.8%205.4c.5-1%201-2.2%201.3-3.4h2.7a8%208%200%200%201-4%203.4zm2-5.4a15%2015%200%200%200%200-4h3c.2.6.3%201.3.3%202s-.1%201.4-.3%202z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm6.9%206h-2.7a12%2012%200%200%200-1.3-3.4A8%208%200%200%201%2018.9%208zM12%204c.7%201%201.3%202.4%201.7%204h-3.4C10.7%206.4%2011.3%205%2012%204zM4.3%2014A8%208%200%200%201%204%2012c0-.7.1-1.4.3-2h3a15%2015%200%200%200%200%204zm.8%202h2.7c.3%201.2.8%202.4%201.3%203.4A8%208%200%200%201%205.1%2016zm2.7-8H5.1a8%208%200%200%201%204-3.4A12%2012%200%200%200%207.8%208zM12%2020c-.7-1-1.3-2.4-1.7-4h3.4c-.4%201.6-1%203-1.7%204zm2.1-6H9.9a13%2013%200%200%201%200-4h4.2a13%2013%200%200%201%200%204zm.8%205.4c.5-1%201-2.2%201.3-3.4h2.7a8%208%200%200%201-4%203.4zm2-5.4a15%2015%200%200%200%200-4h3c.2.6.3%201.3.3%202s-.1%201.4-.3%202z'/%3E%3C/svg%3E");
}

.mada-ico-oeil {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%205C6.5%205%202.7%209.2%201.5%2012c1.2%202.8%205%207%2010.5%207s9.3-4.2%2010.5-7c-1.2-2.8-5-7-10.5-7zm0%2011.5a4.5%204.5%200%201%201%200-9%204.5%204.5%200%200%201%200%209zm0-2.2a2.3%202.3%200%201%200%200-4.6%202.3%202.3%200%200%200%200%204.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%205C6.5%205%202.7%209.2%201.5%2012c1.2%202.8%205%207%2010.5%207s9.3-4.2%2010.5-7c-1.2-2.8-5-7-10.5-7zm0%2011.5a4.5%204.5%200%201%201%200-9%204.5%204.5%200%200%201%200%209zm0-2.2a2.3%202.3%200%201%200%200-4.6%202.3%202.3%200%200%200%200%204.6z'/%3E%3C/svg%3E");
}

.mada-ico-horloge {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011h-4v-2h2V7h2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011h-4v-2h2V7h2z'/%3E%3C/svg%3E");
}

.mada-ico-facebook {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13%2022v-8h3l.5-3H13V9c0-.9.2-1.5%201.6-1.5H17V4.7c-.4%200-1.6-.2-3-.2-2.9%200-4%201.8-4%204.3V11H7v3h3v8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13%2022v-8h3l.5-3H13V9c0-.9.2-1.5%201.6-1.5H17V4.7c-.4%200-1.6-.2-3-.2-2.9%200-4%201.8-4%204.3V11H7v3h3v8z'/%3E%3C/svg%3E");
}

.mada-ico-linkedin {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%209h4v12H4zM6%203a2.4%202.4%200%201%201%200%204.8A2.4%202.4%200%200%201%206%203zm4.5%206H14v1.7c.6-1%201.9-1.9%203.7-1.9%202.6%200%204.3%201.6%204.3%205V21h-4v-5.8c0-1.4-.6-2.3-1.9-2.3-1.2%200-1.9.8-1.9%202.3V21h-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%209h4v12H4zM6%203a2.4%202.4%200%201%201%200%204.8A2.4%202.4%200%200%201%206%203zm4.5%206H14v1.7c.6-1%201.9-1.9%203.7-1.9%202.6%200%204.3%201.6%204.3%205V21h-4v-5.8c0-1.4-.6-2.3-1.9-2.3-1.2%200-1.9.8-1.9%202.3V21h-4z'/%3E%3C/svg%3E");
}

.mada-ico-loupe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5%2014h-.8l-.3-.3a6.5%206.5%200%201%200-.7.7l.3.3v.8l5%205%201.5-1.5zM10%2014a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5%2014h-.8l-.3-.3a6.5%206.5%200%201%200-.7.7l.3.3v.8l5%205%201.5-1.5zM10%2014a4%204%200%201%201%200-8%204%204%200%200%201%200%208z'/%3E%3C/svg%3E");
}

.mada-ico-filtre {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18l-7%208v6l-4%202v-8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18l-7%208v6l-4%202v-8z'/%3E%3C/svg%3E");
}

.mada-ico-alerte {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202%201%2021h22zm1%2015h-2v-2h2zm0-4h-2V8h2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202%201%2021h22zm1%2015h-2v-2h2zm0-4h-2V8h2z'/%3E%3C/svg%3E");
}

.mada-ico-mallette {
	-webkit-mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><path%20d='M9%203h6a2%202%200%200%201%202%202v2h4v14H3V7h4V5a2%202%200%200%201%202-2zm0%202v2h6V5H9zM3%2011h7v2h4v-2h7v2h-7v2h-4v-2H3z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'><path%20d='M9%203h6a2%202%200%200%201%202%202v2h4v14H3V7h4V5a2%202%200%200%201%202-2zm0%202v2h6V5H9zM3%2011h7v2h4v-2h7v2h-7v2h-4v-2H3z'/></svg>");
}

.mada-ico-chantier {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%203%203%209v12h18V9zm0%202.5L18.5%2010H5.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%203%203%209v12h18V9zm0%202.5L18.5%2010H5.5z'/%3E%3C/svg%3E");
}

.mada-ico-camion {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%206h11v9H3zm12%203h3.5L21%2012v3h-6zM6.5%2020a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zm11%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%206h11v9H3zm12%203h3.5L21%2012v3h-6zM6.5%2020a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203zm11%200a1.5%201.5%200%201%201%200-3%201.5%201.5%200%200%201%200%203z'/%3E%3C/svg%3E");
}

.mada-ico-epi {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202c2%203%203%206%203%209s-1%208-3%2011c-2-3-3-8-3-11s1-6%203-9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202c2%203%203%206%203%209s-1%208-3%2011c-2-3-3-8-3-11s1-6%203-9z'/%3E%3C/svg%3E");
}

.mada-ico-puce {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7%207h10v10H7zm-4%203h2v2H3zm0%204h2v2H3zm16-4h2v2h-2zm0%204h2v2h-2zM10%203h2v2h-2zm4%200h2v2h-2zM10%2019h2v2h-2zm4%200h2v2h-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7%207h10v10H7zm-4%203h2v2H3zm0%204h2v2H3zm16-4h2v2h-2zm0%204h2v2h-2zM10%203h2v2h-2zm4%200h2v2h-2zM10%2019h2v2h-2zm4%200h2v2h-2z'/%3E%3C/svg%3E");
}

.mada-ico-panier {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6%206h15l-2%209H8L6%206zm0%200L5%203H2v2h1.6L6%206zm3%2013a1.5%201.5%200%201%201%200%203%201.5%201.5%200%200%201%200-3zm9%200a1.5%201.5%200%201%201%200%203%201.5%201.5%200%200%201%200-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6%206h15l-2%209H8L6%206zm0%200L5%203H2v2h1.6L6%206zm3%2013a1.5%201.5%200%201%201%200%203%201.5%201.5%200%200%201%200-3zm9%200a1.5%201.5%200%201%201%200%203%201.5%201.5%200%200%201%200-3z'/%3E%3C/svg%3E");
}

.mada-ico-valise {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%204h6v3h4v13H5V7h4zm2%200v3h2V4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%204h6v3h4v13H5V7h4zm2%200v3h2V4z'/%3E%3C/svg%3E");
}

.mada-ico-aiguille {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%2020%2016%208l-2-2L2%2018zm14-14%204%204-2%202-4-4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%2020%2016%208l-2-2L2%2018zm14-14%204%204-2%202-4-4z'/%3E%3C/svg%3E");
}

.mada-ico-jauge {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%204a8%208%200%200%200-8%208h3a5%205%200%200%201%2010%200h3a8%208%200%200%200-8-8zm1%209-4%203%201%201%204-3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%204a8%208%200%200%200-8%208h3a5%205%200%200%201%2010%200h3a8%208%200%200%200-8-8zm1%209-4%203%201%201%204-3z'/%3E%3C/svg%3E");
}

.mada-ico-liste {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%206h2v2H4zm4%200h12v2H8zM4%2011h2v2H4zm4%200h12v2H8zM4%2016h2v2H4zm4%200h12v2H8z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%206h2v2H4zm4%200h12v2H8zM4%2011h2v2H4zm4%200h12v2H8zM4%2016h2v2H4zm4%200h12v2H8z'/%3E%3C/svg%3E");
}

.mada-ico-enveloppe {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18v14H3zm9%208%207.5-5H4.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3%205h18v14H3zm9%208%207.5-5H4.5z'/%3E%3C/svg%3E");
}

.mada-ico-etoile {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202l3%206.5%207%20.9-5%204.9%201.2%207L12%2018l-6.2%203.3L7%2014.3%202%209.4l7-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202l3%206.5%207%20.9-5%204.9%201.2%207L12%2018l-6.2%203.3L7%2014.3%202%209.4l7-.9z'/%3E%3C/svg%3E");
}

.mada-ico-star {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202l3%206.5%207%20.9-5%204.9%201.2%207L12%2018l-6.2%203.3L7%2014.3%202%209.4l7-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202l3%206.5%207%20.9-5%204.9%201.2%207L12%2018l-6.2%203.3L7%2014.3%202%209.4l7-.9z'/%3E%3C/svg%3E");
}

.mada-ico-building {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%203h9v18H4zm11%206h5v12h-5zM6%206h2v2H6zm3%200h2v2H9zM6%2010h2v2H6zm3%200h2v2H9zM6%2014h2v2H6zm3%200h2v2H9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4%203h9v18H4zm11%206h5v12h-5zM6%206h2v2H6zm3%200h2v2H9zM6%2010h2v2H6zm3%200h2v2H9zM6%2014h2v2H6zm3%200h2v2H9z'/%3E%3C/svg%3E");
}

.mada-ico-shield {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202%204%205v6c0%205%203.4%209.4%208%2011%204.6-1.6%208-6%208-11V5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12%202%204%205v6c0%205%203.4%209.4%208%2011%204.6-1.6%208-6%208-11V5z'/%3E%3C/svg%3E");
}

.mada-ico-phone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6%2010.8a15.5%2015.5%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.7-.2%201z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6%2010.8a15.5%2015.5%200%200%200%206.6%206.6l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.6.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%200%201%203%204c0-.6.4-1%201-1h3.4c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.6.1.4%200%20.7-.2%201z'/%3E%3C/svg%3E");
}

.mada-ico-map {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15%204%209%206%203%204v16l6-2%206%202%206-2V2zm0%202.2%204-1.3v13.9l-4%201.3z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15%204%209%206%203%204v16l6-2%206%202%206-2V2zm0%202.2%204-1.3v13.9l-4%201.3z'/%3E%3C/svg%3E");
}

.mada-ico-camera {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%204h6l1%202h4v14H4V6h4zm3%204a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zm0%202a3%203%200%201%201%200%206%203%203%200%200%201%200-6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9%204h6l1%202h4v14H4V6h4zm3%204a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zm0%202a3%203%200%201%201%200%206%203%203%200%200%201%200-6z'/%3E%3C/svg%3E");
}

.mada-ico-briefcase {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10%204h4v2h5v14H5V6h5zm2%200v2h-.9V4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10%204h4v2h5v14H5V6h5zm2%200v2h-.9V4z'/%3E%3C/svg%3E");
}

/* Widget logo, et titre de page contextuel. */
.mada-logo-bloc .mada-logo { display: inline-grid; text-decoration: none; }
.mada-logo-bloc.sur-fond-sombre .mada-logo-marque { color: var(--on-deep); }
.mada-logo-bloc.sur-fond-sombre .mada-logo-baseline { color: var(--on-deep-2); }
.mada-logo-bloc.sur-fond-sombre .mada-logo-suffixe { color: var(--turq); }

.mada-titre-page { display: grid; gap: var(--e-2); }
.mada-titre-page-titre { margin: 0; }
.mada-titre-page-meta { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.mada-titre-page-desc { font-size: var(--t-md); color: var(--ink-2); max-width: 70ch; }
.mada-titre-page-desc p:last-child { margin-bottom: 0; }

/* Widget du plugin sans rien a afficher : Elementor garde son conteneur, avec
   la marge de la section autour. On le retire, sinon un annuaire qui demarre
   montre des blancs inexplicables entre deux sections. */
[class*="elementor-widget-mada-"] > .elementor-widget-container:empty { display: none; }

/* ---------------------------------------------------------------- Vignettes */
/* Forme d'une region, dessinee depuis le trace officiel. Aucune image : le SVG
   suit la palette active et reste net sur ecran Retina. */

.mada-forme { display: block; width: 100%; height: auto; overflow: visible; }
.mada-forme-region { fill: var(--accent); }
.mada-forme-pays { fill: var(--carte-vide); stroke: var(--surface); stroke-width: 1; }

/* Sur fond profond, la region ressort en turquoise et le pays s'efface. */
.mada-sur-profond .mada-forme-region { fill: var(--turq); }
.mada-sur-profond .mada-forme-pays { fill: rgba(255, 255, 255, 0.12); stroke: none; }

/* Puce devant une ligne de la liste des regions. A 22 px la forme n'etait qu'une
   tache ; dans un cadre carre de 38 px on reconnait le decoupage du pays. Le
   viewBox cadre deja sur la region, donc la forme se centre toute seule. */
.mada-region-puce {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	padding: 5px;
	border-radius: var(--rayon-sm);
	background: var(--surface-2);
	transition: background var(--transition);
}

.mada-region-ligne.a-vignette a { gap: var(--e-3); }
.mada-region-ligne.a-vignette .mada-forme-region { fill: var(--accent-300); transition: fill var(--transition); }
.mada-region-ligne.a-vignette:hover .mada-region-puce,
.mada-region-ligne.a-vignette.est-survolee .mada-region-puce { background: var(--surface); }
.mada-region-ligne.a-vignette:hover .mada-forme-region,
.mada-region-ligne.a-vignette.est-survolee .mada-forme-region { fill: var(--accent); }

/* Situation de la region dans le bloc coordonnees d'une fiche. */
.mada-coord-region { width: 54px; flex: 0 0 54px; margin-left: auto; }
.mada-coord-adresse { align-items: center; }

/* Bloc de situation d'une page de region : la carte a gauche, les reperes a droite. */
.mada-region-tete { display: grid; grid-template-columns: 150px 1fr; gap: var(--e-6); align-items: center; }
.mada-region-tete .mada-forme { max-width: 150px; }
.mada-region-reperes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-6); margin: 0; padding: 0; list-style: none; }
.mada-region-repere { display: flex; flex-direction: column; gap: 2px; }
.mada-region-repere-cle { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mada-region-repere-valeur { font-family: var(--police-titre); font-weight: 600; color: var(--ink); }

/* Grille des 22 regions : une carte par region, sa forme et son compte. */
.mada-region-carte {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-4);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
	background: var(--surface);
	text-decoration: none;
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.mada-region-carte:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--ombre-md); }
.mada-region-carte .mada-forme { height: 96px; width: auto; max-width: 100%; }
.mada-region-carte-nom { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-sm); color: var(--ink); text-align: center; }
.mada-region-carte-nombre { font-size: var(--t-xs); color: var(--muted); }
.mada-region-carte.est-vide .mada-forme-region { fill: var(--carte-min); }
.mada-region-carte.est-vide .mada-region-carte-nom { color: var(--muted); }

@media (max-width: 720px) {
	.mada-region-tete { grid-template-columns: 96px 1fr; gap: var(--e-4); }
	.mada-region-tete .mada-forme { max-width: 96px; }
	.mada-region-carte .mada-forme { height: 72px; }
}

/* Illustration en haut d'une case de secteur : bandeau large, coins arrondis
   en haut seulement pour qu'elle epouse la case. */
.mada-secteur-image { display: block; margin: calc(var(--e-5) * -1) calc(var(--e-5) * -1) var(--e-3); overflow: hidden; border-radius: calc(var(--rayon-lg) - 1px) calc(var(--rayon-lg) - 1px) 0 0; }
.mada-secteur-image img { display: block; width: 100%; height: 108px; object-fit: cover; }

/* Bascule « economie de donnees » : elle etait dans le bandeau du haut, retire
   en 1.5.0. Ici elle reste accessible sans voler la place a la navigation. */
.mada-pied-bas-int .mada-economie-bascule { font-size: var(--t-xs); color: var(--on-deep-2); }
.mada-pied-bas-int .mada-economie-bascule:hover { color: var(--on-deep); }

/* ------------------------------------------------- Couverture d'une fiche */
/* Bandeau en haut de la fiche. Elle remonte dans les coins du panneau pour ne
   pas laisser une bande blanche au-dessus. */
/* Le panneau a un remplissage de --e-6 (--e-4 sous 720 px) : la couverture le
   remonte exactement, sinon une bande blanche reste au-dessus de l'image. */
.mada-panneau-a-couverture { overflow: hidden; }
.mada-couverture { margin: calc(var(--e-6) * -1) calc(var(--e-6) * -1) var(--e-6); }
.mada-couverture img { display: block; width: 100%; height: 260px; object-fit: cover; }

/* Illustration de repli : le sujet est au centre bas du dessin. */
.mada-couverture.est-livree img { object-position: center bottom; }

/* Posee par le widget, la couverture n'est pas dans un panneau : pas de
   decalage negatif a compenser, mais ses propres coins arrondis. */
.mada-couverture-widget { margin: 0 0 var(--e-6); border-radius: var(--rayon-lg); overflow: hidden; }

@media (max-width: 720px) {
	.mada-couverture { margin: calc(var(--e-4) * -1) calc(var(--e-4) * -1) var(--e-4); }
	.mada-couverture-widget { margin: 0 0 var(--e-5); }
	.mada-couverture img { height: 160px; }
}

/* Ligne de total au-dessus d'une liste d'entreprises. */
.mada-liste-total { margin: 0 0 var(--e-4); font-family: var(--police-titre); font-weight: 600; color: var(--ink-2); font-size: var(--t-sm); }

/* ------------------------------------------- Bouton selon l'etat du visiteur */
/* Pas de flex-wrap ici : c'est lui qui renvoyait « Se connecter » sur la ligne
   du dessus des que la colonne devenait un peu juste. Les deux elements
   tiennent sur une ligne, et le repli ne vaut qu'en dessous de 900 px. */
/* Logo livre avec le plugin. Dimensionne par la hauteur : le bloc est tres
   large, le contraindre en largeur l'ecraserait dans l'en-tete. */
.mada-logo-livre img { display: block; width: auto; height: 52px; max-width: 100%; }

@media (max-width: 899px) {
	.mada-logo-livre img { height: 42px; }
}

.mada-visiteur { display: flex; align-items: center; gap: var(--e-4); flex-wrap: nowrap; }
.mada-visiteur-lien { font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.mada-visiteur-lien:hover { color: var(--accent); text-decoration: underline; }

/* Etat connecte : un seul bloc identifiable, et non un nom, un bouton et un
   lien poses cote a cote au meme niveau que la navigation. Le monogramme sert
   de point de repere, comme dans n'importe quelle interface ou l'on a un
   compte. */
.mada-visiteur.est-connecte { gap: var(--e-3); }

.mada-compte-bloc {
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: 6px 14px 6px 6px;
	border: 1px solid var(--line);
	border-radius: var(--rayon-pilule);
	background: var(--surface);
	text-decoration: none;
	transition: border-color var(--transition), background var(--transition);
}

.mada-compte-bloc:hover { border-color: var(--accent); background: var(--accent-050); }

.mada-compte-monogramme {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 700;
	color: var(--btn-ink);
}

.mada-compte-bloc-texte { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.mada-compte-bloc-nom { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.mada-compte-bloc-role { font-size: var(--t-xs); color: var(--muted); }
.mada-compte-bloc:hover .mada-compte-bloc-role { color: var(--accent-700); }

@media (max-width: 899px) {
	/* Sur telephone le nom passe a la ligne et vole de la hauteur d'en-tete. */
	.mada-visiteur { flex-wrap: wrap; }
	.mada-compte-bloc { padding: 4px; }
	.mada-compte-bloc-texte { display: none; }
}

/* Etoile des champs obligatoires, et pied de formulaire. Le meme traitement
   partout : c'est ce qui fait qu'un formulaire parait fini. */
.mada-requis { color: var(--avert); margin-left: 2px; }
.mada-formulaire-pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin: 0; }
.mada-formulaire-pied .mada-btn { margin: 0; }

/* --------------------------------------------------------- Inscription */
/* Quatre blocs numerotes, meme espacement, meme largeur : le visiteur voit d'un
   coup d'oeil combien il lui reste a remplir. */

.mada-inscription { display: grid; gap: var(--grille-ecart); }
.mada-inscription-bloc { margin: 0; border: 1px solid var(--line); }

/* Un <legend> ne se met pas en page. Comme <summary>, c'est un element a
   display natif reserve : il est rendu dans l'encoche de la bordure du
   fieldset et ne participe pas au flux normal. Lui poser « display: flex »
   faisait sortir le rang et le titre du panneau, et le texte d'aide
   chevauchait le bord superieur. L'en-tete visible est donc une div, et le
   <legend> reste pour l'accessibilite, masque. */
.mada-inscription-entete {
	display: flex;
	align-items: flex-start;
	gap: var(--e-4);
	width: 100%;
	margin-bottom: var(--e-5);
}

.mada-inscription-rang {
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: var(--rayon-pilule);
	background: var(--accent);
	color: var(--btn-ink);
	font-family: var(--police-titre);
	font-weight: 700;
	font-size: var(--t-sm);
}

.mada-inscription-titre { display: block; font-family: var(--police-titre); font-weight: 600; font-size: var(--t-md); color: var(--ink); }
.mada-inscription-aide { display: block; margin-top: 2px; font-size: var(--t-sm); color: var(--muted); }

/* Un champ qui prend les deux colonnes de la grille. */
.mada-champ-large { grid-column: 1 / -1; }

/* Cases a cocher des secteurs : une grille reguliere, pas une colonne
   interminable ni une ligne qui deborde. */
.mada-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-2) var(--e-4); margin-top: var(--e-2); }
.mada-case { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); cursor: pointer; }
.mada-case input { margin: 0; }

.mada-inscription-pied { display: grid; gap: var(--e-3); justify-items: start; margin: 0; background: var(--surface-2); }
.mada-btn-grand { padding: 14px 28px; font-size: var(--t-md); }

@media (max-width: 720px) {
	.mada-formulaire-grille { grid-template-columns: 1fr; }
	.mada-inscription-entete { margin-bottom: var(--e-4); }
}

/* --------------------------------------------- Icones de secteur dessinees */
/* Deux tons portes par des classes : l'icone suit la palette, et se teinte au
   survol de la case sans qu'on redessine un fichier par couleur. */

.mada-si { display: block; width: 100%; height: 100%; }
.mada-si-doux { fill: var(--accent-300); }
.mada-si-fort { fill: var(--accent); }

/* Tuile teintee autour de l'icone : c'est elle qui donne l'assise. Une icone
   posee a nu dans une carte flotte et parait bricolee. */
.mada-secteur-tuile {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	padding: 11px;
	border-radius: var(--rayon-lg);
	background: var(--accent-050);
	transition: background var(--transition);
}

.mada-secteur:hover .mada-secteur-tuile { background: var(--accent-100); }
.mada-secteur:hover .mada-si-fort { fill: var(--accent-700); }
.mada-secteur:hover .mada-si-doux { fill: var(--accent); }

/* Case de metier : la tuile en haut, le nom, le compte. Hauteur egale d'une case
   a l'autre grace au conteneur en colonne. */
.mada-secteur {
	display: flex;
	flex-direction: column;
	gap: var(--e-3);
	height: 100%;
	padding: var(--e-5);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
	background: var(--surface);
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.mada-secteur:hover { border-color: var(--accent); box-shadow: var(--ombre-md); transform: translateY(-2px); }
.mada-secteur .mada-secteur-nom { margin-top: auto; }

@media (max-width: 720px) {
	.mada-secteur { padding: var(--e-4); }
	.mada-secteur-tuile { width: 52px; height: 52px; padding: 9px; }
}

/* ================================================================== 1.8.0
   Blocs qui sortaient du PHP sans aucune regle CSS.

   Retour client : « quand je clique sur la fiche ca manque d'espace », « c'est
   tronque alors qu'on pourrait tout afficher », « la couleur de fond est la
   meme du coup ca se detache pas », « le bord de radio n'est pas le meme ».

   Les trois premiers venaient de la : les enveloppes etaient ecrites dans le
   HTML mais n'existaient pas dans la feuille de style, donc aucun remplissage,
   aucun ecart entre les sous-blocs, aucun panneau. Le controle
   « classes_sans_style » de outils/verifier.py empeche desormais d'en
   reintroduire.
   ====================================================================== */

/* ------------------------------------------------- Agencement de la fiche */

/* Placement du logo dans le bloc d'identite. Les trois valeurs du contrôle
   « Agencement » du widget, qui n'avaient aucune regle : seul « cote »
   fonctionnait, par heritage du flex de .mada-fiche-identite. */
.mada-agencement-cote { flex-direction: row; align-items: flex-start; }
.mada-agencement-dessus { flex-direction: column; align-items: flex-start; }
.mada-agencement-centre { flex-direction: column; align-items: center; text-align: center; }
.mada-agencement-centre .mada-fiche-badges { justify-content: center; }
.mada-agencement-centre .mada-fiche-secteurs { justify-content: center; }
.mada-agencement-centre .mada-lieu { justify-content: center; }

.mada-fiche-principal { display: grid; gap: var(--e-6); min-width: 0; }
.mada-fiche-cote { display: grid; gap: var(--e-5); min-width: 0; }

/* La colonne de contact suit la lecture sur grand ecran : elle reste a portee
   de clic quand on parcourt les services et les avis. */
@media (min-width: 1100px) {
	.mada-fiche-cote { position: sticky; top: calc(var(--entete-hauteur) + var(--e-5)); }
}

/* --------------------------------------------------- Bloc activite d'une fiche */
/* Presentation, services, certifications, missions, zones : quatre sous-blocs
   qui se touchaient. L'ecart est pose ici une seule fois. */

.mada-fiche-activite {
	display: grid;
	gap: var(--e-6);
	padding: var(--e-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-fiche-activite > * { min-width: 0; }
.mada-fiche-presentation { font-size: var(--t-base); color: var(--ink-2); }
.mada-fiche-presentation > :last-child { margin-bottom: 0; }

/* Un sous-bloc = un titre et son contenu. Le separateur se pose ENTRE deux
   sous-blocs, jamais a l'interieur.
   La 1.8.0 visait « > * + * » alors que le widget sortait a plat (h2, ul, h2,
   ul...) : le trait et les 32 px tombaient donc entre un titre et sa propre
   liste. D'ou le « Services ----- [grand vide] pastilles » signale par le
   client. Le widget enveloppe maintenant chaque sous-bloc. */
/* Audience publique d'une fiche. Trois tuiles de même largeur : le chiffre
   d'abord, l'intitulé dessous, et la durée de mise en ligne au même rang que
   les deux compteurs pour qu'un petit nombre se lise en contexte. */
/* Fil des etapes de l'inscription. Sans JavaScript il sert de sommaire, avec
   lui il devient la barre de progression du parcours. */
/* Lu par les lecteurs d'ecran, invisible a l'ecran. */
.mada-cache-visuel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.mada-fil-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-2); margin: 0 0 var(--e-5); padding: 0; list-style: none; counter-reset: none; }
.mada-fil-etape { display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: center; gap: var(--e-2); padding: var(--e-3); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rayon); cursor: pointer; }
.mada-fil-rang { display: grid; place-items: center; width: 26px; height: 26px; font-family: var(--police-titre); font-size: var(--t-sm); font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon-pilule); }
.mada-fil-nom { font-size: var(--t-sm); line-height: 1.3; color: var(--muted); }
.mada-fil-etape.est-courante { background: var(--accent-050); border-color: var(--accent-300); }
.mada-fil-etape.est-courante .mada-fil-rang { color: var(--btn-ink); background: var(--btn); border-color: var(--btn); }
.mada-fil-etape.est-courante .mada-fil-nom { font-weight: 600; color: var(--accent-700); }
.mada-fil-etape.est-faite .mada-fil-rang { color: var(--ok); border-color: var(--ok); }
.mada-fil-etape.est-faite .mada-fil-nom { color: var(--ink-2); }
.mada-etapes-boutons { display: flex; flex-wrap: wrap; gap: var(--e-3); }

@media (max-width: 899px) {
	.mada-fil-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
	.mada-fil-etapes { grid-template-columns: 1fr; }
	.mada-etapes-boutons { flex-direction: column; }
	.mada-etapes-boutons .mada-btn { width: 100%; }
	.mada-btn { white-space: normal; }
}

.mada-bloc-audience { display: grid; gap: var(--e-3); }
.mada-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.mada-audience-item { display: grid; grid-template-rows: auto auto auto; align-content: start; justify-items: center; gap: var(--e-1); padding: var(--e-4) var(--e-3); text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--rayon); }
.mada-audience-item .mada-ico { width: 18px; height: 18px; background: var(--accent); }
.mada-audience-chiffre { font-family: var(--police-titre); font-size: var(--t-lg); font-weight: 700; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.mada-audience-label { font-size: var(--t-xs); line-height: 1.3; color: var(--muted); }
.mada-audience-mention { margin: 0; font-size: var(--t-sm); line-height: 1.5; color: var(--muted); }

/* Carte de résultat : une ligne discrète, jamais mise en avant. */
.mada-carte-audience { display: flex; align-items: center; gap: var(--e-2); margin: 0; font-size: var(--t-sm); color: var(--muted); }
.mada-carte-audience .mada-ico { width: 16px; height: 16px; background: var(--muted); flex: 0 0 auto; }

@media (max-width: 599px) {
	.mada-audience { grid-template-columns: 1fr; }
	.mada-audience-item { grid-template-columns: auto auto 1fr; justify-items: start; text-align: left; align-items: center; gap: var(--e-2); }
}

.mada-fiche-bloc { display: grid; gap: var(--e-4); min-width: 0; }
.mada-fiche-bloc .mada-bloc-titre { margin: 0; }
.mada-fiche-activite > .mada-fiche-bloc + .mada-fiche-bloc { padding-top: var(--e-6); border-top: 1px solid var(--line); }

.mada-zones { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.mada-zones li { padding: 5px 12px; background: var(--surface-2); border-radius: var(--rayon-pilule); font-size: var(--t-sm); color: var(--ink-2); }

/* -------------------------------------------------- Panneau de coordonnees */

.mada-coordonnees {
	display: grid;
	gap: var(--e-4);
	padding: var(--e-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
	box-shadow: var(--ombre-sm);
}

/* Les horaires restent une ligne de coordonnees comme les autres : icone a
   gauche, texte a cote. La 1.8.0 leur posait « display: grid », ce qui ecrasait
   le flex de .mada-coord et renvoyait l'horloge seule sur sa propre ligne. */
.mada-coord-horaires .mada-horaires { font-size: var(--t-sm); color: var(--ink-2); }

/* Avis et carte : memes enveloppes que l'activite, pour que la fiche entiere
   se lise comme une suite de panneaux de meme facture. */
.mada-bloc-avis,
.mada-bloc-carte {
	display: grid;
	gap: var(--e-4);
	padding: var(--e-5);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-bloc-carte { padding: var(--e-4); }
.mada-fiche-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.mada-fiche-secteurs { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-3); }
.mada-carte-google { display: block; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------ Lieu d'une fiche */
/* La ville et la region sont devenues des liens : ils ne doivent pas ressembler
   a du texte souligne au milieu d'une carte. */

.mada-lieu-texte { min-width: 0; }
.mada-lieu-lien { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.mada-lieu-lien:hover { color: var(--accent); border-bottom-color: currentColor; }

/* ------------------------------------------------- Formulaires de l'espace pro */

.mada-compte-formulaire { display: grid; gap: var(--e-5); }
.mada-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); margin: 0; padding-top: var(--e-4); border-top: 1px solid var(--line); }
.mada-envoi-bouton { margin: 0; }

.mada-demande {
	display: grid;
	gap: var(--e-3);
	padding: var(--e-4);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-demande-texte { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.mada-offre-actuelle { display: grid; gap: var(--e-2); }

/* ------------------------------------------------------ Devis et contact */

.mada-devis,
.mada-contact-panneau {
	display: grid;
	gap: var(--e-5);
	padding: var(--e-6);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--rayon-lg);
}

.mada-devis-titre { margin: 0; font-size: var(--t-lg); }
.mada-devis-intro { margin: 0; font-size: var(--t-sm); color: var(--muted); }

/* Sur fond profond ou turquoise, le panneau de devis garde sa surface claire :
   un formulaire transparent sur fond sombre est illisible. */
.mada-ton-sombre .mada-devis,
.mada-ton-turq .mada-devis { color: var(--ink); }
.mada-ton-sombre .mada-devis .mada-champ-libelle,
.mada-ton-turq .mada-devis .mada-champ-libelle { color: var(--ink-2); }

/* --------------------------------------------------------- Pied de page */

.mada-pied-colonne { display: grid; gap: var(--e-3); align-content: start; }
.mada-pied-marque { display: grid; gap: var(--e-3); }

/* ------------------------------------------------- Filtres de la recherche */

.mada-recherche-filtres { display: flex; flex-wrap: wrap; gap: var(--e-2); min-width: 0; }
.mada-recherche-filtres > * { flex: 1 1 180px; min-width: 0; }

/* Banniere en deux rangees : le champ large au-dessus, les filtres en dessous. */
.mada-dispo-deux-rangees { display: grid; gap: var(--e-3); }
.mada-dispo-deux-rangees .mada-recherche-rangee { flex-wrap: wrap; }

/* Le voile se pose sur la banniere entiere, et non sur le bloc de texte.
   Avant, « inset: 0 » s'appliquait a un conteneur qui n'entourait que le
   surtitre et le titre : le degrade dessinait donc un rectangle gris a bords
   nets derriere le titre, au milieu d'une image claire. Et il s'ajoutait a
   l'ombre portee, qui est censee le remplacer. Les deux traitements
   s'excluent desormais. */
.mada-banniere-sur-photo { position: relative; }
.mada-banniere:not(.a-ombre-texte):not(.a-texte-marine)::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(8, 29, 50, 0.72), rgba(8, 29, 50, 0.25)); pointer-events: none; }

/* Bandeau sur photographie claire. Mesure sur la photo d'Antananarivo livree :
   le blanc tombe entre 1,0 et 1,9:1, le marine tient 9:1 au pire et 13 a 15:1
   en mediane. On ecrit donc en marine, sans voile : assombrir une image choisie
   pour sa lumiere n'aurait aucun sens. */
.mada-banniere.a-texte-marine .mada-banniere-titre,
.mada-banniere.a-texte-marine .mada-banniere-surtitre { color: var(--deep); text-shadow: none; }
.mada-banniere.a-texte-marine .mada-banniere-surtitre { opacity: 1; }
.mada-banniere > * { position: relative; }

/* ------------------------------------------------------- En-tete integre */
/* Rendu par le plugin quand aucun modele Elementor n'est assigne : sans ces
   regles, le logo, le menu et le bouton s'empilaient les uns sous les autres. */

.mada-entete-principal { display: flex; align-items: center; gap: var(--e-5); min-height: var(--entete-hauteur); }
.mada-nav { display: flex; align-items: center; gap: var(--e-6); margin-left: auto; }

/* ------------------------------------------------- Contenu libre d'une page */
/* Pages et articles qui ne passent pas par un widget : le titre et le corps de
   texte doivent quand meme respirer. */

.mada-titre { margin: 0 0 var(--e-4); }
.mada-texte { font-size: var(--t-base); color: var(--ink-2); }
.mada-texte > :last-child { margin-bottom: 0; }
.mada-article { display: grid; gap: var(--e-4); }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1099px) {
	.mada-agencement-cote { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
	.mada-nav { margin-left: 0; }
	.mada-entete-principal { flex-wrap: wrap; }
	.mada-recherche-filtres > * { flex: 1 1 100%; }
}

@media (max-width: 720px) {
	.mada-fiche-activite { gap: var(--e-5); padding: var(--e-4); }
	.mada-fiche-activite > .mada-fiche-bloc + .mada-fiche-bloc { padding-top: var(--e-5); }
	.mada-coordonnees,
	.mada-bloc-avis { padding: var(--e-4); }
	.mada-devis,
	.mada-contact-panneau { gap: var(--e-4); padding: var(--e-4); }
}

/* ------------------------------------------- Bouton d'affichage du telephone */
/* Le numero est masque jusqu'au clic : c'est ce qui permet de compter les
   demandes de contact. Le bouton doit donc garder exactement la meme taille
   avant et apres, sinon la carte saute sous le curseur. */

.mada-tel { cursor: pointer; }
.mada-tel-texte { font-variant-numeric: tabular-nums; }
.mada-tel.est-devoile { cursor: default; }

/* ============================================= Metiers en barre laterale
   Retour client : « mets-le en barre laterale en format liste ».

   La grille pleine largeur imposait huit cases cote a cote : a cette largeur
   les noms longs se coupaient mot par mot (« Batiment / et / travaux /
   publics ») et depassaient de leur cadre. En rail vertical le nom tient sur
   une ligne, et la colonne devient une vraie navigation par metier.
   ====================================================================== */

.mada-dispo-liste.mada-widget-mada-grille-secteurs { gap: var(--e-2); }

/* En liste, la case redevient une ligne : pastille, nom, compteur. */
.mada-dispo-liste .mada-secteur {
	flex-direction: row;
	align-items: center;
	gap: var(--e-3);
	padding: 10px 14px;
	border-radius: var(--rayon);
}

.mada-dispo-liste .mada-secteur-tuile {
	width: 40px;
	height: 40px;
	padding: 7px;
	border-radius: var(--rayon-sm);
}

/* Le nom reprend sa place : plus de marge automatique qui le poussait en bas
   de case, et il garde sa ligne au lieu de se couper mot par mot. */
.mada-dispo-liste .mada-secteur .mada-secteur-nom {
	flex: 1 1 auto;
	min-width: 0;
	margin-top: 0;
	font-size: var(--t-sm);
	line-height: 1.3;
	text-wrap: pretty;
}

/* Le compteur passe en pastille a droite, comme dans la liste des regions :
   c'est la meme lecture, donc la meme forme. */
.mada-dispo-liste .mada-secteur-nombre {
	flex: 0 0 auto;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: var(--rayon-pilule);
	background: var(--surface-2);
	font-family: var(--police-titre);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink-2);
	text-align: center;
	transition: background var(--transition), color var(--transition);
}

.mada-dispo-liste .mada-secteur:hover .mada-secteur-nombre { background: var(--accent); color: var(--btn-ink); }
.mada-dispo-liste .mada-secteur:hover { transform: none; }

/* Enveloppe de barre laterale : un titre et son rail, colles en haut de la
   colonne pendant qu'on parcourt la liste a cote. */
/* Le collant est pose par Elementor sur la colonne (position sticky + offset) :
   le dupliquer ici ferait deux mecanismes sur le meme element, donc un double
   decalage au defilement. Cette classe ne porte que la mise en page. */
.mada-rail { display: grid; gap: var(--e-5); align-content: start; }

@media (max-width: 1099px) {
	/* En une colonne le rail reprend deux colonnes : 8 lignes empilees sur un
	   telephone, c'est un mur. */
	.mada-dispo-liste.mada-widget-mada-grille-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.mada-dispo-liste.mada-widget-mada-grille-secteurs { grid-template-columns: 1fr; }
}

/* Denomination legale sous le nom commercial d'une fiche. */
.mada-fiche-raison { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--muted); }