/* ============================================================
   GeoServices RDC — styles.css
   Complements Tailwind (charge via CDN dans index.html) pour tout
   ce que les classes utilitaires ne couvrent pas proprement :
   police du wordmark, cartes de service moins "carrees", animations
   de reveal, focus clavier, etc.
   ============================================================ */

html{ scroll-behavior:smooth; }
body{ background:#FFFFFF; }
::selection{ background:#00481F; color:#F8F7F1; }

/* ---------- Wordmark (texte seul, sans icone) ---------- */
.wordmark{
  font-family:'Big Shoulders Display', sans-serif;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:0.01em;
  white-space:nowrap;
}

/* ---------- Scrollbar masquee (carrousel) ---------- */
.no-scrollbar{ scrollbar-width:none; -ms-overflow-style:none; }
.no-scrollbar::-webkit-scrollbar{ display:none; }

/* ---------- Apparition au scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in{ opacity:1; transform:translateY(0); }

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

/* ---------- Carrousel ---------- */
.track{ scroll-snap-type:x mandatory; }
.slide{ scroll-snap-align:start; }

#car-track:focus-visible{
  outline:2px solid #00481F;
  outline-offset:4px;
}

/* Cartes de geoservice : coins legerement arrondis, illustration en badge */
.card-organic{
  border-radius:14px;
  overflow:hidden;
}

/* Illustration en hexagone plutot qu'en bloc rectangulaire */
.hex-mask{
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border-radius:6px; /* filet de securite pour navigateurs sans clip-path */
}

/* ---------- Boutons : angles legerement arrondis, jamais pill sauf tags ---------- */
.btn{ border-radius:6px; }

/* ---------- Empilement des sections au scroll ---------- */
.stack-inner{
  will-change: transform, opacity;
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce){
  .stack-inner{ transform:none !important; opacity:1 !important; }
}