:root {
  /* Couleurs */
  --orange:    #FF7A4F;
  --dark:      #1D1D1D;
  --light:     #F5F2EF;
  --sand:      #DBD2CB;
  --dark-sand: #AA998F;
  --teal:      #8CDFC8;

  /* Typographie */
  --font:      'Raleway', sans-serif;
  --font-logo: 'Gilroy', 'Raleway', sans-serif;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   20px;
  --radius-full: 100px;
}

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

::selection { background: var(--teal); color: var(--dark); }

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

.logo-coktl {
  font-family: var(--font-logo);
  font-size: 40px; font-weight: 900;
  letter-spacing: -1px; -webkit-text-stroke: 0.4px currentColor;
  color: inherit; text-decoration: none;
  cursor: none; transition: opacity .2s;
}
.logo-coktl:hover { opacity: .65; }

/* ============================================================
   KIT EMBED — deux variantes selon le fond de page
   ============================================================ */

/* Base commune */
.kit-dark .formkit-form,
.kit-light .formkit-form {
  background: transparent !important;
  font-family: var(--font) !important;
}

/* ── Variante fond sombre (hero, drawer newsletter) ── */
.kit-dark .formkit-input {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: white !important;
  border-radius: 8px !important;
}
.kit-dark .formkit-input::placeholder { color: rgba(255,255,255,.35) !important; }
.kit-dark .formkit-submit {
  background: var(--orange) !important;
  color: var(--dark) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  transition: border-radius .9s ease-in-out !important;
}
.kit-dark .formkit-submit:hover { border-radius: 100px !important; }

/* ── Variante fond clair (panneau newsletter, page newsletter, footer) ── */
.kit-light .formkit-input {
  background: white !important;
  border: 1px solid var(--sand) !important;
  color: var(--dark) !important;
  border-radius: 8px !important;
}
.kit-light .formkit-input::placeholder { color: var(--dark-sand) !important; }
.kit-light .formkit-submit {
  background: var(--orange) !important;
  color: var(--dark) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  transition: border-radius .9s ease-in-out !important;
}
.kit-light .formkit-submit:hover { border-radius: 100px !important; }

/* ============================================================
   ANIMATIONS D'ENTRÉE — partagées entre toutes les pages
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}