.home-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 90; display: flex; min-height: var(--hp-bottom-nav-height); align-items: stretch; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--hp-line, rgba(223, 212, 195, .72)); background: rgba(255, 253, 247, .96); backdrop-filter: blur(16px); } .home-bottom-nav__item { /* Chrome figee, sur l'echelle : 8 + 24 + 4 + 11 + 8 = 55px, sous les 62px que le jeton reserve, et identique a toutes les largeurs. Fluide, elle atteignait 80,8px a 768px — 18,8px de contenu passaient sous la barre, et la carte de /carte/ debordait d'autant. */ padding: 8px 4px; gap: 4px; font-size: 14px; display: grid; flex: 1; min-width: 0; align-content: center; justify-items: center; gap: 4px; padding: var(--hp-space-2) 2px; color: var(--hp-muted, #5F665D); /* 0,7rem, soit 9,8px sur un telephone de 375px, pour les cinq mots qui portent TOUTE la navigation au pouce. Le calcul de chrome figee de la note ci-dessus tient toujours : 8 + 24 + 4 + 14 + 8 = 58px, sous les 62px reserves — la barre ne grandit pas. */ font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; } .home-bottom-nav__item:hover, .home-bottom-nav__item.is-active { color: var(--hp-orange); text-decoration: none; } .home-nav-icon, .home-nav-icon svg { width: 24px; height: 24px; } .home-nav-icon { overflow: visible; /* Ancre la pastille du compteur. Sans cette ligne, elle ne trouvait son bloc de positionnement que sur l'accueil, via home/icons.css, et partait se poser au coin haut-droit de la BARRE ENTIERE sur /explorer/, /panier/ et /carte/ — a ~150px de l'icone panier. Un composant ne doit pas dependre d'une feuille de page pour tenir debout. */ position: relative; } .home-nav-badge { position: absolute; top: calc(var(--hp-space-1) * -1.25); right: calc(var(--hp-space-1) * -1.4); display: inline-flex; min-width: clamp(19px, 5vw, 24px); height: clamp(19px, 5vw, 24px); align-items: center; justify-content: center; padding: 0 var(--hp-space-1); border-radius: 999px; background: var(--hp-orange); color: var(--hp-paper, #FFFDF7); font-size: var(--hp-font-xs); font-weight: 700; } @media (min-width: 421px) { .home-bottom-nav { border-top-color: var(--hp-line); } .home-bottom-nav__item { gap: var(--hp-space-1); font-size: var(--hp-font-xs); font-weight: 600; } .home-nav-icon, .home-nav-icon svg { width: var(--hp-icon-sm); height: var(--hp-icon-sm); } } /* --- LA HAUTEUR ET LE REPLI, DECLARES ICI ET NULLE PART AILLEURS --------- * * Le composant possede sa propre hauteur. Elle vivait auparavant dans SEPT * feuilles, et le duel se jouait a la specificite, pas a l'ordre de chargement : * `.home-page, .public-page` (une classe) battait `:root, body` (des elements) * quel que soit l'ordre des liens. Resultat mesure : la barre etait bien * masquee au-dela de 900px, mais 62px restaient reserves sous la page — un vide * sous le pied de page, visible, que rien n'expliquait a la lecture. * * LE SEUIL, ET POURQUOI NI LA LARGEUR NI L'ORIENTATION NE SUFFISENT. * La regle voulue : la barre sert les petits ecrans et les tablettes en * PORTRAIT ; elle se replie en desktop et en tablette PAYSAGE. * * Premiere tentative, la largeur seule : un iPad Pro 12,9" en portrait fait * 1024px de large. Il perdait sa barre, exactement la ou elle doit rester. * * Deuxieme tentative, largeur + paysage : un iPhone 16 Pro Max couche fait * 956x440. Il passe le seuil de 900px, il est en paysage — et il perdait sa * barre lui aussi. Or c'est un TELEPHONE : un petit ecran, pas une tablette. * * Ce qui distingue reellement les cas, ce sont deux choses que le CSS sait * interroger : * * 1. LA SOURIS. `any-pointer: fine` dit qu'un dispositif de pointage precis * est disponible : c'est un ordinateur, quelle que soit l'orientation de * sa fenetre. Cela regle du meme coup la fenetre haute et etroite d'un * poste de travail, que la largeur seule ne savait pas prendre. * 2. LA HAUTEUR. Une tablette couchee fait au moins 600px de haut (Nexus 7 = * 960x600, le plus modeste) ; le telephone couche le plus haut du marche * plafonne a 448px (Pixel 9 Pro XL). C'est ce qui separe la tablette du * telephone, et rien d'autre ne le fait. * * Douze feuilles du depot designent deja le telephone couche par * `(orientation: landscape) and (max-height: 520px)`. Le seuil pose ici * est son complement, arrondi vers le haut : 600 plutot que 521, pour * qu'aucun appareil ne tombe dans la zone grise entre 448 et 600. * * LA PLACE RESERVEE SUIT LA PRESENCE REELLE DE LA BARRE. * `body:has(.home-bottom-nav)` : les surfaces qui ne rendent pas la barre — * l'intranet, le CRM, la connexion interne — ne reservent rien, sans avoir a * le declarer chacune de leur cote. Le meme selecteur est repris dans les * requetes de repli pour que le depart se joue a l'ordre de lecture, qui se * voit, et non a la specificite, qui ne se voit pas. */ :root { --hp-bottom-nav-height: 0px; } body:has(.home-bottom-nav) { --hp-bottom-nav-height: 62px; } /* 1. La souris est la : c'est un ordinateur. */ @media (min-width: 900px) and (any-pointer: fine) { .home-bottom-nav { display: none; } body:has(.home-bottom-nav) { --hp-bottom-nav-height: 0px; } } /* 2. Pas de souris, mais l'ecran est large ET haut : une tablette couchee. */ @media (min-width: 900px) and (orientation: landscape) and (min-height: 600px) { .home-bottom-nav { display: none; } body:has(.home-bottom-nav) { --hp-bottom-nav-height: 0px; } } /* Etat actif : le terracotta de la charte ne passe pas AA sur fond clair a cette taille de texte (3,95:1). On garde la couleur de marque pour le trait et l'icone, et on remonte le libelle sur l'encre du corps de texte. */ .home-bottom-nav__item.is-active { color: var(--hp-ink, #1b211c); } .home-bottom-nav__item.is-active .home-nav-icon { color: var(--hp-terra, #C86138); } /* Cible tactile : le CDC impose 44px, la barre en faisait moins. */ .home-bottom-nav__item { min-height: var(--tap-size, 44px); } /* Dette residuelle assumee, valeur par valeur — decidee, pas subie : - rgba(255, 253, 247, .96) : fond translucide. --hp-paper est opaque ; aucun jeton ne porte cette transparence. Substituer supprimerait le flou derriere. - rgba(27, 29, 24, .08) et .12 : ombres portees VERS LE HAUT. --hp-shadow est une ombre descendante complete, pas une couleur : inutilisable ici. - font-size: 0.7rem : --hp-font-xs vaut .58, .66, .68 ou .86rem selon le palier. Aucun ne vaut .7rem : substituer changerait la courbe responsive. Ces quatre valeurs attendent un jeton qui n'existe pas encore. Les creer releve de l'unification des quatre espaces de noms, chantier a part. Les substitutions ci-dessus gardent la valeur actuelle en repli : si le jeton n'est pas defini sur une surface, le rendu est identique a avant. Le changement est donc visuellement neutre par construction. */ /* --------------------------------------------------------------------------- Le geste signature : « Autour » surelevee au centre de la barre. Reprise de la barre de production, restylee avec les jetons de la recette. Elle mene a la carte existante — un bouton qui montre une carte vide et le dit reste un bouton vivant ; un bouton qui ne mene nulle part serait mort. --------------------------------------------------------------------------- */ .home-bottom-nav__item--raised { position: relative; } /* La pastille remonte au-dessus du filet de la barre. Elle est dessinee sur le conteneur de l'icone, pas sur le lien : la cible tactile reste celle de la colonne entiere, donc pleine hauteur et pleine largeur. */ .home-bottom-nav .home-bottom-nav__item--raised .home-nav-icon { width: 46px; height: 46px; margin-top: -20px; border-radius: 50%; background: var(--ui-color-brand, #245A3B); color: var(--ui-color-cream, #FFF8EC); box-shadow: var(--ui-shadow-float, 0 16px 42px rgba(27, 29, 24, .11)); border: 3px solid var(--hp-paper, #fffdf8); display: grid; place-items: center; transition: transform 160ms var(--ui-motion-ease, ease), box-shadow 160ms var(--ui-motion-ease, ease); } .home-bottom-nav .home-bottom-nav__item--raised .home-nav-icon .ui-icon { width: 20px; height: 20px; } .home-bottom-nav .home-bottom-nav__item--raised:hover .home-nav-icon, .home-bottom-nav .home-bottom-nav__item--raised:focus-visible .home-nav-icon { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(36, 90, 59, .32); } /* Active, la pastille passe au terracotta : c'est le seul endroit de la barre ou l'accent prend une surface pleine, et il dit « vous etes ici ». */ .home-bottom-nav .home-bottom-nav__item--raised.is-active .home-nav-icon { background: var(--ui-color-accent, #C86138); } /* Son libelle reste lisible sous la pastille remontee. */ .home-bottom-nav .home-bottom-nav__item--raised .home-bottom-nav__label { margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .home-bottom-nav .home-bottom-nav__item--raised .home-nav-icon { transition: none; } .home-bottom-nav .home-bottom-nav__item--raised:hover .home-nav-icon, .home-bottom-nav .home-bottom-nav__item--raised:focus-visible .home-nav-icon { transform: none; } }