@charset "UTF-8";
/*
* Theme Name: theme-5w5
* Theme URI: https://github.com/Projet-web-en-equipe-Equipe-4/Profs-Pivot-Projet
* Author: Malaïka Abevi, Mélanie Caillol, Lhaïssa Nomie Jérôme, Alicia Sau et Valérie Therrien
* Author URI: https://github.com/Projet-web-en-equipe-Equipe-4
* Description: Voici le thème pour la refont du site des profs-pivot
* Version: 3.5
* Requires at least: 5.0
* Tested up to: 5.4
* Requires PHP: 7.0
* License: GNU General Public License v2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: 5w5-pp
* This theme, like WordPress, is licensed under the GPL.
* Use it to make something cool, have fun, and share what you've learned with others.
*/

/* Lien des polices Space Grostesk et Outfit */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap");

/*******************************************************************
                        STYLES GÉNÉRAUX
********************************************************************/
html {
    scroll-behavior: smooth;
}

:root {

    /* Pour le padidng et margin (sinon ça écrase le padding et margin dans le header) */
    html,
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
        margin: 0;
        padding: 0;
    }

    html {
        scroll-behavior: smooth;
    }

    /*size par défaut, influence tout ce qui est en REM*/
    font-size: 16px;

    body {
        background-color: var(--main-couleur-fond-principale);
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: column;
    }

    main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        min-height: 60vh;
    }

    main > * {
        align-self: center;
    }

    h1,
    h2,
    h3 {
        font-family: var(--police-titres);
    }

    h4,
    h5,
    h6,
    p,
    a,
    u,
    ul,
    li,
    button,
    input,
    form,
    ::placeholder {
        font-family: var(--police-secondaire);
    }

    strong {
        font-size: calc(var(--mobile-taille-grosTitresSecondaires) * 1.5);
        font-family: var(--police-titres);
        font-weight: var(--graisseur-gras);
        color: var(--couleur-accent-primaire);
    }

    /* Style général pour les boutons, rajouter un les box shadow au besoin et/ou modifier les couleurs du fond au besoin dans votre code */
    button,
    .bouton {
        /* Reset du style par défaut des boutons */
        display: flex;
        appearance: none;
        background: none;
        border: none;
        margin: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        text-decoration: none;
        font-family: var(--police-secondaire);
        background-color: var(--main-couleur-bouton);
        color: var(--main-couleur-texte-bouton);
        font-weight: var(--graisseur-gras);
        width: fit-content;
        padding: 0.65rem 1rem;
        min-height: 3rem;
        border-radius: 2.5rem;
        justify-content: center;
        align-items: center;
        transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;

        /* Styles pour les TABLETTE */
        @media (min-width: 768px) {
            width: 16rem;

        }

        /* Styles pour les écrans DESKTOP */
        @media (min-width: 1024px) {
            width: 20rem;
            align-self: center;
        }
    }

    button:hover {
        filter:
            drop-shadow(0 0 6px var(--couleur-accent-primaire)) drop-shadow(0 0 12px var(--couleur-accent-primaire));
        transform: scale(1.05);
    }

    .catalogue_button {
        padding: 0.7rem 0.7rem;
        margin: 0;
    }

    input,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        display: none;
        all: unset;
    }

    /* Style par défaut propre à un titre de page / h1 */
    h1 {
        line-height: var(--hauteur-ligne-normale);
        text-transform: uppercase;
        position: relative;
        text-align: center;
        font-size: var(--mobile-taille-titres);

        /* Gradient dans le texte */
        background: var(--header-couleur-titres-2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        background-size: 100% calc(1.25 * clamp(3.125rem, 0rem + 12.8204vw, 6.14581rem));
        filter: drop-shadow(-1px 0px 0px var(--couleur-accent-primaire)) drop-shadow(1px 0px 0 var(--couleur-accent-secondaire));
    }

    /* Style par défaut propre à un titre secondaire / h2 */
    h2 {
        text-align: center;
        max-width: 75rem;
        text-transform: uppercase;
        font-size: var(--mobile-taille-grosTitresSecondaires);
        color: var(--main-couleur-texte-principale);
        margin: var(--marge-titresSecondaires);
        font-weight: var(--graisseur-normal);
        text-shadow: var(--couleur-effet-lueur-3);
    }

    /* Style par défaut propre à un titre d'article / h3 */
    h3 {
        text-transform: uppercase;
        color: var(--main-couleur-texte-principale);
        font-family: "Space Grotesk";
        font-size: 2rem;
        font-style: normal;
        font-weight: var(--graisseur-gras);
        line-height: normal;
        text-transform: uppercase;
        padding-bottom: 1rem;
    }

    /* Style par défaut propre à un paragraphe de page / h4 */
    h4 {
        text-align: justify;
        margin: 1.5rem 0;
        font-size: var(--mobile-taille-titresSecondaires);
        color: var(--main-couleur-texte-principale);
        font-weight: var(--graisseur-mince);
        align-self: center;
    }

    /* Style par défaut propre à un titre de carte / h5 */
    h5 {
        font-weight: var(--graisseur-tres-mince);
    }

    /* Style par défaut propre à un paragraphe ordinaire / h5 */
    p {
        font-size: var(--mobile-taille-textesEtParagraphes);
        color: var(--main-couleur-texte-principale);
    }

    /* Style par défaut propre à un lien / h5 */
    a {
        font-weight: var(--graisseur-mince);
        color: var(--main-couleur-texte-principale);
        transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
        overflow-wrap: anywhere;
    }

    span.accent-sousTitre {
        color: var(--couleur-accent-primaire);
    }

    span.impact-sousTitre {
        font-size: 3rem;
    }



    /*Adaptation du texte aux différents formats*/
    /* ***************TEXTE SUR TABLETTE *************** */
    @media (min-width: 768px) {

        /* Style par défaut propre à un titre de page / h1 */
        h1 {
            font-size: var(--tablette-taille-titres);
            background-size: 100% calc(1.25 * clamp(6rem, 0rem + 12.5vw, 8rem));
            filter: drop-shadow(-2px 0px 0px var(--couleur-accent-primaire)) drop-shadow(2px 0px 0 var(--couleur-accent-secondaire));
        }

        /* Style par défaut propre à un titre secondaire / h2 */
        h2 {
            font-size: var(--tablette-taille-grosTitresSecondaires);
            text-align: center;
            align-self: center;
        }

        /* Style par défaut propre à un titre d'article / h3 */
        h3 {}

        /* Style par défaut propre à un paragraphe de page / h4 */
        h4 {
            font-size: 1.5rem;
            width: 80%;
        }

        /* Style par défaut propre à un titre de carte / h5 */
        h5 {}

        /* Style par défaut propre à un paragraphe ordinaire / h5 */
        p {
            font-size: var(--tablette-taille-textesEtParagraphes);
        }

        /* Style par défaut propre à un lien / h5 */
        a {
            font-size: var(--tablette-taille-liens);
        }

        .catalogue_button {
            padding: 0.7rem;
            margin: 0;
            width: fit-content;
            font-size: 1rem;
        }

        strong {
            font-size: calc(var(--tablette-taille-grosTitresSecondaires) * 1.5);
        }
    }

    /* ***************TEXTE SUR DESKTOP *************** */
    /* Styles pour les desktops */
    @media (min-width: 1024px) {

        /* Style par défaut propre à un titre de page / h1 */
        h1 {
            font-size: var(--desktop-taille-titres);
            background-size: 100% calc(1.25 * clamp(8.5rem, -3.8077rem + 19.2308vw, 12.5rem));
            filter: drop-shadow(-4px 0px 0px var(--couleur-accent-primaire)) drop-shadow(4px 0px 0 var(--couleur-accent-secondaire));
            /* padding: 0 6rem; */
        }

        /* Style par défaut propre à un titre secondaire / h2 */
        h2 {
            font-size: var(--desktop-taille-grosTitresSecondaires);
            /* text-align: left;
            align-self: flex-start; */
        }

        /* Style par défaut propre à un titre d'article / h3 */
        h3 {
            /* filter: drop-shadow(-2px 0px 0px var(--couleur-accent-primaire)) drop-shadow(2px 0px 0 var(--couleur-accent-secondaire)); */
            font-size: clamp(2rem, 0.8571rem + 1.7857vw, 3rem);
            padding-bottom: 0.9rem;
        }

        /* Style par défaut propre à un paragraphe de page / h4 */
        h4 {
            width: 100%;
            font-size: 2rem;
            max-width: 50rem;
        }

        /* Style par défaut propre à un titre de carte / h5 */
        h5 {}

        /* Style par défaut propre à un paragraphe ordinaire / h5 */
        p {
            font-size: var(--desktop-taille-textesEtParagraphes);
        }

        /* Style par défaut propre à un lien / h5 */
        a {
            font-size: var(--desktop-taille-liens);
        }

        .catalogue_button {
            font-size: 1.15rem;
            padding: 1rem;
        }

        strong {
            font-size: calc(var(--desktop-taille-grosTitresSecondaires) * 1.5);
        }
    }

    /* Vidéo de fond*/
    .background_video {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        z-index: -999;
        pointer-events: none;
        filter: brightness(0.6);
        opacity: 0.4;
    }


    /* ===== Scrollbar CSS ===== */
    /* Firefox */
    * {
        scrollbar-width: auto;
    }

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 12px;
    }

    *::-webkit-scrollbar-track {
        background: #212a44;
    }

    *::-webkit-scrollbar-thumb {
        background-color: var(--couleur-accent-tertiaire);
        border-radius: 10px;
        border: 2px solid #37E6D5;
    }
}

