/*
Theme Name: Théodore Vibert
Theme URI: https://theodorevibert.com
Author: Théodore Vibert
Description: Thème bloc sur mesure du site de Théodore Vibert, compositeur de musique de film. Généré depuis la maquette validée (scripts/wordpress.py).
Version: 1.0.1
Requires at least: 6.6
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theodore-vibert
Tags: block-theme, full-site-editing, one-column
*/

/* Théodore Vibert — maquette */

:root {
  --noir: #060606;
  --creme: #f4f1ec;
  --creme-2: #ebe7e0;
  --gris-chaud: #d8d2c8;
  --anthracite: #1e1e1e;
  --encre: #161616;
  --gris-texte: #444444;
  --gris: #85817b;
  --gris-legende: #69645e;
  --blanc: #ffffff;
  --filet: rgba(22, 22, 22, 0.16);

  --sans: "Inter Tight", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --display: "Anton", Impact, sans-serif;

  --gouttiere: clamp(20px, 3vw, 44px);
  --largeur: 1280px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--gris-texte);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--encre);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.02;
  hyphens: none;
  text-wrap: balance;
}

h2 { font-size: clamp(34px, 3.6vw, 52px); }

h1 em, h2 em, p em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---------- Pilules ---------- */

.pilule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: var(--encre);
  font: 500 14px/1 var(--sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.pilule:hover { background: rgba(22, 22, 22, 0.13); }

.pilule--blanche { background: var(--blanc); color: var(--noir); }
.pilule--blanche:hover { background: #e6e6e6; }

.pilule--noire { background: var(--encre); color: var(--blanc); }
.pilule--noire:hover { background: #333; }

/* Boutons d'action des sections : même taille partout, environ 20 % plus présents
   que les pilules de navigation (police 14 → 16 px, hauteur 34 → 42 px) */
.pilule--action {
  padding: 13px 24px;
  font-size: 16px;
  gap: 10px;
}

/* ---------- En-tête ---------- */

.entete {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--gouttiere);
  color: var(--encre);
}

.entete__nom { line-height: 1.25; }
.entete__nom strong { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }


.entete__nav,
.entete__liens { display: flex; gap: 6px; }
.entete__nav a {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background 0.25s;
}
.entete__nav a:hover { background: rgba(22, 22, 22, 0.14); }

.entete__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 18px;
}
.entete__menu { display: none; }

/* Sélecteur de langue : discret, dans la couleur de l'en-tête */
.langues {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
}
.langues a { opacity: 0.5; transition: opacity 0.25s; }
.langues a:hover { opacity: 1; }

.entete--sombre { color: var(--blanc); }
.entete--sombre .entete__nav a,
.entete--sombre .entete__menu { background: rgba(255, 255, 255, 0.1); color: var(--blanc); }
.entete--sombre .entete__nav a:hover { background: rgba(255, 255, 255, 0.2); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  min-height: 700px;
  overflow: hidden;
  background: var(--noir);
}

.hero__portrait {
  position: absolute;
  inset: 0;
  margin: 0;
}
.hero .hero__portrait img {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 52%, transparent 88%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 52%, transparent 88%);
          mask-composite: intersect;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(6, 6, 6, 0.82) 0, rgba(6, 6, 6, 0.55) 26%, rgba(6, 6, 6, 0) 48%);
  pointer-events: none;
}

.hero__texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__metier {
  margin: 0 0 clamp(18px, 1.9vw, 30px);
  color: var(--blanc);
  font-size: clamp(19px, 1.75vw, 27px);
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55);
}

.hero__nom {
  margin: 0 0 30px;
  color: var(--blanc);
  white-space: nowrap;
  font-family: var(--display);
  font-size: clamp(48px, 11.6vw, 250px);
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* ---------- Sélection ---------- */

.selection {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 130px var(--gouttiere) 140px;
}

.selection__pied {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 64px;
}

.selection__tete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 64px;
  text-align: center;
}

.grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px 22px;
}

.projet img,
.projet .carton {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: filter 0.4s;
}
.projet img { background: var(--creme-2); }
.projet:hover img,
.projet:hover .carton { filter: brightness(1.06); }

