@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Merriweather:wght@400;700&display=swap");

/* La feuille historique du site, passee aux jetons.
   Les valeurs vivent dans tokens.css, les composants dans bundle.css, tous
   deux charges avant ce fichier. Plus aucune couleur n'est codee en dur ici :
   si une nuance manque, elle s'ajoute au systeme, pas a cette feuille.

   Deux fontes, roles inverses. Archivo tient tout le site. Merriweather ne
   sert plus que dans la colonne de lecture du livre (`content--livre`, en bas
   de ce fichier) et dans l'exergue d'une carte.

   L'ancienne palette ocre est partie le 22/09/2026 : l'ambre des metadonnees
   est devenu --discret, celui des survols --bleu, le jaune signal --signal,
   la bande creme --surface, et --bleu-voile marque ce qui est selectionne. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Le defaut du site est la sans. Le livre reprend la serif dans sa colonne de
   lecture, tout en bas de ce fichier : c'est le seul endroit ou elle vit
   encore, avec l'exergue d'une carte. */
body {
  font-family: var(--font-sans);
  line-height: 1.6;
  color: var(--texte);
}

/* La selection prend le voile bleu : l'orange signal est une marque, pas
   un fond de texte, et l'encre dessus ne passe pas 4,5:1. */
::selection {
  background: var(--bleu-voile);
  color: var(--encre);
}

/* Header */
.header {
  background: var(--papier);
  padding: 1rem 2rem;
  box-shadow: var(--ombre-entete);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  //display: flex;
  align-items: center;
  gap: 1rem;
}

.hamburger {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--encre);
}

.logo {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--encre);
  text-decoration: none;
}

/* Le bloc de droite : la langue, le telechargement, puis À propos. */
.header-actions {
  float: right;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.about {
  font-size: 1rem;
  font-weight: normal;
  color: var(--encre);
  text-decoration: none;
  opacity: 0.5;
}

.about:hover {
  opacity: 1;
}

/* Le passage a l'autre langue. Meme discretion que À propos : c'est une
   sortie de secours pour qui n'a pas la bonne version, pas une invitation. */
.langue {
  font-size: 1rem;
  font-weight: normal;
  color: var(--encre);
  text-decoration: none;
  opacity: 0.5;
}

.langue:hover {
  opacity: 1;
}

/* Menu de telechargement */
.download {
  position: relative;
  display: flex;
}

.download-toggle {
  display: flex;
  padding: 0.15rem;
  background: none;
  border: 0;
  color: var(--encre);
  opacity: 0.5;
  cursor: pointer;
}

.download-toggle:hover,
.download-toggle[aria-expanded="true"] {
  opacity: 1;
}

.download-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  z-index: 1100;
  min-width: 17rem;
  max-width: calc(100vw - 2rem);
  padding: 0.35rem 0;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-top: 1px solid var(--filet);
  box-shadow: var(--ombre-menu);
}

.download-menu[hidden] {
  display: none;
}

.download-menu a {
  display: block;
  padding: 0.6rem 1rem;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--encre);
  text-decoration: none;
}

.download-menu a:hover {
  background: var(--surface);
}

.download-menu a small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.73rem;
  line-height: 1.4;
  color: var(--discret);
}

.download-menu hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 0.35rem 0;
}

/* Offcanvas Menu */
.offcanvas {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: var(--papier);
  z-index: 1001;
  transition: left 0.3s ease;
  padding: 2rem;
  overflow-y: auto;
}

.offcanvas.open {
  left: 0;
}

.offcanvas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--filet);
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--encre);
}

.nav-menu {
  list-style: none;
}

.nav-menu > li {
  margin-bottom: 1rem;
}

.nav-menu a {
  color: var(--encre);
  text-decoration: none;
  font-size: 1.1rem;
  display: block;
  padding: 0.5rem 0;
}

.nav-menu a:hover {
  color: var(--bleu);
}

.nav-submenu {
  list-style: none;
  margin-bottom: 1rem;
}

.nav-submenu li {
  margin-bottom: 0.5rem;
}

.nav-submenu a {
  font-size: 1.15rem;
  font-weight: normal;
  color: var(--encre);
  border-bottom: none;
  padding: 0.25rem 0;
}
.nav-submenu a:hover {
  color: var(--bleu);
}

.nav-group {
  margin-top: 2.25rem;
}

.nav-group-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--encre);
  padding: 0.4rem 0;
  border-bottom: 2px solid var(--encre);
  margin-bottom: 1rem;
}

.nav-group-title em {
  font-style: normal;
  font-size: 1rem;
  font-weight: bold;
  color: var(--discret);
  font-variant-numeric: tabular-nums;
}

.nav-part {
  margin-top: 1.4rem;
}

