/* ============================================================
   TIMELINE IMMERSIF — FEUILLE DE STYLE COMMUNE
   Ce fichier est partagé par toutes les pages HTML du site.
   
   COMMENT MODIFIER :
   - Couleurs globales → section :root {} ci-dessous
   - Police des titres → var(--ft) = Cinzel
   - Police du texte  → var(--fb) = Crimson Pro
   - Backgrounds → cherchez bg_hero.jpg et bg_dark.jpg
============================================================ */

/* Import des polices Google */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap');

/* ============================================================
   VARIABLES — Modifiez ici pour changer tout le site d'un coup
============================================================ */
:root {
  --gold:        #C9A84C;   /* Or principal */
  --gold-light:  #E8C97A;   /* Or clair (highlights) */
  --gold-dark:   #7A6220;   /* Or foncé (bordures) */
  --dark:        #0D0906;   /* Fond très sombre */
  --cream:       #F0E6CC;   /* Texte clair principal */
  --cream-muted: #B8A882;   /* Texte secondaire atténué */
  --red:         #7A1A1A;   /* Couleur bouton CTA */
  --red-h:       #9A2020;   /* Couleur bouton CTA au survol */
  --ft: 'Cinzel', serif;    /* Police des titres */
  --fb: 'Crimson Pro', serif; /* Police du corps de texte */
}

/* Reset de base */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--dark);
  color: var(--cream);
  font-family: var(--fb);
  font-size: 18px;
  line-height: 1.75;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
a   { color:inherit; text-decoration:none; }

/* ============================================================
   NAVIGATION FIXE
   Modifiez les liens href="..." dans chaque fichier HTML
   Le lien de la page actuelle doit avoir class="active"
============================================================ */
nav {
  position: fixed; top:0; left:0; right:0; z-index:200;
  display: flex; align-items:center; justify-content:space-between;
  padding: .8rem 2.5rem;
  background: rgba(10,6,2,0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

/* Liste des liens de navigation */
.nav-links { display:flex; gap:1.8rem; list-style:none; }
.nav-links a {
  font-family: var(--ft);
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream-muted);
  transition: color .3s;
}
/* Lien actif (page en cours) et hover */
.nav-links a:hover,
.nav-links a.active { color: var(--gold); }

/* Logo dans la navigation */
/* Pour changer la taille : modifiez height */
.nav-logo { height:46px; width:auto; object-fit:contain; }

/* Bouton "Demander une proposition" */
.btn-nav {
  font-family: var(--ft);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dark);
  padding: .5rem 1.2rem;
  background: rgba(201,168,76,0.06);
  transition: all .3s;
  white-space: nowrap;
}
.btn-nav:hover { background:rgba(201,168,76,0.15); border-color:var(--gold); }

/* ============================================================
   BOUTONS PRINCIPAUX
   .btn-p  → rouge foncé (action principale)
   .btn-s  → transparent doré (action secondaire)
============================================================ */
.btn-p {
  display: inline-block;
  font-family: var(--ft);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  border: 1px solid rgba(201,168,76,.4);
  padding: .95rem 3rem;
  transition: all .3s;
  position: relative;
  cursor: pointer;
}
/* Traits décoratifs sur les côtés du bouton */
.btn-p::before, .btn-p::after {
  content:''; position:absolute;
  top:4px; bottom:4px; width:1px;
  background:var(--gold-dark); opacity:.5;
}
.btn-p::before { left:7px; }
.btn-p::after  { right:7px; }
.btn-p:hover {
  background: var(--red-h);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
}

/* Bouton secondaire (transparent) */
.btn-s {
  display: inline-block;
  font-family: var(--ft);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-dark);
  padding: .85rem 2.5rem;
  background: transparent;
  transition: all .3s;
  cursor: pointer;
}
.btn-s:hover { background:rgba(201,168,76,0.12); border-color:var(--gold); }

