/* Jost et Spinnaker (SIL Open Font License 1.1, voir /fonts/OFL-*.txt), hébergées sur le site */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/fonts/jost-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: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/fonts/jost-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: "Jost"; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url("/fonts/jost-italic-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: "Jost"; font-style: italic; font-weight: 300 600; font-display: swap;
  src: url("/fonts/jost-italic-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: "Spinnaker"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/spinnaker-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: "Spinnaker"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/spinnaker-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; }

:root {
  /* Couleurs de l'ancien site : bandeau clair, fond mauve, prune, vert d'eau */
  --fond: #6a6170;
  --prune: #54465d;
  --clair: #efeeea;
  --encre: #2f2f2e;
  --gris: #5f5f5d;
  --texte: #fbf9fc;
  --doux: #e6dfe9;
  --accent: #d3e7e5;
  --ligne: rgba(255, 255, 255, 0.24);
  --carte: rgba(255, 255, 255, 0.07);
  --police: "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --titre: "Spinnaker", "Jost", "Helvetica Neue", Arial, sans-serif;
  --large: 72rem;
  --texte-max: 42rem;
  --h-entete: 4.6rem;
  --lent: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--fond); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  min-height: 100vh;
  padding-top: var(--h-entete);
  color: var(--texte);
  font: 350 0.97rem/1.55 var(--police);
  letter-spacing: 0.01em;
  background-color: var(--fond);
}
a { color: var(--accent); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
cite { font-style: italic; }
img { max-width: 100%; height: auto; display: block; }

.evitement {
  position: absolute; left: -999px; top: 0; z-index: 30;
  background: var(--texte); color: var(--fond); padding: 0.5rem 1rem;
}
.evitement:focus { left: 1rem; }

/* ---------- En-tête ---------- */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--h-entete);
  background: var(--clair);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.4s;
}
.entete.defile-actif { box-shadow: 0 6px 24px -12px rgba(0, 0, 0, 0.35); }
.entete-int {
  max-width: var(--large); height: 100%; margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.marque {
  color: var(--encre); text-decoration: none; white-space: nowrap;
  font-family: var(--titre); font-size: 1.25rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.entete nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0 1.6rem;
}
.entete nav li { margin: 0; }
.entete nav a {
  display: inline-block; padding: 0.5rem 0; color: var(--gris); text-decoration: none;
  font-size: 0.85rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.entete nav a:hover { color: var(--encre); }
.entete nav a[aria-current="page"] { color: var(--prune); border-bottom-color: var(--prune); }
.entete nav .langue {
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 999px; padding: 0.35rem 0.75rem; color: var(--encre);
}
.entete nav .langue:hover { border-color: var(--prune); color: var(--prune); }
.menu-bouton {
  display: none; font: 500 0.78rem/1 var(--police); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--encre); background: none; border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 999px;
  padding: 0.55rem 0.95rem; cursor: pointer;
}
@media (max-width: 72rem) {
  .js .menu-bouton { display: inline-block; }
  .js .entete nav ul {
    position: fixed; inset: var(--h-entete) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 1rem 1.5rem 2rem; background: var(--clair);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  }
  .js .menu-ouvert .entete nav ul { opacity: 1; visibility: visible; transform: none; }
  .js .entete nav a { font-size: 0.95rem; padding: 0.8rem 0; }
  .js .entete nav .langue-li { margin-top: 0.8rem; }
  .js .entete nav .langue { padding: 0.45rem 0.9rem; }
  html:not(.js) .entete { position: static; height: auto; }
  html:not(.js) body { padding-top: 0; }
  html:not(.js) .entete-int { flex-wrap: wrap; padding: 1rem 1.25rem; }
  html:not(.js) .entete nav ul { flex-wrap: wrap; }
}

/* ---------- Ouverture (accueil) et bandeaux ---------- */
.ouverture, .bandeau {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
}
.ouverture { min-height: clamp(30rem, calc(100svh - var(--h-entete)), 52rem); }
.bandeau { min-height: clamp(18rem, 48svh, 30rem); }
.ouverture-fond, .bandeau-fond {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  animation: lent-zoom 18s var(--lent) both;
}
.ouverture::after, .bandeau::after {
  content: ""; position: absolute; inset: 0 0 -2px 0; z-index: -1;
  background:
    linear-gradient(to top, var(--fond) 2%, rgba(84, 70, 93, 0.6) 45%, rgba(84, 70, 93, 0.15) 80%);
}
@keyframes lent-zoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes monte { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.ouverture-texte, .bandeau-texte {
  width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 1.25rem 4rem;
}
.ouverture-texte > *, .bandeau-texte > * { animation: monte 1.1s var(--lent) both; }
.ouverture-texte > :nth-child(2), .bandeau-texte > :nth-child(2) { animation-delay: 0.15s; }
.ouverture-texte > :nth-child(3), .bandeau-texte > :nth-child(3) { animation-delay: 0.3s; }
.ouverture-texte > :nth-child(4) { animation-delay: 0.45s; }
.surtitre {
  margin: 0 0 1rem; color: var(--accent);
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.ouverture h1 {
  margin: 0; font-family: var(--titre); font-weight: 400; line-height: 1.02;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: 0.02em;
}
.ouverture-phrase { max-width: 34rem; margin: 1rem 0 1.6rem; font-size: 1.05rem; color: var(--texte); }
.bouton {
  display: inline-flex; gap: 0.6rem; align-items: center;
  color: var(--texte); text-decoration: none;
  font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid rgba(238, 232, 222, 0.4); border-radius: 999px; padding: 0.8rem 1.4rem;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.bouton:hover { background: var(--clair); color: var(--prune); border-color: var(--clair); }
.bandeau-texte { padding-bottom: 2.8rem; }
.bandeau h1, .titre-simple h1 {
  margin: 0; font-weight: 300; line-height: 1.05;
  font-size: clamp(1.8rem, 4.5vw, 3rem); letter-spacing: 0.04em;
}
.chapo { margin: 0.6rem 0 0; color: var(--doux); font-size: 1rem; max-width: 46rem; }
.titre-simple { max-width: var(--large); margin: 0 auto; padding: 2.5rem 1.25rem 0; }
.fil { margin: 0 0 1rem; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; }
.fil a { text-decoration: none; color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .ouverture-fond, .bandeau-fond, .ouverture-texte > *, .bandeau-texte > * { animation: none; }
}

/* ---------- Contenu ---------- */
.contenu { max-width: var(--large); margin: 0 auto; padding: 1.8rem 1.25rem 3rem; }
.contenu > p, .contenu > ul:not(.creations), .contenu > dl, .contenu > h2 { max-width: var(--texte-max); }
.contenu::after { content: ""; display: block; clear: both; }
.section { max-width: var(--large); margin: 0 auto; padding: 2.8rem 1.25rem 0; }
.section:last-child { padding-bottom: 5rem; }
h2 {
  display: flex; align-items: center; gap: 1rem;
  font-size: 0.78rem; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent);
  margin: 2rem 0 0.9rem;
}
.section > h2:first-child, .contenu > h2:first-child, .presentation-texte > h2:first-child { margin-top: 0; }
h2::after { content: ""; flex: 1; max-width: 6rem; height: 1px; background: currentColor; opacity: 0.5; }
.chapeau { border-left: 2px solid var(--accent); padding-left: 1rem; color: var(--texte); }
.breves { list-style: none; padding: 0; margin: 0; }
.breves li { margin: 0 0 0.8rem; }
.breves a { color: var(--texte); text-decoration: none; font-size: 1.1rem; }
.breves a:hover { color: var(--accent); }
.breves span { display: block; color: var(--doux); font-size: 0.9rem; line-height: 1.55; margin-top: 0.15rem; }
.note { color: var(--doux); font-size: 0.88rem; margin-top: 1.5rem; }
.suite { margin-top: 1.1rem; }
.suite a {
  text-decoration: none; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
ul { padding-left: 1.2rem; }
li { margin-bottom: 0.25rem; }
li::marker { color: var(--accent); }

/* Apparition au défilement */
.js .revele { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--lent), transform 0.9s var(--lent); }
.js .revele.vu { opacity: 1; transform: none; }

/* ---------- Actualité et dates ---------- */
.actu-grille { display: grid; gap: 1.8rem; }
@media (min-width: 56rem) { .actu-grille { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } }
.actu-texte .grand { margin-top: 0; }
.dates { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ligne); max-width: 46rem !important; }
.date {
  display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: center;
  padding: 0.7rem 0; margin: 0; border-bottom: 1px solid var(--ligne);
}
.date time { display: flex; flex-direction: column; line-height: 1.1; }
.jour { font-size: 1.7rem; font-weight: 300; color: var(--texte); }
.mois { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doux); margin-top: 0.3rem; }
.date-info { display: flex; flex-direction: column; min-width: 0; }
.date-titre { color: var(--texte); font-size: 1.1rem; font-style: italic; text-decoration: none; }
.date-titre:hover { color: var(--accent); }
.date-lieu { color: var(--doux); font-size: 0.85rem; line-height: 1.5; }
.date-lien {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ligne); border-radius: 999px; padding: 0.45rem 0.85rem; white-space: nowrap;
}
.date-lien:hover { border-color: var(--accent); }
@media (max-width: 30rem) {
  .date { grid-template-columns: 4.2rem 1fr; }
  .date-lien { grid-column: 2; justify-self: start; }
}
.aucune { color: var(--doux); }
.dates.passees .date { opacity: 0.72; }
.dates.passees .jour { font-size: 1.35rem; }

