/* LOADER « LOGO QUI SE DESSINE » — HTML fourni par LoaderLogo.html() (js/loader-logo.js),
   formes et dégradés dans la planche inc/loader_logo.php.
   Style « verre fluide » : pastille de verre dépoli, taches de couleur floues qui dérivent
   derrière, contours en dégradé lumineux (sans remplissage).
   Chaque carte : le contour se trace (0 → 40 %), reste (40 → 70 %), puis s'efface en
   continuant dans le même sens (70 → 100 %). Les 3 cartes sont décalées de 0,16 s :
   le logo complet reste visible environ 0,4 s à chaque boucle.
   Unités du SVG : 1 px écran ≈ 13 unités (symbole de 96 px de large). */
.loader-logo-planche { position: absolute; width: 0; height: 0; overflow: hidden; }

.loader-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ---------- Pastille de verre ---------- */
.loader-logo__verre {
    position: relative;
    width: 136px;
    height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.22) 100%);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow:
        0 12px 32px rgba(29,90,181,0.12),
        0 2px 8px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.9);
    animation: loaderLogoApparait 0.25s ease-out 0.1s both;
}

/* ---------- Taches de couleur fluides (derrière le verre) ---------- */
.loader-logo__tache {
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.55;
}
.loader-logo__tache--corail { background: #F47A8C; top: -14px; left: 30px;  animation: loaderLogoTache1 6s ease-in-out infinite; }
.loader-logo__tache--or     { background: #FFD45C; top: 52px;  left: -16px; animation: loaderLogoTache2 7s ease-in-out infinite; }
.loader-logo__tache--bleu   { background: #5EA2F2; top: 56px;  left: 72px;  animation: loaderLogoTache3 8s ease-in-out infinite; }

/* ---------- Contours ---------- */
.loader-logo__svg {
    position: relative;
    z-index: 1;
    width: 96px;
    height: auto;
    aspect-ratio: 1270 / 1200;
    overflow: visible;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.9)) drop-shadow(0 3px 8px rgba(29,90,181,0.18));
}
.loader-logo__carte {
    fill: none;
    stroke-width: 30;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 100;   /* #ll-fr a pathLength="100" */
    stroke-dashoffset: 100;
    animation: loaderLogoTrace 2.4s ease-in-out infinite;
}
.loader-logo__carte--jaune { stroke: url(#ll-g-j); }
.loader-logo__carte--bleu  { stroke: url(#ll-g-b); animation-delay: 0.16s; }
.loader-logo__carte--rouge { stroke: url(#ll-g-r); animation-delay: 0.32s; }

.loader-logo__texte {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #64748b;
}

/* ---------- Grand format (voile plein écran) ---------- */
.loader-logo--grand { gap: 16px; }
.loader-logo--grand .loader-logo__verre { width: 168px; height: 152px; border-radius: 36px; }
.loader-logo--grand .loader-logo__tache { width: 92px; height: 92px; filter: blur(20px); }
.loader-logo--grand .loader-logo__tache--corail { top: -18px; left: 38px; }
.loader-logo--grand .loader-logo__tache--or     { top: 64px;  left: -20px; }
.loader-logo--grand .loader-logo__tache--bleu   { top: 68px;  left: 90px; }
.loader-logo--grand .loader-logo__svg { width: 118px; }
.loader-logo--grand .loader-logo__texte {
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: none;
    color: #334155;
}

/* ---------- Voile HoldOn (js/loader-logo.js) : la page floutée, le logo au centre ----------
   Remplace le voile noir de HoldOn.min.css (même id #holdon-overlay, d'où les sélecteurs
   renforcés). z-index = celui que main.css donne à #holdon-overlay : au-dessus des modales. */
#holdon-overlay.holdon-verre,
.holdon-verre {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 10060;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(238, 242, 252, 0.42);
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
    backdrop-filter: blur(7px) saturate(1.2);
    opacity: 0;
    filter: none;
    transition: opacity 0.3s ease-out;
}
#holdon-overlay.holdon-verre.is-ouvert { opacity: 1; }
.holdon-verre__libre { text-align: center; }
body.v2-dark .holdon-verre { background: rgba(8, 13, 30, 0.5); }
body.v2-dark .loader-logo--grand .loader-logo__texte { color: #cbd5e1; }

/* ---------- Thème sombre ---------- */
body.v2-dark .loader-logo__verre {
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12);
}
body.v2-dark .loader-logo__tache { opacity: 0.42; }
body.v2-dark .loader-logo__svg { filter: drop-shadow(0 0 4px rgba(255,255,255,0.18)); }
body.v2-dark .loader-logo__texte { color: #94a3b8; }

@keyframes loaderLogoTrace {
    0%       { stroke-dashoffset: 100; }
    40%, 70% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: -100; }
}
@keyframes loaderLogoTache1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-22px, 26px) scale(1.15); }
}
@keyframes loaderLogoTache2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(30px, -24px) scale(0.9); }
}
@keyframes loaderLogoTache3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-28px, -18px) scale(1.1); }
}
@keyframes loaderLogoApparait {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}

/* Mouvement réduit : contours fixes, taches immobiles */
@media (prefers-reduced-motion: reduce) {
    .loader-logo__carte { animation: none; stroke-dashoffset: 0; }
    .loader-logo__tache, .loader-logo__verre { animation: none; }
}