@import url("style5.css");


.test-police {
    display: none
}

/*Reminder => à supprimer une fois le truc finit*/

:root {
    --color-background-layer-1-c1: 0, 57, 255;
    --color-background-layer-1-c2: 158, 0, 255;
    --color-background-layer-1-c3: 255, 0, 209;

    --color-background-layer-2: 255, 0, 255;
    --color-background-layer-3: 255, 255, 255;

    font-family: TheArcade;
}


@font-face {
    font-family: TheArcade;
    src: url("fonts_portfolio/Arcade-cadratin-2048.ttf");
}

@font-face {
    font-family: ArcadeSTROKE;
    src: url("fonts_portfolio/MyArcade3.ttf");
}

@font-face {
    font-family: pixel_simple;
    src: url("fonts_portfolio/SourceCodePro-Light.ttf");

}




h1 {
    /*IL FAUDRA DEFINIR CA !!! Reminder*/
    /*font-size: 5rem;*/
    font-size: min(7vw, 5rem)
        /*5rem*/
    ;
}

/*mon nom en grand*/
h2 {
    font-size: min(4.5vw, 3rem)
        /*3rem*/
    ;
}

/*titres rubriques*/
h3 {
    font-size: minmax(2vw, 1.9rem)
        /*1.9rem*/
    ;
}

/*A propos de moi...*/
p {
    font-size: 1.1rem
        /*1.1rem*/
    ;

}

/*paragraphe*/

.background-layer:not(#layer3) {
    position: absolute;
    inset: 0;
}

body {
    position: relative;
    height: fit-content;
    background-color: black;
    margin: 0;

    &>svg {
        position: absolute;
        top: 0;
    }
}

#layer1 {
    background:
        linear-gradient(217deg, rgba(var(--color-background-layer-1-c1), 0.8), rgba(0, 0, 0, 0) 70.71%),
        linear-gradient(127deg, rgba(var(--color-background-layer-1-c2), 0.8), rgba(0, 0, 0, 0) 70.71%),
        linear-gradient(336deg, rgba(var(--color-background-layer-1-c3), 0.8), rgba(0, 0, 0, 0) 70.71%);

    mask-image: url("TracesVectoriels/SVG/mask-fond-test-1.svg");
    -webkit-mask-image: url('TracesVectoriels/SVG/mask-fond-test-1.svg');
    mask-mode: luminance;
    mask-size: 5vw;
}

/*CA MARCHE PAS, LES DEGRADES SONT SECS ET PAS PROGRESSIFS !!! */
/*

    Reminder

    #layer1 {
        --color-background-layer-1-c1: 0, 57, 25;
        --color-background-layer-1-c2: 158, 0, 255;
        --color-background-layer-1-c3: 255, 0, 209;

        background:
            linear-gradient(217deg, rgba(var(--color-background-layer-1-c1), 0.8), rgba(0, 0, 0, 0) 70.71%),
            linear-gradient(127deg, rgba(var(--color-background-layer-1-c2), 0.8), rgba(0, 0, 0, 0) 70.71%),
            linear-gradient(336deg, rgba(var(--color-background-layer-1-c3), 0.8), rgba(0, 0, 0, 0) 70.71%);
    
        animation : anim-color-background1 10s infinite alternate ease-in-out;

    }

    @keyframes anim-color-background1 {
        0% {
            --color-background-layer-1-c1: 0, 57, 255;
            --color-background-layer-1-c2: 158, 0, 255;
            --color-background-layer-1-c3: 255, 0, 209;
        }
        50%{
            --color-background-layer-1-c1: 255, 0, 209;
            --color-background-layer-1-c2: 0, 57, 255;
            --color-background-layer-1-c3: 158, 0, 255;
        }
        100%{
            --color-background-layer-1-c1: 158, 0, 255;
            --color-background-layer-1-c2: 255, 0, 209;
            --color-background-layer-1-c3: 0, 57, 255;
        }
    }
    */

