/* -------------------- IMPORT FONTS -------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tienne:wght@400;700&display=swap');

/* -------------------- BASE -------------------- */
body {
  font-family: "Manrope", sans-serif;
  margin: 0;
  padding: 0;
  color: #222;
  background: #fcfbfe;
  line-height: 1.8;
}

/* padding pages internes uniquement */

b, strong { font-weight: 600; }

header {
  text-align: padding-left;
  padding-left: 4rem;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000; /* passe au-dessus du contenu */
  box-shadow: 0 1px 10px #e5e6e8;
  color: black;
}

header img { max-height: 6rem; }

.about {
  padding: 4rem 4rem 4rem 6rem;
}


.about p {font-size: 1.5rem; line-height: 1.8;}

h1 { font-size: 2.5rem; margin: 0rem;}
h2 { font-size: 1.7rem; margin-top: 2rem; display: inline-block; }
h3 { font-size: 1.3rem; font-weight: 600; }


.container {
  display: grid;
  grid-template-columns: 1fr 2.5fr; /* 1/3 - 2/3 */
    height: calc(100vh - 80px); /* 80px ≈ hauteur du header */
}

.col-gauche {
  background: #fcfbfe;      /* blanc */
  box-sizing: border-box;/* le padding ne casse pas la largeur */
  margin: 0;             /* aucune marge */
}

.col-droite {
  background: #ffffff;      /* blanc */
  box-sizing: border-box;/* le padding ne casse pas la largeur */
  padding: 4rem 0rem; /* padding-top/bottom = 4rem, gauche/droite = 0rem */
  margin: 0;             /* aucune marge */
  overflow-y: auto;
}

.col-gauche,
.col-droite {
  min-height: 0;
}

.col-droite h1 {
  padding-left: 4rem;
}

.projects {
  display: flex;        /* deux colonnes côte à côte */
  padding: 0 4rem 2rem 4rem ;
  gap: 2rem;
}

.projects .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2rem;            /* espace vertical entre projets */
}


.project {
  padding-left: 6rem;
  max-width: 60%;
  font-size:1.3rem;
}

.project img {
max-width: 100%;
}

.col-droite img {
  max-width: 100%;
}

.hobbies {
  padding:4rem;
}

.infos {
  color:grey;
  font-size: 1.2rem;
}

.projects a {
  font-size: 1.2rem;
}

.project a {
  font-size: 1.2rem;
}



/*-------- GRID PROJECT HEADER -------------*/

.project-header {
  column-gap: 1rem;
  align-items: center;
  padding-top:1.7rem;
  padding-bottom:2rem;
}

.project-header p {
  margin: 0;
  color:grey;
  font-size: 1rem;

}

.project-header h3 {
  margin: 0;
  font-size:1.2rem;
}

.full-width-section {
  margin-top: 2rem;   /* augmente l’espace depuis les colonnes */
  padding: 4rem 4rem; /* réduit le padding interne (avant/après items) */
}

.project img {
  width: 100%;
}

.project-item {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}


.project-item img {
  width: 100%;
  height: auto;
  display: block;
}


/*------------ FLOATING BUTTON IMG---------------- */

.image-wrapper {
  position: relative;
  display: inline-block; /* ou block selon ton layout */
}

.floating-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centre horizontal + vertical */
  
  background: #7D61FC;
  color: #ffffff;

  padding: 0.7rem 1.2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;

  transition: transform 0.2s ease, background 0.2s ease;
}

.floating-btn:hover {
  background: #AA98FF;
  transform: translate(-50%, -50%) translateY(-2px);
}

.image-wrapper .floating-btn {
  color: #ffffff !important;
}

/*----- BUTTON HEADER -------*/

.site-header {
  display: flex;
  align-items: center;        /* alignement vertical */
  justify-content: space-between; /* logo à gauche, bouton à droite */

  padding: 0rem 4rem;
  background: #ffffff;
  box-shadow: 0 1px 10px #e5e6e8;
}

