/* ═══════════════════════════════════════════════════════════════
   BASE.CSS - Variables globales, reset, typographie, sections
   Modifier les couleurs et polices ici si besoin
═══════════════════════════════════════════════════════════════ */

/* ── Variables de design ────────────────────────────────────── */
:root {
  /* Couleurs */
  --noir:        #000000;
  --noir-doux:   #242426;
  --gris-fonce:  #2a2a2c;
  --gris-moyen:  #a0a0a8;
  --gris-clair:  #6e6e76;
  --blanc:       #e8e6e1;
  --blanc-pur:   #f5f3ef;
  --or:          #b8962e;
  --or-clair:    #d4b060;

  /* Typographie */
  --font-titre:  'Cormorant Garamond', Georgia, serif;
  --font-corps:  'Jost', sans-serif;

  /* Espacements */
  --padding-section: 5rem 2rem;
  --max-width:       1200px;

  /* Header */
  --header-height: 72px;
}

/* ── Reset minimal ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Suppression du highlight tactile mobile ─────────────────── */
/*
  Retire la sélection bleue/grise qui apparaît au tap sur mobile
  sur tous les éléments interactifs (liens, boutons, etc.)
*/
a,
button,
[role="button"],
.nav-lien,
.film-carte,
.reseau-lien,
.footer-contact-lien,
.footer-email,
.footer-credit a,
.header-nom {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  background-color: var(--noir);
  color: var(--blanc);
  font-family: var(--font-corps);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  draggable: false;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ── Sections communes ───────────────────────────────────────── */
.section {
  padding: var(--padding-section);
  position: relative;
}

.section-dark {
  background-color: var(--gris-fonce);
  color: var(--blanc);
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ── Labels de section ───────────────────────────────────────── */
.section-label {
  display: block;
  font-family: var(--font-corps);
  font-weight: 200;
  font-size: 1em;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 0.8rem;
}

.section-label-light {
  color: var(--or-clair);
}

/* ── Titres de section ───────────────────────────────────────── */
.section-titre {
  font-family: var(--font-titre);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 3rem;
}

/* ── Animation d'apparition au scroll ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --padding-section: 3.5rem 1.2rem;
  }

  .section-titre {
    margin-bottom: 2rem;
  }
}