/* =========================================================
   Immun4Cure — Rapport Annuel 2025/26
   Maquette : Adobe XD, artboard 1920 pt (header vert validé).
   Couleurs et corps de texte relevés dans les PDF sources.
   ========================================================= */

/* WOFF2 : mêmes fichiers que la maquette, compressés (1,7 Mo -> 605 Ko).
   Les deux italiques sont de vraies fontes penchées et non l'oblique
   synthétique du navigateur — voir NOTES.md §6. */
@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Raleway-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Raleway;
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Raleway-Italic.woff2") format("woff2");
}
@font-face {
  font-family: Raleway;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Raleway-Medium.woff2") format("woff2");
}
@font-face {
  font-family: Raleway;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Raleway-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: Raleway;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Raleway-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/RobotoCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/RobotoCondensed-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-weight: 700;
  font-display: swap;
  src: url("fonts/RobotoCondensed-Bold.woff2") format("woff2");
}

:root {
  /* Couleurs de chapitre, relevées dans le template et le menu validés */
  --c1: #de8960;
  --c2: #759588;
  --c3: #c98a8f;
  --c4: #867687;
  --c5: #60a56e;
  --c6: #78afb3;
  --c7: #9c916d;
  --c8: #415a8b;

  --green: #759588; /* header + menu */
  --grey-bg: #f4f4f4;
  --ink: #000;
  --ink-soft: #4e4e50;
  --hairline: #d6d6d6;

  /* Couleur courante : chaque .part la redéfinit */
  --accent: var(--c1);

  /* Échelle typographique — fluide, calée sur l'artboard 1920 pt */
  --t-body: clamp(1rem, 1.15vw, 1.375rem); /* 22 pt */
  --t-lead: clamp(1.05rem, 1.2vw, 1.4375rem); /* 23 pt */
  --t-chapo: clamp(1.2rem, 2vw, 2.6rem); /* 41 pt — chapôs de section */
  --t-q: clamp(1.25rem, 2.08vw, 2.5rem); /* 40 pt */
  --t-section: clamp(1.2rem, 2.18vw, 2.5rem); /* 40 pt — titres de section */
  --t-toc: clamp(1.35rem, 2.24vw, 2.6875rem); /* 43 pt */
  --t-title: clamp(1.75rem, 3.13vw, 3.75rem); /* 60 pt */

  --portrait-d: clamp(180px, 18.1vw, 350px); /* 260 px à 1440, cf. maquette */

  --measure: min(69.4vw, 1336px); /* colonne de texte de la maquette */
  --gutter: clamp(1.25rem, 3vw, 3.5rem);
  --rail: clamp(8px, 0.94vw, 18px);

  /* Menu : le panneau fait 16,7 % de la largeur dans la maquette (320 pt / 1920).
     La page glisse d'autant vers la gauche : le motif du hero se décale,
     il n'est pas recouvert par une seconde image. */
  --panel-w: clamp(280px, 16.7vw, 400px);
  --menu-t: 420ms;
  --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --menu-t: 1ms;
  }
}

[data-part="1"] {
  --accent: var(--c1);
}
[data-part="2"] {
  --accent: var(--c2);
}
[data-part="3"] {
  --accent: var(--c3);
}
[data-part="4"] {
  --accent: var(--c4);
}
[data-part="5"] {
  --accent: var(--c5);
}
[data-part="6"] {
  --accent: var(--c6);
}
[data-part="7"] {
  --accent: var(--c7);
}
[data-part="8"] {
  --accent: var(--c8);
}

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

/* Gouttière réservée : le blocage du défilement à l'ouverture du menu
   ne décale plus la page. */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Roboto Condensed", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.44;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;

  &:focus {
    left: 0;
  }
}

