/*
 * Habillage du site.
 *
 * Il emprunte la palette du terminal — les seize teintes de `Pal` — sans
 * imiter son rendu : une page web qui singerait un tube cathodique serait
 * illisible, et le terminal est déjà là pour ça. Ce site sert à envoyer
 * quelqu'un vers sa boutique, pas à faire une démonstration.
 *
 * Aucune police n'est chargée depuis un serveur tiers : la pile système
 * suffit, et une requête de moins est une dépendance de moins.
 */

:root {
    --nuit: #031233;
    --marine: #0a2a7a;
    --bleu: #1257c8;
    --cyan: #45e8da;
    --or: #ffc400;
    --brique: #e8410f;
    --prune: #8c0642;
    --blanc: #eafbfb;
    --ardoise: #41577a;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--nuit);
    color: var(--blanc);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.container {
    width: min(1040px, 100% - 2.5rem);
    margin-inline: auto;
}

a { color: var(--cyan); }

/* --------------------------------------------------------------- en-tete */

.site-header {
    border-bottom: 2px solid var(--marine);
    padding: 1rem 0;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.marque {
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.14em;
    color: var(--or);
    text-decoration: none;
}

.site-nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a { text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

/* **Le sélecteur de langue n'est pas une rubrique du site.** Aligné avec les
   trois autres liens, il se lirait comme une quatrième section — « Le
   terminal, À plusieurs, Obtenir, English ». Le cadre et la teinte le
   séparent de la navigation sans le mettre en avant : ce n'est pas un appel à
   l'action, c'est un aiguillage pour qui est arrivé dans la mauvaise langue. */
.site-nav__langue {
    padding: .1rem .55rem;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: var(--cyan);
    font-size: .9em;
}

/* ------------------------------------------------------------------ hero */

.hero {
    padding: 3.5rem 0 2.5rem;
    background: linear-gradient(180deg, var(--marine) 0%, var(--nuit) 100%);
}

.hero__eyebrow {
    margin: 0 0 .5rem;
    color: var(--cyan);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-size: .78rem;
}

.hero__titre {
    margin: 0 0 1.25rem;
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.1;
    color: var(--or);
}

.hero__texte { max-width: 62ch; margin: 0 0 1rem; }
.hero__appel { margin-top: 1.75rem; }

/* --------------------------------------------------------------- boutons */

.btn {
    display: inline-block;
    padding: .8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
}

.btn--primary { background: var(--brique); color: var(--blanc); }
.btn--primary:hover { background: #ff5a26; }

.btn--boutique { background: var(--bleu); color: var(--blanc); }
.btn--boutique:hover { background: #1a6ae8; }

/* -------------------------------------------------------------- sections */

.section { padding: 3rem 0; }
.section--sombre { background: #020c22; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--or); margin-top: 0; }
.section__intro { max-width: 62ch; }
.section__note { max-width: 62ch; color: var(--ardoise); font-size: .92rem; }

.grille {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.carte {
    background: var(--marine);
    border-radius: 6px;
    padding: 1.25rem 1.4rem;
}
.carte h3 { margin-top: 0; color: var(--cyan); }
.carte p { margin-bottom: 0; }

/* ------------------------------------------------------------------ jeux */

.jeux {
    display: grid;
    gap: 1.75rem;
    /* `min(320px, 100%)` plutot que `320px` : sur une dalle de 320 pixels, une
       piste au minimum de 320 deborde du conteneur, qui a des marges. Le
       `min()` fait plafonner la piste a la largeur disponible. */
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    margin-top: 2rem;
}

.jeu {
    background: var(--marine);
    border-radius: 6px;
    overflow: hidden;
}

/* **L'echelle entiere, comme dans l'application.**
   `image-rendering: pixelated` n'est pas un detail : deux paragraphes plus
   haut, la page promet des pixels francs, jamais lisses. Un navigateur qui
   interpole les captures dementirait la promesse sur la meme page. */
/* **La source est a l'echelle 1, et elle ne descend jamais.**
   Une capture livree a 960 pixels puis affichee a 270 est *reduite* au plus
   proche voisin : deux pixels sur trois disparaissent, et le petit texte de la
   barre d'etat devient illisible. Livree a 320, elle n'est plus qu'agrandie —
   ce qui, en pixel franc, ne perd rien. */
.jeu img {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 0 auto;
    image-rendering: pixelated;
    background: var(--nuit);
}

.jeu__texte { padding: 1.1rem 1.4rem 1.35rem; }
.jeu h3 { margin: 0 0 .5rem; color: var(--cyan); }
.jeu p { margin: 0; }

/* ------------------------------------------------------------- boutiques */

/*
 * La citation de presse.
 *
 * Un filet doré plutôt qu'un fond : la section qui suit est déjà sombre, et
 * deux aplats côte à côte auraient effacé la frontière entre la citation et
 * les boutons de boutique.
 */
.presse {
    margin: 0;
    max-width: 62ch;
    border-left: 4px solid var(--or);
    padding-left: 1.4rem;
}

.presse__citation { margin: 0; }

.presse__citation p {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 1.45rem);
    line-height: 1.45;
}

/* Le rendu anglais ne doit pas passer pour la citation elle-même. */
.presse__rendu {
    margin-top: .6rem !important;
    color: var(--ardoise);
    font-size: 1rem !important;
}

.presse__source {
    margin-top: 1rem;
    color: var(--ardoise);
    font-size: .95rem;
}

.presse__source strong { color: var(--blanc); }

.presse__appel { margin: 1.5rem 0 0; }

/* Un bouton en contour, et non le rouge de l'appel principal : « Obtenir
 * l'application » est juste en dessous, et deux boutons pleins l'un au-dessus
 * de l'autre se disputeraient le clic. Celui-ci mene ailleurs ; il doit se
 * voir sans gagner. */
.btn--presse {
    background: transparent;
    color: var(--or);
    box-shadow: inset 0 0 0 2px var(--or);
}

.btn--presse:hover { background: var(--or); color: var(--nuit); }

.boutiques {
    list-style: none;
    margin: 1.75rem 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.boutique {
    background: var(--marine);
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    align-items: flex-start;
}

/* La carte que le script met en avant. Sans JavaScript, aucune carte ne
   porte cette classe et la liste reste simplement une liste. */
.boutique--vedette { border-color: var(--or); }

.boutique__vedette {
    background: var(--or);
    color: var(--nuit);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 3px;
}

.boutique__plateforme { font-weight: 600; line-height: 1.35; }

.boutique--a-venir { opacity: .62; }

.boutique__attente {
    color: var(--ardoise);
    font-style: italic;
}

/* **RetroHub VR : une carte comme les autres, mais pas la même chose.**
   Marc, le 22 octobre 2026 : « fais-moi aussi un carré comme pour les autres »,
   « tu mets bientôt », et « pas aux couleurs du footer ».

   Elle garde donc le fond marine des autres cartes — c'est ce qui en fait un
   carré comme les autres — et **ne prend pas l'estompage** des plateformes en
   examen : ce n'est pas une fiche qui attend, c'est un autre logiciel.

   Le cyan ne sert ni au « votre appareil », qui est l'or, ni au fond, qui est
   le marine ; et il ne ressemble pas à l'ardoise du pied de page, qui est
   justement la teinte à éviter ici. La carte se lit donc comme autre chose,
   ce qu'elle est. */
.boutique--bientot { border-color: var(--cyan); }

/* Une seule carte dans la grille s'étirerait sur toute la largeur. */
.boutiques--seule { grid-template-columns: minmax(260px, 340px); }

/* **Le libelle prend le bouton des boutiques.** Marc, le 22 octobre 2026 :
   « "Bientot" dans le meme style de bouton que les stores ». C'est donc le
   meme `.btn.btn--boutique` que les trois liens d'a cote, et la carte se lit
   d'un coup d'oeil comme une quatrieme case.

   **Ce qu'il ne fait pas, c'est pretendre mener quelque part.** Il n'y a rien
   a telecharger : le survol ne s'eclaircit pas et le curseur reste une fleche,
   parce qu'un bouton qui s'allume sous la souris et ne fait rien se clique
   deux fois avant qu'on le croie. La page detaillee est dans la phrase
   dessous, en lien, ou elle a le droit d'etre cliquable. */
/* **La bande VR ne doit pas se confondre avec le pied de page.** Marc, le
   22 octobre 2026 : « le fond de toute la grande partie VR est retombe la meme
   couleur du footer ». C'etait exact : une `.section` ordinaire porte le fond
   `--nuit` du corps, et le pied de page aussi. Tant que la section vivait
   entre deux autres, personne ne le voyait ; derniere avant le pied, elle s'y
   fondait.

   Elle prend donc le fond sombre de la bande des boutiques, et **un filet
   marine la detache de celle-ci** — le meme filet, exactement, que le pied de
   page utilise pour se detacher d'elle. Trois bandes lisibles au lieu de deux
   collees. */
.section--vr { border-top: 2px solid var(--marine); }

.btn--bientot { cursor: default; }
.btn--bientot:hover { background: var(--bleu); }

/* ------------------------------------------------------------------ pied */

.site-footer {
    border-top: 2px solid var(--marine);
    padding: 2rem 0 2.5rem;
    color: var(--ardoise);
    font-size: .92rem;
}

.pied__liens { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 .75rem; }
.pied__apps { margin: 0 0 .75rem; }
.pied__apps-liste { display: inline-flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 0 .5rem; padding: 0; list-style: none; }
.pied__mention { margin: 0 0 .75rem; }
.pied__avis { max-width: 70ch; margin: 0; font-size: .85rem; }

/* --------------------------------------------------- page de texte suivi */
/*
 * La politique de confidentialité, et toute page qui serait surtout du texte.
 * Une mesure courte plutôt que la pleine largeur : au-delà d'une soixantaine
 * de caractères, l'œil perd sa ligne en revenant à gauche.
 */
.page-texte { padding: 3rem 0 4rem; }
.page-texte .container { max-width: 68ch; }
.page-texte h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--or); margin-bottom: .25rem; }
.page-texte h2 {
    font-size: clamp(1.15rem, 2.4vw, 1.4rem);
    color: var(--cyan);
    margin-top: 2.25rem;
    margin-bottom: .5rem;
}
.page-texte__date { color: var(--ardoise); font-size: .92rem; margin-top: 0; }

/* **La ligne qui porte le produit.** « Les annees 90 vivent ici » est la
   phrase de Marc, posee le 22 octobre 2026 ; elle ouvre la page sous le titre
   et la referme en signature. Deux classes plutot qu'une, parce que les deux
   endroits ne demandent pas la meme chose : l'ouverture se lit dans la foulee
   du titre, la fermeture a besoin d'un silence devant elle.

   **Le cyan, pas l'ardoise.** L'ardoise est la teinte du pied de page, et une
   phrase de vente qui l'emprunte se lit comme une mention legale. */
.page-texte__slogan {
    color: var(--cyan);
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
    letter-spacing: .03em;
    margin-top: 0;
    margin-bottom: 2rem;
}

/* **Le bouton de boutique dans une page de texte.** Pose le 24 octobre 2026,
   quand RetroHub VR est passe de « bientot » a « en vente » : la page se
   lisait jusqu'au bout sans jamais offrir de l'acheter.

   **Il vient apres le slogan, pas apres le texte.** Quelqu'un qui sait deja
   ce qu'il veut ne doit pas avoir a lire la page entiere pour trouver le
   lien, et celui qui veut lire descend sans etre gene -- le bouton tient sur
   une ligne.

   La marge du bas remplace celle du slogan, qui la perd quand le bouton le
   suit : deux blocs de 2rem l'un sur l'autre feraient un trou. */
.page-texte__action {
    margin-top: 0;
    margin-bottom: 2rem;
}
.page-texte__slogan + .page-texte__action { margin-top: -1.25rem; }
.page-texte__action .btn { display: inline-block; margin: 0 .75rem .75rem 0; }

/* Le mode d'emploi, a cote du bouton de la boutique. Marc, le 1er novembre
 * 2026 : « bien en evidence ». Un contour cyan plutot qu'un second bouton
 * plein : on le voit tout de suite, sans qu'il dispute le clic a l'achat. */
.btn--mode-emploi {
    background: transparent;
    color: var(--cyan);
    box-shadow: inset 0 0 0 2px var(--cyan);
}

.btn--mode-emploi:hover { background: var(--cyan); color: var(--nuit); }

.page-texte__signature {
    color: var(--cyan);
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    border-top: 2px solid var(--marine);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
}
/* **Un troisieme niveau, pose le 24 octobre 2026.** Le texte de RetroHub VR
   distingue « le mode classique » et « le mode immersion » sous un meme
   titre ; sans h3 ils se seraient lus comme deux sections de plus, au meme
   rang que « Une experience entierement autonome », et la page aurait perdu
   sa charpente.

   **En or, pas en cyan.** Le cyan porte les h2 et les deux phrases de vente ;
   l'etendre au troisieme niveau ferait trois rangs de la meme couleur et plus
   aucune hierarchie. L'or est la teinte du titre du site, deja dans la
   palette -- rien d'invente pour l'occasion. */
.page-texte h3 {
    font-size: clamp(1rem, 1.9vw, 1.12rem);
    color: var(--or);
    margin-top: 1.75rem;
    margin-bottom: .4rem;
}

/* ------------------------------------------- les pieces de RetroHub VR

   **Ce ne sont pas des captures de jeu, et le style le dit.** `.capture-jeu`
   force `image-rendering: pixelated` parce qu'une capture du terminal est
   livree en 320 de large et agrandie en pixel franc. Une vue de piece en 3D
   est livree en 1280 et reduite : la lisser est exactement ce qu'il faut, et
   la pixeliser lui ferait des escaliers partout.

   **Plus larges que le texte, delibérement.** Une colonne de lecture fait
   dans les 38rem ; une piece de salon dedans ne montre rien. Elles debordent
   jusqu'a 52rem et restent centrees. */
.page-texte__piece {
    display: block;
    width: 100%;
    max-width: 52rem;
    height: auto;
    margin: 1.75rem auto .5rem;
    border-radius: 6px;
    background: var(--nuit);
}

.page-texte__legende {
    max-width: 52rem;
    margin: 0 auto 2rem;
    color: var(--cyan);
    font-size: .92rem;
    text-align: center;
}

/* **La place de la video.** Un cadre fluide : l'iframe de YouTube se pose
   dedans et suit la largeur sans qu'on calcule de hauteur. Tant que l'adresse
   manque, rien ne s'affiche -- voir le commentaire de la page.

   **16:9 par defaut, et une variante carree.** La video du lancement, mesuree
   le 24 octobre 2026 sur sa vignette, fait 720 x 720 : un carre. C'est un
   Short, mais un Short CARRE et non vertical -- et de toute facon l'embed
   classique le sert dans un lecteur ordinaire, rien sur le site ne dit d'ou
   il vient.

   **Un ratio qui ne colle pas se paie en bandes noires.** Ce carre dans un
   cadre 16:9 perdrait pres du quart de sa largeur de chaque cote. La variante
   se retire le jour ou la video devient panoramique, et c'est le seul geste a
   faire.

   La carree est aussi plus etroite : un carre de 52rem ferait un bloc plus
   haut qu'un ecran de portable. */
.page-texte__video {
    position: relative;
    width: 100%;
    max-width: 52rem;
    margin: 1.75rem auto 2rem;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    overflow: hidden;
    background: var(--nuit);
}
.page-texte__video--carre {
    aspect-ratio: 1 / 1;
    max-width: 34rem;
}

/* **Le cadre debout, pour un Short.** « Retrohub VR avec un ami » est tourne
   a la verticale : impose dans le cadre 16/9, il aurait rendu deux bandes
   noires plus larges que l'image. Et il est ETROIT a dessein -- 9/16 sur
   34rem ferait un bloc de soixante rem de haut, soit plus qu'un ecran de
   portable pour une video d'une minute. */
.page-texte__video--debout {
    aspect-ratio: 9 / 16;
    max-width: 22rem;
}

.page-texte__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* **L'editeur sous la signature.** « Une creation de Reseau Inter-Systeme »
   ferme la page de RetroHub VR. Plus petit et en blanc : c'est une mention,
   pas une seconde phrase de vente, et elle ne doit pas disputer le cyan a la
   ligne qui la precede. */
.page-texte__editeur {
    display: inline-block;
    margin-top: .4rem;
    color: var(--blanc);
    font-size: .92rem;
}

/* **La mention de parrainage.** Plus petite et en retrait, parce que ce n'est
   pas une phrase de vente -- mais presente et lisible, parce qu'un lien dont
   on tire quelque chose se declare. Pas d'italique : sur fond sombre il
   amincit le trait, et une mention qu'on ne lit pas ne vaut pas mieux qu'une
   mention absente. */
.page-texte__mention {
    font-size: .85rem;
    opacity: .75;
}

/* **La ligne de compatibilite.** Elle repond a une question precise -- « est-ce
   que ca marche sur MON casque ? » -- et doit se trouver sans lire le
   paragraphe. Encadree et legerement en retrait, elle se repere en balayant la
   page du regard, ce que fait quelqu'un qui cherche cette reponse-la. */
.page-texte__compat {
    border-left: 3px solid var(--cyan);
    padding: .1rem 0 .1rem .9rem;
    margin: 1.25rem 0 1.75rem;
}

.page-texte ul { padding-left: 1.2rem; }
.page-texte li { margin-bottom: .6rem; }
.page-texte a { color: var(--cyan); }

/* **Le tableau des touches d'un jeu.** Deux colonnes, la touche et ce qu'elle
   fait : une liste a puces melerait les deux dans la meme phrase, et c'est la
   colonne de gauche qu'on balaie du regard quand on cherche « comment on
   recule, deja ? ». */
.page-texte__touches {
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
}
.page-texte__touches td {
    padding: .35rem 1.2rem .35rem 0;
    vertical-align: top;
}
.page-texte__touches td:first-child {
    color: var(--or);
    white-space: nowrap;
}

/* **La dissociation est encadree, et c'est le fond de l'affaire.** La page
   « Histoire du projet » nomme le terminal d'origine -- la seule du site a le
   faire -- et ce bloc est la contrepartie de ce choix. Encadre, il se lit
   meme par quelqu'un qui balaie la page sans la lire, ce qui est exactement
   le lecteur qu'il faut atteindre.

   **Le marine, pas le brique.** La teinte d'alerte ferait passer un enonce de
   fait pour un avertissement juridique crispe ; le cadre suffit a l'isoler. */
.page-texte__dissociation {
    border: 2px solid var(--marine);
    border-left-width: 5px;
    padding: 1.2rem 1.4rem;
    margin: 1rem 0 0;
}
.page-texte__dissociation p { margin: 0 0 .9rem; }
.page-texte__dissociation p:last-child { margin-bottom: 0; }
.page-texte__dissociation strong { color: var(--or); }

/* ------------------------------------------- captures dans une page de texte

   **Meme regle que `.jeu img` : la source est a l'echelle 1.** Une capture
   livree en 1280 puis affichee a 640 est reduite au plus proche voisin, et le
   petit texte de la barre d'etat devient illisible. Livree a 320, elle n'est
   qu'agrandie -- ce qui, en pixel franc, ne perd rien. */
.page-texte .capture-jeu {
    display: block;
    width: 100%;
    max-width: 640px;
    height: auto;
    margin: 1.5rem auto;
    image-rendering: pixelated;
    background: var(--nuit);
    border-radius: 6px;
}

/* ------------------------------------------------ les instructions d'un jeu

   **Marc, le 30 octobre 2026** : *« des instructions moins austeres que
   Mordicus, capture du jeu, capture des elements -- le gorille rouge, eh bien
   pourquoi pas le montrer ? »*

   **Les images viennent du jeu, pas d'un dessinateur.** Elles sont rendues
   par `test/instructions_images_test.dart` du depot de l'application, avec le
   code meme qui peint l'ecran : la piece montree ici est celle qu'on croise
   en jouant, au pixel pres. D'ou `pixelated` partout -- un sprite de quinze
   points agrandi au lissage deviendrait une tache.

   **Une page plus large que le texte suivi.** Les 68ch de `.page-texte`
   conviennent a une politique ; une grille de pieces et trois appareils cote
   a cote y etoufferaient. Le texte courant, lui, garde sa mesure courte. */
.instructions { padding: 2.5rem 0 4rem; }
.instructions img { image-rendering: pixelated; }
.instructions h1 {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    color: var(--or);
    letter-spacing: .08em;
    margin: 0 0 .25rem;
}
.instructions h2 {
    font-size: clamp(1.2rem, 2.6vw, 1.5rem);
    color: var(--cyan);
    margin: 3rem 0 .75rem;
}
.instructions h3 { color: var(--or); font-size: 1.05rem; margin: 0 0 .3rem; }
.instructions p { max-width: 68ch; }
.instructions strong { color: var(--or); font-weight: 600; }

.instructions__surtitre {
    color: var(--ardoise);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .82rem;
    margin: 0;
}

/* **L'ouverture : le titre a gauche, le jeu a droite.** On voit a quoi ca
   ressemble avant d'avoir lu une ligne -- c'est ce qui manquait a la premiere
   page. Sous 760px, l'ecran passe sous le titre. */
.instructions__tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 2.5rem;
    align-items: center;
}
@media (max-width: 760px) {
    .instructions__tete { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* **Le resume en trois gestes, chacun avec sa piece.** Celui qui ne lira
   rien d'autre sait deja quoi faire. */
.instructions__resume {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: grid;
    gap: .7rem;
}
.instructions__resume li {
    display: flex;
    gap: .9rem;
    align-items: center;
}
.instructions__resume img {
    width: 40px;
    height: 40px;
    flex: none;
    background: #000;
    border-radius: 6px;
    padding: 4px;
    object-fit: contain;
}

/* **Le tube.** Un cadre sombre et arrondi, sans pretendre imiter le verre :
   l'image dit deja tout. */
.tube {
    margin: 0;
    background: #000;
    border: 10px solid #0d1a3a;
    border-radius: 18px;
    box-shadow: 0 0 0 2px var(--marine), 0 18px 40px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.tube img { display: block; width: 100%; height: auto; }

/* **La grille des pieces.** Une carte par objet : le sprite sur sa case
   noire, comme sur le plateau, son nom et ce qu'il fait en une phrase. */
.pieces {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
}
.piece {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(10, 42, 122, .35);
    border: 1px solid var(--marine);
    border-radius: 10px;
    padding: 1rem;
}
.piece img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    flex: none;
    background: #000;
    border-radius: 6px;
    padding: 6px;
    box-sizing: content-box;
}
.piece p { margin: 0; font-size: .94rem; line-height: 1.5; }
.piece--danger { border-color: var(--prune); background: rgba(140, 6, 66, .18); }

/* **Une section qui se montre : le texte et sa capture cote a cote.** La
   capture sert l'explication, elle ne la remplace pas. */
.illustree {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 2rem;
    align-items: start;
}
.illustree figure { margin: .4rem 0 0; }
.illustree figcaption,
.instructions figcaption {
    color: var(--ardoise);
    font-size: .88rem;
    margin-top: .5rem;
    text-align: center;
}
@media (max-width: 760px) {
    .illustree { grid-template-columns: 1fr; }
}

/* **Le boni en trois chiffres.** Ce sont trois nombres qu'on retient ; en
   prose ils se noyaient dans une phrase. */
.chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}
.chiffre {
    border: 1px solid var(--marine);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
}
.chiffre b {
    display: block;
    font-size: 2rem;
    color: var(--or);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.chiffre span { font-size: .9rem; color: var(--blanc); }

/* **Les commandes, appareil par appareil.** Le meme jeu se pilote au doigt,
   au clavier et a la telecommande, et les touches ne portent pas le meme nom
   d'un appareil a l'autre : un seul tableau aurait melange les trois. */
.appareils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.appareil {
    border: 1px solid var(--marine);
    border-radius: 10px;
    padding: 1.2rem 1.2rem .8rem;
    background: rgba(10, 42, 122, .25);
}
.appareil h3 { color: var(--cyan); font-size: 1.1rem; margin-bottom: .8rem; }
.appareil table { border-collapse: collapse; width: 100%; font-size: .94rem; }
.appareil td { padding: .4rem 0; vertical-align: top; border-top: 1px solid rgba(65, 87, 122, .4); }
.appareil td:first-child { padding-right: .8rem; width: 45%; }
.appareil .note { font-size: .85rem; color: var(--ardoise); margin: .7rem 0 0; }
.appareil__croix { display: block; width: 96px; height: auto; margin: 0 auto 1rem; }

/* **Une touche se dessine comme une touche.** L'oeil la trouve dans la
   colonne sans lire la phrase. */
kbd {
    display: inline-block;
    min-width: 1.7em;
    padding: .05em .45em;
    border: 1px solid var(--ardoise);
    border-bottom-width: 3px;
    border-radius: 5px;
    background: #0d1a3a;
    color: var(--or);
    font-family: inherit;
    font-size: .88em;
    text-align: center;
    line-height: 1.5;
    white-space: nowrap;
}

.instructions__astuce {
    border-left: 4px solid var(--or);
    background: rgba(255, 196, 0, .07);
    padding: .8rem 1.1rem;
    border-radius: 0 8px 8px 0;
    max-width: 68ch;
}

/* **Une manette en deux moitiés**, comme celle d'Onyx : elles se posent cote
   a cote dans la carte, comme elles se posent de part et d'autre du tube. */
.appareil__images {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0 0 1rem;
}
.appareil__images img { width: 56px; height: auto; }

/* **Une piece decoupee dans le plateau** n'est pas carree : elle garde ses
   proportions dans la case noire au lieu d'etre ecrasee a 60 sur 60. */
.piece img.piece__large { width: 84px; height: 60px; object-fit: contain; }

.appareil__images figure { margin: 0; }
.appareil__images figure img { width: auto; max-width: 100%; }

/* **Les quatre vertus**, chacune avec l'objet mure qui la represente. */
.instructions__vertus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .6rem 1rem;
}
.instructions__vertus span { display: flex; align-items: center; gap: .7rem; }
.instructions__vertus img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    background: #000;
    border-radius: 6px;
    padding: 4px;
}

/* **Quatre cartes se rangent deux par deux** plutot que trois et une seule. */
.pieces--quatre { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); }

/* **Les labyrinthes d'un meme monde, deux par deux.** Chacun dans son tube,
   et sous lui les objets qu'il cache : c'est ce qui les distingue autant que
   leur couleur. */
.mondes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}
@media (max-width: 760px) {
    .mondes { grid-template-columns: 1fr; }
}
.mondes figure { margin: 0; }

/* **Six murs se rangent trois par trois** : deux par deux, il en faudrait
   trois rangees, et la page ne parlerait plus que d'eux. */
.mondes--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {
    .mondes--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mondes figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem .6rem;
}
.mondes figcaption strong { color: var(--or); margin-right: .3rem; }
.mondes figcaption img {
    width: 28px;
    height: 28px;
    background: #000;
    border-radius: 4px;
    padding: 3px;
}

/* **Les pieces d'un jeu de chute, alignees par le bas** comme sur une
   etagere : leurs formes se comparent d'un coup d'oeil, ce qu'une grille de
   cartes carrees aurait ecrase. */
.formes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1.25rem 2rem;
    margin: 1rem 0 .5rem;
    padding: 1.25rem;
    background: #000;
    border-radius: 10px;
}
.formes figure { margin: 0; text-align: center; }
.formes figcaption { color: var(--ardoise); font-size: .85rem; margin-top: .4rem; }
.formes__groupe {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    padding-right: 2rem;
    border-right: 1px solid var(--marine);
}
.formes__groupe:last-child { border-right: 0; padding-right: 0; }