/* François d'Assise · site vitrine — mise en page des pages.
   Complète components/bundle.css du design system : uniquement des
   gabarits de page, toutes les valeurs viennent de tokens.css.

   Deux modes :
   - horizontal (accueil, parcours) : la page est une frise qui se lit de
     gauche à droite, panneau après panneau ;
   - vertical (pages pratiques) : lecture classique, avec des frises
     horizontales à l'intérieur (vie de François, itinérances). */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body.fa { min-height: 100vh; }
.fa a { -webkit-tap-highlight-color: transparent; }

/* Un bloc qui change d'ambiance reprend la couleur de texte de son thème
   (sinon il hériterait de la couleur calculée sur la page). */
[data-theme] { color: var(--texte); }

/* Lien d'évitement */
.evitement {
  position: absolute; left: var(--espace-4); top: -100px; z-index: 50;
  background: var(--accent); color: var(--sur-accent);
  padding: var(--espace-3) var(--espace-4); border-radius: var(--rayon-1);
  font-family: var(--font-uisc); letter-spacing: 0.04em; text-decoration: none;
}
.evitement:focus { top: var(--espace-3); }

/* Colonne de page : marges latérales espace-4 / espace-5 / espace-7 */
.colonne { width: 100%; max-width: calc(var(--largeur-contenu) + 2 * var(--espace-7)); margin: 0 auto; padding: 0 var(--espace-7); }
@container (max-width: 1023px) { .colonne { padding: 0 var(--espace-5); } }
@container (max-width: 639px) { .colonne { padding: 0 var(--espace-4); } }

.bloc { padding-block: var(--espace-9); }
.bloc--serre { padding-block: var(--espace-8); }
.bloc--surface { background: var(--fond-surface); }
@container (max-width: 639px) {
  .bloc { padding-block: var(--espace-8); }
  .bloc--serre { padding-block: var(--espace-7); }
}
.filet-corde { width: 100%; max-width: 380px; margin: 0 auto; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-4) var(--espace-5); }
.fa-surtitre.accent { color: var(--accent); }
.fa-surtitre.trait { color: var(--p-trait); }

/* ---------- En-tête : enveloppe pleine largeur ---------- */
.entete-site { background: var(--fond); border-bottom: 1px solid var(--filet); position: relative; z-index: 5; }
.entete-site .fa-entete { max-width: calc(var(--largeur-contenu) + 2 * var(--espace-7)); margin: 0 auto; padding-inline: var(--espace-7); border-bottom: 0; }
@container (max-width: 1023px) { .entete-site .fa-entete { padding-inline: var(--espace-5); } }
@container (max-width: 899px) { .entete-site .fa-entete { padding-inline: var(--espace-4); } }
.fa-nav .fa-btn { white-space: nowrap; }
.fa-nav .fa-btn[aria-current="page"] { background: var(--accent-survol); }

/* Menu mobile plein écran */
.menu-mobile[hidden] { display: none; }
.menu-mobile { position: fixed; inset: 0; z-index: 40; overflow-y: auto; }
.menu-mobile .fa-menu-mobile { min-height: 100%; }
.menu-mobile .fa-marque__nom { font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; font-size: 17px; }
.menu-mobile .fa-btn--principal { width: 100%; }
.menu-mobile li a[aria-current="page"] { color: var(--accent); }
body.menu-ouvert, body.immersive-ouverte { overflow: hidden; }

/* =====================================================================
   MODE HORIZONTAL : la frise
   ===================================================================== */
body.horizontal { height: 100vh; height: 100dvh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.frise {
  position: relative;
  container-type: size;
  display: flex; align-items: stretch; gap: var(--espace-8);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-behavior: smooth; scrollbar-width: none;
}
.frise::-webkit-scrollbar { display: none; }
.panneau::-webkit-scrollbar { display: none; }
.frise:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .frise { scroll-behavior: auto; } }

