/* ==========================================================================
   Magic Parc - « Bientôt disponible »

   Habillage de la fenêtre construite par assets/js/bientot-disponible.js pour
   les boutons dont l'adresse n'a pas encore été fournie (voir
   inc/bientot-disponible.php). Composant GLOBAL : il peut apparaître sur
   n'importe quelle page, ses sélecteurs ne sont donc scopés à aucun modèle,
   mais tous partent de .fp-bientot-* et ne touchent rien d'autre.

   Mobile d'abord. Couleurs uniquement en var(--fp-*).
   ========================================================================== */

.fp-bientot-dialog {
  width: min(100% - 20px, 520px);
  max-width: none;
  max-height: min(90vh, 640px);
  padding: 0;
  border: 0;
  border-radius: var(--fp-radius-lg);
  background: var(--fp-paper);
  color: var(--fp-ink);
  box-shadow: var(--fp-shadow-lg);
  overflow: hidden;
}
.fp-bientot-dialog[open] { display: flex; }

/* Le fond assombri. Deux déclarations volontairement : ::backdrop n'hérite les
   propriétés personnalisées de son élément d'origine que depuis Chrome 122,
   Firefox 118 et Safari 17.4. Sur un navigateur plus ancien, var(--fp-dark)
   serait irrésolvable et le voile disparaîtrait purement et simplement ; la
   première ligne, neutre, le garantit dans tous les cas. */
.fp-bientot-dialog::backdrop {
  background: rgba(0, 0, 0, .6);
  background: color-mix(in srgb, var(--fp-dark) 78%, transparent);
}

.fp-bientot-boite {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: min(90vh, 640px);
}

.fp-bientot-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--fp-line);
}
.fp-bientot-titre {
  margin: 0;
  font-family: var(--fp-font-heading);
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  line-height: 1.1;
  color: var(--fp-ink);
}
/* Le titre reçoit le focus à l'ouverture (tabindex -1) : le repère doit rester
   visible, sans quoi personne ne sait où il vient d'atterrir. */
.fp-bientot-titre:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 4px;
}

.fp-bientot-fermer {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--fp-line);
  border-radius: 50%;
  background: var(--fp-paper);
  color: var(--fp-ink);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.fp-bientot-fermer:hover {
  background: var(--fp-secondary);
  color: var(--fp-paper);
  border-color: transparent;
}
.fp-bientot-fermer:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Défilement INTERNE : sur un petit écran en paysage, la fenêtre peut dépasser
   la hauteur disponible. Rien n'est jamais coupé, c'est le corps qui défile,
   pas la page derrière. */
.fp-bientot-corps {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 24px;
}

.fp-bientot-contexte {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--fp-ink);
}
.fp-bientot-contexte-label { color: var(--fp-ink-soft); }
.fp-bientot-contexte-valeur { font-weight: 700; }

.fp-bientot-texte {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fp-ink);
}

.fp-bientot-canaux {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-bientot-canal {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fp-bientot-canal-label {
  font-size: .85rem;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fp-ink-soft);
}
/* Cible tactile confortable : le lien occupe toute la largeur et tient ses
   44 px de haut, ce qu'un simple texte de coordonnée n'atteindrait pas. */
.fp-bientot-canal-lien {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fp-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fp-bientot-canal-lien:hover { color: var(--fp-primary); }
.fp-bientot-canal-lien:focus-visible {
  outline: 2px solid var(--fp-primary);
  outline-offset: 3px;
  border-radius: var(--fp-radius-sm);
}

.fp-bientot-actions { margin: 20px 0 0; }
.fp-bientot-contact:focus-visible {
  outline: 2px solid var(--fp-secondary-dark);
  outline-offset: 3px;
}

.fp-bientot-repli {
  margin: 18px 0 0;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fp-ink);
}

/* Le fond de page ne défile pas derrière la fenêtre. La classe est posée sur
   <html> par le script. */
html.fp-bientot-fige { overflow: hidden; }

/* Animation d'ouverture, désactivée dès que le système demande moins de
   mouvement. */
@media (prefers-reduced-motion: no-preference) {
  .fp-bientot-dialog[open] {
    animation: fp-bientot-entree .22s var(--fp-anim-ease, ease-out);
  }
  @keyframes fp-bientot-entree {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

@media (min-width: 560px) {
  .fp-bientot-entete { padding: 20px 20px 14px 24px; }
  .fp-bientot-corps { padding: 20px 24px 28px; }
}