/*────────────────────────────────────────────────────────────────────────
  Variables centrales & thèmes
────────────────────────────────────────────────────────────────────────*/
:root {
  --bg: #f8f9fa;
  --fg: #222;
  --accent: #016170;
  --input-bg: #fff;
  --input-border: #cdd3d6;
  --button-bg: var(--accent);
  --button-fg: #fff;
  --radius: 0.5rem;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --focus: 2px solid var(--accent);
}

/* Mode dark manuel (JS) */
html.dark {
  --bg: #15191e;
  --fg: #e2e6ea;
  --accent: #23c7c7;
  --input-bg: #23272e;
  --input-border: #343b43;
  --button-bg: var(--accent);
  --button-fg: #1a2329;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.24);
}

/*────────────────────────────────────────────────────────────────────────
  Réinitialisation simple & Typo
────────────────────────────────────────────────────────────────────────*/
*,
*::before,
*::after { box-sizing: border-box; margin:0; padding:0; }

html { font-size: 18px; }

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", "Segoe UI", sans-serif;
  line-height: 1.5;
}

/*────────────────────────────────────────────────────────────────────────
  Conteneur principal
────────────────────────────────────────────────────────────────────────*/
main {
  width: 100%; max-width: 420px;
  margin: 2rem;
  padding: 2rem 1.5rem 1rem;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*────────────────────────────────────────────────────────────────────────
  Header & contrôles
────────────────────────────────────────────────────────────────────────*/
header { width:100%; margin-bottom:1.5rem; }

#header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

/* Sélecteur de langue */
#lang-select {
  padding: 0.35rem 2.1rem 0.35rem 0.9rem;
  min-width: 120px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--fg);
  background: var(--input-bg)
    url("data:image/svg+xml,%3Csvg%20fill%3D%22%23797979%22%20viewBox%3D%22-6.5%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M18.813%2011.406l-7.906%209.906c-0.75%200.906-1.906%200.906-2.625%200l-7.906-9.906c-0.75-0.938-0.375-1.656%200.781-1.656h16.875c1.188%200%201.531%200.719%200.781%201.656z%22/%3E%3C/svg%3E") no-repeat right .7rem center;
  background-size: 1em;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  appearance: none;
  cursor: pointer;
  transition: border .15s;
}
#lang-select:focus { outline: var(--focus); border-color: var(--accent); }

/* Bouton thème */
#theme-toggle {
  background: var(--input-bg);
  color: var(--button-fg);
  border: 1px solid var(--input-border);
  border-radius: 50%;
  padding: .4rem;
  font-size:1.3rem;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition: background .15s,color .15s,border-color .15s;
}
#theme-toggle:hover,
#theme-toggle:focus {
  color:#fff;
  outline:var(--focus);
  border-color:var(--accent);
}

/*────────────────────────────────────────────────────────────────────────
  Titres & textes
────────────────────────────────────────────────────────────────────────*/
h1 {
  font-size:1.6rem;
  font-weight:700;
  color: var(--accent);
  text-align:center;
  margin-bottom:1.5rem;
}

/*────────────────────────────────────────────────────────────────────────
  Formulaire
────────────────────────────────────────────────────────────────────────*/
form {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:1.1rem;
}
.form-group {
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
label { font-weight:500; }
input {
  padding:.5rem .7rem;
  font-size:1rem;
  border:1px solid var(--input-border);
  border-radius:var(--radius);
  background:var(--input-bg);
  color:var(--fg);
  transition:border .15s;
}
input:focus { outline:var(--focus); border-color:var(--accent); }

/* Masquer flèches des number */
input[type="number"] {
  -moz-appearance:textfield;
  appearance:textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

/* Boutons principaux */
button[type="submit"],
#ajouter-compte {
  background: var(--button-bg);
  color: var(--button-fg);
  border:none;
  border-radius:var(--radius);
  padding:.7rem 1.2rem;
  font-size:1.08rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .15s;
}
button[type="submit"]:hover,
button[type="submit"]:focus,
#ajouter-compte:hover,
#ajouter-compte:focus {
  background:#0198a5;
  color:#fff;
}

/* Wrapper comptes dynamique */
#comptes-container {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  margin-bottom: 1.2rem;
}
.compte-form-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem 1.2rem;
  border-bottom: 1px solid #ececec;
  padding-bottom: 1.2rem;
  position: relative;
}
.compte-form-bloc .form-group {
  width: 100%;
  max-width: 340px; /* Pour que ça reste compact même sur grand écran */
}

