/* DEBUT partie générale ---------------------------------------------------------*/
* {    /* RESET */
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

html {
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../img/kevin-canlas_2000Xxxx.webp");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  font-family: Arial, Helvetica, sans-serif;
}
main {
  background-color: rgba(245, 245, 245, 0.7);
  max-width: 1024px;
  border-radius: 10px;
}
section {
  padding: 16px 8px;
  scroll-margin-top: 62px;
}
h1 {
  margin: auto;
  background-color: rgba(245, 245, 245, 0.90);
  border-radius: 10px;
  border: solid thin rgb(85 85 85);
  border-left: solid 5px rgb(85 85 85);
  border-right: solid 5px rgb(85 85 85);
  padding: 5px;
  font-size: 3rem;
  color: rgb(50, 50, 50);
}
h2 {
  width: fit-content;
  margin-left: 60px;
  margin-bottom: 10px;
  background-color: rgba(245, 245, 245, 0.95);
  padding: 0.3rem;
  border: solid thin rgb(220 220 220);
  border-radius: 5px;
}

a:link, a:visited, a:hover {
  color: blue;
}
a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  section {
    padding: 8px 3px;
    scroll-margin-top: 38px;
  }
  main{
    padding: 0px 2px;
  }
}

@media (max-width: 600px) {
  h2 {
    font-size: 1.25rem;
    margin-left: 30px;
    margin-bottom: 5px;
  }
}
@media (max-width: 479px) {
  h2 {
    font-size: 1rem;
  }
}
/* FIN partie générale */

/* DEBUT header (avec logos, nav bar et bouton contact) et footer ---------------*/
header, footer {
  display: flex;
  position: sticky;
  width: 100%;
  z-index: 2;
  background-color: rgba(225, 235, 240,0.98);
}
header {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  top: 0px;
  padding: 2px 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
footer {
  justify-content: start;
  bottom: 0px;
  padding: 5px 0 5px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-size: small;
}

nav {
  display: flex;
  gap: 0.5rem;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 1px 5px;
  border-radius: 10px;
  border: solid thin grey;
  background-color: rgba(225, 235, 240);
}
.icon_size_logo {
  height : 45px;
}
#menu_toogle, #toggle {
  display: none;
}
.menu {
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
  border: solid thin grey;
  background-color: rgba(225, 235, 240);
}
.menu_button{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
}
.menu_button_border_r_or_b{
  border-right: solid thin grey;
}
.small_screen {
  display: none;
}
.large_screen {
  display: block;
}

@media (max-width: 600px) {
  header {
    justify-content: space-between;
    gap: 0;
  }
  .icon_size_logo {
    height : 30px;
  }
  .menu {
    display: none;
    flex-direction: column;
    padding: 0;
    gap: 0;
    border-radius: 10px;
    border: solid thin grey;
    background-color: rgba(225, 235, 240);
  }
  .icon_contact_button {
    display: none;
  }
  .button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 9px;
    border-bottom-left-radius: 9px;
  }
  .menu_button{
    padding: 2px 5px;
  }
  .menu_button_border_r_or_b{
    border-right: none;
    border-bottom: solid thin grey;
  }
  .small_screen{
    display: block;
  }
  .large_screen {
    display: none;
  }
  #menu_toogle{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.15rem;
    cursor: pointer;
  }
  #toggle:checked + .menu {
    display: flex;
  }

/* Pas terrible, Menu burger à faire avec du JS à terme, or not !!!*/
  #toggle:checked + .logo {
    flex-direction: column;
  }
/* Tooltip text */
.tooltip .tooltip_txt {
  visibility: hidden;
  background-color: whitesmoke;
  font-size: small;
  text-align: center;
  padding: 2px 4px;
  margin: -2px 5px;
  border-radius: 5px;
  border: solid thin;
  /* Position the tooltip text*/
  position: static;
  z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltip_txt {
    visibility: visible;
  }
}

@media (max-width: 479px) {
  .logo {
    display: none;
  }
  header {
    justify-content: end;
  }
  section {
    scroll-margin-top: 37px;
  }
}
/* FIN header (avec logos, nav bar et bouton contact) ----------------------------*/

/* DEBUT Présentation ------------------------------------------------------------*/
#Presentation {
  background-image: url("../img/Saint_Simind_origine.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.prez_link_mx {
  padding: 3px 0;
}
#info_presentation {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.white_bg {
  background-color: rgba(245, 245, 245, 0.95);
  border-radius: 10px;
  padding: 8px;
  margin: 8px;
}
.logo_linkedin{
  height: 0.85rem;
}
.for_photo_id {
  height: 20px;
}
#photo_id {
  position: relative;
  width: 73px;
  top: -24px;
  right: -68px;
  border-radius: 10px;
  padding: 0px;
  transition: transform 0.5s cubic-bezier(.22,.67,.57,.87),
  opacity 0.5s linear;
}
#photo_id:hover {   /* Animation photo */
  transform: rotate(360deg);
  opacity: 0;
}
#txt_presentation {
  display: flex;
  justify-content: center;
  background-color: rgba(245, 245, 245, 0.95);
  border-radius: 10px;
  width: 500px;
  padding: 8px;
  margin: 13px auto 0px auto;
}

@media (max-width: 740px) {   /* Responsive A FAIRE */
  #Presentation {
    font-size: small;
  }
  h1 {
    font-size: 1.6rem;
  }
  #photo_id {
    width: 53px;
    top: 0px;
    right: -55px;
    border-radius: 10px;
  }
  .white_bg {
    padding: 4px;
    margin: 2px;
  }
  #txt_presentation {
    width: 400px;
  }
}

