/* ==========================================================================
   InTest — rd.css
   Page « Bancs de recherche & développement » (bancs-essais-rd.html).
   Chargée après main.css. Maquette : Figma 6038:3635 (desktop 1680 px).

   1. Réglages des composants mutualisés (main.css)
   4. Hero R&D (.hero--rd) et navigation interne
   5. Sections de contenu
   6. Responsive
   ========================================================================== */

/* 1. Composants mutualisés (main.css) : rubrique courante, fil d'Ariane, navigation interne.
   Réglage propre à la maquette R&D : libellés de la navigation interne 1 px plus bas. */
.page-nav {
  --subnav-pt: 1.5rem;
}

/* 4. Hero R&D ------------------------------------------------------------------
   Calques réels de la maquette (6038:3637) : dégradé + ciel + voile 50 %
   (identiques à l'accueil) ; le calque « bâtiment » est masqué sur cette page.
   Corps : rail | titre (colonne de 722 px) | photo 500 × 500, puis la navigation
   interne (.page-nav, 64 px) posée sur le bas du hero. */
.hero--rd {
  --hero-rd-photo-w: clamp(18.75rem, 29.762vw, 31.25rem); /* 500 px @1680 */
  --hero-rd-pr: clamp(1.5rem, 100vw / 12 - 3.75rem, 5rem); /* marge droite du titre : 80 px @1680 → 40 px @1200 */
}

/* Filets blancs à 15 % sur cette maquette (20 % sur l'accueil) ;
   en bas, la place de la navigation interne qui vient se poser dessus (marge négative) */
.hero--rd .hero__grid {
  padding-bottom: 4rem;
  border-left-color: var(--white-15);
}

.hero--rd .hero__body {
  align-items: flex-start;
  min-height: 0;
  padding-top: 6.25rem;
}

.hero--rd .hero__rail {
  align-self: stretch;
  padding: 0 var(--rail-px) 2.5rem;
  border-right-color: var(--white-15);
}

.hero--rd .hero__main {
  container-type: inline-size;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4rem;
  min-height: 0;
  padding: 0 var(--hero-rd-pr) 2.5rem var(--main-px);
}

/* H1 67 px (style « ml-light ») : échelle fluide du H1 d'accueil × 67/77, plafonnée par
   la largeur de la colonne pour que « Bancs de recherche » (≈ 8,4 em) tienne sur une ligne. */
.hero--rd .hero__title {
  padding-left: 0;
  font-size: calc(var(--fs-display) * 67 / 77); /* repli sans unités de conteneur */
  font-size: min(11.5cqi, var(--fs-display) * 67 / 77);
}

.hero-rd__titles {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.hero-rd__lead {
  color: var(--white-70);
}

/* Photo carrée, 6 px sous le haut de la colonne titre (maquette) */
.hero-rd__media {
  flex: none;
  width: var(--hero-rd-photo-w);
  aspect-ratio: 1;
  margin-top: 0.375rem;
}

/* 5. Sections de contenu -----------------------------------------------------------
   Grille à rail standard. Filets de cette maquette : noir 10 % (navy 10 % sur l'accueil). */
.rd-flex,
.rd-examples,
.rd-lab {
  --line: rgb(0 0 0 / 0.1);
  --rail-pt: 3rem;
  --main-pt: 3rem;
  --main-gap: 2.5rem;
}

.rd-examples {
  --main-gap: 4rem;
}

/* Bloc texte + visuel sous un séparateur navy 15 % (« block/texte-points ») */
.rd-split {
  display: grid;
  grid-template-columns: minmax(0, 694fr) minmax(0, 512fr);
  align-items: center;
  gap: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--navy-15);
}

.rd-split--media-first {
  grid-template-columns: minmax(0, 512fr) minmax(0, 694fr);
  align-items: start;
}

.rd-split__media {
  aspect-ratio: 512 / 380;
}

