:root {


  --bg: #020617;


  --bg-soft: #0b1220;


  --card: #12264a;


  --card-border: #1d3559;


  --card-glow: rgba(59, 130, 246, 0.15);


  --accent: #10b981;


  --accent-soft: #022c22;


  --accent-text: #ecfdf5;


  --text: #e5e7eb;


  --muted: #9ca3af;


  --danger: #f97373;


  --card-gap: 0.55rem;


  --slider-track-width: clamp(11rem, 55%, 15rem);


}





* {


  box-sizing: border-box;


}





body {


  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",


    sans-serif;


  margin: 0;


  padding: 0;


  background: #020617;


  color: var(--text);


  display: flex;


  justify-content: center;


  align-items: flex-start;


  min-height: 100vh;


}





.app {


  width: 100%;


  max-width: 720px;


  padding: 1rem 1rem 2rem;


}





.small {


  font-size: 0.9rem;


  color: var(--muted);


  margin: 0.15rem 0;


}





/* Carte gnrique */


.card {


  background: linear-gradient(160deg, rgba(18, 38, 74, 0.95), rgba(7, 18, 38, 0.98));


  border-radius: 0.9rem;


  border: 1px solid var(--card-border);


  padding: 0.25rem 0.9rem 0.6rem;


  box-shadow: 0 12px 26px rgba(6, 11, 29, 0.5), 0 0 20px var(--card-glow);


  display: flex;


  flex-direction: column;


  align-items: center;


  text-align: center;


}


.card > * {


  width: 100%;


}





.card form {


  width: 100%;


  display: flex;


  flex-direction: column;


  align-items: center;


}





.card > h2 {


  text-align: center;


  margin: 0 0 0.4rem;


  font-size: 1.1rem;


}





header {


  margin-bottom: var(--card-gap);


}





/* Carte d en-tte (titre + langue + ref diapason) */


#header-card {


  padding-bottom: 0.8rem;


  text-align: center;


}





h1 {
  font-size: 1.45rem;
  margin: 0 0 0.3rem;
  letter-spacing: 0.03em;
}

#lang-select,
#quality-select,
#output-format {
  -webkit-appearance: none;
  appearance: none;
  background-color: #020617;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 0.8rem 0.45rem;
  padding-right: 2.2rem;
  background-clip: padding-box;
}

.title-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
}

.app-byline {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}



/* Lang switcher + Aide sur une ligne */


#lang-switcher {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 0.45rem;


  margin: 0 0 0.3rem;


  flex-wrap: wrap;


}





#lang-label {


  font-size: 0.8rem;


  color: var(--muted);


}





#lang-select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 0.15rem 0.8rem;
  padding-right: 2.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-width: 6rem;
  background-clip: padding-box;
}



/* Bouton d'aide, sur la m%me ligne que la langue */


#help-button,


#install-button {


  padding: 0.25rem 0.9rem;


  border-radius: 999px;


  border: 1px solid var(--accent);


  background: var(--accent-soft);


  color: var(--accent-text);


  font-size: 0.85rem;


  font-weight: 500;


  box-shadow: none;


  margin-top: 0;


}





#help-button:hover,


#install-button:hover {


  background: #065f46;


  color: var(--accent-text);


}





#install-button:disabled {


  opacity: 0.55;


  cursor: not-allowed;


}





/* Ligne diapason de r%f%rence */





.ref-row {


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 0.1rem;


  margin-top: 0.6rem;


}





#ref-label {


  width: 100%;


  text-align: center;


}





#ref-label {


  font-size: 0.75rem;


  font-weight: 500;


  color: var(--muted);


  letter-spacing: 0.01em;


}





.ref-input-wrap {


  display: inline-flex;


  align-items: center;


  gap: 0.35rem;


  vertical-align: middle;


  width: 100%;


  max-width: var(--slider-track-width);


  justify-content: center;


  margin: 0 auto;


}





#ref-a-hz {


  background: #020617;


  border-radius: 999px;


  border: 1px solid #374151;


  color: var(--text);


  padding: 0.3rem 0.65rem;


  width: 5.5ch;


  max-width: 6ch;


  font-size: 0.95rem;


  font-weight: 600;


  text-align: center;


}





.ref-step {


  display: inline-flex;


  align-items: center;


  justify-content: center;


  width: 2.1rem;


  height: 2.1rem;


  border-radius: 999px;


  border: 1px solid rgba(255, 255, 255, 0.06);


  background: rgba(255, 255, 255, 0.02);


  color: var(--text);


  font-weight: 700;


  cursor: pointer;


  padding: 0;


}





/* small step buttons used for cents input */


.small-step {


  width: 1.9rem;


  height: 1.9rem;


  font-size: 1.15rem;


}





/* slider wrapper shared by reference and shift controls */


