/* ==========================================================================
   SITE BAPTISTE HERBIN — feuille de style unique (« Souffle »)
   --------------------------------------------------------------------------
   Idée directrice : le site est un instrument. Le texte respire (graisse
   variable de Montserrat qui enfle et dégonfle), l'accueil est l'onde sonore
   des concerts, la colonne blanche du site actuel devient le pupitre.

   Sommaire
    1. Polices et variables
    2. Base
    3. Typographie : titres qui vibrent, graisse réservée
    4. Colonne blanche (ordinateur : à gauche / téléphone : en bas)
    5. Menu
    6. Rideau (transition entre les pages)
    7. Scène (lecteur vidéo / Spotify qui suit la navigation)
    8. Loupe (photos en plein écran)
    9. Éléments communs : actions, cadre double, listes de dates
   10. Pied de page
   11. Accueil
   12. Tour dates (partition + registre)
   13. Biographie
   14. Projets
   15. Discographie (le bac à disques)
   16. Vidéos
   17. Photos (planche contact)
   18. Équipement (la fiche technique)
   19. Contacts, 404
   20. Mouvement réduit
   ========================================================================== */


/* 1. POLICES ET VARIABLES ================================================ */

/* Montserrat (police du site actuel) en version VARIABLE : une seule police
   qui couvre toutes les graisses de 100 à 900. C'est elle qui permet aux
   mots de « respirer ». Fichiers auto-hébergés (pas d'appel à Google). */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-italique-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-italique-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Valeur animée lettre par lettre par le vibrato (voir §3). Déclarée comme
   nombre pour que le navigateur sache l'interpoler. */
@property --onde {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  /* Couleurs du site actuel, à l'identique */
  --noir: #000;
  --encre: #131313;
  --blanc: #fff;
  --orange: #FF6600;
  --gris: #949494;
  --gris-clair: #CBCBCB;
  --gris-fonce: #7A7A7A;
  --texte: #dcdcdc;                 /* texte courant sur fond noir */
  --filet: rgba(255, 255, 255, .16); /* traits fins */
  --filet-fort: rgba(255, 255, 255, .42);

  --f: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Mise en page */
  --colonne: 84px;                  /* largeur de la colonne blanche (ordinateur) */
  --barre: 60px;                    /* hauteur de la barre blanche (téléphone) */
  --marge: clamp(20px, 5vw, 80px);  /* marge latérale du contenu */
  --respiration: clamp(88px, 14vw, 200px); /* espace entre les grandes parties */
  --largeur-texte: 38rem;

  /* Courbes de mouvement */
  --sortie: cubic-bezier(.22, 1, .36, 1);
  --souple: cubic-bezier(.65, 0, .35, 1);

  /* Bas de l'écran réellement libre (barre blanche + encoche iPhone) */
  --bas-libre: 0px;
}

@media (max-width: 899px) {
  :root { --bas-libre: calc(var(--barre) + env(safe-area-inset-bottom, 0px)); }
}


/* 2. BASE ================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  background: var(--noir);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--noir);
  color: var(--texte);
  font-family: var(--f);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* La colonne blanche occupe la gauche (ordinateur) ou le bas (téléphone) */
@media (min-width: 900px) {
  body { padding-left: var(--colonne); }
}
@media (max-width: 899px) {
  body { padding-bottom: var(--bas-libre); }
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* pas de mot (ou de guillemet) tout seul sur la dernière ligne d'un titre */
h1, h2, h3 { text-wrap: balance; }
p, blockquote { text-wrap: pretty; }

::selection { background: var(--orange); color: var(--noir); }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.evitement {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--orange);
  color: var(--noir);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* Icônes du sprite (Phosphor, graisse fine) */
.i {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: currentColor;
}

/* Texte réservé à la souris ou au doigt */
@media (hover: hover) and (pointer: fine) { .si-doigt { display: none !important; } }
@media not ((hover: hover) and (pointer: fine)) { .si-souris { display: none !important; } }

/* Images : apparition douce quand elles sont chargées (classe posée en JS) */
.charge { opacity: 0; transition: opacity .9s var(--sortie); }
.charge.est-chargee { opacity: 1; }

/* overflow-x: clip (et pas hidden) : rien ne peut déborder sur le côté et
   élargir la page sur téléphone, sans casser les éléments collants (sticky) */
.page { position: relative; overflow-x: clip; }

/* Conteneur standard des pages intérieures */
.bloc {
  padding-left: var(--marge);
  padding-right: var(--marge);
}


/* 3. TYPOGRAPHIE ========================================================== */

/* Titres de page : très grands, très fins par défaut. */
.entete {
  padding: clamp(56px, 10vw, 140px) var(--marge) clamp(40px, 6vw, 80px);
}
.entete__titre {
  color: var(--blanc);
  font-size: clamp(3.4rem, 12.5vw, 11.5rem);
  font-weight: 200;
  line-height: .88;
  letter-spacing: -.045em;
  margin-left: -.04em;
}
.entete__chapo {
  margin-top: clamp(20px, 3vw, 36px);
  max-width: 34rem;
  color: var(--gris-clair);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  line-height: 1.5;
}
.entete__chapo strong { color: var(--blanc); font-weight: 600; }

.titre-section {
  color: var(--blanc);
  font-size: clamp(2.6rem, 7.5vw, 6.5rem);
  font-weight: 200;
  line-height: .92;
  letter-spacing: -.04em;
}

.sous-titre {
  display: flex;
  align-items: baseline;
  gap: 18px;
  color: var(--blanc);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.sous-titre::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet);
  transform: translateY(-.3em);
}

.texte p + p { margin-top: 1.1em; }
.texte strong { color: var(--blanc); font-weight: 650; }
.texte em { font-style: italic; }

/* --- Les lettres qui vibrent -------------------------------------------
   Le script découpe un titre .vibre en lettres <span class="l">. Chaque
   lettre anime --onde de -1 à 1 avec un léger décalage : la graisse ondule
   le long du mot comme le vibrato d'une note tenue.
   --base (graisse moyenne) et --amp (ampleur) sont réglés par le script
   selon la place du titre dans l'écran : fin et immobile près des bords,
   plus épais et plus vibrant au milieu (« crescendo »). */
.vibre { --base: 200; --amp: 0; }
.vibre .m { white-space: nowrap; }
.vibre .l {
  font-weight: clamp(100, calc(var(--base) + var(--onde) * var(--amp)), 900);
  animation: vibrato 2.4s var(--souple) infinite alternate;
  animation-delay: calc(var(--i) * -160ms);
  animation-play-state: paused;
}
.vibre.est-visible .l { animation-play-state: running; }
@keyframes vibrato {
  from { --onde: -1; }
  to   { --onde: 1; }
}

/* --- Graisse réservée --------------------------------------------------
   Un mot qui s'épaissit au survol prend plus de place et pousse ses
   voisins. .pese réserve d'avance la largeur du mot en gras (copie
   invisible superposée), donc rien ne bouge autour. */
.pese { display: inline-grid; }
.pese > span, .pese::after { grid-area: 1 / 1; }
.pese::after {
  content: attr(data-t);
  font-weight: 800;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}