/*******************************************************************
                            POLICES
********************************************************************/
:root {
    /* Police des titres */
    --police-titres: "Space Grotesk", sans-serif;

    /* Police des textes et paragraphes */
    --police-secondaire: "Outfit", sans-serif;
}

:root {
    /* Écarts entres les lignes/bloc de textes (margin) */
    --marge-titresSecondaires: 1rem 1.2rem 4rem;
    --marge-textesEtParagraphes: 1.875rem;
    --marge-menus: 2.875rem;
}

/*******************************************************************
                            TEXTES
********************************************************************/
:root {
    /***************************************
        GRAISSEUR DES TEXTES (font-weight)
    ****************************************/
    /* Graisseur mince des titres et textes */
    --graisseur-tres-mince: 200;

    /* Graisseur mince des titres et textes */
    --graisseur-mince: 300;

    /* Graisseur normal des titres et textes */
    --graisseur-normal: 550;

    /* Graisseur gras des titres et textes (!!! Ne fonctionnera pas pour Space Grotesk) */
    --graisseur-gras: 750;

    /***************************************
        HAUTEUR DES TEXTES (line-height)
    ****************************************/
    /* Hauteur de ligne normale des titres et textes */
    --hauteur-ligne-normale: 1.25;

    /* Hauteur de ligne plus grande des titres et textes */
    --hauteur-ligne-espacee: 1.5;

    /***************************************
            TAILLE DES TEXTES MOBILE
    ****************************************/
    /* Taille des titres principaux */
    --mobile-taille-titres: clamp(3.125rem, 0rem + 12.8204vw, 6.14581rem);

    /* Taille plus grosse des titres secondaires*/
    --mobile-taille-grosTitresSecondaires: 1.65rem;

    /* Taille des titres secondaires*/
    --mobile-taille-titresSecondaires: 1.35rem;

    /* Taille des textes, paragraphes */
    --mobile-taille-textesEtParagraphes: 1rem;

    /* Taille plus petites des textes et les textes sur les boutons */
    --mobile-taille-petitsTextes: 0.813rem;

    /* Taille plus minis des textes*/
    --mobile-taille-miniTextes: 0.688rem;

    /* Taille des liens */
    --mobile-taille-liens: 1.25rem;


    /***************************************
            TAILLE DES TEXTES TABLETTE
    ****************************************/
    /* Taille des titres principaux */
    --tablette-taille-titres: clamp(6rem, 0rem + 12.5vw, 8rem);

    /* Taille plus grosse des titres secondaires*/
    --tablette-taille-grosTitresSecondaires: 2.5rem;

    /* Taille des titres secondaires*/
    --tablette-taille-titresSecondaires: 2rem;

    /* Taille des textes, paragraphes */
    --tablette-taille-textesEtParagraphes: 1.3rem;

    /* Taille plus petites des textes et les textes sur les boutons */
    --tablette-taille-petitsTextes: 1.25rem;

    /* Taille plus minis des textes*/
    --tablette-taille-miniTextes: 1.063rem;

    /* Taille des liens */
    --tablette-taille-liens: 1.5rem;

    /***************************************
            TAILLE DES TEXTES DESKTOP
    ****************************************/
    /* Taille des titres principaux */
    --desktop-taille-titres: clamp(8.5rem, -3.8077rem + 19.2308vw, 12.5rem);

    /* Taille plus grosse des titres secondaires*/
    --desktop-taille-grosTitresSecondaires: 3.25rem;

    /* Taille des titres secondaires*/
    --desktop-taille-titresSecondaires: 2.75rem;

    /* Taille des textes, paragraphes */
    --desktop-taille-textesEtParagraphes: 1.5rem;

    /* Taille plus petites des textes et les textes sur les boutons*/
    --desktop-taille-petitsTextes: 1.35rem;

    /* Taille plus minis des textes*/
    --desktop-taille-miniTextes: 1.35rem;

    /* Taille des liens */
    --desktop-taille-liens: 1.65rem;
}

