/* ============================================================================
   LE LABORATOIRE · interface B · ÉTAPE 6 : LE TUTORIEL
   ----------------------------------------------------------------------------
   Feuille de la page d'essai public/pupitre.html, chargée APRÈS pupitre/socle.css.
   Elle porte la mise en page soignée, et seulement elle, de :
     #ecran-tuto       le panneau du tutoriel : en veilleuse (.eteint) pendant
                       que le professeur parle, puis allumé sur le récapitulatif
                       illustré (#tuto-illustration, rempli par tutoriel.js)
     #tuto-continuer   « Continuer » (fabriqué par tutoriel.js) : sa place dans
                       la grille, à la place de la bulle du professeur, qui s'est tu
     #btn-quitter-tuto « Quitter le tutoriel » : une plaque basse, rangée dans
                       l'emplacement des bandeaux (.bandeaux, dont le reste est
                       à par-dessus.css)
   La question et les résultats du tutoriel sont ceux de la manche (étape 1), le
   bandeau de sa question compris (#bandeau-tutoriel vit dans #ecran-jeu :
   manche.css le dessine, avec les deux autres bandeaux de la question). Cette
   feuille n'y pose que SES pièces : « Continuer » et « Quitter le tutoriel ».
   Maquette : data/maquettes-2026-10-07/B-suite/tutoriel.html.
   Plan : docs/interface-b/plan-de-bascule.md, partie 3. Décisions : SPECS 2.12,
   « Étape 6 ».

   SOMMAIRE
     1. « Quitter le tutoriel »
     2. Pendant toute la leçon : ni bandeau de démonstration, ni voile « ailleurs »
     3. Le panneau : verre cerclé et riveté, allumé ou en veilleuse
     4. La veilleuse : « Écoutez le professeur »
     5. Le récapitulatif illustré : un visuel, trois points à retenir
     6. Les trois visuels : la foule, les vies, le trophée
     7. « Continuer »
     8. Téléphone couché
     9. Ordinateur
    10. Repli pour un navigateur ancien

   Règles (les mêmes pour toutes les feuilles, gardées par
   test/pupitre-feuilles.test.js) : ne retouche pas socle.css ; CHAQUE
   sélecteur s'accroche à une pièce de cette étape (#ecran-tuto, une pièce
   qu'il contient, #tuto-continuer, #btn-quitter-tuto, body.tuto-attente,
   body.en-tutoriel, ou body[data-ecran="tuto"] pour ce qui est hors de
   l'écran) : jamais de sélecteur nu (« .reponse { … } ») ni de réglage posé
   sur :root, qui changeraient les écrans des autres étapes sans que rien le
   dise (un réglage se redéfinit sur ton écran : #ecran-… { --taille-titre: … }) ;
   le nom d'une animation (@keyframes) commence par « tutoriel- » ; tout en
   « u », couleurs du thème ; pas de color-mix(), pas de :has(), pas de
   « inset: », pas de dvh hors de @supports ; aucune ressource en ligne.
   Mesurer : « npm run pupitre:mesurer » (mode d'emploi en tête de
   outils/mesurer-le-pupitre.mjs), sans retoucher l'outil : les états de cette
   étape sont dans outils/parcours-du-pupitre/tutoriel.mjs (« --ecrans=tutoriel »),
   et ce qui est voulu sur ses écrans se dit par la propriété « --mesure » dans
   cette feuille. Un écran ne se centre jamais par justify-content (socle.css,
   section 13, « Un écran CENTRÉ »). Monte le « ?v= » de cette feuille, sur sa
   ligne de pupitre.html, quand tu la modifies.

   Ce que la page dit à cette feuille, en plus du socle :
     #ecran-tuto.eteint      le professeur parle, l'illustration est vide (tutoriel.js)
     body.tuto-attente       « Continuer » est montré, la page attend le joueur (tutoriel.js)
     body.en-tutoriel        la leçon dure, ses questions et ses résultats compris
                             (pupitre.js, d'après « Quitter le tutoriel »)
     .tuto-vies.nombreuses   plus de quatre cœurs à dessiner (tutoriel-regles.js)
   ========================================================================== */


