/* ============================================================================
   SCRIBA : le logo (en-tête, carte de connexion, page des conditions).
   ----------------------------------------------------------------------------
   Le SVG est EN LIGNE (gabarits/scriba/logo/, générés par
   scripts/logo/generer_logo.py) : ses parties marine sont en `currentColor`,
   le dégradé du bouton est fixe. La couleur se règle donc ici, par thème.

   Seule couleur propre : l'encre marine du logo source, mesurée. Le reste vient
   des jetons du socle. Aucune taille en dur dans les pages : tout passe par
   les variables ci-dessous.
   ========================================================================= */
:root {
  --scriba-logo-encre: #041137;
  /* Bandeau : la hauteur du logo de la maison qu'il remplace. Le bandeau garde
     donc exactement sa hauteur (contrôlé par le banc, rubrique « logo »). */
  --scriba-logo-entete-hauteur: var(--iav-entete-logo-hauteur, 26px);
  /* Carte de connexion et page des conditions : la version empilée. */
  --scriba-logo-empile-hauteur: 6rem;
  --scriba-logo-empile-hauteur-conditions: 5rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) { --scriba-logo-encre: var(--iav-texte-principal, #E8EDF3); }
}
:root[data-theme="sombre"] { --scriba-logo-encre: var(--iav-texte-principal, #E8EDF3); }

.sl { display: block; width: auto; overflow: visible; }

/* ── En-tête : hauteur fixe, blanc sur le bandeau, jamais animé ──────────── */
.iav-entete-marque .sl-horizontal {
  height: var(--scriba-logo-entete-hauteur);
  color: var(--iav-texte-inverse, #FFFFFF);
}

/* ── Version empilée : le logo, puis l'accroche traduite (texte, pas image) ─ */
.scriba-logo-bloc { margin: 0; text-align: center; }
.scriba-logo-bloc .sl-empile {
  height: var(--scriba-logo-empile-hauteur);
  margin-inline: auto;
  color: var(--scriba-logo-encre);
}
.scriba-logo-conditions .sl-empile { height: var(--scriba-logo-empile-hauteur-conditions); }
.scriba-logo-conditions { margin-block-end: var(--scriba-v-3); }
.scriba-accroche {
  margin: var(--scriba-v-1) 0 0;
  color: var(--iav-texte-secondaire, #5A6B7F);
  font-size: var(--iav-taille-secondaire, 12px);
}
/* Sur la carte, l'accroche se détache du sous-titre « Connexion » qui la suit. */
.iav-connexion-marque .scriba-accroche { margin-block-end: var(--scriba-v-2); }
/* Sur la carte, le titre « Scriba » EST le logo : le h1 du socle n'ajoute que sa marge. */
.iav-connexion-titre.scriba-logo-bloc { margin-block-start: 0; }

/* ── Animation d'apparition : une fois par session de navigation ─────────────
   Principe et rythme COPIÉS de l'intro du logo MD (md-keybridge,
   ecran-pocket-dongle/firmware-2.1/src/animations.cpp, variante 1 « trait plein
   et posé ») : le trait s'écrit en suivant son tracé, départ et arrivée en
   douceur (lissage smoothstep, ici cubic-bezier(.45, 0, .55, 1)), l'encre
   fraîche est bleutée puis prend sa couleur, et le dernier élément apparaît
   en DUREE_FONDU_MS = 280 ms. Durées ramenées de 2 s à 1,2 s pour une page web.

   La classe `scriba-logo-anime` est posée sur <html> par scriba-logo.js, dans
   le <head>, AVANT le premier affichage : jamais de logo qui s'affiche puis
   s'efface. Elle n'anime que la version empilée ; le bandeau reste fixe. Rien
   ne bouge en dehors du dessin (transformations internes au SVG) : aucun saut
   de mise en page, et le formulaire est utilisable dès l'affichage. */
.scriba-logo-anime .sl-empile .sl-bulle {
  stroke-dasharray: 1;
  animation: sl-ecrire .62s cubic-bezier(.45, 0, .55, 1) both, sl-encre .9s ease-out both;
}
.scriba-logo-anime .sl-empile .sl-ligne {
  transform-box: fill-box;
  transform-origin: left center;
  animation: sl-ligne .28s cubic-bezier(.45, 0, .55, 1) both, sl-encre .6s ease-out both;
}
.scriba-logo-anime .sl-empile .sl-l1 { animation-delay: .40s, .40s; }
.scriba-logo-anime .sl-empile .sl-l2 { animation-delay: .52s, .52s; }
.scriba-logo-anime .sl-empile .sl-l3 { animation-delay: .64s, .64s; }
.scriba-logo-anime .sl-empile .sl-bouton {
  transform-box: fill-box;
  transform-origin: center;
  animation: sl-pop .28s cubic-bezier(.34, 1.56, .64, 1) .92s both;
}
@keyframes sl-ecrire { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes sl-encre  { from { stroke: var(--iav-bleu-lien, #2B6CB0); } to { stroke: currentColor; } }
@keyframes sl-ligne  { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@keyframes sl-pop    { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .scriba-logo-anime .sl-empile * { animation: none !important; }
}