/*
 * Alethys — Responsive Scoped Styles for WordPress
 * Font scaling: .aly-fs-sm / .aly-fs-md / .aly-fs-lg on #alethys-app
 * Responsive breakpoints: 480px, 640px, 768px
 */

/* ═══ CSS CUSTOM PROPERTIES — Font scaling ═══ */
#alethys-app {
  --aly-base: 15px; --aly-xs: 12px; --aly-sm: 13px; --aly-md: 15px;
  --aly-lg: 17px; --aly-xl: 20px; --aly-2xl: 28px;
  --aly-input: 15px; --aly-grid-input: 14px; --aly-grid-header: 12px;
  --aly-grid-label: 13px; --aly-section-title: 17px; --aly-btn: 15px;
  --aly-label: 13px; --aly-info: 13px; --aly-badge: 12px;
  --aly-step-icon: 18px; --aly-step-label: 12px;
  --aly-gauge-score: 30px; --aly-h1: 28px; --aly-subtitle: 13px;
  --aly-pad: 24px; --aly-pad-sm: 16px;
}
#alethys-app.aly-fs-sm {
  --aly-base: 13px; --aly-xs: 10px; --aly-sm: 11px; --aly-md: 13px;
  --aly-lg: 15px; --aly-xl: 17px; --aly-2xl: 24px;
  --aly-input: 13px; --aly-grid-input: 12px; --aly-grid-header: 10px;
  --aly-grid-label: 11px; --aly-section-title: 15px; --aly-btn: 13px;
  --aly-label: 11px; --aly-info: 11px; --aly-badge: 10px;
  --aly-step-icon: 16px; --aly-step-label: 10px;
  --aly-gauge-score: 26px; --aly-h1: 24px; --aly-subtitle: 11px;
}
#alethys-app.aly-fs-lg {
  --aly-base: 18px; --aly-xs: 14px; --aly-sm: 16px; --aly-md: 18px;
  --aly-lg: 20px; --aly-xl: 24px; --aly-2xl: 34px;
  --aly-input: 18px; --aly-grid-input: 16px; --aly-grid-header: 14px;
  --aly-grid-label: 16px; --aly-section-title: 21px; --aly-btn: 18px;
  --aly-label: 16px; --aly-info: 16px; --aly-badge: 14px;
  --aly-step-icon: 22px; --aly-step-label: 14px;
  --aly-gauge-score: 38px; --aly-h1: 34px; --aly-subtitle: 16px;
}

/* ═══ CONTAINER RESET ═══ */
#alethys-app, #alethys-app *, #alethys-app *::before, #alethys-app *::after { box-sizing: border-box; }
#alethys-app {
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  background: #0a0e17; color: #e2e8f0; line-height: 1.55;
  font-size: var(--aly-base);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
#alethys-app h1,#alethys-app h2,#alethys-app h3,#alethys-app h4,#alethys-app h5,#alethys-app h6 { margin:0;padding:0;border:none;font-family:inherit;line-height:1.3; }
#alethys-app p { margin:0;padding:0; }
#alethys-app a { color:#10b981;text-decoration:none; } #alethys-app a:hover { color:#34d399; }
#alethys-app ul,#alethys-app ol { margin:0;padding:0;list-style:none; }
#alethys-app img { max-width:100%;height:auto; }
#alethys-app div, #alethys-app span { margin:0;padding:0; }

/* ═══ INPUT RESETS ═══ */
#alethys-app input[type="number"]::-webkit-inner-spin-button,
#alethys-app input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none;margin:0; }
#alethys-app input[type="number"] { -moz-appearance:textfield; }
#alethys-app select { -webkit-appearance:none; }
#alethys-app input,#alethys-app select,#alethys-app textarea,#alethys-app button { font-family:inherit; }

#alethys-app input[type="text"],
#alethys-app input[type="number"],
#alethys-app input[type="email"],
#alethys-app select {
  background:#0f172a!important; border:1px solid #1e293b!important;
  border-radius:8px!important; color:#e2e8f0!important;
  padding:10px 12px!important; font-size:var(--aly-input)!important;
  outline:none!important; box-shadow:none!important; height:auto!important; width:100%!important;
}
#alethys-app input:focus, #alethys-app select:focus {
  border-color:#10b981!important; box-shadow:0 0 0 2px rgba(16,185,129,0.15)!important;
}
#alethys-app button { font-family:inherit;cursor:pointer;outline:none; }
#alethys-app button:focus { outline:none;box-shadow:none; }
#alethys-app input[type="checkbox"] {
  width:18px!important;height:18px!important;min-width:18px;accent-color:#10b981;
  background:#0f172a!important;border:1px solid #334155!important;
  border-radius:3px!important;padding:0!important;margin:0!important;box-shadow:none!important;
}

