/*
 * style.css — Animations géométrie V1.5.0
 * Accueil, pages de thème et animations.
 */

/*
 * Charte commune avec l'accueil général des outils pédagogiques
 * (outils.generation-enseignement.fr) : fond crème, cartes blanches,
 * orange de la marque, police système, mode sombre.
 * Chaque thème a sa couleur (--theme), posée par une classe sur <body>.
 */

:root {
  --fond: #f6f4ef;
  --papier: #ffffff;
  --texte: #1d1d1f;
  --doux: #5f6368;
  --bord: #d9d5cc;
  --accent: #c2410c;          /* orange de la marque */
  --accent-encre: #ffffff;
  --theme: #c2410c;           /* couleur du thème (par défaut : la marque) */
  --theme-doux: #fbe9df;
  --theme-fonce: #9a330a;
  --survol: #efece5;

  /* Figure : toujours « papier blanc », même en mode sombre */
  --bleu: #1f5fd1;            /* tracés de l'élève */
  --grille: #eeebe4;
}

/* Thème « Tracés de base » : bleu */
.theme-traces {
  --theme: #1d4ed8;
  --theme-doux: #e3ebfc;
  --theme-fonce: #1a3fae;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #16171a;
    --papier: #222327;
    --texte: #ececec;
    --doux: #a3a7ad;
    --bord: #3a3c41;
    --accent: #fb923c;
    --accent-encre: #1a1a1a;
    --theme: #fb923c;
    --theme-doux: #3b2a1e;
    --theme-fonce: #fdba74;
    --survol: #2c2d32;
  }

  .theme-traces {
    --theme: #7aa2f7;
    --theme-doux: #1e2a44;
    --theme-fonce: #a5c0fa;
  }
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

a {
  color: var(--theme);
}

/* --- En-tête commun ---------------------------------------------------------- */

.entete {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--bord);
  border-top: 4px solid var(--theme);
  background: var(--papier);
}

.entete .titres h1 {
  margin: 0;
  font-size: 1.45rem;
}

.droits {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--doux);
}

.fil {
  margin-left: auto;
  font-size: 0.95rem;
  color: var(--doux);
}

.fil a {
  color: var(--theme);
  text-decoration: none;
}

.fil a:hover {
  text-decoration: underline;
}

/* --- Accueil et pages de thème : cartes (comme l'accueil général) ----------------- */

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.intro {
  color: var(--doux);
  margin: 0 0 16px;
  max-width: 70ch;
}

.cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.carte {
  flex: 1 1 300px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--bord);
  border-radius: 12px;
  background: var(--papier);
}

/* Carte d'un thème : bandeau à la couleur du thème */
.carte.theme {
  border-top: 5px solid var(--theme);
}

.carte h2,
.carte h3 {
  margin: 0;
  font-size: 1.15rem;
}

/* Page d'un thème : animations regroupées par instrument, en grille de
   cartes toutes de la même taille (4 par ligne). */
.page.large {
  max-width: 1280px;
}

.groupe h2 {
  margin: 26px 0 10px;
  font-size: 1.1rem;
  color: var(--theme-fonce);
}

.cartes.grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.cartes.grille .carte {
  min-height: 15.5rem;
}

.cartes.grille.trois {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1000px) {
  .cartes.grille,
  .cartes.grille.trois {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cartes.grille,
  .cartes.grille.trois {
    grid-template-columns: minmax(0, 1fr);
  }

  .cartes.grille .carte {
    min-height: 0;
  }
}

.carte p {
  margin: 0;
  color: var(--doux);
}

.carte .etiquette {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 10px;
  background: var(--theme-doux);
  color: var(--theme-fonce);
  font-size: 0.8rem;
  font-weight: 600;
}

.btn {
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--theme);
  color: var(--accent-encre);
  text-decoration: none;
}

.btn:hover {
  background: var(--theme-fonce);
}

.btn:focus-visible {
  outline: 2px solid var(--texte);
  outline-offset: 2px;
}

.carte.a-venir {
  opacity: 0.6;
}

.carte.a-venir .etiquette {
  background: var(--survol);
  color: var(--doux);
}

/* --- Page d'animation --------------------------------------------------------------- */

body.animation {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.scene {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 14px;
  min-height: 0;
  padding: 12px 14px 0;
}

.zone-figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
}

.consigne {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 3.2em;
  padding: 8px 14px;
  border-left: 5px solid var(--theme);
  border-radius: 6px;
  background: var(--papier);
  font-size: 1.25rem;
  line-height: 1.35;
}

.consigne .numero {
  flex: none;
  color: var(--theme);
  font-weight: 700;
  font-size: 1rem;
}

