/* Socleany — styles complémentaires à Tailwind (composants + animations sobres) */

:root {
  --cream: #F7F7F1;
  --forest: #073D2C;
  --green: #135D43;
  --lime: #B8E126;
  --ink: #10231C;
  --warmgray: #E8E9E1;
  --coral: #F28D72;
}

html { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html, body { max-width: 100%; }
body { background: var(--cream); overflow-x: hidden; position: relative; }

/* ---------- Boutons ---------- */
.btn-lime,
.btn-green,
.btn-outline,
.btn-dark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: .82rem 1.35rem; border-radius: .8rem;
  transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap; cursor: pointer;
}
.btn-lime { background: var(--lime); color: var(--forest); box-shadow: 0 6px 18px -8px rgba(184,225,38,.9); }
.btn-lime:hover { background: #a9d31c; transform: translateY(-1px); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #0f4a36; transform: translateY(-1px); }
.btn-dark { background: var(--forest); color: #fff; }
.btn-dark:hover { background: #0b3a2a; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--forest); border: 1.5px solid rgba(7,61,44,.25); }
.btn-outline:hover { border-color: var(--forest); background: rgba(7,61,44,.04); }

/* ---------- Menus déroulants ---------- */
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 250px; padding: .5rem; background: #fff;
  border: 1px solid var(--warmgray); border-radius: 1rem;
  box-shadow: 0 22px 60px -22px rgba(16,35,28,.30);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
/* pont invisible qui couvre l'espace bouton ↔ menu pour ne pas perdre le survol */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 14px; background: transparent;
}
.group:hover .dropdown,
.group:focus-within .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a {
  display: block; padding: .6rem .8rem; border-radius: .6rem;
  font-size: 14px; font-weight: 500; color: rgba(16,35,28,.82);
}
.dropdown a:hover { background: var(--cream); color: var(--forest); }

/* Header au scroll */
#site-header.scrolled {
  background: rgba(247,247,241,.88);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 rgba(16,35,28,.06);
}

/* ---------- Puce check verte ---------- */
.check-item { display: flex; align-items: flex-start; gap: .6rem; }
.check-item .tick {
  flex: 0 0 auto; margin-top: 1px; width: 20px; height: 20px; border-radius: 6px;
  display: grid; place-items: center; background: rgba(19,93,67,.10); color: var(--green);
}

/* ---------- Révélation au scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
  * { animation: none !important; }
}

/* ---------- Mini-jauge (donut) ---------- */
.donut {
  --val: 93; --size: 78px;
  width: var(--size); height: var(--size); border-radius: 50%;
  background: conic-gradient(var(--lime) calc(var(--val) * 1%), var(--warmgray) 0);
  display: grid; place-items: center;
}
.donut::after { content: ""; width: calc(var(--size) - 18px); height: calc(var(--size) - 18px); border-radius: 50%; background: #fff; }
.donut > span { position: absolute; font-weight: 600; color: var(--forest); font-size: 15px; }

/* ---------- Ligne de sparkline verte ---------- */
.spark { display: block; width: 100%; height: auto; }

/* ---------- Accordéon ---------- */
.acc-panel { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-item.open .acc-panel { max-height: 400px; }
.acc-item.open .acc-chevron { transform: rotate(180deg); }

/* Focus visible accessible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px;
}