/* Essai « feuille tirée du bas » (10/10, Robin : « essaye pour voir »), derrière ?feuille=1 : la coque porte .has-sheet (guide-sheet.mjs), TOUTES les règles
   de l'essai sont sous cette classe ; sans elle, la mise en page du parcours est celle de 90-parcours.css, à l'identique. Téléphone seulement : la colonne
   (moins de 640 px, ou une tablette en portrait), pas le téléphone à l'horizontale ni l'ordinateur.
   La scène occupe toute la place entre l'en-tête et la barre, moins la hauteur visible de la feuille (--sheet-vis, posée au lâcher) : tout ce qui est posé
   en bas de la scène (aide, pastilles, barre de l'élément) reste donc juste au-dessus de la feuille. La feuille (--sheet-h : 85 % de cette place) glisse en
   transform seulement : cran bas = décalée vers le bas de sa hauteur moins --sheet-low, cran haut = en place (data-sheet sur la coque). Papier, filet de 1 px,
   coins hauts à 6 px (le rayon des fenêtres), aucune ombre. Au cran haut, la boule reste visible dans ce qui reste de la scène, sans aide ni pastilles ni
   barre de l'élément. Le mouvement (feuille, boule qui rétrécit avec elle, aide qui s'efface) est conduit par guide-sheet.mjs en Web Animations, sur une
   seule courbe ; la feuille de style ne fait que poser l'état d'arrivée (mouvement réduit : l'arrivée directe, décidée dans le module). */
.guide.has-sheet .guide-sheet{display:contents}
.guide.has-sheet .guide-sheet-grip{display:none}
@media(hover:hover){.guide.has-sheet .guide-sheet-grip:hover span{background:var(--atelier-muted)}}
.guide.has-sheet .guide-sheet-grip:focus-visible span{background:var(--atelier-ink)}
@media(max-width:639px),(min-width:640px) and (max-width:1023px) and (min-height:501px){
 .guide.has-sheet{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"head" "stage" "bar";overflow:hidden;overflow:clip}
 .guide.has-sheet .guide-stage{margin-bottom:var(--sheet-vis,64px)}
 .guide.has-sheet.is-scrolled .guide-stage{border-bottom-color:transparent}
 .guide.has-sheet .guide-bar{position:relative;z-index:2}
 .guide.has-sheet .guide-sheet{grid-area:stage;align-self:end;position:relative;z-index:1;display:flex;flex-direction:column;box-sizing:border-box;height:var(--sheet-h,85%);background:var(--atelier-paper);
  border-top:1px solid var(--atelier-line);border-radius:var(--atelier-radius-card) var(--atelier-radius-card) 0 0;transform:translateY(calc(100% - var(--sheet-low,96px)))}
 .guide.has-sheet[data-sheet=high] .guide-sheet{transform:none}
 /* Pendant le mouvement : la boule est dessinée à sa place intermédiaire (transformation posée en haut à gauche de .guide-ball-wrap) et la scène ne la
    coupe plus par le bas, la feuille la couvre (le haut reste coupé : le fil s'y efface). .is-sheet-probe : la mesure des deux crans, rien n'y bouge. */
 .guide.has-sheet .guide-ball-wrap{transform-origin:0 0}
 .guide.has-sheet.is-sheet-moving .guide-stage{overflow:visible;clip-path:inset(0 -100vw -100vh)}
 .guide.has-sheet.is-sheet-moving .guide-ball-wrap,.guide.has-sheet .guide-sheet.is-dragging{will-change:transform}
 /* La page tient l'écran : Safari 26 sur iPhone laissait défiler la page de la hauteur de la zone du bas (en-tête sous l'heure, vide crème au-dessus de
    sa barre). Seul le panneau de la feuille défile (guide-sheet.mjs remet la page en haut si quelque chose la fait bouger quand même). */
 html:has(.guide.has-sheet:not([hidden])),html:has(.guide.has-sheet:not([hidden])) body{overflow:hidden;overscroll-behavior:none}
 /* La poignée : 44 px de zone de toucher sur toute la largeur, le trait de 36 x 4 px au milieu ; elle chevauche le surtitre, qui ne se touche pas. */
 .guide.has-sheet .guide-sheet-grip{display:block;position:absolute;top:0;left:0;right:0;z-index:1;height:44px;touch-action:none;cursor:grab}
 .guide.has-sheet .guide-sheet-grip:active{cursor:grabbing}
 .guide.has-sheet .guide-sheet-grip span{position:absolute;left:50%;top:var(--atelier-space-2);width:36px;height:4px;transform:translateX(-50%);border-radius:var(--atelier-radius-round);background:var(--atelier-placeholder);transition:background-color var(--atelier-t-fast) var(--atelier-ease)}
 /* Le panneau défile dans la feuille ; au cran bas il ne défile pas, le doigt tire la feuille (guide-sheet.mjs). */
 .guide.has-sheet .guide-panel{flex:1 1 auto;min-height:0}
 .guide.has-sheet[data-sheet=low] .guide-panel{overflow-y:hidden;touch-action:none}
 /* La boule : deux réglages de plus que 90-parcours.css, la place du cordon (65 % gardés, le haut du fil sort par le haut de la scène, là où il s'efface déjà) et un air
    de 8 px autour d'elle (au lieu de 16 de chaque côté, 8 en haut et en bas). */
 .guide.has-sheet .guide-ball-tilt{--guide-room-w:calc(100cqw - 2 * var(--atelier-space-2))}
 .guide.has-sheet .guide-stage.is-still .guide-ball-tilt{--guide-room-w:calc(100cqw * 1.12)}/* image fixe carrée (étape 1, avant le moteur) : son carré a des marges transparentes, il peut déborder un peu de la scène */
 .guide.has-sheet .guide-ball-swing{--guide-ball-h:min((var(--guide-tilt-h) - var(--atelier-space-2)) / (1 + var(--guide-head) * .65),var(--guide-room-w) / var(--guide-ratio,.81));margin-top:calc(var(--guide-ball-h) * var(--guide-head) * .65)}
 /* Étapes 3 et 4 : la place sous la boule (56 px) est déjà gardée pour la barre de l'élément, que la ligne d'aide occupe au repos ; elle n'a pas besoin de 26 px de plus. */
 .guide.has-sheet:is([data-step="3"],[data-step="4"]) .guide-stage.has-help .guide-ball-tilt{--guide-tilt-h:100cqh;height:100%}
 /* Cran haut : la scène ne garde que la boule. */
 .guide.has-sheet[data-sheet=high] .guide-stage .guide-ball-tilt{--guide-tilt-h:100cqh;height:100%}
 .guide.has-sheet[data-sheet=high] .guide-ball-wrap{bottom:0}
 .guide.has-sheet[data-sheet=high]:is([data-step="3"],[data-step="4"]) .guide-stage:has(>.guide-tools:not([hidden]):not(.is-top)) .guide-ball-wrap{bottom:0}
 .guide.has-sheet[data-sheet=high]:not(.is-sheet-probe) :is(.guide-stage-help,.guide-stage-top,.guide-stage-bottom,.guide-tools,.guide-handles-bar){display:none}
 .guide.has-sheet[data-sheet=high] .guide-handle{pointer-events:none}
}