/* ============================================================
   Pic'Nic — micro-expérience « Itinéraire »
   Uniquement transform / opacity (+ un cercle d'entrée en clip-path).
   Couleurs de la charte uniquement.
   ============================================================ */
html.dir-open, html.dir-open body { overflow: hidden; }

.dir {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--pn-black);
  color: var(--pn-white);
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
}
.dir[hidden] { display: none; }
.dir.is-playing { animation: dir-enter 480ms cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes dir-enter { to { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); } }

.dir__scene { position: absolute; inset: 0; }
.dir__pov, .dir__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
}

/* 1. Vue conducteur : la voiture avance (léger zoom), la ligne défile */
.dir.is-playing .dir__pov { animation: dir-drive 1500ms cubic-bezier(.3, 0, .5, 1) 200ms both; transform-origin: 50% 47%; }
/* la voiture « avance » : seul le paysage zoome, l'habitacle reste fixe */
@keyframes dir-drive { from { transform: scale(1); } to { transform: scale(1.12); } }
.dir.is-playing .dir__lane { animation: dir-lane 380ms linear infinite; }
@keyframes dir-lane { to { stroke-dashoffset: -86; } }

/* 2. Le tracé d'itinéraire apparaît sur la route */
.dir__route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dir.is-playing .dir__route { animation: dir-draw 650ms ease-out 650ms forwards; }
@keyframes dir-draw { to { stroke-dashoffset: 0; } }

/* 3. Dézoom : la route devient une carte */
.dir__map { opacity: 0; transform: scale(2.6); transform-origin: 50% 80%; }
.dir.is-map .dir__pov { animation: dir-away 900ms cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes dir-away { from { transform: scale(1.12); opacity: 1; } to { transform: scale(.4) translateY(30%); opacity: 0; } }
.dir.is-map .dir__map { animation: dir-zoomout 1000ms cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes dir-zoomout { to { transform: scale(1); opacity: 1; } }
.dir__route2 { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dir.is-map .dir__route2 { animation: dir-draw 700ms ease-out 350ms forwards; }
.dir__pin { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.4); }
.dir.is-map .dir__pin { animation: dir-pin 360ms cubic-bezier(.3, 1.4, .5, 1) 950ms forwards; }
@keyframes dir-pin { to { opacity: 1; transform: none; } }

/* Textes et bouton Passer */
.dir__label, .dir__dest, .dir__skip { position: absolute; z-index: 2; }
.dir__label {
  top: calc(var(--s5) + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--pn-black);
  color: var(--pn-cream);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dir__trait { width: 18px; height: 4px; border-radius: 99px; background: var(--pn-cream); }
.dir__dest {
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  left: var(--gutter);
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--pn-black);
  color: var(--pn-white);
  font-size: 14px;
  font-weight: 700;
  max-width: calc(100% - 2 * var(--gutter) - 128px);   /* jamais sous le bouton Passer */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 359px) { .dir__dest { font-size: 12.5px; } }
.dir__skip {
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  right: var(--gutter);
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--line-light);
  border-radius: 999px;
  background: var(--pn-black);
  color: var(--pn-cream);
  font: 700 13px/1 var(--font);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.dir__skip:hover, .dir__skip:focus-visible { color: var(--pn-white); border-color: var(--pn-cream); }

@media (prefers-reduced-motion: reduce) {
  .dir { display: none !important; }
}