.value-slider {


  margin: 0.55rem auto 0;


  width: 100%;


  max-width: var(--slider-track-width);


  display: block;


}





.value-slider[disabled] {


  opacity: 0.35;


  pointer-events: none;


}





.ref-row .value-slider {


  width: 100%;


  max-width: var(--slider-track-width);


}





#shift-slider.value-slider {


  margin-top: 0.95rem;


}





.noUi-target {


  background: transparent;


  border: none;


  border-radius: 999px;


  box-shadow: none;


  padding: 0;


}





.noUi-base,


.noUi-connects {


  height: 0.2rem;


  border-radius: inherit;


}





.noUi-connects {


  background: rgba(148, 163, 184, 0.25);


}





.noUi-connect {


  background: linear-gradient(90deg, #38bdf8, #818cf8);


  height: 100%;


}





.noUi-horizontal {


  height: 0.2rem;


}





.noUi-horizontal .noUi-handle {


  width: 1.6rem;


  height: 1.6rem;


  border-radius: 50%;


  right: -0.9rem;


  top: -0.75rem;


  border: 2px solid rgba(14, 165, 233, 0.9);


  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);


}





.noUi-handle {


  background: linear-gradient(180deg, rgba(34, 211, 238, 0.95), rgba(14, 165, 233, 0.85));


  touch-action: none;


}





.noUi-handle::before,


.noUi-handle::after {


  display: none;


}





.ref-step:active {


  transform: translateY(1px);


}





/* Active state during long-press (visible) */


.ref-step.active {


  transform: translateY(0);


  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));


  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 8px 26px rgba(75, 225, 212, 0.08) inset;


  border-color: rgba(75, 225, 212, 0.18);


}





/* Small visual pulse while active */


.ref-step.active::after {


  content: "";


  position: absolute;


  inset: -6px;


  border-radius: 999px;


  box-shadow: 0 0 18px rgba(75, 225, 212, 0.08);


  opacity: 0.9;


  pointer-events: none;


}





/* Screen-reader only helper */


.sr-only {


  position: absolute !important;


  height: 1px;


  width: 1px;


  overflow: hidden;


  clip: rect(1px, 1px, 1px, 1px);


  white-space: nowrap;


}





/* Ligne diapason estim% */


#estimated-a {


  margin: 0.2rem 0 0.1rem;


  line-height: 1.25;


}





#analysis-card {


  margin-top: 0.15rem;


}





#analysis-message {


  margin-top: 0.05rem;


  line-height: 1.35;


}





/* Layout principal */


main {


  display: flex;


  flex-direction: column;


  gap: var(--card-gap);


  margin-top: 0;


}





.card h2 {


  margin-top: 0;


  font-size: 1.15rem;


}





/* Boutons g%n%riques */


button {


  padding: 0.5rem 1.1rem;


  border-radius: 999px;


  border: none;


  cursor: pointer;


  font-weight: 600;


  background: var(--accent);


  color: #022c22;


  margin-top: 0.5rem;


  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out,


    background-color 0.15s ease-out;


  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45);


}





button:hover:not(:disabled) {


  transform: translateY(-1px);


  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.6);


}





button:disabled {


  opacity: 0.4;


  cursor: not-allowed;


  box-shadow: none;


}





/* Bouton d%j% utilis% */


button.btn-used {


  background: #4b5563;


  color: #e5e7eb;


  box-shadow: none;


}





/* Bouton d'analyse cach% (analyse auto) */


#analyze-btn {


  display: none;


}





#shift-cents {


  background: #020617;


  border-radius: 999px;


  border: 1px solid #374151;


  color: var(--text);


  padding: 0.3rem 0.65rem;


  margin-top: 0.25rem;


  width: 6ch;


  max-width: 7ch;


  font-size: 0.95rem;


  font-weight: 600;


  text-align: center;


}





input[type="number"] {


  background: #020617;


  border-radius: 999px;


  border: 1px solid #374151;


  color: var(--text);


  padding: 0.25rem 0.75rem;


  margin-top: 0.25rem;


  min-width: 6rem;


  text-align: center;


  text-align-last: center;


  -webkit-text-align-last: center;


}





/* hide native number input spin buttons to keep layout consistent across platforms */


input[type=number]::-webkit-outer-spin-button,


input[type=number]::-webkit-inner-spin-button {


  -webkit-appearance: none;


  margin: 0;


}


input[type=number] {


  -moz-appearance: textfield;


  -webkit-appearance: none;


  appearance: none;


}





/* Ligne "Correction de ( ) cents % appliquer" */


#shift-label {


  display: flex;


  flex-direction: column;


  align-items: center;


  gap: 0.1rem;


  margin-top: 0.45rem;


  text-align: center;


  width: 100%;


}





#shift-label.hidden {


  display: none;


}





.field-label {


  font-size: 0.75rem;


  font-weight: 500;


  color: var(--muted);


  display: block;


  margin-bottom: 0.05rem;


  letter-spacing: 0.01em;


}





