@charset "UTF-8";
/* launchbusinesspro.com - monde « grue en origami » (orizuru).
   Feuille unique des 181 pages : 15 pages EN, 404, 165 pages traduites.
   Une feuille de washi vermillon non coupee, des panneaux fold white qui en sont
   l'envers, l'encre sumi pour lire, un point dore pour dire ou on en est.
   Aucune autre couleur.

   Vermillon du monde #D83A2E, assombri a #ae332a pour 4,5:1 sur petit texte
   (le #D83A2E d'origine ne portait que 4,09:1 sous le fold white, et meme le
   blanc pur n'y atteignait que 4,36:1). Teinte inchangee. La tuile washi est
   teintee a cette meme valeur (washi-vermilion-v3.webp), donc aucun voile ne
   la recouvre : la fibre kozo se voit. Meme raison pour --ink-fade, passe de
   #8E8A83 (3,06:1) a #635e58 (5,71:1). */

/* @fontface:begin (genere par tools/fetch-fonts.mjs) */
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400i-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400i-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Alegreya Sans SC';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/alegreya-sans-sc-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-devanagari-400-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-devanagari-700-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* @fontface:end */

/* --------------------------------------------------------------------------
   1. Jetons
   -------------------------------------------------------------------------- */

:root {
  /* vermillon washi assombri de 22 % de sumi : la teinte du comp ne portait
     que 4,09:1 sous le fold white, elle en porte 5,64 ici. Hue inchangee. */
  --vermilion: #ae332a;
  --vermilion-deep: #a72a21;
  --fold: #f6f1e9;
  --cream: #ede3d1;
  --gold: #d4af37;
  --sumi: #1a1a1a;
  --ink-fade: #635e58;

  /* encre secondaire sur vermillon : teintee depuis le vermillon, jamais grise */
  --on-verm: #f6f1e9;
  --on-verm-2: #f7e4dc; /* eclairci le 02/09 : 4,86:1 de moyenne sur le fond fibre etait trop juste */
  --rule-verm: rgba(246, 241, 233, 0.24);
  --rule-fold: rgba(26, 26, 26, 0.14);

  --sans: 'Alegreya Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sc: 'Alegreya Sans SC', 'Alegreya Sans', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell: 1400px;
  --rail: 236px;
  /* la colonne du carre de plis a droite du panneau : 200 px de figure plus la
     respiration de 32 px qui la separe du papier */
  --cp-aside: 232px;
  --gutter: clamp(18px, 3.2vw, 46px);
  --measure: 68ch;
  --head-h: 74px;

  --ease-fold: cubic-bezier(0.16, 1, 0.3, 1);
}

html:lang(ja) {
  --sans: 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
  --sc: 'Hiragino Sans', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', system-ui, sans-serif;
}
html:lang(zh) {
  --sans: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
  --sc: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base et surfaces du navigateur
   -------------------------------------------------------------------------- */

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

html {
  background: var(--vermilion);
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 26, 26, 0.45) transparent;
}

/* Pas de fond sur body : sa boite de fond se peint apres les couches a
   z-index negatif et masquait la tuile washi de body::before sur toute sa
   hauteur. Le vermillon de secours reste sur html, qui couvre le canevas. */
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  color: var(--on-verm);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* la feuille elle-meme : la page EST la feuille, la fibre defile avec le
   contenu (absolute sur toute la hauteur du document, pas fixed) ; les plis
   de feuille sont les SVG foldLines du premier ecran et du bandeau */
body { position: relative; }
body::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vermilion) url('/assets/img/washi-vermilion-v3.webp') repeat;
  background-size: 380px 380px;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, 0.45); }
::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, 0.68); }

::selection { background: var(--fold); color: var(--vermilion-deep); }
.panel ::selection, .site-foot ::selection, .lang-panel ::selection, .site-nav[data-open] ::selection {
  background: var(--vermilion); color: var(--fold);
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

a { color: inherit; text-underline-offset: 0.19em; text-decoration-thickness: 0.055em; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  background: var(--sumi); color: var(--fold);
  font-family: var(--sc); font-size: 0.875rem; letter-spacing: 0.1em;
  padding: 12px 20px; text-decoration: none;
  transition: top 0.18s var(--ease-fold);
}
.skip:focus { top: 12px; }

.sc {
  font-family: var(--sc);
  letter-spacing: 0.1em;
  font-weight: 400;
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* --------------------------------------------------------------------------
   3. Bandeau haut
   -------------------------------------------------------------------------- */

.site-head { border-bottom: 1px solid var(--rule-verm); }

.site-head__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--head-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 34px);
}

