/* ==============================
   Olivier Olier — Style principal
   ============================== */

:root {
  --gold: #d4af37;
  --bg: #000;
  --text: #fff;
  --muted: #bbb;
  --card: #171717;
  --card2: #202020;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Cinzel', serif;
  scroll-behavior: smooth;
}

a {
  color: var(--gold);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}
#loader .spinner {
  border: 4px solid var(--muted);
  border-top: 4px solid var(--gold);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
#loader .loadtext {
  margin-top: 10px;
  font-size: 1.2rem;
  color: var(--gold);
}
#loader.fade {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Topbar */
.topbar {
  background: var(--card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.topbar .brand {
  font-size: 1.5rem;
  color: var(--gold);
}
.topbar nav a {
  margin: 0 0.5rem;
  font-size: 0.9rem;
}

/* Hero */
.hero {
  background: url('../img/tuxedo.jpeg') center/cover no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text);
  position: relative;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.hero-inner {
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-size: 3rem;
  margin: 0;
}
.hero p {
  margin: 0.5rem 0 1rem;
}
.cta-btn {
  background: var(--gold);
  color: #000;
  padding: 0.7rem 1.2rem;
  border-radius: 5px;
}

/* Sections */
section {
  padding: 3rem 1rem;
}
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--gold);
}

/* Albums */
.albums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.album {
  background: var(--card2);
  padding: 1rem;
  border-radius: 10px;
  text-align: center;
}
.album img.cover {
  max-width: 100%;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.album h3 {
  margin: 0.5rem 0;
}
.album p {
  font-size: 0.9rem;
  color: var(--muted);
}
.album .btn {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  background: var(--gold);
  color: #000;
  border-radius: 5px;
}
.album audio {
  margin-top: 0.5rem;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  display: none;
  justify-content: center;
  align-items: center;
}
.lightbox.show {
  display: flex;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
}

/* === BIO : portrait + texte côte à côte === */
.about-flex{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:24px;
  align-items:center;
}
@media (max-width: 720px){
  .about-flex{ grid-template-columns:1fr; }
}
.portrait{
  width:160px; height:160px; border-radius:50%;
  object-fit:cover;
  box-shadow:0 0 0 2px rgba(212,175,55,.45), 0 8px 24px rgba(0,0,0,.45);
}


/* Footer */
footer {
  background: var(--card);
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: var(--muted);
}
/* Vidéos en grille responsive */
.video-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.video-card{
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .3s ease, box-shadow .3s ease;
}
.video-card:hover{ transform:scale(1.02); box-shadow:0 0 20px rgba(212,175,55,.35); }
.video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}
/* Conteneur global (centrage et largeur) */
.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* Vidéos en grille responsive */
.video-grid{
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-items:start;
}
.video-card{
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.45);
  transition:transform .3s ease, box-shadow .3s ease;
}
.video-card:hover{ transform:scale(1.02); box-shadow:0 0 20px rgba(212,175,55,.35); }
.video-card iframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  display:block;
}

/* Galerie : vignettes plus grandes */
#gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); /* <- plus grand qu'avant */
  gap:16px;
}
#gallery-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
}
/* Centrer les liens Contact et Boutique */
#contact .links, 
#shop .links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: center;
}

#contact .links a, 
#shop .links a {
  background: var(--card2);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  transition: background 0.3s ease;
}

#contact .links a:hover, 
#shop .links a:hover {
  background: var(--gold);
  color: #000;
}
.album img.cover {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.album img.cover:hover {
  transform: scale(1.05);
  box-shadow: 0 0 18px rgba(212,175,55,0.45);
}

.btn, .cta-btn {
  transition: all 0.4s ease;
}
.btn:hover, .cta-btn:hover {
  background: var(--gold);
  color: #000;
}

/* Pulsing du CTA */
.cta-btn {
  animation: pulse 3s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55, 0.7); }
  70%  { box-shadow: 0 0 0 15px rgba(212,175,55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55, 0); }
}
/* === Effets hover pour les albums === */

