/* Styles complémentaires (Tailwind gère l'essentiel). */
[x-cloak] { display: none !important; }

h1, h2, h3, .font-display { letter-spacing: -0.015em; }

/* Liens du menu principal : soulignement brique au survol et sur la page en cours */
.nav-link { position: relative; padding: .5rem 0; color: #334155; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; border-radius: 3px;
                   background: #CFA02A; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover, .nav-link[aria-current="page"] { color: #12284B; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
[data-tone="dark"] .nav-link { color: rgba(255,255,255,.85); }
[data-tone="dark"] .nav-link:hover, [data-tone="dark"] .nav-link[aria-current="page"] { color: #fff; }
[data-tone="dark"] .nav-link::after { background: #E3C15B; }

/* Focus clavier bien visible partout */
:focus-visible { outline: 3px solid #86660F; outline-offset: 2px; border-radius: 6px; }

/* ---------- Itinéraire : élément signature ----------
   Une ligne pointillée relie les arrêts (Départ → Arrivée, étapes 1 → 3),
   comme un trajet tracé sur une carte. */
:root { --route: #A88216; }

.route { padding-left: 2.25rem; }
.route-stop { position: relative; }
.route-stop::before {            /* le point d'arrêt */
  content: ""; position: absolute; left: -2.25rem; top: .3rem;
  width: 1.125rem; height: 1.125rem; border-radius: 50%;
  border: 3px solid var(--route); background: #fff;
}
.route-stop[data-end]::before { background: var(--route); }
.route-stop:not(:last-child)::after {   /* le tronçon vers l'arrêt suivant */
  content: ""; position: absolute; left: calc(-2.25rem + .5625rem - 1.5px);
  top: 1.65rem; bottom: -1.55rem; /* écart entre arrêts (1.25rem) + haut du point suivant */ width: 3px; background: repeating-linear-gradient(to bottom, var(--route) 0 8px, transparent 8px 14px);
}

/* Le seul mouvement automatique du site : le trajet se trace une fois au chargement,
   puis l'hôpital d'arrivée apparaît. Sans animation (réglage « réduire les animations »),
   l'état final s'affiche directement. */
.route-draw { stroke-dasharray: 1; stroke-dashoffset: 0; animation: route-draw 1.8s cubic-bezier(.45,0,.2,1) .4s both; }
.route-arrive { transform-box: fill-box; transform-origin: center; animation: route-arrive .45s cubic-bezier(.2,.9,.3,1.3) 2.05s both; }
@keyframes route-draw { from { stroke-dashoffset: 1; } }
@keyframes route-arrive { from { opacity: 0; transform: scale(.6); } }

/* Étapes « Comment ça marche » : verticales sur mobile, horizontales sur écran large */
.route-steps > li { position: relative; }
.route-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 1.375rem; top: 3.25rem; bottom: -2rem;
  width: 3px; background: repeating-linear-gradient(to bottom, var(--route) 0 8px, transparent 8px 14px);
}
@media (min-width: 768px) {
  .route-steps > li:not(:last-child)::after {
    left: 3.5rem; right: -1.5rem; top: 1.375rem; bottom: auto;
    width: auto; height: 3px;
    background: repeating-linear-gradient(to right, var(--route) 0 8px, transparent 8px 14px);
  }
}

/* Pages de texte (mentions légales, confidentialité) */
.doc { color: #334155; }
.doc > * + * { margin-top: 1rem; }
.doc h2 { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid #E2E8F0;
          font-family: Overpass, sans-serif; font-weight: 700; font-size: 1.375rem; color: #12284B; }
.doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p { max-width: 65ch; }
.doc a { color: #86660F; text-decoration: underline; text-underline-offset: 4px; }
.doc dl > div { display: grid; gap: .125rem 1.5rem; padding: .5rem 0; }
.doc dt { font-weight: 700; color: #475569; }
@media (min-width: 640px) { .doc dl > div { grid-template-columns: 16rem 1fr; } }

/* Liste de suggestions d'adresses */
.suggestions { max-height: 18rem; overflow-y: auto; }

/* Indicateur HTMX */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Carte du trajet (Google Maps ou Leaflet) */
#route-map { height: 240px; z-index: 0; }
@media (min-width: 1024px) { #route-map { height: 300px; } }

/* Progression de la réservation : les étapes sont reliées par le tracé pointillé,
   en brique pour la partie déjà parcourue. */
.stepper > li:not(:last-child)::after {
  content: ""; position: absolute; top: 19px; left: calc(50% + 26px); right: calc(-50% + 26px); height: 3px;
  background: repeating-linear-gradient(to right, #CBD5E1 0 8px, transparent 8px 14px);
}
.stepper > li.is-done:not(:last-child)::after {
  background: repeating-linear-gradient(to right, var(--route) 0 8px, transparent 8px 14px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}