/* Import des polices pour les titres*/
@font-face {
    font-family: 'MaPolice_portfolio_titre';
    src: url('../../font_global_mon_portfolio/BebasNeue-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'MaPolice_portfolio_txt';
    src: url('../../font_global_mon_portfolio/Nunito-Regular.ttf') format('truetype');
}

:root{
    --white-portfolio-couleur: #f5f5f5;
    --black-portfolio-couleur: #242325;
    --red-portfolio-couleur: #F10909;
    --grey-portfolio-couleur:#141414a3;
}

a {
    text-decoration: none;
    font-size: 1rem;
}
/*Style copie - coller*/
p ::selection{
    background: var(--red-portfolio-couleur,);
}

::selection {
    background-color: var(--red-portfolio-couleur); /* Couleur de surlignement personnalisée */
    color: var(--black-portfolio-couleur); /* Couleur du texte sélectionné */
  }

/*Style none des liste ul et li*/
.unstyled {
    text-decoration: none;
}

/*Style généraux page de chargement*/
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white-portfolio-couleur);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999;
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

#loader {
    border: 0.4375rem solid var(--white-portfolio-couleur);
    border-top: 0.4375rem solid var(--red-portfolio-couleur); /* Couleur de la barre de chargement */
    border-radius: 50%;
    width: 3.125rem;
    height: 3.125rem;
    animation: spin 1.5s ease infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#loader-text {
    margin-top: 1.25rem;
    font-size: 1.875rem;
    color: var(--grey-portfolio-couleur);
    text-decoration: none;
    font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
    line-height: normal;
    text-transform: uppercase;
}

#loader-text strong {
    color: var(--red-portfolio-couleur)
}

/* Section ---------------------- ALL */
/* Section ---------------------- Vmobile Orientation Vertical*/
/* Média query pour les écrans - 320px à 600px */