/* Ou on en est. Le carre signal, le meme que dans les entrees. */
.nav-submenu li.is-current {
  position: relative;
}

.nav-submenu li.is-current::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.75rem;
  width: 11px;
  height: 11px;
  background: var(--signal);
}

.nav-submenu li.is-current > a {
  color: var(--encre);
  font-weight: bold;
}

/* Le groupe en cours, en bandeau. */
.nav-group.is-current-group > .nav-group-title {
  background: var(--bleu-voile);
  margin-left: -0.6rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* La section en cours : l'ambre passe en encre. */
.nav-part.is-current-part > .nav-part-title {
  color: var(--encre);
}

.nav-part-title {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
  text-decoration: none;
  padding: 0.3rem 0;
  margin-bottom: 0.35rem;
}

.nav-part-title:hover {
  color: var(--encre);
}

.nav-bottom-links {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  display: flex;
  gap: 0.5rem;
}

.nav-bottom-links .nav-version-link {
  flex: 1;
  min-width: 0;
}

.nav-version-link {
  display: block;
  background: var(--surface);
  padding: 1rem;
  border-radius: 5px;
  text-decoration: none;
  color: var(--discret);
  font-size: 0.95rem;
  padding: 1rem !important;
}

.nav-version-link small {
  display: block;
  font-size: 0.75rem;
  color: var(--discret);
  margin-bottom: 0.25rem;
}

.nav-version-link:hover {
  background: var(--surface);
  color: var(--encre);
}

/* Hero Section */
.hero:not(.bloc) {
  background: var(--surface);
  color: var(--encre);
  padding: 6.5rem 2rem 2.25rem;
  text-align: left;
  border-bottom: 1px solid var(--filet);
}

.chapter-number {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-family: var(--font-sans);
  color: var(--discret);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 1rem;
}

/* Le separateur appartient a l'element qui suit : une meta a un seul
   element n'herite pas d'une barre orpheline. */
.chapter-number span + span::before {
  content: "/";
  margin-right: 0.6rem;
  opacity: 0.45;
}

.chapter-number .card-type {
  color: var(--encre);
}

.hero:not(.bloc) h1 {
  font-size: 2.15rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 0;
  font-weight: bold;
  text-wrap: balance;
}

.hero:not(.bloc) p {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texte);
  margin: 0.9rem 0 0;
  max-width: 34em;
}

/* La signature d'une entree ecrite par quelqu'un d'autre. */
.hero:not(.bloc) p.chapter-author {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.9rem;
}

.hero:not(.bloc) p.chapter-author a {
  color: inherit;
}

/* Ouvertures de section : le dessin vit dans le bandeau, a cote du titre. */
.hero-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.hero-text {
  flex: 1;
  min-width: 0;
}

.hero-art {
  flex: none;
  width: 176px;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Le bouton plein des pages du livre. Meme dessin que celui de l'accueil,
   mais l'accueil a sa propre feuille : les deux ne partagent pas de regle. */
.content a.cta-button {
  background: var(--encre);
  box-shadow: none;
  color: var(--papier);
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  margin-top: 0.4rem;
  padding: 0.72rem 1.15rem;
  text-decoration: none;
}

.content a.cta-button:hover {
  background: var(--encre);
  box-shadow: none;
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.prev-chapter {
  margin-bottom: 1rem;
}

.prev-chapter a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9rem;
}

.prev-chapter a:hover {
  text-decoration: underline;
}

/* Content */
.content {
  background: white;
  padding: 2rem 1rem;
  min-height: 60vh;
  font-size: 1.1875rem;
}

.container {
  max-width: var(--colonne-livre);
  margin: 0 auto;
}

.content h1 {
  color: var(--encre);
  margin-bottom: 1rem;
  font-size: 1.8rem;
  scroll-margin-top: 60px;
}

.content h2 {
  color: var(--encre);
  margin: 2rem 0 1rem;
  font-size: 1.4rem;
}

.content h3 {
  color: var(--encre);
  margin: 1.5rem 0 0.5rem;
  font-size: 1.2rem;
}

.content p {
  margin-bottom: 1.35em;
  text-wrap: pretty;
}

.content ul,
.content ol {
  margin-bottom: 1.35em;
  padding-left: 2rem;
}

.content hr {
  border: 0;
  border-top: 1px solid var(--filet);
  margin: 2.5rem 0;
}

.content li {
  margin-bottom: 0.5rem;
}

.content blockquote {
  background: var(--surface);
  border-left: 4px solid var(--encre);
  padding: 1rem;
  margin: 1.5rem 0;
  font-style: italic;
  font-size: 90%;
  /* Le fond s'arrete a la couverture flottante de l'accueil au lieu de passer
     derriere : une boite qui ouvre son propre contexte n'empiete pas sur un float. */
  display: flow-root;
}

.content blockquote p {
  margin-bottom: 0;
}

.content code {
  background: var(--surface);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 0.9rem;
}

.content pre {
  background: var(--surface);
  padding: 1rem;
  border-radius: 5px;
  overflow-x: auto;
  margin: 1rem 0;
}

.content pre code {
  background: none;
  padding: 0;
}

.content a {
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background 0.15s ease;
}

/* Hover fills the mark in, like a highlighter passed over the line */
.content a:hover {
  color: var(--encre);
  background: var(--signal);
  box-shadow: 0 0 0 2px var(--signal);
  text-decoration-color: transparent;
}

sup a {
  text-decoration: none;
  padding: 0 0.2rem;
}

/* The back-reference is navigation, not content: no highlighter on it */
.content .reversefootnote {
  text-decoration: none;
  color: var(--discret);
  padding: 0 0.2rem;
}

.content .reversefootnote:hover {
  background: none;
  box-shadow: none;
  color: var(--encre);
}

.content .callout {
  padding: 20px;
  margin: 20px 0;
  border: 1px solid var(--filet);
  border-left-width: 5px;
  border-radius: 3px;
  font-size: 95%;
  opacity: 0.9;
}

.content .callout-hint {
  border-left-color: var(--parcours-commencer);
}

.content .callout-example {
  border-left-color: var(--bleu);
}

.content .callout-warning {
  border-left-color: var(--signal);
}

.reading-time {
  opacity: 0.6;
}

.comments {
 padding: 1rem;
}

.chapters-list {
  list-style: none;
  padding: 0;
}

.chapters-list li {
  margin-bottom: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--filet);
  border-radius: 8px;
  transition: box-shadow 0.2s ease;
}

