:root {
	/* --- Marque ------------------------------------------------ */
	--ec-green-700: #0a6e3b;
	--ec-green-600: #0b8a48;
	--ec-green-500: #0fa958;
	--ec-green-200: #bfe9d1;
	--ec-green-100: #e4f6ec;

	--ec-navy-900: #0b1631;
	--ec-navy-800: #101f44;
	--ec-navy-700: #1c2f5e;
	--ec-navy-100: #e6eaf3;

	/* --- Neutres (teintes vers le bleu de marque) --------------- */
	--ec-ink: #101f44;
	--ec-ink-muted: #5b6883;
	--ec-ink-subtle: #808da5;
	--ec-surface: #ffffff;
	--ec-surface-sunken: #fafbfd;
	--ec-canvas: #f5f7fb;
	--ec-line: #e7ecf4;
	--ec-line-strong: #d6dfec;

	/* --- Roles de statut (fond / texte) ------------------------- */
	--ec-status-transit-bg: #f1ecfe;
	--ec-status-transit-fg: #6431d6;
	--ec-status-prep-bg: #fef3e2;
	--ec-status-prep-fg: #b4690e;
	--ec-status-done-bg: #e4f6ec;
	--ec-status-done-fg: #0a6e3b;
	--ec-status-progress-bg: #e7f0fe;
	--ec-status-progress-fg: #1d5fd0;
	--ec-status-idle-bg: #eff2f7;
	--ec-status-idle-fg: #64748b;
	--ec-status-alert-bg: #fdecec;
	--ec-status-alert-fg: #bf3b33;
	--ec-danger-500: #e5484d;

	/* --- Typographie ------------------------------------------- */
	--ec-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ec-font-num: var(--ec-font);

	--ec-t-display: 2rem;
	--ec-t-h1: 1.6875rem;
	--ec-t-h2: 1.3125rem;
	--ec-t-h3: 1.0625rem;
	--ec-t-body: 0.9375rem;
	--ec-t-sm: 0.84375rem;
	--ec-t-xs: 0.78125rem;

	--ec-lh-tight: 1.15;
	--ec-lh-snug: 1.3;
	--ec-lh-body: 1.55;

	--ec-track-tight: -0.022em;
	--ec-track-normal: -0.008em;

	/* --- Rythme (echelle volontairement non lineaire) ----------- */
	--ec-s1: 4px;
	--ec-s2: 8px;
	--ec-s3: 12px;
	--ec-s4: 16px;
	--ec-s5: 20px;
	--ec-s6: 24px;
	--ec-s7: 32px;
	--ec-s8: 40px;
	--ec-s9: 56px;
	--ec-s10: 72px;

	/* --- Formes ------------------------------------------------- */
	--ec-r-xs: 6px;
	--ec-r-sm: 10px;
	--ec-r-md: 12px;
	--ec-r-lg: 16px;
	--ec-r-xl: 20px;
	--ec-r-pill: 999px;

	/* --- Elevation (ombres teintees, jamais grises) ------------- */
	--ec-shadow-sm: 0 1px 2px rgba(16, 31, 68, .05);
	--ec-shadow-md: 0 1px 2px rgba(16, 31, 68, .04), 0 8px 20px -10px rgba(16, 31, 68, .14);
	--ec-shadow-lg: 0 2px 4px rgba(16, 31, 68, .04), 0 24px 48px -20px rgba(16, 31, 68, .22);

	/* --- Mouvement (sortie exponentielle, sans rebond) ---------- */
	--ec-ease: cubic-bezier(.22, 1, .36, 1);
	--ec-dur-fast: 140ms;
	--ec-dur: 220ms;

	/* --- Gabarit ------------------------------------------------ */
	--ec-sidebar-w: 232px;
	--ec-rail-w: 300px;
	--ec-topbar-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}/* =============================================================
   Bouton "eau"  -  action primaire sombre, liquide vert
   ============================================================= */
.ec-water {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	padding: 14px 26px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(180deg, var(--ec-navy-700), var(--ec-navy-900));
	color: #fdfdfd;
	font-family: inherit;
	font-size: var(--ec-t-sm);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	box-shadow:
		0 0 0.75px rgba(11, 22, 49, .2),
		0.7px 0.8px 1.2px -0.4px rgba(11, 22, 49, .1),
		1.3px 1.5px 2.2px -0.8px rgba(11, 22, 49, .1),
		2.3px 2.6px 3.9px -1.2px rgba(11, 22, 49, .1),
		3.9px 4.4px 6.6px -1.7px rgba(11, 22, 49, .1),
		6.5px 7.2px 10.9px -2.1px rgba(11, 22, 49, .1),
		8px 9px 14px -2.5px rgba(11, 22, 49, .2);
	transition: transform var(--ec-dur-fast) var(--ec-ease);
}
.ec-water:active { transform: scale(.97); }
.ec-water__glass {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	pointer-events: none;
}
.ec-water__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
}
.ec-water__label {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: var(--ec-s2);
	white-space: nowrap;
}
.ec-water__label svg { width: 17px; height: 17px; }
.ec-water--lg { padding: 20px 40px; font-size: 1.0625rem; border-radius: 20px; }

/* =============================================================
   Bouton "origine"  -  remplissage radial depuis le curseur
   ============================================================= */