/* 4. COLONNE BLANCHE ====================================================== */

/* Reprise directe du site actuel (colonne blanche + signature), mais
   réduite à un pupitre : menu, signature, bouton Écouter. */
.colonne {
  position: fixed;
  z-index: 60;
  background: var(--blanc);
  color: var(--noir);
  display: grid;
}
.colonne__libelle {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.colonne__menu, .colonne__ecoute {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  transition: color .3s;
}
.colonne__menu:hover, .colonne__ecoute:hover { color: var(--orange); }
.colonne__signature { display: grid; place-items: center; color: var(--noir); }
.colonne__signature svg { fill: currentColor; }

/* Les deux traits du bouton menu deviennent une croix */
.burger { position: relative; width: 26px; height: 10px; display: block; }
.burger i {
  position: absolute; left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .5s var(--sortie), top .5s var(--sortie);
}
.burger i:first-child { top: 0; }
.burger i:last-child { top: 8.5px; }
.menu-ouvert .burger i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-ouvert .burger i:last-child { top: 4.25px; transform: rotate(-45deg); }

/* Petit égaliseur : immobile, il s'anime quand quelque chose joue */
.egaliseur { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.egaliseur i {
  width: 2px;
  height: 30%;
  background: currentColor;
  transform-origin: bottom;
}
.egaliseur i:nth-child(2) { height: 70%; }
.egaliseur i:nth-child(3) { height: 45%; }
.egaliseur i:nth-child(4) { height: 85%; }
.joue .egaliseur i { animation: egaliseur 1s var(--souple) infinite alternate; background: var(--orange); }
.joue .egaliseur i:nth-child(2) { animation-delay: -.3s; }
.joue .egaliseur i:nth-child(3) { animation-delay: -.6s; }
.joue .egaliseur i:nth-child(4) { animation-delay: -.15s; }
@keyframes egaliseur { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

@media (min-width: 900px) {
  .colonne {
    left: 0; top: 0; bottom: 0;
    width: var(--colonne);
    grid-template-rows: var(--colonne) 1fr var(--colonne);
  }
  .colonne__menu, .colonne__ecoute { width: var(--colonne); height: var(--colonne); }
  /* Signature écrite de bas en haut, comme un dos de pochette */
  .colonne__signature svg {
    width: min(64vh, 300px);
    height: auto;
    transform: rotate(-90deg);
  }
}
@media (max-width: 899px) {
  .colonne {
    left: 0; right: 0; bottom: 0;
    height: var(--bas-libre);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    grid-template-columns: 1fr auto auto;
    align-items: center;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .08);
  }
  .colonne__signature { order: 1; justify-content: start; padding-left: 18px; height: var(--barre); }
  .colonne__signature svg { width: 128px; height: auto; }
  .colonne__ecoute { order: 2; width: 72px; height: var(--barre); }
  .colonne__menu { order: 3; width: 72px; height: var(--barre); border-left: 1px solid rgba(0, 0, 0, .1); }
}


/* 5. MENU ================================================================= */

.menu {
  position: fixed;
  z-index: 55;
  background: var(--blanc);
  color: var(--noir);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transition: transform .7s var(--sortie), visibility 0s linear .7s;
}
.menu-ouvert .menu {
  visibility: visible;
  transform: none;
  transition: transform .7s var(--sortie), visibility 0s;
}
.menu__voile {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(0, 0, 0, .7);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--sortie);
}
.menu-ouvert .menu__voile { opacity: 1; pointer-events: auto; }

.menu__liste { counter-reset: none; }
.menu__liste a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: .12em 0;
  text-decoration: none;
  font-size: clamp(2rem, 5.6vh, 3.9rem);
  font-weight: 200;
  line-height: 1.12;
  letter-spacing: -.035em;
  transition: font-weight .45s var(--sortie), color .3s;
}
.menu__liste a:hover, .menu__liste a:focus-visible { font-weight: 700; }
.menu__liste a[aria-current="page"] { font-weight: 800; }
/* petit carré orange devant la page en cours (posé sur le texte lui-même,
   pas sur .pese qui est une grille) */
.menu__liste a[aria-current="page"] .menu__mot > span::before {
  content: "";
  display: inline-block;
  width: .2em; height: .2em;
  margin-right: .25em;
  background: var(--orange);
  vertical-align: .2em;
}
.menu__info {
  flex: none;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  white-space: nowrap;
}
/* Entrée en cascade des mots du menu */
.menu__liste li {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity .5s var(--sortie), transform .7s var(--sortie);
}
.menu-ouvert .menu__liste li {
  opacity: 1;
  transform: none;
  transition-delay: calc(80ms + var(--n, 0) * 35ms);
}
.menu__pied {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-size: .8rem;
  font-weight: 500;
}
.menu__pied a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.menu__pied a:hover { color: var(--orange); }
.menu__pied .i { width: 20px; height: 20px; }

@media (min-width: 900px) {
  .menu {
    left: var(--colonne); top: 0; bottom: 0;
    width: min(760px, calc(100vw - var(--colonne)));
    padding: 48px 56px 40px;
    transform: translateX(calc(-100% - var(--colonne)));
    border-left: 1px solid rgba(0, 0, 0, .08);
  }
}
@media (max-width: 899px) {
  .menu {
    left: 0; right: 0; top: 0;
    bottom: var(--bas-libre);
    padding: max(28px, env(safe-area-inset-top)) 22px 28px;
    transform: translateY(100%);
  }
  .menu__liste a { font-size: clamp(1.9rem, 8.6vw, 2.8rem); }
  .menu__info { font-size: .62rem; }
}


/* 6. RIDEAU =============================================================== */

/* Pendant un changement de page, la colonne blanche s'étire sur tout
   l'écran (la signature passe au centre), puis se retire de l'autre côté. */
.rideau {
  position: fixed;
  inset: 0;
  z-index: 58;
  background: var(--blanc);
  color: var(--noir);
  display: grid;
  place-items: center;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}
.rideau svg { width: min(46vw, 420px); fill: currentColor; opacity: 0; }
.rideau.entre { transition: clip-path .38s var(--souple); clip-path: inset(0 0 0 0); }
.rideau.entre svg { transition: opacity .3s .12s; opacity: 1; }
.rideau.sort { transition: clip-path .5s var(--sortie); clip-path: inset(0 0 0 100%); }
.rideau.sort svg { opacity: 0; transition: opacity .15s; }
@media (max-width: 899px) {
  .rideau { clip-path: inset(100% 0 0 0); }
  .rideau.entre { clip-path: inset(0 0 0 0); }
  .rideau.sort { clip-path: inset(0 0 100% 0); }
  .rideau svg { width: 62vw; }
}


/* 7. SCÈNE (lecteur) ===================================================== */

/* Un seul lecteur pour tout le site, en dehors du contenu des pages : la
   vidéo ou Spotify continue de jouer pendant qu'on change de page.
   États : data-etat="ferme" | "cinema" (plein écran, lumières éteintes)
   | "mini" (petit lecteur dans un coin). */