.chapters-list li:hover {
  box-shadow: var(--ombre-menu);
}

.chapters-list a {
  color: var(--encre);
  text-decoration: none;
  font-weight: bold;
  font-size: 1.2rem;
}

.chapters-list a:hover {
  color: var(--bleu);
}

.chapter-description {
  color: var(--discret);
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* La couverture, en page d'accueil. Elle flotte pour ne pas repousser
   le texte vers le bas, et se recentre quand la colonne devient etroite. */
.book-cover {
  float: right;
  width: 200px;
  height: auto;
  margin: 0.4rem 0 1.25rem 1.75rem;
  box-shadow: var(--ombre-menu);
}

@media (max-width: 600px) {
  .book-cover {
    float: none;
    display: block;
    width: 170px;
    margin: 0 auto 1.75rem;
  }
}

/* Content Footer */
.content-footer {
  background: var(--surface);
  border-top: 1px solid var(--filet);
  color: var(--texte);
  padding: 2rem;
  text-align: right;
}

.next-chapter {
  font-family: var(--font-sans);
  color: var(--encre);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.next-chapter small {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
  margin-bottom: 0.2rem;
}

.next-chapter:hover {
  opacity: 0.8;
}

.chapter-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.prev-link,
.next-link {
  background: var(--encre);
  color: white;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.prev-link:hover,
.next-link:hover {
  background: var(--encre);
}

.prev-link.disabled,
.next-link.disabled {
  background: var(--filet);
  cursor: not-allowed;
  pointer-events: none;
}

/* Footer */
.footer {
  background: var(--surface);
  color: var(--encre);
  opacity: 0.6;
  padding: 1rem 2rem 2rem;
  text-align: left;
}

.footer h3 {
  color: var(--encre);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.footer img {
  float: left;
  margin-right: 1rem;
  width: 100%;
  max-width: 64px;
  height: auto;
}

.footer-nav {
  list-style: none;
  display: flex;
  justify-content: left;
  gap: 2rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--encre);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-nav a:hover {
  color: var(--bleu);
}

.copyright {
  font-size: 0.8rem;
  margin-top: 1rem;
  text-align: center;
}

.copyright img {
  max-width: 1em;
  max-height: 1em;
  margin-left: 0.2em;
  float: none;
}

.copyright a {
  color: var(--encre);
}

/* Overlay for mobile menu */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Better spacing for section headers and mobile lists */
.content p strong:only-child {
  display: inline-block;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------
   Le squelette d'une entree
   Le reflexe / Le reflexe builder / Pourquoi / A essayer / A discuter
   reviennent dans les 68 entrees. Ce ne sont pas des titres, ce sont
   des reperes : on les saute a l'oeil pour retrouver un bloc. Ils ne
   doivent pas concurrencer le titre de l'entree.
   --------------------------------------------------------------- */

.content--entry h2,
.content--section h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 3rem 0 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
}

.content--entry h2::after,
.content--section h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filet);
}

.content--entry h2::before,
.content--section h2::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  background: var(--signal);
}

/* Les quatre formats gardent la meme grille. Le petit signe change assez pour
   annoncer le mouvement sans transformer les cartes en quatre produits. */
.content--diagnostic h2::before {
  background: transparent;
  border: 2px solid var(--signal);
  transform: rotate(45deg);
}

.content--pratique h2::before {
  border-radius: 50%;
}

.content--systeme h2::before {
  background: var(--encre);
  box-shadow: 4px 4px 0 var(--signal);
}

.content--entry h2:first-child,
.content--section h2:first-child {
  margin-top: 0;
}

/* L'exergue : la phrase a retenir de l'entree.
   Elle suit toujours immediatement son repere, ce qui la distingue en
   CSS de la fiche a remplir, sans rien changer au markdown. */
.content--entry h2 + blockquote {
  margin: 1.25rem 0 2.5rem;
  padding: 0 0 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--filet);
  border-radius: 0;
  background: none;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: 1.45rem;
  line-height: 1.45;
  font-weight: bold;
  color: var(--encre);
  text-wrap: pretty;
}