@media (20em <=width <64em) {

    /* Section ---------------------- message erreur -20em ecran */
    #error_message .container {
        display: none;
    }

    /* Section ---------------------- Pop-up */

    .pop_up {
        display: none;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        top: 7%;
        right: 0;
        margin-right: 1.5rem;
        animation: fadeIn 0.5s ease-in-out;
    }

    .fade-in-animation {
        animation: fadeIn 0.5s ease-in-out; /* Assurez-vous que la durée et la courbe d'accélération correspondent à celles de .pop_up */
    }

    .contenu_pop_up{
        width: 15.125rem;
        height: 10.3125rem;
        background-color: var(--black-portfolio-couleur);
        z-index: 9999999999999;
    }

    .txt_pop_up {
        color: var(--white-portfolio-couleur, #F5F5F5);
        font-family: MaPolice_portfolio_titre;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        padding: 2rem 1.3125rem 2rem 1.3125rem;
    }

    a.bouton_quit {
        position: relative;
        top: -1.3125rem;
        left: -2.375rem;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
        cursor: pointer;
        display: flex;
    }

    .img_bouton_quit {
        position: relative;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
    }

    .img_bouton_quit_red {
        position: relative;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
        display: none;
    }

    .pop_up strong {
        color: var(--red-portfolio-couleur);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Section ---------------------- balise all */

    div.all {
        display: flex;
        flex-direction: column;
        background-color: var(--white-portfolio-couleur, #f5f5f5);
        min-height: 100vh;
    }

    .header {
        background: var(--black-portfolio-couleur, #242325);
        position: fixed;
        width: 100%;
        z-index: 100000;
    }

    header .Container {
        box-shadow: 0rem 0.25rem 0.25rem rgba(36, 35, 37, 0.2);
    }

    header a {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-decoration: none;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        line-height: normal;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 400;
        align-items: center;
        display: flex;
        width: 3.5rem;
        height: 1rem;
        flex-shrink: 0;
    }

    header li {
        flex-direction: row;
        display: flex;
        padding-right: 0.625rem;
    }

    header ul {
        display: flex;
        align-items: center;
        /* Centrer horizontalement */
        list-style: none;
    }

    header .logo {
        display: flex;
        align-items: center;
        margin-right: 1.5rem;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        margin-left: auto;
    }

    header .Container {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    header .logo_clique {
        width: 1.4375rem;
        height: 1.4375rem;
    }

    header .navbar {
        margin-right: auto;
        /* Pousser le menu vers la gauche */
        margin-left: 1.4375rem;
        padding-top: 0.1875rem;
        padding-bottom: 0.1875rem;
    }

    /* Section ---------------------- hero */
    #txt_couleur {
        color: var(--red-portfolio-couleur, #F10909);
    }

    h1.titre {
        color: var(--black-portfolio-couleur);
        font-size: 2.5rem;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 3rem;
        height: auto;
        flex-shrink: 0;
        margin-top: 4rem;
        margin-bottom: auto;
        margin-left: 1.4375rem;
        margin-right: 1.4375rem;
    }

    #bien_venue {
        flex-shrink: 0;
        padding-bottom: auto;
    }

    .hero__item-Txt p {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1rem;
        font-family: MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        margin-left: 1.4375rem;
        margin-right: 1.4375rem;
        text-align: justify;
    }

    .hero__item-Txt a {
        all: unset;
    }

    .hero__item-Txt strong {
        all: unset
    }

    /* Section ---------------------- Galerie */

    #galerie .section_header {
        padding-top: 1.25rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 1rem;
    }

    #galerie h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        margin-left: 1.4375rem;
        margin-right: auto;
    }

    div.les_cartes {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    div.carte {
        display: flex;
        flex-direction: column-reverse;
        position: relative;
        width: 100%;
    }

    div.fond_pour_txt_vblanc {
        display: flex;
        padding-left: 1.375rem;
        padding-right: 1.9375rem;
        padding-top: 0.6875rem;
        padding-bottom: 0.6875rem;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        background: var(--white-portfolio-couleur, #F5F5F5);
        border-top: 0.1875rem solid var(--black-portfolio-couleur);
    }

    div.fond_pour_txt_vnoir {
        display: flex;
        padding-left: 1.375rem;
        padding-right: 1.9375rem;
        padding-top: 0.6875rem;
        padding-bottom: 0.6875rem;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        background: var(--black-portfolio-couleur, #242325);
        border-top: 0.1875rem solid var(--white-portfolio-couleur);
    }

    h3.carte_titre_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
    }

    p.carte_catégorie_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 0.875rem;
        font-family:MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
    }

    h4.carte_numéro_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--red-portfolio-couleur, #F10909);
        font-size: 2.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 3rem;
    }

    h3.carte_titre_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--wite-portfolio-couleur, #f5f5f5);
        font-size: 1rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
    }

    p.carte_catégorie_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--wite-portfolio-couleur, #f5f5f5);
        font-size: 0.875rem;
        font-family: MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
    }

    h4.carte_numéro_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--red-portfolio-couleur, #F10909);
        font-size: 2.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 3rem;
    }

    img.img_carte_vblanc{
        width: 100%;
    }

    img.img_carte_vnoir{
        width: 100%;
    }

    @media (20em <=width <=445px) {
        div.les_cartes {
            display: block;
        }

        img.img_carte_vblanc{
            height: 31.25rem;
            object-fit: contain;
            background-color: var(--black-portfolio-couleur);
            border: 0.1875rem solid;
            border-color: var(--white-portfolio-couleur);

        }

        img.img_carte_vnoir{
            height: 31.25rem;
            object-fit: contain;
            background-color: var(--white-portfolio-couleur);
            border: 0.1875rem solid;
            border-color: var(--black-portfolio-couleur);
        }
    }

    /*Section ------------------- Projets*/

    #projets h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        margin-left: 1.4375rem;
        margin-right: auto;
    }

    #projets .container {
        display: flex;
        flex-direction: column;
    }

    #projets .section_header {
        padding-top: 1.25rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 1rem;
    }

    #projets projet_all {
        display: flex;
        flex-direction: column;
    }

    .projet_vblanc {
        background: var(--white-portfolio-couleur, #F5F5F5);
        height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h3.nom_projet_vblanc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        margin-left: 1.375rem;
    }

    .projet_trait_vblanc {
        background: var(--black-portfolio-couleur, #242325);
        height: 0.125rem;
        margin-top: 0.3125rem;
        width: 1.375rem;
    }


    .projet_vnoir {
        background: var(--black-portfolio-couleur, #242325);
        height: 5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h3.nom_projet_vnoir {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: var(--white-portfolio-couleur, #F5F5F5);
        font-size: 1rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        margin-left: 1.375rem;
    }

    .projet_trait_vnoir {
        background: var(--white-portfolio-couleur, #F5F5F5);
        height: 0.125rem;
        z-index: 2;
        margin-top: 0.3125rem;
        width: 1.375rem;
    }

    /* Section ---------------------- lien_téléchargement */

    #lien_téléchargement h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        margin-left: 1.4375rem;
        margin-right: auto;
    }

    #lien_téléchargement .section_header {
        padding-top: 1.25rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 1rem;
    }

    #lien_téléchargement a {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    #lien_téléchargement .icone_cv {
        margin-left: 1.4375rem;
    }

    #lien_téléchargement p {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 0.875rem;
        font-family:MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
        margin-left: 1rem;
    }

    #lien_téléchargement img {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Section ------------------- Contact*/

    #contact .section_header {
        padding-top: 1.25rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 1rem;
        margin-left: 1.4375rem;
        margin-right: 1.4375rem;
    }

    #contact h2 {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 2.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        line-height: 3rem;
    }

    #contact .container_formulaire {
        padding-left: 1.4375rem;
        padding-right: 1.4375rem;
        padding-bottom: 1rem;

    }

    #contact label{
        color: var(--black-portfolio-couleur, #242325);
        font-family: MaPolice_portfolio_txt;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
    }

    .email_input input{
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
    }

    .Nom_prènom_input input{
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
    }

    .message_input textarea {
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
        resize: none;
        height: 5rem;
    }

    #contact ul.information_utilisateur {
        display: flex;
        flex-direction: column;
        gap: 0.9375rem;
    }

    .trait_sphere {
        position: relative;
    }

    #contact hr {
        background: var(--black-portfolio-couleur);
        position: absolute;
        width: 99%;
        height: 0.125rem;
        border: none;
    }

    div.sphere {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 50%;
        background-color: var(--black-portfolio-couleur);
        position: absolute;
        top: 0.25rem;
        right: 0;
    }

    div .section_aide_pour {
        margin: 1.875rem 0rem 1.25rem 0rem;
    }

    #contact .grid_item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items:center;
        column-gap: 10%;
    }

    #contact h3{
        color: var(--black-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
    }

    /*Style du txt du label de la box */
    #contact .label_box {
        display:flex ;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
        justify-content: center;
        align-items: center;
        user-select: none;
        transition: 0.3s;
    }

    li.box{
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    /* Cacher le checkbox natif */
    input[type="checkbox"]{
        display: none;
    }

     /* Style personnalisé de la coche lorsque la case est cochée */
    #contact input[type="checkbox"]:checked + label.custom_box {
        border: 0.0625rem solid var(--red-portfolio-couleur);
        background-color: var(--red-portfolio-couleur);
        transform: scale(1.1);
    }

    /* Style personnalisé de la case à cocher */
    #contact .custom_box {
        display: block;
        width: 1rem;
        height: 1rem;
        border-radius: 0.1875rem;
        border: 0.0625rem solid var(--grey-portfolio-couleur);
        background-color: var(--wite-portfolio-couleur);
        transition: 0.3s;
    }

    #contact .custom_box img{
        display: none;
        width: 1rem;
        height: 1rem;
        overflow: hidden;
    }

    .champs_requis {
        display:flex ;
        color: var(--black-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
        align-items: center;
        user-select: none;
    }

    #contact button {
        display: flex;
        max-width: 10.625rem;
        width: 60%;
        min-width: 10.625rem;
        height: 3rem;
        color: var(--white-portfolio-couleur);
        text-align: center;
        font-family: MaPolice_portfolio_titre;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        border-radius: 0.375rem;
        background: var(--black-portfolio-couleur, #242325);
        border: none;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0.3125rem;
    }

    /*Section ------------------------ Footer*/
    #footer {
        margin-top: auto;
    }

    #footer div.container {
        display: grid;
        background: var(--black-portfolio-couleur, #242325);
        padding: 1.75rem 1.5rem 1.75rem 1.5rem;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 2fr 1fr;
        margin-top: 2.6875rem;
    }

    #footer div.droite{
        grid-column-start: 3;
        display: flex;
        justify-content: flex-end;
    }

    #footer div.copyryght {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 1/4;
    }

    #footer div.titre_footer{
        grid-column-start: 2;
        grid-row-start: 1;
        justify-content: center;
        display: flex;
    }

    #footer div.gauche{
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
        justify-content: space-between;
    }

    #footer li.navbar {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    #footer ul.réseaux_sociaux {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    footer a.txt_navbar {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-decoration: none;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        line-height: normal;
        text-transform: uppercase;
        font-size: 0.75rem;
        font-weight: 400;
        align-items: center;
        display: flex;
        width: 3.5rem;
        height: 1rem;
        flex-shrink: 0;
    }
    .titre_footer {
        position: relative;
    }

    .h5_footer {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-align: center;
        font-family: MaPolice_portfolio_titre;
        font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 3rem;
        position: absolute;
        top: -0.375rem;
    }

    .icone_linkedln_red {
        width: 100%;
        height: 100%;
        display: none;
    }

    .icone_instagram_red {
        width: 100%;
        height: 100%;
        display: none;
    }

    .copyryght_txt {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-align: center;
        font-family: MaPolice_portfolio_txt;
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
        padding: 0rem 6.25rem 0rem 6.25rem;
        margin-top: 1.875rem;
    }

}

