/* EJP Cotonou : bande turquoise foncé, contenu sur fond clair teinté de vert. */
:root {
  --deep: #103b33;
  --deep-2: #17493f;
  --green: #327b57;
  --green-ink: #276446;
  --mist: #e9f2f0;
  --paper: #f6faf8;
  --white: #ffffff;
  --ink: #15201d;
  --mute: #5b6f69;
  --line: #d4e3de;
  --ok: #2f7d52;
  --ok-bg: #e3f3ea;
  --ko: #b5452f;
  --ko-bg: #fbeae5;
  --warn: #b7791f;

  --font-ui: "Poppins", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-verse: "Lora", Georgia, "Times New Roman", serif;

  --r: 14px;
  --r-sm: 9px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 0 1.4em;
  border: 0; border-radius: 999px;
  background: var(--deep); color: var(--white);
  font-weight: 600; font-size: 1rem; letter-spacing: .01em;
  transition: background .15s, transform .1s;
}
.btn:hover { background: var(--deep-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: default; }
.btn.secondary { background: var(--white); color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.secondary:hover { box-shadow: inset 0 0 0 1.5px var(--green); }
.btn.block { width: 100%; }

.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin-bottom: .4rem; }
.input, .textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  background: var(--white); padding: .85rem 1rem; font-size: 1rem;
}
.input:focus, .textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(50, 123, 87, .18); }
.textarea { min-height: 140px; resize: vertical; line-height: 1.5; }

.eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.notice { border-radius: var(--r-sm); padding: .8rem 1rem; font-size: .92rem; }
.notice.error { background: var(--ko-bg); color: var(--ko); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}