.mark {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--on-verm);
  flex: 0 0 auto;
}
/* Le tigre est un trait blanc sur noir pur : screen efface le noir et ne laisse
   que le trait. Le trait epais tient a 52 px sans rattrapage de contraste ; la
   version 2x sert les ecrans denses. */
.mark__tiger {
  width: 52px; height: 52px;
  mix-blend-mode: screen;
}
.mark__word {
  font-family: var(--sc);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.mark:hover .mark__word { color: var(--fold); }

.site-nav {
  display: flex; align-items: center;
  gap: clamp(10px, 1.7vw, 26px);
  margin-left: auto;
  flex-wrap: wrap;
}
.site-nav a {
  font-family: var(--sc);
  font-size: 0.875rem;
  letter-spacing: 0.11em;
  color: var(--on-verm-2);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.16s var(--ease-fold), border-color 0.16s var(--ease-fold);
}
.site-nav a:hover { color: var(--fold); border-bottom-color: var(--fold); }
.site-nav a[aria-current='page'] { color: var(--fold); border-bottom-color: var(--fold); }
.site-nav a:active { color: var(--on-verm-2); }

.menu-btn { display: none; }

/* --------------------------------------------------------------------------
   4. Selecteur de langue (texte, plus de drapeaux)
   -------------------------------------------------------------------------- */

.language-switcher { position: relative; flex: 0 0 auto; }

.lang-btn {
  font-family: var(--sc);
  font-size: 0.875rem;
  letter-spacing: 0.11em;
  color: var(--on-verm);
  background: none;
  border: 1px solid var(--rule-verm);
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.16s var(--ease-fold), background-color 0.16s var(--ease-fold);
}
.lang-btn:hover { border-color: var(--fold); }
.lang-btn:active { background: rgba(246, 241, 233, 0.1); }
.lang-btn[aria-expanded='true'] { border-color: var(--fold); background: rgba(246, 241, 233, 0.12); }

.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 268px;
  background: var(--fold) url('/assets/img/washi-white.webp') repeat;
  background-size: 420px 420px;
  color: var(--sumi);
  padding: 10px 0;
  box-shadow: 10px 16px 40px rgba(26, 26, 26, 0.34);
}
.lang-panel ul { list-style: none; }
.lang-panel a {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 7px 20px 7px 34px;
  text-decoration: none;
  color: var(--sumi);
  position: relative;
  transition: background-color 0.14s var(--ease-fold);
}
.lang-panel a:hover { background: rgba(174, 51, 42, 0.09); }
.lang-panel a:active { background: rgba(174, 51, 42, 0.16); }
.lang-code {
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ink-fade);
}
.lang-name { font-size: 0.9375rem; }
.lang-panel [aria-current='true'] .lang-name { font-weight: 700; }
/* Le repere de la langue courante est vermillon, pas dore : le contrat ne
   compte qu'un seul point dore, celui de la marge. */
.lang-panel [aria-current='true']::before {
  content: '';
  position: absolute;
  left: 16px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--vermilion);
}

/* --------------------------------------------------------------------------
   5. Grille de la feuille : marge numerotee + colonne de lecture
   -------------------------------------------------------------------------- */

.sheet {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.sheet__grid {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  /* le pli vertical de la feuille, sur toute la hauteur */
  background-image: linear-gradient(to right,
    transparent calc(var(--rail) - 1px), var(--rule-verm) calc(var(--rail) - 1px),
    var(--rule-verm) var(--rail), transparent var(--rail));
}

.rail {
  grid-column: 1;
  position: sticky;
  top: 0;
  align-self: start;
  padding: 28px 26px 30px 0;
}
.sheet__grid > .flow { grid-column: 2; min-width: 0; }
.rail--empty { visibility: hidden; }
.rail__title {
  font-family: var(--sc);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--on-verm-2);
  margin-bottom: 14px;
}
.rail__list { list-style: none; position: relative; }