/* Carton titre : visuel typographique pour un projet sans affiche publique */
.carton {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 26px;
  text-align: center;
  color: var(--encre);
  background: var(--gris-chaud);
}
.carton::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 0.5px solid currentColor;
  opacity: 0.34;
  pointer-events: none;
}
.carton p { margin: 0; }
.carton__haut,
.carton__bas {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.75;
}
.carton__haut { top: 34px; }
.carton__bas { bottom: 34px; }
.carton__titre {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.carton__auteur {
  margin-top: 12px !important;
  font-size: 13px;
  opacity: 0.75;
}
.carton--anthracite { background: var(--anthracite); color: var(--creme); }
.carton--gris { background: var(--gris-chaud); }
.carton--creme { background: var(--creme-2); }

/* Clap : carton typographique d'un projet en postproduction,
   avec un petit pictogramme de clap au trait comme seul détail graphique. */
.projet .clap,
.projet .pochette {
  width: 100%;
  aspect-ratio: 3 / 4;
}
.projet .clap { transition: filter 0.4s; }
.projet:hover .clap { filter: brightness(1.15); }

.clap {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 9%;
  text-align: center;
  color: var(--creme);
  background: var(--encre);
}
.clap::before {
  content: "";
  position: absolute;
  inset: 11px;
  border: 0.5px solid currentColor;
  opacity: 0.3;
  pointer-events: none;
}
.clap p { margin: 0; }
.clap__haut,
.clap__pied {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 14px;
  font-size: clamp(8px, 3.4cqw, 10px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
}
.clap__haut { top: 12cqw; }
.clap__pied { bottom: 12cqw; }
.clap__titre {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 12cqw, 40px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.clap__auteur {
  margin-top: 3cqw !important;
  font-size: clamp(10px, 4.4cqw, 13px);
  opacity: 0.75;
}

/* Pictogramme : claquoir rayé entrouvert sur une ardoise au trait */

/* Petites vignettes (mobile) : mentions du clap resserrées pour rester sur une à deux lignes */
@container (max-width: 230px) {
  .clap__haut,
  .clap__pied { padding: 0 10px; font-size: 8px; letter-spacing: 0.1em; line-height: 1.4; }
  .clap__auteur { font-size: 10px; }
}

/* Pochette d'album : visuel carré sur toute la largeur, fond prolongé dans la couleur de sa bordure */
.pochette {
  display: flex;
  align-items: center;
  background: var(--fond-pochette, var(--creme-2));
}
.projet .pochette img { aspect-ratio: 1; background: none; }

.projet h3 {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 23px;
  letter-spacing: 0;
  line-height: 1.12;
}
.projet > p {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--gris-legende);
}

/* Cartes « affiche » (filmographie et autres projets) : le visuel seul au repos ; titre et crédits
   sur un voile au survol, au focus clavier, ou au premier toucher sur écran tactile. */
.grille--affiches { row-gap: 22px; }
.grille--3.grille--affiches { row-gap: 28px; }

.projet--affiche { position: relative; display: block; }
.projet--fixe:focus-visible { outline: 2px solid var(--encre); outline-offset: 4px; }
.projet__media { position: relative; overflow: hidden; container-type: inline-size; }
.projet--affiche:hover img { filter: none; }

.projet__voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  justify-content: safe flex-end;   /* si le texte déborde, on garde le haut (titre) visible */
  align-items: flex-start;
  padding: 8cqw 7cqw;
  text-align: left;
  color: var(--blanc);
  background: linear-gradient(to top, rgba(6, 6, 6, 0.93) 0%, rgba(6, 6, 6, 0.72) 50%, rgba(6, 6, 6, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.projet__voile > :not(.projet__fiche) {
  transform: translateY(8px);
  transition: transform 0.45s ease;
}
.projet--affiche:hover .projet__voile,
.projet--affiche:focus-within .projet__voile,
.projet--fixe:focus .projet__voile,
.projet--affiche.is-open .projet__voile { opacity: 1; }
.projet--affiche:hover .projet__voile > *,
.projet--affiche:focus-within .projet__voile > *,
.projet--fixe:focus .projet__voile > *,
.projet--affiche.is-open .projet__voile > * { transform: none; }

.projet__voile .projet__meta {
  margin: 0 0 2.6cqw;
  font-size: clamp(9px, 3.4cqw, 11px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.projet__voile .projet__titre {
  margin: 0;
  color: var(--blanc);
  font-family: var(--serif);
  font-size: clamp(19px, 8.6cqw, 30px);
  letter-spacing: -0.005em;
  line-height: 1.06;
}
.projet__voile .projet__credits {
  margin: 3.4cqw 0 0 !important;
  font-size: clamp(11px, 4.3cqw, 14px) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}
.projet__voile .projet__credits + .projet__credits { margin-top: 1cqw !important; }
.projet__voile .projet__credits strong { color: rgba(255, 255, 255, 0.62); }
.projet__fiche {
  margin: 5cqw 0 0;
  padding-bottom: 2px;
  font-size: clamp(11px, 4.2cqw, 13.5px);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.projet__fiche::after { content: " ↗"; }

/* Carton sans affiche mais avec une fiche (Piñatas) : le voile recouvre entièrement le carton */
.projet--clap .projet__voile { background: var(--noir); }

/* Petites cartes (mobile, deux colonnes) : le voile des autres projets ne garde que le crédit principal */
@container (max-width: 230px) {
  .projet__voile .projet__credits--detail { display: none; }
}
/* Très petits téléphones : titre et marges resserrés pour que les longs titres tiennent */
@container (max-width: 160px) {
  .projet__voile { padding: 6cqw; }
  .projet__voile .projet__titre { font-size: 16px; }
  .projet__voile .projet__meta { letter-spacing: 0.1em; }
  .projet__voile .projet__credits { line-height: 1.35; }
  .projet__fiche { margin-top: 3.5cqw; }
}
/* Téléphones de 320 px : la carte entière reste le lien, la mention de la fiche s'efface */
@container (max-width: 140px) {
  .projet__fiche { display: none; }
}

.clap__pied .clap__sortie { margin-top: 1.6cqw; opacity: 0.8; }

/* « Voir plus » : les films suivants s'insèrent dans la même grille */
.grille.est-replie .projet--suite { display: none; }
.projet--suite.apparait { animation: apparition 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--rang, 0) * 70ms); }
.projet--suite.disparait { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.5s ease; }
@keyframes apparition {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
#filmographie { scroll-margin-top: 24px; }
.projet--affiche { scroll-margin-top: 96px; }

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

/* Icônes de réseaux : monochromes, de la couleur de l'en-tête */
.reseaux { display: flex; align-items: center; gap: 16px; }
.reseaux a {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  opacity: 0.75;
  transition: opacity 0.25s;
}
.reseaux a:hover,
.reseaux a:focus-visible { opacity: 1; }

.reseaux--menu { display: none; }

/* ---------- Écoute ---------- */

.ecoute {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 110px var(--gouttiere) 120px;
  background: var(--creme-2);
  text-align: center;
}

.pistes {
  counter-reset: piste;
  width: 100%;
  max-width: 1080px;
  margin: 40px 0 44px;
  padding: 0;
  list-style: none;
  text-align: left;
  border-bottom: 1px solid var(--filet);
}

/* Piste : numéro, lecture, titre du morceau (et son film ou album), progression et temps.
   Sans cadre ni fond : une ligne de liste entre deux filets, dans l'ivoire du site. */
.piste {
  counter-increment: piste;
  --trait: rgba(22, 22, 22, 0.2);
  display: grid;
  grid-template-columns: 32px 48px minmax(0, 1fr) minmax(200px, 36%);
  grid-template-areas: "num jouer infos lecture";
  align-items: center;
  column-gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--filet);
}
.piste::before {
  content: counter(piste, decimal-leading-zero);
  grid-area: num;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gris-legende);
  transition: color 0.25s;
}

.piste__jouer {
  grid-area: jouer;
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(22, 22, 22, 0.62);
  border-radius: 50%;
  background: transparent;
  color: var(--encre);
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, opacity 0.25s;
}
.piste__jouer:hover:not([aria-disabled="true"]) { border-color: var(--encre); background-color: rgba(22, 22, 22, 0.05); }
.piste__jouer:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.piste__icone { display: block; width: 15px; height: 15px; fill: currentColor; }

/* Lecture désactivée tant que le fichier manque : cercle pointillé, et une indication discrète
   sous le bouton au survol, au focus clavier ou au toucher */
.piste__jouer[aria-disabled="true"] {
  cursor: default;
  color: rgba(22, 22, 22, 0.5);
  border-style: dashed;
  border-color: rgba(22, 22, 22, 0.46);
}
.piste__jouer[data-info]::after {
  content: attr(data-info);
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gris-legende);
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.piste__jouer[data-info]:hover::after,
.piste__jouer[data-info]:focus-visible::after,
.piste__jouer[data-info].indique::after { opacity: 1; transform: translate(-50%, 0); }
.piste__icone-pause { display: none; }
.piste.est-en-lecture .piste__icone-lecture { display: none; }
.piste.est-en-lecture .piste__icone-pause { display: inline; }
.piste.est-en-lecture .piste__jouer { border-color: var(--encre); }
.piste.est-en-lecture::before { color: var(--encre); }

.piste__infos { grid-area: infos; min-width: 0; }
.piste__titre {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.1;
}
.piste__origine {
  margin: 5px 0 0;
  font-size: 14px;
  color: var(--gris-legende);
}
.piste__origine em { font-family: var(--serif); font-style: italic; font-size: 15.5px; }

/* Progression : un filet très fin ; la zone cliquable est plus haute que le trait */
.piste__lecture {
  grid-area: lecture;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.piste__barre {
  --p: 0;
  position: relative;
  flex: 1;
  min-width: 60px;
  height: 22px;
  cursor: pointer;
  touch-action: none;
}
.piste__barre::before,
.piste__progression {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  margin-top: -0.5px;
}
.piste__barre::before { background: var(--trait); transition: background-color 0.25s; }
.piste__barre:hover::before { background: rgba(22, 22, 22, 0.32); }
.piste__progression {
  background: var(--encre);
  transform: scaleX(var(--p));
  transform-origin: left center;
}
.piste__curseur {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--encre);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
}
.piste__barre:hover .piste__curseur,
.piste__barre:focus-visible .piste__curseur,
.piste__barre.glisse .piste__curseur,
.piste.est-en-lecture .piste__curseur { opacity: 1; transform: none; }
.piste__barre:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; border-radius: 2px; }
.piste__temps {
  flex: none;
  min-width: 82px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  color: var(--gris-legende);
}

/* Sans fichier : barre et temps restent dans le code mais ne s'affichent pas ; ils apparaissent
   d'eux-mêmes quand le fichier est ajouté. Fichier illisible : seule une mention remplace le temps. */
.piste[data-etat="attente"] .piste__lecture { visibility: hidden; }
.piste[data-etat="erreur"] .piste__barre { display: none; }
.piste[data-etat="erreur"] .piste__jouer { transition: none; }
.piste[data-etat="erreur"] .piste__temps {
  flex: 1;
  min-width: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Spotify : un seul accès, le logo, discret et légèrement transparent, sous la liste */

/* Lien discret sous une carte */
.carte__lien {
  align-self: flex-start;
  font-size: 14px;
  font-weight: 500;
  color: var(--encre);
  border-bottom: 1px solid var(--filet);
  padding-bottom: 2px;
  transition: border-color 0.25s;
}
.carte__lien:hover { border-color: var(--encre); }
.carte__lien[target="_blank"]::after { content: " ↗"; }

.projet__visuel { display: block; }

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

.propos {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(1040px + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 150px var(--gouttiere) 140px;
  text-align: center;
}

/* Deux blocs éditoriaux rapprochés : photo | texte, puis texte | photo */
.propos__blocs {
  display: grid;
  gap: 64px;
  width: 100%;
  margin-top: 64px;
}
.propos__bloc {
  display: grid;
  grid-template-columns: 5fr 6fr;
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
  text-align: left;
}
.propos__bloc--inverse { grid-template-columns: 6fr 5fr; }
.propos__paragraphe {
  margin: 0;
  color: var(--encre);
  font-size: clamp(16px, 1.3vw, 18.5px);
  font-weight: 400;
  letter-spacing: -0.006em;
  line-height: 1.66;
  text-wrap: pretty;
}
.propos__paragraphe em { font-size: 1.12em; line-height: 1; }

/* Photographies personnelles : cadrage 3:2, crédit discret sur l'image */
.photo { position: relative; margin: 0; overflow: hidden; background: var(--creme-2); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo figcaption {
  position: absolute;
  margin: 0;
  text-align: left;
  inset: auto 0 0;
  padding: 30px 14px 11px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  background: linear-gradient(to top, rgba(6, 6, 6, 0.42), rgba(6, 6, 6, 0));
  pointer-events: none;
}

/* Cadre pellicule (photos de la section À propos) : bandes sombres et perforations, discrètes */
.photo--pellicule {
  --bande: 13px;
  --bord: 4px;
  padding: var(--bande) var(--bord);
  border-radius: 2px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13'%3E%3Crect x='5.75' y='4.2' width='6.5' height='4.6' rx='1.2' fill='%23f4f1ec'/%3E%3C/svg%3E") left top / calc(var(--bande) * 1.385) var(--bande) space no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13'%3E%3Crect x='5.75' y='4.2' width='6.5' height='4.6' rx='1.2' fill='%23f4f1ec'/%3E%3C/svg%3E") left bottom / calc(var(--bande) * 1.385) var(--bande) space no-repeat,
    var(--anthracite);
}
.photo--pellicule img { border-radius: 1.5px; }
.photo--pellicule figcaption { inset: auto var(--bord) var(--bande); border-radius: 0 0 1.5px 1.5px; }

/* ---------- Appel ---------- */

/* La partition comme matière de fond : à peine perceptible, fondue dans l'ivoire,
   sans bord ni cadre ; titre et bouton centrés au premier plan. */
.appel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 118px var(--gouttiere) 124px;
  border-top: 1px solid var(--filet);
  background: var(--creme);
  text-align: center;
}
.appel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/img/partition.jpg") center 42% / cover no-repeat;
  filter: grayscale(1);
  mix-blend-mode: multiply;   /* le papier blanc disparaît dans l'ivoire, seules les portées restent */
  opacity: 0.1;
  /* fondu vers l'ivoire dans toutes les directions : aucun bord visible, même sous le filet */
  -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 80%);
  mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 42%, rgba(0, 0, 0, 0) 80%);
  pointer-events: none;
}
.appel h2 { margin-bottom: 30px; }
.appel__credit {
  position: absolute;
  right: var(--gouttiere);
  bottom: 14px;
  margin: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-legende);
  opacity: 0.6;
}

/* ---------- Pied ---------- */

.pied {
  padding: 56px var(--gouttiere) 48px;
  border-top: 1px solid var(--filet);
  text-align: center;
  color: var(--gris);
}

.pied__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
}
.pied__nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 0.25s;
}
.pied__nav a:hover { color: var(--encre); }
.pied__nav a + a::before {
  content: "·";
  margin: 0 16px;
  color: #b5b1aa;
}

