:root {
  --fond: #f6f7fb;
  --carte: #ffffff;
  --texte: #1a1d24;
  --texte-doux: #4a5160;
  --bordure: #c9cfdb;
  --bleu: #1d4ed8;
  --bleu-fonce: #1e3a8a;
  --vert: #15803d;
  --vert-fond: #dcfce7;
  --jaune: #a16207;
  --jaune-fond: #fef9c3;
  --rouge: #b91c1c;
  --rouge-fond: #fee2e2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #12141a;
    --carte: #1c1f27;
    --texte: #f1f3f7;
    --texte-doux: #b7bdc9;
    --bordure: #3a404d;
    --bleu: #60a5fa;
    --bleu-fonce: #93c5fd;
    --vert: #4ade80;
    --vert-fond: #14361f;
    --jaune: #facc15;
    --jaune-fond: #3a3110;
    --rouge: #f87171;
    --rouge-fond: #3d1616;
  }
}

* { box-sizing: border-box; }

html { font-size: 20px; }

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

header, main, footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

header { padding-top: 24px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
.sous-titre { margin: 0 0 20px; color: var(--texte-doux); }

section {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.etiquette {
  display: block;
  font-weight: 600;
  margin: 20px 0 6px;
}
.facultatif { font-weight: 400; color: var(--texte-doux); }

.astuce { margin: 6px 0 4px; color: var(--texte-doux); font-size: 0.95em; }
.astuce summary { cursor: pointer; color: var(--bleu); text-decoration: underline; padding: 6px 0; }
.astuce ul { padding-left: 1.2em; margin: 4px 0 8px; }
.astuce li { margin-bottom: 4px; }

input[type="text"], input[type="tel"], textarea {
  width: 100%;
  font: inherit;
  color: var(--texte);
  background: var(--fond);
  padding: 14px;
  border: 2px solid var(--bordure);
  border-radius: 10px;
}
input:focus, textarea:focus { outline: 3px solid var(--bleu); outline-offset: 1px; }

.bouton {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 18px;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}
.bouton.principal { background: var(--bleu); color: #fff; }
.bouton.principal:hover { background: var(--bleu-fonce); }
.bouton.principal:disabled { opacity: .6; cursor: wait; }
.bouton.secondaire, .bouton.photo {
  background: transparent;
  color: var(--bleu);
  border: 3px solid var(--bleu);
}
.bouton.photo { margin-top: 0; }

/* Mode « On m'appelle en ce moment » */
.bouton.appel {
  margin: 0 0 24px;
  background: #b91c1c;
  color: #fff;
  font-size: 1.25rem;
  padding: 20px;
}
.bouton.appel .sous-bouton { display: block; font-size: .85rem; font-weight: 400; opacity: .9; }
.appel-etape { color: var(--texte-doux); margin: 0 0 8px; }
.appel-texte { font-size: 1.45rem; margin: 0 0 8px; line-height: 1.35; }
.appel-exemple { color: var(--texte-doux); margin: 0 0 8px; }
.appel-reponses { display: flex; gap: 12px; }
.appel-reponses .bouton { flex: 1; font-size: 1.5rem; padding: 24px 8px; }
/* Couleurs fixes (pas de variables) : texte blanc toujours lisible, en mode clair comme en mode sombre. */
.bouton.oui { background: #b91c1c; color: #fff; }
.bouton.non { background: #15803d; color: #fff; }
#appel-sais-pas { display: block; margin: 16px auto 0; }
#appel-resultat .verdict h2 { font-size: 1.8rem; }
.bouton.bouton-haut { margin: 0 0 20px; padding: 12px; font-size: 1rem; }
#bouton-effacer { margin-top: 12px; padding: 12px; font-size: 1rem; }

.lien {
  background: none; border: none; padding: 8px 0;
  color: var(--bleu); font: inherit; text-decoration: underline; cursor: pointer;
}

#apercu { margin-top: 12px; }
#apercu img { max-width: 100%; max-height: 300px; border-radius: 8px; border: 1px solid var(--bordure); display: block; }

.erreur { color: var(--rouge); font-weight: 600; }
.note { color: var(--texte-doux); font-size: .9rem; }
.gros { font-size: 1.3rem; font-weight: 700; }

#ecran-attente { text-align: center; }
.roue {
  width: 56px; height: 56px; margin: 8px auto 16px;
  border: 6px solid var(--bordure); border-top-color: var(--bleu);
  border-radius: 50%; animation: tourne 1s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.verdict {
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border: 3px solid;
}
.verdict h2 { margin: 8px 0 4px; font-size: 1.5rem; }
.verdict p { margin: 0; font-weight: 600; }
.verdict-icone { font-size: 3.5rem; line-height: 1; }
.verdict.rouge { background: var(--rouge-fond); border-color: var(--rouge); color: var(--rouge); }
.verdict.jaune { background: var(--jaune-fond); border-color: var(--jaune); color: var(--jaune); }
.verdict.vert  { background: var(--vert-fond);  border-color: var(--vert);  color: var(--vert); }

h3 { margin: 24px 0 8px; font-size: 1.15rem; }
ul { padding-left: 1.2em; margin: 0; }
li { margin-bottom: 8px; }
.conseils li { font-weight: 600; }

.infos {
  margin-top: 20px;
  padding: 16px;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: 12px;
}
.infos h3 { margin-top: 0; }
.infos li { margin-bottom: 6px; }

.contacts {
  margin-top: 24px;
  padding: 16px;
  border: 2px solid var(--vert);
  border-radius: 12px;
}
.contacts h3 { margin-top: 0; }
.contacts ul { list-style: none; padding: 0; }
.contacts li { margin-bottom: 14px; }
.contacts a { color: var(--bleu); font-weight: 700; }
.contacts .note-contact { display: block; font-size: .85rem; color: var(--texte-doux); }

footer { padding-bottom: 40px; }
footer h3 { margin-top: 0; }
footer a { color: var(--bleu); font-weight: 700; }
.petit { font-size: .8rem; color: var(--texte-doux); }

@media (max-width: 400px) {
  html { font-size: 18px; }
  section { padding: 16px; }
}