:root {
  --bg: #0d0d0d;
  --bg-alt: #050505;
  --fg: #f5f5f0;
  --accent: #e8a33d;
  --muted: #a8a8a0;
  --border: #262626;
  --font-heading: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-body: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Filet de securite : sur un ecran plus haut que le contenu de la page,
   le fond (texture, attachment fixed) de <body> ne s'etend pas au-dela de
   sa propre boite jusqu'au bas du canevas -- on reproduit le meme fond sur
   <html> (qui occupe toujours tout le viewport) pour cette zone
   residuelle, sans toucher a la hauteur de <body> elle-meme (dont depend
   le cadrage de la photo de fond sur Home). */
html {
  background-color: #0d0d0d;
  background-image: url('/assets/images/texture-hero.jpg');
  background-size: 800px auto;
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;
}
/* z-index:0 (avec le position:relative deja pose en inline) fait de <body>
   son propre contexte d'empilement. Sans ca, les z-index:-1 des photos de
   fond (.bg-photo, .cutout-photo, etc., toutes posees juste apres <body>)
   se retrouvent empiles au niveau de la racine du document et passent
   derriere le fond opaque de <body> lui-meme -- invisibles, meme si tout
   le reste (opacite, position, image chargee) est correct. Bug reel
   constate (pas un artefact d'outil de capture), verifie en isolant
   z-index:-1 vs 0 sur une meme page. */
body {
  position: relative;
  z-index: 0;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  margin: 0;
  line-height: 1.6;
}

main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
}

/* Photo de fond plein-page (Home, Contact, Transcriptions...) : le decalage
   vertical --bg-pos-y est regle depuis le panneau visuel en previsualisant
   en largeur desktop. */
.bg-photo { top: var(--bg-pos-y, var(--bg-pos-y-fallback, 0px)); }

/* Pages en mode "cover" (Contact, Transcriptions) : desktop garde sa photo
   propre a chaque page. */
.bg-cover-mobile { display: none; }

/* Sur mobile, le fond est confine au bandeau du haut (.site-header) sur
   TOUTES les pages, et rien d'autre plus bas. L'image est posee dans le
   bandeau lui-meme (voir nav.njk) et calee en objet "cover" sur sa hauteur
   reelle -- elle s'arrete donc exactement sur le trait du bandeau, quelle
   que soit la hauteur exacte du bandeau sur l'appareil. Elle remplace
   entierement les anciens mecanismes mobile (.bg-photo etire sur toute la
   hauteur, .bg-cover-mobile, la silhouette .cutout-photo), qui restent
   actifs uniquement en desktop. */
.bg-banner-mobile { display: none; }
.site-header { position: relative; }
@media (max-width: 700px) {
  .bg-banner-mobile {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    opacity: 0.85;
    z-index: -1;
    pointer-events: none;
  }
  .bg-photo,
  .bg-cover-desktop,
  .bg-cover-mobile,
  .cutout-photo { display: none !important; }
}

.cutout-photo { top: var(--cutout-top, var(--cutout-top-fallback, 220px)); }

@media (min-width: 701px) {
  /* Ces pages ont deja leur propre fond sur desktop (.banner-bg-section
     pour les 4 pages a bandeau, .cutout-photo pour l'Agenda) -- le
     .bg-photo ajoute pour la banniere mobile ne doit pas s'afficher en
     plus derriere sur desktop. */
  .page-4tet .bg-photo,
  .page-epk .bg-photo,
  .page-trane63 .bg-photo,
  .page-jamalio .bg-photo,
  .page-agenda .bg-photo { display: none; }
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow-wrap: break-word;
}

h1 { font-size: 2.6rem; margin: 0 0 0.25rem; }
@media (max-width: 480px) {
  h1 { font-size: 2.1rem; }
}
h2 { font-size: 1.5rem; margin: 2.5rem 0 1.25rem; text-align: center; }
h3 { font-size: 1.15rem; margin: 0; }
@media (max-width: 640px) {
  h2 { margin: 1.5rem 0 0.75rem; }
}

.tagline {
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.875rem;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 1.5rem;
}
.tagline.tagline-white { color: var(--fg); font-size: 2.2rem; }

.title-center { text-align: center; margin-left: auto; margin-right: auto; }
.title-center + .tagline { text-align: center; margin-left: auto; margin-right: auto; }

p { max-width: 68ch; }

a { color: var(--accent); }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.brand { text-align: center; margin-left: clamp(0rem, 6vw, 4rem); }

.brand-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 1.6rem + 3vw, 3rem);
  letter-spacing: 0.12em;
  color: var(--fg);
  text-decoration: none;
  display: block;
}

.brand-tagline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1rem, 0.85rem + 1vw, 1.3rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0.4rem 0 0.9rem;
}

.social-links { margin: 0; display: flex; justify-content: center; gap: 0.6rem; }
.social-links a { display: block; line-height: 0; }
.social-links img { width: 39px; height: 39px; display: block; }

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  text-decoration: none;
  color: var(--bg);
  background: var(--fg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--fg);
  padding: 0.6rem 0.9rem;
  white-space: nowrap;
}
.site-nav a[aria-current="page"] { color: var(--fg); background: var(--bg); border-color: var(--fg); }
.site-nav a:hover { border-color: var(--accent); color: var(--accent); }
.site-nav a[aria-current="page"]:hover { background: var(--bg); }

