/*
 * Rôle    : Styles globaux du site (variables de couleurs, boutons réutilisables, animations partagées).
 * Scope   : Global — chargé sur toutes les pages utilisant base.html ainsi que sur les pages d'erreur.
 * Charge  : main/templates/main/bases/base.html, templates/404.html, templates/500.html, templates/maintenance.html.
 * Dépend  : Variables CSS internes (--primary, --dark-blue). Coexiste avec Tailwind 3.4 (django-tailwind),
 *           ces classes ne sont pas générées par Tailwind et doivent rester définies ici.
 */

/* === Variables globales (palette projet) === */
:root {
    --primary: #7fffb7;
    --dark-blue: #1D1967;
}

/* === Boutons réutilisables === */
.primary-button {
    background-color: var(--primary);
    border-radius: 5px;
    box-sizing: border-box;

    /* On soustrait l'épaisseur de la bordure au padding pour garder la taille visuelle du bouton */
    border: 3px solid var(--primary);
    padding: 8px 18px; /* 14px - 8px = 6px, 26px - 8px = 18px */

    transition: all .2s ease-in-out;
}

.primary-button:hover {
    background-color: white;
}

.secondary-button {
    background-color: var(--dark-blue);
    border-radius: 5px;
    box-sizing: border-box;

    color: #eae8ff;

    /* On soustrait l'épaisseur de la bordure au padding pour garder la taille visuelle du bouton */
    border: 3px solid var(--dark-blue);
    padding: 8px 18px; /* 14px - 8px = 6px, 26px - 8px = 18px */

    transition: all .2s ease-in-out;
}

.secondary-button:hover {
    background-color: white;
    color: var(--dark-blue);
}

/* === Animation des frames de doigt ===
 * Trois keyframes synchronisées sur 1s qui affichent successivement chaque frame
 * (0-33% / 33-66% / 66-100%) pour créer une animation type stop-motion à 3 images.
 * La transition à 33.5%/67% (au lieu de 33%/67%) évite un flash de chevauchement.
 */
@keyframes finger-frame-1 {
    0%, 33% {
        opacity: 1;
    }
    33.5%, 100% {
        opacity: 0;
    }
}

@keyframes finger-frame-2 {
    0%, 33% {
        opacity: 0;
    }
    33.5%, 66.5% {
        opacity: 1;
    }
    67%, 100% {
        opacity: 0;
    }
}

@keyframes finger-frame-3 {
    0%, 66% {
        opacity: 0;
    }
    67%, 100% {
        opacity: 1;
    }
}

.finger-frame-1 {
    animation: finger-frame-1 1s infinite;
}

.finger-frame-2 {
    animation: finger-frame-2 1s infinite;
}

.finger-frame-3 {
    animation: finger-frame-3 1s infinite;
}

/* === Ajustements SVG du doigt === */
/* Zoom sur le contenu réel du SVG pour éviter l'espace vide (viewBox plus large que le tracé) */
.finger-svg-zoom {
    transform: scale(1.2);
    transform-origin: center center;
}

/* Ajustement pour mini_03 qui est décalée vers le bas *