.rail__dot {
  position: absolute;
  left: 0; top: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  transform: translate(0, 6px);
  transition: transform 0.5s var(--ease-fold);
  pointer-events: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 1px 0;
  margin-left: 20px;
  font-size: 0.8125rem;
  line-height: 1.42;
  text-decoration: none;
  color: var(--on-verm-2);
  transition: color 0.16s var(--ease-fold);
}
.step__n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  text-align: right;
  color: var(--on-verm-2);
}
.step__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step:hover, .step:focus-visible { color: var(--fold); }
.step:hover .step__n, .step:focus-visible .step__n { color: var(--fold); }
.rail__item.is-current .step { color: var(--fold); }
.rail__item.is-current .step__n { color: var(--fold); font-weight: 700; }

/* la note du tutoriel, en encre sumi, au survol de l'etape */
.step__note {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  z-index: 30;
  width: max-content;
  max-width: 330px;
  background: var(--fold);
  color: var(--sumi);
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 8px 13px;
  box-shadow: 6px 8px 22px rgba(26, 26, 26, 0.3);
  opacity: 0;
  visibility: hidden;
  white-space: normal;
  transition: opacity 0.18s var(--ease-fold), transform 0.18s var(--ease-fold), visibility 0s linear 0.18s;
}
.step:hover .step__note, .step:focus-visible .step__note {
  opacity: 1; visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0s, 0s, 0s;
}

/* marge « on this page » des pages interieures */
.toc .step { grid-template-columns: 22px 1fr; }
.toc .step__label { white-space: normal; }

/* --------------------------------------------------------------------------
   6. Premier ecran de l'accueil
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 46%);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(36px, 6vh, 74px) 0 clamp(40px, 7vh, 84px) clamp(24px, 3.4vw, 54px);
  min-height: min(calc(100vh - var(--head-h)), 900px);
}

.hero__text { position: relative; z-index: 1; }

.hero h1 {
  font-size: clamp(2.3rem, 4.5vw, 4.05rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--fold);
  text-wrap: balance;
  max-width: 15ch;
}
html:lang(ja) .hero h1, html:lang(zh) .hero h1 { line-height: 1.28; letter-spacing: 0; }

.updated {
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  color: var(--on-verm-2);
  margin-top: 22px;
}

.lede {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 1.125rem;
  line-height: 1.62;
  color: var(--on-verm);
}
.lede + .lede { margin-top: 14px; }
.lede a { color: var(--fold); }

.hero .cta-wrap { margin-top: 34px; }

/* --------------------------------------------------------------------------
   7. Bandeau des pages interieures
   -------------------------------------------------------------------------- */

