/* RÈGLES GLOBALES */
body {
  margin: 0;                       /* enlève la marge par défaut autour de la page */
  font-family: Georgia, serif;     /* police principale */
  background:#000;                 /* fond noir */
  color:#fff;                      /* texte blanc */
}

/* Centrage global des images */
img {
  display: block;                  /* rend l'image "bloc" */
  margin: 0 auto;                  /* centre horizontalement */
}

/* Header en haut comme avant */
header {
  background-color: #000;          /* fond noir */
  color:#fff;                      /* texte blanc */
  text-align: center;              /* centre le texte */
  padding: 15px;                   /* espace intérieur */
}

/* NAVBAR LATERALE GAUCHE */
nav {
  width: 180px;                    /* largeur fixe de la colonne */
  background: #000;                /* fond noir */
  padding: 10px 0;                 /* espace haut/bas à l'intérieur */
  float: left;                     /* colle le menu à gauche */
  min-height: 115vh;               /* hauteur */
}

/* Liste verticale : on enlève les puces et les espaces par défaut */
nav ul {
  list-style-type: none;           /* enlève les points de la liste */
  margin: 0;                       /* enlève marge */
  padding: 0;                      /* enlève padding */
}

nav li {
  margin: 10px 0;                  /* espace entre les boutons */
}

/* Liens du menu */
nav a {
  display: block;                  /* le lien prend toute la largeur du bouton */
  padding: 10px 15px;              /* taille du bouton */
  margin: 4px;                     /* espace entre les boutons */
  background: #fff;                /* fond blanc */
  text-decoration: none;           /* enlève le soulignement */
  color:#000;                      /* texte noir */
}

/* Effet quand la souris passe dessus */
nav a:hover {
  background: #727272;             /* gris au survol */
}

/* CONTENU PRINCIPAL */
/*On décale main vers la droite pour laisser la place au menu gauche */
body > main {
  margin-left: 200px;              /* espace pour ne pas passer sous la sidebar */
  width: auto;                     /* largeur auto */
  padding: 20px;                   /* espace intérieur */
  background:#000;                 /* fond noir */
  margin-top: 0;                   /* pas de marge en haut */
  margin-right: 20px;              /* espace à droite */
}

/* Footer sur toute la largeur */
footer {
  clear: both;                     /* force le footer à passer sous le menu flottant */
  padding: 20px;                   /* espace intérieur */
  margin-top: 20px;                /* espace au-dessus */
}

/* PAGE CV */

/* Conteneur global du CV : 2 colonnes (gauche/droite) */
.cv-principal {
  max-width: 1000px;               /* limite la largeur */
  margin: 1px auto;                /* centre le bloc */
  display: grid;                   /* active la grille */
  gap: 0;                          /* espace entre colonnes */
  grid-template-columns: 1fr 2fr;  /* 1/3 à gauche, 2/3 à droite */
  font-family: Arial, sans-serif;  /* police différente pour le CV */
}

/* Colonne gauche (menu du CV) */
.cv-menu {
  background: #4f7a67;             /* vert */
  color: #fff;                     /* texte blanc */
  padding: 20px;                   /* espace intérieur */
  width: 100%;                     /* prend toute la largeur de sa colonne */
}

/* Photo */
.cv-photo img {
  width: 70%;                      /* réduit l'image */
  border-radius: 15px;             /* coins arrondis */
  display: block;                  /* bloc */
  margin-bottom: 20px;             /* espace sous la photo */
}

/* Blocs de la sidebar  */
.cv-bloc {
  margin-bottom: 25px;             /* espace entre les blocs */
}

/* Titres des blocs à gauche */
.cv-bloc h2 {
  font-size: 1rem;                 /* taille moyenne */
  text-transform: uppercase;       /* met en MAJUSCULES */
  text-align: center;              /* centre le titre */
  background-color: #3a5a4f;       /* vert plus foncé */
  padding: 8px;                    /* espace intérieur */
  margin: 0 0 10px 0;              /* marge dessous */
}

