/* MG Lancement — écran de mise en ligne. Couleurs de la charte fixées (fond blanc, y compris en mode sombre). */
.mgl { display: none; }
html.mgl-actif:has(> body > .mgl) { overflow: hidden; }
html.mgl-actif .mgl {
	--mgl-encre: #2E292B;
	--mgl-doux: #6B6266;
	--mgl-couleur: #E40045;
	--marne: #5FC3E1; /* teinte de l'eau du logo, indépendante du mode sombre */
	position: fixed; inset: 0; z-index: 2147483000;
	display: grid; place-items: center;
	background: #fff; color: var(--mgl-encre);
	font-family: var(--f-titre, "Nunito", system-ui, sans-serif);
	text-align: center;
	overflow: hidden;
}
.mgl__confettis { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.mgl__passer {
	position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); z-index: 2;
	display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1rem;
	border: 1.5px solid #DAD5D7; border-radius: 999px; background: #fff; color: var(--mgl-doux);
	font: 700 .85rem/1 var(--f-texte, system-ui, sans-serif); cursor: pointer; transition: color .2s, border-color .2s;
}
.mgl__passer:hover { color: var(--mgl-encre); border-color: var(--mgl-encre); }
.mgl__passer:focus-visible { outline: 3px solid #0086B2; outline-offset: 2px; }

.mgl__scene { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1.25rem; padding: 1rem; }
.mgl__surtitre {
	margin: 0; font-size: clamp(.8rem, .7rem + .4vw, 1rem); font-weight: 300; letter-spacing: .35em; text-transform: uppercase; color: var(--mgl-doux);
	opacity: 0; animation: mgl-entree .8s .2s ease-out forwards;
}

/* Ancien site + compte à rebours, côte à côte */
.mgl__duo { display: flex; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 6rem); }
.mgl__avant {
	position: relative; margin: 0; width: clamp(280px, 36vw, 560px); flex: none;
	transform: rotate(-3deg); opacity: 0; animation: mgl-avant-entree .9s .15s cubic-bezier(.2, .9, .3, 1.1) forwards;
}
.mgl__avant img {
	display: block; width: 100%; height: auto; border-radius: 18px;
	box-shadow: 0 18px 50px rgba(46, 41, 43, .22), 0 0 0 1px rgba(46, 41, 43, .08);
	transition: filter 10s linear;
}
/* Pendant le décompte, l'ancien site vieillit : il passe en noir et blanc */
.mgl.est-compte .mgl__avant img { filter: grayscale(1) sepia(.15) contrast(.9) brightness(1.03); }
.mgl__avant figcaption {
	position: absolute; left: 1rem; top: -0.9rem;
	padding: .35rem .8rem; border-radius: 999px; background: var(--mgl-encre); color: #fff;
	font: 700 .78rem/1 var(--f-texte, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
/* Au revoir : l'ancien site bascule hors de l'écran, le compteur s'efface */
.mgl.est-adieu .mgl__avant { animation: mgl-avant-sortie .7s cubic-bezier(.6, 0, .8, .4) forwards; }
.mgl.est-adieu .mgl__compte { transition: opacity .4s, transform .4s; opacity: 0; transform: scale(.85); }

/* Compte à rebours */
.mgl__compte { position: relative; flex: none; width: clamp(200px, 30vmin, 320px); aspect-ratio: 1; display: grid; place-items: center; }
.mgl__anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mgl__piste, .mgl__jauge { fill: none; stroke-width: 6; }
.mgl__piste { stroke: #EEEBEC; }
.mgl__jauge { stroke: var(--mgl-couleur); stroke-linecap: round; stroke-dasharray: 578; stroke-dashoffset: 578; transition: stroke .3s; }
.mgl__compte.est-pas .mgl__jauge { animation: mgl-jauge 1s linear forwards; }
.mgl__chiffre {
	font-size: clamp(6rem, 20vmin, 11rem); font-weight: 800; line-height: 1; color: var(--mgl-couleur);
	font-variant-numeric: tabular-nums; letter-spacing: -.04em; transition: color .3s;
}
.mgl__chiffre.est-pas { animation: mgl-chiffre 1s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.mgl__chiffre.est-double { font-size: clamp(4.5rem, 14vmin, 8rem); letter-spacing: -.06em; } /* « 10 » tient dans l'anneau */

/* Final */
.mgl__final { display: none; justify-items: center; gap: .6rem; }
.mgl.est-final .mgl__duo { display: none; }
.mgl.est-final .mgl__final { display: grid; }
.mgl__logo { width: clamp(150px, 28vmin, 240px); height: auto; color: var(--mgl-encre); opacity: 0; animation: mgl-logo .9s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.mgl__logo--image { height: clamp(90px, 16vmin, 150px); width: auto; max-width: min(80vw, 420px); object-fit: contain; }
.mgl__logo--texte { width: auto; font-size: clamp(1.5rem, 4vmin, 2.5rem); font-weight: 800; }
.mgl__logo .logo__texte { fill: currentColor; }
.mgl__logo .logo__eau { fill: var(--marne); }
.mgl__titre { margin: .25rem 0 0; font-size: clamp(3rem, 11vmin, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.mgl__lettre { display: inline-block; opacity: 0; animation: mgl-lettre .7s cubic-bezier(.2, .9, .3, 1.5) forwards; animation-delay: calc(.25s + var(--i) * .05s); }
.mgl__lettre:nth-child(5n+1) { color: #E40045; }
.mgl__lettre:nth-child(5n+2) { color: #F18700; }
.mgl__lettre:nth-child(5n+3) { color: #0079A7; }
.mgl__lettre:nth-child(5n+4) { color: #5FC3E1; }
.mgl__lettre:nth-child(5n+5) { color: #662382; }
.mgl__espace { display: inline-block; width: .3em; }
.mgl__sous-titre { margin: .5rem 0 0; font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem); font-weight: 300; color: var(--mgl-doux); opacity: 0; animation: mgl-entree .8s 1s ease-out forwards; }

/* Sortie : le site apparaît par une ouverture circulaire */
.mgl.est-sortie { animation: mgl-sortie .9s cubic-bezier(.7, 0, .3, 1) forwards; pointer-events: none; }

.mgl__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@keyframes mgl-avant-entree { from { opacity: 0; transform: translateX(-40px) rotate(-8deg) scale(.9); } to { opacity: 1; transform: rotate(-3deg); } }
@keyframes mgl-avant-sortie { from { opacity: 1; transform: rotate(-3deg); } to { opacity: 0; transform: translate(-30vw, 40vh) rotate(-28deg) scale(.6); } }
@keyframes mgl-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mgl-jauge { to { stroke-dashoffset: 0; } }
@keyframes mgl-chiffre {
	0% { opacity: 0; transform: scale(.3) rotate(-8deg); }
	35% { opacity: 1; transform: scale(1.08) rotate(0); }
	80% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.35); }
}
@keyframes mgl-logo { from { opacity: 0; transform: translateY(-30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mgl-lettre { 0% { opacity: 0; transform: translateY(.6em) scale(.4) rotate(-12deg); } 100% { opacity: 1; transform: none; } }
@keyframes mgl-sortie {
	0% { clip-path: circle(150% at 50% 50%); }
	100% { clip-path: circle(0% at 50% 50%); }
}

/* Écrans étroits : capture au-dessus du compteur */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
	.mgl__duo { flex-direction: column; gap: 1.75rem; }
	.mgl__avant { width: min(78vw, 420px); }
	.mgl__compte { width: clamp(150px, 26vh, 240px); }
	.mgl__chiffre { font-size: clamp(5rem, 15vh, 9rem); }
	.mgl__scene { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mgl__avant { animation: none; opacity: 1; }
	.mgl__avant img { transition: none; }
	.mgl.est-adieu .mgl__avant { animation: none; opacity: 0; transition: opacity .3s; }
	.mgl__chiffre.est-pas { animation: none; }
	.mgl__compte.est-pas .mgl__jauge { animation: none; stroke-dashoffset: 0; }
	.mgl__lettre, .mgl__logo, .mgl__sous-titre, .mgl__surtitre { animation: none; opacity: 1; }
	.mgl.est-sortie { animation: mgl-fondu .4s forwards; }
	@keyframes mgl-fondu { to { opacity: 0; } }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
	.mgl__chiffre.est-double { font-size: clamp(3.75rem, 10vh, 6rem); }
}