.band { position: relative; border-bottom: 1px solid var(--rule-verm); }
.band__in {
  position: relative;
  z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(38px, 6vw, 74px) var(--gutter) clamp(34px, 5vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.band h1 {
  font-size: clamp(1.95rem, 3.5vw, 3.05rem);
  font-weight: 400;
  line-height: 1.09;
  letter-spacing: -0.015em;
  color: var(--fold);
  text-wrap: balance;
  max-width: 22ch;
}
html:lang(ja) .band h1, html:lang(zh) .band h1 { line-height: 1.3; letter-spacing: 0; }
.band .updated { margin-top: 16px; }

/* --------------------------------------------------------------------------
   8. Carre de plis et grue
   -------------------------------------------------------------------------- */

/* Les plis de la feuille elle-meme sur le vermillon : une diagonale et une
   mediane, tres legeres, comme une feuille pliee puis depliee. Le trait ne
   grossit pas avec le cadre. */
.fold-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.fold-lines line {
  stroke: var(--fold);
  stroke-width: 1;
  opacity: 0.22;
  vector-effect: non-scaling-stroke;
}

.crease { position: relative; z-index: 1; }
.crease__square {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.crease__square .cp { position: absolute; inset: 0; width: 100%; height: 100%; }

.cp-edge, .cp-mountain, .cp-valley, .cp-arrow {
  stroke: var(--fold);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.cp-edge { opacity: 0.92; }
.cp-mountain { stroke-dasharray: 13 9; opacity: 0.74; }
.cp-valley { stroke-dasharray: 20 7 2.5 7; opacity: 0.74; }
.cp-arrow { stroke-width: 1.6; opacity: 0.6; }
.cp-head { stroke-linejoin: round; stroke-linecap: round; }

.crease__shot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  background: var(--fold);
  border: 9px solid var(--fold);
  box-shadow: 9px 13px 34px rgba(70, 12, 9, 0.42);
}
.crease figcaption {
  margin-top: 20px;
  text-align: center;
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--on-verm-2);
}

/* Le meme carre sur les pages interieures, dans la marge vermillon a droite de
   la feuille de lecture. En dessous du point de rupture, il n'y a plus de marge
   libre : le carre se pose une seule fois, centre, entre la fin du texte et le
   pied de page. Purement decoratif (aria-hidden, aucun texte). */
.crease-aside {
  grid-column: 2;
  width: 200px;
  max-width: 100%;
  margin: 0 auto clamp(38px, 5vw, 74px);
}
.crease-aside .cp { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* 1360 px : en dessous, retirer 232 px au panneau ferait passer ses tableaux
   sous leur largeur minimale de 620 px et un ascenseur horizontal apparaitrait.
   Mesure faite sur /pricing.html : panneau utile 907 px a 1440, 866 px a 1920,
   816 px a 1280. */
@media (min-width: 1360px) {
  .sheet__grid--aside { grid-template-columns: var(--rail) minmax(0, 1fr) var(--cp-aside); }
  .crease-aside {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: 0;
    width: auto;
    margin: 0;
    padding: 30px 0 30px 32px;
  }
}

/* La grue n'est plus une image : /assets/crane3d.js la dessine en volume dans
   un canvas, facette par facette, sous une lumiere fixe. Le canvas est
   transparent et les teintes sont posees telles quelles sur le fond, donc
   plus de mix-blend-mode ni de perspective a porter ici : le relief vient du
   modele, pas du navigateur. Sans JavaScript, le <noscript> rend le dessin au
   trait d'origine.

   Celle du premier ecran est vivante pendant la lecture, sur place : le CSS
   porte la flottaison, le moteur porte le tour sur l'axe vertical et la
   respiration des ailes. Elle ne quitte jamais le premier ecran ; c'est la
   grue du pied de page qui s'envole, la ou le lecteur regarde a la derniere
   etape. */
.crane3d { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
.crane-mark noscript img, .foot-crane noscript img { width: 100%; height: auto; }

/* Sans JavaScript, le canvas reste vide et le <noscript> rend le dessin au
   trait. Ce dessin est un trait blanc sur noir pur (et noir sur blanc au pied
   de page) : il lui faut ses fondus d'origine, sinon le fond du PNG se verrait.
   lbp.js pose .js des son execution, donc ces deux regles ne servent que la ou
   il n'y a pas de script. */
html:not(.js) .crane3d { display: none; }
html:not(.js) .crane-mark { opacity: 0.55; mix-blend-mode: screen; }
html:not(.js) .foot-crane { opacity: 0.5; mix-blend-mode: multiply; }

.crane-mark {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 180px;
  pointer-events: none;
}

.crane-mark__float {
  pointer-events: auto;
  animation: crane-float 7s ease-in-out infinite;
  will-change: transform;
}
/* Le tour s'arrete au survol : c'est le moteur qui le tient, pas une
   animation CSS ; il ecoute cette enveloppe. */

@keyframes crane-float {
  0%, 100% { transform: translateY(6px); }
  50% { transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   9. Panneau de lecture (envers de la feuille)
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--fold) url('/assets/img/washi-white.webp') repeat;
  background-size: 520px 520px;
  color: var(--sumi);
  padding: clamp(30px, 4.4vw, 72px) clamp(24px, 4vw, 76px) clamp(44px, 6vw, 92px);
  margin-left: clamp(24px, 3.4vw, 54px);
  box-shadow: 12px 16px 46px rgba(26, 26, 26, 0.28);
}
.hero + .panel { margin-bottom: clamp(34px, 5vw, 74px); }
.sheet__grid > .flow > .panel:first-child { margin-top: clamp(30px, 4vw, 58px); margin-bottom: clamp(34px, 5vw, 74px); }

/* La mesure de lecture porte sur le texte ; tableaux et captures respirent plus large. */
.panel .section { max-width: min(100%, 920px); }
.panel p, .panel ul, .panel ol, .panel h2, .panel h3, .panel h4 { max-width: var(--measure); }
.panel .table-wrapper { max-width: 100%; }
.panel figure.shot { max-width: min(100%, 780px); }
.panel .section + .section { margin-top: clamp(30px, 3.6vw, 52px); padding-top: clamp(30px, 3.6vw, 52px); border-top: 1px solid var(--rule-fold); }
.panel .box { background: none; box-shadow: none; padding: 0; border: 0; }

.panel h2 {
  font-size: clamp(1.42rem, 2.1vw, 1.95rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--sumi);
  margin-bottom: 18px;
  scroll-margin-top: 26px;
  text-wrap: balance;
}
.panel h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--sumi);
  margin: 34px 0 10px;
}
.panel h4 {
  font-family: var(--sc);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--sumi);
  margin: 28px 0 8px;
}
.panel p { margin-bottom: 17px; }
.panel p:last-child { margin-bottom: 0; }
.panel ul, .panel ol { margin: 0 0 20px 1.35em; }
.panel li { margin-bottom: 9px; }
.panel li::marker { color: var(--ink-fade); }
.panel ol { font-variant-numeric: tabular-nums; }

.panel a { color: var(--vermilion-deep); text-decoration: underline; }
.panel a:hover { color: var(--sumi); text-decoration-thickness: 0.11em; }
.panel a:active { color: var(--vermilion); }
/* le bouton dans le panneau garde son texte fold white : .panel a (0,1,1)
   l'emportait sur .btn (0,1,0) et rendait 84 boutons illisibles */
.panel a.btn,
.panel a.btn:hover,
.panel a.btn:active { color: var(--fold); text-decoration: none; }

.panel code {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: 0.92em;
  background: rgba(26, 26, 26, 0.07);
  padding: 2px 6px;
  word-break: break-all;
}

.panel strong { font-weight: 700; }
.panel em { font-style: italic; }

/* le bouton d'action : rectangle sumi, angles vifs, texte blanc */
.btn {
  display: inline-block;
  background: var(--sumi);
  color: var(--fold);
  font-size: 1.0625rem;
  line-height: 1.35;
  padding: 17px 30px;
  text-decoration: none;
  border: 1px solid var(--sumi);
  box-shadow: 7px 10px 26px rgba(26, 26, 26, 0.34);
  transition: transform 0.16s var(--ease-fold), box-shadow 0.16s var(--ease-fold), background-color 0.16s var(--ease-fold);
}
.btn:hover {
  background: #000;
  transform: translate(-1px, -2px);
  box-shadow: 10px 14px 32px rgba(26, 26, 26, 0.4);
}
.btn:active { transform: translate(1px, 1px); box-shadow: 4px 6px 18px rgba(26, 26, 26, 0.3); }
.hero .btn { box-shadow: 8px 12px 30px rgba(74, 12, 9, 0.5); }
.hero .btn:hover { box-shadow: 11px 17px 40px rgba(74, 12, 9, 0.56); }
.cta-wrap { margin: 30px 0 8px; }

.panel figure.shot { margin: 30px 0; }
.panel figure.shot img {
  width: 100%;
  border: 1px solid rgba(26, 26, 26, 0.16);
  box-shadow: 8px 11px 28px rgba(26, 26, 26, 0.16);
}

.panel .related-links { list-style: none; margin-left: 0; }
.panel .related-links li { margin-bottom: 7px; }
.panel .related-link a, .panel .related-links a { font-weight: 700; }

.panel .todo {
  background: var(--cream);
  padding: 12px 16px;
  font-style: italic;
  color: var(--ink-fade);
}
.panel .todo-inline { background: var(--cream); font-style: italic; }

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 30px 0;
  max-width: 100%;
  border: 1px solid rgba(26, 26, 26, 0.16);
}
.table-wrapper table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.table-wrapper th, .table-wrapper td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(26, 26, 26, 0.13);
}
.table-wrapper th {
  background: var(--sumi);
  color: var(--fold);
  font-family: var(--sc);
  font-weight: 400;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.table-wrapper tbody tr:last-child td { border-bottom: 0; }
.table-wrapper tbody tr:hover { background: rgba(174, 51, 42, 0.055); }

/* --------------------------------------------------------------------------
   10. Pied de page
   -------------------------------------------------------------------------- */

/* La coupe horizontale tient l'envol de la grue dans la largeur de la page :
   sans elle, le vol vers la droite ouvrirait une barre de defilement. Le
   vertical reste ouvert, c'est par la que la grue sort. */
.site-foot {
  background: var(--cream) url('/assets/img/washi-white.webp') repeat;
  background-size: 520px 520px;
  color: var(--sumi);
  margin-top: clamp(30px, 5vw, 70px);
  overflow-x: clip;
  overflow-y: visible;
}
.site-foot__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(38px, 5vw, 64px) var(--gutter) clamp(34px, 4.5vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 30px;
  align-items: start;
}
.site-foot p { margin: 0; }
.site-foot a { color: var(--vermilion-deep); }
.site-foot a:hover { color: var(--sumi); }
.site-foot > .site-foot__in > div > p + p { margin-top: 13px; }
.site-foot .footer-nav, .site-foot .footer-guides {
  font-size: 0.9375rem;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 22px;
  align-items: baseline;
}
.site-foot .footer-guides { margin-top: 11px; }
.site-foot .footer-nav a, .site-foot .footer-guides a { text-decoration: none; border-bottom: 1px solid rgba(174, 51, 42, 0.4); }
.site-foot .footer-nav a:hover, .site-foot .footer-guides a:hover { border-bottom-color: var(--sumi); }
.site-foot .footer-copy {
  font-family: var(--sc);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  color: var(--ink-fade);
}
.site-foot .footer-disclosure {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-fade);
  max-width: 74ch;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-fold);
}
/* Le meme moteur, en habillage papier : du washi cream au sable ombre, trait
   sumi. Au repos elle ne bouge pas du tout, aucune image n'est calculee : le
   pied de page est calme. Le moteur ne se reveille qu'a l'envol. */
