/* ============================================================
   HyMed — ce que le JavaScript faisait, refait sans lui.

   POURQUOI. Le site tournait comme une application React : la bascule
   FR / EN, le menu mobile, le défilement doux et le décor du bandeau
   vivaient dans son code. Servi en pages fabriquées, ce code n'existe plus.
   Publier sans remplacer ces quatre choses aurait livré un site en recul —
   un menu qui ne s'ouvre pas sur téléphone, une langue qu'on ne peut plus
   changer.

   Tout ce qui suit est du CSS, et rien d'autre. Une page qui ne charge aucun
   script garde donc son menu, ses ancres et son décor.
   ============================================================ */

/* ── 1. LE DÉFILEMENT DOUX ─────────────────────────────────────────────────
   Les liens du menu sont des ancres (#equipe, #nouvelles). Le saut brutal
   d'une ancre coupe le fil de lecture ; la propriété native fait ce que le
   script faisait, et elle respecte d'elle-même « animations réduites ». */
html {
  scroll-behavior: smooth;
}

/* L'en-tête est collant : sans marge de sécurité, une ancre arrive SOUS lui
   et le titre visé reste caché. */
.hy [id] {
  scroll-margin-top: 92px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── 2. LA BASCULE DE LANGUE ───────────────────────────────────────────────
   Elle était faite de deux boutons pilotés par le script : la langue ne
   vivait que dans la mémoire de la page — ni adresse, ni cookie. Elle est
   maintenant faite de deux LIENS vers les deux pages (`/` et `/en/`), ce qui
   rend l'anglais partageable et indexable. L'apparence ne change pas. */
.hy .lang a {
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: background .15s, color .15s;
}

.hy .lang a:hover {
  color: var(--ink);
  background: var(--bg-alt);
}

.hy .lang a.on {
  background: var(--navy);
  color: var(--on-accent);
}

/* ── 3. LE MENU MOBILE ─────────────────────────────────────────────────────
   Le bouton hamburger ouvrait le panneau par script. Une case à cocher
   invisible tient le même rôle : l'étiquette la coche, le panneau s'ouvre.
   La case est hors de l'écran mais reste focalisable — le menu s'ouvre donc
   aussi au clavier, ce que le bouton d'origine ne faisait pas toujours. */
.hy .burger-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.hy .mobile-menu {
  display: none;
}

.hy .burger-toggle:checked ~ .mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 20px;
  border-top: 1px solid var(--line);
}

/* Le trait du milieu disparaît et les deux autres se croisent : le bouton
   dit « fermer » quand le menu est ouvert. */
.hy .burger-toggle:checked + .nav .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hy .burger-toggle:checked + .nav .burger span:nth-child(2) {
  opacity: 0;
}
.hy .burger-toggle:checked + .nav .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.hy .burger span {
  transition: transform .2s, opacity .2s;
}

/* Le contour de focus se pose sur l'étiquette, pas sur la case cachée. */
.hy .burger-toggle:focus-visible + .nav .burger {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Sur grand écran, le menu déroulant n'existe pas : la barre suffit. */
@media (min-width: 981px) {
  .hy .burger-toggle:checked ~ .mobile-menu {
    display: none;
  }
}

/* ── 4. LE DÉCOR DU BANDEAU ────────────────────────────────────────────────
   Un canevas dessiné en JavaScript occupait le fond du bandeau. Il était
   VIDE depuis longtemps — personne ne l'a vu tourner. Il est remplacé par un
   décor CSS : deux halos très pâles qui respirent lentement, aux couleurs du
   laboratoire. Rien ne clignote, rien ne tourne : sur un site de recherche
   clinique, le fond doit se faire oublier.

   Il est purement décoratif (`aria-hidden`), ne reçoit aucun clic, et
   s'immobilise quand le visiteur a demandé moins d'animations. */
.hy .hero-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hy .hero-decor::before,
.hy .hero-decor::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
}

.hy .hero-decor::before {
  width: 52vmax;
  height: 52vmax;
  top: -18vmax;
  right: -12vmax;
  background: radial-gradient(circle, var(--blue-pale), transparent 70%);
  animation: hy-respire 22s ease-in-out infinite;
}

