/* Ophta Miramas La Crau — v6 "Grands caractères".
   Large print for low-vision readers: Literata for headings (a sturdy serif made for reading on
   screens, close to the practice's original logo), Atkinson Hyperlegible Next for reading (designed
   for low-vision readers), Atkinson Hyperlegible Mono for labels. No italics, no pure white: warm
   paper, ink, and one Provence colour per eye disease or surgery. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */

/* Literata, cut down to weights 450–700 and optical sizes 18–72. */
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2");
  font-weight: 450 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-mono-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --c-paper: #f2ede3;
  --c-paper-2: #e9e2d4;
  --c-sand: #e3d9c6;
  --c-light: #f7f2e9;
  --c-ink: #0d1a2b;
  --c-ink-2: #33405a;
  /* Secondary text: 8:1 on the paper (AAA), 6.7:1 on the sand. */
  --c-ink-3: #3d475b;
  --c-line: rgba(13, 26, 43, 0.14);
  --c-line-2: rgba(13, 26, 43, 0.3);
  /* 7.5:1 on the paper (AAA), white on it 8.7:1. */
  --c-blue: #1a4895;
  --c-blue-deep: #143c7d;
  --c-blue-soft: #d7e2f3;
  --c-sky: #a8c8f3;
  --c-night: #0a1424;
  --c-line-dark: rgba(255, 255, 255, 0.18);
  --c-on-night: rgba(255, 255, 255, 0.84);
  --c-sun: #efb24a;
  --c-alert: #b5482b;
  --c-alert-soft: #f3d9cb;
  /* Alert as text: 5.2:1 on --c-alert-soft, 5.9:1 on the paper. */
  --c-alert-text: #9a3a20;
  --c-iris-bg: #07101d;
  /* The four operations, on the night (9.7:1 or more on --c-night). */
  --c-amber: #f0c27a;
  --c-violet: #c4b5fd;
  --c-rose: #f3a99c;
  --c-teal: #80d4d9;
  /* The same four on the paper (5:1 or more on --c-paper, and white on them). */
  --c-amber-ink: #8a5a12;
  --c-violet-ink: #5b45b0;
  --c-rose-ink: #a8443a;
  --c-teal-ink: #1b666c;
  /* The four pathologies, on the night (9.5:1 or more) and on the paper (5:1 or more, white on them
     6:1 or more): jade for the glaucoma, raspberry for the diabetic retina, gold for the macula,
     plum for the detachment. */
  --c-jade: #8edbb9;
  --c-raspberry: #f4a7c8;
  --c-gold: #f1d36b;
  --c-plum: #dcb0e6;
  --c-jade-ink: #1e6b52;
  --c-raspberry-ink: #9c2759;
  --c-gold-ink: #765f00;
  --c-plum-ink: #74347f;

  --font-display: "Literata", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display: clamp(4.2rem, 1.4rem + 11vw, 13rem);
  --fs-title: clamp(3.1rem, 1.3rem + 6.6vw, 8.6rem);
  --fs-h2: clamp(2.6rem, 1.3rem + 4.6vw, 6.4rem);
  --fs-h3: clamp(1.7rem, 1.3rem + 1.3vw, 2.5rem);
  --fs-lead: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-body: 1.1875rem;
  --fs-small: 1rem;
  --fs-label: 0.9375rem;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1320px;
  --section-y: clamp(5rem, 10vw, 9.5rem);
  --footer-gap: clamp(2rem, 5vw, 4rem);
  --header-h: 84px;
  --frame: clamp(8px, 1.1vw, 16px);

  --r-sm: 10px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --pill: 999px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-soft: 0 24px 60px -32px rgba(13, 26, 43, 0.35);
  --shadow-lift: 0 34px 80px -36px rgba(13, 26, 43, 0.5);
}

html[data-text-size="1"] {
  font-size: 112.5%;
}

html[data-text-size="2"] {
  font-size: 125%;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--c-paper);
  color: var(--c-ink);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

picture {
  display: block;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

/* Phones: the large letters of a title may hyphenate a long word rather than overflow. */
@media (max-width: 640px) {
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* No italics anywhere: slanted letters are harder to read for low vision. The accent of a title is
   a colour. */
em,
i,
cite {
  font-style: normal;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

strong,
b {
  font-weight: 700;
}

::selection {
  background: var(--c-blue);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--focus-ring, var(--c-blue));
  outline-offset: 3px;
}

/* On the dark grounds the dark blue ring is too faint (2.4:1): light blue there (11:1). */
:is(.section--night, .menu, .hero, .urgent__call, .chapter-nav, .film, .site-footer),
html[data-hero="dark"] .site-header:not(.is-scrolled) {
  --focus-ring: var(--c-sky);
}

/* The focus ring closes in on what it frames, like a lens finding its focus. */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible {
    animation: focus-in 0.35s var(--ease-out);
  }
}

@keyframes focus-in {
  from {
    outline-color: transparent;
    outline-offset: 10px;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  border-radius: var(--pill);
  background: var(--c-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease-out);
}

.skip-link:focus {
  transform: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--flush-top {
  padding-top: 0;
}

.section--sand {
  background: var(--c-sand);
}

/* A dark chapter in the middle of a light page, set in like a panel. */
.section--night {
  isolation: isolate;
  margin-inline: var(--frame);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-night);
  color: #fff;
}

.section--night .label {
  color: var(--c-on-night);
}

.section--night .label::before {
  background: var(--c-sky);
}

.section--night .section-title em {
  color: var(--c-sky);
}

.section--night .section-head__lead {
  color: var(--c-on-night);
}

.icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* Photo frames: the picture fills the frame, slightly taller so it can drift while scrolling. */
[data-parallax] {
  position: relative;
  overflow: hidden;
}

[data-parallax] > picture {
  position: absolute;
  inset: 0;
}

[data-parallax] > picture img {
  width: 100%;
  height: 112%;
  object-fit: cover;
  transform: translateY(var(--py, -6%));
}

.split__media > picture {
  height: 100%;
}

/* ---------- Background drawings (faint line art, one theme per page) ---------- */

/* Once the pointer has come over the head, the same drawing is drawn on a canvas (drawing.js),
   whose lines part around the pointer: the painted one gives way to it. */
.drawing.is-live {
  background: none;
  opacity: 1;
  -webkit-mask: none;
  mask: none;
}

.drawing__live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.drawing {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--drawing-color, var(--c-blue));
  opacity: var(--drawing-opacity, 0.07);
  -webkit-mask: var(--drawing-src, url("../images/drawings/coupe.svg")) var(--drawing-pos, 80% 50%) / var(--drawing-size, cover) no-repeat;
  mask: var(--drawing-src, url("../images/drawings/coupe.svg")) var(--drawing-pos, 80% 50%) / var(--drawing-size, cover) no-repeat;
}

html[data-drawing="iris"] .drawing--page,
.drawing--iris {
  --drawing-src: url("../images/drawings/iris.svg");
}

html[data-drawing="retine"] .drawing--page {
  --drawing-src: url("../images/drawings/retine.svg");
}

html[data-drawing="optique"] .drawing--page,
.drawing--optique {
  --drawing-src: url("../images/drawings/optique.svg");
}

/* ---------- Common typography ---------- */

.label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--c-ink-2);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.label::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 2px;
  background: var(--op-ink, var(--c-blue));
}

.label--light {
  color: var(--c-on-night);
}

.label--light::before {
  background: var(--op-accent, var(--c-sky));
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem clamp(2rem, 6vw, 6rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

@media (max-width: 760px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.section-title {
  font-size: var(--fs-h2);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -0.025em;
}

.section-title em,
.page-title em {
  color: var(--op-ink, var(--c-blue));
}

.section-head__lead {
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.lead {
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Giant words: one line filling the width of its column exactly. The line width (--k, in em) is
   measured at build time, so the size is right from the first paint. */
.giant {
  display: block;
  container-type: inline-size;
}

.giant > span {
  display: block;
  /* --fit (site.js) only shrinks a title that the reader's own settings have made too wide. */
  font-size: calc(100cqi / var(--k) * var(--fit, 1));
  font-weight: 560;
  line-height: 0.88;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .giant--long > span {
    font-size: min(1em, 10.5cqi);
    line-height: 1;
    white-space: normal;
  }
}

/* Very narrow phones: a long word of a title may be hyphenated rather than overflow. */
@media (max-width: 420px) {
  .giant-title {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Section head in large print: the first words of the title fill the width of the page, the rest
   of the title answers on the right, the introduction below on the left. */
.giant-head {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.giant-title {
  font-size: var(--fs-h2);
  line-height: 1;
}

.giant-title__rest {
  display: block;
  margin-top: 0.12em;
  text-align: right;
}

.giant-title {
  max-width: none;
  /* A word wider than the screen (very large text, wider spacing) breaks rather than overflows. */
  overflow-wrap: anywhere;
}

/* "Chirurgie de la" above "cataracte": the first words small, the name as wide as the page. */
.giant-title__kicker {
  display: block;
  margin-bottom: 0.2em;
  color: var(--op-ink, var(--c-blue));
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 560;
  letter-spacing: -0.015em;
}

.giant-head__lead {
  max-width: 36rem;
  margin-top: clamp(1.25rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--c-blue);
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.giant-head__lead .link-arrow {
  margin-top: 1.1rem;
}

.section--night .giant-head__lead,
.bloc .giant-head__lead {
  border-color: var(--c-sky);
  color: var(--c-on-night);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--c-blue);
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.45s var(--ease-out);
}

.link-arrow .icon {
  transition: transform 0.45s var(--ease-out);
}

.link-arrow:hover {
  background-size: 100% 2px;
}

/* Hover motion only with a mouse: on a touch screen a tap would leave it stuck. */
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover .icon {
    transform: translateX(4px);
  }
}

.link-arrow--light {
  color: #fff;
}

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.7rem;
  border-radius: var(--pill);
  background: var(--c-sun);
  color: var(--c-ink);
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* The shine passes inside the badge (its gradient moves; nothing overflows to be cut). */
.badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%) 200% 0 / 300% 100% no-repeat;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .badge::after {
    animation: badge-shine 1.4s var(--ease-in-out) 1.4s 2;
  }
}

@keyframes badge-shine {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -100% 0;
  }
}

/* ---------- Logo ---------- */

.brand {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
  color: var(--c-blue);
  text-decoration: none;
}

.brand__mark {
  width: 46px;
  height: 46px;
  overflow: visible;
  color: var(--c-ink);
  transform-origin: 50% 50%;
}

/* As on the practice's original logo: the name in serif capitals, two blues. */
.brand__name {
  display: grid;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
}

.brand__line--1 {
  color: var(--c-blue);
  font-size: 1.45rem;
  letter-spacing: 0.1em;
}

.brand__line--2 {
  margin-top: 0.22rem;
  color: var(--c-blue);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* Hovered, the eye of the logo blinks and its pupil narrows, as in the light of the slit lamp. */
@media (prefers-reduced-motion: no-preference) {
  .brand:is(:hover, :focus-visible) .brand__mark {
    animation: brand-blink 0.5s var(--ease-in-out);
  }

  .brand__mark path:last-child {
    transform-origin: 45.7px 32px;
    transition: transform 0.6s var(--ease-out);
  }

  .brand:is(:hover, :focus-visible) .brand__mark path:last-child {
    transform: scale(0.55);
  }

  .brand__name {
    transition: transform 0.5s var(--ease-out);
  }

  .brand:is(:hover, :focus-visible) .brand__name {
    transform: translateX(3px);
  }
}

@keyframes brand-blink {
  40% {
    transform: scaleY(0.08);
  }

  60% {
    transform: scaleY(0.08);
  }
}

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--c-blue);
  --btn-fg: #fff;
  --btn-icon-bg: var(--c-light);
  --btn-icon-fg: var(--c-blue);
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0.4rem 0.4rem 0.4rem 1.45rem;
  overflow: hidden;
  border: 1px solid var(--btn-border);
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1.0625rem/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s var(--ease-out), border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-out);
}

/* The icon disc grows to fill the button on hover. */
.btn::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.4rem;
  z-index: -1;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--btn-fill, var(--c-blue-deep));
  transform: translateY(-50%) scale(0);
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover::before {
    transform: translateY(-50%) scale(16);
  }
}

.btn:hover {
  box-shadow: 0 18px 36px -20px rgba(13, 26, 43, 0.55);
}

.btn:active {
  transform: scale(0.98);
}

.btn__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--btn-icon-bg);
  color: var(--btn-icon-fg);
  transition: transform 0.5s var(--ease-out);
}

.btn__icon .icon {
  width: 1.15rem;
  height: 1.15rem;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__icon {
    transform: rotate(-45deg);
  }
}

.btn[aria-expanded] .btn__icon,
.btn[aria-expanded]:hover .btn__icon {
  transform: none;
}

.btn[aria-expanded="true"] .btn__icon .icon {
  transform: rotate(180deg);
}

.btn__icon .icon {
  transition: transform 0.4s var(--ease-out);
}

.btn--ink {
  --btn-bg: var(--c-ink);
  --btn-icon-fg: var(--c-ink);
  --btn-fill: #24344f;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: var(--c-line-2);
  --btn-icon-bg: var(--c-ink);
  --btn-icon-fg: #fff;
  --btn-fill: var(--c-ink);
}

.btn--ghost:hover {
  --btn-fg: #fff;
}

.btn--light {
  --btn-bg: var(--c-light);
  --btn-fg: var(--c-ink);
  --btn-icon-bg: var(--c-ink);
  --btn-icon-fg: #fff;
  --btn-fill: var(--c-sky);
}

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.4);
  --btn-icon-bg: var(--c-light);
  --btn-icon-fg: var(--c-ink);
  --btn-fill: rgba(255, 255, 255, 0.16);
}

.btn--sm {
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.3rem 0.3rem 0.3rem 1.15rem;
  font-size: 1rem;
}

.btn--sm::before,
.btn--sm .btn__icon {
  width: 40px;
  height: 40px;
}

.btn--sm::before {
  right: 0.3rem;
}

/* One line high, whatever the line height a reader may set (1lh), and never cut sideways. */
.roll {
  display: inline-block;
  overflow: hidden;
  /* Clipped top and bottom (the second line waits below), never sideways. */
  overflow: visible clip;
  height: 1.25em;
  height: 1lh;
  line-height: 1.25em;
  vertical-align: top;
}

.roll__text {
  display: block;
  text-shadow: 0 1.25em 0 currentColor;
  text-shadow: 0 1lh 0 currentColor;
  transition: transform 0.55s var(--ease-out);
}

:is(a, button):focus-visible > .roll .roll__text {
  transform: translateY(-1.25em);
  transform: translateY(-1lh);
}

@media (hover: hover) and (pointer: fine) {
  :is(a, button):hover > .roll .roll__text {
    transform: translateY(-1.25em);
    transform: translateY(-1lh);
  }
}

/* On small screens (no hover there), labels are plain text that may wrap, so that a reader's larger
   text or wider spacing never cuts them. */
@media (max-width: 480px), (hover: none) {
  .btn {
    white-space: normal;
  }

  .roll {
    height: auto;
    overflow: visible;
  }

  .roll__text {
    text-shadow: none;
    transform: none !important;
  }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.icon-btn:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.icon-btn .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.text-size {
  font: 700 1.05rem/1 var(--font-body);
}

.text-size__plus {
  font-size: 0.75em;
  vertical-align: super;
}

/* ---------- Dropdowns (appointment, phone) ---------- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  z-index: 70;
  display: grid;
  gap: 0.25rem;
  min-width: 280px;
  padding: 0.6rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-lg);
  background: var(--c-paper);
  box-shadow: var(--shadow-lift);
  color: var(--c-ink);
  transform-origin: top left;
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out), display 0.2s allow-discrete;
}

/* Opening: from just above, a little smaller; closing faster than opening. */
@starting-style {
  .dropdown__menu {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
}

.dropdown__menu[hidden] {
  display: none;
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
  transition-duration: 0.14s;
}

.dropdown__menu--start {
  left: 0;
}

/* Menus aligned on the right grow from the top right, under their button. */
.dropdown__menu--end {
  right: 0;
  transform-origin: top right;
}

.dropdown__label {
  padding: 0.5rem 0.75rem 0.35rem;
  color: var(--c-ink-3);
  font: 500 0.75rem/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: var(--r-sm);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.25s;
}

.dropdown__item:hover {
  background: var(--c-blue-soft);
}

.dropdown__item .icon {
  color: var(--c-blue);
}

.dropdown__city {
  display: block;
  color: var(--c-ink-3);
  font-size: 0.875rem;
  font-weight: 400;
}

.dropdown__number {
  display: block;
  font: 700 1.15rem/1.2 var(--font-body);
  letter-spacing: 0.01em;
}

/* Small links: an invisible zone around them makes a touch target of 44px at least, without
   changing their look or their place (they are 30 to 36px tall). */
:is(.link-arrow, .contact-band__doctor, .atlas__urgent, .urgent-card__link, .brand, summary.footer-title, .footer-list:not(.footer-list--small) a) {
  position: relative;
}

:is(.link-arrow, .contact-band__doctor, .atlas__urgent, .urgent-card__link, .brand, summary.footer-title, .footer-list:not(.footer-list--small) a)::before {
  content: "";
  position: absolute;
  inset: -7px -4px;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  transition: transform 0.55s var(--ease-out);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-h);
  padding-inline: calc(var(--frame) + clamp(0.5rem, 2vw, 2rem));
  transition: background-color 0.4s, box-shadow 0.4s;
}

.site-header.is-scrolled .site-header__bar {
  background: rgba(246, 244, 239, 0.88);
  box-shadow: 0 1px 0 var(--c-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}

.site-header__progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  pointer-events: none;
}

.site-header__progress span {
  display: block;
  height: 100%;
  background: var(--c-blue);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  transition: opacity 0.3s;
}

.site-header.is-scrolled .site-header__progress span {
  opacity: 1;
}

.site-nav {
  margin-inline: auto;
}

.site-nav__list {
  display: flex;
  gap: clamp(0.25rem, 1.2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 0.65rem;
  color: var(--c-ink);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
}

.nav-link::after {
  content: "";
  position: absolute;
  inset: auto 0.65rem 0.35rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-out);
}

.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

.nav-link[aria-current="page"] {
  color: var(--c-blue);
}

/* A small pupil glides under the links, from the one of the page to the one under the pointer
   (site.js places it). */
.site-nav__list {
  --nav-dot: var(--c-blue);
  position: relative;
}

.site-nav__list::after {
  content: "";
  position: absolute;
  bottom: -0.2rem;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nav-dot);
  opacity: var(--nav-on, 0);
  translate: var(--nav-x, 0) 0;
  pointer-events: none;
  transition: translate 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.3s;
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) .site-nav__list {
  --nav-dot: var(--c-sky);
}

/* Buttons: a ring of light spreads from where they are pressed (site.js). */
.ripple {
  position: absolute;
  top: var(--ry);
  left: var(--rx);
  z-index: -1;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  pointer-events: none;
  animation: ripple 0.75s var(--ease-out) forwards;
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(22);
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  height: 48px;
  padding: 0 0.95rem 0 1.15rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--pill);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.menu-toggle:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.menu-toggle__lines {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
}

.menu-toggle__lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out);
}

.menu-toggle__lines span:first-child {
  top: 0;
}

.menu-toggle__lines span:last-child {
  top: 8px;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child {
  top: 4px;
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child {
  top: 4px;
  transform: rotate(-45deg);
}

html.is-menu-open .site-header__bar {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.is-menu-open .site-header .brand,
html.is-menu-open .site-header .brand__mark,
html.is-menu-open .site-header .brand__line--1,
html.is-menu-open .site-header .brand__line--2,
html.is-menu-open .site-header .menu-toggle {
  color: #fff;
}

html.is-menu-open .site-header .menu-toggle {
  border-color: rgba(255, 255, 255, 0.4);
}

html.is-menu-open .site-header :is(.site-nav, .site-header__phone, .text-size, .site-header__actions > .dropdown) {
  visibility: hidden;
}

@media (max-width: 1180px) {
  .site-nav {
    display: none;
  }

  .site-header__actions {
    margin-left: auto;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 68px;
  }

  .site-header__bar {
    gap: 0.6rem;
    padding-inline: var(--gutter);
  }

  .brand__mark {
    width: 36px;
    height: 36px;
  }

  .brand {
    gap: 0.55rem;
  }

  .brand__line--1 {
    font-size: 1.05rem;
  }

  .brand__line--2 {
    font-size: 0.64rem;
    letter-spacing: 0.09em;
  }

  .site-header .text-size,
  .site-header .site-header__phone {
    display: none;
  }

  .site-header .btn--sm {
    gap: 0;
    min-height: 44px;
    padding: 0 1rem;
    font-size: 0.95rem;
  }

  .site-header .btn--sm .btn__icon,
  .site-header .btn--sm::before {
    display: none;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0;
  }

  .menu-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Very narrow phones (320–360px): everything stays on one line, appointment button included. */
@media (max-width: 380px) {
  :root {
    --gutter: 1rem;
  }

  .site-header__bar {
    gap: 0.4rem;
  }

  .brand {
    gap: 0.4rem;
  }

  .brand__mark {
    width: 30px;
    height: 30px;
  }

  .brand__line--1 {
    font-size: 0.95rem;
    letter-spacing: 0.12em;
  }

  .brand__line--2 {
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .site-header .btn--sm {
    min-height: 40px;
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }

  .menu-toggle {
    width: 40px;
    height: 40px;
  }
}

/* Over a dark hero, the transparent header turns light until the page scrolls ("dark");
   on an all-dark page it stays light, on a dark bar once scrolled ("night"). */
:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) :is(.brand__mark, .brand__line--1) {
  color: #fff;
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) .brand__line--2 {
  color: var(--c-sky);
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) .nav-link {
  color: rgba(255, 255, 255, 0.86);
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) .nav-link:hover {
  color: #fff;
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) :is(.icon-btn, .menu-toggle) {
  border-color: rgba(255, 255, 255, 0.28);
  /* A night ground of their own: white on it whatever passes behind (11:1 or more). */
  background: rgba(7, 16, 29, 0.92);
  color: #fff;
}

:is(html[data-hero="dark"] .site-header:not(.is-scrolled), html[data-hero="night"] .site-header) :is(.icon-btn, .menu-toggle):hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-ink);
}

html[data-hero="night"] .site-header.is-scrolled .site-header__bar {
  background: rgba(10, 20, 36, 0.84);
  box-shadow: 0 1px 0 var(--c-line-dark);
}

/* ---------- Full-screen menu ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: var(--header-h);
  background: var(--c-night);
  color: #fff;
  visibility: hidden;
  clip-path: circle(0 at calc(100% - 3.5rem) 2.6rem);
  transition: clip-path 0.55s var(--ease-in-out), visibility 0s linear 0.55s;
}

.menu.is-open {
  visibility: visible;
  clip-path: circle(150% at calc(100% - 3.5rem) 2.6rem);
  transition: clip-path 0.85s var(--ease-in-out), visibility 0s;
}

.menu::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--c-sky);
  opacity: 0.09;
  -webkit-mask: url("../images/drawings/optique.svg") 85% 70% / cover no-repeat;
  mask: url("../images/drawings/optique.svg") 85% 70% / cover no-repeat;
}

.menu__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  width: min(100% - 2 * var(--gutter), var(--container));
  min-height: calc(100% - 2rem);
  margin-inline: auto;
  padding-block: clamp(1.5rem, 5vw, 4rem);
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--c-line-dark);
  color: #fff;
  text-decoration: none;
}

.menu-link__num {
  width: 2.2rem;
  color: var(--c-sky);
  font: 500 0.875rem/1 var(--font-mono);
}

.menu-link__label {
  flex: 1;
  min-width: 0;
  font: 560 clamp(2.1rem, 1.3rem + 3.4vw, 4.6rem)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  transition: transform 0.55s var(--ease-out), color 0.3s;
}

.menu-link .icon {
  width: 2rem;
  height: 2rem;
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.4s, transform 0.55s var(--ease-out);
}

.menu-link:hover .menu-link__label,
.menu-link:focus-visible .menu-link__label,
.menu-link[aria-current="page"] .menu-link__label {
  color: var(--c-sky);
}

@media (hover: hover) and (pointer: fine) {
  .menu-link:hover .menu-link__label {
    transform: translateX(14px);
  }
}

.menu-link:focus-visible .icon,
.menu-link[aria-current="page"] .icon {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .menu-link:hover .icon {
    opacity: 1;
    transform: none;
  }
}

.menu__aside {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 1.1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}

.menu__aside .label {
  margin-bottom: 0;
}

.menu__cabinets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.menu-cabinet__city {
  margin-bottom: 0.4rem;
  font: 600 1.6rem/1.15 var(--font-display);
}

.menu-cabinet__address {
  color: var(--c-on-night);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.menu-cabinet__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  color: #fff;
  font: 700 1.1rem/1.2 var(--font-body);
  text-decoration: none;
}

.menu-cabinet__phone .icon {
  color: var(--c-sky);
}

.menu__hours {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--c-on-night);
  font-size: 0.9375rem;
}

.menu__hours .icon {
  color: var(--c-sky);
}

.menu__doctors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.menu__text-size {
  align-self: flex-start;
}

.text-size__glyph {
  font: 700 0.9rem/1 var(--font-body);
}

@media (prefers-reduced-motion: no-preference) {
  /* Closing, the entries leave at once and quickly; opening, they arrive one after the other. */
  .menu__list li,
  .menu__aside {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.2s, transform 0.25s var(--ease-out);
  }

  .menu.is-open .menu__list li,
  .menu.is-open .menu__aside {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s, transform 0.8s var(--ease-out);
  }

  .menu.is-open .menu__list li:nth-child(1) { transition-delay: 0.2s; }
  .menu.is-open .menu__list li:nth-child(2) { transition-delay: 0.25s; }
  .menu.is-open .menu__list li:nth-child(3) { transition-delay: 0.3s; }
  .menu.is-open .menu__list li:nth-child(4) { transition-delay: 0.35s; }
  .menu.is-open .menu__list li:nth-child(5) { transition-delay: 0.4s; }
  .menu.is-open .menu__list li:nth-child(6) { transition-delay: 0.45s; }
  .menu.is-open .menu__aside { transition-delay: 0.42s; }
}

@media (max-width: 900px) {
  .menu__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .menu__cabinets {
    grid-template-columns: 1fr;
  }

  .menu-link {
    gap: 0.9rem;
  }

  .menu-link__label {
    font-size: clamp(1.5rem, 0.75rem + 4vw, 1.9rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .menu-link .icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ---------- Home: hero, an iris under the slit lamp ---------- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: max(660px, 100svh);
  overflow: hidden;
  background: var(--c-iris-bg);
  color: #fff;
}

/* The poster box is the single source of truth: the WebGL iris is drawn exactly over it. */
.hero__stage {
  --s: calc(min(100cqw, 100cqh) * 0.78);
  --cx: 73cqw;
  --cy: 54cqh;
  position: absolute;
  inset: 0;
  z-index: -1;
  container-type: size;
  touch-action: pan-y;
}

.hero__poster {
  position: absolute;
  top: calc(var(--cy) - var(--s) / 2);
  left: calc(var(--cx) - var(--s) / 2);
  width: var(--s);
  height: var(--s);
}

/* Light rays brought to a focus on the eye, like the slit lamp's condenser lens: the focus of the
   drawing sits on the centre of the iris, and the drawing fades out over the eye. */
.hero__drawing {
  --drawing-color: var(--c-sky);
  --drawing-opacity: 0.12;
  --w: calc(var(--s) * 2.015);
  -webkit-mask:
    url("../images/drawings/optique.svg") calc(var(--cx) - var(--w) * 0.775) calc(var(--cy) - var(--w) * 0.3125) / var(--w) auto no-repeat,
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--s) * 0.5), #000 calc(var(--s) * 0.62));
  -webkit-mask-composite: source-in;
  mask:
    url("../images/drawings/optique.svg") calc(var(--cx) - var(--w) * 0.775) calc(var(--cy) - var(--w) * 0.3125) / var(--w) auto no-repeat,
    radial-gradient(circle at var(--cx) var(--cy), transparent calc(var(--s) * 0.5), #000 calc(var(--s) * 0.62));
  mask-composite: intersect;
}

.hero__poster img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Once WebGL draws the drawing (lit by the beam, bent by the pointer), the CSS one gives way. */
.hero__drawing {
  transition: opacity 1.2s var(--ease-out);
}

.hero__drawing.is-drawn-by-webgl {
  opacity: 0;
}

/* The pause button of the hero, at the foot of the pupillometer. */
.hud__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 0.9rem;
  padding: 0 1rem 0 0.85rem;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 700 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.hud__play[hidden] {
  display: none;
}

.hud__play:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-night);
}

.hud__play:active {
  scale: 0.97;
}

.hud__play .icon--play,
.hud__play-label--play,
.hud__play.is-paused .icon--pause,
.hud__play.is-paused .hud__play-label--pause {
  display: none;
}

.hud__play.is-paused .icon--play {
  display: block;
}

.hud__play.is-paused .hud__play-label--play {
  display: inline;
}

.hero.is-paused .hud__dot {
  animation-play-state: paused;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.hero__stage.is-live .hero__canvas {
  opacity: 1;
}

/* Once the visitor has moved on past most of the hero, the eye drifts out of focus, by itself
   (site.js marks it; wide screens). */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
  .hero__stage {
    transition: opacity 0.9s var(--ease-out), filter 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }

  .hero__stage.is-away {
    opacity: 0.5;
    filter: blur(9px);
    transform: scale(1.05);
  }
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  grid-template-rows: 1fr auto;
  gap: 2rem;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 6vh, 4rem));
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
}

.hero__text {
  grid-row: 1 / span 2;
  align-self: center;
  max-width: 40rem;
}

.hero__title {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}

/* One word, never broken between its animated letters; capped by the viewport so it always fits. */
.hero__title-main {
  display: block;
  /* Wide screens: the word stays left of the iris (Bienvenue is about 4.7 em wide). */
  font-size: min(var(--fs-display), 9.8vw);
  font-weight: 560;
  line-height: 0.9;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.hero__title-sub {
  display: block;
  max-width: 17ch;
  color: var(--c-sky);
  font-size: clamp(1.8rem, 1rem + 2.5vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.012em;
}

.hero__doctors {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* Instrument panel: the pupil diameter, live, with its trace. */
.hud {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  width: min(100%, 330px);
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  background: rgba(9, 19, 34, 0.58);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.hud__label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--c-sky);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hud__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-sun);
  box-shadow: 0 0 0 4px rgba(239, 178, 74, 0.18);
  animation: hud-blink 2.4s ease-in-out infinite;
}

@keyframes hud-blink {
  50% {
    opacity: 0.35;
  }
}

.hud__value {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-top: 0.85rem;
  font: 300 clamp(2.4rem, 1.8rem + 1.6vw, 3.2rem)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hud__unit {
  color: rgba(255, 255, 255, 0.6);
  font: 500 0.9rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

.hud__caption {
  margin-top: 0.3rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: var(--fs-small);
}

.hud__trace {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 0.9rem;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 25%);
}

.hud__hint {
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-small);
  line-height: 1.5;
}

.hud__hint-touch {
  display: none;
}

@media (hover: none) {
  .hud__hint-pointer {
    display: none;
  }

  .hud__hint-touch {
    display: inline;
  }
}

@media (max-width: 860px) {
  .hero {
    min-height: auto;
  }

  /* The iris sits on top, the text below it. */
  .hero__stage {
    --s: min(92cqw, 520px);
    --cx: 50cqw;
    --cy: calc(var(--header-h) - 1.5rem + var(--s) / 2);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding-top: calc(var(--header-h) + min(92vw, 520px) - 4.5rem);
  }

  .hero__text {
    grid-row: 1;
  }

  .hero__title-main {
    font-size: min(var(--fs-display), 19vw);
  }

  .hud {
    grid-column: 1;
    justify-self: stretch;
    width: 100%;
  }
}

/* ---------- Home: practical band (phones, hours, online booking) ---------- */

.contact-band {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-paper);
}

.contact-band__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.contact-band__item {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color 0.35s;
}

.contact-band__item:first-child {
  border-left: 1px solid var(--c-line);
}

a.contact-band__item:hover {
  background: var(--c-paper-2);
}

/* A line of light runs along the top of the item under the pointer. */
.contact-band__item {
  position: relative;
}

.contact-band__item::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .contact-band__item:hover::before {
    transform: none;
  }
}

.contact-band__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-band__label .icon {
  color: var(--c-blue);
}

.contact-band__value {
  font: 560 clamp(1.6rem, 1.15rem + 1.2vw, 2.35rem)/1.1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}

a.contact-band__item:hover .contact-band__value {
  color: var(--c-blue);
}

.contact-band__value--small {
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.3;
}

/* 0.9rem apart: the 44px touch zones of the two links (see the small links) do not overlap. */
.contact-band__doctors {
  display: grid;
  gap: 0.9rem;
}

.contact-band__doctor {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--c-blue);
  font-weight: 700;
  text-decoration: none;
}

