/* ==========================================================
   Mirage Informatique - dernière ligne du site [mirage_credit]
   ========================================================== */

.mml-credit {
	--mml-halo: #22c55e;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 24px;
	width: 100%;
	padding: 14px 0;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: .01em;
	color: inherit;
	box-sizing: border-box;
}
.mml-credit *, .mml-credit *::before, .mml-credit *::after { box-sizing: border-box; }
.mml-credit--clair  { color: #1f2937; }
.mml-credit--sombre { color: #e5e7eb; }
.mml-credit--centre { justify-content: center; text-align: center; }

.mml-credit a { color: inherit; text-decoration: none; }

/* --- Gauche : © et liens --- */
.mml-credit__left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	opacity: .78;
}
.mml-credit__links { display: inline-flex; flex-wrap: wrap; gap: 4px 18px; }
.mml-credit__link { position: relative; }
.mml-credit__link::before {
	content: "";
	position: absolute;
	left: -10.5px; top: 50%;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	transform: translateY(-50%);
}
.mml-credit__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.mml-credit__link:hover::after,
.mml-credit__link:focus-visible::after { transform: scaleX(1); }

/* --- Signature Mirage --- */
.mml-credit__sign {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 15px 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(127, 127, 127, .28);
	background-color: rgba(127, 127, 127, .06);
	white-space: nowrap;
	background-image: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--mml-halo) 22%, transparent) 50%, transparent 65%);
	background-size: 300% 100%;
	background-position: 120% 0;
	background-repeat: no-repeat;
	transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease, transform .4s ease;
	-webkit-tap-highlight-color: transparent;
}
.mml-credit__sign:hover,
.mml-credit__sign:focus-visible {
	border-color: color-mix(in srgb, var(--mml-halo) 55%, transparent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--mml-halo) 12%, transparent),
	            0 6px 24px -8px color-mix(in srgb, var(--mml-halo) 60%, transparent);
	background-color: color-mix(in srgb, var(--mml-halo) 8%, transparent);
	outline: none;
}
.mml-credit__sign:active { transform: scale(.97); }
/* 1.5.2 : option « Ombre portée au survol » décochée */
.mml-credit.no-shadow .mml-credit__sign:hover,
.mml-credit.no-shadow .mml-credit__sign:focus-visible { box-shadow: none; }

/* Reflet qui traverse la pastille */
.mml-credit__sign:hover,
.mml-credit.is-visible .mml-credit__sign { animation: mml-sweep 1.4s ease forwards; }

.mml-credit__label { opacity: .7; }
.mml-credit__name  { font-weight: 650; }
.mml-credit__mark,
.mml-credit__logo  { display: block; height: 18px; width: auto; flex: 0 0 auto; }

/* Effet mirage : ondulation de chaleur sur le nom et le logo */
.mml-credit.has-effect .mml-credit__sign:hover .mml-credit__name,
.mml-credit.has-effect .mml-credit__sign:hover .mml-credit__mark,
.mml-credit.has-effect .mml-credit__sign:hover .mml-credit__logo,
.mml-credit.has-effect.is-shimmering .mml-credit__name,
.mml-credit.has-effect.is-shimmering .mml-credit__mark {
	filter: var(--mml-filter);
}
.mml-credit__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --- Le halo lumineux qui clignote --- */
.mml-halo {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	flex: 0 0 8px;
	border-radius: 50%;
	background: var(--mml-halo);
	box-shadow: 0 0 4px var(--mml-halo), 0 0 10px color-mix(in srgb, var(--mml-halo) 70%, transparent);
	animation: mml-blink 3.2s ease-in-out infinite;
}
.mml-halo::before,
.mml-halo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1.5px solid var(--mml-halo);
	animation: mml-ring 3.2s ease-out infinite;
}
.mml-halo::after { animation-delay: .35s; }

.mml-credit__sign:hover .mml-halo { animation-duration: 1.1s; }
.mml-credit__sign:hover .mml-halo::before,
.mml-credit__sign:hover .mml-halo::after { animation-duration: 1.1s; }

/* Deux battements rapides puis repos, comme une LED d'activité */
@keyframes mml-blink {
	0%, 100% { opacity: 1;   transform: scale(1); }
	8%       { opacity: .25; transform: scale(.8); }
	14%      { opacity: 1;   transform: scale(1.1); }
	20%      { opacity: .35; transform: scale(.85); }
	28%      { opacity: 1;   transform: scale(1); }
}
@keyframes mml-ring {
	0%   { transform: scale(1);   opacity: .75; }
	60%  { transform: scale(2.6); opacity: 0; }
	100% { transform: scale(2.6); opacity: 0; }
}
@keyframes mml-sweep {
	from { background-position: 120% 0; }
	to   { background-position: -20% 0; }
}