/* ============================================================================
   1. « QUITTER LE TUTORIEL »
   ----------------------------------------------------------------------------
   La sortie de la leçon, toujours au même endroit tant qu'elle dure : sous la
   barre du haut sur téléphone, dans le coin en haut à gauche sur ordinateur
   (l'emplacement des bandeaux). Une plaque de verre basse et plate, pas une
   touche : elle ne pèse pas, ne pousse pas l'écran, et n'est jamais posée sur
   un titre. Écrite en lettres courantes, comme le lien de la maquette, et non
   en capitales de plateau : c'est une sortie discrète, pas un appel.
   Sur téléphone : 44 px à toucher, texte de 16 px.
   ========================================================================== */
#btn-quitter-tuto {
  align-self: center;
  min-height: max(44px, calc(44 * var(--u)));
  padding: calc(4 * var(--u)) calc(20 * var(--u));
  border-radius: 999px;
  font-family: var(--police-texte); font-weight: 600; font-size: max(16px, calc(16 * var(--u)));
  letter-spacing: 0.01em; text-transform: none; line-height: 1.15; text-shadow: none;
  color: var(--metal-vif);
  /* (une touche de verre sur un pied court : la plaque du titre, juste au-dessus, a la même forme
     de pastille et ne se touche pas ; c'est le pied qui les distingue. Socle, section 5 bis) */
  --pied: calc(3 * var(--u)); --course: calc(2 * var(--u));
  box-shadow:
    inset 0 0 0 max(1.2px, calc(1.5 * var(--u))) var(--metal-clair),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    var(--socle-verre),
    0 calc(3 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5),
    inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.05);
}
#btn-quitter-tuto:hover { transform: none; filter: brightness(1.18); }
#btn-quitter-tuto:active { --pied: calc(1 * var(--u)); transform: translateY(var(--course)); filter: brightness(0.94); }


/* ============================================================================
   2. PENDANT TOUTE LA LEÇON
   ----------------------------------------------------------------------------
   Comme dans le jeu d'aujourd'hui : le bandeau de démonstration dirait « aucun
   lot n'est remis » à quelqu'un qui n'est pas dans la démonstration, et le
   voile « partie suivie ailleurs » couvrirait une leçon qui se lit sur
   n'importe quel appareil. Ils reviennent quand la leçon s'arrête.
   Depuis l'assemblage des étapes, la règle est écrite UNE fois, dans la feuille
   qui porte ces pièces (par-dessus.css, sections 1 et 2), avec le repère de
   cette étape : body.en-tutoriel.

   « TUTORIEL » UNE SEULE FOIS (assemblage des étapes). Sur téléphone debout,
   l'étiquette de la manche (« TUTORIEL, Difficulté ») est une bande posée
   juste au-dessus de l'écran, qui dit déjà le mot : en surtitre du panneau
   (« TUTORIEL »), ou dans le bandeau de la question (« TUTORIEL : partie de
   démonstration, rien n'est en jeu »), sous « Quitter le tutoriel ». Elle se
   tait donc pendant la leçon, et rend sa rangée à l'écran ; la règle d'une
   question spéciale se lit dans le bandeau de la question. Sur ordinateur et
   téléphone couché, où elle est rangée à côté des cadrans, elle reste (sauf
   quand la manche l'efface elle-même pour faire tenir un écran chargé :
   manche.css, palier « sans-etiquettes » ; et jamais hors de la partie, où le
   socle la cache).
   ========================================================================== */
body.en-tutoriel .pupitre > .etiquette-gauche { display: none; }
@media (orientation: landscape) and (max-height: 560px) {
  body.en-tutoriel[data-moment="partie"]:not([data-serre~="sans-etiquettes"]) .pupitre > .etiquette-gauche { display: flex; }
}
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  body.en-tutoriel[data-moment="partie"]:not([data-serre~="sans-etiquettes"]) .pupitre > .etiquette-gauche { display: flex; }
}


/* ============================================================================
   3. LE PANNEAU
   ----------------------------------------------------------------------------
   Le même verre cerclé et riveté que le panneau de la question, avec lequel il
   alterne pendant la leçon. Il ne défile pas (le cerclage défilerait avec son
   contenu) : c'est l'illustration, dedans, qui défilerait s'il le fallait.
   Ses deux pseudo-éléments portent le cerclage et les rivets (recopiés de
   .verre::before et de .rivete::after, socle section 5) ; ils ne servent donc
   plus à centrer le contenu, qui se centre par ses marges (section 5).
   ========================================================================== */