.contact-band__doctor:hover span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1000px) {
  .contact-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-band__item:nth-child(odd) {
    border-left: 1px solid var(--c-line);
  }

  .contact-band__item:nth-child(-n + 2) {
    border-bottom: 1px solid var(--c-line);
  }
}

@media (max-width: 520px) {
  .contact-band__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-band__item,
  .contact-band__item:nth-child(odd),
  .contact-band__item:first-child {
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--c-line);
    border-left: 0;
  }

  .contact-band__item:last-child {
    border-bottom: 0;
  }
}

/* ---------- Home: a consultation in three steps ---------- */

.visit__steps {
  --icon: clamp(4.75rem, 3.6rem + 2.4vw, 6rem);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The line joining the steps, through the middle of their icons, draws itself as the section
   comes into view; then a small light runs along it once (site.js marks it drawn). */
.visit__steps::before {
  content: "";
  position: absolute;
  top: calc(var(--icon) / 2);
  left: calc(var(--icon) / 2);
  right: calc(var(--icon) / 2);
  height: 1px;
  background: linear-gradient(90deg, var(--c-sky), rgba(168, 200, 243, 0.2));
  transform-origin: left;
}

/* The light: a glowing point drawn in a band along the line, moved by its background position. */
.visit__steps::after {
  content: "";
  position: absolute;
  top: calc(var(--icon) / 2 - 7px);
  left: calc(var(--icon) / 2);
  right: calc(var(--icon) / 2);
  z-index: 2;
  height: 14px;
  background: radial-gradient(circle, #fff 0 2px, rgba(168, 200, 243, 0.7) 3px, rgba(168, 200, 243, 0) 7px) no-repeat 0 0 / 14px 14px;
  opacity: 0;
  pointer-events: none;
}

.visit__drawing {
  --drawing-color: var(--c-sky);
  --drawing-opacity: 0.08;
  --drawing-pos: 108% 40%;
  --drawing-size: auto 150%;
}

.visit .container {
  position: relative;
}

.visit__step {
  position: relative;
}

/* The number of the step, small, in the style of the labels. */
.visit__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
  color: var(--c-sky);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.visit__num::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
}

.visit__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--icon);
  height: var(--icon);
  margin: 0 0 1.6rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: var(--c-night);
  color: #fff;
  transition: background-color 0.4s, color 0.4s, border-color 0.4s, transform 0.6s var(--ease-out);
}

.visit__icon .icon {
  width: 38%;
  height: 38%;
  stroke-width: 1.4;
}

@media (hover: hover) and (pointer: fine) {
  .visit__step:hover .visit__icon {
    border-color: var(--c-sky);
    background: var(--c-sky);
    color: var(--c-night);
    transform: scale(1.08);
  }
}

.visit__title {
  margin-bottom: 0.7rem;
  font-size: var(--fs-h3);
}

.visit__step p {
  max-width: 30ch;
  color: var(--c-on-night);
}

@media (prefers-reduced-motion: no-preference) {
  .js .visit__steps::before {
    transform: scaleX(0);
    transition: transform 1.6s var(--ease-in-out) 0.2s;
  }

  .js .visit__steps.is-drawn::before {
    transform: none;
  }

  /* Once drawn, the light runs from the first step to the last, and each icon lights up as it
     passes (1.8 s after the line starts, 2.4 s to cross). */
  .js .visit__steps.is-drawn::after {
    animation: visit-signal 2.4s var(--ease-in-out) 1.8s both;
  }

  .js .visit__steps.is-drawn .visit__icon {
    animation: visit-ping 0.9s var(--ease-out) both;
    animation-delay: calc(1.8s + var(--at, 0) * 1.1s);
  }

  .visit__step:nth-child(2) {
    --at: 1;
  }

  .visit__step:nth-child(3) {
    --at: 2;
  }
}

@keyframes visit-signal {
  0% {
    background-position: 0% 0;
    opacity: 0;
  }

  8%,
  92% {
    opacity: 1;
  }

  100% {
    background-position: 100% 0;
    opacity: 0;
  }
}

@keyframes visit-ping {
  35% {
    border-color: var(--c-sky);
    box-shadow: 0 0 0 6px rgba(168, 200, 243, 0.18), 0 0 28px rgba(168, 200, 243, 0.35);
  }
}

@media (max-width: 760px) {
  .visit__steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .visit__steps {
    --icon: 4.5rem;
  }

  .visit__steps::before {
    top: 2.25rem;
    right: auto;
    bottom: 2.25rem;
    left: calc(2.25rem - 0.5px);
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--c-sky), rgba(168, 200, 243, 0.2));
    transform-origin: top;
  }

  .visit__step {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
  }

  .visit__num {
    grid-column: 2;
    margin-bottom: 0.5rem;
  }

  .visit__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    margin: 0;
  }

  .visit__title,
  .visit__step p {
    grid-column: 2;
  }

  .js .visit__steps::before {
    transform: scaleY(0);
  }

  .js .visit__steps.is-drawn::before {
    transform: none;
  }

  /* The light runs down the line. */
  .visit__steps::after {
    top: 2.25rem;
    right: auto;
    bottom: 2.25rem;
    left: calc(2.25rem - 7px);
    width: 14px;
    height: auto;
  }

  .js .visit__steps.is-drawn::after {
    animation-name: visit-signal-down;
  }
}

@keyframes visit-signal-down {
  0% {
    background-position: 0 0%;
    opacity: 0;
  }

  8%,
  92% {
    opacity: 1;
  }

  100% {
    background-position: 0 100%;
    opacity: 0;
  }
}

/* ---------- Home: the two cabinets ---------- */

.cab-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
}

.cab-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
}

.cab-card__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.cab-card__media img {
  transition: scale 1.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cab-card:hover .cab-card__media img {
    scale: 1.06;
  }
}

.cab-card__tag {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--pill);
  background: rgba(247, 242, 233, 0.94);
  color: var(--c-ink);
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cab-card__body {
  display: grid;
  align-content: start;
  gap: 1.25rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0rem, 1vw, 0.5rem) 0;
}

.cab-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.cab-card__city {
  font-size: clamp(2.4rem, 1.5rem + 2.6vw, 3.8rem);
  font-weight: 560;
  letter-spacing: -0.02em;
}

.cab-card__place {
  margin-top: -0.6rem;
  color: var(--c-blue);
  font: 500 clamp(1.35rem, 1.12rem + 0.6vw, 1.7rem)/1.2 var(--font-display);
}

/* Practical facts on ruled lines, like an address book. */
.facts {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-2);
  list-style: none;
}

.facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2);
  line-height: 1.45;
}

.facts .icon {
  margin-top: 0.12rem;
  color: var(--c-blue);
}

/* The touch zone of the phone number reaches 44px; the margins give the room back. */
.facts a {
  display: block;
  margin-block: -0.7rem;
  padding-block: 0.7rem;
  color: var(--c-ink);
  font: 700 1.2rem/1.2 var(--font-body);
  letter-spacing: 0.01em;
  text-decoration: none;
}

.facts a:hover {
  color: var(--c-blue);
}

.cab-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .cab-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Schematic eye ---------- */

.eye {
  position: relative;
  margin: 0;
}

.eye__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.eye :is(path, circle, ellipse) {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.eye .eye__thin {
  stroke-width: 0.8;
  opacity: 0.55;
}

.eye .eye__fill {
  fill: rgba(13, 26, 43, 0.03);
}

.eye .eye__fill--macula {
  fill: rgba(13, 26, 43, 0.08);
}

.eye .eye__ray {
  stroke: var(--c-blue);
  stroke-width: 1;
  stroke-dasharray: 0.012 0.014;
  opacity: 0.7;
}

.eye .eye__vessel {
  stroke: #b8423b;
  stroke-width: 1;
  opacity: 0.55;
}

.eye .eye__dot {
  fill: #b8423b;
  stroke: none;
  opacity: 0;
  transition: opacity 0.4s;
}

.eye .eye__focus {
  fill: var(--c-sun);
  stroke: none;
}

.eye__part {
  transition: opacity 0.4s;
}

.eye__part .eye__fill {
  transition: fill 0.4s, stroke 0.4s;
}

.eye[data-active] .eye__part:not(.is-on):not([data-part="globe"]) {
  opacity: 0.45;
}

.eye__part.is-on :is(path, circle) {
  stroke: var(--c-blue);
  stroke-width: 1.8;
}

.eye__part.is-on .eye__fill {
  fill: rgba(29, 79, 163, 0.18);
}

.eye__part--vaisseaux.is-on .eye__vessel {
  stroke: #c0392b;
  stroke-width: 1.8;
  opacity: 1;
}

.eye__part--vaisseaux.is-on .eye__dot {
  opacity: 1;
}

/* Finer anatomy: muted anatomical colours. */
.eye .eye__sclera {
  fill: rgba(255, 255, 255, 0.75);
  stroke: none;
}

.eye .eye__choroid {
  fill: rgba(184, 67, 47, 0.1);
  stroke: none;
}

.eye .eye__choroid-vessel {
  stroke: rgba(184, 67, 47, 0.55);
  stroke-width: 1.4;
}

.eye .eye__muscle {
  fill: rgba(184, 67, 47, 0.1);
  stroke: rgba(150, 64, 52, 0.55);
  stroke-width: 1;
}

.eye .eye__muscle-line {
  stroke: rgba(150, 64, 52, 0.55);
  stroke-width: 2.4;
}

.eye .eye__tarse {
  fill: rgba(13, 26, 43, 0.09);
  stroke: rgba(13, 26, 43, 0.35);
  stroke-width: 0.8;
}

.eye .eye__gland {
  stroke: rgba(217, 169, 58, 0.8);
  stroke-width: 0.9;
  stroke-dasharray: 0.03 0.02;
}

.eye .eye__fibre {
  fill: rgba(184, 67, 47, 0.32);
  stroke: none;
}

.eye .eye__conj {
  stroke: rgba(184, 67, 47, 0.55);
  stroke-width: 0.9;
}

.eye .eye__trab {
  fill: rgba(29, 79, 163, 0.32);
  stroke: var(--c-blue);
  stroke-width: 0.8;
}

.eye .eye__schlemm {
  fill: rgba(93, 155, 224, 0.55);
  stroke: var(--c-blue);
  stroke-width: 0.7;
}

.eye .eye__sheath {
  stroke: rgba(13, 26, 43, 0.5);
  stroke-width: 0.9;
}

.eye .eye__artery {
  stroke: #b8432f;
  stroke-width: 1.2;
}

.eye .eye__vein {
  stroke: #4b5f9e;
  stroke-width: 1.2;
}

.eye .eye__cloquet {
  stroke: rgba(13, 26, 43, 0.22);
  stroke-width: 0.9;
  stroke-dasharray: 0.02 0.025;
}

/* ---------- Magnifier ("loupe"): the diagram zoomed on one part ---------- */

.loupe {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-inline: auto;
}

.loupe__lens {
  position: absolute;
  inset: 7%;
  overflow: hidden;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--c-light), var(--c-paper-2) 70%);
  box-shadow: inset 0 0 0 1px var(--c-line), inset 0 -30px 60px rgba(13, 26, 43, 0.06), var(--shadow-soft);
}

.loupe__lens .eye {
  position: absolute;
  inset: 0;
}

.loupe__lens .eye__svg {
  width: 100%;
  height: 100%;
}

.eye--loupe :is(path, circle) {
  stroke-width: 1.7;
}

.eye--loupe .eye__part.is-on :is(path, circle) {
  stroke-width: 2.6;
}

.loupe__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--c-ink);
}

.loupe__ring circle,
.loupe__ring path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.45;
  opacity: 0.5;
}

.loupe__ring .is-long {
  stroke-width: 0.8;
  opacity: 0.8;
}

/* The ring of the loupe turns once, like a focusing ring, as the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .loupe__ring {
    animation: loupe-focus 2.6s var(--ease-in-out) 0.4s both;
  }
}

@keyframes loupe-focus {
  from {
    transform: rotate(-60deg);
  }
}

.loupe__map {
  position: absolute;
  right: 2%;
  bottom: 4%;
  width: 26%;
  padding: 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: rgba(242, 237, 227, 0.92);
  box-shadow: var(--shadow-soft);
}

.loupe__map path {
  fill: none;
  stroke: var(--c-ink-3);
  stroke-width: 3;
}

.loupe__map .loupe__map-focus {
  fill: rgba(29, 79, 163, 0.12);
  stroke: var(--c-blue);
  stroke-width: 5;
}

.loupe__label {
  position: absolute;
  top: 9%;
  left: 2%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1rem;
  border-radius: var(--pill);
  background: var(--c-ink);
  color: #fff;
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.loupe__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-sun);
}

/* 3D: the loupe turns toward the pointer like a glass held in the hand. Its parts float at
   different depths and the glass catches the light where the pointer is. */
.loupe[data-tilt] {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 1.1s var(--ease-out);
}

.loupe.is-tilting {
  transition-duration: 0.4s;
}

.loupe[data-tilt] .loupe__ring {
  translate: 0 0 22px;
}

.loupe[data-tilt] .loupe__map {
  translate: 0 0 46px;
}

.loupe[data-tilt] .loupe__label {
  translate: 0 0 62px;
}

.loupe__lens::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 24%), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.6s;
}

.loupe.is-tilting .loupe__lens::after {
  opacity: 0.9;
}

/* Portraits lean slightly toward the pointer. */
.doctor-card__media[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.1s var(--ease-out);
}

.doctor-card__media.is-tilting {
  transition-duration: 0.4s;
}

.cab-card__media[data-tilt],
.cabinet-block__photo[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 1.1s var(--ease-out);
}

:is(.cab-card__media, .cabinet-block__photo).is-tilting {
  transition-duration: 0.4s;
}

/* ---------- Animated schemas (diseases and surgeries, step by step) ---------- */

.schema {
  --schema-ink: var(--c-ink);
  --schema-line: #2b3a51;
  --schema-thin: rgba(13, 26, 43, 0.38);
  --schema-soft: rgba(13, 26, 43, 0.05);
  --schema-paper: #f6f1e7;
  --schema-accent: var(--c-blue);
  --schema-accent-soft: rgba(29, 79, 163, 0.14);
  --schema-red: #b8432f;
  --schema-red-soft: rgba(184, 67, 47, 0.16);
  --schema-fluid: #5d9be0;
  --schema-light: #efb24a;
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin: 0;
}

.schema__stage {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: radial-gradient(circle at 32% 22%, var(--c-light), var(--schema-paper) 55%, var(--c-paper-2));
  box-shadow: inset 0 0 0 1px var(--c-line);
}

/* Pathology pages: the drawing on the page itself, without a panel around it. */
.schema--side .schema__stage {
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.schema__canvas {
  position: relative;
  aspect-ratio: var(--schema-ratio, 4 / 3);
}

/* Readouts float over the drawing; on a narrow drawing they line up under it instead. */
.schema__readouts {
  display: contents;
}

@container (max-width: 560px) {
  .schema__readouts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.75rem 0.75rem;
  }

  .schema__readouts .schema__readout {
    position: static;
  }
}

/* Phones: the drawing uses the full width of the screen. */
@media (max-width: 599px) {
  .schema--bleed .schema__stage {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
    box-shadow: inset 0 1px 0 var(--c-line), inset 0 -1px 0 var(--c-line);
  }
}

