/* LA POP-UP D'ACCUEIL (2026-09-14).
 *
 * Demande du fondateur : « une petite pop-up qui lui resume vraiment rapidement
 * l'espace de l'application, tres user-friendly, avec des images ».
 *
 * /!\ CETTE FEUILLE NE POSE QUE LA MISE EN PAGE. La surface, le rayon et
 * l'ombre viennent de `.verre` dans `charte.css`, comme pour le guide : deux
 * dessins de fenetre dans la meme application finiraient par ne plus se
 * ressembler.
 *
 * /!\ **`dialog.` DEVANT, ET CE N'EST PAS DU ZELE.** `charte.css` declare
 * `dialog.verre { width: min(460px, …) }`, qui compte une classe ET un
 * element : `.accueil-fenetre` seul PERD l'egalite de specificite, et la
 * fenetre s'ouvre a 460 px avec les captures reduites a une timbre-poste.
 * Le guide a paye exactement cette mesure le 2026-09-10.
 */

dialog.accueil-fenetre {
  /* « Une PETITE pop-up » : nettement plus etroite que le guide (1060 px), et
     calee sur la proportion des captures pour qu'aucune ne soit rognee. */
  width: min(820px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;                    /* chaque etage pose son propre espacement */
  border: 0;
  overflow: hidden;              /* les coins arrondis rognent les etages */
  color: var(--foreground);
  /* /!\ **UNE SURFACE OPAQUE, contrairement au reste de `.verre`.** Le verre
     est dessine pour une fenetre de confirmation de trois lignes ; a 55 %
     d'opacite, l'ecran derriere transparait sous les captures et on ne sait
     plus laquelle des deux images on regarde. Meme arbitrage que le guide. */
  background: var(--card, rgb(18, 20, 29));
  /* /!\ `display: flex` NE DOIT PAS s'appliquer a un dialog FERME : le
     navigateur cache un `<dialog>` sans `open` par `display: none`, et une
     regle de disposition ecrite ici le rendrait VISIBLE en permanence. On ne
     dispose donc que la variante ouverte. */
}
dialog.accueil-fenetre[open] { display: flex; flex-direction: column; }
dialog.accueil-fenetre::backdrop { background: rgba(5, 6, 10, 0.78); }

/* ── L'en-tete ───────────────────────────────────────────────────────────── */
.accueil-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.accueil-tete-mots { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.accueil-tete-mots b {
  font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -0.015em;
}
.accueil-tete-sous {
  font-size: var(--text-sm); line-height: 1.5; color: var(--muted-foreground);
}
.accueil-fermer {
  flex: none; background: none; border: 0; cursor: pointer;
  font-size: var(--text-2xl); line-height: 1; padding: 0 4px;
  color: var(--muted-foreground);
}
.accueil-fermer:hover { color: var(--foreground); }
.accueil-fermer:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── Les vignettes : une seule a la fois ─────────────────────────────────── */
/* `1 1 auto`, jamais `flex: 1` : sur iPhone, une base de 0 vide la fenetre
   (13/10/2026, detail dans `partials/invite_panel.html`, `.mp-corps`). */
.accueil-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 22px 4px; }

/* /!\ **`display` ET PAS L'ATTRIBUT `hidden`.** `charte.css` porte des regles
   `display:` qui ECRASENT `hidden` (le bandeau de mise en route porte deja cet
   avertissement, et il a ete paye). On ne s'en remet donc pas a l'attribut pour
   cacher une vignette : c'est `[data-actif]` qui decide, et lui seul. */
.accueil-vignette { display: none; }
.accueil-vignette[data-actif] { display: block; }

/* /!\ **LA CAPTURE GARDE SA PROPORTION, quoi qu'il arrive.** Sans `aspect-ratio`,
   une image qui n'est pas encore arrivee occupe zero point de haut et le texte
   sous elle saute de place a l'instant ou elle se pose, sous les yeux de
   quelqu'un qui lit.

   /!\ **LE BAS S'EFFACE, ET C'EST LE MASQUE QUI PORTE LE SENS.** Un ecran de
   l'application est plus haut que la vignette : coupe net, le bord tranche une
   ligne de texte en deux et se lit comme une image cassee. Fondu, il se lit
   comme ce qu'il est, un apercu qui continue plus bas. Vu a l'ecran, pas par un
   test.
   /!\ Pas de bordure avec le masque : elle s'effacerait avec le reste et
   laisserait un liseré sur trois cotes seulement. */
.accueil-vignette img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1440 / 760;
  border-radius: var(--radius-md);
  background: var(--muted, rgb(24, 26, 36));
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
}
.accueil-vignette h2 {
  margin: 16px 0 6px;
  font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600;
  letter-spacing: -0.015em;
}
.accueil-vignette p {
  margin: 0; font-size: var(--text-sm); line-height: 1.6;
  color: var(--muted-foreground);
  /* Une mesure de lecture, pas toute la largeur de la fenetre : quatre lignes
     de 780 points se lisent mal, et on perd le debut de la suivante. */
  max-width: 62ch;
}

/* ── Le pied : les pastilles, puis les gestes ────────────────────────────── */
.accueil-pied {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}
.accueil-repere { display: flex; align-items: center; gap: 18px; min-width: 0; }
.accueil-points { display: flex; align-items: center; gap: 7px; }

.accueil-point {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
  background: var(--border); cursor: pointer;
  transition: background 120ms ease, width 120ms ease;
}
.accueil-point:hover { background: var(--muted-foreground); }
.accueil-point[aria-selected="true"] {
  width: 18px; border-radius: 4px; background: var(--primary, rgb(124, 108, 246));
}
.accueil-point:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }

.accueil-gestes { display: flex; align-items: center; gap: 8px; }

/* ── L'ecran etroit ──────────────────────────────────────────────────────── */
/* /!\ Sous cette largeur, les quatre gestes du pied se marchent dessus : les
   pastilles passent au-dessus, et les boutons prennent la ligne entiere. */
@media (max-width: 620px) {
  .accueil-pied { flex-direction: column; align-items: stretch; gap: 12px; }
  .accueil-repere { justify-content: space-between; }
  .accueil-gestes { justify-content: flex-end; flex-wrap: wrap; }
}