/* ==========================================================================
   css/pages.css — Page-specific section styles
   ==========================================================================
   Tasks 5 & 6: Accueil — Objectif principal (#objectif) & Activités (#activites)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Accueil: Objectif principal du projet (#objectif)
   AGENTS.md sections 6.1 & 12:
   - Vertical CSS gradient: linear-gradient(to bottom, rgba(82,105,83,0.55) 0%, #ffffff 100%)
     defined as --gradient-objectif in css/tokens.css.
   - Desktop padding: ~60 / 40 / 50 / 40 px (--space-objectif-padding).
   - Ends in pure #FFFFFF so it joins seamlessly with Activités méthodologiques.
   -------------------------------------------------------------------------- */
.objectif {
  background: var(--gradient-objectif);
  padding: var(--space-12) var(--space-6); /* Provisional mobile padding: 48px 24px */
}

@media (min-width: 900px) {
  .objectif {
    padding: var(--space-objectif-padding); /* Authoritative: 60px 40px 50px 40px */
  }
}

.objectif__inner {
  max-width: 1040px; /* Provisional: matches content width in reference/01_accueil_pleine_page.png */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-10); /* Provisional: vertical rhythm between title, body, and counters */
}

.objectif__title {
  text-align: center;
  color: var(--color-black);
}

/* Two-column upper block: illustration (left) + justified paragraph (right) */
.objectif__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 900px) {
  .objectif__body {
    /* Provisional: ~42% illustration column, ~58% text column as in 01_accueil_pleine_page.png */
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: var(--space-12);
  }
}

.objectif__media {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--radius-md); /* Provisional: 12px rounded corners */
  overflow: hidden;
}

/* The source file (1024x1024) is framed horizontally in 01_accueil_pleine_page.png */
.objectif__image {
  width: 100%;
  aspect-ratio: 16 / 9.5; /* Provisional: matches landscape framing in 01_accueil_pleine_page.png */
  object-fit: cover;
  object-position: center 45%;
  border-radius: var(--radius-md);
}

.objectif__text {
  text-align: justify;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); /* Provisional: ~17px -> 20.8px */
  line-height: 1.55;
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   2. Accueil: 4 Animated Counters (.objectif__counters)
   AGENTS.md section 6.1 & reference/01_detail-compteurs-accueil.png:
   - 4 counters in a row on desktop.
   - Thin horizontal line above each counter (owner-confirmed).
   - tabular-nums prevents horizontal jitter while digits count up.
   -------------------------------------------------------------------------- */
.objectif__counters {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 600px) {
  .objectif__counters {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 900px) {
  .objectif__counters {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
  }
}

.counter {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle); /* Owner-confirmed thin top line */
  display: flex;
  flex-direction: column;
  gap: var(--space-objectif-gap); /* Authoritative: 5px gap between number and label */
}

.counter__value {
  font-size: var(--text-counter); /* Provisional: clamp(2.25rem, 1.8rem + 2vw, 3rem) */
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-black);
  font-variant-numeric: tabular-nums;
}

.counter__label {
  font-size: var(--text-base); /* Provisional: 16px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-text-primary);
  max-width: 18ch;
}

/* --------------------------------------------------------------------------
   3. Accueil: Activités méthodologiques (#activites) & Stacking Cards
   AGENTS.md sections 6.1 & 12:
   - Vertical gradient: linear-gradient(to bottom, #ffffff 0%, #ffffff 70%, #e1e1e1 100%)
     defined as --gradient-activites in css/tokens.css.
   - Starts pure #FFFFFF (seamless join with #objectif) and ends #E1E1E1
     (seamless join with .site-footer).
   - No ancestor may have overflow: hidden so position: sticky works.
   -------------------------------------------------------------------------- */
.activites {
  background: var(--gradient-activites);
  padding: var(--space-12) var(--space-6) var(--space-16); /* Provisional: 48px 24px 64px */
}

@media (min-width: 900px) {
  .activites {
    padding: var(--space-12) var(--space-10) var(--space-16); /* Provisional: 48px 40px 64px */
  }
}

.activites__inner {
  max-width: 1000px; /* Provisional: matches card width in 01_accueil_pleine_page.png */
  margin: 0 auto;
}

.activites__title {
  text-align: center;
  color: var(--color-black);
  margin-bottom: var(--space-10);
}

/* Stacking cards list: no overflow: hidden on this container */
.activites__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-12); /* Provisional: 48px vertical scroll space between cards */
}