/* ---------- Créations ---------- */
.creations { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .creations { grid-template-columns: repeat(3, 1fr); } }
.creation { margin: 0; }
.creation:nth-child(2) { transition-delay: 0.1s; }
.creation:nth-child(3) { transition-delay: 0.2s; }
.creation a {
  position: relative; display: block; overflow: hidden; border-radius: 3px;
  color: var(--texte); text-decoration: none; background: var(--prune);
}
.cadre { overflow: hidden; border-radius: 3px; background: var(--prune); }
/* Photo en fond : floutée et assombrie, nette au survol */
.creation .cadre { border-radius: 0; }
.creation .cadre img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transform: scale(1.08); filter: blur(3px) brightness(0.62) saturate(0.85);
  transition: transform 1.2s var(--lent), filter 0.6s;
}
.creation .cadre::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(84, 70, 93, 0.95) 0%, rgba(84, 70, 93, 0.35) 45%, transparent 75%);
}
.creation a:hover .cadre img, .creation a:focus-visible .cadre img {
  transform: scale(1.02); filter: blur(0) brightness(0.85) saturate(1);
}
.creation-texte { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; }
.creation-titre { display: block; font-size: 1.6rem; font-style: italic; line-height: 1.2; }
.creation-sous { display: block; color: var(--doux); font-size: 0.8rem; line-height: 1.4; margin-top: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .creation .cadre img { transition: none; } }

