/* =========================================================================
   ColorLearn — css/modal.css
   LA MODALE DE GÉNÉRATION (E1 · US1.2).

   Sept kilo-octets de mise en forme d'une boîte de dialogue qui ne
   s'ouvre QUE pendant une génération — et qui partaient sur les cent
   trente-huit pages, conditions de vente comprises. Un test du dépôt
   nommait cette piste depuis le 13 août ; la voici prise.

   POURQUOI PAS css/panneau.css, où « .setup » est déjà parti. Parce que
   livre.html ouvre cette modale ET ne reçoit pas panneau.css : la
   condition du build l'en exclut explicitement, ses panneaux étant
   habillés par « .panneau-ia » qui vit ailleurs. L'y mettre aurait laissé
   la modale de l'atelier livre sans aucun style — visible seulement en
   lançant une génération, c'est-à-dire en payant.

   La condition qui l'attache est donc la sienne : « cette page peut-elle
   ouvrir la modale ? ». Elle est écrite dans tools/build.mjs, à côté de
   celle du panneau, et un test la tient.

   Ce qui RESTE dans css/app.css : la règle d'impression groupée
   « .pied-global, .modal-gen, … ». Un sélecteur groupé n'appartient pas
   au fichier de l'un de ses membres — le dépôt s'est déjà fait prendre
   une fois, et le pied de page s'est imprimé.
   ========================================================================= */

/* =========================================================================
   LES RÈGLES
   ========================================================================= */
.modal-gen {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: var(--trait-epais) solid var(--encre);
  border-radius: var(--rayon);
  background: var(--papier);
  color: var(--encre);
}

.modal-gen::backdrop {
  background: rgb(0 0 0 / 0.55);
}

.modal-gen__corps {
  padding: 18px 20px 20px;
}

.modal-gen h2 {
  margin: 0 0 2px;
  font-family: var(--police-titre);
  font-size: 21px;
  text-transform: uppercase;
}

.modal-gen__sous {
  margin: 0 0 14px;
  font-size: 13px;
}

.modal-gen__ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

/* Vignette de la dernière image produite */
.modal-gen__vignette {
  flex: none;
  width: 88px;
  height: 88px;
  border: var(--trait-fin) dashed var(--encre);
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--papier);
}

.modal-gen__vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
}

.modal-gen__vignette--pleine {
  border-style: solid;
}

.modal-gen__infos {
  flex: 1;
  min-width: 0;
}

.modal-gen__cadre {
  margin: 0 0 6px;
  font-weight: 800;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* Barre de progression n/N, dessinée à l'encre */
.modal-gen__barre {
  height: 16px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 999px;
  overflow: hidden;
  background: var(--papier);
}

.modal-gen__barre i {
  display: block;
  height: 100%;
  width: 0%;
  background-image: repeating-linear-gradient(
    45deg,
    var(--encre) 0 3px,
    transparent 3px 7px
  );
  border-right: 2px solid var(--encre);
  transition: width 220ms var(--crayon-courbe, ease);
}

.modal-gen__compte {
  margin: 6px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.modal-gen__erreur {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: var(--trait-fin) solid var(--encre);
  border-left-width: 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.modal-gen__erreur[hidden] {
  display: none;
}

.modal-gen__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.modal-gen .btn {
  border-color: var(--encre);
}

.modal-gen .btn--ghost {
  color: var(--encre);
}

@media (max-width: 760px) {
  .modal-gen__ligne {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-gen__vignette {
    width: 100%;
    height: 120px;
  }
}