/* ═══ ESSAI C — « Les familles, et rien à faire défiler » ══════════
   On supprime la notion d'étape numérotée. « Étape 7 sur 25 » ne dit rien
   à personne : ce qu'on cherche, c'est le boîtier, le cadran, le bracelet.

     · sous la montre, les huit FAMILLES en onglets qui défilent
       latéralement — Boîtier, Cadran, Aiguilles, Ressorts, Couronne,
       Cornes, Bracelet, Boucle ;
     · les options en une seule bande horizontale, de grandes vignettes
       qu'on fait glisser du pouce, comme une pellicule ;
     · plus de flèches Précédent / Suivant du tout : on va où l'on veut,
       quand on veut ;
     · tout tient dans un écran. La page ne défile PAS.

   Le pari : choisir une montre n'est pas remplir un formulaire dans
   l'ordre. Le risque : moins d'options visibles d'un coup d'œil qu'en
   grille — c'est précisément ce qu'il faut juger sur le téléphone.
   ═══════════════════════════════════════════════════════════ */

@media(max-width:900px){
  /* La montre reste COLLANTE sous l'en-tête, comme aujourd'hui : verrouiller
     la page en plein écran se battait contre le dimensionnement de la scène
     par le moteur, et la montre s'écrasait à cinq pixels. Ce qui fait C, ce
     sont les onglets et la pellicule — pas le verrou. */
  body.essai-c.cfg-etapes-on .cfg-visuel{
    position:sticky;top:calc(var(--header) + var(--essai-h));z-index:6;
    background:var(--papier);padding-block:4px 0;
    border-bottom:1px solid var(--trait)}
  body.essai-c.cfg-etapes-on #cfg-atelier{--cfg-large:min(100%,30vh)}

  /* Les onglets de famille : le rail, débarrassé de ses flèches et de son
     compteur, collé sous la montre. */
  body.essai-c #cfg-sommaire.en-ligne{
    position:sticky;top:calc(var(--header) + var(--essai-h) + var(--cfg-visuel-h,0px));
    bottom:auto;padding:0;margin:0;
    border-top:0;border-bottom:1px solid var(--trait);background:#fff}
  body.essai-c #cfg-sommaire.en-ligne .cfg-som-nav{display:none}
  body.essai-c #cfg-sommaire.en-ligne .cfg-som-tete{display:none}
  body.essai-c #cfg-sommaire.en-ligne .cfg-sommaire-piste{padding:0 6px}
  body.essai-c #cfg-sommaire.en-ligne button{
    min-height:42px;padding:6px 14px;font-size:.68rem;border-radius:0}
  body.essai-c #cfg-sommaire.en-ligne button.on{
    background:#111114;color:#fff}

  /* La pellicule : une seule rangée, qui glisse. */
  body.essai-c #cfg-composants{
    flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px var(--gouttiere) 0}
  body.essai-c .cfg-rangee{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;padding-bottom:6px}
  body.essai-c .cfg-rangee::-webkit-scrollbar{display:none}
  body.essai-c .cfg-option{
    flex:0 0 auto;width:clamp(92px,27vw,112px);scroll-snap-align:start}

  /* Le socle, réduit à l'essentiel : le prix, la mensualité, le bouton. */
  body.essai-c .cfg-barre{
    padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  body.essai-c #cfg-total{font-size:1.1rem}
  body.essai-c .cfg-finance-duree{display:none}
  body.essai-c #cfg-echeances{display:none}
  body.essai-c .cfg-bilan{display:none}
  body.essai-c #cfg-ajouter{padding:11px 16px}
}

/* ── Correctifs après mesure ───────────────────────────────────────
   La chaîne de flex s'arrêtait à `.cfg-panneau` : le socle repartait
   deux mille pixels plus bas, hors de l'écran. Le panneau doit être lui
   aussi une colonne, et céder sa hauteur. */
@media(max-width:900px){
  body.essai-c.cfg-etapes-on .cfg-retour{display:none}
  body.essai-c .cfg-panneau{margin:0}
  body.essai-c .cfg-panneau-tete{display:none}
  body.essai-c.cfg-etapes-on .cfg-vue-barre{
    position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
    padding:4px var(--gouttiere) 6px;
    background:linear-gradient(to top,rgba(255,255,255,.86) 55%,rgba(255,255,255,0))}
  body.essai-c.cfg-etapes-on .cfg-visuel{padding-bottom:0}
}

/* ── 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-c #cfg-composants{max-height:none}
}