.chargement {
position: fixed; inset: 0; z-index: 2000; overflow: hidden; pointer-events: auto;
background-color: #F7F4EF;
background-image:
linear-gradient(rgba(0, 139, 176, .07) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 139, 176, .07) 1px, transparent 1px),
linear-gradient(rgba(0, 139, 176, .035) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 139, 176, .035) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
background-position: -1px -1px;
}
.ch-plan { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ch-traits polyline {
fill: none; stroke: #008BB0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: 1;
}
.ch-ligne { position: absolute; left: 50%; bottom: max(48px, 7vh); width: 140px; height: 2px; margin-left: -70px; background: rgba(0, 139, 176, .16); }
.ch-ligne i { position: absolute; inset: 0; background: #008BB0; transform: scaleX(0); transform-origin: 0 50%; animation: ch-attente 12s linear forwards; }
@keyframes ch-attente {
0% { transform: scaleX(0); }
25% { transform: scaleX(.3); animation-timing-function: cubic-bezier(.1, .45, .5, 1); }
100% { transform: scaleX(.5); }
}
.chargement.ch-retour .ch-ligne { display: none; }
.ch-front {
position: absolute; left: 0; right: 0; top: 100%; height: 56px; transform: translateY(-100%); pointer-events: none; opacity: 0;
background: linear-gradient(180deg, rgba(0, 139, 176, 0) 0%, rgba(0, 139, 176, .1) 70%, rgba(0, 139, 176, .22) calc(100% - 2px), rgba(0, 139, 176, .7) calc(100% - 2px));
}
.chargement.ch-pose .ch-front { opacity: 1; }
:root.ch-en-cours, :root.ch-en-cours body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .chargement { display: none !important; } }
:root.ch-en-cours .entete { visibility: hidden; }