.lang-switch {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.lang-switch a { text-decoration: none; color: var(--muted); }
.lang-switch a[aria-current="true"] { color: var(--fg); }

.header-right-top { display: flex; align-items: center; gap: 0.75rem; }

@media (max-width: 700px) {
  /* Pas de hamburger sur mobile : le menu reste horizontal (comme sur
     desktop, avec retour a la ligne naturel) directement dans le bandeau,
     et FR/EN se cale dans son coin haut-droit. */
  .lang-switch {
    position: absolute;
    top: 0.2rem;
    right: 1rem;
    padding: 0.35rem 0.8rem;
    font-size: 0.7rem;
    line-height: 1;
    background: rgba(13, 13, 13, 0.55);
  }
  .site-nav ul { justify-content: center; }
  .site-nav a { text-align: center; }
}

/* ---------- Photo gallery / split layout ---------- */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.split-photos { flex: 1 1 420px; min-width: 280px; }
.split-text { flex: 1.2 1 420px; min-width: 280px; }
.split-hero .split-photos { flex: 1.15 1 420px; }
.split-hero .split-text { flex: 1 1 380px; }

.album-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin: 2rem 0 1rem;
}
.album-cover-col { flex: 0 0 auto; position: relative; }
.album-cover-col > a { display: block; }
.album-row .album-cover { margin: 0; }
.buy-album-link {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0.6rem 0 0;
  text-align: center;
}
.album-row-text { flex: 1 1 380px; min-width: 280px; text-align: center; }
.album-row-text p { margin-left: auto; margin-right: auto; }
.album-row-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  flex: 0 0 auto;
  width: 150px;
  position: relative;
}
.album-row-badges .badge-round { width: 110px; height: 110px; }
/* JazzContreBand recadre a 105px (etait 150) : trop massif a cote du FSNT
   110px (retour Leo le 27/09/2026). La colonne garde une largeur fixe
   (150px, celle du plus grand logo avant reduction) pour qu'un futur
   ajustement de taille ne fasse plus bouger le reste de la ligne. */
.album-row-badges .badge-wide { width: 105px; height: auto; }
/* Logo Nardis Agency (agence de presse) case dans le vide du fond entre le
   texte et la colonne de badges, a gauche du FSNT -- position absolute,
   ne fait partie du flux flex de personne : ne peut donc jamais decaler le
   texte ni les 2 autres logos, seul son propre placement/sa taille bougent. */
.album-row-badges .badge-round-inset {
  position: absolute;
  top: 30px;
  left: -30px;
  width: 46px;
  height: 46px;
}

