/* =========================================================
   PLCC — Écran d'ouverture animé (page d'accueil)
   ---------------------------------------------------------
   Tout est préfixé #plcc-splash / .sp- : aucune collision
   possible avec styles.css. Le bloc est injecté par
   splash.js et retiré du DOM à la fin.
   ========================================================= */

#plcc-splash{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  background:radial-gradient(ellipse 68% 60% at 50% 44%,#0B1830 0%,#060D1B 45%,#03060E 80%);
  font-family:"Barlow Condensed",system-ui,sans-serif;
  opacity:1; transition:opacity .5s ease-out;
}
#plcc-splash.sortie{ opacity:0; pointer-events:none; }
body.splash-ouvert{ overflow:hidden; }

/* ---------- fond ---------- */
#plcc-splash .sp-pluie{
  position:absolute; inset:-6%; opacity:0;
  animation:sp-paraitre 1.2s ease-out .05s forwards;
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent 98%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 70%,transparent 98%);
}
#plcc-splash .sp-col{
  position:absolute; top:-40%;
  display:flex; flex-direction:column; align-items:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:calc(1vmin * var(--t)); line-height:1.5;
  color:rgba(90,166,255,var(--o));
  text-shadow:0 0 6px rgba(74,158,255,.5);
  animation:sp-tombe var(--dur) linear var(--del) infinite;
  will-change:transform;
}
#plcc-splash .sp-col b{ font-weight:400; color:#DCEBFF; text-shadow:0 0 10px rgba(200,228,255,.9); }

#plcc-splash .sp-halo{
  position:absolute; left:50%; top:46%; width:88vmin; height:88vmin; border-radius:50%;
  transform:translate(-50%,-50%) scale(.5); opacity:0;
  background:radial-gradient(circle,rgba(246,214,140,.22),rgba(201,146,47,.07) 40%,transparent 68%);
  animation:sp-halo 1.4s ease-out 1.2s forwards, sp-halo-bat 7s ease-in-out 3.5s infinite;
}

/* ---------- l'écusson ---------- */
#plcc-splash .sp-socle{
  position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
  width:58vmin; aspect-ratio:778/803; perspective:1400px;
}
#plcc-splash .sp-plaque{
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:sp-flotte 10s ease-in-out 3.6s infinite;
}
#plcc-splash .sp-plaque > *{ position:absolute; inset:0; }
#plcc-splash .sp-plaque img{ width:100%; height:100%; object-fit:contain; display:block; }

/* la plaque porte DÉJÀ tout le logo : texte, empreinte et PLCC gravés.
   Elle arrive nette et pleinement éclairée. */
#plcc-splash .sp-fond{
  opacity:0; filter:drop-shadow(0 22px 46px rgba(0,0,0,.85));
  animation:sp-arrive 1s cubic-bezier(.16,.86,.28,1) .1s forwards;
}

/* seule pièce réellement mobile : la loupe */
#plcc-splash .sp-bloc-loupe{
  transform-origin:52% 42%;
  animation:sp-loupe .85s cubic-bezier(.22,.9,.3,1.05) .35s both;
}
#plcc-splash .sp-loupe{ filter:drop-shadow(0 9px 18px rgba(0,0,0,.55)); }

/* la lentille : verre doré, chiffres sombres qui défilent */
#plcc-splash .sp-lentille{
  position:absolute; left:41.77%; top:32.38%; width:20.57%; height:19.93%;
  border-radius:50%; overflow:hidden; opacity:0;
  background:radial-gradient(circle at 36% 30%,#E8C579 0%,#C79A3C 42%,#9A6E22 74%,#6E4A12 100%);
  animation:sp-paraitre .5s ease-out 1.15s forwards;
}
#plcc-splash .sp-flux{ position:absolute; left:-4%; width:108%; top:0; animation:sp-defile 5.2s linear infinite; }
#plcc-splash .sp-flux img{ width:100%; display:block; opacity:.85; }
#plcc-splash .sp-verre{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),rgba(255,255,255,.1) 38%,transparent 60%);
  box-shadow:inset 0 -6px 14px rgba(90,58,10,.6), inset 0 4px 10px rgba(255,240,200,.35);
}
#plcc-splash .sp-eclat{ position:absolute; inset:0; border-radius:50%; overflow:hidden; pointer-events:none; }
#plcc-splash .sp-eclat::before{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:52%;
  background:linear-gradient(100deg,transparent,rgba(255,246,224,.55),transparent);
  transform:skewX(-18deg); animation:sp-passe 4.4s ease-in-out 4s infinite;
}

