/* ═══ ESSAI E — « Catégories en haut, montre au milieu, options en bas » ══
   Les quatre premiers essais partaient tous de la même erreur : empiler la
   montre et les options dans une colonne qui défile. La montre payait à
   chaque fois, et le rail des vingt-cinq étapes restait. François,
   21/09/2026 : « les 4 sont nulles, très compliqué de naviguer entre chaque
   catégorie, la montre toujours trop petite » — puis la structure qu'il
   veut : « trop de blanc en haut, il faut que la montre soit la première
   chose de la page, juste une flèche retour », et « en haut au-dessus de la
   montre les catégories et sous-catégories, et les options en bas en
   dessous de la montre ».

   Trois bandes, et rien qui défile :

     ┌────────────────────────────────┐
     │ ←   BOÎTIER  CADRAN  AIGUILLES │  les 8 catégories      44 px
     │     Matière · Finition · Laque │  les sous-catégories   38 px
     ├────────────────────────────────┤
     │                                │
     │          LA  MONTRE            │  tout le reste       ~600 px
     │                                │
     ├────────────────────────────────┤
     │  ▢  ▢  ▢  ▢  ▢                 │  les options         110 px
     │  3 820 €   106 €/mois  AJOUTER │  le prix              52 px
     └────────────────────────────────┘

   Ce que cela change, chiffré contre le configurateur en service :

     la montre ....... 220 px  →  ~600 px   (×2,7)
     avant la montre . 116 px  →   82 px, et ce sont les catégories,
                                   plus du blanc
     naviguer ........ une bande de 25 étapes qu'on fait défiler
                       →  les 8 catégories à l'écran, un toucher chacune

   Les deux niveaux existent déjà dans la page : `.cfg-som-fam` porte les
   familles, `.cfg-som-enfants` les rangées de celle où l'on se trouve. On
   ne les recrée pas, on les range.
   ═══════════════════════════════════════════════════════════ */

