/* nuee.io: paper, ink and the colours of Nuée's plots. Two typefaces, both served from here:
   Fraunces for the text and the titles, IBM Plex Mono for the labels and the code. One theme,
   from a phone to a wide screen; site.js adds the swarm and the page's small machines. */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(polices/fraunces-latin-full-normal.woff2) format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(polices/fraunces-latin-full-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(polices/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(polices/ibm-plex-mono-latin-400-italic.woff2) format("woff2"); }

:root {
  --papier: #f4efe4; --papier-clair: #fbf8f1; --papier-fonce: #e6dfce;
  --encre: #16233f; --encre-douce: #566079; --trait: rgba(22, 35, 63, .2); --trait-fin: rgba(22, 35, 63, .07);
  --bleu: #1b4a9c; --bleu-vif: #2459b6; --bleu-nuit: #0f2f6b; --ciel: #bee1ff;
  /* the colours of the application's plots (panneaux.js), and the grey of a map's contour lines */
  --c0: #2f6fb5; --c1: #d1495b; --c2: #3b9a5b; --c3: #e09f3e; --c4: #7b5ea7; --c5: #2a9d8f; --c6: #9aa0ae;
  --surligneur: #ffd84a;
  --nuit: #101a33; --nuit-clair: #1a2748; --nuit-trait: #33426b; --lune: #ece6d6; --lune-douce: #a4adc4;
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
  --gouttiere: clamp(1.15rem, 4.2vw, 4.5rem);
  --largeur: 80rem;
  --ressort: cubic-bezier(.34, 1.56, .64, 1);  /* goes a little too far, and comes back */
  --doux: cubic-bezier(.22, 1, .36, 1);
  /* the paper's grain */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .14 0 0 0 0 .25 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; background: var(--papier) var(--grain); color: var(--encre);
  font: 400 clamp(1.06rem, .98rem + .32vw, 1.2rem)/1.55 var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--bleu); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--bleu-vif); outline-offset: 3px; border-radius: 2px; }
mark { color: inherit; background: linear-gradient(transparent 56%, var(--surligneur) 56% 92%, transparent 92%); padding: 0 .12em; margin: 0 -.12em; }
code { font: 400 .85em var(--mono); background: var(--papier-fonce); padding: .1em .35em; border-radius: 3px; }
h1, h2, h3, h4 { text-wrap: balance; }
h2 { font: 400 clamp(2.5rem, 6vw, 5.4rem)/1 var(--serif); font-variation-settings: "SOFT" 60, "WONK" 1; letter-spacing: -.03em; margin: 0 0 .45em; }
h2 em { font-weight: 330; color: var(--bleu); font-variation-settings: "SOFT" 100, "WONK" 1; }
h3 { font: 540 1.5rem/1.15 var(--serif); font-variation-settings: "SOFT" 60, "WONK" 1; letter-spacing: -.015em; margin: 0 0 .5em; }

.sauter { position: absolute; left: -999rem; top: .5rem; z-index: 30; padding: .6rem 1rem; background: var(--bleu); color: #fff; font: 500 .85rem var(--mono); }
.sauter:focus { left: 1rem; }

/* the swarm, over the page: it takes no click */
#nuee { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* ---------------------------------------------------------------- buttons */
.bouton { --ombre: var(--bleu-nuit); display: inline-flex; align-items: center; gap: .65em; font: 500 .88rem/1 var(--mono); letter-spacing: .01em;
  color: #fff; background: var(--bleu); padding: 1.05em 1.35em; border: 0; border-radius: 4px; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 0 var(--ombre); transition: transform .14s var(--doux), box-shadow .14s var(--doux), background-color .15s; }
.bouton:hover { color: #fff; background: var(--bleu-vif); transform: translateY(-2px); box-shadow: 0 6px 0 var(--ombre); }
.bouton:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ombre); transition-duration: .05s; }
.bouton.second { --ombre: var(--encre); color: var(--encre); background: var(--papier-clair); box-shadow: 0 4px 0 var(--ombre), inset 0 0 0 1.5px var(--encre); }
.bouton.second:hover { color: var(--encre); background: #fff; box-shadow: 0 6px 0 var(--ombre), inset 0 0 0 1.5px var(--encre); }
.bouton.second:active { box-shadow: 0 0 0 var(--ombre), inset 0 0 0 1.5px var(--encre); }
.bouton.petit { padding: .7em 1em; font-size: .78rem; box-shadow: 0 3px 0 var(--ombre); }
.bouton.petit:hover { box-shadow: 0 5px 0 var(--ombre); }
.bouton.petit:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ombre); }
.bouton[href^="/download/"]::after { content: "↓"; font-size: 1.1em; line-height: .8; transition: transform .3s var(--ressort); }
.bouton[href^="/download/"]:hover::after { transform: translateY(3px); }