/* La fiche : les gabarits qu'on est invite a remplir. */
.content--entry blockquote {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--signal);
  padding: 1.15rem 1.3rem;
  margin: 1.6rem 0 1.9rem;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--texte);
}

/* Le sommaire d'une ouverture de section. */
.content--section .container > p:first-of-type {
  font-size: 1.34rem;
  line-height: 1.55;
  color: var(--encre);
}

.content--section h2 + ul {
  list-style: none;
  padding-left: 0;
}

.content--section h2 + ul li {
  margin-bottom: 0;
  border-bottom: 1px solid var(--filet);
}

.content--section h2 + ul li a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  text-decoration: none;
}

.content--section h2 + ul li a:hover {
  background: var(--surface);
  box-shadow: none;
  color: var(--bleu);
}

/* Responsive */
@media (min-width: 768px) {
  /* Des qu'il y a de la marge, le carre signal y passe. */
  .content--entry h2::before,
  .content--section h2::before {
    position: absolute;
    left: -2rem;
  }

  .offcanvas {
    width: 60%;
  }

  .chapter-navigation {
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .content {
    padding: 3rem 2rem;
  }

  .hero {
    padding: 6.5rem 2rem 2.5rem;
  }
}

@media (max-width: 767px) {
  .chapter-navigation {
    flex-direction: column;
  }

  .hero {
    padding: 6rem 1rem 1.75rem;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  /* Le dessin reste a droite du titre, meme sur telephone. Il se reduit avec
     la largeur plutot que de repasser sous le texte. */
  .hero-inner {
    gap: 1.25rem;
  }

  .hero-art {
    width: clamp(80px, 26vw, 120px);
  }

  .content li {
    margin-bottom: 0.75rem;
  }
}

/* Anchor targets clear the fixed header */
.content [id] {
  scroll-margin-top: 80px;
}

/* Footnotes */
.content .footnotes {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet);
  font-size: 0.9rem;
  opacity: 0.85;
}

.content .footnotes ol {
  padding-left: 1.5rem;
}

.content .footnotes p {
  margin-bottom: 0.75rem;
  overflow-wrap: anywhere;
}

.content .footnotes li {
  margin-bottom: 1rem;
}

/* Sorties du fil de lecture, les notes forment leur propre bloc sous le pied de chapitre */
.content--notes {
  min-height: 0;
}

.content--notes .footnotes {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.content--notes .footnotes ol {
  margin-bottom: 0;
}

.content--notes .footnotes li:last-child,
.content--notes .footnotes li:last-child p:last-child {
  margin-bottom: 0;
}

/* Partager un passage.
   Une barre minuscule, au-dessus de la selection, et rien d'autre. Elle
   emprunte la bordure jaune du menu de telechargement : c'est le meme objet
   flottant, il n'y a pas de raison qu'il ait deux formes.
   z-index sous le header, qui est fixe et reste devant. */
.partage {
  position: absolute;
  z-index: 999;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-top: 1px solid var(--filet);
  box-shadow: var(--ombre-menu);
  font-family: var(--font-sans);
}

.partage[hidden] {
  display: none;
}

.partage-barre[hidden],
.partage-canaux[hidden] {
  display: none;
}

.partage-canaux {
  display: flex;
}

.partage button,
.partage-canaux a {
  display: block;
  padding: 0.55rem 0.95rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.partage-canaux a + a,
.partage-canaux a + button {
  border-left: 1px solid var(--filet);
}

.partage button:hover,
.partage-canaux a:hover {
  background: var(--surface);
}

.partage-bouton {
  font-weight: 500;
}

/* L'icone de partage du fil d'ariane. Elle pousse a droite de la ligne et
   emprunte la teinte de la meta qu'elle termine.
   Le glyphe est celui que tout le monde reconnait, trois noeuds relies,
   au trait et au poids du bouton de telechargement. */
/* La paire d'actions, poussee a droite de la ligne de reperes. La marge
   automatique vit ici et pas sur les boutons : deux marges automatiques
   dans un flex se partagent l'espace libre au lieu de coller les icones. */
.chapter-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.partage-page {
  display: flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--discret);
  opacity: 0.55;
  cursor: pointer;
}

.partage-page:hover,
.partage-page[aria-expanded="true"] {
  opacity: 1;
}

/* Sur telephone, la rangee de canaux depasserait l'ecran. Elle se replie. */
@media (max-width: 480px) {
  .partage-canaux {
    flex-direction: column;
  }

  .partage-canaux a + a,
  .partage-canaux a + button {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }
}

/* Garder une entree. Le meme bouton que le partage, a sa gauche. Garde, le
   signet se remplit du jaune signal, comme le carre des titres de bloc. */
.garder[aria-pressed="true"] {
  opacity: 1;
}

.garder[aria-pressed="true"] svg {
  fill: var(--signal);
}

/* Ce que le livre a retenu, sur l'accueil. Une bande plus calme que le pied
   de page : elle s'adresse a celui qui revient, pas a celui qui arrive. */
.reprise {
  background: var(--surface);
  padding: 2rem;
  font-family: var(--font-sans);
}

.reprise[hidden],
.reprise-lien[hidden],
.reprise-gardees[hidden] {
  display: none;
}

.reprise small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
  margin-bottom: 0.4rem;
}

.reprise-lien {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
}

.reprise-gardees {
  margin-top: 1.7rem;
}

.reprise-gardees ul {
  list-style: none;
}

.reprise-gardees li + li {
  margin-top: 0.45rem;
}

.reprise-gardees a {
  font-size: 0.98rem;
  color: var(--encre);
  text-decoration: none;
}

.reprise a:hover {
  color: var(--bleu);
}

/* Le filtre de l'index par symptome. Le champ est ajoute au chargement :
   sans JavaScript l'index se lit en entier, ce qui est son etat normal. */
.filtre-symptomes {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin: 0 0 2rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 0;
  -webkit-appearance: none;
}

.filtre-symptomes:focus {
  outline: 0;
  border-color: var(--bleu);
}

.filtre-vide {
  font-family: var(--font-sans);
  color: var(--discret);
}

/* Rien ici ne fixe display aujourd'hui, donc [hidden] du navigateur suffit.
   Ces trois lignes sont la pour qu'un changement de CSS plus tard ne casse
   pas le filtre sans que personne le voie. */
.content h2[hidden],
.content ul[hidden],
.content li[hidden],
.filtre-vide[hidden] {
  display: none;
}

/* La note d'une entree. Une bande calme entre le texte et l'entree suivante :
   elle se voit quand on a fini de lire, et jamais pendant. */
.note {
  background: var(--surface);
  padding: 2rem;
  font-family: var(--font-sans);
}

.note[hidden] {
  display: none;
}

.note-question {
  margin: 0 0 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
}

.note-valeurs,
.note-raisons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.note button {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 1.1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  cursor: pointer;
}

.note button:hover {
  background: var(--surface);
}

.note button[aria-pressed="true"] {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

.note-suite {
  margin-top: 1.8rem;
}

.note-suite[hidden],
.note-merci[hidden] {
  display: none;
}

.note-suite .note-question {
  margin-top: 0;
}

.note-libre {
  display: block;
  margin: 1.3rem 0 0.9rem;
  font-size: 0.88rem;
  color: var(--discret);
}

.note-libre textarea {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 0;
  -webkit-appearance: none;
  resize: vertical;
}

.note-libre textarea:focus {
  outline: 0;
  border-color: var(--bleu);
}

.note-envoyer {
  background: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

.note-merci {
  margin: 1.2rem 0 0;
  font-size: 0.92rem;
  color: var(--discret);
}

/* Les discussions. Sur fond papier, plus clair que la note juste au-dessus :
   la note est une reaction, ici on parle. */
.discussion {
  background: var(--surface);
  padding: 2.5rem 2rem;
  font-family: var(--font-sans);
  border-top: 1px solid var(--filet);
}

.discussion-titre {
  margin: 0 0 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--discret);
}

.discussion-ouvrir {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 1.1rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  cursor: pointer;
}

.discussion-ouvrir:hover {
  background: var(--surface);
}

.discussion-ouvrir[hidden],
.discussion-fil[hidden],
.discussion-boite[hidden],
.discussion-passage[hidden] {
  display: none;
}

/* Un avis. La bordure a gauche tient le fil vertical de la conversation. */
.avis {
  background: var(--papier);
  border: 1px solid var(--filet);
  border-left: 3px solid var(--filet);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}

/* Une reponse de l'auteur porte la marque jaune du livre. Elle se distingue
   sans se hausser : c'est la meme conversation. */
.avis--auteur {
  border-left-color: var(--signal);
}

.avis--reponse {
  margin: 1rem 0 0 1.2rem;
  background: var(--surface);
}

.avis-qui {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--encre);
}

.avis-qui a {
  color: var(--encre);
}

.avis-qui small {
  font-size: 0.76rem;
  font-weight: normal;
  color: var(--discret);
}

.avis-texte p {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  line-height: 1.65;
}

.avis-texte p:last-child {
  margin-bottom: 0;
}

/* Le passage cite, quand l'avis porte sur une phrase et pas sur l'entree. */
.avis-passage,
.discussion-passage {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.9rem;
  background: var(--surface);
  border-left: 3px solid var(--signal);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.55;
}

.avis-repondre {
  margin-top: 0.6rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--discret);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

.discussion-boite {
  margin-top: 1.4rem;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-top: 1px solid var(--filet);
  padding: 1.4rem;
}

.discussion-filtre {
  margin: 0 0 1.2rem;
  font-size: 0.88rem;
  color: var(--discret);
}

.discussion-form label,
.discussion-form legend {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--encre);
}

