/* ==========================================================================
   « OFFREZ MAGIC PARC » : carte cadeau, pastille et fenêtre de l'accueil,
   bannière du menu mobile. Marino, 2026-11-02. Voir inc/bons-cadeaux.php.

   Chargée sur tout le site dès que l'adresse de billetterie est renseignée
   (la bannière vit dans le menu de chaque page).
   ========================================================================== */

/* --------------------------------------------------------------------------
   LA CARTE CADEAU. Format carte bancaire, teal du parc, motif topographique,
   ruban et nœud accent, logo blanc, reflet qui passe. Tout est dimensionné en
   unités du conteneur (cqi) : la même carte sert en grand dans la fenêtre et
   en vignette dans la bannière.
   -------------------------------------------------------------------------- */
.fp-cc {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.586;
  container-type: inline-size;
  border-radius: 7% / 11%;
  background:
    radial-gradient(120% 90% at 12% 8%, color-mix(in srgb, var(--fp-primary) 85%, transparent), transparent 62%),
    linear-gradient(145deg, var(--fp-secondary), var(--fp-dark));
  color: var(--fp-white);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fp-white) 18%, transparent),
    0 18px 40px -14px color-mix(in srgb, var(--fp-ink) 70%, transparent);
}
/* Carte du pied de page, à la place du pictogramme de la case « Offrir
   Magic Parc » (footer-main.php). Même encombrement que l'ancien rond. */
.fp-footer-action-carte {
  position: relative;
  z-index: 1;
  display: block;
  width: 96px;
  margin: 2px 0 18px 4px;
  transform: rotate(-6deg);
}
/* Vignette de la bannière : ombre à l'échelle. */
.fp-cc--mini { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fp-white) 22%, transparent), 0 6px 14px -4px color-mix(in srgb, var(--fp-ink) 70%, transparent); }
.fp-cc::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../img/em-topo-traits.svg) 30% 40% / 170% auto no-repeat;
  opacity: .32;
}
/* Ruban satiné en écharpe sur le coin supérieur droit (Marino, 2026-11-02 :
   plus de croix de ruban). Repère en cqi : la carte fait 100 × 63 cqi.
   Pivot au milieu du bord gauche (43,4 ; -7,9) : son coin le plus bas
   reste AU-DESSUS du bord haut de la carte, l'autre bout finit au-delà du
   bord droit. Les deux bouts sont donc coupés par la carte, jamais visibles
   dedans. Même ligne qu'avant, le nœud ne bouge pas. */
.fp-cc-ruban {
  position: absolute;
  left: 43.4cqi;
  top: -12.9cqi;
  width: 96cqi;
  height: 10cqi;
  transform-origin: 0 50%;
  transform: rotate(38deg);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--fp-accent) 60%, var(--fp-dark)) 0 6%,
    var(--fp-cream) 6% 14%,
    var(--fp-white) 40%,
    color-mix(in srgb, var(--fp-cream) 70%, var(--fp-accent)) 72%,
    var(--fp-cream) 86% 94%,
    color-mix(in srgb, var(--fp-accent) 60%, var(--fp-dark)) 94%);
  box-shadow: 0 1.2cqi 2.4cqi color-mix(in srgb, var(--fp-ink) 40%, transparent);
}
/* Nœud posé au milieu de l'écharpe. */
.fp-cc-noeud {
  position: absolute;
  left: 79.6cqi;
  top: 15.5cqi;
  width: 34cqi;
  transform: translate(-50%, -46%) rotate(8deg);
  overflow: visible;
  filter: drop-shadow(0 1cqi 1.4cqi color-mix(in srgb, var(--fp-ink) 50%, transparent));
}
.fp-cc-noeud-boucle { fill: var(--fp-white); stroke: color-mix(in srgb, var(--fp-accent) 70%, var(--fp-dark)); stroke-width: 1.2; }
.fp-cc-noeud-pan { fill: color-mix(in srgb, var(--fp-cream) 75%, var(--fp-accent)); stroke: color-mix(in srgb, var(--fp-accent) 70%, var(--fp-dark)); stroke-width: 1.2; }
.fp-cc-noeud-pli { fill: none; stroke: color-mix(in srgb, var(--fp-accent) 80%, var(--fp-white)); stroke-width: 2; stroke-linecap: round; }
.fp-cc-noeud-coeur { fill: color-mix(in srgb, var(--fp-cream) 60%, var(--fp-accent)); stroke: color-mix(in srgb, var(--fp-accent) 70%, var(--fp-dark)); stroke-width: 1.2; }
/* « Carte cadeau » en casse normale (Marino, 2026-11-02). */
.fp-cc-label {
  position: absolute;
  left: 7%;
  top: 10%;
  font-family: var(--fp-font-body);
  font-weight: 500;
  font-size: 6.4cqi;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: none;
  opacity: .92;
}
.fp-cc-logo {
  position: absolute;
  left: 7%;
  bottom: 10%;
  width: 46%;
  height: auto;
}
.fp-cc-logo-texte { font-family: var(--fp-font-heading); font-size: 9cqi; line-height: 1; }
/* Reflet : une bande claire traverse la carte de temps en temps. */
.fp-cc-reflet {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg,
    transparent 42%,
    color-mix(in srgb, var(--fp-white) 26%, transparent) 50%,
    transparent 58%);
  transform: translateX(-60%);
  animation: fp-cc-reflet 6s var(--fp-anim-ease) 1.2s infinite;
  pointer-events: none;
}
@keyframes fp-cc-reflet {
  0%        { transform: translateX(-60%); }
  28%, 100% { transform: translateX(60%); }
}