/* Solid white rounded card with soft shadow that separates it from the white upper area */
.activite-card {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6)); /* Provisional: ~88px from top of viewport */
  background-color: var(--color-white);
  border-radius: var(--radius-lg); /* Provisional: 20px */
  box-shadow: var(--shadow-card);  /* Provisional: 0 8px 30px rgba(0, 0, 0, 0.08) */
  padding: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .activite-card {
    grid-template-columns: minmax(280px, 44%) 1fr; /* Provisional: ~44% image left, ~56% text right */
    gap: var(--space-10);
    padding: var(--space-6) var(--space-10) var(--space-6) var(--space-6);
  }
}

.activite-card__media {
  width: 100%;
  border-radius: var(--radius-md); /* Provisional: 12px inner image radius */
  overflow: hidden;
}

.activite-card__image {
  width: 100%;
  aspect-ratio: 16 / 10.5; /* Provisional: uniform landscape card illustration ratio */
  object-fit: cover;
  object-position: center 35%;
  border-radius: var(--radius-md);
}

.activite-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Centered card title (h3) + left-aligned paragraph as in 01_01a_cartes-activites-accueil.png */
.activite-card__title {
  text-align: center;
  color: var(--color-black);
  font-size: var(--text-lg); /* Provisional: 20px */
  font-weight: var(--weight-bold);
}

.activite-card__text {
  text-align: left;
  color: var(--color-text-primary);
  font-size: var(--text-base); /* Provisional: 16px */
  line-height: var(--leading-normal);
}

/* ==========================================================================
   Task 8: Informations générales — Portrait de la pomme de terre (#portrait)
   AGENTS.md section 6.2 & reference/02_a_detail-section-portrait.png:
   - Two columns on desktop:
     Left ("Informations générales"): bullet facts + 2 photos (Plante, Fleur)
     with captions, author credits, and hover zoom effect.
     Right ("Données sur la production de pomme de terre"): 3-slide carousel
     with round arrows and clickable links in captions.
   ========================================================================== */

.portrait {
  padding: var(--space-12) 0 var(--space-8); /* Provisional: 48px top, 32px bottom */
}

.portrait__title {
  text-align: center;
  color: var(--color-black);
  margin-bottom: var(--space-10);
}

.portrait__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
}

@media (min-width: 900px) {
  .portrait__grid {
    /* Provisional: ~44% left facts/photos column, ~56% right production carousel */
    grid-template-columns: minmax(300px, 44%) 1fr;
    gap: var(--space-12);
  }
}

.portrait__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.portrait__subtitle {
  text-align: center;
  color: var(--color-black);
  font-size: var(--text-xl); /* Provisional: 24px (matches 02_a_detail-section-portrait.png) */
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}

/* Left column: bullet facts */
.portrait__facts {
  font-size: var(--text-sm); /* Provisional: 14px */
  line-height: var(--leading-normal);
  margin-bottom: var(--space-6);
  padding-left: var(--space-5);
}

/* Left column: 2 side-by-side photos (Plante, Fleur) */
.portrait__photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 480px) {
  .portrait__photos {
    grid-template-columns: repeat(2, 1fr);
  }
}

.portrait-photo {
  display: flex;
  flex-direction: column;
}

/* Overflow: hidden wrapper for smooth hover zoom (AGENTS.md section 6.2) */
.portrait-photo__frame {
  width: 100%;
  aspect-ratio: 4 / 5; /* Provisional: vertical portrait ratio in 02_a_detail-section-portrait.png */
  overflow: hidden;
  background-color: var(--color-footer);
}