/* ============================================================
   SECTIONS — Structure commune
   Toutes les sections du site (hors héro) utilisent bg_dark.jpg
============================================================ */
.sec {
  padding: 5rem 3rem;
  position: relative;
  z-index: 1;
  /* Background texturé pierre sombre cuivrée */
  background-image: url('images/bg_dark.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Effet parallaxe — supprimez si lent sur mobile */
}

/* Overlay sombre pour lisibilité du texte */
.sec::before {
  content:''; position:absolute; inset:0;
  background: rgba(8,4,2,0.74);
  z-index:0; pointer-events:none;
}
/* Tout le contenu de section au-dessus de l'overlay */
.sec > * { position:relative; z-index:1; }

/* ============================================================
   TYPOGRAPHIE COMMUNE
============================================================ */

/* Petit texte doré au-dessus des titres */
.eyebrow {
  font-family: var(--ft);
  font-size: .56rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: .7rem;
}

/* Titre principal de section */
.sec-title {
  font-family: var(--ft);
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  color: var(--cream);
  text-align: center;
  letter-spacing: .07em;
  margin-bottom: 3.5rem;
  line-height: 1.2;
}
.sec-title.left { text-align:left; }

/* Séparateur ornement doré */
.divider {
  display:flex; align-items:center; gap:1rem;
  margin: 0 auto 2.5rem; max-width:380px;
}
.div-line { flex:1; height:1px; background:linear-gradient(to right,transparent,var(--gold-dark)); }
.div-line.r { background:linear-gradient(to left,transparent,var(--gold-dark)); }
.div-gem { color:var(--gold); font-size:.55rem; letter-spacing:.3em; }

/* ============================================================
   CARTES SPECTACLES
============================================================ */
.shows-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr); /* 3 colonnes — changez pour 2 ou 4 */
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.card {
  position: relative;
  border: 1px solid var(--gold-dark);
  overflow: hidden;
  background: rgba(8,4,2,0.6);
  transition: transform .35s, border-color .35s, box-shadow .35s;
  cursor: pointer;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 50px rgba(0,0,0,.6);
}
/* Image de carte */
.card img { width:100%; aspect-ratio:3/4; object-fit:cover; display:block; transition:transform .5s; }
.card:hover img { transform:scale(1.05); }
/* Dégradé overlay bas */
.card-ov { position:absolute; inset:0; background:linear-gradient(to top,rgba(8,4,2,.97) 0%,rgba(8,4,2,.15) 55%,transparent 100%); }
/* Contenu bas de carte */
.card-body { position:absolute; bottom:0; left:0; right:0; padding:1.5rem; }
.card-tag { font-family:var(--ft); font-size:.5rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; display:block; }
.card-name { font-family:var(--ft); font-size:1rem; color:var(--cream); letter-spacing:.05em; margin-bottom:.25rem; line-height:1.2; }
.card-desc { font-size:.85rem; color:var(--cream-muted); font-style:italic; }
/* Trait doré bas au hover */
.card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(to right,transparent,var(--gold),transparent); transform:scaleX(0); transition:transform .4s; }
.card:hover::after { transform:scaleX(1); }

/* ============================================================
   CARTES TEAM BUILDING (3 cartes avec bordures dorées)
============================================================ */
.tb-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; }
/* Wrapper avec gradient doré */
.tb-card { background:linear-gradient(135deg,var(--gold-dark),rgba(201,168,76,.12),var(--gold-dark)); padding:2px; }
/* Intérieur sombre */
.tb-inner { background:rgba(8,4,2,.88); padding:2.5rem 2rem; position:relative; height:100%; outline:1px solid rgba(201,168,76,.1); outline-offset:6px; }
/* Coins dorés décoratifs */
.tb-inner::before, .tb-inner::after { content:''; position:absolute; width:14px; height:14px; border-color:var(--gold-dark); border-style:solid; opacity:.65; }
.tb-inner::before { top:7px; left:7px; border-width:1px 0 0 1px; }
.tb-inner::after  { bottom:7px; right:7px; border-width:0 1px 1px 0; }
.tb-ctitle { font-family:var(--ft); font-size:1.25rem; color:var(--gold); font-weight:700; margin-bottom:1.2rem; }
.tb-ctext { font-size:.9rem; color:var(--cream-muted); line-height:1.85; text-align:justify; }

