/* =================================================================== */
/* ======= Styles pour les cachets (Desktop) ======= */
/* =================================================================== */
@media (min-width: 769px) {
    .circle-seal {
        width: 100px; /* Taille des images */
        height: 100px;
        cursor: pointer;
        transform: rotate(-20deg); /* Rotation de -20 degrés */
        filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.3)); /* Ombre sur le mode off */
        transition: transform 0.2s ease-out, filter 0.2s ease-out; /* Transition pour rotation et ombre */
    }
    .circle-seal:hover {
        transform: rotate(-20deg) translateY(3px); /* Rotation maintenue + petit décalage vers le bas */
        filter: none; /* L'ombre disparaît */
    }
    .circle-container { /* Utilisé pour l'exemple de présentation des cachets */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px;
        padding: 15px;
        background-color: var(--text-color-header-primary); /* Utilise une variable pour le fond blanc */
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .circle-name { /* Utilisé pour l'exemple de présentation des cachets */
        margin-top: 10px;
        font-weight: bold;
        color: var(--bg-header-primary); /* Utilise une variable pour la couleur du texte */
    }

    /* Classe générique pour le conteneur du cachet */
    .seal-container-relative {
        position: relative !important; /* Important pour que le positionnement absolu du cachet fonctionne */
    }

    /* Classes génériques pour le positionnement du cachet */
    .seal-bottom-right {
        position: absolute !important;
        bottom: 20px !important;
        right: 20px !important;
        width: 80px !important; /* Taille par défaut pour le desktop */
        height: 80px !important;
        /* L'opacité et la transition sont maintenant gérées par .circle-seal */
    }
}


/* =================================================================== */
/* ======= Styles pour les cachets (Mobile) ======= */
/* =================================================================== */
@media (max-width: 768px) {
    .circle-seal {
        width: 80px; /* Taille des images réduite pour mobile */
        height: 80px;
        cursor: pointer;
        transform: rotate(-20deg); /* Rotation de -20 degrés */
        /* Utilise filter: drop-shadow comme sur desktop */
        filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.3)); /* Ombre sur le mode off */
        transition: transform 0.2s ease-out, filter 0.2s ease-out; /* Transition pour rotation et ombre */
    }
    .circle-seal:hover {
        transform: rotate(-20deg) translateY(3px); /* Rotation maintenue + petit décalage vers le bas */
        filter: none; /* L'ombre disparaît */
    }
    .circle-container { /* Utilisé pour l'exemple de présentation des cachets */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 10px; /* Marges réduites */
        padding: 10px;
        background-color: var(--text-color-header-primary); /* Utilise une variable pour le fond blanc */
        border-radius: 8px;
        /* Suppression agressive de l'ombre du conteneur pour mobile */
        box-shadow: none !important;
    }
    .circle-name { /* Utilisé pour l'exemple de présentation des cachets */
        margin-top: 8px;
        font-weight: bold;
        font-size: 0.9rem; /* Taille de texte réduite */
        color: var(--bg-header-primary); /* Utilise la variable pour la couleur du texte */
    }

    /* Classe générique pour le conteneur du cachet */
    .seal-container-relative {
        position: relative !important; /* Important pour que le positionnement absolu du cachet fonctionne */
    }

    /* Classes génériques pour le positionnement du cachet */
    .seal-bottom-right {
        position: absolute !important;
        bottom: 15px !important;
        right: 15px !important;
        width: 60px !important; /* Taille réduite pour mobile */
        height: 60px !important;
        /* L'opacité et la transition sont maintenant gérées par .circle-seal */
    }
}