/* ---------------------------------------------------------------- header */
.entete { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1.5rem; padding: .7rem var(--gouttiere);
  transition: background-color .25s, box-shadow .25s; }
.entete.pose { background: var(--papier) var(--grain); box-shadow: 0 1px 0 var(--trait); }
.marque { display: inline-flex; align-items: center; gap: .55rem; font: 560 1.4rem/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1;
  letter-spacing: -.02em; color: var(--encre); text-decoration: none; }
.marque:hover { color: var(--encre); }
.marque img { display: block; transition: transform .5s var(--ressort); }
.marque:hover img { transform: rotate(-12deg) scale(1.08); }
.menu { display: flex; gap: clamp(1rem, 2vw, 1.8rem); margin-left: auto; font: 400 .8rem var(--mono); }
.menu a, .langue { color: var(--encre); text-decoration: none; padding: .3rem 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .3s var(--doux); }
.menu a:hover, .langue:hover { color: var(--encre); background-size: 100% 1px; }
.entete-fin { display: flex; align-items: center; gap: 1.1rem; }
.langue { font: 400 .8rem var(--mono); }

/* ---------------------------------------------------------------- the hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; column-gap: clamp(1rem, 3vw, 3rem);
  min-height: calc(100svh - 3.7rem); max-width: 104rem; margin: 0 auto; padding: clamp(.5rem, 2vh, 2rem) var(--gouttiere) 1.1rem; }
.hero-texte { align-self: center; padding-bottom: 2vh; position: relative; z-index: 6; }
.entree { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .9rem; margin: 0 0 .3rem; font: 400 .85rem/1.4 var(--mono); color: var(--encre-douce); }
.entree-mot { font: italic 480 1.45rem var(--serif); color: var(--encre); }
.hero h1 { font: 460 clamp(6.4rem, 17.4vw, 17.5rem)/.8 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.05em;
  margin: 0 0 .13em -.05em; color: var(--bleu); }
.definitions { margin: 0; padding: 0 0 0 1.6em; max-width: 31.5rem; font-size: 1.1em; line-height: 1.42; }
.definitions li { padding-left: .3em; margin: .6em 0; }
.definitions li::marker { font: 500 .78em var(--mono); color: var(--bleu); }
.definitions em { color: var(--bleu); }
.actions { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin: 1.8rem 0 1rem; }
.note { font: 400 .76rem/1.5 var(--mono); color: var(--encre-douce); margin: 0; }
.ciel { position: relative; min-height: 20rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-legende { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.4rem; padding-top: .75rem; border-top: 1px solid var(--encre);
  background: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 5rem) 0 0 / auto 7px no-repeat; }
.bascule { font: 500 .76rem var(--mono); color: var(--bleu); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.bascule:hover { text-decoration-thickness: 2px; }

/* a figure: the zone the swarm lands in, and what is drawn crisp over it (site.js) */
.figure { position: absolute; inset: 0; pointer-events: none; }
.zone { position: absolute; inset: 11% 7% 13% 9%; }
.ciel .zone { inset: 0; margin: auto; width: min(84%, 62svh * 1.28); height: auto; aspect-ratio: 1.28; }
.deco { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.deco.montre { opacity: 1; transition: opacity .7s .45s; }
.deco svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.deco line, .deco polyline, .deco polygon, .deco rect { vector-effect: non-scaling-stroke; fill: none; stroke: var(--encre); stroke-width: 1; }
.deco .tirets { stroke-dasharray: 4 4; stroke: var(--encre-douce); }
.deco .bande { stroke: none; fill: var(--encre); opacity: .07; }
.deco .enveloppe { stroke-width: 1.5; fill-opacity: .08; stroke-linejoin: round; }
.deco .moyenne { stroke-width: 2.5; stroke-linecap: round; opacity: .85; }
.deco .s0 { stroke: var(--c0); fill: var(--c0); } .deco .s1 { stroke: var(--c1); fill: var(--c1); } .deco .s2 { stroke: var(--c2); fill: var(--c2); }
.deco .s3 { stroke: var(--c3); fill: var(--c3); } .deco .s5 { stroke: var(--c5); fill: var(--c5); }
.grad { position: absolute; font: 400 .66rem/1 var(--mono); color: var(--encre-douce); white-space: nowrap; }
.grad.x { transform: translate(-50%, .55rem); }
.grad.y { transform: translate(calc(-100% - .5rem), 50%); }
.grad.titre { color: var(--encre); font-weight: 500; }
.grad.fin-x { transform: translate(-100%, -1.1rem); }
.grad.haut-y { transform: translate(.5rem, 0); }
.grad.centre { transform: translate(-50%, 1.9rem); }
.grad.note-haut { transform: translate(.45rem, 0); }
.grad.groupe { transform: translate(-50%, 0); font-weight: 500; font-size: .7rem; }
.grad.g0 { color: var(--c0); } .grad.g1 { color: var(--c1); } .grad.g2 { color: var(--c2); } .grad.g3 { color: #b97a1c; }

/* ---------------------------------------------------------------- a section */
.bloc { position: relative; padding: clamp(4.2rem, 12vh, 8.5rem) 0 clamp(4rem, 11vh, 8rem); }
.cadre { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
/* the rule that opens a section: an axis, with its ticks; it draws itself when the section comes */
.axe { position: absolute; top: 0; left: var(--gouttiere); right: var(--gouttiere); height: 7px; border-top: 1px solid var(--encre);
  background: repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 5rem); }
.js .axe { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--doux); }
.js .vu > .axe { clip-path: inset(0 0 0 0); }
.bloc-tete { max-width: 62rem; margin-bottom: clamp(2.2rem, 6vh, 4.2rem); }
.surtitre { display: flex; align-items: baseline; gap: 1rem; margin: 0 0 1.4rem; font: 500 .76rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
.surtitre span { color: var(--bleu); letter-spacing: .04em; }
.chapeau { font-size: 1.2em; line-height: 1.42; max-width: 42rem; margin: 0; }
.legende { font: 400 .75rem/1.6 var(--mono); color: var(--encre-douce); margin: 0; }
.fig { font-weight: 500; color: var(--encre); text-transform: uppercase; letter-spacing: .08em; margin-right: .45em; }
.cles { display: inline-flex; flex-wrap: wrap; gap: .1rem .95rem; margin-left: .3rem; vertical-align: baseline; }
.cle { display: inline-flex; align-items: center; gap: .38rem; white-space: nowrap; color: var(--encre); }
.cle i { width: .62rem; height: .62rem; border-radius: 50%; }
.cle:empty { display: none; }
.c0 { background: var(--c0); } .c1 { background: var(--c1); } .c2 { background: var(--c2); } .c3 { background: var(--c3); }
.c4 { background: var(--c4); } .c5 { background: var(--c5); } .c6 { background: var(--c6); }

/* ---------------------------------------------------------------- 1. the application */
.app-texte .chapeau { margin-bottom: .9em; }
.app-grille { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 16fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.marges { list-style: none; margin: 2.2rem 0 0; padding: 0; border-top: 1px solid var(--trait); }
.marges li { position: relative; padding: .75rem 0 .75rem 1.7rem; border-bottom: 1px solid var(--trait); font: 400 .78rem/1.55 var(--mono); color: var(--encre-douce); }
.marges li::before { content: "+"; position: absolute; left: .25rem; color: var(--bleu); font-weight: 500; }
.fenetre { margin: 0; perspective: 90rem; }
.fenetre-cadre { position: relative; border: 1px solid var(--encre); border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 12px 14px 0 var(--papier-fonce);
  transition: transform .5s var(--doux); will-change: transform; }
.fenetre-cadre img { display: block; width: 100%; height: auto; }
.fenetre-cadre .sombre { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path .9s var(--doux); }
.fenetre.nuit .sombre { clip-path: inset(0 0 0 0); }
.fenetre .legende { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-top: 1.5rem; }
.interrupteur { flex: none; display: inline-flex; align-items: center; gap: .6rem; padding: .2rem; border: 0; background: none; cursor: pointer;
  font: 500 .72rem var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--encre); }
.interrupteur i { position: relative; width: 2.8rem; height: 1.5rem; border: 1.5px solid var(--encre); border-radius: 1rem; background: var(--papier-clair); transition: background-color .35s; }
.interrupteur i::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 7px); aspect-ratio: 1; border-radius: 50%; background: var(--c3);
  transition: transform .5s var(--ressort), background-color .35s; }
