/* ============================================================
   FOND GLOBAL DE LA PAGE
   — Lignes d’aide :
   • Applique un fond uniforme à toute la page
   • N’affecte pas ton scroller ni ses couleurs internes
============================================================ */
body {
    background: #bcbcbc;   /* ⭐ Couleur de fond de toute la page */
    margin: 0;             /* ⭐ Supprime les marges par défaut du navigateur */
    padding: 0;
}


/* ============================================================
   SCROLLER — Style compact, centré, paramétrable et lisible
   Cadre arrondi + horloge fixe + contenu défilant
============================================================ */

/* ============================================================
   SCROLLER — Version optimisée, fidèle à ton intention
   — Lignes d’aide :
   • Largeur basée sur la fenêtre pour un rendu constant
   • max-width : sécurité si le scroller est dans un conteneur
   • padding-left : réserve l’espace pour l’horloge fixe
============================================================ */

#scroller {
    width: 98vw;                       /* Largeur du scroller (98% de la fenêtre) */
    max-width: 98%;                    /* Sécurité si le scroller est dans un conteneur */
    height: 80px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 10px;
    box-sizing: border-box;

    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #bcbcbc;

    position: relative;
    padding-left: 60px;                /* Espace réservé pour l’horloge */
}

/* ------------------------------------------------------------
   CONTENU DÉFILANT
   - inline-flex pour un alignement parfait
   - white-space nowrap pour empêcher les retours à la ligne
   - align-items center pour centrer verticalement
------------------------------------------------------------ */
.scroller-content {
    display: inline-flex;
    align-items: center;                /* ⭐ Centre verticalement */
    white-space: nowrap;
}

/* ------------------------------------------------------------
   BLOC D’UN MESSAGE
   - alignement vertical
   - gap : espace entre image / date / texte
   - padding-right : espace entre les messages
------------------------------------------------------------ */
.item {
    display: inline-flex;
    align-items: center;                /* ⭐ Centre verticalement */
    gap: 8px;                           /* Espace entre les éléments */
    white-space: nowrap;
    padding-right: 40px;                /* Espace entre les messages */
}

/* ------------------------------------------------------------
   IMAGE DU MESSAGE
   - max-height dépend de la hauteur du scroller
   - border-radius pour un rendu doux
------------------------------------------------------------ */
.item-image {
    max-height: 40px;                   /* Ajusté pour une hauteur de scroller de 50px */
    width: auto;
    border-radius: 6px;
}

/* ------------------------------------------------------------
   DATE DU MESSAGE
   - discrète, lisible
   - line-height = hauteur du scroller pour centrage parfait
------------------------------------------------------------ */
.item-date {
    font-size: 1rem;
    opacity: 0.8;
    line-height: 50px;                  /* ⭐ Alignement vertical parfait */
}

/* ------------------------------------------------------------
   TEXTE DU MESSAGE
   - lisible, compact
   - line-height = hauteur du scroller pour centrage parfait
------------------------------------------------------------ */
.item-text {
    font-size: 1.5rem;
    line-height: 50px;                  /* ⭐ Alignement vertical parfait */
}

/* ============================================================
   HORLOGE FIXE À GAUCHE DU SCROLLER
   - reste visible pendant que le texte défile
   - centrée verticalement
   - ne gêne pas la souris
============================================================ */

/* ============================================================
   HORLOGE ORANGE — Élégante, lisible, Bleu glacier
============================================================ */

#scroller-clock {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);

    font-size: 1.25rem;                 /* ⭐ Taille des chiffres légèrement augmentée */
    font-weight: bold;

    /* ⭐ Chiffres bleu glacier lumineux */
    color: #dff3ff;

    /* ⭐ Fond bleu nuit translucide */
    background: rgba(10, 25, 60, 0.55);

    padding: 6px 14px;                  /* ⭐ Capsule plus visible */
    border-radius: 10px;                

    /* ⭐ Cadre bleu glacier argenté */
    border: 1.5px solid rgba(180, 210, 255, 0.45);

    /* ⭐ Halo glacier dans la nuit */
    text-shadow:
        0 0 6px rgba(200,230,255,0.9),
        0 0 14px rgba(150,190,255,0.7);

    animation: pulseClock 2.5s ease-in-out infinite;

    pointer-events: none;
}

/* Animation douce : halo bleu qui respire */
@keyframes pulseClock {
    0%   { opacity: 0.85; text-shadow: 0 0 4px rgba(30,144,255,0.6); }
    50%  { opacity: 1;    text-shadow: 0 0 10px rgba(30,144,255,0.9); }
    100% { opacity: 0.85; text-shadow: 0 0 4px rgba(30,144,255,0.6); }
}