/* ============================================================================
   Maine-Anjou Research Group — styles.css
   ----------------------------------------------------------------------------
   Feuille de styles unique du site. Organisation :
     1.  Polices auto-hébergées (@font-face)
     2.  Variables de thème (clair par défaut, sombre via [data-theme="dark"])
     3.  Base / reset
     4.  Navbar (pilule coulissante, icônes, menu mobile)
     5.  Hero de la page d'accueil + hero compact des pages internes
     6.  Sections, labels, intro
     7.  Cartes "Research areas"
     8.  Bandeau d'affiliations
     9.  Page Publications (sélection + liste PubMed + filtres)
     10. Page Team (leaders, membres, contact)
     11. Page Tools & Data
     12. Footer
     13. Accessibilité & divers
     14. Responsive
   Pour changer la palette globale : modifier les variables de la section 2.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. POLICES — auto-hébergées (pas de CDN : RGPD + performance).
   Fichiers dans /fonts. font-display: swap = le texte s'affiche immédiatement
   avec la police système, puis bascule quand la police est chargée.
---------------------------------------------------------------------------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }

/* ----------------------------------------------------------------------------
   2. VARIABLES DE THÈME
   Palette dérivée du logo : navy #005190 → cyan #00B1CD.
---------------------------------------------------------------------------- */
:root {
  /* Couleurs du logo (fixes, identiques dans les deux thèmes) */
  --navy: #005190;
  --azure: #0077B4;
  --sky: #0095C4;
  --cyan: #00B1CD;

  /* Thème clair (défaut) */
  --bg: #F2F6F9;               /* fond de page */
  --card: #FFFFFF;             /* fond des cartes */
  --border: #E1E8EF;           /* bordures fines, décoratives (cartes, séparateurs) */
  /* Bordure des COMMANDES uniquement. Sur une carte le trait n'est qu'une finition,
     mais sur une pastille ou un bouton fantôme il est la seule chose qui signale un
     contrôle : #E1E8EF n'y vaut que 1,24:1 sur blanc. Niveau « intermédiaire »
     retenu le 21/08 (2,20:1) : nettement perceptible, sans le gris marqué qu'aurait
     imposé le seuil AA de 3:1. Maquette : Maquettes/maquette-bordures.html */
  --border-control: #9CB1C7;
  --ink: #12202E;              /* texte principal */
  --muted: #57697A;            /* texte secondaire */
  --faint: #8596A6;            /* texte discret (labels) */
  --accent: var(--navy);       /* couleur d'accent des liens/actifs */
  --accent-soft: #E5F0F8;      /* fond des survols discrets */
  /* Accent chaud (bronze) : contrepoint au camaïeu bleu, réservé aux petits
     éléments — pastilles numérotées, libellé des rattachements, étiquettes de
     cartes. Deux nuances proches en thème clair : la pastille supporte un ton
     un peu plus rouge sur son fond sable, les libellés isolés un ton plus chaud. */
  /* Ces libellés étaient auparavant en gris #8596A6, soit un contraste de 3,04
     sur blanc : le bronze ci-dessous (3,77) reste plus lisible que l'original,
     tout en assumant un ton franchement orangé plutôt qu'un accent discret. */
  --clay: #C26E2E;             /* libellés (rattachements, étiquettes, revues) */
  --clay-num: #C26E2E;         /* chiffre des pastilles numérotées (même ton) */
  --clay-soft: #F9EFE7;        /* fond des pastilles, éclairci pour rester lisible */
  --clay-ring: #EFDDCE;        /* cerne de la pastille : compense le fond plus clair */
  --hero-bg: linear-gradient(135deg, #06263F 0%, #084B7E 62%, #0A6E9C 100%);
  --hero-ink: #F2F8FC;
  --hero-muted: #A8C4D8;
  --pill-grad: linear-gradient(120deg, var(--navy), var(--sky));
  --shadow-sm: 0 1px 2px rgba(10, 30, 50, 0.06);
  --shadow-md: 0 12px 32px -14px rgba(10, 30, 50, 0.22);
  --shadow-hero: 0 24px 60px -24px rgba(6, 38, 63, 0.5);
}
[data-theme="dark"] {
  --bg: #0A121B;
  --card: #131E2A;
  --border: #22323F;
  --border-control: #455662;   /* voir la note du mode jour */
  --ink: #E7EEF4;
  --muted: #9BACBC;
  --faint: #6B7E8F;
  --accent: #4FAEE8;
  --accent-soft: #14304A;
  /* En thème sombre, une seule nuance suffit (beige-orangé désaturé) */
  --clay: #DBA182;
  --clay-num: #DBA182;
  --clay-soft: #3A2C22;
  --clay-ring: transparent;    /* le fond sombre se détache déjà seul */
  --hero-bg: linear-gradient(135deg, #041B2E 0%, #063E68 62%, #085E86 100%);
  --hero-ink: #F2F8FC;
  --hero-muted: #9DBBD1;
  --pill-grad: linear-gradient(120deg, #1273B8, #0095C4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -14px rgba(0, 0, 0, 0.55);
  --shadow-hero: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
}

/* ----------------------------------------------------------------------------
   3. BASE
---------------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 17px; scroll-behavior: smooth; scrollbar-gutter: stable; scroll-padding-top: 90px; }
/* scrollbar-gutter : réserve la place de la barre de défilement même sur les
   pages courtes, pour éviter le décalage horizontal en passant d'une page à l'autre.
   scroll-padding-top : décale l'arrivée de TOUTES les ancres sous la navbar collante
   (66 px de haut), une fois pour toutes. Remplace les scroll-margin-top qui étaient
   posés au cas par cas sur .axis-card et .legal-content h2. */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  transition: background 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: "Space Grotesk", "Inter", sans-serif; }
img { max-width: 100%; }
.container { max-width: 1300px; margin: 0 auto; padding: 0 2rem; }
main { min-height: 55vh; }

/* Transition de page fluide entre les pages du site (Chrome/Edge récents ;
   ignoré sans dommage par les autres navigateurs). */
@view-transition { navigation: auto; }

/* ----------------------------------------------------------------------------
   4. NAVBAR
---------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.nav-inner { display: flex; align-items: center; gap: 2rem; height: 66px; }
.brand {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none;
  color: var(--ink); font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 0.98rem; letter-spacing: -0.01em; white-space: nowrap;
}
.brand img { width: 30px; height: 30px; }

/* Liens de navigation dans une "gélule" ; la pilule colorée glisse sous
   l'onglet actif (positionnement géré par js/main.js).
   L'animation n'existe QUE pendant le glissement d'un onglet vers un autre, au
   clic : la classe .pill-anim n'est posée qu'à ce moment-là. Sans elle, le
   placement initial était lui aussi animé et la pilule partait chaque fois du
   bord gauche en largeur nulle. */
.nav-links {
  position: relative; display: flex; gap: 0.3rem; margin-left: 0.5rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.25rem; box-shadow: var(--shadow-sm);
}
.nav-links a {
  position: relative; z-index: 1; text-decoration: none; color: var(--muted);
  font-size: 0.85rem; font-weight: 500; padding: 0.32rem 0.95rem;
  border-radius: 999px; transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
/* Le mot ne doit pas virer au blanc avant que la pilule ne soit arrivée dessous :
   sinon il reste illisible sur le fond clair pendant tout le glissement. Le délai
   plus la durée (0,12 + 0,2 s) se terminent juste après la pilule (0,3 s). */
.nav-links a.active { color: #fff; transition: color 0.2s ease 0.12s; }
/* Posée par js/main.js le temps que le style « couleur normale » soit validé, puis
   retirée aussitôt : c'est ce qui déclenche la transition de couleur à l'arrivée
   sur une page, où le lien actif serait blanc dès la première image. */
.nav-links a.pill-attente { color: var(--muted); }
.nav-pill {
  position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 0;
  border-radius: 999px; background: var(--pill-grad);
  z-index: 0;
}
.nav-links.pill-anim .nav-pill {
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Tant que le JS n'a pas positionné la pilule, l'onglet actif garde un fond. */
.nav-links:not(.pill-ready) a.active { background: var(--pill-grad); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.1rem; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; color: var(--muted);
  text-decoration: none; font-size: 1rem; border: none; background: none;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.icon-btn:hover { color: var(--ink); background: var(--accent-soft); }
.icon-btn svg { display: block; }
/* Icône courriel : version pleine, légèrement plus grande, même gris que les
   icônes de réseaux sociaux (séparée d'elles par un .nav-sep) */
/* Séparateur entre les icônes sociales et les contrôles (thème / langue) */
.nav-sep { width: 1px; height: 18px; background: var(--border); margin: 0 0.55rem; flex-shrink: 0; }
/* Icônes lune / soleil : une seule visible selon le thème */
[data-theme="light"] .ic-sun { display: none; }
[data-theme="dark"] .ic-moon { display: none; }
.lang-switch {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted);
  border: 1px solid var(--border-control); border-radius: 999px; padding: 0.26rem 0.7rem;
  background: var(--card); cursor: pointer; margin-left: 0.4rem;
  text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
.lang-switch:hover { color: var(--accent); border-color: var(--accent); }
/* Version FR pas encore publiée : bouton présent mais neutralisé.
   À l'activation du FR : retirer .is-disabled et pointer href vers fr/… */
.lang-switch.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Menu mobile (hamburger + panneau déroulant) */
.nav-toggle { display: none; }
.mobile-menu {
  display: none; border-top: 1px solid var(--border);
  background: var(--card); box-shadow: var(--shadow-md);
}
/* Le panneau ne doit exister que sous le breakpoint mobile : sans cette règle,
   un menu ouvert à 800 px reste affiché quand la fenêtre s'élargit et cohabite avec
   la navigation desktop. Le display: block est rétabli dans la media query
   (max-width: 860px), section RESPONSIVE. */
.mobile-menu.open { display: none; }
.mobile-menu a {
  display: block; padding: 0.85rem 2rem; text-decoration: none;
  color: var(--ink); font-weight: 500; font-size: 0.95rem;
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.active { color: var(--accent); }

/* ----------------------------------------------------------------------------
   5. HERO
---------------------------------------------------------------------------- */
.hero-wrap { padding-top: 0.9rem; }
.hero {
  position: relative; border-radius: 26px; overflow: hidden;
  background: var(--hero-bg); box-shadow: var(--shadow-hero);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(560px 300px at 82% 18%, rgba(0, 177, 205, 0.30), transparent 65%),
    radial-gradient(400px 260px at 8% 92%, rgba(0, 177, 205, 0.14), transparent 70%);
}
.hero-inner { position: relative; display: flex; align-items: center; gap: 3.5rem; padding: 3.6rem 4rem; }
.hero-logo { flex: 0 0 185px; width: 185px; height: 185px; display: flex; align-items: center; justify-content: center; }
/* Le logo est affiché ~18 % plus grand que la place qu'il réserve : il déborde
   symétriquement dans les marges du panneau, si bien que le titre et le
   sous-titre ne bougent pas d'un pixel. */
.hero-logo img { width: 218px; height: 218px; max-width: none; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35)); }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #62D2E4; margin-bottom: 0.9rem;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.2rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; color: var(--hero-ink); margin-bottom: 0.75rem; white-space: nowrap;
}
.hero-subtitle { font-size: 1.18rem; color: var(--hero-muted); line-height: 1.5; max-width: 34em; }
/* En pleine largeur : titre et sous-titre chacun sur une seule ligne
   (taille légèrement fluide pour ne jamais déborder). */
@media (min-width: 1150px) {
  .hero-subtitle { white-space: nowrap; max-width: none; font-size: clamp(0.9rem, 1.3vw, 1.15rem); }
}
.hero-ctas { display: flex; gap: 0.75rem; margin-top: 1.7rem; flex-wrap: wrap; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.9rem; font-weight: 600; text-decoration: none;
  padding: 0.62rem 1.3rem; border-radius: 12px;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.btn svg { flex-shrink: 0; }
.btn-cyan { background: var(--cyan); color: #04222E; }
.btn-cyan:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(0, 177, 205, 0.7); }
.btn-outline { color: var(--hero-ink); border: 1px solid rgba(255, 255, 255, 0.28); }
.btn-outline:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.06); }
.btn-navy { background: var(--navy); color: #fff; }
[data-theme="dark"] .btn-navy { background: #1273B8; }
.btn-navy:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0, 81, 144, 0.55); }
.btn-ghost { color: var(--ink); border: 1px solid var(--border-control); background: var(--card); }
.btn-ghost:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--accent); }

/* Hero compact des pages internes (Publications, Team, Tools) */
.page-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--hero-bg); box-shadow: var(--shadow-hero); }
.page-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(480px 240px at 85% 20%, rgba(0, 177, 205, 0.28), transparent 65%);
}
.page-hero-inner { position: relative; padding: 2.4rem 4rem 2.6rem; }
.page-hero .hero-eyebrow { margin-bottom: 0.5rem; }
.page-hero h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--hero-ink); margin-bottom: 0.4rem; }
.page-hero p { font-size: 1.02rem; color: var(--hero-muted); max-width: 46em; }

