@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;
}

.pg {
  & {
    overflow-x: clip;
    --nuit: #12151a;
    --carte: #1d2128;
    --jaune: #e8c52e;
    --gris: #8a8f98;
    --gris-c: #6b6f76;
    --marine: #173e78;
    --foret: #36583a;
    --rouge: #d83a32;
  }

  .pg h1,
  .pg h2,
  .pg p,
  .pg ol,
  .pg ul,
  .pg figure {
    margin: 0;
    padding: 0;
  }
  & {
    position: relative;
    display: flow-root;
    min-height: 100vh;
    font-family: 'Ordalie Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #fff;
    background: var(--nuit);
    -webkit-font-smoothing: antialiased;
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  .mk {
    font-family: 'Mackinac', serif;
    font-weight: 400;
  }
  .pg > * {
    position: relative;
    z-index: 1;
  }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
  }
  .btn.plein {
    background: #fff;
    color: var(--nuit);
  }
  .btn.plein.sombre {
    background: var(--nuit);
    color: #fff;
  }
  .btn.ligne {
    color: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  }
  .btn.ligne.sombre {
    box-shadow: inset 0 0 0 1px rgba(18, 21, 26, 0.18);
  }
  .ico {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  ::selection {
    background: var(--jaune);
    color: var(--nuit);
  }

  /* Une seule encre. Chaque temps a son écran et sa place ; la page se lit en défilant, sans bandes ni cartes. */
  .etiquette {
    font-size: 13px;
    color: var(--gris);
  }
  a.lien {
    color: #e3e5e8;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 4px;
  }
  a.lien:hover {
    text-decoration-color: #fff;
  }

  /* 1. L'arche et le titre, seuls */
  .ouverture {
    height: 100vh;
    min-height: 720px;
    display: grid;
    place-items: center;
    position: relative;
  }
  .porte {
    position: relative;
    height: min(78vh, 840px);
    aspect-ratio: 660 / 930;
    margin-top: 40px;
  }
  .porte #arche {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .porte #arche text {
    font-family: 'Mackinac', serif;
    font-weight: 500;
    fill: #fbfbfa;
  }
  .porte .fil {
    fill: none;
    stroke: rgba(242, 240, 232, 0.16);
    stroke-width: 1;
  }
  .dedans {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 34%;
    text-align: center;
  }
  h1 {
    font-size: clamp(36px, 6.6vh, 64px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 400;
  }
  h1 i {
    font-style: italic;
  }
  .sous {
    margin-top: 2.4vh;
    font-family: 'Mackinac', serif;
    font-size: clamp(16px, 2.3vh, 21px);
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #9a9ea6;
  }
  .coin {
    position: absolute;
    bottom: 32px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--gris);
  }
  .coin.g {
    left: 48px;
  }
  .coin.d {
    right: 48px;
    text-align: right;
  }

  /* 2. Le manifeste sur une feuille gravée : craie à plat, bord ébréché du pinceau, plis tracés au trait, sans ombre réaliste */
  .manifeste {
    padding: 18vh 24px 6vh;
    display: flex;
    justify-content: center;
    perspective: 2000px;
  }
  .feuille-papier {
    position: relative;
    width: min(680px, 92vw);
    padding: 104px 80px 72px;
    color: #1b1e23;
    background: #fbfbfa;
    transform: rotate(-1.4deg);
    will-change: transform;
  }
  /* les deux plis : un filet et quelques tailles, à l'encre très claire */
  .feuille-papier::before,
  .feuille-papier::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    pointer-events: none;
    background: url(/petit-guide/orn/pli.svg) 0 0 / 100% 100%;
    opacity: 0.1;
  }
  .feuille-papier::before {
    top: calc(33.3% - 3px);
  }
  .feuille-papier::after {
    top: calc(66.6% - 3px);
  }

  .feuille-papier h2 {
    font-family: 'Mackinac', serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1.14;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }
  .feuille-papier h2 i {
    font-style: italic;
  }
  .feuille-papier p {
    margin-top: 14px;
    font-family: 'Mackinac', serif;
    font-size: 17.5px;
    line-height: 1.62;
    letter-spacing: -0.01em;
    text-align: left;
    hyphens: auto;
    color: #2a2e34;
  }
  .feuille-papier h2 + p {
    margin-top: 30px;
  }
  .signature {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
  .signature a {
    font-size: 12px;
  }
  .feuille-papier .ps {
    hyphens: manual;
    text-wrap: pretty;
    margin-top: 36px;
    font-family: 'Ordalie Sans', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #4a4e55;
    text-align: left;
  }
  .signature a:hover {
    color: #1b1e23;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* surfaces du navigateur */
  & {
    scrollbar-color: #2b3038 #12151a;
  }
  :focus-visible {
    outline: 1px solid #e8c52e;
    outline-offset: 4px;
    border-radius: 2px;
  }
  /* le ciel du hero : des étoiles fines qui tournent très lentement autour d'un pôle au-dessus de l'arche */
  .ciel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  .porte {
    z-index: 1;
  }
  /* la signature : plus petite, Herr Von Muellerhoff, encre bleue ; écrite par la plume quand elle entre dans l'écran */
  .signature .sig {
    width: 230px;
    height: auto;
    margin-right: -4px;
    overflow: visible;
  }
  .signature a {
    color: #5d6168;
  }
  /* l'en-tête gaufré à sec : même papier, une lumière en haut à gauche, une ombre en bas à droite */
  .sceau {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translateX(-50%);
  }
  .sceau i {
    position: absolute;
    inset: 0;
    background: #d83a32;
    -webkit-mask: url(/petit-guide/a/icon-2026.svg) center / contain no-repeat;
    mask: url(/petit-guide/a/icon-2026.svg) center / contain no-repeat;
  }
  /* la plume, rendue en volume ; posée à côté de la feuille une fois la signature finie */

  /* 4. Le bandeau des Transfos : collé en bas, discret, jamais une section */
  .bandeau {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 6px 6px 18px;
    border-radius: 99px;
    background: #1d2128;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      0 12px 40px rgba(0, 0, 0, 0.35);
    font-size: 13px;
    color: #c9ccd1;
    white-space: nowrap;
  }
  .bandeau .sep {
    color: #4b5058;
  }
  .bandeau .rdv {
    margin-left: 6px;
    background: #e8c52e;
    color: #12151a;
    border-radius: 99px;
    padding: 6px 14px;
    font-weight: 500;
  }
  .bandeau .salon {
    color: #8a8f98;
    padding-right: 10px;
  }
  .bandeau .salon:hover {
    color: #fff;
  }

  /* 3. Le livre en volume : 105 × 148 × 6 mm ; il tourne avec le défilement et suit un peu la souris */
  .objet {
    height: 260vh;
  }
  .colle {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .scene {
    --w: min(440px, 42vh);
    --h: calc(var(--w) * 148 / 105);
    --e: calc(var(--w) * 13 / 105);
    position: relative;
    width: var(--w);
    height: var(--h);
    perspective: 1800px;
    isolation: isolate;
  }
  .livre3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
  }
  .f {
    position: absolute;
    backface-visibility: hidden;
  }
  .f img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .couv {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: 0 50% calc(var(--e) / 2);
  }
  .av {
    inset: 0;
    transform: translateZ(calc(var(--e) / 2 + 0.5px));
  }
  .garde {
    inset: 0;
    transform: rotateY(180deg) translateZ(calc(var(--e) / -2 - 0.5px));
    background: linear-gradient(90deg, transparent calc(100% - 1px), rgba(18, 21, 26, 0.12) calc(100% - 1px)), #fbfbfa;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8%;
    font:
      400 calc(var(--w) * 0.03)/1 'Ordalie Sans',
      sans-serif;
    color: #6b6e73;
  }
  .feuille3d {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform-origin: 0 50% calc(var(--e) / 2);
  }
  .feuille3d .fr {
    inset: 0;
    transform: translateZ(calc(var(--e) / 2 + var(--d)));
    background: #fff;
  }
  .feuille3d .bk {
    inset: 0;
    transform: rotateY(180deg) translateZ(calc(var(--e) / -2 - var(--d)));
    background: #fff;
  }
  .pliure {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(
      90deg,
      rgba(18, 21, 26, 0) 0%,
      rgba(18, 21, 26, 0.1) 38%,
      rgba(18, 21, 26, 0.16) 62%,
      rgba(255, 255, 255, 0.35) 84%,
      rgba(18, 21, 26, 0.06) 100%
    );
  }
  .feuille3d .bk .pliure {
    transform: scaleX(-1);
  }
  .feuille3d .bk img,
  .feuille3d .fr img {
    width: 100%;
    height: 100%;
    display: block;
  }
  .garde2 {
    background: linear-gradient(90deg, transparent calc(100% - 1px), rgba(18, 21, 26, 0.12) calc(100% - 1px)), #fbfbfa !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8%;
    font:
      400 calc(var(--w) * 0.03)/1 'Ordalie Sans',
      sans-serif;
    color: #6b6e73;
  }
  .page {
    inset: 0;
    transform: translateZ(calc(var(--e) / 2 - 0.5px));
    background: #fbfbfa;
    color: #12151a;
    padding: 13% 12% 10%;
    display: flex;
    flex-direction: column;
  }
  .page .etiq,
  .page .pied {
    font:
      400 calc(var(--w) * 0.032)/1 'Ordalie Sans',
      sans-serif;
    color: #6b6e73;
  }
  .index {
    margin: auto 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: calc(var(--w) * 0.045) 0;
    font:
      400 calc(var(--w) * 0.085)/1 'Mackinac',
      serif;
    letter-spacing: -0.02em;
    text-align: center;
  }
  .index a {
    color: #12151a;
    position: relative;
  }
  .index a:hover {
    color: #173e78;
  }
  .page .pied {
    text-align: center;
  }
  .ar {
    inset: 0;
    transform: rotateY(180deg) translateZ(calc(var(--e) / 2));
  }
  .dos {
    top: 0;
    height: 100%;
    width: var(--e);
    left: calc(50% - var(--e) / 2);
    transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  }
  .tr.d {
    top: 0;
    height: 100%;
    width: var(--e);
    left: calc(50% - var(--e) / 2);
    transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 1px));
    background:
      url(/petit-guide/orn/tranche-v.svg) 0 0 / 100% 100%,
      #e7e8e8;
  }
  .tr.h,
  .tr.b {
    left: 1px;
    width: calc(100% - 2px);
    height: var(--e);
    top: calc(50% - var(--e) / 2);
    background:
      url(/petit-guide/orn/tranche-h.svg) 0 0 / 100% 100%,
      #e7e8e8;
  }
  .tr.h {
    transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 1px));
  }
  .tr.b {
    transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 1px));
  }
  .tr.bg {
    left: calc(-100% + 1px);
    width: calc(100% - 2px);
    height: calc(var(--e) * 0.55);
    top: calc(50% - var(--e) * 0.55 / 2);
    background:
      url(/petit-guide/orn/tranche-h.svg) 0 0 / 100% 100%,
      #e1e2e2;
    transform: translateZ(calc(var(--e) * 0.2)) rotateX(-90deg) translateZ(calc(var(--h) / 2 - 1px));
    opacity: 0;
  }
  /* la reliure : les deux pages descendent un peu vers le dos */
  .page::after,
  .garde::after,
  .garde2::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    pointer-events: none;
  }
  .page::after {
    left: 0;
    background: linear-gradient(90deg, rgba(18, 21, 26, 0.09), rgba(18, 21, 26, 0));
  }
  .garde::after,
  .garde2::after {
    right: 0;
    background: linear-gradient(270deg, rgba(18, 21, 26, 0.09), rgba(18, 21, 26, 0));
  }
  /* l'épaisseur du bloc : les feuilles du dessous dépassent un peu à mesure que le livre s'ouvre (garde retournée : même ombre, côté opposé) */
  .page,
  .garde {
    box-shadow:
      calc(var(--o, 0) * 1.3px) calc(var(--o, 0) * 2.3px) 0 #f4f4f1,
      calc(var(--o, 0) * 1.9px) calc(var(--o, 0) * 3.5px) 0 rgba(18, 21, 26, 0.17),
      calc(var(--o, 0) * 2.6px) calc(var(--o, 0) * 4.6px) 0 #eeeeea,
      calc(var(--o, 0) * 3.2px) calc(var(--o, 0) * 5.8px) 0 rgba(18, 21, 26, 0.19),
      calc(var(--o, 0) * 3.9px) calc(var(--o, 0) * 6.9px) 0 #f4f4f1,
      calc(var(--o, 0) * 4.5px) calc(var(--o, 0) * 8.1px) 0 rgba(18, 21, 26, 0.22),
      calc(var(--o, 0) * 5.2px) calc(var(--o, 0) * 9.2px) 0 #eeeeea,
      calc(var(--o, 0) * 5.8px) calc(var(--o, 0) * 10.4px) 0 rgba(18, 21, 26, 0.24),
      calc(var(--o, 0) * 6.5px) calc(var(--o, 0) * 11.5px) 0 #f4f4f1,
      calc(var(--o, 0) * 7.1px) calc(var(--o, 0) * 12.7px) 0 rgba(18, 21, 26, 0.27),
      calc(var(--o, 0) * 7.8px) calc(var(--o, 0) * 13.8px) 0 #eeeeea,
      calc(var(--o, 0) * 8.4px) calc(var(--o, 0) * 15px) 0 rgba(18, 21, 26, 0.29),
      calc(var(--o, 0) * 9.1px) calc(var(--o, 0) * 16.1px) 0 #f4f4f1,
      calc(var(--o, 0) * 9.7px) calc(var(--o, 0) * 17.3px) 0 rgba(18, 21, 26, 0.32);
  }
  .ombre {
    position: absolute;
    left: 50%;
    bottom: -46px;
    width: 120%;
    height: 60px;
    transform: translateX(-50%);
    z-index: -1;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    filter: blur(6px);
  }

  @media (max-width: 800px) {
    .sceau {
      top: 26px;
      width: 24px;
      height: 24px;
    }
    .feuille-papier {
      padding: 78px 26px 40px;
      transform: rotate(-0.8deg);
    }
    .feuille-papier h2 {
      font-size: 26px;
    }
    .feuille-papier p {
      font-size: 16px;
      text-align: left;
    }
    .bandeau {
      gap: 8px;
      font-size: 12px;
    }
    .bandeau > span:first-child,
    .bandeau .sep,
    .bandeau .salon {
      display: none;
    }
    .coin {
      display: none;
    }
    .porte {
      height: auto;
      width: calc(100vw - 32px);
    }
    .dedans {
      top: 31%;
    }
    h1 {
      font-size: 34px;
    }
    .abc {
      flex-wrap: wrap;
      justify-content: center;
      gap: 18px 16px;
    }
  }
  @media (max-width: 800px) {
    .pied-site [style*='grid-template-columns'] {
      grid-template-columns: 1fr 1fr !important;
    }
    .pied-site [style*='grid-template-columns'] > :first-child {
      grid-column: 1 / -1;
    }
  }
}

