/* Into the Wave — feuille de style unique
   Mobile d'abord. Points de rupture : 480 (petit téléphone), 768 (téléphone paysage, petite tablette),
   1024 (tablette, petit portable), 1440 (bureau), 1920 (grand écran, télévision).
   Les tailles de texte et les espaces sont des clamp() : ils suivent la largeur de l'écran. */

:root {
  --paper: #F4F0E8;
  --ink: #16181C;
  --text: #45423D;
  --gray: #8C8780;      /* grands textes, fond encre */
  --gray-s: #6E6A63;    /* petit texte gris sur papier : 4,7:1 (le gris #8C8780 ne donne que 3,1:1) */
  --gold: #B8955A;      /* accent : trait, grands chiffres, fond encre */
  --gold-s: #82642A;    /* or pour petit texte sur papier */
  --rule: rgba(22, 24, 28, .14);
  --placeholder: #DED8CC;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --margin: 20px;
  --gutter: 16px;

  /* texte courant : clamp(min, fluide, max), calé sur les tailles du bureau à 1440 px */
  --fs-body: clamp(15px, 1.1vw, 18px);
  --fs-body-s: clamp(14px, .97vw, 16px);
  --fs-label: clamp(11px, .83vw, 14px);
  --fs-label-s: clamp(11px, .76vw, 13px);
  --fs-intro: clamp(20px, 1.53vw, 26px);
  --fs-note: clamp(17px, 1.39vw, 24px);
  --fs-pv: clamp(20px, 1.67vw, 30px);
  --fs-ep: clamp(20px, 1.67vw, 28px);
  --fs-module: clamp(19px, 1.53vw, 26px);
  --fs-big-link: clamp(24px, 2.36vw, 40px);
  --fs-bn-text: clamp(20px, 1.8vw, 30px);
  --fs-brand: clamp(18px, 1.53vw, 26px);

  /* titres */
  --fs-mode: clamp(44px, 6.67vw, 96px);
  --fs-sub: clamp(28px, 3.34vw, 64px);
  --fs-mfp: clamp(36px, 3.89vw, 64px);
  --fs-project: clamp(30px, 4.44vw, 80px);
  --fs-section: clamp(40px, 6.67vw, 120px);
  --fs-about: clamp(36px, 5.56vw, 100px);
  --fs-num: clamp(72px, 8.33vw, 150px);
  --fs-contact: clamp(40px, 7.78vw, 160px);   /* le plus grand titre : jamais plus de 160 px */

  /* espaces verticaux */
  --sp-xl: clamp(64px, 8.9vw, 128px);
  --sp-l: clamp(56px, 7.8vw, 112px);
  --sp-m: clamp(48px, 6.7vw, 96px);
  --sp-s: clamp(32px, 4.4vw, 64px);
}

@media (min-width: 768px) {
  :root { --margin: clamp(24px, 3.9vw, 56px); --gutter: clamp(16px, 1.67vw, 24px); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 var(--fs-body)/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[hidden] { display: none !important; }

/* ---------- grille : contenu centré, 1440 px au plus ---------- */

.wrap { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--margin); padding-right: var(--margin); }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); }
.span-12, .span-8 { grid-column: 1 / -1; }

/* 768 à 1023 px : deux colonnes quand chacune fait au moins 320 px, sinon une seule */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
}
/* 1024 px et plus : grille de 12 colonnes */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .span-8 { max-width: calc(100% * 8 / 12); }
}

/* ---------- modes : sections propres à un mode ---------- */

body[data-mode="realiser"] [data-only="transmettre"],
body[data-mode="transmettre"] [data-only="realiser"] { display: none; }

/* ---------- typographie ---------- */