/* Un panneau = une « salle » de la frise : toute la hauteur, largeur selon son contenu.
   Si le contenu dépasse en hauteur, le panneau défile verticalement. */
.panneau {
  flex: none; height: 100%; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  padding: var(--espace-6) var(--espace-7);
  scrollbar-width: none;
}
.panneau > :first-child { margin-top: auto; }
.panneau > :last-child { margin-bottom: auto; }
.panneau--ecran { width: 100cqw; }
.panneau--large { width: min(100cqw, 68rem); }
.panneau--texte { width: min(100cqw, calc(var(--largeur-lecture) + 2 * var(--espace-7))); }
.panneau--oeuvre { width: auto; padding-inline: 0; }
.panneau--pied { width: min(100cqw, 72rem); background: var(--fond-surface); }
.panneau--pied .fa-pied { background: transparent; padding: 0; }
.panneau--surface { background: var(--fond-surface); }
.frise > .panneau:first-child { padding-left: var(--espace-7); }

/* Indication de lecture sur le premier panneau */
.indice-frise { display: inline-flex; align-items: center; gap: var(--espace-2); font-family: var(--font-uisc); font-size: 14px; letter-spacing: 0.1em; color: var(--texte-attenue); }
.indice-frise .fa-ico { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .indice-frise .fa-ico { animation: fa-indice 2.6s var(--courbe-lumiere) infinite; }
}
@keyframes fa-indice { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* L'œuvre occupe la hauteur du panneau ; le cartel prend la largeur de la niche */
.panneau--oeuvre .fa-oeuvre { width: max-content; }
.panneau--oeuvre .fa-cartel { width: 0; min-width: 100%; }
.panneau--oeuvre .fa-niche__creux img {
  height: max(200px, calc(100cqh - 330px)); width: auto; max-height: none;
  max-width: min(76cqw, 1000px); object-fit: contain;
}

/* Prêt exceptionnel en panneau */
.panneau--exception { width: min(100cqw, 76rem); }
.panneau--exception .fa-niche__creux img { height: max(200px, calc(100cqh - 220px)); width: auto; max-width: 100%; max-height: none; object-fit: contain; }
@container (max-width: 719px) { .panneau--exception .fa-niche__creux img { height: 34cqh; } }

/* Ouverture de partie en panneau */
.panneau.fa-ouverture { width: min(100cqw, 54rem); padding: var(--espace-7) var(--espace-7) var(--espace-7) calc(var(--espace-7) + 16px); gap: var(--espace-4); display: flex; }
.panneau.fa-ouverture > * { margin-block: 0; }
.panneau.fa-ouverture > :first-child { margin-top: auto; }
.panneau.fa-ouverture > :last-child { margin-bottom: auto; }

/* Récit en panneau */
.panneau--texte .fa-recit { gap: var(--espace-5); }
.panneau--citation { width: min(100cqw, 46rem); justify-content: center; }

/* Fin de partie */
.fin-partie { display: grid; gap: var(--espace-5); }
.fin-partie__titre { max-width: 24ch; }

/* ---------- Barre de frise (bas d'écran) ---------- */
.barre-frise {
  display: flex; align-items: center; gap: var(--espace-6);
  padding: var(--espace-2) var(--espace-7); min-height: 72px;
  background: var(--fond); border-top: 1px solid var(--filet); position: relative; z-index: 5;
}
.barre-frise__fil { flex: none; width: 240px; gap: 0; }
.barre-frise__fil .fa-fil__nom { display: none; }
.barre-frise__fil .fa-fil__etapes a { padding: 0 var(--espace-2); }
.barre-frise__fil .fa-fil__num { font-size: 15px; }
.barre-frise__nav { flex: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--espace-4); min-width: 0; }
.barre-frise__nav .fa-icone-btn { border-color: var(--bordure-controle); }
.barre-frise__nav .fa-icone-btn:hover { border-color: var(--accent); color: var(--accent); }
.barre-frise__nav .fa-icone-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--filet); color: var(--texte-attenue); }
.barre-frise__piste { display: grid; gap: 6px; min-width: 0; }
.barre-frise__etape { font-family: var(--font-uisc); font-size: 14px; letter-spacing: 0.1em; color: var(--texte); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.barre-frise__ligne { position: relative; height: 22px; }
.barre-frise__ligne::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 2px; background: var(--filet); }
.barre-frise__avance { position: absolute; left: 0; top: 4px; height: 2px; width: 0; background: var(--ocre); }
.barre-frise__reperes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.barre-frise__reperes li { position: absolute; top: 0; transform: translateX(-5px); }
.barre-frise__reperes button {
  display: grid; justify-items: start; gap: 3px; padding: 0; border: 0; background: none; color: var(--texte-attenue); cursor: pointer;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.06em; line-height: 1;
}
.barre-frise__reperes button::before { content: ""; width: 10px; height: 10px; border-radius: var(--rayon-noeud); background: var(--fond); border: 2px solid var(--ocre); box-sizing: border-box; }
.barre-frise__reperes button.is-passe::before { background: var(--ocre); }
.barre-frise__reperes button[aria-current="true"] { color: var(--texte); }
.barre-frise__reperes button[aria-current="true"]::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--fond), 0 0 0 4px var(--accent); }
.barre-frise__reperes button:hover { color: var(--accent); }
.barre-frise__reperes .repere-libelle { white-space: nowrap; }
@container (max-width: 1023px) {
  .barre-frise { padding-inline: var(--espace-5); gap: var(--espace-5); }
  .barre-frise__reperes .repere-libelle { display: none; }
  .barre-frise__ligne { height: 12px; }
}
@container (max-width: 639px) {
  .barre-frise { padding: var(--espace-2) var(--espace-4); min-height: 64px; }
  .barre-frise__fil { display: none; }
  .barre-frise__nav { gap: var(--espace-3); }
}

