/* Site marcpapillon.com — feuille de style commune */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --graphite: #3a3a38;
  --mist: #8a8a86;
  --veil: rgba(255, 255, 255, 0.72);
  --display: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Images provisoires : aplats de gris, remplacés plus tard par les vraies photos */
.placeholder {
  width: 100%;
  height: 100%;
  background: var(--tone, #e4e4e1);
}

/* ---------- Accueil : la grille ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cell {
  position: relative;
  overflow: hidden;
  transition: opacity 0.6s var(--ease), filter 0.6s var(--ease);
}

.cell a {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

.cell a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -6px;
}

.cell-media {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transition: transform 1.1s var(--ease);
}

.cell-media img {
  width: 100%;
  height: 100%;
  padding: 2.5%;
  object-fit: contain;
}

/* Accueil : damier à trois tons (gris, gris très clair, blanc). Deux cases voisines
   n'ont jamais la même couleur ; toutes les cases avancent ensemble d'une couleur à
   la suivante, le damier se décale doucement. La photo est posée en « multiply » :
   son fond blanc prend la couleur de la case, les musiciens gardent leurs tons. */
.cell-media {
  animation: damier 18s var(--ease) infinite;
}

/* Rang dans le damier : (ligne + colonne) modulo 3 */
.cell:nth-child(2) .cell-media,
.cell:nth-child(4) .cell-media,
.cell:nth-child(9) .cell-media {
  animation-delay: -6s;
}

.cell:nth-child(3) .cell-media,
.cell:nth-child(5) .cell-media,
.cell:nth-child(7) .cell-media {
  animation-delay: -12s;
}

.cell-media img {
  mix-blend-mode: multiply;
}

@keyframes damier {
  0%,
  27%,
  100% {
    background-color: #e1e1e1; /* gris */
  }
  33%,
  60% {
    background-color: #eeeeee; /* gris très clair */
  }
  66%,
  94% {
    background-color: #ffffff; /* blanc */
  }
}

@media (hover: hover) {
  .cell:hover .cell-media {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cell-media {
    animation-play-state: paused;
  }
}

/* Accueil : photos calées sur le bas de leur case, en fond perdu, sans être
   agrandies ni coupées (« contain » garde l'image entière).
   Explorations (8e) occupe toute la largeur de la case ; Contact (9e) est
   calé sur la droite. */
.cell:nth-child(2) .cell-media img,
.cell:nth-child(4) .cell-media img,
.cell:nth-child(7) .cell-media img,
.cell:nth-child(8) .cell-media img,
.cell:nth-child(9) .cell-media img {
  padding-bottom: 0;
  object-position: 50% 100%;
}

.cell:nth-child(8) .cell-media img {
  position: absolute;
  left: 0;
  bottom: 0;
  height: auto;
  padding: 0;
}

.cell:nth-child(9) .cell-media img {
  padding-right: 0;
  object-position: 100% 100%;
}

.cell-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 1.5rem;
  background: var(--veil);
  color: var(--ink);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 2.7vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
  opacity: 0;
}

/* Restructuration : le nom de chaque case reste affiché en permanence,
   en bas à gauche, sans voile sur la photo. */
.cell-title {
  inset: auto auto 0 0;
  display: block;
  padding: 0 0 1.1rem 1.4rem;
  background: none;
  font-size: clamp(1.3rem, 1.9vw, 2.2rem);
  text-align: left;
  text-shadow: 0 0 0.5em #fff, 0 0 0.25em #fff;
  font-family: "Space Grotesk", "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.95;
  opacity: 1;
}

/* Titre révélé : survol (ordinateur), focus clavier, ou centre de l'écran (téléphone) */
.cell.is-active .cell-title,
.cell:focus-within .cell-title {
  opacity: 1;
}

@media (hover: hover) {
  .cell:hover .cell-title {
    opacity: 1;
  }

  .cell:hover .cell-media {
    transform: scale(1.045);
  }

  .grid:has(.cell:hover) .cell:not(:hover) {
    opacity: 0.38;
    filter: grayscale(1);
  }
}

/* Photo qui suit le regard : dans la case survolée, l'image dérive de quelques
   pixels à l'opposé de la souris (positions envoyées par grid.js). L'image étant
   déjà agrandie au survol, ses bords ne se découvrent jamais. */
.cell-media img {
  translate: calc(var(--dx, 0) * -8px) calc(var(--dy, 0) * -5px);
  transition: translate 0.9s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .cell-media img {
    translate: none;
  }
}

/* Accueil : de fines lignes dessinent en permanence les 9 cases. */
.cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-right: 1px solid #d6d6d2;
  border-bottom: 1px solid #d6d6d2;
}

.cell:nth-child(3n)::after {
  border-right: 0;
}

.cell:nth-child(n + 7)::after {
  border-bottom: 0;
}

