/* ── Tokens ──────────────────────────────────────────── */
:root {
    --clr-bg:        #FAF7F2;
    --clr-beige:     #EDE5D8;
    --clr-bordeaux:  #6B3A5E;
    --clr-bordeaux-light: #9B6090;
    --clr-text:      #2A2020;
    --clr-muted:     #6E5C5C;
    --clr-rule:      #C8B4C0;

    --ff-display:  'Cormorant Garamond', Georgia, serif;
    --ff-body:     'Source Serif 4', Georgia, serif;

    --space-xs:  0.4rem;
    --space-s:   0.8rem;
    --space-m:   1.6rem;
    --space-l:   3rem;
    --space-xl:  5rem;

    --max-w: 780px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; scroll-behavior: smooth; }

body {
    background: var(--clr-bg);
    color: var(--clr-text);
    font-family: var(--ff-body);
    font-weight: 300;
    line-height: 1.75;
}

/* ── Layout ──────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--space-m);
}

/* ── Navigation ──────────────────────────────────────── */
nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 242, 0.92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--clr-rule);
}

nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Augmentation du padding vertical pour créer plus d'espace */
  padding-top: var(--space-m); 
  padding-bottom: var(--space-m); 
}

.nav-name {
  /* Suppression des styles textuels */
  font-family: none; 
  font-size: 0; /* Important : annule le font-size du texte */
  letter-spacing: 0;
  color: transparent; /* Rend la couleur de texte invisible */
  text-decoration: none;
}

/* Ajout d'un sélecteur pour cibler spécifiquement l'image à l'intérieur du nom */
.nav-name img {
    display: block; /*
    width: 105px; /* Largeur souhaitée de la photo (ajustez au besoin) */
    height: 105px; /* Hauteur souhaitée de la photo (doit idéalement être égale à la largeur pour un carré parfait) */
    border-radius: 4px; 
     margin-right: var(--space-s); //* Optionnel : adoucit les coins de l'image */
}

.nav-links {
    display: flex;
    gap: var(--space-m);
    list-style: none;
}

.nav-links a {
    font-family: var(--ff-body);
    font-size: 0.78rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--clr-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.nav-links a:hover { color: var(--clr-bordeaux); }

.styled-link {
    text-decoration: none; /* Supprime le soulignement bleu/noir par défaut du lien */
    color: #6B3A5E;        /* Définit une couleur attractive (ex: bleu) */
    font-weight: bold;     /* Rend le texte plus visible et important */
    display: inline-block; /* Permet de mieux gérer l'espacement interne */
    font-size: inherit;   /* Force le lien à prendre la taille du texte environnant */
    font-family: inherit; /* Force le lien à prendre la police du texte environnant */
}

.test {
    color: #2A2020;        /* Définit une couleur attractive (ex: bleu) */
    display: inline-block; /* Permet de mieux gérer l'espacement interne */
    text-decoration: none;
}

.test:hover {
    font-weight: bold;         /* Rend le texte gras au survol */
     color: #6B3A5E;
    text-decoration: underline; /* Ajoute le soulignement au survol */
}

/* ── Hero ────────────────────────────────────────────── */
header {
    padding: var(--space-xl) 0 var(--space-l);
}

.hero-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-l);
}

/* La signature : ligne verticale bordeaux à gauche du bloc nom */
.hero-text {
    border-left: 3px solid var(--clr-bordeaux);
    padding-left: var(--space-m);
}

.hero-label {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-bordeaux-light);
    margin-bottom: var(--space-s);
}

h1 {
    font-family: var(--ff-display);
    font-weight: 500;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    line-height: 1.08;
    color: var(--clr-text);
    margin-bottom: var(--space-s);
}

h1 em {
    font-style: italic;
    color: var(--clr-bordeaux);
}

.hero-tagline {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--clr-muted);
    margin-bottom: var(--space-m);
    line-height: 1.5;
}

.hero-bio {
    font-size: 0.95rem;
    color: var(--clr-text);
    max-width: 58ch;
    margin-bottom: var(--space-m);
}

.hero-contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    font-size: 0.82rem;
    color: var(--clr-muted);
}

.hero-contact a {
    color: var(--clr-bordeaux);
    text-decoration: none;
    border-bottom: 1px solid var(--clr-rule);
    padding-bottom: 1px;
    transition: border-color 0.2s, color 0.2s;
}

.hero-contact a:hover {
    color: var(--clr-text);
    border-color: var(--clr-bordeaux);
}

/* ── Sections communes ───────────────────────────────── */
section {
    padding: var(--space-l) 0;
    border-top: 1px solid var(--clr-rule);
}

.section-eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-bordeaux-light);
    margin-bottom: var(--space-m);
}