/* ---------- Menu ---------- */
.menu-btn {
  position: fixed;
  top: clamp(1rem, 2vw, 2.4rem);
  right: 0;
  z-index: 50;
  border: 0;
  cursor: pointer;
  background: var(--ink);
  color: #fff;
  font-family: Raleway, sans-serif;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.83vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9em 1.4em;
}

/* Le décor du menu, c'est la page elle-même, poussée vers la gauche : depuis
   le haut du rapport, c'est le motif du hero qui se décale. Rien n'est
   dupliqué, aucune seconde image n'est chargée. */
.page {
  transform: translateX(0);
  transition: transform var(--menu-t) var(--menu-ease);
}

body.is-menu-open {
  overflow: hidden;

  & .page {
    transform: translateX(calc(-1 * var(--panel-w)));
  }

  /* Le titre et le logo de couverture s'effacent en sortant du cadre,
     plutôt que d'être tranchés par le bord de l'écran. */
  & .hero__text,
  & .hero__logo {
    opacity: 0;
  }
}

.hero__text,
.hero__logo {
  opacity: 1;
  transition: opacity calc(var(--menu-t) * 0.6) ease;
}

/* Ouverture / fermeture animées. La transition de `display` (allow-discrete)
   maintient le menu affiché le temps de l'animation de sortie ; les
   navigateurs qui ne la connaissent pas affichent et masquent d'un coup. */
.nav {
  position: fixed;
  inset: 0;
  z-index: 51;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--panel-w);
  overflow: hidden; /* le panneau sort par la droite : on clippe */

  transition: display var(--menu-t) allow-discrete;

  &[hidden] {
    display: none;
  }
}

/* Voile très léger : sépare la page poussée du panneau sans ternir le vert */
.nav__scrim {
  background: rgb(0 0 0 / 0.06);
  cursor: pointer;

  opacity: 1;
  transition: opacity var(--menu-t) ease;

  @starting-style {
    opacity: 0;
  }
}

.nav[hidden] .nav__scrim {
  opacity: 0;
}

.nav__panel {
  background: #fff;
  box-shadow: -16px 0 44px rgb(0 0 0 / 0.16);
  padding: clamp(1rem, 2vw, 2.4rem) clamp(1.25rem, 2vw, 2.25rem) 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  transform: translateX(0);
  transition: transform var(--menu-t) var(--menu-ease);

  @starting-style {
    transform: translateX(100%);
  }

  & ul {
    list-style: none;
    margin: auto 0;
    padding: 0;
    text-align: center;
  }

  & li {
    margin: 0 0 clamp(1rem, 1.9vw, 2.1rem);
  }
}

.nav[hidden] .nav__panel {
  transform: translateX(100%);
}

/* Les entrées arrivent en cascade, uniquement à l'ouverture */
@media (prefers-reduced-motion: no-preference) {
  .nav:not([hidden]) li {
    animation: nav-item 420ms var(--menu-ease) both;
  }

  .nav:not([hidden]) li:nth-child(2) {
    animation-delay: 40ms;
  }
  .nav:not([hidden]) li:nth-child(3) {
    animation-delay: 80ms;
  }
  .nav:not([hidden]) li:nth-child(4) {
    animation-delay: 120ms;
  }
  .nav:not([hidden]) li:nth-child(5) {
    animation-delay: 160ms;
  }
  .nav:not([hidden]) li:nth-child(6) {
    animation-delay: 200ms;
  }
  .nav:not([hidden]) li:nth-child(7) {
    animation-delay: 240ms;
  }
  .nav:not([hidden]) li:nth-child(8) {
    animation-delay: 280ms;
  }
  .nav:not([hidden]) li:nth-child(9) {
    animation-delay: 320ms;
  }
}