/* Une seule entrée orchestrée au chargement */
@keyframes surface {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.grid .cell {
  animation: surface 0.9s var(--ease) both;
  animation-delay: calc(var(--i) * 70ms);
}

/* Les musiciens montent doucement à leur place en sortant d'un léger flou,
   puis respirent : un agrandissement à peine perceptible, chacun à son rythme.
   L'agrandissement part du bord où la photo est posée, pour ne jamais la décoller. */
@keyframes eclore {
  from {
    transform: translateY(14px);
    filter: blur(6px);
  }
}

@keyframes souffle {
  to {
    scale: 1.022;
  }
}

.cell-media img {
  transform-origin: 50% 50%;
  animation:
    eclore 1.6s var(--ease) backwards,
    souffle 9s ease-in-out infinite alternate;
  animation-delay:
    calc(120ms + var(--i) * 90ms),
    calc(var(--i) * -2.3s);
}

.cell:nth-child(2) .cell-media img,
.cell:nth-child(4) .cell-media img,
.cell:nth-child(7) .cell-media img,
.cell:nth-child(8) .cell-media img {
  transform-origin: 50% 100%;
}

.cell:nth-child(9) .cell-media img {
  transform-origin: 100% 100%;
}

/* Les fines lignes du damier se tracent une fois les images arrivées */
@keyframes tracer {
  from {
    clip-path: inset(0 100% 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}

.cell::after {
  animation: tracer 1.4s var(--ease) both;
  animation-delay: calc(700ms + var(--i) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .cell-media img,
  .cell::after {
    animation: none;
  }
}

/* ---------- Téléphone : une colonne ---------- */

@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }

  .cell {
    aspect-ratio: 4 / 3;
  }

  .cell::after {
    border-right: 0;
  }

  .cell:nth-child(n + 7):not(:last-child)::after {
    border-bottom: 1px solid #d6d6d2;
  }

  .cell-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

/* ---------- Pages intérieures ---------- */

/* Bouton d'accueil : une fine barre sur toute la hauteur, à gauche,
   comme une barre de défilement. */
.home {
  --bar: 3rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: var(--bar);
  padding-top: 1.2rem;
  background: #f2f2f0;
  border-right: 1px solid #e2e2de;
  color: var(--graphite);
  font-family: "Marcellus", "Optima", serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.home:hover,
.home:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.home:focus-visible {
  outline: none;
}

.home svg {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
}

.home-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* Le contenu ne passe pas sous la barre */
body:has(> .home) {
  padding-left: 3rem;
}

/* Bandeau translucide en bas : page précédente et suivante,
   dans l'ordre de la grille d'accueil. Reste visible au défilement. */
.page-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 3rem;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 1.25rem calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--veil);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Marcellus", "Optima", serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.page-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.25rem 0.4rem;
  color: var(--graphite);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.page-nav-link:hover,
.page-nav-link:focus-visible {
  color: var(--ink);
}

.page-nav-arrow {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  transition: transform 0.3s var(--ease);
}

.page-nav-prev:hover .page-nav-arrow {
  transform: translateX(-0.25rem);
}

.page-nav-next:hover .page-nav-arrow {
  transform: translateX(0.25rem);
}

.page-nav-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Le bas du contenu ne reste pas caché sous le bandeau */
body:has(> .page-nav) {
  padding-bottom: 3.5rem;
}

@media (max-width: 760px) {
  .page-nav {
    padding-right: 0.6rem;
    padding-left: 0.6rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }

  .page-nav-title {
    white-space: normal;
    line-height: 1.25;
  }

  .page-nav-next {
    text-align: right;
  }
}

.page-body {
  max-width: 40rem;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 7rem;
}

.page-body h1 {
  margin: 0 0 2.5rem;
  color: var(--ink);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1;
}

.page-body p {
  margin: 0 0 1.25em;
  font-size: 1.125rem;
  line-height: 1.65;
}

.page-body .note {
  color: var(--mist);
  font-size: 0.9rem;
}

.page-body a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

/* ---------- Page Perturber : manifeste, tient sur un seul écran ---------- */

.manifesto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  /* Le bloc de texte est centré verticalement face à l'image */
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 5vw;
  height: 100vh;
  height: 100dvh;
  padding: 5rem 5vw 3rem;
  color: var(--graphite);
  overflow: hidden;
}

.manifesto-title {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(1.35rem, min(2.5vw, 4.6vh), 2.6rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.manifesto-intro {
  grid-column: 1;
  grid-row: 3;
  margin: clamp(1.5rem, 6vh, 3.5rem) 0 clamp(1rem, 3.5vh, 2rem);
  font-family: "Marcellus", "Optima", serif;
  font-size: clamp(0.85rem, min(1.1vw, 2vh), 1.05rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Les cinq groupes se répartissent sur trois colonnes équilibrées */
.manifesto-roles {
  grid-column: 1;
  grid-row: 4;
  columns: 3;
  column-gap: 1.5rem;
  font-family: "Literata", Georgia, serif;
  font-size: clamp(0.85rem, min(1.15vw, 2.1vh), 1.05rem);
  line-height: 1.6;
}

.manifesto-roles ul {
  margin: 0 0 0.9em;
  padding: 0;
  list-style: none;
  break-inside: avoid;
}

.manifesto-roles li {
  white-space: nowrap;
}

.manifesto-image {
  grid-column: 2;
  grid-row: 1 / -1;
  min-height: 0;
  margin: 0;
}

.manifesto-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Téléphone : impossible de tout faire tenir lisiblement, la page défile */
@media (max-width: 760px) {
  .manifesto {
    display: block;
    height: auto;
    padding: 5rem 1.5rem 4rem;
    overflow: visible;
    text-align: center;
  }

  .manifesto-title {
    font-size: clamp(1.3rem, 6.2vw, 1.8rem);
  }

  .manifesto-image {
    margin: 2rem 0;
  }

  .manifesto-image img {
    height: auto;
  }

  .manifesto-intro {
    margin: 0 0 1.25rem;
  }

  .manifesto-roles {
    columns: 2;
    font-size: 1rem;
    text-align: left;
  }
}

/* ---------- Page Contact : tient sur un écran d'ordinateur portable ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: 6vw;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 84rem;
  margin: 0 auto;
  padding: 4.5rem 5vw 2rem;
  color: var(--graphite);
  font-family: "Literata", Georgia, serif;
}

.contact-intro {
  max-width: 30rem;
}

.contact-title {
  margin: 0 0 clamp(1rem, 3vh, 1.8rem);
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(2rem, min(3.6vw, 6.5vh), 3.4rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.contact-intro > p {
  margin: 0 0 0.9em;
  font-size: clamp(0.88rem, 2.05vh, 1.04rem);
  line-height: 1.65;
}

/* L'appel final, en italique, détaché du texte d'information */
.contact-call {
  margin: clamp(1.2rem, 3.5vh, 2rem) 0 0;
  padding: 0 0 0 1.2rem;
  border-left: 1px solid var(--ink);
  color: var(--ink);
  font-style: italic;
}

.contact-call p {
  margin: 0 0 0.5em;
  font-size: clamp(0.9rem, 2.1vh, 1.08rem);
  line-height: 1.5;
}

.contact-call p:last-child {
  margin: 0;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 1.9vh, 1.2rem) 1rem;
}

.field-wide {
  grid-column: 1 / -1;
}

.contact-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.contact-form legend,
.contact-form label {
  padding: 0;
  color: var(--ink);
  font-size: clamp(0.85rem, 1.9vh, 0.95rem);
}

.field {
  display: grid;
  gap: 0.35rem;
}

.req {
  color: var(--mist);
  font-size: 0.85em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  padding: clamp(0.4rem, 1.2vh, 0.7rem) 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: #fafafa;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}

.contact-form textarea {
  height: clamp(4.5rem, 13vh, 7.5rem);
  resize: vertical;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  background: var(--paper);
}

/* Les cinq sujets sur deux colonnes */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1rem;
}

.choices legend {
  margin-bottom: 0.6rem;
}

.choices label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.82rem, 1.85vh, 0.92rem);
  cursor: pointer;
}

.choices input {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  accent-color: var(--ink);
}

.contact-form button {
  justify-self: start;
  margin-top: 0.3rem;
  padding: clamp(0.6rem, 1.6vh, 0.9rem) 2.6rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Marcellus", "Optima", serif;
  font-size: 1rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}

.contact-form button:hover,
.contact-form button:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 860px) {
  .contact {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 5rem 1.5rem 4rem;
  }

  .contact-intro {
    margin-bottom: 2.5rem;
  }

  .contact-form,
  .choices {
    grid-template-columns: 1fr;
  }
}

/* ---------- Page À propos ---------- */

.about {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 5vw 7rem;
  color: var(--graphite);
  font-family: "Literata", Georgia, serif;
}

.about p,
.about li {
  font-size: 1.04rem;
  line-height: 1.72;
}

.about p {
  margin: 0 0 1.1em;
}

.about ul {
  margin: 0 0 1.4em;
  padding: 0;
  list-style: none;
}

/* Liens dans le texte : couleur du texte, soulignement fin */
.about-body a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Ouverture : nom, rôles, phrase d'accueil, portrait */
.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: 6vw;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 5rem 0 4rem;
}

.about-name {
  margin: 0 0 1.6rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(3rem, 7.4vw, 6.8rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.about .about-roles {
  margin: 0 0 2.6rem;
  font-family: "Marcellus", "Optima", serif;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about .about-lede {
  max-width: 34rem;
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.2rem, 1.75vw, 1.5rem);
  line-height: 1.5;
}

.about-portrait {
  justify-self: center;
  margin: 0;
}

.about-portrait img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  max-height: 80svh;
}

/* Sections : intitulé à gauche, texte à droite */
.about-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: 4vw;
  padding: 4.5rem 0;
  border-top: 1px solid #d8d8d4;
}

.about-heading {
  margin: 0 0 1.2rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-section > .about-heading {
  align-self: start;
  position: sticky;
  top: 5rem;
}

.about-body {
  max-width: 46rem;
}

.about-subheading {
  margin: 2.2rem 0 1rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.04em;
}

/* Listes datées : publications, aventures */
.dated li {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  column-gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #ebebe8;
}

.dated li:first-child {
  border-top: 1px solid #ebebe8;
}

.dated-compact li {
  padding: 0.45rem 0;
}

.year {
  color: var(--mist);
  font-family: "Marcellus", "Optima", serif;
  font-size: 0.98rem;
  letter-spacing: 0.03em;
}

/* Thèmes : grandes lignes en italique */
.about .themes li {
  padding: 0.2rem 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
}

.about-quote {
  margin: 2.4rem 0 0;
  padding: 0 0 0 1.4rem;
  border-left: 1px solid var(--ink);
}

.about .about-quote p {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.55;
}

/* Références sur trois colonnes */
.refs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2rem;
}

.refs .about-subheading:first-child {
  margin-top: 1.2rem;
}

.about .refs li {
  padding: 0.15rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Références : logos puis listes sur toute la largeur de la section */
.refs-section .logo-wall,
.refs-section .refs {
  grid-column: 1 / -1;
}

.about .logo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  align-items: center;
  justify-items: center;
  gap: 2rem 1.6rem;
  margin: 2.5rem 0 1rem;
}

.logo-wall img {
  width: auto;
  max-width: 100%;
  height: 3.4rem;
  object-fit: contain;
}

.refs-section .refs {
  column-gap: 4vw;
  margin-top: 1rem;
}

/* À propos : la photo, entière dans son format d'origine, prend exactement la
   hauteur du texte, du haut des lettres de « Marc Papillon » au bas de la phrase d'accueil. */
.about-hero:has(.portrait-landscape) {
  --name-size: clamp(3rem, 7.4vw, 6.8rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-content: center;
  column-gap: 5vw;
}

.about-hero:has(.portrait-landscape) .about-name {
  font-size: var(--name-size);
}

.portrait-landscape {
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  /* écarts optiques : interligne au-dessus des capitales, sous la dernière ligne */
  margin: calc(var(--name-size) * 0.1) 0 0.55rem;
}

.portrait-landscape img {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
  max-height: none;
}

@media (max-width: 860px) {
  .portrait-landscape {
    margin: 2.5rem 0 0;
  }

  .portrait-landscape img {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Approche : sept textes sur deux colonnes */
.about-approach {
  padding: 5.5rem 0 0;
  border-top: 1px solid #d8d8d4;
}

.about-approach-title {
  max-width: 48rem;
  margin: 0 auto 4.5rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.5rem 6vw;
}

.approach ul li {
  position: relative;
  padding-left: 1.1rem;
}

.approach ul li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 0.45rem;
  height: 1px;
  background: currentColor;
}

.about .approach-key {
  margin: 1.6rem 0 0;
  padding-left: 1.2rem;
  border-left: 1px solid var(--ink);
  color: var(--ink);
  font-style: italic;
  font-size: 1.12rem;
  line-height: 1.55;
}

.about .about-closing {
  max-width: 40rem;
  margin: 6rem auto 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 860px) {
  .about {
    padding: 0 1.5rem 5rem;
  }

  .about-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 5rem;
  }

  .about-portrait {
    margin-top: 3rem;
  }

  .about-section {
    grid-template-columns: 1fr;
    padding: 3.5rem 0;
  }

  .about-section > .about-heading {
    position: static;
  }

  .refs,
  .approach-grid {
    grid-template-columns: 1fr;
  }

  .dated li {
    grid-template-columns: 5.2rem 1fr;
  }
}

/* ---------- Page Explorations : galerie sur un seul écran ---------- */

.gallery-page {
  --gap: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 4.5rem 5vw;
}

.gallery-title {
  margin: 0 0 clamp(1.5rem, 4.5vh, 3rem);
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(1.8rem, min(3.4vw, 6vh), 3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Recherche & développement ---------- */

.rd-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: 4vw;
  padding: clamp(5rem, 14vh, 9rem) 0 4.5rem;
}

.rd-title {
  grid-column: 1 / -1;
  margin: 0 0 2.5rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 7.5vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.about .rd-lede {
  grid-column: 2;
  max-width: 34rem;
  margin: 0 0 2.2rem;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.45;
}

.rd-intro-body {
  grid-column: 2;
  max-width: 46rem;
}

/* Explorations : photo d'ouverture, titre posé dans le ciel */
.explorations-hero {
  position: relative;
  grid-column: 1 / -1;
  margin: 0 0 3.5rem;
}

.explorations-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 1340;
  object-fit: cover;
  object-position: 65% 100%;
}

/* En fond perdu, la photo touche le haut de la page */
.rd-intro:has(.explorations-hero.bleed) {
  padding-top: 0;
}

.explorations-hero .rd-title {
  position: absolute;
  top: 12%;
  left: 5%;
  margin: 0;
}

/* Run Rhythm : texte puis la boucle geste → retour */
.rd-feature {
  padding: 4.5rem 0 5rem;
  border-top: 1px solid #d8d8d4;
}

.rd-feature-text {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  column-gap: 4vw;
}

.loop {
  margin: 4rem 0 0;
  color: var(--ink);
}

.loop-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Le fil qui relie les quatre étapes */
.loop-steps::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: 12.5%;
  right: 12.5%;
  border-top: 1px solid var(--ink);
}

.loop-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 2rem 0.8rem 0;
  text-align: center;
}

.loop-steps li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  width: 0.7rem;
  height: 0.7rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.loop-word {
  font-family: "Marcellus", "Optima", serif;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  letter-spacing: 0.04em;
}

.about .loop-note {
  max-width: 13rem;
  color: var(--mist);
  font-size: 0.9rem;
  line-height: 1.45;
}

.loop-return {
  display: block;
  width: 100%;
  height: 4.5rem;
  margin-top: 1rem;
}

.loop-caption {
  margin-top: 0.6rem;
  font-style: italic;
  text-align: center;
}

/* Prototypes : photos réduites */
.rd-prototypes {
  padding: 4.5rem 0 2rem;
  border-top: 1px solid #d8d8d4;
}

.rd-prototypes > p {
  max-width: 34rem;
}

.rd-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 11rem));
  gap: 1.2rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.rd-photos img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