.discussion-form fieldset {
  margin-top: 1.1rem;
  padding: 0;
  border: 0;
}

.discussion-form legend {
  font-weight: normal;
  color: var(--discret);
}

.discussion-form label.discussion-radio {
  display: inline-block;
  margin: 0 1.2rem 0.5rem 0;
  font-weight: normal;
}

.discussion-form input[type="text"],
.discussion-form input[type="url"],
.discussion-form select,
.discussion-form textarea {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.93rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 0;
  -webkit-appearance: none;
}

.discussion-form textarea {
  line-height: 1.6;
  resize: vertical;
}

.discussion-form input:focus,
.discussion-form select:focus,
.discussion-form textarea:focus {
  outline: 0;
  border-color: var(--bleu);
}

/* Les trois champs d'identite tiennent sur une ligne des qu'il y a la place :
   ce sont des details, ils ne doivent pas peser autant que le texte. */
.discussion-qui {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.1rem;
}

@media (min-width: 620px) {
  .discussion-qui {
    grid-template-columns: repeat(3, 1fr);
  }
}

.discussion-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.discussion-actions button {
  font-family: inherit;
  font-size: 0.93rem;
  font-weight: 500;
  padding: 0.6rem 1.3rem;
  color: var(--papier);
  background: var(--encre);
  border: 1px solid var(--encre);
  cursor: pointer;
}

