/* ============================================================================
   LE PRÉCHARGEUR — dessin et animation (refonte motion, 17/10/2026).
   Sorti d'index.html le 20/10/2026 : la politique de sécurité refuse désormais
   tout style en ligne (style-src 'self'). Chargé tôt, dans le <head>.
   ⚠ Son nom ne porte pas d'empreinte : monter ?v= dans index.html à chaque
   modification de ce fichier.
   ============================================================================ */
/* Le préchargeur : n'existe que si prechargeur.js a posé .ec-pre-actif
   (sans JavaScript, pour un robot ou au second chargement : rien). */
#ec-pre { display: none; }
html.ec-pre-actif { overflow: hidden; }
html.ec-pre-actif #ec-pre {
  display: grid; place-items: center; align-content: center; gap: clamp(56px, 8vh, 84px);
  position: fixed; inset: 0; z-index: 2147483000; cursor: pointer;
  background: radial-gradient(120% 90% at 50% 42%, #1d130d 0%, #0b0807 56%, #050404 100%);
  perspective: 1200px;
  transition: opacity 0.75s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
}
html[data-theme="clair"].ec-pre-actif #ec-pre { background: radial-gradient(120% 90% at 50% 42%, #fffaf3 0%, #f4efe7 58%, #e9dfd2 100%); }
.ec-pre__scene { position: relative; width: clamp(112px, 11vw, 150px); aspect-ratio: 5 / 7; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.7, 0, 0.84, 0), opacity 0.5s 0.35s; }
.ec-pre__carte {
  position: absolute; inset: 0; border-radius: 7px; transform-origin: 50% 150%;
  animation: ec-pre-distribuer 2.1s cubic-bezier(0.65, 0, 0.35, 1) both;
  animation-delay: calc(var(--i) * 90ms);
  transform-style: preserve-3d;
}
.ec-pre__dos, .ec-pre__face {
  position: absolute; inset: 0; border-radius: 7px; display: grid; place-items: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.ec-pre__dos {
  background:
    linear-gradient(125deg, rgba(255, 196, 150, 0) 30%, rgba(255, 196, 150, 0.12) 46%, rgba(255, 196, 150, 0) 60%),
    linear-gradient(160deg, #33200f, #150d09 62%);
  border: 1px solid rgba(237, 96, 43, 0.6);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45), inset 0 0 0 5px rgba(0, 0, 0, 0.28), inset 0 0 0 6px rgba(237, 96, 43, 0.22);
}
.ec-pre__dos svg { width: 38%; opacity: 0.95; filter: drop-shadow(0 0 10px rgba(237, 96, 43, 0.45)); }
.ec-pre__scene::before { content: ''; position: absolute; inset: -70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(237, 96, 43, 0.2), transparent); animation: ec-pre-apparaitre 0.9s both; }
.ec-pre__face {
  transform: rotateY(180deg); gap: 10px; align-content: center;
  background: radial-gradient(110% 80% at 50% 30%, #ff7a3c 0%, #ed602b 46%, #a8381a 100%);
  box-shadow: 0 22px 50px rgba(237, 96, 43, 0.35), inset 0 0 0 1px rgba(255, 230, 205, 0.35);
}
.ec-pre__face svg { width: 46%; }
.ec-pre__face b { font: 700 9px/1 'Chakra Petch', 'Barlow', sans-serif; letter-spacing: 0.26em; color: #170c06; white-space: nowrap; }
.ec-pre__retourne { position: absolute; inset: 0; transform-style: preserve-3d; animation: ec-pre-retourner 0.75s cubic-bezier(0.65, 0, 0.35, 1) 1.8s both; }
.ec-pre__carte:not(.ec-pre__carte--maitresse) { animation-name: ec-pre-distribuer-fondu; }
.ec-pre__compteur { margin: 0; font: 600 12px/1 'Chakra Petch', 'Barlow', sans-serif; letter-spacing: 0.32em; color: #ed602b; font-variant-numeric: tabular-nums; animation: ec-pre-apparaitre 0.6s 0.2s both; transition: opacity 0.35s; }
@keyframes ec-pre-distribuer {
  0% { opacity: 0; transform: translate3d(0, 70px, 0) rotate(0deg) scale(0.9); }
  16% { opacity: 1; }
  32% { transform: translate3d(0, 0, 0) rotate(var(--a)) translateY(var(--y)) scale(1); }
  56% { transform: translate3d(0, -4px, 0) rotate(var(--a)) translateY(var(--y)) scale(1); }
  76%, 100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes ec-pre-distribuer-fondu {
  0% { opacity: 0; transform: translate3d(0, 70px, 0) rotate(0deg) scale(0.9); }
  16% { opacity: 1; }
  32% { transform: translate3d(0, 0, 0) rotate(var(--a)) translateY(var(--y)) scale(1); }
  56% { transform: translate3d(0, -4px, 0) rotate(var(--a)) translateY(var(--y)) scale(1); }
  76% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  84%, 100% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes ec-pre-retourner { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } }
@keyframes ec-pre-apparaitre { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* la sortie : la carte fonce vers l'écran, la page apparaît derrière */
#ec-pre.ec-pre--sortie, #ec-pre.ec-pre--passe { opacity: 0; pointer-events: none; }
#ec-pre.ec-pre--sortie .ec-pre__scene { transform: translateZ(600px) scale(3.2); opacity: 0; }
#ec-pre.ec-pre--passe { transition-duration: 0.4s; transition-delay: 0s; }
#ec-pre.ec-pre--sortie .ec-pre__compteur, #ec-pre.ec-pre--passe .ec-pre__compteur { opacity: 0; }

/* Les cinq cartes du préchargeur (ex-attributs style : la CSP refuse l'inline) */
.ec-pre__carte--0 { --i: 0; --a: -24deg; --y: -2px; }
.ec-pre__carte--1 { --i: 1; --a: -12deg; --y: -10px; }
.ec-pre__carte--2 { --i: 2; --a: 0deg; --y: -16px; }
.ec-pre__carte--3 { --i: 3; --a: 12deg; --y: -10px; }
.ec-pre__carte--4 { --i: 4; --a: 24deg; --y: -2px; }