/* ----------------------------------------------------------------------------
   6. SECTIONS
---------------------------------------------------------------------------- */
.section { padding: 3.1rem 0 0; }
.section:last-of-type { padding-bottom: 1rem; }
.section-label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 0.4rem;
}
.section h2 { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 1.3rem; }

/* Intro de la page d'accueil : deux colonnes justifiées avec césure */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
.intro p { font-size: 0.98rem; color: var(--muted); line-height: 1.75; text-align: justify; hyphens: none; }
/* Césure des mots seulement quand les colonnes se resserrent : en pleine
   largeur les lignes sont assez longues pour justifier sans couper les mots */
@media (min-width: 861px) and (max-width: 1400px) {
  .intro p, .leader-card p { hyphens: auto; }
}

/* ----------------------------------------------------------------------------
   7. CARTES "RESEARCH AREAS"
   Différenciation par un dégradé camaïeu navy → cyan (variables --c1/--c2).
---------------------------------------------------------------------------- */
.research-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.05rem; }
.r-card {
  display: block; color: inherit; text-decoration: none;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.4rem 1.3rem 1.35rem; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Pastille numérotée : rappelle l'axe correspondant de la page Recherches */
.r-num {
  position: absolute; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--clay-soft); color: var(--clay-num);
  box-shadow: inset 0 0 0 1px var(--clay-ring);
  font: 700 0.75rem/1 "Space Grotesk", sans-serif;
}
.r-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.r-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.r-card:nth-child(1) { --c1: #005190; --c2: #0077B4; }
.r-card:nth-child(2) { --c1: #0077B4; --c2: #0095C4; }
.r-card:nth-child(3) { --c1: #0095C4; --c2: #00B1CD; }
.r-card:nth-child(4) { --c1: #00B1CD; --c2: #34C6DC; }
.r-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.65rem; padding-right: 1.9rem; }
.r-icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c1) 55%, transparent);
}
.r-icon svg { width: 21px; height: 21px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.r-card h3 { font-size: 0.97rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
.r-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* ----------------------------------------------------------------------------
   8. BANDEAU D'AFFILIATIONS (page d'accueil)
---------------------------------------------------------------------------- */
.affil {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 1.35rem 0;
}
.affil-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clay); white-space: nowrap; }
.affil-list { display: flex; align-items: center; gap: 0.4rem 1rem; flex-wrap: wrap; font-size: 0.84rem; letter-spacing: 0.03em; color: var(--muted); }
.affil-list b { font-weight: 600; color: var(--ink); }
.affil-list .sep { color: var(--border); }
.affil-list a { color: var(--ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.affil-list a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Deux groupes étiquetés : rattachements institutionnels à gauche, réseaux
   scientifiques à l'extrême droite. L'étiquette passe AU-DESSUS de sa liste :
   c'est ce qui permet au bandeau de se replier proprement en deux blocs sur
   écran étroit, au lieu de séparer une étiquette de la liste qu'elle annonce. */
.affil-duo { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1.2rem 2.5rem; }
.affil-groupe { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.affil-groupe-droite { align-items: flex-end; }
.affil-groupe-droite .affil-list { justify-content: flex-end; }
/* CRCI²NA, Inserm 1307 et CNRS 6075 forment UN seul groupe de trois entités :
   ils tiennent dans un unique élément, donc leurs points médians gardent
   l'espacement serré et la couleur du texte, à la différence des séparateurs
   .sep qui écartent et estompent les entités de premier niveau. */
.affil-unite { white-space: normal; }

/* ----------------------------------------------------------------------------
   9. PAGE PUBLICATIONS
---------------------------------------------------------------------------- */
/* Sélection : 4 cartes */
.spub-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.05rem; }
/* La carte n'est pas cliquable dans son ensemble : seuls le titre et les deux
   pastilles (PubMed, DOI) sont des liens, vers deux destinations distinctes. */
.spub-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.25rem 1.2rem 1.15rem; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 0.55rem; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spub-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.spub-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.spub-card:nth-child(1) { --c1: #005190; --c2: #0077B4; }
.spub-card:nth-child(2) { --c1: #0077B4; --c2: #0095C4; }
.spub-card:nth-child(3) { --c1: #0095C4; --c2: #00B1CD; }
.spub-card:nth-child(4) { --c1: #00B1CD; --c2: #34C6DC; }
.spub-journal { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); margin-top: 0.15rem; }
.spub-title { font-size: 0.88rem; font-weight: 600; line-height: 1.42; font-family: "Inter", sans-serif; letter-spacing: 0; }
/* Auteurs de la carte : forme courte 3 premiers / 3 derniers, la liste
   complète étant réservée à la liste principale. Le ressort de la carte est
   porté ici et non par le titre, pour que titre et auteurs restent collés. */
.spub-authors { font-size: 0.735rem; color: var(--muted); line-height: 1.5; flex: 1; margin-top: -0.15rem; }
.spub-authors strong { color: var(--ink); font-weight: 600; }
.spub-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.spub-links { display: flex; gap: 0.35rem; }
.spub-year {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 2px 9px;
  border-radius: 999px; color: #fff; background: linear-gradient(120deg, var(--c1), var(--c2));
}

/* Petits liens-boutons (DOI, PubMed) */
.pub-link {
  font-size: 0.73rem; font-weight: 500; color: var(--accent); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 1px 9px; border-radius: 999px; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.pub-link:hover { background: var(--accent-soft); }

/* Note de périmètre placée juste sous le titre : celui-ci reprend une marge
   basse réduite pour que les deux se lisent comme un seul bloc. */
.section h2.with-note { margin-bottom: 0.5rem; }
.pub-note { font-size: 0.86rem; color: var(--muted); line-height: 1.65; max-width: 46rem; margin-bottom: 1.35rem; }

/* Filtres */
.pub-controls { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }
/* Les filtres restent masqués tant que la liste PubMed n'est pas chargée */
.pub-controls[hidden] { display: none; }
.filter-row { display: flex; align-items: flex-start; gap: 0.7rem; }
.filter-label {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--faint); min-width: 4rem; padding-top: 0.3rem; flex-shrink: 0;
}
/* En français, « Porté par » est plus long : colonne de labels élargie pour
   garder les trois rangées de filtres alignées */
html[lang="fr"] .filter-label { min-width: 5.4rem; }
.filter-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.filter-btn {
  font-size: 0.76rem; font-weight: 500; padding: 0.22rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--border-control); background: var(--card); color: var(--muted);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.filter-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-btn[aria-pressed="true"] { background: var(--pill-grad); border-color: transparent; color: #fff; }
/* Recherche libre : réutilise .filter-row et .filter-label, donc son intitulé
   s'aligne sur ceux des trois rangées de filtres au lieu de former un bloc à part. */
.pub-search {
  flex: 1 1 auto; max-width: 24rem; min-width: 0; font-family: inherit;
  font-size: 0.78rem; color: var(--ink); padding: 0.24rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--border-control); background: var(--card);
  transition: border-color 0.15s;
}
.pub-search:hover { border-color: var(--accent); }
.pub-search::placeholder { color: var(--faint); }
/* Rangée de tête : recherche toujours visible, bouton d'ouverture des filtres
   à sa droite. Les trois rangées de boutons vivent dans .filter-panel, replié
   par défaut. */
.filter-row-tete { align-items: center; }
.filter-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.filter-panel[hidden] { display: none; }
.filter-toggle {
  display: inline-flex; align-items: center; gap: 0.42rem; flex-shrink: 0;
  font-family: inherit; font-size: 0.76rem; font-weight: 500;
  padding: 0.22rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--border-control); background: var(--card); color: var(--muted);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-toggle:hover,
.filter-toggle[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
/* Pastille de rappel : quand le panneau est fermé, elle dit combien de filtres
   restent actifs, sinon on filtrerait sans le voir. */
.filter-count {
  min-width: 1.05rem; padding: 0 0.28rem; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; line-height: 1.4; text-align: center;
  color: #fff; background: var(--pill-grad);
}
.filter-count[hidden] { display: none; }
.chev {
  width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px); transition: transform 0.2s ease;
}
.filter-toggle[aria-expanded="true"] .chev { transform: rotate(-135deg) translate(-2px, -2px); }
/* Remise à zéro : alignée sur la colonne des groupes de boutons, et rendue
   volontairement différente d'une pastille de filtre — c'est une action, pas
   un choix de plus. */
.filter-row-reset { padding-left: calc(4rem + 0.7rem); }
html[lang="fr"] .filter-row-reset { padding-left: calc(5.4rem + 0.7rem); }
.filter-reset {
  font-family: inherit; font-size: 0.74rem; color: var(--accent); background: none;
  border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 0 0.1rem; cursor: pointer;
}
.filter-reset:hover:not(:disabled) { border-bottom-color: var(--accent); }
.filter-reset:disabled { color: var(--faint); border-bottom-color: transparent; cursor: default; }
.pub-count { font-size: 0.78rem; font-weight: 500; color: var(--faint); letter-spacing: 0.03em; margin-top: 0.2rem; }

/* Liste groupée par année */
.pub-year-group { margin-bottom: 1.6rem; }
.pub-year-heading {
  display: flex; align-items: center; gap: 0.9rem;
  font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--sky); margin-bottom: 0.4rem;
}
[data-theme="dark"] .pub-year-heading { color: #3FB8DC; }
.pub-year-heading::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pub-row { display: flex; align-items: flex-start; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
.pub-row:last-child { border-bottom: none; }
.pub-content { flex: 1; }
.pub-title { font-size: 0.9rem; font-weight: 600; line-height: 1.42; margin-bottom: 0.2rem; }
.pub-authors { font-size: 0.79rem; color: var(--muted); margin-bottom: 0.18rem; line-height: 1.5; }
.pub-authors strong { color: var(--ink); }
/* Repli des longues listes : le milieu est masqué, l'ellipse marque la coupure.
   Les derniers signataires restent visibles dans les deux états. */
.pub-au-rest { display: none; }
.pub-authors.open .pub-au-rest { display: inline; }
.pub-authors.open .pub-au-ell { display: none; }
.pub-au-more {
  font-family: inherit; font-size: 0.73rem; color: var(--accent); background: none;
  border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  padding: 0 0.1rem; cursor: pointer; white-space: nowrap;
}
.pub-au-more:hover { border-bottom-color: var(--accent); }
.pub-meta { font-size: 0.76rem; color: var(--faint); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.pub-meta em { font-style: italic; }
/* Revue et référence forment une seule citation (« Nephrol Dial Transplant.
   2026;41(3):335-48 ») : elles restent solidaires au repli de ligne et se
   copient telles quelles. */
.pub-cite { white-space: normal; }
.pub-ref { font-variant-numeric: tabular-nums; }
.pub-meta-links { display: flex; gap: 0.45rem; }

/* Chargement / erreurs */
.pub-loading { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--faint); padding: 2rem 0; }
.pub-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.pub-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  opacity: 0.25; animation: dotpulse 1.4s ease-in-out infinite;
}
.pub-dots span:nth-child(2) { animation-delay: 0.2s; }
.pub-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotpulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.pub-error, .pub-empty {
  font-size: 0.9rem; color: var(--muted); padding: 1.4rem 1.5rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
}
.pub-error a { color: var(--accent); }

/* ----------------------------------------------------------------------------
   10. PAGE TEAM
---------------------------------------------------------------------------- */
.leaders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.leader-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.8rem 1.8rem 1.6rem; position: relative; overflow: hidden; box-shadow: var(--shadow-sm);
}
.leader-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, var(--navy), var(--cyan)); }
.leader-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1rem; }
/* Les deux cartes leaders côte à côte : même hauteur d'en-tête quel que soit le
   nombre de lignes du sous-titre, pour que les bios commencent alignées. */
@media (min-width: 1101px) { .leader-head { min-height: 124px; } }
.leader-card h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.leader-role { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
.leader-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; text-align: justify; hyphens: none; }
.leader-card p + p { margin-top: 0.7rem; }

/* Avatar : photo si fournie, sinon initiales sur dégradé.
   Pour mettre une photo : remplacer le <div class="avatar…"> par
   <img class="avatar avatar-lg" src="images/team/nom.jpg" alt="Portrait de …"> */
.avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: "Space Grotesk", sans-serif; font-weight: 600;
  background: linear-gradient(135deg, var(--navy), var(--sky));
  flex-shrink: 0; object-fit: cover; letter-spacing: 0.02em; user-select: none;
}
.avatar-lg { width: 124px; height: 124px; font-size: 1.9rem; }
.avatar-sm { width: 52px; height: 52px; font-size: 1rem; }
.avatar-alt { background: linear-gradient(135deg, var(--sky), var(--cyan)); }