.portrait-photo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--transition-normal);
}

.portrait-photo__frame:hover .portrait-photo__img {
  transform: scale(1.06); /* Provisional: subtle zoom on hover */
}

.portrait-photo__caption {
  padding-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portrait-photo__name {
  text-align: center;
  font-size: var(--text-base); /* Provisional: 16px */
  font-weight: var(--weight-regular);
  color: var(--color-black);
}

.portrait-photo__credit {
  text-align: left;
  font-size: var(--text-xs); /* Provisional: 12px */
  color: var(--color-text-primary);
}

/* Right column: Production carousel (3 slides) */
.portrait__carousel {
  margin-top: var(--space-2);
}

.portrait__slide-media {
  width: 100%;
  height: 240px; /* Provisional mobile height so slides don't jump */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 600px) {
  .portrait__slide-media {
    height: 300px; /* Provisional desktop height matching 02_a_detail-section-portrait.png */
  }
}

.portrait__slide-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.portrait__slide-caption {
  font-size: var(--text-base); /* Provisional: 16px */
  font-weight: var(--weight-bold);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-black);
  max-width: 48ch;
  margin: 0 auto;
}

/* Shared horizontal section divider (<hr class="section-divider">) */
.section-divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-8) 0;
}

/* ==========================================================================
   Task 9: Informations générales — Les phytopathogènes (#phytopathogenes)
   & Modal <dialog> Carousels (.pathogen-dialog)
   AGENTS.md section 6.2, content/02_phytopathogenes.md, and /reference/02_b*.png
   ========================================================================== */

.pathogens {
  padding: var(--space-8) 0 var(--space-16); /* Provisional: 32px top, 64px bottom */
}

.pathogens__title {
  text-align: center;
  color: var(--color-black);
  margin-bottom: var(--space-3);
}

.pathogens__intro {
  text-align: center;
  color: var(--color-black);
  font-size: var(--text-base); /* Provisional: 16px */
  font-weight: var(--weight-bold);
  font-style: italic;
  margin-bottom: var(--space-10);
}

/* 3x2 grid on desktop (>= 900px), 2 columns tablet (>= 600px), 1 column mobile */
.pathogens__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-8);
}

@media (min-width: 600px) {
  .pathogens__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .pathogens__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12) var(--space-10);
  }
}

.pathogen-card {
  display: flex;
  flex-direction: column;
}

/* Image button trigger opening the modal <dialog> */
.pathogen-card__trigger {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3; /* Provisional: uniform card thumbnail proportion in 02_b00 */
  padding: 0;
  border: none;
  background-color: transparent;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.pathogen-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--transition-normal);
}

/* Card 1 (Flétrissement bactérien) is an isolated potato cross-section on white */
.pathogen-card__img--contain {
  object-fit: contain;
}

.pathogen-card__trigger:hover .pathogen-card__img,
.pathogen-card__trigger:focus-visible .pathogen-card__img {
  transform: scale(1.05); /* Provisional: hover zoom effect */
}

.pathogen-card__name {
  font-size: var(--text-md); /* Provisional: 18px */
  font-weight: var(--weight-regular);
  color: var(--color-black);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-1);
}

.pathogen-card__latin {
  font-size: var(--text-xs); /* Provisional: 12px */
  font-style: italic;
  color: var(--color-black);
  line-height: var(--leading-snug);
  min-height: 2.5em; /* Keeps the "Source :" line aligned across each row */
  display: flex;
  align-items: center;
}

.pathogen-card__source {
  font-size: var(--text-xs); /* Provisional: 12px */
  color: var(--color-black);
  margin-top: var(--space-1);
}

