/* ============================================
   THEME DARK & YELLOW (#ffeb4a)
   Configurateur TBM Workwear - Modern Overhaul
   ============================================ */

:root {
  --primary-yellow: #ffeb4a;
  --primary-yellow-hover: #ffe100;
  --primary-yellow-dim: rgba(255, 235, 74, 0.15);
  --bg-dark: #121212;
  --bg-card: #1e1e1e;
  --bg-card-hover: #2a2a2a;
  --bg-surface: #181818;
  --bg-elevated: #252525;
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0a0;
  --text-muted: #666;
  --border-color: #333;
  --border-light: #444;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === GLOBAL RESET === */
body {
  background-color: var(--bg-dark) !important;
  color: var(--text-primary);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Apply border-box to UI elements only */
.accordion,
.accordion *,
.bulle,
.bulle *,
.couleurs,
.couleurs *,
.dessus,
.dessus *,
.btdevis,
.btdevisa,
.delpdf,
#formulaire,
#formulaire *,
.situation-modal,
.situation-modal * {
  box-sizing: border-box;
}

/* === ACCORDION PANEL (Left Sidebar) === */
.accordion {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  overflow-y: auto;
  width: 260px !important;
  box-shadow: var(--shadow-md);
  height: 813px;
}

.accordion h2 {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 10px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: var(--transition);
}

.accordion h2:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.accordion h2.current {
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card)) !important;
  color: var(--primary-yellow) !important;
  border-left: 3px solid var(--primary-yellow) !important;
}

/* === PANE & ELEMENTS (Clickable Selectors) === */
.accordion .pane {
  background: var(--bg-card) !important;
  border: none !important;
  padding: 10px !important;
  color: var(--text-primary) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px;
  overflow-y: auto;
}

/* Custom scrollbar for accordion */
.accordion::-webkit-scrollbar {
  width: 6px;
}
.accordion::-webkit-scrollbar-track {
  background: var(--bg-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.accordion::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 3px;
  border: 1px solid var(--bg-surface);
}
.accordion::-webkit-scrollbar-thumb:hover {
  background: var(--primary-yellow);
}

/* Pane scrollbar */
.accordion .pane::-webkit-scrollbar {
  width: 4px;
}
.accordion .pane::-webkit-scrollbar-track {
  background: transparent;
}
.accordion .pane::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}
.accordion .pane::-webkit-scrollbar-thumb:hover {
  background: var(--primary-yellow);
}

.accordion .pane .element {
  float: none !important;
  width: calc(50% - 3px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 6px !important;
  text-align: center;
  background: var(--bg-surface);
  border: 2px solid transparent;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: var(--transition);
  font-size: 9px;
  line-height: 1.3;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.accordion .pane .element:hover {
  background: var(--bg-elevated);
  border-color: var(--border-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.accordion .pane .element.selected {
  background: var(--primary-yellow-dim) !important;
  border-color: var(--primary-yellow) !important;
  color: var(--primary-yellow) !important;
  box-shadow: 0 0 12px rgba(255, 235, 74, 0.15);
}

.accordion .pane .element img {
  border: none !important;
  border-radius: 6px !important;
  width: 48px !important;
  height: 48px !important;
  object-fit: cover;
  transition: var(--transition);
  filter: brightness(0.9);
}

.accordion .pane .element:hover img {
  filter: brightness(1);
  border: none !important;
}

.accordion .pane .element.selected img {
  filter: brightness(1.05);
  border: none !important;
}

/* === PLANCHE (Main Preview Area) === */
.planche {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* === DESSUS (Title Area) === */
.dessus {
  color: var(--text-primary) !important;
}

.dessus h1 {
  color: var(--primary-yellow);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.dessus strong {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
}

.dessus h2 {
  color: var(--text-primary);
  font-size: 14px;
  margin-top: 4px;
  font-weight: 600;
}

/* === BULLE (Info Panel) === */
.bulle {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg) !important;
  padding: 16px !important;
  margin-top: 140px !important;
  width: 280px !important;
  height: auto !important;
  max-height: 460px;
  overflow-y: auto;
  box-shadow: var(--shadow-sm);
}

.bulle ul {
  margin: 0 !important;
  padding: 0 !important;
}

.bulle li {
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.6;
}

.bulle li:last-child {
  border-bottom: none;
}

.bulle li strong.color {
  color: var(--primary-yellow);
}

.bulle li em {
  color: var(--text-muted);
  font-size: 10px;
}

/* === COLOR PALETTE === */
.couleurs {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px !important;
  box-shadow: var(--shadow-sm);
}

.couleurs li a {
  border: 2px solid var(--border-color) !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  margin: 3px !important;
  transition: var(--transition);
}

.couleurs li a:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(255,255,255,0.2);
}

.couleurs li a.grosborder {
  border: 3px solid var(--primary-yellow) !important;
  box-shadow: 0 0 10px rgba(255, 235, 74, 0.4) !important;
}

/* === JPEG CREATION BUTTON (Modern Icon) === */
.delpdf {
  background: none !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 14px !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition);
  cursor: pointer;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 30;
  padding-top: 8px !important;
}

.delpdf::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.delpdf:hover {
  background: var(--bg-elevated) !important;
  color: var(--primary-yellow) !important;
  border-color: var(--primary-yellow) !important;
}

.delpdf:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffeb4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

.delpdf.loading {
  background: var(--bg-elevated) !important;
  color: var(--primary-yellow) !important;
}

.delpdf.loading::before {
  animation: spin 1s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffeb4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='22'/%3E%3Cline x1='4.93' y1='4.93' x2='7.76' y2='7.76'/%3E%3Cline x1='16.24' y1='16.24' x2='19.07' y2='19.07'/%3E%3Cline x1='2' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='22' y2='12'/%3E%3Cline x1='4.93' y1='19.07' x2='7.76' y2='16.24'/%3E%3Cline x1='16.24' y1='7.76' x2='19.07' y2='4.93'/%3E%3C/svg%3E");
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === ZOOM BUTTONS — HIDDEN === */
.louppe {
  display: none !important;
}

/* === "METTRE EN SITUATION" BUTTON (replaces Devis) === */
.btdevis,
button.btdevis {
  background: var(--primary-yellow) !important;
  color: #121212 !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 28px !important;
  cursor: pointer !important;
  transition: var(--transition);
  letter-spacing: 0.3px;
  text-transform: none;
  box-shadow: 0 4px 14px rgba(255, 235, 74, 0.3);
  width: auto !important;
  height: auto !important;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.btdevis:hover,
button.btdevis:hover {
  background: var(--primary-yellow-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 235, 74, 0.45) !important;
}

.btdevis:active,
button.btdevis:active {
  transform: translateY(0);
}

.btdevisa {
  text-decoration: none !important;
}

/* === OVERLAY (Apple Overlay) === */
.apple_overlay {
  background-color: var(--bg-card) !important;
  border-radius: var(--radius-xl) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-lg) !important;
}

.apple_overlay .close {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* === TABS === */
ul.onglet a {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-bottom: none !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  font-weight: 600;
  transition: var(--transition);
}

ul.onglet a:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

ul.onglet a.current,
ul.onglet a.current:hover,
ul.onglet li.current a {
  background: var(--bg-card) !important;
  color: var(--primary-yellow) !important;
}

/* === FORMULAIRE (Form) === */
#formulaire {
  color: var(--text-primary) !important;
  font-size: 13px !important;
}

#formulaire strong {
  color: var(--primary-yellow) !important;
}

#formulaire label {
  color: var(--text-secondary) !important;
}

#formulaire .text,
#formulaire textarea {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  transition: var(--transition);
}

#formulaire .text:focus,
#formulaire textarea:focus {
  border-color: var(--primary-yellow) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 235, 74, 0.15);
}