/* Les gravures sont DÉJÀ sur la plaque : ces calques, rigoureusement
   alignés, ne servent qu'à les faire s'illuminer. Aucun doublon possible. */
#plcc-splash .sp-empreinte{
  opacity:0;
  -webkit-mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,0) 80%);
  mask-image:radial-gradient(circle,#000 0 58%,rgba(0,0,0,0) 80%);
  -webkit-mask-position:52% 42.3%; mask-position:52% 42.3%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:6% 6%; mask-size:6% 6%;
  animation:sp-paraitre .3s ease-out 1.35s forwards,
            sp-grave-emp 1.05s cubic-bezier(.3,.8,.3,1) 1.35s forwards,
            sp-braise 1.15s ease-out 1.35s forwards;
}
#plcc-splash .sp-texte{
  opacity:0;
  -webkit-mask-image:linear-gradient(100deg,#000 0 45%,rgba(0,0,0,0) 72%);
  mask-image:linear-gradient(100deg,#000 0 45%,rgba(0,0,0,0) 72%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  animation:sp-paraitre .3s ease-out 2.1s forwards,
            sp-grave-txt 1.1s cubic-bezier(.4,.7,.35,1) 2.1s forwards,
            sp-braise 1.2s ease-out 2.1s forwards;
}

/* montée de lumière, puis reflet en boucle */
#plcc-splash .sp-lumiere{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:var(--m); mask-image:var(--m);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
#plcc-splash .sp-lumiere::before{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-70%; width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,244,214,.66),transparent);
  transform:skewX(-15deg); animation:sp-revele 1.3s ease-out 1.15s both;
}
#plcc-splash .sp-lumiere::after{
  content:""; position:absolute; top:-30%; bottom:-30%; left:-70%; width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,244,214,.30),transparent);
  transform:skewX(-15deg); animation:sp-balaie 8s cubic-bezier(.5,0,.35,1) 5.5s infinite;
}

#plcc-splash .sp-onde{
  position:absolute; left:52%; top:42.3%; width:22%; height:22%;
  transform:translate(-50%,-50%) scale(.3);
  border:1px solid rgba(255,221,155,.75); border-radius:50%; opacity:0;
  animation:sp-onde 1.5s cubic-bezier(.2,.6,.3,1) 1.12s forwards;
}
#plcc-splash .sp-onde.b{ animation-delay:1.30s; }

#plcc-splash .sp-grains{ position:absolute; inset:0; pointer-events:none; }
#plcc-splash .sp-g{
  position:absolute; border-radius:50%; background:#F6D68C; opacity:0;
  box-shadow:0 0 6px rgba(246,214,140,.9);
  animation:sp-monte var(--d) ease-out var(--r) infinite;
}

/* ---------- texte au pied ---------- */
#plcc-splash .sp-legende{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  text-align:center; width:min(94%,96vmin);
}
#plcc-splash .sp-legende::before{
  content:""; position:absolute; left:50%; top:-70%; transform:translateX(-50%);
  width:132%; height:260%; z-index:-1;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(3,6,14,.92),rgba(3,6,14,.6) 48%,transparent 76%);
}
#plcc-splash .sp-institution{
  font-size:clamp(.56rem,1.42vmin,.96rem); font-weight:600; letter-spacing:.3em;
  text-transform:uppercase; color:#F8E9C8; white-space:nowrap; opacity:0; margin:0;
  animation:sp-neon 1.1s ease-out 2.6s forwards;
}
#plcc-splash .sp-filet{
  width:0; height:1px; margin:1em auto 0;
  background:linear-gradient(90deg,transparent,#C9922F,transparent);
  animation:sp-etire 1.1s cubic-bezier(.3,.8,.3,1) 3.05s forwards;
}
#plcc-splash .sp-devise{
  margin:1.1em 0 0; font-family:"IBM Plex Mono",monospace;
  font-size:clamp(.48rem,1.06vmin,.74rem); letter-spacing:.3em; text-transform:uppercase;
  color:rgba(201,146,47,.72); opacity:0;
  animation:sp-remonte 1s ease-out 3.4s forwards;
}
#plcc-splash .sp-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 82% 78% at 50% 46%,transparent 48%,rgba(2,4,10,.72));
}

