/* ============================================================================ MENU PUBLIC — LA SEULE DÉFINITION, POUR TOUTES LES PAGES ============================================================================ ⚠️ Ce fichier existe parce que le menu était écrit DEUX FOIS : une version dans `index.php` (barre flottante arrondie, Accueil/Catalogue/Blog/Contact, « Être rappelé ») et une autre dans `header.php` (barre pleine largeur, Accueil/Catalogue/Contact, sans blog ni rappel). Le visiteur changeait de menu en changeant de page. Le markup vit dans `partial_navbar_public.php`, les styles ici, et les deux pages incluent l'un et l'autre. ➡️ Ne jamais redéfinir ces classes ailleurs. Les couleurs passent par l'échelle sémantique de `stamova-theme.css` : ce menu n'apparaît que pour un visiteur, donc toujours en thème clair, mais on ne remet pas de valeurs en dur pour autant. ============================================================================ */ /* ⚠️ CHAQUE `var()` PORTE UN REPLI, et ce n'est pas de la coquetterie. Cette feuille est chargée par des pages qui n'ont PAS `stamova-theme.css` (le blog a son propre ). Sans repli, `color: var(--stm-ink-4)` y est une déclaration INVALIDE : la propriété est ignorée, la couleur est héritée, et l'entrée active du menu cesse de se distinguer des autres — c'est exactement le défaut signalé sur « Blog ». Les valeurs de repli sont celles du thème CLAIR. */ .navbar-public { background: transparent !important; border: 0; padding: 1.15rem 0; position: fixed; top: 40px; /* sous le bandeau promotionnel */ left: 0; right: 0; z-index: 1000; transition: padding .35s cubic-bezier(.4, 0, .2, 1), top .35s cubic-bezier(.4, 0, .2, 1); } /* Le bandeau parti, la barre reprend le haut de l'écran. */ .navbar-public.scrolled { top: 0; } @media (max-width: 767.98px) { .navbar-public { top: 36px; } } /* ⚠️ Sur une page SANS bandeau promotionnel, la barre ne doit pas flotter 40 px plus bas dans le vide : `.navbar-public.sans-bandeau` la colle en haut. C'est `partial_navbar_public.php` qui pose la classe. */ .navbar-public.sans-bandeau { top: 0; } /* ⚠️ PAS DE `max-width` AU REPOS — c'est le comportement d'origine. La barre ne se resserre a 1080px qu'une fois la page DEFILEE (`.scrolled`), et c'est ce qui donne son mouvement au menu. Figer 1080px des le chargement ne laisse pas la place aux 4 liens + la langue + les deux boutons : sur grand ecran, la barre passait sur DEUX LIGNES en haut de page. */ .navbar-public > .container { /* ⚠️ BLANC DÈS LE CHARGEMENT, et pas seulement au défilement. Transparent, la barre laissait voir le dégradé lavande du hero : la pastille de l'entrée active y disparaissait presque, alors qu'elle ressort sur le blanc des autres pages. Même pastille, contraste différent — c'est ce qui se lisait comme « pas la même surbrillance ». On ne fait qu'avancer l'état que la barre prenait déjà en défilant. */ background: var(--stm-field, #ffffff); border: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); border-radius: 2.2rem; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10); padding: .4rem 1.2rem; /* On ne transitionne QUE des propriétés de peinture : `max-width` et `padding` relanceraient la mise en page à chaque image. */ transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; } .navbar-public.scrolled { padding: .5rem 0; } .navbar-public.scrolled > .container { max-width: 1080px; background: var(--stm-field, #ffffff); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-color: var(--stm-line, rgba(15, 23, 42, 0.112)); box-shadow: 0 12px 42px rgba(15, 23, 42, 0.175); padding: .4rem 1.2rem; } .navbar-public .navbar-brand img { height: 28px; width: auto; transition: height .35s cubic-bezier(.4, 0, .2, 1); } .navbar-public.scrolled .navbar-brand img { height: 24px; } /* Menu déplié en mobile : il lui faut un fond, sinon il se lit par-dessus le contenu de la page. */ .navbar-public .navbar-collapse.show, .navbar-public .navbar-collapse.collapsing { background: var(--stm-field, #ffffff); border: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); border-radius: 1.1rem; margin-top: .6rem; padding: .75rem 1rem; box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14); } /* ⚠️ TOUT EST DÉCLARÉ ICI, rien n'est laissé à l'ambiance de la page. `border-radius` et `line-height` venaient d'autres feuilles (le thème, la feuille de l'app) que le blog ne charge pas : la pastille de l'entrée active y sortait donc à COINS CARRÉS et plus haute, alors que le balisage et les couleurs étaient pourtant identiques. Une feuille partagée doit se suffire à elle-même. */ .nav-link-public { color: var(--stm-ink-4, #475569) !important; font-weight: 500; font-size: 0.97rem; line-height: 1.5; padding: 0.5rem 1rem !important; border: 0; border-radius: 0.5rem; transition: color .25s ease, background-color .25s ease; } .nav-link-public:hover { color: var(--stm-ink, #0f172a) !important; background: var(--stm-surface-1, rgba(15, 23, 42, 0.022)); } /* ⚠️ L'ENTRÉE ACTIVE PORTE UNE PASTILLE, pas seulement un texte plus foncé. La nuance de texte seule ne se voyait pas : « Blog » ne paraissait jamais sélectionné, contrairement aux autres pages qui, elles, bénéficiaient de la règle de `header.php`. C'est ce style-là qui fait foi désormais. */ .nav-link-public.active { color: var(--stm-ink, #0f172a) !important; background: rgba(102, 126, 234, 0.2); } /* ⚠️ LE CONTOUR AU CLIC. Le navigateur dessine un anneau de focus sur un lien cliqué à la souris, ce qui ressemble à un défaut d'affichage. On ne le supprime PAS purement et simplement : il reste indispensable au clavier. `:focus-visible` fait exactement ce tri. */ .navbar-public .nav-link-public:focus, .navbar-public .btn:focus, .navbar-public .navbar-brand:focus { outline: none; box-shadow: none; } .navbar-public .nav-link-public:focus-visible, .navbar-public .btn:focus-visible, .navbar-public .navbar-brand:focus-visible { outline: 2px solid var(--stm-accent, #4f46e5); outline-offset: 2px; box-shadow: none; } /* ⚠️ CES BOUTONS SONT PORTÉS PAR LE MENU, ET SEULEMENT PAR LUI. `.btn-login` et `.btn-register` existent aussi dans `stamova-theme.css` et dans le skin, et `cart.php` utilise `.btn-register` pour son bouton d'envoi. Sans préfixe, c'est la DERNIÈRE feuille chargée qui gagnait — donc pas la même selon la page : le bouton « S'inscrire » sortait avec un remplissage de 7,7 × 15,2 px sur le catalogue contre 8,8 × 24 px sur l'accueil et le blog. Le préfixe `.navbar-public` règle les deux problèmes d'un coup : il passe devant les autres feuilles, et il laisse le bouton du panier tranquille. */ .navbar-public .btn-login { background: transparent; border: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); color: var(--stm-ink, #0f172a); padding: 0.5rem 1.4rem; border-radius: 2rem; font-size: 0.92rem; transition: all .25s ease; } .navbar-public .btn-login:hover { border-color: rgba(122, 139, 255, 0.45); background: rgba(102, 126, 234, .08); color: #3730a3; } .navbar-public .btn-register { background: var(--stm-grad, linear-gradient(115deg, #667eea 0%, #a78bfa 45%, #f093fb 100%)); background-size: 160% 160%; border: none; color: #fff; padding: 0.55rem 1.5rem; border-radius: 2rem; font-weight: 600; font-size: 0.92rem; transition: all .25s ease; } .navbar-public .btn-register:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(102, 126, 234, .45); color: #fff; } .navbar-public .cart-indicator { position: relative; } .navbar-public .cart-indicator .cart-badge { position: absolute; top: -6px; right: -6px; background: var(--stm-grad, linear-gradient(115deg, #667eea, #f093fb)); color: #fff; font-size: 0.68rem; font-weight: 700; width: 19px; height: 19px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } @media (prefers-reduced-motion: reduce) { .navbar-public, .navbar-public > .container, .navbar-public .navbar-brand img { transition: none; } } /* ============================================================================ LE MENU REPLIÉ (TÉLÉPHONE) ============================================================================ ⚠️ `.navbar-nav` de Bootstrap a `margin-bottom: 0`. En horizontal sur ordinateur cela ne se voit pas ; replié en colonne, la liste et le groupe de boutons se touchent à 0 px, et la pastille de l'entrée active vient coller le sélecteur de langue et « Être rappelé ». D'où une séparation explicite. ============================================================================ */ @media (max-width: 991.98px) { .navbar-public .navbar-nav { margin-bottom: .85rem; padding-bottom: .85rem; border-bottom: 1px solid var(--stm-line, rgba(15, 23, 42, 0.112)); } /* Un peu d'air entre les entrées, qui sont collées les unes aux autres dès qu'elles s'empilent. */ .navbar-public .navbar-nav .nav-item + .nav-item { margin-top: .15rem; } } /* ============================================================================ VARIANTE « DANS LE FLUX » — toutes les pages sauf la landing ============================================================================ Sur la landing, la barre se pose PAR-DESSUS le hero, qui est dessiné pour ça (`position: fixed`). Ailleurs, une barre fixe recouvrirait le haut du contenu : elle reste donc dans le flux. À l'œil, c'est le même menu. ============================================================================ */ .navbar-public--flux { position: sticky; top: 0; padding: .6rem 0; } .navbar-public--flux > .container { background: var(--stm-field, #ffffff); border-color: var(--stm-line, rgba(15, 23, 42, 0.112)); box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10); padding: .4rem 1.2rem; } .navbar-public--flux .navbar-brand img { height: 26px; } /* ============================================================================ GARDE-FOU GRAND ÉCRAN : le menu tient sur UNE ligne ============================================================================ `flex-wrap: nowrap` UNIQUEMENT au-dessus de 992px : en dessous, le menu replié DOIT pouvoir passer sous la barre, c'est le fonctionnement même du `.navbar-collapse` de Bootstrap. Le poser sans média query casse le menu mobile. */ @media (min-width: 992px) { .navbar-public > .container { flex-wrap: nowrap; } .navbar-public .navbar-nav { flex-wrap: nowrap; } }