:root {
    /* Core hue is taken from --dark-bg (#0B1E3D ~ hue 217) for harmony */
    --dark-bg: #0B1E3D;
    --primary-color: hsl(217 86% 56%);    /* accent, bright blue aligning with dark-bg hue */
    --primary-dark: hsl(217 72% 45%);    /* darker accent for hover states */
    --secondary-bg: hsl(217 34% 24%);    /* slightly lighter surface */
    --tertiary-bg: hsl(217 30% 20%);     /* subtle darker layer for depth */

    /* Text tones */
    --text-light: hsl(0 0% 100%);
    --text-light-rgb: 255 255 255;        /* handy for rgba borders/shadows */
    --text-secondary: hsl(0 0% 88%);
    --text-muted: hsl(216 12% 63%);
    --text-dark: hsl(0 0% 40%);

    --border-color: rgba(255, 255, 255, 0.1);

    /* Feedback colors (kept distinct but tuned) */
    --success-color: hsl(154 80% 40%);
    --warning-color: hsl(37 94% 50%);
    --danger-color: hsl(0 73% 57%);
}

.popup-info {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    background: var(--secondary-bg);
    /* Softer, site-consistent shadow and subtle light-tinted border */
    box-shadow: 0 8px 24px rgba(2,6,23,0.55);
    border-radius: 10px;
    overflow: hidden;
    z-index: 1000;
    border: 1px solid rgba(var(--text-light-rgb), 0.04);
}

.popup-info-content {
    padding: 25px;
    text-align: center;
}

/* Spinner d'animation pour la mise à jour */
.update-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: 15px auto;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border-top-color: var(--primary-color);
    animation: update-spin 1s ease-in-out infinite;
}

@keyframes update-spin {
    to {
        transform: rotate(360deg);
    }
}

.popup-info-content h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.popup-info-content p {
    font-size: 1em;
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.close-info-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-light);
    background: var(--primary-color);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.close-info-button:hover {
    background: var(--primary-dark);
}

/* Style pour le bouton Reload */
.reload-button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: bold;
    color: var(--text-light);
    background: var(--primary-color);
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.reload-button:hover {
    background: var(--primary-dark);
}

@media (max-width: 650px) {
    .popup-info {
        width: 90%;
    }

    .popup-info-content h2 {
        font-size: 1.2em;
    }

    .popup-info-content p {
        font-size: 0.9em;
    }

    .close-info-button {
        font-size: 0.9em;
    }
}

/* Styles globaux */
/* liens */
/* Popup-scoped link styles: only affect links inside the popup and only when they don't have class or id */
a:not([class]):not([id]) {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:not([class]):not([id]):hover {
    color: var(--text-light);
    text-decoration: underline;
}

/* Keep popup headings consistent and slightly muted */
h2 {
    color: var(--primary-dark);
}

.title {
    color: var(--text-secondary);
    text-decoration: underline;
}

/*----------ADS STYLES----------*/
#ads-on-left, #ads-on-right {
    /*position fixe pour que les annonces restent visibles lors du défilement*/
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 160px; /* largeur standard des annonces */
}
#ads-on-left {
    left: 10%;
}
#ads-on-right {
    right: 10%;
}
main, .container {
    z-index: 1;
}
#adblock-notice {
    position: fixed;
    bottom: 10px;
    left: 50%;
    /* start off-screen (below) and invisible; JS will add `.show` to bring it into view */
    transform: translate(-50%, 120%);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(2,6,23,0.3);
    border: 1px solid rgba(var(--text-light-rgb), 0.04);
    z-index: 1001;
    transition: transform 250ms cubic-bezier(.22,.9,.3,1), opacity 200ms;
    touch-action: none;
    max-width: 90%;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
}
#adblock-notice.hidden { opacity: 0; pointer-events: none; }
#adblock-notice.show {
    transform: translate(-50%, 0);
    opacity: 1;
}
#adblock-notice .message { flex: 1; font-size: 14px; }
#adblock-notice .close-btn {
    background: transparent;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    color: var(--text-secondary);
}