/* ==========================================================================
   Le logo Mentorni — wordmark
   --------------------------------------------------------------------------
   Pas d'icône, pas de monogramme : le logo EST du texte, « mentorni » en bas
   de casse, Baloo 2 800, encre #FF6363. Il n'y a donc aucun fichier binaire à
   charger pour l'afficher — seulement une police et ces règles.

   L'animation : un reflet lettre par lettre qui remonte du « i » vers le
   « m », puis un bond du « m » quand le reflet l'atteint. Boucle de 6 s, donc
   le logo est immobile la plus grande partie du temps — c'est voulu, une
   marque qui s'agite en permanence fatigue.

   Chaque lettre est un `<span>` inline-block dans un conteneur `flex`. Pas de
   `background-clip: text` : il se répète sur chaque lettre et découpe le mot.
   ========================================================================== */

:root {
  --brand-ink:       #FF6363;
  --brand-ink-light: #FFCACA;
  --brand-black:     #1C1A17;
  --brand-cream:     #FDFBF7;
  --brand-bg:        #F7F4EE;
  --logo-font:       'Baloo 2', system-ui, sans-serif;
  --logo-weight:     800;
  --logo-tracking:   -0.03em;
  --logo-min-size:   13px;
  --logo-cycle:      6s;
}

.mn-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--logo-font);
  font-weight: var(--logo-weight);
  letter-spacing: var(--logo-tracking);
  line-height: 1.1;
  color: var(--brand-ink);
  /* Taille par défaut quand l'appelant n'en donne aucune. Le plancher de
     13 px, lui, est appliqué par le composant : un style en ligne l'emporte
     toujours sur cette feuille, donc l'écrire ici ne protégerait de rien. */
  font-size: 24px;
  min-height: var(--logo-min-size);
  text-decoration: none;
  white-space: nowrap;
}

/* L'interlettrage se resserre moins sous 20 px : à −0.03em, les petites
   tailles collent les lettres entre elles. */
.mn-logo--sm { letter-spacing: -0.02em; }

a.mn-logo:hover,
a.mn-logo:focus { color: var(--brand-ink); text-decoration: none; }

.mn-logo__l { display: inline-block; }

/* --------------------------------------------------------------------------
   Les quatre versions
   -------------------------------------------------------------------------- */

.mn-logo--brand   { color: var(--brand-ink); }
.mn-logo--dark    { color: var(--brand-ink); }              /* sur #1C1A17 */
.mn-logo--neutral { color: var(--brand-black); }            /* impression N&B */
.mn-logo--inverse { color: var(--brand-cream); }            /* sur #FF6363 */

/* --------------------------------------------------------------------------
   L'animation
   -------------------------------------------------------------------------- */

@keyframes mn-flash {
  0%, 6%   { color: var(--brand-ink); }
  3%       { color: var(--brand-ink-light); }
  100%     { color: var(--brand-ink); }
}

/* Le « m » ajoute le bond au reflet. */
@keyframes mn-mflash {
  0%        { color: var(--brand-ink); transform: scale(1) rotate(0deg); }
  3%        { color: var(--brand-ink-light); }
  5%        { transform: scale(1.2) rotate(-3deg); }
  6%        { color: var(--brand-ink); }
  11%, 100% { color: var(--brand-ink); transform: scale(1) rotate(0deg); }
}

/* Les décalages remontent du « i » (0 s) au « m » (1,4 s) : le reflet
   parcourt le mot de droite à gauche. */
.mn-logo--anime .mn-logo__l {
  animation: mn-flash var(--logo-cycle) ease-in-out infinite;
}

.mn-logo--anime .mn-logo__l:nth-child(8) { animation-delay: 0s;   } /* i */
.mn-logo--anime .mn-logo__l:nth-child(7) { animation-delay: .2s;  } /* n */
.mn-logo--anime .mn-logo__l:nth-child(6) { animation-delay: .4s;  } /* r */
.mn-logo--anime .mn-logo__l:nth-child(5) { animation-delay: .6s;  } /* o */
.mn-logo--anime .mn-logo__l:nth-child(4) { animation-delay: .8s;  } /* t */
.mn-logo--anime .mn-logo__l:nth-child(3) { animation-delay: 1s;   } /* n */
.mn-logo--anime .mn-logo__l:nth-child(2) { animation-delay: 1.2s; } /* e */

.mn-logo--anime .mn-logo__l:nth-child(1) {                          /* m */
  transform-origin: 30% 80%;
  animation-name: mn-mflash;
  animation-delay: 1.4s;
}

/* Sur les versions qui ne sont pas à l'encre de marque, le reflet n'a pas de
   sens : il éclaircirait vers un rose qui n'appartient pas à la version. */
.mn-logo--neutral.mn-logo--anime .mn-logo__l,
.mn-logo--inverse.mn-logo--anime .mn-logo__l {
  animation: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Mouvement réduit et impression : logo statique
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mn-logo--anime .mn-logo__l {
    animation: none;
    transform: none;
  }
}

@media print {
  .mn-logo--anime .mn-logo__l { animation: none; transform: none; }
  .mn-logo { color: var(--brand-black); }
}