/* static/css/cookie_modal.css */
/* Animation pour le modal */
#cookieModal {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Style pour les toggle switches */
.peer:checked ~ .peer-checked\:bg-blue-600 {
    background-color: #2563eb;
}

.peer:checked ~ .peer-checked\:after\:translate-x-6::after {
    transform: translateX(1.5rem);
}

/* Style pour le bandeau cookie */
#cookieBanner {
    animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    #cookieModal > div {
        margin: 1rem;
    }
    
    #cookieBanner .flex {
        flex-direction: column;
        text-align: center;
    }
    
    #cookieBanner .flex > div:first-child {
        margin-bottom: 1rem;
    }
}
/* The public stylesheet defines no --color-* variables: give the cookie window its own colours,
   otherwise the "on" state of the switches is invisible. */
#cookieModal {
    --color-primary: #c2410c;
    --color-light: #fff7ed;
}
#cookieModal .ml-13 { margin-left: 3.25rem; }
@media (max-width: 480px) {
    #cookieModal .ml-13 { margin-left: 0; }
}
/* keyboard focus always visible on the consent buttons */
#cookieBanner button:focus-visible,
#cookieModal button:focus-visible,
#cookieModal input:focus-visible + div {
    outline: 3px solid #fdba74;
    outline-offset: 2px;
}