.alwg-launcher-wrap,
.alwg-launcher,
.alwg-overlay,
.alwg-modal,
.alwg-panel,
.alwg-wheel-wrap,
.alwg-wheel,
.alwg-wheel-label {
    box-sizing: border-box;
}

.alwg-launcher-wrap[hidden],
.alwg-overlay[hidden],
.alwg-result-code[hidden],
.alwg-legal[hidden],
.alwg-btn[hidden],
.alwg-launcher-label[hidden] {
    display: none !important;
}

/* ── Bouton flottant + libellé ───────────────────────────── */
/* Calé sur le bandeau noir tout en haut du site (position fixe estimée à
   partir d'une capture d'écran — ajuster `top`/largeur si ça ne tombe pas
   pile dans le bandeau selon la hauteur réelle du thème). */
.alwg-launcher-wrap {
    position: fixed;
    right: 24px;
    top: 55px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-family: Poppins, Arial, sans-serif;
}

.alwg-launcher {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0C8E44;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: alwg-pulse 2.4s ease-in-out infinite;
    transition: transform 220ms cubic-bezier(.4, 0, .2, 1);
}

.alwg-launcher-wrap:hover .alwg-launcher {
    transform: scale(1.08);
}

.alwg-launcher-icon {
    font-size: 20px;
    line-height: 1;
}

.alwg-launcher-label {
    background: #191919;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    max-width: 90px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

@keyframes alwg-pulse {
    0%, 100% { box-shadow: 0 4px 18px rgba(12, 142, 68, .35); }
    50% { box-shadow: 0 4px 26px rgba(12, 142, 68, .65); }
}

/* ── Overlay / modale ────────────────────────────────────── */
.alwg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: Poppins, Arial, sans-serif;
}

.alwg-modal {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    overflow-y: auto;
    background: #F7F3E9;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
    padding: 28px 24px 24px;
    text-align: center;
}

.alwg-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #191919;
}

.alwg-close:hover {
    background: rgba(0, 0, 0, .12);
}

.alwg-title {
    margin: 0 0 6px;
    font-family: "Protest Strike", Poppins, Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #191919;
}

.alwg-subtitle {
    margin: 0 0 18px;
    font-size: 14px;
    color: #4a4a4a;
}

/* ── Roue ────────────────────────────────────────────────── */
.alwg-wheel-wrap {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto 22px;
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .28));
}

.alwg-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-top: 22px solid #191919;
    z-index: 3;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95)) drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.alwg-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 6px solid #191919;
    position: relative;
    will-change: transform;
    overflow: hidden;
}

.alwg-wheel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 22%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    z-index: 1;
}

.alwg-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    background: #F7F3E9;
    border: 3px solid #191919;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* Chaque libellé est ancré à un point (calculé en JS par trigonométrie) et
   toujours affiché bien droit — jamais tourné le long d'un rayon — pour ne
   jamais avoir besoin de le retourner à l'envers sur la moitié gauche. */
.alwg-wheel-label {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 68px;
    text-align: center;
    pointer-events: none;
}

.alwg-wheel-label span {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    max-width: 68px;
    line-height: 1.2;
    letter-spacing: .2px;
}

.alwg-btn {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    padding: 13px 20px;
    background: #0C8E44;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 220ms cubic-bezier(.4, 0, .2, 1);
}

.alwg-btn:hover:not(:disabled) {
    background: #085f2e;
}

.alwg-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.alwg-error {
    margin: 10px 0 0;
    color: #b3261e;
    font-size: 13px;
}

.alwg-legal {
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    color: #4a4a4a;
    text-decoration: underline;
}

/* ── Résultat ────────────────────────────────────────────── */
.alwg-result-title {
    margin: 6px 0 16px;
    font-family: "Protest Strike", Poppins, Arial, sans-serif;
    font-size: 25px;
    font-weight: 400;
    color: #191919;
}

.alwg-result-code {
    display: inline-block;
    margin: 0 0 14px;
    padding: 12px 24px;
    background: #0C8E44;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 10px;
}

.alwg-result-text {
    margin: 0 0 6px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.alwg-guest-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.alwg-guest-login-link {
    font-size: 12px;
    color: #4a4a4a;
    text-decoration: underline;
}

.alwg-optout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
    color: #4a4a4a;
    text-align: left;
    cursor: pointer;
}

.alwg-optout input {
    margin-top: 2px;
}

@media (max-width: 380px) {
    .alwg-wheel-wrap {
        width: 250px;
        height: 250px;
    }

    /* La roue rétrécit mais les libellés restaient à width:68px (valeur fixe,
       non relative comme leur position left/top en %) : sur un cercle plus
       petit, la même largeur en pixels occupe une part angulaire plus grande
       et les libellés de secteurs voisins se chevauchent. Il faut réduire la
       boîte ANCRÉE (.alwg-wheel-label), pas seulement le span à l'intérieur. */
    .alwg-wheel-label {
        width: 52px;
    }

    .alwg-wheel-label span {
        max-width: 52px;
        font-size: 11px;
    }
}