/* 2025 — style néon violet */
.album-2025 {
  border: 2px solid transparent;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.album-2025:hover {
  transform: translateY(-6px);
  border-color: #8a2be2; /* violet néon */
  box-shadow: 0 0 18px rgba(138,43,226,0.7), 0 0 40px rgba(138,43,226,0.4);
}

/* Autres albums — style doré */
.album {
  border: 2px solid transparent;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.album:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212,175,55,0.6), 0 0 40px rgba(212,175,55,0.3);
}

/* On évite le conflit : album-2025 garde son style violet */
.album-2025:hover {
  border-color: #8a2be2;
  box-shadow: 0 0 18px rgba(138,43,226,0.7), 0 0 40px rgba(138,43,226,0.4);
}
/* === Boutons synchronisés avec les albums === */

/* Style commun */
.album .btn {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.35s ease;
  background: var(--card);
  color: var(--gold);
  border: 2px solid var(--gold);
}

/* Hover général doré */
.album .btn:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 12px rgba(212,175,55,0.7), 0 0 24px rgba(212,175,55,0.5);
}

/* === 2025 : violet néon === */
.album-2025 .btn {
  color: #bb86fc;
  border-color: #bb86fc;
}
.album-2025 .btn:hover {
  background: #bb86fc;
  color: #000;
  box-shadow: 0 0 14px rgba(187,134,252,0.8), 0 0 28px rgba(187,134,252,0.5);
}
/* === CTA du Hero === */
.cta-btn {
  border: 2px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
  animation: pulseGold 3s infinite;
}

.cta-btn:hover {
  background: var(--gold);
  color: #000;
  box-shadow: 0 0 14px rgba(212,175,55,0.8), 0 0 28px rgba(212,175,55,0.5);
}

/* Animation pulsante */
@keyframes pulseGold {
  0%   { box-shadow: 0 0 0 0 rgba(212,175,55, 0.7); }
  70%  { box-shadow: 0 0 0 18px rgba(212,175,55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212,175,55, 0); }
}
/* === Presse === */
.press-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.press-list article {
  background: var(--card2);
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  text-align: center;
}

.press-list h3 {
  margin: 0 0 0.5rem;
  color: var(--gold);
  font-size: 1.1rem;
}

.press-list p {
  margin: 0 0 0.8rem;
  color: var(--muted);
}

.press-list img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}
.press-list img:hover {
  transform: scale(1.05);
}

/* Cartes de la section Galerie (jaquettes) : s'assurer que le clic passe bien */
.hub-card{ display:block; position:relative; }
.hub-card .hub-cover{ pointer-events:none; } /* l'overlay ne capte plus les clics */
.hub-card .hub-meta{ position:relative; z-index:2; }

/* Hub des sous-galeries (jaquettes) */
.gallery-hub{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.2rem;
}
.hub-card{
  display:block;
  position:relative;
  overflow:hidden;
  padding:0;
  border-radius:12px;
  border:2px solid transparent;
  text-align:left;
  min-height:220px; /* assure une hauteur même si l'image tarde */
  background:#111; /* fond de secours */
}
.hub-card .hub-cover{
  position:absolute; inset:0;
  background-image: var(--cover);
  background-size:cover; background-position:center;
  filter:brightness(.78);
  transition:transform .4s ease, filter .4s ease;
  pointer-events:none; /* laisse passer le clic au <a> */
}
.hub-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
}
.hub-card .hub-meta{
  position:relative;
  padding:1rem;
  z-index:1;
}
.hub-card h3{ margin:.25rem 0 .25rem; color:var(--gold); }
.hub-card p{ margin:0 0 .6rem; color:var(--muted); }
.hub-card .btn{
  display:inline-block; padding:.45rem .9rem; border-radius:8px;
  border:1px solid var(--gold); color:var(--gold); background:rgba(0,0,0,.35);
  transition:all .3s ease;
}