/* Cadre de la figure : bouton « Démarrer » posé au centre */
.cadre-figure {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.demarrer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 18px 34px;
  border: none;
  border-radius: 14px;
  background: var(--theme);
  color: var(--accent-encre);
  font-size: 1.6rem;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.demarrer:hover {
  background: var(--theme-fonce);
}

.demarrer[hidden] {
  display: none;
}

.figure {
  flex: 1;
  min-height: 0;
  width: 100%;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background:
    linear-gradient(var(--grille) 1px, transparent 1px) 0 0 / 25px 25px,
    linear-gradient(90deg, var(--grille) 1px, transparent 1px) 0 0 / 25px 25px,
    #ffffff;
}

.progression {
  height: 5px;
  border-radius: 3px;
  background: var(--bord);
  overflow: hidden;
}

.progression > div {
  height: 100%;
  width: 0;
  background: var(--theme);
}

/* Liste des étapes */
.panneau {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-bottom: 8px;
}

.panneau h2 {
  margin: 4px 0 0;
  font-size: 1rem;
  color: var(--doux);
}

.etapes {
  margin: 0;
  padding-left: 1.6em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.etapes li {
  padding: 6px 8px;
  border-radius: 6px;
  line-height: 1.35;
  cursor: pointer;
  color: var(--doux);
}

.etapes li:hover {
  background: var(--survol);
}

.etapes li.faite {
  color: var(--texte);
}

.etapes li.courante {
  background: var(--theme-doux);
  color: var(--texte);
  font-weight: 600;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--papier);
}

.options label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  cursor: pointer;
}

.options input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Barre de commandes */
.commandes {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px 12px;
}

.commandes button,
.options button {
  min-width: 46px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--papier);
  color: var(--texte);
  font-size: 1.15rem;
  cursor: pointer;
}

.commandes button:hover,
.options button:hover {
  border-color: var(--theme);
}

.commandes #btnLecture {
  min-width: 64px;
  background: var(--theme);
  border-color: var(--theme);
  color: var(--accent-encre);
}

.commandes label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--doux);
}

/* Cases masquées par l'attribut hidden (cases du 2e écran quand la 2e fenêtre est fermée) :
   « display: flex » ci-dessus l'emporterait sur le style par défaut de [hidden]. */
.commandes label[hidden],
.commandes [hidden] {
  display: none;
}

.commandes select {
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--papier);
  color: var(--texte);
  font-size: 0.95rem;
}

/* Écrans étroits : la liste des étapes passe sous la figure */
@media (max-width: 900px) {
  body.animation {
    height: auto;
    overflow: auto;
  }

  .scene {
    grid-template-columns: 1fr;
  }

  .figure {
    height: 60vh;
  }
}

/* --- Éléments de la figure ------------------------------------------------------ */

.trait-donne {
  stroke: #1f2933;
  stroke-width: 2.5;
  fill: none;
}

