@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Open+Sans:ital,wght@0,400;1,400&display=swap');

body{margin:0;font-family:'Open Sans',sans-serif;color:#222;}

.nav{text-align:center;padding:20px 0;}
.nav a{
  color:#222;
  text-decoration:none;
margin:0 20px;font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;}
.nav a.active{color:#d50000;}

/* Restauration style bouton À PROPOS */
.nav a#open-about{
  color:inherit;
  text-decoration:none;
}
.nav a#open-about:hover{
  color:inherit;
  text-decoration:none;
}

.banner{display:block;margin:0 auto;max-width:100%;}

.page{
  width:1100px;
  margin:40px auto;
  display:flex;
  align-items:flex-start;
  gap:60px;
}

.content{width:65%;}

/* --- Catégorie principale --- */
.category{
  font-family:'Montserrat',sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:rgb(105,105,105);
}

.meta{
  font-size:14px;
  color:rgb(105,105,105);
  line-height:28px;
}

.article-title{
  font-size:24px;
  font-style:italic;
  font-weight:400;
  line-height:26.4px;
}

.article-images{
  display:flex;
  gap:20px;
  margin:30px 0;
}

.article-images img{
  width:auto;
  max-width:100%;
  height:auto;
  display:block;
}

.article-text{
  font-size:14px;
  line-height:28px;
  margin-bottom:30px;
}

.category-line{
  display:flex;
  align-items:flex-start;
  gap:1.25em;
}

.category-actions{
  display:flex;
  flex-direction:column;
  gap:0.6em;
}

.category-actions .btn{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:0.85em;
  padding:0.5em 1.1em;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  letter-spacing:0.02em;
}

.category-actions .btn-apple{
  background-color:#e53935;
}
.category-actions .btn-apple:hover{
  background-color:#c62828;
}

.category-actions .btn-support{
  background-color:#2e7d32;
}
.category-actions .btn-support:hover{
  background-color:#1b5e20;
}

/* --- Sidebar --- */
.recent{width:35%;}

/* Harmonisation exacte avec .category */
.recent h2{
  font-family:'Montserrat',sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:rgb(105,105,105);
  font-weight:400;
  position:relative;
  display:inline-block;
  margin-bottom:24px;
}

/* Soulignement discret */
.recent h2::after{
  content:"";
  display:block;
  width:50%;
  height:1px;
  margin-top:1em;
  background-color:rgba(180,40,40,0.6);
}

.recent-item{
  display:flex;
  gap:15px;
  margin:20px 0;
  align-items:center;
}

.recent-item img{
  width:60px;
  height:60px;
  object-fit:cover;
}

.recent-item a{
  font-size:16px;
  font-style:italic;
  color:rgb(57,57,57);
  cursor:pointer;
  display:block;
}

/* --- Modal À propos --- */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  z-index:1000;
}

.modal-content{
  max-width:720px;
  margin:10vh auto;
  padding:32px;
  background:#000;
  color:#fff;
  font-size:14px;
  line-height:1.7;
}

.modal-content h2{
  font-size:20px;
  font-weight:500;
  margin-bottom:24px;
}

.modal-content ul{
  margin:16px 0;
  padding-left:20px;
}

.modal-close{
  position:absolute;
  top:24px;
  right:24px;
  background:none;
  border:none;
  color:#fff;
  font-size:24px;
  cursor:pointer;
}
.category{
  font-family:'Montserrat',sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:rgb(105,105,105);
  position:relative;
  display:inline-block;
}

.category::after{
  content:"";
  display:block;
  width:50%;
  height:1px;
  margin-top:1em;
  background-color:rgba(180,40,40,0.6);
}
/* Restauration police — textes associés aux images (artistes du moment) */
.recent .recent-text,
.recent .recent-text .artist,
.recent .recent-text .album {
  font-family: 'Open Sans', sans-serif;
}
/* --- Bouton Apple : base globale --- */
.btn-apple{
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:0.85em;
  padding:0.5em 1.1em;
  border-radius:999px;
  color:#fff;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
  letter-spacing:0.02em;
  background-color:#e53935;
  display:inline-block;
}

.btn-apple:hover{
  background-color:#c62828;
}

/* --- Variante verte du bouton Apple --- */
.btn-apple.btn-support{
  background-color:#2e7d32;
}

