/* Jetons du design system. Mode clair uniquement : color-scheme le declare,
   donc les controles natifs (sliders, barres de defilement) restent clairs
   meme si le systeme est en sombre. */
body {
  color-scheme: light only;
  --page:           #f9f9f7;
  --surface-1:      #fcfcfb;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --bordure:        rgba(11, 11, 11, 0.10);
  --accent:         #2a78d6;   /* meme famille que la rampe du champ */
  --accent-doux:    #eaf2fc;
  --piste:          #e1e0d9;
  --avertissement:  #fab219;
}
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 20px;
  /* Hauteur fixee a l'ecran : rien ne defile, ni la page ni les colonnes.
     C'est la contrainte de depart -- la temperature lue doit rester sous les
     yeux pendant qu'on deplace un slider. Repli pour les petits ecrans en bas
     de fichier. */
  height: 100vh;
  overflow: hidden;
  background: var(--page);
  color: var(--text-primary);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- en-tete --------------------------------------------------------- */
h1 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }

.alerte {
  margin: 0;
  padding: 10px 14px 10px 12px;
  border-left: 3px solid var(--avertissement);
  border-radius: 6px;
  background: var(--surface-1);
  font-size: 13px;
  color: var(--text-secondary);
}
.alerte::before { content: "⚠ "; color: var(--avertissement); }

