@import url("../assets/fonts/fonts.css");

/* ============================================================
   Socle commun des outils enseignants (docs/enseignants/outils/*.html)
   ------------------------------------------------------------
   Chargé AVANT le <style> de chaque outil : un outil ne garde dans son
   propre <style> que sa mise en page spécifique et peut surcharger ce socle.
   outils.css (chargé APRÈS) ne porte que le transversal : barre de retour,
   mode intégré, focus, animations, impression.

   Jetons (refonte du 2026-10-02) :
   - clair : mêmes fonds que le site (crème #faf8f3 / cartes blanches) ;
   - sombre : mêmes fonds que le thème slate du site (#1e2129 / #262a33), pour
     qu'un outil intégré dans une page ne forme pas un rectangle de teinte
     différente ;
   - tous les textes ≥ 4,5:1 sur tous les fonds du jeu ; contours de champs
     et de boutons ≥ 3:1 (RGAA 3.3, WCAG 1.4.11) ;
   - l'or --accent sert aux fonds, filets et pictogrammes ; le TEXTE or est
     --accent-text (l'or #b9822f ne fait que 3,1:1 sur crème).
   Échelle typographique : corps 1 rem, secondaire .9 rem, minimum .8125 rem
   (13 px, étiquettes et légendes seulement).
   ============================================================ */

:root{
  --bg:#faf8f3; --surface:#ffffff; --surface-2:#f2eee2;
  --ink:#1a2e5c; --ink-muted:#4d5870;
  --accent:#b9822f; --accent-text:#7a5010; --accent-ink:#1a2e5c; --accent-soft:#f3e6d1;
  --btn-bg:#1a2e5c; --btn-ink:#faf8f3;
  --warn:#8f4f12; --warn-soft:#f7ecd6;
  --err:#a3372d; --err-soft:#f8e4e1;
  --amber:#7a5410; --amber-soft:#f3e7cd;
  --grey:#55615f; --grey-soft:#e7eae9;
  --border:#dee1ea; --border-strong:#7a8499;
  --shadow:0 1px 2px rgba(26,46,92,.06), 0 8px 24px -12px rgba(26,46,92,.18);
  color-scheme:light; /* doit correspondre à celui de la page parente pour que le fond transparent le soit vraiment */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1e2129; --surface:#262a33; --surface-2:#2e333d;
    --ink:#e2e4e9; --ink-muted:#a9b0bf;
    --accent:#e8b96a; --accent-text:#e8b96a; --accent-ink:#1a2e5c; --accent-soft:#3a3120;
    --btn-bg:#e8b96a; --btn-ink:#1a2e5c;
    --warn:#e0964a; --warn-soft:#3a3120;
    --err:#f0a39b; --err-soft:#3d2321;
    --amber:#d9ab55; --amber-soft:#3a3120;
    --grey:#98a3a0; --grey-soft:#2e3634;
    --border:#3a404c; --border-strong:#7d8597;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1e2129; --surface:#262a33; --surface-2:#2e333d;
  --ink:#e2e4e9; --ink-muted:#a9b0bf;
  --accent:#e8b96a; --accent-text:#e8b96a; --accent-ink:#1a2e5c; --accent-soft:#3a3120;
  --btn-bg:#e8b96a; --btn-ink:#1a2e5c;
  --warn:#e0964a; --warn-soft:#3a3120;
  --err:#f0a39b; --err-soft:#3d2321;
  --amber:#d9ab55; --amber-soft:#3a3120;
  --grey:#98a3a0; --grey-soft:#2e3634;
  --border:#3a404c; --border-strong:#7d8597;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* Alias : certains outils écrivent --danger plutôt que --err */
:root{ --danger:var(--err); --danger-soft:var(--err-soft); }

*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:'DM Sans', system-ui, sans-serif; line-height:1.5; }
h1,h2,h3{ font-family:'DM Serif Display', Georgia, serif; text-wrap:balance; margin:0; }
.wrap{ max-width:1180px; margin:0 auto; padding:2.5rem 1.75rem 4rem; }
header.page h1{ font-size:1.7rem; font-weight:600; }
header.page p{ margin:.4rem 0 0; color:var(--ink-muted); font-size:1rem; max-width:72ch; }

/* --- Encadré d'information --- */
.callout{ display:flex; gap:.7rem; align-items:flex-start; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; margin:1.25rem 0 1.75rem; font-size:.9rem; color:var(--ink-muted); }
.callout svg{ flex:none; margin-top:.15rem; color:var(--accent-text); }
.callout b{ color:var(--ink); font-weight:600; }
.callout p{ margin:0 0 .5rem; } .callout p:last-child{ margin-bottom:0; }
.callout-source{ font-size:.8125rem; margin-top:.6rem; }