/* Bouton de suppression de compte */
.supprimer-compte {
  position: absolute;
  right: 0.3rem;
  background: none;
  border: none;
  color: #888;
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0 0.7rem 0 0.5rem;
  transition: color 0.15s, background 0.15s;
  border-radius: 50%;
  line-height: 1.3rem;
}

.supprimer-compte:hover,
.supprimer-compte:focus {
  color: #e55;
}

/*────────────────────────────────────────────────────────────────────────
  Sélection de la durée
────────────────────────────────────────────────────────────────────────*/

.form-duree {
  align-items: center;
  width: 100%;
  max-width: 340px;
}

.form-duree label {
  font-weight: 500;
  margin-bottom: 0.1rem;
  display: block;
  text-align: center;
}

.duree-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 100%;
}

.form-duree input[type="number"] {
  width: 5.5em;
  min-width: 4em;
  text-align: right;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  transition: border 0.15s;
  box-sizing: border-box;
}

.form-duree input[type="number"]:focus {
  outline: var(--focus-outline);
  border-color: var(--accent);
}

.form-duree select {
  padding: 0.5rem 0.95rem 0.5rem 0.8rem;
  border-radius: var(--radius);
  border: 1px solid var(--input-border);
  color: var(--fg);
  font-size: 1rem;
  font-family: inherit;
  transition: border 0.15s, background 0.15s;
  cursor: pointer;
  min-width: 6.5em;
  box-sizing: border-box;
  appearance: none;
  background: var(--input-bg)
    url("data:image/svg+xml,%3Csvg%20fill%3D%22%23797979%22%20viewBox%3D%22-6.5%200%2032%2032%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M18.813%2011.406l-7.906%209.906c-0.75%200.906-1.906%200.906-2.625%200l-7.906-9.906c-0.75-0.938-0.375-1.656%200.781-1.656h16.875c1.188%200%201.531%200.719%200.781%201.656z%22/%3E%3C/svg%3E") no-repeat right .7rem center;
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 1em;
  padding-right: 2.1rem;
}

.form-duree select:focus {
  outline: var(--focus-outline);
  border-color: var(--accent);
}

/*────────────────────────────────────────────────────────────────────────
  Résultats, footer, utils & responsive
────────────────────────────────────────────────────────────────────────*/
#resultat {
  margin-top:.2rem;
  min-height:2rem;
  font-size:1.08rem;
  text-align:center;
}

footer {
  margin-top:.2rem;
  text-align:center;
  font-size:.92rem;
  color:#8c949c;
}
.github-link {
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:color .15s;
}
.github-link:hover,
.github-link:focus {
  color:#0198a5;
  text-decoration:underline;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
}

@media (max-width:540px) {
  main {
    margin:0;
    padding:1.4rem 1rem 1rem;
    border-radius:0;
    box-shadow:none;
  }
}

/*────────────────────────────────────────────────────────────────────────
  Toggle switch Mois / Années pour le graphique
────────────────────────────────────────────────────────────────────────*/
.chart-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.chart-toggle span {
  font-size: 1rem;
  color: var(--fg);
  user-select: none;
}

/* wrapper */
.switch {
  position: relative;
  display: inline-block;
  width: 3.2rem;
  height: 1.6rem;
}

/* cache la checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* track */
.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 0.7rem;
  transition: background 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

/* thumb */
.switch .slider::before {
  content: "";
  position: absolute;
  height: 1.2rem;
  width: 1.2rem;
  left: 0.2rem;
  top: 0.15rem;
  background: var(--button-bg);
  border-radius: 50%;
  transition: transform 0.2s;
}

/* état coché : thumb à droite */
.switch input:checked + .slider::before {
  transform: translateX(1.6rem);
}

/* focus */
.switch input:focus + .slider {
  outline: var(--focus-outline);
  border-color: var(--accent);
}

/* dark mode adaptation (optionnel) */
html.dark .switch .slider {
  background: var(--input-bg);
  border-color: var(--input-border);
}
html.dark .switch .slider::before {
  background: var(--button-bg);
}

.toggle-mois,
.toggle-annees {
  display: none;
  font-size: 0.9rem;
  color: var(--fg);
  margin-left: 0.4rem;
  user-select: none;
}

/* Résultats détaillés */
.result-line b {
  min-width: 8ch;
}

.result-total {
  margin-top: 1rem;
  font-weight: 600;
  border-top: 1px solid var(--input-border);
  padding-top: 0.8rem;
}

.result-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-bottom: 0.5rem;
}
.res-label {
  font-weight: 500;
  color: var(--accent);
}