#layer3 {
    display: flex;
    flex-direction: column;

    height: fit-content;
}

.sections {
    position: relative;
}

.section-1 {
    width: 100vw;
    height: 85vh;
    padding-bottom: 5vh;

    /*
        background-color : rgb(var(--color-background-layer-3),1);
        */

    & #s1-b3 {
        width: 100vw;
        height: 100%;
        position: absolute;
        mask-image: url(masks/SVG/SVG/mask-bg-s1.svg);
        /*REMINDER - Changer le BG*/

        mask-repeat: no-repeat;
        mask-size: cover;

        background-image: url(ImgDIVERS/BG-Header.jpg);
        /*
            background-image: url(ImgDIVERS/Carla\ ZAF@1-1228x708\ -\ Copie.jpg);
            */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
}

.section-fill {
    width: 100vw;
    height: fit-content;

    /*
        background : linear-gradient(to bottom, rgb(var(--color-background-layer-3),0),rgb(var(--color-background-layer-3),1),25%, rgb(var(--color-background-layer-3),1))
        */
    /*background-color: white;*/
    overflow: hidden;
}



.section-fill-bg {
    position: absolute;
    inset: 0;
    /*
        background: url('ton-background.jpg') center/cover;
        background-color: white;
        */

    z-index: 0;
    width: 100%;
    height: 100%;
    /*mask-size: 100%;*/

    mask: url(masks/SVG/SVG/Mask-bg-s2.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;

    background-color: rgb(45, 46, 50, 1);

    /*

    & #fill-bg-1 {
        width: 100%;
        height: 50%;
        mask: url(masks/SVG/SVG/Mask-b3-s2.svg);
        mask-size: 50vw;
        /*mask-repeat: no-repeat;*/
    /*    mask-position: left top;
        background-color: rgb(45, 46, 50, 1);
    }

    ;

    & #fill-bg-2 {
        width: 100%;
        height: 50%;
        mask: url(masks/SVG/SVG/Mask-b3-s2b.svg);
        mask-size: 50vw;
        /*mask-repeat: no-repeat;*/
    /*    mask-position: left bottom;
        background-color: rgb(45, 46, 50, 1);

    }

    */

    ;
}

/* masque haut */
/*
.section-fill-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit; /* hérite du background pour superposer */
/*-webkit-mask-image: url('masks/SVG/SVG/Mask-b3-s2.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top center;
  -webkit-mask-size: 100% auto;
  mask-image: url('masks/SVG/SVG/Mask-b3-s2.svg');
  mask-repeat: no-repeat;
  mask-position: top center;
  mask-size: 100% auto;
  z-index: 1;
  pointer-events: none;
}

/* masque bas */
/*.section-fill-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  -webkit-mask-image: url('masks/SVG/SVG/Mask-b3-s2b.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: bottom center;
  -webkit-mask-size: 100% auto;
  mask-image: url('masks/SVG/SVG/Mask-b3-s2b.svg');
  mask-repeat: no-repeat;
  mask-position: bottom center;
  mask-size: 100% auto;
  z-index: 2;
  pointer-events: none;
}
*/

/* contenu au-dessus */
.section-fill>*:not(.section-fill-bg) {
    position: relative;
    z-index: 3;
}



/*

    .section-fill-bg {
        position: absolute;
        inset: 0; /* occupe toute la section */
/*
        background: url('ton-background.jpg') center/cover;
        */
/*
        background-color: white;
        z-index: 0;

        /* Deux masks : haut et bas */
/*
        -webkit-mask-image:
            url('masks/SVG/SVG/Mask-b3-s2.svg'),
            url('masks/SVG/SVG/Mask-b3-s2b.svg');
        -webkit-mask-repeat: no-repeat, no-repeat;
        -webkit-mask-position: top center, bottom center;
        -webkit-mask-size: 100% auto, 100% auto; /* largeur 100%, conserve proportions */
/*-webkit-mask-composite: source-over; /* combine les masks sur WebKit */
/*
        mask-image:
            url('masks/SVG/SVG/Mask-b3-s2.svg'),
            url('masks/SVG/SVG/Mask-b3-s2b.svg');
        mask-repeat: no-repeat, no-repeat;
        mask-position: top center, bottom center;
        mask-size: 100% auto, 100% auto;
        mask-composite: add; /* combine les masks en syntaxe standard */
/*}*/

.section-fill>*:not(.section-fill-bg) {
    position: relative;
    z-index: 1;
    /* contenu au-dessus du background */
}






.section-trans {
    width: 100vw;
    height: 95vh;

    /*
        background : linear-gradient(to bottom, rgb(var(--color-background-layer-3),1), rgb(var(--color-background-layer-3),0),25%,rgb(var(--color-background-layer-3),0))
        */
}

/*ICI LA SECTION PRINCIPALE*/

/*#menu-header{

    }*/

.header-big {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    gap : 1rem;
}

#nom-header {
    position: relative
}