.pg {
  background: #12151a;
  color: #fff;
  font-family: 'Ordalie Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  /* la lettre pliée en trois : une scène en 3D, la feuille au milieu, ses deux volets par-dessus */
  .pli-scene {
    position: relative;
    transform: rotate(-1.4deg);
    transform-style: preserve-3d;
  }
  .pli-scene .feuille-papier {
    transform: none;
  }
  .volet {
    position: absolute !important;
    inset: 0;
    margin: 0;
    transform-style: preserve-3d;
    backface-visibility: visible;
    will-change: transform;
  }
  .volet {
    transform-origin: 50% 0;
  }
  .volet.milieu {
    clip-path: inset(33.333% 0 33.333% 0);
  }
  .volet.bas {
    clip-path: inset(66.667% 0 0 0);
  }
  .dos-volet {
    position: absolute;
    inset: 0;
    background: #f3f3f1;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
  }
  .volet.envers .dos-volet {
    opacity: 1;
  }
  @media (max-width: 800px) {
    .pli-scene {
      transform: rotate(-0.8deg);
    }
  }

  /* les appels vers le glossaire : une pilule claire, comme le bouton du site, sur l'axe */
  .cta-guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 3.2vh;
    padding: 9px 16px 9px 18px;
    border-radius: 99px;
    background: #f2f0e8;
    color: #12151a !important;
    font-size: 14px;
    font-weight: 500;
    transition:
      background 0.2s,
      transform 0.2s;
  }
  .cta-guide:hover {
    background: #fff;
    transform: translateY(-1px);
  }
  .cta-guide .ico {
    width: 14px;
    height: 14px;
  }
  .cta-livre {
    margin-top: 64px;
    opacity: 0;
  }
  .colle {
    flex-direction: column;
  }
}

/* vers une page lettre : la page de droite du livre devient la page */
.pg .page {
  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;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
}