/**
 * Pages locales MD Agency.
 * Couleurs et polices alignées sur le kit Elementor du site pour que ces
 * templates ne détonnent pas à côté des pages construites avec le builder.
 */

.mda-page-ville,
.mda-article-page {
	--mda-bleu: #004aad;
	--mda-bleu-clair: #38b6ff;
	--mda-encre: #111827;
	--mda-creme: #fff5ef;
	--mda-nuit: #001430;
	--mda-gris: #5b6472;
	--mda-bord: #e6e2de;
	--mda-titre: "Rubik", system-ui, sans-serif;
	--mda-texte: "Plus Jakarta Sans", system-ui, sans-serif;

	font-family: var(--mda-texte);
	color: var(--mda-encre);
}

.mda-container {
	width: min(1140px, 100% - 2.5rem);
	margin-inline: auto;
}

.mda-page-ville h1, .mda-page-ville h2, .mda-page-ville h3,
.mda-article-page h1, .mda-article-page h2, .mda-article-page h3 {
	font-family: var(--mda-titre);
	line-height: 1.2;
	color: var(--mda-encre);
}

.mda-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mda-section--fond { background: var(--mda-creme); }
.mda-section__titre { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 2rem; }
.mda-sous-titre { font-size: 1.15rem; margin: 2.5rem 0 1rem; }

.mda-prose { max-width: 68ch; }
.mda-prose p { line-height: 1.7; color: var(--mda-gris); margin-bottom: 1.1rem; }
.mda-prose h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 2.5rem 0 1rem; }
.mda-prose h2:first-child { margin-top: 0; }

/* Fil d'Ariane */
.mda-breadcrumb { font-size: .85rem; color: var(--mda-gris); padding-block: 1.25rem; }
.mda-breadcrumb a { color: var(--mda-bleu); text-decoration: none; }
.mda-breadcrumb a:hover { text-decoration: underline; }
.mda-breadcrumb__sep { margin-inline: .5rem; opacity: .5; }