@keyframes nav-item {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.nav__close {
  align-self: flex-end;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: Raleway, sans-serif;
  font-weight: 500;
  font-size: clamp(0.7rem, 0.83vw, 1rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9em 0;

  /* la croix du jeu latin est plus petite que le ✕ de la maquette : on la remonte */
  & span {
    font-size: 1.5em;
    line-height: 0;
    vertical-align: -0.08em;
  }
}

.nav__num {
  display: block;
  color: var(--accent);
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.1vw, 1.3rem);
  line-height: 1.6;
}

.nav__link {
  color: var(--accent);
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.35vw, 1.6rem);
  line-height: 1.25;
  text-decoration-line: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.14em;

  &:hover,
  &:focus-visible {
    text-decoration-thickness: 0.1em;
  }
}

.nav__link--plain {
  color: var(--ink);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--green);
  display: grid;
  grid-template-columns: minmax(0, 19%) minmax(0, 1fr);
  align-items: start;
  gap: var(--gutter);
  min-height: min(56vw, 100vh);
  padding: clamp(1.5rem, 3.1vw, 3.75rem) 6.25vw 2rem var(--gutter);
}

.hero__text h1 {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: var(--t-q);
  line-height: 1.3;
  color: #fff;
}

.hero__pattern {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  grid-column: 2;
}

.hero__logo {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.5rem, 3.1vw, 3.75rem);
  width: clamp(90px, 8.4vw, 162px);
}

/* ---------- Citations d'ouverture ---------- */
.opening {
  background: var(--grey-bg);
  display: grid;
  grid-template-columns: minmax(0, 27.7%) minmax(0, 1fr);
}

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

.opening__body {
  padding: clamp(2rem, 4vw, 5rem) var(--gutter) clamp(3rem, 6vw, 7rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Rapports relevés dans la maquette : l'exergue vaut 0,81 fois le corps de
   texte et la signature 0,93 (NOTES.md §6ter). */
.eyebrow {
  margin: 0 0 clamp(2rem, 5vw, 6rem);
  font-family: Raleway, sans-serif;
  font-weight: 500;
  font-size: clamp(0.8rem, 0.93vw, 1.15rem);
  color: var(--ink-soft);
}

.opening blockquote {
  margin: 0 0 clamp(2.5rem, 5vw, 5.5rem);

  &:last-child {
    margin-bottom: 0;
  }

  /* la mesure est portée par le <p> : un `ch` posé sur le blockquote se
     calculerait avec la police héritée, bien plus étroite */
  & p {
    max-width: 44ch;
    margin: 0 auto 1.6em;
    font-family: Raleway, sans-serif;
    font-weight: 500;
    /* corps et graisse relevés dans la maquette : bande de 31 px et traits de
       5,2 px à 1440 — le Medium tombe à 5,3, le SemiBold à 5,8 (NOTES.md §6ter) */
    font-size: clamp(1.35rem, 2.25vw, 2.85rem);
    line-height: 1.3;
    text-wrap: pretty;
  }

  & footer {
    font-family: Raleway, sans-serif;
    font-size: clamp(0.9rem, 1.07vw, 1.3rem);
    line-height: 1.6;
    color: var(--ink-soft);
  }
}

/* ---------- Blocs de texte communs ---------- */
.article {
  position: relative;
  padding: clamp(2.5rem, 4vw, 6rem) var(--gutter) clamp(2rem, 4vw, 7rem);
}

/* Filet vertical coloré, hérité du chapitre courant */
.part .article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rail);
  background: var(--accent);
}

.prose,
.chapo,
.qa,
.rule-title,
.committees,
.pullquote,
.quote-lead,
.assos,
.band,
.figure,
.profiles-cols,
.thanks__names {
  max-width: var(--measure);
  margin-inline: auto;
}

.prose p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

.prose h3 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: var(--t-lead);
  line-height: 1.35;
  margin: 2.4em 0 1.2em;
  color: var(--accent);
  text-wrap: balance;

  &:first-child {
    margin-top: 0;
  }
}