.label {
  font: 300 var(--fs-label)/1.5 var(--sans);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gray-s);
}
.label-gold { font-size: var(--fs-label-s); letter-spacing: .24em; color: var(--gold-s); }
.italic, .intro { font-family: var(--serif); font-style: italic; }
.intro { font-size: var(--fs-intro); line-height: 1.35; }
.body { font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.body-s { font-size: var(--fs-body-s); line-height: 1.7; color: var(--text); }
.h-section, .h-sub, .h-mfp, .h-about, .h-contact {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.h-section { font-size: var(--fs-section); line-height: .95; white-space: pre-line; }
.h-sub { font-size: var(--fs-sub); line-height: 1.05; }
.h-mfp { font-size: var(--fs-mfp); line-height: 1; letter-spacing: -.01em; }
.h-about { font-size: var(--fs-about); line-height: 1; letter-spacing: -.01em; }
.h-contact { font-size: var(--fs-contact); line-height: .95; }

.ext {
  position: relative;
  font: 300 var(--fs-label)/1.5 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  white-space: nowrap;
}
.ext-off { border-bottom: 0; padding-bottom: 0; color: var(--gray-s); cursor: default; }
/* Zone de toucher d'au moins 44 px de haut, sans changer la mise en page */
.ext:not(.ext-off)::after,
.brand::after, #nav-links a::after, .big-link::after, .ep-fi::after { content: ""; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }
@media (hover: hover) { a.ext:hover { color: var(--gray-s); } }

/* ---------- 1 · navigation ---------- */

.nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 24px; padding-top: clamp(20px, 2.5vw, 36px); padding-bottom: clamp(20px, 2.5vw, 36px); }
.brand { position: relative; font: 300 var(--fs-brand)/1.2 var(--serif); letter-spacing: .3em; text-transform: uppercase; text-decoration: none; }
#nav-links { display: flex; flex-wrap: wrap; gap: 26px 20px; }
#nav-links a { position: relative; font: 300 var(--fs-label)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--gray-s); transition: color .4s var(--ease); }
@media (min-width: 768px) { #nav-links { gap: 26px clamp(20px, 2.8vw, 40px); } #nav-links a { letter-spacing: .26em; } }
@media (hover: hover) { #nav-links a:hover { color: var(--ink); } }

/* ---------- 2 · accueil ---------- */

.home { padding-top: clamp(24px, 3.9vw, 56px); row-gap: 32px; }
.home-side { display: flex; flex-direction: column; gap: 14px; }
.home-modes { display: flex; flex-direction: column; min-width: 0; }
#modes { display: flex; flex-direction: column; }
.mode {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; width: 100%;
  padding: 18px 0; border-top: 1px solid var(--rule);
  color: var(--gray);
  transition: color .4s var(--ease);
}
.mode:last-child { border-bottom: 1px solid var(--rule); }
.mode-name { font: 300 var(--fs-mode)/1 var(--serif); letter-spacing: -.015em; transition: transform .5s var(--ease); }
.mode-tags { width: 100%; text-align: left; letter-spacing: .14em; }
.mode .dot { align-self: center; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity .4s var(--ease); }
/* Mode actif : mot en encre, point doré devant, mot décalé */
.mode[aria-pressed="true"] { color: var(--ink); }
.mode[aria-pressed="true"] .mode-name { transform: translateX(12px); }
.mode[aria-pressed="true"] .dot { opacity: 1; }
/* Flèche dorée à droite du mot : elle n'apparaît qu'au survol (ou au focus clavier) */
.mode-arrow { align-self: center; font: 300 32px/1 var(--sans); color: var(--gold); opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), margin-left .5s var(--ease); pointer-events: none; }
.mode[aria-pressed="true"] .mode-arrow { margin-left: 12px; }
.mode:focus-visible { color: var(--ink); }
.mode:focus-visible .mode-arrow { opacity: 1; transform: none; }
/* Le survol n'allume que le mot (aperçu) : le mode ne change qu'au clic. */
@media (hover: hover) {
  .mode:hover { color: var(--ink); }
  .mode:hover .mode-arrow { opacity: 1; transform: none; }
}
@media (min-width: 768px) {
  .mode { gap: 8px 32px; padding: 26px 0; }
  .mode-tags { width: auto; margin-left: auto; text-align: right; letter-spacing: .22em; }
  .mode[aria-pressed="true"] .mode-name { transform: translateX(28px); }
  .mode[aria-pressed="true"] .mode-arrow { margin-left: 28px; }
}
@media (min-width: 1024px) {
  .home-side { grid-column: 1 / span 4; padding-top: 18px; }
  .home-modes { grid-column: 5 / span 8; }
}
@media (min-width: 1440px) {
  .home-side { grid-column: 1 / span 3; }
  .home-modes { grid-column: 4 / span 9; }
}

/* ---------- 3 · la ligne : sur toute la largeur du contenu ---------- */

.line-section { padding-top: clamp(24px, 3.3vw, 48px); }
.line-btn { display: block; width: 100%; }
.line { display: flex; align-items: center; width: 100%; height: clamp(72px, 8.4vw, 140px); }
.ln { flex: 1 1 0; height: 1px; background: var(--ink); transform-origin: center; }
.line.on .ln { animation: wave 2.4s ease-in-out infinite; }
.line.on .ln:nth-child(2n) { animation-duration: 3.1s; }
.line.on .ln:nth-child(5n) { animation-duration: 1.9s; }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(var(--d, -18px)); } }
.line-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; padding-top: 10px; }
.line-note { order: 3; width: 100%; font: italic 300 var(--fs-note)/1.3 var(--serif); letter-spacing: .04em; text-align: left; }
@media (min-width: 768px) { .line-note { order: 0; width: auto; text-align: center; } }