/* Section Members : carte de France à gauche, grille des membres à droite */
.group-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 1.2rem; align-items: stretch; }
.map-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
/* Le SVG occupe toute la hauteur disponible : le bas de la carte s'aligne
   sur le bas de la grille des membres (align-items: stretch du group-layout) */
.map-card svg { flex: 1; min-height: 260px; width: 100%; height: 100%; display: block; }
.map-legend { flex-shrink: 0; }
.fr-land { fill: color-mix(in srgb, var(--accent) 8%, var(--card)); stroke: var(--border); stroke-width: 1; }
/* Mode sombre : fond de carte éclairci et côtes plus marquées, sinon la France
   se confond avec la carte qui la contient */
[data-theme="dark"] .fr-land { fill: #22384E; stroke: #3D5C7A; }
[data-theme="dark"] .fr-lines line { stroke: #7E93A6; }
[data-theme="dark"] .fr-map .city-label { fill: #A9BCCD; }
.fr-lines line { stroke: var(--faint); stroke-width: 0.7; opacity: 0.7; }
.fr-map .city-label { font-family: "Inter", sans-serif; font-size: 10.5px; fill: var(--muted); }
/* Angers (centre coordonnateur) : navy en mode jour comme le reste des
   accents de la page. En mode nuit le navy serait invisible sur la carte
   sombre : on bascule alors sur l'accent bronze de la charte, seul ton qui se
   distingue immédiatement des centres partenaires en cyan. */
.fr-map .city-label.main { font-weight: 700; font-size: 11.5px; fill: var(--accent); }
[data-theme="dark"] .fr-map .city-label.main { fill: var(--clay); }
.fr-map .dot-angers { fill: var(--navy); }
[data-theme="dark"] .fr-map .dot-angers { fill: var(--clay); }
.fr-map .dot-city { fill: var(--cyan); }
.fr-map .pulse {
  fill: none; stroke: var(--navy); stroke-width: 1.2;
  transform-box: fill-box; transform-origin: center;
  animation: mappulse 3.8s ease-out infinite;
}
[data-theme="dark"] .fr-map .pulse { stroke: var(--clay); }
@keyframes mappulse { 0% { transform: scale(0.65); opacity: 0.35; } 75%, 100% { transform: scale(1.9); opacity: 0; } }
.map-legend { margin-top: 0.7rem; font-size: 0.78rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.3rem; }
.map-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.45rem; }
.map-legend .dot-main { background: var(--navy); }
[data-theme="dark"] .map-legend .dot-main { background: var(--clay); }
.map-legend .dot-sec { background: var(--cyan); }

.members-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.member-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.15rem 0.9rem 1.05rem; text-align: center; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.member-card .avatar { margin: 0 auto 0.6rem; }
/* font-family: inherit — les noms sont passés en <h3> pour la navigation par titres ;
   sans cette ligne ils basculeraient en Space Grotesk (règle h1, h2, h3). */
.member-name { font-family: inherit; font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.member-role { font-size: 0.75rem; color: var(--faint); margin-top: 0.2rem; }
/* Badges des membres : icônes de spécialité + pastille du site d'exercice
   (remplis par Equipe/generer_equipe.R à partir de Equipe/team.xlsx) */
.member-tags { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.4rem; min-height: 20px; }
/* Pastille unique : icône(s) de spécialité + ville ; le détail des spécialités
   s'affiche au survol (attribut title) */
.site-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px;
  cursor: default;
}
/* Infobulle native au survol : le libellé de spécialité redevient lisible à la
   souris. Le texte masqué reste, lui, pour les lecteurs d'écran et le mobile,
   où il n'y a pas de survol. */
.site-chip[title] { cursor: help; }
.site-chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Contact */
.contact-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.7rem 1.9rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}
.contact-card h2 { margin-bottom: 0.3rem; }
.contact-card .contact-sub { font-size: 0.9rem; color: var(--muted); }
/* Périmètre de l'adresse : demandes scientifiques, ni avis médical ni
   rendez-vous. Placée sous l'adresse, pas en note de bas de page. */
.contact-card .contact-note { font-size: 0.8rem; color: var(--faint); line-height: 1.6;
  margin-top: 0.45rem; max-width: 36rem; }
.contact-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* Sous-section (ex. étudiants et personnels d'appui, page Team) */
.subsection-title { font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; margin: 2.2rem 0 1rem; }
.staff-grid .tool-card p { margin-bottom: 0; }

/* ----------------------------------------------------------------------------
   11. PAGE TOOLS & DATA
---------------------------------------------------------------------------- */
.tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.05rem; }
.tool-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem 1.4rem 1.4rem; position: relative; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tool-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3.5px; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.tool-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.tool-card:nth-child(1) { --c1: #005190; --c2: #0077B4; }
.tool-card:nth-child(2) { --c1: #0077B4; --c2: #0095C4; }
.tool-card:nth-child(3) { --c1: #0095C4; --c2: #00B1CD; }
.tool-card:nth-child(4) { --c1: #00B1CD; --c2: #34C6DC; }
.tool-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.8rem; }
.tool-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--c1) 55%, transparent);
}
.tool-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tool-card h3, .tool-card h4 { font-family: "Space Grotesk", sans-serif; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.tool-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--clay); margin-top: 0.15rem; }
.tool-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.62; flex: 1; margin-bottom: 1.1rem; }
.tool-card .btn { align-self: flex-start; font-size: 0.85rem; padding: 0.5rem 1.1rem; }