.trait-trace {
  stroke: var(--bleu);
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

/* Droite de construction (aide) */
.trait-aide {
  stroke: #7d8894;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.nom.aide {
  fill: #5b6773;
}

.point {
  stroke: #1f2933;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.nom {
  font: italic 26px "Times New Roman", serif;
  fill: #1f2933;
}

.nom.trace {
  fill: var(--bleu);
}

.codage {
  stroke: var(--bleu);
  stroke-width: 2;
  fill: none;
}

.contact {
  stroke: #2f80ed;
  stroke-width: 7;
  stroke-opacity: 0.45;
  stroke-linecap: round;
}

/* Arcs de construction au compas */
.arc-construction {
  stroke: #7d8894;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

/* Rayon, repères en pointillés */
.trait-pointille {
  stroke: #7d8894;
  stroke-width: 2;
  stroke-dasharray: 8 6;
  fill: none;
}

/* Codage d'un angle (petit arc) */
.codage-angle {
  stroke: var(--bleu);
  stroke-width: 2.5;
  fill: none;
}

/* Mesures écrites sur la figure (3,5 cm ; 65°) */
.nom.mesure {
  font: 600 24px system-ui, "Segoe UI", Arial, sans-serif;
  fill: var(--bleu);
}

/* Options en liste déroulante (nombre de reports, côté…) */
.options label.liste {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.options select {
  height: 38px;
  padding: 0 8px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: var(--papier);
  color: var(--texte);
  font-size: 1rem;
}

/* Résultats montrés sans animation (droites remarquables, images) */
.trait-resultat {
  stroke: var(--bleu);
  stroke-width: 2;
  stroke-opacity: 0.5;
  stroke-linecap: round;
  fill: none;
}

/* Quadrillage de 1 cm (translation sur quadrillage) */
.trait-quadrillage {
  stroke: #b8c9dc;
  stroke-width: 1.3;
  fill: none;
}

.figure.sans-grille {
  background: #ffffff;
}

/* Formes remplies (surfaces, bandes, pièces) */
.forme {
  fill: #dbe7fb;
  stroke: #1f2933;
  stroke-width: 2;
  stroke-linejoin: round;
}

.forme.sans-contour { stroke: none; }

/* Figure image d'une transformation */
.trait-image {
  stroke: #c2410c;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}

.nom.image {
  fill: #c2410c;
}

/* Thèmes : Tracé de triangles (vert), Transformations du plan (violet) */
.theme-triangles {
  --theme: #15803d;
  --theme-doux: #dcf3e4;
  --theme-fonce: #116430;
}

.theme-transformations {
  --theme: #7c3aed;
  --theme-doux: #ede4fd;
  --theme-fonce: #6025c9;
}

@media (prefers-color-scheme: dark) {
  .theme-triangles {
    --theme: #4ade80;
    --theme-doux: #173a24;
    --theme-fonce: #86efac;
  }

  .theme-transformations {
    --theme: #a78bfa;
    --theme-doux: #2c2245;
    --theme-fonce: #c4b5fd;
  }
}

/* --- Deux écrans (commun/ecrans.js) ------------------------------------------------- */

.commandes .ecran2 {
  margin-left: auto;
  font-size: 0.95rem;
}

.commandes .voix-haute,
.commandes .ecran2-texte {
  margin-left: 0;
  font-size: 0.9rem;
}

/* 2e fenêtre : la figure et le texte de l'étape, sans commandes ; la liste des étapes à droite
   seulement si la case « liste des étapes sur le 2e écran » est cochée (sinon : classe sans-liste) */
body.ecran2 .entete,
body.ecran2 .commandes,
body.ecran2 .panneau .options,
body.ecran2.sans-liste .panneau {
  display: none;
}

body.ecran2 .scene {
  padding: 10px 12px;
}

body.ecran2.sans-liste .scene {
  grid-template-columns: 1fr;
}

body.ecran2 .consigne {
  font-size: 1.6rem;
}

body.ecran2.sans-texte .consigne {
  visibility: hidden;
}

/* Bouton « Plein écran » et boîtes de message : styles par défaut fournis par commun/ecrans.js */



/* --- Écriture mathématique des textes (commun/notation.js) ----------------------------- */

/* Rendu géométrique de tous les textes des figures : leurs mesures ne dépendent plus de la taille
   de la fenêtre (décorations identiques sur les deux écrans). Posé ici plutôt que texte par texte :
   un moteur qui réutilise ses <text> n'hérite ainsi d'aucun style résiduel. */
svg text {
  text-rendering: geometricPrecision;
}

.nt-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 0.12em;
  font-size: 0.85em;
  line-height: 1.1;
}

.nt-num {
  padding: 0 0.15em;
  border-bottom: 1.5px solid currentColor;
}

.nt-den {
  padding: 0 0.15em;
}

.nt-rac {
  white-space: nowrap;
}

/* La barre suit les chiffres (boîte serrée), pas le haut de la ligne : sinon, avec un interligne
   serré (liste des étapes), elle tombe sous les mots de la ligne précédente. */
.nt-rac-sous {
  display: inline-block;
  line-height: 0.7;            /* boîte au ras du haut des chiffres : barre posée sur le radicande */
  padding: 0.03em 0.1em 0 0.05em;
  border-top: 1.5px solid currentColor;
}

/* Chapeau d'angle sur toute la désignation (AÔB) : deux traits obliques (∧) juste au-dessus des
   lettres, sans changer la hauteur de la ligne */
.nt-angle {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.nt-angle::before {
  content: "";
  position: absolute;
  left: 0.05em;
  right: 0.05em;
  top: -0.1em;
  height: 0.24em;
  background:
    linear-gradient(to top left, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px), currentColor calc(50% + 0.8px), transparent calc(50% + 0.8px)) left top / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.8px), currentColor calc(50% - 0.8px), currentColor calc(50% + 0.8px), transparent calc(50% + 0.8px)) right top / 50% 100% no-repeat;
}

/* Vecteur : flèche au-dessus des lettres */
.nt-vect {
  position: relative;
  display: inline-block;
  line-height: 1;
}

.nt-vect::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.1em;
  top: -0.02em;
  border-top: 1.5px solid currentColor;
}

.nt-vect::after {
  content: "";
  position: absolute;
  right: 0;
  top: -0.17em;
  border-left: 0.32em solid currentColor;
  border-top: 0.17em solid transparent;
  border-bottom: 0.17em solid transparent;
}

/* Événement contraire décrit par des mots : barre au-dessus */
.nt-contraire {
  text-decoration: overline;
  text-decoration-thickness: 1.5px;
}

/* --- Variantes à l'essai (choix écartés, gardés pour en analyser l'utilité) ------------- */

.variantes-essai {
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px dashed var(--bord);
  border-radius: 8px;
  color: var(--doux);
  font-size: 0.92rem;
}

.variantes-essai summary {
  cursor: pointer;
  font-style: italic;
}

.variantes-essai[open] summary {
  margin-bottom: 6px;
}


/* --- Moteur commun V3 : calculs, panneau, fractions (commun/textes.js) ------------------ */

/* Calculs écrits dans la figure (k.egalites, Anim.Panneau) */
.nom.calcul {
  font: 24px "Times New Roman", serif;
  fill: #1f2933;
}

.nom.calcul.titre {
  font: 600 21px system-ui, "Segoe UI", Arial, sans-serif;
  fill: #5f6368;
}

.nom.calcul.resultat { fill: var(--bleu); }
.nom.calcul.non { fill: #dc2626; }

/* Fond du panneau de calcul */
.panneau-fond {
  fill: #ffffff;
  fill-opacity: 0.92;
  stroke: #d9d5cc;
  stroke-width: 1.5;
}

/* Barre d'une fraction écrite en hauteur dans la figure */
.trait-fraction {
  stroke: #1f2933;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}