/* P2.9 — Polices de la boutique 1.6, relevées dans son : Dosis 400/600/800 et Lato 700, servies par Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;600;800&family=Lato:wght@700&display=swap'); /* ══════════════════════════════════════════════════════════════════ France Insectes — identité visuelle Reprise de la charte de la boutique 1.6 (voir docs/reference/HOME-REFERENCE.md) ══════════════════════════════════════════════════════════════════ */ :root { /* Vert dominant de la marque — boutons, prix, accents */ --fi-vert: #8DC63F; --fi-vert-fonce: #6FA22B; --fi-vert-clair: #F1F8E6; /* Les trois univers, repris des boutons d'en-tête */ --fi-animalerie: #F39200; /* orange */ --fi-peche: #29ABE2; /* bleu */ --fi-jardin: #8DC63F; /* vert */ /* Navigation principale */ --fi-nav-fond: #3B3B3B; /* P2.7 — teinte relevée sur la 1.6 */ --fi-nav-texte: #FFFFFF; --fi-nav-actif: var(--fi-vert); /* Bandeau d'annonce */ --fi-annonce: #E30613; /* Prix : couleur relevée sur customer-s5.css de la boutique 1.6 */ --fi-prix: #FF0000; --fi-texte: #333333; --fi-texte-doux: #777777; --fi-bord: #E5E5E5; --fi-fond: #FFFFFF; --fi-fond-doux: #F7F7F7; --fi-rayon: 3px; --fi-ombre: 0 1px 3px rgba(0,0,0,.08); } body { color: var(--fi-texte); background: var(--fi-fond); } /* ── Barre supérieure ─────────────────────────────────────────── */ .fi-topbar { background: var(--fi-nav-fond); color: #DDD; font-size: .82rem; padding: .45rem 0; } .fi-topbar a { color: #DDD; } .fi-topbar a:hover { color: var(--fi-vert); } .fi-topbar__accroche { text-align: center; } /* ── Les trois univers ────────────────────────────────────────── */ .fi-univers { display: flex; gap: .4rem; margin: .6rem 0; } /* Les univers se rendent en tant qu'aucune destination n'est configurée — voir _partials/univers.tpl. Les habillages visent donc les deux balises, sans quoi les trois bandes de couleur disparaîtraient. */ .fi-univers a, .fi-univers span { flex: 1; text-align: center; padding: .55rem 1rem; color: #FFF; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--fi-rayon); text-decoration: none; } .fi-univers a:hover { filter: brightness(1.08); } .fi-univers span { cursor: default; } .fi-univers .fi-univers--animalerie { background: var(--fi-animalerie); } .fi-univers .fi-univers--peche { background: var(--fi-peche); } .fi-univers .fi-univers--jardin { background: var(--fi-jardin); } /* ── Navigation principale ────────────────────────────────────── */ .fi-nav { background: var(--fi-nav-fond); } .fi-nav a { color: var(--fi-nav-texte); text-transform: uppercase; font-weight: 600; font-size: .86rem; padding: .8rem 1rem; display: inline-block; } .fi-nav a:hover, .fi-nav .current a { color: var(--fi-nav-actif); } /* ── Bandeau d'annonce ────────────────────────────────────────── */ .fi-annonce { color: var(--fi-annonce); text-align: center; font-weight: 700; font-size: 1.05rem; line-height: 1.45; padding: 1.1rem 1rem; background: var(--fi-fond); } .fi-annonce p { margin: 0 0 .2rem; } /* ── Titres de section ────────────────────────────────────────── */ .fi-section__titre { text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: .03em; margin: 2rem 0 1.4rem; color: var(--fi-texte); } /* ── Produits ─────────────────────────────────────────────────── */ .product-price, .price { color: var(--fi-prix); font-weight: 700; } .btn-primary, .add-to-cart { background: var(--fi-vert); border-color: var(--fi-vert); color: #FFF; } .btn-primary:hover, .add-to-cart:hover { background: var(--fi-vert-fonce); border-color: var(--fi-vert-fonce); } .product-miniature { border: 1px solid var(--fi-bord); border-radius: var(--fi-rayon); } .product-miniature:hover { box-shadow: var(--fi-ombre); } /* ── Bloc éditorial ───────────────────────────────────────────── */ .fi-editorial { background: var(--fi-vert-clair); padding: 2.2rem 1rem; text-align: center; } .fi-editorial h2 { text-transform: uppercase; font-weight: 800; letter-spacing: .05em; } /* ── Pied de page ─────────────────────────────────────────────── */ .fi-footer { background: #FAFAFA; color: #666; padding: 2.2rem 0 1rem; } .fi-footer a { color: #444; } .fi-footer a:hover { color: #3B3B3B; } .fi-footer__legal { border-top: 1px solid #4A4A4A; margin-top: 1.4rem; padding-top: .9rem; text-align: center; font-size: .8rem; color: #999; } /* ── Barre flottante droite ───────────────────────────────────── */ .fi-rightbar { position: fixed; right: 0; top: 42%; z-index: 900; } .fi-rightbar a { display: block; background: var(--fi-vert); color: #FFF; padding: .7rem .55rem; text-align: center; font-size: .7rem; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.25); } .fi-rightbar a:hover { background: var(--fi-vert-fonce); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 767px) { .fi-univers { flex-direction: column; } .fi-annonce { font-size: .92rem; padding: .85rem .8rem; } .fi-nav a { padding: .6rem .7rem; font-size: .8rem; } } /* ── Spécificité : Bootstrap applique une couleur héritée aux

, il faut cibler explicitement les enfants du bandeau. ───────── */ .fi-annonce, .fi-annonce .container, .fi-annonce p, .fi-annonce span, .fi-annonce div { color: var(--fi-annonce) !important; text-align: center; } .fi-annonce p { font-weight: 700; margin: 0 0 .25rem; } /* La barre de navigation haute de classic est claire : on la passe au gris foncé de la boutique 1.6. */ .header-nav, #header .header-nav { background: var(--fi-nav-fond); color: #DDD; } .header-nav a, #header .header-nav a { color: #DDD; } .header-nav a:hover { color: var(--fi-vert); } .fi-topbar__accroche { color: #DDD; font-size: .82rem; } /* Menu principal sur fond sombre */ #header .header-top { background: #FFF; } .menu-top, .top-menu.fi-menu, #_desktop_top_menu .top-menu { background: var(--fi-nav-fond); } /* P1.2 — La navigation de l'ancien site n'est PAS monochrome : chaque entrée a sa couleur, et trois d'entre elles ont une pastille de fond. J'avais tout écrasé avec un blanc uniforme. Couleurs relevées dans le