#ecran-tuto.scene {
  align-items: stretch; justify-content: flex-start;
  gap: calc(12 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u));
  overflow: hidden;
  /* (la dernière ombre est le voile de la veilleuse : transparent quand le panneau est allumé) */
  box-shadow: var(--verre-ombre), inset 0 0 0 calc(900 * var(--u)) rgba(3, 4, 7, 0);
  transition: box-shadow 0.35s ease;
}
/* le cerclage : un dégradé de métal, découpé en anneau */
#ecran-tuto::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; border-radius: inherit; pointer-events: none;
  padding: max(1.5px, calc(2 * var(--u)));
  background: var(--cerclage-metal);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  transition: opacity 0.35s ease;
}
/* quatre rivets aux coins */
#ecran-tuto::after {
  content: ''; position: absolute; top: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); left: calc(8 * var(--u));
  margin: 0; pointer-events: none;
  --tutoriel-rivet: radial-gradient(circle at 38% 34%, var(--metal-vif) 0 16%, var(--metal-clair) 32%, var(--metal-creux) 60%, rgba(0, 0, 0, 0.85) 70%, transparent 74%);
  background: var(--tutoriel-rivet) left top, var(--tutoriel-rivet) right top, var(--tutoriel-rivet) left bottom, var(--tutoriel-rivet) right bottom;
  background-size: calc(8 * var(--u)) calc(8 * var(--u)); background-repeat: no-repeat;
  opacity: 0.9;
  transition: opacity 0.35s ease;
}
/* le surtitre reste en tête du panneau */
#ecran-tuto > .tuto-surtitre { flex: none; transition: opacity 0.35s ease; }


/* ============================================================================
   4. LA VEILLEUSE
   ----------------------------------------------------------------------------
   Le professeur parle : rien d'autre à lire. L'écran « éteint » de l'ancien
   plateau était une idée de télé ; ici le panneau reste à sa place et se met
   en veilleuse : le verre s'assombrit, le laiton se ternit, et une bulle où
   trois points battent dit d'écouter. tutoriel.js vide l'illustration avant
   de poser .eteint : c'est elle qui porte ce signe.
   ========================================================================== */
#ecran-tuto.eteint {
  opacity: 1;
  box-shadow: var(--verre-ombre), inset 0 0 0 calc(900 * var(--u)) rgba(3, 4, 7, 0.62);
}
#ecran-tuto.eteint::before { opacity: 0.38; }
#ecran-tuto.eteint::after { content: ''; opacity: 0.32; }
#ecran-tuto.eteint > .tuto-surtitre { opacity: 0.5; }
#ecran-tuto.eteint > #tuto-illustration { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u)); overflow: hidden; }
/* la bulle, tournée vers le professeur (en bas à gauche), et ses trois points */
#ecran-tuto.eteint > #tuto-illustration::before {
  content: ''; flex: none;
  width: calc(62 * var(--u)); height: calc(42 * var(--u));
  border: max(1.5px, calc(2 * var(--u))) solid rgba(var(--texte-doux-rvb), 0.7);
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(3 * var(--u));
  --tutoriel-point: radial-gradient(circle closest-side, rgba(var(--texte-doux-rvb), 0.9) 0 86%, rgba(var(--texte-doux-rvb), 0) 100%);
  background:
    var(--tutoriel-point) calc(50% - 14 * var(--u)) 50% / calc(7 * var(--u)) calc(7 * var(--u)) no-repeat,
    var(--tutoriel-point) 50% 50% / calc(7 * var(--u)) calc(7 * var(--u)) no-repeat,
    var(--tutoriel-point) calc(50% + 14 * var(--u)) 50% / calc(7 * var(--u)) calc(7 * var(--u)) no-repeat;
  animation: tutoriel-veille 1.5s ease-in-out infinite;
}
#ecran-tuto.eteint > #tuto-illustration::after {
  content: 'Écoutez le professeur';
  font-size: var(--taille-note); line-height: 1.3; color: var(--texte-doux); text-align: center;
}
/* les trois points battent l'un après l'autre */
@keyframes tutoriel-veille {
  0%, 62%, 100% { background-size: calc(7 * var(--u)) calc(7 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)); }
  14% { background-size: calc(11 * var(--u)) calc(11 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)); }
  30% { background-size: calc(7 * var(--u)) calc(7 * var(--u)), calc(11 * var(--u)) calc(11 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)); }
  46% { background-size: calc(7 * var(--u)) calc(7 * var(--u)), calc(7 * var(--u)) calc(7 * var(--u)), calc(11 * var(--u)) calc(11 * var(--u)); }
}


