/* Fichier produit par le build (scripts/build/styles.mjs) à partir de styles/carnet/*.css : c'est là qu'il faut modifier. */
/* — Carnet : les fils (thèmes), affichés dès qu'il y en a deux — */
.fils { display: flex; flex-direction: column; gap: 2px; max-width: 48rem; margin: 0 0 clamp(20px, 4vh, 36px); animation: fade 1s var(--ease) 0.5s both; }
.fils__list { display: flex; flex-wrap: wrap; gap: 0 20px; }
.fils button {
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 19px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent);
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color 0.3s ease;
}
.fils button:hover { color: var(--ink); }
.fils button[aria-pressed="true"] { color: var(--ink); text-decoration-color: var(--accent); }
.fils button:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
[data-fil][hidden] { display: none !important; }

/* — Carnet : la note la plus récente, en grand — */
.note-une {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 48rem;
  padding: 28px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: inherit;
  text-decoration: none;
  animation: fade 1s var(--ease) 0.55s both;
}
.note-une__meta { display: flex; justify-content: space-between; gap: 16px; }
.note-une h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  transition: color 0.3s ease;
}
.note-une p { max-width: 38rem; margin: 0; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.note-une__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--ink); }
.note-une:hover h2, .note-une:focus-visible h2 { color: var(--accent); }
.note-une:hover .go, .note-une:focus-visible .go { transform: translateX(4px); }
.note-une:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

/* — Carnet : les notes précédentes, une ligne chacune — */
.notes-list { max-width: 48rem; margin: 0; padding: 0; list-style: none; }
.notes-list li { border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.notes-list a {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 24px;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}
.notes-list h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 2.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
  transition: color 0.3s ease;
}
.notes-list a:hover h2, .notes-list a:focus-visible h2 { color: var(--accent); }
.notes-list a:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }

.note-fin__liens svg { transition: transform 0.45s var(--ease); }
.note-fin__liens a:hover svg { transform: translate(2px, -2px); }

/* — Carnet : une note — */
.note { max-width: 42rem; }
.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap; animation: fade 1s var(--ease) 0.2s both; }
.note-meta .back { font-size: 12px; }
.note-title {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-shadow: var(--relief);
  text-wrap: balance;
  /* le titre glisse sans passer par l'invisible : c'est le plus grand élément de la page,
     celui que les navigateurs chronomètrent (LCP) — il doit être peint dès la première image */
  animation: glisse 1.1s var(--ease) 0.3s both;
}
.note-fil { margin: 18px 0 0; }
/* le résumé de la note sert de chapô */
.note-chapo {
  margin: clamp(20px, 3.5vh, 32px) 0 0;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: pretty;
  animation: fade 1s var(--ease) 0.45s both;
}
.note > .intro__rule { margin: clamp(26px, 4.5vh, 40px) 0; animation: fade 1s var(--ease) 0.5s both; }
.note .prose { animation: fade 1s var(--ease) 0.55s both; }

/* La haie du haut de page avance avec la lecture */
.lecture {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  color: var(--accent);
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--lu, 0) * 100%) 0 0);
  transition: transform 0.4s var(--ease);
}
.lecture svg { display: block; width: 100%; height: 100%; }

.prose { font-size: 17.5px; line-height: 1.75; color: var(--soft); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.35em; }
.prose li::marker { color: var(--accent); }
.prose h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.prose h3 {
  margin: 2em 0 0.7em;
  font-family: var(--engraved);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 4px; }
