/* Importe la police Montserrat depuis Google Fonts pour l'utiliser sur tout le CV. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* Applique un calcul de taille plus simple : padding et bordures sont inclus dans la largeur totale. */
* {
  box-sizing: border-box;
}

/* Style global de la page : fond gris, police principale et couleur de texte par défaut. */
body {
  margin: 0;
  background: #e8e8e8;
  font-family: 'Montserrat', Arial, sans-serif;
  color: #555;
}

/* Page du CV : format proche A4, centrée, avec deux colonnes fixes. */
.cv-page {
  width: 794px;
  height: 1123px;
  margin: 30px auto;
  display: grid;
  grid-template-columns: 279px 515px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
}

/* Colonne latérale gauche : fond noir, texte clair et espacement interne. */
.sidebar {
  background: #191919;
  color: #f5f5f5;
  padding: 0 37px;
  position: relative;
}

/* Conteneur de la photo : hauteur fixe et overflow hidden pour recadrer l'image. */
.portrait-wrap {
  height: 319px;
  margin-left: -37px;
  margin-right: -37px;
  overflow: hidden;
  position: relative;
}

/* Positionnement précis du portrait à l'intérieur du bloc photo. */
.portrait {
  position: absolute;
  width: 275px;
  left: 0;
  bottom: 1px;
}

/* Style commun aux titres des sections : majuscules et fort espacement des lettres. */
.side-section h2,
.main-section h2 {
  margin: 0;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 12px;
  line-height: 1.25;
}

/* Titres de la colonne gauche : centrés et en couleur claire. */
.side-section h2 {
  text-align: center;
  font-size: 19px;
  color: #f6f6f6;
}

/* Ligne blanche décorative utilisée sous les titres de la colonne gauche. */
.white-line {
  width: 68px;
  height: 5px;
  background: #fff;
  margin: 17px 0 18px 0;
}

/* Bloc profil : espacement et centrage du texte. */
.profile-section {
  margin-top: 14px;
  text-align: center;
}

.profile-section /* Ligne blanche décorative utilisée sous les titres de la colonne gauche. */
.white-line {
  margin-left: auto;
  margin-right: auto;
}

.profile-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
}

/* Bloc contact : grand espace au-dessus pour équilibrer la colonne gauche. */
.contact-section {
  margin-top: 64px;
}

/* Liste des informations de contact sans puces classiques. */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

/* Chaque ligne de contact est une petite grille : icône à gauche, texte à droite. */
.contact-list li {
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

/* Style des icônes de contact : carré blanc avec symbole sombre. */
.icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #191919;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
}

/* Bloc centres d'intérêt : placé plus bas dans la colonne latérale. */
.interests-section {
  margin-top: 82px;
}

.interests-section h2 {
  text-align: center;
  letter-spacing: 10px;
}

.interest-block {
  font-size: 13px;
  line-height: 1.35;
  margin-top: 0;
}

.interest-block p {
  margin: 0 0 5px 0;
}

/* Met en évidence les catégories comme SPORTS ou HOBBIES. */
.underlined {
  text-decoration: underline;
  font-weight: 600;
}

.hobbies {
  margin-top: 14px;
}

/* Colonne principale droite : zone blanche qui contient l'en-tête et le contenu. */
.content {
  background: #fff;
  position: relative;
}

/* Bandeau supérieur sombre contenant le nom et le titre professionnel. */
.top-header {
  height: 157px;
  background: #191919;
  color: #fff;
  position: relative;
}

/* Bande blanche décorative en haut du bandeau noir. */
.white-tab {
  position: absolute;
  top: 0;
  left: 0;
  width: 515px;
  height: 40px;
  background: #fff;
}

/* Positionne le nom et le métier dans le bandeau supérieur. */
.title-block {
  position: absolute;
  left: 37px;
  top: 51px;
}