/* ============================================================================
   5. LE RÉCAPITULATIF ILLUSTRÉ
   ----------------------------------------------------------------------------
   Il s'est tu, le panneau s'allume : un visuel, et trois points à retenir
   (tutoriel.js : rien, des cœurs ou un trophée, puis une liste .regles-liste).
   Sur téléphone le visuel est au-dessus des points ; côte à côte ailleurs.
   L'illustration prend toute la place du panneau sous le surtitre, se tient au
   milieu quand elle tient, et part du haut si elle déborde (elle défile alors
   à l'intérieur : dix cœurs sur un petit téléphone, des bandeaux empilés).

   Pendant que le panneau est allumé, la bulle du professeur (qui s'est tu, et
   garde sa place) ne réserve que deux lignes : la place va au récapitulatif.
   Elle reprend ses quatre lignes dès qu'il reparle (.eteint).
   ========================================================================== */
#ecran-tuto:not(.eteint):not([hidden]) ~ .rampe-basse .bulle { --bulle-lignes: 2; }

#ecran-tuto > #tuto-illustration {
  flex: 1 1 0; min-height: 0; align-self: stretch;
  flex-direction: column; align-items: center; gap: calc(14 * var(--u));
  overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--metal-sombre) transparent;
  font-size: var(--taille-texte); line-height: 1.36;
}
#tuto-illustration > * { flex: none; max-width: 100%; }
#tuto-illustration > :first-child { margin-top: auto; }
#tuto-illustration > :last-child { margin-bottom: auto; }

/* les trois points à retenir : une puce de laiton, l'essentiel en ambre */
#tuto-illustration .regles-liste {
  position: relative; list-style: none; margin-left: 0; margin-right: 0; padding: 0;
  gap: calc(8 * var(--u)); min-width: 0; text-align: left;
}
#tuto-illustration .regles-liste > li { padding-left: calc(20 * var(--u)); text-wrap: pretty; }
/* la puce : un rivet, écrit dans la ligne et tiré dans la marge (le <li> ne se
   « positionne » pas : les pastilles de la section 6 se posent dans la liste) */