@media (max-width: 760px) {
  .rd-intro {
    grid-template-columns: 1fr;
    padding-top: 5rem;
  }

  .about .rd-lede,
  .rd-intro-body {
    grid-column: 1;
  }

  .explorations-hero img {
    aspect-ratio: 4 / 3;
  }

  .rd-feature-text {
    grid-template-columns: 1fr;
  }

  /* Téléphone : la boucle se lit de haut en bas */
  .loop-steps {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .loop-steps::before {
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.35rem;
    right: auto;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }

  .loop-steps li {
    justify-items: start;
    padding: 0 0 0 2rem;
    text-align: left;
  }

  .loop-steps li::before {
    top: 0.45rem;
    left: 0;
  }

  .loop-return {
    display: none;
  }

  .loop-caption {
    padding-left: 2rem;
    text-align: left;
  }

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

/* Largeur calculée pour que les deux rangées tiennent dans la hauteur de l'écran */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  width: min(90vw, calc((100dvh - 9rem - var(--gap)) / 2 * 4 / 3 * 3 + 2 * var(--gap)));
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Variante : une rangée de photos verticales (Recherche & développement) */
.gallery-portrait {
  width: min(90vw, calc((100dvh - 16rem) * 0.75 * 3 + 2 * var(--gap)));
}

.gallery-portrait img {
  aspect-ratio: 3 / 4;
}

@media (max-width: 760px) {
  .gallery-page {
    display: block;
    padding: 5rem 1.5rem 4rem;
  }

  .gallery-title {
    text-align: center;
  }

  .gallery {
    grid-template-columns: 1fr;
    width: auto;
    gap: 1.5rem;
  }
}

/* Explorations : la galerie suit le texte, sur toute la largeur de la page */
.explorations-gallery {
  --gap: clamp(1rem, 2.5vw, 2rem);
  width: auto;
  margin-top: 4.5rem;
}


/* Explorations : images des vidéos de course avec la basse, en vertical */
.about .basse-title {
  margin: 5rem 0 1.5rem;
}

.basse-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.5vw, 1.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.basse-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 922;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.basse-gallery a:hover img,
.basse-gallery a:focus-visible img {
  opacity: 0.8;
}

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

/* ---------- Page Témoignages ---------- */

.testimonials {
  max-width: 80rem;
  margin: 0 auto;
  padding: 5.5rem 5vw 7rem;
  color: var(--graphite);
  font-family: "Literata", Georgia, serif;
}

.testimonials-title {
  margin: 0 0 4rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.testimonials p {
  margin: 0 0 1em;
  font-size: 1rem;
  line-height: 1.7;
}

/* Dédicaces de Raoul Tubiana et d'I.A. Kapandji */
.dedications {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5vw;
  padding-bottom: 4.5rem;
}

.dedication {
  container-type: inline-size;
}

/* Les deux livres à la même hauteur ; le plus large (ratio 1000/608) fixe la limite */
.dedication img {
  width: auto;
  max-width: 100%;
  height: min(22rem, 100cqw * 608 / 1000);
  margin-bottom: 1.6rem;
}

.dedication blockquote {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--ink);
}

.testimonials .dedication blockquote p {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
}

.dedication-name {
  margin: 0 0 0.7rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Lettres de recommandation */
.letters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 54rem;
  margin: 0 auto;
  padding: 4.5rem 0;
  border-top: 1px solid #d8d8d4;
}

.letters a {
  display: block;
  box-shadow: 0 0 0 1px #e2e2de;
  transition: transform 0.4s var(--ease);
}

.letters a:hover,
.letters a:focus-visible {
  transform: translateY(-4px);
}

.letters img {
  width: 100%;
  height: auto;
}

/* Témoignages sur trois colonnes */
.testimony-list {
  columns: 3 18rem;
  column-gap: 4rem;
  margin: 0;
  padding: 4.5rem 0 0;
  border-top: 1px solid #d8d8d4;
  list-style: none;
}

.testimony {
  break-inside: avoid;
  padding-bottom: 3rem;
}

.testimony-head {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-bottom: 1rem;
}

.testimony-thumb {
  flex: none;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  object-fit: cover;
}

.testimony-name {
  margin: 0;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.testimonials .testimony-role {
  margin: 0.2rem 0 0;
  color: var(--mist);
  font-size: 0.82rem;
  line-height: 1.4;
}

.testimony blockquote {
  margin: 0;
}

.testimonials .testimony blockquote p {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.68;
}

.testimony blockquote p::before {
  content: "« ";
}

.testimony blockquote p::after {
  content: " »";
}

.testimony[lang="en"] blockquote p::before {
  content: "“";
}

.testimony[lang="en"] blockquote p::after {
  content: "”";
}

.testimonials-en {
  margin-top: 3rem;
}

.testimonials-subtitle {
  margin: 0 0 0;
  padding: 3rem 0;
  border-top: 1px solid #d8d8d4;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.testimonials-en .testimony-list {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 860px) {
  .testimonials {
    padding: 5rem 1.5rem 4rem;
  }

  .dedications {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .letters {
    gap: 1rem;
  }
}

/* ---------- Image agrandie (clic pour ouvrir, clic pour fermer) ---------- */

a.zoom {
  cursor: zoom-in;
}

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 2.5vh 2.5vw;
  border: 0;
  background: rgba(255, 255, 255, 0.97);
  cursor: zoom-out;
}

.lightbox[open] {
  display: grid;
  place-items: center;
  animation: surface 0.35s var(--ease);
}

.lightbox:focus {
  outline: none;
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox img {
  max-width: 100%;
  max-height: 95vh;
  max-height: 95dvh;
  width: auto;
  height: auto;
  box-shadow: 0 0 0 1px #e2e2de;
}

/* ---------- Page Recherche scientifique (s'appuie sur les styles d'À propos) ---------- */

.about-name-long {
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
}

.about .lead-line {
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
}

.about .after-quote {
  margin-top: 2rem;
}

.hope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6vw;
  margin-top: 5rem;
  padding-top: 4rem;
  border-top: 1px solid #d8d8d4;
}

.about .hope p {
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.45;
}

.hope-label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: "Marcellus", "Optima", serif;
  font-style: normal;
  font-size: 0.75em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.prevention {
  margin-top: 5.5rem;
}

.prevention .about-approach-title {
  max-width: 58rem;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}

.prevention-body {
  max-width: 42rem;
  margin: 0 auto;
}

@media (max-width: 860px) {
  .hope {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Photos en fond perdu, de la barre d'accueil au bord droit de l'écran
   (Recherche scientifique, Santé de l'artiste) */
.has-bleed {
  overflow-x: clip;
}

.about .bleed {
  width: calc(100vw - 3rem);
  margin-left: calc(50% - 50vw + 1.5rem);
}

.about figure.bleed {
  margin-top: 0;
  margin-bottom: 0;
}

/* Bande panoramique entre deux sections : la photo entière, sans recadrage */
.band img {
  width: 100%;
  height: auto;
}

/* Sous une photo, le filet de séparation n'a plus lieu d'être */
.about .bleed + .about-section,
.about .bleed + .about-approach,
.about .bleed + .part-header,
.about .bleed + .directions {
  border-top: 0;
}

.fd-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}

.fd-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  animation: fd-settle 2.4s var(--ease) both;
}

/* voile sombre en bas : le titre reste lisible sur les touches blanches */
.fd-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
}

.fd-hero-text {
  position: relative;
  z-index: 1;
  max-width: 76rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 5vw clamp(3.5rem, 9vh, 6rem);
}

.fd-title {
  margin: 0 0 1.2rem;
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.about .fd-roles {
  margin: 0;
  font-family: "Marcellus", "Optima", serif;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
}

@keyframes fd-settle {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
}

/* Citation posée sur la photo */
.fd-quote {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 85vh, 52rem);
  overflow: hidden;
  background: var(--ink);
}

.fd-quote img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 35%;
  opacity: 0.8;
}

/* Voile sombre à gauche : la citation se pose dans le noir, l'altiste reste visible à droite */
.fd-quote::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 40%, rgba(0, 0, 0, 0) 65%);
}