@media(max-width:900px){

  /* ── Rien avant les catégories ──────────────────────────── */
  body.essai-e .entete,
  body.essai-e .ariane,
  body.essai-e .cfg-retour,
  body.essai-e .defiler,
  body.essai-e .foot,
  body.essai-e footer,
  body.essai-e .cfg-mention{display:none!important}
  body.essai-e{overflow:hidden}
  body.essai-e.cfg-etapes-on #cfg-atelier{
    padding:0;margin:0;height:calc(100svh - var(--essai-h));overflow:hidden;
    display:flex;flex-direction:column}
  body.essai-e.cfg-etapes-on .cfg-atelier-in{
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
    padding:0;max-width:none;width:100%}

  /* ── 1. Les catégories, et leurs sous-catégories ────────── */
  body.essai-e #cfg-sommaire.en-ligne{
    position:static;order:1;flex:0 0 auto;
    padding:0 0 0 46px;margin:0;background:#fff;
    border-top:0;border-bottom:1px solid var(--trait)}
  body.essai-e #cfg-sommaire .cfg-jauge,
  body.essai-e #cfg-sommaire .cfg-som-tete,
  body.essai-e #cfg-sommaire .cfg-sommaire-barre{display:none}
  body.essai-e #cfg-sommaire .cfg-sommaire-piste{
    display:flex;flex-wrap:wrap;gap:0;padding:0;overflow:visible}
  body.essai-e #cfg-sommaire .cfg-sommaire-piste::before,
  body.essai-e #cfg-sommaire .cfg-sommaire-piste::after{display:none}

  /* Les huit familles : première ligne, toutes à l'écran. */
  body.essai-e #cfg-sommaire .cfg-som-fam{
    flex:1 1 auto;min-height:44px;min-width:0;padding:6px 6px;
    border:0;border-radius:0;font-size:.62rem;letter-spacing:.06em;
    color:var(--encre-doux);background:#fff;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  body.essai-e #cfg-sommaire .cfg-som-fam.on{
    background:#111114;color:#fff}

  /* Les sous-catégories de la famille en cours : deuxième ligne. Elles
     vivent DANS un `span` qui suit leur famille — `display:contents` le
     dissout pour que la grille voie ses enfants, et l'ordre les range
     sous la première ligne. */
  body.essai-e #cfg-sommaire .cfg-som-enfants{
    display:flex;order:9;flex:1 0 100%;gap:0;
    overflow-x:auto;overscroll-behavior-x:contain;
    border-top:1px solid var(--trait)}
  body.essai-e #cfg-sommaire .cfg-som-enfants::-webkit-scrollbar{display:none}
  body.essai-e #cfg-sommaire .cfg-som-enfants:empty{display:none}
  body.essai-e #cfg-sommaire .cfg-som-enfants > *{
    flex:0 0 auto;min-height:38px;padding:5px 12px;border:0;border-radius:0;
    font-size:.64rem;color:var(--encre-doux);background:#fff}
  body.essai-e #cfg-sommaire .cfg-som-enfants > [aria-current="true"]{
    color:var(--laque);box-shadow:inset 0 -2px 0 var(--laque)}

  /* La flèche retour, dans le coin laissé libre par le retrait à gauche. */
  body.essai-e .essai-retour{
    position:absolute;left:0;top:0;z-index:20;
    width:46px;height:44px;border:0;background:#fff;color:var(--encre);
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;line-height:1;border-right:1px solid var(--trait)}

  /* ── 2. La montre prend tout le reste ───────────────────── */
  body.essai-e.cfg-etapes-on .cfg-visuel{
    position:relative;order:2;flex:1 1 auto;min-height:0;
    margin:0;padding:0;border:0;display:flex;align-items:center;
    justify-content:center;background:var(--papier)}
  body.essai-e.cfg-etapes-on #cfg-scene{
    width:100%;height:100%;max-height:none;border:0;background:none}
  body.essai-e.cfg-etapes-on #cfg-atelier{--cfg-large:100%}
  body.essai-e.cfg-etapes-on .cfg-vue-barre{
    position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0;
    padding:4px 12px 6px;
    background:linear-gradient(to top,rgba(255,255,255,.82) 55%,rgba(255,255,255,0))}
  body.essai-e .cfg-vue-compteur{background:rgba(255,255,255,.86)}

  /* ── 3. Les options, puis le prix ───────────────────────── */
  body.essai-e .cfg-panneau{
    order:3;flex:0 0 auto;display:flex;flex-direction:column;margin:0;
    border-top:1px solid var(--trait);background:#fff}
  body.essai-e .cfg-panneau-tete,
  body.essai-e .cfg-bilan,
  body.essai-e .cfg-tete-etape{display:none}
  body.essai-e #cfg-composants{
    flex:0 0 auto;max-height:none;overflow:visible;
    padding:8px 10px 6px;margin:0}
  body.essai-e .cfg-rangee{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    scroll-snap-type:x proximity;overscroll-behavior-x:contain;margin:0}
  body.essai-e .cfg-rangee::-webkit-scrollbar{display:none}
  body.essai-e .cfg-option{flex:0 0 auto;width:86px;scroll-snap-align:start}
  /* Une seule rangée à la fois : les sous-catégories du haut disent
     laquelle, il n'y a pas à les empiler. */
  body.essai-e #cfg-composants .cfg-composant:not(:first-of-type){display:none}

  body.essai-e .cfg-barre{
    position:static;flex:0 0 auto;
    padding:0 0 0 12px;min-height:52px;gap:10px;flex-wrap:nowrap;
    align-items:center;border-top:1px solid var(--encre);
    padding-bottom:env(safe-area-inset-bottom)}
  body.essai-e .cfg-barre-libelle,
  body.essai-e .cfg-finance-duree,
  body.essai-e #cfg-echeances,
  body.essai-e .cpt-cfg-enregistrer{display:none}
  body.essai-e #cfg-total{font-size:1.05rem}
  body.essai-e .cfg-finance-montant b{font-size:.92rem}
  body.essai-e #cfg-ajouter{
    margin-left:auto;padding:17px 16px;font-size:.64rem;align-self:stretch}
}

/* ── Correctifs après mesure sur 390 × 844 ─────────────────────────
   Trois règles de `configurateur.css` tenaient encore la page : la réserve
   d'en-tête sur `#cfg-atelier` (118 px de blanc au-dessus du rail), la
   hauteur de la scène pilotée par `--cfg-large`, et le plafond `--cfg-place`
   sur les options. Ici la hauteur vient de la colonne flex, et d'elle
   seule — on coupe les trois. */
@media(max-width:900px){
  body.essai-e.cfg-en-cours #cfg-atelier,
  body.essai-e.cfg-etapes-on #cfg-atelier{
    padding:0!important;margin:0!important}
  body.essai-e.cfg-etapes-on .cfg-atelier-in{height:100%}
  /* La scène : c'est la bande du milieu qui lui donne sa taille. */
  body.essai-e.cfg-etapes-on #cfg-scene{
    height:100%!important;max-height:none!important;min-height:0}
  body.essai-e.cfg-etapes-on #cfg-calques{position:absolute;inset:0}
  body.essai-e #cfg-composants{max-height:none!important}
  body.essai-e .cfg-panneau{flex:0 0 auto!important}
}