/*
  Veotion — icône et logo animés (26/10/2026, ETAT-SAAS.md M17, M24 à M27, M30 ; identité B choisie par l'utilisateur).
  Animations CSS pures : mêmes règles pour l'application, la page d'accueil et le rendu image par image des vidéos
  (scripts/marque/rendre-logo-anime.mjs fixe currentTime de chaque animation).

  LE LOGO EST UN BLOC (M30) : le nom et le slogan sont rognés à leur hauteur de capitale (text-box), l'écart entre eux est
  serré, et le bloc arrondi de l'icône prend EXACTEMENT la hauteur de l'ensemble : son haut sur le haut du nom, son bas sur
  le bas du slogan. Le slogan a la largeur du nom (taille agrandie, --veo-espacement calculé à l'affichage).

  ANIMATION EN BOUCLE (cycle de 7 s, inspirée du logo de motion-design.pro, M30) :
    0 → 0,65 s   le V se trace comme une trajectoire d'animation, un point file à sa pointe et se pose au sommet bas ;
    0,6 → 1,1 s  le rectangle aux coins arrondis et sa petite étoile apparaissent au bout du bras droit ;
    1,0 → 1,7 s  les lettres du slogan entrent une à une par la droite ;
    2,0 → 3,4 s  le rectangle devient l'étoile qui PULSE deux fois (anneau de lumière), puis redevient rectangle (M26) ;
    3,4 → 5,8 s  repos (tout est posé) ;
    5,8 → 6,3 s  les lettres du slogan repartent vers la gauche ;
    6,2 → 6,8 s  le V se rembobine (le trait s'efface derrière la pointe), le rectangle se replie ; le cycle recommence.
  Sur le site, le NOM reste FIXE (.veo-anime) ; dans les vidéos, le nom entre aussi, lettre à lettre (.veo-anime-nom).
  L'icône et le slogan tournent EN BOUCLE, SANS FIN, même quand le système demande moins d'animations (consigne M78 du
  26/10/2026 : le PC de l'utilisateur a ce réglage, et le logo restait figé).
*/

