/* * Page d'accueil centrale. * * Ce fichier ne definit PAS l'apparence du composant rayons : celle-ci vient de * css/rayon_style.css, deja charge par la page, exactement comme sur la page * boutique (.section-hidden-boutique l.1223, .main-rayon-items l.1195, * .rayon-marchand-dynamique l.1184, .mesb l.852, .slide-btn-next-rayon l.1270). * * On ne fait ici que deux choses : * 1. rendre le composant visible — sa regle de base est display:none, et les * surcharges existantes sont eparpillees dans trois fichiers aux media * queries contradictoires (partage_style_helper1.css l.330 et l.508, * acceuil_marchand.css l.1093) ; * 2. l'installer dans l'entete, entre le logo et le champ de recherche. * * Tout est prefixe par .page-centrale, pose sur par la vue : les autres * pages ne sont pas affectees. */ /* --------------------------------------------- entete : logo | rayons | recherche */ /* La regle de base (main-css.css:672) pose width:inherit et un padding gauche * de 39px, prevus pour un seul enfant. Avec deux enfants, cela deborde et * repousse la recherche hors de l'ecran. */ .page-centrale .nav-search-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: auto; flex: 1 1 auto; min-width: 0; padding: 0 0 0 16px; box-sizing: border-box; } /* Hote du composant. * Volontairement en flux normal (display:block) et non en flex : les deux * chevrons se positionnent par marges negatives * (.slide-btn-next-rayon : margin-left:482px; margin-top:-70px, rayon_style.css * l.1270), ce qui suppose un contexte de bloc. Un conteneur flex les deplace. */ .page-centrale .centrale-rayons-hote { position: relative; display: block; /* largeur figee : le composant est calibre pour 506px (3 pastilles de 146px * plus les deux chevrons de 23px). Le laisser se comprimer faisait chevaucher * le champ de recherche. */ flex: 0 0 506px; width: 506px; /* Cale la zone a gauche, contre le logo, et repousse la recherche a droite. * La marge automatique absorbe tout l'espace libre : le calage tient a * n'importe quelle largeur d'ecran, contrairement a une valeur fixe qui * serait juste sur une seule taille de fenetre. */ margin-right: auto; margin-left: 38px; } /* --------------------------------------------- visibilite du composant */ .page-centrale .section-hidden-boutique { display: flex; align-items: center; margin-left: 0; width: 100%; height: 70px; position: relative; padding: 0; box-sizing: border-box; /* display: none; */ } /* La zone utile laisse 25px de chaque cote pour les deux chevrons (23px), * et fait exactement la hauteur des deux rangees : 30 + 4 + 30 = 64px. * Centree dans les 70px de la section, elle laisse 3px au-dessus et au-dessous. */ .page-centrale .section-hidden-boutique .main-zone-rayon-section-share { flex: 1 1 auto; min-width: 0; margin: 0 25px; /* padding remis a zero : la regle heritee pose padding:2px et padding-top:3px, * ce qui poussait la piste Swiper de 3px vers le bas et la faisait deborder * de l'article — les deux rangees se retrouvaient collees en bas. */ padding: 0; height: 64px; display: block; box-sizing: border-box; } /* Les deux chevrons gardent leur apparence d'origine (23x69, #F5F5F5, coins * arrondis, definis dans rayon_style.css l.1232 et l.1270). Seul leur calage * est repris : l'original les place par marges fixes (margin-left:482px, * margin-top:-70px) calibrees pour la page boutique, ce qui les sort du cadre * ici. On les ancre aux bords du composant. */ .page-centrale .section-hidden-boutique .centrale-prev, .page-centrale .section-hidden-boutique .centrale-next { position: absolute; top: 0; margin: 0; height: 69px; width: 23px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .page-centrale .section-hidden-boutique .centrale-prev { left: 0; border-radius: 6px 0 0 6px; } .page-centrale .section-hidden-boutique .centrale-next { right: 0; border-radius: 0 6px 6px 0; } /* Le fond d'origine (#F5F5F5) se confond avec le blanc de l'entete : sur la * page boutique le composant est pose sur un fond colore, ici non. Un liseré * suffit a les detacher, sans changer leur aspect. */ .page-centrale .section-hidden-boutique .centrale-prev, .page-centrale .section-hidden-boutique .centrale-next { background-color: #F5F5F5; border: 1px solid #E3E3E3; } /* les images des chevrons sont calees par marges dans le balisage d'origine */ .page-centrale .section-hidden-boutique .centrale-prev img, .page-centrale .section-hidden-boutique .centrale-next img { margin: 0 !important; } /* Swiper est desactive sur une seule page : on masque alors les chevrons, * comme le fait Swiper avec swiper-button-disabled. */ .page-centrale .section-hidden-boutique .swiper-button-disabled { opacity: 0.25; cursor: default; } /* --------------------------------------------- centrage des pastilles * * .main-rayon-items est une grille de 3 colonnes en 1fr (rayon_style.css l.1195). * Swiper fixe la diapositive a 454px, soit des colonnes de ~151px pour des * pastilles de 146px (l.1184) : chaque pastille se cale a gauche de sa colonne * et la rangee parait decalee. Les deux rangees (30px + 4px + 30px = 64px) ne * sont pas non plus centrees dans les 70px de la section. * * On repasse en flex avec retour a la ligne : meme disposition 3x2, mais les * pastilles sont centrees horizontalement et verticalement, et la derniere * diapositive — qui ne contient qu'un rayon — est centree elle aussi au lieu * d'etre collee a gauche. */ .page-centrale .section-hidden-boutique .main-rayon-items { /* !important : .main-rayon-items est declare display:grid dans quatre * feuilles (rayon_style.css l.1195, acceuil_marchand.css l.1073, * marchand/acceuil-marchand4.css l.13) et la valeur calculee restait grid * malgre une specificite superieure ici. */ display: flex !important; flex-wrap: wrap; justify-content: center; align-content: center; align-items: center; gap: 4px; height: 64px; box-sizing: border-box; } .page-centrale .section-hidden-boutique .main-rayon-items .rayon-marchand-dynamique { flex: 0 0 146px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } /* le lien occupe toute la pastille pour que la zone cliquable soit complete */ .page-centrale .section-hidden-boutique .rayon-link-item { display: block; width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; } /* la piste et les diapositives suivent la hauteur de la zone utile. * Les marges, bordures et remplissages sont remis a zero : sans cela le * conteneur Swiper se decalait de 3px vers le bas et debordait de l'article, * ce qui collait les deux rangees au bas de la section. */ .page-centrale .section-hidden-boutique .mySwiperCentrale, .page-centrale .section-hidden-boutique .swiper-wrapper, .page-centrale .section-hidden-boutique .swiper-slide { height: 64px; margin: 0; padding: 0; border: 0; box-sizing: border-box; } .page-centrale .section-hidden-boutique .mySwiperCentrale { width: 100%; position: relative; top: 0; left: 0; } /* --------------------------------------------- recherche, largeur fixe */ /* Largeur d'origine du bloc de recherche (rayon.css l.8 : width 634px), * conservee telle quelle. Pas d'extension au survol. * flex-shrink a 1 : sur une fenetre trop etroite pour 506 + 634, c'est la * recherche qui se reduit, et non la zone des rayons qui est calibree au pixel. */ .page-centrale .centrale-recherche { flex: 0 1 634px; width: 634px; max-width: 634px; } /* Le bloc interne porte style="width: inherit" en inline (show-rayon l.868). * `inherit` recopie la VALEUR du parent — soit les 634px de .rayon-bloc-recherche * (rayon.css l.8) — et non sa largeur calculee : le champ debordait donc du * plafond ci-dessus et recouvrait les pastilles. Un style inline impose * !important. */ .page-centrale .centrale-recherche .formRayonSearch_input { width: 65% !important; min-width: 0; } /* --------------------------------------------- mobile * Decision : le composant reste visible, contrairement au comportement herite * (partage_style_helper1.css:508 le masque sous 500px). Il passe sous la barre * de recherche, sur toute la largeur. */ @media screen and (max-width: 900px) { .page-centrale .nav-search-bar { flex-wrap: wrap; gap: 8px; padding-left: 8px; } .page-centrale .centrale-recherche { order: 1; flex: 1 1 100%; width: 65% !important; /* annule le plafond de 210px pose pour les grands ecrans */ max-width: none; } .page-centrale .centrale-rayons-hote { order: 2; flex: 1 1 100%; /* sur deux lignes, la marge automatique n'a plus lieu d'etre */ margin-right: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .page-centrale .centrale-rayons-hote::-webkit-scrollbar { display: none; } } @media screen and (max-width: 500px) { /* la regle heritee masque le composant sous 500px : on la neutralise */ .page-centrale .section-hidden-boutique { display: block !important; } }