/* === Pendu — décoration animée du banner ===
   Le layout banner (wrapper, home, title) vient de banner.css partagé,
   chargé via le proxy local css-banner.php depuis SHARED_PATH/banner.php.
*/

/* === Pendu — Bandeau identitaire persistant (toutes les pages) === */

/* Tirets décoratifs en fond du body (like word blanks) */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 30px,
      rgba(249,115,22,0.03) 30px, rgba(249,115,22,0.03) 50px,
      transparent 50px, transparent 60px
    );
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Bandeau compact */

/* Mini-tirets décoratifs dans les coins */

/* Lettres décoratives flottantes */

.lettre-deco {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 900;
  color: #fff;
  animation: lettre-float 3s ease-in-out infinite;
  will-change: transform;
}
.lettre-deco:nth-child(2) {
  animation-delay: -1s;
}
.lettre-deco:nth-child(3) {
  animation-delay: -2s;
}
.lettre-a {
  background: linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow: 0 3px 8px rgba(217,119,6,0.5);
}
.lettre-b {
  background: linear-gradient(135deg, #f97316, #ea580c);
  box-shadow: 0 3px 8px rgba(234,88,12,0.5);
}
.lettre-c {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 3px 8px rgba(220,38,38,0.5);
}
@keyframes lettre-float {

  0%, 100% {
  transform: translateY(0);
}
  50% {
  transform: translateY(-5px);
}
}

/* Titre-lien */

/* Responsive */
@media (max-width: 480px) {

  
  
  .lettre-deco {
  width: 22px; height: 22px; font-size: 0.75rem;
}
}

/* === Bouton retour à l'accueil (aligné verticalement avec .banner-title via `bottom`) === */

/* === FIN bouton retour à l'accueil === */