/* GENERAL */
*{
    margin: 0;
    box-sizing: border-box;
  }
  
  body{
    font-family: Roboto;
    font-weight: 300;
    font-size: .9rem;
    line-height: 1.5;
  }
  
  a{
    text-decoration: none;
    color: #4472C4;
  }
  
  a:hover{
    text-decoration: underline;
  }
  
  p{
    margin: 0 0 1rem;
  }
  
  h1{
    margin: 0 0 1rem;
    font-size: 2.5rem;
    margin-bottom: .5rem;
  }
  
  h2{
    margin: 0 0 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  
  .text-blue{
    color: #4472C4;
  }
  
  .text-darkblue{
    color: #002060;
  }
  
  .text-uppercase{
    text-transform: uppercase; 
  }
  
  .icon{
    margin-right: .5rem;
  }

.cv-container {
  display: block;
}

.header{
  display: none;
}

 /* HEADER */
 .headerleft{
  grid-area: header;
  padding: 10px;
  background-color: #F2F2F2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color:#002060
}

.headerleft h1{
  margin: 0 0 1rem;
  font-size: 2rem;
  margin-bottom: .5rem;
}

/* RIGHT COLUMN */
.right-column{
  grid-area: right-column;
  display: grid;
  grid-template-rows: 250px 1fr;
  grid-template-areas: 
    "content";
}

.infos{
  columns: 1;
  list-style-type: none;
  padding: 0;
}
  
/* LEFT COLUMN */
.left-column{
  grid-area: left-column;
  padding: 50px;
  background-color: #4472C4;
  color: white;
}

.section_experience {
      padding-bottom: 20px;
}

@media (min-width:768px) {
  .cv-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left-column right-column right-column";
    width: 1300px;
    margin: 100px auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }

  /* HEADER */
  .header{
    grid-area: header;
    padding: 20px;
    background-color: #F2F2F2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .headerleft{
    display:none
  }

    /* RIGHT COLUMN */
  .right-column{
      grid-area: right-column;
      display: grid;
      grid-template-rows: 250px 1fr;
      grid-template-areas: 
        "header"
        "content";
    }
  .infos{
    columns: 2;
    list-style-type: none;
    padding: 0;
  }
    
}


.section{
  margin-bottom: 0rem;
}

.section-centered {
  margin-bottom: 0rem; /* Identique à .section */
  text-align: center;   /* Centre le contenu texte/inline */
}

.section_trainning {
  columns: 1;
}

.section a{
  text-decoration: none;
  color: #e2e2e2;
}

.section a:hover{
  text-decoration: underline;
}

.portait{
  border-radius: 50%; /* Correction: 50% pour un cercle parfait */
  max-width: 200px; /* Ajusté pour être cohérent avec right-column header height */
  height: 200px; /* Pour assurer un cercle si l'image n'est pas carrée */
  object-fit: cover; /* Pour éviter la déformation de l'image */
  margin: auto; /* Centre horizontalement */
  display: block;
  margin-bottom: 30px; /* Espacement ajusté */
  margin-top: 30px; /* Espacement ajusté */
}

.skills{
  list-style-type: none;
  padding: 0;
  margin: 0 0 1rem;
}

.link {
  columns: 2;
}


.flags{
  display:flex;
  float:right
  list-style-type: none;
  padding: 0;
  justify-content: flex-end; 
  position: relative; /* Nécessaire pour le positionnement de la bulle */
}

.language-tooltip {
  position: absolute;
  bottom: 0px; /* Positionne la bulle 40px en dessous du conteneur .flags */
  left: 50%;
  transform: translateX(-50%); /* Centre la bulle horizontalement */
  background-color: #0776d7; /* Fond sombre */
  color: white; /* Texte clair */
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.85em; /* Taille de police légèrement plus petite */
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  z-index: 1000; /* S'assure que la bulle est au-dessus des autres éléments */
  opacity: 0; /* Initialement invisible */
  visibility: hidden; /* Initialement cachée et n'occupe pas d'espace */
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; /* Animation douce */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Ombre optionnelle pour un effet de profondeur */
}

