/* Tafonu Moto : une seule police (Courier Prime), du blanc pur, une photo, le rouge granit à la seule touche.
   Téléphone d'abord : bandeau photo collant, rouleau pleine largeur, trois fenêtres de 70 svh.
   À partir de 900 px : photo fixe plein écran et colonne de 36 rem calée à gauche. */
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --blanc: #FFFFFF; --encre: #14171A; --rouge: #B5432E; --gris: #565D63; --case: #EEF1F2; --lib: #B9C0C5;
  --c-km: 4.25rem; --c-tu: 3.5rem; --pad: 16px;
  --rang-h: 64px; --barre-h: 56px; --bande: min(20svh, 160px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 600px) { :root { --c-km: 7rem; --c-tu: 8rem; --pad: 24px; } }
@media (min-width: 900px) { :root { --rang-h: 72px; --barre-h: 64px; --bande: 0px; } }
@media (max-height: 480px) and (orientation: landscape) { :root { --bande: 0px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--encre); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bande) + var(--barre-h) + 16px); scrollbar-gutter: stable;
}
html.menu-ouvert { overflow: hidden; }
body { margin: 0; background: var(--encre); color: var(--encre); font: 400 16px/1.5 "Courier Prime", "Courier New", monospace; }
@media (min-width: 900px) { body { font-size: 17px; padding-bottom: 80svh; } }
img, svg { display: block; max-width: 100%; }
p, h1, h2, ol, ul, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
b, strong { font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cache { display: none; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
main:focus { outline: none; }

.evitement {
  position: fixed; z-index: 100; top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  min-height: 44px; padding: 12px 18px; background: var(--encre); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 60px));
}
.evitement:focus { transform: none; outline: 2px solid #fff; outline-offset: -4px; }

/* La touche : rouge, angles droits, ombre dure de machine à écrire, enfoncée de 2 px à l'appui. */
.touche {
  display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 124px; min-height: 44px; padding: 0 20px;
  border: 0; border-radius: 0; background: var(--rouge); color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 #000; transition: transform .08s, box-shadow .08s;
}
.touche:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.touche:focus-visible { outline-color: var(--encre); }
.lien {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
}
.ital { font-style: italic; color: var(--gris); font-size: 15px; }
.rouge { color: var(--rouge); }

/* Photo : bandeau collant au téléphone, calque fixe plein écran sur ordinateur. Aucun filtre. */
.fond {
  position: sticky; z-index: 6; top: calc(var(--demobar-offset, 0px) + var(--bande) - 56svh);
  height: 56svh; overflow: hidden; background: var(--encre);
}
.fond__vue { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.fond__vue.est-active { opacity: 1; }
.fond img, .fenetre img { width: 100%; height: 100%; object-fit: cover; }
.fond img { object-position: 50% 100%; }
.fond figcaption, .fenetre .legende {
  position: absolute; right: var(--pad); bottom: 22px; max-width: calc(100% - 2 * var(--pad));
  padding: 4px 8px; background: #fff; color: var(--encre); font-size: 14px; line-height: 1.3;
}
/* Bord perforé du rouleau sous le bandeau : la photo se voit par les trous, l'ombre monte sur elle. */
.fond::after, .fenetre::before, .fenetre::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 2; height: 12px;
  background: radial-gradient(circle at 12px 6px, transparent 3.5px, #fff 4px) 0 0 / 24px 12px repeat-x;
  filter: drop-shadow(0 -6px 8px rgb(0 0 0 / .4));
}
.fond::after { bottom: 0; }
.fond figcaption { transition: opacity .25s; }
html.colle .fond figcaption { opacity: 0; }
@media (max-height: 480px) and (orientation: landscape) { .fond { display: none; } }

.rouleau { position: relative; z-index: 5; }
main { display: flow-root; background: #fff; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.perfo-haut { display: none; }
.perfo { height: 2px; margin: 48px var(--pad); background: repeating-linear-gradient(90deg, var(--encre) 0 6px, transparent 6px 12px); }

.fenetre { position: relative; height: 70svh; margin: 48px 0; overflow: hidden; background: var(--encre); }
.fenetre::before { top: 0; transform: scaleY(-1); filter: drop-shadow(0 -6px 8px rgb(0 0 0 / .4)); }
.fenetre::after { bottom: 0; }
.fenetre .legende { bottom: 24px; }

@media (min-width: 600px) and (max-width: 899px) {
  main > * { max-width: 44rem; }
  main > .case, main > section, main > .perfo { margin-left: auto; margin-right: auto; }
  main > .fenetre { max-width: none; }
}

@media (min-width: 900px) {
  .fond { position: fixed; inset: 0; z-index: 0; height: auto; }
  .fond::after { display: none; }
  .fond__vue[data-vue="0"] img { object-position: 50% 60%; }
  .fond__vue[data-vue="1"] img { object-position: 50% 62%; }
  .fond__vue[data-vue="2"] img { object-position: 50% 50%; }
  .fond figcaption { right: 32px; bottom: 32px; font-size: 15px; }
  html.colle .fond figcaption { opacity: 1; }
  .rouleau {
    width: 36rem; margin-left: clamp(24px, 9vw, 168px); margin-top: 48svh;
    box-shadow: 18px 0 44px -14px rgb(0 0 0 / .5), 0 0 0 1px rgb(20 23 26 / .08);
  }
  .perfo-haut { display: block; height: 20px; background: radial-gradient(circle at 12px 10px, transparent 3.6px, #fff 4px) 0 0 / 24px 20px repeat-x; }
  main { padding-bottom: 40px; }
  .fenetre { height: 2px; margin: 48px var(--pad); background: repeating-linear-gradient(90deg, var(--encre) 0 6px, transparent 6px 12px); }
  .fenetre::before, .fenetre::after, .fenetre img, .fenetre .legende { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fond__vue { transition: none; }
  html { scroll-behavior: auto; }
}