.pathogen-card__source a {
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Pathogen Modal (<dialog class="pathogen-dialog">)
   AGENTS.md section 6.2 & content/02_phytopathogenes.md ("Mise en page commune"):
   - Vertical translucent green-to-slate gradient (--gradient-dialog)
   - Rounded corners, close "X" button at top right (dark circle, green letter)
   - Header: pathogen name (bold, black) + Latin name (italic, black), left-aligned
   - Slide content: title (bold, black) + bullet list (white) or 3-card row
   -------------------------------------------------------------------------- */
body.is-dialog-open {
  overflow: hidden;
}

.pathogen-dialog {
  width: min(92vw, 920px); /* Provisional: modal width in 02_b01_popup-fletrissement.png */
  max-height: 90vh;
  margin: auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg); /* Provisional: 20px rounded corners */
  background: var(--gradient-dialog);
  color: var(--color-white);
  box-shadow: var(--shadow-dialog);
  overflow-x: hidden;
  overflow-y: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pathogen-dialog::backdrop {
  background-color: var(--color-dialog-backdrop);
}

.pathogen-dialog__panel {
  position: relative;
  padding: var(--space-6) var(--space-4) var(--space-6);
}

@media (min-width: 600px) {
  .pathogen-dialog__panel {
    padding: var(--space-8) var(--space-8) var(--space-6);
  }
}

/* Round dark close button ("X") at top right with green #95B134 icon */
.pathogen-dialog__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: none;
  background-color: var(--color-dialog-btn-bg); /* #1F2430 */
  color: var(--color-green-accent);            /* #95B134 */
  font-size: var(--text-lg);
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

@media (min-width: 600px) {
  .pathogen-dialog__close {
    top: var(--space-6);
    right: var(--space-6);
  }
}

.pathogen-dialog__close:hover {
  background-color: var(--color-black);
  transform: scale(1.05);
}

/* Left-aligned dialog header (black title + black italic Latin name) */
.pathogen-dialog__header {
  padding-right: var(--space-12);
  margin-bottom: var(--space-6);
  text-align: left;
}

@media (min-width: 600px) {
  .pathogen-dialog__header {
    padding-left: var(--space-12);
  }
}

.pathogen-dialog__title {
  color: var(--color-black);
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* Provisional: 24px -> 32px */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.pathogen-dialog__subtitle {
  color: var(--color-black);
  font-size: var(--text-base); /* Provisional: 16px */
  font-style: italic;
  font-weight: var(--weight-medium);
}

/* Override .carousel--single centered text inside pathogen dialogs */
.pathogen-dialog .carousel--single .carousel__slide {
  align-items: stretch;
  text-align: left;
}

.pathogen-dialog__slide {
  width: 100%;
  min-height: 320px; /* Provisional: keeps modal height steady across slides */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-3);
}

@media (min-width: 600px) {
  .pathogen-dialog__slide {
    padding: 0 var(--space-4);
    min-height: 360px;
  }
}

.pathogen-dialog__slide-title {
  color: var(--color-black);
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); /* Provisional: 21.6px -> 28px */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}

@media (min-width: 600px) {
  .pathogen-dialog__slide-title {
    padding-left: var(--space-4);
  }
}

.pathogen-dialog__list {
  color: var(--color-white);
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1875rem); /* Provisional: ~15.2px -> 19px */
  font-weight: var(--weight-medium);
  line-height: 1.48;
  padding-left: var(--space-6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.pathogen-dialog__sublist {
  list-style-type: disc;
  padding-left: var(--space-6);
  margin-top: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pathogen-dialog__block + .pathogen-dialog__block {
  margin-top: var(--space-4);
}

/* --------------------------------------------------------------------------
   Shared PVY & PLRV Tolerance Tables (.zcp-table)
   Matches assets/images/informations-generales/pathogens/02_virus-pvy/tableau_*.png
   -------------------------------------------------------------------------- */
.zcp-table-slot {
  margin: var(--space-3) 0;
  overflow-x: auto;
}

.zcp-table {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: var(--color-white);
  color: var(--color-black);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--text-sm);
}

.zcp-table caption {
  caption-side: top;
  background-color: var(--color-white);
  color: var(--color-black);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-2) var(--space-3);
  border-top: 1.5px solid var(--color-black);
  border-bottom: 1px solid var(--color-black);
}