/* --- structure ------------------------------------------------------- */
/* Vue | lecture + reglages | parametres. Les deux colonnes de droite sont a
   largeur fixe : la vue prend tout le reste. */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 246px 318px;
  gap: 14px;
}
.colonne { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.carte {
  background: var(--surface-1);
  border: 1px solid var(--bordure);
  border-radius: 14px;
  padding: 16px 18px;
}
.carte-vue { padding: 8px; position: relative; display: flex; }
#vue { flex: 1; min-height: 0; }
.chargement {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0; color: var(--text-muted);
}
/* display:flex ci-dessus l'emporte sur l'attribut hidden : sans cette regle,
   le message reste affiche par-dessus le maillage une fois charge. */
.chargement[hidden] { display: none; }

h2 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Les indices (Q120, Tmax, cp...) ne doivent pas ecarter les lignes. */
sub { font-size: 0.72em; line-height: 0; }

.note {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--bordure);
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* --- lecture du champ ------------------------------------------------ */
/* Le grand nombre est le maximum : il n'est donc pas repete dans le tableau
   dessous, qui ne porte que la moyenne et le minimum. */
.hero {
  margin: 0;
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero-unite {
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 5px;
}
.secondaires {
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 10px;
  margin: 14px 0 0;
  font-size: 13px;
}
.secondaires dt { color: var(--text-secondary); }
.secondaires dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- portions affichees ---------------------------------------------- */
/* Un cube d'octants par bouton, pas une fraction ecrite : on voit
   directement quel morceau est retire. La fraction reste dans l'infobulle. */
.portions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.portion {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--page);
  cursor: pointer;
}
.portion:hover { border-color: var(--piste); }
.portion.actif {
  border-color: var(--accent);
  background: var(--accent-doux);
}
.portion:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Huit cases carrees = les huit octants : rangee du haut z > 0, rangee du bas
   z < 0, colonnes = les quadrants x-y. Le glyphe est donc deux fois plus
   large que haut. */
.glyphe { display: block; width: 50px; height: 26px; }
.glyphe .fond { fill: #fff; stroke: var(--piste); stroke-width: 1; }
.glyphe .part { fill: var(--accent); }

.bascule {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}
.bascule input { accent-color: var(--accent); margin: 0; }

/* --- boutons --------------------------------------------------------- */
.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  border: 1px solid var(--bordure);
  border-radius: 9px;
  background: var(--page);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bouton:hover { border-color: var(--accent); color: var(--accent); }
.bouton:active { background: var(--accent-doux); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.icone {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* --- points de vue enregistres --------------------------------------- */
.carte-points { display: flex; flex-direction: column; min-height: 0; }
.points {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  /* Seule liste qui peut defiler, et seulement au-dela de quatre entrees :
     une colonne entiere qui defile ferait perdre la lecture de vue. */
  max-height: 132px;
  overflow-y: auto;
}
.points li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.points .apercu {
  flex: none;
  display: flex;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
}
.points .apercu:hover { border-color: var(--accent); }
.points .apercu .glyphe { width: 30px; height: 16px; }
.points input {
  flex: 1;
  min-width: 0;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
}
.points input:hover { border-color: var(--piste); }
.points input:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.mini {
  flex: none;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.mini:hover { background: var(--page); color: var(--text-primary); }
.vide {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* --- lecture au survol (haut droite de la fenetre du maillage) -------- */
/* Deux paires par ligne : le bloc reste bas (53 px), il ne peut donc pas
   empieter sur l'echelle de couleurs, qui commence plus bas sur le bord
   droit. La barre d'outils Plotly, qui occupait ce coin, est retiree. */
.survol {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 2;
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 1px 6px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid var(--bordure);
  border-radius: 8px;
  background: rgba(252, 252, 251, 0.88);
  font-size: 12px;
  pointer-events: none;   /* ne doit pas intercepter la rotation a la souris */
}
.survol dt { color: var(--text-muted); }
.survol dt + dd { padding-right: 10px; }
.survol dd {
  margin: 0;
  min-width: 5.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;   /* la largeur ne saute pas au survol */
  color: var(--text-primary);
}
.survol dd:last-child { padding-right: 0; }

/* --- repere d'orientation (bas gauche de la fenetre du maillage) ------ */
.repere {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 88px; height: 88px;
  z-index: 2;
  pointer-events: none;   /* la rotation a la souris doit passer au travers */
}
.repere line {
  stroke: var(--text-secondary);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.repere circle { fill: var(--text-muted); }
.repere text {
  fill: var(--text-secondary);
  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}

/* --- parametres ------------------------------------------------------ */
.carte-parametres { display: flex; flex-direction: column; min-height: 0; }
#sliders { flex: 1; min-height: 0; }
.param + .param { margin-top: 14px; }
.tete { display: flex; align-items: center; gap: 6px; }
.nom { font-weight: 600; font-size: 13px; }
.unite { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.aide {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--text-muted);
  color: var(--text-muted);
  font-size: 9px;
  font-style: italic;
  line-height: 12px;
  text-align: center;
  cursor: help;
}
.rangee { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.chip {
  flex: none;
  width: 68px;
  padding: 5px 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--page);
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;   /* colonne de valeurs alignees */
  text-align: center;
}
.chip:hover { border-color: var(--piste); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Cache les fleches natives du champ nombre : ce sont les sliders qui
   servent de +/-, les fleches doublonneraient et retrecissent le champ. */
.chip::-webkit-outer-spin-button, .chip::-webkit-inner-spin-button {
  appearance: none; margin: 0;
}
.chip { appearance: textfield; }

.graduations {
  display: flex;
  justify-content: space-between;
  margin: 3px 0 0 78px;
}
.graduations .grad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.graduations i {
  width: 1px;
  height: 5px;
  background: var(--piste);
  font-style: normal;   /* c'est un <i> par commodite, pas de l'italique */
}
.graduations b {
  font-size: 10px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}
/* Premiere et derniere graduation : le trait reste centre sur la valeur,
   mais le texte ne doit pas deborder du cadre de la carte. */
.graduations .grad:first-child { align-items: flex-start; }
.graduations .grad:last-child { align-items: flex-end; }

input[type=range] {
  flex: 1;
  min-width: 0;
  height: 22px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--accent) 0 var(--p, 50%), var(--piste) var(--p, 50%) 100%);
}
input[type=range]::-moz-range-track {
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(90deg,
    var(--accent) 0 var(--p, 50%), var(--piste) var(--p, 50%) 100%);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 3px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-1);
  border: 3px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}
input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- replis ---------------------------------------------------------- */
/* Fenetre trop courte pour tout montrer : c'est la PAGE qui defile, pas une
   colonne. La lecture part alors du champ de vision, mais rien n'est coupe --
   au lieu de defiler a l'interieur d'une colonne en gardant les autres
   immobiles, ce qui est exactement ce qu'on cherchait a eviter. */
@media (max-height: 720px) {
  body { height: auto; min-height: 100vh; overflow: auto; }
  #vue { min-height: 420px; }
}
@media (max-width: 1100px) {
  main { grid-template-columns: minmax(0, 1fr) 246px; }
  body { height: auto; min-height: 100vh; overflow: auto; }
  #vue { min-height: 420px; }
}

/* --- onglets de champ (haut gauche de la fenetre du maillage) ---------- */
/* Des onglets et non des boutons : on ne declenche rien, on choisit ce que
   la fenetre montre. L'onglet actif prend le fond de la carte et deborde
   d'un pixel sur la ligne de base, qu'il interrompt -- la forme classique
   d'un onglet ouvert. Le conteneur laisse passer la souris (rotation) ; seuls
   les onglets eux-memes la captent. */
.onglets {
  position: absolute;
  top: 8px;
  left: 12px;
  z-index: 2;
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--bordure);
  pointer-events: none;
}
.onglets[hidden] { display: none; }
.onglet {
  pointer-events: auto;
  margin-bottom: -1px;
  padding: 6px 14px 5px;
  border: 1px solid transparent;
  border-top-width: 2px;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.onglet:hover { color: var(--text-primary); background: rgba(11, 11, 11, 0.03); }
.onglet.actif {
  border-color: var(--bordure);
  border-top-color: var(--accent);
  background: var(--surface-1);
  color: var(--text-primary);
  font-weight: 600;
}
.onglet:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* "aucune DEF" remplace le grand nombre : il lui faut la taille d'un texte,
   pas celle d'un nombre a trois chiffres. */
.hero-texte {
  font-size: 1.6rem;
  letter-spacing: 0;
}