.rd-split__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.rd-split__text p {
  max-width: 37.5rem;
  color: var(--navy-70);
}

/* Liste à cases cochées (icône i-check du sprite commun) */
.rd-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rd-checklist__item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--navy-15);
}

.rd-checklist__item:last-child {
  border-bottom: 0;
}

.rd-checklist__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--blue-500);
}

/* Le navigateur compose ces lignes ~0,3 % plus large que Figma : 4 px rendus au texte
   (pris sur la gouttière) pour retrouver les retours à la ligne de la maquette. */
.rd-checklist__text {
  min-width: 0;
  margin-right: -0.25rem;
}

/* Cartes « Exemples » : grille encadrée bleu 200 — les filets intérieurs
   sont l'espace de 1 px entre cartes laissé sur le fond bleu 200. */
.rd-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(24.9375rem, auto) minmax(25rem, auto); /* filets aux mêmes positions que la maquette */
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--blue-200);
  background: var(--blue-200);
}

.rd-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem;
  background: var(--white);
}

.rd-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem; /* intercalaire de 20 px + espacement de 12 px de la maquette */
}

.rd-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--blue-200);
  color: var(--blue-500);
}

.rd-card__ico {
  width: 1.375rem;
  height: 1.375rem;
}

.rd-card__ico--lg {
  width: 1.5rem;
  height: 1.5rem;
}

.rd-card__num {
  color: var(--blue-500);
}

.rd-card__text {
  max-width: 32.5rem; /* longueur de ligne lisible en très grand écran */
  color: var(--navy-70);
}

/* Lien dans un chapô (« InServer ») */
.rd-inline-link {
  color: var(--blue-500);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-position: from-font;
  transition: color 0.2s var(--ease);
}

.rd-inline-link:hover {
  color: var(--blue-600);
}

/* Capture logiciel sur fond bleu 100 : image 454 × 293 posée en (29, 39)
   dans un cadre 512 × 380 — marges exprimées en % de la largeur (29/512, 39/512, 48/512). */
.rd-screen {
  padding: 7.617% 5.664% 9.375%;
  background: var(--blue-100);
}

.rd-screen__zoom {
  display: block;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.rd-screen__zoom img {
  width: 100%;
  transition: transform 0.5s var(--ease);
}

.rd-screen__zoom:hover img {
  transform: scale(1.02);
}

/* 6. Responsive --------------------------------------------------------------------- */

/* ≤ 1199 px : en-tête compact (main.css) ; photo du hero et cartes resserrées */
@media (max-width: 74.9375em) {
  .hero--rd {
    --hero-rd-photo-w: 30vw;
  }

  .hero--rd .hero__body {
    padding-top: 4.5rem;
  }

  .rd-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }

  .rd-card__top {
    margin-bottom: 1.5rem;
  }
}

/* ≤ 1023 px : une colonne */
@media (max-width: 63.9375em) {
  .hero--rd .hero__body {
    align-items: stretch;
    padding-top: 2.5rem;
  }

  .hero--rd .hero__rail {
    flex: none; /* en colonne, la base de 220–320 px deviendrait une hauteur */
    padding: 0 var(--rail-px) 1.5rem;
    border-right: 0;
  }

  .hero--rd .hero__main {
    gap: 2.5rem;
    padding: 0 var(--main-px) 3rem;
  }

  .hero-rd__media {
    width: auto;
    aspect-ratio: 4 / 3;
  }

  .rd-split,
  .rd-split--media-first {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding-top: 2rem;
  }

  .rd-split__media {
    max-width: 40rem;
  }
}

/* ≤ 639 px : mobile — sur-titre au même niveau que sur l'accueil (maquette mobile 10034:6874) */
@media (max-width: 39.9375em) {
  .hero--rd .hero__body {
    padding-top: 3.9375rem;
  }

  .rd-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .rd-card {
    padding: 1.5rem;
  }

  .rd-card__top {
    margin-bottom: 1rem;
  }
}