/*******************************************************************
                            COULEURS
********************************************************************/
:root {
    /***************************************
                COULEURS GÉNÉRALES
    ****************************************/
    /* Couleur principale */
    --couleur-principale: #12182B;

    /* Couleur de mise en avant (contour, ombre, détail, fondus) */
    --couleur-accent-primaire: #37E6D5;

    /* Couleur de mise en avant (contour, ombre, détail, fondus) */
    --couleur-accent-secondaire: #C92C9F;

    /* Couleur de mise en avant (contour, ombre, détail, fondus) */
    --couleur-accent-tertiaire: #8338EC;

    /* couleur de mise en avant (uniquement crédits) */
    --couleur-accent-quaternaire: #E0B461;

    /* couleur de mise en avant (uniquement page 404) */
    --couleur-accent-erreur404: #F44245;

    /* Couleur assombrissante (!!! au lieu de créer une nouvelle couleur pour rendre un fond plus foncé, juste appliquer cette variable) */
    --couleur-assombrissant: rgba(0, 0, 0, 0.2);

    /* Couleur assombrissante (!!! au lieu de créer une nouvelle couleur pour rendre un fond plus foncé, juste appliquer cette variable) */
    --couleur-tresAssombrissant: rgba(18, 24, 43, 0.9);
    ;

    /* Couleur éclaircissante (!!! au lieu de créer une nouvelle couleur pour rendre un fond plus clair, juste appliquer cette variable) */
    --couleur-eclaircissant: rgba(255, 255, 255, 0.2);

    /*************************
        EFFETS DE COULEURS
    **************************/
    /* Effet de décalage pour les textes et les formes vers la GAUCHE (!!! À appliquer sur text-shadow et box-shadow)*/
    --couleur-effet-decalage-prononce-1: -0.5rem 0.5rem 0 var(--couleur-accent-primaire);
    --couleur-effet-decalage-prononce-2: -0.5rem 0.5rem 0 var(--couleur-accent-secondaire);
    --couleur-effet-decalage-prononce-3: -0.5rem 0.5rem 0 var(--couleur-accent-tertiaire);

    /* Effet de décalage pour les textes et les formes vers la DROITE (!!! À appliquer sur text-shadow et box-shadow)*/
    --couleur-effet-decalage-prononce-4: 0.5rem 0.5rem 0 var(--couleur-accent-primaire);
    --couleur-effet-decalage-prononce-5: 0.5rem 0.5rem 0 var(--couleur-accent-secondaire);
    --couleur-effet-decalage-prononce-6: 0.5rem 0.5rem 0 var(--couleur-accent-tertiaire);

    /* Effet de décalage moins prononcé pour les textes et les formes vers la GAUCHE (!!! À appliquer sur text-shadow et box-shadow)*/
    --couleur-effet-decalage-1: -0.2rem 0.2rem 0 var(--couleur-accent-primaire);
    --couleur-effet-decalage-2: -0.2rem 0.2rem 0 var(--couleur-accent-secondaire);
    --couleur-effet-decalage-3: -0.2rem 0.2rem 0 var(--couleur-accent-tertiaire);

    /* Effet de décalage moins prononcé pour les textes et les formes vers la DROITE (!!! À appliquer sur text-shadow et box-shadow)*/
    --couleur-effet-decalage-4: 0.2rem 0.2rem 0 var(--couleur-accent-primaire);
    --couleur-effet-decalage-5: 0.2rem 0.2rem 0 var(--couleur-accent-secondaire);
    --couleur-effet-decalage-6: 0.2rem 0.2rem 0 var(--couleur-accent-tertiaire);

    /* Effet de glitch pour les textes (!!! À appliquer sur text-shadow ou box-shadow) */
    --couleur-effet-glitch: 0.070rem 0 0 var(--couleur-accent-secondaire), -0.070rem 0 0 var(--couleur-accent-primaire);

    /* Effet de glitch plus prononcé pour les textes et les boites (!!! À appliquer sur text-shadow ou box-shadow) */
    --couleur-effet-glitch-prononce: 0.175rem 0 0 var(--couleur-accent-secondaire), -0.175rem 0 0 var(--couleur-accent-primaire);

    /* Effet turquoise de filter pour les hover/actif */
    /* filter:
        brightness(0)
        contrast(210%)
        invert(83%)
        sepia(68%)
        saturate(820%)
        hue-rotate(135deg)
        brightness(110%)
        drop-shadow(0 0 6px var(--couleur-accent-primaire)) Changer var(--couleur-accent-primaire) au besoin
        drop-shadow(0 0 12px var(--couleur-accent-primaire)); Changer var(--couleur-accent-primaire) au besoin
        transform: scale(1.05); 
    */

    /* Effet de glow pour les hover/actif (!!! À appliquer sur text-shadow et box-shadow) */
    --couleur-effet-lueur: 0 0 9px var(--main-couleur-texte-principale);
    --couleur-effet-lueur-2: 0 0 9px #49547b;
    --couleur-effet-lueur-3: 0 0 9px #7882a6;

    /* Changer var(--main-couleur-texte-principale) au besoin */

    /**************************************
                SECTION HEADER
    ***************************************/
    /* Couleur principale d'arrière plan en desktop pour le header*/
    --header-couleur-fond-principale: #12182B;

    /* Différentes couleurs variantes des couleurs des titres */
    /* Différentes couleurs variantes des couleurs des titres */
    --header-couleur-titres-1: repeating-linear-gradient(0deg, var(--couleur-accent-tertiaire) 15%, var(--couleur-accent-secondaire) 80%, var(--couleur-accent-secondaire) 100%);
    --header-couleur-titres-2: repeating-linear-gradient(0deg, var(--couleur-accent-primaire) 15%, var(--couleur-accent-tertiaire) 80%, var(--couleur-accent-tertiaire) 100%);
    --header-couleur-titres-3: repeating-linear-gradient(0deg, var(--couleur-accent-quaternaire) 15%, var(--couleur-accent-secondaire) 80%, var(--couleur-accent-secondaire) 100%);
    --header-couleur-titres-4: repeating-linear-gradient(0deg, #d2424d 12%, #2c0039 60%, #0a000d 88%);
    --degrade-debut-page: linear-gradient(to top, transparent 0%, black 1%, black 95%, transparent 100%);

    /* !!! Pour tous les titres/textes qui utilisent un dégradé, utiliser ce code pour que ça fonctionne
            background: var(--header-couleur-titres-1);  // Juste changer le variable sur cette ligne au besoin!
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: var(--header-couleur-texte-principale);  // Juste changer le variable sur cette ligne au besoin!
        !!! */

    /* Couleur du texte principale*/
    --header-couleur-texte-principale: #ffffff;

    /***************************************
                SECTION MAIN
    ****************************************/
    /* Couleur principale d'arrière plan de la section main*/
    --main-couleur-fond-principale: #12182B;

    /* Couleur secondaire d'arrière plan plus foncée de la section main*/
    --main-couleur-fond-secondaire: #080D1C;

    /* Différentes couleurs variantes de dégradé, du transparent vers la couleur pour les carrés et sections horizontal (!!! À appliquer sur le background et non le background-color)*/
    --main-couleur-degradeHorizontal-carreEtSections-1: linear-gradient(0deg, var(--couleur-accent-primaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);
    --main-couleur-degradeHorizontal-carreEtSections-2: linear-gradient(0deg, var(--couleur-accent-secondaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);
    --main-couleur-degradeHorizontal-carreEtSections-3: linear-gradient(0deg, var(--couleur-accent-tertiaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);

    /* Différentes couleurs variantes de dégradé, de la couleur vers le transparent pour les carrés et sections horizontal (!!! À appliquer sur le background et non le background-color)*/
    --main-couleur-degradeHorizontal180-carreEtSections-4: linear-gradient(180deg, var(--couleur-accent-primaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);
    --main-couleur-degradeHorizontal180-carreEtSections-5: linear-gradient(180deg, var(--couleur-accent-secondaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);
    --main-couleur-degradeHorizontal180-carreEtSections-6: linear-gradient(180deg, var(--couleur-accent-tertiaire) -0.03%, rgba(95, 63, 126, 0.00) 99.63%);
    --main-couleur-degradeHorizontal180-carreEtSections-7: linear-gradient(180deg, var(--main-couleur-fond-principale) 72.97%, rgba(95, 63, 126, 0) 100%);

    /* Différentes couleurs de variantes de dégradé, de la couleur principale vers la couleur pour les sections horizontal (!!! À appliquer sur le background et non le background-color)*/
    --main-couleur-degradeHorizontal-carreEtSections-4: linear-gradient(0deg, var(--couleur-accent-primaire) -25%, var(--main-couleur-fond-principale) 44%);
    --main-couleur-degradeHorizontal-carreEtSections-5: linear-gradient(0deg, var(--couleur-accent-secondaire) -25%, var(--main-couleur-fond-principale) 44%);
    --main-couleur-degradeHorizontal-carreEtSections-6: linear-gradient(0deg, var(--couleur-accent-tertiaire) -25%, var(--main-couleur-fond-principale) 44%);

    /* Différentes couleurs variantes de dégradé, pour les carrés et sections diagonal (!!! À appliquer sur le background et non le background-color)*/
    --main-couleur-degradeDiagonal-carreEtSections-7: linear-gradient(-10deg, var(--couleur-principale) 50%, var(--couleur-accent-primaire) 75%, var(--couleur-principale) 75%);
    --main-couleur-degradeDiagonal-carreEtSections-8: linear-gradient(-10deg, var(--couleur-principale) 50%, var(--couleur-accent-secondaire) 75%, var(--couleur-principale) 75%);
    --main-couleur-degradeDiagonal-carreEtSections-9: linear-gradient(-10deg, var(--couleur-principale) 50%, var(--couleur-accent-tertiaire) 75%, var(--couleur-principale) 75%);

    /* Différentes couleurs variantes de dégradé, pour les carrés et sections diagonal à l'inverse(!!! À appliquer sur le background et non le background-color)*/
    --main-couleur-degradeDiagonal10-carreEtSections-10: linear-gradient(10deg, var(--couleur-principale) 50%, var(--couleur-accent-primaire) 75%, var(--couleur-principale) 75%);
    --main-couleur-degradeDiagonal10-carreEtSections-11: linear-gradient(10deg, var(--couleur-principale) 50%, var(--couleur-accent-secondaire) 75%, var(--couleur-principale) 75%);
    --main-couleur-degradeDiagonal10-carreEtSections-12: linear-gradient(10deg, var(--couleur-principale) 50%, var(--couleur-accent-tertiaire) 75%, var(--couleur-principale) 75%);

    /* Couleur de fond des boutons*/
    --main-couleur-bouton: #fdfeff;

    /* Couleur des textes sur les boutons*/
    --main-couleur-texte-bouton: #12182B;

    /* Couleur du texte principale */
    --main-couleur-texte-principale: #ffffff;


    /***************************************
                    MENU
    ****************************************/
    /* Couleur principale d'arrière plan pour le menu */
    --menu-couleur-fond-principale: #12182B;

    /* Couleur des liens du menu */
    --menu-couleur-liens: #ffffff;

    /* Couleur au survol/actif des liens du menu */
    --menu-couleur-liens-survol-actif: #37E6D5;

    /***************************************
                    FOOTER
    ****************************************/
    /* Couleur principale d'arrière plan pour le footer */
    --footer-couleur-fond-principale: #12182B;

    /* Couleur des icones et textes dans le footer */
    --footer-couleur-iconesEtTextes: #ffffff;

    /* Couleur au survol/actif des icones dans le footer */
    --footer-couleur-iconesEtTextes-survol-actif: #37E6D5;

    /* Taille des icones dans le footer en mobile et tablette */
    --footer-taille-icone-mobile-tablette: 2.5rem;

    /* Taille des icones dans le footer en desktop */
    --footer-taille-icone-desktop: 4.5rem;

}

/*******************************************************************
                            ANIMATIONS
********************************************************************/
/* Certaines animations sont prises du site Animate.css @https://animate.style/ @https://github.com/animate-css/animate.css/ */
/* Animation de translation des éléments */
@keyframes translationSortieDroite {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0);
    }
}

/* Animation de fondu en apparition des éléments */
@keyframes apparitionFonduVersLeHaut {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Animation de fondu en disparition des éléments */
@keyframes disparitionFonduVersLeHaut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

/* Animation de fondu en apparition des éléments en diagonale vers le haut à gauche */
@keyframes apparitionFonduVersLeHautDiagonale {
    from {
        opacity: 0;
        transform: translate3d(-100%, -100%, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Animation de fondu en disparition des éléments en diagonale vers le bas à droite */
@keyframes disparitionFonduVersLeBasDiagonale {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 100%, 0);
    }
}

/* Animation de vol TIM-EE */
@keyframes float {
    0% {
        transform: translatey(0px);
    }

    50% {
        transform: translatey(-20px);
    }

    100% {
        transform: translatey(0px);
    }
}

@keyframes centreAideAnim {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

/* Animation flash + petit shake */
@keyframes prendrePhoto {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }

    10% {
        filter: brightness(2);
        transform: scale(1.06);
    }

    30% {
        filter: brightness(1.3);
        transform: scale(1.03);
    }

    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}


/* Idle = légère oscillation + tiny bob */
@keyframes idleMascotte {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-6px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}


@keyframes topToBottom {
    from {
        opacity: 0;
        transform: rotateX(-90deg);
    }

    to {
        opacity: 1;
        transform: rotateX(0deg);
    }
}

@keyframes effectGlitchTexte {

    0%,
    50% {
        filter:
            drop-shadow(-2px 0 0 var(--couleur-accent-primaire)) drop-shadow(2px 0 0 var(--couleur-accent-secondaire));
    }

    100% {
        filter:
            drop-shadow(-1px 0 0 var(--couleur-accent-primaire)) drop-shadow(1px 0 0 var(--couleur-accent-secondaire));
    }
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Idle = légère oscillation + tiny bob */
@keyframes idleMascotte {
    0%   { transform: translateY(0) scale(1); }
    50%  { transform: translateY(-6px) scale(1.01); }
    100% { transform: translateY(0) scale(1); }
}