/* Bande de photos défilante */
.defile {
  list-style: none; margin: 0 -1.25rem; padding: 0 1.25rem 1rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 26rem); gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  scrollbar-color: var(--ligne) transparent;
}
.defile li { margin: 0; scroll-snap-align: start; }
.defile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }

/* ---------- Photos ---------- */
.photo { margin: 1.5rem 0; }
.photo .cadre img { width: 100%; transition: transform 1.2s var(--lent); }
.photo.large .cadre img { aspect-ratio: 16 / 8; object-fit: cover; }
.photo.cote .cadre img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; }
.photo.affiche .cadre img { aspect-ratio: auto; object-fit: contain; }
@media (min-width: 48rem) { .contenu .photo.affiche { width: 30%; } }
@media (max-width: 47.99rem) { .photo.affiche { max-width: 22rem; } }
@media (min-width: 48rem) {
  .contenu .photo.cote { float: right; width: 36%; margin: 0.4rem 0 2rem 3rem; }
}
figcaption { margin-top: 0.6rem; color: var(--doux); font-size: 0.82rem; }
.credit a { color: inherit; }
.credit-bandeau {
  position: absolute; right: 1rem; bottom: 0.6rem; margin: 0;
  font-size: 0.7rem; color: var(--doux); opacity: 0.9;
}

