/**
 * Bandeau bêta – URG Core
 *
 * Autonome : aucune dépendance Divi, aucune classe externe.
 * Position fixe en haut de viewport, z-index 99999.
 * Décalage automatique quand la barre d'administration WordPress est visible.
 *
 * Palette : ambre doux – fond #fef3c7 / texte #78350f
 * Contraste WCAG AA vérifié : ratio ≈ 7.3:1 (supérieur au seuil AAA 7:1).
 */

/* ── Bandeau ──────────────────────────────────────────────────────────────── */

.urg-beta-banner {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    z-index:       99999;

    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.625rem 1rem;

    background:    #fef3c7;
    border-bottom: 2px solid #f59e0b;
    color:         #78350f;

    font-family:   sans-serif;
    font-size:     0.875rem;
    line-height:   1.5;

    /* Évite tout chevauchement avec un header Divi en position sticky/fixed */
    box-shadow:    0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ── Décalage barre d'administration ──────────────────────────────────────── */
/*
 * WordPress affiche la barre d'administration en position fixed avec :
 *   - hauteur 32px pour les écrans > 782px (desktop)
 *   - hauteur 46px pour les écrans 601px–782px (tablette)
 *   - display: none pour les écrans ≤ 600px (mobile)
 */

.urg-beta-banner--admin-bar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .urg-beta-banner--admin-bar {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    .urg-beta-banner--admin-bar {
        /* Barre admin masquée sur très petits écrans */
        top: 0;
    }
}

/* ── Message ──────────────────────────────────────────────────────────────── */

.urg-beta-banner__message {
    flex:       1;
    margin:     0;
    padding:    0;

    /* Couleurs héritées du parent, surchargent d'éventuels styles globaux */
    color:      inherit;
    font-size:  inherit;
    line-height: inherit;
}

/* ── Lien ─────────────────────────────────────────────────────────────────── */

.urg-beta-banner__link {
    color:           #92400e;  /* amber-800 – contraste ≈ 5.8:1 sur #fef3c7 */
    text-decoration: underline;
    font-weight:     500;
}

.urg-beta-banner__link:hover,
.urg-beta-banner__link:focus {
    color:           #78350f;
    text-decoration: underline;
    outline:         2px solid #92400e;
    outline-offset:  2px;
    border-radius:   2px;
}

/* ── Bouton fermeture ─────────────────────────────────────────────────────── */

.urg-beta-banner__close {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;

    width:           1.75rem;
    height:          1.75rem;
    padding:         0;

    background:      transparent;
    border:          1px solid #d97706;
    border-radius:   4px;
    color:           #92400e;
    cursor:          pointer;

    font-size:       1.1rem;
    line-height:     1;

    transition:      background 0.15s ease, color 0.15s ease;
}

.urg-beta-banner__close:hover {
    background: #f59e0b;
    color:      #fff;
    border-color: #f59e0b;
}

.urg-beta-banner__close:focus-visible {
    outline:        2px solid #92400e;
    outline-offset: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media screen and (max-width: 640px) {
    .urg-beta-banner {
        /* Passage en colonne pour ne pas compresser le texte */
        flex-direction: column;
        align-items:    flex-start;
        gap:            0.5rem;
        padding:        0.75rem 1rem;
    }

    .urg-beta-banner__close {
        /* Bouton placé en haut à droite via position absolue en mobile */
        position: absolute;
        top:      0.5rem;
        right:    0.75rem;
    }

    .urg-beta-banner {
        /* Espace à droite pour le bouton positionné en absolu */
        padding-right: 3rem;
        position:      fixed; /* réaffirmé après la règle flex-direction */
    }
}