/*--------- COULEURS ---------*/

:root {
  --highlight-color: blue; /*couleur de highlight à appeler partout et que l'on peut faire varier localement dans les sections :width:
  .classe {
    --highlight-color: #cc33aa;
  };*/
}

/*
fond : #f1f2f1
faux-noir : #0f0c0c
noir-éclairci : #adadac

*/

/*--------- TITRAGES ---------*/

/* h1{
    font-family: "Wagon Bold";
    margin:0;
    background-color: #161b27;
    color:#d8b1ed;
    font-size: 6em;
} */


@media screen and (max-width: 1024px) {
    
    * {
      box-sizing: border-box; /*Empêche les marges ou bordures d'élargir un élément*/
    }

  /*--------- GENERAL ---------*/

  body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      /* overflow-x: hidden; */
      /* font-family: Arial, Helvetica, sans-serif; */
  }

  html {
    font-family: 'Switzer-Regular', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.2vh; /*taille de base, le reste des fontsize à déf en rem pour se baser sur la taille de celle-ci, ex : 1.5x, 0.7x etc...*/
    /* overflow-x: hidden; */
    /*sur ordi taille de 1.5vh*/
  }


  /*---------  GRILLE  ----------*/


  .container{
      display: grid;
      width:100vw;
      height:100vh;
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: 8% 12% 20% 20% 20% 12% 8%;
      background-color:#f1f2f1; /* bisque;*/
  }

  .cadre{
      /* background-color: #faadde; */
      display: flex;
      
  }

  .bord-haut {
    grid-column: 1 / 8;
    grid-row: 1 / 2;
  }

  .bord-bas {
    grid-column: 1 / 8;
    grid-row: 7 / 8;
  }

  /* .bord-gauche {
    grid-column: 1 / 2;
    grid-row: 2 / 5;
  }

  .bord-droit {
    grid-column: 7 / 8;
    grid-row: 2 / 5;
  } */

  .center-grid{
      display: flex;
      grid-column: 2/7;
      grid-row: 2/7;
      /* background-color: aquamarine; */
  }


  /*--------- ELEMENTS MENU ---------*/


  /* .bloc-accueil{
    display: flex;
    grid-column: 1/3;
    grid-row: 1/2;
    background-color: #ff7b7b;
    align-items: center;
  
  } */

  .logo-menu{
    display: flex;
    grid-column: 1/2;
    grid-row: 1/2;
    aspect-ratio: 1 / 1; 
    height:27.778%;
    background-color:#0f0c0c;
    align-self:center;
    justify-self: center;
  }

  #nom-menu{
  display: flex;
    grid-column: 2/5;
    grid-row: 1/2;
    /* font-size:1.35rem;
      text-transform: uppercase;
    align-self:center;
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif; */
    justify-self: left;
  }

  .elements-menu-haut{
    display: flex;
    font-size:1.35rem;
    text-transform: uppercase;
    align-self:center;
    justify-self: center;
    color: #0f0c0c;
    z-index: 3;
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
  }

  .elements-menu-bas{
    display: flex;
    font-size:1.15rem;
    text-transform: lowercase;
    align-self:center;
    justify-self: center;
    color: #0f0c0c;
    z-index: 3;
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
  }

  #bio-menu{
    grid-column: 5/6;
    grid-row: 1/2;
  }
  #projet-menu{
    grid-column: 6/7;
    grid-row: 1/2;
  }
  #lang-menu{
    grid-column: 7/8;
    grid-row: 1/2;
  }
  #mail-menu{
    grid-column: 1/4;
    grid-row: 7/8;
  }
  #tel-menu{
    grid-column: 3/6;
    grid-row: 7/8;
  }
  #insta-menu{
    grid-column: 5/8;
    grid-row: 7/8;
  }

  .a-menu{
  text-decoration: none;
  color: #0f0c0c;
  }


  /*--------- IMAGES FLOTTANTES ---------*/



  #image-container {
    position: fixed; /* fixe la div par-dessus tout */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* important pour ne pas bloquer les clics en-dessous */
    /* z-index: 9; */
  }


  .floating-image {
    position: absolute;
    max-width: 20vw;
    max-height: 30vh;
    transition: transform 0.2s linear;
    pointer-events: auto;
    z-index: 10;
  }

  .floating-image:hover {
    transform: scale(1.1);
    z-index: 1000;
  }


  /*--------- PAGE MOSAIQUE ---------*/

  .center-grid-mosaique{    /*centre de la grid principale contient une autre grid agencée différemment*/
    display:grid;
    /* display: flex; */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column: 2/7;
    grid-row: 2/7;
    width:100%;
    height:100%;
    padding: 4vh 0;
  }

  .case-mosaique{
  width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
  }

  /* .case-mosaique:hover .img-mosaique {
    transform: scale(1.05);
  } */

  .img-mosaique{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .case1{ grid-column: 1/2; grid-row: 1/2; /* background-color: #faadde; */}
  .case2{ grid-column: 2/3; grid-row: 1/2; /* background-color: #b01e7b; */}
  .case3{ grid-column: 3/4; grid-row: 1/2; /* background-color: #4a0330; */}
  .case4{ grid-column: 1/2; grid-row: 2/3; /* background-color: #6e0d82; */}
  .case5{ grid-column: 2/3; grid-row: 2/3; /* background-color: #251153; */}
  .case6{ grid-column: 3/4; grid-row: 2/3; /* background-color: #0c0ca6; */}
  .case7{ grid-column: 1/2; grid-row: 3/4; /* background-color: #117fc9; */}
  .case8{ grid-column: 2/3; grid-row: 3/4; /* background-color: #2cdad4; */}
  .case9{ grid-column: 3/4; grid-row: 3/4; /* background-color: #65f1a6; */}
 .case10{ grid-column: 1/2; grid-row: 4/5; /* background-color: #48da09; */}
 .case11{ grid-column: 2/3; grid-row: 4/5; /* background-color: #bbc40e; */}
 .case12{ grid-column: 3/4; grid-row: 4/5; /* background-color: #cba81c; */}
 .case13{ grid-column: 1/2; grid-row: 5/6; /* background-color: #e0881d; */}
 .case14{ grid-column: 2/3; grid-row: 5/6; /* background-color: #cd6321; */}
 .case15{ grid-column: 3/4; grid-row: 5/6; /* background-color: #e62813; */}

  /*--------- PAGE PROJETS ---------*/

  .highlight-projet{
    color: var(--highlight-color);
  }

  /* #projet-OffKey{
      --highlight-color: #e01e1e;
    } */

  /* Chaque projet aura une couleur différente pour le highlight. Ici il faut détecter quelle section est affichée à l'écran pour aller chercher la bonne teinte à définir pour le highligh. Il faut un observer comme dans mon mémoire qui observe la section en cours et trouve sa teinte associé, partie à faire en js*/


  /*--- MENU FIXE ---*/

  .container-menu-projets { /*grid de menu de la page projet*/
    display: grid;
    position: absolute; /* pas fixed pour ne pas empêcher les cliques en dessous */
    width: 100vw;
    height: 100vh;
    z-index: 5;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 8% 12% 20% 20% 20% 12% 8%;
    pointer-events: none;
    /* overflow: hidden; */
  }

  .container-menu-projets * {
    pointer-events: auto;  /* Permettre les interactions sur tous les éléments de menu */
  }

  .fleches-sections-projets{
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: 'Switzer-Extralight', 'Helvetica Neue', Arial, sans-serif;
    font-size:2rem;
    border: none;
    background-color: transparent;
    padding:0;
    pointer-events: auto;
    touch-action: manipulation;
    /* cursor: pointer; */
  }

  .fleches-sections-projets:disabled {
    opacity: 0;
    cursor: default;
  }

  .fleches-sections-projets:active {
    color:var(--highlight-color);
    border: none;
    background-color: transparent;
  }

  #fleche-gauche-projets{
    display: none;
  }

  #fleche-droite-projets{
    display: none;
  }

  #fleche-haut-projets{
    display: flex;
    grid-column: 4/5;
    grid-row: 2/3;
    align-self: start;
  }

  #fleche-bas-projets{
    display: flex;
    grid-column: 4/5;
    grid-row: 6/7;
    align-self: end;
  }

  /*--- SECTIONS SCROLLABLES ---*/

  .container-projets{
    display: block;
    flex-direction: column;
    flex-wrap: nowrap;        /* aligne les éléments horizontalement */
                          
  height: 100vh;    
  overflow-y: auto;         
  overflow-x: hidden;            
  scroll-snap-type: y mandatory;  
  scroll-behavior: smooth;

  }

  .grid-projets{ /*grid des diff sections de projet*/
      display: grid;
    flex: 0 0 100vh;          /* hauteur fixe égale à la fenêtre */
    height: 100vh;
    width:100vw;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: 8% 12% 20% 20% 20% 12% 8%;
    background-color: #f1f2f1;
    scroll-snap-align: start;  /* optionnel : aligne proprement au scroll */
  min-height: 100vh;    
  scroll-snap-align: start;
  flex: none;
  }

  .zone-texte-projets{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:0.5rem;
    grid-column: 2/7;
    grid-row: 2/4;
    padding: 0;
    /* padding-right: 40%; */
    width: 80%;
    color: #0f0c0c;
    text-align: left;
    /* background-color: aqua; */
  }

  .titre-projets{
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size:2.25rem;
    margin:0;
  }

  .date-projets{
    font-family: 'Switzer-Extralight', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.4rem;
    margin-bottom: 1.5rem;
  }

  .description-projets{
    font-family: 'Switzer-Regular', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.1rem;
    margin-bottom: 0.5rem;
  }

  .outil-projets{
    font-family: 'Switzer-Regular', 'Helvetica Neue', Arial, sans-serif;
    font-size:0.95rem;
    margin-bottom: 1.5rem;
  }

  .contexte-projets{
    font-family: 'Switzer-Light', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.1rem;
  }

  .collab-projets{
    font-size:0.95rem;
  }

  .sous-titre-projets{
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.25rem;
  }

  .sous-description-projets{
    font-family: 'Switzer-Regular', 'Helvetica Neue', Arial, sans-serif;
    font-size:0.95rem;
    margin-bottom: 0.5rem;
  }

  .liens-externes{
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.1rem;
    text-decoration: underline;
    color: var(--highlight-color);
  }

  .italique{
      font-family: 'Switzer-ExtralightItalic', 'Helvetica Neue', Arial, sans-serif;
  }

  /*--------- SECTION SLIDES IMG --------*/

  .section-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    gap: 4.63vh;
    grid-column: 1/8;
    grid-row: 4/7;
    margin:2vh 0 4vh 0;
    /* margin-left: calc(25% + 4.63vh); */
    background-color: #0f0c0c;
    height: calc(100% - 4vh);
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
  }

  /* Le conteneur global du carrousel */
  .carrousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .scroll-capture {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15; /* supérieur à .focus-frame (z-index: 5) */
    background: transparent;
  }

  /* La "piste" de slides verticales */
  .carrousel-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row; /* Mobile: horizontal */
    height: 100%;
    transition: transform 0.6s ease;
  }

  /* Chaque slide (image) */
  .carrousel-slide {
    width: calc(100vw - 2 * 9.5vw); /* Largeur = largeur de focus-frame */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4vw; /* Espacement horizontal au lieu de vertical */
  margin-bottom: 0;
  margin-left: 0;
  }

  /* Premier slide sans marge gauche */
