/* clairac-immersive/assets/css/main.css */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Playfair Display', serif;
  --bg-deep: #0b0d10;
  --text-light: #f2f4f6;
  --accent-water: #38bdf8;
  --accent-earth: #a3e635;
  --transition-smooth: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-light);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; }
h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); letter-spacing: -0.03em; }

/* Hero Immersif */
.hero-immersion {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('../images/hero-lot.webp') center/cover no-repeat;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,16,0.4) 0%, rgba(11,13,16,0.9) 100%);
}
.hero-content { position: relative; z-index: 2; text-align: center; max-width: 80ch; padding: 2rem; }

/* Grille Itinéraires */
.tour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.tour-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2rem;
  border-radius: 12px;
  transition: transform 0.4s var(--transition-smooth), box-shadow 0.4s;
}
.tour-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(56,189,248,0.15); }

/* Boutons */
.btn-primary, .btn-outline {
  display: inline-block; padding: 0.8rem 1.6rem;
  border-radius: 8px; font-weight: 500; text-decoration: none;
  transition: all 0.3s;
}
.btn-primary { background: var(--accent-water); color: #000; }
.btn-outline { border: 1px solid var(--accent-earth); color: var(--accent-earth); }
.btn-primary:hover, .btn-outline:hover { filter: brightness(1.15); }

/* Animations Scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: all 0.7s var(--transition-smooth); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }


/* ============================================= */
/* POI SPECIFIC STYLES: Clairac Immersive (Le WoW) */
/* ============================================= */

.poi-container {
    padding-top: 0; /* Pour que l'image Hero monte à zéro au début de la page */
}

/* --- SECTION HERO / CARTE --- */
.poi-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh; /* Prend beaucoup d'espace pour l'immersion */
    background: url('../images/placeholder-poi.webp') center/cover no-repeat;
}

.overlay-gradient {
    position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11, 13, 16, 0.4) 0%, rgba(11, 13, 16, 0.8) 100%);
}

.poi-info {
    position: relative; z-index: 2; text-align: center; max-width: 90ch; padding: 4rem 2rem;
}

/* Boutons pour le POI */
.large-cta {
    padding: 1rem 3rem; font-size: 1.1rem; letter-spacing: 1px; margin-right: 15px;
}
.btn-primary.large-cta { background: var(--color-accent-water); color: #0b0d10; }

/* --- SECTION CONTENU & MEDIA --- */
.poi-content { padding: 6rem 2rem; max-width: 1400px; margin: auto;}

.main-image-display {
    margin-bottom: 4rem;
}

/* Style pour l'Audio Module (Très important pour l'accessibilité) */
.audio-module {
    background: var(--color-bg-card);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Ajout de profondeur */
}

/* --- Media Queries (Optimisation Mobile) --- */
@media (max-width: 768px) {
    .poi-info { padding: 2rem; text-align: center; }
    .action-bar { display: flex; flex-direction: column; gap: 15px; align-items: center;}
    .btn-primary.large-cta, .btn-secondary { width: 90%; max-width: 300px; margin: 0 auto !important; }
}