/* lutin/fiches/fiche-maison.css — style commun des fiches rédigées pour le site
   (notions absentes du livret « Le lutin des maths »). Même esprit que les
   pages du livret : une feuille claire, des encadrés de couleur.
   Utilisé par chaque fiche (page autonome, imprimable) et par la visionneuse
   de lutin/lecons.html, qui y affiche l'<article class="fiche-maison">. */
.fiche-maison{
  --encre:#1b2233; --doux:#4d5870;
  --regle:#15703f; --regle-fond:#e9f8f0;
  --exemple:#2a62c9; --exemple-fond:#eaf1ff;
  --piege:#c73838; --piege-fond:#fdeeee;
  --retiens:#8a5a00; --retiens-fond:#fff6de;
  max-width:820px; margin:0 auto; padding:26px 28px 30px; box-sizing:border-box;
  background:#fff; color:var(--encre); border-radius:10px;
  font-family: Arial, "Helvetica Neue", sans-serif; font-size:17px; line-height:1.55;
  text-align:left;
}
.fiche-maison *{ box-sizing:border-box; }
.fiche-maison header{ border-bottom:3px solid #e8e3d4; padding-bottom:10px; margin-bottom:18px; }
.fiche-maison h1{ margin:0; font-size:1.7em; line-height:1.2; color:#2a1c08; text-align:left; text-shadow:none; font-weight:800; }
.fiche-maison .niveaux{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.fiche-maison .niveaux span{ font-size:.75em; font-weight:700; padding:2px 9px; border-radius:6px; background:#f3ead2; color:#7a5a12; }
.fiche-maison .intro{ margin:10px 0 0; color:var(--doux); }
.fiche-maison h2{ font-size:1.25em; margin:26px 0 10px; color:#2a1c08; display:flex; align-items:center; gap:10px; text-shadow:none; text-align:left; }
.fiche-maison h2 .num{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:#2a1c08; color:#fff; font-size:.8em; flex:none;
}
.fiche-maison p{ margin:8px 0; }
.fiche-maison .boite{ border-left:6px solid; border-radius:8px; padding:12px 16px; margin:12px 0; }
.fiche-maison .boite > .titre{ font-weight:800; margin-bottom:4px; }
.fiche-maison .regle  { border-color:var(--regle);   background:var(--regle-fond); }
.fiche-maison .regle > .titre  { color:var(--regle); }
.fiche-maison .exemple{ border-color:var(--exemple); background:var(--exemple-fond); }
.fiche-maison .exemple > .titre{ color:var(--exemple); }
.fiche-maison .piege  { border-color:var(--piege);   background:var(--piege-fond); }
.fiche-maison .piege > .titre  { color:var(--piege); }
.fiche-maison .retiens{ border-color:var(--retiens); background:var(--retiens-fond); }
.fiche-maison .retiens > .titre{ color:var(--retiens); }
.fiche-maison ol, .fiche-maison ul{ margin:6px 0; padding-left:1.4em; }
.fiche-maison li{ margin:3px 0; }
.fiche-maison table{ border-collapse:collapse; width:100%; margin:8px 0; font-size:.95em; }
.fiche-maison th, .fiche-maison td{ border:1px solid #d9dfeb; padding:6px 9px; text-align:left; vertical-align:top; }
.fiche-maison th{ background:#f4f6fb; }
.fiche-maison .nb{ font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.fiche-maison .rang{ background:#ffe27a; border-radius:3px; padding:0 2px; }
.fiche-maison .suivant{ background:#bfe3ff; border-radius:3px; padding:0 2px; }
.fiche-maison .ok{ color:var(--regle); font-weight:700; }
.fiche-maison .ko{ color:var(--piege); font-weight:700; }
@media (max-width:600px){
  .fiche-maison{ padding:18px 14px; font-size:16px; }
  .fiche-maison h1{ font-size:1.4em; }
}
@media print{ .fiche-maison{ box-shadow:none; } }

/* Barre de navigation des fiches ouvertes seules (lien direct, « Ouvrir ↗ »).
   Masquée dans un cadre (aperçu de la bibliothèque) et à l'impression ; la
   visionneuse et l'ardoise n'affichent que l'<article>, sans cette barre. */
.fiche-nav{ max-width:820px; margin:0 auto 12px; display:flex; gap:8px; flex-wrap:wrap; }
.fiche-nav a{
  font:700 15px Arial, sans-serif; text-decoration:none; color:#2a1c08;
  background:#fff; border:1px solid #d9c9a3; border-radius:999px; padding:7px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.fiche-nav a:hover{ background:#fff6de; }
.dans-cadre .fiche-nav{ display:none; }
@media print{ .fiche-nav{ display:none; } }