.presentation { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 52rem) { .presentation { grid-template-columns: 1.3fr 0.7fr; gap: 3rem; } }
.presentation .photo { margin: 0; }

/* ---------- Fiche projet ---------- */
.fiche {
  display: grid; grid-template-columns: minmax(7rem, 15rem) 1fr; gap: 0.3rem 2rem; margin: 0 0 1.5rem;
  padding: 1rem 0; border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne);
}
.fiche dt { color: var(--doux); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.6; padding-top: 0.25rem; }
.fiche dd { margin: 0; }
@media (max-width: 34rem) {
  .fiche { grid-template-columns: 1fr; gap: 0; }
  .fiche dd { margin-bottom: 0.7rem; }
}
.programmes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 52rem !important; }
.programmes li { margin: 0; }
.programmes a {
  display: inline-block; color: var(--texte); text-decoration: none; font-size: 0.82rem;
  border: 1px solid var(--ligne); border-radius: 999px; padding: 0.4rem 0.85rem;
}
.programmes a:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Discographie ---------- */
.disco { list-style: none; padding: 0; }
.disco li { margin-bottom: 0.6rem; padding-left: 3.4rem; text-indent: -3.4rem; }
.annee { color: var(--accent); display: inline-block; min-width: 3.4rem; text-indent: 0; font-size: 0.9rem; letter-spacing: 0.08em; }
.detail { color: var(--doux); font-size: 0.92rem; }
.disco-annees { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.1rem 0; }
.disco-annees dt { color: var(--accent); grid-column: 1; font-size: 0.85rem; letter-spacing: 0.08em; line-height: 1.8; }
.disco-annees dd { margin: 0; grid-column: 2; }
.disco-annees dt:not(:first-child), .disco-annees dt:not(:first-child) + dd { margin-top: 0.5rem; }

/* Repères (biographie, enseignement) */
.reperes { display: grid; grid-template-columns: 7rem 1fr; gap: 0.2rem 1rem; max-width: 46rem !important; }
.reperes dt { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.04em; line-height: 1.6; white-space: nowrap; }
.reperes dd { margin: 0; font-size: 0.9rem; line-height: 1.45; }
@media (max-width: 30rem) {
  .reperes { grid-template-columns: 1fr; gap: 0; }
  .reperes dd { margin-bottom: 0.6rem; }
}

/* ---------- Pied de page ---------- */
.pied { background: var(--prune); color: var(--doux); font-size: 0.85rem; }
.pied-int { max-width: var(--large); margin: 0 auto; padding: 2rem 1.25rem 2.5rem; }
.pied p { margin: 0.2rem 0; }
.pied-nom { color: var(--texte); font-family: var(--titre); font-size: 1.05rem; letter-spacing: 0.06em; text-transform: uppercase; }
.reseaux { margin-top: 1.2rem !important; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.reseaux a {
  color: var(--texte); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--ligne); border-radius: 999px; padding: 0.5rem 0.95rem;
}
.reseaux a:hover { border-color: var(--accent); color: var(--accent); }

.racine { text-align: center; padding-top: 22vh; }

/* Ancres : ne pas passer sous l’en-tête fixe */
[id] { scroll-margin-top: calc(var(--h-entete) + 1.5rem); }

p { margin: 0 0 0.8rem; }

/* Masqué à l'écran, lu par Google et les lecteurs d'écran */
.masque {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ouverture-phrase { font-size: 1.25rem; }

/* Accueil : texte dans la partie sombre (haut) de la photo */
.ouverture { align-items: flex-start; }
.ouverture .ouverture-texte { padding-top: clamp(3rem, 12vh, 8rem); padding-bottom: 0; }
.ouverture::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 65%, var(--fond) 99%);
}

