/*//////////////////////////////////////////////////////////////////
////////////////////////////////BODY////////////////////////////////
//////////////////////////////////////////////////////////////////*/

body{
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 75%, rgba(171, 219, 244, 1) 100%);
    font-family: Raleway;
    font-size: 16px;
    font-color: #121129;
    line-height: 18px;
}


a{
    text-decoration: inherit;
    color: #121129;
}

#body2{
    margin: 3vw;
}

@media screen and (max-width: 60rem) {
    #body2{
        margin: 7vw;
    }
}

#titres{
    font-size: 32px;
    font-weight: 500;
    color: #121129;
}

#espace{
  height: 50px;
}

#espace2{
  height: 25px;
}




#bouton-emplacement {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bouton {
    font-size: 25px;
    font-weight: 500;
    color: #121129;
    padding: 10px 20px;
    border: 1px #e6e6e6 solid;
    border-radius: 2px;
    white-space: nowrap;
    display: inline-block;
}

#bouton:hover{
    font-weight: 600;
}

/*//////////////////////////////////////////////////////////////////
////////////////////////////////HEADER//////////////////////////////
//////////////////////////////////////////////////////////////////*/

#header {
    display: flex;
    justify-content: space-between;
}

.logo-header {
    height: 40px;
    width: auto;
}


/* BURGER */

.burger {
    position: fixed;
    top: 3vw;
    right: 3vw;

    width: 25px;
    height: 25px;

    padding: 0;
    border: 0;
    background: none;

    cursor: pointer;
    z-index: 1001;
}

.burger img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.icon-close {
    display: none;
}

.burger.active .icon-burger {
    display: none;
}

.burger.active .icon-close {
    display: block;
}

/* MENU BURGER */

.menu-burger {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: none;
    align-items: flex-start;
    justify-content: flex-end;

    padding: 2vw calc(3vw + 25px + 15px) 3vw 3vw;

    background: transparent;
}

.menu-burger.active {
    display: flex;
}


/* IMAGES */

.menu-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    width: 210px;
}

.menu-images a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1;
}

.menu-images img:not(.icon-select) {
    display: block;

    width: 80%;
    height: 80%;

    object-fit: cover;
}

/* le SVG de sélection est dimensionné par rapport à toute la case (.menu-images a),
   alors que l'icône ne fait que 80% de cette case : on réduit donc sa taille ici
   pour qu'il entoure l'icône au lieu d'entourer toute la case */
.menu-images a .icon-select{
  width: 112%;
  height: 112%;
}

/* MOBILE */

