/* ============================================================
   Generateur de fiches — feuille de style
   Palette : fournitures scolaires (ardoise, reglure Seyes, marge rouge)
   ============================================================ */
:root {
  --bureau:  #9c9a8f;
  --ardoise: #2b3138;
  --ardoise-clair: #3b434c;
  --craie:   #f2f1ea;
  --papier:  #ffffff;
  --encre:   #16307a;
  --seyes:   #a6b2dc;
  --marge:   #cf4136;
  --ok:      #3f7d5c;
  --trait:   #d8d6cd;
  --ui: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--ardoise);
  background: var(--bureau);
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- Ossature ---------- */
.app { display: grid; grid-template-columns: 300px 1fr 268px; height: 100vh; }

/* ---------- Colonne gauche : la bibliotheque ---------- */
.biblio { background: var(--ardoise); color: var(--craie); display: flex;
          flex-direction: column; min-height: 0; }
.biblio header { padding: 14px 16px 10px; border-bottom: 1px solid var(--ardoise-clair); }
.logo { font-size: 15px; font-weight: 700; letter-spacing: .02em; margin: 0 0 2px; }
.logo b { color: var(--seyes); }
.logo-sous { font-size: 11px; opacity: .55; margin: 0; }

.filtres { padding: 10px 16px; display: grid; gap: 7px;
           border-bottom: 1px solid var(--ardoise-clair); }