/* ---------- 4 · MFP ---------- */

.mfp { padding-top: var(--sp-l); row-gap: 32px; align-items: end; }
.mfp-text { display: flex; flex-direction: column; gap: 14px; }
.mfp-diffusion { font: 300 13px/1.8 var(--sans); color: var(--gray); text-decoration: none; cursor: default; }
@media (min-width: 768px) { .mfp-diffusion { font-size: 14px; } }
/* sous 1024 px : une seule colonne, le paragraphe des antennes passe sous « Les neuf épisodes → » */
@media (min-width: 768px) and (max-width: 1023.98px) { .mfp { grid-template-columns: minmax(0, 1fr); } }
/* 1024 px et plus : 8 colonnes à gauche, une colonne vide, 3 colonnes à droite, calées en bas et à droite */
@media (min-width: 1024px) {
  .mfp { row-gap: 40px; }
  .mfp-text { grid-column: 1 / span 8; }
  .mfp-diffusion { grid-column: 10 / span 3; align-self: end; text-align: right; }
}

/* ---------- 5 + 9 · Transmettre ---------- */

.transmettre { padding-top: var(--sp-xl); padding-bottom: var(--sp-l); row-gap: clamp(40px, 3.9vw, 56px); }
.stats { display: contents; }
.stat { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--ink); min-width: 0; }
.stat .label { letter-spacing: .22em; }
.stat .body { margin-top: 6px; }
.num { font: 300 var(--fs-num)/.9 var(--serif); letter-spacing: -.02em; font-variant-numeric: lining-nums; }
.num-suffix { color: var(--gold); }
.formation { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gutter); row-gap: 40px; scroll-margin-top: 24px; }
.formation-intro { display: flex; flex-direction: column; gap: 14px; }
.modules { font-size: var(--fs-body); color: var(--text); min-width: 0; }
.module { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.module:first-child { border-top-color: var(--ink); }
.module:last-child { border-bottom: 1px solid var(--ink); }
.module-num { flex: 0 0 32px; letter-spacing: .2em; }
.module-title { flex: 1 1 auto; font: 300 var(--fs-module)/1.4 var(--serif); }
.module-text { flex: 1 0 100%; padding-left: 44px; color: var(--gray-s); }
.podcast-link { display: inline-flex; align-items: baseline; gap: .4em; min-height: 44px; font: 300 clamp(22px, 1.95vw, 28px)/1.3 var(--serif); color: var(--ink); text-align: left; }
.podcast-arrow { display: inline-block; transition: transform .3s var(--ease), color .3s var(--ease); }
.podcast-link:focus-visible .podcast-arrow { transform: translateX(8px); color: var(--gold); }
@media (hover: hover) { .podcast-link:hover .podcast-arrow { transform: translateX(8px); color: var(--gold); } }
.offres { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 8px; }
.offres > div { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 768px) {
  .formation { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .offres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
}
@media (min-width: 1024px) {
  .stat { grid-column: span 4; }
  .formation { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .formation-intro { grid-column: 1 / span 5; }
  .modules { grid-column: 7 / span 6; }
  .offres { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module { flex-wrap: nowrap; gap: 24px; }
  .module-num { flex-basis: 48px; }
  .module-title { flex: 0 0 clamp(110px, 10.4vw, 150px); }
  .module-text { flex: 1; padding-left: 0; }
}

/* ---------- 6 · photo pleine largeur ---------- */

.photo { padding-top: var(--sp-m); }
.photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--placeholder); }
.photo figcaption { max-width: 1440px; margin: 0 auto; padding: 12px var(--margin) 0; }
@media (min-width: 768px) { .photo img { aspect-ratio: 1440 / 680; } }
@media (min-width: 1920px) { .photo img { aspect-ratio: 16 / 9; } }

/* ---------- 7 · réalisation ---------- */

.realisation { padding: var(--sp-xl) 0 var(--sp-l); }
.realisation-in { position: relative; }
.r-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 32px; }
.r-head .italic { font-size: var(--fs-intro); }
.list { border-bottom: 1px solid var(--rule); }
.project { border-top: 1px solid var(--rule); transition: opacity .4s var(--ease); }
.list.hov .project { opacity: .28; }
.list.hov .project.sel { opacity: 1; }
.row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; width: 100%; padding: 22px 0; }
.row-num { flex: 0 0 32px; letter-spacing: .2em; }
.row-title { flex: 1 1 calc(100% - 48px); min-width: 0; font: 300 var(--fs-project)/1 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; transition: transform .5s var(--ease); }
.row-tag { flex: 1 0 100%; padding-left: 48px; letter-spacing: .18em; }
.eps { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 0 32px; }
.eps-label { padding-bottom: 12px; letter-spacing: .22em; }
.eps:not([hidden]) { animation: eps-in .4s var(--ease); }
@keyframes eps-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.ep { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.ep-play { flex: 1 0 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ep-num { flex: 0 0 36px; letter-spacing: .2em; }
.ep-title { flex: 1 1 calc(100% - 60px); min-width: 0; font: 300 var(--fs-ep)/1.3 var(--serif); overflow-wrap: anywhere; }
.ep-len { padding-left: 48px; letter-spacing: .16em; }
.ep.on .ep-title { color: var(--gold-s); }

/* ---------- lecteur maison d'un épisode ---------- */

.ep-player { display: flex; align-items: flex-start; gap: 16px; width: 100%; }
.ep-btn { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: var(--paper); display: grid; place-items: center; transition: background .3s var(--ease); }
.ep-btn-icon { position: relative; display: block; width: 12px; height: 14px; }
.ep-btn-icon::before { content: ""; position: absolute; left: 3px; top: 0; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent var(--ink); }
.ep-player.on .ep-btn { background: var(--ink); }
.ep-player.on .ep-btn-icon::before { left: 1px; width: 4px; height: 14px; border: 0; background: var(--paper); }
.ep-player.on .ep-btn-icon::after { content: ""; position: absolute; left: 8px; top: 0; width: 4px; height: 14px; background: var(--paper); }
.ep-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ep-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.ep-player .ep-title { flex: 1 1 10em; min-width: 0; font: 300 clamp(19px, 1.53vw, 22px)/1.25 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.ep-fi { position: relative; flex: 0 0 auto; font: 300 var(--fs-label)/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--gray-s); white-space: nowrap; transition: color .3s var(--ease); }
@media (hover: hover) { .ep-fi:hover { color: var(--ink); } }
.ep-foot { display: flex; align-items: center; gap: 16px; }
.ep-wave { flex: 1 1 0; min-width: 0; display: flex; align-items: center; height: 28px; }
.ep-wave .sg { flex: 1 1 0; height: 1px; background: var(--ink); transform-origin: center; }
.ep-player.on .ep-wave .sg { animation: wave 2.4s ease-in-out infinite; }
.ep-player.on .ep-wave .sg:nth-child(2n) { animation-duration: 3.1s; }
.ep-player.on .ep-wave .sg:nth-child(5n) { animation-duration: 1.9s; }
.ep-time { flex: 0 0 auto; min-width: 11ch; text-align: right; font: 300 var(--fs-label)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--gray-s); white-space: nowrap; }
.ep-feed { padding: 16px 0; }
.mfp-player { padding-top: 10px; }
.mfp-all { align-self: flex-start; }

.float {
  position: absolute; top: clamp(120px, 14vw, 200px); right: var(--margin); width: clamp(220px, 25vw, 360px); aspect-ratio: 4 / 5;
  background: var(--placeholder); pointer-events: none;
  opacity: 0; transform: translateY(16px) rotate(-1deg);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.float img { width: 100%; height: 100%; object-fit: cover; }
.float.show { opacity: 1; transform: none; }

.preview { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--gutter); row-gap: 16px; padding-top: 40px; }
.pv-num { letter-spacing: .2em; min-width: 2em; }
.pv-desc { font: 300 var(--fs-pv)/1.4 var(--serif); }
.pv-side { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.pv-side .label { letter-spacing: .22em; }
.pv-m { display: none; }

@media (min-width: 768px) {
  .r-head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; padding-bottom: 48px; }
  .row { flex-wrap: nowrap; gap: 24px; padding: 30px 0; }
  .row-num { flex-basis: 48px; }
  .row-title { flex: 1 1 auto; }
  .row-tag { flex: 0 1 38%; padding-left: 0; text-align: right; letter-spacing: .22em; }
  .project.sel .row-title { transform: translateX(24px); }
  .eps { padding: 8px 0 40px; }
  .ep { flex-wrap: nowrap; gap: 24px; }
  .ep-play { flex: 1 1 auto; flex-wrap: nowrap; gap: 24px; }
  .ep-title { flex: 1 1 auto; }
  .ep-len { padding-left: 0; }
}
@media (min-width: 1024px) {
  .row { gap: 40px; }
  .row-num { flex-basis: 64px; }
  .eps { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  .eps > * { grid-column: 2 / span 7; }
  .preview { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pv-num { grid-column: 1 / span 1; }
  .pv-desc { grid-column: 2 / span 6; }
  .pv-side { grid-column: 10 / span 3; }
}

/* Appareils sans survol, ou écran étroit : tout se fait au tap (aperçu sous le titre, puis épisodes) */
@media (max-width: 767.98px), (hover: none) {
  .float, .preview { display: none; }
  .project.previewing .pv-m { display: block; padding: 8px 0 32px; }
  .pv-m img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--placeholder); }
  .pv-m-desc { padding-top: 20px; font: 300 var(--fs-pv)/1.4 var(--serif); }
  .pv-m-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; padding-top: 16px; }
  .pv-m-listen { cursor: pointer; }
}
@media (min-width: 768px) and (hover: none) {
  .pv-m img { width: clamp(220px, 32vw, 420px); }
}