.banner-bg-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(rgba(13, 13, 13, 0.35), rgba(13, 13, 13, 0.35)), url('/assets/images/bg-4tet-banner.jpg');
  background-size: cover;
  background-position: center;
  padding: 2.5rem max(1.5rem, calc((100vw - 1400px) / 2 + 1.5rem));
}
@media (max-width: 640px) {
  .banner-bg-section { padding: 1.5rem 1rem; }
  /* Fond mobile unifie sur toutes les pages (meme photo, memes regles que
     la page Home) : image en pleine largeur, hauteur naturelle (jamais
     etiree/zoomee comme le faisait "cover" sur ces sections tres hautes en
     mobile), demarre tout en haut comme partout ailleurs. */
  .banner-bg-section {
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
.hero-banner-section { margin-top: -2.5rem; margin-bottom: 1rem; }
.hero-banner-section .album-row { margin-bottom: 0; }
.bio-banner-section { margin: 2.5rem 0; }

.gallery-wrap { position: relative; }

.photo-gallery {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 15%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #222;
  padding-bottom: 0.6rem;
}
.photo-gallery img {
  flex: 0 0 auto;
  height: 560px;
  width: auto;
  max-width: 82vw;
  object-fit: cover;
  scroll-snap-align: center;
}
.photo-gallery.gallery-h594 img { height: 594px; width: auto; }
.photo-gallery.gallery-h495 img { height: 495px; width: auto; }
.page-trane63 .gallery-h495 img { height: var(--hero-gallery-height, 495px); }
/* Page Trane 63 : les 2 bandeaux reprennent la photo du Coltrane Quartet
   (Jim Marshall) comme sur le site wix -- clair en haut, plus sombre en bas. */
.page-trane63 h1 { font-family: "Raleway", var(--font-heading); color: #f07903; font-size: 4.2rem; }
.page-trane63 h1 .raise-63 { position: relative; top: -0.12em; }
.page-trane63 .tagline-sub,
.page-trane63 .tagline { font-family: "Oswald", var(--font-heading); color: #f07903; }
.page-trane63 .tagline-sub {
  font-weight: 700;
  font-size: 2.6rem;
  margin: -1.8rem 0 0.25rem;
}
.page-trane63 .tagline-sub + .tagline { margin-top: -0.75rem; }
@media (max-width: 700px) {
  /* "Leo Geller Trio + Etienne Deconfin" aussi gros que possible tout en
     tenant sur 1 seule ligne (mesure exacte de la largeur du texte). */
  .page-trane63 .tagline-sub { font-size: 1.6rem; margin-top: -0.5rem; margin-bottom: 0.5rem; }
  .page-trane63 .tagline-sub + .tagline { font-size: 1.3rem; margin-top: 0.3rem; }
}
.page-trane63 h2 { font-family: "Oswald", var(--font-heading); font-weight: 700; font-size: var(--section-heading-size, 44px); }
.page-trane63 .split-hero .split-text p { font-family: "Roboto Slab", serif; font-size: 1.4rem; }
/* Page Trane 63 : les 3 posts Instagram sont forces a la meme taille (meme
   largeur + meme hauteur + recadrage), quel que soit leur format reel --
   choix explicite de Leo pour cette page, meme si ca recadre un peu plus
   le reel 9:16 que les 2 posts 4:5. */
.page-trane63 .instagram-grid { align-items: center; }
.page-trane63 .instagram-grid .instagram-media {
  width: var(--insta-card-width, 340px) !important;
  max-width: var(--insta-card-width, 340px) !important;
  height: var(--insta-portrait-height, 660px);
  overflow: hidden;
  margin: 0 !important;
}
.page-trane63 .hero-banner-section,
.page-trane63 .bio-banner-section {
  background-image: linear-gradient(rgba(13, 13, 13, var(--hero-overlay-opacity, 0.55)), rgba(13, 13, 13, var(--hero-overlay-opacity, 0.55))), url('/assets/images/bg-trane63-coltrane.jpg');
}
.page-trane63 .bio-banner-section {
  background-image: linear-gradient(rgba(13, 13, 13, var(--bottom-overlay-opacity, 0.75)), rgba(13, 13, 13, var(--bottom-overlay-opacity, 0.75))), url('/assets/images/bg-trane63-coltrane.jpg');
}
@media (max-width: 700px) {
  /* La photo de Coltrane du haut s'arrete juste sous le titre, avant le
     texte de presentation (hauteur mesuree sur le vrai rendu mobile). La
     2e photo (section Instagram/video du bas) est masquee sur mobile. */
  .page-trane63 .hero-banner-section,
  .page-trane63 .bio-banner-section { background-image: none; }
}
@media (min-width: 701px) {
  /* Remonte le bandeau du bas pour qu'il colle exactement a la fin de la
     2e photo de fond (section Instagram/videos), sans espace noir entre
     les deux. */
  .page-trane63 footer { margin-top: -88px; }
}
.photo-gallery.gallery-single img { width: 100%; max-width: none; flex: 1 1 100%; scroll-snap-align: start; }

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(13, 13, 13, 0.65);
  color: var(--fg);
  font-family: var(--font-heading);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.gallery-arrow:hover { background: var(--accent); color: var(--bg); }
.gallery-arrow.prev { left: 0.6rem; }
.gallery-arrow.next { right: 0.6rem; }

@media (max-width: 640px) {
  .photo-gallery img,
  .photo-gallery.gallery-h594 img,
  .photo-gallery.gallery-h495 img { height: 260px; }
  .gallery-arrow { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ---------- Cards (project / sideman grids, members) ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
  margin: 1.5rem 0 2.5rem;
}
.card-grid.card-grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.instagram-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0 2.5rem;
}
.instagram-grid .instagram-media { margin: 0 !important; }
.instagram-item { text-align: center; max-width: 360px; }
.instagram-item .opener { margin: 0 0 0.75rem; }

/* Page Jam a Lio : fresque de La Pente en fond du bandeau du haut (titre,
   texte, infos pratiques, bouton, logos). */
.page-jamalio .hero-banner-section {
  background-image: linear-gradient(rgba(13, 13, 13, var(--hero-overlay-opacity, 0.55)), rgba(13, 13, 13, var(--hero-overlay-opacity, 0.55))), url('/assets/images/bg-jamalio-mural.jpg');
  padding-bottom: 0.5rem;
}
@media (max-width: 700px) {
  /* La fresque s'arrete juste au-dessus du 2e paragraphe ("Organisee par
     le trio..."), hauteur mesuree sur le vrai rendu mobile. */
  .page-jamalio .hero-banner-section { background-image: none; }
}

/* Page Jam a Lio : posts Instagram a largeur uniforme. Sur les 13 posts,
   10 partagent la meme vraie photo au format portrait 4:5 (mesure sur les
   images sources) -- seuls ceux-la sont recadres a une hauteur commune ;
   les 3 autres (9, 11, 13e position -- landscape) restent en hauteur libre. */
.page-jamalio .instagram-grid { align-items: center; }
/* Reserve la meme hauteur pour la legende (1 ou 2 lignes) : les posts
   commencent tous au meme niveau, peu importe la longueur du texte au-dessus. */
.page-jamalio .instagram-item .opener { min-height: 3.2rem; }
.page-jamalio .instagram-grid .instagram-media {
  width: var(--insta-card-width, 340px) !important;
  max-width: var(--insta-card-width, 340px) !important;
  margin: 0 !important;
}
.page-jamalio .instagram-grid .instagram-item:nth-of-type(1) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(2) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(3) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(4) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(5) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(6) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(7) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(8) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(9) .instagram-media,
.page-jamalio .instagram-grid .instagram-item:nth-of-type(11) .instagram-media {
  height: var(--insta-portrait-height, 600px);
  overflow: hidden;
}

/* Page 4tet : polices propres a cette page (comme sur wix), sans toucher les autres pages */
/* position:relative + top decale juste le rendu visuel du titre, sans
   changer sa boite dans le flux -- rien d'autre ne bouge (tagline,
   paragraphes...). Demande le 22/09/2026 : rapprocher visuellement le titre
   du "Open Jazz Chaloupe" en dessous. */
.page-4tet h1 { font-family: "Raleway", var(--font-heading); font-weight: 800; font-size: 3.4rem; position: relative; top: 12px; }
.page-4tet h1 .lowercase-4tet {
  text-transform: lowercase;
  position: relative;
  top: -0.25em;
}
.page-4tet .tagline,
.page-4tet .music-section h2,
.page-4tet .members-section h2,
.page-4tet .instagram-section h2 { font-family: "Oswald", var(--font-heading); font-weight: 700; }
.page-4tet .music-section h2,
.page-4tet .members-section h2,
.page-4tet .instagram-section h2 { font-size: var(--section-heading-size, 44px); }

/* Page 4tet : la galerie photo de groupe (colonne + carrousel) est plus
   grande et touche le haut du bandeau. La largeur est portee par la colonne
   elle-meme (flex-basis fixe), pas par la photo, sinon la colonne garde sa
   place et laisse un vide a cote d'une photo devenue plus petite. */
.page-4tet .split-hero { gap: 1rem; }
.page-4tet .split-hero .split-text { flex: 0 1 480px; }
.page-4tet .split-hero .split-photos {
  margin-top: calc(-1 * var(--hero-photo-pullup, 40px));
  margin-left: auto;
  margin-right: -6px;
  flex: 0 0 var(--hero-photo-width, 700px);
  max-width: var(--hero-photo-width, 700px);
}
@media (max-width: 700px) {
  .page-4tet .split-hero .split-photos {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
.page-4tet .gallery-h495 img {
  height: var(--hero-photo-height, 580px);
  width: 100%;
}

/* Page 4tet : texte d'intro en police condensee, sans le gras.
   font-size pilote aussi les marges (margin UA par defaut = 1em) : reduire
   --hero-intro-font-size fait tenir plus de texte sans jamais toucher au
   texte lui-meme -- ajoute le 22/09/2026 pour que la colonne de texte
   s'ajuste a la hauteur de la galerie (--hero-photo-height) au lieu de
   raccourcir le texte valide par Leo. */
.page-4tet .split-hero .split-text p:not(.tagline) {
  font-family: "Oswald", var(--font-heading);
  font-weight: 400;
  font-size: var(--hero-intro-font-size, 1.5rem);
  line-height: 1.2;
}
.page-4tet .album-row-text p,
.page-4tet .album-row-text a {
  font-family: "Oswald", var(--font-heading);
  font-weight: 400;
  font-size: 1.15rem;
}

/* Page 4tet : noms de musiciens et bios formates comme sur wix */
.page-4tet .member-text h3 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--member-name-size, 22px);
  white-space: nowrap;
}
.page-4tet .member-bio {
  font-family: "Montserrat", var(--font-heading);
  font-weight: 400;
  margin-top: var(--member-bio-gap, 6px);
}

/* Page 4tet : le bandeau tournesol sous Biographies colle au contenu, pas trop haut */
.page-4tet .bio-banner-section.banner-bg-section {
  padding-top: var(--bio-banner-padding, 24px);
  padding-bottom: var(--bio-banner-padding, 24px);
}
.page-4tet .bio-banner-section .members-section { margin: 0; padding: 0; }

/* Page 4tet : posts Instagram a une largeur uniforme, hauteur laissee libre
   (carre ou paysage selon le post, comme le rendu naturel d'instagram).
   Centres sur la ligne : les formats alternatifs (plus courts) sont recentres
   et legerement descendus pour que leur centre tombe au centre des formats
   4:5 traditionnels (plus hauts, avec le champ commentaire en plus). */
.page-4tet .instagram-grid { align-items: center; }
.page-4tet .instagram-grid .instagram-media {
  width: var(--insta-card-width, 340px) !important;
  max-width: var(--insta-card-width, 340px) !important;
  margin: 0 !important;
}
/* Page 4tet : parmi les posts, 9 partagent la meme vraie photo au format
   portrait 4:5 (mesure directement sur les images sources) -- seuls ceux-la
   sont recadres a une hauteur commune, pour ne plus dependre de la legende/
   pagination du carrousel qui varie d'un post a l'autre. Les carres (1, 15,
   16), le paysage/16:9 (3, 5) et les reels 9:16 (2, 4, 14, 18) restent en
   hauteur libre. Positions decalees de +4 le 27/09/2026 (4 nouveaux posts
   ajoutes en tete) : verifier le format reel de tout nouveau post avant de
   l'ajouter ici, ne jamais se fier a sa seule position dans la liste. */
.page-4tet .instagram-grid .instagram-media:nth-of-type(6),
.page-4tet .instagram-grid .instagram-media:nth-of-type(7),
.page-4tet .instagram-grid .instagram-media:nth-of-type(8),
.page-4tet .instagram-grid .instagram-media:nth-of-type(9),
.page-4tet .instagram-grid .instagram-media:nth-of-type(10),
.page-4tet .instagram-grid .instagram-media:nth-of-type(11),
.page-4tet .instagram-grid .instagram-media:nth-of-type(12),
.page-4tet .instagram-grid .instagram-media:nth-of-type(13),
.page-4tet .instagram-grid .instagram-media:nth-of-type(17) {
  height: var(--insta-portrait-height, 660px);
  overflow: hidden;
}

/* Page 4tet : transparence des 2 bannieres tournesol */
.page-4tet .hero-banner-section,
.page-4tet .bio-banner-section {
  background-image: linear-gradient(rgba(13, 13, 13, var(--banner-overlay-opacity, 0.48)), rgba(13, 13, 13, var(--banner-overlay-opacity, 0.48))), url('/assets/images/bg-4tet-banner.jpg');
}
@media (max-width: 700px) {
  /* Fond mobile unifie : meme photo que la page Home partout, plus simple
     a regler qu'une photo differente par page. */
  .page-4tet .hero-banner-section,
  .page-4tet .bio-banner-section { background-image: none; }
}

.card { text-align: center; }
.card > a { display: block; }
.card img,
.card .card-video {
  width: 100%;
  height: 220px;
  object-fit: cover;
  margin-bottom: 0.75rem;
}
.card img.card-logo-round { object-fit: contain; }
/* Page Accueil : cartes "Projets principaux" agrandissables -- une vraie
   hauteur (pas un zoom visuel), donc "Sideman & divers" et la suite
   descendent tout seuls en consequence, sans les toucher directement. */
.page-home .card-grid:not(.card-grid-4) .card img,
.page-home .card-grid:not(.card-grid-4) .card .card-video {
  height: var(--main-card-height, 220px);
}
/* La video (Leo Geller 4tet, projet principal) est volontairement plus
   grande que les 2 autres cartes : sa colonne est plus large, et son
   format 16:9 reste entier (jamais recadree/reduite avec des bandes). */
.page-home .card-grid:not(.card-grid-4) { grid-template-columns: 1fr 2fr 1fr; }
.page-home .card-grid:not(.card-grid-4) .card-video-wrap .card-video {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* Trane 63' et La Jam a Lio partagent la meme hauteur de photo fixe
   (main-card-height) : leur legende suit juste normalement en dessous,
   donc elles restent alignees entre elles quoi qu'il arrive (contrairement
   a un alignement "colle en bas" qui varie selon qu'il y a un sous-titre
   ou non). La video, plus grande, a sa propre legende plus bas -- normal. */
.page-home .card-grid:not(.card-grid-4) { gap: var(--main-cards-gap, 1.75rem); }
.page-home .sideprojects-heading { margin-top: var(--sideprojects-gap, 2.5rem); }
/* Legende du projet principal (video) un peu plus grande que les autres */
.page-home .card-grid:not(.card-grid-4) .card:has(.card-video-wrap) h3 { font-size: 1.3rem; }
.page-home .card-grid:not(.card-grid-4) .card:has(.card-video-wrap) p { font-size: 1.05rem; }
/* Mobile : la grille 1fr-2fr-1fr (pensee pour un ecran large) ecraserait les
   3 cartes en colonnes minuscules -- on repasse en une seule colonne, avec
   une hauteur de photo/video fluide (au lieu de la hauteur fixe desktop) qui
   suit le format naturel plutot que de forcer un recadrage etroit. */
@media (max-width: 700px) {
  .page-home .card-grid:not(.card-grid-4) { grid-template-columns: 1fr; }
  .page-home .card-grid:not(.card-grid-4) .card img,
  .page-home .card-grid:not(.card-grid-4) .card .card-video {
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }
  .page-home .card-grid:not(.card-grid-4) .card-video-wrap .card-video {
    aspect-ratio: 16 / 9;
  }
  /* Le logo rond de la Jam a Lio ne doit pas etre recadre en rectangle
     comme une photo -- il garde son cadre carre, logo entier visible. */
  .page-home .card-grid:not(.card-grid-4) .card img.card-logo-round {
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }
}
.card-video-wrap { position: relative; }
.card-video-wrap .card-video { margin-bottom: 0.75rem; }
.card-sound-toggle {
  position: absolute;
  right: 0.6rem;
  bottom: calc(0.75rem + 0.6rem);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(13, 13, 13, 0.65);
  color: var(--fg);
  font-size: 0.9rem;
  cursor: pointer;
}
.card-sound-toggle:hover { background: var(--accent); color: var(--bg); }
.card-sound-toggle.is-unmuted { color: var(--accent); }
.card h3 {
  font-size: 1.05rem;
  text-transform: none;
  letter-spacing: 0;
}
.card h3 a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg);
}
.card p {
  margin: 0.3rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.video-grid figure { margin: 0; }
.video-grid iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 720px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* Page Transcriptions : playlist YouTube unique (widget "Leo Geller
   Transcriptions") avec la liste des titres en dessous, sur desktop comme
   sur mobile -- evite de charger 20 iframes en autoplay d'un coup (source
   des echecs sur mobile), et respecte l'ordre de la playlist (plus recent
   en premier). */
.yt-playlist-wrap { max-width: 900px; margin: 2rem auto; }
.yt-playlist-wrap #yt-transcriptions-player { width: 100%; aspect-ratio: 16 / 9; }
.yt-playlist-wrap #yt-transcriptions-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.yt-playlist-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.92);
}
.yt-playlist-list li {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--muted);
}
.yt-playlist-list li:last-child { border-bottom: none; }
.yt-playlist-list li:hover { background: rgba(245, 245, 240, 0.06); color: var(--fg); }
.yt-playlist-list li.is-active { color: var(--accent); font-weight: 700; background: rgba(232, 163, 61, 0.1); }
.yt-playlist-num { display: inline-block; width: 1.7em; color: var(--muted); }