.filtres input, .filtres select {
  width: 100%; padding: 7px 9px; border-radius: 5px; background: var(--ardoise-clair);
  border: 1px solid #4b545e; color: var(--craie);
}
.filtres input::placeholder { color: #8d959d; }
.filtres .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

.liste { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.dom-titre { font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
             color: #8d959d; padding: 12px 6px 5px; }
.exo {
  display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: start;
  padding: 8px 9px; border-radius: 6px; cursor: grab; margin-bottom: 2px;
  border: 1px solid transparent;
}
.exo:hover { background: var(--ardoise-clair); border-color: #5a636d; }
.exo:active { cursor: grabbing; }
.exo .code { font-family: var(--mono); font-size: 10px; padding: 2px 5px; border-radius: 3px;
             background: var(--seyes); color: var(--ardoise); font-weight: 700; }
.exo .lib { font-size: 12.5px; line-height: 1.35; }
.exo .meta { font-size: 10.5px; color: #98a0a8; margin-top: 3px; }
.exo .tag-verrou { color: #f0b8b4; }
.exo .tag-afaire { color: #f2d08a; }

.btn-ajout {
  margin: 8px 16px 14px; padding: 9px; border-radius: 6px; border: 1px dashed #626b75;
  background: none; color: var(--craie); font-size: 12.5px;
}
.btn-ajout:hover { background: var(--ardoise-clair); border-style: solid; }

/* ---------- Colonne centrale : le plan de travail ---------- */
.travail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.barre {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: var(--craie); border-bottom: 1px solid var(--trait); flex-wrap: wrap;
}
.barre input[type=text], .barre input[type=date], .barre select {
  padding: 6px 8px; border: 1px solid var(--trait); border-radius: 5px; background: #fff;
}
.barre .titre-fiche { min-width: 190px; font-weight: 600; }
.barre .pousse { margin-left: auto; }
.bt { padding: 7px 13px; border-radius: 6px; border: 1px solid var(--trait);
      background: #fff; font-size: 13px; }
.bt:hover { border-color: #a9a79c; }
.bt-fort { background: var(--encre); color: #fff; border-color: var(--encre); font-weight: 600; }
.bt-fort:hover { background: #0f2560; }

.scene { flex: 1; overflow: auto; padding: 26px 0 60px; }
.pages { display: flex; flex-direction: column; align-items: center; gap: 26px; }

/* ---------- La feuille A4 ---------- */
.feuille {
  position: relative; width: 210mm; min-height: 297mm; background: var(--papier);
  box-shadow: 0 2px 14px rgba(0,0,0,.28); padding: 12mm 12mm 14mm 20mm;
  font-family: Arial, Helvetica, sans-serif; color: #000;
}
/* SIGNATURE : la reglette millimetrique + la marge rouge */
.feuille::before {                        /* marge rouge de cahier */
  content: ""; position: absolute; top: 0; bottom: 0; left: 16mm;
  border-left: .4mm solid var(--marge); opacity: .5;
}
.reglette {
  position: absolute; top: 0; bottom: 0; left: 0; width: 16mm; pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, #b9b6ab 0 .2mm, transparent .2mm 5mm) left  / 2.5mm 100% no-repeat,
    repeating-linear-gradient(to bottom, #8d8a80 0 .25mm, transparent .25mm 10mm) left / 4.5mm 100% no-repeat;
  opacity: .75;
}
.reglette .repere {                      /* jauge : ou s'arrete le contenu */
  position: absolute; left: 0; width: 16mm; border-top: .5mm solid var(--ok);
}
.reglette .repere span {
  position: absolute; left: 1mm; top: 1mm; font: 700 2.6mm var(--ui); color: var(--ok);
}
.feuille.deborde .reglette .repere { border-color: var(--marge); }
.feuille.deborde .reglette .repere span { color: var(--marge); }

.entete { border-bottom: .4mm solid #000; padding-bottom: 2mm; margin-bottom: 5mm; }
.entete .l1 { display: flex; justify-content: space-between; font-size: 3.6mm; }
.entete .l2 { font-size: 5mm; font-weight: 700; text-align: center; margin-top: 2mm; }

/* ---------- Un bloc d'exercice ---------- */
.grille { display: flex; flex-wrap: wrap; gap: 4mm; align-items: flex-start; }
.bloc {
  position: relative; border: .35mm solid #000; padding: 2.5mm 3mm;
  width: 100%; background: #fff;
}
.bloc.demi { width: calc(50% - 2mm); }
.bloc.survol { outline: 2px solid var(--encre); outline-offset: 2px; }
.bloc.choisi { outline: 2px solid var(--encre); outline-offset: 2px; }
.bloc .enonce { font-size: 3.9mm; margin: 0 0 1.5mm; }
.bloc .corps { font-size: 3.9mm; line-height: 1.55; }
.bloc .corps p { margin: 0 0 1mm; }
.bloc .fig { margin: 2mm 0 1mm; }
.bloc .fig svg { max-width: 100%; height: auto; }
.bloc .reponse { border-top: .2mm dashed #999; margin-top: 2mm; }
.bloc .poignee {
  position: absolute; top: -1px; right: -1px; display: none; gap: 1px;
  background: var(--encre); border-radius: 0 0 0 4px;
}
.bloc:hover .poignee { display: flex; }
.bloc .poignee button {
  border: 0; background: none; color: #fff; padding: 2px 6px; font-size: 12px; line-height: 1.4;
}
.bloc .poignee button:hover { background: #0f2560; }
.bloc .etiq {
  position: absolute; bottom: -1px; right: -1px; font: 700 2.4mm var(--mono);
  background: #000; color: #fff; padding: .3mm 1.2mm;
}
.depot { height: 6mm; border: 1.5px dashed var(--encre); border-radius: 3px;
         margin: 1mm 0; background: rgba(22,48,122,.06); }

/* ---------- Colonne droite : l'inspecteur ---------- */
.inspecteur { background: var(--craie); border-left: 1px solid var(--trait);
              overflow-y: auto; padding: 14px; }
.inspecteur h2 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
                 color: #7d7a70; margin: 0 0 10px; }
.champ { margin-bottom: 13px; }
.champ label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.champ .val { float: right; font-family: var(--mono); font-weight: 400; color: #6c6a61; }
.champ input[type=range] { width: 100%; }
.champ select, .champ input[type=number] {
  width: 100%; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 5px; background: #fff;
}
.avert { background: #fbeae9; border-left: 3px solid var(--marge); padding: 8px 10px;
         font-size: 12px; border-radius: 0 4px 4px 0; margin-bottom: 12px; line-height: 1.45; }
.info { background: #eaf0ea; border-left: 3px solid var(--ok); padding: 8px 10px;
        font-size: 12px; border-radius: 0 4px 4px 0; margin-bottom: 12px; line-height: 1.45; }
.vide { color: #8a8780; font-size: 12.5px; line-height: 1.5; }
.stat { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0;
        border-bottom: 1px dotted var(--trait); }
.stat b { font-family: var(--mono); font-weight: 600; }

/* ---------- Fenetre d'edition ---------- */
.voile { position: fixed; inset: 0; background: rgba(20,22,26,.55); display: none;
         align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.voile.on { display: flex; }
.fenetre { background: var(--craie); border-radius: 8px; width: min(760px, 96vw);
           max-height: 92vh; overflow-y: auto; padding: 20px 22px; }
.fenetre h3 { margin: 0 0 14px; font-size: 17px; }
.fenetre .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fenetre label { display: block; font-size: 12px; font-weight: 600; margin: 10px 0 4px; }
.fenetre input, .fenetre select, .fenetre textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--trait); border-radius: 5px;
  background: #fff;
}
.fenetre textarea { min-height: 92px; font-family: var(--mono); font-size: 12px; }
.fenetre .pied { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; }
.apercu-fig { background: #fff; border: 1px solid var(--trait); border-radius: 5px;
              padding: 10px; margin-top: 8px; min-height: 60px; text-align: center; }
.apercu-fig svg { max-width: 100%; height: auto; }

.mesureur { position: absolute; left: -9999px; top: 0; visibility: hidden; }
/* meme largeur utile qu'une feuille (210 - 20 - 12), sans etre une .feuille :
   sinon le conteneur de mesure sortirait une page blanche a l'impression */
.cadre-mesure { width: 178mm; font-family: Arial, Helvetica, sans-serif; color: #000; }

/* ---------- Impression ---------- */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { overflow: visible; background: #fff; }
  .biblio, .inspecteur, .barre, .poignee, .depot, .reglette,
  .mesureur, .voile { display: none !important; }
  .app { display: block; }
  .scene { overflow: visible; padding: 0; }
  .pages { gap: 0; }
  .feuille {
    width: 210mm; min-height: 297mm; height: 297mm; box-shadow: none; margin: 0;
    page-break-after: always; break-after: page; padding-left: 14mm;
  }
  .feuille:last-child { page-break-after: auto; break-after: auto; }
  .feuille::before { display: none; }
  .bloc { outline: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   Ajouts : mes fiches, corrigé, message discret, éditeur simplifié
   ============================================================ */
.barre .case { display: flex; align-items: center; gap: 5px; font-size: 13px;
               padding: 6px 9px; border: 1px solid var(--trait); border-radius: 5px;
               background: #fff; cursor: pointer; }
.barre .case input { margin: 0; }

/* Message discret en bas d'écran */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(14px);
  background: var(--ardoise); color: var(--craie); padding: 11px 20px; border-radius: 7px;
  font-size: 13.5px; box-shadow: 0 4px 18px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 80;
  max-width: 80vw; text-align: center;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Liste des fiches enregistrées */
.tbl-fiches { width: 100%; border-collapse: collapse; }
.tbl-fiches td { padding: 11px 4px; border-bottom: 1px solid var(--trait); vertical-align: middle; }
.tbl-fiches td.act { text-align: right; white-space: nowrap; width: 1%; }
.tbl-fiches .bt { padding: 5px 10px; font-size: 12.5px; }
.sous-l { font-size: 12px; color: #7d7a70; margin-top: 3px; }

/* Éditeur : le technique est replié par défaut */
.fenetre details.avance { margin-top: 16px; border-top: 1px solid var(--trait); padding-top: 6px; }
.fenetre details.avance summary { cursor: pointer; font-size: 13px; font-weight: 600;
                                  padding: 8px 0; color: #6f6c64; }
.fenetre details.avance summary:hover { color: var(--encre); }
.fenetre .oblig { color: var(--marge); font-weight: 400; font-size: 11.5px; }

/* Page de corrigé */
.feuille.corrige .entete .l1 span:first-child { font-weight: 700; letter-spacing: .1em; }
ol.corr { font-size: 4mm; line-height: 1.5; padding-left: 7mm; margin: 0; }
ol.corr li { margin-bottom: 3.5mm; }
ol.corr .c-code { font-family: var(--mono); font-size: 3.1mm; background: #000; color: #fff;
                  padding: .3mm 1.2mm; border-radius: 1mm; margin-right: 1.5mm; }
ol.corr .c-rep { margin-top: 1mm; padding-left: 2mm; border-left: .5mm solid var(--ok); }
ol.corr .c-rep i { color: #888; font-size: 3.4mm; }

/* ============================================================
   Ajouts : contrôle du nombre de pages, insertion, export PDF
   ============================================================ */
.barre .sep { width: 1px; align-self: stretch; background: var(--trait); margin: 0 3px; }
.barre .grp { display: flex; align-items: center; gap: 6px; font-size: 13px;
              padding: 4px 8px; border: 1px solid var(--trait); border-radius: 5px;
              background: #fff; }
.barre .grp select { border: 1px solid var(--trait); border-radius: 4px; padding: 4px 6px;
                     background: #fff; }
.bt-mini { padding: 4px 10px; font-size: 12.5px; }
.compteur { font-size: 12.5px; font-family: var(--mono); padding: 5px 9px;
            border-radius: 5px; background: #e6e4dc; color: #6f6c64; }
.compteur.bon  { background: #dfeade; color: var(--ok); font-weight: 600; }
.compteur.trop { background: #f7ddda; color: var(--marge); font-weight: 600; }

/* Trait d'insertion pendant le glisser-déposer */
.bloc.av { box-shadow: 0 -3px 0 -1px var(--encre); }
.bloc.ap { box-shadow: 0  3px 0 -1px var(--encre); }
.bloc.av::before, .bloc.ap::before {
  content: "insérer ici"; position: absolute; left: 3mm; font: 700 2.6mm var(--ui);
  background: var(--encre); color: #fff; padding: .4mm 1.6mm; border-radius: 1mm;
}
.bloc.av::before { top: -4mm; }
.bloc.ap::before { bottom: -4mm; }

/* Fenêtre d'export PDF */
.tbl-reglages { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl-reglages td { padding: 9px 6px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tbl-reglages td:first-child { width: 44%; color: #6f6c64; }
.tbl-reglages .pq { display: block; font-size: 12px; color: #8a8780; margin-top: 2px;
                    font-weight: 400; }

.msg-vide { padding: 4px 10px; font-size: 12.5px; line-height: 1.55; color: #98a0a8; }
.msg-vide p { margin: 0 0 8px; }
.msg-vide a { color: var(--seyes); font-weight: 600; }

/* ============================================================
   Fractions : numérateur et dénominateur empilés, barre horizontale
   ============================================================ */
.frac {
  display: inline-block; vertical-align: middle; text-align: center;
  margin: 0 .6mm; line-height: 1.15;
}
.frac .num { display: block; padding: 0 1mm .3mm; border-bottom: .35mm solid currentColor; }
.frac .den { display: block; padding: .3mm 1mm 0; }
/* case à compléter dans une fraction à trou */
.frac .tr {
  display: inline-block; min-width: 6mm; height: 3.4mm;
  border-bottom: .3mm dotted #666; vertical-align: bottom;
}
/* dans la bibliothèque (petit), on garde la barre mais compact */
.exo .frac { margin: 0 2px; font-size: .92em; }
.exo .frac .num { border-bottom-width: 1px; padding: 0 2px 1px; }
.exo .frac .den { padding: 1px 2px 0; }
/* fraction en écriture linéaire, pour les champs de saisie */
.frac-lin { white-space: nowrap; }

/* Barre d'outils fractions dans l'éditeur d'exercice */
.barre-frac { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
              padding: 8px 10px; background: #fff; border: 1px solid var(--trait);
              border-radius: 6px 6px 0 0; border-bottom: 0; }
.barre-frac .lbl { font-size: 12.5px; font-weight: 600; color: #6f6c64; }
.barre-frac .astuce { flex-basis: 100%; font-size: 12px; color: #8a8780; line-height: 1.45; }
.barre-frac code { background: #e6e4dc; padding: 1px 4px; border-radius: 3px; }
.fenetre .barre-frac + textarea { border-radius: 0 0 6px 6px; }

/* Aperçu du texte saisi */
.apercu-txt { background: #fff; border: 1px solid var(--trait); border-radius: 6px;
              padding: 10px 12px; margin-top: 9px; font-family: Arial, Helvetica, sans-serif;
              font-size: 14px; line-height: 1.6; min-height: 44px; }
.apercu-txt .etq { font: 600 10px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase;
                   color: #a8a59c; margin-bottom: 7px; }
.apercu-txt i { color: #a8a59c; }
.apercu-txt p { margin: 0 0 4px; }