.carrousel-slide:first-child {
  margin-left: 0;
}

  .carrousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Cadre visuel qui correspond à .img-principale */
  .focus-frame {
    position: absolute;
    margin: 0;
    left: 9.5vw;
    top:0;
    width: calc(100vw - 2 * 9.5vw);
    height: 100%;
    /* height: calc(100% - 4vh); */
    /* height: calc(100vh - 2 * 16.667vh); */
    /* border: 3px solid var(--highlight-color); */
    pointer-events: none;
    z-index: 5;
    /* border: solid 1px red; */
  }

  .previous-frame {
    position: absolute;
    margin: 0;
    left: calc(9.5vw - calc(100vw - 2 * 9.5vw) - 4vw);
    top:0;
    width: calc(100vw - 2 * 9.5vw);
    height: 100%;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    pointer-events: none;
    z-index: 4;
    /* border: solid 1px blue; */
  }

  .next-frame {
    position: absolute;
    margin: 0;
    left: calc(9.5vw + calc(100vw - 2 * 9.5vw) + 4vw);
    top:0;
    width: calc(100vw - 2 * 9.5vw);
    height: 100%;
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    pointer-events: none;
    z-index: 4;
    /* border: solid 1px blue; */
  }

  /* Barre de scroll sur le côté */
  .scroll-indicator {
    position: absolute;
    right: 1vh;
    top: 16.667vh;
    width: 4px;
    height: calc(100% - 2 * 16.667vh);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    z-index: 5;
    overflow: hidden;
  }

  .scroll-indicator::after {
    content: '';
    position: absolute;
    top: var(--scroll-progress, 0px);
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--highlight-color);
    border-radius: 2px;
  }




  /*--------- PAGE BIO ---------*/


  .zone-texte-bio{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    grid-column: 2/7;
    grid-row: 2/7;
    padding: 0;
    height: 100%;
    overflow-y:auto;
    /* position: relative; utile pour un positionnement absolu si jamais tu changes plus tard */
    /*min-height: 0; nouveau : autorise les enfants à shrinker dans le flex */
  }

  .presentation-bio{
    font-size:1.35rem;
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
    color: #0f0c0c;
    margin-right: 20%;
    margin-top:2vh;
  }

  #parcours{
    font-size:1.85rem;
    font-family: 'Switzer-Regular', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: #0f0c0c;
    margin: 0;
  }

  #img-bio{
    display: none;
  }

  #img-bio-mobile{
    width: 100%; /*prévu 60% dans la maquette mais autant avoir un scroll qui vaut le coup, sinon carrément virer l'image*/
    align-self: flex-start;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: auto; /* pousse vers le bas si possible */
  }

  #img-bio-mobile img{
    width: 100%;         /* image limitée à 100% de la largeur du bloc */
    height: auto;        /* conserve le ratio */
    object-fit: contain; /* important */
  }

  /*----- MINI TABLEAU PARCOURS -----*/

  .bloc-liste {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;     /* espacement horizontal entre colonnes */
    row-gap: 1rem;         /* espacement vertical entre paires */
    align-items: start;
    margin-bottom: 2vh;
  }

  .date-parcours {
    text-align: right;
    white-space: nowrap;
    font-size:1.15rem;
    font-family: 'Switzer-Light', 'Helvetica Neue', Arial, sans-serif;
    color: #0f0c0c;
  }

  .formation-parcours {
    text-align: left;
    font-size:1.15rem;
    font-family: 'Switzer-Medium', 'Helvetica Neue', Arial, sans-serif;
    color: #0f0c0c;
  }

  .lieu-formation{
    font-family: 'Switzer-Light', 'Helvetica Neue', Arial, sans-serif;
    color: #0f0c0c;
  }



}



/*--------- PETITE TAILLE D'ECRAN ---------*/


  /*
  
    body { 
    }
  }
  */