/* Thème sombre (par défaut) - eco/industriel */
:root, [data-theme="dark"]{
  --bg:#0f111a; 
  --bg-rgb:15,17,26;
  --bg-pattern:#171a26;
  --fg:#e9e8f2; 
  --muted:#8b8ea6; 
  --card:#151827; 
  --border:#262a3c;
  --accent:#7b5cff; 
  --accent-rgb:123,92,255;
  --accent-ghost:#211b35; 
  --accent-dim:#5f47c9;
  --danger:#d34a5e; 
  --danger-rgb:211,74,94;
  --success:#4aa0d9; 
  --success-rgb:74,160,217;
  --sticky:#121623;
  --warning:#b56ad9;
  --blueprint:#4f7fe3;
  --blueprint-rgb:79,127,227;
  --copper:#a968ff;
  --input-bg:#121623;
  --radius-xs:4px;
  --radius-sm:4px;
  --radius-md:4px;
  --radius-lg:4px;
  --shadow-soft:0 2px 10px rgba(0,0,0,0.25);
  --shadow-strong:0 12px 32px rgba(0,0,0,0.45);
}

/* Thème clair */
[data-theme="light"]{
  --bg:#f2f2f9; 
  --bg-rgb:242,242,249;
  --bg-pattern:#dfe1f2;
  --fg:#1d1f2b; 
  --muted:#5e637b; 
  --card:#ffffff; 
  --border:#c9cde3;
  --accent:#6a4bff; 
  --accent-rgb:106,75,255;
  --accent-ghost:#efeaff; 
  --accent-dim:#7a66ff;
  --danger:#c03c55; 
  --danger-rgb:192,60,85;
  --success:#3f86c2; 
  --success-rgb:63,134,194;
  --sticky:#f2f2f9;
  --warning:#9c5bd1;
  --blueprint:#3f6fe0;
  --blueprint-rgb:63,111,224;
  --copper:#7a5cff;
  --input-bg:#ffffff;
  --radius-xs:4px;
  --radius-sm:4px;
  --radius-md:4px;
  --radius-lg:4px;
  --shadow-soft:0 2px 10px rgba(0,0,0,0.12);
  --shadow-strong:0 12px 28px rgba(0,0,0,0.2);
}

*{ box-sizing:border-box } 
html,body{ margin:0; height:100% }
html{ background:transparent }
body{ 
  position:relative;
  color:var(--fg); 
  font:15px/1.6 'Archivo', -apple-system, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background-color: rgba(var(--bg-rgb), 0.5);
  background-image: url('./assets/background.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: multiply;
  pointer-events:none;
}

.icon{
  width:1em;
  height:1em;
  display:inline-block;
  vertical-align:-0.15em;
  margin-right:0.4em;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon-only{ margin-right:0; }
.icon-lg{ width:2.2em; height:2.2em; }

h1,h2{ 
  margin:0 0 .6rem 0; 
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 0.9em;
  color: var(--copper);
} 
.muted{ color:var(--muted) } 
.hidden{ display:none !important } 
.spacer{ flex:1 }

.btn{ 
  background:var(--accent); 
  color:var(--bg); 
  border:none; 
  border-radius:var(--radius-sm); 
  padding:10px 18px; 
  cursor:pointer; 
  transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  pointer-events: none;
}
.btn:hover::before { background: transparent; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.3); }
.btn.ghost{ 
  background:transparent; 
  border:1px solid var(--border); 
  color:var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-ghost);
}
.btn.ghost:hover{ 
  background:var(--accent-ghost); 
  border-color:var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent), 0 2px 8px rgba(var(--accent-rgb),0.15);
}
.btn.warning{ background:var(--danger); color:#fff; }
.btn.ghost.active-mode{ 
  background:var(--accent); 
  color:var(--bg);
  border-color:var(--accent);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.25);
}
.btn.active-mode{
  background:var(--accent);
  color:var(--bg);
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.25);
}

/* Large button variant for CTAs */
.btn-lg{
  padding: 16px 48px;
  font-size: 1.1em;
  border-radius: var(--radius-lg);
}

/* Chroma CTA button */
.btn-chroma{
  background: transparent;
  color: #fff;
  border-radius: var(--radius-lg);
  isolation: isolate;
  border: 2px solid var(--accent);
}
.btn-chroma{
  background-clip: padding-box;
  box-shadow: 0 8px 24px rgba(var(--blueprint-rgb),0.25), 0 0 30px rgba(var(--accent-rgb),0.2);
}
.btn-chroma:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--blueprint-rgb),0.35), 0 0 40px rgba(var(--accent-rgb),0.28);
}
.btn-chroma::before{
  /* soften the sweep for chroma so it doesn't bleed */
  background: transparent;
}

.card{ 
  background:var(--card); 
  border:1px solid var(--border); 
  border-radius:var(--radius-sm); 
  padding:16px; 
  margin:12px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}
.card:hover::before { opacity: 1; }
.max-480{ max-width:480px; margin:40px auto }

.header{ 
  position:sticky; 
  top:0; 
  z-index:500; 
  padding:12px 20px; 
  background:rgba(var(--bg-rgb),0.95); 
  backdrop-filter: blur(12px);
  border-bottom:2px solid var(--border);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.header-top{ display:flex; align-items:center; gap:16px }
.header-top h1{ 
  margin:0; 
  font-size:16px;
  position: relative;
  padding-left: 12px;
}
.header-top h1::before {
  content: '▸';
  position: absolute;
  left: 0;
  background-color: rgba(var(--bg-rgb), 0.72);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Logo dans le header */
.header-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: brightness(0.9);
  transition: filter 0.3s;
}
.header-logo:hover {
  filter: brightness(1.1);
}

/* Logo dans la page de login */
.login-logo-container {
  text-align: center;
  margin-bottom: 24px;
}
.login-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb),0.3));
}