/* ---------- Mobile : balayage panneau par panneau ---------- */
@container (max-width: 639px) {
  .frise { gap: 0; scroll-snap-type: x mandatory; }
  .panneau, .panneau--oeuvre, .panneau--texte, .panneau--large, .panneau--pied, .panneau--exception, .panneau--citation, .panneau.fa-ouverture {
    width: 100cqw; scroll-snap-align: start; scroll-snap-stop: always;
    padding: var(--espace-5) var(--espace-4);
  }
  .frise > .panneau:first-child { padding-left: var(--espace-4); }
  .panneau.fa-ouverture { padding-left: calc(var(--espace-4) + 12px); }
  .panneau--oeuvre { align-items: center; }
  .panneau--oeuvre .fa-niche__creux { padding: var(--espace-4); }
  .panneau--oeuvre .fa-niche__creux img { height: max(180px, calc(100cqh - 330px)); max-width: calc(100cqw - 2 * var(--espace-4) - 24px - 2 * var(--espace-4)); }
}

/* ---------- Accueil : panneaux ---------- */
.une { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--espace-8); align-items: center; }
.une__texte { display: grid; gap: var(--espace-5); align-content: center; }
.une__titre { display: grid; gap: var(--espace-3); }
.une__titre .display { color: var(--texte); text-transform: uppercase; }
.une__titre .h1 { color: var(--texte); font-style: italic; }
.une__chapo { max-width: 34rem; color: var(--texte); }
.une__photo { margin: 0; display: grid; gap: var(--espace-2); }
.une__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: calc(100cqh - 120px); object-fit: cover; }
.une__photo figcaption, .legende-photo { font-size: 15px; line-height: 1.45; color: var(--texte-attenue); }
.une__photo figcaption b, .legende-photo b { color: var(--texte); }
@container (max-width: 899px) {
  .une { grid-template-columns: 1fr; gap: var(--espace-5); }
  .une__photo { order: -1; }
  .une__photo img { max-height: 32cqh; }
}

