@charset "utf-8";
/* =======================================================
   courbe.css — Feuille de style générique (cogitospc)
   Exercices de placement de points sur un graphique
   ======================================================= */
/* === Réactivité de la taille du texte === */
@media screen and (min-width:1001px) {
  *, body, html {
    font-size: 30px
  }
}
@media screen and (min-width:801px) and (max-width:1000px) {
  *, body, html {
    font-size: 26px;
    max-width: 1200px
  }
}
@media screen and (min-width:601px) and (max-width:800px) {
  *, body, html {
    font-size: 24px;
    max-width: 800px
  }
}
@media screen and (min-width:451px) and (max-width:600px) {
  *, body, html {
    font-size: 20px;
    max-width: 600px
  }
}
@media screen and (max-width:450px) {
  *, body, html {
    font-size: 16px;
    max-width: 450px
  }
}
/* === Base du document === */
*, body, html {
  font-family: "Arial", sans-serif;
  font-weight: normal;
  margin: 0;
}
body {
  background-color: #F8DE7E
}
/* === Titre principal === */
h1 {
  margin: 0px 5% 10px 5%;
  padding: 3px 1.5%;
  font-size: 1.4rem;
  text-align: left;
  color: red;
  border-radius: 10px;
  border: 4px solid;
  border-color: #999 #333 #333 #999;
  background-color: yellow;
}
/* === Bloc principal === */
.bloc {
  background: #00FFFF;
  border: 4px solid;
  border-color: #999 #333 #333 #999;
  border-radius: 10px;
  margin: 10px 5%;
  padding: 10px;
}
/* === Bouton Valider et résultat === */
form #valider {
  padding: 3px 0;
  font-weight: normal;
  font-size: 2rem;
  color: red;
  border-radius: 40px;
  border: 4px solid red;
  background-color: aquamarine;
  width: 60%;
  display: block;
  margin: 0 20%;
}
form h5 {
  padding: 3px 3px 0 0;
  margin: 10px 5%;
  font-weight: normal;
  font-size: 1.6rem !important;
  color: black;
  font-style: italic;
  text-align: center;
  line-height: normal;
  border: 4px solid red;
  border-radius: 15px;
  background-color: rgba(255, 153, 102, 1);
}
form h5 #resultat {
  padding-bottom: 2px;
  font-size: 1.6rem !important;
  text-align: center;
  line-height: normal;
  font-weight: normal;
  color: darkgreen;
  font-style: normal;
  width: 90%;
  border: none;
  background-color: transparent;
}
/* === Conteneur à défilement horizontal (simple et fiable) === */
.conteneurADefilementHorizontal {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-behavior: smooth;
  text-align: center; /* centre le contenu inline-block */
  border-radius: 10px;
  border: 4px solid;
  border-color: #999 #333 #333 #999;
  background-color: #DDD;
  margin: 10px auto;
  max-width: 96%;
  padding: 0;
  box-sizing: border-box;
}
/* === Conteneur interne (SVG, tableau) === */
.svgContainer {
  display: inline-block;
  min-width: max-content; /* empêche la compression */
  padding-left: 28px; /* ✅ goulotte visible à gauche */
  padding-right: 16px;
  background: #fff;
}
/* === SVG taille fixe === */
svg {
  background: #fff;
  display: block;
  margin: 0 auto;
  max-width: none !important;
  max-height: none !important;
  height: auto;
}
/* === Grilles === */
.grilleFin {
  stroke: #ccc;
  stroke-width: 0.5
}
.grilleMoyen {
  stroke: #999;
  stroke-width: 1
}
.grilleFort {
  stroke: #000;
  stroke-width: 2
}
/* Variante à deux niveaux (si simplifiée) */
.grilleFin2 {
  stroke: #bbb;
  stroke-width: 0.6
}
.grilleFort2 {
  stroke: #000;
  stroke-width: 2
}
/* === Axes et flèches === */
.axeLine {
  stroke: #000;
  stroke-width: 2.5;
  fill: none
}
.axeArrow {
  fill: #000
}
/* === Titres et graduations === */
.tickLabel {
  font-size: 14px;
  fill: #000;
  text-anchor: middle
}
.tickLabelY {
  font-size: 14px;
  fill: #000;
  text-anchor: end
}
.axisTitle {
  font-size: 18px;
  font-weight: normal;
  fill: #d32f2f
} /* rouge */
/* === Points déplaçables === */
.draggablePlus {
  cursor: grab;
  font-size: 30px;
  font-style: normal;
  user-select: none;
  outline: none;
  transition: fill 0.2s;
}
.draggablePlus.dragging {
  cursor: grabbing
}
.draggablePlus.selected {
  fill: #c2185b;
  stroke: #000;
  stroke-width: 0.5
}
/* États des points */
svg text.draggablePlus {
  fill: green !important
} /* + déplaçables */
svg text.draggablePlus[data-locked="1"] {
  fill: blue !important
} /* + verrouillés */
#calib text.draggablePlus {
  fill: green !important
} /* +0 calibration */
/* === Courbe cachée avant réussite === */
.courbe {
  fill: none;
  stroke: #1565c0;
  stroke-width: 3;
  visibility: hidden
}
.courbe.visible {
  visibility: visible
}
/* === Zone de calibration === */
.calibRect {
  fill: #fafafa;
  stroke: #000;
  stroke-width: 1
}
.calibCross {
  stroke: #d32f2f;
  stroke-width: 1
}
/* === Tableaux === */
table{
  margin: 10px auto;
  border-collapse: collapse;
  background-color: burlywood;

  width: fit-content;     /* clé : ne s'étire pas */
  max-width: 100%;
  table-layout: auto;     /* laisser le contenu décider */
}
th{
  color: #F00;
  background-color: orange;
  white-space: nowrap;
}
th > span{
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
th, td{
  width: auto;
  border: 2px solid #000;
  padding: 6px 8px;
  text-align: center;
  font-size: 1rem;
}
caption {
  text-align: center;
  font-size: 1rem;
  color: green;
  text-decoration: underline;
  margin-bottom: 4px;
}
tbody {
  background-color: burlywood
}
/* === Contrôles (calibration + coordonnées) === */
.controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin: 12px 5%;
  flex-wrap: wrap;
}
.controls label {
  font-size: 1rem;
  color: #000
}
.controls input[type="number"] {
  width: 80px;
  text-align: center;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 4px;
  background: #fff;
}
.btn {
  font-size: 1rem;
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn:hover {
  background: #e0f7fa
}
/* === Suppression des ascenseurs pour corrX et corrY === */
input[type=number]#corrX, input[type=number]#corrY {
  -moz-appearance: textfield
}
input[type=number]#corrX::-webkit-outer-spin-button, input[type=number]#corrX::-webkit-inner-spin-button, input[type=number]#corrY::-webkit-outer-spin-button, input[type=number]#corrY::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* === Coordonnées === */
#coords {
  font-size: 1rem;
  background: #fff;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 6px 10px;
  white-space: nowrap;
}
/* === Lien exercice suivant === */
#exSuivant {
  width: 50%;
  margin: 10px auto;
  font-size: 1.2rem;
  text-align: center;
  background-color: white;
  border-radius: 10px;
  border: 2px solid;
  border-color: #333 #666 #666 #333;
  visibility: hidden;
}
#exSuivant a {
  color: red;
  text-decoration: none;
}
/* === Pour distinguer les 3 courbes === */
#courbeSegment {
  stroke: #1565c0;
}
#courbeSpline {
  stroke: #2e7d32;
  stroke-dasharray: 6 4;
}
#courbeExpo {
  stroke: #d32f2f;
  stroke-dasharray: 2 2;
}
/* === Pour la centraliser la légende === */
#miniLegend text.legendText {
  font-size: 14px;
  fill: #111;
}
#miniLegend rect {
  fill: #fff;
  opacity: 0.85;
  stroke: #333;
  stroke-width: 1;
}