:root {
  --fond: #f3f6fa;
  --carte: #ffffff;
  --texte: #14202e;
  --texte-doux: #5a6b7d;
  --bordure: #dbe3ec;
  --accent: #2e6fd8;
  --accent-texte: #ffffff;
  --bon: #1f9d6b;
  --bon-fond: #e3f6ee;
  --faux: #d6453d;
  --faux-fond: #fdeceb;
  --mer: #cfe6f7;
  --mer-trait: #b2d3ec;
  --terre: #d9c49c;
  --terre-trait: #b59f73;
  --ombre: 0 1px 2px rgba(20, 32, 46, 0.06), 0 6px 20px rgba(20, 32, 46, 0.06);
  --rayon: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0f1620;
    --carte: #172231;
    --texte: #e7eef6;
    --texte-doux: #9cb0c4;
    --bordure: #273648;
    --accent: #5b93f0;
    --bon: #3cc48d;
    --bon-fond: #133227;
    --faux: #f0706a;
    --faux-fond: #3a1c1c;
    --mer: #1d3b57;
    --mer-trait: #2a4d6d;
    --terre: #6d5d3f;
    --terre-trait: #8c7a55;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.25);
    color-scheme: dark;
  }
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

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

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.marque-app {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  font-size: 30px;
}

h1 {
  font-size: 20px;
  margin: 0;
}

.sous-titre {
  margin: 0;
  color: var(--texte-doux);
  font-size: 14px;
}

.score {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 6px 16px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.score-libelle {
  color: var(--texte-doux);
  font-size: 13px;
}

#score {
  font-weight: 700;
}

.themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 24px 12px;
  max-width: 1240px;
  margin: 0 auto;
}

.puce {
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.puce[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}

.contenu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  padding: 0 24px 24px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}

.scene-carte,
.panneau,
.bilan {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}

.scene-carte {
  padding: 16px;
}

.scene-entete h2 {
  margin: 0;
  font-size: 19px;
}

.compteur {
  margin: 0;
  font-size: 13px;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.description {
  margin: 4px 0 12px;
  color: var(--texte-doux);
}

.scene svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  user-select: none;
}

.commandes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.btn {
  font: inherit;
  border-radius: 10px;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
  padding: 8px 14px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent);
}

.btn:focus-visible,
.puce:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-principal {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
  width: 100%;
  margin-top: 16px;
}

.vitesse {
  font-size: 14px;
  color: var(--texte-doux);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vitesse select {
  font: inherit;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
}

.barre-temps {
  flex: 1;
  min-width: 120px;
  height: 6px;
  background: var(--bordure);
  border-radius: 3px;
  position: relative;
  overflow: visible;
}

#barre {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 3px;
}

#repere-question {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 14px;
  background: var(--texte);
  border-radius: 2px;
}

.panneau {
  padding: 20px;
  min-height: 200px;
}

.attente {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--texte-doux);
}

.pulsation {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s infinite ease-in-out;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.question h3 {
  margin: 0 0 4px;
  font-size: 19px;
}

.aide {
  margin: 0 0 14px;
  color: var(--texte-doux);
  font-size: 14px;
}

.choix {
  display: grid;
  gap: 10px;
}

.choix .btn {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 600;
  padding: 12px 14px;
}

.pastille {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  flex: none;
}

.verdict {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
}

.verdict.bon {
  background: var(--bon-fond);
  color: var(--bon);
}

.verdict.faux {
  background: var(--faux-fond);
  color: var(--faux);
}

.regles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.regle {
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
}

.analyse {
  margin-top: 14px;
  font-size: 14px;
  color: var(--texte-doux);
}

.analyse summary {
  cursor: pointer;
  color: var(--texte);
}

.analyse ul {
  padding-left: 18px;
  margin: 8px 0 0;
}

.bilan {
  grid-column: 1 / -1;
  padding: 28px;
  text-align: center;
}

.bilan ul {
  list-style: none;
  padding: 0;
  max-width: 360px;
  margin: 0 auto;
  text-align: left;
}

.bilan li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--bordure);
}