/* Page EPK : le lecteur Bandcamp est un 3e element du meme video-grid,
   insere entre les 2 videos dans le HTML (voir epk.njk). Sur mobile la
   grille repasse en 1 colonne (regle generale ci-dessus) donc l'ordre du
   DOM suffit deja (video 1, bandcamp, video 2) ; sur desktop on replace
   explicitement les 2 videos cote a cote et le bandcamp en pleine largeur
   en dessous. */
.page-epk .video-grid figure:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.page-epk .video-grid figure:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.page-epk .video-grid .bandcamp-inline { grid-column: 1 / -1; grid-row: 2; margin: 0.5rem auto 0; }
@media (max-width: 720px) {
  .page-epk .video-grid figure:nth-of-type(1),
  .page-epk .video-grid figure:nth-of-type(2),
  .page-epk .video-grid .bandcamp-inline {
    grid-column: 1;
    grid-row: auto;
  }
}

.bandcamp-inline { display: block; margin: 0.5rem auto 1.5rem; }

.show-mobile-only { display: none; }

@media (max-width: 700px) {
  .instagram-section,
  .music-section, .video-grid-centered,
  .hide-mobile, .sideprojects-heading { display: none; }
  /* La page EPK affiche son bandcamp sur mobile (voir regle .page-epk
     ci-dessus) ; seule la page 4tet le masque encore sur mobile. Trane 63
     affiche aussi le sien maintenant, entre les 2 videos (voir plus bas). */
  .page-4tet .bandcamp-inline { display: none; }
  .card-grid:not(.card-grid-4) .card p:nth-of-type(n+2) { display: none; }
  .card-grid-4 .card p { display: none; }
  .card-grid-4 { grid-template-columns: 1fr; gap: 0.4rem; margin: 0.75rem 0 1.5rem; }
  .card-grid-4 .card img { display: none; }
  .card-grid-4 .card h3 { font-size: 0.95rem; }
  .show-mobile-only { display: inline; }
  /* Jam a Lio : ne montre que les 5 premieres ouvertures sur mobile (comme le vrai site) */
  .instagram-grid .instagram-item:nth-of-type(n+6) { display: none; }
}

