/* =========================================================================
   Japanscapes V2 — feuille de styles principale
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Polices (fichiers woff2 à déposer dans assets/fonts/)
   ---------------------------------------------------------------------- */
@font-face { font-family: 'Kodchasan'; src: url('../fonts/kodchasan-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mulish'; src: url('../fonts/mulish-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* -------------------------------------------------------------------------
   2. Variables (tokens du design system Figma)
   ---------------------------------------------------------------------- */
:root {
  --jp-forest: #165658;  --jp-terra: #BF4C45;  --jp-blue: #2D77B2;
  --jp-teal: #37898C;    --jp-cream: #F8F2E8;  --jp-white: #FFFFFF;
  --jp-n200: #E5E5E5;    --jp-n300: #D1D5DB;   --jp-n500: #6B7280;
  --jp-n700: #374151;    --jp-n900: #1F2937;

  --jp-font-title: 'Kodchasan', sans-serif;
  --jp-font-text: 'Mulish', sans-serif;

  --jp-radius-sm: 8px;   --jp-radius-lg: 16px;  --jp-radius-full: 999px;

  --jp-content: 1200px;  --jp-gutter: 120px;   --jp-section: 128px;
}
@media (max-width: 1024px) { :root { --jp-gutter: 48px; --jp-section: 96px; } }
@media (max-width: 767px)  { :root { --jp-gutter: 20px; --jp-section: 64px; } }

/* -------------------------------------------------------------------------
   3. Styles de base
   ---------------------------------------------------------------------- */
body {
  font-family: var(--jp-font-text);
  color: var(--jp-n700);
  background: var(--jp-white);
}
h1, h2, h3, h4 {
  font-family: var(--jp-font-title);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: 56px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
@media (max-width: 767px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
}
:focus-visible { outline: 2px solid var(--jp-n900); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   4. Panneau glass (texte des heros)
   ---------------------------------------------------------------------- */
.jscape-glass {
  background: rgba(22, 86, 88, 0.42);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--jp-radius-lg);
  box-shadow: 0 16px 48px rgba(10, 33, 33, 0.25);
  padding: 40px 44px;
  color: var(--jp-white);
}
@media (max-width: 767px) {
  .jscape-glass { padding: 28px 24px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jscape-glass { background: rgba(22, 86, 88, 0.85); }
}

/* -------------------------------------------------------------------------
   5. Composants — à compléter en phase 2
   (boutons, surtitre, filtres, cartes, accordéons, header, footer…)
   ---------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   6. Réduction des animations (toujours en fin de fichier)
   ---------------------------------------------------------------------- */
@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;
  }
  .jscape-reveal { opacity: 1; transform: none; }
}