/* ═══ ESSAI A — « De la place pour choisir » ═══════════════════════ Le même chemin qu'aujourd'hui, autrement proportionné. Rien de neuf à apprendre pour le visiteur : la montre en haut, les options dessous, le prix en bas. Ce qui change, c'est le partage de la hauteur. · la montre passe de 339 px à 26 vh (≈ 220 px) et devient COLLANTE : elle reste à l'écran pendant qu'on fait défiler les options, au lieu de disparaître vers le haut ; · le rail des étapes et le socle du prix ne font plus qu'UN bloc de 104 px au lieu de deux qui en font 178. La famille en cours, les deux flèches, le total et la mensualité tiennent sur deux lignes serrées ; · les flèches passent de 44 px à 46 px, en plein contraste : fond noir, chevron blanc. Celle de gauche, désactivée à la première étape, garde son contour — on voit qu'elle existe, pas qu'elle a disparu. Gain mesuré : les options passent de 99 px à ~250 px, deux rangées et demie de vignettes au lieu d'une demie. ═══════════════════════════════════════════════════════════ */ @media(max-width:900px){ body.essai-a.cfg-etapes-on .cfg-visuel{ position:sticky;top:calc(var(--header) + var(--essai-h));z-index:6; background:var(--papier);padding-block:4px 6px; border-bottom:1px solid var(--trait)} body.essai-a.cfg-etapes-on #cfg-scene{max-height:26vh} body.essai-a.cfg-etapes-on #cfg-atelier{--cfg-large:min(100%,26vh)} /* Le rail ne vit plus seul : il se pose sur le socle et en devient la première ligne. Une seule barre, un seul trait, un seul fond. */ body.essai-a #cfg-sommaire.en-ligne{ bottom:var(--essai-socle,104px); border-top:1px solid var(--trait);border-bottom:0; padding:0;background:#fff} body.essai-a #cfg-sommaire.en-ligne .cfg-sommaire-barre{gap:0} body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav{ flex:0 0 46px;width:46px;height:46px; background:#111114;color:#fff;border:0;border-radius:0;opacity:1;font-size:1.05rem} body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav[disabled], body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav:disabled{ background:#fff;color:#111114;opacity:1; box-shadow:inset 0 0 0 1px var(--trait)} body.essai-a #cfg-sommaire.en-ligne .cfg-som-tete{padding:0 10px} body.essai-a #cfg-sommaire.en-ligne button{min-height:46px} /* Le socle : deux lignes serrées au lieu de trois lâches. */ body.essai-a .cfg-barre{ padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom)); gap:8px} body.essai-a #cfg-total{font-size:1.15rem} body.essai-a .cfg-finance-montant b{font-size:1.02rem} body.essai-a #cfg-echeances{height:12px} body.essai-a #cfg-ajouter{padding:11px 16px} /* Ce que tout cela rend aux options. */ body.essai-a #cfg-composants{min-height:34svh} body.essai-a .cfg-option{width:clamp(78px,24vw,96px)} } /* ── Correctifs après mesure sur 390 × 844 ───────────────────────── La commande de rotation restait SOUS la scène : 62 px pris aux options pour un curseur. La feuille commune prévoit de la poser par-dessus le bas de la montre ; une règle plus tardive la remettait en ligne. On la repose ici, dans la feuille de l'essai, là où c'est son sujet. */ @media(max-width:900px){ body.essai-a.cfg-etapes-on .cfg-vue-barre{ position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0; padding:6px var(--gouttiere) 8px; background:linear-gradient(to top,rgba(255,255,255,.86) 55%,rgba(255,255,255,0))} body.essai-a.cfg-etapes-on .cfg-visuel{padding-bottom:0} /* Le retour « choisir un autre modèle » se tasse : c'est une sortie de secours, pas un titre. */ body.essai-a .cfg-retour{padding-block:0} body.essai-a #cfg-reset{padding:4px 0 5px;font-size:.62rem} } /* ── Le haut de page disparaît, la montre prend la place ─────────── François, 21/09/2026 : « le A que tu proposes est pas mal mais il faut revoir le haut de page, supprimer tout pour laisser un max de place pour la montre en grande taille », et avant cela : « juste une flèche retour, c'est tout ». Ce qu'on enlève, et ce que ça vaut, mesuré sur 390 × 844 : l'en-tête du site (logo, menu, recherche, panier) .... 78 px le lien « choisir un autre modèle » ................. 38 px ───────── 116 px Ces 116 px vont à la montre, qui passe de 26 vh à 46 vh — de 220 px à 390 px, soit presque le double du configurateur en service. Il ne reste qu'une flèche, posée sur le visuel : elle fait ce que faisait le lien, revenir au choix du modèle. */ @media(max-width:900px){ body.essai-a .entete, body.essai-a .ariane, body.essai-a .defiler{display:none!important} /* ⚠️ `.cfg-retour` n'est PAS en `display:none` : c'est lui qui porte « Choisir un autre modèle », et c'est ce bouton-là que la flèche déclenche. Masqué par `display`, le clic ne produisait rien et la flèche retombait sur l'historique — elle ramenait donc au menu au lieu de la grille des modèles (François, 21/09/2026). On le sort du regard sans le sortir du document. */ body.essai-a .cfg-retour{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;padding:0!important;margin:0} body.essai-a.cfg-en-cours #cfg-atelier, body.essai-a.cfg-etapes-on #cfg-atelier{padding-top:0!important} /* La montre remonte tout en haut et prend les pixels rendus. */ body.essai-a.cfg-etapes-on .cfg-visuel{top:var(--essai-h)} body.essai-a.cfg-etapes-on #cfg-scene{max-height:46vh} body.essai-a.cfg-etapes-on #cfg-atelier{--cfg-large:min(100%,46vh)} /* La flèche retour, posée sur le coin haut gauche du visuel. */ body.essai-a .essai-retour{ position:fixed;left:10px;top:calc(var(--essai-h) + 10px);z-index:20; width:44px;height:44px;border:0;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.92);color:var(--encre); box-shadow:0 1px 6px rgba(17,17,20,.14);font-size:1.2rem;line-height:1} } /* La taille de la montre est pilotée EN LIGNE par le script de la page, qui la fait décroître au défilement : un style de feuille, même le dernier, ne passe pas devant un style en ligne. Ici la montre ne rétrécit plus — c'est exactement ce qu'on cherche — donc on l'impose. */ @media(max-width:900px){ body.essai-a.cfg-etapes-on #cfg-atelier{--cfg-large:min(100%,46vh)!important} body.essai-a.cfg-etapes-on #cfg-scene{max-height:46vh!important} } /* ── Les deux flèches du rail, et le nom des sous-catégories ─────── François, 21/09/2026, sur l'essai A en ligne : « dans la liste des catégories ne pas mettre dans les boutons catégorie l'option choisie, ça va réduire la taille » et « les flèches sont fonctionnelles mais je vois juste des ronds blancs sans flèche ». 1. Le bouton d'une sous-catégorie porte deux choses : son nom (« Boîtier ») et le choix retenu (« Inox Brossé »), dans un ``. Le second double ce que le titre de l'étape dit déjà en grand, juste au-dessus — et il allonge chaque pastille d'une moitié. Il part. 2. Les flèches restaient RONDES et BLANCHES : la règle du configurateur les dessine ainsi, et elle l'emporte sur la mienne. D'où le `!important` — assumé, c'est une feuille d'essai posée par-dessus une feuille de 2 486 lignes qu'on ne touche pas. Le chevron passe en 1,3 rem : à 44 px de côté, un glyphe de 0,9 rem se lit comme un point. */ @media(max-width:900px){ body.essai-a #cfg-sommaire .cfg-som-enfants > button > em{display:none} body.essai-a #cfg-sommaire .cfg-som-enfants > button{padding-inline:12px} body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav{ border-radius:0!important; background:#111114!important;color:#fff!important; font-size:1.3rem!important;opacity:1!important; border:0!important;box-shadow:none!important} /* Désactivée, elle reste LISIBLE : on voit qu'elle existe et qu'elle ne mène nulle part, au lieu de disparaître dans le fond. */ body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav[disabled], body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav:disabled{ background:#fff!important;color:#111114!important; box-shadow:inset 0 0 0 1px var(--trait)!important} } /* Le libellé du choix retenu résistait encore : la règle du configurateur le pose avec une spécificité supérieure. */ @media(max-width:900px){ body.essai-a #cfg-sommaire .cfg-som-enfants > button em, body.essai-a #cfg-sommaire .cfg-som-enfants em{display:none!important} } /* ── Les flèches : une flèche, pas une étiquette ─────────────────── Troisième passage, et la mesure disait « carré noir, chevron 20 px » pendant que l'écran montrait un rond blanc vide. La capture au triple de résolution a tranché : en mode étapes, le bouton n'est pas une flèche, c'est une COLONNE — `←` (masqué par la feuille du configurateur), `Précédent`, et le nom de l'étape suivante. Le forcer à 46 px de large écrasait ces deux lignes de texte en une bouillie blanche, et le `` qui porte le chevron restait caché. On inverse donc : le chevron se montre, le texte se tait. Un bouton de 46 px avec une flèche de 1,25 rem, noir sur blanc ou blanc sur noir — et rien d'autre dedans. */ @media(max-width:900px){ body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav{ flex:0 0 46px!important;width:46px!important;min-width:46px!important; padding:0!important;gap:0!important; flex-direction:row!important;align-items:center!important; justify-content:center!important;text-align:center!important; overflow:hidden} body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav i{ display:block!important;font-style:normal;font-size:1.25rem;line-height:1} body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav b, body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav .cfg-som-ou{ display:none!important} body.essai-a #cfg-sommaire.en-ligne .cfg-som-suiv i{color:#fff} } /* ── Le rond blanc DANS le carré noir ────────────────────────────── Quatrième passage, et c'est le `` lui-même qui le dessinait : la feuille du configurateur en fait une PASTILLE — fond blanc, `border-radius:50%`, bordure grise, 46 × 52 px. Je m'étais contenté de le rendre visible ; il apparaissait donc en cercle blanc par-dessus le bouton, et sur « suivant » sa couleur était blanche sur blanc — d'où la flèche invisible. On le déshabille : plus de fond, plus de bordure, plus de rayon, et la couleur du bouton. Il ne reste que le chevron. */ @media(max-width:900px){ body.essai-a #cfg-sommaire.en-ligne .cfg-som-nav i{ background:none!important;border:0!important;border-radius:0!important; width:auto!important;height:auto!important;color:inherit!important; box-shadow:none!important;padding:0!important;margin:0!important} } /* ── Les options prennent toute la largeur ───────────────────────── François, 21/09/2026 : « les options de configuration 3 par ligne c'est bien, mais il faut donner plus de largeur aux images, prends toute la largeur de la page ». La grille se remplissait en `auto-fill minmax(148px,1fr)` : à 390 px de large, deux colonnes de 148 px et une gouttière perdue. On fige TROIS colonnes qui se partagent la largeur réelle, on rend au bloc les gouttières de la page, et l'image occupe la carte d'un bord à l'autre — c'est elle qu'on regarde pour choisir, pas le cadre autour. */ @media(max-width:900px){ body.essai-a.cfg-etapes-on #cfg-composants{ padding-inline:8px} body.essai-a.cfg-etapes-on .cfg-choix{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important;margin-top:14px} body.essai-a.cfg-etapes-on .cfg-option{ width:auto!important;padding:0 0 9px!important;gap:5px} body.essai-a.cfg-etapes-on .cfg-option-vignette{ width:100%!important;height:auto!important;aspect-ratio:1; max-width:none!important;margin:0} body.essai-a.cfg-etapes-on .cfg-option-vignette img{ width:100%;height:100%;object-fit:contain} body.essai-a.cfg-etapes-on .cfg-option-nom{ padding-inline:6px;font-size:.72rem;line-height:1.25} body.essai-a.cfg-etapes-on .cfg-option-prix{font-size:.7rem} } /* La grille tenait 338 px sur 390 : les gouttières de la page, héritées du `.wrap`, mangeaient 26 px de chaque côté. On les annule pour le seul bloc des options — la largeur de la page, moins huit pixels de respiration. */ @media(max-width:900px){ body.essai-a.cfg-etapes-on #cfg-composants{ margin-inline:calc(var(--gouttiere, 20px) * -1)!important; padding-inline:8px!important} }