/* « Le Plan »: the booklet's adventure comic on a screen. Night blue and gold, Bangers titles, Lexend for reading,
   the crew's lines in comic bubbles (Shantell Sans); a phone first, then a tablet and a computer. */

/* The fonts are the site's own (construire.py gives them their hashed names): nothing is fetched elsewhere. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("lexend.ebfa227694c9.woff2") format("woff2"); }
@font-face { font-family: "Bangers"; font-style: normal; font-weight: 400; font-display: swap; src: url("bangers.04f54ff42ea2.woff2") format("woff2"); }
@font-face { font-family: "Shantell Sans"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("shantell-sans.5c733327fadf.woff2") format("woff2"); }
:root {
  --nuit: #141a2e;
  --or: #f2b631;
  --cyan: #1fb3c4;
  --fond: #f4f1ea;
  --point: rgba(20, 26, 46, .07);
  --carte: #ffffff;
  --encre: #141a2e;
  --doux: #4a5266;
  --bord: #141a2e;
  --ombre: #141a2e;
  --piste: #dcdfe8;
  --juste: #1a7a3e;
  --juste-fond: #e6f4ea;
  --faux: #b3261e;
  --faux-fond: #fdeceb;
  --ambre-fond: #fde7c8;
  --ambre-bord: #b86b00;
  --ambre-texte: #6b3d00;
  --menu-actif: #141a2e; --menu-actif-texte: #ffffff;
  --sangle: #232a40; --sangle-bord: #141a2e;
  --titre-couleur: #141a2e;
  --focus: #0b7d8a;
  --titre: "Bangers", "Impact", sans-serif;
  --texte: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bd: "Shantell Sans", "Comic Sans MS", cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0c1020; --point: rgba(242, 182, 49, .05); --carte: #161c30; --encre: #eef1f8; --doux: #aab3c7;
    --bord: #5b6890; --ombre: #000000; --piste: #2a3352; --juste: #5fd38c; --juste-fond: #13291c; --faux: #ff8a80;
    --faux-fond: #2e1517; --ambre-fond: #3d2c10; --ambre-bord: #e0a040; --ambre-texte: #ffdca8;
    --menu-actif: #f2b631; --menu-actif-texte: #141a2e; --sangle: #3b4668; --sangle-bord: #5b6890;
    --titre-couleur: #f2b631; --focus: #5fd9e6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #0c1020; --point: rgba(242, 182, 49, .05); --carte: #161c30; --encre: #eef1f8; --doux: #aab3c7;
  --bord: #5b6890; --ombre: #000000; --piste: #2a3352; --juste: #5fd38c; --juste-fond: #13291c; --faux: #ff8a80;
  --faux-fond: #2e1517; --ambre-fond: #3d2c10; --ambre-bord: #e0a040; --ambre-texte: #ffdca8;
  --menu-actif: #f2b631; --menu-actif-texte: #141a2e; --sangle: #3b4668; --sangle-bord: #5b6890;
  --titre-couleur: #f2b631; --focus: #5fd9e6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--texte); font-size: 17px; line-height: 1.45; color: var(--encre);
  background-color: var(--fond);
  background-image: radial-gradient(var(--point) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  min-height: 100vh; overflow-x: hidden;
}
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
input { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
[tabindex="-1"]:focus { outline: none; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ header: the course's name, who plays, the theme */
.barre { background: var(--nuit); border-bottom: 3px solid var(--or); color: #fff; }
.barre-dedans { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.marque { font-family: var(--titre); font-size: 30px; line-height: 1; letter-spacing: 1.5px; color: var(--or); text-transform: uppercase;
  text-shadow: 2px 2px 0 #000; }
.barre-droite { display: flex; align-items: center; gap: 8px; min-width: 0; }
.joueur-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 46vw; padding: 0 12px; border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; font-weight: 600; font-size: 15px; }
.joueur-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-btn .ic { width: 18px; height: 18px; }
.theme { position: relative; flex: none; }
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08);
  color: #fff; display: grid; place-items: center; padding: 0; }
.theme-btn svg, .theme-menu svg { width: 20px; height: 20px; }
.theme-menu { position: absolute; right: 0; top: 52px; z-index: 30; background: var(--carte); color: var(--encre); border: 2px solid var(--bord);
  border-radius: 12px; padding: 6px; min-width: 168px; display: grid; gap: 2px; box-shadow: 4px 4px 0 var(--ombre); }
.theme-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; border-radius: 8px; padding: 8px 10px; text-align: left; }
.theme-menu button[aria-checked="true"] { background: var(--menu-actif); color: var(--menu-actif-texte); font-weight: 600; }

