@import url("https://use.typekit.net/jlx7mka.css");

/* =========
   Gosselico – custom.css (Listmonk public page)
   Palette:
   --violet: #8969A1;
   --vert:   #4F9073;
   --rose:   #D6619E;
   --creme:  #E4DDCC;
   --orange: #D25C2A;
   ========= */

:root{
  --violet:#8969A1;--vert:#4F9073;--rose:#D6619E;--creme:#E4DDCC;--orange:#D25C2A;
  --ink:#262626; --ink-soft:#494949; --bg:#0E0E0E; --card:#F8F6F1; /* card très clair pour lisibilité */
}

/* Base */
html, body{
  background: var(--bg);
  color: var(--ink);
  font-family: "Avenir", "Nunito Sans", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", Arial, "Liberation Sans", "DejaVu Sans", sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Conteneur principal (wrap) */
.wrap{
  background: var(--creme);
  max-width: 760px;
  margin: 32px auto;
  padding: 28px 24px;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border: 1px solid rgba(0,0,0,.05);
}

/* Header / logo */
.header{ margin-bottom: 16px; }
.logo{ display:flex; justify-content:center; }
.logo img{
  max-width: 220px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
}

/* Titres */
h1, h2, h3{
  color: var(--violet);
  letter-spacing: .2px;
  margin: 0 0 12px 0;
  font-family: "Alda", "Crimson Pro", serif;
}
section > h2{
  font-size: 1.6rem;
  font-weight: 800;
}

/* Liens */
a{ color: var(--vert); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Formulaire */
.form{ margin-top: 12px; }
.form p{ margin: 12px 0; }

label{
  display:block;
  font-size: .95rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

input[type="email"],
input[type="text"]{
  width: 100%;
  background: hsl(42 31% 95%); /* plus clair que #E9E2D3 pour contraste */
  border: 1px solid color-mix(in srgb, var(--violet) 35%, #000 0%);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.03) inset;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder{ color: #8c8c8c; }

input:focus{
  border-color: var(--violet);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 26%, transparent);
  background: #fff;
}

/* Liste des listes */
.lists{
  list-style: none;
  padding: 12px 14px;
  margin: 18px 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
}
.lists > h2{
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: var(--violet);
  font-weight: 800;
}
.lists li{
  display:flex; align-items:center; gap:10px;
  padding: 6px 2px;
}
.lists input[type="checkbox"]{
  width: 18px; height: 18px;
  accent-color: var(--vert);
}

/* Bouton principal */
.button{
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--vert), color-mix(in srgb, var(--vert) 70%, var(--violet)));
  color:#fff;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--vert) 25%, transparent);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}
.button:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--vert) 32%, transparent);
}
.button:active{ transform: translateY(1px); }

/* Lien d’archives à droite */
.right{ text-align: right; }
.right a{ color: var(--violet); }

/* CAPTCHA (Altcha) harmonisé */
.captcha .altcha{
  border-color: color-mix(in srgb, var(--violet) 40%, #a0a0a0);
  border-radius: 12px;
  max-width: 100%;
  width: 40%;
}
.captcha .altcha-label{ font-size: .95rem; }
.captcha .altcha-code-challenge{ border-radius: 12px; }
.captcha .altcha-code-challenge-verify{
  background: var(--violet);
}

.captcha input[type="checkbox"],
#altcha_checkbox_66282863{
  accent-color: var(--vert);
}

/* Footer */
footer.container{
  color: #bdb6a9;
  text-align: center;
  font-size: .9rem;
  margin: 8px auto 24px;
}
footer a{ color: #bdb6a9; }
footer a:hover{ color: var(--rose); }

/* Petits helpers responsive */
@media (max-width: 520px){
  .wrap{ margin: 18px 12px; padding: 20px 16px; }
  .logo img{ max-width: 180px; }
  section > h2{ font-size: 1.35rem; }
}

/* Optionnel : bannière d’info (si tu ajoutes <p class="note">…</p>) */
.note{
  background: color-mix(in srgb, var(--rose) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--rose) 24%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
}