/* Compléments à Tailwind : ce que les utilitaires ne couvrent pas proprement. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Cormorant dessine les chiffres « elzéviriens » par défaut :
   on force les chiffres alignés pour les numéros de téléphone et les villes. */
body {
  font-variant-numeric: lining-nums;
}

[id] {
  scroll-margin-top: 6rem;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 2px solid #3A8571;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  transition: top 150ms ease-out;
}
.skip-link:focus {
  top: 1rem;
}

/* ---------- Pré-masquage du hero avant l'animation d'entrée ----------
   La classe .js-anim est posée dans le <head> puis retirée par animations.js
   (ou au bout de 3 s si GSAP ne charge pas) : le contenu n'est jamais perdu. */
.js-anim [data-hero-line] > span,
.js-anim [data-hero-fade],
.js-anim [data-hero-media],
.js-anim [data-hero-badge] {
  visibility: hidden;
}

/* Masque de ligne pour les révélations de titres */
.line-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  padding-right: 0.12em;
}
.line-mask > span {
  display: block;
}

/* ---------- Header ---------- */
.site-header {
  transition: background-color 300ms ease-out, box-shadow 300ms ease-out;
}
.site-header .header-bar {
  transition: height 400ms var(--ease-out-expo);
}
.site-header[data-scrolled="true"] {
  box-shadow: 0 1px 0 rgba(10, 22, 32, 0.08), 0 12px 32px -24px rgba(10, 22, 32, 0.5);
}
@media (min-width: 1024px) {
  .site-header[data-scrolled="true"] .header-bar {
    height: 4.25rem;
  }
}

/* Soulignement animé des liens de navigation */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.35rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--ease-out-expo);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after,
.nav-link[data-current="true"]::after,
.dropdown[data-open="true"] .nav-link::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Menu déroulant desktop */
.dropdown-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 180ms ease-out, transform 180ms ease-out, visibility 0s linear 180ms;
}
.dropdown[data-open="true"] .dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 260ms var(--ease-out-expo), transform 420ms var(--ease-out-expo), visibility 0s;
}
.dropdown-chevron {
  transition: transform 300ms var(--ease-out-expo);
}
.dropdown[data-open="true"] .dropdown-chevron {
  transform: rotate(180deg);
}
.dropdown-item {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.dropdown[data-open="true"] .dropdown-item {
  opacity: 1;
  transform: none;
  transition: opacity 400ms var(--ease-out-expo), transform 500ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 45ms + 60ms);
}

/* Burger qui se transforme en croix */
.burger-line {
  transition: transform 450ms var(--ease-out-expo), opacity 200ms ease-out;
  transform-origin: center;
}
[aria-expanded="true"] .burger-line:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
[aria-expanded="true"] .burger-line:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

/* Menu mobile plein écran */
.mobile-panel {
  height: calc(100dvh - 100%);
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 500ms var(--ease-out-expo), opacity 300ms ease-out, visibility 0s linear 500ms;
}
.site-header[data-menu-open="true"] .mobile-panel {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 650ms var(--ease-out-expo), opacity 200ms ease-out, visibility 0s;
}
.m-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.site-header[data-menu-open="true"] .m-item {
  opacity: 1;
  transform: none;
  transition: opacity 500ms var(--ease-out-expo), transform 650ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 45ms + 120ms);
}

/* ---------- Boutons : texte qui « roule » au survol ---------- */
.roll {
  display: inline-grid;
  overflow: hidden;
  line-height: 1.25;
}
.roll > span {
  grid-area: 1 / 1;
  transition: transform 550ms var(--ease-out-expo);
}
.roll > span + span {
  transform: translateY(115%);
}
.group:hover .roll > span:first-child,
.group:focus-visible .roll > span:first-child {
  transform: translateY(-115%);
}
.group:hover .roll > span + span,
.group:focus-visible .roll > span + span {
  transform: translateY(0);
}

/* ---------- Bandeau défilant ---------- */
.marquee-track {
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- Badge circulaire du hero ---------- */
.spin-slow {
  animation: spin 22s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Carte : halo des antennes ---------- */
.pin-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 2.6s var(--ease-out-expo) infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- FAQ (accordéons <details>) ---------- */
.faq summary {
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq-icon {
  transition: transform 450ms var(--ease-out-expo), background-color 300ms ease-out, color 300ms ease-out;
}
.faq[open] .faq-icon {
  transform: rotate(45deg);
  background-color: #2C6D5C;
  color: #fff;
}
.faq[open] .faq-body {
  animation: faq-in 550ms var(--ease-out-expo);
}
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

/* Barre d'action mobile : cachée tant que le hero est visible */
.sticky-bar {
  transition: transform 500ms var(--ease-out-expo);
}
.js .sticky-bar:not([data-visible="true"]) {
  transform: translateY(110%);
}

/* Grain léger sur les sections sombres (texture, pas de dégradé) */
.grain {
  position: relative;
  isolation: isolate;
}
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.img-frame {
  background-color: #1A2B3A;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .marquee-track,
  .spin-slow {
    animation: none;
  }
  .pin-pulse {
    display: none;
  }
}