/* ============================================================
   GEOTAX — Couche UX globale (v117)
   Chargée après les styles inline de chaque page.
   Accessibilité, mobile, formulaires, micro-interactions.
   ============================================================ */

/* ---------- Fondations ---------- */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
::selection { background: #CBB98E; color: #1A2233; }

/* ---------- Focus clavier visible (a11y) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid #CBB98E;
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible, a.btn:focus-visible {
  outline: 3px solid #1A2233;
  outline-offset: 3px;
}

/* ---------- Lien d'évitement (injecté par ux.js) ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 2000;
  background: #1A2233;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Cibles tactiles ≥ 44px ---------- */
.btn, a.btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:active { transform: scale(0.98); }
.mobile-menu a { padding: 14px 0; min-height: 44px; display: flex; align-items: center; }
.lang-toggle a { padding: 10px 6px; display: inline-flex; align-items: center; min-height: 40px; }
.hamburger { padding: 12px; margin: -12px; min-width: 48px; min-height: 48px; justify-content: center; }
footer a { display: inline-block; padding: 3px 0; }

/* ---------- Menu mobile : confort et défilement ---------- */
.mobile-menu {
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.menu-open { overflow: hidden; }

/* ---------- Formulaires ---------- */
input, select, textarea {
  font-size: 16px !important; /* évite le zoom automatique iOS */
  min-height: 48px;
  border-radius: 6px;
  accent-color: #CBB98E;
}
textarea { min-height: 140px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #CBB98E;
  outline-offset: 1px;
  border-color: #CBB98E;
}
/* États de validation natifs, sans JS : seulement après interaction */
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: #B3261E !important;
  box-shadow: 0 0 0 1px #B3261E;
}
label { cursor: pointer; }

/* ---------- Accordéons FAQ ---------- */
.faq-header { min-height: 56px; gap: 12px; }
.faq-header:hover { color: #8A7745; }
.faq-toggle { flex-shrink: 0; }

/* ---------- Tableaux larges : défilement horizontal mobile ---------- */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
  scrollbar-width: thin;
}
.table-scroll table { min-width: 640px; }

/* ---------- Barres fixes et encoches (iPhone) ---------- */
.sticky-cta-mobile, .float-book {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
}
@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---------- Confort de lecture mobile ---------- */
@media (max-width: 768px) {
  body { line-height: 1.65; }
  .hero { height: auto; min-height: 540px; padding-top: 48px; padding-bottom: 48px; }
  h1 { font-size: clamp(30px, 8.5vw, 40px); }
  h2 { font-size: clamp(26px, 7vw, 34px); }
  .container { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Animations : respect des préférences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Impression ---------- */
@media print {
  nav, .mobile-menu, .hamburger, .sticky-cta-mobile, .float-book,
  .skip-link, .back-to-top, [class*="sticky"] { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .hero { height: auto; min-height: 0; background: none !important; color: #000; }
  .hero * { color: #000 !important; }
}