/* Média query pour les écrans inférieurs à 319px */
@media (max-width: 319px) {

    /* Afficher le message d'erreur */
    .container {
        background-color: var(--black-portfolio-couleur);
        color: var(--white-portfolio-couleur);
        text-align: left;
        margin: 20%;
        font-family: MaPolice_portfolio_titre;
        font-size: 1.5em;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
    }

    #body{
        background-color: var(--black-portfolio-couleur);
    }

    .red_strong {
        color: var(--red-portfolio-couleur); 
    }
    /* Masquer le reste du contenu de la page */
    .all {
      display: none;
    }
}

/* Section ---------------------- Vordinateur*/
@media (64em <=width <480em) {

    /* Section ---------------------- Cursor */
    #all {
        cursor: url("/ressources_Vmobile/icones_Vmobile/cursor_Default.png"), auto;
    }

    #all .element-clicable {
        cursor: url("/ressources_Vmobile/icones_Vmobile/cursor_Variant.png"), auto;
    }

    /* Section ---------------------- message erreur -20em ecran */
    #error_message .container {
        display: none;
    }

    /* Section ---------------------- Pop-up */
    .pop_up {
        display: none;
        flex-direction: column;
        align-items: flex-end;
        position: fixed;
        top: 12%;
        right: 0;
        margin-right: 8.4375rem;
        animation: fadeIn 0.5s ease-in-out;
    }

    .fade-in-animation {
        animation: fadeIn 0.5s ease-in-out; /* Assurez-vous que la durée et la courbe d'accélération correspondent à celles de .pop_up */
    }

    .contenu_pop_up{
        width: 15.125rem;
        height: 10.3125rem;
        background-color: var(--black-portfolio-couleur);
        z-index: 9999999999999;
    }

    .txt_pop_up {
        color: var(--white-portfolio-couleur, #F5F5F5);
        font-family: MaPolice_portfolio_titre;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        padding: 2rem 1.3125rem 2rem 1.3125rem;
    }

    a.bouton_quit {
        position: relative;
        top: -1.3125rem;
        left: -2.375rem;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
        cursor: pointer;
        display: flex;
    }

    .img_bouton_quit {
        position: relative;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
    }

    .img_bouton_quit_red {
        position: relative;
        width: 2.625rem;
        height: 2.625rem;
        z-index: 999999999999999;
        display: none;
    }

    #pop_up a.bouton_quit:hover .img_bouton_quit {
        display: none;
    }

    #pop_up a.bouton_quit:hover .img_bouton_quit_red {
        display: block;
    }

    .pop_up strong {
        color: var(--red-portfolio-couleur);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Section ---------------------- balise all */

    div.all {
        display: flex;
        flex-direction: column;
        background-color: var(--white-portfolio-couleur, #f5f5f5);
        min-width: min-content;
    }

    .header {
        background: var(--black-portfolio-couleur, #242325);
        position: fixed;
        width: 100%;
        z-index: 100000;
    }

    header .Container {
        box-shadow: 0rem 0.5rem 0.5rem rgba(36, 35, 37, 0.2);
    }

    header a {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-decoration: none;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        line-height: normal;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: 400;
        align-items: center;
        display: flex;
        width: 7rem;
        height: 2rem;
        flex-shrink: 0;
        user-select: none;
        transition: color 0.3s ease;
    }

    header a:hover {
        color: var(--red-portfolio-couleur);
    }

    header li {
        flex-direction: row;
        display: flex;
        padding-right: 1.9375rem;
    }

    header ul {
        display: flex;
        align-items: center;
        /* Centrer horizontalement */
        list-style: none;
    }

    header .logo {
        display: flex;
        align-items: center;
        margin-right: 8.4375rem;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        margin-left: auto;
    }

    header .Container {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
    }

    header .logo_clique {
        width: 3rem;
        height: 3rem;
    }

    header .navbar {
        margin-right: auto;
        /* Pousser le menu vers la gauche */
        margin-left: 8.4375rem;
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }

    img.logo_img{
        width: 100%;
        height: 100%;
    }

    /* Section ---------------------- hero */
    #txt_couleur {
        color: var(--red-portfolio-couleur, #F10909);
    }

    h1.titre {
        color: var(--black-portfolio-couleur);
        font-size: 5rem;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 6rem;
        height: auto;
        flex-shrink: 0;
        margin-top: 8rem;
        margin-bottom: auto;
        margin-left: 8.4375rem;
        margin-right: 8.4375rem;
    }

    #bien_venue {
        flex-shrink: 0;
        padding-bottom: auto;
    }

    .hero__item-Txt p {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 2rem;
        font-family: MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        margin-left: 8.4375rem;
        margin-right: 8.4375rem;
        text-align: justify;
        cursor:pointer;
        transition: text-decoration 0.3S ease;
    }

    .hero__item-Txt p:hover {
        text-decoration: underline;
        text-decoration-color: var(--red-portfolio-couleur);
    }

    .hero__item-Txt a {
        all: unset;
    }

    .hero__item-Txt strong {
        all: unset
    }

    /* Section ---------------------- Galerie */

    #galerie .section_header {
        padding-top: 3.5rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 2rem;
    }

    #galerie h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 3rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        margin-left: 8.4375rem;
        margin-right: auto;
    }

    div.les_cartes {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 100%;
    }

    div.item{
        height: 100%;
    }

    div.carte {
        /*display: flex;*/
        /*flex-direction: column-reverse;*/
        height: 100%;
    }

    #galerie a {
        flex: 1 0 0;
        height: 20rem;
        cursor: pointer;
        /* Facteur de flexibilité: 1, dimension minimale: 0 */
    }

    div.carte{
        position: relative;
    }

    div.fond_pour_txt_vblanc {
        display: flex;
        /* padding-left: 1.375rem; */
        /* padding-right: 1.9375rem; */
        /* padding-top: 0.6875rem; */
        /* padding-bottom: 0.6875rem; */
        flex-direction: column;
        align-items: center;
        background-color: var(--white-portfolio-couleur);
        position: absolute;
        width: 100%;
        height: 100%;
        justify-content: center;
        transition: opacity 0.3s ease;
    }

    div.fond_pour_txt_vblanc:hover {
        opacity: 0;
    }

    div.fond_pour_txt_vnoir {
        display: flex;
        /* padding-left: 1.375rem; */
        /* padding-right: 1.9375rem; */
        /* padding-top: 0.6875rem; */
        /* padding-bottom: 0.6875rem; */
        flex-direction: column;
        align-items: center;
        background-color: var(--black-portfolio-couleur);
        position: absolute;
        width: 100%;
        height: 100%;
        justify-content: center;
        transition: opacity 0.3s ease;
    }

    div.fond_pour_txt_vnoir:hover {
        opacity: 0;
    }

    h3.carte_titre_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 2rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        text-shadow: 0 0.125rem 3.125rem var(--white-portfolio-couleur, 0.5);
    }

    p.carte_catégorie_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1.5rem;
        font-family:MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        text-shadow: 0 0.125rem 3.125rem var(--white-portfolio-couleur, 0.5);
    }

    h4.carte_numéro_vblanc {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--red-portfolio-couleur, #F10909);
        font-size: 9rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        margin-top: 10%;
    }

    h3.carte_titre_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--wite-portfolio-couleur, #f5f5f5);
        font-size: 2rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        text-shadow: 0 0.125rem 3.125rem var(--black-portfolio-couleur, 0.5);
    }

    p.carte_catégorie_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--wite-portfolio-couleur, #f5f5f5);
        font-size: 1.5rem;
        font-family:MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        text-shadow: 0 0.125rem 3.125rem var(--black-portfolio-couleur, 0.5);
    }

    h4.carte_numéro_vnoir {
        display: flex;
        justify-items: center;
        flex-shrink: 0;
        color: var(--red-portfolio-couleur, #F10909);
        font-size: 9rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        margin-top: 10%;
    }

    img.img_carte_vblanc{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    img.img_carte_vnoir{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /*Section ------------------- Projets*/

    #projets h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 3rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        margin-left: 8.4375rem;
        margin-right: auto;
    }

    #projets .container {
        display: flex;
        flex-direction: column;
    }

    #projets .section_header {
        padding-top: 3.5rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 2rem;
    }

    #projets projet_all {
        display: flex;
        flex-direction: column;
    }

    .projet_vblanc {
        background: var(--white-portfolio-couleur, #F5F5F5);
        height: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h3.nom_projet_vblanc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: var(--black-portfolio-couleur, #242325);
        font-size: 2rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        margin-left: 8.4375rem;
    }
    
    #projets a {
        gap: 2rem;
        display: flex;
        flex-direction: column;
    }

    .projet_trait_vblanc {
        background: var(--black-portfolio-couleur, #242325);
        height: 0.5rem;
        margin-top: 0.3125rem;
        width: 8.5rem;
        transition: width 0.3s ease;
    }

    .projet_vblanc:hover .projet_trait_vblanc {
        width: 70%;
        background: var(--red-portfolio-couleur);
    }

    .projet_vnoir {
        background: var(--black-portfolio-couleur, #242325);
        height: 10rem;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    h3.nom_projet_vnoir {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: var(--white-portfolio-couleur, #F5F5F5);
        font-size: 2rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        margin-left: 8.4375rem;
    }

    .projet_trait_vnoir {
        background: var(--white-portfolio-couleur, #F5F5F5);
        height: 0.5rem;
        margin-top: 0.3125rem;
        width: 8.5rem;
        transition: width 0.3s ease;
    }

    .projet_vnoir:hover .projet_trait_vnoir {
        width: 70%;
        background: var(--red-portfolio-couleur);
    }

    /* Section ---------------------- lien_téléchargement */

    #lien_téléchargement h2.titre {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 3rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
        margin-left: 8.4375rem;
        margin-right: auto;
    }

    #lien_téléchargement .section_header {
        padding-top: 2.5rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 2rem;
    }

    #lien_téléchargement a {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    #lien_téléchargement .icone_cv {
        margin-left: 8.4375rem;
    }

    #lien_téléchargement p {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 1.75rem;
        font-family: MaPolice_portfolio_txt;
        font-style: normal;
        font-weight: 400;
        margin-left: 1rem;
    }

    #lien_téléchargement img {
        width: 3.5rem;
        height: 3.5rem;
    }

    /* Section ------------------- Contact*/

    #contact .section_header {
        padding-top: 2.5rem;
        background: var(--white-portfolio-couleur, #F5F5F5);
        padding-bottom: 2rem;
        margin-left: 8.4375rem;
        margin-right: 8.4375rem;
    }

    #contact h2 {
        color: var(--black-portfolio-couleur, #242325);
        font-size: 2.5rem;
        font-family: MaPolice_portfolio_titre;
        font-style: normal;
        font-weight: 400;
    }

    #contact .container_formulaire {
        padding-left: 8.4375rem;
        padding-right: 8.4375rem;
        padding-bottom: 2rem;
    }

    #contact label.label_NE {
        color: var(--black-portfolio-couleur, #242325);
        font-family: MaPolice_portfolio_txt;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
    }

    .email_input input{
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
        height: 2rem;
    }

    .Nom_prènom_input input{
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
        height: 2rem;
    }

    .message_input textarea {
        cursor: pointer; /*pour voir sur ordinateur que c'est clicable*/
        text-align:left;
        font-style: normal;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        padding: 0.3125rem 0.3125rem 0.3125rem 0rem;
        outline: none;
        border: none;
        background-color: var(--white-portfolio-couleur);
        width: 100%;
        resize: none;
        height: 5rem;
    }

    #contact ul.information_utilisateur {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
    }

    .trait_sphere {
        position: relative;
    }

    #contact hr {
        background: var(--black-portfolio-couleur);
        position: absolute;
        width: 99%;
        height: 0.125rem;
        border: none;
    }

    div.sphere {
        width: 0.625rem;
        height: 0.625rem;
        border-radius: 50%;
        background-color: var(--black-portfolio-couleur);
        position: absolute;
        top: 0.25rem;
        right: 0;
    }

    div .section_aide_pour {
        margin: 3.75rem 0rem 2.5rem 0rem;
    }

    #contact .grid_item {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items:center;
        column-gap: 10%;
    }

    #contact h3{
        color: var(--black-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
    }

    /*Style du txt du label de la box */
    #contact .label_box {
        display:flex ;
        color: var(--grey-portfolio-couleur);
        font-family: MaPolice_portfolio_txt;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 3.5em;
        justify-content: center;
        align-items: center;
        user-select: none;
        transition: 0.3s;
    }

    li.box{
        display: flex;
        align-items: center;
        gap: 0.625rem;
    }

    /* Cacher le checkbox natif */
    input[type="checkbox"]{
        display: none;
    }

    /* Style personnalisé de la coche lorsque la case est cochée */
    #contact input[type="checkbox"]:checked + label.custom_box {
        border: 0.0625rem solid var(--red-portfolio-couleur);
        background-color: var(--red-portfolio-couleur);
        transform: scale(1.1);
    }

    /* Style personnalisé de la case à cocher */
    #contact .custom_box {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.375rem;
        border: 0.0625rem solid var(--grey-portfolio-couleur);
        background-color: var(--wite-portfolio-couleur);
        transition: 0.3s;
    }

    #contact .custom_box img{
        display: none;
        width: 1.5rem;
        height: 1.5rem;
        overflow: hidden;
    }

    .champs_requis {
        display:flex ;
        color: var(--black-portfolio-couleur);
        font-family:MaPolice_portfolio_txt;
        font-size: 1.0125rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2em;
        align-items: center;
        user-select: none;
    }

    #contact button {
        display: flex;
        width: 20rem;
        height: 5.5rem;
        color: var(--white-portfolio-couleur);
        text-align: center;
        font-family: MaPolice_portfolio_titre;
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem;
        letter-spacing: 0.1875rem;
        text-transform: uppercase;
        border-radius: 0.375rem;
        background-color: var(--black-portfolio-couleur);
        border: none;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0.3125rem;
        transition: background-color 0.3s ease;
        user-select: none;
    }

    #contact button:hover {
        background-color: var(--red-portfolio-couleur);
    }

    /*Section ------------------------ Footer*/

    #footer div.container {
        display: grid;
        background: var(--black-portfolio-couleur);
        padding: 1.75rem 1.5rem 1.75rem 1.5rem;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 2fr 1fr;
        margin-top: 2.6875rem;
    }

    #footer div.droite{
        grid-column-start: 3;
        display: flex;
        justify-content: flex-end;
        margin-right: 6.9375rem;
        position: relative;
        top: 0.375rem;
    }

    #footer div.copyryght {
        display: flex;
        align-items: center;
        justify-content: center;
        grid-column: 1/4;
    }

    #footer div.titre_footer{
        grid-column-start: 2;
        grid-row-start: 1;
    }

    #footer div.gauche{
        display: flex;
        align-items: flex-start;
        flex-direction: column-reverse;
        justify-content: space-between;
        margin-left: 6.9375rem;
    }

    #footer li.navbar {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    #footer ul.réseaux_sociaux {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    footer a.txt_navbar {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-decoration: none;
        font-family: MaPolice_portfolio_titre, Arial, Helvetica, sans-serif;
        line-height: normal;
        text-transform: uppercase;
        font-size: 1.5rem;
        font-weight: 400;
        align-items: center;
        display: flex;
        width: 7rem;
        height: 2rem;
        flex-shrink: 0;
        user-select: none;
        transition: color 0.3s ease;
    }

    footer a.txt_navbar:hover {
        color: var(--red-portfolio-couleur);
    }

    .titre_footer {
        position: relative;
        display: flex;
        justify-content: center;
    }

    .h5_footer {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-align: center;
        font-family: MaPolice_portfolio_titre;
        font-size: 5rem;
        font-style: normal;
        font-weight: 400;
        line-height: 6rem;
        position: absolute;
        top: -0.875rem;
    }

    #footer a.logo_clique {
        width: 3rem;
        height: 3rem;
        display: flex;
    }
    
    #footer img.logo_img {
        width: 100%;
        height: 100%;
    }

    .icone_sociaux_clic {
        width: 3rem;
        height: 3rem;
        display: flex; 
    }

    img.icone_clic {
        width: 100%;
        height: 100%; 
    }

    .icone_linkedln_blanc {
        width: 100%;
        height: 100%;  
    }

    .icone_linkedln_red {
        width: 100%;
        height: 100%;
        display: none;
    }

    #footer a.icone_clic:hover .icone_linkedln_blanc {
        display: none;
    }

    #footer a.icone_clic:hover .icone_linkedln_red {
        display: block;
    }

    .icone_instagram_blanc {
        width: 100%;
        height: 100%; 
    }

    .icone_instagram_red {
        width: 100%;
        height: 100%;
        display: none;
    }

    #footer a.icone_clic:hover .icone_instagram_blanc {
        display: none;
    }

    #footer a.icone_clic:hover .icone_instagram_red {
        display: block;
    }

    .copyryght_txt {
        color: var(--white-portfolio-couleur, #F5F5F5);
        text-align: center;
        font-family: MaPolice_portfolio_txt;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.5rem;
        padding: 0rem 6.25rem 0rem 6.25rem;
        margin-top: 1.875rem;
    }
}