/* afficher des contour rouge sur tout les div (sup les com= active) */
div {
/*border: 0.2px solid red;*/
}


/* général */
body {
  font-weight: normal;
  background-color: white;
  text-decoration:none;
  margin: 0px;
  letter-spacing: -0.05em;
}


/* Importation des polices personnalisées */

@font-face {
  font-family: 'Handjet-Regular';
  src: url('fonts/Handjet-Regular.woff2') format('woff2'),
       url('fonts/Handjet-Regular.woff') format('woff'),
       url('fonts/Handjet-Regular.tff') format('truetype');
}

@font-face {
  font-family: 'RobotoMono-Regular';
  src: url('fonts/RobotoMono-Regular.woff2') format('woff2'),
       url('fonts/RobotoMono-Regular.woff') format('woff'),
       url('fonts/RobotoMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'helvetica-Regular';
  src: url('fonts/helvetica-Regular.woff2') format('woff2'),
       url('fonts/helvetica-Regular.woff') format('woff'),
       url('fonts/helvetica-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'MunkenSans-Bold';
  src: url('fonts/MunkenSans-Bold.woff2') format('woff2'),
       url('fonts/MunkenSans-Bold.woff') format('woff'),
       url('fonts/MunkenSans-Bold.ttf') format('truetype');
}


/* gros titre */
h1 {
  font-weight: normal;
  margin: 5px;
  color: white;
  font-size: 35px;
  padding: 5px;
  line-height: 1.1;
  font-family: 'Handjet-Bold', sans-serif;
}


/* sous-titre */
h2 {
  font-weight: normal;
  margin: 5px;
  color: #0e1831;
  font-size: 33px;
  line-height: 1.1;
  font-family: 'MunkenSans-Regular', sans-serif;
  font-weight: bold;
}

h3 {
  margin: 5px;
  color: #b5d72e;
  font-size: 17px;
  font-family: 'helvetica-Bold', sans-serif;
}

.projet{
  font-weight: normal;
  margin: 5px;
  color: #0e1831;
  font-size: 33px;
  line-height: 1.1;
  font-family: 'MunkenSans-Regular', sans-serif;
  font-weight: bold;
}  

hr{
width: 100%;
height: 1.3px;
background-color: black;
}
           

/* paragraphe */
p {
  font-size: 15px;
}


/* liens */
a{
    color: #0e1831;
    font-weight: normal;
    text-decoration: none;
    font-weight: bolder;
}

/* liens au survol */
a:hover {
  color:#b5d72e;
}

header {
  
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;;
  top: 0px;
  margin-bottom: 8px;
  background-color: #0e1831;

}


/* image */
img{
  width: 100%; /* elle ne depasse pas l'écran */
  height: auto;
}



/* video */
video{
  width: 100%; /* elle ne depasse pas l'écran */
  height: auto;
}


.coordonnees{
 margin-block: 23px;
 font-family: 'helvetica-Bold', sans-serif;  
 font-weight: bold;
 font-size: 13px;
 line-height: 1.2;
 color: #0e1831;
}


.images_blender{
  display: grid;
  grid-template-columns: 3.18fr 2.1fr;
  gap: 15px;
  margin-bottom: 5px;
}


/* XXXXXXXXXXXXXXXXXXX   Grille Responsive mobile first   XXXXXXXXXXXXXXXXXX */

    @media screen and (max-width: 480px) {
  /* Styles pour les téléphones */
   }

.wrapper_header {
    width: 100%;
    display: grid;
    grid-template-columns: 10fr auto;
    grid-template-rows: auto auto;   /* deux lignes */
    justify-content: space-between;
}


.left_part{
  grid-column: 1;
  grid-row: 1;
}

.center_part{
  grid-column: 1;
  grid-row: 2;
}

.right_part{
  grid-column: 1;
  grid-row: 1 / span 2; /* reste sur la hauteur du bloc de gauche */
    display: flex;
    flex-direction: row;
    gap: 0.3px;
    justify-content: flex-end;
}



h1 {
  font-weight: normal;
  margin: 5px;
  color: white;
  font-size: 25px;
  line-height: 0.5;
  font-family: 'Handjet-Regular', sans-serif;
 }

h2 {
  font-weight: bold;
  margin: 5px;
  margin-top: 0px;
  color: #0e1831;
  font-size: 31px;
  line-height: 1.1;
  font-family: 'helvetica-Bold', sans-serif;
}

h3 {
  margin: 5px;
  margin-top: 10px;
  color: #b5d72e;
  font-size: 18px;
  font-family: 'MunkenSans-Regular', serif;
}

.projet{
font-weight: normal;
margin: 5px;
margin-top: 13px;
color: #0e1831;
font-size: 33px;
line-height: 1.1;
font-family: 'MunkenSans-Regular', sans-serif;
font-weight: bold;
}



/* container général smartphone*/
.wrapper_graphisme{
  width: 100%;  /* au lieu de width: 900px */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-top: -19px;
} 

 .texte_courant{
   margin-block: 13px;
   font-family: helvetica-Regular, sans-serif;
   font-size: 18px;
   line-height: 1.2;
   margin-left: 10px;
   margin-right: 10px;
   text-align: justify;
}


.wrapper_photo{

    @media screen and (max-width: 480px) {
  /* Styles pour les téléphones */

    font-size: 1.5rem;
  }

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
 
    width: 100%;  /* au lieu de width: 900px */
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 6px;
    margin-bottom: 35px;
}


.presentation_photo{

    @media screen and (max-width: 480px) {
  /* Styles pour les téléphones */

    font-size: 1.5rem;
  }


  font-size: 19px;
  font-family: helvetica-Regular, sans-serif;
  line-height: 1.2;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
  text-align: justify;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}


.titres_photo{
  margin-top: -25px;
  margin-bottom: -3px;
  color: #0e1831;
  font-weight: bold;
  font-family: 'MunkenSans-Regular', sans-serif;
  font-size: 23px;
  margin-left: 10px;
}



.wrapper_about {

  @media screen and (max-width: 480px) {
  /* Styles pour les téléphones */

    font-size: 1.5rem;
  }  

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  width: 100%;  /* au lieu de width: 900px */
  margin-top: 20px; 
  display: grid;
  margin-top: -10px;
}


.infos{
  margin-block: 0px;
  font-family: helvetica-Regular, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 7px;
  text-align: justify;
}


 hr{
  width: 100%;
  height: 1.3px;
  background-color: black;
  margin-top: -30px;
  margin-bottom: 30px;
 }


.autoportrait{

      @media screen and (max-width: 480px) {
  /* Styles pour les téléphones */

    font-size: 1.5rem;
  }
   margin-bottom: 10px;
   margin-right: 10px;
}



.images_blender{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 5px;
}

.coordonnees{
 margin-left: 10px;
 font-family: helvetica-Bold, sans-serif; 
 font-weight: bold;
 font-size: 13px;
 line-height: 1.2;
 color: #0e1831;
}

/* si l'écran fait plus de 1000 px de large (écran d'ordinateur) alors : */
@media only screen and (min-width: 1000px) {



        .wrapper_header{
            width: 100%;
            display: flex;
            flex-wrap: wrap;
        }


        .right_part{
          display: flex;
          text-align: right;
        }
        
        .center_part{
          display: flex;
          text-align: center;
        }


        .left_part{
          text-align: left;
          display:flex;
        }


        h1 {
        font-weight: normal;
        margin: 5px;
        color: white;
        font-size: 35px;
        padding: 5px;
        line-height: 1.1;
        font-family: 'Handjet-Regular', sans-serif;
        }


        h2 {
        font-weight: bold;
        margin: 5px;
        color: #0e1831;
        font-size: 33px;
        line-height: 1.1;
        font-family: 'helvetica-Bold', sans-serif;
        }


        h3 {
        margin: 5px;
        color: #b5d72e;
        font-size: 19px;
        font-family: 'MunkenSans-Regular', sans-serif;
        }


        .projet{
        font-weight: normal;
        margin: 5px;
        color: #0e1831;
        font-size: 33px;
        line-height: 1.1;
        font-family: 'MunkenSans-Regular', sans-serif;
        font-weight: bold;
        }


        .wrapper_graphisme{
            display: grid;
            grid-template-columns: 1fr 2fr;
            margin-top: -8px;
            gap: 10px;
        }

        
         .texte_courant{
          margin-block: 13px;
          font-family: helvetica-Regular, sans-serif;
          font-size: 19px;
          line-height: 1.2;
          margin-left: 10px;
          margin-right: 10px;
          text-align: justify;
        }


         .titres_photo{
          margin-bottom: -45px;
          margin-top: 0px;
          color: #0e1831;
          font-weight: bold;
          font-family: 'MunkenSans-Regular' sans-serif;
          font-size: 33px;
          margin-left: 10px;
          }


        .wrapper_photo{
           display: grid;
           gap: 25px;
           padding-top: 41px;
           grid-template-columns: 1fr 1fr 1fr;
        }


           hr{
           width: 100%;
           height: 1.3px;
           background-color: black;
           margin-bottom: 7.3px;
           margin-top: -40px;
           }


         .presentation_photo{
          font-size: 27px;
          font-family: helvetica-Regular, sans-serif;
          line-height: 1.2;
          margin-left: 0px;
          margin-right: 10px;
          margin-top: -9px;
          text-align: justify;
          gap: 13px;
          display: grid;
          grid-template-columns: 1.17fr 2.23fr;
         }


        .wrapper_about {
          display: grid;
          grid-template-columns: 4fr 1fr;

        .autoportrait{
          margin-bottom: 10px;
        }
        }


        .infos{
          margin-block: 13px;
          font-family: helvetica-Regular, sans-serif;
          font-size: 25px;
          line-height: 1.2;
          margin-left: 10px;
          margin-right: 10px;
          text-align: justify;
        }


        .coordonnees{
          margin-block: 0px;
          padding-left: 3px;
          font-family: helvetica-Bold, sans-serif;
          font-weight: bold;
          font-size: 17px;
          line-height: 1.2;
          color: #0e1831;
        }


        .images_blender{
          display: grid;
          grid-template-columns: 3.18fr 2.1fr;
          gap: 15px;
          margin-bottom: 5px;
        }