/* ===================================================================== Panier, commande et espace client — harmonisation avec le style du site (Oswald, textes #666, titres #222, accent saumon #de8f83, cadres fins #e1e1e1). Chargé uniquement sur ces pages (enfold-child/functions.php). 04/10/2026 — Johnny Lo ===================================================================== */ /* ---------- Base commune ---------- */ #top.woocommerce-checkout .main_color, #top.woocommerce-cart .main_color, #top.woocommerce-account .main_color { font-family: oswald, Helvetica, Arial, sans-serif; } #top.woocommerce-checkout .template-page.content, #top.woocommerce-cart .template-page.content, #top.woocommerce-account .template-page.content { padding-top: 50px; padding-bottom: 50px; } /* La règle globale « prix en 30 px » (CSS rapide, prévue pour la fiche produit) ne s'applique pas ici */ #top.woocommerce-checkout .price, #top.woocommerce-checkout .price span, #top.woocommerce-checkout .amount, #top.woocommerce-checkout del, #top.woocommerce-checkout ins, #top.woocommerce-cart .price, #top.woocommerce-cart .price span, #top.woocommerce-cart .amount, #top.woocommerce-cart del, #top.woocommerce-cart ins, #top.woocommerce-account .price, #top.woocommerce-account .price span, #top.woocommerce-account .amount, #top.woocommerce-account del, #top.woocommerce-account ins { font-size: inherit !important; line-height: inherit; font-weight: inherit; } #top.woocommerce-account del, #top.woocommerce-checkout del { color: #aaa; } #top.woocommerce-account ins, #top.woocommerce-checkout ins { text-decoration: none; } /* Titres */ #top.woocommerce-account .woocommerce h2, #top.woocommerce-account .woocommerce h3, #top.woocommerce-account .woocommerce legend, #top.woocommerce-checkout .wc-block-components-checkout-step__title, #top.woocommerce-checkout .wc-block-components-title, #top.woocommerce-checkout .woocommerce h2, #top.woocommerce-checkout .woocommerce h3 { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 26px; line-height: 1.3; font-weight: 300; letter-spacing: .5px; color: #222; text-transform: none; margin: 0 0 18px; padding: 0; border: 0; } /* Textes courants */ #top.woocommerce-account .woocommerce-MyAccount-content, #top.woocommerce-account .woocommerce-MyAccount-content p, #top.woocommerce-account .woocommerce address, #top.woocommerce-checkout .wc-block-checkout, #top.woocommerce-checkout .wc-block-checkout p { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.65; color: #666; font-style: normal; } #top.woocommerce-account .woocommerce-MyAccount-content a:not(.button), #top.woocommerce-checkout .wc-block-checkout a:not(.wc-block-components-button) { color: #de8f83; text-decoration: none; } #top.woocommerce-account .woocommerce-MyAccount-content a:not(.button):hover, #top.woocommerce-checkout .wc-block-checkout a:not(.wc-block-components-button):hover { color: #222; } #top.woocommerce-account mark { background: none; color: #222; font-weight: 400; } /* ---------- Boutons : même style que la fiche produit ---------- */ #top.woocommerce-account .woocommerce .button, #top.woocommerce-account .woocommerce button[type="submit"], #top.woocommerce-account .woocommerce input[type="submit"], #top.woocommerce-cart .woocommerce .button, #top.woocommerce-checkout .wc-block-components-checkout-place-order-button, #top.woocommerce-checkout .woocommerce .button, #top.woocommerce-cart .wc-block-cart__submit-button { display: inline-block; width: auto; height: auto; min-height: 0; margin: 0; padding: 15px 38px; font-family: oswald, Helvetica, Arial, sans-serif; font-size: 16px !important; line-height: 1.2; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #fff !important; background: #de8f83 !important; border: 0 !important; border-radius: 3px; box-shadow: none; transition: background-color .25s ease; } #top.woocommerce-account .woocommerce .button:hover, #top.woocommerce-account .woocommerce button[type="submit"]:hover, #top.woocommerce-cart .woocommerce .button:hover, #top.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover, #top.woocommerce-checkout .woocommerce .button:hover { background: #222 !important; } #top.woocommerce-checkout .wc-block-components-checkout-place-order-button { width: 100%; padding: 18px 38px; } #top.woocommerce-checkout .wc-block-components-checkout-place-order-button .wc-block-components-button__text { font-size: 17px; letter-spacing: 2px; } /* Petits boutons dans les tableaux (Voir, Télécharger) : contour */ #top.woocommerce-account .woocommerce table .button { padding: 9px 22px; font-size: 14px !important; letter-spacing: 1.5px; background: transparent !important; color: #de8f83 !important; border: 1px solid #de8f83 !important; } #top.woocommerce-account .woocommerce table .button:hover { background: #de8f83 !important; color: #fff !important; } /* ---------- Champs de formulaire ---------- */ #top.woocommerce-account .woocommerce form .form-row label, #top.woocommerce-account .woocommerce form label, #top.woocommerce-checkout .wc-block-components-text-input label, #top.woocommerce-checkout .wc-block-components-combobox label, #top.woocommerce-checkout .wc-block-components-country-input label, #top.woocommerce-checkout .wc-block-components-state-input label { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 400; color: #666; letter-spacing: .3px; } #top.woocommerce-account .woocommerce form .input-text, #top.woocommerce-account .woocommerce form select, #top.woocommerce-account .woocommerce form textarea, #top.woocommerce-account .select2-container .select2-selection--single, #top.woocommerce-checkout .wc-block-components-text-input input, #top.woocommerce-checkout .wc-block-components-combobox .components-combobox-control input, #top.woocommerce-checkout .wc-block-components-select select, #top.woocommerce-checkout .wc-block-components-textarea { font-family: oswald, Helvetica, Arial, sans-serif !important; font-size: 17px !important; color: #222 !important; background: #fff !important; border: 1px solid #e1e1e1 !important; border-radius: 3px !important; box-shadow: none !important; } #top.woocommerce-account .woocommerce form .input-text, #top.woocommerce-account .woocommerce form select { min-height: 50px; padding: 10px 14px; margin: 0; } #top.woocommerce-account .select2-container .select2-selection--single { height: 50px; } #top.woocommerce-account .select2-container .select2-selection--single .select2-selection__rendered { line-height: 48px; padding-left: 14px; color: #222; } #top.woocommerce-account .select2-container .select2-selection--single .select2-selection__arrow { height: 48px; } #top.woocommerce-account .woocommerce form .input-text:focus, #top.woocommerce-account .woocommerce form select:focus, #top.woocommerce-checkout .wc-block-components-text-input input:focus, #top.woocommerce-checkout .wc-block-components-textarea:focus { border-color: #de8f83 !important; box-shadow: 0 0 0 3px rgba(222, 143, 131, .18) !important; outline: 0; } #top.woocommerce-account .woocommerce form .form-row { margin: 0 0 18px; padding: 0; } #top.woocommerce-account .woocommerce fieldset { margin: 34px 0 10px; padding: 0; border: 0; } #top.woocommerce-account .woocommerce em, #top.woocommerce-account .woocommerce-form-row .description { font-size: 14px; color: #999; font-style: normal; } #top.woocommerce-account .woocommerce .required { color: #de8f83; border: 0; text-decoration: none; } /* Cases à cocher / boutons radio : accent saumon */ #top.woocommerce-checkout input[type="checkbox"], #top.woocommerce-checkout input[type="radio"], #top.woocommerce-account input[type="checkbox"], #top.woocommerce-account input[type="radio"] { accent-color: #de8f83; } #top.woocommerce-checkout .wc-block-components-checkbox__label, #top.woocommerce-checkout .wc-block-components-checkbox label { font-size: 16px; color: #666; } /* ---------- Avis (informations, confirmations, erreurs) ---------- */ #top .woocommerce-info, #top .woocommerce-message, #top .woocommerce-error, #top .wc-block-components-notice-banner { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #444; background: #fbf3f1 !important; border: 0 !important; border-left: 3px solid #de8f83 !important; border-radius: 3px; box-shadow: none; padding: 16px 20px; margin: 0 0 26px; } #top .woocommerce-error { border-left-color: #c0392b !important; background: #fdf2f1 !important; } #top .woocommerce-info::before, #top .woocommerce-message::before { color: #de8f83; } #top .woocommerce-info .button, #top .woocommerce-message .button { float: right; margin: -6px 0 0 16px; padding: 10px 22px; font-size: 14px !important; } /* ---------- Espace client : menu ---------- */ #top.woocommerce-account .woocommerce-MyAccount-navigation { margin-bottom: 30px; border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 !important; } #top.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 0; background: none; } #top.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #e1e1e1; background: none; list-style: none; } #top.woocommerce-account .woocommerce-MyAccount-navigation li:first-child { border-top: 1px solid #e1e1e1; } #top.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 13px 0 13px 14px; margin: 0; font-family: oswald, Helvetica, Arial, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 400; color: #222; text-align: left; background: none; border: 0; border-left: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } #top.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { color: #de8f83; } #top.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { color: #de8f83; border-left-color: #de8f83; font-weight: 400; } #top.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: #999; } /* ---------- Espace client : tableaux (commandes, téléchargements) ---------- */ #top.woocommerce-account .woocommerce table.shop_table { width: 100%; border: 0; border-collapse: collapse; border-radius: 0; background: none; margin: 0 0 30px; } #top.woocommerce-account .woocommerce table.shop_table thead th { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #999; background: none; border: 0; border-bottom: 1px solid #222; padding: 12px 14px 12px 0; text-align: left; } #top.woocommerce-account .woocommerce table.shop_table td { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.5; color: #444; background: none; border: 0; border-bottom: 1px solid #e1e1e1; padding: 16px 14px 16px 0; vertical-align: middle; } #top.woocommerce-account .woocommerce table.shop_table tr:hover td { background: #fcf8f7; } #top.woocommerce-account .woocommerce table.shop_table td a:not(.button) { color: #de8f83; } #top.woocommerce-account .woocommerce table.shop_table td.woocommerce-orders-table__cell-order-actions, #top.woocommerce-account .woocommerce table.shop_table td.download-file { text-align: right; padding-right: 0; } /* Numéro de commande : cellule d'en-tête de ligne, même style qu'une cellule normale */ #top.woocommerce-account .woocommerce table.shop_table tbody th { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 17px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: #444; background: none; border: 0; border-bottom: 1px solid #e1e1e1; padding: 16px 14px 16px 0; text-align: left; vertical-align: middle; } #top.woocommerce-account .woocommerce table.shop_table tbody th a { color: #de8f83; } #top.woocommerce-account .woocommerce table.shop_table tr:hover th { background: #fcf8f7; } /* ---------- Espace client : adresses ---------- */ #top.woocommerce-account .woocommerce-Addresses { display: flex; flex-wrap: wrap; gap: 30px; } #top.woocommerce-account .woocommerce-Addresses::before, #top.woocommerce-account .woocommerce-Addresses::after { display: none; } #top.woocommerce-account .woocommerce-Addresses .woocommerce-Address { flex: 1 1 260px; float: none; width: auto; margin: 0; border: 1px solid #e1e1e1; border-radius: 3px; padding: 24px 26px; } #top.woocommerce-account .woocommerce-Address-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; } #top.woocommerce-account .woocommerce-Address-title h2, #top.woocommerce-account .woocommerce-Address-title h3 { font-size: 22px; margin: 0 0 12px; } #top.woocommerce-account .woocommerce-Address-title a.edit { font-size: 15px; color: #de8f83; white-space: nowrap; } /* ---------- Commande (bloc WooCommerce) ---------- */ #top.woocommerce-checkout .wc-block-components-checkout-step { margin-bottom: 34px; } #top.woocommerce-checkout .wc-block-components-checkout-step__description { font-size: 15px; color: #999; } #top.woocommerce-checkout .wc-block-components-radio-control__option, #top.woocommerce-checkout .wc-block-components-radio-control-accordion-option, #top.woocommerce-checkout .wc-block-checkout__shipping-option .wc-block-components-radio-control__option { border: 1px solid #e1e1e1 !important; border-radius: 3px !important; box-shadow: none !important; } #top.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control__option--checked-option-highlighted, #top.woocommerce-checkout .wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted, #top.woocommerce-checkout .wc-block-components-radio-control--highlight-checked::after { border-color: #de8f83 !important; box-shadow: inset 0 0 0 1px #de8f83 !important; } #top.woocommerce-checkout .wc-block-components-radio-control__label, #top.woocommerce-checkout .wc-block-components-radio-control__secondary-label, #top.woocommerce-checkout .wc-block-components-payment-method-label { font-size: 17px; color: #222; } #top.woocommerce-checkout .wc-block-components-radio-control__description, #top.woocommerce-checkout .wc-block-components-radio-control__secondary-description { font-size: 15px; color: #888; } #top.woocommerce-checkout .wc-block-components-address-card { border: 1px solid #e1e1e1 !important; border-radius: 3px !important; padding: 18px 20px; } #top.woocommerce-checkout .wc-block-components-address-card address, #top.woocommerce-checkout .wc-block-components-address-card span { font-size: 16px; color: #666; } #top.woocommerce-checkout .wc-block-components-address-card__edit { font-size: 15px; color: #de8f83 !important; text-decoration: none; } #top.woocommerce-checkout .wc-block-checkout__terms, #top.woocommerce-checkout .wc-block-checkout__terms span { font-size: 15px; color: #888; } /* Récapitulatif de commande */ #top.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { border: 1px solid #e1e1e1 !important; border-radius: 3px !important; padding: 0 20px; /* le titre et le détail touchaient la bordure (padding 0 par défaut) */ } /* Filet sous le titre seulement quand le détail est déplié (sinon il doublait la bordure du cadre) */ #top.woocommerce-checkout .wc-block-components-checkout-order-summary__title { border-bottom: 0 !important; } #top.woocommerce-checkout .wc-block-components-checkout-order-summary__content { border-top: 1px solid #e1e1e1; } @media only screen and (max-width: 767px) { #top.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block { padding: 0 16px; } } #top.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-panel, #top.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title { border-top: 0 !important; } #top.woocommerce-checkout .wc-block-components-order-summary .wc-block-components-order-summary-item__description, #top.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-name { font-size: 16px; line-height: 1.4; color: #222; } /* Prix unitaire répété sous le nom : masqué (le montant figure déjà à droite) */ #top.woocommerce-checkout .wc-block-components-order-summary-item__individual-prices { display: none; } #top.woocommerce-checkout .wc-block-components-order-summary-item__total-price, #top.woocommerce-checkout .wc-block-components-order-summary-item__total-price .amount { font-size: 16px !important; color: #222 !important; font-weight: 400; } #top.woocommerce-checkout .wc-block-components-order-summary-item__quantity { background: #de8f83 !important; color: #fff !important; border: 2px solid #fff !important; box-shadow: none !important; font-size: 12px; } #top.woocommerce-checkout .wc-block-components-totals-item__label, #top.woocommerce-checkout .wc-block-components-totals-item__value { font-size: 16px; color: #666; } #top.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, #top.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, #top.woocommerce-checkout .wc-block-components-totals-footer-item .amount { font-size: 22px !important; color: #222 !important; font-weight: 400; } #top.woocommerce-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button, #top.woocommerce-checkout .wc-block-components-panel__button { font-size: 16px; color: #666; } #top.woocommerce-checkout .wc-block-components-checkout-order-summary__title-text, #top.woocommerce-checkout .wc-block-components-order-summary__button-text { font-size: 22px; font-weight: 300; color: #222; } /* ---------- Mobile ---------- */ @media only screen and (max-width: 767px) { /* Tableaux de l'espace client (commandes, téléchargements) : une carte par ligne. La feuille « smallscreen » de WooCommerce n'est pas chargée par le thème : le tableau gardait ses 5 colonnes, dépassait de l'écran et le bouton « Voir » était coupé. */ #top.woocommerce-account .woocommerce table.shop_table_responsive { border: 0; margin: 0 0 20px; } #top.woocommerce-account .woocommerce table.shop_table_responsive thead { display: none; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody { display: block; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr { display: block; border: 1px solid #e1e1e1; border-radius: 3px; padding: 4px 16px; margin: 0 0 14px; background: #fff; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:hover td, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr:hover th { background: none; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr th { display: flex !important; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0 !important; border: 0 !important; border-bottom: 1px solid #f0e6e4 !important; text-align: right !important; font-size: 16px; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td:last-child, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr th:last-child { border-bottom: 0 !important; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td::before, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr th::before { content: attr(data-title); flex: 0 0 auto; text-align: left; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #999; } /* Bouton d'action (« Voir », « Télécharger ») : pleine largeur de la carte, sans étiquette */ #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions::before, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td.download-file::before { display: none; } #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td.woocommerce-orders-table__cell-order-actions .button, #top.woocommerce-account .woocommerce table.shop_table_responsive tbody tr td.download-file .button { flex: 1 1 auto; text-align: center; margin: 4px 0; } #top.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation, #top.woocommerce-account .woocommerce .woocommerce-MyAccount-content { width: 100%; float: none; } #top .woocommerce-info .button, #top .woocommerce-message .button { float: none; display: block; margin: 12px 0 0; text-align: center; } } /* ---------- Champs mot de passe : bouton « afficher » (œil) dans le champ ---------- */ #top.woocommerce-account .woocommerce .password-input, #top.woocommerce-checkout .woocommerce .password-input { position: relative; display: block; } #top.woocommerce-account .woocommerce .password-input .input-text { padding-right: 48px; } #top.woocommerce-account .woocommerce .show-password-input, #top.woocommerce-checkout .woocommerce .show-password-input { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; min-height: 0; margin: 0; padding: 0; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; cursor: pointer; line-height: 32px; text-align: center; } /* Œil « afficher le mot de passe » : icônes Font Awesome Free 6.7.2 (CC BY 4.0) en masques SVG, sans la police Font Awesome (plugin retiré le 05/10/2026) */ #top.woocommerce-account .woocommerce .show-password-input::after, #top.woocommerce-checkout .woocommerce .show-password-input::after { content: ""; display: inline-block; width: 18px; height: 16px; vertical-align: middle; background-color: #999; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E") no-repeat center / contain; } #top.woocommerce-account .woocommerce .show-password-input.display-password::after, #top.woocommerce-checkout .woocommerce .show-password-input.display-password::after { width: 20px; background-color: #de8f83; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z'/%3E%3C/svg%3E") no-repeat center / contain; } /* ---------- Textes d'aide sous les champs ---------- */ #top.woocommerce-account .woocommerce #account_display_name_description, #top.woocommerce-account .woocommerce #account_display_name_description em { display: block; margin-top: 6px; font-size: 14px; color: #999; font-style: normal; } /* ---------- Texte réservé aux lecteurs d'écran (ex. « Modifier Adresse de facturation ») ---------- */ #top.woocommerce-account .woocommerce .screen-reader-text, #top.woocommerce-checkout .woocommerce .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Commande : menu déroulant Pays/Région (libellé flottant + flèche dans le cadre) ---------- */ #top.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__container { position: relative; width: 100%; background: none; } #top.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select { width: 100% !important; max-width: 100% !important; height: 54px !important; min-height: 0; margin: 0 !important; padding: 22px 42px 6px 14px !important; font-family: oswald, Helvetica, Arial, sans-serif !important; font-size: 17px !important; line-height: 1.4 !important; color: #222 !important; background: #fff !important; border: 1px solid #e1e1e1 !important; border-radius: 3px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } #top.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus { border-color: #de8f83 !important; box-shadow: 0 0 0 3px rgba(222, 143, 131, .18) !important; outline: 0; } #top.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__label { position: absolute; left: 15px; top: 7px; margin: 0; z-index: 1; pointer-events: none; font-family: oswald, Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.2; color: #888; } #top.woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__expand { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; fill: #999; } /* ---------- Commande : champs texte à libellé flottant ---------- */ #top.woocommerce-checkout .wc-block-components-text-input input { height: 54px !important; padding: 22px 14px 6px !important; line-height: 1.4 !important; } #top.woocommerce-checkout .wc-block-components-text-input label { left: 15px; font-size: 15px; color: #888; } #top.woocommerce-checkout .wc-block-components-text-input.is-active label { font-size: 13px; } #top.woocommerce-checkout .wc-block-components-address-form__address_2-toggle, #top.woocommerce-checkout .wc-block-components-address-form__address_2-toggle span { font-size: 15px; color: #de8f83; } /* ---------- Titres de page (panier, commande, compte) : style du titre de L'Histoire ---------- */ #top.woocommerce-cart .entry-content > h1.wp-block-heading, #top.woocommerce-checkout .entry-content > h1.wp-block-heading, #top.woocommerce-account .entry-content > h1.wp-block-heading { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 50px; line-height: 55px; font-weight: 300; letter-spacing: 1px; color: #222; text-transform: none; margin: 0 0 40px; padding: 0; } #top.woocommerce-order-received .entry-content > h1.wp-block-heading { display: none; } /* ---------- Panier (bloc WooCommerce) ---------- */ #top.woocommerce-cart table.wc-block-cart-items thead { display: none; } #top.woocommerce-cart table.wc-block-cart-items, #top.woocommerce-cart table.wc-block-cart-items td { border: 0 !important; background: none !important; } #top.woocommerce-cart .wc-block-cart-items__row { border-bottom: 1px solid #e1e1e1 !important; } #top.woocommerce-cart .wc-block-cart-items__row td { padding: 22px 12px 22px 0 !important; vertical-align: top; } #top.woocommerce-cart .wc-block-cart-item__image img { border-radius: 3px; width: 90px; max-width: 90px; box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .35); } #top.woocommerce-cart .wc-block-components-product-name { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 20px !important; line-height: 1.3; font-weight: 300 !important; letter-spacing: .3px; color: #222 !important; text-decoration: none !important; } #top.woocommerce-cart .wc-block-components-product-name:hover { color: #de8f83 !important; } #top.woocommerce-cart .wc-block-cart-item__prices, #top.woocommerce-cart .wc-block-cart-item__prices .wc-block-components-product-price, #top.woocommerce-cart .wc-block-cart-item__prices .amount { font-size: 16px !important; color: #888 !important; } #top.woocommerce-cart .wc-block-cart-item__total, #top.woocommerce-cart .wc-block-cart-item__total .wc-block-components-product-price, #top.woocommerce-cart .wc-block-cart-item__total .amount { font-size: 18px !important; color: #222 !important; font-weight: 400; } #top.woocommerce-cart .wc-block-cart-item__remove-link { color: #999 !important; font-size: 14px; text-decoration: none; } #top.woocommerce-cart .wc-block-cart-item__remove-link:hover { color: #de8f83 !important; } #top.woocommerce-cart .wc-block-cart-item__remove-link svg { fill: currentColor; } /* Petits écrans (jusqu'à 400 px) : la grille de WooCommerce (80 + 132 + total + écarts de 16 px) mesurait 323 px et débordait de la colonne (288 px à 320 px d'écran) : le prix sortait de l'écran. Image réduite, colonne du nom souple. */ @media only screen and (max-width: 400px) { #top.woocommerce-cart .wc-block-cart-items__row { grid-template-columns: 64px minmax(0, 1fr) auto !important; column-gap: 10px !important; } #top.woocommerce-cart .wc-block-cart-items__row td { padding-right: 8px !important; } #top.woocommerce-cart .wc-block-cart-item__image img { width: 64px; max-width: 64px; } #top.woocommerce-cart .wc-block-cart-item__product { grid-column: 2 / 3 !important; } #top.woocommerce-cart .wc-block-cart-item__total { grid-column: 3 / 4 !important; } #top.woocommerce-cart .wc-block-components-product-name { font-size: 18px !important; overflow-wrap: anywhere; } } #top.woocommerce-cart .wc-block-cart__totals-title { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 26px !important; font-weight: 300 !important; letter-spacing: .5px; text-transform: none !important; color: #222; text-align: left; margin: 0 0 14px; padding: 0; } #top.woocommerce-cart .wc-block-components-sidebar { border: 1px solid #e1e1e1; border-radius: 3px; padding: 24px 26px !important; margin-top: 30px; } #top.woocommerce-cart .wc-block-components-totals-item__label, #top.woocommerce-cart .wc-block-components-totals-item__value, #top.woocommerce-cart .wc-block-components-panel__button { font-size: 16px !important; color: #666; } #top.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label, #top.woocommerce-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value, #top.woocommerce-cart .wc-block-components-totals-footer-item .amount { font-size: 22px !important; color: #222 !important; font-weight: 400; } #top.woocommerce-cart .wc-block-cart__submit-container { margin-top: 20px; } #top.woocommerce-cart .wc-block-cart__submit-button { width: 100%; text-align: center; justify-content: center; } @media only screen and (max-width: 767px) { #top.woocommerce-cart .entry-content > h1.wp-block-heading, #top.woocommerce-checkout .entry-content > h1.wp-block-heading, #top.woocommerce-account .entry-content > h1.wp-block-heading { font-size: 36px; line-height: 42px; margin-bottom: 28px; } } /* ---------- Espace client (non connecté) : formulaires de connexion et d'inscription ---------- */ #top.woocommerce-account .woocommerce .u-columns .u-column1, #top.woocommerce-account .woocommerce .u-columns .u-column2 { background: none; } #top.woocommerce-account .woocommerce form.woocommerce-form-login, #top.woocommerce-account .woocommerce form.woocommerce-form-register, #top.woocommerce-account .woocommerce form.woocommerce-ResetPassword { background: #fff !important; border: 1px solid #e1e1e1 !important; border-radius: 3px; padding: 26px 26px 20px !important; margin: 0; } #top.woocommerce-account .woocommerce form.woocommerce-form-register p, #top.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p, #top.woocommerce-account .woocommerce form.woocommerce-ResetPassword > p:first-child { font-size: 15px !important; line-height: 1.6; color: #888; } #top.woocommerce-account .woocommerce .woocommerce-form-login__rememberme { display: block; margin: 0 0 16px; font-size: 15px; color: #666; } #top.woocommerce-account .woocommerce .woocommerce-form-login__submit { float: none; margin: 0; } #top.woocommerce-account .woocommerce .woocommerce-LostPassword { margin: 16px 0 0; font-size: 15px; } #top.woocommerce-account .woocommerce .woocommerce-LostPassword a { color: #de8f83; } #top.woocommerce-account .woocommerce .h-captcha { margin: 6px 0 18px; } #top.woocommerce-account .woocommerce form.woocommerce-form-register, #top.woocommerce-account .woocommerce form.woocommerce-form-login { padding-bottom: 28px !important; overflow: hidden; } #top.woocommerce-account .woocommerce form.woocommerce-form-register p:last-of-type { margin-bottom: 0 !important; } /* hCaptcha (largeur fixe de 303 px) : réduit dans les colonnes étroites pour ne pas déborder (deux colonnes de 1001 à 1400 px) */ @media only screen and (min-width: 1001px) and (max-width: 1400px) { #top.woocommerce-account .woocommerce .u-columns .h-captcha { transform: scale(.78); transform-origin: left top; margin-bottom: 2px; height: 66px; } } /* Jusqu'à 1000 px : connexion au-dessus de l'inscription, chaque formulaire à pleine largeur (Enfold laissait 48 % ou 89 %, et le captcha, large de 302 px, était coupé par le cadre) */ @media only screen and (max-width: 1000px) { #top.woocommerce-account .woocommerce .u-columns .u-column1, #top.woocommerce-account .woocommerce .u-columns .u-column2 { width: 100% !important; float: none !important; margin: 0 0 24px !important; } #top.woocommerce-account .woocommerce .u-columns .u-column2 { margin-bottom: 0 !important; } } @media only screen and (max-width: 767px) { #top.woocommerce-account .woocommerce form.woocommerce-form-login, #top.woocommerce-account .woocommerce form.woocommerce-form-register, #top.woocommerce-account .woocommerce form.woocommerce-ResetPassword { padding: 20px 16px 22px !important; } } /* Téléphones étroits : largeur utile du formulaire = 0,9 × l'écran − 34 px, pour un captcha de 302 px */ @media only screen and (max-width: 374px) { #top.woocommerce-account .woocommerce .u-columns .h-captcha { transform: scale(.94); transform-origin: left top; height: 72px; margin-bottom: 8px; } } @media only screen and (max-width: 349px) { #top.woocommerce-account .woocommerce .u-columns .h-captcha { transform: scale(.85); height: 65px; margin-bottom: 4px; } } @media only screen and (max-width: 322px) { #top.woocommerce-account .woocommerce .u-columns .h-captcha { transform: scale(.8); height: 61px; margin-bottom: 2px; } } /* ---------- Espace client : avis avec bouton (ex. Téléchargements vides) — texte et bouton alignés ---------- */ #top.woocommerce-account .woocommerce .woocommerce-info, #top.woocommerce-account .woocommerce .woocommerce-message { display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 16px 20px !important; font-size: 17px !important; line-height: 1.6; color: #444; } #top.woocommerce-account .woocommerce .woocommerce-info .button, #top.woocommerce-account .woocommerce .woocommerce-message .button { float: none !important; flex: 0 0 auto; margin: 0 !important; padding: 12px 24px !important; font-size: 14px !important; line-height: 1.2 !important; letter-spacing: 2px; } /* ---------- Espace client : détail d'une commande (view-order) ---------- */ #top.woocommerce-account .woocommerce-MyAccount-content > p:first-child { font-size: 17px; line-height: 1.6; color: #666; margin: 0 0 26px; } #top.woocommerce-account .woocommerce-MyAccount-content > p:first-child mark { background: none; color: #222; font-weight: 400; padding: 0; } #top.woocommerce-account .woocommerce-MyAccount-content .woocommerce-order-details__title, #top.woocommerce-account .woocommerce-MyAccount-content .woocommerce-column__title { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 26px; line-height: 1.3; font-weight: 300; color: #222; margin: 0 0 14px; } /* Tableau : sans cadre gris, mêmes filets que la liste des commandes */ #top.woocommerce-account .woocommerce-MyAccount-content table.shop_table.order_details { border: 0 !important; border-collapse: collapse !important; border-spacing: 0; border-radius: 0 !important; padding: 0 !important; font-size: 17px !important; background: none !important; box-shadow: none !important; margin: 0 0 34px !important; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tbody td { color: #222; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tbody td.product-total, #top.woocommerce-account .woocommerce-MyAccount-content table.order_details thead th.product-total { text-align: right; padding-right: 0; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tbody td .product-quantity { color: #999; font-weight: 400; } /* Pied de tableau (sous-total, remise, expédition, paiement, total) */ #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot th, #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot td { font-family: oswald, Helvetica, Arial, sans-serif; font-size: 16px !important; line-height: 1.5 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; color: #666 !important; background: none !important; border: 0 !important; border-bottom: 1px solid #e1e1e1 !important; padding: 12px 14px 12px 0 !important; vertical-align: middle; text-align: left; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot td { color: #222 !important; text-align: right; padding-right: 0 !important; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:hover th, #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:hover td { background: none !important; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child th, #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td { font-size: 20px !important; color: #222 !important; border-bottom: 1px solid #222 !important; padding-top: 16px !important; padding-bottom: 16px !important; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td, #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot tr:last-child td span { color: #de8f83 !important; } #top.woocommerce-account .woocommerce-MyAccount-content table.order_details tfoot td small { font-size: 14px; color: #999; } /* Adresses de facturation et de livraison : deux cartes de même hauteur */ #top.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses { display: flex; flex-wrap: wrap; gap: 30px; } #top.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::before, #top.woocommerce-account .woocommerce-customer-details .woocommerce-columns--addresses::after { display: none; } #top.woocommerce-account .woocommerce-customer-details .woocommerce-column { flex: 1 1 260px; float: none !important; width: auto !important; margin: 0 !important; background: #fff; border: 1px solid #e1e1e1 !important; border-radius: 3px; padding: 22px 24px !important; } #top.woocommerce-account .woocommerce-customer-details .woocommerce-column__title { font-size: 22px; margin: 0 0 12px; } #top.woocommerce-account .woocommerce-customer-details address { font-style: normal; font-size: 17px; line-height: 1.6; color: #666; border: 0 !important; padding: 0 !important; margin: 0; } #top.woocommerce-account .woocommerce-customer-details address p { margin: 10px 0 0; font-size: 16px; color: #888; } @media only screen and (max-width: 767px) { #top.woocommerce-account .woocommerce .woocommerce-info .button, #top.woocommerce-account .woocommerce .woocommerce-message .button { flex: 1 1 100%; text-align: center; } }