.fd-quote blockquote {
  position: relative;
  z-index: 1;
  justify-self: start;
  max-width: 34rem;
  margin: 0 0 0 max(6vw, calc((100% - 76rem) / 2 + 5vw));
  padding: 0;
}

.about .fd-quote blockquote p {
  text-align: left;
}

@media (max-width: 860px) {
  .fd-quote img {
    opacity: 0.45;
  }

  .fd-quote blockquote {
    justify-self: center;
    margin: 0;
    padding: 0 6vw;
  }

  .about .fd-quote blockquote p {
    text-align: center;
  }
}

.about .fd-quote p {
  margin: 0;
  color: var(--paper);
  font-style: italic;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.3;
  text-align: center;
}

.about .fd-quote p::before,
.about .fd-quote p::after {
  font-family: "Marcellus", "Optima", serif;
  font-style: normal;
}

.about .fd-quote p::before {
  content: "« ";
}

.about .fd-quote p::after {
  content: " »";
}

/* Texte posé sur la photo, à gauche, dans la partie sombre */
.fd-overlay {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(28rem, 72vh, 44rem);
  overflow: hidden;
  background: var(--ink);
}

/* La photo occupe la droite et se fond dans le noir du côté du texte */
.fd-overlay img {
  position: absolute;
  top: 0;
  right: 0;
  width: 68%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 45%;
}

