/*
Theme Name: Storefront Gabrielle
Theme URI: https://gabrielle.test
Description: Thème enfant Storefront pour Gabrielle Fruits et Légumes (Hazebrouck). Homepage fidèle à la maquette, contenus pilotés par ACF Pro.
Author: Odiens
Template: storefront
Version: 1.0.0
Text Domain: storefront-gabrielle
*/
/* -------------------------------------------------------------------------
Polices locales (identiques à la maquette)
------------------------------------------------------------------------- */
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url("assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bricolage Grotesque';
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 600 700;
font-display: swap;
src: url("assets/fonts/dancing-script-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Dancing Script';
font-style: normal;
font-weight: 600 700;
font-display: swap;
src: url("assets/fonts/dancing-script-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -------------------------------------------------------------------------
Variables et base
------------------------------------------------------------------------- */
:root {
--g-pink: #E61B9B;
--g-pink-dark: #C0157F;
--g-pink-light: #F7A8D8;
--g-pink-soft: #F49ED5;
--g-pink-bg: #F7E8F1;
--g-lime: #B8C96B;
--g-lime-dark: #A6B858;
--g-green: #5F8F3C;
--g-green-dark: #4F7A30;
--g-dark: #2B2B2B;
--g-grey: #8A857F;
--g-bg-warm: #FAF7F3;
--g-bg-sand: #F5F3F0;
--g-bg-img: #F1EEEA;
--g-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
--g-script: "Dancing Script", cursive;
}
body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: var(--g-dark);
background: #fff;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
.home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header {
margin-bottom:0 !important;
}
h1, h2, h3, h4, h5 {
font-family: var(--g-heading);
line-height: 1.06;
letter-spacing: -.015em;
font-weight: 700;
color: var(--g-dark);
}
:focus-visible {
outline: 2px solid var(--g-pink);
outline-offset: 2px;
border-radius: 3px;
}
.site .col-full {
max-width: 1250px;
margin-left: auto;
margin-right: auto;
padding: 0 26px;
box-sizing: border-box;
}
.script {
font-family: var(--g-script);
}
.ic { flex: none; }
a { text-decoration: none; }
/* -------------------------------------------------------------------------
Boutons et liens
------------------------------------------------------------------------- */
.g-btn {
transition: background-color .18s ease, color .18s, border-color .18s, transform .08s;
cursor: pointer;
text-decoration: none;
}
.g-btn:active { transform: translateY(1px); }
.g-btn-pink {
background: var(--g-pink);
color: #fff;
}
.g-btn-pink:hover { background: var(--g-pink-dark); color: #fff; }
.g-btn-lime {
background: var(--g-lime);
color: var(--g-dark);
}
.g-btn-lime:hover { background: var(--g-lime-dark); color: var(--g-dark); }
.g-btn-ghost {
background: rgba(255, 255, 255, .09);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, .5);
}
.g-btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 7px;
color: var(--g-pink);
font-weight: 700;
text-decoration: none;
}
.link-arrow:hover { color: var(--g-pink-dark); }
.link-arrow:hover .arw { transform: translateX(3px); }
.arw { transition: transform .18s; }
/* -------------------------------------------------------------------------
Bandeau promo (notice boutique)
------------------------------------------------------------------------- */
.g-promo {
background: var(--g-pink);
color: #fff;
font-size: 13px;
font-weight: 600;
padding: 9px 48px;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
}
.g-promo-item {
display: inline-flex;
align-items: center;
gap: 8px;
}
.g-promo-sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, .55);
}
.g-promo .g-promo-close {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #fff;
cursor: pointer;
display: inline-flex;
padding: 4px;
}
.g-promo .g-promo-close:hover { background: none; color: #fff; opacity: .8; }
/* -------------------------------------------------------------------------
Header
------------------------------------------------------------------------- */
.site-header,
.no-wc-breadcrumb .site-header,
.no-wc-breadcrumb.page-template-template-homepage .site-header {
position: relative;
z-index: 50;
background: #fff;
border-bottom: 1px solid rgba(43, 43, 43, .08);
padding: 0;
margin: 0;
}
.site-header[data-sticky="true"] {
position: sticky;
top: 0;
}
.admin-bar .site-header[data-sticky="true"] { top: 32px; }
.g-header-inner {
display: flex;
align-items: center;
gap: 18px;
padding-top: 15px;
padding-bottom: 15px;
}
/* Annule la grille flottée de Storefront dans le header. */
.site-header .site-branding,
.woocommerce-active .site-header .site-branding,
.storefront-secondary-navigation.woocommerce-active .site-header .site-branding {
flex: none;
width: auto;
margin: 0;
float: none;
clear: none;
display: block;
}
.site-header .custom-logo-link {
display: block;
margin-bottom: 0;
}
.site-header .custom-logo,
.site-header .site-branding img,
.site-header .custom-logo-link img {
height: 54px;
width: auto;
max-width: none;
max-height: none;
display: block;
}
.site-header .site-title {
margin: 0;
font-family: var(--g-script);
font-size: 34px;
line-height: 1;
}
.site-header .site-title a { color: var(--g-pink); text-decoration: none; }
/* Navigation principale */
.site-header .main-navigation,
.woocommerce-active .site-header .main-navigation {
float: none;
margin: 0;
width: auto;
clear: none;
flex: 0 1 auto;
min-width: 0;
}
.g-menu-toggle {
display: none;
align-items: center;
gap: 8px;
background: var(--g-dark);
color: #fff;
border: none;
border-radius: 11px;
padding: 9px 15px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
}
.g-menu-toggle:hover { background: var(--g-dark); color: #fff; }
.primary-nav-wrap { display: flex; align-items: center; }
ul.g-nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 2px;
}
ul.g-nav-menu li { position: relative; margin: 0; }
ul.g-nav-menu > li > a {
display: flex;
align-items: center;
gap: 5px;
padding: 9px 13px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: .085em;
text-transform: uppercase;
color: var(--g-dark);
white-space: nowrap;
transition: color .18s;
text-decoration: none;
}
ul.g-nav-menu > li > a:hover,
ul.g-nav-menu > li.current-menu-item > a,
ul.g-nav-menu > li.current_page_item > a {
color: var(--g-pink);
}
ul.g-nav-menu > li.menu-item-has-children > a::after {
content: "";
width: 13px;
height: 13px;
flex: none;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
ul.g-nav-menu .sub-menu {
list-style: none;
margin: 0;
padding: 7px;
position: absolute;
top: 100%;
left: 0;
min-width: 232px;
background: #fff;
border: 1px solid rgba(43, 43, 43, .09);
border-radius: 15px;
box-shadow: 0 26px 46px -22px rgba(43, 43, 43, .42);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: .18s ease;
z-index: 70;
}
ul.g-nav-menu li.menu-item-has-children:hover > .sub-menu,
ul.g-nav-menu li.menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(4px);
}
ul.g-nav-menu .sub-menu li > a {
display: block;
padding: 9px 12px;
border-radius: 10px;
font-size: 13.5px;
font-weight: 500;
color: var(--g-dark);
transition: .15s;
text-decoration: none;
}
ul.g-nav-menu .sub-menu li > a:hover {
background: var(--g-pink-bg);
color: var(--g-pink);
}
/* Recherche + panier */
.g-header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 11px;
flex: none;
}
.g-header-search {
display: flex;
align-items: center;
gap: 8px;
background: var(--g-bg-sand);
border: 1px solid rgba(43, 43, 43, .1);
border-radius: 999px;
padding: 8px 15px;
margin: 0;
}
.g-header-search .g-search-icon {
color: var(--g-grey);
display: inline-flex;
}
.g-header-search input[type="search"] {
border: none;
background: none;
outline: none;
box-shadow: none;
font-size: 13.5px;
width: 168px;
color: var(--g-dark);
padding: 0;
}
.g-header-search input[type="search"]::placeholder { color: var(--g-grey); }
a.cart-contents {
display: flex;
align-items: center;
gap: 9px;
border: 1px solid rgba(43, 43, 43, .14);
border-radius: 999px;
padding: 7px 15px 7px 13px;
color: var(--g-dark);
background: #fff;
text-decoration: none;
transition: border-color .18s, color .18s;
}
a.cart-contents:hover { border-color: var(--g-pink); color: var(--g-pink); }
a.cart-contents .g-cart-meta {
display: flex;
flex-direction: column;
line-height: 1.12;
}
a.cart-contents .amount {
font-size: 13px;
font-weight: 700;
}
a.cart-contents .count {
font-size: 10.5px;
color: var(--g-grey);
font-weight: 600;
}
/* -------------------------------------------------------------------------
Bandeau infos (adresse, horaires)
------------------------------------------------------------------------- */
.g-info-strip {
background: var(--g-dark);
color: rgba(255, 255, 255, .82);
}
.g-info-strip .g-info-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
padding-top: 9px;
padding-bottom: 9px;
font-size: 12.5px;
flex-wrap: wrap;
}
.g-info-strip .g-info-item {
display: inline-flex;
align-items: center;
gap: 7px;
}
.g-info-strip .g-info-sep { opacity: .35; }
.g-info-strip .link-arrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: #C7DA7E;
font-weight: 600;
font-size: 12.5px;
}
.g-info-strip .link-arrow:hover { color: #C7DA7E; }
/* -------------------------------------------------------------------------
Hero
------------------------------------------------------------------------- */
.g-hero {
position: relative;
overflow: hidden;
background: #EAD9E4;
}
.g-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
margin: 0;
}
.g-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(103deg, rgba(38, 30, 35, .78) 0%, rgba(38, 30, 35, .46) 44%, rgba(38, 30, 35, .06) 80%);
}
.g-hero .col-full { position: relative; z-index: 2; }
.g-hero-inner {
max-width: 610px;
padding: 5.4em 0 5.6em;
}
.g-hero-badge {
display: inline-flex;
align-items: center;
gap: 9px;
background: rgba(255, 255, 255, .13);
backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .3);
color: #fff;
padding: 6px 15px 6px 7px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
margin-bottom: 22px;
}
.g-hero-badge .g-hero-badge-icon {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--g-lime);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--g-dark);
}
.g-hero-title {
color: #fff;
font-size: clamp(2.7rem, 5.3vw, 4.15rem);
line-height: 1.0;
margin: 0 0 .34em;
}
.g-hero-title .script {
display: block;
color: var(--g-pink-light);
font-weight: 700;
font-size: .6em;
letter-spacing: 0;
margin-bottom: .02em;
line-height: 1;
}
.g-hero-text {
color: rgba(255, 255, 255, .9);
font-size: clamp(1rem, 1.35vw, 1.16rem);
max-width: 33em;
margin: 0 0 30px;
}
.g-hero-actions {
display: flex;
gap: 13px;
flex-wrap: wrap;
}
.g-hero-actions .g-btn {
padding: 15px 27px;
border-radius: 12px;
font-size: 15px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 9px;
}
.g-hero-actions .g-btn-ghost { padding: 15px 25px; }
/* -------------------------------------------------------------------------
Sections de la page d'accueil
------------------------------------------------------------------------- */
.g-section {
padding: 66px 0;
background: #fff;
scroll-margin-top: 88px;
}
.g-section--alt { background: var(--g-bg-warm); }
.g-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
margin-bottom: 30px;
}
.g-kicker {
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--g-pink);
margin-bottom: 9px;
}
.g-section-header h2 {
font-size: clamp(1.7rem, 3vw, 2.35rem);
margin: 0;
}
.g-section-header .link-arrow {
font-size: 14px;
padding-bottom: 6px;
}
.g-section-header .g-btn-lime {
padding: 11px 19px;
border-radius: 11px;
font-size: 13px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 7px;
}
/* -------------------------------------------------------------------------
Rayons (catégories)
------------------------------------------------------------------------- */
ul.g-cats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
ul.g-cats li { margin: 0; }
.cat-tile {
display: block;
position: relative;
border-radius: 17px;
overflow: hidden;
background: var(--g-dark);
transition: transform .25s ease, box-shadow .25s;
text-decoration: none;
}
.cat-tile:hover {
transform: translateY(-5px);
box-shadow: 0 24px 48px -24px rgba(43, 43, 43, .4);
}
.cat-imgwrap {
aspect-ratio: 4 / 5;
overflow: hidden;
}
.cat-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s ease;
margin: 0;
}
.cat-tile:hover .cat-img { transform: scale(1.07); }
.g-cat-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30, 24, 27, .82) 0%, rgba(30, 24, 27, .12) 46%, rgba(30, 24, 27, 0) 72%);
}
.g-cat-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 17px;
}
.g-cat-count {
display: inline-block;
background: rgba(255, 255, 255, .16);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
margin-bottom: 10px;
}
.g-cat-name {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
background: none;
color: #fff;
font-family: var(--g-heading);
font-size: 18.5px;
font-weight: 700;
}
.g-cat-name .arw {
display: inline-flex;
opacity: .85;
color: #fff;
}
/* -------------------------------------------------------------------------
Cartes produits
------------------------------------------------------------------------- */
ul.g-products {
list-style: none;
margin: 0;
padding: 0;
display: grid;
}
ul.g-products.g-cols-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
ul.g-products.g-cols-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
ul.g-products li.g-product {
background: #fff;
border: 1px solid rgba(43, 43, 43, .08);
border-radius: 19px;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
margin: 0;
transition: box-shadow .25s ease, transform .25s ease, border-color .25s;
}
ul.g-products li.g-product:hover {
box-shadow: 0 24px 48px -24px rgba(43, 43, 43, .34);
transform: translateY(-5px);
}
ul.g-products li.g-product--highlight {
border: 1.5px solid var(--g-pink);
box-shadow: 0 22px 44px -26px rgba(230, 27, 155, .55);
}
ul.g-products.g-cols-4 li.g-product { border-radius: 17px; }
.g-badges {
position: absolute;
top: 14px;
left: 14px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 7px;
align-items: flex-start;
}
ul.g-products.g-cols-4 .g-badges { top: 12px; left: 12px; gap: 6px; }
.g-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
}
ul.g-products.g-cols-4 .g-badge {
font-size: 10.5px;
letter-spacing: .04em;
padding: 4px 9px;
}
.g-badge--season { background: var(--g-lime); color: var(--g-dark); }
.g-badge--sale, .g-badge--star { background: var(--g-pink); color: #fff; }
.g-product-link {
display: block;
color: inherit;
text-decoration: none;
}
.pimg-wrap {
aspect-ratio: 1 / 1;
background: var(--g-bg-img);
overflow: hidden;
}
.pimg {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .55s ease;
margin: 0;
}
li.g-product:hover .pimg { transform: scale(1.06); }
.g-product-info {
padding: 18px 18px 6px;
display: flex;
flex-direction: column;
flex: 1;
}
ul.g-products.g-cols-4 .g-product-info { padding: 15px 15px 5px; }
.g-product-title {
font-size: 18.5px;
margin: 0 0 4px;
}
ul.g-products.g-cols-4 .g-product-title { font-size: 16px; margin: 0 0 5px; }
.g-product-title a { color: inherit; text-decoration: none; }
.g-product-sub {
font-size: 12.5px;
color: var(--g-grey);
margin: 0 0 14px;
}
.g-price {
margin-top: auto;
display: flex;
align-items: baseline;
gap: 6px;
}
ul.g-products.g-cols-4 .g-price { gap: 5px; }
.g-price .g-amount {
color: var(--g-pink);
font-weight: 800;
font-size: 21px;
}
ul.g-products.g-cols-4 .g-price .g-amount { font-size: 18px; }
.g-price del {
color: #B4AEA8;
font-weight: 500;
font-size: 13px;
}
.g-price del .g-amount { color: #B4AEA8; font-weight: 500; font-size: 13px; }
.g-price small {
color: var(--g-grey);
font-weight: 500;
font-size: 12.5px;
}
ul.g-products.g-cols-4 .g-price small { font-size: 11.5px; }
.g-product-footer { padding: 4px 18px 18px; }
ul.g-products.g-cols-4 .g-product-footer { padding: 3px 15px 15px; }
.g-product-footer .g-add-cart,
.g-product-footer a.button,
.g-product-footer .added_to_cart {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--g-green);
color: #fff;
padding: 12px;
border-radius: 11px;
font-size: 13.5px;
font-weight: 700;
width: 100%;
transition: background-color .18s;
text-decoration: none;
border: none;
}
ul.g-products.g-cols-4 .g-product-footer .g-add-cart,
ul.g-products.g-cols-4 .g-product-footer a.button,
ul.g-products.g-cols-4 .g-product-footer .added_to_cart {
gap: 7px;
padding: 10px;
border-radius: 10px;
font-size: 12.5px;
}
.g-product-footer .g-add-cart:hover,
.g-product-footer a.button:hover,
.g-product-footer .added_to_cart:hover {
background: var(--g-green-dark);
color: #fff;
}
.g-product-footer .added_to_cart { margin-top: 6px; background: var(--g-dark); }
/* -------------------------------------------------------------------------
Footer
------------------------------------------------------------------------- */
.site-footer {
background: var(--g-dark);
padding: 60px 0 0;
color: rgba(255, 255, 255, .58);
}
.site-footer a:not(.button):not(.components-button) {
color: rgba(255, 255, 255, .6);
text-decoration: none;
}
.site-footer a:not(.button):not(.components-button):hover {
color: var(--g-pink-soft);
text-decoration: none;
}
.g-footer-widgets {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.45fr;
gap: 2.6em;
padding-bottom: 52px;
}
.g-footer-brand {
display: flex;
align-items: baseline;
gap: 9px;
margin-bottom: 16px;
}
.g-footer-brand .script {
color: var(--g-pink-soft);
font-size: 30px;
font-weight: 700;
line-height: .9;
}
.g-footer-brand .g-footer-brand-sub {
color: rgba(255, 255, 255, .62);
font-size: 11px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.g-footer-desc {
color: rgba(255, 255, 255, .58);
font-size: 13.5px;
line-height: 1.75;
margin: 0 0 16px;
max-width: 30ch;
}
.g-footer-address {
color: rgba(255, 255, 255, .58);
font-size: 13.5px;
line-height: 1.7;
margin: 0;
display: flex;
gap: 8px;
}
.g-footer-address .ic { margin-top: 2px; color: var(--g-pink-soft); }
.site-footer .g-widget-title {
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(255, 255, 255, .1);
}
ul.g-footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 11px;
}
ul.g-footer-links li { margin: 0; }
.footer-link {
color: rgba(255, 255, 255, .6);
font-size: 13.5px;
transition: color .16s;
text-decoration: none;
}
a.footer-link:hover { color: var(--g-pink-soft); }
.g-footer-newsletter-text {
color: rgba(255, 255, 255, .58);
font-size: 13.5px;
line-height: 1.7;
margin: 0 0 13px;
}
.g-newsletter-form {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.g-newsletter-form input[type="email"] {
flex: 1;
min-width: 0;
padding: 11px 13px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 10px;
background: rgba(255, 255, 255, .06);
color: #fff;
font-size: 13px;
outline: none;
box-shadow: none;
}
.g-newsletter-form input[type="email"]::placeholder { color: rgba(255, 255, 255, .45); }
.g-newsletter-form button {
border: none;
padding: 11px 15px;
border-radius: 10px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .02em;
}
.g-footer-contact {
display: flex;
flex-direction: column;
gap: 9px;
}
a.g-footer-contact-line {
display: flex;
align-items: center;
gap: 9px;
color: rgba(255, 255, 255, .6);
font-size: 13.5px;
transition: color .16s;
text-decoration: none;
}
a.g-footer-contact-line:hover { color: var(--g-pink-soft); }
.g-footer-contact-line .ic { color: var(--g-pink-soft); }
.g-footer-hours {
color: rgba(255, 255, 255, .36);
font-size: 12px;
padding-left: 24px;
}
.g-site-info {
border-top: 1px solid rgba(255, 255, 255, .08);
padding: 20px 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: rgba(255, 255, 255, .42);
}
.g-site-info-left {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.g-site-info a { color: rgba(255, 255, 255, .55); text-decoration: none; }
.g-site-info a:hover { color: var(--g-pink-soft); }
.g-site-info .g-dot { opacity: .4; }
/* -------------------------------------------------------------------------
Barre mobile fixe
------------------------------------------------------------------------- */
ul.g-handheld-bar {
list-style: none;
margin: 0;
padding: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: #fff;
border-top: 1px solid rgba(43, 43, 43, .1);
box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
display: none;
}
ul.g-handheld-bar li {
display: flex;
margin: 0;
}
ul.g-handheld-bar li + li { border-left: 1px solid rgba(43, 43, 43, .08); }
ul.g-handheld-bar a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 10px 4px;
color: var(--g-dark);
font-size: 10.5px;
font-weight: 700;
text-decoration: none;
}
ul.g-handheld-bar a.g-active { color: var(--g-pink); }
/* -------------------------------------------------------------------------
Harmonisation Storefront (pages internes : boutique, panier, compte)
------------------------------------------------------------------------- */
.storefront-handheld-footer-bar { display: none !important; }
.storefront-breadcrumb { background: var(--g-bg-warm); }
button, input[type="submit"], .button, .wp-block-button__link {
border-radius: 11px;
}
.woocommerce-active .site-main .button,
.site-main button.button,
.site-main input[type="submit"],
.site-main .wc-block-components-button {
background-color: var(--g-green);
color: #fff;
font-weight: 700;
}
.woocommerce-active .site-main .button:hover,
.site-main button.button:hover,
.site-main input[type="submit"]:hover,
.site-main .wc-block-components-button:hover {
background-color: var(--g-green-dark);
color: #fff;
}
.site-main .button.alt,
.site-main .button.checkout {
background-color: var(--g-pink);
}
.site-main .button.alt:hover,
.site-main .button.checkout:hover {
background-color: var(--g-pink-dark);
}
.site-main .price,
.site-main .woocommerce-Price-amount {
color: var(--g-pink);
}
.site-main .onsale {
background-color: var(--g-pink);
color: #fff;
border-radius: 999px;
}
body:not(.home) .site-main a:not(.button) { color: var(--g-pink); }
body:not(.home) .site-main a:not(.button):hover { color: var(--g-pink-dark); }
body:not(.home) .site-main h1 a,
body:not(.home) .site-main h2 a,
body:not(.home) .site-main h3 a { color: var(--g-dark); }
/* -------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------- */
@media (max-width: 1120px) {
ul.g-cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1023px) {
.g-menu-toggle { display: inline-flex; }
.site-header .main-navigation { order: 3; }
.g-header-actions { order: 2; }
.primary-nav-wrap {
position: absolute;
top: 100%;
left: 0;
right: 0;
display: none;
padding: 10px 18px 16px;
background: #fff;
border-top: 1px solid rgba(43, 43, 43, .08);
box-shadow: 0 28px 42px -24px rgba(43, 43, 43, .34);
z-index: 65;
}
.main-navigation[data-open="true"] .primary-nav-wrap { display: block; }
ul.g-nav-menu {
flex-direction: column;
align-items: stretch;
gap: 0;
}
ul.g-nav-menu > li > a {
padding: 12px 6px;
border-bottom: 1px solid rgba(43, 43, 43, .06);
font-size: 13px;
}
ul.g-nav-menu .sub-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
padding: 2px 0 8px 14px;
min-width: 0;
}
}
@media (max-width: 860px) {
ul.g-products.g-cols-3 { grid-template-columns: repeat(2, 1fr); }
ul.g-products.g-cols-4 { grid-template-columns: repeat(2, 1fr); }
.g-footer-widgets { grid-template-columns: repeat(2, 1fr); gap: 1.9em; }
}
@media (max-width: 600px) {
.g-header-search { display: none !important; }
ul.g-products.g-cols-3 { grid-template-columns: 1fr; }
ul.g-cats { grid-template-columns: 1fr 1fr; gap: 13px; }
.g-footer-widgets { grid-template-columns: 1fr; gap: 1.7em; }
ul.g-handheld-bar { display: flex; }
ul.g-handheld-bar li { flex: 1; }
body { padding-bottom: 66px; }
.g-info-strip { display: none; }
.hide-sm { display: none !important; }
.g-hero-inner { padding: 2.6em 0 2.9em; }
}
@media (max-width: 440px) {
ul.g-products.g-cols-4 { grid-template-columns: 1fr; }
ul.g-cats { grid-template-columns: 1fr; }
}