.zcp-table th,
.zcp-table td {
  padding: var(--space-1) var(--space-3);
  text-align: center;
  color: var(--color-black);
}

.zcp-table thead th {
  font-weight: var(--weight-bold);
  border-bottom: 1px solid var(--color-black);
}

.zcp-table tbody td {
  font-weight: var(--weight-regular);
  border-bottom: 1.5px solid var(--color-black);
}

/* --------------------------------------------------------------------------
   Pucerons 3-Card Rows (Espèces & Prédateurs naturels: .species-card)
   Matches reference/02_b05_popup-pucerons.png
   -------------------------------------------------------------------------- */
.species-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: left;
  color: var(--color-white);
}

.species-card__media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.15);
}

.species-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.species-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-1);
}

.species-card__name {
  font-size: var(--text-md); /* Provisional: 18px */
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--leading-snug);
  min-height: 2.6em;
  display: flex;
  align-items: center;
}

.species-card__latin {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-style: italic;
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.species-card__order {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

.species-card__source {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-weight: var(--weight-semibold);
  color: var(--color-white);
}

/* In 02_b05_popup-pucerons.png, "Source :" is white and the link ("iriis") is black */
.species-card__source a {
  color: var(--color-black);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.species-card__source a:hover {
  color: var(--color-white);
}

/* ==========================================================================
   Task 10: Notre équipe — Étudiant(e)s, Professionnel de recherche, Chercheurs
   AGENTS.md section 6.3, content/05_equipe.md, & reference/03_equipe_pleine_page.png:
   - Section headings use the green accent colour (--color-green-accent: #95B134).
   - Étudiant(e)s: 5 people, grid of 3 + 2 centered, circular photos, bold name,
     bold degree, small justified description.
   - Professionnel de recherche: 1 person, square photo, heading on the left
     and photo + name on the right between horizontal dividers.
   - Chercheurs: 4 people in a row, square photos for real photos and round for
     placeholder avatars, bold name + italic role.
   ========================================================================== */

.team-section {
  padding: var(--space-10) 0 var(--space-12); /* Provisional: 40px top, 48px bottom */
}

.team-section__title {
  text-align: center;
  margin-bottom: var(--space-10);
}

/* --------------------------------------------------------------------------
   1. Étudiant(e)s Grid (3 + 2 centered on desktop >= 900px)
   -------------------------------------------------------------------------- */
.students-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 980px; /* Provisional: matches column span in 03_equipe_pleine_page.png */
  margin: 0 auto;
}

@media (min-width: 600px) {
  .students-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-8);
  }
}

@media (min-width: 900px) {
  /* 6-column grid: each card spans 2 columns (3 per row);
     4th card starts at column 2 so cards 4 & 5 sit centered underneath */
  .students-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-12) var(--space-10);
  }

  .student-card {
    grid-column: span 2;
  }

  .student-card:nth-child(4) {
    grid-column: 2 / span 2;
  }
}

.student-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 280px; /* Provisional: keeps justified text lines comfortable to read */
  margin: 0 auto;
}

.student-card__avatar {
  width: 148px;  /* Provisional: circular avatar diameter in 03_equipe_pleine_page.png */
  height: 148px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-footer);
  margin-bottom: var(--space-5);
  flex-shrink: 0;
}

.student-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.student-card__name {
  font-size: var(--text-lg); /* Provisional: 20px */
  font-weight: var(--weight-bold);
  color: var(--color-black);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.student-card__degree {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-weight: var(--weight-bold);
  color: var(--color-black);
  margin-bottom: var(--space-4);
}

.student-card__bio {
  font-size: var(--text-xs); /* Provisional: 12px */
  line-height: 1.55;
  color: var(--color-text-primary);
  text-align: justify;
  width: 100%;
}

/* --------------------------------------------------------------------------
   2. Professionnel de recherche (heading left, square photo + name right)
   -------------------------------------------------------------------------- */
.team-pro {
  padding: var(--space-4) 0;
}

.team-pro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 980px;
  margin: 0 auto;
}

