/* Écran d’entrée de l’accueil (js/entree.js) : un livre noir et blanc dont les
   pages se tournent, puis un fondu qui mène au site.
   Jetons de style.css : le livre s’inverse tout seul en thème sombre.
   Feuille à part : style.css et accueil.css sont remplacées en bloc à chaque
   livraison de l’identité visuelle.

   Le livre s’inspire d’un chargeur de Uiverse.io (auteur : Nawsome, licence
   MIT), redessiné en noir et blanc. L’écran dure environ 2,6 s, puis s’efface
   en 1,2 s : le livre n’a pas besoin de finir son tour (3 s). */

html.entree-active { overflow: hidden; }

#entree {
  --fondu: 1200ms;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
  color: var(--text);
  cursor: default;
  opacity: 1;
  transition: opacity var(--fondu) var(--e-doux);
}
/* Le fondu : l’écran s’efface et laisse apparaître le site dessous. */
#entree.sortie { opacity: 0; pointer-events: none; }

/* --- Le livre --------------------------------------------------------------- */
.entree-livre {
  --couverture: var(--accent);
  --page: color-mix(in srgb, var(--bg) 90%, transparent);
  --page-pli: var(--bg);
  --ombre: color-mix(in srgb, var(--accent) 26%, transparent);
  --duree: 3s;
  width: 200px;
  height: 140px;
  position: relative;
}

.entree-livre::before,
.entree-livre::after {
  --r: -6deg;
  content: "";
  position: absolute;
  bottom: 8px;
  width: 120px;
  top: 80%;
  box-shadow: 0 16px 12px var(--ombre);
  transform: rotate(var(--r));
}
.entree-livre::before { left: 4px; }
.entree-livre::after { --r: 6deg; right: 4px; }

.entree-livre > div {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  position: relative;
  z-index: 1;
  perspective: 600px;
  box-shadow: 0 4px 6px var(--ombre);
  background: var(--couverture);
}

.entree-livre ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.entree-livre li {
  --r: 180deg;
  --o: 0;
  --c: var(--page);
  position: absolute;
  top: 10px;
  left: 10px;
  transform-origin: 100% 50%;
  color: var(--c);
  opacity: var(--o);
  transform: rotateY(var(--r));
  animation: var(--duree) ease infinite;
}
.entree-livre li:nth-child(2) { --c: var(--page-pli); animation-name: livre-page-2; }
.entree-livre li:nth-child(3) { --c: var(--page-pli); animation-name: livre-page-3; }
.entree-livre li:nth-child(4) { --c: var(--page-pli); animation-name: livre-page-4; }
.entree-livre li:nth-child(5) { --c: var(--page-pli); animation-name: livre-page-5; }
.entree-livre li svg { width: 90px; height: 120px; display: block; }
.entree-livre li:first-child { --r: 0deg; --o: 1; }
.entree-livre li:last-child { --o: 1; }

@keyframes livre-page-2 {
  0% { transform: rotateY(180deg); opacity: 0; }
  20% { opacity: 1; }
  35%, 100% { opacity: 0; }
  50%, 100% { transform: rotateY(0deg); }
}
@keyframes livre-page-3 {
  15% { transform: rotateY(180deg); opacity: 0; }
  35% { opacity: 1; }
  50%, 100% { opacity: 0; }
  65%, 100% { transform: rotateY(0deg); }
}
@keyframes livre-page-4 {
  30% { transform: rotateY(180deg); opacity: 0; }
  50% { opacity: 1; }
  65%, 100% { opacity: 0; }
  80%, 100% { transform: rotateY(0deg); }
}
@keyframes livre-page-5 {
  45% { transform: rotateY(180deg); opacity: 0; }
  65% { opacity: 1; }
  80%, 100% { opacity: 0; }
  95%, 100% { transform: rotateY(0deg); }
}

/* Lu par les lecteurs d’écran seulement. */
.entree-statut {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .entree-livre { animation: entree-apparait 480ms var(--e-sortie) both; }
}
@keyframes entree-apparait { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

/* Mouvement réduit : le livre reste ouvert sur sa première page, sans tourner. */
@media (prefers-reduced-motion: reduce) {
  .entree-livre li { animation: none; }
  #entree { transition: none; }
}