.boutton-pixel {
    width: 3.5rem;
    display: grid;

    justify-items: center;
    align-items: center;

    position: absolute;
    top: 0%;
    right: -10%;

    container-type: inline-size;

    font-size: 2rem;

    &>* {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
    }

    & svg {
        fill: var(--blue-700);
    }

    & p {
        pointer-events: none;
        font-size: 60cqw;
        color: var(--yellow-400);
        margin: 0;
        padding: 0 0 0 10%;
    }

}

.boutton-pixel:hover {
    animation: chevron-up-hover 1s ease-out infinite;
}

/*
.icon-projet:hover {
    animation: chevron-up-hover 1s ease-out infinite;
}
    */

/*.header-small{

    }*/
/*J'ai pensé à faire 2 classes : header-big et header-small et changer de classe en fonction du scroll*/
/*MAIS, en faisant ça ya pas d'anime, ALORS*/
/*Je vais essayer de plutot créer une anime pour les mettre à la bonne place puis maintenir*/

/*#menu-header:hover{             /*Reminder => ça sera pas :hover, je fais juste ça pour tester*/
/*animation : changement-header 2s ease-in-out;
    }*/


.header-small {
    position: fixed;
    top: -10rem;
    z-index: 9997;
    width: 100%;

    &>div {
        /*position: relative;*/
        width: calc(100% - 2rem);
        padding: 1rem;

        display: flex;
        justify-content: space-between
    }

    ;

    & p {
        margin: 0
    }

    /*
        & .boutton-div {
            position: absolute;
            right: 1rem;
        };*/

    & #h1-up {
        /*position: absolute;
            left: 1rem;*/
        font-size: 1.7rem;

        font-family: TheArcade;
        color: var(--font-color-h1);

        --s: 0.125em;
        text-shadow: var(--s) var(--s) #000000;
        filter: url(#outline-name-little);

    }



}


/*
    .header-small>p{font-size: 2rem;}
    */

.changement-header {
    animation: changement-position-header .5s ease-in-out;
    animation-fill-mode: forwards;
}


@keyframes changement-position-header {
    0% {
        top: -10rem;
    }

    100% {
        top: 1rem;
    }
}

