/* CSS */

/* GÉNÉRAL */
:root {
    /* Définition des variables pour les espacements */
    --space-1: 1.25rem; /* 20px / 16px */
    --space-2: 0.3125rem; /* 5vh approximativement, dépend de la hauteur de la vue */
    --space-3: 4.6875rem; /* 75px / 16px */
    --space-4: 2.5rem; /* 40px / 16px */
    --space-small: 0.625rem; /* 10px / 16px */
    --space-medium: 1.25rem; /* 20px / 16px */
    --space-large: 2.5rem; /* 40px / 16px */
    --space-xlarge: 5rem; /* 80px / 16px */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
   scroll-behavior: smooth;
}


strong{
    font-family:'Nunito', sans-serif; 
}


a:link {
    text-decoration: none;  
}


/* BODY */


body {
    background-color:#FFFDFA;
    color:#573B30;
    font-family: 'Nunito', sans-serif;
    cursor: url("assets/selection-finale/curseur.png"),url("assets/selection-finale/curseur.cur"), auto;
   
}

/* LES H1 */

h1 {
    font-family: 'Londrina Shadow';
    padding-top: var(--space-1); /* Remplacement de margin-top par padding-top */
    font-size: 5.5vw;
    padding-bottom: var(--space-2); /* Remplacement de margin-bottom par padding-bottom */
    color: #573B30;
    text-align: center;
}

h1::after {
    content: '';
    display: flex;
    width: 35%;
    height: 0.1875rem; /* 3px / 16px */
    background-color: #573B30;
    margin: auto;
} 

/*  LES H2 */

h2 {
    font-family: 'Londrina Shadow';
    font-size: 4vw;
    color: #573B30;
    padding-top: 0.0625rem; /* 1vh / 16px */
    padding-bottom: 0.0625rem; /* 1vh / 16px */
    text-align: center;
}


/*  LES H3 */


h3 {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-family: 'Londrina Shadow';
    width: 25vw;
    margin: var(--space-3) var(--space-4) 0 var(--space-4);
}


h3 span{
    font-size:3vw;
    box-sizing:border-box;
    color:#573B30;
}


/*  lES H4 */  


h4{
    font-family: 'Londrina Shadow';
    font-size:2rem;
    color:#573B30;
}


/* HEADER */


#header {
    width:100%;
    background-color: #FFFDFA;
    background-image: url(assets/selection-finale/photo-sophie.png);
    background-position: right 0vh top 0vh;
    background-repeat:no-repeat;
    background-size: 40vw;
    display: flex;
    justify-content:space-around;
    flex-direction: row;
    padding-bottom: 2.1875rem; /* 35px / 16px */

}


.photo-sophie{
    display:none;
}


.junior{
    font-size: 3vw;
    padding-bottom: 0;
}


.entete {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 0.25rem auto 0 2.5rem; /* 4px auto 0 40px / 16px */
}

.entete .logo{
    width:30vh;
    padding:0;
    margin:auto;  
}


blockquote{
    font-size:1.8vw ;
    margin:0;
    text-align: center;
    font-style:normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
}


blockquote::first-letter{
    font-size: 6vw;
    color:#573B30;
    font-family:'Londrina Shadow';
}

.soleil-mobile{
    display: none;
}

/* ICONE BARRE */


#topbar{
    display: none ;
}

.icons-bar {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    right: 0;
    top: 1.25rem; /* 20vh / 16 */
    position: fixed;
    z-index: 100;
}

.icon-button {
    width: 3.125rem; /* 50px / 16px */
    display: flex;
    flex-direction: row-reverse;
}



.icon-button:hover{
    scale:1.2;
}


.icon {
    width: 3vw;
    margin: 0.375rem; /* 6px / 16px */
    position: inherit;
    left: 13.25rem; /* 212px / 16px */
    top: -0.2625rem; /* -4.2px / 16px */
    min-width: 3.125rem; /* 50px / 16px */
}


    /*BOUTON MAIL*/

