/* ==========================================================================
   Comprendre l'animation · habillage des fiches
   Additif au style du site : aucun token nouveau, aucune police nouvelle,
   rien de redefini. Uniquement ce qu'il faut pour du texte long, que les
   pages de l'atelier n'avaient pas encore a porter.
   ========================================================================== */

/* ---------- 1. Le corps d'une fiche ---------- */
/* Le site a une colonne large, bonne pour des blocs et des grilles. Un texte
   suivi se lit mal au-dela de ~70 signes par ligne : la fiche garde donc sa
   propre largeur a l'interieur du wrap. */
.fiche{max-width:68ch}
.fiche p{margin:0 0 .9em}
.fiche>*:first-child{margin-top:0}
.fiche h3{
  font-family:var(--titre);font-weight:400;font-size:1.05rem;
  margin:1.8em 0 .5em;color:var(--encre);
}
.fiche .titre-sec{margin-top:2.1em}
/* Newsreader est une variable de 300 a 600 : le gras du corps de texte est
   donc un vrai gras dessine, pas un faux-gras. La regle "une seule graisse"
   de la charte vise les titres en Karrik, qui eux n'en ont qu'une. */
.fiche b{font-weight:600}

/* ---------- 2. Listes ---------- */
.puces-fiche{margin:0 0 1.1em;padding-left:1.1rem;list-style:none}
.puces-fiche li{position:relative;margin:0 0 .55em}
.puces-fiche li::before{
  content:"";position:absolute;left:-1.1rem;top:.62em;
  width:5px;height:5px;background:var(--accent);border-radius:50%;
}

/* ---------- 3. Citations ---------- */
/* Les fiches citent beaucoup, et souvent des gens qui parlent de leur propre
   travail : la citation est donc mise en avant, pas rangee en petit. */
.citation{
  margin:1.4em 0;padding:.1em 0 .1em 1.1rem;
  border-left:2px solid var(--accent);
}
.citation p{font-style:italic;color:var(--encre);margin:0}

/* ---------- 4. Tableaux ---------- */
.tableau-fiche{overflow-x:auto;margin:0 0 1.3em}
.tableau-fiche table{border-collapse:collapse;width:100%;font-size:.95rem}
.tableau-fiche th,.tableau-fiche td{
  text-align:left;vertical-align:top;padding:.55em .9em .55em 0;
  border-bottom:1px solid var(--trait);
}
.tableau-fiche th{
  font-family:var(--titre);font-weight:400;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gris);
}

/* ---------- 5. Le complement a telecharger ---------- */
.fiche__pdf{max-width:68ch;margin:2.4rem 0 0}
.fiche__pdf p{margin:0 0 .5em}
.fiche__pdf p:last-child{margin:0;display:flex;flex-wrap:wrap;gap:.7rem;align-items:baseline}
.fiche__pdf .pdf{
  display:inline-block;background:var(--encre);color:var(--papier);
  padding:.62em 1.1em;border-radius:4px;text-decoration:none;
  font-family:var(--titre);font-size:.92rem;
}
.fiche__pdf .pdf:hover{background:var(--accent-fonce);color:var(--blanc)}
.fiche__pdf .petit{font-size:.8rem;color:var(--gris)}

/* ---------- 6. D'une fiche a l'autre ---------- */
.fiche__nav{
  display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  max-width:68ch;margin:2.4rem 0 0;padding-top:1.1rem;
  border-top:1px solid var(--trait);font-size:.92rem;
}
.fiche__nav a{color:var(--encre);text-decoration:none}
.fiche__nav a:hover{color:var(--accent-fonce);text-decoration:underline}

/* ---------- 7. L'index de la section ---------- */
/* La liste reprend .disciplines, deja utilisee sur la page Ressources : meme
   grille, memes cartes, donc rien a reapprendre pour le lecteur. */
.intro-groupe{max-width:68ch;margin:0 0 1.1rem;color:var(--gris)}
.fiches-liste+.titre-sec{margin-top:2.6rem}

@media (max-width:560px){
  .fiche,.fiche__pdf,.fiche__nav,.intro-groupe{max-width:none}
}