/* ============================================================
   PicnicIntro — styles
   L'intro n'est visible que si <html> porte la classe
   .pn-intro-on (posée par le petit script du <head>).
   Sans JavaScript : jamais affichée, le menu est accessible.
   ============================================================ */

.picnic-intro {
  --pn-black: #000000;
  --pn-cream: #FAF5E9;
  --pn-white: #FFFFFF;
  --pn-fade: 480ms;

  display: none;
}

html.pn-intro-on .picnic-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--pn-black);
  overflow: hidden;            /* aucun débordement horizontal */
  contain: strict;
  opacity: 1;
  transition: opacity var(--pn-fade) cubic-bezier(.4, 0, .2, 1);
  /* Sécurité CSS : même si le script principal ne se charge
     pas, l'intro disparaît d'elle-même après 5 s. */
  animation: pn-failsafe 1ms linear 5s forwards;
}

html.pn-intro-on .picnic-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

@keyframes pn-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- scène ---------- */
.pn-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pn-item,
.pn-flash,
.pn-ring,
.pn-dot,
.pn-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.pn-item { opacity: 0; }
.pn-item svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Éclat crème Pic'Nic : un dégradé radial, pas de filtre flou */
.pn-flash {
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .95) 0%,
    rgba(250, 245, 233, .85) 18%,
    rgba(250, 245, 233, .3) 42%,
    rgba(250, 245, 233, 0) 68%);
}

.pn-ring {
  border-radius: 50%;
  border: 2px solid var(--pn-cream);
  opacity: 0;
}

.pn-dot { border-radius: 50%; }
.pn-spark { border-radius: 999px; }

/* ---------- logo officiel ----------
   Affiché tel quel : pas de filtre, pas d'ombre, pas de halo,
   proportions verrouillées (height:auto). */
.pn-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(min(260px, 86vw), 76vw, 640px);
  margin: 0;
  translate: -50% -50%;
  opacity: 0;
  pointer-events: none;
}

.pn-logo picture,
.pn-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- bouton « Passer » ---------- */
.pn-skip {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2;
  min-height: 44px;            /* cible tactile confortable */
  padding: 10px 18px;
  border: 1px solid rgba(250, 245, 233, .35);
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: var(--pn-cream);
  font: 700 13px/1 "Archivo", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
}

.pn-skip:hover {
  color: var(--pn-white);
  border-color: var(--pn-cream);
}

.pn-skip:focus-visible {
  outline: 2px solid var(--pn-cream);
  outline-offset: 3px;
  color: var(--pn-white);
}

.pn-skip-key {
  display: none;
  margin-left: 8px;
  opacity: .55;
  font-weight: 500;
  letter-spacing: .06em;
}

@media (hover: hover) and (pointer: fine) {
  .pn-skip-key { display: inline; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .pn-stage { display: none; }
}