.seuil__grille { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espace-8); align-items: center; }
.seuil__texte { display: grid; gap: var(--espace-5); align-content: center; max-width: 34rem; }
.seuil .fa-oeuvre { width: max-content; }
.seuil .fa-cartel { width: 0; min-width: 100%; }
.seuil .fa-niche__creux img { height: max(200px, calc(100cqh - 330px)); width: auto; max-height: none; object-fit: contain; }
@container (max-width: 899px) {
  .seuil__grille { grid-template-columns: 1fr; gap: var(--espace-6); }
  .seuil .fa-oeuvre { justify-self: center; }
  .seuil .fa-niche__creux img { height: 46cqh; max-width: calc(100cqw - 104px); }
}

/* Sommaire des trois parties (jour : chiffres en accent, sans couleur de partie) */
.sommaire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-6); list-style: none; margin: 0; padding: 0; }
.sommaire li { display: grid; gap: var(--espace-3); align-content: start; padding-top: var(--espace-5); border-top: 1px solid var(--texte); }
.sommaire__chiffre { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: 0.06em; color: var(--accent); }
.sommaire p { color: var(--texte-attenue); }
@container (max-width: 799px) { .sommaire { grid-template-columns: 1fr; gap: var(--espace-5); } }

.bloc-citation { display: grid; justify-items: center; gap: var(--espace-7); }

/* Accueillir l'exposition */
.accueillir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--espace-8); align-items: center; }
.accueillir__texte { display: grid; gap: var(--espace-5); }
.accueillir__liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--espace-3); }
.accueillir__liste li { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-3); align-items: start; }
.accueillir__liste .fa-ico { color: var(--accent); margin-top: 2px; }
.accueillir__escales .fa-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.accueillir__escales .fa-galerie img { max-height: calc((100cqh - 200px) / 2); }
@container (max-width: 899px) { .accueillir { grid-template-columns: 1fr; gap: var(--espace-6); } }

/* ---------- Œuvres : boutons, révélation ---------- */
.cartel__voir { justify-self: start; margin-top: var(--espace-2); min-height: 44px; padding-block: 0; }
.cartel__voir .fa-ico { width: 1.1em; height: 1.1em; }
[data-oeuvre] .fa-niche__creux img { cursor: zoom-in; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-theme="nuit"] .fa-niche[data-reveler]:not(.fa-revele) img { opacity: 0.2; filter: brightness(0.04) saturate(0.4); }
}

/* Appel à accueillir (fin de parcours) */
.appel { display: grid; gap: var(--espace-4); max-width: 34rem; }
.appel .fa-surtitre { color: var(--accent); }
.appel p.corps { color: var(--texte-attenue); }

/* ---------- Vue immersive (dialogue) ---------- */
.immersive[hidden] { display: none; }
.immersive { position: fixed; inset: 0; z-index: 60; background: var(--niche-fond); overflow-y: auto; container-type: inline-size; }
.immersive .fa-immersive { min-height: 100%; }
.immersive .fa-immersive__oeuvre { height: min(72vh, 760px); }
@container (max-width: 719px) { .immersive .fa-immersive__oeuvre { height: 56vh; } }
.immersive .fa-immersive__corps { transition: opacity var(--duree-transition) var(--courbe-lumiere); }
.immersive .is-change { opacity: 0; }
.fa-immersive__nav .fa-btn[aria-disabled="true"] { visibility: hidden; }