.pied__nom {
  margin: 26px 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--encre);
}
.pied__mentions { margin: 0; font-size: 12px; }

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

.entete__nav a[aria-current="page"] { background: var(--encre); color: var(--creme); }

.page-tete {
  padding: 180px var(--gouttiere) 96px;
  text-align: center;
}
.page-tete__titre {
  color: var(--encre);
  white-space: nowrap;
  font-family: var(--display);
  font-size: 11vw;
  line-height: 0.82;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.page-tete p {
  max-width: 600px;
  margin: 30px auto 0;
  font-size: 16px;
}

.filmo {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--gouttiere) 150px;
}
.projet__credits {
  margin: 10px 0 0 !important;
  font-size: 13.5px !important;
  line-height: 1.45;
  color: var(--gris-texte) !important;
}
.projet__credits + .projet__credits { margin-top: 3px !important; }
.projet__credits strong {
  margin-right: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-legende);
}
.projet > .carte__lien { display: inline-block; margin-top: 14px; }

.grille--3 { grid-template-columns: repeat(3, 1fr); gap: 60px 28px; }

/* ---------- Pages Écouter, À propos, Contact ---------- */

.page-tete--seul { padding-bottom: 72px; }

.presentation {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gouttiere) 130px;
  text-align: center;
}
.presentation__portrait { width: min(520px, 100%); margin: 0; }
.presentation__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.presentation .propos__texte { margin: 56px 0 0; }