/* --- Carte --- */
.panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.4rem; box-shadow:var(--shadow); margin-bottom:1.25rem; }
.panel h2{ font-size:1.1rem; font-weight:600; margin-bottom:.2rem; }
.panel .hint{ color:var(--ink-muted); font-size:.9rem; margin:0 0 .9rem; }

/* --- Champs --- */
label.lbl{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.25rem; }
input[type=text], input[type=number], input[type=date], select, textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--border-strong); border-radius:8px; padding:.5rem .65rem;
}
textarea{ resize:vertical; min-height:4.5rem; line-height:1.45; }
input[type=checkbox], input[type=radio]{ width:1.1rem; height:1.1rem; accent-color:var(--btn-bg); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media (max-width:760px){ .grid2, .grid3{ grid-template-columns:1fr; } }

/* --- Boutons : primaire = marine sur crème (clair) / or sur marine (sombre) ; ≥ 36 px de haut --- */
.btn{ border:1px solid var(--border-strong); background:var(--surface-2); color:var(--ink); border-radius:8px; padding:.5rem .9rem; min-height:2.25rem; cursor:pointer; font-family:inherit; font-size:.9rem; }
.btn:hover{ background:var(--accent-soft); border-color:var(--accent-text); }
.btn.primary{ background:var(--btn-bg); color:var(--btn-ink); border-color:var(--btn-bg); font-weight:600; }
.btn.primary:hover{ filter:brightness(1.12); }
.btn.danger:hover{ background:var(--err-soft); border-color:var(--err); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
/* Seconde famille de boutons (button.btn-primary / .btn-secondary), même rendu */
.btn-primary{ background:var(--btn-bg); color:var(--btn-ink); border-color:var(--btn-bg); }
.btn-primary:hover:not(:disabled){ filter:brightness(1.12); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--border-strong); }
.btn-secondary:hover:not(:disabled){ background:var(--accent-soft); border-color:var(--accent-text); }
.toolbar{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.toolbar.right{ justify-content:flex-end; }

/* --- Signaux de relecture --- */
.sigs{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.sig{ border:1px solid var(--border); border-left:4px solid var(--border-strong); border-radius:8px; padding:.6rem .85rem; font-size:.9rem; background:var(--surface-2); }
.sig.err{ border-left-color:var(--err); background:var(--err-soft); }
.sig.warn{ border-left-color:var(--warn); background:var(--warn-soft); }
.sig.info{ border-left-color:var(--accent); }
.sig.ok{ border-left-color:var(--accent); background:var(--accent-soft); }
.sig .tag{ display:inline-block; font-size:.8125rem; font-family:'JetBrains Mono', monospace; border:1px solid currentColor; border-radius:4px; padding:0 .3rem; margin-right:.45rem; }
.sig.err .tag{ color:var(--err); } .sig.warn .tag{ color:var(--warn); } .sig.info .tag, .sig.ok .tag{ color:var(--accent-text); }
.sig q{ font-style:normal; font-weight:600; }
.sig small{ display:block; color:var(--ink-muted); margin-top:.15rem; font-size:.875rem; }

.warn{ background:var(--warn-soft); color:var(--ink); border:1px solid var(--border); border-left:4px solid var(--warn); border-radius:8px; padding:.8rem 1rem; font-size:.9rem; margin-top:1rem; }
.warn b{ color:var(--warn); }
.warn p{ margin:0 0 .4rem; } .warn p:last-child{ margin:0; }

/* --- Tableaux --- */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; }
table{ border-collapse:collapse; width:100%; font-size:.9rem; background:var(--surface); }
th, td{ text-align:left; vertical-align:top; padding:.6rem .75rem; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
th:last-child, td:last-child{ border-right:none; }
tbody tr:last-child th, tbody tr:last-child td{ border-bottom:none; }
thead th{ background:var(--btn-bg); color:var(--btn-ink); font-family:'DM Serif Display', Georgia, serif; font-weight:600; font-size:.95rem; }
td ul{ margin:0; padding-left:1.05rem; }

ul.vig{ margin:0; padding-left:1.1rem; font-size:.9rem; }
ul.vig li{ margin-bottom:.4rem; }

footer.foot{ margin-top:2rem; font-size:.8125rem; color:var(--ink-muted); text-align:center; }

/* --- Impression : toujours en clair, sans l'interface --- */
@media print{
  @page{ size:A4 landscape; margin:10mm; }
  body{ background:#fff; color:#000; }
  .wrap{ padding:0; max-width:none; }
  .no-print{ display:none !important; }
  .panel{ box-shadow:none; border:none; padding:0; }
  .table-wrap{ overflow:visible; border:none; }
  thead th{ background:#1a2e5c !important; color:#faf8f3 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  tr{ break-inside:avoid; }
}