.schema__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.schema__svg :is(path, circle, ellipse, line, polyline, rect) {
  fill: none;
  stroke: var(--schema-line);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.schema__svg .thin {
  stroke: var(--schema-thin);
  stroke-width: 0.9;
}

.schema__svg .fill {
  fill: var(--schema-soft);
}

.schema__svg .paper {
  fill: var(--schema-paper);
}

/* Materials (gradients and textures written once per page by the generator). */
.schema-defs {
  position: absolute;
}

.schema__svg .part-vitreous {
  fill: url(#sd-vitreous);
}

.schema__svg .part-sclera {
  fill: url(#sd-sclera);
}

.schema__svg .part-choroid {
  fill: url(#sd-choroid);
}

.schema__svg .part-retina {
  fill: url(#sd-retina);
}

.schema__svg .part-macula {
  fill: rgba(224, 162, 58, 0.45);
}

.schema__svg .part-nerve {
  fill: url(#sd-nerve);
}

.schema__svg .part-cornea {
  fill: url(#sd-cornea);
}

.schema__svg .part-ciliary {
  fill: url(#sd-ciliary);
}

.schema__svg .part-iris {
  fill: url(#sd-iris-section);
}

.schema__svg .part-lens {
  fill: url(#sd-lens);
}

.schema--dark .schema__svg .part-vitreous {
  fill: url(#sd-vitreous-dark);
}

.schema--dark .schema__svg .part-sclera {
  fill: url(#sd-sclera-dark);
}

.schema--dark .schema__svg .part-choroid {
  fill: url(#sd-choroid-dark);
}

.schema--dark .schema__svg .part-retina {
  fill: url(#sd-retina-dark);
}

.schema--dark .schema__svg .part-cornea {
  fill: url(#sd-cornea-dark);
}

/* Iris seen from the front: strands, collarette, crypts. */
.schema__svg .iris-base {
  fill: url(#sd-iris);
  stroke: none;
}

.schema__svg .iris-strand {
  fill: none;
  stroke: rgba(214, 226, 238, 0.5);
  stroke-linecap: round;
}

.schema__svg .iris-strand--dark {
  stroke: rgba(18, 28, 42, 0.45);
}

.schema__svg .iris-crypt {
  fill: rgba(18, 26, 38, 0.5);
  stroke: none;
}

.schema__svg .iris-collarette {
  fill: none;
  stroke: rgba(205, 168, 112, 0.8);
  stroke-width: 1.4;
}

.schema__svg .iris-rim {
  fill: none;
  stroke: rgba(14, 22, 34, 0.55);
  stroke-width: 3;
}

/* Fundus: the choroid seen through the retina, and the finest vessels. */
.schema__svg .mottle {
  fill: rgba(130, 36, 14, 0.22);
  stroke: none;
}

.schema__svg .mottle--light {
  fill: rgba(255, 200, 156, 0.18);
}

.schema__svg .fundus-shade {
  fill: url(#sd-fundus-shade);
  stroke: none;
}

.schema__svg .twig {
  stroke-width: 0.9;
  opacity: 0.85;
}

.schema__svg .accent {
  stroke: var(--schema-accent);
  stroke-width: 2;
}

.schema__svg .accent-fill {
  fill: var(--schema-accent-soft);
  stroke: var(--schema-accent);
}

.schema__svg .red {
  stroke: var(--schema-red);
}

.schema__svg .red-fill {
  fill: var(--schema-red-soft);
  stroke: var(--schema-red);
}

.schema__svg .fluid {
  fill: rgba(93, 155, 224, 0.22);
  stroke: var(--schema-fluid);
}

.schema__svg .light {
  stroke: var(--schema-light);
  stroke-width: 1.6;
}

.schema__svg .no-stroke {
  stroke: none;
}

/* Moving dashes: aqueous humour, blood, light, a drug spreading. */
.schema__svg .flow {
  stroke-dasharray: 2 9;
  animation: schema-flow 0.7s linear infinite;
}

.schema__svg .flow--slow {
  animation-duration: 1.3s;
}

@keyframes schema-flow {
  to {
    stroke-dashoffset: -11;
  }
}

@keyframes schema-pulse {
  50% {
    opacity: 0.45;
  }
}

/* Step visibility: "from-n" appears at step n, "until-n" disappears after step n. */
.schema [class*="from-"],
.schema [class*="until-"] {
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out);
  transform-box: fill-box;
}

.schema:not(.is-step-2) .from-2,
.schema:not(.is-step-3) .from-3,
.schema:not(.is-step-4) .from-4,
.schema:not(.is-step-5) .from-5,
.schema:not(.is-step-6) .from-6,
.schema.is-step-2 .until-1,
.schema.is-step-3 .until-2,
.schema.is-step-4 .until-3,
.schema.is-step-5 .until-4,
.schema.is-step-6 .until-5 {
  opacity: 0;
}

/* Shared drawings hidden only during some steps (drawn once, reused). */
.schema.is-step-2:not(.is-step-5) .hide-2-4,
.schema.is-step-3:not(.is-step-5) .hide-3-4,
.schema.is-step-3:not(.is-step-4) .hide-3 {
  opacity: 0;
}

.schema .hide-2-4,
.schema .hide-3-4,
.schema .hide-3 {
  transition: opacity 0.3s var(--ease-out);
}

.schema:not(.is-visible) .schema__svg * {
  animation-play-state: paused;
}

/* Labels: HTML, so they stay readable at any size. */
.schema__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.schema__label {
  position: absolute;
  top: var(--y);
  left: var(--x);
  padding: 0.3em 0.6em;
  border-radius: var(--r-sm);
  background: rgba(251, 250, 247, 0.86);
  color: var(--schema-ink);
  /* Sized on the drawing, not the window, so the labels keep their place at every width
     (schemas.js keeps them inside the frame for this size). */
  font: 600 clamp(0.6rem, 2.5cqi, 0.9375rem)/1.2 var(--font-body);
  white-space: nowrap;
  transform: translate(var(--tx, -50%), -50%);
  transition: opacity 0.3s var(--ease-out);
}

.schema__label--start {
  --tx: 0%;
}

.schema__label--end {
  --tx: -100%;
}

.schema__label--warn {
  background: var(--schema-red);
  color: #fff;
}

/* Caption of a magnified detail: reads as a heading, not as a pointer. */
.schema .schema__label--title {
  background: none;
  font-weight: 700;
}

.schema__label--accent {
  background: var(--schema-accent);
  color: #fff;
}

/* Live readout (eye pressure, cup/disc ratio…). */
.schema__readout {
  position: absolute;
  top: 2.6cqi;
  right: 2.6cqi;
  display: grid;
  gap: 0.2em;
  padding: 0.8em 1em;
  border: 1px solid var(--c-line);
  border-radius: var(--r);
  background: rgba(242, 237, 227, 0.94);
  font: 500 clamp(0.7rem, 2.1cqi, 0.875rem)/1.2 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.schema__readout strong {
  color: var(--schema-ink);
  font: 600 clamp(1rem, 4cqi, 1.6rem)/1 var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-transform: none;
  transition: color 0.25s;
}

/* The pressure rises from step 2 on (steps are cumulative classes). */
.schema.is-step-2 .schema__readout--alarm strong {
  color: var(--schema-red);
}

/* Steps: large buttons, readable, with a progress bar while playing. */
.schema__steps {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.schema__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  align-items: start;
  gap: 0.9rem;
  width: 100%;
  overflow: hidden;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--c-ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s;
}

.schema__step:hover {
  background: rgba(233, 226, 212, 0.7);
}

.schema__step.is-active {
  border-color: var(--c-line);
  background: var(--c-paper-2);
  color: var(--c-ink);
}

.schema__step-num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  font: 500 0.85rem/1 var(--font-mono);
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}

.schema__step.is-active .schema__step-num {
  border-color: var(--schema-accent);
  background: var(--schema-accent);
  color: #fff;
}

.schema__step-text {
  align-self: center;
  line-height: 1.45;
}

.schema__step-text strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--c-ink);
  font-weight: 700;
}

.schema__step::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--schema-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.schema.is-timing .schema__step.is-active::after {
  animation: schema-progress var(--step-duration, 4s) linear forwards;
}

@keyframes schema-progress {
  to {
    transform: scaleX(1);
  }
}

.schema__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.schema__title {
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.schema__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem 0 0.75rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--pill);
  background: transparent;
  color: var(--c-ink);
  font: 700 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s, scale 0.16s var(--ease-out);
}

.schema__play:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.schema__play .icon-pause,
.schema.is-playing .schema__play .icon-play,
.schema__play .label-pause,
.schema.is-playing .schema__play .label-play {
  display: none;
}

.schema.is-playing .schema__play .icon-pause,
.schema.is-playing .schema__play .label-pause {
  display: inline;
}

html:not(.js) .schema__play {
  display: none;
}

/* Wide layout: the drawing on the left, the steps on the right. */
@media (min-width: 900px) {
  .schema--side {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}

/* Dark drawings: the eye of the surgeries page and the views of the examination on the home page. */
.schema--dark {
  --schema-ink: #fff;
  --schema-line: rgba(232, 240, 250, 0.82);
  --schema-thin: rgba(232, 240, 250, 0.38);
  --schema-soft: rgba(168, 200, 243, 0.08);
  --schema-paper: #0d1b30;
  --schema-accent: #7fb2f0;
  --schema-accent-soft: rgba(127, 178, 240, 0.18);
  --schema-red: #ff8a73;
  --schema-red-soft: rgba(255, 138, 115, 0.18);
}

/* Schema drawing classes (fluids, fundus, visual field, insets). */
.schema__svg .fluid-line {
  stroke: var(--schema-fluid);
  stroke-width: 2;
}

.schema__svg .dot-blue {
  fill: var(--schema-fluid);
  stroke: none;
}

.schema__svg .dot-ink {
  fill: var(--schema-ink);
  stroke: none;
}

.schema__svg .disc {
  fill: #f2c27a;
  stroke: rgba(120, 60, 20, 0.35);
}

.schema__svg .cup {
  fill: #fbe6b8;
  stroke: rgba(120, 60, 20, 0.3);
  stroke-width: 0.8;
}

.schema__svg .fundus-artery {
  stroke: #e2503b;
  stroke-width: 2.2;
}

.schema__svg .fundus-vein {
  stroke: #8e1f1f;
  stroke-width: 3.2;
}

.schema__svg .field-bg {
  fill: #f7f6f1;
}

.schema__svg .blind-spot {
  fill: rgba(13, 26, 43, 0.28);
  stroke: none;
}

.schema__svg .loss {
  fill: rgba(70, 82, 100, 0.55);
  stroke: none;
}

.schema__svg .inset__halo {
  fill: var(--c-paper);
  stroke: var(--c-line);
  stroke-width: 1;
}

.schema__svg .inset__ring {
  stroke: var(--schema-ink);
  stroke-width: 1.4;
}

/* Pathology drawings: fundus lesions, retinal layers, vitreous, patient's view. */
.schema__svg .leader {
  stroke: var(--schema-thin);
  stroke-dasharray: 3 3;
}

.schema__svg .fovea-reflex {
  fill: rgba(255, 236, 200, 0.55);
  stroke: none;
}

.schema__svg .thin-vessel {
  stroke-width: 1.2;
}

.schema__svg .ma {
  fill: #6e1010;
  stroke: none;
}

.schema__svg .blot {
  fill: #7a1414;
  stroke: none;
  opacity: 0.88;
}

.schema__svg .exudate {
  fill: #f4d03f;
  stroke: rgba(150, 110, 10, 0.4);
  stroke-width: 0.5;
}

.schema__svg .cotton {
  fill: #f2ece0;
  stroke: none;
  opacity: 0.92;
}

.schema__svg .bead {
  fill: #8e1f1f;
  stroke: none;
}

.schema__svg .neo {
  stroke: #d2352b;
  stroke-width: 1;
}

.schema__svg .fibrous {
  fill: rgba(232, 226, 214, 0.42);
  stroke: none;
}

.schema__svg .neo-fill {
  fill: rgba(210, 53, 43, 0.16);
  stroke: #b8432f;
  stroke-width: 1;
}

.schema__svg .neo-quiet {
  fill: rgba(120, 120, 120, 0.2);
  stroke: rgba(120, 90, 80, 0.6);
}

.schema__svg .rpe-band {
  fill: #6b4a33;
  stroke: none;
}

.schema__svg .retina-band {
  fill: #f1d9cf;
  stroke: rgba(13, 26, 43, 0.4);
  stroke-width: 0.8;
}

.schema__svg .retina-inner {
  fill: #f6e3dc;
  stroke: none;
}

.schema__svg .retina-opl {
  fill: #ecd2c7;
  stroke: none;
}

.schema__svg .ilm {
  stroke: rgba(13, 26, 43, 0.55);
}

.schema__svg .nucleus {
  fill: rgba(110, 70, 90, 0.5);
  stroke: none;
}

.schema__svg .cone {
  stroke: #9a6a3a;
  stroke-width: 2;
}

.schema__svg .rod {
  stroke: #b78c6a;
  stroke-width: 1.2;
}

.schema__svg .rpe {
  fill: #5b3a26;
  stroke: none;
}

.schema__svg .bruch {
  stroke: rgba(13, 26, 43, 0.45);
  stroke-width: 0.8;
}

.schema__svg .capillary {
  fill: #c24a3a;
  stroke: none;
  opacity: 0.85;
}

.schema__svg .choroid-vessel {
  fill: rgba(170, 52, 40, 0.55);
  stroke: rgba(120, 30, 25, 0.5);
  stroke-width: 0.8;
}

.schema__svg .sclera-band {
  fill: #f3efe6;
  stroke: rgba(13, 26, 43, 0.25);
}

.schema__svg .druse {
  fill: #ead27a;
  stroke: rgba(150, 110, 10, 0.5);
  stroke-width: 0.8;
}

.schema__svg .grid-line {
  stroke: var(--schema-ink);
  stroke-width: 0.9;
}

.schema__svg .scotoma {
  fill: rgba(70, 82, 100, 0.5);
  stroke: none;
}

.schema__svg .vitreous-fibre {
  stroke: rgba(93, 155, 224, 0.4);
  stroke-width: 0.9;
}

.schema__svg .hyaloid {
  stroke: rgba(60, 110, 170, 0.75);
  stroke-width: 1.2;
}

.schema__svg .floater {
  fill: rgba(30, 40, 55, 0.55);
  stroke: none;
}

.schema__svg .floater-ring {
  fill: none;
  stroke: rgba(30, 40, 55, 0.6);
  stroke-width: 1.6;
}

.schema__svg .tear-gap {
  stroke: #fbfaf7;
  stroke-width: 4;
}

.schema__svg .flap {
  stroke: #b8432f;
  stroke-width: 2.6;
}

.schema__svg .retina-detached {
  fill: rgba(184, 67, 47, 0.2);
  stroke: #b8432f;
  stroke-width: 1.4;
}

.schema__svg .ground {
  fill: #d9d6c2;
  stroke: none;
}

.schema__svg .sun {
  fill: #f4c96b;
  stroke: none;
}

.schema__svg .house {
  fill: #e9e2d2;
  stroke: rgba(13, 26, 43, 0.5);
}

.schema__svg .trunk {
  stroke: #7b6a52;
  stroke-width: 3;
}

.schema__svg .tree {
  fill: #9cb08a;
  stroke: none;
}

.schema__svg .tree--shade {
  fill: #7f9670;
}

.schema__svg .cloud {
  fill: rgba(255, 255, 255, 0.75);
  stroke: none;
}

.schema__svg .hill {
  fill: #c7cdb6;
  stroke: none;
}

.schema__svg .track {
  fill: none;
  stroke: #c9b896;
  stroke-width: 7;
}

.schema__svg .roof {
  fill: none;
  stroke: #b7624a;
  stroke-width: 4;
  stroke-linejoin: round;
}

.schema__svg .window,
.schema__svg .door {
  fill: #7c8ea3;
  stroke: none;
}

.schema__svg .door {
  fill: #9a6b4d;
}

.schema__svg .flash-line {
  stroke: #fff6c9;
  stroke-width: 3;
}

.schema__svg .flash {
  animation: schema-flash 0.9s ease-in-out infinite;
}

@keyframes schema-flash {
  0%,
  70%,
  100% {
    opacity: 0;
  }

  76%,
  84% {
    opacity: 1;
  }
}

.schema__svg .grid-wavy,
.schema__svg .grid-straight {
  transition: opacity 0.3s var(--ease-out);
}

.schema.is-step-4:not(.is-step-5) .grid-straight {
  opacity: 0;
}

.schema__svg .veil {
  fill: rgba(88, 96, 108, 0.62);
}

/* Surgery drawings: instruments, implant, cornea layers, face views, eyelid. */
.schema__svg .cataract-nucleus {
  fill: rgba(196, 140, 58, 0.55);
  stroke: rgba(150, 100, 30, 0.6);
}

.schema__svg .lens-cloud {
  fill: rgba(214, 178, 110, 0.42);
  stroke: rgba(150, 110, 40, 0.5);
}

.schema__svg .capsule {
  stroke: var(--schema-line);
  stroke-width: 1.1;
}

.schema__svg .rhexis {
  stroke: var(--schema-accent);
  stroke-width: 2.2;
  stroke-dasharray: 5 4;
}

.schema__svg .gel {
  fill: rgba(93, 155, 224, 0.13);
  stroke: none;
}

.schema__svg .instrument {
  stroke: #8a96a8;
  stroke-width: 3.4;
}

.schema__svg .instrument-thick {
  stroke: #8a96a8;
  stroke-width: 7;
}

.schema__svg .iol-optic {
  fill: rgba(127, 178, 240, 0.25);
  stroke: var(--schema-accent);
  stroke-width: 1.8;
}

.schema__svg .iol-haptic {
  stroke: var(--schema-accent);
  stroke-width: 2.4;
}

.schema__svg .incision {
  stroke: var(--schema-accent);
  stroke-width: 3;
}

.schema__svg .sclera-face {
  fill: #f5f2ec;
}

.schema__svg .pupil-face {
  fill: #0c1420;
  stroke: none;
}

.schema__svg .limbus-face {
  stroke: rgba(13, 26, 43, 0.55);
  stroke-width: 1.6;
}

.schema__svg .catchlight {
  fill: rgba(255, 255, 255, 0.85);
  stroke: none;
}

.schema__svg .dot-sun {
  fill: var(--schema-light);
  stroke: none;
}

.schema__svg .dot-accent {
  fill: var(--schema-accent);
  stroke: none;
}

/* Phaco: the quadrants are emulsified one after the other. */
.schema__svg .frag {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-4:not(.is-step-5) .frag {
  animation: schema-aspirate 1s var(--ease-in-out) both;
  animation-delay: calc(0.6s + var(--i, 0) * 0.45s);
}

/* Each quadrant parts a little from the others (--ox, --oy), then goes into the tip of the probe
   (--tx, --ty); without them, it melts where it is (face view). */
@keyframes schema-aspirate {
  0% {
    opacity: 1;
    transform: none;
  }

  22% {
    opacity: 1;
    transform: translate(var(--ox, 0px), var(--oy, 0px));
  }

  100% {
    opacity: 0;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.1);
  }
}

/* Cornea layers (refractive surgery). */
.schema__svg .epithelium {
  fill: #d7e6f4;
  stroke: rgba(13, 26, 43, 0.35);
  stroke-width: 0.6;
}

.schema__svg .bowman {
  fill: #9fb6cf;
  stroke: none;
}

.schema__svg .stroma {
  fill: #eef3f8;
  stroke: rgba(13, 26, 43, 0.3);
  stroke-width: 0.6;
}

.schema__svg .descemet {
  fill: #9fb6cf;
  stroke: none;
}

.schema__svg .endothelium {
  fill: #c9d9ea;
  stroke: rgba(13, 26, 43, 0.35);
  stroke-width: 0.6;
}

.schema__svg .flap {
  fill: rgba(127, 178, 240, 0.32);
  stroke: var(--schema-accent);
  stroke-width: 1.4;
}

.schema__svg .flap-lift {
  transition: transform 0.9s var(--ease-in-out);
}

.schema.is-step-2 .flap-lift {
  transform: rotate(-16deg);
}

.schema__svg .cut-line {
  stroke: var(--schema-accent);
  stroke-dasharray: 6 4;
}

.schema__svg .ablation {
  fill: rgba(239, 178, 74, 0.55);
  stroke: var(--schema-light);
}

/* The ablation starts with its step: the tissue glows, then vanishes. */
.schema.is-step-3:not(.is-step-4) .ablation {
  animation: schema-ablate 1.13s ease-in 0.13s both;
}

@keyframes schema-ablate {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.08;
  }
}

.schema__svg .pulse-dot {
  fill: var(--schema-light);
  stroke: none;
  opacity: 0;
  animation: schema-pulse-dot 0.45s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes schema-pulse-dot {
  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.schema__svg .epi-gap {
  fill: var(--schema-paper);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

/* PRK: the surface layer is taken away, then grows back from the edges under the lens. */
.schema.is-step-5 .epi-gap {
  animation: schema-regrow 2.7s var(--ease-out) both;
}

@keyframes schema-regrow {
  0% {
    opacity: 0;
    transform: none;
  }

  15%,
  45% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 1;
    transform: scaleX(0.08);
  }
}

.schema__svg .bandage-lens {
  stroke: var(--schema-accent);
  stroke-width: 2;
}

.schema__svg .flap-edge {
  stroke: var(--schema-accent);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
}

.schema__svg .hinge {
  stroke: var(--schema-accent);
  stroke-width: 3.4;
}

.schema__svg .ablation-zone {
  fill: rgba(239, 178, 74, 0.45);
  stroke: var(--schema-light);
}

.schema__svg .epi-defect {
  fill: rgba(255, 255, 255, 0.35);
  stroke: var(--schema-accent);
  stroke-dasharray: 4 3;
}

/* Injection: antiseptic, speculum, drops, the drug spreading. */
.schema__svg .iodine {
  fill: rgba(196, 120, 30, 0.22);
}

.schema__svg .avoid-line {
  stroke: rgba(184, 67, 47, 0.55);
  stroke-dasharray: 3 4;
}

.schema__svg .speculum {
  stroke: #8a96a8;
  stroke-width: 3;
}

.schema__svg .drop {
  fill: var(--schema-fluid);
  stroke: none;
  animation: schema-drop 0.9s ease-in infinite;
  animation-delay: calc(var(--i, 0) * 0.45s);
}

@keyframes schema-drop {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  40% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translateY(40px);
  }
}

.schema__svg .drug-cloud {
  fill: rgba(93, 155, 224, 0.18);
  stroke: var(--schema-fluid);
  stroke-dasharray: 4 4;
}

/* Eyelid. */
.schema__svg .brow {
  stroke: rgba(80, 64, 50, 0.35);
  stroke-width: 18;
  stroke-linecap: round;
}

.schema__svg .hair {
  stroke: rgba(70, 56, 44, 0.75);
  stroke-width: 1.4;
  stroke-linecap: round;
}

.schema__svg .lash {
  stroke: #2a2420;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.schema__svg .crease {
  stroke: rgba(120, 86, 70, 0.7);
  stroke-width: 1.6;
}

/* The excess skin: a neutral tint, like the other structures of the schemas. */
.schema__svg .skin-fold {
  fill: rgba(13, 26, 43, 0.09);
  stroke: rgba(13, 26, 43, 0.55);
}

.schema--dark .schema__svg .skin-fold {
  fill: rgba(232, 240, 250, 0.12);
  stroke: rgba(232, 240, 250, 0.6);
}

.schema__svg .iris-face {
  fill: #7d98b5;
  stroke: rgba(13, 26, 43, 0.35);
}

.schema__svg .excision {
  fill: rgba(127, 178, 240, 0.18);
  stroke: var(--schema-accent);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.schema.is-step-3 .excision {
  fill: rgba(127, 178, 240, 0.4);
}

.schema__svg .suture {
  stroke: #3a5f9a;
  stroke-width: 1.6;
}

.schema__svg .caruncle {
  fill: #e3a6a0;
  stroke: rgba(120, 60, 50, 0.4);
}

.schema__svg .skin-line {
  stroke: rgba(120, 86, 70, 0.8);
  stroke-width: 2;
}

.schema__svg .orbicularis-line {
  stroke: rgba(184, 67, 47, 0.6);
  stroke-width: 6;
}

.schema__svg .septum-line {
  stroke: rgba(13, 26, 43, 0.5);
}

.schema__svg .fat {
  fill: rgba(236, 200, 96, 0.7);
  stroke: rgba(160, 120, 30, 0.5);
}

.schema__svg .levator-line {
  stroke: rgba(150, 64, 52, 0.7);
  stroke-width: 2;
}

.schema__svg .tarsus {
  fill: rgba(13, 26, 43, 0.15);
  stroke: rgba(13, 26, 43, 0.45);
}

.schema__svg .conj-line {
  stroke: rgba(210, 120, 120, 0.8);
  stroke-width: 1.4;
}

/* ---------- Surgery schemas: each step plays its own gesture ---------- */
/* Lines drawn by a gesture (incisions, capsulorhexis, measure, marker) have pathLength="1". */
.schema__svg :is(.cut, .rhexis-face, .measure-draw, .pen) {
  stroke-dasharray: 1;
}

@keyframes schema-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes schema-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes schema-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes schema-twinkle {
  0%,
  100% {
    opacity: 0.12;
  }

  50% {
    opacity: 0.85;
  }
}

@keyframes schema-wave {
  from {
    opacity: 0.9;
    transform: scale(0.3);
  }

  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* Cataract: shimmer in the cloudy lens, the pupil opening, the blade, the capsulorhexis traced by
   the forceps, the probe and its ultrasound, the injector and the implant unfolding. */
.schema__svg .haze {
  fill: rgba(255, 236, 196, 0.85);
  stroke: none;
  animation: schema-twinkle 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.37s);
}

.schema__svg .glare {
  fill: rgba(255, 255, 255, 0.55);
  stroke: none;
  animation: schema-twinkle 3.2s ease-in-out infinite;
}

.schema__svg .pupil-dilate {
  transform: scale(0.56);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.6s var(--ease-out) 0.4s;
}

.schema.is-step-2 .pupil-dilate {
  transform: none;
}

.schema__svg .knife {
  opacity: 0;
}

.schema__svg .blade {
  fill: #c8d2df;
  stroke: #8a96a8;
}

.schema.is-step-2:not(.is-step-3) .knife {
  animation: schema-knife 1.8s var(--ease-out) both;
}

@keyframes schema-knife {
  0% {
    opacity: 0;
    transform: translate(-34px, -30px);
  }

  20% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: none;
  }

  85% {
    opacity: 1;
    transform: translate(-34px, -30px);
  }

  100% {
    opacity: 0;
    transform: translate(-34px, -30px);
  }
}

.schema.is-step-2:not(.is-step-3) .cut {
  animation: schema-draw 0.7s var(--ease-out) 0.85s both;
}

.schema__svg .rhexis-face {
  stroke: var(--schema-accent);
  stroke-width: 2.4;
}

.schema.is-step-3:not(.is-step-4) .rhexis-face {
  animation: schema-draw 2s ease-in-out 0.3s both;
}

.schema__svg .forceps {
  opacity: 0;
  transform-box: view-box;
}

.schema.is-step-3:not(.is-step-4) .forceps {
  animation: schema-orbit 2s ease-in-out 0.3s both;
}

@keyframes schema-orbit {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }

  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: rotate(360deg);
  }
}

.schema.is-step-4:not(.is-step-5) .vibrate {
  animation: schema-vibrate 0.1s linear infinite;
}

@keyframes schema-vibrate {
  50% {
    transform: translate(1.2px, 0.8px);
  }
}

.schema__svg .wave {
  stroke: var(--schema-light);
  stroke-width: 1.4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-4:not(.is-step-5) .wave {
  animation: schema-wave 1.2s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
}

.schema__svg .injector {
  opacity: 0;
}

.schema.is-step-5:not(.is-step-6) .injector {
  animation: schema-injector 2s var(--ease-out) both;
}

@keyframes schema-injector {
  0% {
    opacity: 0;
    transform: translate(-46px, -46px);
  }

  25% {
    opacity: 1;
    transform: none;
  }

  65% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translate(-46px, -46px);
  }
}

.schema__svg :is(.iol-unfold, .iol-turn) {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-5:not(.is-step-6) .iol-unfold {
  animation: schema-unfold 1.4s var(--ease-out) 0.55s both;
}

/* The implant comes out of the injector (--fx, --fy: from its tip) as it unfolds. */
@keyframes schema-unfold {
  from {
    opacity: 0;
    transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(0.35, 0.1);
  }

  30% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.schema.is-step-5:not(.is-step-6) .iol-turn {
  animation: schema-turn 1.6s var(--ease-out) 0.55s both;
}

@keyframes schema-turn {
  from {
    opacity: 0;
    transform: rotate(-70deg) scale(0.45, 0.2);
  }

  30% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* The point where the image forms beats once it is sharp. */
.schema__svg .focus-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-focus 1.8s ease-in-out infinite;
}

@keyframes schema-focus {
  50% {
    opacity: 0.55;
    transform: scale(1.9);
  }
}

/* Refractive surgery: femtosecond bubbles before the flap lifts, a beam scanning the cornea, the
   bandage lens laid on the eye, the blurred image of the myopic eye. */
.schema__svg .bubble {
  fill: rgba(232, 240, 250, 0.9);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-2:not(.is-step-3) .bubble {
  animation: schema-pop 0.3s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.05s);
}

.schema.is-step-2:not(.is-step-3) .flap-lift {
  transition-delay: 1.1s;
}

.schema__svg .scan-beam {
  animation: schema-scan 1.3s ease-in-out infinite alternate;
}

@keyframes schema-scan {
  from {
    transform: translateX(-140px);
  }

  to {
    transform: translateX(140px);
  }
}

.schema__svg .beam {
  stroke: var(--schema-light);
  stroke-width: 3;
  opacity: 0.85;
}

.schema__svg .scan-orbit {
  transform-box: view-box;
  animation: schema-spin 1.2s linear infinite;
}

@keyframes schema-spin {
  to {
    transform: rotate(360deg);
  }
}

.schema__svg .scan-spot {
  fill: var(--schema-light);
  stroke: none;
}

.schema__svg .lens-drop {
  opacity: 0;
  transform: translateY(-40px);
  transition: transform 1.2s var(--ease-out) 0.5s, opacity 0.6s 0.5s;
}

.schema.is-step-5 .lens-drop {
  opacity: 1;
  transform: none;
}

.schema__svg .blur-spot {
  fill: rgba(239, 178, 74, 0.35);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-blur 2.4s ease-in-out infinite;
}

@keyframes schema-blur {
  50% {
    opacity: 0.6;
    transform: scale(1.25);
  }
}

.schema.is-step-5 .epi-defect {
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-heal 3.6s ease-in-out infinite;
}

@keyframes schema-heal {
  0%,
  15% {
    transform: none;
  }

  70%,
  100% {
    opacity: 0.3;
    transform: scale(0.15);
  }
}

/* Eyelid: the heavy fold, the marker drawing the spindle, the skin lifted away over the muscle,
   the stitches one by one. */
.schema__svg .sag {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.schema.is-step-1:not(.is-step-2) .sag {
  animation: schema-sag 3.2s ease-in-out infinite;
}

@keyframes schema-sag {
  50% {
    transform: scaleY(1.08);
  }
}

.schema__svg .pen {
  stroke: var(--schema-accent);
  stroke-width: 2.6;
}

.schema.is-step-2:not(.is-step-3) .pen {
  animation: schema-draw 1.8s ease-in-out 0.2s both;
}

.schema.is-step-2:not(.is-step-3) .lift-off .excision {
  animation: schema-fade-in 0.6s 1.9s both;
}

.schema__svg .wound {
  fill: rgba(184, 67, 47, 0.32);
  stroke: rgba(184, 67, 47, 0.6);
}

.schema.is-step-3:not(.is-step-4) .wound {
  animation: schema-fade-in 0.8s 0.6s both;
}

.schema__svg .lift-off {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-3:not(.is-step-4) .lift-off {
  animation: schema-lift 1.4s var(--ease-out) 0.3s both;
}

@keyframes schema-lift {
  to {
    opacity: 0;
    transform: translate(-6px, -34px) rotate(-4deg);
  }
}

/* The stitches appear as the needle passes. */
.schema.is-step-4 .suture {
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-pop 0.35s ease-out both;
  animation-delay: calc(0.33s + var(--i, 0) * 0.13s);
}

/* Intravitreal injection: the antiseptic spreading, the speculum opening, the measure, the needle,
   the drop of drug, the cloud reaching the macula, the macula going down. */
.schema__svg .spread {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-1:not(.is-step-2) .spread {
  animation: schema-spread 1.8s var(--ease-out) 0.5s both;
}

@keyframes schema-spread {
  from {
    opacity: 0;
    transform: scale(0.15);
  }
}

.schema__svg .speculum-open {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-2:not(.is-step-3) .speculum-open {
  animation: schema-open 1.1s var(--ease-out) both;
}

@keyframes schema-open {
  from {
    transform: scaleY(0.45);
  }
}

.schema.is-step-2:not(.is-step-3) .measure-draw {
  animation: schema-draw 1s var(--ease-out) 0.8s both;
}

.schema__svg .pulse-ring {
  stroke: var(--schema-accent);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-wave 1.6s ease-out infinite;
}

/* The needle goes in, stays while the drop is given, then comes out. */
.schema.is-step-3:not(.is-step-4) .needle-in {
  animation: schema-needle 2.9s var(--ease-in-out) both;
}

@keyframes schema-needle {
  0% {
    opacity: 0;
    transform: translate(var(--nx), var(--ny));
  }

  10% {
    opacity: 1;
  }

  25%,
  72% {
    opacity: 1;
    transform: none;
  }

  92% {
    opacity: 1;
    transform: translate(var(--nx), var(--ny));
  }

  100% {
    opacity: 0;
    transform: translate(var(--nx), var(--ny));
  }
}

.schema__svg .drop-grow {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-3:not(.is-step-4) .drop-grow {
  animation: schema-pop 0.6s var(--ease-out) 1.1s both;
}

.schema__svg .cloud-grow {
  transform-box: view-box;
}

.schema.is-step-4:not(.is-step-5) .cloud-grow {
  animation: schema-cloud 2s var(--ease-out) both;
}

@keyframes schema-cloud {
  from {
    opacity: 0;
    transform: scale(0.2);
  }

  25% {
    opacity: 1;
  }
}

.schema__svg .swollen {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.schema.is-step-5 .swollen {
  animation: schema-deflate 1.6s var(--ease-out) 0.6s both;
}

@keyframes schema-deflate {
  to {
    opacity: 0;
    transform: scaleY(0.35);
  }
}

.schema.is-step-5 .cyst {
  transform-box: fill-box;
  transform-origin: center;
  animation: schema-shrink 0.8s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 0.15s);
}

@keyframes schema-shrink {
  to {
    opacity: 0;
    transform: scale(0);
  }
}

.schema.is-step-5 .flat-in {
  animation: schema-fade-in 0.9s 1.4s both;
}

/* ---------- Surgery schemas: the place of each step, lit and framed ---------- */
/* The focus of the step playing (schemas.js writes one per step, as fractions of the drawing); it
   glides to the next one, and the light and the target follow it. */
@property --sx {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --sy {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.5;
}

@property --sr {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.3;
}

.schema--focus .schema__canvas {
  transition: --sx 1.1s var(--ease-in-out), --sy 1.1s var(--ease-in-out), --sr 1.1s var(--ease-in-out);
}

.schema--focus[data-step="1"] .schema__canvas {
  --sx: var(--s1x);
  --sy: var(--s1y);
  --sr: var(--s1r);
}

.schema--focus[data-step="2"] .schema__canvas {
  --sx: var(--s2x);
  --sy: var(--s2y);
  --sr: var(--s2r);
}

.schema--focus[data-step="3"] .schema__canvas {
  --sx: var(--s3x);
  --sy: var(--s3y);
  --sr: var(--s3r);
}

.schema--focus[data-step="4"] .schema__canvas {
  --sx: var(--s4x);
  --sy: var(--s4y);
  --sr: var(--s4r);
}

.schema--focus[data-step="5"] .schema__canvas {
  --sx: var(--s5x);
  --sy: var(--s5y);
  --sr: var(--s5r);
}

.schema--focus[data-step="6"] .schema__canvas {
  --sx: var(--s6x);
  --sy: var(--s6y);
  --sr: var(--s6r);
}

/* Around the place of the step, the drawing goes a little into the shade (soft edges, no frame). */
.schema__spot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at calc(var(--sx) * 100%) calc(var(--sy) * 100%), rgba(6, 13, 25, 0) calc(var(--sr) * 75cqi), rgba(6, 13, 25, 0.5) calc(var(--sr) * 165cqi));
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-composite: intersect;
}

/* The target: a ring in four arcs with its ticks, in the colour of the operation, turning slowly.
   At each new step it closes in on its place, like a microscope finding its focus. */
.schema__target {
  position: absolute;
  top: calc(var(--sy) * 100%);
  left: calc(var(--sx) * 100%);
  width: calc(var(--sr) * 165cqi);
  aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--chapter-accent, var(--op-accent, var(--c-sky)));
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 55%, transparent));
  pointer-events: none;
}

.schema__target svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  animation: target-spin 18s linear infinite;
}

.schema__target circle {
  stroke-width: 2.2;
  stroke-dasharray: 19 6;
  vector-effect: non-scaling-stroke;
}

.schema__target path {
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.schema--focus:is([data-step="1"], [data-step="3"], [data-step="5"]) .schema__target {
  animation: target-lock-a 1s var(--ease-out) both;
}

.schema--focus:is([data-step="2"], [data-step="4"], [data-step="6"]) .schema__target {
  animation: target-lock-b 1s var(--ease-out) both;
}

@keyframes target-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes target-lock-a {
  from {
    opacity: 0;
    scale: 1.7;
  }

  to {
    opacity: 0.9;
    scale: 1;
  }
}

@keyframes target-lock-b {
  from {
    opacity: 0;
    scale: 1.7;
  }

  to {
    opacity: 0.9;
    scale: 1;
  }
}

/* On the paper (pathologies), the drawing around the place of the step goes into a light fog, and
   the target takes the colour of the pathology. */
.schema--focus:not(.schema--dark) .schema__spot {
  background: radial-gradient(circle at calc(var(--sx) * 100%) calc(var(--sy) * 100%), rgba(246, 241, 231, 0) calc(var(--sr) * 75cqi), rgba(246, 241, 231, 0.5) calc(var(--sr) * 165cqi));
}

.schema--focus:not(.schema--dark) .schema__target {
  color: var(--schema-accent);
  filter: drop-shadow(0 0 1.2px #fff) drop-shadow(0 0 2.5px rgba(255, 255, 255, 0.9));
}

/* What keeps moving within a step stops with the pause of its schema, chapter or film; the gestures
   of the step (a few seconds) still play when a step is chosen. */
:is(.chapter, .film, .schema[data-autoplay]):not(.is-playing) :is(.schema__target svg, .schema__svg :is(.flow, .haze, .glare, .fog, .vibrate, .wave, .focus-pulse, .scan-beam, .scan-orbit, .tracker, .pulse-dot, .plume, .blur-spot, .epi-defect, .sag, .weight, .pulse-ring, .drop, .drug-grain, .aqueous, .jam, .pressure, .artery-pulse, .cone, .rod, .grid-wavy, .sway, .drift, .tug, .flash)) {
  animation-play-state: paused;
}

/* ---------- Surgery schemas: more of each gesture ---------- */
/* Instruments that travel along a line of the drawing (CSS motion path): their tip is at 0 0. */
.schema__svg :is(.femto, .spatula, .pen-tool, .blade-tool, .needle-tool, .drug-grain) {
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
}

@keyframes schema-travel {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  8%,
  92% {
    opacity: 1;
  }

  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes schema-fade-out {
  to {
    opacity: 0;
  }
}

/* A light that bursts where the image becomes sharp, or where the macula calms down. */
.schema__svg .burst {
  fill: none;
  stroke: var(--schema-light);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-4:not(.is-step-5) .burst--4,
.schema.is-step-5 .burst--5,
.schema.is-step-6 .burst--6 {
  animation: schema-burst 1.1s ease-out 0.7s 2;
}

@keyframes schema-burst {
  from {
    opacity: 0.95;
    transform: scale(0.5);
  }

  to {
    opacity: 0;
    transform: scale(3.6);
  }
}

/* Cataract: the cloudy lens breathes; the anaesthetic spreads; the second incision; the opened disc
   of the envelope is taken away; the cross of the grooves; the loops of the implant spring open;
   the incisions close by themselves. */
.schema.is-step-1:not(.is-step-2) .fog {
  animation: schema-fog 2.4s ease-in-out infinite;
}

@keyframes schema-fog {
  50% {
    opacity: 0.7;
  }
}

.schema .iris-swap {
  transition: opacity 1.2s var(--ease-in-out) 0.3s;
}

.schema__svg .numb {
  fill: rgba(128, 212, 217, 0.24);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-2:not(.is-step-3) .numb {
  animation: schema-numb 2.2s var(--ease-out) 0.7s both;
}

@keyframes schema-numb {
  from {
    opacity: 0;
    transform: scale(0.15);
  }

  45% {
    opacity: 1;
    transform: none;
  }

  to {
    opacity: 0.55;
    transform: none;
  }
}

.schema.is-step-2:not(.is-step-3) .knife--side {
  animation: schema-knife-side 1.6s var(--ease-out) 1.15s both;
}

@keyframes schema-knife-side {
  0% {
    opacity: 0;
    transform: translate(-34px, 28px);
  }

  20% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: none;
  }

  85% {
    opacity: 1;
    transform: translate(-34px, 28px);
  }

  100% {
    opacity: 0;
    transform: translate(-34px, 28px);
  }
}

.schema.is-step-2:not(.is-step-3) .cut--side {
  animation-delay: 1.85s;
}

.schema__svg .rhexis {
  transform-box: fill-box;
  transform-origin: 100% 50%;
}

.schema.is-step-3:not(.is-step-4) .rhexis {
  animation: schema-peel 1s var(--ease-in-out) 1.7s both;
}

@keyframes schema-peel {
  to {
    opacity: 0;
    transform: translateX(-18px) rotate(-8deg);
  }
}

.schema__svg .crack {
  stroke: var(--schema-light);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.schema.is-step-4:not(.is-step-5) .crack {
  animation: schema-draw 0.5s var(--ease-out) 0.1s both, schema-fade-out 0.4s 1.9s forwards;
}

.schema__svg .iol-spring {
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-5:not(.is-step-6) .iol-spring {
  animation: schema-spring 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s both;
}

@keyframes schema-spring {
  from {
    transform: scaleY(0.5);
  }
}

.schema__svg .seal {
  stroke-dasharray: 1;
}

.schema.is-step-6 .seal {
  animation: schema-seal 1.3s var(--ease-in-out) 0.6s both;
}

@keyframes schema-seal {
  from {
    stroke-dashoffset: 0;
  }

  to {
    opacity: 0.2;
    stroke-dashoffset: -1;
  }
}

/* Refractive surgery: the femtosecond laser runs along the plane of the flap, a spatula lifts it;
   the tissue rises in a plume under the excimer while the eye is tracked; the flap swings back. */
.schema__svg .femto-glow {
  fill: rgba(196, 181, 253, 0.35);
  stroke: none;
}

.schema__svg .femto-dot {
  fill: #fff;
  stroke: none;
}

.schema.is-step-2:not(.is-step-3) .femto {
  animation: schema-travel 1s linear both;
}

.schema.is-step-2:not(.is-step-3) .spatula {
  animation: schema-spatula 1.7s var(--ease-in-out) 0.85s both;
}

@keyframes schema-spatula {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }

  12%,
  85% {
    opacity: 1;
  }

  100% {
    offset-distance: 82%;
    opacity: 0;
  }
}

.schema__svg .plume {
  fill: var(--schema-light);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.schema.is-step-3:not(.is-step-4) .plume {
  animation: schema-plume 0.9s ease-out infinite;
  animation-delay: calc(var(--i, 0) * -0.13s);
}

@keyframes schema-plume {
  0% {
    opacity: 0;
    transform: none;
  }

  25% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-34px) scale(0.4);
  }
}

.schema__svg .tracker-line {
  stroke: var(--schema-accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
}

.schema.is-step-3:not(.is-step-4) .tracker {
  animation: schema-track 0.5s steps(2) infinite;
}

@keyframes schema-track {
  50% {
    transform: translate(1.5px, -1px);
  }
}

.schema.is-step-4:not(.is-step-5) .flap-down {
  animation: schema-flap-down 1.1s var(--ease-in-out) 0.1s both;
}

@keyframes schema-flap-down {
  from {
    transform: rotate(-16deg);
  }
}

/* Injection: the calipers measure; the plunger is pushed; grains of the drug go to the macula; the
   fluid of the macula goes away. */
.schema__svg .caliper {
  opacity: 0;
}

.schema.is-step-2:not(.is-step-3) .caliper {
  animation: schema-caliper 2.8s var(--ease-out) 0.2s both;
}

@keyframes schema-caliper {
  0% {
    opacity: 0;
    transform: translate(-14px, 12px);
  }

  22%,
  82% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    transform: translate(-14px, 12px);
  }
}

.schema.is-step-3:not(.is-step-4) .plunger {
  animation: schema-plunger 0.5s var(--ease-in-out) 0.85s both;
}

@keyframes schema-plunger {
  to {
    transform: translate(var(--px), var(--py));
  }
}

.schema.is-step-4:not(.is-step-5) .drug-grain {
  animation: schema-travel 2.1s var(--ease-in-out) infinite;
  animation-delay: calc(0.3s + var(--i, 0) * 0.35s);
}

.schema__svg .vapor {
  fill: var(--schema-fluid);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
}

.schema.is-step-5 .vapor {
  animation: schema-vapor 1.3s ease-out both;
  animation-delay: calc(0.9s + var(--i, 0) * 0.22s);
}

@keyframes schema-vapor {
  0% {
    opacity: 0;
    transform: none;
  }

  25% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateY(-26px);
  }
}

/* Eyelid: an arrow says the weight of the fold; the marker, the blade and the needle travel along
   their line; a little fat is taken if needed. */
.schema.is-step-1:not(.is-step-2) .weight {
  animation: schema-weight 1.6s ease-in-out infinite;
}

@keyframes schema-weight {
  50% {
    transform: translateY(7px);
  }
}

.schema.is-step-2:not(.is-step-3) .pen-tool {
  animation: schema-travel 1.8s ease-in-out 0.2s both;
}

.schema.is-step-3:not(.is-step-4) .blade-tool {
  animation: schema-travel 1s ease-in-out both;
}

.schema.is-step-3:not(.is-step-4) .lift-off {
  animation-delay: 1.05s;
}

.schema.is-step-3:not(.is-step-4) .wound {
  animation-delay: 0.95s;
}

.schema__svg .fat-trim {
  transform-box: fill-box;
  transform-origin: 30% 50%;
  transition: transform 1s var(--ease-out) 1.3s;
}

.schema.is-step-3 .fat-trim {
  transform: scale(0.8);
}

.schema__svg .thread {
  stroke: #3a5f9a;
  stroke-width: 1.4;
}

.schema.is-step-4 .needle-tool {
  animation: schema-travel 1.4s linear 0.25s both;
}

/* ---------- Pathology schemas: what happens at each step, told by movement ---------- */
/* Gestures of step N, played while that step is shown: pop (comes in, one after the other with
   --i), bloom (spreads from nothing), grow (rises from its base), widen (opens from its centre),
   draw (its line is drawn; pathLength="1"), slow (fades in slowly), drip (runs down), swell, rise
   (comes up from below), spread (from the place set in its style). */
.schema__svg :is(.pop-2, .pop-3, .pop-4, .pop-5, .bloom-2, .bloom-3, .bloom-4, .bloom-5, .widen-3, .widen-4, .ring-out) {
  transform-box: fill-box;
  transform-origin: center;
}

.schema__svg :is(.grow-2, .grow-3, .grow-4, .swell-3) {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.schema__svg :is(.drip-5, .rise-4, .rise-5) {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.schema__svg :is(.draw-2, .draw-3, .draw-4, .draw-5) {
  stroke-dasharray: 1;
}

:is(.schema.is-step-2:not(.is-step-3) .pop-2, .schema.is-step-3:not(.is-step-4) .pop-3, .schema.is-step-4:not(.is-step-5) .pop-4, .schema.is-step-5:not(.is-step-6) .pop-5) {
  animation: schema-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.08s);
}

:is(.schema.is-step-2:not(.is-step-3) .bloom-2, .schema.is-step-3:not(.is-step-4) .bloom-3, .schema.is-step-4:not(.is-step-5) .bloom-4, .schema.is-step-5:not(.is-step-6) .bloom-5) {
  animation: schema-bloom 1.2s var(--ease-out) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.07s);
}

:is(.schema.is-step-2:not(.is-step-3) .grow-2, .schema.is-step-3:not(.is-step-4) .grow-3, .schema.is-step-4:not(.is-step-5) .grow-4) {
  animation: schema-grow-up 1.4s var(--ease-out) both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.15s);
}

:is(.schema.is-step-3:not(.is-step-4) .widen-3, .schema.is-step-4:not(.is-step-5) .widen-4) {
  animation: schema-widen 1.6s var(--ease-out) 0.3s both;
}

:is(.schema.is-step-2:not(.is-step-3) .draw-2, .schema.is-step-3:not(.is-step-4) .draw-3, .schema.is-step-4:not(.is-step-5) .draw-4, .schema.is-step-5:not(.is-step-6) .draw-5) {
  animation: schema-draw 1.2s var(--ease-out) both;
  animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}

:is(.schema.is-step-4:not(.is-step-5) .slow-4, .schema.is-step-5:not(.is-step-6) .slow-5) {
  animation: schema-fade-in 1.6s var(--ease-in-out) 0.4s both;
}

/* Groups that appear slowly (an area of lost vision): only on their way in. */
:is(.schema.is-step-3:not(.is-step-4), .schema.is-step-4:not(.is-step-5)) .slow-in {
  transition: opacity 1.8s var(--ease-in-out) 0.5s;
}

.schema.is-step-5:not(.is-step-6) .drip-5 {
  animation: schema-drip 1.6s var(--ease-out) 0.8s both;
}

.schema.is-step-3:not(.is-step-4) .swell-3 {
  animation: schema-swell 1.6s var(--ease-out) 0.2s both;
}

.schema.is-step-4:not(.is-step-5) .rise-4,
.schema.is-step-5:not(.is-step-6) .rise-5 {
  animation: schema-rise 2.2s var(--ease-out) 0.3s both;
}

.schema.is-step-4:not(.is-step-5) .spread-4,
.schema.is-step-5:not(.is-step-6) .spread-5 {
  animation: schema-spread-out 2.2s var(--ease-out) 0.4s both;
}

.schema__svg .ring-out {
  fill: none;
  stroke: var(--schema-red);
  stroke-width: 1.4;
  opacity: 0;
}

.schema.is-step-2:not(.is-step-3) .ring-2 {
  animation: schema-burst 0.9s ease-out both;
  animation-delay: calc(0.25s + var(--i, 0) * 0.08s);
}

@keyframes schema-pop-in {
  from {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes schema-bloom {
  from {
    opacity: 0;
    transform: scale(0.15);
  }

  40% {
    opacity: 1;
  }
}

@keyframes schema-grow-up {
  from {
    opacity: 0.3;
    transform: scaleY(0.1);
  }
}

@keyframes schema-widen {
  from {
    transform: scale(0.6);
  }
}

@keyframes schema-drip {
  from {
    opacity: 0;
    transform: scaleY(0.1);
  }
}

@keyframes schema-swell {
  from {
    transform: scaleY(0.72);
  }
}

@keyframes schema-rise {
  from {
    transform: translateY(70%);
  }
}

@keyframes schema-spread-out {
  from {
    opacity: 0;
    transform: scale(0.25);
  }

  30% {
    opacity: 1;
  }
}

/* Glaucoma: the aqueous humour goes round; at the clogged filter it slows down and waits, the
   pressure pushes on the wall; the fibres of the nerve go out one by one; the field is tested
   point by point, the points of the damaged area are not seen. */
.schema__svg .aqueous {
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
  animation: schema-travel 2.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.87s);
}

.schema.is-step-2 .aqueous {
  animation-duration: 5.2s;
}

.schema.is-step-2 .aqueous--angle {
  animation-duration: 7.5s;
}

.schema.is-step-2:not(.is-step-3) .jam {
  animation: schema-jam 0.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.11s);
}

@keyframes schema-jam {
  to {
    transform: translate(1.4px, -1px);
  }
}

.schema.is-step-2:not(.is-step-3) .pressure {
  animation: schema-pressure 1.2s ease-in-out infinite;
}

@keyframes schema-pressure {
  50% {
    transform: scale(1.03);
  }
}

.schema__svg .fibre {
  transition: opacity 0.4s;
}

.schema.is-step-3 .fibre {
  opacity: 0;
  transition: opacity 0.6s ease-in calc(0.3s + var(--i, 0) * 0.14s);
}

.schema__svg .probe {
  fill: var(--schema-light);
  stroke: none;
}

.schema__svg .probe--missed {
  fill: var(--schema-paper);
  stroke: var(--schema-line);
  stroke-width: 1.2;
}

/* Diabetes: the blood beats along the arteries (less once the small vessels close). */
.schema__svg .artery-pulse {
  stroke: rgba(255, 236, 214, 0.95);
  stroke-width: 2.4;
  stroke-dasharray: 0.06 0.94;
  transition: opacity 1s;
  animation: schema-pulse-run 1.8s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.3s);
}

.schema.is-step-4 .artery-pulse {
  opacity: 0.35;
}

@keyframes schema-pulse-run {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* AMD: the cells of the macula catch the light, from the centre outward; the grid waves; the drug
   comes down to the macula. */
.schema.is-step-1:not(.is-step-2) :is(.cone, .rod) {
  animation: schema-sense 2.4s ease-in-out infinite;
  animation-delay: calc(var(--x, 0) * 1s);
}

@keyframes schema-sense {
  20% {
    stroke: var(--schema-light);
  }
}

.schema.is-step-4:not(.is-step-5) .grid-wavy {
  animation: schema-wobble 1.8s ease-in-out infinite;
}

@keyframes schema-wobble {
  50% {
    transform: scale(1.04, 0.97) rotate(1.2deg);
  }
}

.schema__svg .descend {
  opacity: 0;
}

.schema.is-step-5 .descend {
  animation: schema-descend 1.7s ease-in both;
  animation-delay: calc(0.3s + var(--i, 0) * 0.15s);
}

@keyframes schema-descend {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(150px);
  }
}

/* Detachment: the vitreous sways, floaters drift, the flap of the tear is tugged. */
.schema__svg .sway {
  transform-box: fill-box;
  transform-origin: 30% 50%;
}

.schema.is-step-1:not(.is-step-2) .sway {
  animation: schema-sway 3s ease-in-out infinite;
}

@keyframes schema-sway {
  50% {
    transform: translate(3px, -2px) rotate(0.8deg);
  }
}

.schema.is-step-2 .drift {
  animation: schema-drift 4s ease-in-out infinite;
}

@keyframes schema-drift {
  33% {
    transform: translate(4px, -5px);
  }

  66% {
    transform: translate(-3px, 3px);
  }
}

.schema.is-step-3:not(.is-step-4) .tug {
  animation: schema-tug 0.8s ease-in-out infinite alternate;
}

@keyframes schema-tug {
  to {
    transform: rotate(-7deg);
  }
}

/* Compact schemas (index pages): a live caption and step bars, like a short story. */
.schema--compact {
  gap: 0.9rem;
}

.schema--compact .schema__caption {
  display: grid;
  gap: 0.6rem;
}

.schema__now {
  min-height: 2.7em;
  color: var(--schema-ink);
  font: 700 clamp(1rem, 0.95rem + 0.3vw, 1.15rem)/1.35 var(--font-body);
}

.schema__dots {
  display: flex;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Up to six steps: the bars narrow on small phones instead of overflowing. */
.schema__dots > li {
  flex: 0 1 46px;
  min-width: 0;
}

.schema__dot {
  display: grid;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.schema__dot span {
  position: relative;
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--c-line-2);
}

.schema__dot span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--schema-accent);
  transform: scaleX(0);
  transform-origin: left;
}

.schema__dot.is-active span::after {
  transform: scaleX(1);
}

.schema.is-timing .schema__dot.is-active span::after {
  transform: scaleX(0);
  animation: schema-progress var(--step-duration, 4s) linear forwards;
}

.schema__dot:hover span {
  background: var(--schema-thin);
}

.schema--compact .schema__label:not([class*="--warn"]):not([class*="--accent"]) {
  display: none;
}

/* ---------- Home, "Comprendre votre œil": the two views of the examination, lit by a beam ---------- */

.lamp {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.lamp__view {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* The inside of the eye on the right, so that the two views answer each other. */
.lamp__view--inside {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}

.lamp__view--inside .lamp__figure {
  order: 2;
}

.lamp__figure {
  --schema-fluid: #5d9be0;
  --schema-light: #efb24a;
  position: relative;
  width: 100%;
  max-width: 36rem;
  justify-self: center;
  aspect-ratio: 1;
  touch-action: pan-y;
  cursor: crosshair;
}

.lamp__svg .lamp-ground {
  fill: #0b1626;
  stroke: none;
}

.lamp__svg .lamp-dark {
  fill: rgba(6, 12, 22, 0.7);
  stroke: none;
}

.lamp__svg .lamp-ticks {
  stroke: var(--c-ink);
  stroke-width: 1.2;
  opacity: 0.55;
}

/* Front of the eye. */
.lamp__svg .lamp-sclera {
  fill: url(#lamp-sclera);
  stroke: none;
}

.lamp__svg .lamp-lid-shadow {
  fill: url(#lamp-lid-shade);
  stroke: none;
}

.lamp__svg .lamp-lens {
  fill: url(#lamp-lens);
  stroke: none;
}

.lamp__svg .lamp-vessel {
  stroke: rgba(196, 72, 52, 0.55);
  stroke-width: 1.1;
}

.lamp__svg .lamp-margin {
  stroke: rgba(232, 240, 250, 0.85);
  stroke-width: 1.8;
}

.lamp__svg .lamp-crease {
  stroke: rgba(232, 240, 250, 0.45);
  stroke-width: 1.6;
}

.lamp__svg .lamp-crease--soft {
  stroke: rgba(232, 240, 250, 0.25);
}

.lamp__svg .lash {
  stroke: rgba(232, 240, 250, 0.75);
  stroke-width: 1.5;
}

.lamp__svg .lash--lower {
  stroke-width: 1.1;
}

/* The pupil closes when the light falls on it, and opens again more slowly. */
.lamp__pupil {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 1.1s var(--ease-out);
}

.lamp__pupil.is-lit {
  transform: scale(0.62);
  transition-duration: 0.35s;
}

/* Inside of the eye: the section, light coming to the macula. */
.lamp__svg .lamp-vitreous {
  fill: url(#lamp-vitreous);
  stroke: none;
}

.lamp__svg .lamp-sclera-band {
  fill: #cdd6e1;
  stroke: none;
}

.lamp__svg .lamp-choroid {
  fill: #6e2c22;
  stroke: none;
}

.lamp__svg .lamp-retina {
  fill: #dc7c55;
  stroke: none;
}

.lamp__svg .lamp-macula {
  fill: #a8432a;
  stroke: none;
}

.lamp__svg .lamp-retina-vessel {
  stroke: #ff8a6a;
  stroke-width: 1.4;
}

.lamp__svg .lamp-nerve {
  fill: #e6d9c0;
  stroke: rgba(232, 240, 250, 0.6);
}

.lamp__svg .lamp-line {
  stroke: rgba(232, 240, 250, 0.72);
  stroke-width: 1.2;
}

.lamp__svg .lamp-line--thin {
  stroke: rgba(232, 240, 250, 0.36);
  stroke-width: 0.9;
}

.lamp__svg .lamp-cornea {
  fill: rgba(168, 200, 243, 0.28);
  stroke: rgba(232, 240, 250, 0.72);
}

.lamp__svg .lamp-ciliary {
  fill: #7a3830;
  stroke: none;
}

.lamp__svg .lamp-iris {
  fill: #5b7391;
  stroke: rgba(232, 240, 250, 0.5);
}

.lamp__svg .lamp-lens {
  fill: rgba(232, 240, 250, 0.2);
  stroke: rgba(232, 240, 250, 0.7);
}

.lamp__svg .lamp-ray {
  stroke: #efb24a;
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
  animation: schema-flow 1s linear infinite;
}

.lamp__svg .lamp-focus {
  fill: #efb24a;
  stroke: none;
}

/* Markers of the subjects, numbered like the list. */
.lamp__marker {
  cursor: pointer;
}

/* The surgeries of the front of the eye in their colours: the dark ink on the paper and under the
   white numbers, the light one on the dark view. */
:is(.lamp__item[data-spot="paupieres"], .lamp__marker[data-marker="paupieres"], .lamp__label[data-label="paupieres"]) {
  --spot-ink: var(--c-rose-ink);
  --spot-light: var(--c-rose);
}

:is(.lamp__item[data-spot="cornee"], .lamp__marker[data-marker="cornee"], .lamp__label[data-label="cornee"]) {
  --spot-ink: var(--c-violet-ink);
  --spot-light: var(--c-violet);
}

:is(.lamp__item[data-spot="cristallin"], .lamp__marker[data-marker="cristallin"], .lamp__label[data-label="cristallin"]) {
  --spot-ink: var(--c-amber-ink);
  --spot-light: var(--c-amber);
}

:is(.lamp__item[data-spot="injection"], .lamp__marker[data-marker="injection"], .lamp__label[data-label="injection"]) {
  --spot-ink: var(--c-teal-ink);
  --spot-light: var(--c-teal);
}

/* The pathologies of the inside of the eye in theirs (see the pathology pages). */
:is(.lamp__item[data-spot="nerf"], .lamp__marker[data-marker="nerf"], .lamp__label[data-label="nerf"]) {
  --spot-ink: var(--c-jade-ink);
  --spot-light: var(--c-jade);
}

:is(.lamp__item[data-spot="vaisseaux"], .lamp__marker[data-marker="vaisseaux"], .lamp__label[data-label="vaisseaux"]) {
  --spot-ink: var(--c-raspberry-ink);
  --spot-light: var(--c-raspberry);
}

:is(.lamp__item[data-spot="macula"], .lamp__marker[data-marker="macula"], .lamp__label[data-label="macula"]) {
  --spot-ink: var(--c-gold-ink);
  --spot-light: var(--c-gold);
}

:is(.lamp__item[data-spot="retine"], .lamp__marker[data-marker="retine"], .lamp__label[data-label="retine"]) {
  --spot-ink: var(--c-plum-ink);
  --spot-light: var(--c-plum);
}

/* On a small view the markers keep a size one can read and touch. */
.lamp__marker-body {
  transform: scale(var(--marker-scale, 1));
}

@media (max-width: 640px) {
  .lamp__figure {
    --marker-scale: 1.5;
  }
}

@media (max-width: 420px) {
  .lamp__figure {
    --marker-scale: 1.8;
  }
}

.lamp__svg .lamp__dot {
  fill: rgba(10, 20, 36, 0.72);
  stroke: var(--spot-light, rgba(255, 255, 255, 0.85));
  stroke-width: 1.6;
  transition: fill 0.3s;
}

.lamp__svg .lamp__halo {
  fill: none;
  stroke: var(--spot-light, var(--c-sky));
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.lamp__num {
  fill: #fff;
  font: 700 15px/1 var(--font-mono);
  text-anchor: middle;
  pointer-events: none;
}

.lamp__marker.is-active .lamp__dot {
  fill: var(--spot-ink, var(--c-blue));
}

.lamp__marker.is-active .lamp__halo {
  opacity: 1;
}

.lamp__marker.is-active .lamp__halo {
  animation: lamp-halo 1.6s var(--ease-out) infinite;
}

@keyframes lamp-halo {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }

  to {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* Name of the structure under the light. */
.lamp__labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lamp__label {
  position: absolute;
  top: var(--y);
  left: var(--x);
  padding: 0.35em 0.65em;
  border-radius: var(--pill);
  background: var(--spot-ink, var(--c-blue));
  color: #fff;
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--tx, -50%), calc(-100% - 1.6rem));
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}

/* Near the edge of the view, the name of the structure stays inside it. */
.lamp__label--end {
  --tx: -88%;
}

.lamp__label.is-shown {
  opacity: 1;
  transform: translate(var(--tx, -50%), calc(-100% - 1.9rem));
}

.lamp__label--below {
  transform: translate(var(--tx, -50%), 1.6rem);
}

.lamp__label--below.is-shown {
  transform: translate(var(--tx, -50%), 1.9rem);
}

/* The pause of the guided tour, under the title of the list (it also starts the tour again). */
.lamp__play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 2.75rem;
  margin: -0.5rem 0 1.25rem;
  padding: 0 1rem 0 0.85rem;
  border: 1.5px solid var(--c-line-2);
  border-radius: 999px;
  background: none;
  color: var(--c-ink);
  font: 700 0.9375rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.lamp__play:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.lamp__play:active {
  scale: 0.97;
}

.lamp__play .icon--play,
.lamp__play-label--play,
.lamp__play.is-paused .icon--pause,
.lamp__play.is-paused .lamp__play-label--pause {
  display: none;
}

.lamp__play.is-paused .icon--play {
  display: block;
}

.lamp__play.is-paused .lamp__play-label--play {
  display: inline;
}

.lamp__view.is-paused .lamp__halo {
  animation-play-state: paused;
}

/* The list of the subjects of each view. */
.lamp__title {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font: 560 clamp(2rem, 1.4rem + 2vw, 3.25rem)/1.05 var(--font-display);
  letter-spacing: -0.015em;
}

.lamp__kicker {
  color: var(--c-blue);
  font: 500 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lamp__list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-ink);
  list-style: none;
}

.lamp__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 1.15rem 0.25rem 1.2rem;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
  text-decoration: none;
  transition: color 0.3s;
}

.lamp__item-num {
  display: grid;
  grid-row: span 3;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: 0.15rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 0.9rem/1 var(--font-mono);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.lamp__name {
  font: 560 clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem)/1.15 var(--font-display);
}

.lamp__part {
  margin-top: 0.3rem;
  color: var(--spot-ink, var(--c-blue));
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lamp__text {
  margin-top: 0.45rem;
  color: var(--c-ink-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.lamp__item > .icon {
  grid-column: 3;
  grid-row: 1 / span 3;
  align-self: center;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--spot-ink, var(--c-blue));
  transition: transform 0.4s var(--ease-out);
}

.lamp__item:is(:hover, :focus-visible, .is-active) {
  color: var(--spot-ink, var(--c-blue));
}

.lamp__item:is(:hover, :focus-visible, .is-active) .lamp__item-num {
  border-color: var(--spot-ink, var(--c-blue));
  background: var(--spot-ink, var(--c-blue));
  color: #fff;
}

@media (hover: hover) and (pointer: fine) {
  .lamp__item:hover > .icon {
    transform: translateX(0.3rem);
  }
}

@media (max-width: 960px) {
  .lamp__view,
  .lamp__view--inside {
    grid-template-columns: minmax(0, 1fr);
  }

  .lamp__view--inside .lamp__figure {
    order: 0;
  }
}


/* The views come alive (lamp.js, site.js). Each subject plays its gesture when it comes under the
   light (its first moments fit in the three seconds the tour gives it), and goes on while the light
   stays on it. Everything rests with the view: off screen, tour paused, or the visitor gone (.is-alive). */
.lamp__view:not(.is-alive) .lamp__svg * {
  animation-play-state: paused;
}

.lamp__pupil {
  animation: lamp-hippus 4.6s ease-in-out infinite;
}

@keyframes lamp-hippus {
  50% {
    scale: 0.92;
  }
}

.lamp__svg :is(.lamp-zone, .lamp-ripples, .lamp-shots, .lamp-fog, .lamp-iol, .lamp-scan, .lamp-needle, .lamp-push, .lamp-drusen, .lamp-pulses, .lamp-bleeds, .lamp-detach, .lamp-signals, .lamp-disc-ring, .lamp-shower, .lamp-flash, .lamp-bloom) {
  opacity: 0;
}

.lamp__svg :is(.lamp-shots circle, .lamp-scan, .lamp-ripples circle, .lamp-disc-ring, .lamp-bleeds circle, .lamp-drusen circle, .lamp-bloom) {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes lamp-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes lamp-pop {
  from {
    opacity: 0;
    scale: 0;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

/* 1. Eyelids: a slow double blink (site.js); the fold draws itself again and the lashes take the
   colour of the eyelids. */
.lamp__svg :is(.lash, .lamp-crease--upper) {
  transition: stroke 0.6s;
}

.lamp__figure[data-active="paupieres"] :is(.lash, .lamp-crease--upper) {
  stroke: var(--c-rose);
}

.lamp__figure[data-active="paupieres"] .lamp-crease--upper {
  stroke-dasharray: 1;
  animation: lamp-draw 1.3s var(--ease-out) 0.2s both;
}

/* 2. Cornea: the laser shots, from the centre outward, inside the turning ring of the eye tracker. */
.lamp__svg .lamp-shots circle {
  fill: #fff;
  stroke: var(--c-violet);
  stroke-width: 2.5;
}

.lamp__svg .lamp-scan {
  stroke: var(--c-violet);
  stroke-width: 2;
  stroke-dasharray: 3 7;
}

.lamp__svg .lamp-zone {
  fill: rgba(196, 181, 253, 0.2);
  stroke: rgba(196, 181, 253, 0.55);
  stroke-width: 1;
}

.lamp__figure[data-active="cornee"] .lamp-zone {
  opacity: 1;
  animation: lamp-zone 1.2s ease-out 0.2s both;
}

@keyframes lamp-zone {
  from {
    opacity: 0;
  }
}

.lamp__figure[data-active="cornee"] .lamp-shots {
  opacity: 1;
}

.lamp__figure[data-active="cornee"] .lamp-shots circle {
  animation: lamp-shot 1.1s var(--ease-out) calc(0.25s + var(--k) * 0.04s) both;
}

.lamp__figure[data-active="cornee"] .lamp-scan {
  opacity: 0.9;
  animation: lamp-scan 4s linear infinite;
}

@keyframes lamp-shot {
  0% {
    opacity: 0;
    scale: 2.6;
  }

  18% {
    opacity: 1;
    scale: 1;
  }

  65% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    scale: 0.7;
  }
}

@keyframes lamp-scan {
  to {
    rotate: 360deg;
  }
}

/* 3. Lens: the clouded lens clears while the implant unfolds in its place, and stays. */
.lamp__svg .lamp-fog {
  fill: url(#lamp-fog);
  stroke: none;
}

.lamp__svg .lamp-iol :is(circle, path) {
  stroke: var(--c-amber);
  stroke-width: 2.4;
  stroke-dasharray: 1;
}

.lamp__svg .lamp-iol .lamp-iol__optic {
  fill: rgba(240, 194, 122, 0.2);
}

.lamp__figure[data-active="cristallin"] .lamp-fog {
  animation: lamp-fog 2.8s ease-in-out both;
}

.lamp__figure[data-active="cristallin"] .lamp-iol {
  animation: lamp-iol 1.6s var(--ease-out) 0.7s both;
}

.lamp__figure[data-active="cristallin"] .lamp-iol > * {
  animation: lamp-draw 1.2s var(--ease-out) 0.7s both;
}

@keyframes lamp-fog {
  0% {
    opacity: 0;
  }

  20%,
  45% {
    opacity: 1;
  }

  85%,
  100% {
    opacity: 0;
  }
}

@keyframes lamp-iol {
  from {
    opacity: 0;
    rotate: -80deg;
    scale: 0.55;
  }

  to {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
  }
}

/* 4. White of the eye: the needle comes to it, the medicine goes in, rings spread, the needle leaves. */
.lamp__svg .lamp-needle__shaft {
  stroke: #eef3f8;
  stroke-width: 1.6;
}

.lamp__svg .lamp-needle__hub {
  fill: var(--c-teal);
  stroke: none;
}

.lamp__svg .lamp-needle__barrel {
  fill: rgba(232, 240, 250, 0.16);
  stroke: rgba(232, 240, 250, 0.7);
  stroke-width: 1.2;
}

.lamp__svg .lamp-ripples circle {
  stroke: var(--c-teal);
  stroke-width: 1.5;
}

.lamp__svg .lamp-ripples .lamp-drop {
  fill: var(--c-teal);
  stroke: none;
}

.lamp__figure[data-active="injection"] .lamp-needle {
  animation: lamp-needle 2.6s var(--ease-in-out) both;
}

.lamp__figure[data-active="injection"] .lamp-ripples {
  opacity: 1;
}

.lamp__figure[data-active="injection"] .lamp-ripples circle:not(.lamp-drop) {
  animation: lamp-ripple 1.4s ease-out calc(1s + var(--k) * 0.28s) both;
}

.lamp__figure[data-active="injection"] .lamp-ripples .lamp-drop {
  animation: lamp-drop 1.6s ease-out 0.9s both;
}

@keyframes lamp-needle {
  0% {
    opacity: 0;
    translate: -48px 0;
  }

  14% {
    opacity: 1;
  }

  38%,
  64% {
    translate: 0 0;
  }

  90% {
    opacity: 1;
    translate: -44px 0;
  }

  100% {
    opacity: 0;
    translate: -48px 0;
  }
}

@keyframes lamp-ripple {
  from {
    opacity: 0.95;
    scale: 0.15;
  }

  to {
    opacity: 0;
    scale: 1;
  }
}

@keyframes lamp-drop {
  0% {
    opacity: 0;
    scale: 0.3;
  }

  25% {
    opacity: 0.9;
    scale: 1;
  }

  100% {
    opacity: 0;
    scale: 1.6;
  }
}

/* 5. Optic nerve: the pressure pushes on the disc, signals run along the fibres toward the brain. */
.lamp__svg .lamp-push path {
  stroke: var(--c-jade);
  stroke-width: 2.8;
}

.lamp__svg .lamp-signals path {
  stroke: var(--c-jade);
  stroke-width: 3.4;
  stroke-dasharray: 0.08 0.18;
}

.lamp__svg .lamp-disc-ring {
  stroke: var(--c-jade);
  stroke-width: 2;
}

.lamp__figure[data-active="nerf"] :is(.lamp-push, .lamp-signals) {
  opacity: 1;
}

.lamp__figure[data-active="nerf"] .lamp-push path {
  animation: lamp-push 1.1s ease-in-out calc(var(--k) * 0.16s) infinite both;
}

.lamp__figure[data-active="nerf"] .lamp-signals {
  animation: lamp-zone 0.6s ease-out both;
}

.lamp__figure[data-active="nerf"] .lamp-signals path {
  animation: lamp-run 0.9s linear calc(var(--k) * -0.3s) infinite;
}

.lamp__figure[data-active="nerf"] .lamp-disc-ring {
  animation: lamp-ring 1.6s ease-out 0.2s infinite both;
}

@keyframes lamp-push {
  0% {
    opacity: 0;
    translate: -6px 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    translate: 5px 0;
  }
}

@keyframes lamp-run {
  to {
    stroke-dashoffset: -0.26;
  }
}

@keyframes lamp-ring {
  from {
    opacity: 0.95;
    scale: 0.5;
  }

  to {
    opacity: 0;
    scale: 1.9;
  }
}

/* 6. Vessels: the blood beats along them, from the disc outward, and small haemorrhages appear. */
.lamp__svg :is(.lamp-retina-vessel, .lamp-macula, .lamp-nerve) {
  transition: stroke 0.5s, fill 0.5s;
}

.lamp__figure[data-active="vaisseaux"] .lamp-retina-vessel {
  stroke: var(--c-raspberry);
  animation: lamp-vessel 0.85s ease-in-out infinite;
}

@keyframes lamp-vessel {
  30% {
    stroke-width: 3.2;
  }
}

.lamp__figure[data-active="nerf"] .lamp-nerve {
  stroke: var(--c-jade);
}

.lamp__figure[data-active="macula"] .lamp-macula {
  fill: #c9922e;
}

.lamp__svg .lamp-pulses path {
  stroke: var(--c-raspberry);
  stroke-width: 3.4;
  stroke-dasharray: 0.07 0.17;
}

.lamp__svg .lamp-bleeds circle {
  fill: var(--c-raspberry);
  stroke: none;
}

.lamp__figure[data-active="vaisseaux"] :is(.lamp-pulses, .lamp-bleeds) {
  opacity: 1;
}

.lamp__figure[data-active="vaisseaux"] .lamp-pulses {
  animation: lamp-zone 0.6s ease-out both;
}

.lamp__figure[data-active="vaisseaux"] .lamp-pulses path {
  animation: lamp-beat 0.85s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

.lamp__figure[data-active="vaisseaux"] .lamp-bleeds circle {
  animation: lamp-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.6s + var(--k) * 0.22s) both;
}

@keyframes lamp-beat {
  to {
    stroke-dashoffset: -0.24;
  }
}

/* 7. Macula: the light comes to a point on it, drusen gather beneath it. */
.lamp__svg .lamp-bloom {
  fill: url(#lamp-bloom);
  stroke: none;
}

.lamp__svg .lamp-drusen circle {
  fill: var(--c-gold);
  stroke: none;
}

.lamp__svg .lamp-ray {
  transition: stroke 0.6s;
}

.lamp__figure[data-active="macula"] .lamp-drusen {
  opacity: 1;
}

.lamp__figure[data-active="macula"] .lamp-bloom {
  animation: lamp-bloom 1.6s ease-out 0.2s infinite both;
}

.lamp__figure[data-active="macula"] .lamp-drusen circle {
  animation: lamp-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1s + var(--k) * 0.18s) both;
}

.lamp__figure[data-active="macula"] .lamp-ray {
  stroke: var(--c-gold);
}

@keyframes lamp-bloom {
  0% {
    opacity: 0;
    scale: 0.3;
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    scale: 1.5;
  }
}

/* 8. Retina: a flash of light, a shower of floaters, and the retina lifts off the wall. */
.lamp__svg .lamp-detach {
  fill: rgba(220, 176, 230, 0.22);
  stroke: var(--c-plum);
  stroke-width: 2;
}

.lamp__svg .lamp-shower circle {
  fill: var(--c-plum);
  stroke: none;
}

.lamp__svg .lamp-flash {
  stroke: #fff;
  stroke-width: 3;
}

.lamp__figure[data-active="retine"] .lamp-shower {
  opacity: 1;
}

.lamp__figure[data-active="retine"] .lamp-flash {
  animation: lamp-flash 0.45s ease-out 0.25s 2 both;
}

.lamp__figure[data-active="retine"] .lamp-shower circle {
  animation: lamp-fall 2s ease-in calc(0.5s + var(--k) * 0.11s) both;
}

.lamp__figure[data-active="retine"] .lamp-detach {
  animation: lamp-detach 2.4s var(--ease-in-out) 0.4s both;
}

@keyframes lamp-flash {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes lamp-fall {
  0% {
    opacity: 0;
    translate: 0 -8px;
  }

  20% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    translate: 0 30px;
  }
}

@keyframes lamp-detach {
  0% {
    opacity: 0;
    d: var(--flat);
  }

  15% {
    opacity: 1;
    d: var(--flat);
  }

  70%,
  100% {
    opacity: 1;
    d: var(--lifted);
  }
}

/* The inside of the eye lives on its own (lamp.js): the light comes in and is brought to a point on
   the fovea, a spark; the image leaves from the macula to the optic disc and along the nerve; the
   heart beats in the vessels and the choroid (all in one cycle of three seconds, a beat under one). */
.lamp__svg .lamp-photons path {
  stroke: #ffe6b3;
  stroke-width: 3.6;
  stroke-dasharray: 0.035 1.2;
  stroke-dashoffset: 0.035;
  animation: lamp-photon 3s linear infinite;
}

.lamp__svg .lamp-photons--glow path {
  stroke: #efb24a;
  stroke-width: 10;
  opacity: 0.3;
}

@keyframes lamp-photon {
  0% {
    stroke-dashoffset: 0.035;
  }

  50%,
  100% {
    stroke-dashoffset: -1;
  }
}

.lamp__svg .lamp-spark {
  fill: url(#lamp-spark);
  stroke: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: lamp-spark 3s ease-out infinite;
}

@keyframes lamp-spark {
  0%,
  47% {
    opacity: 0;
    scale: 0.4;
  }

  54% {
    opacity: 1;
    scale: 1.1;
  }

  78%,
  100% {
    opacity: 0;
    scale: 1.5;
  }
}

.lamp__svg .lamp-vision path {
  stroke: #6cc0ff;
  stroke-width: 3.2;
  stroke-dasharray: 0.06 1.2;
  stroke-dashoffset: 0.06;
  animation: lamp-vision-out 3s linear infinite;
}

.lamp__svg .lamp-vision .lamp-vision__main {
  animation-name: lamp-vision;
}

@keyframes lamp-vision {
  0%,
  52% {
    stroke-dashoffset: 0.06;
  }

  96%,
  100% {
    stroke-dashoffset: -1;
  }
}

@keyframes lamp-vision-out {
  0%,
  62% {
    stroke-dashoffset: 0.06;
  }

  96%,
  100% {
    stroke-dashoffset: -1;
  }
}

.lamp__svg .lamp-retina-vessel {
  animation: lamp-heart 0.86s ease-out calc(var(--k, 0) * 0.05s) infinite;
}

@keyframes lamp-heart {
  12% {
    stroke: #ffc2b0;
    stroke-width: 2.6;
  }

  45% {
    stroke-width: 1.4;
  }
}

.lamp__svg .lamp-choroid {
  animation: lamp-choroid 0.86s ease-out infinite;
}

@keyframes lamp-choroid {
  12% {
    fill: #8c3a2c;
  }
}

/* The small movements of the eye (site.js, --turn), the markers with it; the floaters follow late,
   and swing a little past. */
.lamp__svg :is(.lamp__globe, .lamp__markers, .lamp-floaters) {
  rotate: var(--turn, 0deg);
  transform-origin: 318px 300px;
}

.lamp__svg :is(.lamp__globe, .lamp__markers) {
  transition: rotate 0.18s cubic-bezier(0.25, 0.9, 0.3, 1);
}

.lamp__svg .lamp-floaters {
  transition: rotate 1.6s cubic-bezier(0.3, 1.6, 0.45, 1) 0.08s;
}

/* Always, a few floaters drift in the vitreous. */
.lamp__svg .lamp-floaters > * {
  fill: rgba(215, 228, 248, 0.26);
  stroke: rgba(215, 228, 248, 0.45);
  stroke-width: 1;
}

.lamp__svg .lamp-floaters > :is(path, .lamp-floater--ring) {
  fill: none;
}

.lamp-floaters > :nth-child(4) {
  animation: lamp-drift-b 19s ease-in-out -6s infinite;
}

.lamp-floaters > :nth-child(5) {
  animation: lamp-drift-a 21s ease-in-out -9s infinite;
}

.lamp-floaters > :nth-child(1) {
  animation: lamp-drift-a 13s ease-in-out infinite;
}

.lamp-floaters > :nth-child(2) {
  animation: lamp-drift-b 17s ease-in-out infinite;
}

.lamp-floaters > :nth-child(3) {
  animation: lamp-drift-c 15s ease-in-out infinite;
}

@keyframes lamp-drift-a {
  50% {
    translate: 22px 16px;
  }
}

@keyframes lamp-drift-b {
  50% {
    translate: -18px -20px;
  }
}

@keyframes lamp-drift-c {
  50% {
    translate: 14px -12px;
  }
}

/* ---------- Home: glasses, with a reading chart brought into focus by a lens ---------- */

.glasses {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.glasses__text .section-title {
  margin-bottom: 1.5rem;
}

.glasses__text > p:not(.label) {
  max-width: 34rem;
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.glasses__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.chart {
  --cx: 50%;
  --cy: 45%;
  --cr: 0px;
  position: relative;
  padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-paper);
  box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-soft);
  cursor: crosshair;
  touch-action: pan-y;
}

.chart__layer {
  display: grid;
  gap: 0.6em;
}

.chart__layer--blur {
  filter: blur(4px);
  opacity: 0.85;
}

.chart__layer--sharp {
  position: absolute;
  inset: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--cr) - 1px), transparent var(--cr));
  mask: radial-gradient(circle at var(--cx) var(--cy), #000 calc(var(--cr) - 1px), transparent var(--cr));
}

.chart__line {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
}

.chart__line span:first-child {
  color: var(--c-ink-3);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

.chart__line--1 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.8rem); }
.chart__line--2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.chart__line--3 { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem); }
.chart__line--4 { font-size: 1.2rem; font-weight: 460; }
.chart__line--5 { font-size: 1rem; font-weight: 480; }
.chart__line--6 { font-size: 0.875rem; font-weight: 500; }

.chart__lens {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--cr) * 2);
  height: calc(var(--cr) * 2);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(calc(var(--cpx, 0px) - var(--cr)), calc(var(--cpy, 0px) - var(--cr)));
  box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 9px rgba(13, 26, 43, 0.06), 0 26px 50px -22px rgba(13, 26, 43, 0.6);
}

.chart__hint {
  position: absolute;
  right: 1.25rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-ink-3);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .glasses {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Glasses page: "Mieux avec le 1 ou le 2 ?" (phoropter.js, site.js) ---------- */
/* The refractor, drawn in lines on a light body; each window is a button showing the letters
   through its lens, more or less blurred (--blur). Choosing turns the dials (--turn) and closes
   the windows for an instant, as the lenses change with a click. */
.phoropter {
  display: grid;
  justify-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-self: center;
}

.phoropter__question {
  color: var(--c-ink);
  font: 560 clamp(1.8rem, 1.2rem + 2vw, 2.8rem)/1.05 var(--font-display);
  letter-spacing: -0.015em;
  text-align: center;
}

.phoropter__question span {
  color: var(--c-blue);
}

.phoropter__device {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 640 / 380;
}

.phoropter__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: var(--c-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.phoropter__body {
  fill: var(--c-light);
  stroke-width: 2;
}

.phoropter__seam,
.phoropter__rest {
  stroke: var(--c-ink-3);
  stroke-width: 1.2;
}

.phoropter__stem {
  stroke-width: 2.4;
}

.phoropter__housing {
  fill: var(--c-paper-2);
}

.phoropter__rim {
  stroke-width: 2.4;
}

.phoropter__tick {
  stroke: var(--c-ink-3);
  stroke-width: 1.2;
}

.phoropter__mark {
  fill: var(--c-blue);
  stroke: none;
}

.phoropter__knob rect {
  fill: var(--c-paper-2);
}

.phoropter__knob path {
  stroke: var(--c-ink-3);
  stroke-width: 1;
}

.phoropter__dial {
  rotate: calc(var(--turn, 0) * 40deg);
  transition: rotate 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Arriving, the dials come round and the body draws itself. */
.js .phoropter[data-reveal]:not(.is-visible) .phoropter__dial {
  rotate: -120deg;
}

.js .phoropter[data-reveal] .phoropter__svg [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .phoropter[data-reveal].is-visible .phoropter__svg [pathLength] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out) 0.15s;
}

.phoropter__lens {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: calc(140 / 640 * 100%);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--c-ink);
  cursor: pointer;
  container-type: inline-size;
}

.phoropter__window {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--c-ink), inset 0 10px 26px rgba(13, 26, 43, 0.16);
  transition: box-shadow 0.4s var(--ease-out);
}

/* The instant of the click: the window closes and opens on the new lens. */
.phoropter__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  opacity: 0;
  pointer-events: none;
}

.phoropter.is-turning .phoropter__window::after {
  animation: phoropter-shutter 0.45s var(--ease-in-out);
}

@keyframes phoropter-shutter {
  40%,
  60% {
    opacity: 0.88;
  }
}

.phoropter__chart {
  display: grid;
  justify-items: center;
  gap: 4cqi;
  color: var(--c-ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1;
  filter: blur(var(--blur, 5px));
  transition: filter 0.7s var(--ease-out);
}

.phoropter__row {
  font-size: calc((21 - var(--row) * 3.6) * 1cqi);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.phoropter__num {
  position: absolute;
  bottom: -19%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  font: 600 1.25rem/1 var(--font-mono);
  translate: -50% 0;
  transition: background-color 0.3s, scale 0.3s var(--ease-out);
}

.phoropter__lens:active .phoropter__num {
  scale: 0.92;
}

.phoropter__lens:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 6px;
}

.phoropter__lens.is-picked .phoropter__num {
  animation: phoropter-pick 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes phoropter-pick {
  40% {
    scale: 1.3;
  }
}

@media (hover: hover) and (pointer: fine) {
  .phoropter__lens:hover .phoropter__window {
    box-shadow: inset 0 0 0 2px var(--c-ink), 0 0 0 6px rgba(29, 79, 163, 0.22), inset 0 10px 26px rgba(13, 26, 43, 0.16);
  }

  .phoropter__lens:hover .phoropter__num {
    background: var(--c-blue);
  }
}

/* Sharp: the windows light up in blue. */
.phoropter.is-sharp .phoropter__window {
  box-shadow: inset 0 0 0 2px var(--c-blue), 0 0 0 6px rgba(29, 79, 163, 0.25), 0 0 46px rgba(29, 79, 163, 0.35);
}

.phoropter.is-sharp .phoropter__num {
  background: var(--c-blue);
}

.phoropter__foot {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  text-align: center;
}

.phoropter__status {
  min-height: 1.6em;
  color: var(--c-ink-2);
  font-size: 1.125rem;
}

.phoropter.is-sharp .phoropter__status {
  color: var(--c-blue);
  font-weight: 700;
}

.phoropter__rounds {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.phoropter__rounds li {
  width: 2.25rem;
  height: 6px;
  border-radius: 3px;
  background: var(--c-line-2);
  transition: background-color 0.4s;
}

.phoropter__rounds li.is-done {
  background: var(--c-blue);
}

.phoropter__again {
  min-height: 2.75rem;
  padding: 0 1.25rem;
  border: 1.5px solid var(--c-ink);
  border-radius: 999px;
  background: none;
  color: var(--c-ink);
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.phoropter__again[hidden] {
  display: none;
}

.phoropter__again:hover {
  background: var(--c-ink);
  color: #fff;
}

.phoropter__again:active {
  scale: 0.97;
}

/* Phones: the numbers go under their windows, which stay readable. */
@media (max-width: 600px) {
  .phoropter__num {
    bottom: -36%;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.0625rem;
  }

  .phoropter__foot {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .phoropter__dial,
  .phoropter__chart {
    transition: none;
  }

  .js .phoropter[data-reveal] .phoropter__svg [pathLength] {
    stroke-dashoffset: 0;
    transition: none;
  }

  .phoropter.is-turning .phoropter__window::after {
    animation: none;
  }
}

/* ---------- Home: doctors ---------- */

.doctors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.doctor-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
  color: var(--c-ink);
}

.doctor-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-sand);
}

.doctor-card__media img {
  object-position: 50% 22%;
  transition: scale 1.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .doctor-card:hover .doctor-card__media img {
    scale: 1.04;
  }
}

.doctor-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  align-items: start;
  gap: 0.45rem;
}

.doctor-card__name {
  font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem);
  font-weight: 560;
  letter-spacing: -0.015em;
}

.doctor-card__name a {
  color: inherit;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.45s var(--ease-out);
}

.doctor-card__name a:hover {
  background-size: 100% 1.5px;
}

.doctor-card__role {
  color: var(--c-blue);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doctor-card__bio {
  max-width: 46ch;
  margin-bottom: 0.9rem;
  color: var(--c-ink-2);
}

@media (max-width: 640px) {
  .doctors {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Inner pages: header ---------- */

.page-head {
  position: relative;
  padding: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem)) 0 clamp(3rem, 6vw, 6rem);
  overflow: hidden;
}

.page-head .drawing {
  --drawing-pos: 92% 30%;
  --drawing-opacity: 0.06;
  --drawing-size: auto 160%;
}

.page-head__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

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

/* Editorial page head: the title runs across the page, the introduction answers it on the right. */
.page-head__grid--single > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 6vw, 6rem);
}

.page-head__grid--single > div > * {
  grid-column: 1 / -1;
}

.page-head__grid--single > div > :is(.page-head__lead, .steps-nav) {
  grid-column: 2;
}

.page-head__grid--single .page-head__lead {
  margin-top: clamp(2rem, 4.5vw, 3.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-2);
}

@media (max-width: 860px) {
  .page-head__grid--single > div > :is(.page-head__lead, .steps-nav) {
    grid-column: 1 / -1;
  }
}

/* A living layer (living.js) over the drawing of a few heads, in fine lines of the colour of the
   page, which draws itself on arrival and then answers the pointer. */
.living {
  --living-ink: var(--op-ink, var(--c-blue));
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.living.is-live {
  opacity: 1;
}



/* On arrival a slit of light crosses the head of the page and the faint drawing appears behind it,
   as when the slit lamp sweeps an eye. The beam passes behind the text. */
.page-head > .container {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .page-head .drawing {
    animation: drawing-sweep 2.2s var(--ease-in-out) 0.1s both;
  }

  .page-head::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, var(--beam, rgba(29, 79, 163, 0.55)) 22%, var(--beam, rgba(29, 79, 163, 0.55)) 78%, transparent);
    box-shadow: 0 0 32px 10px var(--beam-glow, rgba(29, 79, 163, 0.1));
    opacity: 0;
    pointer-events: none;
    animation: beam-sweep 2.2s var(--ease-in-out) 0.1s both;
  }

  html[data-hero="night"] .page-head {
    --beam: rgba(168, 200, 243, 0.7);
    --beam-glow: rgba(168, 200, 243, 0.14);
  }
}

@keyframes drawing-sweep {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}

/* The beam moves with the edge of the drawing being revealed (same duration and curve). */
@keyframes beam-sweep {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  10% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translateX(100vw);
  }
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin: 0 0 2rem;
  padding: 0;
  color: var(--c-ink-2);
  font-size: 1rem;
  list-style: none;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 0.6rem;
  color: var(--c-line-2);
}

/* Inline: the padding widens the touch zone to 44px without moving the line. */
.breadcrumb a {
  padding-block: 0.75rem;
  color: var(--c-ink-2);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--c-blue);
  text-decoration: underline;
}

.page-title {
  max-width: 14ch;
  font-size: var(--fs-title);
  font-weight: 560;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

/* Beside a picture, the title takes the width of its column. */
.page-head__grid:not(.page-head__grid--single) .page-title {
  max-width: none;
  font-size: clamp(2.9rem, 1.4rem + 4.6vw, 6.4rem);
}

.page-title--md {
  max-width: 20ch;
  font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4.6rem);
  line-height: 1.02;
}

.page-head__lead {
  max-width: 40rem;
  margin-top: 1.75rem;
  color: var(--c-ink);
  font: 500 clamp(1.4rem, 1.12rem + 0.85vw, 1.9rem)/1.36 var(--font-display);
}

.page-head__lead strong {
  font-weight: 560;
}

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.page-head__visual {
  position: relative;
}

@media (max-width: 900px) {
  .page-head__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-head__visual .loupe {
    width: min(100%, 380px);
  }
}

@media (max-width: 400px) {
  .page-title {
    font-size: clamp(2.2rem, 0.9rem + 7vw, 2.7rem);
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ---------- Text + media split ---------- */

.split__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
}

.split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.split__media--tall {
  aspect-ratio: 4 / 5;
}

/* ---------- Inner pages: the lead on the left, the rest of the introduction on the right ---------- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 1.25rem clamp(2rem, 6vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--c-line);
}

.intro-grid--flush {
  margin-top: 0;
}

.intro-grid .lead {
  color: var(--c-ink);
  font: 500 clamp(1.45rem, 1.1rem + 1vw, 2rem)/1.32 var(--font-display);
}

@media (max-width: 860px) {
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Long text ---------- */

.prose {
  max-width: 44rem;
}

.prose :where(p, ul, ol, figure, h3, h4, div, section) + :where(p, ul, ol, figure, h3, h4, div, section) {
  margin-top: 1em;
}

.prose :where(h2, h3) + * {
  margin-top: 0.9rem;
}

.article-section > h2:first-child {
  margin-top: 0;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.95rem, 1.4rem + 1.7vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.prose h3 {
  margin-top: 1.8em;
  font-size: var(--fs-h3);
}

.prose > h2:first-child,
.prose > h3:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  color: var(--c-ink-2);
}

.prose .lead {
  color: var(--c-ink);
}

.prose ul {
  display: grid;
  gap: 0.6rem;
  padding: 0;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: 1.6rem;
}

.prose ul li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.2rem;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--c-blue);
  border-radius: 50%;
}

.prose a {
  color: var(--c-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-top: 2rem;
  padding: 1.15rem 1.35rem;
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r);
  background: var(--c-paper-2);
  color: var(--c-ink-2);
}

.note .icon {
  margin-top: 0.2rem;
  color: var(--c-blue);
}

.note a {
  color: var(--c-blue);
}

/* ---------- Pathologies: an atlas, its index on the left, one plate shown at a time ---------- */

.page-head--atlas .page-title {
  max-width: none;
}

.page-head--atlas {
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.atlas {
  position: relative;
  padding-bottom: var(--section-y);
}

.atlas__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5.5rem);
}

/* The index: the four diseases in large print, the one shown marked in its colour. */
.atlas__index {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
}

.atlas__tabs {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-ink);
  list-style: none;
}

.atlas__tab {
  position: relative;
  display: grid;
  grid-template-columns: 2.9rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  padding: clamp(0.9rem, 1.6vw, 1.25rem) 0.25rem;
  border-bottom: 1px solid var(--c-line-2);
  color: var(--c-ink-3);
  text-decoration: none;
  transition: color 0.3s, padding 0.5s var(--ease-out);
}

.atlas__tab::before {
  content: "";
  position: absolute;
  inset: 0.65rem auto 0.65rem 0;
  width: 4px;
  border-radius: 4px;
  background: var(--patho-ink, var(--c-blue));
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out);
}

.atlas__num {
  color: inherit;
  font: 560 1.35rem/1 var(--font-display);
  transition: color 0.3s;
}

.atlas__tab:hover .atlas__num {
  color: var(--patho-ink, var(--c-blue));
}

.atlas__name {
  font: 560 clamp(1.7rem, 1.1rem + 1.6vw, 2.9rem)/1.04 var(--font-display);
  letter-spacing: -0.02em;
}

.atlas__tab:hover,
.atlas__tab[aria-selected="true"] {
  color: var(--c-ink);
}

.atlas__tab[aria-selected="true"] {
  padding-left: 1rem;
}

.atlas__tab[aria-selected="true"]::before {
  transform: scaleY(1);
}

.atlas__tab[aria-selected="true"] .atlas__num {
  color: var(--patho-ink, var(--c-blue));
}

.atlas__urgent {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  color: var(--c-alert-text);
  font-weight: 700;
  text-decoration: none;
}

.atlas__urgent:hover {
  text-decoration: underline;
}

/* A plate: the name very large, the animated drawing, then the text in two columns. */
.atlas__plate + .atlas__plate {
  margin-top: var(--section-y);
}

.is-tabs .atlas__plate + .atlas__plate {
  margin-top: 0;
}

.atlas__plate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.plate__title {
  font-size: clamp(3rem, 1rem + 6.4vw, 8.5rem);
  font-weight: 560;
  line-height: 0.92;
  letter-spacing: -0.035em;
}

/* "Planche I": the small word in mono, the numeral large, like an anatomy atlas. */
.plate__num {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--patho-ink, var(--c-blue));
  font: 560 clamp(2.4rem, 1.6rem + 2.4vw, 4.4rem)/0.9 var(--font-display);
  letter-spacing: 0.02em;
}

.plate__num span {
  color: var(--c-ink-2);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.atlas__plate-body {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}

.plate__text {
  color: var(--c-ink);
  font: 500 var(--fs-lead)/1.45 var(--font-display);
}

.plate__note {
  padding: 1.1rem 1.35rem;
  border-left: 4px solid var(--patho-ink, var(--c-blue));
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--c-paper-2);
  color: var(--c-ink);
  line-height: 1.5;
}

.plate__note strong {
  display: block;
  margin-bottom: 0.2rem;
}

.plate__note--urgent {
  border-left-color: var(--c-alert);
  background: var(--c-alert-soft);
}

.atlas__plate .link-arrow {
  margin-top: 1.4rem;
  font-size: 1.125rem;
}

/* Changing plates: the next one comes into focus. */
@media (prefers-reduced-motion: no-preference) {
  .is-tabs .atlas__plate.is-shown {
    animation: plate-in 0.6s var(--ease-out);
  }
}

@keyframes plate-in {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
  }
}

.plates-others {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr);
  align-items: start;
  gap: 1rem clamp(2rem, 5vw, 5.5rem);
  margin-top: var(--section-y);
  padding-top: clamp(1.75rem, 3vw, 2.75rem);
  border-top: 1px solid var(--c-line-2);
}

.plates-others .plate__num {
  grid-column: 1 / -1;
  margin: 0;
}

.plates-others__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.plates-others p:not(.plate__num) {
  color: var(--c-ink-2);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

/* Phones and tablets: the index becomes a grid of four buttons above the plate. */
@media (max-width: 900px) {
  .atlas__grid,
  .plates-others,
  .atlas__plate-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .atlas__index {
    position: static;
  }

  .atlas__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    border-top: 0;
  }

  .atlas__tab {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--c-line-2);
    border-radius: var(--r);
  }

  .atlas__tab::before {
    display: none;
  }

  .atlas__tab[aria-selected="true"] {
    padding-left: 1rem;
    border-color: var(--patho-ink, var(--c-blue));
    background: var(--patho-ink, var(--c-blue));
    color: var(--c-light);
  }

  .atlas__tab[aria-selected="true"] .atlas__num {
    color: var(--patho-accent, var(--c-sky));
  }

  .atlas__name {
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.6rem);
  }
}

/* Warning signs: two ruled columns, the phone numbers on a dark panel. */
.urgent {
  background: var(--c-sand);
}

.urgent__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.urgent-card {
  padding-top: 1.5rem;
  border-top: 4px solid var(--c-alert);
}

.urgent-card--week {
  border-top-color: var(--c-sun);
}

.urgent-card__when {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  color: var(--c-alert-text);
  font: 600 var(--fs-label)/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.urgent-card--week .urgent-card__when {
  color: var(--c-ink-2);
}

/* A slow beacon on the urgent column. */
.urgent-card--now .urgent-card__when::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-alert);
}

/* It pulses twice once the card is on screen. */
.urgent-card--now.is-visible .urgent-card__when::before {
  animation: beacon 2.4s ease-out 0.6s 2;
}

@keyframes beacon {
  0% {
    box-shadow: 0 0 0 0 rgba(181, 72, 43, 0.6);
  }

  70%,
  100% {
    box-shadow: 0 0 0 10px rgba(181, 72, 43, 0);
  }
}

.urgent-card__list {
  display: grid;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.urgent-card__list li + li {
  padding-top: 1.75rem;
  border-top: 1px solid var(--c-line-2);
}

.urgent-card__sign {
  font: 600 clamp(1.4rem, 1.15rem + 0.8vw, 1.9rem)/1.25 var(--font-display);
}

.urgent-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.8rem;
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
}

.urgent-card__link .icon {
  transition: transform 0.4s var(--ease-out);
}

.urgent-card__link:hover {
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .urgent-card__link:hover .icon {
    transform: translateX(4px);
  }
}

.urgent__call {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-xl);
  background: var(--c-night);
  color: #fff;
}

.urgent__call-title {
  margin-bottom: 0.5rem;
  color: var(--c-on-night);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.urgent__phone {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font: 600 clamp(1.5rem, 1.2rem + 0.8vw, 2rem)/1.1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s;
}

.urgent__phone span {
  color: var(--c-on-night);
  font: 500 1rem/1.2 var(--font-body);
}

.urgent__phone:hover {
  background: rgba(255, 255, 255, 0.14);
}

.urgent__after {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  color: var(--c-on-night);
  font-size: 1rem;
  line-height: 1.5;
}

@media (max-width: 1080px) {
  .urgent__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .urgent__call {
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .urgent__call-title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .urgent__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Surgeries: a dark operating-room page, one chapter per operation ---------- */

html[data-hero="night"] body {
  background: var(--c-night);
  color: #fff;
}

html[data-hero="night"] .site-footer {
  box-shadow: inset 0 1px 0 var(--c-line-dark);
}

/* On the night the dark blue focus ring is too faint (2.4:1): light blue instead (11:1). */
html[data-hero="night"] :focus-visible {
  outline-color: var(--c-sky);
}

.bloc {
  color: #fff;
}

.page-head--bloc .drawing {
  --drawing-color: var(--c-sky);
  --drawing-opacity: 0.08;
}

.bloc .breadcrumb ol {
  color: rgba(255, 255, 255, 0.6);
}

.bloc .breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
}

.bloc .breadcrumb a:hover {
  color: #fff;
}

.bloc .breadcrumb li + li::before {
  color: rgba(255, 255, 255, 0.3);
}

.bloc .section-title em,
.bloc .page-title em {
  color: var(--c-sky);
}

.bloc .section-head__lead {
  color: var(--c-on-night);
}

/* The four procedures, like an operating schedule. */
.bloc-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--c-line-dark);
  list-style: none;
}

.bloc-index a {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  height: 100%;
  padding: 1.15rem 1.25rem 1.25rem 0;
  color: #fff;
  font: 560 clamp(1.25rem, 1.05rem + 0.55vw, 1.6rem)/1.2 var(--font-display);
  text-decoration: none;
  transition: color 0.3s;
}

.bloc-index a span {
  color: var(--chapter-accent, var(--c-sky));
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.bloc-index a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 1.25rem;
  height: 3px;
  background: var(--chapter-accent, var(--c-sky));
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.bloc-index a:hover {
  color: var(--chapter-accent, var(--c-sky));
}

@media (hover: hover) and (pointer: fine) {
  .bloc-index a:hover::before {
    transform: scaleX(1);
  }
}

@media (max-width: 700px) {
  .bloc-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The entry whose part the eye shows (eye3d.js): in its colour, its line drawn. */
.bloc-index a.is-lit {
  color: var(--chapter-accent, var(--c-sky));
}

.bloc-index a.is-lit::before {
  transform: scaleX(1);
}

/* The eye in three dimensions behind the head of the page (eye3d.js), on the right and partly
   beyond the edge of small screens; it appears once drawn. Without WebGL it is simply absent. */
.eye3d {
  position: absolute;
  top: 0;
  right: -10vw;
  bottom: 0;
  z-index: 0;
  width: min(62vw, 1100px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}

.eye3d.is-ready {
  opacity: 1;
}

.eye3d__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Phones: further on the edge and a little fainter, behind the title and the index. */
@media (max-width: 760px) {
  .eye3d {
    right: -40vw;
    width: 125vw;
  }

  .eye3d.is-ready {
    opacity: 0.8;
  }
}

/* 404: the eye over the loupe, which it replaces once drawn. */
.page-head__visual--eye {
  position: relative;
}

.eye3d--look {
  inset: -6%;
  right: -6%;
  width: auto;
}

.page-head__visual--eye .loupe {
  transition: opacity 0.8s var(--ease-out);
}

.page-head__visual--eye:has(.eye3d.is-ready) .loupe {
  opacity: 0;
}

/* Its pause button, under the index on the right, like the other players of the page. */
.eye3d__play {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: fit-content;
  min-height: 2.75rem;
  margin: clamp(1.25rem, 2.5vw, 2rem) 0 0 auto;
  padding: 0 1.15rem 0 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(10, 20, 36, 0.4);
  color: #fff;
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.eye3d__play[hidden] {
  display: none;
}

.eye3d__play:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-night);
}

.eye3d__play:active {
  scale: 0.97;
}

.eye3d__play .icon--play,
.eye3d__play-label--play,
.eye3d__play.is-paused .icon--pause,
.eye3d__play.is-paused .eye3d__play-label--pause {
  display: none;
}

.eye3d__play.is-paused .icon--play {
  display: block;
}

.eye3d__play.is-paused .eye3d__play-label--play {
  display: inline;
}

/* The same index, compact, at the top of the screen while the chapters are read (site.js shows it
   once the index above is passed and marks the chapter on screen). It takes no room in the page:
   its height is given back by its negative margin. Below the header when the header shows. */
.chapters {
  --chapter-nav-h: 3.5rem;
}

.chapter-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--chapter-nav-h);
  margin-bottom: calc(-1 * var(--chapter-nav-h));
  border-bottom: 1px solid var(--c-line-dark);
  background: var(--c-night);
  visibility: hidden;
  opacity: 0;
  translate: 0 -100%;
  transition: translate 0.55s var(--ease-out), opacity 0.3s, visibility 0s 0.55s;
}

.chapter-nav.is-shown {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: translate 0.55s var(--ease-out), opacity 0.3s;
}

body:has(.site-header:not(.is-hidden)) .chapter-nav.is-shown {
  translate: 0 var(--header-h);
}

.chapter-nav .container {
  height: 100%;
}

.chapter-nav__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 100%;
  padding-right: 0.75rem;
  color: rgba(255, 255, 255, 0.72);
  font: 560 1.0625rem/1.15 var(--font-display);
  text-decoration: none;
  transition: color 0.3s;
}

.chapter-nav__num {
  color: var(--chapter-accent);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.1em;
}

/* The chapter on screen: in white, underlined with its colour. */
.chapter-nav__link::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: -1px;
  left: 0;
  height: 3px;
  background: var(--chapter-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

.chapter-nav__link:hover,
.chapter-nav__link.is-current {
  color: #fff;
}

.chapter-nav__link.is-current::after {
  transform: scaleX(1);
}

.chapter-nav__short {
  display: none;
}

/* Below the nav and the header, the top of a chapter or of a focused control stays visible. */
html:has(.chapter-nav) {
  scroll-padding-top: calc(var(--header-h) + 3.5rem + 1rem);
}

@media (max-width: 1100px) {
  .chapter-nav__long {
    display: none;
  }

  .chapter-nav__short {
    display: inline;
  }
}

/* Phones: the number above the name, the four names spread over the width. */
@media (max-width: 760px) {
  .chapter-nav__list {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
  }

  .chapter-nav__link {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    padding-right: 0;
    font-size: 0.95rem;
  }

  .chapter-nav__link::after {
    right: 0;
  }
}

/* Operations: one chapter each: the title with its introduction beside it, then the drawing that
   plays by itself beside its steps (site.js), and the way to the intervention to close it. Each
   chapter has its colour and, behind it, a large drawing of the operation (atmos.js); the chapters
   alternate their sides, with much air between them. */
.chapter {
  --film-duration: 3s;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.chapter__head {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9.5rem) clamp(2.25rem, 4vw, 4rem);
}

.chapter__head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.75rem clamp(2rem, 6vw, 7rem);
}

/* "01 / 04", small, in the colour of the operation, after a short line. */
.chapter__num {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  color: var(--chapter-accent);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.chapter__num::before {
  content: "";
  width: 2.25rem;
  height: 2px;
  background: currentColor;
}

.chapter__num > span:last-child {
  color: rgba(255, 255, 255, 0.55);
}

.chapter__title {
  color: #fff;
  font: 560 clamp(2.75rem, 1.5rem + 3.6vw, 5.5rem)/0.92 var(--font-display);
  letter-spacing: -0.025em;
}

.chapter__kicker {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--chapter-accent);
  font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.45rem);
  letter-spacing: -0.005em;
}