/* ----------------------------------------------------------------------------
   11 bis. PAGE RESEARCH / RECHERCHES
   Infographie : 4 cartes d'axe autour du logo central, connexions animées
   tracées par js/research.js, visionneuse de schémas, bandeau continuum.
---------------------------------------------------------------------------- */
/* Sous-titre du bandeau sur une seule ligne en pleine largeur (taille fluide) */
/* Sous-titre tenu sur une seule ligne : la taille plafonne à celle des autres
   bandeaux (1.02rem) pour que la hauteur du panneau reste identique, et ne se
   réduit que si la place manque. */
@media (min-width: 861px) { .page-hero p.hero-oneline { max-width: none; white-space: nowrap; font-size: clamp(0.72rem, 1.3vw, 1.02rem); } }
/* Le plancher du clamp était à 0.85rem : entre 861 et 1050 px la phrase française
   ne pouvait plus se réduire alors qu'elle était trop longue, et `nowrap` la
   faisait déborder de sa boîte SANS faire déborder la page — elle était donc
   rognée en silence, sans barre de défilement pour le signaler. Plancher ramené
   à 0.72rem (12,2 px, le minimum de lisibilité retenu pour ce site).
   Sous 921 px, même à cette taille elle ne tient plus : on la laisse alors
   revenir à la ligne plutôt que de descendre sous le plancher. */