/* bouton */
.header-btn {
  background-color: black;
  color: white;
  text-decoration: none;

  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}

.header-btn:hover {
  background-color: #AA98FF;
  color:white;
}

.header-btn:visited,
.header-btn:active,
.header-btn:focus {
  color: white;
}







/* -------- RETRAIT MARGES INUTILES SUR FIGURE, TITRES ET LIENS ------------- */

.projects figure,
.projects img,
.projects figure h4 {
  margin: 0;      /* supprime tous les écarts par défaut */
  padding: 0;     /* supprime le padding éventuel */
}

.projects img {
  display: block; /* évite l'espace blanc sous l'image */
  max-width: 100%; /* l'image ne dépasse jamais sa colonne */
  height: auto;    /* garde les proportions */
}





/* -------------------- LIENS -------------------- */
a { color: black; }
a:hover { color: #7B71A8; }
a:visited { color: black; }
a:active { color: #7B71A8; }

.hobbies a { color: white; }

/* -------------------- HOBBIES / THINGS THAT I LOVE -------------------- */

/* CONTENEUR HORIZONTAL */
.hobbies {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

/* BLOCS */
.hobby-img,
.mind,
.hobby-anime {
  background-color: #7D73AB;
  color: #ffffff;
  text-align: center;
  flex: 1;                 /* largeur équilibrée */
  max-width: 320px;        /* empêche qu’ils s’étalent */
  padding: 2rem;
  border-radius: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centrage vertical */
  align-items: center;     /* centrage horizontal */
  text-align: center;
}

/* IMAGES */
.hobby-img img,
.hobby-anime img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 1rem;
  border-radius: 2rem;
}

/* TEXTE */
.hobby-img p,
.mind p,
.hobby-anime p {
  margin: 0;
}



/* -------------------- VIDEO -------------------- */
.prototype { width: 100%; margin: 0 auto; }
.prototype video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0rem;
}

.note { font-size: 14px; font-style: italic; margin-top: 10px; }

/* -------------------- FOOTER -------------------- */
footer { padding: 2rem 0 2rem 8rem; font-size: 0.9rem; background: #ffffff; box-shadow: inset 0 5px 15px #e5e6e8; }
footer a, footer a:hover, footer a:visited { color: black; }
.signature { text-align: center; }


/*--- FOOTNOTE---*/
.footnote {
  font-size: 1.2rem;
}




/* ========================================================= */
/* ======================= RESPONSIVE ====================== */
/* ========================================================= */

@media (max-width: 900px) {

  /* projects in one column only */
   .projects {
    flex-direction: column; /* 2 columns → 1 column */
  }

  /* about */
  .about {
    padding-left: 4rem;
    padding-right: 4rem;
  }

  /* padding pages internes uniquement */
  body main {
    padding: 4rem 2rem;
  }

  /* colonnes -> vertical */
  .container {
    grid-template-columns: 1fr;
    height: auto;
  }

  .col-gauche,
  .col-droite {
    padding: 1rem 0;
    overflow: visible;
  }

  /* project header : texte sous le titre */
  .project-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .project-header p {
    text-align: left;
  }

  /* projects largeur normale */
  .project {
    padding: 0;
    max-width: 100%;
  }

  .project img {
    width: 100%;
  }

  /* hobbies -> vertical */
  .hobbies {
    flex-direction: column;
    padding: 2rem 0 2rem 0;

  }

  .hobby-img,
  .mind,
  .hobby-anime {
    max-width: 100%;
  }

  /*floating button responsive*/

  .floating-btn {
  position: absolute;
  width: 40%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centre horizontal + vertical */
  }

    /*header button responsive*/
    .site-header {
padding: 0rem 3.5rem;
}

  /* cacher les projects dans .project1 uniquement */
  .project1 .project {
    display: none;
  }

  footer {
    padding: 2rem;
    text-align: center;
  }
}