/* O QUATI — Design tokens & composants web
   Direction : chaleureuse, amazonienne, ludique et éditoriale.
*/

:root {
  /* Couleurs de marque */
  --oq-jungle-950: #263426;
  --oq-jungle-900: #31412F;
  --oq-jungle-800: #415036;
  --oq-jungle-700: #566A48;
  --oq-leaf-500: #A39F49;

  --oq-ochre-500: #ECB551;
  --oq-honey-300: #F7D58A;
  --oq-cream-200: #FBECC4;
  --oq-cream-50: #FCF8EF;

  --oq-bark-700: #614A2C;
  --oq-terracotta-500: #DD8745;

  /* Neutres sémantiques */
  --oq-white: #FFFFFF;
  --oq-text: #31412F;
  --oq-text-muted: #66705F;
  --oq-border: #E7DDC9;
  --oq-surface: #FFFFFF;
  --oq-surface-soft: #F8F3E8;

  /* États */
  --oq-success: #566A48;
  --oq-warning: #ECB551;
  --oq-error: #B9583D;
  --oq-focus: #DD8745;

  /* Typographie */
  --oq-font-display: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
  --oq-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Formes */
  --oq-radius-sm: 10px;
  --oq-radius-md: 16px;
  --oq-radius-lg: 24px;
  --oq-radius-xl: 32px;
  --oq-radius-pill: 999px;

  /* Ombres */
  --oq-shadow-sm: 0 4px 14px rgba(49, 65, 47, 0.08);
  --oq-shadow-md: 0 12px 32px rgba(49, 65, 47, 0.12);

  /* Espacement */
  --oq-space-1: 4px;
  --oq-space-2: 8px;
  --oq-space-3: 12px;
  --oq-space-4: 16px;
  --oq-space-6: 24px;
  --oq-space-8: 32px;
  --oq-space-12: 48px;
  --oq-space-16: 64px;

  /* Transitions */
  --oq-ease: 180ms ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--oq-text);
  background: var(--oq-cream-50);
  font-family: var(--oq-font-body);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--oq-jungle-900);
  font-family: var(--oq-font-display);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
h3 { font-size: 1.5rem; font-weight: 750; }

a {
  color: var(--oq-jungle-700);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover { color: var(--oq-jungle-900); }

.oq-container {
  width: min(1120px, calc(100% - 32px));
  margin-inline: auto;
}

.oq-section { padding-block: clamp(56px, 8vw, 104px); }

.oq-hero {
  padding-block: clamp(72px, 10vw, 132px);
  background:
    radial-gradient(circle at 85% 20%, rgba(236, 181, 81, 0.22), transparent 32%),
    radial-gradient(circle at 10% 80%, rgba(163, 159, 73, 0.16), transparent 28%),
    var(--oq-cream-50);
}

.oq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 12px;
  border: 1px solid rgba(65, 80, 54, 0.18);
  border-radius: var(--oq-radius-pill);
  background: rgba(255, 255, 255, 0.66);
  color: var(--oq-jungle-700);
  font-family: var(--oq-font-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.oq-lead {
  max-width: 62ch;
  color: var(--oq-text-muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.oq-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.oq-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--oq-radius-pill);
  font-family: var(--oq-font-display);
  font-size: 0.98rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--oq-ease),
    background var(--oq-ease),
    border-color var(--oq-ease),
    box-shadow var(--oq-ease);
}

.oq-button:hover { transform: translateY(-2px); }

.oq-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--oq-focus) 52%, transparent);
  outline-offset: 3px;
}

.oq-button--primary {
  background: var(--oq-jungle-800);
  color: var(--oq-white);
  box-shadow: var(--oq-shadow-sm);
}

.oq-button--primary:hover {
  background: var(--oq-jungle-900);
  color: var(--oq-white);
  box-shadow: var(--oq-shadow-md);
}

.oq-button--secondary {
  background: var(--oq-ochre-500);
  color: var(--oq-jungle-900);
}

.oq-button--secondary:hover { background: var(--oq-honey-300); }

.oq-button--ghost {
  border-color: rgba(65, 80, 54, 0.24);
  background: rgba(255, 255, 255, 0.54);
  color: var(--oq-jungle-900);
}

.oq-card {
  padding: 24px;
  border: 1px solid var(--oq-border);
  border-radius: var(--oq-radius-lg);
  background: var(--oq-surface);
  box-shadow: var(--oq-shadow-sm);
}

.oq-card--soft {
  background: var(--oq-surface-soft);
  box-shadow: none;
}

.oq-tag {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: var(--oq-radius-pill);
  background: var(--oq-cream-200);
  color: var(--oq-bark-700);
  font-size: 0.82rem;
  font-weight: 700;
}

.oq-input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--oq-border);
  border-radius: var(--oq-radius-md);
  background: var(--oq-white);
  color: var(--oq-text);
  font: inherit;
  transition: border-color var(--oq-ease), box-shadow var(--oq-ease);
}

.oq-input::placeholder { color: #879080; }

.oq-input:focus {
  border-color: var(--oq-jungle-700);
  outline: none;
  box-shadow: 0 0 0 4px rgba(221, 135, 69, 0.16);
}

.oq-dark-section {
  color: var(--oq-cream-50);
  background: var(--oq-jungle-900);
}

.oq-dark-section h1,
.oq-dark-section h2,
.oq-dark-section h3 { color: var(--oq-white); }

.oq-dark-section p { color: rgba(252, 248, 239, 0.78); }

/* Règle d'usage des couleurs :
   60 % crème / neutres
   25 % verts
   10 % ocre
    5 % terre cuite
*/