/* ---------- Bloc : icône à la hauteur du nom + slogan ---------- */
.veo-logo { display: inline-flex; align-items: stretch; gap: 0.36em; line-height: 1; }
.veo-logo .veo-mots { display: inline-flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 0.26em; }
.veo-logo .veo-nom { display: block; font-family: "Veotion Geist", "Geist Variable", "Geist", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.035em; white-space: nowrap; line-height: 1; text-box: trim-both cap alphabetic; }
.veo-logo .veo-lettre, .veo-logo .veo-s { display: inline-block; }
.veo-logo .veo-slogan-cadre { display: block; position: relative; }
.veo-logo .veo-slogan { display: block; font-family: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", "Veotion Jakarta", system-ui, sans-serif; font-weight: 600; font-size: 0.5em; letter-spacing: var(--veo-espacement, 0.02em); white-space: nowrap; line-height: 1; color: var(--veo-accent, #fbbf24); text-box: trim-both cap alphabetic; }
/* L'icône est TOUJOURS dans son bloc aux bords arrondis (M27) ; carré, de la hauteur du bloc de mots (M30) */
.veo-logo .veo-tuile { position: relative; display: grid; place-items: center; align-self: stretch; aspect-ratio: 1 / 1; height: auto; min-height: 1.3em; flex-shrink: 0; border-radius: 26%; color: #fff; background: linear-gradient(150deg, #22222a, #0a0a0d); border: 0.025em solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 0.025em 0 rgba(255, 255, 255, 0.2), 0 0.3em 0.7em -0.35em rgba(0, 0, 0, 0.75); }
.veo-logo .veo-tuile::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 52%); pointer-events: none; }
.veo-logo .veo-tuile--claire { color: #0b0b0f; background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 0.25em 0.6em -0.3em rgba(0, 0, 0, 0.28); }
.veo-logo .veo-tuile--claire::before { display: none; }
.veo-logo .veo-tuile--claire .veo-cle { fill: #0b0b0f; }
/* V à 66 % du bloc, comme sur le logo choisi (glyphe de 48 dans une tuile de 74) */
/* M45 (26/10) : le V agrandi dans son bloc (66 % → 80 %) ; le bloc garde la hauteur nom + slogan (M30) */
.veo-logo .veo-tuile .veo-icone { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; overflow: visible; }
.veo-logo > .veo-icone { width: 1.62em; height: 1.62em; flex-shrink: 0; overflow: visible; }

/* ---------- Icône : état posé ---------- */
.veo-icone .veo-trait, .veo-icone .veo-trainee { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
.veo-icone .veo-tete, .veo-icone .veo-anneau { opacity: 0; }
.veo-icone .veo-cle, .veo-icone .veo-etoile-petite, .veo-icone .veo-anneau, .veo-icone .veo-point { transform-box: fill-box; transform-origin: center; }

/* ---------- Boucle de 7 s ---------- */
.veo-anime .veo-trait { animation: veo-trace 7s linear infinite both; }
.veo-anime .veo-tete { animation: veo-tete 7s linear infinite both; }
.veo-anime .veo-point { animation: veo-point 7s linear infinite both; }
.veo-anime .veo-trainee:nth-of-type(1) { animation: veo-trainee 7s linear infinite both; }
.veo-anime .veo-trainee:nth-of-type(2) { animation: veo-trainee 7s linear 0.08s infinite both; }
.veo-anime .veo-cle { animation: veo-cle 7s linear infinite both; }
.veo-anime .veo-etoile-petite { animation: veo-etoile-petite 7s linear infinite both; }
.veo-anime .veo-anneau { animation: veo-anneau 7s linear infinite both; }
.veo-anime .veo-tuile { animation: veo-tuile 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.veo-anime .veo-slogan .veo-s { animation: veo-slogan 7s linear infinite both; animation-delay: calc(var(--i) * 0.04s); }

/* Tracé (0 → 9,3 %) : descente en accélérant, remontée en freinant ; rembobinage (88,6 → 97,1 %) */
@keyframes veo-trace {
  0% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.75); }
  4.64% { stroke-dashoffset: 50; animation-timing-function: cubic-bezier(0, 0.25, 0.35, 1); }
  9.29%, 88.57% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  97.14%, 100% { stroke-dashoffset: 100; }
}
/* La pointe file sur le trait (mêmes courbes, segment par segment) */
@keyframes veo-tete {
  0% { cx: 11px; cy: 10px; opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.75); }
  4.64% { cx: 24px; cy: 36px; animation-timing-function: cubic-bezier(0, 0.25, 0.35, 1); }
  9.29% { cx: 37px; cy: 10px; opacity: 1; }
  10.4%, 100% { cx: 37px; cy: 10px; opacity: 0; }
}
@keyframes veo-point { 0%, 4.3% { transform: scale(0); } 7.5% { transform: scale(1.2); } 9%, 88.57% { transform: scale(1); } 92%, 100% { transform: scale(0); } }
@keyframes veo-trainee { 0%, 2% { stroke-dashoffset: 100; opacity: 0; } 4% { opacity: 1; } 9%, 87% { stroke-dashoffset: 0; opacity: 1; } 93%, 100% { stroke-dashoffset: 100; opacity: 0; } }
/* Rectangle : apparaît (8,6 → 15,7 %), devient l'étoile qui pulse (28,6 → 48,6 %), se replie au rembobinage (88 → 92 %) */
@keyframes veo-cle {
  0%, 8.57% { d: path("M34.75 2.9 C37.32 2.9 39.88 2.9 42.45 2.9 C44.08 2.9 45.4 4.22 45.4 5.85 C45.4 7.28 45.4 8.72 45.4 10.15 C45.4 11.78 44.08 13.1 42.45 13.1 C39.88 13.1 37.32 13.1 34.75 13.1 C33.12 13.1 31.8 11.78 31.8 10.15 C31.8 8.72 31.8 7.28 31.8 5.85 C31.8 4.22 33.12 2.9 34.75 2.9 Z"); transform: rotate(-25deg) scale(0); filter: drop-shadow(0 0 0 rgba(253, 230, 138, 0)); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  15.71%, 28.57% { d: path("M34.75 2.9 C37.32 2.9 39.88 2.9 42.45 2.9 C44.08 2.9 45.4 4.22 45.4 5.85 C45.4 7.28 45.4 8.72 45.4 10.15 C45.4 11.78 44.08 13.1 42.45 13.1 C39.88 13.1 37.32 13.1 34.75 13.1 C33.12 13.1 31.8 11.78 31.8 10.15 C31.8 8.72 31.8 7.28 31.8 5.85 C31.8 4.22 33.12 2.9 34.75 2.9 Z"); transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 0 rgba(253, 230, 138, 0)); animation-timing-function: ease-in-out; }
  32.86% { d: path("M38.6 -1 C38.6 -1 38.6 -1 38.6 -1 C38.6 5.66 40.94 8 47.6 8 C47.6 8 47.6 8 47.6 8 C40.94 8 38.6 10.34 38.6 17 C38.6 17 38.6 17 38.6 17 C38.6 10.34 36.26 8 29.6 8 C29.6 8 29.6 8 29.6 8 C36.26 8 38.6 5.66 38.6 -1 Z"); transform: scale(1); filter: drop-shadow(0 0 2px rgba(253, 230, 138, 0.9)); animation-timing-function: ease-in-out; }
  36.43% { transform: scale(1.28) rotate(12deg); filter: drop-shadow(0 0 4px rgba(253, 230, 138, 1)); animation-timing-function: ease-in-out; }
  40% { transform: scale(0.96) rotate(0deg); filter: drop-shadow(0 0 1.5px rgba(253, 230, 138, 0.7)); animation-timing-function: ease-in-out; }
  43.57% { transform: scale(1.22) rotate(-10deg); filter: drop-shadow(0 0 4px rgba(253, 230, 138, 1)); animation-timing-function: ease-in-out; }
  45% { d: path("M38.6 -1 C38.6 -1 38.6 -1 38.6 -1 C38.6 5.66 40.94 8 47.6 8 C47.6 8 47.6 8 47.6 8 C40.94 8 38.6 10.34 38.6 17 C38.6 17 38.6 17 38.6 17 C38.6 10.34 36.26 8 29.6 8 C29.6 8 29.6 8 29.6 8 C36.26 8 38.6 5.66 38.6 -1 Z"); transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px rgba(253, 230, 138, 0.8)); animation-timing-function: ease-in-out; }
  48.57%, 88% { d: path("M34.75 2.9 C37.32 2.9 39.88 2.9 42.45 2.9 C44.08 2.9 45.4 4.22 45.4 5.85 C45.4 7.28 45.4 8.72 45.4 10.15 C45.4 11.78 44.08 13.1 42.45 13.1 C39.88 13.1 37.32 13.1 34.75 13.1 C33.12 13.1 31.8 11.78 31.8 10.15 C31.8 8.72 31.8 7.28 31.8 5.85 C31.8 4.22 33.12 2.9 34.75 2.9 Z"); transform: scale(1); filter: drop-shadow(0 0 0 rgba(253, 230, 138, 0)); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  92%, 100% { d: path("M34.75 2.9 C37.32 2.9 39.88 2.9 42.45 2.9 C44.08 2.9 45.4 4.22 45.4 5.85 C45.4 7.28 45.4 8.72 45.4 10.15 C45.4 11.78 44.08 13.1 42.45 13.1 C39.88 13.1 37.32 13.1 34.75 13.1 C33.12 13.1 31.8 11.78 31.8 10.15 C31.8 8.72 31.8 7.28 31.8 5.85 C31.8 4.22 33.12 2.9 34.75 2.9 Z"); transform: scale(0); }
}
/* La petite étoile du rectangle : avec lui, s'efface quand il devient la grande étoile, puis revient */
@keyframes veo-etoile-petite { 0%, 10% { opacity: 0; transform: scale(0); } 16.4%, 28.57% { opacity: 1; transform: scale(1); } 31.4%, 46% { opacity: 0; transform: scale(0.3); } 50%, 87.5% { opacity: 1; transform: scale(1); } 91.5%, 100% { opacity: 0; transform: scale(0); } }
/* Un anneau de lumière à chaque pulsation */
@keyframes veo-anneau { 0%, 34.6% { opacity: 0; transform: scale(0.3); } 35.4% { opacity: 0.9; transform: scale(0.45); } 39.3% { opacity: 0; transform: scale(2.4); } 42.5% { opacity: 0; transform: scale(0.3); } 43.2% { opacity: 0.8; transform: scale(0.45); } 47.5%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes veo-tuile { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
/* Slogan (d'après motion-design.pro) : lettres une à une par la droite (14,3 → 21,4 % + décalage), départ vers la
   gauche avant le rembobinage (82,9 → 87,9 %) */
@keyframes veo-slogan {
  0%, 14.29% { opacity: 0; transform: translateX(1.2em); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  21.43%, 82.86% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.4); }
  87.86%, 100% { opacity: 0; transform: translateX(-0.7em); }
}

/* Nom animé lettre à lettre : DANS LES VIDÉOS seulement (sur le site, le nom reste fixe, M25) ; une seule fois */
.veo-anime.veo-anime-nom .veo-lettre { animation: veo-lettre 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(0.55s + var(--i) * 0.055s); }
@keyframes veo-lettre { from { opacity: 0; transform: translateY(0.55em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }