/* PHAR-934 : nouveau tunnel de commande (maquettes https://claude.ai/artifact/R9SfbW2wDrBd3gh9PYvjbQ).
Feuille écrite à la main, hors build Tailwind : chargée seulement dans le tunnel (hyva_checkout_index_index.xml). */
:root {
--ps-rouge: #c7194a;
--ps-rouge-fonce: #8e0e32;
--ps-vert: #5fa82b;
--ps-vert-texte: #2e6b1f;
--ps-texte: #1e2a32;
--ps-texte-2: #5b6670;
--ps-fond: #f4f5f7;
--ps-bord: #d5dae0;
--ps-kare: #2b9343; /* vert du logo Kare Le Club */
--ps-kare-fond: #fde24f; /* jaune de la carte (thème : --color-ps-amber-65) */
--ps-kare-encre: #1d1d1b;
}
/* Frise d'étapes : une barre par étape, libellé dessous */
.ps-frise { background: #fff; border-bottom: 1px solid #e3e6ea; padding: 10px 12px; }
.ps-frise__liste {
display: grid; grid-template-columns: repeat(var(--ps-frise-nb, 4), minmax(0, 1fr)); gap: 6px;
max-width: 720px; margin: 0 auto; padding: 0; list-style: none;
}
.ps-frise__etape { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--ps-texte-2); }
.ps-frise__etape::before { content: ""; width: 100%; height: 4px; border-radius: 2px; background: var(--ps-bord); }
.ps-frise__etape a, .ps-frise__etape [role="link"] { color: inherit; text-decoration: none; cursor: pointer; }
.ps-frise__etape--faite { color: var(--ps-vert-texte); font-weight: 600; }
.ps-frise__etape--faite::before { background: var(--ps-vert); }
.ps-frise__etape--en-cours { color: var(--ps-rouge); font-weight: 700; }
.ps-frise__etape--en-cours::before { background: var(--ps-rouge); }
@media (min-width: 768px) { .ps-frise__etape { font-size: 14px; } }
/* « ‹ Retour … » sous la frise : étape précédente, ou panier */
.hyva_checkout-index-index .ps-retour { max-width: var(--checkout-cart-width, 1142px); margin: -12px auto 12px; }
@media (max-width: 767px) { .hyva_checkout-index-index .ps-retour { margin: -4px 0 12px; } }
body.hyva_checkout-index-index .ps-retour__lien {
display: inline-block; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--ps-texte);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ps-frise__etape--faite a:hover, .ps-frise__etape--faite [role="link"]:hover { text-decoration: underline; }
/* Étape Compte : champs e-mail / mot de passe pleine largeur, icône dans le champ */
#guest-details { border: 0; margin: 0; padding: 0; min-width: 0; }
#guest-details .step-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; }
#guest-details .field-wrapper-inner { display: flex; flex-direction: column; gap: 6px; }
#guest-details label { font-size: 13px; font-weight: 700; color: var(--ps-texte); }
#guest-details .input-group {
display: flex; align-items: center; min-height: 48px; border: 1px solid #b8c0c8; border-radius: 10px;
background: #fff; overflow: hidden;
}
#guest-details .input-group:focus-within { border-color: var(--ps-texte); box-shadow: 0 0 0 2px rgba(30, 42, 50, .15); }
#guest-details .input-group .form-input { border: 0; box-shadow: none; min-height: 46px; font-size: 16px; padding: 0 12px; }
#guest-details .form-input-addon { padding: 0 10px; color: var(--ps-texte-2); }
#guest-details .form-input-addon:empty { display: none; }
#guest-details .field-tooltip, #guest-details [class*="tooltip"] { display: none; }
#guest-details p, #guest-details .field-comment { font-size: 12px; color: var(--ps-texte-2); margin: 4px 0 0; }
#guest-details .btn-primary { min-height: 44px; border-radius: 10px; }
#guest-details form > div { row-gap: 14px; }
/* Encart Kare (étape Compte) */
.ps-kare {
margin: 16px 0; border: 0; border-radius: 14px; padding: 16px; background: var(--ps-kare-fond); color: var(--ps-kare-encre);
display: flex; flex-direction: column; gap: 12px; box-shadow: 0 6px 16px rgba(29, 29, 27, .12);
}
.ps-kare__tete { display: flex; gap: 12px; align-items: center; }
.ps-kare__logo { width: 96px; height: auto; flex-shrink: 0; }
.ps-kare__titre { display: block; font-size: 15px; font-weight: 700; color: var(--ps-kare-encre); }
.ps-kare__texte { display: block; font-size: 12px; color: rgba(29, 29, 27, .8); }
.ps-kare__choix { display: flex; gap: 8px; }
.ps-kare__bouton {
flex: 1; min-height: 44px; border-radius: 10px; border: 2px solid transparent; background: #fff; font-size: 13px; font-weight: 600;
color: var(--ps-kare-encre); cursor: pointer;
}
/* survol : la règle des boutons du tunnel (« button:hover », bordure 1 px grise) faisait bouger les deux choix d'un
pixel ; ils gardent leur bordure de 2 px, juste plus visible */
.ps-kare__bouton:hover, .ps-kare__bouton:focus, .ps-kare__bouton:active {
background: #fff; border: 2px solid rgba(29, 29, 27, .3); color: var(--ps-kare-encre);
}
.ps-kare__bouton.is-actif, .ps-kare__bouton[aria-pressed="true"],
.ps-kare__bouton.is-actif:hover, .ps-kare__bouton[aria-pressed="true"]:hover { border-color: var(--ps-kare-encre); font-weight: 700; }
.ps-kare__champs { display: flex; flex-direction: column; gap: 12px; }
.ps-kare__champ { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; }
.ps-kare__champ .form-input { min-height: 48px; border: 1px solid rgba(29, 29, 27, .35); border-radius: 10px; font-size: 16px; padding: 0 12px; font-weight: 400; background: #fff; width: 100%; }
.ps-kare__saisie { position: relative; display: block; }
.ps-kare__saisie .form-input { padding-right: 56px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ps-kare__compteur {
position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 400;
color: rgba(29, 29, 27, .6); font-variant-numeric: tabular-nums; pointer-events: none;
}
.ps-kare__compteur.is-complet { color: var(--ps-kare); font-weight: 700; }
/* petite carte : où lire le numéro (comme l'adhésion de Gone_Loyalty) */
.ps-kare__aide-carte { display: flex; gap: 10px; align-items: center; font-size: 12px; font-weight: 400; color: rgba(29, 29, 27, .8); }
.ps-kare__minicarte {
position: relative; flex-shrink: 0; width: 64px; height: 40px; border-radius: 5px; background: #fff;
box-shadow: inset 0 0 0 1px rgba(29, 29, 27, .25);
}
.ps-kare__minicarte-barres {
position: absolute; left: 8px; right: 8px; bottom: 17px; height: 12px;
background: repeating-linear-gradient(90deg, var(--ps-kare-encre) 0 1px, transparent 1px 3px);
}
.ps-kare__minicarte-chiffres {
position: absolute; left: 5px; right: 5px; bottom: 4px; font-size: 7px; line-height: 9px; text-align: center; color: var(--ps-kare-encre);
outline: 1.5px solid var(--ps-rouge); outline-offset: 1px; font-variant-numeric: tabular-nums;
}
.ps-kare__aide { font-size: 12px; font-weight: 400; color: rgba(29, 29, 27, .8); }
.ps-kare__aide a { color: var(--ps-kare-encre); text-decoration: underline; }
.ps-kare__erreur { font-size: 12px; font-weight: 600; color: #b3123f; }
.ps-kare__ok { font-weight: 600; color: var(--ps-kare-encre); }
.ps-kare__lien { background: none; border: 0; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--ps-kare-encre); text-decoration: underline; cursor: pointer; align-self: center; }
/* le thème blanchit les boutons au survol : le lien reste un lien */
.ps-kare .ps-kare__lien:hover, .ps-kare .ps-kare__lien:focus { background: none !important; color: var(--ps-kare-encre) !important; text-decoration: none; box-shadow: none; border: 0 !important; outline: none; }
/* Étape Livraison : une carte par mode (Point relais, À domicile, Express, Retrait en pharmacie) */
.ps-radio, .hyva_checkout-index-index input[type="radio"].ps-radio.ps-radio {
position: static; opacity: 1; display: inline-block;
appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0;
border: 2px solid #8a949c; border-radius: 50%; background: #fff; cursor: pointer;
}
.ps-radio:checked, .hyva_checkout-index-index input[type="radio"].ps-radio.ps-radio:checked { border-color: var(--ps-rouge); box-shadow: inset 0 0 0 4px #fff; background: var(--ps-rouge); }
.ps-radio:focus-visible { outline: 2px solid var(--ps-texte); outline-offset: 2px; }
.ps-modes { display: flex; flex-direction: column; gap: 12px; }
.ps-mode {
background: #fff; border: 1px solid var(--ps-bord); border-radius: 12px; padding: 12px 14px;
display: flex; flex-direction: column; gap: 10px;
}
.ps-mode.is-actif { border: 2px solid var(--ps-rouge); padding: 11px 13px; }
.ps-mode__tete { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; }
.ps-mode__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ps-mode__titre { font-size: 15px; color: var(--ps-texte); }
.ps-mode__sous-titre { font-size: 12px; color: var(--ps-texte-2); }
.ps-mode__delai { font-size: 12px; font-weight: 700; color: var(--ps-vert-texte); }
.ps-mode__prix { font-size: 15px; font-weight: 700; color: var(--ps-texte); white-space: nowrap; text-align: right; }
.ps-mode__prix small { display: block; font-size: 11px; font-weight: 400; color: var(--ps-texte-2); }
.ps-mode__offres { display: flex; flex-direction: column; gap: 8px; }
.ps-offre {
display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 8px; cursor: pointer;
background: var(--ps-fond); border: 1px solid transparent;
}
/* un seul liseré rouge, celui du mode (Thomas 26/10 : deux encadrements rouges, c'est trop) : le choix dedans est teinté */
.ps-offre.is-actif { background: #fce7ef; border-color: #f3c3d4; }
.ps-offre__logo { width: 56px; height: 24px; object-fit: contain; object-position: left center; }
.ps-offre__texte { flex: 1; display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ps-offre__prix { font-size: 14px; white-space: nowrap; }
.ps-mode__complement { border-top: 1px solid #e3e6ea; padding-top: 12px; }
.ps-mode .message.error { font-size: 13px; }
@media (min-width: 768px) {
.ps-mode__offres { flex-direction: row; }
.ps-offre { flex: 1; }
}
/* Étape Paiement : Apple Pay, Google Pay, carte (Sogecommerce), PayPal, puis chèque et virement */
.ps-paiements { display: flex; flex-direction: column; gap: 12px; }
.ps-paiements .step-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.ps-paiement-groupe { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 0; }
.ps-paiement { margin: 0; cursor: pointer; }
.ps-paiement.payment-method { padding: 12px 14px; }
/* logos de chaque moyen à droite, comme GDD (Thomas 26/10) */
.ps-paiement__logos { flex-shrink: 0; margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ps-paiement__logos img { height: 22px; width: auto; }
.ps-paiement__logos img[src*="apple-pay"], .ps-paiement__logos img[src*="google-pay"] { height: 32px; }
.ps-paiement__logos--icone { color: var(--ps-texte-2); }
.ps-paiement__detail { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 0; }
.ps-paiement-groupe > .ps-paiement__detail { background: #fff; border: 1px solid var(--ps-bord); border-radius: 12px; padding: 14px; }
.ps-paiement__detail .actions-toolbar .action.primary.checkout { width: 100%; min-height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; }
/* « Passer la commande » : autant d'espace sous le bouton qu'au-dessus (marge Luma de 10 px retirée, Thomas 30/10) */
/* (sélecteurs renforcés : pages-tunnel-complet.css pose 10 px sous le bouton et 20 px sous le détail, avec un id) */
#payment-method-list .ps-paiement__detail.ps-paiement__detail > .actions-toolbar.actions-toolbar { margin-bottom: 0; }
/* détail dans le cadre du moyen, aligné sur son titre (même retrait que pour la carte / les portefeuilles, Thomas 03/11) */
#payment-method-list .ps-paiement.payment-method > .ps-paiement__detail { padding: 2px 3px 3px; }
#sogecommerce_rest_form .kr-smart-button { width: 100%; max-width: none; }
/* Google Pay / Apple Pay : vrai bouton, même forme que « Payer par carte bancaire » et PayPal (arrondi 4 px, 52 px, texte 15 px gras ;
seule la couleur change, Thomas 03/11) (fond noir, libellé blanc centré, logo à droite, sans le montant déjà affiché) au lieu de
la ligne blanche « GPay Payer avec Google Pay 6,17 € » du smartform (Thomas 03/11) */
#sogecommerce_rest_form .kr-smart-button.kr-googlepay, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay { background: #000 !important; border: 0 !important; border-radius: 4px !important; min-height: 52px; height: auto !important; padding: 0 16px !important; display: flex !important; align-items: center; justify-content: center; cursor: pointer; box-shadow: none !important; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay:hover, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay:hover { background: #3c4043 !important; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-method-info, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-method-info { display: flex; align-items: center; justify-content: center; gap: 10px; width: auto !important; flex: 0 0 auto; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-method-icon, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-method-icon { display: flex; align-items: center; width: auto !important; height: 24px !important; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-method-icon svg, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-method-icon svg { height: 24px !important; width: auto !important; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-label, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-label { order: -1; display: flex; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-method-label, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-method-label { color: #fff !important; font: 700 15px/1.2 Quicksand, "Quicksand Secours", sans-serif !important; cursor: pointer; }
#sogecommerce_rest_form .kr-smart-button.kr-googlepay .kr-amount-label, #sogecommerce_rest_form .kr-smart-button.kr-apple-pay .kr-amount-label { display: none !important; }
/* Apple Pay / Google Pay choisi : seul le bouton du portefeuille, sans le bouton « Payer par carte bancaire » ni le cadre (Thomas 30/10) */
#payment-method-list:not([data-ps-sous-moyen="CARDS"]) .ps-bouton-carte { display: none !important; }
/* « Payer par carte bancaire » décollé du champ « Titulaire de la carte » (le détail du groupe est en bloc ici, son gap ne joue pas ; Thomas 03/11) */
#payment-method-list .ps-paiement-groupe .ps-paiement__detail > .ps-bouton-carte { margin-top: 16px; }
/* PayPal : bouton jaune officiel comme en prod, même gabarit que Google Pay / Apple Pay (Thomas 03/11) */
#payment-method-list .ps-bouton-paypal .action.primary.checkout { display: flex; align-items: center; justify-content: center; gap: 8px; background: #ffc439; border: 0; color: #111; }
#payment-method-list .ps-bouton-paypal .action.primary.checkout:hover, #payment-method-list .ps-bouton-paypal .action.primary.checkout:focus { background: #f2ba36; border: 0; color: #111; }
#payment-method-list .ps-bouton-paypal .action.primary.checkout img { height: 22px; width: auto; }
/* Carte bancaire : champs décollés du cadre (le padding du détail était remis à 0, bordures confondues), et Apple Pay / Google Pay
retirés des « Autres moyens de paiement » du smartform : ce sont déjà des choix de la liste (Thomas 30/10) */
#sogecommerce_rest_form[data-ps-rendu="CARDS"] .kr-methods-list-options--spbtn:not(.kr-methods-list-options--extra),
#sogecommerce_rest_form[data-ps-rendu="CARDS"] .kr-smart-form-list-section-name--other { display: none !important; }
[x-cloak] { display: none !important; }
/* Cadre et titre centré du tunnel Luma retirés autour des choix de paiement */
.hyva_checkout-index-index .ps-paiements .payment-method.ps-paiement-groupe,
.hyva_checkout-index-index .ps-paiements .payment-method.ps-paiement-groupe._active { border: 0; padding: 0; background: none; box-shadow: none; }
.hyva_checkout-index-index .ps-paiements .step-title { text-align: left; }
.hyva_checkout-index-index .ps-paiements .payment-method.ps-paiement._active { border: 2px solid var(--ps-rouge); }
#payment-method-list .payment-method::before { content: none; }
#payment-method-list .step-title { margin: 0 0 4px; width: auto; }
/* Page de confirmation : encart compte (Kare) */
.ps-confirmation { max-width: 560px; margin: 16px 0 24px; }
.ps-confirmation__gain { color: var(--ps-kare); font-weight: 700; }
.ps-confirmation__texte { margin: 0; font-size: 14px; line-height: 1.45; }
.ps-confirmation__liste { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; list-style: disc; }
.ps-confirmation__bouton {
display: flex; align-items: center; justify-content: center; min-height: 52px; border: 0; border-radius: 12px;
background: var(--ps-kare); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; width: 100%;
}
.ps-confirmation__bouton:disabled { opacity: .6; cursor: wait; }
.ps-confirmation--simple { background: #fff; border: 1px solid var(--ps-bord); border-radius: 12px; padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.ps-confirmation__lien { font-weight: 700; color: var(--ps-rouge); }
/* Panier : informations santé repliées derrière une ligne (Compléter / Vérifier) */
/* le panier remet à zéro les blocs Luma (.ps-l, spécificité d'ID dans panier-luma-connecte.css) : sélecteurs renforcés */
#health-info .ps-sante-ligne.ps-sante-ligne { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; } /* la carte du bloc fait le cadre (plus de double cadre) */
#health-info .ps-sante-ligne.ps-sante-ligne.hide { display: none; }
#health-info .ps-sante-ligne__texte.ps-sante-ligne__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
#health-info .ps-sante-ligne__texte.ps-sante-ligne__texte strong { font-weight: 700; }
#health-info .ps-sante-ligne__texte.ps-sante-ligne__texte span { font-size: 12px; color: var(--ps-texte-2); }
#health-info .ps-sante-ligne__bouton.ps-sante-ligne__bouton { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ps-texte); background: #fff; font-size: 14px; font-weight: 700; color: var(--ps-texte); cursor: pointer; white-space: nowrap; }
.ps-frise--panier { background: none; border: 0; padding: 0; flex: 1; min-width: 0; }
.ps-cart-top:has(.ps-frise--panier) { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 767px) { .ps-cart-top:has(.ps-frise--panier) .ps-frise--panier { flex-basis: 100%; } }
/* Point relais unique (Mondial Relay + Chronopost) : code postal, filtre transporteur, carte, liste */
.ps-relais { display: flex; flex-direction: column; gap: 12px; }
.ps-relais__cp { display: flex; gap: 8px; align-items: flex-end; }
.ps-relais__cp-champ { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.ps-relais__cp-champ .form-input { min-height: 44px; border: 1px solid #b8c0c8; border-radius: 10px; font-size: 16px; padding: 0 12px; font-weight: 400; width: 100%; }
.ps-relais__cp-bouton { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--ps-texte); background: #fff; font-size: 14px; font-weight: 700; color: var(--ps-texte); cursor: pointer; }
.ps-relais__filtres { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-relais__filtre { min-height: 36px; padding: 0 12px; border-radius: 18px; border: 1px solid #b8c0c8; background: #fff; font-size: 13px; font-weight: 600; color: var(--ps-texte); cursor: pointer; }
.ps-relais__filtre.is-actif { border-color: var(--ps-texte); background: var(--ps-texte); color: #fff; }
.ps-relais__carte { height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ps-bord); z-index: 0; }
.ps-relais__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; }
.ps-relais__liste > li { margin: 0; }
.ps-relais__point { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--ps-bord); border-radius: 10px; background: #fff; cursor: pointer; }
.ps-relais__point.is-actif { background: #fdf1f5; border-color: #f3c3d4; }
.ps-relais__point:focus-visible { outline: 2px solid var(--ps-texte); outline-offset: 2px; }
.ps-radio-faux { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 2px solid #b8c0c8; margin-top: 2px; background: #fff; }
.ps-relais__point.is-actif .ps-radio-faux { border: 6px solid var(--ps-rouge); }
.ps-relais__texte { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.ps-relais__texte strong { font-size: 14px; }
.ps-relais__texte > span { color: var(--ps-texte-2); }
.ps-relais__transporteur { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.ps-relais__transporteur img { height: 16px; width: auto; }
.ps-relais__prix { font-size: 14px; white-space: nowrap; }
.ps-relais__horaires summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ps-texte-2); text-decoration: underline; }
.ps-relais__horaires table { margin-top: 4px; font-size: 12px; border-collapse: collapse; }
.ps-relais__horaires th { text-align: left; font-weight: 600; padding: 1px 10px 1px 0; }
.ps-relais__horaires td { padding: 1px 0; }
/* Liste ou carte (GDD) : en carte, seul le relais choisi reste sous la carte ; badge et « Valider mon choix » sur le relais choisi */
.ps-relais__vues { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 10px; background: #f1f3f5; }
.ps-relais__vue { min-height: 34px; padding: 0 16px; border: 0; border-radius: 8px; background: none; font-size: 13px; font-weight: 600; color: var(--ps-texte-2); cursor: pointer; }
.ps-relais__vue.is-actif { background: #fff; color: var(--ps-texte); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.ps-relais:not(.is-carte) .ps-relais__carte { display: none; }
.ps-relais.is-carte .ps-relais__liste > li:not(:has(.is-actif)) { display: none; }
.ps-relais__point { flex-wrap: wrap; }
.ps-relais__droite { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ps-relais__badge, .ps-relais__valider { display: none; }
.ps-relais__point.is-actif .ps-relais__badge { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--ps-rouge); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ps-relais__point.is-actif .ps-relais__valider {
display: block; flex-basis: 100%; min-height: 44px; border: 0; border-radius: 10px; background: var(--ps-rouge); color: #fff;
font-size: 15px; font-weight: 700; cursor: pointer;
}
/* Étape Compte : un seul cadre par champ (Hyvä encadrait aussi l'icône et la case vide de l'info-bulle) */
#guest_details .input-group { border: 1px solid #b8c0c8; border-radius: 10px; background: #fff; outline: none; overflow: hidden; align-items: center; }
#guest_details .input-group:focus-within { border-color: var(--ps-texte); box-shadow: 0 0 0 2px rgba(30, 42, 50, .15); outline: none; }
#guest_details .input-group > .form-input { border: 0; box-shadow: none; outline: none; min-height: 48px; font-size: 16px; padding: 0 12px; }
#guest_details .form-input-addon { border: 0; background: none; padding: 0 0 0 12px; color: var(--ps-texte-2); }
#guest_details .form-input-addon:last-child { padding: 0 12px 0 0; }
#guest_details .form-input-addon:empty, #guest_details .form-input-addon:has(> .field-tooltip:only-child) { display: none; }
/* œil « montrer le mot de passe » : sans cadre ; Hyvä ne dessine pas toujours son icône (template x-if rendu par Magewire) */
#guest_details .form-input-addon button {
width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; box-shadow: none; color: var(--ps-texte-2);
}
#guest_details .form-input-addon button:not(:has(svg)) {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6670' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
/* adresse avec compte : « Se connecter » devient le bouton principal, « Mot de passe oublié ? » dessous ;
« Continuer » (en invité) passe au second plan */
#guest_details .checkout-form-toolbar { width: 100%; }
#guest_details .flex-row:has(> .btn) { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
#guest_details .flex-row > .btn {
flex: 1 1 100%; width: 100%; display: flex; justify-content: center; align-items: center; min-height: 48px; border: 0; border-radius: 10px;
background: var(--ps-rouge); color: #fff; font-size: 16px; font-weight: 700;
}
#guest_details .flex-row > a { flex: 1 1 100%; margin-bottom: 8px; text-align: center; font-size: 13px; color: var(--ps-texte-2); text-decoration: underline; }
body.hyva_checkout-index-index #hyva-checkout-container.ps-email-connu .checkout-nav .ps-btn-next {
background: #fff; color: var(--ps-texte); border: 1px solid var(--ps-bord); box-shadow: none;
}
/* survol du bouton secondaire : gris clair, pas le rouge du bouton principal (Thomas 26/10) — sélecteur renforcé : « #checkoutSteps button.action.primary » du thème remettait le rouge */
body.hyva_checkout-index-index #hyva-checkout-container.ps-email-connu .checkout-nav .ps-btn-next:hover,
body.hyva_checkout-index-index #hyva-checkout-container.ps-email-connu .checkout-nav .ps-btn-next:focus {
background: #f1f3f5 !important; color: var(--ps-texte) !important; border-color: #c9ced4 !important; box-shadow: none;
}
/* compte connu : ordre Se connecter → Continuer sans me connecter → Mot de passe oublié ? */
.ps-email-connu #guest_details .flex-row > a { display: none; }
.ps-mdp-oublie { display: none; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--ps-texte-2); text-decoration: underline; }
.ps-email-connu .ps-mdp-oublie { display: block; }
.ps-email-connu #guest_details .flex-row:has(> .btn) { margin-bottom: 12px; }
/* Livraison : l'adresse d'abord, les modes ensuite */
.ps-modes__attente {
margin: 0; padding: 14px 16px; border: 1px dashed var(--ps-bord); border-radius: 12px; background: var(--ps-fond);
font-size: 14px; color: var(--ps-texte-2);
}
#shipping-methods { margin-bottom: 20px; }
/* Formulaire d'adresse : écart entre les colonnes, choix Particulier / Société, Société masquée pour un particulier */
.hyva_checkout-index-index form.address-form > .grid { column-gap: 16px; }
.ps-client { display: flex; gap: 8px; margin: 0 0 20px; }
.ps-client__choix {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px;
border: 1px solid var(--ps-bord); border-radius: 10px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ps-texte); cursor: pointer;
}
.ps-client__choix:has(input:checked) { border: 2px solid var(--ps-rouge); color: var(--ps-rouge); }
.ps-client__choix input { accent-color: var(--ps-rouge); margin: 0; }
.hyva_checkout-index-index form.address-form:has(.ps-client input[value="particulier"]:checked) .field-company { display: none; }
@media (min-width: 768px) { .ps-client { max-width: 420px; } }
/* Coordonnées (e-mail du visiteur, Kare, adresse, facturation) à l'étape « Coordonnées », l'étape Livraison ne montre que les modes */
#hyva-checkout-main.step-shipping:has(.ps-adresse-invite) #shipping-details { display: none; }
#hyva-checkout-main.step-compte .ps-etape-paiement { display: none; }
.hyva_checkout-index-index.step-compte #shipping-details, #hyva-checkout-main.step-compte #shipping-details { margin-top: 24px; }
.ps-adresse-invite {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 14px 16px;
border: 1px solid var(--ps-bord); border-radius: 12px; background: #fff; font-size: 14px; color: var(--ps-texte);
}
.ps-adresse-invite__texte { display: flex; flex-direction: column; gap: 4px; }
.ps-adresse-invite__texte strong { font-size: 15px; }
.ps-adresse-invite__modifier { flex-shrink: 0; background: none; border: 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--ps-rouge); text-decoration: underline; cursor: pointer; }
/* Formulaire d'adresse plus serré (GDD) : 14 px entre les champs au lieu de 25 (50 sous l'adresse), libellé plus près du champ */
body.hyva_checkout-index-index form.address-form .field-wrapper { margin: 0 0 14px; }
body.hyva_checkout-index-index form.address-form .field-wrapper.field-street { margin-bottom: 14px; }
body.hyva_checkout-index-index form.address-form .field-street > .field-wrapper-inner > .space-y-2 > .field-wrapper-inner { margin-top: 8px; }
body.hyva_checkout-index-index form.address-form .field-wrapper-inner > label:not(.sr-only) { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
body.hyva_checkout-index-index form.address-form .input-group > input, body.hyva_checkout-index-index form.address-form select.form-select { height: 46px; border-radius: 10px; font-size: 16px; }
body.hyva_checkout-index-index form.address-form .input-group > input { line-height: 46px; }
body.hyva_checkout-index-index form.address-form .field-comment, body.hyva_checkout-index-index form.address-form .field-wrapper p { margin-top: 4px; font-size: 12px; }
body.hyva_checkout-index-index #shipping-details .step-title, body.hyva_checkout-index-index #shipping-details legend { margin-bottom: 12px; }
/* Panier : barre de livraison offerte à deux paliers (point relais, domicile), en haut du panier comme GDD */
.ps-paliers { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--ps-bord); border-radius: 12px; background: #fff; }
.ps-paliers__message { margin: 0 0 12px; font-size: 14px; color: var(--ps-texte); }
.ps-paliers__message strong { font-weight: 700; }
.ps-paliers__ok { display: inline-block; margin-right: 6px; color: var(--ps-vert-texte); font-weight: 700; }
.ps-paliers__ok::before { content: "✓ "; }
.ps-paliers__barre { position: relative; height: 8px; border-radius: 4px; background: #e6e9ed; margin: 0 8px; }
.ps-paliers__avance { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--ps-vert); }
.ps-paliers__repere {
position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%);
background: #fff; border: 2px solid #b8c0c8;
}
.ps-paliers__repere.is-atteint { border-color: var(--ps-vert); background: var(--ps-vert); }
.ps-paliers__liste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; list-style: none; margin: 10px 0 0; padding: 0; }
.ps-paliers__etape { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; color: var(--ps-texte-2); }
.ps-paliers__etape::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #b8c0c8; background: #fff; }
.ps-paliers__etape.is-atteint::before { border-color: var(--ps-vert); background: var(--ps-vert); }
.ps-paliers__etape.is-atteint { color: var(--ps-vert-texte); font-weight: 700; }
/* barre à repères fixes (1/3, 2/3) comme GDD : le remplissage avance par palier, pas à l'échelle des montants */
.ps-paliers__barre { margin: 0 8px 0; }
.ps-paliers__liste { position: relative; display: block; height: 34px; margin: 8px 8px 0; }
.ps-paliers__etape { position: absolute; top: 0; transform: translateX(-50%); flex-direction: column; gap: 0; text-align: center; line-height: 1.35; }
.ps-paliers__etape::before { content: none; }
.ps-paliers__etape strong { font-weight: 700; color: var(--ps-texte); }
.ps-paliers__etape.is-atteint strong { color: var(--ps-vert-texte); }
/* Panier : colonnes qui ne se chevauchent plus sur un écran moyen (le formulaire avait une largeur fixe de 697 px) */
.checkout-cart-index #maincontent .ps-cart-main .form-cart.form-cart { width: auto; max-width: 100%; padding-right: 0; }
.checkout-cart-index #maincontent .ps-cart { gap: 0 24px; flex-wrap: nowrap; }
.checkout-cart-index #maincontent .ps-cart-summary { flex: 0 1 442px; min-width: 340px; }
@media (min-width: 768px) {
.checkout-cart-index #maincontent .ps-cart-main .cart.item .col.item { flex: 1 1 auto; max-width: none; min-width: 0; }
}
@media (max-width: 1023.98px) {
.checkout-cart-index #maincontent .ps-cart { flex-wrap: wrap; }
.checkout-cart-index #maincontent .ps-cart-main,
.checkout-cart-index #maincontent .ps-cart-summary { flex-basis: 100%; max-width: none; min-width: 0; }
}
/* « Continuer mes achats » dans le flux, aligné sur le contenu, avec de l'air autour */
.checkout-cart-index #maincontent .ps-cart-top:has(.ps-frise--panier) .continue-shopping { position: static; margin: 0 8px 0 0; flex: 0 0 auto; }
/* Panier : réassurance dans la carte du récapitulatif (comme GDD) */
.ps-reassurance {
display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; background: #fff;
border: 1px solid var(--color-border-3, var(--ps-bord)); border-top: 0; border-radius: 0 0 6px 6px;
}
.ps-reassurance__ligne { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; background: #eef6ea; }
.ps-reassurance__titre { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ps-vert-texte); }
.ps-reassurance__titre::before {
content: ""; flex: 0 0 18px; height: 18px; background: currentColor;
-webkit-mask: var(--ps-icone) center / contain no-repeat; mask: var(--ps-icone) center / contain no-repeat;
}
.ps-reassurance__ligne--paiement { --ps-icone: url("data:image/svg+xml;utf8,"); }
.ps-reassurance__ligne--livraison { --ps-icone: url("data:image/svg+xml;utf8,"); }
.ps-reassurance__ligne img { display: block; max-width: 100%; height: auto; margin-left: 26px; }
/* de l'air entre « Commander » et la réassurance ; logos sur fond blanc fondus dans le bandeau */
.ps-reassurance { padding-top: 14px; }
.ps-reassurance__ligne img { mix-blend-mode: multiply; }
/* encart service client sous le récapitulatif (comme GDD) */
.ps-contact-panier {
margin: 12px 0 0; padding: 14px 20px; background: #fff; border: 1px solid var(--color-border-3, var(--ps-bord)); border-radius: 6px;
font-size: 14px; line-height: 1.5; color: var(--ps-texte-2);
}
.ps-contact-panier p { margin: 0; }
.ps-contact-panier strong { font-weight: 700; color: var(--ps-texte); }
.ps-contact-panier__liens { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px !important; }
.ps-contact-panier__lien { display: inline-flex; align-items: center; gap: 6px; color: var(--ps-texte); font-weight: 600; text-decoration: none; }
.ps-contact-panier__lien:hover { text-decoration: underline; }
.ps-contact-panier__lien::before {
content: ""; width: 16px; height: 16px; background: var(--ps-vert-texte);
-webkit-mask: var(--ps-icone) center / contain no-repeat; mask: var(--ps-icone) center / contain no-repeat;
}
.ps-contact-panier__lien--mail { --ps-icone: url("data:image/svg+xml;utf8,"); }
.ps-contact-panier__lien--tel { --ps-icone: url("data:image/svg+xml;utf8,"); }
.checkout-cart-index #maincontent .ps-cart-summary .estimated-mondial-relay.estimated-mondial-relay { padding-top: 16px; }
/* code de réduction dans la carte du récapitulatif, repliable (comme Drakkars) */
.ps-cart-summary [x-cloak] { display: none !important; }
.checkout-cart-index #maincontent .ps-cart-summary #block-discount.block.discount {
margin: 0; padding: 0 20px 14px; background: #fff; border: 1px solid var(--color-border-3, var(--ps-bord)); border-width: 0 1px; border-radius: 0;
}
.ps-cart-summary .block.discount .title { margin: 0; padding: 0; border-top: 1px solid var(--color-border-3, var(--ps-bord)); font-size: inherit; }
.ps-coupon-bascule {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 12px 0; border: 0; background: none;
font-size: 14px; font-weight: 600; color: var(--ps-texte); cursor: pointer; text-align: left;
}
.ps-coupon-bascule::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; color: var(--ps-texte-2); }
.ps-coupon-bascule[aria-expanded="true"]::after { content: "−"; }
.ps-cart-summary .block.discount .content { padding: 0 0 4px; }
/* le code promo a quitté la carte « cadeau » : sans cadre, elle ne laisse plus un filet vide quand rien n'y est affiché */
.checkout-cart-index #maincontent .ps-cart-summary .checkout-cart-gift { border: 0; background: none; padding: 0; margin-top: 12px; }
/* récapitulatif qui reste visible pendant que les articles défilent (comme GDD) ; seulement en deux colonnes et si l'écran
est assez haut pour le montrer en entier (~600 px, l'en-tête du panier ne reste pas fixe) */
@media (min-width: 1024px) and (min-height: 700px) {
.checkout-cart-index #maincontent .ps-cart { align-items: flex-start; }
.checkout-cart-index #maincontent .ps-cart-summary { position: sticky; top: 16px; }
}
.ps-cart-summary .estimated-mondial-relay .price.ps-frais-offerts { color: var(--ps-vert-texte); font-weight: 700; }
/* panier : groupes Parapharmacie / Médicaments (seulement quand les deux sont présents) */
.ps-cart-groupe { margin: 18px 0 8px; font-size: 16px; font-weight: 700; color: var(--ps-texte); }
.ps-cart-groupe:first-child { margin-top: 0; }
/* « Mon panier (5 produits) » */
.checkout-cart-index #maincontent .ps-cart-main .page-title-wrapper { display: inline-block; vertical-align: middle; }
.ps-panier-nombre { display: inline-block; margin: 0 0 15px 8px; font-size: 18px; font-weight: 400; color: var(--ps-texte-2); vertical-align: middle; }
/* panier mobile : prix aligné sur le − / + (même ligne, centrés) ; sur ordinateur, prix sous le nom comme avant */
.checkout-cart-index #maincontent .cart.item .col.qty .ps-prix-mobile { display: none; }
@media (max-width: 767.98px) {
.checkout-cart-index #maincontent .cart.item .product-item-details .subtotal { display: none; }
.checkout-cart-index #maincontent .cart.item .col.qty { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 1 1 100%; margin-left: 0; }
.checkout-cart-index #maincontent .cart.item .col.qty .ps-prix-mobile { display: block; position: static; margin: 0; }
}
/* étape Coordonnées (coordonnees-progressif.phtml) : adresse et encart Kare seulement pour une adresse e-mail sans compte ;
adresse connue = connexion seulement ; la facturation suit l'adresse de livraison (Thomas 27/10) */
.ps-attente-email #shipping-details, .ps-email-connu #shipping-details,
.ps-attente-email #billing-details, .ps-email-connu #billing-details,
.ps-attente-email .ps-kare, .ps-email-connu .ps-kare, .ps-email-invite .ps-kare { display: none; }
.input-group:has(.ps-email-effacer) { position: relative; }
.input-group:has(.ps-email-effacer) input[name="email_address"] { padding-right: 40px; }
.ps-email-effacer {
position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%;
background: #eef0f2; color: var(--ps-texte-2); font-size: 0; padding: 0; cursor: pointer;
}
/* croix dessinée (deux traits) plutôt que le caractère ×, dont la ligne de base le décentre dans la pastille */
.ps-email-effacer::before, .ps-email-effacer::after {
content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor;
transform: translate(-50%, -50%) rotate(45deg);
}
.ps-email-effacer::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ps-email-effacer:hover { background: var(--ps-bord); color: var(--ps-texte); }
.ps-attente-email .ps-email-effacer { display: none; }
/* étape Coordonnées : connexion Google / Apple… sous l'e-mail, comme GDD (balisage du thème Amasty_SocialLoginHyva::social.phtml,
dont les styles ne sont chargés que sur les pages compte) ; seulement tant que l'e-mail n'est pas renseigné (Thomas 26/10) */
#hyva-checkout-container:not(.ps-attente-email) .amsl-socials-checkout { display: none; }
.amsl-socials-checkout { margin: 16px 0 4px; }
.amsl-socials-checkout .amsl-separator { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--ps-texte-2); font-size: 13px; }
.amsl-socials-checkout .amsl-separator::before, .amsl-socials-checkout .amsl-separator::after { content: ""; flex: 1; height: 1px; background: var(--ps-bord); }
.amsl-socials-checkout .amsl-title { display: none; }
.amsl-socials-checkout .amsl-buttons { display: flex; flex-direction: column; gap: 8px; }
.amsl-socials-checkout .amsl-button {
display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 16px;
border: 1px solid #b8c0c8; border-radius: 10px; background: #fff; color: var(--ps-texte); font-size: 14px; font-weight: 600; cursor: pointer;
}
.amsl-socials-checkout .amsl-button:hover { border-color: var(--ps-texte); background: #fff; color: var(--ps-texte); }
.amsl-socials-checkout .amsl-button::after { content: attr(title); }
.amsl-socials-checkout .amsl-social-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; }
.amsl-socials-checkout .amsl-button.-google .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PG1hc2sgaWQ9ImEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIzMSIgaGVpZ2h0PSIzMyI+PHBhdGggZD0iTS4xMDIgMTYuNTJDLS4yMDggOC4yNjUgNi45MTYuNjM1IDE1LjA1Ni41MzZjNC4xNS0uMzYgOC4xODYgMS4yNzYgMTEuMzI2IDMuOTQ0LTEuMjg4IDEuNDM4LTIuNTk5IDIuODU5LTMuOTk4IDQuMTktMi43NjUtMS43MDUtNi4wOTMtMy4wMDUtOS4zMjMtMS44NS01LjIxIDEuNTA1LTguMzY2IDcuNzUxLTYuNDM4IDEyLjkyNiAxLjU5NyA1LjQwNSA4LjA3MiA4LjM3IDEzLjE0NyA2LjEgMi42MjgtLjk1NSA0LjM2LTMuNDE2IDUuMTItNi4wNjEtMy4wMTEtLjA2MS02LjAyMy0uMDIzLTkuMDM1LS4xMDctLjAwOC0xLjgyLS4wMTUtMy42MzItLjAwOC01LjQ1IDUuMDIzLS4wMDggMTAuMDUzLS4wMjQgMTUuMDgzLjAyMi4zMDkgNC40NTctLjM0IDkuMjI3LTMuMTkzIDEyLjgwNC0zLjkwOSA1LjEwNy0xMS4xMyA2LjYwNS0xNy4wMDMgNC42MDJDNC41IDI5LjU3OC0uMDM0IDIzLjIwMi4xMDIgMTYuNTJ6IiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGQ9Ik0tOS43NjIgMzQuMzZWMi4zMzVsMjAuOTQgMTYuMDE0LTIwLjk0IDE2LjAxM3oiIGZpbGw9IiNGQkJDMDUiLz48cGF0aCBkPSJNLTkuNzYyIDIuMzM1bDIwLjk0IDE2LjAxMyA4LjYyMy03LjUxNEw0OS4zNjMgNi4wM3YtMTcuMjQ1SC05Ljc2MnYxMy41NXoiIGZpbGw9IiNFQTQzMzUiLz48cGF0aCBkPSJNLTkuNzYyIDM0LjM2TDI3LjE5IDYuMDNsOS43MzEgMS4yMzIgMTIuNDQxLTE4LjQ3N1Y0Ny45MUgtOS43NjJWMzQuMzZ6IiBmaWxsPSIjMzRBODUzIi8+PHBhdGggZD0iTTQ5LjM2MyA0Ny45MUwxMS4xNzggMTguMzQ4bC00LjkyNy0zLjY5Nkw0OS4zNjMgMi4zMzRWNDcuOTF6IiBmaWxsPSIjNDI4NUY0Ii8+PC9nPjwvc3ZnPg==); }
.amsl-socials-checkout .amsl-button.-apple .amsl-social-icon { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAjCAYAAABo4wHSAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKGSURBVHgBvVddbtpAEJ5dm1SVIuq8EcWm7glK3/pWOEGSExAe+9T2BE1OUHqCuDcIJ4Ab1Jygq5IfHi1qpApsb2ccg4xrO1HszSeBl9ldvp31zM63DGqCgdjfb34CkF36fX096xWN1aEGHB5aJ5rGLokbgOFDTsrGVyZtt9v9KAJn1yqnZXMYVECr1bJ1fe9X1h4E/M18LkTRPA4VoOsvLrM2KcEpI6xESl5ugiZFKMKQXzw098mkmtbo5hD2HvKyEiljzE6aHkD0fbnk7x5DGM8t6jBNsysl73AOb9EPDyN0GobryRz/mfpxdzGIAtv3ddfzhEfjcSHH6LGN3QZj4GbnFJJSzuk6+5ZMzoGcYN8P9M5FEuOeiJ1BnKMFM6QcLpd/LjzEf6SW1Sayz6AA6LlYr1c98nr7Tk2z/VUVIYF2rtHYG1M7PpGOjqwzfJyDQlB0Y4ycbkk5Z+SlUsJ0OnHLsk6Kg6YeRJH8kk4njmF9DEohJ3d3s6u0hWPId0AhMJ1GWRtFrw0KwVjkQg6pAc+MSqXtMQhDZuSReqAQKGM6eaQClEJ+yFo45ugUlIJ1qYjskGoauKAYpBTvlUZCulrxK1APgw77DXFc2kzz9Tird1QBa6sTpwzncgTPBDwBDxJS7oDi1NkgDKWjUQNVxN9m89VLbHZBIajE3d7OPm5PJF3nQzKCUshYE29JhRAeHs4DUARS/jc3M4faWrpjsVgI3OYDbL6HGpEoh4Hv56jBDVCk/cRHXXXWwwvVjhDPvSri++0FQTQuIXZJTFMDi7SN3zQur0SS+j+dz3+LtLH0qogen+PW9JHAJiL8jHyfD0nRZ8eSomSM95MF0HLcINAGeVeNfzUoF3Ix/HhxAAAAAElFTkSuQmCC); }
.amsl-socials-checkout .amsl-button.-amazon .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MyIgaGVpZ2h0PSI0MCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0Y5MCIgZD0iTTM4Ljg2OCAzNC42ODVDMzQuMTYgMzguMTUxIDI3LjMzNSA0MCAyMS40NTggNDAgMTMuMjIgNDAgNS44MDIgMzYuOTU3LjE5IDMxLjg5NmMtLjQ0LS4zOTgtLjA0Ni0uOTQuNDgzLS42M0M2LjczIDM0Ljc4NCAxNC4yMTcgMzYuOSAyMS45NTMgMzYuOWM1LjIxNiAwIDEwLjk1NC0xLjA3OCAxNi4yMy0zLjMxNC43OTgtLjMzOCAxLjQ2NS41Mi42ODUgMS4wOTh6Ii8+PHBhdGggZmlsbD0iI0Y5MCIgZD0iTTQwLjgyNiAzMi40NWMtLjYtLjc2OS0zLjk3OS0uMzY0LTUuNDk1LS4xODQtLjQ2My4wNTYtLjUzMy0uMzQ1LS4xMTctLjYzNCAyLjY5MS0xLjg5MSA3LjEwNy0xLjM0NSA3LjYyMi0uNzExLjUxNS42MzctLjEzNCA1LjA1Ny0yLjY2MyA3LjE2Ny0uMzg4LjMyNC0uNzU4LjE1MS0uNTg1LS4yNzkuNTY4LTEuNDE1IDEuODQtNC41ODggMS4yMzgtNS4zNnoiLz48cGF0aCBmaWxsPSIjMjIxRjFGIiBkPSJNMjQuMzczIDE2LjQ0NVYxNS4zM2MtMy43NjMgMC03LjczOC43OTctNy43MzggNS4xODggMCAyLjIyNCAxLjE2NCAzLjczIDMuMTYzIDMuNzMgMS40NjQgMCAyLjc3NC0uODkgMy42MDEtMi4zNCAxLjAyNS0xLjc4Mi45NzQtMy40NTUuOTc0LTUuNDYyek0yOS42MiAyOWMtLjM0NC4zMDQtLjg0MS4zMjYtMS4yMy4xMjMtMS43MjctMS40Mi0yLjAzNC0yLjA4LTIuOTg2LTMuNDM0LTIuODU1IDIuODgzLTQuODc1IDMuNzQ1LTguNTggMy43NDUtNC4zNzcgMC03Ljc4OC0yLjY3My03Ljc4OC04LjAyNiAwLTQuMTggMi4yOTEtNy4wMjggNS41NDgtOC40MTkgMi44MjYtMS4yMzEgNi43NzItMS40NDkgOS43ODgtMS43ODl2LS42NjZjMC0xLjIyNS4wOTUtMi42NzQtLjYzLTMuNzMxLS42MzctLjk1LTEuODUyLTEuMzQtMi45Mi0xLjM0LTEuOTg0IDAtMy43NTYgMS4wMDYtNC4xODggMy4wOTMtLjA4OC40NjMtLjQzMi45Mi0uOS45NDJsLTUuMDUxLS41MzdjLS40MjUtLjA5NC0uODkzLS40MzQtLjc3Ni0xLjA3OUMxMS4wNzIgMS44MjYgMTYuNTk4IDAgMjEuNTQ4IDBjMi41MzIgMCA1Ljg0LjY2NiA3Ljg0IDIuNTY1IDIuNTMyIDIuMzQgMi4yOSA1LjQ2MiAyLjI5IDguODZ2OC4wMjdjMCAyLjQxMiAxLjAxIDMuNDcgMS45NjIgNC43NzQuMzM3LjQ2My40MSAxLjAyMS0uMDE0IDEuMzY5LTEuMDYyLjg3Ny0yLjk1IDIuNTA3LTMuOTkgMy40MkwyOS42MjEgMjkiLz48L3N2Zz4=); }
.amsl-socials-checkout .amsl-button.-facebook .amsl-social-icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMzgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEyLjM3IDM3LjI4VjIwLjY2OGg1LjU3NmwuODM1LTYuNDc0SDEyLjM3VjEwLjA2YzAtMS44NzUuNTItMy4xNTIgMy4yMDktMy4xNTJsMy40MjgtLjAwMnYtNS43OWMtLjU5My0uMDgtMi42MjgtLjI1Ni00Ljk5Ni0uMjU2LTQuOTQzIDAtOC4zMjcgMy4wMTctOC4zMjcgOC41NTh2NC43NzVILjA5NHY2LjQ3NWg1LjU5VjM3LjI4aDYuNjg2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==); }
/* récapitulatif : totaux à toutes les étapes (Thomas 26/10), contre la règle « étape paiement seulement » de tunnel-pixel.css */
body.hyva_checkout-index-index #hyva-checkout-main.step-shipping .total-segments { display: block; }
.ps-estimation-livraison { font-weight: 600; }
/* gain Kare sous le total (Thomas 26/10) */
.ps-gain-kare {
display: flex; align-items: center; gap: 10px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border: 0; border-radius: 10px;
background: var(--ps-kare-fond); color: var(--ps-kare-encre); font-size: 13px; font-weight: 600; line-height: 1.3; text-align: left;
}
.ps-gain-kare--lien { cursor: pointer; }
.ps-gain-kare--lien:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.ps-gain-kare__logo { flex-shrink: 0; width: 54px; height: auto; }
.ps-gain-kare__fleche { margin-left: auto; font-size: 18px; }
/* ligne « Cagnotte fidélité » des totaux : pastille Kare et montant en gras, sans concurrencer l'encart jaune */
.hyva_checkout-index-index .total-segments tr.loyalty_kitty th.mark,
.hyva_checkout-index-index .total-segments tr.loyalty_kitty td.amount { font-weight: 700; color: var(--ps-kare-encre); }
.ps-total-kare__logo { display: inline-block; margin-right: 6px; }
.ps-cagnotte__logo { flex-shrink: 0; width: 72px; height: auto; }
/* petits logos Kare façon carte (Thomas 26/10) : format carte bancaire (≈ 1,6), fond jaune de la carte, liseré vert du logo */
.ps-gain-kare__logo, .ps-total-kare__logo, .ps-cagnotte__logo {
box-sizing: border-box; object-fit: contain; border: 2.5px solid #2b9343; border-radius: 6px; background: var(--ps-kare-fond);
}
.ps-gain-kare__logo { width: 64px; height: 40px; padding: 0 6px; }
.ps-cagnotte__logo { width: 80px; height: 50px; padding: 0 8px; }
.ps-total-kare__logo { width: 40px; height: 25px; padding: 0 4px; border-width: 1.5px; border-radius: 4px; }
.ps-total-avoir__logo {
box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 25px; margin: -3px 6px 0 0;
border: 1.5px solid #2b9343; border-radius: 4px; background: #fff; color: #2b9343; vertical-align: middle;
}
#maincontent .total-segments th.mark .ps-total-kare__logo { vertical-align: middle; margin-top: -3px; } /* contre « #maincontent img » du thème */
/* cagnotte à l'étape paiement, au-dessus des moyens de paiement */
.ps-cagnotte {
display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
background: var(--ps-kare-fond); color: var(--ps-kare-encre); font-size: 13px;
}
.ps-cagnotte__texte { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ps-cagnotte__texte strong { font-size: 15px; }
.ps-cagnotte__bouton {
flex-shrink: 0; min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--ps-kare-encre);
color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.ps-cagnotte__retirer { flex-shrink: 0; border: 0; background: none; color: var(--ps-kare-encre); font-size: 13px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ps-cagnotte__retirer:hover, .ps-cagnotte__retirer:focus, .ps-avoir__lien:hover { border: 0; background: none; text-decoration-thickness: 2px; }
.ps-cagnotte button[disabled] { opacity: .6; cursor: wait; }
/* avoir (crédit portefeuille Amasty) au format de la cagnotte, couleurs Pharmashopi (vert clair, carte au liseré vert) */
.ps-avoir {
display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; border-radius: 12px;
background: var(--ps-avoir-fond, #e8f4ea); color: var(--ps-kare-encre); font-size: 13px;
}
.ps-avoir__carte {
box-sizing: border-box; flex-shrink: 0; width: 80px; height: 50px; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 1px; border: 2.5px solid #2b9343; border-radius: 6px; background: #fff; color: #2b9343;
font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.ps-avoir__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.ps-avoir__lien { border: 0; background: none; padding: 0; font-size: 12px; text-decoration: underline; color: var(--ps-kare-encre); cursor: pointer; }
.ps-avoir__montant { display: flex; gap: 6px; }
.ps-avoir__montant .input-text { width: 90px; min-height: 40px; border-radius: 10px; text-align: right; }
.ps-avoir button[disabled] { opacity: .6; cursor: wait; }
@media (max-width: 639px) { .ps-cagnotte, .ps-avoir { flex-wrap: wrap; } .ps-cagnotte__bouton { width: 100%; } .ps-avoir__actions { width: 100%; align-items: stretch; } }
/* tunnel : la réassurance est une carte à part entière (au panier, c'est le bas de la carte du récapitulatif) */
.ps-quote-summary .ps-reassurance, .ps-quote-summary .ps-contact-panier { margin-top: 16px; border: 1px solid #ecedf0; border-radius: 8px; }
.ps-quote-summary .ps-reassurance { padding: 16px 20px; }
.hyva_checkout-index-index .total-segments th.mark { text-align: left; padding-left: 0; }
.hyva_checkout-index-index .total-segments td.amount { text-align: right; padding-right: 0; }
/* frise des étapes du tunnel : même largeur que les colonnes (1142 px centrées), carte arrondie comme les blocs du dessous,
et de l'air avant eux (Thomas 26/10) */
.hyva_checkout-index-index .ps-frise:not(.ps-frise--panier) {
max-width: var(--checkout-cart-width, 1142px); margin: 16px auto 24px; border: 1px solid #ecedf0; border-radius: 8px; padding: 12px 20px;
}
@media (max-width: 767px) { .hyva_checkout-index-index .ps-frise:not(.ps-frise--panier) { margin: 12px 0 16px; padding: 10px 12px; } }
/* e-mail vide ou invalide après un compte connu : Hyvä garde customerExists (il ne le recalcule que sur un e-mail valide),
donc on masque nous-mêmes mot de passe et connexion tant que l'e-mail n'est pas valide */
.ps-attente-email #guest-details .field-type-password, .ps-attente-email #guest-details .checkout-form-toolbar { display: none; }
/* « Continuer sans me connecter » : même écran qu'une commande sans compte (adresse + « Continuer » rouge), plus de mot de passe ni
de « Se connecter » ; la croix ramène au départ pour se connecter (Thomas 26/10) */
.ps-email-invite #guest-details .field-type-password, .ps-email-invite #guest-details .checkout-form-toolbar { display: none; }
#guest-details .ps-email-erreur { margin: 0; font-size: 14px; color: oklch(0.577 0.245 27.325); } /* = message d'erreur Hyvä */
/* mobile : la colonne du récapitulatif (Luma : fond blanc sous 768 px) laisse voir le fond de page entre les cartes, comme sur PC */
@media (max-width: 768px) { .hyva_checkout-index-index #opc-sidebar.opc-sidebar { background: transparent; } }
/* poids du panier sur la ligne « N Article(s) dans le panier » (sous la carte, il repoussait les encarts, Thomas 26/10) */
.ps-quote-summary .items-in-cart > .title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ps-poids-panier { font-size: 13px; font-weight: 400; color: var(--ps-texte-2); white-space: nowrap; }
.ps-apres-resume:empty { display: none; }
/* e-mail pas encore vérifié : pas de « Vous pourrez créer un compte… » (Hyvä l'affiche ou non selon le dernier e-mail
enregistré : la phrase apparaissait / disparaissait pendant la frappe et faisait bouger le bouton, Thomas 26/10) */
.ps-attente-email #guest-details .field-type-email .field-wrapper-inner > p { display: none; }
/* messages des composants Hyvä (ex. « Identifiant ou mot de passe invalide. ») : le style .message.error de Luma (icône à
45 px, croix en gros bouton bordé sur une 2e ligne) plus le point rouge clignotant de Hyvä donnaient un bloc bancal
(Thomas 26/10) → une ligne : texte, petite croix à droite */
body.hyva_checkout-index-index .component-messenger.message {
display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 8px 10px 14px; border-radius: 8px;
font-size: 14px; line-height: 1.4;
}
body.hyva_checkout-index-index .component-messenger.message.error {
background: #fdeef0; color: oklch(0.577 0.245 27.325); border: 1px solid #f5c6cd;
}
body.hyva_checkout-index-index .component-messenger.message > span { flex: 1; }
body.hyva_checkout-index-index .component-messenger.message > span::before,
body.hyva_checkout-index-index .component-messenger.message > div.absolute { display: none; }
body.hyva_checkout-index-index .component-messenger.message > button {
flex: 0 0 28px; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: transparent; color: inherit; box-shadow: none;
}
body.hyva_checkout-index-index .component-messenger.message > button:hover { background: rgba(0, 0, 0, .06); }
body.hyva_checkout-index-index .component-messenger.message > button svg { width: 14px; height: 14px; }
/* étape Coordonnées : le message vient sous « Vos coordonnées », juste au-dessus de l'e-mail (Hyvä le met avant le titre) */
#guest-details:has(> .component-messenger) { display: flex; flex-direction: column; }
#guest-details > .step-title { order: -1; }
/* articles du récapitulatif repliés par défaut : « + / − » au bout de la ligne, comme le code promo (Thomas 26/10) */
.ps-quote-summary .items-in-cart [x-cloak] { display: none !important; }
body.hyva_checkout-index-index .ps-quote-summary .items-in-cart > .title { padding-right: 0; cursor: pointer; }
.ps-quote-summary .items-in-cart > .title .ps-poids-panier { margin-left: auto; }
.ps-quote-summary .items-in-cart > .title::after {
content: "+"; position: static; width: auto; margin: 0; font-family: inherit; font-size: 20px; font-weight: 400; line-height: 1;
color: var(--ps-texte-2);
}
.ps-quote-summary .items-in-cart > .title[aria-expanded="true"]::after { content: "−"; }
body.hyva_checkout-index-index .ps-quote-summary .items-in-cart:not(.active) > .title { border-bottom: 0; padding-bottom: 0; }
/* icônes carrées des transporteurs sur chaque mode de livraison, comme GDD (Thomas 26/10 : logos trop gros) ;
point relais : Mondial Relay, Chronopost en petit dans le coin ; retrait en pharmacie : favicon du site */
.ps-mode__logos { position: relative; flex: 0 0 36px; width: 36px; height: 36px; }
.ps-mode__logos img { display: block; width: 32px; height: 32px; object-fit: contain; border-radius: 7px; }
/* l'optimiseur d'images enveloppe les ![]()
dans un : on vise le dernier enfant, quel qu'il soit */
.ps-mode__logos > * { display: block; }
.ps-mode__logos--deux > :last-child { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; }
.ps-mode__logos--deux > :last-child img, .ps-mode__logos--deux > img:last-child {
width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 2px #fff;
}
.ps-offre__logo { width: 24px; height: 24px; border-radius: 5px; }
/* panier : rappel du questionnaire santé en tête des médicaments (lien qui descend au questionnaire et l'ouvre) */
.ps-rappel-sante { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: #eef6e8; color: var(--ps-vert-texte); font-size: 14px; }
.ps-rappel-sante a { margin-left: 4px; font-weight: 700; color: inherit; text-decoration: underline; }
/* questionnaire santé : même largeur et même écart que les cartes des articles (il était plus étroit de 26 px) */
#maincontent #health-info { width: 100%; margin-top: 24px; padding: 0; scroll-margin-top: 16px; }
#maincontent #health-info .health-info-container { width: 100%; max-width: none; box-sizing: border-box; margin: 0; }
/* questionnaire santé : « Valider les informations » en bouton secondaire (blanc, survol gris), le rouge reste à
« Commander » (Thomas 26/10) */
#maincontent #health-info #health-info-submit, #maincontent #health-info #health-info-update {
background: #fff; color: var(--ps-texte); border: 1px solid var(--ps-bord); box-shadow: none;
}
#maincontent #health-info #health-info-submit:hover, #maincontent #health-info #health-info-submit:focus,
#maincontent #health-info #health-info-update:hover, #maincontent #health-info #health-info-update:focus {
background: #f1f3f5; color: var(--ps-texte); border-color: #c9ced4;
}
#maincontent #health-info textarea { font-family: inherit; font-size: 14px; padding: 10px 14px; }
#maincontent #health-info textarea::placeholder, #maincontent #health-info input::placeholder { font-family: inherit; }
/* Facturation différente « Non / Oui » sous l'adresse de livraison, à l'étape Coordonnées (GDD, Thomas 26/10) */
body.hyva_checkout-index-index #billing-details { margin: 8px 0 24px; padding: 0; border: 0; }
body.hyva_checkout-index-index .ps-facturation-choix { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.ps-interrupteur { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: var(--ps-texte); }
body.hyva_checkout-index-index .ps-interrupteur input[type="checkbox"] { position: absolute !important; opacity: 0 !important; width: 1px !important; height: 1px !important; margin: 0 !important; }
.ps-interrupteur__piste { display: inline-block; flex-shrink: 0; position: relative; width: 40px; height: 22px; border-radius: 11px; background: #c9ced4; transition: background .15s; }
.ps-interrupteur__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
/* case Hyvä cochée = mêmes adresses : interrupteur éteint ; décochée = facturation différente : allumé */
.ps-interrupteur input:not(:checked) + .ps-interrupteur__piste { background: var(--ps-rouge); }
.ps-interrupteur input:not(:checked) + .ps-interrupteur__piste::after { transform: translateX(18px); }
.ps-interrupteur input:focus-visible + .ps-interrupteur__piste { outline: 2px solid var(--ps-texte); outline-offset: 2px; }
/* Carnet d'adresses en petites cartes, comme GDD (Thomas 26/10) : 2 par ligne (1 sur mobile), carte entière cliquable */
.ps-adresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
@media (max-width: 639px) { .ps-adresses { grid-template-columns: minmax(0, 1fr); } }
.ps-adresse {
display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 12px; border: 1px solid var(--ps-bord); border-radius: 10px;
background: #f6f7f8; cursor: pointer; font-size: 13px; line-height: 1.4; color: var(--ps-texte-2); transition: border-color .15s, background .15s;
}
.ps-adresse:hover { border-color: #b8c0c8; }
.ps-adresse.is-actif { padding: 10px 11px; border: 2px solid var(--ps-rouge); background: #fff; }
.ps-adresse.is-actif .ps-radio-faux { border: 6px solid var(--ps-rouge); }
.ps-adresse:has(input:focus-visible) { outline: 2px solid var(--ps-texte); outline-offset: 2px; }
.ps-adresse__texte { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.ps-adresse__texte strong { font-size: 14px; color: var(--ps-texte); }
/* « Modifier · Supprimer » sous l'adresse, comme GDD (Thomas 26/10) ; confirmation sur la vignette */
.ps-adresse { flex-wrap: wrap; }
.ps-adresse__actions { flex-basis: 100%; padding-left: 28px; font-size: 13px; }
.ps-adresse__actions > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
body.hyva_checkout-index-index .ps-adresse__action {
min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--ps-texte);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.ps-adresse__confirmer { color: var(--ps-texte); }
/* formulaire ouvert par « Modifier » : l'adresse est déjà au carnet */
form[data-ps-edition] .field-save { display: none; }
/* « + Nouvelle adresse » : lien discret sous les cartes plutôt qu'un gros bouton */
body.hyva_checkout-index-index #checkoutSteps .new-address-popup .action-show-popup {
min-height: 0; padding: 4px 0; border: 0; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: var(--ps-texte);
text-decoration: underline; text-underline-offset: 3px;
}
/* case à cocher dessinée par le thème (label::before de .billing-address-same-as-shipping-block) : pas sur l'interrupteur */
body.hyva_checkout-index-index .ps-facturation-choix .ps-interrupteur::before, body.hyva_checkout-index-index .ps-facturation-choix .ps-interrupteur::after { display: none !important; content: none !important; }
/* « Nouvelle adresse » dans la page, sous les adresses (GDD, Thomas 26/10), plus en fenêtre */
.ps-adresse-nouvelle { margin: 4px 0 16px; padding: 16px; border: 1px solid var(--ps-bord); border-radius: 12px; background: #fff; }
.ps-adresse-nouvelle:not([style*="display: none"]) + .new-address-popup { display: none; }
body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-modal-header { padding: 0; margin: 0 0 12px; border: 0; }
body.hyva_checkout-index-index .ps-adresse-nouvelle .modal-title { margin: 0; font-size: 16px; font-weight: 700; }
body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-champs-adresse { overflow: visible; }
body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 8px 0 0; border: 0; box-shadow: none; }
/* formulaire « Nouvelle adresse » dans la page : même grille que le formulaire principal (prénom / nom côte à côte) */
body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-champs-adresse { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; }
body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-champs-adresse > .field-wrapper { max-width: none; grid-column: span 12; }
@media (min-width: 768px) { body.hyva_checkout-index-index .ps-adresse-nouvelle .ps-champs-adresse > .md\:col-span-6 { grid-column: span 6; } }
/* « Adresse de facturation » (Oui) : même titre que « Adresse de livraison », un peu d'air au-dessus */
body.hyva_checkout-index-index .checkout-billing-address .ps-facturation-titre { margin: 20px 0 12px; font-size: 18px; font-weight: 700; color: var(--ps-texte); }
/* PHAR-934 : bouton et détail du paiement Sogecommerce juste sous le choix fait (Apple Pay, Google Pay ou carte), pas sous
la dernière ligne du groupe (Thomas 26/10) : ordre CSS selon data-ps-sous-moyen de la liste */
.ps-paiement-groupe { display: flex; flex-direction: column; }
/* Ordre selon l'appareil (data-ps-ordre, paiement-choix.phtml ; Thomas 03/11) : son portefeuille d'abord, puis la carte, puis l'autre
portefeuille ; sans portefeuille reconnu, la carte d'abord. Le détail suit le choix fait (rang + 1). */
#payment-method-list { --ps-o-apple: 5; --ps-o-carte: 1; --ps-o-google: 3; }
#payment-method-list[data-ps-ordre="apple"] { --ps-o-apple: 1; --ps-o-carte: 3; --ps-o-google: 5; }
#payment-method-list[data-ps-ordre="google"] { --ps-o-google: 1; --ps-o-carte: 3; --ps-o-apple: 5; }
.ps-paiement-groupe > [data-ps-choix="APPLE_PAY"] { order: var(--ps-o-apple); }
.ps-paiement-groupe > [data-ps-choix="GOOGLEPAY"] { order: var(--ps-o-google); }
.ps-paiement-groupe > [data-ps-choix="CARDS"] { order: var(--ps-o-carte); }
.ps-paiement-groupe > .ps-paiement__detail { order: calc(var(--ps-o-carte) + 1); }
#payment-method-list[data-ps-sous-moyen="APPLE_PAY"] .ps-paiement-groupe > .ps-paiement__detail { order: calc(var(--ps-o-apple) + 1); }
#payment-method-list[data-ps-sous-moyen="GOOGLEPAY"] .ps-paiement-groupe > .ps-paiement__detail { order: calc(var(--ps-o-google) + 1); }
/* Carte / Apple Pay / Google Pay choisi : le détail (champs de la carte ou bouton du portefeuille, puis bouton) fait partie du
cadre rouge du choix, comme PayPal, le chèque et le virement (Thomas 03/11 : ce qu'on a choisi et son bouton dans la même boîte) */
#payment-method-list .ps-paiement-groupe._active > .ps-mode.is-actif { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 13px; }
#payment-method-list .ps-paiement-groupe > .ps-paiement__detail.ps-paiement__detail {
margin-top: -12px; padding: 2px 13px 13px; background: #fff;
border: 2px solid var(--ps-rouge); border-top: 0; border-radius: 0 0 12px 12px;
}
/* « Livraison : mode · ville Voir le détail » sous le récapitulatif, replié (Thomas 26/10) */
.ps-livraison-resume { margin-top: 16px; padding: 14px 18px; border-radius: 12px; background: #fff; }
body.hyva_checkout-index-index .ps-livraison-resume__tete {
display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding: 0;
border: 0; background: none; box-shadow: none; text-align: left; cursor: pointer; color: var(--ps-texte);
}
.ps-livraison-resume__texte { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--ps-texte-2); }
.ps-livraison-resume__texte strong { font-size: 15px; color: var(--ps-texte); }
.ps-livraison-resume__lien { flex-shrink: 0; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ps-livraison-resume .shipping-information { margin-top: 12px; }
/* mot de passe de la carte Kare (étape Compte) : mêmes pastilles qu'à la création de compte (connexion.css) */
.ps-kare__mdp { display: flex; flex-direction: column; gap: 8px; }
.ps-kare .ps-cnx__regles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; color: var(--ps-texte-2); }
.ps-kare .ps-cnx__regle { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: #fff; }
.ps-kare .ps-cnx__regle::before {
content: ""; flex: 0 0 10px; width: 10px; height: 10px; line-height: 10px; text-align: center; font-size: 11px;
background: radial-gradient(circle, #b8c0c8 3px, transparent 3.5px);
}
.ps-kare .ps-cnx__regle.is-ok { background: #eef7e9; color: var(--ps-vert-texte); }
.ps-kare .ps-cnx__regle.is-ok::before { content: "✓"; background: none; }
.ps-kare .ps-cnx__regles-titre.is-ok { color: var(--ps-vert-texte); }
/* Étape Livraison, mobile : « Valider la livraison » fixé en bas d'écran comme « Commander » au panier (panier-pixel.css :
pleine largeur, fond blanc, 10 px autour, même ombre ; Thomas 30/10). Ordinateur : à sa place sous les modes. */
@media (max-width: 767px) {
.hyva_checkout-index-index .checkout-nav.ps-nav-collante {
position: fixed; right: 0; bottom: 0; left: 0; z-index: 500; margin: 0;
padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--color-white, #fff); box-shadow: var(--shadow-luma-3, 0 -2px 8px rgba(0, 0, 0, .15));
}
/* place gardée en bas de page pour que la barre ne cache pas la fin du contenu */
.hyva_checkout-index-index #hyva-checkout-container:has(.ps-nav-collante) { padding-bottom: 80px; }
}
/* liste des relais ouverte : son bouton « Valider mon choix » suffit (pas deux boutons rouges à l'écran) */
@media (max-width: 767px) {
.hyva_checkout-index-index #hyva-checkout-container:has(.ps-relais) .checkout-nav.ps-nav-collante { position: static; box-shadow: none; padding: 0; }
}
/* « Enregistrer ma carte » (smartform) : seul l'interrupteur du module ; la case ronde du thème (pseudo-éléments des cases du
tunnel) se posait par-dessus une fois cochée, d'où un double bouton (Thomas 30/10) */
#sogecommerce_rest_form label.kr-checkbox::before,
#sogecommerce_rest_form label.kr-checkbox::after { content: none !important; display: none !important; }
/* encart « Montant » du smartform (affiché avec une carte enregistrée) : le total est déjà dans le résumé, absent en prod (Thomas 30/10) */
#sogecommerce_rest_form .kr-smart-form-embedded-header { display: none !important; }
/* PHAR-947 : CGV comme l'ancien site, phrase au-dessus du paiement (method-list.phtml), lien = pop-up des CGV */
.ps-cgv { margin: 0 0 12px; font-size: 13px; line-height: 1.4; color: var(--ps-texte); }
.ps-cgv__lien { text-decoration: underline; color: inherit; cursor: pointer; }
.ps-cgv-modale .actions-toolbar { display: flex; justify-content: flex-end; margin-top: 16px; }
/* PHAR-947 : commande réglée entièrement par l'avoir, encadré à la place de la liste des moyens de paiement */
.ps-paiement-avoir { background: #fff; border: 1px solid var(--ps-bord); border-radius: 12px; padding: 16px; }
.ps-paiement-avoir__texte { margin: 0 0 12px; font-size: 15px; color: var(--ps-texte); }
/* display : la règle Luma « .checkout-payment-method .payment-method-content { display: none } » (pages-tunnel) masquait CGV et
bouton « Valider ma commande » (préprod 10/11) ; ici pas de moyen à choisir, le détail est toujours visible */
.ps-paiements.ps-paiement-avoir .ps-paiement__detail.payment-method-content { display: flex; padding: 0; border: 0; }
.ps-paiement-avoir .ps-paiement__detail > .actions-toolbar { margin-bottom: 0; }