/* --------------------------------------------------------------------------
   PASTILLE DROITE, le miroir de celle des jeudis à gogo (offre-bowling.css) :
   même hauteur, même taille, mêmes couleurs, collée au bord droit. Ici le texte se lit de
   haut en bas, le bas des lettres tourné vers le milieu de la page, comme sa
   voisine de gauche. Le cadeau reste debout (text-orientation).
   -------------------------------------------------------------------------- */
.fp-offrir-pastille {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 880;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(100%, -50%);
  padding: 16px 10px;
  border: 0;
  border-radius: var(--fp-radius) 0 0 var(--fp-radius);
  background: var(--fp-secondary);
  color: var(--fp-white);
  cursor: pointer;
  box-shadow: var(--fp-shadow);
  touch-action: manipulation;
  writing-mode: vertical-rl;
  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;
}
/* Le cadeau sort du mode vertical : boîte horizontale ordinaire, centrée
   pile sous le texte (un glyphe debout en vertical-rl se décalait).
   Jamais de largeur en % ici : en flux orthogonal, elle se résoudrait sur
   l'écran et étirerait la pastille sur toute la largeur. Le centrage vient
   d'align-items sur la pastille. */
.fp-offrir-pastille-ico { writing-mode: horizontal-tb; font-size: 1.15em; line-height: 1; letter-spacing: 0; }
/* display: flex ci-dessus annulerait l'attribut hidden du rendu. */
.fp-offrir-pastille[hidden] { display: none; }
.fp-offrir-pastille.is-visible { transform: translate(0, -50%); }
.fp-offrir-pastille:hover { background: var(--fp-primary); }
.fp-offrir-pastille:focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   LA FENÊTRE, sur fond BLANC (Marino, 2026-11-02) : la carte teal ressort.
   Même cadre que celle des jeudis à gogo (dialog natif en fixed), carte
   inclinée qui flotte à gauche, texte à droite.
   -------------------------------------------------------------------------- */
.fp-offrir {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  max-height: calc(100dvh - 40px);
  width: min(820px, 94vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--fp-radius-lg);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(55% 75% at 24% 52%, var(--fp-cream), transparent 72%),
    var(--fp-white);
  color: var(--fp-ink);
  box-shadow: var(--fp-shadow-lg);
}
.fp-offrir::backdrop {
  background: color-mix(in srgb, var(--fp-ink) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.fp-offrir[open] { animation: fp-offrir-entree .45s var(--fp-anim-ease) both; }
@keyframes fp-offrir-entree {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.fp-offrir-corps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 44px);
  padding: clamp(52px, 6vw, 60px) clamp(22px, 4vw, 44px) clamp(30px, 4vw, 44px);
}
.fp-offrir-scene { padding: 12px 4px; }
.fp-offrir-scene .fp-cc {
  transform: rotate(-7deg);
  animation: fp-offrir-flotte 4.5s ease-in-out infinite alternate;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--fp-white) 18%, transparent),
    0 26px 44px -16px color-mix(in srgb, var(--fp-dark) 55%, transparent);
}
@keyframes fp-offrir-flotte {
  from { transform: rotate(-7deg) translateY(0); }
  to   { transform: rotate(-5deg) translateY(-10px); }
}
.fp-offrir-texte p { margin: 0 0 10px; line-height: 1.5; color: color-mix(in srgb, var(--fp-ink) 78%, transparent); }
.fp-offrir-texte .fp-offrir-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px 4px;
  border-radius: 20px;
  background: var(--fp-cream);
  border: 1px solid var(--fp-line);
  font-family: var(--fp-font-heading);
  font-size: 14px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-primary);
}
/* Une seule ligne, cadeau compris (Marino, 2026-11-02). */
.fp-offrir-titre {
  margin: 0 0 14px;
  white-space: nowrap;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.02;
  color: var(--fp-secondary);
}
.fp-offrir-texte .fp-offrir-action { margin: 18px 0 0; }
.fp-offrir-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 var(--fp-line);
  background: var(--fp-cream);
  color: var(--fp-secondary);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .25s ease;
}
.fp-offrir-fermer:hover { border-color: var(--fp-primary); }
.fp-offrir-fermer:focus-visible,
.fp-offrir-lien:focus-visible { outline: 3px solid var(--fp-primary); outline-offset: 3px; }

