html
{
}

@font-face {
    font-family: PPFragment;
    src: url('fonts/PPFragment-SansRegular.ttf');
}

#technic {
    font-family: PPFragment;
    color: black;
}

@font-face {
    font-family: PPGatwick;
    src: url('fonts/PPGatwick-Bold.ttf');
}

#titles {
    font-family: PPGatwick;
    color: black;
}

@font-face {
    font-family: PPEiko-Light;
    src: url('fonts/PPEiko-Light.ttf');
}

#textlang {
    font-family: PPEiko-Light;
    color: black;
}

@font-face {
    font-family: PPGatwick-Regular;
    src: url('fonts/PPGatwick-Regular.ttf');
}

#titleproject {
    font-family: PPGatwick-Regular;
    color: black;
}

a:hover {color: black;}
a { color: black; text-decoration: none !important;}

span {
  content: "\2022";
}

header {
  background-color: #fff;
  text-align: left;
  color: black;
  font-size: 15px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  height: 80px;
  border-bottom: none !important;
  box-shadow: none !important;
}

main {
    margin-top: 0px;
}

.footer {
    background-color: #f7f9fb;
    border-top: solid black 4px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: left;
    font-size: 1em;
    padding: 0.5em;
    padding-top: 1em;
    height: 60px;
}

.point {
    font-size: 10em;
    padding: 0.5em;
}

table
{
}

.point {
    font-size: 10em;
    padding: 0.5em;
}

.table-info
{
display: block;
padding-top: 5em;
padding-left: 6em;
padding-right: 3em;
background-color: #f7f9fb;
}

td, div
{
 transition: background-color 0.7s ease-in-out;
}

.td-info
{
vertical-align: top !important;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 3em;
}

p {
padding-top: 3em;
padding-left: 1em;
padding-right: 0.5em;
text-align: left;
}

h1 {
font-size: 100px;
color: black;
}

img {
  max-width: 100%;
}

button {
    border: none;
    font-size: 1.5em;
    padding-bottom: -10px;
    padding-right: 20px;
    width: relative;
    cursor: pointer;
}

span {
  border: 2px solid #4F5D75;
  padding: 10px;
}

html{
  font-size: 0.8em;
}

.hidder {
        width: 100%;
      }

/* Hide the columns that are not important */
@media screen and (max-width:1000px) {
          display: none;
        }

        p {
padding-top: 2em;
padding-bottom: 0em;
padding-right: 0.1em;
text-align: left;
font-size: 1em;
}

.td-1 {
padding-bottom: 1em;
text-align: left;
font-size: 1em;
}

      }

@media screen and (max-width:900px) {
      .art {
          display: none;
        }
      }

           @media screen and (max-width:500px) {
 .th-1  {
          display: none;
        }
      }

      @media screen and (max-width:500px) {
 .table{
    font-size: 1em;
  }
}

      @media screen and (max-width:500px) {
 .table{
    font-size: 1em;
  }
}

  @media screen and (max-width:800px) {
     header
{
  font-size: 0.8em;
  height: 55px;
 }

main
{
margin-top: 1px;
      }
 }

/* Smartphone  */
  @media screen and (max-width:500px) {
main
{
margin-top: 45px;
}

.table-info
        {
padding-left: 4.8em;
text-align: justify;
padding-right: 6em;
         }

p {
padding-top: 2em;
padding-bottom: 0em;
padding-right: 0.1em;
text-align: left;
font-size: 1em;
}

.td-1 {
margin-bottom: 4em;
text-align: left;
font-size: 1em;
}

h4 {
  padding-bottom: 0.75em;
}

header
{
  font-size: 0.75em;
  height: 50px;
 }

.td-2 {
padding: 0.1em !important;
}
  }

  @media screen and (max-width:400px) {
header
{
  font-size: 0.6em;
    height: 20px;
 }

 main
{
margin-top: 40px !important;
      }

h4
{
  padding-left: 1em;
   }
  }

/* Responsive Nav */

.topnav {
  overflow: hidden;
  background-color: #f7f9fb;
}

.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: left;
  padding-right: 0em;
  padding-left: 3.7em;
  text-decoration: none;
  font-size: 22.2px;
}
.topnav a:hover {
  color: black;
    cursor: pointer;
}

.topnav a.active {
  color: white;
}

.topnav .icon {
  display: none;
}

/* Layout Styling */

#container {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 150px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

/* Button Styles */

.buttonstyle {
  display: inline-flex;
  height: 40px;
  width: 100%;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
}

/* First Button */

#arrow-hover {
  width: 15px;
  height: 10px;
  position: absolute;
  transform: translateX(60px);
  opacity: 0;
  -webkit-transition: all .25s cubic-bezier(.14, .59, 1, 1.01);
  transition: all .15s cubic-bezier(.14, .59, 1, 1.01);
  margin: 0;
  padding: 0 5px;
}

a#button-1:hover img {
  width: 15px;
  opacity: 1;
  transform: translateX(50px);
}

/* Second Button */

#button-2 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-2 a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -100%;
  background: black;
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#button-2:hover #slide {
  left: 0;
}

#button-2:hover a {
  color: white;
}

@media screen and (min-width:1000px) {
  h1 {
    font-size: 3em;
  }
  #container {
    width: 30%;
  }

  #infotech {
padding-right:6em;
padding-bottom: 1em;
padding-left:5.7em;
color:black;
}

#textdescription {
padding-right:6em;
padding-bottom: 5em;
padding-left:5.7em;
color:black;
}
}

#textdescription {
padding-right:6em;
padding-bottom: 5em;
padding-left:5.7em;
color:black;
}