/* The introduction beside the title, in one column, on a line of the colour of the operation. */
.chapter__intro {
  display: grid;
  gap: 0.6rem;
  max-width: 34rem;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 2px solid var(--chapter-accent);
  color: var(--c-on-night);
  font-size: 1.125rem;
  line-height: 1.55;
}

.chapter__intro p {
  margin: 0;
}

.chapter__body {
  position: relative;
  padding-bottom: clamp(5.5rem, 11vw, 11rem);
}

/* Chapters use more of a wide screen than the text pages. */
:is(.chapter, .chapter-nav) .container {
  width: min(100% - 2 * var(--gutter), 1600px);
}

.chapter__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 5rem);
}

/* Every other chapter, the drawing on the right. */
:is(.chapter--laser, .chapter--ivt) .chapter__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
}

:is(.chapter--laser, .chapter--ivt) .chapter__scene {
  order: 2;
}

/* The drawing at its own proportions, no taller than the screen. */
.chapter__scene {
  position: relative;
  display: grid;
  place-items: center;
}

.chapter__scene .schema {
  width: min(100%, 64vh * 4 / 3);
  width: min(100%, 64svh * 4 / 3);
}

/* A soft light behind each operation, of its own colour. */
.chapter__scene::before {
  content: "";
  position: absolute;
  inset: 4% 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--chapter-glow), transparent);
  opacity: 0.9;
  pointer-events: none;
}