#tuto-illustration .regles-liste > li::before {
  content: ''; display: inline-block; vertical-align: 0.06em;
  width: calc(9 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(-20 * var(--u)); margin-right: calc(11 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, var(--metal-vif) 0 16%, var(--metal-clair) 34%, var(--metal-creux) 70%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
}
#tuto-illustration .regles-liste strong { color: var(--accent); font-weight: 700; }


/* ============================================================================
   6. LES TROIS VISUELS
   ========================================================================== */

/* ---------- « La majorité gagne » : quatre barres de votes, la foule en tête ----------
   tutoriel.js n'écrit qu'une liste pour cette leçon : le visuel est dessiné
   ici, sur la liste elle-même quand elle est seule dans l'illustration
   (:first-child). Décor pur : les barres sont des fonds, « La foule » et les
   lettres A à D (les mots du rappel des règles, app.js) du contenu de feuille.
     --tutoriel-pas       d'une barre à la suivante
     --tutoriel-barre     la largeur d'une barre
     --tutoriel-haut      la hauteur de la plus haute (la foule)
     --tutoriel-nom       la ligne « La foule », au-dessus
     --tutoriel-pastille  le diamètre d'une lettre, au-dessous
     --tutoriel-dessin    la hauteur du tout
     --tutoriel-gauche, --tutoriel-pied : où le dessin est posé dans la liste
                          (son bord gauche, et le bas de ses pastilles) */
#tuto-illustration > .regles-liste:first-child {
  --tutoriel-pas: calc(46 * var(--u));
  --tutoriel-barre: calc(32 * var(--u));
  --tutoriel-haut: calc(68 * var(--u));
  --tutoriel-nom: calc(18 * var(--u));
  --tutoriel-pastille: calc(24 * var(--u));
  --tutoriel-dessin: calc(var(--tutoriel-nom) + var(--tutoriel-haut) + 6 * var(--u) + var(--tutoriel-pastille));
  --tutoriel-gauche: calc(50% - 2 * var(--tutoriel-pas));
  --tutoriel-pied: var(--tutoriel-dessin);
  --tutoriel-cale: calc((var(--tutoriel-pas) - var(--tutoriel-barre)) / 2);
}
#tuto-illustration > .regles-liste:first-child::before {
  content: 'La foule';
  content: 'La foule' / '';
  flex: none; align-self: center; box-sizing: border-box;
  width: calc(4 * var(--tutoriel-pas)); height: var(--tutoriel-dessin); margin-bottom: calc(6 * var(--u));
  /* le nom se centre sur la deuxième barre : sa ligne s'arrête au bord de la troisième */
  padding-right: var(--tutoriel-pas);
  text-align: center; white-space: nowrap; line-height: var(--tutoriel-nom);
  font-family: var(--police-plateau); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: max(10px, calc(11 * var(--u))); color: var(--accent-vif);
  background:
    linear-gradient(180deg, var(--accent-vif), var(--accent) 45%, var(--accent-sombre))
      calc(var(--tutoriel-pas) + var(--tutoriel-cale)) var(--tutoriel-nom) / var(--tutoriel-barre) var(--tutoriel-haut) no-repeat,
    linear-gradient(180deg, var(--metal-sombre), var(--metal-pied))
      var(--tutoriel-cale) calc(var(--tutoriel-nom) + var(--tutoriel-haut) * 0.74) / var(--tutoriel-barre) calc(var(--tutoriel-haut) * 0.26) no-repeat,
    linear-gradient(180deg, var(--metal-sombre), var(--metal-pied))
      calc(2 * var(--tutoriel-pas) + var(--tutoriel-cale)) calc(var(--tutoriel-nom) + var(--tutoriel-haut) * 0.86) / var(--tutoriel-barre) calc(var(--tutoriel-haut) * 0.14) no-repeat,
    linear-gradient(180deg, var(--metal-sombre), var(--metal-pied))
      calc(3 * var(--tutoriel-pas) + var(--tutoriel-cale)) calc(var(--tutoriel-nom) + var(--tutoriel-haut) * 0.6) / var(--tutoriel-barre) calc(var(--tutoriel-haut) * 0.4) no-repeat,
    radial-gradient(ellipse closest-side, rgba(var(--accent-rvb), 0.3), rgba(var(--accent-rvb), 0))
      calc(var(--tutoriel-pas) * 1.5 - var(--tutoriel-barre) * 1.5) calc(var(--tutoriel-nom) - var(--tutoriel-haut) * 0.1) / calc(var(--tutoriel-barre) * 3) calc(var(--tutoriel-haut) * 1.2) no-repeat;
}
/* les quatre lettres, sous leurs barres : les mêmes pastilles de laiton que
   celles des réponses. Posées dans la liste (les trois premières par les trois
   points, la quatrième par la liste) : décor, elles ne prennent aucune place. */
