:root {
  --fond: #f4f3ef;
  --carte: #ffffff;
  --texte: #1d1f22;
  --doux: #5f6670;
  --bord: #dcd9d1;
  --accent: #2f5d8a;
  --accent-texte: #ffffff;
  --entre: #23824a;
  --nentre: #c0392b;
  --zone: rgba(47, 93, 138, 0.14);
  --risque: #b5651d;
  --risque-fond: #fbeee0;
  --ok-fond: #e5f3ea;
  --barre: #8a96a3;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #15171a;
    --carte: #1f2226;
    --texte: #e7e9ec;
    --doux: #9aa3ad;
    --bord: #33373d;
    --accent: #6fa3d6;
    --accent-texte: #0f1215;
    --entre: #4cc27a;
    --nentre: #ef6b5b;
    --zone: rgba(111, 163, 214, 0.18);
    --risque: #e5a15a;
    --risque-fond: #3a2a1a;
    --ok-fond: #193424;
    --barre: #6b7682;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --fond: #15171a;
  --carte: #1f2226;
  --texte: #e7e9ec;
  --doux: #9aa3ad;
  --bord: #33373d;
  --accent: #6fa3d6;
  --accent-texte: #0f1215;
  --entre: #4cc27a;
  --nentre: #ef6b5b;
  --zone: rgba(111, 163, 214, 0.18);
  --risque: #e5a15a;
  --risque-fond: #3a2a1a;
  --ok-fond: #193424;
  --barre: #6b7682;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.entete, main, .pied {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px;
}

.entete { padding-top: 28px; padding-bottom: 8px; }
.titre-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pastille { font-size: 0.8rem; font-weight: 700; color: var(--risque); background: var(--risque-fond); border: 1px solid var(--risque); border-radius: 999px; padding: 2px 10px; }
.installer { margin-top: 12px; }
.alerte { color: var(--risque); font-weight: 600; }
.entete h1 { margin: 0; font-size: 1.7rem; letter-spacing: -0.01em; }
.entete p { margin: 4px 0 0; color: var(--doux); }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: 12px;
  padding: 18px;
  margin: 16px 0;
}

.carte h2 { margin: 0 0 12px; font-size: 1.1rem; }

.saisie { display: flex; gap: 8px; }
.saisie input { flex: 1; min-width: 0; }

input, textarea {
  font: inherit;
  font-family: var(--mono);
  color: var(--texte);
  background: var(--fond);
  border: 1px solid var(--bord);
  border-radius: 8px;
  padding: 10px 12px;
}

input:focus, textarea:focus, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

textarea { width: 100%; resize: vertical; }

button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-texte);
  cursor: pointer;
}

button.secondaire { background: transparent; color: var(--texte); border: 1px solid var(--bord); }
button.danger { background: transparent; color: var(--nentre); border: 1px solid var(--bord); }

.aide { color: var(--doux); font-size: 0.9rem; margin: 8px 0; }
.aide code { font-family: var(--mono); font-size: 0.85rem; }
.erreur { color: var(--nentre); font-weight: 600; margin: 8px 0 0; }

.fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.fiche .titre { grid-column: 1 / -1; font-family: var(--mono); font-size: 1.4rem; font-weight: 700; }
.cote { border-radius: 10px; padding: 12px; border: 1px solid var(--bord); }
.cote .nom { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cote .diam { font-family: var(--mono); font-size: 1.5rem; font-weight: 700; }
.cote .ecart { font-family: var(--mono); color: var(--doux); font-size: 0.9rem; }
.cote.entre .nom { color: var(--entre); }
.cote.nentre .nom { color: var(--nentre); }
.fiche .tol { grid-column: 1 / -1; color: var(--doux); font-size: 0.9rem; }
.secours { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bord); }
.nom-secours { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--doux); }
.secours h3 { margin: 12px 0 6px; }
.utilisables { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.utilisable { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; }
.utilisable.premier { border-color: var(--entre); background: var(--ok-fond); }
.utilisable.proche { border-color: var(--risque); background: var(--risque-fond); }
.utilisable .ligne { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.utilisable .quoi { font-family: var(--mono); font-weight: 700; }
.utilisable .score { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--entre); white-space: nowrap; }
.utilisable.proche .score { color: var(--risque); }
.minmax { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; white-space: nowrap; font-family: var(--mono); font-size: 0.95rem; margin-top: 2px; }
.minmax b { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
.minmax b.entre { color: var(--entre); }
.minmax b.nentre { color: var(--nentre); }
.minmax small { color: var(--doux); }
.minmax .deborde small { color: var(--risque); font-weight: 700; }

.vide { color: var(--doux); font-style: italic; }

.option {
  border: 1px solid var(--bord);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0;
}
.option.meilleure { border-color: var(--entre); background: var(--ok-fond); }
.option .ligne { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.option .quoi { font-weight: 600; }
.option .score { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.option .detail { font-family: var(--mono); font-size: 0.85rem; color: var(--doux); margin-top: 4px; }
.option .detail b.entre { color: var(--entre); }
.option .detail b.nentre { color: var(--nentre); }

.option.proche { border-color: var(--risque); background: var(--risque-fond); }
.option.proche .score { color: var(--risque); }
.detail .deborde { color: var(--risque); font-weight: 700; }
.rangee.proche .zone { background: var(--risque); }
.carte h3 { font-size: 0.95rem; margin: 16px 0 6px; color: var(--doux); }
.carte h3:first-child { margin-top: 0; }
.seuil { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 600; }
.seuil input { width: 80px; padding: 6px 10px; }
.risques { margin-top: 14px; }
.risques summary { cursor: pointer; color: var(--risque); font-weight: 600; }
.risques li { font-family: var(--mono); font-size: 0.85rem; margin: 4px 0; }

.jauge { position: relative; height: 10px; background: var(--fond); border-radius: 5px; margin-top: 8px; overflow: hidden; border: 1px solid var(--bord); }
.jauge span { position: absolute; top: 0; bottom: 0; background: var(--entre); border-radius: 5px; }

.comparaison { position: relative; }
.axe { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.75rem; color: var(--doux); margin-bottom: 6px; }
.piste { position: relative; }
.bande { position: absolute; top: 0; bottom: 0; background: var(--zone); border-left: 2px solid var(--entre); border-right: 2px solid var(--nentre); }
.rangee { position: relative; display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; min-height: 30px; }
.rangee .etiquette { font-family: var(--mono); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rangee .rail { position: relative; height: 30px; }
.rangee .zone { position: absolute; top: 9px; height: 12px; background: var(--barre); border-radius: 3px; min-width: 3px; }
.rangee.cible .zone { background: var(--accent); }
.rangee.cible .etiquette { font-weight: 700; }
.rangee.dedans .zone { background: var(--entre); }
.rangee .rail:hover .info, .rangee .rail:focus .info { display: block; }
.info { display: none; position: absolute; left: 0; top: 26px; z-index: 2; background: var(--texte); color: var(--carte); font-family: var(--mono); font-size: 0.75rem; padding: 3px 6px; border-radius: 4px; white-space: nowrap; }
.legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--doux); margin-top: 10px; }
.legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { font-family: var(--mono); font-size: 0.85rem; border: 1px solid var(--bord); border-radius: 999px; padding: 4px 10px; background: var(--fond); }
.puce small { color: var(--doux); }

.parc { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.parc li { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 0.9rem; border: 1px solid var(--bord); border-radius: 8px; padding: 2px 2px 2px 10px; background: var(--fond); }
.parc li.actif { border-color: var(--accent); }
.parc li button { background: transparent; color: var(--doux); padding: 4px 8px; font-weight: 400; }
.parc li button.nom { color: var(--texte); padding: 4px 2px; font-family: var(--mono); }

.import summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.boutons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

.pied { color: var(--doux); font-size: 0.8rem; padding-bottom: 32px; }

@media (max-width: 560px) {
  .fiche { grid-template-columns: 1fr; }
  .rangee { grid-template-columns: 82px 1fr; }
  .saisie button { padding: 10px 12px; }
}