/* =============================================================================
 * SERIGRAPHIE-BOUTIQUE — devis.css v0.1.0 (2026-09-22)
 * Encart « devis PDF » sur la page panier + modale de demande + reprise de devis.
 * Tokens : tokens.css (--sb-*). Boutons : buttons.css (.sb-btn).
 * ============================================================================= */

/* --- encart sous le tableau du panier --- */
.sb-devis-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 12px; padding: 14px 16px;
  background: var(--sb-color-paper-alt, #F0EBE3);
  border-left: 4px solid var(--sb-color-accent, #FF5E0E);
  border-radius: 4px;
  font-family: var(--sb-font-sans, inherit); color: var(--sb-text-primary, #0E0E10);
}
.sb-devis-cta__text { flex: 1 1 320px; font-size: 14px; line-height: 1.45; }
.sb-devis-cta__text strong { display: block; font-size: 15px; margin-bottom: 2px; }
.sb-devis-cta__btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 640px) {
  .sb-devis-cta { padding: 12px; }
  .sb-devis-cta__btn { width: 100%; text-align: center; }
}

/* --- modale --- */
.sb-devis-modal {
  position: fixed; inset: 0; z-index: 2147483647; /* au-dessus du bandeau cookies (consent-banner) */
  background: rgba(14, 14, 16, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 24px 12px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: var(--sb-font-sans, inherit); color: var(--sb-text-primary, #0E0E10);
}
body.sb-devis-open { overflow: hidden; }
.sb-devis-modal__box {
  position: relative; width: 100%; max-width: 720px;
  background: var(--sb-color-paper-pure, #fff); border-radius: 6px;
  padding: 24px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: auto 0;
}
.sb-devis-modal__close {
  position: absolute; top: 8px; right: 8px; width: 40px; height: 40px;
  border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important;
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--sb-text-secondary, #44464A) !important;
}
.sb-devis-modal__close:hover { color: var(--sb-color-accent, #FF5E0E); }
.sb-devis-form__title { margin: 0 32px 6px 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.sb-devis-form__intro { margin: 0 0 16px; font-size: 13.5px; color: var(--sb-text-secondary, #44464A); line-height: 1.45; }

.sb-devis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.sb-devis-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-devis-field--full { grid-column: 1 / -1; }
.sb-devis-field label { font-size: 12.5px; font-weight: 600; color: var(--sb-text-secondary, #44464A); }
.sb-devis-field input, .sb-devis-field select, .sb-devis-field textarea {
  width: 100%; box-sizing: border-box; padding: 9px 10px; font: inherit; font-size: 14px;
  border: 1px solid var(--sb-border-default, #D6D4CF); border-radius: 4px; background: #fff; color: inherit;
}
.sb-devis-field input:focus, .sb-devis-field select:focus, .sb-devis-field textarea:focus {
  outline: 2px solid var(--sb-color-accent, #FF5E0E); outline-offset: 1px; border-color: var(--sb-color-accent, #FF5E0E);
}
.sb-devis-field__err { font-size: 12px; color: var(--sb-color-danger, #C42B38); min-height: 0; }
.sb-devis-field__err:empty { display: none; }
.sb-devis-rgpd { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 6px; font-size: 12.5px; line-height: 1.4; color: var(--sb-text-secondary, #44464A); }
.sb-devis-rgpd input { margin-top: 3px; flex: 0 0 auto; }
.sb-devis-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sb-devis-turnstile { margin: 8px 0; min-height: 0; }
.sb-devis-error { color: var(--sb-color-danger, #C42B38); font-size: 13px; margin: 6px 0; }
.sb-devis-error:empty { display: none; }
.sb-devis-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sb-devis-actions .sb-btn { min-width: 140px; }
/* le thème ePages style tous les <button> en bleu : on force l'apparence secondaire du bouton Annuler */
.sb-devis-actions .sb-btn--ghost {
  background: transparent !important; color: var(--sb-text-secondary, #44464A) !important;
  border: 1px solid var(--sb-border-default, #D6D4CF) !important; box-shadow: none !important;
}
.sb-devis-actions .sb-btn--ghost:hover { border-color: var(--sb-color-accent, #FF5E0E) !important; color: var(--sb-color-ink, #0E0E10) !important; }

/* --- succès / reprise --- */
.sb-devis-success p, .sb-devis-reorder p { font-size: 14px; line-height: 1.5; margin: 0 0 10px; }
.sb-devis-success__next { padding: 10px 12px; background: var(--sb-color-accent-soft, #FFF5EE); border-radius: 4px; font-size: 13px; }
.sb-devis-success--popup-blocked .sb-btn--primary { animation: sb-devis-pulse 1.2s ease-in-out 3; }
@keyframes sb-devis-pulse { 50% { transform: scale(1.04); } }
.sb-devis-lines { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.5; max-height: 220px; overflow: auto; }
.sb-devis-progress { font-size: 13.5px; font-weight: 600; min-height: 1.4em; }

@media (max-width: 640px) {
  .sb-devis-modal { padding: 0; align-items: stretch; }
  .sb-devis-modal__box { max-width: none; border-radius: 0; min-height: 100%; padding: 20px 16px 24px; }
  .sb-devis-grid { grid-template-columns: 1fr; }
  .sb-devis-actions .sb-btn { flex: 1 1 auto; }
}