@font-face {
  font-family: 'Mackinac';
  src: url(/fonts/P22Mackinac-Book-webfont.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Mackinac';
  src: url(/fonts/P22Mackinac-Medium-webfont.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Mackinac';
  src: url(/petit-guide/P22Mackinac-BookItalic.otf) format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@keyframes bout {
  0% {
    mask-position: 0 0;
  }
  25% {
    mask-position: 0 33.333%;
  }
  50% {
    mask-position: 0 66.667%;
  }
  75% {
    mask-position: 0 100%;
  }
}
@keyframes trace {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
.pgl {
  /* Les pages du glossaire posées comme une page du livre : papier, serif justifié, renvois dans la marge, notes teintées de l'encre de la lettre */
  & {
    --papier: #fbfbfa;
    --encre: #12151a;
    --gris: color-mix(in srgb, var(--encre) 55%, var(--papier));
    --serif: 'Mackinac', Georgia, serif;
    --sans: 'Ordalie Sans', system-ui, sans-serif;
  }

  & {
    -webkit-font-smoothing: antialiased;
  }
  & {
    position: relative;
    padding-top: 80px;
    font-family: var(--sans);
    --grp: 620px;
  }
  /* les marges : à gauche la planche de la lettre quand le livre en a une, seule ; à droite le sommaire de la lettre */
  .planche {
    --pw: min(190px, 50vw - 310px - 128px);
    position: fixed;
    top: 50%;
    left: calc((50vw - 310px - var(--pw)) / 2);
    transform: translateY(-50%);
    width: var(--pw);
    text-align: center;
  }
  .planche img {
    width: 100%;
    display: block;
  }
  .planche.lettrine {
    --pw: min(160px, 50vw - 310px - 128px);
  }
  .planche figcaption {
    margin-top: 16px;
    font: italic 400 15px/1.4 var(--serif);
    color: var(--gris);
  }
  /* 80px au moins entre le texte et le sommaire : le trait de la ligne lue (44px) se dessine dans cet écart */
  .sommaire {
    position: fixed;
    left: calc(50% + 310px + 80px);
    top: 50%;
    transform: translateY(-50%);
    width: min(270px, 50% - 310px - 80px - 40px);
    font: 400 19px/1.5 var(--serif);
    letter-spacing: -0.02em;
  }
  .sommaire ol {
    list-style: none;
  }
  .sommaire a {
    color: color-mix(in srgb, var(--encre) 30%, var(--papier));
    transition: color 0.25s;
  }
  .sommaire a:hover,
  .sommaire a.on {
    color: var(--encre);
  }
  .sommaire a.on::before {
    content: '';
    display: inline-block;
    width: 22px;
    height: 1px;
    background: var(--acc);
    vertical-align: 0.32em;
    margin: 0 10px 0 -32px;
  }
  @media (max-width: 1279px) {
    .planche,
    .sommaire {
      display: none;
    }
  }
  a {
    color: inherit;
    text-decoration: none;
  }

  .tete {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    padding: 28px 40px;
    font-size: 13px;
  }
  .abc {
    display: flex;
    margin: -10px -6px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--gris);
  }
  .abc a:hover,
  .abc [aria-current] {
    color: var(--encre);
  }
  .abc [aria-current] {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
  }

  /* la colonne du livre, centrée ; la marge extérieure porte les renvois */
  .page {
    position: relative;
    width: min(100% - 48px, 620px);
    margin: 0 auto;
    padding: 72px 0 140px;
  }
  .fleuron {
    display: block;
    width: 150px;
    margin: 72px auto 0;
  }
  .fleuron + article {
    padding-top: 64px;
  }
  & {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.42  0 0 0 0 0.36  0 0 0 -0.06 0.05'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23t)'/%3E%3C/svg%3E");
  }
  .ouverture {
    margin-bottom: 40px;
  }
  .lettrine {
    display: block;
    width: 140px;
    height: 140px;
  }
  h1 {
    font: italic 400 26px/1.4 var(--serif);
    letter-spacing: -0.01em;
    color: var(--gris);
  }
  h1 span {
    display: block;
    margin-bottom: 6px;
    font: 500 13px/1 var(--sans);
    font-style: normal;
    letter-spacing: 0.01em;
    color: var(--acc);
  }
  article {
    position: relative;
    padding-top: 72px;
    scroll-margin-top: 24px;
  }
  h2 {
    font: 500 30px/1.15 var(--serif);
    letter-spacing: -0.02em;
  }
  h2 dfn {
    font-style: normal;
  }
  h2 i {
    font: italic 400 21px/1 var(--serif);
    letter-spacing: 0;
  }
  .corps {
    margin-top: 16px;
    font: 400 19px/1.62 var(--serif);
    letter-spacing: -0.012em;
    text-align: justify;
    hyphens: auto;
    hanging-punctuation: first;
  }
  .corps p + p {
    margin-top: 12px;
  }
  .note {
    margin: 24px 0 4px;
    padding: 18px 22px 20px;
    background: color-mix(in srgb, var(--acc) 5%, var(--papier));
    font-size: 17px;
    line-height: 1.55;
    text-align: left;
  }
  .note .lb {
    margin-bottom: 8px;
    font: 500 13px/1 var(--sans);
    letter-spacing: 0.01em;
    color: var(--acc);
  }
  .note .lb:empty {
    display: none;
  }
  .voir {
    margin-top: 18px;
    font: 400 13px/1.5 var(--sans);
  }
  .voir p {
    color: var(--gris);
  }
  .voir p,
  .voir ul,
  .voir li {
    display: inline;
  }
  .voir li + li::before {
    content: ', ';
    color: var(--gris);
  }
  .voir p::after {
    content: ' ';
  }
  .voir a {
    color: var(--gris);
  }
  .voir a:hover {
    color: var(--encre);
  }

  .suite {
    display: flex;
    justify-content: space-between;
    margin-top: 120px;
    font: 400 40px/1 var(--serif);
  }
  .suite small {
    display: block;
    margin-bottom: 8px;
    font: 400 13px/1 var(--sans);
    color: var(--gris);
  }
  .suite a[rel='next'] {
    text-align: right;
  }

  @media (max-width: 1100px) {
  }
  @media (max-width: 700px) {
    .tete {
      flex-direction: column;
      padding: 20px 22px;
      gap: 12px;
    }
    .abc {
      flex-wrap: wrap;
      margin: -6px -5px;
    }
    .abc a {
      padding: 6px 5px;
    }
    .page {
      padding-top: 40px;
    }
    .lettrine {
      width: 96px;
      height: 96px;
    }
    h1 {
      font-size: 19px;
    }
    article {
      padding-top: 56px;
    }
    h2 {
      font-size: 26px;
    }
    .corps {
      font-size: 17.5px;
      text-align: left;
    }
    .note {
      padding: 16px 18px;
      font-size: 16px;
    }
  }

  /* Le trait du guide dans l'interface : tirages du pinceau du livre (gestes.py), en masque, dans l'encre de la lettre.
   Un trait posé est fixe ; un trait qui attend la main « bout » : la page fait défiler ses quatre tirages. */

  .sommaire li {
    position: relative;
  }
  .sommaire a.on::before {
    display: none;
  }
  .sommaire a::after {
    content: '';
    position: absolute;
    left: -44px;
    top: 0.5em;
    width: 34px;
    height: 8px;
    background: var(--acc);
    mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    -webkit-mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sommaire a.on::after {
    clip-path: inset(0 0 0 0);
  }
  .sommaire a:hover::after {
    clip-path: inset(0 0 0 0);
    animation: bout 0.42s steps(1) infinite;
  }
  .sommaire a:not(.on):hover::after {
    opacity: 0.55;
  }

  /* chaque lettre se clique sur toute sa case, pas seulement sur son glyphe */
  .abc a {
    position: relative;
    padding: 10px 5.5px;
  }
  .abc a::after {
    content: '';
    position: absolute;
    left: 3.5px;
    right: 3.5px;
    bottom: 4px;
    height: 5px;
    background: var(--encre);
    mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    -webkit-mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .abc [aria-current] {
    text-decoration: none;
  }
  .abc [aria-current]::after {
    clip-path: inset(0 0 0 0);
    background: var(--acc);
  }
  .abc a:hover::after {
    clip-path: inset(0 0 0 0);
    animation: bout 0.42s steps(1) infinite;
  }

  .voir a {
    position: relative;
  }
  .voir a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    background: var(--acc);
    mask: url(/petit-guide/orn/souligne.svg) 0 0 / 100% 400% no-repeat;
    -webkit-mask: url(/petit-guide/orn/souligne.svg) 0 0 / 100% 400% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .voir a:hover {
    color: var(--encre);
  }
  .voir a:hover::after {
    clip-path: inset(0 0 0 0);
    animation: bout 0.42s steps(1) infinite 0.4s;
  }

  /* les notes : un bloc d'encre ébréché, teinté, au lieu d'un rectangle */
  .note {
    position: relative;
    background: none;
    isolation: isolate;
  }
  .note::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--acc) 7%, var(--papier));
    mask: url(/petit-guide/orn/bloc.svg) 0 0 / 100% 100% no-repeat;
    -webkit-mask: url(/petit-guide/orn/bloc.svg) 0 0 / 100% 100% no-repeat;
  }

  @media (prefers-reduced-motion: reduce) {
    .sommaire a::after,
    .abc a::after,
    .voir a::after {
      animation: none !important;
      transition: none !important;
    }
  }

  /* en arrivant sur un mot depuis le sommaire ou un renvoi, un trait le souligne une fois */
  article:target h2 dfn {
    position: relative;
  }
  article:target h2 dfn::after {
    content: '';
    position: absolute;
    left: -2px;
    right: -4px;
    bottom: -8px;
    height: 7px;
    background: var(--acc);
    mask: url(/petit-guide/orn/souligne.svg) 0 0 / 100% 400% no-repeat;
    -webkit-mask: url(/petit-guide/orn/souligne.svg) 0 0 / 100% 400% no-repeat;
    animation: trace 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.25s both;
  }
  .suite a {
    position: relative;
  }
  .suite a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 1.1em;
    height: 6px;
    background: var(--acc);
    mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    -webkit-mask: url(/petit-guide/orn/trait.svg) 0 0 / 100% 400% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .suite a[rel='prev']::after {
    left: 0;
  }
  .suite a[rel='next']::after {
    right: 0;
  }
  .suite a:hover::after {
    clip-path: inset(0 0 0 0);
    animation: bout 0.42s steps(1) infinite 0.35s;
  }

  .planche,
  .sommaire {
    transition: opacity 0.3s ease-out;
  }
  &.fin .planche,
  &.fin .sommaire {
    opacity: 0;
    pointer-events: none;
  }
}

.pgl {
  background: #fbfbfa;
  color: #12151a;
}
.pgl h1,
.pgl h2,
.pgl p,
.pgl ol,
.pgl ul,
.pgl figure {
  margin: 0;
  padding: 0;
}

.pgl {
  view-transition-name: guide-page;
}
::view-transition-group(guide-page) {
  animation-duration: 0.75s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
::view-transition-old(guide-page),
::view-transition-new(guide-page) {
  height: 100%;
  object-fit: cover;
  object-position: top;
}
/* d'une lettre à l'autre : pas de zoom, l'ancienne page s'efface vite au-dessus de la nouvelle */
.vt-lettre .pgl {
  view-transition-name: none;
}
.vt-lettre::view-transition-old(root) {
  animation: 0.14s ease-out both pgl-efface;
  mix-blend-mode: normal;
}
.vt-lettre::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
@keyframes pgl-efface {
  to {
    opacity: 0;
  }
}
/* les ancres (sommaire, renvois) glissent jusqu'au mot */
html:has(.pgl) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.pgl) {
    scroll-behavior: auto;
  }
}
.pgl .signe {
  margin-top: 96px;
  font: 400 13px/1.5 var(--sans);
  color: var(--gris);
}
.pgl .signe a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pgl .signe + .suite {
  margin-top: 32px;
}