@media (max-width: 720px) {
  /* Même position et même taille que la pastille du jeudi sur téléphone. */
  .fp-offrir-pastille {
    top: 42%;
    padding: 20px 12px;
    font-size: 15px;
  }
  .fp-offrir-corps {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 46px 18px 24px;
    text-align: center;
  }
  .fp-offrir-scene { width: min(72%, 280px); margin: 0 auto; }
  .fp-offrir-titre { font-size: clamp(1.7rem, 8vw, 2rem); }
  .fp-offrir-fermer { width: 40px; height: 40px; }
}

/* --------------------------------------------------------------------------
   BANNIÈRE DU MENU MOBILE, au pied du niveau racine, au-dessus de la rangée
   réseaux + langue. Toute la bannière est le lien. N'existe que sous 1024 px,
   comme le reste du pied du panneau (main.css).
   -------------------------------------------------------------------------- */
.fp-nav-offrir { display: none; }
@media (max-width: 1024px) {
  .fp-nav .fp-nav-menu .fp-nav-offrir {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 var(--fp-nav-gouttiere-tablette, var(--fp-gutter-mobile)) 12px;
    min-height: 74px;
    padding: 10px 12px 10px 14px;
    border-radius: var(--fp-radius);
    background:
      radial-gradient(80% 140% at 10% 50%, color-mix(in srgb, var(--fp-primary) 80%, transparent), transparent 70%),
      linear-gradient(120deg, var(--fp-secondary), var(--fp-dark));
    color: var(--fp-white);
    text-decoration: none;
    box-shadow: var(--fp-shadow);
    opacity: 0; transform: translateY(10px);
    transition: opacity .2s var(--fp-anim-ease), transform .2s var(--fp-anim-ease);
  }
  .fp-nav .fp-nav-menu.is-open .fp-nav-offrir {
    opacity: 1; transform: none;
    transition: opacity .34s var(--fp-anim-ease) .33s, transform .34s var(--fp-anim-ease) .33s;
  }
  /* Sans actions à montrer, c'est la bannière qui pousse le pied du panneau
     en bas (même relais que la rangée des réseaux, main.css). Règle seule :
     elle porte un :has. */
  .fp-nav .fp-nav-menu .fp-nav-actions:not(:has(a)) + .fp-nav-offrir { margin-top: auto; }
  /* La carte déborde vers le haut, légèrement inclinée. */
  .fp-nav-offrir-visuel {
    flex: none;
    width: 84px;
    margin: -22px 0 -6px;
    transform: rotate(-8deg);
    transition: transform .3s var(--fp-anim-ease);
  }
  .fp-nav-offrir:hover .fp-nav-offrir-visuel,
  .fp-nav-offrir:focus-visible .fp-nav-offrir-visuel { transform: rotate(-3deg) translateY(-3px); }
  .fp-nav-offrir-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  /* Une seule ligne, cadeau compris : la taille suit la largeur de l'écran. */
  .fp-nav-offrir-titre {
    white-space: nowrap;
    font-family: var(--fp-font-heading);
    font-size: clamp(18px, 5.4vw, 22px);
    line-height: 1;
    letter-spacing: .02em;
  }
  .fp-nav-offrir-sous { white-space: nowrap; font-size: clamp(.74rem, 3.4vw, .84rem); color: color-mix(in srgb, var(--fp-white) 85%, transparent); }
  .fp-nav-offrir-fleche {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--fp-accent);
    color: var(--fp-dark);
  }
  .fp-nav-offrir-fleche svg { width: 18px; height: 18px; }
  .fp-nav .fp-nav-menu .fp-nav-offrir:focus-visible { outline: 3px solid var(--fp-primary); outline-offset: 3px; }
}

/* PETITS ÉCRANS (2026-11-02) : à 360 × 640, la bannière poussait la rangée
   réseaux + langue sous le bas de l'écran et le panneau défilait. Sur un
   écran court, bannière compacte sur une ligne (sans sous-titre, le titre et
   la flèche suffisent) et rangée du bas resserrée : tout tient sans défiler.
   Sous 360 px de large, le sous-titre ne tient plus non plus. */
@media (max-width: 1024px) and (max-height: 700px), (max-width: 359px) {
  .fp-nav-offrir-sous { display: none; }
  .fp-nav .fp-nav-menu .fp-nav-offrir { min-height: 56px; padding-top: 8px; padding-bottom: 8px; margin-bottom: 8px; }
  .fp-nav-offrir-visuel { width: 70px; margin: -16px 0 -4px; }
  .fp-nav-offrir-fleche { width: 30px; height: 30px; }
}
@media (max-width: 1024px) and (max-height: 700px) {
  .fp-nav .fp-nav-menu .fp-nav-social { padding-top: 8px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-cc-reflet { animation: none; opacity: 0; }
  .fp-offrir[open],
  .fp-offrir-scene .fp-cc { animation: none; }
  .fp-offrir-pastille,
  .fp-nav-offrir-visuel { transition: none; }
  .fp-nav .fp-nav-menu .fp-nav-offrir,
  .fp-nav .fp-nav-menu.is-open .fp-nav-offrir { opacity: 1; transform: none; transition: none; }
}