/* ============================================================
   Artica Camper — styles personnalisés
   Palette : fjord #12333E / fjord-dark #0B222B / signal #E8722A
             snow #F5F4EF / birch #D9C6A5 / graphite #1E282E
   ============================================================ */

:root {
  --c-fjord: #12333E;
  --c-fjord-dark: #0B222B;
  --c-signal: #E8722A;
  --c-snow: #F5F4EF;
  --c-birch: #D9C6A5;
  --c-graphite: #1E282E;
  --c-mist: #8FA3AB;
}

html { scroll-behavior: smooth; }

body { text-rendering: optimizeLegibility; }

::selection { background: var(--c-signal); color: #fff; }

/* Accessibilité : focus visible net */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--c-signal);
  outline-offset: 2px;
}

/* --- Motion 1 : entrée du hero (révélation décalée) --- */
@keyframes hero-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim {
  opacity: 0;
  animation: hero-up .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-anim-1 { animation-delay: .05s; }
.hero-anim-2 { animation-delay: .22s; }
.hero-anim-3 { animation-delay: .40s; }
.hero-anim-4 { animation-delay: .58s; }
@media (prefers-reduced-motion: reduce) {
  .hero-anim { animation: none; opacity: 1; }
}

/* --- Motion 2 : révélation au scroll (IntersectionObserver) --- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.reveal-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Motion 3 : zoom lent des visuels modèles au survol --- */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.img-zoom:hover img, .img-zoom:focus-within img { transform: scale(1.05); }

/* Filet accent des liens / titres */
.rule-accent { width: 64px; height: 4px; background: var(--c-signal); }

/* Lien de navigation : soulignement animé */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--c-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Dropdown desktop (hover) */
@media (hover: hover) and (min-width: 1024px) {
  [data-dropdown].group:hover .dropdown-panel,
  [data-dropdown]:focus-within .dropdown-panel { display: block; }
}
.dropdown-panel[hidden] { display: none; }

/* Ombre de lisibilité sur les textes du hero */
.text-shadow-hero { text-shadow: 0 2px 24px rgba(11, 34, 43, .55); }

/* Grille technique (fiches modèles) */
.spec-line { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(143,163,171,.35); }

/* Petites capitales d'étiquette */
.eyebrow {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}