/* ═════════════════════════════════════════════════════════════
   MISC.CSS
   Utilitaires et composants mineurs : bouton retour, logo site,
   sous-titre, carrousel texte (marquee), bouton back-to-top.
   ═════════════════════════════════════════════════════════════ */

/* ─ BOUTON RETOUR ──────────────────────────────────────────────– */
.back-button {
  background: transparent;
  color: var(--color-text-tertiary); /* Gris moyen */
  border: var(--border); /* Bordure grise */
  padding: var(--spacing-sm) var(--spacing-md); /* 8px haut/bas, 16px côtés */
  font-size: var(--font-size-sm); /* Petit texte (14px) */
  border-radius: var(--border-radius); /* Coins arrondis (4px) */
  cursor: pointer;
  margin-bottom: var(--spacing-xxl); /* 40px avant la section suivante */
  transition:
    background var(--transition), /* 0.2s */
    color var(--transition),
    border-color var(--transition),
    transform var(--transition); /* Slide animation */
  font-family: var(--font-family-base);
  letter-spacing: 0.03em; /* Légèrement espacé */
}

.back-button:hover {
  background: var(--color-bg-tertiary); /* Fond gris */
  color: var(--color-accent); /* Texte bleu */
  border-color: var(--color-accent); /* Bordure bleue */
  transform: translateX(-3px); /* Recule de 3px au survol */
}

/* ─ LOGO DU SITE ───────────────────────────────────────────────– */
.site-logo img {
  width: 100%; /* Responsive */
  max-width: 400px; /* Limite à 400px */
  height: auto;
  display: block;
  margin: 0 auto; /* Centré */
}

/* ─ SOUS-TITRE ────────────────────────────────────────────────── */
.subtitle {
  text-align: left; /* Aligné à gauche */
  width: 100%;
  max-width: 1000px; /* Limité à 1000px */
  padding: 0 var(--spacing-md); /* 16px côtés */
  box-sizing: border-box;
  color: var(--color-text-tertiary); /* Gris moyen */
  font-size: var(--font-size-sm); /* Petit texte (14px) */
}

/* ─ CARROUSEL TEXTE (MARQUEE/DÉFILEMENT) ───────────────────────– */
.marquee-container {
  width: 100%; /* Pleine largeur */
  overflow: hidden; /* Cache le texte qui sort */
  padding: var(--spacing-sm) 0; /* 8px haut/bas */
  border-top: var(--border); /* Ligne grise */
  border-bottom: var(--border);
  margin-top: var(--spacing-md); /* 16px avant */
  background: var(--color-bg-secondary); /* Fond navbar */
}

.marquee-text {
  display: inline-block;
  white-space: nowrap; /* Sur une seule ligne */
  font-size: var(--font-size-xs); /* Très petit (12px) */
  color: var(--color-text-quaternary); /* Gris foncé */
  letter-spacing: 0.08em; /* Très espacé */
  text-transform: uppercase; /* MAJUSCULES */
  animation: marquee-scroll 20s linear infinite; /* Défilement 20s infini */
  padding-left: 100%; /* Start hors écran */
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0); /* Start position */
  }
  to {
    transform: translateX(-200%); /* End position (sort complètement) */
  }
}

/* Pause au survol */
.marquee-container:hover .marquee-text {
  animation-play-state: paused; /* Arrête le scroll */
}

/* Respect des préférences utilisateur (mouvement réduit) */
@media (prefers-reduced-motion: reduce) {
  .marquee-text {
    animation: none; /* Pas d'animation */
    padding-left: var(--spacing-md); /* Affiche statique */
  }
}

/* ─ BOUTON RETOUR HAUT (BACK-TO-TOP) ───────────────────────────– */
#back-to-top {
  position: fixed; /* Fixe en bas-droit de l'écran */
  bottom: 24px; /* 24px du bas */
  right: 24px; /* 24px de la droite */
  padding: var(--spacing-sm) var(--spacing-md); /* 8px haut/bas, 16px côtés */
  font-size: var(--font-size-sm); /* Petit texte (14px) */
  font-family: var(--font-family-base);
  background: var(--color-bg-secondary); /* Fond navbar */
  color: var(--color-text-secondary); /* Texte gris clair */
  border: var(--border); /* Bordure grise */
  border-radius: var(--border-radius); /* Coins arrondis (4px) */
  cursor: pointer;
  display: none; /* Caché par défaut */
  z-index: 9999; /* Priorité maximale */
  letter-spacing: 0.03em; /* Légèrement espacé */
  transition:
    background var(--transition), /* 0.2s */
    color var(--transition),
    border-color var(--transition),
    transform var(--transition); /* Slide animation */
}

#back-to-top.visible {
  display: block; /* Visible quand on scroll */
}

#back-to-top:hover {
  background: var(--color-bg-tertiary); /* Fond gris */
  color: var(--color-accent); /* Texte bleu */
  border-color: var(--color-accent); /* Bordure bleue */
  transform: translateY(-2px); /* Monte légèrement */
}
.page-title, .entry-title, h1.title { display: none !important; }

/* Masquer le titre automatique WP */
.entry-title,
.page-title,
h1.title,
h2.title,
article > h2:first-child {
  display: none;
}