.bilan .btn-principal {
  max-width: 360px;
}

.bilan-score {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 16px;
}

.pied {
  text-align: center;
  font-size: 13px;
  color: var(--texte-doux);
  padding: 8px 24px 24px;
}

/* SVG */
.mer {
  fill: var(--mer);
}
.risee {
  stroke: var(--mer-trait);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.coque {
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1;
}
.voile {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
}
.etiquette {
  stroke: #fff;
  stroke-width: 1.5;
}
.lettre {
  fill: #fff;
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.sillage {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 3 5;
  opacity: 0.55;
}
.halo {
  fill: none;
  stroke-width: 3;
}
.halo-bon {
  stroke: var(--bon);
}
.halo-faux {
  stroke: var(--faux);
  stroke-dasharray: 5 4;
}
.zone {
  fill: rgba(255, 255, 255, 0.18);
  stroke: var(--texte-doux);
  stroke-dasharray: 6 6;
  stroke-width: 1.2;
}
.bouee {
  fill: #f28c28;
  stroke: #8a4a0c;
  stroke-width: 1.5;
}
.legende {
  font-size: 12px;
  fill: var(--texte);
  opacity: 0.8;
}
.legende-zone {
  font-size: 11px;
}
.ligne-depart {
  stroke: var(--texte);
  stroke-width: 1.5;
  stroke-dasharray: 8 6;
  opacity: 0.6;
}
.comite {
  fill: #8796a8;
  stroke: #4a5868;
}
.mat-comite {
  stroke: #4a5868;
  stroke-width: 2;
}
.pavillon {
  fill: #f2c94c;
}
.obstacle {
  fill: var(--terre);
  stroke: var(--terre-trait);
  stroke-width: 2;
}
.obstacle-nom {
  font-weight: 700;
  font-size: 14px;
}
.vent-fond {
  fill: var(--carte);
  opacity: 0.85;
}
.vent-fleche {
  stroke: var(--texte);
  stroke-width: 3;
}
.vent-pointe {
  fill: var(--texte);
}
.vent-texte {
  font-size: 13px;
  font-weight: 700;
  fill: var(--texte);
}
.bulle rect,
.bulle path {
  fill: #fffbe6;
  stroke: #c9a227;
}
.bulle text {
  font-size: 12px;
  font-weight: 600;
  fill: #3d3200;
}
.chrono rect {
  fill: var(--texte);
  opacity: 0.85;
}
.chrono text {
  fill: var(--carte);
  font-weight: 700;
  font-size: 14px;
}
.contact path {
  fill: #ffd23f;
  stroke: #d6453d;
  stroke-width: 2;
}
.badge-texte {
  font-size: 11px;
  font-weight: 700;
  fill: var(--faux);
}

@media (max-width: 900px) {
  .contenu {
    grid-template-columns: 1fr;
    padding: 0 16px 16px;
  }
  .entete,
  .themes {
    padding-left: 16px;
    padding-right: 16px;
  }
  .scene-carte {
    padding: 10px;
  }
}

/* Onglets et vues */
.onglets {
  display: flex;
  gap: 4px;
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: 999px;
  padding: 4px;
}
.onglet {
  text-decoration: none;
  color: var(--texte);
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
}
.onglet.actif {
  background: var(--accent);
  color: var(--accent-texte);
}
.barre-quiz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px 12px;
}
.barre-quiz .themes {
  padding: 0;
  margin: 0;
}
.regles-puces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.regle {
  text-decoration: none;
}
.contenu-regles {
  grid-template-columns: 300px minmax(0, 1fr);
}
.liste-regles {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 10px;
  position: sticky;
  top: 12px;
}
.groupe-titre {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  margin: 10px 8px 4px;
}
.lien-regle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--texte);
  text-decoration: none;
  font-size: 15px;
}
.lien-regle:hover {
  background: var(--fond);
}
.lien-regle.actif {
  background: var(--accent);
  color: var(--accent-texte);
}
.lien-regle .num {
  font-weight: 700;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
}
.icone-anim {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.6;
}
.fiche h2 {
  margin: 0 0 8px;
  font-size: 22px;
}
.fiche-resume {
  font-size: 16px;
  margin: 0 0 14px;
  max-width: 70ch;
}
.fiche-situations {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.encart {
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--fond);
  border-radius: 10px;
}
.encart h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.encart p {
  margin: 0;
}
.fiche-vide {
  color: var(--texte-doux);
  font-style: italic;
}
@media (max-width: 900px) {
  .contenu-regles {
    grid-template-columns: 1fr;
  }
  .liste-regles {
    position: static;
  }
  .barre-quiz {
    padding: 0 16px 12px;
  }
  .entete {
    flex-wrap: wrap;
  }
}
.halo-ecarte {
  stroke: #f2a32c;
  stroke-dasharray: 4 4;
}

