Pluviométrie mensuelle - tableau de bord (p5.js)

css/style.css · 2.8 Ko

/* ==========================================================
   style.css - mise en page du tableau de bord pluviométrie
   Mobile d'abord : une colonne, puis on centre sur grand écran.
   ========================================================== */

:root {
  --fond: #f3f6f9;
  --carte: #ffffff;
  --texte: #1c2a39;
  --texte-doux: #4a5b6d;
  --accent: #1f6fa8;
  --alerte-fond: #fff3cd;
  --alerte-bord: #b58100;
}

* { box-sizing: border-box; }

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

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

h1 { font-size: 1.4rem; margin: 16px 0 8px; }

/* Bandeau : rappel très visible que les données sont fictives */
.bandeau {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--alerte-fond);
  border-left: 5px solid var(--alerte-bord);
  border-radius: 6px;
  font-size: 0.95rem;
}

.commandes {
  display: flex;
  flex-wrap: wrap;          /* à la ligne si l'écran est étroit */
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

select, button {
  font: inherit;
  min-height: 44px;         /* cible tactile confortable */
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #8ea3b8;
  background: #fff;
  color: var(--texte);
}
button { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; cursor: pointer; }
select:focus-visible, button:focus-visible { outline: 3px solid #f2a007; outline-offset: 2px; }

/* Zone du graphique */
#conteneur-canvas {
  width: 100%;
  background: var(--carte);
  border: 1px solid #d5dde5;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
#conteneur-canvas canvas {
  display: block;
  max-width: 100%;
  /* pan-y : le doigt peut faire défiler la page verticalement ;
     les mouvements horizontaux sont laissés au graphique. */
  touch-action: pan-y;
}

.aide { color: var(--texte-doux); font-size: 0.9rem; margin: 8px 0; }
.resume { background: var(--carte); border: 1px solid #d5dde5; border-radius: 8px; padding: 10px 12px; margin: 8px 0; }

/* Tableau de données */
.tableau-details { margin-top: 12px; }
.tableau-details summary { cursor: pointer; padding: 10px 0; font-weight: 600; }
.defile-x { overflow-x: auto; }      /* le tableau défile dans sa boîte : pas de scroll horizontal de la page */
table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.9rem; background: var(--carte); }
th, td { border: 1px solid #d5dde5; padding: 6px 8px; text-align: right; }
th:first-child, td:first-child { text-align: left; }
thead th { background: #e4edf5; }

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