.scene { position: fixed; z-index: 70; inset: 0; pointer-events: none; }
.scene[data-etat="ferme"] { display: none; }
.scene__fond {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .94);
  opacity: 0;
  transition: opacity .6s var(--sortie);
}
.scene[data-etat="cinema"] .scene__fond { opacity: 1; pointer-events: auto; }

.scene__boite {
  position: absolute;
  pointer-events: auto;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.scene__cadre { position: relative; background: #050505; overflow: hidden; }
.scene__cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.scene__barre {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 6px 8px 14px;
}
.scene__titre {
  flex: 1;
  min-width: 0;
  color: var(--blanc);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.25;
}
.scene__titre span, .scene__titre small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scene__titre small { color: var(--gris); font-size: .72rem; font-weight: 400; }
.scene__actions { display: flex; align-items: center; }
.scene__actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  color: var(--blanc);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .25s;
}
.scene__actions button:hover { color: var(--orange); }
.scene__actions .i { width: 20px; height: 20px; }
.scene__actions [hidden] { display: none; }

/* Cinéma : la boîte est centrée par la scène elle-même (flex), ce qui
   laisse transform libre pour l'animation cinéma ⇄ mini. */
.scene[data-etat="cinema"] { display: flex; align-items: center; justify-content: center; }
.scene[data-etat="cinema"] .scene__boite {
  position: relative;
  z-index: 1;
  width: min(1280px, 92vw, calc((100vh - 200px) * 16 / 9));
  background: transparent;
}
html.scene-cinema { overflow: hidden; }
.scene[data-etat="cinema"] .scene__cadre { aspect-ratio: 16 / 9; }
.scene[data-etat="cinema"] .scene__barre { padding: 14px 0 0; }
.scene[data-etat="cinema"] .scene__titre { font-size: 1.05rem; }
.scene[data-etat="cinema"] .scene__titre small { font-size: .82rem; }

/* Mini */
.scene[data-etat="mini"] .scene__boite {
  right: 20px;
  bottom: calc(20px + var(--bas-libre));
  width: 380px;
  border: 1px solid var(--filet);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.scene[data-etat="mini"] .scene__cadre { aspect-ratio: 16 / 9; }
.scene[data-type="spotify"] .scene__cadre { aspect-ratio: auto; height: 152px; background: #121212; }
/* Spotify affiche déjà le titre : la barre se réduit au bouton de fermeture */
.scene[data-type="spotify"] .scene__barre { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
.scene[data-type="spotify"] .scene__titre small { display: none; }
.scene[data-type="spotify"] [data-scene-agrandir] { display: none; }

@media (max-width: 899px) {
  .scene[data-etat="cinema"] .scene__boite { width: 100vw; }
  .scene[data-etat="cinema"] .scene__barre { padding: 12px 8px 0 16px; }
  .scene[data-etat="mini"] .scene__boite {
    left: 8px; right: 8px;
    bottom: calc(var(--bas-libre) + 8px);
    width: auto;
    flex-direction: row;
    align-items: center;
  }
  .scene[data-etat="mini"][data-type="video"] .scene__cadre { width: 128px; flex: none; }
  .scene[data-etat="mini"] .scene__barre { flex: 1; min-width: 0; padding-left: 10px; }
  .scene[data-etat="mini"] [data-scene-precedent],
  .scene[data-etat="mini"] [data-scene-suivant] { display: none; }
  .scene[data-type="spotify"][data-etat="mini"] .scene__boite { flex-direction: column; align-items: stretch; }
  .scene[data-type="spotify"] .scene__cadre { height: 80px; }
}
.scene[data-etat="mini"] [data-scene-reduire] { display: none; }
.scene[data-etat="cinema"] [data-scene-agrandir] { display: none; }

/* Message bref en bas de l'écran (« Adresse copiée ») */
.annonce {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: calc(var(--bas-libre) + 24px);
  transform: translate(-50%, 16px);
  padding: 12px 18px;
  background: var(--blanc);
  color: var(--noir);
  font-size: .82rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .5s var(--sortie);
}
.annonce.est-visible { opacity: 1; transform: translate(-50%, 0); }


/* 8. LOUPE ================================================================ */

.loupe {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .97);
  display: grid;
  grid-template-rows: 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--sortie), visibility 0s linear .45s;
  touch-action: none;
}
.loupe.est-ouverte { opacity: 1; visibility: visible; transition: opacity .45s var(--sortie), visibility 0s; }
.loupe__scene { position: relative; overflow: hidden; display: grid; place-items: center; }
.loupe__image {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 120px);
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform .45s var(--sortie), opacity .3s;
  cursor: zoom-in;
}
.loupe__image.zoom { cursor: grab; transition: none; }
.loupe__barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  color: var(--blanc);
}
.loupe__legende { flex: 1; min-width: 0; font-size: .8rem; color: var(--gris-clair); }
.loupe__legende b { color: var(--orange); font-weight: 600; margin-right: 10px; font-variant-numeric: tabular-nums; }
.loupe__barre button {
  width: 48px; height: 48px;
  display: grid; place-items: center;
}
.loupe__barre button:hover { color: var(--orange); }
.loupe__barre .i { width: 24px; height: 24px; }


/* 9. ÉLÉMENTS COMMUNS ===================================================== */

/* Action : un mot souligné d'un trait qui s'allonge ; le mot s'épaissit
   quand on appuie (« pression du souffle »). Pas de pilule, pas de rond. */
.actions { display: flex; flex-wrap: wrap; gap: 8px 36px; align-items: center; }
.action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--blanc);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: font-weight .4s var(--sortie), color .3s;
  cursor: pointer;
}
.action::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  transition: width .5s var(--sortie), background .3s;
}
.action:hover, .action:focus-visible { font-weight: 800; }
.action:hover::after, .action:focus-visible::after { width: 56px; background: var(--orange); }
.action:active { font-weight: 900; }
.action .i { width: 15px; height: 15px; margin-left: -6px; }

/* Cadre double : clin d'œil au bouton « Boutique : vinyle et CD » du site actuel */
.cadre-double {
  display: inline-block;
  border: 3px double rgba(255, 255, 255, .5);
  padding: .5em 1.1em;
  color: var(--gris-clair);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .02em;
}
.action--cadre {
  border: 3px double rgba(255, 255, 255, .6);
  padding: 0 18px;
  min-height: 52px;
}
.action--cadre::after { display: none; }
.action--cadre:hover { border-color: var(--orange); }