/* Ornement filigrane */
.tb-orn { display:flex; align-items:center; gap:1rem; max-width:420px; margin:0 auto 2.5rem; }
.tb-line { flex:1; height:1px; background:linear-gradient(to right,transparent,var(--gold-dark)); }
.tb-line.r { background:linear-gradient(to left,transparent,var(--gold-dark)); }
.tb-gem { color:var(--gold); font-size:1.1rem; opacity:.75; }
.tb-title { font-family:var(--ft); font-size:clamp(1.4rem,2.5vw,2rem); color:var(--gold); margin-bottom:1.5rem; letter-spacing:.05em; text-align:center; }
.tb-sub { color:var(--cream-muted); max-width:680px; margin:0 auto 3rem; font-size:1rem; line-height:1.85; text-align:center; }

/* ============================================================
   GALERIE MOSAÏQUE
============================================================ */
.gal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: .5rem;
  max-width: 1100px;
  margin: 0 auto;
}
/* Photos larges (2 colonnes) */
.gal-item:nth-child(1) { grid-column:span 2; }
.gal-item:nth-child(5) { grid-column:span 2; }
.gal-item { overflow:hidden; border:1px solid rgba(201,168,76,.18); }
.gal-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gal-item:hover img { transform:scale(1.07); }

/* ============================================================
   PARTENAIRES
============================================================ */
.part-label { font-family:var(--ft); font-size:.55rem; letter-spacing:.38em; text-transform:uppercase; color:var(--cream-muted); text-align:center; margin-bottom:2.5rem; opacity:.55; }
.part-grid { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2rem 4rem; max-width:900px; margin:0 auto; }
.part-logo { font-family:var(--ft); font-size:.7rem; letter-spacing:.2em; color:var(--cream-muted); opacity:.38; text-transform:uppercase; transition:opacity .3s,color .3s; }
.part-logo:hover { opacity:.85; color:var(--gold); }

/* ============================================================
   FOOTER
============================================================ */
footer {
  padding: 2rem 3rem;
  border-top: 1px solid rgba(201,168,76,.15);
  display: flex; justify-content:space-between; align-items:center;
  flex-wrap: wrap; gap:1rem;
  position: relative;
  background-image: url('images/bg_dark.jpg');
  background-size: cover;
}
footer::before { content:''; position:absolute; inset:0; background:rgba(8,4,2,.9); }
footer > * { position:relative; z-index:1; }
.ft-logo { height:34px; opacity:.65; }
.ft-copy { font-family:var(--ft); font-size:.62rem; color:var(--cream-muted); opacity:.4; letter-spacing:.08em; }
.ft-links { display:flex; gap:2rem; }
.ft-links a { font-family:var(--ft); font-size:.62rem; color:var(--cream-muted); opacity:.4; text-decoration:none; transition:opacity .3s; }
.ft-links a:hover { opacity:.85; }

/* ============================================================
   ANIMATIONS AU SCROLL
   Ajoutez class="reveal" sur n'importe quel élément
   pour qu'il apparaisse en glissant vers le haut
   .d1 .d2 .d3 = délais de 0.1s / 0.2s / 0.3s
============================================================ */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity:1; transform:none; }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }

/* ============================================================
   RESPONSIVE MOBILE
============================================================ */
@media (max-width: 768px) {
  nav { padding:.8rem 1.2rem; }
  .nav-links { display:none; } /* Masqué sur mobile */
  .btn-nav { display:none; }
  .sec { padding:3rem 1.5rem; background-attachment:scroll; }
  .shows-grid { grid-template-columns:1fr; }
  .tb-grid { grid-template-columns:1fr; }
  .gal-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .gal-item:nth-child(1), .gal-item:nth-child(5) { grid-column:span 1; }
  .sec-title { font-size:1.5rem; }
  footer { flex-direction:column; text-align:center; }
}