/* Listes éditoriales (discographie, repères) : même filet que les extraits */
.disco {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(1080px + 2 * var(--gouttiere));
  margin: 0 auto;
  padding: 110px var(--gouttiere) 130px;
  text-align: center;
}
.disques,
.reperes {
  width: 100%;
  margin: 56px 0 64px;
  padding: 0;
  list-style: none;
  text-align: left;
  border-bottom: 1px solid var(--filet);
}
.reperes { margin-bottom: 0; }

.disque {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  align-items: center;
  column-gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--filet);
}
.disque__pochette { width: 72px; height: 72px; object-fit: cover; }
.disque h3,
.disque h4 {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0;
  line-height: 1.1;
}
.disque__infos p { margin: 5px 0 0; font-size: 14px; color: var(--gris-legende); }
.disque .carte__lien { align-self: center; white-space: nowrap; }
.pistes:last-child { margin-bottom: 0; }

.repere {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  column-gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--filet);
}
.repere__annee {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--gris-legende);
}
.repere p { margin: 0; font-size: 18px; line-height: 1.45; color: var(--encre); }
.repere em { font-family: var(--serif); font-style: italic; font-size: 20px; }

.page-tete--contact { padding-bottom: 110px; }
.page-tete--contact .pilule { margin-top: 36px; }