/* Navigation principale */
.main-nav{ display:flex; gap:4px; flex:1; margin:0 16px }
.nav-btn{ 
  background:transparent; 
  color:var(--muted); 
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0; 
  padding:8px 16px; 
  cursor:pointer; 
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1); 
  font-size:12px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
}
.nav-btn::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}
.nav-btn:hover:not(:disabled){ 
  color:var(--fg);
}
.nav-btn:hover:not(:disabled)::after {
  width: 70%;
}
.nav-btn.active{ 
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.nav-btn.active::after {
  width: 100%;
}
.nav-btn:disabled{ opacity:.3; cursor:not-allowed }

/* Layout dashboard: nav verticale a gauche */
#dashboard{
  display:flex;
  min-height:100vh;
}
#dashboard .header{
  position:sticky;
  top:0;
  align-self:flex-start;
  height:100vh;
  width:56px;
  min-width:56px;
  flex-shrink:0;
  padding:16px;
  border-right:2px solid var(--border);
  border-bottom:none;
  box-shadow: 4px 0 16px rgba(0,0,0,0.15);
  transition: width 0.25s ease;
  overflow:hidden;
  z-index:500;
}
#dashboard .header:hover{
  width:180px;
  overflow:visible;
  box-shadow: 4px 0 24px rgba(0,0,0,0.35);
}
#dashboard .header-top{
  flex-direction:column;
  align-items:center;
  height:100%;
  gap:12px;
  /* Fond opaque pour couvrir le tableau quand la sidebar est deployée */
  background:inherit;
  position:relative;
  z-index:1;
}
#dashboard .header-top h1{
  margin:0;
  opacity:0;
  height:20px;
  line-height:20px;
  visibility:hidden;
  transition: opacity 0.2s ease;
}
#dashboard .header:hover .header-top h1{
  opacity:1;
  visibility:visible;
}
#dashboard .main-nav{
  flex-direction:column;
  width:100%;
  margin:8px 0;
}
#dashboard .nav-btn{
  width:100%;
  text-align:left;
  border-left:2px solid transparent;
  border-bottom:none;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:flex-start;
}
#dashboard .header:not(:hover) .nav-btn,
#dashboard .header:not(:hover) #toggle-help,
#dashboard .header:not(:hover) #logout{
  padding-left:0;
  padding-right:0;
  justify-content:center;
  gap:0;
}
#dashboard .header:not(:hover) .nav-btn{
  border-left:none;
  text-align:center;
}
#dashboard .nav-btn .icon,
#dashboard #toggle-help .icon,
#dashboard #logout .icon{
  width:18px;
  height:18px;
  flex-shrink:0;
}
#dashboard .header:not(:hover) .nav-btn .icon,
#dashboard .header:not(:hover) #toggle-help .icon,
#dashboard .header:not(:hover) #logout .icon{
  margin-right:0;
}
#dashboard .nav-label{
  display:none;
  white-space:nowrap;
}
#dashboard .header:hover .nav-label{
  display:inline;
  opacity:1;
}
#dashboard .nav-btn::after{
  display:none;
}
#dashboard .nav-btn.active{
  border-left-color:var(--accent);
  background:var(--accent-ghost);
  color:var(--accent);
}
#dashboard #toggle-help{
  margin-top:auto;
  width:100%;
  justify-content:flex-start;
  display:flex;
  align-items:center;
  gap:8px;
}
#dashboard #logout{
  width:100%;
  justify-content:flex-start;
  display:flex;
  align-items:center;
  gap:8px;
}
#dashboard .btn-label{
  display:none;
  white-space:nowrap;
}
#dashboard .header:hover .btn-label{
  display:inline;
  opacity:1;
}
#dashboard .tabpanel{
  flex:1;
  min-width:0;
  overflow-x:auto;
  margin:0;
  padding:20px 24px;
}

@media (max-width:900px){
  #dashboard{ flex-direction:column; }
  #dashboard .header{
    width:100%;
    height:auto;
    transition-delay:0s;
    border-right:none;
    border-bottom:2px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  }
  #dashboard .header-top{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap;
    height:auto;
  }
  #dashboard .main-nav{
    flex-direction:row;
    width:auto;
    margin:0 12px;
  }
  #dashboard .nav-btn{
    width:auto;
    border-left:none;
    border-bottom:2px solid transparent;
    padding:8px 12px;
    justify-content:flex-start;
  }
  #dashboard .nav-btn::after{ display:block; }
  #dashboard .header-top h1,
  #dashboard .nav-label,
  #dashboard .btn-label{
    opacity:1;
    max-width:none;
    width:auto;
    height:auto;
  }
  #dashboard #toggle-help,
  #dashboard #logout{
    margin-top:0;
    width:auto;
  }
}

/* Sous-navigation pour les tours */
.subnav{ background:var(--input-bg); border-bottom:1px solid var(--border); padding:6px 12px }
.subnav-tabs{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 }
.subnav-tabs button{ background:var(--card-bg); color:var(--muted); border:1px solid var(--border); 
  border-radius:6px; padding:5px 12px; cursor:pointer; transition:all .2s; font-size:12px; white-space:nowrap }
.subnav-tabs button:hover{ background:var(--accent-ghost); border-color:var(--accent); color:var(--fg) }
.subnav-tabs button.active{ background:var(--accent-ghost); border-color:var(--accent); color:var(--accent) }

/* Questions editor toolbar */
.questions-toolbar{ align-items:flex-end }
.questions-toolbar .compact-select{
  min-width:160px;
  max-width:220px;
  padding:6px 8px !important;
  font-size:12px;
  height:34px;
}
.questions-actions{
  margin-left:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(180px, 1fr));
  gap:8px;
}
/* Switch mode analyse (pill glissant) */
.analysis-mode-switch {
  display: inline-flex;
  position: relative;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
  flex-shrink: 0;
}
.analysis-mode-switch::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 999px;
  background: var(--accent);
  transition: left .22s cubic-bezier(.4,0,.2,1), right .22s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.analysis-mode-switch[data-value="company"]::before {
  left: 2px;
  right: 50%;
}
.analysis-mode-switch[data-value="comparison"]::before {
  left: 50%;
  right: 2px;
}
.analysis-mode-switch .ams-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .22s ease;
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
  flex: 1;
}
.analysis-mode-switch[data-value="company"] .ams-btn[data-mode="company"],
.analysis-mode-switch[data-value="comparison"] .ams-btn[data-mode="comparison"] {
  color: #fff;
}

/* En-tete de lot: titre a gauche, actions a droite */
.lot-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.lot-header .row{ margin-left:auto }