/* Bac à sable */
#scene-bac {
  touch-action: none;
  cursor: crosshair;
}
.aide-bac {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--fond);
  font-size: 14px;
}
.panneau-bac {
  display: grid;
  gap: 18px;
}
.panneau-bac h3,
.edition h4 {
  margin: 0 0 8px;
  font-size: 15px;
}
.edition h4 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.edition {
  padding: 12px;
  border-radius: 10px;
  background: var(--fond);
}
.liste-puces,
.ligne-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ligne-boutons {
  margin-top: 10px;
}
.puce-bateau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 4px;
}
.puce-bateau .pastille {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-texte);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn-danger {
  color: var(--faux);
}
.champ {
  display: grid;
  gap: 4px;
  font-size: 14px;
}
.champ.case {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.champ input[type="range"],
.curseur-temps {
  width: 100%;
  accent-color: var(--accent);
}
.curseur-temps {
  flex: 1;
  min-width: 120px;
  width: auto;
}
.champ select {
  font: inherit;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--bordure);
  background: var(--carte);
  color: var(--texte);
}
.chrono-texte {
  font-variant-numeric: tabular-nums;
  min-width: 48px;
  color: var(--texte-doux);
  font-size: 14px;
}
.liste-analyse {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.paire {
  font-size: 14px;
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 10px 12px;
}
.paire-loin {
  color: var(--texte-doux);
}
.paire-prio {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
  font-weight: 600;
}
.paire-prio .pastille {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.paire ul {
  margin: 0;
  padding-left: 18px;
  color: var(--texte-doux);
}
.route-prevue {
  fill: none;
  stroke-width: 2;
  opacity: 0.35;
}
.route-selection {
  opacity: 0.8;
  stroke-width: 2.5;
}
.poignee {
  fill: #fff;
  stroke-width: 2;
  cursor: grab;
}
.poignee.selection {
  stroke-width: 3;
}
.poignee-marque {
  fill: transparent;
  stroke: transparent;
  cursor: grab;
}
.poignee-marque.selection {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-dasharray: 3 3;
}
.legende-depart {
  font-size: 10px;
  fill: var(--texte);
  opacity: 0.7;
  pointer-events: none;
}
.paire-sous {
  font-weight: 500;
  margin-top: 2px;
}
.paire-contact {
  color: var(--faux);
}
.note {
  font-size: 13px;
  color: var(--texte-doux);
  margin: 8px 0 0;
}
.fiche-bateau {
  border: 1px solid var(--bordure);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.fiche-ecarte {
  border-color: #f2a32c;
  box-shadow: inset 3px 0 0 #f2a32c;
}
.fiche-tete {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.fiche-tete .pastille {
  width: 22px;
  height: 22px;
  font-size: 12px;
}
.statut {
  margin-left: auto;
  color: var(--texte-doux);
  font-size: 13px;
}
.fiche-bateau ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}
.fiche-bateau li {
  padding-left: 18px;
  position: relative;
}
.fiche-bateau li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.devoir::before {
  content: "!";
  color: #d98a12;
  left: 5px !important;
}
.droit::before {
  content: "✓";
  color: var(--bon);
}
.alerte {
  color: var(--faux);
}
.libre {
  color: var(--texte-doux);
}
#bac-paires {
  margin-top: 8px;
}