.ailleurs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 64px var(--gouttiere) 150px;
  border-top: 1px solid var(--filet);
}
.ailleurs__titre {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris-legende);
}
.ailleurs__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .grille { grid-template-columns: repeat(2, 1fr); gap: 40px 14px; }
  .grille--affiches { row-gap: 14px; }
  .grille--3 { grid-template-columns: repeat(2, 1fr); gap: 44px 14px; }
  .grille--3.grille--affiches { row-gap: 14px; }
}

/* En-tête compact dès la tablette (≤ 1180 px) : rubriques et réseaux passent dans le menu */
@media (max-width: 1180px) {
  .entete { grid-template-columns: 1fr auto; }
  .entete__nav,
  .entete__cta,
  .reseaux--entete { display: none; }
  .entete.is-open .reseaux--menu { display: flex; gap: 22px; margin-top: 14px; padding: 6px 18px; }
  .entete.is-open .entete__nav .reseaux--menu a { width: 24px; height: 24px; padding: 0; background: none; border-radius: 0; }
  .entete__actions { grid-column: 2; grid-row: 1; }
  .entete__menu { display: inline-flex; }

  .entete.is-open { background: var(--noir); color: var(--blanc); padding-bottom: 28px; }
  .entete.is-open .entete__nav a,
  .entete.is-open .entete__menu { background: rgba(255, 255, 255, 0.1); color: var(--blanc); }
  .entete.is-open .entete__nav {
    display: flex;
    flex-direction: column;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 22px;
    gap: 8px;
  }
  .entete.is-open .entete__nav a { font-size: 18px; padding: 14px 18px; }
}