input {
    position: relative;
    right: -2rem; /* -32vh / 16px (approximation, vh to rem conversion might need adjustment) */
    top: -0.5rem; /* -8px / 16px */
    opacity: 0;
}


label {
    display: block;
    padding: 0vh;
    background: none;
    font-weight: bold;
    cursor: pointer;
}

input:checked ~ .mail-text {
    transform: translate(0.9375rem); /* 15px / 16px */
    transition: 1s ease-in-out;
}

    /*FIN BOUTON MAIL*/

    /*BOUTON PHONE*/


      

input:checked ~ .phone-text {
    transform: translate(0.9375rem); /* 15px / 16px */
    transition: 1s;
}
    
   
    /*FIN BOUTON PHONE*/

 /*BARRE DE NAV*/

 nav {
    font-family: 'Londrina Shadow';
    display: flex;
    justify-content: space-around;
    padding-top: 0.25rem; /* 4vh / 16px */
    padding-bottom: 1.25rem; /* 4vh / 16px */
    padding-left: 0.25rem; /* 4vw / 16px */
    padding-right: 0.25rem; /* 4vw / 16px */
    background-color: #FFFDFA;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0.375rem 0.375rem 0.375rem 0 #573b305f; /* 6px 6px 6px 0px / 16px */
    font-size: 3em;
}


/*MENU*/


.menu-items{
    display: block;
}


.item-nuage{
    display: flex;
    flex-direction:row;
    box-sizing:border-box;
    color:#573B30;
    height: 6vh; 
    position: relative;
}


.item-nuage span:hover::after{
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    width:100%;
    left: 0vh;
    height: 0.375rem; /* 6px / 16px */
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background: #80AB9A;
    border-radius: 10px;
}


.item-vent{
    display: flex;
    flex-direction:row;
    box-sizing:border-box;
    color:#573B30;
    height: 6vh;
    position: relative;
}


.item-vent span:hover::after{
    content: '';
    display: block;
    position: relative;
    bottom:0;
    width:100%;
    left: 0vh;
    height: 0.375rem; /* 6vh / 16px */
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background: #f1897a;
    border-radius: 10px;
}


.item-soleil{
    display: flex;
    flex-direction:row;
    box-sizing:border-box;
    color:#573B30;
    height: 6vh;
    position: relative;
}


.item-soleil span:hover::after{
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    width:100%;
    left: 0px;
    height: 0.375rem; /* 6px / 16px */
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background: #EED8A5;
    border-radius: 10px;
}


.item-flocon{
    display: flex;
    flex-direction:row;
    box-sizing:border-box;
    color:#573B30;
    height: 6vh;
    position: relative;
}


.item-flocon span:hover::after{
    content: '';
    display: block;
    position: relative;
    bottom: 0;
    width:100%;
    left: 0px;
    height: 0.375rem; /* 6px / 16px */
    transition: 0.25s cubic-bezier(0.72,-0.01, 0.19, 0.92);
    background: #E3D2C2;
    border-radius: 10px;
}


/*SECTION ABOUT*/


.soleil {
    width: 56vh;
    height: auto;
    position: absolute;
    top: 21vh;
    left: -17vw;
    overflow: hidden;
    opacity: 50%;
    background-attachment:fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
   
}


#about{
    margin-top: 1.5625rem; /* 25px / 16px */
 
}


h3 .about-nuage{
    display :flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

#about .h3-icone{
    width: 10vw;
    height: 10vh; 
}


.about-right-box{
    position: relative;
    display: flex;
}


.montesquieu {
    display: inline-block;
    font-size: 3vw;
    padding: 1.25rem; /* 20px / 16px */
    margin-top: 1.875rem; /* 30px / 16px */
    margin-left: 7vw;
    text-align: center;
    font-style: normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
    background-color: transparent;
}

