/* La boîte « Ce devis est déjà rattaché à un autre projet » (js/choix-rattachement.js), ouverte depuis la grille et l'écran du
   prévisionnel. Elle reprend les couleurs de grille.css (variables --vert-*, --alerte…) ; elle tient sur un téléphone. */

dialog.choix {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: auto;
  color: var(--texte);
  background: #fff;
  border: 1px solid var(--quadrillage);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}
dialog.choix::backdrop { background: rgba(27, 35, 32, .45); }

.choix__corps { display: grid; gap: 10px; padding: 18px 20px 16px; }
.choix__titre { margin: 0; font-size: 17px; color: var(--vert-fonce); }
.choix__phrase { margin: 0; font-size: 15px; font-weight: 700; }
/* La pastille du système du devis (css/grille.css, « .pastille-erp »), un cran plus grande dans cette phrase en 15 px. */
.choix__phrase .pastille-erp { font-size: 12px; line-height: 16px; }
.choix__aide { margin: 0; color: var(--texte-discret); }

.choix__boutons { display: grid; gap: 8px; margin-top: 4px; }
.choix__bouton { padding: 9px 12px; text-align: left; font-size: 14px; }
.choix__bouton--deplacer { color: #fff; background: var(--vert-fonce); border-color: var(--vert-fonce); }
.choix__bouton--deplacer:hover:not(:disabled) { background: var(--vert-moyen); }
.choix__bouton--fusionner { color: #7a5200; background: #fff4d6; border-color: #e8cf8a; }
.choix__bouton--fusionner:hover:not(:disabled) { background: #ffe9a8; }

.choix__meme { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--vert-pale); border-radius: 6px; }
.choix__meme input { margin-top: 3px; }
.choix__responsable { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--texte-discret); background: #f3f3f3; border-radius: 6px; }

.choix__reste { display: grid; gap: 6px; margin: 0; padding: 8px 10px 10px; border: 1px solid var(--quadrillage); border-radius: 6px; }
.choix__reste legend { padding: 0 4px; font-weight: 700; }
.choix__option { display: flex; gap: 8px; align-items: center; cursor: pointer; }

.choix__recap { display: grid; gap: 6px; padding: 10px 12px; background: #fffaf0; border: 1px solid #e8cf8a; border-radius: 6px; }
.choix__recap p { margin: 0; }
.choix__recap-gras { font-weight: 700; color: #7a5200; }
.choix__charge { color: var(--texte-discret); }

.choix__erreur { margin: 0; padding: 8px 10px; color: var(--alerte); background: var(--alerte-fond); border: 1px solid #e3b3ae; border-radius: 6px; }

.choix__pied { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.choix__plus-tard { background: none; border-color: transparent; color: var(--texte-discret); }
.choix__confirmer { font-weight: 700; }

@media (max-width: 700px) {
  .choix__corps { padding: 14px 14px 12px; }
  .choix__pied { justify-content: stretch; }
  .choix__pied .bouton { flex: 1 1 100%; }
}