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

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;
}

a:hover{
  font-weight: 600;
}

#body2{
  margin: 3vw;
}

@media screen and (max-width: 60rem) {
    #body2{
        margin: 5vw;
    }
}
/*TITRES*/
#titres{
    font-size: 32px;
    font-weight: 500;
    color: #121129;
}

#espace{
  height: 50px;
}

/*//////////////////////////////////////////////////////////////////
////////////////////////////////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;
    }
}


/*//////////////////////////////////////////////////////////////////
///////////////////////////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 et .overlay : nécessaires ici (contrairement à index.html, cette
     page ne contient pas la section PROJETS où ces règles sont normalement
     définies dans style-index.css) */

  .overlay{
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

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

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

 .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;
}


/* ---- 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;
  }