.montesquieu span{
    font-size:2vw ;
    font-style:normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
}


#article-about blockquote {
    line-height: 1.5em;
}

.about-box{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    }


#about::after{
    display: flex;
    content: '';
    width: 54%;
    height: 0.5rem; /* 8px / 16px */
    background-color: rgb(128, 171, 154);
    margin: 20vh auto 0 41vw;
    border-radius: 10px;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */ 
}


#article-about {
    margin-right: 6.25rem; /* 100px / 16px */
    font-size: 1rem; /* 16px / 16px */
    font-weight: 600;
    color: #573B30;
    width: 50vw;
    border: 0.1875rem solid rgb(128, 171, 154); /* 3px / 16px */
    border-radius: 0.9375rem; /* 15px / 16px */
    padding: 0.9375rem; /* 15px / 16px */
    background-color: rgba(128, 171, 154, 0.151);
    line-height: 150%;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}
   
  
#about blockquote{
    width: 40vw;
    font-size:1.5vw ;
    text-align: start;
    font-style:normal;
    font-family: 'Nunito',sans-serif;
    font-weight: 600;
    color: #573B30;
    padding-top: 1.25rem; /* 20px / 16px */
}


.trait {
    height: 0px;
    width: 30vw;
    border: #573B30 solid 0.09375rem; /* 1.5px / 16px */
    background-color: #573B30;
    border-radius: 0.3125rem; /* 5px / 16px */
    margin-left: 6vw;
    margin-top: 0.125rem; /* 2vh / 16px */
    margin-bottom: 0.3125rem; /* 5vh / 16px */
}


p {
    margin: 1.25rem 0; /* 20px / 16px */
}


.rain-background {
    position:absolute;
    width: 26vw;
    height: 140vh;
    top: 80vh;
    left: 21vw;
    opacity: 50%;
    background-image: url(assets/selection-finale/pluie.png);
    background-attachment:fixed;
    background-position: left 25% top ;
    background-repeat: no-repeat;
    background-size:contain;
    z-index: -2;
}


/*SECTION CURSUS*/


#cursus h3{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 1.25rem; /* 20px / 16px */
}


#cursus .h3-icone{
    width: 15vw;
}


.cursus-container{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 0.125rem; /* 2vh / 16px */
}

.cursus-container span {
    font-weight: bold;
    font-size: 1.125rem; /* 18px / 16px */
    margin-top: 1em;
}


.cursus-box{
    display:flex;
    flex-direction: column;

}

.job-box{
    display:flex;
    flex-direction: column;
    margin-left: 6em;
   
}



.graphic{
    /*width: 100vw;*/
    margin:5vh 5vw 5vh 5vw;
    display:flex;
    flex-direction: column;
    justify-content: center;    
    flex-wrap: wrap; /* Ajout pour permettre le repliement sur plusieurs lignes */
}


.ol{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.625rem; /* 10px / 16px */
}


.artistic{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}


.graphic li {
    list-style-type: none;
    padding: 0.625rem; /* 10px / 16px */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}


li img{
    width: 7vw;
}


li span {
    font-size: 1rem; /* 16px / 16px */
    font-style: normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
    padding-top: 0.9375rem; /* 15px / 16px */
}


#overflow-cursus h3 {
    margin: 0.625rem 2.5rem 0 2.5rem; /* 10px 40px 0px 40px / 16px */
}



#overflow-cursus li {
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

#overflow-cursus {
    display: flex;
    flex-direction: row;
    margin: 6em; /* 100px / 16px */
    font-size: 1rem; /* 16px / 16px */
    text-align: start;
    font-style: normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
    border: 0.1875rem solid #f1897a; /* 3px / 16px */
    border-radius: 0.9375rem; /* 15px / 16px */
    padding: 5em; /* 80px / 16px */
    background-color: rgba(233, 154, 144, 0.162);
    line-height: 150%;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}s

.graphic h4{
    padding: 1em 4em;
}