@media (min-width: 861px) and (max-width: 920px) { .page-hero p.hero-oneline { white-space: normal; } }
/* Bouton d'appel en fin de section (renvoi vers une autre page) */
.section-cta { display: flex; justify-content: center; margin-top: 1.6rem; }

/* Composition : grille 2x2, logo au centre, calque SVG des connexions dessous */
.orbit-wrap { position: relative; margin-top: 2.2rem; }
.orbit-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 130px 190px; }
.orbit-hub { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; }
/* Logo central sur un médaillon navy ajusté (pastille serrée, sans cerclage) */
.hub-badge { position: relative; width: 142px; height: 142px; border-radius: 50%; background: var(--hero-bg); display: grid; place-items: center; box-shadow: var(--shadow-hero); }
.hub-badge img { width: 106px; height: 106px; }

/* Cartes d'axe : entièrement fixes, aucune animation sur les blocs de contenu */
/* Colonne flexible : associée au margin-bottom:auto du texte, elle plaque
   l'illustration en bas de carte. Les cartes d'une même rangée ayant la même
   hauteur, leurs images s'alignent quelle que soit la longueur du texte, dans
   les deux langues et à toutes les largeurs. */
.axis-card { position: relative; z-index: 1; background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 1.5rem 1.6rem 1.35rem; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; }
.axis-kicker { display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); }
.axis-num { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--clay-soft); color: var(--clay-num); box-shadow: inset 0 0 0 1px var(--clay-ring); font: 700 0.8rem/1 "Space Grotesk", sans-serif; letter-spacing: 0; }
.axis-card h3 { font-size: 1.22rem; letter-spacing: -0.01em; margin: 0.6rem 0 0.45rem; }
.axis-text { color: var(--muted); font-size: 0.93rem; line-height: 1.62; text-align: justify; hyphens: none; }
/* Un axe peut compter plusieurs paragraphes : c'est le dernier qui absorbe
   l'espace libre, sinon la coupure s'ouvrirait entre les deux au lieu de
   pousser l'illustration en bas. */