/* Rangee "La musique" : bandcamp + 2 videos comme 3 enfants directs (dans
   cet ordre en HTML : video 1, bandcamp, video 2) -- en desktop on replace
   explicitement le bandcamp a gauche (sur toute la hauteur) et les 2
   videos empilees a droite ; en mobile, pas de placement explicite donc
   l'ordre du DOM s'applique tel quel (video 1, bandcamp, video 2). */
.music-row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(2, auto);
  gap: 1.5rem 2rem;
  align-items: center;
  margin: 1.5rem 0;
}
.music-row .bandcamp-tall { grid-column: 1; grid-row: 1 / 3; }
.music-row figure { margin: 0; }
.music-row figure:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.music-row figure:nth-of-type(2) { grid-column: 2; grid-row: 2; }
.music-row figure iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
@media (max-width: 700px) {
  .music-row { grid-template-columns: 1fr; grid-template-rows: auto; }
  .music-row .bandcamp-tall,
  .music-row figure:nth-of-type(1),
  .music-row figure:nth-of-type(2) {
    grid-column: 1;
    grid-row: auto;
  }
}
.video-grid-centered {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
}

.members-section {
  margin: 3rem -1.5rem 0;
  padding: 2.5rem 1.5rem 3rem;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 3rem;
  margin: 0 auto;
  max-width: 1300px;
}
@media (max-width: 760px) {
  .members-grid { grid-template-columns: 1fr; }
  .members-grid article { flex-direction: column; }
  .members-grid .member-gallery { flex: 0 0 auto; width: 100%; }
}

