/* Ouverture animée de l'app (#introApp) et écran « Reprise de votre session… » (#repriseApp), posés par index.html avant
 * l'app Angular — repris à l'identique de l'ancienne app (www/index.html › #introApp, #chargement) ; même animation que le
 * back-office (gestion/src/styles.scss › #introGestion). Classes « intro » et « reprise » posées sur <html> par demarrage.js. */

/* ===== Ouverture animée (≈ 3,3-3,6 s ; jamais si l'appareil demande moins d'animations ; un toucher la passe) ===== */
#introApp { display: none; }
html.intro, html.intro body { overflow: hidden; }
html.intro #introApp { display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 50% 38%, #1E5A41 0%, #143F2E 45%, #0B2219 100%);
  animation: igSortie .6s cubic-bezier(.4,0,.2,1) 3s forwards; }
#introApp.fin { animation: igSortie .3s ease forwards; }
#introApp .ig-aurore { position: absolute; inset: -30%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 200deg at 50% 50%, transparent 0deg, rgba(233,185,73,.20) 60deg, transparent 130deg, rgba(46,138,95,.35) 210deg, transparent 300deg);
  filter: blur(60px); animation: igAurore 3.7s ease-out both; }
#introApp .ig-grille { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 50% 45%, #000 0%, transparent 62%);
  animation: igGrille 1.6s ease-out .1s forwards; }
#introApp .ig-scene { position: relative; width: 330px; height: 140px; transform: scale(var(--ig-s, 1)); }
#introApp .ig-tuile { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 22px; z-index: 2;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08); animation: igTuile 2s linear both; }
/* Une seule icône : sans la calebasse (.ig-base) ; au moment où la pièce va tomber, SEULE la calebasse (.ig-complet) apparaît. */
#introApp .ig-base { position: relative; }
#introApp .ig-complet { position: absolute; inset: 0; transform-origin: 50% 60%; opacity: 0; animation: igCalebasse .4s ease-out .3s forwards; }
#introApp .ig-tuile img { width: 100%; height: 100%; border-radius: inherit; display: block; }
#introApp .ig-tuile::after { content: ""; position: absolute; inset: -14px; border-radius: 30px; background: radial-gradient(circle, rgba(233,185,73,.55), transparent 65%);
  opacity: 0; animation: igLueur .9s ease-out 1.2s both; z-index: -1; }
/* La pièce passe DEVANT l'icône, tourne sur elle-même en tombant et entre dans l'ouverture de la calebasse, où elle disparaît. */
#introApp .ig-piece { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #FFF4C4 0%, #F7D774 30%, #E9B949 58%, #B9861F 100%);
  box-shadow: inset 0 0 0 1.5px rgba(143,98,13,.5), 0 0 10px rgba(247,215,116,.7); opacity: 0;
  animation: igPiece .62s cubic-bezier(.5,0,.75,.35) .62s both; }
#introApp .ig-onde { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 26px;
  border: 2px solid rgba(247,215,116,.85); opacity: 0; animation: igOnde .9s cubic-bezier(.2,.7,.2,1) 1.22s both; }
#introApp .ig-onde.o2 { animation-delay: 1.36s; border-color: rgba(46,138,95,.9); }
/* Le nom et le slogan sortent de DERRIÈRE l'icône (fenêtre coupée au bord droit de l'icône) ; position finale centrée :
   icône à −96 px, texte à 113 px. */
#introApp .ig-texte { position: absolute; left: 113px; top: 50%; transform: translateY(-50%); width: 250px; padding-left: 26px; z-index: 1;
  clip-path: inset(-40px -60px -40px 0); }