/* Sous-onglets pour un tour spécifique */
.tour-subnav{ 
  display:flex; 
  gap:2px; 
  padding:12px 20px; 
  background:rgba(var(--bg-rgb),0.6); 
  border-bottom:1px solid var(--border);
  position: relative;
}
.tour-subnav::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  opacity: 0.3;
}
.tour-tab-btn{ 
  background:transparent; 
  color:var(--muted); 
  border:none; 
  border-bottom:2px solid transparent; 
  padding:8px 14px; 
  cursor:pointer; 
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); 
  font-size:12px; 
  font-weight:500;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: relative;
}
.tour-tab-btn::before {
  content: '//';
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.3s;
  color: var(--accent);
}
.tour-tab-btn:hover{ 
  color:var(--fg);
  padding-left: 20px;
}
.tour-tab-btn:hover::before {
  opacity: 1;
  left: 4px;
}
.tour-tab-btn.active{ 
  color:var(--accent); 
  border-bottom-color:var(--accent);
  padding-left: 20px;
}
.tour-tab-btn.active::before {
  opacity: 1;
  left: 4px;
}
.tour-tab-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--muted);
}
.tour-tab-btn:disabled:hover{
  padding-left: 8px;
}
.tour-tab-btn:disabled:hover::before{
  opacity: 0;
}
.tour-tabpanel{ 
  display:block;
  animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tour-tabpanel.hidden{ display:none }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sous-panels */
.subtabpanel{ display:block }
.subtabpanel.hidden{ display:none }

/* Sections paramètres */
.settings-section{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }
.settings-section:first-child{ margin-top:0; padding-top:0; border-top:none }
.settings-section h4{ margin:0 0 10px 0; font-size:14px }

/* Indicateurs de critères de mot de passe */
.password-requirements{ 
  background: var(--input-bg); 
  padding: 8px 12px; 
  border-radius: 6px; 
  border: 1px solid var(--border);
}
.pwd-req{ 
  list-style: none; 
  position: relative; 
  padding-left: 24px;
  margin: 4px 0;
  color: var(--muted);
}
.pwd-req::before{ 
  content: '✗'; 
  position: absolute; 
  left: 0; 
  color: var(--danger);
  font-weight: bold;
}
.pwd-req.valid{ color: var(--success); }
.pwd-req.valid::before{ content: '✓'; color: var(--success); }

/* Rounds/Tours */
.rounds-container{ margin-top:20px }
.rounds-list{ 
  display:grid; 
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:16px; 
}
.round-card{ 
  position:relative; 
  background:var(--card); 
  border:1px solid var(--border); 
  border-left:3px solid var(--border);
  border-radius:var(--radius-sm); 
  padding:20px; 
  cursor:pointer; 
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.round-card:hover{ 
  border-left-color:var(--accent); 
  transform:translateX(4px) translateY(-2px);
  box-shadow: -4px 4px 16px rgba(var(--accent-rgb),0.2);
}
.round-card.active{ 
  border-left-color:var(--accent); 
  border-left-width:4px;
  background:var(--accent-ghost); 
  box-shadow:-4px 4px 20px rgba(var(--accent-rgb),0.3);
}
.round-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.round-number{ 
  display:inline-flex; 
  align-items:center; 
  justify-content:center; 
  width:40px; 
  height:40px; 
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent); 
  border-radius:var(--radius-xs); 
  font-weight:600; 
  font-size:16px;
  font-family: 'IBM Plex Mono', monospace;
  transition: all 0.3s;
}
.round-card.active .round-number{ 
  background:var(--accent); 
  color:var(--bg);
  transform: rotate(5deg);
}
.round-name{ 
  font-weight:600; 
  font-size:15px; 
  margin-top:12px; 
  padding:6px; 
  border-radius:var(--radius-xs); 
  transition:all .2s;
  font-family: 'Archivo', sans-serif;
}
.round-name[contenteditable="true"]{ 
  background:rgba(var(--accent-rgb),0.1); 
  outline:2px solid var(--accent); 
  cursor:text;
}
.round-stats{ 
  display:flex; 
  gap:16px; 
  margin-top:16px; 
  font-size:11px; 
  color:var(--muted);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.round-actions{ 
  position:absolute; 
  top:16px; 
  right:16px; 
  display:flex; 
  gap:6px; 
  opacity:0; 
  transition:opacity .3s;
}
.round-card:hover .round-actions{ opacity:1 }
.round-actions button{ background:transparent; border:none; color:var(--muted); cursor:pointer; padding:4px; font-size:14px }
.round-actions button:hover{ color:var(--fg) }

.row{ display:flex; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap } .gap{ gap:12px }
.grid{ display:grid } .grid-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
@media (max-width:900px){ .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:640px){ .grid-4{ grid-template-columns:1fr } }

.field{ display:flex; flex-direction:column; gap:6px; margin-top:10px }
.field>span{ color:var(--muted); font-size:12px }
input,textarea,select{ 
  width:100%; 
  padding:10px 12px; 
  border-radius:var(--radius-sm); 
  border:1px solid var(--border); 
  background:var(--input-bg); 
  color:var(--fg);
  font:inherit;
  transition:all .2s;
}
input:focus,textarea:focus,select:focus{ 
  border-color:var(--accent); 
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15);
  outline:none;
}

/* Anciens tabs (deprecated mais gardés pour compatibilité) */
.tabs{ display:flex; gap:8px; margin-left:16px }
.tab{ background:var(--input-bg); color:var(--fg); border:1px solid var(--border); border-radius:10px; padding:8px 12px; cursor:pointer }
.tab.active{ background:var(--accent-ghost); border-color:var(--accent) }
.tab:disabled{ opacity:.5; cursor:not-allowed }
.tabpanel{ margin:0 8px }

/* Chips entreprises */
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center }
.chip{ background:var(--input-bg); border:1px solid var(--border); color:var(--fg);
       padding:6px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:8px }
.chip button{ background:transparent; border:none; color:var(--muted); cursor:pointer; font-size:14px; }
.chip button:hover{ color:#fff }

/* Tables */
.table-wrapper{ 
  width:100%; 
  overflow-x:auto;
  overflow-y:auto;
  border:1px solid var(--border); 
  border-radius:var(--radius-sm); 
  background:var(--card);
  box-shadow: var(--shadow-soft);
  /* Amélioration du scroll sur mobile */
  -webkit-overflow-scrolling: touch;
}
.table-wrapper.tall{ max-height:75vh }
table{ 
  width:100%; 
  min-width:max-content;
  border-collapse:separate;
  border-spacing:0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  table-layout: auto;
}
th,td{ 
  padding:10px 14px; 
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis; 
  vertical-align:top; 
  text-align:left; 
  white-space:nowrap; 
  direction:ltr;
  transition: all 0.2s;
  /* Permettre le retour à la ligne si le contenu est trop long */
  word-break: break-word;
}
thead tr:first-child th{ border-top:1px solid var(--border); }
th:first-child, td:first-child{ border-left:1px solid var(--border); }
tbody tr:hover td {
  background: rgba(var(--accent-rgb),0.03);
}
tbody tr:hover .sticky-col,
tbody tr:hover .sticky-col2 {
  background: var(--sticky);
}
thead{ 
  background:var(--sticky); 
  position:sticky; 
  top:0; 
  z-index:50;
}
thead th{ 
  border-bottom:2px solid var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper);
  font-weight: 600;
  background:var(--sticky);
  position:sticky;
  top:0;
  z-index:50;
}
.moe-border{ border-left:2px solid var(--accent) !important; }
.moe-col{ background:rgba(var(--accent-rgb),0.05); border-left:2px solid var(--accent) !important; }
.company-col{ 
  background:rgba(var(--blueprint-rgb),0.05); 
  border-left:2px solid var(--accent) !important;
}
.company-border{
  border-left:2px solid var(--accent) !important;
}
.sticky-col{ 
  position:sticky; 
  left:0; 
  z-index:40; 
  background:var(--card); 
  min-width:120px; 
  width:120px; 
  max-width:120px;
  font-weight: 500;
  border-right:2px solid var(--accent) !important;
}
.sticky-col2{ 
  position:sticky; 
  left:120px; 
  z-index:40; 
  background:var(--card); 
  min-width:320px; 
  max-width:520px; 
  white-space:normal; 
  word-wrap:break-word;
  font-weight: 400;
  border-right:2px solid var(--accent) !important;
}
thead .sticky-col, thead .sticky-col2{ 
  background:var(--sticky);
  z-index:100;
  top:0;
  position:sticky;
}
thead th{
  position:sticky;
  top:0;
  z-index:99;
  background:var(--sticky);
}
/* Assurer l'opacité sur le corps du tableau pour masquer ce qui est derrière */
tbody .sticky-col, tbody .sticky-col2{
  background: var(--card);
  opacity: 1 !important;
}
tbody tr:hover .sticky-col,
tbody tr:hover .sticky-col2{
  background: var(--card);
  opacity: 1 !important;
}