.members-grid article {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.members-grid .member-gallery { flex: 0 0 260px; }
.member-gallery .photo-gallery img {
  height: 340px;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center 20%;
  scroll-snap-align: start;
}
.member-gallery .gallery-arrow { width: 34px; height: 34px; font-size: 1.1rem; }
.member-text { flex: 1 1 auto; min-width: 0; }
.member-text h3 { margin: 0; text-transform: none; letter-spacing: 0; }

/* Page 4tet : galeries des musiciens un peu plus grandes, avec plus de largeur pour le texte a cote */
.page-4tet .members-grid { max-width: 1360px; gap: 2rem 2.25rem; }
.page-4tet .members-grid .member-gallery { flex: 0 0 var(--gallery-width, 300px); }
.page-4tet .member-gallery .photo-gallery img { height: var(--gallery-height, 400px); }
.members-section .resources { max-width: 1300px; margin: 2rem auto 0; }

.album-cover {
  width: 220px;
  border: 1px solid var(--border);
  margin: 0 0 1.5rem;
  display: block;
}
.page-4tet .album-cover { width: var(--album-cover-width, 220px); }

.page-epk .gallery-h495 img { height: var(--hero-gallery-height, 495px); }
.page-epk .hero-banner-section .split-photos { margin-top: calc(-1 * var(--hero-pullup, 40px)); }
.page-epk .hero-banner-section .split-text { margin-top: calc(-1 * var(--hero-pullup, 40px)); }
@media (max-width: 700px) {
  /* Le "pullup" negatif est regle en previsualisant en largeur desktop : la
     galerie remonte alors jusque sous le H1. Sur mobile, la mise en page
     empilee fait remonter la galerie bien plus haut avec le meme decalage,
     jusqu'a deborder sur le bandeau du haut. On l'annule sous 700px. */
  .page-epk .hero-banner-section .split-photos,
  .page-epk .hero-banner-section .split-text { margin-top: 0; }
}
.page-epk h1 { font-size: 3rem; }
@media (max-width: 700px) {
  /* "Leo Geller 4tet" et "Open Jazz Chaloupé" tiennent chacun sur 1 ligne
     en reduisant la taille (la regle desktop ci-dessus, plus specifique,
     ecrasait sinon la reduction mobile generique du h1). */
  .page-epk h1 { font-size: 1.85rem; }
  .page-epk .tagline.tagline-white { font-size: 1.3rem; }
}
.page-epk .hero-banner-section,
.page-epk .bio-banner-section {
  background-image: linear-gradient(rgba(13, 13, 13, var(--banner-overlay-opacity, 0.35)), rgba(13, 13, 13, var(--banner-overlay-opacity, 0.35))), url('/assets/images/bg-4tet-banner.jpg');
}
@media (max-width: 700px) {
  .page-epk .hero-banner-section,
  .page-epk .bio-banner-section { background-image: none; }
}
/* Page EPK : logos partenaires (label, tremplin, agence de presse) incrustes
   dans la bande de fond restee libre en bas du bandeau (sous la photo/le
   texte, au-dessus des videos) -- position absolute sur .hero-banner-section
   (deja position:relative via .banner-bg-section) : ne fait bouger ni la
   photo, ni le texte, ni rien d'autre. Masque sous 700px avec le fond
   (voir regle juste au-dessus, meme raison). */
.epk-partner-badges {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.epk-partner-badges .badge-round-sm { width: 46px; height: 46px; }
.epk-partner-badges .badge-wide-sm { width: 42px; height: auto; }
@media (max-width: 700px) {
  /* Sous 700px le fond peint disparait (regle juste au-dessus) donc le
     placement "incruste dans le fond" n'a plus de sens : les logos
     repassent dans le flux normal, juste apres le texte et avant les
     videos (retour Leo le 27/09/2026, ils etaient invisibles avant --
     un display:none ici ecrasait silencieusement le bouton "cache sur
     mobile" du panneau de reglages, qui ne touche pas a `display` quand
     il est decoche). Le zoom/deplacement mobile du panneau continue de
     s'appliquer par-dessus (transform additionnel, translate(0,0) par
     defaut). */
  .epk-partner-badges {
    position: static;
    transform: none;
    justify-content: center;
    margin: 0.75rem 0 1.25rem;
  }
}
.epk-big-gallery { max-width: 950px; margin: 2rem auto; }
.epk-big-photo { border: 1px solid var(--border); }
.resources-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 1.5rem 0 2.5rem;
}
@media (max-width: 700px) {
  /* Sur mobile, "leogeller4tet" renvoie directement vers cette page EPK
     (voir mobileRedirectTo) : le bouton "+ Info" qui pointe vers cette
     meme page 4tet n'a plus de sens ici, on le masque. */
  .page-epk .resources-buttons a:first-child { display: none; }
}

/* ---------- Agenda ---------- */

.agenda-entry {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.6fr);
  gap: 0 1.5rem;
  padding: 0.15rem 0;
}
.agenda-date {
  font-family: var(--font-heading);
  font-weight: 700;
  white-space: nowrap;
}
.agenda-venue, .agenda-city { color: var(--muted); }
.agenda-entry-featured .agenda-project,
.agenda-entry-featured .agenda-venue,
.agenda-entry-featured .agenda-city { font-weight: 700; color: var(--fg); }
.agenda-project a { color: inherit; text-decoration: none; }
.agenda-venue a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.agenda-project a:hover,
.agenda-venue a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.agenda-past-section { margin-top: 1rem; font-size: 0.82rem; font-style: italic; color: var(--muted); }
.agenda-past-section h2 { font-size: 1.15rem; margin: 3rem 0 1rem; }
.agenda-past-section h3 { font-size: 0.85rem; margin: 1.5rem 0 0.5rem; text-align: center; }
.agenda-past-section .agenda-entry-featured .agenda-project,
.agenda-past-section .agenda-entry-featured .agenda-venue,
.agenda-past-section .agenda-entry-featured .agenda-city { color: var(--muted); font-weight: 400; }

