/* ========================================================= FCLB - TEMPLATE COMMUN Header / navigation / composants généraux / footer Les couleurs sont définies dynamiquement dans le à partir des paramètres de la boutique. ========================================================= */ /* ========================================================= VARIABLES STRUCTURELLES Non dépendantes de la charte graphique ========================================================= */ :root { --fclb-radius: 1.6rem; --fclb-radius-small: .8rem; --fclb-radius-pill: 999px; } /* ========================================================= GLOBAL ========================================================= */ body { color: var(--couleur-texte); background: var(--couleur-fond-page); } a { color: var(--couleur-principale); } a:hover { color: var(--couleur-principale-foncee); } /* ========================================================= TOP BAR ========================================================= */ .fclb_topbar { background: var(--couleur-accent-doux); color: var(--couleur-accent); font-weight: 700; font-size: .92rem; } /* ========================================================= HEADER ========================================================= */ .fclb_header { background: var(--couleur-fond-bloc); z-index: 1030; } /* Option si header sticky */ .fclb_header_sticky { position: sticky; top: 0; } /* ========================================================= LOGO ========================================================= */ .fclb_logo { display: block; flex-shrink: 0; text-decoration: none; } .fclb_logo img { display: block; width: 100%; max-width:250px; height: auto; } /* ========================================================= RECHERCHE ========================================================= */ .fclb_search { position: relative; width: 100%; max-width: 520px; } .fclb_search .form-control { height: 42px; padding-left: 1.1rem; padding-right: 2.7rem; color: var(--couleur-texte); background: var(--couleur-fond-bloc); border: 1px solid var(--couleur-bordure); border-radius: var(--fclb-radius-pill); font-size: .94rem; } .fclb_search .form-control::placeholder { color: var(--couleur-texte-secondaire); } .fclb_search .form-control:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 .2rem color-mix( in srgb, var(--couleur-principale) 15%, transparent ); } .fclb_search button { position: absolute; right: .35rem; top: 50%; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); border: 0; background: transparent; color: var(--couleur-accent); } .fclb_search button:hover, .fclb_search button:focus { color: var(--couleur-principale); } /* ========================================================= ACTIONS HEADER Compte / favoris / panier... ========================================================= */ .fclb_header_action { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; color: var(--couleur-texte); text-decoration: none; font-size: .82rem; line-height: 1; } .fclb_header_action svg { width: 24px; height: 24px; stroke-width: 1.8; } .fclb_header_action:hover, .fclb_header_action:focus { color: var(--couleur-accent); text-decoration: none; } /* ========================================================= BADGE PANIER ========================================================= */ .fclb_cart_badge { position: absolute; top: -.35rem; right: .3rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; display: inline-flex; align-items: center; justify-content: center; background: var(--couleur-accent); color: var(--couleur-texte-accent); border-radius: var(--fclb-radius-pill); font-size: .68rem; font-weight: 700; } /* ========================================================= ICÔNE HEADER GÉNÉRIQUE ========================================================= */ .fclb_header_icon { width: 2.55rem; height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; color: var(--couleur-texte); background: var(--couleur-fond-bloc); border: 1px solid var(--couleur-bordure); border-radius: var(--fclb-radius-pill); text-decoration: none; } .fclb_header_icon:hover, .fclb_header_icon:focus { color: var(--couleur-accent); background: var(--couleur-accent-doux); text-decoration: none; } /* ========================================================= NAVIGATION PRINCIPALE ========================================================= */ .fclb_nav_row { border-top: 1px solid var(--couleur-bordure); } .fclb_nav .nav-link { padding-left: .9rem !important; padding-right: .9rem !important; color: var(--couleur-texte); font-weight: 650; } .fclb_nav .nav-link:hover, .fclb_nav .nav-link:focus { color: var(--couleur-accent); } .fclb_nav .nav-link.active { color: var(--couleur-principale); } /* Dropdowns */ .fclb_nav .dropdown-menu { margin-top: .45rem; padding: .45rem; min-width: 240px; border: 1px solid var(--couleur-bordure); border-radius: 14px; background: var(--couleur-fond-bloc); box-shadow: 0 12px 28px rgba(0, 0, 0, .09); } .fclb_nav .dropdown-item { padding: .65rem .9rem; border-radius: 9px; color: var(--couleur-texte); font-weight: 500; } .fclb_nav .dropdown-item:hover, .fclb_nav .dropdown-item:focus, .fclb_nav .dropdown-item.active { background: var(--couleur-accent-doux); color: var(--couleur-accent); } /* ========================================================= INFORMATION LIVRAISON HEADER ========================================================= */ .fclb_delivery_mini { color: var(--couleur-principale-foncee); font-weight: 800; line-height: 1.15; } .fclb_delivery_mini small { color: var(--couleur-texte-secondaire); font-weight: 400; } /* ========================================================= MENU MOBILE ========================================================= */ .fclb_mobile_menu_btn { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--couleur-texte); background: var(--couleur-fond-bloc); border: 1px solid var(--couleur-bordure) !important; border-radius: var(--fclb-radius-pill); } .fclb_mobile_menu_btn svg { width: 24px; height: 24px; stroke-width: 2; } .fclb_mobile_menu_btn:hover, .fclb_mobile_menu_btn:focus { color: var(--couleur-accent); background: var(--couleur-accent-doux); } /* ========================================================= BOUTON PRINCIPAL ========================================================= */ .fclb_btn_primary, .btn-cmd { color: var(--couleur-texte-principale) !important; background: var(--couleur-principale); border-color: var(--couleur-principale); font-weight: 800; box-shadow: 0 .65rem 1.4rem color-mix( in srgb, var(--couleur-principale) 22%, transparent ); } .fclb_btn_primary:hover, .fclb_btn_primary:focus, .btn-cmd:hover, .btn-cmd:focus { color: var(--couleur-texte-principale-foncee) !important; background: var(--couleur-principale-foncee); border-color: var(--couleur-principale-foncee); } /* ========================================================= BOUTON SECONDAIRE ========================================================= */ .fclb_btn_soft { color: var(--couleur-texte); background: var(--couleur-fond-bloc); border: 1px solid var(--couleur-bordure); font-weight: 800; } .fclb_btn_soft:hover, .fclb_btn_soft:focus { color: var(--couleur-accent); background: var(--couleur-accent-doux); border-color: var(--couleur-accent); } /* ========================================================= BOUTON ACCENT ========================================================= */ .fclb_btn_accent { color: var(--couleur-texte-accent) !important; background: var(--couleur-accent); border-color: var(--couleur-accent); font-weight: 800; } .fclb_btn_accent:hover, .fclb_btn_accent:focus { color: var(--couleur-texte-accent) !important; background: color-mix( in srgb, var(--couleur-accent) 88%, black ); border-color: color-mix( in srgb, var(--couleur-accent) 88%, black ); } /* ========================================================= SURFACES / BLOCS GÉNÉRIQUES ========================================================= */ .fclb_surface { color: var(--couleur-texte); background: var(--couleur-fond-bloc); } .fclb_surface_soft { color: var(--couleur-texte-fond-doux); background: var(--couleur-fond-doux); } /* Carte générique */ .fclb_card { color: var(--couleur-texte); background: var(--couleur-fond-bloc); border: 1px solid var(--couleur-bordure); border-radius: var(--fclb-radius); } /* ========================================================= TEXTES UTILITAIRES ========================================================= */ .fclb_text_secondary { color: var(--couleur-texte-secondaire); } .fclb_text_primary { color: var(--couleur-principale); } .fclb_text_accent { color: var(--couleur-accent); } .fclb_text_danger { color: var(--couleur-danger); } /* ========================================================= BADGES GÉNÉRIQUES ========================================================= */ .fclb_badge { display: inline-flex; align-items: center; padding: .35rem .65rem; color: var(--couleur-accent); background: var(--couleur-accent-doux); border-radius: var(--fclb-radius-pill); font-size: .78rem; font-weight: 700; } /* ========================================================= FORMULAIRES ========================================================= */ .fclb_form .form-label { color: var(--couleur-texte); font-weight: 600; } .fclb_form .form-control, .fclb_form .form-select { color: var(--couleur-texte); background-color: var(--couleur-fond-bloc); border-color: var(--couleur-bordure); } .fclb_form .form-control::placeholder { color: var(--couleur-texte-secondaire); } .fclb_form .form-control:focus, .fclb_form .form-select:focus { border-color: var(--couleur-principale); box-shadow: 0 0 0 .2rem color-mix( in srgb, var(--couleur-principale) 15%, transparent ); } .fclb_form .form-text { color: var(--couleur-texte-secondaire); } /* ========================================================= ERREURS / DANGER ========================================================= */ .fclb_alert_danger { color: color-mix( in srgb, var(--couleur-danger) 70%, black ); background: color-mix( in srgb, var(--couleur-danger) 12%, white ); border: 1px solid color-mix( in srgb, var(--couleur-danger) 35%, white ); border-radius: var(--fclb-radius-small); } /* ========================================================= FOOTER ========================================================= */ .fclb_footer { color: var(--couleur-texte-principale-foncee); background: var(--couleur-principale-foncee); } /* Fil d'Ariane */ .fclb_breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .875rem; margin-bottom: 0; } .fclb_breadcrumb .breadcrumb-item a { color: var(--couleur-texte-secondaire); text-decoration: none; } .fclb_breadcrumb .breadcrumb-item a:hover, .fclb_breadcrumb .breadcrumb-item a:focus-visible { color: var(--couleur-principale); } .fclb_breadcrumb .breadcrumb-item.active { color: var(--couleur-texte); } /* Liens */ .fclb_footer a { color: var(--couleur-texte-principale-foncee); text-decoration: none; opacity: .82; } .fclb_footer a:hover, .fclb_footer a:focus { color: var(--couleur-texte-principale-foncee); text-decoration: underline; opacity: 1; } /* Titres */ .fclb_footer_title { margin-bottom: 1rem; color: var(--couleur-texte-principale-foncee); font-weight: 850; } /* Listes */ .fclb_footer ul { margin: 0; padding: 0; list-style: none; } .fclb_footer li + li { margin-top: .55rem; } /* Coordonnées */ .fclb_footer_contact { line-height: 1.7; } .fclb_footer_contact svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .25rem; color: var(--couleur-texte-principale-foncee); } /* Bouton clair du footer */ .fclb_footer .btn-light { color: var(--couleur-principale-foncee) !important; background: var(--couleur-texte-principale-foncee); border-color: var(--couleur-texte-principale-foncee); font-weight: 800; } .fclb_footer .btn-light:hover, .fclb_footer .btn-light:focus { color: var(--couleur-texte-accent) !important; background: var(--couleur-accent); border-color: var(--couleur-accent); text-decoration: none; } /* ========================================================= RESPONSIVE TABLETTE / MOBILE ========================================================= */ @media (max-width: 991.98px) { .fclb_logo img { max-width: 200px; } .fclb_nav_row .navbar-collapse { padding-top: 1rem; } .fclb_nav_row .navbar-nav .nav-link { padding: .8rem 0 !important; border-bottom: 1px solid var(--couleur-bordure); } .fclb_delivery_mini { padding-top: 1rem; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 575.98px) { .fclb_logo img { max-width: 165px; } .fclb_header_action { font-size: .75rem; } } /* Fond du bandeau de filtres du catalogue. */ .fclb-filter-bar { background-color: #fff; } /* Identité de la boutique au-dessus de la recherche. */ .fclb_search_identity { margin: 0 0 .3rem; text-align: center; color: #52674e; font-size: .875rem; font-weight: 400; line-height: 1.4; } /* Bandeau compact sur ordinateur ; le volet mobile conserve ses dimensions. */ @media (min-width: 992px) { .fclb-filter-bar { padding: .75rem 1rem; margin-top: 1rem; gap: .75rem 1.5rem; } .fclb-filter-bar .fclb-filter-title { margin-bottom: .5rem; } .fclb-filter-bar .fclb-filter-select { min-height: 36px; padding-top: .35rem; padding-bottom: .35rem; } .fclb-filter-bar .fclb-filter-colors { grid-template-columns: repeat(5, 30px); gap: 8px; } .fclb-filter-bar .fclb-filter-choice .fclb-filter-pill.fclb-filter-color { width: 30px; height: 30px; min-width: 30px; min-height: 30px; } .fclb-filter-bar .fclb-filter-color .fclb-filter-swatch { width: 30px; height: 30px; } .fclb-filter-bar .fclb-filter-more { padding: .2rem 0 0; } } @media (min-width: 992px) { .fclb-filter-bar .fclb-filter:has(> .fclb-filter-colors) { display: grid; grid-template-columns: max-content 30px; column-gap: 10px; align-content: start; } .fclb-filter-bar .fclb-filter:has(> .fclb-filter-colors) > .fclb-filter-title { grid-column: 1 / -1; } .fclb-filter-bar .fclb-filter-colors { grid-column: 1; grid-row: 2; } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more { grid-column: 2; grid-row: 2; align-self: end; justify-self: center; margin-bottom: 3px; position: relative; width: 24px; height: 24px; padding: 0; border: 1px solid #cbd5c5; border-radius: 50%; text-decoration: none; font-size: 0; display: flex; align-items: center; justify-content: center; } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more::before, .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more::after { transform: translate(-50%, -50%) rotate(90deg); } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more[aria-expanded="true"]::after { display: none; } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more:hover { background: #edf3e9; } .fclb-filter-bar .fclb-filter-colors + .fclb-filter-more:focus-visible { outline: 2px solid #567f40; outline-offset: 3px; } } /* Garder le titre de la description sous le header fixe lors du saut d’ancre. */ #description-produit { scroll-margin-top: calc(var(--fclb-header-height, 0px) + 16px); } /* Un titre unique, avant la photo sur mobile et au-dessus du prix sur ordinateur. */ .fclb-product-layout { display: grid; gap: 1.5rem; } .fclb-product-layout > * { min-width: 0; } @media (min-width: 992px) { .fclb-product-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: 3rem; row-gap: 1rem; } .fclb-product-heading { grid-column: 2; grid-row: 1; } .fclb-product-photos { grid-column: 1; grid-row: 1 / 3; } .fclb-product-details { grid-column: 2; grid-row: 2; } } /* Le choix de variante précède les options facultatives. */ .fclb-product-details #variantes:not(:empty) { padding: 1rem; margin-bottom: 1.25rem; background: #f3f7ef; border: 1px solid #c7d6bd; border-radius: .75rem; } .fclb-product-details #variantes .form-select { border-color: var(--couleur-principale); background-color: #fff; min-height: 48px; font-weight: 600; } .fclb-product-details .fclb-variant-required { color: #52674e; } @media (min-width: 992px) { .fclb_search_identity { transform: translateY(-.6rem); } } /* Largeur fluide : conserver seulement une gouttière sous le plafond desktop. */ body .container { width: 100%; max-width: 1320px; padding-right: 16px; padding-left: 16px; } /* Trois produits confortables avant de disposer de la place pour quatre. */ @media (min-width: 768px) and (max-width: 1319.98px) { #produits-liste > [class*="col-"] { width: 33.333333%; } } @media (min-width: 1320px) { #produits-liste > [class*="col-"] { width: 25%; } } body .fclb_catalog_card_description { -webkit-line-clamp: 3; min-height: 4.35em; } body .fclb_catalog_card_price_row { margin-top: auto; } /* Livraison express : un repère contrasté sur les photos des bouquets. */ body .fclb_catalog_card_badge_express { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .5rem; background: var(--couleur-accent, #e92479); color: #fff; font-size: .72rem; line-height: 1.1; } .fclb_catalog_card_badge_express svg { width: 14px; height: 14px; flex-shrink: 0; } /* Accueil : une introduction plus douce et des boutons dans la charte. */ body .fc-home .btn-primary { --bs-btn-bg: var(--couleur-principale); --bs-btn-border-color: var(--couleur-principale); --bs-btn-hover-bg: var(--couleur-principale-foncee); --bs-btn-hover-border-color: var(--couleur-principale-foncee); --bs-btn-active-bg: var(--couleur-principale-foncee); --bs-btn-active-border-color: var(--couleur-principale-foncee); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } body .fc-home .btn-outline-primary, body .fclb-product-related-categories .btn-outline-primary { --bs-btn-color: var(--couleur-principale); --bs-btn-border-color: var(--couleur-principale); --bs-btn-hover-bg: var(--couleur-principale); --bs-btn-hover-border-color: var(--couleur-principale); --bs-btn-active-bg: var(--couleur-principale-foncee); --bs-btn-active-border-color: var(--couleur-principale-foncee); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } body .fc-home .btn-primary:focus-visible, body .fc-home .btn-outline-primary:focus-visible, body .fclb-product-related-categories .btn-outline-primary:focus-visible { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--couleur-principale) 35%, transparent); } /* Cartes communes, avec un bouquet mis en avant sur l'accueil. */ .fc-home-products-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } .fc-home-products-grid > [class*="col-"] { width: 100%; min-width: 0; height: 100%; padding: 0 !important; margin-bottom: 0 !important; } @media (min-width: 576px) { .fc-home-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fc-home-products-grid > :first-child { grid-column: 1 / -1; } } @media (min-width: 992px) { .fc-home-products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fc-home-products-grid > :first-child { grid-column: 1 / 3; grid-row: span 2; height: auto; } .fc-home-products-grid > :first-child .fclb_catalog_card_image { aspect-ratio: 1; } }