.header-big .mon-nom {
    font-family: TheArcade;
    /*text-transform: uppercase;*/
    color: var(--font-color-h1);

    --s: 0.125em;
    text-shadow: var(--s) var(--s) #000000;
    filter: url(#outline-name);



}


/*
    #h1-up{
        position : fixed;
        top : -5rem;
        left: 1rem;
        z-index: 9999; 
        margin : 0;
        padding : 0;
    }*/

/*
    .changement-header #h1-up{
        animation : changement-position-mon-nom .5s ease-in-out;
        animation-fill-mode: forwards;
    }*/

/*
    .changement-header h1{
        font-size: 2rem;
        position : fixed;
        z-index: 9999; 
        margin : 0;
        padding : 0;
        top : 1rem;
        left : 1rem;
    }
    */

/*
    position : fixed;
    top : 1rem;
    right: 1rem;
    */
/*

    @keyframes changement-position-mon-nom{
        0%{
            font-size: 2rem;
            top : -5rem;
            left : 1rem;
        }
        100%{        
            font-size: 2rem;
            top : 1rem;
            left : 1rem;
        }
    }*/

/*
    #menu-header h1{
        font-size: 2rem;
        position : fixed;
        z-index: 9999; 
        margin : 0;
        padding : 0;
        top : 1rem;
        left : 1rem;
    }

    #menu-header .boutton{
        position : fixed;
        z-index: 9998; 
        top : 1rem;
        right: 1rem;
    }
        */




/*
    .button-custom{
        padding : 1rem;
        border-radius: 8px;
        background-color: pink;
    }*/


/*LE CODE DU BOUTTON => repris de ma V4 du portfolio, c'est MOI qui ait trouvé*/
.boutton {
    width: 16rem;
    position: relative;
    /*z-index: 9998;*/
}

.button-custom {
    fill: blue;
}

.boutton p {
    pointer-events: none;

    position: absolute;
    margin: 0;
    color: black;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    align-content: center;
    text-align: center;

}



/*ICI LA SECTION RUBRIQUE*/
/*
    - Création des 3 parties => Grid ? Flex ? 3 blocs html dont 2 en display:none ?
        -> Création de l'animation pour changer de rubrique
    - Création d'icons (up and down)
    - Dessiner la forme à 6 côtés
    - L'intégrer à un grid avec calcule de position
        -> Le grid doit être responsive (ou pas ?? Nb fixe d'éléments ??)
    - Ajout automatique des images + liens (JS + html)
    - Ajout du bouton "Nouvelle proposition de projet"
    - Création du formulaire de contact
        -> Reminder => On peut envoie un mail depuis ici ou je dois faire autrement ??
    - 
    */


.carousel-item {
    font-family: theArcade !important;
}



.chevrons-rubrique {
    width: 5rem;
}

.rubrique li {
    list-style-type: none;
    /*background-image: url("ImgSmall/Biomorphisme_03.jpg");*/
    background-size: cover;

    mask: url("TracesVectoriels/SVG/projet-rubrique-test-2.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: center;
}



@media (aspect-ratio > 1) {

    /*
        body{
            display : inline
        }
        .erreur-horizontal{
            display : none
        }*/

    /* hauteur > largeur */
    ul:has(#ux1) {
        /*inset : 0;*/
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }

    #ux1 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        mask: url("masks/rectangle-big-vertical.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 30%;
        height: 100%;
    }

    #ux2 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        mask: url("masks/rectangle-big-vertical.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 30%;
        height: 100%;
    }

    #ux3 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        mask: url("masks/rectangle-big-vertical.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: 100% 100%;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 30%;
        height: 100%;
    }
}

@media (aspect-ratio < 1) {

    /*
        body{
            display : none
        }
        .erreur-horizontal{
            display : inline
        }
        */

    /* hauteur < largeur */
    ul:has(#u1) {
        position: relative;
        width: 100%;
        height: 100%;
    }

    #ux1 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        aspect-ratio: 0.666;
        mask: url("masks/rectangle-big-vertical.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 45%;
        height: 100%;
        position: absolute;
        top: 0%;
        left: 0%;
    }

    #ux2 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        aspect-ratio: 0.666;
        mask: url("masks/rectangle-big-vertical.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 45%;
        height: 100%;
        position: absolute;
        top: 0%;
        right: 0%;
    }

    #ux3 {
        /*PENSER à changer "rubrique li" par le nom de classe correspondant à ceux qui sont 16 (ou qqch comme ça)*/
        aspect-ratio: 1.2;
        mask: url("masks/rectangle-big-horizontal.svg");
        /*URL ORIGINALE : masks/hexagone.png */
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;

        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0%;
        left: 0%;
    }
}