@media (max-width: 640px) {
  .agenda-entry { display: block; font-size: 0.72rem; line-height: 1.35; padding: 0.1rem 0; }
  .agenda-date, .agenda-project, .agenda-venue, .agenda-city { display: inline; }
  .agenda-project:not(:empty)::before,
  .agenda-venue:not(:empty)::before,
  .agenda-city:not(:empty)::before { content: " | "; color: var(--muted); }
  .archive-link { display: none; }
  .agenda-past-section { display: none; }
}

/* ---------- Resources / lists ---------- */

.resources { padding-left: 0; list-style: none; }
.resources li { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */

footer {
  margin-top: 4rem;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
footer .brand-name,
footer .footer-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 0.12em;
  margin: 0;
}
@media (max-width: 600px) {
  footer .brand-name,
  footer .footer-name { font-size: 2rem; }
}

/* Meme format que le menu du bandeau du haut : boutons carres, cote a
   cote (mobile comme desktop). */
.footer-buttons { display: flex; flex-direction: row; gap: 1.1rem; }
.footer-buttons .btn-pill { width: auto; border-radius: 0; text-align: center; }
@media (min-width: 701px) {
  /* Cale sur la meme ligne que "Guitariste & Compositeur", en bas a
     droite du site. */
  .footer-buttons { align-self: flex-start; margin-top: 79px; }
}
@media (max-width: 700px) {
  /* Chacun cale dans un coin sous les icones. */
  .footer-buttons { justify-content: space-between; width: 100%; }
}
.btn-pill {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bg);
  background: var(--fg);
  border-radius: 999px;
  padding: 0.7rem 1.4rem;
  white-space: nowrap;
}
.btn-pill:hover { background: var(--accent); }