/* Sections repliables */
.repli { max-width: 46rem; border-top: 1px solid var(--ligne); }
.repli:last-of-type { border-bottom: 1px solid var(--ligne); }
.repli + .repli { border-top: 1px solid var(--ligne); }
.repli summary {
  list-style: none; cursor: pointer; padding: 0.75rem 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.repli summary::-webkit-details-marker { display: none; }
.repli summary::after { content: "+"; font-size: 1.2rem; font-weight: 300; letter-spacing: 0; transition: transform 0.25s; }
.repli[open] summary::after { transform: rotate(45deg); }
.repli summary:hover { color: var(--texte); }
.repli > :not(summary) { margin-bottom: 1rem; }
.contenu > h2 + .repli { margin-top: 0; }

/* Deux photos côte à côte */
.duo { display: grid; gap: 1rem; margin: 1.5rem 0; }
.duo .photo { margin: 0; }
.duo .photo.large .cadre img { aspect-ratio: 3 / 2; }
@media (min-width: 44rem) { .duo { grid-template-columns: 1fr 1fr; } }

/* Accueil : liste des dates sur une colonne */
.accueil-dates { max-width: 46rem; }

/* ---------- Blocs sur fond de photos floutées ---------- */
.fond {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 2rem 0; border-radius: 4px; background: var(--prune);
}
.fond-images {
  position: absolute; inset: -24px; z-index: -2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.fond-images img {
  width: 100%; height: 100%; min-height: 100%; object-fit: cover; display: block;
  filter: blur(5px) brightness(0.5) saturate(0.9);
}
.fond-une .fond-images { grid-template-columns: 1fr; }
.fond::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(84, 70, 93, 0.94) 0%, rgba(84, 70, 93, 0.72) 55%, rgba(84, 70, 93, 0.35) 100%);
}
.fond-contenu { padding: 1.6rem 1.5rem 1.4rem; }
.fond-contenu > h2:first-child { margin-top: 0; }
.fond .repli { border-color: rgba(255, 255, 255, 0.22); }
/* Portrait de l'accueil : net à droite, texte à gauche */
.fond-portrait .fond-images img { filter: brightness(0.7); object-position: 85% 20%; }
.fond-portrait::after { background: linear-gradient(90deg, rgba(84, 70, 93, 0.97) 0%, rgba(84, 70, 93, 0.85) 45%, rgba(84, 70, 93, 0) 80%); }
.fond-portrait .fond-contenu { max-width: 34rem; padding: 2.6rem 1.8rem; }
@media (max-width: 44rem) {
  .fond-portrait::after { background: rgba(84, 70, 93, 0.8); }
}

/* ---------- Bandeau mosaïque (pochettes, coupures de presse) ---------- */
.mosaique {
  position: absolute; inset: 0; z-index: -2; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); grid-auto-rows: 110px;
  overflow: hidden; transform: rotate(-3deg) scale(1.3);
}
.mosaique img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.85); }
.bandeau-mosaique { background: var(--prune); }