/* Style du nom : très grand, léger et espacé. */
.title-block h1 {
  margin: 0;
  font-size: 53px;
  line-height: 0.95;
  letter-spacing: 2px;
  font-weight: 300;
}

/* Style du sous-titre : majuscules avec grand espacement entre les lettres. */
.title-block p {
  margin: 13px 0 0 8px;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 15px;
  font-weight: 400;
  white-space: nowrap;
}

/* Zone de contenu : ajoute les marges internes autour des sections principales. */
.white-content {
  padding: 36px 48px 0 43px;
  position: relative;
}

/* Base des sections principales : position relative pour placer les lignes décoratives. */
.main-section {
  position: relative;
}

.main-section h2 {
  text-align: center;
  font-size: 21px;
  color: #333;
}

/* Ligne grise décorative placée sous les titres de section côté droit. */
.grey-line {
  width: 69px;
  height: 5px;
  background: #b7b7b7;
  position: absolute;
  left: 0;
  top: 32px;
}

/* Liste des formations : texte compact et années alignées. */
.formation-list {
  margin-top: 34px;
  padding-left: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.85;
}

.formation-list p {
  margin: 0;
}

/* Largeur fixe pour les années afin d'aligner les intitulés de formation. */
.formation-list span {
  display: inline-block;
  width: 39px;
}

/* Espacement avant la section des expériences. */
.experiences {
  margin-top: 25px;
}

/* Grille d'une expérience : date/entreprise à gauche, détails à droite. */
.experience-item {
  display: grid;
  grid-template-columns: 106px 1fr;
  gap: 0;
  margin-top: 23px;
}

/* Ajoute plus d'espace avant la première expérience pour dégager le titre. */
.experience-item:first-of-type {
  margin-top: 43px;
}

/* Style de la colonne date et lieu/entreprise. */
.date-place {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.55;
  color: #555;
}

.date-place p,
.experience-text p {
  margin: 0;
}

/* Style des sous-titres : postes, catégories de compétences, etc. */
.experience-text h3,
.skills h3 {
  margin: 0 0 7px 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1.35px;
  font-weight: 800;
  color: #383838;
}

/* Liste des missions : petite taille pour tenir dans le format CV. */
.experience-text ul {
  margin: 0;
  padding-left: 17px;
  font-size: 10px;
  line-height: 1.7;
}

/* Espacement avant la section compétences. */
.skills {
  margin-top: 20px;
}

.skills /* Ligne grise décorative placée sous les titres de section côté droit. */
.grey-line {
  top: 38px;
}

/* Compétences organisées en deux colonnes : langues et logiciels. */
.skills-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  font-size: 12px;
  line-height: 1.35;
}

.skills-grid h3 {
  font-size: 12px;
  margin-bottom: 19px;
}

.skills-grid p {
  margin: 0;
}

/* Supprime les espaces entre les bordures du tableau des langues. */
table {
  border-collapse: collapse;
}

/* Cellules du tableau : petit espacement et pas de retour à la ligne. */
td {
  padding: 0 7px 2px 0;
  white-space: nowrap;
}

/* Styles appliqués uniquement lors de l'impression : format A4 propre, sans ombre ni marge. */
@media print {
  body {
    background: #fff;
  }

  /* Page du CV : format proche A4, centrée, avec deux colonnes fixes. */
.cv-page {
    margin: 0;
    box-shadow: none;
    width: 210mm;
    height: 297mm;
  }
}


/* Bouton de retour : placé en haut à gauche pour revenir facilement à l’accueil. */
.back-button {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  background: #191919;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Effet au survol du bouton : léger mouvement et contraste renforcé. */
.back-button:hover {
  transform: translateY(-2px);
  background: #333;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* Version mobile : le bouton devient plus compact pour ne pas gêner la lecture. */
@media (max-width: 900px) {
  .back-button {
    top: 12px;
    left: 12px;
    padding: 9px 14px;
    font-size: 11px;
  }
}