/* ================= VARIABLES ================= */
:root{
  --b1:#1e3a8a;--b2:#2563eb;--b3:#0f172a;
  --g:#f9fafb;--t1:#f8fafc;--t2:#1e293b;
  --tf:.2s ease;--tm:.3s ease;
  --r:.75rem;
  --s1:0 3px 8px rgba(30,58,138,.06);
  --s2:0 6px 14px rgba(30,58,138,.12);
}

/* ================= GLOBAL ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--g);color:var(--t2);
  font:clamp(.9rem,1vw + .7rem,.95rem)/1.55 'Inter',sans-serif
}
.no-scroll{overflow:hidden}
[x-cloak]{display:none!important}

/* ================= HEADER ================= */
header{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  background:#fff;color:var(--b1);
  backdrop-filter:blur(6px)
}
header a{color:inherit;transition:color var(--tm)}
header a:hover{color:var(--b2)}

/* ================= HERO (PLUS PETIT) ================= */
.hero{
  position:relative;
  min-height:65vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--t1);
  overflow:hidden;border-radius:var(--r)
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--b3),rgba(15,23,42,.45))
}
.hero-content{position:relative;z-index:1;max-width:680px;padding:1.5rem}
.hero h1{font-size:clamp(2rem,4vw,3rem)}
.hero-actions{margin-top:1.5rem;display:flex;gap:.8rem;justify-content:center}

/* ================= SECTIONS (COMPACT) ================= */
section{
  background:#fff;
  max-width:1100px;
  margin:2rem auto;
  padding:2rem 1.5rem;
  border-radius:var(--r);
  box-shadow:var(--s1)
}

/* ================= EXPLORER ================= */
.grid-explorer{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:1rem
}
.card{
  background:#fff;
  padding:1.4rem .8rem;
  text-align:center;
  border-radius:var(--r);
  box-shadow:var(--s1);
  transition:transform var(--tm),box-shadow var(--tm)
}
.card:hover{transform:translateY(-4px);box-shadow:var(--s2)}
.icon{font-size:2rem;margin-bottom:.4rem}

/* ================= TITRES ================= */
.section-title{
  text-align:center;
  font-size:1.6rem;
  margin-bottom:1.5rem;
  color:var(--b1)
}

/* ================= GALERIE (PLUS PETITE) ================= */
.grid-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem
}
.gallery-item{
  border:none;background:none;cursor:pointer;
  position:relative;overflow:hidden;border-radius:var(--r)
}
.gallery-item img{
  width:100%;height:180px;
  object-fit:cover;display:block
}
.gallery-item span{
  position:absolute;inset:auto 0 0 0;
  padding:.5rem;
  font-size:.8rem;
  background:rgba(15,23,42,.65);
  color:var(--t1)
}

/* ================= LIGHTBOX ================= */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,23,42,.92);
  display:flex;align-items:center;justify-content:center
}
.lightbox-content{text-align:center;max-width:88vw}
.lightbox-content img{
  max-width:100%;max-height:75vh;
  border-radius:var(--r)
}
.lightbox-content p{margin-top:.8rem;color:var(--t1)}
.lightbox button{
  background:none;border:none;color:var(--t1);cursor:pointer
}
.lightbox .nav{
  position:absolute;top:50%;
  transform:translateY(-50%);
  font-size:3rem;padding:.6rem
}
.lightbox .left{left:.8rem}
.lightbox .right{right:.8rem}
.lightbox .close{
  position:absolute;top:1rem;right:1.2rem;
  font-size:1.8rem
}

/* ================= CONTACT (COMPACT) ================= */
.contact{
  background:linear-gradient(to right,var(--b1),var(--b3));
  color:var(--t1);
  text-align:center;
  padding:3rem 1.5rem;
  border-radius:var(--r)
}
.contact-inner{max-width:600px;margin:auto}
.contact h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.contact-text{font-size:.95rem;color:#e5e7eb;margin:1.2rem 0 2rem}

/* ================= BOUTON ================= */
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.75rem 2rem;
  border-radius:var(--r);
  border:2px solid #fff;
  color:#fff;text-decoration:none;font-weight:600;
  transition:all var(--tm)
}
.btn-outline:hover{
  background:#fff;color:var(--b1);
  transform:translateY(-2px)
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
  .hero{min-height:55vh}
  section{padding:1.6rem 1.2rem}
}
.page-header{
  max-width:900px;
  margin:4rem auto 2rem;
  text-align:center
}
.page-header h1{
  font-size:2.2rem;
  color:var(--bleu-fonce)
}
.page-header p{
  color:#64748b;
  margin-top:.5rem
}

.conventions{
  max-width:1100px;
  margin:auto;
  padding:2rem
}

.conventions-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.2rem
}

.convention-card{
  background:#fff;
  padding:1.2rem 1rem;
  border-radius:var(--border-radius);
  box-shadow:var(--box-shadow-light);
  text-align:center
}

.convention-card .icon{
  font-size:1.8rem;
  margin-bottom:.4rem
}

.convention-card h3{
  font-size:1rem;
  margin-bottom:.3rem
}

.convention-card p{
  font-size:.85rem;
  color:#64748b
}