.btn-apple.btn-support:hover{
  background-color:#1b5e20;
}
.archives-years {
  display: flex;
  gap: 1.5rem;
  margin: 2rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9em;
}

.archives-years a {
  text-decoration: none;
  color: #000;
}

.archives-years a.active {
  text-decoration: underline;
}

.archives-years .disabled {
  color: #999;
  cursor: default;
}
.archives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 2rem;
  margin-top: 3rem;
}
.archive-item {
  text-decoration: none;
  color: inherit;
}

.archive-item img {
  width: 100%;
  display: block;
  margin-bottom: 0.75rem;
}

.archive-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.archive-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95em;
}


.nav a:hover{
  color:#222;
  text-decoration:none;
}



/* ===============================
   Archives 2025 layout correction
   =============================== */

/* Two-column list of projects */
.archives-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 3rem;
  margin-top: 3rem;
}

/* Each project: image + text side by side */
.archive-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.2rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

/* Image sizing */
.archive-item img {
  width: 120px;
  height: auto;
  display: block;
}

/* Meta + title */
.archive-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}

.archive-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95em;
  line-height: 1.4;
}



/* ===============================
   Archives years navigation (top)
   =============================== */

.archives-years {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.archives-years span,
.archives-years a {
  color: #222;
}

.archives-years .active {
  color: #d50000;
}

.archives-years .disabled {
  color: #999;
}

/* Separation between years bar and projects list */
.archives-separator {
  border-top: 1px solid #ddd;
  margin: 2.5rem 0;
}



/* ===============================
   Archives years alignment update
   =============================== */

/* Container aligned with banner content */
.archives-years-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

/* Years navigation */
.archives-years {
  justify-content: center;
}

/* Disabled year should use same color as ACCUEIL (neutral nav color) */
.archives-years .disabled {
  color: #222;
}



/* ===============================
   Archives years + grid update
   =============================== */

/* Double font size for years */
.archives-years {
  font-size: 24px;
}

/* More space before projects list (approx. 2 lines) */
.archives-separator {
  margin: 3.5rem 0;
}

/* Three-column projects grid */
.archives-grid {
  grid-template-columns: repeat(3, 1fr);
}



/* ===============================
   FIX: spacing under years buttons
   =============================== */

.archives-years-wrapper {
  margin-bottom: 3rem; /* clear space under years */
}

/* ensure separator also keeps distance */
.archives-separator {
  margin-top: 0;
  margin-bottom: 3.5rem;
}



/* ===============================
   HARD FIX: force vertical spacing
   =============================== */

/* Space directly under the years bar */
.archives-years {
  margin-bottom: 3.5rem;
}

/* Fallback safety: space before projects grid */
.archives-grid {
  padding-top: 2rem;
}



/* ===============================
   FINAL FIX: center years buttons
   =============================== */

/* Center the wrapper relative to page */
.archives-years-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Ensure the years bar itself is centered */
.archives-years {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* ===============================
   ARCHIVES (scopé, propre)
   =============================== */

/* Années sous la bannière */
.page-archives .archives-years {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1.5rem 0 3.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 24px; /* taille doublée */
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Année active */
.page-archives .archives-years .active {
  color: #d50000;
}

/* Année inactive (même couleur que ACCUEIL) */
.page-archives .archives-years .disabled {
  color: #222;
}

/* Séparation nette avec la liste */
.page-archives .archives-separator {
  border-top: 1px solid #ddd;
  margin: 3.5rem 0;
}

/* Grille des projets : 3 colonnes */
.page-archives .archives-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 3rem;
}

/* Carte projet */
.page-archives .archive-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.2rem;
  text-decoration: none;
  color: inherit;
}

/* Images */
.page-archives .archive-item img {
  width: 120px;
  display: block;
}

/* Texte */
.page-archives .archive-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.page-archives .archive-title {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.95em;
  line-height: 1.4;
}
/* ===============================
   PROJETS / ARCHIVES – TABLES
   =============================== */

/* largeur de lecture alignée sur la bannière */
.page-project .content,
.page-archives .content {
  max-width: 1100px;
  margin: 0 auto;
}

/* table playlists */
.page-project table.playlist,
.page-archives table.playlist {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* clé pour colonnes identiques */
  margin: 1.5rem 0 2.5rem;
}

/* largeurs fixes des colonnes */
.page-project table.playlist th:nth-child(1),
.page-project table.playlist td:nth-child(1),
.page-archives table.playlist th:nth-child(1),
.page-archives table.playlist td:nth-child(1) {
  width: 40%;
}

.page-project table.playlist th:nth-child(2),
.page-project table.playlist td:nth-child(2),
.page-archives table.playlist th:nth-child(2),
.page-archives table.playlist td:nth-child(2) {
  width: 30%;
}

.page-project table.playlist th:nth-child(3),
.page-project table.playlist td:nth-child(3),
.page-archives table.playlist th:nth-child(3),
.page-archives table.playlist td:nth-child(3) {
  width: 30%;
}

/* titres de colonnes */
.page-project table.playlist thead th,
.page-archives table.playlist thead th {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid #ddd;
}

/* cellules */
.page-project table.playlist td,
.page-archives table.playlist td {
  padding: 0.6rem 0;
  vertical-align: middle;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
}


/* ===============================
   MODALE À PROPOS — VERSION SAINE
   =============================== */

/* état fermé */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
}

