/* ================================================================
   STYLE.CSS — Variables globales, reset, typographie, utilitaires
   Mehmet & Mine — Album de mariage
   ================================================================ */

/* === VARIABLES ================================================= */
:root {
  /* Palette */
  --c-bg:          #FAF7F2;
  --c-white:       #FFFFFF;
  --c-dark:        #0a0908;
  --c-dark-2:      #1a1917;
  --c-anthracite:  #2c2b29;
  --c-gold:        #C9A96E;
  --c-gold-light:  #E8D5B0;
  --c-gold-pale:   #f5efe4;
  --c-beige:       #F0E8DC;
  --c-gray-100:    #F5F0EA;
  --c-gray-200:    #EAE5DF;
  --c-gray-300:    #D4CFC8;
  --c-gray-500:    #9A948D;
  --c-gray-700:    #5a5550;

  /* Typographie */
  --f-serif:   'Cormorant Garamond', Georgia, serif;
  --f-sans:    'Jost', 'Helvetica Neue', Arial, sans-serif;
  --f-cursive: 'Great Vibes', cursive;

  /* Espacement */
  --sp-xs:  0.5rem;
  --sp-sm:  1rem;
  --sp-md:  2rem;
  --sp-lg:  4rem;
  --sp-xl:  8rem;

  /* Transitions */
  --t-fast:  0.2s ease;
  --t-med:   0.45s ease;
  --t-slow:  0.8s cubic-bezier(0.4, 0, 0.2, 1);
  --t-luxe:  1.1s cubic-bezier(0.22, 1, 0.36, 1);

  /* Couches z-index */
  --z-nav:      100;
  --z-mobile:   200;
  --z-lightbox: 300;
  --z-intro:    400;
  --z-login:    500;

  /* Border-radius */
  --r-sm:   4px;
  --r-md:   8px;
}

/* === RESET ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-sans);
  font-weight: 300;
  background-color: var(--c-dark); /* sombre pour que les transitions login/intro soient sans flash */
  color: var(--c-anthracite);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.no-scroll { overflow: hidden; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  border: none;
  background: none;
  font-family: var(--f-sans);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

ul, ol { list-style: none; }

/* === SYSTÈME DE VUES =========================================== */
.view {
  pointer-events: none;
}

/* Overlays plein-écran (login, intro) : transition opacity CSS */
.view-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-login);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--t-slow);
}

.view-overlay.view--active {
  opacity: 1;
  pointer-events: auto;
}

/* Vues de page (home, galerie) : show/hide via display uniquement.
   L'opacité est gérée exclusivement par les animations view--entering. */
.view-page {
  position: relative;
  min-height: 100vh;
  display: none;
}

.view-page.view--active {
  display: block;
  pointer-events: auto;
}

/* Canvas d'arrière-plan pour les effets particules */
.view-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* === TYPOGRAPHIE =============================================== */
.amp {
  font-family: var(--f-cursive);
  font-size: 1.25em;
  font-style: normal;
}

.amp.gold {
  color: var(--c-gold);
}

/* === BOUTON DE LANGUE ========================================== */
.lang-toggle {
  position: fixed;
  top: 0.85rem;
  right: 1.1rem;
  z-index: 600;
  background: transparent;
  border: none;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
}
.lang-toggle:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* === ANIMATIONS D'APPARITION AU SCROLL ======================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-luxe);
}

.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.45s; }

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

/* === SKELETON LOADING ========================================= */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-gray-200) 25%,
    var(--c-gray-100) 50%,
    var(--c-gray-200) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
}

/* === ACCESSIBILITÉ : FOCUS VISIBLE ============================ */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* === PRÉFÉRENCE RÉDUCTION DES ANIMATIONS ====================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === UTILITAIRES =============================================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}