/* ========================================================================== pmj-cart 0.3.0 — mise en page de la page d'aperçu [pmj_cart] (étape 3) Chargé SEULEMENT sur la page d'aperçu. Mobile d'abord ; 2 colonnes dès 860 px. Toutes les classes commencent par « pmj-cart- » (aucun conflit avec le thème). Couleurs, polices et poids : maquette validée (plan § c2). ========================================================================== */ /* Polices hébergées par pmj-cart (licence OFL, voir assets/fonts/OFL-*.txt) */ @font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/libre-baskerville-400-700-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: 'Libre Baskerville'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/libre-baskerville-400-700-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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-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: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-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: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-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: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-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: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-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; } .pmj-cart { --pmj-encre: #1A1510; --pmj-encre-2: #534330; --pmj-gris: #9B968F; --pmj-ligne: #E4E0D8; --pmj-creme: #F5F0E8; --pmj-papier: #FAF8F4; --pmj-or: #C9A96E; --pmj-cuivre: #B4743E; --pmj-vert: #3F6B4E; --pmj-blanc: #FFFFFF; --pmj-titres: "Libre Baskerville", Baskerville, Georgia, serif; --pmj-texte: "Libre Baskerville", Baskerville, Georgia, serif; --pmj-ui: Poppins, "Segoe UI", Arial, sans-serif; --pmj-rayon: 10px; --pmj-ombre: 0 2px 10px rgba(26, 21, 16, .06); font-family: var(--pmj-texte); font-size: 15px; line-height: 1.5; color: var(--pmj-encre); background: var(--pmj-papier); max-width: 1450px; /* 0.20.1 : même largeur que le conteneur des pages produit (Astra, 1450 px), au lieu de 1240 */ margin: 0 auto; padding: 0 0 20px; box-sizing: border-box; overflow-wrap: anywhere; } .pmj-cart *, .pmj-cart *::before, .pmj-cart *::after { box-sizing: border-box; } .pmj-cart h1, .pmj-cart h2, .pmj-cart h3 { font-family: var(--pmj-titres); font-weight: 400; margin: 0; color: var(--pmj-encre); letter-spacing: 0; text-transform: none; line-height: 1.3; } .pmj-cart a { color: inherit; } .pmj-cart p { margin: 0; } .pmj-cart ul { margin: 0; padding: 0; list-style: none; } .pmj-cart img { max-width: 100%; height: auto; } /* Page d'aperçu : le titre « Panier (nouveau) » du thème est masqué (le panier a son propre titre) */ .pmj-cart-page .entry-header, .pmj-cart-page .ast-single-entry-banner { display: none; } /* 0.20.1 (répétition, problème 3 de Ric) : la page pmj-cart est une page WordPress ORDINAIRE ; Astra l'entourait de son conteneur, d'une boîte d'article et de marges (panier étroit, espace vide des deux côtés, ordinateur et téléphone). Comme les autres pages du site (« pleine largeur ») : ces enveloppes ne réduisent plus rien ; le panier garde SES marges (16 px téléphone, 28 px ordinateur) et sa largeur maximale (1450 px). Page pmj-cart seulement. */ body.pmj-cart-page .site-content > .ast-container { max-width: 100%; padding-left: 0; padding-right: 0; } body.pmj-cart-page #primary, body.pmj-cart-page .site-main { width: 100%; max-width: none; margin: 0; padding: 0; float: none; } body.pmj-cart-page #secondary { display: none; } body.pmj-cart-page .ast-article-single, body.pmj-cart-page .site-main > article { margin: 0; padding: 0 !important; background: transparent; border: 0; box-shadow: none; max-width: none; } body.pmj-cart-page .entry-content { margin: 0; padding: 0; max-width: none; } body.pmj-cart-page .entry-content > :has([data-pmj-cart]):not([data-pmj-cart]) { max-width: none; margin-left: 0; margin-right: 0; padding: 0; } /* enveloppe d'un bloc, s'il y en a une */ body.pmj-cart-page .entry-content .pmj-cart { max-width: 1450px; width: 100%; margin-left: auto; margin-right: auto; } /* plus fort que la largeur « contenu » du thème */ /* Bandeau « aperçu » (administrateur seulement) */ .pmj-cart .pmj-cart-bandeau { margin: 12px 16px 0; padding: 8px 12px; background: #FFF4D6; border: 1px dashed var(--pmj-or); border-radius: 6px; font: 400 12.5px/1.45 var(--pmj-ui); color: #5c4313; } .pmj-cart .pmj-cart-bandeau strong { font-weight: 600; } /* Titre */ .pmj-cart .pmj-cart-titre { padding: 18px 16px 4px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .pmj-cart .pmj-cart-titre h1 { font-size: 28px; } .pmj-cart .pmj-cart-compte { font: 400 13px var(--pmj-ui); color: var(--pmj-gris); } /* Grille : 1 colonne (mobile) → 2 colonnes (ordinateur) */ .pmj-cart .pmj-cart-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 12px 16px 20px; } .pmj-cart .pmj-cart-principal, .pmj-cart .pmj-cart-cote { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Boîtes */ .pmj-cart .pmj-cart-boite { background: var(--pmj-blanc); border: 1px solid var(--pmj-ligne); border-radius: var(--pmj-rayon); box-shadow: var(--pmj-ombre); } /* ---------- Conteneur d'article ---------- */ .pmj-cart .pmj-cart-article { padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } /* min-width: 0 : une image très large (ex. snowboard horizontal de 1240 px) ne doit jamais élargir la page */ .pmj-cart .pmj-cart-article-image { margin: 0; min-width: 0; } .pmj-cart .pmj-cart-cadre-img img { min-width: 0; } .pmj-cart .pmj-cart-cadre-img { background: var(--pmj-creme); border-radius: 8px; display: flex; align-items: center; justify-content: center; height: 190px; overflow: hidden; } .pmj-cart .pmj-cart-cadre-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; margin: 0; } /* Formes découpées (Special Shape) : image ENTIÈRE, jamais coupée ni tournée, avec une petite marge. L'aperçu PitchPrint est un JPG à fond blanc : « multiply » fond ce blanc dans le crème. */ .pmj-cart .pmj-cart-forme .pmj-cart-cadre-img { padding: 10px; } .pmj-cart .pmj-cart-forme img { mix-blend-mode: multiply; } .pmj-cart .pmj-cart-mini-img.pmj-cart-forme { padding: 2px; } /* Légende de taille sous l'image */ /* 0.5.1 — option B « Éditorial » (Ric, 29 sept.) : Baskervville, la police des titres du site (chargée par Astra) */ .pmj-cart .pmj-cart-legende { margin-top: 8px; text-align: center; font: 400 15px/1.35 'Baskervville', var(--pmj-titres); letter-spacing: 0; color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-leg-type { color: var(--pmj-encre); } .pmj-cart .pmj-cart-leg-sep { color: var(--pmj-or); margin: 0 6px; } .pmj-cart .pmj-cart-leg-taille { white-space: nowrap; } .pmj-cart .pmj-cart-article-tete { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .pmj-cart .pmj-cart-article-tete h2 { font-size: 16.5px; line-height: 1.35; font-weight: 600; } .pmj-cart .pmj-cart-famille { display: block; font: 500 10.5px var(--pmj-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--pmj-gris); margin-bottom: 3px; } .pmj-cart .pmj-cart-prix { text-align: right; white-space: nowrap; } .pmj-cart .pmj-cart-prix-actuel { font-size: 17px; font-weight: 600; } .pmj-cart .pmj-cart-prix-unite { display: block; font-size: 12.5px; color: var(--pmj-gris); } /* Pastilles « LIBELLÉ | valeur » (étape 5, maquette validée) */ .pmj-cart .pmj-cart-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; padding: 0; list-style: none; } .pmj-cart .pmj-cart-pastille { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--pmj-ligne); border-radius: 30px; font: 400 12.5px/1.35 var(--pmj-ui); overflow: hidden; background: var(--pmj-blanc); margin: 0; } .pmj-cart .pmj-cart-lib { display: flex; align-items: center; font: 500 10px/1.2 var(--pmj-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--pmj-gris); padding: 4px 8px 4px 10px; border-right: 1px solid var(--pmj-ligne); background: #FBFAF7; white-space: nowrap; } .pmj-cart .pmj-cart-val { padding: 4px 10px 4px 8px; color: var(--pmj-encre); min-width: 0; } .pmj-cart .pmj-cart-pastille > .pmj-cart-val:first-child { padding-left: 10px; } /* Aperçu seulement : entrée absente du dictionnaire (repli) */ .pmj-cart .pmj-cart-pastille--repli { border-style: dashed; border-color: var(--pmj-or); } .pmj-cart details.pmj-cart-plus-details > summary { list-style: none; cursor: pointer; font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); text-decoration: underline; text-underline-offset: 3px; margin-top: 4px; display: inline-block; } .pmj-cart details.pmj-cart-plus-details > summary::-webkit-details-marker { display: none; } .pmj-cart details.pmj-cart-plus-details[open] > summary { display: none; } /* Aperçu seulement (0.5.2) : produit PitchPrint sans aperçu de montage */ .pmj-cart .pmj-cart-diag-pp { margin: 8px 0 0; padding: 7px 10px; background: #FDECEC; border: 1px dashed #C0392B; border-radius: 6px; font: 400 11.5px/1.45 var(--pmj-ui); color: #7A2318; } /* Aperçu seulement : l'affichage brut actuel, pour comparer */ .pmj-cart details.pmj-cart-brut { margin-top: 8px; } .pmj-cart details.pmj-cart-brut > summary { cursor: pointer; font: 400 11px var(--pmj-ui); color: #8a6a2a; font-style: italic; } .pmj-cart .pmj-cart-details { margin-top: 8px; font: 400 12.5px/1.5 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-details dl, .pmj-cart .pmj-cart-details p { margin: 0; } .pmj-cart .pmj-cart-details dt { font-weight: 500; float: left; clear: left; margin-right: 4px; } .pmj-cart .pmj-cart-details dd { margin: 0; } .pmj-cart .pmj-cart-details dd p { display: inline; margin: 0; } /* Actions : quantité, supprimer */ .pmj-cart .pmj-cart-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; } .pmj-cart .pmj-cart-qte { display: inline-flex; align-items: center; border: 1px solid var(--pmj-ligne); border-radius: 30px; overflow: hidden; background: var(--pmj-blanc); } .pmj-cart .pmj-cart-qte button { width: 34px; height: 32px; border: 0; border-radius: 0; background: var(--pmj-blanc); font: 400 17px/1 var(--pmj-ui); color: var(--pmj-encre); padding: 0; margin: 0; cursor: pointer; box-shadow: none; } .pmj-cart .pmj-cart-qte button:hover, .pmj-cart .pmj-cart-qte button:focus { background: var(--pmj-creme); color: var(--pmj-encre); } .pmj-cart .pmj-cart-qte output { min-width: 28px; text-align: center; font: 500 14px var(--pmj-ui); } /* 0.6.0 : bouton grisé (quantité 1, ou maximum atteint) ; 0.6.1 : « + » au maximum reste cliquable (aria-disabled) pour afficher l'avertissement */ .pmj-cart .pmj-cart-qte button:disabled, .pmj-cart .pmj-cart-qte button:disabled:hover, .pmj-cart .pmj-cart-qte button[aria-disabled="true"], .pmj-cart .pmj-cart-qte button[aria-disabled="true"]:hover { color: #cfc8bd; background: var(--pmj-blanc); cursor: not-allowed; } /* 0.6.1 : avertissement de stock, juste sous les boutons + / − de l'article, avec une petite pointe vers eux */ .pmj-cart { --pmj-alerte-fond: #A63D2F; --pmj-alerte-texte: #FFFFFF; } .pmj-cart .pmj-cart-alerte { position: relative; display: flex; align-items: flex-start; gap: 8px; width: fit-content; max-width: 100%; margin: 10px 0 0; padding: 9px 13px; background: var(--pmj-alerte-fond); color: var(--pmj-alerte-texte); border-radius: 8px; font: 500 13px/1.45 var(--pmj-ui); box-shadow: 0 2px 8px rgba(166, 61, 47, .25); overflow-wrap: normal; } .pmj-cart .pmj-cart-alerte[hidden] { display: none; } .pmj-cart .pmj-cart-alerte::before { content: ""; position: absolute; top: -6px; left: 70px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--pmj-alerte-fond); } .pmj-cart .pmj-cart-alerte svg { flex: none; margin-top: 1px; } /* 0.6.2 : bouton « × » pour fermer (zone de toucher de 28 px) */ .pmj-cart .pmj-cart-alerte-fermer { flex: none; align-self: center; width: 28px; height: 28px; margin: -5px -8px -5px 2px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pmj-alerte-texte); font: 400 20px/28px var(--pmj-ui); text-align: center; cursor: pointer; box-shadow: none; } .pmj-cart .pmj-cart-alerte-fermer:hover, .pmj-cart .pmj-cart-alerte-fermer:focus-visible { background: rgba(255, 255, 255, .18); color: var(--pmj-alerte-texte); outline: none; } .pmj-cart .pmj-cart-alerte--rappel { animation: pmj-cart-rappel .45s ease-out; } @keyframes pmj-cart-rappel { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .pmj-cart .pmj-cart-alerte--rappel { animation: none; } } .pmj-cart .pmj-cart-unite { font: 400 12.5px var(--pmj-ui); color: var(--pmj-gris); } /* Pendant un échange : les montants s'estompent (le calcul se refait) ; l'article retiré s'efface */ .pmj-cart.pmj-cart-occupe .pmj-cart-prix, .pmj-cart.pmj-cart-occupe .pmj-cart-lignes, .pmj-cart.pmj-cart-occupe .pmj-cart-bm-total b { opacity: .45; transition: opacity .15s; } .pmj-cart .pmj-cart-article.pmj-cart-retrait { opacity: .35; transition: opacity .2s; pointer-events: none; } /* Message (quantité maximale, « … a été retiré » + Annuler) : en haut de l'écran, lisible partout */ .pmj-cart .pmj-cart-message { position: fixed; left: 16px; right: 16px; margin: 0 auto; width: fit-content; top: calc(var(--wp-admin--admin-bar--height, 0px) + 14px); z-index: 100001; display: flex; align-items: center; justify-content: space-between; gap: 14px; overflow-wrap: normal; background: var(--pmj-encre); color: #fff; font: 500 13px/1.4 var(--pmj-ui); padding: 10px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: 560px; } .pmj-cart .pmj-cart-message[hidden] { display: none; } .pmj-cart .pmj-cart-annuler { flex: none; background: none; border: 1px solid rgba(255,255,255,.6); border-radius: 30px; color: #fff; font: 600 12px var(--pmj-ui); padding: 5px 12px; margin: 0; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; } .pmj-cart .pmj-cart-annuler:hover, .pmj-cart .pmj-cart-annuler:focus { background: rgba(255,255,255,.12); color: #fff; } /* Panier vide */ .pmj-cart .pmj-cart-vide { text-align: center; padding: 18px 6px 6px; } .pmj-cart .pmj-cart-vide-titre { font: 600 20px/1.3 var(--pmj-titres); margin-bottom: 6px; } .pmj-cart .pmj-cart-vide p { color: var(--pmj-encre-2); font-size: 14px; } .pmj-cart .pmj-cart-vide .pmj-cart-btn { display: inline-block; width: auto; text-decoration: none; margin-top: 16px; padding: 13px 26px; } .pmj-cart .pmj-cart-lien { font: 500 12.5px var(--pmj-ui); color: var(--pmj-gris); background: none; border: 0; border-radius: 0; padding: 4px 0; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; } .pmj-cart .pmj-cart-lien:hover, .pmj-cart .pmj-cart-lien:focus { color: var(--pmj-encre); background: none; } /* Boutons de l'article (contour fin, coins arrondis, icône à gauche) */ .pmj-cart .pmj-cart-boutons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .pmj-cart .pmj-cart-btn-contour { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--pmj-ui); color: var(--pmj-encre); background: var(--pmj-blanc); border: 1px solid #cfc8bd; border-radius: 30px; padding: 7px 14px 7px 11px; margin: 0; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; } .pmj-cart .pmj-cart-btn-contour:hover, .pmj-cart .pmj-cart-btn-contour:focus { border-color: var(--pmj-encre); background: var(--pmj-creme); color: var(--pmj-encre); } .pmj-cart .pmj-cart-btn-contour svg { flex: none; } /* ---------- Résumé (colonne de droite) ---------- */ .pmj-cart .pmj-cart-resume { padding: 16px 18px 18px; } .pmj-cart .pmj-cart-resume h2 { font-size: 18px; } .pmj-cart .pmj-cart-mini-liste { margin: 10px 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--pmj-ligne); display: grid; gap: 8px; } .pmj-cart .pmj-cart-mini-liste li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 12.5px; margin: 0; } .pmj-cart .pmj-cart-mini-img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--pmj-creme); border-radius: 4px; overflow: hidden; } .pmj-cart .pmj-cart-mini-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .pmj-cart .pmj-cart-mini-nom, .pmj-cart .pmj-cart-mini-prix { font-weight: 600; } .pmj-cart .pmj-cart-mini-nom .pmj-cart-q { display: block; color: var(--pmj-gris); font-weight: 400; } .pmj-cart .pmj-cart-mini-liste.pmj-cart-sans-image li { grid-template-columns: 1fr auto; } .pmj-cart .pmj-cart-mini-liste.pmj-cart-sans-image .pmj-cart-q { display: inline; } .pmj-cart .pmj-cart-lignes { display: grid; gap: 7px; font-size: 14px; } .pmj-cart .pmj-cart-l { display: flex; justify-content: space-between; gap: 10px; } .pmj-cart .pmj-cart-l.pmj-cart-rabais span:last-child { color: var(--pmj-vert); } .pmj-cart .pmj-cart-l.pmj-cart-total { border-top: 1px solid var(--pmj-encre); padding-top: 10px; margin-top: 4px; font-size: 19px; font-family: var(--pmj-titres); font-weight: 600; } .pmj-cart .pmj-cart-btn { display: block; width: 100%; text-align: center; font: 500 13px var(--pmj-ui); letter-spacing: .12em; text-transform: uppercase; background: var(--pmj-encre); color: #fff; border: 0; border-radius: 40px; padding: 15px 18px; margin: 16px 0 0; cursor: pointer; box-shadow: none; line-height: 1.3; } .pmj-cart .pmj-cart-btn:hover, .pmj-cart .pmj-cart-btn:focus { background: var(--pmj-encre-2); color: #fff; } .pmj-cart .pmj-cart-note-etape { font: 400 11.5px var(--pmj-ui); color: var(--pmj-gris); text-align: center; margin-top: 10px; } /* Petit message « disponible à une étape suivante » */ .pmj-cart .pmj-cart-toast { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); z-index: 100001; background: var(--pmj-encre); color: #fff; font: 500 13px var(--pmj-ui); padding: 10px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); max-width: calc(100vw - 32px); } /* ---------- Pied collé (mobile) : détail + barre à 3 lignes ---------- */ .pmj-cart .pmj-cart-pied { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99980; } /* sous les fenêtres de pmj-cart (100000+) */ .pmj-cart .pmj-cart-barre { padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--pmj-blanc); border-top: 1px solid var(--pmj-ligne); box-shadow: 0 -4px 14px rgba(0,0,0,.07); } .pmj-cart .pmj-cart-bm-ligne1 { display: flex; align-items: center; gap: 8px; } .pmj-cart .pmj-cart-bm-total { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .pmj-cart .pmj-cart-bm-total small { font: 400 12px var(--pmj-ui); color: var(--pmj-gris); } .pmj-cart .pmj-cart-bm-total b { font: 700 20px/1 var(--pmj-titres); color: var(--pmj-encre); letter-spacing: -.01em; } .pmj-cart .pmj-cart-barre .pmj-cart-btn { width: auto; flex: none; min-height: 48px; padding: 0 14px; margin: 0; font-size: 11.5px; letter-spacing: .04em; } .pmj-cart .pmj-cart-bm-date, .pmj-cart .pmj-cart-bm-liv { display: flex; align-items: center; gap: 5px; margin: 0; font: 400 11px/1.35 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-bm-date { margin-top: 7px; } .pmj-cart .pmj-cart-bm-date svg { flex: none; color: var(--pmj-cuivre); } .pmj-cart .pmj-cart-bm-liv { margin-top: 3px; gap: 0; color: var(--pmj-gris); } .pmj-cart .pmj-cart-bm-sep { margin: 0 5px; } .pmj-cart .pmj-cart-bm-liv button { background: none; border: 0; border-radius: 0; padding: 4px 0; margin: -4px 0; font: 500 11px var(--pmj-ui); color: var(--pmj-encre); cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; } .pmj-cart .pmj-cart-bm-liv button:hover, .pmj-cart .pmj-cart-bm-liv button:focus { background: none; color: var(--pmj-encre); } .pmj-cart .pmj-cart-bm-detail-txt { text-decoration: underline; text-underline-offset: 3px; } .pmj-cart .pmj-cart-provisoire { color: #8a6a2a; font-style: italic; } .pmj-cart .pmj-cart-bm-fleche { display: inline-block; transition: transform .2s; } .pmj-cart .pmj-cart-pied.pmj-cart-detail-ouvert .pmj-cart-bm-fleche { transform: rotate(180deg); } .pmj-cart .pmj-cart-detail { display: none; max-height: 55vh; overflow-y: auto; margin: 0 10px; padding: 12px 14px; background: var(--pmj-blanc); border: 1px solid var(--pmj-ligne); border-radius: 10px 10px 0 0; box-shadow: 0 -6px 18px rgba(0,0,0,.08); } .pmj-cart .pmj-cart-pied.pmj-cart-detail-ouvert .pmj-cart-detail { display: block; } /* Mobile : de la place en bas de page pour que le dernier contenu reste visible au-dessus de la barre */ .pmj-cart-page { padding-bottom: calc(var(--pmj-cart-barre-h, 110px) + 16px); } /* Mobile : bulles flottantes juste au-dessus de la barre, sans la recouvrir ni se recouvrir */ @media (max-width: 859px) { .pmj-cart-page #pmj-chatbot-bubble { bottom: calc(var(--pmj-cart-barre-h, 110px) + 12px) !important; right: 12px !important; width: 48px !important; height: 48px !important; } .pmj-cart-page #pmj-chatbot-panel { bottom: calc(var(--pmj-cart-barre-h, 110px) + 70px) !important; max-height: calc(100vh - var(--pmj-cart-barre-h, 110px) - 90px) !important; } /* Complianz « Manage consent / cookies » : petite bulle ronde 🍪 à gauche */ .pmj-cart-page #cmplz-manage-consent .cmplz-manage-consent { bottom: calc(var(--pmj-cart-barre-h, 110px) + 12px) !important; top: auto !important; left: 12px !important; right: auto !important; width: 44px !important; height: 44px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important; font-size: 0 !important; overflow: hidden !important; transform: none !important; animation: none !important; } .pmj-cart-page #cmplz-manage-consent .cmplz-manage-consent::before { content: "🍪"; font-size: 18px; line-height: 44px; display: block; text-align: center; } /* 0.19.1 (bilan de Ric, 4 oct.) : la fenêtre de consentement de Complianz (ouverte par 🍪 ou à la première visite) s'arrête au-dessus de la barre collée, et défile si l'écran est trop petit ; elle ne cache plus le bouton de paiement. */ .pmj-cart-page .cmplz-cookiebanner { bottom: calc(var(--pmj-cart-barre-h, 110px) + 8px) !important; top: auto !important; max-height: calc(100vh - var(--pmj-cart-barre-h, 110px) - 16px) !important; overflow-y: auto !important; } /* 0.19.1 : bouton « haut de page » d'Astra : au-dessus de la bulle du chatbot, plus sur la barre collée. 0.20.3 (vrai iPhone de Ric, D5) : même là, en flottant, il couvrait le bout droit des boutons pleine largeur pendant le défilement (« Créer votre carte »). Sur téléphone, page pmj-cart seulement, il est masqué ; l'ordinateur le garde. */ .pmj-cart-page #ast-scroll-top { display: none !important; } } /* ---------- Ordinateur (860 px et plus) ---------- */ @media (min-width: 860px) { .pmj-cart .pmj-cart-bandeau { margin: 12px 28px 0; } .pmj-cart .pmj-cart-titre { padding: 22px 28px 6px; } .pmj-cart .pmj-cart-grille { grid-template-columns: minmax(0, 69fr) minmax(0, 31fr); gap: 28px; padding: 12px 28px 28px; } /* Colonne de droite fixe au défilement ; plus haute que l'écran → fixe PAR LE BAS (règle R13, calculé par pmj-cart.js) */ .pmj-cart .pmj-cart-cote { position: sticky; top: var(--pmj-cart-cote-top, 16px); align-self: start; } /* Image de l'article agrandie : 238 px */ .pmj-cart .pmj-cart-article { grid-template-columns: 238px minmax(0, 1fr); gap: 22px; padding: 20px; } .pmj-cart .pmj-cart-cadre-img { height: 238px; } /* Pas de barre collée sur ordinateur */ .pmj-cart .pmj-cart-pied { display: none; } .pmj-cart-page { padding-bottom: 0; } } /* ---------- 0.7.0 : code promo, rabais, soldes (étape 7) ---------- */ .pmj-cart .pmj-cart-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pmj-cart .pmj-cart-code-promo { margin-top: 12px; } .pmj-cart .pmj-cart-ajout-code { font: 500 12.5px var(--pmj-ui); color: var(--pmj-encre-2); background: none; border: 0; border-radius: 0; padding: 4px 0; margin: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; } .pmj-cart .pmj-cart-ajout-code:hover, .pmj-cart .pmj-cart-ajout-code:focus { color: var(--pmj-encre); background: none; } .pmj-cart .pmj-cart-ajout-code[hidden], .pmj-cart .pmj-cart-form-code[hidden] { display: none; } .pmj-cart .pmj-cart-form-code { display: flex; gap: 8px; margin: 0; } .pmj-cart .pmj-cart-form-code input { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0 12px; border: 1px solid #cfc8bd; border-radius: 8px; background: var(--pmj-blanc); font: 500 14px var(--pmj-ui); letter-spacing: .04em; text-transform: uppercase; color: var(--pmj-encre); box-shadow: none; } .pmj-cart .pmj-cart-form-code input::placeholder { text-transform: none; letter-spacing: 0; color: var(--pmj-gris); } .pmj-cart .pmj-cart-form-code input:focus { border-color: var(--pmj-encre); outline: none; box-shadow: 0 0 0 2px rgba(26, 21, 16, .12); } .pmj-cart .pmj-cart-form-code input[aria-invalid="true"] { border-color: var(--pmj-alerte-fond); } .pmj-cart .pmj-cart-btn-code { flex: none; height: 42px; margin: 0; padding: 0 16px; border: 1px solid var(--pmj-encre); border-radius: 8px; background: var(--pmj-blanc); color: var(--pmj-encre); font: 600 12px var(--pmj-ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: none; } .pmj-cart .pmj-cart-btn-code:hover, .pmj-cart .pmj-cart-btn-code:focus { background: var(--pmj-creme); color: var(--pmj-encre); } .pmj-cart .pmj-cart-alerte--code::before { left: 22px; } .pmj-cart .pmj-cart-code-ok { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 500 12.5px var(--pmj-ui); color: var(--pmj-vert); } /* Une ligne par code appliqué : « Code BIENVENUE10 · Retirer − 10,00 $ » */ .pmj-cart .pmj-cart-l-code > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; } .pmj-cart .pmj-cart-code { font: 600 11.5px var(--pmj-ui); letter-spacing: .06em; color: var(--pmj-vert); background: #EAF1EC; border-radius: 20px; padding: 2px 8px; } .pmj-cart .pmj-cart-retirer-code { font-size: 11.5px; padding: 0; } /* Œuvre en solde : prix barré + « Vous économisez » */ .pmj-cart .pmj-cart-prix-barre { display: block; font-size: 12.5px; color: var(--pmj-gris); text-decoration: line-through; } .pmj-cart .pmj-cart-prix--solde .pmj-cart-prix-actuel { color: var(--pmj-cuivre); } .pmj-cart .pmj-cart-economie { display: inline-block; margin-top: 4px; font: 500 11px var(--pmj-ui); color: var(--pmj-vert); background: #EAF1EC; border-radius: 20px; padding: 2px 8px; white-space: normal; } /* Encadré « Rabais appliqué automatiquement » */ .pmj-cart .pmj-cart-promo { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #EAF1EC; border: 1px solid #cfe0d4; border-radius: var(--pmj-rayon); color: var(--pmj-vert); font: 400 13px/1.45 var(--pmj-ui); } .pmj-cart .pmj-cart-promo svg { flex: none; } .pmj-cart .pmj-cart-promo b { font-weight: 600; }/* 0.7.0 : avec un prix barré et « Vous économisez », la colonne du prix s'élargit : le nom passe à la ligne au lieu de pousser la page (vu à 360 px) */ .pmj-cart .pmj-cart-article-tete > div:first-child { flex: 1 1 auto; min-width: 0; } .pmj-cart .pmj-cart-prix { flex: none; max-width: 60%; } .pmj-cart .pmj-cart-prix .pmj-cart-economie { display: block; width: fit-content; max-width: 100%; margin-left: auto; } /* sous le prix, comme la maquette */ /* ---------- 0.8.0 : livraison (étape 8, maquette validée) ---------- */ .pmj-cart .pmj-cart-boite-titre { font-size: 18px; font-weight: 600; padding: 16px 18px 0; } .pmj-cart .pmj-cart-liv-corps { padding: 10px 18px 16px; } .pmj-cart .pmj-cart-destination { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; font: 400 13.5px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); margin-bottom: 12px; } .pmj-cart .pmj-cart-destination[hidden], .pmj-cart .pmj-cart-dest-form[hidden], .pmj-cart [data-pmj-dest-etat-bloc][hidden] { display: none; } .pmj-cart .pmj-cart-destination b { font-weight: 600; color: var(--pmj-encre); } .pmj-cart .pmj-cart-dest-form { margin: 0 0 12px; } .pmj-cart .pmj-cart-dest-intro { font: 400 13px var(--pmj-ui); color: var(--pmj-encre-2); margin-bottom: 8px; } .pmj-cart .pmj-cart-dest-champs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: end; } @media (min-width: 600px) { .pmj-cart .pmj-cart-dest-champs { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .9fr) auto; align-items: start; } .pmj-cart .pmj-cart-btn-dest { margin-top: 20px; } } .pmj-cart .pmj-cart-champ { display: grid; gap: 4px; margin: 0; font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-champ select, .pmj-cart .pmj-cart-champ input { width: 100%; min-width: 0; height: 42px; margin: 0; padding: 0 10px; border: 1px solid #cfc8bd; border-radius: 8px; background: var(--pmj-blanc); font: 400 14px var(--pmj-ui); color: var(--pmj-encre); box-shadow: none; } .pmj-cart .pmj-cart-champ select:focus, .pmj-cart .pmj-cart-champ input:focus { border-color: var(--pmj-encre); outline: none; box-shadow: 0 0 0 2px rgba(26, 21, 16, .12); } .pmj-cart .pmj-cart-champ [aria-invalid="true"] { border-color: var(--pmj-alerte-fond); } .pmj-cart .pmj-cart-alerte--dest { margin-top: 10px; margin-bottom: 0; width: auto; } /* 0.8.1 : sous le champ en cause */ .pmj-cart .pmj-cart-champ-bloc { min-width: 0; } .pmj-cart .pmj-cart-champ-bloc[hidden] { display: none; } .pmj-cart .pmj-cart-info-liv { margin: 0 0 4px; padding: 10px 13px; border-radius: 8px; background: var(--pmj-creme); border: 1px solid var(--pmj-ligne); font: 400 13px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-alerte--dest::before { left: 22px; } /* Aucune livraison : même rouge, sans pointe, toute la largeur */ .pmj-cart .pmj-cart-alerte--aucune { width: auto; margin: 0 0 4px; } .pmj-cart .pmj-cart-alerte--aucune::before { display: none; } .pmj-cart .pmj-cart-alerte--aucune b { font-weight: 600; } /* Cartes cliquables */ .pmj-cart .pmj-cart-cartes-liv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; } @media (min-width: 600px) { .pmj-cart .pmj-cart-cartes-liv { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .pmj-cart .pmj-cart-carte-liv { position: relative; display: grid; gap: 3px; padding: 13px 14px; margin: 0; border: 1px solid var(--pmj-ligne); border-radius: 8px; cursor: pointer; background: var(--pmj-blanc); font: 400 13px/1.4 var(--pmj-ui); } .pmj-cart .pmj-cart-carte-liv input { position: absolute; opacity: 0; pointer-events: none; } .pmj-cart .pmj-cart-carte-liv:has(input:checked) { border: 2px solid var(--pmj-encre); padding: 12px 13px; background: var(--pmj-creme); } .pmj-cart .pmj-cart-carte-liv:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(26, 21, 16, .18); } .pmj-cart .pmj-cart-carte-haut { display: flex; justify-content: space-between; gap: 10px; font: 600 14px var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-carte-delai { font-size: 12.5px; color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-carte-mode { font-size: 12px; color: var(--pmj-encre-2); font-style: italic; } .pmj-cart .pmj-cart-mention { margin-top: 10px; font: 400 11.5px/1.5 var(--pmj-ui); color: var(--pmj-gris); } /* Résumé : lien « Modifier » ; livraison indisponible ; paiement grisé */ .pmj-cart .pmj-cart-lien-liv { font-size: 11.5px; margin-left: 6px; } .pmj-cart .pmj-cart-l-indispo span:last-child { color: var(--pmj-alerte-fond); font-weight: 600; } .pmj-cart .pmj-cart-btn[aria-disabled="true"] { background: #b9b2a8; color: #fff; cursor: not-allowed; } .pmj-cart .pmj-cart-bloque { margin-top: 8px; font: 500 12px/1.4 var(--pmj-ui); color: var(--pmj-alerte-fond); text-align: center; } .pmj-cart .pmj-cart-bm-mode { color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-bm-indispo { color: var(--pmj-alerte-fond); font-weight: 600; }.pmj-cart .pmj-cart-alerte--aucune a { color: #fff; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; } /* 0.9.0 : « Passer au paiement » est un lien ; boutons de paiement express des extensions (verrouillés pendant l'aperçu) */ .pmj-cart a.pmj-cart-btn, .pmj-cart a.pmj-cart-btn:hover, .pmj-cart a.pmj-cart-btn:focus, .pmj-cart a.pmj-cart-btn:visited { text-decoration: none; color: #fff; } .pmj-cart .pmj-cart-barre a.pmj-cart-btn { display: inline-flex; align-items: center; justify-content: center; } .pmj-cart .pmj-cart-paiements { margin-top: 4px; } .pmj-cart .pmj-cart-ou { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font: 400 11.5px var(--pmj-ui); color: var(--pmj-gris); text-align: center; } .pmj-cart .pmj-cart-ou::before, .pmj-cart .pmj-cart-ou::after { content: ""; flex: 1; border-top: 1px solid var(--pmj-ligne); } .pmj-cart .pmj-cart-paiements-cadre { position: relative; } .pmj-cart .pmj-cart-paiements-boutons { min-height: 44px; } /* Les extensions ajoutent leur propre « — ou — » : pmj-cart a le sien. Pleine largeur, espacement régulier. */ .pmj-cart .pmj-cart-paiements-boutons .wc-stripe-payment-method.or, .pmj-cart .pmj-cart-paiements-boutons .wc-ppcp-cart-payment-method.or { display: none !important; } .pmj-cart .pmj-cart-paiements-boutons ul { list-style: none; margin: 0; padding: 0; } .pmj-cart .pmj-cart-paiements-boutons li { margin: 0 0 8px; padding: 0; } .pmj-cart .pmj-cart-paiements-boutons .wc-ppcp-cart-payments__container, .pmj-cart .pmj-cart-paiements-boutons .wc-stripe-cart-checkout-container { width: 100% !important; float: none !important; margin: 0; } /* Le voile : recouvre toute la zone, transparent ; un clic n'affiche qu'un message. */ .pmj-cart .pmj-cart-verrou { position: absolute; inset: -4px; z-index: 5; width: auto; height: auto; margin: 0; padding: 0; border: 1px dashed var(--pmj-or); border-radius: 10px; background: rgba(250, 248, 244, .35); cursor: not-allowed; box-shadow: none; } .pmj-cart .pmj-cart-verrou:hover, .pmj-cart .pmj-cart-verrou:focus { background: rgba(250, 248, 244, .5); } .pmj-cart .pmj-cart-verrou:focus-visible { outline: 2px solid var(--pmj-encre); outline-offset: 2px; } .pmj-cart .pmj-cart-verrou-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; font: 500 11.5px/1.4 var(--pmj-ui); color: #8a6a2a; text-align: center; } .pmj-cart .pmj-cart-alerte--verrou { width: auto; } /* 0.10.0 : aperçu (administrateur) — la famille officielle de l'article */ .pmj-cart .pmj-cart-diag-famille { margin: 8px 0 0; padding: 5px 9px; background: #FFF4D6; border: 1px dashed var(--pmj-or); border-radius: 6px; font: 400 11.5px/1.45 var(--pmj-ui); color: #5c4313; } .pmj-cart .pmj-cart-diag-famille strong { color: #7A2318; font-weight: 600; } /* 0.11.0 : options gratuites (maquette du 27 sept.) — sections toujours ouvertes et rangée dépliable */ .pmj-cart .pmj-cart-options { border-top: 1px solid var(--pmj-ligne); margin-top: 14px; padding-top: 2px; } .pmj-cart .pmj-cart-section-opt { padding: 14px 2px 12px; border-bottom: 1px solid var(--pmj-ligne); } .pmj-cart .pmj-cart-section-opt h3 { font: 600 15px/1.3 var(--pmj-titres); margin: 0 0 2px; } .pmj-cart .pmj-cart-petit { margin: 0 0 10px; font: 400 12.5px/1.5 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-choix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; } @media (min-width: 600px) { .pmj-cart .pmj-cart-choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pmj-cart .pmj-cart-choix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pmj-cart .pmj-cart-carte-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: 0; border: 1px solid var(--pmj-ligne); border-radius: 8px; cursor: pointer; background: var(--pmj-blanc); font: 400 13px/1.4 var(--pmj-ui); min-width: 0; } .pmj-cart .pmj-cart-carte-opt input { position: absolute; opacity: 0; pointer-events: none; } .pmj-cart .pmj-cart-carte-opt:has(input:checked) { border: 2px solid var(--pmj-encre); padding: 9px; background: var(--pmj-creme); } .pmj-cart .pmj-cart-carte-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(26, 21, 16, .18); } .pmj-cart .pmj-cart-titre-choix { font: 700 13.5px var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-desc-choix { font-size: 12px; color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-taille-papier { font: 500 11.5px var(--pmj-ui); color: var(--pmj-cuivre); } .pmj-cart .pmj-cart-badge { position: absolute; top: -9px; right: 10px; font: 600 10px var(--pmj-ui); letter-spacing: .05em; text-transform: uppercase; background: var(--pmj-or); color: var(--pmj-encre); padding: 2px 8px; border-radius: 20px; } .pmj-cart .pmj-cart-vignette-papier { height: 96px; display: flex; align-items: center; justify-content: center; background: #EFEBE4; border-radius: 6px; } .pmj-cart .pmj-cart-papier { background: #fff; outline: 1.5px dashed var(--pmj-gris); outline-offset: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: flex; } .pmj-cart .pmj-cart-papier img { height: 70px; width: auto; max-width: 150px; object-fit: cover; display: block; } /* Épaisseur : l'illustration (~64 px) à gauche, le texte à droite (R6) */ .pmj-cart .pmj-cart-carte-ep { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 12px 14px; } .pmj-cart .pmj-cart-carte-ep:has(input:checked) { padding: 11px 13px; } .pmj-cart .pmj-cart-carte-ep .pmj-cart-vignette-coin { grid-column: 1; grid-row: 1 / span 2; display: block; } .pmj-cart .pmj-cart-carte-ep .pmj-cart-titre-choix { grid-column: 2; align-self: end; } .pmj-cart .pmj-cart-carte-ep .pmj-cart-desc-choix { grid-column: 2; align-self: start; } .pmj-cart .pmj-cart-coin-toile, .pmj-cart .pmj-cart-vignette-coin img { width: 64px; height: auto; display: block; } /* Commentaire : rangée dépliable */ .pmj-cart .pmj-cart-opt-deplier { border-bottom: 1px solid var(--pmj-ligne); } .pmj-cart .pmj-cart-opt-deplier:last-child { border-bottom: 0; } .pmj-cart .pmj-cart-rangee { display: flex; align-items: center; gap: 10px; padding: 11px 2px; cursor: pointer; list-style: none; } .pmj-cart .pmj-cart-rangee::-webkit-details-marker { display: none; } .pmj-cart .pmj-cart-rangee-nom { flex: 1; font: 600 14px var(--pmj-titres); color: var(--pmj-encre); } .pmj-cart .pmj-cart-rangee-etat { font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); white-space: nowrap; } .pmj-cart .pmj-cart-rangee-fleche { font-size: 11px; color: var(--pmj-gris); transition: transform .2s; } .pmj-cart details[open] > .pmj-cart-rangee .pmj-cart-rangee-fleche { transform: rotate(180deg); } .pmj-cart .pmj-cart-opt-contenu { padding: 2px 2px 14px; } .pmj-cart .pmj-cart-champ-texte { display: grid; gap: 4px; font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-champ-texte textarea { font: 400 14px/1.45 var(--pmj-texte); padding: 9px 11px; border: 1px solid #cfc8bd; border-radius: 6px; width: 100%; min-height: 76px; height: auto; resize: vertical; background: #fff; color: var(--pmj-encre); box-sizing: border-box; } .pmj-cart .pmj-cart-opt-statut { min-height: 16px; margin: 4px 0 0; font: 500 11.5px var(--pmj-ui); color: var(--pmj-vert); } .pmj-cart .pmj-cart-opt-statut.pmj-cart-opt-statut--erreur { color: #fff; background: var(--pmj-alerte-fond); padding: 6px 10px; border-radius: 6px; } .pmj-cart .pmj-cart-diag-option { margin: 10px 0 4px; padding: 5px 9px; background: #FFF4D6; border: 1px dashed var(--pmj-or); border-radius: 6px; font: 400 11.5px/1.45 var(--pmj-ui); color: #5c4313; } /* 0.11.1 : « Supprimer » plus facile à repérer (brun foncé, contraste d'environ 10:1, petite corbeille), sans être alarmant. */ .pmj-cart .pmj-cart-lien.pmj-cart-supprimer { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--pmj-encre-2); text-decoration-color: rgba(83, 67, 48, .45); } .pmj-cart .pmj-cart-lien.pmj-cart-supprimer:hover, .pmj-cart .pmj-cart-lien.pmj-cart-supprimer:focus { color: var(--pmj-encre); text-decoration-color: currentColor; } .pmj-cart .pmj-cart-lien.pmj-cart-supprimer svg { flex: none; } /* 0.11.1 : les options choisies dans le résumé, sous leur œuvre : même taille que l'œuvre (12,5 px), sans gras. */ .pmj-cart .pmj-cart-mini-liste li.pmj-cart-mini-opt { margin-top: -4px; color: var(--pmj-encre-2); font-weight: 400; } .pmj-cart .pmj-cart-mini-liste li.pmj-cart-mini-opt > :first-child { grid-column: 2; } .pmj-cart .pmj-cart-mini-liste.pmj-cart-sans-image li.pmj-cart-mini-opt > :first-child { grid-column: 1; } .pmj-cart .pmj-cart-mini-liste li.pmj-cart-mini-opt > :last-child { white-space: nowrap; } /* ---------- 0.12.0 : options payantes ---------- */ /* Amélioration photo : encadré mis en valeur (maquette du 27 sept.) : fond beige uni, sans bordure, titre doré soutenu. */ .pmj-cart .pmj-cart-encadre-opt { background: var(--pmj-creme); border-radius: 8px; padding: 16px 18px; margin: 14px 0 26px; } .pmj-cart .pmj-cart-eo-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .pmj-cart .pmj-cart-eo-icone { flex: none; color: #6B4A14; } .pmj-cart h3.pmj-cart-eo-titre { flex: 1; margin: 0; font: 700 14px/1.3 var(--pmj-ui); color: #6B4A14; letter-spacing: .04em; text-transform: uppercase; } .pmj-cart .pmj-cart-eo-aide { flex: none; width: 28px; height: 28px; padding: 0; margin: 0; border: 1.5px solid #6B4A14; border-radius: 0; background: transparent; color: #6B4A14; font: 700 14px/1 Georgia, serif; cursor: pointer; box-shadow: none; } .pmj-cart .pmj-cart-eo-aide:hover, .pmj-cart .pmj-cart-eo-aide:focus-visible { background: #6B4A14; color: #fff; } .pmj-cart .pmj-cart-eo-sous { margin: 0 0 12px; font: 400 14px/1.5 var(--pmj-texte); color: var(--pmj-encre); } .pmj-cart .pmj-cart-eo-case { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--pmj-cuivre); border-radius: 4px; background: #fff; cursor: pointer; margin: 0; } .pmj-cart .pmj-cart-eo-case:hover { background: #FFFDF9; } .pmj-cart .pmj-cart-eo-case:has(input:checked) { border-color: #6B4A14; } .pmj-cart .pmj-cart-eo-case input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .pmj-cart .pmj-cart-eo-boite { flex: none; width: 20px; height: 20px; border: 2px solid #6B4A14; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #fff; font: 700 13px/1 var(--pmj-ui); } .pmj-cart .pmj-cart-eo-case input:checked + .pmj-cart-eo-boite { background: #6B4A14; } .pmj-cart .pmj-cart-eo-case input:checked + .pmj-cart-eo-boite::after { content: "✓"; } .pmj-cart .pmj-cart-eo-case input:focus-visible + .pmj-cart-eo-boite { outline: 2px solid #6B4A14; outline-offset: 2px; } .pmj-cart .pmj-cart-eo-texte { flex: 1; font: 500 14px/1.35 var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-eo-prix { flex: none; font: 700 14px var(--pmj-ui); color: #6B4A14; white-space: nowrap; } /* Certificat : la ligne « ✓ … · Modifier · Retirer » une fois ajouté. */ .pmj-cart .pmj-cart-ligne-certif { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding: 9px 12px; border: 1px solid #cfe0d4; background: #F1F7F2; border-radius: 8px; font: 400 13px/1.45 var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-lc-coche { color: var(--pmj-vert); font-weight: 700; } .pmj-cart .pmj-cart-lc-txt { flex: 1; min-width: 180px; overflow-wrap: anywhere; } .pmj-cart .pmj-cart-lc-prix { font-weight: 600; color: var(--pmj-cuivre); white-space: nowrap; } .pmj-cart .pmj-cart-ligne-certif .pmj-cart-lien { color: var(--pmj-encre-2); } /* Fenêtres (sorties du panier par pmj-cart.js) : au-dessus de tout, y compris My Sticky Bar (99990). */ html.pmj-cart-fenetre-ouverte, html.pmj-cart-fenetre-ouverte body { overflow: hidden; } .pmj-cart-couche { --pmj-encre: #1A1510; --pmj-encre-2: #534330; --pmj-gris: #9B968F; --pmj-ligne: #E4E0D8; --pmj-creme: #F5F0E8; --pmj-or: #C9A96E; --pmj-cuivre: #B4743E; --pmj-alerte-fond: #A63D2F; --pmj-titres: "Libre Baskerville", Baskerville, Georgia, serif; --pmj-ui: Poppins, "Segoe UI", Arial, sans-serif; } .pmj-cart-couche .pmj-cart-voile { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(26, 21, 16, .55); } .pmj-cart-couche .pmj-cart-voile[hidden] { display: none; } .pmj-cart-couche .pmj-cart-fenetre { position: relative; width: 100%; max-width: 620px; max-height: calc(100vh - 32px); overflow: auto; padding: 22px; background: #fff; color: var(--pmj-encre); border-radius: 12px; font: 400 14.5px/1.55 var(--pmj-titres); text-align: left; box-sizing: border-box; } .pmj-cart-couche .pmj-cart-fenetre:focus { outline: none; } .pmj-cart-couche .pmj-cart-fenetre h2 { margin: 0 0 10px; font: 400 21px/1.3 var(--pmj-titres); color: var(--pmj-encre); text-transform: none; letter-spacing: 0; } .pmj-cart-couche .pmj-cart-fenetre-fermer { float: right; width: 36px; height: 36px; margin: -8px -8px 0 8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--pmj-encre-2); font: 400 26px/36px var(--pmj-ui); cursor: pointer; box-shadow: none; } .pmj-cart-couche .pmj-cart-fenetre-fermer:hover, .pmj-cart-couche .pmj-cart-fenetre-fermer:focus-visible { background: var(--pmj-creme); color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-certif-photo { display: block; width: 100%; height: auto; border-radius: 4px; margin-bottom: 16px; } .pmj-cart-couche .pmj-cart-certif-image { position: relative; aspect-ratio: 11 / 8.5; max-height: 300px; margin: 0 auto 16px; padding: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: #FFFDF8; border: 10px double var(--pmj-or); border-radius: 4px; color: var(--pmj-encre-2); box-sizing: border-box; } .pmj-cart-couche .pmj-cart-ci-titre { font: 400 20px var(--pmj-titres); color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-ci-lib { font: 400 12px var(--pmj-ui); color: var(--pmj-gris); } .pmj-cart-couche .pmj-cart-ci-ligne { width: 60%; height: 14px; border-bottom: 1px solid #cfc8bd; } .pmj-cart-couche .pmj-cart-ci-sceau { position: absolute; right: 22px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0, #d9c9a3 35%, #b89468 70%); box-shadow: 0 0 0 2px #e6d7b5; } .pmj-cart-couche .pmj-cart-ci-temp { position: absolute; top: 8px; left: 8px; padding: 3px 8px; font: 600 10px var(--pmj-ui); letter-spacing: .06em; text-transform: uppercase; background: #FFF4D6; border: 1px dashed var(--pmj-or); color: #7a5a1f; border-radius: 4px; } .pmj-cart-couche .pmj-cart-certif-texte { margin: 0; } .pmj-cart-couche .pmj-cart-certif-prix { margin: 8px 0 14px; font: 600 15px var(--pmj-ui); color: var(--pmj-cuivre); } .pmj-cart-couche .pmj-cart-certif-form { display: grid; gap: 12px; margin: 0; } .pmj-cart-couche .pmj-cart-champ { display: grid; gap: 5px; margin: 0; font: 500 12.5px/1.3 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-champ input { width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 9px 12px; border: 1px solid #cfc8bd; border-radius: 6px; background: #fff; color: var(--pmj-encre); font: 400 15px var(--pmj-ui); box-shadow: none; } .pmj-cart-couche .pmj-cart-champ input:focus { border-color: var(--pmj-encre); outline: 2px solid rgba(26, 21, 16, .15); } .pmj-cart-couche .pmj-cart-champ input[aria-invalid="true"] { border-color: var(--pmj-alerte-fond); background: #FFF6F4; } .pmj-cart-couche .pmj-cart-oblig { color: var(--pmj-alerte-fond); } .pmj-cart-couche .pmj-cart-deux-champs { display: grid; gap: 12px; } @media (min-width: 600px) { .pmj-cart-couche .pmj-cart-deux-champs { grid-template-columns: 1fr 1fr; } } .pmj-cart-couche .pmj-cart-alerte--fenetre { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 13px; background: var(--pmj-alerte-fond); color: #fff; border-radius: 8px; font: 500 13px/1.45 var(--pmj-ui); } .pmj-cart-couche .pmj-cart-alerte--fenetre[hidden] { display: none; } .pmj-cart-couche .pmj-cart-alerte--fenetre svg { flex: none; margin-top: 1px; } .pmj-cart-couche .pmj-cart-fenetre-boutons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .pmj-cart-couche .pmj-cart-btn { flex: 1 1 200px; margin: 0; padding: 14px 18px; border: 0; border-radius: 40px; background: var(--pmj-encre); color: #fff; font: 500 13px/1.3 var(--pmj-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: none; } .pmj-cart-couche .pmj-cart-btn:hover, .pmj-cart-couche .pmj-cart-btn:focus-visible { background: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-btn-sec { flex: 0 1 auto; margin: 0; padding: 14px 20px; border: 1px solid #cfc8bd; border-radius: 40px; background: #fff; color: var(--pmj-encre); font: 500 13px/1.3 var(--pmj-ui); cursor: pointer; box-shadow: none; } .pmj-cart-couche .pmj-cart-btn-sec:hover, .pmj-cart-couche .pmj-cart-btn-sec:focus-visible { border-color: var(--pmj-encre); background: var(--pmj-creme); } /* « ? » de l'amélioration photo : fenêtre sombre (même allure que la page produit). */ .pmj-cart-couche .pmj-cart-fenetre--sombre { max-width: 600px; background: #1a1510; border: 1px solid var(--pmj-cuivre); color: #f5f0e8; font: 400 16px/1.7 Georgia, "Times New Roman", serif; } .pmj-cart-couche .pmj-cart-fenetre--sombre h2 { padding-bottom: 12px; border-bottom: 1px solid #534330; font: 700 18px/1.4 Georgia, serif; color: var(--pmj-or); text-transform: uppercase; letter-spacing: .05em; } .pmj-cart-couche .pmj-cart-fenetre--sombre b { color: var(--pmj-or); } .pmj-cart-couche .pmj-cart-fenetre--sombre p { margin: 0 0 12px; } .pmj-cart-couche .pmj-cart-fenetre--sombre ul { margin: 0 0 12px; padding-left: 22px; } .pmj-cart-couche .pmj-cart-fenetre--sombre .pmj-cart-fenetre-fermer { color: var(--pmj-or); } .pmj-cart-couche .pmj-cart-fenetre--sombre .pmj-cart-fenetre-fermer:hover, .pmj-cart-couche .pmj-cart-fenetre--sombre .pmj-cart-fenetre-fermer:focus-visible { background: #2c241b; color: var(--pmj-or); } .pmj-cart-couche .pmj-cart-note-sombre { padding-top: 12px; border-top: 1px solid #534330; font-size: 13.5px; color: #B9B3AA; } /* Téléphone : plein écran, avec défilement. */ @media (max-width: 600px) { .pmj-cart-couche .pmj-cart-voile { padding: 0; } .pmj-cart-couche .pmj-cart-fenetre { max-width: none; height: 100%; max-height: none; border-radius: 0; padding: 20px 18px 28px; } .pmj-cart-couche .pmj-cart-certif-image { padding: 26px 12px 14px; gap: 5px; } .pmj-cart-couche .pmj-cart-ci-titre { font-size: 17px; } .pmj-cart-couche .pmj-cart-ci-sceau { right: 10px; bottom: 8px; width: 34px; height: 34px; } } /* ---------- 0.13.0 : carte de remerciement ---------- */ /* Les 5 polices de la carte, hébergées par pmj-cart (licence OFL, assets/fonts/OFL-*.txt) : aucune adresse IP envoyée à Google (Loi 25). Le navigateur ne les télécharge qu'à l'ouverture de la fenêtre de la carte (seul endroit où elles servent). */ @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/dancing-script-latin-ext-500-normal.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: 500; font-display: swap; src: url('../fonts/dancing-script-latin-500-normal.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: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/great-vibes-latin-ext-400-normal.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: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/great-vibes-latin-400-normal.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: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/sacramento-latin-ext-400-normal.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: 'Sacramento'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/sacramento-latin-400-normal.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: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pacifico-latin-ext-400-normal.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: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/pacifico-latin-400-normal.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: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/caveat-latin-ext-500-normal.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: 'Caveat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/caveat-latin-500-normal.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; } /* La section, sous les œuvres (maquette du 27 sept.). */ .pmj-cart .pmj-cart-carte-merci { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; margin-top: 16px; } .pmj-cart .pmj-cart-cm-contenu { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 300px; min-width: 0; } .pmj-cart .pmj-cart-cm-icone { flex: none; color: var(--pmj-cuivre); margin-top: 2px; } .pmj-cart .pmj-cart-cm-textes { min-width: 0; } .pmj-cart .pmj-cart-carte-merci h2 { font-size: 16.5px; font-weight: 600; margin: 0 0 3px; } .pmj-cart .pmj-cart-cm-ok { margin: 0; font: 400 13px/1.45 var(--pmj-ui); color: var(--pmj-encre); overflow-wrap: anywhere; } .pmj-cart .pmj-cart-cm-coche { color: var(--pmj-vert); font-weight: 700; } .pmj-cart .pmj-cart-cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } .pmj-cart .pmj-cart-cm-actions .pmj-cart-lien { color: var(--pmj-encre-2); } @media (max-width: 859px) { .pmj-cart .pmj-cart-cm-actions { width: 100%; } .pmj-cart .pmj-cart-cm-actions .pmj-cart-btn-contour { flex: 1 1 100%; justify-content: center; padding: 11px 14px; } } /* Sous le commentaire : ne pas le confondre avec la carte. */ .pmj-cart .pmj-cart-opt-aide { margin: 6px 0 0; font: 400 12px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); } /* La fenêtre de la carte. */ .pmj-cart-couche .pmj-cart-fenetre--carte { max-width: 820px; } .pmj-cart-couche .pmj-cart-carte-grille { display: grid; gap: 20px; } @media (min-width: 720px) { .pmj-cart-couche .pmj-cart-carte-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; } } .pmj-cart-couche .pmj-cart-carte-form { display: grid; gap: 12px; margin: 0; } .pmj-cart-couche .pmj-cart-champ textarea { width: 100%; box-sizing: border-box; min-height: 140px; margin: 0; padding: 10px 12px; border: 1px solid #cfc8bd; border-radius: 6px; background: #fff; color: var(--pmj-encre); font: 400 15px/1.5 var(--pmj-ui); resize: vertical; box-shadow: none; } .pmj-cart-couche .pmj-cart-champ textarea:focus { border-color: var(--pmj-encre); outline: 2px solid rgba(26, 21, 16, .15); } .pmj-cart-couche .pmj-cart-champ textarea[aria-invalid="true"] { border-color: var(--pmj-alerte-fond); background: #FFF6F4; } .pmj-cart-couche .pmj-cart-carte-compte { margin: -6px 0 0; text-align: right; font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-carte-compte--trop { color: var(--pmj-alerte-fond); font-weight: 700; } .pmj-cart-couche .pmj-cart-carte-choix { margin: 0; padding: 0; border: 0; min-width: 0; } .pmj-cart-couche .pmj-cart-carte-choix legend { padding: 0; margin: 0 0 6px; font: 500 12.5px var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-carte-polices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } .pmj-cart-couche .pmj-cart-carte-police, .pmj-cart-couche .pmj-cart-carte-taille { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 4px; border: 1px solid var(--pmj-ligne); border-radius: 6px; background: #fff; cursor: pointer; text-align: center; margin: 0; } .pmj-cart-couche .pmj-cart-carte-police input, .pmj-cart-couche .pmj-cart-carte-taille input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .pmj-cart-couche .pmj-cart-carte-police:has(input:checked), .pmj-cart-couche .pmj-cart-carte-taille:has(input:checked) { border: 2px solid var(--pmj-encre); padding: 5px 3px; background: var(--pmj-creme); } .pmj-cart-couche .pmj-cart-carte-police:has(input:focus-visible), .pmj-cart-couche .pmj-cart-carte-taille:has(input:focus-visible) { outline: 2px solid var(--pmj-encre); outline-offset: 2px; } .pmj-cart-couche .pmj-cart-cp-aa { font-size: 24px; line-height: 1.3; color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-cp-nom { font: 400 10px/1.2 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-carte-tailles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .pmj-cart-couche .pmj-cart-carte-taille span { font: 500 12.5px/1.6 var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-carte-note { margin: 0; font: 400 12.5px/1.5 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-carte-apercu-titre { margin: 0 0 6px; font: 500 12.5px var(--pmj-ui); color: var(--pmj-encre-2); text-align: center; } .pmj-cart-couche .pmj-cart-carte-apercu { position: relative; width: 100%; max-width: 300px; aspect-ratio: 5 / 7; margin: 0 auto; padding: 26px 22px 30px; box-sizing: border-box; display: flex; background: #FFFDF8 center / cover no-repeat; border: 1px solid var(--pmj-ligne); border-radius: 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); color: #2b2217; } .pmj-cart-couche .pmj-cart-carte-apercu-txt { flex: 1; min-height: 0; overflow: hidden; display: flex; text-align: center; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.35; } .pmj-cart-couche .pmj-cart-carte-apercu-txt > span { margin: auto; max-width: 100%; } /* centré, mais un texte trop long déborde vers le bas (mesurable) */ .pmj-cart-couche .pmj-cart-carte-apercu-txt--vide { color: var(--pmj-gris); } .pmj-cart-couche .pmj-cart-carte-marque { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 400 9px var(--pmj-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--pmj-gris); } .pmj-cart-couche .pmj-cart-carte-reduit { margin: 8px auto 0; max-width: 300px; font: 400 12px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); text-align: center; } @media (max-width: 420px) { .pmj-cart-couche .pmj-cart-carte-polices { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 0.14.0 : plus d'air entre CHAQUE section du casier d'un article (demande de Ric, valeurs validées le 3 oct.) ---------- */ .pmj-cart .pmj-cart-pastilles { margin-top: 14px; } .pmj-cart .pmj-cart-diag-pp, .pmj-cart .pmj-cart-diag-famille, .pmj-cart details.pmj-cart-brut { margin-top: 12px; } .pmj-cart .pmj-cart-actions { margin-top: 20px; } .pmj-cart .pmj-cart-alerte { margin-top: 12px; } .pmj-cart .pmj-cart-boutons { margin-top: 18px; gap: 10px; } .pmj-cart .pmj-cart-ligne-certif { margin-top: 16px; } .pmj-cart .pmj-cart-options { margin-top: 24px; padding-top: 0; } .pmj-cart .pmj-cart-encadre-opt { margin: 20px 0 4px; padding: 18px 20px; } /* + 22 px de la section suivante = 26 px */ .pmj-cart .pmj-cart-section-opt { padding: 22px 2px 22px; } .pmj-cart .pmj-cart-section-opt h3 { margin-bottom: 4px; } .pmj-cart .pmj-cart-section-opt .pmj-cart-choix { margin-top: 14px; } .pmj-cart .pmj-cart-diag-option { margin: 16px 0 6px; } .pmj-cart .pmj-cart-rangee { padding: 16px 2px; } /* ---------- 0.14.0 : vérification avant paiement ---------- */ /* Un problème, juste sous son élément : même fond rouge brique que l'avertissement de stock, sans « × » (il part quand c'est corrigé). */ .pmj-cart .pmj-cart-alerte--bloque { width: auto; scroll-margin-top: 110px; } .pmj-cart .pmj-cart-alerte--bloque::before { display: none; } .pmj-cart .pmj-cart-alerte--bloque a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .pmj-cart .pmj-cart-alerte--bloque:focus { outline: 3px solid rgba(166, 61, 47, .35); outline-offset: 2px; } .pmj-cart .pmj-cart-cm-probleme { flex: 1 1 100%; } .pmj-cart .pmj-cart-cm-probleme .pmj-cart-alerte { margin-top: 0; } .pmj-cart #pmj-cart-livraison { scroll-margin-top: 110px; } /* La liste près de « Passer au paiement ». */ .pmj-cart .pmj-cart-a-corriger { margin: 12px 0 0; padding: 11px 14px 12px; background: var(--pmj-alerte-fond); color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(166, 61, 47, .25); font: 500 13px/1.45 var(--pmj-ui); } .pmj-cart .pmj-cart-ac-titre { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; font-weight: 600; } .pmj-cart .pmj-cart-ac-titre svg { flex: none; } .pmj-cart .pmj-cart-a-corriger ul { margin: 0; padding: 0 0 0 22px; list-style: disc; } .pmj-cart .pmj-cart-a-corriger li { margin: 3px 0 0; } .pmj-cart .pmj-cart-a-corriger a { display: block; padding: 2px 0; color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* toute la ligne est cliquable, même quand le texte passe à la ligne */ .pmj-cart .pmj-cart-a-corriger a:hover, .pmj-cart .pmj-cart-a-corriger a:focus { text-decoration-thickness: 2px; color: #fff; } /* Le rappel dans la barre collée (téléphone). */ .pmj-cart .pmj-cart-bm-corriger { display: flex; align-items: center; gap: 7px; width: 100%; margin: 0 0 8px; padding: 7px 10px; border: 0; border-radius: 6px; background: var(--pmj-alerte-fond); color: #fff; font: 600 12.5px/1.3 var(--pmj-ui); text-align: left; cursor: pointer; box-shadow: none; } .pmj-cart .pmj-cart-bm-corriger svg { flex: none; } /* ---------- 0.14.1 : précision de Ric (proposition-espacement-0141, approuvée le 3 oct.) ---------- Doubler l'espace AU-DESSUS et AU-DESSOUS de 4 sections SEULEMENT ; tous les autres espacements de la 0.14.0 restent. */ .pmj-cart .pmj-cart-encadre-opt { margin-top: 40px; margin-bottom: 8px; } /* 1. amélioration photo : 20 → 40 ; 4 → 8 */ .pmj-cart .pmj-cart-options { margin-top: 48px; margin-bottom: 20px; } /* 2. bloc des options : 24 → 48 ; 0 → 20 (+ 20 du bord = 40) */ .pmj-cart .pmj-cart-section-opt { padding-top: 44px; padding-bottom: 44px; } /* 3. bordure blanche / épaisseur : 22 → 44 */ .pmj-cart .pmj-cart-rangee { padding-top: 32px; padding-bottom: 32px; } /* 4. commentaire ou référence : 16 → 32 */ /* ---------- 0.14.2 : livraison, option B (proposition-livraison-logos, choisie le 3 oct.) ---------- Méthodes empilées, une rangée pleine largeur chacune (comme l'exemple Pictorem) ; mention des transporteurs en texte, sans logo. */ .pmj-cart .pmj-cart-cartes-liv { grid-template-columns: minmax(0, 1fr) !important; } .pmj-cart .pmj-cart-carte-liv { padding: 16px 18px; } .pmj-cart .pmj-cart-carte-liv:has(input:checked) { padding: 15px 17px; } .pmj-cart .pmj-cart-liv-transporteurs { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 400 12.5px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-liv-transporteurs svg { flex: none; color: var(--pmj-cuivre); } /* ---------- 0.15.0 : date d'expédition (maquette du 27 sept. ; R9 / R10 : phrase 13 px, date ou nombre de jours en gras à 14,5 px, interligne fixe 21 px) ---------- */ .pmj-cart .pmj-cart-date-exp { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; margin-top: 16px; } .pmj-cart .pmj-cart-de-icone { flex: none; color: var(--pmj-or); margin-top: 2px; } .pmj-cart .pmj-cart-date-exp h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; } .pmj-cart .pmj-cart-ligne-date { margin: 0 0 4px; font: 400 13px/21px var(--pmj-texte); color: var(--pmj-encre); } .pmj-cart .pmj-cart-ligne-date b { font-weight: 700; font-size: 14.5px; line-height: 1; } .pmj-cart .pmj-cart-de-note { margin: 6px 0 0; } /* « Vous recevrez un aperçu avant impression à approuver » : sous chaque œuvre personnalisée. */ .pmj-cart .pmj-cart-info-apercu { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font: 500 12.5px/1.4 var(--pmj-ui); color: var(--pmj-vert); } .pmj-cart .pmj-cart-info-apercu svg { flex: none; } /* ---------- 0.17.0 : signaux de confiance, rappel courriel, « Besoin d'aide ? » et FAQ (maquette du 27 sept.) ---------- */ .pmj-cart .pmj-cart-confiance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px; } .pmj-cart .pmj-cart-signal { display: grid; grid-template-columns: 26px 1fr; gap: 8px; font: 400 12.5px/1.35 var(--pmj-ui); color: var(--pmj-encre-2); text-decoration: none; } .pmj-cart .pmj-cart-signal svg { color: var(--pmj-or); } .pmj-cart .pmj-cart-signal b { display: block; font-size: 13px; font-weight: 600; color: var(--pmj-encre); } .pmj-cart a.pmj-cart-signal:hover b, .pmj-cart a.pmj-cart-signal:focus-visible b { text-decoration: underline; text-underline-offset: 3px; } .pmj-cart .pmj-cart-rappel-courriel { margin: 10px 0 0; font: 400 11.5px/1.45 var(--pmj-ui); color: var(--pmj-encre-2); text-align: center; } .pmj-cart .pmj-cart-aide { max-width: 1240px; margin: 24px auto 0; padding: 22px 0 8px; display: grid; gap: 22px; border-top: 1px solid var(--pmj-ligne); scroll-margin-top: 90px; } /* 0.20.3 (vrai iPhone de Ric, D5) : « Besoin d'aide ? » est hors de la grille du panier (qui donne leur marge de 16 px aux autres sections) : il touchait les bords de l'écran. Même marge que le reste du panier, sur téléphone seulement. (Placé APRÈS la règle de base, qui sinon l'emporterait.) */ @media (max-width: 859px) { .pmj-cart .pmj-cart-aide { padding-left: 16px; padding-right: 16px; } } .pmj-cart .pmj-cart-aide h2 { margin: 0 0 6px; font: 600 20px/1.3 var(--pmj-titres); color: var(--pmj-encre); } .pmj-cart .pmj-cart-aide-phrase { margin: 0; font: 400 14px/1.55 var(--pmj-texte); color: var(--pmj-encre); } .pmj-cart .pmj-cart-aide-courriel { margin: 12px 0 0; font: 400 13.5px/1.5 var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-aide-courriel a { color: var(--pmj-encre); font-weight: 700; text-underline-offset: 3px; overflow-wrap: anywhere; } .pmj-cart .pmj-cart-aide-liens { margin: 8px 0 0; font: 400 12px/1.5 var(--pmj-ui); color: var(--pmj-gris); } .pmj-cart .pmj-cart-aide-liens a { color: #6b655c; text-underline-offset: 2px; } .pmj-cart .pmj-cart-aide-liens a:hover { color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-faq h3 { margin: 0 0 8px; font: 600 16px/1.3 var(--pmj-titres); color: var(--pmj-encre); } .pmj-cart .pmj-cart-faq-q { border-bottom: 1px solid var(--pmj-ligne); } .pmj-cart .pmj-cart-faq-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; min-height: 44px; box-sizing: border-box; font: 500 13.5px/1.4 var(--pmj-ui); color: var(--pmj-encre); } .pmj-cart .pmj-cart-faq-q summary::-webkit-details-marker { display: none; } .pmj-cart .pmj-cart-faq-q summary::after { content: "+"; flex: none; font-size: 18px; line-height: 1; color: var(--pmj-cuivre); } .pmj-cart .pmj-cart-faq-q[open] summary::after { content: "−"; } .pmj-cart .pmj-cart-faq-q p { margin: 0 0 14px; font: 400 13px/1.6 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart .pmj-cart-faq-tout { margin: 12px 0 0; font: 400 12.5px/1.5 var(--pmj-ui); } .pmj-cart .pmj-cart-faq-tout a { color: var(--pmj-encre-2); text-underline-offset: 3px; } .pmj-cart .pmj-cart-aide-reseaux b { display: block; margin-bottom: 8px; font: 400 15px/1.3 var(--pmj-titres); color: var(--pmj-encre); } .pmj-cart .pmj-cart-reseaux { display: flex; gap: 10px; } .pmj-cart .pmj-cart-reseaux a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pmj-ligne); display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--pmj-encre); transition: color .15s, border-color .15s; } .pmj-cart .pmj-cart-reseaux a:hover, .pmj-cart .pmj-cart-reseaux a:focus-visible { color: var(--pmj-or); border-color: var(--pmj-or); } @media (min-width: 900px) { .pmj-cart .pmj-cart-aide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: start; gap: 40px; } } /* ---------- 0.17.1 : rappel courriel sous « Service d'amélioration photo » (case cochée), en VERT : une information, pas une erreur ---------- */ .pmj-cart .pmj-cart-eo-courriel { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--pmj-vert); background: #EEF4EF; border-radius: 4px; font: 500 12.5px/1.45 var(--pmj-ui); color: var(--pmj-vert); } .pmj-cart .pmj-cart-eo-courriel svg { flex: none; margin-top: 1px; } /* ---------- 0.17.2 : boutons « Nous contacter » / « Clavarder avec nous » et fenêtre Contact (maquette du 27 sept.) ---------- */ .pmj-cart .pmj-cart-aide-boutons { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; } .pmj-cart .pmj-cart-btn-contour { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 11px 14px; border: 1.5px solid var(--pmj-encre); border-radius: 6px; background: #fff; color: var(--pmj-encre); font: 500 13.5px/1.2 var(--pmj-ui); cursor: pointer; } .pmj-cart .pmj-cart-btn-contour:hover, .pmj-cart .pmj-cart-btn-contour:focus-visible { background: var(--pmj-encre); color: #fff; } .pmj-cart .pmj-cart-btn-contour[hidden] { display: none; } @media (min-width: 600px) { .pmj-cart .pmj-cart-aide-boutons { flex-direction: row; flex-wrap: wrap; } .pmj-cart .pmj-cart-btn-contour { width: auto; } } /* La bulle du chatbot est fixe en bas à droite : de la place sous la section, pour que sa fin ne soit jamais dessous. */ .pmj-cart .pmj-cart-aide { padding-bottom: 84px; } .pmj-cart-couche .pmj-cart-fenetre--contact { max-width: 580px; } .pmj-cart-couche .pmj-cart-contact-phrase { margin: 0 0 4px; font: 400 13px/1.5 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-contact-sujets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 12px; padding: 0; border: 0; min-width: 0; } .pmj-cart-couche .pmj-cart-contact-sujets legend { grid-column: 1 / -1; padding: 0; margin: 0 0 6px; font: 500 12px var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-contact-sujet { position: relative; display: block; cursor: pointer; } .pmj-cart-couche .pmj-cart-contact-sujet input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pmj-cart-couche .pmj-cart-contact-sujet > span { display: flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box; padding: 9px 10px; border: 1.5px solid var(--pmj-ligne); border-radius: 8px; background: #fff; font: 500 12.5px/1.3 var(--pmj-ui); color: var(--pmj-encre-2); } .pmj-cart-couche .pmj-cart-contact-sujet > span svg { flex: none; } .pmj-cart-couche .pmj-cart-contact-sujet input:checked + span { border-color: var(--pmj-encre); background: var(--pmj-creme); color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-contact-sujet input:focus-visible + span { outline: 2px solid var(--pmj-or); outline-offset: 2px; } .pmj-cart-couche .pmj-cart-contact-form textarea { width: 100%; min-height: 110px; box-sizing: border-box; } .pmj-cart-couche .pmj-cart-contact-err { display: block; margin-top: 4px; font: 500 12px/1.4 var(--pmj-ui); color: #A63D2F; } .pmj-cart-couche .pmj-cart-contact-form [aria-invalid="true"] { border-color: #A63D2F !important; box-shadow: 0 0 0 1px #A63D2F; } .pmj-cart-couche .pmj-cart-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .pmj-cart-couche .pmj-cart-contact-joint { margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--pmj-or); border-radius: 8px; background: #FFFCF5; font: 400 12.5px/1.45 var(--pmj-ui); } .pmj-cart-couche .pmj-cart-contact-joint summary { cursor: pointer; font-weight: 500; color: var(--pmj-encre); } .pmj-cart-couche .pmj-cart-contact-joint ul { margin: 8px 0 6px; padding-left: 18px; } .pmj-cart-couche .pmj-cart-contact-joint li { margin: 2px 0; overflow-wrap: anywhere; } .pmj-cart-couche .pmj-cart-contact-succes { text-align: center; padding: 8px 0 4px; } .pmj-cart-couche .pmj-cart-contact-succes[hidden], .pmj-cart-couche .pmj-cart-contact-form[hidden] { display: none; } .pmj-cart-couche .pmj-cart-coche-ronde { width: 52px; height: 52px; border-radius: 50%; background: #EAF1EC; color: var(--pmj-vert); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 8px; } .pmj-cart-couche .pmj-cart-contact-numero { display: inline-block; margin: 6px 0 10px; padding: 10px 16px; border: 1px dashed var(--pmj-or); border-radius: 8px; background: var(--pmj-creme); font: 600 22px var(--pmj-ui); letter-spacing: .08em; color: var(--pmj-encre); } @media (max-width: 420px) { .pmj-cart-couche .pmj-cart-contact-sujets { grid-template-columns: 1fr; } } /* ---------- 0.19.0 : « Bilan de cohabitation » (administrateur, ?pmj_bilan=1) ---------- */ .pmj-cart-bilan { max-width: 1240px; margin: 0 auto 16px; padding: 14px 18px; border: 1px dashed var(--pmj-or, #C9A96E); border-radius: 8px; background: #FFFCF5; font: 400 13px/1.5 Poppins, "Segoe UI", Arial, sans-serif; color: #1A1510; box-sizing: border-box; } .pmj-cart-bilan h2 { margin: 0 0 8px; font: 600 16px/1.3 "Libre Baskerville", Georgia, serif; } .pmj-cart-bilan ul { margin: 0 0 12px; padding: 0; list-style: none; } .pmj-cart-bilan li { margin: 4px 0; overflow-wrap: anywhere; } .pmj-cart-bilan li.pb { color: #A63D2F; font-weight: 500; } .pmj-cart-bilan button { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 6px; background: #1A1510; color: #fff; font: 600 13.5px/1.2 Poppins, Arial, sans-serif; cursor: pointer; } .pmj-cart-bilan textarea { width: 100%; min-height: 160px; margin-top: 8px; }