/* état ouvert (piloté par JS inline style.display='block') */
.modal[style*="block"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* contenu */
.modal-content {
  background: #fff;
  color: #000;
  max-width: 720px;
  width: calc(100% - 2rem);
  max-height: 90vh;
  padding: 2rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* sécurité typographique */
.modal-content p,
.modal-content h2,
.modal-content a {
  opacity: 1;
  visibility: visible;
}

/* bouton fermer */
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}
/* =========================================
   MODALE – CORRECTION CONTEXTE PAGE PROJET
   ========================================= */

/* quand la modale est ouverte, on libère le scroll */
.page-project .modal[style*="block"] {
  position: fixed;
  inset: 0;
  overflow-y: auto;
}

/* on neutralise toute contrainte héritée */
.page-project,
.page-project body,
.page-project .page,
.page-project .content {
  max-height: none;
  overflow: visible;
}
/* =========================================
   FIX FINAL MODALE — CONTEXTE PROJET
   ========================================= */

/* quand la modale est ouverte, on libère le viewport */
html:has(.modal[style*="block"]),
body:has(.modal[style*="block"]) {
  overflow: visible !important;
}
/* =========================================
   MODALE À PROPOS — FIX DÉFINITIF
   ========================================= */

/* on libère le document (cause réelle du bug) */
html,
body {
  overflow-y: auto !important;
}

/* modale */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
}

/* affichage via JS */
.modal[style*="block"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* contenu */
.modal-content {
  background: #fff;
  color: #000;
  width: min(720px, 90vw);
  max-height: 90vh;
  padding: 2rem;
  overflow-y: auto;
  box-sizing: border-box;
}

/* sécurité : rien ne coupe le texte */
.modal-content * {
  overflow: visible !important;
}


/* ===============================
   MODALE À PROPOS — VERSION SAINE
   =============================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.6);
}

.modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  width: min(720px, 90vw);
  max-height: 90vh;
  padding: 2rem;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}/* LIBÉRER LE VIEWPORT QUAND LA MODALE EST OUVERTE */
.modal.is-open ~ * {
  overflow: visible;
}

html,
body {
  overflow-y: auto !important;
}



/* ===============================
   ACCUEIL — FENÊTRE DISQUES
   =============================== */

/* fenêtre sous le titre "Les disques" */
.disques-frame {
  margin-top: 0; /* espace supprimé, hauteur inchangée */
  height: 450px; /* ~4 albums visibles +25% */
  overflow: hidden;
}

/* iframe transparente */
.disques-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* page disques autonome */
.disques-page {
  margin: 0;
}

.disques-page .recent {
  width: 100%;
}

.disques-page .recent-item img {
  width: 42px;
  height: 42px;
}

/* --- Lien discret : soutenir le projet (apparence texte simple) --- */
.support-note a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.support-note a:hover {
  text-decoration: none;
}


/* =========================================
   SOUTIEN — ALIGNEMENT TYPOGRAPHIQUE GLOBAL
   (même police que le texte du popup)
   ========================================= */
.btn-apple.btn-support {
  background: none;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.btn-apple.btn-support:hover {
  background: none;
  color: inherit;
}