h2 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.7rem;
    color: var(--clr-text);
    margin-bottom: var(--space-m);
}

/* ============================================== */
/* AJUSTEMENT DE MARGE POUR LES TITRES DE SECTION   */
/* ============================================== */

h2 {
    margin-bottom: var(--space-s); /* Utilise l'espace S (0.8rem) défini dans vos tokens */
}

#travaux h2, 
#publications h2 {
    margin-top: var(--space-l); 
}


/* ── Recherche en cours ──────────────────────────────── */
.thesis-card {
    background: var(--clr-beige);
    border-left: 3px solid var(--clr-bordeaux);
    padding: var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) + 4px);
}

.thesis-card .card-meta {
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-bordeaux-light);
    margin-bottom: var(--space-xs);
}

.thesis-card h3 {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: var(--space-s);
    line-height: 1.4;
}

.thesis-card p {
    font-size: 0.9rem;
    color: var(--clr-muted);
    max-width: 62ch;
}

.thesis-card .card-supervisors {
    margin-top: var(--space-s);
    font-size: 0.82rem;
    color: var(--clr-muted);
}

.thesis-card .card-supervisors strong {
    color: var(--clr-text);
    font-weight: 400;
}

.thesis-card + h2 {
    margin-top: 2rem; /* Tu peux ajuster cette valeur selon tes goûts */
}

.themes-card {
    border-left: none;
}

/* Reproduit exactement le style des balises <strong> de tes directrices */
.themes-card p {
    color: var(--clr-text);
    font-weight: 400;
    font-size: 0.82rem; /* La taille héritée par ton bloc card-supervisors */
}

.themes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* On passe en Grid ! */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crée 3 colonnes de largeur identique */
    row-gap: var(--space-s, 0.5rem);       /* Espace vertical entre les mots */
    column-gap: 1.5rem;                    /* Espace horizontal entre les colonnes */
}

/* Le style de tes mots reste identique */
.themes-list li {
    color: var(--clr-text);
    font-size: 0.9rem;
    
    /* On utilise Flexbox pour un alignement parfait */
    display: flex;
    align-items: center; /* Aligne verticalement la puce avec le milieu du texte */
    gap: 0.4rem;         /* Gère l'espace entre la puce et le mot */
}

.themes-list li::before {
    content: "•";
    color: var(--clr-bordeaux);
    font-size: 1.2rem;
    line-height: 0; /* Neutralise la hauteur invisible du caractère */
    transform: translateY(-1px); /* Ajustement millimétré vers le haut (tu peux mettre -2px si besoin) */
}

/* --- LE PLACEMENT SUR MESURE --- */
/* Colonne 1 */
.themes-list li:nth-child(1) { grid-column: 1; grid-row: 1; } /* Culture */
.themes-list li:nth-child(2) { grid-column: 1; grid-row: 2; } /* Numérique */
.themes-list li:nth-child(3) { grid-column: 1; grid-row: 3; } /* Réseaux */

/* Colonne 2 */
.themes-list li:nth-child(4) { grid-column: 2; grid-row: 1; } /* Jeunesse */
.themes-list li:nth-child(6) { grid-column: 2; grid-row: 2; } /* Socialisation (6ème élément HTML) */

/* Colonne 3 */
.themes-list li:nth-child(5) { grid-column: 3; grid-row: 1; } /* Genre (5ème élément HTML) */
.themes-list li:nth-child(7) { grid-column: 3; grid-row: 2; } /* Beauté */

/* ── Publications ────────────────────────────────────── */
.pub-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.pub-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0 var(--space-m);
    align-items: start;
}

.pub-year {
    font-family: var(--ff-display);
    font-size: 1.1rem; 
    color: var(--clr-bordeaux-light);
    padding-top: 2px;
    
    /* Les modifications pour l'esthétique : */
    text-align: center; /* Centre les années l'une au-dessus de l'autre */
    line-height: 1.2;   /* Rapproche légèrement les deux lignes pour créer un bel effet "bloc" */
}

.pub-body .pub-title {
    font-family: var(--ff-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--clr-text);
    margin-bottom: 2px;
}

.pub-body .pub-meta {
    font-size: 0.82rem;
    color: var(--clr-muted);
}

.pub-body .pub-meta a {
    color: var(--clr-bordeaux);
    text-decoration: none;
    border-bottom: 1px solid var(--clr-rule);
}

.pub-placeholder {
    font-size: 0.88rem;
    color: var(--clr-muted);
    font-style: italic;
}

/* ── Parcours ────────────────────────────────────────── */
.timeline {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
}

.tl-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: 0 var(--space-m);
}

