:root {
  --fond: #f6f5f1;
  --carte: #ffffff;
  --texte: #1d2428;
  --doux: #5b666d;
  --trait: #d9d7cf;
  --accent: #0f5c4d;
  --accent-texte: #ffffff;
  --alerte-fond: #fbf1dc;
  --alerte-texte: #614406;
  --erreur: #a12a1f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

.tete, main, .pied { max-width: 680px; margin: 0 auto; padding: 0 16px; }
.tete { padding-top: 28px; }
.marque { margin: 0 0 12px; font-weight: 700; color: var(--accent); }
h1 { margin: 0; font-size: 1.65rem; line-height: 1.15; }
.intro { margin: 10px 0 22px; color: var(--doux); }
h2 { margin: 26px 0 2px; font-size: 1.3rem; }
h3 { margin: 0 0 12px; font-size: 1.08rem; }

label { display: block; margin-bottom: 6px; font-weight: 600; }
input[type="search"], input[type="email"], input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 10px 12px;
  border: 1px solid #8b9398;
  border-radius: 8px;
  background: var(--carte);
  color: var(--texte);
  font: inherit;
}
input:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.recherche { position: relative; }
.propositions {
  position: absolute;
  z-index: 2;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--trait);
  border-radius: 8px;
  background: var(--carte);
  box-shadow: 0 6px 18px rgb(0 0 0 / 12%);
  overflow: hidden;
}
.propositions button {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--trait);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.propositions li:last-child button { border-bottom: 0; }
.propositions button:hover { background: var(--fond); }

.message { margin: 14px 0 0; color: var(--doux); }
.message.erreur { color: var(--erreur); }
.total { margin: 0 0 14px; color: var(--doux); }

.onglets { display: flex; gap: 8px; margin-bottom: 14px; }
.onglet {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.onglet[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); }

.lignes { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.lignes li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--trait);
}
.lignes .nom { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.lignes .detail { display: block; color: var(--doux); font-size: .9rem; font-weight: 400; }
.compte { flex: none; text-align: right; color: var(--doux); font-size: .9rem; }
.compte b { display: block; color: var(--texte); font-size: 1.05rem; }
.autres { margin: 12px 0 0; color: var(--doux); }

.etiquette {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: #17202a;
  font-weight: 800;
  line-height: 36px;
  text-align: center;
}
.e-A { background: #2f9e62; color: #fff; }
.e-B { background: #6dbb5e; }
.e-C { background: #bfd85a; }
.e-D { background: #f4e04d; }
.e-E { background: #f2b544; }
.e-F { background: #e77c34; }
.e-G { background: #c92a2a; color: #fff; }

.carte { padding: 16px; border: 1px solid var(--trait); border-radius: 10px; background: var(--carte); }
.case { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-weight: 400; }
.case input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; }
.filtre { font-weight: 600; }
.avertissement { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--alerte-fond); color: var(--alerte-texte); font-size: .94rem; }

button.principal, .retrait button {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-texte);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.discret { margin-top: 14px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--doux); font: inherit; text-decoration: underline; cursor: pointer; }

.pied { margin-top: 44px; padding-bottom: 36px; }
.retrait { padding-top: 6px; border-top: 1px solid var(--trait); }
.retrait p { color: var(--doux); }
.retrait input { margin-bottom: 10px; }
.retrait button { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.source { margin: 24px 0 0; color: var(--doux); font-size: .84rem; }

a { color: var(--accent); }
.marque a { text-decoration: none; }
.liens-pied { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 0; font-size: .88rem; }
.liens-pied a { display: inline-block; padding: 6px 0; }
.explications { margin-top: 40px; }
.explications h3 { margin: 18px 0 2px; font-size: 1rem; }
.explications p { margin: 0; color: var(--doux); }
.actions-compte { display: flex; flex-wrap: wrap; gap: 4px 20px; }
#confirmer-suppression { margin-top: 12px; }
#confirmer-suppression p { margin: 0 0 12px; }
.texte { max-width: 680px; margin: 0 auto; padding: 28px 16px 40px; overflow-wrap: anywhere; }
.texte h1 { margin-bottom: 12px; }
.texte h2 { margin-top: 24px; font-size: 1.1rem; }
.texte p { margin: 6px 0; }

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #15191c;
    --carte: #1f2529;
    --texte: #eef0f1;
    --doux: #a9b3b9;
    --trait: #343c42;
    --accent: #6fd2bc;
    --accent-texte: #0b1f1b;
    --alerte-fond: #3a2f15;
    --alerte-texte: #f5deab;
    --erreur: #ff9a8d;
  }
}