/* Reset & Global */
* {
  margin: 0;
  padding: 0;
}

html, body {
  font-family: Arial, sans-serif;
  background: #131313; /* Fond noir très sombre pour le thème dark */
  color: #f0f0f0; /* Texte blanc */
  min-height: 100vh; /* Ensures body takes at least the full viewport height */
}

/* Header - aligner logo, recherche */
.header {
  display: grid;
  grid-template-columns: 350px 1fr auto; /* Logo à gauche (largeur fixe), search au centre (flexible), actions à droite */
  align-items: center;
  padding: 12px 24px;
  background: #0a0a0a; /* Fond encore plus sombre que le body */
  border-bottom: 1px solid #3d3d3d; /* Séparation avec le contenu */
}

.logo {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 18px;
}

.search {
  max-width: 400px; /* Limite la largeur */
}

.search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  background: #141414; /* Légèrement plus clair que le header */
  border: 1px solid #3d3d3d;
  color: #f0f0f0;
}

/* Main - Disposition sidebar + contenu main */
main {
  display: grid;
  grid-template-columns: 374px 1fr; /* Sidebar fixe à gauche, contenu flexible à droite */
  height: calc(100vh - 60px); /* Hauteur totale de la viewport moins la hauteur approximative du header */
}

/* Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #0a0a0a; /* Même couleur que le header */
  border-right: 1px solid #3d3d3d; /* Séparation avec le contenu main */
  height: 100%;
}

.sidebar a {
  display: block;
  padding: 10px 14px;
  margin-bottom: 6px; /* Espacement vertical entre liens */
  text-decoration: none;
  color: #9ca3af;
  font-size: 15px;
  transition: background 0.2s, color 0.2s; /* Animation fluide au survol */
}

.sidebar a:hover{
  background: #262626; /* Fond sombre au survol */
  color: white; 
}

.sidebar hr {
  margin: 14px 0;
  border: none;
  border-top: 1px solid #3d3d3d; /* Séparateur horizontal subtil */
}

/* Content - Zone principale de contenu avec grids */
#content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Grille en arrière-plan pour effet visuel type "blueprint" */
  background-image: 
    linear-gradient(to bottom, transparent 4.9em, rgba(255, 255, 255, 0.2) 5em),
    linear-gradient(to right, transparent 4.9em, rgba(255, 255, 255, 0.2) 5em);
  background-size: 5em 5em; /* Carrés de 5em × 5em */
}

/* CV Resume */
.cv-resume {
  background-color: #131313;
  border: 1px solid #3d3d3d; /* Bordure de la zone du CV */
  padding: 2rem;
  max-width: 900px;
}

.cv-resume header h1 {
  font-size: 2.8rem; 
}

.subtitle {
  font-size: 0.95rem;
  color: #723bf2;
}

/* Section "À propos de moi" */
.me {
  padding: 1rem 1.5rem;
  margin: 1rem 0 2.5rem;
  background-color: #202020;
  border: 1px solid #3d3d3d;
}

.me p {
  margin: 0 0 1.4rem;
  line-height: 1.7;
  color: white;
}

.me-info {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
  gap: 1.4rem 2.5rem; /* Espacement vertical (1.4rem) et horizontal (2.5rem) */
  font-size: 0.9rem;
  color: #9ca3af;
}

.me-info span strong {
  color: #723bf2;
  margin-right: 0.4rem;
}

/* CV Main Grid */
.main {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Colonne gauche (1/3) plus étroite que la droite (2/3) */
  gap: 2rem; /* Espacement entre les colonnes */
}

.lc > section, .rc > section >section {
  margin-bottom: 3rem; /* Espacement entre sections */
}

.lc {
  border-right: 1px solid #3d3d3d; /* Séparation entre deux colonnes */
  padding-right: 2rem;
}

.rc {
  padding-left: 1rem; /* Padding asymétrique */
}

/* Headings */
h2 {
  margin: 1.2rem 0;
  font-size: 1.1rem;
  text-transform: uppercase; /* texte transformer en Majuscules */
  color: #723bf2; 
}

/* Formations */
.formation strong {
  font-size: 0.85rem;
  color: #723bf2;
}

.formation h3 {
  margin: 0.3rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.formation em {
  font-size: 0.85rem;
  color: #9ca3af; 
}

/* Lists */
ul {
  margin: 0;
  padding-left: 1.2rem;
}

li {
  margin-bottom: 0.6rem;
  line-height: 1.6;
}

.comp li,
.lang li,
.competences li {
  font-size: 0.9rem;
  color: white; 
  line-height: 1.3;
}

/* Projects */
.proj h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.year {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

.proj li {
  font-size: 0.88rem;
}



.intro,
.audio-section,
.video-section {
  background: #141414;
  border: 1px solid #3d3d3d;
  padding: 1.5em;
  margin: 2em 0;
}

.intro {
  margin-top: 1.8rem;
  border-left: 4px solid #723bf2;
}

.audio-section,
.video-section {
  border: 1px solid #723bf2;
  padding: 2em;
  text-align: center; /* Centre le contenu média */
}

.video-section iframe, video {
  width: 900px;
  height: 500px; /* Dimensions fixes pour les vidéos */
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Grille à 3 colonnes égales */
  gap: 2em; /* Espacement entre éléments */
  margin-top: 1.5em;
}

.grid-img {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Grille 2 colonnes pour les images */
  gap: 2em;
  margin-top: 1.5em;
}

/* Media Cards */
.media {
  max-width: 460px;
}

.media,
.feat-card {
  background: #141414;
  border: 1px solid #3d3d3d;
  overflow: hidden; /* Cache tout débordement */
  transition: transform 0.3s, box-shadow 0.3s; /* Animation pour interactions */
}

.feat-card {
  padding: 1.5em; 
}

.media-img {
  width: 100%;
  height: 200px; /* Dimentions fixe pour les images */
  border-bottom: 1px solid #3d3d3d; 
}

.media-content {
  padding: 1.5em;
}

.media h3,
.feat-card h3 {
  color: #723bf2; 
  margin-bottom: 0.5em;
  font-size: 1.3em;
}

.media p {
  color: #c8c8c8; 
  line-height: 1.6;
}

/* Town Images */
.town-img img {
  height: 700px; 
  width: 100%;
  object-fit: cover; /* Recadre et remplit le conteneur, conservant le ratio */
}

/* Content Sections */
.content {
  margin-bottom: 3em; 
}

/* Home Page */
#content > .h {
  text-align: center; /* Centre le contenu de la page d'accueil */
  padding: 3rem 0; 
}

.home > h1 {
  margin-bottom: 1rem; 
}

.sub {
  font-size: 1.2rem; 
  color: #723bf2; 
}

.card {
  background: #141414; 
  border: 1px solid #3d3d3d;
  padding: 2rem; 
  text-decoration: none; /* Retire le soulignement des liens */
  color: #f0f0f0;
  transition: all 0.3s; /* Transition */
}

.card:hover {
  border-color: #723bf2; 
  transform: translateY(-5px); /* Effet de levée au survol */
}

.card h3 {
  color: #723bf2; 
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
}

.card p {
  color: #9ca3af; 
  line-height: 1.5; 
}