/* ---------- Projets sur une ligne ---------- */
.lignes { list-style: none; padding: 0; margin: 0; max-width: none !important; }
.lignes li {
  display: grid; grid-template-columns: minmax(0, 17rem) 1fr auto 1.5rem; gap: 0 1.2rem; align-items: baseline;
  padding: 0.5rem 0; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.lignes li:last-child { border-bottom: 0; }
.lignes cite { font-size: 1rem; }
.ligne-infos { color: var(--doux); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-annee { color: var(--accent); font-size: 0.82rem; letter-spacing: 0.06em; }
.ligne-lien { text-decoration: none; text-align: right; }
@media (max-width: 44rem) {
  .lignes li { grid-template-columns: 1fr auto 1.2rem; }
  .ligne-infos { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
}

/* ---------- Dates sur une ligne : jour et mois de même taille ---------- */
.date { grid-template-columns: 9.5rem 1fr auto; padding: 0.55rem 0; }
.date time { flex-direction: row; flex-wrap: wrap; gap: 0 0.3em; align-items: baseline; }
.jour, .dates.passees .jour, .mois {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--texte); margin: 0; line-height: 1.4;
}
.mois { color: var(--doux); }
@media (max-width: 30rem) {
  .date { grid-template-columns: 1fr auto; }
  .date time { grid-column: 1 / -1; }
  .date-lien { grid-column: 2; grid-row: 2; }
}

/* Cartes des créations : bords fondus dans la page */
.creation a { background: transparent; border-radius: 0; overflow: visible; }
.creation .cadre { background: transparent; }
.creation .cadre {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
}
.creation .cadre::after { background: linear-gradient(to top, var(--fond) 4%, rgba(106, 97, 112, 0.6) 35%, transparent 65%); }

/* Accueil : prochaines dates sur une photo floutée */
.fond-dates .fond-contenu { max-width: 46rem; }
.fond-dates .dates { border-top-color: rgba(255, 255, 255, 0.22); }
.fond-dates .date { border-bottom-color: rgba(255, 255, 255, 0.16); }

/* Pied de page : nom plus discret */
.pied-nom { font-size: 0.85rem; letter-spacing: 0.08em; }

/* Discographie : une ligne par album ou par année */
.disco li { padding-left: 3.4rem; text-indent: -3.4rem; margin-bottom: 0.35rem; line-height: 1.5; }
.disco .detail { font-size: 0.85rem; }

/* Presse : média en évidence, description plus discrète */
.presse li { margin-bottom: 0.45rem; }
.presse-media { color: var(--texte); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent); }
.presse-media:hover { color: var(--accent); }
.presse-date { color: var(--accent); font-size: 0.85rem; }
.presse-desc { color: var(--doux); font-size: 0.88rem; }

.contenu > ul.disco { max-width: 62rem; }

/* Titres de section cliquables (accueil) : surbrillance au survol, sans flèche */
.titre-lien { color: inherit; text-decoration: none; transition: color 0.2s, text-shadow 0.2s; }
.titre-lien:hover, .titre-lien:focus-visible { color: var(--texte); text-shadow: 0 0 12px rgba(211, 231, 229, 0.7); }

/* Dates : tout sur une ligne (date · spectacle — lieu · infos) */
.date-info { flex-direction: row; align-items: baseline; gap: 0 0.6rem; min-width: 0; }
.date-titre { flex: none; }
.date-lieu { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 44rem) {
  .date-info { flex-direction: column; gap: 0; }
  .date-lieu { white-space: normal; }
}

/* Discographie : un disque par ligne, année seulement sur la première */
.disco li { margin-bottom: 0.15rem; }
.disco li + li .annee:empty { min-width: 3.4rem; }

/* Pied de page sans nom */
.pied-int { padding: 1.4rem 1.25rem 1.8rem; }
.reseaux { margin-top: 0 !important; }

.date { grid-template-columns: 12.5rem 1fr auto; }
.date time { flex-wrap: nowrap; white-space: nowrap; }
@media (max-width: 30rem) { .date { grid-template-columns: 1fr auto; } }

/* Fiche spectacle : intitulé au-dessus de la valeur, deux colonnes */
.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 2.5rem; max-width: 46rem !important; padding: 1rem 0; }
.fiche > div { display: block; }
.fiche dt { padding-top: 0; line-height: 1.3; margin-bottom: 0.15rem; }
.fiche dd { font-size: 0.95rem; line-height: 1.4; }
@media (max-width: 34rem) { .fiche { grid-template-columns: 1fr; } .fiche dd { margin-bottom: 0; } }

/* Liens dans les listes (enseignement, repères) : pas de soulignement, surbrillance */
.reperes dd a {
  color: var(--texte); font-weight: 500; text-decoration: none;
  transition: color 0.2s, text-shadow 0.2s;
}
.reperes dd a:hover, .reperes dd a:focus-visible {
  color: var(--accent); text-shadow: 0 0 12px rgba(211, 231, 229, 0.7);
}