.interrupteur[aria-pressed="true"] i { background: var(--nuit); }
.interrupteur[aria-pressed="true"] i::after { transform: translateX(1.3rem); background: var(--ciel); }

/* ---------------------------------------------------------------- 2. the tour */
.tour-grille { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 9fr); gap: clamp(2rem, 5vw, 5.5rem); align-items: start; }
/* the plate stays in the middle of the window, under the header, while the steps scroll by */
.tour-figure { --hauteur: clamp(22rem, 100svh - 7rem, 41rem); position: sticky; top: calc((100svh + 3.7rem - var(--hauteur)) / 2); height: var(--hauteur); }
.planche { position: relative; height: 100%; border: 1px solid var(--encre); border-radius: 6px; background-color: var(--papier-clair);
  background-image: linear-gradient(var(--trait-fin) 1px, transparent 1px), linear-gradient(90deg, var(--trait-fin) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem; box-shadow: 12px 14px 0 var(--papier-fonce); }
.planche-nom { position: absolute; top: .9rem; left: 1.1rem; margin: 0; font: 500 .7rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce); }
html:not(.js) .tour-grille { display: block; }  /* without the script, no swarm: the steps alone */
html:not(.js) .tour-figure, html:not(.js) .ciel-fin { display: none; }
.etapes { list-style: none; margin: 0; padding: 0; }
.etape { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 0; }
.js .etape { min-height: 84svh; opacity: .25; transition: opacity .5s; }
.js .etape.active { opacity: 1; }
.etape-nom { display: flex; gap: .9rem; margin: 0 0 1rem; font: 500 .76rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bleu); }
.etape-nom span { color: var(--encre-douce); }
.etape h3 { font-size: clamp(1.7rem, 2.7vw, 2.6rem); font-weight: 440; line-height: 1.06; letter-spacing: -.022em; }
.etape .legende { margin: .5rem 0 1.2rem; padding-left: .95rem; border-left: 2px solid var(--encre); }
.etape-liens { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: 0; font: 500 .8rem var(--mono); }
.etape-liens a::after { content: " ›"; }
.aussi { max-width: 47rem; margin: clamp(2rem, 6vh, 4rem) 0 0; padding-top: 1.3rem; border-top: 1px solid var(--trait); }