/* Each operation has its own colour, shared by its entry in the index, its numbers, its steps, its
   light and the drawing behind it: amber for the lens, violet for the laser, rose for the eyelids,
   teal for the retina. The accents keep a contrast of 9:1 or more on the night. */
.chapter--cataracte,
:is(.bloc-index, .chapter-nav) a[href="#cataracte"] {
  --chapter-accent: var(--c-amber);
  --chapter-tint: rgba(240, 194, 122, 0.09);
  --chapter-glow: rgba(239, 178, 74, 0.2);
}

.chapter--laser,
:is(.bloc-index, .chapter-nav) a[href="#laser"] {
  --chapter-accent: var(--c-violet);
  --chapter-tint: rgba(196, 181, 253, 0.09);
  --chapter-glow: rgba(150, 140, 255, 0.24);
}

.chapter--paupieres,
:is(.bloc-index, .chapter-nav) a[href="#paupieres"] {
  --chapter-accent: var(--c-rose);
  --chapter-tint: rgba(243, 169, 156, 0.09);
  --chapter-glow: rgba(240, 160, 150, 0.18);
}

.chapter--ivt,
:is(.bloc-index, .chapter-nav) a[href="#ivt"] {
  --chapter-accent: var(--c-teal);
  --chapter-tint: rgba(128, 212, 217, 0.09);
  --chapter-glow: rgba(93, 190, 200, 0.2);
}

/* The side: the pause, the steps, and at the bottom the end of the chapter. */
.chapter__side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 0;
}

/* Every step, on a rail that takes the colour of the operation as the steps go by; only the titles
   show, the step playing opens its text and a ring around its number shows the time left in it. */
.chapter__steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-step {
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr);
  gap: 0 1rem;
  width: 100%;
  padding: 0.7rem 0.9rem 0.75rem 0.6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.4s, background-color 0.4s;
}

/* The piece of rail down to the next step: from under the ring of this number (top padding 0.7rem
   + number 2.3rem + 0.4rem) to above the ring of the next one (its top padding is 0.7rem). */
.chapter-step::before {
  content: "";
  position: absolute;
  top: 3.4rem;
  bottom: -0.3rem;
  left: calc(0.6rem + 2.3rem / 2 - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--c-line-dark);
  transition: background-color 0.4s;
}

.chapter__steps li:last-child .chapter-step::before {
  display: none;
}

.chapter-step.is-done::before {
  background: var(--chapter-accent);
}

.chapter-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: var(--c-night);
  color: rgba(255, 255, 255, 0.7);
  font: 700 0.8rem/1 var(--font-mono);
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, scale 0.4s var(--ease-out);
}

/* The ring just outside the number: its box is 5px larger on each side than the border box of the
   number (border 1.5px, hence -6.5px from the padding box). It fills in the time of the step. */
.chapter-step__ring {
  position: absolute;
  top: -6.5px;
  left: -6.5px;
  width: calc(100% + 13px);
  max-width: none;
  height: calc(100% + 13px);
  overflow: visible;
  rotate: -90deg;
  fill: none;
  stroke: var(--chapter-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.chapter.is-timing .chapter-step.is-active .chapter-step__ring {
  opacity: 1;
  animation: chapter-ring var(--film-duration) linear both;
}

@keyframes chapter-ring {
  to {
    stroke-dashoffset: 0;
  }
}

.chapter-step__body {
  padding-top: 0.35rem;
}

.chapter-step__title {
  display: block;
  color: inherit;
  font: 560 clamp(1.1rem, 0.98rem + 0.4vw, 1.4rem)/1.2 var(--font-display);
  transition: translate 0.5s var(--ease-out);
}

/* The text of the step opens under its title while the step plays. */
.chapter-step__more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--ease-out), margin-top 0.55s var(--ease-out);
}

.chapter-step__text {
  display: block;
  min-height: 0;
  overflow: hidden;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.25s;
}

.chapter-step.is-active .chapter-step__more {
  grid-template-rows: 1fr;
  margin-top: 0.4rem;
}