.fd-overlay::after {
  content: "";
  position: absolute;
  inset: 0 0 0 32%;
  background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 18%, rgba(0, 0, 0, 0) 45%);
}

.fd-overlay-text {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin-left: max(6vw, calc((100% - 76rem) / 2 + 5vw));
  padding: 3rem 0;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
  padding-left: 2rem;
}

.about .fd-overlay .about-heading {
  margin-bottom: 1.6rem;
  color: var(--paper);
  letter-spacing: 0.12em;
}

.about .fd-overlay p {
  color: rgba(255, 255, 255, 0.86);
  font-style: italic;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.7;
}

.about .fd-overlay p:last-child {
  margin-bottom: 0;
}

/* Deux embouchures côte à côte */
.fd-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fd-pair img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

@media (max-width: 860px) {
  .fd-hero img {
    object-position: 62% 40%;
  }

  .fd-hero-text {
    padding: 0 1.5rem 3rem;
  }

  .fd-pair {
    grid-template-columns: 1fr;
  }

  /* Téléphone : la photo au-dessus, le texte en dessous sur fond noir */
  .fd-overlay {
    display: block;
    height: auto;
  }

  .fd-overlay img {
    position: static;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .fd-overlay::after {
    display: none;
  }

  .fd-overlay-text {
    margin: 0;
    padding: 2.5rem 1.5rem 3rem 2.5rem;
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fd-hero img {
    animation: none;
  }
}

/* ---------- Page Santé de l'artiste (s'appuie sur les styles d'À propos) ---------- */

.part-header {
  padding: 6rem 0 1rem;
  border-top: 1px solid #d8d8d4;
}

.part-header .about-approach-title {
  margin-bottom: 1.5rem;
}

.about .part-lede {
  max-width: 40rem;
  margin: 0 auto 2rem;
  color: var(--ink);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  text-align: center;
}

.theme-num {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--mist);
  font-size: 0.85em;
  letter-spacing: 0.08em;
}

/* Listes à tiret */
.about ul.dash li,
.about ul.steps li {
  position: relative;
  padding-left: 1.2rem;
}

.about ul.dash li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 0.5rem;
  height: 1px;
  background: currentColor;
}

