/*!
Theme Name: Mon Courtier Auto
Theme URI: https://moncourtierauto.com/
Author: Trystan Danylo
Description: Thème sur mesure pour moncourtierauto.com — spécialistes en financement automobile. Construit à partir de la maquette « Refonte site moncourtierauto.com ». Tous les jetons de design sont définis dans theme.json.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mon-courtier-auto
Tags: business, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Alias des jetons
   --------------------------------------------------------------------------
   theme.json est la source de vérité. WordPress en génère les variables
   --wp--custom--*. On les ré-expose ici sous des noms courts, avec la valeur
   littérale en repli : si un plugin retire les global styles, le thème
   s'affiche quand même correctement.
   ========================================================================== */

:root {
	/* Marque */
	--mca-brand:            var(--wp--custom--color--brand, #2b5cff);
	--mca-brand-dark:       var(--wp--custom--color--brand-dark, #1c3aa8);
	--mca-brand-light:      var(--wp--custom--color--brand-light, #4d76ff);
	--mca-brand-soft:       var(--wp--custom--color--brand-soft, #7aa2ff);
	--mca-brand-tint:       var(--wp--custom--color--brand-tint, #e2ebff);
	--mca-brand-tint-alt:   var(--wp--custom--color--brand-tint-alt, #e7eeff);
	--mca-brand-wash:       var(--wp--custom--color--brand-wash, #f2f6ff);
	--mca-brand-wash-alt:   var(--wp--custom--color--brand-wash-alt, #eaf0ff);
	--mca-brand-wash-cta:   var(--wp--custom--color--brand-wash-cta, #eef2fe);
	--mca-on-brand:         var(--wp--custom--color--on-brand, #d5e0ff);

	/* Encre */
	--mca-ink:              var(--wp--custom--color--ink, #131a2b);
	--mca-ink-strong:       var(--wp--custom--color--ink-strong, #2a3346);
	--mca-ink-body:         var(--wp--custom--color--ink-body, #3a445a);
	--mca-ink-lead:         var(--wp--custom--color--ink-lead, #4a5468);
	--mca-ink-muted:        var(--wp--custom--color--ink-muted, #5a6478);
	--mca-ink-subtle:       var(--wp--custom--color--ink-subtle, #6b7488);
	--mca-ink-faint:        var(--wp--custom--color--ink-faint, #8a93a6);
	--mca-ink-placeholder:  var(--wp--custom--color--ink-placeholder, #9aa4ba);

	/* Marine */
	--mca-navy:             var(--wp--custom--color--navy, #0f1b38);
	--mca-navy-deep:        var(--wp--custom--color--navy-deep, #0b1428);
	--mca-navy-card:        var(--wp--custom--color--navy-card, #16244a);
	--mca-navy-border:      var(--wp--custom--color--navy-border, #22315c);
	--mca-navy-border-soft: var(--wp--custom--color--navy-border-soft, #1c2942);
	--mca-on-navy-label:    var(--wp--custom--color--on-navy-label, #8fa3d6);
	--mca-on-navy-muted:    var(--wp--custom--color--on-navy-muted, #9fb0d6);
	--mca-on-navy-soft:     var(--wp--custom--color--on-navy-soft, #b9c6e8);
	--mca-on-navy-text:     var(--wp--custom--color--on-navy-text, #dbe3f5);

	/* Pied de page */
	--mca-footer-text:      var(--wp--custom--color--footer-text, #c3cbdd);
	--mca-footer-muted:     var(--wp--custom--color--footer-muted, #98a2ba);
	--mca-footer-faint:     var(--wp--custom--color--footer-faint, #8794ad);
	--mca-footer-bottom:    var(--wp--custom--color--footer-bottom, #7f8aa3);

	/* Surfaces et bordures */
	--mca-surface:          var(--wp--custom--color--surface, #ffffff);
	--mca-surface-alt:      var(--wp--custom--color--surface-alt, #f6f8fd);
	--mca-border-header:    var(--wp--custom--color--border-header, #e9ecf4);
	--mca-border-card:      var(--wp--custom--color--border-card, #eaedf5);
	--mca-border-chip:      var(--wp--custom--color--border-chip, #e8ecf5);
	--mca-border-menu:      var(--wp--custom--color--border-menu, #eef0f5);
	--mca-border-menu-item: var(--wp--custom--color--border-menu-item, #f0f2f7);
	--mca-border-button:    var(--wp--custom--color--border-button, #d6ddec);
	--mca-border-field:     var(--wp--custom--color--border-field, #dce2ee);
	--mca-star:             var(--wp--custom--color--star, #f5a623);

	/* Dégradés */
	--mca-grad-hero:  var(--wp--preset--gradient--hero-wash, linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%));
	--mca-grad-brand: var(--wp--preset--gradient--brand-diagonal, linear-gradient(120deg, #2b5cff 0%, #1c3aa8 100%));

	/* Typographie */
	--mca-font-display: var(--wp--preset--font-family--display, 'Outfit', system-ui, sans-serif);
	--mca-font-body:    var(--wp--preset--font-family--body, 'Manrope', system-ui, sans-serif);
	--mca-font-mono:    var(--wp--preset--font-family--mono, 'SF Mono', ui-monospace, monospace);

	--mca-fw-normal:    var(--wp--custom--font--weight-body, 400);
	--mca-fw-medium:    var(--wp--custom--font--weight-medium, 500);
	--mca-fw-semibold:  var(--wp--custom--font--weight-semibold, 600);
	--mca-fw-bold:      var(--wp--custom--font--weight-bold, 700);
	--mca-fw-black:     var(--wp--custom--font--weight-black, 800);

	--mca-leading-tight:   var(--wp--custom--font--leading-tight, 1.08);
	--mca-leading-heading: var(--wp--custom--font--leading-heading, 1.12);
	--mca-leading-snug:    var(--wp--custom--font--leading-snug, 1.25);
	--mca-leading-body:    var(--wp--custom--font--leading-body, 1.55);

	--mca-track-tight:   var(--wp--custom--font--tracking-tight, -0.02em);
	--mca-track-tighter: var(--wp--custom--font--tracking-tighter, -0.03em);
	--mca-track-wide:    var(--wp--custom--font--tracking-wide, 0.06em);
	--mca-track-wider:   var(--wp--custom--font--tracking-wider, 0.08em);

	/* Espacement — échelle réelle de la maquette (voir README) */
	--mca-s1:  var(--wp--custom--space--1, 1px);
	--mca-s2:  var(--wp--custom--space--2, 2px);
	--mca-s4:  var(--wp--custom--space--4, 4px);
	--mca-s6:  var(--wp--custom--space--6, 6px);
	--mca-s7:  var(--wp--custom--space--7, 7px);
	--mca-s8:  var(--wp--custom--space--8, 8px);
	--mca-s9:  var(--wp--custom--space--9, 9px);
	--mca-s10: var(--wp--custom--space--10, 10px);
	--mca-s11: var(--wp--custom--space--11, 11px);
	--mca-s12: var(--wp--custom--space--12, 12px);
	--mca-s13: var(--wp--custom--space--13, 13px);
	--mca-s14: var(--wp--custom--space--14, 14px);
	--mca-s15: var(--wp--custom--space--15, 15px);
	--mca-s16: var(--wp--custom--space--16, 16px);
	--mca-s18: var(--wp--custom--space--18, 18px);
	--mca-s20: var(--wp--custom--space--20, 20px);
	--mca-s22: var(--wp--custom--space--22, 22px);
	--mca-s24: var(--wp--custom--space--24, 24px);
	--mca-s26: var(--wp--custom--space--26, 26px);
	--mca-s28: var(--wp--custom--space--28, 28px);
	--mca-s30: var(--wp--custom--space--30, 30px);
	--mca-s32: var(--wp--custom--space--32, 32px);
	--mca-s34: var(--wp--custom--space--34, 34px);
	--mca-s36: var(--wp--custom--space--36, 36px);
	--mca-s38: var(--wp--custom--space--38, 38px);
	--mca-s40: var(--wp--custom--space--40, 40px);
	--mca-s44: var(--wp--custom--space--44, 44px);
	--mca-s46: var(--wp--custom--space--46, 46px);
	--mca-s48: var(--wp--custom--space--48, 48px);
	--mca-s52: var(--wp--custom--space--52, 52px);
	--mca-s56: var(--wp--custom--space--56, 56px);
	--mca-s60: var(--wp--custom--space--60, 60px);
	--mca-s66: var(--wp--custom--space--66, 66px);
	--mca-s72: var(--wp--custom--space--72, 72px);
	--mca-s76: var(--wp--custom--space--76, 76px);
	--mca-s78: var(--wp--custom--space--78, 78px);
	--mca-s80: var(--wp--custom--space--80, 80px);
	--mca-s84: var(--wp--custom--space--84, 84px);
	--mca-s88: var(--wp--custom--space--88, 88px);

	/* Rayons */
	--mca-r2:    var(--wp--custom--radius--2, 2px);
	--mca-r8:    var(--wp--custom--radius--8, 8px);
	--mca-r10:   var(--wp--custom--radius--10, 10px);
	--mca-r11:   var(--wp--custom--radius--11, 11px);
	--mca-r12:   var(--wp--custom--radius--12, 12px);
	--mca-r16:   var(--wp--custom--radius--16, 16px);
	--mca-r18:   var(--wp--custom--radius--18, 18px);
	--mca-r20:   var(--wp--custom--radius--20, 20px);
	--mca-r24:   var(--wp--custom--radius--24, 24px);
	--mca-r-pill: var(--wp--custom--radius--pill, 999px);

	/* Ombres */
	--mca-sh-card:       var(--wp--custom--shadow--card, 0 2px 8px rgba(19, 26, 43, 0.03));
	--mca-sh-btn:        var(--wp--custom--shadow--btn, 0 6px 18px rgba(43, 92, 255, 0.28));
	--mca-sh-btn-lg:     var(--wp--custom--shadow--btn-lg, 0 10px 26px rgba(43, 92, 255, 0.3));
	--mca-sh-btn-mobile: var(--wp--custom--shadow--btn-mobile, 0 6px 16px rgba(43, 92, 255, 0.3));
	--mca-sh-menu:       var(--wp--custom--shadow--menu, 0 14px 24px rgba(19, 26, 43, 0.08));
	--mca-sh-panel:      var(--wp--custom--shadow--panel, 0 12px 40px rgba(19, 26, 43, 0.06));
	--mca-sh-media:      var(--wp--custom--shadow--media, 0 20px 50px rgba(19, 26, 43, 0.08));
	--mca-sh-media-lg:   var(--wp--custom--shadow--media-lg, 0 24px 60px rgba(19, 26, 43, 0.12));
	--mca-sh-media-hero: var(--wp--custom--shadow--media-hero, 0 24px 60px rgba(19, 26, 43, 0.1));
	--mca-sh-brand-lg:   var(--wp--custom--shadow--brand-lg, 0 24px 60px rgba(43, 92, 255, 0.28));
	--mca-sh-mobile-bar: var(--wp--custom--shadow--mobile-bar, 0 -6px 20px rgba(19, 26, 43, 0.1));

	/* Gabarit */
	--mca-wide:    var(--wp--custom--layout--wide, 1200px);
	--mca-content: var(--wp--custom--layout--content, 1150px);
	--mca-narrow:  var(--wp--custom--layout--narrow, 1100px);
	--mca-prose:   var(--wp--custom--layout--prose, 1000px);
	--mca-form:    var(--wp--custom--layout--form, 820px);
	--mca-gutter:  var(--wp--custom--layout--gutter, 24px);
	--mca-header-offset: var(--wp--custom--layout--header-offset, 80px);

	/* Cible tactile — 44px est le minimum recommandé (WCAG 2.5.8 / HIG). */
	--mca-touch: var(--wp--custom--touch--target, 44px);
}

/* ==========================================================================
   2. Réinitialisation
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--mca-font-body);
	font-size: 16px;
	color: var(--mca-ink);
	background: var(--mca-surface);
	line-height: var(--mca-leading-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a {
	color: var(--mca-brand);
	text-decoration: none;
}

a:hover {
	color: var(--mca-brand-dark);
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--mca-font-display);
	color: var(--mca-ink);
	letter-spacing: var(--mca-track-tight);
	line-height: var(--mca-leading-heading);
}

h1 {
	line-height: var(--mca-leading-tight);
}

p {
	margin: 0;
}

img {
	max-width: 100%;
	height: auto;
}

/* Visible uniquement au clavier / lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--mca-s8);
	left: var(--mca-s8);
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--mca-s12) var(--mca-s20);
	background: var(--mca-surface);
	border-radius: var(--mca-r10);
	box-shadow: var(--mca-sh-menu);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
}

:focus-visible {
	outline: 2px solid var(--mca-brand);
	outline-offset: 2px;
}

/* ==========================================================================
   3. Utilitaires de mise en page
   ========================================================================== */

.mca-container {
	max-width: var(--mca-wide);
	margin: 0 auto;
	padding-left: var(--mca-gutter);
	padding-right: var(--mca-gutter);
}

.mca-container--narrow { max-width: var(--mca-narrow); }
.mca-container--content { max-width: var(--mca-content); }
.mca-container--prose  { max-width: var(--mca-prose); }
.mca-container--form   { max-width: var(--mca-form); }
.mca-container--900    { max-width: 900px; }

.mca-section--wash    { background: var(--mca-grad-hero); }
.mca-section--alt     { background: var(--mca-surface-alt); }
.mca-section--navy    { background: var(--mca-navy); }
.mca-section--tint    { background: var(--mca-brand-wash); }

.mca-grid {
	display: grid;
	align-items: center;
}

.mca-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--mca-r20);
}

.mca-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Repli affiché quand aucune image n'est disponible (ni mise en avant, ni
   fichier dans le thème) — évite l'icône d'image cassée. */
.mca-media__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, var(--mca-brand-wash) 0%, var(--mca-brand-tint) 100%);
}

/* ==========================================================================
   4. Typographie de composants
   ========================================================================== */

.mca-eyebrow {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 13px;
	color: var(--mca-brand);
	letter-spacing: var(--mca-track-wider);
	text-transform: uppercase;
}

.mca-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--mca-s8);
	padding: var(--mca-s7) var(--mca-s14);
	background: var(--mca-brand-tint);
	color: var(--mca-brand-dark);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 13px;
	border-radius: var(--mca-r-pill);
}

.mca-lead {
	font-size: 19px;
	color: var(--mca-ink-lead);
	margin-top: var(--mca-s22);
}

.mca-body {
	font-size: 17px;
	color: var(--mca-ink-muted);
}

.mca-fineprint {
	font-size: 13px;
	color: var(--mca-ink-faint);
}

.mca-center { text-align: center; }

/* ==========================================================================
   5. Boutons
   ========================================================================== */

.mca-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 16px;
	border-radius: var(--mca-r12);
	padding: var(--mca-s15) var(--mca-s30);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
}

.mca-btn--primary {
	background: var(--mca-brand);
	color: #fff;
	box-shadow: var(--mca-sh-btn-lg);
}

.mca-btn--primary:hover {
	background: var(--mca-brand-dark);
	color: #fff;
}

/* Sur fond marine, l'état survol s'éclaircit au lieu de s'assombrir. */
.mca-btn--primary-on-navy {
	background: var(--mca-brand);
	color: #fff;
}

.mca-btn--primary-on-navy:hover {
	background: var(--mca-brand-light);
	color: #fff;
}

.mca-btn--ghost {
	background: var(--mca-surface);
	color: var(--mca-ink);
	border-color: var(--mca-border-button);
	padding: var(--mca-s15) var(--mca-s28);
}

.mca-btn--ghost:hover {
	border-color: var(--mca-brand);
	color: var(--mca-brand);
}

.mca-btn--white {
	background: #fff;
	color: var(--mca-brand-dark);
	font-weight: var(--mca-fw-black);
	padding: var(--mca-s16) var(--mca-s30);
}

.mca-btn--white:hover {
	background: var(--mca-brand-wash-alt);
	color: var(--mca-brand-dark);
}

.mca-btn--sm {
	padding: var(--mca-s11) var(--mca-s20);
	font-size: 14px;
	border-radius: var(--mca-r10);
	white-space: nowrap;
	box-shadow: var(--mca-sh-btn);
}

.mca-btn--link {
	display: inline-block;
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 16px;
	color: var(--mca-brand);
}

.mca-btn--link:hover { color: var(--mca-brand-dark); }

.mca-btn-row {
	display: flex;
	gap: var(--mca-s14);
	flex-wrap: wrap;
}

.mca-btn-row--center { justify-content: center; }

/* ==========================================================================
   6. En-tête
   ========================================================================== */

.mca-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--mca-border-header);
}

.mca-header__inner {
	max-width: var(--mca-wide);
	margin: 0 auto;
	padding: var(--mca-s15) var(--mca-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mca-s24);
	flex-wrap: wrap;
}

.mca-logo {
	display: flex;
	align-items: baseline;
	gap: var(--mca-s1);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 22px;
	color: var(--mca-ink);
	letter-spacing: var(--mca-track-tighter);
}

.mca-logo__accent { color: var(--mca-brand); }

.mca-logo__tld {
	font-size: 12px;
	color: var(--mca-ink-faint);
	font-weight: var(--mca-fw-semibold);
	margin-left: var(--mca-s1);
}

.mca-nav {
	display: flex;
	align-items: center;
	gap: var(--mca-s30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mca-nav li { list-style: none; }

.navlink {
	font-family: var(--mca-font-body);
	font-weight: var(--mca-fw-semibold);
	font-size: 15px;
	color: var(--mca-ink);
}

.navlink:hover { color: var(--mca-brand); }

/* État actif — posé par WordPress sur l'élément de menu courant. */
.mca-nav .current-menu-item > .navlink,
.mca-nav .current_page_item > .navlink,
.mca-nav .current-menu-ancestor > .navlink {
	color: var(--mca-brand);
}

.mca-header__actions {
	display: flex;
	align-items: center;
	gap: var(--mca-s14);
}

.mca-header__phone {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 15px;
	color: var(--mca-ink);
}

/* Bascule du menu mobile — case à cocher, aucun JS requis. */
.mca-nav-toggle {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.burger {
	display: none;
	width: var(--mca-touch);
	height: var(--mca-touch);
	border: 1.5px solid var(--mca-border-button);
	border-radius: var(--mca-r10);
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--mca-s4);
	flex: none;
}

.burger span {
	width: 18px;
	height: 2px;
	background: var(--mca-ink);
	border-radius: var(--mca-r2);
}

.mca-nav-toggle:focus-visible + .burger {
	outline: 2px solid var(--mca-brand);
	outline-offset: 2px;
}

.mobile-menu {
	display: none;
	flex-direction: column;
	padding: var(--mca-s8) var(--mca-gutter) var(--mca-s20);
	background: var(--mca-surface);
	border-top: 1px solid var(--mca-border-menu);
	box-shadow: var(--mca-sh-menu);
	margin: 0;
	list-style: none;
}

.mobile-menu li { list-style: none; }

.mobile-menu a {
	display: block;
	padding: var(--mca-s14) var(--mca-s4);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-semibold);
	font-size: 17px;
	color: var(--mca-ink);
	border-bottom: 1px solid var(--mca-border-menu-item);
}

.mobile-menu__phone {
	margin-top: var(--mca-s14);
	text-align: center;
	padding: var(--mca-s13);
	background: var(--mca-brand-wash);
	color: var(--mca-brand-dark) !important;
	border-radius: var(--mca-r11);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black) !important;
	font-size: 16px !important;
	border-bottom: 0 !important;
}

/* ==========================================================================
   7. Héro
   ========================================================================== */

.mca-hero__inner {
	max-width: var(--mca-wide);
	margin: 0 auto;
	padding: var(--mca-s72) var(--mca-gutter);
}

.mca-hero__inner--home {
	padding-bottom: var(--mca-s80);
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--mca-s56);
	align-items: center;
}

.mca-hero__inner--split {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: var(--mca-s52);
	align-items: center;
}

.mca-hero__title {
	font-size: 56px;
	font-weight: var(--mca-fw-black);
	margin: var(--mca-s22) 0 0;
}

.mca-hero__title--sm { font-size: 52px; }
.mca-hero__title--md { font-size: 54px; }

.mca-hero__accent { color: var(--mca-brand); }

.mca-stats {
	display: flex;
	gap: var(--mca-s28);
	margin-top: var(--mca-s40);
	flex-wrap: wrap;
}

.mca-stat__value {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 26px;
	color: var(--mca-ink);
}

.mca-stat__label {
	font-size: 13px;
	color: var(--mca-ink-subtle);
	font-weight: var(--mca-fw-semibold);
}

/* ==========================================================================
   8. Cartes
   ========================================================================== */

.mca-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mca-s24);
}

.mca-cards--4 { grid-template-columns: repeat(4, 1fr); }
.mca-cards--2 { grid-template-columns: 1fr 1fr; gap: var(--mca-s28); }

.mca-card {
	background: var(--mca-surface);
	border: 1px solid var(--mca-border-card);
	border-radius: var(--mca-r18);
	padding: var(--mca-s34) var(--mca-s30);
	box-shadow: var(--mca-sh-card);
}

.mca-card__num {
	width: 46px;
	height: 46px;
	border-radius: var(--mca-r12);
	background: var(--mca-brand-tint-alt);
	color: var(--mca-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 20px;
}

.mca-card__title {
	font-size: 21px;
	font-weight: var(--mca-fw-bold);
	margin-top: var(--mca-s22);
}

.mca-card__text {
	color: var(--mca-ink-muted);
	font-size: 15.5px;
	margin-top: var(--mca-s12);
}

.mca-card--plain {
	background: var(--mca-surface-alt);
	border: 0;
	border-radius: var(--mca-r20);
	padding: var(--mca-s38) var(--mca-s34);
	box-shadow: none;
}

.mca-card--plain h3 { font-size: 24px; font-weight: var(--mca-fw-black); }
.mca-card--plain p  { font-size: 16px; color: var(--mca-ink-muted); margin-top: var(--mca-s14); }

/* Cartes « Nos buts » sur fond marine. */
.mca-card--navy {
	background: var(--mca-navy-card);
	border: 1px solid var(--mca-navy-border);
	border-radius: var(--mca-r16);
	padding: var(--mca-s28) var(--mca-s24);
	box-shadow: none;
}

.mca-card--navy .mca-card__step {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 15px;
	color: var(--mca-brand-soft);
}

.mca-card--navy h3 {
	font-size: 19px;
	font-weight: var(--mca-fw-bold);
	color: #fff;
	margin-top: var(--mca-s12);
}

/* ==========================================================================
   9. Blocs de section
   ========================================================================== */

.mca-section__head {
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--mca-s52);
}

.mca-section__head--tight { max-width: 600px; margin-bottom: var(--mca-s44); }
.mca-section__head--48 { max-width: 600px; margin-bottom: var(--mca-s48); }

.mca-section__title {
	font-size: 40px;
	font-weight: var(--mca-fw-black);
	margin-top: var(--mca-s14);
}

.mca-section__title--38 { font-size: 38px; }
.mca-section__title--34 { font-size: 34px; }

.mca-section__text {
	font-size: 17px;
	color: var(--mca-ink-muted);
	margin-top: var(--mca-s16);
}

/* Bande marine à pleine largeur. */
.mca-band__inner {
	max-width: var(--mca-prose);
	margin: 0 auto;
	padding: var(--mca-s66) var(--mca-gutter);
	text-align: center;
}

.mca-band__title {
	font-size: 30px;
	font-weight: var(--mca-fw-bold);
	color: #fff;
	line-height: var(--mca-leading-snug);
}

.mca-band__accent { color: var(--mca-brand-soft); }

/* ==========================================================================
   10. Situations de crédit (puces)
   ========================================================================== */

.mca-situations {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--mca-s56);
	align-items: start;
}

.mca-situations__aside {
	position: sticky;
	top: 100px;
}

.mca-chips {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mca-s12);
}

.mca-chip {
	background: var(--mca-surface);
	border: 1px solid var(--mca-border-chip);
	border-radius: var(--mca-r12);
	padding: var(--mca-s16) var(--mca-s18);
	font-size: 15px;
	font-weight: var(--mca-fw-semibold);
	color: var(--mca-ink-strong);
}

/* ==========================================================================
   11. Bandeau de référence
   ========================================================================== */

.mca-referral {
	background: var(--mca-grad-brand);
	border-radius: var(--mca-r24);
	padding: var(--mca-s56) var(--mca-s48);
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	gap: var(--mca-s40);
	align-items: center;
	box-shadow: var(--mca-sh-brand-lg);
}

.mca-referral__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 13px;
	padding: var(--mca-s6) var(--mca-s13);
	border-radius: var(--mca-r-pill);
}

.mca-referral__title {
	font-size: 38px;
	font-weight: var(--mca-fw-black);
	color: #fff;
	margin-top: var(--mca-s18);
}

.mca-referral__text {
	color: var(--mca-on-brand);
	font-size: 16px;
	margin-top: var(--mca-s14);
}

.mca-referral__cta { text-align: right; }

/* ==========================================================================
   12. Témoignages
   ========================================================================== */

.mca-testimonials {
	columns: 3;
	column-gap: var(--mca-s24);
}

.mca-testimonial {
	break-inside: avoid;
	background: var(--mca-surface);
	border: 1px solid var(--mca-border-card);
	border-radius: var(--mca-r18);
	padding: var(--mca-s28);
	margin-bottom: var(--mca-s24);
	box-shadow: var(--mca-sh-card);
}

.mca-stars {
	color: var(--mca-star);
	font-size: 16px;
	letter-spacing: 2px;
}

.mca-testimonial p {
	color: var(--mca-ink-strong);
	font-size: 15.5px;
	margin-top: var(--mca-s14);
}

.mca-testimonial__author {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	margin-top: var(--mca-s16);
}

/* ==========================================================================
   13. Calculateur
   ========================================================================== */

.mca-calc {
	display: grid;
	grid-template-columns: 1fr 0.82fr;
	gap: var(--mca-s26);
	align-items: stretch;
}

.mca-calc__panel {
	background: var(--mca-surface);
	border: 1px solid var(--mca-border-card);
	border-radius: var(--mca-r20);
	padding: var(--mca-s36) var(--mca-s34);
	display: flex;
	flex-direction: column;
	gap: var(--mca-s26);
	box-shadow: var(--mca-sh-card);
	margin: 0;
	border-width: 1px;
}

.mca-calc__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.mca-calc__label {
	font-size: 15px;
	font-weight: var(--mca-fw-bold);
	color: var(--mca-ink-strong);
	font-family: var(--mca-font-display);
}

.mca-calc__value {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 18px;
	color: var(--mca-brand);
}

.mca-calc__slider {
	width: 100%;
	margin-top: var(--mca-s12);
	accent-color: var(--mca-brand);
	height: 6px;
}

.mca-calc__result {
	background: var(--mca-navy);
	border-radius: var(--mca-r20);
	padding: var(--mca-s36) var(--mca-s32);
	display: flex;
	flex-direction: column;
	color: #fff;
}

.mca-calc__result-label {
	font-size: 13px;
	color: var(--mca-on-navy-label);
	font-weight: var(--mca-fw-semibold);
	text-transform: uppercase;
	letter-spacing: var(--mca-track-wide);
}

.mca-calc__monthly {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 52px;
	line-height: 1;
	margin-top: var(--mca-s10);
	color: #fff;
}

.mca-calc__biweekly {
	font-size: 14.5px;
	color: var(--mca-on-navy-soft);
	margin-top: var(--mca-s8);
}

.mca-calc__breakdown {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s12);
	margin-top: var(--mca-s26);
	padding-top: var(--mca-s22);
	border-top: 1px solid var(--mca-navy-border);
}

.mca-calc__line {
	display: flex;
	justify-content: space-between;
	font-size: 14.5px;
}

.mca-calc__line span:first-child { color: var(--mca-on-navy-muted); }

.mca-calc__line span:last-child {
	font-weight: var(--mca-fw-bold);
	font-family: var(--mca-font-display);
}

.mca-calc__cta {
	margin-top: auto;
	padding-top: var(--mca-s26);
}

.mca-calc__cta .mca-btn {
	width: 100%;
	padding: var(--mca-s14) var(--mca-s24);
	font-size: 15px;
}

.mca-calc__note {
	text-align: center;
	font-size: 13px;
	color: var(--mca-ink-faint);
	margin: var(--mca-s22) auto 0;
	max-width: 640px;
}

.mca-anchor { scroll-margin-top: var(--mca-header-offset); }

/* ==========================================================================
   14. Formulaires (SureForms)
   ========================================================================== */

.mca-form-panel {
	background: var(--mca-surface);
	border: 1px solid var(--mca-border-card);
	border-radius: var(--mca-r20);
	padding: var(--mca-s44) var(--mca-s40);
	box-shadow: var(--mca-sh-panel);
}

/* Aligne les champs SureForms sur le style de la maquette. */
.mca-form-panel input[type="text"],
.mca-form-panel input[type="email"],
.mca-form-panel input[type="tel"],
.mca-form-panel input[type="number"],
.mca-form-panel select,
.mca-form-panel textarea,
.field {
	width: 100%;
	padding: var(--mca-s13) var(--mca-s15);
	border: 1.5px solid var(--mca-border-field);
	border-radius: var(--mca-r11);
	font-family: var(--mca-font-body);
	font-size: 15px;
	color: var(--mca-ink);
	background: var(--mca-surface);
	outline: none;
	transition: border-color .15s;
}

.mca-form-panel input:focus,
.mca-form-panel select:focus,
.mca-form-panel textarea:focus,
.field:focus {
	border-color: var(--mca-brand);
}

.field::placeholder { color: var(--mca-ink-placeholder); }

.mca-form-missing {
	margin-top: var(--mca-s28);
	padding-top: var(--mca-s22);
	border-top: 1px dashed var(--mca-border-field);
	text-align: center;
}

.mca-form-missing__code {
	font-family: var(--mca-font-mono);
	font-size: 12.5px;
	color: var(--mca-brand);
	background: var(--mca-brand-wash-alt);
	display: inline-block;
	padding: var(--mca-s6) var(--mca-s14);
	border-radius: var(--mca-r8);
}

.mca-form-missing p {
	color: var(--mca-ink-faint);
	font-size: 13.5px;
	margin-top: var(--mca-s12);
}

/* ==========================================================================
   15. Coordonnées
   ========================================================================== */

.mca-contact {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--mca-s44);
	align-items: start;
}

.mca-contact__aside {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s20);
}

.mca-contact__card {
	background: var(--mca-navy);
	border-radius: var(--mca-r20);
	padding: var(--mca-s34) var(--mca-s30);
	color: #fff;
}

.mca-contact__card h3 { font-size: 20px; font-weight: var(--mca-fw-bold); color: #fff; }

.mca-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s16);
	margin-top: var(--mca-s22);
}

.mca-contact__label {
	font-size: 12.5px;
	color: var(--mca-on-navy-label);
	font-weight: var(--mca-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.mca-contact__value {
	color: #fff;
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 19px;
}

.mca-contact__value:hover { color: var(--mca-brand-soft); }

.mca-contact__address {
	font-size: 15.5px;
	margin-top: var(--mca-s4);
	color: var(--mca-on-navy-text);
	font-style: normal;
}

.mca-hours {
	background: var(--mca-surface-alt);
	border: 1px solid var(--mca-border-card);
	border-radius: var(--mca-r20);
	padding: var(--mca-s28) var(--mca-s30);
}

.mca-hours h3 { font-size: 18px; font-weight: var(--mca-fw-bold); }

.mca-hours__list {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s9);
	margin-top: var(--mca-s16);
	font-size: 15px;
	color: var(--mca-ink-body);
}

.mca-hours__row {
	display: flex;
	justify-content: space-between;
}

.mca-hours__row--closed { color: var(--mca-ink-faint); }

.mca-hours__row strong {
	font-weight: var(--mca-fw-bold);
	font-family: var(--mca-font-display);
}

/* ==========================================================================
   16. Pied de page
   ========================================================================== */

.mca-footer {
	background: var(--mca-navy-deep);
	color: var(--mca-footer-text);
}

.mca-footer__inner {
	max-width: var(--mca-wide);
	margin: 0 auto;
	padding: var(--mca-s60) var(--mca-gutter) var(--mca-s30);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: var(--mca-s40);
}

.mca-footer__logo {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 21px;
	color: #fff;
	letter-spacing: var(--mca-track-tighter);
}

.mca-footer__logo .mca-logo__accent { color: var(--mca-brand-soft); }
.mca-footer__logo .mca-logo__tld { color: var(--mca-footer-faint); }

.mca-footer__about {
	font-size: 14.5px;
	margin-top: var(--mca-s16);
	max-width: 280px;
	color: var(--mca-footer-muted);
}

.mca-footer__heading {
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-bold);
	font-size: 13px;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: var(--mca-track-wide);
}

.mca-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s10);
	margin: var(--mca-s16) 0 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
}

.mca-footer__list li { list-style: none; }

.mca-footer__list a {
	color: var(--mca-footer-text);
	font-size: 15px;
}

.mca-footer__list a:hover { color: #fff; }

.mca-footer__hours {
	display: flex;
	flex-direction: column;
	gap: var(--mca-s8);
	margin-top: var(--mca-s16);
	font-size: 14.5px;
}

.mca-footer__hours .is-closed { color: var(--mca-footer-faint); }

.mca-footer__tollfree {
	color: #fff !important;
	font-weight: var(--mca-fw-bold);
	font-family: var(--mca-font-display);
}

.mca-footer__tollfree:hover { color: var(--mca-brand-soft) !important; }

.mca-footer__address {
	color: var(--mca-footer-muted);
	font-style: normal;
}

.mca-footer__bottom {
	max-width: var(--mca-wide);
	margin: 0 auto;
	padding: var(--mca-s22) var(--mca-gutter);
	border-top: 1px solid var(--mca-navy-border-soft);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--mca-s12);
	font-size: 13px;
	color: var(--mca-footer-bottom);
}

.mca-footer__social {
	display: flex;
	gap: var(--mca-s18);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mca-footer__social li { list-style: none; }
.mca-footer__social a { color: var(--mca-footer-bottom); }
.mca-footer__social a:hover { color: #fff; }

/* ==========================================================================
   17. Barre d'action mobile
   ========================================================================== */

.mobile-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--mca-surface);
	border-top: 1px solid var(--mca-border-header);
	padding: var(--mca-s10) var(--mca-s14);
	gap: var(--mca-s10);
	box-shadow: var(--mca-sh-mobile-bar);
}

.mobile-cta__call {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mca-s8);
	padding: var(--mca-s15);
	background: var(--mca-brand);
	color: #fff;
	border-radius: var(--mca-r12);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 16px;
	box-shadow: var(--mca-sh-btn-mobile);
}

.mobile-cta__call:hover { color: #fff; }

.mobile-cta__apply {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mca-s15) var(--mca-s20);
	background: var(--mca-brand-wash-cta);
	color: var(--mca-brand-dark);
	border-radius: var(--mca-r12);
	font-family: var(--mca-font-display);
	font-weight: var(--mca-fw-black);
	font-size: 16px;
}

/* ==========================================================================
   18. Adaptatif
   --------------------------------------------------------------------------
   Points de rupture repris tels quels de la maquette : 980 / 860 / 520.
   ========================================================================== */

@media (max-width: 980px) {
	.mca-header__phone { display: none; }
	.mca-header .mca-nav { display: none; }
	.burger { display: flex; }
	.mca-nav-toggle:checked ~ .mobile-menu { display: flex; }
}

@media (max-width: 860px) {
	.mca-hero__inner--home,
	.mca-hero__inner--split,
	.mca-situations,
	.mca-contact,
	.mca-calc,
	.mca-cards,
	.mca-cards--4,
	.mca-cards--2,
	.mca-chips,
	.mca-referral,
	.mca-footer__inner {
		grid-template-columns: 1fr;
	}

	/* .mca-split porte ses colonnes en style inline (gap variable selon la
	   page) : il faut !important pour l'emporter et empiler sur mobile. */
	.mca-split {
		grid-template-columns: 1fr !important;
	}

	.mca-testimonials { columns: 1; }

	h1 { font-size: 38px; }
	h2 { font-size: 30px; }

	.mca-hero__title,
	.mca-hero__title--sm,
	.mca-hero__title--md { font-size: 38px; }

	.mca-section__title,
	.mca-section__title--38,
	.mca-section__title--34 { font-size: 30px; }

	.mca-section > .mca-container,
	.mca-hero__inner,
	.mca-band__inner,
	.mca-footer__inner {
		padding-top: var(--mca-s52);
		padding-bottom: var(--mca-s52);
	}

	.mca-situations__aside { position: static; }
	.mca-referral__cta { text-align: left; }

	.mobile-cta { display: flex; }

	/* Laisse la place à la barre d'action fixe. */
	body { padding-bottom: var(--mca-s78); }
}

@media (max-width: 520px) {
	h1,
	.mca-hero__title,
	.mca-hero__title--sm,
	.mca-hero__title--md { font-size: 32px; }

	.mca-header__inner { gap: var(--mca-s12); }
	.mca-calc__monthly { font-size: 40px; }
	.mca-form-panel { padding: var(--mca-s28) var(--mca-s20); }
	.mca-referral { padding: var(--mca-s32) var(--mca-s24); }
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}