/* * JG Boutique : mini-panier en tiroir et page panier. * Couleurs et polices du site : nuit, or, vert ; Josefin Sans pour les titres et boutons, Roboto pour le texte. */ .jg-tiroir, .jg-panier, .jg-toast { --jg-nuit: #12102b; --jg-nuit-2: #1b1842; --jg-nuit-3: #241f55; --jg-feuille: #3f7d3a; --jg-or: #bc9253; --jg-or-clair: #d9b47c; --jg-encre: #f3efe6; --jg-brume: #aaa5c8; --jg-trait: rgba(243, 239, 230, .12); --jg-alerte: #e58a76; --jg-titre: "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif; --jg-texte: "Roboto", "Helvetica Neue", Arial, system-ui, sans-serif; font-family: var(--jg-texte); color: var(--jg-encre); font-size: 15px; line-height: 1.5; } .jg-tiroir *, .jg-panier *, .jg-toast * { box-sizing: border-box; } .jg-tiroir .jg-ico, .jg-panier .jg-ico { flex: none; } .jg-tiroir p, .jg-panier p { margin: 0; } /* Le tiroir remplace celui du widget Elementor : on garde son icône, on masque son panneau. */ .elementor-menu-cart__container { display: none !important; } html.jg-sans-defilement { overflow: hidden; } /* ---------- Boutons communs ---------- */ .jg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 16px; border-radius: 6px; border: 1px solid transparent; font: 700 12.5px/1.1 var(--jg-titre); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .jg-btn--or { background: var(--jg-or); color: #1a1205; } .jg-btn--or:hover, .jg-btn--or:focus-visible { background: var(--jg-or-clair); color: #1a1205; } .jg-btn--contour { background: transparent; color: var(--jg-encre); border-color: rgba(243, 239, 230, .3); } .jg-btn--contour:hover, .jg-btn--contour:focus-visible { border-color: var(--jg-encre); color: var(--jg-encre); } .jg-lien { background: none; border: 0; padding: 4px; color: var(--jg-brume); font: 400 13px var(--jg-texte); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: center; } .jg-lien:hover { color: var(--jg-encre); } .jg-tiroir :focus-visible, .jg-panier :focus-visible, .jg-toast :focus-visible { outline: 2px solid var(--jg-or-clair); outline-offset: 2px; } /* ---------- Quantité, retrait, poids ---------- */ .jg-stepper { display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; background: rgba(243, 239, 230, .06); } .jg-stepper button { width: 26px; height: 26px; background: none; border: 0; border-radius: 6px; color: var(--jg-brume); font: 400 15px/1 var(--jg-texte); cursor: pointer; padding: 0; } .jg-stepper button:hover:not(:disabled) { color: var(--jg-encre); background: rgba(243, 239, 230, .08); } .jg-stepper button:disabled { opacity: .3; cursor: default; } .jg-stepper__valeur { width: 30px; height: 26px; border: 0; background: transparent; color: var(--jg-encre); text-align: center; font: 500 13.5px var(--jg-texte); -moz-appearance: textfield; padding: 0; } .jg-stepper__valeur::-webkit-outer-spin-button, .jg-stepper__valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .jg-qte-seul { color: var(--jg-brume); font-size: 13px; } .jg-retirer { display: inline-flex; align-items: center; gap: 5px; color: var(--jg-brume); font-size: 12.5px; text-decoration: none; padding: 4px; } .jg-retirer .jg-ico { width: 14px; height: 14px; } .jg-retirer:hover, .jg-retirer:focus-visible { color: var(--jg-alerte); } .jg-poids { font: 600 12px/1 var(--jg-titre); letter-spacing: .04em; padding: 5px 8px; border-radius: 999px; background: var(--jg-nuit-3); color: var(--jg-encre); } .is-chargement { opacity: .55; pointer-events: none; transition: opacity .15s; } /* ---------- Tiroir ---------- */ .jg-tiroir { position: fixed; inset: 0; z-index: 99990; visibility: hidden; pointer-events: none; } .jg-tiroir.is-ouvert { visibility: visible; pointer-events: auto; } .jg-tiroir__voile { position: absolute; inset: 0; background: rgba(8, 7, 24, .62); opacity: 0; transition: opacity .25s; } .jg-tiroir.is-ouvert .jg-tiroir__voile { opacity: 1; } .jg-tiroir__panneau { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); background: var(--jg-nuit-2); border-left: 1px solid var(--jg-trait); box-shadow: -20px 0 50px rgba(0, 0, 0, .45); transform: translateX(105%); transition: transform .3s ease; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .jg-tiroir.is-ouvert .jg-tiroir__panneau { transform: none; } .jg-tiroir__panneau:focus { outline: none; } .jg-tiroir__contenu { height: 100%; display: flex; flex-direction: column; } .jg-tiroir__contenu > * { flex: none; } .jg-tiroir__contenu > .jg-tiroir__liste { flex: 1 1 auto; } .jg-tiroir__contenu > .jg-vide { flex: 1 1 auto; align-content: center; } .jg-tiroir__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--jg-trait); } .jg-tiroir__titre { font: 700 18px/1.2 var(--jg-titre); letter-spacing: .02em; } .jg-tiroir__titre span { font: 400 13px var(--jg-texte); color: var(--jg-brume); letter-spacing: 0; } .jg-tiroir__fermer { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--jg-trait); background: none; color: var(--jg-encre); display: grid; place-items: center; cursor: pointer; padding: 0; } .jg-tiroir__fermer:hover { background: var(--jg-nuit-3); } .jg-tiroir__info { display: flex; gap: 10px; align-items: center; padding: 10px 20px; background: rgba(63, 125, 58, .14); color: #cfe6cc; font-size: 13px; border-bottom: 1px solid var(--jg-trait); } .jg-tiroir__liste { list-style: none; margin: 0; padding: 4px 20px; overflow-y: auto; min-height: 0; } .jg-ligne { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 12px; padding: 16px 0; border-bottom: 1px solid var(--jg-trait); } .jg-ligne__image img { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; display: block; background: #fff; } .jg-ligne__infos { display: grid; gap: 5px; min-width: 0; align-content: start; } .jg-ligne__nom { color: var(--jg-encre); font-weight: 500; line-height: 1.3; text-decoration: none; } a.jg-ligne__nom:hover { color: var(--jg-or-clair); } .jg-ligne__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--jg-brume); font-size: 13px; } .jg-ligne__prix { text-align: right; display: grid; gap: 2px; align-content: start; font-variant-numeric: tabular-nums; } .jg-ligne__prix small { color: var(--jg-brume); font-size: 12px; } .jg-ligne__actions { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } .jg-palier { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; border: 1px dashed rgba(217, 180, 124, .45); color: var(--jg-or-clair); font-size: 13px; } .jg-palier button { background: none; border: 1px solid var(--jg-or); color: var(--jg-or-clair); border-radius: 999px; padding: 5px 11px; cursor: pointer; font: 600 12px/1.2 var(--jg-titre); letter-spacing: .04em; } .jg-palier button:hover { background: rgba(188, 146, 83, .18); } .jg-tiroir__pied { display: grid; gap: 10px; align-content: start; padding: 14px 20px 18px; border-top: 1px solid var(--jg-trait); } .jg-tiroir__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .jg-tiroir__total strong { font-size: 20px; font-variant-numeric: tabular-nums; } .jg-tiroir__total small, .jg-note { color: var(--jg-brume); font-size: 12.5px; } .jg-vide { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 48px 20px; color: var(--jg-brume); } .jg-vide .jg-ico { width: 44px; height: 44px; opacity: .6; } .jg-vide__titre { color: var(--jg-encre); font: 700 17px var(--jg-titre); } .jg-vide .jg-btn { width: auto; } /* ---------- Message ---------- */ .jg-toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 99995; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: .25s; display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 32px); background: var(--jg-encre); color: var(--jg-nuit); border-radius: 999px; padding: 10px 16px 10px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 14px; } .jg-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .jg-toast button { background: none; border: 0; padding: 0; color: #6b4a16; font-weight: 700; text-decoration: underline; cursor: pointer; } .jg-ligne.is-nouveau { animation: jg-nouveau 1.8s ease-out; } @keyframes jg-nouveau { from { background: rgba(188, 146, 83, .22); } to { background: transparent; } } /* ---------- Page panier ---------- */ .jg-panier { display: block; max-width: 1180px; margin: 0 auto; } .jg-panier__corps { display: grid; gap: 24px; } .jg-etapes ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 600 12.5px/1 var(--jg-titre); letter-spacing: .08em; text-transform: uppercase; color: var(--jg-brume); } .jg-etapes li { display: flex; align-items: center; gap: 8px; } .jg-etapes li span { width: 24px; height: 24px; border-radius: 999px; border: 1px solid var(--jg-trait); display: grid; place-items: center; font-size: 12px; } .jg-etapes li.is-actif { color: var(--jg-or-clair); } .jg-etapes li.is-actif span { background: var(--jg-or); border-color: var(--jg-or); color: var(--jg-nuit); } @media (max-width: 480px) { .jg-etapes ol { font-size: 10px; letter-spacing: .03em; gap: 6px 8px; } .jg-etapes li { gap: 4px; white-space: nowrap; } .jg-etapes li span { width: 18px; height: 18px; font-size: 10px; } } .jg-panier__grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; } .jg-panier__articles { display: grid; gap: 14px; min-width: 0; margin: 0; } .jg-panier__compte { font: 700 17px var(--jg-titre); letter-spacing: .02em; } .jg-article { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; padding: 16px; border-radius: 10px; background: var(--jg-nuit-2); border: 1px solid var(--jg-trait); } .jg-article__image img { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; display: block; background: #fff; } .jg-article__corps { display: grid; gap: 10px; min-width: 0; align-content: start; } .jg-article__titre { display: grid; gap: 3px; } .jg-article__titre a, .jg-article__titre span { color: var(--jg-encre); font-weight: 500; font-size: 16px; text-decoration: none; } .jg-article__titre a:hover { color: var(--jg-or-clair); } .jg-article__titre small { color: var(--jg-brume); font-size: 13px; } .jg-paliers { display: flex; flex-wrap: wrap; gap: 6px; } .jg-paliers button { display: grid; gap: 2px; min-width: 78px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--jg-trait); background: none; color: var(--jg-encre); text-align: left; cursor: pointer; } .jg-paliers button b { font: 600 13px/1.1 var(--jg-titre); letter-spacing: .03em; } .jg-paliers button small { font-size: 11.5px; color: var(--jg-brume); } .jg-paliers button:hover { border-color: rgba(188, 146, 83, .6); } .jg-paliers button[aria-pressed="true"] { border-color: var(--jg-or); background: rgba(188, 146, 83, .14); cursor: default; } .jg-paliers button[aria-pressed="true"] small { color: var(--jg-or-clair); } .jg-article__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; } .jg-article__prix { text-align: right; display: grid; gap: 4px; align-content: start; font-variant-numeric: tabular-nums; } .jg-article__prix strong { font-size: 18px; } .jg-article__prix small { color: var(--jg-brume); font-size: 12px; } .jg-conseil { display: flex; gap: 8px; align-items: center; color: var(--jg-or-clair); font-size: 13px; } .jg-suggestions { display: grid; gap: 10px; padding-top: 6px; } .jg-suggestions__titre { font: 600 12px/1 var(--jg-titre); letter-spacing: .14em; text-transform: uppercase; color: var(--jg-or-clair); } .jg-suggestion { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 10px; border: 1px dashed var(--jg-trait); } .jg-suggestion img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; display: block; background: #fff; } .jg-suggestion strong { display: block; font-weight: 500; } .jg-suggestion small { color: var(--jg-brume); font-size: 12.5px; } .jg-suggestion button { background: none; border: 1px solid var(--jg-or); color: var(--jg-or-clair); border-radius: 6px; padding: 8px 12px; cursor: pointer; font: 700 11.5px/1 var(--jg-titre); letter-spacing: .08em; text-transform: uppercase; } .jg-suggestion button:hover { background: rgba(188, 146, 83, .16); } .jg-resume { position: sticky; top: 110px; display: grid; gap: 16px; padding: 20px; border-radius: 10px; background: var(--jg-nuit-2); border: 1px solid rgba(188, 146, 83, .35); } .jg-resume dl { margin: 0; display: grid; gap: 10px; font-variant-numeric: tabular-nums; } .jg-resume dl div { display: flex; justify-content: space-between; gap: 12px; } .jg-resume dt { color: var(--jg-brume); } .jg-resume dd { margin: 0; text-align: right; } .jg-resume__total { padding-top: 12px; border-top: 1px solid var(--jg-trait); align-items: baseline; } .jg-resume__total dt { color: var(--jg-encre); font: 700 15px var(--jg-titre); letter-spacing: .08em; text-transform: uppercase; } .jg-resume__total dd { font-size: 24px; font-weight: 700; } .jg-facture { display: grid; gap: 4px; padding: 12px; border-radius: 8px; background: rgba(63, 125, 58, .12); color: #d5e9d2; font-size: 13px; } .jg-assurances { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13.5px; } .jg-assurances li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; } .jg-assurances .jg-ico { color: var(--jg-or-clair); margin-top: 2px; } .jg-assurances small { display: block; color: var(--jg-brume); font-size: 12.5px; } .jg-panier__vide { padding-block: 32px; } .jg-barre-mobile { display: none; } .jg-panier .woocommerce-message, .jg-panier .woocommerce-info, .jg-panier .woocommerce-error { margin-bottom: 16px; } @media (max-width: 900px) { .jg-panier__grille { grid-template-columns: 1fr; } .jg-resume { position: static; } } @media (max-width: 560px) { .jg-article { grid-template-columns: 72px minmax(0, 1fr); } .jg-article__image img { width: 72px; height: 72px; } .jg-article__prix { grid-column: 1 / 3; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; text-align: right; } .jg-panier { padding-bottom: 76px; } .jg-barre-mobile { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; gap: 12px; align-items: center; justify-content: space-between; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: var(--jg-nuit-2); border-top: 1px solid var(--jg-trait); } .jg-barre-mobile small { display: block; color: var(--jg-brume); font-size: 12px; } .jg-barre-mobile strong { font-size: 18px; font-variant-numeric: tabular-nums; } .jg-barre-mobile .jg-btn { width: auto; padding: 12px 18px; } .woocommerce-cart .jg-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } /* au-dessus de la barre fixe */ .woocommerce-cart #trp-floater-ls { bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important; } /* drapeau de langue au-dessus de la barre fixe */ } /* Le drapeau de langue flottant (TranslatePress) passe au-dessus de tout : on le cache tiroir ouvert. */ html.jg-sans-defilement #trp-floater-ls { display: none !important; } @media (prefers-reduced-motion: reduce) { .jg-tiroir__panneau, .jg-tiroir__voile, .jg-toast, .is-chargement { transition: none; } .jg-ligne.is-nouveau { animation: none; background: rgba(188, 146, 83, .12); } } /* ---------- Livraison offerte ---------- */ .jg-offerte { display: grid; gap: 6px; font-size: 12.5px; color: var(--jg-brume); } .jg-offerte p { display: flex; gap: 10px; align-items: center; } .jg-offerte strong { color: var(--jg-encre); font-weight: 700; } .jg-offerte small { color: var(--jg-brume); font-size: 12px; } .jg-offerte__barre { height: 4px; border-radius: 999px; background: rgba(243, 239, 230, .12); overflow: hidden; } .jg-offerte__barre span { display: block; height: 100%; border-radius: inherit; background: var(--jg-or); transition: width .3s ease; } .jg-offerte.is-atteint .jg-offerte__barre span { background: var(--jg-feuille); } .jg-tiroir__info--offerte { display: block; padding: 12px 20px; } .jg-resume > .jg-offerte { padding: 0 0 4px; } .jg-offert { color: #9fd39a; font-weight: 700; } /* ---------- Bandeau du mode aperçu (administrateurs seulement) ---------- */ .jg-apercu { margin: 0 0 16px; padding: 8px 12px; border-radius: 6px; background: rgba(188, 146, 83, .16); border: 1px dashed var(--jg-or); color: var(--jg-or-clair); font-size: 12.5px; } .jg-tiroir .jg-apercu { margin: 0; border-radius: 0; border-width: 0 0 1px; } /* Barre d'administration WordPress (administrateurs connectés) : le tiroir commence en dessous. */ .admin-bar .jg-tiroir__panneau { top: 32px; } @media (max-width: 782px) { .admin-bar .jg-tiroir__panneau { top: 46px; } } /* Le thème impose sa largeur, sa bordure et son fond aux champs « number » : on les neutralise dans le sélecteur de quantité. */ .jg-stepper input.jg-stepper__valeur, .jg-stepper input.jg-stepper__valeur:focus { width: 30px !important; min-width: 0 !important; height: 26px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--jg-encre) !important; font: 500 13.5px/26px var(--jg-texte) !important; text-align: center !important; } /* Le thème (Hello + kit Elementor) habille tous les