#introApp .ig-glisse { transform: translateX(-108%); opacity: 0; animation: igGlisse .65s cubic-bezier(.22,1,.36,1) 1.98s forwards; }
#introApp .lg-nom { font: 800 46px/1 'Baloo 2', sans-serif; color: #fff; position: relative; animation: igEclat .8s ease-out 2.4s both; }
#introApp .lg-k { background: linear-gradient(180deg, #F7D774, #E9B949 45%, #C8962A); -webkit-background-clip: text; background-clip: text; color: transparent; }
#introApp .lg-slo { display: block; margin-top: 4px; font: 700 15px 'Baloo 2', sans-serif;
  background: linear-gradient(90deg, #C8962A, #E9B949 45%, #F7D774 60%, #C8962A); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes igSortie { to { opacity: 0; filter: blur(14px); transform: scale(1.04); visibility: hidden; } }
@keyframes igAurore { 0% { opacity: 0; transform: rotate(-20deg) scale(.9); } 40% { opacity: 1; } 100% { opacity: .85; transform: rotate(25deg) scale(1.05); } }
@keyframes igGrille { to { opacity: 1; } }
@keyframes igTuile {
  0%    { transform: scale(.78); opacity: 0; filter: blur(8px); }
  22.5% { transform: scale(1); opacity: 1; filter: blur(0); }
  61%   { transform: translate(0,0) scale(1,1); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  63.5% { transform: translate(0,2px) scale(1.04,.96); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  67.5% { transform: translate(0,-2px) scale(.99,1.02); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  70.5% { transform: translate(0,0) scale(1,1); }
  77%   { transform: translate(0,0) scale(1,1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  98%   { transform: translate(-96px,0) scale(1,1); }
  100%  { transform: translate(-96px,0) scale(1,1); opacity: 1; }
}
@keyframes igCalebasse { from { opacity: 0; } to { opacity: 1; } }
@keyframes igPiece {
  0%   { opacity: 0; transform: translateY(-160px) scale(1, 1); }
  10%  { opacity: 1; }
  28%  { transform: translateY(-112px) scale(.18, 1); }
  46%  { transform: translateY(-68px) scale(1, 1); }
  64%  { transform: translateY(-30px) scale(.18, 1); }
  82%  { opacity: 1; transform: translateY(-6px) scale(1, .55); }
  100% { opacity: 0; transform: translateY(2px) scale(.85, .2); }
}
@keyframes igLueur { 0% { opacity: 0; transform: scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes igOnde { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); border-radius: 50%; } }
@keyframes igGlisse { 0% { transform: translateX(-108%); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateX(0); opacity: 1; } }
@keyframes igEclat { 0% { filter: drop-shadow(0 0 0 rgba(247,215,116,0)); } 40% { filter: drop-shadow(0 0 14px rgba(247,215,116,.65)); } 100% { filter: drop-shadow(0 0 4px rgba(247,215,116,.25)); } }
@media (max-width: 380px) { #introApp .ig-scene { --ig-s: .86; } }
@media (prefers-reduced-motion: reduce) { html.intro #introApp { display: none; } html.intro, html.intro body { overflow: auto; } }

/* ===== « Reprise de votre session… » : session gardée sur l'appareil, le temps que l'app la reprenne (filet de 10 s) ===== */
#repriseApp { display: none; }
html.reprise #repriseApp { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: #fff; font-family: 'Inter', system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.07), transparent 42%),
    repeating-radial-gradient(circle at 78% 62%, rgba(255,255,255,.05) 0 2px, transparent 2px 28px),
    linear-gradient(135deg, var(--accent-deep, #123A2A) 0%, var(--accent-dark, #143F2E) 55%, var(--accent, #1F5C44) 100%); }
#repriseApp img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
#repriseApp .rp-nom { font: 800 34px/1 'Baloo 2', 'Inter', sans-serif; letter-spacing: -.01em; }
#repriseApp .rp-k { background: linear-gradient(180deg, #F7D774, #E9B949 45%, #C8962A); -webkit-background-clip: text; background-clip: text; color: transparent; }
#repriseApp .rp-rond { width: 26px; height: 26px; margin-top: 6px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: rpTourne .8s linear infinite; }
#repriseApp .rp-texte { font-size: 13px; color: rgba(255,255,255,.75); }
@keyframes rpTourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #repriseApp .rp-rond { animation-duration: 2.4s; } }