/* ---------------------------------------------------------------- 3. Which analysis? */
.choisir-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.questionnaire fieldset { min-width: 0; margin: 0 0 1.7rem; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--encre); }
.questionnaire legend { float: left; width: 100%; display: flex; gap: .8rem; padding: 0; margin-bottom: .95rem; font: 500 .76rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.questionnaire legend span { color: var(--bleu); }
.choix { clear: both; display: flex; flex-wrap: wrap; gap: .55rem; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.choix label > span { display: block; padding: .5em .85em .55em; border: 1px solid rgba(22, 35, 63, .4); border-radius: 4px; background: var(--papier-clair); font-size: .95rem; line-height: 1.25;
  box-shadow: 0 2px 0 rgba(22, 35, 63, .25); transition: transform .18s var(--ressort), background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.choix label:hover > span { transform: translateY(-2px); border-color: var(--encre); box-shadow: 0 4px 0 rgba(22, 35, 63, .25); }
.choix input:checked + span { background: var(--encre); border-color: var(--encre); color: var(--papier-clair); box-shadow: 0 2px 0 #000; transform: none; }
.choix input:focus-visible + span { outline: 2px solid var(--bleu-vif); outline-offset: 2px; }
.choix small { display: block; margin-top: .2rem; font: 400 .68rem/1.35 var(--mono); opacity: .72; }
.choix .vide { font: 400 .78rem var(--mono); color: var(--encre-douce); margin: 0; }
.ordonnance { position: sticky; top: 5.5rem; min-height: 17rem; padding: 1.6rem 1.7rem 1.4rem; border: 1px solid var(--encre); border-radius: 4px; background: #fffdf8;
  box-shadow: 10px 12px 0 var(--papier-fonce); transform: rotate(-.5deg); }
.ordonnance.change { animation: tampon .5s var(--ressort); }
@keyframes tampon { from { transform: rotate(-1.6deg) scale(.965); } to { transform: rotate(-.5deg) scale(1); } }
.ordonnance .attente { font: 400 .82rem/1.6 var(--mono); color: var(--encre-douce); margin: 3.5rem 0; max-width: 22rem; }
.tampon { display: inline-block; margin: 0 0 1.1rem; padding: .4em .65em; border: 1.5px solid var(--c1); border-radius: 3px; color: var(--c1); transform: rotate(-2.5deg);
  font: 500 .66rem var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.ordonnance h3 { font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 480; line-height: 1.1; margin: 0 0 1rem; }
.ordonnance p { font-size: .93rem; line-height: 1.5; margin: 0 0 .75em; }
.ordonnance p b { font: 500 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-douce); display: block; margin-bottom: .15rem; }
.ordonnance .note-regle { padding-left: .8rem; border-left: 2px solid var(--c3); color: var(--encre-douce); }
.ordonnance h4 { font: 500 .68rem var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--encre-douce); margin: 1.3rem 0 .4rem; padding-top: .9rem; border-top: 1px dashed var(--trait); }
.ordonnance details { border-bottom: 1px solid var(--trait-fin); }
.ordonnance summary { cursor: pointer; padding: .4rem 0; font-size: .95rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.ordonnance summary::-webkit-details-marker { display: none; }
.ordonnance summary::after { content: "+"; font: 500 1rem var(--mono); color: var(--bleu); transition: transform .25s var(--ressort); }
.ordonnance details[open] summary::after { transform: rotate(45deg); }
.ordonnance details p { font-size: .86rem; color: var(--encre-douce); }
.ordonnance .conseil { margin: 1.1rem 0 0; font: 400 italic .72rem/1.5 var(--mono); color: var(--encre-douce); }
.apres { max-width: 44rem; margin: clamp(2rem, 6vh, 4rem) 0 0; padding-top: 1.3rem; border-top: 1px solid var(--trait); }

/* ---------------------------------------------------------------- 4. R, in the dark */
.nuit { background: var(--nuit); color: var(--lune); }
.nuit h2 em { color: var(--ciel); }
.nuit .surtitre { color: var(--lune-douce); }
.nuit .surtitre span { color: var(--ciel); }
.nuit code { background: var(--nuit-clair); }
.nuit a:hover { color: var(--ciel); }
.r-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.terminal { margin: 0; min-width: 0; }
.terminal-barre { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .95rem; border: 1px solid var(--nuit-trait); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--nuit-clair); font: 400 .7rem var(--mono); color: var(--lune-douce); }
.terminal-barre span:first-child { color: var(--lune); font-weight: 500; }
.terminal-corps { margin: 0; padding: 1rem .95rem 1.1rem; border: 1px solid var(--nuit-trait); border-radius: 0 0 6px 6px; background: #0a1124; color: #d5dbea;
  font: 400 .76rem/1.62 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.terminal-corps code { font: inherit; background: none; padding: 0; }
.terminal figcaption { max-width: 37rem; margin-top: 1.1rem; font-size: .93rem; line-height: 1.5; color: var(--lune-douce); }
.terminal figcaption b { color: var(--lune); font-weight: 540; }
.invite { color: var(--ciel); }
.sortie { display: block; margin-top: .3rem; color: #b8c1d9; white-space: pre; }
.js .sortie { opacity: 0; transform: translateY(.3rem); transition: opacity .45s, transform .45s var(--doux); }
.js .tape .sortie { opacity: 1; transform: none; }
.curseur { display: inline-block; width: .6em; height: 1.15em; margin-left: .1em; vertical-align: text-bottom; background: var(--ciel); animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.ligne { display: block; padding-left: 3.4em; text-indent: -3.4em; }
.num { display: inline-block; width: 2.4em; margin-right: 1em; text-align: right; text-indent: 0; color: #4e5c85; user-select: none; }
.coupe { margin: .25rem 0; }
.rc { color: #7f8cad; font-style: italic; } .rs { color: #ecb96f; } .rk { color: #8fc1ff; } .rn { color: #f2a3ad; } .ra { color: #8fc1ff; } .rf { color: #b6e2c4; }
.script .terminal-corps { font-size: .7rem; }
.r-corriger { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--nuit-trait); font-size: .93rem; line-height: 1.5; color: var(--lune-douce); }
.r-corriger b { color: var(--lune); font-weight: 540; }

/* ---------------------------------------------------------------- 5. the Methods sheet */
.pub-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.feuille { margin: 0; }
.feuille-papier { padding: clamp(1.4rem, 3.4vw, 3.1rem) clamp(1.3rem, 3.6vw, 3.4rem); border: 1px solid var(--trait); border-radius: 2px; background: #fffdf8;
  box-shadow: 10px 12px 0 var(--papier-fonce); transform: rotate(-.35deg); }
.feuille-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1rem; margin-bottom: 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid var(--encre); }
.feuille h3 { margin: 0; font-size: 1.25rem; }
.langues { display: inline-flex; border: 1px solid var(--encre); border-radius: 4px; overflow: hidden; }
.langues button { padding: .45em .85em; border: 0; background: none; color: var(--encre); font: 500 .7rem var(--mono); cursor: pointer; transition: background-color .15s, color .15s; }
.langues button[aria-pressed="true"] { background: var(--encre); color: var(--papier-clair); }
.feuille-texte p { font-size: .96rem; line-height: 1.62; margin: 0 0 .75em; hyphens: auto; }
.feuille-texte h4 { margin: 1.5rem 0 .55rem; font: 500 .7rem var(--mono); letter-spacing: .13em; text-transform: uppercase; }
.feuille-texte ul { list-style: none; margin: 0; padding: 0; font-size: .78rem; line-height: 1.45; color: var(--encre-douce); }
.feuille-texte li { margin-bottom: .4em; padding-left: 1.5em; text-indent: -1.5em; overflow-wrap: anywhere; }
.valeur { background: linear-gradient(var(--surligneur), var(--surligneur)) 0 94% / 100% .17em no-repeat; }
.js .valeur { background-size: 0 .17em; transition: background-size .7s var(--doux); }
.js .vu .valeur { background-size: 100% .17em; }
.feuille .legende { margin-top: 1.5rem; }
.pub-cote article + article { margin-top: 2.8rem; }
.pub-cote p { font-size: .98rem; }
.doc-demo { margin-top: 1.1rem; border: 1px solid var(--encre); border-radius: 4px; background: var(--papier-clair); box-shadow: 6px 7px 0 var(--papier-fonce); }
.doc-demo p { margin: 0; padding: .9rem 1.05rem 1rem; font-size: .93rem; line-height: 1.55; }
.doc-demo p + p { border-top: 1px dashed var(--encre); background: #fffdf8; border-radius: 0 0 4px 4px; }
.etiquette { display: block; margin-bottom: .4rem; font: 500 .64rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
.doc-demo code { padding: 0; background: none; font-size: .78rem; line-height: 1.6; overflow-wrap: anywhere; }
.doc-demo code b { font-weight: 500; color: var(--bleu); }
.doc-demo span b { font-weight: 600; background: linear-gradient(var(--surligneur), var(--surligneur)) 0 94% / 100% .17em no-repeat; }
.vignette { display: block; width: 100%; height: auto; margin-top: 1.1rem; border: 1px solid var(--encre); border-radius: 4px; box-shadow: 6px 7px 0 var(--papier-fonce); background: #fff; }

/* ---------------------------------------------------------------- 6. the files, in two bands */
.defile { overflow: hidden; padding-bottom: .6rem; }
.defile-nom { max-width: var(--largeur); margin: 1.7rem auto .7rem; padding: 0 var(--gouttiere); font: 500 .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-douce); }
.defile-piste { display: flex; width: max-content; animation: defile 70s linear infinite; }
.defile-piste.inverse { animation-direction: reverse; }
.defile-piste:hover { animation-play-state: paused; }
.defile-piste ul { display: flex; gap: .7rem; margin: 0; padding: 0 .35rem 6px; list-style: none; }
.defile-piste li { display: inline-flex; align-items: baseline; gap: .55rem; padding: .5em .95em .55em; border: 1px solid var(--encre); border-radius: 4px; background: var(--papier-clair);
  box-shadow: 0 3px 0 var(--papier-fonce); white-space: nowrap; font: 400 .76rem var(--mono); color: var(--encre-douce); }
.defile-piste li { transition: transform .3s var(--ressort), box-shadow .3s var(--ressort); }
.defile-piste li:hover { transform: translateY(-4px) rotate(-1.5deg); box-shadow: 0 7px 0 var(--papier-fonce); }
.defile-piste li b { font: 540 1.3rem/1.2 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.01em; color: var(--encre); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- 7. checked */
.registre { width: 100%; border-collapse: collapse; border-top: 1px solid var(--encre); }
.registre tr { border-bottom: 1px solid var(--trait); transition: background-color .2s; }
.registre tr:hover { background: rgba(255, 255, 255, .45); }
.registre th, .registre td { padding: 1.05rem 1.6rem 1.05rem 0; text-align: left; vertical-align: baseline; }
.registre th { width: 1%; white-space: nowrap; font: 500 .8rem var(--mono); color: var(--bleu); }
.registre td:nth-child(2) { font-weight: 520; width: 34%; }
.registre td:nth-child(3) { color: var(--encre-douce); font-size: .95em; }
.registre .coche { width: 1%; padding-right: .3rem; color: var(--c2); vertical-align: middle; }
.registre .coche svg { display: block; }
.js .registre .coche path { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .5s var(--doux); }
.js .vu .registre .coche path { stroke-dashoffset: 0; }
.registre-note { margin: 1.4rem 0 0; font-size: .95rem; color: var(--encre-douce); }
.prive { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem clamp(1.5rem, 4vw, 4rem); align-items: center; margin-top: clamp(3rem, 9vh, 6rem);
  padding: clamp(1.5rem, 4vw, 3.2rem); border: 1px solid var(--encre); border-radius: 6px; background: var(--papier-clair); box-shadow: 12px 14px 0 var(--papier-fonce); }
.prive h3 { margin: 0; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.04; letter-spacing: -.025em; }
.prive p { margin: 0; }

/* ---------------------------------------------------------------- 8. download */
.dl-tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem; align-items: center; }
.dl-tete .bloc-tete { margin-bottom: 0; }
.dl-tete .chapeau { font-size: 1.1em; }
.ciel-fin { position: relative; justify-self: center; width: min(100%, 20rem); aspect-ratio: 1; }
.ciel-fin .zone { inset: 4%; }
.avance { max-width: 41rem; margin: 1.2rem 0 0; padding: .15rem 0 .15rem 1rem; border-left: 3px solid var(--c3); font-size: .98rem; }
.dl-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2.6vw, 2.2rem); margin-top: clamp(2rem, 5vh, 3.2rem); }
.dl-carte { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.3rem, 3vw, 2.3rem); border: 1px solid var(--encre); border-radius: 6px; background: var(--papier-clair);
  box-shadow: 10px 12px 0 var(--papier-fonce); transition: box-shadow .3s; }
.dl-carte.ici { box-shadow: 10px 12px 0 var(--ciel); }
.dl-carte h3 { font-size: 1.6rem; font-weight: 480; }
.dl-carte .bouton { margin: .5rem 0 1.4rem; }
.dl-note { margin: auto 0 0; font: 400 .74rem/1.6 var(--mono); color: var(--encre-douce); }
.dl-liens { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; list-style: none; font: 500 .8rem var(--mono); }
.dl-liens a::after { content: " ›"; }
.dl-essayer { margin: 2rem 0 .6rem; }
.dl-citer { max-width: 50rem; margin: 0; font: 400 .74rem/1.6 var(--mono); color: var(--encre-douce); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer, and the 404 page */
.pied { padding: 3.6rem 0 3rem; background: var(--encre); color: var(--lune); font-size: .95rem; }
.pied a { color: inherit; }
.pied a:hover { color: var(--ciel); }
.pied-marque { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.4rem; font: 520 2.1rem/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.03em; }
.pied-liens { display: flex; flex-wrap: wrap; gap: .5rem 1.9rem; margin: 1.4rem 0 0; padding: 0; list-style: none; font: 400 .8rem var(--mono); }
.colophon { max-width: 47rem; margin: 2.2rem 0 0; font: 400 .72rem/1.65 var(--mono); color: var(--lune-douce); }
.perdu main { display: grid; place-content: center; justify-items: center; gap: .4rem; min-height: 100svh; padding: 2rem; text-align: center; }
.perdu h1 { font: 420 clamp(2.4rem, 7vw, 5rem)/1 var(--serif); font-variation-settings: "SOFT" 100, "WONK" 1; letter-spacing: -.03em; margin: 0 0 .3em; color: var(--bleu); }
.perdu .entree { justify-content: center; }
.perdu .entree-mot { font-size: 2rem; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 68rem) {
  .menu a:nth-child(-n+3) { display: none; }
}
@media (max-width: 54rem) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 0; }
  .hero-texte { padding: 1rem 0 0; }
  .ciel { height: 44svh; min-height: 17rem; margin: 0 calc(-1 * var(--gouttiere)); }
  .app-grille, .choisir-grille, .r-grille, .pub-grille, .dl-tete, .prive { grid-template-columns: minmax(0, 1fr); }
  .fenetre-cadre { box-shadow: 6px 8px 0 var(--papier-fonce); }
  .fenetre .legende { flex-direction: column; }
  /* the plate stays at the top, the steps pass under it */
  .tour-grille { display: block; }
  .tour-figure { --hauteur: max(45svh, 16rem); top: 3.2rem; z-index: 4; margin: 0 calc(-1 * var(--gouttiere)); padding: .5rem var(--gouttiere) .9rem; background: var(--papier) var(--grain); }
  .planche { box-shadow: 0 1px 0 var(--trait); }
  .js .etape { min-height: 58svh; justify-content: flex-start; padding-top: 2.6rem; }
  .ordonnance { position: static; }
  .registre, .registre tbody, .registre tr, .registre th, .registre td { display: block; width: auto; }
  .registre tr { position: relative; padding: .9rem 2rem .9rem 0; }
  .registre th, .registre td { padding: .1rem 0; white-space: normal; }
  .registre td:nth-child(2) { width: auto; }
  .registre .coche { position: absolute; top: 1rem; right: 0; width: auto; }
  .ciel-fin { order: -1; width: 11rem; justify-self: start; }
  .dl-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .menu { display: none; }
  .entete-fin { margin-left: auto; }
  .hero h1 { font-size: 31vw; }
}

/* ---------------------------------------------------------------- no motion, if asked */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  .defile-piste { width: auto; }
  .defile-piste ul { flex-wrap: wrap; padding: 0 var(--gouttiere); }
  .defile-piste ul + ul { display: none; }
}