/* ===== Mode pro (palette) ===== */
body[data-page="pro"] {
  --primary: #ffb70e;
  --primary-dark: #b37d00;
  --primary-light: #fbf7ef;
  --accent: #52bbcd;
}

/* Couleurs de premier plan (texte/logo) du mode pro, pilotées par une classe
   dédiée plutôt que par [data-page] : pendant la transition animée (voir
   js/mode-switch.js, Site.modeSwitch.start), ce fondu doit démarrer dès le
   clic, avant que data-page (qui bascule le fond réel du header, lui caché
   derrière le cercle) ne bascule. Hors animation (chargement initial,
   popstate), fg-pro et data-page sont togglés ensemble. .logo-pro-badge n'est
   volontairement pas concerné : il reste blanc quel que soit le mode.  */
body.fg-pro .tagline,
body.fg-pro .nav-top a,
body.fg-pro .nav-toggle,
body.fg-pro .mode-toggle-title {
  color: var(--black);
}

body.fg-pro .site-footer {
  color: var(--black);
  background: var(--primary-pro);
}

body.fg-pro .logo-block .logo img,
body.fg-pro .logo--compact img {
  filter: brightness(0);
}

.logo-pro-badge {
  font-family: "TRT Groza", var(--font);
  font-weight: 500;
  color: #ffffff;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  max-width: 0;
  margin-left: 0;
  /* Disparition (is-visible retiré) : le CSS utilise la transition définie
     ICI, sur l'état d'arrivée — donc margin-left ne démarre qu'une fois
     max-width fini de résorber le contenu (delay = sa propre durée), pour
     que le mot "pro" ait disparu avant que l'espace ne se referme. */
  transition: max-width 0.4s ease, margin-left 0.2s ease 0.4s;
}

.logo-pro-badge.is-visible {
  /* Apparition : transition définie sur l'état d'arrivée (is-visible ajouté)
     — simultanée, sans délai (comportement d'origine, inchangé). */
  transition: max-width 0.4s ease, margin-left 0.4s ease;
}

.logo-block .logo-pro-badge {
  font-size: 26px;
}

.logo-block .logo-pro-badge.is-visible {
  margin-left: 10px;
  max-width: 90px;
}

.logo--compact .logo-pro-badge {
  font-size: 14px;
}

.logo--compact .logo-pro-badge.is-visible {
  margin-left: 6px;
  max-width: 50px;
}

.site-header.is-scrolled .logo-block .logo-pro-badge {
  display: none;
}