/* ==========================================================================
   OFFRE « BOWLING À GOGO » : fenêtre d'accueil et pastille de rappel.
   Marino, 2026-09-17. Voir inc/offre-bowling.php pour le pourquoi et les
   textes, assets/js/offre-bowling.js pour l'ouverture et la pastille.

   Feuille de COMPOSANT, chargée seulement sur template-home.php, après
   home.css (même patron de dépendance que horloge.css et tarifs-kids.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA FENÊTRE. Photo des quilles en fond PLEIN (choix de Marino), voile sombre
   par-dessus pour que le texte blanc tienne quelle que soit la photo, et tout
   le contenu centré. Le <dialog> natif porte lui-même le cadre : pas de
   conteneur intermédiaire, pas de position fixe à la main.
   -------------------------------------------------------------------------- */
.fp-gogo {
  /* POSITION FIXE, ET SURTOUT PAS relative (Marino, 2026-09-17 : « ça nous
     ramène en haut quand on clique »). Un <dialog> modal est positionné en
     fixed par le navigateur ; le repasser en relative le remettait dans le
     flux, tout en bas du document, et l'ouvrir faisait sauter la page jusqu'à
     lui. Les marges automatiques le recentrent, exactement comme le fait le
     navigateur par défaut. */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100dvh - 40px);
  width: min(760px, 92vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--fp-radius-lg);
  overflow: hidden;
  background: var(--fp-secondary);
  color: var(--fp-white);
  box-shadow: var(--fp-shadow-lg);
}
.fp-gogo::backdrop {
  background: color-mix(in srgb, var(--fp-ink) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.fp-gogo-photo,
.fp-gogo-voile {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fp-gogo-photo {
  background-size: cover;
  background-position: center;
}
/* Voile : dense en bas, là où vivent le texte et le bouton, plus léger en haut
   pour que les quilles restent reconnaissables. Paliers mesurés sur le pire
   cas, une photo entièrement claire : le texte blanc y tient au-delà de 7:1. */
.fp-gogo-voile {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--fp-ink) 45%, transparent) 0%,
    color-mix(in srgb, var(--fp-ink) 72%, transparent) 55%,
    color-mix(in srgb, var(--fp-ink) 86%, transparent) 100%
  );
}
.fp-gogo-corps {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 7vw, 76px) clamp(22px, 5vw, 64px) clamp(32px, 5vw, 56px);
  text-align: center;
}
.fp-gogo-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px 4px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--fp-white) 16%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--fp-white) 40%, transparent);
  font-family: var(--fp-font-heading);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.fp-gogo-titre {
  margin: 0 0 14px;
  font-family: var(--fp-font-heading);
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.02;
  text-wrap: balance;
}
.fp-gogo-texte {
  margin: 0 auto 26px;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--fp-white) 88%, transparent);
}
.fp-gogo-action { margin: 0; }
/* Croix : verre dépoli, en haut à droite, au-dessus des deux calques. */
.fp-gogo-fermer {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fp-white) 40%, transparent);
  background: color-mix(in srgb, var(--fp-white) 16%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  color: var(--fp-white);
  cursor: pointer;
  /* Deux appuis rapprochés passent pour un zoom sur téléphone : même parade
     que les flèches des carrousels (main.css). */
  touch-action: manipulation;
  transition: background .25s ease, transform .25s ease;
}
.fp-gogo-fermer:hover { background: color-mix(in srgb, var(--fp-white) 30%, transparent); }
.fp-gogo-fermer:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }

/* Entrée en scène : le <dialog> apparaît en fondu monté. Classe posée par le
   script à l'ouverture, pour que l'animation ne joue qu'une fois. */
.fp-gogo[open] { animation: fp-gogo-entree .45s var(--fp-anim-ease) both; }
@keyframes fp-gogo-entree {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   LA PASTILLE DE RAPPEL, collée au bord gauche, texte à la verticale (patron
   de la référence donnée par Marino). Elle n'existe qu'une fois révélée par le
   script : l'attribut hidden du rendu la tient hors du flux jusque-là.
   -------------------------------------------------------------------------- */
.fp-gogo-pastille {
  position: fixed;
  left: 0;
  top: 50%;
  z-index: 880;
  transform: translate(-100%, -50%);
  padding: 16px 10px;
  border: 0;
  border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
  background: var(--fp-secondary);
  color: var(--fp-white);
  cursor: pointer;
  box-shadow: var(--fp-shadow);
  touch-action: manipulation;
  /* Texte à la verticale, LE BAS DES LETTRES VERS LE MILIEU DE LA PAGE
     (Marino, 2026-09-17, second passage) : on lit donc de bas en haut, comme
     sur sa référence. writing-mode seul donne l'inverse (lettres couchées vers
     la droite), d'où le demi-tour posé sur le texte juste en dessous. */
  writing-mode: vertical-rl;
  transform-origin: left center;
  font-family: var(--fp-font-heading);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .45s var(--fp-anim-ease), background .25s ease;
}
.fp-gogo-pastille-txt { transform: rotate(180deg); }
.fp-gogo-pastille.is-visible { transform: translate(0, -50%); }
.fp-gogo-pastille:hover { background: var(--fp-primary); }
/* Au survol, la pastille ne BOUGE PLUS (Marino, 2026-09-17) : elle se
   décalait de 4px vers la droite et laissait un vide entre elle et le bord de
   l'écran. Seule sa couleur répond maintenant. */
.fp-gogo-pastille:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }

/* Téléphone : la pastille descend d'un cran (la barre d'action flottante occupe
   le bas de l'écran) et se resserre, pour ne pas manger la largeur de lecture. */
@media (max-width: 720px) {
  /* PLUS GRANDE SUR TÉLÉPHONE (Marino, 2026-09-17) : à 12px, la pastille se
     perdait contre le bord. Texte à 15px et pastille plus épaisse, soit une
     zone de touche bien au-delà des 44px recommandés dans sa largeur utile. */
  .fp-gogo-pastille {
    top: 42%;
    padding: 20px 12px;
    font-size: 15px;
  }
  .fp-gogo-fermer { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-gogo[open] { animation: none; }
  .fp-gogo-pastille { transition: none; }
}