.about ul.steps {
  counter-reset: step;
}

.about ul.steps li {
  padding: 0.55rem 0 0.55rem 2.2rem;
  border-bottom: 1px solid #ebebe8;
  counter-increment: step;
}

.about ul.steps li::before {
  content: counter(step);
  position: absolute;
  top: 0.55rem;
  left: 0;
  color: var(--mist);
  font-family: "Marcellus", "Optima", serif;
}

.two-cols {
  columns: 2 16rem;
  column-gap: 2.5rem;
}

.two-cols li {
  break-inside: avoid;
}

/* Thèmes des ateliers : un nuage de mots */
.about ul.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.4rem 0 1.8rem;
}

.about ul.topics li {
  padding: 0.3rem 0.8rem;
  border: 1px solid #d8d8d4;
  border-radius: 2rem;
  font-size: 0.88rem;
  line-height: 1.4;
}

.about .formation-titles li {
  padding: 0.8rem 0;
  border-bottom: 1px solid #ebebe8;
  color: var(--ink);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.45;
}

.about .formation-titles li:first-child {
  border-top: 1px solid #ebebe8;
}

.about .contact-line {
  margin-top: 2rem;
  color: var(--ink);
}

.about .contact-line a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

/* Photos */
.photo-strip {
  margin: 1rem 0 4rem;
}