.foot-crane {
  position: relative;
  opacity: 0.86;
  justify-self: end;
  width: 110px;
  translate: 0 0;
  transform: translateY(0) rotate(0deg) scale(1);
  transition:
    translate 1.8s var(--ease-fold),
    transform 1.8s var(--ease-fold),
    opacity 0.5s var(--ease-fold);
}

/* Etape 32, « Launched », sur l'accueil : la grue s'envole. Le pied de page
   est alors sous les yeux du lecteur, il la voit partir. Elle monte en arc
   vers le haut a droite, traverse le panneau clair et sort par le haut. Le
   vertical part vite (ease de pli), le lateral part tard (ease-in) ; ce sont
   deux proprietes distinctes, donc la trajectoire se courbe au lieu de filer
   droit. L'opacite ne tombe que sur le dernier tiers. Le lecteur qui remonte
   la fait revenir se poser, en 1,8 s. */
.foot-crane.is-flying {
  translate: 30vw 0;
  transform: translateY(-80vh) rotate(-14deg) scale(0.6);
  opacity: 0;
  pointer-events: none;
  will-change: translate, transform;
  /* courbes adoucies le 04/09 : avec l'ease de pli pur, la grue etait deja
     en haut a 1 s et l'arc ne se lisait pas ; le vertical garde une sortie
     douce, le lateral avance des le milieu du vol */
  transition:
    translate 2.4s cubic-bezier(0.35, 0, 0.65, 1),
    transform 2.4s cubic-bezier(0.25, 0.7, 0.35, 1),
    opacity 0.8s linear 1.6s;
}

