/* ---------- Réglages ---------- */
.reglages{display:grid;gap:16px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.reglages-nombres{grid-template-columns:repeat(auto-fit,minmax(180px,240px))}
.reglages .field{margin-bottom:0}
.reglages select,.reglages input[type=number]{width:100%;min-width:0}
.row-actions{margin-top:18px;align-items:center}

/* ---------- Le tableau de bord ---------- */
.hud{
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
  background:var(--peche-clair);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:18px;
}
.hud-item{display:flex;flex-direction:column;line-height:1.2}
.hud-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gris)}
.hud-value{font-size:1.25rem;font-weight:700}
.chrono{font-variant-numeric:tabular-nums;font-size:1.6rem;color:var(--orange)}
.hud .btn:first-of-type{margin-left:auto}

/* ---------- Les deux quadrillages ---------- */
.ateliers{
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;
}
.atelier{margin:0}
.atelier figcaption{
  font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--gris);margin-bottom:8px;font-weight:700;
}
.quadrillage{background:#fff;border:1px solid var(--peche);border-radius:8px;padding:6px}
.quadrillage svg{display:block;width:100%;height:auto}

/* Le quadrillage : les couleurs sont dans les attributs du SVG, pour survivre
   à l'impression ; l'écran se contente d'adoucir la grille. */
.quadrillage .grille line{stroke:#d9cfc9}
.quadrillage .points circle{fill:#b9a89f}

/* Les nœuds cliquables : larges pour le doigt, invisibles au repos */
.noeud{fill:transparent;cursor:pointer}
.noeud:hover{fill:rgba(232,80,30,.25)}

/* La récompense : la figure se remplit de sa couleur */
.remplissage{
  opacity:0;animation:apparait .8s ease-out forwards;
}
@keyframes apparait{ to{opacity:.75} }
@media (prefers-reduced-motion:reduce){
  .remplissage{animation:none;opacity:.75}
}

.message{font-size:1.1rem;margin:18px 0 8px;min-height:1.6em}
.message.erreur{color:var(--rouge)}
.message.reussite{color:var(--vert);font-size:1.3rem}

.mesure-papier{align-items:center;gap:8mm}
.cases-mesure{display:flex;flex-direction:column;gap:4mm}
.champ-boite.large{min-width:60mm}

/* ---------- Reconnaître les figures ---------- */
.nommer-bloc{
  display:grid;gap:28px;grid-template-columns:minmax(240px,340px) 1fr;align-items:start;
}
.nom-choix{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.nom-choix .btn{width:100%;text-align:left;font-size:1.05rem;padding:14px 18px}
.nom-choix .btn.juste{background:var(--vert-clair);border-color:var(--vert);color:var(--vert)}
.nom-choix .btn.faux{background:var(--rouge-clair);border-color:var(--rouge);color:var(--rouge)}
@media (max-width:760px){ .nommer-bloc{grid-template-columns:1fr} }

/* ---------- Périmètre et aire ---------- */
.mesures-bloc{
  display:grid;gap:24px;grid-template-columns:minmax(260px,1fr) minmax(200px,260px);
  align-items:start;
}
.mesures-champs .field{margin-bottom:18px}
.mesures-champs label{display:block;font-weight:600;margin-bottom:6px}
.mesures-champs input{
  width:100%;font-size:1.8rem;font-weight:700;text-align:center;
  padding:10px;border:2px solid var(--peche);border-radius:8px;
}
@media (max-width:700px){ .mesures-bloc{grid-template-columns:1fr} }

/* ---------- Scores ---------- */
.podium{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.podium-place{
  background:var(--peche-clair);border-radius:var(--radius);padding:14px 20px;
  min-width:170px;border-left:6px solid var(--peche);
}
.podium-place.p1{border-left-color:#e0a800}
.podium-place.p2{border-left-color:#9aa0a6}
.podium-place.p3{border-left-color:#b87333}
.podium-nom{font-weight:700;font-size:1.1rem}
.podium-score{font-size:1.5rem;font-weight:800;color:var(--orange);line-height:1.2}
.podium-detail{color:var(--gris);font-size:.9rem}
.table-wrap{overflow-x:auto}
.historique{width:100%;border-collapse:collapse}
.historique th,.historique td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--peche)}
.historique th{font-size:.8rem;text-transform:uppercase;color:var(--gris)}
.historique .sup{background:none;border:0;color:var(--gris);cursor:pointer;font-size:1rem}
.historique .sup:hover{color:var(--rouge)}

/* ---------- La feuille ---------- */
.feuille{color:#000}
.page{
  background:#fff;width:210mm;min-height:297mm;margin:0 auto 24px;padding:7mm;
  box-shadow:var(--ombre);border-radius:2px;
}
.feuille-entete{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end;
  margin-bottom:5mm;font-family:system-ui,sans-serif;
}
.feuille-titre{font-size:11pt;font-weight:700;margin:0}
.feuille-titre small{display:block;font-weight:400;color:#555;font-size:9pt}
.feuille-champs{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:10pt}
.champ-boite{border:1.5pt solid #000;padding:2pt 6pt;min-width:26mm;min-height:8mm}
.champ-boite span{font-size:8pt;color:#333;display:block}
.consigne{
  font-family:system-ui,sans-serif;font-size:9.5pt;color:#333;
  margin:0 0 5mm;padding-bottom:2mm;border-bottom:.5pt solid #bbb;
}
/* Un exercice : le modèle et le quadrillage vide, à la taille demandée */
.exercice{
  display:flex;gap:12mm;align-items:flex-start;justify-content:center;
  margin-bottom:8mm;break-inside:avoid;page-break-inside:avoid;
}
.quadrillage.papier{border:0;padding:0;background:transparent}
.quadrillage.papier svg{width:calc(var(--carreau) * var(--cotes, 7))}
.page .grille line{stroke:#9aa0a6;stroke-width:.025}
.page .points circle{fill:#6b7280}
.page .trait{stroke:#000;stroke-width:.1}

/* ---------- Impression ---------- */
@media print{
  @page{size:A4 portrait;margin:7mm}
  body{background:#fff}
  main{padding:0;max-width:none}
  #view-tracer,#view-scores{display:none !important}
  #view-imprimer{display:block !important}
  .page{
    width:auto;min-height:0;padding:0;margin:0;box-shadow:none;border-radius:0;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}

@media screen and (max-width:820px){
  .page{width:auto;max-width:100%;min-height:0;padding:8mm}
  .exercice{gap:6mm}
}