/* --- Mobile --- */
@media (max-width: 767px) {
	.mml-credit {
		flex-direction: column-reverse;
		justify-content: center;
		gap: 12px;
		padding: 18px 0 calc(14px + env(safe-area-inset-bottom, 0px));
		text-align: center;
	}
	.mml-credit__left {
		justify-content: center;
		flex-direction: column;
		gap: 6px;
		font-size: 12px;
	}
	.mml-credit__links { justify-content: center; }
	.mml-credit__link::before { display: none; }
	.mml-credit__sign {
		min-height: 40px;
		padding: 8px 16px 8px 14px;
		font-size: var(--mml-cr-size, 13px);
	}
}

/* Respect des réglages "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
	.mml-halo, .mml-halo::before, .mml-halo::after,
	.mml-credit__sign { animation: none !important; }
	.mml-credit .mml-credit__name,
	.mml-credit .mml-credit__mark,
	.mml-credit .mml-credit__logo { filter: none !important; }
}

/* ==========================================================
   1.5.1 : exception de ce site (couleur, taille, police, style de la signature)
   et logo sur fond sombre
   ========================================================== */
.mml-credit { font-size: var(--mml-cr-size, 13px); font-family: var(--mml-cr-font, inherit); }
.mml-credit.has-color { color: var(--mml-cr-color) !important; }

/* Style de la signature */
.mml-credit--sign-discret .mml-credit__sign { padding: 4px 2px; border-color: transparent; background-color: transparent; }
.mml-credit--sign-discret .mml-credit__sign:hover,
.mml-credit--sign-discret .mml-credit__sign:focus-visible { padding: 4px 2px; border-color: transparent; box-shadow: none; background-color: transparent; }
.mml-credit--sign-plein .mml-credit__sign {
	border-color: color-mix(in srgb, var(--mml-halo) 45%, transparent);
	background-color: color-mix(in srgb, var(--mml-halo) 16%, transparent);
}

/* Logo : version claire / version pour fond sombre */
.mml-credit__logo--dark { display: none; }
.mml-credit--sombre.has-dark-logo .mml-credit__logo--light,
.mml-credit.is-on-dark.has-dark-logo .mml-credit__logo--light { display: none; }
.mml-credit--sombre.has-dark-logo .mml-credit__logo--dark,
.mml-credit.is-on-dark.has-dark-logo .mml-credit__logo--dark { display: block; }

/* Sans version sombre : le logo passe en blanc sur fond sombre */
.mml-credit--sombre.logo-auto-white .mml-credit__logo,
.mml-credit.is-on-dark.logo-auto-white .mml-credit__logo { filter: brightness(0) invert(1); }
.mml-credit--sombre.logo-auto-white.has-effect .mml-credit__sign:hover .mml-credit__logo,
.mml-credit.is-on-dark.logo-auto-white.has-effect .mml-credit__sign:hover .mml-credit__logo { filter: brightness(0) invert(1) var(--mml-filter); }
@media (prefers-reduced-motion: reduce) {
	.mml-credit--sombre.logo-auto-white .mml-credit__logo,
	.mml-credit.is-on-dark.logo-auto-white .mml-credit__logo { filter: brightness(0) invert(1) !important; }
}

/* ==========================================================
   1.5.7 : cadre du bas de page (fond, arrondis, marges)
   Même rendu que l'aperçu des réglages. Ordinateur et mobile.
   ========================================================== */
.mml-credit.has-box {
	width: auto;
	border-radius: var(--mml-radius, 12px);
	padding: var(--mml-pad-y, 14px) var(--mml-pad-x, 24px);
	margin: var(--mml-mar-y, 0px) var(--mml-mar-x, 0px);
}
.mml-credit--sombre.has-box { background-color: var(--mml-box-dark, #0f172a); }
.mml-credit--clair.has-box  { background-color: var(--mml-box-light, #f8fafc); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .08); }

@media (max-width: 767px) {
	.mml-credit.has-box {
		border-radius: var(--mml-radius-m, 12px);
		padding: var(--mml-pad-y-m, 18px) var(--mml-pad-x-m, 16px) calc(var(--mml-pad-y-m, 18px) + env(safe-area-inset-bottom, 0px));
		margin: var(--mml-mar-y-m, 0px) var(--mml-mar-x-m, 0px);
	}
}