#tuto-illustration > .regles-liste:first-child > li:nth-child(-n+3)::after,
#tuto-illustration > .regles-liste:first-child::after {
  position: absolute; top: calc(var(--tutoriel-pied) - var(--tutoriel-pastille)); pointer-events: none;
  display: grid; place-items: center;
  width: var(--tutoriel-pastille); height: var(--tutoriel-pastille); border-radius: 50%;
  font-family: var(--police-plateau); font-weight: 900; font-size: calc(var(--tutoriel-pastille) * 0.5); line-height: 1;
  color: var(--sur-metal);
  background: linear-gradient(160deg, var(--metal-vif), var(--metal-clair) 38%, var(--metal-sombre) 78%, var(--metal-creux));
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(14, 8, 2, 0.8);
}
#tuto-illustration > .regles-liste:first-child > li:nth-child(1)::after {
  content: 'A'; content: 'A' / '';
  left: calc(var(--tutoriel-gauche) + var(--tutoriel-pas) * 0.5 - var(--tutoriel-pastille) / 2);
}
#tuto-illustration > .regles-liste:first-child > li:nth-child(2)::after {
  content: 'B'; content: 'B' / '';
  left: calc(var(--tutoriel-gauche) + var(--tutoriel-pas) * 1.5 - var(--tutoriel-pastille) / 2);
}
#tuto-illustration > .regles-liste:first-child > li:nth-child(3)::after {
  content: 'C'; content: 'C' / '';
  left: calc(var(--tutoriel-gauche) + var(--tutoriel-pas) * 2.5 - var(--tutoriel-pastille) / 2);
}
#tuto-illustration > .regles-liste:first-child::after {
  content: 'D'; content: 'D' / '';
  left: calc(var(--tutoriel-gauche) + var(--tutoriel-pas) * 3.5 - var(--tutoriel-pastille) / 2);
}

/* ---------- « Les vies » : autant de cœurs que les réglages en donnent (tutoriel-regles.js) ----------
   Jusqu'à quatre, de grands cœurs ; au-delà (.nombreuses, dix au plus), ils
   sont plus petits, et passent sur deux rangées égales quand ils sont trop
   nombreux pour une seule (cinq et cinq, pas neuf et un). Leur largeur est
   bornée : la lueur des cœurs ne touche pas le bord du panneau, qui la couperait.
   Aucun espacement entre les lettres (l'habillage de base en pose un) : il
   s'ajouterait aussi après le dernier cœur, et le dessin pencherait à gauche.
   Les cœurs s'écartent d'autant par l'espace entre les mots. */
#tuto-illustration .tuto-vies {
  font-size: calc(54 * var(--u)); line-height: 1; letter-spacing: 0; word-spacing: 0.34em;
  text-align: center; text-wrap: balance; overflow-wrap: normal;
  color: var(--vie); filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(var(--vie-rvb), 0.55));
}
#tuto-illustration .tuto-vies.nombreuses {
  font-size: calc(32 * var(--u)); line-height: 1.15; max-width: calc(236 * var(--u));
  filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(var(--vie-rvb), 0.5));
}

/* ---------- « La fin de partie » : le trophée du dernier debout ---------- */
#tuto-illustration .tuto-trophee { width: calc(84 * var(--u)); height: calc(84 * var(--u)); margin-left: 0; margin-right: 0; }


/* ============================================================================
   7. « CONTINUER »
   ----------------------------------------------------------------------------
   Le professeur s'est tu : « Continuer » prend la place de sa bulle (la rangée
   du bas sur téléphone, la case de la bulle sur ordinateur), jamais derrière
   lui, toujours visible sans faire défiler, sur le récapitulatif comme sur les
   résultats d'une question. Une touche de laiton qui BAT : trop discrète,
   personne ne la cherchait (retour de Gautier sur le jeu d'aujourd'hui).
   Tout l'écran avance aussi d'un toucher, et la leçon avance seule après
   trente secondes (tutoriel.js). Mouvements réduits : elle ne bat pas, elle
   luit (son état de repos porte le halo).
   ========================================================================== */
#tuto-continuer {
  min-height: calc(var(--hauteur-bouton) * 1.22);
  padding-left: calc(28 * var(--u)); padding-right: calc(24 * var(--u)); gap: calc(12 * var(--u));
  font-size: calc(var(--taille-bouton) * 1.18);
  box-shadow:
    0 0 0 max(1px, calc(1.5 * var(--u))) rgba(14, 8, 2, 0.92),
    var(--socle-laiton),
    0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.22),
    0 0 calc(22 * var(--u)) rgba(var(--accent-rvb), 0.6);
  animation: tutoriel-appel 1.2s ease-in-out infinite;
}
/* Sous la souris, elle se pose. Sous une souris seulement : sur un écran
   tactile le dernier bouton touché reste « survolé », et elle ne battrait plus
   aux leçons suivantes. */
@media (hover: hover) and (pointer: fine) {
  #tuto-continuer:hover { animation: none; }
}
/* la flèche : un chevron dessiné (le « ▼ » que tutoriel.js écrit n'est plus
   montré : sa police est nulle, et l'outil de mesure le tient pour un décor) */
