/* ==============================================================
   MODALE DE BIENVENUE — « Jadis est en ligne »
   Proposition écrite le 01/10/2026, à placer dans assets/css/ et à relier
   dans index.html APRÈS styles.css.

   Objet : habille la fenêtre `lancement-modal` d'un décor de fête
   (serpentins qui se déroulent, cotillons qui tombent) et règle l'aspect
   de sa carte, de son bouton d'inscription et de son bouton « Plus tard ».
   Contexte : la fenêtre réutilise les classes `beta-modal*` de styles.css,
   écrites pour la fenêtre des retours de bêta ; ce fichier ne change aucune
   de ces règles, il ajoute les siennes sous la classe `bienvenue`, donc la
   fenêtre des retours garde exactement son aspect.
   Piste : le mouvement des cotillons et des serpentins passe par
   `transform` et `stroke-dashoffset`, qui ne forcent aucun recalcul de mise
   en page. Le halo du bouton anime `box-shadow` et ne se joue que trois fois.
   Les valeurs variables de chaque pièce (position, durée, couleur) sont
   posées par modale-bienvenue.js dans des variables CSS, parce que la
   politique de sécurité du site n'autorise aucun script en ligne.
   Limite : le rendu n'a pas été regardé dans un navigateur à la rédaction
   de ce fichier (voir NOTE.md, rubrique « Ce qui n'a pas été vérifié »).
   ============================================================== */

/* La fenêtre reste cachée tant que modale-bienvenue.js n'ajoute pas la
   classe `est-ouverte`. Sans JavaScript, elle ne s'affiche jamais. Le
   sélecteur à deux classes l'emporte sur `.beta-modal { display: none }`
   de styles.css sans avoir besoin de `!important`. */
.bienvenue.est-ouverte {
  display: flex;
}

/* ---------- La carte ---------- */

.bienvenue .bienvenue__carte {
  position: relative;            /* la place au-dessus des cotillons, qui la précèdent dans la page */
  max-width: 440px;
  max-height: 100%;
  overflow-y: auto;              /* un téléphone tenu en travers garde le bouton atteignable */
  padding: 34px 28px 22px;

  background: linear-gradient(168deg, #fefaf1 0%, #f5ecd5 100%);
  border: 3px double rgba(139, 69, 19, 0.5);
  box-shadow: 0 12px 44px rgba(20, 10, 6, 0.45);

  animation: bienvenue-entree 0.5s ease-out both;
}

/* Le texte de la conceptrice, tel qu'elle l'a donné, en machine à écrire
   comme le reste de la page. `text-wrap: balance` équilibre les lignes
   quand le navigateur le sait ; les autres coupent simplement. */
.bienvenue .bienvenue__texte {
  margin: 0 0 26px;
  font-family: var(--f-typewriter, 'Special Elite', 'Courier New', monospace);
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  font-weight: 400;
  line-height: 1.55;
  color: #2b1c14;
  text-wrap: balance;
}

/* ---------- Les deux boutons ---------- */

/* `.beta-modal__envoyer` est écrit pour un `<button>` ; ici il habille un
   lien. Le lien reçoit donc une mise en page de bouton, et son texte garde
   la couleur crème au survol, parce que la règle `a:hover` de styles.css
   passerait sinon le texte à l'encre sombre sur le fond rouge brique. */
.bienvenue a.beta-modal__envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  animation: bienvenue-halo 2.4s ease-out 1.2s 3;
}

.bienvenue a.beta-modal__envoyer:hover,
.bienvenue a.beta-modal__envoyer:focus-visible {
  background: #7a3126;
  color: #f5ecd5;
  transform: translateY(-1px);
}

/* Le bouton « Plus tard » d'origine est écrit à 70 % d'opacité, ce qui
   ramène son contraste sous 4,5. À pleine opacité, le brique #8b3a2e sur la
   crème #f5ecd5 donne environ 6,5. */
.bienvenue .beta-modal__fermer {
  opacity: 1;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bienvenue a:focus-visible,
.bienvenue button:focus-visible {
  outline: 3px solid #8b3a2e;
  outline-offset: 3px;
}

/* ---------- Le décor : serpentins et cotillons ---------- */

/* Couche posée sur tout l'écran, derrière la carte. Elle ne reçoit aucun
   clic, pour que le fond de la fenêtre reste cliquable et ferme la fenêtre. */
.bienvenue__decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Un serpentin est un trait ondulé suspendu au bord haut de l'écran.
   Il se déroule de haut en bas (le trait se dessine), puis se balance
   quelques fois autour de son point d'attache. */
.serpentin {
  position: absolute;
  top: 0;
  transform-origin: 50% 0;
  animation: bienvenue-balancier 3.2s ease-in-out 1.6s 6 alternate both;
}

.serpentin path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;           /* longueur ramenée à 1 par l'attribut pathLength */
  stroke-dashoffset: 0;          /* trait entièrement dessiné quand rien ne s'anime */
  animation: bienvenue-deroule 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--retard, 0s) backwards;
}

/* Un cotillon se compose de deux éléments : la pièce extérieure tombe,
   et son `::after` (le morceau de papier coloré) vacille pendant la chute,
   ce qui donne un mouvement irrégulier sans animer deux fois la même
   propriété sur le même élément. */
.cotillon {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: var(--l, 8px);
  height: var(--h, 14px);
  animation: bienvenue-chute var(--duree, 5s) linear var(--retard, 0s) both;
}

.cotillon::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--couleur, #ffd700);
  animation: bienvenue-vacille var(--vacille, 0.9s) ease-in-out infinite alternate;
}

.cotillon--rond::after {
  border-radius: 50%;
}

@keyframes bienvenue-entree {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes bienvenue-deroule {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes bienvenue-balancier {
  from { transform: rotate(-2.5deg); }
  to   { transform: rotate(2.5deg); }
}

@keyframes bienvenue-chute {
  from { transform: translate3d(0, -8vh, 0); }
  to   { transform: translate3d(var(--derive, 0px), 112vh, 0); }
}

@keyframes bienvenue-vacille {
  from { transform: rotate(0deg) rotateX(0deg); }
  to   { transform: rotate(var(--tour, 200deg)) rotateX(75deg); }
}

@keyframes bienvenue-halo {
  0%   { box-shadow: 0 0 0 0 rgba(139, 58, 46, 0.45); }
  100% { box-shadow: 0 0 0 16px rgba(139, 58, 46, 0); }
}

/* ---------- Demande de mouvement réduit ---------- */

/* Une personne qui a demandé moins d'animations dans son système ne voit
   aucun mouvement : ni entrée de la carte, ni halo, ni balancement. Les
   serpentins restent dessinés, immobiles, comme décor fixe. Les cotillons
   ne sont pas créés du tout par le script dans ce cas ; la règle `display`
   ci-dessous couvre le cas où la demande est posée après l'ouverture. */
@media (prefers-reduced-motion: reduce) {
  .bienvenue .bienvenue__carte,
  .bienvenue a.beta-modal__envoyer,
  .serpentin,
  .serpentin path,
  .cotillon,
  .cotillon::after {
    animation: none;
  }

  .bienvenue a.beta-modal__envoyer {
    transition: none;
  }

  .bienvenue a.beta-modal__envoyer:hover,
  .bienvenue a.beta-modal__envoyer:focus-visible {
    transform: none;
  }

  .cotillon {
    display: none;
  }
}