.axis-text + .axis-text { margin-top: 0.7rem; }
.axis-text:last-of-type { margin-bottom: auto; }
.axis-text a { color: var(--accent); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color 0.2s ease; }
.axis-text a:hover { text-decoration-color: var(--accent); }

/* Illustration d'axe : images/illustrations/<axe>-light.svg et -dark.svg
   (masters 1600x588). Le fond CSS évite de télécharger les deux versions :
   seule celle du thème actif est demandée par le navigateur. */
/* Illustrations des 4 axes (série chatGPT v14, 1600x588).
   Un seul fichier est téléchargé par thème : le thème actif choisit l'image en CSS.
   Chaque règle donne un WebP en repli puis un image-set() AVIF -> WebP pour les
   navigateurs récents. Masters et sources : Archives/Illustrations chatGPT v14. */
.axis-figure { margin: 1.15rem 0 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #DCEAF8; }
[data-theme="dark"] .axis-figure { background: #01121F; }
.axis-illu { display: block; width: 100%; aspect-ratio: 1600 / 588; background-repeat: no-repeat; background-position: center; background-size: contain; }
.axis-illu-1 { background-image: url("../images/illustrations/axis-01-observational-light.webp"); background-image: image-set(url("../images/illustrations/axis-01-observational-light.avif") type("image/avif"), url("../images/illustrations/axis-01-observational-light.webp") type("image/webp")); }
[data-theme="dark"] .axis-illu-1 { background-image: url("../images/illustrations/axis-01-observational-dark.webp"); background-image: image-set(url("../images/illustrations/axis-01-observational-dark.avif") type("image/avif"), url("../images/illustrations/axis-01-observational-dark.webp") type("image/webp")); }
.axis-illu-2 { background-image: url("../images/illustrations/axis-02-translational-light.webp"); background-image: image-set(url("../images/illustrations/axis-02-translational-light.avif") type("image/avif"), url("../images/illustrations/axis-02-translational-light.webp") type("image/webp")); }
[data-theme="dark"] .axis-illu-2 { background-image: url("../images/illustrations/axis-02-translational-dark.webp"); background-image: image-set(url("../images/illustrations/axis-02-translational-dark.avif") type("image/avif"), url("../images/illustrations/axis-02-translational-dark.webp") type("image/webp")); }
.axis-illu-3 { background-image: url("../images/illustrations/axis-03-experimental-light.webp"); background-image: image-set(url("../images/illustrations/axis-03-experimental-light.avif") type("image/avif"), url("../images/illustrations/axis-03-experimental-light.webp") type("image/webp")); }
[data-theme="dark"] .axis-illu-3 { background-image: url("../images/illustrations/axis-03-experimental-dark.webp"); background-image: image-set(url("../images/illustrations/axis-03-experimental-dark.avif") type("image/avif"), url("../images/illustrations/axis-03-experimental-dark.webp") type("image/webp")); }
.axis-illu-4 { background-image: url("../images/illustrations/axis-04-interventional-light.webp"); background-image: image-set(url("../images/illustrations/axis-04-interventional-light.avif") type("image/avif"), url("../images/illustrations/axis-04-interventional-light.webp") type("image/webp")); }
[data-theme="dark"] .axis-illu-4 { background-image: url("../images/illustrations/axis-04-interventional-dark.webp"); background-image: image-set(url("../images/illustrations/axis-04-interventional-dark.avif") type("image/avif"), url("../images/illustrations/axis-04-interventional-dark.webp") type("image/webp")); }

/* Connexions animées entre logo et cartes (tirets qui circulent + impulsions) */
.links-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.link-radial { stroke: var(--cyan); stroke-width: 2.6; fill: none; opacity: 0.95; stroke-dasharray: 6 7; stroke-linecap: round; animation: linkflow 0.7s linear infinite; }
.link-ring { stroke: var(--accent); stroke-width: 2.2; fill: none; opacity: 0.75; stroke-dasharray: 6 8; stroke-linecap: round; animation: linkflow14 1s linear infinite; }
.link-dot { fill: var(--cyan); opacity: 1; filter: drop-shadow(0 0 4px var(--cyan)); }
.link-dot-soft { fill: var(--accent); opacity: 0.95; filter: drop-shadow(0 0 4px var(--accent)); }
@keyframes linkflow { to { stroke-dashoffset: -13; } }
@keyframes linkflow14 { to { stroke-dashoffset: -14; } }


/* Bandeau « continuum » de fin de page */
.flow-card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 1.6rem 1.8rem; box-shadow: var(--shadow-sm); }
.flow-strip { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.flow-step { padding: 0.42rem 0.95rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 600 0.82rem/1.4 "Inter", sans-serif; white-space: nowrap; }
/* 2 px : la flèche reste discrète à côté de la pastille « back to patients » ;
   c'est la longueur et le rythme des tirets qui la rendent visible, pas l'épaisseur. */
.flow-arrow { position: relative; width: 66px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--cyan) 0 9px, transparent 9px 16px); animation: flowslide 1s linear infinite; }
.flow-arrow::after { content: ""; position: absolute; right: -2px; top: -3px; border-left: 7px solid var(--cyan); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
@keyframes flowslide { to { background-position: 16px 0; } }
.flow-loop { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--cyan); font: 600 0.82rem/1.4 "Inter", sans-serif; white-space: nowrap; }
.flow-text { color: var(--muted); font-size: 0.97rem; text-align: justify; hyphens: none; }
.flow-text + .flow-text { margin-top: 0.8rem; }
.flow-text a { color: var(--accent); }