#tuto-continuer .tuto-continuer-fleche {
  --mesure: decor;
  display: block; flex: none; box-sizing: border-box; overflow: hidden;
  width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin-top: calc(-5 * var(--u));
  font-size: 0; line-height: 0;
  border: solid currentColor; border-width: 0 max(2px, calc(2.8 * var(--u))) max(2px, calc(2.8 * var(--u))) 0;
  transform: rotate(45deg);
}
@keyframes tutoriel-appel {
  0%, 100% {
    filter: brightness(1.12);
    box-shadow:
      0 0 0 max(1px, calc(1.5 * var(--u))) rgba(14, 8, 2, 0.92),
      var(--socle-laiton),
      0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.22),
      0 0 calc(30 * var(--u)) rgba(var(--accent-rvb), 0.85);
  }
  55% {
    filter: brightness(0.72);
    box-shadow:
      0 0 0 max(1px, calc(1.5 * var(--u))) rgba(14, 8, 2, 0.92),
      var(--socle-laiton),
      0 calc(12 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      inset 0 calc(-2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.22),
      0 0 calc(4 * var(--u)) rgba(var(--accent-rvb), 0);
  }
}


/* ============================================================================
   8. TÉLÉPHONE COUCHÉ
   ----------------------------------------------------------------------------
   La scène est basse : le visuel passe à côté des points, tout se resserre.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 560px) {
  #ecran-tuto.scene { gap: calc(4 * var(--u)); padding: calc(9 * var(--u)) calc(22 * var(--u)) calc(7 * var(--u)); }
  #ecran-tuto > #tuto-illustration { flex-direction: row; justify-content: center; gap: calc(26 * var(--u)); line-height: 1.26; }
  #tuto-illustration > * { margin-top: auto; margin-bottom: auto; }
  #tuto-illustration > .regles-liste { flex: 0 1 auto; }
  #tuto-illustration .regles-liste { gap: calc(2 * var(--u)); }
  #ecran-tuto.eteint > #tuto-illustration { flex-direction: row; gap: calc(14 * var(--u)); }
  #ecran-tuto.eteint > #tuto-illustration::before { width: calc(44 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)); }
  /* le dessin de la foule à gauche des trois points, qui gardent leur colonne */
  #tuto-illustration > .regles-liste:first-child {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(26 * var(--u)); row-gap: calc(2 * var(--u)); align-content: center;
    --tutoriel-pas: calc(34 * var(--u)); --tutoriel-barre: calc(24 * var(--u)); --tutoriel-haut: calc(34 * var(--u));
    --tutoriel-nom: calc(14 * var(--u)); --tutoriel-pastille: calc(18 * var(--u));
    --tutoriel-gauche: 0px; --tutoriel-pied: calc(50% + var(--tutoriel-dessin) / 2);
  }
  #tuto-illustration > .regles-liste:first-child::before { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; font-size: max(9.5px, calc(10 * var(--u))); }
  #tuto-illustration > .regles-liste:first-child > li { grid-column: 2; }
  #tuto-illustration .tuto-vies { font-size: calc(36 * var(--u)); }
  #tuto-illustration .tuto-vies.nombreuses { font-size: calc(24 * var(--u)); max-width: calc(210 * var(--u)); }
  #tuto-illustration .tuto-trophee { width: calc(58 * var(--u)); height: calc(58 * var(--u)); }
}


/* ============================================================================
   9. ORDINATEUR
   ----------------------------------------------------------------------------
   « Quitter le tutoriel » : une petite plaque dans le coin en haut à gauche,
   comme une mention de chaîne. Le récapitulatif : le visuel à gauche, les
   trois points à droite, en plus grand. « Continuer » : au milieu de la case
   de la bulle, sous le panneau.
   ========================================================================== */