@media (max-width: 760px) {
  .entete__actions { gap: 14px; }

  .hero { min-height: 640px; }
  .hero .hero__portrait img { top: 70px; height: 74%; }
  .hero__texte { bottom: 7vh; }
  .hero__nom { margin-bottom: 24px; font-size: 14.2vw; }

  .selection { padding: 96px var(--gouttiere) 100px; }
  .selection__tete { margin-bottom: 44px; }
  .selection__pied { margin-top: 48px; }
  .pilule--action { padding: 14px 26px; min-height: 46px; }
  .projet h3 { font-size: 20px; margin-top: 14px; }
  .projet > p { font-size: 13px; }

  .ecoute { padding: 90px var(--gouttiere) 96px; }
  .pistes { margin: 30px 0 36px; }
  .piste {
    grid-template-columns: 22px 44px minmax(0, 1fr);
    grid-template-areas:
      "num jouer infos"
      ".   .     barre"
      ".   .     pied";
    column-gap: 14px;
    row-gap: 4px;
    padding: 20px 0 18px;
  }
  .piste__jouer { width: 44px; height: 44px; }
  .piste[data-etat="attente"] .piste__barre { display: none; }   /* pas de ligne vide sous le titre */
  .piste[data-etat="attente"] { row-gap: 0; }   /* sans fichier : seulement le titre et son origine */
  .piste__titre { font-size: 22px; }
  .piste__origine { margin-top: 4px; font-size: 13px; }
  .piste__origine em { font-size: 14.5px; }
  .piste__lecture { display: contents; }
  .piste__barre { grid-area: barre; height: 26px; margin-top: 2px; }
  .piste__temps { grid-area: pied; justify-self: start; min-width: 0; text-align: left; }

  .carton { padding: 30px 16px; }
  .carton__titre { font-size: 20px; }
  .carton__auteur { margin-top: 8px !important; font-size: 11px; }
  .carton__haut { top: 26px; }
  .carton__bas { bottom: 26px; }
  .carton::before { inset: 9px; }
  .carton__haut,
  .carton__bas { font-size: 9px; letter-spacing: 0.14em; padding: 0 14px; }

  .page-tete { padding: 140px var(--gouttiere) 64px; }
  .page-tete__titre { font-size: 13vw; }

  .propos { padding: 100px var(--gouttiere) 96px; }
  .propos__blocs { gap: 44px; margin-top: 40px; }
  .propos__bloc,
  .propos__bloc--inverse { grid-template-columns: 1fr; gap: 20px; }
  .propos__bloc--inverse .photo { order: -1; }   /* sur mobile : photo puis texte, dans les deux blocs */
  .propos__paragraphe { font-size: 16px; line-height: 1.62; }
  .photo figcaption { padding: 24px 11px 9px; font-size: 8.5px; }
  .photo--pellicule { --bande: 10px; --bord: 3px; }

  .appel { padding: 84px var(--gouttiere) 96px; }
  .appel::before {
    background-size: auto 150%;
    -webkit-mask-image: radial-gradient(ellipse 80% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 80%);
    mask-image: radial-gradient(ellipse 80% 62% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 80%);
  }
  .appel h2 { margin-bottom: 24px; }
  .appel__credit { right: 0; left: 0; bottom: 12px; font-size: 8px; }
  .presentation { padding-bottom: 90px; }
  .presentation .propos__texte { margin-top: 40px; }
  .disco { padding: 80px var(--gouttiere) 96px; }
  .disques, .reperes { margin: 40px 0 48px; }
  .reperes { margin-bottom: 0; }
  .disque { grid-template-columns: 56px 1fr; row-gap: 10px; column-gap: 16px; }
  .disque__pochette { width: 56px; height: 56px; }
  .disque h3,
  .disque h4 { font-size: 21px; }
  .disque .carte__lien { grid-column: 2; justify-self: start; }
  .repere { grid-template-columns: 1fr; row-gap: 6px; padding: 18px 0; }
  .repere p { font-size: 16px; }
  .page-tete--contact { padding-bottom: 80px; }
  .ailleurs { padding: 48px var(--gouttiere) 110px; }
  .pied__nav { gap: 10px 20px; }
  .pied__nav a + a::before { content: none; }
}