.discussion-actions button:hover {
  background: var(--bleu);
  border-color: var(--bleu);
}

.discussion-actions button:disabled {
  opacity: 0.45;
  cursor: default;
}

.discussion-etat,
.discussion-merci {
  font-size: 0.9rem;
  color: var(--discret);
}

/* La porte de sortie. Ce qui doit changer dans le texte n'a rien a faire
   dans une discussion, et le livre separe les deux exprès. */
.discussion-ailleurs {
  margin: 1.8rem 0 0;
  font-size: 0.88rem;
  color: var(--discret);
}

.discussion-ailleurs a {
  color: var(--discret);
}

/* Le contact, mail ou WhatsApp. L'indicatif ne se montre qu'avec WhatsApp.
   Sans JavaScript, l'attribut data-canal n'est jamais pose et les deux
   champs restent visibles : c'est plus laid et ca marche, ce qui est le bon
   ordre de priorite. */
.contact-champs {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

@media (min-width: 560px) {
  .contact-champs {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    align-items: end;
  }
}

.contact-champs[data-canal="mail"] .contact-indicatif {
  display: none;
}

.contact-champs[data-canal="mail"] {
  grid-template-columns: 1fr;
}

.contact-indicatif {
  font-size: 0.82rem;
  color: var(--discret);
}

/* L'habillage natif d'un select impose sa propre hauteur et ses coins
   arrondis, quel que soit le remplissage demande. On le retire pour que le
   champ tombe a la meme hauteur que le numero a cote, et on redessine la
   fleche, qui part avec. */
.contact-indicatif select {
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.5;
  padding-right: 2.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%235a6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Le libelle de l'indicatif est au-dessus, le numero n'en a pas. Sans cette
   compensation les deux champs ne tombent pas sur la meme ligne. */
.contact-champs > input {
  align-self: end;
}

/* ==========================================================================
   Pastille de brouillon
   Echafaudage, pas un element de design : le rouge est volontairement hors
   palette pour qu'elle ne se fonde pas dans le livre. Tout tient dans ce bloc,
   plus _includes/pastille-brouillon.html et la ligne draft_banner du
   _config.yml. Les trois se retirent ensemble le jour de la publication.
   ========================================================================== */

.pastille-brouillon {
  position: fixed;
  bottom: 0.6rem;
  left: 0.6rem;
  /* Au-dessus de l'en-tete, qui est fixe et monte a 1000. */
  z-index: 1100;
  /* Ne doit jamais intercepter un clic destine a ce qu'elle recouvre. */
  pointer-events: none;
}

.pastille-brouillon span {
  display: block;
  padding: 0.3rem 0.7rem;
  border-radius: 2px;
  background: var(--signal);
  color: var(--papier);
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Le menu du site reste court ; le sommaire du livre garde sa hiérarchie. */
.nav-menu--site > li { margin-bottom: 0.6rem; }
.nav-menu--site .nav-site-group { margin-top: 1.25rem; }
.nav-menu--site .nav-submenu { padding-left: 1rem; }
.nav-menu--site a[aria-current="page"] {
  color: var(--encre);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------------
   La bande d'entree des pages racine

   La meme forme partout : surtitre, titre, accroche, une colonne de meta
   a droite, puis un rail qui reprend les titres de la page. Le livre garde
   son bandeau `.hero` : rien ici ne le touche.
   ------------------------------------------------------------------ */

.bande {
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
  padding: 6.5rem 0 2.25rem;
}

/* La bande se pose exactement sur la colonne de lecture : meme largeur,
   meme marge. Les pages en layout `page` lisent plus etroit, d'ou le
   modificateur plus bas. */
.bande-corps {
  max-width: var(--colonne-prose);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.bande-texte {
  flex-grow: 1;
  min-width: 0;
}

.bande-surtitre {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discret);
  margin-bottom: 1rem;
}

.bande-surtitre a {
  color: inherit;
  text-decoration: none;
}

.bande-surtitre a:hover {
  text-decoration: underline;
}

.bande-titre {
  color: var(--encre);
  font-size: 2.15rem;
  font-weight: bold;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.bande-accroche {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--texte);
  margin: 0.9rem 0 0;
  max-width: 34em;
}

/* Le meme bouton que sur la page d'accueil : le noir plein pour l'action
   de la page, le contour pour ce qui propose sans insister. */
.bande-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.6rem;
}

/* L'index par situation cherche dans la bande, pas sous le premier groupe. */
.bande-filtre {
  margin-top: 1.6rem;
}

.bande-filtre .filtre-symptomes {
  margin-bottom: 0;
  min-height: 44px;
  /* Le filet clair du corps de page disparait sur la bande : sur le jaune,
     le champ se tient au trait d'encre, comme les boutons a cote. */
  border-color: var(--encre);
}

.bande-cote {
  flex: 0 0 10rem;
  border-left: 1px solid var(--filet);
  padding-left: 1.5rem;
  margin-top: 0.35rem;
}

/* La couverture se tient sous la hauteur du titre et de ses boutons :
   plus large, elle ouvre un trou de jaune a gauche. */
.bande-couverture {
  display: block;
  width: 8rem;
  height: auto;
  margin-bottom: 1.1rem;
  border: 1px solid var(--filet);
}

.bande-meta {
  margin: 0;
  font-family: var(--font-sans);
}

/* Sous une couverture, les chiffres tiennent sur une ligne : la liste de
   definitions allongerait la colonne bien au-dela du titre. */
.bande-legende {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--discret);
}

.bande-meta dt {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--discret);
}

.bande-meta dd {
  margin: 0.2rem 0 1.15rem;
  font-size: 0.95rem;
  color: var(--encre);
}

.bande-meta dd:last-child {
  margin-bottom: 0;
}

/* Le rail : les titres de la page en tete, comme l'index d'un livre. */
.rail {
  background: var(--surface);
  border-bottom: 1px solid var(--filet);
}

.rail-corps {
  max-width: var(--colonne-prose);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
}

/* Le livre et la page introuvable lisent dans une colonne plus etroite. */
.bande--etroite .bande-corps,
.bande--etroite + .rail .rail-corps {
  max-width: 42.5rem;
}

/* La page d'accueil garde sa propre ouverture, plus large et sans meta :
   son rail suit la colonne de cette bande-la. */
.rail--accueil .rail-corps {
  max-width: 44rem;
}

/* Pas de filet entre les items : le rail passe a la ligne des qu'il y a
   plus de quatre titres, et un filet vertical en bout de ligne pend dans
   le vide. Le numero ambre marque le debut de chaque entree. */
.rail-item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.85rem 0;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--encre);
  text-decoration: none;
}