.chapter-step.is-active .chapter-step__text {
  opacity: 1;
  transition: opacity 0.45s 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .chapter-step:hover {
    background: rgba(255, 255, 255, 0.035);
    color: rgba(255, 255, 255, 0.85);
  }

  .chapter-step:not(.is-active):hover .chapter-step__title {
    translate: 4px 0;
  }

  .chapter-step:not(.is-active):hover .chapter-step__num {
    scale: 1.08;
  }
}

.chapter-step.is-done .chapter-step__num {
  border-color: var(--chapter-accent);
  color: var(--chapter-accent);
}

.chapter-step.is-active {
  background: var(--chapter-tint);
  color: var(--c-on-night);
}

.chapter-step.is-active .chapter-step__title {
  color: #fff;
}

.chapter-step.is-active .chapter-step__num {
  border-color: var(--chapter-accent);
  background: var(--chapter-accent);
  color: var(--c-night);
}

/* Pause and play, said in words beside the icon. */
.chapter__play {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 1.15rem 0 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.chapter__play:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-night);
}

.chapter__play .icon-play,
.chapter__play-label--play,
.chapter:not(.is-playing) .chapter__play .icon-pause,
.chapter:not(.is-playing) .chapter__play-label--pause {
  display: none;
}

.chapter:not(.is-playing) .chapter__play .icon-play {
  display: block;
}

.chapter:not(.is-playing) .chapter__play-label--play {
  display: inline;
}

/* The end of the chapter: the intervention page, its journey and its sheets. */
.chapter__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  margin-top: auto;
  padding-top: clamp(1.25rem, 2.2vw, 2.25rem);
}

.chapter__doc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--chapter-accent);
  font-weight: 700;
  text-decoration: none;
}

.chapter__doc .icon {
  transition: translate 0.4s var(--ease-out);
}

.chapter__doc:hover {
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .chapter__doc:hover .icon {
    translate: 0 -2px;
  }
}

/* The text of the step playing under the drawing: phones and tablets only. */
.chapter__caption {
  display: none;
}

/* The drawing behind the chapter (atmos.js): large, faint, in the colour of the operation, on the
   side of the steps. It is drawn when the chapter arrives, then drifts with the scroll (--drift,
   from site.js) and leans away from the pointer (--ax, --ay), like a far plane. */
.chapter__atmo {
  --spin: 10deg;
  position: absolute;
  z-index: -1;
  top: clamp(-6rem, -4vw, -2rem);
  right: -12vw;
  width: min(66vw, 1050px);
  aspect-ratio: 1;
  color: var(--chapter-accent);
  opacity: 0.17;
  pointer-events: none;
  translate: calc(var(--ax, 0) * -46px) calc(var(--drift, 0) * -120px + var(--ay, 0) * -46px);
  rotate: calc(var(--drift, 0) * var(--spin));
  transition: translate 0.9s var(--ease-out), rotate 0.9s var(--ease-out);
}

:is(.chapter--laser, .chapter--ivt) .chapter__atmo {
  right: auto;
  left: -12vw;
}

.chapter__atmo--paupieres {
  --spin: 2deg;
}

.chapter__atmo--ivt {
  --spin: 0deg;
}

.chapter__atmo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.chapter__atmo .atmo__strong {
  stroke-width: 2.8;
}

.chapter__atmo .atmo__dash {
  stroke-dasharray: 8 10;
}

.chapter__atmo :is(.atmo__shot, .atmo__grain) {
  fill: currentColor;
  stroke: none;
}

/* Drawn line after line, the shots fired from the centre outward, the grains carried away. */
.js .chapter__atmo [pathLength] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .chapter__atmo :is(.atmo__dash, .atmo__shot, .atmo__grain) {
  opacity: 0;
}

.js .chapter__atmo :is(.atmo__shot, .atmo__blink) {
  transform-box: fill-box;
  transform-origin: center;
}

.js .chapter__atmo.is-drawn [pathLength] {
  animation: atmo-draw 2.4s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

.js .chapter__atmo.is-drawn .atmo__dash {
  animation: atmo-fade 1.6s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 0.09s);
}

.js .chapter__atmo.is-drawn .atmo__shot {
  animation: atmo-shot 0.6s var(--ease-out) forwards;
  animation-delay: calc(0.3s + var(--i, 0) * 5ms);
}

.js .chapter__atmo.is-drawn .atmo__grain {
  animation: atmo-grain 3.2s var(--ease-out) forwards;
  animation-delay: calc(0.4s + var(--i, 0) * 12ms);
}

/* The eye of the folds blinks once, when it is drawn. */
.js .chapter__atmo.is-drawn .atmo__blink {
  animation: atmo-blink 0.7s var(--ease-in-out) 3.1s;
}

@keyframes atmo-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes atmo-fade {
  to {
    opacity: 1;
  }
}

@keyframes atmo-shot {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  40% {
    opacity: 1;
    transform: scale(1.7);
  }

  100% {
    opacity: 0.75;
    transform: none;
  }
}

@keyframes atmo-grain {
  0% {
    opacity: 0;
    transform: none;
  }

  20% {
    opacity: 0.95;
  }

  100% {
    opacity: 0.55;
    transform: translate(var(--dx), var(--dy));
  }
}

@keyframes atmo-blink {
  45%,
  55% {
    transform: scaleY(0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter__atmo {
    translate: none;
    rotate: none;
    transition: none;
  }

  .js .chapter__atmo.is-drawn :is([pathLength], .atmo__dash, .atmo__shot, .atmo__grain, .atmo__blink) {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .js .chapter__atmo .atmo__grain {
    opacity: 0.55;
    transform: translate(var(--dx), var(--dy));
  }
}

/* Phones and tablets: the introduction under the title. */
@media (max-width: 999px) {
  .chapter__head-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .chapter__intro {
    max-width: 40rem;
  }
}

/* Below 1200px the steps beside the drawing would be too narrow: the drawing, the text of its step,
   then the titles of all the steps (their texts stay for screen readers), centred together. */
@media (max-width: 1199px) {
  .chapter__grid,
  :is(.chapter--laser, .chapter--ivt) .chapter__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  :is(.chapter--laser, .chapter--ivt) .chapter__scene {
    order: 0;
  }

  .chapter__scene .schema {
    width: min(100%, 56vh * 4 / 3);
    width: min(100%, 56svh * 4 / 3);
  }

  .chapter__body {
    padding-bottom: clamp(4.5rem, 14vw, 7rem);
  }

  .chapter__side {
    justify-self: center;
    gap: 1.25rem;
    width: min(100%, 46rem);
  }

  /* All the texts in the same place: the block is as tall as the longest, nothing below moves. */
  .chapter__caption {
    display: grid;
    padding-left: 1rem;
    border-left: 3px solid var(--chapter-accent);
  }

  .chapter__caption-step {
    grid-area: 1 / 1;
    margin: 0;
    color: var(--c-on-night);
    font-size: 1.0625rem;
    line-height: 1.5;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0s 0.2s;
  }

  /* The new text comes once the previous one has gone, they never overlap. */
  .chapter__caption-step.is-active {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.35s 0.2s;
  }

  .chapter__caption-title {
    display: block;
    margin-bottom: 0.35rem;
    color: #fff;
    font: 560 1.3rem/1.2 var(--font-display);
  }

  .chapter-step__more,
  .chapter-step.is-active .chapter-step__more {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .chapter-step {
    align-items: center;
  }

  .chapter-step__body {
    padding-top: 0;
  }

  .chapter-step__title {
    font-size: 1.125rem;
  }

  .chapter__end {
    padding-top: 0.5rem;
  }
}

/* Phones: the drawing behind the chapter, larger than the screen and fainter. */
@media (max-width: 760px) {
  .chapter__atmo {
    top: -1rem;
    right: -45vw;
    width: 125vw;
    opacity: 0.13;
  }

  :is(.chapter--laser, .chapter--ivt) .chapter__atmo {
    left: -45vw;
  }
}

/* Dark drawings (this page): no frame, labels and insets toned for the night. */
.schema--dark .schema__stage {
  overflow: visible;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.schema--dark .schema__label {
  background: rgba(8, 18, 31, 0.8);
}

.schema--dark .schema__label--warn {
  background: #b8432f;
}

.schema--dark .schema__label--accent {
  background: var(--c-blue);
}

.schema--dark .schema__svg .inset__halo {
  fill: #0d1b30;
  stroke: rgba(255, 255, 255, 0.12);
}

.schema--dark .schema__svg .part-lens {
  fill: rgba(168, 200, 243, 0.14);
}

.schema--dark .schema__svg .part-nerve {
  fill: url(#sd-nerve-dark);
}

.schema--dark .schema__svg .part-ciliary {
  fill: url(#sd-ciliary-dark);
}

.schema--dark .schema__svg :is(.paper, .field-bg) {
  fill: #12233c;
}

.schema--dark .schema__svg .sclera-face {
  fill: #dfe5ee;
}

.schema--dark .schema__svg .stroma {
  fill: rgba(232, 240, 250, 0.14);
  stroke: rgba(232, 240, 250, 0.4);
}

.schema--dark .schema__svg :is(.epithelium, .endothelium) {
  fill: rgba(168, 200, 243, 0.3);
  stroke: rgba(232, 240, 250, 0.4);
}

.schema--dark .schema__svg :is(.bowman, .descemet) {
  fill: rgba(168, 200, 243, 0.55);
}

.schema--dark .schema__svg .brow {
  stroke: rgba(214, 200, 184, 0.3);
}

.schema--dark .schema__svg .hair {
  stroke: rgba(226, 212, 196, 0.6);
}

.schema--dark .schema__svg .lash {
  stroke: rgba(232, 240, 250, 0.78);
}

.schema--dark .schema__svg .crease {
  stroke: rgba(232, 240, 250, 0.45);
}

.schema--dark .schema__svg :is(.septum-line, .tarsus) {
  stroke: rgba(232, 240, 250, 0.5);
}

.schema--dark .schema__svg .tarsus {
  fill: rgba(232, 240, 250, 0.12);
}

.schema--dark .schema__svg .retina-band {
  fill: rgba(241, 217, 207, 0.62);
  stroke: rgba(232, 240, 250, 0.4);
}

.schema--dark .schema__svg .rpe-band {
  fill: rgba(150, 104, 72, 0.8);
}

.schema--dark .schema__svg .skin-line {
  stroke: rgba(236, 206, 186, 0.8);
}

/* Where the procedures take place. */
.bloc-where {
  border-top: 1px solid var(--c-line-dark);
}

.where-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.where-item {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--c-sky);
}

.where-item__what {
  color: var(--c-sky);
  font: 500 var(--fs-label)/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.where-item__place {
  margin-top: 1.75rem;
  font: 600 clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem)/1.1 var(--font-display);
  letter-spacing: -0.01em;
}

.where-item__city {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--c-on-night);
}

@media (max-width: 900px) {
  .where-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The map of the places: the routes from Miramas draw themselves one after the other, the clinics
   light up as each route arrives; the place under the pointer in the list lights its own route. */
.where-map {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}

.where-map svg {
  display: block;
  width: 100%;
  max-width: 56rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

.where-map__lake {
  fill: rgba(168, 200, 243, 0.1);
  stroke: rgba(168, 200, 243, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 3 5;
}

.where-map__water {
  fill: rgba(168, 200, 243, 0.6);
  font: 500 13px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.where-map__route {
  fill: none;
  stroke: var(--c-amber);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  transition: stroke-width 0.4s, opacity 0.4s;
}

.where-map__route--laser {
  stroke: var(--c-violet);
}

.where-map__town {
  fill: var(--c-night);
  stroke: #fff;
  stroke-width: 2.5;
}

.where-map__clinic {
  fill: rgba(240, 194, 122, 0.18);
  stroke: var(--c-amber);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.4s;
}

.where-map__clinic--laser {
  fill: rgba(196, 181, 253, 0.18);
  stroke: var(--c-violet);
}

.where-map__name {
  fill: #fff;
  font: 600 17px/1 var(--font-body);
}

@media (prefers-reduced-motion: no-preference) {
  .js .where-map .where-map__route {
    stroke-dashoffset: 1;
  }

  .js .where-map.is-drawn .where-map__route {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.6s var(--ease-in-out), stroke-width 0.4s, opacity 0.4s;
  }

  .js .where-map.is-drawn .where-map__route[data-route="hpp"] {
    transition-delay: 0.35s, 0s, 0s;
  }

  .js .where-map.is-drawn .where-map__route[data-route="axium"] {
    transition-delay: 0.7s, 0s, 0s;
  }

  .js .where-map .where-map__clinic {
    scale: 0;
  }

  .js .where-map.is-drawn .where-map__clinic {
    animation: where-arrive 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
    scale: 1;
  }

  .js .where-map.is-drawn .where-map__clinic[data-place-dot="hpp"] {
    animation-delay: 1.75s;
  }

  .js .where-map.is-drawn .where-map__clinic[data-place-dot="axium"] {
    animation-delay: 2.1s;
  }
}

@keyframes where-arrive {
  from {
    scale: 0;
  }
}

.bloc-where:has(.where-item[data-place]:hover) .where-map__route {
  opacity: 0.3;
}

.bloc-where:has(.where-item[data-place="vignoli"]:hover) [data-route="vignoli"],
.bloc-where:has(.where-item[data-place="hpp"]:hover) [data-route="hpp"],
.bloc-where:has(.where-item[data-place="axium"]:hover) [data-route="axium"] {
  opacity: 1;
  stroke-width: 4.5;
}

.bloc-where:has(.where-item[data-place="vignoli"]:hover) [data-place-dot="vignoli"],
.bloc-where:has(.where-item[data-place="hpp"]:hover) [data-place-dot="hpp"],
.bloc-where:has(.where-item[data-place="axium"]:hover) [data-place-dot="axium"] {
  fill: currentColor;
  scale: 1.35;
}

.where-item {
  transition: border-color 0.4s;
}

.where-item[data-place="axium"] {
  border-top-color: var(--c-violet);
}

.where-item[data-place]:not([data-place="axium"]) {
  border-top-color: var(--c-amber);
}

/* ---------- Intervention pages: the journey, more information, the next intervention ---------- */
/* What matters most comes first: before and after the intervention, the largest button of the page,
   in the colour of the operation; then the information sheets, a smaller light card; then the next
   intervention, a discreet link. */

/* The detailed journey. Its route has one stop per step; the stops come in one after the other
   when the button arrives, and light up under the pointer, where a soft light follows it. */
.journey-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 4vw, 3.5rem);
  margin-top: clamp(2.25rem, 4.5vw, 4rem);
  padding: clamp(2.25rem, 4.5vw, 3.75rem) clamp(1.75rem, 5vw, 4.5rem);
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(125deg, var(--op-ink, var(--c-blue)), color-mix(in srgb, var(--op-ink, var(--c-blue)) 62%, #0d1a2b));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 34px 64px -40px color-mix(in srgb, var(--op-ink, var(--c-blue)) 85%, transparent);
  transition: box-shadow 0.5s var(--ease-out), scale 0.2s var(--ease-out);
}

.journey-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at var(--mx, 86%) var(--my, 18%), color-mix(in srgb, var(--op-accent, var(--c-sky)) 40%, transparent), transparent 52%);
}

.journey-cta:active {
  scale: 0.99;
}

.journey-cta__text {
  display: grid;
  gap: 0.85rem;
}

.journey-cta__kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journey-cta__kicker .icon {
  flex: none;
}

.journey-cta__title {
  font: 560 clamp(2.2rem, 1.3rem + 3.2vw, 4.4rem)/1 var(--font-display);
  letter-spacing: -0.02em;
}

.journey-cta__arrow {
  display: grid;
  place-items: center;
  width: clamp(4.5rem, 7vw, 6rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--op-ink, var(--c-ink));
  transition: transform 0.6s var(--ease-out);
}

.journey-cta__arrow .icon {
  width: 40%;
  height: 40%;
}

.journey-cta__route {
  position: relative;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  height: 16px;
}

.journey-cta__route::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  left: 8px;
  border-top: 2px dashed rgba(255, 255, 255, 0.38);
}

.journey-cta__stop {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: var(--op-ink, var(--c-blue));
  transition: background-color 0.3s, border-color 0.3s, scale 0.35s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 90ms);
}

.js .journey-cta[data-reveal] .journey-cta__stop {
  scale: 0;
}

.js .journey-cta.is-visible .journey-cta__stop {
  scale: 1;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s, border-color 0.3s;
  transition-delay: calc(0.5s + var(--k, 0) * 0.12s);
}

@media (hover: hover) and (pointer: fine) {
  .journey-cta:hover {
    box-shadow: 0 40px 70px -36px color-mix(in srgb, var(--op-ink, var(--c-blue)) 95%, transparent);
  }

  .journey-cta:hover .journey-cta__arrow {
    transform: translateX(8px);
  }

  .js .journey-cta.is-visible:hover .journey-cta__stop {
    border-color: #fff;
    background: #fff;
    scale: 1.3;
    transition-delay: calc(var(--k, 0) * 90ms);
  }
}

@media (max-width: 760px) {
  .journey-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .journey-cta__arrow {
    grid-row: 1;
    justify-self: start;
    width: 3.75rem;
  }
}

/* Pathologies atlas: the large button of each plate, in the colour of its pathology. */
.atlas__plate {
  --op-ink: var(--patho-ink);
  --op-accent: var(--patho-accent);
  --op-glow: var(--patho-glow);
}

.journey-cta--plate {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 3rem);
}

.journey-cta--plate .journey-cta__title {
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3.1rem);
  line-height: 1.04;
}

.journey-cta--plate .journey-cta__arrow {
  width: clamp(3.75rem, 5.5vw, 5rem);
}

.more {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* The information sheets: a light card, smaller than the journey. */
.info-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.2vw, 2.5rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  background: var(--c-paper-2);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color 0.4s;
}

.info-card .drawing {
  --drawing-color: var(--op-ink, var(--c-blue));
  --drawing-opacity: 0.06;
}

/* A soft light of the colour of the operation behind the sheets. */
.info-card::before {
  content: "";
  position: absolute;
  inset: -30% -10% -30% 55%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--op-glow, rgba(127, 178, 240, 0.16)), transparent);
}

.info-card__text {
  display: grid;
  gap: 0.55rem;
  max-width: 34rem;
}

.info-card__kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--op-ink, var(--c-blue));
  font: 600 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.info-card__kicker::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: currentColor;
}

.info-card__title {
  font: 560 clamp(1.45rem, 1.05rem + 1.3vw, 2.2rem)/1.12 var(--font-display);
  letter-spacing: -0.01em;
}

.info-card__meta {
  color: var(--c-ink-2);
  font-size: 1.0625rem;
}

/* The sheets, as small pages stacked: each has a band of the colour of the operation and lines of
   text; under the pointer they fan out like a hand of cards (--k is the place of the sheet in the
   stack, from -1 to 1). */
.info-card__sheets {
  position: relative;
  width: clamp(4.5rem, 6vw, 5.75rem);
  aspect-ratio: 4 / 5;
}

.info-card__sheet {
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  background:
    linear-gradient(var(--op-ink, var(--c-blue)) 0 0) 14% 14% / 46% 6% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(13, 26, 43, 0.14) 7px 9px) 14% 34% / 72% 52% no-repeat,
    #fff;
  box-shadow: 0 14px 24px -16px rgba(13, 26, 43, 0.45);
  transform: translateX(calc(var(--k) * 8px)) rotate(calc(var(--k) * 4deg));
  transform-origin: 50% 110%;
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .info-card:hover {
    border-color: var(--op-ink, var(--c-blue));
  }

  .info-card:hover .info-card__sheet {
    transform: translate(calc(var(--k) * 26px), calc(-5px - var(--k) * var(--k) * -5px)) rotate(calc(var(--k) * 13deg));
  }
}

.info-card__arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  transition: transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .info-card:hover .info-card__arrow {
    transform: translateX(6px);
  }
}

@media (max-width: 760px) {
  .info-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .info-card__sheets {
    display: none;
  }
}

/* The next intervention: a discreet link under the card. */
.next-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-self: end;
  gap: 0.35rem 1rem;
  min-height: 44px;
  padding-block: 0.4rem;
  color: var(--c-ink);
  text-decoration: none;
}

.next-link__label {
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* A block: it travels whole to the title of the next page (cross-page transitions). */
.next-link__title {
  display: block;
  font: 560 clamp(1.3rem, 1.1rem + 0.7vw, 1.7rem)/1.15 var(--font-display);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size 0.45s var(--ease-out), color 0.3s;
}

.next-link .icon {
  align-self: center;
  color: var(--c-blue);
  transition: transform 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .next-link:hover .next-link__title {
    background-size: 100% 2px;
  }

  .next-link:hover .icon {
    transform: translateX(5px);
  }
}

@media (max-width: 760px) {
  .next-link {
    justify-self: start;
  }
}

/* ---------- Pathology articles: table of contents + sections ---------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  align-items: start;
  gap: clamp(2rem, 6vw, 6rem);
}

.article-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 2rem;
}

.article-callout {
  padding: clamp(1.5rem, 3vw, 2.25rem) !important;
  border: 0 !important;
  border-radius: var(--r-xl);
  background: var(--patho-soft, var(--c-blue-soft));
}

.article-callout h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: var(--fs-h3);
}

.article-callout h2 .icon {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--op-ink, var(--c-blue));
}

.article-callout p {
  color: var(--c-ink) !important;
  font-size: 1.1875rem;
}

.article-callout--urgent {
  background: var(--c-alert-soft);
}

.article-callout--urgent h2 .icon {
  color: var(--c-alert-text);
}

.toc__title {
  margin-bottom: 1rem;
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toc ol {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--c-line-2);
  list-style: none;
}

.toc a {
  display: block;
  margin-left: -1px;
  padding: 0.45rem 0 0.45rem 1rem;
  border-left: 2px solid transparent;
  color: var(--c-ink-2);
  text-decoration: none;
  transition: color 0.3s, border-color 0.3s;
}

/* The reading thread (site.js, --read): it fills along the list, its point where the reader is. */
.toc ol {
  position: relative;
}

.toc ol::before,
.toc ol::after {
  content: "";
  position: absolute;
  left: -1.5px;
  pointer-events: none;
}

.toc ol::before {
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--op-ink, var(--c-blue));
  opacity: 0.45;
  transform: scaleY(var(--read, 0));
  transform-origin: top;
}

.toc ol::after {
  top: calc(var(--read, 0) * 100%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -4px;
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  background: var(--op-ink, var(--c-blue));
  box-shadow: 0 0 0 4px var(--op-glow, rgba(29, 79, 163, 0.15));
}

.toc a:hover,
.toc a.is-active {
  border-left-color: var(--op-ink, var(--c-blue));
  color: var(--op-ink, var(--c-blue));
}

.article-section {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-line);
}

.article-section:last-child {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-aside {
    position: static;
    order: -1;
  }
}

/* ---------- Detailed journeys (steps with a continuous line) ---------- */

.steps-nav {
  margin-top: 2rem;
}

ul.steps-nav,
.steps-nav ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--pill);
  color: var(--c-ink);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.steps-nav a:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.steps-nav__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  font: 500 0.8125rem/1 var(--font-mono);
}

.steps-nav a:hover .steps-nav__num {
  background: #fff;
  color: var(--c-ink);
}

.journey {
  --marker: 64px;
  position: relative;
}

.journey__steps {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey__content {
  min-width: 0;
}

.technique-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.technique {
  padding: 1.25rem 1.4rem;
  border-radius: var(--r);
  background: var(--c-paper);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.technique__title {
  margin-bottom: 0.75rem;
  color: var(--c-blue);
  font-size: 1.15rem;
}

.prose .technique > * + * {
  margin-top: 0.7em;
}

/* Grid items line up: the prose flow spacing does not apply between them. */
.prose .technique-grid > * {
  margin-top: 0;
}

@media (max-width: 700px) {
  .technique-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.highlight {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-blue-soft);
  color: var(--c-ink) !important;
  font-weight: 700;
}

/* The line runs from the first marker to the very end of the last step. */
.journey__line {
  position: absolute;
  top: calc(var(--marker) / 2);
  bottom: 0;
  left: calc(var(--marker) / 2 - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--c-line-2);
}

.journey__line span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--op-ink, var(--c-blue));
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
}

.journey__step {
  --step-gap: clamp(1rem, 3vw, 2.5rem);
  position: relative;
  display: grid;
  grid-template-columns: var(--marker) minmax(0, 1fr);
  gap: var(--step-gap);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.journey__marker {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--marker);
  height: var(--marker);
  border: 2px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  font: 500 1rem/1 var(--font-mono);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}

/* The marker of the step reached pops once. */
@media (prefers-reduced-motion: no-preference) {
  .journey__step.is-current .journey__marker {
    animation: marker-pop 0.6s var(--ease-out);
  }
}

@keyframes marker-pop {
  40% {
    transform: scale(1.14);
  }
}

.journey__step.is-current .journey__marker,
.journey__step.is-done .journey__marker {
  border-color: var(--op-ink, var(--c-blue));
  background: var(--op-ink, var(--c-blue));
  color: #fff;
}

.journey__title {
  margin: 0.6rem 0 1.75rem;
  font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Each question of a step is a row: the question, then its answer (beside it on wide screens). */
.journey__card + .journey__card {
  margin-top: 1.25rem;
}

.qa {
  position: relative;
  padding-block: clamp(1.25rem, 2.6vw, 2.1rem);
  border-top: 1px solid var(--c-line);
}

/* Each question is a station on the line of the journey: it lights up when the line reaches it
   (site.js, .is-passed), like the stops of a route. */
.qa::before {
  content: "";
  position: absolute;
  top: calc(clamp(1.25rem, 2.6vw, 2.1rem) + 0.55rem);
  left: calc(-1 * (var(--marker) / 2 + var(--step-gap)) - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-line-2);
  border-radius: 50%;
  background: var(--c-paper);
  transition: background-color 0.4s, border-color 0.4s, box-shadow 0.5s var(--ease-out), scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qa.is-passed::before {
  border-color: var(--op-ink, var(--c-blue));
  background: var(--op-ink, var(--c-blue));
  box-shadow: 0 0 0 6px var(--op-glow, rgba(29, 79, 163, 0.15));
  scale: 1.15;
}

.qa:first-child {
  border-top: 2px solid var(--c-ink);
}

.qa h3 {
  margin-bottom: 0.9rem;
  font: 560 clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem)/1.2 var(--font-display);
  letter-spacing: -0.01em;
}

.qa__answer {
  max-width: 44rem;
}

@media (min-width: 1100px) {
  .qa {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 0 clamp(2rem, 4vw, 4.5rem);
  }

  /* The question stays in view while its answer is read. */
  .qa h3 {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    margin-bottom: 0;
  }
}

@media (max-width: 640px) {
  .journey {
    --marker: 46px;
  }

  .journey__step {
    --step-gap: 0.9rem;
  }
}

/* ---------- Intervention pages: the operation as a short film ---------- */

.film {
  --film-duration: 3s;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--c-night);
  color: #fff;
}

.film .container {
  width: min(100% - 2 * var(--gutter), 1500px);
}

.film__head {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.film__title {
  color: #fff;
  font: 560 clamp(2.4rem, 1.6rem + 2.6vw, 4.25rem)/1 var(--font-display);
  letter-spacing: -0.02em;
}

.film__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.film__scene {
  position: relative;
}

.film__scene::before {
  content: "";
  position: absolute;
  inset: 0 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--op-glow, rgba(127, 178, 240, 0.14)), transparent);
  pointer-events: none;
}

.film__count {
  color: var(--op-accent, var(--c-sky));
  font: 560 clamp(2.6rem, 2rem + 2.2vw, 4.25rem)/1 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
}

.film__count span + span {
  margin-left: 0.15em;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.4em;
}

.film__now-title {
  margin-top: 1rem;
  color: #fff;
  font: 560 clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/1.15 var(--font-display);
  letter-spacing: -0.01em;
}

.film__now-text {
  max-width: 30rem;
  margin-top: 0.85rem;
  color: var(--c-on-night);
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* The text of the step changes with a short fade. */
.film__now > * {
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
}

.film__now.is-changing > * {
  opacity: 0;
  transform: translateY(0.5rem);
  transition-duration: 0.15s;
}

.film__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Pause and play, in words beside the icon, as on the surgeries page. */
.film__play {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 1.15rem 0 0.95rem;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: none;
  color: #fff;
  font: 700 1rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.film__play:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-night);
}

.film__play .icon-play,
.film__play-label--play,
.film:not(.is-playing) .film__play .icon-pause,
.film:not(.is-playing) .film__play-label--pause {
  display: none;
}

.film:not(.is-playing) .film__play .icon-play {
  display: block;
}

.film:not(.is-playing) .film__play-label--play {
  display: inline;
}

/* Phones: the bar is narrow, the icon alone (its name stays for screen readers). */
@media (max-width: 700px) {
  .film__play {
    justify-content: center;
    padding: 0;
  }

  .film__play .film__play-label {
    display: none;
  }
}

/* The players answer the press. */
:is(.chapter__play, .film__play, .schema__play):active {
  scale: 0.97;
}

/* The steps as chapters of the film: a bar fills while a step plays. */
.film__steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.film__step {
  display: grid;
  align-content: start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.64);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s;
}

.film__step:hover {
  color: rgba(255, 255, 255, 0.85);
}

.film__step.is-active {
  color: #fff;
}

.film__progress {
  display: block;
  order: -1;
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
}

.film__progress span {
  display: block;
  height: 100%;
  background: var(--op-accent, var(--c-sky));
  transform: scaleX(0);
  transform-origin: left;
}

.film__step:is(.is-active, .is-done) .film__progress span {
  transform: none;
}

.film.is-timing .film__step.is-active .film__progress span {
  animation: film-progress var(--film-duration) linear both;
}

@keyframes film-progress {
  from {
    transform: scaleX(0);
  }
}

.film__step-num {
  font: 700 0.8rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.film__step-label {
  font-size: 0.9375rem;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .film__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .film__now-text {
    max-width: none;
  }
}

/* Phones: the numbers and their bars are enough, the text of the step is above. */
@media (max-width: 700px) {
  .film__step-label {
    display: none;
  }

  .film__step {
    min-height: 44px;
  }

  .film__steps {
    gap: 0.4rem;
  }
}

.section--after-film {
  padding-top: clamp(2rem, 4vw, 3rem);
}

/* ---------- Journeys: the itinerary, a column per step ---------- */

.itinerary {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-ink);
  list-style: none;
}

/* Its top line draws itself from the left when it comes on screen (site.js). */
@media (prefers-reduced-motion: no-preference) {
  .js .itinerary {
    border-top-color: transparent;
  }

  .js .itinerary::before {
    content: "";
    position: absolute;
    top: -2px;
    right: 0;
    left: 0;
    height: 2px;
    background: var(--c-ink);
    transform-origin: left;
    transition: transform 1.2s var(--ease-in-out);
  }

  .js .itinerary:not(.is-drawn)::before {
    transform: scaleX(0);
  }
}

.itinerary__step a {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  height: 100%;
  padding: 1.5rem 1.5rem 1.75rem 0;
  color: var(--c-ink);
  text-decoration: none;
}

.itinerary__step + .itinerary__step a {
  padding-left: 1.5rem;
  border-left: 1px solid var(--c-line);
}

.itinerary__step a::before {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--op-ink, var(--c-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}

/* The number of the step, small, in the style of the labels, in the colour of the operation. */
.itinerary__num {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--op-ink, var(--c-blue));
  font: 600 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.12em;
}

.itinerary__num::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: currentColor;
}

.itinerary__title {
  font: 560 clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem)/1.2 var(--font-display);
  transition: color 0.3s;
}

.itinerary__topics {
  color: var(--c-ink-3);
  font-size: 1rem;
  line-height: 1.5;
}

.itinerary__step .icon {
  margin-top: 0.3rem;
  color: var(--c-blue);
  transition: transform 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .itinerary__step a:hover::before {
    transform: scaleX(1);
  }
}

.itinerary__step a:hover .itinerary__title {
  color: var(--op-ink, var(--c-blue));
}

@media (hover: hover) and (pointer: fine) {
  .itinerary__step a:hover .icon {
    transform: translate(0.25rem, 0.1rem);
  }
}

@media (max-width: 800px) {
  .itinerary {
    grid-template-columns: minmax(0, 1fr);
  }

  .itinerary__step a,
  .itinerary__step + .itinerary__step a {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    padding: 1.1rem 0;
    border-left: 0;
  }

  .itinerary__step + .itinerary__step a {
    border-top: 1px solid var(--c-line);
  }

  .itinerary__step a > :not(.itinerary__num) {
    grid-column: 2;
  }

  .itinerary__num {
    grid-row: span 3;
    align-self: start;
    margin-top: 0.4rem;
  }
}