/* Hover */
.hub-card:hover .hub-cover{ transform:scale(1.05); filter:brightness(.9); }
.hub-card:hover{ border-color:var(--gold); box-shadow:0 0 18px rgba(212,175,55,.25); }
.hub-card:hover .btn{ background:var(--gold); color:#000; }

/* Jaquettes de la Galerie — format panoramique */
.hub-card {
  aspect-ratio: 16/9;     /* toutes les cartes gardent la même proportion */
  min-height: auto;       /* inutile si aspect-ratio défini */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.hub-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Jaquettes de la Galerie — format panoramique */
.hub-card {
  aspect-ratio: 16/9;     /* toutes les cartes gardent la même proportion */
  min-height: auto;       /* inutile si aspect-ratio défini */
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.hub-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Cartes Galerie : panoramiques + titres visibles + hover --- */
.gallery-hub{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.2rem;
}

.hub-card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:16/9; border-radius:12px; border:2px solid transparent;
  background:#111; text-align:left; transition:box-shadow .3s ease, border-color .3s ease;
}

.hub-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:brightness(.78);
  transition:transform .4s ease, filter .4s ease;
  display:block;
}

.hub-overlay{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
  pointer-events:none;
  z-index:1;
}

.hub-meta{
  position:relative; z-index:2; padding:1rem;
  display:flex; flex-direction:column; gap:.35rem;
}
.hub-card h3{
  margin:.1rem 0; color:var(--gold); font-size:1.15rem;
  text-shadow:0 1px 8px rgba(0,0,0,.65);
}
.hub-card p{
  margin:0; color:var(--muted); font-size:.95rem;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.hub-card .btn{
  margin-top:.4rem;
  display:inline-block; padding:.45rem .9rem; border-radius:8px;
  border:1px solid var(--gold); color:var(--gold); background:rgba(0,0,0,.35);
  transition:all .3s ease;
}

/* Hover: zoom + halo doré */
.hub-card:hover .hub-img{
  transform:scale(1.05); filter:brightness(.9);
}
.hub-card:hover{
  border-color:var(--gold);
  box-shadow:0 0 18px rgba(212,175,55,.25);
}
.hub-card:hover .btn{
  background:var(--gold); color:#000;
}

/* Assurer le clic sur toute la carte */
.hub-card, .hub-meta { cursor:pointer; }

/* === AGENDA === */
.agenda-list {
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:1rem;
}
.agenda-list li {
  display:flex;
  align-items:center;
  background:var(--card2);
  border-radius:10px;
  padding:1rem;
  transition:transform .3s ease, box-shadow .3s ease;
}
.agenda-list li:hover {
  transform:translateY(-3px);
  box-shadow:0 0 15px rgba(212,175,55,.25);
}
.agenda-list .date {
  background:var(--gold);
  color:#000;
  border-radius:8px;
  padding:.5rem .7rem;
  text-align:center;
  margin-right:1rem;
  flex-shrink:0;
}
.agenda-list .day {
  font-size:1.4rem; font-weight:bold; display:block;
}
.agenda-list .month {
  font-size:.85rem; letter-spacing:1px; text-transform:uppercase;
}
.agenda-list .info h3 {
  margin:.2rem 0; color:var(--gold);
  font-size:1.1rem;
}
.agenda-list .info p {
  margin:.2rem 0; color:var(--muted);
}
.agenda-list .btn {
  display:inline-block;
  margin-top:.3rem;
  padding:.35rem .7rem;
  border-radius:6px;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:.9rem;
  transition:all .3s ease;
}
.agenda-list .btn:hover {
  background:var(--gold); color:#000;
}

/* === NEWSLETTER (Substack) === */
#newsletter .btn {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(0,0,0,.35);
  transition: all .3s ease;
  text-decoration: none;
}
#newsletter .btn:hover {
  background: var(--gold);
  color: #000;
}
.substack-embed {
  max-width: 680px;
  margin: 0 auto 1rem;
}
.substack-cta {
  text-align: center;
}