/* ---------- Pied de page ---------- */
.pied-site { background: var(--fond-surface); }
.pied-site .fa-pied { max-width: calc(var(--largeur-contenu) + 2 * var(--espace-7)); margin: 0 auto; padding-inline: var(--espace-7); }
@container (max-width: 1023px) { .pied-site .fa-pied { padding-inline: var(--espace-5); } }
@container (max-width: 719px) { .pied-site .fa-pied { padding-inline: var(--espace-4); } }
.fa-pied .pied-titre { font-family: var(--font-uisc); font-size: 14px; letter-spacing: 0.1em; font-weight: 500; line-height: 1.3; color: var(--texte-attenue); margin-bottom: var(--espace-3); }
.fa-pied__bas .fa-a-completer { color: var(--texte-attenue); }

/* =====================================================================
   MODE VERTICAL : pages pratiques (jour)
   ===================================================================== */
.tete-page { padding-block: var(--espace-8) var(--espace-7); display: grid; gap: var(--espace-4); max-width: 46rem; }
.tete-page .fa-surtitre { color: var(--accent); }
.tete-page .chapo { color: var(--texte); }
@container (max-width: 639px) { .tete-page { padding-block: var(--espace-6) var(--espace-5); } }

/* Frise horizontale dans une page verticale (vie de François, itinérances) */
.frise-bloc { position: relative; }
.frise-bloc .fa-frise { padding-top: var(--espace-7); scrollbar-width: thin; }
.frise-bloc__commandes { display: flex; gap: var(--espace-2); justify-content: flex-end; }
.frise-bloc__commandes .fa-icone-btn { border-color: var(--bordure-controle); }
.frise-bloc__commandes .fa-icone-btn:hover { border-color: var(--accent); color: var(--accent); }

.frise-vie { grid-auto-columns: minmax(250px, 1fr); }
.frise-vie li { gap: var(--espace-2); padding-right: var(--espace-3); }
.frise-vie .fa-frise__annee { font-size: 22px; }
.frise-vie h3 { margin: 0; }
.frise-vie p { color: var(--texte-attenue); font-size: 17px; line-height: 1.55; }
.frise-vie li:not(.is-cle) .fa-frise__point { background: var(--fond); border: 2px solid var(--ocre); }
.frise-vie .fa-vie__oeuvres { margin-top: var(--espace-2); }

/* Grille d'œuvres jour (collection) */
.collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espace-7) var(--espace-6); align-items: start; }
.collection .fa-niche__creux { min-height: 300px; }
.collection .fa-niche__creux img { max-height: 340px; }
.collection--objets .fa-niche__creux { padding: var(--espace-3); }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--espace-8); align-items: start; }
@container (max-width: 899px) { .duo { grid-template-columns: 1fr; gap: var(--espace-6); } }

.photos-dispositif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-4); margin: 0; }
.photos-dispositif img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.photos-dispositif figure { margin: 0; display: grid; gap: var(--espace-2); }

.note-envoi { font-size: 15px; color: var(--texte-attenue); }
.bande-appel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espace-6); align-items: center; }
@container (max-width: 799px) { .bande-appel { grid-template-columns: 1fr; } }

/* Les attributs width/height servent au calcul de la mise en page ; la hauteur suit le ratio CSS */
.fa-galerie img { height: auto; }

/* Une frise interne défile dans son cadre, sans élargir la page */
.fa-section { grid-template-columns: minmax(0, 1fr); }
.frise-bloc { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.frise-colonne { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-3); }

/* ---------- Frise de vie en pleine page (François) ----------
   Les étapes se touchent : le fil ocre court sans interruption d'un panneau à l'autre. */