.journey-nav {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

/* Pathologies: each its colour, on its page, its plate of the atlas and its schema. */
main[data-patho="glaucome"],
#glaucome,
.atlas__tab[data-atlas-tab="glaucome"],
.schema--glaucome {
  --patho-ink: var(--c-jade-ink);
  --patho-accent: var(--c-jade);
  --patho-glow: rgba(110, 200, 160, 0.18);
  --patho-soft: #d9efe4;
}

main[data-patho="diabete"],
#diabete,
.atlas__tab[data-atlas-tab="diabete"],
.schema--retinopathie {
  --patho-ink: var(--c-raspberry-ink);
  --patho-accent: var(--c-raspberry);
  --patho-glow: rgba(240, 140, 180, 0.16);
  --patho-soft: #f6dde7;
}

main[data-patho="dmla"],
#dmla,
.atlas__tab[data-atlas-tab="dmla"],
.schema--dmla {
  --patho-ink: var(--c-gold-ink);
  --patho-accent: var(--c-gold);
  --patho-glow: rgba(240, 205, 90, 0.2);
  --patho-soft: #f3e8bf;
}

main[data-patho="decollement"],
#decollement,
.atlas__tab[data-atlas-tab="decollement"],
.schema--decollement {
  --patho-ink: var(--c-plum-ink);
  --patho-accent: var(--c-plum);
  --patho-glow: rgba(200, 150, 220, 0.18);
  --patho-soft: #eedff2;
}

/* On their pages, the colour of the pathology takes the place of the blue: labels, kickers, the
   table of contents, the callout, the drawing of the head. */
main[data-patho] {
  --op-ink: var(--patho-ink);
  --op-accent: var(--patho-accent);
  --op-glow: var(--patho-glow);
}

main[data-patho] .page-head .drawing {
  --drawing-color: var(--patho-ink);
}

.schema:is(.schema--glaucome, .schema--retinopathie, .schema--dmla, .schema--decollement) {
  --schema-accent: var(--patho-ink);
  --schema-accent-soft: color-mix(in srgb, var(--patho-ink) 14%, transparent);
}

/* Intervention and detail pages: the colour of their operation (see the surgeries page). */
main[data-op="cataracte"] {
  --op-ink: var(--c-amber-ink);
  --op-accent: var(--c-amber);
  --op-glow: rgba(239, 178, 74, 0.16);
}

main[data-op="laser"] {
  --op-ink: var(--c-violet-ink);
  --op-accent: var(--c-violet);
  --op-glow: rgba(150, 140, 255, 0.2);
}

main[data-op="paupieres"] {
  --op-ink: var(--c-rose-ink);
  --op-accent: var(--c-rose);
  --op-glow: rgba(240, 160, 150, 0.15);
}

main[data-op="ivt"] {
  --op-ink: var(--c-teal-ink);
  --op-accent: var(--c-teal);
  --op-glow: rgba(93, 190, 200, 0.16);
}

/* ---------- Downloads ---------- */

/* Index reading, like the charter: the topic on the left, its documents on the right. */
.doc-group {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
  align-items: start;
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--c-line-2);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.docs > .doc-group:first-child {
  border-top: 1px solid var(--c-ink);
}

.doc-group__title {
  margin-bottom: 0.6rem;
  font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.doc-group__text {
  color: var(--c-ink-3);
  font-size: var(--fs-small);
}

/* The documents of the four operations carry their colour, as on the surgeries page. */
.doc-group[id="cataracte"] {
  --doc-accent: var(--c-amber-ink);
}

.doc-group[id="laser"] {
  --doc-accent: var(--c-violet-ink);
}

.doc-group[id="paupieres"] {
  --doc-accent: var(--c-rose-ink);
}

.doc-group[id="ivt"] {
  --doc-accent: var(--c-teal-ink);
}

/* The grid of Amsler watches the macula: the gold of the macula, as on the diseases page. */
.doc-group[id="amsler"] {
  --doc-accent: var(--c-gold-ink);
}

.doc-group:is([id="cataracte"], [id="laser"], [id="paupieres"], [id="ivt"], [id="amsler"]) .doc-group__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1rem;
  background: var(--doc-accent);
}

.doc__label {
  display: grid;
  gap: 0.35rem;
  font: 560 clamp(1.3rem, 1.12rem + 0.55vw, 1.6rem)/1.22 var(--font-display);
  transition: color 0.3s;
}

.doc__meta {
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .doc-group {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The documents of a topic as a little fan of printed sheets, one sheet per document: it opens when
   the topic comes into view, and the sheet of the document under the pointer rises from it. The grid
   of Amsler is drawn on its own sheet. */
.doc-stack {
  --mid: calc((var(--n, 1) - 1) / 2);
  display: flex;
  height: 6.6rem;
  margin-top: 1.9rem;
  padding: 0.9rem 0 0 0.5rem;
}

.doc-stack__sheet {
  position: relative;
  flex: none;
  width: 4rem;
  height: 5.2rem;
  margin-right: -2.1rem;
  border: 1px solid var(--c-line-2);
  border-radius: 3px;
  background:
    linear-gradient(var(--doc-accent, var(--c-blue)) 0 0) 0.55rem 0.7rem / 1.6rem 3px no-repeat,
    repeating-linear-gradient(var(--c-line-2) 0 1px, transparent 1px 7px) 0.55rem 1.5rem / calc(100% - 1.1rem) 2.95rem no-repeat,
    #fff;
  box-shadow: 0 12px 20px -14px rgba(13, 26, 43, 0.55);
  transform-origin: 50% 135%;
  rotate: calc((var(--i) - var(--mid)) * 11deg - 3deg);
  transition: rotate 0.8s var(--ease-out), translate 0.5s var(--ease-out), box-shadow 0.5s;
}

/* The grid: white lines on black, and the point to look at in the middle. */
.doc-stack--grid .doc-stack__sheet {
  background:
    radial-gradient(circle, #fff 0 2px, transparent 2.5px) 50% 58% / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(255, 255, 255, 0.75) 1px, transparent 1px) 0.4rem 0.95rem / 5px 5px,
    linear-gradient(rgba(255, 255, 255, 0.75) 1px, transparent 1px) 0.4rem 0.95rem / 5px 5px,
    #fff;
  background-clip: border-box;
}

.doc-stack--grid .doc-stack__sheet::before {
  content: "";
  position: absolute;
  inset: 0.9rem 0.4rem 0.4rem;
  z-index: -1;
  background: #141414;
}

.doc-stack--grid .doc-stack__sheet {
  isolation: isolate;
}

.doc-group:has(.doc-list > li:nth-child(1) .doc:is(:hover, :focus-visible)) .doc-stack__sheet:nth-child(1),
.doc-group:has(.doc-list > li:nth-child(2) .doc:is(:hover, :focus-visible)) .doc-stack__sheet:nth-child(2),
.doc-group:has(.doc-list > li:nth-child(3) .doc:is(:hover, :focus-visible)) .doc-stack__sheet:nth-child(3) {
  z-index: 1;
  translate: 0 -1rem;
  rotate: 0deg;
  box-shadow: 0 24px 30px -16px rgba(13, 26, 43, 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .js .doc-group__head.is-visible .doc-stack__sheet {
    animation: doc-fan 1.1s var(--ease-out) calc(0.35s + var(--i) * 0.09s) backwards;
  }
}

@keyframes doc-fan {
  from {
    rotate: 0deg;
    translate: calc((var(--mid) - var(--i)) * 1.9rem) 0.6rem;
  }
}

@media (max-width: 760px) {
  .doc-group__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 1rem;
  }

  .doc-group__head > :not(.doc-stack) {
    grid-column: 1;
  }

  .doc-stack {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    margin: 0 1.1rem 0 0;
    scale: 0.78;
    transform-origin: 100% 50%;
  }

  /* The fanned sheets never widen the page. */
  .doc-group {
    overflow-x: clip;
  }
}

/* Documents on ruled lines, like the contents page of a printed guide. */
.doc-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-list li + li .doc {
  border-top: 1px solid var(--c-line);
}

.doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 0.25rem 1.1rem 0;
  color: var(--c-ink);
  text-decoration: none;
  transition: background-color 0.35s, padding 0.5s var(--ease-out);
}

.doc:hover {
  padding-left: 0.85rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--doc-accent, var(--c-blue)) 9%, transparent), transparent 85%);
}

.doc:hover .doc__label {
  color: var(--doc-accent, var(--c-blue));
}

.doc__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  color: var(--doc-accent, var(--c-blue));
  transition: border-color 0.3s;
}

.doc:hover .doc__icon {
  border-color: var(--doc-accent, var(--c-blue));
}

.doc__badge {
  padding: 0.3rem 0.55rem;
  border-radius: var(--pill);
  background: var(--c-sand);
  color: var(--c-ink-2);
  font: 500 0.75rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.doc__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-line-2);
  transition: background-color 0.3s, color 0.3s;
}

.doc:hover .doc__arrow {
  border-color: var(--doc-accent, var(--c-blue));
  background: var(--doc-accent, var(--c-blue));
  color: #fff;
}

@media (max-width: 560px) {
  .doc {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .doc__badge {
    display: none;
  }
}

/* ---------- Pathology pages: a drawing for each section (vignettes.js) ---------- */
/* Small line drawings in the colour of the disease, beside the title of each section, showing what
   the text says. Each plays once when it comes on screen, and again under the pointer (site.js). */
.vignette {
  float: right;
  width: clamp(5.75rem, 4.5rem + 3.5vw, 8rem);
  aspect-ratio: 1;
  margin: 0.2rem 0 1rem clamp(1rem, 3vw, 2rem);
  color: var(--patho-ink, var(--c-blue));
  shape-outside: circle(50%);
}

.vignette svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vignette svg :is(path, circle, line, rect, ellipse) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vignette svg .vg-soft {
  fill: var(--patho-soft, var(--c-blue-soft));
  stroke: none;
}

.vignette svg .vg-paper {
  fill: #fff;
  stroke: none;
}

.vignette svg .vg-ink {
  fill: currentColor;
  stroke: none;
}

.article-section > .vignette:first-child + h2 {
  margin-top: 0;
}

.article-callout .vignette {
  --patho-soft: #fff;
}

.article-callout--urgent .vignette {
  --patho-accent: #f0a58a;
  color: var(--c-alert-text);
}

.vignette svg :is(.vg-cup, .vg-halo, .vg-ripple, .vg-person, .vg-bleed, .vg-shot, .vg-target, .vg-drusen, .vg-spot, .vg-fluid, .vg-magnet, .vg-day--hit, .vg-pupil) {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes vg-draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes vg-pop {
  from {
    opacity: 0;
    scale: 0.3;
  }
}

@keyframes vg-lose {
  to {
    opacity: 0.12;
  }
}

@keyframes vg-grow {
  from {
    opacity: 0;
    scale: 0;
  }
}

/* Glaucoma: fibres lost and the cup widening; halos; a drop; the field narrowing; the gauge. */
.vignette svg .vg-cup {
  fill: #fff;
}

.is-playing .vg-cup {
  animation: vg-cup 2.6s var(--ease-in-out) 0.3s both;
}

@keyframes vg-cup {
  to {
    scale: 1.9;
  }
}

.is-playing .vg-fibre--lost {
  animation: vg-lose 0.8s ease-in calc(0.4s + var(--k) * 0.12s) both;
}

.vignette svg .vg-halo {
  stroke-width: 3.5;
}

.vignette svg .vg-halo--amber {
  stroke: #e0a548;
}

.vignette svg .vg-halo--green {
  stroke: #4fb38a;
}

.vignette svg .vg-halo--violet {
  stroke: #8f7ae6;
}

.vignette svg .vg-bulb {
  fill: #fff3c4;
}

.is-playing .vg-halo {
  animation: vg-halo 1.4s var(--ease-out) calc(0.2s + var(--k) * 0.18s) 2 both;
}

@keyframes vg-halo {
  from {
    opacity: 0;
    scale: 0.5;
  }

  60% {
    opacity: 1;
  }
}

.is-playing .vg-bulb {
  animation: vg-glow 1.4s ease-in-out 0.1s 2;
}

@keyframes vg-glow {
  50% {
    fill: #ffd76a;
  }
}

.vignette svg .vg-drop {
  fill: var(--patho-accent);
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.vignette svg .vg-ripple {
  stroke: var(--patho-ink);
  stroke-width: 2.5;
  opacity: 0;
}

.is-playing .vg-drop {
  animation: vg-drop 1.6s ease-in 0.2s 2 both;
}

.is-playing .vg-ripple {
  animation: vg-ripple 1.6s ease-out 0.2s 2 both;
}

@keyframes vg-drop {
  0% {
    opacity: 1;
    scale: 0.2;
    translate: 0 0;
  }

  35% {
    scale: 1;
    translate: 0 0;
  }

  80% {
    opacity: 1;
    translate: 0 44px;
  }

  84%,
  100% {
    opacity: 0;
    translate: 0 44px;
  }
}

@keyframes vg-ripple {
  0%,
  80% {
    opacity: 0;
    scale: 0.2;
  }

  86% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    scale: 1.3;
  }
}

.vignette svg .vg-dot {
  fill: currentColor;
  stroke: none;
}

.is-playing .vg-dot--lost {
  animation: vg-lose 0.9s ease-in calc(0.3s + (1 - var(--d)) * 1.5s) both;
}

.vignette svg .vg-zone {
  stroke: var(--patho-accent);
  stroke-width: 6;
}

.vignette svg .vg-needle {
  rotate: -60deg;
  transform-origin: 60px 66px;
}

.is-playing .vg-needle {
  animation: vg-needle 2.2s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s both;
}

@keyframes vg-needle {
  from {
    rotate: -120deg;
  }
}

/* Diabetic retinopathy: one in three; bleeding; laser spots; the hourglass; once a year. */
.vignette svg .vg-body {
  fill: #fff;
}

.vignette svg .vg-person {
  transform-origin: 50% 100%;
}

.vignette svg .vg-person--hit .vg-body {
  fill: var(--patho-accent);
}

.is-playing .vg-person {
  animation: vg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.2s + var(--k) * 0.25s) both;
}

.is-playing .vg-person--hit .vg-body {
  animation: vg-hit-fill 0.6s ease-out 1.3s both;
}

@keyframes vg-hit-fill {
  from {
    fill: #fff;
  }
}

.vignette svg .vg-bleed {
  fill: currentColor;
  stroke: none;
}

.vignette svg .vg-speck {
  fill: var(--c-ink);
  stroke: none;
  opacity: 0.5;
}

.is-playing .vg-bleed {
  animation: vg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(0.3s + var(--k) * 0.25s) both;
}

.is-playing .vg-speck {
  animation: vg-float 2.2s ease-in-out calc(1.1s + var(--k) * 0.2s) both;
}

@keyframes vg-float {
  from {
    opacity: 0;
    translate: 0 6px;
  }

  40% {
    opacity: 0.6;
  }

  to {
    translate: -6px -10px;
  }
}

.vignette svg .vg-shot {
  fill: var(--patho-accent);
  stroke-width: 1;
}

.vignette svg .vg-macula {
  stroke-dasharray: 2 3;
}

.is-playing .vg-shot {
  animation: vg-shot 0.5s ease-out calc(0.15s + var(--k) * 0.05s) both;
}

@keyframes vg-shot {
  from {
    opacity: 0;
    scale: 2;
    fill: #fff;
  }
}

.vignette svg .vg-sand {
  fill: var(--patho-accent);
  stroke: none;
}

.vignette svg .vg-sand--top {
  transform-origin: 60px 56px;
}

.vignette svg .vg-sand--bottom {
  scale: 1 0.05;
  transform-origin: 60px 106px;
}

.vignette svg .vg-stream {
  stroke: currentColor;
  stroke-dasharray: 3 4;
  opacity: 0;
}

.is-playing .vg-sand--top {
  animation: vg-empty 2.8s linear 0.2s both;
}

.is-playing .vg-sand--bottom {
  animation: vg-fill-up 2.8s linear 0.2s both;
}

.is-playing .vg-stream {
  animation: vg-stream 2.8s linear 0.2s both, vg-flow 0.56s linear 0.2s 5;
}

@keyframes vg-empty {
  to {
    scale: 1 0.08;
  }
}

@keyframes vg-fill-up {
  to {
    scale: 1 1;
  }
}

@keyframes vg-stream {
  6%,
  90% {
    opacity: 1;
  }
}

@keyframes vg-flow {
  to {
    stroke-dashoffset: -7;
  }
}

.vignette svg .vg-year {
  stroke: var(--patho-accent);
  stroke-width: 4;
  stroke-dasharray: 1;
  rotate: -90deg;
  transform-origin: 60px 60px;
}

.vignette svg .vg-month {
  fill: #fff;
}

.vignette svg .vg-check {
  stroke-width: 4;
  stroke-dasharray: 1;
}

.is-playing .vg-year {
  animation: vg-draw 2.2s linear 0.2s both;
}

.is-playing .vg-month {
  animation: vg-month 0.3s ease-out calc(0.2s + var(--k) * 0.18s) both;
}

@keyframes vg-month {
  to {
    fill: currentColor;
  }
}

.is-playing .vg-check {
  animation: vg-draw 0.6s var(--ease-out) 2.5s both;
}

/* AMD: the macula and its drusen; the waving lines and the central spot; the OCT; the grid on the
   fridge; the side vision kept; an appointment within the week. */
.vignette svg .vg-target {
  stroke-dasharray: 3 4;
}

.vignette svg .vg-drusen {
  fill: var(--patho-accent);
  stroke-width: 1;
}

.is-playing .vg-target {
  animation: vg-target 1.3s var(--ease-out) 0.2s 2 both;
}

@keyframes vg-target {
  from {
    opacity: 0;
    scale: 0.4;
  }

  60% {
    opacity: 1;
  }
}

.is-playing .vg-drusen {
  animation: vg-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(1.4s + var(--k) * 0.16s) both;
}

.vignette svg .vg-wave {
  stroke-width: 2.4;
}

.is-playing .vg-wave {
  animation: vg-wave 1s ease-in-out calc(0.2s + var(--k) * 0.012s) 3 both;
}

@keyframes vg-wave {
  50% {
    translate: 0 calc(var(--a) * 1px);
  }
}

.vignette svg .vg-spot {
  fill: currentColor;
  stroke: none;
  opacity: 0.85;
}

.is-playing .vg-spot {
  animation: vg-grow 1.4s var(--ease-out) 1.2s both;
}

.vignette svg .vg-scanline {
  stroke: var(--patho-accent);
  stroke-width: 3;
}

.is-playing .vg-cursor {
  animation: vg-scan 2s var(--ease-in-out) 0.3s both;
}

@keyframes vg-scan {
  to {
    translate: 44px 0;
  }
}

.vignette svg .vg-profile {
  stroke-dasharray: 1;
}

.is-playing .vg-profile {
  animation: vg-draw 2s var(--ease-in-out) 0.3s both;
}

.vignette svg .vg-fluid {
  fill: var(--patho-accent);
  stroke-width: 1.2;
}

.is-playing .vg-fluid {
  animation: vg-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 2.1s both;
}

.vignette svg .vg-grid {
  stroke-width: 1;
  opacity: 0.7;
}

.vignette svg .vg-sheet {
  transform-origin: 64px 58px;
}

.vignette svg .vg-magnet {
  fill: var(--patho-accent);
}

.is-playing .vg-sheet {
  animation: vg-stick 1.1s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s both;
}

@keyframes vg-stick {
  from {
    opacity: 0;
    translate: 0 -64px;
    rotate: -12deg;
  }

  30% {
    opacity: 1;
  }
}

.is-playing .vg-magnet {
  animation: vg-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
}

.vignette--dmla-consequences .vg-dot--lost {
  animation-delay: calc(0.3s + var(--d) * 1.5s) !important;
}

.vignette svg .vg-rim {
  stroke: var(--patho-accent);
  stroke-width: 4;
  stroke-dasharray: 1;
}

.is-playing .vg-rim {
  animation: vg-draw 1.6s var(--ease-out) 1s both;
}

.vignette svg .vg-day {
  fill: #fff;
}

.vignette svg .vg-day--hit {
  fill: var(--patho-accent);
}

.vignette svg .vg-ring {
  stroke-width: 2.5;
  opacity: 0;
}

.vignette svg .vg-phone {
  transform-origin: 60px 34px;
}

.is-playing .vg-phone {
  animation: vg-ringing 0.9s ease-in-out 0.2s 2 both;
}

@keyframes vg-ringing {
  10%,
  30%,
  50% {
    rotate: -9deg;
  }

  20%,
  40% {
    rotate: 9deg;
  }

  60% {
    rotate: 0deg;
  }
}

.is-playing .vg-ring {
  animation: vg-ring 0.9s ease-out 0.2s 2 both;
}

@keyframes vg-ring {
  30% {
    opacity: 1;
  }
}

.is-playing .vg-day--hit {
  animation: vg-day 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2s both;
}

@keyframes vg-day {
  from {
    fill: #fff;
  }

  60% {
    scale: 1.25;
  }
}

/* Retinal detachment: the paper peels; soot, flashes and a curtain; the dilated pupil; the paper laid
   back and the tear sealed; the macula spared; call the same day. */
.vignette svg .vg-stripe {
  stroke: var(--patho-accent);
  stroke-width: 3;
  opacity: 0.7;
}

.vignette svg .vg-bare {
  fill: var(--c-paper-2);
  stroke: none;
}

.vignette svg .vg-flap {
  fill: var(--patho-soft);
}

.vignette svg .vg-peel {
  transform-origin: 106px 14px;
}

.is-playing.vignette--decollement-definition .vg-peel {
  animation: vg-peel 2.2s var(--ease-in-out) 0.3s both;
}

@keyframes vg-peel {
  from {
    scale: 0;
  }
}

.vignette--decollement-traitements .vg-peel {
  scale: 0;
}

.is-playing.vignette--decollement-traitements .vg-peel {
  animation: vg-unpeel 1.8s var(--ease-in-out) 0.3s both;
}

@keyframes vg-unpeel {
  from {
    scale: 1;
  }
}

.is-playing.vignette--decollement-traitements .vg-shot {
  animation-delay: calc(2s + var(--k) * 0.14s);
}

.vignette svg .vg-curtain {
  fill: currentColor;
  stroke: none;
  opacity: 0.8;
}

.is-playing .vg-curtain {
  animation: vg-curtain 2.4s var(--ease-in-out) 0.6s both;
}

@keyframes vg-curtain {
  from {
    translate: 0 -48px;
  }
}

.vignette svg .vg-soot {
  fill: var(--c-ink);
  stroke: none;
}

.is-playing .vg-soot {
  animation: vg-soot 1.6s ease-in calc(var(--k) * 0.14s) both;
}

@keyframes vg-soot {
  from {
    opacity: 0;
    translate: 0 -30px;
  }

  30% {
    opacity: 1;
  }
}

.vignette svg .vg-flash {
  stroke: var(--patho-accent);
  stroke-width: 3;
  opacity: 0;
}

.is-playing .vg-flash {
  animation: vg-flash 0.4s ease-out 0.2s 3 both;
}

@keyframes vg-flash {
  30% {
    opacity: 1;
  }
}

.vignette svg .vg-pupil {
  fill: currentColor;
  stroke: none;
  scale: 2.4;
}

.is-playing .vg-pupil {
  animation: vg-dilate 2s var(--ease-in-out) 0.3s both;
}

@keyframes vg-dilate {
  from {
    scale: 1;
  }
}

.vignette svg .vg-beam {
  fill: var(--patho-accent);
  stroke: none;
  opacity: 0.55;
}

.is-playing .vg-beam {
  animation: vg-beam 0.8s ease-out 2.2s both;
}

@keyframes vg-beam {
  from {
    opacity: 0;
  }
}

.vignette svg .vg-detached {
  fill: var(--patho-accent);
  opacity: 0.85;
}

.is-playing .vg-detached {
  animation: vg-detach 2.2s var(--ease-in-out) 0.3s both;
}

@keyframes vg-detach {
  from {
    translate: 0 -34px;
  }
}

.vignette--decollement-consequences .vg-target {
  stroke-dasharray: none;
}

.is-playing.vignette--decollement-consequences .vg-target {
  animation-delay: 2.3s;
}

.vignette svg .vg-number {
  fill: currentColor;
  font: 700 22px/1 var(--font-mono);
}

.is-playing.vignette--decollement-consulter .vg-ring {
  animation-iteration-count: 3;
}

/* ---------- 404 ---------- */
/* The missing word is out of focus, like a line read without glasses: it hunts for its focus, as the
   eye beside it hunts for the page, and loses it again under the pointer. */
.page-head--404 .page-title em {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .page-head--404 .page-title em {
    animation: hunt-focus 3s var(--ease-in-out) 0.5s both;
  }

  .page-head--404 .page-title:hover em {
    animation: hunt-focus 1.8s var(--ease-in-out) both;
  }
}

@keyframes hunt-focus {
  0% {
    filter: blur(12px);
  }

  30% {
    filter: blur(2px);
  }

  50% {
    filter: blur(7px);
  }

  75% {
    filter: blur(1px);
  }

  100% {
    filter: blur(0);
  }
}

/* ---------- 3D scenes (scene3d.js and scenes/) ---------- */
/* A stage keeps its room in the page from the start (no jump when the scene appears); the scene
   fades in once drawn. Its pause button sits in its lower right corner. */
.scene3d {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.scene3d.is-ready {
  opacity: 1;
}

.scene3d__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.scene3d__play {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--c-line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--c-ink);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, scale 0.16s var(--ease-out);
}

.scene3d__play[hidden] {
  display: none;
}

.scene3d__play:hover {
  border-color: var(--c-ink);
  background: var(--c-ink);
  color: #fff;
}

.scene3d__play:active {
  scale: 0.94;
}

.scene3d__play .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.scene3d__play .icon--play,
.scene3d__play.is-paused .icon--pause {
  display: none;
}

.scene3d__play.is-paused .icon--play {
  display: block;
}

/* Names of places over the model of the land. */
.scene3d__labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene3d__label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.3em 0.7em;
  border-radius: var(--pill);
  background: rgba(251, 248, 241, 0.88);
  color: var(--c-ink-2);
  font: 500 0.875rem/1.2 var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform;
}

.scene3d__label--town {
  background: var(--c-blue);
  color: #fff;
  font: 700 0.9375rem/1.2 var(--font-body);
  letter-spacing: 0;
  box-shadow: 0 8px 18px -10px rgba(13, 26, 43, 0.6);
}

@media (max-width: 600px) {
  .scene3d__label {
    font-size: 0.75rem;
  }

  .scene3d__label--town {
    font-size: 0.8125rem;
  }
}

/* In the editorial page heads: the scene answers the title on the left, beside the introduction. */
.page-head__grid--single > div > .scene3d:not(.scene3d--corner) {
  grid-column: 1;
  grid-row: 4 / span 2;
  align-self: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.scene3d--terrain {
  aspect-ratio: 5 / 4;
}

.scene3d--constellation {
  aspect-ratio: 16 / 11;
}

/* Beside the opening text of a section. */
.giant-head--scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.giant-head--scene > * {
  grid-column: 1 / -1;
}

.giant-head--scene > .giant-head__lead {
  grid-column: 1;
}

/* Under the index of the atlas, the eye in lines of light on a small night screen, like that of an
   examination device: it shows where the disease chosen acts. */
.scene3d--anatomy {
  --focus-ring: var(--c-sky);
  aspect-ratio: 4 / 5;
  max-width: 21rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: radial-gradient(110% 80% at 50% 46%, #14253f 0%, var(--c-night) 72%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 28px 50px -34px rgba(13, 26, 43, 0.7);
}

.scene3d--anatomy .scene3d__play {
  right: 0.6rem;
  bottom: 0.6rem;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(10, 20, 36, 0.6);
  color: #fff;
}

.scene3d--anatomy .scene3d__play:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-night);
}

/* In the corner of a page head, beside the giant word of the title: a small object drawn in lines
   (the implant, the cornea, the medicine in the eye, the Amsler grid). The title and its object share
   a box: on a wide screen the object stands in it, centred on the title, at its right end, behind the
   letters; on a narrow screen it simply follows the title. */
.page-head__title {
  position: relative;
}

.page-head__title > .page-title > [aria-hidden] {
  position: relative;
  z-index: 1;
}

.scene3d--corner {
  --corner-size: min(54vw, 14rem);
  width: var(--corner-size);
  aspect-ratio: 1;
  margin: -0.5rem 0 0 auto;
}

@media (min-width: 1001px) {
  .scene3d--corner {
    --corner-size: clamp(13rem, 21vw, 18.5rem);
    --corner-rise: -50%;
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;
    translate: 0 var(--corner-rise);
  }

  /* A title on one line leaves less room: the grid rises above it, beside the label. */
  .scene3d--amsler {
    --corner-size: clamp(12rem, 18vw, 15rem);
    --corner-rise: -68%;
  }
}

@media (max-width: 900px) {
  .scene3d--anatomy {
    width: min(62vw, 16rem);
    margin-inline: auto;
  }
}

.giant-head--scene > .scene3d {
  grid-column: 2;
  grid-row: 3;
  margin-top: clamp(1rem, 2vw, 2rem);
}

@media (max-width: 860px) {
  .page-head__grid--single > div > .scene3d:not(.scene3d--corner),
  .giant-head--scene > :is(.giant-head__lead, .scene3d) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ---------- Touch targets ---------- */
/* Links that read as text keep their look, but their touch area reaches 44 × 44 px (WCAG 2.5.5):
   an invisible margin of a few pixels around them catches the finger. */
:is(.footer-list a, .link-arrow, .urgent-card__link, .atlas__urgent, .menu-cabinet__phone) {
  position: relative;
}

:is(.footer-list a, .link-arrow, .urgent-card__link, .atlas__urgent, .menu-cabinet__phone)::before {
  content: "";
  position: absolute;
  inset-block: calc((100% - 44px) / 2);
  inset-inline: -4px;
}

/* ---------- Charter (CNOM) ---------- */

.charter {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
}

/* Same two columns for the notes and every article: an index reading. */
.charter__intro,
.charter__item {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
  align-items: start;
  gap: 1rem clamp(2rem, 5vw, 5rem);
}

.charter__intro .prose {
  max-width: 46rem;
}

.charter__intro .prose p:first-child {
  color: var(--c-ink);
  font-size: var(--fs-lead);
  line-height: 1.5;
}

.charter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.charter__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-ink);
  list-style: none;
}

.charter__item {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  border-bottom: 1px solid var(--c-line-2);
}

/* The number of the article in a seal: its ring draws itself when the article arrives, then a tick
   is stamped on it (the site respects the eight articles). */
@property --seal {
  syntax: "<angle>";
  inherits: false;
  initial-value: 360deg;
}

.charter__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  color: var(--c-blue);
  font: 600 1rem/1 var(--font-mono);
  letter-spacing: 0.06em;
}

.charter__num::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  -webkit-mask: conic-gradient(#000 var(--seal), transparent 0);
  mask: conic-gradient(#000 var(--seal), transparent 0);
}

.charter__num::after {
  content: "";
  position: absolute;
  right: -0.3rem;
  bottom: -0.15rem;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--c-paper);
  border-radius: 50%;
  background: var(--c-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 62% no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .js .charter__item .charter__num::before {
    --seal: 0deg;
    transition: --seal 1.1s var(--ease-out) 0.25s;
  }

  .js .charter__item.is-visible .charter__num::before {
    --seal: 360deg;
  }

  .js .charter__item .charter__num::after {
    scale: 0;
    transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s;
  }

  .js .charter__item.is-visible .charter__num::after {
    scale: 1;
  }
}

.charter__title {
  margin: 0.6rem 0 1rem;
  font-size: var(--fs-h3);
}

.charter__item .prose {
  max-width: 46rem;
}

@media (max-width: 760px) {
  .charter__intro,
  .charter__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .charter__num {
    margin-bottom: 0.5rem;
  }
}

/* ---------- Cabinets page ---------- */

.cabinet-block + .cabinet-block {
  margin-top: var(--section-y);
}

.cabinet-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.cabinet-block__photos {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.cabinet-block__photo {
  overflow: hidden;
  border-radius: var(--r-xl);
}

.cabinet-block__photo--main {
  aspect-ratio: 4 / 3;
}

.cabinet-block__photo--second {
  aspect-ratio: 16 / 9;
}

/* A single photo takes the height of two. */
.cabinet-block__photo--tall {
  aspect-ratio: 4 / 4.4;
}

/* The address card reads like a page of a guide: no box, the name large, the facts on ruled lines. */
.cabinet-block__info {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  display: grid;
  gap: 1.6rem;
  padding: clamp(0.25rem, 1vw, 1rem) 0 0 clamp(0rem, 2.5vw, 2.5rem);
}

.cabinet-block__num {
  color: var(--c-blue);
  font: 500 0.8125rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.cabinet-block__city {
  font-size: clamp(2.7rem, 1.6rem + 3.6vw, 4.6rem);
  font-weight: 560;
  letter-spacing: -0.02em;
}

.cabinet-block__place {
  margin-top: 0.6rem;
  color: var(--c-blue);
  font: 500 clamp(1.4rem, 1.15rem + 0.7vw, 1.8rem)/1.2 var(--font-display);
}

.cabinet-block__text {
  color: var(--c-ink-2);
}

.cabinet-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cabinet-block__credit {
  color: var(--c-ink-3);
  font-size: 0.875rem;
}

.cabinet-block + .cabinet-block {
  padding-top: var(--section-y);
  border-top: 1px solid var(--c-line);
}

.cabinet-block .map-card {
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
}

.care-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 6vw, 6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.care-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 0.9rem 1.4rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--c-line-2);
}

.care-card p {
  grid-column: 2;
  color: var(--c-ink);
  font: 500 clamp(1.3rem, 1.12rem + 0.5vw, 1.6rem)/1.42 var(--font-display);
}

.care-card__icon {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  color: var(--c-blue);
}

.care-card__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Under the pointer, a line of the colour of the page runs along the top of the card and its icon
   lights up. */
.care-card {
  position: relative;
}

.care-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.care-card__icon {
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, scale 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .care-card:hover::before {
    transform: none;
  }

  .care-card:hover .care-card__icon {
    border-color: var(--c-blue);
    background: var(--c-blue);
    color: #fff;
    scale: 1.08;
  }

  .care-card:hover .icon--eye {
    animation: icon-blink 0.45s ease-in-out;
  }

  .care-card:hover .icon--stethoscope,
  .care-card:hover .icon--building {
    animation: icon-hop 0.6s var(--ease-out);
  }
}

@media (max-width: 760px) {
  .care-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.map-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-sand);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

.map-card iframe {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
}

@media (max-width: 960px) {
  .cabinet-block__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cabinet-block__info {
    position: static;
  }
}

/* ---------- Team page ---------- */

.doctor-profile {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}

.doctor-profile + .doctor-profile {
  margin-top: var(--section-y);
}

.doctor-profile--reverse .doctor-profile__media {
  order: 2;
}

.doctor-profile__media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-xl);
  background: var(--c-sand);
}

