/* Site vitrine Kairny — styles partagés (hover, FAQ, responsive).
   Les pages gardent les styles inline de la maquette Claude Design ;
   ce fichier ne porte que ce qui ne peut pas être inline. */

/* --- Liens & boutons (équivalents des style-hover de la maquette) --- */
a.nl:hover { color: #1a1d21 !important; }
a.fl:hover { color: #f5f6f8 !important; }
a.b-dark:hover { background: #1a1d21 !important; color: #ffffff !important; }
a.b-ghost:hover { border-color: #8a93a0 !important; color: #1a1d21 !important; }
a.b-outline:hover { border-color: #c8cdd4 !important; color: #1a1d21 !important; }
a.b-light:hover { background: #ffffff !important; color: #1a1d21 !important; }
a.b-outline-dark:hover { border-color: #8a93a0 !important; color: #f5f6f8 !important; }
.card:hover { border-color: #c8cdd4 !important; box-shadow: 0 10px 32px rgba(26, 29, 33, 0.08); }

/* --- Sélecteur de langue (accueil) --- */
.lang-btn {
  border: none; background: #ffffff; color: #8a93a0; padding: 6px 10px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.lang-btn.active { background: #1a1d21; color: #ffffff; }

/* --- Header : burger et menu mobile (déroulant depuis le haut) --- */
.burger { display: none; border: none; background: none; padding: 4px; font-size: 26px; color: #1a1d21; cursor: pointer; line-height: 1; }
.mobile-menu { display: none; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; background: #ffffff; }
.mobile-menu a { display: block; padding: 14px 24px; font-size: 15px; font-weight: 600; color: #1a1d21; border-bottom: 1px solid #eef0f3; }
.cta-short { display: none; }

/* --- Formulaire de demande de démo --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.req { color: #b42318; }
.field-error { color: #b42318; font-size: 12.5px; line-height: 1.5; }
.field-error[hidden] { display: none; }
a.b-ghost-lite:hover { border-color: #8a93a0 !important; color: #1a1d21 !important; }
button#demo-submit:hover:not(:disabled) { background: #1a1d21 !important; }

/* --- FAQ (accordéon) --- */
.faq-q i { transition: transform 0.25s ease; }
.faq-q.open i { transform: rotate(45deg); }
.faq-a[hidden] { display: none; }

/* --- Animations d'apparition au scroll --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Responsive (la maquette est desktop-first, styles inline) --- */
@media (max-width: 900px) {
  .main-nav { display: none !important; }
  .b-ghost { display: none !important; }
  .burger { display: inline-flex; align-items: center; }
  .mobile-menu { display: block; }
  .mobile-menu.open { max-height: 420px; border-top: 1px solid #eef0f3; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .g2, .split2 { grid-template-columns: 1fr !important; }
  .g3, .g4 { grid-template-columns: 1fr 1fr !important; }
  .t-hero { font-size: 40px !important; }
  .t-sec { font-size: 30px !important; }
}

@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .g3, .g4 { grid-template-columns: 1fr !important; }
  .mg4 { grid-template-columns: 1fr 1fr !important; }
  .t-hero { font-size: 33px !important; }
  .t-sec { font-size: 26px !important; }
  .btn-row { flex-wrap: wrap; justify-content: center; }
  .mock-side { display: none !important; }
  .steprow { grid-template-columns: 40px 1fr !important; gap: 16px !important; }
}