.photo-strip img {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: cover;
}

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin: 1rem 0 5rem;
  padding: 0;
  list-style: none;
}

.photo-wall img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: opacity 0.3s var(--ease);
}

.photo-wall a:hover img,
.photo-wall a:focus-visible img {
  opacity: 0.8;
}

/* Sessions et directions en colonnes */
.sessions,
.directions {
  padding: 4.5rem 0;
  border-top: 1px solid #d8d8d4;
}

.sessions-title {
  margin: 0 0 3rem;
  color: var(--ink);
  font-family: "Marcellus", "Optima", serif;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
}

.sessions-grid,
.directions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.directions-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem;
}

.about .direction-sub {
  margin: -0.8rem 0 1rem;
  color: var(--mist);
  font-style: italic;
  font-size: 0.92rem;
}

.sante-footer {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding: 5rem 0 0;
  border-top: 1px solid #d8d8d4;
  text-align: center;
}

.qualiopi {
  width: 15rem;
  height: auto;
}

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

@media (max-width: 860px) {
  .sessions-grid,
  .directions-grid {
    grid-template-columns: 1fr;
  }

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

/* ---------- Page Éditions (s'appuie sur les styles d'À propos) ---------- */

.editions .zoom img {
  box-shadow: 0 0 0 1px #e2e2de;
}

.cover-hero {
  width: min(100%, 30rem);
}

.cover-hero img {
  width: 100%;
  height: auto;
}

/* Couvertures en livres posés, de face : au survol, la couverture pivote
   sur sa reliure et laisse voir la première page. */
.book3d {
  position: relative;
  display: block;
  perspective: 1800px;
  perspective-origin: 50% 40%;
  margin-right: 6%;
}

.book3d-back,
.book3d-pages {
  position: absolute;
  inset: 0;
}

.book3d-back {
  background: #f3f3f1;
  border: 1px solid #dcdcd8;
  transform: translate(2.5%, 1.2%);
  box-shadow: 1.5rem 2.2rem 3rem -1.2rem rgba(0, 0, 0, .28);
}

.book3d-pages {
  inset: 0.6% 0.4% 0.6% 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .04) 4%, transparent 12%),
    #fdfdfc;
  box-shadow:
    1px 1px 0 #dcdcd8, 2px 2px 0 #fbfbfa, 3px 3px 0 #dcdcd8,
    4px 4px 0 #fbfbfa, 5px 5px 0 #d2d2ce;
}

