:root {
      --mousse: #5a7d6e;
      --mousse-sombre: #32433a;
      --grege: #ded8cd;
      --grege-pale: #f3efe8;
      --encre: #2f2823;
      --papier: #fbf9f5;
    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
      font-size: 1.02rem;
      line-height: 1.7;
      color: var(--encre);
      background: var(--papier);
    }

    img { display: block; max-width: 100%; }

    a { color: var(--mousse-sombre); }

    h1, h2, .estampille, .pave strong, .pave span {
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
    }

    /* Bandeau d'en-tete */
    .lisiere {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.9rem clamp(1rem, 4vw, 3rem);
      background: var(--papier);
      border-bottom: 1px solid var(--grege);
    }

    .lisiere img { width: 34px; height: 34px; }

    .estampille {
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--mousse-sombre);
    }

    .ancrages {
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 1.1rem;
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
      font-size: 0.82rem;
      letter-spacing: 0.03em;
    }

    .ancrages a {
      color: var(--encre);
      text-decoration: none;
      padding-bottom: 2px;
      border-bottom: 1px solid transparent;
    }

    .ancrages a:hover,
    .ancrages a[aria-current="true"] { border-bottom-color: var(--mousse); }

    /* Confluent : bandeau court, titre a gauche */
    .confluent {
      background-color: var(--mousse-sombre);
      background-image:
        linear-gradient(100deg, rgba(31, 38, 33, 0.92) 0%, rgba(31, 38, 33, 0.78) 45%, rgba(45, 60, 52, 0.42) 100%),
        url("../img/riviere.jpg");
      background-size: cover;
      background-position: center 62%;
      color: #f6f4ef;
      padding: clamp(2.4rem, 7vw, 4.2rem) clamp(1rem, 4vw, 3rem);
    }

    .confluent p {
      margin: 0 0 0.7rem;
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #cfd9d1;
    }

    .confluent h1 {
      margin: 0;
      max-width: 22ch;
      font-size: clamp(1.65rem, 4.4vw, 3rem);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: -0.01em;
    }

    /* Corps : damier de paves inegaux */
    .carnet {
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1rem, 4vw, 3rem) 1rem;
    }

    .damier {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 0.9rem;
    }

    .pave {
      border-radius: 18px;
      padding: clamp(1.1rem, 3vw, 1.9rem);
    }

    .pave--texte {
      grid-column: span 4;
      background: #fff;
      border: 1px solid var(--grege);
    }

    .pave--texte p { margin: 0; }

    .pave--vue {
      grid-column: span 2;
      padding: 0;
      overflow: hidden;
      background: var(--grege-pale);
      display: flex;
      flex-direction: column;
    }

    .pave--vue img {
      width: 100%;
      height: 100%;
      flex: 1;
      object-fit: cover;
      min-height: 190px;
    }

    .pave--vue figcaption {
      padding: 0.7rem 1rem 0.9rem;
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
      font-size: 0.76rem;
      line-height: 1.4;
      color: #5d544c;
    }

    .pave--donnee {
      grid-column: span 2;
      background: var(--grege-pale);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .pave--donnee strong {
      display: block;
      font-size: clamp(1.3rem, 3.4vw, 1.8rem);
      font-weight: 700;
      line-height: 1.1;
      color: var(--mousse-sombre);
    }

    .pave--donnee span {
      font-size: 0.82rem;
      line-height: 1.45;
      letter-spacing: 0.02em;
      color: #5d544c;
    }

    @media (max-width: 860px) {
      .pave--texte, .pave--vue { grid-column: span 6; }
      .pave--vue img { min-height: 220px; max-height: 300px; }
    }

    @media (max-width: 560px) {
      .pave--donnee { grid-column: span 6; }
    }

    /* Sequences de lecture */
    .sequence {
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 3rem);
    }

    .sequence h2 {
      margin: 0 0 0.9rem;
      font-size: clamp(1.25rem, 2.9vw, 1.65rem);
      font-weight: 700;
      line-height: 1.25;
      color: var(--mousse-sombre);
    }

    .sequence p {
      margin: 0 0 1rem;
      max-width: 66ch;
    }

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

    .sequence--duo {
      display: grid;
      grid-template-columns: 1.45fr 1fr;
      gap: clamp(1.2rem, 3vw, 2.4rem);
      align-items: start;
    }

    .sequence__vue {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: 18px;
    }

    @media (max-width: 760px) {
      .sequence--duo { grid-template-columns: 1fr; }
      .sequence__vue { aspect-ratio: 16 / 10; }
    }

    .sequence--duo-inverse { grid-template-columns: 1fr 1.45fr; }

    @media (max-width: 760px) {
      .sequence--duo-inverse { grid-template-columns: 1fr; }
    }

    /* Galerie du festival : grille de vignettes, ouverture en grand via dialog */
    .galerie {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
      gap: 0.6rem;
      margin-top: 1.4rem;
    }

    .galerie__vignette {
      display: block;
      width: 100%;
      aspect-ratio: 1 / 1;
      padding: 0;
      margin: 0;
      border: 0;
      border-radius: 14px;
      overflow: hidden;
      background: var(--grege);
      cursor: zoom-in;
    }

    .galerie__vignette img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .galerie__vignette:focus-visible {
      outline: 2px solid var(--mousse);
      outline-offset: 2px;
    }

    .visionneuse {
      position: relative;
      max-width: min(92vw, 960px);
      max-height: 90vh;
      padding: 0;
      border: 0;
      border-radius: 16px;
      background: var(--papier);
    }

    .visionneuse::backdrop {
      background: rgba(31, 28, 24, 0.78);
    }

    .visionneuse img {
      display: block;
      width: 100%;
      max-height: 72vh;
      object-fit: contain;
      background: var(--mousse-sombre);
    }

    .visionneuse__legende {
      margin: 0;
      padding: 0.8rem 1.2rem 1rem;
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
      font-size: 0.82rem;
      color: #5d544c;
    }

    .visionneuse__fermer {
      position: absolute;
      top: 0.6rem;
      right: 0.6rem;
      width: 2.1rem;
      height: 2.1rem;
      border: 0;
      border-radius: 999px;
      background: rgba(31, 28, 24, 0.78);
      color: #fbf9f5;
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
    }

    .sequence--teinte {
      max-width: none;
      background: var(--grege-pale);
      border-top: 1px solid var(--grege);
      border-bottom: 1px solid var(--grege);
    }

    .sequence--teinte > div {
      max-width: 1080px;
      margin: 0 auto;
    }

    .sequence--teinte h2::after {
      content: "";
      display: block;
      width: 58px;
      height: 2px;
      margin-top: 0.7rem;
      background: var(--mousse);
    }

    /* Carte */
    .sequence--carte {
      max-width: none;
      background: var(--grege-pale);
      border-top: 1px solid var(--grege);
      border-bottom: 1px solid var(--grege);
    }

    .sequence--carte > div {
      max-width: 1080px;
      margin: 0 auto;
      padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1rem, 4vw, 3rem);
    }

    .carte__cadre {
      width: 100%;
      height: 400px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid var(--grege);
    }

    @media (max-width: 760px) {
      .carte__cadre { height: 300px; }
    }

    /* Pied */
    .ourlet {
      margin-top: 2.6rem;
      padding: 1.6rem clamp(1rem, 4vw, 3rem) 2.4rem;
      border-top: 1px solid var(--grege);
      font-family: "Jost", "Avenir Next", system-ui, sans-serif;
      font-size: 0.78rem;
      letter-spacing: 0.04em;
      color: #6b6158;
    }

    .ourlet p { margin: 0; max-width: 1080px; margin-inline: auto; }

    @media (max-width: 760px) {
      .lisiere { flex-wrap: wrap; }
      .ancrages { margin-left: 0; width: 100%; }
    }

    @media (prefers-reduced-motion: no-preference) {
      html { scroll-behavior: smooth; }
    }