/**
Theme Name: Twenty Twenty-Four Child
Template:   twentytwentyfour
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Template: twentytwentyfour
Author: LaylaTD
Description: - Ce thème contient des éléments CSS statiques - ( 1. Suppression du margin-block-start du footer 2. Création d'une classe pour les éléments relatifs 3. Création d'une classe pour les éléments absolutes (H1 de la page d'accueil) 4. Ajout d'une transisiton sur les boutons 5. Ajout d'un effet hover sur les boutons (ne fonctionne pas si !important n'est pas là) 6. Stylisation de la scrollbar 7. Suppression de l'outline quand on selectionne un élément dans le site 8. Modification du style des éléments " pills " 8. Style pour ajout copyright 9. Style pour message avant header ) et - Ce thème contient 5 animations CSS - ( 1. Animation quand hover post qui change le scale et le grayscale 2. Qui change l'opacité d'un item (h1 accueil) 3. Une animation pour les boutons dans le site 4. Fait apparaitre des items par la gauche 5. Une animation qui fait bouger le logo dans le footer).
Version: 1.0.0
 */

:root {
    --hover: #2e2e52;
    --noir: #343434;
    --noir-pale: #4d4d4d;
    --primary: #A0B9D9;
    --primary-hover: #6D7BA6;
    --secondary: #413F73;
    --blanc: #FAF9F6;
}

footer {
    margin-block-start: 0;
}

.relative-element {
    position: relative;
}

.absolute-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-hover a {
    transition: all 0.3s ease-in-out;
}

/* Les mystères de Wordpress */
.btn-hover:hover a {
    background-color: var(--hover) !important;
}

/* Style scrollbar */
::-webkit-scrollbar {
    background-color: var(--noir);
}
::-webkit-scrollbar-button {
    background-color: var(--noir);
}
::-webkit-scrollbar-thumb {
    background-color: var(--noir-pale);
}

*:focus {
    outline: none;
}

.is-style-pill {
    width: fit-content;
}
.is-style-pill a {
    width: auto;
    background-color: var(--primary);
    transition: all 0.3s ease-in-out;
    border-radius: 0.4rem;
}

.is-style-pill:hover a {
    background-color: var(--primary-hover);
    text-decoration: none;
}

.copyright {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    font-size: 0.8rem;
    margin-bottom: 1rem;
}

.message-accueil {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--noir);
    margin: 0;
    padding: 0.5rem;
    color: var(--blanc)
}

.role , .nom-utilisateur {
    margin: 0;
    color: var(--primary);
}

.gras {
    font-weight: 600;
}

.message-post {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background-color: #A0B9D9;
}

/* ANIMATIONS */

.hover-greyscale {
    filter: grayscale(100%);
    transition: transform 0.3s, filter 0.3s ease-in-out;
}

.hover-greyscale:hover {
    transform: scale(1.02);
    filter: grayscale(0%);
}

.opacity-items {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.btn-hover-bounce:hover {
    animation: liftButton 0.5s ease forwards;
}

@keyframes liftButton {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
    100% {
        transform: translateY(0);
    }
}

.apparait-gauche {
    animation: slideInFromLeft 1s ease-out forwards;
}

@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.rotate-anim {
    animation: subtleRotate 0.5s ease-in-out infinite;
}

@keyframes subtleRotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(3deg);
    }
    100% {
        transform: rotate(0deg);
    }
}