main {
  max-width: 1120px; margin: 0 auto; display: grid; gap: 16px;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
main > section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
main > section.mission:not(.accueil-mission):not(.intro-epreuve):not(.bilan), main > section.ecran-bd.large, main > section.accueil { max-width: 1080px; }

/* ------------------------------------------------------------ shared pieces */
.titre { font-family: var(--titre); font-weight: 400; font-size: 36px; line-height: 1.05; letter-spacing: .8px; color: var(--titre-couleur); }
.carte { background: var(--carte); border: 2px solid var(--bord); border-radius: 14px; padding: 16px; box-shadow: 4px 4px 0 var(--ombre); display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.note { font-size: 15px; color: var(--doux); }
.titre-compte { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.etiquette { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }

/* The band at the top of a stage, as in the booklet: the room, and the skill in a pill */
.bande { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--nuit); color: #fff; border-radius: 10px; padding: 8px 12px;
  border: 2px solid #2a3356; }
.bande .piece { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.pastille { background: var(--cyan); color: var(--nuit); font-weight: 700; font-size: 13px; border-radius: 12px; padding: 2px 10px; }

/* Buttons: the one that goes on is gold and full; « Retour » and the like plain; a link-like one for what is rare */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 12px;
  border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font-weight: 600; font-size: 17px; box-shadow: 3px 3px 0 var(--ombre);
  touch-action: manipulation; text-align: center; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ombre); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.principal { background: var(--or); color: #141a2e; border-color: #141a2e; }
.btn.grand { font-family: var(--titre); font-weight: 400; font-size: 25px; letter-spacing: 1px; min-height: 60px; padding: 10px 22px; width: 100%; }
.btn.grand .ic { width: 26px; height: 26px; stroke-width: 2.6; }
.btn.lien { background: none; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; color: var(--doux); font-weight: 500; font-size: 16px; padding: 8px 4px; min-height: 44px; }
.btn.lien:active { transform: none; }
.attend { pointer-events: none; }        /* a button just appeared under a finger: no tap yet, and no flash */
.actions-fin { display: grid; gap: 10px; justify-items: stretch; }
.actions-fin .btn.lien { justify-self: center; }
.liens { display: flex; flex-wrap: wrap; gap: 10px; }
.liens .btn { flex: 1 1 200px; }
@media (min-width: 700px) {
  .actions-fin { justify-items: center; }
  .actions-fin > .btn.grand { width: auto; min-width: 340px; }
  .actions-fin > .liens { justify-content: center; width: 100%; }
}

/* A crew member speaking: the portrait, and a comic bubble whose tail points at it */
.replique { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.portrait { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center top; border: 3px solid var(--or);
  background: #fff; box-shadow: 2px 2px 0 var(--ombre); }
.replique .bulle { position: relative; background: #fff; color: #141414; border: 2.5px solid #141414; border-radius: 20px; padding: 9px 14px 11px;
  font-family: var(--bd); font-weight: 600; font-size: 17.5px; line-height: 1.3; min-width: 0; }
.replique .bulle::before, .replique .bulle::after { content: ""; position: absolute; top: 50%; border-style: solid; border-color: transparent; }
.replique .bulle::before { left: -15px; margin-top: -9px; border-width: 9px 15px 9px 0; border-right-color: #141414; }
.replique .bulle::after { left: -10px; margin-top: -6px; border-width: 6px 10px 6px 0; border-right-color: #fff; }
.replique .qui { display: block; font-family: var(--texte); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #5c6375; }
.voix-minuit .portrait { border-color: #f2b631; background: #e9ecf3; }
.voix-minuit .bulle { background: #141a2e; color: #f6d27a; border-color: #f2b631; }
.voix-minuit .bulle::before { border-right-color: #f2b631; }
.voix-minuit .bulle::after { border-right-color: #141a2e; }
.voix-minuit .qui { color: #c8cfe2; }
.replique.gag { animation: secousse .45s; }
.replique.file .portrait { animation: file .7s .5s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes secousse { 0%, 100% { transform: none; } 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes file { to { transform: translateX(220px) rotate(14deg); opacity: 0; } }

/* ------------------------------------------------------------ dials */
.cadran { display: block; width: 100%; height: auto; font-family: var(--texte); }
.cadran .nombres, .cadran .dessous { pointer-events: none; }
.horloge-scene { justify-items: center; text-align: center; }
.horloge-scene .cadran { max-width: 250px; }
.horloge-scene figcaption { font-weight: 600; font-size: 15px; color: var(--doux); }
.horloge-scene.cachee .cadran { max-width: 56px; }
.horloge-scene.cachee { grid-template-columns: auto 1fr; text-align: left; align-items: center; padding: 10px 14px; }
.horloge-scene.revelee .cadran { max-width: 170px; animation: revele .5s ease-out; }
@keyframes revele { from { opacity: 0; transform: scale(.85); } }
.cadran.mini { width: 48px; height: 48px; flex: none; }
.deux-horloges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.deux-horloges figure { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.deux-horloges .cadran { max-width: 200px; }
.deux-horloges figcaption { display: grid; font-size: 15px; font-weight: 600; color: var(--doux); }
.deux-horloges figcaption b { color: var(--encre); }
.deux-horloges.petit .cadran { max-width: 150px; }
.deux-horloges .sienne figcaption b { color: var(--faux); }
.deux-horloges .bonne figcaption b { color: var(--juste); }
/* A panel's clock, cropped around it, above the question that reads it */
.case-horloge { width: 100%; max-width: 420px; overflow: hidden; border-radius: 8px; background: #0b0e18; }
@media (max-width: 699px) { .case-horloge { max-width: clamp(220px, calc((100svh - 430px) * 1.3), 420px); } }
.case-horloge img { width: 100%; height: auto; }

/* The crew's watch the pupil sets */
.montre-carte { justify-items: center; padding: 14px 10px; }
.montre-jouable { display: grid; justify-items: center; gap: 10px; width: 100%; }
.montre-scene { position: relative; width: 100%; max-width: 300px; }
.montre-jouable .cadran { touch-action: none; user-select: none; -webkit-user-select: none; }
.montre-jouable .curseur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.montre-jouable[class*="au-clavier"] .lunette { stroke: var(--focus); stroke-width: 6; }      /* the keyboard's focus on the bezel */
/* The grips of both hands, unstroked at rest (the hour hand's too: stage 1 is about it); outlined when held */
.prise { fill: rgba(242, 182, 49, .32); stroke: none; cursor: grab; }
.prise-heure { fill: rgba(210, 84, 31, .22); }
.au-clavier-minute .prise-minute, .au-clavier-heure .prise-heure, .glisse-minute .prise-minute, .glisse-heure .prise-heure { fill: rgba(31, 179, 196, .35); stroke: #0b7d8a; stroke-width: 2; }
.halo { fill: none; stroke: #f2b631; stroke-width: 3; opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.avec-indices:not(.a-glisse) .halo { animation: pouls 1.5s ease-out infinite; }
@keyframes pouls { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(2.3); opacity: 0; } }
.doigt { pointer-events: none; filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, .35)); }
.a-glisse .doigt { opacity: 0; transition: opacity .3s; }
.indice-ligne { max-width: 320px; text-align: center; font-weight: 600; font-size: 15.5px; padding: 6px 12px; border-radius: 10px;
  border: 2px dashed var(--cyan); background: rgba(31, 179, 196, .12); }
.figee .cadran { pointer-events: none; }
.moitie { display: flex; gap: 10px; scroll-margin-bottom: 110px; }      /* clear of the sticky « Lancer le plan » */
.moitie button { min-height: 48px; min-width: 126px; padding: 6px 14px; border-radius: 24px; border: 2px solid var(--bord); background: var(--carte); font-weight: 700; }
.moitie button[aria-checked="true"] { background: var(--nuit); color: #f6d27a; border-color: var(--or); }
.choisir-moitie { color: var(--faux); font-weight: 700; text-align: center; }
.btn.lancer { margin-top: 2px; }

/* ------------------------------------------------------------ the keypad */
.saisie { display: grid; gap: 14px; }
.boites { display: flex; align-items: center; justify-content: center; gap: 8px; }
.boite { position: relative; width: 80px; height: 66px; border-radius: 12px; border: 2.5px solid var(--bord); background: var(--carte); color: var(--encre);
  font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0; }
.boite.active { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(31, 179, 196, .3); }
.boite.active::after { content: ""; position: absolute; right: 14px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--cyan); animation: curseur 1s steps(1) infinite; }
.boite.active:not(.vide)::after { right: 8px; }
@keyframes curseur { 50% { opacity: 0; } }
.unite { font-size: 28px; font-weight: 700; color: var(--doux); }
.boites [data-champ="n"] { width: 110px; }
.pave { display: grid; gap: 16px; }
.doute:empty { display: none; }
.doute { display: grid; gap: 8px; }
.doute p { margin: 0; text-align: center; font-weight: 700; }
.chiffres { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.touche { min-height: 54px; border-radius: 12px; border: 2px solid var(--bord); background: var(--carte); color: var(--encre); font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums; touch-action: manipulation; box-shadow: 2px 2px 0 var(--ombre); }
.touche:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ombre); }
.commandes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.touche.effacer, .touche.valider { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; min-height: 56px; }
.touche.effacer { background: var(--ambre-fond); border-color: var(--ambre-bord); color: var(--ambre-texte); }
.touche.effacer .ic { width: 26px; height: 26px; }
.touche.valider { background: var(--or); color: #141a2e; border-color: #141a2e; }
.touche:disabled { opacity: .4; cursor: default; transform: none; }
.figee .touche, .figee .boite { pointer-events: none; }
.question { font-weight: 700; font-size: 18px; text-align: center; }
.je-ne-sais-pas { justify-self: center; }

/* ------------------------------------------------------------ a mission */
.mission { align-content: start; }
.progression { display: grid; gap: 6px; }
.progression .ou { font-size: 14px; font-weight: 600; color: var(--doux); }
.segments { display: flex; gap: 8px; }
.segments .groupe { display: flex; gap: 3px; flex: 1 1 0; }
.segments .groupe.actions { flex-grow: 1.6; }
.segments i { flex: 1; height: 8px; border-radius: 4px; background: var(--piste); box-shadow: inset 0 0 0 1px var(--bord); }
.segments i.fait { background: var(--or); box-shadow: none; }
.segments i.ici { background: var(--cyan); box-shadow: none; }
.segments .epreuve i.fait { background: #b3123a; }
.jeu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.cote-scene, .scene, .reponse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.reponse { align-content: start; }
@media (min-width: 900px) {
  .jeu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .horloge-scene .cadran { max-width: 300px; }
}
.retour { gap: 10px; }
.retour.juste { border-left: 8px solid var(--juste); }
.retour.faux { border-left: 8px solid var(--faux); }
.retour .bien { font-weight: 700; font-size: 18px; color: var(--juste); }
.retour .ecart { font-weight: 700; font-size: 19px; color: var(--faux); }
.retour .aide { font-size: 16px; color: var(--encre); }
.tampon { justify-self: center; font-family: var(--titre); font-size: 24px; letter-spacing: 1.5px; color: var(--juste); border: 3px solid var(--juste);
  border-radius: 8px; padding: 0 12px; transform: rotate(-6deg); animation: tampon .45s .25s both; }
@keyframes tampon { from { transform: scale(1.9) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-6deg); opacity: 1; } }
/* The rule, as the booklet's yellow caption box */
.regle { align-items: center; justify-items: center; background: #fff1bf; color: #141414; border: 2px solid #141414; border-radius: 4px;
  box-shadow: 3px 3px 0 #141414; }
.regle > div { justify-self: stretch; }
.regle .cadran { max-width: 200px; }
@media (min-width: 560px) { .regle { grid-template-columns: 1fr 170px; } }
@media (min-width: 900px) { .regle { grid-template-columns: 1fr 220px; } .regle .cadran { max-width: 220px; } }
.regle h2 { font-size: 17px; margin-bottom: 4px; }
.debraye { display: block; border-color: var(--or); }
.etapes-mission { display: flex; gap: 8px; flex-wrap: wrap; }
.etapes-mission li { flex: 1 1 140px; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 2px dashed var(--bord); }
.etapes-mission b { font-family: var(--titre); font-weight: 400; font-size: 21px; letter-spacing: .5px; }
.etapes-mission span { font-size: 14px; color: var(--doux); }
.nuit { background: var(--nuit); color: #eef1f8; border-color: var(--or); }
.nuit .titre { color: var(--or); }
.en-epreuve .bande { border-color: #b3123a; }
.bilan .gains { display: grid; gap: 14px; }
@media (min-width: 700px) { .bilan .gains { grid-template-columns: 1fr 1fr; } }
.ligne-plan, .indice { position: relative; }
.nouvelle { animation: arrive .6s ease-out both; }
.gains .indice.nouvelle { animation-delay: .25s; }
@keyframes arrive { from { opacity: 0; transform: translateY(16px); } }
.rappel { font-size: 15px; color: var(--doux); border-left: 4px solid var(--cyan); padding: 4px 0 4px 12px; }
.fautes { display: grid; gap: 12px; }
.ligne { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.ligne p { display: grid; }
.ligne b { font-size: 17px; }
.ligne span { font-size: 15px; }

/* ------------------------------------------------------------ the comic */
.tete-bd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.tete-bd .bande { flex: 1 1 360px; min-width: 0; }
.tete-bd .passer { flex: none; margin-left: auto; }
/* Phone: the guided view, a stage of fixed height on a dark cinema background, its buttons pinned under it */
.ecran-bd:not(.large) { gap: 10px; }
.bd-cases { display: grid; gap: 8px; }
.scene-bd { position: relative; overflow: hidden; height: min(520px, max(240px, calc(100svh - 250px))); border-radius: 10px;
  background: #0b0e18; touch-action: pan-y; cursor: pointer; user-select: none; -webkit-user-select: none; }
.plan-bd { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: transform .7s cubic-bezier(.45, 0, .2, 1); }
.scene-bd.sans-transition .plan-bd { transition: none; }
.plan-bd img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.voiles i { position: absolute; background: rgba(8, 10, 22, .6); border-radius: 18%; opacity: 0; transition: opacity .4s; pointer-events: none; }
.voiles i.eteinte { opacity: 1; }
.voiles i.opaque { background: rgba(8, 10, 22, .94); }
.bd-bas { position: sticky; bottom: 0; z-index: 4; display: grid; gap: 8px; padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px));
  background: var(--fond); }
.bd-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; }
.bd-nav .passer { justify-self: center; font-size: 14px; padding-inline: 2px; white-space: nowrap; }
.bd-nav .btn { white-space: nowrap; }
.bd-nav .btn:not(.lien) { min-width: 92px; padding-inline: 12px; }
.marques { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; }
.marques li { width: 7px; height: 7px; border-radius: 4px; background: var(--piste); box-shadow: inset 0 0 0 1px var(--bord); transition: width .25s; }
.marques li.lue { background: var(--doux); box-shadow: none; }
.marques li.courante { width: 18px; background: var(--or); box-shadow: none; }
.compteur { text-align: center; font-size: 14px; font-weight: 600; color: var(--doux); font-variant-numeric: tabular-nums; }
@media (max-width: 339px) {
  .bd-nav .btn:not(.lien) { min-width: 0; padding-inline: 12px; }
  .bd-nav .secondaire .mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
/* Tablet and computer: the page, its rows of panels with their gutters, on white paper in both themes, up to 1000 px */
.bd-planche { display: grid; gap: 16px; }
.planche-app { width: 100%; max-width: min(100%, 1000px); margin: 0 auto; display: grid; gap: 10px;
  padding: 10px; background: #fff; border-radius: 6px; box-shadow: 4px 4px 0 var(--ombre); }
.rangee { display: flex; gap: 10px; min-width: 0; }
/* the picture carries the booklet's own black frame: no second border */
.case-bd { flex-basis: 0; min-width: 0; overflow: hidden; background: #fff; }
.case-bd img { width: 100%; height: auto; }
.case-bd.apparait { animation: case-entre .6s var(--delai, 0s) ease-out both; }
.case-bd.apparait img { animation: camera 2.2s var(--delai, 0s) ease-out both; }
@keyframes case-entre { from { opacity: 0; transform: translateY(14px); } }
@keyframes camera { from { transform: scale(1.06); } }
@media (min-width: 700px) {
  main > section.ecran-bd.large { max-width: 1040px; }
  .bd-planche .bd-actions { display: grid; justify-items: center; }      /* after the page: never over a panel */
}

/* ------------------------------------------------------------ home */
.accueil { gap: 18px; }
.affiche { position: relative; border-radius: 16px; overflow: hidden; border: 3px solid var(--nuit); box-shadow: 5px 5px 0 var(--ombre); background: var(--nuit); }
.affiche img { width: 100%; height: auto; }
.affiche figcaption { position: absolute; left: 0; right: 0; top: 0; padding: 18px 18px 40px; display: grid; gap: 8px;
  background: linear-gradient(rgba(10, 14, 30, .78), rgba(10, 14, 30, 0)); color: #fff; }
.titre-affiche { font-family: var(--titre); font-weight: 400; font-size: 64px; line-height: .9; letter-spacing: 2px; color: var(--or); text-transform: uppercase; text-shadow: 3px 3px 0 #000; }
.affiche figcaption p { max-width: 30ch; font-size: 15.5px; font-weight: 500; text-shadow: 0 1px 3px #000; }
.scanne { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
.scanne h2 { font-size: 19px; margin-bottom: 2px; }
.pastille-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--or); color: #141a2e; display: grid; place-items: center; border: 2px solid #141a2e; flex: none; }
.pastille-ic.grande { width: 60px; height: 60px; }
.pastille-ic.grande .ic { width: 30px; height: 30px; }
.sous-titre { font-family: var(--titre); font-weight: 400; font-size: 28px; letter-spacing: .8px; color: var(--titre-couleur); }
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tuiles li { display: grid; align-content: start; gap: 6px; padding: 6px 4px; }
.tuiles b { font-size: 16px; }
.tuiles li > span:last-child { font-size: 14.5px; color: var(--doux); line-height: 1.35; }
.papier { font-size: 15.5px; color: var(--doux); text-align: center; padding: 0 8px; }
.reprise { gap: 10px; }
@media (min-width: 760px) {
  .accueil { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .accueil > .affiche { grid-row: 1 / span 5; }
  .tuiles { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ who plays */
.qui-joue .carte { gap: 14px; }
.joueurs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.btn.joueur { justify-content: flex-start; }
.btn.joueur.actuel { border-color: var(--or); border-width: 3px; }
.initiale { width: 32px; height: 32px; border-radius: 50%; background: var(--nuit); color: var(--or); display: grid; place-items: center; font-family: var(--titre); font-size: 20px; flex: none; }
.nouveau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.nouveau label { font-weight: 700; }
.ligne-champ { display: flex; gap: 8px; }
.ligne-champ input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; border: 2px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre); font-size: 18px; }
.erreur-champ { color: var(--faux); font-weight: 600; min-height: 1em; }

/* ------------------------------------------------------------ the plan, the dossier */
.tableau { background: #10243f; color: #eaf6ff; border-color: #1fb3c4;
  background-image: linear-gradient(rgba(31, 179, 196, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 179, 196, .13) 1px, transparent 1px);
  background-size: 22px 22px; }
.tableau h2 { font-family: var(--titre); font-weight: 400; font-size: 24px; letter-spacing: .8px; color: var(--or); }
.lignes { display: grid; gap: 8px; }
.lignes li { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(31, 179, 196, .45); }
.lignes li.a-gagner { border-style: dashed; color: #9fb4c9; font-size: 15px; }
.lignes li { position: relative; }
.lignes .origine { position: absolute; right: 10px; top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9fd3ff; border: 1px solid rgba(159, 211, 255, .5); border-radius: 8px; padding: 0 6px; }
.lignes li:has(.origine) .ligne { padding-right: 76px; }
.ligne-plan .ligne b, .tableau .ligne b { color: inherit; }
.indices { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.indice { background: #efe2c6; color: #2b2214; border-color: #6b5530; }
.indice .etiquette { color: #7a5c2e; }
.indice h2 { font-family: var(--titre); font-weight: 400; font-size: 23px; letter-spacing: .5px; }
.indices .indice:nth-child(odd) { transform: rotate(-.8deg); }
.indices .indice:nth-child(even) { transform: rotate(.7deg); }
.a-trouver { display: grid; gap: 8px; }
.a-trouver ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.a-trouver li { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 2px dashed var(--bord); border-radius: 10px; color: var(--doux); }
.a-trouver li span { font-family: var(--titre); font-size: 30px; line-height: 1; }
.a-trouver li small { position: absolute; left: 6px; top: 3px; font-size: 12px; font-weight: 700; }

/* ------------------------------------------------------------ the test, the big job, the challenge, the trap */
.banniere { border: 3px solid #141414; border-radius: 10px; overflow: hidden; box-shadow: 4px 4px 0 var(--ombre); background: #0b0e18; }
.banniere img { width: 100%; height: auto; aspect-ratio: 2.4; object-fit: cover; object-position: 50% 40%; }
.consignes { padding-left: 34px; list-style: disc; }
.consignes li { padding-left: 2px; }
.depart { background: var(--nuit); color: #eef1f8; border-color: var(--or); justify-items: start; }
.depart .etiquette { color: #c8cfe2; }
.grand-numero { font-family: var(--titre); font-size: 58px; line-height: 1; color: var(--or); letter-spacing: 1px; padding-top: 10px; }
.depart h2 { font-family: var(--titre); font-weight: 400; font-size: 28px; letter-spacing: .6px; }
.histoire p { font-size: 16px; }
.finale { justify-items: center; text-align: center; padding: 24px 18px; }
.finale .cadran { max-width: 220px; }
.tourne { font-family: var(--titre); font-size: 30px; letter-spacing: 1px; color: var(--or); }
.chrono-barre { width: 100%; max-width: 260px; height: 10px; border-radius: 5px; background: var(--piste); overflow: hidden; }
.chrono-barre i { display: block; height: 100%; background: var(--cyan); transform-origin: left; animation: chrono 10s linear forwards; }
@keyframes chrono { to { transform: scaleX(0); } }
.fautes-defi { display: grid; gap: 8px; }
.fautes-defi li { display: flex; align-items: center; gap: 10px; }
.lien-piege { display: grid; gap: 8px; }
.lien-piege input { min-height: 48px; padding: 8px 10px; border: 2px solid var(--bord); border-radius: 10px; background: var(--carte); color: var(--encre); font-size: 15px; width: 100%; }
.lien-piege label { font-weight: 700; }
.sans-js { max-width: 760px; margin: 16px auto; padding: 0 16px; }
.btn.retour { justify-self: start; }

/* A phone: the clock and the keypad, or the watch and its button, on one screen with the crew's line above them */
@media (max-width: 699px) {
  main { gap: 12px; padding-top: 12px; }
  main > section { gap: 12px; }
  .marque { font-size: 26px; }
  .bande { padding: 6px 10px; }
  .bande .piece, .pastille { font-size: 12px; }
  .bande .piece { letter-spacing: .04em; }
  .progression { gap: 4px; }
  .progression .ou { font-size: 13px; }
  .replique { grid-template-columns: 52px 1fr; gap: 12px; }
  .portrait { width: 52px; height: 52px; }
  .replique .bulle { font-size: 16.5px; padding: 7px 12px 9px; }
  .titre { font-size: 32px; }
  .horloge-scene { padding: 10px; gap: 6px; }
  .horloge-scene .cadran { max-width: clamp(160px, calc(100svh - 570px), 210px); }      /* the clock and the keypad on one screen */
  .horloge-scene figcaption { font-size: 14px; }
  .horloge-scene.cachee { padding: 6px 12px; gap: 10px; }
  .horloge-scene.cachee .cadran { max-width: 44px; }
  .horloge-scene.cachee figcaption { font-size: 13.5px; line-height: 1.3; }
  .horloge-scene.revelee .cadran { max-width: 170px; }
  .deux-horloges:not(.petit) { grid-template-columns: minmax(0, 210px); justify-content: center; }      /* durations: one column, big */
  .deux-horloges:not(.petit) .cadran { max-width: 210px; }
  .montre-carte { padding: 10px 8px; }
  .montre-scene { max-width: clamp(200px, calc(100svh - 530px), 240px); }     /* the watch and its button on one screen */
  .indice-ligne { font-size: 14.5px; line-height: 1.3; padding: 4px 10px; }
  .bande { gap: 4px 8px; }        /* the room's name wraps rather than being cut */
  .saisie { gap: 10px; }
  .pave { gap: 12px; }
  .boite { width: 72px; height: 58px; font-size: 30px; }
  .touche { min-height: 50px; font-size: 24px; }
  .touche.effacer, .touche.valider { min-height: 52px; }
  .question { font-size: 16px; }
  .reponse { gap: 10px; }
  /* « Lancer le plan » stays in reach under the thumb while the watch is set */
  .btn.lancer { position: sticky; bottom: max(10px, env(safe-area-inset-bottom, 0px)); z-index: 5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* The watch's strap, lighter in the dark theme so that it shows; the dial's grips unstroked at rest */
.cadran .bracelet { fill: var(--sangle); stroke: var(--sangle-bord); stroke-width: 1.5; }
/* The intro's « Commencer la mission » in reach, the rehearsal's other actions in one row */
.accueil-mission .actions-fin { position: sticky; bottom: 0; z-index: 3; padding: 10px 0 max(10px, env(safe-area-inset-bottom, 0px)); background: var(--fond); }
.bilan .liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bilan .liens .btn { flex-direction: column; gap: 4px; padding: 8px 6px; font-size: 14px; min-height: 64px; }
.moitie.a-choisir button { border-color: var(--faux); box-shadow: 0 0 0 3px rgba(179, 38, 30, .25); }
.piege-rate { font-weight: 700; font-size: 18px; color: var(--faux); }
.bande-test { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bande-test li { display: grid; justify-items: center; gap: 2px; width: 52px; font-weight: 700; font-size: 14px; }
.bande-test .cadran { width: 44px; }
.bande-test .ok { color: var(--juste); }
.bande-test .non { color: var(--doux); }
.score-test { font-family: var(--titre); font-size: 30px; letter-spacing: 1px; text-align: center; }
details.histoire summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details.histoire li { padding: 4px 0; border-top: 1px solid var(--piste); font-size: 15px; }
/* « Qui joue ? » over the screen, from the header: the screen under it is kept */
.voile-joueur { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 22, .6); }
.voile-joueur .qui-joue { width: min(460px, 100%); }
.voile-joueur .carte { max-height: calc(100svh - 32px); overflow: auto; }
.extras { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.extras .btn { font-size: 15px; min-height: 48px; padding: 8px 10px; }