/* themes/defaut/theme.css — thème neutre minimal.
 * ---------------------------------------------------------------------------
 * Deux parties, et la frontière entre elles est le contrat de thème :
 *
 *   1. LES JETONS + LE GABARIT (`pf-*`) — l'identité du site. C'est ce qu'un
 *      design client remplace.
 *   2. LES STYLES DE BRICKS (`bk-*`) — l'habillage des types rendus par le
 *      moteur. Le moteur ne pose AUCUNE couleur : tout vient d'ici.
 *
 * Redéclarer les jetons suffit à changer d'identité. Une peau
 * (`{"base": "defaut"}`) ne fait que ça.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. Jetons
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --fond: #fbfaf8;
  --surface: #ffffff;
  --texte: #16150f;
  --texte-2: #6b675c;
  --bordure: #e2ded4;
  --accent: #16150f;
  --sur-accent: #ffffff;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --mesure-texte: 34rem;    /* largeur de lecture confortable */
  --mesure-wide: 62rem;
  --mesure-full: 88rem;

  --pas: 1rem;              /* unité d'espacement */
  --r: 3px;                 /* rayon */
  --entete-h: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12110f;
    --surface: #1a1917;
    --texte: #f2efe9;
    --texte-2: #a09a8e;
    --bordure: #302e2a;
    --accent: #f2efe9;
    --sur-accent: #12110f;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Socle
   ═══════════════════════════════════════════════════════════════════════════ */

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1rem/1.65 var(--sans);
  overflow-wrap: break-word;
}

img, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

.pf-skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--texte);
  padding: .6rem 1rem; border: 1px solid var(--bordure); border-radius: var(--r);
}
.pf-skip:focus { left: 1rem; top: 1rem; z-index: 10; }

/* ── Gabarit ─────────────────────────────────────────────────────────────── */

.pf-entete {
  display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
  min-height: var(--entete-h);
  padding: 1.25rem clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--bordure);
}

.pf-marque {
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  font-size: .95rem; text-decoration: none;
}

.pf-nav { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .9rem; }
.pf-langues { display: flex; gap: .5rem; margin-left: auto; font: .78rem var(--mono); }
.pf-langues a { text-decoration: none; color: var(--texte-2); }
.pf-langues a[aria-current] { color: var(--texte); text-decoration: underline; }
.pf-nav a { color: var(--texte-2); text-decoration: none; }
.pf-nav a:hover, .pf-nav a[aria-current="page"] { color: var(--texte); text-decoration: underline; }

.pf-content { padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem); }

.pf-titre {
  max-width: var(--mesure-wide);
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  font: 400 clamp(1.9rem, 5vw, 3rem)/1.15 var(--serif);
  letter-spacing: -.01em;
  view-transition-name: titre-page;   /* le titre traverse la navigation */
}

.pf-pied {
  padding: 2.5rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--bordure);
  color: var(--texte-2); font-size: .85rem;
}

/* ── Apparition au défilement ────────────────────────────────────────────── */
/* `data-reveal` sur <body> vient du thème ; `data-reveal` sur une brick est
   posé PAR enhance.js, et retiré quand elle entre à l'écran. Si le JS ne tourne
   pas, aucun de ces attributs n'existe : rien n'est caché. C'est délibéré —
   une animation d'entrée qui échoue ne doit jamais effacer la page. */

[data-reveal] .bk-w[data-reveal] {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .5s ease-out, translate .5s ease-out;
}
[data-reveal] .bk-w[data-vu] {
  opacity: 1;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Ceinture et bretelles : enhance.js ne pose déjà rien dans ce cas. */
  [data-reveal] .bk-w[data-reveal] { opacity: 1; translate: none; transition: none; }
}

/* ── Transitions de vue ──────────────────────────────────────────────────── */
/* MPA inchangé, fondu au changement de page, silence sur les navigateurs qui
   ne connaissent pas la règle. */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. Enveloppe de brick — largeur, alignement, hauteur, espacements
   ═══════════════════════════════════════════════════════════════════════════
   Ces règles lisent les attributs posés une fois pour toutes par le rendeur
   PHP. Un type de brick ne s'en occupe jamais. */

.bk-w { margin-inline: auto; margin-block: calc(var(--pas) * 1.5); }

