/* ==========================================================
   FEUILLE DE STYLE COMMUNE
   Utilisée par : index.html, research.html et teaching.html

   ========================================================== */


/* Importation de la police DM Sans */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");


/* ==========================================================
   1. COULEURS ET LARGEUR DU SITE
   Modifier ces valeurs change l'ensemble du site.
   ========================================================== */

:root {
  --paper: #f7f7f2;   /* Couleur de fond */
  --ink: #202923;     /* Couleur du texte principal */
  --accent: #37634b;  /* Couleur des liens et des accents */
  --line: #ccd3c9;    /* Couleur des bordures */
  --muted: #69756d;   /* Couleur du texte secondaire */
  --max: 2000px;      /* Largeur maximale du site */
}


/* ==========================================================
   2. RÉGLAGES GÉNÉRAUX
   ========================================================== */

/* Inclure les bordures et les espacements dans les dimensions */
* {
  box-sizing: border-box;
}

/* Défilement fluide vers les sections de la page */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}


/* ==========================================================
   3. LIENS
   ========================================================== */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Couleur lorsque la souris passe sur un lien */
a:hover {
  color: #1f412e;
}


/* ==========================================================
   4. BANDEAU ET MENU DE NAVIGATION
   ========================================================== */

/* Le bandeau reste visible pendant le défilement */
header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(247, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav {
  max-width: var(--max);
  margin: auto;
  padding: 18px 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Nom affiché dans le menu */
.brand {
  font-weight: 700;
  letter-spacing: -0.03em;
	font-size: 1.5rem;
}

/* Ensemble des liens du menu */
.navlinks {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.navlinks a {
  text-decoration: none;
  font-size: 1.5rem;
}


/* ==========================================================
   5. CONTENEUR PRINCIPAL
   ========================================================== */

.wrap {
  max-width: var(--max);
  margin: auto;
  padding: 0 5vw;
}


/* ==========================================================
   6. PRÉSENTATION EN HAUT DE LA PAGE D'ACCUEIL
   ========================================================== */

.hero {
  min-height: auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 7vw;
  align-items: center;
  padding: 90px 0 50px;
}

/* Petites mentions au-dessus des titres */
.eyebrow,
.kicker {
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

/* Grand titre de la page d'accueil */
.hero h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: 0.86;

  letter-spacing: -0.075em;
  margin: 22px 0 30px;
  max-width: 900px;
}

/* Texte de présentation */
.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  max-width: 600px;
}

/* Informations complémentaires sous la présentation */
.hero-meta {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 40px;
  color: var(--muted);
}

/* Illustration, sans photographie */
.density {
  width: 100%;
  aspect-ratio: 1;
  max-width: 480px;
  justify-self: end;
}


/* ==========================================================
   7. SECTIONS ET TITRES GÉNÉRAUX
   ========================================================== */

.section {
  border-top: 1px solid var(--line);
  padding: 80px 0;
}

/* Numéro à gauche, titre à droite */
.section-head {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4vw;
  margin-bottom: 42px;
}

/* Numéros des sections : 01, 02, 03… */
.num {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 0.8;

  color: var(--accent);
}

/* Titres de niveau 2 */
h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 0.9;

  letter-spacing: -0.06em;
  margin: 0;
}

/* Titres de niveau 3, notamment dans les cartes */
h3 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.1;

  letter-spacing: -0.03em;
  margin: 0 0 10px;
}


/* ==========================================================
   8. CARTES ET GRILLES
   ========================================================== */

/* Deux colonnes sur les grands écrans */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.card {
  border: 1px solid var(--line);
  padding: 26px;
  background: rgba(255, 255, 255, 0.22);
  min-height: 180px;

  transition: transform 0.2s, background 0.2s;
}

/* Léger déplacement de la carte au survol */
.card:hover {
  transform: translateY(-4px);
  background: #fff;
}

/* Petite étiquette en haut d'une carte */
.tag {
  font-size: 0.72rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}

/* Texte des cartes */
.card p {
  color: var(--muted);
  margin: 10px 0;
}

/* Flèche à droite */
.arrow {
  float: right;
  font-size: 1.3rem;
}


/* ==========================================================
   9. CONTACT ET PIED DE PAGE
   ========================================================== */

.contact {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.contact h2 {
  max-width: 700px;
}

footer {
  padding: 28px 5vw;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}


/* ==========================================================
   10. CONTENU DES PAGES RESEARCH ET TEACHING
   ========================================================== */

.source-content {
  padding: 40px 0 100px;
}

/* Limiter la largeur des blocs directement dans ce conteneur */
.source-content > div,
.source-content > p {
  max-width: 2000px;
}

/* Permettre aux liens longs de revenir à la ligne */
.source-content a {
  overflow-wrap: anywhere;
}

.source-content br {
  line-height: 2;
}


/* ----------------------------------------------------------
   TITRES DES PAGES : .responsive-title

   clamp(minimum, taille variable, maximum) :
   - 1.8rem : taille minimale ;
   - 4vw   : taille proportionnelle à la largeur de l'écran ;
   - 3rem  : taille maximale.

   Pour réduire encore les titres, diminuez ces valeurs.
   Une autre règle pour téléphone figure dans la section 11.
   ---------------------------------------------------------- */

.source-content .responsive-title {
  font-family: Georgia, serif;
  font-weight: 400;

  /* Taille des titres */
  font-size: clamp(1.8rem, 4vw, 3rem);

  /* Espacement entre les lignes du titre */
  line-height: 1.1;

  text-align: left !important;

  /* Espace au-dessus : 30px ; en dessous : 70px */
  margin: 30px 0 70px;
}

/* Sous-titres des pages Research et Teaching */
.source-content .responsive-subtitle {
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1.05;

  /* Espace au-dessus : 52px ; en dessous : 16px */
  margin: 52px 0 16px;
}

/* Texte et liens du contenu */
.source-content .responsive-text,
.source-content .responsive-link {
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Lignes de séparation */
.source-content hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 52px 0;
}

/* Règle conservée du fichier initial */
.source-content body {
  margin: 0;
}


/* ==========================================================
   11. ADAPTATION AUX PETITS ÉCRANS

   Ces règles s'appliquent uniquement lorsque la largeur
   de l'écran est inférieure ou égale à 760px.
   Elles prennent le dessus sur les règles précédentes.
   ========================================================== */

@media (max-width: 760px) {

  /* Menu disposé verticalement */
  .nav {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Présentation sur une seule colonne */
  .hero {
    grid-template-columns: 1fr;
    padding: 70px 0;
  }

  /* Illustration plus petite */
  .density {
    justify-self: start;
    max-width: 330px;
  }

  /* Réduire l'espace réservé aux numéros */
  .section-head {
    grid-template-columns: 70px 1fr;
    gap: 18px;
  }

  /* Cartes sur une seule colonne */
  .grid {
    grid-template-columns: 1fr;
  }

  .contact {
    display: block;
  }

  /* TITRES DES PAGES SUR TÉLÉPHONE : modifier cette taille ici */
  .source-content .responsive-title {
    font-size: 1.8rem;
  }

} /* Fin des règles pour petits écrans */


/* ==========================================================
   12. ACCESSIBILITÉ : NAVIGATION AU CLAVIER
   Conserver ces règles pour rendre la sélection visible.
   ========================================================== */

:focus-visible {
  outline: 3px solid #b45b28;
  outline-offset: 4px;
}

.card:focus-visible {
  transform: translateY(-4px);
  background: #fff;
}