#back2Top {
    width: 45px;
    line-height:40px;
    overflow: hidden;
    z-index: 999;
    display: none;
    cursor: pointer;
    border: 2px solid black;
    position: fixed;
    bottom: 25px;
    left: 25px;
    background-color: #f7f9fb;
    text-align: center;
    font-size: 22px;
    text-decoration: none;
}
#back2Top:hover {
    background-color: #f7f9fb;
    color: #000;
}

#infotech {
padding-right:6em;
padding-left:5.7em;
padding-bottom:1.5em;
color:black;
}

#textdescription {
padding-top: 3em;
padding-right:6em;
padding-left:2em;
padding-bottom: 6em;
color:black;
}

.ball {
  background: white;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
    cursor: crosshair;
}

.balll {
  background: white;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
}

.col-1 {width: 50%;}
.col-2 {width: 50%;}
.col-3 {width: 20%;}
.col-4 {width: 33.33333%;}
.col-5 {width: 33.33333%;}
.col-6 {width: 33.33333%; }
.col-7 {width: 50%; margin-right: 2px;}
.col-8 {width: 50%; margin-left: 2px;}
.col-9 {width: 100%;}
.col-10 {width: 66.66666%;}

* {box-sizing: border-box; margin: 0; padding: 0;}
.row {display: flex;}
.column { width: 50%;}
.row:after {content: ""; display: table; clear: both;}
.gallery-block {
      width: 100vw;
      max-width: 100%;
      margin-bottom: 0.25em;
    }
    .photo-full {
      width: 100%;
      display: block;
      aspect-ratio: 16/9;
      object-fit: cover;
      margin-bottom: 0.25em;
      box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    }
    .row-3 {
      display: flex;
      gap: 0.25em;
      margin-bottom: 0.25em;
    }
    .row-3 .photo-paysage {
      flex: 1.2;
      aspect-ratio: 16/11;
      object-fit: cover;
      box-shadow: 0 1px 5px rgba(0,0,0,0.04);
      width: 0;
    }
    .row-3 .photo-portrait {
      flex: 0.8;
      aspect-ratio: 9/14;
      object-fit: cover;
      box-shadow: 0 1px 5px rgba(0,0,0,0.04);
      width: 0;
    }
    @media (max-width: 800px) {
      .photo-full { aspect-ratio: 16/10; }
      .row-3 .photo-paysage { aspect-ratio: 16/12; }
      .row-3 .photo-portrait { aspect-ratio: 9/16; }
    }
    @media (max-width: 600px) {
      .row-3 {
        flex-direction: column;
        gap: 0.25em;
      }
      .row-3 img {
        width: 100% !important;
        aspect-ratio: auto;
        height: auto;
      }
      .photo-full {
        aspect-ratio: 16/10;
      }
      .row-3 .photo-paysage, .row-3 .photo-portrait {
        height: 170px;
        aspect-ratio: auto;
      }
    }

.project-titles {
  min-height: calc(100vh - 15px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding-right: 10vw;
  padding-top: 10.5vw;
  gap: 0.1em;
  font-size: 1.1em;
}

.project-titles a {
  font-family: PPGatwick, sans-serif;
  color: black;
  text-decoration: none;
  font-size: 1.5em;
  font-weight: normal;
  transition: color 0.2s;
}

/* Fallback IE11 : ajout d'une marge pour de l'espacement si gap n'est pas compris */
.project-titles a:not(:last-child) {
  margin-bottom: 0.7em;
}

/* Responsive : réadapte font size et padding */

@media (max-width:3000px) {
  .project-titles {
    padding-bottom: 5vw;
    padding-right: 10vw;
    padding-top: 12vw;
    gap: 0.7em;
  }
  .project-titles a {
    font-size: 1.1em;
  }
}

@media (max-width: 1200px) {
  .project-titles {
    padding-bottom: 17.5vw;
    padding-right: 10vw;
    padding-top: 17.5vw;
    gap: 0.7em;
  }
  .project-titles a {
    font-size: 1.1em;
  }
}

@media (max-width:1000px) {
  .project-titles {
    padding-bottom: 10vw;
    padding-right: 10vw;
    padding-top: 20vw;
    gap: 0.7em;
  }
  .project-titles a {
    font-size: 1.1em;
  }
}

@media (max-width:800px) {
  .project-titles {
    padding-bottom: 20vw;
    padding-right: 10vw;
    padding-top: 25vw;
    gap: 0.7em;
  }
  .project-titles a {
    font-size: 1.1em;
  }
}

@media (max-width:500px) {
  .project-titles {
    padding-right: 10vw;
    padding-top: 20vw;
    gap: 0.6em;
  }
  .project-titles a {
    font-size: 1em;
  }
}

@media (max-width:400px) {
  .project-titles {
    padding-right: 10vw;
    padding-top: 15vw;
    gap: 0.4em;
  }
  .project-titles a {
    font-size: 1em;
  }
}



@media screen and (max-width: 1200px) {
  .topnav a {
    font-size: 22px;
  }
}

@media screen and (max-width: 1000px) {
  .topnav a {
    font-size: 22px;
  }
}

@media screen and (max-width: 800px) {
  .topnav a {
    font-size: 22px;
  }
}

@media screen and (max-width: 600px) {
  .topnav a {
    font-size: 19px;
  }
}

@media screen and (max-width: 400px) {
  .topnav a {
    font-size: 16px;
  }
}


@media screen and (max-width: 600px) {
  title {
    width: 100%;
    text-align: center;
  }

}