.bk-w[data-w="text"]   { max-width: var(--mesure-texte); }
.bk-w[data-w="wide"]   { max-width: var(--mesure-wide); }
.bk-w[data-w="full"]   { max-width: var(--mesure-full); }
.bk-w[data-w="w50"]    { max-width: calc(var(--mesure-wide) / 2); }
.bk-w[data-w="w33"]    { max-width: calc(var(--mesure-wide) / 3); }
.bk-w[data-w="framed"] { max-width: var(--mesure-wide); padding: clamp(1rem, 3vw, 2rem);
                         border: 1px solid var(--bordure); border-radius: var(--r);
                         background: var(--surface); }

.bk-w[data-align="left"]   { margin-inline: 0 auto; }
.bk-w[data-align="right"]  { margin-inline: auto 0; }
.bk-w[data-align="center"] { margin-inline: auto; }

/* Hauteur maximale en vh — l'image se RÉDUIT, elle n'est jamais recadrée. */
.bk-w[data-maxh] :is(img, video) { object-fit: contain; width: auto; margin-inline: auto; }
.bk-w[data-maxh="50"]  :is(img, video) { max-height: 50vh; }
.bk-w[data-maxh="60"]  :is(img, video) { max-height: 60vh; }
.bk-w[data-maxh="75"]  :is(img, video) { max-height: 75vh; }
.bk-w[data-maxh="90"]  :is(img, video) { max-height: 90vh; }
.bk-w[data-maxh="100"] :is(img, video) { max-height: 100vh; }

.bk-w[data-before="XS"] { margin-block-start: calc(var(--pas) * .5); }
.bk-w[data-before="S"]  { margin-block-start: var(--pas); }
.bk-w[data-before="M"]  { margin-block-start: calc(var(--pas) * 3); }
.bk-w[data-before="L"]  { margin-block-start: calc(var(--pas) * 6); }
.bk-w[data-after="XS"]  { margin-block-end: calc(var(--pas) * .5); }
.bk-w[data-after="S"]   { margin-block-end: var(--pas); }
.bk-w[data-after="M"]   { margin-block-end: calc(var(--pas) * 3); }
.bk-w[data-after="L"]   { margin-block-end: calc(var(--pas) * 6); }

.bk-w-link { text-decoration: none; display: block; }

