:root { 
  --gold: #D4AF37; 
  --dark: #1a1a1a; 
  --black: #000; 
  --white: #fff; 
  --red: #ff4444; 
  --gray: #444; 
  --bg-input: #222; 
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { 
  font-family: 'Segoe UI', sans-serif; 
  background: var(--black); 
  color: var(--white); 
  margin: 0; 
  padding: 0; 
  width: 100%;
  height: 100%; 
  position: fixed;
  display: flex; 
  flex-direction: column; 
  overflow: hidden; 
}

#SPLASH_SCREEN, #AUTH_SCREEN, #CGU_SCREEN { position: fixed; inset: 0; background: black; z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#AUTH_SCREEN, #CGU_SCREEN { z-index: 9998; display: none; padding: 20px; }

/* STYLES CGU */
#CGU_SCREEN { justify-content: flex-start; padding-top: 40px; }
.cgu-box { background: #111; border: 1px solid var(--gold); border-radius: 10px; width: 95%; max-height: 50vh; overflow-y: auto; padding: 15px; font-size: 1.4vh; color: #ccc; margin-bottom: 20px; line-height: 1.5; }
.cgu-check { display: flex; align-items: center; gap: 10px; font-size: 1.6vh; margin-bottom: 20px; width: 95%; }
.cgu-check input { width: 25px; height: 25px; accent-color: var(--gold); }
.btn-cgu { background: #333; color: #888; border: none; padding: 15px; font-size: 2vh; font-weight: bold; border-radius: 8px; width: 90%; transition: 0.3s; }
.btn-cgu.active { background: var(--gold); color: black; }

#authCode { width: 90%; height: 7vh; font-size: 3vh; text-align: center; background: #222; color: var(--gold); border: 2px solid var(--gold); border-radius: 15px; margin-bottom: 20px; padding: 10px; }
.logo-anim { width: 100px; height: 100px; border-radius: 20%; overflow: hidden; border: 2px solid var(--gold); box-shadow: 0 0 20px rgba(212, 175, 55, 0.5); }
.logo-anim img { width: 100%; height: 100%; object-fit: cover; }

.app-container { 
  display: none; 
  flex-direction: column; 
  width: 100%;
  height: 100%;
  flex: 1; 
  min-height: 0;
  overflow-y: auto; 
  padding: 5px 10px; 
  scrollbar-width: none; 
}

h1 { color: var(--gold); text-align: center; font-size: 2.5vh; text-transform: uppercase; border-bottom: 1px solid var(--gold); margin: 2px 0 5px 0; flex-shrink: 0; }
.mode-selector { display: flex; gap: 5px; margin: 0 0 5px 0; flex-shrink: 0; }
.mode-btn { flex: 1; padding: 8px 2px; border: 1px solid var(--gold); background: transparent; color: var(--gold); border-radius: 8px; font-weight: bold; font-size: 1.6vh; }
.mode-btn.active { background: var(--gold); color: var(--black); }

.metier-bar { display: flex; justify-content: space-around; background: rgba(34,34,34,0.8); padding: 8px 4px; border-radius: 12px; flex-shrink: 0; border: 1px solid #333; margin-bottom: 5px; }
.metier-icon { font-size: 3.5vh; cursor: pointer; opacity: 0.3; filter: grayscale(1); transition: 0.3s; }
.metier-icon.active { opacity: 1; filter: grayscale(0); transform: scale(1.2); }

.btn-toggle-comp { width: 100%; padding: 8px; background: #222; color: var(--gold); border: 1px dashed var(--gold); border-radius: 8px; font-size: 1.4vh; margin: 5px 0; flex-shrink: 0; }
.comp-card { display: none; background: #000; border: 2px solid var(--gold); border-radius: 12px; padding: 10px; margin-bottom: 5px; flex-shrink: 0; }
.input-group { margin-bottom: 3px; padding: 4px; border-radius: 6px; border: 1px solid transparent; }
.input-group.focused { background: #333; border: 1px solid var(--gold); }
label { display: block; font-size: 1.3vh; color: #aaa; text-transform: uppercase; }
input, select { width: 100%; padding: 6px; border-radius: 6px; border: 1px solid var(--gray); background: var(--bg-input); color: white; font-size: 2vh; font-weight: bold; }

.result-zone { background: linear-gradient(145deg, #D4AF37, #b8860b); color: var(--black); border-radius: 12px; padding: 8px; text-align: center; transition: all 0.2s ease; margin-bottom: 5px; flex-shrink: 1; }
.result-price { font-size: 5vh; font-weight: 900; line-height: 1; }
#resCoeff { font-size: 1.6vh; font-weight: bold; }
.boussole-active .result-zone { padding: 2px; }
.boussole-active .result-price { font-size: 3vh; }
.boussole-active .result-zone div:first-child { display: none; }

#BOUCHERIE_UI, #BVP_UI, #TRAITEUR_UI, #POISSON_TRANSFO_UI { display: none; flex-direction: column; flex: 1; overflow-y: auto; scrollbar-width: none; }
.b-top-actions { display: flex; gap: 5px; margin-bottom: 5px; flex-shrink: 0; }
.b-btn { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid var(--gold); background: #222; color: var(--gold); font-weight: bold; font-size: 1.4vh; text-align: center; }
.b-btn-danger { background: var(--red); color: white; border-color: var(--red); }
.b-param-group { background: #111; padding: 5px; border-radius: 6px; border: 1px solid #333; margin-bottom: 5px; }
.b-param-group label { color: #888; font-size: 1.1vh; }
.b-param-group input, .b-param-group select { background: #1a1a1a; border: 1px solid #444; font-size: 1.8vh; padding: 4px; }

.b-result-box { background: var(--gold); color: black; border-radius: 8px; padding: 10px; text-align: center; margin-bottom: 5px; transition: background 0.3s; flex-shrink: 0; }
.b-result-box .title { font-size: 1.3vh; font-weight: bold; margin-bottom: 2px; }
.b-result-box .ca { font-size: 3.5vh; font-weight: 900; line-height: 1; }
.b-result-box .sous-matrice { color: var(--red); font-size: 1.3vh; font-weight: bold; margin-top: 2px; }

.b-tabs { display: flex; gap: 2px; margin-bottom: 5px; flex-shrink: 0; }
.b-tab { flex: 1; background: #222; border: 1px solid #444; color: #aaa; text-align: center; padding: 6px 2px; font-size: 1.2vh; font-weight: bold; border-radius: 4px; transition: 0.2s; }
.b-tab.active { background: var(--gold); color: black; border-color: var(--gold); }
.b-page { display: none; background: #111; border-radius: 8px; border: 1px solid #333; padding: 5px; }
.b-page.active { display: block; }
.b-page-title { color: var(--gold); font-size: 1.4vh; font-weight: bold; border-left: 3px solid var(--gold); padding-left: 5px; margin-bottom: 5px; text-transform: uppercase; }

.b-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #222; padding: 6px 0; }
.b-row:last-child { border-bottom: none; }
.b-row-info { flex: 1.5; padding-right: 5px; }
.b-row-name { font-size: 1.4vh; font-weight: bold; line-height: 1.1; }
.b-row-desc { font-size: 1vh; color: #666; line-height: 1.1; margin-top: 2px; }
.b-row-inputs { flex: 2; display: flex; gap: 5px; justify-content: flex-end; }
.b-cell { display: flex; align-items: center; background: #1a1a1a; border: 1px solid #333; border-radius: 4px; padding: 2px 4px; min-width: 80px; }
.b-cell.focused { border-color: var(--gold); background: #2a2a2a; }
.b-cell label { color: var(--gold); font-size: 1vh; font-weight: bold; margin-right: 5px; }
.b-cell input { background: transparent; border: none; padding: 0; font-size: 1.6vh; color: white; text-align: right; width: 100%; outline: none; }

.numpad-calc { flex: 0 0 auto; height: 230px; background: #111; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; border-top: 2px solid var(--gold); }
.num-btn { background: #2a2a2a; color: white; border: none; font-size: 2.5vh; font-weight: bold; border-radius: 4px; display: flex; align-items: center; justify-content: center; width: 100%; }
.num-btn.action { color: var(--gold); background: #3a3a3a; }
.num-btn.delete { background: #500; }
.num-btn.rst { background: var(--red); color: white; font-size: 1.3vh; line-height: 1.1; font-weight: 900; padding: 2px; }
.num-btn.tuto { background: #ffcc00; color: black; font-size: 1.2vh; line-height: 1.1; font-weight: 900; padding: 2px; }

#timer-msg { color: var(--red); font-weight: bold; text-align: center; margin-top: 10px; display: none; }

button, .num-btn, .b-btn, .metier-icon, .b-tab, .b-cell, .input-group { touch-action: manipulation; }
.num-btn:active, .b-btn:active, .btn-toggle-comp:active { transform: scale(0.96); filter: brightness(1.5); transition: all 0.05s; }
.b-cell:active, .input-group:active { background: #333; }
.metier-icon:active { transform: scale(0.90); }

/* DESIGN TABLETTE : Marges sombres unies, pas de rayures, interface centrée */
@media (min-width: 768px) and (orientation: landscape) {
  body { flex-direction: row; justify-content: center; background: #121212; }
  #SPLASH_SCREEN, #AUTH_SCREEN, #CGU_SCREEN { max-width: 900px; margin: 0 auto; position: relative; height: 100vh; }
  .app-container { flex: unset; width: 50vw; max-width: 500px; height: 100vh; overflow-y: auto; padding-right: 15px; background: var(--black); }
  .numpad-calc { height: 100vh; width: 40vw; max-width: 400px; border-top: none; border-left: 2px solid var(--gold); background: var(--black); }
  .num-btn { font-size: 4vh; }
}