/* Liste de dates (accueil et tour dates) */
.dates { border-top: 1px solid var(--filet); }
.date {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 2px 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--filet);
  transition: background .3s;
}
.date__jour {
  grid-row: span 3;
  color: var(--blanc);
  font-size: 2.2rem;
  font-weight: 200;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.date__jour small {
  display: block;
  margin-top: 6px;
  color: var(--gris);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.date__formation {
  color: var(--blanc);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.3;
}
.date__lieu { color: var(--gris-clair); font-size: .95rem; line-height: 1.35; }
.date__type { color: var(--gris-fonce); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.date--passee .date__jour, .date--passee .date__formation { color: var(--gris-clair); }
.date.est-cible { background: rgba(255, 102, 0, .12); }
.date__ics {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--orange);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
}
@media (min-width: 760px) {
  .date {
    grid-template-columns: 7.5rem minmax(0, 1.3fr) minmax(0, 1fr) 9rem;
    align-items: center;
  }
  .date__jour { grid-row: auto; font-size: 3rem; }
  .date__type { text-align: right; }
}

/* Message quand il n'y a pas de date à venir */
.silence {
  padding: 28px 0 8px;
  max-width: 40rem;
}
.silence p:first-child {
  color: var(--blanc);
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 200;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.silence p + p { margin-top: 16px; color: var(--gris-clair); }
.silence a { color: var(--blanc); text-decoration-color: var(--orange); text-underline-offset: 4px; }


/* 10. PIED DE PAGE ======================================================== */

.pied {
  position: relative;
  padding: var(--respiration) var(--marge) 28px;
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 64px;
}
.pied__role {
  color: var(--gris);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pied__nom {
  margin-top: 10px;
  color: var(--blanc);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 200;
  letter-spacing: -.035em;
  line-height: 1;
}
.pied__mail {
  display: inline-block;
  margin-top: 14px;
  color: var(--blanc);
  font-size: clamp(1.15rem, 2.8vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.02em;
  text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--sortie), font-weight .4s;
  overflow-wrap: anywhere;
}
.pied__mail:hover, .pied__mail:focus-visible { background-size: 100% 1px; font-weight: 500; }
.pied__tel { display: inline-block; margin-top: 8px; color: var(--gris-clair); text-decoration: none; font-variant-numeric: tabular-nums; }
.pied__tel:hover { color: var(--blanc); }
.pied__rapide { margin-top: 36px; color: var(--gris-clair); }
.pied__rapide a { color: var(--blanc); text-decoration-color: var(--filet-fort); text-underline-offset: 4px; }

.pied__reseaux { display: grid; gap: 2px; }
.pied__reseaux a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  color: var(--blanc);
  font-size: 1.15rem;
  font-weight: 300;
  text-decoration: none;
  border-bottom: 1px solid var(--filet);
  transition: font-weight .4s var(--sortie), color .3s;
}
.pied__reseaux a:hover { font-weight: 700; }
.pied__reseaux .i { width: 22px; height: 22px; }
.pied__reseaux a::after { content: "↗"; margin-left: auto; color: var(--gris-fonce); font-weight: 300; }

.pied__partenaires { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
.pied__partenaires a { display: block; opacity: .62; transition: opacity .3s; }
.pied__partenaires a:hover { opacity: 1; }
.pied__partenaires img { height: 46px; width: auto; filter: grayscale(1); }
.pied__partenaires .logo-inverse { filter: grayscale(1) invert(1); }
.pied__partenaires .logo-spedidam { height: 18px; }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
  color: var(--gris-fonce);
  font-size: .75rem;
}
.pied__bas a { color: var(--gris-clair); text-decoration: none; }
.pied__bas a:hover { color: var(--blanc); }

@media (min-width: 900px) {
  .pied { grid-template-columns: 1.4fr 1fr; column-gap: 8vw; }
  .pied__partenaires, .pied__bas { grid-column: 1 / -1; }
}
/* La page Contacts contient déjà les coordonnées */
[data-page="contacts"] .pied__contact { display: none; }
[data-page="contacts"] .pied { grid-template-columns: 1fr; padding-top: 56px; }
[data-page="contacts"] .pied__reseaux { display: none; }


/* 11. ACCUEIL ============================================================= */

/* --- Ouverture : l'onde ---------------------------------------------------
   Le portrait de Baptiste n'apparaît qu'à travers les barres d'une onde
   sonore : une barre par période, sa hauteur = le nombre de concerts donnés
   à ce moment-là (données réelles de l'agenda). */
.ouverture {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  max-height: 1100px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(22px, 3.4vw, 48px) var(--marge) clamp(18px, 2.6vw, 34px);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 899px) {
  .ouverture { height: calc(100svh - var(--bas-libre)); }
}
.ouverture__haut {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px 40px;
  pointer-events: none;
}
.ouverture__haut a, .ouverture__haut button { pointer-events: auto; }
.ouverture__titre { margin: 0; }
.ouverture__signature {
  width: clamp(240px, 36vw, 600px);
  height: auto;
  fill: var(--blanc);
  margin-left: -.6%;
}
/* La signature s'écrit de gauche à droite au chargement */
.ouverture__signature { clip-path: inset(0 100% 0 0); }
.est-pret .ouverture__signature {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.9s cubic-bezier(.45, .05, .25, 1) .15s;
}
.ouverture__qualite {
  margin-top: 14px;
  color: var(--gris-clair);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.8;
}
.ouverture__nouveau {
  display: grid;
  grid-template-columns: 64px auto;
  gap: 2px 16px;
  align-items: center;
  text-decoration: none;
  color: var(--gris-clair);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ouverture__nouveau img { grid-row: span 2; width: 64px; height: 64px; }
.ouverture__nouveau strong {
  color: var(--blanc);
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: -.02em;
  text-transform: none;
  transition: font-weight .4s var(--sortie);
}
.ouverture__nouveau:hover strong { font-weight: 800; }

.onde {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.onde__toile {
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  user-select: none;
  cursor: crosshair;
}
.onde__toile:focus-visible { outline-offset: -6px; }
.onde__etiquette {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  padding-left: 12px;
  border-left: 1px solid var(--orange);
  color: var(--blanc);
  font-size: .8rem;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}
.onde__etiquette time {
  display: block;
  color: var(--orange);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.onde__etiquette span { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.onde__etiquette em { display: block; font-style: normal; color: var(--gris-clair); }
.onde__annees {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  height: 0;
  pointer-events: none;
}
.onde__annees span {
  position: absolute;
  top: 0;
  padding-left: 6px;
  border-left: 1px solid var(--filet-fort);
  color: var(--gris);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.6;
}
.onde__annees .maintenant { color: var(--orange); border-color: var(--orange); }
.onde__annees .a-gauche { transform: translateX(-100%); border-left: 0; border-right: 1px solid var(--orange); padding: 0 6px 0 0; }

/* Pendant le souffle, le texte s'efface : il ne reste que la photo */
.ouverture__haut, .ouverture__bas, .onde__annees { transition: opacity .6s var(--sortie); }
.ouverture.souffle .ouverture__haut,
.ouverture.souffle .ouverture__bas,
.ouverture.souffle .onde__annees { opacity: 0; }

.ouverture__bas {
  position: relative;
  z-index: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px 32px;
  color: var(--gris-clair);
  font-size: .78rem;
  pointer-events: none;
}
.ouverture__resume { color: var(--blanc); font-weight: 500; }
.ouverture__resume strong { font-weight: 800; }
.ouverture__astuce { color: var(--gris); max-width: 26rem; }
.ouverture__astuce kbd {
  font: inherit;
  border: 1px solid var(--filet-fort);
  padding: 0 5px;
  color: var(--gris-clair);
}

/* --- Django! ------------------------------------------------------------- */
.disque {
  position: relative;
  padding: var(--respiration) var(--marge);
  display: grid;
  gap: 40px;
}
.disque__pochette { position: relative; }
.disque__pochette img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.disque__titre {
  position: relative;
  z-index: 2;
  color: var(--blanc);
  font-size: clamp(4.4rem, 15vw, 14rem);
  line-height: .82;
  letter-spacing: -.05em;
  margin: 22px 0 18px -.05em;
  /* Le titre déborde sur la pochette : là où il la croise, il s'inverse */
  mix-blend-mode: difference;
}
.disque__avec { color: var(--blanc); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 300; }
.disque__avec em { font-style: italic; font-weight: 400; }
.disque__prix {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 22px;
  color: var(--blanc);
  font-weight: 600;
  font-size: .95rem;
}
.disque__prix::before { content: ""; width: 34px; height: 1px; background: var(--orange); flex: none; transform: translateY(-.3em); }
.disque__court { margin-top: 24px; max-width: 36rem; color: var(--gris-clair); }
.disque__court strong { color: var(--blanc); font-weight: 600; }
.disque .actions { margin-top: 32px; }
@media (min-width: 900px) {
  .disque { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; align-items: center; }
  .disque__pochette { position: sticky; top: 8vh; align-self: start; }
  .disque__texte { padding-left: 4vw; }
  .disque__titre { margin-left: calc(-4vw - 1.6em); }
}
/* Téléphone : la pochette prend toute la largeur et le titre géant vient
   mordre dessus par le bas — là où il la croise, il s'inverse. */
@media (max-width: 899px) {
  .disque { gap: 0; padding-top: 56px; }
  .disque__pochette { margin: 0 calc(-1 * var(--marge)); }
  .disque__texte { display: flex; flex-direction: column; align-items: flex-start; }
  .disque__titre { order: -1; font-size: min(21vw, 7rem); margin: -.56em 0 26px -.05em; }
}

/* --- Sur la route -------------------------------------------------------- */
.route { padding: 0 var(--marge) var(--respiration); }
.route__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.route .actions { margin-top: 28px; }

/* --- Lecture : la bio qui s'allume mot à mot ----------------------------- */
.lecture {
  padding: var(--respiration) var(--marge);
  border-top: 1px solid var(--filet);
}
.lecture__texte {
  max-width: 62rem;
  color: var(--gris-fonce);
  font-size: clamp(1.55rem, 3.7vw, 3.2rem);
  font-weight: 200;
  line-height: 1.22;
  letter-spacing: -.025em;
}
.lecture__texte .mot { transition: color .5s, font-weight .6s var(--sortie); }
.lecture__texte .mot.allume { color: var(--blanc); font-weight: 400; }
.lecture__texte .mot.fort.allume { font-weight: 700; }
.lecture .actions { margin-top: 40px; }

/* --- Presse --------------------------------------------------------------- */
.presse {
  padding: var(--respiration) var(--marge);
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 40px;
}
.presse__citation {
  min-height: 7.5em;
  max-width: 64rem;
  color: var(--blanc);
  font-size: clamp(1.45rem, 3.4vw, 3rem);
  font-weight: 200;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -.02em;
}
.presse__citation::before { content: "« "; color: var(--orange); font-style: normal; }
.presse__citation::after { content: " »"; color: var(--orange); font-style: normal; }
.presse__citation.change { animation: changeCitation .7s var(--sortie); }
@keyframes changeCitation { from { opacity: 0; letter-spacing: .02em; } to { opacity: 1; } }
.presse__source { color: var(--gris); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.presse__sources { display: flex; flex-wrap: wrap; gap: 4px 4px; }
.presse__sources button {
  min-height: 44px;
  padding: 0 14px 0 0;
  color: var(--gris-fonce);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 300;
  transition: color .3s, font-weight .4s var(--sortie);
}
.presse__sources button::after { content: "·"; margin-left: 14px; color: var(--gris-fonce); font-weight: 300; }
.presse__sources li:last-child button::after { content: none; }
.presse__sources button:hover { color: var(--blanc); }
.presse__sources button[aria-pressed="true"] { color: var(--blanc); font-weight: 700; }


/* 12. TOUR DATES ========================================================= */

.a-venir, .partition, .registre { padding: 0 var(--marge) clamp(64px, 9vw, 120px); }

.partition__mode { margin: 14px 0 26px; color: var(--gris); font-size: .9rem; max-width: 40rem; }
.filtres { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-bottom: 30px; }
.filtres button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--gris);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s;
}
.filtres button::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.filtres button[aria-pressed="true"] { color: var(--blanc); }
.filtres button[aria-pressed="true"]::before { background: var(--orange); height: 2px; }
.filtres button:hover { color: var(--blanc); }
.filtres small { color: var(--gris-fonce); font-weight: 500; letter-spacing: .04em; }

.portee {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 18px 0;
  border-top: 1px solid var(--filet);
}
.portee__annee {
  color: var(--blanc);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 100;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.portee__annee small { margin-left: 12px; color: var(--gris); font-size: .72rem; font-weight: 600; letter-spacing: .1em; white-space: nowrap; }
@media (min-width: 900px) { .portee__annee small { display: block; margin: 8px 0 0 2px; } }
.portee svg { width: 100%; height: auto; overflow: visible; }
.portee .ligne { stroke: rgba(255, 255, 255, .22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.portee .mois { fill: var(--gris-fonce); font-family: var(--f); font-size: 11px; font-weight: 600; letter-spacing: .08em; }
.portee .note { fill: var(--blanc); transition: opacity .3s, fill .2s; cursor: pointer; }
.portee .note.est-eteinte { opacity: .12; }
.portee .note:hover, .portee .note.est-active { fill: var(--orange); }
.portee .maintenant { stroke: var(--orange); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.portee .etiquette-ligne { fill: var(--gris); font-family: var(--f); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (min-width: 900px) {
  .portee { grid-template-columns: 9rem 1fr; gap: 24px; align-items: center; }
}

.infobulle {
  position: absolute;
  z-index: 20;
  min-width: 220px;
  max-width: 300px;
  padding: 14px 16px 12px;
  background: var(--blanc);
  color: var(--noir);
  font-size: .84rem;
  line-height: 1.35;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  transform: translate(-50%, calc(-100% - 14px));
  pointer-events: auto;
}
.infobulle[hidden] { display: none; }
.infobulle time { display: block; color: var(--orange); font-size: .72rem; font-weight: 700; letter-spacing: .1em; }
.infobulle strong { display: block; margin: 2px 0; font-weight: 700; text-transform: uppercase; }
.infobulle button { margin-top: 8px; color: var(--noir); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; min-height: 32px; }

.registre__outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 26px 0 10px; }
.recherche {
  flex: 1 1 320px;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--filet-fort);
}
.recherche .i { color: var(--gris); width: 20px; height: 20px; }
.recherche input {
  flex: 1;
  min-width: 0;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--blanc);
  font-size: 1.05rem;
  font-weight: 300;
}
.recherche input::placeholder { color: var(--gris-fonce); }
.recherche input:focus { outline: none; }
.recherche:focus-within { border-color: var(--orange); }
.compteur { color: var(--gris); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

.registre__mois {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  padding: 26px 0 10px;
  background: var(--noir);
  color: var(--blanc);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.registre__mois small { color: var(--gris-fonce); font-weight: 600; }
.registre__vide { padding: 30px 0; color: var(--gris); }


/* 13. BIOGRAPHIE ========================================================== */

.bio-ouverture {
  display: grid;
  gap: 40px;
  padding: 0 var(--marge) var(--respiration);
}
.bio-ouverture__portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.05); }
.bio-ouverture__portrait figcaption { margin-top: 10px; color: var(--gris-fonce); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.bio-chapo {
  color: var(--blanc);
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.015em;
}
.bio-chapo strong { font-weight: 700; }
@media (min-width: 900px) {
  .bio-ouverture { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 6vw; align-items: start; }
  .bio-ouverture__portrait { position: sticky; top: 6vh; }
}
/* Téléphone : le portrait d'abord, bord à bord, puis le texte */
@media (max-width: 899px) {
  .bio-ouverture__portrait { order: -1; margin: 0 calc(-1 * var(--marge)); }
  .bio-ouverture__portrait figcaption { padding: 0 var(--marge); }
  .page--biographie .entete { padding-bottom: 28px; }
}

.chronologie { padding: 0 var(--marge) var(--respiration); }
.chronologie ol { margin-top: 30px; border-top: 1px solid var(--filet); }
.chronologie li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 4px 22px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--filet);
}
.chronologie__annee {
  grid-row: span 2;
  color: var(--blanc);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 100;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.chronologie__titre { color: var(--blanc); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.2; }
.chronologie__note { color: var(--gris-clair); font-size: .95rem; }
.chronologie li img { display: none; }
@media (min-width: 760px) {
  .chronologie li { grid-template-columns: 9rem 72px 1fr; }
  .chronologie__annee { grid-row: span 2; }
  .chronologie li img { display: block; grid-row: span 2; width: 72px; height: 72px; object-fit: cover; }
}

.distinctions { padding: 0 var(--marge) var(--respiration); }
.distinctions ul { margin-top: 30px; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.distinctions li {
  padding: 22px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--blanc);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 300;
  line-height: 1.3;
}
.distinctions li strong { font-weight: 700; }
.distinctions li small { display: block; margin-top: 6px; color: var(--gris-clair); font-size: .95rem; font-weight: 400; }
.distinctions__pedagogie { margin-top: 48px; max-width: 46rem; color: var(--gris-clair); font-size: 1.1rem; }

.revue { padding: 0 var(--marge) var(--respiration); }
.revue__liste { margin-top: 40px; display: grid; gap: clamp(48px, 7vw, 96px); }
.extrait { max-width: 54rem; }
.extrait:nth-child(even) { margin-left: auto; text-align: right; }
.extrait blockquote {
  color: var(--blanc);
  font-size: clamp(1.3rem, 2.8vw, 2.4rem);
  font-weight: 200;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.extrait blockquote::before { content: "« "; color: var(--orange); font-style: normal; }
.extrait blockquote::after { content: " »"; color: var(--orange); font-style: normal; }
.extrait figcaption { margin-top: 14px; color: var(--gris); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.extrait figcaption b { color: var(--blanc); }

.revue-album { margin-top: clamp(64px, 9vw, 120px); padding-top: 34px; border-top: 1px solid var(--filet); }
.revue-album__tete { display: flex; align-items: center; gap: 18px; }
.revue-album__tete img { width: 64px; height: 64px; object-fit: cover; }
.revue-album__tete p { color: var(--gris); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.revue-album__tete strong { display: block; color: var(--blanc); font-size: 1.4rem; font-weight: 300; letter-spacing: -.01em; text-transform: none; }
.revue-album .extrait blockquote { font-size: clamp(1.15rem, 2.1vw, 1.75rem); }
.revue-album .revue__liste { gap: 44px; }


/* 14. PROJETS ============================================================= */

.sommaire {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px 28px;
  padding: 0 var(--marge);
  background: rgba(0, 0, 0, .92);
  border-bottom: 1px solid var(--filet);
  overflow-x: auto;
  scrollbar-width: none;
}
.sommaire::-webkit-scrollbar { display: none; }
.sommaire a {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  color: var(--gris);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .3s, border-color .3s;
}
.sommaire a small { color: var(--gris-fonce); font-weight: 500; }
.sommaire a:hover { color: var(--blanc); }
.sommaire a[aria-current="true"] { color: var(--blanc); border-bottom-color: var(--orange); }

.projet {
  padding: clamp(64px, 9vw, 130px) var(--marge);
  border-bottom: 1px solid var(--filet);
  display: grid;
  gap: 40px;
  scroll-margin-top: 54px;
}
.projet__visuel img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.projet__ecoute { margin-top: 20px; }
.projet__equipe { margin-top: 30px; display: grid; gap: 4px; }
.projet__equipe li { color: var(--blanc); font-size: .9rem; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; }
.projet__equipe li span { color: var(--orange); font-weight: 400; text-transform: none; letter-spacing: 0; }
.projet__equipe .invites { margin-top: 12px; color: var(--gris); font-size: .7rem; font-weight: 600; letter-spacing: .14em; }
.projet__titre {
  margin: 26px 0 12px;
  color: var(--orange);
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: .88;
  letter-spacing: -.045em;
}
.projet__avec { color: var(--gris-clair); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 300; font-style: italic; }
.projet__avec b { font-style: normal; font-weight: 400; color: var(--gris); font-size: .8em; }
.projet .texte { margin-top: 36px; max-width: var(--largeur-texte); }
.projet .texte p:first-child { color: var(--blanc); }
.projet__signature { margin-top: 18px; color: var(--gris); font-style: italic; }
.titres { margin-top: 44px; max-width: var(--largeur-texte); counter-reset: piste; border-left: 1px solid var(--filet-fort); padding-left: 22px; }
.titres li {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  padding: 5px 0;
  font-size: .92rem;
  line-height: 1.4;
}
.titres li::before {
  counter-increment: piste;
  content: counter(piste, decimal-leading-zero);
  color: var(--gris-fonce);
  font-size: .75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-top: .15em;
}
.titres b { color: var(--blanc); font-weight: 600; }
.titres i { color: var(--gris); }
@media (min-width: 900px) {
  .projet { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 6vw; align-items: start; }
  .projet__visuel { position: sticky; top: calc(54px + 5vh); }
}


/* 15. DISCOGRAPHIE (bac à disques) ======================================== */

.bac-zone {
  display: grid;
  gap: 36px;
  padding: 0 var(--marge) clamp(64px, 9vw, 120px);
}
.bac {
  position: relative;
  height: clamp(360px, 62vw, 640px);
  perspective: 1400px;
  perspective-origin: 50% 0%;
  touch-action: pan-y;
  user-select: none;
  outline-offset: 8px;
  overflow: hidden; /* les pochettes rabattues restent dans le bac */
}
.bac__piste { position: absolute; inset: 0; transform-style: preserve-3d; }
.bac__disque {
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: min(72%, 440px);
  aspect-ratio: 1;
  margin-left: calc(min(72%, 440px) / -2);
  transform-origin: 50% 100%;
  transition: transform .8s var(--sortie), opacity .6s, filter .6s;
  will-change: transform;
  cursor: pointer;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .25), 0 30px 60px rgba(0, 0, 0, .7);
}
.bac__disque img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bac__disque::after {
  /* reflet sur la tranche supérieure de la pochette */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 22%);
  pointer-events: none;
}
.bac__bord {
  /* le rebord avant du bac, devant les pochettes */
  position: absolute;
  left: 4%; right: 4%;
  bottom: 0;
  height: 16%;
  z-index: 200;
  background: linear-gradient(180deg, #0d0d0d, #000 60%);
  border-top: 1px solid var(--filet-fort);
  pointer-events: none;
}
.bac__bord::before {
  content: attr(data-lettre);
  position: absolute;
  left: 18px; top: 10px;
  color: var(--gris-fonce);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bac__boutons { position: absolute; z-index: 210; right: 0; bottom: 0; display: flex; }
.bac__boutons button { width: 52px; height: 52px; display: grid; place-items: center; color: var(--blanc); }
.bac__boutons button:hover { color: var(--orange); }
.bac__boutons button:disabled { opacity: .25; cursor: default; }
.bac__boutons .i { width: 24px; height: 24px; }

.fiche-disque { align-self: center; }
.fiche-disque__role { color: var(--orange); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.fiche-disque__titre {
  margin-top: 12px;
  color: var(--blanc);
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 200;
  line-height: .98;
  letter-spacing: -.035em;
}
.fiche-disque__artiste { margin-top: 12px; color: var(--blanc); font-size: 1.1rem; font-weight: 600; }
.fiche-disque__label { margin-top: 4px; color: var(--gris); }
.fiche-disque__compte { margin-top: 26px; color: var(--gris-fonce); font-size: .78rem; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.fiche-disque .actions { margin-top: 22px; }
.fiche-disque.change > * { animation: ficheChange .55s var(--sortie) both; }
.fiche-disque.change > *:nth-child(2) { animation-delay: .04s; }
.fiche-disque.change > *:nth-child(3) { animation-delay: .08s; }
@keyframes ficheChange { from { opacity: 0; transform: translateY(10px); } }
@media (min-width: 900px) {
  .bac-zone { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 4vw; }
}

.etagere { padding: 0 var(--marge) var(--respiration); }
.etagere h2 { margin-top: 56px; }
.etagere h2:first-child { margin-top: 0; }
.etagere ol { margin-top: 18px; border-top: 1px solid var(--filet); }
.etagere li button {
  width: 100%;
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
  transition: background .3s;
}
.etagere li button:hover { background: rgba(255, 255, 255, .04); }
.etagere li button[aria-current="true"] { background: rgba(255, 102, 0, .1); }
.etagere img { width: 56px; height: 56px; object-fit: cover; }
.etagere__titre { display: block; color: var(--blanc); font-weight: 600; line-height: 1.25; }
.etagere__artiste { display: block; color: var(--gris); font-size: .88rem; }
.etagere__annee { color: var(--gris-clair); font-weight: 200; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }


/* 16. VIDÉOS ============================================================= */

.une {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 var(--respiration);
  padding: 0;
  text-align: left;
  overflow: hidden;
  background: var(--encre);
}
.une img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.4s var(--sortie), opacity .6s; }
.une:hover img { transform: scale(1.025); }
.une__texte {
  position: absolute;
  left: var(--marge); right: var(--marge); bottom: clamp(18px, 3vw, 44px);
  display: flex;
  align-items: flex-end;
  gap: 22px;
  color: var(--blanc);
}
.une__lire {
  flex: none;
  width: clamp(64px, 7vw, 96px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--noir);
}
.une__lire .i { width: 42%; height: 42%; margin-left: 6%; }
.une__titre { font-size: clamp(1.6rem, 4.4vw, 4rem); font-weight: 200; line-height: 1; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.une__titre small { display: block; margin-top: 8px; font-size: .9rem; font-weight: 500; letter-spacing: .04em; text-shadow: none; }
.une::before {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  pointer-events: none;
}
.page--videos .une { margin-top: 0; }

.programme { padding: 0 var(--marge) var(--respiration); }
.programme__liste { border-top: 1px solid var(--filet); counter-reset: video; }
.programme__liste button {
  width: 100%;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--filet);
  text-align: left;
}
.programme__liste button::before {
  counter-increment: video;
  content: counter(video, decimal-leading-zero);
  color: var(--gris-fonce);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.programme__liste li.est-active button::before { color: var(--orange); }
.programme__liste img { display: none; }
.programme__titre {
  display: block;
  color: var(--blanc);
  font-size: clamp(1.05rem, 2vw, 1.55rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.015em;
  transition: font-weight .45s var(--sortie);
}
.programme__auteur { display: block; margin-top: 4px; color: var(--gris); font-size: .82rem; }
.programme__liste button:hover .programme__titre,
.programme__liste button:focus-visible .programme__titre,
.programme__liste li.est-active .programme__titre { font-weight: 650; }
/* L'écran suit la lecture : il montre la vidéo de la ligne qui passe au
   milieu de l'écran (au doigt comme à la souris). Le toucher lance la vidéo. */
.programme__ecran {
  position: sticky;
  z-index: 3;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--encre);
  overflow: hidden;
  cursor: pointer;
}
.programme__ecran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s var(--sortie); }
.programme__lire {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--orange);
  color: var(--noir);
}
.programme__lire .i { width: 22px; height: 22px; margin-left: 3px; }
@media (min-width: 900px) {
  .programme { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5vw; align-items: start; }
  .programme__corps { grid-column: 1; grid-row: 1; }
  .programme__ecran { grid-column: 2; grid-row: 1; top: 12vh; overflow: visible; }
  .programme__liste button { grid-template-columns: 3rem minmax(0, 1fr); padding: 22px 0; }
  .programme__ecran p { position: absolute; left: 0; right: 0; top: calc(100% + 14px); color: var(--gris); font-size: .8rem; }
}
/* Téléphone : l'écran colle en haut, pleine largeur, pendant qu'on fait
   défiler le programme dessous */
@media (max-width: 899px) {
  .programme__ecran { top: 0; margin: 0 calc(-1 * var(--marge)) 28px; box-shadow: 0 20px 34px #000; }
  .programme__ecran p {
    position: absolute;
    left: 16px; right: 80px; bottom: 14px;
    color: var(--blanc);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 0 1px 10px #000, 0 0 2px #000;
  }
}


/* 17. PHOTOS (planche contact) =========================================== */

.planche { padding: 0 var(--marge) var(--respiration); }
.planche__note { margin-bottom: 28px; color: var(--gris); font-size: .85rem; }
.planche__note b { color: var(--orange); font-weight: 600; }
.bande {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 26px 10px 36px;
  margin-bottom: 14px;
  background: var(--encre);
}
.bande::before, .bande::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 9px;
  /* perforations du film */
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, .7) 9px 19px, transparent 19px 28px);
}
.bande::before { top: 8px; }
.bande::after { bottom: 8px; }
.vue {
  position: relative;
  flex: var(--ratio) 1 0;
  min-width: 0;
  padding: 0;
  background: #000;
}
.vue img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ratio); filter: grayscale(.15); transition: filter .5s, transform .6s var(--sortie); }
.vue:hover img, .vue:focus-visible img { filter: none; }
.vue__numero {
  position: absolute;
  left: 4px;
  bottom: -16px;
  line-height: 1;
  color: var(--orange);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
/* Trait de crayon gras orange : la photo a été regardée */
.vue__marque {
  position: absolute;
  inset: -7px;
  width: calc(100% + 14px);
  height: calc(100% + 14px);
  pointer-events: none;
  overflow: visible;
}
.vue__marque path {
  fill: none;
  stroke: var(--orange);
  /* épaisseur en unités du dessin (pas de non-scaling-stroke : il fausse
     les pointillés qui servent à « dessiner » le trait). L'épaisseur varie
     un peu selon le sens du trait, comme un vrai crayon gras. */
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0; /* sinon le bout arrondi du trait laisse un point orange */
}
.vue.est-vue .vue__marque path { opacity: .92; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--sortie) .25s; }
@media (max-width: 599px) {
  .bande { gap: 6px; padding: 22px 6px 32px; }
  .bande::before { top: 6px; } .bande::after { bottom: 6px; }
}


/* 18. ÉQUIPEMENT (fiche technique) ======================================= */

.partenaires-equipement { display: flex; align-items: center; gap: 30px; margin-top: 28px; }
.partenaires-equipement img { height: 54px; width: auto; }
.partenaires-equipement a { opacity: .8; transition: opacity .3s; }
.partenaires-equipement a:hover { opacity: 1; }

.instrument {
  padding: clamp(56px, 8vw, 120px) var(--marge);
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 32px;
}
.instrument__nom {
  color: var(--blanc);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 200;
  line-height: .95;
  letter-spacing: -.04em;
}
.instrument__nom small { display: block; margin-bottom: 10px; color: var(--gris); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
/* La « caméra » : la photo se cadre sur la pièce dont on lit la fiche */
.camera {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #1a1a1a;
}
.camera img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 0 0;
  transition: transform 1.1s var(--souple);
}
.camera__repere {
  position: absolute;
  left: 50%; top: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border: 1.5px solid var(--orange);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.camera.vise .camera__repere { opacity: 1; transition-delay: .9s; }
.camera__legende { position: absolute; left: 14px; bottom: 12px; color: var(--blanc); font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 1px 8px #000; }

.specs { border-top: 1px solid var(--filet); }
.specs li { border-bottom: 1px solid var(--filet); }
.specs button, .specs .spec {
  width: 100%;
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 4px 18px;
  padding: 16px 0;
  text-align: left;
}
.specs dt, .spec__nom { color: var(--gris); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding-top: .35em; }
.spec__valeur { color: var(--gris-clair); font-size: 1.02rem; line-height: 1.4; transition: color .3s; }
.spec__valeur small { display: block; color: var(--gris-fonce); font-size: .84rem; }
.specs button:hover .spec__valeur, .specs li.est-active .spec__valeur { color: var(--blanc); }
.specs li.est-active .spec__nom { color: var(--orange); }
.instrument__texte { max-width: var(--largeur-texte); color: var(--gris-clair); }
@media (min-width: 900px) {
  .instrument { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: 5vw; align-items: start; }
  .instrument__nom { grid-column: 1 / -1; }
  .instrument--photo .camera { position: sticky; top: 8vh; }
  .instrument--texte { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
  .instrument--texte .instrument__nom { grid-column: 1; }
}
/* Téléphone : la photo reste en haut de l'écran pendant qu'on lit la fiche,
   sinon on ne verrait jamais la caméra se cadrer */
@media (max-width: 899px) {
  .instrument--photo .camera { position: sticky; top: 0; z-index: 2; box-shadow: 0 18px 30px #000; }
  .instrument--photo .specs { padding-bottom: 30vh; }
}

.equipement-videos { padding: clamp(56px, 8vw, 120px) var(--marge) var(--respiration); border-top: 1px solid var(--filet); }
.equipement-videos ul { margin-top: 30px; display: grid; gap: 20px; }
.equipement-videos button { position: relative; display: block; width: 100%; text-align: left; background: var(--encre); }
.equipement-videos img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; opacity: .75; transition: opacity .4s; }
.equipement-videos button:hover img { opacity: 1; }
.equipement-videos span { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 12px; align-items: center; color: var(--blanc); font-weight: 600; line-height: 1.25; text-shadow: 0 1px 10px #000; }
.equipement-videos .i { flex: none; width: 34px; height: 34px; padding: 8px; background: var(--orange); color: var(--noir); }
@media (min-width: 700px) { .equipement-videos ul { grid-template-columns: 1fr 1fr; } }

.atelier { padding: 0 var(--marge) var(--respiration); }
.atelier ul { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.atelier button { display: block; width: 100%; padding: 0; }
.atelier img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .3s; }
.atelier button:hover img { opacity: .8; }
@media (min-width: 900px) { .atelier ul { grid-template-columns: repeat(4, 1fr); } }


/* 19. CONTACTS, 404 ====================================================== */

.coordonnees { padding: 0 var(--marge) var(--respiration); display: grid; gap: clamp(56px, 8vw, 110px); }
.coordonnee__role { color: var(--gris); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.coordonnee__nom {
  margin-top: 12px;
  color: var(--blanc);
  font-size: clamp(2.6rem, 8vw, 7.5rem);
  font-weight: 200;
  line-height: .92;
  letter-spacing: -.045em;
}
.coordonnee__nom b { font-weight: 800; }
.coordonnee__lignes { margin-top: 28px; display: grid; gap: 6px; }
.coordonnee__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.coordonnee__ligne > a {
  color: var(--blanc);
  font-size: clamp(1.2rem, 3vw, 2.3rem);
  font-weight: 300;
  letter-spacing: -.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--sortie), font-weight .4s;
}
.coordonnee__ligne > a:hover { background-size: 100% 1px; font-weight: 500; }
.copier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--gris);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .3s;
}
.copier:hover { color: var(--orange); }
.copier .i { width: 18px; height: 18px; }
.copier.ok { color: var(--orange); }

.reseaux-contact { padding: 0 var(--marge) var(--respiration); }
.reseaux-contact ul { margin-top: 26px; border-top: 1px solid var(--filet); }
.reseaux-contact a {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filet);
  color: var(--blanc);
  font-size: clamp(1.6rem, 4.4vw, 3.6rem);
  font-weight: 200;
  letter-spacing: -.035em;
  text-decoration: none;
  transition: font-weight .45s var(--sortie);
}
.reseaux-contact a:hover { font-weight: 700; }
.reseaux-contact .i { width: .8em; height: .8em; color: var(--gris); }
.reseaux-contact a::after { content: "↗"; margin-left: auto; color: var(--gris-fonce); font-size: .5em; }

.fausse-note { min-height: 80vh; display: grid; align-content: center; padding: 60px var(--marge); }
.fausse-note .actions { margin-top: 40px; }


/* 20. MOUVEMENT RÉDUIT =================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .vibre .l { animation: none; font-weight: 300; }
  .ouverture__signature { clip-path: none; }
  .camera img { transition: none; }
}