/* ============================================================
   My Budget · feuille de style de la page d'accueil
   Les couleurs sont définies une seule fois ici, en haut,
   puis réutilisées partout (thème clair et thème sombre).
   ============================================================ */

:root {
  --fond: #faf9f6;
  --fond-carte: #ffffff;
  --texte: #1d2433;
  --texte-doux: #5b6475;
  --bordure: #e3e1db;
  --accent: #1f6f5c;        /* vert sapin : sérieux et rassurant */
  --accent-texte: #ffffff;
  --accent-clair: #e3f1ec;

  /* Couleurs des catégories de la barre des 100 € */
  --c1: #1f6f5c;
  --c2: #4f9d84;
  --c3: #8cc3ae;
  --c4: #e0a84f;
  --c5: #c9733d;
  --c6: #9aa3b2;
  --c7: #3b5ba5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14171c;
    --fond-carte: #1c2027;
    --texte: #eceef2;
    --texte-doux: #a7afbd;
    --bordure: #2e333c;
    --accent: #5cc3a3;
    --accent-texte: #0f1a17;
    --accent-clair: #1d2e29;
  }
}

* { box-sizing: border-box; }

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

.conteneur { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.conteneur-etroit { max-width: 620px; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 12px; }

section { padding: 64px 0; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-texte);
  border: 0;
  border-radius: 10px;
  padding: 14px 22px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { filter: brightness(1.08); }
.bouton-petit { padding: 8px 14px; font-size: 0.9rem; }

/* ---------- En-tête ---------- */
.entete { border-bottom: 1px solid var(--bordure); padding: 14px 0; }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; }
.logo { font-weight: 700; font-size: 1.15rem; color: var(--accent); }

/* ---------- Accroche ---------- */
.accroche { padding-top: 80px; }
.sur-titre { color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.chapeau { font-size: 1.2rem; color: var(--texte-doux); max-width: 680px; margin-bottom: 28px; }
.chapeau strong { color: var(--texte); }
.rassurance { margin-top: 16px; color: var(--texte-doux); font-size: 0.95rem; }

/* ---------- Exemple : les trois cartes ---------- */
.exemple { background: var(--accent-clair); }
.note { color: var(--texte-doux); font-size: 0.95rem; margin-bottom: 28px; }

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 24px;
}
.carte-texte { color: var(--texte-doux); }

/* La barre des 100 € : chaque morceau a une largeur égale à sa part */
.barre {
  display: flex;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0 16px;
}
.barre span { flex: var(--part) 0 0; }
.c1 { background: var(--c1); } .c2 { background: var(--c2); }
.c3 { background: var(--c3); } .c4 { background: var(--c4); }
.c5 { background: var(--c5); } .c6 { background: var(--c6); }
.c7 { background: var(--c7); }

.legende { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.legende li { display: flex; align-items: center; gap: 8px; }
.legende i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.legende b { margin-left: auto; }

/* Les modes de paiement : une petite jauge par ligne */
.modes { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.modes li { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; }
.modes em {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--accent) calc(var(--part) * 1%), var(--bordure) 0);
}

.chiffre-cle { font-size: 3rem; font-weight: 700; color: var(--accent); margin: 8px 0; line-height: 1; }

/* ---------- Les axes ---------- */
.liste-axes { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; counter-reset: axe; }
.liste-axes li {
  counter-increment: axe;
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
}
.liste-axes h3::before { content: counter(axe) ". "; color: var(--accent); }
.liste-axes p { color: var(--texte-doux); }
.gain { color: var(--accent) !important; font-weight: 700; margin: 0; }

/* ---------- Confiance ---------- */
.garanties { padding-left: 20px; display: grid; gap: 10px; max-width: 760px; }

/* ---------- Inscription ---------- */
.inscription { background: var(--accent-clair); text-align: center; }
.formulaire { margin-top: 24px; text-align: left; }
.formulaire label { display: block; font-weight: 600; margin-bottom: 6px; }
.formulaire-ligne { display: flex; gap: 10px; flex-wrap: wrap; }
.formulaire input[type="email"] {
  flex: 1 1 240px;
  padding: 14px;
  font: inherit;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  background: var(--fond-carte);
  color: var(--texte);
}
.formulaire .bouton { flex: 0 0 auto; }
.mention { font-size: 0.85rem; color: var(--texte-doux); margin-top: 12px; }
.piege { position: absolute; left: -9999px; }

/* ---------- Pied de page ---------- */
.pied { border-top: 1px solid var(--bordure); padding: 24px 0; color: var(--texte-doux); font-size: 0.9rem; }