/* Dans la maquette, la section grise des citations se prolonge largement sous
   la photo (203 px à 1440) et la frontière gris/blanc passe PAR LE CENTRE du
   portrait de l'éditorial — c'est ce chevauchement qui rend son anneau blanc
   visible. L'éditorial porte aussi un filet gris à gauche, pendant des filets
   colorés des parties. Le mot « ÉDITORIAL » y est noir. */
.opening {
  padding-bottom: clamp(5rem, 14.1vw, 260px);
}

.editorial {
  padding-top: 0;

  &::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--rail);
    background: var(--grey-bg);
  }

  & .portrait {
    margin-top: calc(var(--portrait-d) / -2);
  }
  & .section-head__kicker {
    color: var(--ink);
  }
}

/* L'éditorial garde le chapô centré et noir de la maquette, au même corps que
   les chapôs de section (mesuré à 30 px de bande, comme un chapô) */
.editorial .prose h3 {
  text-align: center;
  color: var(--ink);
  font-size: var(--t-chapo);
  line-height: 1.25;
  margin-bottom: 1.6em;
}

.bullets {
  margin: 0 0 1.1em;
  padding-left: 1.2em;

  & li {
    margin-bottom: 0.4em;
  }
}

/* ---------- En-tête de section (portrait + nom) ---------- */
/* Diamètre relevé dans la maquette : 260 px à 1440, soit 8 fois la hauteur de
   capitale du nom qui suit. L'anneau y fait 11 px, soit 4,2 % du diamètre. */
.portrait {
  display: block;
  margin: 0 auto clamp(1.5rem, 2.5vw, 3rem);
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  width: var(--portrait-d);
}

.portrait--plain {
  border: clamp(5px, 0.76vw, 15px) solid #fff;
}

.portrait--ring {
  border: clamp(5px, 0.76vw, 15px) solid var(--accent);
  outline: clamp(3px, 0.31vw, 6px) solid #fff;
  background: #fff;
}

.section-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 5rem);

  & h2 {
    margin: 0;
    font-family: Raleway, sans-serif;
    font-weight: 700;
    font-size: var(--t-title);
    line-height: 1.1;
    text-transform: uppercase;
  }
}

/* « ENTRETIEN », « 3 QUESTIONS À » : même corps que le nom qui suit dans la
   maquette, seule la graisse les distingue */
.section-head__kicker {
  margin: 0;
  font-family: Raleway, sans-serif;
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head__role {
  margin: 0.6em 0 0;
  font-family: "Roboto Condensed", sans-serif;
  font-size: var(--t-body);
  color: var(--ink);
}

/* Citations de fin de section : même corps que les chapôs dans la maquette */
.pullquote {
  margin-top: clamp(2rem, 4vw, 5rem);
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: var(--t-chapo);
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}

.quote-lead {
  margin: 0 auto clamp(2rem, 4vw, 4.5rem);
  font-family: Raleway, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.05rem, 1.45vw, 1.75rem);
  line-height: 1.5;
  text-align: center;
  color: var(--accent);
  text-wrap: pretty;

  & footer {
    margin-top: 1.4em;
    font-family: "Roboto Condensed", sans-serif;
    font-style: normal;
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--ink);
  }
}

/* ---------- Sommaire ---------- */
.sommaire {
  background: var(--grey-bg);
  display: grid;
  grid-template-columns: minmax(0, 21.4%) minmax(0, 1fr);
  align-items: start;
}

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

.sommaire__body {
  padding: clamp(2.5rem, 5vw, 6rem) var(--gutter) clamp(3rem, 6vw, 7rem);
}

.display {
  margin: 0 0 clamp(2rem, 4vw, 5rem);
  font-family: Raleway, sans-serif;
  font-weight: 400;
  font-size: var(--t-title);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.01em;
}

.toc-intro {
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.toc-intro .toc__title {
  color: var(--ink);
}

/* Le DOM est dans l'ordre de lecture 1 → 8 ; le remplissage colonne par colonne
   reconstitue la maquette (1-4 à gauche, 5-8 à droite) sans casser ni l'ordre
   de tabulation ni la lecture linéaire au lecteur d'écran. */
.toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: clamp(1.5rem, 3.1vw, 3.75rem) clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}