/* ---------- 8 · binaural : 100 % de la hauteur de l'écran, 1000 px au plus ---------- */

.binaural { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: min(100svh, 1000px); overflow: hidden; background: var(--ink); color: var(--paper); }
.bn-in { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding-top: 24px; padding-bottom: 24px; pointer-events: none; }
.bn-stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 280px; pointer-events: auto; }
.bn-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bn-hit { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.bn-hit:focus-visible { outline: 1px solid var(--paper); outline-offset: -12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.binaural .label { color: var(--gray); }
.bn-top, .bn-bottom { position: relative; z-index: 2; }
.bn-top { display: flex; flex-direction: column; gap: 8px; }
.bn-note { font-size: var(--fs-note); color: var(--gold); }
.bn-bottom { align-items: end; row-gap: 20px; }
.bn-text { font: 300 var(--fs-bn-text)/1.35 var(--serif); }
.bn-text.swap { animation: bn-in .4s var(--ease); }
@keyframes bn-in { from { opacity: 0; } to { opacity: 1; } }

/* dès 768 px : la zone de jeu couvre toute la section, les textes passent par-dessus */
@media (min-width: 768px) {
  .bn-in { padding-top: clamp(32px, 3.9vw, 56px); padding-bottom: clamp(32px, 3.9vw, 56px); }
  .bn-stage { position: absolute; inset: 0; min-height: 0; }
  .bn-top { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 24px; }
  .bn-note { font-size: clamp(17px, 1.53vw, 26px); }
}
@media (min-width: 1024px) {
  .bn-bottom .h-section { grid-column: 1 / span 6; }
  .bn-text { grid-column: 8 / span 5; }
}
/* écran bas (téléphone en paysage) : on garde la place pour les textes et la tête */
@media (min-width: 768px) and (max-height: 640px) { .binaural { min-height: 640px; } }

/* ---------- 10 · à propos ---------- */

.about { padding-top: var(--sp-l); padding-bottom: var(--sp-xl); border-top: 1px solid var(--rule); row-gap: clamp(32px, 3.3vw, 48px); }
.portrait { max-width: 100%; }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--placeholder); }
.portrait figcaption { padding-top: 10px; }
.about-text { display: flex; flex-direction: column; gap: 22px; font-size: var(--fs-body); line-height: 1.8; color: var(--text); }
.timeline { align-self: start; font-size: var(--fs-body-s); color: var(--text); }
.tl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--rule); }
.tl:first-child { border-top-color: var(--ink); }
.tl:last-child { border-bottom: 1px solid var(--rule); }
.tl-when { flex: 0 0 auto; color: var(--gray-s); }
@media (min-width: 768px) {
  .about > .label, .timeline { grid-column: 1 / -1; }
  .portrait { grid-column: 2; grid-row: 2 / span 2; }
  .tl { flex-wrap: nowrap; }
}
@media (min-width: 1024px) {
  .h-about { grid-column: 1 / span 7; }
  .portrait { grid-column: 9 / span 4; grid-row: 2 / span 3; }
  .about-text { grid-column: 1 / span 5; }
  .timeline { grid-column: 1 / span 7; }
}