.team-pro__title {
  text-align: center;
}

@media (min-width: 600px) {
  .team-pro__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-8);
  }

  .team-pro__title {
    text-align: left;
  }
}

/* --------------------------------------------------------------------------
   3. Chercheurs Grid (4 columns on desktop >= 900px)
   -------------------------------------------------------------------------- */
.researchers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  max-width: 980px;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .researchers-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10) var(--space-8);
  }
}

@media (min-width: 900px) {
  .researchers-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.researcher-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.researcher-card__photo {
  width: 148px;  /* Provisional: 148x148 square/round photo size in 03_equipe_pleine_page.png */
  height: 148px;
  overflow: hidden;
  background-color: var(--color-footer);
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.researcher-card__photo--square {
  border-radius: 0;
}

.researcher-card__photo--round {
  border-radius: var(--radius-full);
}

.researcher-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.researcher-card__name {
  font-size: var(--text-lg); /* Provisional: 20px */
  font-weight: var(--weight-bold);
  color: var(--color-black);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.researcher-card__role {
  font-size: var(--text-xs); /* Provisional: 12px */
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--color-black);
}

/* ==========================================================================
   Task 11: Notre équipe — Institutions Infinite Logo Marquee (#institutions)
   AGENTS.md section 6.3 & reference/03_detail-section-institutions-*.png:
   - Pure CSS infinite loop: duplicated list + translateX(-50%), linear, ~25s.
   - Faded left/right edges via mask-image.
   - Pause on hover and keyboard focus.
   - Use horizontal padding on items, NOT gap, so -50% is seamless.
   - Static wrapped row when prefers-reduced-motion: reduce is active.
   ========================================================================== */

.institutions {
  padding: var(--space-8) 0 var(--space-16); /* Provisional: 32px top, 64px bottom */
}

.marquee {
  position: relative;
  width: 100%;
  max-width: 980px; /* Provisional: matches section width in 03_equipe_pleine_page.png */
  margin: 0 auto;
  overflow: hidden;
  padding: var(--space-4) 0;
  /* Faded edges via mask-image (AGENTS.md section 6.3) */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000000 10%,
    #000000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000000 10%,
    #000000 90%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 25s linear infinite;
}

/* Pause animation on mouse hover or keyboard focus */
.marquee:hover .marquee__track,
.marquee:focus .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* Use horizontal padding (NOT gap) so Set 1 and Set 2 have identical widths */
.marquee__item {
  margin: 0;
  padding: 0 var(--space-8); /* Provisional: 32px horizontal padding on each side */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee__logo {
  height: 88px;       /* Provisional: logo strip height in 03_detail-section-institutions-*.png */
  max-width: 220px;   /* Provisional: keeps wide horizontal logos proportional */
  width: auto;
  object-fit: contain;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Reduced motion: static, centered wrapped row with duplicate set hidden */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
    overflow: visible;
  }

  .marquee__track {
    width: 100%;
    animation: none;
    transform: none;
  }

  .marquee__list {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }

  .marquee__list[aria-hidden="true"] {
    display: none;
  }

  .marquee__item {
    padding: var(--space-4) var(--space-6);
  }
}

/* ==========================================================================
   Task 12: Documents d'intérêt — Video Carousel with YouTube Facade (#videos)
   AGENTS.md section 6.4, content/04_videos.json, & reference/04_*.png:
   - Intro text, then a white rounded card with soft shadow containing a
     7-slide video carousel (arrows + dots).
   - Click-to-load YouTube facade (thumbnail + play button -> youtube-nocookie
     iframe on click) that pauses/resets when changing slide.
   ========================================================================== */

.docs-section {
  padding: var(--space-10) 0 var(--space-8); /* Provisional: 40px top, 32px bottom */
}

.docs-section__title {
  text-align: center;
  color: var(--color-black);
  margin-bottom: var(--space-4);
}

.docs-section__intro {
  text-align: center;
  color: var(--color-text-primary);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); /* Provisional: 16px -> 19px */
  line-height: var(--leading-normal);
  max-width: 72ch;
  margin: 0 auto var(--space-8);
}

/* White rounded card wrapper with soft shadow (matches 04_detail-carrousel-videos.png) */
.video-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg); /* Provisional: 20px */
  box-shadow: var(--shadow-card);  /* Provisional: 0 8px 30px rgba(0, 0, 0, 0.08) */
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-6);
}