.book3d-cover {
  position: relative;
  display: block;
  transform-origin: left center;
  transform: rotateY(0deg);
  transition: transform .7s var(--ease);
  box-shadow: 1.2rem 1rem 2rem rgba(0, 0, 0, .2);
}

/* Pli de la reliure et léger reflet sur le carton */
.book3d-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .22) 0,
      rgba(255, 255, 255, .35) 1.2%,
      rgba(0, 0, 0, .08) 2.6%,
      transparent 5%),
    linear-gradient(100deg, transparent 55%, rgba(255, 255, 255, .18) 75%, transparent 90%);
}

.editions .book3d img {
  box-shadow: none;
}

/* Petits livres de la série : perspective plus courte pour garder le relief */
.book-grid .book3d {
  perspective: 1300px;
}

.book-grid .book3d-cover {
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, .18);
}

.book-grid .book3d-back {
  box-shadow: 0.6rem 1rem 1.5rem -0.6rem rgba(0, 0, 0, .22);
}

.book .book3d:hover {
  transform: none;
}

@media (hover: hover) {
  .book3d:hover .book3d-cover {
    transform: rotateY(-42deg);
  }

  .book-grid .book3d:hover .book3d-cover {
    transform: rotateY(-38deg);
  }
}

.book-series {
  padding: 5rem 0 4rem;
  border-top: 1px solid #d8d8d4;
}

.series-header {
  margin-bottom: 3.5rem;
  text-align: center;
}

.series-header .about-approach-title {
  margin-bottom: 1rem;
}

/* Sous-titre d'une série, plus petit, sous le titre principal */
.series-subtitle {
  display: block;
  margin-top: 0.4em;
  font-size: 0.45em;
  letter-spacing: 0.06em;
}

/* Livre seul : la 1re de couverture en grand ; le clic ouvre la couverture complète */
.book-spread {
  max-width: 30rem;
  margin: 0 auto;
}

.book-spread img {
  width: 100%;
  height: auto;
}

.about .series-kicker {
  margin: 0 0 0.8rem;
  color: var(--mist);
  font-family: "Marcellus", "Optima", serif;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.about .series-note {
  margin: 0;
  font-style: italic;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 3rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book img,
.cover-row img,
.book-cover img {
  width: 100%;
  height: auto;
}

.book a,
.cover-row a,
.book-cover a {
  display: block;
  transition: transform 0.4s var(--ease);
}

.book a:hover,
.cover-row a:hover,
.book-cover a:hover {
  transform: translateY(-4px);
}

.about .book-title {
  margin: 1.6rem 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.section-side {
  align-self: start;
  position: sticky;
  top: 5rem;
}

.cover-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

.book-with-cover {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 2.5rem;
  max-width: none;
}

.book-cover {
  margin: 0.4rem 0 0;
}

/* Grand écran : la grille déborde un peu de la colonne de texte pour agrandir les livres */
@media (min-width: 1101px) {
  .about .book-grid {
    margin: 0 -6rem;
    column-gap: 1.5rem;
  }
}

@media (max-width: 1100px) {
  .book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

  .section-side {
    position: static;
    margin-bottom: 1.5rem;
  }

  .book-with-cover {
    grid-template-columns: 1fr;
  }

  .book-cover {
    width: 60%;
  }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* Esperluette réduite dans le titre « Recherche & développement » */
.amp {
  font-size: 0.6em;
}

/* Accueil : eau qui jaillit sous la souris (dessiné par grid.js) */
.trace {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Accueil : bouton « son » discret, en haut à gauche (créé par son.js).
   Le petit rond se remplit quand le son est activé. */
.son {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.45em 0.9em;
  border: 1px solid #d6d6d2;
  border-radius: 2em;
  background: var(--veil);
  color: var(--graphite);
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.son::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background 0.3s var(--ease);
}

.son[aria-pressed="true"]::before {
  background: currentColor;
}

.son:hover,
.son:focus-visible {
  border-color: var(--graphite);
  color: var(--ink);
  outline: none;
}

/* Anatomie : séries d'exemples, petites vignettes à agrandir */
.anatomy-series {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anatomy-series img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

/* artisteconnexion.com : champ piège à robots et message après l'envoi */
.contact-trap {
  position: absolute;
  left: -9999px;
}

.contact-status {
  min-height: 1.5em;
  margin: 0;
  font-style: italic;
}