.ec-origin {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 26px;
	border: 0;
	border-radius: 12px;
	background: var(--ec-green-500);
	color: #fff;
	font-family: inherit;
	font-size: var(--ec-t-sm);
	font-weight: 600;
	letter-spacing: -0.02em;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	box-shadow: 0 1px 2px rgba(16, 31, 68, .06), 0 8px 18px -10px rgba(15, 169, 88, .55);
	transition: transform var(--ec-dur-fast) var(--ec-ease);
}
.ec-origin:active { transform: scale(.985); }
.ec-origin[disabled] { pointer-events: none; opacity: .5; }
.ec-origin__fill {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: var(--ec-navy-900);
	transform: translate(-50%, -50%) scale(0);
	transform-origin: center;
	pointer-events: none;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.ec-origin[data-filling="true"] .ec-origin__fill { transform: translate(-50%, -50%) scale(1); }
.ec-origin__label {
	position: relative;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	gap: var(--ec-s2);
	white-space: nowrap;
}
.ec-origin__label svg { width: 17px; height: 17px; }

/* Variante claire : socle blanc, remplissage bleu nuit.
   C'est le traitement de toutes les actions secondaires. */
.ec-origin--quiet {
	background: var(--ec-surface);
	color: var(--ec-ink);
	box-shadow: none;
	border: 1px solid var(--ec-line-strong);
	transition: transform var(--ec-dur-fast) var(--ec-ease),
	            color .3s cubic-bezier(.16, 1, .3, 1),
	            border-color .3s cubic-bezier(.16, 1, .3, 1);
}
.ec-origin--quiet .ec-origin__fill { background: var(--ec-navy-800); }
.ec-origin--quiet[data-filling="true"] { color: #fff; border-color: var(--ec-navy-800); }

/* Variante encastree : sans bordure, sur fond clair. */
.ec-origin--soft {
	background: var(--ec-canvas);
	color: var(--ec-ink-muted);
	box-shadow: none;
	transition: transform var(--ec-dur-fast) var(--ec-ease), color .3s cubic-bezier(.16, 1, .3, 1);
}
.ec-origin--soft .ec-origin__fill { background: var(--ec-navy-800); }
.ec-origin--soft[data-filling="true"] { color: #fff; }

.ec-origin--warn { color: var(--ec-status-alert-fg); border-color: var(--ec-status-alert-bg); }
.ec-origin--warn .ec-origin__fill { background: var(--ec-status-alert-fg); }
.ec-origin--sm { height: 36px; padding: 0 16px; font-size: var(--ec-t-xs); border-radius: 10px; }
.ec-origin--xs { height: 32px; padding: 0 13px; font-size: var(--ec-t-xs); border-radius: 9px; }
.ec-origin--block { width: 100%; }
.ec-origin--wa { background: #1faa53; color: #fff; box-shadow: none; }
.ec-origin--wa .ec-origin__fill { background: #0f7a3a; }/* --- Listes natives : au moins propres et coherentes -------------- */
select.ec-field {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6883' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 17px;
	cursor: pointer;
}
select.ec-field::-ms-expand { display: none; }

/* --- Menu deroulant sur mesure ------------------------------------ */
.ec-sel { position: relative; }
.ec-sel__btn {
	display: flex;
	align-items: center;
	gap: var(--ec-s3);
	width: 100%;
	height: 42px;
	padding: 0 var(--ec-s4);
	border: 1px solid var(--ec-line-strong);
	border-radius: var(--ec-r-sm);
	background: var(--ec-surface);
	font-size: var(--ec-t-sm);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--ec-dur-fast) var(--ec-ease), box-shadow var(--ec-dur-fast) var(--ec-ease);
}
.ec-sel__btn:hover { border-color: var(--ec-ink-subtle); }
.ec-sel.is-open .ec-sel__btn { border-color: var(--ec-green-500); box-shadow: 0 0 0 3px var(--ec-green-100); }
.ec-sel__cur { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--ec-s3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-sel__cur.is-empty { color: var(--ec-ink-subtle); }
.ec-sel__btn > .ec-i { color: var(--ec-ink-subtle); transition: transform var(--ec-dur) var(--ec-ease); }
.ec-sel.is-open .ec-sel__btn > .ec-i { transform: rotate(180deg); }

.ec-sel__pop {
	position: absolute;
	left: 0; right: 0; top: calc(100% + 6px);
	z-index: 60;
	padding: 6px;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-md);
	background: var(--ec-surface);
	box-shadow: var(--ec-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: opacity var(--ec-dur-fast) var(--ec-ease), transform var(--ec-dur-fast) var(--ec-ease), visibility var(--ec-dur-fast);
}
.ec-sel.is-open .ec-sel__pop { opacity: 1; visibility: visible; transform: translateY(0); }
.ec-sel__pop--up { top: auto; bottom: calc(100% + 6px); }

.ec-sel__search {
	width: 100%;
	height: 38px;
	margin-bottom: 5px;
	padding: 0 var(--ec-s4);
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-xs);
	background: var(--ec-canvas);
	font-size: var(--ec-t-sm);
}
.ec-sel__search:focus { outline: none; border-color: var(--ec-green-500); background: var(--ec-surface); }

.ec-sel__list { max-height: 268px; overflow-y: auto; scrollbar-width: thin; }
.ec-sel__grp {
	padding: var(--ec-s3) var(--ec-s3) 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ec-ink-subtle);
}
.ec-sel__opt {
	display: flex;
	align-items: center;
	gap: var(--ec-s3);
	width: 100%;
	min-height: 38px;
	padding: 6px var(--ec-s3);
	border: 0;
	border-radius: var(--ec-r-xs);
	background: none;
	color: var(--ec-ink);
	font-size: var(--ec-t-sm);
	text-align: left;
	cursor: pointer;
	transition: background-color var(--ec-dur-fast) var(--ec-ease);
}
.ec-sel__opt:hover, .ec-sel__opt.is-cursor { background: var(--ec-canvas); }
.ec-sel__opt.is-on { background: var(--ec-green-100); color: var(--ec-green-700); font-weight: 600; }
.ec-sel__opt .ec-sel__dial { margin-left: auto; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); font-variant-numeric: tabular-nums; }
.ec-sel__opt.is-hidden { display: none; }
.ec-sel__grp.is-hidden { display: none; }
.ec-sel__none { padding: var(--ec-s5); text-align: center; font-size: var(--ec-t-sm); color: var(--ec-ink-subtle); }

/* --- Champ telephone avec indicatif -------------------------------- */
.ec-tel { display: flex; }
.ec-tel .ec-sel { flex: none; width: 136px; }
.ec-tel .ec-sel__btn { padding-left: var(--ec-s3); padding-right: var(--ec-s3); gap: var(--ec-s2); }
.ec-tel .ec-sel__cur { font-variant-numeric: tabular-nums; font-weight: 600; }
.ec-tel .ec-sel__btn { border-top-right-radius: 0; border-bottom-right-radius: 0; background: var(--ec-canvas); }
.ec-tel__num { flex: 1; min-width: 0; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.ec-tel .ec-sel__pop { min-width: 288px; }

/* --- Champ complementaire devoile ---------------------------------- */
.ec-reveal { display: none; margin-top: var(--ec-s4); }
.ec-reveal.is-open { display: block; animation: ecRevealIn var(--ec-dur) var(--ec-ease); }
@keyframes ecRevealIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ec-reveal .ec-note { margin-bottom: var(--ec-s3); }.gm {
	--gm-ease: cubic-bezier(.16, 1, .3, 1);
	--gm-duree: 420ms;
	position: relative;
	padding: 7px;
	border-radius: 18px;
	border: 1px solid rgba(28, 26, 22, .07);
	background: linear-gradient(180deg, rgba(255, 253, 249, .86), rgba(255, 253, 249, .46));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 8px 26px rgba(28, 26, 22, .07);
}
.gm__halo {
	position: absolute;
	inset: -8px;
	border-radius: 26px;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--gm-duree) var(--gm-ease);
	background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(15, 169, 88, .16) 34%, rgba(47, 111, 208, .14) 66%, rgba(217, 131, 36, .14) 90%, transparent 100%);
}

.gm__list { position: relative; z-index: 1; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.gm__item { position: relative; }

.gm__btn { position: relative; display: block; perspective: 600px; border-radius: 14px; background: none; border: 0; padding: 0; color: inherit; text-decoration: none; }
.gm__glow {
	position: absolute; inset: 0; z-index: 0;
	border-radius: 16px; pointer-events: none;
	opacity: 0; transform: scale(.8);
	background: radial-gradient(circle, rgba(var(--gm-teinte), .18) 0%, rgba(var(--gm-teinte), .07) 50%, transparent 100%);
	transition: opacity var(--gm-duree) var(--gm-ease), transform var(--gm-duree) var(--gm-ease);
}
.gm__item.is-active .gm__glow,
.gm__item.is-open .gm__glow { opacity: 1; transform: scale(2); }

.gm__face {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 15px;
	font-size: 14.5px; font-weight: 550; white-space: nowrap;
	color: var(--gm-ink-muted, #57534a);
	transform-style: preserve-3d;
	transition: transform var(--gm-duree) var(--gm-ease), opacity var(--gm-duree) var(--gm-ease), color .2s var(--gm-ease);
}
.gm__face--front { position: relative; z-index: 1; transform-origin: center bottom; }
.gm__face--back { position: absolute; inset: 0; z-index: 1; transform-origin: center top; transform: rotateX(90deg); opacity: 0; }
.gm__item.is-active .gm__face,
.gm__item.is-open .gm__face { color: var(--gm-ink, #1c1a16); }
.gm__face svg { width: 19px; height: 19px; flex: none; stroke-width: 1.8; color: rgb(var(--gm-teinte)); }
.gm__face--front svg { color: var(--gm-ink-muted, #57534a); }
.gm__item.is-active .gm__face--front svg,
.gm__item.is-open .gm__face--front svg { color: rgb(var(--gm-teinte)); }
.gm__chev { width: 13px !important; height: 13px !important; opacity: .55; transition: transform .24s var(--gm-ease); }
.gm__item.is-open .gm__chev { transform: rotate(180deg); }

.gm__pop {
	position: absolute; top: 100%; left: 50%; z-index: 60;
	min-width: 268px; margin-top: 8px; padding: 7px;
	border-radius: 18px;
	border: 1px solid rgba(28, 26, 22, .08);
	background: #fffdf9;
	box-shadow: 0 22px 54px rgba(28, 26, 22, .16);
	opacity: 0; visibility: hidden;
	transform: translateX(-50%) translateY(-7px);
	transition: opacity .24s var(--gm-ease), transform .24s var(--gm-ease), visibility .24s;
}
.gm__item.is-open .gm__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.gm__lien { display: flex; align-items: flex-start; gap: 11px; padding: 10px 11px; border-radius: 12px; text-decoration: none; transition: background-color .16s var(--gm-ease); }
.gm__lien svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: rgb(var(--gm-teinte)); stroke-width: 1.8; }
.gm__lien > span { min-width: 0; }
.gm__lien b { display: block; font-size: 14px; font-weight: 600; color: var(--gm-ink, #1c1a16); }
.gm__lien > span > span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--gm-ink-subtle, #8b857a); }

.gm__burger { display: none; align-items: center; gap: 9px; padding: 9px 14px; border: 0; border-radius: 14px; background: none; font-size: 14.5px; font-weight: 600; color: var(--gm-ink, #1c1a16); }
.gm__burger svg { width: 19px; height: 19px; }

/* --- Effets reserves aux pointeurs fins ---------------------------- */
@media (hover: hover) and (pointer: fine) {
	.gm:hover .gm__halo { opacity: 1; }
	.gm__item:hover .gm__glow,
	.gm__item:focus-within .gm__glow { opacity: 1; transform: scale(2); }
	.gm__item:hover .gm__face--front,
	.gm__item:focus-within .gm__face--front { transform: rotateX(-90deg); opacity: 0; }
	.gm__item:hover .gm__face--back,
	.gm__item:focus-within .gm__face--back { transform: rotateX(0deg); opacity: 1; }
	.gm__item:hover .gm__face,
	.gm__item:focus-within .gm__face { color: var(--gm-ink, #1c1a16); }
	.gm__item:hover .gm__face--front svg { color: rgb(var(--gm-teinte)); }
	.gm__item:hover .gm__pop,
	.gm__item:focus-within .gm__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
	.gm__item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
	.gm__lien:hover { background: rgba(var(--gm-teinte), .09); }
}

/* Pas de bascule 3D ni de halo au doigt : rien ne reste bloque. */
@media (hover: none), (pointer: coarse) {
	.gm__halo { display: none; }
	.gm__face--back { display: none; }
	.gm__lien:active { background: rgba(var(--gm-teinte), .12); }
}

/* --- Version compacte ---------------------------------------------- */
@media (max-width: 980px) {
	.gm { padding: 4px; border-radius: 14px; }
	.gm__burger { display: flex; }
	.gm__list {
		position: fixed;
		top: 74px;
		left: 12px;
		right: 12px;
		z-index: 9998;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 8px;
		border-radius: 18px;
		border: 1px solid rgba(28, 26, 22, .08);
		background: #fffdf9;
		box-shadow: 0 26px 60px rgba(28, 26, 22, .22);
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.gm__list[hidden] { display: none; }
	.gm__item { --gm-ink: #1c1a16; --gm-ink-muted: #57534a; --gm-ink-subtle: #8b857a; }
	.gm__btn { perspective: none; }
	.gm__face { padding: 13px 12px; font-size: 15.5px; white-space: normal; }
	.gm__face .gm__chev { margin-left: auto; }
	.gm__glow { display: none; }
	.gm__item.is-active .gm__face { color: rgb(var(--gm-teinte)); }

	.gm__pop {
		position: static;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		margin: 0 0 6px;
		padding: 0 0 0 38px;
		border: 0;
		background: none;
		box-shadow: none;
		transition: none;
	}
	.gm__item.is-open .gm__pop { display: block; transform: none; opacity: 1; visibility: visible; }
	.gm__lien { padding: 10px 8px; }
	.gm__lien > span > span { display: none; }
	.gm__lien b { font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.gm__face, .gm__glow, .gm__pop, .gm__halo, .gm__chev { transition: opacity .18s linear; }
	.gm__item:hover .gm__face--front { transform: none; opacity: 0; }
	.gm__item:hover .gm__face--back { transform: none; }
}
/* Logo commun, hors espace client. */
.ec-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.ec-logo__mark { width: 40px; height: 39px; background: #0b1631; -webkit-mask: var(--ec-logo-src) center / contain no-repeat; mask: var(--ec-logo-src) center / contain no-repeat; }
.ec-logo__word { font-size: 1.25rem; font-weight: 800; letter-spacing: -.035em; color: #0b1631; line-height: 1; }*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.mado-home {
	margin: 0;
	background: var(--ec-canvas);
	color: var(--ec-ink);
	font-family: var(--ec-font);
	font-size: var(--ec-t-body);
	line-height: var(--ec-lh-body);
	-webkit-font-smoothing: antialiased;
}
.mado-home img { max-width: 100%; display: block; }
.mado-home a { color: inherit; text-decoration: none; }
.mado-home ul, .mado-home ol { margin: 0; padding: 0; list-style: none; }
.mado-home h1, .mado-home h2, .mado-home h3, .mado-home p { margin: 0; }
.mado-home .ec-i { width: 18px; height: 18px; flex: none; }
.hm-wrap { width: min(1180px, 100% - 36px); margin-inline: auto; }
@media (max-width: 620px) { .hm-wrap { width: min(1180px, 100% - 24px); } }

/* --- Barre ------------------------------------------------------------ */
.hm-top { position: sticky; top: 0; z-index: 60; background: rgba(11, 22, 49, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }
.hm-top__in { display: flex; align-items: center; gap: 22px; height: 74px; }
.hm-top .ec-logo { flex-direction: row; gap: 9px; }
.hm-top .ec-logo__mark { width: 27px; height: 26px; background: #fff; }
.hm-top .ec-logo__word { font-size: 1.18rem; color: #fff; }
.hm-top__end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hm-top .gm { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); box-shadow: none; --gm-ink: #fff; --gm-ink-muted: rgba(255,255,255,.74); --gm-ink-subtle: rgba(255,255,255,.6); }
.hm-top .gm__pop { --gm-ink: #101f44; --gm-ink-muted: #5b6883; --gm-ink-subtle: #808da5; background: #fff; }
.hm-top .gm__burger { color: #fff; }
.hm-top__end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; position: relative; }
.hm-lien { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #fff; border: 1.5px solid rgba(255,255,255,.22); background: transparent; text-decoration: none; white-space: nowrap; line-height: 1; transition: transform .2s cubic-bezier(.16,1,.3,1), background-color .2s, border-color .2s, color .2s, box-shadow .2s; box-sizing: border-box; cursor: pointer; font-family: inherit; }
.hm-lien:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; transform: translateY(-1px); }
.hm-lien--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
.hm-lien--ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.hm-lien--plein { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); border-color: transparent; color: #0f172a; box-shadow: 0 4px 14px rgba(34, 197, 94, .25); }
.hm-lien--plein:hover { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); color: #0f172a; box-shadow: 0 6px 18px rgba(34, 197, 94, .35); transform: translateY(-1px); }
.hm-lien--cart { background: #fffdf9; color: #1c1a16; border-color: transparent; }
.hm-lien--cart:hover { background: #fff; color: #1c1a16; }
.hm-lien svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Devise — dropdown style chariot / gm__pop, ancré à droite, sans débordement */
.hm-cur { position: relative; flex-shrink: 0; }
.hm-cur__menu {
	position: absolute; top: calc(100% + 10px); right: 0; left: auto;
	z-index: 80;
	width: min(240px, calc(100vw - 24px));
	max-width: 240px;
	padding: 8px;
	border-radius: 16px;
	border: 1px solid rgba(28, 26, 22, .1);
	background: #fffdf9;
	box-shadow: 0 18px 48px rgba(28, 26, 22, .18);
	overflow: hidden;
	box-sizing: border-box;
}
.hm-cur__menu[hidden] { display: none !important; }
.hm-cur__opt {
	display: flex; align-items: center; gap: 10px;
	width: 100%; padding: 10px 12px;
	border: 0; border-radius: 11px;
	background: transparent; text-align: left;
	cursor: pointer; color: #1c1a16;
	font: inherit; box-sizing: border-box;
	transition: background .15s ease;
}
.hm-cur__opt:hover, .hm-cur__opt[aria-selected="true"] {
	background: rgba(34, 197, 94, .1);
}
.hm-cur__opt[aria-selected="true"] b { color: #16a34a; }
.hm-cur__opt b { font-size: 13.5px; font-weight: 700; min-width: 36px; flex-shrink: 0; }
.hm-cur__opt span { font-size: 12.5px; color: #8b857a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 980px) { .hm-lien--texte { display: none; } .hm-lien { height: 36px; padding: 0 12px; font-size: 12px; } }
@media (max-width: 640px) {
	.hm-cur__menu { right: 0; width: min(220px, calc(100vw - 16px)); }
}

/* --- Hero -------------------------------------------------------------- */
.hm-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, #0b1631 0%, #132a5c 58%, #0d1c3d 100%); color: #fff; }
.hm-hero__grille { position: absolute; inset: 0; opacity: .22; background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 70% 40%, #000 10%, transparent 72%); }
.hm-hero__in { position: relative; display: grid; scroll-margin-top: 90px; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px; align-items: center; padding: 56px 0 64px; }
@media (max-width: 940px) { .hm-hero__in { grid-template-columns: 1fr; padding: 38px 0 44px; } }

/* --- Le bandeau : une carte sobre, l'image en haut, le texte dessous --- */
.hm-hero .hm-hero__in { display: block; padding: 30px 0 46px; width: min(1560px, 100% - 34px) !important; max-width: none !important; }
@media (max-width: 940px) { .mado-home .hm-hero { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; padding-left: 8px !important; padding-right: 8px !important; } .hm-hero .hm-hero__in { display: block; padding: 18px 0 24px !important; width: 100% !important; max-width: none !important; margin-inline: 0 !important; } }
.hm-diapo { max-width: 1560px; margin: 0 auto; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.hm-diapo__vues { position: relative; height: clamp(168px, 24vw, 320px); background: #0d1a38; touch-action: pan-y; }
.hm-vue { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.hm-vue.is-on { opacity: 1; pointer-events: auto; }
.hm-vue img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-vue__vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.18); background: linear-gradient(135deg, #16306a 0%, #0b1631 100%); }
.hm-vue__vide svg { width: 44px; height: 44px; }
.hm-diapo__vues .hm-fleche { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 38px; height: 38px; background: rgba(9,16,34,.55); border-color: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.hm-diapo__vues .hm-fleche--g { left: 12px; right: auto; }
.hm-diapo__vues .hm-fleche--d { right: 12px; left: auto; }
/* Les textes se superposent dans la meme case : la hauteur suit le plus long, sans trou. */
.hm-diapo__texte { display: grid; padding: 26px 32px 24px; border-top: 1px solid rgba(255,255,255,.09); }
.hm-diapo__texte .hm-slide { display: block; grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity .35s ease; }
.hm-diapo__texte .hm-slide.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.hm-hero .hm-diapo .hm-kicker { font-size: .6875rem !important; padding: 5px 12px; gap: 7px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); font-weight: 600; letter-spacing: .01em; }
.hm-hero .hm-diapo .hm-kicker svg { width: 14px; height: 14px; }
.hm-hero .hm-diapo h1 { margin: 10px 0 6px; font-size: clamp(1.05rem, 1.45vw, 1.3rem); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; max-width: 44ch; }
.hm-hero .hm-diapo .hm-hero__lede { font-size: .8438rem; line-height: 1.62; color: rgba(255,255,255,.6); max-width: 78ch; }
.hm-sous { max-width: 1560px; margin: 34px auto 0; }
.hm-hero .hm-points { position: static; transform: none; justify-content: center; margin: 0; padding: 0 0 18px; }
.hm-hero .hm-points button { width: 6px; height: 6px; }
.hm-hero .hm-points button[aria-current="true"] { width: 22px; }
/* --- Les atouts et les boutons tiennent toute la largeur --- */
.hm-sous .hm-atouts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; width: 100%; margin: 0; }
.hm-sous .hm-atout { display: flex; align-items: center; gap: 13px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; font-size: .8125rem; line-height: 1.4; color: rgba(255,255,255,.74); transition: color .25s ease; }
@media (hover: hover) { .hm-sous .hm-atout:hover { color: #fff; } }
/* La pastille : une petite tuile en relief, lumiere en haut, ombre portee en bas. */
.hm-atout__ic { position: relative; flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(155deg, #1f7f52 0%, #12613c 48%, #0c3f28 100%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -3px 6px rgba(0,0,0,.42), 0 8px 16px -8px rgba(15,169,88,.65); }
.hm-atout__ic::after { content: ''; position: absolute; inset: 1px 1px 46% 1px; border-radius: 11px 11px 14px 14px; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0)); pointer-events: none; }
.hm-atout__ic svg { position: relative; z-index: 1; width: 19px; height: 19px; color: #eafff4; filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.45)); }
.hm-sous .hm-atout:nth-child(2) .hm-atout__ic { background: linear-gradient(155deg, #2a5fae 0%, #1b3f7d 48%, #122a55 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.42), 0 8px 16px -8px rgba(42,95,174,.6); }
.hm-sous .hm-atout:nth-child(3) .hm-atout__ic { background: linear-gradient(155deg, #1f8f8a 0%, #146a68 48%, #0d4544 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.42), 0 8px 16px -8px rgba(31,143,138,.6); }
.hm-sous .hm-atout:nth-child(4) .hm-atout__ic { background: linear-gradient(155deg, #6b4bb8 0%, #4a3287 48%, #2e1f58 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.32), inset 0 -3px 6px rgba(0,0,0,.42), 0 8px 16px -8px rgba(107,75,184,.6); }
.hm-sous .hm-hero__cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.hm-sous .hm-hero__cta > a { display: block; width: 100%; }
.hm-sous .hm-hero__cta > a > * { width: 100%; justify-content: center; }
@media (max-width: 900px) { .hm-sous { margin-top: 24px; } .hm-sous .hm-atouts { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; align-items: start; margin: 0 !important; } .hm-sous .hm-atout { flex-direction: column; align-items: center; text-align: center; gap: 8px; font-size: .625rem; line-height: 1.32; color: rgba(255,255,255,.7); } .hm-atout__ic { width: 30px; height: 30px; border-radius: 10px; } .hm-atout__ic svg { width: 15px; height: 15px; } .hm-sous .hm-hero__cta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; } .hm-sous .hm-hero__cta { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .hm-sous .hm-hero__cta > a > * { padding: 10px 10px !important; font-size: .7rem !important; line-height: 1.2 !important; min-height: 48px; text-align: center; white-space: normal !important; gap: 6px !important; } .hm-sous .hm-hero__cta > a > * svg { width: 14px; height: 14px; flex: none; } }

/* L'animation d'eau du bouton principal : elle etait coupee sur mobile parce que
   le canvas debordait sous le bouton. On la rallume en la bordant strictement. */
@media (max-width: 900px) {
	.hm-sous .hm-hero__cta .ec-water { position: relative !important; overflow: hidden !important; }
	.hm-sous .hm-hero__cta .ec-water__canvas, .hm-sous .hm-hero__cta .ec-water__glass { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; border-radius: inherit !important; pointer-events: none; }
	.hm-sous .hm-hero__cta .ec-water__label { position: relative !important; z-index: 2; }
}

@media (max-width: 380px) { .hm-sous .hm-atout { font-size: .5938rem; } .hm-atout__ic { width: 28px; height: 28px; } .hm-atout__ic svg { width: 14px; height: 14px; } .hm-sous .hm-hero__cta > a > * { font-size: .645rem !important; padding: 9px 7px !important; letter-spacing: -.01em; } }
@media (max-width: 700px) { .hm-diapo { border-radius: 16px; } .hm-diapo__vues { height: clamp(150px, 42vw, 210px); } .hm-diapo__texte { padding: 18px 16px 16px; } .hm-hero .hm-diapo h1 { font-size: 1.02rem !important; line-height: 1.28 !important; margin: 10px 0 6px !important; max-width: none; } .hm-hero .hm-diapo .hm-hero__lede { font-size: .8125rem !important; line-height: 1.6 !important; } .hm-sous { margin-top: 16px; } .hm-diapo__vues .hm-fleche { display: grid; width: 34px; height: 34px; } .hm-diapo__vues .hm-fleche--g { left: 8px; } .hm-diapo__vues .hm-fleche--d { right: 8px; } }
.hm-slide { display: none; }
.hm-slide.is-on { display: block; animation: hmIn .5s var(--ec-ease) both; }
@keyframes hmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hm-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: var(--ec-r-pill); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); font-size: var(--ec-t-xs); font-weight: 600; }
.hm-hero h1 { margin: 20px 0 16px; font-size: clamp(2.1rem, 4.6vw, 3.2rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; max-width: 17ch; }
.hm-hero h1 em { font-style: normal; color: #48d68a; }
.hm-hero__lede { max-width: 52ch; font-size: 1.0625rem; color: rgba(255,255,255,.8); }
.hm-atouts { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 28px; }
.hm-atout { display: flex; align-items: center; gap: 10px; font-size: var(--ec-t-sm); color: rgba(255,255,255,.86); line-height: 1.35; }
.hm-atout .ec-i { color: #48d68a; }
.hm-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hm-scene { position: relative; min-height: 340px; }
@media (max-width: 940px) { .hm-scene { min-height: 250px; } }
.hm-scene__photo { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; }
.hm-scene__photo img { width: 100%; height: 100%; object-fit: cover; }
.hm-colis { position: absolute; right: 4%; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(300px, 62%); }
.hm-colis span { aspect-ratio: 1; border-radius: 12px; background: linear-gradient(150deg, #d9a86b, #c1863f); box-shadow: inset 0 -14px 24px rgba(0,0,0,.14); }
.hm-colis span:nth-child(2) { transform: translateY(-14px); }
.hm-colis span:nth-child(5) { transform: translateY(-8px); }
.hm-carte {
	position: absolute; z-index: 2;
	display: flex; align-items: center; gap: 11px;
	padding: 12px 15px;
	border-radius: var(--ec-r-md);
	background: #fff; color: var(--ec-ink);
	box-shadow: 0 18px 38px rgba(5, 12, 30, .3);
	animation: hmFlotte 5s ease-in-out infinite alternate;
}
@keyframes hmFlotte { from { transform: translateY(0); } to { transform: translateY(-9px); } }
.hm-carte--a { top: 8%; right: 0; }
.hm-carte--b { top: 44%; right: 12%; animation-delay: 1.4s; }
.hm-carte b { display: block; font-size: var(--ec-t-xs); font-weight: 700; }
.hm-carte span { display: block; font-size: 11.5px; color: var(--ec-ink-subtle); }
.hm-carte .ec-tile { width: 34px; height: 34px; }
@media (max-width: 940px) { .hm-carte--b { right: auto; left: 0; } }

.hm-fleche { position: absolute; top: 50%; z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; transition: background-color .2s var(--ec-ease); }
.hm-fleche:hover { background: rgba(255,255,255,.18); }
.hm-fleche--g { left: 10px; }
.hm-fleche--d { right: 10px; }
@media (max-width: 620px) { .hm-fleche { display: none; } }
.hm-points { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hm-points button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.34); cursor: pointer; transition: width .3s var(--ec-ease), background-color .3s var(--ec-ease); }
.hm-points button[aria-current="true"] { width: 24px; border-radius: 4px; background: #48d68a; }

/* --- Bloc outils (onglets) --------------------------------------------- */
.hm-outils { position: relative; z-index: 4; margin-top: -26px; }
.hm-onglets { display: flex; gap: 4px; }
.hm-onglet { padding: 12px 22px; border: 1px solid var(--ec-line); border-bottom: 0; border-radius: var(--ec-r-md) var(--ec-r-md) 0 0; background: rgba(255,255,255,.72); font: inherit; font-size: var(--ec-t-sm); font-weight: 600; color: var(--ec-ink-muted); cursor: pointer; }
.hm-onglet[aria-selected="true"] { background: #fff; color: var(--ec-ink); }
.hm-panneau { display: none; padding: 22px; border: 1px solid var(--ec-line); border-radius: 0 var(--ec-r-lg) var(--ec-r-lg) var(--ec-r-lg); background: #fff; box-shadow: var(--ec-shadow-md); }
.hm-panneau.is-on { display: block; }
.hm-ligne { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)) auto; gap: 18px; align-items: end; }
@media (max-width: 940px) { .hm-ligne { grid-template-columns: 1fr; gap: 14px; } }
.hm-intro { display: flex; align-items: center; gap: 13px; font-size: var(--ec-t-sm); color: var(--ec-ink-muted); line-height: 1.45; }
.hm-intro .ec-tile { width: 42px; height: 42px; }
.hm-champ label { display: block; margin-bottom: 6px; font-size: var(--ec-t-xs); font-weight: 600; color: var(--ec-ink-muted); }
.hm-res { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ec-line); }
.hm-res b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--ec-green-700); font-variant-numeric: tabular-nums; }
.hm-res span { font-size: var(--ec-t-sm); color: var(--ec-ink-subtle); }

/* --- Bandeau offre ------------------------------------------------------ */
.hm-offre { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 34px; padding: 26px 30px; border-radius: var(--ec-r-lg); background: linear-gradient(120deg, #0b1631, #16305f); color: #fff; }
.hm-offre__t { flex: 1 1 260px; }
.hm-offre__t b { display: block; font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; color: #48d68a; }
.hm-offre__t span { font-size: var(--ec-t-sm); color: rgba(255,255,255,.78); }
.hm-offre__m { flex: 1 1 240px; font-size: 1.0625rem; }
.hm-offre__m b { font-size: 1.7rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.hm-offre__m span { display: block; font-size: var(--ec-t-sm); color: rgba(255,255,255,.72); }

/* --- Sections ----------------------------------------------------------- */
.hm-sec { padding: 62px 0 0; }
.hm-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.hm-sec h2 { font-size: clamp(1.45rem, 3.2vw, 2rem); font-weight: 750; letter-spacing: -.03em; }
.hm-sec__lien { display: inline-flex; align-items: center; gap: 7px; font-size: var(--ec-t-sm); font-weight: 600; color: var(--ec-green-700); }

/* --- Comment ca marche --------------------------------------------------- */
.hm-etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1040px) { .hm-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hm-etapes { grid-template-columns: 1fr; } }
.hm-etape { position: relative; padding: 22px 20px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; transition: transform .3s var(--ec-ease), box-shadow .3s var(--ec-ease); }
.hm-etape:hover { transform: translateY(-3px); box-shadow: var(--ec-shadow-md); }
.hm-etape__n { font-size: var(--ec-t-xs); font-weight: 700; color: var(--ec-ink-subtle); letter-spacing: .06em; }
.hm-etape b { display: block; margin: 8px 0 6px; font-size: var(--ec-t-sm); font-weight: 700; }
.hm-etape p { font-size: var(--ec-t-xs); color: var(--ec-ink-muted); line-height: 1.55; }
.hm-etape .ec-tile { width: 46px; height: 46px; margin-bottom: 16px; }

/* --- Boutique ------------------------------------------------------------ */
.hm-shop { display: grid; grid-template-columns: 232px minmax(0, 1fr) 252px; gap: 18px; align-items: stretch; }
@media (max-width: 1080px) { .hm-shop { grid-template-columns: 1fr; } }
.hm-shop__intro, .hm-vedette { padding: 24px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; }
.hm-shop__intro h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
.hm-shop__intro p { margin: 10px 0 18px; font-size: var(--ec-t-sm); color: var(--ec-ink-muted); }
.hm-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: 14px; }
.hm-prod { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; transition: transform .3s var(--ec-ease), box-shadow .3s var(--ec-ease); }
.hm-prod:hover { transform: translateY(-3px); box-shadow: var(--ec-shadow-md); }
.hm-prod__vis { position: relative; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 12px; border-radius: var(--ec-r-md); background: var(--ec-surface-sunken); overflow: hidden; }
.hm-prod__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-prod__vis .ec-i { width: 42px; height: 42px; color: var(--ec-ink-subtle); stroke-width: 1.1; }
.hm-prod__rem { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: var(--ec-r-pill); background: var(--ec-status-alert-fg); color: #fff; font-size: 10.5px; font-weight: 700; }
.hm-prod__cat { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ec-ink-subtle); }
.hm-prod__nom { margin: 3px 0 8px; font-size: var(--ec-t-sm); font-weight: 650; line-height: 1.3; }
.hm-prod__prix { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hm-prod__prix b { font-size: var(--ec-t-sm); font-weight: 800; color: var(--ec-green-700); font-variant-numeric: tabular-nums; }
.hm-prod__prix s { font-size: 11.5px; color: var(--ec-ink-subtle); }
.hm-prod__add { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--ec-r-sm); background: var(--ec-green-500); color: #fff; flex: none; transition: background-color .2s var(--ec-ease); }
.hm-prod__add:hover { background: var(--ec-green-600); }
.hm-vedette { display: flex; flex-direction: column; background: linear-gradient(170deg, #f0f8f4, #fff 55%); }
.hm-vedette__t { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--ec-t-sm); font-weight: 700; }
.hm-vedette__t .ec-i { color: #d99022; }

/* --- Conseils ------------------------------------------------------------- */
.hm-conseils { margin-top: 62px; padding: 34px 0 38px; border-radius: var(--ec-r-lg); background: linear-gradient(120deg, #0b1631, #16305f); color: #fff; }
.hm-conseils .hm-sec__head { padding-inline: 30px; margin-bottom: 20px; }
.hm-conseils h2 { font-size: 1.35rem; }
.hm-conseils .hm-sec__lien { color: #48d68a; }
.hm-rail { display: flex; gap: 14px; padding: 0 30px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hm-rail::-webkit-scrollbar { display: none; }
.hm-conseil { flex: 0 0 clamp(220px, 34vw, 268px); scroll-snap-align: start; padding: 18px; border-radius: var(--ec-r-md); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hm-conseil .ec-tile { width: 38px; height: 38px; margin-bottom: 12px; }
.hm-conseil b { display: block; margin-bottom: 6px; font-size: var(--ec-t-sm); font-weight: 650; }
.hm-conseil p { font-size: var(--ec-t-xs); color: rgba(255,255,255,.72); line-height: 1.55; }

/* --- Preuves --------------------------------------------------------------- */
.hm-preuves { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; margin-top: 26px; padding: 22px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; }
.hm-preuve { display: flex; align-items: center; gap: 12px; }
.hm-preuve b { display: block; font-size: 1.05rem; font-weight: 750; letter-spacing: -.02em; }
.hm-preuve span { display: block; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); line-height: 1.4; }
.hm-etoiles { color: #e2a33c; letter-spacing: 1px; font-size: 12px; }

/* --- Avis ------------------------------------------------------------------- */
.hm-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; }
.hm-avis__c { padding: 22px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; }
.hm-avis__c p { font-size: var(--ec-t-sm); color: var(--ec-ink-muted); line-height: 1.65; }
.hm-avis__q { display: block; margin-bottom: 10px; color: var(--ec-green-500); }
.hm-avis__w { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ec-line); }
.hm-avis__p { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ec-navy-800); color: #fff; font-size: 11px; font-weight: 700; }
.hm-avis__w b { display: block; font-size: var(--ec-t-xs); font-weight: 650; }
.hm-avis__w span { display: block; font-size: 11.5px; color: var(--ec-ink-subtle); }

/* --- Appel final -------------------------------------------------------------- */
.hm-final { margin: 62px 0 0; padding: 46px 30px; border-radius: var(--ec-r-lg); background: linear-gradient(120deg, #0a6e3b, #0fa958); color: #fff; text-align: center; }
.hm-final h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 780; letter-spacing: -.03em; max-width: 22ch; margin-inline: auto; }
.hm-final p { max-width: 56ch; margin: 12px auto 24px; color: rgba(255,255,255,.86); font-size: var(--ec-t-body); }
.hm-final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --- Bandeaux illustres : une image a la place du fond uni --------------- */
.hm-final.a-image, .hm-offre.a-image { position: relative; isolation: isolate; overflow: hidden; background: #0b1631; }
.hm-bandeau__fond { position: absolute; inset: 0; z-index: -2; display: block; }
.hm-bandeau__fond img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-bandeau__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,10,24,.9) 0%, rgba(5,10,24,.72) 55%, rgba(5,10,24,.92) 100%); }
.hm-bandeau__dire { position: relative; z-index: 1; }
.hm-final.a-image h2, .hm-final.a-image p, .hm-offre.a-image b, .hm-offre.a-image span { text-shadow: 0 2px 14px rgba(0,0,0,.6); }
/* Position des boutons, choisie depuis le back-office. */
.hm-final.b-gauche .hm-final__cta { justify-content: flex-start; }
.hm-final.b-centre .hm-final__cta { justify-content: center; }
.hm-final.b-droite .hm-final__cta { justify-content: flex-end; }
.hm-offre.b-gauche > a { order: -1; margin-right: auto; }
.hm-offre.b-centre > a { margin-inline: auto; }
.hm-offre.b-droite > a { margin-left: auto; }
@media (max-width: 700px) { .hm-offre.b-gauche > a, .hm-offre.b-centre > a, .hm-offre.b-droite > a { margin: 0; order: 0; } }
.hm-final.a-image { display: flex; align-items: center; justify-content: center; min-height: 340px; padding: 52px 34px; }
.hm-final.a-image--gauche { justify-content: flex-start; text-align: left; }
.hm-final.a-image--gauche h2, .hm-final.a-image--gauche p { margin-inline: 0; }
.hm-final.a-image--gauche .hm-final__cta { justify-content: flex-start; }
.hm-final.a-image .hm-bandeau__dire { max-width: 720px; }
.hm-offre.a-image { min-height: 190px; padding: 30px; }
.hm-offre.a-image .hm-offre__t b { color: #6ff0aa; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
@media (max-width: 700px) {
	.hm-final.a-image { min-height: 420px; padding: 40px 20px; }
	.hm-final.a-image .hm-bandeau__dire { max-width: none; }
	.hm-offre.a-image { min-height: 260px; padding: 24px 18px; }
}

/* --- Bandeau d'information ------------------------------------------------------ */
.hm-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 26px 0 0; padding: 18px 22px; border: 1px solid var(--ec-line); border-radius: var(--ec-r-lg); background: #fff; }
.hm-info__t { flex: 1 1 300px; }
.hm-info__t b { display: block; font-size: var(--ec-t-sm); font-weight: 700; }
.hm-info__t span { font-size: var(--ec-t-xs); color: var(--ec-ink-muted); }
.hm-info__x { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ec-ink-subtle); cursor: pointer; }
.hm-info__x:hover { background: var(--ec-canvas); }

/* --- Pied ------------------------------------------------------------------------- */
.hm-pied { margin-top: 62px; padding: 46px 0 0; background: #fff; border-top: 1px solid var(--ec-line); }
.hm-pied__in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 30px; padding-bottom: 34px; }
@media (max-width: 860px) { .hm-pied__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-pied__marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .hm-pied__in { grid-template-columns: 1fr; } }
.hm-pied__marque .ec-logo { flex-direction: row; gap: 9px; }
.hm-pied__marque .ec-logo__mark { width: 26px; height: 25px; }
.hm-pied__marque p { margin-top: 12px; max-width: 34ch; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); line-height: 1.6; }
.hm-pied__col { display: flex; flex-direction: column; gap: 9px; }
.hm-pied__col b { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.hm-pied__col a { font-size: var(--ec-t-sm); color: var(--ec-ink-muted); }
.hm-pied__col a:hover { color: var(--ec-green-700); }
.hm-pied__bas { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 0 26px; border-top: 1px solid var(--ec-line); font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }

/* Les drapeaux vivent dans les menus deroulants : taille imposee. */
.mado-home .ec-flag { width: 21px !important; height: 15px !important; flex: none; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 31, 68, .14); position: static !important; transform: none !important; }
.mado-home .ec-sel__btn .ec-flag, .mado-home .ec-sel__opt .ec-flag { display: inline-block; }
.mado-home #ec-flagbank { display: none !important; }

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

/* Confort tactile, mesure au navigateur dans un cadre de 320 px le
   18 aout 2026. Sur la page d'accueil, le bouton d'ajout au panier des
   cartes produit faisait 34 px, la croix de fermeture 34 px et le nom du
   produit 18 px. Seule la hauteur touchable change : ni la typographie,
   ni les couleurs, ni l'espacement visible. Le declenchement se fait sur
   le type de pointeur autant que sur la largeur, pour couvrir les
   tablettes larges sans jamais toucher l'affichage a la souris. */
@media (max-width: 900px), (pointer: coarse) {
	.mado-home .hm-prod__add { min-height: 44px; height: auto; }
	.mado-home .hm-info__x { min-width: 44px; min-height: 44px; }
	.mado-home .hm-prod__nom { display: inline-flex; align-items: center; min-height: 44px; }
	.mado-home .ec-origin,
	.mado-home a .ec-origin,
	.mado-home button.ec-origin { min-height: 44px !important; height: auto !important; }
	.mado-home .hm-prod__add,
	.mado-home .hm-info__x { -webkit-tap-highlight-color: transparent; }
	.mado-home .hm-prod__add:active { transform: scale(.97); }
}/* --- Menus de la barre superieure ---------------------------------- */
.ec-top__actions { position: relative; }
.ec-pop {
	position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
	width: min(384px, calc(100vw - 32px));
	display: flex; flex-direction: column;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-lg);
	background: var(--ec-surface);
	box-shadow: 0 18px 48px rgba(15, 32, 56, .16);
	overflow: hidden;
	animation: ecPopIn .22s cubic-bezier(.16,1,.3,1) both;
}
.ec-pop[hidden] { display: none !important; }
@keyframes ecPopIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ec-pop { animation: none; } }
.ec-pop__head { display: flex; align-items: center; gap: var(--ec-s3); padding: var(--ec-s4) var(--ec-s5); border-bottom: 1px solid var(--ec-line); }
.ec-pop__head b { font-size: var(--ec-t-sm); font-weight: 700; }
.ec-pop__head > span { font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }
.ec-pop__act { margin-left: auto; border: 0; background: none; padding: 0; font: inherit; font-size: var(--ec-t-xs); font-weight: 600; color: var(--ec-green-700); cursor: pointer; }
.ec-pop__act:hover { text-decoration: underline; }
.ec-pop__body { max-height: 340px; overflow-y: auto; }
.ec-pop__foot { display: flex; align-items: center; justify-content: center; gap: 7px; padding: var(--ec-s4); border-top: 1px solid var(--ec-line); background: var(--ec-canvas); font-size: var(--ec-t-sm); font-weight: 600; color: var(--ec-green-700); }
.ec-pop__foot .ec-i { width: 15px; height: 15px; }
.ec-pop__foot:hover { background: #f1f7f4; }
.ec-pop__tot { display: flex; align-items: baseline; justify-content: space-between; padding: var(--ec-s4) var(--ec-s5); border-top: 1px solid var(--ec-line); }
.ec-pop__tot span { font-size: var(--ec-t-sm); color: var(--ec-ink-subtle); }
.ec-pop__tot b { font-size: var(--ec-t-h3); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ec-pop__id { display: flex; align-items: center; gap: var(--ec-s3); padding: var(--ec-s5); border-bottom: 1px solid var(--ec-line); }
.ec-pop__pic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ec-navy-800); color: #fff; font-size: var(--ec-t-xs); font-weight: 800; }
.ec-pop__id b { display: block; font-size: var(--ec-t-sm); font-weight: 700; }
.ec-pop__id span span { display: block; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }

.ec-poplink { display: flex; align-items: center; gap: var(--ec-s3); width: 100%; padding: var(--ec-s3) var(--ec-s5); border: 0; background: none; font: inherit; font-size: var(--ec-t-sm); color: var(--ec-ink-muted); text-align: left; cursor: pointer; transition: background-color var(--ec-dur-fast) var(--ec-ease), color var(--ec-dur-fast) var(--ec-ease); }
.ec-poplink:hover { background: var(--ec-canvas); color: var(--ec-ink); }
.ec-poplink .ec-i { width: 16px; height: 16px; flex: none; color: var(--ec-ink-subtle); }
.ec-poplink .ec-i:last-child { margin-left: auto; }
.ec-poplink--out { border-top: 1px solid var(--ec-line); color: #a35050; }
.ec-poplink--out .ec-i { color: #a35050; }

/* --- Notifications -------------------------------------------------- */
.ec-notif { display: flex; align-items: flex-start; gap: var(--ec-s3); padding: var(--ec-s4) var(--ec-s5); border-bottom: 1px solid var(--ec-line); transition: background-color var(--ec-dur-fast) var(--ec-ease); }
.ec-notif:last-child { border-bottom: 0; }
.ec-notif:hover { background: var(--ec-canvas); }
.ec-notif--new { background: #f6fcf9; }
.ec-notif--new:hover { background: #eef8f3; }
.ec-notif .ec-tile { width: 34px; height: 34px; flex: none; }
.ec-notif .ec-tile .ec-i { width: 17px; height: 17px; }
.ec-notif__b { flex: 1; min-width: 0; }
.ec-notif__b b { display: block; font-size: var(--ec-t-sm); font-weight: 650; color: var(--ec-ink); }
.ec-notif__b > span { display: block; margin-top: 2px; font-size: var(--ec-t-xs); color: var(--ec-ink-muted); line-height: 1.55; }
.ec-notif__b i { display: block; margin-top: 5px; font-size: 11px; font-style: normal; color: var(--ec-ink-subtle); }
.ec-notif--big { padding: var(--ec-s5) var(--ec-s6); align-items: center; }
.ec-notif--big .ec-tile { width: 42px; height: 42px; }
.ec-notif--big .ec-tile .ec-i { width: 20px; height: 20px; }
.ec-notif--big .ec-notif__b b { font-size: var(--ec-t-body); }
.ec-notif__side { display: flex; align-items: center; gap: var(--ec-s3); flex: none; }
.ec-notif__side i { font-style: normal; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); white-space: nowrap; }
.ec-notif__side .ec-i { width: 15px; height: 15px; color: var(--ec-ink-subtle); }
.ec-notiflist { display: flex; flex-direction: column; }

/* --- Panier --------------------------------------------------------- */
.ec-cartline { display: flex; align-items: center; gap: var(--ec-s3); padding: var(--ec-s4) var(--ec-s5); border-bottom: 1px solid var(--ec-line); }
.ec-cartline:last-child { border-bottom: 0; }
.ec-cartline__logo { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 800; }
.ec-cartline__logo--img { background: var(--ec-canvas); overflow: hidden; }
.ec-cartline__logo--img img { width: 100%; height: 100%; object-fit: cover; }
.ec-cartline__logo .ec-i { width: 18px; height: 18px; }
.ec-cartline__b { flex: 1; min-width: 0; }
.ec-cartline__b b { display: block; font-size: var(--ec-t-sm); font-weight: 650; }
.ec-cartline__b span { display: block; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }
.ec-cartline__q { font-size: var(--ec-t-sm); color: var(--ec-ink-subtle); }

.ec-cartlist { display: flex; flex-direction: column; }
.ec-cartrow { display: flex; align-items: center; gap: var(--ec-s4); padding: var(--ec-s4) 0; border-bottom: 1px solid var(--ec-line); }
.ec-cartrow:last-child { border-bottom: 0; }
.ec-cartrow__b { flex: 1 1 220px; min-width: 0; }
.ec-cartrow__b b { display: block; font-size: var(--ec-t-sm); font-weight: 650; }
.ec-cartrow__b span { display: block; font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }
.ec-cartrow__p { flex: none; font-size: var(--ec-t-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.ec-qty { display: flex; align-items: center; gap: 2px; flex: none; border: 1px solid var(--ec-line-strong); border-radius: var(--ec-r-pill); padding: 2px; }
.ec-qty a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ec-ink-subtle); }
.ec-qty a:hover { background: var(--ec-canvas); color: var(--ec-ink); }
.ec-qty .ec-i { width: 14px; height: 14px; }
.ec-qty button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ec-ink-subtle); cursor: pointer; transition: background-color var(--ec-dur-fast) var(--ec-ease); }
.ec-qty button:hover { background: var(--ec-canvas); color: var(--ec-ink); }
.ec-qty .ec-i { width: 14px; height: 14px; }
.ec-qty b { min-width: 22px; text-align: center; font-size: var(--ec-t-sm); font-variant-numeric: tabular-nums; }

/* --- Recherche globale ---------------------------------------------- */
.ec-search { position: relative; }
.ec-results {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
	border: 1px solid var(--ec-line);
	border-radius: var(--ec-r-lg);
	background: var(--ec-surface);
	box-shadow: 0 18px 48px rgba(15, 32, 56, .16);
	overflow: hidden;
	animation: ecPopIn .2s cubic-bezier(.16,1,.3,1) both;
}
.ec-results .ec-result { display: flex !important; align-items: center; }
.ec-result { display: flex; align-items: center; gap: var(--ec-s3); padding: var(--ec-s4) var(--ec-s5); border-bottom: 1px solid var(--ec-line); font-size: var(--ec-t-sm); color: var(--ec-ink-muted); }
.ec-result:last-child { border-bottom: 0; }
.ec-result:hover, .ec-result.is-on { background: var(--ec-canvas); color: var(--ec-ink); }
.ec-result > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ec-result b { display: block; font-weight: 650; color: var(--ec-ink); line-height: 1.35; }
.ec-result > span:first-child > span { line-height: 1.45; }
.ec-result span { font-size: var(--ec-t-xs); color: var(--ec-ink-subtle); }
.ec-result > .ec-i { width: 15px; height: 15px; margin-left: auto; flex: none; align-self: center; color: var(--ec-ink-subtle); }
.ec-result__none { padding: var(--ec-s5); font-size: var(--ec-t-sm); color: var(--ec-ink-subtle); }

/* --- Toasts ---------------------------------------------------------- */
.ec-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.ec-toast {
	display: flex; align-items: center; gap: var(--ec-s3);
	max-width: min(380px, calc(100vw - 36px));
	padding: var(--ec-s4) var(--ec-s5);
	border-radius: var(--ec-r-md);
	background: var(--ec-navy-900, #0f2038);
	color: #fff;
	font-size: var(--ec-t-sm);
	box-shadow: 0 14px 34px rgba(15, 32, 56, .3);
	animation: ecToastIn .3s cubic-bezier(.16,1,.3,1) both;
	pointer-events: auto;
}
.ec-toast--out { animation: ecToastOut .26s cubic-bezier(.16,1,.3,1) both; }
.ec-toast .ec-i { width: 17px; height: 17px; flex: none; color: #6fe0a5; }
@keyframes ecToastIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ecToastOut { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .ec-toast { animation: none; } }

.ec-iconbtn[aria-expanded="true"] { background: var(--ec-canvas); color: var(--ec-ink); }
.ec-fade { animation: ecFadeOut .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes ecFadeOut { to { opacity: 0; transform: translateX(14px); } }
.ec-seg a { display: inline-flex; align-items: center; gap: 5px; }
.ec-seg a span { font-size: var(--ec-t-xs); opacity: .7; }
.ec-act { display: inline-grid; place-items: center; }
a.ec-act { text-decoration: none; }
a.ec-brands__next { display: grid; place-items: center; }
.ec-feed__text { color: inherit; }
.ec-feed a.ec-feed__text:hover { color: var(--ec-green-700); }
.ec-ref a { color: inherit; }
.ec-ref a:hover { color: var(--ec-green-700); }
a.ec-merchant { color: inherit; }/* --- Offre nouveau client : le montant se voit --------------------------- */
.hm-offre__m b { font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.02em; color: #48d68a; }
.hm-offre__m { font-size: 1rem; line-height: 1.35; }
.hm-offre__m > span { display: block; margin-top: 4px; font-size: var(--ec-t-xs); color: rgba(255,255,255,.7); }

/* --- Bande produits ---------------------------------------------------- */
.bd { position: relative; --bd-w: 172px; }
.bd__piste {
	display: flex; gap: 12px;
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	padding: 6px 2px 12px;
	margin: 0 -2px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bd__piste::-webkit-scrollbar { display: none; }

.mado-home a.bd__carte, .bd__carte {
	flex: 0 0 var(--bd-w);
	scroll-snap-align: start;
	display: block;
	padding: 10px;
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,.5);
	background: rgba(255,255,255,.95);
	color: var(--ec-ink);
	box-shadow: 0 16px 34px rgba(5,12,30,.24);
	transition: transform .35s var(--ec-ease), box-shadow .35s var(--ec-ease);
}
.bd__vis {
	position: relative; display: block;
	aspect-ratio: 1; border-radius: 13px; overflow: hidden;
	background: linear-gradient(150deg, #d9a86b, #c1863f);
	box-shadow: inset 0 -16px 26px rgba(0,0,0,.13);
}
.bd__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bd__vis > svg { position: absolute; inset: 0; margin: auto; width: 34px !important; height: 34px !important; color: rgba(255,255,255,.9); }
.bd__tag {
	position: absolute; top: 8px; left: 8px;
	padding: 3px 8px; border-radius: 999px;
	background: var(--ec-green-600, #16a34a); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.bd__n {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 10px; min-height: 34px;
	font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--ec-ink);
}
.bd__p { display: block; margin-top: 4px; font-size: 13px; font-weight: 750; color: var(--ec-green-700, #15803d); }
.bd__p small { display: block; margin-top: 1px; font-size: 11px; font-weight: 600; color: var(--ec-ink-subtle); }
.bd__carte--vide { pointer-events: none; }
.bd__carte--vide .bd__n { min-height: 34px; }

.bd__f {
	position: absolute; top: calc(50% - 30px); z-index: 4;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.3);
	background: rgba(11,22,49,.74);
	-webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
	color: #fff; cursor: pointer;
	box-shadow: 0 10px 24px rgba(5,12,30,.3);
	transition: opacity .25s var(--ec-ease), transform .25s var(--ec-ease);
}
.bd__f svg { width: 20px; height: 20px; }
.bd__f--g { left: -16px; }
.bd__f--d { right: -16px; }
.bd__f[disabled] { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
	.bd__carte:hover { transform: translateY(-4px); box-shadow: 0 22px 42px rgba(5,12,30,.3); }
	.bd__f:hover { transform: scale(1.06); }
}
@media (max-width: 940px) {
	.bd { --bd-w: 144px; }
	.bd__f--g { left: -8px; }
	.bd__f--d { right: -8px; }
}
@media (max-width: 420px) {
	.bd { --bd-w: 132px; }
	.bd__f { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
	.bd__piste { scroll-behavior: auto; }
	.bd__carte, .bd__f { transition: none; }
}

/* --- Accueil : la scene passe en colonne sous 940px -------------------- */
@media (max-width: 940px) {
	.hm-scene { min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
	.hm-scene > .bd { grid-column: 1 / -1; }
	.hm-scene .hm-carte { position: static; z-index: auto; width: auto; }
	.hm-scene .hm-carte b { font-size: var(--ec-t-xs); }
	.hm-scene__photo { position: static; grid-column: 1 / -1; aspect-ratio: 16/10; }
}

/* --- Boutique : la scene aussi ---------------------------------------- */
.bq-scene { min-height: 0; display: block; }
.bq-scene .bd { position: relative; z-index: 2; }
.bq-socle { position: absolute; inset: auto 0 10%; margin-inline: auto; pointer-events: none; }
@media (max-width: 940px) {
	.bq-note { position: static; margin-top: 12px; display: inline-flex; }
	.bq-hero__in { gap: 24px; }
}

/* --- Barre haute : plus rien ne deborde sous 940px -------------------- */
@media (max-width: 940px) {
	.hm-top__in { gap: 10px; }
	.hm-top__end { gap: 6px; }
	.hm-lien { height: 40px; padding: 0 12px; white-space: nowrap; }
	.hm-lien--plein { padding: 0 14px; }
}
@media (max-width: 620px) {
	.hm-top__end .sh-cur .hm-lien span[data-cur-label] { display: none; }
	.hm-lien { padding: 0 10px; gap: 6px; }
}

/* --- Selecteur de devise : le menu etait reste sans styles ------------ */
.sh-cur { position: relative; }
.sh-cur__menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
	min-width: 214px; padding: 6px;
	border-radius: var(--ec-r-md, 14px);
	border: 1px solid var(--ec-line, rgba(16,31,68,.1));
	background: #fff;
	box-shadow: 0 22px 54px rgba(5,12,30,.22);
}
.sh-cur__opt {
	display: flex; align-items: baseline; gap: 9px; width: 100%;
	padding: 10px 11px; border: 0; border-radius: 10px;
	background: none; cursor: pointer; text-align: left;
	font: inherit; color: var(--ec-ink);
	transition: background-color .16s var(--ec-ease);
}
.sh-cur__opt b { font-size: 13px; font-weight: 750; }
.sh-cur__opt span { font-size: 12.5px; color: var(--ec-ink-subtle); }
.sh-cur__opt[aria-selected="true"] { background: var(--ec-canvas, #f4f6fb); }
.sh-cur__opt:hover { background: var(--ec-canvas, #f4f6fb); }/* Un element masque doit vraiment disparaitre : plusieurs composants
   posent display:flex, qui l'emportait sur l'attribut hidden. */
[hidden] { display: none !important; }

/* Deux actions cote a cote dans les entetes. */
.ec-head .ec-cluster, .ec-hero__cta { display: flex; align-items: center; gap: var(--ec-s3); flex-wrap: wrap; }
.ec-hero__cta { justify-content: flex-end; }
@media (max-width: 720px) { .ec-hero__cta { justify-content: flex-start; } .ec-hero__cta > a, .ec-head .ec-cluster > a { flex: 1 1 auto; } }

/* --- Tableaux : le defilement doit se voir et la premiere colonne rester --- */
.ec-tablewrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ec-tablewrap::after {
	content: '';
	position: sticky; right: 0; top: 0;
	display: block; float: right;
	width: 26px; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(16, 31, 68, .07));
	pointer-events: none;
}

@media (max-width: 720px) {
	.ec-tablewrap { scrollbar-width: thin; }
	.ec-tablewrap::-webkit-scrollbar { height: 5px; }
	.ec-tablewrap::-webkit-scrollbar-thumb { background: var(--ec-line-strong); border-radius: 3px; }
	.ec-table { min-width: 0; }
	.ec-table th, .ec-table td { padding: 12px 10px; font-size: var(--ec-t-xs); white-space: nowrap; }
	.ec-table th:first-child, .ec-table td:first-child {
		position: sticky; left: 0; z-index: 2;
		background: var(--ec-surface);
		box-shadow: 6px 0 10px -8px rgba(16, 31, 68, .25);
	}
	.ec-table tr:hover td:first-child { background: var(--ec-surface); }

	/* --- Cartes chiffrees : deux par ligne, format carre ---------------- */
	.ec-stats, .ec-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
	.ec-stat { padding: 14px !important; gap: 8px; }
	.ec-stat__top { flex-direction: column; align-items: flex-start !important; gap: 8px; }
	.ec-stat__top .ec-tile { width: 34px; height: 34px; }
	.ec-stat__top .ec-tile .ec-i { width: 17px; height: 17px; }
	.ec-stat__label { font-size: 11.5px !important; line-height: 1.3; min-height: 0 !important; }
	.ec-stat__num { font-size: 1.5rem !important; margin-top: 2px; }
	.ec-stat__unit { font-size: 11px; }
	.ec-stat__link { font-size: 11.5px; margin-top: 6px; }
	.ec-stat__link .ec-i { width: 12px; height: 12px; }

	/* --- Adresses : plus aucun chevauchement ---------------------------- */
	.ec-addr { flex-wrap: wrap; gap: 12px; padding: 14px; }
	.ec-addr__pick { margin-top: 0; }
	.ec-addr__tile { width: 40px; height: 40px; }
	.ec-addr__tile .ec-i { width: 19px; height: 19px; }
	.ec-addr__main { flex: 1 1 100%; order: 3; }
	.ec-addr__side { flex: 1 1 100%; order: 4; padding-top: 10px; border-top: 1px solid var(--ec-line); }
	.ec-addr__name { margin: 6px 0 4px; font-size: var(--ec-t-body); }
	.ec-addr__lines { font-size: var(--ec-t-sm); }
	.ec-menu { order: 2; margin-left: auto; }

	/* --- Barre laterale : la croix ne recouvre plus le logo -------------- */
	.ec-side__brand { position: relative; padding-right: 52px; }
	.ec-side__close { position: absolute; top: 10px; right: 10px; }

	/* --- Chat ------------------------------------------------------------ */
	.ec-chat__ctx { padding-left: 14px; padding-right: 14px; }
	.ec-compose__box { flex-wrap: wrap; row-gap: 8px; padding: 8px; border-radius: 18px; }
	.ec-compose__box textarea { flex: 1 1 100%; order: 1; padding: 4px 6px; }
	.ec-compose__box .ec-compose__ico { order: 2; }
	.ec-compose__box .ec-water { order: 3; margin-left: auto; }
	.ec-compose__foot { flex-direction: column; align-items: flex-start; gap: 4px; }
	.ec-compose__foot span, .ec-compose__foot a { font-size: 11.5px; }

	/* --- Frise de suivi : le trait suit les pastilles -------------------- */
	.ec-tl { padding-left: 30px; }
	.ec-tl::before { left: 13px; }
	.ec-tl__dot { left: -30px; }

	/* --- Fils d'etapes horizontaux -------------------------------------- */
	.ec-steps { overflow-x: auto; scrollbar-width: none; }
	.ec-steps::-webkit-scrollbar { display: none; }

	/* --- Mon HUB --------------------------------------------------------- */
	.ec-hubs { grid-template-columns: 1fr; }
	.ec-mkcard__code { font-size: 1.45rem; }
}

/* --- Retours utilisateur du 06\/08\/2026 : coquille mobile ------------- */
@media (max-width: 900px) {
	/* Le tiroir lateral se colle directement sous l'en-tete, sans logo redondant. */
	/* Le tiroir reste ancre au viewport (top:0) : c'est le z-index qui le fait
	   passer sous l'en-tete, jamais un decalage fixe qui pourrait se desynchroniser
	   de la vraie hauteur d'en-tete selon l'appareil. */
	.ec-side__brand { padding: 14px 16px; min-height: 0; justify-content: flex-start; }
	.ec-side__brand > a { display: none; }
	/* Le tiroir passe desormais au-dessus de l'en-tete : sans croix, il n'y
	   aurait plus aucun moyen visible de le refermer au pouce. On la retablit,
	   a 44 px, en haut a droite du tiroir. */
	.ec-side__close { display: grid !important; }

	/* Fini le flash blanc au tap : retour visuel maitrise au lieu du surlignage systeme. */
	.ec-nav__link { -webkit-tap-highlight-color: transparent; }
	.ec-nav__link:active:not(.is-active) { background: var(--ec-canvas); }

	/* Bandeau "aucun colis en attente" plus compact, tient sur deux lignes. */
	.ec-group { padding: 14px; gap: 12px; }
	.ec-group__icon { width: 36px; height: 36px; }
	.ec-group__icon svg { width: 18px; height: 18px; }
	.ec-group__text strong { font-size: var(--ec-t-body); }
	.ec-group__text span { font-size: var(--ec-t-xs); }

	/* Mon HUB et Creer une pre-alerte cote a cote, meme gabarit, plus petits. */
	.ec-hero__cta { align-items: stretch; }
	.ec-hero__cta > a { flex: 1 1 0; min-width: 0; }
	/* 44 px et non 40 : mesure au navigateur, ces deux actions du haut du
	   tableau de bord etaient les dernieres sous la barre du confort tactile. */
	/* Mesure du 20 aout, cadre de 320 a 414 px : le libelle du second bouton
	   demande 141 px la ou la moitie de la ligne n'en offre que 116. Le texte
	   etait coupe a toutes les largeurs testees, jamais seulement sur les
	   petits ecrans. On garde les deux actions sur une seule ligne, mais le
	   libelle peut passer sur deux lignes : la hauteur s'adapte, plus rien
	   n'est tronque, et le haut du tableau de bord ne s'allonge pas. */
	.ec-hero__cta > a .ec-origin,
	.ec-hero__cta > a .ec-water {
		width: 100%;
		height: auto;
		min-height: 44px;
		padding: 6px 10px;
		font-size: var(--ec-t-xs);
		white-space: normal;
		line-height: 1.2;
		text-align: center;
		overflow-wrap: anywhere;
	}
	/* Le vrai verrou n'etait pas le bouton mais son libelle interne :
	   .ec-water__label porte white-space: nowrap depuis mado-ec-buttons.php.
	   On ne leve ce verrou que dans les deux actions du tableau de bord et
	   uniquement sous 900 px ; le bouton garde partout ailleurs sa ligne unique. */
	.ec-hero__cta .ec-water__label,
	.ec-hero__cta .ec-origin__label {
		display: inline;
		white-space: normal;
		text-align: center;
		min-width: 0;
		max-width: 100%;
	}
	/* En inline, l'icone s'ecoule dans le texte au lieu de monopoliser une
	   ligne : deux lignes au lieu de trois sur un ecran de 320 px. */
	.ec-hero__cta .ec-water__label svg,
	.ec-hero__cta .ec-origin__label svg { vertical-align: -3px; margin-right: 6px; }
	/* Les deux actions et leur phrase d'explication etaient disposees en flex :
	   boutons a flex-basis 0, paragraphe a flex-basis 100 %. Le passage a la
	   ligne dependait alors d'une somme au pixel pres, et basculait entre 375
	   et 399 px de vue : a 414 px les deux boutons se retrouvaient ecrases a
	   9 px de large, une lettre par ligne. Une grille de deux colonnes rend le
	   resultat identique a toutes les largeurs. */
	.ec-hero__cta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--ec-s3);
		align-items: stretch;
	}
	.ec-hero__cta > a { min-width: 0; display: flex; }
	.ec-hero__cta > .ec-subtle { grid-column: 1 / -1; margin-top: 2px; }
	.ec-hero__cta > a .ec-origin,
	.ec-hero__cta > a .ec-water { height: auto; align-self: stretch; }
	.ec-hero__cta .ec-subtle { flex: 1 1 100%; order: 3; margin-top: 2px; }
}


/* ------------------------------------------------------------------
   En-tete unifie du site pose au-dessus de l'application.
   Sur bureau : la barre laterale et la barre superieure descendent de la
   hauteur de l'en-tete, sinon elles passeraient dessous.
   Sur telephone : on ne l'affiche pas. Deux barres collantes plus la barre
   de navigation basse mangeraient un tiers de l'ecran ; la barre de
   l'application porte deja le vrai logo MAD'O et le menu.
   ------------------------------------------------------------------ */
.mado-ec { --mado-hdr-h: 68px; }

@media (min-width: 901px) {
	.mado-ec .ec-side { top: var(--mado-hdr-h); height: calc(100vh - var(--mado-hdr-h)); }
	.mado-ec .ec-top { top: var(--mado-hdr-h); }
	.mado-ec .ec-app { min-height: calc(100vh - var(--mado-hdr-h)); }

	/* Depuis que l'en-tete du site coiffe l'application, la barre de
	   l'espace client repetait exactement les memes elements une ligne plus
	   bas : le meme menu, la meme devise, le meme panier, les memes
	   notifications, le meme compte. On ne garde en dessous que ce qui
	   n'existe pas dans l'en-tete : le bouton du menu lateral, la recherche,
	   la messagerie et l'aide. */
	.mado-ec .ec-top .gm,
	.mado-ec .ec-top__actions .ecd,
	.mado-ec .ec-top__actions [data-ec-open="panier"],
	.mado-ec .ec-top__actions [data-ec-open="notifs"],
	.mado-ec .ec-top__actions .ec-account { display: none !important; }

	/* Le logo se trouvait deux fois l'un au-dessus de l'autre : celui de
	   l'en-tete, puis celui de la barre laterale, quarante pixels plus bas.
	   On garde celui de l'en-tete, commun a tout le site. */
	.mado-ec .ec-side__brand { display: none !important; }
	.mado-ec .ec-side__nav { padding-top: var(--ec-s5); }
}

@media (max-width: 900px) {
	.mado-ec #madoHdr,
	.mado-ec .mado-hdr__drawer { display: none !important; }
}

/* ------------------------------------------------------------------
   Confort tactile, releve le 18 aout 2026 sur le CSS reellement charge.
   Onze familles de commandes descendaient sous 44 px de haut : boutons
   compacts, onglets segmentes, menus de ligne, selecteurs de quantite.
   On ne touche ni aux couleurs, ni aux rayons, ni aux polices : seule la
   hauteur utile change, et uniquement sous 900 px. Le bureau garde ses
   proportions d'origine.
   ------------------------------------------------------------------ */
/* La largeur ne suffit pas : un iPad Pro en portrait fait 1024 px et reste
   un ecran tactile. On declenche donc aussi sur le type de pointeur, ce qui
   n'affecte jamais une souris. */
@media (max-width: 900px), (pointer: coarse) {
	.ec-btn,
	.ec-btn--sm,
	.ec-origin--sm,
	.ec-origin--xs,
	.ec-promo .ec-btn,
	.ec-act,
	.ec-chip,
	.ec-menu__pop button,
	.ec-menu__pop .ec-menu__item,
	.ec-qty a,
	.ec-qty button {
		min-height: 44px;
		height: auto;
	}

	/* Les onglets defilent horizontalement : on les allonge sans les
	   elargir, pour ne pas casser le defilement. */
	.ec-seg button,
	.ec-seg a { min-height: 44px; height: auto; }

	/* Mesure au navigateur, cadre de 320 a 414 px : ces deux familles
	   restaient juste sous la barre des 44 px. Les liens du tiroir etaient
	   a 41 px, les boutons d'icone de la barre superieure a 40 x 40. */
	.ec-nav__link { height: auto; min-height: 44px; }
	.ec-iconbtn { min-width: 44px; min-height: 44px; }

	/* Quand le tiroir s'ouvre, la barre du haut reste visible juste
	   au-dessus avec son logo : celui du tiroir faisait doublon et poussait
	   les liens vers le bas. On retire le logo, jamais le bouton de
	   fermeture, qui est le seul moyen de refermer au pouce. */
	.ec-side__brand > a { display: none !important; }
	.ec-side__brand {
		padding: var(--ec-s3) var(--ec-s4) var(--ec-s2) !important;
		justify-content: flex-end !important;
		min-height: 52px;
	}
	.ec-side__close { position: static !important; }

	/* Deuxieme passe de mesure : listes deroulantes maison, bouton retour,
	   favori et pastilles du carrousel de la place de marche. */
	.ec-sel__btn,
	.ec-sel__opt { height: auto !important; min-height: 44px !important; }
	.ec-back { min-width: 44px !important; min-height: 44px !important; }
	.mado-ec .mkt-coeur { width: 44px !important; height: 44px !important; }

	/* Les pastilles du carrousel restent fines a l'oeil, mais leur zone
	   touchable est portee a 44 px de haut par un calque transparent. */
	.mado-ec .mkt-dot { position: relative; }
	.mado-ec .mkt-dot::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 44px;
		height: 44px;
	}

	/* Cases a cocher et boutons radio : la case reste petite, c'est la
	   ligne entiere qui devient cliquable au doigt. */
	.ec-check,
	.ec-payopt,
	.ec-radio,
	.ec-pick,
	.ec-usepick,
	.ec-checkcard,
	.ec-mode__top,
	.ec-typecard__top,
	.ec-pmop,
	.ec-datarow { min-height: 44px; }

	/* Retour visuel immediat au toucher, la ou il n'y en avait pas. */
	.ec-btn, .ec-act, .ec-chip, .ec-qty a, .ec-qty button,
	.ec-seg button, .ec-seg a, .ec-menu__pop .ec-menu__item {
		-webkit-tap-highlight-color: transparent;
		transition: transform 120ms cubic-bezier(.22, 1, .36, 1), background-color 120ms cubic-bezier(.22, 1, .36, 1);
	}
	.ec-btn:active, .ec-act:active, .ec-chip:active,
	.ec-qty a:active, .ec-qty button:active { transform: scale(.97); }
	.ec-menu__pop .ec-menu__item:active { background: var(--ec-canvas); }
}

/* ------------------------------------------------------------------
   Echelle de superposition unique, telephone et tablette.
   Trois barres flottantes se disputaient le premier plan : l'en-tete de
   l'application montait a 55, le tiroir a 50, le voile a 40 et la barre
   basse a 9500. Resultat : l'en-tete coupait le tiroir en deux et la barre
   basse le traversait. Un seul ordre, ici, pour tous les gabarits.

   contenu < en-tete 700 < barre basse 800 < voile 900 < tiroir 1000
   < fenetres et feuilles 1100 < bandeaux 1200
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.ec-top  { z-index: 700; }
	.mnav    { z-index: 800; }
	.ec-scrim { z-index: 900; }
	.ec-side { z-index: 1000; }

	/* Le tiroir couvrait 232 px, soit a peine 60 % d'un ecran de 390 px :
	   le contenu restait lisible derriere et donnait l'impression d'un menu
	   pose de travers. Il occupe maintenant la quasi-totalite de la largeur. */
	.ec-side { width: min(86vw, 340px); }

	/* Le voile doit vraiment couper l'acces au contenu situe derriere. */
	.ec-app.is-nav-open .ec-scrim { pointer-events: auto; }

	/* La croix du tiroir merite la meme cible tactile que le reste. */
	.ec-side__close { min-width: 44px; min-height: 44px; }
}

/* Visible au clavier, sur toutes les tailles d'ecran : l'anneau de focus
   n'existait que par defaut, et disparaissait derriere les fonds sombres. */
.ec-btn:focus-visible,
.ec-act:focus-visible,
.ec-chip:focus-visible,
.ec-iconbtn:focus-visible,
.ec-tab:focus-visible,
.ec-menu__item:focus-visible,
.ecm-bar__lien:focus-visible,
.ec-origin:focus-visible,
.ec-water:focus-visible {
	outline: 2px solid var(--ec-green-500);
	outline-offset: 2px;
	border-radius: var(--ec-r-sm);
}

/* Sur iOS un champ sous 16px force un zoom qui ne revient pas seul. */
input[type="text"], input[type="search"], input[type="tel"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"], textarea, select {
	font-size: max(16px, 1em);
}/* --- Logo commun à tout le site ------------------------------------- */
.sh-logo .ec-logo, .mado-bar__logo .ec-logo { flex-direction: row; gap: 9px; }
.sh-logo .ec-logo__mark, .mado-bar__logo .ec-logo__mark { width: 27px; height: 26px; background: var(--sh-ink, #1c1a16); }
.sh-logo .ec-logo__word, .mado-bar__logo .ec-logo__word { font-size: 1.18rem; color: var(--sh-ink, #1c1a16); }
.mado-bar--flottante .mado-bar__logo .ec-logo__mark { background: #fffdf9; }
.mado-bar--flottante .mado-bar__logo .ec-logo__word { color: #fffdf9; }
.mado-bar--flottante.is-posee .mado-bar__logo .ec-logo__mark { background: #1c1a16; }
.mado-bar--flottante.is-posee .mado-bar__logo .ec-logo__word { color: #1c1a16; }
.ec-side__brand > a { display: inline-flex; }

/* --- Bouton de deconnexion : c'est un bouton, pas une brique grise ---- */
.ec-side__exit {
	width: 100%;
	border: 0;
	border-top: 1px solid var(--ec-line);
	border-radius: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	transition: color var(--ec-dur-fast) var(--ec-ease);
}
.ec-side__exit .ec-i { width: 18px; height: 18px; color: var(--ec-ink-subtle); transition: color var(--ec-dur-fast) var(--ec-ease); }
.ec-side__exit:hover { color: #a35050; }
.ec-side__exit:hover .ec-i { color: #a35050; }

/* --- Le panneau du menu doit se caler sur l'ecran, pas sur la pastille.
   backdrop-filter cree un bloc conteneur pour les enfants fixes. ------ */
@media (max-width: 980px) {
	.gm { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.mado-bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250, 247, 242, .98); }
	.mado-bar--flottante { background: transparent; }
	.mado-bar--flottante.is-posee { background: rgba(250, 247, 242, .98); }
	.gm__list { max-width: 460px; margin-inline: auto; }
	.gm__face { white-space: normal; }
	.gm__face > span:not(.gm__chev) { flex: 1; min-width: 0; }
}

@media (max-width: 900px) {
	/* Le tiroir n'a plus besoin de son propre logo, l'en-tete l'affiche deja. */
	.ec-side__brand > a { display: none; }
}

@media (max-width: 720px) {
	/* --- Moyens de paiement : plus de blocs vides ---------------------- */
	.ec-method {
		display: grid !important;
		grid-template-columns: 46px minmax(0, 1fr) auto;
		align-items: center;
		gap: 8px 12px !important;
		padding: 14px !important;
	}
	.ec-method__logo { grid-column: 1; grid-row: 1; width: 46px; height: 34px; }
	.ec-method__body { grid-column: 2; grid-row: 1; min-width: 0; }
	.ec-method__name { font-size: var(--ec-t-sm); }
	.ec-method > .ec-act { grid-column: 3; grid-row: 1; }
	.ec-method__amount, .ec-linked {
		grid-column: 1 / -1;
		width: auto !important;
		margin: 0 !important;
		font-size: var(--ec-t-sm);
	}
	.ec-method__amount { font-size: 1.1rem; font-weight: 800; }
	.ec-method > a, .ec-method > .ec-origin { grid-column: 1 / -1; width: 100%; }
	.ec-method--add { grid-template-columns: 46px minmax(0, 1fr); }

	/* --- Fiche de demande : une seule colonne ------------------------- */
	.ec-grid3, .ec-grid2, .ec-duo, .ec-detail__grid { grid-template-columns: 1fr !important; }
	.ec-thread { padding: 14px; }
	.ec-msg__text { max-width: none; }

	/* --- Tableaux : de la place pour chaque colonne -------------------- */
	.ec-table { min-width: 720px !important; }
	.ec-table td, .ec-table th { white-space: nowrap; }
	.ec-table .ec-dest, .ec-table .ec-track, .ec-table .ec-what { white-space: normal; }
	.ec-dest, .ec-track { min-width: 132px; }
	.ec-track > * + * { margin-top: 3px; }

	/* --- Onglets : ils ne debordent plus de la carte ------------------- */
	.ec-card > .ec-toolbar, .ec-panel > .ec-toolbar { padding-inline: 14px; }
	.ec-tabs { padding-inline: 2px; }

	/* --- Cartes chiffrees : le lien colle au bas ----------------------- */
	.ec-stat { min-height: 128px; justify-content: space-between; }
}
/* 1. Bouton "eau" : le remplissage debordait du bouton. Le canvas
   d'animation n'etait pas decoupe par les coins arrondis, une barre
   verte apparaissait sous le bouton. */
.ec-water { overflow: hidden; }
.ec-water__canvas, .ec-water__glass { border-radius: inherit; }
.ec-origin { overflow: hidden; }

/* 2. Vitrine boutique : les trois onglets s'affichaient en meme temps.
   L'attribut hidden etait annule par le display:grid de la grille. */
.bqm [hidden], .bqm-grille[hidden], [data-bqm-pan][hidden], [data-bqm-slide][hidden] { display: none !important; }

/* 3. Accueil : les produits sans photo laissaient un grand vide blanc.
   Ils recoivent une vignette coloree, comme sur la boutique. */
.hm-prod__vis {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 150px;
	border-radius: 14px;
	background: linear-gradient(135deg, #1f3f7a, #4d8ad6);
	color: rgba(255, 255, 255, .92);
	overflow: hidden;
}
.hm-prod__vis img { width: 100%; height: 100%; object-fit: cover; }
.hm-prod__vis > .ec-i { width: 52px; height: 52px; stroke-width: 1.4; color: rgba(255,255,255,.85); }

/* Les cartes s'etiraient a la hauteur de la plus grande : un grand vide
   s'ouvrait entre le nom du produit et son prix. */
.hm-promos .hm-prod { align-self: start; }
.hm-prod:nth-child(3n) .hm-prod__vis { background: linear-gradient(135deg, #1f7a5c, #4fc59b); }
.hm-prod:nth-child(3n+2) .hm-prod__vis { background: linear-gradient(135deg, #a8306a, #e07aa8); }
.hm-prod:nth-child(4n) .hm-prod__vis { background: linear-gradient(135deg, #9a6a12, #dcae4b); }

/* 4. Avis clients : les initiales etaient illisibles, texte sombre sur
   pastille sombre. */
.hm-avis__p, .hm-avis__p b, .hm-avis__p span { color: #fff !important; }

/* 5. Boutique, bandeau du haut : les icones des trois atouts se
   confondaient avec le fond. */
.bqm-atout__ic { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.bqm-face { color: #fff !important; }

/* 6. Rail de conseils : la derniere carte etait coupee en plein mot.
   Un degrade indique maintenant qu'il faut faire defiler. */
.hm-conseils { position: relative; }
.hm-conseils::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(11, 22, 49, 0), rgba(11, 22, 49, .92));
	border-radius: 0 var(--ec-r-lg) var(--ec-r-lg) 0;
}
/* 7. Boutique : les onglets Populaires / Nouveautes / Meilleures ventes
   etaient ecrits en blanc sur fond clair, donc invisibles. */
.bqm-ong button { color: #64748b !important; }
.bqm-ong button[aria-selected="true"] { color: #0b1631 !important; font-weight: 700; }
.bqm-ong button:hover { color: #0b7a44 !important; }#mado-fond{position:fixed;inset:0;z-index:-1;pointer-events:none;contain:layout paint style;touch-action:none;-webkit-user-select:none;user-select:none;background:transparent;}#mado-fond canvas{display:block;width:100%;height:100%;}html{background:transparent !important;}html body{background:transparent !important;}html body.mado-ec{background:transparent !important;}:root {
	--vr-nuit: #0b1631;
	--vr-nuit-2: #0e2247;
	--vr-fond: #071026;
	--vr-vert: #0fa958;
	--vr-vert-clair: #3ddc84;
	--vr-encre: #eef2f8;
	--vr-encre-douce: rgba(238, 242, 248, .72);
	--vr-encre-tenue: rgba(238, 242, 248, .52);
	--vr-filet: rgba(255, 255, 255, .10);
	--vr-filet-fort: rgba(255, 255, 255, .18);
}

/* ==========================================================
   Section sombre
   ========================================================== */
.mado-sombre {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(20, 44, 92, .85), transparent 62%),
		linear-gradient(168deg, var(--vr-nuit) 0%, var(--vr-nuit-2) 46%, var(--vr-fond) 100%);
	color: var(--vr-encre);
	overflow: hidden;
}

/* La lueur qui monte du bas, comme le rose du modele. */
.mado-sombre::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -34%;
	width: min(1100px, 130%);
	height: 62%;
	transform: translateX(-50%);
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(closest-side, rgba(61, 220, 132, .34), rgba(15, 169, 88, .16) 55%, transparent 78%);
	filter: blur(18px);
}

/* La trame de points, tres discrete, qui donne la matiere. */
.mado-sombre::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: .5;
	background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
	background-size: 26px 26px;
	background-position: -9px -9px;
	-webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 12%, transparent 76%);
	mask-image: radial-gradient(ellipse at 60% 30%, #000 12%, transparent 76%);
}

/* Tout ce qui vit dans une section sombre passe en clair. */
.mado-sombre h1, .mado-sombre h2, .mado-sombre h3, .mado-sombre h4, .mado-sombre b, .mado-sombre strong { color: var(--vr-encre); }
.mado-sombre p, .mado-sombre li, .mado-sombre dd, .mado-sombre td { color: var(--vr-encre-douce); }
.mado-sombre small, .mado-sombre .ec-muted, .mado-sombre .ec-subtle, .mado-sombre dt { color: var(--vr-encre-tenue); }
.mado-sombre a { color: var(--vr-vert-clair); }
.mado-sombre a:hover { color: #fff; }
.mado-sombre hr, .mado-sombre .ec-sep { border-color: var(--vr-filet); }

/* ==========================================================
   Surface en verre
   ========================================================== */
.mado-verre {
	position: relative;
	border: 1px solid var(--vr-filet);
	border-radius: 20px;
	background: rgba(255, 255, 255, .055);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 20px 46px -26px rgba(0, 0, 0, .7);
	color: var(--vr-encre);
}
.mado-verre--haut { background: rgba(255, 255, 255, .085); border-color: var(--vr-filet-fort); }
.mado-verre p, .mado-verre li { color: var(--vr-encre-douce); }

/* Le flou d arriere-plan coute cher : sur les machines qui ne le gerent
   pas, on garde un fond translucide plein, jamais un trou transparent. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.mado-verre { background: rgba(16, 32, 64, .82); }
}
@media (prefers-reduced-transparency: reduce) {
	.mado-verre { background: rgba(16, 32, 64, .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ==========================================================
   Application aux sections deja sombres du site
   ========================================================== */
.hm-hero { position: relative; isolation: isolate; }
.hm-hero::after {
	content: "";
	position: absolute; left: 50%; bottom: -38%;
	width: min(1100px, 130%); height: 66%;
	transform: translateX(-50%);
	z-index: 0; pointer-events: none;
	background: radial-gradient(closest-side, rgba(61, 220, 132, .30), rgba(15, 169, 88, .14) 55%, transparent 78%);
	filter: blur(18px);
}
.hm-hero__in, .hm-hero__grille { position: relative; z-index: 1; }
.hm-hero .hm-atout {
	border: 1px solid var(--vr-filet);
	border-radius: 16px;
	background: rgba(255, 255, 255, .06);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	padding: 12px 14px;
}
.hm-hero .hm-atout__ic { color: var(--vr-vert-clair); }
.fx-carte { -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }

/* ==========================================================
   Fond de page : le degre monte du bas
   ==========================================================
   Le modele part d un blanc franc en haut et laisse la couleur envahir
   le bas. Meme geste ici, mais en vert MAD O, et sans blanc pur : une
   page entierement blanche fatigue et fait ressortir chaque bordure. */
html {
	background:
		radial-gradient(120% 62% at 50% -8%, #ffffff 0%, rgba(255,255,255,.72) 30%, rgba(255,255,255,0) 64%),
		linear-gradient(180deg, #ffffff 0%, #ffffff 34%, #f5fbf8 56%, #e9f5ef 78%, #dbefe5 100%) !important;
	background-attachment: fixed !important;
}
html body { background: transparent !important; }

/* Le maillage anime se pose sur le degrade, il ne le recouvre plus. */
#mado-fond { background: transparent !important; }

/* ==========================================================
   Verre vert sur les surfaces claires
   ==========================================================
   Facon iOS : translucide, floute, legerement sature, avec un contour
   vert tres retenu. Le blanc reste majoritaire dans le melange pour que
   le texte bleu nuit garde tout son contraste - c est la condition que
   vous avez posee, et elle prime sur l effet. */
.ec-card,
.ec-panel,
.ec-railcard,
.hm-atout,
.hm-carte,
.mp-plan,
.mp-calc,
.mp-band,
.bqm-carte,
.mkt-carte,
.ec-tile,
.gc-rappel {
	background: rgba(255, 255, 255, .66) !important;
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	backdrop-filter: blur(18px) saturate(180%);
	border: 1px solid rgba(15, 169, 88, .16);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 16px 34px -24px rgba(11, 22, 49, .38);
}

/* Les sections sombres et leurs cartes gardent leur propre matiere : la
   regle claire ne doit surtout pas les eclaircir. */
.mado-sombre .ec-card,
.mado-sombre .ec-panel,
.mado-sombre .ec-railcard,
.fx .fx-carte,
.hm-hero .hm-atout,
.mdp .ec-card {
	background: rgba(255, 255, 255, .06) !important;
	border-color: var(--vr-filet);
	box-shadow: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ec-card, .ec-panel, .ec-railcard, .mp-plan, .bqm-carte { background: rgba(255, 255, 255, .92) !important; }
}
@media (prefers-reduced-transparency: reduce) {
	.ec-card, .ec-panel, .ec-railcard, .mp-plan, .bqm-carte {
		background: #fff !important;
		-webkit-backdrop-filter: none; backdrop-filter: none;
	}
}