.toc__title {
  display: inline-block;
  color: var(--accent);
  font-family: Raleway, sans-serif;
  font-weight: 600;
  font-size: var(--t-toc);
  line-height: 1.2;
  text-decoration-line: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.12em;

  &:hover,
  &:focus-visible {
    text-decoration-thickness: 0.09em;
  }

  /* Le numéro n'est pas souligné dans la maquette */
  & span {
    text-decoration: none;
    display: inline-block;
  }
}

.toc p,
.toc-intro p {
  margin: 0.5em 0 0;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--ink);
}

/* ---------- Chapitres pleine couleur ---------- */
.chapter {
  position: relative;
  color: #fff;
  background: var(--accent);
  padding: clamp(2.5rem, 4vw, 7rem) 8.85vw clamp(2.5rem, 4vw, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 26%) minmax(0, 1fr);
  gap: clamp(2rem, 7.5vw, 9rem);
  align-items: center;
  scroll-margin-top: 0;
}

/* Disque blanc + motif de la charte, coloré par le chapitre */
.chapter__motif {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  width: min(100%, 24vw);
  justify-self: center;
  display: grid;
  place-items: center;

  &::after {
    content: "";
    /* 88 % : rapport motif/disque relevé au pixel dans la maquette. Les masques
       sont recadrés sur leur dessin, sans marge interne, sinon elle s'ajoute. */
    width: 88%;
    aspect-ratio: 1;
    background: var(--accent);
    -webkit-mask: var(--motif) center / contain no-repeat;
    mask: var(--motif) center / contain no-repeat;
  }
}

[data-part="1"] .chapter__motif {
  --motif: url("assets/motif-1.png");
}
[data-part="2"] .chapter__motif {
  --motif: url("assets/motif-2.png");
}
[data-part="3"] .chapter__motif {
  --motif: url("assets/motif-3.png");
}
[data-part="4"] .chapter__motif {
  --motif: url("assets/motif-4.png");
}
[data-part="5"] .chapter__motif {
  --motif: url("assets/motif-5.png");
}
[data-part="6"] .chapter__motif {
  --motif: url("assets/motif-6.png");
}
[data-part="7"] .chapter__motif {
  --motif: url("assets/motif-7.png");
}
[data-part="8"] .chapter__motif {
  --motif: url("assets/motif-8.png");
}

.chapter__body {
  min-width: 0;
}

.chapter__intro {
  margin: 0 0 1.6em;
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.chapter__list {
  margin: 1.8em 0 2.5em;
  font-family: Raleway, sans-serif;
  font-size: var(--t-body);
  line-height: 1.55;
  text-align: left;
}

.chapter__title {
  margin: 0.6em 0 0.3em;
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: var(--t-title);
  line-height: 1.1;
  text-transform: uppercase;
}

.chapter__subtitle {
  margin: 0 0 1.2em;
  font-family: "Roboto Condensed", sans-serif;
  font-size: var(--t-lead);
  line-height: 1.4;

  & i {
    font-style: italic;
  }
}

/* ---------- Chiffres clés ----------
   Filets continus sur toute la hauteur du bloc, uniquement entre les colonnes,
   comme dans la maquette. Chaque cellule trace son filet dans la gouttière qui
   la précède ; celui de la première colonne tombe hors du conteneur et se fait
   clipper. Le nombre de colonnes peut donc changer à chaque palier sans
   qu'aucune règle ne soit à réécrire — en une seule colonne, plus de filet. */
.stats {
  --stats-gap-x: clamp(1.5rem, 3.4vw, 4rem);
  --stats-gap-y: clamp(1.5rem, 2.4vw, 2.75rem);

  margin: 1.6em 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--stats-gap-x);
  row-gap: var(--stats-gap-y);
  overflow: hidden;

  & > div {
    position: relative;

    &::before {
      content: "";
      position: absolute;
      left: calc(-0.36 * var(--stats-gap-x));
      top: 0;
      bottom: calc(-1 * var(--stats-gap-y)); /* rejoint la ligne suivante */
      border-left: 1px solid rgb(255 255 255 / 0.55);
    }
  }

  & dt {
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-q);
    line-height: 1.1;
  }

  & dd {
    margin: 0.2em 0 0;
    font-size: var(--t-body);
    line-height: 1.35;
  }

  & sup {
    font-size: 0.6em;
    vertical-align: super;
  }
}

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

