/*
 * Widgets « territoire & contact » (inc/widgets-mist-territoire.php,
 * inc/widget-mist-trouver.php).
 *
 * Ce sont des Widget_Base : leur HTML brut échappe aux bases atomiques Elementor,
 * donc les classes de mist-ds.css s'appliquent directement (pas de min-width:30px
 * ni de padding:10px à neutraliser). On ne pose ici que ce que le prototype fait
 * en styles inline, plus la mise en page propre à la carte.
 */

/* ---------------------------------------------------------------- CARTE */

.mist-carte-grid {
	align-items: stretch;
	gap: 40px;
}

/* Le prototype fixe la hauteur en inline : on la reprend en classe.
   z-index 1 = Leaflet doit rester sous le header collant. */
.mist-carte-map {
	min-height: clamp(300px, 50vw, 440px);
	height: clamp(300px, 50vw, 440px);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	z-index: 1;
}

.mist-carte-lead {
	max-width: 46ch;
	margin-bottom: 22px;
}

.mist-carte-dept {
	margin-bottom: 18px;
}

.mist-carte-dept-title {
	margin-bottom: 12px;
	color: var(--blue);
}

.mist-carte-villes {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

/* Les villes sont des <a class="badge badge-blue"> : le badge de base n'a ni
   curseur ni état de survol puisqu'il n'est normalement pas cliquable. */
.mist-carte-villes .badge {
	cursor: pointer;
	text-decoration: none;
	transition: background-color .16s, color .16s, transform .16s;
}

.mist-carte-villes .badge:hover,
.mist-carte-villes .badge:focus-visible {
	background: var(--blue);
	color: #fff;
	transform: translateY(-1px);
}

/* --------------------------------------------------- TROUVER MA MIST */

/* La carte du finder porte un id, pas de classe, dans le contrat de mist-finder.js. */
.mist-trouver-sec #finder-map {
	min-height: clamp(320px, 54vw, 520px);
	height: clamp(320px, 54vw, 520px);
	border-radius: var(--r-xl);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	z-index: 1;
}

.mist-trouver-sec .finder-side-cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 22px;
}

.mist-trouver-sec .finder-legend {
	margin: 22px 0 0;
}

/* ------------------------------------------------------------- CONTACT */

/* Le formulaire réutilise les classes .mist-adh-* du widget d'adhésion
   (déjà stylées dans mist-employeurs.css) : rien à redéfinir ici. */
.mist-ctc-sec .mist-adh-intro {
	max-width: 62ch;
}

/* ------------------------------------------ CONTACT : colonne coordonnées */

.mist-ctc-grid {
	align-items: start;
	gap: 34px;
}

.mist-ctc-card-title {
	color: #fff;
	margin: 12px 0 6px;
}

.mist-ctc-card-lead {
	margin-bottom: 22px;
}

.mist-ctc-eyebrow {
	color: #ffd9b0;
}

.mist-ctc-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.mist-ctc-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.mist-ctc-ico {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: rgba(255, 255, 255, .14);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	flex-shrink: 0;
}

.mist-ctc-list strong {
	font-family: var(--display);
	color: #fff;
	display: block;
	margin-bottom: 2px;
}

.mist-ctc-list span {
	color: #dfe1f3;
}

/* Puces à cocher de la carte (page contact) : même vert que les listes du DS. */
.mist-carte-puces {
	list-style: none;
	padding: 0;
	margin: 0 0 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mist-carte-puces li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--ink-muted);
}

.mist-carte-puces li::before {
	content: "";
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--green-pale, #e3f3ea);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
	background-size: 12px 12px;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 900px) {
	.mist-ctc-grid { gap: 24px; }
}

/* Ordre des colonnes : le prototype met la carte à droite sur /contact/. */
.mist-carte-texte-gauche .mist-carte-map { order: 2; }
.mist-carte-texte-gauche .mist-carte-col { order: 1; }

.mist-carte-cta { margin-top: 4px; }

/* Surlignage du mot-clé dans les titres de widgets. Les widgets PHP produisent un
   <em> (bouton italique de l'éditeur) : sans cette règle il s'affichait en italique
   au lieu du surlignage orange du design system (.hl). */
.mist-carte-title em,
.mist-adh-title em,
.mist-ctc-card-title em,
.mist-faq-title em,
.mist-trouver-sec .h2 em {
	font-style: normal;
	background: linear-gradient(transparent 60%, rgba(233, 78, 27, .24) 60%);
	border-radius: 3px;
	padding: 0 .05em;
}

/* Encart secondaire de la page contact (« Urgence ou suivi en cours ? »). */
.mist-ctc-coords { display: flex; flex-direction: column; gap: 22px; }

.mist-ctc-note { display: flex; gap: 16px; align-items: flex-start; }

.mist-ctc-note-ico {
	width: 42px; height: 42px; border-radius: 13px;
	background: var(--orange-pale, #fdece6); color: var(--orange);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.mist-ctc-note strong { font-family: var(--display); display: block; margin-bottom: 4px; }
.mist-ctc-note span { display: block; }

/* ==================================================== TABLEAU (Mist_Tableau) */

.mist-tableau-wrap { padding: 0; overflow: hidden; }

.mist-tableau {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.mist-tableau caption {
	caption-side: top;
	text-align: left;
	padding: 18px 22px 0;
	font-family: var(--display);
	font-weight: 800;
	color: var(--ink);
}

.mist-tableau thead tr { background: var(--blue-pale); text-align: left; }

.mist-tableau th {
	padding: 16px 22px;
	font-family: var(--display);
	color: var(--blue);
	font-weight: 800;
	text-align: left;
}

.mist-tableau tbody tr { border-top: 1px solid var(--line); }
.mist-tableau td { padding: 16px 22px; vertical-align: top; }

.mist-tableau td strong { font-family: var(--display); color: var(--ink); display: block; }
.mist-tableau td .muted { display: block; margin-top: 2px; }

@media (max-width: 720px) {
	.mist-tableau-wrap { overflow-x: auto; }
	.mist-tableau { min-width: 640px; }
}

/* ================================== PUCES DES WIDGETS (cotisation, adhésion) */

.mist-puces {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.mist-puces li { display: flex; gap: 11px; align-items: flex-start; color: var(--ink-muted); }

.mist-puces li::before {
	content: "";
	width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
	border-radius: 50%;
	background: var(--green-pale, #e3f3ea);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
	background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}

/* ================================================== ARTICLES (Mist_Articles) */

.mist-art-sec-head { padding-bottom: 0; }
.mist-art-sec-une { padding-top: 0; padding-bottom: 0; }

.mist-art-filtres { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 28px; }

.mist-art-une { gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.mist-art-une-img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.mist-art-une-body {
	padding: clamp(26px, 4vw, 40px);
	display: flex; flex-direction: column; justify-content: center;
}
.mist-art-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.mist-art-une-titre { margin: 0 0 12px; }
.mist-art-meta { margin: 14px 0 10px; }

.mist-art-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mist-art-card-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mist-art-card-body { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mist-art-card-titre { margin: 4px 0 0; }

/* Boutons sous la FAQ (le prototype en pose sur plusieurs pages). */
.mist-faq-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; justify-content: center; }