/* Style pour summary-table sticky columns */
.summary-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 40;
  background: var(--card);
  min-width: 120px;
  width: 120px;
  max-width: 120px;
  font-weight: 500;
  border-right: 2px solid var(--accent) !important;
  padding: 12px 16px;
}

.summary-table .sticky-col2 {
  position: sticky;
  left: 120px;
  z-index: 40;
  background: var(--card);
  min-width: 150px;
  font-weight: 400;
  border-right: 2px solid var(--accent) !important;
  padding: 12px 16px;
}

.summary-table thead .sticky-col {
  background: var(--sticky);
  z-index: 100;
  top: 0;
  position: sticky;
  border-right: 2px solid var(--accent) !important;
}

.summary-table thead .sticky-col2 {
  background: var(--sticky);
  z-index: 100;
  top: 0;
  position: sticky;
  border-right: 2px solid var(--accent) !important;
}

.summary-table tbody .sticky-col {
  background: var(--card);
  opacity: 1 !important;
  border-right: 2px solid var(--accent) !important;
}

.summary-table tbody .sticky-col2 {
  background: var(--card);
  opacity: 1 !important;
  border-right: 2px solid var(--accent) !important;
}

.summary-table tbody tr:hover .sticky-col {
  background: rgba(var(--accent-rgb),0.05);
  opacity: 1 !important;
  border-right: 2px solid var(--accent) !important;
}

.summary-table tbody tr:hover .sticky-col2 {
  background: rgba(var(--accent-rgb),0.05);
  opacity: 1 !important;
  border-right: 2px solid var(--accent) !important;
}

.summary-table .lot-header-row .sticky-col {
  background: rgba(var(--accent-rgb),0.12);
  border-right: 2px solid var(--accent) !important;
}

.summary-table .lot-header-row .sticky-col2 {
  background: rgba(var(--accent-rgb),0.12);
  border-right: 2px solid var(--accent) !important;
}

.summary-table .total-row .sticky-col {
  background: rgba(var(--accent-rgb),0.12);
  border-right: 2px solid var(--accent) !important;
  position: sticky;
  left: 0;
  z-index: 40;
}

.summary-table .total-row .sticky-col2 {
  background: rgba(var(--accent-rgb),0.12);
  border-right: 2px solid var(--accent) !important;
  position: sticky;
  left: 120px;
  z-index: 40;
}
/* Multi-lignes header sticky : la seconde ligne est décalée */
thead tr.head-row-1 th { top:0; }
thead tr.head-row-2 th { top: var(--head-row1-height, 0px); }
.delta-pos{ color:var(--success); font-weight:600 } 
.delta-neg{ color:var(--danger); font-weight:600 }
.delta-positive{ color:var(--danger); font-weight:600 } /* MOE > Offre = surplus */
.delta-negative{ color:var(--success); font-weight:600 } /* MOE < Offre = moins cher */

/* Ligne de totaux dans le comparatif */
#compare-body .total-row{ 
  background:rgba(var(--accent-rgb),0.08); 
  border-top:3px solid var(--accent); 
  font-weight:700;
}
#compare-body .total-row td{ 
  padding:14px 14px; 
  border-top:3px solid var(--accent);
  font-size: 14px;
  /* Totaux non-sticky: ils défilent avec le tableau */
}
#compare-body .total-row .sticky-col, 
#compare-body .total-row .sticky-col2{ 
  background: var(--card);
  z-index: 42; /* au-dessus du contenu, en dessous des en-têtes */
  background-clip: padding-box;
}

/* Tableur d'édition */
#sheet-table td[contenteditable]{ 
  min-width:110px;
  max-width: 200px;
  background:rgba(var(--accent-rgb),0.02); 
  outline:none; 
  direction:ltr; 
  unicode-bidi:normal;
  transition: all 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
}
#sheet-table td[contenteditable]:focus{ 
  box-shadow:inset 0 0 0 2px var(--accent);
  background:rgba(var(--accent-rgb),0.08);
}
.sheet-legend-chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
}
.sheet-legend-swatch{
  width:14px;
  height:14px;
  border-left:3px solid transparent;
  border-radius:2px;
  background:rgba(var(--accent-rgb),0.12);
}
.cell-readonly{ color:var(--muted) }

/* Bouton avec changements non sauvegardés */
.btn-unsaved{ 
  background:var(--warning); 
  color:var(--bg); 
  animation:pulseWarning 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(210,153,34,0.4);
}
@keyframes pulseWarning{ 
  0%, 100%{ opacity:1; transform: scale(1); } 
  50%{ opacity:0.85; transform: scale(1.02); } 
}

