/*--------- TYPOS ---------*/

@font-face {
  font-family: 'Switzer-Thin';
  src: url('asset/font/Switzer/Switzer-Thin.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Thin.woff') format('woff');
  font-weight: 100;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-ThinItalic';
  src: url('asset/font/Switzer/Switzer-ThinItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Extralight';
  src: url('asset/font/Switzer/Switzer-Extralight.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Extralight.woff') format('woff');
  font-weight: 200;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-ExtralightItalic';
  src: url('asset/font/Switzer/Switzer-ExtralightItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-ExtralightItalic.woff') format('woff');
  font-weight: 200;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Light';
  src: url('asset/font/Switzer/Switzer-Light.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Light.woff') format('woff');
  font-weight: 300;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-LightItalic';
  src: url('asset/font/Switzer/Switzer-LightItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-LightItalic.woff') format('woff');
  font-weight: 300;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Regular';
  src: url('asset/font/Switzer/Switzer-Regular.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Regular.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-Italic';
  src: url('asset/font/Switzer/Switzer-Italic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Italic.woff') format('woff');
  font-weight: 400;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Medium';
  src: url('asset/font/Switzer/Switzer-Medium.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-MediumItalic';
  src: url('asset/font/Switzer/Switzer-MediumItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Semibold';
  src: url('asset/font/Switzer/Switzer-Semibold.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Semibold.woff') format('woff');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-SemiboldItalic';
  src: url('asset/font/Switzer/Switzer-SemiboldItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-SemiboldItalic.woff') format('woff');
  font-weight: 600;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Bold';
  src: url('asset/font/Switzer/Switzer-Bold.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Bold.woff') format('woff');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-BoldItalic';
  src: url('asset/font/Switzer/Switzer-BoldItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Extrabold';
  src: url('asset/font/Switzer/Switzer-Extrabold.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Extrabold.woff') format('woff');
  font-weight: 800;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-ExtraboldItalic';
  src: url('asset/font/Switzer/Switzer-ExtraboldItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-ExtraboldItalic.woff') format('woff');
  font-weight: 800;
  font-display: swap;
  font-style: italic;
}
@font-face {
  font-family: 'Switzer-Black';
  src: url('asset/font/Switzer/Switzer-Black.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-Black.woff') format('woff');
  font-weight: 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-BlackItalic';
  src: url('asset/font/Switzer/Switzer-BlackItalic.woff2') format('woff2'),
       url('asset/font/Switzer/Switzer-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-display: swap;
  font-style: italic;
}

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

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


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


.container{
    display: grid;
    width:100vw;
    height:100vh;
    grid-template-columns: 9.375vw repeat(5, 1fr) 9.375vw;
    grid-template-rows: 16.667vh repeat(3, 1fr) 16.667vh;
    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: 5 / 6;
}

.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/5;
    /* 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/3;
  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: 2/3;
  grid-row: 5/6;
}
#tel-menu{
  grid-column: 4/5;
  grid-row: 5/6;
}
#insta-menu{
  grid-column: 6/7;
  grid-row: 5/6;
}

.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(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column: 2/7;
    grid-row: 2/5;
    width:100%;
    height:100%;
  }

.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: 4/5; grid-row: 1/2; /* background-color: #6e0d82; */}
  .case5{ grid-column: 5/6; grid-row: 1/2; /* background-color: #251153; */}
  .case6{ grid-column: 1/2; grid-row: 2/3; /* background-color: #0c0ca6; */}
  .case7{ grid-column: 2/3; grid-row: 2/3; /* background-color: #117fc9; */}
  .case8{ grid-column: 3/4; grid-row: 2/3; /* background-color: #2cdad4; */}
  .case9{ grid-column: 4/5; grid-row: 2/3; /* background-color: #65f1a6; */}
 .case10{ grid-column: 5/6; grid-row: 2/3; /* background-color: #48da09; */}
 .case11{ grid-column: 1/2; grid-row: 3/4; /* background-color: #bbc40e; */}
 .case12{ grid-column: 2/3; grid-row: 3/4; /* background-color: #cba81c; */}
 .case13{ grid-column: 3/4; grid-row: 3/4; /* background-color: #e0881d; */}
 .case14{ grid-column: 4/5; grid-row: 3/4; /* background-color: #cd6321; */}
 .case15{ grid-column: 5/6; grid-row: 3/4; /* 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: 9.375vw repeat(5, 1fr) 9.375vw;
  grid-template-rows: 16.667vh repeat(3, 1fr) 16.667vh;
  /* overflow: hidden; */
}

.fleches-sections-projets{
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Switzer-Extralight', 'Helvetica Neue', Arial, sans-serif;
  font-size:4rem;
  border: none;
  background-color: transparent;
}

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

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

#fleche-gauche-projets{
  grid-column: 1/2;
  grid-row: 3/4;
}

#fleche-droite-projets{
  grid-column: 7/8;
  grid-row: 3/4;
}

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

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

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

.container-projets{
  display: flex;
  flex-wrap: nowrap;        /* aligne les éléments horizontalement */
  overflow-x: auto;         /* active le scroll horizontal */
  /*overflow-y: hidden;        empêche le scroll vertical (si voulu) */
  scroll-snap-type: x mandatory; /* optionnel : scroll fluide par section */
  scroll-behavior: smooth;
    /* position: relative; */

}

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

.zone-texte-projets{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap:0.5rem;
  grid-column: 2/4;
  grid-row: 2/5;
  padding: 0;
  padding-right: calc(25% + 4.63vh);
  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: calc(100% - (4.63vh * 2));
  gap: 4.63vh;
  grid-column: 4/7;
  grid-row: 1/6;
  margin: 0 4.63vh;
  /* margin-right: 4.63vh;
  margin-left: calc(25% + 4.63vh); */
  background-color: #0f0c0c;
  height: 100%;
  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: 16.667vh; /* même position que focus-frame */
  left: 0;
  width: 100%;
  height: calc(100% - 2 * 16.667vh);
  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: column;
  width: 100%;
  transition: transform 0.6s ease;
}

/* Chaque slide (image) */
.carrousel-slide {
  width: 100%;
  height: calc(100vh - 2 * 16.667vh); /* même taille que focus-frame */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 4.63vh; /* espacement entre les images */
}

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

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

.previous-frame {
  position: absolute;
  top: calc(16.667vh - (100vh - 2 * 16.667vh) - 4.63vh); /* focus-frame - hauteur frame - gap */
  left: 0;
  width: 100%;
  height: calc(100vh - 2 * 16.667vh);
  /* border: 2px solid rgba(255, 255, 255, 0.3); */
  pointer-events: none;
  z-index: 4;
}

.next-frame {
  position: absolute;
  top: calc(16.667vh + (100vh - 2 * 16.667vh) + 4.63vh); /* focus-frame + hauteur frame + gap */
  left: 0;
  width: 100%;
  height: calc(100vh - 2 * 16.667vh);
  /* border: 2px solid rgba(255, 255, 255, 0.3); */
  pointer-events: none;
  z-index: 4;
}

/* 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/4;
  grid-row: 2/5;
  padding: 4.6vh 0 4.63vh 4.63vh;
}

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

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

#img-bio-mobile{
  display: none;
}

#img-bio{
  grid-column: 4/7;
  grid-row: 2/5;
}

#img-bio img{
  box-sizing: border-box;
  align-self:center;
  justify-self: center;
  width: 100%;
  height: 100%;
  padding: 4.63vh 4.63vh 4.63vh 8.125vw;
  object-fit: cover;
}

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

.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 ---------*/


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