#formulaire sup {
  color: var(--primary-yellow) !important;
}

/* === LOGO UPLOAD === */
.logodll {
  color: var(--primary-yellow) !important;
  font-weight: 600;
  background: var(--bg-surface);
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  transition: var(--transition);
  cursor: pointer;
}

.logodll:hover {
  border-color: var(--primary-yellow);
  background: var(--primary-yellow-dim);
}

/* === TOOLTIP === */
.tooltip {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
  font-size: 11px !important;
  padding: 8px 12px !important;
}

/* === GLOBAL PANES === */
.panesglob {
  padding: 16px;
}

/* === MESSAGE OUTPUT === */
.messageout {
  color: var(--primary-yellow) !important;
}

/* === LAYOUT: Accordion + Planche same height with gap === */
.accordion {
  margin-right: 16px !important;
}

.planche {
  margin-left: 0 !important;
}

/* Fix pane height — adapt to content, not a huge fixed value */
.accordion .pane {
  height: auto !important;
  max-height: none !important;
}

/* === SVG: Keep original model overflow behavior === */
/* No overrides — original CSS handles .planche .modele correctly */

/* === PRINT OVERRIDE (don't affect print) === */
@media print {
  body {
    background: white !important;
    color: black !important;
  }
}

/* === Bouton "Mettre en situation" - Etats === */
.btn-situation .btdevis.disabled {
    opacity: 0.6;
    cursor: pointer !important;
    background: #555 !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.btn-situation .btdevis.disabled:hover {
    opacity: 0.8;
    background: #666 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.btn-situation .btdevis.disabled.requires-auth::after {
    content: ' \1F512';
    margin-left: 6px;
    font-size: 13px;
}

.btn-situation .btdevis.authenticated {
    box-shadow: 0 0 10px rgba(255, 235, 74, 0.3);
}

.btn-situation .btdevis.authenticated::after {
    content: ' \2713';
    margin-left: 6px;
    color: #22c55e;
}

/* === AUTH BUTTON (Top Right) === */
.tbm-auth-button {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1000;
}

.tbm-auth-button__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-card, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: var(--radius-md, 12px);
  color: var(--text-secondary, #a0a0a0);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.3));
}

.tbm-auth-button__btn:hover {
  background: var(--bg-elevated, #252525);
  border-color: var(--primary-yellow, #ffeb4a);
  color: var(--primary-yellow, #ffeb4a);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.4));
}

.tbm-auth-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Authenticated state */
.tbm-auth-button.authenticated .tbm-auth-button__btn {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.tbm-auth-button.authenticated .tbm-auth-button__btn:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Responsive */
@media (max-width: 640px) {
  .tbm-auth-button {
    top: 8px;
    right: 8px;
  }

  .tbm-auth-button__btn {
    padding: 8px 12px;
    font-size: 12px;
  }

  .tbm-auth-button__btn .tbm-auth-text {
    display: none;
  }

  .tbm-auth-button__btn .tbm-auth-icon {
    width: 20px;
    height: 20px;
  }
}

/* === BOUTONS DEVIS (positionnement) === */

/* Bouton "Demander un devis" - positionné plus haut */
.btn-devis-simple .btdevis {
  bottom: 80px !important;
}

/* Largeur fixe pour tous les boutons devis */
.btdevis,
button.btdevis {
  width: 240px !important;
}