@media (min-width: 600px) {
  .video-card {
    padding: var(--space-8) var(--space-6) var(--space-6);
  }
}

.video-slide__title {
  color: var(--color-black);
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); /* Provisional: ~18.4px -> 23.2px */
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

/* Click-to-load 16:9 YouTube facade */
.video-facade {
  position: relative;
  width: 100%;
  max-width: 660px; /* Provisional: matches video player width in 04_detail-carrousel-videos.png */
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: var(--radius-md); /* Provisional: 12px rounded video corners */
  overflow: hidden;
  background-color: var(--color-black);
  cursor: pointer;
}

.video-facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--transition-normal);
}

.video-facade:hover .video-facade__thumb {
  transform: scale(1.02);
}

/* Centered dark rounded-rectangle play badge matching 04_detail-carrousel-videos.png */
.video-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 60px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background-color: rgba(35, 35, 35, 0.82);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.video-facade:hover .video-facade__play,
.video-facade__play:hover {
  background-color: rgba(0, 0, 0, 0.94);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-facade__play-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.video-facade__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 3;
}

.video-facade--playing {
  cursor: default;
}

.video-facade--playing .video-facade__thumb,
.video-facade--playing .video-facade__play {
  display: none;
}

/* In 04_detail-carrousel-videos.png, the 7-dot pill overlaps the bottom edge of the video */
.video-carousel .carousel__dots {
  position: relative;
  z-index: 4;
  margin-top: -16px;
}

/* ==========================================================================
   Task 13: Documents d'intérêt — Présentations Carousel (#presentations)
   AGENTS.md section 6.4, content/03_documents.md, & reference/04_detail-carrousel-presentations.png:
   - 2-slide centered layout: cover image, title, "Lien vers le fichier : URL",
     and short description.
   - On hover/focus the image zooms and a message "Cliquez ici pour ouvrir le
     fichier" appears (visible by default on touch devices).
   ========================================================================== */

.presentations-carousel {
  max-width: 920px; /* Provisional: matches arrow span in 04_detail-carrousel-presentations.png */
  margin: 0 auto;
}

/* Reusable clickable document preview wrapper with hover zoom + overlay message */
.doc-preview {
  position: relative;
  display: block;
  width: 100%;
  max-width: 360px; /* Provisional: cover image width in 04_detail-carrousel-presentations.png */
  margin: 0 auto var(--space-3);
  overflow: hidden;
  text-decoration: none;
  background-color: var(--color-footer);
}

.doc-preview__img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform var(--transition-normal);
}

.doc-preview:hover .doc-preview__img,
.doc-preview:focus-visible .doc-preview__img {
  transform: scale(1.05);
}

/* Hover message overlay ("Cliquez ici pour ouvrir le fichier") */
.doc-preview__badge {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-2) var(--space-3);
  background-color: rgba(17, 17, 17, 0.82);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.doc-preview:hover .doc-preview__badge,
.doc-preview:focus-visible .doc-preview__badge {
  opacity: 1;
  transform: translateY(0);
}

/* Visible by default on touch devices (AGENTS.md section 6.4) */
@media (hover: none) {
  .doc-preview__badge {
    opacity: 1;
    transform: translateY(0);
  }
}