.stats--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- Titres à filet ---------- */
.rule-title {
  margin: 0 auto clamp(2rem, 4vw, 4.5rem);
  font-family: Raleway, sans-serif;
  font-weight: 700;
  font-size: var(--t-section);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  text-wrap: balance;
}

.chapo {
  margin: 0 auto clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 700;
  font-size: var(--t-chapo);
  line-height: 1.25;
  text-align: center;
  color: var(--accent);
  text-wrap: pretty;
}

/* ---------- Comités ---------- */
.committees {
  margin-top: clamp(2.5rem, 5vw, 5.5rem);
  columns: 34ch 3;
  column-gap: clamp(2rem, 4vw, 4rem);
}

.committee {
  break-inside: avoid;
  margin-bottom: clamp(2rem, 3vw, 3rem);

  & h3 {
    margin: 0 0 0.6em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-body);
    text-transform: uppercase;
    color: var(--accent);
  }

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  & li {
    line-height: 1.5;
    margin-bottom: 0.35em;
  }
}

.committee__sub {
  margin: 1.4em 0 0.5em;
  font-weight: 700;
  text-transform: uppercase;
  font-size: calc(var(--t-body) * 0.88);
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

/* ---------- Entretiens ---------- */
.qa {
  & h3 {
    margin: 2em auto 1.2em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-q);
    line-height: 1.3;
    text-align: center;
    color: var(--accent);
    text-wrap: balance;
  }

  & h3:first-child {
    margin-top: 0;
  }
  & p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
  }
}

/* Filet horizontal traversant, derrière le portrait */
/* Le filet passe par le CENTRE du portrait : padding haut + rayon */
.interview::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(clamp(2.5rem, 5vw, 6rem) + var(--portrait-d) / 2);
  border-top: 1px solid var(--hairline);
  z-index: 0;
}

.interview .portrait--ring {
  position: relative;
  z-index: 1;
}
.interview .section-head {
  position: relative;
}

/* ---------- Portraits de chercheurs ---------- */
.profile {
  max-width: var(--measure);
  margin: 0 auto clamp(3rem, 6vw, 6.5rem);
  display: grid;
  grid-template-columns: clamp(80px, 8.8vw, 170px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.6vw, 3.125rem);
  align-items: start;

  &:last-child {
    margin-bottom: 0;
  }
}

.profile__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  border: clamp(3px, 0.31vw, 6px) solid var(--accent);
}

.profile__body {
  & h3 {
    margin: 0 0 1em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-q);
    line-height: 1.2;

    & span {
      font-weight: 400;
      color: var(--accent);
    }
  }

  & p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
  }
}

.profile__lead {
  font-weight: 700;
}

/* Trois portraits sans photo, en colonnes (chercheurs de demain) */
.profiles-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: start;
}

.profile--text {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 0;

  & h3 {
    font-size: var(--t-q);
    color: var(--accent);
  }
}