.rail-item:hover span:last-child {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rail-num,
.rail-fleche {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--discret);
}

/* Certaines pages ouvrent sur un avertissement : un cas construit annonce
   qu'il l'est, la licence rappelle que Creative Commons n'est pas un cabinet
   d'avocats. La phrase reste ou l'auteur l'a ecrite ; seule sa forme dit ce
   qu'elle est. */
.avertissement .landing-wrap > p:first-child,
.avertissement .container > p:first-child {
  background: var(--surface);
  border-left: 3px solid var(--signal);
  padding: 0.9rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .bande {
    padding: 5.5rem 0 1.75rem;
  }

  .bande-corps {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  .bande-titre {
    font-size: 1.65rem;
  }

  /* Deux boutons cote a cote ne tiennent pas dans 390 pixels : ils
     s'empilent, chacun sur toute la largeur. */
  .bande-actions {
    flex-direction: column;
  }

  .bande-actions .bouton {
    justify-content: center;
  }

  /* Sur un telephone, la meta tient sur une ligne sous l'accroche. */
  .bande-cote {
    flex: 0 0 auto;
    border-left: 0;
    border-top: 1px solid var(--filet);
    padding: 1rem 0 0;
    margin-top: 0;
  }

  .bande-couverture {
    width: 7rem;
  }

  .bande-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.4rem;
  }

  .bande-meta dd {
    margin: 0;
  }

  /* Un libelle colle a son chiffre ; l'ecart se met entre les paires. */
  .bande-meta dt ~ dt {
    margin-left: 0.85rem;
  }

  .rail-corps {
    column-gap: 1.5rem;
  }
}

