/* =====================================================================
   BELUGA — Design tokens
   Artisan glacier · Marseille, Pointe Rouge
   Toujours écrire « BELUGA » en majuscules.
   ===================================================================== */

/* ---------- Polices auto-hébergées --------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/inter-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/inter-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/caveat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/caveat-600.woff2') format('woff2');
}

:root {
  /* ---------- Palette : chocolat + crème ---------- */
  --choco:        #3D2914; /* primaire — chocolat profond (logo) */
  --choco-deep:   #2A1B0D; /* variante foncée (gradients) */
  --choco-soft:   #6B5A4C; /* texte secondaire, sous-titres */

  --cream:        #FAF5ED; /* background principal */
  --cream-warm:   #F5EBD8; /* background secondaire, cards douces */
  --border:       #E8DCC7; /* bordures sur fond crème */

  --terracotta:   #E26D5C; /* accent chaud — CTAs, téléphone, tagline */
  --gold:         #E8A93C; /* étoiles, bordures USP, accents lumineux */
  --basil:        #6B8E5A; /* parcimonieux — rappel sorbet citron-basilic */
  --berry:        #C44569; /* parcimonieux — rappel sorbet fruits rouges */

  --ink:          #1B1B1B; /* texte principal */

  /* ---------- Statuts ---------- */
  --open:         #2E7D5B;
  --closed:       #B14B4B;

  /* ---------- Couleur fond surfaces ---------- */
  --surface:      #FFFFFF;
  --surface-warm: #F5EBD8;

  /* ---------- Typographie ---------- */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;

  /* Échelle typographique fluide (clamp : min mobile -> max desktop).
     Le terme vw assure une montée progressive entre ~360px et ~1200px.
     MAX = ancienne valeur desktop (le rendu desktop reste identique),
     MIN = valeur compacte mobile (evite les debordements de titres). */
  --fs-xs:    clamp(0.72rem, 0.71rem + 0.05vw, 0.74rem);
  --fs-sm:    clamp(0.80rem, 0.78rem + 0.06vw, 0.82rem);
  --fs-base:  clamp(0.95rem, 0.93rem + 0.10vw, 1.00rem);
  --fs-md:    clamp(1.05rem, 1.01rem + 0.19vw, 1.15rem);
  --fs-lg:    clamp(1.20rem, 1.11rem + 0.38vw, 1.40rem);
  --fs-xl:    clamp(1.35rem, 1.20rem + 0.67vw, 1.70rem);
  --fs-2xl:   clamp(1.70rem, 1.49rem + 0.95vw, 2.20rem);
  --fs-3xl:   clamp(2.20rem, 1.77rem + 1.90vw, 3.20rem);

  /* Tracking */
  --tracking-eyebrow: 0.16em;
  --tracking-tight:  -0.025em;

  /* Leading */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-body:   1.5;

  /* ---------- Espace ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Rayons ---------- */
  --radius-pill: 999px;
  --radius:      18px;
  --radius-sm:   12px;
  --radius-xs:    8px;

  /* ---------- Ombres (toutes en chocolat 4-12 %) ---------- */
  --shadow:        0 1px 2px rgba(61, 41, 20, 0.04), 0 4px 16px rgba(61, 41, 20, 0.06);
  --shadow-hover:  0 2px 4px rgba(61, 41, 20, 0.06), 0 12px 32px rgba(61, 41, 20, 0.12);
  --shadow-press:  inset 0 1px 2px rgba(61, 41, 20, 0.08);

  /* ---------- Transitions ---------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --t-fast:      0.15s;
  --t-base:      0.2s;

  /* ---------- Background ambiance ---------- */
  --bg-ambient:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(232, 169, 60, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(226, 109, 92, 0.06), transparent 60%),
    var(--cream);
}

/* =====================================================================
   Reset minimal et base
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg-ambient);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--lh-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

/* Focus visible accessible (tous les éléments interactifs) */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}