.hexagone {
    font-family: arcadeSTROKE;
    aspect-ratio: 1;

    /*mask: url("masks/hexagone.png");*/
    mask: url("icons-divers/icon-projets-V3.svg");
    /*URL ORIGINALE : masks/hexagone.png */
    /*URL AVEC TROUS : TracesVectoriels/SVG/projet-rubrique-test-2.svg*/

}

.hexactif:hover {
    animation: project-hover 1.5s ease-in-out infinite;
}

@keyframes project-hover {
    0% {
        transform: scale(100%)
    }

    50% {
        transform: scale(110%)
    }

    100% {
        transform: scale(100%)
    }
}


/*
    .rubrique li:not(:hover){
        animation : element-hover .5s ease-in-out ;
        animation-fill-mode: forwards;

    }
    @keyframes element-hover{
        0%{background-size: cover;}
        100%{background-size: 110%;}
    }*/

#rubriques article:not(.visible) {
    display: none
}

/*Rend toutes les rubriques invisibles sauf celle qui est "visible"*/

#rubriques {

    height: fit-content;


    & h2 {
        color: white;

        text-transform: uppercase;

        --s: 0.125em;
        text-shadow: var(--s) var(--s) #1A1AEF;
        filter: url(#outline-rub);

        margin: 0;
    }

    & #ux {
        height: 100%;
    }

    & .visible {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3rem auto 3rem;
        grid-template-areas: ". ." "rubriques nom" ". .";
        gap: 2%;
        /*place-items: center;*/
        padding: 1rem;
        height: 100%;
        width: calc(100% - 2rem);

        & ul {
            grid-area: rubriques;
        }

        & ul:not(#ux) {
            width: 100%;
            display: grid;
            grid-template-columns: 24.5% 24.5% 24.5% 24.5%;

            gap: 2%
                /*  gap : 0 .5%   */
        }

        ;


        & .selection-rubrique {
            inset: 0;
            grid-area: nom;
            display: flex;
            flex-direction: column;
            place-items: center;
            padding: 2rem;
            padding-left: 3rem;
            gap: 2rem;

            justify-content: space-evenly;

            & #chevron-up:hover {
                animation: chevron-up-hover 1s ease-out infinite;
            }

            ;

            & #chevron-down:hover {
                animation: chevron-down-hover 1s ease-out infinite;
            }

            ;
        }

        ;
    }

    ;

}

@keyframes chevron-up-hover {
    0% {
        transform: translateY(0rem)
    }

    50% {
        transform: translateY(-.5rem)
    }

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

@keyframes chevron-down-hover {
    0% {
        transform: translateY(0rem)
    }

    50% {
        transform: translateY(.5rem)
    }

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

.hide-here {
    opacity: 0%;
    pointer-events: none;
}






/*ICI LA SECTION A PROPOS DE MOI*/
/*
    - Mettre le perso qui monte
    - Ajouter les masques pour faire des trou dans le blanc
    - Ajouter le petit texte
    - Ajouter la "frise" pour mon parcours scolaire
    - Ajouter l'overlay avec ma carte d'identité
    */

#texte-profile {
    height: 80%;
    display: flex;
    flex-direction: column;
}

.texte-simple {
    font-family: pixel_simple;
    color: white
        /*text-transform: uppercase;
        /*font-family: 'Courier New', Courier, monospace;*/
}

d {
    color: var(--yellow-400)
}

/*                                          REMINDER : Supprimer ce truc !
    .encadrement-simple{
        border : solid black;
        padding : .5rem 1rem;
        border-radius: 8px;

    }*/


#a-propos {
    /*
        place-content: center;
        position : relative;
        */
    display: grid;
    grid-template-columns: 4fr 3fr;
    align-items: center;

    height: fit-content;
    padding-top: 4rem;
    padding-bottom: 5.5rem;
}

#a-propos h3 {
    margin-top: auto;
    color: white;

    text-transform: uppercase;

    --s: 0.125em;
    text-shadow: var(--s) var(--s) #000000;
    filter: url(#outline-propos);
}

#a-propos #texte-profile {
    padding: 1rem;

}