/* ---------- 11 · contact ---------- */

.contact { padding-top: var(--sp-s); padding-bottom: clamp(32px, 3.3vw, 48px); border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.contact-main { align-items: end; row-gap: 32px; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.big-link { position: relative; font: 300 var(--fs-big-link)/1.2 var(--serif); text-decoration: none; transition: color .4s var(--ease); overflow-wrap: anywhere; }
@media (hover: hover) { a.big-link:hover { color: var(--gray-s); } }
.social { display: flex; flex-wrap: wrap; gap: 12px 32px; padding-top: 12px; }
.foot { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-label-s); letter-spacing: .24em; }
@media (min-width: 768px) { .foot { flex-direction: row; justify-content: space-between; gap: 24px; } }
@media (min-width: 1024px) {
  .h-contact { grid-column: 1 / span 7; }
  .contact-links { grid-column: 9 / span 4; }
}

#load-error { padding-top: 48px; padding-bottom: 48px; color: var(--text); }

/* ---------- petit téléphone (480 px et moins) : espacements de lettres resserrés ---------- */

@media (max-width: 480px) {
  .label { letter-spacing: .2em; }
  .ext { letter-spacing: .16em; }
  .brand { letter-spacing: .22em; }
  #nav-links { gap: 26px 16px; }
  #nav-links a { letter-spacing: .16em; }
  .mode-tags { letter-spacing: .14em; }
  .row-tag, .stat .label, .eps-label, .foot { letter-spacing: .14em; }
}

/* ---------- changement de mode : tout ce qui est sous le sélecteur fond en 200 ms, puis revient en 400 ms ---------- */

main > section:not(#top), footer { transition: opacity .4s var(--ease); }
body.swapping main > section:not(#top),
body.swapping footer { opacity: 0; transition-duration: .2s; }

/* ---------- mouvement réduit : plus d'ondulation ni de glissements ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line.on .ln, .eps:not([hidden]), .bn-text.swap, .ep-player.on .ep-wave .sg { animation: none; }
  .mode-arrow { transition: none; transform: none; }
  .podcast-arrow { transition: none; }
  .ep-btn { transition: none; }
  .project.sel .row-title,
  .float, .float.show { transform: none; }
}

/* ---------- impression, projection : noir sur blanc, sans la ligne animée ni l'écran binaural ---------- */

@media print {
  :root { --paper: #fff; --ink: #000; --text: #000; --gray: #333; --gray-s: #333; --gold: #000; --gold-s: #000; --rule: #999; --placeholder: #eee; }
  body { background: #fff; color: #000; }
  .line-section, .binaural, #player, .float, .preview, .pv-m { display: none !important; }
  main > section, footer { opacity: 1 !important; break-inside: avoid; }
  .photo img { aspect-ratio: auto; max-height: 40vh; }
}