/* ---------- commandes ---------- */
#plcc-splash .sp-cmd{
  position:absolute; bottom:18px; right:18px; z-index:2;
  display:flex; gap:.5rem; align-items:center;
}
#plcc-splash .sp-cmd button{
  font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:#E8D5AC; background:rgba(7,17,34,.92);
  border:1px solid rgba(201,146,47,.4); padding:.6rem 1.05rem;
  border-radius:100px; cursor:pointer; line-height:1;
}
#plcc-splash .sp-cmd button:hover{ background:rgba(201,146,47,.22); border-color:#C9922F; }
#plcc-splash .sp-cmd button:focus-visible{ outline:2px solid #F6D68C; outline-offset:2px; }
#plcc-splash .sp-cmd button[aria-pressed="true"]{ background:rgba(201,146,47,.3); border-color:#C9922F; }

/* ---------- images-clés ---------- */
@keyframes sp-paraitre{ to{ opacity:1; } }
@keyframes sp-tombe{ from{transform:translateY(0)} to{transform:translateY(200vh)} }
@keyframes sp-arrive{
  from{opacity:0;transform:translateZ(-240px) rotateX(11deg) scale(.86)}
  45% {opacity:1}
  to  {opacity:1;transform:translateZ(0) rotateX(0) scale(1)}
}
@keyframes sp-loupe{
  0%  {opacity:0;transform:translate(62%,-58%) rotate(-46deg) scale(1.5)}
  22% {opacity:1}
  74% {transform:translate(-2%,1.8%) rotate(4deg) scale(1.02)}
  100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
}
@keyframes sp-grave-emp{
  from{-webkit-mask-size:6% 6%;mask-size:6% 6%}
  to  {-webkit-mask-size:620% 620%;mask-size:620% 620%}
}
@keyframes sp-grave-txt{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to  {-webkit-mask-position:0% 0;mask-position:0% 0}
}
@keyframes sp-braise{
  0%  {filter:brightness(2) drop-shadow(0 0 14px rgba(255,214,140,.9))}
  100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,214,140,0))}
}
@keyframes sp-defile{ from{transform:translateY(-52%)} to{transform:translateY(0)} }
@keyframes sp-revele{ 0%{left:-70%;opacity:1} 99%{opacity:1} 100%{left:150%;opacity:0} }
@keyframes sp-balaie{ 0%{left:-70%} 38%,100%{left:150%} }
@keyframes sp-passe { 0%{left:-70%} 36%,100%{left:130%} }
@keyframes sp-onde{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  18%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(3.6);border-width:.5px}
}
@keyframes sp-flotte{
  0%,100%{transform:translateY(0) rotateY(0) rotateX(0)}
  32%    {transform:translateY(-.9%) rotateY(2.1deg) rotateX(.8deg)}
  66%    {transform:translateY(.6%) rotateY(-1.7deg) rotateX(-.6deg)}
}
@keyframes sp-halo{ to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes sp-halo-bat{ 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes sp-monte{
  0%{opacity:0;transform:translateY(0) scale(.5)} 14%{opacity:.9}
  72%{opacity:.4} 100%{opacity:0;transform:translateY(calc(var(--h)*-1)) scale(1.05)}
}
@keyframes sp-neon{
  0%{opacity:0;letter-spacing:.6em;filter:blur(5px);text-shadow:none}
  46%{opacity:1;text-shadow:0 0 26px rgba(246,214,140,.95),0 0 52px rgba(201,146,47,.5)}
  to{opacity:1;letter-spacing:.3em;filter:blur(0);
     text-shadow:0 0 14px rgba(246,214,140,.5),0 0 32px rgba(201,146,47,.25)}
}
@keyframes sp-etire{ to{ width:62%; } }
@keyframes sp-remonte{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ---------- écrans verticaux ---------- */
@media (max-aspect-ratio:1/1){
  #plcc-splash .sp-socle{ top:42%; width:88vmin; }
  #plcc-splash .sp-halo { top:42%; width:100vmin; height:100vmin; }
  #plcc-splash .sp-legende{ bottom:10%; width:92%; }
  #plcc-splash .sp-institution{
    white-space:normal; font-size:clamp(.6rem,2.5vmin,.95rem);
    letter-spacing:.22em; line-height:1.7;
  }
  #plcc-splash .sp-devise{ font-size:clamp(.46rem,1.9vmin,.72rem); letter-spacing:.22em; }
  #plcc-splash .sp-col{ font-size:calc(1.5vmin * var(--t)); }
}