/* ==========================================================================
   Adaptations WordPress — même rendu que la maquette, avec les balises des blocs natifs.
   Le CSS d'un bloc est imprimé APRÈS cette feuille : toute surcharge d'un style de bloc
   est donc plus spécifique, jamais seulement plus tardive.
   ========================================================================== */

/* Espacement automatique de Gutenberg : coupé dans theme.json (blockGap 0), et ici à spécificité nulle,
   pour ne jamais écraser les marges des composants. */
:where(.wp-block-group) > :where(*),
:where(.wp-block-buttons) { margin-block: 0; }
figure.wp-block-image { margin: 0; }
img { height: auto; }

/* Paragraphes qui remplacent des éléments sans marge de la maquette */
.entete__nom,
.entete__liens,
.reseaux,
.langues,
p.pilule,
.projet__fiche,
.pied__nav,
.ecoute__spotify { margin: 0; }

/* ---------- Boutons natifs : la pilule est portée par le lien, le conteneur s'efface ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-buttons.boutons-centres { justify-content: center; }
.wp-block-button.pilule,
.wp-block-button.pilule:hover { display: inline-flex; padding: 0; border-radius: 999px; background: none; }
.pilule > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.07);
  color: var(--encre);
  font: 500 14px/1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}
.pilule > .wp-block-button__link:hover { background: rgba(22, 22, 22, 0.13); }
.pilule--blanche > .wp-block-button__link { background: var(--blanc); color: var(--noir); }
.pilule--blanche > .wp-block-button__link:hover { background: #e6e6e6; }
.pilule--noire > .wp-block-button__link { background: var(--encre); color: var(--blanc); }
.pilule--noire > .wp-block-button__link:hover { background: #333; }
.pilule--action > .wp-block-button__link { padding: 13px 24px; font-size: 16px; gap: 10px; }
p.pilule { user-select: none; }

/* ---------- En-tête ---------- */
.entete__nom a { display: flex; flex-direction: column; }
.entete__nom em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0;
  opacity: 0.7;
}
.langues strong { font-weight: inherit; }
.langues > :first-child::after { content: "/"; margin-left: 7px; opacity: 0.3; }

/* Icônes de réseaux : des liens texte (éditables), l'icône est un masque CSS */
.reseaux a { font-size: 0; color: inherit; }
.reseaux a::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: center / contain no-repeat;
          mask: center / contain no-repeat;
}
.reseaux a[href*="instagram.com"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.25'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.6' y='2.6' width='18.8' height='18.8' rx='5.4' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='12' cy='12' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.25'/%3E%3C/svg%3E");
}
.reseaux a[href*="spotify.com"]::before,
.ecoute__spotify a::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z'/%3E%3C/svg%3E");
}
.reseaux a[href*="imdb.com"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Ctext x='12' y='15.3' text-anchor='middle' font-family='Arial Black, Arial, Helvetica, sans-serif' font-weight='900' font-size='8.4' fill='%23000'%3EIMDb%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect x='0' y='4.2' width='24' height='15.6' rx='2.8' mask='url(%23m)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Ctext x='12' y='15.3' text-anchor='middle' font-family='Arial Black, Arial, Helvetica, sans-serif' font-weight='900' font-size='8.4' fill='%23000'%3EIMDb%3C/text%3E%3C/mask%3E%3C/defs%3E%3Crect x='0' y='4.2' width='24' height='15.6' rx='2.8' mask='url(%23m)'/%3E%3C/svg%3E");
}

@media (max-width: 1180px) {
  .wp-block-buttons.entete__cta { display: none; }
  .entete.is-open .entete__liens { flex-direction: column; gap: 8px; }
  .entete.is-open .reseaux--menu a::before { width: 22px; height: 22px; }
}

