/* ========== Base / Reset ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root{
  --brand:#0b5bd3;
  --text:#111;
  --muted:#666;
  --border:#ddd;
  --bg:#fff;
  --space:clamp(0.75rem, 1.5vw, 1rem);
  --radius:0.75rem;
}

html, body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.4;
  padding: clamp(0.75rem, 3vw, 2rem);
}

h1 {
  color: var(--brand);
  margin: 0 0 var(--space);
  font-size: clamp(1.35rem, 2.2vw + 1rem, 2rem);
  line-height: 1.15;
}

a{
  color: var(--brand);
  text-decoration: none;
}
a:hover{ text-decoration: underline; }

img, video, svg { max-width: 100%; height: auto; }

/* Focus visibles et accessibles */
:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand) 70%, white);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ========== Navigation (index) ========== */
nav ul{ 
  list-style: none; 
  padding: 0; 
  margin: 0;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
nav li{ margin: 0; }
nav a{
  display: inline-block;
  padding: .6rem .9rem;
  border: 1px solid var(--brand);
  border-radius: .6rem;
  background: var(--brand);
  color: #fff;
}

/* ========== Formulaire d’ajout (words.html) ========== */
.form-add { /* existant, rendu responsive */
  display: flex;
  gap: .5rem;
  align-items: end;
  flex-wrap: wrap;
}

.form-add label {
  display: grid;
  gap: .25rem;
  font-size: .95rem;
  min-width: min(18ch, 100%);
  flex: 1 1 220px; /* s’adapte en grille fluide */
}

.form-add input {
  padding: .55rem .7rem;
  border: 1px solid #ccc;
  border-radius: .5rem;
  width: 100%;
}

.form-add button {
  padding: .6rem 1rem;
  border: 1px solid var(--brand);
  border-radius: .6rem;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}

.form-add button:hover { filter: brightness(0.95); }

.msg { min-width: 6ch; color: var(--brand); }

/* ========== Tableau (words.html) ========== */
/* Sur mobile, on privilégie le défilement horizontal pour ne pas casser la table */
.table-wrap{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 1rem;
  min-width: 420px; /* évite la casse sur très petits écrans */
}

th, td {
  border: 1px solid #eee;
  padding: clamp(.5rem, 1vw, .75rem);
  text-align: left;
}

th { background: #f8f8f8; }
tr:nth-child(even) { background: #fafafa; }

/* ========== Carte Quiz (quiz.html) ========== */
.quiz-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(.9rem, 2vw, 1.25rem);
  width: 100%;
  max-width: 720px;
  margin: 0 auto; /* centrée sur largeurs > mobile */
  background: #fff;
}

.quiz-meta {
  color: #555;
  display: flex;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .95rem;
  flex-wrap: wrap; /* évite les débordements */
}

.quiz-question .label {
  font-size: .95rem;
  color: var(--muted);
}

.prompt {
  font-size: clamp(1.1rem, 1.5vw + 1rem, 1.4rem);
  margin: .25rem 0 1rem;
  word-wrap: anywhere;
}

.quiz-form {
  display: grid;
  gap: .6rem;
  max-width: 680px;
}

.quiz-form label {
  font-size: .95rem;
}

.quiz-form input {
  padding: .7rem .8rem;
  border: 1px solid #ccc;
  border-radius: .6rem;
  width: 100%;
}

.quiz-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap; /* passe sur 2 lignes au besoin */
}

.quiz-actions button {
  padding: .7rem 1rem;
  border: 1px solid var(--brand);
  border-radius: .6rem;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  flex: 1 1 140px; /* boutons tactiles plus larges sur mobile */
}

.quiz-actions button[disabled] {
  opacity: .6;
  cursor: default;
}

.feedback {
  margin-top: .6rem;
  min-height: 1.5em;
}

/* ========== Espacements généraux pour les paragraphes et liens de retour ========== */
p { margin-top: 1rem; }
p a{
  display: inline-block;
  margin-top: .25rem;
}

/* ========== Réduction de mouvement (accessibilité) ========== */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}

/* ========== Points de rupture / Layout ========== */

/* Mobile d’abord — réglages déjà adaptés ci-dessus */

/* ≥ 768px : on a plus d’espace, on resserre quelques largeurs */
@media (min-width: 768px){
  body{ padding: 2rem; }
  nav ul{ gap: .75rem; }
  .quiz-actions button{ flex: 0 0 auto; }
}

/* ≥ 1024px : confort desktop */
@media (min-width: 1024px){
  .quiz-card{ padding: 1.25rem 1.5rem; }
}

/* Paysage basse hauteur (smartphones en landscape) */
@media (orientation: landscape) and (max-height: 480px){
  body{ padding: .75rem; }
  h1{ margin-bottom: .5rem; }
  .quiz-card{ padding: .75rem; }
  .quiz-actions button{ padding: .55rem .8rem; }
}

/* Très petits écrans (≤ 360px) */
@media (max-width: 360px){
  nav a{ padding: .5rem .7rem; }
  .quiz-actions{ gap: .4rem; }
  .quiz-actions button{ min-width: 0; }
}