*/ p.alert-success, p.alert-warning, p.alert-info { font-weight: 500; } /* Fenêtre « Vous devez accepter les conditions générales de vente » (transport) : le texte était sur une seule ligne, coupé à droite. */ .fancybox-error { white-space: normal; font-family: "Jost", "Segoe UI", sans-serif; font-size: 15px; color: #4a302d; padding: 6px 4px; } /* ══ 2. TABLEAU DU PANIER, 992 → 1259 px ════════════════════════════════════════════ Le tableau tient : on garde ses colonnes, seule la pastille verte « Disponible » devient un texte discret (même chose dans les cartes en dessous de 992). */ #order-detail-content #cart_summary td.cart_avail .label { background: none; border: 0; padding: 0; color: #6b7a4f; text-shadow: none; font-family: "Jost", "Segoe UI", sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; } #order-detail-content #cart_summary td.cart_avail .label-available_later { color: #9a4a3a; } } /* ══ 3. PANIER EN CARTES, sous 992 px (tablette en hauteur et téléphone) ══════════════════ À 768 px le tableau d'origine dépassait de son cadre (colonne « supprimer » et totaux rognés, défilement interne) ; sous 768, le thème empilait tout (vignette seule sur sa ligne, pastille verte, champ quantité gris pleine largeur, +/− dessous, « Delete »). Chaque produit devient une carte, comme sur la PS9 : ┌────────┬───────────────────────────────┐ │ image │ Nom du produit │ │ │ Réf. · déclinaison │ │ │ Disponible │ │ │ 12,00 € l'unité 24,00 € │ ├────────┴───────────────────────────────┤ │ [−][ 2 ][+] 🗑 Supprimer │ └────────────────────────────────────────┘ Puis le récapitulatif (Total produits, port, TOTAL) et le bouton « Commander » pleine largeur. Même dessin sur la page « paiement » (quantité non modifiable, pas de suppression). CSS seulement : les identifiants et classes lus par cart-summary.js (mise à jour ajax des quantités, prix et totaux, suppression de ligne) sont intacts. */ @media (max-width: 991px) { #order-detail-content.table_block:has(> #cart_summary) { overflow: visible; border: 0; margin-bottom: 18px; } #order-detail-content #cart_summary, #order-detail-content #cart_summary > tbody, #order-detail-content #cart_summary > tfoot { display: block; width: 100%; border: 0; background: none; } /* le tableau devient une colonne : produits (tbody) d'abord, récapitulatif (tfoot) ensuite (dans le code HTML, tfoot vient avant tbody) */ #order-detail-content #cart_summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; font-family: "Jost", "Segoe UI", sans-serif; } #order-detail-content #cart_summary > tbody { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #order-detail-content #cart_summary > tfoot { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } #order-detail-content #cart_summary > thead { display: none; } /* — la carte produit — */ #order-detail-content #cart_summary tbody tr.cart_item { display: -ms-grid; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "img desc desc" "img avail avail" "img unit total" "qty qty del"; -webkit-column-gap: 12px; column-gap: 12px; row-gap: 2px; background: #fff; border: 1px solid rgba(94, 63, 59, .18); border-radius: 0; padding: 12px; margin: 0 0 10px; overflow: visible; } #order-detail-content #cart_summary tbody tr.cart_item > td { display: block; float: none; width: auto; min-width: 0; position: static; border: 0; padding: 0; background: none; text-align: left; white-space: normal; overflow-wrap: break-word; word-wrap: break-word; } #order-detail-content #cart_summary tbody tr.cart_item > td:before { content: none; display: none; } #order-detail-content #cart_summary tr.cart_item td.cart_product { grid-area: img; -ms-grid-row-span: 3; } #order-detail-content #cart_summary tr.cart_item td.cart_product img { width: 76px; height: auto; max-width: none; border: 1px solid rgba(94, 63, 59, .12); display: block; } #order-detail-content #cart_summary tr.cart_item td.cart_description { grid-area: desc; } #order-detail-content #cart_summary tr.cart_item td.cart_description .product-name { margin: 0 0 2px; font-size: 16px; line-height: 1.25; font-weight: 500; } #order-detail-content #cart_summary tr.cart_item td.cart_description .product-name a { color: #4a302d; } #order-detail-content #cart_summary tr.cart_item td.cart_description small { display: block; font-size: 13px; line-height: 1.35; color: #625d52; } #order-detail-content #cart_summary tr.cart_item td.cart_description small a { color: #625d52; } #order-detail-content #cart_summary tr.cart_item td.cart_avail { grid-area: avail; margin-top: 2px; } #order-detail-content #cart_summary tr.cart_item td.cart_unit { grid-area: unit; -ms-flex-item-align: end; align-self: end; margin-top: 4px; } #order-detail-content #cart_summary tr.cart_item td.cart_unit .price, #order-detail-content #cart_summary tr.cart_item td.cart_unit .price span { font-size: 14px; color: #625d52; text-align: left; font-weight: 400; } #order-detail-content #cart_summary tr.cart_item td.cart_unit > .price > .price:after { content: " l\2019 unit\E9"; } #order-detail-content #cart_summary tr.cart_item td.cart_unit .old-price { display: inline; margin-left: 6px; font-size: 13px; } #order-detail-content #cart_summary tr.cart_item td.cart_unit .price-percent-reduction { display: inline-block; margin-left: 4px; } #order-detail-content #cart_summary tr.cart_item td.cart_total { grid-area: total; -ms-flex-item-align: end; align-self: end; text-align: right; margin-top: 4px; } #order-detail-content #cart_summary tr.cart_item td.cart_total .price { font-size: 17px; font-weight: 600; color: #4a302d; text-align: right; white-space: nowrap; } /* — quantité : [−] [champ] [+] sur une ligne, sous l'image — */ #order-detail-content #cart_summary tr.cart_item td.cart_quantity { grid-area: qty; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 12px; font-size: 15px; color: #4a302d; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity div.cart_quantity_button { display: contents; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .cart_quantity_input { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; width: 52px !important; height: 40px; margin: 0; padding: 0 4px; float: none !important; background: #fff; border: 1px solid #807b71; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; text-align: center; font-family: inherit; font-size: 16px; color: #4a302d; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-plus { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus, #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-plus { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; float: none; width: 40px; height: 40px; margin: 0; padding: 0; background: #fff; background: linear-gradient(to bottom, #ffffff, #e4e7e0); border: 1px solid #807b71; border-radius: 0; color: #553f3b; box-shadow: none; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus span, #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-plus span { display: block; width: auto; height: auto; padding: 0; border: 0; background: none; line-height: 1; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus i, #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-plus i { font-size: 14px; color: #553f3b; line-height: 1; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus:hover, #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-plus:hover { border-color: #5e3f3b; background: #eef0eb; } #order-detail-content #cart_summary tr.cart_item td.cart_quantity .button-minus.disabled { opacity: .45; } /* page « paiement » : quantité non modifiable (simple nombre) */ #order-detail-content #cart_summary tr.cart_item td.cart_quantity > span:only-child:before { content: "Quantit\E9 : "; color: #625d52; } /* — suppression : icône + mot « Supprimer » (title du lien, déjà traduit) — */ #order-detail-content #cart_summary tr.cart_item td.cart_delete { grid-area: del; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-top: 12px; } #order-detail-content #cart_summary tr.cart_item td.cart_delete > div { display: block; } #order-detail-content #cart_summary tr.cart_item td.cart_delete a.cart_quantity_delete { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 40px; padding: 0 2px; color: #5e3f3b; font-size: 15px; text-decoration: none; } #order-detail-content #cart_summary tr.cart_item td.cart_delete a.cart_quantity_delete i { font-size: 18px; margin-right: 6px; color: #5e3f3b; } #order-detail-content #cart_summary tr.cart_item td.cart_delete a.cart_quantity_delete:after { content: attr(title); border-bottom: 1px solid rgba(94, 63, 59, .35); line-height: 1.2; } #order-detail-content #cart_summary tr.cart_item td.cart_delete a.cart_quantity_delete:hover:after { border-bottom-color: #5e3f3b; } /* page « paiement » : pas de suppression → la ligne quantité prend toute la largeur */ #order-detail-content #cart_summary tr.cart_item:not(:has(> td.cart_delete)) td.cart_quantity { grid-column: 1 / -1; } /* lignes de bons de réduction (désactivés aujourd'hui) : simple ligne libellé / montant */ #order-detail-content #cart_summary tbody tr.cart_discount { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background: #fff; border: 1px solid rgba(94, 63, 59, .18); padding: 10px 12px; margin: 0 0 10px; } #order-detail-content #cart_summary tbody tr.cart_discount > td { display: block; float: none; width: auto; border: 0; padding: 0 4px; } #order-detail-content #cart_summary tbody tr.cart_discount > td:before { display: none; } #order-detail-content #cart_summary tbody tr.cart_discount td.cart_discount_delete, #order-detail-content #cart_summary tbody tr.cart_discount td.cart_discount_price:nth-child(2) { display: none; } /* — récapitulatif (tfoot) : libellé à gauche, montant à droite — */ #order-detail-content #cart_summary > tfoot { background: #fff; border: 1px solid rgba(94, 63, 59, .18); padding: 4px 12px; margin-top: 4px; } #order-detail-content #cart_summary > tfoot tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; border: 0; border-bottom: 1px solid rgba(94, 63, 59, .12); padding: 8px 0; } #order-detail-content #cart_summary > tfoot tr[style*="none"] { display: none; } #order-detail-content #cart_summary > tfoot tr:last-child { border-bottom: 0; } #order-detail-content #cart_summary > tfoot td { display: block; float: none !important; width: auto !important; border: 0; padding: 0; background: none !important; white-space: normal; font-family: "Jost", "Segoe UI", sans-serif; font-size: 15px; font-weight: 400; color: #625d52; text-align: left; } #order-detail-content #cart_summary > tfoot td:before { display: none; } #order-detail-content #cart_summary > tfoot td.price { text-align: right; color: #4a302d; white-space: nowrap; padding-left: 12px; } /* cellule « bons de réduction » (rowspan) : vide quand les bons sont désactivés */ #order-detail-content #cart_summary > tfoot td#cart_voucher { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #order-detail-content #cart_summary > tfoot td#cart_voucher:not(:has(form)) { display: none; } #order-detail-content #cart_summary > tfoot td.total_price_container span, #order-detail-content #cart_summary > tfoot td.total_price_container { font-family: "Jost", "Segoe UI", sans-serif; font-size: 17px; font-weight: 600; color: #4a302d; text-transform: uppercase; letter-spacing: .06em; } #order-detail-content #cart_summary > tfoot td#total_price_container, #order-detail-content #cart_summary > tfoot td#total_price_container span { font-family: "Jost", "Segoe UI", sans-serif; font-size: 21px; font-weight: 600; color: #4a302d; } /* — boutons sous le panier : « Commander » pleine largeur, « Continuer mes achats » dessous — */ #order .cart_navigation, #order-opc .cart_navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 6px 0 20px; } #order .cart_navigation:before, #order .cart_navigation:after { display: none; } #order .cart_navigation > .button-medium, #order .cart_navigation > button.button-medium { float: none; width: 100%; margin: 0 0 12px; text-align: center; -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; /* aux étapes adresse/transport, il vient après le lien */ } #order .cart_navigation > .button-medium span { display: block; font-size: 18px; padding: 11px 15px 11px; } #order .cart_navigation > .button-exclusive { float: none; -ms-flex-item-align: center; align-self: center; margin: 0; padding: 8px 4px; font-family: "Jost", "Segoe UI", sans-serif; font-size: 16px; color: #5e3f3b; } #order .cart_navigation .mf_15minimum { -webkit-box-ordinal-group: -1; -ms-flex-order: -2; order: -2; } } /* ══ 4. AUTRES PAGES DU PARCOURS (sous 1260 px) ════════════════════════════════════════ */ @media (max-width: 1259px) { /* Identité : le texte « Conformément à la loi… » se coinçait à gauche du bouton « Enregistrer » */ #identity .std .form-group:has(> button) { overflow: hidden; } /* Identité, création de compte, adresse — tablette : libellés devant des champs de longueurs inégales (en escalier) → libellé au-dessus, champs d'une même largeur (comme au téléphone et sur la page contact). */ #identity .std .form-group > label, #account-creation_form .form-group > label, #add_address .form-group > label { display: block; float: none; width: auto; text-align: left; } #identity .std .form-group > .form-control, #account-creation_form .form-group > .form-control, #add_address .form-group > .form-control, #add_address .form-group > textarea { display: block; max-width: 460px; } #account-creation_form .form-group .form_info { display: block; margin-top: 2px; } #identity #security_informations { clear: both; text-align: left; margin-top: 10px; font-size: 13px; } /* Détail d'une commande : tableau des produits plus large que l'écran (849 px pour 712 à 768 px) → libellés à la ligne ; tableau du transport qui sortait de la page à 360 px. */ #order-detail #order-detail-content table td, #order-detail #order-detail-content table th, #order-detail table.footab td, #order-detail table.footab th { white-space: normal; word-wrap: break-word; } } @media (max-width: 767px) { /* Détail d'une commande au téléphone : les tableaux défilent dans leur cadre, jamais la page */ #order-detail table.footab { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Formulaires « Identité » et adresse : bouton d'envoi pleine largeur, comme « Envoyer » */ #identity .std .form-group > button.button-medium, #address #submitAddress { float: none; width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } } /* ══ 5. FENÊTRE « PRODUIT AJOUTÉ AU PANIER » (#layer_cart), sous 768 px ═══════════════════ Elle n'apparaît que si le panier AJAX est activé au BO (module « Bloc panier » → « Panier Ajax : Oui », réglage PS_BLOCK_CART_AJAX, aujourd'hui à Non en production : voir LIVRAISON.md du lot 6). Au téléphone, la fenêtre d'origine faisait plus d'un écran de haut (grande image, gros titres) et ses boutons « Commander / Continuer » étaient sous le bord. Ici : fenêtre fixée en haut de l'écran, image réduite à côté du nom, boutons pleine largeur visibles sans défiler. Sans effet tant que l'AJAX reste coupé. */ @media (max-width: 767px) { #layer_cart { position: fixed !important; top: 8px !important; left: 8px !important; right: 8px !important; width: auto !important; margin: 0 !important; max-height: calc(100vh - 16px); overflow-y: auto; border-radius: 0; font-family: "Jost", "Segoe UI", sans-serif; color: #4a302d; } #layer_cart .layer_cart_product, #layer_cart .layer_cart_cart, #layer_cart > .clearfix > .layer_cart_cart { position: static; float: none; width: auto; min-height: 0; padding: 14px 14px 10px; border: 0; } #layer_cart .layer_cart_product .layer_cart_product_info > div { padding-bottom: 2px; } #layer_cart .layer_cart_cart { border-top: 1px solid rgba(94, 63, 59, .15); background: #f5f3ee; } #layer_cart .layer_cart_product h2 { font-family: inherit; font-size: 17px; line-height: 1.3; font-weight: 500; color: #4a302d; margin: 0 30px 12px 0; padding: 0; } #layer_cart .layer_cart_product h2 i { color: #6b7a4f; font-size: 18px; margin-right: 6px; } #layer_cart .layer_cart_product .product-image-container.layer_cart_img { float: left; width: 76px; margin: 0 12px 6px 0; padding: 0; border: 1px solid rgba(94, 63, 59, .12); } #layer_cart .layer_cart_img img { width: 100%; height: auto; display: block; } #layer_cart .layer_cart_product .layer_cart_product_info { padding: 0; overflow: hidden; font-size: 14px; line-height: 1.4; } #layer_cart .layer_cart_product .layer_cart_product_info #layer_cart_product_title { font-size: 16px; color: #4a302d; display: block; margin-bottom: 2px; } #layer_cart .layer_cart_cart h2, #layer_cart .layer_cart_cart h2 { font-family: inherit; font-size: 16px; line-height: 1.3; font-weight: 500; color: #4a302d; margin: 0 0 8px; padding: 0; border: 0; } #layer_cart .layer_cart_row { font-size: 14px; padding: 2px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #layer_cart .layer_cart_row strong { font-weight: 400; color: #625d52; } #layer_cart .layer_cart_cart .button-container { position: static; width: auto; padding: 12px 0 2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } #layer_cart .button-container .btn { float: none; width: 100%; margin: 0 0 8px; text-align: center; } #layer_cart .button-container .button-medium span { display: block; font-size: 17px; padding: 10px 12px; } #layer_cart .button-container .continue { background: none; border: 0; box-shadow: none; color: #5e3f3b; font-size: 16px; padding: 8px 4px; } #layer_cart .button-container .continue span { border: 0; background: none; padding: 0; color: #5e3f3b; } #layer_cart .cross { top: 8px; right: 8px; } #layer_cart .crossseling { display: none; } }