/* ---------- Héros ---------- */
.hero .hero__texte .wp-block-buttons { justify-content: center; }

/* ---------- Cartes « affiche » ---------- */
/* La fiche est un lien texte (éditable) étendu à toute la carte */
.projet__fiche a { color: inherit; text-decoration: none; }
.projet__fiche a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.projet__fiche a:focus-visible { outline: none; }
.projet--affiche:has(.projet__fiche a:focus-visible) { outline: 2px solid var(--encre); outline-offset: 4px; }

/* Pictogramme du clap : un masque CSS sur le titre (aucun bloc vide dans l'éditeur) */
.clap__titre::before {
  content: "";
  display: block;
  width: 19cqw;
  height: 17.5cqw;
  margin: -4.5cqw auto 7cqw;   /* le claquoir ouvert dépasse vers le haut, comme dans la maquette */
  background: currentColor;
  opacity: 0.85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -45 190 175'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5'%3E%3Crect x='2.25' y='45.25' width='185.5' height='82.5'/%3E%3Cg transform='rotate(-13 0 36)'%3E%3Crect x='2.25' y='2.25' width='185.5' height='31.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath d='M10 45h19l-19 30z M48 45h19l-19 30h-19z M86 45h19l-19 30h-19z M124 45h19l-19 30h-19z M162 45h19l-19 30h-19z'/%3E%3Cg transform='rotate(-13 0 36)'%3E%3Cpath d='M28 2h19l19 32h-19z M66 2h19l19 32h-19z M104 2h19l19 32h-19z M142 2h19l19 32h-19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -45 190 175'%3E%3Cg fill='none' stroke='%23000' stroke-width='4.5'%3E%3Crect x='2.25' y='45.25' width='185.5' height='82.5'/%3E%3Cg transform='rotate(-13 0 36)'%3E%3Crect x='2.25' y='2.25' width='185.5' height='31.5'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath d='M10 45h19l-19 30z M48 45h19l-19 30h-19z M86 45h19l-19 30h-19z M124 45h19l-19 30h-19z M162 45h19l-19 30h-19z'/%3E%3Cg transform='rotate(-13 0 36)'%3E%3Cpath d='M28 2h19l19 32h-19z M66 2h19l19 32h-19z M104 2h19l19 32h-19z M142 2h19l19 32h-19z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
@container (max-width: 230px) {
  .clap__titre::before { margin-bottom: 5cqw; }
}
.clap__pied p { margin: 0; }

/* Pochettes : visuel carré centré, fond prolongé (couleur propre à chaque pochette, voir plus bas) */
.pochette .wp-block-image { width: 100%; }

/* ---------- Extraits : numéro par compteur, lecteur construit par app.js ---------- */
.piste.est-equipee .wp-block-audio { display: none; }
.ecoute__spotify a {
  display: inline-flex;
  padding: 10px;
  border-radius: 50%;
  font-size: 0;
  color: var(--encre);
  opacity: 0.42;
  transition: opacity 0.3s;
}
.ecoute__spotify a::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: currentColor;
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
          mask-position: center;         mask-size: contain;         mask-repeat: no-repeat;
}
.ecoute__spotify a:hover,
.ecoute__spotify a:focus-visible { opacity: 0.8; }
.ecoute__spotify a:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }

/* ---------- À propos et contact ---------- */
.propos .wp-block-image.photo { overflow: hidden; }
.appel .wp-block-buttons { justify-content: center; }

@media (max-width: 760px) {
  .pilule--action > .wp-block-button__link { padding: 14px 26px; min-height: 46px; }
  .ecoute__spotify a::before { width: 28px; height: 28px; }
}

/* Fonds de pochette et cadrages, propres à chaque visuel (générés depuis projets.json) */
.projet .cadrage-derniere-fleur img { object-position: 92% 50%; }
.pochette--ce-qu-on-laisse { --fond-pochette: linear-gradient(#a4874e, #4a2b0e); }
.pochette--le-seigneur-des-fourneaux { --fond-pochette: linear-gradient(#1a0e0b, #2d1913); }
.pochette--a-gourmets-tale { --fond-pochette: #1d2957; }
.projet .cadrage-derniere-fleur img { object-position: 92% 50%; }
.pochette--ce-qu-on-laisse { --fond-pochette: linear-gradient(#a4874e, #4a2b0e); }
.pochette--le-seigneur-des-fourneaux { --fond-pochette: linear-gradient(#1a0e0b, #2d1913); }
.pochette--a-gourmets-tale { --fond-pochette: #1d2957; }