#cursus::after{
    display: flex;
    content: '';
    width: 54%;
    height: 0.5rem; /* 8px / 16px */
    background-color:#f1897a;
    margin: 6em 6em 10em;
    border-radius: 10px;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}

.icon-container{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin: 6em 2em 2em 2em;
    max-width: 100%;
}

.icon-skill {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: 1.5em;
}

.icon-skill img {
    width: auto; 
    height: 6em; 
}

.nuage{
    position: absolute;
    width: 36vw;
    height: auto;
    top: 265vh;
    right: 0;
    overflow-x: hidden;
    opacity: 50%;
}


/* SECTION PORTFOLIO*/


.rain-background-3{
    display: none;
}


#portfolio .h3-icone{
    width:4vw;
    height:auto;
    margin-right: 0.625rem; /* 10px / 16px */
}


.rain-background-2 {
    position:absolute;
    width: 25vw;
    height: 51.25rem;
    left: 74vw;
    opacity: 50%;
    background-image: url(assets/selection-finale/pluie.png);
    background-position: right bottom ;
    background-repeat: no-repeat;
    background-size:contain;
    z-index: 0;
}


#portfolio::after {
    display: flex;
    content: '';
    width: 50vw;
    height: 0.5rem; /* 8px / 16px */
    background-color: #ecc267;
    margin: 8em;
    border-radius: 10px;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}


.overflow-portfolio {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    margin: 6em; /* 145px / 16px */
    border: 0.1875rem solid rgb(240, 212, 151); /* 3px / 16px */
    border-radius: 0.9375rem; /* 15px / 16px */
    padding: 0.3125rem; /* 5px / 16px */
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}

.overflow-portfolio a {
    height: auto;
    width: 30vw;
    max-height: 37.5rem; /* 600px / 16px */
}

.logo-projet{
    display: flex;
    margin: auto;
    align-content: center;
    justify-content: center;
    width: 90%;
    max-height: 90%;
    padding: 5% 5% 5% 5%;  
    align-content: center;
    align-items: center;
}  
 

.projet {
    display: block;
    position: relative;
    min-height: 20em; /* Conversion spécifique non nécessaire, 'em' est relatif à la taille de la police */
    min-width: 21.25rem; /* 340px / 16px */
    border-radius: 10px;
    margin: 1.25rem 1.25rem 4em 1.25rem; /* 20px 20px 4em 20px / 16px */
}

#portfolio a {
    position: relative;
    min-width: 16.875rem; /* 270px / 16px */
    border-radius: 10px;
    margin: 1.25rem; /* 20px / 16px */
    color: #573B30;
}


.mini-icone-soleil {
    position: relative;
    width: 1.25rem; /* 20px / 16px */
    height: 1.25rem; /* 20px / 16px */
}


.projet:hover .projet-box {
    transform: rotateY(180deg);
}


.projet-box{
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    border-radius: 10px;
}  



.projet-front, .projet-back {
    position: absolute;
    display: flex;
    align-content: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: rgb(255, 250, 237);
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    border-radius: 10px;
    border: 0.1875rem solid  #ecc267; /* 3px / 16px */
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b308a; /* 1px 1px 1px 1px / 16px */
}

.projet-back {
    backface-visibility: hidden;
    transform: rotateY(-180deg);
    font-size: 1vw; /* Utilisation de vw, pas besoin de conversion */
}


.lien-projet {
    padding: 0.625rem; /* 10px / 16px */
    width: fit-content;
    width: -moz-fit-content;
    border-radius: 10px;
    background-color: rgb(240, 212, 151);
    color: #573B30;
    height: fit-content;
    height: auto;
}

.cards-list {
    padding: 0 0.9375rem; /* 15px / 16px */
    list-style-type: circle;
    margin-top: 0;
    margin-bottom: 0.625rem; /* 10vh / 16px (approximation, vh to rem conversion might need adjustment) */
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
}