/* ---------- Images ---------- */
.figure {
  margin: clamp(2rem, 4vw, 4.5rem) auto;

  /* en fin de section, le padding des articles suffit : la marge
     s'y ajouterait et creuserait un trop grand blanc */
  &:last-child {
    margin-bottom: 0;
  }

  /* Les photos sont des verticales de 300 dpi : on les recadre à l'écran
     plutôt que de laisser une image occuper deux hauteurs de fenêtre. */
  & img {
    width: 100%;
    max-height: 78vh;
    object-fit: cover;
  }

  /* Le bâtiment est dans le haut de la photo : on cale le cadrage
     en haut pour qu'il reste visible malgré le recadrage en hauteur. */
  &.figure--parc img {
    object-position: 50% 75%;
  }

  & figcaption {
    margin-top: 0.8em;
    font-size: calc(var(--t-body) * 0.9);
    color: var(--ink-soft);
  }
}

/* En fin de section, comme dans le RA papier : la marge est au-dessus, le padding
   de l'article suffit en dessous. */
.band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
  margin-top: clamp(2.5rem, 5vw, 5.5rem);

  & img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }
}

/* Étapes illustrées (volet scientifique) */
.step {
  max-width: var(--measure);
  margin: 0 auto clamp(2.5rem, 5vw, 5.5rem);
  display: grid;
  grid-template-columns: clamp(140px, 17vw, 320px) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3.5rem);
  align-items: start;

  &:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr) clamp(140px, 17vw, 320px);

    & .step__img {
      grid-column: 2;
      grid-row: 1;
    }
    & .step__body {
      grid-column: 1;
      grid-row: 1;
    }
  }
}

.step__img {
  width: 100%;
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
}

.step__body {
  & h3 {
    margin: 0 0 0.9em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-lead);
    line-height: 1.35;
    color: var(--accent);
    text-wrap: balance;
  }

  & p {
    margin: 0 0 1.1em;
    text-wrap: pretty;
  }
}

.step__num {
  font-family: Raleway, sans-serif;
}

/* ---------- Associations partenaires ---------- */
.assos {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--grey-bg);

  & h3 {
    margin: 0 0 1em;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: 700;
    font-size: var(--t-body);
    text-transform: uppercase;
    color: var(--accent);
  }

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 32ch 3;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }

  & li {
    break-inside: avoid;
    line-height: 1.45;
    margin-bottom: 0.8em;
    padding-left: 1em;
    text-indent: -1em;

    &::before {
      content: "• ";
      color: var(--accent);
    }
  }

  & a {
    color: var(--ink-soft);
  }
}

/* ---------- Remerciements ---------- */
.thanks__names {
  margin: 0 auto 1.2em;
  text-align: center;
  line-height: 1.6;
}

