/* ───────────────────────────────────────────────────────────── B.R.M — configurateur Feuille posée sur `site.css`. Elle n'invente aucun jeton et ne redéfinit rien de la feuille commune : elle habille uniquement les identifiants et les classes du contrat du configurateur. Deux écrans dans la même page : 1. l'écran racine — le choix du modèle (#cfg-racine) 2. l'écran atelier — la configuration (#cfg-atelier) Le moteur pose `cfg-en-cours` sur pour passer de l'un à l'autre ; cette feuille se charge seule de montrer et de cacher. Parti pris de mise en page : du blanc, des filets d'un pixel, des capitales espacées pour les micro-libellés, le rouge --laque en accent rare. Aucun coin arrondi, aucune ombre portée molle. ───────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════ 0. RÉGLAGES COMMUNS AUX DEUX ÉCRANS ═══════════════════════════════════════════════════════════ */ #cfg-racine, #cfg-atelier{ min-width:0 } /* Gouttière de secours : seulement si la coquille n'utilise pas `.wrap`, pour ne jamais doubler le retrait latéral. */ #cfg-racine:not(:has(.wrap)), #cfg-atelier:not(:has(.wrap)){ max-width:var(--max);margin-inline:auto;padding-inline:var(--gouttiere)} /* Bascule d'écran. Une règle d'auteur l'emporte sur la feuille du navigateur : un `hidden` oublié sur le conteneur actif ne bloque rien. */ body:not(.cfg-en-cours) #cfg-atelier{display:none} body.cfg-en-cours #cfg-racine{display:none} body.cfg-en-cours #cfg-atelier{display:block} /* L'atelier travaille au calme : le corps ne doit pas rebondir horizontalement quand une rangée d'options défile. */ body.cfg-en-cours{overscroll-behavior-x:none} /* ══ LE SOCLE — mode étapes sur grand écran ═══════════════════ L'atelier passait en trois colonnes sur grand écran : le visuel, un rail vertical de 152 px, les options. Tout y était, mais tout en même temps — vingt-deux composants dans une colonne de cinq mille pixels. Le pas-à-pas existait déjà, armé sous 900 px seulement. Il l'est maintenant à toutes les largeurs, et sa mise en page devient celle de la maquette B : la montre prend la moitié gauche et ne bouge plus, un seul composant à droite, et le rail des composants descend se coller au bandeau du prix — les deux ne font plus qu'un socle, en bas, sous la main. Rien ne défile sauf les options, chez elles. ═════════════════════════════════════════════════════════════ */ @media(min-width:901px){ /* ── La montre prend la moitié gauche, BORD À BORD ────────── La maquette ne met pas la montre dans un cadre : la moitié gauche de l'écran EST la scène — un dégradé crème d'un bord à l'autre, un filet pour toute séparation, et la montre au milieu. On avait gardé le cadre carré de l'ancien atelier, posé dans la gouttière de la page, avec sa bordure et son fond : 492 px de montre là où la maquette en donne 634, et cent quarante pixels de page blanche autour d'elle. Trois choses la rapetissaient, toutes MESURÉES au navigateur, fenêtre de 1 440 × 900, V6-44-SA ouverte : · la gouttière de `.wrap`, 35 px à gauche ; · les 37 px de marge haute de l'atelier ; · la ligne « Choisir un autre modèle », 87 px de plus — le cadre commençait à 202 px du haut au lieu de 78, et `calerVisuel()`, qui mesure ce qui sépare le haut du cadre du haut du socle, lui retirait ces cent vingt-quatre pixels. La colonne reprend donc la largeur entière, le haut de l'écran est rendu à la montre, et le lien du retour se pose EN SURIMPRESSION dans le coin de la scène — il ne pousse plus rien. */ body.cfg-etapes-on .cfg-atelier-in{ grid-template-columns:minmax(0,46%) minmax(0,54%); max-width:none;width:100%;padding-inline:0;column-gap:0; min-height:calc(100svh - var(--header) - var(--cfg-socle-h))} body.cfg-etapes-on #cfg-atelier{ position:relative;padding-top:0; /* Le socle, mesuré : le bandeau du prix et le rail des composants. */ --cfg-socle-h:calc(var(--cfg-barre-h,96px) + var(--cfg-rail-h,60px))} /* La colonne du visuel devient la scène : c'est elle qui porte le fond, plus le cadre carré qui vit dedans. */ body.cfg-etapes-on .cfg-visuel{ position:sticky;top:var(--header);align-self:start; /* La hauteur est MESURÉE par `calerVisuel()` — du haut de la colonne au haut du socle. Le calcul ci-dessous n'est que le repli : il suppose que la colonne commence sous l'en-tête, ce qui n'est vrai qu'au pixel près. */ height:var(--cfg-colonne-h,calc(100svh - var(--header) - var(--cfg-socle-h))); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px; padding:0; background:radial-gradient(ellipse 58% 52% at 50% 44%, #FFFFFF 0%,var(--creme) 64%,var(--sable) 100%); border-right:1px solid var(--trait)} /* Le cadre n'a plus ni fond ni bordure : il n'est plus qu'un carré où la pile se pose. La largeur vient de `calerVisuel()`, qui mesure la place réelle au-dessus du socle. */ body.cfg-etapes-on #cfg-scene{ /* `flex:0 0 auto` : sans lui, la colonne comprimait le carré d'un demi-pixel à chaque mesure et la scène cessait d'être carrée. */ flex:0 0 auto;width:var(--cfg-large);max-width:none;margin:0; background:none;border:0} body.cfg-etapes-on .cfg-vue-barre, body.cfg-etapes-on .cfg-visuel .cfg-mention{width:var(--cfg-large);max-width:var(--cfg-large)} /* La réglette de rotation tient sur UNE ligne, comme dans la maquette : `flex:1 0 100%` la renvoyait sous le compteur et la barre montait à 70 px — soixante-dix pixels pris sur la montre, et le tout passait sous le rail des composants. */ body.cfg-etapes-on .cfg-vue-barre{ /* `flex:0 0 auto`, comme la scène : la réglette est ce que la montre se réserve en bas, et une réglette qui se laisse écraser rend une mesure plus petite à chaque passage — la montre grandissait sans fin, de huit pixels en huit pixels, jusqu'à pousser la réglette sous le rail. */ flex:0 0 auto;flex-wrap:nowrap;align-items:center;gap:12px;margin:0} body.cfg-etapes-on .cfg-vue-barre #cfg-vue{flex:1 1 auto;min-width:0;margin-top:0} /* Sur une ligne, le compteur se pliait en deux — « 01 / » puis « 30 ». */ body.cfg-etapes-on .cfg-vue-compteur{flex:0 0 auto;white-space:nowrap} /* Le fil d'Ariane ne garde que la réserve de l'en-tête fixé — pas les vingt-quatre pixels d'air qu'il posait en plus, et qui repoussaient la montre d'autant. */ body.cfg-etapes-on nav.ariane{padding-top:var(--header)} /* La mention légale du visuel n'a pas sa place au milieu du dégradé : elle vit déjà dans la colonne des options (`.cfg-mention-visuel`). */ body.cfg-etapes-on .cfg-visuel > .cfg-mention{display:none} /* Le retour au choix du modèle se pose dans le coin de la scène. Il reste un lien, il ne pousse plus la montre de cent vingt-quatre pixels vers le bas. */ body.cfg-etapes-on .cfg-retour{ position:absolute;z-index:3;top:14px;left:var(--gouttiere); max-width:calc(46% - var(--gouttiere) * 2); padding:0;margin:0} /* La colonne des options garde, elle, la gouttière de la page — le rail est fixé au socle et porte déjà la sienne. */ body.cfg-etapes-on .cfg-panneau{ padding-inline:var(--gouttiere);padding-top:clamp(22px,3vw,44px)} /* Le rail quitte la colonne du milieu pour le socle. */ body.cfg-etapes-on .cfg-sommaire{ position:fixed;left:0;right:0;top:auto;bottom:var(--cfg-barre-h,96px);z-index:41; max-height:none;margin:0;padding:9px var(--gouttiere) 10px; background:var(--papier);border-top:1px solid var(--trait);border-bottom:0; box-shadow:0 -10px 26px rgba(17,17,20,.06)} /* Le bandeau du prix ferme le socle, sur toute la largeur — et tient sur UNE ligne. En anglais, « Save this configuration » et « Add to cart » passaient à la ligne : le bandeau montait à 232 px, poussait le rail d'autant, et la montre tombait de 506 à 353 px pour lui faire place. Les commandes ne se plient plus, elles se resserrent. */ body.cfg-etapes-on .cfg-barre{ position:fixed;left:0;right:0;bottom:0;z-index:42; border-top:1px solid var(--trait);border-radius:0;margin:0; padding-inline:var(--gouttiere);gap:clamp(10px,1.4vw,26px)} /* TOUT ce que porte le bandeau tient sur une ligne — y compris le bouton « Enregistrer » que le module du compte greffe après coup, et qui n'a pas la classe `btn` : en anglais il se pliait sur cinq lignes, 205 px de haut à lui seul. */ /* Rien ne se comprime : `min-width:0` laissait le bouton « Enregistrer » tomber à 173 px de large et empiler son libellé sur cinq lignes — 205 px de bandeau, autant de pris sur la montre. Les commandes gardent leur largeur ; si la fenêtre est trop étroite, le bandeau passe à la ligne, ce qui est honnête, là où la compression donnait une colonne de mots. */ body.cfg-etapes-on .cfg-barre > *{white-space:nowrap;flex:0 0 auto} body.cfg-etapes-on .cfg-barre .cfg-finance{white-space:normal;flex:0 1 auto} /* Le bouton « Enregistrer » est greffé par le module du compte, et sa feuille arrive après coup : sur une page traduite il était encore un bloc quand le socle s'est mesuré, son icône et son libellé l'un sous l'autre. On lui pose sa forme ici, où le socle la voit tout de suite. */ body.cfg-etapes-on .cfg-barre .cpt-cfg-enregistrer{ display:inline-flex;align-items:center;gap:10px;width:auto} body.cfg-etapes-on .cfg-finance{min-width:0;flex:0 1 auto} body.cfg-etapes-on .cfg-barre-prix{flex:0 0 auto} /* La page rend au socle la hauteur qu'il prend. */ body.cfg-etapes-on #cfg-atelier{ padding-bottom:calc(var(--cfg-barre-h,96px) + var(--cfg-rail-h,60px) + 16px)} /* La montre tient la moitié gauche et ne bouge plus : elle n'a plus rien à suivre, il n'y a qu'un composant à l'écran. */ body.cfg-etapes-on .cfg-visuel{position:static} body.cfg-etapes-on #cfg-scene{margin-inline:0} /* Un composant à l'écran, et la colonne entière pour lui : les options ne défilent plus en rangée derrière une flèche, elles s'étalent en grille. C'est le parti pris de la maquette — tout ce qui se choisit est visible d'un coup. */ } /* ── La CARTE et la GRILLE sortent de la requête « grand écran » ── Elles n'étaient armées qu'au-dessus de 901 px : le téléphone gardait la rangée défilante de vignettes de 88 px, c'est-à-dire une autre charte que celle qu'on a validée. Ce sont les mêmes règles, à un seul endroit ; la largeur des cases se règle plus bas, par point de rupture — la maquette ne change pas, elle se resserre. */ body.cfg-etapes-on .cfg-choix{ display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px;margin-top:24px;overflow:visible;padding-bottom:0; -webkit-mask-image:none;mask-image:none} body.cfg-etapes-on .cfg-fleche{display:none!important} /* ── L'option redevient une CARTE ─────────────────────────── Dans la rangée défilante, une option n'était qu'une vignette de 94 px avec son nom dessous et un trait rouge pour dire qu'elle était prise. Mise en grille, elle gardait ces 94 px au milieu d'une case de 166 : une colonne de petites images flottant dans du vide, des noms coupés au tiers (« Titane et traitement... »), et le prix en gris pâle. La maquette en fait une carte : cadre, fond papier, image carrée sur fond crème du bord au bord de la carte, nom à l'encre pleine, prix dessous — et c'est le CADRE qui devient rouge quand l'option est retenue, pas un filet sous l'image. */ body.cfg-etapes-on .cfg-option{ scroll-snap-align:none;width:auto; display:grid;gap:7px;padding:12px 10px 13px;text-align:center; border:1px solid var(--trait);background:var(--papier); transition:border-color .18s,transform .18s,box-shadow .18s} body.cfg-etapes-on .cfg-option:hover{ border-color:var(--encre-doux);transform:translateY(-3px); box-shadow:0 10px 22px rgba(17,17,20,.08)} /* `cover` recadrait la vignette : une couronne large se retrouvait rognée à gauche et à droite. La maquette pose l'image entière. */ body.cfg-etapes-on .cfg-option-vignette{ order:1;border:0;object-fit:contain;background:var(--creme)} body.cfg-etapes-on .cfg-option:hover .cfg-option-vignette, body.cfg-etapes-on .cfg-option.on .cfg-option-vignette, body.cfg-etapes-on .cfg-option[aria-pressed="true"] .cfg-option-vignette{ border-color:transparent} /* Le trait rouge sous la vignette cède la place au cadre rouge. */ body.cfg-etapes-on .cfg-option::after{display:none} body.cfg-etapes-on .cfg-option-nom{ order:2;margin-top:0;font-size:.86rem;line-height:1.3;font-weight:400; color:var(--encre)} body.cfg-etapes-on .cfg-option.on .cfg-option-nom, body.cfg-etapes-on .cfg-option[aria-pressed="true"] .cfg-option-nom{font-weight:500} body.cfg-etapes-on .cfg-option-prix{ order:3;margin-top:0;font-size:.76rem;letter-spacing:0;font-weight:400; color:var(--encre-tres-doux)} body.cfg-etapes-on .cfg-option.on, body.cfg-etapes-on .cfg-option[aria-pressed="true"]{ border-color:var(--laque);box-shadow:inset 0 0 0 1px var(--laque)} body.cfg-etapes-on .cfg-option.on .cfg-option-prix, body.cfg-etapes-on .cfg-option[aria-pressed="true"] .cfg-option-prix{color:var(--laque)} /* La finition que le modèle porte d'origine se nomme : sans elle, on ne sait pas laquelle des quatorze est celle du catalogue. */ body.cfg-etapes-on .cfg-option-defaut{ order:4;font-family:var(--display);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--encre-tres-doux)} @media(min-width:901px){ /* Les pastilles des composants reviennent : sur un téléphone elles coûtaient trop de hauteur, ici la largeur est là et c'est la barre qu'on cherche du regard. */ /* L'identifiant l'emporte : les règles du téléphone, plus bas dans la feuille, rangent la piste hors de l'écran à égalité de poids. */ body.cfg-etapes-on #cfg-sommaire.en-ligne{flex-wrap:nowrap;gap:14px} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste{ display:flex;flex:1 1 auto;order:2;min-width:0;max-height:none; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste::-webkit-scrollbar{display:none} /* Les libellés ne se plient pas : « Automatic bridge painting » tenait sur trois lignes, le socle gagnait cent cinquante pixels et la montre les perdait — 353 px en anglais contre 506 en français. La piste défile plutôt que de s'empiler. */ body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste button{ white-space:nowrap;flex:0 0 auto} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-barre{ order:3;flex:0 0 auto;border-top:0;padding-top:0;margin-top:0;gap:8px} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-tete{order:1;flex:0 0 auto} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-nav{ flex:0 0 auto;min-width:0;width:auto;min-height:40px;padding:6px 14px} /* Le bouton du récapitulatif ferme la rangée, comme dans la maquette. */ } /* Le bouton du récapitulatif vit dans le bandeau du prix, avec les deux autres commandes permanentes. Il s'allume quand la vue est ouverte. */ .cfg-barre .cfg-som-recap{flex:0 0 auto;white-space:nowrap} .cfg-barre .cfg-som-recap b{font:inherit} .cfg-barre .cfg-som-recap[aria-pressed="true"]{ background:var(--encre);border-color:var(--encre);color:#fff} /* Sur téléphone il passait à la ligne et volait cinquante-cinq pixels aux options — celles-là même qu'on venait de faire remonter. Le récapitulatif y reste ce qu'il était : la fin de la colonne, qu'on atteint en défilant. */ @media(max-width:900px){.cfg-barre .cfg-som-recap{display:none}} @media(min-width:901px){ /* Le récapitulatif prend la place des options quand on le demande — la dernière étape de la maquette, appelée par son bouton. */ body.cfg-etapes-on .cfg-bilan{display:none} body.cfg-etapes-on.cfg-recap-on #cfg-composants{display:none} body.cfg-etapes-on.cfg-recap-on .cfg-bilan{ display:block;margin-top:0; max-height:var(--cfg-place,60vh);overflow-y:auto;overscroll-behavior:contain} body.cfg-etapes-on .cfg-panneau{padding-bottom:0} } /* ── L'atelier garde l'écran pour lui ────────────────────────── Une fois dans l'atelier, la page n'a plus rien à dire après la montre : le pied de page ajoutait deux mille pixels sous les options, qu'on atteignait en défilant pendant que la barre d'achat restait collée en bas — on croyait avoir raté quelque chose. Il ne s'affiche que sur la grille des modèles. */ body.cfg-en-cours footer{display:none} /* ═══════════════════════════════════════════════════════════ 1. ÉCRAN RACINE — LE CHOIX DU MODÈLE Refait le 18/09/2026 : « c'est pas très moderne et il faut trop scroll ». Trois mille cinq cents pixels pour huit modèles, dont une ouverture qui n'occupait que la moitié gauche de l'écran, des cartes encadrées de quatre cent quinze pixels de haut — une seule colonne au téléphone, donc huit écrans rien que pour la grille — et un rappel en trois temps qui prenait une bande à lui seul. Rien n'est retiré : tout se resserre et se range en colonnes. Les anciennes sections 14.1 et 15, qui corrigeaient cet écran par petites touches, sont repliées ici — il n'y a plus qu'un endroit où le premier écran se décide. ═══════════════════════════════════════════════════════════ */ #cfg-racine{padding-block:clamp(14px,2vw,30px) clamp(48px,6vw,86px)} /* ── 1.1 L'ouverture : la phrase à gauche, les faits à droite ── Elle tenait toute la largeur et ne remplissait que la moitié gauche. En deux colonnes, elle perd quatre-vingts pixels de haut et la première rangée de modèles entre dans le premier écran. */ .cfg-ouverture{ display:grid;grid-template-columns:minmax(0,1.45fr) minmax(250px,.55fr); gap:clamp(20px,3vw,60px);align-items:end; padding-bottom:clamp(20px,2.4vw,32px); border-bottom:1px solid var(--trait)} .cfg-intro .sur{color:var(--encre-tres-doux)} .cfg-intro h1{ font-family:var(--display);font-weight:400; font-size:clamp(1.9rem,4.2vw,3.2rem); text-transform:uppercase;line-height:.98;letter-spacing:.01em; margin-top:12px;max-width:20ch;text-wrap:balance} .cfg-chapeau{ margin-top:16px;max-width:58ch;color:var(--encre-doux); font-weight:300;line-height:1.62;font-size:.92rem} .cfg-cote{display:flex;flex-direction:column;align-items:flex-start; gap:clamp(18px,2.2vw,26px)} /* Trois repères, trois lignes, un filet entre elles : le chiffre en Oswald, son libellé en petites capitales. Ils se lisaient comme une légende sous le chapeau ; ce sont trois faits, ils se tiennent. */ .cfg-reperes{display:flex;flex-direction:column;align-items:stretch; gap:0;margin:0;width:100%} .cfg-reperes b{ display:block;font-family:var(--display);font-weight:500; font-size:clamp(1.05rem,1.5vw,1.4rem);letter-spacing:.01em; color:var(--encre);padding-block:10px;border-top:1px solid var(--trait)} .cfg-reperes b:first-child{border-top:0;padding-top:0} .cfg-reperes b span{ font-family:var(--texte);font-size:var(--micro);letter-spacing:var(--piste); text-transform:uppercase;font-weight:600;color:var(--encre-tres-doux)} .cfg-reperes b:last-child{color:var(--laque)} /* La porte de l'assistant tient la largeur de sa colonne : c'est le seul bouton de l'écran, il n'a pas à se faire petit. */ .cfg-cote .cfg-accompagne{margin-top:0;display:block;width:100%} .cfg-cote #cfg-assistant-ouvrir{width:100%;justify-content:center} .cfg-cote .cfg-accompagne p{ margin-top:12px;max-width:40ch;font-size:.84rem;line-height:1.5} /* ── 1.2 La montre laissée en chemin ──────────────────────── Elle rouvrait l'atelier toute seule et l'écran d'accueil devenait inatteignable. Elle attend maintenant en tête de grille. */ .cfg-reprendre{ display:flex;flex-wrap:wrap;align-items:center; gap:12px clamp(16px,2vw,28px); margin-top:clamp(20px,2.4vw,32px); padding:clamp(12px,1.4vw,18px) clamp(16px,1.8vw,24px); background:var(--creme);border-left:2px solid var(--laque)} .cfg-reprendre[hidden]{display:none} .cfg-reprendre-mot{ font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-tres-doux)} .cfg-reprendre-nom{ font-family:var(--display);font-weight:500;font-size:1.05rem; text-transform:uppercase;letter-spacing:.04em;color:var(--encre); margin-right:auto} .cfg-reprendre-actions{ display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,24px)} .cfg-reprendre-actions .btn{padding:13px 26px;min-height:46px} /* ── 1.3 La piste des modèles ─────────────────────────────── En grille, huit modèles faisaient deux rangées sur grand écran et quatre au téléphone : on descendait pour voir la V7-38, et chaque carte était petite pour que la rangée tienne. En piste, elles sont toutes sur une ligne, la montre est plus grande, et la cinquième qui dépasse du cadre dit qu'il y en a d'autres — mieux qu'une flèche. Les flèches sont là quand même, pour la souris. */ .cfg-piste{ --cfg-g:clamp(12px,1.6vw,22px); position:relative;margin-top:clamp(22px,2.6vw,34px)} #cfg-modeles{ display:flex;align-items:flex-start;gap:var(--cfg-g); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;-ms-overflow-style:none; /* La carte se soulève au survol : sans cette marge, le mouvement était rogné par le cadre qui défile. */ padding-block:4px 12px} #cfg-modeles::-webkit-scrollbar{display:none} /* Quatre cartes et un tiers : la cinquième entame le bord droit. */ .cfg-modele{ flex:0 0 calc((100% - 3 * var(--cfg-g)) / 4.35); scroll-snap-align:start} /* Les deux flèches, posées sur le bord, au milieu de la VIGNETTE — `--cfg-vign-h` est mesurée par le script, parce que la carte porte cent pixels de texte sous la montre et qu'une flèche centrée sur l'ensemble tombe sur le nom du modèle. */ .cfg-piste-fleche{ position:absolute;z-index:3;top:calc(4px + var(--cfg-vign-h,150px) / 2); transform:translateY(-50%); width:46px;height:46px;display:flex;align-items:center;justify-content:center; cursor:pointer;background:var(--papier);border:1px solid var(--trait); color:var(--encre);font-size:1.5rem;line-height:1; box-shadow:0 2px 14px rgba(17,17,20,.09); transition:background .25s var(--ease),border-color .25s var(--ease), color .25s var(--ease),opacity .25s var(--ease)} .cfg-piste-prec{left:calc(var(--cfg-g) * -.5)} .cfg-piste-suiv{right:calc(var(--cfg-g) * -.5)} .cfg-piste-fleche span{display:block;margin-top:-3px} @media (hover:hover) and (pointer:fine){ .cfg-piste-fleche:hover{background:var(--encre);border-color:var(--encre);color:#fff} } /* Une flèche qui ne mène nulle part s'efface, mais garde sa place : la piste ne doit pas sauter d'un bout à l'autre. */ .cfg-piste-fleche:disabled{opacity:0;pointer-events:none} /* Rien à faire défiler — un très grand écran montre les huit modèles : ni flèches, ni jauge. */ .cfg-piste-fixe .cfg-piste-fleche, .cfg-piste-fixe .cfg-piste-jauge{display:none} /* La jauge : où l'on en est dans les huit modèles. */ .cfg-piste-jauge{ position:relative;height:2px;background:var(--trait); margin-top:clamp(10px,1.2vw,16px);overflow:hidden} .cfg-piste-jauge i{ display:block;height:100%;background:var(--encre); transition:transform .18s linear,width .25s var(--ease)} /* La carte n'a plus de cadre ni de fond : c'est la vignette qui lui donne son assise, comme aux cartes produit du reste du site. Le cadre et ses trente pixels de marge intérieure coûtaient la hauteur d'une ligne de texte par carte, et faisaient un damier. */ .cfg-modele{ position:relative;display:flex;flex-direction:column;align-items:stretch; width:100%;text-align:center;background:none;border:0;padding:0; cursor:pointer; transition:transform .38s var(--ease)} @media (hover:hover) and (pointer:fine){ .cfg-modele:hover{transform:translateY(-3px)} } /* Le filet rouge se dessine sous la carte : la réaction n'est pas qu'un changement de couleur. Au doigt, `:hover` reste collé à la carte touchée et le filet ne repartirait jamais. */ .cfg-modele::after{ content:'';position:absolute;left:0;right:0;bottom:-10px;height:2px; background:var(--laque);transform:scaleX(0);transform-origin:left; transition:transform .42s var(--ease)} @media (hover:hover) and (pointer:fine){ .cfg-modele:hover::after{transform:scaleX(1)} } .cfg-modele:focus-visible::after{transform:scaleX(1)} /* La vignette : un aplat crème qui tient la place avant l'image, et le packshot posé dedans. Le rapport est couché — la montre l'est aussi dans le fichier, `contain` ne la rogne pas — parce que c'est la hauteur de l'image qui décide de la hauteur de la grille. */ .cfg-modele-vign{ position:relative;display:block;background:var(--creme); aspect-ratio:16/11;overflow:hidden;padding:6%} .cfg-modele-vign img{ display:block;width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply; transition:transform .8s var(--ease)} @media (hover:hover) and (pointer:fine){ .cfg-modele:hover .cfg-modele-vign img{transform:scale(1.07) translateY(-2%)} } .cfg-modele h3{ font-family:var(--display);font-weight:500;font-size:1rem; text-transform:uppercase;letter-spacing:.05em;line-height:1.18; margin-top:15px} .cfg-modele small{ display:block;font-size:.71rem;letter-spacing:.06em;text-transform:uppercase; font-weight:500;color:var(--encre-tres-doux);margin-top:7px} /* Le prix tient sur UNE ligne : « À partir de » passait au-dessus, et chaque carte y gagnait vingt pixels pour ne rien dire de plus. */ .cfg-modele em{ display:block;font-style:normal;font-size:.88rem;font-weight:500; color:var(--encre);margin-top:8px} .cfg-modele em span{font-size:.72rem;font-weight:400;color:var(--encre-doux)} /* Le geste se nomme — une grille de cartes muettes ne dit pas qu'on peut cliquer —, mais un libellé et une flèche suffisent : le bouton encadré coûtait cinquante pixels par carte. */ .cfg-modele .cfg-modele-cta{ display:inline-flex;align-items:center;gap:7px;align-self:center; margin-top:11px;padding:0;border:0;background:none; font-size:0.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600; color:var(--encre-doux); transition:color .3s var(--ease)} .cfg-modele .cfg-modele-cta::after{ content:'\2192';font-size:.8rem;line-height:1; transition:transform .3s var(--ease)} @media (hover:hover) and (pointer:fine){ .cfg-modele:hover .cfg-modele-cta, .cfg-modele:focus-visible .cfg-modele-cta{color:var(--laque)} .cfg-modele:hover .cfg-modele-cta::after{transform:translateX(4px)} } /* La carte creuse : la même géométrie, aucun contenu, un lent balayage qui dit « ça arrive » sans faire clignoter la page. */ .cfg-fantome{ pointer-events:none;min-height:250px; background:linear-gradient(100deg,var(--creme) 30%,var(--sable) 50%,var(--creme) 70%); background-size:300% 100%;animation:cfg-attente 1.5s var(--ease) infinite} .cfg-fantome::after{display:none} @keyframes cfg-attente{from{background-position:100% 0}to{background-position:-100% 0}} /* ── 1.4 Les trois temps ──────────────────────────────────── Le titre tenait une bande à lui seul et les trois temps une autre : six cents pixels pour trois paragraphes de rappel. Sur grand écran le titre se range à gauche, le bouton sous lui, et la bande se replie de moitié. */ .cfg-suite{padding-block:clamp(40px,5vw,72px) 0} .cfg-suite-in{ display:grid;grid-template-columns:minmax(190px,.75fr) minmax(0,2.9fr); column-gap:clamp(24px,3.2vw,56px);row-gap:clamp(18px,2vw,26px); align-items:start} .cfg-suite .titre-centre{grid-column:1;grid-row:1;text-align:left;margin:0} .cfg-suite .titre-centre h2{font-size:clamp(1.5rem,2.4vw,2.2rem)} .cfg-suite .cfg-etapes{grid-column:2;grid-row:1/span 2} .cfg-suite .sous-cta{grid-column:1;grid-row:2;text-align:left;margin:0} .cfg-etapes{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px;background:var(--trait);border:1px solid var(--trait)} .cfg-etape{ background:var(--papier);padding:clamp(18px,1.9vw,26px); transition:background .38s var(--ease)} .cfg-etape:hover{background:var(--creme)} .cfg-etape-num{ display:block;font-family:var(--display);font-weight:500;font-size:.95rem; letter-spacing:.14em;color:var(--laque);line-height:1} .cfg-etape h3{ font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.4vw,1.3rem); text-transform:uppercase;letter-spacing:.03em;line-height:1.1;margin-top:10px} .cfg-etape p{ margin-top:9px;color:var(--encre-doux);font-weight:300; font-size:.85rem;line-height:1.6} /* ── 1.5 Ce que la largeur change ─────────────────────────── */ @media(max-width:1180px){ .cfg-modele{flex-basis:calc((100% - 2 * var(--cfg-g)) / 3.35)} } @media(max-width:1020px){ /* L'ouverture repasse sur une colonne, et les trois repères reprennent leur rang : une ligne, trois chiffres. */ .cfg-ouverture{grid-template-columns:minmax(0,1fr);align-items:start; gap:clamp(18px,3vw,26px)} .cfg-intro h1{max-width:none} .cfg-reperes{flex-direction:row;flex-wrap:wrap;align-items:baseline; gap:6px clamp(14px,2.6vw,26px)} .cfg-reperes b{border-top:0;padding-block:0;font-size:1.05rem} .cfg-cote{gap:16px} .cfg-cote .cfg-accompagne{display:flex;flex-wrap:wrap;align-items:center; gap:12px 18px} .cfg-cote #cfg-assistant-ouvrir{width:auto} .cfg-cote .cfg-accompagne p{margin-top:0} /* Le titre des trois temps repasse au-dessus, et le bouton en bas. */ .cfg-suite-in{grid-template-columns:minmax(0,1fr)} .cfg-suite .titre-centre, .cfg-suite .cfg-etapes, .cfg-suite .sous-cta{grid-column:1;grid-row:auto} .cfg-suite .titre-centre{text-align:center;margin-bottom:clamp(20px,2.6vw,30px)} .cfg-suite .sous-cta{text-align:center;margin-top:clamp(22px,3vw,34px)} } @media(max-width:820px){ .cfg-etapes{grid-template-columns:minmax(0,1fr)} .cfg-etape{padding:clamp(16px,4vw,22px)} } @media(max-width:760px){ /* Au pouce, deux cartes et un cinquième : on fait glisser, et la troisième qui dépasse dit qu'il y en a d'autres. Les flèches s'effacent — on ne vise pas un bouton de quarante-six pixels posé sur une image quand le doigt fait déjà défiler. */ .cfg-modele{flex-basis:calc((100% - 1.2 * var(--cfg-g)) / 2.2)} .cfg-piste-fleche{display:none} .cfg-modele h3{font-size:.9rem;margin-top:12px} .cfg-modele small{font-size:.66rem;margin-top:5px} .cfg-modele em{font-size:.82rem;margin-top:6px} .cfg-modele em span{font-size:.66rem} .cfg-modele .cfg-modele-cta{margin-top:9px;font-size:.6rem;letter-spacing:.12em} .cfg-fantome{min-height:190px} .cfg-reprendre{gap:10px 16px} .cfg-reprendre-nom{margin-right:0;width:100%} .cfg-reprendre-actions{width:100%;justify-content:space-between} } /* Le fil d'Ariane est le premier élément après l'en-tête : site.js lui pose bien `.entete-reserve`, mais `.ariane{padding-block:24px}` est écrit trois cents lignes plus bas dans site.css et écrase la réserve. Résultat, « Accueil › Le configurateur » passait SOUS l'en-tête, à toutes les largeurs. Réparé ici parce que la feuille commune ne m'appartient pas — et cette feuille-ci ne sert que cette page. */ .ariane.entete-reserve{padding-top:calc(var(--header) + 24px)} /* ═══════════════════════════════════════════════════════════ 2. ÉCRAN ATELIER — OSSATURE ═══════════════════════════════════════════════════════════ */ /* Une seule mesure pour tout le visuel : la scène, la commande de rotation et la légende se calent dessus. Elle était recopiée quatre fois, et sur un écran bas — un téléphone tenu en paysage, 390 px de haut — elle tombait à 121 px : la légende se pliait en colonne et la barre de rotation faisait 124 px de haut à elle seule. */ #cfg-atelier{ --cfg-large:min(100%,calc(100svh - var(--header) - 190px),820px); padding-block:clamp(22px,2.6vw,38px) clamp(40px,5vw,80px)} /* La colonne de gauche porte la montre, la droite les composants. On visait le conteneur par `:has(> #cfg-composants)` — sans le nommer. Manque de chance, #cfg-composants est l'enfant direct du PANNEAU, pas du conteneur : c'est le panneau qui devenait la grille, et l'atelier restait sur une seule colonne de cinq mille pixels de haut. On nomme. */ .cfg-atelier-in{ display:grid; /* Trois colonnes : le visuel, le rail de navigation, les options. Le rail se tient entre les deux parce que c'est là qu'on le cherche — au centre du regard, pas en haut d'une liste. */ grid-template-columns:minmax(0,1fr) 152px minmax(320px,430px); column-gap:clamp(20px,2.4vw,40px);row-gap:0; align-items:start} /* L'en-tête (titre, référence, diamètre) tient toute la largeur. Le `:not` protège le conteneur de grille : si la coquille pose le titre directement à côté des colonnes, il ne devient pas l'en-tête. */ .cfg-panneau-tete{ display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(14px,2vw,28px); padding-bottom:clamp(14px,1.8vw,20px);margin-bottom:clamp(18px,2.2vw,28px); border-bottom:1px solid var(--trait)} /* Coquille à plat : le titre et ses satellites prennent toute la largeur. */ #cfg-atelier :has(> #cfg-composants) > #cfg-titre, #cfg-atelier :has(> #cfg-composants) > #cfg-ref, #cfg-atelier :has(> #cfg-composants) > #cfg-diametre, #cfg-atelier :has(> #cfg-composants) > #cfg-reset, #cfg-atelier :has(> #cfg-composants) > #cfg-total, #cfg-atelier :has(> #cfg-composants) > #cfg-ajouter{grid-column:1/-1;justify-self:start} #cfg-titre{ font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:clamp(1.9rem,3.6vw,3.1rem);line-height:.94;letter-spacing:.005em; margin-right:auto} #cfg-ref,#cfg-diametre{ font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-tres-doux);white-space:nowrap} #cfg-ref{color:var(--encre-doux)} /* Un filet fin sépare la référence du diamètre quand ils se suivent. */ #cfg-ref + #cfg-diametre::before{ content:'';display:inline-block;width:16px;height:1px;background:var(--trait); vertical-align:middle;margin-right:14px} /* Retour au choix du modèle : un lien, pas un bouton. */ #cfg-reset{ font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-doux);padding-bottom:4px;position:relative; transition:color .25s var(--ease)} #cfg-reset::after{ content:'';position:absolute;left:0;bottom:0;width:100%;height:1px; background:currentColor;transform:scaleX(1);transform-origin:right; transition:transform .4s var(--ease)} #cfg-reset:hover{color:var(--laque)} #cfg-reset:hover::after{transform:scaleX(0)} /* ═══════════════════════════════════════════════════════════ 3. LA MONTRE — SCÈNE, CALQUES, VUE ═══════════════════════════════════════════════════════════ */ /* La colonne du visuel reste collante pendant qu'on fait défiler les composants. `align-self:start` l'empêche d'être étirée. */ .cfg-visuel{ position:sticky;top:calc(var(--header) + 18px);align-self:start; min-width:0;z-index:2} /* Le cadre est carré et réserve sa place : aucun saut quand les calques arrivent. Fond crème très légèrement éclairci au centre. */ #cfg-scene{ position:relative;width:100%; max-width:var(--cfg-large); aspect-ratio:1;margin-inline:auto;overflow:hidden; background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,var(--creme) 66%); border:1px solid var(--trait); contain:paint} #cfg-calques{position:absolute;inset:0} /* ── La montre remplit son cadre ────────────────────────────── Les calques sont dessinés sur un gabarit de 700 px où la montre n'occupe qu'un peu plus de la moitié de la hauteur : le cadre réservait trois cent soixante-cinq pixels et la montre n'en prenait que cent quatre-vingt-huit. Sur un téléphone, c'est un quart de l'écran pour l'objet qu'on est venu regarder. On agrandit la pile — le cadre la rogne, mais il n'y a rien à rogner : les marges du gabarit sont vides. Le facteur est MESURÉ sur les huit modèles, pas choisi : le plus serré, la V12-46-SA, débordait encore de onze pixels à 1,18. C'est lui qui fixe la règle — 1,09 pour tous. Le gain est modeste, et il faut le dire : la marge du gabarit est mince, l'essentiel du vide vient de la taille du cadre lui-même, pas du dessin. Agrandir vraiment la montre demanderait de réexporter les calques sur un gabarit plus serré. Un nouveau modèle oblige à refaire la mesure. */ body.cfg-etapes-on #cfg-calques{transform:scale(1.09);transform-origin:50% 48%} /* Les calques se superposent, tous au même cadre. `margin:auto` avec `inset:0` centre l'image dès que le moteur lui impose une largeur et une hauteur en style en ligne : il peut donc appliquer une échelle commune calculée sur les dimensions natives sans avoir à positionner quoi que ce soit. */ .cfg-calque{ position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain; object-position:center;font-size:0;color:transparent; pointer-events:none;user-select:none;-webkit-user-drag:none; transition:opacity .2s var(--ease)} /* Un calque qui ne charge pas se masque et ne casse pas la pile. */ .cfg-calque[hidden],.cfg-calque.cfg-mort{display:none} /* Variante de rendu : si le moteur pose `cfg-brut` sur #cfg-calques, chaque calque est dessiné à sa taille native et centré — l'échelle redevient commune à toute la pile, quel que soit le détourage des PNG. Le moteur pilote alors l'échelle par --cfg-echelle. */ #cfg-calques.cfg-brut .cfg-calque{ object-fit:none;transform:scale(var(--cfg-echelle,1));transform-origin:center} /* Indicateur d'attente : discret, en bas à gauche de la scène. Il se masque par l'attribut `hidden` ou par une classe `.off`. */ #cfg-charge{ position:absolute;left:16px;bottom:16px;z-index:3; display:inline-flex;align-items:center;gap:10px; background:rgba(255,255,255,.9);backdrop-filter:blur(6px); border:1px solid var(--trait);padding:7px 13px; font-size:0.66rem;letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-doux); transition:opacity .25s var(--ease)} #cfg-charge::before{ content:'';width:11px;height:11px;flex:0 0 auto; border:1.5px solid var(--trait);border-top-color:var(--laque); border-radius:50%;animation:cfg-tourne .7s linear infinite} #cfg-charge[hidden],#cfg-charge.off,#cfg-charge.masque, #cfg-charge[aria-hidden="true"]{display:none} /* Scène vide : aucun calque n'a pu être décodé. Le message prend le centre du cadre et perd son rouet — il n'y a plus rien à attendre. */ #cfg-charge.cfg-charge-vide{ left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%); max-width:min(88%,320px);text-align:center;display:block; letter-spacing:.1em;line-height:1.7;background:rgba(255,255,255,.94)} #cfg-charge.cfg-charge-vide::before{display:none} @keyframes cfg-tourne{to{transform:rotate(360deg)}} /* Le curseur des trente vues. Piste d'un pixel, poussoir carré. */ #cfg-vue{ display:block;width:100%;max-width:var(--cfg-large); margin:clamp(16px,2vw,24px) auto 0;height:22px; background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize} #cfg-vue:focus{outline:none} #cfg-vue:focus-visible{outline:2px solid var(--laque);outline-offset:4px} /* Un filet d'un pixel ne dit pas « attrape-moi ». On épaissit, on montre la portion parcourue, et le curseur devient une prise franche. */ #cfg-vue::-webkit-slider-runnable-track{ height:3px;border-radius:2px; background:linear-gradient(to right,var(--encre) 0 var(--part,0%),var(--trait) var(--part,0%) 100%)} #cfg-vue::-moz-range-track{ height:3px;border-radius:2px; background:linear-gradient(to right,var(--encre) 0 var(--part,0%),var(--trait) var(--part,0%) 100%)} #cfg-vue::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:30px;height:14px;margin-top:-6px; background:var(--encre);border:0;border-radius:2px; transition:background .22s var(--ease),transform .22s var(--ease)} #cfg-vue::-moz-range-thumb{ width:30px;height:14px;background:var(--encre);border:0;border-radius:2px; transition:background .22s var(--ease),transform .22s var(--ease)} #cfg-vue:hover::-webkit-slider-thumb,#cfg-vue:active::-webkit-slider-thumb{ background:var(--laque);transform:scaleX(1.12)} #cfg-vue:hover::-moz-range-thumb,#cfg-vue:active::-moz-range-thumb{ background:var(--laque);transform:scaleX(1.12)} /* ═══════════════════════════════════════════════════════════ 4. LES COMPOSANTS — COLONNE DE DROITE ═══════════════════════════════════════════════════════════ */ #cfg-composants{min-width:0;display:flex;flex-direction:column} /* ── 4.1 Groupe (catégorie sans élément : Bracelet, Aiguilles…) ── */ .cfg-groupe{min-width:0;padding-top:clamp(20px,2.4vw,30px);margin-top:clamp(4px,1vw,10px)} .cfg-groupe + .cfg-groupe, .cfg-composant + .cfg-groupe{border-top:1px solid var(--trait)} .cfg-groupe-titre{ font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:1.02rem;letter-spacing:.045em;line-height:1.1; display:flex;align-items:baseline;gap:12px} /* Une seconde ligne éventuelle (le choix courant) reste en texte courant. */ .cfg-groupe-titre span + span, .cfg-groupe-titre small{ font-family:var(--texte);font-size:.78rem;font-weight:300;letter-spacing:0; text-transform:none;color:var(--encre-doux);margin-left:auto;text-align:right} /* ── 4.2 Sous-onglets de familles (les bracelets) ───────────── */ /* Des onglets fins : du texte, un filet, rien de plus. */ .cfg-familles{ display:flex;align-items:flex-end;gap:clamp(14px,1.8vw,26px); margin-top:14px;padding-bottom:0; border-bottom:1px solid var(--trait); overflow-x:auto;overscroll-behavior-x:contain; scrollbar-width:none} .cfg-familles::-webkit-scrollbar{display:none} .cfg-familles > *{flex:0 0 auto} .cfg-famille{ flex:0 0 auto;white-space:nowrap;padding:0 0 9px;margin-bottom:-1px; font-size:0.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600; color:var(--encre-tres-doux); border-bottom:1px solid transparent; transition:color .25s var(--ease),border-color .25s var(--ease)} .cfg-famille:hover{color:var(--encre)} .cfg-famille.on{color:var(--encre);border-bottom-color:var(--laque)} /* ── 4.3 Composant (un calque = un bloc) ────────────────────── */ .cfg-composant{ min-width:0;padding-block:clamp(18px,2.2vw,26px); border-top:1px solid var(--trait)} /* Dans un groupe, les sous-blocs se serrent et le premier ne reprend pas un filet qui vient d'être posé par le titre du groupe. */ .cfg-groupe > .cfg-composant:first-of-type, .cfg-familles + .cfg-composant{border-top:0} .cfg-groupe > .cfg-composant{padding-block:clamp(14px,1.8vw,20px)} #cfg-composants > .cfg-composant:first-child{border-top:0;padding-top:clamp(4px,1vw,10px)} /* Un composant dont la seule rangée est masquée (dépendance non satisfaite) laissait quand même son filet et ses marges : un trait de séparation orphelin au milieu de la colonne. On le retire tant qu'il est vide. */ .cfg-composant:not(:has(> *:not([hidden]))){display:none} .cfg-composant-titre{ display:flex;align-items:baseline;gap:12px; font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-doux)} /* Le choix courant, s'il est affiché à droite du libellé. */ .cfg-composant-titre span + span, .cfg-composant-titre small, .cfg-composant-titre em{ font-size:.78rem;letter-spacing:0;text-transform:none;font-weight:400; font-style:normal;color:var(--encre);margin-left:auto;text-align:right; max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ── 4.4 La rangée d'options ────────────────────────────────── */ /* Rangée horizontale défilable. Aucun débordement de page : la rangée reste dans sa colonne, le fondu de droite signale la suite. */ .cfg-choix{ display:flex;gap:clamp(8px,1vw,14px); margin-top:14px;padding-bottom:8px; overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-left:0; scrollbar-width:thin;scrollbar-color:var(--trait) transparent; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent 100%)} /* Rangée courte : pas de fondu inutile. */ .cfg-choix:not(:hover){scrollbar-color:transparent transparent} .cfg-choix::-webkit-scrollbar{height:3px} .cfg-choix::-webkit-scrollbar-thumb{background:var(--trait)} .cfg-choix::-webkit-scrollbar-track{background:transparent} /* Sécurité : si le moteur enveloppe chaque option (li, div…), la rangée ne se comprime pas pour autant. */ .cfg-choix > *{flex:0 0 auto} .cfg-choix > *:not(.cfg-option){display:flex} .cfg-option{ display:flex;flex-direction:column;flex:0 0 auto; width:clamp(76px,7.4vw,94px);text-align:center;scroll-snap-align:start; padding:0;background:none} .cfg-option-vignette{ order:1;width:100%;aspect-ratio:1;display:block;object-fit:cover; background:var(--creme);border:1px solid var(--trait); font-size:0;color:transparent;overflow:hidden; transition:border-color .26s var(--ease),background .26s var(--ease)} /* La vignette peut être un conteneur plutôt qu'une image. */ .cfg-option-vignette img{width:100%;height:100%;object-fit:cover;display:block} .cfg-option:hover .cfg-option-vignette{border-color:var(--encre-tres-doux)} /* Le trait rouge sous la vignette : l'option choisie se voit d'un coup d'œil. */ .cfg-option::after{ content:'';order:2;display:block;height:2px;margin-top:7px;background:var(--laque); transform:scaleX(0);transform-origin:center; transition:transform .26s var(--ease)} .cfg-option.on::after, .cfg-option[aria-pressed="true"]::after{transform:scaleX(1)} .cfg-option.on .cfg-option-vignette, .cfg-option[aria-pressed="true"] .cfg-option-vignette{border-color:var(--encre)} .cfg-option-nom{ order:3;display:block;margin-top:8px;font-size:.7rem;line-height:1.25; font-weight:300;color:var(--encre-doux); transition:color .26s var(--ease)} .cfg-option.on .cfg-option-nom, .cfg-option[aria-pressed="true"] .cfg-option-nom{color:var(--encre);font-weight:500} .cfg-option-prix{ order:4;display:block;margin-top:4px;font-size:0.66rem;letter-spacing:.06em; font-weight:500;color:var(--encre-tres-doux)} /* La très grande majorité des options est à 0 € : une ligne vide ne laisse aucun trou dans la rangée. */ .cfg-option-prix:empty{display:none} /* En carte, la maquette écrit « Inclus » plutôt que de laisser un blanc — un blanc à la place d'un prix se lit comme un prix qui n'a pas chargé. Dans la rangée du téléphone, en revanche, ce mot est douze lignes de plus sur quatorze options : la rangée y reste muette. */ /* Même raison pour « Réglage du modèle » : la carte le dit, la rangée du téléphone n'en a pas la place. */ @media(max-width:900px){ .cfg-option-prix.cfg-incluse, .cfg-option-defaut{display:none} } /* ── 4.5 La gravure ─────────────────────────────────────────── */ .cfg-gravure{ margin-top:clamp(16px,2vw,22px);padding:clamp(16px,2vw,22px); background:var(--creme);border:1px solid var(--trait)} .cfg-gravure label{ display:block;font-size:var(--micro);letter-spacing:var(--piste); text-transform:uppercase;font-weight:600;color:var(--encre-doux)} .cfg-gravure input{ width:100%;margin-top:12px;padding:9px 0; background:transparent;border:0;border-bottom:1px solid var(--encre-tres-doux); font-family:var(--display);font-size:1.1rem;letter-spacing:.14em; text-transform:uppercase;color:var(--encre); transition:border-color .25s var(--ease)} .cfg-gravure input::placeholder{ font-family:var(--texte);font-size:.82rem;letter-spacing:0;text-transform:none; font-weight:300;color:var(--encre-tres-doux)} .cfg-gravure input:focus{outline:none;border-bottom-color:var(--laque)} .cfg-gravure p,.cfg-gravure small{ display:block;margin-top:12px;font-size:.72rem;font-weight:300;line-height:1.5; color:var(--encre-doux)} /* ═══════════════════════════════════════════════════════════ 5. RÉCAPITULATIF, PRIX, ACTIONS ═══════════════════════════════════════════════════════════ */ #cfg-recap{ margin-top:clamp(20px,2.4vw,30px);padding-top:14px; border-top:1px solid var(--encre)} .cfg-recap-ligne{ display:flex;align-items:baseline;gap:12px; padding-block:7px;font-size:.78rem;font-weight:300; border-bottom:1px solid var(--trait)} .cfg-recap-ligne:last-child{border-bottom:0} .cfg-recap-ligne > *:first-child{ color:var(--encre-tres-doux);font-size:0.66rem;letter-spacing:.12em; text-transform:uppercase;font-weight:600;flex:0 0 auto;max-width:46%} .cfg-recap-ligne > * + *{color:var(--encre);min-width:0} .cfg-recap-ligne > *:last-child{margin-left:auto;text-align:right;white-space:nowrap} /* La barre de prix. Le gabarit de la page place le total dans `.cfg-barre-prix`, elle-même à l'intérieur de `.cfg-barre` : c'est `.cfg-barre` qui doit coller, sinon « Ajouter au panier » reste en bas de page, hors d'atteinte. Le sélecteur `:has` demeure en secours si le moteur pose un jour le total ailleurs. */ /* Elle était collée au bas de SA colonne — quatre mille pixels plus bas, donc invisible tant qu'on n'avait pas tout parcouru. Elle se fixe désormais au bas de l'ÉCRAN : le prix et le bouton ne quittent plus la vue, quelle que soit la position dans la page. */ .cfg-barre, #cfg-atelier :has(> #cfg-total):not(:has(> #cfg-composants)):not(.cfg-barre-prix){ position:fixed;left:0;right:0;bottom:0;z-index:40; display:flex;align-items:center;gap:clamp(14px,2.4vw,34px);flex-wrap:wrap; padding:12px var(--gouttiere); /* Le conseiller pose sa bulle à 24 px du bord, 62 px de côté, dans un shadow DOM à z-index 2 147 483 000 : rien ne passe devant, et elle couvrait « Ajouter au panier » de 375 px à 1600 px. On ne peut pas la déplacer depuis ici — on lui laisse son coin. */ padding-right:calc(var(--gouttiere) + var(--cfg-coin)); background:rgba(255,255,255,.96);backdrop-filter:blur(14px); border-top:1px solid var(--encre);box-shadow:0 -2px 24px rgba(11,11,13,.08)} .cfg-barre{--cfg-coin:max(0px,calc(90px + env(safe-area-inset-right) - var(--gouttiere)))} /* La page laisse la place de la barre, sinon elle mange le pied de page. La hauteur est mesurée par le script d'habillage : elle change avec la largeur (une rangée sur tablette, deux sur téléphone) et une valeur en dur laissait tantôt un trou, tantôt le dernier bloc sous la barre. */ body:has(.cfg-barre){padding-bottom:calc(var(--cfg-barre-h,104px) + 14px)} /* Le sous-bloc du prix ne colle pas : il se contente d'aligner le libellé et le montant à gauche de la barre. */ .cfg-barre .cfg-barre-prix{ position:static;z-index:auto;grid-column:auto; display:flex;align-items:baseline;gap:10px;flex-wrap:nowrap; margin:0 auto 0 0;padding:0;background:none;border-top:0;box-shadow:none} .cfg-barre-libelle{ font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-doux)} #cfg-total{ font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem); line-height:1;letter-spacing:.01em;white-space:nowrap;margin-right:auto} /* Le bouton reprend le remplissage montant de la charte, que le moteur lui pose ou non les classes `.btn`. */ #cfg-ajouter{ display:inline-flex;align-items:center;gap:11px;padding:15px 30px; font-size:.71rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600; color:#fff;border:1px solid transparent;white-space:nowrap; background-image:linear-gradient(to top,var(--laque) 50%,var(--encre) 50%); background-size:100% 200%;background-position:0 0; transition:background-position .42s var(--ease),color .32s var(--ease)} #cfg-ajouter:hover{background-position:0 100%} #cfg-ajouter[aria-disabled="true"]{opacity:.4;pointer-events:none} /* ═══════════════════════════════════════════════════════════ 6. GRAND ÉCRAN — QUELQUES RESPIRATIONS DE PLUS ═══════════════════════════════════════════════════════════ */ @media(min-width:1440px){ .cfg-atelier-in{grid-template-columns:minmax(0,1fr) 158px 440px} #cfg-atelier{--cfg-large:min(100%,calc(100svh - var(--header) - 190px),900px)} } /* ═══════════════════════════════════════════════════════════ 7. MOBILE ET TABLETTE (≤ 900 px) Les règles se trouvent tout à la fin de la feuille, section 12. Les sections 8 à 11 (rotation, sommaire, financement) ont été écrites APRÈS celle-ci et, à spécificité égale, l'emportaient sur elle : le curseur de financement restait à 16 px de haut sur téléphone parce que sa règle de base venait trois cents lignes plus bas. Le mobile passe donc en dernier. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 8. MOUVEMENT RÉDUIT ═══════════════════════════════════════════════════════════ */ @media(prefers-reduced-motion:reduce){ .cfg-modele,.cfg-modele img,.cfg-modele::after, .cfg-option::after,.cfg-option-vignette,.cfg-option-nom, .cfg-famille,#cfg-ajouter,#cfg-reset::after,.cfg-calque{ transition:none} #cfg-charge::before{animation:none} } /* ═══════════════════════════════════════════════════════════ 8. LA BARRE DE ROTATION — légende à gauche, vue à droite ═══════════════════════════════════════════════════════════ */ .cfg-vue-barre{ display:flex;align-items:baseline;justify-content:space-between;gap:16px; max-width:var(--cfg-large); margin-inline:auto;flex-wrap:wrap} .cfg-vue-legende{ font-size:var(--micro);letter-spacing:var(--piste);text-transform:uppercase; font-weight:600;color:var(--encre-doux)} .cfg-vue-compteur{ font-family:var(--display);font-size:.9rem;letter-spacing:.1em;color:var(--encre)} .cfg-vue-compteur i{font-style:normal;opacity:.4;font-size:.7rem;margin-left:3px} /* Le range est posé par le HTML dans cette barre : il prend toute la ligne. */ .cfg-vue-barre #cfg-vue{flex:1 0 100%;margin-top:10px} /* Seule la légende SOUS LE VISUEL se cale sur la scène : celles du panneau (gravure, mention Sofinco) suivent la largeur de leur colonne, sinon elles se plient en colonne de 121 px sur un écran bas. */ .cfg-mention{ max-width:100%; margin:14px auto 0;font-size:.72rem;line-height:1.6;color:var(--encre-tres-doux); font-weight:300} .cfg-visuel .cfg-mention{max-width:var(--cfg-large)} /* La légende du visuel reprise au bas du panneau : elle ne sert que lorsque le bloc collant l'a chassée, c'est-à-dire sous 900 px. */ .cfg-mention-visuel{display:none} /* La référence composée peut compter douze morceaux : elle tient sur une ligne et se coupe proprement, la valeur entière restant dans l'infobulle. Ce n'est pas ce qu'un client lit, c'est ce qu'un atelier vérifie. */ #cfg-ref{ display:block;max-width:100%;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfg-meta{min-width:0;max-width:100%} /* ═══════════════════════════════════════════════════════════ 9. LE SOMMAIRE DES COMPOSANTS Vingt-deux composants font quatre mille pixels de colonne : sans repère, atteindre « Bracelet » demande de descendre à l'aveugle. Le sommaire reste sous les yeux et dit où on est. ═══════════════════════════════════════════════════════════ */ .cfg-sommaire{ position:sticky;top:calc(var(--header) + 18px);z-index:5; display:flex;flex-direction:column;gap:10px; max-height:calc(100svh - var(--header) - 150px)} .cfg-sommaire:empty{display:none} .cfg-som-tete{display:flex;align-items:baseline;justify-content:space-between;gap:8px; padding-bottom:9px;border-bottom:1px solid var(--trait)} .cfg-som-tete span{font-size:0.66rem;letter-spacing:.22em;text-transform:uppercase; color:var(--encre-tres-doux,#9a9a9a)} .cfg-som-tete b{font-family:var(--display);font-size:.92rem;font-weight:500;color:var(--encre)} .cfg-som-tete b i{font-style:normal;font-size:.66rem;color:var(--encre-tres-doux,#9a9a9a); margin-left:1px} /* La piste porte un filet vertical : les pastilles s'y accrochent, et la part parcourue se colore. Le rail devient une jauge d'avancement autant qu'une table des matières. */ .cfg-sommaire-piste{ position:relative;display:flex;flex-direction:column;gap:1px; overflow-y:auto;overflow-x:hidden;min-height:0;padding-left:13px; scrollbar-width:none} .cfg-sommaire-piste::-webkit-scrollbar{display:none} .cfg-sommaire-piste::before{content:'';position:absolute;left:4px;top:10px;bottom:10px; width:1px;background:var(--trait)} .cfg-sommaire-piste::after{content:'';position:absolute;left:4px;top:10px; height:calc((100% - 20px) * var(--avance, 0) / 100);width:1px;background:var(--laque); transition:height .32s var(--ease)} .cfg-sommaire button{ position:relative;display:block;width:100%;text-align:left; background:none;border:0;padding:5px 2px 5px 0;cursor:pointer;font:inherit; font-size:.7rem;letter-spacing:.01em;line-height:1.3;color:var(--encre-doux); transition:color .18s,transform .18s} .cfg-sommaire button i{ position:absolute;left:-13px;top:9px;width:7px;height:7px;border-radius:50%; border:1px solid var(--trait);background:#fff;z-index:1; transition:background .2s,border-color .2s,transform .2s} /* Trois composants s'appellent « Boucles pour bracelet… » : tronqués sur une ligne, ils deviennent identiques. On en laisse passer deux. */ .cfg-sommaire button span{display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0} .cfg-sommaire button:hover{color:var(--encre);transform:translateX(2px)} .cfg-sommaire button:hover i{border-color:var(--encre-doux)} .cfg-sommaire button.fait{color:var(--encre-doux)} .cfg-sommaire button.fait i{background:var(--laque);border-color:var(--laque); transform:scale(.7)} .cfg-sommaire button.on{color:var(--encre);font-weight:600} /* Un composant qui n'existe pas pour ce boîtier reste visible dans le rail — c'est une information — mais ne se clique pas. */ .cfg-sommaire button.absent{opacity:.34;pointer-events:none} .cfg-sommaire.en-ligne button.absent{opacity:.34;pointer-events:none} .cfg-sommaire button.on i{background:var(--laque);border-color:var(--laque); transform:scale(1.3);box-shadow:0 0 0 3px rgba(200,16,46,.13)} .cfg-sommaire-barre{display:flex;gap:5px;padding-top:9px;border-top:1px solid var(--trait)} .cfg-som-nav{flex:1;height:26px;border:1px solid var(--trait);background:#fff; color:var(--encre-doux);font-size:.76rem;line-height:1;cursor:pointer;padding:0; display:flex;align-items:center;justify-content:center; transition:border-color .18s,color .18s,opacity .18s} .cfg-som-nav:hover{border-color:var(--encre);color:var(--encre)} .cfg-som-nav:disabled{opacity:.28;pointer-events:none} /* Par défaut le bouton n'est qu'une flèche : sur grand écran le rail entier est visible, le mot serait redondant. */ .cfg-som-nav b,.cfg-som-ou{display:none} /* ── Mode étapes : les deux seules portes de sortie ─────────── Sur téléphone, une seule catégorie est affichée à la fois. Ces deux boutons sont alors le SEUL moyen de passer à la suivante, et trois flèches nues ne le disaient pas — on ne savait ni qu'on pouvait avancer, ni vers quoi. Ils deviennent donc deux vraies commandes, larges, qui portent le mot et le nom de la catégorie visée. */ body.cfg-etapes-on .cfg-sommaire.en-ligne{flex-wrap:wrap} /* En mode étapes, la rangée de pastilles et les deux commandes disaient la même chose deux fois, pour cent seize pixels de haut. Sur un écran de 844, une fois l'en-tête, la montre et la barre de prix servis, il ne restait qu'une centaine de pixels aux options — une demi-rangée de vignettes. Les pastilles s'effacent : « Suivant — Cadran » nomme la destination, et le rang « 03 / 30 » dit où l'on en est. Elles reviennent dès qu'on sort du mode étapes. */ body.cfg-etapes-on .cfg-sommaire.en-ligne .cfg-sommaire-piste{display:none} /* Le rang reprend sa place, puisque la rangée qui le portait a disparu. */ body.cfg-etapes-on .cfg-sommaire.en-ligne .cfg-som-tete{display:flex;flex:1 1 auto; padding:0;border:0} body.cfg-etapes-on .cfg-sommaire.en-ligne .cfg-sommaire-barre{order:2;flex:1 0 100%;gap:8px;padding-top:8px; border-top:1px solid var(--trait);margin-top:2px} body.cfg-etapes-on .cfg-sommaire.en-ligne .cfg-som-nav{ flex:1 1 0;width:auto;min-width:0;height:auto;min-height:46px;padding:7px 12px; flex-direction:column;align-items:flex-start;justify-content:center;gap:2px; text-align:left} /* Le bouton « revenir au premier » n'a pas sa place ici : il double le « précédent » et vole la moitié de la largeur des deux commandes. */ body.cfg-etapes-on .cfg-som-nav:not(.cfg-som-prec):not(.cfg-som-suiv){display:none} body.cfg-etapes-on .cfg-som-nav b{display:block;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;font-weight:600;color:var(--encre)} body.cfg-etapes-on .cfg-som-nav .cfg-som-ou{display:block;font-size:.72rem;font-weight:300; color:var(--encre-doux);max-width:100%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;line-height:1.25} body.cfg-etapes-on .cfg-som-nav i{display:none} body.cfg-etapes-on .cfg-som-suiv{align-items:flex-end;text-align:right; background:var(--encre);border-color:var(--encre)} body.cfg-etapes-on .cfg-som-suiv b{color:#fff} body.cfg-etapes-on .cfg-som-suiv .cfg-som-ou{color:rgba(255,255,255,.74)} body.cfg-etapes-on .cfg-som-suiv:disabled{background:#fff;border-color:var(--trait)} /* Écran étroit : le rail repasse en bandeau horizontal au-dessus des options, où il ne vole de place à personne. */ .cfg-sommaire.en-ligne{ position:sticky;top:calc(var(--header) + 4px); flex-direction:row;align-items:center;gap:8px;max-height:none; background:rgba(255,255,255,.96);backdrop-filter:blur(10px); padding:8px 0;margin-bottom:6px} .cfg-sommaire.en-ligne .cfg-som-tete{display:none} .cfg-sommaire.en-ligne .cfg-sommaire-barre{flex:0 0 auto;padding-top:0;border-top:0} .cfg-sommaire.en-ligne .cfg-som-nav{width:28px;flex:0 0 28px} .cfg-sommaire.en-ligne .cfg-sommaire-piste{ flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;flex:1;padding-left:0} .cfg-sommaire.en-ligne .cfg-sommaire-piste::before, .cfg-sommaire.en-ligne .cfg-sommaire-piste::after{display:none} .cfg-sommaire.en-ligne .cfg-sommaire-piste::-webkit-scrollbar{display:none} .cfg-sommaire.en-ligne button{ width:auto;flex:0 0 auto;border:1px solid var(--trait);padding:6px 11px; font-size:0.66rem;letter-spacing:.08em;text-transform:uppercase;transform:none} .cfg-sommaire.en-ligne button i{display:none} /* « Peinture rainures sur boîtier » fait 430 px d'un seul tenant : en pastille, un composant ne prend jamais plus de la moitié du bandeau. Le nom entier reste dans l'infobulle du bouton. */ .cfg-sommaire.en-ligne button{max-width:min(46vw,280px)} .cfg-sommaire.en-ligne button span{ display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cfg-sommaire.en-ligne button.fait{border-color:var(--trait);color:var(--encre-doux)} .cfg-sommaire.en-ligne button.on{background:var(--encre);border-color:var(--encre);color:#fff} /* Écran étroit : le rail se cale JUSTE SOUS le visuel collant. Laissé statique, il disparaissait dès le troisième composant — sur vingt-deux, un sommaire qu'on ne peut plus atteindre ne sert à rien. La hauteur du visuel change (grande vue en haut de page, vue resserrée ensuite) : le script d'habillage la mesure et la pose dans --cfg-visuel-h. */ /* ══════════════════════════════════════════════════════════ LE MODE ÉTAPES — UN COMPOSANT À LA FOIS, LA MONTRE QUI NE BOUGE PAS ══════════════════════════════════════════════════════════ Voir le commentaire du contrôleur, dans `configurateur.html`. Ici, deux choses seulement : on ne montre que le composant courant, et le rail horizontal prend le rôle de barre d'étapes. */ body.cfg-etapes-on #cfg-composants > .cfg-composant, body.cfg-etapes-on #cfg-composants > .cfg-groupe{display:none} body.cfg-etapes-on #cfg-composants > .cfg-etape-active{display:block} /* ── Les options ont leur propre cadre, sous la montre ──────── Le visuel est collant. Avec un seul composant à l'écran, le bloc est court : il se retrouvait presque entièrement DERRIÈRE la montre, et aucun défilement ne pouvait l'en sortir — on voyait la rangée de vignettes coupée, réduite à ses étiquettes de prix. On ne cherche donc plus à faire défiler la page pour lire les options : on leur donne la hauteur qui reste sous la montre, et elles défilent chez elles. La montre ne bouge plus du tout, et ce qui bouge est ce qu'on est en train de choisir. Hauteurs explicites plutôt qu'une chaîne de boîtes flexibles : `--cfg- visuel-h` et `--cfg-barre-h` sont déjà mesurées et publiées par le script, et une soustraction se relit en un coup d'œil. */ body.cfg-etapes-on .cfg-visuel{position:static} /* La réglette de rotation reprend sa LIGNE, au lieu d'être posée en absolu sur le bord bas du visuel. Posée en absolu, elle dépendait d'un repère que `position:static` venait justement de retirer au visuel : elle allait chercher un ancêtre positionné bien plus haut et atterrissait au milieu des vignettes d'aiguilles, en travers des options. Rendre son repère au visuel réglait cela mais en cassait un autre : sous 900 px la colonne du visuel est collante au rang 5 et la barre de navigation se colle juste en dessous au rang 4 — le visuel doit passer devant, c'est voulu. `static` éteignait ce rang du même geste ; le rallumer faisait disparaître « Précédent » et « Suivant » sous la montre. Et même rang réglé, la réglette restait masquée au repos par la barre. En mode étapes le visuel ne colle plus : la rotation n'a donc aucune raison de flotter par-dessus. Elle reprend une ligne à elle, sous la montre, où rien ne peut la recouvrir et où elle ne recouvre rien. C'est déjà le geste retenu pour les écrans bas (bloc suivant) — la même cause, le même remède. */ body.cfg-etapes-on .cfg-vue-barre{ position:static;padding-inline:0;margin-top:4px;background:none} /* Chaque ligne au-dessus des options se paie en vignettes non vues : le retour à la grille, la réglette de rotation et les écarts qui les séparent se resserrent. */ body.cfg-etapes-on .cfg-retour{padding-block:2px;min-height:0;margin-bottom:0} body.cfg-etapes-on .cfg-retour #cfg-reset{padding-block:4px} body.cfg-etapes-on .cfg-vue-barre{min-height:0} body.cfg-etapes-on .cfg-vue-barre input{margin-block:0;height:18px} body.cfg-etapes-on .cfg-sommaire.en-ligne{margin-block:4px 2px} body.cfg-etapes-on .cfg-vue-legende{display:none} body.cfg-etapes-on #cfg-composants{ /* Une hauteur FIXE réservait tout l'espace disponible même pour une étape qui ne porte que quatre choix : sept cents pixels de blanc sous les vignettes, et le bouton d'ajout repoussé hors de vue. C'est un PLAFOND qu'il faut — le cadre descend jusqu'au bas de l'écran quand l'étape est longue, et s'arrête au contenu sinon. */ /* `--cfg-place` est mesurée par le script : l'écart réel entre le haut du cadre et la barre d'achat. Le calcul en chaîne reste en repli, pour la fraction de seconde qui précède la première mesure. */ max-height:var(--cfg-place, calc(100svh - var(--header) - var(--cfg-visuel-h,300px) - var(--cfg-rail-h,52px) - var(--cfg-barre-h,100px) - 34px)); min-height:0; overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; padding-top:2px} /* Le nom du modèle et sa référence tenaient cent vingt pixels entre la barre d'étapes et les options — c'est-à-dire entre la question et la réponse. En mode étapes, la montre à l'écran dit quel modèle on configure, et la barre d'achat en porte le prix : le rappel n'apporte rien et coûte l'essentiel. */ body.cfg-etapes-on .cfg-panneau-tete{display:none} /* La pastille garde sa troncature : sans elle, « Peinture rainures sur boîtier » chevauche la pastille suivante. Le titre du composant, juste en dessous, donne le nom en entier. */ @media(max-width:900px){ .cfg-sommaire.en-ligne{ position:sticky;top:calc(var(--header) + var(--cfg-visuel-h,0px));z-index:4; background:rgba(255,255,255,.97); padding:3px 0;margin-bottom:4px;border-bottom:1px solid var(--trait)} /* Cibles tactiles : les pastilles faisaient 27 px, les flèches 28 × 26. */ .cfg-sommaire.en-ligne button{min-height:44px;padding:6px 13px} .cfg-sommaire.en-ligne .cfg-som-nav{flex:0 0 44px;width:44px;height:44px;font-size:.9rem} .cfg-sommaire.en-ligne .cfg-sommaire-barre{gap:4px} } /* ═══════════════════════════════════════════════════════════ 10. UNE OPTION SANS VISUEL Le moteur remplace une vignette absente par un pixel transparent — le carreau devenait un carré blanc, qu'on lit comme une image qui n'a pas chargé. Or la plupart de ces options sont des ABSENCES (« Sans laque », « Sans rainure ») : on le dessine, avec la barre oblique des nuanciers. ═══════════════════════════════════════════════════════════ */ .cfg-option-vignette[src^="data:"]{ background-color:var(--creme); background-image:linear-gradient(to top right, transparent calc(50% - 0.5px), var(--trait) calc(50% - 0.5px), var(--trait) calc(50% + 0.5px), transparent calc(50% + 0.5px)); background-repeat:no-repeat;background-size:100% 100%} .cfg-option:hover .cfg-option-vignette[src^="data:"]{ background-color:var(--sable)} /* ═══════════════════════════════════════════════════════════ 11. LE FINANCEMENT DANS LA BARRE Trente-six mois sans frais, c'est un argument : il se voit, et le curseur laisse essayer les durées du barème. ═══════════════════════════════════════════════════════════ */ /* La base de 260 px faisait passer la barre à deux rangées sur une tablette en paysage (1024 px) : 151 px de haut au lieu de 87. Le bloc grandit toujours jusqu'à 460 px quand la place existe. */ .cfg-finance{flex:1 1 190px;min-width:0;max-width:460px} .cfg-finance[hidden]{display:none} .cfg-finance-tete{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:5px} .cfg-finance-montant{display:inline-flex;align-items:baseline;gap:4px} .cfg-finance-montant b{ font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--laque); letter-spacing:.02em} .cfg-finance-montant span{font-size:.76rem;color:var(--encre-doux)} .cfg-finance-duree{font-size:.74rem;color:var(--encre-doux)} .cfg-finance-duree b{color:var(--encre);font-weight:600} #cfg-echeances{ display:block;width:100%;height:16px;background:transparent;cursor:ew-resize; appearance:none;-webkit-appearance:none} #cfg-echeances:focus{outline:none} #cfg-echeances:focus-visible{outline:2px solid var(--laque);outline-offset:3px} #cfg-echeances::-webkit-slider-runnable-track{ height:3px;border-radius:2px; background:linear-gradient(to right,var(--laque) 0 var(--part,100%), var(--trait) var(--part,100%) 100%)} #cfg-echeances::-moz-range-track{ height:3px;border-radius:2px; background:linear-gradient(to right,var(--laque) 0 var(--part,100%), var(--trait) var(--part,100%) 100%)} #cfg-echeances::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:22px;height:12px;margin-top:-5px; background:var(--encre);border:0;border-radius:2px;transition:background .2s var(--ease)} #cfg-echeances::-moz-range-thumb{ width:22px;height:12px;background:var(--encre);border:0;border-radius:2px} #cfg-echeances:hover::-webkit-slider-thumb{background:var(--laque)} #cfg-echeances:hover::-moz-range-thumb{background:var(--laque)} /* Entre 681 et 760 px la barre reste en ligne de flex : le financement passe sur sa propre rangée plutôt que d'écraser le reste. */ @media(max-width:760px) and (min-width:681px){ .cfg-barre{gap:8px 14px;padding-block:10px} .cfg-finance{flex-basis:100%;max-width:none;order:3} .cfg-barre .btn{flex:1 1 auto;justify-content:center} } /* ── Rangée d'options défilante ──────────────────────────── Les flèches ne s'affichent que si la rangée déborde vraiment, et le voile de droite disparaît quand on est au bout : on ne suggère jamais qu'il reste des options quand il n'y en a plus. */ .cfg-rangee{position:relative} .cfg-rangee > .cfg-choix{-webkit-mask-image:none;mask-image:none} .cfg-rangee.deborde > .cfg-choix{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%)} .cfg-fleche{ position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:3; width:30px;height:30px;border-radius:50%;border:1px solid var(--trait); background:rgba(255,255,255,.94);color:var(--encre);font-size:15px;line-height:1; display:none;align-items:center;justify-content:center;cursor:pointer;padding:0; box-shadow:0 2px 10px rgba(11,11,13,.09);transition:opacity .2s,border-color .2s} .cfg-rangee.deborde > .cfg-fleche{display:flex} .cfg-fleche.g{left:-6px} .cfg-fleche.d{right:-6px} .cfg-fleche:hover{border-color:var(--encre)} .cfg-fleche:disabled{opacity:0;pointer-events:none} @media(max-width:760px){.cfg-fleche{display:none!important}} /* ═══════════════════════════════════════════════════════════ 12. MOBILE ET TABLETTE (≤ 900 px) — EN DERNIER Rien ici n'est nouveau par rapport à la section 7 d'origine : c'est la même chose, posée après les sections 8 à 11 pour que la cascade aille dans le bon sens. ═══════════════════════════════════════════════════════════ */ /* Le visuel passe en haut et reste collé sous le header, les composants défilent dessous, le prix se fixe en bas de l'écran. */ @media(max-width:1180px) and (min-width:961px){ /* Plus la place pour trois colonnes : le rail passe au-dessus des options, en bandeau, et on retrouve deux colonnes. */ .cfg-atelier-in{grid-template-columns:minmax(0,1fr) minmax(320px,420px)} .cfg-sommaire{grid-column:2;max-height:none} .cfg-panneau{grid-column:2} } @media(max-width:1180px) and (min-width:901px){ /* Quatre blocs dans la barre, plus les 90 px laissés au conseiller : à 1024 px elle passait à deux rangées, 151 px de haut sur un écran qui n'en fait que 768 — un cinquième de la page. On resserre les gouttières et la part réservée au financement, pas les mots ; le bloc du financement grandit ensuite avec la place qui reste. */ .cfg-barre{gap:14px} .cfg-finance{flex-basis:150px} /* Le bloc ne fait plus que 176 px : « , sans frais » y pliait la ligne en trois. Le mot reste dans la mention Sofinco, au bas de la page. */ .cfg-finance-frais{display:none} } @media(max-width:900px){ #cfg-atelier{ padding-bottom:0; /* En arrivant, la montre prend 46 % de la hauteur : c'est ce qu'on vient voir, et le haut de l'écran a été dégraissé pour le lui donner. Le script reprend cette valeur et la fait décroître au défilement — cette déclaration n'est que le repli quand il ne tourne pas. */ --cfg-large:min(100%,46vh)} /* Le fil d'Ariane ne sert à rien ici : on arrive au configurateur par un bouton, pas par une arborescence, et il coûtait soixante-dix pixels au-dessus de la montre. Mais c'était LUI qui portait la réserve de l'en-tête flottant — `site.js` la pose sur le premier élément qui suit l'en-tête. Le masquer faisait passer « Choisir un autre modèle » sous le logo. La réserve revient donc à l'atelier, qui devient le premier élément visible. */ body.cfg-en-cours .ariane{display:none} /* La réserve, et rien de plus : les vingt-deux pixels de respiration que l'atelier s'accordait en haut ne servent qu'à un écran large, où la montre n'est pas à l'étroit. */ body.cfg-en-cours #cfg-atelier{padding-top:calc(var(--header) + 10px)} /* « Choisir un autre modèle » est une sortie de secours, pas un titre : il se tient au ras de l'en-tête et rend sa place à la montre. */ body.cfg-en-cours #cfg-reset{padding:8px 0 9px} /* En mode écran, chaque pixel du haut est pris sur les options. La sortie de secours reste une sortie de secours : un mot souligné, sans filet et sans marge — cent quinze pixels rendus à ce qu'on est venu faire. */ body.cfg-etapes-on #cfg-reset{padding:6px 0 7px;font-size:0.66rem} body.cfg-etapes-on #cfg-reset::after{display:none} body.cfg-etapes-on .cfg-visuel{padding-block:4px 6px} body.cfg-en-cours .cfg-panneau-tete{padding-bottom:4px} .cfg-atelier-in{display:block} .cfg-sommaire{max-height:none} .cfg-panneau-tete{padding-bottom:8px;margin-bottom:0;border-bottom:0} #cfg-titre{font-size:clamp(1.35rem,5.4vw,1.8rem);width:auto;margin-right:auto} /* Le titre, la référence et « choisir un autre modèle » tiennent sur deux lignes serrées au lieu de quatre : c'est autant de rendu à la montre. */ #cfg-ref,#cfg-diametre{font-size:0.66rem} #cfg-reset{font-size:.66rem} /* Colonne du visuel : collante sous le header, fond plein pour que les composants passent proprement dessous. */ .cfg-visuel{ position:sticky;top:var(--header);z-index:5; background:var(--papier); padding-block:10px 12px; border-bottom:1px solid var(--trait)} #cfg-scene{border-width:1px} /* La commande de rotation et sa légende prennent toute la largeur : calées sur la scène, elles se pliaient en trois lignes. */ .cfg-vue-barre{max-width:100%;gap:12px} #cfg-vue{max-width:100%;margin-top:10px} #cfg-charge{left:10px;bottom:10px;padding:6px 10px} #cfg-composants{padding-top:6px} /* ── Le bloc collant tient en deux pièces : la scène et rien d'autre ── Mesuré avant correction sur un iPhone 375 × 812 : en-tête 79 px, visuel collant 473 px, barre de prix 206 px — il restait 55 px pour choisir une option, 7 % de l'écran. Trois choses en sortent : · la légende du visuel, reprise au bas du panneau (37 px) ; · la commande de rotation, qui passe PAR-DESSUS le bas de la scène plutôt que de s'ajouter sous elle (54 px) ; · la moitié de la scène elle-même : le script fait passer --cfg-large de 44 vh à 21 vh au fil du défilement. */ .cfg-visuel{padding-block:8px} .cfg-visuel > .cfg-mention{display:none} .cfg-panneau .cfg-mention-visuel{display:block} .cfg-vue-barre{ position:absolute;left:0;right:0;bottom:0;z-index:3;margin:0; padding:8px var(--gouttiere) 10px;align-items:center;flex-wrap:nowrap;gap:10px; max-width:100%; /* Un voile blanc qui monte de rien : le curseur se pose sur la photo sans la couper d'un trait. */ background:linear-gradient(to top,var(--papier) 62%,rgba(255,255,255,0))} /* « Faire tourner la montre » est le libellé du curseur : au-dessus de la montre, le geste se devine. Le compteur, lui, se lit. */ .cfg-vue-legende{display:none} .cfg-vue-compteur{ flex:0 0 auto;background:rgba(255,255,255,.9);padding:4px 8px;line-height:1} .cfg-vue-barre #cfg-vue{flex:1 1 auto;margin-top:0} /* Barre basse fixe : prix et bouton toujours à portée de pouce. */ .cfg-barre, #cfg-atelier :has(> #cfg-total):not(:has(> #cfg-composants)):not(.cfg-barre-prix){ position:fixed;left:0;right:0;bottom:0;z-index:40; margin-top:0;padding:11px var(--gouttiere); padding-right:calc(var(--gouttiere) + var(--cfg-coin)); padding-bottom:calc(11px + env(safe-area-inset-bottom)); gap:10px;flex-wrap:wrap; border-top:1px solid var(--encre); box-shadow:0 -1px 0 rgba(17,17,20,.04)} .cfg-barre .cfg-barre-prix{position:static;padding:0;box-shadow:none;border-top:0} #cfg-total{font-size:1.3rem} #cfg-ajouter{padding:13px 18px;font-size:0.66rem;letter-spacing:.12em;flex:0 0 auto} /* Le récapitulatif ne monte jamais dans la barre fixe. */ .cfg-barre #cfg-recap, #cfg-atelier :has(> #cfg-total):not(:has(> #cfg-composants)):not(.cfg-barre-prix) #cfg-recap{display:none} /* De la place sous le dernier bloc pour que la barre ne masque rien. */ body.cfg-en-cours #cfg-atelier{padding-bottom:calc(var(--cfg-barre-h,104px) + 10px)} /* La barre est fixée en bas de FENÊTRE : elle passe aussi devant le pied de page. On lui réserve sa hauteur sur la dernière ligne. */ body.cfg-en-cours .foot-bas{ padding-bottom:calc(var(--cfg-barre-h,92px) + env(safe-area-inset-bottom))} .cfg-option{width:clamp(72px,22vw,88px)} } /* ── Écran bas : le téléphone tenu en paysage ──────────────────── 844 × 390 : en-tête 79 px + visuel collant 443 px + barre 77 px sur 390 px d'écran — la hauteur utile était NÉGATIVE de 208 px, autrement dit rien n'était visible. À cette hauteur-là, un visuel collant est un luxe : il défile avec la page, et la montre se revoit en remontant. Le rail, lui, reste collé — c'est ce qui sert à naviguer. */ @media(max-width:900px) and (max-height:560px){ .cfg-visuel{position:static;border-bottom:1px solid var(--trait)} #cfg-atelier{--cfg-large:min(100%,58vh)} /* Le visuel n'est plus collant : la rotation peut reprendre sa ligne. */ .cfg-vue-barre{position:static;padding-inline:0;margin-top:8px} .cfg-visuel > .cfg-mention{display:block} .cfg-panneau .cfg-mention-visuel{display:none} .cfg-mention{font-size:.68rem} } /* ── La barre de prix sur téléphone : deux rangées ─────────────── À 375 px les quatre blocs (total, mensualité + curseur, signet, « Ajouter au panier ») demandaient 491 px : la barre débordait de 116 px, le curseur de financement tombait à 0 px de large et se dépliait sur 185 px de haut. On passe en grille, et la colonne de droite reste vide — c'est là que le conseiller pose sa bulle. */ /* Sur téléphone, la barre d'achat pesait 133 px sur 664 : un cinquième de l'écran pour un total, une mensualité, un curseur de durée, un signet et un bouton. Elle tombe à quatre-vingt-dix, et ce qu'elle perd revient à la montre. Ce qui sort : le curseur de durée et le « sur 36 mois ». Le financement se règle très bien plus bas, dans le récapitulatif ; ici, seule la mensualité compte — c'est le chiffre qu'on cherche des yeux, pas la durée qui le produit. */ @media(max-width:680px){ .cfg-barre{ display:grid;align-items:center; grid-template-columns:auto minmax(0,1fr); grid-template-areas: "prix finance" "signet panier"; column-gap:12px;row-gap:6px; padding-block:8px} .cfg-barre .cfg-barre-prix{ grid-area:prix;flex-direction:column;align-items:flex-start;gap:0;margin:0} .cfg-barre-libelle{font-size:.66rem;letter-spacing:.14em;line-height:1.2} #cfg-total{font-size:1.12rem;margin-right:0;line-height:1.15} /* La mensualité seule, alignée à droite du total : une ligne, un chiffre. */ .cfg-finance{grid-area:finance;max-width:none;flex:none;justify-self:end; text-align:right} .cfg-finance-tete{flex-wrap:nowrap;gap:5px;margin-bottom:0;justify-content:flex-end} .cfg-finance-montant b{font-size:1.02rem} .cfg-finance-montant span{font-size:.7rem} .cfg-finance-duree{display:none} .cfg-finance-frais{display:none} /* Le curseur de durée quitte la barre : il reste dans le récapitulatif, où l'on a la place de le manipuler sans masquer la montre. */ .cfg-barre #cfg-echeances{display:none} .cpt-cfg-enregistrer{grid-area:signet;min-height:44px} #cfg-ajouter{grid-area:panier;width:100%;justify-content:center; padding-block:12px;min-height:44px} } @media(max-width:520px){ /* La grille des modèles se décide en section 1, deux colonnes comprises : les trois règles qui vivaient ici — marge intérieure de carte, packshot à plat, gouttière — appartenaient à la carte encadrée d'avant le 18/09/2026. */ #cfg-atelier{--cfg-large:min(100%,40vh)} .cfg-recap-ligne{font-size:.74rem} /* Une référence composée de douze morceaux ou un nom de bracelet long ne sont pas des mots : ils peuvent revenir à la ligne. */ .cfg-recap-ligne > *:last-child{white-space:normal} /* .btn ne coupe pas ses lignes : « Une question avant de commencer » mesure 374 px et faisait déborder la page de quelques pixels. */ .cfg-suite .sous-cta .btn{white-space:normal;line-height:1.3;text-align:center} } /* ═══════════════════════════════════════════════════════════ 13. AU DOIGT — CIBLES DE 44 PX La taille d'une cible ne dépend pas de la largeur de l'écran mais de ce qui appuie dessus : une tablette en paysage fait 1024 ou 1180 px et se touche quand même. Le relevé avant correction, aux dix largeurs : pastilles du rail 27 px de haut, flèches du rail 28 × 26, onglets de familles 26 px, « Choisir un autre modèle » 21 px, curseur de rotation 22 px, curseur de durée 16 px. ═══════════════════════════════════════════════════════════ */ @media(hover:none){ #cfg-reset{display:inline-block;padding:13px 0 14px} /* « Tous » ne mesure que 32 px de large : le mot est court, la cible ne doit pas l'être. */ .cfg-famille{padding:13px 0 14px;min-width:44px} .cfg-sommaire button{min-height:44px} .cfg-sommaire .cfg-som-nav{height:44px;min-width:44px} .cfg-sommaire.en-ligne button{padding:6px 13px} .cfg-sommaire.en-ligne .cfg-som-nav{flex:0 0 44px;width:44px;font-size:.9rem} /* Le fil vertical accroche les pastilles par leur haut : elles ont grandi, il suit. */ .cfg-sommaire:not(.en-ligne) button i{top:18px} #cfg-ajouter{padding-block:14px} #cfg-vue{height:44px} #cfg-vue::-webkit-slider-thumb{width:34px;height:20px;margin-top:-9px} #cfg-vue::-moz-range-thumb{width:34px;height:20px} /* 28 px et non 44 pour le curseur de durée : les seize pixels manquants se paieraient en hauteur utile dans la barre fixe, et le poussoir, lui, mesure 30 × 18 — il s'attrape. */ #cfg-echeances{height:28px} #cfg-echeances::-webkit-slider-thumb{width:30px;height:18px;margin-top:-8px} #cfg-echeances::-moz-range-thumb{width:30px;height:18px} } /* ═══════════════════════════════════════════════════════════ 14. CE QUI MANQUAIT — DEUXIÈME PASSE Posé en fin de feuille, après la section mobile, parce que plusieurs de ces règles doivent la corriger : à spécificité égale, c'est l'ordre qui tranche. ═══════════════════════════════════════════════════════════ */ /* ── 14.1 L'écran d'accueil ────────────────────────────────── Replié dans la section 1 le 18/09/2026 : la carte, son bouton et la carte creuse s'y décident maintenant d'un seul tenant. */ /* ── 14.2 Combien d'options dans la rangée ─────────────────── « On ne comprenait pas qu'il y avait d'autres couleurs à droite. » Les flèches et le fondu le disent au survol ; le compte le dit tout le temps, et au doigt aussi. */ .cfg-nb{ flex:0 0 auto;font-family:var(--texte);font-weight:600;font-size:0.66rem; letter-spacing:.1em;text-transform:uppercase;color:var(--encre-tres-doux); border:1px solid var(--trait);padding:2px 6px;line-height:1.5;white-space:nowrap} .cfg-composant-titre .cfg-nb + small{margin-left:auto} /* ── 14.3 L'option : un nom qui ne pousse jamais la rangée ─── « Bracelet caoutchouc perforé noir surpiqûre rouge » prenait quatre lignes : la rangée passait de 118 à 178 px de haut, et l'écran d'un téléphone n'en montrait plus qu'une. */ .cfg-option-nom{ display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical; overflow:hidden} .cfg-option{scroll-margin-inline:14px} .cfg-option:focus-visible{outline:2px solid var(--laque);outline-offset:3px} /* ── 14.4 Le récapitulatif : d'où l'on part, où l'on arrive ── Le détail ne listait que les suppléments. Le prix du modèle ouvre, le total referme — c'est la lecture d'un devis. */ .cfg-bilan{margin-top:clamp(26px,3vw,38px)} .cfg-bilan-titre{ font-family:var(--display);font-weight:400;text-transform:uppercase; font-size:1.02rem;letter-spacing:.045em;line-height:1.1} .cfg-recap-base,.cfg-recap-total{ display:flex;align-items:baseline;gap:12px;padding-block:8px} .cfg-recap-base{border-bottom:1px solid var(--trait);font-size:.78rem;font-weight:300} .cfg-recap-base > *:first-child{ color:var(--encre-tres-doux);font-size:0.66rem;letter-spacing:.12em; text-transform:uppercase;font-weight:600;flex:0 0 auto} .cfg-recap-base > *:last-child{margin-left:auto;text-align:right;white-space:nowrap} .cfg-recap-total{ margin-top:6px;padding-top:12px;border-top:1px solid var(--encre)} .cfg-recap-total > span{ font-size:0.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600; color:var(--encre-doux)} .cfg-recap-total > strong{ margin-left:auto;font-family:var(--display);font-weight:400;font-size:1.15rem; letter-spacing:.01em;white-space:nowrap} /* ── 14.5 Emporter la configuration ────────────────────────── « Enregistrer » demande un compte et vit dans la barre de prix ; « Partager » n'en demande aucun et vit ici. */ .cfg-bilan-actions{margin-top:16px} .cfg-lien-boite{display:block;margin-top:14px} .cfg-lien-boite[hidden]{display:none} .cfg-lien-boite > span{ display:block;font-size:var(--micro);letter-spacing:var(--piste); text-transform:uppercase;font-weight:600;color:var(--encre-doux)} #cfg-lien{ width:100%;margin-top:7px;padding:9px 10px; background:var(--creme);border:1px solid var(--trait); font-family:var(--texte);font-size:.72rem;color:var(--encre-doux); text-overflow:ellipsis} #cfg-lien:focus{outline:none;border-color:var(--encre)} .cfg-lien-mot{margin-top:9px;font-size:.72rem;font-weight:300;color:var(--encre-doux)} .cfg-lien-mot:empty{display:none} /* ── 14.6 « D'où sort cette montre ? » ─────────────────────── Le visiteur qui revient tombait dans l'atelier sur une montre déjà dessinée, sans explication ni page blanche. */ .cfg-retour{ display:flex;align-items:baseline;flex-wrap:wrap;gap:10px clamp(16px,2.4vw,30px); padding-bottom:clamp(10px,1.4vw,16px)} .cfg-reprise{ display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px; font-size:.74rem;font-weight:300;color:var(--encre-doux)} .cfg-reprise[hidden]{display:none} .cfg-reprise::before{ content:'';align-self:center;width:5px;height:5px;background:var(--laque); flex:0 0 auto} /* ── 14.7 Agrandir ─────────────────────────────────────────── Sur un téléphone la montre tient dans 180 px une fois le visuel resserré : le détail d'un cadran n'y est pas lisible. */ /* La montre se pousse du doigt pour tourner, et s'ouvre en grand au simple clic. `pan-y` rend le défilement vertical au navigateur : le geste horizontal est pour nous, le vertical reste à la page. */ #cfg-scene{cursor:grab;touch-action:pan-y} #cfg-scene.cfg-tourne-en-cours{cursor:grabbing} #cfg-scene.cfg-tourne-en-cours .cfg-calque{transition:none} .cfg-zoom-scene.cfg-tourne-en-cours{cursor:grabbing} .cfg-zoom-scene.cfg-tourne-en-cours .cfg-calque{transition:none} #cfg-loupe{ position:absolute;right:12px;top:12px;z-index:4; width:40px;height:40px;display:flex;align-items:center;justify-content:center; background:rgba(255,255,255,.92);border:1px solid var(--trait);color:var(--encre); transition:background .24s var(--ease),border-color .24s var(--ease), transform .24s var(--ease)} #cfg-loupe svg{width:19px;height:19px} #cfg-loupe:hover{background:#fff;border-color:var(--encre);transform:scale(1.06)} #cfg-zoom{position:fixed;inset:0;z-index:2000;display:flex; align-items:center;justify-content:center} #cfg-zoom[hidden]{display:none} .cfg-zoom-voile{position:absolute;inset:0;background:rgba(11,11,13,.92); animation:cfg-parait .22s var(--ease)} .cfg-zoom-boite{ position:relative;z-index:1;width:min(96vw,min(94vh,1100px)); display:flex;flex-direction:column;align-items:center;gap:14px; animation:cfg-parait .22s var(--ease)} .cfg-zoom-scene{ cursor:grab;touch-action:pan-y; position:relative;width:100%;aspect-ratio:1;max-height:76vh; margin-inline:auto;overflow:hidden; background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,var(--creme) 66%)} .cfg-zoom-fermer{ position:absolute;right:0;top:-46px;width:44px;height:44px; display:flex;align-items:center;justify-content:center; color:#fff;font-size:1.5rem;line-height:1;border:1px solid rgba(255,255,255,.32); transition:border-color .2s var(--ease),background .2s var(--ease)} .cfg-zoom-fermer:hover{background:rgba(255,255,255,.12);border-color:#fff} .cfg-zoom-barre{ width:100%;display:flex;align-items:center;gap:14px; color:rgba(255,255,255,.82)} .cfg-zoom-barre .cfg-vue-compteur{color:#fff;flex:0 0 auto} .cfg-zoom-barre .cfg-vue-compteur i{color:rgba(255,255,255,.5)} #cfg-zoom-vue{ flex:1 1 auto;height:36px;background:transparent;cursor:ew-resize; appearance:none;-webkit-appearance:none} #cfg-zoom-vue:focus{outline:none} #cfg-zoom-vue:focus-visible{outline:2px solid var(--laque);outline-offset:4px} #cfg-zoom-vue::-webkit-slider-runnable-track{height:3px;border-radius:2px; background:linear-gradient(to right,#fff 0 var(--part,0%), rgba(255,255,255,.26) var(--part,0%) 100%)} #cfg-zoom-vue::-moz-range-track{height:3px;border-radius:2px; background:linear-gradient(to right,#fff 0 var(--part,0%), rgba(255,255,255,.26) var(--part,0%) 100%)} #cfg-zoom-vue::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:32px;height:16px;margin-top:-7px; background:#fff;border:0;border-radius:2px} #cfg-zoom-vue::-moz-range-thumb{width:32px;height:16px;background:#fff;border:0; border-radius:2px} /* Le fond ne défile plus derrière le plein écran. */ body.cfg-zoom-ouvert{overflow:hidden} @keyframes cfg-parait{from{opacity:0}to{opacity:1}} @media(max-width:680px){ .cfg-zoom-boite{width:94vw;gap:10px} .cfg-zoom-fermer{top:auto;bottom:-54px;right:50%;transform:translateX(50%)} .cfg-zoom-scene{max-height:62vh} .cfg-zoom-barre{padding-bottom:4px} } /* ── 14.8 Le budget de hauteur du téléphone ────────────────── Ce qui reste pour CHOISIR, à 390 × 844, une fois l'en-tête, le visuel collant, le rail et la barre de prix servis. Chaque pixel repris ici est un pixel d'option. */ @media(max-width:900px){ /* Une vignette de 86 px et deux lignes de nom : quatre options par écran plutôt que trois et demie. */ .cfg-option{width:clamp(68px,19.5vw,84px)} .cfg-composant{padding-block:clamp(14px,2vw,20px)} .cfg-groupe{padding-top:clamp(16px,2.2vw,24px)} .cfg-choix{margin-top:11px;padding-bottom:6px} /* La loupe est une cible de doigt, et elle ne recouvre pas la montre. */ #cfg-loupe{width:44px;height:44px;right:8px;top:8px; background:rgba(255,255,255,.86)} .cfg-bilan{margin-top:24px} } /* ── 14.9 Le prix qui change sans clignoter ────────────────── Le total se réécrit à chaque choix. Sans repère, le chiffre saute sans qu'on sache d'où il vient ; avec un clignotement, il fatigue. Un très bref souffle de couleur, une seule fois, suffit. */ @keyframes cfg-souffle{ 0%{color:var(--laque)} 100%{color:inherit}} #cfg-total.cfg-bouge{animation:cfg-souffle .5s var(--ease)} @media(prefers-reduced-motion:reduce){ .cfg-fantome{animation:none;background:var(--creme)} .cfg-zoom-voile,.cfg-zoom-boite{animation:none} #cfg-total.cfg-bouge{animation:none} #cfg-loupe,.cfg-modele-cta,.cfg-modele-cta::after{transition:none} } /* ═══════════════════════════════════════════════════════════ 15. LE PREMIER ÉCRAN — CE QU'ON VOIT SANS DÉFILER Replié dans la section 1 le 18/09/2026. Il corrigeait l'ouverture par petites touches ; l'ouverture a été refaite, et il n'y a plus qu'un endroit où le premier écran se décide. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ 16. DEUX DÉTAILS DE RANGÉE ═══════════════════════════════════════════════════════════ */ /* Les suppléments doivent s'aligner. « Carbone » tient sur une ligne, « Mouvement Squelette ETNA » sur deux : le « + 400 € » de l'un se lisait à la hauteur du NOM de l'autre, et la rangée paraissait bancale. On réserve les deux lignes à tout le monde. */ .cfg-option-nom{min-height:2.4em} /* Une rangée à moitié défilée montre une tranche d'option à gauche : c'est juste — il y a bien quelque chose avant — mais il faut que cela se voie comme un bord, pas comme un défaut de calage. Le voile ne se pose que du côté où il reste vraiment des options. */ .cfg-rangee.deborde:not(.au-debut):not(.a-la-fin) > .cfg-choix{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20px, #000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,transparent 0,#000 20px, #000 calc(100% - 34px),transparent 100%)} .cfg-rangee.deborde.au-debut:not(.a-la-fin) > .cfg-choix{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%)} .cfg-rangee.deborde.a-la-fin:not(.au-debut) > .cfg-choix{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 20px); mask-image:linear-gradient(to right,transparent 0,#000 20px)} .cfg-rangee.deborde.au-debut.a-la-fin > .cfg-choix{ -webkit-mask-image:none;mask-image:none} /* Les flèches de rangée se posaient à 6 px du bord : sur une colonne de 430 px, elles recouvraient la moitié de la première vignette visible. On les décale vers l'extérieur — la gouttière de la grille est large de 20 à 40 px, il y a la place, et rien ne sort de la page. */ .cfg-fleche.g{left:-13px} .cfg-fleche.d{right:-13px} /* Le compte des caractères de la gravure, au bout de son libellé. */ .cfg-gravure label{display:flex;align-items:baseline;gap:12px} .cfg-gravure-compte{ margin-left:auto;font-size:0.66rem;letter-spacing:.08em;font-weight:500; color:var(--encre-tres-doux);transition:color .2s var(--ease)} .cfg-gravure-compte.plein{color:var(--laque)} /* ═══════════════════════════════════════════════════════════ 17. LE PREMIER ÉCRAN DE L'ATELIER, AU TÉLÉPHONE Relevé à 390 × 844 : on arrivait sur la montre, le rail, et rien d'autre — le nom du modèle était coupé par la barre de prix et la première rangée d'options commençait 90 px sous le pli. Voir la montre est la moitié du sujet ; savoir qu'on peut la changer est l'autre. La montre cède 50 px, le titre 30, et « Boîtier » entre dans l'écran d'arrivée. ═══════════════════════════════════════════════════════════ */ @media(max-width:900px){ #cfg-atelier{--cfg-large:min(100%,36vh)} #cfg-titre{font-size:clamp(1.35rem,5.6vw,1.9rem)} .cfg-panneau-tete{padding-bottom:9px;gap:4px 14px} .cfg-retour{padding-bottom:8px} .cfg-reprise{font-size:.7rem} } @media(max-width:520px){ #cfg-atelier{--cfg-large:min(100%,34vh)} } /* Sur une tablette, la commande de rotation traversait toute la page pendant que la montre n'en occupait qu'un quart au centre : les deux n'avaient plus l'air d'aller ensemble. Elle se cale sur la scène. */ @media(min-width:601px) and (max-width:900px){ .cfg-vue-barre{ left:50%;right:auto;transform:translateX(-50%); width:min(100%,calc(var(--cfg-large) + 40px))} } /* ═══════════════════════════════════════════════════════════ 18. LA MAQUETTE B, À LA LETTRE — FAMILLES, ÉTAPE, SOCLE NOIR ═══════════════════════════════════════════════════════════ La maquette « pas à pas » a été validée ; cette section l'applique au configurateur en service. Elle ne touche à rien d'autre : tout y est sous `body.cfg-etapes-on`, et l'essentiel sous 901 px et au-delà — le téléphone garde la mise en page réglée finement plus haut. */ /* ── L'atelier garde l'écran pour lui, jusqu'au bout ────────── Le pied de page était déjà rangé. Restaient « Trouvez le revendeur », les trois cartes de réassurance et le fil d'Ariane : mille pixels sous le socle, qu'on découvrait en défilant alors que la maquette n'a RIEN après le socle. */ body.cfg-en-cours .revendeurs, body.cfg-en-cours .svc-grid{display:none} /* Le fil d'Ariane, lui, ne peut pas simplement disparaître : `site.js` pose sur le PREMIER bloc de la page la réserve qui dégage l'en-tête fixé (`.entete-reserve`), et ce premier bloc, c'est lui. Le retirer du flux faisait remonter l'atelier de soixante-dix-huit pixels, derrière le logo. On le vide donc de tout ce qu'il montre, et il ne reste que la réserve. */ body.cfg-en-cours nav.ariane{ --reserve-sup:0px;padding-bottom:0;font-size:0;line-height:0} body.cfg-en-cours nav.ariane > *{display:none} /* ── Le pas-à-pas descend à la RANGÉE ───────────────────────── Une étape n'est plus un bloc — « Aiguilles » en vaut trois, « Bracelet » en vaut huit — mais une rangée d'options, comme dans la maquette. Les classes ne se battent jamais avec le moteur : lui pose `hidden` et `display:none` EN LIGNE sur ce qui n'existe pas, et l'emporte donc toujours sur ce qui suit. */ body.cfg-etapes-on .cfg-groupe > .cfg-composant{display:none} body.cfg-etapes-on .cfg-groupe > .cfg-composant.cfg-etape-active{display:block} body.cfg-etapes-on .cfg-composant > .cfg-rangee{display:none} body.cfg-etapes-on .cfg-composant > .cfg-rangee.cfg-etape-active{display:block} /* ── L'EN-TÊTE DE L'ÉTAPE sort lui aussi de la requête « grand écran » ── Le téléphone ne le montrait pas : à sa place, le libellé du moteur en capitales de 13 px. On lisait « BOÎTIER … Inox Brossé » là où le bureau annonce « ÉTAPE 1 / 25 », « BOÎTIER » en grand et la phrase qui compte les finitions. Même en-tête, une seule fois ; le `clamp` le resserre tout seul sur un petit écran. */ /* Les titres du moteur s'effacent : l'en-tête d'étape les dit en grand, et les onglets de bracelet sont désormais dans le socle, dépliés sous leur famille. Au téléphone ils restent, ce sont les seuls repères. */ body.cfg-etapes-on .cfg-composant-titre, body.cfg-etapes-on .cfg-groupe-titre, body.cfg-etapes-on .cfg-familles{display:none} /* ── L'en-tête de l'étape ────────────────────────────────── « BOÎTIER · ÉTAPE 1 / 25 », le nom en grand, le compte des finitions et celle qui est retenue. */ .cfg-tete-etape{display:none} body.cfg-etapes-on .cfg-tete-etape{display:block;margin-bottom:clamp(14px,1.6vw,22px)} body.cfg-etapes-on.cfg-recap-on .cfg-tete-etape{display:none} .cfg-etape-rang{ display:flex;align-items:baseline;gap:7px;margin:0; font-family:var(--display);font-size:.68rem;letter-spacing:.2em; text-transform:uppercase;color:var(--laque)} .cfg-etape-rang .f{color:var(--encre-tres-doux)} .cfg-etape-rang .sep{font-style:normal;color:var(--trait)} .cfg-etape-nom{ font-family:var(--display);font-weight:600;text-transform:uppercase; font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1;margin:8px 0 0} .cfg-etape-sous{ margin:10px 0 0;font-size:.9rem;font-weight:300;color:var(--encre-doux);max-width:56ch} .cfg-etape-sous strong{color:var(--encre);font-weight:500} /* ── Le socle : la jauge, les familles, la famille dépliée ── La barre des composants a quitté le haut de l'écran : elle est descendue se coller au bandeau du prix, et les deux ne font plus qu'une pièce, en bas, sous la main. ── LE SOCLE sort lui aussi de la requête « grand écran » ── Pastilles des familles, bandeau NOIR, commandes au même gabarit, « Ajouter au panier » seul bouton plein et blanc : c'est la robe du socle de la maquette B. Le téléphone en avait une autre — rail clair dans le flux, bandeau blanc. Ce sont les mêmes règles, une seule fois ; le point de rupture, plus bas, ne règle plus que ce qui doit VRAIMENT différer : la place, pas la charte. */ body.cfg-etapes-on #cfg-sommaire.en-ligne{ display:block;padding-top:0} body.cfg-etapes-on #cfg-sommaire .cfg-jauge{ height:2px;background:var(--trait);margin:0 0 10px} body.cfg-etapes-on #cfg-sommaire .cfg-jauge i{ display:block;height:2px;background:var(--laque); transition:width .35s cubic-bezier(.2,.7,.2,1)} /* Le compte « Composants n/N » n'est pas dans la maquette : la jauge le dit mieux, et la ligne a besoin de toute sa largeur. */ body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-tete{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-barre{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste{ display:flex;align-items:stretch;gap:6px;overflow-x:auto;scrollbar-width:none; max-height:none;padding:0 0 2px;margin:0} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste::-webkit-scrollbar{display:none} /* La pastille est cliquable de bord à bord, et elle se VOIT : fond crème sur la barre blanche, texte à l'encre pleine, le numéro dans un carré. */ body.cfg-etapes-on #cfg-sommaire .cfg-sommaire-piste button{ appearance:none;flex:0 0 auto;border:1px solid var(--trait);background:var(--creme); font:600 .78rem/1.1 var(--texte);color:var(--encre);padding:0 14px;min-height:44px; width:auto;max-width:none;cursor:pointer;display:flex;align-items:center;gap:9px; white-space:nowrap;position:relative; transform:none;transition:border-color .2s,color .2s,background .2s,box-shadow .2s} body.cfg-etapes-on #cfg-sommaire .cfg-sommaire-piste button > *{pointer-events:none} body.cfg-etapes-on #cfg-sommaire .cfg-sommaire-piste button:hover{ border-color:var(--encre);background:var(--papier);box-shadow:0 3px 10px rgba(17,17,20,.08)} /* Le numéro de la famille est un CARRÉ PLEIN dans la pastille — la feuille du rail vertical en faisait une puce ronde de sept pixels, posée en dehors du bouton, à treize pixels sur sa gauche. */ body.cfg-etapes-on #cfg-sommaire .cfg-som-fam i{ position:static;left:auto;top:auto;transform:none;box-shadow:none; display:flex;font-style:normal;font-family:var(--display);font-size:.68rem;line-height:1; background:var(--sable);color:var(--encre-doux);width:21px;height:21px;border:0; align-items:center;justify-content:center;border-radius:0} body.cfg-etapes-on #cfg-sommaire .cfg-som-fam u{ text-decoration:none;font-family:var(--display);font-size:.64rem;line-height:1; border:1px solid var(--trait);background:var(--papier);padding:3px 6px;color:var(--encre-doux)} body.cfg-etapes-on #cfg-sommaire .cfg-som-fam span{ display:block;-webkit-line-clamp:none;overflow:visible} /* Une famille où quelque chose a été changé porte son numéro en rouge. */ body.cfg-etapes-on #cfg-sommaire .cfg-som-fam[data-fait="1"] i{background:var(--laque);color:#fff} body.cfg-etapes-on #cfg-sommaire .cfg-sommaire-piste button[aria-current="true"]{ background:var(--encre);border-color:var(--encre);color:#fff} body.cfg-etapes-on #cfg-sommaire .cfg-som-fam[aria-current="true"] i{ background:rgba(255,255,255,.2);color:#fff} body.cfg-etapes-on #cfg-sommaire .cfg-som-fam[aria-current="true"][data-fait="1"] i{ background:var(--laque);color:#fff} body.cfg-etapes-on #cfg-sommaire .cfg-som-fam[aria-current="true"] u{ background:transparent;border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.88)} /* La famille ouverte tient la main à ses rangées : pas de trait entre elles. */ body.cfg-etapes-on #cfg-sommaire .cfg-som-fam[aria-expanded="true"]{margin-right:-1px} /* Les rangées de la famille où l'on se trouve ne se demandent pas : elles se déplient toutes seules SUR LA MÊME LIGNE, juste à droite, et se replient quand on passe à la suivante. */ body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants{ display:flex;align-items:stretch;gap:5px;flex:0 0 auto; background:var(--sable);border:1px solid var(--trait);border-left:0;padding:4px 5px} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button{ min-height:36px;padding:0 12px;background:var(--papier); font:500 .74rem/1.1 var(--texte);color:var(--encre-doux);gap:7px} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button:hover{background:#fff;color:var(--encre)} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants em{ font-style:normal;font-size:.7rem;color:var(--encre-tres-doux); border-left:1px solid var(--trait);padding-left:7px} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[data-fait="1"]{color:var(--encre)} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[data-fait="1"] em{color:var(--laque)} /* La rangée où l'on se trouve reste noire, et son libellé BLANC : la règle « touchée » vient après et lui remettait l'encre — nom noir sur fond noir, il n'y avait plus que le nom de l'option à lire. */ body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[aria-current="true"], body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[aria-current="true"][data-fait="1"]{ background:var(--encre);border-color:var(--encre);color:#fff} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[aria-current="true"] em{ color:rgba(255,255,255,.75);border-left-color:rgba(255,255,255,.3)} body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button[aria-current="true"][data-fait="1"] em{ color:var(--laque-lisible)} /* ── Le bandeau du prix : NOIR ───────────────────────────── Il ferme le socle. Blanc, il se confondait avec la page ; noir, il est la pièce sous la main, et c'est ce que dit la maquette. */ body.cfg-etapes-on .cfg-barre{ position:fixed;background:var(--encre);color:#fff;backdrop-filter:none; border-top:1px solid var(--encre);box-shadow:0 -2px 24px rgba(11,11,13,.22); /* Le coin réservé au conseiller n'a plus lieu d'être : sa bulle est remontée AU-DESSUS du socle par le script d'habillage, comme dans la maquette. Ces quatre-vingt-dix pixels reviennent à la ligne, et c'est ce qui la fait tenir à 1 200 px. */ --cfg-coin:0px;padding-right:var(--gouttiere); flex-wrap:nowrap;gap:clamp(8px,0.9vw,20px);padding-block:11px} /* La page n'a plus à réserver la hauteur du bandeau DEUX fois : l'atelier le fait déjà, socle compris. Les deux réserves cumulées laissaient deux cent cinquante pixels de vide sous les mentions. */ body.cfg-etapes-on{padding-bottom:0} body.cfg-etapes-on .cfg-barre-libelle{color:rgba(255,255,255,.6)} body.cfg-etapes-on #cfg-total{color:#fff;font-size:clamp(1.1rem,1.5vw,1.6rem)} body.cfg-etapes-on .cfg-finance{border-left:1px solid rgba(255,255,255,.2);padding-left:16px} body.cfg-etapes-on .cfg-finance-tete, body.cfg-etapes-on .cfg-finance-montant b{color:#fff} body.cfg-etapes-on .cfg-finance-duree, body.cfg-etapes-on .cfg-finance-montant span{color:rgba(255,255,255,.66)} body.cfg-etapes-on .cfg-finance-duree b{color:#fff} /* Le financement tenait trois cent trente-sept pixels : la durée passait à la ligne et la réglette prenait toute la largeur restante. Mesuré à 1 440 px, c'était à lui seul de quoi faire déborder la ligne. */ body.cfg-etapes-on .cfg-finance{flex:0 0 auto;width:auto;max-width:none} /* Le prix poussait tout ce qui le suit vers la droite (`margin-right:auto`) : le financement se retrouvait au milieu de la ligne, et la route n'avait plus de milieu où se tenir. Le prix et le financement restent à gauche, la route au centre, les permanents à droite — c'est la maquette. */ body.cfg-etapes-on .cfg-barre .cfg-barre-prix{margin:0} body.cfg-etapes-on #cfg-total{margin-right:0} body.cfg-etapes-on .cfg-finance-tete{flex-wrap:nowrap;white-space:nowrap;gap:9px} body.cfg-etapes-on .cfg-finance-frais{display:none} body.cfg-etapes-on #cfg-echeances{accent-color:var(--laque-lisible)} /* Les commandes du bandeau : un seul gabarit, celui de la maquette. */ body.cfg-etapes-on .cfg-barre .cfg-som-nav, body.cfg-etapes-on .cfg-barre .cfg-som-recap, body.cfg-etapes-on .cfg-barre .cpt-cfg-enregistrer{ appearance:none;flex:0 0 auto;width:auto;min-width:0;height:auto;min-height:0; font:500 clamp(.64rem,.5vw,.72rem)/1 var(--texte);letter-spacing:.08em; text-transform:uppercase; padding:13px clamp(10px,1.1vw,18px);cursor:pointer;border:1px solid rgba(255,255,255,.34); background:transparent;color:#fff;text-align:center; transition:background .2s,border-color .2s} body.cfg-etapes-on .cfg-barre .cfg-som-nav:hover, body.cfg-etapes-on .cfg-barre .cfg-som-recap:hover, body.cfg-etapes-on .cfg-barre .cpt-cfg-enregistrer:hover{ border-color:#fff;background:rgba(255,255,255,.08);color:#fff} body.cfg-etapes-on .cfg-barre .cfg-som-nav:disabled{ opacity:.35;background:transparent;border-color:rgba(255,255,255,.34)} body.cfg-etapes-on .cfg-barre .cfg-som-suiv{ background:var(--laque);border-color:var(--laque);color:#fff} body.cfg-etapes-on .cfg-barre .cfg-som-suiv:hover{background:var(--laque);filter:brightness(1.08)} body.cfg-etapes-on .cfg-barre .cfg-som-recap[aria-pressed="true"]{ background:rgba(255,255,255,.16);border-color:#fff;color:#fff} body.cfg-etapes-on .cfg-barre .cpt-cfg-icone{flex:0 0 auto} body.cfg-etapes-on .cfg-barre .cpt-cfg-icone svg{width:15px;height:15px;fill:currentColor} /* « Ajouter au panier » est le seul bouton plein, et il est BLANC. */ body.cfg-etapes-on #cfg-ajouter{ background-image:none;background:#fff;border-color:#fff;color:var(--encre); padding:13px clamp(12px,1.2vw,22px);font-size:clamp(.64rem,.5vw,.72rem); letter-spacing:.08em} body.cfg-etapes-on #cfg-ajouter:hover{background:#fff;filter:brightness(.93)} /* Deux libellés simples, et rien de plus : le nom de la destination est un choix du téléphone, où il est la seule indication de ce qui vient. */ body.cfg-etapes-on .cfg-barre .cfg-som-ou{display:none} body.cfg-etapes-on .cfg-barre .cfg-som-nav i{ display:inline;font-style:normal;font-size:.9em;opacity:.85} body.cfg-etapes-on .cfg-barre .cfg-som-nav b{display:inline;font:inherit;color:inherit} body.cfg-etapes-on .cfg-barre .cfg-som-nav{display:inline-flex;align-items:center;gap:8px} body.cfg-etapes-on .cfg-barre .cfg-som-boucle{flex-direction:row-reverse} /* La route se tient au MILIEU de la ligne, quoi que pèsent le prix à sa gauche et les trois permanents à sa droite — centrage absolu, et non un espacement. La classe est posée par la mesure, pas par une largeur devinée : si la route touche un voisin, elle reprend son rang. */ body.cfg-etapes-on .cfg-barre{position:fixed} body.cfg-etapes-on .cfg-route{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-left:auto} body.cfg-etapes-on .cfg-barre.cfg-route-centree .cfg-route{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-left:0} body.cfg-etapes-on .cfg-barre.cfg-route-centree .cfg-som-recap{margin-left:auto} /* Sous 900 px, rien ne change : la route reste dans le rail, en pleine largeur, avec le nom de sa destination, et le bandeau garde sa robe claire. Ces deux lignes rattrapent seulement les nouvelles pièces. */ @media(max-width:900px){ #cfg-sommaire .cfg-jauge{display:none} } /* ═══════════════════════════════════════════════════════════ 19. LA BARRE DE DÉFILEMENT NE PASSE PLUS SUR LES CHIFFRES ═══════════════════════════════════════════════════════════ Deux cadres défilent d'eux-mêmes en mode étapes : la liste des options et le récapitulatif. Leur contenu allait jusqu'au bord, et la barre de défilement se posait dessus — « + 610 € », aligné à droite, passait sous le rail dès qu'on descendait. On réserve la gouttière (elle est prise en compte dans la largeur, donc rien ne saute quand la barre apparaît) et on écarte le contenu du bord. La barre elle-même se fait fine, dans le gris des libellés — une barre qu'on ne voit pas ne sert à rien. ═══════════════════════════════════════════════════════════ */ body.cfg-etapes-on #cfg-composants, body.cfg-etapes-on.cfg-recap-on .cfg-bilan{ scrollbar-gutter:stable; padding-right:clamp(8px,.9vw,14px); scrollbar-width:thin;scrollbar-color:var(--encre-tres-doux) transparent} body.cfg-etapes-on #cfg-composants::-webkit-scrollbar, body.cfg-etapes-on.cfg-recap-on .cfg-bilan::-webkit-scrollbar{width:8px} body.cfg-etapes-on #cfg-composants::-webkit-scrollbar-track, body.cfg-etapes-on.cfg-recap-on .cfg-bilan::-webkit-scrollbar-track{background:transparent} body.cfg-etapes-on #cfg-composants::-webkit-scrollbar-thumb, body.cfg-etapes-on.cfg-recap-on .cfg-bilan::-webkit-scrollbar-thumb{ background:var(--encre-tres-doux);border:2px solid transparent;background-clip:content-box} body.cfg-etapes-on #cfg-composants:hover::-webkit-scrollbar-thumb, body.cfg-etapes-on.cfg-recap-on .cfg-bilan:hover::-webkit-scrollbar-thumb{ background:var(--encre-doux);background-clip:content-box} /* ═══════════════════════════════════════════════════════════ 20. LA LOUPE N'EST PLUS DERRIÈRE « REPARTIR DE ZÉRO » ═══════════════════════════════════════════════════════════ En mode étapes, le retour au choix du modèle est posé dans le coin HAUT GAUCHE de la scène, avec une largeur qui peut aller jusqu'à la moitié de la colonne. Quand la phrase de reprise s'ajoute — « Nous avons repris la configuration que vous aviez laissée. Repartir de zéro » —, la ligne traverse la scène et vient buter dans la loupe, posée en haut à droite : deux commandes l'une sur l'autre, et c'est la loupe qui passe derrière. Elle descend dans le coin BAS droit, qui est vide — la montre est centrée, et la commande de rotation vit sous la scène, pas dedans. ═══════════════════════════════════════════════════════════ */ @media(min-width:901px){ body.cfg-etapes-on #cfg-loupe{top:auto;bottom:12px;right:12px} } /* ═══════════════════════════════════════════════════════════ 21. LE TÉLÉPHONE REÇOIT LA MAQUETTE B ═══════════════════════════════════════════════════════════ Relevé au navigateur, iPhone 375 × 812 contre 1 440 × 900, même montre (V6-44-SA), même étape : · la scène : au bureau, un dégradé crème d'un bord à l'autre et aucun cadre ; au téléphone, un carré de 252 px encadré d'un filet, posé sur du papier blanc — deux chartes ; · l'en-tête d'étape : 34,6 px au bureau, absent au téléphone ; · les options : des cartes en grille au bureau, une rangée défilante de vignettes de 88 px au téléphone ; · le socle : rail des familles FIXE au-dessus du bandeau au bureau ; au téléphone, un rail dans le flux et « Précédent / Suivant » posés au milieu de la page. Les deux premiers points se règlent plus haut, en sortant les règles de la requête « grand écran ». Ce bloc-ci ne garde que ce qui doit VRAIMENT différer sur un petit écran : la largeur des cases, et la façon dont le socle se replie. Ce qui ne bouge pas : la géométrie des calques (pourcentages d'un gabarit de 700 px, centre commun), qui n'a qu'une copie et n'est pas touchée ici ; `--cfg-large`, que le script mesure ; et le nom `.cfg-barre`, que le bandeau cookies et la bulle du conseiller sont seuls à connaître. ═══════════════════════════════════════════════════════════ */ @media(max-width:900px){ /* ── 21.1 La scène : le même dégradé, d'un bord à l'autre ── La colonne du visuel prend la gouttière de la page à rebours pour aller toucher les deux bords, comme la moitié gauche du bureau. Le cadre, lui, n'est plus qu'un carré vide où la pile se pose : ni fond ni filet. Les calques ne sont pas touchés. */ body.cfg-etapes-on .cfg-visuel{ margin-inline:calc(var(--gouttiere) * -1); padding-inline:var(--gouttiere); background:radial-gradient(ellipse 76% 60% at 50% 46%, #FFFFFF 0%,var(--creme) 62%,var(--sable) 100%); border-bottom:1px solid var(--trait)} body.cfg-etapes-on #cfg-scene{background:none;border:0} /* Le voile sous la réglette de rotation était blanc : sur le dégradé crème il dessinait une bande claire en travers de la scène. */ body.cfg-etapes-on .cfg-vue-barre{ background:linear-gradient(to top, rgba(255,255,255,.80) 55%,rgba(255,255,255,0))} body.cfg-etapes-on .cfg-vue-compteur{background:rgba(255,255,255,.78)} /* ── 21.2 L'en-tête d'étape prend la place des libellés du moteur ── Il dit déjà le nom du composant, en grand : le libellé en petites capitales le répétait juste en dessous. */ body.cfg-etapes-on .cfg-composant-titre, body.cfg-etapes-on .cfg-groupe-titre{display:none} body.cfg-etapes-on .cfg-tete-etape{margin-bottom:12px} body.cfg-etapes-on .cfg-etape-nom{font-size:clamp(1.45rem,6.6vw,2rem)} body.cfg-etapes-on .cfg-etape-sous{margin-top:7px;font-size:.84rem} body.cfg-etapes-on #cfg-composants{padding-top:0} /* ── 21.3 Les cartes : deux colonnes ────────────────────── Mesuré : la colonne utile fait 331 px. À 148 px de case, la grille `auto-fill` n'en tient que deux — c'est ce qu'on veut —, mais la dernière rangée se collait à gauche. On fixe donc deux colonnes, et la case descend à ce que la place permet. */ body.cfg-etapes-on .cfg-choix{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;margin-top:16px} body.cfg-etapes-on .cfg-option{padding:9px 8px 11px;gap:6px} body.cfg-etapes-on .cfg-option-nom{font-size:.8rem} body.cfg-etapes-on .cfg-option-prix{font-size:.72rem} /* ── 21.4 Le socle : le rail descend se coller au bandeau ── Au bureau les deux ne font qu'une pièce, en bas, sous la main. Au téléphone le rail restait dans le flux, à mi-page, et la route (« Précédent / Suivant ») avec lui : il fallait remonter pour changer d'étape. Il descend. `position:fixed` et non `sticky` : le script mesure déjà la place qui reste aux options jusqu'au HAUT du rail quand celui-ci est fixé (`placeDesOptions`), et publie sa hauteur dans `--cfg-rail-h`. Rien à lui apprendre. */ body.cfg-etapes-on #cfg-sommaire.cfg-sommaire{ position:fixed;left:0;right:0;top:auto; bottom:var(--cfg-barre-h,96px);z-index:41; max-height:none;margin:0;padding:7px var(--gouttiere) 8px; background:var(--papier); border-top:1px solid var(--trait);border-bottom:0; box-shadow:0 -10px 26px rgba(17,17,20,.06)} /* Les familles reviennent, dépliées sur la ligne comme au bureau, et la piste défile plutôt que de s'empiler. */ body.cfg-etapes-on #cfg-sommaire.en-ligne{ display:flex;align-items:center;flex-wrap:nowrap;gap:10px} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-tete{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste{ display:flex;order:1;flex:1 1 auto;min-width:0;max-height:none; flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none; padding:0;margin:0} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste::-webkit-scrollbar{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste::before, body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste::after{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-piste button{ white-space:nowrap;flex:0 0 auto} /* La route garde sa place à droite, mais sans le nom de sa destination : « Peinture rainure sur boîtier haute » prenait la moitié du socle. Deux flèches de 44 px, et le nom se lit en grand dès qu'on y est. */ body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-sommaire-barre{ display:flex;order:2;flex:0 0 auto;gap:6px; border-top:0;padding-top:0;margin-top:0} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-nav{ flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:6px} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-nav b, body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-nav .cfg-som-ou{display:none} body.cfg-etapes-on #cfg-sommaire.en-ligne .cfg-som-nav i{ display:flex;position:static;align-items:center;justify-content:center; width:100%;height:100%;font-style:normal;font-size:1rem} /* Le socle prend deux étages : la page lui rend sa hauteur, sinon la dernière rangée de cartes passe dessous. */ body.cfg-en-cours #cfg-atelier{ padding-bottom:calc(var(--cfg-barre-h,96px) + var(--cfg-rail-h,56px) + 12px)} /* Le visuel n'est plus collant : il n'a plus rien à suivre — un seul composant est à l'écran, et le socle ne défile pas. Collant, il mangeait la moitié de l'écran en permanence. */ body.cfg-etapes-on .cfg-visuel{position:static} } /* ── 21.5 Au doigt, dans le socle ─────────────────────────── Relevé au téléphone après coup : les rangées dépliées sous leur famille tombaient à 36 px et le signet « Enregistrer » à 42. Le socle est la pièce qu'on touche : rien n'y descend sous 44. */ @media(max-width:900px){ body.cfg-etapes-on #cfg-sommaire .cfg-som-enfants button{min-height:44px} body.cfg-etapes-on .cfg-barre .cpt-cfg-enregistrer{min-height:44px} }