.panneau--vie { width: min(100cqw, 24rem); padding-top: var(--espace-8); margin-right: calc(-1 * var(--espace-8)); }
.panneau--vie > :first-child { margin-top: 0; }
.panneau--vie + .panneau:not(.panneau--vie) { margin-left: var(--espace-8); }
.vie__date { font-family: var(--font-display); font-size: 40px; line-height: 1; letter-spacing: 0.04em; color: var(--accent); min-height: 40px; }
.vie__fil { position: relative; height: 16px; margin: var(--espace-4) calc(-1 * var(--espace-7)) var(--espace-5); }
.vie__fil::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--ocre); }
.vie__point { position: absolute; left: var(--espace-7); top: 0; width: 16px; height: 16px; border-radius: var(--rayon-noeud); background: var(--fond); border: 2px solid var(--ocre); box-shadow: 0 0 0 3px var(--fond); }
.panneau--vie.is-cle .vie__point { background: var(--ocre); }
.panneau--vie h2 { margin-bottom: var(--espace-2); }
.vie__oeuvres { display: flex; gap: var(--espace-4); margin-top: var(--espace-5); }
.vie__oeuvre { display: grid; gap: var(--espace-2); color: var(--texte); text-decoration: none; min-width: 0; }
.vie__oeuvre .fa-niche { display: block; padding: 8px; }
.vie__oeuvre .fa-niche__creux { padding: var(--espace-3); min-height: 0; }
.vie__oeuvre img { height: max(120px, calc(100cqh - 470px)); width: auto; max-width: 100%; object-fit: contain; }
.vie__oeuvres:has(.vie__oeuvre + .vie__oeuvre) img { height: max(100px, calc(100cqh - 500px)); }
.vie__legende { font-size: 15px; line-height: 1.4; display: inline-flex; gap: var(--espace-1); flex-wrap: wrap; align-items: center; }
.vie__oeuvre:hover .vie__legende { color: var(--accent); }
.vie__oeuvre:hover .fa-niche { outline: 1px solid var(--accent); }
@container (max-width: 639px) {
  .panneau--vie { margin-right: 0; padding-top: var(--espace-7); }
  .panneau--vie + .panneau:not(.panneau--vie) { margin-left: 0; }
  .vie__fil { margin-inline: calc(-1 * var(--espace-4)); }
  .vie__point { left: var(--espace-4); }
  .vie__oeuvre img { height: max(140px, calc(100cqh - 400px)); }
}

/* Logo +Avenir Culture détouré, posé directement sur le fond du pied de page */
.logo-pied { display: block; height: 56px; width: auto; }

/* Vidéos et presse */
.medias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--espace-5); }
.media { display: grid; gap: var(--espace-2); align-content: start; padding: var(--espace-5); background: var(--fond-surface); border-top: 2px solid var(--accent); }
.media__source { font-family: var(--font-uisc); font-size: 14px; letter-spacing: 0.1em; color: var(--texte-attenue); }
.media p:not(.media__source) { color: var(--texte-attenue); font-size: 17px; line-height: 1.55; }
.media .fa-lien-fleche { margin-top: var(--espace-2); }

/* Portrait du collectionneur (remplace l'emplacement en pointillés) */
.portrait-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
@container (max-width: 719px) { .portrait-photo { max-width: 360px; } }

/* Vignettes d’œuvres dans un panneau de récit (artistes contemporains) */
.vignettes { list-style: none; margin: var(--espace-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espace-3); }
.vignettes figure { margin: 0; display: grid; gap: var(--espace-1); }
.vignettes img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: var(--surface, #eee); }
.vignettes figcaption { font-size: 14px; line-height: 1.3; color: var(--texte-attenue); }
@container (max-width: 560px) { .vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.media audio { width: 100%; margin: var(--espace-2) 0; }
.presse { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espace-2); font-size: 17px; }
.presse li { padding: var(--espace-2) 0; border-bottom: 1px solid var(--filet); }

/* Mentions légales */
.texte-legal { display: grid; gap: var(--espace-4); padding-bottom: var(--espace-8, 64px); }
.texte-legal h2 { margin-top: var(--espace-5); }
.legal { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: var(--espace-2) var(--espace-4); margin: 0; font-size: 17px; }
.legal dt { color: var(--texte-attenue); }
.legal dd { margin: 0; }
@media (max-width: 560px) { .legal { grid-template-columns: 1fr; } .legal dd { margin-bottom: var(--espace-2); } }