.cards-list li {
    font-size: 0.875rem; /* 14px / 16px */
    list-style-type: none;
    text-decoration: none;
    color: #573B30;
    padding-top: 0.9375rem; /* 15px / 16px */
}


/* SECTION CONTACT*/  


.snow-background{

    position:absolute;
    width: 61vw;
    height:100vh;
    right: 0;
    opacity: 50%;
    background-image: url(assets/selection-finale/neige.png);
    background-attachment:fixed;
    background-position: right bottom ;
    background-repeat: no-repeat;
    background-size:contain;
    z-index: 0;
}


.formulaire {
    height: fit-content;
    border: 0.1875rem solid #573B30; /* 3px / 16px */
    border-radius: 10px;
    margin:6em;
    font-family: 'Londrina Shadow';
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b308a; /* 1px 1px 1px 1px / 16px */
}


.contenu{
    width: 80vw;
    max-width: 100%;
    height: 31.25rem; /* 500px / 16px */
    font-family: 'Nunito',sans-serif;  
    display: flex;
    justify-content:space-around;
    justify-content: flex-start;
    flex-direction: row;
    padding-top: 0;
    margin-top: 0;  
}


#contact h3{
  margin-left: 0;  
}


#contact .h3-icone {
    margin-right: 0.375rem; /* 6px / 16px */
    width: 4vw;
    height: auto;
    margin-left: 2.75rem; /* 44px / 16px */
}

.formulaire h4 {
    font-size: 0.3125rem; /* 5vh / 16px */
    display: flex;
    justify-content: center;
    padding-top: 1.25rem; /* 20px / 16px */
}

.contenu ol {
    margin-top: 0.125rem; /* 2vh / 16px */
}


.contenu li {
    list-style-type: none;
    padding: 1.875rem; /* 30px / 16px */
    font-size: 2vw;
    font-weight: 700;
}

.photo-contact {
    height: 21.875rem; /* 350px / 16px */
    margin: 0 2.5rem 5.5625rem 1.875rem; /* 0px 40px 89px 30px / 16px */
    border-radius: 1.25rem; /* 20px / 16px */
    box-shadow: 0.125rem 0.125rem 0.125rem 0.125rem #573b305e; /* 2px 2px 2px 2px / 16px */
}

.flex-info-contact{
    display:flex;
    flex-direction: row;
}


.lambert::after, .lemail::after, .mobile::after {
    display: flex;
    content: '';
    width: 30%;
    height: 0.25rem; /* 4px / 16px */
    border-radius: 10px;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}


.lemail::after {
    background-color:#ecc267;
}

.mobile::after {
    background-color: #573B30;
}

.malo::after {
    color: #573B30;
    display: flex;
    content: '';
    width: 30%;
    height: 0.25rem; /* 4px / 16px */
    background-color:#5cb793;
    border-radius: 10px;
    box-shadow: 0.0625rem 0.0625rem 0.0625rem 0.0625rem #573b305f; /* 1px 1px 1px 1px / 16px */
}

footer {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    width: 100%;
    height: 6.25rem; /* 100px / 16px */
    background-color: #ecc267;
    margin-bottom: 0;
    position: relative;
    bottom: 0;
    left: 0;
    box-shadow: 1em 0.0625rem 0.25rem 0 #573b308a; /* 1em 1px 0.4em 0 / 16px */
}


footer p {
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    flex-direction: row;
    text-align: start;
    font-style: normal;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    color: #573B30;
    font-size: 1.2vw; /* Utilisation de vw, pas besoin de conversion */
}


.dont-touch-bouton {
    display: flex;
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0.1875rem; /* 3vh / 16px */
    margin-bottom: 1.5rem; /* 24vh / 16px */
    width: 26vw;
    height: 0.5rem; /* 8vh / 16px */
    border-radius: 8%;
}

.dont-touch-bouton span {
    margin: 1.25rem; /* 20px / 16px */
}