.hy .hero-decor::after {
  width: 38vmax;
  height: 38vmax;
  bottom: -16vmax;
  left: -10vmax;
  background: radial-gradient(circle, var(--blue-2), transparent 72%);
  opacity: .18;
  animation: hy-respire 28s ease-in-out infinite reverse;
}

/* Le contenu du bandeau passe au-dessus du décor. */
.hy .hero-inner {
  position: relative;
  z-index: 1;
}

@keyframes hy-respire {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 3%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hy .hero-decor::before,
  .hy .hero-decor::after {
    animation: none;
  }
}


/* LES FICHES DE L'ÉQUIPE N'ONT PLUS LE CADRE NOIR DU NAVIGATEUR (15/09/2026).

   Chaque membre est un <button> : dans l'ancienne application, il ouvrait la
   fiche de la personne. L'export statique a emporté la balise mais pas son
   habillage — le navigateur lui a donc appliqué le sien : un cadre noir en
   relief, un fond gris et un padding. On le remet à plat. Le curseur reste
   celui d'un texte tant que la fiche n'est pas revenue : rien ne se passe
   encore au clic, et la main promettrait le contraire. */
.hy .member {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

/* Le portrait recule d'un cheveu au survol : la seule promesse qu'il est
   cliquable, puisqu'on ne lui a pas mis de cadre. */
.hy .member--cliquable .member-img-wrap {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
.hy .member--cliquable:hover .member-img-wrap {
  transform: translateY(-3px);
  opacity: .92;
}
.hy .member:focus-visible {
  outline: 2px solid var(--blue-2, #2f6eb5);
  outline-offset: 4px;
}


/* ── LA FICHE D'UN MEMBRE ─────────────────────────────────────────
   Ouverte au clic sur un portrait, remplie avec la collection « Équipe »
   du site. Même vocabulaire que le reste : fond crème, nom en display,
   libellés en petites capitales. */
.hy-fiche-fond {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 34, .55);
  backdrop-filter: blur(3px);
  animation: hy-fiche-apparait .18s ease-out;
}

@keyframes hy-fiche-apparait {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hy-fiche {
  position: relative;
  width: min(680px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  padding: 32px;
  background: var(--paper, #fbfaf5);
  color: var(--ink, #15202e);
  border-radius: var(--radius, 10px);
  box-shadow: 0 30px 80px -20px rgba(16, 24, 34, .45);
}

.hy-fiche-fermer {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.hy-fiche-fermer:hover {
  background: rgba(16, 24, 34, .06);
  color: var(--ink, #15202e);
}

.hy-fiche-haut {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.hy-fiche-photo {
  width: 150px;
  flex: none;
  border-radius: var(--radius, 10px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
.hy-fiche-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hy-fiche-identite {
  min-width: 0;
  padding-right: 32px;
}

.hy-fiche-nom {
  margin: 0 0 6px;
  font-family: var(--display, Georgia, serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.hy-fiche-role {
  margin: 0 0 4px;
  font-size: 15px;
}

.hy-fiche-aff {
  margin: 0 0 2px;
  color: var(--muted, #6b7280);
  font-size: 13.5px;
}

.hy-fiche-lien {
  display: inline-block;
  margin-top: 10px;
  color: var(--blue-2, #2f6eb5);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.hy-fiche-lien:hover {
  text-decoration: underline;
}

.hy-fiche-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px 28px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 24, 34, .1);
}

.hy-fiche-champ--large {
  margin-top: 22px;
}

.hy-fiche-label {
  margin-bottom: 4px;
  color: var(--muted, #6b7280);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hy-fiche-valeur {
  font-size: 14.5px;
  line-height: 1.6;
}
.hy-fiche-valeur p {
  margin: 0 0 8px;
}
.hy-fiche-valeur a {
  color: var(--blue-2, #2f6eb5);
}

@media (max-width: 560px) {
  .hy-fiche {
    padding: 24px 20px;
  }
  .hy-fiche-haut {
    flex-direction: column;
  }
  .hy-fiche-photo {
    width: 120px;
  }
}