/* Confort : animations coupées si le système le demande */
@media (prefers-reduced-motion: reduce) {
  .link-radial, .link-ring, .flow-arrow { animation: none; }
  .link-dot, .link-dot-soft { display: none; }
}

/* Responsive de la page Research : colonne unique, logo en tête, liens masqués */
@media (max-width: 1050px) {
  .orbit-grid { grid-template-columns: 1fr; gap: 2rem; }
  .orbit-hub { position: static; transform: none; display: flex; justify-content: center; margin-bottom: 1.6rem; }
  .links-svg { display: none; }
}

/* ----------------------------------------------------------------------------
   12. PAGE LÉGALE
   Colonne de lecture resserrée : le conteneur du site fait 1300 px, sur lequel
   une page de texte suivi serait illisible (plus de 200 caractères par ligne).
---------------------------------------------------------------------------- */
/* Deux colonnes : sommaire collant à gauche, texte à droite. La colonne de
   texte reste bornée à 46rem, sans quoi la ligne atteindrait 159 caractères
   sur les 1236 px utiles du conteneur (mesuré le 21/08). */
.legal { display: grid; grid-template-columns: 15rem minmax(0, 46rem); gap: 0 4rem; align-items: start; }
.legal-toc { position: sticky; top: 86px; padding-top: 3.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.legal-toc-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.3rem; }
.legal-toc a { font-size: 0.86rem; line-height: 1.4; color: var(--muted); text-decoration: none; }
.legal-toc a:hover, .legal-toc a:focus-visible { color: var(--accent); }
.legal-content p, .legal-content li { font-size: 0.95rem; color: var(--muted); line-height: 1.75; text-align: justify; hyphens: none; }
.legal-content p + p, .legal-content ul + p { margin-top: 0.8rem; }
.legal-content h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 1.7rem 0 0.55rem; }
.legal-content ul { margin: 0.2rem 0 0; padding-left: 1.15rem; }
.legal-content li { text-align: left; }
.legal-content li + li { margin-top: 0.4rem; }
.legal-content a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(0, 81, 144, 0.35); text-underline-offset: 2px; transition: text-decoration-color 0.2s ease; }
.legal-content a:hover { text-decoration-color: var(--accent); }
.legal-content code { font-size: 0.9em; background: var(--accent-soft); border-radius: 4px; padding: 0.1em 0.35em; }
.legal-address { color: var(--ink); line-height: 1.65; }
.legal-updated { font-size: 0.82rem; color: var(--faint); margin-top: 2.6rem; }
[data-theme="dark"] .legal-content a { text-decoration-color: rgba(98, 210, 228, 0.4); }

/* Sous 900 px la colonne de gauche n'a plus la place : le sommaire repasse en
   haut de page, non collant. Il reste utile, la page étant très longue. */
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; }
  .legal-toc { position: static; padding: 2.4rem 0 1.4rem; border-bottom: 1px solid var(--border); }
}

/* Notice de source sous la liste des publications (exigence d'attribution NCBI) */
.pub-source { font-size: 0.8rem; color: var(--faint); margin-top: 1.6rem; }
.pub-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pub-source a:hover { color: var(--accent); }

/* ----------------------------------------------------------------------------
   13. PAGE 404
   Page autonome servie par Caddy pour toute URL inexistante, donc à n'importe
   quelle profondeur : tous ses chemins sont absolus. Elle reprend le dégradé du
   hero et suit le thème clair/sombre comme le reste du site.
---------------------------------------------------------------------------- */
/* La 404 ne défile pas : la gouttière de barre de défilement réservée pour le reste
   du site (scrollbar-gutter: stable) laisserait une bande claire de 15 px sur le
   dégradé. Invisible ailleurs, où le fond de page est déjà très clair. */
html.error-html { scrollbar-gutter: auto; }
.error-shell {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--hero-bg); color: var(--hero-ink); padding: 2.5rem 1.25rem;
}
.error-card { min-height: 0; max-width: 34rem; text-align: center; }
.error-card img { margin-bottom: 1.3rem; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35)); }
.error-code {
  font: 600 0.76rem/1 "Space Grotesk", "Inter", sans-serif; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hero-muted); margin-bottom: 0.55rem;
}
.error-card h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); letter-spacing: -0.02em; margin-bottom: 0.7rem; }
/* Chaque langue reste d’un seul tenant : sur mobile le titre se coupe entre les
   deux langues, jamais au milieu de l’une d’elles. */
.error-card h1 span { white-space: nowrap; }
.error-text { color: var(--hero-muted); line-height: 1.55; }
.error-text + .error-text { margin-top: 0.3rem; }
.error-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.7rem; }

/* ----------------------------------------------------------------------------
   14. FOOTER
---------------------------------------------------------------------------- */
footer { margin-top: 3.5rem; border-top: 1px solid var(--border); }
/* Padding vertical seulement : la raccourci `padding: 1.5rem 0 1.8rem` remettait
   les marges horizontales à zéro et écrasait celles de .container, si bien que le
   pied de page débordait de 2 rem de chaque côté par rapport au reste de la page. */
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; padding-bottom: 1.8rem; flex-wrap: wrap; }
.footer-copy { font-size: 0.8rem; color: var(--faint); }
.footer-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: 0.8rem; color: var(--muted); text-decoration: none; transition: color 0.15s; }
.footer-nav a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 0.15rem; }
/* Roue crantée du pied de page : accès au tableau de bord de mesure d'audience
   (Umami, servi sous /admin). Volontairement effacée — elle ne s'adresse qu'à
   l'éditeur du site et ne doit pas concurrencer les icônes de réseaux sociaux. */