.presentation-slide__title {
  color: var(--color-black);
  font-size: clamp(1.125rem, 1rem + 0.55vw, 1.45rem); /* Provisional: 18px -> 23.2px */
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  max-width: 56ch;
  margin: 0 auto;
}

.presentation-slide__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-xs); /* Provisional: 12px */
  font-weight: var(--weight-bold);
  color: var(--color-black);
  margin: 0 auto;
}

.presentation-slide__link a {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-weight: var(--weight-bold);
  color: var(--color-black);
  text-decoration: none;
}

.presentation-slide__link a:hover {
  text-decoration: underline;
}

.presentation-slide__desc {
  font-size: var(--text-sm); /* Provisional: 14px */
  color: var(--color-text-primary);
  line-height: var(--leading-normal);
  max-width: 60ch;
  margin: var(--space-2) auto 0;
}

/* ==========================================================================
   Task 14: Documents d'intérêt — Affiches 6-Slide Carousel (#affiches)
   AGENTS.md section 6.4, content/03_documents.md, & reference/04_detail-carrousel-affiches.png:
   - Side-by-side layout on desktop (>= 900px) via .carousel--split:
     poster image on the left; centered title, link line ("Lien vers le fichier ⇒"
     + URL) and full citation on the right.
   ========================================================================== */

.docs-section--last {
  padding-bottom: var(--space-16); /* Provisional: 64px bottom padding before footer */
}

.affiches-carousel {
  max-width: 980px; /* Provisional: matches arrow span in 04_detail-carrousel-affiches.png */
  margin: 0 auto;
}

.affiche-slide__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

@media (min-width: 600px) {
  .affiche-slide__media {
    min-height: 300px; /* Keeps carousel height steady across landscape/square/portrait posters */
  }
}

.doc-preview--poster {
  width: fit-content;
  max-width: 340px;
  margin: 0 auto;
  background-color: transparent;
}

.doc-preview--poster .doc-preview__img {
  width: auto;
  max-width: 100%;
  max-height: 280px; /* Fits landscape, square, and portrait posters without cropping */
  object-fit: contain;
  margin: 0 auto;
}

.affiche-slide__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.affiche-slide__title {
  text-align: center;
  color: var(--color-black);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); /* Provisional: ~19.2px -> 24px */
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

/* Split link row ("Lien vers le fichier ⇒" on left, URL on right) matching 04_detail-carrousel-affiches.png */
.affiche-slide__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}

.affiche-slide__link-label {
  font-size: var(--text-base); /* Provisional: 16px */
  font-weight: var(--weight-bold);
  font-style: italic;
  color: var(--color-black);
}

.affiche-slide__link a {
  font-size: var(--text-sm); /* Provisional: 14px */
  font-weight: var(--weight-bold);
  color: var(--color-text-muted);
  text-decoration: none;
}

.affiche-slide__link a:hover {
  color: var(--color-black);
  text-decoration: underline;
}

.affiche-slide__citation {
  font-size: var(--text-xs); /* Provisional: 12px */
  color: var(--color-text-primary);
  line-height: 1.6;
  text-align: left;
  max-width: 58ch;
  margin: 0 auto;
}

/* ==========================================================================
   Task 17 (404 Page): Page introuvable (404.html)
   Reuses existing tokens, typography, card shadow, and button styles.
   ========================================================================== */

.not-found {
  padding: var(--space-12) 0 var(--space-16);
}

.not-found__card {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 600px) {
  .not-found__card {
    padding: var(--space-12) var(--space-10);
  }
}

.not-found__code {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--color-green-accent); /* #95B134 */
  margin: 0;
}

.not-found__title {
  color: var(--color-black);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin: 0;
}

.not-found__text {
  color: var(--color-text-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-width: 48ch;
  margin: 0 auto;
}

.not-found__actions {
  margin-top: var(--space-4);
}

.not-found__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-button-dark);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.not-found__btn:hover {
  background-color: var(--color-button-dark-hover);
}