@media screen and (max-width: 60rem) {


    .burger {
        top: 5vw;
        right: 5vw;
    }

    .menu-burger {
        padding: 4vw calc(5vw + 25px + 15px) 5vw 5vw;
    }

    .menu-images {
        width: 230px;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

/*//////////////////////////////////////////////////////////////////
////////////////////////////////PROJETS/////////////////////////////
//////////////////////////////////////////////////////////////////*/

  :root{
    --gray-15: #e6e6e6;
  /*  --gray-30: #c9c9c9;
    --gray-70: #4a4a4a; */
} 


a:hover{
  font-weight: 600;
}


.list{
    position: relative;
    margin: 30px 0vw 0vw 0vw;
}


  .project{
    position: relative;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 30px 0;
    border-bottom: 1px solid var(--gray-15);
    cursor: pointer;
  }


  .icon{
    position: relative;
    z-index: 3;
    width: 50px;
    height: 50px;
    display: flex;
  }

  /* ---- overlay du SVG de sélection, superposé à l'icône survolée ---- */
  .icon-select{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 4; /* au-dessus de l'icône (z-index: 3) */
  }

  .project.is-hovered .icon-select,
  .illustration.is-hovered .icon-select,
  .exploration.is-hovered .icon-select,
  .menu-images a:hover .icon-select,
  .menu-images a:focus .icon-select{
    opacity: 1;
  }

 /* .icon:hover{
    width: 55px;
    height: 55px;
    transition: ease 0.1s;

  } */

  .titles{
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* occupe tout l'espace horizontal restant de la ligne : l'espace blanc autour du texte fait donc partie de la zone cliquable */
    align-self: stretch; /* occupe toute la hauteur de la ligne (padding compris), même logique en vertical */
  }


  .title{
    font-weight: 500;
    display: flex;
    align-items: center; /* le texte reste centré verticalement dans toute la zone désormais cliquable */
    width: 100%;
    height: 100%;
  }


  /* ---- overlay preview boxes ---- */
  .overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .box{
    position: absolute;
    display: none;
  }

  .overlay.active .box{ display: block; }

  .box-main{
    z-index: 2;
    width: 500px;
    height: auto;
    background-color: var(--gray-70);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-second{
    z-index: 2;
    width: 500px;
    height: auto;
    background-color: var(--gray-30);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-text{
    z-index: 4;
    width: 18vw;
    padding: 12px 14px;
    overflow: hidden;
  }

  /* mobile : la position de chaque cadre est gérée par mobileLayout (JS).
     seul l'encadré texte reste masqué en mobile. */
  @media (max-width: 60rem){
    .box-text{
      display: none !important;
    }

    .box-main{
      width: 315px;
      height: auto;
    }

    .box-second{
      width: 315px;
    }
  }

  .box-text .kicker{
    display: block;
    margin-bottom: 6px;
  }

  
/*//////////////////////////////////////////////////////////////////
//////////////////////////ILLUSTRATIONS/////////////////////////////
//////////////////////////////////////////////////////////////////*/

     .illustration{
    position: relative;
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 30px 0;
    border-bottom: 1px solid var(--gray-15);
    cursor: pointer;
  }


      .box-main-illu{
    z-index: 2;
    width: 1000px;
    height: auto;
    background-color: var(--gray-70);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-second-illu{
    z-index: 2;
    width: 500px;
    height: auto;
    background-color: var(--gray-30);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }


/* MOBILE */

 @media (max-width: 60rem){

    .box-main-illu{
      width: 315px;
      height: auto;
    }

    .box-second-illu{
      width: 315px;
    }
  }


/*//////////////////////////////////////////////////////////////////
//////////////////////////////EXPLORATION///////////////////////////
//////////////////////////////////////////////////////////////////*/

#ds{
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  /*border: 1px dashed green;*/
  position: absolute;
  inset: 0;
  z-index: 3; /* passe au-dessus de .box-main-ds (z-index:2) : l'image de survol se retrouve derrière le 2ds */
}

.explo-row{
  display: flex;
  align-items: flex-start;
}

.ds-wrap{
  position: relative;
  width: 45%;
  aspect-ratio: 2607 / 2601; /* ratio exact de assets/exploration/2ds.png : verrouille la boîte pour que l'image et les zones de survol restent toujours parfaitement alignées, même en redimensionnant la fenêtre */
  margin-top: 30px;
}

@media screen and (max-width: 60rem) {
    .ds-wrap{
        width: 90%;
    }
}

/* miroir des images de survol, affiché à côté du 2ds : caché par défaut
   (comportement mobile inchangé), visible seulement au-dessus de 60rem.
   Positionné en "fixed" -> sort du flux normal, donc il ne peut jamais
   déplacer les autres éléments de la page. On l'affiche seulement au
   survol (classe .active ajoutée en JS), jamais pour le gif par défaut. */
.side-wrap{
  display: none;
}

@media screen and (min-width: 60.0625rem){
  .side-wrap{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    position: relative;
    /* ---- réglages de position : à ajuster ici ---- */
    margin-top: 30px; /* même valeur que .ds-wrap pour un alignement en haut parfait avec le 2ds */
    left: 3vw;
    width: 45vw;
    border-radius: 20px;
    /* ----------------------------------------------- */

    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 10;
  }

  .side-wrap.active{
    opacity: 1;
  }
}

.side-illu{
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
}

#list-explo{
    /* positionné par-dessus l'écran du bas du 2ds.png (mesuré :
       ~23% / 55% / 53% / 40% de la largeur/hauteur de l'image) */
    position: absolute;
    left: 23%;
    top: 55%;
    width: 53%;
    height: 40%;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
   /* border: 2px blue solid;*/
    z-index: 4;
}

  .exploration{
    position: relative;
    flex: 0 0 20%;
    box-sizing: border-box;
    padding: 3%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /*border: 1px red solid;*/
  }

  .icon-e{
    position: relative;
    width: 100%;
    display: flex;
  }

  .icon-e .icon{
    width: 100%;
    height: auto;
    display: block;
  }

  /* .box, .overlay et .overlay.active .box sont déjà définis plus haut
     (section PROJETS) et réutilisés ici tels quels. */

 .box-main-ds,
  .box-second-ds{
    /* calé précisément sur l'écran du haut du 2ds.png (mesuré en pixels
       sur le fichier source : x[423-2160] y[100-1124] sur 2607x2601px) */
    left: 16.23%;
    top: 3.85%;
    width: 66.63%;
    height: 39.37%;
  }

  .box-main-ds{
    z-index: 2;
    background-color: var(--gray-70);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-second-ds{
    z-index: 2;
    background-color: var(--gray-30);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .box-default{
    position: absolute;
    left: 16.23%;
    top: 3.85%;
    width: 66.63%;
    height: 39.37%;
    z-index: 1; /* plus bas que .box-main-ds (z-index:2) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../assets/exploration/logo-ds.gif');
  }


/*//////////////////////////////////////////////////////////////////
/////////////////////////////////FOOTER/////////////////////////////
//////////////////////////////////////////////////////////////////*/



/*DISPLAY GRID : FOOTER INFORMATIONS*/

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 40px;
    width: 90vw;
    height: 250px;
}

.div4 {
    grid-row-start: 2;
    align-content: end;
}

.div5 {
    grid-row-start: 2;
    align-content: end;
}

.div6 {
    grid-row-start: 2;
    align-content: start;
}

/*FOOTER INFORMATIONS : MOBILE VERSION*/


@media screen and (max-width: 60rem) {
  .parent {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(9, 1fr);
    width: 90vw;
    height: 700px;
    
}
    
.div1 {
    grid-column-start: 1;
    grid-row-start: 7;

    height: 30px;
}

.div2 {
    grid-column-start: 1;
    grid-row-start: 4;
    height: 30px;
}

.div3 {
    grid-column-start: 1;
    grid-row-start: 1;
    height: 30px;
}

.div4 {
    grid-column-start: 1;
    grid-row-start: 8;
    align-content: start;
}

.div5 {
    grid-column-start: 1;
    grid-row-start: 5;
    align-content: start;
}

.div6 {
    grid-column-start: 1;
    grid-row-start: 2;
    align-content: start;
    height: 30px;
}
        
  }

.div7 {
    grid-column-start: 1;
    grid-row-start: 3;
}

.div8 {
    grid-column-start: 1;
    grid-row-start: 6;
}

.div9{
    height: 30px;
}



/*//////////////////////////////////////////*/






/*//////////////////////////////////////////*/

/* LISTE CONTACT HORIZONTALE */
#contact-footer {
  display: flex;            /* Aligns items side-by-side */
  list-style: none;         /* Removes default bullet points */
  padding: 0;               /* Removes default left padding */
  margin: 0;                /* Removes default margins */
  gap: 20px;                /* Adds spacing between items */
}

.icon-footer {
  width: 30px;
  height: auto; /* Conserve les proportions d'origine */
}

/*//////////////////////////////////////////*/

/*LOGO FOOTER SANS MARGES*/
#logo-footer{
    width: 100vw;
    height: auto;
    margin: 20px 0px 0px 0px;
}




/*/////////////////////////////////////////////////*/
/*PRESENTATION-PRESENTATION-PRESENTATION-PRESENTATION*/
/*/////////////////////////////////////////////////*/

#presentation{
    font-size: 20px;
    font-weight: 500;
    line-height: 20px;

}


/*#presentation2{
    font-size: 15px;
    font-weight: 500;
    line-height: 15px;
    
}*/

#bloc-presentation{
    width: 45vw;
}

@media screen and (max-width: 60rem) {
#bloc-presentation{
    width: 85%;
}}