<dialog class="popup" id="popup" aria-labelledby="popupTitle" aria-describedby="popupText" open="">
    <article class="popup__inner">
        <button type="button" class="popup__close" data-popup-close="" aria-label="Fermer la fenêtre">
            
                
            
        </button>

        <header class="popup__header">
            <h2 class="popup__title" id="popupTitle">Inscription à nos séances d'infos 2027 !</h2>
        </header>

        <p class="popup__text" id="popupText">Envie d'en savoir plus sur l'accueil familial et le parrainage, inclusif ou non? Inscrivez vous via ce formulaire à une séance d'information près de chez vous, en janvier 2027. La présentation sera suivie d'un moment d'échange avec des professionnels du secteur, qui seront présents pour répondre à toutes vos questions. Entrée gratuite et sans engagement!</p>

        <figure class="popup__figure">
            <img loading="lazy" class="popup__image" src="assets/img/qr-code.png" alt="Inscription à nos séances d&apos;infos 2027 !" width="200" height="200">
        </figure>

        <footer class="popup__footer">
            <a class="popup__button" href="https://forms.gle/FjffkPPZ6jsogwaQA" target="_blank" rel="noopener noreferrer">
                Inscription à nos séances d'infos 2027 !                <span class="popup__sr-only">(s'ouvre dans un nouvel onglet)</span>
            </a>
        </footer>
    </article>
</dialog>

$popup-qr-size: 200px;
$popup-max-width: 420px;

.popup {
  padding: 0;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  width: $popup-max-width;
  background: transparent;
  
  color: var(--color-text);
  border: none;
  overflow: visible;

  &::backdrop {
    background: rgba(61, 58, 53, 0.6);
  }

  &[open] {
    -webkit-animation: popup-in 220ms ease-out;
    animation: popup-in 220ms ease-out;
  }

  &[open]::backdrop {
    -webkit-animation: popup-fade 220ms ease-out;
    animation: popup-fade 220ms ease-out;
  }

  &__inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    padding: 40px 28px 28px;
    max-height: calc(100vh - 32px);
    
    background: var(--color-surface);
    text-align: center;
    border-radius: $radius-lg;
    -webkit-box-shadow: $shadow-md;
    box-shadow: $shadow-md;
    overflow-y: auto;
  }

  &__close {
    position: absolute;
    top: 12px;
    right: 12px;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    padding: 0;
    width: 44px;
    height: 44px;
    color: var(--color-text);

    border: none;
    border-radius: 50%;
    background: var(--color-surface-alt);
    cursor: pointer;

    -webkit-transition: background-color $transition, color $transition;
    transition: background-color $transition, color $transition;

    &:hover,
    &:focus-visible {
      background: var(--color-accent);
      color: $blanc;
    }
  }

  &__close-icon {
    display: block;
    pointer-events: none;
  }

  &__header {
    padding: 0 40px;
  }

  &__figure {
    margin: 0;
    padding: 12px;
    max-width: 100%;
    width: $popup-qr-size;
    background: $blanc;
    
    border: 1px solid var(--color-border);
    border-radius: $radius-md;
  }

  &__image {
    display: block;
    width: 100%;
    height: auto;

    aspect-ratio: 1 / 1;
    -o-object-fit: contain;
    object-fit: contain;
    image-rendering: pixelated;
  }

  &__sr-only {
    position: absolute;
    margin: -1px;
    padding: 0;
    width: 1px;
    height: 1px;

    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

.has-popup-open {
  overflow: hidden;
}

@-webkit-keyframes popup-in {
  from { opacity: 0; -webkit-transform: translateY(12px) scale(0.98); transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@keyframes popup-in {
  from { opacity: 0; -webkit-transform: translateY(12px) scale(0.98); transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; -webkit-transform: none; transform: none; }
}

@-webkit-keyframes popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes popup-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .popup[open],
  .popup[open]::backdrop {
    animation: none;
    -webkit-animation: none;
  }

  .popup__close {
    transition: none;
    -webkit-transition: none;
  }
}

@media (max-width: 540px) {
  .popup__inner {
    padding: 36px 18px 22px;
  }
}

.popup__text {
  color: grey;
  font-size: 0.85em;
  text-align: left;
}

/* POPUP
 * S'appuie sur l'élément natif 
 ouvert avec showModal(), qui gère
 * nativement : le piège du focus, la touche Échap, l'arrière-plan rendu
 * inerte pour les lecteurs d'écran et le retour du focus à la fermeture.
 *
 * Fermeture : croix, clic sur le fond (backdrop) ou touche Échap.
 */
(function () {
  // const STORAGE_KEY = "popupClosed";

  const popup = document.getElementById("popup");
  if (!popup || typeof popup.showModal !== "function") return;

  // Déjà fermée pendant cette session de navigation : on ne la réaffiche pas.
  // function wasClosed() {
  //   try { return sessionStorage.getItem(STORAGE_KEY) === "1"; }
  //   catch (e) { return false; }
  // }

  // function rememberClosed() {
  //   try { sessionStorage.setItem(STORAGE_KEY, "1"); }
  //   catch (e) { /* stockage indisponible (navigation privée…) : on ignore */ }
  // }

  function openPopup() {
    popup.showModal();
    document.documentElement.classList.add("has-popup-open");
  }

  function closePopup() {
    if (popup.open) popup.close();
  }

  // Bouton(s) de fermeture (la croix)
  popup.querySelectorAll("[data-popup-close]").forEach((btn) => {
    btn.addEventListener("click", closePopup);
  });

  // Clic sur le fond : le padding est sur .popup__inner, donc seul un clic
  // sur le ::backdrop a pour cible le 
 lui-même.
  popup.addEventListener("click", (e) => {
    if (e.target === popup) closePopup();
  });

  // Déclenché pour toutes les fermetures, y compris la touche Échap.
  popup.addEventListener("close", () => {
    document.documentElement.classList.remove("has-popup-open");
    rememberClosed();
  });

  // document.addEventListener("DOMContentLoaded", () => {
  //   if (!wasClosed()) openPopup();
  // });

  openPopup();
})();

/* -|--|--|--|--|--|--|--|--|--|--|--|--|--|--|- */
$popup_enabled      = true;
$popup_title        = "Inscription à nos séances d'infos 2027 !";
$popup_text         = "Envie d'en savoir plus sur l'accueil familial et le parrainage, inclusif ou non? Inscrivez vous via ce formulaire à une séance d'information près de chez vous, en janvier 2027. La présentation sera suivie d'un moment d'échange avec des professionnels du secteur, qui seront présents pour répondre à toutes vos questions. Entrée gratuite et sans engagement!";
$popup_image_src    = "assets/img/qr-code.png";
$popup_image_alt    = $popup_title;
$popup_button_label = $popup_title;
$popup_button_url   = "https://forms.gle/FjffkPPZ6jsogwaQA";
$popup_close_label  = "Fermer la fenêtre";
/* -|--|--|--|--|--|--|--|--|--|--|--|--|--|--|- */

if (!$popup_enabled) {
    return;
}

$e = static fn($value) => htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
?>