.language-tooltip.show {
  opacity: 1;
  visibility: visible;
}

/* Optionnel : petite flèche pour la bulle */
.language-tooltip::after {
  content: '';
  position: absolute;
  top: -6px; /* Positionne la flèche en haut de la bulle */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
}




.sectionbas{
  position:relative;
  bottom: 1;
  left: 1;
}

.sectionbas a{
  text-decoration: none;
  color: #4472C4;
}

.sectionbas a:hover{
  text-decoration: underline;
}


/* CONTENT */
.content{
  grid-area: content;
  padding: 20px;
}

.experience-list{
  list-style-type: circle;
}


@page {
  size: A4;
  margin: 0;
}


@media print {

  border-radius: 50%; /* Correction: 50% pour un cercle parfait */
  max-width: 200px; /* Ajusté pour être cohérent avec right-column header height */
  height: 200px; /* Pour assurer un cercle si l'image n'est pas carrée */
  object-fit: cover; /* Pour éviter la déformation de l'image */
  margin: auto; /* Centre horizontalement */
  display: block;
  margin-bottom: 30px; /* Espacement ajusté */
  margin-top: 30px; /* Espacement ajusté */
  border:none

/* unvisited link */
a:link {
  color: black;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: black;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: black;
  text-decoration: none;
}

/* selected link */
a:active {
  color: black;
  text-decoration: none;
}



.content{
  grid-area: content;
  padding: 00px;
}

  body {
    -webkit-print-color-adjust: exact; /* Nécessaire pour Chrome/Safari */
    print-color-adjust: exact; /* Standard */

    width: 100% !important; /* Force la pleine largeur */
    float: none !important; /* Annule les flottants */
    margin: 0; 
    padding: 0;

  }

  .cv-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "left-column right-column right-column";
    width: 100%; /* Utilise toute la largeur de la page */
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    font-family: Roboto;
    font-size: .7rem;
    line-height: 1.3;
    margin:0
  }

  /* HEADER */
  .header{
    grid-area: header;
    padding: 20px; /* Moins de padding pour l'impression */
    background-color: #F2F2F2 !important; /* Force la couleur de fond */
    -webkit-print-color-adjust: exact; /* Nécessaire pour Chrome/Safari */
    print-color-adjust: exact; /* Standard */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: black !important; /* Force la couleur du texte */
    

  }
  .headerleft{
    display:none
  }

    /* RIGHT COLUMN */
  .right-column{
    grid-area: right-column;
    display: grid;
    grid-template-rows: auto 1fr; /* Hauteur auto pour le header, le reste pour le contenu */
    grid-template-areas: 
      "header"
      "content";
    background-color: white !important; /* Force le fond */
    color: black !important; /* Force la couleur */
    width: 100% !important; /* Force la pleine largeur */
    float: none !important; /* Annule les flottants */
        padding: 25px;

    }
  .infos{
    columns: 2;
    list-style-type: none;
    padding: 0;
    font-size: .6rem;
  }


  /* LEFT COLUMN */
  .left-column{
    grid-area: left-column;
    padding: 25px;
    background-color: white;
    color: black;
  }
  .link {
    columns: 2;
  }

  .language-tooltip,
  .flags
  {
    display:none
  }

  .section{
  margin-bottom: 1rem;
}

.section-centered {
  margin-bottom: 1rem; /* Identique à .section */
  text-align: center;   /* Centre le contenu texte/inline */
}
h1{
    margin: 0 0 0 rem;
    font-size: 2rem;
    margin-bottom: .25rem;
  }
  
  h2{
    margin: 0 0 0rem;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .portait{
  border-radius: 50%; /* Correction: 50% pour un cercle parfait */
  max-width: 150px; /* Ajusté pour être cohérent avec right-column header height */
  height: 150px; /* Pour assurer un cercle si l'image n'est pas carrée */
  object-fit: cover; /* Pour éviter la déformation de l'image */
  margin: auto; /* Centre horizontalement */
  display: block;
  margin-bottom: 30px; /* Espacement ajusté */
  margin-top: 30px; /* Espacement ajusté */
}
}