/* Container propre et moderne */
.sb-newsletter-container {
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.sb-newsletter-container p {
    margin: 0 0 15px 0;
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

/* Flexbox */
.sb-newsletter-flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Champs Email */
#sb-news-email {
    flex: 1;
    height: 46px;
    padding: 0 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #000;          
    font-size: 16px;      
    font-family: "HurmeGeometricSans", sans-serif;
    box-sizing: border-box;
}

/* --- LE BOUTON (ÉTAT NORMAL & NOIR PENDANT VALIDATION) --- */
#sb-submit-news {
    position: relative !important;
    min-width: 70px;
    height: 46px;
    background: #111 !important; /* Toujours noir par défaut */
    color: #fff !important;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

/* Cache le texte "OK" seulement quand on charge les billes */
#sb-submit-news.is-loading {
    color: transparent !important;
}

/* --- ÉTAT FINAL (GRISÉ ET MORT) --- */
#sb-submit-news.is-done {
    background: #ccc !important; /* Grisé une fois fini */
    color: #fff !important;
    cursor: default !important;
    pointer-events: none !important; /* Désactive le clic ET le hover complètement */
}

/* Hover uniquement quand il n'est pas fini */
#sb-submit-news:not(.is-done):hover {
    background: #333 !important;
}

/* --- LE CONTENEUR DES BILLES --- */
.sb-loading-dots {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    gap: 4px !important;
}

.sb-loading-dots span {
    width: 6px !important;
    height: 6px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    display: block !important;
    animation: sb-vague-pure 1.2s infinite ease-in-out !important;
}

.sb-loading-dots span:nth-child(1) { animation-delay: 0s !important; }
.sb-loading-dots span:nth-child(2) { animation-delay: 0.2s !important; }
.sb-loading-dots span:nth-child(3) { animation-delay: 0.4s !important; }

@keyframes sb-vague-pure {
    0%, 60%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
}

/* Focus & Messages */
.sb-newsletter-container input:focus { outline: none !important; border-color: #000 !important; }
#sb-news-response { margin-top: 10px; font-size: 13px; min-height: 20px;}
.sb-success-msg { color: #27ae60; font-weight: 500; }
.sb-error-msg { color: #e74c3c; }

/* Message informatif sous le bouton */
.sb-info-already {
    margin-top: 12px;
    font-size: 11px; /* Taille réglable ici */
    color: #888;      /* Couleur réglable ici */
    font-family: "HurmeGeometricSans", sans-serif; /* Police réglable ici */
    line-height: 1.4;
    font-style: italic;
}

/* Cache le message si on est en train de charger ou si c'est fini pour laisser la place au message de succès */
#sb-submit-news.is-loading ~ .sb-info-already,
#sb-submit-news.is-done ~ .sb-info-already {
    display: none;
}