/* ═══ ESSAI B — « Le tiroir » ══════════════════════════════════════
   La montre ne bouge plus. Elle occupe TOUT l'écran, du haut au bas, et
   les options viennent par-dessus, dans un tiroir qu'on tire du pouce.

   Trois positions, et on passe de l'une à l'autre en glissant la poignée
   ou en la tapant :

     · APERÇU  — 148 px : la famille en cours, les deux flèches, le total
                 et « Ajouter au panier ». La montre est entière.
     · MOITIÉ  — 52 % : deux rangées d'options, la montre encore lisible.
     · PLEIN   — 86 % : on choisit à l'aise, la montre reste en fond.

   Le pari : sur un configurateur, ce qu'on regarde vraiment, c'est la
   montre qui change. Les options sont un outil, pas un décor — elles
   viennent quand on les demande et s'effacent ensuite.
   ═══════════════════════════════════════════════════════════ */

@media(max-width:900px){
  body.essai-b.cfg-etapes-on #cfg-atelier{padding-bottom:0}

  /* La montre prend la fenêtre. Elle ne défile pas : il n'y a plus rien à
     faire défiler derrière le tiroir. */
  body.essai-b.cfg-etapes-on .cfg-visuel{
    position:fixed;left:0;right:0;
    top:calc(var(--header) + var(--essai-h));
    bottom:0;z-index:3;margin:0;padding:8px 0 0;
    display:flex;flex-direction:column;justify-content:flex-start;
    background:var(--papier);border:0}
  body.essai-b.cfg-etapes-on #cfg-scene{max-height:none;flex:0 0 auto;height:46vh}
  body.essai-b.cfg-etapes-on #cfg-atelier{--cfg-large:min(100%,46vh)}
  /* La commande de rotation se pose juste sous la montre, pas en bas de
     l'écran où le tiroir la mangerait. */
  body.essai-b.cfg-etapes-on .cfg-vue-barre{position:relative;background:none}

  /* ── Le tiroir ────────────────────────────────────────────── */
  body.essai-b .cfg-panneau{
    position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:#fff;border-top:1px solid var(--encre);
    border-radius:14px 14px 0 0;
    box-shadow:0 -10px 30px rgba(17,17,20,.13);
    height:var(--tiroir-h,148px);
    transition:height .26s var(--ease,cubic-bezier(.4,0,.2,1));
    display:flex;flex-direction:column;overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom)}
  body.essai-b.tiroir-moitie .cfg-panneau{--tiroir-h:52svh}
  body.essai-b.tiroir-plein  .cfg-panneau{--tiroir-h:86svh}

  /* La poignée : une barrette, et toute la zone est tactile. */
  body.essai-b .tiroir-poignee{
    flex:0 0 auto;height:22px;display:flex;align-items:center;justify-content:center;
    cursor:grab;touch-action:none}
  body.essai-b .tiroir-poignee::before{
    content:'';width:38px;height:4px;border-radius:2px;background:var(--trait)}

  /* Le rail des étapes devient l'en-tête du tiroir. */
  body.essai-b #cfg-sommaire.en-ligne{
    position:static;flex:0 0 auto;border:0;border-bottom:1px solid var(--trait);
    padding:0;margin:0;background:#fff}
  body.essai-b #cfg-sommaire.en-ligne .cfg-som-nav{
    flex:0 0 44px;width:44px;height:44px;background:#111114;color:#fff;
    border:0;border-radius:0;opacity:1}
  body.essai-b #cfg-sommaire.en-ligne .cfg-som-nav[disabled]{
    background:#fff;color:#111114;box-shadow:inset 0 0 0 1px var(--trait)}

  body.essai-b #cfg-composants{
    flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:6px var(--gouttiere) 8px}
  /* En aperçu, les options sont là mais hors champ : le tiroir ne montre
     que son en-tête et le socle. Elles n'ont pas à être recalculées. */
  body.essai-b:not(.tiroir-moitie):not(.tiroir-plein) #cfg-composants{visibility:hidden}

  /* Le socle reste dans le tiroir, toujours visible : le prix et le bouton
     ne se cachent jamais, quelle que soit la position. */
  body.essai-b .cfg-barre{
    position:static;flex:0 0 auto;z-index:auto;
    border-top:1px solid var(--trait);
    padding:8px var(--gouttiere);padding-bottom:8px}
  body.essai-b #cfg-total{font-size:1.15rem}
  body.essai-b .cfg-bilan{display:none}
}

/* ── Le plafond mesuré par la page ─────────────────────────────────
   `configurateur.html` mesure l'écart entre le haut des options et le haut
   du socle, et le pose en `--cfg-place` : `#cfg-composants` s'y plafonne.
   Ce calcul suppose la disposition d'origine — socle fixé au bas de la
   FENÊTRE, rail au-dessus. Cet essai déplace les meubles : le socle est
   sous les options, et l'écart mesuré tombe à quelques pixels. Le cadre se
   refermait alors à quatorze pixels de haut. Ici, c'est la boîte flex qui
   donne la hauteur — on retire le plafond. */
@media(max-width:900px){
  body.essai-b #cfg-composants{max-height:none}
}