.thanks__sub {
  margin: 2.2em auto 0.8em;
  max-width: var(--measure);
  text-align: center;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  font-size: var(--t-body);
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Pied de page ---------- */
.footer {
  background: var(--green);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;

  & img {
    width: clamp(80px, 7vw, 130px);
  }

  & p,
  & address {
    margin: 0;
    font-family: Raleway, sans-serif;
    font-style: normal;
    font-size: clamp(0.75rem, 0.94vw, 1.125rem);
    line-height: 1.6;
  }

  & a {
    color: #fff;
  }
}

.footer__title {
  font-weight: 600;
}

a {
  color: inherit;
}

/* =========================================================
   Sous 1000 px : la maquette n'a pas de déclinaison mobile.
   Les colonnes latérales passent au-dessus, les grilles
   s'empilent, les images pleine hauteur deviennent des bandeaux.
   ========================================================= */
@media (max-width: 999px) {
  :root {
    --measure: 100%;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--gutter);
    min-height: auto;
  }
  .hero__pattern {
    grid-column: 1;
    max-height: 60vh;
  }
  .hero__logo {
    position: static;
    margin-top: 2rem;
  }

  .opening,
  .sommaire {
    grid-template-columns: minmax(0, 1fr);
  }
  .opening__img,
  .sommaire__img {
    max-height: 45vh;
  }
  .figure--parc img {
    max-height: 45vh;
  }

  .toc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  /* Le panneau prend presque tout l'écran ; la page reste visible sur la
     tranche gauche, on garde la sensation de contenu poussé. */
  :root {
    --panel-w: 82vw;
  }

  .chapter {
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--gutter);
    text-align: left;
  }
  .chapter__motif {
    width: min(60%, 260px);
  }

  .stats:not(.stats--single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile {
    grid-template-columns: minmax(0, 1fr);
  }
  .profile__photo {
    width: min(40%, 160px);
  }

  .profiles-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 3rem);
  }

  .step,
  .step:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);

    & .step__img {
      grid-column: 1;
      grid-row: 1;
      width: min(45%, 200px);
    }
    & .step__body {
      grid-column: 1;
      grid-row: 2;
    }
  }

  .band {
    display: none;
  }

  .interview::after {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* =========================================================
   Impression. Les navigateurs n'impriment pas les fonds par défaut :
   tout texte blanc posé sur un aplat sortirait blanc sur blanc. On repasse
   donc en noir sur blanc, et le repère de partie devient un filet coloré
   (une bordure s'imprime, un fond non).
   ========================================================= */
@media print {
  @page {
    margin: 15mm 14mm;
  }

  /* la colonne de texte est calée en vw, sans rapport avec la largeur de page :
     sur papier elle déborderait des deux côtés */
  :root {
    --measure: 100%;
    --gutter: 0;
    --rail: 0;
  }

  html {
    scrollbar-gutter: auto;
  }

  /* le filet vertical des articles chevaucherait le texte sans gouttière */
  .part .article::before {
    display: none;
  }

  body {
    font-size: 10pt;
    line-height: 1.4;
    color: #000;
  }

  /* navigation et décor d'écran : hors sujet sur papier */
  .menu-btn,
  .nav,
  .skip,
  .hero__pattern,
  .hero__logo,
  .chapter__motif,
  .band {
    display: none;
  }

  .page {
    transform: none;
  }

  .hero {
    min-height: auto;
    padding: 0 0 8mm;
    background: none;
    display: block;
  }

  .hero__text h1 {
    color: #000;
    font-size: 26pt;
  }

  .opening,
  .sommaire {
    background: none;
    display: block;
  }

  .opening__img,
  .sommaire__img {
    display: none;
  }

  .article,
  .editorial,
  .chapter,
  .opening__body,
  .sommaire__body {
    padding-inline: 0;
  }

  /* Chapitre : plus d'aplat, un filet coloré et le numéro gardent le repère */
  .chapter {
    display: block;
    background: none;
    color: #000;
    border-top: 3pt solid var(--accent);
    padding: 6mm 0 4mm;
    break-before: page;
  }

  .chapter__title {
    color: var(--accent);
    font-size: 20pt;
  }
  .chapter__intro,
  .chapter__list {
    color: #000;
  }

  /* les filets blancs des chiffres deviendraient invisibles */
  .stats > div::before {
    border-left-color: #bbb;
  }

  .assos {
    background: none;
    border: 0.5pt solid #ccc;
  }

  .footer {
    background: none;
    color: #000;
    border-top: 0.5pt solid #ccc;

    & img {
      display: none;
    }
    & a {
      color: #000;
    }
  }

  /* On ne coupe pas au milieu d'un portrait, d'une étape ou d'une instance */
  .profile,
  .step,
  .committee,
  .figure,
  .qa p,
  .stats > div,
  .thanks {
    break-inside: avoid;
  }
  h2,
  h3,
  .rule-title,
  .chapo,
  .section-head {
    break-after: avoid;
  }

  .figure img {
    max-height: 90mm;
    object-fit: contain;
  }
  .portrait {
    width: 28mm;
  }
  .step__img,
  .profile__photo {
    width: 24mm;
  }

  /* un lien imprimé ne cliquant pas, on donne son adresse */
  .assos a::after,
  .footer a::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    color: #555;
    word-break: break-all;
  }
}