@media (max-width: 479px) {
  #txt_presentation {
    width: 90%;
  }
  h1 {
    order: 1;
  }
}
/* FIN Présentation --------------------------------------------------------------*/

/* DEBUT Generic bloc & box ------------------------------------------------------------------*/
.box{
  border-style: solid;
  border-width: thin;
  border-color: grey;
  border-radius: 20px;
  background-color: rgba(245, 245, 245, 0.90);
}
.box_ongoing{
  border-style: dashed;
}
.bloc{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 15px;
}
/* FIN Generic bloc & box ------------------------------------------------------------------*/

/* DEBUT Diplômes ------------------------------------------------------------------*/
.diplome_box{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 110px;
  padding: 0px 20px;
}
.studi{
  flex-flow: row wrap;
  column-gap: 30px;
}
.logo_studi{
  width: 60px;
}
.poitiers{
  gap: 10px 30px;
}
.angers{
  gap: 10px;
  padding: 0px 10px;
}
.logo_angers{
  height: 75px;
}

@media (max-width: 479px) {
  .diplome_box{
    font-size: small;
  }
  
}
/* FIN Diplômes ----------------------------------------------------------------*/

/* DEBUT Compétences Dev ---------------------------------------------------------*/
.exp_dev_proj_box{
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 100px;
}
.exp_dev_proj_box_title{
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 28px;
}
.exp_dev_proj_box_txt{
  display: flex;
  flex-flow: row wrap;
  gap: 3px 30px;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-top: solid thin grey;
  width: 100%;
  height: 100%;
}

.exp_dev_box{
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 100px;
}
.exp_dev_box_title{
  display: flex;
  justify-content: center;
  align-items: end;
  width: 84px;
  height: 29px;
}
.exp_dev_logo{
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 69px;
}
.logo_techno{
  width: 50px;
}
.logo_java{
  width: 60px;
}
.logo_sql{
  width: 65px;
}
.logo_php{
  width: 70px;
}
.logo_symphony{
  width: 65px;
}
.logo_git{
  width: 45px;
}
.logo_github{
  width: 30px;
}
.exp_dev_box_txt{
  display: flex;
  flex-flow: row wrap;
  gap: 3px 30px;
  justify-content: center;
  align-items: center;
  align-content: center;
  border-left: solid thin grey;
  width: 114px;
  height: 99px;
}

@media (max-width: 479px) {
  .exp_dev_proj_box{
    font-size: small;
    width: 250px;
  }
  .exp_dev_proj_box_txt{
    gap: 8px 30px;
  }
}
@media (max-width: 479px) {
  .exp_dev_box{
    font-size: small;
  }
  
}
/* FIN Compétences Dev ---------------------------------------------------------*/

/* DEBUT Expériences Meca --------------------------------------------------------*/
#Exp_meca{
  background-image: url("../img/ricardo-gomez-angel_2000Xxxx.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 3px 0;
}
.filtre{
  background-color: rgba(235, 235, 235, 0.7);
  padding: 16px 8px;
}
.exp_meca_box{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 120px;
}
.exp_meca_box_date{
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: solid thin grey;
  border-bottom: solid thin grey;
  width: 71px;
  height: 49px;
}
.exp_meca_box_title{
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid thin grey;
  width: 377px;
  height: 49px;
}
.exp_meca_box_txt{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 329px;
  height: 70px;
}
.exp_meca_logo{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 119px;
  height: 70px;
}
.exp_meca_box_txt_efinor{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 329px;
  height: 50px;
}
.exp_meca_logo_efinor{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 119px;
  height: 50px;
}
.exp_meca_box_txt2_efinor{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 450px;
  height: 20px;
  font-size: small;
}
.logo_company{
  height: 30px;
}
.logo_pg{
  width: 100px;
}
.logo_technip{
  height: 25px;
}
.logo_velan{
  width: 75px;
}
.logo_imeca{
  height: 40px;
}
.logo_pharea{
  width: 90px;
}
.logo_pharea_big{
  width: 110px;
}
.logo_iter{
  height: 40px;
}
.logo_efinor{
  height: 40px;
}

@media (max-width: 600px) {
  .filtre {
    padding: 8px 3px;
  }
}
@media (max-width: 479px) {
  .exp_meca_box{
    width: 310px;
  }
  .exp_meca_box_date{
    width: 51px;
    font-size: small;
  }
  .exp_meca_box_title{
    width: 257px;
    font-size: small;
  }
  .exp_meca_box_txt{
    width: 189px;
    font-size: small;
  }
  .exp_meca_logo{
    width: 119px;
  }
  .exp_meca_box_txt_efinor{
    width: 189px;
    height: 50px;
    font-size: small;
  }
  .exp_meca_logo_efinor{
    width: 119px;
    height: 50px;
  }
  .exp_meca_box_txt2_efinor{
    width: 310px;
    height: 20px;
    font-size: xx-small;
  }
}
/* FIN Expériences Meca --------------------------------------------------------*/

.center_txt {
  text-align: center;
}
.right_txt {
  text-align: right;
}
.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.small_txt{
  font-size: 14px;
}
@media (max-width: 479px) {
  .small_txt{
    font-size: 12px;
  }
}
/*_________________________________________100_caractères_________________________________________*/