.icon-admin { color: var(--faint); opacity: 0.5; }
.icon-admin:hover { opacity: 1; }

/* Bouton « retour en haut » (page Publications) : apparaît après défilement */
.back-top {
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border-control); background: var(--card); color: var(--accent);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.back-top.visible { opacity: 1; visibility: visible; transform: none; }
.back-top:hover { color: var(--ink); border-color: var(--accent); }

/* ----------------------------------------------------------------------------
   15. ACCESSIBILITÉ & DIVERS
---------------------------------------------------------------------------- */
/* Lien d'évitement (visible uniquement au focus clavier) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.6rem 1rem;
  border-radius: 0 0 10px 0; text-decoration: none; font-size: 0.85rem;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------------------------
   16. RESPONSIVE
---------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .research-grid, .spub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro { grid-template-columns: 1fr; gap: 1rem; }
  .group-layout { grid-template-columns: 1fr; }
  .map-card { max-width: 420px; margin: 0 auto; width: 100%; }
  .leaders-grid { grid-template-columns: 1fr; }
  .hero-inner { padding: 3rem 2.5rem; }
  .page-hero-inner { padding: 2.1rem 2.5rem 2.3rem; }
  .hero h1 { white-space: normal; }
}
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu.open { display: block; }
  /* Sur écran étroit, le texte justifié creuse des « rivières » entre les mots :
     tous les paragraphes de contenu passent au fer à gauche. */
  .intro p, .leader-card p, .axis-text, .flow-text, .legal-content p { text-align: left; hyphens: none; }
  /* Cibles tactiles du pied de page portées au-delà des 24 px minimum (WCAG 2.5.8) */
  .footer-nav a { padding: 0.3rem 0; }
  /* Lisibilité : aucun texte sous 12 px sur mobile */
  .tool-tag, .site-chip, .affil-label { font-size: 0.72rem; }
  .affil { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .affil-duo { grid-template-columns: 1fr; gap: 1.1rem 0; }
  .affil-groupe-droite { align-items: flex-start; }
  .affil-groupe-droite .affil-list { justify-content: flex-start; }
  .hero-inner { flex-direction: column; text-align: center; gap: 2rem; padding: 2.6rem 1.5rem; }
  .hero-logo { flex-basis: 153px; width: 153px; height: 153px; }
  .hero-logo img { width: 100%; height: 100%; }
  .hero-subtitle { margin: 0 auto; }
  .hero-ctas { justify-content: center; }
  .page-hero-inner { padding: 1.8rem 1.5rem 2rem; }
  .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card { flex-direction: column; align-items: flex-start; }
  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .container { padding: 0 1rem; }
  .research-grid, .spub-grid, .tools-grid, .members-grid { grid-template-columns: 1fr; }
  .filter-row { flex-direction: column; gap: 0.3rem; }
  .filter-label { padding-top: 0; }
  .pub-search { max-width: none; width: 100%; }
  /* La rangée de tête reste horizontale : le champ et le bouton doivent tenir
     côte à côte. L'intitulé passe en texte masqué, le repère visuel étant le
     champ lui-même ; il reste lu par les lecteurs d'écran. */
  .filter-row-tete { flex-direction: row; gap: 0.5rem; }
  .filter-row-reset { padding-left: 0; }
  html[lang="fr"] .filter-row-reset { padding-left: 0; }
  .filter-row-tete .filter-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; min-width: 0;
  }
}
/* ----------------------------------------------------------------------------
   NAVBAR : la barre complète (marque + 5 onglets + 4 icônes) exige environ
   1200 px. En dessous, elle débordait de la page entre 862 et 1118 px, et le
   nom du groupe — en white-space: nowrap — était rogné jusqu'à 1194 px sans
   pour autant faire déborder la page. Trois paliers, mesurés :
     ≤ 1200 px : courriel et réseaux sociaux masqués (tous présents dans le
                 pied de page) et onglets resserrés ;
     ≤ 980 px  : nom du groupe et logo légèrement réduits ;
     ≤ 900 px  : logo seul, jusqu'au basculement en menu mobile à 860 px.
   Les deux derniers paliers sont bornés par min-width: 861px : sous 860 px les
   onglets ont disparu, la place ne manque plus et le nom doit rester affiché.
   Vérifié sans débordement ni rognage sur les 12 pages, de 320 à 1400 px.
---------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav-right .icon-btn:not(.nav-toggle):not(#themeToggle), .nav-right .nav-sep { display: none; }
}
@media (min-width: 861px) and (max-width: 1200px) {
  .nav-links a { padding: 0.32rem 0.55rem; }
  .nav-inner { gap: 1rem; }
}
@media (min-width: 861px) and (max-width: 980px) {
  .brand { font-size: 0.84rem; gap: 0.45rem; }
  .brand img { width: 26px; height: 26px; }
}
@media (min-width: 861px) and (max-width: 900px) {
  /* Bande étroite de 40 px : seul le logo tient. Le nom reste dans le HTML,
     donc annoncé par les lecteurs d'écran. */
  .brand { font-size: 0; }
  .brand img { width: 30px; height: 30px; }
}
/* Sous 480 px, le nom complet ne tient pas à côté du bouton jour/nuit, du
   sélecteur de langue et du menu : il était rogné et passait sous les boutons
   (bandes mesurées : 320-354 px et 382-472 px). On n'affiche plus que
   « Maine-Anjou ». Le reste du nom est masqué visuellement mais reste dans le
   flux du document, donc dans le nom accessible du lien et pour les moteurs. */
@media (max-width: 480px) {
  .brand-long {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* Très petit écran : nom du groupe et logo légèrement réduits pour tenir
   sur une ligne avec les trois commandes restantes. */
@media (max-width: 430px) {
  .brand { font-size: 0.84rem; gap: 0.45rem; }
  .brand img { width: 26px; height: 26px; }
  .nav-right { gap: 0.15rem; }
}
@media (max-width: 400px) {
  /* L'écart entre la marque et les commandes n'a plus lieu d'être quand la
     place manque (nav-right est de toute façon poussé à droite). */
  .nav-inner { gap: 0.75rem; }
}
@media (max-width: 380px) {
  .brand { font-size: 0.76rem; gap: 0.4rem; }
  .brand img { width: 22px; height: 22px; }
  #themeToggle { display: none; } /* le thème suit alors la préférence système */
}