/* Demi-colonnes appariées */
.bk-row {
  display: grid; gap: clamp(1rem, 3vw, 2rem);
  max-width: var(--mesure-full); margin-inline: auto;
}
@media (min-width: 720px) { .bk-row { grid-template-columns: 1fr 1fr; } }
.bk-row > .bk-w { margin-block: 0; max-width: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   4. Les types
   ═══════════════════════════════════════════════════════════════════════════ */

.bk__title { font: 400 clamp(1.3rem, 3vw, 1.75rem)/1.25 var(--serif); margin: 0 0 .75rem; }
.bk__cap { color: var(--texte-2); font-size: .82rem; margin-top: .5rem; line-height: 1.45; }

/* Images — vignette floutée pendant le chargement, point focal au cadrage */
.bk-img {
  width: 100%;
  background-image: var(--bk-blur, none);
  background-size: cover;
  background-position: var(--bk-focal, 50% 50%);
  object-position: var(--bk-focal, 50% 50%);
}
.bk-img--chargee { background-image: none; }

/* text */
.bk-text p { margin: 0 0 1em; }
.bk-text p:last-child { margin-bottom: 0; }
.bk-text--verse p { margin-bottom: 1.4em; }
.bk-text--verse .v { display: block; padding-left: 1.5em; text-indent: -1.5em; }

/* button */
.bk-button { display: flex; }
.bk-w[data-align="center"] .bk-button { justify-content: center; }
.bk-w[data-align="right"] .bk-button { justify-content: flex-end; }
.bk-btn {
  display: inline-block; padding: .7rem 1.4rem;
  font-size: .9rem; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; border-radius: var(--r);
  background: var(--accent); color: var(--sur-accent);
  border: 1px solid var(--accent);
}
.bk-btn:hover { opacity: .85; }
.bk-button--link .bk-btn {
  background: none; color: var(--texte); border-color: transparent;
  padding: 0; text-decoration: underline;
}

/* image */
.bk-image { margin: 0; }
.bk-image--hero .bk-img { width: 100%; }

/* gallery */
.bk-gallery { display: grid; gap: clamp(.5rem, 1.5vw, .9rem); }
.bk-gallery[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.bk-gallery[data-cols="3"] { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.bk-gallery[data-cols="4"] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.bk-gallery .bk__item { margin: 0; }
.bk-gallery .bk-img { height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* Galerie justifiée : enhance.js pose les dimensions, le CSS laisse faire. */
.bk-gallery[data-layout="justify"] { display: flex; flex-wrap: wrap; }
.bk-gallery[data-layout="justify"] .bk-img { aspect-ratio: auto; width: 100%; height: 100%; }

/* slider */
.bk-slider { position: relative; }
.bk-slider__track {
  display: flex; gap: clamp(.5rem, 1.5vw, .9rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding-bottom: .5rem;
}
.bk-slider__track > .bk__item {
  flex: 0 0 min(85%, 42rem); margin: 0; scroll-snap-align: center;
}
/* Toutes les vues à la même hauteur : sinon la plus haute creuse un vide sous
   les autres, et le carrousel a l'air cassé. C'est ici que le point focal sert
   — le cadrage tombe où l'éditeur l'a demandé. */
.bk-slider__track :is(.bk-img, video) {
  height: min(60vh, 26rem); width: 100%; object-fit: cover;
}
.bk-slider__nav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  background: var(--surface); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 50%;
}
.bk-slider__nav--prev { left: .4rem; }
.bk-slider__nav--next { right: .4rem; }

/* video / embed */
.bk-video { margin: 0; }
.bk-video video { width: 100%; }
.bk-embed { margin: 0; }
.bk-embed iframe { width: 100%; border: 0; display: block; }
.bk-embed[data-ratio="16:9"] iframe { aspect-ratio: 16 / 9; }
.bk-embed[data-ratio="4:3"] iframe  { aspect-ratio: 4 / 3; }
.bk-embed[data-ratio="1:1"] iframe  { aspect-ratio: 1 / 1; }
.bk-embed[data-ratio="auto"] iframe { min-height: 24rem; }

/* links */
.bk-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.bk-links a {
  display: block; padding: .85rem 1.1rem;
  border: 1px solid var(--bordure); border-radius: var(--r);
  background: var(--surface); text-decoration: none;
}
.bk-links a:hover { border-color: var(--texte); }

/* chapter_cards */
.bk-chapters { display: grid; gap: clamp(1rem, 3vw, 1.6rem);
               grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bk-chapters__card a { text-decoration: none; display: block; }
.bk-chapters__card h3 { font: 500 1.05rem/1.3 var(--sans); margin: .7rem 0 .2rem; }
.bk-chapters__card p { margin: 0; color: var(--texte-2); font-size: .88rem; }
.bk-chapters__card .bk-img { aspect-ratio: 3 / 2; object-fit: cover; }

/* album */
.bk-album { border: 1px solid var(--bordure); border-radius: var(--r);
            background: var(--surface); overflow: hidden; }
.bk-album__head { display: flex; gap: 1rem; align-items: center; padding: 1rem; }
.bk-album__head .bk-img { width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--r); flex: none; }
.bk-album__meta { display: grid; gap: .15rem; }
.bk-album__title { font-weight: 600; }
.bk-album__artist { color: var(--texte-2); font-size: .88rem; }
.bk-album__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordure); }
.bk-album__track {
  display: flex; align-items: baseline; gap: .8rem;
  padding: .6rem 1rem; border-bottom: 1px solid var(--bordure); font-size: .92rem;
}
.bk-album__track:last-child { border-bottom: 0; }
.bk-album__track[data-src] { cursor: pointer; }
.bk-album__track[data-src]:hover { background: var(--fond); }
.bk-album__n { color: var(--texte-2); font: .8rem/1 var(--mono); min-width: 1.4em; }
.bk-album__t { flex: 1; }
.bk-album__d { color: var(--texte-2); font: .8rem/1 var(--mono); }
.bk-album__track--joue { font-weight: 600; }
.bk-album__track--joue .bk-album__n::after { content: " ▶"; }

/* contact */
.bk-contact__form { display: grid; gap: 1rem; max-width: var(--mesure-texte); }
.bk-contact__champ { display: grid; gap: .35rem; }
.bk-contact__objets { border: 0; padding: 0; margin: 0 0 .4rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.bk-contact__objets legend { width: 100%; margin-bottom: .4rem; font-size: .85rem; color: var(--texte-2); }
.bk-contact__objet input { position: absolute; opacity: 0; }
.bk-contact__objet span { display: inline-block; padding: .35rem .9rem; border: 1px solid var(--bordure); border-radius: 999px; cursor: pointer; }
.bk-contact__objet input:checked + span { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bk-contact__objet input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-contact__rgpd { font-size: .8rem; color: var(--texte-2); }
.bk-contact__champ span {
  font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2);
}
.bk-contact__champ :is(input, textarea) {
  font: inherit; font-size: 16px;   /* 16px : sinon Safari zoome au focus */
  padding: .65rem .8rem; color: var(--texte); background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--r); width: 100%;
}
.bk-contact__form .bk-btn { justify-self: start; cursor: pointer; }
.bk-contact__avis { padding: .7rem .9rem; border-radius: var(--r); border: 1px solid var(--bordure); }
.bk-contact__avis[data-ton="ok"] { background: color-mix(in srgb, var(--fond) 70%, #2f9e63 30%); }
.bk-contact__avis[data-ton="erreur"] { background: color-mix(in srgb, var(--fond) 70%, #d64533 30%); }

/* Type inconnu : présent dans le flux de l'éditeur, invisible pour le visiteur. */
.bk-unknown { min-height: 0; }

/* ── Collections — le thème sait à quoi ressemble une date de concert ─────── */

/* Dates de concert : une ligne par date, la plus proche en premier. */
.rc-date {
  display: flex; align-items: baseline; gap: 1.2rem;
  padding: .9rem 0; border-bottom: 1px solid var(--bordure);
}
.rc-date--passee { opacity: .55; }
.rc-date__quand { flex: none; min-width: 7.5rem; font: 600 .9rem/1.4 var(--mono); }
.rc-date__ou { flex: 1 1 auto; min-width: 0; }
.rc-date__ville { color: var(--texte-2); margin-left: .5rem; }
.rc-date__note { display: block; color: var(--texte-2); font-size: .85rem; }
.rc-date__billets { flex: none; padding: .4rem .9rem; font-size: .8rem; }
.rc-date__etat { flex: none; color: var(--texte-2); font-size: .8rem;
                 letter-spacing: .06em; text-transform: uppercase; }

/* ── Discographie (module) : albums, artistes, presse, citations ─────────── */

.bk-collection[data-collection="albums"] .bk-collection__liste,
.bk-collection[data-collection="artistes"] .bk-collection__liste,
.disco-grille {
  display: grid; gap: clamp(1rem, 3vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.disco-album__visuel { position: relative; }
.disco-album__img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.disco-ecouter {
  position: absolute; left: .6rem; bottom: .6rem; width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--sur-accent);
}
.disco-ecouter svg, .disco-bouton svg { width: 1rem; height: 1rem; fill: currentColor; }
.disco-album__presse {
  position: absolute; right: .5rem; top: .5rem; padding: .15rem .4rem;
  font: .65rem/1.4 var(--mono); text-transform: uppercase; background: var(--surface);
}
.disco-album__meta, .disco-album__styles { margin: .5rem 0 0; font: .75rem/1.4 var(--mono); color: var(--texte-2); text-transform: uppercase; }
.disco-album__titre { font: 600 1rem/1.25 var(--sans); margin: .3rem 0 .1rem; }
.disco-album__titre a { text-decoration: none; }
.disco-album__artiste { margin: 0; color: var(--texte-2); font-size: .88rem; }
.bk-collection[data-vue="liste"] .disco-album { display: grid; grid-template-columns: 4rem 1fr; gap: 0 1rem; align-items: center; }
.bk-collection[data-vue="liste"] .disco-album__visuel { grid-row: span 4; }
.bk-collection[data-vue="liste"] .disco-ecouter { width: 1.8rem; height: 1.8rem; left: .3rem; bottom: .3rem; }

.disco-artiste { display: block; text-decoration: none; }
.disco-artiste__img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.disco-artiste__instrument { display: block; margin-top: .6rem; font: .72rem/1.4 var(--mono); color: var(--texte-2); text-transform: uppercase; }
.disco-artiste__nom { display: block; font: 600 1.05rem/1.25 var(--sans); }

.disco-fiche, .disco-artiste-fiche { display: grid; gap: 3rem; }
.disco-fiche__tete, .disco-artiste-fiche__tete { display: grid; gap: clamp(1rem, 4vw, 2.5rem); align-items: end; }
@media (min-width: 760px) {
  .disco-fiche__tete { grid-template-columns: minmax(220px, 420px) 1fr; }
  .disco-artiste-fiche__tete { grid-template-columns: minmax(200px, 340px) 1fr; }
}
.disco-fiche__img { width: 100%; aspect-ratio: 1; object-fit: cover;
  box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--disco-ambiance, #000) 35%, transparent); }
.disco-fiche__meta, .disco-artiste-fiche__role, .disco-artiste-fiche__compte { margin: 0 0 .6rem; font: .8rem/1.5 var(--mono); color: var(--texte-2); text-transform: uppercase; }
.disco-fiche__artistes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: 1.25rem; margin: 0 0 1rem; }
.disco-fiche__presse { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1rem; }
.disco-fiche__presse img { height: 2.6rem; width: auto; }
.disco-fiche__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.disco-bouton {
  display: inline-flex; gap: .5rem; align-items: center; padding: .6rem 1.1rem; cursor: pointer;
  font: 600 .85rem var(--sans); color: var(--texte); background: none;
  border: 1px solid var(--bordure); border-radius: var(--r);
}
.disco-bouton--principal { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.disco-fiche__plateformes { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: 0; font-size: .85rem; }
.disco-fiche__plateformes span { color: var(--texte-2); }
.disco-fiche__h { font: 600 .8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; margin: 0 0 1rem; }
.disco-fiche__h span { color: var(--texte-2); margin-left: .6rem; }

.disco-pistes { list-style: none; padding: 0; margin: 0; }
.disco-pistes__partie { padding: 1.4rem 0 .4rem; font: 600 .75rem var(--mono); text-transform: uppercase; color: var(--texte-2); }
.disco-piste { border-bottom: 1px solid var(--bordure); }
.disco-piste__jouer, .disco-piste:not(:has(button)) {
  display: grid; grid-template-columns: 2.4rem 1fr auto auto; gap: .8rem; align-items: center;
  width: 100%; padding: .7rem .4rem; font: inherit; color: inherit; text-align: left; background: none; border: 0;
}
.disco-piste__jouer { cursor: pointer; }
.disco-piste__jouer:hover, .disco-piste__jouer[aria-pressed="true"] { background: color-mix(in srgb, var(--texte) 5%, transparent); }
.disco-piste__n, .disco-piste__duree { font: .82rem var(--mono); color: var(--texte-2); }
.disco-piste__badge { font: .65rem var(--mono); text-transform: uppercase; color: var(--texte-2); border: 1px solid var(--bordure); padding: 0 .3rem; }
.disco-piste--muette { opacity: .6; }
.disco-piste__audio { grid-column: 1 / -1; width: 100%; }

.disco-fiche__textes { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .disco-fiche__textes { grid-template-columns: 3fr 2fr; } }
.disco-fiche__credits dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.disco-fiche__credits dt { font: .75rem/1.6 var(--mono); color: var(--texte-2); text-transform: uppercase; }
.disco-fiche__credits dd { margin: 0; }
.disco-musiciens { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.disco-musicien a { text-decoration: none; }
.disco-musicien__visuel { display: grid; place-items: center; aspect-ratio: 4 / 5; background: var(--surface); overflow: hidden; }
.disco-musicien__visuel img { width: 100%; height: 100%; object-fit: cover; }
.disco-musicien__initiales { font: 700 1.6rem var(--sans); color: var(--texte-2); }
.disco-musicien__nom { display: block; margin-top: .5rem; font-weight: 600; }
.disco-musicien__instrument { display: block; font: .72rem/1.5 var(--mono); color: var(--texte-2); text-transform: uppercase; }
.disco-artiste-fiche__portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.disco-artiste-fiche__liens { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 0; }

.disco-presse { display: inline-grid; place-items: center; padding: .6rem; }
.disco-presse__logo { max-height: 3rem; width: auto; }
.disco-citation { margin: 0; padding: 1.5rem 0; border-top: 1px solid var(--bordure); }
.disco-citation__texte { margin: 0; font: italic 1.4rem/1.35 var(--serif); }
.disco-citation__auteur { margin-top: .6rem; color: var(--texte-2); font-size: .9rem; }

/* La barre d'une liste : filtres, puis le choix grille / liste. */
.bk-collection__barre {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: .6rem 1.2rem; margin-bottom: 1.4rem;
}
.bk-collection__filtres { display: flex; flex-wrap: wrap; gap: .4rem; }
.bk-collection__filtre {
  padding: .3rem .8rem; font-size: .85rem; text-decoration: none; color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 999px;
}
.bk-collection__filtre:hover { border-color: var(--texte-2); }
.bk-collection__filtre[aria-current] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bk-collection__vues { display: flex; border: 1px solid var(--bordure); border-radius: var(--r); overflow: hidden; }
.bk-collection__vues button {
  padding: .3rem .8rem; font: inherit; font-size: .8rem; cursor: pointer;
  background: none; color: var(--texte); border: 0;
}
.bk-collection__vues button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); }
.bk-collection[data-vue="liste"] .bk-collection__liste { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.bk-collection__i[hidden] { display: none; }
.bk-collection__pages { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.6rem; font-size: .9rem; }
.bk-collection__pages a { padding: .2rem .6rem; border: 1px solid var(--bordure); border-radius: var(--r); text-decoration: none; }
.bk-collection__pages a[aria-current] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.bk-collection__vide { padding: 2rem 0; color: var(--texte-2); }

/* Le repli générique définition/valeur : jamais beau, jamais cassé. */
.rc-item { padding: 1rem 0; border-bottom: 1px solid var(--bordure); }
.rc-titre { font: 500 1.05rem/1.3 var(--sans); margin: 0 0 .5rem; }
.rc-champs { margin: 0; display: grid; gap: .25rem; }
.rc-champ { display: flex; gap: .8rem; font-size: .9rem; }
.rc-champ dt { flex: none; min-width: 8rem; color: var(--texte-2); }
.rc-champ dd { margin: 0; }
.rc-champ .bk-img { max-width: 10rem; }

/* ── Sous-pages (brick children) ──────────────────────────────────────────── */

.bk-children__liste {
  display: grid; gap: clamp(1rem, 3vw, 1.6rem);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.bk-children__carte { text-decoration: none; display: block; }
.bk-children__carte .bk-img { aspect-ratio: 3 / 2; object-fit: cover; }
.bk-children__carte h3 { font: 500 1.05rem/1.3 var(--sans); margin: .7rem 0 .2rem; }
.bk-children__carte p { margin: 0; color: var(--texte-2); font-size: .88rem; }

/* ── Carte Atlas (brick du module atlas) ──────────────────────────────────── */

/* L'hôte reçoit un shadow root au montage : la liste rendue par le serveur
   cesse alors d'être affichée sans quitter le document. Tant qu'elle est là,
   c'est elle qu'on habille. */
.bk-atlas__hote { min-height: var(--bk-atlas-h, 80vh); }
.bk-atlas__liste { padding: var(--pas) 0; }
.bk-atlas__zone { margin: 0 0 1.4rem; }
.bk-atlas__zone .bk-atlas__zone { margin-left: 1.2rem; }
.bk-atlas__zone h3 { font: 500 1rem/1.3 var(--sans); margin: 0 0 .4rem; }
.bk-atlas__zone ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.bk-atlas__zone li { padding: .18rem 0; }
.bk-atlas__zone li span { color: var(--texte-2); font-size: .88rem; }
.bk-atlas__credit,
.bk-atlas__vide { color: var(--texte-2); font-size: .82rem; margin: .8rem 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. Visionneuse (posée par enhance.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.bk-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--fond) 12%, #000 88%);
}
.bk-lightbox img {
  grid-column: 2; max-width: 100%; max-height: 90vh;
  margin: auto; object-fit: contain;
}
.bk-lightbox__nav, .bk-lightbox__fermer {
  width: 2.8rem; height: 2.8rem; display: grid; place-items: center;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: #fff; background: rgba(255, 255, 255, .12);
  border: 0; border-radius: 50%;
}
.bk-lightbox__fermer { position: absolute; top: 1rem; right: 1rem; font-size: 1.9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   6. Aperçu de l'éditeur
   ═══════════════════════════════════════════════════════════════════════════ */

.pf-preview .bk-w { position: relative; }

.pf-pied-liens { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .6rem; font-size: .9rem; }

/* ── Newsletter (module) ─────────────────────────────────────────────────── */
.nl-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.nl-champ { flex: 1 1 16rem; display: grid; gap: .3rem; }
.nl-etiquette { font-size: .85rem; color: var(--texte-2); }
.nl-champ input { padding: .6rem .7rem; font: inherit; border: 1px solid var(--bordure); border-radius: var(--r); background: var(--surface); color: var(--texte); }
.nl-mention { font-size: .8rem; color: var(--texte-2); }
.nl-avis[data-ton="erreur"] { color: #b3261e; }