/* Bazar Solidaire — Catalogue public — styles (mobile-first) — v3.1.2 (identité visuelle) + addendum v1.3 (panier) + addendum v1.4 (en-tête/héros, catégories homogènes, boîte de dialogue, toast, panier conservé) */ :root { --dark: #1A1A1A; --orange: #F5A623; --cream: #F0EBE0; --peche: #F8C5A5; --sable: #F7D8A8; --sauge: #D9D9C8; --bleu-gris: #D1DEE2; --terracotta: #F2B193; --lavande: #DDD8E5; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--cream); color: var(--dark); } a { text-decoration: none; color: inherit; } .icon-svg { width: 20px; height: 20px; display: block; } /* Bandeau identité. REFONTE du 22/08/2026 (9e correction) : le système précédent (panier positionné à droite sur la MÊME ligne que le titre, via un espaceur fantôme à gauche) laissait le panier visuellement "à côté du logo" — Lébou a demandé que rien ne partage la ligne du logo ni celle du sous-titre. Remplacé par un empilement vertical simple : bloc identité (logo+titre+sous-titre, centré, pleine largeur) PUIS, sur une ligne à part en dessous, le panier seul aligné à droite (.app-header-cart-row, visible uniquement sur Mission/À propos/Ma commande via .is-compact) — élimine tout risque de chevauchement par construction (deux lignes distinctes ne peuvent pas se chevaucher), plus besoin de réserver un espace symétrique. */ .app-header { background: var(--dark); padding: 14px 16px 0; text-align: center; } /* Bloc identité (logo + titre + sous-titre), aligné sur l'ENSEMBLE monogramme+texte. .app-identity (position:relative) est la référence de largeur du sous-titre : seul .app-title-link (son unique enfant en flux normal) compte, le sous-titre (position:absolute) ne l'élargit pas — garantit qu'il ne déborde jamais à gauche du monogramme ni à droite de "Solidaire", quelle que soit sa taille de police. Titre fixé à 36px (ne plus retoucher — demande explicite). Sous-titre 13px→16px (demande explicite, l'écart avec le titre 36px paraissait énorme) : marge de largeur disponible large à 36px (~282px pour le bloc complet contre ~245px nécessaires au sous-titre à 16px, ~13% de marge), aucun risque de troncature. padding-bottom (24px) et top (43px, inchangé, dépend de la hauteur du TITRE pas du sous-titre) recalculés pour la nouvelle hauteur de ligne du sous-titre. */ .app-identity { position: relative; display: inline-block; padding-bottom: 24px; } .app-title-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; } .bs-monogram { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .app-title { font-size: 36px; line-height: 1.15; font-weight: 800; letter-spacing: -0.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .app-title .w { color: #ffffff; } .app-title .o { color: var(--orange); } .app-subtitle { position: absolute; left: 0; right: 0; top: 43px; color: #c9c9c9; font-size: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Variante allégée réservée à l'ACCUEIL uniquement (retour du 22/08/2026, test visuel demandé) — classe posée par JS (toggleEncartAccroche(), app.js) sur , jamais sur les autres pages (Catégories/ Recherche/fiche produit/Mission/À propos/Ma commande gardent le sous-titre et l'espacement actuels, inchangés). Sous-titre masqué + l'espace qu'il réservait (padding-bottom de .app-identity) supprimé, ce qui fait remonter naturellement la ligne recherche+panier juste sous "Bazar Solidaire". */ body.is-home .app-subtitle { display: none; } /* Décalage léger vers la droite — Mission et À propos UNIQUEMENT (23/08/2026, round retours 3), demande explicite ("il équilibre bien le bandeau" sur ces 2 pages) — Catégories/Recherche/fiche produit/Ma commande gardent le sous-titre centré, non touchés. Marge de sécurité large avant l'ellipsis (~37px, voir plus haut), 8px de décalage ne crée aucun risque de troncature. */ body.is-static-page .app-subtitle { transform: translateX(8px); } /* padding-bottom 0→10px (retour du 22/08/2026) : trop serré entre logo et barre de recherche, un peu d'air redonné sans revenir à l'espace d'origine (qui réservait la place du sous-titre, désormais masqué). */ body.is-home .app-identity { padding-bottom: 10px; } /* Panier sur sa propre ligne (Mission/À propos/Ma commande uniquement) — sous le sous-titre. Retour du 22/08/2026 : padding-right ramené à 10px — Lébou a confirmé vouloir resserrer l'espace UNIQUEMENT sur ces 3 pages (Mission/À propos/Ma commande), sans toucher #header-fn-row (bandeau recherche+panier partagé par Accueil/Catégories/Recherche/fiche produit, resté à 16px). Les deux paddings ne sont donc plus identiques, c'est un choix assumé (les deux zones sont structurellement distinctes, pas la même barre). */ .app-header-cart-row { display: none; justify-content: flex-end; padding: 4px 10px 6px; } .app-header.is-compact .app-header-cart-row { display: flex; } /* Le panier est DÉPLACÉ (JS, toggleHeaderSearch() dans render.js) ici sur Mission/À propos/Ma commande (écrans sans recherche), et #header-fn-row (vidée) disparaît totalement (voir .no-search plus bas). Sur les écrans avec recherche, le panier reste dans #header-fn-row comme avant. */ /* Ligne fonctionnelle (recherche + panier, RIEN d'autre — voir .category-page-title pour le retour/libellé de catégorie) — élément frère indépendant de

depuis le 22/08/2026 (3e correction, voir commentaire sur .app-header ci-dessus). Fond sombre porté directement par cette ligne (plus hérité du parent, puisqu'elle n'est plus imbriquée dedans) pour rester visuellement continue avec le bandeau identité au-dessus, sans interstice ni bordure entre les deux. */ .app-header-fn-row { display: flex; align-items: center; gap: 8px; background: var(--dark); padding: 10px 16px; } /* En-tête compact (Mission/À propos/Ma commande) : le panier ayant été déplacé dans .app-header-cart-row pour ces 3 écrans (voir plus haut), cette ligne n'a plus rien à afficher (recherche masquée par ailleurs) — la faire disparaître entièrement supprime toute sa hauteur. */ .app-header-fn-row.no-search { display: none; } /* Sticky (pages de navigation catalogue + fiche produit uniquement, voir setHeaderNavContext() dans render.js) : maintenant que la ligne est un frère direct du (hauteur = toute la page), elle peut rester collée pendant l'intégralité du scroll — c'est le point corrigé le 22/08/2026 (3e correction). Hauteur réelle de la barre une fois collée : padding(10)+icône panier(44)+padding(10) = 64px, valeur reprise comme "top" par .category-page-title (juste en dessous) pour un empilement sans chevauchement. */ .app-header-fn-row.is-sticky { position: sticky; top: 0; z-index: 15; } /* Hauteur réduite d'environ 30 % (padding vertical 10px -> 7px) et un peu moins large horizontalement — retour du 19/08/2026 (2e round), la barre paraissait trop imposante. */ .header-search-form { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e4ddd0; border-radius: 999px; padding: 7px 14px; } .home-search-icon { flex: 0 0 auto; display: flex; color: #8a8a8a; } .home-search-icon .icon-svg { width: 16px; height: 16px; } .home-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; min-width: 0; } .home-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* Croix d'effacement personnalisée (le bouton natif est désactivé ci-dessus) — affichée uniquement quand le champ contient du texte (piloté en JS via l'attribut hidden). */ .header-search-clear { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: #9a9186; cursor: pointer; } .header-search-clear[hidden] { display: none; } .header-search-clear .icon-svg { width: 13px; height: 13px; } .cart-icon-link { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* cible tactile >= 44x44 px — v1.4 section 4.2 */ color: #ffffff; } .cart-icon-wrap .icon-svg { width: 24px; height: 24px; } .cart-badge-count { position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--orange); color: var(--dark); font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; border-radius: 999px; border: 1.5px solid var(--dark); } /* Encart d'accroche — v3.1.2 section 2.3. Toujours dans le DOM ; .is-hidden masque hors accueil (JS ne crée/retire jamais la balise