/* ── Apéro Express – Ossature globale (menu hamburger + masquage du chrome du thème) ── */ :root { --aez-brique: #C1502E; --aez-miel: #EFA83B; --aez-sauge: #7A8B6F; --aez-blanc-casse: #FBF7F2; --aez-brun-cafe: #3D2C22; } /* Site 100% custom : le header/footer par défaut du thème n'a pas sa place ici, chaque écran gère son propre bandeau (retour + titre) ou, pour l'accueil, son propre header (logo, recherche). */ #masthead, .site-header, #colophon, .site-footer, .entry-hero, .product-title, #kadence-breadcrumbs { display: none !important; } /* !important nécessaire : le thème Kadence imprime son propre `body{background:…, font-family:…}` APRÈS ce fichier dans le (ses styles sont enregistrés après ceux du plugin), donc à spécificité égale c'est lui qui gagnait la cascade — d'où la bande grise (--global-palette8) visible autour du contenu, et le corps de texte qui retombait sur la pile de polices système de Kadence au lieu de Work Sans (charte "Convivial Doux"). */ body { background: var(--aez-blanc-casse) !important; font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; } input, select, textarea, button { font-family: inherit; } /* Le habillage Kadence (marges de section, largeur "boxed", fond de carte…) n'a pas sa place ici : chaque écran custom gère déjà sa propre largeur. */ #primary.content-area { margin: 0 !important; max-width: none !important; background: transparent !important; } .content-wrap, .entry-content-wrap { padding: 0 !important; max-width: none !important; box-shadow: none !important; } /* ── Bouton icône générique (compte/panier sur l'Accueil, hamburger partout) ── */ .aez-icon-btn { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: transparent; border: none; display: flex; align-items: center; justify-content: center; color: var(--aez-brun-cafe); text-decoration: none; cursor: pointer; } .aez-icon-btn svg { flex-shrink: 0; width: 22px; height: 22px; } .aez-icon-btn__badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--aez-brique); color: #fff; font-size: 0.68em; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ── En-tête global — logo + nav (desktop) / logo + panier + hamburger (mobile) ── */ .aez-site-header { background: var(--aez-blanc-casse); border-bottom: 1px solid rgba(61, 44, 34, 0.1); position: sticky; top: 0; z-index: 900; } .aez-site-header__inner { max-width: 1140px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .aez-site-header__logo { flex-shrink: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.2em; color: var(--aez-brun-cafe); text-decoration: none; } .aez-site-header__nav { display: none; /* mobile : caché, le panneau hamburger prend le relai */ align-items: center; gap: 22px; } .aez-site-header__nav a { color: var(--aez-brun-cafe); text-decoration: none; font-weight: 600; font-size: 0.92em; opacity: 0.7; white-space: nowrap; transition: opacity 0.15s ease, color 0.15s ease; } .aez-site-header__nav a:hover, .aez-site-header__nav a.is-active { opacity: 1; color: var(--aez-brique); } .aez-site-header__actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } @media (min-width: 768px) { .aez-site-header__nav { display: flex; } .aez-site-header__burger { display: none; } } /* ── Panneau de navigation (hamburger, mobile) — global ──────────────────── */ .aez-menu-panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 9500; width: min(78vw, 300px); background: var(--aez-blanc-casse); box-shadow: 8px 0 24px rgba(61, 44, 34, 0.18); padding: 24px 20px; display: flex; flex-direction: column; gap: 4px; transform: translateX(-100%); transition: transform 0.25s ease; } .aez-menu-panel.is-open { transform: translateX(0); } .aez-menu-panel a { padding: 12px 10px; border-radius: 10px; color: var(--aez-brun-cafe); text-decoration: none; font-weight: 600; } .aez-menu-panel a:hover { background: rgba(193, 80, 46, 0.08); } .aez-menu-overlay { position: fixed; inset: 0; z-index: 9400; background: rgba(61, 44, 34, 0.4); display: none; } .aez-menu-overlay.is-open { display: block; } /* ── Bouton retour + titre — motif réutilisé sur presque tous les écrans ── */ .aez-page-header { display: flex; align-items: center; gap: 14px; padding: 18px 18px 4px; max-width: 600px; margin: 0 auto; } .aez-back-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: #ffffff; border: 1px solid rgba(61, 44, 34, 0.12); display: flex; align-items: center; justify-content: center; color: var(--aez-brun-cafe); text-decoration: none; } .aez-back-btn svg { width: 20px; height: 20px; } .aez-page-header__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.7em; font-weight: 700; color: var(--aez-brun-cafe); margin: 0; } .aez-page-subtitle { max-width: 600px; margin: 0 auto; padding: 0 18px 4px; color: var(--aez-sauge); font-size: 0.96em; } .aez-page-content { max-width: 600px; margin: 0 auto; padding: 12px 18px 24px; } /* Page Panier — le shortcode [woocommerce_cart] natif n'a pas de conteneur dédié, on l'aligne sur la même colonne que le reste des écrans. */ .woocommerce-cart .woocommerce { max-width: 600px; margin: 0 auto; padding: 12px 18px 24px; box-sizing: border-box; } /* ── Desktop : les écrans "formulaire/liste courte" (panier, contact, merci…) restent une colonne centrée — c'est le pattern desktop standard pour ce type de contenu — mais légèrement plus large pour respirer davantage qu'un simple cadre mobile agrandi. Les écrans "vitrine" (accueil, menu, produit) ont leurs propres règles de mise en page fluide, voir leurs fichiers CSS respectifs. ── */ @media (min-width: 700px) { .aez-page-header, .aez-page-subtitle, .aez-page-content, .woocommerce-cart .woocommerce { max-width: 680px; } } /* ── Toast "Ajouté au panier" (remplace la notice bleue WooCommerce) ── */ .aez-toast { position: fixed; left: 50%; bottom: 24px; z-index: 9600; transform: translateX(-50%) translateY(16px); background: var(--aez-brique); color: var(--aez-blanc-casse); padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 0.92em; box-shadow: 0 8px 24px rgba(61, 44, 34, 0.3); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; max-width: calc(100vw - 32px); text-align: center; white-space: nowrap; } .aez-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ── Animation du compteur panier au moment de l'ajout ── */ @keyframes aez-bump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 65% { transform: scale(0.94); } 100% { transform: scale(1); } } .aez-bump { animation: aez-bump 0.4s ease; } /* ── Sélecteur "− qté +" sur les cartes produit (remplace le "+" une fois le produit dans le panier — voir AEZ_Cart_Sync / aez-cart-sync.js). Même position que le bouton "+" qu'il remplace (.product-action-wrap est déjà positionné en bas à droite de la carte, voir aez-shop-archive.css / aez-product.css). ── */ .aez-qty-stepper { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 999px; padding: 4px 6px; box-shadow: 0 2px 8px rgba(61, 44, 34, 0.28); } .aez-qty-stepper__btn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--aez-brique); color: #fff; font-size: 1em; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .aez-qty-stepper__btn:hover:not(:disabled) { background: #a8431f; } .aez-qty-stepper__btn:disabled { opacity: 0.5; cursor: not-allowed; } .aez-qty-stepper__valeur { min-width: 16px; text-align: center; font-weight: 700; font-size: 0.9em; color: var(--aez-brun-cafe); }