/* ==========================================================================
   PierreMalin — LANDING (/). Styles spécifiques à la page d'accueil (ancre de
   confiance). Réutilise styles.css (tokens, hero, tool-card, btn, btn-ghost,
   sources, subscribe, modale, footer) ; n'ajoute ici que la lente de veille,
   l'échelle de l'agent, le check-up (cartes-outils), le manifeste et la FAQ.
   ========================================================================== */

/* -------------------- Nav du hero (ancres + CTA) -------------------- */
.hero__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 4px 0 22px;
}
.hero__nav-link {
  color: var(--sub-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.hero__nav-link:hover {
  color: #fff;
}
@media (max-width: 560px) {
  .hero__nav-link {
    display: none;
  }
}

/* CTA du hero : action principale (surveillance) + secondaire (check-up). */
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 20px 0 4px;
}
@media (max-width: 480px) {
  .hero__cta .btn,
  .hero__cta .btn-ghost {
    width: 100%;
  }
}
/* Bouton fantôme sur fond sombre (hero) : clair sur ink. */
.btn-ghost--on-dark {
  border-color: #2b3a56;
  color: #d7deea;
}
.btn-ghost--on-dark:hover {
  border-color: var(--green-bright);
  color: #fff;
}

/* -------------------- Lente de veille des lois (bas du hero) -------------------- */
/* Preuve « l'agent lit déjà » : défilement continu des textes suivis (config
   sources-home.js). Pause au survol ; en reduced-motion : statique (voir plus bas). */
.lawtick {
  margin: 22px 0 2px;
  padding: 11px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.lawtick__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: lawtick-scroll 46s linear infinite;
}
.lawtick:hover .lawtick__track {
  animation-play-state: paused;
}
.lawtick__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sub-dark);
}
.lawtick__sep {
  color: rgba(255, 255, 255, 0.22);
  padding: 0 2px;
}
.lawtick__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.lawtick__dot--vigueur {
  background: var(--green-bright);
}
.lawtick__dot--maj {
  background: #8ea0bd;
}
.lawtick__dot--surveille {
  background: var(--risk);
}
@keyframes lawtick-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* -------------------- Titre de section (partagé landing) -------------------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 24px;
  color: var(--ink);
}

/* -------------------- Bloc 2 : cartes-outils -------------------- */
.tools {
  padding: 52px 0 8px;
}
.tools__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.tool {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
}
.tool__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--ink);
}
.tool__pain {
  margin: 0 0 16px;
  color: var(--steel-d);
}
.tool__cta {
  align-self: flex-start;
  margin-top: auto;
}
/* Sous-titre du check-up (sous le titre de section). */
.tools__sub {
  margin: -14px 0 24px;
  color: var(--steel);
  font-size: 1rem;
}

/* -------------------- Bloc 4 : mini-manifeste -------------------- */
.manifest {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 52px 0;
  margin-top: 40px;
}
.manifest__p {
  max-width: 60ch;
  margin: 0 0 16px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}
.manifest__p:last-child {
  margin-bottom: 0;
}

/* -------------------- Bloc 5 : abonnement (section) -------------------- */
.subscribe-home {
  padding: 34px 0 8px;
}
.subscribe-home .subscribe--result {
  margin-top: 0;
}

/* -------------------- Bloc 6 : FAQ (accordéons natifs) -------------------- */
.faq {
  padding: 52px 0 60px;
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item:first-of-type {
  border-top: 1px solid var(--line);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 18px 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--green);
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after {
  transform: rotate(45deg);
}
.faq__a {
  padding: 0 2px 20px;
  animation: fadein 0.3s ease;
}
.faq__a p {
  margin: 0 0 12px;
  color: var(--steel-d);
  max-width: 64ch;
}
.faq__link {
  color: var(--green);
  font-weight: 700;
  text-decoration: none;
}
.faq__link:hover {
  text-decoration: underline;
}

/* -------------------- Desktop -------------------- */
@media (min-width: 680px) {
  .tools__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* -------------------- Reduced motion : lente statique -------------------- */
@media (prefers-reduced-motion: reduce) {
  .lawtick__track {
    animation: none !important;
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px 0;
  }
  .faq__a,
  .faq__q::after {
    animation: none !important;
    transition: none !important;
  }
}