/* monstyle.css : style simple, moderne et adapté aux téléphones (iPhone compris) */

:root {
  --fond: #f4f6fb;
  --carte: #ffffff;
  --texte: #1f2937;
  --accent: #2563eb;
  --accent-fonce: #1d4ed8;
  --bordure: #d9e0ec;
  --rayon: 14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }   /* empêche iOS de gonfler le texte en paysage */

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* conteneur général : centré, largeur limitée sur grand écran */
#general {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
}

/* chaque bloc devient une "carte" ; !important car la page impose font-size/color en style inline */
.article {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1rem 1.25rem;
  margin: 0 0 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  font-size: clamp(1rem, .9rem + 1vw, 1.25rem) !important;
  color: var(--texte) !important;
  overflow-x: auto;                          /* une longue formule défile au lieu de déborder */
  -webkit-overflow-scrolling: touch;
}

.article p { margin: .5rem 0; }

/* ---- formulaire ---- */
#question input[type="number"] {
  width: 3.3rem !important;                  /* remplace le 50px inline, plus confortable au doigt */
  font-size: 1.1rem;                         /* 16px minimum : évite le zoom automatique d'iOS */
  padding: .45rem .3rem;
  margin: .25rem .15rem;
  text-align: center;
  color: inherit;
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: 10px;
}

#question select {
  font-size: 1.1rem !important;
  padding: .5rem .6rem;
  margin: .25rem .15rem;
  color: inherit;
  background-color: #fff;
  border: 1px solid var(--bordure);
  border-radius: 10px;
}

input:focus, select:focus {
  outline: 3px solid rgba(37, 99, 235, .3);
  border-color: var(--accent);
}

/* ---- boutons (taille tactile >= 44 px, recommandation Apple) ---- */
button, input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: .5rem 1.25rem;
  margin: .25rem .15rem;
  font: 600 1rem system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:hover, input[type="submit"]:hover { background: var(--accent-fonce); }
button:focus-visible, input[type="submit"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .4);
  outline-offset: 2px;
}

/* le bouton QUITTER est discret : c'est une action secondaire */
#quitter {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--bordure);
}
#quitter:hover { background: #eaf0ff; }

/* ---- liens ---- */
a { color: var(--accent); }

/* ---- petits écrans ---- */
@media (max-width: 600px) {
  #general { padding: .5rem; }
  .article { padding: .8rem .9rem; border-radius: 12px;font-size: 0.95rem !important; }
  input[type="number"],#forme{font-size: 0.9rem !important;padding:2px;border:1px solid red;}
  #question input[type="number"] { width: 3.3rem !important; }
  input[type="submit"] { width: 100%; margin-top: .75rem; }   /* "Valider" pleine largeur */
}