/* --------------------------------------------------------------------------
   11. 404
   -------------------------------------------------------------------------- */

.notfound {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(60px, 14vh, 150px) var(--gutter) clamp(70px, 16vh, 170px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.notfound h1 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--fold);
}
.notfound__n {
  font-family: var(--sc);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  letter-spacing: 0.18em;
  color: var(--on-verm-2);
  margin-bottom: 18px;
}
.notfound p { margin-top: 20px; max-width: 46ch; font-size: 1.0625rem; }
.notfound .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; }
.notfound .actions a:not(.btn) {
  font-family: var(--sc); font-size: 0.875rem; letter-spacing: 0.11em;
  color: var(--on-verm); text-decoration: none; border-bottom: 1px solid var(--rule-verm);
  padding-bottom: 3px;
}
.notfound .actions a:not(.btn):hover { border-bottom-color: var(--fold); }
.notfound .crease__square { width: min(320px, 100%); justify-self: end; }
.notfound .btn { box-shadow: 8px 12px 30px rgba(74, 12, 9, 0.5); }
.notfound__search { margin-top: 34px; display: flex; max-width: 440px; }
.search-input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--fold);
  background: rgba(26, 26, 26, 0.18);
  border: 1px solid var(--rule-verm);
  border-right: 0;
  padding: 12px 15px;
}
.search-input::placeholder { color: var(--on-verm-2); opacity: 1; }
.search-input:focus { background: rgba(26, 26, 26, 0.3); }
.search-btn {
  flex: 0 0 auto;
  font-family: var(--sc);
  font-size: 0.875rem;
  letter-spacing: 0.11em;
  color: var(--fold);
  background: var(--sumi);
  border: 1px solid var(--sumi);
  padding: 12px 20px;
  cursor: pointer;
}
.search-btn:hover { background: #000; }

/* --------------------------------------------------------------------------
   12. Mobile et tablette
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  :root { --rail: 200px; }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
}

@media (max-width: 900px) {
  /* sous 900 px la mediane de pli traversait la colonne de texte : on la coupe */
  .fold-lines { display: none; }
  :root { --head-h: 62px; }

  .site-head__in { flex-wrap: wrap; gap: 12px; min-height: 62px; }

  .menu-btn {
    display: inline-block;
    order: 3;
    margin-left: auto;
    font-family: var(--sc);
    font-size: 0.875rem;
    letter-spacing: 0.11em;
    color: var(--on-verm);
    background: none;
    border: 1px solid var(--rule-verm);
    padding: 7px 14px;
    cursor: pointer;
  }
  .menu-btn[aria-expanded='true'] { border-color: var(--fold); background: rgba(246, 241, 233, 0.12); }

  .language-switcher { order: 2; margin-left: auto; }
  .lang-panel { right: auto; left: 0; min-width: 240px; }

  .site-nav {
    order: 4;
    display: none;
    width: 100%;
    margin: 0 calc(var(--gutter) * -1);
    padding: 8px var(--gutter) 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fold) url('/assets/img/washi-white.webp') repeat;
    background-size: 420px 420px;
  }
  .site-nav[data-open] { display: flex; }
  .site-nav a {
    color: var(--sumi);
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-fold);
  }
  .site-nav a:hover { color: var(--vermilion-deep); border-bottom-color: var(--rule-fold); }
  .site-nav a[aria-current='page'] { color: var(--vermilion-deep); border-bottom-color: var(--vermilion-deep); }

  /* la marge devient une bande horizontale defilable sous le bandeau */
  .sheet { padding: 0; }
  .sheet__grid { display: block; background-image: none; }
  .rail {
    position: static;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--rule-verm);
    padding: 14px var(--gutter);
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__title { display: none; }
  .rail__list { display: flex; gap: 0; width: max-content; }
  .rail__dot { transform: translate(6px, 0); }
  .step {
    margin-left: 0;
    grid-template-columns: auto auto;
    gap: 7px;
    padding: 6px 16px 6px 0;
    margin-right: 12px;
  }
  .step__label { max-width: 22ch; }
  .step__note { display: none; }
  .toc { display: none; }

  .hero {
    grid-template-columns: 1fr;
    padding: 30px var(--gutter) 40px;
    min-height: 0;
    gap: 34px;
  }
  .hero h1 { max-width: none; }
  .hero .crease { width: min(340px, 100%); justify-self: center; }
  .hero .btn { display: block; text-align: center; }
  .crane-mark { position: static; width: 116px; margin: 26px auto 0; }

  .band__in { gap: 20px; }
  .crease-aside { margin-top: clamp(28px, 6vw, 44px); }

  .panel { margin-left: 0; padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero + .panel, .sheet__grid > .flow > .panel:first-child { margin-bottom: 0; }
  .panel .section { max-width: none; }

  .site-foot__in { grid-template-columns: 1fr; }
  .foot-crane { justify-self: start; }

  .notfound { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
  .notfound .crease__square { width: min(260px, 100%); justify-self: start; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .mark__tiger { width: 40px; height: 40px; }
  .mark__word { font-size: 0.8125rem; letter-spacing: 0.1em; }
  .lang-btn, .menu-btn { padding: 6px 11px; font-size: 0.8125rem; }
  .lang-rest { display: none; }
  .site-head__in { flex-wrap: nowrap; gap: 10px; }
  .mark { min-width: 0; }
  .mark__word { overflow: hidden; text-overflow: ellipsis; }
  .btn { width: 100%; text-align: center; padding: 16px 20px; }
  .table-wrapper table { min-width: 520px; }
}

/* --------------------------------------------------------------------------
   13. Trace des plis, mouvement reduit, impression
   -------------------------------------------------------------------------- */

.cp-r { stroke-linecap: round; }
.js .cp-r { stroke-dashoffset: var(--cp-len, 0); }
.js .cp-drawn .cp-r {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 900ms var(--ease-fold);
}

/* Les trois fleches de pli, en boucle lente. Le patron, lui, ne se dessine
   toujours qu'une fois, au chargement (regles ci-dessus) ; ce qui suit ne
   touche que les fleches et le trait de pli que chacune designe.

   Au repos les trois fleches restent visibles, en retrait (opacite 0,28) :
   le patron garde sa lecture de diagramme. Un cycle dure --cp-cycle = 12,6 s.
   La fleche de rang --cp-i (pose par le generateur du SVG) part a
   --cp-lead + --cp-i x --cp-step, soit :
     0 -> 0,20 s   elle s'eteint
     0,20 -> 1,05  l'arc se retrace, franc (opacite 0,9)
     1,05 -> 1,35  la pointe se trace
     1,35 -> 2,70  elle tient
     2,70 -> 3,20  elle redescend au retrait
   La courbe du pli est ecrite en toutes lettres dans les keyframes : un
   var(--ease-fold) y est ignore par le moteur (verifie au stroke-dashoffset,
   il retombait sur linear). C'est la meme valeur que le jeton.
   Les trois se suivent (3,2 s chacune), puis 3 s de silence. Pendant que la
   fleche se trace, le pli qu'elle designe s'eclaircit : c'est le calque
   .cp-lit, le meme trait redessine par-dessus, invisible au repos.

   lbp.js pose .cp-anim sur le carre (etat d'attente : fleches non tracees)
   puis .cp-live tant que le carre est a l'ecran. Hors ecran, plus une seule
   animation. Aucune minuterie en JavaScript : tout est ici. */
.cp {
  --cp-cycle: 12.6s;
  --cp-step: 3.2s;
  --cp-lead: 1.2s;
}
.cp-lit { opacity: 0; }
.js .cp-anim .cp-arrow { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0.28; }

.js .cp-live .cp-arrow,
.js .cp-live .cp-lit {
  animation: cp-arc var(--cp-cycle) linear
    calc(var(--cp-lead) + var(--cp-i, 0) * var(--cp-step)) infinite backwards;
}
.js .cp-live .cp-head { animation-name: cp-head; }
.js .cp-live .cp-lit { animation-name: cp-lit; }

@keyframes cp-arc {
  0% { stroke-dashoffset: 0; opacity: 0.28; }
  1.58% { stroke-dashoffset: 0; opacity: 0; }
  1.6% { stroke-dashoffset: 100; opacity: 0.9; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8.35% { stroke-dashoffset: 0; opacity: 0.9; }
  21.43% { stroke-dashoffset: 0; opacity: 0.9; }
  25.4%, 100% { stroke-dashoffset: 0; opacity: 0.28; }
}
@keyframes cp-head {
  0% { stroke-dashoffset: 0; opacity: 0.28; }
  1.58% { stroke-dashoffset: 0; opacity: 0; }
  1.6%, 8.35% { stroke-dashoffset: 100; opacity: 0; }
  8.45% { stroke-dashoffset: 100; opacity: 0.9; }
  10.7% { stroke-dashoffset: 0; opacity: 0.9; }
  21.43% { stroke-dashoffset: 0; opacity: 0.9; }
  25.4%, 100% { stroke-dashoffset: 0; opacity: 0.28; }
}
@keyframes cp-lit {
  0%, 1.6% { opacity: 0; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  8.35%, 21.43% { opacity: 0.7; }
  25.4%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js .cp-r { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  /* Aucune boucle : les trois fleches restent tracees, immobiles, et le trait
     eclaire ne s'allume jamais. lbp.js ne pose meme pas .cp-anim ; ces regles
     sont le filet si le reglage change apres le chargement. */
  .cp-arrow { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 0.6 !important; }
  .cp-lit { opacity: 0 !important; }
  /* Les deux grues restent posees : ni flottaison, ni tour, ni battement, ni
     envol. Le moteur le sait aussi et ne peint qu'une image de trois quarts. */
  .crane-mark, .crane-mark__float, .crane-mark canvas, .foot-crane {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  body::before, .fold-lines, .rail, .crane-mark, .foot-crane, .crease-aside,
  .language-switcher, .menu-btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .panel { box-shadow: none; margin: 0; padding: 0; background: none; }
  .band h1, .hero h1 { color: #000; }
  .sheet__grid { display: block; }
}

/* Ecran court : la marge defile plutot que de deborder, la note passe la main. */
@media (min-width: 901px) and (max-height: 830px) {
  .rail { max-height: 100vh; overflow-y: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .step__note { display: none; }
}

/* Devanagari, japonais et chinois : l'interlettrage abime les conjointes et les
   ideogrammes. Il est neutralise sur ces trois ecritures, partout. */
html:lang(hi) *, html:lang(ja) *, html:lang(zh) * { letter-spacing: 0 !important; }