/* ========================================
   Écran de chargement « Diablotin » (html_sections/splash.html)
   Le logo est découpé en calques du même PNG (1024×455) avec clip-path :
   le C et le texte fixes, les deux cornes et la queue qui pivotent.
   Coupes mesurées au pixel : corne gauche à y=100 px (colonnes 78–131),
   corne droite à y=96 px (colonnes 238–295), tige de la queue à y=318 px
   (colonnes 123–150) ; le bas du C autour de la tige reste fixe.
   Sans coupure aux jointures (vérifié image par image en 1024 px) :
   - chaque pièce pivote autour d'un point posé SUR sa coupe, au centre du
     trait : le bord n'y glisse que d'un quart de pixel ;
   - la pièce déborde de quelques pixels sur la partie fixe pour combler le
     petit coin que la rotation ouvre à la coupe ;
   - dans la jointure, un calque parent fixe (.cp-splash-joint) limite la
     pièce à la silhouette d'origine, puis lui rend sa liberté en dégradé :
     ni débord, ni voile, ni marche.
   Les découpes précédentes coupaient la tige au mauvais endroit et
   laissaient des encoches visibles dès que le logo est affiché en grand.
   ======================================== */
.cp-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: var(--noir, #0B0B0B);
  cursor: pointer;
  transition: opacity .45s ease, visibility .45s;
}
/* display:grid l'emporterait sur l'attribut hidden */
.cp-splash[hidden] { display: none; }
.cp-splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.cp-splash-logo {
  --k: 1;
  position: relative;
  width: min(260px, 62vw);
  aspect-ratio: 1024 / 455;
  animation: cp-splash-in .45s ease-out both, cp-splash-glow 2.2s ease-in-out infinite;
}
.cp-splash-part,
.cp-splash-joint {
  position: absolute;
  inset: 0;
}
.cp-splash-part {
  background: url('../../images/logo_splash.webp') center / contain no-repeat;
}

/* Jointure : silhouette d'origine dans le rectangle [colonnes c–d] ×
   [lignes a–b], libre ailleurs ; la liberté revient en dégradé entre f et a
   et entre b et g (union de trois calques de masque). Limitée aux colonnes
   de la jointure : la flèche de la queue, qui remonte en pivotant, était
   sinon rognée. */
.cp-splash-joint {
  -webkit-mask:
    url('../../images/logo_splash.webp') center / contain no-repeat,
    linear-gradient(to bottom, #000 var(--f), transparent var(--a), transparent var(--b), #000 var(--g)),
    linear-gradient(to right, #000 var(--c), transparent var(--c), transparent var(--d), #000 var(--d));
  mask:
    url('../../images/logo_splash.webp') center / contain no-repeat,
    linear-gradient(to bottom, #000 var(--f), transparent var(--a), transparent var(--b), #000 var(--g)),
    linear-gradient(to right, #000 var(--c), transparent var(--c), transparent var(--d), #000 var(--d));
}
.cp-splash-joint-hl { --f: 18.9%; --a: 20.2%; --b: 25.1%; --g: 25.1%; --c: 6.5%; --d: 14%; }
.cp-splash-joint-hr { --f: 18.02%; --a: 19.34%; --b: 24.6%; --g: 24.6%; --c: 22%; --d: 30%; }
.cp-splash-joint-tail { --f: 68.57%; --a: 68.57%; --b: 71.65%; --g: 72.97%; --c: 12%; --d: 15.2%; }

.cp-splash-body {
  clip-path: polygon(0 0, 7.62% 0, 7.62% 21.98%, 12.8% 21.98%, 12.8% 0, 23.24% 0, 23.24% 21.1%, 28.81% 21.1%, 28.81% 0, 100% 0, 100% 100%, 31.25% 100%, 31.25% 72.53%, 15.2% 72.53%, 15.2% 71.65%, 14.7% 71.65%, 14.7% 69.9%, 12% 69.9%, 12% 68.57%, 6.84% 68.57%, 6.84% 100%, 0 100%);
}
.cp-splash-hl {
  clip-path: polygon(7.62% 0, 12.8% 0, 12.8% 25.1%, 7.62% 25.1%);
  transform-origin: 10.25% 21.98%;
  animation: cp-splash-hl 2.2s cubic-bezier(.45, 0, .3, 1) infinite;
}
.cp-splash-hr {
  clip-path: polygon(23.24% 0, 28.81% 0, 28.81% 24.6%, 23.24% 24.6%);
  transform-origin: 26.17% 21.1%;
  animation: cp-splash-hr 2.2s cubic-bezier(.45, 0, .3, 1) infinite;
}
.cp-splash-tail {
  clip-path: polygon(6.84% 68.57%, 15.2% 68.57%, 15.2% 72.53%, 31.25% 72.53%, 31.25% 100%, 6.84% 100%);
  transform-origin: 13.57% 69.89%;
  animation: cp-splash-tail 2.2s ease-in-out infinite;
}

@keyframes cp-splash-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes cp-splash-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 62, 181, 0)); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 62, 181, .4)); }
}
/* Deux frétillements de cornes (un franc, un petit), puis repos */
@keyframes cp-splash-hl {
  0%, 52%, 100% { transform: rotate(0); }
  9% { transform: rotate(calc(var(--k) * -8deg)); }
  18% { transform: rotate(calc(var(--k) * 3deg)); }
  26% { transform: rotate(0); }
  34% { transform: rotate(calc(var(--k) * -4deg)); }
  42% { transform: rotate(calc(var(--k) * 1deg)); }
}
@keyframes cp-splash-hr {
  0%, 52%, 100% { transform: rotate(0); }
  9% { transform: rotate(calc(var(--k) * 8deg)); }
  18% { transform: rotate(calc(var(--k) * -3deg)); }
  26% { transform: rotate(0); }
  34% { transform: rotate(calc(var(--k) * 4deg)); }
  42% { transform: rotate(calc(var(--k) * -1deg)); }
}
/* Queue : balancement continu, sans arrêt sec en fin de boucle */
@keyframes cp-splash-tail {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(calc(var(--k) * 7deg)); }
  50% { transform: rotate(calc(var(--k) * -5deg)); }
  75% { transform: rotate(calc(var(--k) * 4deg)); }
}

/* « Réduire les animations » : logo fixe, simple fondu de sortie */
@media (prefers-reduced-motion: reduce) {
  .cp-splash-logo, .cp-splash-part { animation: none; }
}