.tl-date {
   font-family: var(--ff-display);
    font-size: 1.1rem; 
    color: var(--clr-bordeaux-light);
    padding-top: 2px;
    
    /* Les modifications pour l'esthétique : */
    text-align: center; /* Centre les années l'une au-dessus de l'autre */
    line-height: 1.2;   /* Rapproche légèrement les deux lignes pour créer un bel effet "bloc" */
}

.tl-body .tl-title {
    font-weight: 400;
    font-size: 0.95rem;
    color: var(--clr-text);
    margin-bottom: 2px;
}

.tl-body .tl-sub {
    font-size: 0.82rem;
    color: var(--clr-muted);
}

/* ── Compétences ─────────────────────────────────────── */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-m);
}

.skill-group h3 {
    font-family: var(--ff-body);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-bordeaux-light);
    margin-bottom: var(--space-xs);
}

.skill-group ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.skill-group ul li {
    font-size: 0.88rem;
    color: var(--clr-text);
}

/* ── Footer ──────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--clr-rule);
    padding: var(--space-l) 0;
    text-align: center;
    font-size: 0.78rem;
    color: var(--clr-muted);
    letter-spacing: 0.06em;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
    .nav-links { display: none; }

    .pub-item,
    .tl-item {
    grid-template-columns: 1fr;
    }

    .pub-year,
    .tl-date {
    text-align: left;
    font-size: 0.75rem;
    }

    h1 { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* Alignement du logo UNIQUEMENT avec les étiquettes beiges */
@media (min-width: 768px) {
    .meta-and-logo {
        display: flex;
        justify-content: space-between;
        align-items: flex-end; /* Aligne les deux blocs par le bas */
        gap: var(--space-m);
    }
    
    .header-logo {
        flex-shrink: 0; /* Empêche le logo de rétrécir */
        margin-bottom: var(--space-m); /* Aligne parfaitement avec la marge des étiquettes beiges */
    }
    
    .header-logo img {
        max-width: 260px; /* Ton logo bien grand */
        height: auto;
        display: block;
        border-radius: 4px;
    }
}

/* Version mobile */
@media (max-width: 767px) {
    .meta-and-logo {
        display: flex;
        flex-direction: column;
    }
    .header-logo img {
        max-width: 140px;
        height: auto;
        margin-top: var(--space-s);
    }
}
/* ============================================== */
/* SECTION RÉVISÉE : ENSEIGNEMENT (Format Pub)    */
/* ============================================== */

#teaching {
    padding: var(--space-l) 0;
    border-top: 1px solid var(--clr-rule);
}

/* Conteneur de chaque item d'enseignement, utilisant la grille comme les publications */
.teaching-item {
    display: grid;
    grid-template-columns: 3.5rem 1fr; /* Colonne fixe pour l'année (3.5rem), colonne flexible pour le contenu (1fr) */
    gap: 0 var(--space-m);
    align-items: start;
    margin-bottom: var(--space-m);
}

/* Le bloc qui contient les informations de date/année à gauche (remplace .tl-date ou .pub-year) */
.te-date {
    font-family: var(--ff-display);
    font-size: 1.1rem; 
    color: var(--clr-bordeaux-light);
    padding-top: 2px;
    
    /* Les modifications pour l'esthétique : */
    text-align: center; /* Centre les années l'une au-dessus de l'autre */
    line-height: 1.2;   /* Rapproche légèrement les deux lignes pour créer un bel effet "bloc" */
}

/* Le bloc principal de contenu (le côté droit) */
.te-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Titre du cours, maintenant dans le flux normal */
.te-title {
    font-family: var(--ff-display);
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--clr-text);
    margin-bottom: 0.3rem;
}

/* Détails (Niveau, Semestre) - Ajout d'un petit style pour l'information secondaire */
.te-details {
    font-size: 0.82rem;
    color: var(--clr-muted);
    margin-bottom: 0.5rem;
}

/* Description du cours (le paragraphe) */
.te-description p {
    line-height: 1.6;
    font-size: 0.95rem;
}

p {
    text-align: justify;
    hyphens: auto; /* Active les coupures de mots automatiques */
    -webkit-hyphens: auto; /* Pour la compatibilité avec Safari/Chrome */
}

.btn-download {
    display: inline-block;
    margin-top: var(--space-m);
    padding: 0.4rem 1rem; /* Espacement intérieur réduit */
    background-color: var(--clr-bordeaux);
    color: #FAF7F2 !important;
    font-family: var(--ff-body);
    font-size: 0.7rem; /* Taille du texte légèrement diminuée */
    letter-spacing: 0.05em; /* Lettres un peu plus rapprochées */
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.2s;
}
 
.btn-download:hover {
    background-color: var(--clr-bordeaux-light);
    color: #FAF7F2 !important;
    text-decoration: none;
}