/* Hero */
.mda-page-ville .mda-hero { background: var(--mda-creme); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.mda-page-ville .mda-hero__surtitre {
	font-family: var(--mda-titre);
	font-size: .82rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mda-bleu);
	margin-bottom: .75rem;
}
.mda-page-ville .mda-hero__titre { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 1rem; }
.mda-page-ville .mda-hero__accroche {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.65;
	color: var(--mda-gris);
	max-width: 62ch;
	margin-bottom: 2rem;
}
.mda-page-ville .mda-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Boutons */
.mda-btn {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 10px;
	font-family: var(--mda-titre);
	font-weight: 500;
	font-size: .95rem;
	text-decoration: none;
	border: 2px solid var(--mda-bleu);
	transition: background-color .2s ease, color .2s ease;
}
.mda-btn--primaire { background: var(--mda-bleu); color: #fff; }
.mda-btn--primaire:hover { background: var(--mda-bleu-clair); border-color: var(--mda-bleu-clair); color: var(--mda-nuit); }
.mda-btn--secondaire { background: transparent; color: var(--mda-bleu); }
.mda-btn--secondaire:hover { background: var(--mda-bleu); color: #fff; }

/* Grille services x ville */
.mda-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
	gap: 1.5rem;
}
.mda-service-card {
	background: #fff;
	border: 1px solid var(--mda-bord);
	border-radius: 14px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
}
.mda-service-card__titre { font-size: 1.15rem; margin-bottom: .75rem; }
.mda-service-card__texte { color: var(--mda-gris); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
.mda-service-card .mda-btn { align-self: flex-start; padding: .6rem 1.2rem; background: transparent; color: var(--mda-bleu); }
.mda-service-card .mda-btn:hover { background: var(--mda-bleu); color: #fff; }

/* Secteurs */
.mda-secteurs { display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; padding: 0; margin: 0; }
.mda-secteur {
	background: var(--mda-creme);
	border: 1px solid var(--mda-bord);
	border-radius: 999px;
	padding: .5rem 1.15rem;
	font-size: .92rem;
}
.mda-section--fond .mda-secteur { background: #fff; }

/* Zones d'intervention */
.mda-zone-intro { margin-bottom: 1rem; }
.mda-zones {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.mda-zone a {
	display: block;
	background: #fff;
	border: 1px solid var(--mda-bord);
	border-radius: 12px;
	padding: 1.15rem 1.35rem;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease;
}
.mda-zone a:hover { border-color: var(--mda-bleu); transform: translateY(-2px); }
.mda-zone__nom { display: block; font-family: var(--mda-titre); font-weight: 600; color: var(--mda-encre); }
.mda-zone__bassin { display: block; font-size: .82rem; color: var(--mda-gris); margin-top: .2rem; }
.mda-zone--proche a { border-left: 3px solid var(--mda-bleu-clair); }

/* Articles liés */
.mda-articles { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.mda-article a {
	display: block;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mda-bord);
	border-radius: 10px;
	text-decoration: none;
	color: var(--mda-encre);
	font-weight: 500;
}
.mda-article a:hover { border-color: var(--mda-bleu); color: var(--mda-bleu); }

/* CTA final */
.mda-cta { background: var(--mda-nuit); color: #fff; padding-block: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.mda-cta__titre { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .75rem; }
.mda-cta__texte { color: rgba(255, 255, 255, .8); max-width: 52ch; margin: 0 auto 1.75rem; line-height: 1.65; }
.mda-cta .mda-btn--primaire { background: var(--mda-bleu-clair); border-color: var(--mda-bleu-clair); color: var(--mda-nuit); }
.mda-cta .mda-btn--primaire:hover { background: #fff; border-color: #fff; }

/* Message d'erreur de configuration (visible en back uniquement en pratique) */
.mda-alerte {
	background: #fff4f4;
	border: 1px solid #f0c0c0;
	border-radius: 10px;
	padding: 1.25rem;
	margin-block: 2rem;
	color: #8a2b2b;
}

/* ============================================================
   Article de blog
   ============================================================ */

.mda-article-hero { background: var(--mda-creme); padding-block: clamp(2rem, 5vw, 3.5rem); }
.mda-article-hero__cat { margin-bottom: .75rem; }
.mda-article-hero__cat a {
	display: inline-block;
	background: rgba(0, 74, 173, .08);
	color: var(--mda-bleu);
	border-radius: 999px;
	padding: .35rem 1.1rem;
	font-size: .82rem;
	font-weight: 500;
	text-decoration: none;
}
.mda-article-hero__titre { font-size: clamp(1.8rem, 4.5vw, 2.75rem); margin-bottom: 1rem; max-width: 22ch; }
.mda-article-hero__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .88rem; color: var(--mda-gris); }
.mda-article-hero__maj { color: var(--mda-bleu); font-weight: 500; }

.mda-article-image { padding-block: 2rem; }
.mda-article-image img { width: 100%; height: auto; border-radius: 14px; }

.mda-article-corps { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.mda-article-contenu { max-width: 68ch; }
.mda-article-contenu h2 { scroll-margin-top: 100px; }
.mda-article-contenu h3 { scroll-margin-top: 100px; font-size: 1.2rem; margin: 2rem 0 .75rem; }
.mda-article-contenu ul, .mda-article-contenu ol { color: var(--mda-gris); line-height: 1.7; padding-left: 1.25rem; margin-bottom: 1.1rem; }
.mda-article-contenu li { margin-bottom: .4rem; }
.mda-article-contenu a { color: var(--mda-bleu); }
.mda-article-contenu table { width: 100%; border-collapse: collapse; margin-block: 1.5rem; font-size: .92rem; }
.mda-article-contenu th, .mda-article-contenu td { border: 1px solid var(--mda-bord); padding: .7rem .9rem; text-align: left; }
.mda-article-contenu th { background: var(--mda-creme); font-family: var(--mda-titre); }
.mda-article-contenu blockquote {
	border-left: 3px solid var(--mda-bleu-clair);
	background: var(--mda-creme);
	border-radius: 0 10px 10px 0;
	padding: 1rem 1.35rem;
	margin-block: 1.5rem;
}
.mda-article-contenu blockquote p:last-child { margin-bottom: 0; }

/* Sommaire ancré */
.mda-toc {
	background: var(--mda-creme);
	border-radius: 14px;
	padding: 1.5rem 1.75rem;
	margin-bottom: 2.5rem;
	max-width: 68ch;
}
.mda-toc__titre { font-family: var(--mda-titre); font-weight: 600; margin-bottom: .85rem; }
.mda-toc__liste { list-style: none; padding: 0; margin: 0; counter-reset: mda-toc; }
.mda-toc__item { margin-bottom: .45rem; line-height: 1.45; }
.mda-toc__item a { color: var(--mda-encre); text-decoration: none; }
.mda-toc__item a:hover { color: var(--mda-bleu); text-decoration: underline; }
.mda-toc__item--n2 { counter-increment: mda-toc; }
.mda-toc__item--n2 > a::before { content: counter(mda-toc) ". "; color: var(--mda-bleu); font-weight: 600; }
.mda-toc__item--n3 { padding-left: 1.5rem; font-size: .92rem; }

/* Bloc auteur (E-E-A-T) */
.mda-auteur {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	border: 1px solid var(--mda-bord);
	border-radius: 14px;
	padding: 1.5rem;
	margin-top: 3rem;
	max-width: 68ch;
}
.mda-auteur__avatar img { border-radius: 50%; display: block; }
.mda-auteur__nom { font-family: var(--mda-titre); font-weight: 600; font-size: 1.05rem; }
.mda-auteur__fonction { color: var(--mda-bleu); font-size: .88rem; margin-bottom: .5rem; }
.mda-auteur__bio { color: var(--mda-gris); line-height: 1.6; font-size: .92rem; margin-bottom: .5rem; }
.mda-auteur__lien a { color: var(--mda-bleu); font-size: .88rem; }

@media (max-width: 540px) {
	.mda-auteur { flex-direction: column; }
}

/* ============================================================
   Bloc de maillage injecté en fin de page ville (design Elementor conservé)
   ============================================================ */

.mda-maillage {
	--mda-bleu: #004aad;
	--mda-bleu-clair: #38b6ff;
	--mda-encre: #111827;
	--mda-creme: #fff5ef;
	--mda-gris: #5b6472;
	--mda-bord: #e6e2de;
	--mda-titre: "Rubik", system-ui, sans-serif;
	--mda-texte: "Plus Jakarta Sans", system-ui, sans-serif;

	font-family: var(--mda-texte);
	color: var(--mda-encre);
	padding-block: clamp(2.5rem, 6vw, 4rem);
	background: var(--mda-creme);
}
.mda-maillage h2, .mda-maillage h3 { font-family: var(--mda-titre); line-height: 1.2; color: var(--mda-encre); }
.mda-maillage .mda-section__titre { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1.75rem; }
.mda-maillage__titre-2 { margin-top: 3rem; }
.mda-maillage .mda-service-card { background: #fff; }
.mda-maillage .mda-zone a { background: #fff; }

/* ============================================================
   Correctifs de contraste au survol
   Le kit Elementor impose `.elementor-kit-35 a:hover { color:#38B6FF }`.
   Sur un fond blanc, ce bleu clair tombe à 2,26 de contraste, illisible
   (le seuil WCAG AA est de 4,5). On reprend donc la main explicitement sur
   tous les liens du bloc, avec une specificite suffisante.
   ============================================================ */

/* Cartes ville : au survol, fond bleu foncé et textes blancs (contraste 8,1) */
.mda-maillage .mda-zone a:hover,
.mda-maillage .mda-zone a:focus-visible {
	background: var(--mda-bleu);
	border-color: var(--mda-bleu);
	color: #fff;
}
.mda-maillage .mda-zone a:hover .mda-zone__nom,
.mda-maillage .mda-zone a:hover .mda-zone__bassin,
.mda-maillage .mda-zone a:focus-visible .mda-zone__nom,
.mda-maillage .mda-zone a:focus-visible .mda-zone__bassin {
	color: #fff;
}

/* Boutons de carte service : on verrouille les deux états */
.mda-maillage .mda-service-card .mda-btn:hover,
.mda-maillage .mda-service-card .mda-btn:focus-visible {
	background: var(--mda-bleu);
	border-color: var(--mda-bleu);
	color: #fff;
}

/* Liens d'articles */
.mda-maillage .mda-article a:hover,
.mda-maillage .mda-article a:focus-visible {
	background: var(--mda-bleu);
	border-color: var(--mda-bleu);
	color: #fff;
}

/* Visibilité du focus clavier */
.mda-maillage a:focus-visible {
	outline: 3px solid var(--mda-nuit);
	outline-offset: 2px;
}

/* ============================================================
   Bloc prise de rendez-vous
   ============================================================ */

.mda-rdv {
	margin-top: 3rem;
	background: var(--mda-nuit);
	border-radius: 16px;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	text-align: center;
}
.mda-rdv__titre {
	font-family: var(--mda-titre);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.5vw, 1.5rem);
	color: #fff;
	margin-bottom: .5rem;
}
.mda-rdv__texte {
	color: rgba(255, 255, 255, .82);
	max-width: 46ch;
	margin: 0 auto 1.5rem;
	line-height: 1.6;
}
.mda-rdv__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	justify-content: center;
}

/* Action principale : bleu clair sur fond nuit (contraste 8,6) */
.mda-maillage .mda-btn--rdv {
	background: var(--mda-bleu-clair);
	border-color: var(--mda-bleu-clair);
	color: var(--mda-nuit);
	font-weight: 600;
}
.mda-maillage .mda-btn--rdv:hover,
.mda-maillage .mda-btn--rdv:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--mda-nuit);
}

/* Action secondaire : contour blanc sur fond nuit */
.mda-maillage .mda-btn--devis {
	background: transparent;
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}
.mda-maillage .mda-btn--devis:hover,
.mda-maillage .mda-btn--devis:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--mda-nuit);
}

/* ------------------------------------------------------------
   Verrouillage des couleurs au survol.
   `.elementor-kit-35 a:hover { color:#38B6FF }` s'applique a TOUS les liens
   du site. Sur nos fonds clairs le texte devenait illisible (2,26 de
   contraste). On ne peut pas desactiver cette regle globale sans toucher au
   kit, donc on impose nos couleurs sur nos composants uniquement.
   ------------------------------------------------------------ */

.mda-maillage .mda-btn:hover,
.mda-maillage .mda-btn:focus-visible,
.mda-maillage .mda-service-card .mda-btn:hover,
.mda-maillage .mda-service-card .mda-btn:focus-visible {
	background: var(--mda-bleu) !important;
	border-color: var(--mda-bleu) !important;
	color: #fff !important;
}

.mda-maillage .mda-zone a:hover,
.mda-maillage .mda-zone a:focus-visible,
.mda-maillage .mda-article a:hover,
.mda-maillage .mda-article a:focus-visible {
	background: var(--mda-bleu) !important;
	border-color: var(--mda-bleu) !important;
	color: #fff !important;
}
.mda-maillage .mda-zone a:hover .mda-zone__nom,
.mda-maillage .mda-zone a:hover .mda-zone__bassin,
.mda-maillage .mda-zone a:focus-visible .mda-zone__nom,
.mda-maillage .mda-zone a:focus-visible .mda-zone__bassin {
	color: #fff !important;
}

/* Le bloc rendez-vous est sur fond nuit : ses boutons s'inversent en blanc. */
.mda-maillage .mda-rdv .mda-btn--rdv,
.mda-maillage .mda-rdv .mda-btn--devis {
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mda-maillage .mda-rdv .mda-btn--rdv {
	background: var(--mda-bleu-clair) !important;
	border-color: var(--mda-bleu-clair) !important;
	color: var(--mda-nuit) !important;
}
.mda-maillage .mda-rdv .mda-btn--devis {
	background: transparent !important;
	border-color: rgba(255, 255, 255, .65) !important;
	color: #fff !important;
}
.mda-maillage .mda-rdv .mda-btn--rdv:hover,
.mda-maillage .mda-rdv .mda-btn--rdv:focus-visible,
.mda-maillage .mda-rdv .mda-btn--devis:hover,
.mda-maillage .mda-rdv .mda-btn--devis:focus-visible {
	background: #fff !important;
	border-color: #fff !important;
	color: var(--mda-nuit) !important;
}

/* ============================================================
   Comparatif des types de prestataires
   ============================================================ */

.mda-tc-wrap { --mda-bleu:#004aad; --mda-encre:#111827; --mda-creme:#fff5ef; --mda-gris:#5b6472; --mda-bord:#e6e2de;
	--mda-titre:"Rubik",system-ui,sans-serif; --mda-texte:"Plus Jakarta Sans",system-ui,sans-serif;
	font-family: var(--mda-texte); overflow-x: auto; margin-block: 1.5rem; }
.mda-tc { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .92rem; }
.mda-tc caption { font-family: var(--mda-titre); font-weight: 600; font-size: 1.05rem;
	text-align: left; color: var(--mda-encre); padding-bottom: .9rem; }
.mda-tc th, .mda-tc td { border: 1px solid var(--mda-bord); padding: .8rem .9rem;
	text-align: left; vertical-align: top; color: var(--mda-gris); line-height: 1.55; }
.mda-tc thead th { background: var(--mda-bleu); color: #fff; font-family: var(--mda-titre);
	font-weight: 600; border-color: var(--mda-bleu); }
.mda-tc tbody th { background: var(--mda-creme); color: var(--mda-encre);
	font-family: var(--mda-titre); font-weight: 600; width: 20%; }
.mda-tc__ex { display: block; font-family: var(--mda-texte); font-weight: 400;
	font-size: .82rem; color: var(--mda-gris); margin-top: .2rem; }
.mda-tc__budget { white-space: nowrap; font-weight: 500; color: var(--mda-encre); }
.mda-tc tbody tr:nth-child(3) th { background: var(--mda-bleu); color: #fff; border-color: var(--mda-bleu); }
.mda-tc tbody tr:nth-child(3) th .mda-tc__ex { color: rgba(255,255,255,.85); }
.mda-tc__note { font-size: .88rem; color: var(--mda-gris); font-style: italic; margin-top: .75rem; }

/* ============================================================
   Article de blog, blocs injectés en fin de contenu
   ============================================================ */

.mda-article-extras {
	--mda-bleu:#004aad; --mda-bleu-clair:#38b6ff; --mda-encre:#111827;
	--mda-creme:#fff5ef; --mda-nuit:#001430; --mda-gris:#5b6472; --mda-bord:#e6e2de;
	--mda-titre:"Rubik",system-ui,sans-serif; --mda-texte:"Plus Jakarta Sans",system-ui,sans-serif;
	font-family: var(--mda-texte);
	color: var(--mda-encre);
	padding-block: clamp(2rem, 5vw, 3.5rem);
	background: var(--mda-creme);
}
.mda-article-extras h2 { font-family: var(--mda-titre); line-height: 1.2; color: var(--mda-encre); }
.mda-extras__titre { font-size: clamp(1.3rem, 3vw, 1.75rem); margin: 2.5rem 0 1.5rem; }

/* Date de mise à jour : signal de fraîcheur */
.mda-maj {
	display: inline-block;
	background: rgba(0, 74, 173, .08);
	color: var(--mda-bleu);
	border-radius: 999px;
	padding: .4rem 1.1rem;
	font-size: .85rem;
	font-weight: 500;
	margin-bottom: 1.75rem;
}

/* Signature auteur */
.mda-auteur {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
	background: #fff;
	border: 1px solid var(--mda-bord);
	border-radius: 14px;
	padding: 1.5rem;
}
.mda-auteur__avatar img { border-radius: 50%; display: block; width: 72px; height: 72px; }
.mda-auteur__label {
	font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
	color: var(--mda-gris); margin-bottom: .15rem;
}
.mda-auteur__nom { font-family: var(--mda-titre); font-weight: 600; font-size: 1.1rem; }
.mda-auteur__fonction { color: var(--mda-bleu); font-size: .9rem; margin-bottom: .6rem; }
.mda-auteur__bio { color: var(--mda-gris); line-height: 1.6; font-size: .93rem; margin-bottom: .5rem; }
.mda-auteur__lien a { color: var(--mda-bleu); font-size: .89rem; font-weight: 500; }

/* Articles liés */
.mda-article-extras .mda-articles { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.mda-article-extras .mda-article a {
	display: block; background: #fff; padding: 1rem 1.25rem;
	border: 1px solid var(--mda-bord); border-radius: 10px;
	text-decoration: none; color: var(--mda-encre); font-weight: 500;
}
.mda-article-extras .mda-article a:hover,
.mda-article-extras .mda-article a:focus-visible {
	background: var(--mda-bleu) !important;
	border-color: var(--mda-bleu) !important;
	color: #fff !important;
}

/* Appel à l'action : mêmes règles de contraste que sur les pages villes */
.mda-article-extras .mda-rdv { margin-top: 2.5rem; }
.mda-article-extras .mda-btn {
	display: inline-block; padding: .8rem 1.6rem; border-radius: 10px;
	font-family: var(--mda-titre); font-weight: 500; font-size: .95rem;
	text-decoration: none; border: 2px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mda-article-extras .mda-btn--rdv {
	background: var(--mda-bleu-clair) !important;
	border-color: var(--mda-bleu-clair) !important;
	color: var(--mda-nuit) !important;
	font-weight: 600;
}
.mda-article-extras .mda-btn--devis {
	background: transparent !important;
	border-color: rgba(255,255,255,.65) !important;
	color: #fff !important;
}
.mda-article-extras .mda-btn--rdv:hover,
.mda-article-extras .mda-btn--rdv:focus-visible,
.mda-article-extras .mda-btn--devis:hover,
.mda-article-extras .mda-btn--devis:focus-visible {
	background: #fff !important; border-color: #fff !important; color: var(--mda-nuit) !important;
}
.mda-article-extras a:focus-visible { outline: 3px solid var(--mda-nuit); outline-offset: 2px; }

@media (max-width: 540px) {
	.mda-auteur { flex-direction: column; }
}

/* Sommaire automatique des articles */
.mda-toc {
	--mda-bleu:#004aad; --mda-encre:#111827; --mda-creme:#fff5ef;
	--mda-gris:#5b6472; --mda-titre:"Rubik",system-ui,sans-serif;
	background: var(--mda-creme); border-radius: 14px;
	padding: 1.5rem 1.75rem; margin-block: 2rem; max-width: 70ch;
}
.mda-toc__titre { font-family: var(--mda-titre); font-weight: 600; font-size: 1.05rem; margin-bottom: .9rem; color: var(--mda-encre); }
.mda-toc__liste { list-style: none; padding: 0; margin: 0; counter-reset: mda-toc; }
.mda-toc__item { margin-bottom: .45rem; line-height: 1.45; }
.mda-toc__item a { color: var(--mda-encre); text-decoration: none; }
.mda-toc__item a:hover, .mda-toc__item a:focus-visible { color: var(--mda-bleu) !important; text-decoration: underline; }
.mda-toc__item--n2 { counter-increment: mda-toc; font-weight: 500; }
.mda-toc__item--n2 > a::before { content: counter(mda-toc) ". "; color: var(--mda-bleu); font-weight: 600; }
.mda-toc__item--n3 { padding-left: 1.6rem; font-size: .92rem; }
.mda-toc__item--n3 > a::before { content: "· "; color: var(--mda-gris); }
h2[id], h3[id] { scroll-margin-top: 110px; }

/* Photo d'auteur hébergée localement */
.mda-auteur__avatar img { border-radius: 50%; display: block; width: 72px; height: 72px; object-fit: cover; }

/* ============================================================
   Sommaire repliable
   Replié par défaut : sur une page longue, un sommaire ouvert mange le
   premier écran. Les liens restent dans le HTML servi, donc explorables.
   ============================================================ */
.mda-toc-wrap { width: min(1140px, 100% - 2.5rem); margin: 2rem auto 0; }
.mda-toc {
	background: var(--mda-creme); border: 1px solid var(--mda-bord);
	border-radius: 14px; padding: 0; margin: 0; max-width: none;
}
.mda-toc__titre {
	display: flex; align-items: center; gap: .75rem; cursor: pointer;
	list-style: none; padding: 1rem 1.25rem; margin: 0;
	font-family: var(--mda-titre); font-weight: 600; font-size: 1rem;
}
.mda-toc__titre::-webkit-details-marker { display: none; }
.mda-toc__titre:focus-visible { outline: 3px solid var(--mda-bleu-clair); outline-offset: -3px; border-radius: 14px; }
.mda-toc__compte { font-family: var(--mda-texte); font-weight: 400; font-size: .85rem; color: var(--mda-gris); }
.mda-toc__titre::after {
	content: ""; margin-left: auto; width: 9px; height: 9px;
	border-right: 2px solid var(--mda-bleu); border-bottom: 2px solid var(--mda-bleu);
	transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease;
}
.mda-toc[open] .mda-toc__titre::after { transform: rotate(225deg) translate(-2px, -2px); }
.mda-toc__liste { padding: 0 1.25rem 1.25rem; columns: 2; column-gap: 2.5rem; }
.mda-toc__item { break-inside: avoid; }
@media (max-width: 760px) { .mda-toc__liste { columns: 1; } }

/* ============================================================
   Pages de service : mise en page par sections
   Reprend le rythme des pages construites avec Elementor (bandeaux pleine
   largeur, alternance de fonds, cartes, illustrations) tout en étant produit
   automatiquement à partir d'un contenu rédigé en HTML simple.
   ============================================================ */
.mda-page-service {
	--mda-bleu:#004aad; --mda-bleu-clair:#38b6ff; --mda-encre:#111827;
	--mda-creme:#fff5ef; --mda-nuit:#001430; --mda-gris:#5b6472; --mda-bord:#e6e2de;
	--mda-titre:"Rubik",system-ui,sans-serif; --mda-texte:"Plus Jakarta Sans",system-ui,sans-serif;
	--mda-ombre: 0 14px 34px rgba(0,20,48,.09);
	font-family: var(--mda-texte); color: var(--mda-encre);
}
.mda-page-service h1, .mda-page-service h2,
.mda-page-service h3, .mda-page-service h4 {
	font-family: var(--mda-titre); line-height: 1.22; color: var(--mda-encre);
}

/* --- Bandeaux --- */
.mda-page-service .mda-band { padding-block: clamp(2.75rem, 6.5vw, 5rem); }
.mda-page-service .mda-band--blanc { background: #fff; }
.mda-page-service .mda-band--clair { background: var(--mda-creme); }
.mda-page-service .mda-band--degrade { background: linear-gradient(158deg, #fff5ef 0%, #e9f2ff 100%); }
.mda-page-service .mda-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin: 0 0 1.1rem; }
.mda-page-service .mda-band h3 { font-size: clamp(1.1rem, 2.1vw, 1.32rem); margin: 0 0 .6rem; }
.mda-page-service .mda-band p { line-height: 1.75; color: var(--mda-gris); margin: 0 0 1.05rem; }
.mda-page-service .mda-band p:last-child { margin-bottom: 0; }
.mda-page-service .mda-band ul, .mda-page-service .mda-band ol {
	color: var(--mda-gris); line-height: 1.7; padding-left: 1.25rem; margin: 0 0 1.2rem;
}
.mda-page-service .mda-band li { margin-bottom: .45rem; }
.mda-page-service .mda-band a { color: var(--mda-bleu); }
.mda-page-service .mda-band strong { color: var(--mda-encre); font-weight: 600; }
.mda-page-service .mda-band__entete { max-width: 68ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.mda-page-service .mda-band__chapo p { font-size: 1.03rem; }
.mda-page-service .mda-texte { max-width: 72ch; overflow-x: auto; }
.mda-page-service .mda-figure { margin: 0; }

/* --- Bandeau de titre ---
   Le degrade est porte par le <body>, pas par le bandeau : l'en-tete Elementor
   flotte au-dessus du contenu dans son propre conteneur, et un degrade pose sur
   le seul bandeau laissait au-dessus de lui une bande blanche de la hauteur de
   l'en-tete. Sur le body, la couleur court derriere l'en-tete et le haut de
   page devient continu. */
body.page-template-template-service {
	background-color: #fff;
	background-image: linear-gradient(158deg, #fff5ef 0%, #e9f2ff 44%, #ffffff 74%);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 900px;
}
.mda-page-service .mda-band--hero {
	background: transparent;
	padding-block: clamp(3.5rem, 7vw, 7.5rem) clamp(2.75rem, 6.5vw, 4.5rem);
}
.mda-page-service .mda-hero {
	display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.mda-page-service .mda-hero .mda-breadcrumb { padding-block: 1rem .5rem; }
.mda-page-service .mda-hero__surtitre {
	font-family: var(--mda-titre); font-size: .8rem; letter-spacing: .09em;
	text-transform: uppercase; color: var(--mda-bleu); margin: 0 0 .85rem; font-weight: 600;
}
.mda-page-service .mda-hero__titre {
	font-size: clamp(2.1rem, 4.1vw, 3.4rem); margin: 0 0 1.15rem;
	letter-spacing: -.015em; text-wrap: balance;
}
.mda-page-service .mda-accent {
	background: linear-gradient(94deg, #004aad 8%, #1f8fdd 92%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
.mda-page-service .mda-accent { color: var(--mda-bleu); -webkit-text-fill-color: currentColor; }
}
.mda-page-service .mda-h1__suite {
	display: block; font-size: .38em; font-weight: 400; line-height: 1.5;
	color: var(--mda-gris); margin-top: .75rem; max-width: 30ch;
	font-family: var(--mda-texte); letter-spacing: 0;
}
.mda-page-service .mda-hero__accroche {
	font-size: clamp(1rem, 1.9vw, 1.12rem); line-height: 1.7;
	color: var(--mda-gris); max-width: 58ch; margin: 0 0 2rem;
}
.mda-page-service .mda-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; }
.mda-page-service .mda-hero__media img {
	display: block; width: 100%; height: auto; max-height: 400px;
	object-fit: cover; border-radius: 22px; box-shadow: var(--mda-ombre);
}

/* --- Réassurance --- */
.mda-page-service .mda-band--preuve {
	background: transparent;
	padding-block: clamp(1.75rem, 4vw, 2.6rem) clamp(2.25rem, 5vw, 3.25rem);
}
.mda-page-service .mda-preuves {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(1.5rem, 5vw, 4rem); list-style: none; padding: 0; margin: 0 0 2rem;
}
.mda-page-service .mda-preuve { text-align: center; margin: 0; }
.mda-page-service .mda-preuve strong {
	display: block; font-family: var(--mda-titre); line-height: 1;
	font-size: clamp(1.6rem, 3.2vw, 2.15rem); color: var(--mda-bleu);
}
.mda-page-service .mda-preuve span { font-size: .87rem; color: var(--mda-gris); }
.mda-page-service .mda-logos__titre {
	text-align: center; font-size: .75rem; letter-spacing: .11em; text-transform: uppercase;
	color: var(--mda-gris); margin: 0 0 1.1rem;
}
.mda-page-service .mda-logos {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: clamp(1.25rem, 4vw, 2.75rem);
}
.mda-page-service .mda-logos__item img {
	max-height: 46px; width: auto; max-width: 132px; object-fit: contain;
	filter: grayscale(1) contrast(1.15); opacity: .82;
	transition: filter .25s ease, opacity .25s ease;
}
.mda-page-service .mda-logos__item:hover img { filter: none; opacity: 1; }

/* --- Texte + illustration --- */
.mda-split {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
	gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.mda-split--inverse { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
.mda-split--inverse .mda-split__texte { order: 2; }
.mda-split__media { display: flex; justify-content: center; align-items: center; }
.mda-split__media img {
	display: block; width: auto; max-width: 100%; height: auto; max-height: 360px;
	border-radius: 16px; box-shadow: 0 14px 34px rgba(0,20,48,.12);
}

/* --- Cartes --- */
.mda-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(278px, 1fr)); gap: 1.5rem; }
.mda-carte {
	display: flex; flex-direction: column; background: #fff;
	border: 1px solid var(--mda-bord); border-radius: 18px; padding: 1.6rem;
	box-shadow: 0 10px 26px rgba(0,20,48,.05);
	transition: transform .2s ease, box-shadow .2s ease;
}
.mda-carte:hover { transform: translateY(-3px); box-shadow: var(--mda-ombre); }
.mda-carte__media { margin: -1.6rem -1.6rem 1.3rem; }
.mda-carte__media {
	background: linear-gradient(160deg, #f2f7ff 0%, #e6f0ff 100%);
	border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--mda-bord);
}
.mda-carte__media img {
	display: block; width: 100%; height: 168px; object-fit: contain;
	padding: .9rem; border-radius: 18px 18px 0 0;
}
.mda-carte__corps p, .mda-carte__corps li { font-size: .95rem; }

/* --- Étapes numérotées --- */
.mda-etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.15rem; }
.mda-etape {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.3rem;
	align-items: start; background: #fff; border: 1px solid var(--mda-bord);
	border-radius: 18px; padding: 1.5rem 1.7rem; margin: 0;
}
.mda-etape__num {
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, #004aad, #38b6ff); color: #fff;
	font-family: var(--mda-titre); font-weight: 600; font-size: 1.08rem;
}
.mda-etape__corps p:last-child { margin-bottom: 0; }

/* --- Accordéon de FAQ --- */
.mda-faq { display: grid; gap: .7rem; max-width: 80ch; }
.mda-faq__item {
	background: #fff; border: 1px solid var(--mda-bord);
	border-radius: 14px; overflow: hidden;
}
.mda-faq__item summary {
	list-style: none; cursor: pointer; position: relative;
	padding: 1.05rem 3.1rem 1.05rem 1.35rem;
}
.mda-faq__item summary::-webkit-details-marker { display: none; }
.mda-faq__item summary:focus-visible { outline: 3px solid var(--mda-bleu-clair); outline-offset: -3px; }
.mda-page-service .mda-faq__q { display: inline; font-size: 1.02rem; margin: 0; }
.mda-faq__item summary::after {
	content: ""; position: absolute; right: 1.35rem; top: 50%;
	width: 9px; height: 9px;
	border-right: 2px solid var(--mda-bleu); border-bottom: 2px solid var(--mda-bleu);
	transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.mda-faq__item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.mda-faq__r { padding: 0 1.35rem 1.3rem; }

/* --- Avis clients --- */
.mda-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 1.25rem; }
.mda-avis__item {
	background: #fff; border: 1px solid var(--mda-bord); border-radius: 18px;
	padding: 1.5rem; margin: 0;
}
.mda-avis__etoiles { color: #f4a72c; letter-spacing: .14em; margin: 0 0 .8rem !important; font-size: 1rem; }
.mda-avis__item p { font-size: .95rem; font-style: italic; }

/* --- Rappel de prise de rendez-vous --- */
.mda-page-service .mda-band--rdv {
	background: linear-gradient(135deg, #004aad 0%, #0a6fd8 100%);
	padding-block: clamp(2rem, 4.5vw, 3rem);
}
.mda-rdv-milieu {
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 1.5rem 2.5rem;
}
.mda-rdv-milieu__titre {
	font-family: var(--mda-titre); font-weight: 600; color: #fff !important;
	font-size: clamp(1.15rem, 2.3vw, 1.5rem); margin: 0 0 .4rem !important;
}
.mda-rdv-milieu__sec { color: rgba(255,255,255,.86) !important; max-width: 56ch; font-size: .95rem; margin: 0 !important; }
.mda-rdv-milieu__actions { margin: 0 !important; }

/* --- Appel à l'action final --- */
.mda-page-service .mda-band--sombre { background: var(--mda-nuit); }
.mda-page-service .mda-band--sombre h2,
.mda-page-service .mda-band--sombre h3 { color: #fff; }
.mda-page-service .mda-band--sombre p { color: rgba(255,255,255,.82); }
.mda-page-service .mda-band--sombre strong { color: #fff; }
.mda-page-service .mda-band--sombre a:not(.mda-btn) { color: var(--mda-bleu-clair); }
.mda-cta-bloc {
	display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
.mda-cta-bloc__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0 !important; }
.mda-cta-bloc__media {
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
	border-radius: 20px; overflow: hidden;
}
.mda-cta-bloc__media img {
	display: block; width: 100%; height: auto; max-height: 340px;
	object-fit: contain; border-radius: 20px;
}

/* --- Boutons ---
   Le kit Elementor impose `a:hover { color:#38B6FF }` sur tout le site, ce qui
   rendait le libellé illisible sur un bouton plein. On verrouille donc les
   couleurs des états au survol et au focus. */
.mda-page-service .mda-btn {
	display: inline-block; padding: .82rem 1.65rem; border-radius: 10px;
	font-family: var(--mda-titre); font-weight: 500; font-size: .95rem;
	text-decoration: none; border: 2px solid var(--mda-bleu);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mda-page-service .mda-btn--primaire { background: var(--mda-bleu); color: #fff !important; }
.mda-page-service .mda-btn--primaire:hover,
.mda-page-service .mda-btn--primaire:focus-visible {
	background: var(--mda-bleu-clair) !important; border-color: var(--mda-bleu-clair) !important; color: var(--mda-nuit) !important;
}
.mda-page-service .mda-btn--secondaire { background: transparent; color: var(--mda-bleu) !important; }
.mda-page-service .mda-btn--secondaire:hover,
.mda-page-service .mda-btn--secondaire:focus-visible {
	background: var(--mda-bleu) !important; border-color: var(--mda-bleu) !important; color: #fff !important;
}
.mda-page-service .mda-band--rdv .mda-btn--primaire { background: #fff; border-color: #fff; color: var(--mda-nuit) !important; }
.mda-page-service .mda-band--rdv .mda-btn--primaire:hover,
.mda-page-service .mda-band--rdv .mda-btn--primaire:focus-visible {
	background: var(--mda-bleu-clair) !important; border-color: var(--mda-bleu-clair) !important; color: var(--mda-nuit) !important;
}
.mda-page-service .mda-band--sombre .mda-btn--primaire { background: var(--mda-bleu-clair); border-color: var(--mda-bleu-clair); color: var(--mda-nuit) !important; }
.mda-page-service .mda-band--sombre .mda-btn--primaire:hover,
.mda-page-service .mda-band--sombre .mda-btn--primaire:focus-visible {
	background: #fff !important; border-color: #fff !important; color: var(--mda-nuit) !important;
}
.mda-page-service .mda-band--sombre .mda-btn--secondaire { color: #fff !important; border-color: rgba(255,255,255,.55); }
.mda-page-service .mda-band--sombre .mda-btn--secondaire:hover,
.mda-page-service .mda-band--sombre .mda-btn--secondaire:focus-visible {
	background: #fff !important; border-color: #fff !important; color: var(--mda-nuit) !important;
}
.mda-page-service .mda-btn:focus-visible { outline: 3px solid var(--mda-bleu-clair); outline-offset: 3px; }

/* --- Tableaux --- */
.mda-page-service .mda-band table {
	width: 100%; border-collapse: collapse; margin-block: 1.5rem;
	font-size: .93rem; background: #fff;
}
.mda-page-service .mda-band th, .mda-page-service .mda-band td {
	border: 1px solid var(--mda-bord); padding: .8rem .95rem; text-align: left; vertical-align: top;
}
.mda-page-service .mda-band thead th {
	background: var(--mda-bleu); color: #fff; border-color: var(--mda-bleu); font-family: var(--mda-titre);
}
.mda-page-service .mda-band blockquote {
	border-left: 3px solid var(--mda-bleu-clair); background: var(--mda-creme);
	border-radius: 0 10px 10px 0; padding: 1.1rem 1.4rem; margin-block: 1.6rem;
}
.mda-encadre { background: var(--mda-creme); border-radius: 12px; padding: 1.25rem 1.5rem; margin-block: 1.75rem; }
.mda-encadre p:last-child { margin-bottom: 0; }

/* --- Adaptation aux petits écrans --- */
@media (max-width: 900px) {
	body.page-template-template-service { background-size: 100% 1180px; }
	.mda-hero, .mda-split, .mda-cta-bloc { grid-template-columns: 1fr; }
	.mda-split--inverse .mda-split__texte { order: 0; }
	.mda-hero__media img, .mda-split__media img, .mda-cta-bloc__media img { max-height: 320px; }
	.mda-rdv-milieu { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
	.mda-etape { grid-template-columns: 1fr; gap: .9rem; padding: 1.3rem; }
	.mda-carte { padding: 1.3rem; }
	.mda-carte__media { margin: -1.3rem -1.3rem 1.1rem; }
	.mda-preuves { gap: 1.25rem 2rem; }
}

.mda-page-service .mda-avis__conclusion { max-width: 68ch; margin-top: clamp(1.5rem, 3vw, 2rem); }

/* --- Section libre : accueille un widget tiers (avis Trustindex, carte, formulaire)
   sur toute la largeur, tout en gardant les paragraphes a une longueur lisible. --- */
.mda-page-service .mda-libre { width: 100%; }
.mda-page-service .mda-libre > p { max-width: 68ch; }
.mda-page-service .mda-libre .ti-widget { margin-block: clamp(1.5rem, 3vw, 2.25rem); }