/* Tous les liens du contenu : sans soulignement, surbrillance au survol */
main a { text-decoration: none; transition: color 0.2s, text-shadow 0.2s; }
main a:hover, main a:focus-visible { text-decoration: none; text-shadow: 0 0 12px rgba(211, 231, 229, 0.7); }
main p a, main li a, main dd a, .note a { color: var(--texte); font-weight: 500; }
main p a:hover, main li a:hover, main dd a:hover, .note a:hover { color: var(--accent); }
.presse-media { border-bottom: 0; }
/* les pastilles et boutons gardent leur style */
.date-lien, .programmes a, .bouton, .creation a, .reseaux a { text-shadow: none !important; }
.creation a { font-weight: inherit; }

/* Pastilles et boutons : texte seul, sans cadre, surbrillance au survol */
.date-lien, .programmes a, .bouton, .reseaux a, .entete nav .langue, .menu-bouton {
  border: 0 !important; background: none !important; border-radius: 0; padding-left: 0; padding-right: 0;
  color: var(--texte); text-decoration: none; transition: color 0.2s, text-shadow 0.2s;
}
.date-lien:hover, .programmes a:hover, .bouton:hover, .reseaux a:hover,
.date-lien:focus-visible, .programmes a:focus-visible, .bouton:focus-visible, .reseaux a:focus-visible {
  color: var(--accent) !important; text-shadow: 0 0 12px rgba(211, 231, 229, 0.7) !important;
}
.entete nav .langue, .menu-bouton { color: var(--encre); }
.entete nav .langue:hover, .menu-bouton:hover { color: var(--prune); text-shadow: 0 0 10px rgba(84, 70, 93, 0.35); }
.programmes { gap: 0.3rem 1.4rem; }
.reseaux { gap: 0 1.6rem; }
.date-lien { font-size: 0.72rem; }

/* Autres projets : le titre est le lien, plus de flèche */
.lignes li { grid-template-columns: minmax(0, 17rem) 1fr auto; }
.ligne-titre { color: var(--texte); }
.ligne-titre:hover cite { color: var(--accent); }
@media (max-width: 44rem) { .lignes li { grid-template-columns: 1fr auto; } }

/* Clarté : textes en blanc, dates et années en bleu clair (comme la discographie) */
.date time .jour, .date time .mois, .dates.passees .jour { color: var(--accent); }
.date-lieu, .creation-sous, .ligne-infos, .presse-desc, .detail, .chapo, .breves span,
.reperes dd, .fiche dd, .note, figcaption { color: var(--texte); }
.annee-couleur, .presse-date, .ligne-annee, .annee, .reperes dt, .disco-annees dt { color: var(--accent); }
.fiche dt { color: var(--accent); }
.creation-sous .annee-couleur { font-weight: 500; }