.jamalio-hero {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.jamalio-hero p { max-width: none; }
.jamalio-hero address { font-style: normal; }
.jamalio-hero address p { max-width: none; margin: 0.8rem 0; line-height: 1.5; }

.jamalio-logo-title {
  height: 2.1em;
  width: auto;
  vertical-align: middle;
  margin-left: 0.25em;
  position: relative;
  top: -0.55em;
  transform: rotate(-8deg);
}

.venue-badges {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
}
.venue-badges img { height: 110px; width: auto; }

.openers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
  margin: 1.5rem 0;
}
@media (max-width: 760px) {
  .openers-grid { grid-template-columns: 1fr; }
}
.opener { margin: 0; }
.opener-number { color: var(--accent); font-family: var(--font-heading); font-weight: 700; }

/* ---------- Forms ---------- */

form label {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
form input, form textarea {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.35rem;
  background: #1a1a1a;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-body);
}
form button {
  margin-top: 1.5rem;
  padding: 0.8rem 2.2rem;
  background: var(--accent);
  color: #1a1a1a;
  border: none;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* ---------- Contact page ---------- */

.contact-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;
}
.contact-icons {
  flex: 1 1 320px;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.contact-icons a { display: block; line-height: 0; }
.contact-icons img {
  width: 76px;
  height: 76px;
  transition: transform 0.2s ease;
}
.contact-icons a:hover img { transform: scale(1.08); }

.contact-card {
  flex: 1 1 420px;
  background: rgba(13, 13, 13, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--fg);
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-card h1 { color: var(--fg); margin-bottom: 1.5rem; }
.contact-card .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.contact-card .form-field { flex: 1 1 200px; }
.contact-card form label {
  color: var(--fg);
  margin-top: 1.1rem;
  font-size: 0.8rem;
}
.contact-card form input,
.contact-card form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(245, 243, 239, 0.5);
  border-radius: 0;
  color: var(--fg);
  padding: 0.4rem 0.1rem;
}
.contact-card form input:focus,
.contact-card form textarea:focus {
  outline: none;
  border-bottom-color: var(--accent);
}
.btn-pill-dark {
  background: var(--fg);
  color: #14120f;
}
.btn-pill-dark:hover { background: var(--accent); color: #14120f; }

@media (max-width: 760px) {
  .contact-split { margin: 0 -1.5rem; }
  .contact-photo { min-height: 320px; align-items: flex-end; }
}

@media (max-width: 700px) {
  /* Tel/mail passent sous le formulaire sur mobile, en plus petit. */
  .contact-card { order: 1; }
  .contact-icons { order: 2; gap: 1rem; }
  .contact-icons img { width: 40px; height: 40px; }
}