@media (min-width: 900px) and (min-aspect-ratio: 21/20) and (min-height: 561px) {
  #btn-quitter-tuto {
    align-self: flex-start; min-height: calc(38 * var(--u));
    padding: calc(4 * var(--u)) calc(15 * var(--u));
    font-size: max(13px, calc(14 * var(--u))); white-space: nowrap;
  }

  #ecran-tuto.scene { gap: calc(14 * var(--u)); padding: calc(22 * var(--u)) calc(48 * var(--u)) calc(20 * var(--u)); }
  #ecran-tuto::after { top: calc(10 * var(--u)); right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); left: calc(10 * var(--u)); background-size: calc(9 * var(--u)) calc(9 * var(--u)); }

  #ecran-tuto.eteint > #tuto-illustration { gap: calc(16 * var(--u)); }
  #ecran-tuto.eteint > #tuto-illustration::before {
    width: calc(92 * var(--u)); height: calc(62 * var(--u));
    border-radius: calc(20 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)) calc(4 * var(--u));
    background:
      var(--tutoriel-point) calc(50% - 21 * var(--u)) 50% / calc(10 * var(--u)) calc(10 * var(--u)) no-repeat,
      var(--tutoriel-point) 50% 50% / calc(10 * var(--u)) calc(10 * var(--u)) no-repeat,
      var(--tutoriel-point) calc(50% + 21 * var(--u)) 50% / calc(10 * var(--u)) calc(10 * var(--u)) no-repeat;
    animation-name: tutoriel-veille-large;
  }
  #ecran-tuto.eteint > #tuto-illustration::after { font-size: calc(var(--taille-texte) * 1.1); }

  #ecran-tuto > #tuto-illustration { flex-direction: row; justify-content: center; gap: calc(64 * var(--u)); }
  #tuto-illustration > * { margin-top: auto; margin-bottom: auto; }
  #tuto-illustration > .regles-liste { flex: 0 1 auto; max-width: calc(520 * var(--u)); }
  #tuto-illustration .regles-liste { gap: calc(16 * var(--u)); font-size: calc(var(--taille-texte) * 1.22); line-height: 1.3; }
  #tuto-illustration .regles-liste > li { padding-left: calc(28 * var(--u)); }
  #tuto-illustration .regles-liste > li::before { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(-28 * var(--u)); margin-right: calc(16 * var(--u)); }

  /* le dessin de la foule à gauche des trois points, qui gardent leur colonne */
  #tuto-illustration > .regles-liste:first-child {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(56 * var(--u)); row-gap: calc(16 * var(--u)); align-content: center;
    max-width: 100%;
    --tutoriel-pas: calc(74 * var(--u)); --tutoriel-barre: calc(52 * var(--u)); --tutoriel-haut: calc(148 * var(--u));
    --tutoriel-nom: calc(26 * var(--u)); --tutoriel-pastille: calc(38 * var(--u));
    --tutoriel-gauche: 0px; --tutoriel-pied: calc(50% + var(--tutoriel-dessin) / 2);
  }
  #tuto-illustration > .regles-liste:first-child::before { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; font-size: calc(15 * var(--u)); }
  #tuto-illustration > .regles-liste:first-child > li { grid-column: 2; }

  #tuto-illustration .tuto-vies { font-size: calc(104 * var(--u)); }
  #tuto-illustration .tuto-vies.nombreuses { font-size: calc(56 * var(--u)); max-width: calc(380 * var(--u)); }
  #tuto-illustration .tuto-trophee { width: calc(176 * var(--u)); height: calc(176 * var(--u)); }

  #tuto-continuer { justify-self: center; }
}
@keyframes tutoriel-veille-large {
  0%, 62%, 100% { background-size: calc(10 * var(--u)) calc(10 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)); }
  14% { background-size: calc(15 * var(--u)) calc(15 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)); }
  30% { background-size: calc(10 * var(--u)) calc(10 * var(--u)), calc(15 * var(--u)) calc(15 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)); }
  46% { background-size: calc(10 * var(--u)) calc(10 * var(--u)), calc(10 * var(--u)) calc(10 * var(--u)), calc(15 * var(--u)) calc(15 * var(--u)); }
}


/* ============================================================================
   10. REPLI POUR UN NAVIGATEUR ANCIEN (plan de bascule, partie 7)
   ----------------------------------------------------------------------------
   Sans découpe en anneau, le cerclage couvrirait tout le panneau : un simple
   filet le remplace (comme le socle le fait pour .verre).
   ========================================================================== */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  #ecran-tuto::before { background: none; padding: 0; border: max(1.5px, calc(2 * var(--u))) solid var(--metal-clair); }
}