.field-hint {


  font-size: 0.7rem;


  color: var(--muted);


}





.field-hint:empty {


  display: none;


}





/* Quality selection (dropdown) */


.quality-select-row {


  display: flex;


  align-items: center;


  justify-content: center;


  gap: 0.6rem;


  margin-top: 0.75rem;


  flex-wrap: wrap;


}





.quality-select-row.hidden {


  display: none;


}





.quality-legend {


  font-size: 0.85rem;


  font-weight: 500;


  color: var(--muted);


}





#quality-select {


  appearance: auto;


  border-radius: 999px;


  border: 1px solid #374151;


  background: #020617;


  color: var(--text);


  padding: 0.35rem 0.8rem;


  font-size: 0.85rem;


  font-weight: 600;


  cursor: pointer;


  min-width: 8rem;


}





/* Format selector row */


.format-selector-row {


  display: flex;


  align-items: center;


  gap: 0.6rem;


  margin-top: 0.75rem;


  justify-content: center;


  flex-wrap: wrap;


}





#format-label {


  font-size: 0.9rem;


  font-weight: 500;


  color: var(--muted);


}





#output-format {


  appearance: auto;


  border-radius: 999px;


  border: 1px solid #374151;


  background: #020617;


  color: var(--text);


  padding: 0.35rem 0.75rem;


  font-size: 0.85rem;


  font-weight: 600;


  cursor: pointer;


  min-width: 6rem;


}





/* Pills */


.pill {


  display: inline-flex;


  align-items: center;


  border-radius: 999px;


  border: 1px solid #374151;


  padding: 0.15rem 0.6rem;


  font-size: 0.75rem;


  margin-right: 0.25rem;


  margin-top: 0.25rem;


  background: #020617;


}





/* Triangles (carte 2  plus utilis%s mais style conserv% au cas o%c%) */


.tri-up {


  color: var(--danger);


  margin-right: 0.25rem;


}





.tri-down {


  color: var(--accent);


  margin-right: 0.25rem;


}





/* Pill verte pour le lien de t%l%chargement */


.download-pill {


  display: inline-flex;


  align-items: center;


  border-radius: 999px;


  background: var(--accent);


  color: #022c22;


  padding: 0.2rem 0.75rem;


  font-size: 0.85rem;


  font-weight: 600;


  text-decoration: none;


  margin-top: 0.4rem;


  box-shadow: 0 6px 14px rgba(16, 185, 129, 0.45);


}





#download-card a.download-pill:hover {


  text-decoration: none;


  transform: translateY(-1px);


  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.6);


}





/* Monospace pour messages d'analyse */


.mono {


  font-family: inherit;


  font-size: 0.86rem;


  line-height: 1.35;


  white-space: pre-wrap;


}





/* Valeurs mises en avant (diapason estim%) */


.highlight-value {


  font-weight: 700;


  font-size: 0.95rem;


}





.hidden {


  display: none;


}





/* Liens */


a {


  color: #6ee7b7;


}





a:hover {


  text-decoration: underline;


}





/* Liens plus doux dans le footer */


#footer-card a {


  color: #34d399;


  font-weight: 600;


  text-decoration: underline;


}





#footer-card a:hover {


  color: #a7f3d0;


}





label {


  font-size: 0.9rem;


}





/* Input fichier customis% */


.file-input-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}



.action-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}



.file-chosen {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  display: block;
  width: 100%;
}



.file-input-hidden {


  position: absolute;


  left: -9999px;


  width: 1px;


  height: 1px;


  overflow: hidden;


  opacity: 0;


  pointer-events: none;


}





/* Grille des cartes */


.card-grid {


  display: grid;


  grid-template-columns: 1fr;


  gap: var(--card-gap);


}





/* Footer / zone t%l%chargement */


#download-card {
  text-align: center;
  margin-top: 0.75rem;
}

#download-info {
  text-align: center;
}



#footer-card {


  padding: 0.25rem 0.9rem 0.6rem;


  text-align: center;


  margin-top: 0;


}





#footer-card .small {


  margin: 0.05rem 0;


}





#pwa-hint {


  font-style: italic;


  color: var(--muted);


  font-size: 0.85rem;


  margin: 0;


}






.status {

  font-size: 0.85rem;

  color: var(--muted);

  text-align: center;

  line-height: 1.4;

  margin: 0.2rem 0 0.3rem;

}



.status-inline {

  width: 100%;

}


/* iOS-friendly select arrows */
.select-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
}

.select-wrapper select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.8rem;
  width: auto;
  min-width: auto;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.45rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 0.9;
}

#lang-switcher .select-wrapper {
  min-width: 5rem;
}

#lang-select,
#quality-select,
#output-format {
  -webkit-appearance: none;
  appearance: none;
}