.stop{
    display:none;
}



/* FIN VERSION DESKTOP*/
/* DEBUT VERSION MOBILE */

@media only screen and (max-width: 950px) {

    html {
        font-size: 1rem; /* 16px / 16px */
        line-height: 1.2;
    }


    .artistic ol {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0.625rem; /* 10px / 16px */
    }


/* HEADER */


#header {
    background-image:none;
    display: block;
    max-width: 100%;
}


.entete{
    margin: auto;
    Width:80vw;
}


.entete .logo{
    width:24vh;
}


.photo-sophie{
    display: flex;
    margin: auto;
    width:60vw;
    height:auto;
    border-radius: 110px;
}


h1{
    font-size: 12vw;
}


h2{
    font-size:8vw;
}


.junior{
    font-size: 7vw;    
}


blockquote{
    font-size:4vw ;  
}


/* TOP BARRE + MENU BURGER */



nav{
    display:none
}

    

#topbar{
    display: flex;
    flex-direction: column;
    position: sticky;
    justify-content: flex-end;
    width: 100%;
    height: fit-content;
    z-index: 10;
    padding-right: 5vw;
    padding-bottom: 0px;
    align-self: flex-end;
    top: 0;
    background-color: #ddc5bb;
    border-radius : 0px 0px 15px 15px;
    box-shadow: 3px 3px 6px 0px #573b305f;
}



label{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 2.5rem; /* 40px / 16px */
    color: #573B30;  
    cursor: pointer;
    padding: 0%;
    text-align: center;
}
    

#toggle{
    display:none;
}


.menu-burger{
    display:none;
    flex-direction: column;      
}

.menu-burger a {
    color: #573B30;
    text-decoration: none;
    transition: color .1s;
    align-items: center;
    margin: 0.625rem; /* 10px / 16px */
    width: 24vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.625rem; /* 10px / 16px */
}


.menu-burger span{
    color:  #573B30;
    text-decoration: none;
    padding: 5px;
    margin-right: 10px;
    width: fit-content;
    width: -moz-fit-content;
    display : block;
    flex-direction: column;
    justify-content: center;
    font-size: 6vw; 
}


.image{
    width: 3rem; /* 48px / 16px */
}


    
#toggle:checked + .menu-burger {
    display: flex;
    align-items: center;
}

/* ICON BARRE BOTTOM */


.icons-bar {
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    justify-content: space-around;
    box-shadow: 0px -0.1875rem 0.375rem 0px #573b305f; /* 0px -3px 6px 0px / 16px */
    width: 100%;
    height: 5rem; /* 80px / 16px */
    z-index: 1000;
    padding-right: 5vw;
    padding-bottom: 0px;
    align-self: flex-end;
    top: auto;
    background-color: #ddc5bb;
    border-radius: 0px 0px 15px 15px;
}
    

.icon-button{
    display: flex;
    flex-direction:row;
    align-items: center;
}


.fenêtre-ouvrante{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    font-size: 14vw;
    color: #573B30;  
    cursor: pointer;
    padding: 0%;
    text-align: center;
}
 

.icon {
    width: 9vw; /* Utilisation de vw, pas besoin de conversion */
    margin: 1.5rem; /* 24px / 16px */
    left: 7.1875rem; /* 115px / 16px */
    top: 5.625rem; /* 90px / 16px */
    display: flex;
    flex-direction: row;
}


/* SECTION ABOUT MOBILE*/


.about-right-box .soleil{
    display: none;   
}


#about {
    margin-top: 2.1875rem; /* 35px / 16px */
}



.rain-background {
   display: none; 
}  


#about .h3-icone{
    width:15vw;
}


h3 span{
    font-size: 12vw;
}


.contenu {
    display: flex;
    flex-direction: column;
}


.contenu li{ 
    font-size: 4vw; 
}


#about .h3-icone{
    width:22vw;
    height: 8vh;
}


