/* Elevora CRM — css/intro.css  [V36] 13/10/2026, document 2 de Célian, étape 11b (§16 : l'animation d'ouverture de 2 à 3 secondes)

   L'intro est un voile posé PAR-DESSUS l'écran neutre du démarrage (#ecran-attente de l'admin et du partenaire, #loading-screen du client),
   qui, lui, ne change pas : la vérification de la session et la lecture des données partent en parallèle, comme avant, et l'intro n'attend
   rien d'elles. Quand elle finit, soit le CRM est déjà là (il apparaît d'un coup, dans son thème), soit l'écran neutre — même fond, même logo,
   seul le petit cercle d'attente s'ajoute — prend la suite : jamais d'écran vide ni à moitié rempli. Jamais le formulaire de connexion avant
   la fin de l'intro : le voile le couvre aussi.

   Effet choisi (bibliothèque d'animations Elevora, catégorie « Intro et chargement », fiche 053 « compteur + halo qui s'ouvre sur l'image » :
   dévoilement progressif et feutré) ; adapté et écrit en CSS seul, sans GSAP (décision de Célian, 13/10/2026) :
     · le logo existant se pose (fondu + 10 px de montée, 0,8 s) ;
     · un filet fin se trace dessous (la barre de progression de la fiche 053, à l'échelle d'un cartel de musée), avec UN point framboise à son bout ;
     · le voile se retire en fondu (0,4 s).
   Tout est en `opacity`, `translate` et `scale` (compositeur du navigateur) : aucune mise en page, aucun fichier, aucune bibliothèque.
   Les couleurs sont les jetons du CRM (--bg, --border2, --accent, --pink) : thème jour ou nuit connu dès la première image
   (js/00-amorce-theme.js), donc aucun clignotement noir / blanc. Pas de #000000.

   html[data-intro="plein"]  l'intro complète (2,4 s puis 0,4 s de sortie) ;
   html[data-intro="calme"]  mouvement réduit (système) ou niveau « sobre » : un fondu simple, 1,2 s ;
   html[data-intro="non"]    pas d'intro : ce fichier ne montre rien.
   Posé par js/00-intro.js dès l'ouverture de la page, avant la première image. */

.elv-intro{display:none}
html.elv-intro-actif .elv-intro{
  position:fixed;inset:0;z-index:100900;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--bg);color:var(--text2);
  cursor:pointer;
  opacity:1;
  transition:opacity .4s ease;
}
html.elv-intro-actif .elv-intro.elv-intro-sortie{opacity:0;pointer-events:none}
html[data-intro="calme"].elv-intro-actif .elv-intro{transition-duration:.3s}

/* Le logo : les deux variantes sont dans la page, le thème choisit (même principe que l'écran neutre du démarrage). */
.elv-intro-logo{display:block}
.elv-intro-logo img{display:block;height:64px;width:auto;max-width:78vw}
.elv-intro-sombre{display:none!important}
body:not(.light) .elv-intro-clair{display:none!important}
body:not(.light) .elv-intro-sombre{display:block!important}

/* Le filet : une fine ligne de 140 px qui se trace, un point framboise à son bout. */
.elv-intro-filet{position:relative;display:block;width:140px;height:2px;background:var(--border2);border-radius:1px}
.elv-intro-filet i{position:absolute;inset:0;display:block;background:var(--accent);border-radius:1px;transform-origin:left center}
.elv-intro-point{position:absolute;right:-3px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--pink,#C9266A)}
.elv-intro-legende{display:block;font-size:var(--fs-min,12.5px);letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}

@keyframes elv-intro-logo{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes elv-intro-trace{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes elv-intro-fondu{from{opacity:0}to{opacity:1}}
@keyframes elv-intro-point{from{opacity:0;scale:.2}to{opacity:1;scale:1}}

/* Intro complète */
html[data-intro="plein"].elv-intro-actif .elv-intro-logo{animation:elv-intro-logo .8s cubic-bezier(.2,.8,.3,1) .2s both}
html[data-intro="plein"].elv-intro-actif .elv-intro-filet i{animation:elv-intro-trace 1.5s cubic-bezier(.45,.05,.25,1) .6s both}
html[data-intro="plein"].elv-intro-actif .elv-intro-point{animation:elv-intro-point .4s cubic-bezier(.2,.8,.3,1) 2s both}
html[data-intro="plein"].elv-intro-actif .elv-intro-legende{animation:elv-intro-fondu .6s ease 1.2s both}
html[data-intro="plein"].elv-intro-actif .elv-intro-filet{animation:elv-intro-fondu .4s ease .5s both}

/* Fondu simple : mouvement réduit, ou niveau « sobre » */
html[data-intro="calme"].elv-intro-actif .elv-intro-logo{animation:elv-intro-fondu .5s ease .1s both}
html[data-intro="calme"].elv-intro-actif .elv-intro-filet,
html[data-intro="calme"].elv-intro-actif .elv-intro-legende{animation:elv-intro-fondu .5s ease .3s both}

/* L'écran neutre ne se voit pas sous le voile, mais le thème reste connu : rien à ajouter. Le réglage système « réduire les animations »
   est déjà traité par js/00-intro.js (mode « calme ») : les animations ci-dessus sont des fondus. */
@media (prefers-reduced-motion:reduce){
  html.elv-intro-actif .elv-intro-logo{translate:none!important}
}