/* ═══ La chute des points, à la connexion (13.10.2026, js/211) ══════════════════════════════════════
   « à la connexion sur rex CRM, fait tomber le point de CRM. qui ensuite fait défiler la suite des
   points qui tombent et les logos du groupe. »
   Un voile aux couleurs du thème, transparent aux clics (pointer-events: none), au-dessus de l'écran de
   chargement (z-index 9000) et sous les messages (9999). js/211 pose les retards et les durées ; les
   impacts sont à 56 % de cdp-p0 et à 42 % de cdp-pas — les mêmes nombres que CDP_T dans le JS.
   Encre blanche en sombre, marine en clair ; les points restent turquoise.
   RETOUR EN ARRIÈRE : retirer la balise de cette feuille et celle de js/211 dans index.html. */
#cdp-scene { position: fixed; inset: 0; z-index: 9500; pointer-events: none; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden;
  --cdp-encre: #FFFFFF; --cdp-point: var(--m-turquoise, #00CFFF);
  background: rgba(11, 18, 32, .94);
  background: color-mix(in srgb, var(--bg, #0B1220) 94%, transparent);
  animation: cdp-voile .22s ease-out backwards; transition: opacity .45s ease; }
html[data-theme="clair"] #cdp-scene { --cdp-encre: var(--m-marine, #113679);
  background: rgba(244, 246, 249, .95);
  background: color-mix(in srgb, var(--bg, #F4F6F9) 95%, transparent); }
#cdp-scene.cdp-sortie { opacity: 0; }
#cdp-scene.cdp-vite { transition-duration: .2s; }
@keyframes cdp-voile { from { opacity: 0; } to { opacity: 1; } }
/* Sous le voile, le logo et Rex de l'écran de chargement (js/03) doublaient REX.CRM : ils s'effacent le
   temps de la scène (classe posée et retirée par js/211), le fond marine reste. */
html.cdp-en-cours #ecran-chargement-crm .ecc-boite { visibility: hidden; }

/* Le dessin : 600 px au plus, la largeur de l'écran moins les marges sur téléphone (343 px à 375). */
#cdp-scene .cdp-svg { display: block; width: min(600px, 100%); height: auto; max-height: calc(100vh - 32px);
  overflow: visible; color: var(--cdp-encre); animation: cdp-entree .35s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes cdp-entree { from { opacity: 0; transform: translateY(10px) scale(.97); } }
#cdp-scene .cdp-mots { fill: currentColor; }

/* Les points tombent depuis leur base : l'écrasement à l'atterrissage se fait contre le sol. */
#cdp-scene .cdp-point, #cdp-scene .cdp-retour, #cdp-scene .cdp-onde { transform-box: fill-box; }
#cdp-scene .cdp-point, #cdp-scene .cdp-retour { fill: var(--cdp-point); }
#cdp-scene .cdp-point { transform-origin: 50% 100%; animation-timing-function: linear; }
#cdp-scene .cdp-p0 { animation-name: cdp-p0; animation-fill-mode: both; }
#cdp-scene .cdp-pas { opacity: 0; animation-name: cdp-pas; animation-fill-mode: forwards; }
#cdp-scene .cdp-retour { opacity: 0; transform-origin: 50% 50%; animation-name: cdp-retour; animation-fill-mode: forwards; animation-timing-function: ease-out; }
#cdp-scene .cdp-onde { fill: none; stroke: var(--cdp-point); stroke-width: 3; opacity: 0; transform-origin: 50% 50%;
  animation-name: cdp-onde; animation-fill-mode: forwards; animation-timing-function: ease-out; }
/* Les lettres sortent du point : vers la gauche pour COFIDEX, REVIDEX, ASSUREX et EX, vers la droite pour GROUP. */
#cdp-scene .cdp-l { opacity: 0; animation-name: cdp-lettre-g; animation-fill-mode: both; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
#cdp-scene .cdp-l.cdp-d { animation-name: cdp-lettre-d; }

/* Le point de REX.CRM (1,3 fois celui des marques) : il prend appui, se détache, tombe 130 plus bas
   dans COFIDEX., s'écrase et rebondit. Impact à 56 %. */
@keyframes cdp-p0 {
  0%   { transform: translateY(-130px) scale(1.3, 1.3); animation-timing-function: ease-out; }
  9%   { transform: translateY(-130px) scale(1.42, 1.12); animation-timing-function: ease-out; }
  20%  { transform: translateY(-140px) scale(1.18, 1.42); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  56%  { transform: translateY(0) scale(.9, 1.14); animation-timing-function: ease-out; }
  64%  { transform: translateY(0) scale(1.32, .7); animation-timing-function: ease-out; }
  78%  { transform: translateY(-12px) scale(.96, 1.05); animation-timing-function: ease-in; }
  90%  { transform: translateY(0) scale(1.07, .94); animation-timing-function: ease-out; }
  100% { transform: translateY(0) scale(1, 1); }
}
/* Les dominos : chaque point part du précédent, 110 plus haut, au moment de son impact. Impact à 42 %. */
@keyframes cdp-pas {
  0%   { opacity: 1; transform: translateY(-110px) scale(1, 1); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  42%  { opacity: 1; transform: translateY(0) scale(.9, 1.14); animation-timing-function: ease-out; }
  52%  { opacity: 1; transform: translateY(0) scale(1.3, .7); animation-timing-function: ease-out; }
  70%  { opacity: 1; transform: translateY(-10px) scale(.96, 1.05); animation-timing-function: ease-in; }
  85%  { opacity: 1; transform: translateY(0) scale(1.06, .95); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}
@keyframes cdp-retour {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes cdp-onde {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.8); }
}
@keyframes cdp-lettre-g { 0% { opacity: 0; transform: translateX(18px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes cdp-lettre-d { 0% { opacity: 0; transform: translateX(-18px); } 100% { opacity: 1; transform: translateX(0); } }

/* Rien pour qui demande moins d'animations (js/211 ne la lance pas non plus), rien à l'impression. */
@media (prefers-reduced-motion: reduce) { #cdp-scene { display: none !important; } }
@media print { #cdp-scene { display: none !important; } }