/* ========================================================================= LYNAE — Tunnel de commande (WooCommerce Blocks) Objectif : lisibilité, réassurance, un seul chemin vers le paiement. ========================================================================= */ /* ---------- Cadre général ---------- */ .woocommerce-checkout #site-main, .woocommerce-cart #site-main{background:#fff} .woocommerce-checkout .lynae-shop-wrap{padding:26px 0 50px} .wc-block-checkout{font-family:var(--font)} .wc-block-checkout__main, .wc-block-checkout__sidebar{font-family:var(--font)} /* Le titre par défaut de WordPress est remplacé par le nôtre (voir functions.php). */ .woocommerce-checkout .entry-title, .woocommerce-checkout h1.wp-block-post-title, .woocommerce-checkout .wp-block-post-title{display:none!important} .lynae-co-title{ font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:38px;line-height:1.1; text-align:center;color:var(--ink);margin:0 0 20px } @media(max-width:900px){ .lynae-co-title{font-size:28px;margin:0 0 16px} } /* ---------- Suggestions d'adresse ---------- La liste est rattachée à et positionnée en JS : elle échappe ainsi aux styles de label flottant de WooCommerce. Les propriétés sont forcées pour ne rien hériter du thème ni de l'éditeur de blocs. */ .lynae-addr-suggest{ position:fixed!important;z-index:100000; margin:0!important;padding:6px!important;list-style:none!important; background:#fff!important;border:1px solid var(--line);border-radius:12px; box-shadow:0 12px 28px rgba(20,30,25,.14); max-height:290px;overflow-y:auto;font-family:var(--font) } .lynae-addr-suggest__item{ display:block!important;position:static!important;transform:none!important; margin:0!important;padding:9px 11px!important;border-radius:8px; cursor:pointer;transition:background .12s;list-style:none!important } .lynae-addr-suggest__item:hover, .lynae-addr-suggest__item.is-active{background:#eef8f6} .lynae-addr-suggest__street, .lynae-addr-suggest__city{ display:block!important;position:static!important;transform:none!important; margin:0!important;padding:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis } .lynae-addr-suggest__street{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35} .lynae-addr-suggest__city{font-size:12px;color:var(--ink-soft);line-height:1.3;margin-top:1px!important} /* ---------- Jauge « livraison offerte » ---------- */ .lynae-ship-bar{max-width:1100px;margin:0 auto 24px} .lynae-ship-bar__label{font-size:14px;color:var(--ink);margin:0 0 8px;text-align:center} .lynae-ship-bar__label strong{color:var(--green);font-weight:700} .lynae-ship-bar__track{height:8px;border-radius:99px;background:#ece9e3;overflow:hidden} .lynae-ship-bar__track span{ display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--green-2),var(--green));transition:width .4s ease } .lynae-ship-bar.is-reached .lynae-ship-bar__track span{background:var(--green)} /* ---------- Preuve sociale (sous le récapitulatif) ---------- */ .lynae-co-proof{ margin-top:16px;border:1px solid var(--line);border-radius:14px; padding:16px 18px;background:#fff } .lynae-co-proof .stars{color:#FFB829;font-size:14px;letter-spacing:1px} .lynae-co-proof__title{font-weight:700;font-size:14px;color:var(--ink);margin:6px 0 4px} .lynae-co-proof__text{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0 0 8px} .lynae-co-proof__author{font-size:12px;color:var(--ink-soft);margin:0} .lynae-co-proof__author span{color:var(--green);font-weight:600} /* ---------- Concentration sur le tunnel ---------- L'icône panier est masquée pendant le paiement : le récapitulatif de commande est déjà présent sur la page, elle ne servirait donc que de porte de sortie. Le logo reste, lui, pour la confiance. */ .lynae-focus-checkout .cart-link{display:none} /* ---------- Étapes du formulaire ---------- */ .wc-block-checkout .wc-block-components-checkout-step{ border:1px solid var(--line)!important;border-radius:16px!important; padding:22px 24px!important;margin-bottom:14px!important;background:#fff!important } /* WooCommerce sépare les étapes par un filet : les cartes suffisent */ .wc-block-checkout .wc-block-components-checkout-step:after, .wc-block-checkout .wc-block-checkout__form>fieldset+fieldset{border-top:none!important} .wc-block-components-checkout-step__heading{margin:0 0 4px} .wc-block-components-checkout-step__title{ font-family:var(--font);font-size:17px;font-weight:700;color:var(--ink) } .wc-block-components-checkout-step__description{font-size:13px;color:var(--ink-soft)} /* On masque la numérotation : elle alourdit visuellement */ .wc-block-components-checkout-step__number{display:none} .wc-block-components-checkout-step__container{padding-left:0} .wc-block-components-checkout-step__content{padding-left:0;margin-top:14px} /* ---------- Champs ---------- Les du checkout par blocs n'ont aucune classe : on les cible par leur conteneur. `!important` est nécessaire, wc-blocks.css passant après. */ .wc-block-checkout .wc-block-components-text-input input, .wc-block-checkout .wc-blocks-components-select__select, .wc-block-checkout .wc-block-components-textarea, .wc-block-checkout textarea, .wc-block-checkout input[type="text"], .wc-block-checkout input[type="email"], .wc-block-checkout input[type="tel"]{ border:1px solid #dcdcdc!important; border-radius:12px!important; background:#fff!important; color:var(--ink)!important; font-family:var(--font)!important; font-size:15px!important; box-shadow:none!important; transition:border-color .15s,box-shadow .15s!important } .wc-block-checkout .wc-block-components-text-input input:focus, .wc-block-checkout .wc-blocks-components-select__select:focus, .wc-block-checkout textarea:focus{ border-color:var(--green)!important; box-shadow:0 0 0 3px rgba(2,131,113,.13)!important; outline:none!important } /* Le conteneur ne doit pas doubler la bordure */ .wc-block-checkout .wc-block-components-text-input{border:none!important;background:transparent!important} .wc-block-checkout .wc-block-components-text-input label{ font-family:var(--font)!important;color:#9a9a9a!important;font-size:15px!important } .wc-block-checkout .wc-block-components-text-input.is-active label{font-size:12px!important;color:#8a8a8a!important} .wc-block-checkout .wc-block-components-address-form__company{display:none!important} /* Cases à cocher et boutons radio aux couleurs de la marque */ .wc-block-checkout input[type="checkbox"]:checked, .wc-block-checkout input[type="radio"]:checked{accent-color:var(--green)} .wc-block-checkout .wc-block-components-checkbox__input:checked{ background-color:var(--green)!important;border-color:var(--green)!important } /* ---------- Modes de livraison ---------- */ .wc-block-checkout .wc-block-components-radio-control__option{ border-radius:12px!important; border:1px solid #e4e4e4!important; padding:15px 16px 15px 46px!important; margin-bottom:8px!important; background:#fff!important; transition:border-color .15s,background .15s } .wc-block-checkout .wc-block-components-radio-control__option:hover{border-color:var(--green-2)!important} .wc-block-checkout .wc-block-components-radio-control__option-checked, .wc-block-checkout .wc-block-components-radio-control__option--checked-option-highlighted{ border-color:var(--green)!important;background:#f2faf8!important } .wc-block-checkout .wc-block-components-radio-control__label{font-weight:600;color:var(--ink)} .wc-block-checkout .wc-block-components-radio-control__secondary-label{color:var(--green);font-weight:700} /* Le trait de séparation par défaut fait doublon avec les cartes */ .wc-block-checkout .wc-block-components-radio-control__option::after{display:none!important} /* ---------- Modes de paiement ---------- L'option sélectionnée est cerclée par une ombre interne gris foncé (box-shadow, pas une bordure) : on la reprend au vert de la marque. */ .wc-block-checkout .wc-block-components-radio-control-accordion-option{ box-shadow:0 0 0 1.5px var(--green) inset!important; border-radius:12px!important; background:#f6fbfa!important; overflow:hidden!important } .wc-block-checkout .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control-accordion-content{ background:#fff!important;padding:16px!important } /* Options non sélectionnées : liseré discret */ .wc-block-checkout .wc-block-components-radio-control__option:not(.wc-block-components-radio-control-accordion-option){ box-shadow:none!important } /* Champs de carte Stripe dans l'accordéon */ .wc-block-checkout .wc-block-components-radio-control-accordion-content input, .wc-block-checkout .wcstripe-card-field, .wc-block-checkout .wc-block-gateway-container input{ border-radius:10px!important;border:1px solid #dcdcdc!important } /* ---------- Récapitulatif (colonne droite) ---------- */ .wc-block-components-sidebar .wc-block-components-order-summary, .wc-block-checkout__sidebar .wc-block-components-panel{ border:1px solid var(--line);border-radius:14px;background:#fbfbfa } .wc-block-checkout__sidebar{position:sticky;top:88px} .wc-block-components-order-summary-item__image img{border-radius:10px} .wc-block-components-product-name{font-weight:700;color:var(--ink)} .wc-block-components-totals-item__label{color:var(--ink-soft)} .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{ font-size:24px;font-weight:800;color:var(--ink) } /* La livraison offerte est un argument : on la met en avant */ .wc-block-components-totals-shipping .wc-block-components-totals-item__value{color:var(--green);font-weight:700} /* ---------- Bouton de paiement ---------- */ .wc-block-components-checkout-place-order-button{ width:100%!important;background:var(--green)!important;color:#fff!important; border-radius:10px!important;font-family:var(--font)!important;font-weight:700!important; font-size:16px!important;letter-spacing:.05em;text-transform:uppercase; padding:20px 24px!important;height:auto!important;transition:.2s } .wc-block-components-checkout-place-order-button:hover{background:var(--green-dark)!important;transform:translateY(-1px)} /* Réassurance juste sous le bouton : c'est là que le doute survient */ .lynae-co-guarantee{ margin-top:14px;text-align:center;font-size:13px;color:var(--ink-soft);line-height:1.8 } .lynae-co-guarantee strong{color:var(--ink)} .lynae-co-guarantee .lynae-co-secure{ display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700 } .lynae-co-pay{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px} .lynae-co-pay img{height:26px;width:auto} /* ---------- Pied de page allégé pendant le paiement ---------- */ .woocommerce-checkout .site-footer .footer-grid, .woocommerce-checkout .site-footer .footer-pay{display:none} .woocommerce-checkout .site-footer{background:#fff;color:var(--ink-soft);border-top:1px solid var(--line)} .woocommerce-checkout .footer-bottom{border-top:none} .woocommerce-checkout .footer-bottom p{color:var(--ink-soft)} /* ---------- Récapitulatif compact (mobile) ---------- */ .lynae-msum{display:none} @media(max-width:900px){ .lynae-msum{display:block;margin:0 0 14px} .lynae-msum__bar{ display:flex;align-items:center;gap:12px;width:100%; background:#fff;border:1px solid var(--line);border-radius:14px; padding:12px 14px;cursor:pointer;text-align:left;font-family:var(--font) } .lynae-msum__thumb{flex:0 0 auto;width:44px;height:44px;border-radius:10px;background:var(--cream);overflow:hidden} .lynae-msum__thumb img{width:100%;height:100%;object-fit:cover;display:block} .lynae-msum__labels{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0} .lynae-msum__title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.2} .lynae-msum__count{font-size:13px;color:var(--ink-soft)} .lynae-msum__prices{display:flex;flex-direction:column;align-items:flex-end;gap:1px} .lynae-msum__compare{font-size:13px;color:#9a9a9a;text-decoration:line-through} .lynae-msum__total{font-size:17px;font-weight:800;color:var(--ink)} .lynae-msum__chevron{flex:0 0 auto;color:var(--ink-soft);transition:transform .2s;display:flex} body.lynae-msum-open .lynae-msum__chevron{transform:rotate(180deg)} /* Le détail reste masqué tant que le client ne déplie pas la barre. Sur mobile, WooCommerce n'utilise pas la barre latérale : il injecte le récapitulatif dans la colonne principale via un « fill », avec d'autres classes. On vise donc les deux rendus. */ .wc-block-checkout__sidebar, .checkout-order-summary-block-fill-wrapper{display:none!important} body.lynae-msum-open .wc-block-checkout__sidebar, body.lynae-msum-open .checkout-order-summary-block-fill-wrapper{ display:block!important;margin:-6px 0 14px;padding:0 } /* Titre « Résumé de la commande » du rendu mobile : doublon de la barre. */ .checkout-order-summary-block-fill-wrapper > .wc-block-components-checkout-step__heading{ display:none!important } /* Le titre « Résumé de la commande » (avec son propre total) fait doublon avec la barre et sert de second niveau à déplier : on le retire. Comme ce titre est aussi l'interrupteur du contenu côté WooCommerce, il faut forcer l'affichage du détail, sinon il resterait replié. */ body.lynae-has-msum .wc-block-components-checkout-order-summary__title{display:none!important} body.lynae-has-msum .wc-block-components-checkout-order-summary__content{ display:block!important;visibility:visible!important;opacity:1!important; max-height:none!important;height:auto!important;overflow:visible!important; border-top:none!important;margin-top:0!important } /* Idem pour les panneaux internes que WooCommerce replie sur mobile. */ body.lynae-has-msum .wc-block-components-checkout-order-summary__content > *{ display:block!important } body.lynae-has-msum .wc-block-components-order-summary{display:block!important} body.lynae-has-msum .wc-block-components-order-summary__content{display:block!important} /* Barre et détail forment un seul ensemble une fois ouvert. */ body.lynae-msum-open .lynae-msum__bar{ border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent } body.lynae-msum-open .wc-block-checkout__sidebar .wc-block-components-order-summary, body.lynae-msum-open .wc-block-checkout__sidebar .wc-block-components-panel{ border-top-left-radius:0!important;border-top-right-radius:0!important } } /* ---------- Mobile ---------- */ @media(max-width:900px){ .wc-block-checkout__sidebar{position:static} .wc-block-components-checkout-step{padding:16px 14px;border-radius:12px} .woocommerce-checkout .entry-title{font-size:26px} .wc-block-components-checkout-place-order-button{padding:18px 20px!important;font-size:15px!important} .woocommerce-checkout .lynae-shop-wrap{padding-top:14px} }