/* Loader global */
.loader-overlay{ 
  position:fixed; 
  top:0; left:0; right:0; bottom:0; 
  background:rgba(var(--bg-rgb),0.95); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  z-index:9999; 
  backdrop-filter:blur(12px);
  animation: fadeIn 0.3s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.loader-spinner{ 
  width:60px; 
  height:60px; 
  border:3px solid var(--border); 
  border-top-color:var(--accent); 
  border-right-color:var(--accent);
  border-radius:2px; 
  animation:spinSquare 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
@keyframes spinSquare{ 
  0% { transform:rotate(0deg) scale(1); }
  50% { transform:rotate(180deg) scale(1.1); }
  100% { transform:rotate(360deg) scale(1); }
}

/* Small inline spinner for buttons */
.spinner-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinSmall 0.6s linear infinite;
  vertical-align: middle;
}
@keyframes spinSmall {
  to { transform: rotate(360deg); }
}

/* Tableau récapitulatif */
.summary-table{ 
  width:100%; 
  border-collapse:collapse; 
  font-size:13px;
  font-family: 'IBM Plex Mono', monospace;
}
.summary-table th, .summary-table td{ 
  padding:12px 16px; 
  text-align:left; 
  border-bottom:1px solid var(--border);
  transition: all 0.2s;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-table tbody tr:hover {
  background: rgba(var(--accent-rgb),0.04);
}
.summary-table th{ 
  background:var(--sticky); 
  font-weight:600; 
  position:sticky; 
  top:0; 
  z-index:1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--copper);
  border-bottom: 2px solid var(--accent);
}
.summary-table th.amount, .summary-table td.amount{ 
  text-align:right; 
  font-variant-numeric:tabular-nums;
  font-family: 'IBM Plex Mono', monospace;
}

/* Lignes d'en-tête de lot */
.summary-table .lot-header-row{ 
  background:rgba(var(--accent-rgb),0.08); 
  font-weight:600;
  border-left: 3px solid var(--accent);
}
.summary-table .lot-header-row td{ 
  border-top:2px solid var(--accent); 
  padding:14px 16px;
}
.summary-table .lot-name-cell{ 
  font-weight:600; 
  vertical-align:middle; 
  border-right:2px solid var(--accent); 
  background:rgba(var(--accent-rgb),0.12);
  max-width: 200px;
  min-width: 150px;
  font-family: 'Archivo', sans-serif;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.summary-table .moe-amount{ 
  background:rgba(var(--accent-rgb),0.1); 
  color:var(--copper); 
  font-weight:600;
}

/* Lignes des entreprises */
.summary-table .company-row{ background:var(--card) }
.summary-table .company-row:hover{ background:rgba(var(--accent-rgb),0.05) }
.summary-table .company-name-cell{ 
  padding-left:32px; 
  color:var(--muted); 
  font-size:12px;
  position: relative;
}
.summary-table .company-name-cell::before {
  content: '└';
  position: absolute;
  left: 16px;
  color: var(--border);
}

/* Écarts */
.summary-table .ecart-positive{ color:var(--danger); font-weight:700 }
.summary-table .ecart-negative{ color:var(--success); font-weight:700 }
.summary-table .ecart-zero{ color:var(--muted) }
.summary-table .empty-cell{ color:var(--muted); font-size:18px }

/* Totaux */
.summary-table .total-row{ 
  background:rgba(var(--accent-rgb),0.12); 
  font-weight:700; 
  border-top:3px solid var(--accent);
  border-left: 4px solid var(--accent);
}
.summary-table .total-row th{ 
  padding:16px 16px; 
  font-size:14px;
}

/* Garder les totaux visibles dans les tableaux récap (sticky bottom) */
/* Les totaux du récapitulatif ne sont pas sticky (défilent normalement) */

/* Ligne MOE dans totaux */
.summary-table .moe-total-row {
  background: rgba(var(--blueprint-rgb), 0.15);
  border-left: 4px solid var(--blueprint);
  border-top: 3px solid var(--blueprint);
}
.summary-table .moe-total-cell {
  color: var(--blueprint);
  font-weight: 700;
}

/* Ligne simulation moins-disant */
.summary-table .simulation-row {
  background: rgba(var(--success-rgb), 0.15);
  border-left: 4px solid var(--success);
}
.summary-table .simulation-name {
  font-style: italic;
  font-size: 13px;
}

/* Code lot */
.summary-table .lot-code{ 
  display:inline-block; 
  background:var(--accent); 
  padding:4px 10px; 
  border-radius:2px; 
  font-size:11px; 
  font-weight:600; 
  margin-right:10px; 
  color:var(--bg); 
  border:none;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
}

.macro-lot-chip{
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  color:var(--muted);
  background:var(--input-bg);
}

.lot-name-macro-inline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

.lot-name-inline-text{
  min-width:0;
  flex:1 1 auto;
}

.lot-name-macro-inline .macro-lot-chip{
  margin-top:0;
  flex:0 0 auto;
}

.summary-table .macro-lot-badge{
  display:inline-block;
  margin-top:8px;
  padding:3px 8px;
  border:1px solid currentColor;
  border-radius:999px;
  background:rgba(255,255,255,0.55);
  font-size:11px;
  font-weight:600;
}

.summary-table .macro-lot-separator-row td{
  background:rgba(var(--accent-rgb),0.04);
  border-top:1px dashed var(--border);
  border-bottom:1px dashed var(--border);
  padding:8px 12px;
}

#rounds-macro-lot-colors{
  align-items:center;
}

.macro-lot-color-chip{
  font-size:12px;
}

/* Login page styles */
.btn-primary{ background:var(--accent); font-size:16px }
.auth-form{ margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }

/* Theme Selector */
.theme-selector{ display:flex; gap:12px; margin-top:8px }
.theme-option{ 
  flex:1; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  gap:8px; 
  padding:16px; 
  background:var(--card); 
  border:2px solid var(--border); 
  border-radius:var(--radius-sm); 
  cursor:pointer; 
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'IBM Plex Mono', monospace;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
}
.theme-option:hover{ 
  border-color:var(--accent); 
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(var(--accent-rgb),0.2);
}
.theme-option.active{ 
  border-color:var(--accent); 
  border-width:3px;
  background:var(--accent-ghost);
  color:var(--accent);
  box-shadow:0 4px 16px rgba(var(--accent-rgb),0.3);
}
.theme-preview{ 
  width:60px; 
  height:40px; 
  border-radius:var(--radius-xs); 
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.auto-preview{
  background: var(--bg);
}
.auto-preview::after{
  content:'⚙';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  font-size:14px;
  color:var(--muted);
}
.dark-preview{ 
  background: var(--bg);
}
.dark-preview::after{
  content:'';
  position:absolute;
  top:4px; left:4px;
  width:12px; height:12px;
  background:var(--accent);
  border-radius:1px;
}
.light-preview{ 
  background: var(--card);
}
.light-preview::after{
  content:'';
  position:absolute;
  top:4px; left:4px;
  width:12px; height:12px;
  background:var(--accent);
  border-radius:1px;
}

.share-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 10px;
  background: var(--bg-pattern);
}
.share-item-info{
  flex: 1;
}
.share-item-email{
  font-weight: 500;
}
.share-item-perms{
  color: var(--muted);
  font-size: 12px;
}
.btn-sm{
  padding: 6px 12px;
  font-size: 12px;
}

/* ===== Aide Contextuelle ===== */
#help-overlay {
  position: fixed;
  bottom: 16px; right: 16px;
  width: 340px;
  max-height: 60vh;
  overflow: auto;
  background: var(--card);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  padding: 14px 16px;
  z-index: 1200;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#help-overlay h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.06em;
}
.help-item {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.help-item code {
  background: var(--bg-pattern);
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--copper);
}
.help-highlight {
  position: relative;
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 4px !important;
  animation: helpPulse 2s infinite;
}
@keyframes helpPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.4); }
  50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb),0.12); }
}
.help-tooltip {
  position: absolute;
  top: 100%; left: 0;
  transform: translateY(6px);
  background: var(--card);
  border: 1px solid var(--accent);
  padding: 6px 8px;
  font-size: 11px;
  max-width: 240px;
  z-index: 1300;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s, transform .25s;
}
.help-tooltip.show { opacity: 1; transform: translateY(0); }
/* Éditeur de questions */
#questions-editor-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  table-layout: auto;
  isolation: isolate;
}
#questions-editor-table th,
#questions-editor-table td {
  padding: 4px 6px;
  text-align: left;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  white-space: nowrap;
}
#questions-editor-table th:first-child,
#questions-editor-table td:first-child {
  border-left: 1px solid var(--border);
}
#questions-editor-head tr:first-child th {
  border-top: 1px solid var(--border);
}
#questions-editor-table th {
  background: var(--sticky);
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 50;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--copper);
  border-bottom: 2px solid var(--accent);
}
#questions-editor-head tr.head-row-1 th { top: 0; z-index: 52; }
#questions-editor-head tr.head-row-2 th {
  top: var(--questions-head-row1-height, 0px);
  z-index: 51;
}
#questions-editor-table thead th:not(.sticky-col):not(.sticky-col2):not(.sticky-actions):not(.sticky-question) {
  z-index: 51;
}
#questions-editor-table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 40;
  background: var(--card);
  min-width: 90px;
  width: 90px;
  max-width: 90px;
  border-right: 2px solid var(--accent) !important;
}
#questions-editor-table .sticky-col2 {
  position: sticky;
  left: 162px;
  z-index: 40;
  background: var(--card);
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  white-space: normal;
  word-wrap: break-word;
  border-right: 1px solid var(--border) !important;
}
#questions-editor-table .sticky-actions {
  position: sticky;
  left: 90px;
  z-index: 40;
  background: var(--card);
  width: 72px;
  min-width: 72px;
  max-width: 72px;
  text-align: center;
  white-space: nowrap;
  border-right: 1px solid var(--border) !important;
}
#questions-editor-table .sticky-actions .btn-validate-editor-question,
#questions-editor-table .sticky-actions .btn-delete-editor-question {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 2px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
}
#questions-editor-table .sticky-actions .btn-validate-editor-question {
  color: var(--success);
}
#questions-editor-table .sticky-actions .btn-delete-editor-question {
  color: var(--danger);
}
#questions-editor-table .sticky-actions .btn-validate-editor-question:hover,
#questions-editor-table .sticky-actions .btn-delete-editor-question:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: var(--accent);
}
#questions-editor-table .sticky-actions .btn-validate-editor-question:active,
#questions-editor-table .sticky-actions .btn-delete-editor-question:active {
  transform: translateY(1px);
}
#questions-editor-table .sticky-question {
  position: sticky;
  left: 482px; /* 90 + 72 + 320 */
  z-index: 40;
  background: var(--card);
  width: 360px;
  overflow: visible;
  min-width: 320px;
  max-width: 500px;
  white-space: normal;
  word-wrap: break-word;
  border-right: 2px solid var(--accent) !important;
}
/* Bouton rétraction colonne Désignation */
.desig-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  transition: color .15s, background .15s;
  vertical-align: middle;
}
.desig-toggle-btn:hover { color: var(--accent); background: rgba(var(--accent-rgb), 0.10); }
.desig-toggle-btn::after { content: '\25C0'; } /* ◀ */
#questions-editor-table.desig-collapsed .desig-toggle-btn::after { content: '\25B6'; } /* ▶ */
.desig-toggle-label { margin-left: 4px; }
/* État rétracté */
#questions-editor-table.desig-collapsed .sticky-col2 {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  padding: 2px 4px !important;
  overflow: hidden;
}
#questions-editor-table.desig-collapsed .sticky-col2 .desig-toggle-label,
#questions-editor-table.desig-collapsed .sticky-col2 .desig-text {
  display: none;
}
#questions-editor-table.desig-collapsed .sticky-question {
  left: 194px !important; /* 90 + 72 + 32 */
  width: 600px;
  min-width: 480px;
  max-width: 780px;
}
#questions-editor-table thead .sticky-col,
#questions-editor-table thead .sticky-col2,
#questions-editor-table thead .sticky-actions,
#questions-editor-table thead .sticky-question {
  background: var(--sticky);
  z-index: 70 !important;
}
#questions-editor-table tbody .sticky-col,
#questions-editor-table tbody .sticky-col2,
#questions-editor-table tbody .sticky-actions,
#questions-editor-table tbody .sticky-question {
  background: var(--card);
}
#questions-editor-table .questions-group-start {
  border-left: 2px solid var(--accent) !important;
}
#questions-editor-table th.company-unit-group,
#questions-editor-table th.question-company-unit-col,
#questions-editor-table td.question-company-unit-cell {
  background: rgba(var(--blueprint-rgb), 0.05);
}
#questions-editor-table th.question-company-unit-col,
#questions-editor-table td.question-company-unit-cell {
  min-width: 108px;
}
#questions-editor-table th.moe-highlight,
#questions-editor-table td.moe-cell {
  background: rgba(var(--accent-rgb), 0.08);
  font-weight: 600;
}
#questions-editor-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.04);
}
#questions-editor-table tbody tr:hover td.moe-cell {
  background: rgba(var(--accent-rgb), 0.12);
}
#questions-editor-table tbody tr:hover td.question-company-unit-cell {
  background: rgba(var(--blueprint-rgb), 0.10);
}
#questions-editor-table tbody tr:hover .sticky-col,
#questions-editor-table tbody tr:hover .sticky-col2,
#questions-editor-table tbody tr:hover .sticky-actions,
#questions-editor-table tbody tr:hover .sticky-question {
  background: var(--card);
}
#questions-editor-table .question-hierarchy.qitem-level-0 {
  font-weight: 700;
}
#questions-editor-table .question-hierarchy.qitem-level-1 {
  font-weight: 650;
}
#questions-editor-table .question-hierarchy.qitem-level-2 {
  font-weight: 600;
}
#questions-editor-table .question-hierarchy.qitem-level-3 {
  font-weight: 500;
}
/* Écarts avec couleurs selon le niveau */
#questions-editor-table .ecart-very-low {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
  font-weight: 700;
  border-left: 3px solid #0d6efd;
}
#questions-editor-table .ecart-low {
  background: rgba(13, 202, 240, 0.15);
  color: #0dcaf0;
  font-weight: 600;
  border-left: 3px solid #0dcaf0;
}
#questions-editor-table .ecart-high {
  background: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
  font-weight: 600;
  border-left: 3px solid #fd7e14;
}
#questions-editor-table .ecart-very-high {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  font-weight: 700;
  border-left: 3px solid #dc3545;
}
#questions-editor-table .ecart-unanswered {
  font-weight: 600;
}
#questions-editor-table .unit-mismatch-cell {
  background: rgba(245, 158, 11, 0.10);
  color: var(--warning);
  font-weight: 600;
}
#questions-editor-table .unit-mismatch-note {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1.35;
  white-space: normal;
}
#questions-editor-table td.ecart-unanswered.target-company-highlight {
  border-right: 3px solid var(--warning);
}
/* Surbrillance de l'entreprise ciblée */
#questions-editor-table th.target-company-highlight {
  background: rgba(245, 158, 11, 0.20);
  border-left: 3px solid var(--warning);
  border-right: 3px solid var(--warning);
  font-weight: 700;
  color: var(--fg);
}
#questions-editor-table td.target-company-highlight {
  background: rgba(245, 158, 11, 0.12);
  border-left: 3px solid var(--warning);
  border-right: 3px solid var(--warning);
  font-weight: 600;
}
#questions-editor-table tbody tr:hover td.target-company-highlight {
  background: rgba(245, 158, 11, 0.18);
}

/* Les couleurs d'écart ont la priorité sur la surbrillance */
#questions-editor-table td.ecart-very-low.target-company-highlight,
#questions-editor-table td.ecart-low.target-company-highlight,
#questions-editor-table td.ecart-high.target-company-highlight,
#questions-editor-table td.ecart-very-high.target-company-highlight {
  border-right: 3px solid var(--warning);
}
#questions-editor-table td.ecart-very-low.target-company-highlight {
  background: rgba(13, 110, 253, 0.15);
  color: #0d6efd;
  border-left: 3px solid #0d6efd;
}
#questions-editor-table td.ecart-low.target-company-highlight {
  background: rgba(13, 202, 240, 0.15);
  color: #0dcaf0;
  border-left: 3px solid #0dcaf0;
}
#questions-editor-table td.ecart-high.target-company-highlight {
  background: rgba(253, 126, 20, 0.15);
  color: #fd7e14;
  border-left: 3px solid #fd7e14;
}
#questions-editor-table td.ecart-very-high.target-company-highlight {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  border-left: 3px solid #dc3545;
}

#questions-editor-table .validated-question-cell {
  background: rgba(40, 167, 69, 0.15);
  color: #1f8a46;
  font-weight: 700;
  border-left: 3px solid #28a745;
}

#questions-editor-table td.validated-question-cell.target-company-highlight {
  background: rgba(40, 167, 69, 0.15);
  color: #1f8a46;
  border-left: 3px solid #28a745;
  border-right: 3px solid var(--warning);
}

#questions-editor-table .validated-question-status {
  color: #1f8a46;
  font-weight: 700;
}

#questions-editor-table .validation-status {
  font-weight: 600;
}

#questions-editor-table .pending-question-status {
  color: var(--muted);
}

.question-text-editor {
  font-size: 12px;
  font-family: 'Archivo', sans-serif;
  resize: vertical;
  min-height: 26px;
}

/* Légende des écarts dans l'onglet questions */
#questions-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
#questions-legend > span:first-child {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--fg);
}
#questions-legend > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 300px;
}
#questions-legend > div > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(var(--accent-rgb), 0.04);
  transition: all 0.2s;
}
#questions-legend > div > div:hover {
  background: rgba(var(--accent-rgb), 0.08);
  transform: translateY(-1px);
}
#questions-legend span {
  font-size: 0.9rem;
  color: var(--fg);
}
#questions-legend span.muted {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 600;
}

/* Autosave status buttons */
#save-thresholds {
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#save-thresholds:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Autosave grid button */
#save-grid {
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#save-grid.btn-unsaved {
  animation: pulse-unsaved 0.8s ease-in-out infinite;
}

@keyframes pulse-unsaved {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.spinner {
  display: inline-block;
  animation: spin 0.8s linear infinite;
}

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

/* ================= Modal ================= */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#notify-modal {
  z-index: 10000;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: var(--shadow-strong);
}