/* Listes des blocs */
.cv-bloc ul {
  list-style: disc;                /* puces rondes */
  padding-left: 20px;              /* décale les puces */
  margin: 0;                       /* enlève marges par défaut */
}

/* Colonne droite (contenu principal du CV) */
.cv-main {
  background: #f5f5f5;             /* fond clair */
  padding: 20px 30px;              /* padding (haut/bas, gauche/droite) */
  width: 100%;                     /* prend toute la largeur de sa colonne */
  color: #000000;                  /* texte noir */
}

/* En-tête : nom + sous-titre */
.cv-header h1 {
  font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
  /* police "manuscrite" */
  font-size: 2rem;                 /* gros titre */
  margin: 0 0 5px 0;               /* espace sous le nom */
}

.cv-header h2 {
  font-size: 1rem;                 /* plus petit que le h1 */
  text-transform: uppercase;       /* majuscules */
  color: #4f7a67;                  /* vert */
  margin: 0 0 15px 0;              /* espace dessous */
}

/* Texte de résumé */
.cv-resume p {
  margin-top: 0;                   /* enlève marge au-dessus */
  margin-bottom: 20px;             /* espace en dessous */
}

/* Sections de la colonne droite (compétences / formations) */
.cv-section {
  margin-bottom: 25px;             /* espace entre sections */
}

/* Titre de section (barre verte) */
.cv-section h2 {
  text-transform: uppercase;       /* majuscules */
  background-color:#4f7a67;        /* vert */
  color: #fff;                     /* texte blanc */
  padding: 8px 12px;               /* espace intérieur */
  font-size: 1rem;                 /* taille du titre */
}

/* Items (expériences, formations) */
.cv-titre {
  margin-top: 10px;
  margin-bottom: 10px;             /* espace autour d’un bloc expérience */
}

/* Titre d’une expérience / formation */
.cv-titre h3 {
  margin: 5px 0;
  font-size: 1rem;
}

/* Lieu / dates */
.cv-titre-place {
  font-style: italic;              /* italique */
  margin: 0 0 5px 0;
}

/* Liste à l’intérieur d’une expérience */
.cv-titre ul {
  margin: 0 0 5px 20px;            /* décale la liste */
  padding: 0;                      /* enlève padding */
}

/*  PAGE MY TOWN  */

/* Conteneur des images : flex pour les mettre côte à côte */
.ville-images {
  display: flex;                   /* mise en ligne */
  justify-content: center;          /* centrage */
  gap: 30px;                       /* espace entre les images */
  margin-top: 30px;
  flex-wrap: wrap;                 /* retour à la ligne si écran petit */
}

/* Centre le texte sous les images */
.ville-images figure {
  text-align: center;
  margin: 0;
}

/* Images adaptatives */
.ville-images img {
  max-width: 100%;                 /* ne dépasse pas le conteneur */
  height: auto;                    /* garde les proportions */
}

/* Image plus grande */
.image-observatoire img {
  width: 575px;
}

/* Image plus petite */
.image-college img {
  width: 595px;
  height: 415px;                   /* fixe la hauteur */
}

/*  PAGE MASTERCLASS */

/* Centre le contenu et limite la largeur */
.masterclass {
  max-width: 900px;
  margin: 0 auto;                  /* centre horizontalement */
}

/* Cartes de contenu (film / livre) */
.bef {
  background: #111;                /* gris très foncé */
  padding: 20px;                   /* espace intérieur */
  margin: 20px 0;                  /* espace vertical */
  border-radius: 12px;             /* coins arrondis */
}

/* Paragraphes du texte */
.texte p {
  line-height: 1.7;                /* hauteur de ligne  */
  margin-bottom: 14px;             /* espace entre paragraphes */
}

/* Zone media (image + légende) */
.media {
  text-align: center;              /* centre la légende */
  margin-top: 15px;
}

/*  PAGE INTERESTS (vidéo)  */
.video-interet {
  margin: 0px;                   /* décale fortement  */
  margin-left: 0px;                /* annule le décalage à gauche */
}