/* ============================================================
   Bloc « Paramètres d'impression », commun à sliceUP, fitUP et pictUP
   (chantier bloc d'impression, lot 0, 22 octobre 2026).

   Repris du lot 2 de l'interface sliceUP (variante C du 21 octobre) :
   tuiles des machines, barres de choix à picto, case des supports,
   encart noir « Votre objet imprimé ». Le voile de l'aperçu et la puce
   de la machine restent dans chaque module : ils ne sont pas du bloc.

   La couleur suit le module, par des variables : cyan par défaut
   (sliceUP), .bi-fitup vert, .bi-pictup violet. Le conteneur porte
   la classe .bloc-impression (et .bi-fitup ou .bi-pictup).

   Toutes les règles commencent par .bloc-impression pour passer devant
   .pill et .pill.active des feuilles des modules.
   ============================================================ */

.bloc-impression {
  --bi-accent: #41EFFF;
  --bi-accent-clair: #E6FDFE;
  --bi-accent-pale: #ACF8FC;
  --bi-encre: var(--color-ink, #191716);
  --bi-sous: var(--color-sub, #5A5550);
  --bi-fond: var(--color-bg, #F5F3F0);
}
.bloc-impression.bi-fitup { --bi-accent: #00CE75; --bi-accent-clair: #E6FAF1; --bi-accent-pale: #BFF3DA; }
.bloc-impression.bi-pictup { --bi-accent: #A575FF; --bi-accent-clair: #F3EEFF; --bi-accent-pale: #E2D5FF; }

/* Groupes et colonnes */
.bloc-impression .bi-groupe { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bloc-impression .bi-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.bloc-impression .bi-colonnes.bi-colonnes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bloc-impression .bi-colonnes.bi-colonnes-1 { grid-template-columns: minmax(0, 560px); }
@media (max-width: 760px) {
  .bloc-impression .bi-colonnes,
  .bloc-impression .bi-colonnes.bi-colonnes-2,
  .bloc-impression .bi-colonnes.bi-colonnes-1 { grid-template-columns: minmax(0, 1fr); }
}

/* Tuiles des machines : templates/core/_tuiles_machines.html */
.bloc-impression .option-pills.bi-tuiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px; flex-wrap: nowrap;
}
.bloc-impression .bi-tuiles .pill.bi-tuile {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 8px 14px 8px 8px; border-radius: 14px; border: 2px solid #E8E3DD;
  background: #FFFFFF; color: var(--bi-encre); font-weight: 400; min-height: 72px;
}
.bloc-impression .bi-tuiles .pill.bi-tuile:hover { border-color: var(--bi-accent); color: var(--bi-encre); }
.bloc-impression .bi-tuiles .pill.bi-tuile.active {
  border-color: var(--bi-accent); background: var(--bi-accent-clair);
  color: var(--bi-encre); font-weight: 400;
}
.bloc-impression .bi-tuile-image {
  width: 72px; height: 56px; border-radius: 9px; background: var(--bi-fond);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bloc-impression .bi-tuile-image svg { width: 64px; height: 48px; }
.bloc-impression .bi-sil-accent { fill: var(--bi-accent); }
.bloc-impression .bi-sil-pale { fill: var(--bi-accent-pale); }
.bloc-impression .bi-tuile-texte { display: flex; flex-direction: column; gap: 2px; }
.bloc-impression .bi-tuile-nom { font-size: 16px; font-weight: 600; }
.bloc-impression .bi-tuile-plateau { font-size: 12px; color: var(--bi-sous); }

/* Barres de choix : boutons de même largeur, jamais sur deux lignes */
.bloc-impression .option-pills.bi-segments {
  display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px;
  background: #F0EDE9; border-radius: 14px;
}
.bloc-impression .bi-segments .pill {
  position: relative;
  flex: 1 1 0; min-width: 0; min-height: 72px; border: none; border-radius: 10px;
  background: transparent; color: var(--bi-encre); font-size: 14px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 6px 4px;
}
.bloc-impression .bi-segments .pill svg { width: 22px; height: 22px; }
.bloc-impression .bi-segments .pill:hover { background: #FFFFFF; color: var(--bi-encre); }
.bloc-impression .bi-segments .pill.active {
  background: var(--bi-accent); color: #191716; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.bloc-impression .bi-segments .pill:disabled,
.bloc-impression .bi-segments .pill[disabled] { cursor: not-allowed; opacity: .35; }
.bloc-impression .option-pills.bi-segments.bi-segments-petits { margin-top: 8px; border-radius: 12px; }
.bloc-impression .bi-segments-petits .pill { min-height: 40px; font-size: 12px; }

/* Logo A de fitUP (verrou ou conseil), posé par applyPill dans la
   pastille : en coin, sans pousser le picto ni le mot. Ses dimensions
   sont en style en ligne, d'où les !important. */
.bloc-impression .bi-segments .pill .au-icon { position: absolute; top: 4px; right: 4px; line-height: 0; }
.bloc-impression .bi-segments .pill .au-icon svg {
  width: 18px !important; height: 18px !important; margin: 0 !important;
}

/* Choix AMS (pictUP, lot 1) : templates/core/_choix_ams.html. Le choix par
   défaut de la machine est actif, l'autre grisé jusqu'au chantier AMS. */
.bloc-impression .bi-ams { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.bloc-impression .bi-ams .option-pills.bi-segments { width: 300px; max-width: 100%; margin-top: 0; }
.bloc-impression .bi-ams .pill.active { cursor: default; }
.bloc-impression .bi-ams-note { font-size: 12px; color: var(--bi-sous); }

/* Case des supports (sliceUP) */
.bloc-impression .bi-supports { margin-top: 18px; }
.bloc-impression .bi-case { display: flex; align-items: center; gap: 12px; cursor: pointer; min-height: 44px; flex-wrap: wrap; }
.bloc-impression .bi-case input { width: 22px; height: 22px; margin: 0; accent-color: #00A3B0; flex-shrink: 0; }
.bloc-impression .bi-case-titre { font-size: 15px; font-weight: 600; color: var(--bi-encre); }
.bloc-impression .bi-case-sous { font-size: 13px; color: var(--bi-sous); }
.bloc-impression .bi-type-supports { grid-column: span 2; }

/* Encart noir : ce que l'objet sera, pas les réglages.
   Lignes dessinées par BlocImpression.dessiner (static/js/bloc-impression.js). */
.bloc-impression .bi-recap {
  background: #191716; border-radius: 18px; padding: 20px 22px; margin: 18px 0 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.bloc-impression .bi-recap[hidden] { display: none; }
.bloc-impression .bi-recap-titre {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bi-accent-pale);
}
.bloc-impression .bi-recap-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px;
}
@media (max-width: 760px) { .bloc-impression .bi-recap-liste { grid-template-columns: minmax(0, 1fr); } }
.bloc-impression .bi-recap-liste li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 1.45; color: #F2EFEB;
}
.bloc-impression .bi-recap-liste li strong { color: var(--bi-accent-pale); font-weight: 600; }
.bloc-impression .bi-recap-liste li.bi-recap-conseil {
  grid-column: 1 / -1; padding: 12px 14px; border-radius: 12px; background: #262321;
}
.bloc-impression .bi-recap-ic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--bi-accent); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bloc-impression .bi-recap-ic svg { width: 20px; height: 20px; }
.bloc-impression .bi-recap-ic.bi-recap-ic-blanc { background: #FFFFFF; }
.bloc-impression .bi-recap-ic.bi-recap-ic-blanc svg { width: 26px; height: 26px; }

/* Aide video de pictUP (26 octobre 2026) : bouton sous les lignes de l'encart
   noir ; la popup a ses propres classes (bi-modale), la page pictUP ne
   chargeant pas labup.css. Elle est ajoutee a la fin de la page. */
.bloc-impression .bi-recap-aide {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px; border: 1px solid var(--bi-accent-pale); border-radius: 999px;
  background: transparent; color: #F2EFEB; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.bloc-impression .bi-recap-aide:hover,
.bloc-impression .bi-recap-aide:focus-visible { background: #262321; }
.bloc-impression .bi-recap-aide[hidden] { display: none; }
.bloc-impression .bi-recap-aide-ic {
  width: 28px; height: 28px; border-radius: 50%; background: var(--bi-accent); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bloc-impression .bi-recap-aide-ic svg { width: 14px; height: 14px; }
.bi-modale {
  position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(0, 0, 0, .92);
}
.bi-modale-fond { position: absolute; inset: 0; }
/* Lien "Regarder le tuto" de l'apercu du plateau, sous le temps du
   changement (panneau gcode-info d'adaptup.css), sur une seule ligne. */
.gcode-info-row.gcode-info-tuto { justify-content: flex-end; margin-top: -6px; }
.gcode-info-tuto button {
  padding: 0; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--color-orange);
  text-decoration: underline; text-underline-offset: 2px;
}
.bi-modale-contenu {
  position: relative; background: #000000; border-radius: 14px; overflow: hidden;
  width: min(900px, 100%); aspect-ratio: 16 / 9;
}
.bi-modale-contenu.vertical { width: min(380px, 100%, calc(85vh * 9 / 16)); aspect-ratio: 9 / 16; }
.bi-modale-contenu video { display: block; width: 100%; height: 100%; border: 0; }
.bi-modale-fermer {
  position: absolute; top: 6px; right: 12px; z-index: 2; padding: 0; border: 0;
  background: none; color: #FFFFFF; font-size: 34px; line-height: 1; cursor: pointer;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}