.modal-content h3 {
  color: var(--copper);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.modal-content p {
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.6;
}

/* ================= Save Status Indicator ================= */
.save-status {
  animation: pulse 0.6s ease-in-out;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Styles pour formulaire de login */
.forgot-pwd-text {
  margin-top: 0.5rem;
  font-size: 0.85em;
}

.link-primary {
  color: var(--blueprint);
  text-decoration: none;
  cursor: pointer;
}

/* Comment badge on offer amount cells */
.comment-badge {
  display: inline-block;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background: var(--warning, #f59e0b);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.link-primary:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* =========================================================
   RESPONSIVE — Tablette (≤900px) améliorations
   ========================================================= */
@media (max-width:900px){
  .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }

  /* Filtres et barres d'action : toujours wrapper */
  .row{ flex-wrap:wrap }
  .row.gap{ gap:8px }

  /* Réduire le padding des cards */
  .card{ padding:12px; margin:8px }

  /* Modal pleine largeur */
  .modal-content{ max-width:95vw !important; width:95vw !important; padding:20px }

  /* Tables : réduire les cellules */
  th,td{ padding:8px 10px; font-size:12px }

  /* Rounds grid */
  .rounds-list{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) }

  /* Tour sub-nav horizontal scroll */
  .tour-subnav{ overflow-x:auto; -webkit-overflow-scrolling:touch; gap:0 }
  .subnav-tabs{ flex-wrap:nowrap }

  /* Questions filter bar */
  #subtab-questions .row{ flex-wrap:wrap }
  #subtab-questions .row label{ font-size:12px; white-space:nowrap }
  #subtab-questions .row input,
  #subtab-questions .row select{ min-width:0; width:auto; flex:1 1 100px }
}

/* =========================================================
   RESPONSIVE — Mobile (≤640px)
   ========================================================= */
@media (max-width:640px){
  /* ---- Base ---- */
  body{ font-size:14px }
  .max-480{ max-width:100%; margin:16px 8px; padding:16px }
  .card{ padding:10px; margin:6px }
  h1,h2{ font-size:0.85em }

  /* ---- Grid & Layout ---- */
  .grid-4{ grid-template-columns:1fr !important }
  .row{ flex-wrap:wrap; gap:8px }

  /* ---- Boutons tactiles (min 44px touch target) ---- */
  .btn{ padding:12px 16px; font-size:13px; min-height:44px }
  .btn.ghost{ padding:10px 14px; min-height:44px }
  .btn-sm{ padding:8px 12px; font-size:12px; min-height:36px }
  .nav-btn{ padding:10px; font-size:11px; min-height:44px }
  .tour-tab-btn{ padding:10px 12px; font-size:11px; min-height:44px }
  .subnav-tabs button{ padding:8px 10px; font-size:11px; min-height:44px }

  /* ---- Inputs touch-friendly ---- */
  input,textarea,select{
    padding:12px;
    font-size:16px; /* Empêche le zoom auto sur iOS */
    min-height:44px;
  }

  /* ---- Fields ---- */
  .field{ margin-top:8px }
  .field>span{ font-size:12px }

  /* ---- Header / Navigation ---- */
  .header{ padding:8px 12px }
  .header-top{ gap:8px; flex-wrap:wrap }
  .header-top h1{ font-size:14px }
  .header-logo{ height:28px }
  .main-nav{ gap:2px; margin:0 4px; overflow-x:auto; flex-wrap:nowrap }

  /* Dashboard vertical nav → barre horizontale compacte */
  #dashboard .header{
    width:100% !important;
    height:auto !important;
    border-right:none !important;
    border-bottom:2px solid var(--border);
    overflow-x:auto;
  }
  #dashboard .header-top{
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  #dashboard .main-nav{
    flex-direction:row !important;
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  #dashboard .nav-label,
  #dashboard .btn-label{
    display:none !important;
  }
  #dashboard .nav-btn{
    padding:8px !important;
    justify-content:center !important;
  }
  #dashboard #toggle-help,
  #dashboard #logout{
    padding:8px !important;
    width:auto !important;
    justify-content:center !important;
  }

  /* Tab panels pleine largeur */
  #dashboard .tabpanel{ padding:8px 10px }

  /* ---- Tableaux adaptatifs ---- */
  .table-wrapper{
    border-radius:var(--radius-xs);
    margin:0 -6px; /* dépasse légèrement la card pour utiliser toute la largeur */
    width:calc(100% + 12px);
  }
  table{ font-size:11px }
  th,td{
    padding:6px 8px;
    font-size:11px;
    max-width:180px;
  }
  thead th{ font-size:10px; letter-spacing:0.04em }

  /* Colonnes sticky plus étroites sur mobile */
  .sticky-col{
    min-width:80px !important;
    width:80px !important;
    max-width:80px !important;
  }
  .sticky-col2{
    left:80px !important;
    min-width:160px !important;
    max-width:280px !important;
  }
  .summary-table .sticky-col{
    min-width:80px;
    width:80px;
    max-width:80px;
  }
  .summary-table .sticky-col2{
    left:80px;
    min-width:100px;
  }
  .summary-table thead .sticky-col2,
  .summary-table .total-row .sticky-col2{
    left:80px;
  }

  /* Cellules éditables */
  #sheet-table td[contenteditable]{
    min-width:80px;
    max-width:150px;
  }

  /* ---- Modals plein écran mobile ---- */
  .modal{
    align-items:flex-end; /* slide up from bottom */
  }
  .modal-content{
    max-width:100vw !important;
    width:100vw !important;
    max-height:90vh;
    overflow-y:auto;
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    padding:16px;
    margin:0;
  }
  .modal-header{
    position:sticky;
    top:0;
    background:var(--bg);
    z-index:10;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
    margin-bottom:8px;
  }
  .modal-header h3{ font-size:14px }

  /* Import modal full screen */
  #import-modal .modal-content{
    max-height:95vh;
    height:95vh;
  }

  /* ---- Lots/Rounds cards ---- */
  .rounds-list{ grid-template-columns:1fr !important }
  .round-card{ padding:14px }
  .round-actions{ opacity:1 } /* toujours visible sur mobile (pas de hover) */

  /* ---- Actions tableur ---- */
  #sheet-actions{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  #sheet-actions input[name="company-input"]{
    width:100% !important;
    min-width:0 !important;
  }
  #lot-companies{ width:100% }

  /* ---- Filtres fiches questions ---- */
  #subtab-questions .row{
    flex-wrap:wrap;
    gap:6px;
  }
  #subtab-questions .row label{
    font-size:11px;
    flex:0 0 auto;
  }
  #subtab-questions .row input,
  #subtab-questions .row select{
    flex:1 1 120px;
    min-width:0;
    width:auto;
  }
  #subtab-questions .row input[type="number"]{
    width:60px !important;
    flex:0 0 60px;
  }
  #subtab-questions .row input[type="text"]{
    width:100% !important;
    flex:1 1 100%;
  }

  /* ---- Questions editor ---- */
  #questions-editor-table{ font-size:11px }
  #questions-editor-table th,
  #questions-editor-table td{ padding:6px 8px }
  .question-text-editor{ font-size:11px }
  
  /* ---- Questions legend ---- */
  #questions-legend {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #questions-legend > div {
    min-width: auto !important;
    width: 100%;
    flex-direction: column;
    gap: 8px !important;
  }
  #questions-legend > div > div {
    width: 100%;
    padding: 8px;
  }

  /* ---- Summary table ---- */

  .summary-table{ font-size:11px }
  .summary-table th,.summary-table td{ padding:8px 10px; font-size:11px }
  .summary-table .lot-name-cell{ min-width:100px; font-size:12px }

  /* ---- Tour subnav ---- */
  .tour-subnav{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 12px;
    gap:0;
  }
  .tour-tab-btn{
    white-space:nowrap;
    flex-shrink:0;
  }
  .subnav{
    flex-wrap:wrap;
    padding:6px 8px;
  }
  .subnav .subnav-tabs{
    width:100%;
    overflow-x:auto;
  }

  /* ---- Aide contextuelle ---- */
  #help-overlay{
    width:90vw;
    right:5vw;
    bottom:8px;
    max-height:50vh;
  }

  /* ---- Login page ---- */
  .login-logo{ height:60px }
  .login-logo-container{ margin-bottom:16px }

  /* ---- Chips ---- */
  .chips{ gap:4px }
  .chip{ padding:4px 8px; font-size:12px }

  /* ---- Thème selector ---- */
  .theme-selector{ flex-direction:column; gap:8px }
  .theme-option{ padding:12px; flex-direction:row; gap:12px }
  .theme-preview{ width:40px; height:28px }

  /* ---- Settings ---- */
  .settings-section{ padding-top:12px; margin-top:12px }
  .settings-section h4{ font-size:13px }

  /* ---- Comparaison tours - selects ---- */
  #rounds-compare-view .row{
    flex-direction:column;
    align-items:stretch !important;
  }
  #rounds-compare-view .row .spacer{ display:none }
  #rounds-compare-view select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding:6px 10px !important;
    height:34px;
    font-size:13px;
  }

  /* ---- Import preview ---- */
  #import-preview-table{ font-size:10px }

  /* ---- Password requirements ---- */
  .password-requirements{ padding:6px 10px; font-size:12px }
  .pwd-req{ font-size:12px; padding-left:20px }

  /* ---- Share/access items ---- */
  .share-item{ flex-direction:column; align-items:flex-start; gap:8px }
}

/* =========================================================
   RESPONSIVE — Très petit mobile (≤400px)
   ========================================================= */
@media (max-width:400px){
  body{ font-size:13px }
  .card{ padding:8px; margin:4px }

  /* Plus de sticky columns : trop étroit */
  .sticky-col,
  .sticky-col2{
    position:static !important;
    min-width:auto !important;
    width:auto !important;
    max-width:none !important;
  }
  .summary-table .sticky-col,
  .summary-table .sticky-col2{
    position:static !important;
    min-width:auto !important;
    width:auto !important;
    max-width:none !important;
  }

  /* Tableaux : autoriser le retour à la ligne */
  th,td{
    white-space:normal !important;
    word-break:break-word;
    max-width:120px;
  }

  table{ font-size:10px }
  th,td{ padding:4px 6px }

  .btn{ padding:10px 12px; font-size:12px }
  .btn.ghost{ padding:8px 10px }

  .header-top h1{ display:none }

  /* Rounds cards compactes */
  .round-card{ padding:10px }
  .round-number{ width:32px; height:32px; font-size:14px }
  .round-stats{ gap:8px; font-size:10px }

  /* Modal ajustement */
  .modal-content{ padding:12px }
  .modal-content h3{ font-size:13px }
}

/* =========================================================
   UTILITAIRES RESPONSIVES
   ========================================================= */
/* Permettre aux textes longs de s'adapter dans les cellules */
.text-wrap{ white-space:normal !important; word-break:break-word }
.text-truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Scroll horizontal fluide pour les wrappers de table */
.table-wrapper{
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color: var(--accent) var(--border);
}
.table-wrapper::-webkit-scrollbar{ height:6px }
.table-wrapper::-webkit-scrollbar-track{ background:var(--border); border-radius:3px }
.table-wrapper::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:3px }

/* Safe area pour les iPhones avec notch */
@supports(padding: max(0px)){
  .header{ padding-top:max(12px, env(safe-area-inset-top)) }
  .modal-content{ padding-bottom:max(16px, env(safe-area-inset-bottom)) }
}

/* Empêcher le texte de dépasser des boutons */
.btn,.btn.ghost,.nav-btn,.tour-tab-btn{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}