/* ═══════════════════════════════════════════════════════════ BOUTIQUE WANILO EXPRESS+, v2 Spécifique à l'accueil boutique (shop/boutique.html) : bandeau, nav catégories, hero vedette, grille produits, bande "Pourquoi Wanilo", avis, pied de page, tiroirs (panier/fiche/commande/contact). Composants génériques (nav, boutons, badge, chips, carte, sheet…) : css/v2/ui.css. Tokens : css/v2/tokens.css. Sourcing : DESIGN.md §8, lignes "Accueil boutique". ═══════════════════════════════════════════════════════════ */ *{ margin: 0; padding: 0; } html, body{ background: var(--canvas); color: var(--ink); font-family: var(--font); } /* overflow-x:hidden sur body ferait de lui son PROPRE conteneur de scroll (règle CSS Overflow : un seul axe non-visible force l'autre à 'auto'), dans ce cas la nav position:sticky se fige par rapport au scroll de body (resté à 0) et non plus par rapport à la fenêtre, elle "saute" au milieu de la page au lieu de rester collée en haut. Le html{overflow-x:hidden} ci-dessous coupe le même débordement horizontal sans transformer body en conteneur de scroll. */ html{ overflow-x: hidden; } img{ max-width: 100%; } a{ color: inherit; } .bq-wrap{ max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } .bq-wrap-x{ max-width: var(--container); margin: 0 auto; padding: 0 var(--container-pad); } /* ── Nav : catégories cachées en mobile (chips du catalogue suffisent) ── */ .bq-nav__cats{ display: none; } /* ── Hero produit vedette (§5 "Hero produit") ── */ .bq-hero{ background: var(--navy-900); color: #fff; padding: 32px 0 40px; } .bq-hero__grid{ display: block; } .bq-hero__tile{ background: var(--canvas); border-radius: var(--r-lg); box-shadow: var(--shadow-product); padding: 20px; margin-bottom: 24px; } .bq-hero__tile-in{ border-radius: var(--r-sm); overflow: hidden; background: var(--canvas); aspect-ratio: 1/1; } .bq-hero__tile-in img{ display: block; width: 100%; height: 100%; object-fit: contain; } .bq-hero__kicker{ display: flex; align-items: center; gap: 6px; font: 600 17px/1 var(--font); color: #fff; margin-bottom: 8px; } .bq-hero__kicker svg{ width: 18px; height: 18px; color: var(--gold-500); stroke: none; } .bq-hero__title{ color: #fff; margin-bottom: 12px; } .bq-hero__lead{ color: rgba(255,255,255,.8); margin-bottom: 16px; } .bq-hero__price-row{ display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; } .bq-price-tag{ background: var(--gold-500); color: var(--navy-900); font: 700 24px/28px var(--font); letter-spacing: -0.3px; padding: 6px 12px; border-radius: var(--r-sm); font-variant-numeric: tabular-nums; } .bq-price-old{ font: 400 17px/1 var(--font); color: rgba(255,255,255,.6); text-decoration: line-through; font-variant-numeric: tabular-nums; } .bq-hero__btns{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; } .bq-reassure{ display: flex; flex-direction: column; gap: 12px; } .bq-reassure__row{ display: flex; align-items: center; gap: 10px; font: 400 14px/1 var(--font); color: rgba(255,255,255,.8); } .bq-reassure__row svg{ width: 20px; height: 20px; color: var(--gold-500); flex-shrink: 0; } /* ── Squelette de chargement (hero), masqué dès que le catalogue arrive ── */ .bq-hero-skel{ background: var(--navy-900); padding: 32px 0 40px; } .bq-skel{ background: rgba(255,255,255,.12); border-radius: var(--r-sm); animation: bq-pulse 1.4s ease-in-out infinite; } .bq-skel--square{ aspect-ratio: 1/1; border-radius: var(--r-lg); margin-bottom: 24px; } .bq-skel--line{ height: 16px; border-radius: 4px; } @keyframes bq-pulse{ 0%,100%{ opacity: .5; } 50%{ opacity: 1; } } .bq-card-skel{ background: var(--canvas-2); border-radius: var(--r-lg); aspect-ratio: .78; animation: bq-pulse 1.4s ease-in-out infinite; } /* ── Sections ── */ .bq-section{ padding: var(--section) 0; } /* ── Recherche ── */ .bq-search{ position: relative; margin-bottom: 20px; } .bq-search svg{ position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--ink-3); } .bq-search__input{ padding-left: 42px; } /* ── Second niveau de filtres : les sous-catégories du rayon choisi (lot 3) ── Même composant que .v2-chips, mais visuellement subordonné : marge de retrait, puces plus petites et couleur secondaire, pour qu'on lise « ceci affine le choix du dessus » sans avoir à l'expliquer. */ .bq-subchips{ margin-top: var(--sp-2); } /* Hauteur laissée à celle de .v2-chip : la rabaisser à 32px rendait la cible tactile plus petite que la rangée du dessus, sur l'écran de téléphone qui est le principal ici. La subordination passe par la taille de police et la couleur, jamais par une zone plus difficile à toucher. --ink-2 et non --ink-3 : à 13px, le gris clair tombe à 4,1:1 de contraste sur le fond perle, sous le seuil de 4,5:1 exigé pour un petit texte. */ .bq-subchips .v2-chip{ font-size: 13px; color: var(--ink-2); } /* Trois classes, donc toujours prioritaire sur la ligne ci-dessus : sans ce rappel, la puce active héritait du gris et devenait illisible sur son fond navy (les deux sélecteurs pèsent le même poids, boutique.css étant chargé après ui.css). Blanc littéral comme dans .v2-chip.is-active, il n'y a pas de token pour cette valeur. */ .bq-subchips .v2-chip.is-active{ color: #fff; } /* ── Grille produits (§4 : 2 colonnes < 768, 3 ≥ 768, 4 ≥ 1120) ── */ /* Passerelle vers l'espace services, pendant du bouton « Boutique » qui s'y trouve déjà. Mêmes traits que le panier voisin (24 px, navy, sans fond) : ce n'est pas une action principale, elle ne doit pas concurrencer le panier. */ .bq-nav__svc{ display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font); color: var(--brand-ink); text-decoration: none; margin-left: auto; } .bq-nav__svc .v2-ico{ width: 22px; height: 22px; flex-shrink: 0; } /* Sous 420 px l'icône parle d'elle-même : garder le mot ferait déborder l'en-tête, comme cela s'est produit sur /services à 360 px. */ @media (max-width: 420px){ .bq-nav__svc span{ display: none; } } /* Un produit par ligne sur téléphone. À deux colonnes de 12 px d'écart, les photos se touchaient presque et les fiches se lisaient comme un bloc continu ; la place gagnée par la seconde colonne coûtait la lisibilité de chaque article. Deux colonnes reviennent dès qu'il y a la largeur pour les espacer. La carte passe en HORIZONTAL, photo à gauche : en pleine largeur avec sa photo carrée elle mesurait 469 px de haut, soit moins de deux produits par écran et près de dix mille pixels à faire défiler pour vingt-deux articles. Horizontale elle tombe sous 150 px, et le catalogue redevient parcourable. */ .bq-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } .bq-grid .v2-card{ display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--hairline); border-radius: var(--r-lg); } .bq-grid .v2-card__img{ width: 104px; flex-shrink: 0; border-radius: var(--r-md); } .bq-grid .v2-card__body{ flex: 1; min-width: 0; padding: 0; } /* min-height servait à aligner les titres de deux colonnes côte à côte ; en liste il ne ferait qu'ajouter du vide sous les noms courts. */ .bq-grid .v2-card__name{ min-height: 0; margin-bottom: 4px; } .bq-grid .v2-card__spec{ margin-bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .bq-grid .v2-card__price-row{ margin-bottom: 4px; } @media (min-width: 560px){ /* Au-delà, retour à la grille de vignettes : la photo redevient le sujet. */ .bq-grid{ grid-template-columns: 1fr 1fr; gap: 16px; } .bq-grid .v2-card{ display: block; padding: 0; border: 0; border-radius: var(--r-lg); } .bq-grid .v2-card__img{ width: auto; border-radius: 0; } .bq-grid .v2-card__body{ padding: 12px 4px; } .bq-grid .v2-card__name{ min-height: 44px; margin-bottom: 2px; } } #gridSkel{ display: none; } #gridSkel.is-on{ display: grid; } #gridSkel.is-on + #grid, .bq-grid#grid.is-loading{ display: none; } /* Un kit annonce son contenu là où un produit simple porte sa mention technique : même emplacement, ton de la marque pour signaler que c'est une offre composée. */ .v2-card__spec--kit{ font-weight: 600; color: var(--navy-700); } .bq-empty{ text-align: center; padding: 48px 0; color: var(--ink-3); } .bq-empty svg{ width: 32px; height: 32px; margin: 0 auto 12px; } .bq-empty__t{ font: 600 17px/1 var(--font); color: var(--ink); margin-bottom: 4px; } .bq-empty__s{ font: 400 14px/20px var(--font); } .bq-see-all{ margin-top: 24px; text-align: center; } .bq-see-all a{ font: 500 17px/1 var(--font); color: var(--action); text-decoration: none; cursor: pointer; } .bq-banner{ display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-4); font: 400 14px/20px var(--font); color: var(--ink-3); } .bq-banner svg{ width: 18px; height: 18px; flex-shrink: 0; } /* ── Bande navy "Pourquoi Wanilo" ── */ .bq-band-navy{ background: var(--navy-900); color: #fff; } .bq-band-navy .v2-sec-title{ color: #fff; } .bq-why{ display: flex; flex-direction: column; gap: 24px; margin-top: 20px; } .bq-why__item{ display: flex; gap: 16px; align-items: flex-start; } .bq-why__ico{ width: 44px; height: 44px; border-radius: 50%; background: var(--navy-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bq-why__ico svg{ width: 22px; height: 22px; color: var(--gold-500); } .bq-why__t{ font: 600 17px/1 var(--font); margin-bottom: 4px; color: #fff; } .bq-why__s{ font: 400 14px/20px var(--font); color: rgba(255,255,255,.75); } /* ── Pied de page navy ── */ .bq-footer{ background: var(--navy-900); color: #fff; padding: 48px 0 32px; border-top: 1px solid rgba(255,255,255,.12); } .bq-footer__logo{ display: flex; align-items: center; gap: 10px; margin-bottom: 16px; } .bq-footer__slogan{ font: 400 14px/1 var(--font); color: rgba(255,255,255,.65); margin-bottom: 28px; } .bq-footer__wa{ display: flex; align-items: center; gap: 10px; background: var(--navy-700); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 24px; text-decoration: none; color: #fff; } .bq-footer__wa svg{ width: 24px; height: 24px; flex-shrink: 0; } .bq-footer__wa b{ font: 600 15px/1 var(--font); display: block; } .bq-footer__wa small{ font: 400 13px/1 var(--font); color: rgba(255,255,255,.65); } .bq-footer__addr{ display: flex; gap: 10px; align-items: flex-start; font: 400 13px/19px var(--font); color: rgba(255,255,255,.75); margin-bottom: 24px; } .bq-footer__addr svg{ width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,.5); } .bq-footer__links{ display: flex; flex-direction: column; gap: 14px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; } .bq-footer__links a{ font: 400 14px/1 var(--font); color: rgba(255,255,255,.85); text-decoration: none; } .bq-footer__legal{ margin-top: 24px; font: 400 12px/1 var(--font); color: rgba(255,255,255,.4); } /* ── Panier / fiche produit / commande : lignes, cartes internes ── */ .ci{ display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); } .ci__media{ width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--canvas-2); overflow: hidden; flex-shrink: 0; } .ci__media img{ width: 100%; height: 100%; object-fit: contain; } .ci__info{ flex: 1; min-width: 0; } .ci__name{ font: 600 14px/20px var(--font); color: var(--ink); } .ci__cat{ font: 400 13px/18px var(--font); color: var(--ink-3); margin-bottom: 8px; } .ci__price{ font: 700 14px/1 var(--font); color: var(--ink); font-variant-numeric: tabular-nums; } .ci__rm{ display: block; margin-top: 6px; background: none; border: none; padding: 0; font: 400 13px/1 var(--font); color: var(--ink-3); text-decoration: underline; cursor: pointer; } .ci__rm:hover{ color: var(--err); } .qty{ display: inline-flex; align-items: center; border: 1px solid var(--hairline); border-radius: var(--r-sm); height: 32px; } .qty button{ width: 32px; height: 32px; background: none; border: none; font-size: 18px; color: var(--ink-2); cursor: pointer; } .qty button:disabled{ color: var(--hairline); cursor: not-allowed; } .qty span{ min-width: 26px; text-align: center; font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; } .bq-tot{ display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font: 600 17px/1 var(--font); } .bq-tot span:last-child{ font: 700 19px/1 var(--font); font-variant-numeric: tabular-nums; } .bq-recap{ border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 12px; background: var(--surface-pearl); } .bq-recap__t{ font: 700 12px/1 var(--font); text-transform: uppercase; letter-spacing: .4px; color: var(--ink-3); margin-bottom: 8px; } .bq-recap .recap__r{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font: 400 14px/22px var(--font); } .bq-recap .recap__r span:first-child{ color: var(--ink-2); } .bq-recap .recap__r span:last-child{ font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .bq-recap .recap__tot{ display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); font-weight: 700; font-variant-numeric: tabular-nums; } .intent{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--canvas); text-align: left; cursor: pointer; margin-bottom: 8px; } .intent:hover{ border-color: var(--navy-900); } .intent__ico{ width: 36px; height: 36px; border-radius: 50%; background: var(--surface-pearl); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--navy-900); } .intent__ico svg{ width: 18px; height: 18px; } .intent__t{ display: block; font: 600 15px/1 var(--font); color: var(--ink); } .intent__s{ display: block; font: 400 13px/18px var(--font); color: var(--ink-3); margin-top: 2px; } .intent__arr{ margin-left: auto; color: var(--ink-3); flex-shrink: 0; } .intent.is-selected{ border-color: var(--navy-900); background: var(--navy-900); } .intent.is-selected .intent__t, .intent.is-selected .intent__s, .intent.is-selected .intent__arr{ color: #fff; } .intent.is-selected .intent__ico{ background: var(--gold-500); color: var(--navy-900); } /* ── Étoiles réduites (grille produits) ── */ /* ── Pictogramme de secours quand un produit n'a pas de photo (rare, catalogue quasi entièrement illustré) ── */ .ph{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .ph svg{ width: 32px; height: 32px; color: var(--ink-3); } .ph--lg svg{ width: 56px; height: 56px; } .ph--sm svg{ width: 22px; height: 22px; } /* ── Toast ── */ .bq-toast{ position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px); background: var(--navy-900); color: #fff; font: 500 14px/1 var(--font); padding: 12px 18px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; } .bq-toast.is-on{ opacity: 1; transform: translate(-50%, 0); } /* Tiroir ouvert : le toast passe au-dessus du pied (bouton Commander). Mobile seulement : sur ecran large le tiroir est un panneau de 420 px a droite et le toast, centre, ne le touche pas. */ body.has-sheet .bq-toast{ bottom: 116px; } @media (min-width: 768px){ body.has-sheet .bq-toast{ bottom: 24px; } } /* ═══════════ DESKTOP ≥ 768px ═══════════ */ @media (min-width: 768px){ /* min-width: 0 est indispensable : sans lui, ce