.doctor-profile__media img {
  object-position: 50% 20%;
}

.doctor-profile__name {
  font-size: clamp(2.7rem, 1.6rem + 3.8vw, 5.2rem);
  font-weight: 560;
  letter-spacing: -0.025em;
}

.doctor-profile__role {
  margin: 1rem 0 1.75rem;
  color: var(--c-blue);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.doctor-profile__bio {
  max-width: 36rem;
  color: var(--c-ink);
  font: 500 clamp(1.35rem, 1.12rem + 0.7vw, 1.75rem)/1.42 var(--font-display);
}

.doctor-profile__actions {
  margin-top: 2rem;
}

/* Waiting for the team photo: a camera viewfinder, its corners and its focus frame. */
.team-photo {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 7;
  min-height: 300px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-paper-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: center;
}

.team-photo::before {
  --corner: clamp(22px, 3vw, 40px);
  content: "";
  position: absolute;
  inset: clamp(1rem, 2.5vw, 1.75rem);
  pointer-events: none;
  background:
    linear-gradient(var(--c-ink) 0 0) 0 0 / var(--corner) 1.5px,
    linear-gradient(var(--c-ink) 0 0) 0 0 / 1.5px var(--corner),
    linear-gradient(var(--c-ink) 0 0) 100% 0 / var(--corner) 1.5px,
    linear-gradient(var(--c-ink) 0 0) 100% 0 / 1.5px var(--corner),
    linear-gradient(var(--c-ink) 0 0) 0 100% / var(--corner) 1.5px,
    linear-gradient(var(--c-ink) 0 0) 0 100% / 1.5px var(--corner),
    linear-gradient(var(--c-ink) 0 0) 100% 100% / var(--corner) 1.5px,
    linear-gradient(var(--c-ink) 0 0) 100% 100% / 1.5px var(--corner);
  background-repeat: no-repeat;
}

.team-photo .drawing {
  --drawing-opacity: 0.08;
  --drawing-pos: 50% 50%;
}

.team-photo__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: 2rem;
}

.team-photo__icon {
  display: grid;
  place-items: center;
  width: 84px;
  height: 64px;
  border: 1.5px solid var(--c-blue);
  border-radius: 6px;
  color: var(--c-blue);
}

/* The focus frame locks on, as an autofocus does: its corners close in on the picture, then the
   words come into focus. */
@media (prefers-reduced-motion: no-preference) {
  .js .team-photo::before {
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 0.5s, transform 1s var(--ease-out);
  }

  .js .team-photo.is-visible::before {
    opacity: 1;
    transform: none;
  }

  .js .team-photo :is(.team-photo__title, .team-photo__text) {
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.8s var(--ease-out) 0.9s, filter 0.8s var(--ease-out) 0.9s;
  }

  .js .team-photo.is-visible :is(.team-photo__title, .team-photo__text) {
    opacity: 1;
    filter: none;
  }

  .js .team-photo__icon {
    transform: scale(1.35);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(0.3, 1.6, 0.5, 1) 0.3s, opacity 0.4s 0.3s;
  }

  .js .team-photo.is-visible .team-photo__icon {
    transform: none;
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .team-photo.is-visible:hover::before {
    transform: scale(0.965);
  }

  .team-photo:hover .team-photo__icon {
    animation: camera-flash 0.7s var(--ease-out);
  }
}

@keyframes camera-flash {
  25% {
    background: #fff;
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.55), 0 0 46px rgba(255, 255, 255, 0.95);
  }
}

.team-photo__icon .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.team-photo__title {
  max-width: 22ch;
  font: 560 clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem)/1.1 var(--font-display);
  letter-spacing: -0.01em;
}

.team-photo__text {
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The roles read as three columns of a programme, each under its ruled line and number. */
.team-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 4rem);
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  counter-reset: role;
  list-style: none;
}

.team-role {
  position: relative;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-line-2);
  counter-increment: role;
}

.team-role::before {
  content: counter(role, decimal-leading-zero);
  position: absolute;
  top: 1.5rem;
  right: 0;
  color: var(--c-blue);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.team-role__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--c-line-2);
  border-radius: 50%;
  color: var(--c-blue);
  transition: background-color 0.4s, border-color 0.4s, color 0.4s, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Under the pointer, the role comes forward: its icon fills, its line darkens. */
.team-role {
  transition: border-color 0.4s;
}

@media (hover: hover) and (pointer: fine) {
  .team-role:hover {
    border-top-color: var(--c-blue);
  }

  .team-role:hover .team-role__icon {
    border-color: var(--c-blue);
    background: var(--c-blue);
    color: #fff;
    scale: 1.12;
  }
}

.team-role h3 {
  margin-bottom: 0.6rem;
  font-size: var(--fs-h3);
}

.team-role p {
  color: var(--c-ink-2);
}

@media (max-width: 900px) {
  .doctor-profile {
    grid-template-columns: minmax(0, 1fr);
  }

  .doctor-profile--reverse .doctor-profile__media {
    order: 0;
  }

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

  .team-photo {
    aspect-ratio: auto;
  }
}

/* ---------- Glasses page ---------- */

/* The title stays in view while the conditions are read, one per ruled line, ticked one by one. */
.conditions-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 2rem clamp(2rem, 7vw, 7rem);
}

.conditions-layout__head {
  position: sticky;
  top: calc(var(--header-h) + 2rem);
}

.conditions {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c-line-2);
  counter-reset: condition;
  list-style: none;
}

.conditions li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--c-line-2);
  counter-increment: condition;
  font: 500 clamp(1.3rem, 1.12rem + 0.55vw, 1.6rem)/1.32 var(--font-display);
}

.conditions li::after {
  content: counter(condition, decimal-leading-zero);
  color: var(--c-ink-3);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.08em;
}

.conditions__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--c-blue);
  border-radius: 50%;
  color: var(--c-blue);
}

.conditions__check .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Each condition can be ticked; when all five are, the page says the quick appointment is for you
   and its button lights up (site.js). */
.condition {
  display: contents;
}

.condition__box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.conditions li:has(.condition) {
  cursor: pointer;
  transition: background-color 0.3s;
}

.conditions .conditions__check {
  transition: background-color 0.35s, color 0.35s, scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.condition__box:not(:checked) + .conditions__check .icon {
  opacity: 0.28;
}

.condition__box:checked + .conditions__check {
  background: var(--c-blue);
  color: #fff;
  scale: 1.08;
}

.condition__box:focus-visible + .conditions__check {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .conditions li:has(.condition):hover {
    background: rgba(29, 79, 163, 0.045);
  }
}

.conditions__status {
  margin-top: 1.25rem;
  color: var(--c-ink-2);
  font-size: 1.125rem;
}

.conditions-layout .is-complete .conditions__status {
  color: var(--c-blue);
  font-weight: 700;
}

.conditions-layout .is-complete .conditions__cta .btn {
  box-shadow: 0 0 0 6px rgba(29, 79, 163, 0.18), 0 18px 36px -18px rgba(29, 79, 163, 0.7);
  animation: cta-ready 1.2s var(--ease-out) 2;
}

@keyframes cta-ready {
  50% {
    scale: 1.04;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .conditions__check path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.7s var(--ease-out) 0.35s;
  }

  .js .conditions li.is-visible .conditions__check path {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 860px) {
  .conditions-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .conditions-layout__head {
    position: static;
  }
}

/* Phones: the text takes the width of the line number. */
@media (max-width: 520px) {
  .conditions li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .conditions li::after {
    display: none;
  }
}

/* ---------- Footer ---------- */

/* A last section with its own background runs on under the footer: no band of page colour above it,
   and its colour shows in the rounded corners. */
main > :is(.section--sand, .section--white, .urgent):last-child::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: calc(var(--footer-gap) + var(--r-xl));
  background: inherit;
}

.site-footer {
  position: relative;
  isolation: isolate;
  margin-top: var(--footer-gap);
  padding-top: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--c-night);
  color: #fff;
}

.site-footer__drawing {
  --drawing-color: var(--c-sky);
  --drawing-opacity: 0.07;
  --drawing-pos: 85% 20%;
}

.site-footer .container {
  position: relative;
}

/* The invitation to book, in letters as wide as the page. */
.footer-cta {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--c-line-dark);
}

.footer-cta__title {
  font: 560 clamp(3rem, 1.4rem + 6.4vw, 8rem)/0.95 var(--font-display);
  letter-spacing: -0.025em;
}

.footer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

.footer-cabinets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--c-line-dark);
}

.footer-cabinet {
  display: grid;
  align-content: start;
  gap: 0.6rem;
}

.footer-cabinet__num {
  color: var(--c-sky);
  font: 500 0.875rem/1 var(--font-mono);
}

.footer-cabinet__num .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.footer-cabinet__city {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font: 600 clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem)/1.1 var(--font-display);
  letter-spacing: -0.01em;
}

.footer-cabinet__address {
  color: var(--c-on-night);
  font-size: 1rem;
  line-height: 1.55;
}

/* The touch zone of the number reaches 44px on phones; the margins give the room back. */
.footer-cabinet__phone {
  display: block;
  margin-block: -0.45rem;
  padding-block: 0.45rem;
  color: #fff;
  font: 560 clamp(1.55rem, 1.2rem + 1vw, 2.1rem)/1.2 var(--font-display);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
}

.footer-cabinet__phone:hover {
  color: var(--c-sky);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.footer-title {
  margin-bottom: 1.1rem;
  color: var(--c-on-night);
  font: 500 var(--fs-label)/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 0.9rem between the links: their touch zones (44px, see the small links) do not overlap. */
.footer-list {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.4s var(--ease-out), color 0.3s;
}

.footer-list a:hover {
  color: var(--c-sky);
  background-size: 100% 1px;
}

.footer-list--small {
  color: var(--c-on-night);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-list--small a {
  display: inline;
}

.credits summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
}

.credits summary::-webkit-details-marker {
  display: none;
}

.credits__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-line-dark);
  border-radius: 50%;
  color: #fff;
  transition: transform 0.4s var(--ease-out);
}

.credits[open] .credits__icon {
  transform: rotate(45deg);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--c-line-dark);
  color: var(--c-on-night);
  font-size: 0.9375rem;
}

.back-top {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.back-top__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line-dark);
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s, transform 0.5s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .back-top:hover .back-top__icon {
    background: #fff;
    color: var(--c-ink);
    transform: translateY(-3px);
  }
}

.footer-wordmark {
  display: flex;
  justify-content: space-between;
  gap: 0.25em;
  margin: 0 calc(var(--gutter) * 0.5) -0.18em;
  color: rgba(255, 255, 255, 0.1);
  font: 560 min(9.4vw, 17rem)/0.82 var(--font-display);
  letter-spacing: -0.03em;
  white-space: nowrap;
  user-select: none;
}

.footer-wordmark span {
  display: inline-block;
}

/* Under a mouse, the letters near the pointer rise and light up, like letters coming into focus
   (site.js gives each its --lift, from 0 to 1). */
.footer-wordmark .letter {
  color: color-mix(in srgb, #fff calc(10% + var(--lift, 0) * 26%), transparent);
  translate: 0 calc(var(--lift, 0) * -0.1em);
  transition: translate 0.6s var(--ease-out), color 0.6s;
}

.footer-wordmark:has(.letter) {
  color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  .js .footer-wordmark span {
    transform: translateY(40%);
    transition: transform 1.2s var(--ease-out);
  }

  .js .footer-wordmark span:nth-child(2) { transition-delay: 0.08s; }
  .js .footer-wordmark span:nth-child(3) { transition-delay: 0.16s; }

  .js .footer-wordmark.is-visible span {
    transform: none;
  }
}

@media (max-width: 960px) {
  .footer-cabinets,
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-wordmark {
    margin-bottom: -0.12em;
  }
}

/* ---------- Stars under the pointer (stars.js) ---------- */
/* Behind the content of their section, over its ground: the colour of the page on the paper, a warm
   white on the dark grounds. */
[data-stars] {
  --stars-ink: var(--op-ink, var(--c-blue));
  position: relative;
  isolation: isolate;
}

.stars {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  pointer-events: none;
}

:is(.section--night, .chapter, .film, .site-footer, .page-head--bloc, .bloc .section)[data-stars] {
  --stars-ink: #fff2d8;
}

/* ---------- Scroll reveals (triggered as soon as the element enters the screen) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* As soon as the element enters the screen it rises into place, once; elements entering
     together follow each other (site.js gives each its delay). */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
  }

  .js [data-reveal="focus"] {
    filter: blur(10px);
    transform: scale(1.03);
    transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-out), filter 0.8s var(--ease-out);
  }

  .js [data-reveal].is-visible {
    opacity: 1;
    filter: none;
    transform: none;
  }

  /* Home hero entrance: CSS only, ready from the first paint (no script needed). */
  .hero-in {
    opacity: 0;
    transform: translateY(18px);
    animation: hero-in 0.9s var(--ease-out) forwards;
    animation-delay: var(--hero-delay, 0.2s);
  }

  .hero__title-main .letter {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.12em);
    animation: letter-focus 1s var(--ease-out) forwards;
    animation-delay: calc(0.15s + var(--i) * 45ms);
  }

  /* Titles come into focus word by word, like an eye adjusting (words split at build time). */
  .js [data-focus] .w {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.22em);
  }

  /* The page title, always first on screen, starts with the first paint (no script needed). */
  .js [data-focus].is-focused .w,
  .js .page-head [data-focus] .w {
    animation: letter-focus 0.8s var(--ease-out) forwards;
    animation-delay: calc(var(--focus-delay, 0.05s) + var(--w) * 55ms);
  }

  /* Photos open like a pupil widening, then settle. */
  .js [data-aperture] {
    clip-path: circle(24% at 50% 50%);
    transition: clip-path 0.9s var(--ease-out);
  }

  .js [data-aperture] > picture {
    scale: 1.12;
    transition: scale 0.9s var(--ease-out);
  }

  .js [data-aperture].is-open {
    clip-path: circle(75% at 50% 50%);
  }

  .js [data-aperture].is-open > picture {
    scale: 1;
  }

  /* Photos side by side open like eyelids, one after the other. */
  .js [data-aperture="lid"] {
    clip-path: inset(48% 0 48% 0);
    transition: clip-path 0.95s var(--ease-out) var(--open-delay, 0s);
  }

  .js [data-aperture="lid"].is-open {
    clip-path: inset(0);
  }

  .js [data-aperture="lid"] > picture {
    transition-delay: var(--open-delay, 0s);
  }
}

.w {
  display: inline-block;
}

@keyframes hero-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes letter-focus {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

/* ---------- Motion: what comes on screen moves into place by itself, once ---------- */

/* Labels: their small line draws itself first (at once in the head of the page, else as they come
   on screen). */
@media (prefers-reduced-motion: no-preference) {
  .page-head .label::before {
    animation: line-in 0.9s var(--ease-out) 0.15s both;
  }

  .js .label:not(.page-head .label)::before {
    transform-origin: left;
    transition: transform 0.9s var(--ease-out) 0.1s;
  }

  .js .label:not(.page-head .label, .is-in)::before {
    transform: scaleX(0);
  }
}

@keyframes line-in {
  from {
    transform: scaleX(0);
  }
}

/* Big step numbers roll into place, digit after digit (site.js wraps each digit). The clip leaves
   a little room around each digit so that the serif is not cut. */
.roll-num {
  user-select: none;
}

.roll-num__digit {
  display: inline-block;
  clip-path: inset(-0.12em -0.08em);
}

.roll-num__digit > span {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .js .roll-num__digit > span {
    transform: translateY(135%);
    transition: transform 1s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms + var(--roll-delay, 0s));
  }

  .js .is-rolled .roll-num__digit > span {
    transform: none;
  }
}

/* Drawn icons: their lines are traced as they come on screen, one after the other (each shape is
   measured as 1, see the icons in build.js). Invisible until traced, so that round line ends do not
   show as dots. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw] .icon > * {
    opacity: 0;
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.1s var(--ease-in-out), opacity 0.15s;
    transition-delay: calc(var(--draw-delay, 0.15s) + var(--s, 0) * 0.14s);
  }

  .js [data-draw] .icon > :nth-child(2) { --s: 1; }
  .js [data-draw] .icon > :nth-child(3) { --s: 2; }
  .js [data-draw] .icon > :nth-child(4) { --s: 3; }
  .js [data-draw] .icon > :nth-child(5) { --s: 4; }
  .js [data-draw] .icon > :nth-child(n + 6) { --s: 5; }

  .js [data-draw].is-drawn .icon > * {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* With a mouse, light passes over a photo (or a dark card) as the pointer goes on it, once, like the
   light of the slit lamp; leaving, it is simply gone. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.cab-card__media, .doctor-card__media, .cabinet-block__photo, .info-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, transparent 32%, var(--sheen, rgba(255, 255, 255, 0.3)) 50%, transparent 68%);
    transform: translateX(-105%);
    pointer-events: none;
  }

  .info-card {
    --sheen: rgba(255, 255, 255, 0.6);
  }

  :is(.cab-card, .doctor-card, .cabinet-block):hover :is(.cab-card__media, .doctor-card__media, .cabinet-block__photo)::after,
  .info-card:hover::after {
    transform: translateX(105%);
    transition: transform 1.1s var(--ease-out);
  }

  /* Icons answer the pointer: the phone rings, the pin hops, the download arrow drops into place,
     the file lifts. */
  :is(a, button):hover > .icon--phone,
  :is(a, button):hover .icon--phone {
    animation: icon-ring 0.7s var(--ease-out);
  }

  :is(a, button):hover .icon--map-pin {
    animation: icon-hop 0.6s var(--ease-out);
  }

  :is(a, button):hover .icon--download > :not(:first-child) {
    animation: icon-drop 0.6s var(--ease-out);
  }

  :is(a, button):hover .icon--file {
    animation: icon-lift 0.6s var(--ease-out);
  }

  /* ...the clock turns its hands, the eye blinks, the calendar ticks its day, the people hop, the
     glasses tilt, the route draws itself, the arrow leaves. */
  :is(a, button):hover .icon--clock > :nth-child(2) {
    transform-box: view-box;
    transform-origin: 12px 12px;
    animation: icon-tick 0.9s var(--ease-out);
  }

  :is(a, button):hover .icon--eye {
    animation: icon-blink 0.45s ease-in-out;
  }

  :is(a, button):hover :is(.icon--calendar > :last-child, .icon--check > *) {
    animation: icon-draw 0.6s var(--ease-out);
  }

  :is(a, button):hover :is(.icon--users, .icon--info) {
    animation: icon-hop 0.6s var(--ease-out);
  }

  :is(a, button):hover .icon--glasses {
    animation: icon-tilt 0.7s var(--ease-out);
  }

  :is(a, button):hover .icon--route > * {
    animation: icon-draw 0.8s var(--ease-out);
  }

  :is(a, button):hover .icon--arrow-up-right {
    animation: icon-out 0.5s var(--ease-out);
  }
}

@keyframes icon-tick {
  to {
    rotate: 360deg;
  }
}

@keyframes icon-blink {
  50% {
    scale: 1 0.1;
  }
}

@keyframes icon-draw {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes icon-tilt {
  30% {
    rotate: -10deg;
  }

  60% {
    rotate: 6deg;
  }
}

@keyframes icon-out {
  50% {
    opacity: 0;
    translate: 4px -4px;
  }

  51% {
    translate: -4px 4px;
  }
}

@keyframes icon-ring {
  20% {
    rotate: -14deg;
  }

  40% {
    rotate: 11deg;
  }

  60% {
    rotate: -7deg;
  }

  80% {
    rotate: 3deg;
  }
}

@keyframes icon-hop {
  40% {
    translate: 0 -18%;
  }
}

@keyframes icon-drop {
  0% {
    opacity: 0;
    translate: 0 -5px;
  }

  60% {
    opacity: 1;
  }
}

@keyframes icon-lift {
  40% {
    translate: 0 -10%;
    rotate: -6deg;
  }
}

/* Long texts that open a section come line by line (motion.js, with SplitText): each line rises
   from behind its own edge. The words stay readable for screen readers (SplitText labels them). */
.text-lines-mask {
  padding-bottom: 0.06em;
}

/* ---------- Cross-page transitions ---------- */

@view-transition {
  navigation: auto;
}

/* The next page opens like a pupil, over the previous one going out of focus. */
/* The header does not move from one page to the next. */
.site-header {
  view-transition-name: site-header;
}

/* The title of an operation or a disease travels to the title of its own page. */
#ch-cataracte,
main[data-op="cataracte"] .page-head .page-title,
.lamp__item[href$="chirurgies/cataracte"] .lamp__name,
.next-link[href$="cataracte"] .next-link__title {
  view-transition-name: op-cataracte;
}

#ch-laser,
main[data-op="laser"] .page-head .page-title,
.lamp__item[href$="chirurgies/laser"] .lamp__name,
.next-link[href$="laser"] .next-link__title {
  view-transition-name: op-laser;
}

#ch-paupieres,
main[data-op="paupieres"] .page-head .page-title,
.lamp__item[href$="chirurgies/paupieres"] .lamp__name,
.next-link[href$="paupieres"] .next-link__title {
  view-transition-name: op-paupieres;
}

#ch-ivt,
main[data-op="ivt"] .page-head .page-title,
.lamp__item[href$="chirurgies/ivt"] .lamp__name,
.next-link[href$="ivt"] .next-link__title {
  view-transition-name: op-ivt;
}

#plate-glaucome,
main[data-patho="glaucome"] .page-head .page-title,
.lamp__item[href$="pathologies/glaucome"] .lamp__name {
  view-transition-name: patho-glaucome;
}

#plate-diabete,
main[data-patho="diabete"] .page-head .page-title,
.lamp__item[href$="pathologies/diabete"] .lamp__name {
  view-transition-name: patho-diabete;
}

#plate-decollement,
main[data-patho="decollement"] .page-head .page-title,
.lamp__item[href$="pathologies/decollement"] .lamp__name {
  view-transition-name: patho-decollement;
}

#plate-dmla,
main[data-patho="dmla"] .page-head .page-title,
.lamp__item[href$="pathologies/dmla"] .lamp__name {
  view-transition-name: patho-dmla;
}

/* The titles travel in the time of the new page opening, with the curve of on-screen movements. */
::view-transition-group(*) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease-in-out);
}

/* The old page goes faster than the new one comes. */
::view-transition-old(root) {
  animation: 0.4s var(--ease-in-out) both vt-out;
}

::view-transition-new(root) {
  animation: 0.6s cubic-bezier(0.55, 0, 0.2, 1) both vt-in;
}

@keyframes vt-out {
  to {
    filter: blur(8px);
  }
}

@keyframes vt-in {
  from {
    clip-path: circle(8% at 50% 50%);
  }

  to {
    clip-path: circle(75% at 50% 50%);
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  /* The animated drawings still play (they have their pause button). */
  *:not(:is(.schema, .chapter, .film, .lamp, .trial) *),
  *:not(:is(.schema, .chapter, .film, .lamp, .trial) *)::before,
  *:not(:is(.schema, .chapter, .film, .lamp, .trial) *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */

@media print {
  .site-header,
  .menu,
  .site-footer,
  .drawing,
  .hero__stage,
  .hud {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .hero {
    min-height: 0;
    background: none;
    color: inherit;
  }
}

/* ---------- Glasses page: a sunny page in large print ---------- */

/* The photo runs to the edge of the screen; the word "Lunettes" fills its column. */
.glasses-hero {
  position: relative;
  overflow: hidden;
  background: var(--c-sand);
}

.glasses-hero .drawing {
  --drawing-color: var(--c-blue);
  --drawing-opacity: 0.1;
  --drawing-pos: 0% 100%;
  --drawing-size: auto 115%;
}

.glasses-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: min(100svh, 980px);
}

.glasses-hero__text {
  align-self: center;
  padding: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)) clamp(1.5rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem) max(var(--gutter), calc((100vw - var(--container)) / 2));
}

.glasses-hero__title {
  max-width: none;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.glasses-hero__lead {
  max-width: 32rem;
  font: 500 var(--fs-lead)/1.45 var(--font-display);
}

/* The trial frame of the eye test: its lenses slide into the cells, the cylinder seeks its axis. */
.glasses-hero__frame {
  display: grid;
  align-items: center;
  padding: calc(var(--header-h) + 1rem) clamp(1rem, 4vw, 4rem) clamp(2rem, 5vw, 4rem) 0;
}

.trial {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trial :is(path, circle) {
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trial .trial__line--bold {
  stroke-width: 3.2;
}

.trial .trial__ring {
  stroke-width: 3.6;
}

.trial .trial__ring--inner {
  stroke-width: 1.4;
}

.trial .trial__tick {
  stroke-width: 1.2;
}

.trial .trial__knob {
  fill: var(--c-sand);
  stroke-width: 2.6;
}

.trial__deg {
  fill: var(--c-ink-2);
  font: 500 15px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.trial .trial__glass {
  fill: rgba(29, 79, 163, 0.08);
  stroke: var(--c-blue);
  stroke-width: 3;
}

.trial .trial__glass--cyl {
  fill: rgba(239, 178, 74, 0.12);
  stroke: #c98a1d;
}

.trial .trial__axis-line {
  stroke: #c98a1d;
  stroke-width: 2;
  stroke-dasharray: 8 7;
}

.trial .trial__tab {
  stroke-width: 9;
}

.trial__axis {
  transform-box: view-box;
}

/* Under the pointer (site.js): the frame leans toward it, light glints on the lenses, the cylinder
   turns its axis toward it, the marker follows on the scale, and the axis is read below the cell. */
.trial {
  transform: perspective(1400px) rotateX(var(--trial-rx, 0deg)) rotateY(var(--trial-ry, 0deg));
  transition: transform 0.9s var(--ease-out);
}

.trial :is(.trial__axis, .trial__marker) {
  rotate: var(--trial-axis, 0deg);
}

.trial__marker {
  transform-box: view-box;
}

.trial .trial__marker circle {
  fill: #c98a1d;
  stroke: var(--c-sand);
  stroke-width: 3;
}

.trial__shine {
  translate: var(--gx, 0px) var(--gy, 0px);
  transition: translate 0.6s var(--ease-out);
}

.trial .trial__glint {
  stroke: #fff;
  stroke-width: 5;
  opacity: 0.8;
}

.trial .trial__glint-dot {
  fill: #fff;
  stroke: none;
  opacity: 0.85;
}

.trial__readout {
  fill: #8a5a12;
  font: 600 17px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-anchor: middle;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s;
}

.trial.is-live .trial__readout {
  opacity: 1;
}

.trial .trial__deg {
  transition: fill 0.3s;
}

.trial .trial__deg.is-near {
  fill: #8a5a12;
  font-weight: 700;
}

/* The frame is drawn line by line (each line measured as 1 in trialframe.js), its degrees appear,
   then the trial lenses slide in and the cylinder searches its axis before settling on it. */
.trial :is(.trial__line, .trial__ring, .trial__tick) {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation: trial-draw 1.4s var(--ease-in-out) var(--draw-at, 0.15s) both;
}

.trial .trial__ring--inner {
  --draw-at: 0.4s;
}

.trial .trial__tick {
  --draw-at: 0.65s;
}

.trial :is(.trial__knob, .trial__deg, .trial__marker) {
  animation: trial-fade 0.6s var(--ease-out) 1.25s both;
}

.trial__lens {
  animation: trial-in 1.1s var(--ease-out) both;
  animation-delay: calc(1.4s + var(--i, 0) * 0.35s);
}

.trial__axis {
  animation: trial-axis 4.2s var(--ease-in-out) 2.9s both;
}

@keyframes trial-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes trial-fade {
  from {
    opacity: 0;
  }
}

/* Phones: the frame larger, its temples leave the screen; only 0, 90 and 180 stay, readable. */
@media (max-width: 700px) {
  .glasses-hero__frame {
    overflow: hidden;
    padding-inline: 0;
  }

  .trial {
    width: 132%;
    max-width: none;
    margin-left: -16%;
  }

  .trial__deg {
    font-size: 26px;
  }

  .trial__deg:is(.trial__deg--minor, .trial__deg--outer) {
    display: none;
  }
}

@keyframes trial-in {
  from {
    opacity: 0;
    transform: translateY(-46px);
  }
}

/* The axis is sought on either side, then found. */
@keyframes trial-axis {
  25% {
    transform: rotate(-16deg);
  }

  55% {
    transform: rotate(14deg);
  }

  80% {
    transform: rotate(-5deg);
  }
}

/* Four exams, one per ruled square, with the reading chart beside them. */
.exams__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}

.exams__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--c-ink);
  list-style: none;
}

.exam {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem) clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--c-line-2);
}

.exam:nth-child(odd) {
  border-right: 1px solid var(--c-line-2);
}

.exam:nth-child(even) {
  padding-left: clamp(1rem, 2.5vw, 2rem);
}

.exam__icon {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--c-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.exam__ray {
  stroke: var(--c-blue);
}

.exam__dot {
  fill: var(--c-blue);
  stroke: none;
  transform-box: fill-box;
  transform-origin: center;
}

/* The light of each exam goes through its drawing when the exam comes on screen, and again under the
   pointer; the point it reaches lights up. */
@media (prefers-reduced-motion: no-preference) {
  .js .exam .exam__ray {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
  }

  .js .exam.is-visible .exam__ray {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s var(--ease-out) calc(var(--reveal-delay, 0s) + 0.35s);
  }

  .js .exam.is-visible:hover .exam__ray {
    animation: exam-ray 0.9s var(--ease-out);
  }

  .js .exam.is-visible:hover .exam__dot {
    animation: exam-dot 0.9s var(--ease-out) 0.4s;
  }
}

@keyframes exam-ray {
  from {
    stroke-dashoffset: 30;
  }
}

@keyframes exam-dot {
  50% {
    scale: 1.8;
  }
}

.exam__num {
  color: var(--c-blue);
  font: 500 var(--fs-label)/1 var(--font-mono);
  letter-spacing: 0.1em;
}

.exam__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.12;
}

/* The price, simply stated under the exams. */
.exams__price {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.75rem;
  color: var(--c-ink);
  font-weight: 700;
}

.exams__price .icon {
  margin-top: 0.2em;
  color: var(--c-blue);
}

/* After the appointment: two cases, side by side, no box. */
.after__paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--c-ink);
}

.after__path {
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 3rem) 0 0;
}

.after__path + .after__path {
  padding-left: clamp(1.25rem, 3vw, 3rem);
  border-left: 1px solid var(--c-line-2);
}

.after__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-light);
}

.after__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.after__path--alert .after__icon {
  background: var(--c-alert);
}

.after__case {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.after__figure {
  color: var(--c-blue);
  font: 600 clamp(4rem, 2rem + 6vw, 8.5rem)/0.9 var(--font-display);
  letter-spacing: -0.03em;
}

.after__result {
  max-width: 30rem;
  font: 500 var(--fs-lead)/1.4 var(--font-display);
}

.page-head__photo {
  width: min(100%, 440px);
  margin-left: auto;
}

.conditions__lead {
  margin: 1.25rem 0 2rem;
}

.conditions__cta {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .page-head__photo {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .glasses-hero__grid,
  .exams__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .glasses-hero__text {
    padding-inline: var(--gutter);
  }

  .glasses-hero__frame {
    padding: 0 var(--gutter) clamp(2.5rem, 8vw, 4rem);
  }
}

@media (max-width: 640px) {
  .exams__list,
  .after__paths {
    grid-template-columns: minmax(0, 1fr);
  }

  .exam:nth-child(odd) {
    border-right: 0;
  }

  .exam:nth-child(even) {
    padding-left: 0;
  }

  .after__path + .after__path {
    margin-top: 2rem;
    padding-left: 0;
    border-top: 1px solid var(--c-line-2);
    border-left: 0;
  }
}