/* Stephy100 - Header partage - masque le header Uncode d'origine, affiche le notre */ /* #masthead retire : header.php parent plus jamais charge du tout (theme enfant possede son propre header.php natif) */ /* Modern Cart flottant remplace par notre tiroir panier - on le masque pour eviter le doublon */ #moderncart-floating-cart, .moderncart-panel { display: none !important; } :root { --s100-bg: #FBF0E8; --s100-text: #241E1B; --s100-text-secondary: #4A4038; --s100-accent: #C97B4A; --s100-bg-soft: #F3E4D8; --s100-white: #FFFDFB; --s100-border: rgba(36,30,27,0.1); } #s100-header-root, #s100-header-root * { box-sizing: border-box; } #s100-header-root { font-family: 'Inter', sans-serif; } /* IMPORTANT : ce wrapper ne doit contenir QUE la barre d'annonce + le header (~120px au total). Sans display:contents, il devient le "bloc conteneur" de .s100-header en position:sticky, qui ne peut alors rester coince en haut que tant qu'on reste dans les ~120px de ce wrapper — au- dela, le wrapper sort entierement de l'ecran et entraine le header avec lui (header non sticky en pratique). display:contents retire le wrapper du calcul de mise en page (ses enfants deviennent directement enfants du ) sans toucher au HTML/PHP. */ #s100-header-root { display: contents; } .s100-announce { background: var(--s100-text); color: var(--s100-bg); text-align: center; padding: 9px 12px; font-size: 12px; letter-spacing: 0.06em; } .s100-header { position: sticky; top: 0; z-index: 500; background: var(--s100-bg); } .s100-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 6%; border-bottom: 1px solid var(--s100-border); } .s100-nav-desktop { display: flex; gap: 36px; align-items: center; width: 280px; } .s100-nav-link { font-size: 13px; letter-spacing: 0.12em; color: var(--s100-text); text-decoration: none; font-weight: 500; } .s100-nav-link-muted { color: #8A7E72; font-weight: 400; font-size: 12px; letter-spacing: 0.1em; } .s100-nav-link.s100-active { color: var(--s100-accent); } .s100-hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } .s100-logo-link { text-decoration: none; display: flex; } .s100-logo-img { height: 40px; width: auto; object-fit: contain; transition: height 300ms ease-out; } .s100-header-icons { display: flex; gap: 22px; align-items: center; width: 280px; justify-content: flex-end; } .s100-icon-btn { display: flex; cursor: pointer; text-decoration: none; position: relative; } .s100-cart-count { position: absolute; top: -8px; right: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--s100-accent); color: var(--s100-white); font-size: 10px; display: flex; align-items: center; justify-content: center; line-height: 1; } .s100-search-bar { display: none; padding: 16px 6%; border-bottom: 1px solid var(--s100-border); background: var(--s100-white); } .s100-search-bar.s100-open { display: block; } .s100-search-form { display: flex; align-items: center; gap: 14px; max-width: 620px; margin: 0 auto; border-bottom: 1px solid rgba(36,30,27,0.2); padding-bottom: 10px; } .s100-search-input { flex: 1; border: none; background: transparent; outline: none; font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--s100-text); } .s100-search-submit { background: none; border: none; font-size: 12px; letter-spacing: 0.08em; color: var(--s100-accent); cursor: pointer; } .s100-mega-menu { display: none; position: relative; width: 100%; background: #fff; border-bottom: 1px solid var(--s100-border); box-shadow: 0 32px 48px rgba(36,30,27,0.12); padding: 40px 8%; gap: 32px; } .s100-mega-menu.s100-open { display: flex; } .s100-mega-links { flex: 0 0 20%; display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--s100-border); padding-right: 28px; } .s100-mega-link-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; text-decoration: none; color: #8A7E72; } .s100-mega-link-title.active { color: var(--s100-text); } .s100-mega-subcats { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0,200px)); gap: 10px 40px; align-content: start; } .s100-mega-subcats a { color: var(--s100-text); text-decoration: none; font-size: 15px; padding: 2px 0; } .s100-mega-subcats a:hover { color: var(--s100-accent); } .s100-mega-feature { flex: 0 0 280px; display: flex; flex-direction: column; gap: 12px; } .s100-mega-feature-label { font-size: 11px; letter-spacing: 0.2em; color: var(--s100-accent); margin: 0; } .s100-mega-feature a { text-decoration: none; } .s100-mega-feature img { width: 100%; height: 260px; object-fit: cover; object-position: top center; } .s100-mega-feature-name { font-size: 14px; margin: 8px 0 0; color: var(--s100-text); } .s100-mega-feature-price { font-family: 'Cormorant Garamond', serif; font-size: 16px; margin: 2px 0 0; color: var(--s100-accent); } .s100-mobile-menu { display: none; position: fixed; inset: 0; background: var(--s100-white); z-index: 600; overflow-y: auto; padding: 22px 24px 60px; } .s100-mobile-menu.s100-open { display: block; } .s100-mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .s100-mobile-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .s100-mobile-accordion-row { display: flex; justify-content: space-between; align-items: center; min-height: 56px; cursor: pointer; border-bottom: 1px solid var(--s100-border); } .s100-mobile-accordion-title { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--s100-text); } .s100-mobile-accordion-sign { font-size: 18px; color: #8A7E72; } .s100-mobile-accordion-panel { display: none; flex-direction: column; padding: 0 0 18px 8px; } .s100-mobile-accordion-panel.s100-open { display: flex; } .s100-mobile-accordion-panel a { color: var(--s100-text-secondary); text-decoration: none; font-size: 15px; min-height: 44px; display: flex; align-items: center; } .s100-mobile-accordion-simple { min-height: 56px; display: flex; align-items: center; font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--s100-text); text-decoration: none; border-bottom: 1px solid var(--s100-border); } .s100-mobile-bottom-links { display: flex; gap: 28px; margin-top: 26px; } .s100-mobile-bottom-links a { font-size: 14px; color: var(--s100-text-secondary); text-decoration: none; } .s100-cart-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(36,30,27,0.4); z-index: 700; } .s100-cart-drawer-overlay.s100-open { display: block; } .s100-cart-drawer { position: fixed; top: 0; right: -420px; width: 400px; max-width: 92vw; height: 100vh; background: var(--s100-bg); z-index: 701; box-shadow: -20px 0 50px rgba(36,30,27,0.2); display: flex; flex-direction: column; transition: right 300ms ease-out; } .s100-cart-drawer.s100-open { right: 0; } .s100-cart-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--s100-border); } .s100-cart-drawer-head h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 22px; margin: 0; } .s100-cart-drawer-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; } .s100-cart-items { flex: 1; padding: 4px 24px; } .s100-cart-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--s100-border); position: relative; } .s100-cart-item img { width: 72px; height: 92px; object-fit: cover; object-position: top center; flex-shrink: 0; } .s100-cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 6px; } .s100-cart-item-name { font-size: 14px; margin: 0; color: var(--s100-text); } .s100-cart-item-variant { font-size: 12px; margin: 0; color: #8A7E72; } .s100-badge { display: inline-block; width: fit-content; font-size: 10px; padding: 3px 8px; border-radius: 4px; } .s100-badge-tan { background: #F0C9AC; color: #5A3821; } .s100-badge-green { background: #DCE9DC; color: #3C6B3E; } .s100-cart-item-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; } .s100-qty-stepper { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(36,30,27,0.15); } .s100-qty-stepper button { width: 28px; height: 28px; border: none; background: none; cursor: pointer; font-size: 15px; } .s100-qty-val { font-size: 13px; min-width: 14px; text-align: center; } .s100-cart-item-price { font-family: 'Cormorant Garamond', serif; font-size: 16px; margin: 0; color: var(--s100-accent); } .s100-cart-item-remove { position: absolute; top: 18px; right: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #8A7E72; font-size: 16px; cursor: pointer; } .s100-cart-notice { display: flex; gap: 8px; background: var(--s100-bg-soft); padding: 10px 14px; margin: 0 24px; font-size: 11.5px; color: var(--s100-text-secondary); } .s100-cart-footer { padding: 20px 24px 26px; border-top: 1px solid var(--s100-border); } .s100-cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 13px; color: #8A7E72; } .s100-cart-subtotal-value { font-family: 'Cormorant Garamond', serif; font-size: 19px; color: var(--s100-text); } .s100-btn-outline, .s100-btn-primary, .s100-btn-dark { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 14px; text-decoration: none; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 10px; } .s100-btn-outline { border: 1px solid var(--s100-text); color: var(--s100-text); } .s100-btn-primary { background: var(--s100-accent); color: var(--s100-white); } .s100-btn-dark { background: var(--s100-text); color: var(--s100-bg); padding: 14px 32px; width: fit-content; margin: 0 auto; } .s100-cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px; text-align: center; color: var(--s100-text-secondary); font-size: 15px; } @media (max-width: 900px) { .s100-nav-desktop { display: none; } .s100-hamburger { display: flex; } #s100-search-toggle { display: none; } .s100-mega-menu { display: none !important; } .s100-header-inner { padding: 16px 5%; } } /* Recherche instantanee : resultats sous la barre de recherche */ .s100-search-results { display: none; max-width: 620px; margin: 0 auto; max-height: 60vh; overflow-y: auto; } .s100-search-results.is-open { display: block; } .s100-search-fallback-label, .s100-search-empty { font-size: 12.5px; color: #8A7E72; margin: 14px 0 8px; font-family: 'Inter', sans-serif; } .s100-search-list { display: flex; flex-direction: column; } .s100-search-item { display: flex; align-items: center; gap: 14px; padding: 10px 4px; text-decoration: none; border-bottom: 1px solid rgba(36,30,27,0.06); transition: background 150ms ease-out; } .s100-search-item:hover { background: var(--s100-bg-soft); } .s100-search-item img { width: 48px; height: 64px; object-fit: contain; background: var(--s100-bg-soft); flex-shrink: 0; } .s100-search-item-info { display: flex; flex-direction: column; gap: 3px; } .s100-search-item-name { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--s100-text); } .s100-search-item-price { font-family: 'Cormorant Garamond', serif; font-size: 15px; color: var(--s100-accent); } .s100-search-viewall { display: block; text-align: center; padding: 14px 0 4px; font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.08em; color: var(--s100-accent); text-decoration: none; text-transform: uppercase; }