.mon-parcours {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 2rem 1fr;
    gap: 1rem;
    align-items: stretch;

    /*align-items: center;*/
    /*justify-items: center;*/


}

.mon-parcours>* {
    /*justify-content: center;*/
    border-radius: 6px;
    border: 1px solid;
    background-color: rgba(196, 84, 244, 0.2);
    padding: 1rem;
}

.mon-parcours>*>* {
    padding: .25rem 0;
    margin: 0rem;
}

#arrow-right {
    justify-self: center;
    align-self: center;
    border: 0px;
    background-color: rgba(196, 84, 244, 0);
}

/*
    .ecole{

    }*/

.date {
    font-size: 1rem
}

.sous-titre {
    font-size: 0.8rem
}

/*
    #a-propos {
        position: relative; /* Nécessaire pour positionner l'élément pseudo */
/*width: 300px;
        height: 300px;
        overflow: hidden; /* Optionnel, si tu veux cacher les débordements du masque */
/*}*/

/*#a-propos::before {
        content: ''; /* Nécessaire pour afficher l'élément pseudo */
/*position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        mask-image: url('TracesVectoriels/SVG/mask-fond-test.svg');
        -webkit-mask-image: url('TracesVectoriels/SVG/mask-fond-test.svg'); /* Pour compatibilité avec Safari */
/*mask-size: cover;*/
/*mask-repeat: no-repeat;*/

/*   z-index: -1; /* Pour mettre l'élément pseudo derrière le contenu */
/*}
    */


#photo-profile {
    width: 100%;
    position: relative;

    mask-image: url(MoiProfile/MasqueProfile.svg);
    mask-size: contain;
    mask-repeat: no-repeat;

    & #photo-fond {
        margin: 0;
        width: 100%;
    }

    ;

    & #photo-moi {
        margin: 0;
        width: 44%;
        position: absolute;
        left: 28%;
        top: 24%;
        opacity: 100%;
    }

    ;

    & #photo-moi:hover {
        transition: ease-in 0.2s;
        top: 17%;
    }

    & #photo-moi:not(:hover) {
        transition: ease-out 0.5s;
        bottom: -2rem;
    }

}





/*ICI LA SECTION CONTACT*/
/*
    - 
    */

#contact {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    gap: 1rem;
    justify-content: center;

    height: 50vh;
}

.icon-contact {
    width: 4rem;
    aspect-ratio: 1;
    /*background-color: blue;*/
    background-color: rgb(255, 255, 255, .5);
    padding: .5rem;
    fill: white;
    border: solid .2rem white;
}

.icon-contact:hover {
    /*REMINDER - Changer le vert pour un BEAU vert*/
    fill: var(--yellow-400);
    border: solid .2rem var(--yellow-400);
    background-color: rgb(0, 0, 0, .8);
}



.close-overlay-project {
    font-size: min(2vw, calc(2vh * 1.36));
    padding: .6rem .7rem .6rem .8rem;
    background-color: rgb(200, 200, 200, 0.4);
    border: solid black;

    cursor: default;
    user-select: none;
}

.close-overlay-project:hover {
    background-color: rgb(255, 0, 0, .7)
}

.overlay-project:not(.visible) {
    display: none !important;

}


button {
    padding: .5rem;
    border-style: double;
    font-family: pixel_simple;
    text-transform: uppercase;
    font-weight: 600;

    background-color: var(--blue-700);
    border-color: var(--yellow-400);

    & a {
        color: var(--yellow-400);
        text-decoration: none;
    }

    /*
        background: #222;
        color: #0f0;
        font-family: monospace;
        padding: 10px 20px;
        border: 2px solid #0f0;
        border-radius: 0 0 10px 0; /* seul coin en bas à gauche arrondi */
    /*box-shadow: inset 0 0 5px #0f0;
        cursor: pointer; 
        */
}


button:not(.fleche-carousel):hover {
    background-color: var(--blue-690);

    & a{
        color : var(--yellow-400)
    }
}