.about-nuage{
    margin-top: 0;
}


.about-box{
   display: block;
   margin-left: 5vw;
   margin-right: auto;
   margin-bottom: 0.9375rem; /* 15vh / 16px */
}


.about-right-box{
    position: relative;
    top:0px;
    display: block;
    margin-left: auto;
    margin-right: auto;
 
}

.job-box{
    display:flex;
    flex-direction: column;
    margin-left: 0em;
    margin-top: 3em;
   
}


#article-about{
    width: 90vw;
    margin-right: auto;

}

#overflow-cursus {

    flex-direction: column;
}



.montesquieu span{
    font-size:4vw ;
}


blockquote::first-letter{
   font-size: 12vw; 
}


#about blockquote{
    display: block;
    font-size:6vw ;
    width: 80vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4vh;
}

#article-about blockquote {
    line-height: 1.5em;
    font-size: 3vw;
}


.montesquieu{
    margin-right: auto;
    margin-left: auto;
    margin-top: 0; 
}


#about::after{
    margin: 6em;
 
}


/* SECTION CURSUS */


#cursus .h3-icone{
    width:30vw;
}


.cursus-box{
    display: block;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}


.nuage{
   display: none;  
}


.rain-background-2 {
    display: none;  
}


.graphic{
 
    display:flex;
    align-content: space-around;
    flex-wrap: wrap;
    margin-bottom: 0;   
}


.artistic{
    display: block;
}

.code{
    display: block
}


li img{
    width: 15vw;
}


.artistic ol {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 0.625rem; /* 10px / 16px */
}


.ol{
    display: block;
}

#overflow-cursus{
    margin: 2em; 
}  


li span {
    font-size: 1rem; /* 16px / 16px */
}

.cards-list li {
    font-size: 0.875rem; /* 14px / 16px */
    list-style-type: none;
    text-decoration: none;
    padding: 1.25rem 0.3125rem 0 0.3125rem; /* 20px 5px 0px 5px / 16px */
}

.icon-skill img {
    width: auto; 
    height: 4em; 
}


/* SECTION PORTFOLIO */


#portfolio .h3-icone{
    width:13vw;
}


.projet-box {
    display: flex;
    flex-wrap: wrap;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    border-radius: 10px;
}


.cards-list ol{
    font-size: 0.75rem; /* 12px / 16px */
    line-height: 1em;
}


.cards-list li{

    line-height: 1em;
}


.overflow-portfolio{
    margin:2em;
}

.cards-list {
    padding: 1.25rem; /* 20px / 16px */

}

.lien-projet {
    padding: 0.375rem; /* 6px / 16px */
    width: 9.375rem; /* 150px / 16px */
    height: 1.875rem; /* 30px / 16px */
}


/* SECTION CONTACT */


#contact .h3-icone{
    width:13vw;
}

.snow-background{
    display: none; 
}


.formulaire{
    display: block;
    height: fit-content;
    margin:2em; 
}


.flex-info-contact{
    display:flex;
    flex-direction: column-reverse;
}


.contenu{
    font-family: 'Nunito',sans-serif;  
    padding-top: 0;
    margin-top: 0;  
}


.formulaire h4 {
    padding: 0.0625rem 0.5rem 0 0.5rem; /* 1vh 8vw 0 8vw / 16px */
    font-size: 2.1875rem; /* 35px / 16px */
    display: block;
}


.contenu ol{
    margin-top: 0vh;
    margin-left: 0vw;
}


.photo-contact {
    width: 12.5rem; /* 200px / 16px */
    height: auto;
    margin: 1.875rem 2.5rem 0 2.25rem; /* 30px 40px 0px 36px / 16px */
}



footer {
    height: fit-content;
    bottom: 5.625rem; /* 90px / 16px */
}

footer p {
    font-size: 1rem; /* 16px / 16px */
}


}


/* FIN VERSION MOBILE */