/* La colonne de prose du site.
   ----------------------------------------------------------------------
   Les pages de ressource : le gabarit `page`, la bande d'entree, le rail,
   puis cette colonne. Elle est alignee sur la bande et le rail, a 48rem,
   pour que le bord gauche du texte tombe sous le bord gauche du titre. */

.content--prose .container {
  max-width: var(--colonne-prose);
}

/* `.content` donne 2rem 1rem : en ne redefinissant que le vertical on
   supprimait la gouttiere laterale, et le texte touchait le bord sur
   telephone. Les quatre valeurs sont donc ecrites. */
.content--prose {
  padding: 3rem var(--gouttiere-mobile) 4rem;
}

@media (min-width: 768px) {
  .content--prose { padding-inline: var(--espace-8); }
}

/* Un tableau large defile dans son coin plutot que de pousser la page. */
.content--prose table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* L'en-tete est fixe : une ancre doit s'arreter en dessous. */
.content--prose h2,
.content--prose h3 {
  scroll-margin-top: 6rem;
}

/* La colonne de lecture du livre.
   ----------------------------------------------------------------------
   Le site lit en Archivo, le livre en Merriweather. C'est la seule chose
   qui separe les deux objets sans qu'on ait besoin de l'expliquer.

   Le gabarit `chapter` pose `content--livre` sur ses deux blocs de prose,
   le corps de la carte et ses notes. Une page de ressource n'a que
   `content` : elle reste en sans, et descend a 17px, la taille du site.
   Le livre garde ses 19px.

   Jetons : var(--font-serif), var(--font-sans). Voir tokens.css. */

.content--livre {
  font-family: var(--font-serif);
  line-height: 1.75;
}

/* Le titre d'une carte tenait sa serif de `body`. Depuis l'inversion il faut
   la lui redonner : la bande de titre du gabarit `chapter` est en dehors de
   la colonne de lecture. Le reste de cette bande — le fil d'ariane, la
   duree, l'auteur — est deja en sans et le reste. */
.hero:not(.bloc) h1 {
  font-family: var(--font-serif);
}

.content:not(.content--livre) {
  font-size: 1.0625rem;
}

/* La couverture dans le hero de la page du livre. Elle a sa propre taille :
   c'est un objet, pas une illustration de bande. */
.hero-couverture {
  border: 1px solid var(--filet);
  justify-self: center;
  max-width: 17rem;
}

/* Une scene dans la bande d'entree. Elle n'a pas la taille d'une couverture :
   c'est un dessin large, au meme trait que les reperes du livre. */
.bande-cote--scene {
  border-left: 0;
  padding-left: 0;
}

.bande-scene {
  display: block;
  height: auto;
  max-width: 100%;
  width: 20rem;
}

@media (max-width: 720px) {
  .bande-scene { margin-inline: auto; width: 15rem; }
}


/* Les composants dans une colonne de prose.
   ----------------------------------------------------------------------
   `.content a` souligne tous les liens au marqueur, ce qui est juste dans
   un paragraphe et faux sur une carte : la carte entiere est un lien, et
   tout son texte se retrouverait souligne. */

.content .carte-parcours,
.content .carte-livre,
.content .carte-parcours:hover,
.content .carte-livre:hover {
  background: var(--papier);
  text-decoration: none;
}

.content .grille { margin: var(--espace-8) 0; }

/* Aucune image ne fait defiler la page horizontalement, a aucune largeur. */
img {
  height: auto;
  max-width: 100%;
}