/* ---------------------------------------------------------------------------
   Les fenêtres que le site pose par-dessus une page, d'où qu'elle vienne :
   se connecter (components/connexion_modale.php) et activer les notifications
   (components/push_prompt_modal.php).

   La fenêtre elle-même — le voile, la boîte, le bouton qui ferme — est celle
   de la charte (.modal dans tools/assets/css/style.css), que javascript/charte.js
   charge à la première ouverture. Cette feuille-ci est chargée partout, elle :
   elle tient donc en peu de lignes, ne peint rien tant qu'aucune fenêtre n'est
   ouverte, et couvre deux choses :

     • ce que la charte poserait, le temps qu'elle arrive — sans quoi le
       formulaire tomberait en bas de la page, en clair, pendant une seconde ;
     • ce qui appartient à ces fenêtres-là et non à la charte.

   La teinte vient de la section où l'on se trouve : le composant la pose sur
   la fenêtre (charte_section_css_sur(), php/charte_section.php), de sorte que
   la fenêtre prenne le magenta du Bazar ou le violet d'ENSALL sans repeindre
   la page derrière.
   --------------------------------------------------------------------------- */

.fenetre {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(11, 18, 32, .55);
}

/* Fermée, elle ne doit rien couvrir : la ligne au-dessus pose un display, qui
   bat l'attribut [hidden]. Sans celle-ci, la fenêtre des notifications
   s'affichait dès le chargement de la page et barrait tout le site. */
.fenetre[hidden] {
  display: none !important;
}

.fenetre *,
.fenetre *::before,
.fenetre *::after {
  box-sizing: border-box;
}

/* .bandeau, .modal__body et consorts posent un display, qui bat l'attribut. */
.fenetre [hidden] {
  display: none !important;
}

.fenetre .modal__box {
  position: relative;
  width: min(460px, 100%);
  max-height: 88dvh;
  overflow: auto;
  padding: 1.4rem;
  border-radius: 14px;
  background: var(--surface, var(--card-bg, #fff));
  color: var(--text, inherit);
  font-size: 15.5px;
  line-height: 1.55;
}

/* Le bouton qui ferme appartient à la boîte, et non au coin de l'écran comme
   dans les fenêtres « nues » de la charte. */
.fenetre .modal__fermer {
  position: absolute;
  top: .8rem;
  right: .8rem;
}

.fenetre .modal__title {
  padding-right: 2.5rem;
}

/* Les liens d'une fenêtre prennent la couleur de la section d'où l'on vient.
   Hors de la charte, ils retombaient sur le bleu du navigateur, qui n'est
   d'aucune section. */
.fenetre a {
  color: var(--accent, #4d6fb3);
  text-decoration: none;
}

.fenetre a:hover,
.fenetre a:focus-visible {
  text-decoration: underline;
}

/* Pendant que la charte arrive : on ne montre pas un contenu à moitié
   habillé, on montre qu'il arrive. */
.fenetre[data-attente] .modal__body {
  opacity: .35;
  pointer-events: none;
}

/* ---------- se connecter --------------------------------------------------- */

/* Une seule colonne : la fenêtre est étroite, et les champs y tiennent l'un
   sous l'autre. */
.connexion-fenetre .fgrid {
  grid-template-columns: minmax(0, 1fr);
}

/* La fenêtre ne montre qu'un formulaire : son titre de rubrique ferait double
   emploi avec le titre de la fenêtre. */
.connexion-fenetre legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.connexion-fenetre fieldset {
  margin-bottom: 0;
}

.connexion-fenetre .auth-bascule {
  margin-top: 1rem;
}

/* ---------- créer un compte -------------------------------------------------- */

/* Plus large que celle de la connexion : le prénom et le nom s'y tiennent
   côte à côte, et les choix de profil y respirent. Une étape à la fois, elle
   tient dans l'écran là où le formulaire entier n'y tenait pas. */
.inscription-fenetre .modal__box {
  width: min(600px, 100%);
}

/* Le fil des étapes nomme déjà le bloc où l'on est : la légende du bloc ferait
   double emploi. Elle reste pour les lecteurs d'écran. */
.inscription-fenetre legend {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.inscription-fenetre .etapes {
  margin: .9rem 0 1.1rem;
}

.inscription-fenetre fieldset {
  margin-bottom: 0;
}

/* Le refus du serveur se pose en tête du formulaire, au-dessus de l'étape où
   l'on est : c'est là qu'on regarde après avoir cliqué. */
.fenetre [data-connexion-erreur] {
  margin: 0 0 1rem;
}

.inscription-fenetre .auth-bascule {
  margin-top: 1.1rem;
}

/* Sur téléphone, la fenêtre prend toute la largeur utile, et le prénom passe
   au-dessus du nom. */
@media (max-width: 600px) {
  .inscription-fenetre .fgrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- les notifications ----------------------------------------------- */

/* La cloche, ou la pomme : un rond de la couleur de la section, posé au-dessus
   du titre. Une image vaut ici une phrase de moins. */
.fenetre__marque {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: .9rem;
  border-radius: 50%;
  background: var(--accent-soft, #eef1f5);
  color: var(--accent, #4d6fb3);
}

/* Les trois gestes d'un iPhone, numérotés. Ce ne sont pas des étapes qu'on
   parcourt dans la fenêtre — on les fait sur son téléphone, dans l'ordre —
   d'où la liste, plutôt qu'un chemin d'étapes. */
.push-etapes {
  display: grid;
  gap: .7rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.push-etapes li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .92rem;
  color: var(--text-2, #5D7093);
}

.push-etapes li::before {
  counter-increment: etape;
  content: counter(etape);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--accent, #4d6fb3);
  color: var(--on-accent, #fff);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .78rem;
}

.push-etapes b {
  color: var(--text, inherit);
  font-weight: 600;
}

/* L'icône d'un bouton du téléphone, citée au fil de la phrase : « touchez
   Partager ⬆︎ ». Elle se lit dans la ligne, à sa hauteur. */
.push-icone {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 .1rem;
  border-radius: 6px;
  background: var(--surface-2, rgba(128, 128, 128, .12));
  color: var(--text-2, #5D7093);
  vertical-align: -.3rem;
}

.push-icone svg {
  width: .9rem;
  height: .9rem;
}

/* La phrase qui rassure, sous les boutons : on peut revenir en arrière. */
.push-note {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--text-3, #83878f);
}

/* Les deux issues d'une fenêtre : accepter, remettre à plus tard. Sur
   téléphone, elles se partagent la ligne. */
.fenetre__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.2rem;
}

.fenetre__actions .btn {
  flex: 1 1 auto;
  justify-content: center;
}