.prose strong { font-weight: 600; color: var(--ink); }
/* une citation : en grand, sans cadre ni filet */
.prose blockquote {
  margin: 1.6em 0;
  padding: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 1.55em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.prose blockquote p { margin: 0; }
.prose blockquote em, .prose blockquote strong { font-style: inherit; font-weight: inherit; color: var(--accent); }
.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.84em;
}
/* bloc de code : le langage en étiquette, le code en dessous */
.code {
  margin: 1.6em 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.code__label {
  padding: 14px 20px 0;
  font-family: var(--engraved);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.code pre {
  margin: 0;
  padding: 12px 20px 18px;
  overflow-x: auto;
  font-size: 13px; /* ~80 caractères par ligne tiennent dans la colonne */
  line-height: 1.6;
  color: var(--ink);
}
.code pre code { padding: 0; background: none; font-size: inherit; }
.code pre:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.prose img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: var(--photo-shadow); }
.prose hr { margin: 2.4em 0; border: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }

/* schéma : tracé dans le même trait que les haies, il suit le jour, la nuit et la saison */
.schema { margin: 1.8em 0 2em; }
.schema svg { display: block; width: 100%; max-width: 30rem; height: auto; overflow: visible; color: var(--ink); }
.schema svg [stroke] { vector-effect: non-scaling-stroke; }
.schema .pt { fill: var(--accent); stroke: none; }
.schema text {
  fill: currentColor;
  stroke: none;
  font-family: var(--engraved);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.schema figcaption {
  margin-top: 14px;
  font-family: var(--engraved);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* les questions d'une note (voir assets/notes.js) : quelques réponses à bascule, et la note répond.
   Cachées sans script ; avec, un encadré entre deux filets, dans le trait des schémas. */
.jeu { margin: 2em 0 2.2em; padding: 20px 0 18px; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.jeu[hidden] { display: none; }
.jeu__titre { margin: 0 0 14px; font-family: var(--engraved); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.jeu fieldset { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 22px; margin: 0 0 6px; padding: 0; border: 0; min-width: 0; }
.jeu legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: 16px; line-height: 1.5; color: var(--ink); }
.jeu fieldset label { display: inline-flex; align-items: center; min-height: 40px; font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 19px; color: var(--muted); cursor: pointer; transition: color 0.3s ease; }
.jeu fieldset input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jeu fieldset label:hover, .jeu fieldset label:has(:checked) { color: var(--ink); }
.jeu fieldset label:has(:checked) { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.jeu fieldset label:has(:focus-visible) { outline: 1px solid var(--ink); outline-offset: 4px; }
.jeu__reponse { margin-top: 12px; min-height: 3.2em; }
.jeu__reponse p { margin: 0 0 0.6em; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.jeu__reponse p:not([hidden]) { animation: fondu 0.5s ease both; }
.jeu__reponse [data-attente] { color: var(--muted); }

/* fin de note : la suivante, la précédente, répondre, s'abonner */
.note-fin { display: flex; flex-direction: column; margin-top: clamp(48px, 8vh, 80px); border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); }
.note-voisine {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  color: inherit;
  text-decoration: none;
}
.note-voisine__titre { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.2; text-wrap: balance; transition: color 0.3s ease; }
.note-voisine:hover .note-voisine__titre, .note-voisine:focus-visible .note-voisine__titre { color: var(--accent); }
.note-voisine:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.note-fin__liens { display: flex; justify-content: space-between; gap: 24px; }
.note-fin__liens a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; text-decoration: none; }
.note-fin__liens a:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* — Téléphone — */
@media (max-width: 600px) {
  .notes-list a { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 0; }
  .notes-list h2 { grid-column: 1 / -1; grid-row: 2; }
  .prose { font-size: 16.5px; }
  .prose h2 { font-size: 27px; }
  /* le code va d'un bord à l'autre de l'écran */
  .code { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .code__label { padding-inline: var(--gutter); }
  .code pre { padding-inline: var(--gutter); font-size: 12.5px; }
}

/* — Mouvement — */
/* Au fil du défilement : les notes et les schémas arrivent quand on arrive à eux.
   Sans prise en charge du navigateur, tout est simplement visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .notes-list li, .schema, .note-voisine {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* un schéma se trace comme les haies de l'accueil */
    .schema [pathLength] {
      stroke-dasharray: 1;
      animation: draw linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 45%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lecture { display: none; }
}