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

/* Feuille transversale des outils enseignants (docs/enseignants/outils/*.html).
   Ordre de chargement : zt-base.css (jetons + composants communs) → <style> de l'outil
   (mise en page propre) → ce fichier, qui ne porte que ce qui doit rester identique
   partout : barre de retour, mode intégré dans la page du site, focus clavier,
   animations légères, impression.

   Polices : DM Sans / DM Serif Display / JetBrains Mono, auto-hébergées dans assets/fonts
   (importées ci-dessus). Aucune requête vers un service tiers. */

/* --- Barre de retour (affichée seulement quand l'outil est ouvert seul, hors de la page du site) --- */
.zt-back{
  display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; align-items:center;
  font:500 .9rem/1.2 'DM Sans', system-ui, sans-serif;
  padding:.65rem 1.75rem;
  border-bottom:1px solid var(--border);
  background:var(--bg); color:var(--ink);
}
.zt-back a{ color:inherit; text-decoration:none; }
.zt-back a:hover, .zt-back a:focus-visible{ text-decoration:underline; }
.zt-back .zt-back-hub{ margin-left:auto; opacity:.85; }

/* --- Mode intégré : l'outil est affiché dans une page du site (iframe .zt-outil, voir
   assets/outil-embed.js). Le titre, le fil d'Ariane et la navigation viennent de la page ;
   le fond devient transparent pour reprendre exactement celui du site. --- */
html.zt-embed body{ background:transparent; }
html.zt-embed .zt-back, html.zt-embed header.page{ display:none; }
html.zt-embed .wrap{ padding:.25rem .1rem 1.5rem; max-width:none; }
html.zt-embed .callout{ margin-top:.25rem; margin-bottom:1.25rem; }
html.zt-embed .callout-source[hidden]{ display:none; }

/* --- Focus clavier visible et cohérent (3 px, ≥ 3:1 sur les deux thèmes) --- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:3px solid var(--accent-text); outline-offset:2px;
}

/* --- Contour des champs : ≥ 3:1 partout (WCAG 1.4.11), quelle que soit la feuille de l'outil --- */
input[type=text], input[type=number], input[type=date], input[type=search], select, textarea{
  border-color:var(--border-strong);
}

/* --- Texte réservé aux lecteurs d'écran --- */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- Animations légères (identiques dans tous les outils) --- */
@keyframes zt-pop{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:translateY(0) scale(1)}}
html{ scroll-behavior:smooth; }
.panel, .callout, .sig, .term, .card{ animation:zt-pop .35s ease both; }
.btn{ transition:transform .12s ease, background-color .15s ease; }
.btn:active{ transform:scale(.97); }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* --- Impression : la barre de retour ne s'imprime jamais --- */
@media print{ .zt-back, .no-print{ display:none !important; } }