/* Bleu des dates et années (lisible sur le mauve, plus marqué que le vert d'eau) */
:root { --bleu: #cbe0f5; }
.date time .jour, .date time .mois, .dates.passees .jour,
.annee-couleur, .presse-date, .ligne-annee, .annee, .reperes dt, .disco-annees dt, .fiche dt { color: var(--bleu); }
.date time .jour, .date time .mois { font-weight: 600; }

/* Bouton musique de fond */
.musique {
  font: 500 1rem/1 var(--police); color: var(--gris); background: none; border: 0; cursor: pointer;
  padding: 0.3rem 0.2rem; transition: color 0.2s, text-shadow 0.2s, opacity 0.2s; opacity: 0.6;
}
.musique.joue { color: var(--prune); opacity: 1; animation: pulse 2.4s ease-in-out infinite; }
.musique:hover { color: var(--prune); opacity: 1; text-shadow: 0 0 10px rgba(84, 70, 93, 0.35); }
@keyframes pulse { 50% { text-shadow: 0 0 10px rgba(84, 70, 93, 0.45); } }
@media (prefers-reduced-motion: reduce) { .musique.joue { animation: none; } }
.entete nav .musique-li { margin: 0; }
@media (max-width: 72rem) {
  .js .entete nav .musique-li { order: -1; }
}

.entete-int > .musique { margin-left: -0.6rem; }

/* Bouton musique plus présent (facile à trouver pour couper le son) */
.musique {
  display: inline-flex; align-items: center; gap: 0.35rem; opacity: 1; color: var(--encre);
  border: 1px solid rgba(47, 47, 46, 0.25) !important; border-radius: 999px; padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  background: rgba(255, 255, 255, 0.45) !important;
}
.musique-note { font-size: 1.15rem; line-height: 1; }
.musique-texte { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.musique:not(.joue) .musique-note { opacity: 0.45; }
.musique:not(.joue) .musique-texte { text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.7; }
.musique.joue { color: var(--prune); border-color: rgba(84, 70, 93, 0.45) !important; }
@media (max-width: 30rem) { .musique-texte { display: none; } }

/* Bandeau du haut : photo très estompée derrière les lettres */
.entete { isolation: isolate; overflow: hidden; }
.entete::before {
  content: ""; position: absolute; inset: -20px; z-index: -1;
  background:
    linear-gradient(90deg, rgba(239, 238, 234, 0.93) 0%, rgba(239, 238, 234, 0.78) 45%, rgba(239, 238, 234, 0.9) 100%),
    url("/photos/mmo-800.jpg") center 45% / cover no-repeat;
  filter: blur(6px) saturate(0.8);
}

.entete::before {
  background:
    linear-gradient(90deg, rgba(239, 238, 234, 0.86) 0%, rgba(239, 238, 234, 0.6) 40%, rgba(239, 238, 234, 0.55) 70%, rgba(239, 238, 234, 0.82) 100%),
    url("/photos/mmo-800.jpg") center 40% / cover no-repeat;
  filter: blur(4px) saturate(0.9);
}
.entete nav a { white-space: nowrap; }
.entete nav ul { gap: 0 1.2rem; }

/* Nom du bandeau : prénom léger, nom affirmé en prune */
.marque { font-size: 1.3rem; letter-spacing: 0.1em; }
.marque-prenom { font-family: var(--police); font-weight: 300; color: var(--gris); letter-spacing: 0.16em; }
.marque-nom { font-family: var(--titre); color: var(--prune); }
.marque:hover .marque-nom { text-shadow: 0 0 12px rgba(84, 70, 93, 0.3); }

/* Bouton musique : la note seule, en couleur */
.musique {
  border: 0 !important; background: none !important; padding: 0.2rem 0.3rem;
}
.musique-note { font-size: 1.45rem; }
.musique.joue .musique-note { color: #b0457a; text-shadow: 0 0 10px rgba(176, 69, 122, 0.45); }
.musique:not(.joue) .musique-note { color: var(--gris); opacity: 0.55; }
.musique:hover .musique-note { opacity: 1; }

/* Éviter les mots seuls en fin de paragraphe */
:root { --texte-max: 46rem; }
main p, main li, main dd, .chapo, .ouverture-phrase { text-wrap: pretty; }
.ouverture-phrase { max-width: 42rem; }
main ul.presse { max-width: 62rem !important; }

/* Nom du bandeau : une seule couleur foncée, posé sur un halo clair */
.marque {
  position: relative; padding: 0.35rem 0.9rem; margin-left: -0.9rem; border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 18px 6px rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.marque-prenom, .marque-nom {
  font-family: var(--titre); font-weight: 400; color: #3b3042; letter-spacing: 0.1em;
}
.marque:hover .marque-nom, .marque:hover .marque-prenom { text-shadow: none; color: var(--prune); }

/* Accueil : surtitre en bleu, phrase en blanc (même code couleur que le reste) */
.surtitre { color: var(--bleu); font-weight: 500; }
.ouverture-phrase { color: var(--texte); }

/* Nom du bandeau : sans halo */
.marque { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; margin-left: 0; }

/* Surtitre de l'accueil : bleu un peu plus soutenu (sur fond noir, le bleu clair paraît blanc) */
.surtitre { color: #a9c9ef; }

/* Crédits photo en pied de page */
.credits-photos { margin: 0.6rem 0 0; font-size: 0.72rem; opacity: 0.75; }
.credits-photos .credit + .credit::before { content: none; }