/* ═══ RESPONSIVE GRID: N1-N4 (effectifs, salaires) ═══ */
.aly-grid-n4 {
  display:grid; grid-template-columns: minmax(120px,200px) repeat(4,1fr) auto;
  gap:6px; align-items:center;
}
.aly-grid-n4 .aly-gh { font-size:var(--aly-grid-header);font-weight:600;color:#64748b;text-align:center;padding:6px; }
.aly-grid-n4 .aly-gl { font-size:var(--aly-grid-label);color:#94a3b8;padding:4px 0; }
.aly-grid-n4 .aly-gt { text-align:center;font-weight:600;color:#10b981;font-size:var(--aly-grid-label); }
.aly-grid-n4 input { font-size:var(--aly-grid-input)!important;padding:8px 4px!important;text-align:center; }

/* ═══ RESPONSIVE GRID: Pyramide des âges ═══ */
.aly-grid-age {
  display:grid; grid-template-columns: minmax(70px,120px) repeat(2,1fr) auto;
  gap:6px;
}
.aly-grid-age .aly-gh { font-size:var(--aly-grid-header);font-weight:600;color:#64748b;text-align:center;padding:6px; }
.aly-grid-age .aly-gl { font-size:var(--aly-grid-label);color:#94a3b8;padding:4px 0; }
.aly-grid-age .aly-gt { text-align:center;font-weight:600;color:#10b981;font-size:var(--aly-grid-label); }
.aly-grid-age input { font-size:var(--aly-grid-input)!important;padding:8px 4px!important;text-align:center; }

/* ═══ RESULTS GRID ═══ */
.aly-grid-results {
  display:grid; grid-template-columns:65px 1fr 50px 50px 50px;
  gap:6px; align-items:center; padding:8px 0;
  border-bottom:1px solid #1e293b; font-size:var(--aly-sm);
}
.aly-grid-results-header {
  display:grid; grid-template-columns:65px 1fr 50px 50px 50px;
  gap:6px; padding:8px 0; border-bottom:2px solid #1e293b;
  font-size:var(--aly-xs); color:#64748b; font-weight:600;
}

/* ═══ BONUS ROW ═══ */
.aly-bonus-row { display:flex;align-items:center;gap:12px;margin-bottom:8px;flex-wrap:wrap; }
.aly-bonus-label { min-width:200px;font-size:var(--aly-sm); }
.aly-bonus-select { flex:1;min-width:200px; }

/* ═══ DIMENSION GAUGES ═══ */
.aly-gauges { display:flex;gap:20px;flex-wrap:wrap; }
.aly-gauges > div { flex:1;min-width:140px;text-align:center; }

/* ═══ FONT SIZE TOGGLE ═══ */
.aly-fs-toggle {
  display:inline-flex;gap:2px;align-items:center;
  background:#0f172a;border:1px solid #1e293b;border-radius:8px;padding:3px;
}
.aly-fs-toggle button {
  border:none;background:transparent;color:#64748b;border-radius:6px;
  padding:5px 12px;font-weight:600;transition:all 0.2s;font-size:13px;
}
.aly-fs-toggle button.active { background:#065f46;color:#6ee7b7; }
.aly-fs-toggle button:hover:not(.active) { color:#e2e8f0; }

/* ═══ STEP NAVIGATION ═══ */
.aly-steps {
  display:flex;gap:2px;padding:12px var(--aly-pad);
  background:#111827;border-bottom:1px solid #1e293b;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.aly-steps button {
  flex:1;min-width:80px;padding:10px 8px;border:none;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.aly-steps .aly-step-icon { font-size:var(--aly-step-icon); }
.aly-steps .aly-step-label { font-size:var(--aly-step-label); }

/* ═══ MOBILE ≤ 640px ═══ */
@media (max-width: 640px) {
  #alethys-app { --aly-pad:12px; --aly-pad-sm:10px; }

  /* N4 grids → label full width, 4 inputs + total below */
  .aly-grid-n4 { grid-template-columns:repeat(4,1fr) auto; gap:4px; }
  .aly-grid-n4 .aly-gl { grid-column:1/-1;padding:10px 0 2px;font-weight:600;border-top:1px solid #1e293b; }
  .aly-grid-n4 .aly-gl:first-child { border-top:none; }
  .aly-grid-n4 .aly-gh-label { display:none; } /* hide empty first header cell */

  /* Age grid → label full width */
  .aly-grid-age { grid-template-columns:repeat(2,1fr) auto; gap:4px; }
  .aly-grid-age .aly-gl { grid-column:1/-1;padding:8px 0 2px;font-weight:600; }
  .aly-grid-age .aly-gh-label { display:none; }

  /* Results → tighter */
  .aly-grid-results { grid-template-columns:50px 1fr 40px 42px 40px;gap:4px;font-size:var(--aly-xs); }
  .aly-grid-results-header { grid-template-columns:50px 1fr 40px 42px 40px;gap:4px; }

  /* Bonus → stack */
  .aly-bonus-row { flex-direction:column;gap:4px; }
  .aly-bonus-label, .aly-bonus-select { min-width:0; }

  /* Gauges → stack */
  .aly-gauges { flex-direction:column;gap:12px; }
  .aly-gauges > div { min-width:0; }

  /* Steps → compact */
  .aly-steps { padding:8px;gap:2px; }
  .aly-steps button { min-width:56px;padding:8px 4px; }
}

/* ═══ TABLET 641–768px ═══ */
@media (min-width:641px) and (max-width:768px) {
  .aly-grid-n4 { grid-template-columns:minmax(100px,150px) repeat(4,1fr) auto; }
}

/* ═══ SCROLLBAR ═══ */
#alethys-app ::-webkit-scrollbar { width:6px;height:6px; }
#alethys-app ::-webkit-scrollbar-track { background:#0f172a; }
#alethys-app ::-webkit-scrollbar-thumb { background:#334155;border-radius:3px; }

/* ═══ WORDPRESS OVERRIDES ═══ */
.elementor-widget-container #alethys-app { width:100%; }
#alethys-app .gallery, #alethys-app .wp-block-image { display:none; }
#alethys-app table { border-collapse:collapse;width:auto;margin:0; }
#alethys-app td, #alethys-app th { border:none;padding:0; }

/* ═══ PRINT ═══ */
@media print {
  body > *:not(#alethys-app):not(.alethys-print-container) { display:none!important; }
  #alethys-app { box-shadow:none!important;border-radius:0!important; }
}