@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');

    body {
      font-family: 'Nunito', sans-serif;
      padding: 40px;
      background-color: #fefefe;
      background-image: linear-gradient(to bottom, #fefefe 98%, #dcdcdc 99%);
      background-size: 100% 40px;
      color: #333;
    }

    h1 {
      font-size: 28px;
      margin-bottom: 20px;
      color: #2c3e50;
    }

    .controls {
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    input[type="text"] {
      width: 350px;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.05);
    }

    code {
      background-color: #f1f1f1;
      padding: 2px 5px;
      border-radius: 4px;
      font-family: monospace;
    }

    button {
      padding: 10px 14px;
      font-size: 15px;
      border: none;
      border-radius: 8px;
      background-color: #3498db;
      color: white;
      transition: background 0.2s ease-in-out;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      cursor: pointer;
    }

    button:hover {
      background-color: #2980b9;
    }

    #jxgbox {
      width: 650px;
      height: 420px;
      border: 2px solid #ccc;
      background-color: white;
      border-radius: 12px;
      margin-top: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    #helpBox {
      background-color: #fff8c4; /* jaune pâle */
      border: 2px solid black;
      padding: 15px;
      margin-left: 30px;
      max-width: 320px;
      border-radius: 10px;
      font-size: 0.95rem;
      line-height: 1.5em;
    }
    #helpBox h3 {
      margin-top: 0;
      color: black;
    }

    #main-options-container {
      display: flex;
      align-items: flex-start;
      gap: 20px;
    }

    .option-box {
  background-color: #e0f7ff;           /* bleu ciel */
  border: 2px solid black;             /* bord noir */
  border-radius: 12px;
  padding: 20px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-box h3 {
  margin-top: 0;
}

.jxg-controls button.rotate-btn {
  font-size: 30px;          /* taille des flèches */
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
/* optionnel : hover */
.jxg-controls button.rotate-btn:hover {
  background: rgba(0,0,0,0.04);
}

.jxg-controls button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 18px; /* pour les boutons textuels (↶ ↷ ou "réinitialiser" si transformé) */
}

/* icônes SVG un peu plus grandes et centrées */
.jxg-controls button svg {
  width: 22px;
  height: 22px;
  display: block;
}

.jxg-controls button.reset-btn,
.jxg-controls .small-row > .reset-btn {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 14px !important;
  font-size: 15px !important;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* si tu veux qu'il garde le même style visuel que les autres boutons */
.jxg-controls button.reset-btn {
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(0,0,0,0.06);
  color: #222;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}


/* ajustement spécifique pour les boutons rotate si besoin (légèrement plus grand) */
.jxg-controls button.rotate-btn {
  font-size: 22px;
}

/* espacement entre boutons */
.jxg-controls .small-row {
  display: flex;
  gap: 8px;
}


/* Style pour le pied de page */
footer {
  background-color: #f8f9fa;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #6c757d;
  padding: 10px 30px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  width: 100%;
}

.footer-left,
.footer-right {
  display: flex;
  /* footer-left should lay out inline items; allow wrap on small screens */
  flex-direction: row;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* make the assistant note slightly muted/smaller */
.footer-left .assistant-note {
  color: #666;
  font-size: 0.95rem;
}

/* keep previous mobile behaviour (footer-content switches to column) */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .footer-right {
    align-self: flex-end;
    padding-top: 5px;
  }
}


/*Boite de suggestions*/
    .suggestions {
      margin-top: 8px;
      background-color: #ffffff;
      border: 1px solid #ccc;
      border-radius: 8px;
      max-width: 350px;
      padding: 8px;
      font-size: 14px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .suggestion-item.highlighted {
  background-color: #d0eaff;
  font-weight: bold;
}

    .suggestions div {
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
    }

    .suggestions div:hover, .suggestions .highlighted {
      background-color: #ecf0f1;
    }

#jxgbox { position: relative; } /* nécessaire pour positionner les contrôles à l'intérieur */

.jxg-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
  pointer-events: auto;
}

.jxg-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  background: rgba(255,255,255,0.98);
}

.jxg-controls button i {
  font-size: 16px;
  line-height: 1;
}


.jxg-controls .small-row {
  display: flex;
  gap: 6px;
}

.jxg-controls .reset-row {
  justify-content: center; /* centre le bouton sous les rotates */
}

.jxg-controls button.reset-btn {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px 14px !important;
  font-size: 15px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.98) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  color: #222 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

/* s'assurer que les boutons de la même ligne restent identiques */
.jxg-controls .small-row { gap: 8px; align-items: center; }

.jxg-controls button.zoom-btn {
  background: #d2b9f7 !important;   /* violet clair */
  border: 1px solid #dfc7ff !important;
  color: #222 !important;
}

.jxg-controls button.rotate-btn {
  background: #e8f8ea !important;   /* vert clair */
  border: 1px solid #cfeed0 !important;
  color: #222 !important;
}

/* reset : fond gris, taille automatique (classe déjà présente) */
.jxg-controls button.reset-btn {
  background: #f3f3f4 !important;
  border: 1px solid #ddd !important;
  color: #222 !important;
}

/* réduire uniquement la taille des symboles + / - (zoom-btn) sans changer les boutons */
.jxg-controls button.zoom-btn svg {
  width: 14px !important;
  height: 14px !important;
  display: block;
}
.jxg-controls button.zoom-btn svg path,
.jxg-controls button.zoom-btn svg line {
  stroke-width: 1.4 !important; /* trait un peu plus fin */
}

/* si + / - sont du texte (fallback), réduire la police seule */
.jxg-controls button.zoom-btn {
  font-size: 10px !important;
  line-height: 1 !important;
}

.jxg-controls button.zoom-btn:hover { background: #e6d9ff !important; }
.jxg-controls button.rotate-btn:hover { background: #dff2df !important; }
.jxg-controls button.reset-btn:hover { background: #ececec !important; }

/* maintenir la même taille visuelle */
.jxg-controls button { transition: background .12s ease; }

/* si le texte/icône est blanc par héritage, forcer la couleur */
.jxg-controls button svg path,
.jxg-controls button svg line,
.jxg-controls button svg circle {
  stroke: currentColor;
}

/* style pour le bouton d'export (sous le panneau d'options) */
#optionsPanel + .external-export-btn,
.external-export-btn {
  display: inline-block;
  margin-top: 10px;
  margin-left: 12px;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 8px;
  background: #6c7ae0;
  color: #fff;
  border: none;
  cursor: pointer;
}
.external-export-btn:hover { background: #5967c7; }

/* s'assurer que #jxgbox contient l'SVG rendu par JSXGraph */
#jxgbox svg { width: 100% !important; height: 100% !important; display: block; }

.jxg-controls button { color: #222 !important; }
.jxg-controls button svg { width: 18px; height: 18px; display: block; }
.jxg-controls button svg path,
.jxg-controls button svg line,
.jxg-controls button svg circle { stroke: black !important; fill: none !important; }