/*
 * Fiche centre (widget Mist_Centre_Fiche) — reprend les styles inline de la maquette
 * mist-<ville>.html. Les classes mist-ds (.section/.container/.grid-2/.card/.badge/
 * .doctors-grid…) font le reste : le widget rend du HTML brut, donc aucune base
 * atomique Elementor à neutraliser.
 */
.mist-centre-hero { padding-bottom: 30px; }
.mist-centre-hero-grid { align-items: center; gap: 48px; }
.mist-centre-title { margin: 14px 0 14px; }
.mist-centre-title em {
	font-style: normal;
	padding: 0 0.05em;
	border-radius: 3px;
	background: linear-gradient(transparent 60%, rgba(233, 78, 27, 0.24) 60%);
}
.mist-centre-lead { max-width: 48ch; }
.mist-centre-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.mist-centre-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.mist-centre-photo {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--r-xl, 34px); display: block;
}
.mist-centre-h2 { margin: 8px 0 26px; }
.mist-centre-h2b { margin-top: 8px; }
.mist-centre-cards { gap: 22px; }
.mist-centre-card-title { margin-bottom: 12px; }
.mist-centre-tel-btn { margin-top: 16px; width: 100%; }
.mist-centre-write { margin-top: 14px; display: inline-flex; }
.mist-centre-hours { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mist-centre-hours td { padding: 7px 0; }
.mist-centre-hours td:first-child { font-weight: 700; color: var(--ink, #1f2444); }
.mist-centre-hours td:last-child { text-align: right; color: var(--ink-soft, #5b6180); }
.mist-centre-hours-note { margin-top: 12px; }
.mist-centre-medecins { padding-top: 0; }
.mist-centre-cta { border-radius: var(--r-xl, 34px); padding: clamp(28px, 5vw, 46px); text-align: center; }
.mist-centre-cta-title { color: #fff; max-width: 22ch; margin: 0 auto 10px; }
.mist-centre-cta-lead { margin-bottom: 22px; }
.mist-centre-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* --- Bloc carte de la fiche centre (ajout 2026-07-28) ---------------------
   La maquette pose ici un emplacement en 21/9 ; on garde exactement ce ratio.
   `width:100%` est obligatoire : le HTML du widget devient enfant flex d'un
   `.e-con`, et un media avec `aspect-ratio` mais sans largeur contrainte
   dimensionne sa LARGEUR depuis sa hauteur (debordement mobile documente). */
.mist-centre-carte{
  width:100%;margin-top:22px;aspect-ratio:21/9;border-radius:var(--r-l);
  overflow:hidden;background:#ECE7F6;z-index:0;
}
@media (max-width:700px){ .mist-centre-carte{ aspect-ratio:4/3 } }

/* Marqueur aux couleurs de la charte (meme langage que la carte du territoire). */
.mist-centre-pin{ background:none;border:0 }
.mist-centre-pin-dot{
  display:block;width:18px;height:18px;border-radius:50%;
  background:var(--orange,#E94E1B);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* Leaflet impose ses propres polices : on rebranche celle du site. */
.mist-centre-carte .leaflet-container{ font-family:inherit;background:#ECE7F6 }
.mist-centre-carte .leaflet-popup-content{ font-size:14px;line-height:1.45 }

/* Horaires non interpretables (saisie a corriger cote MIST) : rendus en
   paragraphe lisible plutot qu'en ligne de tableau mal formee. */
.mist-centre-hours-raw{ margin:6px 0 0;line-height:1.55 }

/* Avatar des medecins : rond.
   `mist-ds.css` pose bien `border-radius:50%` sur `.doctor-avatar`, mais une
   regle d'Elementor plus specifique le remettait a 0 — l'avatar s'affichait en
   CARRE avec son fond violet apparent, buste coupe. Invisible pour toute sonde
   de structure : l'image est presente, a la bonne taille, non cassee. Seule une
   capture le montre.
   Regle du projet : un override doit etre >= (0,3,0) pour passer devant. */
.elementor .doctors-grid .doctor-avatar { border-radius: 50%; }