/* Hantes Florenia — WooCommerce (restyle complet de la boutique dans la charte). */ /* ============ CONTENEURS DE PAGE ============ */ main.hf-woo, .woocommerce-page .legal-main{ position:relative; z-index:1; max-width:var(--container); margin:0 auto; padding:calc(var(--frame) + 120px) var(--gutter) clamp(60px,10vh,120px); min-height:70vh; } .woocommerce-page .legal-main > h1, .hf-woo .woocommerce-products-header__title, .hf-woo h1.entry-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; font-size:clamp(28px,4vw,56px); letter-spacing:.03em; color:var(--white); text-align:center; margin:0 0 clamp(30px,5vh,60px); } .woocommerce .woocommerce-result-count{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--muted); } .woocommerce .woocommerce-ordering select{ margin-bottom:20px; } /* ============ BOUTONS ============ */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .wc-block-components-button{ display:inline-flex; align-items:center; justify-content:center; /* Convention de la maison : contour au repos, remplissage au survol. */ background:transparent; color:var(--gold-soft) !important; border:1px solid var(--gold-soft); border-radius:2px; font-family:var(--mono); font-weight:400; font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:14px 28px; line-height:1; min-height:auto; transition:background .3s ease, color .3s ease, border-color .3s ease, transform .12s ease; cursor:pointer; } /* Retour tactile au clic (better-ui : scale .96). */ .woocommerce a.button:active, .woocommerce button.button:active, .woocommerce input.button:active, .woocommerce #respond input#submit:active, .wc-block-components-button:active{ transform:scale(.96); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .wc-block-components-button:hover{ background:var(--gold-soft); color:#000 !important; border-color:var(--gold-soft); } /* Ces deux-là étaient l'exception « en contour » : c'est devenu la règle. */ .woocommerce a.button.wc-backward, .woocommerce .button.outline{ background:transparent; color:var(--gold-soft) !important; } .woocommerce a.button.wc-backward:hover{ background:var(--gold-soft); color:#000 !important; } /* « Buy » : même traitement que « Add to cart » — contour au repos, remplissage au survol, comme tous les boutons de la boutique. L'ordre d'affichage est posé ici et non dans le gabarit : WooCommerce n'offre pas de point d'accroche entre la quantité et son bouton, et le conteneur est déjà en flex. */ .hf-pdp-summary form.cart .quantity{ order:1; } .hf-pdp-summary form.cart .hf-buy-now{ order:2; flex:1 1 auto; min-width:160px; height:50px; padding:0 30px; } .hf-pdp-summary form.cart .single_add_to_cart_button{ order:3; } /* ============ FORMULAIRES ============ */ .woocommerce form .form-row label, .woocommerce-page label, .wc-block-components-form label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--label); } /* Plus d'espace sous les libellés de champ (hors cases à cocher). */ .woocommerce form .form-row label:not(.checkbox), .woocommerce-checkout .form-row label:not(.checkbox){ display:block; margin-bottom:11px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page input.input-text, .woocommerce .select2-selection, .wc-block-components-text-input input, .select2-container .select2-selection--single{ /* Fond opaque et non plus translucide : ces pages ont désormais une photo en arrière-plan, et un champ à 3 % de blanc la laissait passer — la saisie devenait illisible selon la zone de l'image. */ background:var(--field-bg); border:1px solid var(--field-line); border-radius:2px; color:var(--white); font-family:var(--body); font-size:15px; padding:12px 14px; line-height:1.4; transition:border-color .3s ease, background .3s ease; } .woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .form-row select:focus, .wc-block-components-text-input input:focus{ outline:none; border-color:var(--gold-soft); background:var(--field-bg-focus); } .woocommerce form .form-row input.input-text:hover, .woocommerce form .form-row textarea:hover, .woocommerce-page input.input-text:hover, .woocommerce-checkout #order_comments:hover, .select2-container--default .select2-selection--single:hover{ border-color:var(--field-line-hover); } /* Listes déroulantes : la liste ouverte et ses options sont peintes par le navigateur, elles n'héritent pas du champ — on les repeint explicitement. */ .woocommerce form .form-row select option, .woocommerce-page select option{ background:var(--field-bg); color:var(--white); } .select2-container--default .select2-dropdown, .select2-container--default .select2-search--dropdown .select2-search__field, .select2-container--default .select2-results__option{ background:var(--field-bg); color:var(--white); border-color:var(--field-line); } .select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--field-bg-focus); color:var(--gold-soft); } /* Zones de texte (commande, notes) : même fond que les champs. */ .woocommerce form .form-row textarea, .woocommerce-page textarea{ background:var(--field-bg); } .woocommerce form .form-row input.input-text::placeholder{ color:var(--placeholder); } /* ============ NOTICES ============ */ .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .wc-block-components-notice-banner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:rgba(255,255,255,.03); border-top:2px solid var(--gold-soft); color:var(--white); font-family:var(--body); font-style:normal; font-weight:300; font-size:15px; border-radius:0; padding:18px 24px; } /* Pas d'icône glyphe Woo (elle chevauchait le texte) — aspect épuré. */ .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before{ display:none !important; } /* ============ ERREURS DE VALIDATION ============ */ /* Liste de champs manquants : un bloc sobre, un filet rouge sourd, une puce par ligne et le nom du champ mis en avant. Le rendu par défaut empilait des phrases brutes sans hiérarchie. */ .woocommerce-error{ display:block; background:rgba(180,83,107,.06); border:1px solid rgba(180,83,107,.38); border-top:2px solid #b4536b; border-radius:2px; padding:18px 24px 20px; margin:0 0 clamp(18px,2.4vh,28px); list-style:none; } .woocommerce-error::after{ content:""; display:block; clear:both; } .woocommerce-error > li{ position:relative; list-style:none; margin:0; padding:7px 0 7px 20px; font-family:var(--body); font-style:normal; font-weight:300; font-size:14.5px; line-height:1.55; color:var(--cream); border-bottom:1px solid rgba(180,83,107,.16); } .woocommerce-error > li:last-child{ border-bottom:0; padding-bottom:0; } .woocommerce-error > li:first-child{ padding-top:0; } .woocommerce-error > li::before{ content:""; position:absolute; left:2px; top:1.05em; width:5px; height:5px; border-radius:50%; background:#b4536b; } .woocommerce-error > li:first-child::before{ top:.55em; } .woocommerce-error > li strong{ color:var(--white); font-weight:400; } /* Champ fautif : le liseré rouge remplace l'or, sans crier. */ .woocommerce-invalid input.input-text, .woocommerce-invalid select, .woocommerce-invalid textarea{ border-color:rgba(180,83,107,.7) !important; background:rgba(180,83,107,.05) !important; } .woocommerce-invalid label{ color:#d08398 !important; } .woocommerce-validated input.input-text{ border-color:rgba(199,161,92,.45) !important; } /* Notice vide (message « ajouté au panier » supprimé) : ne rien afficher. */ .woocommerce-message:empty, .woocommerce-message--success:empty{ display:none !important; } .woocommerce-message .button, .woocommerce-info .button{ float:none; margin:0; flex:0 0 auto; } /* ============ BOUTIQUE (grille produits) ============ */ /* Grille auto-fit centrée : 1 pièce reste centrée, plusieurs s'alignent sur 3 colonnes max. */ .woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,360px)); justify-content:center; gap:clamp(28px,3.2vw,58px); max-width:1180px; margin:0 auto; padding:0; } .woocommerce ul.products li.product{ list-style:none; margin:0; width:auto !important; text-align:center; float:none; } /* Vignette encadrée (cadre portrait + zoom fluide au survol). */ .hf-card-media{ position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:6px; background:#0c0c0c; margin:0 0 20px; } .hf-card-media img{ position:absolute !important; inset:0; width:100% !important; height:100% !important; object-fit:cover; margin:0 !important; border-radius:0; filter:grayscale(.14); transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .6s ease; } .woocommerce ul.products li.product:hover .hf-card-media img{ transform:scale(1.06); filter:none; } .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--title); font-style:italic; font-weight:300; font-size:clamp(17px,1.5vw,21px); color:var(--white); padding:0; margin:0 0 8px; transition:color .3s ease; } .woocommerce ul.products li.product:hover .woocommerce-loop-product__title{ color:var(--gold-lite); } .woocommerce ul.products li.product .price{ font-family:var(--mono); font-weight:400; font-size:14px; letter-spacing:.04em; color:var(--gold-soft); } .woocommerce ul.products li.product .price del{ color:var(--muted); opacity:.6; } .woocommerce ul.products li.product .price ins{ text-decoration:none; } .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .added_to_cart{ margin-top:14px; } .woocommerce span.onsale{ background:var(--gold-soft); color:#000; border-radius:0; font-family:var(--mono); font-weight:400; font-size:10px; letter-spacing:.12em; min-height:auto; min-width:auto; padding:6px 10px; top:8px; left:8px; } .woocommerce nav.woocommerce-pagination ul{ border:none; } .woocommerce nav.woocommerce-pagination ul li{ border:none; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ background:none; color:var(--muted); font-family:var(--mono); font-size:13px; } .woocommerce nav.woocommerce-pagination ul li span.current{ color:var(--gold-soft); } /* ============ FICHE PRODUIT — luxe éditorial ============ */ /* Fiche produit : on dégage la navbar puis on centre le héro dans ce qui reste. */ /* Le retour « Go Back » vit désormais sous le bouton Menu : le contenu démarre sous lui, comme sur les autres pages secondaires. */ .single-product main.hf-woo{ padding-top:calc(var(--frame) + 120px); padding-bottom:clamp(28px,4vh,56px); min-height:0; } .single-product .hf-pdp{ position:relative; z-index:1; } /* Colonnes alignées par le HAUT : le résumé démarrait à mi-hauteur du carrousel, son sommet doit être au niveau du haut de l'image. */ .hf-pdp-hero{ max-width:1320px; margin:0 auto; min-height:calc(100vh - var(--frame) - 160px);min-height:calc(100svh - var(--frame) - 160px); display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); /* Colonnes largement espacées, mais la rangée du retour colle au visuel. */ column-gap:clamp(36px,4vw,72px); row-gap:0; /* align-items:start garde les deux colonnes calées sur le même haut ; align-content:center centre l'ensemble dans la hauteur disponible. */ align-items:center; align-content:center; } .hf-pdp-gallery{ min-width:0; } /* Neutralise le float:right / width:48% par défaut de WooCommerce sur .summary. */ .hf-pdp-summary{ min-width:0; width:auto !important; float:none !important; margin:0 !important; } .hf-pdp-summary-in{ position:static; } /* Galerie coulissante sur mesure — image plein cadre, glissement translateX + flèches. */ .hf-gal-viewport{ position:relative; overflow:hidden; border-radius:10px; height:min(calc(100vh - 172px), 620px);height:min(calc(100svh - 172px), 620px); background:var(--media-bg); box-shadow:0 30px 70px -40px rgba(0,0,0,.7); touch-action:pan-y; cursor:grab; } .hf-gal-viewport:active{ cursor:grabbing; } .hf-gal-viewport::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); pointer-events:none; z-index:2; } .hf-gal-track{ display:flex; height:100%; will-change:transform; transition:transform .55s cubic-bezier(.66,0,.2,1); } .hf-gal-slide{ flex:0 0 100%; min-width:100%; height:100%; } .hf-gal-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; -webkit-user-select:none; user-select:none; } /* Flèches au trait, sans pastille ni fond flouté : même langage que le carrousel d'All Collections (fine ligne, aucun aplat). */ .hf-gal-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; display:flex; align-items:center; justify-content:center; width:auto; height:auto; padding:0; border:none; border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; color:#141210; line-height:1; cursor:pointer; opacity:0; transition:opacity .3s ease, transform .3s ease; } .hf-gal-viewport:hover .hf-gal-nav{ opacity:.7; } .hf-gal-nav:hover{ opacity:1; transform:translateY(-50%) scale(1.06); } .hf-gal-nav svg{ width:clamp(26px,2.4vw,32px); height:auto; display:block; } .hf-gal-nav.prev{ left:14px; } .hf-gal-nav.next{ right:14px; } @media (hover:none){ .hf-gal-nav{ opacity:.7; } } .hf-gal-bar{ position:relative; display:flex; align-items:center; justify-content:center; margin-top:16px; min-height:16px; } .hf-gal-dots{ display:flex; justify-content:center; gap:10px; } .hf-gal-dot{ width:7px; height:7px; border-radius:50%; border:1px solid rgba(244,239,230,.35); background:transparent; cursor:pointer; padding:0; transition:background .3s ease, border-color .3s ease, transform .3s ease; } .hf-gal-dot:hover{ border-color:var(--gold-soft); } .hf-gal-dot.is-active{ background:var(--gold-soft); border-color:var(--gold-soft); transform:scale(1.2); } .hf-gal-count{ position:absolute; right:0; top:50%; transform:translateY(-50%); font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; color:var(--muted); } .hf-gal-count em{ font-style:normal; color:var(--gold-soft); } /* Résumé (collant) */ /* Résumé aligné à gauche. */ .hf-pdp-summary, .hf-pdp-summary-in, .hf-pdp-summary .product_title, .hf-pdp-summary .price{ text-align:left !important; } /* Titre en Fraunces (sélecteur renforcé pour battre `.hf-woo h1.entry-title`). */ .hf-woo .hf-pdp-summary h1.product_title{ font-family:var(--body); font-style:normal; font-weight:400; text-transform:none; font-size:clamp(30px,3.4vw,46px); letter-spacing:.01em; line-height:1.05; color:var(--white); text-align:left; margin:0 0 15px; } /* Prix : couleur charte forcée (WooCommerce le rend en vert par défaut). */ .hf-pdp-summary .price, .hf-pdp-summary p.price, .hf-pdp-summary .price .woocommerce-Price-amount, .hf-pdp-summary .price bdi, .hf-pdp-summary .price ins, .hf-pdp-summary .price ins bdi{ color:var(--gold-soft) !important; } /* Prix + TVA incluse — prix en Fraunces. */ .hf-pdp-price-row{ display:flex; align-items:baseline; gap:14px; margin:0 0 18px; flex-wrap:wrap; } .hf-pdp-price-row .price{ margin:0 !important; } /* Prix cliquable : il porte le sélecteur de devise, chevron compris. */ .hf-pdp-price-row .hf-fx-price .hf-fx-btn{ color:var(--gold-soft); } .hf-pdp-summary .hf-fx-price .price{ display:inline-block; } .hf-vat{ font-family:var(--body); font-style:italic; font-weight:300; font-size:12px; letter-spacing:.04em; color:var(--muted); } .hf-pdp-summary .price, .hf-pdp-summary p.price{ font-family:var(--body); font-style:normal; font-weight:300; font-size:clamp(19px,1.7vw,24px); letter-spacing:.06em; } .hf-pdp-summary .price del, .hf-pdp-summary .price del bdi{ color:var(--muted) !important; opacity:.55; margin-right:8px; } .hf-pdp-summary .price ins{ text-decoration:none; } .hf-pdp-rule{ width:100%; height:1px; background:var(--line); margin:0 0 18px; } .hf-pdp-summary .woocommerce-product-details__short-description{ font-family:var(--body); font-style:italic; font-weight:400; font-size:clamp(14px,1.1vw,16px); line-height:1.7; color:var(--cream); margin:0 0 22px; max-width:52ch; } /* Options sur mesure (cordon + poignet), injectées dans le formulaire panier. */ .hf-pdp-options{ order:-1; flex:1 0 100%; display:flex; flex-direction:column; gap:16px; margin:0 0 20px; } .hf-opt-label{ font-family:var(--body); font-style:italic; font-weight:400; font-size:13px; letter-spacing:.02em; color:var(--cream); margin:0 0 10px; } .hf-opt-label .hf-opt-val{ color:var(--gold-soft); } .hf-opt-label .hf-opt-unit{ color:var(--label); font-style:normal; font-size:11px; letter-spacing:.08em; } .hf-swatches{ display:flex; gap:12px; flex-wrap:wrap; } /* Cordon sorti du formulaire, entre le prix et Description / Meaning. */ .hf-pdp-cord{ margin:0; } .hf-swatch{ width:26px; height:26px; border-radius:50%; padding:2px; border:1px solid rgba(244,239,230,.22); background:none; cursor:pointer; transition:border-color .3s ease, transform .3s ease; } .hf-swatch span{ display:block; width:100%; height:100%; border-radius:50%; background:var(--sw); } .hf-swatch:hover{ transform:scale(1.08); } .hf-swatch.is-active{ border-color:var(--gold-soft); } /* Lieu de port, puis les cm de la rangée choisie. */ .hf-wear{ display:flex; gap:8px; flex-wrap:wrap; } .hf-wear-btn{ min-width:92px; } .hf-wear-panel{ margin-top:12px; } .hf-wear-panel[hidden]{ display:none; } /* Retour : mêmes métriques que le bouton Menu (icône 20 px, gouttière 14 px, libellé italique 15 px), posé en haut à gauche du visuel produit. */ /* Retour : Manrope, sans cadre, posé au-dessus du visuel produit et calé sur la ligne de « RELEASE 1 ». */ .hf-sizes{ display:flex; gap:8px; flex-wrap:wrap; } .hf-size{ min-width:44px; height:38px; padding:0 12px; background:none; border:1px solid rgba(244,239,230,.2); color:var(--cream); font-family:var(--body); font-size:13px; letter-spacing:.02em; cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease; } .hf-size:hover{ border-color:var(--gold-soft); color:var(--white); } .hf-size.is-active{ border-color:var(--gold-soft); background:var(--gold-soft); color:#141210; } /* Saisie « sur mesure » : apparaît sous la rangée quand ce choix est actif. */ .hf-custom{ margin-top:10px; } .hf-custom[hidden]{ display:none; } .hf-custom-input{ width:100%; max-width:260px; height:38px; padding:0 12px; background:transparent; border:1px solid var(--gold-soft); border-radius:0; color:var(--cream); font-family:var(--body); font-size:13px; letter-spacing:.02em; } .hf-custom-input::placeholder{ color:var(--muted); font-style:italic; } .hf-custom-input:focus{ outline:none; border-color:var(--white); } /* Autofill : neutralise le fond blanc imposé par Chrome/Safari. */ .hf-custom-input:-webkit-autofill, .hf-custom-input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--cream); caret-color:var(--cream); transition:background-color 0s 9999s, color 0s 9999s; } /* Panier : quantité + bouton alignés à gauche. */ .hf-pdp-summary form.cart{ margin:22px 0 0; display:flex; gap:12px; align-items:stretch; justify-content:flex-start; flex-wrap:wrap; } /* Neutralise le clearfix ::before/::after de WooCommerce (items fantômes en flex). */ .hf-pdp-summary form.cart::before, .hf-pdp-summary form.cart::after{ content:none !important; display:none !important; } .hf-pdp-summary .quantity{ display:flex; } .hf-pdp-summary .quantity input.qty{ width:60px; height:50px; text-align:center; background:var(--field-bg); border:1px solid var(--field-line); color:var(--white); padding:0; font-family:var(--mono); } .hf-pdp-summary form.cart .button{ flex:1 1 auto; min-width:200px; height:50px; padding:0 30px; } /* Accordéons repliés (The Piece / The Story / Meaning) — tiennent dans le viewport. */ .hf-pdp-acc{ margin:18px 0 0; } .hf-acc{ border-bottom:1px solid var(--line); } .hf-acc > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; font-family:var(--body); font-style:italic; font-weight:400; font-size:15px; letter-spacing:.02em; color:var(--white); transition:color .3s ease; } .hf-acc > summary::-webkit-details-marker{ display:none; } .hf-acc > summary:hover{ color:var(--gold-soft); } .hf-acc > summary i{ position:relative; width:11px; height:11px; flex:0 0 11px; } .hf-acc > summary i::before, .hf-acc > summary i::after{ content:""; position:absolute; background:var(--gold-soft); transition:transform .35s ease, opacity .35s ease; } .hf-acc > summary i::before{ left:0; top:5px; width:11px; height:1px; } .hf-acc > summary i::after{ left:5px; top:0; width:1px; height:11px; } .hf-acc[open] > summary i::after{ transform:scaleY(0); opacity:0; } /* Corps des accordéons en romain : seuls les intitulés restent en italique. */ .hf-acc-body{ padding:0 0 18px; font-family:var(--body); font-style:normal; font-weight:400; font-size:14px; line-height:1.8; color:var(--cream); } .hf-acc-body p{ margin:0 0 .9em; } .hf-acc-body p:last-child{ margin-bottom:0; } /* Fiche technique « The Piece » (dans l'accordéon). */ .hf-pdp-specs-list{ margin:0; } .hf-spec{ display:grid; grid-template-columns:1fr 1.6fr; gap:18px; padding:11px 0; border-top:1px solid var(--line); } .hf-spec:first-child{ border-top:none; padding-top:0; } .hf-spec dt{ font-family:var(--body); font-style:normal; font-weight:400; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); align-self:center; } .hf-spec dd{ margin:0; font-family:var(--body); font-style:italic; font-size:14px; color:var(--white); } /* CTA social (TikTok + Instagram). */ .hf-pdp-social{ margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--line); display:flex; align-items:center; gap:18px; flex-wrap:wrap; } .hf-social-lead{ font-family:var(--body); font-style:italic; font-weight:300; font-size:12px; letter-spacing:.04em; color:var(--muted); } .hf-pdp-social a{ position:relative; font-family:var(--body); font-style:italic; font-weight:400; font-size:14px; letter-spacing:.04em; color:var(--cream); text-decoration:none; transition:color .3s ease; } .hf-pdp-social a::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:var(--gold-soft); transform:scaleX(0); transform-origin:left; transition:transform .35s ease; } .hf-pdp-social a:hover{ color:var(--gold-soft); } .hf-pdp-social a:hover::after{ transform:scaleX(1); } .woocommerce-tabs{ max-width:820px; margin:0 auto; } .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 24px; border-bottom:1px solid rgba(244,239,230,.14); display:flex; gap:8px; } .woocommerce-tabs ul.tabs::before{ display:none; } .woocommerce-tabs ul.tabs li{ background:none; border:none; border-radius:0; margin:0; padding:0; } .woocommerce-tabs ul.tabs li a{ font-family:var(--mono); font-weight:400; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:12px 16px; display:block; } .woocommerce-tabs ul.tabs li.active a{ color:var(--gold-soft); box-shadow:inset 0 -2px 0 var(--gold-soft); } .woocommerce-tabs .panel h2{ font-family:var(--title); font-style:italic; color:var(--white); } .woocommerce-tabs .panel{ font-family:var(--body); color:#d8ccb6; line-height:1.8; } .related.products, .upsells.products{ grid-column:1 / -1; margin-top:clamp(50px,8vh,100px); } .related.products > h2, .upsells.products > h2{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; font-size:clamp(20px,2.2vw,30px); letter-spacing:.06em; color:var(--white); text-align:center; margin-bottom:34px; } /* ============ PANIER ============ */ .woocommerce table.shop_table{ border:1px solid rgba(244,239,230,.14); border-radius:0; border-collapse:collapse; background:rgba(255,255,255,.015); } .woocommerce table.shop_table th{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); padding:16px; border-bottom:1px solid rgba(244,239,230,.14); } .woocommerce table.shop_table td{ padding:16px; border-top:1px solid rgba(244,239,230,.08); color:#e7ddcb; font-family:var(--body); } .woocommerce table.cart img{ width:72px; border-radius:4px; } .woocommerce a.remove{ color:var(--muted) !important; border:1px solid rgba(244,239,230,.2); border-radius:50%; } .woocommerce a.remove:hover{ background:#b4536b !important; color:#fff !important; } .woocommerce .cart-collaterals .cart_totals, .woocommerce-cart .cart-collaterals .cart_totals{ float:right; width:42%; } .woocommerce .cart_totals h2{ font-family:var(--title); font-style:italic; text-transform:uppercase; letter-spacing:.1em; color:var(--white); font-size:20px; } .woocommerce .cart_totals .order-total .amount{ color:var(--gold-soft); } .woocommerce .coupon .input-text{ min-width:180px; } td.product-name a{ font-family:var(--title); font-style:italic; color:var(--white); } td.product-name a:hover{ color:var(--gold-soft); } /* ---- Panier : article éditorial, plus d'air, image encadrée ---- */ .woocommerce-cart table.cart td{ padding:22px 18px; vertical-align:middle; } .woocommerce-cart table.cart img{ width:88px !important; height:88px; object-fit:cover; border-radius:5px; background:var(--media-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .woocommerce-cart td.product-name a{ font-family:var(--title); font-style:italic; font-weight:300; font-size:clamp(16px,1.5vw,19px); color:var(--white); } .woocommerce-cart td.product-price, .woocommerce-cart td.product-subtotal{ font-family:var(--mono); font-size:14px; letter-spacing:.03em; color:var(--gold-soft); } .woocommerce-cart td.product-subtotal{ font-weight:400; } .woocommerce-cart .quantity input.qty{ width:66px; text-align:center; padding:11px 6px; background:var(--field-bg); } .woocommerce-cart .cart_totals h2{ padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:20px; } /* ============ CHECKOUT — soigné, rassurant ============ */ .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2{ width:100%; float:none; } .woocommerce-checkout #customer_details.col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); } .woocommerce-checkout #customer_details.col2-set::before, .woocommerce-checkout #customer_details.col2-set::after{ display:none; } .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.08em; color:var(--white); font-size:clamp(18px,2vw,24px); margin:0 0 clamp(22px,3vh,30px); padding-bottom:16px; border-bottom:1px solid var(--line); } /* Cette marge dégageait l'ancien emplacement du coupon, retiré depuis : elle ne faisait plus que décaler « Your order » de ~58 px sous « Billing details ». Les deux colonnes démarrent désormais à la même hauteur. */ .woocommerce-checkout #order_review_heading{ margin-top:0; } /* Zone de notes : champ sombre (plus de rectangle blanc). */ .woocommerce-checkout textarea, .woocommerce-checkout #order_comments{ background:var(--field-bg) !important; border:1px solid var(--field-line) !important; color:var(--white) !important; border-radius:2px; padding:12px 14px; font-family:var(--body); min-height:104px; } /* Bloc paiement */ #payment{ background:none !important; border:1px solid var(--line); border-radius:0; } #payment ul.payment_methods{ border-bottom:1px solid var(--line) !important; padding:22px 26px !important; margin:0; } #payment ul.payment_methods li{ font-family:var(--body); color:var(--cream); } #payment ul.payment_methods label{ color:var(--white); font-family:var(--body); text-transform:none; letter-spacing:0; font-size:15px; } #payment div.payment_box{ background:rgba(255,255,255,.04) !important; color:var(--cream); font-family:var(--body); font-style:italic; } #payment div.payment_box::before{ border-bottom-color:rgba(255,255,255,.04) !important; } #payment .place-order{ padding:24px 26px !important; } #payment #place_order{ width:100%; height:56px; font-size:12px; letter-spacing:.2em; } .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper, /* Mention de confidentialité : elle passe SOUS le bouton de commande (voir hf_move_privacy_text dans inc/woocommerce.php) et se lit en petit. */ .woocommerce-checkout .woocommerce-privacy-policy-text{ color:var(--muted); font-size:10px; line-height:1.55; margin:16px 0 0; letter-spacing:.01em; } /* ============ PANIER SUR MESURE — deux colonnes + résumé sticky ============ */ .hf-cart-grid{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.95fr); gap:clamp(36px,4.5vw,80px); align-items:start; max-width:1240px; margin:0 auto; } .hf-cart-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); } .hf-cart-eyebrow{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(17px,1.7vw,22px); color:var(--white); } .hf-cart-headcount{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); background:none; } .hf-cart-line{ display:grid; grid-template-columns:clamp(96px,11vw,132px) 1fr; gap:clamp(20px,2.4vw,34px); padding:clamp(26px,3.4vh,38px) 0; border-bottom:1px solid var(--line); } /* Vignette produit : le même gris que le cadre de la fiche produit. Le fond noir avalait les pièces photographiées sur fond clair. */ .hf-cart-line-media{ display:block; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:var(--media-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .hf-cart-line-media img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; } .hf-cart-line-body{ display:flex; justify-content:space-between; gap:24px; min-width:0; } .hf-cart-line-info{ min-width:0; } .hf-cart-line-eyebrow{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; } .hf-cart-line-name{ display:block; font-family:var(--title); font-style:italic; font-weight:300; font-size:clamp(19px,1.9vw,25px); color:var(--white); line-height:1.15; } a.hf-cart-line-name:hover{ color:var(--gold-soft); } .hf-cart-line-meta{ margin-top:12px; font-family:var(--body); font-size:14px; color:var(--muted); } /* Variations (Cordon / poignet / cou) : chaque paille « label valeur » sur une ligne alignée. */ .hf-cart-line-meta .variation{ margin:0 0 10px; padding:0; line-height:1.75; overflow:hidden; } .hf-cart-line-meta .variation dt, .hf-cart-line-meta .variation dd{ display:inline; float:none; clear:none; margin:0; padding:0; width:auto; } .hf-cart-line-meta .variation dt{ font-weight:400; font-style:normal; color:var(--muted); } .hf-cart-line-meta .variation dd{ margin-left:6px; color:var(--cream); font-style:normal; } .hf-cart-line-meta .variation dd p{ display:inline; margin:0; } .hf-cart-line-meta .variation dd::after{ content:"\A"; white-space:pre; } .hf-cart-line-each{ color:var(--cream); } .hf-cart-line-each em{ font-style:normal; color:var(--muted); font-size:12px; } .hf-cart-line-controls{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:14px; flex:0 0 auto; text-align:right; } .hf-cart-line-subtotal{ font-family:var(--mono); font-size:15px; letter-spacing:.02em; color:var(--gold-soft); font-weight:400; } .hf-cart-line-remove{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid transparent; } .hf-cart-line-remove:hover{ color:var(--white); border-bottom-color:rgba(244,239,230,.4); } .hf-cart-line-qty .quantity{ display:inline-flex; margin:0; } .hf-cart-line-qty input.qty{ width:58px; height:42px; text-align:center; background:transparent; border:1px solid rgba(244,239,230,.24); border-radius:2px; color:var(--white); font-family:var(--mono); font-size:14px; padding:0; } .hf-cart-foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:28px; } .hf-cart-coupon{ display:flex; align-items:stretch; } .hf-cart-coupon input.input-text{ width:190px; height:46px; background:var(--field-bg); border:1px solid var(--field-line); border-right:none; border-radius:0; color:var(--white); font-family:var(--body); font-size:14px; padding:0 14px; } .hf-cart-coupon input.input-text:focus{ outline:none; border-color:var(--gold-soft); } /* Bouton de mise à jour : hors écran, ramené au premier plan au focus clavier. */ .hf-cart-update{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } .hf-cart-update:focus{ position:static; width:auto; height:auto; margin-top:14px; padding:12px 22px; background:transparent; border:1px solid var(--gold-soft); border-radius:2px; color:var(--gold-soft); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; } .hf-cart-coupon-btn{ height:46px; padding:0 20px; background:transparent; border:1px solid rgba(244,239,230,.2); border-radius:2px; color:var(--cream); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:color .3s ease, border-color .3s ease; } .hf-cart-coupon-btn:hover{ color:var(--gold-soft); border-color:var(--gold-soft); } .hf-cart-update{ background:transparent; border:none; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:8px 2px; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; } .hf-cart-update:hover{ color:var(--white); border-bottom-color:rgba(244,239,230,.4); } /* Résumé collant */ .hf-cart-summary{ position:sticky; top:calc(var(--frame) + 100px); } .hf-summary{ border:1px solid var(--line); border-radius:2px; padding:clamp(26px,3vw,38px); position:relative; background:var(--field-bg); } .hf-summary-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(17px,1.7vw,22px); color:var(--white); margin:0 0 12px; } .hf-summary-lozenge{ display:block; width:6px; height:6px; background:var(--gold-soft); transform:rotate(45deg); margin:0 0 24px; } .hf-summary-rows{ display:flex; flex-direction:column; gap:14px; padding-bottom:22px; border-bottom:1px solid var(--line); } .hf-summary-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; } .hf-summary-row .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--label); } .hf-summary-row .val{ font-family:var(--body); font-size:16px; font-weight:300; color:var(--cream); } .hf-summary-row .val.free{ font-style:italic; color:var(--gold-soft); font-size:13px; } .hf-summary-row.discount .val{ color:var(--gold-soft); } .hf-summary-total{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:22px 0 4px; } .hf-summary-total .lbl{ font-family:var(--title); font-style:italic; text-transform:uppercase; letter-spacing:.06em; font-size:16px; color:var(--white); } .hf-summary-total .val, .hf-summary-total .val .amount, .hf-summary-total .val bdi{ font-family:var(--body); font-style:italic; font-size:22px; font-weight:300; letter-spacing:.01em; color:var(--gold-soft) !important; } .hf-summary-vat{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:4px 0 0; } .hf-summary-cta{ margin-top:26px; } .hf-summary-cta .checkout-button{ display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; background:transparent; color:var(--gold-soft) !important; border:1px solid var(--gold-soft); border-radius:2px; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase; transition:background .3s ease, color .3s ease, transform .12s ease; } .hf-summary-cta .checkout-button:hover{ background:transparent; color:var(--gold-soft) !important; } .hf-summary-cta .checkout-button:active{ transform:scale(.97); } .hf-cart-assurances{ list-style:none; margin:clamp(24px,3vh,32px) 0 0; padding:0; display:flex; flex-direction:column; gap:16px; } .hf-cart-assurances li{ display:flex; gap:13px; align-items:flex-start; font-family:var(--body); font-size:13px; line-height:1.5; color:var(--muted); } .hf-cart-assurances svg{ width:20px; height:20px; flex:0 0 auto; color:var(--gold-soft); margin-top:1px; } /* ============ CHECKOUT SUR MESURE — coordonnées + récap/paiement sticky ============ */ .hf-checkout-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr); gap:clamp(36px,4.5vw,84px); align-items:start; max-width:1240px; margin:0 auto; } .hf-checkout-main{ min-width:0; } .hf-checkout-aside-in{ position:sticky; top:calc(var(--frame) + 100px); } /* En-têtes de section */ .hf-checkout .woocommerce-billing-fields > h3, .hf-checkout .woocommerce-shipping-fields h3, .hf-checkout .woocommerce-additional-fields > h3{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.07em; color:var(--white); font-size:clamp(18px,1.9vw,23px); margin:0 0 clamp(20px,3vh,26px); padding-bottom:14px; border-bottom:1px solid var(--line); } .hf-checkout .woocommerce-shipping-fields, .hf-checkout .woocommerce-additional-fields{ margin-top:clamp(34px,5vh,54px); } .hf-checkout-review-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.07em; color:var(--white); font-size:clamp(17px,1.7vw,22px); margin:0 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line); } /* Coupon relogé dans l'aside */ .hf-checkout-coupon:empty{ display:none; } .hf-checkout-coupon{ margin:0 0 22px; } .hf-checkout-coupon .woocommerce-form-coupon-toggle{ margin:0; } .hf-checkout-coupon .woocommerce-form-coupon-toggle .woocommerce-info{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:1px solid var(--line); border-top:1px solid var(--line); border-radius:0; padding:15px 18px; margin:0; font-family:var(--body); font-style:italic; font-size:13.5px; color:var(--cream); } .hf-checkout-coupon .woocommerce-info::before{ display:none !important; } .hf-checkout-coupon .woocommerce-info .button{ display:none; } .hf-checkout-coupon .showcoupon{ color:var(--gold-soft) !important; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; border-bottom:1px solid transparent; } .hf-checkout-coupon .showcoupon:hover{ border-bottom-color:var(--gold-soft); } .hf-checkout-coupon form.checkout_coupon{ border:1px solid var(--line); border-radius:0; padding:20px; margin:0; background:rgba(255,255,255,.012); } .hf-checkout-coupon form.checkout_coupon > p:first-of-type{ display:none; } .hf-checkout-coupon form.checkout_coupon .form-row{ width:100%; float:none; margin:0 0 12px; padding:0; } .hf-checkout-coupon form.checkout_coupon .form-row-last{ margin-bottom:0; } .hf-checkout-coupon form.checkout_coupon input.input-text{ width:100%; height:46px; background:var(--field-bg); border:1px solid var(--field-line); border-radius:0; color:var(--white); font-family:var(--body); font-size:14px; padding:0 14px; } .hf-checkout-coupon form.checkout_coupon input.input-text:focus{ outline:none; border-color:var(--gold-soft); } .hf-checkout-coupon form.checkout_coupon button{ width:100%; } /* Panneau récap (droite) */ .hf-checkout-summary{ border:1px solid var(--line); border-radius:2px; padding:clamp(24px,2.6vw,34px); background:rgba(255,255,255,.012); } .hf-checkout-lines{ display:flex; flex-direction:column; gap:18px; padding-bottom:22px; margin-bottom:20px; border-bottom:1px solid var(--line); } .hf-co-line{ display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; } /* Fond gris comme le cadre produit : le dégradé sombre jurait avec les photos, qui portent déjà leur propre fond clair. */ .hf-co-line-media{ position:relative; width:54px; height:54px; border-radius:2px; overflow:hidden; background:var(--media-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .hf-co-line-media img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; } .hf-co-line-name{ font-family:var(--title); font-style:italic; font-size:15px; color:var(--white); line-height:1.3; min-width:0; } /* Variations : une ligne « label : valeur » par option. */ .hf-co-line-name .variation{ margin:7px 0 0; padding:0; font-family:var(--body); font-style:normal; font-size:12.5px; line-height:1.85; overflow:hidden; } .hf-co-line-name .variation dt, .hf-co-line-name .variation dd{ display:inline; float:none; clear:none; margin:0; padding:0; width:auto; } .hf-co-line-name .variation dt{ font-weight:400; font-style:normal; color:var(--muted); } .hf-co-line-name .variation dd{ margin-left:6px; color:var(--cream); font-style:italic; } .hf-co-line-name .variation dd p{ display:inline; margin:0; } .hf-co-line-name .variation dd::after{ content:"\A"; white-space:pre; } /* Prix de ligne — Fraunces light. */ .hf-co-line-total{ font-family:var(--body); font-style:italic; font-weight:300; font-size:16px; letter-spacing:.01em; color:var(--gold-soft); white-space:nowrap; } /* Paiement dans l'aside */ #order_review #payment{ background:none !important; border:0; margin-top:24px; } #order_review #payment ul.payment_methods{ list-style:none; border:1px solid var(--line) !important; border-radius:0; padding:18px 20px !important; margin:0 !important; } #order_review #payment ul.payment_methods li{ margin:0; color:var(--cream); background:none; } #order_review #payment ul.payment_methods label{ color:var(--white) !important; font-family:var(--body) !important; text-transform:none !important; letter-spacing:0 !important; font-size:15px !important; } #order_review #payment div.payment_box{ background:rgba(255,255,255,.04) !important; color:var(--cream); font-family:var(--body); font-style:italic; font-size:13.5px; margin:12px 0 0; } #order_review #payment div.payment_box::before{ border-bottom-color:rgba(255,255,255,.04) !important; } /* Même écart que celui qui sépare le récapitulatif du bloc de paiement (voir « margin-top:24px » sur #order_review #payment). */ /* En flux normal, les blancs du gabarit entre les balises forment une ligne fantôme d'environ 16 px avant le bouton : le conteneur passe en flex, où ces nœuds de texte sont ignorés. L'écart vaut alors exactement le remplissage. */ #order_review #payment .place-order{ padding:24px 0 0 !important; float:none; width:100%; display:flex; flex-direction:column; } /* margin:0 — le bouton porte une marge haute de 16 px qui s'ajoutait au remplissage du cadre et déséquilibrait l'écart. */ #order_review #payment #place_order{ width:100%; min-height:58px; float:none; margin:0; font-size:12px; letter-spacing:.2em; } /* Le conteneur des conditions est vide depuis que la mention de confidentialité est passée sous le bouton : il ne doit plus occuper de place. */ #order_review .woocommerce-terms-and-conditions-wrapper{ display:none; } .product-subtotal, .product-price{ color:var(--gold-soft) !important; font-family:var(--mono); } /* ============ COMMANDE (checkout) ============ */ .woocommerce-checkout h3{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.08em; color:var(--white); font-size:clamp(18px,2vw,24px); border-bottom:1px solid rgba(244,239,230,.12); padding-bottom:14px; margin-bottom:22px; } .woocommerce-checkout #customer_details{ margin-bottom:30px; } .woocommerce-checkout .woocommerce-checkout-review-order-table{ background:rgba(255,255,255,.02); } .woocommerce-checkout #payment{ background:rgba(255,255,255,.02); border-radius:0; border:1px solid rgba(244,239,230,.12); } .woocommerce-checkout #payment ul.payment_methods{ border-bottom:1px solid rgba(244,239,230,.12); } .woocommerce-checkout #payment div.payment_box{ background:rgba(0,0,0,.4); color:#cfc2ac; } .woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:rgba(0,0,0,.4); } .woocommerce-checkout #place_order{ width:100%; margin-top:16px; } .woocommerce-checkout .order-total .amount{ color:var(--gold-soft); } /* ============ MON COMPTE — TABLEAU DE BORD ============ */ .woocommerce-account .woocommerce-MyAccount-navigation{ width:24%; } .woocommerce-account .woocommerce-MyAccount-content{ width:70%; } /* Navigation façon maison : filet doré à gauche sur l'onglet actif. */ /* En-tête client de la barre latérale */ .hf-account-nav-head{ padding:0 0 22px; margin-bottom:6px; border-bottom:1px solid var(--line); } .hf-account-eyebrow{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:10px; } .hf-account-name{ display:block; font-family:var(--title); font-style:italic; font-weight:300; font-size:clamp(20px,2vw,26px); color:var(--white); line-height:1.1; } .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0; } .woocommerce-MyAccount-navigation ul li{ border-bottom:1px solid rgba(244,239,230,.08); } .woocommerce-MyAccount-navigation ul li a{ display:flex; align-items:center; gap:13px; padding:15px 4px 15px 16px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border-left:1px solid transparent; transition:color .3s ease, border-color .3s ease, padding .3s ease; } .woocommerce-MyAccount-navigation .hf-nav-ico{ width:17px; height:17px; flex:0 0 auto; opacity:.85; transition:color .3s ease; } .woocommerce-MyAccount-navigation ul li a:hover{ color:var(--cream); } .woocommerce-MyAccount-navigation ul li.is-active a{ color:var(--gold-soft); border-left-color:var(--gold-soft); padding-left:22px; } .woocommerce-MyAccount-content{ font-family:var(--body); color:#d8ccb6; line-height:1.7; } .woocommerce-MyAccount-content a:not(.button){ color:var(--gold-soft); text-decoration:none; } .hf-dash-card, .hf-dash-order, .hf-dash-advisor-cta, .woocommerce-MyAccount-navigation a{ text-decoration:none; } /* ---- Tableau de bord sur mesure ---- */ .hf-dash-head{ margin-bottom:clamp(32px,5vh,48px); } .hf-dash-eyebrow{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:14px; } .hf-dash-hello{ font-family:var(--title); font-style:normal; font-weight:300; font-size:clamp(26px,3.4vw,42px); letter-spacing:.01em; color:var(--white); margin:0 0 16px; line-height:1.05; } .hf-dash-intro{ font-family:var(--body); font-style:italic; font-size:clamp(15px,1.35vw,17px); line-height:1.7; color:var(--cream); max-width:52ch; margin:0; } .hf-dash-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); margin-bottom:clamp(30px,4.6vh,46px); } .hf-dash-card{ display:block; border:1px solid var(--line); border-radius:2px; padding:clamp(20px,2.2vw,28px); color:var(--cream) !important; transition:border-color .3s ease, background .3s ease, transform .12s ease; } .hf-dash-card:hover{ border-color:rgba(199,161,92,.5); background:rgba(255,255,255,.02); } .hf-dash-card:active{ transform:scale(.99); } .hf-dash-card svg{ width:26px; height:26px; color:var(--gold-soft); display:block; margin-bottom:18px; } .hf-dash-card-k{ display:block; font-family:var(--title); font-style:italic; font-size:30px; color:var(--white); line-height:1; margin-bottom:6px; } .hf-dash-card-l{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--white); margin-bottom:7px; } .hf-dash-card-d{ display:block; font-family:var(--body); font-size:13px; color:var(--muted); } .hf-dash-sub{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 16px; } .hf-dash-recent{ margin-bottom:clamp(28px,4vh,40px); } .hf-dash-order{ display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:clamp(14px,2vw,28px); border:1px solid var(--line); border-radius:2px; padding:clamp(18px,2vw,24px) clamp(20px,2.2vw,28px); color:var(--cream) !important; transition:border-color .3s ease; } .hf-dash-order:hover{ border-color:rgba(199,161,92,.5); } .hf-dash-order-no{ font-family:var(--title); font-style:italic; font-size:18px; color:var(--white); } .hf-dash-order-date{ font-family:var(--body); font-size:13px; color:var(--muted); } .hf-dash-order-status{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); } .hf-dash-order-total{ font-family:var(--mono); font-size:14px; color:var(--gold-soft); font-weight:400; } .hf-dash-order-total .amount, .hf-dash-order-total bdi{ color:var(--gold-soft) !important; } .hf-dash-order-view{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:2px; padding:8px 14px; } .hf-dash-order:hover .hf-dash-order-view{ color:var(--gold-soft); border-color:var(--gold-soft); } .hf-dash-advisor{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:clamp(28px,4vh,40px); } .hf-dash-advisor-txt p{ font-family:var(--body); font-style:italic; font-size:14.5px; line-height:1.65; color:var(--cream); max-width:46ch; margin:8px 0 0; } .hf-dash-advisor-cta{ flex:0 0 auto; display:inline-flex; align-items:center; height:50px; padding:0 28px; border:1px solid var(--gold-soft); border-radius:2px; color:var(--gold-soft) !important; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; transition:background .3s ease, color .3s ease; } .hf-dash-advisor-cta:hover{ background:var(--gold-soft); color:#000 !important; } /* Formulaire « Détails du compte » : légende du bloc mot de passe en filet doré. */ .woocommerce-EditAccountForm fieldset{ border:1px solid var(--line); border-radius:0; padding:clamp(18px,2.6vh,28px) clamp(18px,2.4vw,28px); margin:clamp(14px,2vh,22px) 0 clamp(24px,3vh,32px); } .woocommerce-EditAccountForm legend{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft); padding:0 10px; } .woocommerce-EditAccountForm .woocommerce-Button{ margin-top:6px; } /* ---- Confirmation d'e-mail (Woo 11 : lier les commandes invitées) ---- */ .hf-verify{ margin:0 0 clamp(28px,4vh,42px); padding:0 0 clamp(24px,3.4vh,34px); border-bottom:1px solid var(--line); } .hf-verify-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; letter-spacing:.06em; font-size:clamp(20px,2.2vw,28px); color:var(--white); margin:0 0 12px; } .hf-verify-lead{ font-family:var(--body); font-style:italic; font-weight:300; font-size:clamp(14px,1.15vw,16px); line-height:1.75; color:var(--cream); max-width:48ch; margin:0 0 22px; } .hf-verify .button{ font-style:normal; } /* Notices compte : plus de filet fantôme, bouton sous le texte, jamais en italique. */ .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:16px; text-align:left; background:none; border:0; border-top:0; border-radius:0; padding:0 0 clamp(22px,3vh,30px); font-family:var(--body); font-style:normal; font-weight:300; font-size:clamp(15px,1.3vw,17px); letter-spacing:0; color:var(--cream); } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-notice::before{ display:none !important; } .woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button, .woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button{ order:2; margin:0; font-style:normal; align-self:flex-start; } /* Pages légales : le filet de section ne doit pas s'inviter sur la boutique. */ .woocommerce-page .legal-body > h2{ border-top:0; padding-top:0; } .woocommerce-page .legal-body > h2::before{ display:none; } /* Vérifier l'e-mail (commande invitée) / mot de passe / retrait. */ .woocommerce-verify-email, .woocommerce-order-withdrawal-content{ max-width:560px; margin:0 auto; } .woocommerce-verify-email p, .woocommerce-order-withdrawal-content__intro, .woocommerce-order-withdrawal-content__note{ font-family:var(--body); font-style:italic; font-weight:300; font-size:clamp(14px,1.15vw,16px); line-height:1.75; color:var(--cream); } .woocommerce-order-withdrawal-content .button{ font-style:normal; } .woocommerce-order-withdrawal-content__steps{ list-style:none; margin:0 0 28px; padding:0; display:flex; gap:18px; } .woocommerce-order-withdrawal-content__step{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .woocommerce-order-withdrawal-content__step--current{ color:var(--gold-soft); } /* ============ MON COMPTE — CONNEXION / CRÉATION (façon maison) ============ */ .hf-auth{ max-width:1040px; margin:0 auto; } /* Connexion / création en ONGLETS : une seule colonne, un seul formulaire à la fois. Le titre de section fait doublon avec l'onglet, on le retire. */ .hf-auth--tabs{ max-width:520px; } .hf-auth--tabs .hf-auth-title{ display:none; } .hf-auth-tabs{ display:flex; gap:0; margin:0 0 clamp(30px,4vh,44px); border-bottom:1px solid var(--line); } .hf-auth-tab{ flex:1 1 0; appearance:none; background:none; border:0; cursor:pointer; padding:0 8px 16px; margin-bottom:-1px; border-bottom:1px solid transparent; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--label); transition:color .3s ease, border-color .3s ease; } /* Onglet inactif survolé : blanc franc, l'écart avec l'état au repos (taupe) doit se voir immédiatement. */ .hf-auth-tab:hover{ color:#fff; } .hf-auth-tab.is-active{ color:var(--gold-soft); border-bottom-color:var(--gold-soft); } .hf-auth-tab:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:3px; } .hf-auth--two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(38px,6vw,92px); align-items:start; position:relative; } /* Filet vertical dégradé entre connexion et création (comme Cartier). */ .hf-auth--two::before{ content:""; position:absolute; top:8%; bottom:8%; left:50%; width:1px; background:linear-gradient(180deg,transparent,var(--line) 14%,var(--line) 86%,transparent); } .hf-auth-col{ min-width:0; } /* Prénom et nom sur une même ligne (une seule colonne sous 560 px). */ .hf-auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(16px,2.4vw,26px); } @media (max-width:560px){ .hf-auth-row{ grid-template-columns:1fr; } /* Prénom / nom (compte, adresses) : empilés, sinon ~130px par champ. */ .woocommerce form .form-row-first, .woocommerce form .form-row-last{ width:100%; float:none; } } .hf-auth-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:uppercase; font-size:clamp(19px,2vw,26px); letter-spacing:.06em; color:var(--white); margin:0 0 16px; } .hf-auth-lead{ font-family:var(--body); font-style:italic; font-size:clamp(14px,1.15vw,16px); line-height:1.75; color:var(--cream); margin:0 0 clamp(26px,3.4vh,36px); max-width:42ch; } .hf-auth-perks{ list-style:none; margin:0 0 clamp(28px,3.6vh,40px); padding:0; display:flex; flex-direction:column; gap:14px; } .hf-auth-perks li{ position:relative; padding-left:26px; font-family:var(--body); font-size:15px; line-height:1.5; color:var(--cream); } .hf-auth-perks li::before{ content:""; position:absolute; left:0; top:.62em; width:10px; height:1px; background:var(--gold-soft); } /* Champs façon filet (underline) épuré — surcharge le champ « boîte » global. */ .hf-auth .form-row{ margin:0 0 clamp(22px,2.8vh,30px); } /* Neutralise le clearfix ::before/::after de WooCommerce (items fantômes en flex). */ .hf-auth .form-row::before, .hf-auth .form-row::after{ content:none !important; display:none !important; } .hf-auth .woocommerce-form-row label{ display:block; margin-bottom:9px; } .hf-auth .woocommerce-form .form-row input.input-text{ width:100%; background:transparent; border:none; border-bottom:1px solid rgba(244,239,230,.28); border-radius:0; padding:10px 2px; color:var(--white); font-family:var(--body); font-size:16px; } .hf-auth .woocommerce-form .form-row input.input-text:focus{ outline:none; border-bottom-color:var(--gold-soft); background:transparent; } .hf-auth .woocommerce-form .form-row select{ background-color:transparent; border:none; border-bottom:1px solid rgba(244,239,230,.28); border-radius:0; padding:10px 32px 10px 2px; background-position:right 4px center; color:var(--white); font-family:var(--body); font-size:16px; } .hf-auth .woocommerce-form .form-row select:hover{ border-bottom-color:rgba(244,239,230,.5); } .hf-auth .woocommerce-form .form-row select:focus{ outline:none; border-bottom-color:var(--gold-soft); background-color:transparent; } .hf-auth .hf-auth-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:6px; } .hf-auth .woocommerce-form-login__rememberme{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--label); display:inline-flex; align-items:center; gap:8px; } .hf-auth .hf-auth-actions .button{ margin:0; min-width:190px; height:52px; } /* Connexion et création : même bouton, contour au repos, plein au survol. */ .hf-auth .hf-auth-actions .button{ background:transparent; color:var(--gold-soft) !important; border:1px solid var(--gold-soft); } .hf-auth .hf-auth-actions .button:hover{ background:var(--gold-soft); color:#000 !important; } .hf-auth .lost_password{ margin:20px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; } .hf-auth .lost_password a{ color:var(--label); } .hf-auth .lost_password a:hover{ color:var(--gold-soft); } /* Retire les cadres form.login / form.register par défaut de WooCommerce. */ .hf-auth form.login, .hf-auth form.register, .hf-auth .woocommerce-form-login, .hf-auth .woocommerce-form-register{ border:0 !important; padding:0 !important; margin:0 !important; background:none !important; border-radius:0; } /* Case « Se souvenir de moi » : case sur mesure (filet → dorée cochée). */ /* .hf-auth-actions dans le sélecteur → spécificité > .woocommerce form .form-row label{display:block} */ .hf-auth .hf-auth-actions .woocommerce-form-login__rememberme{ display:inline-flex !important; align-items:center; gap:10px; cursor:pointer; user-select:none; line-height:1; } .hf-auth .woocommerce-form__input-checkbox{ -webkit-appearance:none; appearance:none; width:16px; height:16px; margin:0; flex:0 0 auto; position:relative; border:1px solid rgba(244,239,230,.35); border-radius:0; background:transparent; cursor:pointer; transition:border-color .25s ease, background .25s ease; } .hf-auth .woocommerce-form-login__rememberme:hover .woocommerce-form__input-checkbox{ border-color:var(--gold-soft); } .hf-auth .woocommerce-form__input-checkbox:checked{ background:var(--gold-soft); border-color:var(--gold-soft); } .hf-auth .woocommerce-form__input-checkbox:checked::after{ content:""; position:absolute; left:5px; top:2px; width:4px; height:8px; border:solid #0a0a0a; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); } .hf-auth .woocommerce-form__input-checkbox:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:2px; } /* Afficher / masquer le mot de passe. */ .hf-auth .show-password-input{ color:var(--muted); top:1.1em; } .hf-auth .show-password-input.display-password, .hf-auth .show-password-input:hover{ color:var(--gold-soft); } /* Mention vie privée (inscription) : fine et discrète. */ .hf-auth-register .register p:not(.form-row):not(.woocommerce-form-row), .hf-auth .woocommerce-privacy-policy-text{ font-family:var(--body); font-size:12.5px; line-height:1.6; color:var(--muted); margin:2px 0 24px; } .hf-auth-register .register p a, .hf-auth .woocommerce-privacy-policy-text a{ color:var(--gold-soft); } /* Signature : losange doré au centre du filet (clin d'œil joaillier). */ .hf-auth--two::after{ content:""; position:absolute; left:50%; top:50%; width:6px; height:6px; background:var(--gold-soft); transform:translate(-50%,-50%) rotate(45deg); } /* Auth colonne unique (mot de passe oublié) */ .hf-auth--single{ max-width:460px; } .hf-auth--single .hf-auth-title, .hf-auth--single .hf-auth-lead, .hf-auth--single .hf-auth-back{ text-align:center; } .hf-auth--single .hf-auth-lead{ margin-left:auto; margin-right:auto; } .hf-auth--single .hf-auth-actions{ justify-content:center; } .hf-auth-back{ margin:22px 0 0; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; } .hf-auth-back a{ color:var(--muted) !important; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; } .hf-auth-back a:hover{ color:var(--gold-soft) !important; border-bottom-color:var(--gold-soft); } /* Panier vide (bespoke) */ .hf-empty{ max-width:560px; margin:0 auto; text-align:center; padding:clamp(24px,6vh,70px) 0; } .hf-empty-eyebrow{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:20px; } /* Casse naturelle : « No items selected » n'est pas un intitulé de rubrique. */ .hf-empty-title{ font-family:var(--title); font-style:normal; font-weight:300; text-transform:none; letter-spacing:.02em; font-size:clamp(26px,3.4vw,40px); color:var(--white); margin:0 0 clamp(18px,2.6vh,24px); line-height:1.08; } .hf-empty-lead{ font-family:var(--body); font-style:italic; font-size:clamp(15px,1.4vw,18px); line-height:1.75; color:var(--cream); max-width:44ch; margin:0 auto clamp(30px,4.6vh,44px); } .hf-empty-cta{ min-width:250px; height:54px; } /* ============ MINI-PANIER (tiroir) ============ */ .cart-drawer .woocommerce-mini-cart{ list-style:none; margin:0; padding:0; } /* Article : image à gauche, nom + quantité, croix en haut à droite. */ /* !important : WooCommerce core .cart_list li{ padding:4px 0 } est plus spécifique. */ .cart-drawer .woocommerce-mini-cart-item{ position:relative; display:block; min-height:66px; padding:18px 30px 18px 82px !important; border-bottom:1px solid rgba(244,239,230,.1); } .cart-drawer .woocommerce-mini-cart-item img{ position:absolute; left:0; top:18px; width:66px !important; height:66px; object-fit:cover; border-radius:4px; margin:0 !important; float:none !important; background:var(--media-bg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); } .cart-drawer .woocommerce-mini-cart-item > a:not(.remove){ display:block; font-family:var(--title); font-style:italic; font-size:16px; color:var(--white); line-height:1.3; } .cart-drawer .woocommerce-mini-cart-item > a:not(.remove):hover{ color:var(--gold-soft); } /* Variations : une ligne « label : valeur » par option. */ .cart-drawer .woocommerce-mini-cart-item .variation{ margin:7px 0 0; padding:0; font-family:var(--body); font-size:12.5px; line-height:1.85; overflow:hidden; } .cart-drawer .woocommerce-mini-cart-item .variation dt, .cart-drawer .woocommerce-mini-cart-item .variation dd{ display:inline; float:none; clear:none; margin:0; padding:0; width:auto; } .cart-drawer .woocommerce-mini-cart-item .variation dt{ font-weight:400; font-style:normal; color:var(--muted); } .cart-drawer .woocommerce-mini-cart-item .variation dd{ margin-left:6px; color:var(--cream); font-style:italic; } .cart-drawer .woocommerce-mini-cart-item .variation dd p{ display:inline; margin:0; } .cart-drawer .woocommerce-mini-cart-item .variation dd::after{ content:"\A"; white-space:pre; } /* Prix de l'article (1 × CHF …) — en Fraunces. */ .cart-drawer .woocommerce-mini-cart-item .quantity{ display:block; margin:9px 0 0; font-family:var(--body); font-style:italic; font-weight:300; font-size:14px; letter-spacing:.01em; color:var(--gold-soft); } .cart-drawer .woocommerce-mini-cart-item a.remove{ position:absolute; top:18px; transform:none; right:0; width:24px; height:24px; font-size:0; line-height:0; color:var(--muted) !important; } .cart-drawer .woocommerce-mini-cart-item a.remove:hover{ color:var(--gold-soft) !important; background:none; } /* La croix est dessinée (deux traits) et non plus le caractère « × » : ses métriques de police la décentraient dans le rond, surtout sur téléphone. */ .cart-drawer .woocommerce-mini-cart-item a.remove::before{ content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; transform:translate(-50%,-50%) rotate(45deg); background:linear-gradient(currentColor,currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor,currentColor) center / 1px 100% no-repeat; } /* Sous-total : pas de border-top (le dernier article a déjà une bordure). */ .cart-drawer .woocommerce-mini-cart__total{ display:flex; align-items:baseline; justify-content:space-between; padding:20px 0 22px; margin:0; border:none; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); } .cart-drawer .woocommerce-mini-cart__total strong{ color:var(--cream); font-weight:400; } /* Montant du sous-total — en Fraunces. */ .cart-drawer .woocommerce-mini-cart__total .amount{ color:var(--gold-soft); font-family:var(--body); font-style:italic; font-weight:400; font-size:18px; letter-spacing:.01em; text-transform:none; } .cart-drawer .woocommerce-mini-cart__buttons{ display:flex; flex-direction:column; gap:12px; margin:0; padding:0; } .cart-drawer .woocommerce-mini-cart__buttons a{ margin:0; width:100%; height:50px; display:flex; align-items:center; justify-content:center; padding:0; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; border-radius:0; transition:background .3s ease, color .3s ease, border-color .3s ease; } .cart-drawer .woocommerce-mini-cart__buttons a.checkout{ background:transparent; color:var(--gold-soft) !important; border:1px solid var(--gold-soft); order:1; } .cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover{ background:var(--gold-soft); color:#000 !important; } .cart-drawer .woocommerce-mini-cart__buttons a:not(.checkout){ background:transparent; color:var(--cream) !important; border:1px solid var(--line); order:2; } .cart-drawer .woocommerce-mini-cart__buttons a:not(.checkout):hover{ border-color:var(--gold-soft); color:var(--gold-soft) !important; } .cart-drawer .woocommerce-mini-cart__empty-message{ font-family:var(--body); font-style:italic; color:var(--muted); text-align:center; padding:40px 0; } /* ============ APPARITION — blur fade-in ============ */ .hf-woo ul.products li.product, .single-product div.product > .hf-pdp-hero, .woocommerce-page .legal-body > *{ animation:hfWooIn .9s cubic-bezier(.2,.7,.2,1) both; } @keyframes hfWooIn{ from{ opacity:0; filter:blur(12px); transform:translateY(24px); } to{ opacity:1; filter:blur(0); transform:none; } } /* Apparition au scroll (blur fade-in) — sections du bas de la fiche produit. */ .hf-reveal{ opacity:0; filter:blur(15px); transform:translateY(28px); transition:opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(.2,.7,.2,1); } .hf-reveal.in{ opacity:1; filter:blur(0); transform:none; } .hf-spec.hf-reveal{ transition-delay:calc(var(--r,0) * .07s); } .hf-woo ul.products li.product:nth-child(2){ animation-delay:.08s; } .hf-woo ul.products li.product:nth-child(3){ animation-delay:.16s; } .hf-woo ul.products li.product:nth-child(4){ animation-delay:.24s; } .hf-woo ul.products li.product:nth-child(5){ animation-delay:.32s; } .hf-woo ul.products li.product:nth-child(6){ animation-delay:.4s; } @media (prefers-reduced-motion:reduce){ .hf-reveal{ opacity:1; filter:none; transform:none; transition:none; } .hf-woo ul.products li.product, .single-product div.product > *, .woocommerce-page .legal-body > *{ animation:none; } } /* ============ PAGES SECONDAIRES (fil d'Ariane, merci, compte, adresses, avis, stock…) ============ */ /* ---- Fil d'Ariane : kicker fin, centré ---- */ .woocommerce .woocommerce-breadcrumb{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 clamp(26px,4vh,46px); text-align:center; } .woocommerce .woocommerce-breadcrumb a{ color:var(--muted); transition:color .3s ease; } .woocommerce .woocommerce-breadcrumb a:hover{ color:var(--gold-soft); } /* ---- En-tête d'archive (catégorie / recherche) ---- */ .term-description, .woocommerce-products-header{ text-align:center; } .term-description{ font-family:var(--body); font-style:italic; font-size:clamp(15px,1.3vw,18px); line-height:1.8; color:var(--cream); max-width:64ch; margin:0 auto clamp(30px,5vh,54px); } /* ---- Barre outils (résultats + tri) ---- */ .woocommerce .woocommerce-result-count{ margin:0 0 clamp(22px,3vh,34px); } /* ---- Notation étoiles (or) ---- */ .woocommerce .star-rating span::before, .woocommerce p.stars a::before, .woocommerce p.stars a:hover::before{ color:var(--gold-soft); } .woocommerce .star-rating{ color:var(--gold-soft); } .woocommerce ul.products li.product .star-rating{ margin:0 auto 8px; } /* ---- Statut de stock ---- */ .woocommerce .stock{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; } .woocommerce .stock.in-stock{ color:var(--gold-soft); } .woocommerce .stock.out-of-stock{ color:#b4536b; } /* ---- Quantité : champ épuré (masque les molettes) ---- */ .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .woocommerce .quantity input.qty{ -moz-appearance:textfield; } /* ---- Panier vide ---- */ .woocommerce .cart-empty, .woocommerce .wc-empty-cart-message{ font-family:var(--title); font-style:italic; font-weight:300; font-size:clamp(20px,2.4vw,30px); color:var(--white); text-align:center; margin:clamp(30px,7vh,80px) 0 clamp(24px,4vh,34px); } .woocommerce .return-to-shop{ text-align:center; } /* ---- Merci / commande reçue ---- */ .woocommerce-order{ max-width:780px; margin:0 auto; } .woocommerce-order > p:first-of-type, .woocommerce-thankyou-order-received{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; font-size:clamp(22px,2.6vw,34px); letter-spacing:.06em; color:var(--gold-soft); text-align:center; margin:0 0 clamp(30px,5vh,50px); } ul.woocommerce-order-overview{ list-style:none; margin:0 0 clamp(36px,6vh,60px); padding:clamp(22px,3vh,32px); display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:22px; border:1px solid var(--line); } ul.woocommerce-order-overview li{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:none !important; padding:0; } ul.woocommerce-order-overview li strong{ display:block; margin-top:8px; font-family:var(--body); font-style:italic; font-size:16px; text-transform:none; letter-spacing:0; color:var(--white); } /* ---- Confirmation de commande (bespoke) ---- */ .hf-thankyou{ max-width:820px; margin:0 auto; } .hf-ty-intro{ text-align:center; margin-bottom:clamp(34px,5.5vh,56px); } .hf-ty-eyebrow{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-soft); margin-bottom:18px; } .hf-ty-hello{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; letter-spacing:.04em; font-size:clamp(26px,3.6vw,44px); color:var(--white); margin:0 0 clamp(16px,2.4vh,24px); line-height:1.05; } .hf-ty-lead{ font-family:var(--body); font-style:italic; font-size:clamp(16px,1.5vw,20px); line-height:1.7; color:var(--cream); max-width:52ch; margin:0 auto; } .hf-ty-next{ font-family:var(--body); font-size:clamp(13.5px,1.2vw,15px); line-height:1.75; color:var(--muted); max-width:58ch; margin:clamp(20px,3vh,28px) auto 0; padding-top:clamp(20px,3vh,26px); border-top:1px solid var(--line); } .hf-ty-actions{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; margin:clamp(30px,5vh,52px) 0 clamp(44px,7vh,64px); } .hf-ty-actions .button{ min-width:230px; height:54px; } .hf-ty-link{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) !important; border-bottom:1px solid transparent; transition:color .3s ease, border-color .3s ease; } .hf-ty-link:hover{ color:var(--gold-soft) !important; border-bottom-color:var(--gold-soft); } /* Aperçu : grille alignée (4 colonnes égales → tout sur une rangée nette). */ .hf-thankyou ul.woocommerce-order-overview{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,30px); padding:clamp(24px,3.2vh,34px) clamp(22px,3vw,38px); } /* Neutralise le clearfix ::before/::after de WooCommerce (item fantôme en grille). */ .hf-thankyou ul.woocommerce-order-overview::before, .hf-thankyou ul.woocommerce-order-overview::after{ content:none !important; display:none !important; } .hf-thankyou ul.woocommerce-order-overview li{ text-align:center; } .woocommerce-order .woocommerce-order-details__title, .woocommerce-order .woocommerce-column__title, .woocommerce-customer-details h2, /* Même titraille dans « Mon compte » : détail de commande, carnet d'adresses et formulaire d'adresse gardaient le gras par défaut de WooCommerce. */ .woocommerce-MyAccount-content .woocommerce-order-details__title, .woocommerce-MyAccount-content .woocommerce-column__title, .woocommerce-MyAccount-content .woocommerce-Address-title h2, .woocommerce-MyAccount-content .woocommerce-Address-title h3, .woocommerce-MyAccount-content form > h2, .woocommerce-MyAccount-content form > h3{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; letter-spacing:.08em; font-size:clamp(16px,1.7vw,21px); color:var(--white); margin:0 0 18px; } /* ---- Mon compte : intro tableau de bord ---- */ .woocommerce-account .woocommerce-MyAccount-content p:first-child{ font-family:var(--body); font-style:normal; font-weight:300; font-size:16px; color:var(--cream); } /* Plus d'espace au-dessus de l'indication de champ (ex. « This will be how your name… »). */ .woocommerce-EditAccountForm .form-row > span:not(.woocommerce-input-wrapper){ display:block; margin-top:12px; } .woocommerce-account .woocommerce-MyAccount-content mark{ background:none; color:var(--gold-soft); } /* ---- Commandes (tableau) ---- */ .woocommerce-orders-table__cell-order-actions .button{ padding:9px 16px; font-size:10px; } .woocommerce-orders-table__cell-order-status{ font-family:var(--mono); letter-spacing:.08em; color:var(--gold-soft); } /* ---- Adresses (deux cartes) ---- */ .woocommerce-account .woocommerce-Addresses.col2-set{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); width:100%; align-items:stretch; } /* Neutralise le clearfix ::before/::after de WooCommerce (items fantômes en grille). */ .woocommerce-account .woocommerce-Addresses.col2-set::before, .woocommerce-account .woocommerce-Addresses.col2-set::after{ display:none; } .woocommerce-account .woocommerce-Addresses .col-1, .woocommerce-account .woocommerce-Addresses .col-2{ width:auto; float:none; } .woocommerce-Address{ border:1px solid var(--line); padding:clamp(20px,2.6vh,28px); } .woocommerce-Address-title h3{ font-family:var(--title); font-style:italic; font-weight:300; color:var(--white); font-size:19px; margin:0; } .woocommerce-Address-title .edit{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); border:1px solid var(--line); padding:7px 13px; transition:color .3s ease, border-color .3s ease; } .woocommerce-Address-title .edit:hover{ color:var(--gold-soft); border-color:var(--gold-soft); } /* En-tête de formulaire compte (« Billing address » sur le formulaire d'adresse) — filet doré, cohérent avec le tableau de bord. */ .woocommerce-MyAccount-content form > h3{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; letter-spacing:.07em; color:var(--white); font-size:clamp(18px,2vw,24px); margin:0 0 clamp(22px,3vh,30px); padding-bottom:14px; border-bottom:1px solid var(--line); } .woocommerce-Address address{ font-family:var(--body); font-style:normal; color:var(--cream); line-height:1.75; margin-top:14px; } /* ---- Avis produit ---- */ .woocommerce #reviews #comments > h2, .woocommerce #review_form_wrapper h3, .woocommerce #reviews #respond .comment-reply-title{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; letter-spacing:.06em; color:var(--white); } .woocommerce #reviews ol.commentlist li{ background:none; } .woocommerce #reviews ol.commentlist li .comment-text{ border:1px solid var(--line); border-radius:0; padding:20px 24px; } .woocommerce #reviews .comment-author, .woocommerce #reviews .woocommerce-review__author{ font-family:var(--title); font-style:italic; color:var(--white); } .woocommerce #reviews .description{ font-family:var(--body); color:var(--cream); } /* ---- Cross-sells ---- */ .cross-sells > h2, .woocommerce .cart-collaterals .cross-sells h2{ font-family:var(--title); font-style:italic; font-weight:300; text-transform:uppercase; letter-spacing:.06em; color:var(--white); } /* ---- Séparateur doré discret sous les titres de page ---- */ .woocommerce-page .legal-main > h1::after, .hf-woo .woocommerce-products-header__title::after{ content:""; display:block; width:44px; height:1px; background:var(--gold-soft); margin:clamp(20px,2.6vh,26px) auto 0; } /* ============ RESPONSIVE — mobile / tablette ============ */ /* ---- Tablette (≤1024) : colonnes empilées, résumés non collants, zones tactiles ≥44px ---- */ /* ========================================================================== Virement bancaire — bloc « Coordonnées de paiement » (confirmation, compte) ========================================================================== */ .hf-pay{ margin:clamp(30px,5vh,52px) 0; padding:clamp(24px,3.2vw,38px); background:rgba(255,255,255,.025); border:1px solid var(--line); } .hf-pay-title{ margin:0 0 14px; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-soft); } .hf-pay-lead{ margin:0 0 22px; max-width:62ch; font-family:var(--body); font-size:15px; line-height:1.7; color:var(--cream); } .hf-pay-grid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(24px,4vw,54px); } .hf-pay-rows{ flex:1 1 320px; display:grid; grid-template-columns:minmax(110px,auto) 1fr; gap:11px clamp(16px,2vw,28px); margin:0; } .hf-pay-rows dt{ font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:3px; } .hf-pay-rows dd{ margin:0; font-family:var(--body); font-size:15px; line-height:1.5; color:var(--white); overflow-wrap:anywhere; } .hf-pay-rows dd:last-of-type{ color:var(--gold-lite); letter-spacing:.02em; } .hf-pay-qr{ flex:0 0 auto; margin:0; text-align:center; } .hf-pay-qr img{ display:block; width:220px; max-width:100%; height:auto; background:#fff; padding:10px; } .hf-pay-qr figcaption{ margin-top:10px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .hf-pay-note{ margin:22px 0 0; font-family:var(--body); font-size:14px; line-height:1.65; color:var(--muted); } @media (max-width:640px){ .hf-pay-grid{ flex-direction:column; align-items:stretch; } .hf-pay-rows{ grid-template-columns:1fr; gap:3px 0; } .hf-pay-rows dt{ padding-top:12px; } .hf-pay-qr{ margin-top:8px; } } @media (max-width:1024px){ /* Panier sur mesure : une colonne. */ .hf-cart-grid{ grid-template-columns:1fr; gap:44px; } .hf-cart-summary{ position:static; } .hf-cart-line-body{ flex-direction:column; } /* Quantité, sous-total et « Retirer » ne tiennent pas sur une ligne à côté de la vignette (≈220px) : « Retirer » passait hors écran. On autorise le retour à la ligne, « Retirer » se cale alors à droite. */ .hf-cart-line-controls{ align-items:center; flex-direction:row; flex-wrap:wrap; width:100%; justify-content:flex-start; gap:10px 18px; text-align:left; } .hf-cart-line-remove{ margin-left:auto; } /* Checkout sur mesure : une colonne. */ .hf-checkout-grid{ grid-template-columns:1fr; gap:44px; } .hf-checkout-aside-in{ position:static; } /* Fiche produit empilée, compacte : plein écran sans scroll. */ /* La navbar (logo centré + Menu + icônes) descend jusqu'à ~78px : avec un padding de 56px l'image passait dessous. On dégage la hauteur réelle. */ .single-product main.hf-woo{ padding-top:calc(var(--frame) + 148px); } .hf-pdp-hero{ grid-template-columns:1fr; gap:18px; min-height:0; align-items:start; padding-top:0; } .hf-pdp-summary-in{ position:static; max-width:none; } .hf-gal-viewport{ height:min(44vh, 440px);height:min(44svh, 440px); } .hf-gal-bar{ margin-top:12px; } .hf-pdp-options{ gap:12px; margin-bottom:16px; } .hf-pdp-acc{ margin-top:10px; } .hf-acc > summary{ padding:12px 0; min-height:44px; } .hf-spec{ grid-template-columns:1fr 1.6fr; gap:14px; } .woocommerce .cart-collaterals .cart_totals{ float:none; width:100%; } .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{ width:100%; float:none; } .woocommerce-account .woocommerce-MyAccount-content{ margin-top:36px; } .woocommerce-account .woocommerce-Addresses.col2-set{ grid-template-columns:1fr; } /* Fold déplié / iPad paysage : facturation | livraison côte à côte dans une colonne déjà étroite. */ .woocommerce-checkout #customer_details.col2-set{ grid-template-columns:1fr; } .hf-auth--two{ grid-template-columns:1fr; gap:48px; } .hf-auth--two::before{ display:none; } .hf-auth-register{ border-top:1px solid var(--line); padding-top:44px; } /* Zones tactiles ≥44px (desktop intact). */ .single_add_to_cart_button, .checkout-button, #place_order, .hf-cart-update, .hf-cart-coupon-btn, .hf-dash-advisor-cta, .hf-empty-cta, .woocommerce-form-login__submit, .woocommerce-Button, .hf-auth button[type="submit"]{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; } .hf-wear-btn{ min-height:44px; } .hf-size{ min-height:44px; } .hf-custom-input{ height:44px; max-width:none; font-size:16px; } .hf-cart-line-remove, a.remove{ min-height:44px; display:inline-flex; align-items:center; } /* Le rond garde sa taille (24 px) ; la zone tactile de 44 px est portée par un calque invisible, sans agrandir le cercle. */ .cart-drawer .woocommerce-mini-cart-item a.remove{ display:block; min-width:0; min-height:0; } .cart-drawer .woocommerce-mini-cart-item a.remove::after{ content:""; position:absolute; inset:-10px; } .woocommerce-MyAccount-navigation ul li a{ min-height:44px; } .hf-auth .show-password-input{ position:relative; } .hf-auth .show-password-input::after{ content:""; position:absolute; inset:-11px; } .hf-auth-tab{ min-height:44px; padding:12px 6px 14px; letter-spacing:.1em; white-space:normal; line-height:1.3; } .hf-swatch, .hf-gal-dot{ position:relative; } .hf-swatch::after{ content:""; position:absolute; inset:-10px; } /* Flèches de la galerie : 26px de dessin, 44px de zone tactile. */ .hf-gal-nav{ min-width:44px; min-height:44px; } .hf-gal-nav.prev{ left:4px; } .hf-gal-nav.next{ right:4px; } .hf-gal-dot::after{ content:""; position:absolute; inset:-18px; } } /* ---- Téléphone / petite tablette (≤768) : cartes empilées, CTA pleine largeur, tableaux en pile ---- */ @media (max-width:768px){ /* Tableau de bord : cartes et dernière commande empilées. */ .hf-dash-cards{ grid-template-columns:1fr; } .hf-dash-order{ grid-template-columns:1fr auto; row-gap:8px; } /* Aperçu commande (merci) : 2 colonnes. */ .hf-thankyou ul.woocommerce-order-overview{ grid-template-columns:repeat(2,1fr); row-gap:26px; } .woocommerce-checkout #customer_details.col2-set{ grid-template-columns:1fr; } .woocommerce .coupon .input-text{ min-width:0; width:100%; } .woocommerce-order-withdrawal-content__steps{ flex-wrap:wrap; gap:10px 18px; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-page input.input-text, .woocommerce-page textarea, .woocommerce-page select{ font-size:16px; } .hf-cart-coupon input.input-text, .hf-checkout-coupon form.checkout_coupon input.input-text{ font-size:16px; } /* CTA pleine largeur (plus de min-width susceptible de déborder). */ .hf-empty-cta, .hf-ty-actions .button, .hf-auth .hf-auth-actions .button, .hf-pdp-summary form.cart .button{ width:100%; min-width:0; } .hf-pdp-summary form.cart{ flex-wrap:wrap; } .hf-pdp-summary form.cart .quantity{ display:none; } .hf-pdp-summary form.cart .button{ flex:1 1 100%; } .hf-wear{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .hf-wear-btn{ min-width:0; width:100%; } #place_order{ width:100%; min-width:0; } /* Actions de confirmation : empilées. */ .hf-ty-actions{ flex-direction:column; gap:18px; } /* Coupon (panier) pleine largeur ; pied de panier empilé. */ .hf-cart-foot{ flex-direction:column; align-items:stretch; gap:16px; } .hf-cart-coupon{ width:100%; } .hf-cart-coupon input.input-text{ flex:1 1 auto; width:auto; } .hf-cart-update{ text-align:center; } /* Prénom / nom du checkout empilés. */ /* « form.hf-checkout » : la règle de WooCommerce (.woocommerce form .form-row-first) était plus spécifique et gardait prénom/nom côte à côte (~100px chacun sur téléphone). */ .woocommerce form.hf-checkout .form-row-first, .woocommerce form.hf-checkout .form-row-last{ width:100%; float:none; } .select2-container .select2-selection--single, .select2-container--default .select2-selection--single .select2-selection__rendered, .select2-container--default .select2-search--dropdown .select2-search__field{ font-size:16px; } /* Panneaux résumé : padding resserré. */ .hf-summary, .hf-checkout-summary{ padding:24px 20px; } /* Titres de page secondaires un peu plus compacts. */ .woocommerce-page .legal-main > h1, .hf-woo h1.entry-title{ font-size:clamp(26px,10vw,40px); } .woocommerce-account .legal-main{ padding-top:calc(var(--frame) + 148px); } /* Tableaux WooCommerce empilés (libellés data-title, actions pleine largeur). */ .woocommerce table.shop_table_responsive{ border:1px solid var(--line); } .woocommerce table.shop_table_responsive tbody tr, .woocommerce table.shop_table_responsive tr{ border-bottom:1px solid var(--line); display:block; } .woocommerce table.shop_table_responsive tr td{ display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:right; border-top:1px solid rgba(244,239,230,.06); padding:12px 16px; } .woocommerce table.shop_table_responsive tr td::before{ content:attr(data-title); float:none; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-soft); } .woocommerce-orders-table__cell-order-actions{ justify-content:flex-end; } .woocommerce-orders-table__cell-order-actions .button{ width:100%; margin:6px 0 0; } /* Total : le flex coupait « CHF … » et « for 2 items » en deux colonnes. */ .woocommerce table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-total{ display:block; text-align:right; } .woocommerce table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-total::before{ float:left; text-align:left; padding-top:3px; } .woocommerce table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-total::after{ content:""; display:table; clear:both; } /* Ligne « dernière commande » du tableau de bord : pile lisible (surcharge la grille ci-dessus). */ .hf-dash-order{ grid-template-columns:1fr !important; text-align:left; row-gap:7px; } .hf-dash-order-view{ justify-self:start; margin-top:6px; } .woocommerce table.shop_table_responsive tr td::before, .woocommerce span.onsale, .hf-cart-line-eyebrow, .hf-cart-line-remove, .hf-cart-update, .hf-cart-coupon-btn, .hf-checkout-coupon .showcoupon, .hf-account-eyebrow, .hf-dash-eyebrow, .hf-dash-order-status, .hf-dash-order-view, .hf-ty-eyebrow, .hf-pay-rows dt, .hf-pay-qr figcaption, .hf-summary-vat, .woocommerce-checkout .woocommerce-privacy-policy-text, .woocommerce-order-withdrawal-content__step, ul.woocommerce-order-overview li, .woocommerce-orders-table__cell-order-actions .button, .woocommerce-Address-title .edit{ font-size:11px; } } /* ========================================================================== Angles — tous les boutons et champs du site portent le même arrondi de 2 px ========================================================================== */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce .button, .wc-block-components-button, a.button, .wc-forward, .widget_shopping_cart_content .button, .cart-drawer .button, .cart-drawer a.button, .cart-drawer button, button, input[type="submit"], input[type="button"], input[type="reset"], .hf-size, .hf-cord, .hf-gal-nav, input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], input[type="date"], textarea, select, .select2-container .select2-selection--single{ border-radius:2px; } /* ========================================================================== MENUS DÉROULANTS — flèche maison, plus le chevron natif du système ========================================================================== */ select, .woocommerce select, .woocommerce form .form-row select, .woocommerce-page select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:var(--field-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7a15c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:16px 16px; border:1px solid var(--field-line); border-radius:2px; /* Même ton que les invites de saisie : les listes se lisent comme les champs non renseignés, la colonne garde une seule valeur de gris. */ color:var(--placeholder); font-family:var(--body); font-size:15px; line-height:1.4; padding:12px 40px 12px 14px; width:100%; max-width:100%; cursor:pointer; transition:border-color .3s ease, background-color .3s ease; } select:hover{ border-color:var(--field-line-hover); } select:focus{ outline:none; border-color:var(--gold-soft); background-color:var(--field-bg-focus); } /* La liste déroulée est peinte par le système : au moins, du texte sombre sur clair reste lisible partout. */ select option{ background:var(--field-bg); color:#f4efe6; } /* Select2 (pays, canton) : même habillage que les champs natifs. */ .select2-container--default .select2-selection--single{ height:auto; padding:12px 40px 12px 14px; background-color:var(--field-bg); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7a15c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:16px 16px; border:1px solid var(--field-line); border-radius:2px; } .select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--placeholder); font-family:var(--body); font-size:15px; line-height:1.4; padding:0; } .select2-container--default .select2-selection--single .select2-selection__placeholder{ color:#857a6a; } /* Le chevron par défaut de Select2 ferait doublon avec le nôtre. */ .select2-container--default .select2-selection--single .select2-selection__arrow{ display:none; } .select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--gold-soft); } .select2-dropdown{ background:#141210; border:1px solid rgba(199,161,92,.32); border-radius:2px; color:var(--cream); font-family:var(--body); } .select2-search--dropdown{ padding:8px; } .select2-container--default .select2-search--dropdown .select2-search__field{ background:rgba(255,255,255,.04); border:1px solid rgba(244,239,230,.18); border-radius:2px; color:var(--white); font-family:var(--body); font-size:14px; padding:9px 11px; } .select2-container--default .select2-results__option{ padding:9px 14px; font-size:14.5px; color:var(--cream); } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected]{ background:rgba(199,161,92,.18); color:var(--white); } .select2-container--default .select2-results__option[aria-selected="true"], .select2-container--default .select2-results__option[data-selected="true"]{ background:rgba(199,161,92,.28); color:var(--white); } .select2-results__options{ max-height:260px; } /* Écran en paysage jusqu'à 1024px (iPhone Fold déplié ≈ 890×626, iPad couché) : fiche produit sur deux colonnes (image | résumé). Empilée, la galerie devenait un bandeau plus large que haut et les boutons d'achat tombaient sous la ligne de flottaison. Sous ~560 px de haut (Fold plié couché, téléphone paysage) les deux colonnes coupent Wrist / Buy : on reste empilé. */ @media (max-width:1024px) and (min-width:640px) and (min-height:561px) and (orientation:landscape){ .single-product main.hf-woo{ padding-top:calc(var(--frame) + 96px); } .hf-pdp-hero{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; } .hf-gal-viewport{ height:calc(100vh - var(--frame) - 140px);height:calc(100svh - var(--frame) - 140px); min-height:220px; } .hf-woo .hf-pdp-summary h1.product_title{ font-size:28px; margin-bottom:8px; } /* Même logique que ≤768 : la quantité « 1 » à côté de Buy cassait l'alignement des deux CTA (Fold déplié ≈ 890×626). */ .hf-pdp-summary form.cart{ flex-wrap:wrap; } .hf-pdp-summary form.cart .quantity{ display:none; } .hf-pdp-summary form.cart .button{ flex:1 1 100%; width:100%; } } /* Confirmation de commande, téléphone : récapitulatif en liste libellé | valeur. En deux colonnes de ~130px, « ORDER NUMBER: » et « PAYMENT METHOD: » se coupaient sur deux lignes et « Bank transfer (test) » sur trois. */ @media (max-width:480px){ .hf-thankyou ul.woocommerce-order-overview{ grid-template-columns:1fr; row-gap:0; padding:6px 20px; } .hf-thankyou ul.woocommerce-order-overview li{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; text-align:left; padding:14px 0; border-bottom:1px solid var(--line) !important; } .hf-thankyou ul.woocommerce-order-overview li:last-child{ border-bottom:none !important; } .hf-thankyou ul.woocommerce-order-overview li strong{ margin-top:0; text-align:right; } } /* ============ TESTEUR DE MOT DE PASSE (inscription / nouveau mot de passe) ============ */ /* WooCommerce colore son indicateur en rouge/orange/vert sur fond pastel : hors charte sur fond noir. Ici un filet-jauge qui se remplit et passe du taupe à l'or clair, libellé en mono capitales ; l'indice reste en italique discret. */ .hf-auth .woocommerce-password-strength, .woocommerce .woocommerce-password-strength{ position:relative; display:block; margin:12px 0 0; padding:14px 0 0; background:none !important; border:0 !important; border-radius:0; box-shadow:none; text-align:left; font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.1em; text-transform:uppercase; line-height:1.5; color:var(--label); } .hf-auth .woocommerce-password-strength::before, .woocommerce .woocommerce-password-strength::before{ content:""; position:absolute; left:0; top:0; width:100%; height:1px; background:rgba(244,239,230,.12); } .hf-auth .woocommerce-password-strength::after, .woocommerce .woocommerce-password-strength::after{ content:""; position:absolute; left:0; top:0; height:1px; width:0; background:rgba(244,239,230,.35); transition:width .4s cubic-bezier(.2,.7,.2,1), background .4s ease; } .woocommerce-password-strength.short::after{ width:25% !important; background:rgba(244,239,230,.35) !important; } .woocommerce-password-strength.bad::after{ width:50% !important; background:var(--gold-deep) !important; } .woocommerce-password-strength.good::after{ width:75% !important; background:var(--gold) !important; } .woocommerce-password-strength.strong::after{ width:100% !important; background:var(--gold-lite) !important; } .woocommerce-password-strength.short{ color:var(--label) !important; } .woocommerce-password-strength.bad{ color:var(--label) !important; } .woocommerce-password-strength.good{ color:var(--cream) !important; } .woocommerce-password-strength.strong{ color:var(--gold-soft) !important; } .hf-auth .woocommerce-password-hint, .woocommerce .woocommerce-password-hint{ display:block; margin:8px 0 0; font-family:var(--body); font-style:italic; font-weight:300; font-size:12.5px; line-height:1.6; letter-spacing:0; text-transform:none; color:var(--muted); } /* ============ FICHE PRODUIT — titre au-dessus de l'image (téléphone) ============ */ /* Sur téléphone l'image tombait trop haut sous le pouce : le titre passe au-dessus d'elle et la fait descendre d'autant. Le

du résumé est masqué visuellement mais reste lu par les lecteurs d'écran. */ .hf-pdp-title-m{ display:none; } @media (max-width:768px){ .hf-pdp-title-m{ display:block; margin:0; font-family:var(--body); font-style:normal; font-weight:400; text-transform:none; font-size:30px; letter-spacing:.01em; line-height:1.05; color:var(--white); text-align:left; } .hf-woo .hf-pdp-summary h1.product_title{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } }