Pirogue d'Antalaha - jeu de vanille (p5.js)

css/style.css · 1.9 Ko

/* ==========================================================
   style.css - mise en page du jeu « Pirogue d'Antalaha »
   Mobile d'abord : une seule colonne, le canevas prend la
   largeur disponible (le calcul précis est fait dans sketch.js).
   ========================================================== */

:root {
  --fond: #0c2a3f;
  --texte: #f2f7fa;
  --texte-doux: #bcd0dc;
  --accent: #ffb703;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 12px 16px;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.45;
  /* empêche le "rebond" de défilement sur mobile pendant la partie */
  overscroll-behavior: none;
}

header, main, footer { max-width: 520px; margin: 0 auto; }

h1 { font-size: 1.2rem; margin: 8px 0; text-align: center; }
h2 { font-size: 1.05rem; margin: 16px 0 6px; }

/* Boîte du canevas */
#conteneur-jeu {
  width: 100%;
  line-height: 0;               /* supprime l'espace sous le canevas */
  border-radius: 12px;
  overflow: hidden;
  background: #0e5a86;
}

/* ===== TRÈS IMPORTANT pour un jeu tactile =====
   touch-action: none dit au navigateur : "ne fais PAS défiler la page
   et ne zoome pas quand le doigt glisse sur ce canevas".
   Sans cela, glisser le doigt pour piloter ferait défiler la page. */
#conteneur-jeu canvas {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;   /* pas de flash gris au toucher */
  outline: none;
}

.aide ul { padding-left: 20px; margin: 4px 0; color: var(--texte-doux); }
.aide li { margin: 3px 0; }

.avertissement { background: #7a2e2e; padding: 12px; border-radius: 8px; }
footer { color: var(--texte-doux); font-size: 0.9rem; margin-top: 12px; }
code { background: #17435f; padding: 1px 5px; border-radius: 4px; }